@navikt/ds-react 5.15.1 → 5.17.0

package/_docs.json

@@ -15085,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"
@@ -15538,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"
@@ -19628,7 +19666,7 @@
         ],
         "required": true,
         "type": {
-          "name": "Pick<ComboboxProps, \"allowNewValues\" | \"isMultiSelect\" | \"options\" | \"selectedOptions\" | \"onToggleSelected\">"
+          "name": "Pick<ComboboxProps, \"allowNewValues\" | \"isMultiSelect\" | \"options\" | \"selectedOptions\" | \"onToggleSelected\" | \"maxSelected\">"
         }
       }
     }
@@ -19783,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/util/hooks/descendants/descendant.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DescendantsManager = void 0;
+/**
+ * https://github.com/chakra-ui/chakra-ui/tree/5ec0be610b5a69afba01a9c22365155c1b519136/packages/components/descendant
+ */
+const utils_1 = require("./utils");
+/**
+ * @internal
+ *
+ * Class to manage descendants and their relative indices in the DOM.
+ * It uses `node.compareDocumentPosition(...)` under the hood
+ */
+class DescendantsManager {
+    constructor() {
+        this.descendants = new Map();
+        this.register = (nodeOrOptions) => {
+            if (nodeOrOptions == null)
+                return;
+            if ((0, utils_1.isElement)(nodeOrOptions)) {
+                return this.registerNode(nodeOrOptions);
+            }
+            return (node) => {
+                this.registerNode(node, nodeOrOptions);
+            };
+        };
+        this.unregister = (node) => {
+            this.descendants.delete(node);
+            const sorted = (0, utils_1.sortNodes)(Array.from(this.descendants.keys()));
+            this.assignIndex(sorted);
+        };
+        this.destroy = () => {
+            this.descendants.clear();
+        };
+        this.assignIndex = (descendants) => {
+            this.descendants.forEach((descendant) => {
+                const index = descendants.indexOf(descendant.node);
+                descendant.index = index;
+                descendant.node.dataset["index"] = descendant.index.toString();
+            });
+        };
+        this.count = () => this.descendants.size;
+        this.enabledCount = () => this.enabledValues().length;
+        this.values = () => {
+            const values = Array.from(this.descendants.values());
+            return values.sort((a, b) => a.index - b.index);
+        };
+        this.enabledValues = () => {
+            return this.values().filter((descendant) => !descendant.disabled);
+        };
+        this.item = (index) => {
+            if (this.count() === 0)
+                return undefined;
+            return this.values()[index];
+        };
+        this.enabledItem = (index) => {
+            if (this.enabledCount() === 0)
+                return undefined;
+            return this.enabledValues()[index];
+        };
+        this.first = () => this.item(0);
+        this.firstEnabled = () => this.enabledItem(0);
+        this.last = () => this.item(this.descendants.size - 1);
+        this.lastEnabled = () => {
+            const lastIndex = this.enabledValues().length - 1;
+            return this.enabledItem(lastIndex);
+        };
+        this.indexOf = (node) => {
+            var _a, _b;
+            if (!node)
+                return -1;
+            return (_b = (_a = this.descendants.get(node)) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : -1;
+        };
+        this.enabledIndexOf = (node) => {
+            if (node == null)
+                return -1;
+            return this.enabledValues().findIndex((i) => i.node.isSameNode(node));
+        };
+        this.next = (index, loop = true) => {
+            const next = (0, utils_1.getNextIndex)(index, this.count(), loop);
+            return this.item(next);
+        };
+        this.nextEnabled = (index, loop = true) => {
+            const item = this.item(index);
+            if (!item)
+                return;
+            const enabledIndex = this.enabledIndexOf(item.node);
+            const nextEnabledIndex = (0, utils_1.getNextIndex)(enabledIndex, this.enabledCount(), loop);
+            return this.enabledItem(nextEnabledIndex);
+        };
+        this.prev = (index, loop = true) => {
+            const prev = (0, utils_1.getPrevIndex)(index, this.count() - 1, loop);
+            return this.item(prev);
+        };
+        this.prevEnabled = (index, loop = true) => {
+            const item = this.item(index);
+            if (!item)
+                return;
+            const enabledIndex = this.enabledIndexOf(item.node);
+            const prevEnabledIndex = (0, utils_1.getPrevIndex)(enabledIndex, this.enabledCount() - 1, loop);
+            return this.enabledItem(prevEnabledIndex);
+        };
+        this.registerNode = (node, options) => {
+            if (!node || this.descendants.has(node))
+                return;
+            const keys = Array.from(this.descendants.keys()).concat(node);
+            const sorted = (0, utils_1.sortNodes)(keys);
+            if (options === null || options === void 0 ? void 0 : options.disabled) {
+                options.disabled = !!options.disabled;
+            }
+            const descendant = Object.assign({ node, index: -1 }, options);
+            this.descendants.set(node, descendant);
+            this.assignIndex(sorted);
+        };
+    }
+}
+exports.DescendantsManager = DescendantsManager;