@base-ui/react 1.6.0 → 1.8.0

package/select/icon/SelectIcon.js

@@ -7,11 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SelectIcon = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _store = require("@base-ui/utils/store");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _store2 = require("../store");
 /**
  * An icon that indicates that the trigger button opens a select popup.
  * Renders a `<span>` element.
@@ -25,10 +23,8 @@ const SelectIcon = exports.SelectIcon = /*#__PURE__*/React.forwardRef(function S
     style,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = (0, _SelectRootContext.useSelectRootContext)();
-  const open = (0, _store.useStore)(store, _store2.selectors.open);
+  const store = (0, _SelectRootContext.useSelectRootContext)();
+  const open = store.useState('open');
   const state = {
     open
   };

package/select/icon/SelectIcon.mjs

@@ -1,11 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import { useStore } from '@base-ui/utils/store';
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useSelectRootContext } from "../root/SelectRootContext.mjs";
 import { triggerOpenStateMapping } from "../../utils/popupStateMapping.mjs";
-import { selectors } from "../store.mjs";
 
 /**
  * An icon that indicates that the trigger button opens a select popup.
@@ -20,10 +18,8 @@ export const SelectIcon = /*#__PURE__*/React.forwardRef(function SelectIcon(comp
     style,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = useSelectRootContext();
-  const open = useStore(store, selectors.open);
+  const store = useSelectRootContext();
+  const open = store.useState('open');
   const state = {
     open
   };

package/select/icon/SelectIconDataAttributes.d.mts

@@ -1,6 +1,4 @@
-export declare enum SelectIconDataAttributes {
-  /**
-   * Present when the corresponding popup is open.
-   */
-  popupOpen = "data-popup-open",
-}
+/**
+ * Present when the corresponding popup is open.
+ */
+export declare const popupOpen = "data-popup-open";

package/select/icon/SelectIconDataAttributes.d.ts

@@ -1,6 +1,4 @@
-export declare enum SelectIconDataAttributes {
-  /**
-   * Present when the corresponding popup is open.
-   */
-  popupOpen = "data-popup-open",
-}
+/**
+ * Present when the corresponding popup is open.
+ */
+export declare const popupOpen = "data-popup-open";

package/select/icon/SelectIconDataAttributes.js

@@ -3,12 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SelectIconDataAttributes = void 0;
+exports.popupOpen = void 0;
 var _popupStateMapping = require("../../utils/popupStateMapping");
-let SelectIconDataAttributes = exports.SelectIconDataAttributes = function (SelectIconDataAttributes) {
-  /**
-   * Present when the corresponding popup is open.
-   */
-  SelectIconDataAttributes[SelectIconDataAttributes["popupOpen"] = _popupStateMapping.CommonTriggerDataAttributes.popupOpen] = "popupOpen";
-  return SelectIconDataAttributes;
-}({});
+/**
+ * Present when the corresponding popup is open.
+ */
+const popupOpen = exports.popupOpen = _popupStateMapping.CommonTriggerDataAttributes.popupOpen;

package/select/icon/SelectIconDataAttributes.mjs

@@ -1,8 +1,6 @@
 import { CommonTriggerDataAttributes } from "../../utils/popupStateMapping.mjs";
-export let SelectIconDataAttributes = function (SelectIconDataAttributes) {
-  /**
-   * Present when the corresponding popup is open.
-   */
-  SelectIconDataAttributes[SelectIconDataAttributes["popupOpen"] = CommonTriggerDataAttributes.popupOpen] = "popupOpen";
-  return SelectIconDataAttributes;
-}({});
+
+/**
+ * Present when the corresponding popup is open.
+ */
+export const popupOpen = CommonTriggerDataAttributes.popupOpen;

package/select/index.d.mts

@@ -16,4 +16,5 @@ export type * from "./arrow/SelectArrow.mjs";
 export type * from "./scroll-down-arrow/SelectScrollDownArrow.mjs";
 export type * from "./scroll-up-arrow/SelectScrollUpArrow.mjs";
 export type * from "./group/SelectGroup.mjs";
-export type * from "./group-label/SelectGroupLabel.mjs";
+export type * from "./group-label/SelectGroupLabel.mjs";
+export type * from "./separator/SelectSeparator.mjs";

package/select/index.d.ts

@@ -16,4 +16,5 @@ export type * from "./arrow/SelectArrow.js";
 export type * from "./scroll-down-arrow/SelectScrollDownArrow.js";
 export type * from "./scroll-up-arrow/SelectScrollUpArrow.js";
 export type * from "./group/SelectGroup.js";
-export type * from "./group-label/SelectGroupLabel.js";
+export type * from "./group-label/SelectGroupLabel.js";
+export type * from "./separator/SelectSeparator.js";

package/select/index.parts.d.mts

@@ -16,4 +16,4 @@ export { SelectScrollDownArrow as ScrollDownArrow } from "./scroll-down-arrow/Se
 export { SelectScrollUpArrow as ScrollUpArrow } from "./scroll-up-arrow/SelectScrollUpArrow.mjs";
 export { SelectGroup as Group } from "./group/SelectGroup.mjs";
 export { SelectGroupLabel as GroupLabel } from "./group-label/SelectGroupLabel.mjs";
-export { Separator } from "../separator/Separator.mjs";
+export { SelectSeparator as Separator } from "./separator/SelectSeparator.mjs";

package/select/index.parts.d.ts

@@ -16,4 +16,4 @@ export { SelectScrollDownArrow as ScrollDownArrow } from "./scroll-down-arrow/Se
 export { SelectScrollUpArrow as ScrollUpArrow } from "./scroll-up-arrow/SelectScrollUpArrow.js";
 export { SelectGroup as Group } from "./group/SelectGroup.js";
 export { SelectGroupLabel as GroupLabel } from "./group-label/SelectGroupLabel.js";
-export { Separator } from "../separator/Separator.js";
+export { SelectSeparator as Separator } from "./separator/SelectSeparator.js";

package/select/index.parts.js

@@ -102,7 +102,7 @@ Object.defineProperty(exports, "ScrollUpArrow", {
 Object.defineProperty(exports, "Separator", {
   enumerable: true,
   get: function () {
-    return _Separator.Separator;
+    return _SelectSeparator.SelectSeparator;
   }
 });
 Object.defineProperty(exports, "Trigger", {
@@ -135,4 +135,4 @@ var _SelectScrollDownArrow = require("./scroll-down-arrow/SelectScrollDownArrow"
 var _SelectScrollUpArrow = require("./scroll-up-arrow/SelectScrollUpArrow");
 var _SelectGroup = require("./group/SelectGroup");
 var _SelectGroupLabel = require("./group-label/SelectGroupLabel");
-var _Separator = require("../separator/Separator");
+var _SelectSeparator = require("./separator/SelectSeparator");

package/select/index.parts.mjs

@@ -16,4 +16,4 @@ export { SelectScrollDownArrow as ScrollDownArrow } from "./scroll-down-arrow/Se
 export { SelectScrollUpArrow as ScrollUpArrow } from "./scroll-up-arrow/SelectScrollUpArrow.mjs";
 export { SelectGroup as Group } from "./group/SelectGroup.mjs";
 export { SelectGroupLabel as GroupLabel } from "./group-label/SelectGroupLabel.mjs";
-export { Separator } from "../separator/Separator.mjs";
+export { SelectSeparator as Separator } from "./separator/SelectSeparator.mjs";

package/select/item/SelectItem.js

@@ -8,12 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.SelectItem = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _store = require("@base-ui/utils/store");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _useCompositeListItem = require("../../internals/composite/list/useCompositeListItem");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _SelectItemContext = require("./SelectItemContext");
-var _store2 = require("../store");
 var _useButton = require("../../internals/use-button");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
@@ -33,68 +31,64 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
     style,
     value: itemValue = null,
     label,
-    disabled = false,
+    disabled: disabledProp = false,
     nativeButton = false,
     ...elementProps
   } = componentProps;
   const textRef = React.useRef(null);
   const listItem = (0, _useCompositeListItem.useCompositeListItem)({
+    guess: true,
     label,
-    textRef,
-    indexGuessBehavior: _useCompositeListItem.IndexGuessBehavior.GuessFromOrder
+    textRef
   });
+  const store = (0, _SelectRootContext.useSelectRootContext)();
   const {
-    store,
     itemProps,
-    setOpen,
-    setValue,
-    selectionRef,
-    typingRef,
-    valuesRef,
     multiple,
-    selectedItemTextRef,
     disabled: selectDisabled,
     readOnly
-  } = (0, _SelectRootContext.useSelectRootContext)();
-  const highlighted = (0, _store.useStore)(store, _store2.selectors.isActive, listItem.index);
-  const open = (0, _store.useStore)(store, _store2.selectors.open);
-  const selected = (0, _store.useStore)(store, _store2.selectors.isSelected, itemValue);
-  const selectedByFocus = (0, _store.useStore)(store, _store2.selectors.isSelectedByFocus, listItem.index);
-  const isItemEqualToValue = (0, _store.useStore)(store, _store2.selectors.isItemEqualToValue);
+  } = (0, _SelectRootContext.useSelectRootPropsContext)();
+  const disabled = selectDisabled || disabledProp;
+  const highlighted = store.useState('isActive', listItem.index);
+  const open = store.useState('open');
+  const selected = store.useState('isSelected', itemValue);
+  const selectedByFocus = store.useState('isSelectedByFocus', listItem.index);
+  const isItemEqualToValue = store.useState('isItemEqualToValue');
   const index = listItem.index;
-  const hasRegistered = index !== -1;
   const itemRef = React.useRef(null);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (!hasRegistered) {
-      return undefined;
-    }
-    const values = valuesRef.current;
+    const values = store.context.valuesRef.current;
     values[index] = itemValue;
     return () => {
       delete values[index];
     };
-  }, [hasRegistered, index, itemValue, valuesRef]);
+  }, [index, itemValue, store]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (!hasRegistered) {
-      return;
-    }
     const selectedValue = store.state.value;
-    let selectedCandidate = selectedValue;
+    const currentIndex = store.state.selectedIndex;
+    let nextIndex = currentIndex;
+    let claims;
     if (multiple && Array.isArray(selectedValue)) {
-      // Compare against the last selected item, or `undefined` when nothing is selected — never
-      // the raw array, which a custom `isItemEqualToValue` isn't expected to receive.
-      selectedCandidate = selectedValue.length > 0 ? selectedValue[selectedValue.length - 1] : undefined;
-    }
-    if (selectedCandidate !== undefined && (0, _itemEquality.compareItemEquality)(itemValue, selectedCandidate, isItemEqualToValue)) {
-      store.set('selectedIndex', index);
-      // Make sure SelectPopup can measure the selected item on first open.
-      // SelectItemText can still update this ref later when focus moves.
-      if (textRef.current) {
-        selectedItemTextRef.current = textRef.current;
+      // The claiming item also owns the text ref that aligns the popup.
+      nextIndex = (0, _itemEquality.resolveSelectedIndex)(index, itemValue, store.context.valuesRef.current, selectedValue, isItemEqualToValue, currentIndex);
+      claims = nextIndex === index;
+      if (index === currentIndex && !claims) {
+        store.context.selectedItemTextRef.current = null;
+      }
+    } else {
+      claims = selectedValue !== undefined && (0, _itemEquality.compareItemEquality)(itemValue, selectedValue, isItemEqualToValue);
+      if (claims) {
+        nextIndex = index;
       }
     }
-  }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue, selectedItemTextRef]);
-  const lastKeyRef = React.useRef(null);
+    store.set('selectedIndex', nextIndex);
+
+    // Make sure SelectPopup can measure the selected item on first open.
+    // SelectItemText can still update this ref later when focus moves.
+    if (claims && textRef.current) {
+      store.context.selectedItemTextRef.current = textRef.current;
+    }
+  }, [index, multiple, isItemEqualToValue, store, itemValue]);
   const pointerTypeRef = React.useRef('mouse');
   const allowMouseSelectionRef = React.useRef(false);
   const {
@@ -121,28 +115,29 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
     if (multiple) {
       const currentValue = Array.isArray(selectedValue) ? selectedValue : [];
       const nextValue = selected ? (0, _itemEquality.removeItem)(currentValue, itemValue, isItemEqualToValue) : [...currentValue, itemValue];
-      setValue(nextValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event));
+      store.context.setValue(nextValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event));
     } else {
-      setValue(itemValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event));
-      setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event));
+      store.context.setValue(itemValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event));
+      store.context.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event));
     }
   }
   function resetDragMovement() {
-    selectionRef.current.dragY = 0;
+    store.context.selectionRef.current.dragY = 0;
   }
   const defaultProps = {
     role: 'option',
     'aria-selected': selected,
     tabIndex: open && highlighted ? 0 : -1,
     onKeyDown(event) {
-      lastKeyRef.current = event.key;
       store.set('activeIndex', index);
-      if (event.key === ' ' && typingRef.current) {
+      if (event.key === ' ' && store.context.typingRef.current) {
+        // `useButton` skips Space activation for `role="option"` items when the keydown
+        // is `defaultPrevented`, keeping typeahead spaces from committing a selection.
         event.preventDefault();
       }
     },
     onClick(event) {
-      const isMouseClick = event.type === 'click' && pointerTypeRef.current !== 'touch';
+      const isMouseClick = pointerTypeRef.current !== 'touch';
       const clickPointerType = event.nativeEvent.pointerType;
       const isVirtualMouseClick = isMouseClick && (0, _event.isVirtualClick)(event.nativeEvent) && (
       // Generic no-pointer `detail === 0` clicks stay tied to highlight state. Virtual
@@ -154,15 +149,9 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
       // assistive technology activation.
       const isInvalidMouseClick = isMouseClick && !isVirtualMouseClick && !allowMouseSelectionRef.current;
       allowMouseSelectionRef.current = false;
-
-      // Prevent double commit on {Enter}
-      if (event.type === 'keydown' && lastKeyRef.current === null) {
-        return;
-      }
-      if (disabled || event.type === 'keydown' && lastKeyRef.current === ' ' && typingRef.current || isInvalidMouseClick) {
+      if (disabled || isInvalidMouseClick) {
         return;
       }
-      lastKeyRef.current = null;
       commitSelection(event.nativeEvent);
     },
     onPointerEnter(event) {
@@ -170,7 +159,7 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
     },
     onPointerMove(event) {
       if (event.pointerType === 'mouse' && event.buttons === 1) {
-        const selection = selectionRef.current;
+        const selection = store.context.selectionRef.current;
         selection.dragY += event.movementY;
         if (selection.dragY ** 2 >= 64) {
           selection.allowUnselectedMouseUp = true;
@@ -192,8 +181,8 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
       if (allowMouseSelectionRef.current) {
         return;
       }
-      const disallowSelectedMouseUp = !selectionRef.current.allowSelectedMouseUp && selected;
-      const disallowUnselectedMouseUp = !selectionRef.current.allowUnselectedMouseUp && !selected;
+      const disallowSelectedMouseUp = !store.context.selectionRef.current.allowSelectedMouseUp && selected;
+      const disallowUnselectedMouseUp = !store.context.selectionRef.current.allowUnselectedMouseUp && !selected;
       if (disallowSelectedMouseUp || disallowUnselectedMouseUp) {
         return;
       }
@@ -211,9 +200,8 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
     selected,
     index,
     textRef,
-    selectedByFocus,
-    hasRegistered
-  }), [selected, index, textRef, selectedByFocus, hasRegistered]);
+    selectedByFocus
+  }), [selected, index, textRef, selectedByFocus]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItemContext.SelectItemContext.Provider, {
     value: contextValue,
     children: element

package/select/item/SelectItem.mjs

@@ -2,16 +2,14 @@
 
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useStore } from '@base-ui/utils/store';
-import { useSelectRootContext } from "../root/SelectRootContext.mjs";
-import { useCompositeListItem, IndexGuessBehavior } from "../../internals/composite/list/useCompositeListItem.mjs";
+import { useSelectRootContext, useSelectRootPropsContext } from "../root/SelectRootContext.mjs";
+import { useCompositeListItem } from "../../internals/composite/list/useCompositeListItem.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { SelectItemContext } from "./SelectItemContext.mjs";
-import { selectors } from "../store.mjs";
 import { useButton } from "../../internals/use-button/index.mjs";
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
-import { compareItemEquality, removeItem } from "../../internals/itemEquality.mjs";
+import { compareItemEquality, removeItem, resolveSelectedIndex } from "../../internals/itemEquality.mjs";
 import { isVirtualClick } from "../../floating-ui-react/utils/event.mjs";
 
 /**
@@ -28,68 +26,64 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     style,
     value: itemValue = null,
     label,
-    disabled = false,
+    disabled: disabledProp = false,
     nativeButton = false,
     ...elementProps
   } = componentProps;
   const textRef = React.useRef(null);
   const listItem = useCompositeListItem({
+    guess: true,
     label,
-    textRef,
-    indexGuessBehavior: IndexGuessBehavior.GuessFromOrder
+    textRef
   });
+  const store = useSelectRootContext();
   const {
-    store,
     itemProps,
-    setOpen,
-    setValue,
-    selectionRef,
-    typingRef,
-    valuesRef,
     multiple,
-    selectedItemTextRef,
     disabled: selectDisabled,
     readOnly
-  } = useSelectRootContext();
-  const highlighted = useStore(store, selectors.isActive, listItem.index);
-  const open = useStore(store, selectors.open);
-  const selected = useStore(store, selectors.isSelected, itemValue);
-  const selectedByFocus = useStore(store, selectors.isSelectedByFocus, listItem.index);
-  const isItemEqualToValue = useStore(store, selectors.isItemEqualToValue);
+  } = useSelectRootPropsContext();
+  const disabled = selectDisabled || disabledProp;
+  const highlighted = store.useState('isActive', listItem.index);
+  const open = store.useState('open');
+  const selected = store.useState('isSelected', itemValue);
+  const selectedByFocus = store.useState('isSelectedByFocus', listItem.index);
+  const isItemEqualToValue = store.useState('isItemEqualToValue');
   const index = listItem.index;
-  const hasRegistered = index !== -1;
   const itemRef = React.useRef(null);
   useIsoLayoutEffect(() => {
-    if (!hasRegistered) {
-      return undefined;
-    }
-    const values = valuesRef.current;
+    const values = store.context.valuesRef.current;
     values[index] = itemValue;
     return () => {
       delete values[index];
     };
-  }, [hasRegistered, index, itemValue, valuesRef]);
+  }, [index, itemValue, store]);
   useIsoLayoutEffect(() => {
-    if (!hasRegistered) {
-      return;
-    }
     const selectedValue = store.state.value;
-    let selectedCandidate = selectedValue;
+    const currentIndex = store.state.selectedIndex;
+    let nextIndex = currentIndex;
+    let claims;
     if (multiple && Array.isArray(selectedValue)) {
-      // Compare against the last selected item, or `undefined` when nothing is selected — never
-      // the raw array, which a custom `isItemEqualToValue` isn't expected to receive.
-      selectedCandidate = selectedValue.length > 0 ? selectedValue[selectedValue.length - 1] : undefined;
-    }
-    if (selectedCandidate !== undefined && compareItemEquality(itemValue, selectedCandidate, isItemEqualToValue)) {
-      store.set('selectedIndex', index);
-      // Make sure SelectPopup can measure the selected item on first open.
-      // SelectItemText can still update this ref later when focus moves.
-      if (textRef.current) {
-        selectedItemTextRef.current = textRef.current;
+      // The claiming item also owns the text ref that aligns the popup.
+      nextIndex = resolveSelectedIndex(index, itemValue, store.context.valuesRef.current, selectedValue, isItemEqualToValue, currentIndex);
+      claims = nextIndex === index;
+      if (index === currentIndex && !claims) {
+        store.context.selectedItemTextRef.current = null;
+      }
+    } else {
+      claims = selectedValue !== undefined && compareItemEquality(itemValue, selectedValue, isItemEqualToValue);
+      if (claims) {
+        nextIndex = index;
       }
     }
-  }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue, selectedItemTextRef]);
-  const lastKeyRef = React.useRef(null);
+    store.set('selectedIndex', nextIndex);
+
+    // Make sure SelectPopup can measure the selected item on first open.
+    // SelectItemText can still update this ref later when focus moves.
+    if (claims && textRef.current) {
+      store.context.selectedItemTextRef.current = textRef.current;
+    }
+  }, [index, multiple, isItemEqualToValue, store, itemValue]);
   const pointerTypeRef = React.useRef('mouse');
   const allowMouseSelectionRef = React.useRef(false);
   const {
@@ -116,28 +110,29 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     if (multiple) {
       const currentValue = Array.isArray(selectedValue) ? selectedValue : [];
       const nextValue = selected ? removeItem(currentValue, itemValue, isItemEqualToValue) : [...currentValue, itemValue];
-      setValue(nextValue, createChangeEventDetails(REASONS.itemPress, event));
+      store.context.setValue(nextValue, createChangeEventDetails(REASONS.itemPress, event));
     } else {
-      setValue(itemValue, createChangeEventDetails(REASONS.itemPress, event));
-      setOpen(false, createChangeEventDetails(REASONS.itemPress, event));
+      store.context.setValue(itemValue, createChangeEventDetails(REASONS.itemPress, event));
+      store.context.setOpen(false, createChangeEventDetails(REASONS.itemPress, event));
     }
   }
   function resetDragMovement() {
-    selectionRef.current.dragY = 0;
+    store.context.selectionRef.current.dragY = 0;
   }
   const defaultProps = {
     role: 'option',
     'aria-selected': selected,
     tabIndex: open && highlighted ? 0 : -1,
     onKeyDown(event) {
-      lastKeyRef.current = event.key;
       store.set('activeIndex', index);
-      if (event.key === ' ' && typingRef.current) {
+      if (event.key === ' ' && store.context.typingRef.current) {
+        // `useButton` skips Space activation for `role="option"` items when the keydown
+        // is `defaultPrevented`, keeping typeahead spaces from committing a selection.
         event.preventDefault();
       }
     },
     onClick(event) {
-      const isMouseClick = event.type === 'click' && pointerTypeRef.current !== 'touch';
+      const isMouseClick = pointerTypeRef.current !== 'touch';
       const clickPointerType = event.nativeEvent.pointerType;
       const isVirtualMouseClick = isMouseClick && isVirtualClick(event.nativeEvent) && (
       // Generic no-pointer `detail === 0` clicks stay tied to highlight state. Virtual
@@ -149,15 +144,9 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
       // assistive technology activation.
       const isInvalidMouseClick = isMouseClick && !isVirtualMouseClick && !allowMouseSelectionRef.current;
       allowMouseSelectionRef.current = false;
-
-      // Prevent double commit on {Enter}
-      if (event.type === 'keydown' && lastKeyRef.current === null) {
-        return;
-      }
-      if (disabled || event.type === 'keydown' && lastKeyRef.current === ' ' && typingRef.current || isInvalidMouseClick) {
+      if (disabled || isInvalidMouseClick) {
         return;
       }
-      lastKeyRef.current = null;
       commitSelection(event.nativeEvent);
     },
     onPointerEnter(event) {
@@ -165,7 +154,7 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     },
     onPointerMove(event) {
       if (event.pointerType === 'mouse' && event.buttons === 1) {
-        const selection = selectionRef.current;
+        const selection = store.context.selectionRef.current;
         selection.dragY += event.movementY;
         if (selection.dragY ** 2 >= 64) {
           selection.allowUnselectedMouseUp = true;
@@ -187,8 +176,8 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
       if (allowMouseSelectionRef.current) {
         return;
       }
-      const disallowSelectedMouseUp = !selectionRef.current.allowSelectedMouseUp && selected;
-      const disallowUnselectedMouseUp = !selectionRef.current.allowUnselectedMouseUp && !selected;
+      const disallowSelectedMouseUp = !store.context.selectionRef.current.allowSelectedMouseUp && selected;
+      const disallowUnselectedMouseUp = !store.context.selectionRef.current.allowUnselectedMouseUp && !selected;
       if (disallowSelectedMouseUp || disallowUnselectedMouseUp) {
         return;
       }
@@ -206,9 +195,8 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     selected,
     index,
     textRef,
-    selectedByFocus,
-    hasRegistered
-  }), [selected, index, textRef, selectedByFocus, hasRegistered]);
+    selectedByFocus
+  }), [selected, index, textRef, selectedByFocus]);
   return /*#__PURE__*/_jsx(SelectItemContext.Provider, {
     value: contextValue,
     children: element

package/select/item/SelectItemContext.d.mts

@@ -4,7 +4,6 @@ export interface SelectItemContext {
   index: number;
   textRef: React.RefObject<HTMLElement | null>;
   selectedByFocus: boolean;
-  hasRegistered: boolean;
 }
 export declare const SelectItemContext: React.Context<SelectItemContext | undefined>;
 export declare function useSelectItemContext(): SelectItemContext;

package/select/item/SelectItemContext.d.ts

@@ -4,7 +4,6 @@ export interface SelectItemContext {
   index: number;
   textRef: React.RefObject<HTMLElement | null>;
   selectedByFocus: boolean;
-  hasRegistered: boolean;
 }
 export declare const SelectItemContext: React.Context<SelectItemContext | undefined>;
 export declare function useSelectItemContext(): SelectItemContext;

package/select/item/SelectItemDataAttributes.d.mts

@@ -1,14 +1,12 @@
-export declare enum SelectItemDataAttributes {
-  /**
-   * Present when the select item is selected.
-   */
-  selected = "data-selected",
-  /**
-   * Present when the select item is highlighted.
-   */
-  highlighted = "data-highlighted",
-  /**
-   * Present when the select item is disabled.
-   */
-  disabled = "data-disabled",
-}
+/**
+ * Present when the select item is selected.
+ */
+export declare const selected = "data-selected";
+/**
+ * Present when the select item is highlighted.
+ */
+export declare const highlighted = "data-highlighted";
+/**
+ * Present when the select item is disabled.
+ */
+export declare const disabled = "data-disabled";