@tamagui/roving-focus 1.116.1 → 1.116.3

package/dist/cjs/RovingFocusGroup.js

@@ -0,0 +1,210 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
+  mod
+)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var RovingFocusGroup_exports = {};
+__export(RovingFocusGroup_exports, {
+  RovingFocusGroup: () => RovingFocusGroup
+});
+module.exports = __toCommonJS(RovingFocusGroup_exports);
+var import_collection = require("@tamagui/collection"), import_compose_refs = require("@tamagui/compose-refs"), import_constants = require("@tamagui/constants"), import_core = require("@tamagui/core"), import_helpers = require("@tamagui/helpers"), import_use_controllable_state = require("@tamagui/use-controllable-state"), import_use_direction = require("@tamagui/use-direction"), React = __toESM(require("react")), import_jsx_runtime = require("react/jsx-runtime");
+const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus", EVENT_OPTIONS = { bubbles: !1, cancelable: !0 }, RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
+  const {
+    __scopeRovingFocusGroup,
+    orientation,
+    loop = !1,
+    dir,
+    currentTabStopId: currentTabStopIdProp,
+    defaultCurrentTabStopId,
+    onCurrentTabStopIdChange,
+    onEntryFocus,
+    ...groupProps
+  } = props, ref = React.useRef(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref), direction = (0, import_use_direction.useDirection)(dir), [currentTabStopId = null, setCurrentTabStopId] = (0, import_use_controllable_state.useControllableState)({
+    prop: currentTabStopIdProp,
+    defaultProp: defaultCurrentTabStopId ?? null,
+    onChange: onCurrentTabStopIdChange
+  }), [isTabbingBackOut, setIsTabbingBackOut] = React.useState(!1), handleEntryFocus = (0, import_core.useEvent)(onEntryFocus), getItems = useCollection(__scopeRovingFocusGroup || ROVING_FOCUS_GROUP_CONTEXT), isClickFocusRef = React.useRef(!1), [focusableItemsCount, setFocusableItemsCount] = React.useState(0);
+  return React.useEffect(() => {
+    const node = ref.current;
+    if (node)
+      return node.addEventListener(ENTRY_FOCUS, handleEntryFocus), () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
+  }, [handleEntryFocus]), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    RovingFocusProvider,
+    {
+      scope: __scopeRovingFocusGroup,
+      orientation,
+      dir: direction,
+      loop,
+      currentTabStopId,
+      onItemFocus: React.useCallback(
+        (tabStopId) => setCurrentTabStopId(tabStopId),
+        [setCurrentTabStopId]
+      ),
+      onItemShiftTab: React.useCallback(() => setIsTabbingBackOut(!0), []),
+      onFocusableItemAdd: React.useCallback(
+        () => setFocusableItemsCount((prevCount) => prevCount + 1),
+        []
+      ),
+      onFocusableItemRemove: React.useCallback(
+        () => setFocusableItemsCount((prevCount) => prevCount - 1),
+        []
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_core.Stack,
+        {
+          tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
+          "data-orientation": orientation,
+          ...groupProps,
+          ref: composedRefs,
+          style: [{ outline: "none" }, props.style],
+          onMouseDown: (0, import_helpers.composeEventHandlers)(props.onMouseDown, () => {
+            isClickFocusRef.current = !0;
+          }),
+          onFocus: (0, import_helpers.composeEventHandlers)(props.onFocus, (event) => {
+            const isKeyboardFocus = !isClickFocusRef.current;
+            if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
+              const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
+              if (event.currentTarget.dispatchEvent(entryFocusEvent), !entryFocusEvent.defaultPrevented) {
+                const items = getItems().filter((item) => item.focusable), activeItem = items.find((item) => item.active), currentItem = items.find((item) => item.id === currentTabStopId), candidateNodes = [activeItem, currentItem, ...items].filter(
+                  Boolean
+                ).map((item) => item.ref.current);
+                focusFirst(candidateNodes);
+              }
+            }
+            isClickFocusRef.current = !1;
+          }),
+          onBlur: (0, import_helpers.composeEventHandlers)(
+            props.onBlur,
+            () => setIsTabbingBackOut(!1)
+          )
+        }
+      )
+    }
+  );
+}), ITEM_NAME = "RovingFocusGroupItem", RovingFocusGroupItem = React.forwardRef((props, forwardedRef) => {
+  const {
+    __scopeRovingFocusGroup,
+    focusable = !0,
+    active = !1,
+    tabStopId,
+    ...itemProps
+  } = props, autoId = React.useId(), id = tabStopId || autoId, context = useRovingFocusContext(__scopeRovingFocusGroup), isCurrentTabStop = context.currentTabStopId === id, getItems = useCollection(__scopeRovingFocusGroup || ROVING_FOCUS_GROUP_CONTEXT), { onFocusableItemAdd, onFocusableItemRemove } = context;
+  return React.useEffect(() => {
+    if (focusable)
+      return onFocusableItemAdd(), () => onFocusableItemRemove();
+  }, [focusable, onFocusableItemAdd, onFocusableItemRemove]), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Collection.ItemSlot,
+    {
+      __scopeCollection: __scopeRovingFocusGroup || ROVING_FOCUS_GROUP_CONTEXT,
+      id,
+      focusable,
+      active,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_core.Stack,
+        {
+          tabIndex: isCurrentTabStop ? 0 : -1,
+          "data-orientation": context.orientation,
+          ...itemProps,
+          ref: forwardedRef,
+          onMouseDown: (0, import_helpers.composeEventHandlers)(props.onMouseDown, (event) => {
+            focusable ? context.onItemFocus(id) : event.preventDefault();
+          }),
+          onFocus: (0, import_helpers.composeEventHandlers)(props.onFocus, () => context.onItemFocus(id)),
+          ...import_constants.isWeb && {
+            onKeyDown: (0, import_helpers.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) {
+                  event.preventDefault();
+                  let candidateNodes = getItems().filter((item) => item.focusable).map((item) => item.ref.current);
+                  if (focusIntent === "last") candidateNodes.reverse();
+                  else if (focusIntent === "prev" || focusIntent === "next") {
+                    focusIntent === "prev" && candidateNodes.reverse();
+                    const currentIndex = candidateNodes.indexOf(event.currentTarget);
+                    candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
+                  }
+                  setTimeout(() => focusFirst(candidateNodes));
+                }
+              }
+            )
+          }
+        }
+      )
+    }
+  );
+});
+RovingFocusGroupItem.displayName = ITEM_NAME;
+const GROUP_NAME = "RovingFocusGroup", [Collection, useCollection] = (0, import_collection.createCollection)(
+  GROUP_NAME
+), { Provider: RovingFocusProvider, useStyledContext: useRovingFocusContext } = (0, import_core.createStyledContext)(), ROVING_FOCUS_GROUP_CONTEXT = "RovingFocusGroupContext", RovingFocusGroup = (0, import_helpers.withStaticProperties)(
+  React.forwardRef(
+    (props, forwardedRef) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Collection.Provider,
+      {
+        __scopeCollection: props.__scopeRovingFocusGroup || ROVING_FOCUS_GROUP_CONTEXT,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Collection.Slot,
+          {
+            __scopeCollection: props.__scopeRovingFocusGroup || ROVING_FOCUS_GROUP_CONTEXT,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RovingFocusGroupImpl, { ...props, ref: forwardedRef })
+          }
+        )
+      }
+    )
+  ),
+  {
+    Item: RovingFocusGroupItem
+  }
+);
+RovingFocusGroup.displayName = GROUP_NAME;
+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) {
+  return dir !== "rtl" ? key : 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)) && !(orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)))
+    return MAP_KEY_TO_FOCUS_INTENT[key];
+}
+function focusFirst(candidates) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  for (const candidate of candidates)
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT || (candidate.focus(), document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT)) return;
+}
+function wrapArray(array, startIndex) {
+  return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+//# sourceMappingURL=RovingFocusGroup.js.map

package/dist/cjs/index.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+}, __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var src_exports = {};
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("./RovingFocusGroup"), module.exports);
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/roving-focus",
-  "version": "1.116.1",
+  "version": "1.116.3",
   "sideEffects": [
     "*.css"
   ],
@@ -34,18 +34,18 @@
     }
   },
   "dependencies": {
-    "@tamagui/collection": "1.116.1",
-    "@tamagui/compose-refs": "1.116.1",
-    "@tamagui/constants": "1.116.1",
-    "@tamagui/core": "1.116.1",
-    "@tamagui/create-context": "1.116.1",
-    "@tamagui/helpers": "1.116.1",
-    "@tamagui/use-controllable-state": "1.116.1",
-    "@tamagui/use-direction": "1.116.1",
-    "@tamagui/use-event": "1.116.1"
+    "@tamagui/collection": "1.116.3",
+    "@tamagui/compose-refs": "1.116.3",
+    "@tamagui/constants": "1.116.3",
+    "@tamagui/core": "1.116.3",
+    "@tamagui/create-context": "1.116.3",
+    "@tamagui/helpers": "1.116.3",
+    "@tamagui/use-controllable-state": "1.116.3",
+    "@tamagui/use-direction": "1.116.3",
+    "@tamagui/use-event": "1.116.3"
   },
   "devDependencies": {
-    "@tamagui/build": "1.116.1",
+    "@tamagui/build": "1.116.3",
     "react": "^18.2.0 || ^19.0.0"
   },
   "publishConfig": {

package/dist/cjs/RovingFocusGroup.native.cjs

@@ -1,62 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-    return to;
-  };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
-var RovingFocusGroup_native_exports = {};
-__export(RovingFocusGroup_native_exports, {
-  RovingFocusGroup: () => RovingFocusGroup,
-  createRovingFocusGroupScope: () => createRovingFocusGroupScope
-});
-module.exports = __toCommonJS(RovingFocusGroup_native_exports);
-var import_core = require("@tamagui/core"),
-  import_helpers = require("@tamagui/helpers"),
-  import_react = __toESM(require("react")),
-  import_jsx_runtime = require("react/jsx-runtime");
-const ITEM_NAME = "RovingFocusGroupItem",
-  RovingFocusGroupItem = import_react.default.forwardRef(({
-    children,
-    ...props
-  }, _ref) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Stack, {
-    ...props,
-    children
-  }));
-RovingFocusGroupItem.displayName = ITEM_NAME;
-const GROUP_NAME = "RovingFocusGroup",
-  RovingFocusGroup = (0, import_helpers.withStaticProperties)(import_react.default.forwardRef(({
-    children,
-    ...props
-  }, _ref) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Stack, {
-    ...props,
-    children
-  })), {
-    Item: RovingFocusGroupItem
-  });
-RovingFocusGroup.displayName = GROUP_NAME;
-const createRovingFocusGroupScope = () => () => ({});

package/dist/cjs/RovingFocusGroup.native.cjs.map

@@ -1,6 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/RovingFocusGroup.native.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAsB,0BACtB,iBAAqC,6BACrC,eAAkB,2BASd;AAHJ,MAAM,YAAY,wBACZ,uBAAuB,aAAAA,QAAM;AAAA,EACjC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAyB,SAC7C,4CAAC,qBAAO,GAAG,OAAQ,UAAS;AAEhC;AACA,qBAAqB,cAAc;AACnC,MAAM,aAAa,oBAEb,uBAAmB;AAAA,EACvB,aAAAA,QAAM,WAAW,CAAC,EAAE,UAAU,GAAG,MAAM,GAA0B,SAC/D,4CAAC,qBAAO,GAAG,OAAQ,UAAS,CAC7B;AAAA,EACD;AAAA,IACE,MAAM;AAAA,EACR;AACF;AAEA,iBAAiB,cAAc;AAE/B,MAAM,8BAA8B,MAAM,OAAO,CAAC;",
-  "names": ["React"]
-}