@navikt/ds-react/esm/form/combobox/ComboboxWrapper.js

React components from the Norwegian Labour and Welfare Administration.

import React, { useRef, useState } from "react";
import { useRenameCSS } from "../../theme/Theme.js";
import { useInputContext } from "./Input/Input.context.js";
const ComboboxWrapper = ({ children, className, hasError, inputProps, inputSize, }) => {
    const { cn } = useRenameCSS();
    const { toggleOpenButtonRef, clearInput, readOnly } = useInputContext();
    const wrapperRef = useRef(null);
    const [hasFocusWithin, setHasFocusWithin] = useState(false);
    function onFocusInsideWrapper(event) {
        var _a;
        if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) &&
            (toggleOpenButtonRef === null || toggleOpenButtonRef === void 0 ? void 0 : toggleOpenButtonRef.current) !== event.target) {
            setHasFocusWithin(true);
        }
    }
    function onBlurWrapper(event) {
        var _a;
        if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget))) {
            setHasFocusWithin(false);
            clearInput(event);
        }
    }
    return (React.createElement("div", { ref: wrapperRef, className: cn(className, "navds-form-field", `navds-form-field--${inputSize}`, {
            "navds-combobox--error": hasError,
            "navds-combobox--disabled": !!inputProps.disabled,
            "navds-combobox--focused": hasFocusWithin,
            "navds-combobox--readonly": readOnly,
            "navds-form-field--readonly": readOnly,
        }), onFocus: onFocusInsideWrapper, onBlur: onBlurWrapper }, children));
};
export default ComboboxWrapper;
//# sourceMappingURL=ComboboxWrapper.js.map