@zag-js/tabs 0.70.0 → 0.71.0
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/index.js +59 -106
- package/dist/index.mjs +10 -32
- package/package.json +9 -10
- package/dist/index.js.map +0 -1
- package/dist/index.mjs.map +0 -1
- package/src/index.ts +0 -15
- package/src/tabs.anatomy.ts +0 -4
- package/src/tabs.connect.ts +0 -201
- package/src/tabs.dom.ts +0 -56
- package/src/tabs.machine.ts +0 -283
- package/src/tabs.props.ts +0 -27
- package/src/tabs.types.ts +0 -214
package/src/tabs.types.ts
DELETED
|
@@ -1,214 +0,0 @@
|
|
|
1
|
-
import type { Machine, StateMachine as S } from "@zag-js/core"
|
|
2
|
-
import type { CommonProperties, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
|
|
3
|
-
|
|
4
|
-
/* -----------------------------------------------------------------------------
|
|
5
|
-
* Callback details
|
|
6
|
-
* -----------------------------------------------------------------------------*/
|
|
7
|
-
|
|
8
|
-
export interface ValueChangeDetails {
|
|
9
|
-
value: string
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export interface FocusChangeDetails {
|
|
13
|
-
focusedValue: string
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
/* -----------------------------------------------------------------------------
|
|
17
|
-
* Machine context
|
|
18
|
-
* -----------------------------------------------------------------------------*/
|
|
19
|
-
|
|
20
|
-
export interface IntlTranslations {
|
|
21
|
-
listLabel?: string
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export type ElementIds = Partial<{
|
|
25
|
-
root: string
|
|
26
|
-
trigger: string
|
|
27
|
-
list: string
|
|
28
|
-
content: string
|
|
29
|
-
indicator: string
|
|
30
|
-
}>
|
|
31
|
-
|
|
32
|
-
interface PublicContext extends DirectionProperty, CommonProperties {
|
|
33
|
-
/**
|
|
34
|
-
* The ids of the elements in the tabs. Useful for composition.
|
|
35
|
-
*/
|
|
36
|
-
ids?: ElementIds
|
|
37
|
-
/**
|
|
38
|
-
* Specifies the localized strings that identifies the accessibility elements and their states
|
|
39
|
-
*/
|
|
40
|
-
translations?: IntlTranslations
|
|
41
|
-
/**
|
|
42
|
-
* Whether the keyboard navigation will loop from last tab to first, and vice versa.
|
|
43
|
-
* @default true
|
|
44
|
-
*/
|
|
45
|
-
loopFocus: boolean
|
|
46
|
-
/**
|
|
47
|
-
* The selected tab id
|
|
48
|
-
*/
|
|
49
|
-
value: string | null
|
|
50
|
-
/**
|
|
51
|
-
* The orientation of the tabs. Can be `horizontal` or `vertical`
|
|
52
|
-
* - `horizontal`: only left and right arrow key navigation will work.
|
|
53
|
-
* - `vertical`: only up and down arrow key navigation will work.
|
|
54
|
-
*
|
|
55
|
-
* @default "horizontal"
|
|
56
|
-
*/
|
|
57
|
-
orientation?: "horizontal" | "vertical"
|
|
58
|
-
/**
|
|
59
|
-
* The activation mode of the tabs. Can be `manual` or `automatic`
|
|
60
|
-
* - `manual`: Tabs are activated when clicked or press `enter` key.
|
|
61
|
-
* - `automatic`: Tabs are activated when receiving focus
|
|
62
|
-
*
|
|
63
|
-
* @default "automatic"
|
|
64
|
-
*/
|
|
65
|
-
activationMode?: "manual" | "automatic"
|
|
66
|
-
/**
|
|
67
|
-
* Callback to be called when the selected/active tab changes
|
|
68
|
-
*/
|
|
69
|
-
onValueChange?: (details: ValueChangeDetails) => void
|
|
70
|
-
/**
|
|
71
|
-
* Callback to be called when the focused tab changes
|
|
72
|
-
*/
|
|
73
|
-
onFocusChange?: (details: FocusChangeDetails) => void
|
|
74
|
-
/**
|
|
75
|
-
* Whether the tab is composite
|
|
76
|
-
*/
|
|
77
|
-
composite: boolean
|
|
78
|
-
/**
|
|
79
|
-
* Whether the active tab can be deselected when clicking on it.
|
|
80
|
-
*/
|
|
81
|
-
deselectable?: boolean
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
export type UserDefinedContext = RequiredBy<PublicContext, "id">
|
|
85
|
-
|
|
86
|
-
type ComputedContext = Readonly<{}>
|
|
87
|
-
|
|
88
|
-
interface IndicatorState {
|
|
89
|
-
rendered: boolean
|
|
90
|
-
rect: Partial<{ left: string; top: string; width: string; height: string }>
|
|
91
|
-
transition: boolean
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
interface PrivateContext {
|
|
95
|
-
/**
|
|
96
|
-
* @internal
|
|
97
|
-
* The focused tab id
|
|
98
|
-
*/
|
|
99
|
-
focusedValue: string | null
|
|
100
|
-
/**
|
|
101
|
-
* @internal
|
|
102
|
-
* The active tab indicator details
|
|
103
|
-
*/
|
|
104
|
-
indicatorState: IndicatorState
|
|
105
|
-
/**
|
|
106
|
-
* @internal
|
|
107
|
-
* Function to clean up the observer for the active tab's rect
|
|
108
|
-
*/
|
|
109
|
-
indicatorCleanup?: VoidFunction | null
|
|
110
|
-
/**
|
|
111
|
-
* @internal
|
|
112
|
-
* Whether the radio group is in server-side rendering
|
|
113
|
-
*/
|
|
114
|
-
ssr: boolean
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
export interface MachineContext extends PublicContext, ComputedContext, PrivateContext {}
|
|
118
|
-
|
|
119
|
-
export interface MachineState {
|
|
120
|
-
value: "idle" | "focused"
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
export type State = S.State<MachineContext, MachineState>
|
|
124
|
-
|
|
125
|
-
export type Send = S.Send<S.AnyEventObject>
|
|
126
|
-
|
|
127
|
-
export type Service = Machine<MachineContext, MachineState, S.AnyEventObject>
|
|
128
|
-
|
|
129
|
-
/* -----------------------------------------------------------------------------
|
|
130
|
-
* Component API
|
|
131
|
-
* -----------------------------------------------------------------------------*/
|
|
132
|
-
|
|
133
|
-
export interface TriggerProps {
|
|
134
|
-
/**
|
|
135
|
-
* The value of the tab
|
|
136
|
-
*/
|
|
137
|
-
value: string
|
|
138
|
-
/**
|
|
139
|
-
* Whether the tab is disabled
|
|
140
|
-
*/
|
|
141
|
-
disabled?: boolean
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
export interface TriggerState {
|
|
145
|
-
/**
|
|
146
|
-
* Whether the tab is selected
|
|
147
|
-
*/
|
|
148
|
-
selected: boolean
|
|
149
|
-
/**
|
|
150
|
-
* Whether the tab is focused
|
|
151
|
-
*/
|
|
152
|
-
focused: boolean
|
|
153
|
-
/**
|
|
154
|
-
* Whether the tab is disabled
|
|
155
|
-
*/
|
|
156
|
-
disabled: boolean
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
export interface ContentProps {
|
|
160
|
-
/**
|
|
161
|
-
* The value of the tab
|
|
162
|
-
*/
|
|
163
|
-
value: string
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
export interface MachineApi<T extends PropTypes = PropTypes> {
|
|
167
|
-
/**
|
|
168
|
-
* The current value of the tabs.
|
|
169
|
-
*/
|
|
170
|
-
value: string | null
|
|
171
|
-
/**
|
|
172
|
-
* The value of the tab that is currently focused.
|
|
173
|
-
*/
|
|
174
|
-
focusedValue: string | null
|
|
175
|
-
/**
|
|
176
|
-
* Sets the value of the tabs.
|
|
177
|
-
*/
|
|
178
|
-
setValue(value: string): void
|
|
179
|
-
/**
|
|
180
|
-
* Clears the value of the tabs.
|
|
181
|
-
*/
|
|
182
|
-
clearValue(): void
|
|
183
|
-
/**
|
|
184
|
-
* Sets the indicator rect to the tab with the given value
|
|
185
|
-
*/
|
|
186
|
-
setIndicatorRect(value: string): void
|
|
187
|
-
/**
|
|
188
|
-
* Synchronizes the tab index of the content element.
|
|
189
|
-
* Useful when rendering tabs within a select or combobox
|
|
190
|
-
*/
|
|
191
|
-
syncTabIndex(): void
|
|
192
|
-
/**
|
|
193
|
-
* Set focus on the selected tab trigger
|
|
194
|
-
*/
|
|
195
|
-
focus(): void
|
|
196
|
-
/**
|
|
197
|
-
* Selects the next tab
|
|
198
|
-
*/
|
|
199
|
-
selectNext(fromValue?: string): void
|
|
200
|
-
/**
|
|
201
|
-
* Selects the previous tab
|
|
202
|
-
*/
|
|
203
|
-
selectPrev(fromValue?: string): void
|
|
204
|
-
/**
|
|
205
|
-
* Returns the state of the trigger with the given props
|
|
206
|
-
*/
|
|
207
|
-
getTriggerState(props: TriggerProps): TriggerState
|
|
208
|
-
|
|
209
|
-
getRootProps(): T["element"]
|
|
210
|
-
getListProps(): T["element"]
|
|
211
|
-
getTriggerProps(props: TriggerProps): T["button"]
|
|
212
|
-
getContentProps(props: ContentProps): T["element"]
|
|
213
|
-
getIndicatorProps(): T["element"]
|
|
214
|
-
}
|