@navikt/ds-react/esm/form/combobox/Input/Input.context.js

React components from the Norwegian Labour and Welfare Administration.

import React, { useCallback, useMemo, useRef, useState } from "react";
import { createContext } from "../../../util/create-context.js";
import { useClientLayoutEffect } from "../../../util/hooks/index.js";
import { useFormField } from "../../useFormField.js";
const [InputContextProvider, useInputContext] = createContext({
    name: "InputContext",
    errorMessage: "useInputContext must be used within an InputContextProvider",
});
const InputProvider = ({ children, value: props }) => {
    const { defaultValue = "", description, disabled, readOnly, error, errorId, id: externalId, value: externalValue, onChange: externalOnChange, onClear, shouldAutocomplete, size, } = props;
    const formFieldProps = useFormField({
        description,
        disabled,
        readOnly,
        error,
        errorId,
        id: externalId,
        size,
    }, "comboboxfield");
    const inputRef = useRef(null);
    const toggleOpenButtonRef = useRef(null);
    const [internalValue, setInternalValue] = useState(defaultValue);
    const [hideCaret, setHideCaret] = useState(false);
    const [anchorRef, setAnchorRef] = useState(null);
    const value = useMemo(() => String(externalValue !== null && externalValue !== void 0 ? externalValue : internalValue), [externalValue, internalValue]);
    const [searchTerm, setSearchTerm] = useState(value);
    const onChange = useCallback((newValue) => {
        externalValue !== null && externalValue !== void 0 ? externalValue : setInternalValue(newValue);
        setSearchTerm(newValue);
        externalOnChange === null || externalOnChange === void 0 ? void 0 : externalOnChange(newValue);
    }, [externalValue, externalOnChange]);
    const clearInput = useCallback((event) => {
        onClear === null || onClear === void 0 ? void 0 : onClear(event);
        externalOnChange === null || externalOnChange === void 0 ? void 0 : externalOnChange("");
        setInternalValue("");
        setSearchTerm("");
    }, [externalOnChange, onClear]);
    const focusInput = useCallback(() => {
        var _a, _b;
        (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
    }, []);
    useClientLayoutEffect(() => {
        var _a, _b;
        if (shouldAutocomplete && inputRef && value !== searchTerm) {
            (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange) === null || _b === void 0 ? void 0 : _b.call(_a, searchTerm.length, value.length);
        }
    }, [value, searchTerm, shouldAutocomplete]);
    const contextValue = Object.assign(Object.assign({}, formFieldProps), { clearInput,
        error,
        focusInput,
        inputRef,
        value, setValue: setInternalValue, onChange,
        searchTerm,
        setSearchTerm,
        shouldAutocomplete,
        toggleOpenButtonRef,
        hideCaret,
        setHideCaret,
        anchorRef,
        setAnchorRef });
    return (React.createElement(InputContextProvider, Object.assign({}, contextValue), children));
};
export { InputProvider as InputContextProvider, useInputContext };
//# sourceMappingURL=Input.context.js.map