@navikt/ds-react 4.6.0 → 4.7.0

package/cjs/form/combobox/Input/Input.js

@@ -0,0 +1,143 @@
+"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 __1 = require("../../..");
+const react_1 = __importStar(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const selectedOptionsContext_1 = require("../SelectedOptions/selectedOptionsContext");
+const filteredOptionsContext_1 = require("../FilteredOptions/filteredOptionsContext");
+const inputContext_1 = require("./inputContext");
+const Input = (0, react_1.forwardRef)((_a, ref) => {
+    var { inputClassName, error, errorId } = _a, rest = __rest(_a, ["inputClassName", "error", "errorId"]);
+    const { clearInput, inputProps, onChange, size, value } = (0, inputContext_1.useInputContext)();
+    const { selectedOptions, removeSelectedOption, toggleOption } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
+    const { activeDecendantId, allowNewValues, currentOption, filteredOptions, toggleIsListOpen, isListOpen, filteredOptionsIndex, moveFocusUp, moveFocusDown, ariaDescribedBy, moveFocusToInput, moveFocusToEnd, shouldAutocomplete, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
+    const onEnter = (0, react_1.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 = (0, react_1.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 = (0, react_1.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_1.default.createElement("input", Object.assign({}, rest, (0, __1.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: (0, clsx_1.default)(inputClassName, "navds-combobox__input", "navds-body-short", `navds-body-${size}`) })));
+});
+exports.default = Input;

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

@@ -0,0 +1,86 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInputContext = exports.InputContextProvider = void 0;
+const react_1 = __importStar(require("react"));
+const useFormField_1 = require("../../useFormField");
+const InputContext = (0, react_1.createContext)({});
+const InputContextProvider = ({ children, value: props }) => {
+    const { defaultValue = "", description, disabled, error, errorId, id: externalId, value: externalValue, onChange: externalOnChange, onClear, shouldAutocomplete, size, } = props;
+    const formFieldProps = (0, useFormField_1.useFormField)({
+        description,
+        disabled,
+        error,
+        errorId,
+        id: externalId,
+        size,
+    }, "comboboxfield");
+    const inputRef = (0, react_1.useRef)(null);
+    const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue);
+    const value = (0, react_1.useMemo)(() => String(externalValue !== null && externalValue !== void 0 ? externalValue : internalValue), [externalValue, internalValue]);
+    const [searchTerm, setSearchTerm] = (0, react_1.useState)(value);
+    const onChange = (0, react_1.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 = (0, react_1.useCallback)((text) => {
+        setInternalValue(text);
+    }, [setInternalValue]);
+    const clearInput = (0, react_1.useCallback)((event) => {
+        onClear === null || onClear === void 0 ? void 0 : onClear(event);
+        setValue("");
+        setSearchTerm("");
+    }, [onClear, setSearchTerm, setValue]);
+    const focusInput = (0, react_1.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);
+    }, []);
+    (0, react_1.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_1.default.createElement(InputContext.Provider, { value: Object.assign(Object.assign({}, formFieldProps), { clearInput,
+            focusInput,
+            inputRef,
+            value,
+            setValue,
+            onChange,
+            searchTerm,
+            setSearchTerm,
+            shouldAutocomplete }) }, children));
+};
+exports.InputContextProvider = InputContextProvider;
+const useInputContext = () => {
+    const context = (0, react_1.useContext)(InputContext);
+    if (!context) {
+        throw new Error("useInputContext must be used within an InputContextProvider");
+    }
+    return context;
+};
+exports.useInputContext = useInputContext;

package/cjs/form/combobox/SelectedOptions/SelectedOptions.js

@@ -0,0 +1,27 @@
+"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 __1 = require("../../..");
+const selectedOptionsContext_1 = require("./selectedOptionsContext");
+const Option = ({ option }) => {
+    const { isMultiSelect, removeSelectedOption } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
+    const onClick = (e) => {
+        e.stopPropagation();
+        removeSelectedOption(option);
+    };
+    if (!isMultiSelect) {
+        return (react_1.default.createElement("div", { className: "navds-combobox__selected-options--no-bg" }, option));
+    }
+    return react_1.default.createElement(__1.Chips.Removable, { onClick: onClick }, option);
+};
+const SelectedOptions = ({ selectedOptions = [], size, children, }) => {
+    return (react_1.default.createElement(__1.Chips, { className: "navds-combobox__selected-options", size: size },
+        selectedOptions.length
+            ? selectedOptions.map((option, i) => (react_1.default.createElement(Option, { key: option + i, option: option })))
+            : [],
+        children));
+};
+exports.default = SelectedOptions;

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

@@ -0,0 +1,107 @@
+"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.useSelectedOptionsContext = exports.SelectedOptionsProvider = void 0;
+const react_1 = __importStar(require("react"));
+const usePrevious_1 = __importDefault(require("../../../util/usePrevious"));
+const inputContext_1 = require("../Input/inputContext");
+const customOptionsContext_1 = require("../customOptionsContext");
+const SelectedOptionsContext = (0, react_1.createContext)({});
+const SelectedOptionsProvider = ({ children, value, }) => {
+    const { clearInput, focusInput } = (0, inputContext_1.useInputContext)();
+    const { customOptions, removeCustomOption, addCustomOption } = (0, customOptionsContext_1.useCustomOptionsContext)();
+    const { allowNewValues, isMultiSelect, selectedOptions: externalSelectedOptions, onToggleSelected, options, } = value;
+    const [internalSelectedOptions, setSelectedOptions] = (0, react_1.useState)([]);
+    const selectedOptions = (0, react_1.useMemo)(() => externalSelectedOptions !== null && externalSelectedOptions !== void 0 ? externalSelectedOptions : [...customOptions, ...internalSelectedOptions], [customOptions, externalSelectedOptions, internalSelectedOptions]);
+    const addSelectedOption = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, usePrevious_1.default)(selectedOptions);
+    const selectedOptionsState = {
+        addSelectedOption,
+        isMultiSelect,
+        removeSelectedOption,
+        prevSelectedOptions,
+        selectedOptions,
+        setSelectedOptions,
+        toggleOption,
+    };
+    return (react_1.default.createElement(SelectedOptionsContext.Provider, { value: selectedOptionsState }, children));
+};
+exports.SelectedOptionsProvider = SelectedOptionsProvider;
+const useSelectedOptionsContext = () => {
+    const context = (0, react_1.useContext)(SelectedOptionsContext);
+    if (!context) {
+        throw new Error("useSelectedOptionsContext must be used within a SelectedOptionsProvider");
+    }
+    return context;
+};
+exports.useSelectedOptionsContext = useSelectedOptionsContext;

package/cjs/form/combobox/ToggleListButton.js

@@ -0,0 +1,36 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleListButton = void 0;
+const react_1 = __importStar(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
+const filteredOptionsContext_1 = require("./FilteredOptions/filteredOptionsContext");
+exports.ToggleListButton = (0, react_1.forwardRef)(({ toggleListButtonLabel }, ref) => {
+    const { isListOpen, toggleIsListOpen } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
+    return (react_1.default.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_1.default.createElement("span", { className: "navds-sr-only" }, toggleListButtonLabel !== null && toggleListButtonLabel !== void 0 ? toggleListButtonLabel : "Alternativer"),
+        isListOpen ? (react_1.default.createElement(aksel_icons_1.ChevronUpIcon, { "aria-hidden": true })) : (react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { "aria-hidden": true }))));
+});
+exports.default = exports.ToggleListButton;

package/cjs/form/combobox/customOptionsContext.js

@@ -0,0 +1,56 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCustomOptionsContext = exports.CustomOptionsProvider = void 0;
+const react_1 = __importStar(require("react"));
+const inputContext_1 = require("./Input/inputContext");
+const CustomOptionsContext = (0, react_1.createContext)({});
+const CustomOptionsProvider = ({ children }) => {
+    const [customOptions, setCustomOptions] = (0, react_1.useState)([]);
+    const { focusInput } = (0, inputContext_1.useInputContext)();
+    const removeCustomOption = (0, react_1.useCallback)((option) => {
+        setCustomOptions((prevCustomOptions) => prevCustomOptions.filter((o) => o !== option));
+        focusInput();
+    }, [focusInput, setCustomOptions]);
+    const addCustomOption = (0, react_1.useCallback)((option) => {
+        setCustomOptions((prevOptions) => [...prevOptions, option]);
+        focusInput();
+    }, [focusInput, setCustomOptions]);
+    const customOptionsState = {
+        customOptions,
+        removeCustomOption,
+        addCustomOption,
+    };
+    return (react_1.default.createElement(CustomOptionsContext.Provider, { value: customOptionsState }, children));
+};
+exports.CustomOptionsProvider = CustomOptionsProvider;
+const useCustomOptionsContext = () => {
+    const context = (0, react_1.useContext)(CustomOptionsContext);
+    if (!context) {
+        throw new Error("useCustomOptionsContext must be used within a CustomOptionsProvider");
+    }
+    return context;
+};
+exports.useCustomOptionsContext = useCustomOptionsContext;

package/cjs/form/combobox/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Combobox = void 0;
+var ComboboxProvider_1 = require("./ComboboxProvider");
+Object.defineProperty(exports, "Combobox", { enumerable: true, get: function () { return __importDefault(ComboboxProvider_1).default; } });

package/cjs/form/combobox/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../../esm/form/combobox/index.js",
+  "types": "../../../esm/form/combobox/index.d.ts"
+}

package/cjs/form/combobox/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/form/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextField = exports.Textarea = exports.Counter = exports.Switch = exports.Select = exports.Search = exports.RadioGroup = exports.Radio = exports.FieldsetContext = exports.Fieldset = exports.ErrorSummary = exports.ConfirmationPanel = exports.CheckboxGroup = exports.Checkbox = void 0;
+exports.TextField = exports.Textarea = exports.Counter = exports.Switch = exports.Select = exports.UNSAFE_Combobox = exports.Search = exports.RadioGroup = exports.Radio = exports.FieldsetContext = exports.Fieldset = exports.ErrorSummary = exports.ConfirmationPanel = exports.CheckboxGroup = exports.Checkbox = void 0;
 var checkbox_1 = require("./checkbox");
 Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return checkbox_1.Checkbox; } });
 Object.defineProperty(exports, "CheckboxGroup", { enumerable: true, get: function () { return checkbox_1.CheckboxGroup; } });
@@ -19,6 +19,8 @@ Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { r
 Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return radio_1.RadioGroup; } });
 var search_1 = require("./search");
 Object.defineProperty(exports, "Search", { enumerable: true, get: function () { return search_1.Search; } });
+var combobox_1 = require("./combobox");
+Object.defineProperty(exports, "UNSAFE_Combobox", { enumerable: true, get: function () { return combobox_1.Combobox; } });
 var Select_1 = require("./Select");
 Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return __importDefault(Select_1).default; } });
 var Switch_1 = require("./Switch");

package/cjs/timeline/AxisLabels.js

@@ -11,7 +11,7 @@ const react_1 = __importDefault(require("react"));
 const useTimelineContext_1 = require("./hooks/useTimelineContext");
 const utils_1 = require("./utils");
 const calc_1 = require("./utils/calc");
-const dayLabels = (start, end, totalDays, direction) => {
+const dayLabels = (start, end, totalDays, direction, template = "dd.MM") => {
     const increment = Math.ceil(totalDays / 10);
     const lastDay = (0, date_fns_1.startOfDay)(end);
     return new Array(totalDays)
@@ -24,7 +24,7 @@ const dayLabels = (start, end, totalDays, direction) => {
         return {
             direction: direction,
             horizontalPosition: horizontalPosition,
-            label: (0, date_fns_1.format)(day, "dd.MM", { locale: nb_1.default }),
+            label: (0, date_fns_1.format)(day, template, { locale: nb_1.default }),
             date: day,
             width: width,
         };
@@ -32,7 +32,7 @@ const dayLabels = (start, end, totalDays, direction) => {
         .filter((label) => label !== null);
 };
 exports.dayLabels = dayLabels;
-const monthLabels = (start, end, direction) => {
+const monthLabels = (start, end, direction, template = "MMM yy") => {
     const startMonth = (0, date_fns_1.startOfMonth)(start);
     const endMonth = (0, date_fns_1.endOfMonth)(end);
     const numberOfMonths = (0, date_fns_1.differenceInMonths)(endMonth, startMonth) + 1;
@@ -42,14 +42,14 @@ const monthLabels = (start, end, direction) => {
         return {
             direction: direction,
             horizontalPosition: horizontalPosition,
-            label: (0, date_fns_1.format)(month, "MMM yy", { locale: nb_1.default }),
+            label: (0, date_fns_1.format)(month, template, { locale: nb_1.default }),
             date: month,
             width: width,
         };
     });
 };
 exports.monthLabels = monthLabels;
-const yearLabels = (start, end, direction) => {
+const yearLabels = (start, end, direction, template = "yyyy") => {
     const firstYear = (0, date_fns_1.startOfYear)(start);
     const lastYear = (0, date_fns_1.endOfYear)(end);
     const yearCount = (0, date_fns_1.differenceInYears)(lastYear, start) + 1;
@@ -59,28 +59,28 @@ const yearLabels = (start, end, direction) => {
         return {
             direction: direction,
             horizontalPosition: horizontalPosition,
-            label: year.getFullYear().toString(),
+            label: (0, date_fns_1.format)(year, template, { locale: nb_1.default }),
             date: year,
             width: width,
         };
     });
 };
 exports.yearLabels = yearLabels;
-const axisLabels = (start, end, direction) => {
+const axisLabels = (start, end, direction, templates) => {
     const totalDays = (0, date_fns_1.differenceInDays)(end, start);
     if (totalDays < 40) {
-        return (0, exports.dayLabels)(start, end, totalDays, direction);
+        return (0, exports.dayLabels)(start, end, totalDays, direction, templates === null || templates === void 0 ? void 0 : templates.day);
     }
     else if (totalDays < 370) {
-        return (0, exports.monthLabels)(start, end, direction);
+        return (0, exports.monthLabels)(start, end, direction, templates === null || templates === void 0 ? void 0 : templates.month);
     }
     else {
-        return (0, exports.yearLabels)(start, end, direction);
+        return (0, exports.yearLabels)(start, end, direction, templates === null || templates === void 0 ? void 0 : templates.year);
     }
 };
-const AxisLabels = () => {
+const AxisLabels = ({ templates, }) => {
     const { endDate, startDate, direction } = (0, useTimelineContext_1.useTimelineContext)();
-    const labels = axisLabels(startDate, endDate, direction).filter(utils_1.isVisible);
+    const labels = axisLabels(startDate, endDate, direction, templates).filter(utils_1.isVisible);
     return (react_1.default.createElement("div", { className: "navds-timeline__axislabels", "aria-hidden": "true" }, labels.map((etikett) => (react_1.default.createElement(Detail_1.Detail, { className: "navds-timeline__axislabels-label", as: "div", key: etikett.label, style: {
             justifyContent: direction === "left" ? "flex-start" : "flex-end",
             [direction]: `${etikett.horizontalPosition}%`,

package/cjs/timeline/Timeline.js

@@ -68,7 +68,7 @@ const zoom_1 = __importDefault(require("./zoom"));
  * ```
  */
 exports.Timeline = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, startDate, endDate, direction = "left" } = _a, rest = __rest(_a, ["children", "startDate", "endDate", "direction"]);
+    var { children, startDate, endDate, direction = "left", axisLabelTemplates } = _a, rest = __rest(_a, ["children", "startDate", "endDate", "direction", "axisLabelTemplates"]);
     const isMultipleRows = Array.isArray(children);
     const firstFocusabled = (0, react_1.useRef)([]);
     if (!isMultipleRows) {
@@ -158,7 +158,7 @@ exports.Timeline = (0, react_1.forwardRef)((_a, ref) => {
         } },
         react_1.default.createElement("div", Object.assign({}, rest, { ref: ref }),
             react_1.default.createElement("div", { className: "navds-timeline" },
-                react_1.default.createElement(AxisLabels_1.AxisLabels, null),
+                react_1.default.createElement(AxisLabels_1.AxisLabels, { templates: axisLabelTemplates }),
                 pins.map((pin) => {
                     return pin;
                 }),

package/cjs/util/usePrevious.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/*
+ * usePrevious hook
+ * The ref object's "current" property is mutable and when changed wont re-render the component
+ * meaning it can be used to stay "one render behind" the current state
+ * https://usehooks.com/usePrevious/
+ * https://blog.logrocket.com/accessing-previous-props-state-react-hooks/
+ */
+const usePrevious = (value) => {
+    const ref = (0, react_1.useRef)(value);
+    (0, react_1.useEffect)(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+};
+exports.default = usePrevious;

package/esm/chips/Chips.js

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

package/esm/chips/Chips.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chips.js","sourceRoot":"","sources":["../../src/chips/Chips.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,WAAiC,MAAM,UAAU,CAAC;AACzD,OAAO,cAAuC,MAAM,aAAa,CAAC;AA8BlE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,KAAK,GAAmB,UAAU,CAC7C,CAAC,EAAiD,EAAE,GAAG,EAAE,EAAE;QAA1D,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA/C,iCAAiD,CAAF;IAC9C,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,gBAAgB,IAAI,EAAE,EAAE;YAC9D,0CAA0C,EAAE,IAAI,KAAK,QAAQ;YAC7D,kCAAkC,EAAE,IAAI,KAAK,OAAO;SACrD,CAAC,KAED,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;QAC5C,OAAO,4BAAI,GAAG,EAAE,KAAK,GAAG,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,EAAE,mCAAI,EAAE,CAAC,IAAG,IAAI,CAAM,CAAC;IAChE,CAAC,CAAC,CACC,CACN,CAAC;AACJ,CAAC,CACgB,CAAC;AAEpB,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,SAAS,GAAG,cAAc,CAAC;AAEjC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Chips.js","sourceRoot":"","sources":["../../src/chips/Chips.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,WAAiC,MAAM,UAAU,CAAC;AACzD,OAAO,cAAuC,MAAM,aAAa,CAAC;AA8BlE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,KAAK,GAAmB,UAAU,CAC7C,CAAC,EAAiD,EAAE,GAAG,EAAE,EAAE;QAA1D,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA/C,iCAAiD,CAAF;IAC9C,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,gBAAgB,IAAI,EAAE,EAAE;YAC9D,0CAA0C,EAAE,IAAI,KAAK,QAAQ;YAC7D,kCAAkC,EAAE,IAAI,KAAK,OAAO;SACrD,CAAC,KAED,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC5C,OAAO,4BAAI,GAAG,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,EAAE,KAAI,KAAK,IAAG,IAAI,CAAM,CAAC;IACzD,CAAC,CAAC,CACC,CACN,CAAC;AACJ,CAAC,CACgB,CAAC;AAEpB,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,SAAS,GAAG,cAAc,CAAC;AAEjC,eAAe,KAAK,CAAC"}

package/esm/date/DateInput.js

@@ -33,6 +33,7 @@ const DateInput = forwardRef((props, ref) => {
             "navds-date__field--error": hasError,
             "navds-form-field--disabled": !!inputProps.disabled,
             "navds-text-field--disabled": !!inputProps.disabled,
+            "navds-form-field--readonly": readOnly,
             "navds-text-field--readonly": readOnly,
             "navds-date__field--readonly": readOnly,
         }) },