@navikt/ds-react 6.13.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/tabs/parts/tablist/useTabList.ts

@@ -48,9 +48,12 @@ export function useTabList() {
         End: lastTab,
       };
 
+      const hasModifiers =
+        event.shiftKey || event.ctrlKey || event.altKey || event.metaKey;
+
       const action = keyMap[event.key];
 
-      if (action) {
+      if (action && !hasModifiers) {
         event.preventDefault();
         action(event);
       } else if (event.key === "Tab") {

package/src/toggle-group/parts/useToggleItem.ts

@@ -77,9 +77,12 @@ export function useToggleItem<P extends UseToggleItemProps>(
         End: lastTab,
       };
 
+      const hasModifiers =
+        event.shiftKey || event.ctrlKey || event.altKey || event.metaKey;
+
       const action = keyMap[event.key];
 
-      if (action) {
+      if (action && !hasModifiers) {
         event.preventDefault();
         action(event);
       } else if (event.key === "Tab") {

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 } = {},

package/src/util/virtualfocus/Context.tsx

@@ -0,0 +1,27 @@
+import { Dispatch, SetStateAction } from "react";
+import { createContext } from "../create-context";
+import { createDescendantContext } from "../hooks/descendants/useDescendant";
+import { SlottedDivElementRef } from "./SlottedDivElement";
+
+export const [
+  VirtualFocusDescendantsProvider,
+  useVirtualFocusDescendantsContext,
+  useVirtualFocusDescendantInitializer,
+  useVirtualFocusDescendant,
+] = createDescendantContext<
+  SlottedDivElementRef,
+  {
+    handleOnSelect: () => void;
+    handleOnActive: () => void;
+  }
+>();
+
+export const [
+  VirtualFocusInternalContextProvider,
+  useVirtualFocusInternalContext,
+] = createContext<{
+  virtualFocusIdx: number;
+  setVirtualFocusIdx: Dispatch<SetStateAction<number>>;
+  loop: boolean;
+  uniqueId: string;
+}>();

package/src/util/virtualfocus/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/virtualfocus/VirtualFocus.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from "react";
+import { useId } from "../../util/hooks";
+import {
+  VirtualFocusDescendantsProvider,
+  VirtualFocusInternalContextProvider,
+  useVirtualFocusDescendantInitializer,
+} from "./Context";
+import { VirtualFocusAnchor } from "./parts/VirtualFocusAnchor";
+import { VirtualFocusContent } from "./parts/VirtualFocusContent";
+import { VirtualFocusItem } from "./parts/VirtualFocusItem";
+
+type VirtualFocusProps = {
+  children: React.ReactNode;
+  /**
+   * Whether to cause focus to loop around when it hits the first or last element
+   * @default false
+   **/
+  loop?: boolean;
+};
+
+/**
+ * A component that manages a virtual focus using the 'up' and 'down'
+ * arrow keys as well as selection with 'Return'.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/virtualfocus)
+ * @see 🏷️ {@link AccordionProps}
+ *
+ * @example
+ * ```jsx
+ * <VirtualFocus>
+ *   <VirtualFocus.Anchor
+ *     role="combobox"
+ *     onSelect={() => {
+ *       console.log("you selected the anchor");
+ *     }}
+ *     onActive={() => {
+ *       console.log("the anchor is now virtually focused");
+ *     }}
+ *   >
+ *     <input type="text" />
+ *   </VirtualFocus.Anchor>
+ *   <VirtualFocus.Content>
+ *     <VirtualFocus.Item
+ *       onSelect={() => {
+ *         console.log("you selected the item");
+ *       }}
+ *       onActive={() => {
+ *         console.log("the item is now virtually focused");
+ *       }}
+ *     >
+ *       <p>item 1</p>
+ *     </VirtualFocus.Item>
+ *     <VirtualFocus.Item
+ *       onSelect={() => {
+ *         console.log("you selected the item");
+ *       }}
+ *       onActive={() => {
+ *         console.log("the item is now virtually focused");
+ *       }}
+ *     >
+ *       <p>item 2</p>
+ *     </VirtualFocus.Item>
+ *   </VirtualFocus.Content>
+ * </VirtualFocus>
+ * ```
+ */
+export const VirtualFocus = ({ children, loop = false }: VirtualFocusProps) => {
+  const descendants = useVirtualFocusDescendantInitializer();
+  const [virtualFocusIdx, setVirtualFocusIdx] = useState(0);
+
+  return (
+    <VirtualFocusInternalContextProvider
+      virtualFocusIdx={virtualFocusIdx}
+      setVirtualFocusIdx={setVirtualFocusIdx}
+      loop={loop}
+      uniqueId={useId()}
+    >
+      <VirtualFocusDescendantsProvider value={descendants}>
+        {children}
+      </VirtualFocusDescendantsProvider>
+    </VirtualFocusInternalContextProvider>
+  );
+};
+
+VirtualFocus.Anchor = VirtualFocusAnchor;
+VirtualFocus.Item = VirtualFocusItem;
+VirtualFocus.Content = VirtualFocusContent;
+
+export default VirtualFocus;

package/src/util/virtualfocus/parts/VirtualFocusAnchor.tsx

@@ -0,0 +1,102 @@
+import React, { forwardRef } from "react";
+import { Slot } from "../../../slot/Slot";
+import { composeEventHandlers } from "../../composeEventHandlers";
+import { useMergeRefs } from "../../hooks";
+import {
+  useVirtualFocusDescendant,
+  useVirtualFocusInternalContext,
+} from "../Context";
+
+export interface VirtualFocusAnchorProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
+  /**
+   * The role of the container. This is a limited subset of roles that
+   * require manual focus management.
+   *
+   * Children that are to get focus inside this container element shall be
+   * pointed to by `aria-activedescendant`.
+   **/
+  role:
+    | "combobox"
+    | "grid"
+    | "listbox"
+    | "menu"
+    | "menubar"
+    | "radiogroup"
+    | "tree"
+    | "treegrid"
+    | "tablist";
+  /**
+   * The function that is run when the focused element
+   * is to be selected (eg. do an actual search, change route... etc)
+   */
+  onSelect: () => void;
+  /**
+   * The function that is run when the element gets
+   * virtual focus set to it.
+   */
+  onActive: () => void;
+  children: React.ReactElement;
+  /**
+   * Set this to `0` if you want the Anchor itself
+   * to be focusable. Since this Anchor is hoisted & merged with
+   * its first child, you most likely want to keep this as `0`.
+   * @default 0
+   */
+  tabIndex?: number;
+}
+
+/**
+ * Must have a single child that is an input element.
+ */
+export const VirtualFocusAnchor = forwardRef<
+  HTMLInputElement,
+  VirtualFocusAnchorProps
+>(({ onSelect, onActive, children, ...rest }, ref) => {
+  const { virtualFocusIdx, setVirtualFocusIdx, loop, uniqueId } =
+    useVirtualFocusInternalContext();
+
+  const { register, descendants, index } = useVirtualFocusDescendant({
+    handleOnActive: () => {
+      setVirtualFocusIdx(0);
+      onActive();
+    },
+    handleOnSelect: onSelect,
+  });
+
+  const mergedRefs = useMergeRefs(ref, register);
+
+  return (
+    <Slot
+      ref={mergedRefs}
+      tabIndex={0}
+      {...rest}
+      id={`virtualfocus-${uniqueId}-${index}`}
+      aria-owns={`virtualfocus-${uniqueId}-content`}
+      aria-controls={`virtualfocus-${uniqueId}-content`}
+      aria-activedescendant={`virtualfocus-${uniqueId}-${virtualFocusIdx}`}
+      onKeyDown={composeEventHandlers(rest.onKeyDown, (event) => {
+        if (event.key === "ArrowDown") {
+          event.preventDefault();
+          const to_focus_descendant = descendants.next(virtualFocusIdx, loop);
+          if (to_focus_descendant) {
+            to_focus_descendant.handleOnActive();
+          }
+        } else if (event.key === "ArrowUp") {
+          event.preventDefault();
+          const to_focus_descendant = descendants.prev(virtualFocusIdx, loop);
+          if (to_focus_descendant) {
+            to_focus_descendant.handleOnActive();
+          }
+        } else if (event.key === "Enter") {
+          const curr = descendants.item(virtualFocusIdx);
+          if (curr?.handleOnSelect) {
+            curr.handleOnSelect();
+          }
+        }
+      })}
+    >
+      {children}
+    </Slot>
+  );
+});

package/src/util/virtualfocus/parts/VirtualFocusContent.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef } from "react";
+import { useVirtualFocusInternalContext } from "../Context";
+
+export interface VirtualFocusContentProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {}
+
+export const VirtualFocusContent = forwardRef<
+  HTMLDivElement,
+  VirtualFocusContentProps
+>(({ children, ...rest }, ref) => {
+  const { uniqueId } = useVirtualFocusInternalContext();
+  return (
+    <div ref={ref} {...rest} id={`virtualfocus-${uniqueId}-content`}>
+      {children}
+    </div>
+  );
+});

package/src/util/virtualfocus/parts/VirtualFocusItem.tsx

@@ -0,0 +1,60 @@
+import React, { forwardRef } from "react";
+import { Slot } from "../../../slot/Slot";
+import { composeEventHandlers } from "../../composeEventHandlers";
+import { useMergeRefs } from "../../hooks";
+import {
+  useVirtualFocusDescendant,
+  useVirtualFocusInternalContext,
+} from "../Context";
+
+export interface VirtualFocusItemProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "tabIndex"> {
+  /**
+   * The function that is run when the element is focused
+   * (virtually, not actual focus, eg. set a border around an item)
+   */
+  onActive: () => void;
+  /**
+   * The function that is run when the focused element
+   * is to be selected (eg. do an actual search, change route... etc)
+   */
+  onSelect: () => void;
+  children: React.ReactNode;
+}
+
+/**
+ * Contains an item you want to be iterable via virtual focus.
+ */
+export const VirtualFocusItem = forwardRef<HTMLElement, VirtualFocusItemProps>(
+  ({ children, onActive, onSelect, ...rest }, ref) => {
+    const { virtualFocusIdx, setVirtualFocusIdx, uniqueId } =
+      useVirtualFocusInternalContext();
+    const { register, index } = useVirtualFocusDescendant({
+      handleOnActive: () => {
+        setVirtualFocusIdx(index);
+        onActive();
+      },
+      handleOnSelect: onSelect,
+    });
+
+    const mergedRefs = useMergeRefs(ref, register);
+    return (
+      <Slot
+        ref={mergedRefs}
+        {...rest}
+        id={`virtualfocus-${uniqueId}-${index}`}
+        data-aksel-virtualfocus={virtualFocusIdx === index}
+        tabIndex={-1}
+        onClick={composeEventHandlers(rest.onClick, () => {
+          onSelect();
+        })}
+        onMouseMove={composeEventHandlers(rest.onMouseMove, () => {
+          setVirtualFocusIdx(index);
+          onActive();
+        })}
+      >
+        {children}
+      </Slot>
+    );
+  },
+);