@tamagui/tabs 2.7.7 → 3.0.0-beta.1093.1

package/dist/cjs/StyledContext.cjs

@@ -3,31 +3,26 @@ 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
-  });
+	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;
+	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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var StyledContext_exports = {};
 __export(StyledContext_exports, {
-  TabsProvider: () => TabsProvider,
-  useTabsContext: () => useTabsContext
+	TabsProvider: () => TabsProvider,
+	useTabsContext: () => useTabsContext
 });
 module.exports = __toCommonJS(StyledContext_exports);
 var import_core = require("@tamagui/core");
-const {
-  Provider: TabsProvider,
-  useStyledContext: useTabsContext
-} = (0, import_core.createStyledContext)();
+const { Provider: TabsProvider, useStyledContext: useTabsContext } = (0, import_core.createStyledContext)();

package/dist/cjs/StyledContext.native.cjs

@@ -0,0 +1,30 @@
+"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 StyledContext_exports = {};
+__export(StyledContext_exports, {
+	TabsProvider: () => TabsProvider,
+	useTabsContext: () => useTabsContext
+});
+module.exports = __toCommonJS(StyledContext_exports);
+var import_core = require("@tamagui/core");
+var { Provider: TabsProvider, useStyledContext: useTabsContext } = (0, import_core.createStyledContext)();

package/dist/cjs/StyledContext.native.js

@@ -5,32 +5,28 @@ 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
-  });
+	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;
+	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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var StyledContext_exports = {};
 __export(StyledContext_exports, {
-  TabsProvider: () => TabsProvider,
-  useTabsContext: () => useTabsContext
+	TabsProvider: () => TabsProvider,
+	useTabsContext: () => useTabsContext
 });
 module.exports = __toCommonJS(StyledContext_exports);
 var import_core = require("@tamagui/core");
-var {
-  Provider: TabsProvider,
-  useStyledContext: useTabsContext
-} = (0, import_core.createStyledContext)();
+var { Provider: TabsProvider, useStyledContext: useTabsContext } = (0, import_core.createStyledContext)();
+
 //# sourceMappingURL=StyledContext.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","StyledContext_exports","__export","TabsProvider","useTabsContext","module","exports","import_core","require"],"sources":["../../src/StyledContext.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,qBAAA;AAAAC,QAAA,CAAAD,qBAAA;EAAAE,YAAA,EAAAA,CAAA,KAAAA,YAAA;EAAAC,cAAA,EAAAA,CAAA,KAAAA;AAAA;AACAC,MAAA,CAAAC,OAAA,GAAAV,YAAoC,CAAAK,qBAAA;AAgB7B,IAAAM,WAAQ,GAAUC,OAAA,gBAAc","ignoreList":[]}
+{"version":3,"file":"StyledContext.native.js","names":[],"sources":["cjs/StyledContext.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar StyledContext_exports = {};\n__export(StyledContext_exports, {\n  TabsProvider: () => TabsProvider,\n  useTabsContext: () => useTabsContext\n});\nmodule.exports = __toCommonJS(StyledContext_exports);\nvar import_core = require(\"@tamagui/core\");\nvar { Provider: TabsProvider, useStyledContext: useTabsContext } = (0, import_core.createStyledContext)();\n//# sourceMappingURL=StyledContext.js.map\n"],"mappings":";;;AACA,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,YAAY,QAAQ,QAAQ;CAC9B,KAAK,IAAI,QAAQ,KACf,UAAU,QAAQ,MAAM;EAAE,KAAK,IAAI;EAAO,YAAY;CAAK,CAAC;AAChE;AACA,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,wBAAwB,CAAC;AAC7B,SAAS,uBAAuB;CAC9B,oBAAoB;CACpB,sBAAsB;AACxB,CAAC;AACD,OAAO,UAAU,aAAa,qBAAqB;AACnD,IAAI,cAAc,QAAQ,eAAe;AACzC,IAAI,EAAE,UAAU,cAAc,kBAAkB,oBAAoB,GAAG,YAAY,oBAAmB,CAAE"}

package/dist/cjs/Tabs.cjs

@@ -1,83 +1,245 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+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: true
-  });
+	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;
+	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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Tabs_exports = {};
 __export(Tabs_exports, {
-  DefaultTabsContentFrame: () => DefaultTabsContentFrame,
-  DefaultTabsFrame: () => DefaultTabsFrame,
-  DefaultTabsTabFrame: () => DefaultTabsTabFrame
+	Tabs: () => Tabs2,
+	TabsContent: () => TabsContent,
+	TabsContentFrame: () => TabsContentFrame,
+	TabsFrame: () => TabsFrame,
+	TabsList: () => TabsList,
+	TabsListFrame: () => TabsListFrame,
+	TabsTab: () => TabsTab,
+	TabsTabFrame: () => TabsTabFrame
 });
 module.exports = __toCommonJS(Tabs_exports);
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_constants = require("@tamagui/constants");
 var import_core = require("@tamagui/core");
-var import_get_button_sized = require("@tamagui/get-button-sized");
-var import_stacks = require("@tamagui/stacks");
-const TABS_NAME = "Tabs";
-const DefaultTabsFrame = (0, import_core.styled)(import_stacks.SizableStack, {
-  name: TABS_NAME
+var import_helpers = require("@tamagui/helpers");
+var import_roving_focus = require("@tamagui/roving-focus");
+var import_size = require("@tamagui/size");
+var import_tabs_headless = require("@tamagui/tabs-headless");
+var import_web = require("@tamagui/web");
+var React = __toESM(require("react"), 1);
+var import_StyledContext = require("./StyledContext.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const TABS_CONTEXT = "TabsContext";
+const TabsFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "Tabs",
+	context: import_size.SizeContext
 });
-const TRIGGER_NAME = "TabsTrigger";
-const DefaultTabsTabFrame = (0, import_core.styled)(import_core.View, {
-  name: TRIGGER_NAME,
-  role: "tab",
-  variants: {
-    size: {
-      "...size": import_get_button_sized.getButtonSized
-    },
-    disabled: {
-      true: {
-        pointerEvents: "none"
-      }
-    },
-    unstyled: {
-      false: {
-        borderWidth: 0,
-        backgroundColor: "$background",
-        userSelect: "none",
-        justifyContent: "center",
-        alignItems: "center",
-        flexWrap: "nowrap",
-        flexDirection: "row",
-        cursor: "pointer",
-        pressStyle: {
-          backgroundColor: "$backgroundPress"
-        },
-        focusVisibleStyle: {
-          outlineColor: "$outlineColor",
-          outlineWidth: 2,
-          outlineStyle: "solid",
-          zIndex: 10
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
-}, {
-  accept: {
-    activeStyle: "style"
-  }
+const TabsListFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "TabsList",
+	context: import_size.SizeContext,
+	role: "tablist"
+});
+const TabsTabFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "TabsTrigger",
+	context: import_size.SizeContext,
+	role: "tab",
+	variants: { disabled: { true: { pointerEvents: "none" } } }
+});
+const TabsContentFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "TabsContent",
+	context: import_size.SizeContext
+});
+const TabsListDisabledContext = React.createContext(false);
+const TabsList = (0, import_core.createStyledHOC)(TabsListFrame, function TabsList2(props, forwardedRef) {
+	const { __scopeTabs, loop = true, disabled = false, children, ...listProps } = props;
+	const context = (0, import_StyledContext.useTabsContext)(__scopeTabs);
+	const { listProps: headlessListProps } = (0, import_tabs_headless.useTabsList)({
+		orientation: context.orientation,
+		disabled
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsListDisabledContext.Provider, {
+		value: disabled,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {
+			__scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,
+			orientation: context.orientation,
+			dir: context.dir,
+			loop,
+			asChild: true,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsListFrame, {
+				...headlessListProps,
+				flexDirection: context.orientation === "vertical" ? "column" : "row",
+				ref: forwardedRef,
+				...listProps,
+				children
+			})
+		})
+	});
+});
+const TabsTab = (0, import_core.createStyledHOC)(TabsTabFrame, function TabsTab2(props, forwardedRef) {
+	const { __scopeTabs, value, disabled: disabledProp, onInteraction, activeStyle, activeTheme, onLayout, onMouseEnter, onMouseLeave, onPress, onKeyDown, onFocus, onBlur, ...triggerProps } = props;
+	const context = (0, import_StyledContext.useTabsContext)(__scopeTabs);
+	const listDisabled = React.useContext(TabsListDisabledContext);
+	const disabled = (disabledProp ?? listDisabled) === true;
+	const { isSelected, tabProps } = (0, import_tabs_headless.useTab)({
+		baseId: context.baseId,
+		value,
+		selectedValue: context.value,
+		disabled,
+		activationMode: context.activationMode,
+		onChange: context.onChange
+	});
+	const { onPress: activateOnPress, onKeyDown: activateOnKeyDown, onFocus: activateOnFocus, ...tabA11yProps } = tabProps;
+	const [layout, setLayout] = React.useState(null);
+	const triggerRef = React.useRef(null);
+	const emitInteraction = (0, import_web.useEvent)((type, layout2) => {
+		onInteraction?.(type, layout2);
+	});
+	React.useEffect(() => {
+		context.registerTrigger();
+		return () => context.unregisterTrigger();
+	}, []);
+	React.useEffect(() => {
+		if (!triggerRef.current || !import_constants.isWeb) return;
+		const element = triggerRef.current;
+		function updateTriggerSize() {
+			const next = {
+				width: element.offsetWidth,
+				height: element.offsetHeight,
+				x: element.offsetLeft,
+				y: element.offsetTop
+			};
+			setLayout((previous) => previous && previous.width === next.width && previous.height === next.height && previous.x === next.x && previous.y === next.y ? previous : next);
+		}
+		updateTriggerSize();
+		const observer = new ResizeObserver(updateTriggerSize);
+		observer.observe(element);
+		const offsetParent = element.offsetParent;
+		if (offsetParent) {
+			observer.observe(offsetParent);
+		}
+		return () => observer.disconnect();
+	}, [context.triggersCount]);
+	React.useEffect(() => {
+		if (isSelected && layout) {
+			emitInteraction("select", layout);
+		}
+	}, [
+		emitInteraction,
+		isSelected,
+		layout
+	]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
+		__scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,
+		asChild: true,
+		tabIndex: disabled ? -1 : 0,
+		active: isSelected,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsTabFrame, {
+			onLayout: import_constants.isWeb ? onLayout : (0, import_helpers.composeEventHandlers)(onLayout, (event) => {
+				setLayout(event.nativeEvent.layout);
+			}),
+			onMouseEnter: (0, import_helpers.composeEventHandlers)(onMouseEnter, () => {
+				if (layout) {
+					emitInteraction("hover", layout);
+				}
+			}),
+			onMouseLeave: (0, import_helpers.composeEventHandlers)(onMouseLeave, () => {
+				emitInteraction("hover", null);
+			}),
+			...tabA11yProps,
+			theme: isSelected ? activeTheme ?? null : null,
+			size: context.size,
+			...triggerProps,
+			style: [triggerProps.style, isSelected && activeStyle],
+			ref: (0, import_compose_refs.composeRefs)(forwardedRef, triggerRef),
+			onPress: (0, import_helpers.composeEventHandlers)(onPress ?? void 0, activateOnPress),
+			...import_constants.isWeb && {
+				onKeyDown: (0, import_helpers.composeEventHandlers)(onKeyDown, activateOnKeyDown),
+				onFocus: (0, import_helpers.composeEventHandlers)(onFocus, (0, import_helpers.composeEventHandlers)(() => {
+					if (layout) {
+						emitInteraction("focus", layout);
+					}
+				}, activateOnFocus)),
+				onBlur: (0, import_helpers.composeEventHandlers)(onBlur, () => {
+					emitInteraction("focus", null);
+				})
+			}
+		})
+	});
+});
+const TabsContent = (0, import_core.createStyledHOC)(TabsContentFrame, function TabsContent2(props, forwardedRef) {
+	const { __scopeTabs, value, forceMount, children, ...contentProps } = props;
+	const context = (0, import_StyledContext.useTabsContext)(__scopeTabs);
+	const { shouldMount, contentProps: headlessContentProps } = (0, import_tabs_headless.useTabContent)({
+		baseId: context.baseId,
+		value,
+		selectedValue: context.value,
+		orientation: context.orientation,
+		forceMount
+	});
+	if (!shouldMount) {
+		return null;
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContentFrame, {
+		...headlessContentProps,
+		...contentProps,
+		ref: forwardedRef,
+		children
+	}, value);
+});
+const TabsComponent = (0, import_core.createStyledHOC)(TabsFrame, function Tabs(props, forwardedRef) {
+	const { __scopeTabs, value: valueProp, onValueChange, defaultValue, orientation = "horizontal", dir, activationMode = "automatic", size = true, ...tabsProps } = props;
+	const { value, setValue, baseId, direction, triggersCount, registerTrigger, unregisterTrigger, tabsProps: headlessTabsProps } = (0, import_tabs_headless.useTabs)({
+		value: valueProp,
+		onValueChange,
+		defaultValue,
+		orientation,
+		dir,
+		activationMode
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_size.SizeContext.Provider, {
+		size,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StyledContext.TabsProvider, {
+			scope: __scopeTabs,
+			baseId,
+			value,
+			onChange: setValue,
+			orientation,
+			dir: direction,
+			activationMode,
+			size,
+			registerTrigger,
+			triggersCount,
+			unregisterTrigger,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsFrame, {
+				direction,
+				...headlessTabsProps,
+				...tabsProps,
+				ref: forwardedRef
+			})
+		})
+	});
+});
+const Tabs2 = (0, import_helpers.withStaticProperties)(TabsComponent, {
+	Frame: TabsFrame,
+	List: TabsList,
+	Tab: TabsTab,
+	Content: TabsContent
 });
-const CONTENT_NAME = "TabsContent";
-const DefaultTabsContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
-  name: CONTENT_NAME
-});