@navikt/ds-react 6.14.0 → 6.15.0

package/src/overlays/floating-menu/parts/FocusScope.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { forwardRef, useEffect, useState } from "react";
+import { Slot } from "../../../slot/Slot";
+import { useCallbackRef, useMergeRefs } from "../../../util/hooks";
+
+const AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
+const AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
+const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+
+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
+ */
+const FocusScope = forwardRef<HTMLDivElement, FocusScopeProps>(
+  (
+    {
+      onMountHandler: onMountHandlerCallback,
+      onUnmountHandler: onUnmountHandlerCallback,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [container, setContainer] = useState<HTMLElement | null>(null);
+    const onMountHandler = useCallbackRef(onMountHandlerCallback);
+    const onUnmountHandler = useCallbackRef(onUnmountHandlerCallback);
+
+    const composedRefs = useMergeRefs(ref, setContainer);
+
+    useEffect(() => {
+      if (!container) return;
+
+      const ownerDocument = container.ownerDocument ?? globalThis?.document;
+      const hasFocus = container.contains(ownerDocument.activeElement);
+
+      if (!hasFocus) {
+        const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
+        container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountHandler);
+        container.dispatchEvent(mountEvent);
+      }
+
+      return () => {
+        container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountHandler);
+
+        /**
+         * https://github.com/facebook/react/issues/17894
+         * As usual when dealing with focus and useEffect,
+         * we need to defer the focus to the next event-loop
+         * setTimeout makes sure the code is ran after the next render-cycle
+         */
+        setTimeout(() => {
+          const unmountEvent = new CustomEvent(
+            AUTOFOCUS_ON_UNMOUNT,
+            EVENT_OPTIONS,
+          );
+          container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountHandler);
+          container.dispatchEvent(unmountEvent);
+
+          // we need to remove the listener after we `dispatchEvent`
+          container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountHandler);
+        }, 0);
+      };
+    }, [container, onMountHandler, onUnmountHandler]);
+
+    return <Slot tabIndex={-1} {...rest} ref={composedRefs} />;
+  },
+);
+
+export { FocusScope, type FocusScopeProps };

package/src/overlays/floating-menu/parts/RovingFocus.tsx

@@ -0,0 +1,121 @@
+import React, { forwardRef, useCallback, useEffect, useRef } from "react";
+import { Slot } from "../../../slot/Slot";
+import { composeEventHandlers } from "../../../util/composeEventHandlers";
+import { useCallbackRef, useMergeRefs } from "../../../util/hooks";
+import { DescendantsManager } from "../../../util/hooks/descendants/descendant";
+
+interface RovingFocusProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "tabIndex"> {
+  asChild?: boolean;
+  descendants: DescendantsManager<HTMLDivElement, object>;
+  onEntryFocus?: (event: Event) => void;
+}
+
+const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
+const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+
+const RovingFocus = forwardRef<HTMLDivElement, RovingFocusProps>(
+  (
+    {
+      children,
+      asChild,
+      descendants,
+      onKeyDown,
+      onEntryFocus,
+      onMouseDown,
+      onFocus,
+      ...rest
+    }: RovingFocusProps,
+    ref,
+  ) => {
+    const _ref = React.useRef<HTMLDivElement>(null);
+    const composedRefs = useMergeRefs(ref, _ref);
+
+    const handleEntryFocus = useCallbackRef(onEntryFocus);
+    const isMouseFocusRef = useRef(false);
+
+    useEffect(() => {
+      const node = _ref.current;
+      if (node) {
+        node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
+        return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
+      }
+    }, [handleEntryFocus]);
+
+    const handleKeyDown = useCallback(
+      (event: React.KeyboardEvent) => {
+        const loop = false;
+
+        const ownerDocument =
+          _ref?.current?.ownerDocument ?? globalThis?.document;
+
+        const idx = descendants
+          .values()
+          .findIndex((x) => x.node.isSameNode(ownerDocument.activeElement));
+
+        const nextItem = () => {
+          const next = descendants.nextEnabled(idx, loop);
+          next && next.node?.focus();
+        };
+        const prevItem = () => {
+          const prev = descendants.prevEnabled(idx, loop);
+          prev && prev.node?.focus();
+        };
+        const firstItem = () => {
+          const first = descendants.firstEnabled();
+          first && first.node?.focus();
+        };
+        const lastItem = () => {
+          const last = descendants.lastEnabled();
+          last && last.node?.focus();
+        };
+
+        const keyMap: Record<string, React.KeyboardEventHandler> = {
+          ArrowUp: prevItem,
+          ArrowDown: nextItem,
+          Home: firstItem,
+          End: lastItem,
+        };
+
+        const action = keyMap[event.key];
+
+        if (action) {
+          event.preventDefault();
+          action(event);
+        }
+      },
+      [descendants],
+    );
+
+    const Comp = asChild ? Slot : "div";
+
+    return (
+      <Comp
+        ref={composedRefs}
+        {...rest}
+        tabIndex={descendants.enabledCount() === 0 ? -1 : 0}
+        style={{ outline: "none", ...rest.style }}
+        onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}
+        onMouseDown={composeEventHandlers(onMouseDown, () => {
+          isMouseFocusRef.current = true;
+        })}
+        onFocus={composeEventHandlers(onFocus, (event) => {
+          if (event.target === event.currentTarget) {
+            const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
+            event.currentTarget.dispatchEvent(entryFocusEvent);
+
+            if (!entryFocusEvent.defaultPrevented) {
+              descendants.firstEnabled()?.node.focus({ preventScroll: true });
+            }
+          }
+
+          isMouseFocusRef.current = false;
+        })}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+export { RovingFocus, type RovingFocusProps };

package/src/overlays/floating-menu/parts/SlottedDivElement.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef } from "react";
+import { Slot } from "../../../slot/Slot";
+
+interface SlottedDivProps extends React.HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean;
+}
+
+const SlottedDivElement = forwardRef<HTMLDivElement, SlottedDivProps>(
+  ({ asChild, ...rest }, forwardedRef) => {
+    const Comp = asChild ? Slot : "div";
+    return <Comp {...rest} ref={forwardedRef} />;
+  },
+);
+
+type SlottedDivElementRef = React.ElementRef<typeof SlottedDivElement>;
+
+export { SlottedDivElement, type SlottedDivElementRef, type SlottedDivProps };

package/src/util/composeEventHandlers.ts

@@ -4,7 +4,7 @@
  * Utility to consistently call original eventhandler, often from props and internal eventhandler
  * @internal
  */
-export function composeEventHandlers<T extends React.SyntheticEvent>(
+export function composeEventHandlers<T extends React.SyntheticEvent | Event>(
   originalEventHandler?: (event: T) => void,
   ourEventHandler?: (event: T) => void,
   { checkForDefaultPrevented = true } = {},