@navikt/ds-react 4.11.2 → 4.12.0

package/src/alert/alert.stories.tsx

@@ -185,6 +185,16 @@ export const WithCloseButton: Story = {
           </BodyLong>
           <Link href="#">Id elit esse enim reprehenderit</Link>
         </AlertWithCloseButton>
+        <AlertWithCloseButton>
+          <DsHeading spacing size="small" level="3">
+            Aliquip duis est in commodo pariatur
+          </DsHeading>
+          <BodyLong>
+            Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
+            laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
+            sint commodo consequat eu aute.
+          </BodyLong>
+        </AlertWithCloseButton>
       </div>
     );
   },
@@ -197,6 +207,6 @@ export const WithCloseButton: Story = {
     });
 
     const buttonsAfter = canvas.getAllByTitle("Lukk Alert");
-    expect(buttonsAfter.length).toBe(1);
+    expect(buttonsAfter.length).toBe(2);
   },
 };

package/src/copybutton/CopyButton.tsx

@@ -63,6 +63,11 @@ export interface CopyButtonProps
    * @default 'Kopiert'
    */
   activeTitle?: string;
+  /**
+   * Icon position in Button
+   * @default "left"
+   */
+  iconPosition?: "left" | "right";
 }
 
 /**
@@ -91,6 +96,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       activeDuration = 2000,
       title = "Kopier",
       activeTitle = "Kopiert",
+      iconPosition = "left",
       ...rest
     },
     ref
@@ -119,6 +125,25 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       }, activeDuration);
     };
 
+    const CopyIcon = () => {
+      return active ? (
+        <span className="navds-copybutton__icon">
+          {activeIcon ?? (
+            <CheckmarkIcon
+              aria-hidden={!!text}
+              title={text ? undefined : activeTitle}
+            />
+          )}
+        </span>
+      ) : (
+        <span className="navds-copybutton__icon">
+          {icon ?? (
+            <FilesIcon aria-hidden={!!text} title={text ? undefined : title} />
+          )}
+        </span>
+      );
+    };
+
     return (
       <button
         ref={ref}
@@ -138,25 +163,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
         onClick={handleClick}
       >
         <span className="navds-copybutton__content">
-          {active ? (
-            <span className="navds-copybutton__icon">
-              {activeIcon ?? (
-                <CheckmarkIcon
-                  aria-hidden={!!text}
-                  title={text ? undefined : activeTitle}
-                />
-              )}
-            </span>
-          ) : (
-            <span className="navds-copybutton__icon">
-              {icon ?? (
-                <FilesIcon
-                  aria-hidden={!!text}
-                  title={text ? undefined : title}
-                />
-              )}
-            </span>
-          )}
+          {iconPosition === "left" && <CopyIcon />}
 
           {text &&
             (active ? (
@@ -176,6 +183,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
                 {text}
               </Label>
             ))}
+          {iconPosition === "right" && <CopyIcon />}
         </span>
       </button>
     );

package/src/copybutton/copy-button.stories.tsx

@@ -60,6 +60,16 @@ export const Variants = {
   ),
 };
 
+export const IconPosition = {
+  render: () => (
+    <div className="colgap">
+      <CopyButton copyText="3.14" iconPosition="left" text="Kopier" />
+
+      <CopyButton copyText="3.14" iconPosition="right" text="Kopier" />
+    </div>
+  ),
+};
+
 export const Sizes = {
   render: () => (
     <div className="colgap">

package/src/form/checkbox/Checkbox.tsx

@@ -86,6 +86,23 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           }}
         />
         <label htmlFor={inputProps.id} className="navds-checkbox__label">
+          <span className="navds-checkbox__icon">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="13"
+              height="10"
+              viewBox="0 0 13 10"
+              fill="none"
+              focusable={false}
+              role="img"
+              aria-hidden
+            >
+              <path
+                d="M4.03524 6.41478L10.4752 0.404669C11.0792 -0.160351 12.029 -0.130672 12.5955 0.47478C13.162 1.08027 13.1296 2.03007 12.5245 2.59621L5.02111 9.59934C4.74099 9.85904 4.37559 10 4.00025 10C3.60651 10 3.22717 9.84621 2.93914 9.56111L0.439143 7.06111C-0.146381 6.47558 -0.146381 5.52542 0.439143 4.93989C1.02467 4.35437 1.97483 4.35437 2.56036 4.93989L4.03524 6.41478Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
           <span
             className={cl("navds-checkbox__content", {
               "navds-sr-only": props.hideLabel,

package/src/form/combobox/Combobox.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useMemo, useRef } from "react";
-import { BodyShort, Label, mergeRefs } from "../..";
+import { BodyShort, ErrorMessage, Label, mergeRefs } from "../..";
 import ClearButton from "./ClearButton";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
 import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
@@ -39,12 +39,15 @@ export const Combobox = forwardRef<
 
   const {
     clearInput,
+    error,
+    errorId,
     focusInput,
     hasError,
     inputDescriptionId,
     inputProps,
     inputRef,
     value,
+    showErrorMsg,
     size = "medium",
   } = useInputContext();
 
@@ -129,6 +132,14 @@ export const Combobox = forwardRef<
         </div>
         <FilteredOptions />
       </div>
+      <div
+        className="navds-form-field__error"
+        id={errorId}
+        aria-relevant="additions removals"
+        aria-live="polite"
+      >
+        {showErrorMsg && <ErrorMessage size={size}>{error}</ErrorMessage>}
+      </div>
     </ComboboxWrapper>
   );
 });

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

@@ -8,7 +8,6 @@ import { useInputContext } from "../Input/inputContext";
 
 const FilteredOptions = () => {
   const {
-    clearInput,
     inputProps: { id },
     size,
     value,
@@ -51,7 +50,8 @@ const FilteredOptions = () => {
           tabIndex={-1}
           onPointerUp={(event) => {
             toggleOption(value, event);
-            clearInput(event);
+            if (!isMultiSelect && !selectedOptions.includes(value))
+              toggleIsListOpen(false);
           }}
           id={`${id}-combobox-new-option`}
           className={cl("navds-combobox__list-item__new-option", {
@@ -92,10 +92,8 @@ const FilteredOptions = () => {
           tabIndex={-1}
           onPointerUp={(event) => {
             toggleOption(option, event);
-            clearInput(event);
-            if (!isMultiSelect) {
+            if (!isMultiSelect && !selectedOptions.includes(option))
               toggleIsListOpen(false);
-            }
           }}
           role="option"
           aria-selected={selectedOptions.includes(option)}

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

@@ -8,6 +8,7 @@ import React, {
   useRef,
   useLayoutEffect,
 } from "react";
+import cl from "clsx";
 import { useCustomOptionsContext } from "../customOptionsContext";
 import { useInputContext } from "../Input/inputContext";
 import usePrevious from "../../../util/usePrevious";
@@ -58,7 +59,7 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
   } = props;
   const filteredOptionsRef = useRef<HTMLUListElement | null>(null);
   const {
-    inputProps: { id },
+    inputProps: { "aria-describedby": partialAriaDescribedBy, id },
     value,
     searchTerm,
     setValue,
@@ -124,18 +125,26 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
   }, [allowNewValues, isValueNew]);
 
   const ariaDescribedBy = useMemo(() => {
+    let activeOption;
     if (!isLoading && filteredOptions.length === 0) {
-      return `${id}-no-hits`;
+      activeOption = `${id}-no-hits`;
     } else if ((value && value !== "") || isLoading) {
       if (shouldAutocomplete && filteredOptions[0]) {
-        return `${id}-option-${filteredOptions[0].replace(" ", "-")}`;
-      } else if (isLoading) {
-        return `${id}-is-loading`;
+        activeOption = `${id}-option-${filteredOptions[0].replace(" ", "-")}`;
+      } else if (isListOpen && isLoading) {
+        activeOption = `${id}-is-loading`;
       }
-    } else {
-      return undefined;
     }
-  }, [isLoading, value, shouldAutocomplete, filteredOptions, id]);
+    return cl(activeOption, partialAriaDescribedBy) || undefined;
+  }, [
+    isListOpen,
+    isLoading,
+    value,
+    partialAriaDescribedBy,
+    shouldAutocomplete,
+    filteredOptions,
+    id,
+  ]);
 
   const currentOption = useMemo(() => {
     if (filteredOptionsIndex == null) {

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

@@ -22,8 +22,12 @@ interface InputProps
 const Input = forwardRef<HTMLInputElement, InputProps>(
   ({ inputClassName, error, errorId, ...rest }, ref) => {
     const { clearInput, inputProps, onChange, size, value } = useInputContext();
-    const { selectedOptions, removeSelectedOption, toggleOption } =
-      useSelectedOptionsContext();
+    const {
+      selectedOptions,
+      removeSelectedOption,
+      toggleOption,
+      isMultiSelect,
+    } = useSelectedOptionsContext();
     const {
       activeDecendantId,
       allowNewValues,
@@ -47,7 +51,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           event.preventDefault();
           // Selecting a value from the dropdown / FilteredOptions
           toggleOption(currentOption, event);
-          clearInput(event);
+          if (!isMultiSelect && !selectedOptions.includes(currentOption))
+            toggleIsListOpen(false);
         } else if (shouldAutocomplete && selectedOptions.includes(value)) {
           event.preventDefault();
           // Trying to set the same value that is already set, so just clearing the input
@@ -56,15 +61,18 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           event.preventDefault();
           // Autocompleting or adding a new value
           toggleOption(value, event);
-          clearInput(event);
+          if (!isMultiSelect && !selectedOptions.includes(value))
+            toggleIsListOpen(false);
         }
       },
       [
         allowNewValues,
         clearInput,
         currentOption,
+        isMultiSelect,
         selectedOptions,
         shouldAutocomplete,
+        toggleIsListOpen,
         toggleOption,
         value,
       ]
@@ -162,6 +170,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         aria-autocomplete={shouldAutocomplete ? "both" : "list"}
         aria-activedescendant={activeDecendantId}
         aria-describedby={ariaDescribedBy}
+        aria-invalid={inputProps["aria-invalid"]}
         className={cl(
           inputClassName,
           "navds-combobox__input",

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

@@ -13,6 +13,7 @@ import { useFormField, FormFieldType } from "../../useFormField";
 
 interface InputContextType extends FormFieldType {
   clearInput: (event: React.PointerEvent | React.KeyboardEvent) => void;
+  error?: string;
   focusInput: () => void;
   inputRef: React.RefObject<HTMLInputElement>;
   value: string;
@@ -80,10 +81,11 @@ export const InputContextProvider = ({ children, value: props }) => {
   const clearInput = useCallback(
     (event: React.PointerEvent | React.KeyboardEvent) => {
       onClear?.(event);
+      externalOnChange?.(null, "");
       setValue("");
       setSearchTerm("");
     },
-    [onClear, setSearchTerm, setValue]
+    [externalOnChange, onClear, setValue]
   );
 
   const focusInput = useCallback(() => {
@@ -101,6 +103,7 @@ export const InputContextProvider = ({ children, value: props }) => {
       value={{
         ...formFieldProps,
         clearInput,
+        error,
         focusInput,
         inputRef,
         value,

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

@@ -42,8 +42,12 @@ export const SelectedOptionsProvider = ({
   >;
 }) => {
   const { clearInput, focusInput } = useInputContext();
-  const { customOptions, removeCustomOption, addCustomOption } =
-    useCustomOptionsContext();
+  const {
+    customOptions,
+    removeCustomOption,
+    addCustomOption,
+    setCustomOptions,
+  } = useCustomOptionsContext();
   const {
     allowNewValues,
     isMultiSelect,
@@ -60,11 +64,12 @@ export const SelectedOptionsProvider = ({
 
   const addSelectedOption = useCallback(
     (option: string) => {
-      const isAddedByUser = !options
+      const isCustomOption = !options
         .map((opt) => opt.toLowerCase())
         .includes(option?.toLowerCase?.());
-      if (isAddedByUser) {
+      if (isCustomOption) {
         allowNewValues && addCustomOption(option);
+        !isMultiSelect && setSelectedOptions([]);
       } else if (isMultiSelect) {
         setSelectedOptions((prevSelectedOptions) => [
           ...prevSelectedOptions,
@@ -72,16 +77,24 @@ export const SelectedOptionsProvider = ({
         ]);
       } else {
         setSelectedOptions([option]);
+        setCustomOptions([]);
       }
-      onToggleSelected?.(option, true, isAddedByUser);
+      onToggleSelected?.(option, true, isCustomOption);
     },
-    [addCustomOption, allowNewValues, isMultiSelect, onToggleSelected, options]
+    [
+      addCustomOption,
+      allowNewValues,
+      isMultiSelect,
+      onToggleSelected,
+      options,
+      setCustomOptions,
+    ]
   );
 
   const removeSelectedOption = useCallback(
     (option: string) => {
-      const isAddedByUser = customOptions.includes(option);
-      if (isAddedByUser) {
+      const isCustomOption = customOptions.includes(option);
+      if (isCustomOption) {
         removeCustomOption(option);
       } else {
         setSelectedOptions((prevSelectedOptions) =>
@@ -90,7 +103,7 @@ export const SelectedOptionsProvider = ({
           )
         );
       }
-      onToggleSelected?.(option, false, isAddedByUser);
+      onToggleSelected?.(option, false, isCustomOption);
     },
     [customOptions, onToggleSelected, removeCustomOption]
   );
@@ -102,16 +115,13 @@ export const SelectedOptionsProvider = ({
       } else {
         addSelectedOption(option);
       }
-      if (!isMultiSelect) {
-        clearInput(event);
-      }
+      clearInput(event);
       focusInput();
     },
     [
       addSelectedOption,
       clearInput,
       focusInput,
-      isMultiSelect,
       removeSelectedOption,
       selectedOptions,
     ]

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

@@ -3,7 +3,7 @@ import { Meta } from "@storybook/react";
 import React, { useState, useId, useMemo } from "react";
 import { userEvent, within } from "@storybook/testing-library";
 import { Chips, UNSAFE_Combobox, TextField } from "../../index";
-import { expect } from "@storybook/jest";
+import { expect, jest } from "@storybook/jest";
 
 export default {
   title: "ds-react/Combobox",
@@ -94,6 +94,27 @@ MultiSelect.args = {
   size: "medium",
 };
 
+export function WithAddNewOptions(props) {
+  const id = useId();
+  return (
+    <DemoContainer dataTheme={props.darkMode}>
+      <UNSAFE_Combobox
+        id={id}
+        label="Komboboks med mulighet for å legge til nye verdier"
+        options={props.options}
+        allowNewValues={props.allowNewValues}
+        shouldAutocomplete={props.shouldAutoComplete}
+      />
+    </DemoContainer>
+  );
+}
+
+WithAddNewOptions.args = {
+  options,
+  allowNewValues: true,
+  shouldAutoComplete: true,
+};
+
 export function MultiSelectWithAddNewOptions(props) {
   const id = useId();
   return (
@@ -101,7 +122,7 @@ export function MultiSelectWithAddNewOptions(props) {
       <UNSAFE_Combobox
         id={id}
         isMultiSelect={props.isMultiSelect}
-        label="Komboboks (med mulighet for å legge til nye verdier)"
+        label="Multiselect komboboks med mulighet for å legge til nye verdier"
         options={props.options}
         allowNewValues={props.allowNewValues}
       />
@@ -295,6 +316,33 @@ ComboboxSizes.args = {
   options,
 };
 
+export const WithError = {
+  args: {
+    error: "Du må velge en favorittfrukt.",
+    isLoading: true,
+  },
+  render: (props) => {
+    const [hasSelectedValue, setHasSelectedValue] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    return (
+      <DemoContainer dataTheme={props.darkMode}>
+        <UNSAFE_Combobox
+          filteredOptions={isLoading ? [] : undefined}
+          options={options}
+          label="Hva er dine favorittfrukter?"
+          error={!hasSelectedValue && props.error}
+          isLoading={isLoading}
+          onChange={() => {
+            setIsLoading(true);
+            setTimeout(() => setIsLoading(false), 2000);
+          }}
+          onToggleSelected={(_, isSelected) => setHasSelectedValue(isSelected)}
+        />
+      </DemoContainer>
+    );
+  },
+};
+
 function sleep(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
@@ -324,6 +372,7 @@ export const CancelInputTest = {
     userEvent.keyboard("{Escape}");
     await sleep(1000);
     userEvent.keyboard("{ArrowDown}");
+    await sleep(500);
     const banana = canvas.getByText("banana");
     userEvent.click(banana);
   },
@@ -421,3 +470,42 @@ export const AddWhenAddNewDisabledTest = {
     expect(invalidSelect).not.toBeInTheDocument();
   },
 };
+
+export const TestThatCallbacksOnlyFireWhenExpected = {
+  args: {
+    onChange: jest.fn(),
+    onClear: jest.fn(),
+    onToggleSelected: jest.fn(),
+  },
+  render: (props) => {
+    return (
+      <DemoContainer dataTheme={props.darkMode}>
+        <UNSAFE_Combobox
+          options={options}
+          label="Hva er dine favorittfrukter?"
+          {...props}
+        />
+      </DemoContainer>
+    );
+  },
+  play: async ({ canvasElement, args }) => {
+    args.onToggleSelected.mockClear();
+    args.onClear.mockClear();
+    args.onChange.mockClear();
+    const canvas = within(canvasElement);
+
+    const input = canvas.getByLabelText("Hva er dine favorittfrukter?");
+    const searchWord = "tangerine";
+
+    userEvent.click(input);
+    await userEvent.type(input, searchWord, { delay: 200 });
+    await sleep(250);
+    userEvent.keyboard("{ArrowDown}");
+    await sleep(250);
+    userEvent.keyboard("{Enter}");
+    await sleep(250);
+    expect(args.onClear.mock.calls).toHaveLength(1);
+    expect(args.onToggleSelected.mock.calls).toHaveLength(1);
+    expect(args.onChange.mock.calls).toHaveLength(searchWord.length + 1);
+  },
+};

package/src/form/combobox/customOptionsContext.tsx

@@ -1,10 +1,12 @@
 import React, { useState, useCallback, createContext, useContext } from "react";
 import { useInputContext } from "./Input/inputContext";
+import { useSelectedOptionsContext } from "./SelectedOptions/selectedOptionsContext";
 
 type CustomOptionsContextType = {
   customOptions: string[];
   removeCustomOption: (option: string) => void;
   addCustomOption: (option: string) => void;
+  setCustomOptions: React.Dispatch<React.SetStateAction<string[]>>;
 };
 
 const CustomOptionsContext = createContext<CustomOptionsContextType>(
@@ -14,6 +16,7 @@ const CustomOptionsContext = createContext<CustomOptionsContextType>(
 export const CustomOptionsProvider = ({ children }) => {
   const [customOptions, setCustomOptions] = useState<string[]>([]);
   const { focusInput } = useInputContext();
+  const { isMultiSelect } = useSelectedOptionsContext();
 
   const removeCustomOption = useCallback(
     (option) => {
@@ -27,16 +30,21 @@ export const CustomOptionsProvider = ({ children }) => {
 
   const addCustomOption = useCallback(
     (option) => {
-      setCustomOptions((prevOptions) => [...prevOptions, option]);
+      if (isMultiSelect) {
+        setCustomOptions((prevOptions) => [...prevOptions, option]);
+      } else {
+        setCustomOptions([option]);
+      }
       focusInput();
     },
-    [focusInput, setCustomOptions]
+    [focusInput, isMultiSelect, setCustomOptions]
   );
 
   const customOptionsState = {
     customOptions,
     removeCustomOption,
     addCustomOption,
+    setCustomOptions,
   };
 
   return (

package/src/form/combobox/types.ts

@@ -66,7 +66,10 @@ export interface ComboboxProps
    * @param event
    * @returns
    */
-  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  onChange?: (
+    event: ChangeEvent<HTMLInputElement> | null,
+    value?: string
+  ) => void;
   /**
    * Callback function triggered whenever the input field is cleared
    *
@@ -79,13 +82,13 @@ export interface ComboboxProps
    *
    * @param option
    * @param isSelected - Whether the option has been selected or unselected
-   * @param isAddedByUser - Whether the option comes from user input, instead of from the list
+   * @param isCustomOption - Whether the option comes from user input, instead of from the list
    * @returns
    */
   onToggleSelected?: (
     option: string,
     isSelected: boolean,
-    isAddedByUser: boolean
+    isCustomOption: boolean
   ) => void;
   /**
    * List of selected options.