@base-ui/react 1.7.0 → 1.8.0

package/combobox/item-indicator/ComboboxItemIndicatorDataAttributes.d.mts

@@ -1,10 +1,8 @@
-export declare enum ComboboxItemIndicatorDataAttributes {
-  /**
-   * Present when the indicator begins animating in.
-   */
-  startingStyle = "data-starting-style",
-  /**
-   * Present when the indicator is animating out.
-   */
-  endingStyle = "data-ending-style",
-}
+/**
+ * Present when the indicator begins animating in.
+ */
+export declare const startingStyle = "data-starting-style";
+/**
+ * Present when the indicator is animating out.
+ */
+export declare const endingStyle = "data-ending-style";

package/combobox/item-indicator/ComboboxItemIndicatorDataAttributes.d.ts

@@ -1,10 +1,8 @@
-export declare enum ComboboxItemIndicatorDataAttributes {
-  /**
-   * Present when the indicator begins animating in.
-   */
-  startingStyle = "data-starting-style",
-  /**
-   * Present when the indicator is animating out.
-   */
-  endingStyle = "data-ending-style",
-}
+/**
+ * Present when the indicator begins animating in.
+ */
+export declare const startingStyle = "data-starting-style";
+/**
+ * Present when the indicator is animating out.
+ */
+export declare const endingStyle = "data-ending-style";

package/combobox/item-indicator/ComboboxItemIndicatorDataAttributes.js

@@ -3,16 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ComboboxItemIndicatorDataAttributes = void 0;
+exports.startingStyle = exports.endingStyle = void 0;
 var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
-let ComboboxItemIndicatorDataAttributes = exports.ComboboxItemIndicatorDataAttributes = function (ComboboxItemIndicatorDataAttributes) {
-  /**
-   * Present when the indicator begins animating in.
-   */
-  ComboboxItemIndicatorDataAttributes[ComboboxItemIndicatorDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
-  /**
-   * Present when the indicator is animating out.
-   */
-  ComboboxItemIndicatorDataAttributes[ComboboxItemIndicatorDataAttributes["endingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
-  return ComboboxItemIndicatorDataAttributes;
-}({});
+/**
+ * Present when the indicator begins animating in.
+ */
+const startingStyle = exports.startingStyle = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle;
+/**
+ * Present when the indicator is animating out.
+ */
+const endingStyle = exports.endingStyle = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle;

package/combobox/item-indicator/ComboboxItemIndicatorDataAttributes.mjs

@@ -1,12 +1,10 @@
 import { TransitionStatusDataAttributes } from "../../internals/stateAttributesMapping.mjs";
-export let ComboboxItemIndicatorDataAttributes = function (ComboboxItemIndicatorDataAttributes) {
-  /**
-   * Present when the indicator begins animating in.
-   */
-  ComboboxItemIndicatorDataAttributes[ComboboxItemIndicatorDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
-  /**
-   * Present when the indicator is animating out.
-   */
-  ComboboxItemIndicatorDataAttributes[ComboboxItemIndicatorDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
-  return ComboboxItemIndicatorDataAttributes;
-}({});
+
+/**
+ * Present when the indicator begins animating in.
+ */
+export const startingStyle = TransitionStatusDataAttributes.startingStyle;
+/**
+ * Present when the indicator is animating out.
+ */
+export const endingStyle = TransitionStatusDataAttributes.endingStyle;

package/combobox/items/createItems.d.mts

@@ -0,0 +1,53 @@
+import { type ComboboxItemCollection } from "./itemCollection.mjs";
+export type ComboboxPrimitiveValue = string | number | bigint | boolean;
+type RemoveIndexSignature<Type> = { [Key in keyof Type as string extends Key ? never : number extends Key ? never : symbol extends Key ? never : Key]: Type[Key] };
+/** Whether any constituent of `Item` explicitly declares an `items` field that may be an array. */
+type HasGroupShape<Item> = Item extends object ? 'items' extends keyof RemoveIndexSignature<Item> ? [Extract<NonNullable<Item['items']>, ReadonlyArray<unknown>>] extends [never] ? never[] extends NonNullable<Item['items']> ? true : never : true : never : never;
+type IsAny<T> = 0 extends 1 & T ? true : false;
+type GroupShapedItemsError = 'Base UI: items passed to createItems() cannot have an `items` array property because it marks a group. Rename the field or cast the data.';
+type RejectGroupShapedItems<Item> = IsAny<Item> extends true ? unknown : true extends HasGroupShape<Item> ? GroupShapedItemsError : unknown;
+type ComboboxItemsData<Item> = (Extract<Item, {
+  items: ReadonlyArray<unknown>;
+}> extends never ? readonly Item[] : never) | readonly {
+  items: ReadonlyArray<Item>;
+}[];
+export interface CreateComboboxItemsOptions<Item, Value extends ComboboxPrimitiveValue = ComboboxPrimitiveValue> {
+  /**
+   * Projects an item to the primitive value that identifies it, used as the item's
+   * selection value.
+   *
+   * `null` and `undefined` are reserved for no selection, and each item must derive a unique
+   * value. Prefer stable IDs from your application data.
+   */
+  getValue: (item: Item) => Value;
+  /**
+   * Projects an item to the label string that represents it in the input and when matching the
+   * typed query. The root's `itemToStringLabel` prop is the fallback for values whose item is in
+   * neither the data nor the current `filteredItems`.
+   */
+  getLabel: (item: Item) => string;
+}
+/**
+ * Creates a collection for the root's `items` prop. Values and labels are derived on first use.
+ *
+ * Accepts either a flat item array or an array of groups. The `getValue` and `getLabel` accessors
+ * receive items, not groups.
+ *
+ * Items cannot have an `items` array property because they would be interpreted as groups.
+ * Rename that field or cast the data when the runtime values are known not to contain arrays.
+ *
+ * The data must not contain nullish entries: remove them before creating the collection, as for
+ * the root's `items` prop.
+ *
+ * Create static collections at module scope. Wrap dynamic collections in `React.useMemo()` keyed
+ * by their data.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
+ *
+ * @param data The flat or grouped source items, or `undefined` while they are loading.
+ * @param options Functions that derive each source item's selection value and display label.
+ * @returns A collection whose selection value is the `getValue` accessor's return value.
+ */
+export declare function createComboboxItems<Item, Value extends ComboboxPrimitiveValue>(/** @type ComboboxItemsData<Item> | undefined */
+data: (ComboboxItemsData<Item> & RejectGroupShapedItems<Item>) | undefined, options: CreateComboboxItemsOptions<Item, Value>): ComboboxItemCollection<Item, Value>;
+export {};

package/combobox/items/createItems.d.ts

@@ -0,0 +1,53 @@
+import { type ComboboxItemCollection } from "./itemCollection.js";
+export type ComboboxPrimitiveValue = string | number | bigint | boolean;
+type RemoveIndexSignature<Type> = { [Key in keyof Type as string extends Key ? never : number extends Key ? never : symbol extends Key ? never : Key]: Type[Key] };
+/** Whether any constituent of `Item` explicitly declares an `items` field that may be an array. */
+type HasGroupShape<Item> = Item extends object ? 'items' extends keyof RemoveIndexSignature<Item> ? [Extract<NonNullable<Item['items']>, ReadonlyArray<unknown>>] extends [never] ? never[] extends NonNullable<Item['items']> ? true : never : true : never : never;
+type IsAny<T> = 0 extends 1 & T ? true : false;
+type GroupShapedItemsError = 'Base UI: items passed to createItems() cannot have an `items` array property because it marks a group. Rename the field or cast the data.';
+type RejectGroupShapedItems<Item> = IsAny<Item> extends true ? unknown : true extends HasGroupShape<Item> ? GroupShapedItemsError : unknown;
+type ComboboxItemsData<Item> = (Extract<Item, {
+  items: ReadonlyArray<unknown>;
+}> extends never ? readonly Item[] : never) | readonly {
+  items: ReadonlyArray<Item>;
+}[];
+export interface CreateComboboxItemsOptions<Item, Value extends ComboboxPrimitiveValue = ComboboxPrimitiveValue> {
+  /**
+   * Projects an item to the primitive value that identifies it, used as the item's
+   * selection value.
+   *
+   * `null` and `undefined` are reserved for no selection, and each item must derive a unique
+   * value. Prefer stable IDs from your application data.
+   */
+  getValue: (item: Item) => Value;
+  /**
+   * Projects an item to the label string that represents it in the input and when matching the
+   * typed query. The root's `itemToStringLabel` prop is the fallback for values whose item is in
+   * neither the data nor the current `filteredItems`.
+   */
+  getLabel: (item: Item) => string;
+}
+/**
+ * Creates a collection for the root's `items` prop. Values and labels are derived on first use.
+ *
+ * Accepts either a flat item array or an array of groups. The `getValue` and `getLabel` accessors
+ * receive items, not groups.
+ *
+ * Items cannot have an `items` array property because they would be interpreted as groups.
+ * Rename that field or cast the data when the runtime values are known not to contain arrays.
+ *
+ * The data must not contain nullish entries: remove them before creating the collection, as for
+ * the root's `items` prop.
+ *
+ * Create static collections at module scope. Wrap dynamic collections in `React.useMemo()` keyed
+ * by their data.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
+ *
+ * @param data The flat or grouped source items, or `undefined` while they are loading.
+ * @param options Functions that derive each source item's selection value and display label.
+ * @returns A collection whose selection value is the `getValue` accessor's return value.
+ */
+export declare function createComboboxItems<Item, Value extends ComboboxPrimitiveValue>(/** @type ComboboxItemsData<Item> | undefined */
+data: (ComboboxItemsData<Item> & RejectGroupShapedItems<Item>) | undefined, options: CreateComboboxItemsOptions<Item, Value>): ComboboxItemCollection<Item, Value>;
+export {};

package/combobox/items/createItems.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createComboboxItems = createComboboxItems;
+var _empty = require("@base-ui/utils/empty");
+var _error = require("@base-ui/utils/error");
+var _resolveValueLabel = require("../../internals/resolveValueLabel");
+var _itemCollection = require("./itemCollection");
+/** Whether any constituent of `Item` explicitly declares an `items` field that may be an array. */
+
+// The group-shape guard stays outside this union because folding it in breaks tsc's leaf-item
+// inference for grouped data.
+
+/**
+ * Creates a collection for the root's `items` prop. Values and labels are derived on first use.
+ *
+ * Accepts either a flat item array or an array of groups. The `getValue` and `getLabel` accessors
+ * receive items, not groups.
+ *
+ * Items cannot have an `items` array property because they would be interpreted as groups.
+ * Rename that field or cast the data when the runtime values are known not to contain arrays.
+ *
+ * The data must not contain nullish entries: remove them before creating the collection, as for
+ * the root's `items` prop.
+ *
+ * Create static collections at module scope. Wrap dynamic collections in `React.useMemo()` keyed
+ * by their data.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
+ *
+ * @param data The flat or grouped source items, or `undefined` while they are loading.
+ * @param options Functions that derive each source item's selection value and display label.
+ * @returns A collection whose selection value is the `getValue` accessor's return value.
+ */
+function createComboboxItems(/** @type ComboboxItemsData<Item> | undefined */
+data, options) {
+  const {
+    getValue,
+    getLabel
+  } = options;
+  let valueToItem = null;
+
+  // Lazily indexes the collection's own `data`, so the accessors never run at creation.
+  function ensureDerived() {
+    if (valueToItem === null) {
+      const derived = new Map();
+      const leafItems = data ? (0, _resolveValueLabel.flattenLeafItems)(data) : _empty.EMPTY_ARRAY;
+      for (const item of leafItems) {
+        // Skipped defensively: the data is documented as free of nullish entries.
+        if (item == null) {
+          continue;
+        }
+        const derivedValue = getValue(item);
+        // First occurrence wins, so a duplicated derived value resolves to one stable label.
+        if (!derived.has(derivedValue)) {
+          derived.set(derivedValue, item);
+        } else if (process.env.NODE_ENV !== 'production') {
+          (0, _error.error)(`Two items passed to createItems() derived the value ${String(derivedValue)}, so selection and label ` + 'resolution cannot tell them apart: the first item wins the label and every item ' + 'carrying the value renders as selected. Return a unique value from `getValue`.');
+        }
+      }
+      valueToItem = derived;
+    }
+    return valueToItem;
+  }
+
+  // A pure projection with stable identity: the root feeds it to memos and effects, and the
+  // collection never stores items it does not own.
+  function value(item) {
+    if (item == null) {
+      return item;
+    }
+    return getValue(item);
+  }
+  return {
+    // Passed through rather than defaulted: data that has not loaded must stay the absence of
+    // items rather than an empty list that filters everything away.
+    data,
+    value,
+    hasValue(itemValue, isEqual) {
+      return (0, _itemCollection.findCollectionItem)(ensureDerived(), itemValue, isEqual) !== undefined;
+    },
+    itemLabel: getLabel,
+    label(itemValue, isEqual, fallback) {
+      const item = (0, _itemCollection.findCollectionItem)(ensureDerived(), itemValue, isEqual);
+      if (item !== undefined) {
+        return getLabel(item);
+      }
+      return (0, _resolveValueLabel.stringifyAsLabel)(itemValue, fallback);
+    }
+  };
+}

package/combobox/items/createItems.mjs

@@ -0,0 +1,88 @@
+import { EMPTY_ARRAY } from '@base-ui/utils/empty';
+import { error } from '@base-ui/utils/error';
+import { flattenLeafItems, stringifyAsLabel } from "../../internals/resolveValueLabel.mjs";
+import { findCollectionItem } from "./itemCollection.mjs";
+
+/** Whether any constituent of `Item` explicitly declares an `items` field that may be an array. */
+
+// The group-shape guard stays outside this union because folding it in breaks tsc's leaf-item
+// inference for grouped data.
+
+/**
+ * Creates a collection for the root's `items` prop. Values and labels are derived on first use.
+ *
+ * Accepts either a flat item array or an array of groups. The `getValue` and `getLabel` accessors
+ * receive items, not groups.
+ *
+ * Items cannot have an `items` array property because they would be interpreted as groups.
+ * Rename that field or cast the data when the runtime values are known not to contain arrays.
+ *
+ * The data must not contain nullish entries: remove them before creating the collection, as for
+ * the root's `items` prop.
+ *
+ * Create static collections at module scope. Wrap dynamic collections in `React.useMemo()` keyed
+ * by their data.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
+ *
+ * @param data The flat or grouped source items, or `undefined` while they are loading.
+ * @param options Functions that derive each source item's selection value and display label.
+ * @returns A collection whose selection value is the `getValue` accessor's return value.
+ */
+export function createComboboxItems(/** @type ComboboxItemsData<Item> | undefined */
+data, options) {
+  const {
+    getValue,
+    getLabel
+  } = options;
+  let valueToItem = null;
+
+  // Lazily indexes the collection's own `data`, so the accessors never run at creation.
+  function ensureDerived() {
+    if (valueToItem === null) {
+      const derived = new Map();
+      const leafItems = data ? flattenLeafItems(data) : EMPTY_ARRAY;
+      for (const item of leafItems) {
+        // Skipped defensively: the data is documented as free of nullish entries.
+        if (item == null) {
+          continue;
+        }
+        const derivedValue = getValue(item);
+        // First occurrence wins, so a duplicated derived value resolves to one stable label.
+        if (!derived.has(derivedValue)) {
+          derived.set(derivedValue, item);
+        } else if (process.env.NODE_ENV !== 'production') {
+          error(`Two items passed to createItems() derived the value ${String(derivedValue)}, so selection and label ` + 'resolution cannot tell them apart: the first item wins the label and every item ' + 'carrying the value renders as selected. Return a unique value from `getValue`.');
+        }
+      }
+      valueToItem = derived;
+    }
+    return valueToItem;
+  }
+
+  // A pure projection with stable identity: the root feeds it to memos and effects, and the
+  // collection never stores items it does not own.
+  function value(item) {
+    if (item == null) {
+      return item;
+    }
+    return getValue(item);
+  }
+  return {
+    // Passed through rather than defaulted: data that has not loaded must stay the absence of
+    // items rather than an empty list that filters everything away.
+    data,
+    value,
+    hasValue(itemValue, isEqual) {
+      return findCollectionItem(ensureDerived(), itemValue, isEqual) !== undefined;
+    },
+    itemLabel: getLabel,
+    label(itemValue, isEqual, fallback) {
+      const item = findCollectionItem(ensureDerived(), itemValue, isEqual);
+      if (item !== undefined) {
+        return getLabel(item);
+      }
+      return stringifyAsLabel(itemValue, fallback);
+    }
+  };
+}

package/combobox/items/itemCollection.d.mts

@@ -0,0 +1,39 @@
+import type { Group } from "../../internals/resolveValueLabel.mjs";
+import { type ItemEqualityComparer } from "../../internals/itemEquality.mjs";
+export declare function findCollectionItem<Item, Value>(valueToItem: Map<Value, Item>, itemValue: Value, isEqual: ItemEqualityComparer<Value>): Item | undefined;
+/**
+ * An opaque collection created by `createItems()`.
+ *
+ * It carries the source item and derived value types so the root can infer the list item and
+ * selection value types.
+ *
+ * Pass it directly to the root's `items` prop; it has no public members.
+ */
+export declare class ComboboxItemCollection<in out Item, Value = Item> {
+  private constructor();
+  private readonly __itemCollectionBrand;
+}
+/**
+ * Internal shape of a collection. The extra members let the root project items to
+ * their values and resolve a selected value back to its label while items are unmounted.
+ */
+export interface ItemCollection<Item = any, Value = any> {
+  /**
+   * Source items, preserving their flat or grouped structure for collection rendering.
+   * `undefined` when the data has not loaded, which the root reads as no items prop at all.
+   */
+  data: readonly Item[] | readonly Group<Item>[] | undefined;
+  /**
+   * Projects a source item to the value used by selection APIs.
+   */
+  value: (item: Item) => Value;
+  /** Whether a projected value belongs to the collection's own data. */
+  hasValue: (value: Value, isEqual: ItemEqualityComparer<Value>) => boolean;
+  /** Resolves a source item's label while filtering in the source-item domain. */
+  itemLabel: (item: Item) => string;
+  /**
+   * Resolves a selected value's label, including values outside the mounted items.
+   * `fallback` labels the values the collection cannot resolve at all.
+   */
+  label(valueOrItem: Value, isEqual: ItemEqualityComparer<Value>, fallback?: ((valueOrItem: Value) => string) | undefined): string;
+}

package/combobox/items/itemCollection.d.ts

@@ -0,0 +1,39 @@
+import type { Group } from "../../internals/resolveValueLabel.js";
+import { type ItemEqualityComparer } from "../../internals/itemEquality.js";
+export declare function findCollectionItem<Item, Value>(valueToItem: Map<Value, Item>, itemValue: Value, isEqual: ItemEqualityComparer<Value>): Item | undefined;
+/**
+ * An opaque collection created by `createItems()`.
+ *
+ * It carries the source item and derived value types so the root can infer the list item and
+ * selection value types.
+ *
+ * Pass it directly to the root's `items` prop; it has no public members.
+ */
+export declare class ComboboxItemCollection<in out Item, Value = Item> {
+  private constructor();
+  private readonly __itemCollectionBrand;
+}
+/**
+ * Internal shape of a collection. The extra members let the root project items to
+ * their values and resolve a selected value back to its label while items are unmounted.
+ */
+export interface ItemCollection<Item = any, Value = any> {
+  /**
+   * Source items, preserving their flat or grouped structure for collection rendering.
+   * `undefined` when the data has not loaded, which the root reads as no items prop at all.
+   */
+  data: readonly Item[] | readonly Group<Item>[] | undefined;
+  /**
+   * Projects a source item to the value used by selection APIs.
+   */
+  value: (item: Item) => Value;
+  /** Whether a projected value belongs to the collection's own data. */
+  hasValue: (value: Value, isEqual: ItemEqualityComparer<Value>) => boolean;
+  /** Resolves a source item's label while filtering in the source-item domain. */
+  itemLabel: (item: Item) => string;
+  /**
+   * Resolves a selected value's label, including values outside the mounted items.
+   * `fallback` labels the values the collection cannot resolve at all.
+   */
+  label(valueOrItem: Value, isEqual: ItemEqualityComparer<Value>, fallback?: ((valueOrItem: Value) => string) | undefined): string;
+}

package/combobox/items/itemCollection.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findCollectionItem = findCollectionItem;
+var _itemEquality = require("../../internals/itemEquality");
+function findCollectionItem(valueToItem, itemValue, isEqual) {
+  const exactItem = valueToItem.get(itemValue);
+  if (exactItem !== undefined || isEqual === _itemEquality.defaultItemEquality) {
+    return exactItem;
+  }
+  for (const [derivedValue, item] of valueToItem) {
+    if ((0, _itemEquality.compareItemEquality)(derivedValue, itemValue, isEqual)) {
+      return item;
+    }
+  }
+  return undefined;
+}
+
+/**
+ * An opaque collection created by `createItems()`.
+ *
+ * It carries the source item and derived value types so the root can infer the list item and
+ * selection value types.
+ *
+ * Pass it directly to the root's `items` prop; it has no public members.
+ */
+
+/**
+ * Internal shape of a collection. The extra members let the root project items to
+ * their values and resolve a selected value back to its label while items are unmounted.
+ */

package/combobox/items/itemCollection.mjs

@@ -0,0 +1,27 @@
+import { compareItemEquality, defaultItemEquality } from "../../internals/itemEquality.mjs";
+export function findCollectionItem(valueToItem, itemValue, isEqual) {
+  const exactItem = valueToItem.get(itemValue);
+  if (exactItem !== undefined || isEqual === defaultItemEquality) {
+    return exactItem;
+  }
+  for (const [derivedValue, item] of valueToItem) {
+    if (compareItemEquality(derivedValue, itemValue, isEqual)) {
+      return item;
+    }
+  }
+  return undefined;
+}
+
+/**
+ * An opaque collection created by `createItems()`.
+ *
+ * It carries the source item and derived value types so the root can infer the list item and
+ * selection value types.
+ *
+ * Pass it directly to the root's `items` prop; it has no public members.
+ */
+
+/**
+ * Internal shape of a collection. The extra members let the root project items to
+ * their values and resolve a selected value back to its label while items are unmounted.
+ */

package/combobox/label/ComboboxLabel.js

@@ -9,14 +9,12 @@ exports.ComboboxLabel = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _error = require("@base-ui/utils/error");
 var _safeReact = require("@base-ui/utils/safeReact");
-var _store = require("@base-ui/utils/store");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
 var _constants = require("../../internals/field-constants/constants");
 var _useLabel = require("../../internals/labelable-provider/useLabel");
 var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
-var _store2 = require("../store");
 /**
  * An accessible label that is automatically associated with the combobox trigger.
  * Renders a `<div>` element.
@@ -35,10 +33,10 @@ const ComboboxLabel = exports.ComboboxLabel = /*#__PURE__*/React.forwardRef(func
   delete elementPropsWithoutId.id;
   const fieldRootContext = (0, _FieldRootContext.useFieldRootContext)();
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
-  const inputInsidePopup = (0, _store.useStore)(store, _store2.selectors.inputInsidePopup);
-  const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
-  const inputElement = (0, _store.useStore)(store, _store2.selectors.inputElement);
-  const rootId = (0, _store.useStore)(store, _store2.selectors.id);
+  const inputInsidePopup = store.useState('inputInsidePopup');
+  const triggerElement = store.useState('triggerElement');
+  const inputElement = store.useState('inputElement');
+  const rootId = store.useState('id');
   const defaultLabelId = (0, _resolveAriaLabelledBy.getDefaultLabelId)(rootId);
   const localControlId = triggerElement?.id ?? (inputInsidePopup ? rootId : undefined);
   if (process.env.NODE_ENV !== 'production') {

package/combobox/label/ComboboxLabel.mjs

@@ -3,14 +3,12 @@
 import * as React from 'react';
 import { error } from '@base-ui/utils/error';
 import { SafeReact } from '@base-ui/utils/safeReact';
-import { useStore } from '@base-ui/utils/store';
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.mjs";
 import { fieldValidityMapping } from "../../internals/field-constants/constants.mjs";
 import { useLabel } from "../../internals/labelable-provider/useLabel.mjs";
 import { getDefaultLabelId } from "../../utils/resolveAriaLabelledBy.mjs";
 import { useComboboxRootContext } from "../root/ComboboxRootContext.mjs";
-import { selectors } from "../store.mjs";
 
 /**
  * An accessible label that is automatically associated with the combobox trigger.
@@ -30,10 +28,10 @@ export const ComboboxLabel = /*#__PURE__*/React.forwardRef(function ComboboxLabe
   delete elementPropsWithoutId.id;
   const fieldRootContext = useFieldRootContext();
   const store = useComboboxRootContext();
-  const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
-  const triggerElement = useStore(store, selectors.triggerElement);
-  const inputElement = useStore(store, selectors.inputElement);
-  const rootId = useStore(store, selectors.id);
+  const inputInsidePopup = store.useState('inputInsidePopup');
+  const triggerElement = store.useState('triggerElement');
+  const inputElement = store.useState('inputElement');
+  const rootId = store.useState('id');
   const defaultLabelId = getDefaultLabelId(rootId);
   const localControlId = triggerElement?.id ?? (inputInsidePopup ? rootId : undefined);
   if (process.env.NODE_ENV !== 'production') {

package/combobox/list/ComboboxList.js

@@ -7,12 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ComboboxList = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _store = require("@base-ui/utils/store");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _ComboboxPositionerContext = require("../positioner/ComboboxPositionerContext");
-var _store2 = require("../store");
 var _ComboboxCollection2 = require("../collection/ComboboxCollection");
 var _CompositeList = require("../../internals/composite/list/CompositeList");
 var _utils = require("../../floating-ui-react/utils");
@@ -40,11 +38,12 @@ const ComboboxList = exports.ComboboxList = /*#__PURE__*/React.forwardRef(functi
     filteredItems,
     hasItems
   } = (0, _ComboboxRootContext.useComboboxDerivedItemsContext)();
-  const selectionMode = (0, _store.useStore)(store, _store2.selectors.selectionMode);
-  const grid = (0, _store.useStore)(store, _store2.selectors.grid);
-  const listProps = (0, _store.useStore)(store, _store2.selectors.listProps);
-  const virtualized = (0, _store.useStore)(store, _store2.selectors.virtualized);
-  const forceMounted = (0, _store.useStore)(store, _store2.selectors.forceMounted);
+  const selectionMode = store.useState('selectionMode');
+  const grid = store.useState('grid');
+  const readOnly = store.useState('readOnly');
+  const listProps = store.useState('listProps');
+  const virtualized = store.useState('virtualized');
+  const forceMounted = store.useState('forceMounted');
   const multiple = selectionMode === 'multiple';
   const empty = filteredItems.length === 0;
   const setPositionerElement = (0, _useStableCallback.useStableCallback)(element => {
@@ -79,6 +78,9 @@ const ComboboxList = exports.ComboboxList = /*#__PURE__*/React.forwardRef(functi
       id: floatingId,
       role: grid ? 'grid' : 'listbox',
       'aria-multiselectable': multiple ? 'true' : undefined,
+      // On a grid the attribute describes cell editability, not selection, so it's left to the
+      // combobox element in that mode.
+      'aria-readonly': !grid && readOnly ? true : undefined,
       onKeyDown(event) {
         if (store.state.disabled || store.state.readOnly) {
           return;
@@ -94,10 +96,10 @@ const ComboboxList = exports.ComboboxList = /*#__PURE__*/React.forwardRef(functi
         }
       },
       onKeyDownCapture() {
-        store.state.keyboardActiveRef.current = true;
+        store.context.keyboardActiveRef.current = true;
       },
       onPointerMoveCapture() {
-        store.state.keyboardActiveRef.current = false;
+        store.context.keyboardActiveRef.current = false;
       }
     }, elementProps]
   });
@@ -108,9 +110,9 @@ const ComboboxList = exports.ComboboxList = /*#__PURE__*/React.forwardRef(functi
   // With the `items` prop, typeahead labels are derived from the items so they survive the list
   // unmounting (unmounting clears the registered labels). Rendered labels only need to be
   // registered when the list is force-mounted to match browser autofill against rendered text.
-  const labelsRef = hasItems && !forceMounted ? undefined : store.state.labelsRef;
+  const labelsRef = hasItems && !forceMounted ? undefined : store.context.labelsRef;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeList.CompositeList, {
-    elementsRef: store.state.listRef,
+    elementsRef: store.context.listRef,
     labelsRef: labelsRef,
     children: element
   });