@tamagui/focus-scope 1.116.1 → 1.116.2

package/dist/cjs/FocusScope.js

@@ -0,0 +1,172 @@
+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 FocusScope_exports = {};
+__export(FocusScope_exports, {
+  FocusScope: () => FocusScope,
+  useFocusScope: () => useFocusScope
+});
+module.exports = __toCommonJS(FocusScope_exports);
+var import_compose_refs = require("@tamagui/compose-refs"), import_use_event = require("@tamagui/use-event"), import_start_transition = require("@tamagui/start-transition"), React = __toESM(require("react")), import_jsx_runtime = require("react/jsx-runtime");
+const AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount", AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount", EVENT_OPTIONS = { bubbles: !1, cancelable: !0 }, FocusScope = React.forwardRef(
+  function(props, forwardedRef) {
+    const childProps = useFocusScope(props, forwardedRef);
+    return typeof props.children == "function" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: props.children(childProps) }) : React.cloneElement(React.Children.only(props.children), childProps);
+  }
+);
+function useFocusScope(props, forwardedRef) {
+  const {
+    loop = !1,
+    enabled = !0,
+    trapped = !1,
+    onMountAutoFocus: onMountAutoFocusProp,
+    onUnmountAutoFocus: onUnmountAutoFocusProp,
+    forceUnmount,
+    children,
+    ...scopeProps
+  } = props, [container, setContainer] = React.useState(null), onMountAutoFocus = (0, import_use_event.useEvent)(onMountAutoFocusProp), onUnmountAutoFocus = (0, import_use_event.useEvent)(onUnmountAutoFocusProp), lastFocusedElementRef = React.useRef(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, (node) => {
+    (0, import_start_transition.startTransition)(() => {
+      setContainer(node);
+    });
+  }), focusScope = React.useRef({
+    paused: !1,
+    pause() {
+      this.paused = !0;
+    },
+    resume() {
+      this.paused = !1;
+    }
+  }).current;
+  React.useEffect(() => {
+    if (!enabled || !trapped) return;
+    const controller = new AbortController();
+    function handleFocusIn(event) {
+      if (focusScope.paused || !container) return;
+      const target = event.target;
+      container.contains(target) ? (target?.addEventListener("blur", handleBlur, { signal: controller.signal }), lastFocusedElementRef.current = target) : focus(lastFocusedElementRef.current, { select: !0 });
+    }
+    function handleFocusOut(event) {
+      controller.abort(), !(focusScope.paused || !container) && (container.contains(event.relatedTarget) || focus(lastFocusedElementRef.current, { select: !0 }));
+    }
+    function handleBlur() {
+      lastFocusedElementRef.current = container;
+    }
+    return document.addEventListener("focusin", handleFocusIn), document.addEventListener("focusout", handleFocusOut), () => {
+      controller.abort(), document.removeEventListener("focusin", handleFocusIn), document.removeEventListener("focusout", handleFocusOut);
+    };
+  }, [trapped, forceUnmount, container, focusScope.paused]), React.useEffect(() => {
+    if (!enabled || !container || forceUnmount) return;
+    focusScopesStack.add(focusScope);
+    const previouslyFocusedElement = document.activeElement;
+    if (!container.contains(previouslyFocusedElement)) {
+      const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
+      if (container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus), container.dispatchEvent(mountEvent), !mountEvent.defaultPrevented) {
+        const candidates = removeLinks(getTabbableCandidates(container));
+        focusFirst(candidates, { select: !0 }), document.activeElement === previouslyFocusedElement && focus(container);
+      }
+    }
+    return () => {
+      container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
+      const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
+      container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus), container.dispatchEvent(unmountEvent), unmountEvent.defaultPrevented || focus(previouslyFocusedElement ?? document.body, { select: !0 }), container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus), focusScopesStack.remove(focusScope);
+    };
+  }, [enabled, container, forceUnmount, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (!trapped || !loop || focusScope.paused) return;
+      const isTabKey = event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey, focusedElement = document.activeElement;
+      if (isTabKey && focusedElement) {
+        const container2 = event.currentTarget, [first, last] = getTabbableEdges(container2);
+        first && last ? !event.shiftKey && focusedElement === last ? (event.preventDefault(), loop && focus(first, { select: !0 })) : event.shiftKey && focusedElement === first && (event.preventDefault(), loop && focus(last, { select: !0 })) : focusedElement === container2 && event.preventDefault();
+      }
+    },
+    [loop, trapped, focusScope.paused]
+  );
+  return {
+    tabIndex: -1,
+    ...scopeProps,
+    ref: composedRefs,
+    onKeyDown: handleKeyDown
+  };
+}
+function focusFirst(candidates, { select = !1 } = {}) {
+  const previouslyFocusedElement = document.activeElement;
+  for (const candidate of candidates)
+    if (focus(candidate, { select }), document.activeElement !== previouslyFocusedElement) return;
+}
+function getTabbableEdges(container) {
+  const candidates = getTabbableCandidates(container), first = findVisible(candidates, container), last = findVisible(candidates.reverse(), container);
+  return [first, last];
+}
+function getTabbableCandidates(container) {
+  const nodes = [], walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node) => {
+      const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
+      return node.disabled || node.hidden || isHiddenInput ? NodeFilter.FILTER_SKIP : node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
+  });
+  for (; walker.nextNode(); ) nodes.push(walker.currentNode);
+  return nodes;
+}
+function findVisible(elements, container) {
+  for (const element of elements)
+    if (!isHidden(element, { upTo: container })) return element;
+}
+function isHidden(node, { upTo }) {
+  if (getComputedStyle(node).visibility === "hidden") return !0;
+  for (; node; ) {
+    if (upTo !== void 0 && node === upTo) return !1;
+    if (getComputedStyle(node).display === "none") return !0;
+    node = node.parentElement;
+  }
+  return !1;
+}
+function isSelectableInput(element) {
+  return element instanceof HTMLInputElement && "select" in element;
+}
+function focus(element, { select = !1 } = {}) {
+  if (element?.focus) {
+    const previouslyFocusedElement = document.activeElement;
+    element.focus({ preventScroll: !0 }), element !== previouslyFocusedElement && isSelectableInput(element) && select && element.select();
+  }
+}
+const focusScopesStack = createFocusScopesStack();
+function createFocusScopesStack() {
+  let stack = [];
+  return {
+    add(focusScope) {
+      const activeFocusScope = stack[0];
+      focusScope !== activeFocusScope && activeFocusScope?.pause(), stack = arrayRemove(stack, focusScope), stack.unshift(focusScope);
+    },
+    remove(focusScope) {
+      stack = arrayRemove(stack, focusScope), stack[0]?.resume();
+    }
+  };
+}
+function arrayRemove(array, item) {
+  const updatedArray = [...array], index = updatedArray.indexOf(item);
+  return index !== -1 && updatedArray.splice(index, 1), updatedArray;
+}
+function removeLinks(items) {
+  return items.filter((item) => item.tagName !== "A");
+}
+//# sourceMappingURL=FocusScope.js.map

package/dist/cjs/FocusScopeProps.js

@@ -0,0 +1,14 @@
+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;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var FocusScopeProps_exports = {};
+module.exports = __toCommonJS(FocusScopeProps_exports);
+//# sourceMappingURL=FocusScopeProps.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("./FocusScope"), module.exports);
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/focus-scope",
-  "version": "1.116.1",
+  "version": "1.116.2",
   "sideEffects": true,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -32,12 +32,12 @@
     }
   },
   "dependencies": {
-    "@tamagui/compose-refs": "1.116.1",
-    "@tamagui/start-transition": "1.116.1",
-    "@tamagui/use-event": "1.116.1"
+    "@tamagui/compose-refs": "1.116.2",
+    "@tamagui/start-transition": "1.116.2",
+    "@tamagui/use-event": "1.116.2"
   },
   "devDependencies": {
-    "@tamagui/build": "1.116.1",
+    "@tamagui/build": "1.116.2",
     "react": "^18.2.0 || ^19.0.0"
   },
   "publishConfig": {

package/dist/cjs/FocusScope.native.cjs

@@ -1,38 +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 FocusScope_native_exports = {};
-__export(FocusScope_native_exports, {
-  FocusScope: () => FocusScope
-});
-module.exports = __toCommonJS(FocusScope_native_exports);
-var import_react = __toESM(require("react"));
-const FocusScope = import_react.default.forwardRef((props, _ref) => props.children);

package/dist/cjs/FocusScope.native.cjs.map

@@ -1,6 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/FocusScope.native.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAIX,MAAM,aAAa,aAAAA,QAAM,WAAW,CAAC,OAAwB,SAC3D,MAAM,QACd;",
-  "names": ["React"]
-}