@navikt/ds-react 6.13.0 → 6.14.0

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