@navikt/ds-react 5.15.0 → 5.16.0

package/esm/util/hooks/descendants/useDescendant.js

@@ -0,0 +1,82 @@
+/**
+ * https://github.com/chakra-ui/chakra-ui/tree/5ec0be610b5a69afba01a9c22365155c1b519136/packages/components/descendant
+ */
+import React, { useRef, useState } from "react";
+import { createContext } from "../../create-context";
+import { useClientLayoutEffect } from "../useClientLayoutEffect";
+import { mergeRefs } from "../useMergeRefs";
+import { DescendantsManager } from "./descendant";
+import { cast } from "./utils";
+/**
+ * @internal
+ * Initializing DescendantsManager
+ */
+function useDescendants() {
+    const descendants = useRef(new DescendantsManager()).current;
+    useClientLayoutEffect(() => {
+        return () => {
+            descendants.destroy();
+        };
+    });
+    return descendants;
+}
+const [DescendantsContextProvider, useDescendantsContext] = createContext({
+    name: "DescendantsProvider",
+    errorMessage: "useDescendantsContext must be used within DescendantsProvider",
+});
+/**
+ * @internal
+ * This hook provides information to descendant component:
+ * - Index compared to other descendants
+ * - ref callback to register the descendant
+ * - Its enabled index compared to other enabled descendants
+ */
+function useDescendant(options) {
+    const descendants = useDescendantsContext();
+    const [index, setIndex] = useState(-1);
+    const ref = useRef(null);
+    useClientLayoutEffect(() => {
+        return () => {
+            if (!ref.current)
+                return;
+            descendants.unregister(ref.current);
+        };
+    }, []);
+    useClientLayoutEffect(() => {
+        if (!ref.current)
+            return;
+        const dataIndex = Number(ref.current.dataset["index"]);
+        if (index != dataIndex && !Number.isNaN(dataIndex)) {
+            setIndex(dataIndex);
+        }
+    });
+    const refCallback = options
+        ? cast(descendants.register(options))
+        : cast(descendants.register);
+    return {
+        descendants,
+        index,
+        enabledIndex: descendants.enabledIndexOf(ref.current),
+        register: mergeRefs([refCallback, ref]),
+    };
+}
+/**
+ * Provides strongly typed versions of the context provider and hooks above.
+ */
+export function createDescendantContext() {
+    const ContextProvider = cast((props) => (React.createElement(DescendantsContextProvider, Object.assign({}, props.value), props.children)));
+    const _useDescendantsContext = () => cast(useDescendantsContext());
+    const _useDescendant = (options) => useDescendant(options);
+    const _useDescendants = () => useDescendants();
+    return [
+        // context provider
+        ContextProvider,
+        // call this when you need to read from context
+        _useDescendantsContext,
+        // descendants state information, to be called and passed to `ContextProvider`
+        _useDescendants,
+        // descendant index information
+        _useDescendant,
+    ];
+}
+//# sourceMappingURL=useDescendant.js.map

package/esm/util/hooks/descendants/useDescendant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDescendant.js","sourceRoot":"","sources":["../../../../src/util/hooks/descendants/useDescendant.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAqB,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B;;;GAGG;AACH,SAAS,cAAc;IAIrB,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,kBAAkB,EAAQ,CAAC,CAAC,OAAO,CAAC;IACnE,qBAAqB,CAAC,GAAG,EAAE;QACzB,OAAO,GAAG,EAAE;YACV,WAAW,CAAC,OAAO,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,WAAW,CAAC;AACrB,CAAC;AAED,MAAM,CAAC,0BAA0B,EAAE,qBAAqB,CAAC,GAAG,aAAa,CAEvE;IACA,IAAI,EAAE,qBAAqB;IAC3B,YAAY,EAAE,+DAA+D;CAC9E,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,SAAS,aAAa,CAGpB,OAA8B;IAC9B,MAAM,WAAW,GAAG,qBAAqB,EAAE,CAAC;IAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IACvC,MAAM,GAAG,GAAG,MAAM,CAAI,IAAI,CAAC,CAAC;IAE5B,qBAAqB,CAAC,GAAG,EAAE;QACzB,OAAO,GAAG,EAAE;YACV,IAAI,CAAC,GAAG,CAAC,OAAO;gBAAE,OAAO;YACzB,WAAW,CAAC,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACtC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE,OAAO;QACzB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;QACvD,IAAI,KAAK,IAAI,SAAS,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC;YACnD,QAAQ,CAAC,SAAS,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,OAAO;QACzB,CAAC,CAAC,IAAI,CAAuB,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QAC3D,CAAC,CAAC,IAAI,CAAuB,WAAW,CAAC,QAAQ,CAAC,CAAC;IAErD,OAAO;QACL,WAAW;QACX,KAAK;QACL,YAAY,EAAE,WAAW,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC;QACrD,QAAQ,EAAE,SAAS,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;KACxC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,uBAAuB;IAIrC,MAAM,eAAe,GAAG,IAAI,CAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,oBAAC,0BAA0B,oBAAK,KAAK,CAAC,KAAK,GACxC,KAAK,CAAC,QAAQ,CACY,CAC9B,CACF,CAAC;IAEF,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAClC,IAAI,CAA2B,qBAAqB,EAAE,CAAC,CAAC;IAE1D,MAAM,cAAc,GAAG,CAAC,OAA8B,EAAE,EAAE,CACxD,aAAa,CAAO,OAAO,CAAC,CAAC;IAE/B,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,cAAc,EAAQ,CAAC;IAErD,OAAO;QACL,mBAAmB;QACnB,eAAe;QACf,+CAA+C;QAC/C,sBAAsB;QACtB,8EAA8E;QAC9E,eAAe;QACf,+BAA+B;QAC/B,cAAc;KACN,CAAC;AACb,CAAC"}

package/esm/util/hooks/descendants/utils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Sort an array of DOM nodes according to the HTML tree order
+ * @see http://www.w3.org/TR/html5/infrastructure.html#tree-order
+ * Inspired by
+ * - https://github.com/floating-ui/floating-ui/blob/8e449abb0bfda143c6a6eb01d3e6943c095b744f/packages/react/src/components/FloatingList.tsx#L8
+ * - https://github.com/chakra-ui/chakra-ui/tree/5ec0be610b5a69afba01a9c22365155c1b519136/packages/components/descendant
+ */
+export declare function sortNodes(nodes: Node[]): Node[];
+export declare const isElement: (el: any) => el is HTMLElement;
+export declare function getNextIndex(current: number, max: number, loop: boolean): number;
+export declare function getPrevIndex(current: number, max: number, loop: boolean): number;
+export declare const cast: <T>(value: any) => T;

package/esm/util/hooks/descendants/utils.js

@@ -0,0 +1,46 @@
+/**
+ * Sort an array of DOM nodes according to the HTML tree order
+ * @see http://www.w3.org/TR/html5/infrastructure.html#tree-order
+ * Inspired by
+ * - https://github.com/floating-ui/floating-ui/blob/8e449abb0bfda143c6a6eb01d3e6943c095b744f/packages/react/src/components/FloatingList.tsx#L8
+ * - https://github.com/chakra-ui/chakra-ui/tree/5ec0be610b5a69afba01a9c22365155c1b519136/packages/components/descendant
+ */
+export function sortNodes(nodes) {
+    return nodes.sort((a, b) => {
+        const compare = a.compareDocumentPosition(b);
+        if (compare & Node.DOCUMENT_POSITION_FOLLOWING ||
+            compare & Node.DOCUMENT_POSITION_CONTAINED_BY) {
+            // a < b
+            return -1;
+        }
+        if (compare & Node.DOCUMENT_POSITION_PRECEDING ||
+            compare & Node.DOCUMENT_POSITION_CONTAINS) {
+            // a > b
+            return 1;
+        }
+        if (compare & Node.DOCUMENT_POSITION_DISCONNECTED ||
+            compare & Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC) {
+            throw Error("Cannot sort the given nodes.");
+        }
+        else {
+            return 0;
+        }
+    });
+}
+export const isElement = (el) => typeof el == "object" &&
+    "nodeType" in el &&
+    el.nodeType === Node.ELEMENT_NODE;
+export function getNextIndex(current, max, loop) {
+    let next = current + 1;
+    if (loop && next >= max)
+        next = 0;
+    return next;
+}
+export function getPrevIndex(current, max, loop) {
+    let next = current - 1;
+    if (loop && next < 0)
+        next = max;
+    return next;
+}
+export const cast = (value) => value;
+//# sourceMappingURL=utils.js.map

package/esm/util/hooks/descendants/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/util/hooks/descendants/utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CAAC,KAAa;IACrC,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACzB,MAAM,OAAO,GAAG,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;QAE7C,IACE,OAAO,GAAG,IAAI,CAAC,2BAA2B;YAC1C,OAAO,GAAG,IAAI,CAAC,8BAA8B,EAC7C,CAAC;YACD,QAAQ;YACR,OAAO,CAAC,CAAC,CAAC;QACZ,CAAC;QAED,IACE,OAAO,GAAG,IAAI,CAAC,2BAA2B;YAC1C,OAAO,GAAG,IAAI,CAAC,0BAA0B,EACzC,CAAC;YACD,QAAQ;YACR,OAAO,CAAC,CAAC;QACX,CAAC;QAED,IACE,OAAO,GAAG,IAAI,CAAC,8BAA8B;YAC7C,OAAO,GAAG,IAAI,CAAC,yCAAyC,EACxD,CAAC;YACD,MAAM,KAAK,CAAC,8BAA8B,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,CAAC;QACX,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAO,EAAqB,EAAE,CACtD,OAAO,EAAE,IAAI,QAAQ;IACrB,UAAU,IAAI,EAAE;IAChB,EAAE,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC;AAEpC,MAAM,UAAU,YAAY,CAAC,OAAe,EAAE,GAAW,EAAE,IAAa;IACtE,IAAI,IAAI,GAAG,OAAO,GAAG,CAAC,CAAC;IACvB,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG;QAAE,IAAI,GAAG,CAAC,CAAC;IAClC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,OAAe,EAAE,GAAW,EAAE,IAAa;IACtE,IAAI,IAAI,GAAG,OAAO,GAAG,CAAC,CAAC;IACvB,IAAI,IAAI,IAAI,IAAI,GAAG,CAAC;QAAE,IAAI,GAAG,GAAG,CAAC;IACjC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,CAAI,KAAU,EAAE,EAAE,CAAC,KAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.15.0",
+  "version": "5.16.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.15.0",
-    "@navikt/ds-tokens": "^5.15.0",
+    "@navikt/aksel-icons": "^5.16.0",
+    "@navikt/ds-tokens": "^5.16.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/form/combobox/Combobox.tsx

@@ -89,7 +89,7 @@ export const Combobox = forwardRef<
             "navds-combobox__wrapper-inner navds-text-field__input",
             {
               "navds-combobox__wrapper-inner--virtually-unfocused":
-                activeDecendantId !== null,
+                activeDecendantId !== undefined,
             },
           )}
           onClick={focusInput}

package/src/form/combobox/ComboboxProvider.tsx

@@ -43,6 +43,7 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
       isMultiSelect,
       onToggleSelected,
       selectedOptions,
+      maxSelected,
       options,
       value,
       onChange,
@@ -71,6 +72,7 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
               allowNewValues,
               isMultiSelect,
               selectedOptions,
+              maxSelected,
               onToggleSelected,
               options,
             }}

package/src/form/combobox/ComboboxWrapper.tsx

@@ -57,7 +57,6 @@ const ComboboxWrapper = ({
       )}
       onFocus={onFocusInsideWrapper}
       onBlur={onBlurWrapper}
-      tabIndex={-1}
     >
       {children}
     </div>

package/src/form/combobox/FilteredOptions/FilteredOptions.tsx

@@ -27,111 +27,150 @@ const FilteredOptions = () => {
     activeDecendantId,
     virtualFocus,
   } = useFilteredOptionsContext();
-  const { isMultiSelect, selectedOptions, toggleOption } =
+  const { isMultiSelect, selectedOptions, toggleOption, maxSelected } =
     useSelectedOptionsContext();
 
+  const isDisabled = (option) =>
+    maxSelected?.isLimitReached && !selectedOptions.includes(option);
+
+  const shouldRenderNonSelectables =
+    maxSelected?.isLimitReached || // Render maxSelected message
+    isLoading || // Render loading message
+    (!isLoading && filteredOptions.length === 0); // Render no hits message
+
+  const shouldRenderFilteredOptionsList =
+    (allowNewValues && isValueNew && !maxSelected?.isLimitReached) || // Render add new option
+    filteredOptions.length > 0; // Render filtered options
+
   return (
-    <ul
-      ref={setFilteredOptionsRef}
+    <div
       className={cl("navds-combobox__list", {
         "navds-combobox__list--closed": !isListOpen,
         "navds-combobox__list--with-hover": isMouseLastUsedInputDevice,
       })}
       id={filteredOptionsUtil.getFilteredOptionsId(id)}
-      role="listbox"
       tabIndex={-1}
     >
-      {isLoading && (
-        <li
-          className="navds-combobox__list-item--loading"
-          role="option"
-          aria-selected={false}
-          id={filteredOptionsUtil.getIsLoadingId(id)}
-          data-no-focus="true"
-        >
-          <Loader aria-label="Søker..." />
-        </li>
+      {shouldRenderNonSelectables && (
+        <div className="navds-combobox__list_non-selectables" role="status">
+          {maxSelected?.isLimitReached && (
+            <div
+              className="navds-combobox__list-item--max-selected"
+              id={filteredOptionsUtil.getMaxSelectedOptionsId(id)}
+            >
+              {maxSelected.message ??
+                `${selectedOptions.length} av ${maxSelected.limit} er valgt.`}
+            </div>
+          )}
+          {isLoading && (
+            <div
+              className="navds-combobox__list-item--loading"
+              id={filteredOptionsUtil.getIsLoadingId(id)}
+            >
+              <Loader title="Søker..." />
+            </div>
+          )}
+          {!isLoading && filteredOptions.length === 0 && (
+            <div
+              className="navds-combobox__list-item--no-options"
+              id={filteredOptionsUtil.getNoHitsId(id)}
+            >
+              Ingen søketreff
+            </div>
+          )}
+        </div>
       )}
-      {isValueNew && allowNewValues && (
-        <li
-          tabIndex={-1}
-          onMouseMove={() => {
-            if (
-              activeDecendantId !== filteredOptionsUtil.getAddNewOptionId(id)
-            ) {
-              virtualFocus.moveFocusToElement(
-                filteredOptionsUtil.getAddNewOptionId(id),
-              );
-              setIsMouseLastUsedInputDevice(true);
-            }
-          }}
-          onPointerUp={(event) => {
-            toggleOption(value, event);
-            if (!isMultiSelect && !selectedOptions.includes(value))
-              toggleIsListOpen(false);
-          }}
-          id={filteredOptionsUtil.getAddNewOptionId(id)}
-          className={cl("navds-combobox__list-item__new-option", {
-            "navds-combobox__list-item__new-option--focus":
-              activeDecendantId === filteredOptionsUtil.getAddNewOptionId(id),
-          })}
-          role="option"
-          aria-selected={false}
-        >
-          <PlusIcon aria-hidden />
-          <BodyShort size={size}>
-            Legg til{" "}
-            <Label as="span" size={size}>
-              &#8220;{value}&#8221;
-            </Label>
-          </BodyShort>
-        </li>
-      )}
-      {!isLoading && filteredOptions.length === 0 && (
-        <li
-          className="navds-combobox__list-item__no-options"
-          role="option"
-          aria-selected={false}
-          id={filteredOptionsUtil.getNoHitsId(id)}
-          data-no-focus="true"
+
+      {shouldRenderFilteredOptionsList && (
+        <ul
+          ref={setFilteredOptionsRef}
+          role="listbox"
+          className="navds-combobox__list-options"
         >
-          Ingen søketreff
-        </li>
+          {isValueNew && !maxSelected?.isLimitReached && allowNewValues && (
+            <li
+              tabIndex={-1}
+              onMouseMove={() => {
+                if (
+                  activeDecendantId !==
+                  filteredOptionsUtil.getAddNewOptionId(id)
+                ) {
+                  virtualFocus.moveFocusToElement(
+                    filteredOptionsUtil.getAddNewOptionId(id),
+                  );
+                  setIsMouseLastUsedInputDevice(true);
+                }
+              }}
+              onPointerUp={(event) => {
+                toggleOption(value, event);
+                if (!isMultiSelect && !selectedOptions.includes(value))
+                  toggleIsListOpen(false);
+              }}
+              id={filteredOptionsUtil.getAddNewOptionId(id)}
+              className={cl(
+                "navds-combobox__list-item navds-combobox__list-item--new-option",
+                {
+                  "navds-combobox__list-item--new-option--focus":
+                    activeDecendantId ===
+                    filteredOptionsUtil.getAddNewOptionId(id),
+                },
+              )}
+              role="option"
+              aria-selected={false}
+            >
+              <PlusIcon aria-hidden />
+              <BodyShort size={size}>
+                Legg til{" "}
+                <Label as="span" size={size}>
+                  &#8220;{value}&#8221;
+                </Label>
+              </BodyShort>
+            </li>
+          )}
+          {filteredOptions.map((option) => (
+            <li
+              className={cl("navds-combobox__list-item", {
+                "navds-combobox__list-item--focus":
+                  activeDecendantId ===
+                  filteredOptionsUtil.getOptionId(id, option),
+                "navds-combobox__list-item--selected":
+                  selectedOptions.includes(option),
+              })}
+              data-no-focus={isDisabled(option) || undefined}
+              id={filteredOptionsUtil.getOptionId(id, option)}
+              key={option}
+              tabIndex={-1}
+              onMouseMove={() => {
+                if (
+                  activeDecendantId !==
+                  filteredOptionsUtil.getOptionId(id, option)
+                ) {
+                  virtualFocus.moveFocusToElement(
+                    filteredOptionsUtil.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}
+            >
+              <BodyShort size={size}>{option}</BodyShort>
+              {selectedOptions.includes(option) && <CheckmarkIcon />}
+            </li>
+          ))}
+        </ul>
       )}
-      {filteredOptions.map((option) => (
-        <li
-          className={cl("navds-combobox__list-item", {
-            "navds-combobox__list-item--focus":
-              activeDecendantId === filteredOptionsUtil.getOptionId(id, option),
-            "navds-combobox__list-item--selected":
-              selectedOptions.includes(option),
-          })}
-          id={filteredOptionsUtil.getOptionId(id, option)}
-          key={option}
-          tabIndex={-1}
-          onMouseMove={() => {
-            if (
-              activeDecendantId !== filteredOptionsUtil.getOptionId(id, option)
-            ) {
-              virtualFocus.moveFocusToElement(
-                filteredOptionsUtil.getOptionId(id, option),
-              );
-              setIsMouseLastUsedInputDevice(true);
-            }
-          }}
-          onPointerUp={(event) => {
-            toggleOption(option, event);
-            if (!isMultiSelect && !selectedOptions.includes(option))
-              toggleIsListOpen(false);
-          }}
-          role="option"
-          aria-selected={selectedOptions.includes(option)}
-        >
-          <BodyShort size={size}>{option}</BodyShort>
-          {selectedOptions.includes(option) && <CheckmarkIcon />}
-        </li>
-      ))}
-    </ul>
+    </div>
   );
 };
 

package/src/form/combobox/FilteredOptions/filtered-options-util.ts

@@ -7,8 +7,11 @@ const isPartOfText = (value, text) =>
 const isValueInList = (value, list) =>
   list?.find((listItem) => normalizeText(value) === normalizeText(listItem));
 
-const getMatchingValuesFromList = (value, list) =>
-  list?.filter((listItem) => isPartOfText(value, listItem));
+const getMatchingValuesFromList = (value, list, alwaysIncluded) =>
+  list?.filter(
+    (listItem) =>
+      isPartOfText(value, listItem) || alwaysIncluded.includes(listItem),
+  );
 
 const getFilteredOptionsId = (comboboxId: string) =>
   `${comboboxId}-filtered-options`;
@@ -25,6 +28,9 @@ const getIsLoadingId = (comboboxId: string) => `${comboboxId}-is-loading`;
 
 const getNoHitsId = (comboboxId: string) => `${comboboxId}-no-hits`;
 
+const getMaxSelectedOptionsId = (comboboxId: string) =>
+  `${comboboxId}-max-selected-options`;
+
 export default {
   normalizeText,
   isPartOfText,
@@ -35,4 +41,5 @@ export default {
   getOptionId,
   getIsLoadingId,
   getNoHitsId,
+  getMaxSelectedOptionsId,
 };

package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx

@@ -9,6 +9,7 @@ import React, {
 } from "react";
 import { useClientLayoutEffect, usePrevious } from "../../../util/hooks";
 import { useInputContext } from "../Input/inputContext";
+import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { useCustomOptionsContext } from "../customOptionsContext";
 import { ComboboxProps } from "../types";
 import filteredOptionsUtils from "./filtered-options-util";
@@ -70,6 +71,7 @@ export const FilteredOptionsProvider = ({
     setSearchTerm,
     shouldAutocomplete,
   } = useInputContext();
+  const { selectedOptions, maxSelected } = useSelectedOptionsContext();
 
   const [isInternalListOpen, setInternalListOpen] = useState(false);
   const { customOptions } = useCustomOptionsContext();
@@ -79,8 +81,18 @@ export const FilteredOptionsProvider = ({
       return externalFilteredOptions;
     }
     const opts = [...customOptions, ...options];
-    return filteredOptionsUtils.getMatchingValuesFromList(searchTerm, opts);
-  }, [customOptions, externalFilteredOptions, options, searchTerm]);
+    return filteredOptionsUtils.getMatchingValuesFromList(
+      searchTerm,
+      opts,
+      selectedOptions,
+    );
+  }, [
+    customOptions,
+    externalFilteredOptions,
+    options,
+    searchTerm,
+    selectedOptions,
+  ]);
 
   const previousSearchTerm = usePrevious(searchTerm);
 
@@ -154,10 +166,17 @@ export const FilteredOptionsProvider = ({
         activeOption = filteredOptionsUtils.getIsLoadingId(id);
       }
     }
-    return cl(activeOption, partialAriaDescribedBy) || undefined;
+    const maybeMaxSelectedOptionsId =
+      maxSelected?.isLimitReached &&
+      filteredOptionsUtils.getMaxSelectedOptionsId(id);
+    return (
+      cl(activeOption, maybeMaxSelectedOptionsId, partialAriaDescribedBy) ||
+      undefined
+    );
   }, [
     isListOpen,
     isLoading,
+    maxSelected?.isLimitReached,
     value,
     partialAriaDescribedBy,
     shouldAutocomplete,