@base-ui/react 1.7.0 → 1.8.0

package/combobox/input/ComboboxInput.js

@@ -7,14 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ComboboxInput = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _store = require("@base-ui/utils/store");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _platform = require("@base-ui/utils/platform");
 var _useBaseUiId = require("../../internals/useBaseUiId");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
-var _store2 = require("../store");
 var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
 var _constants = require("../../internals/field-constants/constants");
 var _LabelableContext = require("../../internals/labelable-provider/LabelableContext");
@@ -61,21 +59,21 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
   // https://github.com/mui/base-ui/issues/2703
   const inputValue = (0, _ComboboxRootContext.useComboboxInputValueContext)();
   const direction = (0, _DirectionContext.useDirection)();
-  const required = (0, _store.useStore)(store, _store2.selectors.required);
-  const comboboxDisabled = (0, _store.useStore)(store, _store2.selectors.disabled);
-  const readOnly = (0, _store.useStore)(store, _store2.selectors.readOnly);
-  const name = (0, _store.useStore)(store, _store2.selectors.name);
-  const form = (0, _store.useStore)(store, _store2.selectors.form);
-  const selectionMode = (0, _store.useStore)(store, _store2.selectors.selectionMode);
-  const autoHighlightMode = (0, _store.useStore)(store, _store2.selectors.autoHighlight);
-  const inputProps = (0, _store.useStore)(store, _store2.selectors.inputProps);
-  const triggerProps = (0, _store.useStore)(store, _store2.selectors.triggerProps);
-  const open = (0, _store.useStore)(store, _store2.selectors.open);
-  const mounted = (0, _store.useStore)(store, _store2.selectors.mounted);
-  const selectedValue = (0, _store.useStore)(store, _store2.selectors.selectedValue);
-  const rootId = (0, _store.useStore)(store, _store2.selectors.id);
-  const inline = (0, _store.useStore)(store, _store2.selectors.inline);
-  const modal = (0, _store.useStore)(store, _store2.selectors.modal);
+  const required = store.useState('required');
+  const comboboxDisabled = store.useState('disabled');
+  const readOnly = store.useState('readOnly');
+  const name = store.useState('name');
+  const form = store.useState('form');
+  const selectionMode = store.useState('selectionMode');
+  const autoHighlightMode = store.useState('autoHighlight');
+  const inputProps = store.useState('inputProps');
+  const triggerProps = store.useState('triggerProps');
+  const open = store.useState('open');
+  const mounted = store.useState('mounted');
+  const selectedValue = store.useState('selectedValue');
+  const rootId = store.useState('id');
+  const inline = store.useState('inline');
+  const modal = store.useState('modal');
   const autoHighlightEnabled = Boolean(autoHighlightMode);
   const popupSide = (0, _parts.usePopupSide)(store);
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
@@ -92,7 +90,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
   const setInputElement = (0, _useStableCallback.useStableCallback)(element => {
     const nextIsInsidePopup = hasPositionerParent || store.state.inline;
     if (nextIsInsidePopup && !store.state.hasInputValue) {
-      store.state.setInputValue('', (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none));
+      store.context.setInputValue('', (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none));
     }
     store.update({
       inputElement: element,
@@ -102,14 +100,14 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
   });
   const validationProps = hasPositionerParent ? elementProps : validation.getValidationProps(disabled, elementProps);
   function clearHighlight() {
-    store.state.setIndices({
+    store.context.setIndices({
       activeIndex: null,
       selectedIndex: null,
-      type: store.state.keyboardActiveRef.current ? _reasons.REASONS.keyboard : _reasons.REASONS.pointer
+      type: store.context.keyboardActiveRef.current ? _reasons.REASONS.keyboard : _reasons.REASONS.pointer
     });
   }
   function markPointerActive() {
-    store.state.keyboardActiveRef.current = false;
+    store.context.keyboardActiveRef.current = false;
   }
   const state = {
     ...fieldStateForInput,
@@ -162,7 +160,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
   }
   const element = (0, _useRenderElement.useRenderElement)('input', componentProps, {
     state,
-    ref: [forwardedRef, store.state.inputRef, setInputElement],
+    ref: [forwardedRef, store.context.inputRef, setInputElement],
     props: [inputProps, triggerProps, {
       value: composingValue ?? inputValue,
       'aria-readonly': readOnly || undefined,
@@ -185,10 +183,10 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
         const nextActiveIndex = lastActiveIndexRef.current;
         if (nextActiveIndex == null ||
         // `valuesRef` can be sparse, so guard against restoring a removed slot.
-        !Object.hasOwn(store.state.valuesRef.current, nextActiveIndex)) {
+        !Object.hasOwn(store.context.valuesRef.current, nextActiveIndex)) {
           return;
         }
-        store.state.setIndices({
+        store.context.setIndices({
           activeIndex: nextActiveIndex
         });
       },
@@ -199,7 +197,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
         if (inline && activeIndex !== null && autoHighlightMode !== 'always') {
           lastActiveIndexRef.current = activeIndex;
           shouldRestoreActiveIndexRef.current = true;
-          store.state.setIndices({
+          store.context.setIndices({
             activeIndex: null
           });
         }
@@ -219,7 +217,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
         isComposingRef.current = false;
         const next = event.currentTarget.value;
         setComposingValue(null);
-        store.state.setInputValue(next, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
+        store.context.setInputValue(next, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
       },
       onChange(event) {
         const nativeEvent = event.nativeEvent;
@@ -233,7 +231,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
           if (readOnly || disabled || !trimmed || !shouldOpenOnInput) {
             return;
           }
-          store.state.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, nativeEvent));
+          store.context.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, nativeEvent));
           // When autoHighlight is enabled, keep the highlight (will be set to 0 in root).
           if (!autoHighlightEnabled) {
             clearHighlight();
@@ -250,7 +248,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
           const nextVal = event.currentTarget.value;
           setComposingValue(nextVal);
           if (nextVal === '' && !store.state.openOnInputClick && !store.state.inputInsidePopup) {
-            store.state.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputClear, nativeEvent));
+            store.context.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputClear, nativeEvent));
           }
           const trimmed = nextVal.trim();
           const shouldMaintainHighlight = autoHighlightEnabled && trimmed !== '';
@@ -261,7 +259,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
           return;
         }
         const inputChangeDetails = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, nativeEvent);
-        store.state.setInputValue(event.currentTarget.value, inputChangeDetails);
+        store.context.setInputValue(event.currentTarget.value, inputChangeDetails);
         if (inputChangeDetails.isCanceled) {
           return;
         }
@@ -269,10 +267,10 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
         const clearDetails = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputClear, nativeEvent);
         if (empty && !store.state.inputInsidePopup) {
           if (selectionMode === 'single') {
-            store.state.setSelectedValue(null, clearDetails);
+            store.context.setSelectedValue(null, clearDetails);
           }
           if (!store.state.openOnInputClick) {
-            store.state.setOpen(false, clearDetails);
+            store.context.setOpen(false, clearDetails);
           }
         }
         maybeOpenOnInput(event.currentTarget.value.trim());
@@ -285,13 +283,19 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
         }
       },
       onKeyDown(event) {
-        if (disabled || readOnly) {
+        if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
           return;
         }
-        if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
+
+        // Tracked before the guards so `readOnly` browsing reports keyboard highlight reasons.
+        store.context.keyboardActiveRef.current = true;
+        if (disabled || readOnly) {
+          // Browsing can highlight an item, and Enter there must not submit the form.
+          if (readOnly && event.key === 'Enter' && open && store.state.activeIndex !== null) {
+            (0, _utils.stopEvent)(event);
+          }
           return;
         }
-        store.state.keyboardActiveRef.current = true;
         const input = event.currentTarget;
         const scrollAmount = input.scrollWidth - input.clientWidth;
         const isRTL = direction === 'rtl';
@@ -313,8 +317,8 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
           const isClear = selectionMode === 'multiple' && Array.isArray(selectedValue) ? selectedValue.length === 0 : selectedValue === null;
           const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.escapeKey, event.nativeEvent);
           const value = selectionMode === 'multiple' ? [] : null;
-          store.state.setInputValue('', details);
-          store.state.setSelectedValue(value, details);
+          store.context.setInputValue('', details);
+          store.context.setSelectedValue(value, details);
           if (!isClear && !store.state.inline && !details.isPropagationAllowed) {
             event.stopPropagation();
           }
@@ -328,7 +332,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
           const newValue = selectedValue.filter((_, index) => index !== removalIndex);
           // If the removed item was also the active (highlighted) item, clear highlight
           clearHighlight();
-          store.state.setSelectedValue(newValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent));
+          store.context.setSelectedValue(newValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent));
           return;
         }
         const hadHighlightedChip = comboboxChipsContext?.highlightedChipIndex !== undefined;
@@ -337,7 +341,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
         if (nextIndex !== undefined) {
           comboboxChipsContext?.chipsRef.current[nextIndex]?.focus();
         } else if (hadHighlightedChip) {
-          store.state.inputRef.current?.focus();
+          store.context.inputRef.current?.focus();
         }
 
         // event.isComposing
@@ -353,7 +357,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
             }
 
             // Allow form submission when no item is highlighted.
-            store.state.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, nativeEvent));
+            store.context.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, nativeEvent));
             return;
           }
           (0, _utils.stopEvent)(event);
@@ -371,7 +375,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
   }) : element;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [open && focusManagerModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxInternalDismissButton.ComboboxInternalDismissButton, {
-      ref: store.state.startDismissRef
+      ref: store.context.startDismissRef
     }), renderedInput]
   });
 });

package/combobox/input/ComboboxInput.mjs

@@ -1,14 +1,12 @@
 'use client';
 
 import * as React from 'react';
-import { useStore } from '@base-ui/utils/store';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { platform } from '@base-ui/utils/platform';
 import { useBaseUiId } from "../../internals/useBaseUiId.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useComboboxInputValueContext, useComboboxRootContext } from "../root/ComboboxRootContext.mjs";
 import { triggerStateAttributesMapping } from "../utils/stateAttributesMapping.mjs";
-import { selectors } from "../store.mjs";
 import { DEFAULT_FIELD_ROOT_CONTEXT, FieldRootContext, useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.mjs";
 import { DEFAULT_FIELD_STATE_ATTRIBUTES } from "../../internals/field-constants/constants.mjs";
 import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.mjs";
@@ -56,21 +54,21 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
   // https://github.com/mui/base-ui/issues/2703
   const inputValue = useComboboxInputValueContext();
   const direction = useDirection();
-  const required = useStore(store, selectors.required);
-  const comboboxDisabled = useStore(store, selectors.disabled);
-  const readOnly = useStore(store, selectors.readOnly);
-  const name = useStore(store, selectors.name);
-  const form = useStore(store, selectors.form);
-  const selectionMode = useStore(store, selectors.selectionMode);
-  const autoHighlightMode = useStore(store, selectors.autoHighlight);
-  const inputProps = useStore(store, selectors.inputProps);
-  const triggerProps = useStore(store, selectors.triggerProps);
-  const open = useStore(store, selectors.open);
-  const mounted = useStore(store, selectors.mounted);
-  const selectedValue = useStore(store, selectors.selectedValue);
-  const rootId = useStore(store, selectors.id);
-  const inline = useStore(store, selectors.inline);
-  const modal = useStore(store, selectors.modal);
+  const required = store.useState('required');
+  const comboboxDisabled = store.useState('disabled');
+  const readOnly = store.useState('readOnly');
+  const name = store.useState('name');
+  const form = store.useState('form');
+  const selectionMode = store.useState('selectionMode');
+  const autoHighlightMode = store.useState('autoHighlight');
+  const inputProps = store.useState('inputProps');
+  const triggerProps = store.useState('triggerProps');
+  const open = store.useState('open');
+  const mounted = store.useState('mounted');
+  const selectedValue = store.useState('selectedValue');
+  const rootId = store.useState('id');
+  const inline = store.useState('inline');
+  const modal = store.useState('modal');
   const autoHighlightEnabled = Boolean(autoHighlightMode);
   const popupSide = usePopupSide(store);
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
@@ -87,7 +85,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
   const setInputElement = useStableCallback(element => {
     const nextIsInsidePopup = hasPositionerParent || store.state.inline;
     if (nextIsInsidePopup && !store.state.hasInputValue) {
-      store.state.setInputValue('', createChangeEventDetails(REASONS.none));
+      store.context.setInputValue('', createChangeEventDetails(REASONS.none));
     }
     store.update({
       inputElement: element,
@@ -97,14 +95,14 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
   });
   const validationProps = hasPositionerParent ? elementProps : validation.getValidationProps(disabled, elementProps);
   function clearHighlight() {
-    store.state.setIndices({
+    store.context.setIndices({
       activeIndex: null,
       selectedIndex: null,
-      type: store.state.keyboardActiveRef.current ? REASONS.keyboard : REASONS.pointer
+      type: store.context.keyboardActiveRef.current ? REASONS.keyboard : REASONS.pointer
     });
   }
   function markPointerActive() {
-    store.state.keyboardActiveRef.current = false;
+    store.context.keyboardActiveRef.current = false;
   }
   const state = {
     ...fieldStateForInput,
@@ -157,7 +155,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
   }
   const element = useRenderElement('input', componentProps, {
     state,
-    ref: [forwardedRef, store.state.inputRef, setInputElement],
+    ref: [forwardedRef, store.context.inputRef, setInputElement],
     props: [inputProps, triggerProps, {
       value: composingValue ?? inputValue,
       'aria-readonly': readOnly || undefined,
@@ -180,10 +178,10 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
         const nextActiveIndex = lastActiveIndexRef.current;
         if (nextActiveIndex == null ||
         // `valuesRef` can be sparse, so guard against restoring a removed slot.
-        !Object.hasOwn(store.state.valuesRef.current, nextActiveIndex)) {
+        !Object.hasOwn(store.context.valuesRef.current, nextActiveIndex)) {
           return;
         }
-        store.state.setIndices({
+        store.context.setIndices({
           activeIndex: nextActiveIndex
         });
       },
@@ -194,7 +192,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
         if (inline && activeIndex !== null && autoHighlightMode !== 'always') {
           lastActiveIndexRef.current = activeIndex;
           shouldRestoreActiveIndexRef.current = true;
-          store.state.setIndices({
+          store.context.setIndices({
             activeIndex: null
           });
         }
@@ -214,7 +212,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
         isComposingRef.current = false;
         const next = event.currentTarget.value;
         setComposingValue(null);
-        store.state.setInputValue(next, createChangeEventDetails(REASONS.inputChange, event.nativeEvent));
+        store.context.setInputValue(next, createChangeEventDetails(REASONS.inputChange, event.nativeEvent));
       },
       onChange(event) {
         const nativeEvent = event.nativeEvent;
@@ -228,7 +226,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
           if (readOnly || disabled || !trimmed || !shouldOpenOnInput) {
             return;
           }
-          store.state.setOpen(true, createChangeEventDetails(REASONS.inputChange, nativeEvent));
+          store.context.setOpen(true, createChangeEventDetails(REASONS.inputChange, nativeEvent));
           // When autoHighlight is enabled, keep the highlight (will be set to 0 in root).
           if (!autoHighlightEnabled) {
             clearHighlight();
@@ -245,7 +243,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
           const nextVal = event.currentTarget.value;
           setComposingValue(nextVal);
           if (nextVal === '' && !store.state.openOnInputClick && !store.state.inputInsidePopup) {
-            store.state.setOpen(false, createChangeEventDetails(REASONS.inputClear, nativeEvent));
+            store.context.setOpen(false, createChangeEventDetails(REASONS.inputClear, nativeEvent));
           }
           const trimmed = nextVal.trim();
           const shouldMaintainHighlight = autoHighlightEnabled && trimmed !== '';
@@ -256,7 +254,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
           return;
         }
         const inputChangeDetails = createChangeEventDetails(REASONS.inputChange, nativeEvent);
-        store.state.setInputValue(event.currentTarget.value, inputChangeDetails);
+        store.context.setInputValue(event.currentTarget.value, inputChangeDetails);
         if (inputChangeDetails.isCanceled) {
           return;
         }
@@ -264,10 +262,10 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
         const clearDetails = createChangeEventDetails(REASONS.inputClear, nativeEvent);
         if (empty && !store.state.inputInsidePopup) {
           if (selectionMode === 'single') {
-            store.state.setSelectedValue(null, clearDetails);
+            store.context.setSelectedValue(null, clearDetails);
           }
           if (!store.state.openOnInputClick) {
-            store.state.setOpen(false, clearDetails);
+            store.context.setOpen(false, clearDetails);
           }
         }
         maybeOpenOnInput(event.currentTarget.value.trim());
@@ -280,13 +278,19 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
         }
       },
       onKeyDown(event) {
-        if (disabled || readOnly) {
+        if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
           return;
         }
-        if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
+
+        // Tracked before the guards so `readOnly` browsing reports keyboard highlight reasons.
+        store.context.keyboardActiveRef.current = true;
+        if (disabled || readOnly) {
+          // Browsing can highlight an item, and Enter there must not submit the form.
+          if (readOnly && event.key === 'Enter' && open && store.state.activeIndex !== null) {
+            stopEvent(event);
+          }
           return;
         }
-        store.state.keyboardActiveRef.current = true;
         const input = event.currentTarget;
         const scrollAmount = input.scrollWidth - input.clientWidth;
         const isRTL = direction === 'rtl';
@@ -308,8 +312,8 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
           const isClear = selectionMode === 'multiple' && Array.isArray(selectedValue) ? selectedValue.length === 0 : selectedValue === null;
           const details = createChangeEventDetails(REASONS.escapeKey, event.nativeEvent);
           const value = selectionMode === 'multiple' ? [] : null;
-          store.state.setInputValue('', details);
-          store.state.setSelectedValue(value, details);
+          store.context.setInputValue('', details);
+          store.context.setSelectedValue(value, details);
           if (!isClear && !store.state.inline && !details.isPropagationAllowed) {
             event.stopPropagation();
           }
@@ -323,7 +327,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
           const newValue = selectedValue.filter((_, index) => index !== removalIndex);
           // If the removed item was also the active (highlighted) item, clear highlight
           clearHighlight();
-          store.state.setSelectedValue(newValue, createChangeEventDetails(REASONS.none, event.nativeEvent));
+          store.context.setSelectedValue(newValue, createChangeEventDetails(REASONS.none, event.nativeEvent));
           return;
         }
         const hadHighlightedChip = comboboxChipsContext?.highlightedChipIndex !== undefined;
@@ -332,7 +336,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
         if (nextIndex !== undefined) {
           comboboxChipsContext?.chipsRef.current[nextIndex]?.focus();
         } else if (hadHighlightedChip) {
-          store.state.inputRef.current?.focus();
+          store.context.inputRef.current?.focus();
         }
 
         // event.isComposing
@@ -348,7 +352,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
             }
 
             // Allow form submission when no item is highlighted.
-            store.state.setOpen(false, createChangeEventDetails(REASONS.none, nativeEvent));
+            store.context.setOpen(false, createChangeEventDetails(REASONS.none, nativeEvent));
             return;
           }
           stopEvent(event);
@@ -366,7 +370,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
   }) : element;
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [open && focusManagerModal && /*#__PURE__*/_jsx(ComboboxInternalDismissButton, {
-      ref: store.state.startDismissRef
+      ref: store.context.startDismissRef
     }), renderedInput]
   });
 });

package/combobox/input/ComboboxInputDataAttributes.d.mts

@@ -1,55 +1,53 @@
-export declare enum ComboboxInputDataAttributes {
-  /**
-   * Present when the corresponding popup is open.
-   */
-  popupOpen = "data-popup-open",
-  /**
-   * Present when the input is pressed.
-   */
-  pressed = "data-pressed",
-  /**
-   * Present when the component is disabled.
-   */
-  disabled = "data-disabled",
-  /**
-   * Present when the component is readonly.
-   */
-  readonly = "data-readonly",
-  /**
-   * Indicates which side the corresponding popup is positioned relative to its anchor.
-   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start' | null}
-   */
-  popupSide = "data-popup-side",
-  /**
-   * Present when the component is required.
-   */
-  required = "data-required",
-  /**
-   * Present when the component is in a valid state (when wrapped in Field.Root).
-   */
-  valid = "data-valid",
-  /**
-   * Present when the component is in an invalid state (when wrapped in Field.Root).
-   */
-  invalid = "data-invalid",
-  /**
-   * Present when the component has been touched (when wrapped in Field.Root).
-   */
-  touched = "data-touched",
-  /**
-   * Present when the component's value has changed (when wrapped in Field.Root).
-   */
-  dirty = "data-dirty",
-  /**
-   * Present when the component has a value (when wrapped in Field.Root).
-   */
-  filled = "data-filled",
-  /**
-   * Present when the input is focused (when wrapped in Field.Root).
-   */
-  focused = "data-focused",
-  /**
-   * Present when the corresponding items list is empty.
-   */
-  listEmpty = "data-list-empty",
-}
+/**
+ * Present when the corresponding popup is open.
+ */
+export declare const popupOpen = "data-popup-open";
+/**
+ * Present when the input is pressed.
+ */
+export declare const pressed = "data-pressed";
+/**
+ * Present when the component is disabled.
+ */
+export declare const disabled = "data-disabled";
+/**
+ * Present when the component is readonly.
+ */
+export declare const readonly = "data-readonly";
+/**
+ * Indicates which side the corresponding popup is positioned relative to its anchor.
+ * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start' | null}
+ */
+export declare const popupSide = "data-popup-side";
+/**
+ * Present when the component is required.
+ */
+export declare const required = "data-required";
+/**
+ * Present when the component is in a valid state (when wrapped in Field.Root).
+ */
+export declare const valid = "data-valid";
+/**
+ * Present when the component is in an invalid state (when wrapped in Field.Root).
+ */
+export declare const invalid = "data-invalid";
+/**
+ * Present when the component has been touched (when wrapped in Field.Root).
+ */
+export declare const touched = "data-touched";
+/**
+ * Present when the component's value has changed (when wrapped in Field.Root).
+ */
+export declare const dirty = "data-dirty";
+/**
+ * Present when the component has a value (when wrapped in Field.Root).
+ */
+export declare const filled = "data-filled";
+/**
+ * Present when the input is focused (when wrapped in Field.Root).
+ */
+export declare const focused = "data-focused";
+/**
+ * Present when the corresponding items list is empty.
+ */
+export declare const listEmpty = "data-list-empty";