@tamagui/tabs-headless 2.0.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 (41) hide show
  1. package/dist/cjs/index.cjs +18 -0
  2. package/dist/cjs/index.js +15 -0
  3. package/dist/cjs/index.js.map +6 -0
  4. package/dist/cjs/index.native.js +21 -0
  5. package/dist/cjs/index.native.js.map +1 -0
  6. package/dist/cjs/useTabs.cjs +258 -0
  7. package/dist/cjs/useTabs.js +210 -0
  8. package/dist/cjs/useTabs.js.map +6 -0
  9. package/dist/cjs/useTabs.native.js +276 -0
  10. package/dist/cjs/useTabs.native.js.map +1 -0
  11. package/dist/esm/index.js +2 -0
  12. package/dist/esm/index.js.map +6 -0
  13. package/dist/esm/index.mjs +2 -0
  14. package/dist/esm/index.mjs.map +1 -0
  15. package/dist/esm/index.native.js +2 -0
  16. package/dist/esm/index.native.js.map +1 -0
  17. package/dist/esm/useTabs.js +190 -0
  18. package/dist/esm/useTabs.js.map +6 -0
  19. package/dist/esm/useTabs.mjs +220 -0
  20. package/dist/esm/useTabs.mjs.map +1 -0
  21. package/dist/esm/useTabs.native.js +235 -0
  22. package/dist/esm/useTabs.native.js.map +1 -0
  23. package/dist/jsx/index.js +2 -0
  24. package/dist/jsx/index.js.map +6 -0
  25. package/dist/jsx/index.mjs +2 -0
  26. package/dist/jsx/index.mjs.map +1 -0
  27. package/dist/jsx/index.native.js +21 -0
  28. package/dist/jsx/index.native.js.map +1 -0
  29. package/dist/jsx/useTabs.js +190 -0
  30. package/dist/jsx/useTabs.js.map +6 -0
  31. package/dist/jsx/useTabs.mjs +220 -0
  32. package/dist/jsx/useTabs.mjs.map +1 -0
  33. package/dist/jsx/useTabs.native.js +276 -0
  34. package/dist/jsx/useTabs.native.js.map +1 -0
  35. package/package.json +54 -0
  36. package/src/index.ts +1 -0
  37. package/src/useTabs.tsx +406 -0
  38. package/types/index.d.ts +2 -0
  39. package/types/index.d.ts.map +1 -0
  40. package/types/useTabs.d.ts +132 -0
  41. package/types/useTabs.d.ts.map +1 -0
@@ -0,0 +1,190 @@
1
+ import { composeEventHandlers } from "@tamagui/helpers";
2
+ import { useControllableState } from "@tamagui/use-controllable-state";
3
+ import { useDirection } from "@tamagui/use-direction";
4
+ import * as React from "react";
5
+ import { useCallback, useId, useRef, useState } from "react";
6
+ function useTabs(props = {}) {
7
+ const {
8
+ value: valueProp,
9
+ onValueChange,
10
+ defaultValue = "",
11
+ orientation = "horizontal",
12
+ dir,
13
+ activationMode = "automatic",
14
+ loop = !0
15
+ } = props, direction = useDirection(dir), baseId = useId(), [value, setValue] = useControllableState({
16
+ prop: valueProp,
17
+ onChange: onValueChange,
18
+ defaultProp: defaultValue
19
+ }), tabRefs = useRef(/* @__PURE__ */ new Map()), [tabValues, setTabValues] = useState([]), registerTab = useCallback((tabValue, element) => {
20
+ element ? (tabRefs.current.set(tabValue, element), setTabValues((prev) => prev.includes(tabValue) ? prev : [...prev, tabValue])) : (tabRefs.current.delete(tabValue), setTabValues((prev) => prev.filter((v) => v !== tabValue)));
21
+ }, []), focusTab = useCallback((tabValue) => {
22
+ tabRefs.current.get(tabValue)?.focus();
23
+ }, []), getNextTab = useCallback(
24
+ (currentValue, direction2) => {
25
+ const currentIndex = tabValues.indexOf(currentValue);
26
+ if (currentIndex === -1) return null;
27
+ let nextIndex = currentIndex + direction2;
28
+ if (loop)
29
+ nextIndex = (nextIndex + tabValues.length) % tabValues.length;
30
+ else if (nextIndex < 0 || nextIndex >= tabValues.length) return null;
31
+ return tabValues[nextIndex] ?? null;
32
+ },
33
+ [tabValues, loop]
34
+ ), handleKeyDown = useCallback(
35
+ (tabValue) => (event) => {
36
+ const isHorizontal = orientation === "horizontal", isRtl = direction === "rtl";
37
+ let nextTab = null;
38
+ switch (event.key) {
39
+ case "ArrowRight":
40
+ isHorizontal && (nextTab = getNextTab(tabValue, isRtl ? -1 : 1));
41
+ break;
42
+ case "ArrowLeft":
43
+ isHorizontal && (nextTab = getNextTab(tabValue, isRtl ? 1 : -1));
44
+ break;
45
+ case "ArrowDown":
46
+ isHorizontal || (nextTab = getNextTab(tabValue, 1));
47
+ break;
48
+ case "ArrowUp":
49
+ isHorizontal || (nextTab = getNextTab(tabValue, -1));
50
+ break;
51
+ case "Home":
52
+ nextTab = tabValues[0] ?? null;
53
+ break;
54
+ case "End":
55
+ nextTab = tabValues[tabValues.length - 1] ?? null;
56
+ break;
57
+ case " ":
58
+ case "Enter":
59
+ activationMode === "manual" && (setValue(tabValue), event.preventDefault());
60
+ return;
61
+ }
62
+ nextTab && (event.preventDefault(), focusTab(nextTab), activationMode === "automatic" && setValue(nextTab));
63
+ },
64
+ [orientation, direction, getNextTab, tabValues, activationMode, setValue, focusTab]
65
+ ), getTabProps = useCallback(
66
+ (tabValue, disabled) => {
67
+ const isSelected = value === tabValue, triggerId = makeTriggerId(baseId, tabValue), contentId = makeContentId(baseId, tabValue);
68
+ return {
69
+ role: "tab",
70
+ id: triggerId,
71
+ "aria-selected": isSelected,
72
+ "aria-controls": contentId,
73
+ "data-state": isSelected ? "active" : "inactive",
74
+ ...disabled && { "data-disabled": "" },
75
+ disabled,
76
+ tabIndex: isSelected ? 0 : -1,
77
+ onKeyDown: disabled ? () => {
78
+ } : handleKeyDown(tabValue),
79
+ onClick: (event) => {
80
+ !disabled && !isSelected && setValue(tabValue);
81
+ },
82
+ onFocus: (event) => {
83
+ registerTab(tabValue, event.currentTarget), !disabled && !isSelected && activationMode === "automatic" && setValue(tabValue);
84
+ }
85
+ };
86
+ },
87
+ [value, baseId, handleKeyDown, setValue, activationMode, registerTab]
88
+ ), getContentProps = useCallback(
89
+ (tabValue) => {
90
+ const isSelected = value === tabValue, triggerId = makeTriggerId(baseId, tabValue);
91
+ return {
92
+ role: "tabpanel",
93
+ id: makeContentId(baseId, tabValue),
94
+ "aria-labelledby": triggerId,
95
+ "data-state": isSelected ? "active" : "inactive",
96
+ "data-orientation": orientation,
97
+ hidden: !isSelected,
98
+ tabIndex: 0
99
+ };
100
+ },
101
+ [value, baseId, orientation]
102
+ );
103
+ return {
104
+ value,
105
+ setValue,
106
+ direction,
107
+ tabsProps: {
108
+ "data-orientation": orientation,
109
+ dir: direction
110
+ },
111
+ listProps: {
112
+ role: "tablist",
113
+ "aria-orientation": orientation
114
+ },
115
+ getTabProps,
116
+ getContentProps,
117
+ contextValue: {
118
+ baseId,
119
+ value,
120
+ setValue,
121
+ orientation,
122
+ direction,
123
+ activationMode,
124
+ loop
125
+ }
126
+ };
127
+ }
128
+ const TabsContext = React.createContext(null), TabsProvider = TabsContext.Provider;
129
+ function useTabsContext() {
130
+ const context = React.useContext(TabsContext);
131
+ if (!context)
132
+ throw new Error("useTabsContext must be used within a TabsProvider");
133
+ return context;
134
+ }
135
+ function useTab(props) {
136
+ const { value: tabValue, disabled, onPress, onKeyDown, onFocus } = props, context = useTabsContext(), { value, setValue, baseId, activationMode, orientation, direction, loop } = context, isSelected = value === tabValue, triggerId = makeTriggerId(baseId, tabValue), contentId = makeContentId(baseId, tabValue), ref = useRef(null);
137
+ return {
138
+ isSelected,
139
+ tabProps: {
140
+ ref,
141
+ role: "tab",
142
+ id: triggerId,
143
+ "aria-selected": isSelected,
144
+ "aria-controls": contentId,
145
+ "data-state": isSelected ? "active" : "inactive",
146
+ ...disabled && { "data-disabled": "" },
147
+ disabled,
148
+ tabIndex: isSelected ? 0 : -1,
149
+ onKeyDown: composeEventHandlers(onKeyDown, (event) => {
150
+ disabled || [" ", "Enter"].includes(event.key) && (setValue(tabValue), event.preventDefault());
151
+ }),
152
+ onPress: composeEventHandlers(onPress, () => {
153
+ !disabled && !isSelected && setValue(tabValue);
154
+ }),
155
+ onFocus: composeEventHandlers(onFocus, () => {
156
+ !disabled && !isSelected && activationMode === "automatic" && setValue(tabValue);
157
+ })
158
+ }
159
+ };
160
+ }
161
+ function useTabContent(props) {
162
+ const { value: tabValue, forceMount } = props, context = useTabsContext(), { value, baseId, orientation } = context, isSelected = value === tabValue, triggerId = makeTriggerId(baseId, tabValue), contentId = makeContentId(baseId, tabValue);
163
+ return {
164
+ isSelected,
165
+ shouldMount: forceMount || isSelected,
166
+ contentProps: {
167
+ role: "tabpanel",
168
+ id: contentId,
169
+ "aria-labelledby": triggerId,
170
+ "data-state": isSelected ? "active" : "inactive",
171
+ "data-orientation": orientation,
172
+ hidden: !isSelected,
173
+ tabIndex: 0
174
+ }
175
+ };
176
+ }
177
+ function makeTriggerId(baseId, value) {
178
+ return `${baseId}-trigger-${value}`;
179
+ }
180
+ function makeContentId(baseId, value) {
181
+ return `${baseId}-content-${value}`;
182
+ }
183
+ export {
184
+ TabsProvider,
185
+ useTab,
186
+ useTabContent,
187
+ useTabs,
188
+ useTabsContext
189
+ };
190
+ //# sourceMappingURL=useTabs.js.map
@@ -0,0 +1,6 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/useTabs.tsx"],
4
+ "mappings": "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",
5
+ "names": ["direction"]
6
+ }
@@ -0,0 +1,220 @@
1
+ import { composeEventHandlers } from "@tamagui/helpers";
2
+ import { useControllableState } from "@tamagui/use-controllable-state";
3
+ import { useDirection } from "@tamagui/use-direction";
4
+ import * as React from "react";
5
+ import { useCallback, useId, useRef, useState } from "react";
6
+ function useTabs(props = {}) {
7
+ const {
8
+ value: valueProp,
9
+ onValueChange,
10
+ defaultValue = "",
11
+ orientation = "horizontal",
12
+ dir,
13
+ activationMode = "automatic",
14
+ loop = !0
15
+ } = props,
16
+ direction = useDirection(dir),
17
+ baseId = useId(),
18
+ [value, setValue] = useControllableState({
19
+ prop: valueProp,
20
+ onChange: onValueChange,
21
+ defaultProp: defaultValue
22
+ }),
23
+ tabRefs = useRef(/* @__PURE__ */new Map()),
24
+ [tabValues, setTabValues] = useState([]),
25
+ registerTab = useCallback((tabValue, element) => {
26
+ element ? (tabRefs.current.set(tabValue, element), setTabValues(prev => prev.includes(tabValue) ? prev : [...prev, tabValue])) : (tabRefs.current.delete(tabValue), setTabValues(prev => prev.filter(v => v !== tabValue)));
27
+ }, []),
28
+ focusTab = useCallback(tabValue => {
29
+ tabRefs.current.get(tabValue)?.focus();
30
+ }, []),
31
+ getNextTab = useCallback((currentValue, direction2) => {
32
+ const currentIndex = tabValues.indexOf(currentValue);
33
+ if (currentIndex === -1) return null;
34
+ let nextIndex = currentIndex + direction2;
35
+ if (loop) nextIndex = (nextIndex + tabValues.length) % tabValues.length;else if (nextIndex < 0 || nextIndex >= tabValues.length) return null;
36
+ return tabValues[nextIndex] ?? null;
37
+ }, [tabValues, loop]),
38
+ handleKeyDown = useCallback(tabValue => event => {
39
+ const isHorizontal = orientation === "horizontal",
40
+ isRtl = direction === "rtl";
41
+ let nextTab = null;
42
+ switch (event.key) {
43
+ case "ArrowRight":
44
+ isHorizontal && (nextTab = getNextTab(tabValue, isRtl ? -1 : 1));
45
+ break;
46
+ case "ArrowLeft":
47
+ isHorizontal && (nextTab = getNextTab(tabValue, isRtl ? 1 : -1));
48
+ break;
49
+ case "ArrowDown":
50
+ isHorizontal || (nextTab = getNextTab(tabValue, 1));
51
+ break;
52
+ case "ArrowUp":
53
+ isHorizontal || (nextTab = getNextTab(tabValue, -1));
54
+ break;
55
+ case "Home":
56
+ nextTab = tabValues[0] ?? null;
57
+ break;
58
+ case "End":
59
+ nextTab = tabValues[tabValues.length - 1] ?? null;
60
+ break;
61
+ case " ":
62
+ case "Enter":
63
+ activationMode === "manual" && (setValue(tabValue), event.preventDefault());
64
+ return;
65
+ }
66
+ nextTab && (event.preventDefault(), focusTab(nextTab), activationMode === "automatic" && setValue(nextTab));
67
+ }, [orientation, direction, getNextTab, tabValues, activationMode, setValue, focusTab]),
68
+ getTabProps = useCallback((tabValue, disabled) => {
69
+ const isSelected = value === tabValue,
70
+ triggerId = makeTriggerId(baseId, tabValue),
71
+ contentId = makeContentId(baseId, tabValue);
72
+ return {
73
+ role: "tab",
74
+ id: triggerId,
75
+ "aria-selected": isSelected,
76
+ "aria-controls": contentId,
77
+ "data-state": isSelected ? "active" : "inactive",
78
+ ...(disabled && {
79
+ "data-disabled": ""
80
+ }),
81
+ disabled,
82
+ tabIndex: isSelected ? 0 : -1,
83
+ onKeyDown: disabled ? () => {} : handleKeyDown(tabValue),
84
+ onClick: event => {
85
+ !disabled && !isSelected && setValue(tabValue);
86
+ },
87
+ onFocus: event => {
88
+ registerTab(tabValue, event.currentTarget), !disabled && !isSelected && activationMode === "automatic" && setValue(tabValue);
89
+ }
90
+ };
91
+ }, [value, baseId, handleKeyDown, setValue, activationMode, registerTab]),
92
+ getContentProps = useCallback(tabValue => {
93
+ const isSelected = value === tabValue,
94
+ triggerId = makeTriggerId(baseId, tabValue);
95
+ return {
96
+ role: "tabpanel",
97
+ id: makeContentId(baseId, tabValue),
98
+ "aria-labelledby": triggerId,
99
+ "data-state": isSelected ? "active" : "inactive",
100
+ "data-orientation": orientation,
101
+ hidden: !isSelected,
102
+ tabIndex: 0
103
+ };
104
+ }, [value, baseId, orientation]);
105
+ return {
106
+ value,
107
+ setValue,
108
+ direction,
109
+ tabsProps: {
110
+ "data-orientation": orientation,
111
+ dir: direction
112
+ },
113
+ listProps: {
114
+ role: "tablist",
115
+ "aria-orientation": orientation
116
+ },
117
+ getTabProps,
118
+ getContentProps,
119
+ contextValue: {
120
+ baseId,
121
+ value,
122
+ setValue,
123
+ orientation,
124
+ direction,
125
+ activationMode,
126
+ loop
127
+ }
128
+ };
129
+ }
130
+ const TabsContext = React.createContext(null),
131
+ TabsProvider = TabsContext.Provider;
132
+ function useTabsContext() {
133
+ const context = React.useContext(TabsContext);
134
+ if (!context) throw new Error("useTabsContext must be used within a TabsProvider");
135
+ return context;
136
+ }
137
+ function useTab(props) {
138
+ const {
139
+ value: tabValue,
140
+ disabled,
141
+ onPress,
142
+ onKeyDown,
143
+ onFocus
144
+ } = props,
145
+ context = useTabsContext(),
146
+ {
147
+ value,
148
+ setValue,
149
+ baseId,
150
+ activationMode,
151
+ orientation,
152
+ direction,
153
+ loop
154
+ } = context,
155
+ isSelected = value === tabValue,
156
+ triggerId = makeTriggerId(baseId, tabValue),
157
+ contentId = makeContentId(baseId, tabValue),
158
+ ref = useRef(null);
159
+ return {
160
+ isSelected,
161
+ tabProps: {
162
+ ref,
163
+ role: "tab",
164
+ id: triggerId,
165
+ "aria-selected": isSelected,
166
+ "aria-controls": contentId,
167
+ "data-state": isSelected ? "active" : "inactive",
168
+ ...(disabled && {
169
+ "data-disabled": ""
170
+ }),
171
+ disabled,
172
+ tabIndex: isSelected ? 0 : -1,
173
+ onKeyDown: composeEventHandlers(onKeyDown, event => {
174
+ disabled || [" ", "Enter"].includes(event.key) && (setValue(tabValue), event.preventDefault());
175
+ }),
176
+ onPress: composeEventHandlers(onPress, () => {
177
+ !disabled && !isSelected && setValue(tabValue);
178
+ }),
179
+ onFocus: composeEventHandlers(onFocus, () => {
180
+ !disabled && !isSelected && activationMode === "automatic" && setValue(tabValue);
181
+ })
182
+ }
183
+ };
184
+ }
185
+ function useTabContent(props) {
186
+ const {
187
+ value: tabValue,
188
+ forceMount
189
+ } = props,
190
+ context = useTabsContext(),
191
+ {
192
+ value,
193
+ baseId,
194
+ orientation
195
+ } = context,
196
+ isSelected = value === tabValue,
197
+ triggerId = makeTriggerId(baseId, tabValue),
198
+ contentId = makeContentId(baseId, tabValue);
199
+ return {
200
+ isSelected,
201
+ shouldMount: forceMount || isSelected,
202
+ contentProps: {
203
+ role: "tabpanel",
204
+ id: contentId,
205
+ "aria-labelledby": triggerId,
206
+ "data-state": isSelected ? "active" : "inactive",
207
+ "data-orientation": orientation,
208
+ hidden: !isSelected,
209
+ tabIndex: 0
210
+ }
211
+ };
212
+ }
213
+ function makeTriggerId(baseId, value) {
214
+ return `${baseId}-trigger-${value}`;
215
+ }
216
+ function makeContentId(baseId, value) {
217
+ return `${baseId}-content-${value}`;
218
+ }
219
+ export { TabsProvider, useTab, useTabContent, useTabs, useTabsContext };
220
+ //# sourceMappingURL=useTabs.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["composeEventHandlers","useControllableState","useDirection","React","useCallback","useId","useRef","useState","useTabs","props","value","valueProp","onValueChange","defaultValue","orientation","dir","activationMode","loop","direction","baseId","setValue","prop","onChange","defaultProp","tabRefs","Map","tabValues","setTabValues","registerTab","tabValue","element","current","set","prev","includes","delete","filter","v","focusTab","get","focus","getNextTab","currentValue","direction2","currentIndex","indexOf","nextIndex","length","handleKeyDown","event","isHorizontal","isRtl","nextTab","key","preventDefault","getTabProps","disabled","isSelected","triggerId","makeTriggerId","contentId","makeContentId","role","id","tabIndex","onKeyDown","onClick","onFocus","currentTarget","getContentProps","hidden","tabsProps","listProps","contextValue","TabsContext","createContext","TabsProvider","Provider","useTabsContext","context","useContext","Error","useTab","onPress","ref","tabProps","useTabContent","forceMount","shouldMount","contentProps"],"sources":["../../src/useTabs.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}