Combobox complex options

.changeset/fuzzy-mangos-flow.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+Allow Combobox options as objects to support separate display text and value

@navikt/core/react/src/form/combobox/ComboboxProvider.tsx

@@ -3,6 +3,7 @@ import Combobox from "./Combobox";
 import { FilteredOptionsProvider } from "./FilteredOptions/filteredOptionsContext";
 import { InputContextProvider } from "./Input/inputContext";
 import { SelectedOptionsProvider } from "./SelectedOptions/selectedOptionsContext";
+import { mapToComboboxOptionArray } from "./combobox-utils";
 import { CustomOptionsProvider } from "./customOptionsContext";
 import { ComboboxProps } from "./types";
 
@@ -36,22 +37,25 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
       defaultValue,
       error,
       errorId,
-      filteredOptions,
+      filteredOptions: externalFilteredOptions,
       id,
       isListOpen,
       isLoading = false,
       isMultiSelect,
       onToggleSelected,
-      selectedOptions,
+      selectedOptions: externalSelectedOptions,
       maxSelected,
-      options,
+      options: externalOptions,
       value,
       onChange,
       onClear,
       shouldAutocomplete,
       size,
       ...rest
     } = props;
+    const options = mapToComboboxOptionArray(externalOptions) || [];
+    const filteredOptions = mapToComboboxOptionArray(externalFilteredOptions);
+    const selectedOptions = mapToComboboxOptionArray(externalSelectedOptions);
     return (
       <InputContextProvider
         value={{

@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx

@@ -5,6 +5,8 @@ import { Loader } from "../../../loader";
 import { BodyShort, Label } from "../../../typography";
 import { useInputContext } from "../Input/inputContext";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
+import { isInList, toComboboxOption } from "../combobox-utils";
+import { ComboboxOption } from "../types";
 import filteredOptionsUtil from "./filtered-options-util";
 import { useFilteredOptionsContext } from "./filteredOptionsContext";
 
@@ -30,8 +32,8 @@ const FilteredOptions = () => {
   const { isMultiSelect, selectedOptions, toggleOption, maxSelected } =
     useSelectedOptionsContext();
 
-  const isDisabled = (option) =>
-    maxSelected?.isLimitReached && !selectedOptions.includes(option);
+  const isDisabled = (option: ComboboxOption) =>
+    maxSelected?.isLimitReached && !isInList(option.value, selectedOptions);
 
   const shouldRenderNonSelectables =
     maxSelected?.isLimitReached || // Render maxSelected message
@@ -102,8 +104,8 @@ const FilteredOptions = () => {
                 }
               }}
               onPointerUp={(event) => {
-                toggleOption(value, event);
-                if (!isMultiSelect && !selectedOptions.includes(value))
+                toggleOption(toComboboxOption(value), event);
+                if (!isMultiSelect && !isInList(value, selectedOptions))
                   toggleIsListOpen(false);
               }}
               id={filteredOptionsUtil.getAddNewOptionId(id)}
@@ -132,21 +134,23 @@ const FilteredOptions = () => {
               className={cl("navds-combobox__list-item", {
                 "navds-combobox__list-item--focus":
                   activeDecendantId ===
-                  filteredOptionsUtil.getOptionId(id, option),
-                "navds-combobox__list-item--selected":
-                  selectedOptions.includes(option),
+                  filteredOptionsUtil.getOptionId(id, option.label),
+                "navds-combobox__list-item--selected": isInList(
+                  option.value,
+                  selectedOptions,
+                ),
               })}
               data-no-focus={isDisabled(option) || undefined}
-              id={filteredOptionsUtil.getOptionId(id, option)}
-              key={option}
+              id={filteredOptionsUtil.getOptionId(id, option.label)}
+              key={option.label}
               tabIndex={-1}
               onMouseMove={() => {
                 if (
                   activeDecendantId !==
-                  filteredOptionsUtil.getOptionId(id, option)
+                  filteredOptionsUtil.getOptionId(id, option.label)
                 ) {
                   virtualFocus.moveFocusToElement(
-                    filteredOptionsUtil.getOptionId(id, option),
+                    filteredOptionsUtil.getOptionId(id, option.label),
                   );
                   setIsMouseLastUsedInputDevice(true);
                 }
@@ -156,16 +160,19 @@ const FilteredOptions = () => {
                   return;
                 }
                 toggleOption(option, event);
-                if (!isMultiSelect && !selectedOptions.includes(option)) {
+                if (
+                  !isMultiSelect &&
+                  !isInList(option.value, selectedOptions)
+                ) {
                   toggleIsListOpen(false);
                 }
               }}
               role="option"
-              aria-selected={selectedOptions.includes(option)}
+              aria-selected={isInList(option.value, selectedOptions)}
               aria-disabled={isDisabled(option) || undefined}
             >
-              <BodyShort size={size}>{option}</BodyShort>
-              {selectedOptions.includes(option) && <CheckmarkIcon />}
+              <BodyShort size={size}>{option.label}</BodyShort>
+              {isInList(option.value, selectedOptions) && <CheckmarkIcon />}
             </li>
           ))}
         </ul>

@navikt/core/react/src/form/combobox/FilteredOptions/filtered-options-util.ts

@@ -1,17 +1,13 @@
+import { ComboboxOption } from "../types";
+
 const normalizeText = (text: string): string =>
   typeof text === "string" ? text.toLocaleLowerCase().trim() : "";
 
-const isPartOfText = (value, text) =>
+const isPartOfText = (value: string, text: string) =>
   normalizeText(text).startsWith(normalizeText(value ?? ""));
 
-const isValueInList = (value, list) =>
-  list?.find((listItem) => normalizeText(value) === normalizeText(listItem));
-
-const getMatchingValuesFromList = (value, list, alwaysIncluded) =>
-  list?.filter(
-    (listItem) =>
-      isPartOfText(value, listItem) || alwaysIncluded.includes(listItem),
-  );
+const getMatchingValuesFromList = (value: string, list: ComboboxOption[]) =>
+  list.filter((listItem) => isPartOfText(value, listItem.label));
 
 const getFilteredOptionsId = (comboboxId: string) =>
   `${comboboxId}-filtered-options`;
@@ -34,7 +30,6 @@ const getMaxSelectedOptionsId = (comboboxId: string) =>
 export default {
   normalizeText,
   isPartOfText,
-  isValueInList,
   getMatchingValuesFromList,
   getFilteredOptionsId,
   getAddNewOptionId,

@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx

@@ -10,21 +10,18 @@ import React, {
 import { useClientLayoutEffect, usePrevious } from "../../../util/hooks";
 import { useInputContext } from "../Input/inputContext";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
+import { toComboboxOption } from "../combobox-utils";
 import { useCustomOptionsContext } from "../customOptionsContext";
-import { ComboboxProps } from "../types";
+import { ComboboxOption, ComboboxProps } from "../types";
 import filteredOptionsUtils from "./filtered-options-util";
 import useVirtualFocus, { VirtualFocusType } from "./useVirtualFocus";
 
 type FilteredOptionsProps = {
-  children: any;
-  value: Pick<
-    ComboboxProps,
-    | "allowNewValues"
-    | "filteredOptions"
-    | "isListOpen"
-    | "isLoading"
-    | "options"
-  >;
+  children: React.ReactNode;
+  value: Pick<ComboboxProps, "allowNewValues" | "isListOpen" | "isLoading"> & {
+    filteredOptions?: ComboboxOption[];
+    options: ComboboxOption[];
+  };
 };
 
 type FilteredOptionsContextType = {
@@ -36,12 +33,12 @@ type FilteredOptionsContextType = {
   >;
   isListOpen: boolean;
   isLoading?: boolean;
-  filteredOptions: string[];
+  filteredOptions: ComboboxOption[];
   isMouseLastUsedInputDevice: boolean;
   setIsMouseLastUsedInputDevice: React.Dispatch<SetStateAction<boolean>>;
   isValueNew: boolean;
   toggleIsListOpen: (newState?: boolean) => void;
-  currentOption?: string;
+  currentOption?: ComboboxOption;
   shouldAutocomplete?: boolean;
   virtualFocus: VirtualFocusType;
 };
@@ -71,7 +68,7 @@ export const FilteredOptionsProvider = ({
     setSearchTerm,
     shouldAutocomplete,
   } = useInputContext();
-  const { selectedOptions, maxSelected } = useSelectedOptionsContext();
+  const { maxSelected } = useSelectedOptionsContext();
 
   const [isInternalListOpen, setInternalListOpen] = useState(false);
   const { customOptions } = useCustomOptionsContext();
@@ -81,18 +78,8 @@ export const FilteredOptionsProvider = ({
       return externalFilteredOptions;
     }
     const opts = [...customOptions, ...options];
-    return filteredOptionsUtils.getMatchingValuesFromList(
-      searchTerm,
-      opts,
-      selectedOptions,
-    );
-  }, [
-    customOptions,
-    externalFilteredOptions,
-    options,
-    searchTerm,
-    selectedOptions,
-  ]);
+    return filteredOptionsUtils.getMatchingValuesFromList(searchTerm, opts);
+  }, [customOptions, externalFilteredOptions, options, searchTerm]);
 
   const previousSearchTerm = usePrevious(searchTerm);
 
@@ -104,11 +91,11 @@ export const FilteredOptionsProvider = ({
       options.reduce(
         (map, _option) => ({
           ...map,
-          [filteredOptionsUtils.getOptionId(id, _option)]: _option,
+          [filteredOptionsUtils.getOptionId(id, _option.label)]: _option,
         }),
         {
           [filteredOptionsUtils.getAddNewOptionId(id)]: allowNewValues
-            ? value
+            ? toComboboxOption(value)
             : undefined,
         },
       ),
@@ -123,7 +110,7 @@ export const FilteredOptionsProvider = ({
       filteredOptions.length > 0
     ) {
       setValue(
-        `${searchTerm}${filteredOptions[0].substring(searchTerm.length)}`,
+        `${searchTerm}${filteredOptions[0].label.substring(searchTerm.length)}`,
       );
       setSearchTerm(searchTerm);
     }
@@ -161,7 +148,10 @@ export const FilteredOptionsProvider = ({
       activeOption = filteredOptionsUtils.getNoHitsId(id);
     } else if ((value && value !== "") || isLoading) {
       if (shouldAutocomplete && filteredOptions[0]) {
-        activeOption = filteredOptionsUtils.getOptionId(id, filteredOptions[0]);
+        activeOption = filteredOptionsUtils.getOptionId(
+          id,
+          filteredOptions[0].label,
+        );
       } else if (isListOpen && isLoading) {
         activeOption = filteredOptionsUtils.getIsLoadingId(id);
       }

@navikt/core/react/src/form/combobox/Input/Input.tsx

@@ -43,17 +43,17 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 
     const onEnter = useCallback(
       (event: React.KeyboardEvent) => {
-        const isTextInSelectedOptions = (text: string) => {
-          return selectedOptions.find(
-            (item) => item.toLocaleLowerCase() === text.toLocaleLowerCase(),
+        const isTextInSelectedOptions = (text: string) =>
+          selectedOptions.some(
+            (option) =>
+              option.label.toLocaleLowerCase() === text.toLocaleLowerCase(),
           );
-        };
 
         if (currentOption) {
           event.preventDefault();
           // Selecting a value from the dropdown / FilteredOptions
           toggleOption(currentOption, event);
-          if (!isMultiSelect && !isTextInSelectedOptions(currentOption)) {
+          if (!isMultiSelect && !isTextInSelectedOptions(currentOption.label)) {
             toggleIsListOpen(false);
           }
         } else if (shouldAutocomplete && isTextInSelectedOptions(value)) {
@@ -64,11 +64,15 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           event.preventDefault();
           // Autocompleting or adding a new value
           const selectedValue =
-            allowNewValues && isValueNew ? value : filteredOptions[0];
+            allowNewValues && isValueNew
+              ? { label: value, value }
+              : filteredOptions[0];
           toggleOption(selectedValue, event);
           if (
             !isMultiSelect &&
-            !isTextInSelectedOptions(filteredOptions[0] || selectedValue)
+            !isTextInSelectedOptions(
+              filteredOptions[0].label || selectedValue.label,
+            )
           ) {
             toggleIsListOpen(false);
           }
@@ -120,7 +124,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           if (value === "") {
             const lastSelectedOption =
               selectedOptions[selectedOptions.length - 1];
-            removeSelectedOption(lastSelectedOption);
+            if (lastSelectedOption) {
+              removeSelectedOption(lastSelectedOption);
+            }
           }
         } else if (e.key === "ArrowDown") {
           // Check that cursor position is at the end of the input field,

@navikt/core/react/src/form/combobox/SelectedOptions/SelectedOptions.tsx

@@ -1,15 +1,16 @@
 import React from "react";
 import { Chips } from "../../../chips";
 import { useInputContext } from "../Input/inputContext";
+import { ComboboxOption } from "../types";
 import { useSelectedOptionsContext } from "./selectedOptionsContext";
 
 interface SelectedOptionsProps {
-  selectedOptions?: string[];
+  selectedOptions?: ComboboxOption[];
   size?: "medium" | "small";
   children: React.ReactNode;
 }
 
-const Option = ({ option }: { option: string }) => {
+const Option = ({ option }: { option: ComboboxOption }) => {
   const { isMultiSelect, removeSelectedOption } = useSelectedOptionsContext();
   const { focusInput } = useInputContext();
 
@@ -21,11 +22,13 @@ const Option = ({ option }: { option: string }) => {
 
   if (!isMultiSelect) {
     return (
-      <div className="navds-combobox__selected-options--no-bg">{option}</div>
+      <div className="navds-combobox__selected-options--no-bg">
+        {option.label}
+      </div>
     );
   }
 
-  return <Chips.Removable onClick={onClick}>{option}</Chips.Removable>;
+  return <Chips.Removable onClick={onClick}>{option.label}</Chips.Removable>;
 };
 
 const SelectedOptions: React.FC<SelectedOptionsProps> = ({
@@ -37,7 +40,7 @@ const SelectedOptions: React.FC<SelectedOptionsProps> = ({
     <Chips className="navds-combobox__selected-options" size={size}>
       {selectedOptions.length
         ? selectedOptions.map((option, i) => (
-            <Option key={option + i} option={option} />
+            <Option key={option.label + i} option={option} />
           ))
         : []}
       {children}