@navikt/ds-react 6.12.0 → 6.14.0

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/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>
+    );
+  },
+);