@navikt/ds-react 4.6.0 → 4.7.0

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

@@ -0,0 +1,178 @@
+import React, { useState, useEffect, useMemo, createContext, useContext, useCallback, useRef, useLayoutEffect, } from "react";
+import { useCustomOptionsContext } from "../customOptionsContext";
+import { useInputContext } from "../Input/inputContext";
+import usePrevious from "../../../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 = createContext({});
+export const FilteredOptionsProvider = ({ children, value: props }) => {
+    const { allowNewValues, filteredOptions: externalFilteredOptions, isListOpen: isExternalListOpen, isLoading, options, } = props;
+    const filteredOptionsRef = useRef(null);
+    const { inputProps: { id }, value, searchTerm, setValue, setSearchTerm, shouldAutocomplete, } = useInputContext();
+    const [filteredOptionsIndex, setFilteredOptionsIndex] = useState(null);
+    const [isInternalListOpen, setInternalListOpen] = useState(false);
+    const { customOptions } = useCustomOptionsContext();
+    const filteredOptions = useMemo(() => {
+        if (externalFilteredOptions) {
+            return externalFilteredOptions;
+        }
+        const opts = [...customOptions, ...options];
+        setFilteredOptionsIndex(null);
+        return getMatchingValuesFromList(searchTerm, opts);
+    }, [customOptions, externalFilteredOptions, options, searchTerm]);
+    const previousSearchTerm = usePrevious(searchTerm);
+    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 = useMemo(() => {
+        return isExternalListOpen !== null && isExternalListOpen !== void 0 ? isExternalListOpen : isInternalListOpen;
+    }, [isExternalListOpen, isInternalListOpen]);
+    const toggleIsListOpen = useCallback((newState) => {
+        setFilteredOptionsIndex(null);
+        setInternalListOpen((oldState) => newState !== null && newState !== void 0 ? newState : !oldState);
+    }, []);
+    const isValueNew = useMemo(() => Boolean(value) && !isValueInList(value, filteredOptions), [value, filteredOptions]);
+    const getMinimumIndex = useCallback(() => {
+        return isValueNew && allowNewValues ? -1 : 0;
+    }, [allowNewValues, isValueNew]);
+    const ariaDescribedBy = 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 = useMemo(() => {
+        if (filteredOptionsIndex == null) {
+            return null;
+        }
+        if (filteredOptionsIndex === -1) {
+            return value;
+        }
+        return filteredOptions[filteredOptionsIndex];
+    }, [filteredOptionsIndex, filteredOptions, value]);
+    const resetFilteredOptionsIndex = () => {
+        setFilteredOptionsIndex(getMinimumIndex());
+    };
+    const scrollToOption = 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" });
+            }
+        }
+    }, []);
+    useEffect(() => {
+        if (filteredOptionsIndex !== null && isListOpen) {
+            scrollToOption(filteredOptionsIndex);
+        }
+    }, [filteredOptionsIndex, isListOpen, scrollToOption]);
+    const moveFocusToInput = useCallback(() => {
+        setFilteredOptionsIndex(null);
+        toggleIsListOpen(false);
+    }, [toggleIsListOpen]);
+    const moveFocusToEnd = useCallback(() => {
+        const lastIndex = filteredOptions.length - 1;
+        toggleIsListOpen(true);
+        setFilteredOptionsIndex(lastIndex);
+    }, [filteredOptions.length, toggleIsListOpen]);
+    const moveFocusUp = 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 = 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 = 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.createElement(FilteredOptionsContext.Provider, { value: filteredOptionsState }, children));
+};
+export const useFilteredOptionsContext = () => {
+    const context = useContext(FilteredOptionsContext);
+    if (!context) {
+        throw new Error("useFilteredOptionsContext must be used within a FilteredOptionsProvider");
+    }
+    return context;
+};
+//# sourceMappingURL=filteredOptionsContext.js.map

package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filteredOptionsContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/filteredOptionsContext.tsx"],"names":[],"mappings":"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"}

package/esm/form/combobox/Input/Input.d.ts

@@ -0,0 +1,10 @@
+import React, { InputHTMLAttributes } from "react";
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value"> {
+    ref: React.Ref<HTMLInputElement>;
+    inputClassName?: string;
+    errorId?: string;
+    value?: string;
+    error?: React.ReactNode;
+}
+declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default Input;

package/esm/form/combobox/Input/Input.js

@@ -0,0 +1,116 @@
+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;
+};
+import { omit } from "../../..";
+import React, { useCallback, forwardRef, } from "react";
+import cl from "clsx";
+import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
+import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
+import { useInputContext } from "./inputContext";
+const Input = forwardRef((_a, ref) => {
+    var { inputClassName, error, errorId } = _a, rest = __rest(_a, ["inputClassName", "error", "errorId"]);
+    const { clearInput, inputProps, onChange, size, value } = useInputContext();
+    const { selectedOptions, removeSelectedOption, toggleOption } = useSelectedOptionsContext();
+    const { activeDecendantId, allowNewValues, currentOption, filteredOptions, toggleIsListOpen, isListOpen, filteredOptionsIndex, moveFocusUp, moveFocusDown, ariaDescribedBy, moveFocusToInput, moveFocusToEnd, shouldAutocomplete, } = useFilteredOptionsContext();
+    const onEnter = useCallback((event) => {
+        if (currentOption) {
+            event.preventDefault();
+            // Selecting a value from the dropdown / FilteredOptions
+            toggleOption(currentOption, event);
+            clearInput(event);
+        }
+        else if (shouldAutocomplete && selectedOptions.includes(value)) {
+            event.preventDefault();
+            // Trying to set the same value that is already set, so just clearing the input
+            clearInput(event);
+        }
+        else if ((allowNewValues || shouldAutocomplete) && value !== "") {
+            event.preventDefault();
+            // Autocompleting or adding a new value
+            toggleOption(value, event);
+            clearInput(event);
+        }
+    }, [
+        allowNewValues,
+        clearInput,
+        currentOption,
+        selectedOptions,
+        shouldAutocomplete,
+        toggleOption,
+        value,
+    ]);
+    const handleKeyUp = (e) => {
+        e.preventDefault();
+        switch (e.key) {
+            case "Escape":
+                clearInput(e);
+                toggleIsListOpen(false);
+                break;
+            case "Enter":
+            case "Accept":
+                onEnter(e);
+                break;
+            case "Home":
+                moveFocusToInput();
+                break;
+            case "End":
+                moveFocusToEnd();
+                break;
+            default:
+                break;
+        }
+    };
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Backspace") {
+            if (value === "") {
+                const lastSelectedOption = selectedOptions[selectedOptions.length - 1];
+                removeSelectedOption(lastSelectedOption);
+            }
+        }
+        else if (e.key === "ArrowDown") {
+            // Check that cursor position is at the end of the input field,
+            // so we don't interfere with text editing
+            if (e.target.selectionStart === (value === null || value === void 0 ? void 0 : value.length)) {
+                e.preventDefault();
+                moveFocusDown();
+            }
+        }
+        else if (e.key === "ArrowUp") {
+            // Check that the FilteredOptions list is open and has virtual focus.
+            // Otherwise ignore keystrokes, so it doesn't interfere with text editing
+            if (isListOpen && filteredOptionsIndex !== null) {
+                e.preventDefault();
+                moveFocusUp();
+            }
+        }
+    }, [
+        value,
+        selectedOptions,
+        removeSelectedOption,
+        moveFocusDown,
+        isListOpen,
+        filteredOptionsIndex,
+        moveFocusUp,
+    ]);
+    const onChangeHandler = useCallback((event) => {
+        const newValue = event.target.value;
+        if (newValue && newValue !== "") {
+            toggleIsListOpen(true);
+        }
+        else if (filteredOptions.length === 0) {
+            toggleIsListOpen(false);
+        }
+        onChange(event);
+    }, [filteredOptions.length, onChange, toggleIsListOpen]);
+    return (React.createElement("input", Object.assign({}, rest, omit(inputProps, ["aria-invalid"]), { ref: ref, value: value, onChange: onChangeHandler, type: "text", role: "combobox", onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, "aria-controls": `${inputProps.id}-filtered-options`, "aria-expanded": !!isListOpen, autoComplete: "off", "aria-autocomplete": shouldAutocomplete ? "both" : "list", "aria-activedescendant": activeDecendantId, "aria-describedby": ariaDescribedBy, className: cl(inputClassName, "navds-combobox__input", "navds-body-short", `navds-body-${size}`) })));
+});
+export default Input;
+//# sourceMappingURL=Input.js.map

package/esm/form/combobox/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/form/combobox/Input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,KAAK,EAAE,EACZ,WAAW,EACX,UAAU,GAGX,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAWjD,MAAM,KAAK,GAAG,UAAU,CACtB,CAAC,EAA2C,EAAE,GAAG,EAAE,EAAE;QAApD,EAAE,cAAc,EAAE,KAAK,EAAE,OAAO,OAAW,EAAN,IAAI,cAAzC,sCAA2C,CAAF;IACxC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAC;IAC5E,MAAM,EAAE,eAAe,EAAE,oBAAoB,EAAE,YAAY,EAAE,GAC3D,yBAAyB,EAAE,CAAC;IAC9B,MAAM,EACJ,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,UAAU,EACV,oBAAoB,EACpB,WAAW,EACX,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,kBAAkB,GACnB,GAAG,yBAAyB,EAAE,CAAC;IAEhC,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,KAA0B,EAAE,EAAE;QAC7B,IAAI,aAAa,EAAE;YACjB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,wDAAwD;YACxD,YAAY,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;YACnC,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;aAAM,IAAI,kBAAkB,IAAI,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;YAChE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,+EAA+E;YAC/E,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;aAAM,IAAI,CAAC,cAAc,IAAI,kBAAkB,CAAC,IAAI,KAAK,KAAK,EAAE,EAAE;YACjE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,uCAAuC;YACvC,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;YAC3B,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;IACH,CAAC,EACD;QACE,cAAc;QACd,UAAU;QACV,aAAa;QACb,eAAe;QACf,kBAAkB;QAClB,YAAY;QACZ,KAAK;KACN,CACF,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAAwC,EAAE,EAAE;QAC/D,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,QAAQ,CAAC,CAAC,GAAG,EAAE;YACb,KAAK,QAAQ;gBACX,UAAU,CAAC,CAAC,CAAC,CAAC;gBACd,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBACxB,MAAM;YACR,KAAK,OAAO,CAAC;YACb,KAAK,QAAQ;gBACX,OAAO,CAAC,CAAC,CAAC,CAAC;gBACX,MAAM;YACR,KAAK,MAAM;gBACT,gBAAgB,EAAE,CAAC;gBACnB,MAAM;YACR,KAAK,KAAK;gBACR,cAAc,EAAE,CAAC;gBACjB,MAAM;YACR;gBACE,MAAM;SACT;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAC,EAAE,EAAE;QACJ,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE;YACzB,IAAI,KAAK,KAAK,EAAE,EAAE;gBAChB,MAAM,kBAAkB,GACtB,eAAe,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBAC9C,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;aAC1C;SACF;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE;YAChC,+DAA+D;YAC/D,0CAA0C;YAC1C,IAAI,CAAC,CAAC,MAAM,CAAC,cAAc,MAAK,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAA,EAAE;gBAC7C,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,aAAa,EAAE,CAAC;aACjB;SACF;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE;YAC9B,qEAAqE;YACrE,yEAAyE;YACzE,IAAI,UAAU,IAAI,oBAAoB,KAAK,IAAI,EAAE;gBAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,WAAW,EAAE,CAAC;aACf;SACF;IACH,CAAC,EACD;QACE,KAAK;QACL,eAAe;QACf,oBAAoB;QACpB,aAAa;QACb,UAAU;QACV,oBAAoB;QACpB,WAAW;KACZ,CACF,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,KAAoC,EAAE,EAAE;QACvC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACpC,IAAI,QAAQ,IAAI,QAAQ,KAAK,EAAE,EAAE;YAC/B,gBAAgB,CAAC,IAAI,CAAC,CAAC;SACxB;aAAM,IAAI,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE;YACvC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACzB;QACD,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC,EACD,CAAC,eAAe,CAAC,MAAM,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CACrD,CAAC;IAEF,OAAO,CACL,+CACM,IAAI,EACJ,IAAI,CAAC,UAAU,EAAE,CAAC,cAAc,CAAC,CAAC,IACtC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,eAAe,EACzB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,mBACT,GAAG,UAAU,CAAC,EAAE,mBAAmB,mBACnC,CAAC,CAAC,UAAU,EAC3B,YAAY,EAAC,KAAK,uBACC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,2BAChC,iBAAiB,sBACtB,eAAe,EACjC,SAAS,EAAE,EAAE,CACX,cAAc,EACd,uBAAuB,EACvB,kBAAkB,EAClB,cAAc,IAAI,EAAE,CACrB,IACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/esm/form/combobox/Input/inputContext.d.ts

@@ -0,0 +1,19 @@
+import React, { ChangeEventHandler } from "react";
+import { FormFieldType } from "../../useFormField";
+interface InputContextType extends FormFieldType {
+    clearInput: (event: React.PointerEvent | React.KeyboardEvent) => void;
+    focusInput: () => void;
+    inputRef: React.RefObject<HTMLInputElement>;
+    value: string;
+    setValue: (text: string) => void;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    searchTerm: string;
+    setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+    shouldAutocomplete?: boolean;
+}
+export declare const InputContextProvider: ({ children, value: props }: {
+    children: any;
+    value: any;
+}) => React.JSX.Element;
+export declare const useInputContext: () => InputContextType;
+export {};

package/esm/form/combobox/Input/inputContext.js

@@ -0,0 +1,59 @@
+import React, { createContext, useCallback, useContext, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { useFormField } from "../../useFormField";
+const InputContext = createContext({});
+export const InputContextProvider = ({ children, value: props }) => {
+    const { defaultValue = "", description, disabled, error, errorId, id: externalId, value: externalValue, onChange: externalOnChange, onClear, shouldAutocomplete, size, } = props;
+    const formFieldProps = useFormField({
+        description,
+        disabled,
+        error,
+        errorId,
+        id: externalId,
+        size,
+    }, "comboboxfield");
+    const inputRef = useRef(null);
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const value = useMemo(() => String(externalValue !== null && externalValue !== void 0 ? externalValue : internalValue), [externalValue, internalValue]);
+    const [searchTerm, setSearchTerm] = useState(value);
+    const onChange = useCallback((event) => {
+        const value = event.currentTarget.value;
+        externalValue !== null && externalValue !== void 0 ? externalValue : setInternalValue(value);
+        externalOnChange === null || externalOnChange === void 0 ? void 0 : externalOnChange(event);
+        setSearchTerm(value);
+    }, [externalValue, externalOnChange]);
+    const setValue = useCallback((text) => {
+        setInternalValue(text);
+    }, [setInternalValue]);
+    const clearInput = useCallback((event) => {
+        onClear === null || onClear === void 0 ? void 0 : onClear(event);
+        setValue("");
+        setSearchTerm("");
+    }, [onClear, setSearchTerm, setValue]);
+    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);
+    }, []);
+    useLayoutEffect(() => {
+        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]);
+    return (React.createElement(InputContext.Provider, { value: Object.assign(Object.assign({}, formFieldProps), { clearInput,
+            focusInput,
+            inputRef,
+            value,
+            setValue,
+            onChange,
+            searchTerm,
+            setSearchTerm,
+            shouldAutocomplete }) }, children));
+};
+export const useInputContext = () => {
+    const context = useContext(InputContext);
+    if (!context) {
+        throw new Error("useInputContext must be used within an InputContextProvider");
+    }
+    return context;
+};
+//# sourceMappingURL=inputContext.js.map

package/esm/form/combobox/Input/inputContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/Input/inputContext.tsx"],"names":[],"mappings":"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"}

package/esm/form/combobox/SelectedOptions/SelectedOptions.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface SelectedOptionsProps {
+    selectedOptions?: string[];
+    size?: "medium" | "small";
+    children: React.ReactNode;
+}
+declare const SelectedOptions: React.FC<SelectedOptionsProps>;
+export default SelectedOptions;

package/esm/form/combobox/SelectedOptions/SelectedOptions.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { Chips } from "../../..";
+import { useSelectedOptionsContext } from "./selectedOptionsContext";
+const Option = ({ option }) => {
+    const { isMultiSelect, removeSelectedOption } = useSelectedOptionsContext();
+    const onClick = (e) => {
+        e.stopPropagation();
+        removeSelectedOption(option);
+    };
+    if (!isMultiSelect) {
+        return (React.createElement("div", { className: "navds-combobox__selected-options--no-bg" }, option));
+    }
+    return React.createElement(Chips.Removable, { onClick: onClick }, option);
+};
+const SelectedOptions = ({ selectedOptions = [], size, children, }) => {
+    return (React.createElement(Chips, { className: "navds-combobox__selected-options", size: size },
+        selectedOptions.length
+            ? selectedOptions.map((option, i) => (React.createElement(Option, { key: option + i, option: option })))
+            : [],
+        children));
+};
+export default SelectedOptions;
+//# sourceMappingURL=SelectedOptions.js.map

package/esm/form/combobox/SelectedOptions/SelectedOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedOptions.js","sourceRoot":"","sources":["../../../../src/form/combobox/SelectedOptions/SelectedOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAQrE,MAAM,MAAM,GAAG,CAAC,EAAE,MAAM,EAAsB,EAAE,EAAE;IAChD,MAAM,EAAE,aAAa,EAAE,oBAAoB,EAAE,GAAG,yBAAyB,EAAE,CAAC;IAE5E,MAAM,OAAO,GAAG,CAAC,CAAC,EAAE,EAAE;QACpB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,CACL,6BAAK,SAAS,EAAC,yCAAyC,IAAE,MAAM,CAAO,CACxE,CAAC;KACH;IAED,OAAO,oBAAC,KAAK,CAAC,SAAS,IAAC,OAAO,EAAE,OAAO,IAAG,MAAM,CAAmB,CAAC;AACvE,CAAC,CAAC;AAEF,MAAM,eAAe,GAAmC,CAAC,EACvD,eAAe,GAAG,EAAE,EACpB,IAAI,EACJ,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAC,kCAAkC,EAAC,IAAI,EAAE,IAAI;QAC3D,eAAe,CAAC,MAAM;YACrB,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CACjC,oBAAC,MAAM,IAAC,GAAG,EAAE,MAAM,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,GAAI,CAC5C,CAAC;YACJ,CAAC,CAAC,EAAE;QACL,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/esm/form/combobox/SelectedOptions/selectedOptionsContext.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { ComboboxProps } from "../types";
+type SelectedOptionsContextType = {
+    addSelectedOption: (option: string) => void;
+    isMultiSelect?: boolean;
+    removeSelectedOption: (option: string) => void;
+    prevSelectedOptions?: string[];
+    selectedOptions: string[];
+    setSelectedOptions: (any: any) => void;
+    toggleOption: (option: string, event: React.KeyboardEvent | React.PointerEvent) => void;
+};
+export declare const SelectedOptionsProvider: ({ children, value, }: {
+    children: any;
+    value: Pick<ComboboxProps, "allowNewValues" | "isMultiSelect" | "options" | "selectedOptions" | "onToggleSelected">;
+}) => React.JSX.Element;
+export declare const useSelectedOptionsContext: () => SelectedOptionsContextType;
+export {};

package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js

@@ -0,0 +1,77 @@
+import React, { createContext, useCallback, useContext, useMemo, useState, } from "react";
+import usePrevious from "../../../util/usePrevious";
+import { useInputContext } from "../Input/inputContext";
+import { useCustomOptionsContext } from "../customOptionsContext";
+const SelectedOptionsContext = createContext({});
+export const SelectedOptionsProvider = ({ children, value, }) => {
+    const { clearInput, focusInput } = useInputContext();
+    const { customOptions, removeCustomOption, addCustomOption } = useCustomOptionsContext();
+    const { allowNewValues, isMultiSelect, selectedOptions: externalSelectedOptions, onToggleSelected, options, } = value;
+    const [internalSelectedOptions, setSelectedOptions] = useState([]);
+    const selectedOptions = useMemo(() => externalSelectedOptions !== null && externalSelectedOptions !== void 0 ? externalSelectedOptions : [...customOptions, ...internalSelectedOptions], [customOptions, externalSelectedOptions, internalSelectedOptions]);
+    const addSelectedOption = useCallback((option) => {
+        var _a;
+        if (!options
+            .map((opt) => opt.toLowerCase())
+            .includes((_a = option === null || option === void 0 ? void 0 : option.toLowerCase) === null || _a === void 0 ? void 0 : _a.call(option))) {
+            allowNewValues && addCustomOption(option);
+        }
+        else if (isMultiSelect) {
+            setSelectedOptions((prevSelectedOptions) => [
+                ...prevSelectedOptions,
+                option,
+            ]);
+        }
+        else {
+            setSelectedOptions([option]);
+        }
+        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, true);
+    }, [addCustomOption, allowNewValues, isMultiSelect, onToggleSelected, options]);
+    const removeSelectedOption = useCallback((option) => {
+        if (customOptions.includes(option)) {
+            removeCustomOption(option);
+        }
+        else {
+            setSelectedOptions((prevSelectedOptions) => prevSelectedOptions.filter((selectedOption) => selectedOption !== option));
+        }
+        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, false);
+    }, [customOptions, onToggleSelected, removeCustomOption]);
+    const toggleOption = useCallback((option, event) => {
+        if (selectedOptions.includes(option)) {
+            removeSelectedOption(option);
+        }
+        else {
+            addSelectedOption(option);
+        }
+        if (!isMultiSelect) {
+            clearInput(event);
+        }
+        focusInput();
+    }, [
+        addSelectedOption,
+        clearInput,
+        focusInput,
+        isMultiSelect,
+        removeSelectedOption,
+        selectedOptions,
+    ]);
+    const prevSelectedOptions = usePrevious(selectedOptions);
+    const selectedOptionsState = {
+        addSelectedOption,
+        isMultiSelect,
+        removeSelectedOption,
+        prevSelectedOptions,
+        selectedOptions,
+        setSelectedOptions,
+        toggleOption,
+    };
+    return (React.createElement(SelectedOptionsContext.Provider, { value: selectedOptionsState }, children));
+};
+export const useSelectedOptionsContext = () => {
+    const context = useContext(SelectedOptionsContext);
+    if (!context) {
+        throw new Error("useSelectedOptionsContext must be used within a SelectedOptionsProvider");
+    }
+    return context;
+};
+//# sourceMappingURL=selectedOptionsContext.js.map

package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectedOptionsContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/SelectedOptions/selectedOptionsContext.tsx"],"names":[],"mappings":"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"}

package/esm/form/combobox/ToggleListButton.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface ToggleListButtonProps {
+    toggleListButtonLabel?: string;
+}
+export declare const ToggleListButton: React.ForwardRefExoticComponent<ToggleListButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default ToggleListButton;

package/esm/form/combobox/ToggleListButton.js

@@ -0,0 +1,11 @@
+import React, { forwardRef } from "react";
+import { ChevronUpIcon, ChevronDownIcon } from "@navikt/aksel-icons";
+import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
+export const ToggleListButton = forwardRef(({ toggleListButtonLabel }, ref) => {
+    const { isListOpen, toggleIsListOpen } = useFilteredOptionsContext();
+    return (React.createElement("button", { type: "button", onPointerUp: () => toggleIsListOpen(), onKeyDown: ({ key }) => key === "Enter" && toggleIsListOpen(), className: "navds-combobox__button-toggle-list", "aria-expanded": isListOpen, tabIndex: -1, ref: ref },
+        React.createElement("span", { className: "navds-sr-only" }, toggleListButtonLabel !== null && toggleListButtonLabel !== void 0 ? toggleListButtonLabel : "Alternativer"),
+        isListOpen ? (React.createElement(ChevronUpIcon, { "aria-hidden": true })) : (React.createElement(ChevronDownIcon, { "aria-hidden": true }))));
+});
+export default ToggleListButton;
+//# sourceMappingURL=ToggleListButton.js.map

package/esm/form/combobox/ToggleListButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleListButton.js","sourceRoot":"","sources":["../../../src/form/combobox/ToggleListButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAErE,OAAO,EAAE,yBAAyB,EAAE,MAAM,0CAA0C,CAAC;AAMrF,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAGxC,CAAC,EAAE,qBAAqB,EAAE,EAAE,GAAG,EAAE,EAAE;IACnC,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,yBAAyB,EAAE,CAAC;IACrE,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,GAAG,EAAE,CAAC,gBAAgB,EAAE,EACrC,SAAS,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,gBAAgB,EAAE,EAC7D,SAAS,EAAC,oCAAoC,mBAC/B,UAAU,EACzB,QAAQ,EAAE,CAAC,CAAC,EACZ,GAAG,EAAE,GAAG;QAER,8BAAM,SAAS,EAAC,eAAe,IAC5B,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,cAAc,CACnC;QACN,UAAU,CAAC,CAAC,CAAC,CACZ,oBAAC,aAAa,0BAAe,CAC9B,CAAC,CAAC,CAAC,CACF,oBAAC,eAAe,0BAAe,CAChC,CACM,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,gBAAgB,CAAC"}

package/esm/form/combobox/customOptionsContext.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+type CustomOptionsContextType = {
+    customOptions: string[];
+    removeCustomOption: (option: string) => void;
+    addCustomOption: (option: string) => void;
+};
+export declare const CustomOptionsProvider: ({ children }: {
+    children: any;
+}) => React.JSX.Element;
+export declare const useCustomOptionsContext: () => CustomOptionsContextType;
+export {};

package/esm/form/combobox/customOptionsContext.js

@@ -0,0 +1,29 @@
+import React, { useState, useCallback, createContext, useContext } from "react";
+import { useInputContext } from "./Input/inputContext";
+const CustomOptionsContext = createContext({});
+export const CustomOptionsProvider = ({ children }) => {
+    const [customOptions, setCustomOptions] = useState([]);
+    const { focusInput } = useInputContext();
+    const removeCustomOption = useCallback((option) => {
+        setCustomOptions((prevCustomOptions) => prevCustomOptions.filter((o) => o !== option));
+        focusInput();
+    }, [focusInput, setCustomOptions]);
+    const addCustomOption = useCallback((option) => {
+        setCustomOptions((prevOptions) => [...prevOptions, option]);
+        focusInput();
+    }, [focusInput, setCustomOptions]);
+    const customOptionsState = {
+        customOptions,
+        removeCustomOption,
+        addCustomOption,
+    };
+    return (React.createElement(CustomOptionsContext.Provider, { value: customOptionsState }, children));
+};
+export const useCustomOptionsContext = () => {
+    const context = useContext(CustomOptionsContext);
+    if (!context) {
+        throw new Error("useCustomOptionsContext must be used within a CustomOptionsProvider");
+    }
+    return context;
+};
+//# sourceMappingURL=customOptionsContext.js.map

package/esm/form/combobox/customOptionsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customOptionsContext.js","sourceRoot":"","sources":["../../../src/form/combobox/customOptionsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAQvD,MAAM,oBAAoB,GAAG,aAAa,CACxC,EAA8B,CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACpD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACjE,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAC;IAEzC,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,MAAM,EAAE,EAAE;QACT,gBAAgB,CAAC,CAAC,iBAAiB,EAAE,EAAE,CACrC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,MAAM,CAAC,CAC9C,CAAC;QACF,UAAU,EAAE,CAAC;IACf,CAAC,EACD,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAC/B,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,MAAM,EAAE,EAAE;QACT,gBAAgB,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,GAAG,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;QAC5D,UAAU,EAAE,CAAC;IACf,CAAC,EACD,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAC/B,CAAC;IAEF,MAAM,kBAAkB,GAAG;QACzB,aAAa;QACb,kBAAkB;QAClB,eAAe;KAChB,CAAC;IAEF,OAAO,CACL,oBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,kBAAkB,IACrD,QAAQ,CACqB,CACjC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACjD,IAAI,CAAC,OAAO,EAAE;QACZ,MAAM,IAAI,KAAK,CACb,qEAAqE,CACtE,CAAC;KACH;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}

package/esm/form/combobox/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Combobox } from "./ComboboxProvider";
+export { type ComboboxProps } from "./types";

package/esm/form/combobox/index.js

@@ -0,0 +1,2 @@
+export { default as Combobox } from "./ComboboxProvider";
+//# sourceMappingURL=index.js.map