@ariakit/core 0.3.9 → 0.3.10
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/CHANGELOG.md +5 -0
- package/cjs/__chunks/{2UK5WUJX.cjs → 5CBCKBZ2.cjs} +0 -2
- package/cjs/__chunks/{UTICNXST.cjs → CWDUO5EV.cjs} +4 -4
- package/cjs/__chunks/{5SIVMOID.cjs → HMO4CKUP.cjs} +4 -4
- package/cjs/__chunks/{2LS4JJ4S.cjs → MFSCSSBJ.cjs} +2 -2
- package/cjs/__chunks/{GJFZ5ZPP.cjs → MWNFQD55.cjs} +11 -11
- package/cjs/__chunks/{EFIT5L4X.cjs → Y6PHIDP6.cjs} +7 -7
- package/cjs/__chunks/{UCLKUBNP.cjs → YLMJBIQM.cjs} +16 -12
- package/cjs/__chunks/{JNFZSNOI.cjs → ZXCB7MXN.cjs} +6 -6
- package/cjs/checkbox/checkbox-store.cjs +3 -3
- package/cjs/checkbox/checkbox-store.d.cts +5 -2
- package/cjs/checkbox/checkbox-store.d.ts +5 -2
- package/cjs/collection/collection-store.cjs +3 -3
- package/cjs/collection/collection-store.d.cts +11 -11
- package/cjs/collection/collection-store.d.ts +11 -11
- package/cjs/combobox/combobox-store.cjs +20 -20
- package/cjs/combobox/combobox-store.d.cts +3 -1
- package/cjs/combobox/combobox-store.d.ts +3 -1
- package/cjs/composite/composite-overflow-store.cjs +5 -5
- package/cjs/composite/composite-store.cjs +4 -4
- package/cjs/composite/composite-store.d.cts +128 -54
- package/cjs/composite/composite-store.d.ts +128 -54
- package/cjs/dialog/dialog-store.cjs +4 -4
- package/cjs/disclosure/disclosure-store.cjs +3 -3
- package/cjs/disclosure/disclosure-store.d.cts +33 -27
- package/cjs/disclosure/disclosure-store.d.ts +33 -27
- package/cjs/form/form-store.cjs +7 -7
- package/cjs/form/form-store.d.cts +34 -25
- package/cjs/form/form-store.d.ts +34 -25
- package/cjs/hovercard/hovercard-store.cjs +6 -6
- package/cjs/menu/menu-bar-store.cjs +5 -5
- package/cjs/menu/menu-store.cjs +18 -18
- package/cjs/menubar/menubar-store.cjs +5 -5
- package/cjs/popover/popover-store.cjs +5 -5
- package/cjs/radio/radio-store.cjs +5 -5
- package/cjs/select/select-store.cjs +18 -18
- package/cjs/tab/tab-store.cjs +15 -15
- package/cjs/tab/tab-store.d.cts +15 -4
- package/cjs/tab/tab-store.d.ts +15 -4
- package/cjs/toolbar/toolbar-store.cjs +4 -4
- package/cjs/tooltip/tooltip-store.cjs +7 -7
- package/cjs/utils/store.cjs +2 -2
- package/esm/__chunks/{LT2OYWRD.js → 25MEC56I.js} +1 -1
- package/esm/__chunks/{J6JIOWCS.js → AKMSZ36N.js} +2 -2
- package/esm/__chunks/{A2J4XZ5T.js → K6ELJFXN.js} +0 -2
- package/esm/__chunks/{NKLTHWCR.js → L5RYKTVQ.js} +1 -1
- package/esm/__chunks/{TLN4ALYH.js → MYUKSFP5.js} +10 -6
- package/esm/__chunks/{T3DVYGXI.js → QJ5CUA32.js} +2 -2
- package/esm/__chunks/{EZ2TTBAQ.js → UUFF4PQ6.js} +2 -2
- package/esm/__chunks/{DLX2AS6C.js → VEUNYQYR.js} +2 -2
- package/esm/checkbox/checkbox-store.d.ts +5 -2
- package/esm/checkbox/checkbox-store.js +1 -1
- package/esm/collection/collection-store.d.ts +11 -11
- package/esm/collection/collection-store.js +2 -2
- package/esm/combobox/combobox-store.d.ts +3 -1
- package/esm/combobox/combobox-store.js +6 -6
- package/esm/composite/composite-overflow-store.js +4 -4
- package/esm/composite/composite-store.d.ts +128 -54
- package/esm/composite/composite-store.js +3 -3
- package/esm/dialog/dialog-store.js +3 -3
- package/esm/disclosure/disclosure-store.d.ts +33 -27
- package/esm/disclosure/disclosure-store.js +2 -2
- package/esm/form/form-store.d.ts +34 -25
- package/esm/form/form-store.js +2 -2
- package/esm/hovercard/hovercard-store.js +5 -5
- package/esm/menu/menu-bar-store.js +4 -4
- package/esm/menu/menu-store.js +7 -7
- package/esm/menubar/menubar-store.js +4 -4
- package/esm/popover/popover-store.js +4 -4
- package/esm/radio/radio-store.js +3 -3
- package/esm/select/select-store.js +6 -6
- package/esm/tab/tab-store.d.ts +15 -4
- package/esm/tab/tab-store.js +3 -3
- package/esm/toolbar/toolbar-store.js +3 -3
- package/esm/tooltip/tooltip-store.js +5 -5
- package/esm/utils/store.js +1 -1
- package/package.json +1 -1
|
@@ -9,13 +9,14 @@ export declare function createCompositeStore<T extends CompositeStoreItem = Comp
|
|
|
9
9
|
export type CompositeStoreOrientation = Orientation;
|
|
10
10
|
export interface CompositeStoreItem extends CollectionStoreItem {
|
|
11
11
|
/**
|
|
12
|
-
* The row id of the item. This is only used on two-dimensional
|
|
13
|
-
* (when using
|
|
12
|
+
* The row id of the item. This is only used on two-dimensional composite
|
|
13
|
+
* widgets (when using
|
|
14
|
+
* [`CompositeRow`](https://ariakit.org/reference/composite-row)).
|
|
14
15
|
*/
|
|
15
16
|
rowId?: string;
|
|
16
17
|
/**
|
|
17
|
-
* If enabled, the item will be disabled and users won't be able to focus
|
|
18
|
-
* using arrow keys.
|
|
18
|
+
* If enabled, the item will be disabled and users won't be able to focus on
|
|
19
|
+
* it using arrow keys.
|
|
19
20
|
*/
|
|
20
21
|
disabled?: boolean;
|
|
21
22
|
/**
|
|
@@ -25,7 +26,11 @@ export interface CompositeStoreItem extends CollectionStoreItem {
|
|
|
25
26
|
}
|
|
26
27
|
export interface CompositeStoreState<T extends CompositeStoreItem = CompositeStoreItem> extends CollectionStoreState<T> {
|
|
27
28
|
/**
|
|
28
|
-
* The composite element.
|
|
29
|
+
* The composite element itself. Typically, it's the wrapper element that
|
|
30
|
+
* contains composite items. However, in a combobox, it's the input element.
|
|
31
|
+
*
|
|
32
|
+
* Live examples:
|
|
33
|
+
* - [Sliding Menu](https://ariakit.org/examples/menu-slide)
|
|
29
34
|
*/
|
|
30
35
|
baseElement: HTMLElement | null;
|
|
31
36
|
/**
|
|
@@ -35,6 +40,10 @@ export interface CompositeStoreState<T extends CompositeStoreItem = CompositeSto
|
|
|
35
40
|
* tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex).
|
|
36
41
|
* DOM focus will remain on the composite element while its items receive
|
|
37
42
|
* virtual focus.
|
|
43
|
+
*
|
|
44
|
+
* In both scenarios, the item in focus will carry the
|
|
45
|
+
* [`data-active-item`](https://ariakit.org/guide/styling#data-active-item)
|
|
46
|
+
* attribute.
|
|
38
47
|
* @default false
|
|
39
48
|
*/
|
|
40
49
|
virtualFocus: boolean;
|
|
@@ -51,9 +60,13 @@ export interface CompositeStoreState<T extends CompositeStoreItem = CompositeSto
|
|
|
51
60
|
*/
|
|
52
61
|
orientation: Orientation;
|
|
53
62
|
/**
|
|
54
|
-
* Determines how the
|
|
55
|
-
*
|
|
56
|
-
*
|
|
63
|
+
* Determines how the
|
|
64
|
+
* [`next`](https://ariakit.org/reference/use-composite-store#next) and
|
|
65
|
+
* [`previous`](https://ariakit.org/reference/use-composite-store#previous)
|
|
66
|
+
* functions will behave. If `rtl` is set to `true`, they will be inverted.
|
|
67
|
+
*
|
|
68
|
+
* This only affects the composite widget behavior. You still need to set
|
|
69
|
+
* `dir="rtl"` on HTML/CSS.
|
|
57
70
|
* @default false
|
|
58
71
|
*/
|
|
59
72
|
rtl: boolean;
|
|
@@ -61,15 +74,25 @@ export interface CompositeStoreState<T extends CompositeStoreItem = CompositeSto
|
|
|
61
74
|
* Determines how the focus behaves when the user reaches the end of the
|
|
62
75
|
* composite widget.
|
|
63
76
|
*
|
|
64
|
-
* On one-dimensional
|
|
77
|
+
* On one-dimensional composite widgets:
|
|
65
78
|
* - `true` loops from the last item to the first item and vice-versa.
|
|
66
|
-
* - `horizontal` loops only if
|
|
67
|
-
*
|
|
68
|
-
*
|
|
69
|
-
*
|
|
70
|
-
*
|
|
79
|
+
* - `horizontal` loops only if
|
|
80
|
+
* [`orientation`](https://ariakit.org/reference/composite-provider#orientation)
|
|
81
|
+
* is `horizontal` or not set.
|
|
82
|
+
* - `vertical` loops only if
|
|
83
|
+
* [`orientation`](https://ariakit.org/reference/composite-provider#orientation)
|
|
84
|
+
* is `vertical` or not set.
|
|
85
|
+
* - If
|
|
86
|
+
* [`includesBaseElement`](https://ariakit.org/reference/composite-provider#includesbaseelement)
|
|
87
|
+
* is set to `true` (or
|
|
88
|
+
* [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
|
|
89
|
+
* is initially set to `null`), the composite element will be focused in
|
|
90
|
+
* between the last and first items.
|
|
71
91
|
*
|
|
72
|
-
* On two-dimensional
|
|
92
|
+
* On two-dimensional composite widgets (when using
|
|
93
|
+
* [`CompositeRow`](https://ariakit.org/reference/composite-row) or explicitly
|
|
94
|
+
* passing a [`rowId`](https://ariakit.org/reference/composite-item#rowid)
|
|
95
|
+
* prop to composite items):
|
|
73
96
|
* - `true` loops from the last row/column item to the first item in the same
|
|
74
97
|
* row/column and vice-versa. If it's the last item in the last row, it
|
|
75
98
|
* moves to the first item in the first row and vice-versa.
|
|
@@ -77,71 +100,99 @@ export interface CompositeStoreState<T extends CompositeStoreItem = CompositeSto
|
|
|
77
100
|
* same row.
|
|
78
101
|
* - `vertical` loops only from the last column item to the first item in the
|
|
79
102
|
* column row.
|
|
80
|
-
* - If
|
|
81
|
-
*
|
|
82
|
-
*
|
|
83
|
-
*
|
|
84
|
-
*
|
|
85
|
-
* or
|
|
103
|
+
* - If
|
|
104
|
+
* [`includesBaseElement`](https://ariakit.org/reference/composite-provider#includesbaseelement)
|
|
105
|
+
* is set to `true` (or
|
|
106
|
+
* [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
|
|
107
|
+
* is initially set to `null`), vertical loop will have no effect as moving
|
|
108
|
+
* down from the last row or up from the first row will focus on the
|
|
109
|
+
* composite element.
|
|
110
|
+
* - If
|
|
111
|
+
* [`focusWrap`](https://ariakit.org/reference/composite-provider#focuswrap)
|
|
112
|
+
* matches the value of `focusLoop`, it'll wrap between the last item in the
|
|
113
|
+
* last row or column and the first item in the first row or column and
|
|
114
|
+
* vice-versa.
|
|
86
115
|
* @default false
|
|
87
116
|
*/
|
|
88
117
|
focusLoop: boolean | Orientation;
|
|
89
118
|
/**
|
|
90
|
-
* **Works only on two-dimensional
|
|
91
|
-
*
|
|
92
|
-
* the next row or column
|
|
119
|
+
* **Works only on two-dimensional composite widgets**.
|
|
120
|
+
*
|
|
121
|
+
* If enabled, moving to the next item from the last one in a row or column
|
|
122
|
+
* will focus on the first item in the next row or column and vice-versa.
|
|
93
123
|
* - `true` wraps between rows and columns.
|
|
94
124
|
* - `horizontal` wraps only between rows.
|
|
95
125
|
* - `vertical` wraps only between columns.
|
|
96
|
-
* - If
|
|
97
|
-
*
|
|
98
|
-
*
|
|
126
|
+
* - If
|
|
127
|
+
* [`focusLoop`](https://ariakit.org/reference/composite-provider#focusloop)
|
|
128
|
+
* matches the value of `focusWrap`, it'll wrap between the last item in the
|
|
129
|
+
* last row or column and the first item in the first row or column and
|
|
130
|
+
* vice-versa.
|
|
99
131
|
* @default false
|
|
100
132
|
*/
|
|
101
133
|
focusWrap: boolean | Orientation;
|
|
102
134
|
/**
|
|
103
|
-
* **Works only on two-dimensional
|
|
104
|
-
*
|
|
105
|
-
*
|
|
135
|
+
* **Works only on two-dimensional composite widgets**.
|
|
136
|
+
*
|
|
137
|
+
* If enabled, moving up or down when there's no next item or when the next
|
|
138
|
+
* item is disabled will shift to the item right before it.
|
|
106
139
|
* @default false
|
|
107
140
|
*/
|
|
108
141
|
focusShift: boolean;
|
|
109
142
|
/**
|
|
110
|
-
* The number of times the
|
|
143
|
+
* The number of times the
|
|
144
|
+
* [`move`](https://ariakit.org/reference/use-composite-store#move) function
|
|
145
|
+
* has been called.
|
|
111
146
|
*/
|
|
112
147
|
moves: number;
|
|
113
148
|
/**
|
|
114
|
-
* Indicates if the composite element (
|
|
115
|
-
*
|
|
116
|
-
*
|
|
149
|
+
* Indicates if the composite base element (the one with a [composite
|
|
150
|
+
* role](https://w3c.github.io/aria/#composite)) should be part of the focus
|
|
151
|
+
* order when navigating with arrow keys. In other words, moving to the
|
|
152
|
+
* previous element when the first item is in focus will focus on the
|
|
117
153
|
* composite element itself. The same applies to the last item when moving to
|
|
118
154
|
* the next element.
|
|
119
155
|
*
|
|
120
156
|
* Live examples:
|
|
121
157
|
* - [Submenu with
|
|
122
158
|
* Combobox](https://ariakit.org/examples/menu-nested-combobox)
|
|
159
|
+
* - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
|
|
123
160
|
* @default false
|
|
124
161
|
*/
|
|
125
162
|
includesBaseElement: boolean;
|
|
126
163
|
/**
|
|
127
|
-
* The current
|
|
128
|
-
*
|
|
164
|
+
* The current active item `id`. The active item is the element within the
|
|
165
|
+
* composite widget that has either DOM or virtual focus (in case
|
|
166
|
+
* [`virtualFocus`](https://ariakit.org/reference/composite-provider#virtualfocus)
|
|
167
|
+
* is enabled).
|
|
168
|
+
* - `null` represents the base composite element (the one with a [composite
|
|
169
|
+
* role](https://w3c.github.io/aria/#composite)). Users will be able to
|
|
129
170
|
* navigate out of it using arrow keys.
|
|
130
|
-
* - If `activeId` is initially set to `null`, the
|
|
131
|
-
*
|
|
171
|
+
* - If `activeId` is initially set to `null`, the
|
|
172
|
+
* [`includesBaseElement`](https://ariakit.org/reference/composite-provider#includesbaseelement)
|
|
173
|
+
* prop will also default to `true`, which means the base composite element
|
|
132
174
|
* itself will have focus and users will be able to navigate to it using
|
|
133
175
|
* arrow keys.
|
|
176
|
+
*
|
|
177
|
+
* Live examples:
|
|
178
|
+
* - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
|
|
134
179
|
*/
|
|
135
180
|
activeId: string | null | undefined;
|
|
136
181
|
}
|
|
137
182
|
export interface CompositeStoreFunctions<T extends CompositeStoreItem = CompositeStoreItem> extends CollectionStoreFunctions<T> {
|
|
138
183
|
/**
|
|
139
|
-
* Sets the `baseElement
|
|
184
|
+
* Sets the `baseElement` state.
|
|
140
185
|
*/
|
|
141
186
|
setBaseElement: SetState<CompositeStoreState<T>["baseElement"]>;
|
|
142
187
|
/**
|
|
143
|
-
* Sets the
|
|
144
|
-
*
|
|
188
|
+
* Sets the
|
|
189
|
+
* [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
|
|
190
|
+
* state _without moving focus_. If you want to move focus, use the
|
|
191
|
+
* [`move`](https://ariakit.org/reference/use-composite-store#move) function
|
|
192
|
+
* instead.
|
|
193
|
+
*
|
|
194
|
+
* Live examples:
|
|
195
|
+
* - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
|
|
145
196
|
* @example
|
|
146
197
|
* // Sets the composite element as the active item
|
|
147
198
|
* store.setActiveId(null);
|
|
@@ -152,9 +203,16 @@ export interface CompositeStoreFunctions<T extends CompositeStoreItem = Composit
|
|
|
152
203
|
*/
|
|
153
204
|
setActiveId: SetState<CompositeStoreState<T>["activeId"]>;
|
|
154
205
|
/**
|
|
155
|
-
* Moves focus to a given item id and sets it as the active item.
|
|
156
|
-
* `null` will focus the composite element itself
|
|
157
|
-
*
|
|
206
|
+
* Moves focus to a given item id and sets it as the active item.
|
|
207
|
+
* - Passing `null` will focus on the composite element itself (the one with a
|
|
208
|
+
* [composite role](https://w3c.github.io/aria/#composite)). Users will be
|
|
209
|
+
* able to navigate out of it using arrow keys.
|
|
210
|
+
* - If you want to set the active item id _without moving focus_, use the
|
|
211
|
+
* [`setActiveId`](https://ariakit.org/reference/use-composite-store#setactiveid)
|
|
212
|
+
* function instead.
|
|
213
|
+
*
|
|
214
|
+
* Live examples:
|
|
215
|
+
* - [Select Grid](https://ariakit.org/examples/select-grid)
|
|
158
216
|
* @example
|
|
159
217
|
* // Moves focus to the composite element
|
|
160
218
|
* store.move(null);
|
|
@@ -165,43 +223,59 @@ export interface CompositeStoreFunctions<T extends CompositeStoreItem = Composit
|
|
|
165
223
|
*/
|
|
166
224
|
move: (id?: string | null) => void;
|
|
167
225
|
/**
|
|
168
|
-
* Returns the id of the next item based on the current
|
|
169
|
-
*
|
|
226
|
+
* Returns the id of the next enabled item based on the current
|
|
227
|
+
* [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
|
|
228
|
+
* state.
|
|
229
|
+
*
|
|
230
|
+
* Live examples:
|
|
231
|
+
* - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
|
|
170
232
|
* @example
|
|
171
233
|
* const nextId = store.next();
|
|
172
234
|
* const nextNextId = store.next(2);
|
|
173
235
|
*/
|
|
174
236
|
next: (skip?: number) => string | null | undefined;
|
|
175
237
|
/**
|
|
176
|
-
* Returns the id of the previous item based on the current
|
|
177
|
-
*
|
|
238
|
+
* Returns the id of the previous enabled item based on the current
|
|
239
|
+
* [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
|
|
240
|
+
* state.
|
|
241
|
+
*
|
|
242
|
+
* Live examples:
|
|
243
|
+
* - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
|
|
178
244
|
* @example
|
|
179
245
|
* const previousId = store.previous();
|
|
180
246
|
* const previousPreviousId = store.previous(2);
|
|
181
247
|
*/
|
|
182
248
|
previous: (skip?: number) => string | null | undefined;
|
|
183
249
|
/**
|
|
184
|
-
* Returns the id of the item above based on the current
|
|
185
|
-
*
|
|
250
|
+
* Returns the id of the enabled item above based on the current
|
|
251
|
+
* [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
|
|
252
|
+
* state.
|
|
186
253
|
* @example
|
|
187
254
|
* const upId = store.up();
|
|
188
255
|
* const upUpId = store.up(2);
|
|
189
256
|
*/
|
|
190
257
|
up: (skip?: number) => string | null | undefined;
|
|
191
258
|
/**
|
|
192
|
-
* Returns the id of the item below based on the current
|
|
193
|
-
*
|
|
259
|
+
* Returns the id of the enabled item below based on the current
|
|
260
|
+
* [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
|
|
261
|
+
* state.
|
|
194
262
|
* @example
|
|
195
263
|
* const downId = store.down();
|
|
196
264
|
* const downDownId = store.down(2);
|
|
197
265
|
*/
|
|
198
266
|
down: (skip?: number) => string | null | undefined;
|
|
199
267
|
/**
|
|
200
|
-
* Returns the id of the first item.
|
|
268
|
+
* Returns the id of the first enabled item.
|
|
269
|
+
*
|
|
270
|
+
* Live examples:
|
|
271
|
+
* - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
|
|
201
272
|
*/
|
|
202
273
|
first: () => string | null | undefined;
|
|
203
274
|
/**
|
|
204
|
-
* Returns the id of the last item.
|
|
275
|
+
* Returns the id of the last enabled item.
|
|
276
|
+
*
|
|
277
|
+
* Live examples:
|
|
278
|
+
* - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
|
|
205
279
|
*/
|
|
206
280
|
last: () => string | null | undefined;
|
|
207
281
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
createCompositeStore
|
|
4
|
-
} from "../__chunks/
|
|
5
|
-
import "../__chunks/
|
|
6
|
-
import "../__chunks/
|
|
4
|
+
} from "../__chunks/VEUNYQYR.js";
|
|
5
|
+
import "../__chunks/MYUKSFP5.js";
|
|
6
|
+
import "../__chunks/K6ELJFXN.js";
|
|
7
7
|
import "../__chunks/I2VQ3XGR.js";
|
|
8
8
|
import "../__chunks/DLOEKDPY.js";
|
|
9
9
|
import "../__chunks/7PRQYBBV.js";
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
createDialogStore
|
|
4
|
-
} from "../__chunks/
|
|
5
|
-
import "../__chunks/
|
|
6
|
-
import "../__chunks/
|
|
4
|
+
} from "../__chunks/25MEC56I.js";
|
|
5
|
+
import "../__chunks/L5RYKTVQ.js";
|
|
6
|
+
import "../__chunks/K6ELJFXN.js";
|
|
7
7
|
import "../__chunks/I2VQ3XGR.js";
|
|
8
8
|
import "../__chunks/4R3V3JGP.js";
|
|
9
9
|
export {
|
|
@@ -6,40 +6,38 @@ import type { SetState } from "../utils/types.js";
|
|
|
6
6
|
export declare function createDisclosureStore(props?: DisclosureStoreProps): DisclosureStore;
|
|
7
7
|
export interface DisclosureStoreState {
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Whether the content is visible.
|
|
10
10
|
*
|
|
11
11
|
* Live examples:
|
|
12
|
+
* - [Combobox with links](https://ariakit.org/examples/combobox-links)
|
|
12
13
|
* - [Dialog with React
|
|
13
14
|
* Router](https://ariakit.org/examples/dialog-react-router)
|
|
15
|
+
* - [Menu with Framer
|
|
16
|
+
* Motion](https://ariakit.org/examples/menu-framer-motion)
|
|
17
|
+
* - [Lazy Popover](https://ariakit.org/examples/popover-lazy)
|
|
14
18
|
* @default false
|
|
15
19
|
*/
|
|
16
20
|
open: boolean;
|
|
17
21
|
/**
|
|
18
|
-
* The mounted state
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
+
* The mounted state usually matches the
|
|
23
|
+
* [`open`](https://ariakit.org/reference/disclosure-provider#open) value.
|
|
24
|
+
* However, if the content element is animated, it waits for the animation to
|
|
25
|
+
* finish before turning `false`. This ensures the content element doesn't get
|
|
26
|
+
* unmounted during the animation.
|
|
22
27
|
*
|
|
23
28
|
* Live examples:
|
|
24
|
-
* - [
|
|
25
|
-
* - [
|
|
26
|
-
* Combobox](https://ariakit.org/examples/combobox-textarea)
|
|
29
|
+
* - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
|
|
30
|
+
* - [Responsive Popover](https://ariakit.org/examples/popover-responsive)
|
|
27
31
|
*/
|
|
28
32
|
mounted: boolean;
|
|
29
33
|
/**
|
|
30
34
|
* Determines whether the content should animate when it is shown or hidden.
|
|
31
35
|
* - If `true`, the `animating` state will be `true` when the content is shown
|
|
32
|
-
* or hidden and it will wait for
|
|
33
|
-
*
|
|
36
|
+
* or hidden and it will wait for a CSS animation/transition to end before
|
|
37
|
+
* becoming `false`.
|
|
34
38
|
* - If it's set to a number, the `animating` state will be `true` when the
|
|
35
39
|
* content is shown or hidden and it will wait for the number of
|
|
36
40
|
* milliseconds to pass before becoming `false`.
|
|
37
|
-
*
|
|
38
|
-
* Live examples:
|
|
39
|
-
* - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
|
|
40
|
-
* - [Animated Combobox](https://ariakit.org/examples/combobox-animated)
|
|
41
|
-
* - [Animated Dialog](https://ariakit.org/examples/dialog-animated)
|
|
42
|
-
* - [Animated Select](https://ariakit.org/examples/select-animated)
|
|
43
41
|
* @default false
|
|
44
42
|
*/
|
|
45
43
|
animated: boolean | number;
|
|
@@ -58,46 +56,50 @@ export interface DisclosureStoreState {
|
|
|
58
56
|
}
|
|
59
57
|
export interface DisclosureStoreFunctions {
|
|
60
58
|
/**
|
|
61
|
-
* Sets the `open`
|
|
59
|
+
* Sets the [`open`](https://ariakit.org/reference/disclosure-provider#open)
|
|
60
|
+
* state.
|
|
62
61
|
*
|
|
63
62
|
* Live examples:
|
|
64
63
|
* - [Textarea with inline
|
|
65
64
|
* Combobox](https://ariakit.org/examples/combobox-textarea)
|
|
66
|
-
* - [Dialog with React
|
|
67
|
-
* Router](https://ariakit.org/examples/dialog-react-router)
|
|
68
65
|
* @example
|
|
69
66
|
* store.setOpen(true);
|
|
70
67
|
* store.setOpen((open) => !open);
|
|
71
68
|
*/
|
|
72
69
|
setOpen: SetState<DisclosureStoreState["open"]>;
|
|
73
70
|
/**
|
|
74
|
-
* Sets the `open`
|
|
71
|
+
* Sets the [`open`](https://ariakit.org/reference/disclosure-provider#open)
|
|
72
|
+
* state to `true`.
|
|
75
73
|
*
|
|
76
74
|
* Live examples:
|
|
77
|
-
* - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
|
|
78
75
|
* - [Textarea with inline
|
|
79
76
|
* Combobox](https://ariakit.org/examples/combobox-textarea)
|
|
77
|
+
* - [Dialog with Framer
|
|
78
|
+
* Motion](https://ariakit.org/examples/dialog-framer-motion)
|
|
79
|
+
* - [Context Menu](https://ariakit.org/examples/menu-context-menu)
|
|
80
|
+
* - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
|
|
80
81
|
*/
|
|
81
82
|
show: () => void;
|
|
82
83
|
/**
|
|
83
|
-
* Sets the `open`
|
|
84
|
+
* Sets the [`open`](https://ariakit.org/reference/disclosure-provider#open)
|
|
85
|
+
* state to `false`.
|
|
84
86
|
*
|
|
85
87
|
* Live examples:
|
|
86
88
|
* - [Textarea with inline
|
|
87
89
|
* Combobox](https://ariakit.org/examples/combobox-textarea)
|
|
88
|
-
* - [Dialog with React
|
|
89
|
-
* Router](https://ariakit.org/examples/dialog-react-router)
|
|
90
90
|
* - [Sliding Menu](https://ariakit.org/examples/menu-slide)
|
|
91
91
|
*/
|
|
92
92
|
hide: () => void;
|
|
93
93
|
/**
|
|
94
|
-
* Toggles the
|
|
94
|
+
* Toggles the
|
|
95
|
+
* [`open`](https://ariakit.org/reference/disclosure-provider#open) state.
|
|
95
96
|
*/
|
|
96
97
|
toggle: () => void;
|
|
97
98
|
/**
|
|
98
99
|
* Sets the `animating` state to `false`, which will automatically set the
|
|
99
100
|
* `mounted` state to `false` if it was `true`. This means that the content
|
|
100
101
|
* element can be safely unmounted.
|
|
102
|
+
* @deprecated Use `setState("animating", false)` instead.
|
|
101
103
|
*/
|
|
102
104
|
stopAnimation: () => void;
|
|
103
105
|
/**
|
|
@@ -106,19 +108,23 @@ export interface DisclosureStoreFunctions {
|
|
|
106
108
|
setContentElement: SetState<DisclosureStoreState["contentElement"]>;
|
|
107
109
|
/**
|
|
108
110
|
* Sets the `disclosureElement` state.
|
|
111
|
+
*
|
|
112
|
+
* Live examples:
|
|
113
|
+
* - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
|
|
109
114
|
*/
|
|
110
115
|
setDisclosureElement: SetState<DisclosureStoreState["disclosureElement"]>;
|
|
111
116
|
}
|
|
112
117
|
export interface DisclosureStoreOptions extends StoreOptions<DisclosureStoreState, "open" | "animated"> {
|
|
113
118
|
/**
|
|
114
|
-
*
|
|
119
|
+
* Whether the content should be visible by default.
|
|
115
120
|
* @default false
|
|
116
121
|
*/
|
|
117
122
|
defaultOpen?: DisclosureStoreState["open"];
|
|
118
123
|
/**
|
|
119
124
|
* A reference to another disclosure store that controls another disclosure
|
|
120
125
|
* component to keep them in sync. Element states like `contentElement` and
|
|
121
|
-
* `disclosureElement` won't be synced. For that, use the
|
|
126
|
+
* `disclosureElement` won't be synced. For that, use the
|
|
127
|
+
* [`store`](https://ariakit.org/reference/disclosure-provider#store) prop
|
|
122
128
|
* instead.
|
|
123
129
|
*/
|
|
124
130
|
disclosure?: DisclosureStore | null;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
createDisclosureStore
|
|
4
|
-
} from "../__chunks/
|
|
5
|
-
import "../__chunks/
|
|
4
|
+
} from "../__chunks/L5RYKTVQ.js";
|
|
5
|
+
import "../__chunks/K6ELJFXN.js";
|
|
6
6
|
import "../__chunks/I2VQ3XGR.js";
|
|
7
7
|
import "../__chunks/4R3V3JGP.js";
|
|
8
8
|
export {
|
package/esm/form/form-store.d.ts
CHANGED
|
@@ -19,6 +19,10 @@ export interface FormStoreItem extends CollectionStoreItem {
|
|
|
19
19
|
export interface FormStoreState<T extends FormStoreValues = FormStoreValues> extends CollectionStoreState<FormStoreItem> {
|
|
20
20
|
/**
|
|
21
21
|
* Form values.
|
|
22
|
+
*
|
|
23
|
+
* Live examples:
|
|
24
|
+
* - [FormRadio](https://ariakit.org/examples/form-radio)
|
|
25
|
+
* - [FormSelect](https://ariakit.org/examples/form-select)
|
|
22
26
|
* @default {}
|
|
23
27
|
*/
|
|
24
28
|
values: T;
|
|
@@ -43,18 +47,25 @@ export interface FormStoreState<T extends FormStoreValues = FormStoreValues> ext
|
|
|
43
47
|
*/
|
|
44
48
|
submitting: boolean;
|
|
45
49
|
/**
|
|
46
|
-
* The number of times
|
|
47
|
-
*
|
|
50
|
+
* The number of times
|
|
51
|
+
* [`submit`](https://ariakit.org/reference/use-form-store#submit) has been
|
|
52
|
+
* called with a successful response.
|
|
48
53
|
*/
|
|
49
54
|
submitSucceed: number;
|
|
50
55
|
/**
|
|
51
|
-
* The number of times
|
|
56
|
+
* The number of times
|
|
57
|
+
* [`submit`](https://ariakit.org/reference/use-form-store#submit) has been
|
|
58
|
+
* called with an error response.
|
|
52
59
|
*/
|
|
53
60
|
submitFailed: number;
|
|
54
61
|
}
|
|
55
62
|
export interface FormStoreFunctions<T extends FormStoreValues = FormStoreValues> extends CollectionStoreFunctions<FormStoreItem> {
|
|
56
63
|
/**
|
|
57
64
|
* An object containing the names of the form fields for type-safety.
|
|
65
|
+
*
|
|
66
|
+
* Live examples:
|
|
67
|
+
* - [FormRadio](https://ariakit.org/examples/form-radio)
|
|
68
|
+
* - [FormSelect](https://ariakit.org/examples/form-select)
|
|
58
69
|
* @example
|
|
59
70
|
* store.names.name; // "name"
|
|
60
71
|
* store.names.name.first; // "name.first"
|
|
@@ -62,7 +73,8 @@ export interface FormStoreFunctions<T extends FormStoreValues = FormStoreValues>
|
|
|
62
73
|
*/
|
|
63
74
|
names: Names<T>;
|
|
64
75
|
/**
|
|
65
|
-
* Sets the `values`
|
|
76
|
+
* Sets the [`values`](https://ariakit.org/reference/form-provider#values)
|
|
77
|
+
* state.
|
|
66
78
|
* @example
|
|
67
79
|
* store.setValues({ name: "John" });
|
|
68
80
|
* store.setValues((values) => ({ ...values, name: "John" }));
|
|
@@ -70,7 +82,9 @@ export interface FormStoreFunctions<T extends FormStoreValues = FormStoreValues>
|
|
|
70
82
|
setValues: SetState<FormStoreState<T>["values"]>;
|
|
71
83
|
/**
|
|
72
84
|
* Retrieves a field value.
|
|
73
|
-
*
|
|
85
|
+
*
|
|
86
|
+
* Live examples:
|
|
87
|
+
* - [FormRadio](https://ariakit.org/examples/form-radio)
|
|
74
88
|
* @example
|
|
75
89
|
* const nameValue = store.getValue("name");
|
|
76
90
|
* // Can also use store.names for type-safety.
|
|
@@ -79,8 +93,9 @@ export interface FormStoreFunctions<T extends FormStoreValues = FormStoreValues>
|
|
|
79
93
|
getValue: <T = any>(name: StringLike) => T;
|
|
80
94
|
/**
|
|
81
95
|
* Sets a field value.
|
|
82
|
-
*
|
|
83
|
-
*
|
|
96
|
+
*
|
|
97
|
+
* Live examples:
|
|
98
|
+
* - [FormSelect](https://ariakit.org/examples/form-select)
|
|
84
99
|
* @example
|
|
85
100
|
* store.setValue("name", "John");
|
|
86
101
|
* store.setValue("name", (value) => value + " Doe");
|
|
@@ -90,8 +105,6 @@ export interface FormStoreFunctions<T extends FormStoreValues = FormStoreValues>
|
|
|
90
105
|
setValue: <T>(name: StringLike, value: SetStateAction<T>) => void;
|
|
91
106
|
/**
|
|
92
107
|
* Pushes a value to an array field.
|
|
93
|
-
* @param name The array field name.
|
|
94
|
-
* @param value The value to push.
|
|
95
108
|
* @example
|
|
96
109
|
* store.pushValue("tags", "new tag");
|
|
97
110
|
* store.pushValue("tags", { id: 1, name: "new tag" });
|
|
@@ -101,8 +114,6 @@ export interface FormStoreFunctions<T extends FormStoreValues = FormStoreValues>
|
|
|
101
114
|
pushValue: <T>(name: StringLike, value: T) => void;
|
|
102
115
|
/**
|
|
103
116
|
* Removes a value from an array field.
|
|
104
|
-
* @param name The array field name.
|
|
105
|
-
* @param index The index of the value to remove.
|
|
106
117
|
* @example
|
|
107
118
|
* store.removeValue("tags", 0);
|
|
108
119
|
* store.removeValue("tags", 1);
|
|
@@ -111,7 +122,8 @@ export interface FormStoreFunctions<T extends FormStoreValues = FormStoreValues>
|
|
|
111
122
|
*/
|
|
112
123
|
removeValue: (name: StringLike, index: number) => void;
|
|
113
124
|
/**
|
|
114
|
-
* Sets the `errors`
|
|
125
|
+
* Sets the [`errors`](https://ariakit.org/reference/form-provider#errors)
|
|
126
|
+
* state.
|
|
115
127
|
* @example
|
|
116
128
|
* store.setErrors({ name: "Name is required" });
|
|
117
129
|
* store.setErrors((errors) => ({ ...errors, name: "Name is required" }));
|
|
@@ -119,7 +131,6 @@ export interface FormStoreFunctions<T extends FormStoreValues = FormStoreValues>
|
|
|
119
131
|
setErrors: SetState<FormStoreState<T>["errors"]>;
|
|
120
132
|
/**
|
|
121
133
|
* Retrieves a field error.
|
|
122
|
-
* @param name The field name.
|
|
123
134
|
* @example
|
|
124
135
|
* const nameError = store.getError("name");
|
|
125
136
|
* // Can also use store.names for type-safety.
|
|
@@ -128,8 +139,9 @@ export interface FormStoreFunctions<T extends FormStoreValues = FormStoreValues>
|
|
|
128
139
|
getError: (name: StringLike) => ErrorMessage;
|
|
129
140
|
/**
|
|
130
141
|
* Sets a field error.
|
|
131
|
-
*
|
|
132
|
-
*
|
|
142
|
+
*
|
|
143
|
+
* Live examples:
|
|
144
|
+
* - [FormRadio](https://ariakit.org/examples/form-radio)
|
|
133
145
|
* @example
|
|
134
146
|
* store.setError("name", "Name is required");
|
|
135
147
|
* store.setError("name", (error) => error + "!");
|
|
@@ -138,7 +150,8 @@ export interface FormStoreFunctions<T extends FormStoreValues = FormStoreValues>
|
|
|
138
150
|
*/
|
|
139
151
|
setError: (name: StringLike, error: SetStateAction<ErrorMessage>) => void;
|
|
140
152
|
/**
|
|
141
|
-
* Sets the `touched`
|
|
153
|
+
* Sets the [`touched`](https://ariakit.org/reference/form-provider#touched)
|
|
154
|
+
* state.
|
|
142
155
|
* @example
|
|
143
156
|
* store.setTouched({ name: true });
|
|
144
157
|
* store.setTouched((touched) => ({ ...touched, name: true }));
|
|
@@ -146,7 +159,6 @@ export interface FormStoreFunctions<T extends FormStoreValues = FormStoreValues>
|
|
|
146
159
|
setTouched: SetState<FormStoreState<T>["touched"]>;
|
|
147
160
|
/**
|
|
148
161
|
* Retrieves a field touched state.
|
|
149
|
-
* @param name The field name.
|
|
150
162
|
* @example
|
|
151
163
|
* const nameTouched = store.getFieldTouched("name");
|
|
152
164
|
* // Can also use store.names for type-safety.
|
|
@@ -155,8 +167,6 @@ export interface FormStoreFunctions<T extends FormStoreValues = FormStoreValues>
|
|
|
155
167
|
getFieldTouched: (name: StringLike) => boolean;
|
|
156
168
|
/**
|
|
157
169
|
* Sets a field touched state.
|
|
158
|
-
* @param name The field name.
|
|
159
|
-
* @param value The field touched state.
|
|
160
170
|
* @example
|
|
161
171
|
* store.setFieldTouched("name", true);
|
|
162
172
|
* store.setFieldTouched("name", (value) => !value);
|
|
@@ -166,9 +176,8 @@ export interface FormStoreFunctions<T extends FormStoreValues = FormStoreValues>
|
|
|
166
176
|
setFieldTouched: (name: StringLike, value: SetStateAction<boolean>) => void;
|
|
167
177
|
/**
|
|
168
178
|
* Function that accepts a callback that will be used to validate the form
|
|
169
|
-
* when `validate` is
|
|
170
|
-
* the callback.
|
|
171
|
-
* @param callback The callback function.
|
|
179
|
+
* when [`validate`](https://ariakit.org/reference/use-form-store#validate) is
|
|
180
|
+
* called. It returns a cleanup function that will remove the callback.
|
|
172
181
|
* @example
|
|
173
182
|
* const cleanup = store.onValidate(async (state) => {
|
|
174
183
|
* const errors = await api.validate(state.values);
|
|
@@ -179,9 +188,9 @@ export interface FormStoreFunctions<T extends FormStoreValues = FormStoreValues>
|
|
|
179
188
|
*/
|
|
180
189
|
onValidate: (callback: FormStoreCallback<FormStoreState<T>>) => void;
|
|
181
190
|
/**
|
|
182
|
-
* Function that accepts a callback that will be used to submit the form
|
|
183
|
-
*
|
|
184
|
-
* the callback.
|
|
191
|
+
* Function that accepts a callback that will be used to submit the form when
|
|
192
|
+
* [`submit`](https://ariakit.org/reference/use-form-store#submit) is called.
|
|
193
|
+
* It returns a cleanup function that will remove the callback.
|
|
185
194
|
* @param callback The callback function.
|
|
186
195
|
* @example
|
|
187
196
|
* const cleanup = store.onSubmit(async (state) => {
|