@navikt/ds-react 5.15.1 → 5.16.0

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,

package/src/form/combobox/FilteredOptions/useVirtualFocus.ts

@@ -1,11 +1,10 @@
-import { Dispatch, SetStateAction, useState } from "react";
+import { useState } from "react";
 
 export type VirtualFocusType = {
   activeElement: HTMLElement | undefined;
   getElementById: (id: string) => HTMLElement | undefined;
-  isFocusOnTheTop: boolean;
-  isFocusOnTheBottom: boolean;
-  setIndex: Dispatch<SetStateAction<number>>;
+  isFocusOnTheTop: () => boolean;
+  isFocusOnTheBottom: () => boolean;
   moveFocusUp: () => void;
   moveFocusDown: () => void;
   moveFocusToElement: (id: string) => void;
@@ -16,57 +15,77 @@ export type VirtualFocusType = {
 const useVirtualFocus = (
   containerRef: HTMLElement | null,
 ): VirtualFocusType => {
-  const [index, setIndex] = useState(-1);
-
-  const listOfAllChildren: HTMLElement[] = containerRef?.children
-    ? Array.prototype.slice.call(containerRef?.children)
-    : [];
-  const elementsAbleToReceiveFocus = listOfAllChildren.filter(
-    (child) => child.getAttribute("data-no-focus") !== "true",
+  const [activeElement, setActiveElement] = useState<HTMLElement | undefined>(
+    undefined,
   );
 
-  const activeElement = elementsAbleToReceiveFocus[index];
+  const getListOfAllChildren = (): HTMLElement[] =>
+    Array.from(containerRef?.children ?? []) as HTMLElement[];
+  const getElementsAbleToReceiveFocus = () =>
+    getListOfAllChildren().filter(
+      (child) => child.getAttribute("data-no-focus") !== "true",
+    );
+
   const getElementById = (id: string) =>
-    listOfAllChildren.find((element) => element.id === id);
-  const isFocusOnTheTop = index === 0;
-  const isFocusOnTheBottom = index === elementsAbleToReceiveFocus.length - 1;
+    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 scrollToOption = (newIndex: number) => {
-    const indexOfElementToScrollTo = Math.min(
-      Math.max(newIndex, 0),
-      containerRef?.children.length || 0,
-    );
-    if (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 _moveFocusAndScrollTo = (_element?: HTMLElement) => {
+    setActiveElement(_element);
+    _element?.scrollIntoView?.({ 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 _moveFocusAndScrollTo = (_index: number) => {
-    setIndex(_index);
-    scrollToOption(_index);
+  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 moveFocusUp = () => _moveFocusAndScrollTo(Math.max(index - 1, -1));
-  const moveFocusDown = () =>
-    _moveFocusAndScrollTo(
-      Math.min(index + 1, elementsAbleToReceiveFocus.length - 1),
+
+  const moveFocusToTop = () => _moveFocusAndScrollTo(undefined);
+  const moveFocusToBottom = () => {
+    const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
+    return _moveFocusAndScrollTo(
+      elementsAbleToReceiveFocus[elementsAbleToReceiveFocus.length - 1],
     );
-  const moveFocusToTop = () => _moveFocusAndScrollTo(-1);
-  const moveFocusToBottom = () =>
-    _moveFocusAndScrollTo(elementsAbleToReceiveFocus.length - 1);
+  };
   const moveFocusToElement = (id: string) => {
-    const thisElement = elementsAbleToReceiveFocus.find(
-      (_element) => _element.getAttribute("id") === id,
+    const _element = getElementsAbleToReceiveFocus().find(
+      (_focusableElement) => _focusableElement.getAttribute("id") === id,
     );
-    const indexOfElement = thisElement
-      ? elementsAbleToReceiveFocus.indexOf(thisElement)
-      : -1;
-    if (indexOfElement >= 0) {
-      setIndex(indexOfElement);
+    if (_element) {
+      setActiveElement(_element);
     }
   };
 
@@ -75,7 +94,6 @@ const useVirtualFocus = (
     getElementById,
     isFocusOnTheTop,
     isFocusOnTheBottom,
-    setIndex,
     moveFocusUp,
     moveFocusDown,
     moveFocusToElement,

package/src/form/combobox/Input/Input.tsx

@@ -101,9 +101,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           onEnter(e);
           break;
         case "Home":
+          toggleIsListOpen(false);
           virtualFocus.moveFocusToTop();
           break;
         case "End":
+          toggleIsListOpen(true);
           virtualFocus.moveFocusToBottom();
           break;
         default:
@@ -135,7 +137,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           // 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/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx

@@ -8,7 +8,7 @@ import React, {
 import { usePrevious } from "../../../util/hooks";
 import { useInputContext } from "../Input/inputContext";
 import { useCustomOptionsContext } from "../customOptionsContext";
-import { ComboboxProps } from "../types";
+import { ComboboxProps, MaxSelected } from "../types";
 
 type SelectedOptionsContextType = {
   addSelectedOption: (option: string) => void;
@@ -16,6 +16,7 @@ type SelectedOptionsContextType = {
   removeSelectedOption: (option: string) => void;
   prevSelectedOptions?: string[];
   selectedOptions: string[];
+  maxSelected?: MaxSelected & { isLimitReached: boolean };
   setSelectedOptions: (any) => void;
   toggleOption: (
     option: string,
@@ -39,6 +40,7 @@ export const SelectedOptionsProvider = ({
     | "options"
     | "selectedOptions"
     | "onToggleSelected"
+    | "maxSelected"
   >;
 }) => {
   const { clearInput, focusInput } = useInputContext();
@@ -54,6 +56,7 @@ export const SelectedOptionsProvider = ({
     selectedOptions: externalSelectedOptions,
     onToggleSelected,
     options,
+    maxSelected,
   } = value;
   const [internalSelectedOptions, setSelectedOptions] = useState<string[]>([]);
   const selectedOptions = useMemo(
@@ -129,6 +132,9 @@ export const SelectedOptionsProvider = ({
 
   const prevSelectedOptions = usePrevious<string[]>(selectedOptions);
 
+  const isLimitReached =
+    !!maxSelected?.limit && selectedOptions.length >= maxSelected.limit;
+
   const selectedOptionsState = {
     addSelectedOption,
     isMultiSelect,
@@ -137,6 +143,10 @@ export const SelectedOptionsProvider = ({
     selectedOptions,
     setSelectedOptions,
     toggleOption,
+    maxSelected: maxSelected && {
+      ...maxSelected,
+      isLimitReached,
+    },
   };
 
   return (

package/src/form/combobox/combobox.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { expect, fn, userEvent, within } from "@storybook/test";
-import React, { useId, useMemo, useState } from "react";
+import React, { useId, useMemo, useRef, useState } from "react";
 import { Chips, ComboboxProps, TextField, UNSAFE_Combobox } from "../../index";
 
 export default {
@@ -37,11 +37,16 @@ Default.args = {
   label: "Hva er dine favorittfrukter?",
   shouldAutocomplete: true,
   isLoading: false,
+  isMultiSelect: false,
+  allowNewValues: false,
 };
 Default.argTypes = {
   isListOpen: {
     control: { type: "boolean" },
   },
+  maxSelected: {
+    control: { type: "number" },
+  },
   size: {
     options: ["medium", "small"],
     defaultValue: "medium",
@@ -284,6 +289,36 @@ export const ComboboxSizes = () => (
   </>
 );
 
+export const MaxSelectedOptions: StoryFunction = () => {
+  const id = useId();
+  const [value, setValue] = useState<string | undefined>("");
+  const [selectedOptions, setSelectedOptions] = useState([
+    options[0],
+    options[1],
+  ]);
+  const comboboxRef = useRef<HTMLInputElement>(null);
+  return (
+    <UNSAFE_Combobox
+      id={id}
+      label="Komboboks med begrenset antall valg"
+      options={options}
+      maxSelected={{ limit: 2 }}
+      selectedOptions={selectedOptions}
+      onToggleSelected={(option, isSelected) =>
+        isSelected
+          ? setSelectedOptions([...selectedOptions, option])
+          : setSelectedOptions(selectedOptions.filter((o) => o !== option))
+      }
+      isMultiSelect
+      allowNewValues
+      isListOpen={comboboxRef.current ? undefined : true}
+      value={value}
+      onChange={(event) => setValue(event?.target.value)}
+      ref={comboboxRef}
+    />
+  );
+};
+
 export const WithError: StoryFunction = (props) => {
   const [hasSelectedValue, setHasSelectedValue] = useState(false);
   const [isLoading, setIsLoading] = useState(false);

package/src/form/combobox/combobox.test.tsx

@@ -74,9 +74,7 @@ describe("Render combobox", () => {
   it("Should show loading icon when loading (used for async search)", async () => {
     render(<App options={[]} isListOpen isLoading />);
 
-    expect(
-      await screen.findByRole("option", { name: "venter..." }),
-    ).toBeInTheDocument();
+    expect(await screen.findByText("Søker...")).toBeInTheDocument();
   });
 });
 

package/src/form/combobox/types.ts

@@ -1,6 +1,17 @@
 import React, { ChangeEvent, InputHTMLAttributes } from "react";
 import { FormFieldProps } from "../useFormField";
 
+export type MaxSelected = {
+  /**
+   * The limit for maximum selected options
+   */
+  limit: number;
+  /**
+   * Override the message to display when the limit for maximum selected options has been reached
+   */
+  message?: string;
+};
+
 export interface ComboboxProps
   extends FormFieldProps,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value"> {
@@ -97,6 +108,10 @@ export interface ComboboxProps
    * e.g. for a filter, where options can be toggled elsewhere/programmatically.
    */
   selectedOptions?: string[];
+  /**
+   * Options for the maximum number of selected options.
+   */
+  maxSelected?: MaxSelected;
   /**
    * Set to "true" to enable inline autocomplete.
    *