@navikt/ds-react 8.6.0 → 8.8.0

package/src/utils/components/Listbox/group/ListboxGroup.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { useId } from "../../../../utils-external";
+
+interface ListboxGroupProps {
+  label: React.ReactNode;
+  children: React.ReactNode;
+}
+
+function ListboxGroup({ label, children }: ListboxGroupProps) {
+  const labelId = useId();
+
+  return (
+    <div
+      role="group"
+      className="aksel-listbox__group"
+      aria-labelledby={labelId}
+    >
+      <div id={labelId} aria-hidden>
+        {label}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export { ListboxGroup };

package/src/utils/components/Listbox/input-slot/ListboxInputSlot.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Slot } from "../../slot/Slot";
+
+interface ListboxInputSlotProps {
+  children: React.ReactElement;
+}
+
+const ListboxInputSlot = ({ children }: ListboxInputSlotProps) => {
+  return (
+    <Slot
+      aria-activedescendant="aksel-listbox__option-active"
+      // @ts-expect-error - You are meant to use an <input>, but Slot doesn't know that.
+      autoComplete="off"
+      role="combobox"
+    >
+      {children}
+    </Slot>
+  );
+};
+
+export { ListboxInputSlot };
+export type { ListboxInputSlotProps };

package/src/utils/components/Listbox/option/ListboxOption.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { cl } from "../../../helpers";
+
+export interface ListboxOptionProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "role" | "tabIndex"
+> {
+  /**
+   * Unique ID used for tracking which option has virtual focus.
+   */
+  id: string;
+  hasVirtualFocus: boolean;
+  children: React.ReactNode;
+  /**
+   * Callback when option is selected.
+   * To improve performance when you have many options,
+   * memoize the prop with e.g. useEventCallback.
+   */
+  onClick: React.MouseEventHandler<HTMLDivElement>;
+}
+
+function ListboxOptionComponent({
+  id,
+  hasVirtualFocus,
+  children,
+  className,
+  ...rest
+}: ListboxOptionProps) {
+  //console.log("Rendering option", id);
+
+  // TODO: Slot?
+
+  return (
+    <div
+      aria-selected={false}
+      {...rest}
+      className={cl("aksel-listbox__option", className)}
+      role="option"
+      tabIndex={-1}
+      data-virtual-focus={hasVirtualFocus}
+      data-id={id}
+      id={hasVirtualFocus ? "aksel-listbox__option-active" : undefined}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * This component is memoized. To improve performance when you have many options,
+ * make sure all object props have stable references (i.e. memoize the event handlers with e.g. useEventCallback).
+ *
+ * NB: Remember to set `aria-selected` on selected options!
+ */
+export const ListboxOption = React.memo(
+  ListboxOptionComponent,
+) as typeof ListboxOptionComponent;

package/src/utils/components/Listbox/options/ListboxOptions.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable jsx-a11y/mouse-events-have-key-events */
+/** biome-ignore-all lint/a11y/useKeyWithMouseEvents: We know what we are doing */
+import React from "react";
+import { cl } from "../../../helpers";
+
+export interface ListboxOptionsProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "role" | "tabIndex" | "onMouseOver"
+> {
+  children: React.ReactNode;
+  setVirtuallyFocusedOptionId: (value: string) => void;
+}
+
+function ListboxOptions({
+  children,
+  setVirtuallyFocusedOptionId,
+  ...rest
+}: ListboxOptionsProps) {
+  return (
+    <div
+      {...rest}
+      className={cl(rest.className, "aksel-listbox__options")}
+      role="listbox"
+      tabIndex={-1}
+      onMouseOver={(event) => {
+        const target = event.target as HTMLElement;
+        const optionEl: HTMLElement | null = target.closest('[role="option"]');
+        if (optionEl) {
+          setVirtuallyFocusedOptionId(optionEl?.dataset.id || "");
+        }
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export { ListboxOptions };

package/src/utils/components/Listbox/root/ListboxRoot.tsx

@@ -0,0 +1,104 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: We know what we are doing */
+import React from "react";
+import { ListboxGroup } from "../group/ListboxGroup";
+import { ListboxInputSlot } from "../input-slot/ListboxInputSlot";
+import { ListboxOption } from "../option/ListboxOption";
+import { ListboxOptions } from "../options/ListboxOptions";
+import { findNextOption, findPrevOption } from "./domHelpers";
+
+export interface ListboxProps {
+  children: React.ReactNode;
+  setVirtuallyFocusedOptionId: (value: string) => void;
+}
+
+/**
+ * Low level component for displaying a list of selectable options with optional grouping.
+ * Keyboard navigation is implemented with virtual focus so that real focus can remain on an input field.
+ */
+function Listbox({ children, setVirtuallyFocusedOptionId }: ListboxProps) {
+  const virtuallyFocusOption = (element: HTMLElement | null) => {
+    setVirtuallyFocusedOptionId(element?.dataset.id || "");
+    element?.scrollIntoView({ block: "nearest" });
+  };
+
+  return (
+    <div
+      onKeyDown={(event) => {
+        const listbox =
+          event.currentTarget.querySelector<HTMLElement>('[role="listbox"]');
+        if (!listbox) {
+          return;
+        }
+
+        // Helper functions
+        const getFirstOption = (suffix: string = "") =>
+          listbox.querySelector<HTMLElement>(`[role="option"]${suffix}`);
+        const getLastOption = () => {
+          const allOptions =
+            listbox.querySelectorAll<HTMLElement>('[role="option"]');
+          return allOptions[allOptions.length - 1];
+        };
+
+        const focusedOptionElm = getFirstOption('[data-virtual-focus="true"]');
+
+        // Doesn't make sense to have real focus on one option and virtual focus on another at the same time.
+        // Not sure if it matters, though 🤔
+        const optionElmWithRealFocus = getFirstOption(":focus");
+        if (optionElmWithRealFocus) {
+          listbox.focus();
+        }
+
+        const virtuallyFocusWithFallback = (
+          getNextElement: (currentOption: HTMLElement) => HTMLElement | null,
+          getFallback: () => HTMLElement | null,
+        ) => {
+          event.preventDefault();
+          if (!focusedOptionElm) {
+            virtuallyFocusOption(getFallback());
+            return;
+          }
+          const nextOption = getNextElement(focusedOptionElm);
+          if (!nextOption) {
+            virtuallyFocusOption(getFallback());
+            return;
+          }
+          virtuallyFocusOption(nextOption);
+        };
+
+        switch (event.key) {
+          case "ArrowDown":
+            virtuallyFocusWithFallback(findNextOption, getFirstOption);
+            break;
+          case "ArrowUp":
+            virtuallyFocusWithFallback(findPrevOption, getLastOption);
+            break;
+          case "Home":
+            event.preventDefault();
+            virtuallyFocusOption(getFirstOption());
+            break;
+          case "End":
+            event.preventDefault();
+            virtuallyFocusOption(getLastOption());
+            break;
+          case "Enter":
+          case "Accept":
+            if (focusedOptionElm) {
+              focusedOptionElm.click();
+            }
+            break;
+          // TODO: Consider implementing PageUp/PageDown too
+        }
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+Listbox.InputSlot = ListboxInputSlot;
+Listbox.Options = ListboxOptions;
+Listbox.Option = ListboxOption;
+Listbox.Group = ListboxGroup;
+
+export default Listbox;

package/src/utils/components/Listbox/root/domHelpers.ts

@@ -0,0 +1,60 @@
+function findNextOption(currentOption: HTMLElement) {
+  const nextElement = currentOption.nextElementSibling as HTMLElement | null;
+  if (nextElement) {
+    if (nextElement.role === "group") {
+      return nextElement.querySelector<HTMLElement>('[role="option"]');
+    }
+    if (nextElement.role === "option") {
+      return nextElement;
+    }
+  }
+
+  // No next element: Current element might be inside a group.
+  // Check if the parent has a next sibling
+  const parentNextElement = currentOption.parentElement
+    ?.nextElementSibling as HTMLElement | null;
+  if (parentNextElement) {
+    if (parentNextElement.role === "group") {
+      return parentNextElement.querySelector<HTMLElement>('[role="option"]');
+    }
+    if (parentNextElement.role === "option") {
+      return parentNextElement;
+    }
+  }
+
+  return null;
+}
+
+function findPrevOption(currentOption: HTMLElement) {
+  const prevElement =
+    currentOption.previousElementSibling as HTMLElement | null;
+  if (prevElement) {
+    if (prevElement.role === "group") {
+      return prevElement.querySelector<HTMLElement>(
+        '[role="option"]:last-of-type',
+      );
+    }
+    if (prevElement.role === "option") {
+      return prevElement;
+    }
+  }
+
+  // No previous element: Current element might be inside a group.
+  // Check if the parent has a previous sibling.
+  const parentPrevElement = currentOption.parentElement
+    ?.previousElementSibling as HTMLElement | null;
+  if (parentPrevElement) {
+    if (parentPrevElement.role === "group") {
+      return parentPrevElement.querySelector<HTMLElement>(
+        '[role="option"]:last-of-type',
+      );
+    }
+    if (parentPrevElement.role === "option") {
+      return parentPrevElement;
+    }
+  }
+
+  return null;
+}
+
+export { findNextOption, findPrevOption };

package/src/utils/components/floating/Floating.tsx

@@ -73,7 +73,7 @@ const Floating: FloatingComponent = ({ children }: FloatingProps) => {
  */
 type FloatingAnchorProps = HTMLAttributes<HTMLDivElement> &
   AsChildProps & {
-    virtualRef?: React.RefObject<Measurable>;
+    virtualRef?: Measurable;
   };
 
 /**
@@ -90,7 +90,7 @@ const FloatingAnchor = forwardRef<HTMLDivElement, FloatingAnchorProps>(
     useEffect(() => {
       // Allows anchoring the floating to non-DOM nodes like a cursor position.
       // We replace `anchorRef` with a virtual ref in such cases.
-      context.onAnchorChange(virtualRef?.current || ref.current);
+      context.onAnchorChange(virtualRef || ref.current);
     });
 
     const Comp = asChild ? Slot : "div";

package/src/utils/components/focus-boundary/FocusBoundary.tsx

@@ -11,6 +11,7 @@ import {
   ownerDocument,
   resolveRef,
 } from "../../helpers";
+import { focusElement, getTabbableCandidates } from "../../helpers/focus";
 import { useMergeRefs } from "../../hooks";
 import { useValueAsRef } from "../../hooks/useValueAsRef";
 import { Slot } from "../slot/Slot";
@@ -30,7 +31,6 @@ interface FocusBoundaryProps extends React.HTMLAttributes<HTMLDivElement> {
    * tabbing. If focus is moved outside the boundary programmatically or by
    * pointer, it will not be moved back.
    *
-   * - Links (`<a>` elements), are not considered tabbable for the purpose of looping.
    * - Hidden inputs (i.e. `<input type="hidden">`) are not considered tabbable.
    * - Elements that are `display: none` or `visibility: hidden` are not considered tabbable.
    * - Elements with `tabIndex < 0` are not considered tabbable.
@@ -118,7 +118,7 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
         if (container.contains(target)) {
           lastFocusedElementRef.current = target;
         } else {
-          focus(lastFocusedElementRef.current, { select: true });
+          focusElement(lastFocusedElementRef.current, { select: true });
         }
       }
 
@@ -150,7 +150,7 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
          * when they are not supposed to (like when clicking on elements outside the container
          */
         if (!container.contains(relatedTarget)) {
-          focus(lastFocusedElementRef.current, { select: true });
+          focusElement(lastFocusedElementRef.current, { select: true });
         }
       }
 
@@ -165,7 +165,7 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
         }
 
         if (mutations.some((mutation) => mutation.removedNodes.length > 0)) {
-          focus(container);
+          focusElement(container);
         }
       };
 
@@ -230,7 +230,7 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
       const previouslyFocusedElement = ownerDoc.activeElement;
 
       queueMicrotask(() => {
-        const focusableElements = removeLinks(getTabbableCandidates(container));
+        const focusableElements = getTabbableCandidates(container);
         const initialFocusValueOrFn = initialFocusRef.current;
         const resolvedInitialFocus =
           typeof initialFocusValueOrFn === "function"
@@ -262,7 +262,7 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
           return;
         }
 
-        focus(elToFocus, {
+        focusElement(elToFocus, {
           preventScroll: elToFocus === container,
           sync: false,
         });
@@ -361,12 +361,12 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
           if (!event.shiftKey && focusedElement === last) {
             event.preventDefault();
             if (loop) {
-              focus(first, { select: true });
+              focusElement(first, { select: true });
             }
           } else if (event.shiftKey && focusedElement === first) {
             event.preventDefault();
             if (loop) {
-              focus(last, { select: true });
+              focusElement(last, { select: true });
             }
           }
         }
@@ -391,47 +391,13 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
  * Returns the first and last tabbable elements inside a container as a tuple.
  */
 function getTabbableEdges(container: HTMLElement) {
-  const candidates = getTabbableCandidates(container);
+  const candidates = getTabbableCandidates(container, { omitLinks: false });
   return [
     findFirstVisible(candidates, container),
     findFirstVisible(candidates.reverse(), container),
   ] as const;
 }
 
-/**
- * Returns a list of potential tabbable candidates.
- * We do not take into account tabindex values.
- *
- * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
- * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
- */
-function getTabbableCandidates(container: HTMLElement) {
-  const nodes: HTMLElement[] = [];
-  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
-    acceptNode: (node: any) => {
-      const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
-      if (node.disabled || node.hidden || isHiddenInput) {
-        return NodeFilter.FILTER_SKIP;
-      }
-
-      /**
-       * `.tabIndex` is not the same as the `tabindex` attribute. It works on the
-       * runtime's understanding of tabbability, so this automatically accounts
-       * for any kind of element that could be tabbed to.
-       */
-      return node.tabIndex >= 0
-        ? NodeFilter.FILTER_ACCEPT
-        : NodeFilter.FILTER_SKIP;
-    },
-  });
-
-  while (walker.nextNode()) {
-    nodes.push(walker.currentNode as HTMLElement);
-  }
-
-  return nodes;
-}
-
 /**
  * Returns the first visible element in a list.
  * NOTE: Only checks visibility up to the `container`.
@@ -462,39 +428,6 @@ function isHidden(node: HTMLElement, { upTo }: { upTo?: HTMLElement }) {
   return false;
 }
 
-let rafId = 0;
-function focus(
-  element?: HTMLElement | null,
-  { select = false, preventScroll = true, sync = true } = {},
-) {
-  if (!element?.focus) {
-    return;
-  }
-
-  const previouslyFocusedElement = document.activeElement;
-
-  cancelAnimationFrame(rafId);
-  const exec = () => element.focus({ preventScroll });
-
-  if (sync) {
-    exec();
-  } else {
-    rafId = requestAnimationFrame(exec);
-  }
-
-  if (!select) {
-    return;
-  }
-
-  /* By default, inputs that gets focus should select its contents */
-  if (
-    element !== previouslyFocusedElement &&
-    element instanceof HTMLInputElement &&
-    "select" in element
-  )
-    element.select();
-}
-
 /* ---------------------------- FocusBoundary stack ---------------------------- */
 type FocusBoundaryAPI = { paused: boolean; pause(): void; resume(): void };
 const focusBoundarysStack = createFocusBoundarysStack();
@@ -531,10 +464,6 @@ function arrayRemove<T>(array: T[], item: T) {
   return updatedArray;
 }
 
-function removeLinks(items: HTMLElement[]) {
-  return items.filter((item) => item.tagName !== "A");
-}
-
 const LIST_LIMIT = 10;
 let previouslyFocusedElements: Element[] = [];
 const focusedElementsByContainer = new WeakMap<Element, Element[]>();

package/src/utils/components/link-anchor/LinkAnchor.tsx

@@ -29,6 +29,17 @@ const {
 
 type LinkAnchorOverlayProps = HTMLAttributes<HTMLDivElement> & AsChildProps;
 
+/*
+ * NB: Clicks on the overlay are captured with onClick. This does not work with middle-mouse-click.
+ * We could capture such click with onAuxClick, but last time we tried that,
+ * "forwarding" the click with dispatchEvent didn't work properly.
+ * - Chrome: Worked if we dispatched a regular click event.
+ * - Firefox: Did not work.
+ * - Safari: Opened the link in the same tab (tested in BrowserStack).
+ * We could use window.open() instead, but this would not run on(Aux)Click-callbacks on the link.
+ * We consider this unacceptable since many rely on this for tracking etc.
+ */
+
 const LinkAnchorOverlay = forwardRef<HTMLDivElement, LinkAnchorOverlayProps>(
   (
     {

package/src/utils/helpers/className.ts

@@ -41,7 +41,7 @@ function toVal(mix: Exclude<ClassValue, null | undefined | false>) {
 }
 
 function cl(...inputs: ClassValue[]) {
-  let parsedValue = "";
+  let parsedValue: string;
   let currentValue: ClassValue;
   let result = "";
 

package/src/utils/helpers/focus.ts

@@ -0,0 +1,78 @@
+/**
+ * Returns a list of potential tabbable candidates.
+ * We do not take into account tabindex values.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+ * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
+ */
+function getTabbableCandidates(
+  container: HTMLElement,
+  { omitLinks = true } = {},
+) {
+  const nodes: HTMLElement[] = [];
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node: any) => {
+      const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
+      if (node.disabled || node.hidden || isHiddenInput) {
+        return NodeFilter.FILTER_SKIP;
+      }
+
+      /**
+       * `.tabIndex` is not the same as the `tabindex` attribute. It works on the
+       * runtime's understanding of tabbability, so this automatically accounts
+       * for any kind of element that could be tabbed to.
+       */
+      return node.tabIndex >= 0
+        ? NodeFilter.FILTER_ACCEPT
+        : NodeFilter.FILTER_SKIP;
+    },
+  });
+
+  while (walker.nextNode()) {
+    nodes.push(walker.currentNode as HTMLElement);
+  }
+
+  return omitLinks ? removeLinks(nodes) : nodes;
+}
+
+function removeLinks(items: HTMLElement[]) {
+  return items.filter((item) => item.tagName !== "A");
+}
+
+let rafId = 0;
+
+function focusElement(
+  element?: HTMLElement | null,
+  { select = false, preventScroll = true, sync = true } = {},
+) {
+  if (!element?.focus) {
+    return;
+  }
+
+  const previouslyFocusedElement = document.activeElement;
+
+  cancelAnimationFrame(rafId);
+  const exec = () => {
+    element.focus({ preventScroll });
+  };
+
+  if (sync) {
+    exec();
+  } else {
+    rafId = requestAnimationFrame(exec);
+  }
+
+  if (!select) {
+    return;
+  }
+
+  /* By default, inputs that gets focus should select its contents */
+  if (
+    element !== previouslyFocusedElement &&
+    element instanceof HTMLInputElement &&
+    "select" in element
+  )
+    element.select();
+}
+
+export { getTabbableCandidates, focusElement };

package/src/utils/helpers/index.ts

@@ -1,9 +1,9 @@
-export * from "./className";
-export * from "./composeEventHandlers";
-export * from "./clipboardCopy";
-export * from "./create-strict-context";
-export * from "./detectBrowser";
-export * from "./hideNonTargetElements";
-export * from "./owner";
-export * from "./requireReactElement";
-export * from "./resolveRef";
+export { cl } from "./className";
+export { composeEventHandlers } from "./composeEventHandlers";
+export { clipboardCopy } from "./clipboardCopy";
+export { createStrictContext } from "./create-strict-context";
+export { isIOS, isSafari, isWebKit } from "./detectBrowser";
+export { hideNonTargetElements } from "./hideNonTargetElements";
+export { ownerDocument, ownerWindow } from "./owner";
+export { requireReactElement } from "./requireReactElement";
+export { resolveRef } from "./resolveRef";

package/src/utils/hooks/index.ts

@@ -1,14 +1,21 @@
-export * from "./useControllableState";
-export * from "./useMergeRefs";
-export * from "./useMedia";
-export * from "./usePrevious";
-export * from "./useAnimationsFinished";
-export * from "./useEventCallback";
-export * from "./useOpenChangeAnimationComplete";
-export * from "./useRefWithInit";
-export * from "./useScrollLock";
-export * from "./useTimeout";
-export * from "./useTransitionStatus";
-export * from "./useValueAsRef";
-export * from "./descendants/useDescendant";
+export {
+  useControllableState,
+  type UseControllableStateProps,
+} from "./useControllableState";
+export { useMergeRefs, useMergeRefsN } from "./useMergeRefs";
+export { noMatchMedia, useMedia } from "./useMedia";
+export { usePrevious } from "./usePrevious";
+export { useAnimationsFinished } from "./useAnimationsFinished";
+export { useEventCallback } from "./useEventCallback";
+export { useOpenChangeAnimationComplete } from "./useOpenChangeAnimationComplete";
+export { useRefWithInit } from "./useRefWithInit";
+export { useScrollLock } from "./useScrollLock";
+export { Timeout, useTimeout } from "./useTimeout";
+export {
+  type TransitionStatus,
+  createTransitionStatusAttribute,
+  useTransitionStatus,
+} from "./useTransitionStatus";
+export { useValueAsRef } from "./useValueAsRef";
+export { createDescendantContext } from "./descendants/useDescendant";
 export { DescendantsManager } from "./descendants/descendant";

package/src/utils/hooks/useDeferredValue.ts

@@ -0,0 +1,12 @@
+import React from "react";
+
+const maybeReactUseDeferredValue: undefined | ((string: string) => string) = (
+  React as any
+)[
+  "useDeferredValue" + "" // Workaround for https://github.com/webpack/webpack/issues/14814
+];
+
+export const useDeferredValue = (value: string): string =>
+  maybeReactUseDeferredValue !== undefined
+    ? maybeReactUseDeferredValue(value)
+    : value;