@tamagui/tabs-headless 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/cjs/index.cjs

@@ -3,15 +3,17 @@ 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, {
+  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;
-  },
-  __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
+  value: true
 }), mod);
 var index_exports = {};
 module.exports = __toCommonJS(index_exports);

package/dist/cjs/index.native.js

@@ -5,15 +5,17 @@ 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, {
+  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;
-  },
-  __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
+  value: true
 }), mod);
 var index_exports = {};
 module.exports = __toCommonJS(index_exports);

package/dist/cjs/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","index_exports","module","exports"],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,aAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAP,YAAc,CAAAK,aAAA","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","index_exports","module","exports"],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,aAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAP,YAAc,CAAAK,aAAA","ignoreList":[]}

package/dist/cjs/useTabs.cjs

@@ -2,33 +2,35 @@ 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 __getProtoOf = Object.getPrototypeOf;
+var __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, {
+  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;
-  };
+  }
+  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);
+// 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: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var useTabs_exports = {};
 __export(useTabs_exports, {
   TabsProvider: () => TabsProvider,
@@ -38,110 +40,153 @@ __export(useTabs_exports, {
   useTabsContext: () => useTabsContext
 });
 module.exports = __toCommonJS(useTabs_exports);
-var 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"), 1),
-  import_react = require("react");
+var import_helpers = require("@tamagui/helpers");
+var import_use_controllable_state = require("@tamagui/use-controllable-state");
+var import_use_direction = require("@tamagui/use-direction");
+var React = __toESM(require("react"), 1);
+var import_react = require("react");
 function useTabs(props = {}) {
   const {
-      value: valueProp,
-      onValueChange,
-      defaultValue = "",
-      orientation = "horizontal",
-      dir,
-      activationMode = "automatic",
-      loop = !0
-    } = props,
-    direction = (0, import_use_direction.useDirection)(dir),
-    baseId = (0, import_react.useId)(),
-    [value, setValue] = (0, import_use_controllable_state.useControllableState)({
-      prop: valueProp,
-      onChange: onValueChange,
-      defaultProp: defaultValue
-    }),
-    tabRefs = (0, import_react.useRef)(/* @__PURE__ */new Map()),
-    [tabValues, setTabValues] = (0, import_react.useState)([]),
-    registerTab = (0, import_react.useCallback)((tabValue, element) => {
-      element ? (tabRefs.current.set(tabValue, element), setTabValues(prev => prev.includes(tabValue) ? prev : [...prev, tabValue])) : (tabRefs.current.delete(tabValue), setTabValues(prev => prev.filter(v => v !== tabValue)));
-    }, []),
-    focusTab = (0, import_react.useCallback)(tabValue => {
-      tabRefs.current.get(tabValue)?.focus();
-    }, []),
-    getNextTab = (0, import_react.useCallback)((currentValue, direction2) => {
-      const currentIndex = tabValues.indexOf(currentValue);
-      if (currentIndex === -1) return null;
-      let nextIndex = currentIndex + direction2;
-      if (loop) nextIndex = (nextIndex + tabValues.length) % tabValues.length;else if (nextIndex < 0 || nextIndex >= tabValues.length) return null;
-      return tabValues[nextIndex] ?? null;
-    }, [tabValues, loop]),
-    handleKeyDown = (0, import_react.useCallback)(tabValue => event => {
-      const isHorizontal = orientation === "horizontal",
-        isRtl = direction === "rtl";
-      let nextTab = null;
-      switch (event.key) {
-        case "ArrowRight":
-          isHorizontal && (nextTab = getNextTab(tabValue, isRtl ? -1 : 1));
-          break;
-        case "ArrowLeft":
-          isHorizontal && (nextTab = getNextTab(tabValue, isRtl ? 1 : -1));
-          break;
-        case "ArrowDown":
-          isHorizontal || (nextTab = getNextTab(tabValue, 1));
-          break;
-        case "ArrowUp":
-          isHorizontal || (nextTab = getNextTab(tabValue, -1));
-          break;
-        case "Home":
-          nextTab = tabValues[0] ?? null;
-          break;
-        case "End":
-          nextTab = tabValues[tabValues.length - 1] ?? null;
-          break;
-        case " ":
-        case "Enter":
-          activationMode === "manual" && (setValue(tabValue), event.preventDefault());
-          return;
+    value: valueProp,
+    onValueChange,
+    defaultValue = "",
+    orientation = "horizontal",
+    dir,
+    activationMode = "automatic",
+    loop = true
+  } = props;
+  const direction = (0, import_use_direction.useDirection)(dir);
+  const baseId = (0, import_react.useId)();
+  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+    prop: valueProp,
+    onChange: onValueChange,
+    defaultProp: defaultValue
+  });
+  const tabRefs = (0, import_react.useRef)(/* @__PURE__ */new Map());
+  const [tabValues, setTabValues] = (0, import_react.useState)([]);
+  const registerTab = (0, import_react.useCallback)((tabValue, element) => {
+    if (element) {
+      tabRefs.current.set(tabValue, element);
+      setTabValues(prev => prev.includes(tabValue) ? prev : [...prev, tabValue]);
+    } else {
+      tabRefs.current.delete(tabValue);
+      setTabValues(prev => prev.filter(v => v !== tabValue));
+    }
+  }, []);
+  const focusTab = (0, import_react.useCallback)(tabValue => {
+    const element = tabRefs.current.get(tabValue);
+    element?.focus();
+  }, []);
+  const getNextTab = (0, import_react.useCallback)((currentValue, direction2) => {
+    const currentIndex = tabValues.indexOf(currentValue);
+    if (currentIndex === -1) return null;
+    let nextIndex = currentIndex + direction2;
+    if (loop) {
+      nextIndex = (nextIndex + tabValues.length) % tabValues.length;
+    } else {
+      if (nextIndex < 0 || nextIndex >= tabValues.length) return null;
+    }
+    return tabValues[nextIndex] ?? null;
+  }, [tabValues, loop]);
+  const handleKeyDown = (0, import_react.useCallback)(tabValue => event => {
+    const isHorizontal = orientation === "horizontal";
+    const isRtl = direction === "rtl";
+    let nextTab = null;
+    switch (event.key) {
+      case "ArrowRight":
+        if (isHorizontal) {
+          nextTab = getNextTab(tabValue, isRtl ? -1 : 1);
+        }
+        break;
+      case "ArrowLeft":
+        if (isHorizontal) {
+          nextTab = getNextTab(tabValue, isRtl ? 1 : -1);
+        }
+        break;
+      case "ArrowDown":
+        if (!isHorizontal) {
+          nextTab = getNextTab(tabValue, 1);
+        }
+        break;
+      case "ArrowUp":
+        if (!isHorizontal) {
+          nextTab = getNextTab(tabValue, -1);
+        }
+        break;
+      case "Home":
+        nextTab = tabValues[0] ?? null;
+        break;
+      case "End":
+        nextTab = tabValues[tabValues.length - 1] ?? null;
+        break;
+      case " ":
+      case "Enter":
+        if (activationMode === "manual") {
+          setValue(tabValue);
+          event.preventDefault();
+        }
+        return;
+    }
+    if (nextTab) {
+      event.preventDefault();
+      focusTab(nextTab);
+      if (activationMode === "automatic") {
+        setValue(nextTab);
       }
-      nextTab && (event.preventDefault(), focusTab(nextTab), activationMode === "automatic" && setValue(nextTab));
-    }, [orientation, direction, getNextTab, tabValues, activationMode, setValue, focusTab]),
-    getTabProps = (0, import_react.useCallback)((tabValue, disabled) => {
-      const isSelected = value === tabValue,
-        triggerId = makeTriggerId(baseId, tabValue),
-        contentId = makeContentId(baseId, tabValue);
-      return {
-        role: "tab",
-        id: triggerId,
-        "aria-selected": isSelected,
-        "aria-controls": contentId,
-        "data-state": isSelected ? "active" : "inactive",
-        ...(disabled && {
-          "data-disabled": ""
-        }),
-        disabled,
-        tabIndex: isSelected ? 0 : -1,
-        onKeyDown: disabled ? () => {} : handleKeyDown(tabValue),
-        onClick: event => {
-          !disabled && !isSelected && setValue(tabValue);
-        },
-        onFocus: event => {
-          registerTab(tabValue, event.currentTarget), !disabled && !isSelected && activationMode === "automatic" && setValue(tabValue);
+    }
+  }, [orientation, direction, getNextTab, tabValues, activationMode, setValue, focusTab]);
+  const getTabProps = (0, import_react.useCallback)((tabValue, disabled) => {
+    const isSelected = value === tabValue;
+    const triggerId = makeTriggerId(baseId, tabValue);
+    const contentId = makeContentId(baseId, tabValue);
+    return {
+      role: "tab",
+      id: triggerId,
+      "aria-selected": isSelected,
+      "aria-controls": contentId,
+      "data-state": isSelected ? "active" : "inactive",
+      ...(disabled && {
+        "data-disabled": ""
+      }),
+      disabled,
+      tabIndex: isSelected ? 0 : -1,
+      onKeyDown: disabled ? () => {} : handleKeyDown(tabValue),
+      onClick: event => {
+        if (!disabled && !isSelected) {
+          setValue(tabValue);
         }
-      };
-    }, [value, baseId, handleKeyDown, setValue, activationMode, registerTab]),
-    getContentProps = (0, import_react.useCallback)(tabValue => {
-      const isSelected = value === tabValue,
-        triggerId = makeTriggerId(baseId, tabValue);
-      return {
-        role: "tabpanel",
-        id: makeContentId(baseId, tabValue),
-        "aria-labelledby": triggerId,
-        "data-state": isSelected ? "active" : "inactive",
-        "data-orientation": orientation,
-        hidden: !isSelected,
-        tabIndex: 0
-      };
-    }, [value, baseId, orientation]);
+      },
+      onFocus: event => {
+        registerTab(tabValue, event.currentTarget);
+        if (!disabled && !isSelected && activationMode === "automatic") {
+          setValue(tabValue);
+        }
+      }
+    };
+  }, [value, baseId, handleKeyDown, setValue, activationMode, registerTab]);
+  const getContentProps = (0, import_react.useCallback)(tabValue => {
+    const isSelected = value === tabValue;
+    const triggerId = makeTriggerId(baseId, tabValue);
+    const contentId = makeContentId(baseId, tabValue);
+    return {
+      role: "tabpanel",
+      id: contentId,
+      "aria-labelledby": triggerId,
+      "data-state": isSelected ? "active" : "inactive",
+      "data-orientation": orientation,
+      hidden: !isSelected,
+      tabIndex: 0
+    };
+  }, [value, baseId, orientation]);
+  const contextValue = {
+    baseId,
+    value,
+    setValue,
+    orientation,
+    direction,
+    activationMode,
+    loop
+  };
   return {
     value,
     setValue,
@@ -156,46 +201,40 @@ function useTabs(props = {}) {
     },
     getTabProps,
     getContentProps,
-    contextValue: {
-      baseId,
-      value,
-      setValue,
-      orientation,
-      direction,
-      activationMode,
-      loop
-    }
+    contextValue
   };
 }
-const TabsContext = React.createContext(null),
-  TabsProvider = TabsContext.Provider;
+const TabsContext = React.createContext(null);
+const TabsProvider = TabsContext.Provider;
 function useTabsContext() {
   const context = React.useContext(TabsContext);
-  if (!context) throw new Error("useTabsContext must be used within a TabsProvider");
+  if (!context) {
+    throw new Error("useTabsContext must be used within a TabsProvider");
+  }
   return context;
 }
 function useTab(props) {
   const {
-      value: tabValue,
-      disabled,
-      onPress,
-      onKeyDown,
-      onFocus
-    } = props,
-    context = useTabsContext(),
-    {
-      value,
-      setValue,
-      baseId,
-      activationMode,
-      orientation,
-      direction,
-      loop
-    } = context,
-    isSelected = value === tabValue,
-    triggerId = makeTriggerId(baseId, tabValue),
-    contentId = makeContentId(baseId, tabValue),
-    ref = (0, import_react.useRef)(null);
+    value: tabValue,
+    disabled,
+    onPress,
+    onKeyDown,
+    onFocus
+  } = props;
+  const context = useTabsContext();
+  const {
+    value,
+    setValue,
+    baseId,
+    activationMode,
+    orientation,
+    direction,
+    loop
+  } = context;
+  const isSelected = value === tabValue;
+  const triggerId = makeTriggerId(baseId, tabValue);
+  const contentId = makeContentId(baseId, tabValue);
+  const ref = (0, import_react.useRef)(null);
   return {
     isSelected,
     tabProps: {
@@ -211,31 +250,39 @@ function useTab(props) {
       disabled,
       tabIndex: isSelected ? 0 : -1,
       onKeyDown: (0, import_helpers.composeEventHandlers)(onKeyDown, event => {
-        disabled || [" ", "Enter"].includes(event.key) && (setValue(tabValue), event.preventDefault());
+        if (disabled) return;
+        if ([" ", "Enter"].includes(event.key)) {
+          setValue(tabValue);
+          event.preventDefault();
+        }
       }),
       onPress: (0, import_helpers.composeEventHandlers)(onPress, () => {
-        !disabled && !isSelected && setValue(tabValue);
+        if (!disabled && !isSelected) {
+          setValue(tabValue);
+        }
       }),
       onFocus: (0, import_helpers.composeEventHandlers)(onFocus, () => {
-        !disabled && !isSelected && activationMode === "automatic" && setValue(tabValue);
+        if (!disabled && !isSelected && activationMode === "automatic") {
+          setValue(tabValue);
+        }
       })
     }
   };
 }
 function useTabContent(props) {
   const {
-      value: tabValue,
-      forceMount
-    } = props,
-    context = useTabsContext(),
-    {
-      value,
-      baseId,
-      orientation
-    } = context,
-    isSelected = value === tabValue,
-    triggerId = makeTriggerId(baseId, tabValue),
-    contentId = makeContentId(baseId, tabValue);
+    value: tabValue,
+    forceMount
+  } = props;
+  const context = useTabsContext();
+  const {
+    value,
+    baseId,
+    orientation
+  } = context;
+  const isSelected = value === tabValue;
+  const triggerId = makeTriggerId(baseId, tabValue);
+  const contentId = makeContentId(baseId, tabValue);
   return {
     isSelected,
     shouldMount: forceMount || isSelected,