@navikt/ds-react 7.32.1 → 7.32.3

package/src/util/focus-boundary/FocusBoundary.tsx

@@ -0,0 +1,453 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { Slot } from "../../slot/Slot";
+import { useMergeRefs } from "../../util/hooks";
+import { useEventCallback } from "../hooks/useEventCallback";
+
+const AUTOFOCUS_ON_MOUNT = "focusBoundary.autoFocusOnMount";
+const AUTOFOCUS_ON_UNMOUNT = "focusBoundary.autoFocusOnUnmount";
+const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+
+/* TODO: Regular story */
+/**
+ * TODO:
+ * - owner(container) for corrent document
+ */
+
+/* -------------------------------------------------------------------------- */
+/*                                 FocusBoundary                                 */
+/* -------------------------------------------------------------------------- */
+interface FocusBoundaryProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * FocusBoundary expects a single child element since its a slotted component.
+   */
+  children: React.ReactElement;
+  /**
+   * When `true`, tabbing from last item will focus first tabbable
+   * and shift+tab from first item will focus last tabbable element.
+   * This does not "trap" focus inside the boundary, it only loops it when
+   * 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.
+   * @defaultValue false
+   */
+  loop?: boolean;
+  /**
+   * When `true`, focus cannot escape the focus boundary via keyboard,
+   * pointer, or a programmatic focus.
+   * @defaultValue false
+   */
+  trapped?: boolean;
+  /**
+   * Event handler called when auto-focusing on mount.
+   * Can be prevented.
+   */
+  onMountAutoFocus?: (event: Event) => void;
+  /**
+   * Event handler called when auto-focusing on unmount.
+   * Can be prevented.
+   */
+  onUnmountAutoFocus?: (event: Event) => void;
+}
+
+const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
+  (
+    {
+      loop = false,
+      trapped = false,
+      onMountAutoFocus: onMountAutoFocusProp,
+      onUnmountAutoFocus: onUnmountAutoFocusProp,
+      ...restProps
+    }: FocusBoundaryProps,
+    forwardedRef,
+  ) => {
+    const onMountAutoFocus = useEventCallback(onMountAutoFocusProp);
+    const onUnmountAutoFocus = useEventCallback(onUnmountAutoFocusProp);
+
+    const lastFocusedElementRef = useRef<HTMLElement | null>(null);
+    const [container, setContainer] = useState<HTMLElement | null>(null);
+    const mergedRefs = useMergeRefs(forwardedRef, setContainer);
+
+    const focusBoundary = useRef<FocusBoundaryAPI>({
+      paused: false,
+      pause() {
+        this.paused = true;
+      },
+      resume() {
+        this.paused = false;
+      },
+    }).current;
+
+    /* Handles trapped state */
+    useEffect(() => {
+      if (!trapped || !container) {
+        return;
+      }
+
+      function handleFocusIn(event: FocusEvent) {
+        if (focusBoundary.paused || container === null) {
+          return;
+        }
+
+        const target = event.target as HTMLElement | null;
+        if (container.contains(target)) {
+          lastFocusedElementRef.current = target;
+        } else {
+          focus(lastFocusedElementRef.current, { select: true });
+        }
+      }
+
+      function handleFocusOut(event: FocusEvent) {
+        if (focusBoundary.paused || container === null) {
+          return;
+        }
+
+        const relatedTarget = event.relatedTarget as HTMLElement | null;
+
+        /*
+         * `focusout` event with a `null` `relatedTarget` will happen in a few known cases:
+         * 1. When the user switches app/tabs/windows/the browser itself loses focus.
+         * 2. In Google Chrome, when the focused element is removed from the DOM.
+         * 3. When clicking on an element that cannot receive focus.
+         *
+         * We let the browser do its thing here because:
+         * 1. The browser already keeps a memory of what's focused for when the page gets refocused.
+         * 2. In Google Chrome, if we try to focus the deleted focused element (as per below), it
+         * throws the CPU to 100%, so we avoid doing anything for this reason here too.
+         */
+        if (relatedTarget === null) {
+          return;
+        }
+
+        /*
+         * If the focus has moved to an element outside the container, we move focus to the last valid focused element inside.
+         * This makes sure to "trap" focus inside the container.
+         * We handle focus on focusout instead of focusin to avoid elements recieving focusin events
+         * when they are not supposed to (like when clicking on elements outside the container
+         */
+        if (!container.contains(relatedTarget)) {
+          focus(lastFocusedElementRef.current, { select: true });
+        }
+      }
+
+      /**
+       * When the currently focused element is removed from the DOM, browsers move focus
+       * to the document.body. In this case, we move focus to the container
+       * to keep focus trapped correctly instead.
+       */
+      const handleMutations = (mutations: MutationRecord[]) => {
+        if (document.activeElement !== document.body) {
+          return;
+        }
+
+        if (mutations.some((mutation) => mutation.removedNodes.length > 0)) {
+          focus(container);
+        }
+      };
+
+      document.addEventListener("focusin", handleFocusIn);
+      document.addEventListener("focusout", handleFocusOut);
+      const observer = new MutationObserver(handleMutations);
+      observer.observe(container, { childList: true, subtree: true });
+
+      return () => {
+        document.removeEventListener("focusin", handleFocusIn);
+        document.removeEventListener("focusout", handleFocusOut);
+        observer.disconnect();
+      };
+    }, [trapped, container, focusBoundary.paused]);
+
+    /* Handles autofocus on mount and unmount */
+    useEffect(() => {
+      if (!container) {
+        return;
+      }
+
+      focusBoundarysStack.add(focusBoundary);
+      const initialFocusedElement =
+        document.activeElement as HTMLElement | null;
+      const containsActiveElement =
+        initialFocusedElement && container.contains(initialFocusedElement);
+
+      /*
+       * We only autofocus on mount if container does not contain active element.
+       * If container has an element with `autoFocus` attribute, browser will
+       * have already moved focus there before this effect runs.
+       */
+      if (!containsActiveElement) {
+        const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
+        container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
+        container.dispatchEvent(mountEvent);
+
+        /* If consumer does not manually prevent event and handle focus themselves */
+        if (!mountEvent.defaultPrevented) {
+          /**
+           * Attempts focusing the first element in a list of candidates.
+           * Stops when focus has actually moved.
+           */
+          const candidates = removeLinks(getTabbableCandidates(container));
+          const previouslyFocusedElement = document.activeElement;
+          for (const candidate of candidates) {
+            focus(candidate, { select: true });
+            if (document.activeElement !== previouslyFocusedElement) {
+              break;
+            }
+          }
+
+          /* focusFirst might not find any candidates, so we fall back to focusing container */
+          if (document.activeElement === initialFocusedElement) {
+            focus(container);
+          }
+        }
+      }
+
+      return () => {
+        container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
+
+        /**
+         * https://github.com/facebook/react/issues/17894
+         * We delay to next tick to avoid issues with React's event system
+         * where calling `focus` inside a effect cleanup causes React to not call onFocus handlers.
+         */
+        setTimeout(() => {
+          const unmountEvent = new CustomEvent(
+            AUTOFOCUS_ON_UNMOUNT,
+            EVENT_OPTIONS,
+          );
+          container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
+          container.dispatchEvent(unmountEvent);
+
+          /* If consumer does not manually prevent event and handle focus themselves */
+          if (!unmountEvent.defaultPrevented) {
+            /* To avoid CPU-spikes on Chrome, we make sure element is still connected to the DOM. */
+            focus(
+              initialFocusedElement?.isConnected
+                ? initialFocusedElement
+                : document.body,
+              {
+                select: true,
+              },
+            );
+          }
+          /* Since this is inside a cleanup, we need to instantly remove the listener ourselves */
+          container.removeEventListener(
+            AUTOFOCUS_ON_UNMOUNT,
+            onUnmountAutoFocus,
+          );
+
+          focusBoundarysStack.remove(focusBoundary);
+        }, 0);
+      };
+    }, [container, onMountAutoFocus, onUnmountAutoFocus, focusBoundary]);
+
+    /* Takes care of looping focus */
+    const handleKeyDown = useCallback(
+      (event: React.KeyboardEvent) => {
+        if ((!loop && !trapped) || focusBoundary.paused) {
+          return;
+        }
+
+        const isTabKey =
+          event.key === "Tab" &&
+          !event.altKey &&
+          !event.ctrlKey &&
+          !event.metaKey;
+
+        const focusedElement = document.activeElement;
+
+        if (isTabKey && focusedElement) {
+          const containerTarget = event.currentTarget as HTMLElement;
+          const [first, last] = getTabbableEdges(containerTarget);
+
+          /* We can only wrap focus if we have tabbable edges */
+          if (!(first && last)) {
+            /*
+             * No need to do anything if active element is the expected focus-target
+             * Case: No tabbable elements, focus should stay on container. If we don't preventDefault, the container will lose focus
+             * and potentially lose controll of focus to browser (like focusing address bar).
+             */
+            if (focusedElement === containerTarget) {
+              event.preventDefault();
+            }
+            return;
+          }
+
+          /**
+           * Since we are either trapped + looping, or one of them we will do nothing when trapped and focus first element when looping.
+           */
+          if (!event.shiftKey && focusedElement === last) {
+            event.preventDefault();
+            if (loop) {
+              focus(first, { select: true });
+            }
+          } else if (event.shiftKey && focusedElement === first) {
+            event.preventDefault();
+            if (loop) {
+              focus(last, { select: true });
+            }
+          }
+        }
+      },
+      [loop, trapped, focusBoundary.paused],
+    );
+
+    return (
+      <Slot
+        tabIndex={-1}
+        {...restProps}
+        ref={mergedRefs}
+        onKeyDown={handleKeyDown}
+      />
+    );
+  },
+);
+
+/* ---------------------------- FocusBoundary utils ---------------------------- */
+/**
+ * Returns the first and last tabbable elements inside a container as a tuple.
+ */
+function getTabbableEdges(container: HTMLElement) {
+  const candidates = getTabbableCandidates(container);
+  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`.
+ */
+function findFirstVisible(elements: HTMLElement[], container: HTMLElement) {
+  for (const element of elements) {
+    if (!isHidden(element, { upTo: container })) {
+      return element;
+    }
+  }
+}
+
+function isHidden(node: HTMLElement, { upTo }: { upTo?: HTMLElement }) {
+  if (getComputedStyle(node).visibility === "hidden") {
+    return true;
+  }
+
+  while (node) {
+    /* we stop at `upTo` */
+    if (upTo !== undefined && node === upTo) {
+      return false;
+    }
+    if (getComputedStyle(node).display === "none") {
+      return true;
+    }
+    node = node.parentElement as HTMLElement;
+  }
+  return false;
+}
+
+function focus(element?: HTMLElement | null, { select = false } = {}) {
+  if (!element?.focus) {
+    return;
+  }
+
+  const previouslyFocusedElement = document.activeElement;
+  /* Prevent scrolling on focus, to minimize jarring transitions */
+  element.focus({ preventScroll: true });
+
+  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();
+
+function createFocusBoundarysStack() {
+  /* A stack of focus-boundaries, with the active one at the top */
+  let stack: FocusBoundaryAPI[] = [];
+
+  return {
+    add(focusBoundary: FocusBoundaryAPI) {
+      /* Pause the currently active focus-boundary (at the top of the stack) */
+      const activeFocusBoundary = stack[0];
+      if (focusBoundary !== activeFocusBoundary) {
+        activeFocusBoundary?.pause();
+      }
+      /* remove in case it already exists (because we'll re-add it at the top of the stack) */
+      stack = arrayRemove(stack, focusBoundary);
+      stack.unshift(focusBoundary);
+    },
+
+    remove(focusBoundary: FocusBoundaryAPI) {
+      stack = arrayRemove(stack, focusBoundary);
+      stack[0]?.resume();
+    },
+  };
+}
+
+function arrayRemove<T>(array: T[], item: T) {
+  const updatedArray = [...array];
+  const index = updatedArray.indexOf(item);
+  if (index !== -1) {
+    updatedArray.splice(index, 1);
+  }
+  return updatedArray;
+}
+
+function removeLinks(items: HTMLElement[]) {
+  return items.filter((item) => item.tagName !== "A");
+}
+
+export { FocusBoundary };
+export type { FocusBoundaryProps };

package/src/util/focus-guards/FocusGuards.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { useMergeRefs } from "../hooks";
+
+const visuallyHidden: React.CSSProperties = {
+  clip: "rect(0 0 0 0)",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  position: "fixed",
+  top: 0,
+  left: 0,
+  border: 0,
+  padding: 0,
+  width: 1,
+  height: 1,
+  margin: -1,
+};
+
+type FocusGuardsProps = {
+  children: React.ReactNode;
+  startRef?: React.RefObject<HTMLSpanElement>;
+  endRef?: React.RefObject<HTMLSpanElement>;
+};
+
+function FocusGuards({
+  children,
+  startRef: forwardedStartRef,
+  endRef: forwardedEndRef,
+}: FocusGuardsProps) {
+  const startRef = React.useRef<HTMLSpanElement | null>(null);
+  const endRef = React.useRef<HTMLSpanElement | null>(null);
+
+  const startRefCombined = useMergeRefs(startRef, forwardedStartRef);
+  const endRefCombined = useMergeRefs(endRef, forwardedEndRef);
+
+  return (
+    <React.Fragment>
+      <span
+        ref={startRefCombined}
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0}
+        style={visuallyHidden}
+        data-aksel-focus-guard=""
+      />
+      {children}
+      <span
+        ref={endRefCombined}
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0}
+        style={visuallyHidden}
+        data-aksel-focus-guard=""
+      />
+    </React.Fragment>
+  );
+}
+
+export { FocusGuards };

package/src/util/hooks/descendants/useDescendant.tsx

@@ -46,10 +46,13 @@ export function createDescendantContext<
     useClientLayoutEffect(() => {
       return () => {
         if (!ref.current) return;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         descendants.unregister(ref.current);
       };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     useClientLayoutEffect(() => {
       if (!ref.current) return;
       const dataIndex = Number(ref.current.dataset.index);

package/src/{overlays/overlay → util}/hooks/useLatestRef.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useClientLayoutEffect } from "../../../util";
+import { useClientLayoutEffect } from "./useClientLayoutEffect";
 import { useRefWithInit } from "./useRefWithInit";
 
 export function useLatestRef<T>(value: T) {
@@ -8,6 +8,7 @@ export function useLatestRef<T>(value: T) {
 
   latest.next = value;
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useClientLayoutEffect(latest.effect);
 
   return latest;

package/src/util/hooks/useTimeout.ts

@@ -0,0 +1,54 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRefWithInit } from "./useRefWithInit";
+
+const EMPTY = 0;
+
+class Timeout {
+  static create() {
+    return new Timeout();
+  }
+
+  currentId: number = EMPTY;
+
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  start(delay: number, fn: () => void) {
+    this.clear();
+    this.currentId = setTimeout(() => {
+      this.currentId = EMPTY;
+      fn();
+    }, delay) as unknown as number; /* Node.js types are enabled in development */
+  }
+
+  isStarted() {
+    return this.currentId !== EMPTY;
+  }
+
+  clear = () => {
+    if (this.currentId !== EMPTY) {
+      clearTimeout(this.currentId);
+      this.currentId = EMPTY;
+    }
+  };
+
+  disposeEffect = () => {
+    return this.clear;
+  };
+}
+
+/**
+ * A `setTimeout` with automatic cleanup and guard.
+ */
+function useTimeout() {
+  const timeout = useRefWithInit(Timeout.create).current!;
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(timeout.disposeEffect, []);
+
+  return timeout;
+}
+
+export { Timeout, useTimeout };

package/src/util/link-anchor/LinkAnchor.tsx

@@ -11,6 +11,7 @@ import { useRenameCSS } from "../../theme/Theme";
 import { composeEventHandlers } from "../composeEventHandlers";
 import { createContext } from "../create-context";
 import { useMergeRefs } from "../hooks/useMergeRefs";
+import { ownerWindow } from "../owner";
 import { AsChildProps } from "../types";
 
 type LinkAnchorOverlayContextProps = {
@@ -47,7 +48,10 @@ const LinkAnchorOverlay = forwardRef<HTMLDivElement, LinkAnchorOverlayProps>(
           {...restProps}
           className={cn("navds-link-anchor__overlay", className)}
           onClick={composeEventHandlers(onClick, (e) => {
-            if (e.target === anchorRef.current || isTextSelected()) {
+            if (
+              e.target === anchorRef.current ||
+              isTextSelected(anchorRef.current)
+            ) {
               return;
             }
 
@@ -142,11 +146,8 @@ const LinkAnchorArrow = forwardRef<SVGSVGElement, LinkAnchorArrowProps>(
 );
 
 /* -------------------------- LinkAnchor Utilities -------------------------- */
-function isTextSelected(): boolean {
-  if (typeof window === "undefined") {
-    return false;
-  }
-  return !!window.getSelection()?.toString();
+function isTextSelected(refElement: HTMLAnchorElement | null): boolean {
+  return !!ownerWindow(refElement)?.getSelection()?.toString();
 }
 
 export { LinkAnchor, LinkAnchorArrow, LinkAnchorOverlay };

package/src/util/owner.ts

@@ -0,0 +1,35 @@
+/**
+ * Returns the owner document of a given element.
+ *
+ * Use this when the node might live in a different browsing context than the code
+ * invoking the utility (portals, iframes, custom documents).
+ *
+ * Examples:
+ * - Focus guards for portaled menus: pass the menu root so guards are created in the portal document.
+ * - Components rendered inside an iframe preview: scope listeners to the iframe-document.
+ * - Element opened with `window.open`: scope listeners to the new window-document.
+ *
+ * Scenarios:
+ * - Modal content rendered to parent `document.body` via a portal while running inside an iframe.
+ * - Tooltips or popovers that live outside the component't immediate DOM tree.
+ *
+ * https://github.com/radix-ui/primitives/issues/1676
+ * https://github.com/radix-ui/primitives/issues/1721
+ * https://github.com/radix-ui/primitives/discussions/1715
+ */
+function ownerDocument(node: Element | null) {
+  return node?.ownerDocument || globalThis?.document;
+}
+
+/**
+ * Returns the owner window of a given element.
+ *
+ * Examples:
+ * - Keyboard listeners for portaled overlays.
+ * - Resize/scroll observers applied to iframe widgets.
+ */
+function ownerWindow(node: Document | Element | null): typeof window {
+  return node?.ownerDocument?.defaultView || window;
+}
+
+export { ownerDocument, ownerWindow };

package/cjs/overlays/floating-menu/parts/FocusScope.d.ts

@@ -1,22 +0,0 @@
-import React from "react";
-interface FocusScopeProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Event handler called on mount, unless the component already has focus. Used for auto-focusing.
-     * Can be prevented.
-     */
-    onMountHandler?: (event: Event) => void;
-    /**
-     * Event handler called on unmount. Used for auto-focusing.
-     * Can be prevented.
-     */
-    onUnmountHandler?: (event: Event) => void;
-}
-/**
- * FocusScope manages focus on mount and unmount of container.
- * This is used to better handle autofocus of elements when mounted and unmounted.
- * Example usage:
- * - Focus first item in a list when mounted
- * - Focus a button when unmounted
- */
-declare const FocusScope: React.ForwardRefExoticComponent<FocusScopeProps & React.RefAttributes<HTMLDivElement>>;
-export { FocusScope, type FocusScopeProps };