@ariakit/core 0.4.18 → 0.4.19
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/{MJNGPYVQ.cjs → 2RUCRSRF.cjs} +16 -16
- package/cjs/__chunks/{6BYUUR4M.cjs → 4TRESXTO.cjs} +7 -1
- package/cjs/__chunks/{AOXAROPF.cjs → 75F3RDBE.cjs} +14 -14
- package/cjs/__chunks/{SHOLYDNP.cjs → CTEQSOKZ.cjs} +2 -2
- package/cjs/__chunks/{T247D7JS.cjs → CVLMIMPT.cjs} +2 -2
- package/cjs/__chunks/{JNPL5IHP.cjs → G2CSOTWZ.cjs} +7 -7
- package/cjs/__chunks/{4ITB54IT.cjs → I4CBIWTX.cjs} +2 -3
- package/cjs/__chunks/{JNYCP2QO.cjs → LS2SNHDM.cjs} +6 -6
- package/cjs/__chunks/{UROTDZFK.cjs → R37KOEUW.cjs} +10 -10
- package/cjs/__chunks/{OYTZFOIJ.cjs → UGAVMSQJ.cjs} +18 -18
- package/cjs/__chunks/{HGVIF2R4.cjs → VC22SYOD.cjs} +24 -21
- package/cjs/__chunks/{WPBYRKFQ.cjs → WMTGHDLE.cjs} +15 -15
- package/cjs/checkbox/checkbox-store.cjs +5 -5
- package/cjs/checkbox/checkbox-store.d.cts +5 -5
- package/cjs/checkbox/checkbox-store.d.ts +5 -5
- package/cjs/collection/collection-store.cjs +5 -5
- package/cjs/collection/collection-store.d.cts +5 -5
- package/cjs/collection/collection-store.d.ts +5 -5
- package/cjs/combobox/combobox-store.cjs +40 -40
- package/cjs/combobox/combobox-store.d.cts +26 -26
- package/cjs/combobox/combobox-store.d.ts +26 -26
- package/cjs/composite/composite-overflow-store.cjs +6 -6
- package/cjs/composite/composite-store.cjs +6 -6
- package/cjs/composite/composite-store.d.cts +62 -54
- package/cjs/composite/composite-store.d.ts +62 -54
- package/cjs/dialog/dialog-store.cjs +5 -5
- package/cjs/disclosure/disclosure-store.cjs +4 -4
- package/cjs/disclosure/disclosure-store.d.cts +22 -22
- package/cjs/disclosure/disclosure-store.d.ts +22 -22
- package/cjs/form/form-store.cjs +41 -37
- package/cjs/form/form-store.d.cts +14 -14
- package/cjs/form/form-store.d.ts +14 -14
- package/cjs/hovercard/hovercard-store.cjs +7 -7
- package/cjs/hovercard/hovercard-store.d.cts +10 -10
- package/cjs/hovercard/hovercard-store.d.ts +10 -10
- package/cjs/menu/menu-bar-store.cjs +7 -7
- package/cjs/menu/menu-store.cjs +27 -27
- package/cjs/menu/menu-store.d.cts +10 -10
- package/cjs/menu/menu-store.d.ts +10 -10
- package/cjs/menubar/menubar-store.cjs +7 -7
- package/cjs/popover/popover-store.cjs +6 -6
- package/cjs/popover/popover-store.d.cts +17 -17
- package/cjs/popover/popover-store.d.ts +17 -17
- package/cjs/radio/radio-store.cjs +9 -9
- package/cjs/radio/radio-store.d.cts +1 -1
- package/cjs/radio/radio-store.d.ts +1 -1
- package/cjs/select/select-store.cjs +32 -32
- package/cjs/select/select-store.d.cts +17 -17
- package/cjs/select/select-store.d.ts +17 -17
- package/cjs/tab/tab-store.cjs +32 -32
- package/cjs/tab/tab-store.d.cts +20 -20
- package/cjs/tab/tab-store.d.ts +20 -20
- package/cjs/tag/tag-store.cjs +16 -16
- package/cjs/tag/tag-store.d.cts +5 -5
- package/cjs/tag/tag-store.d.ts +5 -5
- package/cjs/toolbar/toolbar-store.cjs +8 -8
- package/cjs/tooltip/tooltip-store.cjs +13 -13
- package/cjs/utils/dom.cjs +2 -2
- package/cjs/utils/events.cjs +6 -6
- package/cjs/utils/focus.cjs +12 -13
- package/cjs/utils/misc.cjs +4 -2
- package/cjs/utils/misc.d.cts +4 -0
- package/cjs/utils/misc.d.ts +4 -0
- package/cjs/utils/platform.cjs +3 -3
- package/cjs/utils/store.cjs +3 -3
- package/cjs/utils/store.d.cts +1 -1
- package/cjs/utils/store.d.ts +1 -1
- package/cjs/utils/undo.cjs +2 -2
- package/esm/__chunks/{KMAUV3TY.js → 7KNZCZ55.js} +1 -1
- package/esm/__chunks/{3DNM6L6E.js → G7XPWBXK.js} +1 -2
- package/esm/__chunks/{SNHYQNEZ.js → GMGLSF2B.js} +1 -1
- package/esm/__chunks/{WSDJ6ZRB.js → H7R2CY4Q.js} +3 -3
- package/esm/__chunks/{75BJEVSH.js → IHNLLH3I.js} +2 -2
- package/esm/__chunks/{N5XGANPW.js → KZX46JDB.js} +11 -8
- package/esm/__chunks/{BFGNM53A.js → MJ4ZJEIM.js} +5 -5
- package/esm/__chunks/{TIQDSBWP.js → TEVO2DMI.js} +3 -3
- package/esm/__chunks/{7LM4Q2XB.js → U4NM2NCP.js} +1 -1
- package/esm/__chunks/{RVTIKFRL.js → UNDE2QJS.js} +3 -3
- package/esm/__chunks/{XMCVU3LR.js → UWJK2WK2.js} +6 -0
- package/esm/__chunks/{SXKM4CGU.js → XTZ53NXG.js} +4 -4
- package/esm/checkbox/checkbox-store.d.ts +5 -5
- package/esm/checkbox/checkbox-store.js +2 -2
- package/esm/collection/collection-store.d.ts +5 -5
- package/esm/collection/collection-store.js +4 -4
- package/esm/combobox/combobox-store.d.ts +26 -26
- package/esm/combobox/combobox-store.js +9 -9
- package/esm/composite/composite-overflow-store.js +5 -5
- package/esm/composite/composite-store.d.ts +62 -54
- package/esm/composite/composite-store.js +5 -5
- package/esm/dialog/dialog-store.js +4 -4
- package/esm/disclosure/disclosure-store.d.ts +22 -22
- package/esm/disclosure/disclosure-store.js +3 -3
- package/esm/form/form-store.d.ts +14 -14
- package/esm/form/form-store.js +19 -15
- package/esm/hovercard/hovercard-store.d.ts +10 -10
- package/esm/hovercard/hovercard-store.js +6 -6
- package/esm/menu/menu-bar-store.js +6 -6
- package/esm/menu/menu-store.d.ts +10 -10
- package/esm/menu/menu-store.js +9 -9
- package/esm/menubar/menubar-store.js +6 -6
- package/esm/popover/popover-store.d.ts +17 -17
- package/esm/popover/popover-store.js +5 -5
- package/esm/radio/radio-store.d.ts +1 -1
- package/esm/radio/radio-store.js +5 -5
- package/esm/select/select-store.d.ts +17 -17
- package/esm/select/select-store.js +8 -8
- package/esm/tab/tab-store.d.ts +20 -20
- package/esm/tab/tab-store.js +5 -5
- package/esm/tag/tag-store.d.ts +5 -5
- package/esm/tag/tag-store.js +7 -7
- package/esm/toolbar/toolbar-store.js +5 -5
- package/esm/tooltip/tooltip-store.js +7 -7
- package/esm/utils/dom.js +1 -1
- package/esm/utils/events.js +4 -4
- package/esm/utils/focus.js +2 -3
- package/esm/utils/misc.d.ts +4 -0
- package/esm/utils/misc.js +3 -1
- package/esm/utils/platform.js +2 -2
- package/esm/utils/store.d.ts +1 -1
- package/esm/utils/store.js +2 -2
- package/esm/utils/undo.js +1 -1
- package/package.json +20 -21
- package/tsconfig.build.json +7 -2
- package/tsconfig.node.json +5 -0
- package/tsconfig.test.json +5 -0
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _75F3RDBEcjs = require('../__chunks/75F3RDBE.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var _UGAVMSQJcjs = require('../__chunks/UGAVMSQJ.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
var _GDZQUFNPcjs = require('../__chunks/GDZQUFNP.cjs');
|
|
10
|
-
require('../__chunks/
|
|
11
|
-
require('../__chunks/
|
|
12
|
-
require('../__chunks/
|
|
13
|
-
require('../__chunks/
|
|
10
|
+
require('../__chunks/CVLMIMPT.cjs');
|
|
11
|
+
require('../__chunks/2RUCRSRF.cjs');
|
|
12
|
+
require('../__chunks/VC22SYOD.cjs');
|
|
13
|
+
require('../__chunks/I4CBIWTX.cjs');
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
@@ -19,19 +19,19 @@ require('../__chunks/4ITB54IT.cjs');
|
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
|
|
22
|
-
var
|
|
22
|
+
var _WMTGHDLEcjs = require('../__chunks/WMTGHDLE.cjs');
|
|
23
23
|
|
|
24
24
|
|
|
25
|
-
var
|
|
25
|
+
var _4TRESXTOcjs = require('../__chunks/4TRESXTO.cjs');
|
|
26
26
|
|
|
27
27
|
// src/select/select-store.ts
|
|
28
28
|
function createSelectStore({
|
|
29
29
|
combobox,
|
|
30
30
|
...props
|
|
31
31
|
} = {}) {
|
|
32
|
-
const store =
|
|
32
|
+
const store = _WMTGHDLEcjs.mergeStore.call(void 0,
|
|
33
33
|
props.store,
|
|
34
|
-
|
|
34
|
+
_WMTGHDLEcjs.omit.call(void 0, combobox, [
|
|
35
35
|
"value",
|
|
36
36
|
"items",
|
|
37
37
|
"renderedItems",
|
|
@@ -43,37 +43,37 @@ function createSelectStore({
|
|
|
43
43
|
"disclosureElement"
|
|
44
44
|
])
|
|
45
45
|
);
|
|
46
|
-
|
|
46
|
+
_WMTGHDLEcjs.throwOnConflictingProps.call(void 0, props, store);
|
|
47
47
|
const syncState = store.getState();
|
|
48
|
-
const composite =
|
|
48
|
+
const composite = _UGAVMSQJcjs.createCompositeStore.call(void 0, {
|
|
49
49
|
...props,
|
|
50
50
|
store,
|
|
51
|
-
virtualFocus:
|
|
51
|
+
virtualFocus: _4TRESXTOcjs.defaultValue.call(void 0,
|
|
52
52
|
props.virtualFocus,
|
|
53
53
|
syncState.virtualFocus,
|
|
54
54
|
true
|
|
55
55
|
),
|
|
56
|
-
includesBaseElement:
|
|
56
|
+
includesBaseElement: _4TRESXTOcjs.defaultValue.call(void 0,
|
|
57
57
|
props.includesBaseElement,
|
|
58
58
|
syncState.includesBaseElement,
|
|
59
59
|
false
|
|
60
60
|
),
|
|
61
|
-
activeId:
|
|
61
|
+
activeId: _4TRESXTOcjs.defaultValue.call(void 0,
|
|
62
62
|
props.activeId,
|
|
63
63
|
syncState.activeId,
|
|
64
64
|
props.defaultActiveId,
|
|
65
65
|
null
|
|
66
66
|
),
|
|
67
|
-
orientation:
|
|
67
|
+
orientation: _4TRESXTOcjs.defaultValue.call(void 0,
|
|
68
68
|
props.orientation,
|
|
69
69
|
syncState.orientation,
|
|
70
70
|
"vertical"
|
|
71
71
|
)
|
|
72
72
|
});
|
|
73
|
-
const popover =
|
|
73
|
+
const popover = _75F3RDBEcjs.createPopoverStore.call(void 0, {
|
|
74
74
|
...props,
|
|
75
75
|
store,
|
|
76
|
-
placement:
|
|
76
|
+
placement: _4TRESXTOcjs.defaultValue.call(void 0,
|
|
77
77
|
props.placement,
|
|
78
78
|
syncState.placement,
|
|
79
79
|
"bottom-start"
|
|
@@ -83,25 +83,25 @@ function createSelectStore({
|
|
|
83
83
|
const initialState = {
|
|
84
84
|
...composite.getState(),
|
|
85
85
|
...popover.getState(),
|
|
86
|
-
value:
|
|
86
|
+
value: _4TRESXTOcjs.defaultValue.call(void 0,
|
|
87
87
|
props.value,
|
|
88
88
|
syncState.value,
|
|
89
89
|
props.defaultValue,
|
|
90
90
|
initialValue
|
|
91
91
|
),
|
|
92
|
-
setValueOnMove:
|
|
92
|
+
setValueOnMove: _4TRESXTOcjs.defaultValue.call(void 0,
|
|
93
93
|
props.setValueOnMove,
|
|
94
94
|
syncState.setValueOnMove,
|
|
95
95
|
false
|
|
96
96
|
),
|
|
97
|
-
labelElement:
|
|
98
|
-
selectElement:
|
|
99
|
-
listElement:
|
|
97
|
+
labelElement: _4TRESXTOcjs.defaultValue.call(void 0, syncState.labelElement, null),
|
|
98
|
+
selectElement: _4TRESXTOcjs.defaultValue.call(void 0, syncState.selectElement, null),
|
|
99
|
+
listElement: _4TRESXTOcjs.defaultValue.call(void 0, syncState.listElement, null)
|
|
100
100
|
};
|
|
101
|
-
const select =
|
|
102
|
-
|
|
101
|
+
const select = _WMTGHDLEcjs.createStore.call(void 0, initialState, composite, popover, store);
|
|
102
|
+
_WMTGHDLEcjs.setup.call(void 0,
|
|
103
103
|
select,
|
|
104
|
-
() =>
|
|
104
|
+
() => _WMTGHDLEcjs.sync.call(void 0, select, ["value", "items"], (state) => {
|
|
105
105
|
if (state.value !== initialValue) return;
|
|
106
106
|
if (!state.items.length) return;
|
|
107
107
|
const item = state.items.find(
|
|
@@ -111,16 +111,16 @@ function createSelectStore({
|
|
|
111
111
|
select.setState("value", item.value);
|
|
112
112
|
})
|
|
113
113
|
);
|
|
114
|
-
|
|
114
|
+
_WMTGHDLEcjs.setup.call(void 0,
|
|
115
115
|
select,
|
|
116
|
-
() =>
|
|
116
|
+
() => _WMTGHDLEcjs.sync.call(void 0, select, ["mounted"], (state) => {
|
|
117
117
|
if (state.mounted) return;
|
|
118
118
|
select.setState("activeId", initialState.activeId);
|
|
119
119
|
})
|
|
120
120
|
);
|
|
121
|
-
|
|
121
|
+
_WMTGHDLEcjs.setup.call(void 0,
|
|
122
122
|
select,
|
|
123
|
-
() =>
|
|
123
|
+
() => _WMTGHDLEcjs.sync.call(void 0, select, ["mounted", "items", "value"], (state) => {
|
|
124
124
|
if (combobox) return;
|
|
125
125
|
if (state.mounted) return;
|
|
126
126
|
const values = _GDZQUFNPcjs.toArray.call(void 0, state.value);
|
|
@@ -133,9 +133,9 @@ function createSelectStore({
|
|
|
133
133
|
select.setState("activeId", item.id);
|
|
134
134
|
})
|
|
135
135
|
);
|
|
136
|
-
|
|
136
|
+
_WMTGHDLEcjs.setup.call(void 0,
|
|
137
137
|
select,
|
|
138
|
-
() =>
|
|
138
|
+
() => _WMTGHDLEcjs.batch.call(void 0, select, ["setValueOnMove", "moves"], (state) => {
|
|
139
139
|
const { mounted, value, activeId } = select.getState();
|
|
140
140
|
if (!state.setValueOnMove && mounted) return;
|
|
141
141
|
if (Array.isArray(value)) return;
|
|
@@ -23,26 +23,26 @@ export interface SelectStoreState<T extends SelectStoreValue = SelectStoreValue>
|
|
|
23
23
|
* The select value.
|
|
24
24
|
*
|
|
25
25
|
* Live examples:
|
|
26
|
-
* - [Form with Select](https://ariakit.
|
|
27
|
-
* - [Select Grid](https://ariakit.
|
|
26
|
+
* - [Form with Select](https://ariakit.com/examples/form-select)
|
|
27
|
+
* - [Select Grid](https://ariakit.com/examples/select-grid)
|
|
28
28
|
* - [Select with custom
|
|
29
|
-
* items](https://ariakit.
|
|
30
|
-
* - [Multi-Select](https://ariakit.
|
|
31
|
-
* - [Toolbar with Select](https://ariakit.
|
|
29
|
+
* items](https://ariakit.com/examples/select-item-custom)
|
|
30
|
+
* - [Multi-Select](https://ariakit.com/examples/select-multiple)
|
|
31
|
+
* - [Toolbar with Select](https://ariakit.com/examples/toolbar-select)
|
|
32
32
|
* - [Select with Next.js App
|
|
33
|
-
* Router](https://ariakit.
|
|
33
|
+
* Router](https://ariakit.com/examples/select-next-router)
|
|
34
34
|
*/
|
|
35
35
|
value: MutableValue<T>;
|
|
36
36
|
/**
|
|
37
37
|
* Whether the select
|
|
38
|
-
* [`value`](https://ariakit.
|
|
38
|
+
* [`value`](https://ariakit.com/reference/select-provider#value) should be
|
|
39
39
|
* set when the active item changes by moving (which usually happens when
|
|
40
40
|
* moving to an item using the keyboard).
|
|
41
41
|
*
|
|
42
42
|
* Live examples:
|
|
43
|
-
* - [Select Grid](https://ariakit.
|
|
43
|
+
* - [Select Grid](https://ariakit.com/examples/select-grid)
|
|
44
44
|
* - [Select with custom
|
|
45
|
-
* items](https://ariakit.
|
|
45
|
+
* items](https://ariakit.com/examples/select-item-custom)
|
|
46
46
|
* @default false
|
|
47
47
|
*/
|
|
48
48
|
setValueOnMove: boolean;
|
|
@@ -54,7 +54,7 @@ export interface SelectStoreState<T extends SelectStoreValue = SelectStoreValue>
|
|
|
54
54
|
* The select button element.
|
|
55
55
|
*
|
|
56
56
|
* Live examples:
|
|
57
|
-
* - [Form with Select](https://ariakit.
|
|
57
|
+
* - [Form with Select](https://ariakit.com/examples/form-select)
|
|
58
58
|
*/
|
|
59
59
|
selectElement: HTMLElement | null;
|
|
60
60
|
/**
|
|
@@ -64,7 +64,7 @@ export interface SelectStoreState<T extends SelectStoreValue = SelectStoreValue>
|
|
|
64
64
|
}
|
|
65
65
|
export interface SelectStoreFunctions<T extends SelectStoreValue = SelectStoreValue> extends Pick<SelectStoreOptions<T>, "combobox">, CompositeStoreFunctions<SelectStoreItem>, PopoverStoreFunctions {
|
|
66
66
|
/**
|
|
67
|
-
* Sets the [`value`](https://ariakit.
|
|
67
|
+
* Sets the [`value`](https://ariakit.com/reference/select-provider#value)
|
|
68
68
|
* state.
|
|
69
69
|
* @example
|
|
70
70
|
* store.setValue("Apple");
|
|
@@ -96,14 +96,14 @@ export interface SelectStoreOptions<T extends SelectStoreValue = SelectStoreValu
|
|
|
96
96
|
* The default value. If not set, the first non-disabled item will be used.
|
|
97
97
|
*
|
|
98
98
|
* Live examples:
|
|
99
|
-
* - [Form with Select](https://ariakit.
|
|
100
|
-
* - [Animated Select](https://ariakit.
|
|
101
|
-
* - [Select with Combobox](https://ariakit.
|
|
102
|
-
* - [SelectGroup](https://ariakit.
|
|
99
|
+
* - [Form with Select](https://ariakit.com/examples/form-select)
|
|
100
|
+
* - [Animated Select](https://ariakit.com/examples/select-animated)
|
|
101
|
+
* - [Select with Combobox](https://ariakit.com/examples/select-combobox)
|
|
102
|
+
* - [SelectGroup](https://ariakit.com/examples/select-group)
|
|
103
103
|
* - [Select with Next.js App
|
|
104
|
-
* Router](https://ariakit.
|
|
104
|
+
* Router](https://ariakit.com/examples/select-next-router)
|
|
105
105
|
* - [Select with Combobox and
|
|
106
|
-
* Tabs](https://ariakit.
|
|
106
|
+
* Tabs](https://ariakit.com/examples/select-combobox-tab)
|
|
107
107
|
*/
|
|
108
108
|
defaultValue?: SelectStoreState<T>["value"];
|
|
109
109
|
}
|
|
@@ -23,26 +23,26 @@ export interface SelectStoreState<T extends SelectStoreValue = SelectStoreValue>
|
|
|
23
23
|
* The select value.
|
|
24
24
|
*
|
|
25
25
|
* Live examples:
|
|
26
|
-
* - [Form with Select](https://ariakit.
|
|
27
|
-
* - [Select Grid](https://ariakit.
|
|
26
|
+
* - [Form with Select](https://ariakit.com/examples/form-select)
|
|
27
|
+
* - [Select Grid](https://ariakit.com/examples/select-grid)
|
|
28
28
|
* - [Select with custom
|
|
29
|
-
* items](https://ariakit.
|
|
30
|
-
* - [Multi-Select](https://ariakit.
|
|
31
|
-
* - [Toolbar with Select](https://ariakit.
|
|
29
|
+
* items](https://ariakit.com/examples/select-item-custom)
|
|
30
|
+
* - [Multi-Select](https://ariakit.com/examples/select-multiple)
|
|
31
|
+
* - [Toolbar with Select](https://ariakit.com/examples/toolbar-select)
|
|
32
32
|
* - [Select with Next.js App
|
|
33
|
-
* Router](https://ariakit.
|
|
33
|
+
* Router](https://ariakit.com/examples/select-next-router)
|
|
34
34
|
*/
|
|
35
35
|
value: MutableValue<T>;
|
|
36
36
|
/**
|
|
37
37
|
* Whether the select
|
|
38
|
-
* [`value`](https://ariakit.
|
|
38
|
+
* [`value`](https://ariakit.com/reference/select-provider#value) should be
|
|
39
39
|
* set when the active item changes by moving (which usually happens when
|
|
40
40
|
* moving to an item using the keyboard).
|
|
41
41
|
*
|
|
42
42
|
* Live examples:
|
|
43
|
-
* - [Select Grid](https://ariakit.
|
|
43
|
+
* - [Select Grid](https://ariakit.com/examples/select-grid)
|
|
44
44
|
* - [Select with custom
|
|
45
|
-
* items](https://ariakit.
|
|
45
|
+
* items](https://ariakit.com/examples/select-item-custom)
|
|
46
46
|
* @default false
|
|
47
47
|
*/
|
|
48
48
|
setValueOnMove: boolean;
|
|
@@ -54,7 +54,7 @@ export interface SelectStoreState<T extends SelectStoreValue = SelectStoreValue>
|
|
|
54
54
|
* The select button element.
|
|
55
55
|
*
|
|
56
56
|
* Live examples:
|
|
57
|
-
* - [Form with Select](https://ariakit.
|
|
57
|
+
* - [Form with Select](https://ariakit.com/examples/form-select)
|
|
58
58
|
*/
|
|
59
59
|
selectElement: HTMLElement | null;
|
|
60
60
|
/**
|
|
@@ -64,7 +64,7 @@ export interface SelectStoreState<T extends SelectStoreValue = SelectStoreValue>
|
|
|
64
64
|
}
|
|
65
65
|
export interface SelectStoreFunctions<T extends SelectStoreValue = SelectStoreValue> extends Pick<SelectStoreOptions<T>, "combobox">, CompositeStoreFunctions<SelectStoreItem>, PopoverStoreFunctions {
|
|
66
66
|
/**
|
|
67
|
-
* Sets the [`value`](https://ariakit.
|
|
67
|
+
* Sets the [`value`](https://ariakit.com/reference/select-provider#value)
|
|
68
68
|
* state.
|
|
69
69
|
* @example
|
|
70
70
|
* store.setValue("Apple");
|
|
@@ -96,14 +96,14 @@ export interface SelectStoreOptions<T extends SelectStoreValue = SelectStoreValu
|
|
|
96
96
|
* The default value. If not set, the first non-disabled item will be used.
|
|
97
97
|
*
|
|
98
98
|
* Live examples:
|
|
99
|
-
* - [Form with Select](https://ariakit.
|
|
100
|
-
* - [Animated Select](https://ariakit.
|
|
101
|
-
* - [Select with Combobox](https://ariakit.
|
|
102
|
-
* - [SelectGroup](https://ariakit.
|
|
99
|
+
* - [Form with Select](https://ariakit.com/examples/form-select)
|
|
100
|
+
* - [Animated Select](https://ariakit.com/examples/select-animated)
|
|
101
|
+
* - [Select with Combobox](https://ariakit.com/examples/select-combobox)
|
|
102
|
+
* - [SelectGroup](https://ariakit.com/examples/select-group)
|
|
103
103
|
* - [Select with Next.js App
|
|
104
|
-
* Router](https://ariakit.
|
|
104
|
+
* Router](https://ariakit.com/examples/select-next-router)
|
|
105
105
|
* - [Select with Combobox and
|
|
106
|
-
* Tabs](https://ariakit.
|
|
106
|
+
* Tabs](https://ariakit.com/examples/select-combobox-tab)
|
|
107
107
|
*/
|
|
108
108
|
defaultValue?: SelectStoreState<T>["value"];
|
|
109
109
|
}
|
package/cjs/tab/tab-store.cjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _UGAVMSQJcjs = require('../__chunks/UGAVMSQJ.cjs');
|
|
4
4
|
require('../__chunks/GDZQUFNP.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var
|
|
8
|
-
require('../__chunks/
|
|
7
|
+
var _VC22SYODcjs = require('../__chunks/VC22SYOD.cjs');
|
|
8
|
+
require('../__chunks/I4CBIWTX.cjs');
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
|
|
@@ -13,11 +13,11 @@ require('../__chunks/4ITB54IT.cjs');
|
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
var
|
|
16
|
+
var _WMTGHDLEcjs = require('../__chunks/WMTGHDLE.cjs');
|
|
17
17
|
|
|
18
18
|
|
|
19
19
|
|
|
20
|
-
var
|
|
20
|
+
var _4TRESXTOcjs = require('../__chunks/4TRESXTO.cjs');
|
|
21
21
|
|
|
22
22
|
// src/tab/tab-store.ts
|
|
23
23
|
function createTabStore({
|
|
@@ -37,49 +37,49 @@ function createTabStore({
|
|
|
37
37
|
"focusShift",
|
|
38
38
|
"focusWrap"
|
|
39
39
|
];
|
|
40
|
-
const store =
|
|
40
|
+
const store = _WMTGHDLEcjs.mergeStore.call(void 0,
|
|
41
41
|
props.store,
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
_WMTGHDLEcjs.omit.call(void 0, parentComposite, independentKeys),
|
|
43
|
+
_WMTGHDLEcjs.omit.call(void 0, combobox, independentKeys)
|
|
44
44
|
);
|
|
45
45
|
const syncState = store == null ? void 0 : store.getState();
|
|
46
|
-
const composite =
|
|
46
|
+
const composite = _UGAVMSQJcjs.createCompositeStore.call(void 0, {
|
|
47
47
|
...props,
|
|
48
48
|
store,
|
|
49
49
|
// We need to explicitly set the default value of `includesBaseElement` to
|
|
50
50
|
// `false` since we don't want the composite store to default it to `true`
|
|
51
51
|
// when the activeId state is null, which could be the case when rendering
|
|
52
52
|
// combobox with tab.
|
|
53
|
-
includesBaseElement:
|
|
53
|
+
includesBaseElement: _4TRESXTOcjs.defaultValue.call(void 0,
|
|
54
54
|
props.includesBaseElement,
|
|
55
55
|
syncState == null ? void 0 : syncState.includesBaseElement,
|
|
56
56
|
false
|
|
57
57
|
),
|
|
58
|
-
orientation:
|
|
58
|
+
orientation: _4TRESXTOcjs.defaultValue.call(void 0,
|
|
59
59
|
props.orientation,
|
|
60
60
|
syncState == null ? void 0 : syncState.orientation,
|
|
61
61
|
"horizontal"
|
|
62
62
|
),
|
|
63
|
-
focusLoop:
|
|
63
|
+
focusLoop: _4TRESXTOcjs.defaultValue.call(void 0, props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true)
|
|
64
64
|
});
|
|
65
|
-
const panels =
|
|
65
|
+
const panels = _VC22SYODcjs.createCollectionStore.call(void 0, );
|
|
66
66
|
const initialState = {
|
|
67
67
|
...composite.getState(),
|
|
68
|
-
selectedId:
|
|
68
|
+
selectedId: _4TRESXTOcjs.defaultValue.call(void 0,
|
|
69
69
|
props.selectedId,
|
|
70
70
|
syncState == null ? void 0 : syncState.selectedId,
|
|
71
71
|
props.defaultSelectedId
|
|
72
72
|
),
|
|
73
|
-
selectOnMove:
|
|
73
|
+
selectOnMove: _4TRESXTOcjs.defaultValue.call(void 0,
|
|
74
74
|
props.selectOnMove,
|
|
75
75
|
syncState == null ? void 0 : syncState.selectOnMove,
|
|
76
76
|
true
|
|
77
77
|
)
|
|
78
78
|
};
|
|
79
|
-
const tab =
|
|
80
|
-
|
|
79
|
+
const tab = _WMTGHDLEcjs.createStore.call(void 0, initialState, composite, store);
|
|
80
|
+
_WMTGHDLEcjs.setup.call(void 0,
|
|
81
81
|
tab,
|
|
82
|
-
() =>
|
|
82
|
+
() => _WMTGHDLEcjs.sync.call(void 0, tab, ["moves"], () => {
|
|
83
83
|
const { activeId, selectOnMove } = tab.getState();
|
|
84
84
|
if (!selectOnMove) return;
|
|
85
85
|
if (!activeId) return;
|
|
@@ -91,9 +91,9 @@ function createTabStore({
|
|
|
91
91
|
})
|
|
92
92
|
);
|
|
93
93
|
let syncActiveId = true;
|
|
94
|
-
|
|
94
|
+
_WMTGHDLEcjs.setup.call(void 0,
|
|
95
95
|
tab,
|
|
96
|
-
() =>
|
|
96
|
+
() => _WMTGHDLEcjs.batch.call(void 0, tab, ["selectedId"], (state, prev) => {
|
|
97
97
|
if (!syncActiveId) {
|
|
98
98
|
syncActiveId = true;
|
|
99
99
|
return;
|
|
@@ -102,9 +102,9 @@ function createTabStore({
|
|
|
102
102
|
tab.setState("activeId", state.selectedId);
|
|
103
103
|
})
|
|
104
104
|
);
|
|
105
|
-
|
|
105
|
+
_WMTGHDLEcjs.setup.call(void 0,
|
|
106
106
|
tab,
|
|
107
|
-
() =>
|
|
107
|
+
() => _WMTGHDLEcjs.sync.call(void 0, tab, ["selectedId", "renderedItems"], (state) => {
|
|
108
108
|
if (state.selectedId !== void 0) return;
|
|
109
109
|
const { activeId, renderedItems } = tab.getState();
|
|
110
110
|
const tabItem = composite.item(activeId);
|
|
@@ -118,12 +118,12 @@ function createTabStore({
|
|
|
118
118
|
}
|
|
119
119
|
})
|
|
120
120
|
);
|
|
121
|
-
|
|
121
|
+
_WMTGHDLEcjs.setup.call(void 0,
|
|
122
122
|
tab,
|
|
123
|
-
() =>
|
|
123
|
+
() => _WMTGHDLEcjs.sync.call(void 0, tab, ["renderedItems"], (state) => {
|
|
124
124
|
const tabs = state.renderedItems;
|
|
125
125
|
if (!tabs.length) return;
|
|
126
|
-
return
|
|
126
|
+
return _WMTGHDLEcjs.sync.call(void 0, panels, ["renderedItems"], (state2) => {
|
|
127
127
|
const items = state2.renderedItems;
|
|
128
128
|
const hasOrphanPanels = items.some((panel) => !panel.tabId);
|
|
129
129
|
if (!hasOrphanPanels) return;
|
|
@@ -137,7 +137,7 @@ function createTabStore({
|
|
|
137
137
|
})
|
|
138
138
|
);
|
|
139
139
|
let selectedIdFromSelectedValue = null;
|
|
140
|
-
|
|
140
|
+
_WMTGHDLEcjs.setup.call(void 0, tab, () => {
|
|
141
141
|
const backupSelectedId = () => {
|
|
142
142
|
selectedIdFromSelectedValue = tab.getState().selectedId;
|
|
143
143
|
};
|
|
@@ -146,15 +146,15 @@ function createTabStore({
|
|
|
146
146
|
tab.setState("selectedId", selectedIdFromSelectedValue);
|
|
147
147
|
};
|
|
148
148
|
if (parentComposite && "setSelectElement" in parentComposite) {
|
|
149
|
-
return
|
|
150
|
-
|
|
151
|
-
|
|
149
|
+
return _4TRESXTOcjs.chain.call(void 0,
|
|
150
|
+
_WMTGHDLEcjs.sync.call(void 0, parentComposite, ["value"], backupSelectedId),
|
|
151
|
+
_WMTGHDLEcjs.sync.call(void 0, parentComposite, ["mounted"], restoreSelectedId)
|
|
152
152
|
);
|
|
153
153
|
}
|
|
154
154
|
if (!combobox) return;
|
|
155
|
-
return
|
|
156
|
-
|
|
157
|
-
|
|
155
|
+
return _4TRESXTOcjs.chain.call(void 0,
|
|
156
|
+
_WMTGHDLEcjs.sync.call(void 0, combobox, ["selectedValue"], backupSelectedId),
|
|
157
|
+
_WMTGHDLEcjs.sync.call(void 0, combobox, ["mounted"], restoreSelectedId)
|
|
158
158
|
);
|
|
159
159
|
});
|
|
160
160
|
return {
|
package/cjs/tab/tab-store.d.cts
CHANGED
|
@@ -21,12 +21,12 @@ export interface TabStoreState extends CompositeStoreState<TabStoreItem> {
|
|
|
21
21
|
* will be automatically set to the first enabled tab.
|
|
22
22
|
*
|
|
23
23
|
* Live examples:
|
|
24
|
-
* - [Tab with React Router](https://ariakit.
|
|
25
|
-
* - [Combobox with Tabs](https://ariakit.
|
|
24
|
+
* - [Tab with React Router](https://ariakit.com/examples/tab-react-router)
|
|
25
|
+
* - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)
|
|
26
26
|
* - [Select with Combobox and
|
|
27
|
-
* Tabs](https://ariakit.
|
|
27
|
+
* Tabs](https://ariakit.com/examples/select-combobox-tab)
|
|
28
28
|
* - [Command Menu with
|
|
29
|
-
* Tabs](https://ariakit.
|
|
29
|
+
* Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)
|
|
30
30
|
*/
|
|
31
31
|
selectedId: TabStoreState["activeId"];
|
|
32
32
|
/**
|
|
@@ -35,9 +35,9 @@ export interface TabStoreState extends CompositeStoreState<TabStoreItem> {
|
|
|
35
35
|
* keys to shift focus.
|
|
36
36
|
*
|
|
37
37
|
* Live examples:
|
|
38
|
-
* - [Tab with React Router](https://ariakit.
|
|
38
|
+
* - [Tab with React Router](https://ariakit.com/examples/tab-react-router)
|
|
39
39
|
* - [Select with Combobox and
|
|
40
|
-
* Tabs](https://ariakit.
|
|
40
|
+
* Tabs](https://ariakit.com/examples/select-combobox-tab)
|
|
41
41
|
* @default true
|
|
42
42
|
*/
|
|
43
43
|
selectOnMove?: boolean;
|
|
@@ -45,9 +45,9 @@ export interface TabStoreState extends CompositeStoreState<TabStoreItem> {
|
|
|
45
45
|
export interface TabStoreFunctions extends CompositeStoreFunctions<TabStoreItem> {
|
|
46
46
|
/**
|
|
47
47
|
* Sets the
|
|
48
|
-
* [`selectedId`](https://ariakit.
|
|
48
|
+
* [`selectedId`](https://ariakit.com/reference/tab-provider#selectedid) state
|
|
49
49
|
* without moving focus. If you want to move focus, use the
|
|
50
|
-
* [`select`](https://ariakit.
|
|
50
|
+
* [`select`](https://ariakit.com/reference/use-tab-store#select) function
|
|
51
51
|
* instead.
|
|
52
52
|
* @example
|
|
53
53
|
* // Selects the tab with id "tab-1"
|
|
@@ -64,14 +64,14 @@ export interface TabStoreFunctions extends CompositeStoreFunctions<TabStoreItem>
|
|
|
64
64
|
* A collection store containing the tab panels.
|
|
65
65
|
*
|
|
66
66
|
* Live examples:
|
|
67
|
-
* - [Animated TabPanel](https://ariakit.
|
|
67
|
+
* - [Animated TabPanel](https://ariakit.com/examples/tab-panel-animated)
|
|
68
68
|
*/
|
|
69
69
|
panels: CollectionStore<TabStorePanel>;
|
|
70
70
|
/**
|
|
71
71
|
* Selects the tab for the given id and moves focus to it. If you want to set
|
|
72
|
-
* the [`selectedId`](https://ariakit.
|
|
72
|
+
* the [`selectedId`](https://ariakit.com/reference/tab-provider#selectedid)
|
|
73
73
|
* state without moving focus, use the
|
|
74
|
-
* [`setSelectedId`](https://ariakit.
|
|
74
|
+
* [`setSelectedId`](https://ariakit.com/reference/use-tab-store#setselectedid-1)
|
|
75
75
|
* function instead.
|
|
76
76
|
* @example
|
|
77
77
|
* // Selects the tab with id "tab-1"
|
|
@@ -86,18 +86,18 @@ export interface TabStoreFunctions extends CompositeStoreFunctions<TabStoreItem>
|
|
|
86
86
|
export interface TabStoreOptions extends StoreOptions<TabStoreState, "orientation" | "focusLoop" | "selectedId" | "selectOnMove">, CompositeStoreOptions<TabStoreItem> {
|
|
87
87
|
/**
|
|
88
88
|
* A reference to another [composite
|
|
89
|
-
* store](https://ariakit.
|
|
89
|
+
* store](https://ariakit.com/reference/use-composite-store). This is used when
|
|
90
90
|
* rendering tabs as part of another composite widget such as
|
|
91
|
-
* [Combobox](https://ariakit.
|
|
92
|
-
* [Select](https://ariakit.
|
|
91
|
+
* [Combobox](https://ariakit.com/components/combobox) or
|
|
92
|
+
* [Select](https://ariakit.com/components/select). The stores will share the
|
|
93
93
|
* same state.
|
|
94
94
|
*/
|
|
95
95
|
composite?: CompositeStore | SelectStore | null;
|
|
96
96
|
/**
|
|
97
97
|
* A reference to a [combobox
|
|
98
|
-
* store](https://ariakit.
|
|
98
|
+
* store](https://ariakit.com/reference/use-combobox-store). This is used when
|
|
99
99
|
* rendering tabs inside a
|
|
100
|
-
* [Combobox](https://ariakit.
|
|
100
|
+
* [Combobox](https://ariakit.com/components/combobox).
|
|
101
101
|
*/
|
|
102
102
|
combobox?: ComboboxStore | null;
|
|
103
103
|
/**
|
|
@@ -105,12 +105,12 @@ export interface TabStoreOptions extends StoreOptions<TabStoreState, "orientatio
|
|
|
105
105
|
* will be automatically set to the first enabled tab.
|
|
106
106
|
*
|
|
107
107
|
* Live examples:
|
|
108
|
-
* - [Combobox with Tabs](https://ariakit.
|
|
109
|
-
* - [Animated TabPanel](https://ariakit.
|
|
108
|
+
* - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)
|
|
109
|
+
* - [Animated TabPanel](https://ariakit.com/examples/tab-panel-animated)
|
|
110
110
|
* - [Select with Combobox and
|
|
111
|
-
* Tabs](https://ariakit.
|
|
111
|
+
* Tabs](https://ariakit.com/examples/select-combobox-tab)
|
|
112
112
|
* - [Command Menu with
|
|
113
|
-
* Tabs](https://ariakit.
|
|
113
|
+
* Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)
|
|
114
114
|
*/
|
|
115
115
|
defaultSelectedId?: TabStoreState["selectedId"];
|
|
116
116
|
}
|