@navikt/ds-react 5.8.0 → 5.9.1

package/src/form/combobox/FilteredOptions/filtered-options-util.ts

@@ -0,0 +1,38 @@
+const normalizeText = (text: string): string =>
+  typeof text === "string" ? text.toLocaleLowerCase().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));
+
+const getFilteredOptionsId = (comboboxId: string) =>
+  `${comboboxId}-filtered-options`;
+
+const getOptionId = (comboboxId: string, option: string) =>
+  `${comboboxId.toLocaleLowerCase()}-option-${option
+    .replace(" ", "-")
+    .toLocaleLowerCase()}`;
+
+const getAddNewOptionId = (comboboxId: string) =>
+  `${comboboxId}-combobox-new-option`;
+
+const getIsLoadingId = (comboboxId: string) => `${comboboxId}-is-loading`;
+
+const getNoHitsId = (comboboxId: string) => `${comboboxId}-no-hits`;
+
+export default {
+  normalizeText,
+  isPartOfText,
+  isValueInList,
+  getMatchingValuesFromList,
+  getFilteredOptionsId,
+  getAddNewOptionId,
+  getOptionId,
+  getIsLoadingId,
+  getNoHitsId,
+};

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

@@ -1,11 +1,9 @@
 import React, {
   useState,
-  useEffect,
   useMemo,
   createContext,
   useContext,
   useCallback,
-  useRef,
   SetStateAction,
 } from "react";
 import cl from "clsx";
@@ -13,26 +11,29 @@ import { useCustomOptionsContext } from "../customOptionsContext";
 import { useInputContext } from "../Input/inputContext";
 import usePrevious from "../../../util/usePrevious";
 import { useClientLayoutEffect } from "../../../util";
-
-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));
+import filteredOptionsUtils from "./filtered-options-util";
+import useVirtualFocus, { VirtualFocusType } from "./useVirtualFocus";
+import { ComboboxProps } from "../types";
+
+type FilteredOptionsProps = {
+  children: any;
+  value: Pick<
+    ComboboxProps,
+    | "allowNewValues"
+    | "filteredOptions"
+    | "isListOpen"
+    | "isLoading"
+    | "options"
+  >;
+};
 
 type FilteredOptionsContextType = {
   activeDecendantId?: string;
   allowNewValues?: boolean;
   ariaDescribedBy?: string;
-  filteredOptionsRef: React.RefObject<HTMLUListElement>;
-  filteredOptionsIndex: number | null;
-  setFilteredOptionsIndex: (index: number) => void;
+  setFilteredOptionsRef: React.Dispatch<
+    React.SetStateAction<HTMLUListElement | null>
+  >;
   isListOpen: boolean;
   isLoading?: boolean;
   filteredOptions: string[];
@@ -40,19 +41,18 @@ type FilteredOptionsContextType = {
   setIsMouseLastUsedInputDevice: React.Dispatch<SetStateAction<boolean>>;
   isValueNew: boolean;
   toggleIsListOpen: (newState?: boolean) => void;
-  currentOption: string | null;
-  resetFilteredOptionsIndex: () => void;
-  moveFocusUp: () => void;
-  moveFocusDown: () => void;
-  moveFocusToInput: () => void;
-  moveFocusToEnd: () => void;
+  currentOption?: string;
   shouldAutocomplete?: boolean;
+  virtualFocus: VirtualFocusType;
 };
 const FilteredOptionsContext = createContext<FilteredOptionsContextType>(
   {} as FilteredOptionsContextType
 );
 
-export const FilteredOptionsProvider = ({ children, value: props }) => {
+export const FilteredOptionsProvider = ({
+  children,
+  value: props,
+}: FilteredOptionsProps) => {
   const {
     allowNewValues,
     filteredOptions: externalFilteredOptions,
@@ -60,7 +60,9 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
     isLoading,
     options,
   } = props;
-  const filteredOptionsRef = useRef<HTMLUListElement | null>(null);
+  const [filteredOptionsRef, setFilteredOptionsRef] =
+    useState<HTMLUListElement | null>(null);
+  const virtualFocus = useVirtualFocus(filteredOptionsRef);
   const {
     inputProps: { "aria-describedby": partialAriaDescribedBy, id },
     value,
@@ -70,9 +72,6 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
     shouldAutocomplete,
   } = useInputContext();
 
-  const [filteredOptionsIndex, setFilteredOptionsIndex] = useState<
-    number | null
-  >(null);
   const [isInternalListOpen, setInternalListOpen] = useState(false);
   const { customOptions } = useCustomOptionsContext();
 
@@ -81,8 +80,7 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
       return externalFilteredOptions;
     }
     const opts = [...customOptions, ...options];
-    setFilteredOptionsIndex(null);
-    return getMatchingValuesFromList(searchTerm, opts);
+    return filteredOptionsUtils.getMatchingValuesFromList(searchTerm, opts);
   }, [customOptions, externalFilteredOptions, options, searchTerm]);
 
   const previousSearchTerm = usePrevious(searchTerm);
@@ -90,10 +88,26 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
   const [isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice] =
     useState(false);
 
+  const filteredOptionsMap = useMemo(
+    () =>
+      options.reduce(
+        (map, _option) => ({
+          ...map,
+          [filteredOptionsUtils.getOptionId(id, _option)]: _option,
+        }),
+        {
+          [filteredOptionsUtils.getAddNewOptionId(id)]: allowNewValues
+            ? value
+            : undefined,
+        }
+      ),
+    [allowNewValues, id, options, value]
+  );
+
   useClientLayoutEffect(() => {
     if (
       shouldAutocomplete &&
-      normalizeText(searchTerm) !== "" &&
+      filteredOptionsUtils.normalizeText(searchTerm) !== "" &&
       (previousSearchTerm?.length || 0) < searchTerm.length &&
       filteredOptions.length > 0
     ) {
@@ -115,29 +129,30 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
     return isExternalListOpen ?? isInternalListOpen;
   }, [isExternalListOpen, isInternalListOpen]);
 
-  const toggleIsListOpen = useCallback((newState?: boolean) => {
-    setFilteredOptionsIndex(null);
-    setInternalListOpen((oldState) => newState ?? !oldState);
-  }, []);
+  const toggleIsListOpen = useCallback(
+    (newState?: boolean) => {
+      virtualFocus.moveFocusToTop();
+      setInternalListOpen((oldState) => newState ?? !oldState);
+    },
+    [virtualFocus]
+  );
 
   const isValueNew = useMemo(
-    () => Boolean(value) && !isValueInList(value, filteredOptions),
-    [value, filteredOptions]
+    () =>
+      Boolean(value) &&
+      !filteredOptionsMap[filteredOptionsUtils.getOptionId(id, value)],
+    [filteredOptionsMap, id, value]
   );
 
-  const getMinimumIndex = useCallback(() => {
-    return isValueNew && allowNewValues ? -1 : 0;
-  }, [allowNewValues, isValueNew]);
-
   const ariaDescribedBy = useMemo(() => {
     let activeOption;
     if (!isLoading && filteredOptions.length === 0) {
-      activeOption = `${id}-no-hits`;
+      activeOption = filteredOptionsUtils.getNoHitsId(id);
     } else if ((value && value !== "") || isLoading) {
       if (shouldAutocomplete && filteredOptions[0]) {
-        activeOption = `${id}-option-${filteredOptions[0].replace(" ", "-")}`;
+        activeOption = filteredOptionsUtils.getOptionId(id, filteredOptions[0]);
       } else if (isListOpen && isLoading) {
-        activeOption = `${id}-is-loading`;
+        activeOption = filteredOptionsUtils.getIsLoadingId(id);
       }
     }
     return cl(activeOption, partialAriaDescribedBy) || undefined;
@@ -151,102 +166,21 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
     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 currentOption = useMemo(
+    () =>
+      filteredOptionsMap[virtualFocus.activeElement?.getAttribute("id") || -1],
+    [filteredOptionsMap, virtualFocus]
+  );
 
-  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 activeDecendantId = useMemo(
+    () => virtualFocus.activeElement?.getAttribute("id") || undefined,
+    [virtualFocus.activeElement]
+  );
 
   const filteredOptionsState = {
     activeDecendantId,
     allowNewValues,
-    filteredOptionsRef,
-    filteredOptionsIndex,
-    setFilteredOptionsIndex,
+    setFilteredOptionsRef,
     shouldAutocomplete,
     isListOpen,
     isLoading,
@@ -256,11 +190,7 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
     isValueNew,
     toggleIsListOpen,
     currentOption,
-    resetFilteredOptionsIndex,
-    moveFocusUp,
-    moveFocusDown,
-    moveFocusToInput,
-    moveFocusToEnd,
+    virtualFocus,
     ariaDescribedBy,
   };
 

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

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

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

@@ -9,6 +9,7 @@ import cl from "clsx";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import { useInputContext } from "./inputContext";
+import filteredOptionsUtil from "../FilteredOptions/filtered-options-util";
 
 interface InputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "value"> {
@@ -34,15 +35,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       isValueNew,
       toggleIsListOpen,
       isListOpen,
-      filteredOptionsIndex,
-      moveFocusUp,
-      moveFocusDown,
       ariaDescribedBy,
-      moveFocusToInput,
-      moveFocusToEnd,
-      setFilteredOptionsIndex,
       setIsMouseLastUsedInputDevice,
       shouldAutocomplete,
+      virtualFocus,
     } = useFilteredOptionsContext();
 
     const onEnter = useCallback(
@@ -57,8 +53,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           event.preventDefault();
           // Selecting a value from the dropdown / FilteredOptions
           toggleOption(currentOption, event);
-          if (!isMultiSelect && !isTextInSelectedOptions(currentOption))
+          if (!isMultiSelect && !isTextInSelectedOptions(currentOption)) {
             toggleIsListOpen(false);
+          }
         } else if (shouldAutocomplete && isTextInSelectedOptions(value)) {
           event.preventDefault();
           // Trying to set the same value that is already set, so just clearing the input
@@ -104,10 +101,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           onEnter(e);
           break;
         case "Home":
-          moveFocusToInput();
+          virtualFocus.moveFocusToTop();
           break;
         case "End":
-          moveFocusToEnd();
+          virtualFocus.moveFocusToBottom();
           break;
         default:
           break;
@@ -128,14 +125,20 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           // so we don't interfere with text editing
           if (e.target.selectionStart === value?.length) {
             e.preventDefault();
-            moveFocusDown();
+            if (virtualFocus.activeElement === null || !isListOpen) {
+              toggleIsListOpen(true);
+            }
+            virtualFocus.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) {
+          if (isListOpen && activeDecendantId) {
             e.preventDefault();
-            moveFocusUp();
+            if (virtualFocus.isFocusOnTheTop) {
+              toggleIsListOpen(false);
+            }
+            virtualFocus.moveFocusUp();
           }
         }
       },
@@ -143,11 +146,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         value,
         selectedOptions,
         removeSelectedOption,
-        moveFocusDown,
         isListOpen,
-        filteredOptionsIndex,
-        moveFocusUp,
+        activeDecendantId,
         setIsMouseLastUsedInputDevice,
+        toggleIsListOpen,
+        virtualFocus,
       ]
     );
 
@@ -159,13 +162,14 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         } else if (filteredOptions.length === 0) {
           toggleIsListOpen(false);
         }
+        virtualFocus.moveFocusToTop();
         onChange(event);
       },
-      [filteredOptions.length, onChange, toggleIsListOpen]
+      [filteredOptions.length, virtualFocus, onChange, toggleIsListOpen]
     );
 
     const onBlur = () => {
-      setFilteredOptionsIndex(-1);
+      virtualFocus.moveFocusToTop();
     };
 
     return (
@@ -180,7 +184,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         onBlur={onBlur}
         onKeyUp={handleKeyUp}
         onKeyDown={handleKeyDown}
-        aria-controls={`${inputProps.id}-filtered-options`}
+        aria-controls={filteredOptionsUtil.getFilteredOptionsId(inputProps.id)}
         aria-expanded={!!isListOpen}
         autoComplete="off"
         aria-autocomplete={shouldAutocomplete ? "both" : "list"}

package/src/form/combobox/customOptionsContext.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useCallback, createContext, useContext } from "react";
 import { useInputContext } from "./Input/inputContext";
-import { useSelectedOptionsContext } from "./SelectedOptions/selectedOptionsContext";
 
 type CustomOptionsContextType = {
   customOptions: string[];
@@ -13,13 +12,19 @@ const CustomOptionsContext = createContext<CustomOptionsContextType>(
   {} as CustomOptionsContextType
 );
 
-export const CustomOptionsProvider = ({ children }) => {
+export const CustomOptionsProvider = ({
+  children,
+  value,
+}: {
+  children: any;
+  value: { isMultiSelect?: boolean };
+}) => {
   const [customOptions, setCustomOptions] = useState<string[]>([]);
   const { focusInput } = useInputContext();
-  const { isMultiSelect } = useSelectedOptionsContext();
+  const { isMultiSelect } = value;
 
   const removeCustomOption = useCallback(
-    (option) => {
+    (option: string) => {
       setCustomOptions((prevCustomOptions) =>
         prevCustomOptions.filter((o) => o !== option)
       );
@@ -29,7 +34,7 @@ export const CustomOptionsProvider = ({ children }) => {
   );
 
   const addCustomOption = useCallback(
-    (option) => {
+    (option: string) => {
       if (isMultiSelect) {
         setCustomOptions((prevOptions) => [...prevOptions, option]);
       } else {

package/src/guide-panel/guidepanel.stories.tsx

@@ -1,7 +1,7 @@
+import { InformationIcon } from "@navikt/aksel-icons";
+import { Meta } from "@storybook/react";
 import React from "react";
 import { BodyLong, GuidePanel, VStack } from "../index";
-import { Meta } from "@storybook/react";
-import { InformationIcon } from "@navikt/aksel-icons";
 
 export default {
   title: "ds-react/GuidePanel",

package/src/modal/Modal.tsx

@@ -8,6 +8,7 @@ import React, {
   useRef,
 } from "react";
 import { createPortal } from "react-dom";
+import { DateContext } from "../date/context";
 import { useProvider } from "../provider";
 import { Detail, Heading } from "../typography";
 import { mergeRefs, useId } from "../util";
@@ -99,7 +100,9 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     const rootElement = useProvider()?.rootElement;
     const portalNode = useFloatingPortalNode({ root: rootElement });
 
-    if (useContext(ModalContext)) {
+    const dateContext = useContext(DateContext);
+    const modalContext = useContext(ModalContext);
+    if (modalContext && !dateContext) {
       console.error("Modals should not be nested");
     }