@ariakit/core 0.3.9 → 0.3.11
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 +15 -0
- package/cjs/__chunks/{JNFZSNOI.cjs → BFE5R4EZ.cjs} +17 -17
- package/cjs/__chunks/{EFIT5L4X.cjs → E53JW5BD.cjs} +12 -12
- package/cjs/__chunks/{2UK5WUJX.cjs → F6HPKLO2.cjs} +12 -14
- package/cjs/__chunks/{2LS4JJ4S.cjs → I3Y4EXEF.cjs} +2 -2
- package/cjs/__chunks/{3UT5FE6K.cjs → KBNYGXWI.cjs} +3 -0
- package/cjs/__chunks/{UCLKUBNP.cjs → MI6NUQYQ.cjs} +31 -18
- package/cjs/__chunks/{UTICNXST.cjs → NOFH2BLB.cjs} +7 -7
- package/cjs/__chunks/{GJFZ5ZPP.cjs → OTVLDMN2.cjs} +16 -16
- package/cjs/__chunks/{5SIVMOID.cjs → TQTGWD5K.cjs} +10 -10
- package/cjs/checkbox/checkbox-store.cjs +5 -5
- package/cjs/checkbox/checkbox-store.d.cts +5 -2
- package/cjs/checkbox/checkbox-store.d.ts +5 -2
- package/cjs/collection/collection-store.cjs +4 -4
- package/cjs/collection/collection-store.d.cts +11 -11
- package/cjs/collection/collection-store.d.ts +11 -11
- package/cjs/combobox/combobox-store.cjs +32 -32
- 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 +6 -6
- package/cjs/composite/composite-store.cjs +5 -5
- package/cjs/composite/composite-store.d.cts +128 -54
- package/cjs/composite/composite-store.d.ts +128 -54
- package/cjs/dialog/dialog-store.cjs +5 -5
- package/cjs/disclosure/disclosure-store.cjs +4 -4
- package/cjs/disclosure/disclosure-store.d.cts +33 -27
- package/cjs/disclosure/disclosure-store.d.ts +33 -27
- package/cjs/form/form-store.cjs +23 -23
- package/cjs/form/form-store.d.cts +35 -26
- package/cjs/form/form-store.d.ts +35 -26
- package/cjs/hovercard/hovercard-store.cjs +7 -7
- package/cjs/hovercard/hovercard-store.d.cts +14 -7
- package/cjs/hovercard/hovercard-store.d.ts +14 -7
- package/cjs/menu/menu-bar-store.cjs +6 -6
- package/cjs/menu/menu-store.cjs +26 -26
- package/cjs/menu/menu-store.d.cts +16 -7
- package/cjs/menu/menu-store.d.ts +16 -7
- package/cjs/menubar/menubar-store.cjs +6 -6
- package/cjs/popover/popover-store.cjs +6 -6
- package/cjs/popover/popover-store.d.cts +31 -6
- package/cjs/popover/popover-store.d.ts +31 -6
- package/cjs/radio/radio-store.cjs +8 -8
- package/cjs/radio/radio-store.d.cts +2 -1
- package/cjs/radio/radio-store.d.ts +2 -1
- package/cjs/select/select-store.cjs +28 -28
- package/cjs/select/select-store.d.cts +2 -1
- package/cjs/select/select-store.d.ts +2 -1
- package/cjs/tab/tab-store.cjs +20 -20
- package/cjs/tab/tab-store.d.cts +20 -15
- package/cjs/tab/tab-store.d.ts +20 -15
- package/cjs/toolbar/toolbar-store.cjs +7 -7
- package/cjs/toolbar/toolbar-store.d.cts +2 -6
- package/cjs/toolbar/toolbar-store.d.ts +2 -6
- package/cjs/tooltip/tooltip-store.cjs +12 -12
- package/cjs/tooltip/tooltip-store.d.cts +6 -4
- package/cjs/tooltip/tooltip-store.d.ts +6 -4
- package/cjs/utils/misc.cjs +2 -2
- package/cjs/utils/store.cjs +3 -3
- package/esm/__chunks/{TLN4ALYH.js → 22K762VQ.js} +22 -9
- package/esm/__chunks/{J6JIOWCS.js → AF6IUUFN.js} +3 -3
- package/esm/__chunks/{A2J4XZ5T.js → EAHJFCU4.js} +1 -3
- package/esm/__chunks/{DLX2AS6C.js → IERTEJ3A.js} +3 -3
- package/esm/__chunks/{T3DVYGXI.js → SOLWE6E5.js} +3 -3
- package/esm/__chunks/{LT2OYWRD.js → SX2XFD6A.js} +1 -1
- package/esm/__chunks/{EZ2TTBAQ.js → XU3EOSCU.js} +3 -3
- package/esm/__chunks/{I2VQ3XGR.js → Y3OOHFCN.js} +3 -0
- package/esm/__chunks/{NKLTHWCR.js → Z5IGYIPT.js} +2 -2
- package/esm/checkbox/checkbox-store.d.ts +5 -2
- package/esm/checkbox/checkbox-store.js +2 -2
- package/esm/collection/collection-store.d.ts +11 -11
- package/esm/collection/collection-store.js +3 -3
- package/esm/combobox/combobox-store.d.ts +3 -1
- package/esm/combobox/combobox-store.js +7 -7
- package/esm/composite/composite-overflow-store.js +5 -5
- package/esm/composite/composite-store.d.ts +128 -54
- package/esm/composite/composite-store.js +4 -4
- package/esm/dialog/dialog-store.js +4 -4
- package/esm/disclosure/disclosure-store.d.ts +33 -27
- package/esm/disclosure/disclosure-store.js +3 -3
- package/esm/form/form-store.d.ts +35 -26
- package/esm/form/form-store.js +3 -3
- package/esm/hovercard/hovercard-store.d.ts +14 -7
- package/esm/hovercard/hovercard-store.js +6 -6
- package/esm/menu/menu-bar-store.js +5 -5
- package/esm/menu/menu-store.d.ts +16 -7
- package/esm/menu/menu-store.js +8 -8
- package/esm/menubar/menubar-store.js +5 -5
- package/esm/popover/popover-store.d.ts +31 -6
- package/esm/popover/popover-store.js +5 -5
- package/esm/radio/radio-store.d.ts +2 -1
- package/esm/radio/radio-store.js +4 -4
- package/esm/select/select-store.d.ts +2 -1
- package/esm/select/select-store.js +7 -7
- package/esm/tab/tab-store.d.ts +20 -15
- package/esm/tab/tab-store.js +4 -4
- package/esm/toolbar/toolbar-store.d.ts +2 -6
- package/esm/toolbar/toolbar-store.js +4 -4
- package/esm/tooltip/tooltip-store.d.ts +6 -4
- package/esm/tooltip/tooltip-store.js +6 -6
- package/esm/utils/misc.js +1 -1
- package/esm/utils/store.js +2 -2
- 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
|
}
|
|
@@ -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,11 +1,11 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
5
|
-
require('../__chunks/
|
|
6
|
-
require('../__chunks/
|
|
7
|
-
require('../__chunks/
|
|
4
|
+
var _I3Y4EXEFcjs = require('../__chunks/I3Y4EXEF.cjs');
|
|
5
|
+
require('../__chunks/OTVLDMN2.cjs');
|
|
6
|
+
require('../__chunks/F6HPKLO2.cjs');
|
|
7
|
+
require('../__chunks/KBNYGXWI.cjs');
|
|
8
8
|
require('../__chunks/AV6KTKLE.cjs');
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
exports.createDialogStore =
|
|
11
|
+
exports.createDialogStore = _I3Y4EXEFcjs.createDialogStore;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
5
|
-
require('../__chunks/
|
|
6
|
-
require('../__chunks/
|
|
4
|
+
var _OTVLDMN2cjs = require('../__chunks/OTVLDMN2.cjs');
|
|
5
|
+
require('../__chunks/F6HPKLO2.cjs');
|
|
6
|
+
require('../__chunks/KBNYGXWI.cjs');
|
|
7
7
|
require('../__chunks/AV6KTKLE.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
exports.createDisclosureStore =
|
|
10
|
+
exports.createDisclosureStore = _OTVLDMN2cjs.createDisclosureStore;
|