@tamagui/tabs 3.0.0-beta.924.1 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/cjs/Tabs.cjs +28 -35
  2. package/dist/cjs/Tabs.native.cjs +28 -35
  3. package/dist/cjs/Tabs.native.js +28 -35
  4. package/dist/cjs/Tabs.native.js.map +1 -1
  5. package/dist/esm/Tabs.mjs +28 -35
  6. package/dist/esm/Tabs.mjs.map +1 -1
  7. package/dist/esm/Tabs.native.js +28 -35
  8. package/dist/esm/Tabs.native.js.map +1 -1
  9. package/dist/jsx/Tabs.mjs +28 -35
  10. package/dist/jsx/Tabs.mjs.map +1 -1
  11. package/dist/jsx/Tabs.native.cjs +28 -35
  12. package/dist/jsx/Tabs.native.js +28 -35
  13. package/dist/jsx/Tabs.native.js.map +1 -1
  14. package/package.json +15 -12
  15. package/src/StyledContext.tsx +0 -2
  16. package/src/Tabs.tsx +41 -35
  17. package/types/StyledContext.d.ts +0 -2
  18. package/types/StyledContext.d.ts.map +1 -1
  19. package/types/Tabs.d.ts +56 -226
  20. package/types/Tabs.d.ts.map +1 -1
package/dist/cjs/Tabs.cjs CHANGED
@@ -39,34 +39,26 @@ module.exports = __toCommonJS(Tabs_exports);
39
39
  var import_compose_refs = require("@tamagui/compose-refs");
40
40
  var import_constants = require("@tamagui/constants");
41
41
  var import_core = require("@tamagui/core");
42
+ var import_group = require("@tamagui/group");
42
43
  var import_helpers = require("@tamagui/helpers");
43
44
  var import_roving_focus = require("@tamagui/roving-focus");
44
- var import_size = require("@tamagui/size");
45
45
  var import_tabs_headless = require("@tamagui/tabs-headless");
46
46
  var import_web = require("@tamagui/web");
47
47
  var React = __toESM(require("react"), 1);
48
48
  var import_StyledContext = require("./StyledContext.cjs");
49
49
  var import_jsx_runtime = require("react/jsx-runtime");
50
50
  const TABS_CONTEXT = "TabsContext";
51
- const TabsFrame = (0, import_core.styled)(import_core.View, {
52
- displayName: "Tabs",
53
- context: import_size.SizeContext
54
- });
55
- const TabsListFrame = (0, import_core.styled)(import_core.View, {
51
+ const TabsFrame = (0, import_core.styled)(import_core.View, { displayName: "Tabs" });
52
+ const TabsListFrame = (0, import_core.styled)(import_group.Group, {
56
53
  displayName: "TabsList",
57
- context: import_size.SizeContext,
58
54
  role: "tablist"
59
55
  });
60
56
  const TabsTabFrame = (0, import_core.styled)(import_core.View, {
61
57
  displayName: "TabsTrigger",
62
- context: import_size.SizeContext,
63
58
  role: "tab",
64
59
  variants: { disabled: { true: { pointerEvents: "none" } } }
65
60
  });
66
- const TabsContentFrame = (0, import_core.styled)(import_core.View, {
67
- displayName: "TabsContent",
68
- context: import_size.SizeContext
69
- });
61
+ const TabsContentFrame = (0, import_core.styled)(import_core.View, { displayName: "TabsContent" });
70
62
  const TabsListDisabledContext = React.createContext(false);
71
63
  const TabsList = (0, import_core.createStyledHOC)(TabsListFrame, function TabsList2(props, forwardedRef) {
72
64
  const { __scopeTabs, loop = true, disabled = false, children, ...listProps } = props;
@@ -85,7 +77,7 @@ const TabsList = (0, import_core.createStyledHOC)(TabsListFrame, function TabsLi
85
77
  asChild: true,
86
78
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsListFrame, {
87
79
  ...headlessListProps,
88
- flexDirection: context.orientation === "vertical" ? "column" : "row",
80
+ orientation: context.orientation,
89
81
  ref: forwardedRef,
90
82
  ...listProps,
91
83
  children
@@ -98,6 +90,7 @@ const TabsTab = (0, import_core.createStyledHOC)(TabsTabFrame, function TabsTab2
98
90
  const context = (0, import_StyledContext.useTabsContext)(__scopeTabs);
99
91
  const listDisabled = React.useContext(TabsListDisabledContext);
100
92
  const disabled = (disabledProp ?? listDisabled) === true;
93
+ const groupItemProps = (0, import_group.useGroupItem)({ disabled });
101
94
  const { isSelected, tabProps } = (0, import_tabs_headless.useTab)({
102
95
  baseId: context.baseId,
103
96
  value,
@@ -131,6 +124,10 @@ const TabsTab = (0, import_core.createStyledHOC)(TabsTabFrame, function TabsTab2
131
124
  updateTriggerSize();
132
125
  const observer = new ResizeObserver(updateTriggerSize);
133
126
  observer.observe(element);
127
+ const offsetParent = element.offsetParent;
128
+ if (offsetParent) {
129
+ observer.observe(offsetParent);
130
+ }
134
131
  return () => observer.disconnect();
135
132
  }, [context.triggersCount]);
136
133
  React.useEffect(() => {
@@ -161,7 +158,7 @@ const TabsTab = (0, import_core.createStyledHOC)(TabsTabFrame, function TabsTab2
161
158
  }),
162
159
  ...tabA11yProps,
163
160
  theme: isSelected ? activeTheme ?? null : null,
164
- size: context.size,
161
+ ...groupItemProps,
165
162
  ...triggerProps,
166
163
  style: [triggerProps.style, isSelected && activeStyle],
167
164
  ref: (0, import_compose_refs.composeRefs)(forwardedRef, triggerRef),
@@ -201,7 +198,7 @@ const TabsContent = (0, import_core.createStyledHOC)(TabsContentFrame, function
201
198
  }, value);
202
199
  });
203
200
  const TabsComponent = (0, import_core.createStyledHOC)(TabsFrame, function Tabs(props, forwardedRef) {
204
- const { __scopeTabs, value: valueProp, onValueChange, defaultValue, orientation = "horizontal", dir, activationMode = "automatic", size = true, ...tabsProps } = props;
201
+ const { __scopeTabs, value: valueProp, onValueChange, defaultValue, orientation = "horizontal", dir, activationMode = "automatic", ...tabsProps } = props;
205
202
  const { value, setValue, baseId, direction, triggersCount, registerTrigger, unregisterTrigger, tabsProps: headlessTabsProps } = (0, import_tabs_headless.useTabs)({
206
203
  value: valueProp,
207
204
  onValueChange,
@@ -210,26 +207,22 @@ const TabsComponent = (0, import_core.createStyledHOC)(TabsFrame, function Tabs(
210
207
  dir,
211
208
  activationMode
212
209
  });
213
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_size.SizeContext.Provider, {
214
- size,
215
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StyledContext.TabsProvider, {
216
- scope: __scopeTabs,
217
- baseId,
218
- value,
219
- onChange: setValue,
220
- orientation,
221
- dir: direction,
222
- activationMode,
223
- size,
224
- registerTrigger,
225
- triggersCount,
226
- unregisterTrigger,
227
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsFrame, {
228
- direction,
229
- ...headlessTabsProps,
230
- ...tabsProps,
231
- ref: forwardedRef
232
- })
210
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StyledContext.TabsProvider, {
211
+ scope: __scopeTabs,
212
+ baseId,
213
+ value,
214
+ onChange: setValue,
215
+ orientation,
216
+ dir: direction,
217
+ activationMode,
218
+ registerTrigger,
219
+ triggersCount,
220
+ unregisterTrigger,
221
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsFrame, {
222
+ direction,
223
+ ...headlessTabsProps,
224
+ ...tabsProps,
225
+ ref: forwardedRef
233
226
  })
234
227
  });
235
228
  });
package/dist/cjs/Tabs.native.cjs CHANGED
@@ -42,33 +42,25 @@ var import_jsx_runtime = require("react/jsx-runtime");
42
42
  var import_compose_refs = require("@tamagui/compose-refs");
43
43
  var import_constants = require("@tamagui/constants");
44
44
  var import_core = require("@tamagui/core");
45
+ var import_group = require("@tamagui/group");
45
46
  var import_helpers = require("@tamagui/helpers");
46
47
  var import_roving_focus = require("@tamagui/roving-focus");
47
- var import_size = require("@tamagui/size");
48
48
  var import_tabs_headless = require("@tamagui/tabs-headless");
49
49
  var import_web = require("@tamagui/web");
50
50
  var React = __toESM(require("react"), 1);
51
51
  var import_StyledContext = require("./StyledContext.native.js");
52
52
  var TABS_CONTEXT = "TabsContext";
53
- var TabsFrame = (0, import_core.styled)(import_core.View, {
54
- displayName: "Tabs",
55
- context: import_size.SizeContext
56
- });
57
- var TabsListFrame = (0, import_core.styled)(import_core.View, {
53
+ var TabsFrame = (0, import_core.styled)(import_core.View, { displayName: "Tabs" });
54
+ var TabsListFrame = (0, import_core.styled)(import_group.Group, {
58
55
  displayName: "TabsList",
59
- context: import_size.SizeContext,
60
56
  role: "tablist"
61
57
  });
62
58
  var TabsTabFrame = (0, import_core.styled)(import_core.View, {
63
59
  displayName: "TabsTrigger",
64
- context: import_size.SizeContext,
65
60
  role: "tab",
66
61
  variants: { disabled: { true: { pointerEvents: "none" } } }
67
62
  });
68
- var TabsContentFrame = (0, import_core.styled)(import_core.View, {
69
- displayName: "TabsContent",
70
- context: import_size.SizeContext
71
- });
63
+ var TabsContentFrame = (0, import_core.styled)(import_core.View, { displayName: "TabsContent" });
72
64
  var TabsListDisabledContext = /* @__PURE__ */ React.createContext(false);
73
65
  var TabsList = (0, import_core.createStyledHOC)(TabsListFrame, function TabsList2(props, forwardedRef) {
74
66
  var { __scopeTabs, loop = true, disabled = false, children, ...listProps } = props;
@@ -87,7 +79,7 @@ var TabsList = (0, import_core.createStyledHOC)(TabsListFrame, function TabsList
87
79
  asChild: true,
88
80
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsListFrame, {
89
81
  ...headlessListProps,
90
- flexDirection: context.orientation === "vertical" ? "column" : "row",
82
+ orientation: context.orientation,
91
83
  ref: forwardedRef,
92
84
  ...listProps,
93
85
  children
@@ -100,6 +92,7 @@ var TabsTab = (0, import_core.createStyledHOC)(TabsTabFrame, function TabsTab2(p
100
92
  var context = (0, import_StyledContext.useTabsContext)(__scopeTabs);
101
93
  var listDisabled = React.useContext(TabsListDisabledContext);
102
94
  var disabled = (disabledProp !== null && disabledProp !== void 0 ? disabledProp : listDisabled) === true;
95
+ var groupItemProps = (0, import_group.useGroupItem)({ disabled });
103
96
  var { isSelected, tabProps } = (0, import_tabs_headless.useTab)({
104
97
  baseId: context.baseId,
105
98
  value,
@@ -137,6 +130,10 @@ var TabsTab = (0, import_core.createStyledHOC)(TabsTabFrame, function TabsTab2(p
137
130
  updateTriggerSize();
138
131
  var observer = new ResizeObserver(updateTriggerSize);
139
132
  observer.observe(element);
133
+ var offsetParent = element.offsetParent;
134
+ if (offsetParent) {
135
+ observer.observe(offsetParent);
136
+ }
140
137
  return function() {
141
138
  return observer.disconnect();
142
139
  };
@@ -169,7 +166,7 @@ var TabsTab = (0, import_core.createStyledHOC)(TabsTabFrame, function TabsTab2(p
169
166
  }),
170
167
  ...tabA11yProps,
171
168
  theme: isSelected ? activeTheme !== null && activeTheme !== void 0 ? activeTheme : null : null,
172
- size: context.size,
169
+ ...groupItemProps,
173
170
  ...triggerProps,
174
171
  style: [triggerProps.style, isSelected && activeStyle],
175
172
  ref: (0, import_compose_refs.composeRefs)(forwardedRef, triggerRef),
@@ -209,7 +206,7 @@ var TabsContent = (0, import_core.createStyledHOC)(TabsContentFrame, function Ta
209
206
  }, value);
210
207
  });
211
208
  var TabsComponent = (0, import_core.createStyledHOC)(TabsFrame, function Tabs(props, forwardedRef) {
212
- var { __scopeTabs, value: valueProp, onValueChange, defaultValue, orientation = "horizontal", dir, activationMode = "automatic", size = true, ...tabsProps } = props;
209
+ var { __scopeTabs, value: valueProp, onValueChange, defaultValue, orientation = "horizontal", dir, activationMode = "automatic", ...tabsProps } = props;
213
210
  var { value, setValue, baseId, direction, triggersCount, registerTrigger, unregisterTrigger, tabsProps: headlessTabsProps } = (0, import_tabs_headless.useTabs)({
214
211
  value: valueProp,
215
212
  onValueChange,
@@ -218,26 +215,22 @@ var TabsComponent = (0, import_core.createStyledHOC)(TabsFrame, function Tabs(pr
218
215
  dir,
219
216
  activationMode
220
217
  });
221
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_size.SizeContext.Provider, {
222
- size,
223
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StyledContext.TabsProvider, {
224
- scope: __scopeTabs,
225
- baseId,
226
- value,
227
- onChange: setValue,
228
- orientation,
229
- dir: direction,
230
- activationMode,
231
- size,
232
- registerTrigger,
233
- triggersCount,
234
- unregisterTrigger,
235
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsFrame, {
236
- direction,
237
- ...headlessTabsProps,
238
- ...tabsProps,
239
- ref: forwardedRef
240
- })
218
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StyledContext.TabsProvider, {
219
+ scope: __scopeTabs,
220
+ baseId,
221
+ value,
222
+ onChange: setValue,
223
+ orientation,
224
+ dir: direction,
225
+ activationMode,
226
+ registerTrigger,
227
+ triggersCount,
228
+ unregisterTrigger,
229
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsFrame, {
230
+ direction,
231
+ ...headlessTabsProps,
232
+ ...tabsProps,
233
+ ref: forwardedRef
241
234
  })
242
235
  });
243
236
  });
package/dist/cjs/Tabs.native.js CHANGED
@@ -42,33 +42,25 @@ var import_jsx_runtime = require("react/jsx-runtime");
42
42
  var import_compose_refs = require("@tamagui/compose-refs");
43
43
  var import_constants = require("@tamagui/constants");
44
44
  var import_core = require("@tamagui/core");
45
+ var import_group = require("@tamagui/group");
45
46
  var import_helpers = require("@tamagui/helpers");
46
47
  var import_roving_focus = require("@tamagui/roving-focus");
47
- var import_size = require("@tamagui/size");
48
48
  var import_tabs_headless = require("@tamagui/tabs-headless");
49
49
  var import_web = require("@tamagui/web");
50
50
  var React = __toESM(require("react"), 1);
51
51
  var import_StyledContext = require("./StyledContext.native.js");
52
52
  var TABS_CONTEXT = "TabsContext";
53
- var TabsFrame = (0, import_core.styled)(import_core.View, {
54
- displayName: "Tabs",
55
- context: import_size.SizeContext
56
- });
57
- var TabsListFrame = (0, import_core.styled)(import_core.View, {
53
+ var TabsFrame = (0, import_core.styled)(import_core.View, { displayName: "Tabs" });
54
+ var TabsListFrame = (0, import_core.styled)(import_group.Group, {
58
55
  displayName: "TabsList",
59
- context: import_size.SizeContext,
60
56
  role: "tablist"
61
57
  });
62
58
  var TabsTabFrame = (0, import_core.styled)(import_core.View, {
63
59
  displayName: "TabsTrigger",
64
- context: import_size.SizeContext,
65
60
  role: "tab",
66
61
  variants: { disabled: { true: { pointerEvents: "none" } } }
67
62
  });
68
- var TabsContentFrame = (0, import_core.styled)(import_core.View, {
69
- displayName: "TabsContent",
70
- context: import_size.SizeContext
71
- });
63
+ var TabsContentFrame = (0, import_core.styled)(import_core.View, { displayName: "TabsContent" });
72
64
  var TabsListDisabledContext = /* @__PURE__ */ React.createContext(false);
73
65
  var TabsList = (0, import_core.createStyledHOC)(TabsListFrame, function TabsList2(props, forwardedRef) {
74
66
  var { __scopeTabs, loop = true, disabled = false, children, ...listProps } = props;
@@ -87,7 +79,7 @@ var TabsList = (0, import_core.createStyledHOC)(TabsListFrame, function TabsList
87
79
  asChild: true,
88
80
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsListFrame, {
89
81
  ...headlessListProps,
90
- flexDirection: context.orientation === "vertical" ? "column" : "row",
82
+ orientation: context.orientation,
91
83
  ref: forwardedRef,
92
84
  ...listProps,
93
85
  children
@@ -100,6 +92,7 @@ var TabsTab = (0, import_core.createStyledHOC)(TabsTabFrame, function TabsTab2(p
100
92
  var context = (0, import_StyledContext.useTabsContext)(__scopeTabs);
101
93
  var listDisabled = React.useContext(TabsListDisabledContext);
102
94
  var disabled = (disabledProp !== null && disabledProp !== void 0 ? disabledProp : listDisabled) === true;
95
+ var groupItemProps = (0, import_group.useGroupItem)({ disabled });
103
96
  var { isSelected, tabProps } = (0, import_tabs_headless.useTab)({
104
97
  baseId: context.baseId,
105
98
  value,
@@ -137,6 +130,10 @@ var TabsTab = (0, import_core.createStyledHOC)(TabsTabFrame, function TabsTab2(p
137
130
  updateTriggerSize();
138
131
  var observer = new ResizeObserver(updateTriggerSize);
139
132
  observer.observe(element);
133
+ var offsetParent = element.offsetParent;
134
+ if (offsetParent) {
135
+ observer.observe(offsetParent);
136
+ }
140
137
  return function() {
141
138
  return observer.disconnect();
142
139
  };
@@ -169,7 +166,7 @@ var TabsTab = (0, import_core.createStyledHOC)(TabsTabFrame, function TabsTab2(p
169
166
  }),
170
167
  ...tabA11yProps,
171
168
  theme: isSelected ? activeTheme !== null && activeTheme !== void 0 ? activeTheme : null : null,
172
- size: context.size,
169
+ ...groupItemProps,
173
170
  ...triggerProps,
174
171
  style: [triggerProps.style, isSelected && activeStyle],
175
172
  ref: (0, import_compose_refs.composeRefs)(forwardedRef, triggerRef),
@@ -209,7 +206,7 @@ var TabsContent = (0, import_core.createStyledHOC)(TabsContentFrame, function Ta
209
206
  }, value);
210
207
  });
211
208
  var TabsComponent = (0, import_core.createStyledHOC)(TabsFrame, function Tabs(props, forwardedRef) {
212
- var { __scopeTabs, value: valueProp, onValueChange, defaultValue, orientation = "horizontal", dir, activationMode = "automatic", size = true, ...tabsProps } = props;
209
+ var { __scopeTabs, value: valueProp, onValueChange, defaultValue, orientation = "horizontal", dir, activationMode = "automatic", ...tabsProps } = props;
213
210
  var { value, setValue, baseId, direction, triggersCount, registerTrigger, unregisterTrigger, tabsProps: headlessTabsProps } = (0, import_tabs_headless.useTabs)({
214
211
  value: valueProp,
215
212
  onValueChange,
@@ -218,26 +215,22 @@ var TabsComponent = (0, import_core.createStyledHOC)(TabsFrame, function Tabs(pr
218
215
  dir,
219
216
  activationMode
220
217
  });
221
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_size.SizeContext.Provider, {
222
- size,
223
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StyledContext.TabsProvider, {
224
- scope: __scopeTabs,
225
- baseId,
226
- value,
227
- onChange: setValue,
228
- orientation,
229
- dir: direction,
230
- activationMode,
231
- size,
232
- registerTrigger,
233
- triggersCount,
234
- unregisterTrigger,
235
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsFrame, {
236
- direction,
237
- ...headlessTabsProps,
238
- ...tabsProps,
239
- ref: forwardedRef
240
- })
218
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StyledContext.TabsProvider, {
219
+ scope: __scopeTabs,
220
+ baseId,
221
+ value,
222
+ onChange: setValue,
223
+ orientation,
224
+ dir: direction,
225
+ activationMode,
226
+ registerTrigger,
227
+ triggersCount,
228
+ unregisterTrigger,
229
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsFrame, {
230
+ direction,
231
+ ...headlessTabsProps,
232
+ ...tabsProps,
233
+ ref: forwardedRef
241
234
  })
242
235
  });
243
236
  });
package/dist/cjs/Tabs.native.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.native.js","names":[],"sources":["cjs/Tabs.native.js"],"sourcesContent":["\"use strict\";\nvar __create = Object.create;\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __getProtoOf = Object.getPrototypeOf;\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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(\n // If the importer is in node compatibility mode or this is not an ESM\n // file that has been converted to a CommonJS file using a Babel-\n // compatible transform (i.e. \"__esModule\" has not been set), then set\n // \"default\" to the CommonJS \"module.exports\" for node compatibility.\n isNodeMode || !mod || !mod.__esModule ? __defProp(target, \"default\", { value: mod, enumerable: true }) : target,\n mod\n));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar Tabs_exports = {};\n__export(Tabs_exports, {\n Tabs: () => Tabs2,\n TabsContent: () => TabsContent,\n TabsContentFrame: () => TabsContentFrame,\n TabsFrame: () => TabsFrame,\n TabsList: () => TabsList,\n TabsListFrame: () => TabsListFrame,\n TabsTab: () => TabsTab,\n TabsTabFrame: () => TabsTabFrame\n});\nmodule.exports = __toCommonJS(Tabs_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_compose_refs = require(\"@tamagui/compose-refs\");\nvar import_constants = require(\"@tamagui/constants\");\nvar import_core = require(\"@tamagui/core\");\nvar import_helpers = require(\"@tamagui/helpers\");\nvar import_roving_focus = require(\"@tamagui/roving-focus\");\nvar import_size = require(\"@tamagui/size\");\nvar import_tabs_headless = require(\"@tamagui/tabs-headless\");\nvar import_web = require(\"@tamagui/web\");\nvar React = __toESM(require(\"react\"), 1);\nvar import_StyledContext = require(\"./StyledContext\");\nvar TABS_CONTEXT = \"TabsContext\";\nvar TabsFrame = (0, import_core.styled)(import_core.View, {\n displayName: \"Tabs\",\n context: import_size.SizeContext\n});\nvar TabsListFrame = (0, import_core.styled)(import_core.View, {\n displayName: \"TabsList\",\n context: import_size.SizeContext,\n role: \"tablist\"\n});\nvar TabsTabFrame = (0, import_core.styled)(import_core.View, {\n displayName: \"TabsTrigger\",\n context: import_size.SizeContext,\n role: \"tab\",\n variants: {\n disabled: {\n true: {\n pointerEvents: \"none\"\n }\n }\n }\n});\nvar TabsContentFrame = (0, import_core.styled)(import_core.View, {\n displayName: \"TabsContent\",\n context: import_size.SizeContext\n});\nvar TabsListDisabledContext = /* @__PURE__ */ React.createContext(false);\nvar TabsList = (0, import_core.createStyledHOC)(TabsListFrame, function TabsList2(props, forwardedRef) {\n var { __scopeTabs, loop = true, disabled = false, children, ...listProps } = props;\n var context = (0, import_StyledContext.useTabsContext)(__scopeTabs);\n var { listProps: headlessListProps } = (0, import_tabs_headless.useTabsList)({\n orientation: context.orientation,\n disabled\n });\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsListDisabledContext.Provider, {\n value: disabled,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {\n __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,\n orientation: context.orientation,\n dir: context.dir,\n loop,\n asChild: true,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsListFrame, {\n ...headlessListProps,\n flexDirection: context.orientation === \"vertical\" ? \"column\" : \"row\",\n ref: forwardedRef,\n ...listProps,\n children\n })\n })\n });\n});\nvar TabsTab = (0, import_core.createStyledHOC)(TabsTabFrame, function TabsTab2(props, forwardedRef) {\n var { __scopeTabs, value, disabled: disabledProp, onInteraction, activeStyle, activeTheme, onLayout, onMouseEnter, onMouseLeave, onPress, onKeyDown, onFocus, onBlur, ...triggerProps } = props;\n var context = (0, import_StyledContext.useTabsContext)(__scopeTabs);\n var listDisabled = React.useContext(TabsListDisabledContext);\n var disabled = (disabledProp !== null && disabledProp !== void 0 ? disabledProp : listDisabled) === true;\n var { isSelected, tabProps } = (0, import_tabs_headless.useTab)({\n baseId: context.baseId,\n value,\n selectedValue: context.value,\n disabled,\n activationMode: context.activationMode,\n onChange: context.onChange\n });\n var { onPress: activateOnPress, onKeyDown: activateOnKeyDown, onFocus: activateOnFocus, ...tabA11yProps } = tabProps;\n var [layout, setLayout] = React.useState(null);\n var triggerRef = React.useRef(null);\n var emitInteraction = (0, import_web.useEvent)(function(type, layout2) {\n onInteraction === null || onInteraction === void 0 ? void 0 : onInteraction(type, layout2);\n });\n React.useEffect(function() {\n context.registerTrigger();\n return function() {\n return context.unregisterTrigger();\n };\n }, []);\n React.useEffect(function() {\n if (!triggerRef.current || !import_constants.isWeb) return;\n var element = triggerRef.current;\n function updateTriggerSize() {\n var next = {\n width: element.offsetWidth,\n height: element.offsetHeight,\n x: element.offsetLeft,\n y: element.offsetTop\n };\n setLayout(function(previous) {\n return previous && previous.width === next.width && previous.height === next.height && previous.x === next.x && previous.y === next.y ? previous : next;\n });\n }\n updateTriggerSize();\n var observer = new ResizeObserver(updateTriggerSize);\n observer.observe(element);\n return function() {\n return observer.disconnect();\n };\n }, [\n context.triggersCount\n ]);\n React.useEffect(function() {\n if (isSelected && layout) {\n emitInteraction(\"select\", layout);\n }\n }, [\n emitInteraction,\n isSelected,\n layout\n ]);\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {\n __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,\n asChild: true,\n tabIndex: disabled ? -1 : 0,\n active: isSelected,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsTabFrame, {\n onLayout: import_constants.isWeb ? onLayout : (0, import_helpers.composeEventHandlers)(onLayout, function(event) {\n setLayout(event.nativeEvent.layout);\n }),\n onMouseEnter: (0, import_helpers.composeEventHandlers)(onMouseEnter, function() {\n if (layout) {\n emitInteraction(\"hover\", layout);\n }\n }),\n onMouseLeave: (0, import_helpers.composeEventHandlers)(onMouseLeave, function() {\n emitInteraction(\"hover\", null);\n }),\n ...tabA11yProps,\n theme: isSelected ? activeTheme !== null && activeTheme !== void 0 ? activeTheme : null : null,\n size: context.size,\n ...triggerProps,\n // after triggerProps so active styles beat base styles from styled() skins\n style: [\n triggerProps.style,\n isSelected && activeStyle\n ],\n ref: (0, import_compose_refs.composeRefs)(forwardedRef, triggerRef),\n onPress: (0, import_helpers.composeEventHandlers)(onPress !== null && onPress !== void 0 ? onPress : void 0, activateOnPress),\n ...import_constants.isWeb && {\n onKeyDown: (0, import_helpers.composeEventHandlers)(onKeyDown, activateOnKeyDown),\n // emit the focus interaction before activating, matching the order\n // the indicator animations were built against\n onFocus: (0, import_helpers.composeEventHandlers)(onFocus, (0, import_helpers.composeEventHandlers)(function() {\n if (layout) {\n emitInteraction(\"focus\", layout);\n }\n }, activateOnFocus)),\n onBlur: (0, import_helpers.composeEventHandlers)(onBlur, function() {\n emitInteraction(\"focus\", null);\n })\n }\n })\n });\n});\nvar TabsContent = (0, import_core.createStyledHOC)(TabsContentFrame, function TabsContent2(props, forwardedRef) {\n var { __scopeTabs, value, forceMount, children, ...contentProps } = props;\n var context = (0, import_StyledContext.useTabsContext)(__scopeTabs);\n var { shouldMount, contentProps: headlessContentProps } = (0, import_tabs_headless.useTabContent)({\n baseId: context.baseId,\n value,\n selectedValue: context.value,\n orientation: context.orientation,\n forceMount\n });\n if (!shouldMount) {\n return null;\n }\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContentFrame, {\n // @ts-ignore hidden is a web-only accessibility attribute\n ...headlessContentProps,\n ...contentProps,\n ref: forwardedRef,\n children\n }, value);\n});\nvar TabsComponent = (0, import_core.createStyledHOC)(TabsFrame, function Tabs(props, forwardedRef) {\n var { __scopeTabs, value: valueProp, onValueChange, defaultValue, orientation = \"horizontal\", dir, activationMode = \"automatic\", size = true, ...tabsProps } = props;\n var { value, setValue, baseId, direction, triggersCount, registerTrigger, unregisterTrigger, tabsProps: headlessTabsProps } = (0, import_tabs_headless.useTabs)({\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation,\n dir,\n activationMode\n });\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_size.SizeContext.Provider, {\n size,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StyledContext.TabsProvider, {\n scope: __scopeTabs,\n baseId,\n value,\n onChange: setValue,\n orientation,\n dir: direction,\n activationMode,\n size,\n registerTrigger,\n triggersCount,\n unregisterTrigger,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsFrame, {\n direction,\n ...headlessTabsProps,\n ...tabsProps,\n ref: forwardedRef\n })\n })\n });\n});\nvar Tabs2 = (0, import_helpers.withStaticProperties)(TabsComponent, {\n Frame: TabsFrame,\n List: TabsList,\n Tab: TabsTab,\n Content: TabsContent\n});\n//# sourceMappingURL=Tabs.js.map\n"],"mappings":"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"}
1
+ {"version":3,"file":"Tabs.native.js","names":[],"sources":["cjs/Tabs.native.js"],"sourcesContent":["\"use strict\";\nvar __create = Object.create;\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __getProtoOf = Object.getPrototypeOf;\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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(\n // If the importer is in node compatibility mode or this is not an ESM\n // file that has been converted to a CommonJS file using a Babel-\n // compatible transform (i.e. \"__esModule\" has not been set), then set\n // \"default\" to the CommonJS \"module.exports\" for node compatibility.\n isNodeMode || !mod || !mod.__esModule ? __defProp(target, \"default\", { value: mod, enumerable: true }) : target,\n mod\n));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar Tabs_exports = {};\n__export(Tabs_exports, {\n Tabs: () => Tabs2,\n TabsContent: () => TabsContent,\n TabsContentFrame: () => TabsContentFrame,\n TabsFrame: () => TabsFrame,\n TabsList: () => TabsList,\n TabsListFrame: () => TabsListFrame,\n TabsTab: () => TabsTab,\n TabsTabFrame: () => TabsTabFrame\n});\nmodule.exports = __toCommonJS(Tabs_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_compose_refs = require(\"@tamagui/compose-refs\");\nvar import_constants = require(\"@tamagui/constants\");\nvar import_core = require(\"@tamagui/core\");\nvar import_group = require(\"@tamagui/group\");\nvar import_helpers = require(\"@tamagui/helpers\");\nvar import_roving_focus = require(\"@tamagui/roving-focus\");\nvar import_tabs_headless = require(\"@tamagui/tabs-headless\");\nvar import_web = require(\"@tamagui/web\");\nvar React = __toESM(require(\"react\"), 1);\nvar import_StyledContext = require(\"./StyledContext\");\nvar TABS_CONTEXT = \"TabsContext\";\nvar TabsFrame = (0, import_core.styled)(import_core.View, {\n displayName: \"Tabs\"\n});\nvar TabsListFrame = (0, import_core.styled)(import_group.Group, {\n displayName: \"TabsList\",\n role: \"tablist\"\n});\nvar TabsTabFrame = (0, import_core.styled)(import_core.View, {\n displayName: \"TabsTrigger\",\n role: \"tab\",\n variants: {\n disabled: {\n true: {\n pointerEvents: \"none\"\n }\n }\n }\n});\nvar TabsContentFrame = (0, import_core.styled)(import_core.View, {\n displayName: \"TabsContent\"\n});\nvar TabsListDisabledContext = /* @__PURE__ */ React.createContext(false);\nvar TabsList = (0, import_core.createStyledHOC)(TabsListFrame, function TabsList2(props, forwardedRef) {\n var { __scopeTabs, loop = true, disabled = false, children, ...listProps } = props;\n var context = (0, import_StyledContext.useTabsContext)(__scopeTabs);\n var { listProps: headlessListProps } = (0, import_tabs_headless.useTabsList)({\n orientation: context.orientation,\n disabled\n });\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsListDisabledContext.Provider, {\n value: disabled,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {\n __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,\n orientation: context.orientation,\n dir: context.dir,\n loop,\n asChild: true,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsListFrame, {\n ...headlessListProps,\n orientation: context.orientation,\n ref: forwardedRef,\n ...listProps,\n children\n })\n })\n });\n});\nvar TabsTab = (0, import_core.createStyledHOC)(TabsTabFrame, function TabsTab2(props, forwardedRef) {\n var { __scopeTabs, value, disabled: disabledProp, onInteraction, activeStyle, activeTheme, onLayout, onMouseEnter, onMouseLeave, onPress, onKeyDown, onFocus, onBlur, ...triggerProps } = props;\n var context = (0, import_StyledContext.useTabsContext)(__scopeTabs);\n var listDisabled = React.useContext(TabsListDisabledContext);\n var disabled = (disabledProp !== null && disabledProp !== void 0 ? disabledProp : listDisabled) === true;\n var groupItemProps = (0, import_group.useGroupItem)({\n disabled\n });\n var { isSelected, tabProps } = (0, import_tabs_headless.useTab)({\n baseId: context.baseId,\n value,\n selectedValue: context.value,\n disabled,\n activationMode: context.activationMode,\n onChange: context.onChange\n });\n var { onPress: activateOnPress, onKeyDown: activateOnKeyDown, onFocus: activateOnFocus, ...tabA11yProps } = tabProps;\n var [layout, setLayout] = React.useState(null);\n var triggerRef = React.useRef(null);\n var emitInteraction = (0, import_web.useEvent)(function(type, layout2) {\n onInteraction === null || onInteraction === void 0 ? void 0 : onInteraction(type, layout2);\n });\n React.useEffect(function() {\n context.registerTrigger();\n return function() {\n return context.unregisterTrigger();\n };\n }, []);\n React.useEffect(function() {\n if (!triggerRef.current || !import_constants.isWeb) return;\n var element = triggerRef.current;\n function updateTriggerSize() {\n var next = {\n width: element.offsetWidth,\n height: element.offsetHeight,\n x: element.offsetLeft,\n y: element.offsetTop\n };\n setLayout(function(previous) {\n return previous && previous.width === next.width && previous.height === next.height && previous.x === next.x && previous.y === next.y ? previous : next;\n });\n }\n updateTriggerSize();\n var observer = new ResizeObserver(updateTriggerSize);\n observer.observe(element);\n var offsetParent = element.offsetParent;\n if (offsetParent) {\n observer.observe(offsetParent);\n }\n return function() {\n return observer.disconnect();\n };\n }, [\n context.triggersCount\n ]);\n React.useEffect(function() {\n if (isSelected && layout) {\n emitInteraction(\"select\", layout);\n }\n }, [\n emitInteraction,\n isSelected,\n layout\n ]);\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {\n __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,\n asChild: true,\n tabIndex: disabled ? -1 : 0,\n active: isSelected,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsTabFrame, {\n onLayout: import_constants.isWeb ? onLayout : (0, import_helpers.composeEventHandlers)(onLayout, function(event) {\n setLayout(event.nativeEvent.layout);\n }),\n onMouseEnter: (0, import_helpers.composeEventHandlers)(onMouseEnter, function() {\n if (layout) {\n emitInteraction(\"hover\", layout);\n }\n }),\n onMouseLeave: (0, import_helpers.composeEventHandlers)(onMouseLeave, function() {\n emitInteraction(\"hover\", null);\n }),\n ...tabA11yProps,\n theme: isSelected ? activeTheme !== null && activeTheme !== void 0 ? activeTheme : null : null,\n ...groupItemProps,\n ...triggerProps,\n // after triggerProps so active styles beat base styles from styled() skins\n style: [\n triggerProps.style,\n isSelected && activeStyle\n ],\n ref: (0, import_compose_refs.composeRefs)(forwardedRef, triggerRef),\n onPress: (0, import_helpers.composeEventHandlers)(onPress !== null && onPress !== void 0 ? onPress : void 0, activateOnPress),\n ...import_constants.isWeb && {\n onKeyDown: (0, import_helpers.composeEventHandlers)(onKeyDown, activateOnKeyDown),\n // emit the focus interaction before activating, matching the order\n // the indicator animations were built against\n onFocus: (0, import_helpers.composeEventHandlers)(onFocus, (0, import_helpers.composeEventHandlers)(function() {\n if (layout) {\n emitInteraction(\"focus\", layout);\n }\n }, activateOnFocus)),\n onBlur: (0, import_helpers.composeEventHandlers)(onBlur, function() {\n emitInteraction(\"focus\", null);\n })\n }\n })\n });\n});\nvar TabsContent = (0, import_core.createStyledHOC)(TabsContentFrame, function TabsContent2(props, forwardedRef) {\n var { __scopeTabs, value, forceMount, children, ...contentProps } = props;\n var context = (0, import_StyledContext.useTabsContext)(__scopeTabs);\n var { shouldMount, contentProps: headlessContentProps } = (0, import_tabs_headless.useTabContent)({\n baseId: context.baseId,\n value,\n selectedValue: context.value,\n orientation: context.orientation,\n forceMount\n });\n if (!shouldMount) {\n return null;\n }\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContentFrame, {\n // @ts-ignore hidden is a web-only accessibility attribute\n ...headlessContentProps,\n ...contentProps,\n ref: forwardedRef,\n children\n }, value);\n});\nvar TabsComponent = (0, import_core.createStyledHOC)(TabsFrame, function Tabs(props, forwardedRef) {\n var { __scopeTabs, value: valueProp, onValueChange, defaultValue, orientation = \"horizontal\", dir, activationMode = \"automatic\", ...tabsProps } = props;\n var { value, setValue, baseId, direction, triggersCount, registerTrigger, unregisterTrigger, tabsProps: headlessTabsProps } = (0, import_tabs_headless.useTabs)({\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation,\n dir,\n activationMode\n });\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StyledContext.TabsProvider, {\n scope: __scopeTabs,\n baseId,\n value,\n onChange: setValue,\n orientation,\n dir: direction,\n activationMode,\n registerTrigger,\n triggersCount,\n unregisterTrigger,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsFrame, {\n direction,\n ...headlessTabsProps,\n ...tabsProps,\n ref: forwardedRef\n })\n });\n});\nvar Tabs2 = (0, import_helpers.withStaticProperties)(TabsComponent, {\n Frame: TabsFrame,\n List: TabsList,\n Tab: TabsTab,\n Content: TabsContent\n});\n//# sourceMappingURL=Tabs.js.map\n"],"mappings":"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"}
package/dist/esm/Tabs.mjs CHANGED
@@ -1,9 +1,9 @@
1
1
  import { composeRefs } from "@tamagui/compose-refs";
2
2
  import { isWeb } from "@tamagui/constants";
3
3
  import { View, createStyledHOC, styled } from "@tamagui/core";
4
+ import { Group, useGroupItem } from "@tamagui/group";
4
5
  import { composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
5
6
  import { RovingFocusGroup } from "@tamagui/roving-focus";
6
- import { SizeContext } from "@tamagui/size";
7
7
  import { useTab, useTabContent, useTabs, useTabsList } from "@tamagui/tabs-headless";
8
8
  import { useEvent } from "@tamagui/web";
9
9
  import * as React from "react";
@@ -11,25 +11,17 @@ import { TabsProvider, useTabsContext } from "./StyledContext.mjs";
11
11
  import { jsx } from "react/jsx-runtime";
12
12
 
13
13
  const TABS_CONTEXT = "TabsContext";
14
- const TabsFrame = styled(View, {
15
- displayName: "Tabs",
16
- context: SizeContext
17
- });
18
- const TabsListFrame = styled(View, {
14
+ const TabsFrame = styled(View, { displayName: "Tabs" });
15
+ const TabsListFrame = styled(Group, {
19
16
  displayName: "TabsList",
20
- context: SizeContext,
21
17
  role: "tablist"
22
18
  });
23
19
  const TabsTabFrame = styled(View, {
24
20
  displayName: "TabsTrigger",
25
- context: SizeContext,
26
21
  role: "tab",
27
22
  variants: { disabled: { true: { pointerEvents: "none" } } }
28
23
  });
29
- const TabsContentFrame = styled(View, {
30
- displayName: "TabsContent",
31
- context: SizeContext
32
- });
24
+ const TabsContentFrame = styled(View, { displayName: "TabsContent" });
33
25
  const TabsListDisabledContext = React.createContext(false);
34
26
  const TabsList = createStyledHOC(TabsListFrame, function TabsList2(props, forwardedRef) {
35
27
  const { __scopeTabs, loop = true, disabled = false, children, ...listProps } = props;
@@ -48,7 +40,7 @@ const TabsList = createStyledHOC(TabsListFrame, function TabsList2(props, forwar
48
40
  asChild: true,
49
41
  children: /* @__PURE__ */ jsx(TabsListFrame, {
50
42
  ...headlessListProps,
51
- flexDirection: context.orientation === "vertical" ? "column" : "row",
43
+ orientation: context.orientation,
52
44
  ref: forwardedRef,
53
45
  ...listProps,
54
46
  children
@@ -61,6 +53,7 @@ const TabsTab = createStyledHOC(TabsTabFrame, function TabsTab2(props, forwarded
61
53
  const context = useTabsContext(__scopeTabs);
62
54
  const listDisabled = React.useContext(TabsListDisabledContext);
63
55
  const disabled = (disabledProp ?? listDisabled) === true;
56
+ const groupItemProps = useGroupItem({ disabled });
64
57
  const { isSelected, tabProps } = useTab({
65
58
  baseId: context.baseId,
66
59
  value,
@@ -94,6 +87,10 @@ const TabsTab = createStyledHOC(TabsTabFrame, function TabsTab2(props, forwarded
94
87
  updateTriggerSize();
95
88
  const observer = new ResizeObserver(updateTriggerSize);
96
89
  observer.observe(element);
90
+ const offsetParent = element.offsetParent;
91
+ if (offsetParent) {
92
+ observer.observe(offsetParent);
93
+ }
97
94
  return () => observer.disconnect();
98
95
  }, [context.triggersCount]);
99
96
  React.useEffect(() => {
@@ -124,7 +121,7 @@ const TabsTab = createStyledHOC(TabsTabFrame, function TabsTab2(props, forwarded
124
121
  }),
125
122
  ...tabA11yProps,
126
123
  theme: isSelected ? activeTheme ?? null : null,
127
- size: context.size,
124
+ ...groupItemProps,
128
125
  ...triggerProps,
129
126
  style: [triggerProps.style, isSelected && activeStyle],
130
127
  ref: composeRefs(forwardedRef, triggerRef),
@@ -164,7 +161,7 @@ const TabsContent = createStyledHOC(TabsContentFrame, function TabsContent2(prop
164
161
  }, value);
165
162
  });
166
163
  const TabsComponent = createStyledHOC(TabsFrame, function Tabs(props, forwardedRef) {
167
- const { __scopeTabs, value: valueProp, onValueChange, defaultValue, orientation = "horizontal", dir, activationMode = "automatic", size = true, ...tabsProps } = props;
164
+ const { __scopeTabs, value: valueProp, onValueChange, defaultValue, orientation = "horizontal", dir, activationMode = "automatic", ...tabsProps } = props;
168
165
  const { value, setValue, baseId, direction, triggersCount, registerTrigger, unregisterTrigger, tabsProps: headlessTabsProps } = useTabs({
169
166
  value: valueProp,
170
167
  onValueChange,
@@ -173,26 +170,22 @@ const TabsComponent = createStyledHOC(TabsFrame, function Tabs(props, forwardedR
173
170
  dir,
174
171
  activationMode
175
172
  });
176
- return /* @__PURE__ */ jsx(SizeContext.Provider, {
177
- size,
178
- children: /* @__PURE__ */ jsx(TabsProvider, {
179
- scope: __scopeTabs,
180
- baseId,
181
- value,
182
- onChange: setValue,
183
- orientation,
184
- dir: direction,
185
- activationMode,
186
- size,
187
- registerTrigger,
188
- triggersCount,
189
- unregisterTrigger,
190
- children: /* @__PURE__ */ jsx(TabsFrame, {
191
- direction,
192
- ...headlessTabsProps,
193
- ...tabsProps,
194
- ref: forwardedRef
195
- })
173
+ return /* @__PURE__ */ jsx(TabsProvider, {
174
+ scope: __scopeTabs,
175
+ baseId,
176
+ value,
177
+ onChange: setValue,
178
+ orientation,
179
+ dir: direction,
180
+ activationMode,
181
+ registerTrigger,
182
+ triggersCount,
183
+ unregisterTrigger,
184
+ children: /* @__PURE__ */ jsx(TabsFrame, {
185
+ direction,
186
+ ...headlessTabsProps,
187
+ ...tabsProps,
188
+ ref: forwardedRef
196
189
  })
197
190
  });
198
191
  });
package/dist/esm/Tabs.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.js","names":[],"sources":["esm/Tabs.js"],"sourcesContent":["import { composeRefs } from \"@tamagui/compose-refs\";\nimport { isWeb } from \"@tamagui/constants\";\nimport { createStyledHOC, styled, View } from \"@tamagui/core\";\nimport { composeEventHandlers, withStaticProperties } from \"@tamagui/helpers\";\nimport { RovingFocusGroup } from \"@tamagui/roving-focus\";\nimport { SizeContext } from \"@tamagui/size\";\nimport { useTab, useTabContent, useTabs, useTabsList } from \"@tamagui/tabs-headless\";\nimport { useEvent } from \"@tamagui/web\";\nimport * as React from \"react\";\nimport { TabsProvider, useTabsContext } from \"./StyledContext\";\nimport { jsx } from \"react/jsx-runtime\";\nconst TABS_CONTEXT = \"TabsContext\";\nconst TabsFrame = styled(View, {\n displayName: \"Tabs\",\n context: SizeContext\n});\nconst TabsListFrame = styled(View, {\n displayName: \"TabsList\",\n context: SizeContext,\n role: \"tablist\"\n});\nconst TabsTabFrame = styled(View, {\n displayName: \"TabsTrigger\",\n context: SizeContext,\n role: \"tab\",\n variants: {\n disabled: {\n true: {\n pointerEvents: \"none\"\n }\n }\n }\n});\nconst TabsContentFrame = styled(View, {\n displayName: \"TabsContent\",\n context: SizeContext\n});\nconst TabsListDisabledContext = React.createContext(false);\nconst TabsList = createStyledHOC(\n TabsListFrame,\n function TabsList2(props, forwardedRef) {\n const { __scopeTabs, loop = true, disabled = false, children, ...listProps } = props;\n const context = useTabsContext(__scopeTabs);\n const { listProps: headlessListProps } = useTabsList({\n orientation: context.orientation,\n disabled\n });\n return /* @__PURE__ */ jsx(TabsListDisabledContext.Provider, { value: disabled, children: /* @__PURE__ */ jsx(\n RovingFocusGroup,\n {\n __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,\n orientation: context.orientation,\n dir: context.dir,\n loop,\n asChild: true,\n children: /* @__PURE__ */ jsx(\n TabsListFrame,\n {\n ...headlessListProps,\n flexDirection: context.orientation === \"vertical\" ? \"column\" : \"row\",\n ref: forwardedRef,\n ...listProps,\n children\n }\n )\n }\n ) });\n }\n);\nconst TabsTab = createStyledHOC(\n TabsTabFrame,\n function TabsTab2(props, forwardedRef) {\n const {\n __scopeTabs,\n value,\n disabled: disabledProp,\n onInteraction,\n activeStyle,\n activeTheme,\n onLayout,\n onMouseEnter,\n onMouseLeave,\n onPress,\n onKeyDown,\n onFocus,\n onBlur,\n ...triggerProps\n } = props;\n const context = useTabsContext(__scopeTabs);\n const listDisabled = React.useContext(TabsListDisabledContext);\n const disabled = (disabledProp ?? listDisabled) === true;\n const { isSelected, tabProps } = useTab({\n baseId: context.baseId,\n value,\n selectedValue: context.value,\n disabled,\n activationMode: context.activationMode,\n onChange: context.onChange\n });\n const {\n onPress: activateOnPress,\n onKeyDown: activateOnKeyDown,\n onFocus: activateOnFocus,\n ...tabA11yProps\n } = tabProps;\n const [layout, setLayout] = React.useState(null);\n const triggerRef = React.useRef(null);\n const emitInteraction = useEvent(\n (type, layout2) => {\n onInteraction?.(type, layout2);\n }\n );\n React.useEffect(() => {\n context.registerTrigger();\n return () => context.unregisterTrigger();\n }, []);\n React.useEffect(() => {\n if (!triggerRef.current || !isWeb) return;\n const element = triggerRef.current;\n function updateTriggerSize() {\n const next = {\n width: element.offsetWidth,\n height: element.offsetHeight,\n x: element.offsetLeft,\n y: element.offsetTop\n };\n setLayout(\n (previous) => previous && previous.width === next.width && previous.height === next.height && previous.x === next.x && previous.y === next.y ? previous : next\n );\n }\n updateTriggerSize();\n const observer = new ResizeObserver(updateTriggerSize);\n observer.observe(element);\n return () => observer.disconnect();\n }, [context.triggersCount]);\n React.useEffect(() => {\n if (isSelected && layout) {\n emitInteraction(\"select\", layout);\n }\n }, [emitInteraction, isSelected, layout]);\n return /* @__PURE__ */ jsx(\n RovingFocusGroup.Item,\n {\n __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,\n asChild: true,\n tabIndex: disabled ? -1 : 0,\n active: isSelected,\n children: /* @__PURE__ */ jsx(\n TabsTabFrame,\n {\n onLayout: isWeb ? onLayout : composeEventHandlers(onLayout, (event) => {\n setLayout(event.nativeEvent.layout);\n }),\n onMouseEnter: composeEventHandlers(onMouseEnter, () => {\n if (layout) {\n emitInteraction(\"hover\", layout);\n }\n }),\n onMouseLeave: composeEventHandlers(onMouseLeave, () => {\n emitInteraction(\"hover\", null);\n }),\n ...tabA11yProps,\n theme: isSelected ? activeTheme ?? null : null,\n size: context.size,\n ...triggerProps,\n style: [triggerProps.style, isSelected && activeStyle],\n ref: composeRefs(forwardedRef, triggerRef),\n onPress: composeEventHandlers(onPress ?? void 0, activateOnPress),\n ...isWeb && {\n onKeyDown: composeEventHandlers(onKeyDown, activateOnKeyDown),\n // emit the focus interaction before activating, matching the order\n // the indicator animations were built against\n onFocus: composeEventHandlers(\n onFocus,\n composeEventHandlers(() => {\n if (layout) {\n emitInteraction(\"focus\", layout);\n }\n }, activateOnFocus)\n ),\n onBlur: composeEventHandlers(onBlur, () => {\n emitInteraction(\"focus\", null);\n })\n }\n }\n )\n }\n );\n }\n);\nconst TabsContent = createStyledHOC(\n TabsContentFrame,\n function TabsContent2(props, forwardedRef) {\n const { __scopeTabs, value, forceMount, children, ...contentProps } = props;\n const context = useTabsContext(__scopeTabs);\n const { shouldMount, contentProps: headlessContentProps } = useTabContent({\n baseId: context.baseId,\n value,\n selectedValue: context.value,\n orientation: context.orientation,\n forceMount\n });\n if (!shouldMount) {\n return null;\n }\n return /* @__PURE__ */ jsx(\n TabsContentFrame,\n {\n ...headlessContentProps,\n ...contentProps,\n ref: forwardedRef,\n children\n },\n value\n );\n }\n);\nconst TabsComponent = createStyledHOC(\n TabsFrame,\n function Tabs(props, forwardedRef) {\n const {\n __scopeTabs,\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = \"horizontal\",\n dir,\n activationMode = \"automatic\",\n size = true,\n ...tabsProps\n } = props;\n const {\n value,\n setValue,\n baseId,\n direction,\n triggersCount,\n registerTrigger,\n unregisterTrigger,\n tabsProps: headlessTabsProps\n } = useTabs({\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation,\n dir,\n activationMode\n });\n return /* @__PURE__ */ jsx(SizeContext.Provider, { size, children: /* @__PURE__ */ jsx(\n TabsProvider,\n {\n scope: __scopeTabs,\n baseId,\n value,\n onChange: setValue,\n orientation,\n dir: direction,\n activationMode,\n size,\n registerTrigger,\n triggersCount,\n unregisterTrigger,\n children: /* @__PURE__ */ jsx(\n TabsFrame,\n {\n direction,\n ...headlessTabsProps,\n ...tabsProps,\n ref: forwardedRef\n }\n )\n }\n ) });\n }\n);\nconst Tabs2 = withStaticProperties(TabsComponent, {\n Frame: TabsFrame,\n List: TabsList,\n Tab: TabsTab,\n Content: TabsContent\n});\nexport {\n Tabs2 as Tabs,\n TabsContent,\n TabsContentFrame,\n TabsFrame,\n TabsList,\n TabsListFrame,\n TabsTab,\n TabsTabFrame\n};\n//# sourceMappingURL=Tabs.js.map\n"],"mappings":"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"}
1
+ {"version":3,"file":"Tabs.js","names":[],"sources":["esm/Tabs.js"],"sourcesContent":["import { composeRefs } from \"@tamagui/compose-refs\";\nimport { isWeb } from \"@tamagui/constants\";\nimport { createStyledHOC, styled, View } from \"@tamagui/core\";\nimport { Group, useGroupItem } from \"@tamagui/group\";\nimport { composeEventHandlers, withStaticProperties } from \"@tamagui/helpers\";\nimport { RovingFocusGroup } from \"@tamagui/roving-focus\";\nimport { useTab, useTabContent, useTabs, useTabsList } from \"@tamagui/tabs-headless\";\nimport { useEvent } from \"@tamagui/web\";\nimport * as React from \"react\";\nimport { TabsProvider, useTabsContext } from \"./StyledContext\";\nimport { jsx } from \"react/jsx-runtime\";\nconst TABS_CONTEXT = \"TabsContext\";\nconst TabsFrame = styled(View, {\n displayName: \"Tabs\"\n});\nconst TabsListFrame = styled(Group, {\n displayName: \"TabsList\",\n role: \"tablist\"\n});\nconst TabsTabFrame = styled(View, {\n displayName: \"TabsTrigger\",\n role: \"tab\",\n variants: {\n disabled: {\n true: {\n pointerEvents: \"none\"\n }\n }\n }\n});\nconst TabsContentFrame = styled(View, {\n displayName: \"TabsContent\"\n});\nconst TabsListDisabledContext = React.createContext(false);\nconst TabsList = createStyledHOC(\n TabsListFrame,\n function TabsList2(props, forwardedRef) {\n const { __scopeTabs, loop = true, disabled = false, children, ...listProps } = props;\n const context = useTabsContext(__scopeTabs);\n const { listProps: headlessListProps } = useTabsList({\n orientation: context.orientation,\n disabled\n });\n return /* @__PURE__ */ jsx(TabsListDisabledContext.Provider, { value: disabled, children: /* @__PURE__ */ jsx(\n RovingFocusGroup,\n {\n __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,\n orientation: context.orientation,\n dir: context.dir,\n loop,\n asChild: true,\n children: /* @__PURE__ */ jsx(\n TabsListFrame,\n {\n ...headlessListProps,\n orientation: context.orientation,\n ref: forwardedRef,\n ...listProps,\n children\n }\n )\n }\n ) });\n }\n);\nconst TabsTab = createStyledHOC(\n TabsTabFrame,\n function TabsTab2(props, forwardedRef) {\n const {\n __scopeTabs,\n value,\n disabled: disabledProp,\n onInteraction,\n activeStyle,\n activeTheme,\n onLayout,\n onMouseEnter,\n onMouseLeave,\n onPress,\n onKeyDown,\n onFocus,\n onBlur,\n ...triggerProps\n } = props;\n const context = useTabsContext(__scopeTabs);\n const listDisabled = React.useContext(TabsListDisabledContext);\n const disabled = (disabledProp ?? listDisabled) === true;\n const groupItemProps = useGroupItem({ disabled });\n const { isSelected, tabProps } = useTab({\n baseId: context.baseId,\n value,\n selectedValue: context.value,\n disabled,\n activationMode: context.activationMode,\n onChange: context.onChange\n });\n const {\n onPress: activateOnPress,\n onKeyDown: activateOnKeyDown,\n onFocus: activateOnFocus,\n ...tabA11yProps\n } = tabProps;\n const [layout, setLayout] = React.useState(null);\n const triggerRef = React.useRef(null);\n const emitInteraction = useEvent(\n (type, layout2) => {\n onInteraction?.(type, layout2);\n }\n );\n React.useEffect(() => {\n context.registerTrigger();\n return () => context.unregisterTrigger();\n }, []);\n React.useEffect(() => {\n if (!triggerRef.current || !isWeb) return;\n const element = triggerRef.current;\n function updateTriggerSize() {\n const next = {\n width: element.offsetWidth,\n height: element.offsetHeight,\n x: element.offsetLeft,\n y: element.offsetTop\n };\n setLayout(\n (previous) => previous && previous.width === next.width && previous.height === next.height && previous.x === next.x && previous.y === next.y ? previous : next\n );\n }\n updateTriggerSize();\n const observer = new ResizeObserver(updateTriggerSize);\n observer.observe(element);\n const offsetParent = element.offsetParent;\n if (offsetParent) {\n observer.observe(offsetParent);\n }\n return () => observer.disconnect();\n }, [context.triggersCount]);\n React.useEffect(() => {\n if (isSelected && layout) {\n emitInteraction(\"select\", layout);\n }\n }, [emitInteraction, isSelected, layout]);\n return /* @__PURE__ */ jsx(\n RovingFocusGroup.Item,\n {\n __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,\n asChild: true,\n tabIndex: disabled ? -1 : 0,\n active: isSelected,\n children: /* @__PURE__ */ jsx(\n TabsTabFrame,\n {\n onLayout: isWeb ? onLayout : composeEventHandlers(onLayout, (event) => {\n setLayout(event.nativeEvent.layout);\n }),\n onMouseEnter: composeEventHandlers(onMouseEnter, () => {\n if (layout) {\n emitInteraction(\"hover\", layout);\n }\n }),\n onMouseLeave: composeEventHandlers(onMouseLeave, () => {\n emitInteraction(\"hover\", null);\n }),\n ...tabA11yProps,\n theme: isSelected ? activeTheme ?? null : null,\n ...groupItemProps,\n ...triggerProps,\n style: [triggerProps.style, isSelected && activeStyle],\n ref: composeRefs(forwardedRef, triggerRef),\n onPress: composeEventHandlers(onPress ?? void 0, activateOnPress),\n ...isWeb && {\n onKeyDown: composeEventHandlers(onKeyDown, activateOnKeyDown),\n // emit the focus interaction before activating, matching the order\n // the indicator animations were built against\n onFocus: composeEventHandlers(\n onFocus,\n composeEventHandlers(() => {\n if (layout) {\n emitInteraction(\"focus\", layout);\n }\n }, activateOnFocus)\n ),\n onBlur: composeEventHandlers(onBlur, () => {\n emitInteraction(\"focus\", null);\n })\n }\n }\n )\n }\n );\n }\n);\nconst TabsContent = createStyledHOC(\n TabsContentFrame,\n function TabsContent2(props, forwardedRef) {\n const { __scopeTabs, value, forceMount, children, ...contentProps } = props;\n const context = useTabsContext(__scopeTabs);\n const { shouldMount, contentProps: headlessContentProps } = useTabContent({\n baseId: context.baseId,\n value,\n selectedValue: context.value,\n orientation: context.orientation,\n forceMount\n });\n if (!shouldMount) {\n return null;\n }\n return /* @__PURE__ */ jsx(\n TabsContentFrame,\n {\n ...headlessContentProps,\n ...contentProps,\n ref: forwardedRef,\n children\n },\n value\n );\n }\n);\nconst TabsComponent = createStyledHOC(\n TabsFrame,\n function Tabs(props, forwardedRef) {\n const {\n __scopeTabs,\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = \"horizontal\",\n dir,\n activationMode = \"automatic\",\n ...tabsProps\n } = props;\n const {\n value,\n setValue,\n baseId,\n direction,\n triggersCount,\n registerTrigger,\n unregisterTrigger,\n tabsProps: headlessTabsProps\n } = useTabs({\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation,\n dir,\n activationMode\n });\n return /* @__PURE__ */ jsx(\n TabsProvider,\n {\n scope: __scopeTabs,\n baseId,\n value,\n onChange: setValue,\n orientation,\n dir: direction,\n activationMode,\n registerTrigger,\n triggersCount,\n unregisterTrigger,\n children: /* @__PURE__ */ jsx(\n TabsFrame,\n {\n direction,\n ...headlessTabsProps,\n ...tabsProps,\n ref: forwardedRef\n }\n )\n }\n );\n }\n);\nconst Tabs2 = withStaticProperties(TabsComponent, {\n Frame: TabsFrame,\n List: TabsList,\n Tab: TabsTab,\n Content: TabsContent\n});\nexport {\n Tabs2 as Tabs,\n TabsContent,\n TabsContentFrame,\n TabsFrame,\n TabsList,\n TabsListFrame,\n TabsTab,\n TabsTabFrame\n};\n//# sourceMappingURL=Tabs.js.map\n"],"mappings":"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"}