@ariakit/react-core 0.3.6 → 0.3.8
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 +41 -0
- package/cjs/__chunks/{VEG6PRAG.cjs → 3WCBE6SU.cjs} +3 -1
- package/cjs/__chunks/{45RPYV4J.cjs → EQ4A5RPW.cjs} +2 -2
- package/cjs/__chunks/{CILQPSH2.cjs → FA25CV2I.cjs} +2 -2
- package/cjs/__chunks/{RRW7YVFR.cjs → IPYAEPOT.cjs} +17 -6
- package/cjs/__chunks/{AYDXWQBF.cjs → L3WS5HGI.cjs} +2 -0
- package/cjs/__chunks/{QU2266CJ.cjs → WH4I6OSN.cjs} +12 -4
- package/cjs/__chunks/{LVOI2KVN.cjs → XGKLTARH.cjs} +2 -2
- package/cjs/__chunks/{4GLXDOKG.cjs → YAPOM5RT.cjs} +2 -2
- package/cjs/checkbox/checkbox-provider.cjs +2 -2
- package/cjs/combobox/combobox-cancel.cjs +2 -2
- package/cjs/combobox/combobox-context.cjs +4 -2
- package/cjs/combobox/combobox-context.d.cts +6 -5
- package/cjs/combobox/combobox-context.d.ts +6 -5
- package/cjs/combobox/combobox-disclosure.cjs +2 -2
- package/cjs/combobox/combobox-item-check.cjs +50 -0
- package/cjs/combobox/combobox-item-check.d.cts +60 -0
- package/cjs/combobox/combobox-item-check.d.ts +60 -0
- package/cjs/combobox/combobox-item-value.cjs +3 -3
- package/cjs/combobox/combobox-item.cjs +47 -10
- package/cjs/combobox/combobox-item.d.cts +31 -13
- package/cjs/combobox/combobox-item.d.ts +31 -13
- package/cjs/combobox/combobox-label.cjs +55 -0
- package/cjs/combobox/combobox-label.d.cts +42 -0
- package/cjs/combobox/combobox-label.d.ts +42 -0
- package/cjs/combobox/combobox-list.cjs +3 -3
- package/cjs/combobox/combobox-popover.cjs +7 -7
- package/cjs/combobox/combobox-provider.cjs +4 -4
- package/cjs/combobox/combobox-provider.d.cts +8 -4
- package/cjs/combobox/combobox-provider.d.ts +8 -4
- package/cjs/combobox/combobox-row.cjs +2 -2
- package/cjs/combobox/combobox-separator.cjs +2 -2
- package/cjs/combobox/combobox-store.cjs +2 -2
- package/cjs/combobox/combobox-store.d.cts +28 -9
- package/cjs/combobox/combobox-store.d.ts +28 -9
- package/cjs/combobox/combobox.cjs +28 -14
- package/cjs/combobox/combobox.d.cts +2 -1
- package/cjs/combobox/combobox.d.ts +2 -1
- package/cjs/composite/composite-hover.cjs +2 -2
- package/cjs/composite/composite-hover.d.cts +9 -0
- package/cjs/composite/composite-hover.d.ts +9 -0
- package/cjs/composite/composite-item.d.cts +3 -0
- package/cjs/composite/composite-item.d.ts +3 -0
- package/cjs/composite/composite-overflow.cjs +2 -2
- package/cjs/disclosure/disclosure-content.d.cts +3 -1
- package/cjs/disclosure/disclosure-content.d.ts +3 -1
- package/cjs/disclosure/disclosure.d.cts +3 -0
- package/cjs/disclosure/disclosure.d.ts +3 -0
- package/cjs/focusable/focusable.d.cts +2 -1
- package/cjs/focusable/focusable.d.ts +2 -1
- package/cjs/form/form-checkbox.cjs +1 -1
- package/cjs/hovercard/hovercard-anchor.d.cts +3 -0
- package/cjs/hovercard/hovercard-anchor.d.ts +3 -0
- package/cjs/hovercard/hovercard.cjs +3 -3
- package/cjs/menu/menu-button.cjs +33 -21
- package/cjs/menu/menu-item-checkbox.cjs +4 -4
- package/cjs/menu/menu-item-radio.cjs +3 -3
- package/cjs/menu/menu-item.cjs +3 -3
- package/cjs/menu/menu-provider.cjs +3 -3
- package/cjs/menu/menu-store.cjs +3 -3
- package/cjs/menu/menu-store.d.cts +7 -55
- package/cjs/menu/menu-store.d.ts +7 -55
- package/cjs/menu/menu.cjs +3 -3
- package/cjs/popover/popover.cjs +2 -2
- package/cjs/popover/popover.d.cts +4 -0
- package/cjs/popover/popover.d.ts +4 -0
- package/cjs/portal/portal.d.cts +5 -1
- package/cjs/portal/portal.d.ts +5 -1
- package/cjs/select/select-item.cjs +5 -5
- package/cjs/select/select-label.cjs +1 -1
- package/cjs/select/select-popover.cjs +2 -2
- package/cjs/select/select-provider.cjs +3 -3
- package/cjs/select/select-store.cjs +3 -3
- package/cjs/select/select-store.d.cts +1 -7
- package/cjs/select/select-store.d.ts +1 -7
- package/cjs/tooltip/tooltip.cjs +3 -3
- package/combobox/combobox-item-check/package.json +8 -0
- package/combobox/combobox-label/package.json +8 -0
- package/esm/__chunks/{KFUKDUTY.js → 4AMOOZBQ.js} +10 -2
- package/esm/__chunks/{PHTJ3BCW.js → 7HYEBVZE.js} +1 -1
- package/esm/__chunks/{YGJUONJM.js → BONLQCKO.js} +1 -1
- package/esm/__chunks/{BRO2JF5P.js → G6ONQ5EH.js} +20 -9
- package/esm/__chunks/{W3TC4TID.js → JRUYDVPB.js} +1 -1
- package/esm/__chunks/{NE6JAKK6.js → P3UZS6BC.js} +1 -1
- package/esm/__chunks/{MTC2KUZZ.js → W76OTZCC.js} +3 -1
- package/esm/__chunks/{24AKC2LC.js → ZETMAOTK.js} +2 -0
- package/esm/checkbox/checkbox-provider.js +3 -3
- package/esm/combobox/combobox-cancel.js +1 -1
- package/esm/combobox/combobox-context.d.ts +6 -5
- package/esm/combobox/combobox-context.js +3 -1
- package/esm/combobox/combobox-disclosure.js +1 -1
- package/esm/combobox/combobox-item-check.d.ts +60 -0
- package/esm/combobox/combobox-item-check.js +50 -0
- package/esm/combobox/combobox-item-value.js +1 -1
- package/esm/combobox/combobox-item.d.ts +31 -13
- package/esm/combobox/combobox-item.js +45 -8
- package/esm/combobox/combobox-label.d.ts +42 -0
- package/esm/combobox/combobox-label.js +55 -0
- package/esm/combobox/combobox-list.js +2 -2
- package/esm/combobox/combobox-popover.js +3 -3
- package/esm/combobox/combobox-provider.d.ts +8 -4
- package/esm/combobox/combobox-provider.js +2 -2
- package/esm/combobox/combobox-row.js +1 -1
- package/esm/combobox/combobox-separator.js +1 -1
- package/esm/combobox/combobox-store.d.ts +28 -9
- package/esm/combobox/combobox-store.js +1 -1
- package/esm/combobox/combobox.d.ts +2 -1
- package/esm/combobox/combobox.js +28 -14
- package/esm/composite/composite-hover.d.ts +9 -0
- package/esm/composite/composite-hover.js +1 -1
- package/esm/composite/composite-item.d.ts +3 -0
- package/esm/composite/composite-overflow.js +1 -1
- package/esm/disclosure/disclosure-content.d.ts +3 -1
- package/esm/disclosure/disclosure.d.ts +3 -0
- package/esm/focusable/focusable.d.ts +2 -1
- package/esm/form/form-checkbox.js +1 -1
- package/esm/hovercard/hovercard-anchor.d.ts +3 -0
- package/esm/hovercard/hovercard.js +2 -2
- package/esm/menu/menu-button.js +33 -21
- package/esm/menu/menu-item-checkbox.js +3 -3
- package/esm/menu/menu-item-radio.js +2 -2
- package/esm/menu/menu-item.js +2 -2
- package/esm/menu/menu-provider.js +2 -2
- package/esm/menu/menu-store.d.ts +7 -55
- package/esm/menu/menu-store.js +2 -2
- package/esm/menu/menu.js +2 -2
- package/esm/popover/popover.d.ts +4 -0
- package/esm/popover/popover.js +1 -1
- package/esm/portal/portal.d.ts +5 -1
- package/esm/select/select-item.js +4 -4
- package/esm/select/select-label.js +2 -2
- package/esm/select/select-popover.js +1 -1
- package/esm/select/select-provider.js +2 -2
- package/esm/select/select-store.d.ts +1 -7
- package/esm/select/select-store.js +2 -2
- package/esm/tooltip/tooltip.js +2 -2
- package/package.json +16 -2
- package/cjs/collection/collection-context.d.cts +0 -34
- package/cjs/collection/collection-context.d.ts +0 -34
- package/cjs/composite/utils.d.cts +0 -69
- package/cjs/composite/utils.d.ts +0 -69
- package/cjs/tab/tab-store.d.cts +0 -74
- package/cjs/tab/tab-store.d.ts +0 -74
- package/esm/collection/collection-context.d.ts +0 -34
- package/esm/composite/utils.d.ts +0 -69
- package/esm/tab/tab-store.d.ts +0 -74
- package/cjs/__chunks/{ISGOCBDC.cjs → RIZYIKBE.cjs} +1 -1
- package/esm/__chunks/{KB2HXEVC.js → WBQC3LL4.js} +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,46 @@
|
|
|
1
1
|
# @ariakit/react-core
|
|
2
2
|
|
|
3
|
+
## 0.3.8
|
|
4
|
+
|
|
5
|
+
### Multi-selectable Combobox
|
|
6
|
+
|
|
7
|
+
We've added support for the [Combobox](https://ariakit.org/components/combobox) with multiple selection capabilities using a new [`selectedValue`](https://ariakit.org/reference/combobox-provider#selectedvalue) prop, along with [`defaultSelectedValue`](https://ariakit.org/reference/combobox-provider#defaultselectedvalue) and [`setSelectedValue`](https://ariakit.org/reference/combobox-provider#setselectedvalue).
|
|
8
|
+
|
|
9
|
+
This works similarly to the [`value`](https://ariakit.org/reference/select-provider#value) prop on [Select](https://ariakit.org/components/select) components. If it receives an array, the combobox will allow multiple selections. By default, it's a string that represents the selected value in a single-select combobox.
|
|
10
|
+
|
|
11
|
+
Check out the [Multi-selectable Combobox](https://ariakit.org/examples/combobox-multiple) example to see it in action.
|
|
12
|
+
|
|
13
|
+
### New Combobox components
|
|
14
|
+
|
|
15
|
+
This version introduces new [Combobox](https://ariakit.org/components/combobox) components:
|
|
16
|
+
|
|
17
|
+
- [`ComboboxLabel`](https://ariakit.org/reference/combobox-label): This renders a `label` element for a [`Combobox`](https://ariakit.org/reference/combobox), with the `htmlFor` prop set automatically.
|
|
18
|
+
- [`ComboboxItemCheck`](https://ariakit.org/reference/combobox-item-check): This displays a checkmark for a [`ComboboxItem`](https://ariakit.org/reference/combobox-item) when the item is selected.
|
|
19
|
+
|
|
20
|
+
### Other updates
|
|
21
|
+
|
|
22
|
+
- Added [`resetValueOnSelect`](https://ariakit.org/reference/combobox-provider#resetvalueonselect) state to [Combobox](https://ariakit.org/components/combobox) components.
|
|
23
|
+
- Added [`selectValueOnClick`](https://ariakit.org/reference/combobox-item#selectvalueonclick) prop to [`ComboboxItem`](https://ariakit.org/reference/combobox-item).
|
|
24
|
+
- Fixed [`SelectItem`](https://ariakit.org/reference/select-item) rendering an `aria-selected` attribute even when the [`value`](https://ariakit.org/reference/select-item#value) prop is omitted.
|
|
25
|
+
- Updated dependencies: `@ariakit/core@0.3.7`
|
|
26
|
+
|
|
27
|
+
## 0.3.7
|
|
28
|
+
|
|
29
|
+
### Expanding Menubar
|
|
30
|
+
|
|
31
|
+
The [Menubar](https://ariakit.org/components/menubar) component will now only expand if there's another menu already expanded in the same menubar.
|
|
32
|
+
|
|
33
|
+
### Internal data attribute changes
|
|
34
|
+
|
|
35
|
+
Just like the change in v0.3.6 that removed the `data-command` and `data-disclosure` attributes from elements, this update stops the `data-composite-hover` attribute from infiltrating composite item elements in the DOM. We're mentioning this in the changelog as some users might have snapshot tests that require updating.
|
|
36
|
+
|
|
37
|
+
### Other updates
|
|
38
|
+
|
|
39
|
+
- Fixed `setSelectionRange` error when used with [unsupported](https://html.spec.whatwg.org/multipage/input.html#concept-input-apply) input types.
|
|
40
|
+
- Fixed [`MenuButton`](https://ariakit.org/reference/menu-button) with [`showOnHover`](https://ariakit.org/reference/menu-button#showonhover) not updating the `activeId` state when hovered.
|
|
41
|
+
- Updated [`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible) element type on [`Focusable`](https://ariakit.org/reference/focusable) from `Element` to `HTMLElement`.
|
|
42
|
+
- Updated dependencies: `@ariakit/core@0.3.6`
|
|
43
|
+
|
|
3
44
|
## 0.3.6
|
|
4
45
|
|
|
5
46
|
### Data attributes for duplicate components
|
|
@@ -25,6 +25,7 @@ var ComboboxScopedContextProvider = ctx.ScopedContextProvider;
|
|
|
25
25
|
var ComboboxItemValueContext = _react.createContext.call(void 0,
|
|
26
26
|
void 0
|
|
27
27
|
);
|
|
28
|
+
var ComboboxItemCheckedContext = _react.createContext.call(void 0, false);
|
|
28
29
|
|
|
29
30
|
|
|
30
31
|
|
|
@@ -33,4 +34,5 @@ var ComboboxItemValueContext = _react.createContext.call(void 0,
|
|
|
33
34
|
|
|
34
35
|
|
|
35
36
|
|
|
36
|
-
|
|
37
|
+
|
|
38
|
+
exports.useComboboxContext = useComboboxContext; exports.useComboboxScopedContext = useComboboxScopedContext; exports.useComboboxProviderContext = useComboboxProviderContext; exports.ComboboxContextProvider = ComboboxContextProvider; exports.ComboboxScopedContextProvider = ComboboxScopedContextProvider; exports.ComboboxItemValueContext = ComboboxItemValueContext; exports.ComboboxItemCheckedContext = ComboboxItemCheckedContext;
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
var _KXQOQQ5Bcjs = require('./KXQOQQ5B.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var _RIZYIKBEcjs = require('./RIZYIKBE.cjs');
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
var _XFPRAS3Jcjs = require('./XFPRAS3J.cjs');
|
|
@@ -283,7 +283,7 @@ var useHovercard = _RNZNGEL4cjs.createHook.call(void 0,
|
|
|
283
283
|
const autoFocusOnShow = store.useState(
|
|
284
284
|
(state) => modal || state.autoFocusOnShow
|
|
285
285
|
);
|
|
286
|
-
props =
|
|
286
|
+
props = _RIZYIKBEcjs.usePopover.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
|
|
287
287
|
store,
|
|
288
288
|
modal,
|
|
289
289
|
portal,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _3WCBE6SUcjs = require('./3WCBE6SU.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
var _A5RWZSX7cjs = require('./A5RWZSX7.cjs');
|
|
@@ -31,7 +31,7 @@ function useSelectStoreProps(store, update, props) {
|
|
|
31
31
|
return Object.assign(store, { combobox: props.combobox });
|
|
32
32
|
}
|
|
33
33
|
function useSelectStore(props = {}) {
|
|
34
|
-
const combobox =
|
|
34
|
+
const combobox = _3WCBE6SUcjs.useComboboxProviderContext.call(void 0, );
|
|
35
35
|
props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), {
|
|
36
36
|
combobox: props.combobox !== void 0 ? props.combobox : combobox
|
|
37
37
|
});
|
|
@@ -11,6 +11,7 @@ var _RNZNGEL4cjs = require('./RNZNGEL4.cjs');
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
14
|
+
|
|
14
15
|
var _EO6LS72Hcjs = require('./EO6LS72H.cjs');
|
|
15
16
|
|
|
16
17
|
|
|
@@ -19,6 +20,7 @@ var _EO6LS72Hcjs = require('./EO6LS72H.cjs');
|
|
|
19
20
|
var _AV6KTKLEcjs = require('./AV6KTKLE.cjs');
|
|
20
21
|
|
|
21
22
|
// src/composite/composite-hover.ts
|
|
23
|
+
var _react = require('react');
|
|
22
24
|
var _dom = require('@ariakit/core/utils/dom');
|
|
23
25
|
var _focus = require('@ariakit/core/utils/focus');
|
|
24
26
|
var _misc = require('@ariakit/core/utils/misc');
|
|
@@ -35,12 +37,17 @@ function hoveringInside(event) {
|
|
|
35
37
|
return false;
|
|
36
38
|
return _dom.contains.call(void 0, event.currentTarget, nextElement);
|
|
37
39
|
}
|
|
40
|
+
var symbol = Symbol("composite-hover");
|
|
38
41
|
function movingToAnotherItem(event) {
|
|
39
|
-
|
|
42
|
+
let dest = getMouseDestination(event);
|
|
40
43
|
if (!dest)
|
|
41
44
|
return false;
|
|
42
|
-
|
|
43
|
-
|
|
45
|
+
do {
|
|
46
|
+
if (_misc.hasOwnProperty.call(void 0, dest, symbol) && dest[symbol])
|
|
47
|
+
return true;
|
|
48
|
+
dest = dest.parentElement;
|
|
49
|
+
} while (dest);
|
|
50
|
+
return false;
|
|
44
51
|
}
|
|
45
52
|
var useCompositeHover = _RNZNGEL4cjs.createHook.call(void 0,
|
|
46
53
|
(_a) => {
|
|
@@ -98,9 +105,13 @@ var useCompositeHover = _RNZNGEL4cjs.createHook.call(void 0,
|
|
|
98
105
|
store == null ? void 0 : store.setActiveId(null);
|
|
99
106
|
(_a2 = store == null ? void 0 : store.getState().baseElement) == null ? void 0 : _a2.focus();
|
|
100
107
|
});
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
108
|
+
const ref = _react.useCallback.call(void 0, (element) => {
|
|
109
|
+
if (!element)
|
|
110
|
+
return;
|
|
111
|
+
element[symbol] = true;
|
|
112
|
+
}, []);
|
|
113
|
+
props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), {
|
|
114
|
+
ref: _EO6LS72Hcjs.useMergeRefs.call(void 0, ref, props.ref),
|
|
104
115
|
onMouseMove,
|
|
105
116
|
onMouseLeave
|
|
106
117
|
});
|
|
@@ -16,7 +16,9 @@ function useComboboxStoreProps(store, update, props) {
|
|
|
16
16
|
store = _65GJIQK5cjs.usePopoverStoreProps.call(void 0, store, update, props);
|
|
17
17
|
store = _A5RWZSX7cjs.useCompositeStoreProps.call(void 0, store, update, props);
|
|
18
18
|
_OALXXRFMcjs.useStoreProps.call(void 0, store, props, "value", "setValue");
|
|
19
|
+
_OALXXRFMcjs.useStoreProps.call(void 0, store, props, "selectedValue", "setSelectedValue");
|
|
19
20
|
_OALXXRFMcjs.useStoreProps.call(void 0, store, props, "resetValueOnHide");
|
|
21
|
+
_OALXXRFMcjs.useStoreProps.call(void 0, store, props, "resetValueOnSelect");
|
|
20
22
|
return store;
|
|
21
23
|
}
|
|
22
24
|
function useComboboxStore(props = {}) {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _3WCBE6SUcjs = require('./3WCBE6SU.cjs');
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
var _7BSMGTGRcjs = require('./7BSMGTGR.cjs');
|
|
@@ -19,6 +19,7 @@ var _RNZNGEL4cjs = require('./RNZNGEL4.cjs');
|
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
|
|
22
|
+
|
|
22
23
|
var _EO6LS72Hcjs = require('./EO6LS72H.cjs');
|
|
23
24
|
|
|
24
25
|
|
|
@@ -34,7 +35,7 @@ var _jsxruntime = require('react/jsx-runtime');
|
|
|
34
35
|
var useComboboxList = _RNZNGEL4cjs.createHook.call(void 0,
|
|
35
36
|
(_a) => {
|
|
36
37
|
var _b = _a, { store, focusable = true, alwaysVisible } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store", "focusable", "alwaysVisible"]);
|
|
37
|
-
const context =
|
|
38
|
+
const context = _3WCBE6SUcjs.useComboboxProviderContext.call(void 0, );
|
|
38
39
|
store = store || context;
|
|
39
40
|
_misc.invariant.call(void 0,
|
|
40
41
|
store,
|
|
@@ -84,17 +85,24 @@ var useComboboxList = _RNZNGEL4cjs.createHook.call(void 0,
|
|
|
84
85
|
});
|
|
85
86
|
props = _EO6LS72Hcjs.useWrapElement.call(void 0,
|
|
86
87
|
props,
|
|
87
|
-
(element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
88
|
+
(element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3WCBE6SUcjs.ComboboxScopedContextProvider, { value: store, children: element }),
|
|
88
89
|
[store]
|
|
89
90
|
);
|
|
90
91
|
const mounted = store.useState("mounted");
|
|
91
92
|
const hidden = _7BSMGTGRcjs.isHidden.call(void 0, mounted, props.hidden, alwaysVisible);
|
|
92
93
|
const style = hidden ? _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props.style), { display: "none" }) : props.style;
|
|
94
|
+
const multiSelectable = store.useState(
|
|
95
|
+
(state) => Array.isArray(state.selectedValue)
|
|
96
|
+
);
|
|
97
|
+
const role = _EO6LS72Hcjs.useAttribute.call(void 0, ref, "role", props.role);
|
|
98
|
+
const isCompositeRole = role === "listbox" || role === "tree" || role === "grid";
|
|
99
|
+
const ariaMultiSelectable = isCompositeRole ? multiSelectable || void 0 : void 0;
|
|
93
100
|
props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
|
|
94
101
|
id,
|
|
95
102
|
hidden,
|
|
96
103
|
role: "listbox",
|
|
97
|
-
tabIndex: focusable ? -1 : void 0
|
|
104
|
+
tabIndex: focusable ? -1 : void 0,
|
|
105
|
+
"aria-multiselectable": ariaMultiSelectable
|
|
98
106
|
}, props), {
|
|
99
107
|
ref: _EO6LS72Hcjs.useMergeRefs.call(void 0, id ? store.setContentElement : null, ref, props.ref),
|
|
100
108
|
style,
|
|
@@ -7,7 +7,7 @@ var _NGEKJJDHcjs = require('./NGEKJJDH.cjs');
|
|
|
7
7
|
var _7LBZXSLYcjs = require('./7LBZXSLY.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var _3WCBE6SUcjs = require('./3WCBE6SU.cjs');
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
var _A5RWZSX7cjs = require('./A5RWZSX7.cjs');
|
|
@@ -42,7 +42,7 @@ function useMenuStoreProps(store, update, props) {
|
|
|
42
42
|
function useMenuStore(props = {}) {
|
|
43
43
|
const parent = _NGEKJJDHcjs.useMenuContext.call(void 0, );
|
|
44
44
|
const menubar = _7LBZXSLYcjs.useMenubarContext.call(void 0, );
|
|
45
|
-
const combobox =
|
|
45
|
+
const combobox = _3WCBE6SUcjs.useComboboxProviderContext.call(void 0, );
|
|
46
46
|
props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), {
|
|
47
47
|
parent: props.parent !== void 0 ? props.parent : parent,
|
|
48
48
|
menubar: props.menubar !== void 0 ? props.menubar : menubar,
|
|
@@ -7,7 +7,7 @@ var _NGEKJJDHcjs = require('./NGEKJJDH.cjs');
|
|
|
7
7
|
var _7LBZXSLYcjs = require('./7LBZXSLY.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var _IPYAEPOTcjs = require('./IPYAEPOT.cjs');
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
var _P43G7USHcjs = require('./P43G7USH.cjs');
|
|
@@ -109,7 +109,7 @@ var useMenuItem = _RNZNGEL4cjs.createHook.call(void 0,
|
|
|
109
109
|
onClick
|
|
110
110
|
});
|
|
111
111
|
props = _P43G7USHcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, preventScrollOnKeyDown }, props));
|
|
112
|
-
props =
|
|
112
|
+
props = _IPYAEPOTcjs.useCompositeHover.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
|
|
113
113
|
store
|
|
114
114
|
}, props), {
|
|
115
115
|
focusOnHover: (event) => {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _63UPRTFZcjs = require('../__chunks/63UPRTFZ.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var _5GQV7KPQcjs = require('../__chunks/5GQV7KPQ.cjs');
|
|
8
8
|
require('../__chunks/RNZNGEL4.cjs');
|
|
9
9
|
require('../__chunks/OALXXRFM.cjs');
|
|
10
10
|
require('../__chunks/EO6LS72H.cjs');
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
var _5UTRYT6Ecjs = require('../__chunks/5UTRYT6E.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
|
|
8
8
|
require('../__chunks/DAJUUBUI.cjs');
|
|
9
9
|
require('../__chunks/UZNYSPKP.cjs');
|
|
10
10
|
require('../__chunks/BZTDJIVT.cjs');
|
|
@@ -54,7 +54,7 @@ var children = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
|
54
54
|
var useComboboxCancel = _RNZNGEL4cjs.createHook.call(void 0,
|
|
55
55
|
(_a) => {
|
|
56
56
|
var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
|
|
57
|
-
const context =
|
|
57
|
+
const context = _3WCBE6SUcjs.useComboboxProviderContext.call(void 0, );
|
|
58
58
|
store = store || context;
|
|
59
59
|
_misc.invariant.call(void 0,
|
|
60
60
|
store,
|
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
|
|
10
|
+
var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
|
|
10
11
|
require('../__chunks/UZNYSPKP.cjs');
|
|
11
12
|
require('../__chunks/BZTDJIVT.cjs');
|
|
12
13
|
require('../__chunks/UVBBMANL.cjs');
|
|
@@ -23,4 +24,5 @@ require('../__chunks/AV6KTKLE.cjs');
|
|
|
23
24
|
|
|
24
25
|
|
|
25
26
|
|
|
26
|
-
|
|
27
|
+
|
|
28
|
+
exports.ComboboxContextProvider = _3WCBE6SUcjs.ComboboxContextProvider; exports.ComboboxItemCheckedContext = _3WCBE6SUcjs.ComboboxItemCheckedContext; exports.ComboboxItemValueContext = _3WCBE6SUcjs.ComboboxItemValueContext; exports.ComboboxScopedContextProvider = _3WCBE6SUcjs.ComboboxScopedContextProvider; exports.useComboboxContext = _3WCBE6SUcjs.useComboboxContext; exports.useComboboxProviderContext = _3WCBE6SUcjs.useComboboxProviderContext; exports.useComboboxScopedContext = _3WCBE6SUcjs.useComboboxScopedContext;
|
|
@@ -12,9 +12,10 @@ import type { ComboboxStore } from "./combobox-store.js";
|
|
|
12
12
|
* // Use the store...
|
|
13
13
|
* }
|
|
14
14
|
*/
|
|
15
|
-
export declare const useComboboxContext: () => ComboboxStore | undefined;
|
|
16
|
-
export declare const useComboboxScopedContext: (onlyScoped?: boolean) => ComboboxStore | undefined;
|
|
17
|
-
export declare const useComboboxProviderContext: () => ComboboxStore | undefined;
|
|
18
|
-
export declare const ComboboxContextProvider: (props: import("react").ProviderProps<ComboboxStore | undefined>) => import("react/jsx-runtime").JSX.Element;
|
|
19
|
-
export declare const ComboboxScopedContextProvider: (props: import("react").ProviderProps<ComboboxStore | undefined>) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const useComboboxContext: () => ComboboxStore<string | string[]> | undefined;
|
|
16
|
+
export declare const useComboboxScopedContext: (onlyScoped?: boolean) => ComboboxStore<string | string[]> | undefined;
|
|
17
|
+
export declare const useComboboxProviderContext: () => ComboboxStore<string | string[]> | undefined;
|
|
18
|
+
export declare const ComboboxContextProvider: (props: import("react").ProviderProps<ComboboxStore<string | string[]> | undefined>) => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare const ComboboxScopedContextProvider: (props: import("react").ProviderProps<ComboboxStore<string | string[]> | undefined>) => import("react/jsx-runtime").JSX.Element;
|
|
20
20
|
export declare const ComboboxItemValueContext: import("react").Context<string | undefined>;
|
|
21
|
+
export declare const ComboboxItemCheckedContext: import("react").Context<boolean>;
|
|
@@ -12,9 +12,10 @@ import type { ComboboxStore } from "./combobox-store.js";
|
|
|
12
12
|
* // Use the store...
|
|
13
13
|
* }
|
|
14
14
|
*/
|
|
15
|
-
export declare const useComboboxContext: () => ComboboxStore | undefined;
|
|
16
|
-
export declare const useComboboxScopedContext: (onlyScoped?: boolean) => ComboboxStore | undefined;
|
|
17
|
-
export declare const useComboboxProviderContext: () => ComboboxStore | undefined;
|
|
18
|
-
export declare const ComboboxContextProvider: (props: import("react").ProviderProps<ComboboxStore | undefined>) => import("react/jsx-runtime").JSX.Element;
|
|
19
|
-
export declare const ComboboxScopedContextProvider: (props: import("react").ProviderProps<ComboboxStore | undefined>) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const useComboboxContext: () => ComboboxStore<string | string[]> | undefined;
|
|
16
|
+
export declare const useComboboxScopedContext: (onlyScoped?: boolean) => ComboboxStore<string | string[]> | undefined;
|
|
17
|
+
export declare const useComboboxProviderContext: () => ComboboxStore<string | string[]> | undefined;
|
|
18
|
+
export declare const ComboboxContextProvider: (props: import("react").ProviderProps<ComboboxStore<string | string[]> | undefined>) => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare const ComboboxScopedContextProvider: (props: import("react").ProviderProps<ComboboxStore<string | string[]> | undefined>) => import("react/jsx-runtime").JSX.Element;
|
|
20
20
|
export declare const ComboboxItemValueContext: import("react").Context<string | undefined>;
|
|
21
|
+
export declare const ComboboxItemCheckedContext: import("react").Context<boolean>;
|
|
@@ -6,7 +6,7 @@ require('../__chunks/LFHNPG2L.cjs');
|
|
|
6
6
|
require('../__chunks/5UTRYT6E.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
|
|
10
10
|
require('../__chunks/DAJUUBUI.cjs');
|
|
11
11
|
require('../__chunks/UZNYSPKP.cjs');
|
|
12
12
|
require('../__chunks/BZTDJIVT.cjs');
|
|
@@ -53,7 +53,7 @@ var children = /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
|
53
53
|
var useComboboxDisclosure = _RNZNGEL4cjs.createHook.call(void 0,
|
|
54
54
|
(_a) => {
|
|
55
55
|
var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
|
|
56
|
-
const context =
|
|
56
|
+
const context = _3WCBE6SUcjs.useComboboxProviderContext.call(void 0, );
|
|
57
57
|
store = store || context;
|
|
58
58
|
_misc.invariant.call(void 0,
|
|
59
59
|
store,
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
var _T4KYZJUYcjs = require('../__chunks/T4KYZJUY.cjs');
|
|
5
|
+
require('../__chunks/ERFHNHON.cjs');
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
|
|
9
|
+
require('../__chunks/UZNYSPKP.cjs');
|
|
10
|
+
require('../__chunks/BZTDJIVT.cjs');
|
|
11
|
+
require('../__chunks/UVBBMANL.cjs');
|
|
12
|
+
require('../__chunks/F2A2ZQDB.cjs');
|
|
13
|
+
require('../__chunks/S6UU7NA4.cjs');
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
|
|
19
|
+
require('../__chunks/EO6LS72H.cjs');
|
|
20
|
+
require('../__chunks/CJDHQUBR.cjs');
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
|
|
26
|
+
|
|
27
|
+
// src/combobox/combobox-item-check.ts
|
|
28
|
+
var _react = require('react');
|
|
29
|
+
var useComboboxItemCheck = _RNZNGEL4cjs.createHook.call(void 0,
|
|
30
|
+
(_a) => {
|
|
31
|
+
var _b = _a, { store, checked } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store", "checked"]);
|
|
32
|
+
const context = _react.useContext.call(void 0, _3WCBE6SUcjs.ComboboxItemCheckedContext);
|
|
33
|
+
checked = checked != null ? checked : context;
|
|
34
|
+
props = _T4KYZJUYcjs.useCheckboxCheck.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), { checked }));
|
|
35
|
+
return props;
|
|
36
|
+
}
|
|
37
|
+
);
|
|
38
|
+
var ComboboxItemCheck = _RNZNGEL4cjs.createComponent.call(void 0,
|
|
39
|
+
(props) => {
|
|
40
|
+
const htmlProps = useComboboxItemCheck(props);
|
|
41
|
+
return _RNZNGEL4cjs.createElement.call(void 0, "span", htmlProps);
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
if (process.env.NODE_ENV !== "production") {
|
|
45
|
+
ComboboxItemCheck.displayName = "ComboboxItemCheck";
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
exports.ComboboxItemCheck = ComboboxItemCheck; exports.useComboboxItemCheck = useComboboxItemCheck;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import type { CheckboxCheckOptions } from "../checkbox/checkbox-check.jsx";
|
|
2
|
+
import type { As, Props } from "../utils/types.js";
|
|
3
|
+
import type { ComboboxStore } from "./combobox-store.js";
|
|
4
|
+
/**
|
|
5
|
+
* Returns props to create a `ComboboxItemCheck` component. This hook must be
|
|
6
|
+
* used in a component that's wrapped with `ComboboxItem` or the `checked` prop
|
|
7
|
+
* must be explicitly passed to the component.
|
|
8
|
+
* @see https://ariakit.org/components/combobox
|
|
9
|
+
* @example
|
|
10
|
+
* ```jsx
|
|
11
|
+
* const props = useComboboxItemCheck({ checked: true });
|
|
12
|
+
* <Role {...props} />
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
export declare const useComboboxItemCheck: import("../utils/types.js").Hook<ComboboxItemCheckOptions<"span">>;
|
|
16
|
+
/**
|
|
17
|
+
* Renders a checkmark inside a
|
|
18
|
+
* [`ComboboxItem`](https://ariakit.org/reference/combobox-item) component. This
|
|
19
|
+
* component must be wrapped with
|
|
20
|
+
* [`ComboboxItem`](https://ariakit.org/reference/combobox-item) or the
|
|
21
|
+
* [`checked`](https://ariakit.org/reference/combobox-item-check#checked) prop
|
|
22
|
+
* must be explicitly passed to the component.
|
|
23
|
+
* @see https://ariakit.org/components/combobox
|
|
24
|
+
* @example
|
|
25
|
+
* ```jsx {5,9}
|
|
26
|
+
* <ComboboxProvider>
|
|
27
|
+
* <Combobox />
|
|
28
|
+
* <ComboboxPopover>
|
|
29
|
+
* <ComboboxItem value="Apple">
|
|
30
|
+
* <ComboboxItemCheck />
|
|
31
|
+
* Apple
|
|
32
|
+
* </ComboboxItem>
|
|
33
|
+
* <ComboboxItem value="Orange">
|
|
34
|
+
* <ComboboxItemCheck />
|
|
35
|
+
* Orange
|
|
36
|
+
* </ComboboxItem>
|
|
37
|
+
* </ComboboxPopover>
|
|
38
|
+
* </ComboboxProvider>
|
|
39
|
+
* ```
|
|
40
|
+
*/
|
|
41
|
+
export declare const ComboboxItemCheck: import("../utils/types.js").Component<ComboboxItemCheckOptions<"span">>;
|
|
42
|
+
export interface ComboboxItemCheckOptions<T extends As = "span"> extends CheckboxCheckOptions<T> {
|
|
43
|
+
/**
|
|
44
|
+
* Object returned by the
|
|
45
|
+
* [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
|
|
46
|
+
* hook. If not provided, the parent
|
|
47
|
+
* [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
|
|
48
|
+
* [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
|
|
49
|
+
* components' context will be used.
|
|
50
|
+
*/
|
|
51
|
+
store?: ComboboxStore;
|
|
52
|
+
/**
|
|
53
|
+
* Whether the check mark should be shown. This value is automatically
|
|
54
|
+
* inferred from the parent
|
|
55
|
+
* [`ComboboxItem`](https://ariakit.org/reference/combobox-item) component.
|
|
56
|
+
* Manually setting this prop will override the inferred value.
|
|
57
|
+
*/
|
|
58
|
+
checked?: boolean;
|
|
59
|
+
}
|
|
60
|
+
export type ComboboxItemCheckProps<T extends As = "span"> = Props<ComboboxItemCheckOptions<T>>;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import type { CheckboxCheckOptions } from "../checkbox/checkbox-check.jsx";
|
|
2
|
+
import type { As, Props } from "../utils/types.js";
|
|
3
|
+
import type { ComboboxStore } from "./combobox-store.js";
|
|
4
|
+
/**
|
|
5
|
+
* Returns props to create a `ComboboxItemCheck` component. This hook must be
|
|
6
|
+
* used in a component that's wrapped with `ComboboxItem` or the `checked` prop
|
|
7
|
+
* must be explicitly passed to the component.
|
|
8
|
+
* @see https://ariakit.org/components/combobox
|
|
9
|
+
* @example
|
|
10
|
+
* ```jsx
|
|
11
|
+
* const props = useComboboxItemCheck({ checked: true });
|
|
12
|
+
* <Role {...props} />
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
export declare const useComboboxItemCheck: import("../utils/types.js").Hook<ComboboxItemCheckOptions<"span">>;
|
|
16
|
+
/**
|
|
17
|
+
* Renders a checkmark inside a
|
|
18
|
+
* [`ComboboxItem`](https://ariakit.org/reference/combobox-item) component. This
|
|
19
|
+
* component must be wrapped with
|
|
20
|
+
* [`ComboboxItem`](https://ariakit.org/reference/combobox-item) or the
|
|
21
|
+
* [`checked`](https://ariakit.org/reference/combobox-item-check#checked) prop
|
|
22
|
+
* must be explicitly passed to the component.
|
|
23
|
+
* @see https://ariakit.org/components/combobox
|
|
24
|
+
* @example
|
|
25
|
+
* ```jsx {5,9}
|
|
26
|
+
* <ComboboxProvider>
|
|
27
|
+
* <Combobox />
|
|
28
|
+
* <ComboboxPopover>
|
|
29
|
+
* <ComboboxItem value="Apple">
|
|
30
|
+
* <ComboboxItemCheck />
|
|
31
|
+
* Apple
|
|
32
|
+
* </ComboboxItem>
|
|
33
|
+
* <ComboboxItem value="Orange">
|
|
34
|
+
* <ComboboxItemCheck />
|
|
35
|
+
* Orange
|
|
36
|
+
* </ComboboxItem>
|
|
37
|
+
* </ComboboxPopover>
|
|
38
|
+
* </ComboboxProvider>
|
|
39
|
+
* ```
|
|
40
|
+
*/
|
|
41
|
+
export declare const ComboboxItemCheck: import("../utils/types.js").Component<ComboboxItemCheckOptions<"span">>;
|
|
42
|
+
export interface ComboboxItemCheckOptions<T extends As = "span"> extends CheckboxCheckOptions<T> {
|
|
43
|
+
/**
|
|
44
|
+
* Object returned by the
|
|
45
|
+
* [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
|
|
46
|
+
* hook. If not provided, the parent
|
|
47
|
+
* [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
|
|
48
|
+
* [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
|
|
49
|
+
* components' context will be used.
|
|
50
|
+
*/
|
|
51
|
+
store?: ComboboxStore;
|
|
52
|
+
/**
|
|
53
|
+
* Whether the check mark should be shown. This value is automatically
|
|
54
|
+
* inferred from the parent
|
|
55
|
+
* [`ComboboxItem`](https://ariakit.org/reference/combobox-item) component.
|
|
56
|
+
* Manually setting this prop will override the inferred value.
|
|
57
|
+
*/
|
|
58
|
+
checked?: boolean;
|
|
59
|
+
}
|
|
60
|
+
export type ComboboxItemCheckProps<T extends As = "span"> = Props<ComboboxItemCheckOptions<T>>;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
|
|
6
6
|
require('../__chunks/UZNYSPKP.cjs');
|
|
7
7
|
require('../__chunks/BZTDJIVT.cjs');
|
|
8
8
|
require('../__chunks/UVBBMANL.cjs');
|
|
@@ -53,9 +53,9 @@ function splitValue(itemValue, userValue) {
|
|
|
53
53
|
var useComboboxItemValue = _RNZNGEL4cjs.createHook.call(void 0,
|
|
54
54
|
(_a) => {
|
|
55
55
|
var _b = _a, { store, value } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store", "value"]);
|
|
56
|
-
const context =
|
|
56
|
+
const context = _3WCBE6SUcjs.useComboboxScopedContext.call(void 0, );
|
|
57
57
|
store = store || context;
|
|
58
|
-
const itemContext = _react.useContext.call(void 0,
|
|
58
|
+
const itemContext = _react.useContext.call(void 0, _3WCBE6SUcjs.ComboboxItemValueContext);
|
|
59
59
|
const itemValue = value != null ? value : itemContext;
|
|
60
60
|
_misc.invariant.call(void 0,
|
|
61
61
|
store,
|