@navikt/ds-react 6.1.1 → 6.3.0

package/src/date/datepicker/types.ts

@@ -16,7 +16,7 @@ export type MultipleMode = {
   min?: number;
   max?: number;
   /**
-   * Allows selecting a week at a time. Only used with mode="multiple".
+   * Allows selecting a week at a time. Only used with `mode` is set to "multiple".
    */
   onWeekNumberClick?: DayPickerBase["onWeekNumberClick"];
 };
@@ -83,21 +83,22 @@ export interface DatePickerDefaultProps
    */
   showWeekNumber?: boolean;
   /**
-   * Open state for user-controlled state. Component controlled by default
+   * Open state for user-controlled state. Component controlled by default.
    */
   open?: boolean;
   /**
-   * onClose callback for user-controlled state
+   * onClose callback for user-controlled state.
    */
   onClose?: () => void;
   /**
-   * onOpenToggle callback for user-controlled state. Only called if `<DatePicker.Input />` is used
+   * onOpenToggle callback for user-controlled state. Only called if `<DatePicker.Input />` is used.
    */
   onOpenToggle?: () => void;
   /**
-   * Avoid using if possible!
+   * **Avoid using if possible!**
+   *
    * Changes what CSS position property to use.
-   * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
+   * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape.
    * @default See Popover
    */
   strategy?: "absolute" | "fixed";

package/src/date/hooks/useDatepicker.tsx

@@ -49,10 +49,11 @@ export interface UseDatepickerOptions
    */
   onValidate?: (val: DateValidationT) => void;
   /**
-   * Allows input of with 'yy' year format.
+   * Allows input of with `yy` year format.
+   *
+   * Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
+   * e.g. In 2024 this equals to 1944 - 2043.
    * @default true
-   * @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
-   * In 2024 this equals to 1944 - 2043
    */
   allowTwoDigitYear?: boolean;
 }

package/src/date/hooks/useMonthPicker.tsx

@@ -36,10 +36,11 @@ export interface UseMonthPickerOptions
    */
   defaultYear?: Date;
   /**
-   * Allows input of with 'yy' year format.
-   * @default true
-   * @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
+   * Allows input of with `yy` year format.
+   *
+   * Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
    * In 2024 this equals to 1944 - 2043
+   * @default true
    */
   allowTwoDigitYear?: boolean;
 }

package/src/date/monthpicker/types.ts

@@ -69,7 +69,8 @@ export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   onYearChange?: (y?: Date) => void;
   /**
-   * Avoid using if possible!
+   * **Avoid using if possible!**
+   *
    * Changes what CSS position property to use
    * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
    * @default "absolute"

package/src/date/parts/DateInput.tsx

@@ -21,7 +21,7 @@ export interface DateInputProps
   hideLabel?: boolean;
   /**
    * Changes padding and font-sizes
-   * @default medium
+   * @default "medium"
    */
   size?: "medium" | "small";
   /**

package/src/expansion-card/ExpansionCardTitle.tsx

@@ -7,7 +7,7 @@ export interface ExpansionCardTitleProps
   children: React.ReactNode;
   /**
    * Changes text-sizing
-   * @default medium
+   * @default "medium"
    */
   size?: "large" | "medium" | "small";
 }

package/src/form/checkbox/CheckboxGroup.tsx

@@ -19,7 +19,7 @@ export interface CheckboxGroupProps
     "onChange" | "errorPropagation" | "defaultValue"
   > {
   /**
-   * Collection of <Checkbox/>
+   * Collection of `<Checkbox/>`.
    */
   children: React.ReactNode;
   /**
@@ -27,11 +27,11 @@ export interface CheckboxGroupProps
    */
   value?: any[];
   /**
-   * Default checked checkboxes on render
+   * Default checked checkboxes on render.
    */
   defaultValue?: any[];
   /**
-   * Returns current checked checkboxes in group
+   * Returns current checked checkboxes in group.
    */
   onChange?: (value: any[]) => void;
 }

package/src/form/checkbox/types.ts

@@ -5,12 +5,12 @@ export interface CheckboxProps
   extends FormFieldProps,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
   /**
-   * Adds error indication on checkbox
+   * Adds error indication on checkbox.
    * @default false
    */
   error?: boolean;
   /**
-   * Id for error resulting in checkbox having error
+   * Id for error resulting in checkbox having error.
    */
   errorId?: string;
   /**
@@ -26,12 +26,12 @@ export interface CheckboxProps
    */
   value?: any;
   /**
-   * Specify whether the Checkbox is in an indeterminate state
+   * Specify whether the Checkbox is in an indeterminate state.
    * @default false
    */
   indeterminate?: boolean;
   /**
-   * Adds a description to extend labling of Checkbox
+   * Adds a description to extend labling of Checkbox.
    */
   description?: string;
 }

package/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,15 +37,15 @@ 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,
@@ -52,6 +53,9 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
       size,
       ...rest
     } = props;
+    const options = mapToComboboxOptionArray(externalOptions) || [];
+    const filteredOptions = mapToComboboxOptionArray(externalFilteredOptions);
+    const selectedOptions = mapToComboboxOptionArray(externalSelectedOptions);
     return (
       <InputContextProvider
         value={{

package/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>

package/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,

package/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);
       }

package/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,

package/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}

package/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx

@@ -7,19 +7,20 @@ import React, {
 } from "react";
 import { usePrevious } from "../../../util/hooks";
 import { useInputContext } from "../Input/inputContext";
+import { isInList } from "../combobox-utils";
 import { useCustomOptionsContext } from "../customOptionsContext";
-import { ComboboxProps, MaxSelected } from "../types";
+import { ComboboxOption, ComboboxProps, MaxSelected } from "../types";
 
 type SelectedOptionsContextType = {
-  addSelectedOption: (option: string) => void;
+  addSelectedOption: (option: ComboboxOption) => void;
   isMultiSelect?: boolean;
-  removeSelectedOption: (option: string) => void;
-  prevSelectedOptions?: string[];
-  selectedOptions: string[];
+  removeSelectedOption: (option: ComboboxOption) => void;
+  prevSelectedOptions?: ComboboxOption[];
+  selectedOptions: ComboboxOption[];
   maxSelected?: MaxSelected & { isLimitReached: boolean };
   setSelectedOptions: (any) => void;
   toggleOption: (
-    option: string,
+    option: ComboboxOption,
     event: React.KeyboardEvent | React.PointerEvent,
   ) => void;
 };
@@ -35,13 +36,8 @@ export const SelectedOptionsProvider = ({
   children: any;
   value: Pick<
     ComboboxProps,
-    | "allowNewValues"
-    | "isMultiSelect"
-    | "options"
-    | "selectedOptions"
-    | "onToggleSelected"
-    | "maxSelected"
-  >;
+    "allowNewValues" | "isMultiSelect" | "onToggleSelected" | "maxSelected"
+  > & { options: ComboboxOption[]; selectedOptions?: ComboboxOption[] };
 }) => {
   const { clearInput, focusInput } = useInputContext();
   const {
@@ -58,7 +54,9 @@ export const SelectedOptionsProvider = ({
     options,
     maxSelected,
   } = value;
-  const [internalSelectedOptions, setSelectedOptions] = useState<string[]>([]);
+  const [internalSelectedOptions, setSelectedOptions] = useState<
+    ComboboxOption[]
+  >([]);
   const selectedOptions = useMemo(
     () =>
       externalSelectedOptions ?? [...customOptions, ...internalSelectedOptions],
@@ -66,10 +64,8 @@ export const SelectedOptionsProvider = ({
   );
 
   const addSelectedOption = useCallback(
-    (option: string) => {
-      const isCustomOption = !options
-        .map((opt) => opt.toLowerCase())
-        .includes(option?.toLowerCase?.());
+    (option: ComboboxOption) => {
+      const isCustomOption = !isInList(option, options);
       if (isCustomOption) {
         allowNewValues && addCustomOption(option);
         !isMultiSelect && setSelectedOptions([]);
@@ -82,7 +78,7 @@ export const SelectedOptionsProvider = ({
         setSelectedOptions([option]);
         setCustomOptions([]);
       }
-      onToggleSelected?.(option, true, isCustomOption);
+      onToggleSelected?.(option.value, true, isCustomOption);
     },
     [
       addCustomOption,
@@ -95,8 +91,8 @@ export const SelectedOptionsProvider = ({
   );
 
   const removeSelectedOption = useCallback(
-    (option: string) => {
-      const isCustomOption = customOptions.includes(option);
+    (option: ComboboxOption) => {
+      const isCustomOption = isInList(option, customOptions);
       if (isCustomOption) {
         removeCustomOption(option);
       } else {
@@ -106,14 +102,17 @@ export const SelectedOptionsProvider = ({
           ),
         );
       }
-      onToggleSelected?.(option, false, isCustomOption);
+      onToggleSelected?.(option.value, false, isCustomOption);
     },
     [customOptions, onToggleSelected, removeCustomOption],
   );
 
   const toggleOption = useCallback(
-    (option: string, event: React.KeyboardEvent | React.PointerEvent) => {
-      if (selectedOptions.includes(option)) {
+    (
+      option: ComboboxOption,
+      event: React.KeyboardEvent | React.PointerEvent,
+    ) => {
+      if (isInList(option.value, selectedOptions)) {
         removeSelectedOption(option);
       } else {
         addSelectedOption(option);
@@ -130,7 +129,7 @@ export const SelectedOptionsProvider = ({
     ],
   );
 
-  const prevSelectedOptions = usePrevious<string[]>(selectedOptions);
+  const prevSelectedOptions = usePrevious<ComboboxOption[]>(selectedOptions);
 
   const isLimitReached =
     !!maxSelected?.limit && selectedOptions.length >= maxSelected.limit;