@navikt/ds-react 4.6.1 → 4.7.0

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":"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"}

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":"AAAA,OAAO,KAAK,EAAE,EAGZ,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAiB,MAAM,oBAAoB,CAAC;AAcjE,MAAM,YAAY,GAAG,aAAa,CAAmB,EAAsB,CAAC,CAAC;AAE7E,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,MAAM,EACJ,YAAY,GAAG,EAAE,EACjB,WAAW,EACX,QAAQ,EACR,KAAK,EACL,OAAO,EACP,EAAE,EAAE,UAAU,EACd,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,gBAAgB,EAC1B,OAAO,EACP,kBAAkB,EAClB,IAAI,GACL,GAAG,KAAK,CAAC;IACV,MAAM,cAAc,GAAG,YAAY,CACjC;QACE,WAAW;QACX,QAAQ;QACR,KAAK;QACL,OAAO;QACP,EAAE,EAAE,UAAU;QACd,IAAI;KACL,EACD,eAAe,CAChB,CAAC;IACF,MAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IACvD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAS,YAAY,CAAC,CAAC;IAEzE,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,MAAM,CAAC,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,aAAa,CAAC,EAC5C,CAAC,aAAa,EAAE,aAAa,CAAC,CAC/B,CAAC;IAEF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAoC,EAAE,EAAE;QACvC,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;QACxC,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACzC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,KAAK,CAAC,CAAC;QAC1B,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAClC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,IAAI,EAAE,EAAE;QACP,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAA+C,EAAE,EAAE;QAClD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;QACjB,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,aAAa,CAAC,EAAE,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,CACnC,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;;QAClC,MAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,kDAAI,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,eAAe,CAAC,GAAG,EAAE;;QACnB,IAAI,kBAAkB,IAAI,QAAQ,IAAI,KAAK,KAAK,UAAU,EAAE;YAC1D,MAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,iBAAiB,mDAAG,UAAU,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;SACxE;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAE5C,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,IACpB,KAAK,kCACA,cAAc,KACjB,UAAU;YACV,UAAU;YACV,QAAQ;YACR,KAAK;YACL,QAAQ;YACR,QAAQ;YACR,UAAU;YACV,aAAa;YACb,kBAAkB,OAGnB,QAAQ,CACa,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACzC,IAAI,CAAC,OAAO,EAAE;QACZ,MAAM,IAAI,KAAK,CACb,6DAA6D,CAC9D,CAAC;KACH;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/form/combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAC"}

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

@@ -0,0 +1,119 @@
+import React, { ChangeEvent, InputHTMLAttributes } from "react";
+import { FormFieldProps } from "../useFormField";
+export interface ComboboxProps extends FormFieldProps, Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value"> {
+    /**
+     * Combobox label
+     */
+    label: React.ReactNode;
+    /**
+     * List of options to use for autocompletion
+     */
+    options: string[];
+    /**
+     * If enabled, adds an option to add the value of the input as an option whenever there are no options matching the value.
+     */
+    allowNewValues?: boolean;
+    /**
+     * If "true" adds a button to clear the value in the input field
+     */
+    clearButton?: boolean;
+    /**
+     * Custom name for the clear button. Requires "clearButton" to be "true".
+     *
+     * @default "Tøm"
+     */
+    clearButtonLabel?: string;
+    /**
+     * A list of options to display in the dropdown list.
+     * If provided, this overrides the internal search logic in the component.
+     * Useful for e.g. searching on a server or when overriding the search algorithm to search for synonyms or similar.
+     */
+    filteredOptions?: string[];
+    /**
+     * Optionally hide the label visually.
+     * Not recommended, but can be considered for e.g. search fields in the top menu.
+     */
+    hideLabel?: boolean;
+    /**
+     * Custom class name for the input field.
+     *
+     * If used for styling, please consider using tokens instead.
+     */
+    inputClassName?: string | undefined;
+    /**
+     * Controlled open/closed state for the dropdown list
+     */
+    isListOpen?: boolean;
+    /**
+     * Set to "true" when doing an async search and waiting for new filteredOptions.
+     *
+     * Will show a spinner in the dropdown and announce to screen readers that it is loading.
+     */
+    isLoading?: boolean;
+    /**
+     * Set to "true" to allow multiple selections
+     *
+     * This will display selected values as a list of Chips in front of the input field, instead of a selection replacing the value of the input.
+     *
+     */
+    isMultiSelect?: boolean;
+    /**
+     * Callback function triggered whenever the value of the input field is triggered.
+     *
+     * @param event
+     * @returns
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function triggered whenever the input field is cleared
+     *
+     * @param event
+     * @returns
+     */
+    onClear?: (event: React.PointerEvent | React.KeyboardEvent) => void;
+    /**
+     * Callback function triggered whenever an option is selected or de-selected
+     *
+     * @param option
+     * @param isSelected
+     * @returns
+     */
+    onToggleSelected?: (option: string, isSelected: boolean) => void;
+    /**
+     * List of selected options.
+     *
+     * Use this prop when controlling the selected state outside for the component,
+     * e.g. for a filter, where options can be toggled elsewhere/programmatically.
+     */
+    selectedOptions?: string[];
+    /**
+     * Set to "true" to enable inline autocomplete.
+     *
+     * @default false
+     */
+    shouldAutocomplete?: boolean;
+    /**
+     * When set to "true" displays selected options as Chips before the input field
+     *
+     * @default true
+     */
+    shouldShowSelectedOptions?: boolean;
+    /**
+     * When set to "true" displays the toggle button for opening/closing the dropdown list
+     *
+     * @default true
+     */
+    toggleListButton?: boolean;
+    /**
+     * Custom name for the toggle list-button. Requires "toggleListButton" to be "true".
+     *
+     * @default "Alternativer"
+     */
+    toggleListButtonLabel?: string;
+    /**
+     * Set this to override the value of the input field.
+     *
+     * This converts the input to a controlled input, so you have to use onChange to update the value.
+     */
+    value?: string;
+}

package/esm/form/combobox/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/form/combobox/types.ts"],"names":[],"mappings":""}

package/esm/form/index.d.ts

@@ -4,6 +4,7 @@ export { ErrorSummary, type ErrorSummaryProps } from "./error-summary";
 export { Fieldset, FieldsetContext, type FieldsetProps } from "./Fieldset";
 export { Radio, RadioGroup, type RadioGroupProps, type RadioProps, } from "./radio";
 export { Search, type SearchClearEvent, type SearchProps } from "./search";
+export { Combobox as UNSAFE_Combobox, type ComboboxProps } from "./combobox";
 export { default as Select, type SelectProps } from "./Select";
 export { default as Switch, type SwitchProps } from "./Switch";
 export { Counter, default as Textarea, type TextareaProps } from "./Textarea";

package/esm/form/index.js

@@ -4,6 +4,7 @@ export { ErrorSummary } from "./error-summary";
 export { Fieldset, FieldsetContext } from "./Fieldset";
 export { Radio, RadioGroup, } from "./radio";
 export { Search } from "./search";
+export { Combobox as UNSAFE_Combobox } from "./combobox";
 export { default as Select } from "./Select";
 export { default as Switch } from "./Switch";
 export { Counter, default as Textarea } from "./Textarea";

package/esm/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,aAAa,GAGd,MAAM,YAAY,CAAC;AACpB,OAAO,EAEL,OAAO,IAAI,iBAAiB,GAC7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,YAAY,EAA0B,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAsB,MAAM,YAAY,CAAC;AAC3E,OAAO,EACL,KAAK,EACL,UAAU,GAGX,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,MAAM,EAA2C,MAAM,UAAU,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAoB,MAAM,UAAU,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAoB,MAAM,UAAU,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAuB,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,aAAa,GAGd,MAAM,YAAY,CAAC;AACpB,OAAO,EAEL,OAAO,IAAI,iBAAiB,GAC7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,YAAY,EAA0B,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAsB,MAAM,YAAY,CAAC;AAC3E,OAAO,EACL,KAAK,EACL,UAAU,GAGX,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,MAAM,EAA2C,MAAM,UAAU,CAAC;AAC3E,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAsB,MAAM,YAAY,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAoB,MAAM,UAAU,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAoB,MAAM,UAAU,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAuB,MAAM,aAAa,CAAC"}

package/esm/form/radio/useRadio.d.ts

@@ -3,7 +3,7 @@ import { RadioProps } from "./Radio";
  * Handles props for Radios in context with Fieldset and RadioGroup
  */
 export declare const useRadio: (props: RadioProps) => {
-    readOnly: true | undefined;
+    readOnly: boolean | undefined;
     inputProps: {
         name: string | undefined;
         defaultChecked: boolean | undefined;
@@ -12,10 +12,10 @@ export declare const useRadio: (props: RadioProps) => {
         onClick: (e: any) => void;
         required: boolean | undefined;
         type: string;
-        "aria-describedby": string | undefined;
-        disabled: boolean | undefined;
-        "aria-invalid"?: boolean | undefined;
         id: string;
+        "aria-invalid"?: boolean | undefined;
+        "aria-describedby"?: string | undefined;
+        disabled?: boolean | undefined;
     };
     showErrorMsg: boolean;
     hasError: boolean;