@tamagui/tabs-headless 2.7.7 → 3.0.0-beta.1091.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.
- package/dist/cjs/index.cjs +9 -11
- package/dist/cjs/index.native.cjs +20 -0
- package/dist/cjs/index.native.js +9 -10
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/cjs/useTabs.cjs +113 -280
- package/dist/cjs/useTabs.native.cjs +149 -0
- package/dist/cjs/useTabs.native.js +123 -292
- package/dist/cjs/useTabs.native.js.map +1 -1
- package/dist/esm/index.js +1 -2
- package/dist/esm/index.mjs +1 -2
- package/dist/esm/index.native.js +1 -2
- package/dist/esm/useTabs.mjs +95 -254
- package/dist/esm/useTabs.mjs.map +1 -1
- package/dist/esm/useTabs.native.js +104 -266
- package/dist/esm/useTabs.native.js.map +1 -1
- package/dist/jsx/index.js +1 -2
- package/dist/jsx/index.mjs +1 -2
- package/dist/jsx/index.native.cjs +20 -0
- package/dist/jsx/index.native.js +9 -10
- package/dist/jsx/index.native.js.map +1 -1
- package/dist/jsx/useTabs.mjs +95 -254
- package/dist/jsx/useTabs.mjs.map +1 -1
- package/dist/jsx/useTabs.native.cjs +149 -0
- package/dist/jsx/useTabs.native.js +123 -292
- package/dist/jsx/useTabs.native.js.map +1 -1
- package/package.json +7 -6
- package/src/useTabs.tsx +112 -296
- package/types/useTabs.d.ts +54 -75
- package/types/useTabs.d.ts.map +1 -1
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/index.mjs.map +0 -1
- package/dist/esm/index.native.js.map +0 -1
- package/dist/jsx/index.js.map +0 -1
- package/dist/jsx/index.mjs.map +0 -1
|
@@ -7,314 +7,145 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
|
7
7
|
var __getProtoOf = Object.getPrototypeOf;
|
|
8
8
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
9
|
var __export = (target, all) => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
for (var name in all) __defProp(target, name, {
|
|
11
|
+
get: all[name],
|
|
12
|
+
enumerable: true
|
|
13
|
+
});
|
|
14
14
|
};
|
|
15
15
|
var __copyProps = (to, from, except, desc) => {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
16
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
17
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
18
|
+
get: () => from[key],
|
|
19
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
return to;
|
|
23
23
|
};
|
|
24
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
28
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
29
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
30
|
-
value: mod,
|
|
31
|
-
enumerable: true
|
|
24
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
25
|
+
value: mod,
|
|
26
|
+
enumerable: true
|
|
32
27
|
}) : target, mod));
|
|
33
|
-
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
34
|
-
value: true
|
|
35
|
-
}), mod);
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
36
29
|
var useTabs_exports = {};
|
|
37
30
|
__export(useTabs_exports, {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
31
|
+
makeContentId: () => makeContentId,
|
|
32
|
+
makeTriggerId: () => makeTriggerId,
|
|
33
|
+
useTab: () => useTab,
|
|
34
|
+
useTabContent: () => useTabContent,
|
|
35
|
+
useTabs: () => useTabs,
|
|
36
|
+
useTabsList: () => useTabsList
|
|
43
37
|
});
|
|
44
38
|
module.exports = __toCommonJS(useTabs_exports);
|
|
45
|
-
var
|
|
39
|
+
var import_constants = require("@tamagui/constants");
|
|
46
40
|
var import_use_controllable_state = require("@tamagui/use-controllable-state");
|
|
47
41
|
var import_use_direction = require("@tamagui/use-direction");
|
|
48
42
|
var React = __toESM(require("react"), 1);
|
|
49
|
-
|
|
43
|
+
function makeTriggerId(baseId, value) {
|
|
44
|
+
return `${baseId}-trigger-${value}`;
|
|
45
|
+
}
|
|
46
|
+
function makeContentId(baseId, value) {
|
|
47
|
+
return `${baseId}-content-${value}`;
|
|
48
|
+
}
|
|
50
49
|
function useTabs() {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
}
|
|
84
|
-
}, []);
|
|
85
|
-
var focusTab = (0, import_react.useCallback)(function (tabValue) {
|
|
86
|
-
var element = tabRefs.current.get(tabValue);
|
|
87
|
-
element === null || element === void 0 ? void 0 : element.focus();
|
|
88
|
-
}, []);
|
|
89
|
-
var getNextTab = (0, import_react.useCallback)(function (currentValue, direction2) {
|
|
90
|
-
var currentIndex = tabValues.indexOf(currentValue);
|
|
91
|
-
if (currentIndex === -1) return null;
|
|
92
|
-
var nextIndex = currentIndex + direction2;
|
|
93
|
-
if (loop) {
|
|
94
|
-
nextIndex = (nextIndex + tabValues.length) % tabValues.length;
|
|
95
|
-
} else {
|
|
96
|
-
if (nextIndex < 0 || nextIndex >= tabValues.length) return null;
|
|
97
|
-
}
|
|
98
|
-
var _tabValues_nextIndex;
|
|
99
|
-
return (_tabValues_nextIndex = tabValues[nextIndex]) !== null && _tabValues_nextIndex !== void 0 ? _tabValues_nextIndex : null;
|
|
100
|
-
}, [tabValues, loop]);
|
|
101
|
-
var handleKeyDown = (0, import_react.useCallback)(function (tabValue) {
|
|
102
|
-
return function (event) {
|
|
103
|
-
var isHorizontal = orientation === "horizontal";
|
|
104
|
-
var isRtl = direction === "rtl";
|
|
105
|
-
var nextTab = null;
|
|
106
|
-
switch (event.key) {
|
|
107
|
-
case "ArrowRight":
|
|
108
|
-
if (isHorizontal) {
|
|
109
|
-
nextTab = getNextTab(tabValue, isRtl ? -1 : 1);
|
|
110
|
-
}
|
|
111
|
-
break;
|
|
112
|
-
case "ArrowLeft":
|
|
113
|
-
if (isHorizontal) {
|
|
114
|
-
nextTab = getNextTab(tabValue, isRtl ? 1 : -1);
|
|
115
|
-
}
|
|
116
|
-
break;
|
|
117
|
-
case "ArrowDown":
|
|
118
|
-
if (!isHorizontal) {
|
|
119
|
-
nextTab = getNextTab(tabValue, 1);
|
|
120
|
-
}
|
|
121
|
-
break;
|
|
122
|
-
case "ArrowUp":
|
|
123
|
-
if (!isHorizontal) {
|
|
124
|
-
nextTab = getNextTab(tabValue, -1);
|
|
125
|
-
}
|
|
126
|
-
break;
|
|
127
|
-
case "Home":
|
|
128
|
-
var _tabValues_;
|
|
129
|
-
nextTab = (_tabValues_ = tabValues[0]) !== null && _tabValues_ !== void 0 ? _tabValues_ : null;
|
|
130
|
-
break;
|
|
131
|
-
case "End":
|
|
132
|
-
var _tabValues_1;
|
|
133
|
-
nextTab = (_tabValues_1 = tabValues[tabValues.length - 1]) !== null && _tabValues_1 !== void 0 ? _tabValues_1 : null;
|
|
134
|
-
break;
|
|
135
|
-
case " ":
|
|
136
|
-
case "Enter":
|
|
137
|
-
if (activationMode === "manual") {
|
|
138
|
-
setValue(tabValue);
|
|
139
|
-
event.preventDefault();
|
|
140
|
-
}
|
|
141
|
-
return;
|
|
142
|
-
}
|
|
143
|
-
if (nextTab) {
|
|
144
|
-
event.preventDefault();
|
|
145
|
-
focusTab(nextTab);
|
|
146
|
-
if (activationMode === "automatic") {
|
|
147
|
-
setValue(nextTab);
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
};
|
|
151
|
-
}, [orientation, direction, getNextTab, tabValues, activationMode, setValue, focusTab]);
|
|
152
|
-
var getTabProps = (0, import_react.useCallback)(function (tabValue, disabled) {
|
|
153
|
-
var isSelected = value === tabValue;
|
|
154
|
-
var triggerId = makeTriggerId(baseId, tabValue);
|
|
155
|
-
var contentId = makeContentId(baseId, tabValue);
|
|
156
|
-
return {
|
|
157
|
-
role: "tab",
|
|
158
|
-
id: triggerId,
|
|
159
|
-
"aria-selected": isSelected,
|
|
160
|
-
"aria-controls": contentId,
|
|
161
|
-
"data-state": isSelected ? "active" : "inactive",
|
|
162
|
-
...(disabled && {
|
|
163
|
-
"data-disabled": ""
|
|
164
|
-
}),
|
|
165
|
-
disabled,
|
|
166
|
-
tabIndex: isSelected ? 0 : -1,
|
|
167
|
-
onKeyDown: disabled ? function () {} : handleKeyDown(tabValue),
|
|
168
|
-
onClick: function (event) {
|
|
169
|
-
if (!disabled && !isSelected) {
|
|
170
|
-
setValue(tabValue);
|
|
171
|
-
}
|
|
172
|
-
},
|
|
173
|
-
onFocus: function (event) {
|
|
174
|
-
registerTab(tabValue, event.currentTarget);
|
|
175
|
-
if (!disabled && !isSelected && activationMode === "automatic") {
|
|
176
|
-
setValue(tabValue);
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
};
|
|
180
|
-
}, [value, baseId, handleKeyDown, setValue, activationMode, registerTab]);
|
|
181
|
-
var getContentProps = (0, import_react.useCallback)(function (tabValue) {
|
|
182
|
-
var isSelected = value === tabValue;
|
|
183
|
-
var triggerId = makeTriggerId(baseId, tabValue);
|
|
184
|
-
var contentId = makeContentId(baseId, tabValue);
|
|
185
|
-
return {
|
|
186
|
-
role: "tabpanel",
|
|
187
|
-
id: contentId,
|
|
188
|
-
"aria-labelledby": triggerId,
|
|
189
|
-
"data-state": isSelected ? "active" : "inactive",
|
|
190
|
-
"data-orientation": orientation,
|
|
191
|
-
hidden: !isSelected,
|
|
192
|
-
tabIndex: 0
|
|
193
|
-
};
|
|
194
|
-
}, [value, baseId, orientation]);
|
|
195
|
-
var contextValue = {
|
|
196
|
-
baseId,
|
|
197
|
-
value,
|
|
198
|
-
setValue,
|
|
199
|
-
orientation,
|
|
200
|
-
direction,
|
|
201
|
-
activationMode,
|
|
202
|
-
loop
|
|
203
|
-
};
|
|
204
|
-
return {
|
|
205
|
-
value,
|
|
206
|
-
setValue,
|
|
207
|
-
direction,
|
|
208
|
-
tabsProps: {
|
|
209
|
-
"data-orientation": orientation,
|
|
210
|
-
dir: direction
|
|
211
|
-
},
|
|
212
|
-
listProps: {
|
|
213
|
-
role: "tablist",
|
|
214
|
-
"aria-orientation": orientation
|
|
215
|
-
},
|
|
216
|
-
getTabProps,
|
|
217
|
-
getContentProps,
|
|
218
|
-
contextValue
|
|
219
|
-
};
|
|
50
|
+
var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
|
|
51
|
+
var { value: valueProp, onValueChange, defaultValue, orientation = "horizontal", dir, activationMode = "automatic" } = props;
|
|
52
|
+
var direction = (0, import_use_direction.useDirection)(dir);
|
|
53
|
+
var baseId = React.useId();
|
|
54
|
+
var [value, setValue] = (0, import_use_controllable_state.useControllableState)({
|
|
55
|
+
prop: valueProp,
|
|
56
|
+
onChange: onValueChange,
|
|
57
|
+
defaultProp: defaultValue !== null && defaultValue !== void 0 ? defaultValue : ""
|
|
58
|
+
});
|
|
59
|
+
var [triggersCount, setTriggersCount] = React.useState(0);
|
|
60
|
+
var registerTrigger = React.useCallback(function() {
|
|
61
|
+
return setTriggersCount(function(count) {
|
|
62
|
+
return count + 1;
|
|
63
|
+
});
|
|
64
|
+
}, []);
|
|
65
|
+
var unregisterTrigger = React.useCallback(function() {
|
|
66
|
+
return setTriggersCount(function(count) {
|
|
67
|
+
return count - 1;
|
|
68
|
+
});
|
|
69
|
+
}, []);
|
|
70
|
+
return {
|
|
71
|
+
value,
|
|
72
|
+
setValue,
|
|
73
|
+
baseId,
|
|
74
|
+
direction,
|
|
75
|
+
orientation,
|
|
76
|
+
activationMode,
|
|
77
|
+
triggersCount,
|
|
78
|
+
registerTrigger,
|
|
79
|
+
unregisterTrigger,
|
|
80
|
+
tabsProps: { "data-orientation": orientation }
|
|
81
|
+
};
|
|
220
82
|
}
|
|
221
|
-
|
|
222
|
-
var
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
83
|
+
function useTabsList(props) {
|
|
84
|
+
var { orientation = "horizontal", disabled = false } = props;
|
|
85
|
+
return { listProps: {
|
|
86
|
+
role: "tablist",
|
|
87
|
+
"aria-orientation": orientation,
|
|
88
|
+
"aria-disabled": disabled || void 0,
|
|
89
|
+
"data-orientation": orientation,
|
|
90
|
+
"data-disabled": disabled ? "" : void 0
|
|
91
|
+
} };
|
|
229
92
|
}
|
|
230
93
|
function useTab(props) {
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
if ([" ", "Enter"].includes(event.key)) {
|
|
269
|
-
setValue(tabValue);
|
|
270
|
-
event.preventDefault();
|
|
271
|
-
}
|
|
272
|
-
}),
|
|
273
|
-
onPress: (0, import_helpers.composeEventHandlers)(onPress, function () {
|
|
274
|
-
if (!disabled && !isSelected) {
|
|
275
|
-
setValue(tabValue);
|
|
276
|
-
}
|
|
277
|
-
}),
|
|
278
|
-
onFocus: (0, import_helpers.composeEventHandlers)(onFocus, function () {
|
|
279
|
-
if (!disabled && !isSelected && activationMode === "automatic") {
|
|
280
|
-
setValue(tabValue);
|
|
281
|
-
}
|
|
282
|
-
})
|
|
283
|
-
}
|
|
284
|
-
};
|
|
94
|
+
var { baseId, value, selectedValue, disabled = false, activationMode = "automatic", onChange } = props;
|
|
95
|
+
var isSelected = value === selectedValue;
|
|
96
|
+
var triggerId = makeTriggerId(baseId, value);
|
|
97
|
+
var contentId = makeContentId(baseId, value);
|
|
98
|
+
return {
|
|
99
|
+
isSelected,
|
|
100
|
+
triggerId,
|
|
101
|
+
contentId,
|
|
102
|
+
tabProps: {
|
|
103
|
+
role: "tab",
|
|
104
|
+
id: triggerId,
|
|
105
|
+
"aria-selected": isSelected,
|
|
106
|
+
"aria-controls": contentId,
|
|
107
|
+
"data-state": isSelected ? "active" : "inactive",
|
|
108
|
+
"data-disabled": disabled ? "" : void 0,
|
|
109
|
+
disabled,
|
|
110
|
+
onPress: function(event) {
|
|
111
|
+
var isPrimaryPointer = !import_constants.isWeb || (event === null || event === void 0 ? void 0 : event.button) === 0 && (event === null || event === void 0 ? void 0 : event.ctrlKey) === false;
|
|
112
|
+
if (!disabled && !isSelected && isPrimaryPointer) {
|
|
113
|
+
onChange(value);
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
...import_constants.isWeb && {
|
|
117
|
+
onKeyDown: function(event) {
|
|
118
|
+
if (!disabled && [" ", "Enter"].includes(event.key)) {
|
|
119
|
+
onChange(value);
|
|
120
|
+
event.preventDefault();
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
onFocus: function() {
|
|
124
|
+
if (!isSelected && !disabled && activationMode !== "manual") {
|
|
125
|
+
onChange(value);
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
};
|
|
285
131
|
}
|
|
286
132
|
function useTabContent(props) {
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
contentProps: {
|
|
304
|
-
role: "tabpanel",
|
|
305
|
-
id: contentId,
|
|
306
|
-
"aria-labelledby": triggerId,
|
|
307
|
-
"data-state": isSelected ? "active" : "inactive",
|
|
308
|
-
"data-orientation": orientation,
|
|
309
|
-
hidden: !isSelected,
|
|
310
|
-
tabIndex: 0
|
|
311
|
-
}
|
|
312
|
-
};
|
|
313
|
-
}
|
|
314
|
-
function makeTriggerId(baseId, value) {
|
|
315
|
-
return `${baseId}-trigger-${value}`;
|
|
316
|
-
}
|
|
317
|
-
function makeContentId(baseId, value) {
|
|
318
|
-
return `${baseId}-content-${value}`;
|
|
133
|
+
var { baseId, value, selectedValue, orientation = "horizontal", forceMount } = props;
|
|
134
|
+
var isSelected = value === selectedValue;
|
|
135
|
+
var shouldMount = Boolean(forceMount) || isSelected;
|
|
136
|
+
return {
|
|
137
|
+
isSelected,
|
|
138
|
+
shouldMount,
|
|
139
|
+
contentProps: {
|
|
140
|
+
role: "tabpanel",
|
|
141
|
+
id: makeContentId(baseId, value),
|
|
142
|
+
"aria-labelledby": makeTriggerId(baseId, value),
|
|
143
|
+
"data-state": isSelected ? "active" : "inactive",
|
|
144
|
+
"data-orientation": orientation,
|
|
145
|
+
hidden: !shouldMount,
|
|
146
|
+
tabIndex: 0
|
|
147
|
+
}
|
|
148
|
+
};
|
|
319
149
|
}
|
|
150
|
+
|
|
320
151
|
//# sourceMappingURL=useTabs.native.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"useTabs.native.js","names":[],"sources":["jsx/useTabs.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 useTabs_exports = {};\n__export(useTabs_exports, {\n makeContentId: () => makeContentId,\n makeTriggerId: () => makeTriggerId,\n useTab: () => useTab,\n useTabContent: () => useTabContent,\n useTabs: () => useTabs,\n useTabsList: () => useTabsList\n});\nmodule.exports = __toCommonJS(useTabs_exports);\nvar import_constants = require(\"@tamagui/constants\");\nvar import_use_controllable_state = require(\"@tamagui/use-controllable-state\");\nvar import_use_direction = require(\"@tamagui/use-direction\");\nvar React = __toESM(require(\"react\"), 1);\nfunction makeTriggerId(baseId, value) {\n return `${baseId}-trigger-${value}`;\n}\nfunction makeContentId(baseId, value) {\n return `${baseId}-content-${value}`;\n}\nfunction useTabs() {\n var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};\n var { value: valueProp, onValueChange, defaultValue, orientation = \"horizontal\", dir, activationMode = \"automatic\" } = props;\n var direction = (0, import_use_direction.useDirection)(dir);\n var baseId = React.useId();\n var [value, setValue] = (0, import_use_controllable_state.useControllableState)({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue !== null && defaultValue !== void 0 ? defaultValue : \"\"\n });\n var [triggersCount, setTriggersCount] = React.useState(0);\n var registerTrigger = React.useCallback(function() {\n return setTriggersCount(function(count) {\n return count + 1;\n });\n }, []);\n var unregisterTrigger = React.useCallback(function() {\n return setTriggersCount(function(count) {\n return count - 1;\n });\n }, []);\n return {\n value,\n setValue,\n baseId,\n direction,\n orientation,\n activationMode,\n triggersCount,\n registerTrigger,\n unregisterTrigger,\n tabsProps: {\n \"data-orientation\": orientation\n }\n };\n}\nfunction useTabsList(props) {\n var { orientation = \"horizontal\", disabled = false } = props;\n return {\n listProps: {\n role: \"tablist\",\n \"aria-orientation\": orientation,\n \"aria-disabled\": disabled || void 0,\n \"data-orientation\": orientation,\n \"data-disabled\": disabled ? \"\" : void 0\n }\n };\n}\nfunction useTab(props) {\n var { baseId, value, selectedValue, disabled = false, activationMode = \"automatic\", onChange } = props;\n var isSelected = value === selectedValue;\n var triggerId = makeTriggerId(baseId, value);\n var contentId = makeContentId(baseId, value);\n return {\n isSelected,\n triggerId,\n contentId,\n tabProps: {\n role: \"tab\",\n id: triggerId,\n \"aria-selected\": isSelected,\n \"aria-controls\": contentId,\n \"data-state\": isSelected ? \"active\" : \"inactive\",\n \"data-disabled\": disabled ? \"\" : void 0,\n disabled,\n onPress: function(event) {\n var isPrimaryPointer = !import_constants.isWeb || (event === null || event === void 0 ? void 0 : event.button) === 0 && (event === null || event === void 0 ? void 0 : event.ctrlKey) === false;\n if (!disabled && !isSelected && isPrimaryPointer) {\n onChange(value);\n }\n },\n ...import_constants.isWeb && {\n onKeyDown: function(event) {\n if (!disabled && [\n \" \",\n \"Enter\"\n ].includes(event.key)) {\n onChange(value);\n event.preventDefault();\n }\n },\n onFocus: function() {\n if (!isSelected && !disabled && activationMode !== \"manual\") {\n onChange(value);\n }\n }\n }\n }\n };\n}\nfunction useTabContent(props) {\n var { baseId, value, selectedValue, orientation = \"horizontal\", forceMount } = props;\n var isSelected = value === selectedValue;\n var shouldMount = Boolean(forceMount) || isSelected;\n return {\n isSelected,\n shouldMount,\n contentProps: {\n role: \"tabpanel\",\n id: makeContentId(baseId, value),\n \"aria-labelledby\": makeTriggerId(baseId, value),\n \"data-state\": isSelected ? \"active\" : \"inactive\",\n \"data-orientation\": orientation,\n hidden: !shouldMount,\n tabIndex: 0\n }\n };\n}\n//# sourceMappingURL=useTabs.js.map\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/tabs-headless",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0-beta.1091.1",
|
|
4
|
+
"license": "MIT",
|
|
4
5
|
"source": "src/index.ts",
|
|
5
6
|
"files": [
|
|
6
7
|
"src",
|
|
@@ -34,13 +35,13 @@
|
|
|
34
35
|
"clean:build": "tamagui-build clean:build"
|
|
35
36
|
},
|
|
36
37
|
"dependencies": {
|
|
37
|
-
"@tamagui/
|
|
38
|
-
"@tamagui/use-controllable-state": "
|
|
39
|
-
"@tamagui/use-direction": "
|
|
38
|
+
"@tamagui/constants": "3.0.0-beta.1091.1",
|
|
39
|
+
"@tamagui/use-controllable-state": "3.0.0-beta.1091.1",
|
|
40
|
+
"@tamagui/use-direction": "3.0.0-beta.1091.1"
|
|
40
41
|
},
|
|
41
42
|
"devDependencies": {
|
|
42
|
-
"@tamagui/build": "
|
|
43
|
-
"react": "
|
|
43
|
+
"@tamagui/build": "3.0.0-beta.1091.1",
|
|
44
|
+
"react": "19.2.3"
|
|
44
45
|
},
|
|
45
46
|
"peerDependencies": {
|
|
46
47
|
"react": ">=19"
|