@navikt/ds-react 4.6.1 → 4.7.1

package/cjs/chips/Chips.js

@@ -75,8 +75,7 @@ exports.Chips = (0, react_1.forwardRef)((_a, ref) => {
             "navds-body-short navds-body-short--small": size === "medium",
             "navds-detail navds-detail--small": size === "small",
         }) }), react_1.default.Children.map(children, (chip, index) => {
-        var _a;
-        return react_1.default.createElement("li", { key: index + ((_a = chip === null || chip === void 0 ? void 0 : chip.toString()) !== null && _a !== void 0 ? _a : "") }, chip);
+        return react_1.default.createElement("li", { key: (chip === null || chip === void 0 ? void 0 : chip.toString()) || index }, chip);
     })));
 });
 exports.Chips.Toggle = Toggle_1.default;

package/cjs/date/hooks/useDatepicker.js

@@ -43,8 +43,7 @@ const useDatepicker = (opt = {}) => {
     const handleOpen = (0, react_1.useCallback)((open) => {
         var _a, _b;
         setOpen(open);
-        !open &&
-            setMonth((_b = (_a = selectedDay !== null && selectedDay !== void 0 ? selectedDay : defaultSelected) !== null && _a !== void 0 ? _a : defaultMonth) !== null && _b !== void 0 ? _b : today);
+        open && setMonth((_b = (_a = selectedDay !== null && selectedDay !== void 0 ? selectedDay : defaultSelected) !== null && _a !== void 0 ? _a : defaultMonth) !== null && _b !== void 0 ? _b : today);
     }, [defaultMonth, defaultSelected, selectedDay, today]);
     (0, useOutsideClickHandler_1.useOutsideClickHandler)(open, handleOpen, [
         daypickerRef,

package/cjs/date/hooks/useMonthPicker.js

@@ -48,8 +48,7 @@ const useMonthpicker = (opt = {}) => {
     const handleOpen = (0, react_1.useCallback)((open) => {
         var _a, _b;
         setOpen(open);
-        !open &&
-            setYear((_b = (_a = selectedMonth !== null && selectedMonth !== void 0 ? selectedMonth : defaultSelected) !== null && _a !== void 0 ? _a : defaultYear) !== null && _b !== void 0 ? _b : today);
+        open && setYear((_b = (_a = selectedMonth !== null && selectedMonth !== void 0 ? selectedMonth : defaultSelected) !== null && _a !== void 0 ? _a : defaultYear) !== null && _b !== void 0 ? _b : today);
     }, [defaultSelected, defaultYear, selectedMonth, today]);
     (0, useOutsideClickHandler_1.useOutsideClickHandler)(open, handleOpen, [
         monthpickerRef,

package/cjs/form/combobox/ClearButton.js

@@ -0,0 +1,27 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClearButton = void 0;
+const react_1 = __importDefault(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
+const ClearButton = (_a) => {
+    var { handleClear, clearButtonLabel } = _a, rest = __rest(_a, ["handleClear", "clearButtonLabel"]);
+    return (react_1.default.createElement("button", Object.assign({ type: "button", onClick: handleClear, className: "navds-combobox__button-clear" }, rest),
+        react_1.default.createElement("span", { className: "navds-sr-only" }, clearButtonLabel ? clearButtonLabel : "Tøm"),
+        react_1.default.createElement(aksel_icons_1.XMarkIcon, { "aria-hidden": true })));
+};
+exports.ClearButton = ClearButton;
+exports.default = exports.ClearButton;

package/cjs/form/combobox/Combobox.js

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Combobox = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const __1 = require("../..");
+const ClearButton_1 = __importDefault(require("./ClearButton"));
+const FilteredOptions_1 = __importDefault(require("./FilteredOptions/FilteredOptions"));
+const filteredOptionsContext_1 = require("./FilteredOptions/filteredOptionsContext");
+const SelectedOptions_1 = __importDefault(require("./SelectedOptions/SelectedOptions"));
+const ToggleListButton_1 = __importDefault(require("./ToggleListButton"));
+const selectedOptionsContext_1 = require("./SelectedOptions/selectedOptionsContext");
+const ComboboxWrapper_1 = __importDefault(require("./ComboboxWrapper"));
+const inputContext_1 = require("./Input/inputContext");
+const Input_1 = __importDefault(require("./Input/Input"));
+exports.Combobox = (0, react_1.forwardRef)((props, ref) => {
+    const { value: externalValue, onClear, className, hideLabel = false, description, label, clearButton = true, clearButtonLabel, toggleListButton = true, toggleListButtonLabel, inputClassName, shouldShowSelectedOptions = true } = props, rest = __rest(props, ["value", "onClear", "className", "hideLabel", "description", "label", "clearButton", "clearButtonLabel", "toggleListButton", "toggleListButtonLabel", "inputClassName", "shouldShowSelectedOptions"]);
+    const toggleListButtonRef = (0, react_1.useRef)(null);
+    const { currentOption, toggleIsListOpen } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
+    const { selectedOptions } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
+    const { clearInput, focusInput, hasError, inputDescriptionId, inputProps, inputRef, value, size = "medium", } = (0, inputContext_1.useInputContext)();
+    const mergedInputRef = (0, react_1.useMemo)(() => (0, __1.mergeRefs)([inputRef, ref]), [inputRef, ref]);
+    return (react_1.default.createElement(ComboboxWrapper_1.default, { className: className, hasError: hasError, inputProps: inputProps, inputSize: size, toggleIsListOpen: toggleIsListOpen, toggleListButtonRef: toggleListButtonRef },
+        react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, className: (0, clsx_1.default)("navds-form-field__label", {
+                "navds-sr-only": hideLabel,
+            }) }, label),
+        !!description && (react_1.default.createElement(__1.BodyShort, { as: "div", className: (0, clsx_1.default)("navds-form-field__description", {
+                "navds-sr-only": hideLabel,
+            }), id: inputDescriptionId, size: size }, description)),
+        react_1.default.createElement("div", { className: "navds-combobox__wrapper" },
+            react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-combobox__wrapper-inner navds-text-field__input", {
+                    "navds-combobox__wrapper-inner--virtually-unfocused": currentOption !== null,
+                }), onClick: focusInput },
+                !shouldShowSelectedOptions ? (react_1.default.createElement(Input_1.default, Object.assign({ id: inputProps.id, ref: mergedInputRef, inputClassName: inputClassName }, rest))) : (react_1.default.createElement(SelectedOptions_1.default, { selectedOptions: selectedOptions, size: size },
+                    react_1.default.createElement(Input_1.default, Object.assign({ id: inputProps.id, ref: mergedInputRef, inputClassName: inputClassName }, rest)))),
+                react_1.default.createElement("div", null,
+                    value && clearButton && (react_1.default.createElement(ClearButton_1.default, { handleClear: clearInput, clearButtonLabel: clearButtonLabel, tabIndex: -1 })),
+                    toggleListButton && (react_1.default.createElement(ToggleListButton_1.default, { toggleListButtonLabel: toggleListButtonLabel, ref: toggleListButtonRef })))),
+            react_1.default.createElement(FilteredOptions_1.default, null))));
+});
+exports.default = exports.Combobox;

package/cjs/form/combobox/ComboboxProvider.js

@@ -0,0 +1,99 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const Combobox_1 = __importDefault(require("./Combobox"));
+const filteredOptionsContext_1 = require("./FilteredOptions/filteredOptionsContext");
+const customOptionsContext_1 = require("./customOptionsContext");
+const selectedOptionsContext_1 = require("./SelectedOptions/selectedOptionsContext");
+const inputContext_1 = require("./Input/inputContext");
+/**
+ * A component that allows the user to search in a list of options
+ *
+ * Has options for allowing only one or multiple options to be selected,
+ * or adding new, user-submitted values.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/combobox)
+ *
+ * @example
+ * ```jsx
+ * const options = ["apple", "banana", "orange"];
+ *
+ * return (
+ *    <Combobox
+ *      label="Velg en verdi"
+ *      options={options}
+ *      id="my-combobox"
+ *      shouldAutoComplete
+ *    />
+ * )
+ * ```
+ */
+const ComboboxProvider = (0, react_1.forwardRef)((props, ref) => {
+    const { allowNewValues = false, children, defaultValue, error, errorId, filteredOptions, id, isListOpen, isLoading = false, isMultiSelect, onToggleSelected, selectedOptions, options, value, onChange, onClear, shouldAutocomplete, size } = props, rest = __rest(props, ["allowNewValues", "children", "defaultValue", "error", "errorId", "filteredOptions", "id", "isListOpen", "isLoading", "isMultiSelect", "onToggleSelected", "selectedOptions", "options", "value", "onChange", "onClear", "shouldAutocomplete", "size"]);
+    return (react_1.default.createElement(inputContext_1.InputContextProvider, { value: {
+            defaultValue,
+            error,
+            errorId,
+            id,
+            value,
+            onChange,
+            onClear,
+            shouldAutocomplete,
+            size,
+        } },
+        react_1.default.createElement(customOptionsContext_1.CustomOptionsProvider, null,
+            react_1.default.createElement(selectedOptionsContext_1.SelectedOptionsProvider, { value: {
+                    allowNewValues,
+                    isMultiSelect,
+                    selectedOptions,
+                    onToggleSelected,
+                    options,
+                } },
+                react_1.default.createElement(filteredOptionsContext_1.FilteredOptionsProvider, { value: {
+                        allowNewValues,
+                        filteredOptions,
+                        isListOpen,
+                        isLoading,
+                        isMultiSelect,
+                        options,
+                    } },
+                    react_1.default.createElement(Combobox_1.default, Object.assign({ ref: ref }, rest), children))))));
+});
+exports.default = ComboboxProvider;

package/cjs/form/combobox/ComboboxWrapper.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const ComboboxWrapper = ({ children, className, hasError, inputProps, inputSize, toggleIsListOpen, toggleListButtonRef, }) => {
+    const wrapperRef = (0, react_1.useRef)(null);
+    function onFocusInsideWrapper(e) {
+        var _a;
+        if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
+            (toggleListButtonRef === null || toggleListButtonRef === void 0 ? void 0 : toggleListButtonRef.current) !== e.target) {
+            toggleIsListOpen(true);
+        }
+    }
+    function onBlurWrapper(e) {
+        var _a;
+        if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
+            toggleIsListOpen(false);
+        }
+    }
+    return (react_1.default.createElement("div", { ref: wrapperRef, className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${inputSize}`, "navds-search", {
+            "navds-search--error": hasError,
+            "navds-search--disabled": !!inputProps.disabled,
+        }), onFocus: onFocusInsideWrapper, onBlur: onBlurWrapper }, children));
+};
+exports.default = ComboboxWrapper;

package/cjs/form/combobox/FilteredOptions/CheckIcon.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const CheckIcon = () => {
+    return (react_1.default.createElement("svg", { width: "16", height: "13", viewBox: "0 0 16 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", fill: "#005B82", d: "M14.2014 0L16 1.89047L4.77943 13L0 8.39552L1.79361 6.5L4.77418 9.3019L14.2014 0Z" })));
+};
+exports.default = CheckIcon;

package/cjs/form/combobox/FilteredOptions/FilteredOptions.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const __1 = require("../../..");
+const aksel_icons_1 = require("@navikt/aksel-icons");
+const filteredOptionsContext_1 = require("./filteredOptionsContext");
+const selectedOptionsContext_1 = require("../SelectedOptions/selectedOptionsContext");
+const inputContext_1 = require("../Input/inputContext");
+const FilteredOptions = () => {
+    const { inputProps: { id }, size, value, } = (0, inputContext_1.useInputContext)();
+    const { allowNewValues, isLoading, isListOpen, filteredOptions, filteredOptionsIndex, filteredOptionsRef, isValueNew, toggleIsListOpen, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
+    const { isMultiSelect, selectedOptions, toggleOption } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
+    return (react_1.default.createElement("ul", { ref: filteredOptionsRef, className: (0, clsx_1.default)("navds-combobox__list", {
+            "navds-combobox__list--closed": !isListOpen,
+        }), id: `${id}-filtered-options`, role: "listbox", tabIndex: -1 },
+        isLoading && (react_1.default.createElement("li", { className: "navds-combobox__list-item--loading", role: "option", "aria-selected": false, id: `${id}-is-loading` },
+            react_1.default.createElement(__1.Loader, { "aria-label": "S\u00F8ker..." }))),
+        isValueNew && allowNewValues && (react_1.default.createElement("li", { tabIndex: -1, onPointerUp: (event) => toggleOption(value, event), id: `${id}-combobox-new-option`, className: (0, clsx_1.default)("navds-combobox__list-item__new-option", {
+                "navds-combobox__list-item__new-option--focus": filteredOptionsIndex === -1,
+            }), role: "option", "aria-selected": false },
+            react_1.default.createElement(aksel_icons_1.PlusIcon, { "aria-hidden": true }),
+            react_1.default.createElement(__1.BodyShort, { size: size },
+                "Legg til",
+                " ",
+                react_1.default.createElement(__1.Label, { as: "span", size: size },
+                    "\u201C",
+                    value,
+                    "\u201D")))),
+        !isLoading && filteredOptions.length === 0 && (react_1.default.createElement("li", { className: "navds-combobox__list-item__no-options", role: "option", "aria-selected": false, id: `${id}-no-hits` }, "Ingen s\u00F8ketreff")),
+        filteredOptions.map((option, index) => (react_1.default.createElement("li", { className: (0, clsx_1.default)("navds-combobox__list-item", {
+                "navds-combobox__list-item--focus": index === filteredOptionsIndex,
+                "navds-combobox__list-item--selected": selectedOptions.includes(option),
+            }), id: `${id}-option-${option.replace(" ", "-")}`, key: option, tabIndex: -1, onPointerUp: (event) => {
+                toggleOption(option, event);
+                if (!isMultiSelect) {
+                    toggleIsListOpen(false);
+                }
+            }, role: "option", "aria-selected": selectedOptions.includes(option) },
+            react_1.default.createElement(__1.BodyShort, { size: size }, option),
+            selectedOptions.includes(option) && react_1.default.createElement(aksel_icons_1.CheckmarkIcon, null))))));
+};
+exports.default = FilteredOptions;

package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js

@@ -0,0 +1,208 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFilteredOptionsContext = exports.FilteredOptionsProvider = void 0;
+const react_1 = __importStar(require("react"));
+const customOptionsContext_1 = require("../customOptionsContext");
+const inputContext_1 = require("../Input/inputContext");
+const usePrevious_1 = __importDefault(require("../../../util/usePrevious"));
+const normalizeText = (text) => typeof text === "string" ? `${text}`.toLowerCase().trim() : "";
+const isPartOfText = (value, text) => normalizeText(text).startsWith(normalizeText(value !== null && value !== void 0 ? value : ""));
+const isValueInList = (value, list) => list === null || list === void 0 ? void 0 : list.find((listItem) => normalizeText(value) === normalizeText(listItem));
+const getMatchingValuesFromList = (value, list) => list === null || list === void 0 ? void 0 : list.filter((listItem) => isPartOfText(value, listItem));
+const FilteredOptionsContext = (0, react_1.createContext)({});
+const FilteredOptionsProvider = ({ children, value: props }) => {
+    const { allowNewValues, filteredOptions: externalFilteredOptions, isListOpen: isExternalListOpen, isLoading, options, } = props;
+    const filteredOptionsRef = (0, react_1.useRef)(null);
+    const { inputProps: { id }, value, searchTerm, setValue, setSearchTerm, shouldAutocomplete, } = (0, inputContext_1.useInputContext)();
+    const [filteredOptionsIndex, setFilteredOptionsIndex] = (0, react_1.useState)(null);
+    const [isInternalListOpen, setInternalListOpen] = (0, react_1.useState)(false);
+    const { customOptions } = (0, customOptionsContext_1.useCustomOptionsContext)();
+    const filteredOptions = (0, react_1.useMemo)(() => {
+        if (externalFilteredOptions) {
+            return externalFilteredOptions;
+        }
+        const opts = [...customOptions, ...options];
+        setFilteredOptionsIndex(null);
+        return getMatchingValuesFromList(searchTerm, opts);
+    }, [customOptions, externalFilteredOptions, options, searchTerm]);
+    const previousSearchTerm = (0, usePrevious_1.default)(searchTerm);
+    (0, react_1.useLayoutEffect)(() => {
+        if (shouldAutocomplete &&
+            normalizeText(searchTerm) !== "" &&
+            ((previousSearchTerm === null || previousSearchTerm === void 0 ? void 0 : previousSearchTerm.length) || 0) < searchTerm.length &&
+            filteredOptions.length > 0 &&
+            !isValueInList(searchTerm, filteredOptions)) {
+            setValue(`${searchTerm}${filteredOptions[0].substring(searchTerm.length)}`);
+            setSearchTerm(searchTerm);
+        }
+    }, [
+        filteredOptions,
+        previousSearchTerm,
+        searchTerm,
+        setSearchTerm,
+        setValue,
+        shouldAutocomplete,
+    ]);
+    const isListOpen = (0, react_1.useMemo)(() => {
+        return isExternalListOpen !== null && isExternalListOpen !== void 0 ? isExternalListOpen : isInternalListOpen;
+    }, [isExternalListOpen, isInternalListOpen]);
+    const toggleIsListOpen = (0, react_1.useCallback)((newState) => {
+        setFilteredOptionsIndex(null);
+        setInternalListOpen((oldState) => newState !== null && newState !== void 0 ? newState : !oldState);
+    }, []);
+    const isValueNew = (0, react_1.useMemo)(() => Boolean(value) && !isValueInList(value, filteredOptions), [value, filteredOptions]);
+    const getMinimumIndex = (0, react_1.useCallback)(() => {
+        return isValueNew && allowNewValues ? -1 : 0;
+    }, [allowNewValues, isValueNew]);
+    const ariaDescribedBy = (0, react_1.useMemo)(() => {
+        if (!isLoading && filteredOptions.length === 0) {
+            return `${id}-no-hits`;
+        }
+        else if ((value && value !== "") || isLoading) {
+            if (shouldAutocomplete && filteredOptions[0]) {
+                return `${id}-option-${filteredOptions[0].replace(" ", "-")}`;
+            }
+            else if (isLoading) {
+                return `${id}-is-loading`;
+            }
+        }
+        else {
+            return undefined;
+        }
+    }, [isLoading, value, shouldAutocomplete, filteredOptions, id]);
+    const currentOption = (0, react_1.useMemo)(() => {
+        if (filteredOptionsIndex == null) {
+            return null;
+        }
+        if (filteredOptionsIndex === -1) {
+            return value;
+        }
+        return filteredOptions[filteredOptionsIndex];
+    }, [filteredOptionsIndex, filteredOptions, value]);
+    const resetFilteredOptionsIndex = () => {
+        setFilteredOptionsIndex(getMinimumIndex());
+    };
+    const scrollToOption = (0, react_1.useCallback)((newIndex) => {
+        if (filteredOptionsRef.current &&
+            filteredOptionsRef.current.children[newIndex]) {
+            const child = filteredOptionsRef.current.children[newIndex];
+            const { top, bottom } = child.getBoundingClientRect();
+            const parentRect = filteredOptionsRef.current.getBoundingClientRect();
+            if (top < parentRect.top || bottom > parentRect.bottom) {
+                child.scrollIntoView({ block: "nearest" });
+            }
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (filteredOptionsIndex !== null && isListOpen) {
+            scrollToOption(filteredOptionsIndex);
+        }
+    }, [filteredOptionsIndex, isListOpen, scrollToOption]);
+    const moveFocusToInput = (0, react_1.useCallback)(() => {
+        setFilteredOptionsIndex(null);
+        toggleIsListOpen(false);
+    }, [toggleIsListOpen]);
+    const moveFocusToEnd = (0, react_1.useCallback)(() => {
+        const lastIndex = filteredOptions.length - 1;
+        toggleIsListOpen(true);
+        setFilteredOptionsIndex(lastIndex);
+    }, [filteredOptions.length, toggleIsListOpen]);
+    const moveFocusUp = (0, react_1.useCallback)(() => {
+        if (filteredOptionsIndex === null) {
+            return;
+        }
+        if (filteredOptionsIndex === getMinimumIndex()) {
+            toggleIsListOpen(false);
+            setFilteredOptionsIndex(null);
+        }
+        else {
+            const newIndex = Math.max(getMinimumIndex(), filteredOptionsIndex - 1);
+            setFilteredOptionsIndex(newIndex);
+        }
+    }, [filteredOptionsIndex, getMinimumIndex, toggleIsListOpen]);
+    const moveFocusDown = (0, react_1.useCallback)(() => {
+        if (filteredOptionsIndex === null || !isListOpen) {
+            toggleIsListOpen(true);
+            if (allowNewValues || filteredOptions.length >= 1) {
+                setFilteredOptionsIndex(getMinimumIndex());
+            }
+            return;
+        }
+        const newIndex = Math.min(filteredOptionsIndex + 1, Math.max(getMinimumIndex(), filteredOptions.length - 1));
+        setFilteredOptionsIndex(newIndex);
+    }, [
+        allowNewValues,
+        filteredOptions.length,
+        filteredOptionsIndex,
+        getMinimumIndex,
+        isListOpen,
+        toggleIsListOpen,
+    ]);
+    const activeDecendantId = (0, react_1.useMemo)(() => {
+        if (filteredOptionsIndex === null) {
+            return undefined;
+        }
+        else if (filteredOptionsIndex === -1) {
+            return `${id}-combobox-new-option`;
+        }
+        else {
+            return `${id}-option-${currentOption === null || currentOption === void 0 ? void 0 : currentOption.replace(" ", "-")}`;
+        }
+    }, [filteredOptionsIndex, currentOption, id]);
+    const filteredOptionsState = {
+        activeDecendantId,
+        allowNewValues,
+        filteredOptionsRef,
+        filteredOptionsIndex,
+        setFilteredOptionsIndex,
+        shouldAutocomplete,
+        isListOpen,
+        isLoading,
+        filteredOptions,
+        isValueNew,
+        toggleIsListOpen,
+        currentOption,
+        resetFilteredOptionsIndex,
+        moveFocusUp,
+        moveFocusDown,
+        moveFocusToInput,
+        moveFocusToEnd,
+        ariaDescribedBy,
+    };
+    return (react_1.default.createElement(FilteredOptionsContext.Provider, { value: filteredOptionsState }, children));
+};
+exports.FilteredOptionsProvider = FilteredOptionsProvider;
+const useFilteredOptionsContext = () => {
+    const context = (0, react_1.useContext)(FilteredOptionsContext);
+    if (!context) {
+        throw new Error("useFilteredOptionsContext must be used within a FilteredOptionsProvider");
+    }
+    return context;
+};
+exports.useFilteredOptionsContext = useFilteredOptionsContext;