@octanejs/radix 0.1.31 → 0.1.33

package/dist/cjs/RovingFocusGroup.cjs

@@ -0,0 +1,253 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var RovingFocusGroup_exports = {};
+__export(RovingFocusGroup_exports, {
+  Item: () => Item,
+  Root: () => Root,
+  RovingFocusGroup: () => Root,
+  RovingFocusGroupItem: () => Item,
+  createRovingFocusGroupContext: () => createRovingFocusGroupContext,
+  createRovingFocusGroupScope: () => createRovingFocusGroupScope
+});
+module.exports = __toCommonJS(RovingFocusGroup_exports);
+var import_octane = require("octane");
+var import_collection = require("./collection.cjs");
+var import_compose_event_handlers = require("./compose-event-handlers.cjs");
+var import_compose_refs = require("./compose-refs.cjs");
+var import_context = require("./context.cjs");
+var import_internal = require("./internal.cjs");
+var import_Primitive = require("./Primitive.cjs");
+var import_useControllableState = require("./useControllableState.cjs");
+var import_useId = require("./useId.cjs");
+const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
+const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+const [Collection, useCollection, createCollectionScope] = (0, import_collection.createCollection)("RovingFocusGroup");
+const [createRovingFocusGroupContext, createRovingFocusGroupScope] = (0, import_context.createContextScope)(
+  "RovingFocusGroup",
+  [createCollectionScope]
+);
+const [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext("RovingFocusGroup");
+function Root(props) {
+  return (0, import_octane.createElement)(Collection.Provider, {
+    scope: props?.__scopeRovingFocusGroup,
+    children: (0, import_octane.createElement)(Collection.Slot, {
+      scope: props?.__scopeRovingFocusGroup,
+      children: (0, import_octane.createElement)(RovingFocusGroupImpl, props)
+    })
+  });
+}
+function RovingFocusGroupImpl(props) {
+  const slot = (0, import_internal.S)("RovingFocusGroupImpl");
+  const {
+    __scopeRovingFocusGroup,
+    orientation,
+    loop = false,
+    dir,
+    currentTabStopId: currentTabStopIdProp,
+    defaultCurrentTabStopId,
+    onCurrentTabStopIdChange,
+    onEntryFocus,
+    preventScrollOnEntryFocus = false,
+    ref: forwardedRef,
+    ...groupProps
+  } = props ?? {};
+  const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, (0, import_internal.subSlot)(slot, "refs"));
+  const direction = dir === "rtl" ? "rtl" : "ltr";
+  const [currentTabStopId, setCurrentTabStopId] = (0, import_useControllableState.useControllableState)(
+    {
+      prop: currentTabStopIdProp,
+      defaultProp: defaultCurrentTabStopId ?? null,
+      onChange: onCurrentTabStopIdChange
+    },
+    (0, import_internal.subSlot)(slot, "stop")
+  );
+  const [isTabbingBackOut, setIsTabbingBackOut] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "backout"));
+  const handleEntryFocus = (0, import_octane.useEffectEvent)(onEntryFocus ?? (() => {
+  }), (0, import_internal.subSlot)(slot, "entry"));
+  const getItems = useCollection(__scopeRovingFocusGroup, (0, import_internal.subSlot)(slot, "items"));
+  const isClickFocusRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "clickFocus"));
+  const [focusableItemsCount, setFocusableItemsCount] = (0, import_octane.useState)(0, (0, import_internal.subSlot)(slot, "count"));
+  (0, import_octane.useEffect)(
+    () => {
+      const node = ref.current;
+      if (node) {
+        node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
+        return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
+      }
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "e:entry")
+  );
+  return (0, import_octane.createElement)(RovingFocusProvider, {
+    scope: __scopeRovingFocusGroup,
+    orientation,
+    dir: direction,
+    loop,
+    currentTabStopId,
+    onItemFocus: (0, import_octane.useCallback)(
+      (tabStopId) => setCurrentTabStopId(tabStopId),
+      [setCurrentTabStopId],
+      (0, import_internal.subSlot)(slot, "onFocus")
+    ),
+    onItemShiftTab: (0, import_octane.useCallback)(() => setIsTabbingBackOut(true), [], (0, import_internal.subSlot)(slot, "shiftTab")),
+    onFocusableItemAdd: (0, import_octane.useCallback)(
+      () => setFocusableItemsCount((prev) => prev + 1),
+      [],
+      (0, import_internal.subSlot)(slot, "add")
+    ),
+    onFocusableItemRemove: (0, import_octane.useCallback)(
+      () => setFocusableItemsCount((prev) => prev - 1),
+      [],
+      (0, import_internal.subSlot)(slot, "remove")
+    ),
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+      tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
+      "data-orientation": orientation,
+      ...groupProps,
+      ref: composedRefs,
+      style: { outline: "none", ...props.style },
+      onMouseDown: (0, import_compose_event_handlers.composeEventHandlers)(props.onMouseDown, () => {
+        isClickFocusRef.current = true;
+      }),
+      onFocus: (0, import_compose_event_handlers.composeEventHandlers)(props.onFocus, (event) => {
+        const isKeyboardFocus = !isClickFocusRef.current;
+        if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
+          const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
+          event.currentTarget.dispatchEvent(entryFocusEvent);
+          if (!entryFocusEvent.defaultPrevented) {
+            const items = getItems().filter((item) => item.focusable);
+            const activeItem = items.find((item) => item.active);
+            const currentItem = items.find((item) => item.id === currentTabStopId);
+            const candidateItems = [activeItem, currentItem, ...items].filter(Boolean);
+            const candidateNodes = candidateItems.map((item) => item.ref.current);
+            focusFirst(candidateNodes, preventScrollOnEntryFocus);
+          }
+        }
+        isClickFocusRef.current = false;
+      }),
+      onBlur: (0, import_compose_event_handlers.composeEventHandlers)(props.onBlur, () => setIsTabbingBackOut(false))
+    })
+  });
+}
+function Item(props) {
+  const slot = (0, import_internal.S)("RovingFocusGroupItem");
+  const {
+    __scopeRovingFocusGroup,
+    focusable = true,
+    active = false,
+    tabStopId,
+    children,
+    ...itemProps
+  } = props ?? {};
+  const autoId = (0, import_useId.useId)((0, import_internal.subSlot)(slot, "id"));
+  const id = tabStopId || autoId;
+  const context = useRovingFocusContext("RovingFocusGroupItem", __scopeRovingFocusGroup);
+  const isCurrentTabStop = context.currentTabStopId === id;
+  const getItems = useCollection(__scopeRovingFocusGroup, (0, import_internal.subSlot)(slot, "items"));
+  const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context;
+  (0, import_octane.useEffect)(
+    () => {
+      if (focusable) {
+        onFocusableItemAdd();
+        return () => onFocusableItemRemove();
+      }
+    },
+    [focusable, onFocusableItemAdd, onFocusableItemRemove],
+    (0, import_internal.subSlot)(slot, "e:count")
+  );
+  return (0, import_octane.createElement)(Collection.ItemSlot, {
+    scope: __scopeRovingFocusGroup,
+    id,
+    focusable,
+    active,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.span, {
+      tabIndex: isCurrentTabStop ? 0 : -1,
+      "data-orientation": context.orientation,
+      ...itemProps,
+      onMouseDown: (0, import_compose_event_handlers.composeEventHandlers)(props.onMouseDown, (event) => {
+        if (!focusable) event.preventDefault();
+        else context.onItemFocus(id);
+      }),
+      onFocus: (0, import_compose_event_handlers.composeEventHandlers)(props.onFocus, () => context.onItemFocus(id)),
+      onKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(props.onKeyDown, (event) => {
+        if (event.key === "Tab" && event.shiftKey) {
+          context.onItemShiftTab();
+          return;
+        }
+        if (event.target !== event.currentTarget) return;
+        const focusIntent = getFocusIntent(event, context.orientation, context.dir);
+        if (focusIntent !== void 0) {
+          if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+          event.preventDefault();
+          const items = getItems().filter((item) => item.focusable);
+          let candidateNodes = items.map((item) => item.ref.current);
+          if (focusIntent === "last") candidateNodes.reverse();
+          else if (focusIntent === "prev" || focusIntent === "next") {
+            if (focusIntent === "prev") candidateNodes.reverse();
+            const currentIndex = candidateNodes.indexOf(event.currentTarget);
+            candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
+          }
+          setTimeout(() => focusFirst(candidateNodes));
+        }
+      }),
+      children: typeof children === "function" ? children({ isCurrentTabStop, hasTabStop: currentTabStopId != null }) : children
+    })
+  });
+}
+const MAP_KEY_TO_FOCUS_INTENT = {
+  ArrowLeft: "prev",
+  ArrowUp: "prev",
+  ArrowRight: "next",
+  ArrowDown: "next",
+  PageUp: "first",
+  Home: "first",
+  PageDown: "last",
+  End: "last"
+};
+function getDirectionAwareKey(key, dir) {
+  if (dir !== "rtl") return key;
+  return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
+}
+function getFocusIntent(event, orientation, dir) {
+  const key = getDirectionAwareKey(event.key, dir);
+  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
+  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
+  return MAP_KEY_TO_FOCUS_INTENT[key];
+}
+function focusFirst(candidates, preventScroll = false) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  for (const candidate of candidates) {
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+    candidate.focus({ preventScroll });
+    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+  }
+}
+function wrapArray(array, startIndex) {
+  return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Item,
+  Root,
+  RovingFocusGroup,
+  RovingFocusGroupItem,
+  createRovingFocusGroupContext,
+  createRovingFocusGroupScope
+});