@navikt/ds-react 5.15.0 → 5.16.0

package/_docs.json

@@ -10641,6 +10641,107 @@
       }
     }
   },
+  {
+    "filePath": "src/util/create-context.tsx",
+    "displayName": "createContext",
+    "props": {
+      "hookName": {
+        "defaultValue": null,
+        "description": "",
+        "name": "hookName",
+        "parent": {
+          "fileName": "src/util/create-context.tsx",
+          "name": "CreateContextOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "src/util/create-context.tsx",
+            "name": "CreateContextOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "providerName": {
+        "defaultValue": null,
+        "description": "",
+        "name": "providerName",
+        "parent": {
+          "fileName": "src/util/create-context.tsx",
+          "name": "CreateContextOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "src/util/create-context.tsx",
+            "name": "CreateContextOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "errorMessage": {
+        "defaultValue": null,
+        "description": "",
+        "name": "errorMessage",
+        "parent": {
+          "fileName": "src/util/create-context.tsx",
+          "name": "CreateContextOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "src/util/create-context.tsx",
+            "name": "CreateContextOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "name": {
+        "defaultValue": null,
+        "description": "",
+        "name": "name",
+        "parent": {
+          "fileName": "src/util/create-context.tsx",
+          "name": "CreateContextOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "src/util/create-context.tsx",
+            "name": "CreateContextOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "defaultValue": {
+        "defaultValue": null,
+        "description": "",
+        "name": "defaultValue",
+        "parent": {
+          "fileName": "src/util/create-context.tsx",
+          "name": "CreateContextOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "src/util/create-context.tsx",
+            "name": "CreateContextOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "T"
+        }
+      }
+    }
+  },
   {
     "filePath": "src/date/context/useSharedMonthContext.tsx",
     "displayName": "SharedMonthProvider",
@@ -14984,6 +15085,25 @@
           "name": "string[]"
         }
       },
+      "maxSelected": {
+        "defaultValue": null,
+        "description": "Options for the maximum number of selected options.",
+        "name": "maxSelected",
+        "parent": {
+          "fileName": "react/src/form/combobox/types.ts",
+          "name": "ComboboxProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/form/combobox/types.ts",
+            "name": "ComboboxProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "MaxSelected"
+        }
+      },
       "shouldAutocomplete": {
         "defaultValue": {
           "value": "false"
@@ -15437,6 +15557,25 @@
           "name": "string[]"
         }
       },
+      "maxSelected": {
+        "defaultValue": null,
+        "description": "Options for the maximum number of selected options.",
+        "name": "maxSelected",
+        "parent": {
+          "fileName": "react/src/form/combobox/types.ts",
+          "name": "ComboboxProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/form/combobox/types.ts",
+            "name": "ComboboxProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "MaxSelected"
+        }
+      },
       "shouldAutocomplete": {
         "defaultValue": {
           "value": "false"
@@ -19527,7 +19666,7 @@
         ],
         "required": true,
         "type": {
-          "name": "Pick<ComboboxProps, \"allowNewValues\" | \"isMultiSelect\" | \"options\" | \"selectedOptions\" | \"onToggleSelected\">"
+          "name": "Pick<ComboboxProps, \"allowNewValues\" | \"isMultiSelect\" | \"options\" | \"selectedOptions\" | \"onToggleSelected\" | \"maxSelected\">"
         }
       }
     }
@@ -19682,5 +19821,10 @@
         }
       }
     }
+  },
+  {
+    "filePath": "src/util/hooks/descendants/useDescendant.tsx",
+    "displayName": "createDescendantContext",
+    "props": {}
   }
 ]

package/cjs/form/combobox/Combobox.js

@@ -67,7 +67,7 @@ exports.Combobox = (0, react_1.forwardRef)((props, ref) => {
             }), id: inputDescriptionId, size: size }, description)),
         react_1.default.createElement("div", { className: "navds-combobox__wrapper" },
             react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-combobox__wrapper-inner navds-text-field__input", {
-                    "navds-combobox__wrapper-inner--virtually-unfocused": activeDecendantId !== null,
+                    "navds-combobox__wrapper-inner--virtually-unfocused": activeDecendantId !== undefined,
                 }), onClick: focusInput },
                 !shouldShowSelectedOptions ? (react_1.default.createElement(Input_1.default, Object.assign({ id: inputProps.id, ref: mergedInputRef, inputClassName: inputClassName }, rest))) : (react_1.default.createElement(SelectedOptions_1.default, { selectedOptions: selectedOptions, size: size },
                     react_1.default.createElement(Input_1.default, Object.assign({ id: inputProps.id, ref: mergedInputRef, inputClassName: inputClassName }, rest)))),

package/cjs/form/combobox/ComboboxProvider.js

@@ -66,7 +66,7 @@ const customOptionsContext_1 = require("./customOptionsContext");
  * ```
  */
 const ComboboxProvider = (0, react_1.forwardRef)((props, ref) => {
-    const { allowNewValues = false, children, defaultValue, error, errorId, filteredOptions, id, isListOpen, isLoading = false, isMultiSelect, onToggleSelected, selectedOptions, options, value, onChange, onClear, shouldAutocomplete, size } = props, rest = __rest(props, ["allowNewValues", "children", "defaultValue", "error", "errorId", "filteredOptions", "id", "isListOpen", "isLoading", "isMultiSelect", "onToggleSelected", "selectedOptions", "options", "value", "onChange", "onClear", "shouldAutocomplete", "size"]);
+    const { allowNewValues = false, children, defaultValue, error, errorId, filteredOptions, id, isListOpen, isLoading = false, isMultiSelect, onToggleSelected, selectedOptions, maxSelected, options, value, onChange, onClear, shouldAutocomplete, size } = props, rest = __rest(props, ["allowNewValues", "children", "defaultValue", "error", "errorId", "filteredOptions", "id", "isListOpen", "isLoading", "isMultiSelect", "onToggleSelected", "selectedOptions", "maxSelected", "options", "value", "onChange", "onClear", "shouldAutocomplete", "size"]);
     return (react_1.default.createElement(inputContext_1.InputContextProvider, { value: {
             defaultValue,
             error,
@@ -83,6 +83,7 @@ const ComboboxProvider = (0, react_1.forwardRef)((props, ref) => {
                     allowNewValues,
                     isMultiSelect,
                     selectedOptions,
+                    maxSelected,
                     onToggleSelected,
                     options,
                 } },

package/cjs/form/combobox/ComboboxWrapper.js

@@ -50,6 +50,6 @@ const ComboboxWrapper = ({ children, className, hasError, inputProps, inputSize,
             "navds-combobox--error": hasError,
             "navds-combobox--disabled": !!inputProps.disabled,
             "navds-combobox--focused": hasFocusWithin,
-        }), onFocus: onFocusInsideWrapper, onBlur: onBlurWrapper, tabIndex: -1 }, children));
+        }), onFocus: onFocusInsideWrapper, onBlur: onBlurWrapper }, children));
 };
 exports.default = ComboboxWrapper;

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

@@ -13,50 +13,68 @@ const selectedOptionsContext_1 = require("../SelectedOptions/selectedOptionsCont
 const filtered_options_util_1 = __importDefault(require("./filtered-options-util"));
 const filteredOptionsContext_1 = require("./filteredOptionsContext");
 const FilteredOptions = () => {
+    var _a;
     const { inputProps: { id }, size, value, } = (0, inputContext_1.useInputContext)();
     const { allowNewValues, isLoading, isListOpen, filteredOptions, setFilteredOptionsRef, isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice, isValueNew, toggleIsListOpen, activeDecendantId, virtualFocus, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
-    const { isMultiSelect, selectedOptions, toggleOption } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
-    return (react_1.default.createElement("ul", { ref: setFilteredOptionsRef, className: (0, clsx_1.default)("navds-combobox__list", {
+    const { isMultiSelect, selectedOptions, toggleOption, maxSelected } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
+    const isDisabled = (option) => (maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.isLimitReached) && !selectedOptions.includes(option);
+    const shouldRenderNonSelectables = (maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.isLimitReached) || // Render maxSelected message
+        isLoading || // Render loading message
+        (!isLoading && filteredOptions.length === 0); // Render no hits message
+    const shouldRenderFilteredOptionsList = (allowNewValues && isValueNew && !(maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.isLimitReached)) || // Render add new option
+        filteredOptions.length > 0; // Render filtered options
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-combobox__list", {
             "navds-combobox__list--closed": !isListOpen,
             "navds-combobox__list--with-hover": isMouseLastUsedInputDevice,
-        }), id: filtered_options_util_1.default.getFilteredOptionsId(id), role: "listbox", tabIndex: -1 },
-        isLoading && (react_1.default.createElement("li", { className: "navds-combobox__list-item--loading", role: "option", "aria-selected": false, id: filtered_options_util_1.default.getIsLoadingId(id), "data-no-focus": "true" },
-            react_1.default.createElement(loader_1.Loader, { "aria-label": "S\u00F8ker..." }))),
-        isValueNew && allowNewValues && (react_1.default.createElement("li", { tabIndex: -1, onMouseMove: () => {
-                if (activeDecendantId !== filtered_options_util_1.default.getAddNewOptionId(id)) {
-                    virtualFocus.moveFocusToElement(filtered_options_util_1.default.getAddNewOptionId(id));
-                    setIsMouseLastUsedInputDevice(true);
-                }
-            }, onPointerUp: (event) => {
-                toggleOption(value, event);
-                if (!isMultiSelect && !selectedOptions.includes(value))
-                    toggleIsListOpen(false);
-            }, id: filtered_options_util_1.default.getAddNewOptionId(id), className: (0, clsx_1.default)("navds-combobox__list-item__new-option", {
-                "navds-combobox__list-item__new-option--focus": activeDecendantId === filtered_options_util_1.default.getAddNewOptionId(id),
-            }), role: "option", "aria-selected": false },
-            react_1.default.createElement(aksel_icons_1.PlusIcon, { "aria-hidden": true }),
-            react_1.default.createElement(typography_1.BodyShort, { size: size },
-                "Legg til",
-                " ",
-                react_1.default.createElement(typography_1.Label, { as: "span", size: size },
-                    "\u201C",
-                    value,
-                    "\u201D")))),
-        !isLoading && filteredOptions.length === 0 && (react_1.default.createElement("li", { className: "navds-combobox__list-item__no-options", role: "option", "aria-selected": false, id: filtered_options_util_1.default.getNoHitsId(id), "data-no-focus": "true" }, "Ingen s\u00F8ketreff")),
-        filteredOptions.map((option) => (react_1.default.createElement("li", { className: (0, clsx_1.default)("navds-combobox__list-item", {
-                "navds-combobox__list-item--focus": activeDecendantId === filtered_options_util_1.default.getOptionId(id, option),
-                "navds-combobox__list-item--selected": selectedOptions.includes(option),
-            }), id: filtered_options_util_1.default.getOptionId(id, option), key: option, tabIndex: -1, onMouseMove: () => {
-                if (activeDecendantId !== filtered_options_util_1.default.getOptionId(id, option)) {
-                    virtualFocus.moveFocusToElement(filtered_options_util_1.default.getOptionId(id, option));
-                    setIsMouseLastUsedInputDevice(true);
-                }
-            }, onPointerUp: (event) => {
-                toggleOption(option, event);
-                if (!isMultiSelect && !selectedOptions.includes(option))
-                    toggleIsListOpen(false);
-            }, role: "option", "aria-selected": selectedOptions.includes(option) },
-            react_1.default.createElement(typography_1.BodyShort, { size: size }, option),
-            selectedOptions.includes(option) && react_1.default.createElement(aksel_icons_1.CheckmarkIcon, null))))));
+        }), id: filtered_options_util_1.default.getFilteredOptionsId(id), tabIndex: -1 },
+        shouldRenderNonSelectables && (react_1.default.createElement("div", { className: "navds-combobox__list_non-selectables", role: "status" },
+            (maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.isLimitReached) && (react_1.default.createElement("div", { className: "navds-combobox__list-item--max-selected", id: filtered_options_util_1.default.getMaxSelectedOptionsId(id) }, (_a = maxSelected.message) !== null && _a !== void 0 ? _a : `${selectedOptions.length} av ${maxSelected.limit} er valgt.`)),
+            isLoading && (react_1.default.createElement("div", { className: "navds-combobox__list-item--loading", id: filtered_options_util_1.default.getIsLoadingId(id) },
+                react_1.default.createElement(loader_1.Loader, { title: "S\u00F8ker..." }))),
+            !isLoading && filteredOptions.length === 0 && (react_1.default.createElement("div", { className: "navds-combobox__list-item--no-options", id: filtered_options_util_1.default.getNoHitsId(id) }, "Ingen s\u00F8ketreff")))),
+        shouldRenderFilteredOptionsList && (react_1.default.createElement("ul", { ref: setFilteredOptionsRef, role: "listbox", className: "navds-combobox__list-options" },
+            isValueNew && !(maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.isLimitReached) && allowNewValues && (react_1.default.createElement("li", { tabIndex: -1, onMouseMove: () => {
+                    if (activeDecendantId !==
+                        filtered_options_util_1.default.getAddNewOptionId(id)) {
+                        virtualFocus.moveFocusToElement(filtered_options_util_1.default.getAddNewOptionId(id));
+                        setIsMouseLastUsedInputDevice(true);
+                    }
+                }, onPointerUp: (event) => {
+                    toggleOption(value, event);
+                    if (!isMultiSelect && !selectedOptions.includes(value))
+                        toggleIsListOpen(false);
+                }, id: filtered_options_util_1.default.getAddNewOptionId(id), className: (0, clsx_1.default)("navds-combobox__list-item navds-combobox__list-item--new-option", {
+                    "navds-combobox__list-item--new-option--focus": activeDecendantId ===
+                        filtered_options_util_1.default.getAddNewOptionId(id),
+                }), role: "option", "aria-selected": false },
+                react_1.default.createElement(aksel_icons_1.PlusIcon, { "aria-hidden": true }),
+                react_1.default.createElement(typography_1.BodyShort, { size: size },
+                    "Legg til",
+                    " ",
+                    react_1.default.createElement(typography_1.Label, { as: "span", size: size },
+                        "\u201C",
+                        value,
+                        "\u201D")))),
+            filteredOptions.map((option) => (react_1.default.createElement("li", { className: (0, clsx_1.default)("navds-combobox__list-item", {
+                    "navds-combobox__list-item--focus": activeDecendantId ===
+                        filtered_options_util_1.default.getOptionId(id, option),
+                    "navds-combobox__list-item--selected": selectedOptions.includes(option),
+                }), "data-no-focus": isDisabled(option) || undefined, id: filtered_options_util_1.default.getOptionId(id, option), key: option, tabIndex: -1, onMouseMove: () => {
+                    if (activeDecendantId !==
+                        filtered_options_util_1.default.getOptionId(id, option)) {
+                        virtualFocus.moveFocusToElement(filtered_options_util_1.default.getOptionId(id, option));
+                        setIsMouseLastUsedInputDevice(true);
+                    }
+                }, onPointerUp: (event) => {
+                    if (isDisabled(option)) {
+                        return;
+                    }
+                    toggleOption(option, event);
+                    if (!isMultiSelect && !selectedOptions.includes(option)) {
+                        toggleIsListOpen(false);
+                    }
+                }, role: "option", "aria-selected": selectedOptions.includes(option), "aria-disabled": isDisabled(option) || undefined },
+                react_1.default.createElement(typography_1.BodyShort, { size: size }, option),
+                selectedOptions.includes(option) && react_1.default.createElement(aksel_icons_1.CheckmarkIcon, null))))))));
 };
 exports.default = FilteredOptions;

package/cjs/form/combobox/FilteredOptions/filtered-options-util.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const normalizeText = (text) => typeof text === "string" ? text.toLocaleLowerCase().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 getMatchingValuesFromList = (value, list, alwaysIncluded) => list === null || list === void 0 ? void 0 : list.filter((listItem) => isPartOfText(value, listItem) || alwaysIncluded.includes(listItem));
 const getFilteredOptionsId = (comboboxId) => `${comboboxId}-filtered-options`;
 const getOptionId = (comboboxId, option) => `${comboboxId.toLocaleLowerCase()}-option-${option
     .replace(" ", "-")
@@ -11,6 +11,7 @@ const getOptionId = (comboboxId, option) => `${comboboxId.toLocaleLowerCase()}-o
 const getAddNewOptionId = (comboboxId) => `${comboboxId}-combobox-new-option`;
 const getIsLoadingId = (comboboxId) => `${comboboxId}-is-loading`;
 const getNoHitsId = (comboboxId) => `${comboboxId}-no-hits`;
+const getMaxSelectedOptionsId = (comboboxId) => `${comboboxId}-max-selected-options`;
 exports.default = {
     normalizeText,
     isPartOfText,
@@ -21,4 +22,5 @@ exports.default = {
     getOptionId,
     getIsLoadingId,
     getNoHitsId,
+    getMaxSelectedOptionsId,
 };

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

@@ -31,6 +31,7 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const hooks_1 = require("../../../util/hooks");
 const inputContext_1 = require("../Input/inputContext");
+const selectedOptionsContext_1 = require("../SelectedOptions/selectedOptionsContext");
 const customOptionsContext_1 = require("../customOptionsContext");
 const filtered_options_util_1 = __importDefault(require("./filtered-options-util"));
 const useVirtualFocus_1 = __importDefault(require("./useVirtualFocus"));
@@ -40,6 +41,7 @@ const FilteredOptionsProvider = ({ children, value: props, }) => {
     const [filteredOptionsRef, setFilteredOptionsRef] = (0, react_1.useState)(null);
     const virtualFocus = (0, useVirtualFocus_1.default)(filteredOptionsRef);
     const { inputProps: { "aria-describedby": partialAriaDescribedBy, id }, value, searchTerm, setValue, setSearchTerm, shouldAutocomplete, } = (0, inputContext_1.useInputContext)();
+    const { selectedOptions, maxSelected } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
     const [isInternalListOpen, setInternalListOpen] = (0, react_1.useState)(false);
     const { customOptions } = (0, customOptionsContext_1.useCustomOptionsContext)();
     const filteredOptions = (0, react_1.useMemo)(() => {
@@ -47,8 +49,14 @@ const FilteredOptionsProvider = ({ children, value: props, }) => {
             return externalFilteredOptions;
         }
         const opts = [...customOptions, ...options];
-        return filtered_options_util_1.default.getMatchingValuesFromList(searchTerm, opts);
-    }, [customOptions, externalFilteredOptions, options, searchTerm]);
+        return filtered_options_util_1.default.getMatchingValuesFromList(searchTerm, opts, selectedOptions);
+    }, [
+        customOptions,
+        externalFilteredOptions,
+        options,
+        searchTerm,
+        selectedOptions,
+    ]);
     const previousSearchTerm = (0, hooks_1.usePrevious)(searchTerm);
     const [isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice] = (0, react_1.useState)(false);
     const filteredOptionsMap = (0, react_1.useMemo)(() => options.reduce((map, _option) => (Object.assign(Object.assign({}, map), { [filtered_options_util_1.default.getOptionId(id, _option)]: _option })), {
@@ -94,10 +102,14 @@ const FilteredOptionsProvider = ({ children, value: props, }) => {
                 activeOption = filtered_options_util_1.default.getIsLoadingId(id);
             }
         }
-        return (0, clsx_1.default)(activeOption, partialAriaDescribedBy) || undefined;
+        const maybeMaxSelectedOptionsId = (maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.isLimitReached) &&
+            filtered_options_util_1.default.getMaxSelectedOptionsId(id);
+        return ((0, clsx_1.default)(activeOption, maybeMaxSelectedOptionsId, partialAriaDescribedBy) ||
+            undefined);
     }, [
         isListOpen,
         isLoading,
+        maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.isLimitReached,
         value,
         partialAriaDescribedBy,
         shouldAutocomplete,

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

@@ -2,41 +2,62 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const useVirtualFocus = (containerRef) => {
-    const [index, setIndex] = (0, react_1.useState)(-1);
-    const listOfAllChildren = (containerRef === null || containerRef === void 0 ? void 0 : containerRef.children)
-        ? Array.prototype.slice.call(containerRef === null || containerRef === void 0 ? void 0 : containerRef.children)
-        : [];
-    const elementsAbleToReceiveFocus = listOfAllChildren.filter((child) => child.getAttribute("data-no-focus") !== "true");
-    const activeElement = elementsAbleToReceiveFocus[index];
-    const getElementById = (id) => listOfAllChildren.find((element) => element.id === id);
-    const isFocusOnTheTop = index === 0;
-    const isFocusOnTheBottom = index === elementsAbleToReceiveFocus.length - 1;
-    const scrollToOption = (newIndex) => {
-        const indexOfElementToScrollTo = Math.min(Math.max(newIndex, 0), (containerRef === null || containerRef === void 0 ? void 0 : containerRef.children.length) || 0);
-        if (containerRef === null || containerRef === void 0 ? void 0 : containerRef.children[indexOfElementToScrollTo]) {
-            const child = containerRef.children[indexOfElementToScrollTo];
-            const { top, bottom } = child.getBoundingClientRect();
-            const parentRect = containerRef.getBoundingClientRect();
-            if (top < parentRect.top || bottom > parentRect.bottom) {
-                child.scrollIntoView({ block: "nearest" });
-            }
+    const [activeElement, setActiveElement] = (0, react_1.useState)(undefined);
+    const getListOfAllChildren = () => { var _a; return Array.from((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.children) !== null && _a !== void 0 ? _a : []); };
+    const getElementsAbleToReceiveFocus = () => getListOfAllChildren().filter((child) => child.getAttribute("data-no-focus") !== "true");
+    const getElementById = (id) => getListOfAllChildren().find((element) => element.id === id);
+    const isFocusOnTheTop = () => activeElement
+        ? getElementsAbleToReceiveFocus().indexOf(activeElement) === 0
+        : false;
+    const isFocusOnTheBottom = () => {
+        const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
+        return activeElement
+            ? elementsAbleToReceiveFocus.indexOf(activeElement) ===
+                elementsAbleToReceiveFocus.length - 1
+            : false;
+    };
+    const _moveFocusAndScrollTo = (_element) => {
+        var _a;
+        setActiveElement(_element);
+        (_a = _element === null || _element === void 0 ? void 0 : _element.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(_element, { block: "nearest" });
+    };
+    const moveFocusUp = () => {
+        if (!activeElement) {
+            return;
+        }
+        const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
+        const _currentIndex = elementsAbleToReceiveFocus.indexOf(activeElement);
+        const elementAbove = elementsAbleToReceiveFocus[_currentIndex - 1];
+        if (_currentIndex === 0) {
+            setActiveElement(undefined);
+        }
+        else {
+            _moveFocusAndScrollTo(elementAbove);
+        }
+    };
+    const moveFocusDown = () => {
+        const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
+        if (!activeElement) {
+            _moveFocusAndScrollTo(elementsAbleToReceiveFocus[0]);
+            return;
+        }
+        const _currentIndex = elementsAbleToReceiveFocus.indexOf(activeElement);
+        if (_currentIndex === elementsAbleToReceiveFocus.length - 1) {
+            return;
+        }
+        else {
+            _moveFocusAndScrollTo(elementsAbleToReceiveFocus[_currentIndex + 1]);
         }
     };
-    const _moveFocusAndScrollTo = (_index) => {
-        setIndex(_index);
-        scrollToOption(_index);
+    const moveFocusToTop = () => _moveFocusAndScrollTo(undefined);
+    const moveFocusToBottom = () => {
+        const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
+        return _moveFocusAndScrollTo(elementsAbleToReceiveFocus[elementsAbleToReceiveFocus.length - 1]);
     };
-    const moveFocusUp = () => _moveFocusAndScrollTo(Math.max(index - 1, -1));
-    const moveFocusDown = () => _moveFocusAndScrollTo(Math.min(index + 1, elementsAbleToReceiveFocus.length - 1));
-    const moveFocusToTop = () => _moveFocusAndScrollTo(-1);
-    const moveFocusToBottom = () => _moveFocusAndScrollTo(elementsAbleToReceiveFocus.length - 1);
     const moveFocusToElement = (id) => {
-        const thisElement = elementsAbleToReceiveFocus.find((_element) => _element.getAttribute("id") === id);
-        const indexOfElement = thisElement
-            ? elementsAbleToReceiveFocus.indexOf(thisElement)
-            : -1;
-        if (indexOfElement >= 0) {
-            setIndex(indexOfElement);
+        const _element = getElementsAbleToReceiveFocus().find((_focusableElement) => _focusableElement.getAttribute("id") === id);
+        if (_element) {
+            setActiveElement(_element);
         }
     };
     return {
@@ -44,7 +65,6 @@ const useVirtualFocus = (containerRef) => {
         getElementById,
         isFocusOnTheTop,
         isFocusOnTheBottom,
-        setIndex,
         moveFocusUp,
         moveFocusDown,
         moveFocusToElement,

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

@@ -101,9 +101,11 @@ const Input = (0, react_1.forwardRef)((_a, ref) => {
                 onEnter(e);
                 break;
             case "Home":
+                toggleIsListOpen(false);
                 virtualFocus.moveFocusToTop();
                 break;
             case "End":
+                toggleIsListOpen(true);
                 virtualFocus.moveFocusToBottom();
                 break;
             default:
@@ -134,7 +136,7 @@ const Input = (0, react_1.forwardRef)((_a, ref) => {
             // Otherwise ignore keystrokes, so it doesn't interfere with text editing
             if (isListOpen && activeDecendantId) {
                 e.preventDefault();
-                if (virtualFocus.isFocusOnTheTop) {
+                if (virtualFocus.isFocusOnTheTop()) {
                     toggleIsListOpen(false);
                 }
                 virtualFocus.moveFocusUp();

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

@@ -32,7 +32,7 @@ const SelectedOptionsContext = (0, react_1.createContext)({});
 const SelectedOptionsProvider = ({ children, value, }) => {
     const { clearInput, focusInput } = (0, inputContext_1.useInputContext)();
     const { customOptions, removeCustomOption, addCustomOption, setCustomOptions, } = (0, customOptionsContext_1.useCustomOptionsContext)();
-    const { allowNewValues, isMultiSelect, selectedOptions: externalSelectedOptions, onToggleSelected, options, } = value;
+    const { allowNewValues, isMultiSelect, selectedOptions: externalSelectedOptions, onToggleSelected, options, maxSelected, } = 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) => {
@@ -90,6 +90,7 @@ const SelectedOptionsProvider = ({ children, value, }) => {
         selectedOptions,
     ]);
     const prevSelectedOptions = (0, hooks_1.usePrevious)(selectedOptions);
+    const isLimitReached = !!(maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.limit) && selectedOptions.length >= maxSelected.limit;
     const selectedOptionsState = {
         addSelectedOption,
         isMultiSelect,
@@ -98,6 +99,7 @@ const SelectedOptionsProvider = ({ children, value, }) => {
         selectedOptions,
         setSelectedOptions,
         toggleOption,
+        maxSelected: maxSelected && Object.assign(Object.assign({}, maxSelected), { isLimitReached }),
     };
     return (react_1.default.createElement(SelectedOptionsContext.Provider, { value: selectedOptionsState }, children));
 };

package/cjs/help-text/HelpText.js

@@ -63,7 +63,7 @@ exports.HelpText = (0, react_1.forwardRef)((_a, ref) => {
     const mergedRef = (0, useMergeRefs_1.useMergeRefs)(buttonRef, ref);
     const [open, setOpen] = (0, react_1.useState)(false);
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-help-text", wrapperClassName) },
-        react_1.default.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, () => setOpen((x) => x)), className: (0, clsx_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open }),
+        react_1.default.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, () => setOpen((x) => !x)), className: (0, clsx_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open }),
             react_1.default.createElement(HelpTextIcon_1.HelpTextIcon, { title: title }),
             react_1.default.createElement(HelpTextIcon_1.HelpTextIcon, { filled: true, title: title })),
         react_1.default.createElement(popover_1.Popover, { onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, anchorEl: buttonRef.current, placement: placement, strategy: strategy, offset: 12 },

package/cjs/util/create-context.js

@@ -0,0 +1,72 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createContext = void 0;
+/**
+ * Custom createContext to consolidate context-implementation across the system
+ * Inspired by:
+ * - https://github.com/radix-ui/primitives/blob/main/packages/react/context/src/createContext.tsx
+ * - https://github.com/chakra-ui/chakra-ui/blob/5ec0be610b5a69afba01a9c22365155c1b519136/packages/hooks/context/src/index.ts
+ */
+const react_1 = __importStar(require("react"));
+function getErrorMessage(hook, provider) {
+    return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
+}
+function createContext(options = {}) {
+    const { name, hookName = "useContext", providerName = "Provider", errorMessage, defaultValue, } = options;
+    const Context = (0, react_1.createContext)(defaultValue);
+    function Provider(_a) {
+        var { children } = _a, context = __rest(_a, ["children"]);
+        // Only re-memoize when prop values change
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        const value = react_1.default.useMemo(() => context, Object.values(context));
+        return react_1.default.createElement(Context.Provider, { value: value }, children);
+    }
+    function useContext() {
+        var _a;
+        const context = (0, react_1.useContext)(Context);
+        if (!context) {
+            const error = new Error(errorMessage !== null && errorMessage !== void 0 ? errorMessage : getErrorMessage(hookName, providerName));
+            error.name = "ContextError";
+            (_a = Error.captureStackTrace) === null || _a === void 0 ? void 0 : _a.call(Error, error, useContext);
+            throw error;
+        }
+        return context;
+    }
+    Context.displayName = name;
+    return [Provider, useContext];
+}
+exports.createContext = createContext;