@navikt/ds-react 5.15.0 → 5.16.0

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

@@ -1,11 +1,10 @@
-import { Dispatch, SetStateAction, useState } from "react";
+import { useState } from "react";
 
 export type VirtualFocusType = {
   activeElement: HTMLElement | undefined;
   getElementById: (id: string) => HTMLElement | undefined;
-  isFocusOnTheTop: boolean;
-  isFocusOnTheBottom: boolean;
-  setIndex: Dispatch<SetStateAction<number>>;
+  isFocusOnTheTop: () => boolean;
+  isFocusOnTheBottom: () => boolean;
   moveFocusUp: () => void;
   moveFocusDown: () => void;
   moveFocusToElement: (id: string) => void;
@@ -16,57 +15,77 @@ export type VirtualFocusType = {
 const useVirtualFocus = (
   containerRef: HTMLElement | null,
 ): VirtualFocusType => {
-  const [index, setIndex] = useState(-1);
-
-  const listOfAllChildren: HTMLElement[] = containerRef?.children
-    ? Array.prototype.slice.call(containerRef?.children)
-    : [];
-  const elementsAbleToReceiveFocus = listOfAllChildren.filter(
-    (child) => child.getAttribute("data-no-focus") !== "true",
+  const [activeElement, setActiveElement] = useState<HTMLElement | undefined>(
+    undefined,
   );
 
-  const activeElement = elementsAbleToReceiveFocus[index];
+  const getListOfAllChildren = (): HTMLElement[] =>
+    Array.from(containerRef?.children ?? []) as HTMLElement[];
+  const getElementsAbleToReceiveFocus = () =>
+    getListOfAllChildren().filter(
+      (child) => child.getAttribute("data-no-focus") !== "true",
+    );
+
   const getElementById = (id: string) =>
-    listOfAllChildren.find((element) => element.id === id);
-  const isFocusOnTheTop = index === 0;
-  const isFocusOnTheBottom = index === elementsAbleToReceiveFocus.length - 1;
+    getListOfAllChildren().find((element) => element.id === id);
+  const isFocusOnTheTop = () =>
+    activeElement
+      ? getElementsAbleToReceiveFocus().indexOf(activeElement) === 0
+      : false;
+  const isFocusOnTheBottom = () => {
+    const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
+    return activeElement
+      ? elementsAbleToReceiveFocus.indexOf(activeElement) ===
+          elementsAbleToReceiveFocus.length - 1
+      : false;
+  };
 
-  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 = (_element?: HTMLElement) => {
+    setActiveElement(_element);
+    _element?.scrollIntoView?.({ block: "nearest" });
+  };
+
+  const moveFocusUp = () => {
+    if (!activeElement) {
+      return;
+    }
+    const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
+    const _currentIndex = elementsAbleToReceiveFocus.indexOf(activeElement);
+    const elementAbove = elementsAbleToReceiveFocus[_currentIndex - 1];
+    if (_currentIndex === 0) {
+      setActiveElement(undefined);
+    } else {
+      _moveFocusAndScrollTo(elementAbove);
     }
   };
 
-  const _moveFocusAndScrollTo = (_index: number) => {
-    setIndex(_index);
-    scrollToOption(_index);
+  const moveFocusDown = () => {
+    const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
+    if (!activeElement) {
+      _moveFocusAndScrollTo(elementsAbleToReceiveFocus[0]);
+      return;
+    }
+    const _currentIndex = elementsAbleToReceiveFocus.indexOf(activeElement);
+    if (_currentIndex === elementsAbleToReceiveFocus.length - 1) {
+      return;
+    } else {
+      _moveFocusAndScrollTo(elementsAbleToReceiveFocus[_currentIndex + 1]);
+    }
   };
-  const moveFocusUp = () => _moveFocusAndScrollTo(Math.max(index - 1, -1));
-  const moveFocusDown = () =>
-    _moveFocusAndScrollTo(
-      Math.min(index + 1, elementsAbleToReceiveFocus.length - 1),
+
+  const moveFocusToTop = () => _moveFocusAndScrollTo(undefined);
+  const moveFocusToBottom = () => {
+    const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
+    return _moveFocusAndScrollTo(
+      elementsAbleToReceiveFocus[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 _element = getElementsAbleToReceiveFocus().find(
+      (_focusableElement) => _focusableElement.getAttribute("id") === id,
     );
-    const indexOfElement = thisElement
-      ? elementsAbleToReceiveFocus.indexOf(thisElement)
-      : -1;
-    if (indexOfElement >= 0) {
-      setIndex(indexOfElement);
+    if (_element) {
+      setActiveElement(_element);
     }
   };
 
@@ -75,7 +94,6 @@ const useVirtualFocus = (
     getElementById,
     isFocusOnTheTop,
     isFocusOnTheBottom,
-    setIndex,
     moveFocusUp,
     moveFocusDown,
     moveFocusToElement,

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

@@ -101,9 +101,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           onEnter(e);
           break;
         case "Home":
+          toggleIsListOpen(false);
           virtualFocus.moveFocusToTop();
           break;
         case "End":
+          toggleIsListOpen(true);
           virtualFocus.moveFocusToBottom();
           break;
         default:
@@ -135,7 +137,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           // Otherwise ignore keystrokes, so it doesn't interfere with text editing
           if (isListOpen && activeDecendantId) {
             e.preventDefault();
-            if (virtualFocus.isFocusOnTheTop) {
+            if (virtualFocus.isFocusOnTheTop()) {
               toggleIsListOpen(false);
             }
             virtualFocus.moveFocusUp();

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

@@ -8,7 +8,7 @@ import React, {
 import { usePrevious } from "../../../util/hooks";
 import { useInputContext } from "../Input/inputContext";
 import { useCustomOptionsContext } from "../customOptionsContext";
-import { ComboboxProps } from "../types";
+import { ComboboxProps, MaxSelected } from "../types";
 
 type SelectedOptionsContextType = {
   addSelectedOption: (option: string) => void;
@@ -16,6 +16,7 @@ type SelectedOptionsContextType = {
   removeSelectedOption: (option: string) => void;
   prevSelectedOptions?: string[];
   selectedOptions: string[];
+  maxSelected?: MaxSelected & { isLimitReached: boolean };
   setSelectedOptions: (any) => void;
   toggleOption: (
     option: string,
@@ -39,6 +40,7 @@ export const SelectedOptionsProvider = ({
     | "options"
     | "selectedOptions"
     | "onToggleSelected"
+    | "maxSelected"
   >;
 }) => {
   const { clearInput, focusInput } = useInputContext();
@@ -54,6 +56,7 @@ export const SelectedOptionsProvider = ({
     selectedOptions: externalSelectedOptions,
     onToggleSelected,
     options,
+    maxSelected,
   } = value;
   const [internalSelectedOptions, setSelectedOptions] = useState<string[]>([]);
   const selectedOptions = useMemo(
@@ -129,6 +132,9 @@ export const SelectedOptionsProvider = ({
 
   const prevSelectedOptions = usePrevious<string[]>(selectedOptions);
 
+  const isLimitReached =
+    !!maxSelected?.limit && selectedOptions.length >= maxSelected.limit;
+
   const selectedOptionsState = {
     addSelectedOption,
     isMultiSelect,
@@ -137,6 +143,10 @@ export const SelectedOptionsProvider = ({
     selectedOptions,
     setSelectedOptions,
     toggleOption,
+    maxSelected: maxSelected && {
+      ...maxSelected,
+      isLimitReached,
+    },
   };
 
   return (

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

@@ -1,6 +1,6 @@
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { expect, fn, userEvent, within } from "@storybook/test";
-import React, { useId, useMemo, useState } from "react";
+import React, { useId, useMemo, useRef, useState } from "react";
 import { Chips, ComboboxProps, TextField, UNSAFE_Combobox } from "../../index";
 
 export default {
@@ -37,11 +37,16 @@ Default.args = {
   label: "Hva er dine favorittfrukter?",
   shouldAutocomplete: true,
   isLoading: false,
+  isMultiSelect: false,
+  allowNewValues: false,
 };
 Default.argTypes = {
   isListOpen: {
     control: { type: "boolean" },
   },
+  maxSelected: {
+    control: { type: "number" },
+  },
   size: {
     options: ["medium", "small"],
     defaultValue: "medium",
@@ -284,6 +289,36 @@ export const ComboboxSizes = () => (
   </>
 );
 
+export const MaxSelectedOptions: StoryFunction = () => {
+  const id = useId();
+  const [value, setValue] = useState<string | undefined>("");
+  const [selectedOptions, setSelectedOptions] = useState([
+    options[0],
+    options[1],
+  ]);
+  const comboboxRef = useRef<HTMLInputElement>(null);
+  return (
+    <UNSAFE_Combobox
+      id={id}
+      label="Komboboks med begrenset antall valg"
+      options={options}
+      maxSelected={{ limit: 2 }}
+      selectedOptions={selectedOptions}
+      onToggleSelected={(option, isSelected) =>
+        isSelected
+          ? setSelectedOptions([...selectedOptions, option])
+          : setSelectedOptions(selectedOptions.filter((o) => o !== option))
+      }
+      isMultiSelect
+      allowNewValues
+      isListOpen={comboboxRef.current ? undefined : true}
+      value={value}
+      onChange={(event) => setValue(event?.target.value)}
+      ref={comboboxRef}
+    />
+  );
+};
+
 export const WithError: StoryFunction = (props) => {
   const [hasSelectedValue, setHasSelectedValue] = useState(false);
   const [isLoading, setIsLoading] = useState(false);

package/src/form/combobox/combobox.test.tsx

@@ -74,9 +74,7 @@ describe("Render combobox", () => {
   it("Should show loading icon when loading (used for async search)", async () => {
     render(<App options={[]} isListOpen isLoading />);
 
-    expect(
-      await screen.findByRole("option", { name: "venter..." }),
-    ).toBeInTheDocument();
+    expect(await screen.findByText("Søker...")).toBeInTheDocument();
   });
 });
 

package/src/form/combobox/types.ts

@@ -1,6 +1,17 @@
 import React, { ChangeEvent, InputHTMLAttributes } from "react";
 import { FormFieldProps } from "../useFormField";
 
+export type MaxSelected = {
+  /**
+   * The limit for maximum selected options
+   */
+  limit: number;
+  /**
+   * Override the message to display when the limit for maximum selected options has been reached
+   */
+  message?: string;
+};
+
 export interface ComboboxProps
   extends FormFieldProps,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value"> {
@@ -97,6 +108,10 @@ export interface ComboboxProps
    * e.g. for a filter, where options can be toggled elsewhere/programmatically.
    */
   selectedOptions?: string[];
+  /**
+   * Options for the maximum number of selected options.
+   */
+  maxSelected?: MaxSelected;
   /**
    * Set to "true" to enable inline autocomplete.
    *

package/src/help-text/HelpText.tsx

@@ -57,7 +57,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
         <button
           {...rest}
           ref={mergedRef}
-          onClick={composeEventHandlers(onClick, () => setOpen((x) => x))}
+          onClick={composeEventHandlers(onClick, () => setOpen((x) => !x))}
           className={cl(className, "navds-help-text__button")}
           type="button"
           aria-expanded={open}

package/src/util/create-context.tsx

@@ -0,0 +1,67 @@
+/**
+ * Custom createContext to consolidate context-implementation across the system
+ * Inspired by:
+ * - https://github.com/radix-ui/primitives/blob/main/packages/react/context/src/createContext.tsx
+ * - https://github.com/chakra-ui/chakra-ui/blob/5ec0be610b5a69afba01a9c22365155c1b519136/packages/hooks/context/src/index.ts
+ */
+import React, {
+  createContext as createReactContext,
+  useContext as useReactContext,
+} from "react";
+
+export interface CreateContextOptions<T> {
+  hookName?: string;
+  providerName?: string;
+  errorMessage?: string;
+  name?: string;
+  defaultValue?: T;
+}
+
+type ProviderProps<T> = T & { children: React.ReactNode };
+
+export type CreateContextReturn<T> = [
+  (contextValues: ProviderProps<T>) => React.JSX.Element,
+  () => T,
+];
+
+function getErrorMessage(hook: string, provider: string) {
+  return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
+}
+
+export function createContext<T>(options: CreateContextOptions<T> = {}) {
+  const {
+    name,
+    hookName = "useContext",
+    providerName = "Provider",
+    errorMessage,
+    defaultValue,
+  } = options;
+
+  const Context = createReactContext<T | undefined>(defaultValue);
+
+  function Provider({ children, ...context }: ProviderProps<T>) {
+    // Only re-memoize when prop values change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const value = React.useMemo(() => context, Object.values(context)) as T;
+    return <Context.Provider value={value}>{children}</Context.Provider>;
+  }
+
+  function useContext() {
+    const context = useReactContext(Context);
+
+    if (!context) {
+      const error = new Error(
+        errorMessage ?? getErrorMessage(hookName, providerName),
+      );
+      error.name = "ContextError";
+      Error.captureStackTrace?.(error, useContext);
+      throw error;
+    }
+
+    return context;
+  }
+
+  Context.displayName = name;
+
+  return [Provider, useContext] as CreateContextReturn<T>;
+}

package/src/util/hooks/descendants/descendant.stories.tsx

@@ -0,0 +1,147 @@
+import * as React from "react";
+import { Box } from "../../../layout/box";
+import { HStack } from "../../../layout/stack";
+import { createDescendantContext } from "./useDescendant";
+
+export default {
+  title: "Utilities/Descendants",
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+const [
+  DescendantsProvider,
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  _useDescendantsContext,
+  useDescendants,
+  useDescendant,
+] = createDescendantContext<HTMLDivElement, { value?: string }>();
+
+function Select({ children }: { children?: React.ReactNode }) {
+  const descendants = useDescendants();
+  const count = descendants.count();
+
+  React.useEffect(() => {
+    descendants.last()?.node.focus();
+  }, [descendants, count]);
+
+  return (
+    <DescendantsProvider value={descendants}>{children}</DescendantsProvider>
+  );
+}
+
+function Option({ value, disabled }: { value?: string; disabled?: boolean }) {
+  const { register, index, descendants } = useDescendant({
+    disabled,
+  });
+
+  return (
+    <Box
+      ref={register}
+      role="button"
+      tabIndex={0}
+      data-value={value}
+      onKeyDown={(event) => {
+        if (event.key === "ArrowDown") {
+          descendants.next(index)?.node.focus();
+        } else if (event.key === "ArrowUp") {
+          descendants.prev(index)?.node.focus();
+        }
+      }}
+    >
+      Option {index + 1}
+    </Box>
+  );
+}
+
+export const DynamicUpdates = () => {
+  const [done, setDone] = React.useState(false);
+
+  React.useEffect(() => {
+    const interval = setInterval(() => setDone((x) => !x), 3000);
+
+    return () => window.clearInterval(interval);
+  }, []);
+
+  return (
+    <Select>
+      <Option value="option 1" />
+      <div>
+        <div>
+          <Option value="option 2" />
+          {done && (
+            <div>
+              <Option value="option 3" />
+              <Option value="option 4" />
+            </div>
+          )}
+        </div>
+        <Option value="option 5" disabled />
+      </div>
+      {done && (
+        <div>
+          <Option value="option 6" />
+          <Option value="option 7" />
+        </div>
+      )}
+    </Select>
+  );
+};
+
+function NumberInputWrapper({ children }: { children?: React.ReactNode }) {
+  const descendants = useDescendants();
+
+  React.useEffect(() => {
+    descendants.first()?.node.focus();
+  }, [descendants]);
+
+  return (
+    <DescendantsProvider value={descendants}>
+      <HStack gap="1">{children}</HStack>
+    </DescendantsProvider>
+  );
+}
+
+function Input() {
+  const [focused, setFocused] = React.useState(false);
+  const { register, index, descendants } = useDescendant();
+
+  return (
+    <input
+      style={{
+        width: "3rem",
+        height: "3rem",
+        borderRadius: "4px",
+        textAlign: "center",
+        border: "1px solid var(--a-border-default)",
+      }}
+      placeholder={focused ? "" : "0"}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
+      ref={register}
+      type="tel"
+      autoCapitalize="none"
+      autoComplete="false"
+      inputMode="numeric"
+      onKeyDown={(event) => {
+        if (event.key === "ArrowRight") {
+          descendants.next(index, false)?.node.focus();
+        }
+        if (event.key === "ArrowLeft") {
+          descendants.prev(index, false)?.node.focus();
+        }
+      }}
+    />
+  );
+}
+
+export const NumberInput = () => {
+  return (
+    <NumberInputWrapper>
+      <Input />
+      <Input />
+      <Input />
+    </NumberInputWrapper>
+  );
+};