@ariakit/react-core 0.3.7 → 0.3.8

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @ariakit/react-core
 
+## 0.3.8
+
+### Multi-selectable Combobox
+
+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).
+
+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.
+
+Check out the [Multi-selectable Combobox](https://ariakit.org/examples/combobox-multiple) example to see it in action.
+
+### New Combobox components
+
+This version introduces new [Combobox](https://ariakit.org/components/combobox) components:
+
+- [`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.
+- [`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.
+
+### Other updates
+
+- Added [`resetValueOnSelect`](https://ariakit.org/reference/combobox-provider#resetvalueonselect) state to [Combobox](https://ariakit.org/components/combobox) components.
+- Added [`selectValueOnClick`](https://ariakit.org/reference/combobox-item#selectvalueonclick) prop to [`ComboboxItem`](https://ariakit.org/reference/combobox-item).
+- 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.
+- Updated dependencies: `@ariakit/core@0.3.7`
+
 ## 0.3.7
 
 ### Expanding Menubar

package/cjs/__chunks/{VEG6PRAG.cjs → 3WCBE6SU.cjs}

@@ -25,6 +25,7 @@ var ComboboxScopedContextProvider = ctx.ScopedContextProvider;
 var ComboboxItemValueContext = _react.createContext.call(void 0, 
   void 0
 );
+var ComboboxItemCheckedContext = _react.createContext.call(void 0, false);
 
 
 
@@ -33,4 +34,5 @@ var ComboboxItemValueContext = _react.createContext.call(void 0,
 
 
 
-exports.useComboboxContext = useComboboxContext; exports.useComboboxScopedContext = useComboboxScopedContext; exports.useComboboxProviderContext = useComboboxProviderContext; exports.ComboboxContextProvider = ComboboxContextProvider; exports.ComboboxScopedContextProvider = ComboboxScopedContextProvider; exports.ComboboxItemValueContext = ComboboxItemValueContext;
+
+exports.useComboboxContext = useComboboxContext; exports.useComboboxScopedContext = useComboboxScopedContext; exports.useComboboxProviderContext = useComboboxProviderContext; exports.ComboboxContextProvider = ComboboxContextProvider; exports.ComboboxScopedContextProvider = ComboboxScopedContextProvider; exports.ComboboxItemValueContext = ComboboxItemValueContext; exports.ComboboxItemCheckedContext = ComboboxItemCheckedContext;

package/cjs/__chunks/{CILQPSH2.cjs → FA25CV2I.cjs}

@@ -1,7 +1,7 @@
 "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";
 
 
-var _VEG6PRAGcjs = require('./VEG6PRAG.cjs');
+var _3WCBE6SUcjs = require('./3WCBE6SU.cjs');
 
 
 var _A5RWZSX7cjs = require('./A5RWZSX7.cjs');
@@ -31,7 +31,7 @@ function useSelectStoreProps(store, update, props) {
   return Object.assign(store, { combobox: props.combobox });
 }
 function useSelectStore(props = {}) {
-  const combobox = _VEG6PRAGcjs.useComboboxProviderContext.call(void 0, );
+  const combobox = _3WCBE6SUcjs.useComboboxProviderContext.call(void 0, );
   props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), {
     combobox: props.combobox !== void 0 ? props.combobox : combobox
   });

package/cjs/__chunks/{AYDXWQBF.cjs → L3WS5HGI.cjs}

@@ -16,7 +16,9 @@ function useComboboxStoreProps(store, update, props) {
   store = _65GJIQK5cjs.usePopoverStoreProps.call(void 0, store, update, props);
   store = _A5RWZSX7cjs.useCompositeStoreProps.call(void 0, store, update, props);
   _OALXXRFMcjs.useStoreProps.call(void 0, store, props, "value", "setValue");
+  _OALXXRFMcjs.useStoreProps.call(void 0, store, props, "selectedValue", "setSelectedValue");
   _OALXXRFMcjs.useStoreProps.call(void 0, store, props, "resetValueOnHide");
+  _OALXXRFMcjs.useStoreProps.call(void 0, store, props, "resetValueOnSelect");
   return store;
 }
 function useComboboxStore(props = {}) {

package/cjs/__chunks/{QU2266CJ.cjs → WH4I6OSN.cjs}

@@ -2,7 +2,7 @@
 
 
 
-var _VEG6PRAGcjs = require('./VEG6PRAG.cjs');
+var _3WCBE6SUcjs = require('./3WCBE6SU.cjs');
 
 
 var _7BSMGTGRcjs = require('./7BSMGTGR.cjs');
@@ -19,6 +19,7 @@ var _RNZNGEL4cjs = require('./RNZNGEL4.cjs');
 
 
 
+
 var _EO6LS72Hcjs = require('./EO6LS72H.cjs');
 
 
@@ -34,7 +35,7 @@ var _jsxruntime = require('react/jsx-runtime');
 var useComboboxList = _RNZNGEL4cjs.createHook.call(void 0, 
   (_a) => {
     var _b = _a, { store, focusable = true, alwaysVisible } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store", "focusable", "alwaysVisible"]);
-    const context = _VEG6PRAGcjs.useComboboxProviderContext.call(void 0, );
+    const context = _3WCBE6SUcjs.useComboboxProviderContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
@@ -84,17 +85,24 @@ var useComboboxList = _RNZNGEL4cjs.createHook.call(void 0,
     });
     props = _EO6LS72Hcjs.useWrapElement.call(void 0, 
       props,
-      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _VEG6PRAGcjs.ComboboxScopedContextProvider, { value: store, children: element }),
+      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3WCBE6SUcjs.ComboboxScopedContextProvider, { value: store, children: element }),
       [store]
     );
     const mounted = store.useState("mounted");
     const hidden = _7BSMGTGRcjs.isHidden.call(void 0, mounted, props.hidden, alwaysVisible);
     const style = hidden ? _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props.style), { display: "none" }) : props.style;
+    const multiSelectable = store.useState(
+      (state) => Array.isArray(state.selectedValue)
+    );
+    const role = _EO6LS72Hcjs.useAttribute.call(void 0, ref, "role", props.role);
+    const isCompositeRole = role === "listbox" || role === "tree" || role === "grid";
+    const ariaMultiSelectable = isCompositeRole ? multiSelectable || void 0 : void 0;
     props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       id,
       hidden,
       role: "listbox",
-      tabIndex: focusable ? -1 : void 0
+      tabIndex: focusable ? -1 : void 0,
+      "aria-multiselectable": ariaMultiSelectable
     }, props), {
       ref: _EO6LS72Hcjs.useMergeRefs.call(void 0, id ? store.setContentElement : null, ref, props.ref),
       style,

package/cjs/__chunks/{LVOI2KVN.cjs → XGKLTARH.cjs}

@@ -7,7 +7,7 @@ var _NGEKJJDHcjs = require('./NGEKJJDH.cjs');
 var _7LBZXSLYcjs = require('./7LBZXSLY.cjs');
 
 
-var _VEG6PRAGcjs = require('./VEG6PRAG.cjs');
+var _3WCBE6SUcjs = require('./3WCBE6SU.cjs');
 
 
 var _A5RWZSX7cjs = require('./A5RWZSX7.cjs');
@@ -42,7 +42,7 @@ function useMenuStoreProps(store, update, props) {
 function useMenuStore(props = {}) {
   const parent = _NGEKJJDHcjs.useMenuContext.call(void 0, );
   const menubar = _7LBZXSLYcjs.useMenubarContext.call(void 0, );
-  const combobox = _VEG6PRAGcjs.useComboboxProviderContext.call(void 0, );
+  const combobox = _3WCBE6SUcjs.useComboboxProviderContext.call(void 0, );
   props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), {
     parent: props.parent !== void 0 ? props.parent : parent,
     menubar: props.menubar !== void 0 ? props.menubar : menubar,

package/cjs/checkbox/checkbox-provider.cjs

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _5GQV7KPQcjs = require('../__chunks/5GQV7KPQ.cjs');
+var _63UPRTFZcjs = require('../__chunks/63UPRTFZ.cjs');
 
 
-var _63UPRTFZcjs = require('../__chunks/63UPRTFZ.cjs');
+var _5GQV7KPQcjs = require('../__chunks/5GQV7KPQ.cjs');
 require('../__chunks/RNZNGEL4.cjs');
 require('../__chunks/OALXXRFM.cjs');
 require('../__chunks/EO6LS72H.cjs');

package/cjs/combobox/combobox-cancel.cjs

@@ -4,7 +4,7 @@
 var _5UTRYT6Ecjs = require('../__chunks/5UTRYT6E.cjs');
 
 
-var _VEG6PRAGcjs = require('../__chunks/VEG6PRAG.cjs');
+var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
 require('../__chunks/DAJUUBUI.cjs');
 require('../__chunks/UZNYSPKP.cjs');
 require('../__chunks/BZTDJIVT.cjs');
@@ -54,7 +54,7 @@ var children = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
 var useComboboxCancel = _RNZNGEL4cjs.createHook.call(void 0, 
   (_a) => {
     var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
-    const context = _VEG6PRAGcjs.useComboboxProviderContext.call(void 0, );
+    const context = _3WCBE6SUcjs.useComboboxProviderContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,

package/cjs/combobox/combobox-context.cjs

@@ -6,7 +6,8 @@
 
 
 
-var _VEG6PRAGcjs = require('../__chunks/VEG6PRAG.cjs');
+
+var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
 require('../__chunks/UZNYSPKP.cjs');
 require('../__chunks/BZTDJIVT.cjs');
 require('../__chunks/UVBBMANL.cjs');
@@ -23,4 +24,5 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.ComboboxContextProvider = _VEG6PRAGcjs.ComboboxContextProvider; exports.ComboboxItemValueContext = _VEG6PRAGcjs.ComboboxItemValueContext; exports.ComboboxScopedContextProvider = _VEG6PRAGcjs.ComboboxScopedContextProvider; exports.useComboboxContext = _VEG6PRAGcjs.useComboboxContext; exports.useComboboxProviderContext = _VEG6PRAGcjs.useComboboxProviderContext; exports.useComboboxScopedContext = _VEG6PRAGcjs.useComboboxScopedContext;
+
+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;

package/cjs/combobox/combobox-context.d.cts

@@ -12,9 +12,10 @@ import type { ComboboxStore } from "./combobox-store.js";
  *   // Use the store...
  * }
  */
-export declare const useComboboxContext: () => ComboboxStore | undefined;
-export declare const useComboboxScopedContext: (onlyScoped?: boolean) => ComboboxStore | undefined;
-export declare const useComboboxProviderContext: () => ComboboxStore | undefined;
-export declare const ComboboxContextProvider: (props: import("react").ProviderProps<ComboboxStore | undefined>) => import("react/jsx-runtime").JSX.Element;
-export declare const ComboboxScopedContextProvider: (props: import("react").ProviderProps<ComboboxStore | undefined>) => import("react/jsx-runtime").JSX.Element;
+export declare const useComboboxContext: () => ComboboxStore<string | string[]> | undefined;
+export declare const useComboboxScopedContext: (onlyScoped?: boolean) => ComboboxStore<string | string[]> | undefined;
+export declare const useComboboxProviderContext: () => ComboboxStore<string | string[]> | undefined;
+export declare const ComboboxContextProvider: (props: import("react").ProviderProps<ComboboxStore<string | string[]> | undefined>) => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxScopedContextProvider: (props: import("react").ProviderProps<ComboboxStore<string | string[]> | undefined>) => import("react/jsx-runtime").JSX.Element;
 export declare const ComboboxItemValueContext: import("react").Context<string | undefined>;
+export declare const ComboboxItemCheckedContext: import("react").Context<boolean>;

package/cjs/combobox/combobox-context.d.ts

@@ -12,9 +12,10 @@ import type { ComboboxStore } from "./combobox-store.js";
  *   // Use the store...
  * }
  */
-export declare const useComboboxContext: () => ComboboxStore | undefined;
-export declare const useComboboxScopedContext: (onlyScoped?: boolean) => ComboboxStore | undefined;
-export declare const useComboboxProviderContext: () => ComboboxStore | undefined;
-export declare const ComboboxContextProvider: (props: import("react").ProviderProps<ComboboxStore | undefined>) => import("react/jsx-runtime").JSX.Element;
-export declare const ComboboxScopedContextProvider: (props: import("react").ProviderProps<ComboboxStore | undefined>) => import("react/jsx-runtime").JSX.Element;
+export declare const useComboboxContext: () => ComboboxStore<string | string[]> | undefined;
+export declare const useComboboxScopedContext: (onlyScoped?: boolean) => ComboboxStore<string | string[]> | undefined;
+export declare const useComboboxProviderContext: () => ComboboxStore<string | string[]> | undefined;
+export declare const ComboboxContextProvider: (props: import("react").ProviderProps<ComboboxStore<string | string[]> | undefined>) => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxScopedContextProvider: (props: import("react").ProviderProps<ComboboxStore<string | string[]> | undefined>) => import("react/jsx-runtime").JSX.Element;
 export declare const ComboboxItemValueContext: import("react").Context<string | undefined>;
+export declare const ComboboxItemCheckedContext: import("react").Context<boolean>;

package/cjs/combobox/combobox-disclosure.cjs

@@ -6,7 +6,7 @@ require('../__chunks/LFHNPG2L.cjs');
 require('../__chunks/5UTRYT6E.cjs');
 
 
-var _VEG6PRAGcjs = require('../__chunks/VEG6PRAG.cjs');
+var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
 require('../__chunks/DAJUUBUI.cjs');
 require('../__chunks/UZNYSPKP.cjs');
 require('../__chunks/BZTDJIVT.cjs');
@@ -53,7 +53,7 @@ var children = /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
 var useComboboxDisclosure = _RNZNGEL4cjs.createHook.call(void 0, 
   (_a) => {
     var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
-    const context = _VEG6PRAGcjs.useComboboxProviderContext.call(void 0, );
+    const context = _3WCBE6SUcjs.useComboboxProviderContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,

package/cjs/combobox/combobox-item-check.cjs

@@ -0,0 +1,50 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _T4KYZJUYcjs = require('../__chunks/T4KYZJUY.cjs');
+require('../__chunks/ERFHNHON.cjs');
+
+
+var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
+require('../__chunks/UZNYSPKP.cjs');
+require('../__chunks/BZTDJIVT.cjs');
+require('../__chunks/UVBBMANL.cjs');
+require('../__chunks/F2A2ZQDB.cjs');
+require('../__chunks/S6UU7NA4.cjs');
+
+
+
+
+var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/EO6LS72H.cjs');
+require('../__chunks/CJDHQUBR.cjs');
+
+
+
+
+var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
+
+// src/combobox/combobox-item-check.ts
+var _react = require('react');
+var useComboboxItemCheck = _RNZNGEL4cjs.createHook.call(void 0, 
+  (_a) => {
+    var _b = _a, { store, checked } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store", "checked"]);
+    const context = _react.useContext.call(void 0, _3WCBE6SUcjs.ComboboxItemCheckedContext);
+    checked = checked != null ? checked : context;
+    props = _T4KYZJUYcjs.useCheckboxCheck.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), { checked }));
+    return props;
+  }
+);
+var ComboboxItemCheck = _RNZNGEL4cjs.createComponent.call(void 0, 
+  (props) => {
+    const htmlProps = useComboboxItemCheck(props);
+    return _RNZNGEL4cjs.createElement.call(void 0, "span", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  ComboboxItemCheck.displayName = "ComboboxItemCheck";
+}
+
+
+
+exports.ComboboxItemCheck = ComboboxItemCheck; exports.useComboboxItemCheck = useComboboxItemCheck;

package/cjs/combobox/combobox-item-check.d.cts

@@ -0,0 +1,60 @@
+import type { CheckboxCheckOptions } from "../checkbox/checkbox-check.jsx";
+import type { As, Props } from "../utils/types.js";
+import type { ComboboxStore } from "./combobox-store.js";
+/**
+ * Returns props to create a `ComboboxItemCheck` component. This hook must be
+ * used in a component that's wrapped with `ComboboxItem` or the `checked` prop
+ * must be explicitly passed to the component.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const props = useComboboxItemCheck({ checked: true });
+ * <Role {...props} />
+ * ```
+ */
+export declare const useComboboxItemCheck: import("../utils/types.js").Hook<ComboboxItemCheckOptions<"span">>;
+/**
+ * Renders a checkmark inside a
+ * [`ComboboxItem`](https://ariakit.org/reference/combobox-item) component. This
+ * component must be wrapped with
+ * [`ComboboxItem`](https://ariakit.org/reference/combobox-item) or the
+ * [`checked`](https://ariakit.org/reference/combobox-item-check#checked) prop
+ * must be explicitly passed to the component.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx {5,9}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple">
+ *       <ComboboxItemCheck />
+ *       Apple
+ *     </ComboboxItem>
+ *     <ComboboxItem value="Orange">
+ *       <ComboboxItemCheck />
+ *       Orange
+ *     </ComboboxItem>
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+export declare const ComboboxItemCheck: import("../utils/types.js").Component<ComboboxItemCheckOptions<"span">>;
+export interface ComboboxItemCheckOptions<T extends As = "span"> extends CheckboxCheckOptions<T> {
+    /**
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the parent
+     * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
+     * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components' context will be used.
+     */
+    store?: ComboboxStore;
+    /**
+     * Whether the check mark should be shown. This value is automatically
+     * inferred from the parent
+     * [`ComboboxItem`](https://ariakit.org/reference/combobox-item) component.
+     * Manually setting this prop will override the inferred value.
+     */
+    checked?: boolean;
+}
+export type ComboboxItemCheckProps<T extends As = "span"> = Props<ComboboxItemCheckOptions<T>>;

package/cjs/combobox/combobox-item-check.d.ts

@@ -0,0 +1,60 @@
+import type { CheckboxCheckOptions } from "../checkbox/checkbox-check.jsx";
+import type { As, Props } from "../utils/types.js";
+import type { ComboboxStore } from "./combobox-store.js";
+/**
+ * Returns props to create a `ComboboxItemCheck` component. This hook must be
+ * used in a component that's wrapped with `ComboboxItem` or the `checked` prop
+ * must be explicitly passed to the component.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const props = useComboboxItemCheck({ checked: true });
+ * <Role {...props} />
+ * ```
+ */
+export declare const useComboboxItemCheck: import("../utils/types.js").Hook<ComboboxItemCheckOptions<"span">>;
+/**
+ * Renders a checkmark inside a
+ * [`ComboboxItem`](https://ariakit.org/reference/combobox-item) component. This
+ * component must be wrapped with
+ * [`ComboboxItem`](https://ariakit.org/reference/combobox-item) or the
+ * [`checked`](https://ariakit.org/reference/combobox-item-check#checked) prop
+ * must be explicitly passed to the component.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx {5,9}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple">
+ *       <ComboboxItemCheck />
+ *       Apple
+ *     </ComboboxItem>
+ *     <ComboboxItem value="Orange">
+ *       <ComboboxItemCheck />
+ *       Orange
+ *     </ComboboxItem>
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+export declare const ComboboxItemCheck: import("../utils/types.js").Component<ComboboxItemCheckOptions<"span">>;
+export interface ComboboxItemCheckOptions<T extends As = "span"> extends CheckboxCheckOptions<T> {
+    /**
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the parent
+     * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
+     * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components' context will be used.
+     */
+    store?: ComboboxStore;
+    /**
+     * Whether the check mark should be shown. This value is automatically
+     * inferred from the parent
+     * [`ComboboxItem`](https://ariakit.org/reference/combobox-item) component.
+     * Manually setting this prop will override the inferred value.
+     */
+    checked?: boolean;
+}
+export type ComboboxItemCheckProps<T extends As = "span"> = Props<ComboboxItemCheckOptions<T>>;

package/cjs/combobox/combobox-item-value.cjs

@@ -2,7 +2,7 @@
 
 
 
-var _VEG6PRAGcjs = require('../__chunks/VEG6PRAG.cjs');
+var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
 require('../__chunks/UZNYSPKP.cjs');
 require('../__chunks/BZTDJIVT.cjs');
 require('../__chunks/UVBBMANL.cjs');
@@ -53,9 +53,9 @@ function splitValue(itemValue, userValue) {
 var useComboboxItemValue = _RNZNGEL4cjs.createHook.call(void 0, 
   (_a) => {
     var _b = _a, { store, value } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store", "value"]);
-    const context = _VEG6PRAGcjs.useComboboxScopedContext.call(void 0, );
+    const context = _3WCBE6SUcjs.useComboboxScopedContext.call(void 0, );
     store = store || context;
-    const itemContext = _react.useContext.call(void 0, _VEG6PRAGcjs.ComboboxItemValueContext);
+    const itemContext = _react.useContext.call(void 0, _3WCBE6SUcjs.ComboboxItemValueContext);
     const itemValue = value != null ? value : itemContext;
     _misc.invariant.call(void 0, 
       store,

package/cjs/combobox/combobox-item.cjs

@@ -5,7 +5,8 @@ var _IPYAEPOTcjs = require('../__chunks/IPYAEPOT.cjs');
 
 
 
-var _VEG6PRAGcjs = require('../__chunks/VEG6PRAG.cjs');
+
+var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
 
 
 var _P43G7USHcjs = require('../__chunks/P43G7USH.cjs');
@@ -44,13 +45,24 @@ var _events = require('@ariakit/core/utils/events');
 var _focus = require('@ariakit/core/utils/focus');
 var _misc = require('@ariakit/core/utils/misc');
 var _jsxruntime = require('react/jsx-runtime');
+function isSelected(storeValue, itemValue) {
+  if (itemValue == null)
+    return;
+  if (storeValue == null)
+    return false;
+  if (Array.isArray(storeValue)) {
+    return storeValue.includes(itemValue);
+  }
+  return storeValue === itemValue;
+}
 var useComboboxItem = _RNZNGEL4cjs.createHook.call(void 0, 
   (_a) => {
     var _b = _a, {
       store,
       value,
-      hideOnClick = value != null,
-      setValueOnClick = true,
+      hideOnClick,
+      selectValueOnClick = true,
+      setValueOnClick,
       focusOnHover = false,
       moveOnKeyPress = true,
       getItem: getItemProp
@@ -58,12 +70,13 @@ var useComboboxItem = _RNZNGEL4cjs.createHook.call(void 0,
       "store",
       "value",
       "hideOnClick",
+      "selectValueOnClick",
       "setValueOnClick",
       "focusOnHover",
       "moveOnKeyPress",
       "getItem"
     ]);
-    const context = _VEG6PRAGcjs.useComboboxScopedContext.call(void 0, );
+    const context = _3WCBE6SUcjs.useComboboxScopedContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
@@ -79,8 +92,14 @@ var useComboboxItem = _RNZNGEL4cjs.createHook.call(void 0,
       },
       [value, getItemProp]
     );
+    const multiSelectable = store.useState(
+      (state) => Array.isArray(state.selectedValue)
+    );
+    setValueOnClick = setValueOnClick != null ? setValueOnClick : !multiSelectable;
+    hideOnClick = hideOnClick != null ? hideOnClick : value != null && !multiSelectable;
     const onClickProp = props.onClick;
     const setValueOnClickProp = _EO6LS72Hcjs.useBooleanEvent.call(void 0, setValueOnClick);
+    const selectValueOnClickProp = _EO6LS72Hcjs.useBooleanEvent.call(void 0, selectValueOnClick);
     const hideOnClickProp = _EO6LS72Hcjs.useBooleanEvent.call(void 0, hideOnClick);
     const onClick = _EO6LS72Hcjs.useEvent.call(void 0, (event) => {
       onClickProp == null ? void 0 : onClickProp(event);
@@ -90,8 +109,20 @@ var useComboboxItem = _RNZNGEL4cjs.createHook.call(void 0,
         return;
       if (_events.isOpeningInNewTab.call(void 0, event))
         return;
-      if (value != null && setValueOnClickProp(event)) {
-        store == null ? void 0 : store.setValue(value);
+      if (value != null) {
+        if (selectValueOnClickProp(event)) {
+          store == null ? void 0 : store.setSelectedValue((prevValue) => {
+            if (!Array.isArray(prevValue))
+              return value;
+            if (prevValue.includes(value)) {
+              return prevValue.filter((v) => v !== value);
+            }
+            return [...prevValue, value];
+          });
+        }
+        if (setValueOnClickProp(event)) {
+          store == null ? void 0 : store.setValue(value);
+        }
       }
       if (hideOnClickProp(event)) {
         store == null ? void 0 : store.move(null);
@@ -116,10 +147,16 @@ var useComboboxItem = _RNZNGEL4cjs.createHook.call(void 0,
         }
       }
     });
+    const selected = store.useState(
+      (state) => isSelected(state.selectedValue, value)
+    );
+    if (multiSelectable && selected != null) {
+      props["aria-selected"] = selected;
+    }
     props = _EO6LS72Hcjs.useWrapElement.call(void 0, 
       props,
-      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _VEG6PRAGcjs.ComboboxItemValueContext.Provider, { value, children: element }),
-      [value]
+      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3WCBE6SUcjs.ComboboxItemValueContext.Provider, { value, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3WCBE6SUcjs.ComboboxItemCheckedContext.Provider, { value: selected != null ? selected : false, children: element }) }),
+      [value, selected]
     );
     const contentElement = store.useState("contentElement");
     props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {

package/cjs/combobox/combobox-item.d.cts

@@ -52,15 +52,15 @@ export interface ComboboxItemOptions<T extends As = "div"> extends CompositeItem
     store?: ComboboxStore;
     /**
      * The value of the item. This will be rendered as the children by default.
-     *   - If
-     *     [`setValueOnClick`](https://ariakit.org/reference/combobox-item#setvalueonclick)
-     *     is set to `true`, this will be the value of the combobox input when the
-     *     user clicks on this item.
-     *   - If the
-     *     [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete)
-     *     prop on the [`Combobox`](https://ariakit.org/reference/combobox)
-     *     component is set to `both` or `inline`, this will be the value of the
-     *     combobox input when the combobox loses focus.
+     * - If
+     *   [`setValueOnClick`](https://ariakit.org/reference/combobox-item#setvalueonclick)
+     *   is set to `true`, this will be the value of the combobox input when the
+     *   user clicks on this item.
+     * - If the
+     *   [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete)
+     *   prop on the [`Combobox`](https://ariakit.org/reference/combobox)
+     *   component is set to `both` or `inline`, this will be the value of the
+     *   combobox input when the combobox loses focus.
      *
      * Live examples:
      * - [Animated Combobox](https://ariakit.org/examples/combobox-animated)
@@ -73,18 +73,36 @@ export interface ComboboxItemOptions<T extends As = "div"> extends CompositeItem
      */
     value?: string;
     /**
-     * Whether to hide the combobox when this item is clicked.
+     * Whether to hide the combobox when this item is clicked. By default, the
+     * combobox will be hidden when the user clicks on an item with a
+     * [`value`](https://ariakit.org/reference/combobox-item#value) prop, unless
+     * the combobox is
+     * [multi-selectable](https://ariakit.org/examples/combobox-multiple).
      *
      * Live examples:
      * - [Combobox with links](https://ariakit.org/examples/combobox-links)
-     * @default true
      */
     hideOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
     /**
-     * Whether to set the combobox value with this item's value when this item is
-     * clicked.
+     * Whether to set the
+     * [`selectedValue`](https://ariakit.org/reference/combobox-provider#selectedvalue)
+     * state using this item's
+     * [`value`](https://ariakit.org/reference/combobox-item#value) when the item
+     * is clicked.
      * @default true
      */
+    selectValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+    /**
+     * Whether to set the combobox
+     * [`value`](https://ariakit.org/reference/combobox-provider#value) state
+     * using this item's
+     * [`value`](https://ariakit.org/reference/combobox-item#value) when the item
+     * is clicked. The default is `true`, unless the combobox is
+     * [multi-selectable](https://ariakit.org/examples/combobox-multiple).
+     *
+     * Live examples:
+     * - [Menu with Combobox](https://ariakit.org/examples/menu-combobox)
+     */
     setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
     /**
      * @default false