@navikt/ds-react 4.6.1 → 4.7.0

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

@@ -0,0 +1,106 @@
+import React from "react";
+import cl from "clsx";
+import { BodyShort, Label, Loader } from "../../..";
+import { CheckmarkIcon, PlusIcon } from "@navikt/aksel-icons";
+import { useFilteredOptionsContext } from "./filteredOptionsContext";
+import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
+import { useInputContext } from "../Input/inputContext";
+
+const FilteredOptions = () => {
+  const {
+    inputProps: { id },
+    size,
+    value,
+  } = useInputContext();
+  const {
+    allowNewValues,
+    isLoading,
+    isListOpen,
+    filteredOptions,
+    filteredOptionsIndex,
+    filteredOptionsRef,
+    isValueNew,
+    toggleIsListOpen,
+  } = useFilteredOptionsContext();
+  const { isMultiSelect, selectedOptions, toggleOption } =
+    useSelectedOptionsContext();
+
+  return (
+    <ul
+      ref={filteredOptionsRef}
+      className={cl("navds-combobox__list", {
+        "navds-combobox__list--closed": !isListOpen,
+      })}
+      id={`${id}-filtered-options`}
+      role="listbox"
+      tabIndex={-1}
+    >
+      {isLoading && (
+        <li
+          className="navds-combobox__list-item--loading"
+          role="option"
+          aria-selected={false}
+          id={`${id}-is-loading`}
+        >
+          <Loader aria-label="Søker..." />
+        </li>
+      )}
+      {isValueNew && allowNewValues && (
+        <li
+          tabIndex={-1}
+          onPointerUp={(event) => toggleOption(value, event)}
+          id={`${id}-combobox-new-option`}
+          className={cl("navds-combobox__list-item__new-option", {
+            "navds-combobox__list-item__new-option--focus":
+              filteredOptionsIndex === -1,
+          })}
+          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={`${id}-no-hits`}
+        >
+          Ingen søketreff
+        </li>
+      )}
+      {filteredOptions.map((option, index) => (
+        <li
+          className={cl("navds-combobox__list-item", {
+            "navds-combobox__list-item--focus": index === filteredOptionsIndex,
+            "navds-combobox__list-item--selected":
+              selectedOptions.includes(option),
+          })}
+          id={`${id}-option-${option.replace(" ", "-")}`}
+          key={option}
+          tabIndex={-1}
+          onPointerUp={(event) => {
+            toggleOption(option, event);
+            if (!isMultiSelect) {
+              toggleIsListOpen(false);
+            }
+          }}
+          role="option"
+          aria-selected={selectedOptions.includes(option)}
+        >
+          <BodyShort size={size}>{option}</BodyShort>
+          {selectedOptions.includes(option) && <CheckmarkIcon />}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default FilteredOptions;

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

@@ -0,0 +1,266 @@
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  createContext,
+  useContext,
+  useCallback,
+  useRef,
+  useLayoutEffect,
+} from "react";
+import { useCustomOptionsContext } from "../customOptionsContext";
+import { useInputContext } from "../Input/inputContext";
+import usePrevious from "../../../util/usePrevious";
+
+const normalizeText = (text: string): string =>
+  typeof text === "string" ? `${text}`.toLowerCase().trim() : "";
+
+const isPartOfText = (value, text) =>
+  normalizeText(text).startsWith(normalizeText(value ?? ""));
+
+const isValueInList = (value, list) =>
+  list?.find((listItem) => normalizeText(value) === normalizeText(listItem));
+
+const getMatchingValuesFromList = (value, list) =>
+  list?.filter((listItem) => isPartOfText(value, listItem));
+
+type FilteredOptionsContextType = {
+  activeDecendantId?: string;
+  allowNewValues?: boolean;
+  ariaDescribedBy?: string;
+  filteredOptionsRef: React.RefObject<HTMLUListElement>;
+  filteredOptionsIndex: number | null;
+  setFilteredOptionsIndex: (index: number) => void;
+  isListOpen: boolean;
+  isLoading?: boolean;
+  filteredOptions: string[];
+  isValueNew: boolean;
+  toggleIsListOpen: (newState?: boolean) => void;
+  currentOption: string | null;
+  resetFilteredOptionsIndex: () => void;
+  moveFocusUp: () => void;
+  moveFocusDown: () => void;
+  moveFocusToInput: () => void;
+  moveFocusToEnd: () => void;
+  shouldAutocomplete?: boolean;
+};
+const FilteredOptionsContext = createContext<FilteredOptionsContextType>(
+  {} as FilteredOptionsContextType
+);
+
+export const FilteredOptionsProvider = ({ children, value: props }) => {
+  const {
+    allowNewValues,
+    filteredOptions: externalFilteredOptions,
+    isListOpen: isExternalListOpen,
+    isLoading,
+    options,
+  } = props;
+  const filteredOptionsRef = useRef<HTMLUListElement | null>(null);
+  const {
+    inputProps: { id },
+    value,
+    searchTerm,
+    setValue,
+    setSearchTerm,
+    shouldAutocomplete,
+  } = useInputContext();
+
+  const [filteredOptionsIndex, setFilteredOptionsIndex] = useState<
+    number | null
+  >(null);
+  const [isInternalListOpen, setInternalListOpen] = useState(false);
+  const { customOptions } = useCustomOptionsContext();
+
+  const filteredOptions = useMemo(() => {
+    if (externalFilteredOptions) {
+      return externalFilteredOptions;
+    }
+    const opts = [...customOptions, ...options];
+    setFilteredOptionsIndex(null);
+    return getMatchingValuesFromList(searchTerm, opts);
+  }, [customOptions, externalFilteredOptions, options, searchTerm]);
+
+  const previousSearchTerm = usePrevious(searchTerm);
+
+  useLayoutEffect(() => {
+    if (
+      shouldAutocomplete &&
+      normalizeText(searchTerm) !== "" &&
+      (previousSearchTerm?.length || 0) < searchTerm.length &&
+      filteredOptions.length > 0 &&
+      !isValueInList(searchTerm, filteredOptions)
+    ) {
+      setValue(
+        `${searchTerm}${filteredOptions[0].substring(searchTerm.length)}`
+      );
+      setSearchTerm(searchTerm);
+    }
+  }, [
+    filteredOptions,
+    previousSearchTerm,
+    searchTerm,
+    setSearchTerm,
+    setValue,
+    shouldAutocomplete,
+  ]);
+
+  const isListOpen = useMemo(() => {
+    return isExternalListOpen ?? isInternalListOpen;
+  }, [isExternalListOpen, isInternalListOpen]);
+
+  const toggleIsListOpen = useCallback((newState?: boolean) => {
+    setFilteredOptionsIndex(null);
+    setInternalListOpen((oldState) => newState ?? !oldState);
+  }, []);
+
+  const isValueNew = useMemo(
+    () => Boolean(value) && !isValueInList(value, filteredOptions),
+    [value, filteredOptions]
+  );
+
+  const getMinimumIndex = useCallback(() => {
+    return isValueNew && allowNewValues ? -1 : 0;
+  }, [allowNewValues, isValueNew]);
+
+  const ariaDescribedBy = useMemo(() => {
+    if (!isLoading && filteredOptions.length === 0) {
+      return `${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`;
+      }
+    } else {
+      return undefined;
+    }
+  }, [isLoading, value, shouldAutocomplete, filteredOptions, id]);
+
+  const currentOption = useMemo(() => {
+    if (filteredOptionsIndex == null) {
+      return null;
+    }
+    if (filteredOptionsIndex === -1) {
+      return value;
+    }
+    return filteredOptions[filteredOptionsIndex];
+  }, [filteredOptionsIndex, filteredOptions, value]);
+
+  const resetFilteredOptionsIndex = () => {
+    setFilteredOptionsIndex(getMinimumIndex());
+  };
+
+  const scrollToOption = useCallback((newIndex: number) => {
+    if (
+      filteredOptionsRef.current &&
+      filteredOptionsRef.current.children[newIndex]
+    ) {
+      const child = filteredOptionsRef.current.children[newIndex];
+      const { top, bottom } = child.getBoundingClientRect();
+      const parentRect = filteredOptionsRef.current.getBoundingClientRect();
+      if (top < parentRect.top || bottom > parentRect.bottom) {
+        child.scrollIntoView({ block: "nearest" });
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (filteredOptionsIndex !== null && isListOpen) {
+      scrollToOption(filteredOptionsIndex);
+    }
+  }, [filteredOptionsIndex, isListOpen, scrollToOption]);
+
+  const moveFocusToInput = useCallback(() => {
+    setFilteredOptionsIndex(null);
+    toggleIsListOpen(false);
+  }, [toggleIsListOpen]);
+
+  const moveFocusToEnd = useCallback(() => {
+    const lastIndex = filteredOptions.length - 1;
+    toggleIsListOpen(true);
+    setFilteredOptionsIndex(lastIndex);
+  }, [filteredOptions.length, toggleIsListOpen]);
+
+  const moveFocusUp = useCallback(() => {
+    if (filteredOptionsIndex === null) {
+      return;
+    }
+    if (filteredOptionsIndex === getMinimumIndex()) {
+      toggleIsListOpen(false);
+      setFilteredOptionsIndex(null);
+    } else {
+      const newIndex = Math.max(getMinimumIndex(), filteredOptionsIndex - 1);
+      setFilteredOptionsIndex(newIndex);
+    }
+  }, [filteredOptionsIndex, getMinimumIndex, toggleIsListOpen]);
+
+  const moveFocusDown = useCallback(() => {
+    if (filteredOptionsIndex === null || !isListOpen) {
+      toggleIsListOpen(true);
+      if (allowNewValues || filteredOptions.length >= 1) {
+        setFilteredOptionsIndex(getMinimumIndex());
+      }
+      return;
+    }
+    const newIndex = Math.min(
+      filteredOptionsIndex + 1,
+      Math.max(getMinimumIndex(), filteredOptions.length - 1)
+    );
+    setFilteredOptionsIndex(newIndex);
+  }, [
+    allowNewValues,
+    filteredOptions.length,
+    filteredOptionsIndex,
+    getMinimumIndex,
+    isListOpen,
+    toggleIsListOpen,
+  ]);
+
+  const activeDecendantId = useMemo(() => {
+    if (filteredOptionsIndex === null) {
+      return undefined;
+    } else if (filteredOptionsIndex === -1) {
+      return `${id}-combobox-new-option`;
+    } else {
+      return `${id}-option-${currentOption?.replace(" ", "-")}`;
+    }
+  }, [filteredOptionsIndex, currentOption, id]);
+
+  const filteredOptionsState = {
+    activeDecendantId,
+    allowNewValues,
+    filteredOptionsRef,
+    filteredOptionsIndex,
+    setFilteredOptionsIndex,
+    shouldAutocomplete,
+    isListOpen,
+    isLoading,
+    filteredOptions,
+    isValueNew,
+    toggleIsListOpen,
+    currentOption,
+    resetFilteredOptionsIndex,
+    moveFocusUp,
+    moveFocusDown,
+    moveFocusToInput,
+    moveFocusToEnd,
+    ariaDescribedBy,
+  };
+
+  return (
+    <FilteredOptionsContext.Provider value={filteredOptionsState}>
+      {children}
+    </FilteredOptionsContext.Provider>
+  );
+};
+
+export const useFilteredOptionsContext = () => {
+  const context = useContext(FilteredOptionsContext);
+  if (!context) {
+    throw new Error(
+      "useFilteredOptionsContext must be used within a FilteredOptionsProvider"
+    );
+  }
+  return context;
+};

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

@@ -0,0 +1,170 @@
+import { omit } from "../../..";
+import React, {
+  useCallback,
+  forwardRef,
+  InputHTMLAttributes,
+  ChangeEvent,
+} from "react";
+import cl from "clsx";
+import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
+import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
+import { useInputContext } from "./inputContext";
+
+interface InputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "value"> {
+  ref: React.Ref<HTMLInputElement>;
+  inputClassName?: string;
+  errorId?: string;
+  value?: string;
+  error?: React.ReactNode;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ inputClassName, error, errorId, ...rest }, ref) => {
+    const { clearInput, inputProps, onChange, size, value } = useInputContext();
+    const { selectedOptions, removeSelectedOption, toggleOption } =
+      useSelectedOptionsContext();
+    const {
+      activeDecendantId,
+      allowNewValues,
+      currentOption,
+      filteredOptions,
+      toggleIsListOpen,
+      isListOpen,
+      filteredOptionsIndex,
+      moveFocusUp,
+      moveFocusDown,
+      ariaDescribedBy,
+      moveFocusToInput,
+      moveFocusToEnd,
+      shouldAutocomplete,
+    } = useFilteredOptionsContext();
+
+    const onEnter = useCallback(
+      (event: React.KeyboardEvent) => {
+        if (currentOption) {
+          event.preventDefault();
+          // Selecting a value from the dropdown / FilteredOptions
+          toggleOption(currentOption, event);
+          clearInput(event);
+        } else if (shouldAutocomplete && selectedOptions.includes(value)) {
+          event.preventDefault();
+          // Trying to set the same value that is already set, so just clearing the input
+          clearInput(event);
+        } else if ((allowNewValues || shouldAutocomplete) && value !== "") {
+          event.preventDefault();
+          // Autocompleting or adding a new value
+          toggleOption(value, event);
+          clearInput(event);
+        }
+      },
+      [
+        allowNewValues,
+        clearInput,
+        currentOption,
+        selectedOptions,
+        shouldAutocomplete,
+        toggleOption,
+        value,
+      ]
+    );
+
+    const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      e.preventDefault();
+      switch (e.key) {
+        case "Escape":
+          clearInput(e);
+          toggleIsListOpen(false);
+          break;
+        case "Enter":
+        case "Accept":
+          onEnter(e);
+          break;
+        case "Home":
+          moveFocusToInput();
+          break;
+        case "End":
+          moveFocusToEnd();
+          break;
+        default:
+          break;
+      }
+    };
+
+    const handleKeyDown = useCallback(
+      (e) => {
+        if (e.key === "Backspace") {
+          if (value === "") {
+            const lastSelectedOption =
+              selectedOptions[selectedOptions.length - 1];
+            removeSelectedOption(lastSelectedOption);
+          }
+        } else if (e.key === "ArrowDown") {
+          // Check that cursor position is at the end of the input field,
+          // so we don't interfere with text editing
+          if (e.target.selectionStart === value?.length) {
+            e.preventDefault();
+            moveFocusDown();
+          }
+        } else if (e.key === "ArrowUp") {
+          // Check that the FilteredOptions list is open and has virtual focus.
+          // Otherwise ignore keystrokes, so it doesn't interfere with text editing
+          if (isListOpen && filteredOptionsIndex !== null) {
+            e.preventDefault();
+            moveFocusUp();
+          }
+        }
+      },
+      [
+        value,
+        selectedOptions,
+        removeSelectedOption,
+        moveFocusDown,
+        isListOpen,
+        filteredOptionsIndex,
+        moveFocusUp,
+      ]
+    );
+
+    const onChangeHandler = useCallback(
+      (event: ChangeEvent<HTMLInputElement>) => {
+        const newValue = event.target.value;
+        if (newValue && newValue !== "") {
+          toggleIsListOpen(true);
+        } else if (filteredOptions.length === 0) {
+          toggleIsListOpen(false);
+        }
+        onChange(event);
+      },
+      [filteredOptions.length, onChange, toggleIsListOpen]
+    );
+
+    return (
+      <input
+        {...rest}
+        {...omit(inputProps, ["aria-invalid"])}
+        ref={ref}
+        value={value}
+        onChange={onChangeHandler}
+        type="text"
+        role="combobox"
+        onKeyUp={handleKeyUp}
+        onKeyDown={handleKeyDown}
+        aria-controls={`${inputProps.id}-filtered-options`}
+        aria-expanded={!!isListOpen}
+        autoComplete="off"
+        aria-autocomplete={shouldAutocomplete ? "both" : "list"}
+        aria-activedescendant={activeDecendantId}
+        aria-describedby={ariaDescribedBy}
+        className={cl(
+          inputClassName,
+          "navds-combobox__input",
+          "navds-body-short",
+          `navds-body-${size}`
+        )}
+      />
+    );
+  }
+);
+
+export default Input;

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

@@ -0,0 +1,127 @@
+import React, {
+  ChangeEvent,
+  ChangeEventHandler,
+  createContext,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useFormField, FormFieldType } from "../../useFormField";
+
+interface InputContextType extends FormFieldType {
+  clearInput: (event: React.PointerEvent | React.KeyboardEvent) => void;
+  focusInput: () => void;
+  inputRef: React.RefObject<HTMLInputElement>;
+  value: string;
+  setValue: (text: string) => void;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  searchTerm: string;
+  setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+  shouldAutocomplete?: boolean;
+}
+
+const InputContext = createContext<InputContextType>({} as InputContextType);
+
+export const InputContextProvider = ({ children, value: props }) => {
+  const {
+    defaultValue = "",
+    description,
+    disabled,
+    error,
+    errorId,
+    id: externalId,
+    value: externalValue,
+    onChange: externalOnChange,
+    onClear,
+    shouldAutocomplete,
+    size,
+  } = props;
+  const formFieldProps = useFormField(
+    {
+      description,
+      disabled,
+      error,
+      errorId,
+      id: externalId,
+      size,
+    },
+    "comboboxfield"
+  );
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [internalValue, setInternalValue] = useState<string>(defaultValue);
+
+  const value = useMemo(
+    () => String(externalValue ?? internalValue),
+    [externalValue, internalValue]
+  );
+
+  const [searchTerm, setSearchTerm] = useState(value);
+
+  const onChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const value = event.currentTarget.value;
+      externalValue ?? setInternalValue(value);
+      externalOnChange?.(event);
+      setSearchTerm(value);
+    },
+    [externalValue, externalOnChange]
+  );
+
+  const setValue = useCallback(
+    (text) => {
+      setInternalValue(text);
+    },
+    [setInternalValue]
+  );
+
+  const clearInput = useCallback(
+    (event: React.PointerEvent | React.KeyboardEvent) => {
+      onClear?.(event);
+      setValue("");
+      setSearchTerm("");
+    },
+    [onClear, setSearchTerm, setValue]
+  );
+
+  const focusInput = useCallback(() => {
+    inputRef.current?.focus?.();
+  }, []);
+
+  useLayoutEffect(() => {
+    if (shouldAutocomplete && inputRef && value !== searchTerm) {
+      inputRef.current?.setSelectionRange?.(searchTerm.length, value.length);
+    }
+  }, [value, searchTerm, shouldAutocomplete]);
+
+  return (
+    <InputContext.Provider
+      value={{
+        ...formFieldProps,
+        clearInput,
+        focusInput,
+        inputRef,
+        value,
+        setValue,
+        onChange,
+        searchTerm,
+        setSearchTerm,
+        shouldAutocomplete,
+      }}
+    >
+      {children}
+    </InputContext.Provider>
+  );
+};
+
+export const useInputContext = () => {
+  const context = useContext(InputContext);
+  if (!context) {
+    throw new Error(
+      "useInputContext must be used within an InputContextProvider"
+    );
+  }
+  return context;
+};

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

@@ -0,0 +1,45 @@
+import React from "react";
+import { Chips } from "../../..";
+import { useSelectedOptionsContext } from "./selectedOptionsContext";
+
+interface SelectedOptionsProps {
+  selectedOptions?: string[];
+  size?: "medium" | "small";
+  children: React.ReactNode;
+}
+
+const Option = ({ option }: { option: string }) => {
+  const { isMultiSelect, removeSelectedOption } = useSelectedOptionsContext();
+
+  const onClick = (e) => {
+    e.stopPropagation();
+    removeSelectedOption(option);
+  };
+
+  if (!isMultiSelect) {
+    return (
+      <div className="navds-combobox__selected-options--no-bg">{option}</div>
+    );
+  }
+
+  return <Chips.Removable onClick={onClick}>{option}</Chips.Removable>;
+};
+
+const SelectedOptions: React.FC<SelectedOptionsProps> = ({
+  selectedOptions = [],
+  size,
+  children,
+}) => {
+  return (
+    <Chips className="navds-combobox__selected-options" size={size}>
+      {selectedOptions.length
+        ? selectedOptions.map((option, i) => (
+            <Option key={option + i} option={option} />
+          ))
+        : []}
+      {children}
+    </Chips>
+  );
+};
+
+export default SelectedOptions;