@base-ui/react 1.4.1 → 1.5.0

package/esm/preview-card/trigger/PreviewCardTrigger.js

@@ -2,12 +2,13 @@
 
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
+import { fastComponentRef } from '@base-ui/utils/fastHooks';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { usePreviewCardRootContext } from "../root/PreviewCardContext.js";
 import { triggerOpenStateMapping } from "../../utils/popupStateMapping.js";
 import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useBaseUiId } from "../../internals/useBaseUiId.js";
-import { useTriggerDataForwarding } from "../../utils/popups/index.js";
+import { getInlineRectTriggerProps, useTriggerDataForwarding } from "../../utils/popups/index.js";
 import { CLOSE_DELAY, OPEN_DELAY } from "../utils/constants.js";
 import { safePolygon, useFocus, useHoverReferenceInteraction } from "../../floating-ui-react/index.js";
 
@@ -17,7 +18,7 @@ import { safePolygon, useFocus, useHoverReferenceInteraction } from "../../float
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
  */
-export const PreviewCardTrigger = /*#__PURE__*/React.forwardRef(function PreviewCardTrigger(componentProps, forwardedRef) {
+export const PreviewCardTrigger = fastComponentRef(function PreviewCardTrigger(componentProps, forwardedRef) {
   const {
     render,
     className,
@@ -38,6 +39,7 @@ export const PreviewCardTrigger = /*#__PURE__*/React.forwardRef(function Preview
   const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
   const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
   const floatingRootContext = store.useState('floatingRootContext');
+  const inlineRectCoordsRef = store.context.inlineRectCoordsRef;
   const triggerElementRef = React.useRef(null);
   const delayWithDefault = delay ?? OPEN_DELAY;
   const closeDelayWithDefault = closeDelay ?? CLOSE_DELAY;
@@ -71,10 +73,11 @@ export const PreviewCardTrigger = /*#__PURE__*/React.forwardRef(function Preview
     open: isOpenedByThisTrigger
   };
   const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
+  const inlineRectTriggerProps = getInlineRectTriggerProps(inlineRectCoordsRef, isOpenedByThisTrigger);
   const element = useRenderElement('a', componentProps, {
     state,
     ref: [forwardedRef, registerTrigger, triggerElementRef],
-    props: [hoverProps, focusProps.reference, rootTriggerProps, {
+    props: [hoverProps, focusProps.reference, rootTriggerProps, inlineRectTriggerProps, {
       id: thisTriggerId
     }, elementProps],
     stateAttributesMapping: triggerOpenStateMapping

package/esm/preview-card/viewport/PreviewCardViewport.d.ts

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A viewport for displaying content transitions.
- * This component is only required if one popup can be opened by multiple triggers, its content change based on the trigger
- * and switching between them is animated.
+ * This component is only required if one popup can be opened by multiple triggers, its content
+ * changes based on the trigger, and switching between them is animated.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)

package/esm/preview-card/viewport/PreviewCardViewport.js

@@ -14,8 +14,8 @@ const stateAttributesMapping = {
 
 /**
  * A viewport for displaying content transitions.
- * This component is only required if one popup can be opened by multiple triggers, its content change based on the trigger
- * and switching between them is animated.
+ * This component is only required if one popup can be opened by multiple triggers, its content
+ * changes based on the trigger, and switching between them is animated.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)

package/esm/preview-card/viewport/PreviewCardViewportDataAttributes.d.ts

@@ -11,7 +11,7 @@ export declare enum PreviewCardViewportDataAttributes {
    * Indicates the direction from which the popup was activated.
    * This can be used to create directional animations based on how the popup was triggered.
    * Contains space-separated values for both horizontal and vertical axes.
-   * @type {`${'left' | 'right'} {'top' | 'bottom'}`}
+   * @type {`${'left' | 'right'} ${'top' | 'bottom'}`}
    */
   activationDirection = "data-activation-direction",
   /**
@@ -20,7 +20,7 @@ export declare enum PreviewCardViewportDataAttributes {
   transitioning = "data-transitioning",
   /**
    * Present if animations should be instant.
-   * @type {'delay' | 'dismiss' | 'focus'}
+   * @type {'dismiss' | 'focus'}
    */
   instant = "data-instant",
 }

package/esm/preview-card/viewport/PreviewCardViewportDataAttributes.js

@@ -11,7 +11,7 @@ export let PreviewCardViewportDataAttributes = /*#__PURE__*/function (PreviewCar
    * Indicates the direction from which the popup was activated.
    * This can be used to create directional animations based on how the popup was triggered.
    * Contains space-separated values for both horizontal and vertical axes.
-   * @type {`${'left' | 'right'} {'top' | 'bottom'}`}
+   * @type {`${'left' | 'right'} ${'top' | 'bottom'}`}
    */
   PreviewCardViewportDataAttributes["activationDirection"] = "data-activation-direction";
   /**
@@ -20,7 +20,7 @@ export let PreviewCardViewportDataAttributes = /*#__PURE__*/function (PreviewCar
   PreviewCardViewportDataAttributes["transitioning"] = "data-transitioning";
   /**
    * Present if animations should be instant.
-   * @type {'delay' | 'dismiss' | 'focus'}
+   * @type {'dismiss' | 'focus'}
    */
   PreviewCardViewportDataAttributes["instant"] = "data-instant";
   return PreviewCardViewportDataAttributes;

package/esm/progress/indicator/ProgressIndicator.js

@@ -25,21 +25,16 @@ export const ProgressIndicator = /*#__PURE__*/React.forwardRef(function Progress
     state
   } = useProgressRootContext();
   const percentageValue = Number.isFinite(value) && value !== null ? valueToPercent(value, min, max) : null;
-  const getStyles = React.useCallback(() => {
-    if (percentageValue == null) {
-      return {};
-    }
-    return {
-      insetInlineStart: 0,
-      height: 'inherit',
-      width: `${percentageValue}%`
-    };
-  }, [percentageValue]);
+  const indicatorStyle = percentageValue == null ? {} : {
+    insetInlineStart: 0,
+    height: 'inherit',
+    width: `${percentageValue}%`
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,
     props: [{
-      style: getStyles()
+      style: indicatorStyle
     }, elementProps],
     stateAttributesMapping: progressStateAttributesMapping
   });

package/esm/progress/root/ProgressRoot.d.ts

@@ -16,7 +16,7 @@ export interface ProgressRootState {
 }
 export interface ProgressRootProps extends BaseUIComponentProps<'div', ProgressRootState> {
   /**
-   * A string value that provides a user-friendly name for `aria-valuenow`, the current value of the meter.
+   * A string value that provides a user-friendly name for `aria-valuenow`, the current value of the progress bar.
    */
   'aria-valuetext'?: React.AriaAttributes['aria-valuetext'] | undefined;
   /**

package/esm/radio/root/RadioRoot.js

@@ -6,6 +6,7 @@ import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
 import { EMPTY_OBJECT } from '@base-ui/utils/empty';
+import { ownerWindow } from '@base-ui/utils/owner';
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { REASONS } from "../../internals/reasons.js";
 import { NOOP } from "../../internals/noop.js";
@@ -79,7 +80,6 @@ export const RadioRoot = /*#__PURE__*/React.forwardRef(function RadioRoot(compon
   const required = requiredGroup || requiredProp;
   const form = formGroup;
   const checked = groupContext ? checkedValue === value : value === '';
-  const serializedValue = React.useMemo(() => serializeValue(value), [value]);
   const radioRef = React.useRef(null);
   const inputRef = React.useRef(null);
   const handleControlRef = useStableCallback(element => {
@@ -133,7 +133,11 @@ export const RadioRoot = /*#__PURE__*/React.forwardRef(function RadioRoot(compon
         return;
       }
       event.preventDefault();
-      inputRef.current?.dispatchEvent(new PointerEvent('click', {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.dispatchEvent(new (ownerWindow(input).PointerEvent)('click', {
         bubbles: true,
         shiftKey: event.shiftKey,
         ctrlKey: event.ctrlKey,
@@ -166,7 +170,7 @@ export const RadioRoot = /*#__PURE__*/React.forwardRef(function RadioRoot(compon
     style: name ? visuallyHiddenInput : visuallyHidden,
     'aria-hidden': true,
     ...(value !== undefined ? {
-      value: serializedValue
+      value: serializeValue(value)
     } : EMPTY_OBJECT),
     disabled,
     checked,

package/esm/radio-group/RadioGroup.js

@@ -70,9 +70,9 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(comp
     name: 'RadioGroup',
     state: 'value'
   });
-  const onValueChange = useStableCallback(onValueChangeProp);
+  const [touched, setTouched] = React.useState(false);
   const setCheckedValue = useStableCallback((value, eventDetails) => {
-    onValueChange(value, eventDetails);
+    onValueChangeProp?.(value, eventDetails);
     if (eventDetails.isCanceled) {
       return;
     }
@@ -121,12 +121,7 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(comp
     }
     return undefined;
   });
-  const getFieldValue = useStableCallback(() => checkedValue ?? null);
-  useRegisterFieldControl(controlRef, {
-    id,
-    value: checkedValue,
-    getValue: getFieldValue
-  });
+  useRegisterFieldControl(controlRef, id, checkedValue ?? null);
   useValueChanged(checkedValue, () => {
     clearErrors(name);
     setDirty(checkedValue !== validityData.initialValue);
@@ -141,7 +136,6 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(comp
       setInputRef(fallbackInput);
     }
   });
-  const [touched, setTouched] = React.useState(false);
   const ariaLabelledby = elementProps['aria-labelledby'] ?? labelId ?? fieldsetContext?.legendId;
   const state = {
     ...fieldState,
@@ -156,7 +150,6 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(comp
     form,
     validation,
     name,
-    onValueChange,
     readOnly,
     registerControlRef,
     registerInputRef,
@@ -164,7 +157,7 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(comp
     setCheckedValue,
     setTouched,
     touched
-  }), [checkedValue, disabled, form, validation, fieldState, name, onValueChange, readOnly, registerControlRef, registerInputRef, required, setCheckedValue, setTouched, touched]);
+  }), [checkedValue, disabled, form, validation, fieldState, name, readOnly, registerControlRef, registerInputRef, required, setCheckedValue, setTouched, touched]);
   const defaultProps = {
     role: 'radiogroup',
     'aria-required': required || undefined,

package/esm/radio-group/RadioGroupContext.d.ts

@@ -10,7 +10,6 @@ export interface RadioGroupContext<Value> {
   name: string | undefined;
   checkedValue: Value | undefined;
   setCheckedValue: (value: Value, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
-  onValueChange: (value: Value, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
   touched: boolean;
   setTouched: React.Dispatch<React.SetStateAction<boolean>>;
   validation?: UseFieldValidationReturnValue | undefined;

package/esm/scroll-area/content/ScrollAreaContent.js

@@ -19,19 +19,19 @@ export const ScrollAreaContent = /*#__PURE__*/React.forwardRef(function ScrollAr
     style,
     ...elementProps
   } = componentProps;
-  const contentWrapperRef = React.useRef(null);
   const {
     computeThumbPosition
   } = useScrollAreaViewportContext();
   const {
     viewportState
   } = useScrollAreaRootContext();
+  const contentWrapperRef = React.useRef(null);
   useIsoLayoutEffect(() => {
     if (typeof ResizeObserver === 'undefined') {
       return undefined;
     }
     let hasInitialized = false;
-    const ro = new ResizeObserver(() => {
+    const resizeObserver = new ResizeObserver(() => {
       // ResizeObserver fires once upon observing, so we skip the initial call
       // to avoid double-calculating the thumb position on mount.
       if (!hasInitialized) {
@@ -41,10 +41,10 @@ export const ScrollAreaContent = /*#__PURE__*/React.forwardRef(function ScrollAr
       computeThumbPosition();
     });
     if (contentWrapperRef.current) {
-      ro.observe(contentWrapperRef.current);
+      resizeObserver.observe(contentWrapperRef.current);
     }
     return () => {
-      ro.disconnect();
+      resizeObserver.disconnect();
     };
   }, [computeThumbPosition]);
   const element = useRenderElement('div', componentProps, {

package/esm/scroll-area/root/ScrollAreaRoot.js

@@ -13,7 +13,7 @@ import { styleDisableScrollbar } from "../../utils/styles.js";
 import { useBaseUiId } from "../../internals/useBaseUiId.js";
 import { scrollAreaStateAttributesMapping } from "./stateAttributes.js";
 import { contains } from "../../floating-ui-react/utils.js";
-import { useCSPContext } from "../../csp-provider/CSPContext.js";
+import { useCSPContext } from "../../internals/csp-context/CSPContext.js";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_COORDS = {
   x: 0,

package/esm/scroll-area/scrollbar/ScrollAreaScrollbar.js

@@ -61,7 +61,12 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
   };
   const direction = useDirection();
   const hideTrackUntilMeasured = !hasMeasuredScrollbar && !keepMounted;
+  const isHidden = orientation === 'vertical' ? hiddenState.y : hiddenState.x;
+  const shouldRender = keepMounted || !isHidden;
   React.useEffect(() => {
+    if (!shouldRender) {
+      return undefined;
+    }
     const viewportEl = viewportRef.current;
     const scrollbarEl = orientation === 'vertical' ? scrollbarYRef.current : scrollbarXRef.current;
     if (!scrollbarEl) {
@@ -72,30 +77,23 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
         return;
       }
       event.preventDefault();
-      if (orientation === 'vertical') {
-        if (viewportEl.scrollTop === 0 && event.deltaY < 0) {
-          return;
-        }
-      } else if (viewportEl.scrollLeft === 0 && event.deltaX < 0) {
+      const horizontal = orientation === 'horizontal';
+      const scrollProperty = horizontal ? 'scrollLeft' : 'scrollTop';
+      const delta = horizontal ? event.deltaX : event.deltaY;
+      const maxScroll = horizontal ? viewportEl.scrollWidth - viewportEl.clientWidth : viewportEl.scrollHeight - viewportEl.clientHeight;
+      // RTL horizontal scrolling uses a negative `scrollLeft` range, from 0 to `-maxScroll`.
+      const minScroll = horizontal && direction === 'rtl' ? -maxScroll : 0;
+      const maxScrollValue = horizontal && direction === 'rtl' ? 0 : maxScroll;
+      const scrollValue = viewportEl[scrollProperty];
+      if (scrollValue <= minScroll && delta < 0 || scrollValue >= maxScrollValue && delta > 0) {
         return;
       }
-      if (orientation === 'vertical') {
-        if (viewportEl.scrollTop === viewportEl.scrollHeight - viewportEl.clientHeight && event.deltaY > 0) {
-          return;
-        }
-      } else if (viewportEl.scrollLeft === viewportEl.scrollWidth - viewportEl.clientWidth && event.deltaX > 0) {
-        return;
-      }
-      if (orientation === 'vertical') {
-        viewportEl.scrollTop += event.deltaY;
-      } else {
-        viewportEl.scrollLeft += event.deltaX;
-      }
+      viewportEl[scrollProperty] = Math.min(maxScrollValue, Math.max(minScroll, scrollValue + delta));
     }
     return addEventListener(scrollbarEl, 'wheel', handleWheel, {
       passive: false
     });
-  }, [orientation, scrollbarXRef, scrollbarYRef, viewportRef]);
+  }, [direction, orientation, scrollbarXRef, scrollbarYRef, shouldRender, viewportRef]);
   const props = {
     ...(rootId && {
       'data-id': `${rootId}-scrollbar`
@@ -186,8 +184,6 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
   const contextValue = React.useMemo(() => ({
     orientation
   }), [orientation]);
-  const isHidden = orientation === 'vertical' ? hiddenState.y : hiddenState.x;
-  const shouldRender = keepMounted || !isHidden;
   if (!shouldRender) {
     return null;
   }

package/esm/scroll-area/viewport/ScrollAreaViewport.js

@@ -21,6 +21,7 @@ import { normalizeScrollOffset } from "../../utils/scrollEdges.js";
 // regardless of how many Scroll Area components are mounted.
 import { jsx as _jsx } from "react/jsx-runtime";
 let scrollAreaOverflowVarsRegistered = false;
+
 /**
  * Removes inheritance of the scroll area overflow CSS variables, which
  * improves rendering performance in complex scroll areas with deep subtrees.
@@ -254,7 +255,7 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
       return undefined;
     }
     let hasInitialized = false;
-    const ro = new ResizeObserver(() => {
+    const resizeObserver = new ResizeObserver(() => {
       // Avoid duplicate mount-time recompute when observer data matches what the mount
       // scheduling pass already measured. If dimensions changed before the first observer
       // delivery, keep the recompute so overflow transitions stay in sync.
@@ -267,15 +268,10 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
       }
       computeThumbPosition();
     });
-    ro.observe(viewport);
+    resizeObserver.observe(viewport);
 
-    // If there are animations in the viewport, wait for them to finish and then recompute the thumb position.
-    // This is necessary when the viewport contains a Dialog that is animating its popup on open
-    // and the popup is using a transform for the animation, which affects the size of the viewport.
-    // Without this, the thumb position will be incorrect until scrolling (i.e. if the scrollbar shows
-    // on hover, the thumb has an incorrect size).
-    // We assume the user is using `onOpenChangeComplete` to hide the scrollbar
-    // until animations complete because otherwise the scrollbar would show the thumb resizing mid-animation.
+    // Wait for subtree animations to finish, then recompute thumb geometry that
+    // may have been affected by transform-based animations.
     waitForAnimationsTimeout.start(0, () => {
       const animations = viewport.getAnimations({
         subtree: true
@@ -286,7 +282,7 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
       Promise.allSettled(animations.map(animation => animation.finished)).then(computeThumbPosition).catch(() => {});
     });
     return () => {
-      ro.disconnect();
+      resizeObserver.disconnect();
       waitForAnimationsTimeout.clear();
     };
   }, [computeThumbPosition, viewportRef, waitForAnimationsTimeout]);

package/esm/select/arrow/SelectArrow.js

@@ -21,8 +21,8 @@ const stateAttributesMapping = {
  */
 export const SelectArrow = /*#__PURE__*/React.forwardRef(function SelectArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/esm/select/backdrop/SelectBackdrop.js

@@ -20,8 +20,8 @@ const stateAttributesMapping = {
  */
 export const SelectBackdrop = /*#__PURE__*/React.forwardRef(function SelectBackdrop(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/esm/select/group/SelectGroup.js

@@ -13,8 +13,8 @@ import { useRenderElement } from "../../internals/useRenderElement.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const SelectGroup = /*#__PURE__*/React.forwardRef(function SelectGroup(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/esm/select/group-label/SelectGroupLabel.js

@@ -14,10 +14,10 @@ import { useRenderElement } from "../../internals/useRenderElement.js";
  */
 export const SelectGroupLabel = /*#__PURE__*/React.forwardRef(function SelectGroupLabel(componentProps, forwardedRef) {
   const {
-    className,
     render,
-    id: idProp,
+    className,
     style,
+    id: idProp,
     ...elementProps
   } = componentProps;
   const {

package/esm/select/icon/SelectIcon.js

@@ -15,8 +15,8 @@ import { selectors } from "../store.js";
  */
 export const SelectIcon = /*#__PURE__*/React.forwardRef(function SelectIcon(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/esm/select/item/SelectItem.js

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useStore } from '@base-ui/utils/store';
 import { useSelectRootContext } from "../root/SelectRootContext.js";
 import { useCompositeListItem, IndexGuessBehavior } from "../../internals/composite/list/useCompositeListItem.js";
@@ -13,6 +12,7 @@ import { useButton } from "../../internals/use-button/index.js";
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { REASONS } from "../../internals/reasons.js";
 import { compareItemEquality, removeItem } from "../../internals/itemEquality.js";
+import { isVirtualClick } from "../../floating-ui-react/utils/event.js";
 
 /**
  * An individual option in the select popup.
@@ -25,11 +25,11 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
   const {
     render,
     className,
+    style,
     value: itemValue = null,
     label,
     disabled = false,
     nativeButton = false,
-    style,
     ...elementProps
   } = componentProps;
   const textRef = React.useRef(null);
@@ -40,7 +40,7 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
   });
   const {
     store,
-    getItemProps,
+    itemProps,
     setOpen,
     setValue,
     selectionRef,
@@ -56,7 +56,6 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
   const index = listItem.index;
   const hasRegistered = index !== -1;
   const itemRef = React.useRef(null);
-  const indexRef = useValueAsRef(index);
   useIsoLayoutEffect(() => {
     if (!hasRegistered) {
       return undefined;
@@ -85,19 +84,9 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
       }
     }
   }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue, selectedItemTextRef]);
-  const state = {
-    disabled,
-    selected,
-    highlighted
-  };
-  const rootProps = getItemProps({
-    active: highlighted,
-    selected
-  });
-  rootProps.id = undefined;
   const lastKeyRef = React.useRef(null);
   const pointerTypeRef = React.useRef('mouse');
-  const didPointerDownRef = React.useRef(false);
+  const allowMouseSelectionRef = React.useRef(false);
   const {
     getButtonProps,
     buttonRef
@@ -107,6 +96,11 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     native: nativeButton,
     composite: true
   });
+  const state = {
+    disabled,
+    selected,
+    highlighted
+  };
   function commitSelection(event) {
     const selectedValue = store.state.value;
     if (multiple) {
@@ -118,16 +112,13 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
       setOpen(false, createChangeEventDetails(REASONS.itemPress, event));
     }
   }
+  function resetDragMovement() {
+    selectionRef.current.dragY = 0;
+  }
   const defaultProps = {
     role: 'option',
     'aria-selected': selected,
     tabIndex: highlighted ? 0 : -1,
-    onTouchStart() {
-      selectionRef.current = {
-        allowSelectedMouseUp: false,
-        allowUnselectedMouseUp: false
-      };
-    },
     onKeyDown(event) {
       lastKeyRef.current = event.key;
       store.set('activeIndex', index);
@@ -136,13 +127,24 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
       }
     },
     onClick(event) {
-      didPointerDownRef.current = false;
+      const isMouseClick = event.type === 'click' && 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
+      // clicks that carry browser pointer data, including an empty string from assistive
+      // technology, can activate unhighlighted items.
+      clickPointerType !== undefined || highlighted);
+      // With alignItemWithTrigger, opening can place an item under the cursor. Real mouse
+      // clicks must start on the item, while virtual clicks represent explicit keyboard or
+      // 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 || pointerTypeRef.current !== 'touch' && !highlighted) {
+      if (disabled || event.type === 'keydown' && lastKeyRef.current === ' ' && typingRef.current || isInvalidMouseClick) {
         return;
       }
       lastKeyRef.current = null;
@@ -151,40 +153,52 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     onPointerEnter(event) {
       pointerTypeRef.current = event.pointerType;
     },
+    onPointerMove(event) {
+      if (event.pointerType === 'mouse' && event.buttons === 1) {
+        const selection = selectionRef.current;
+        selection.dragY += event.movementY;
+        if (selection.dragY ** 2 >= 64) {
+          selection.allowUnselectedMouseUp = true;
+        }
+      }
+    },
     onPointerDown(event) {
       pointerTypeRef.current = event.pointerType;
-      didPointerDownRef.current = true;
+      allowMouseSelectionRef.current = true;
+      resetDragMovement();
     },
     onMouseUp() {
-      if (disabled) {
+      resetDragMovement();
+      if (disabled || pointerTypeRef.current === 'touch') {
         return;
       }
 
-      // Regular click (pointerdown on this element) if didPointerDownRef is set, otherwise drag-to-select
-      if (didPointerDownRef.current) {
-        didPointerDownRef.current = false;
+      // Regular clicks are committed by the click event.
+      if (allowMouseSelectionRef.current) {
         return;
       }
       const disallowSelectedMouseUp = !selectionRef.current.allowSelectedMouseUp && selected;
       const disallowUnselectedMouseUp = !selectionRef.current.allowUnselectedMouseUp && !selected;
-      if (disallowSelectedMouseUp || disallowUnselectedMouseUp || pointerTypeRef.current !== 'touch' && !highlighted) {
+      if (disallowSelectedMouseUp || disallowUnselectedMouseUp) {
         return;
       }
+      allowMouseSelectionRef.current = true;
       itemRef.current?.click();
+      allowMouseSelectionRef.current = false;
     }
   };
   const element = useRenderElement('div', componentProps, {
     ref: [buttonRef, forwardedRef, listItem.ref, itemRef],
     state,
-    props: [rootProps, defaultProps, elementProps, getButtonProps]
+    props: [itemProps, defaultProps, elementProps, getButtonProps]
   });
   const contextValue = React.useMemo(() => ({
     selected,
-    indexRef,
+    index,
     textRef,
     selectedByFocus,
     hasRegistered
-  }), [selected, indexRef, textRef, selectedByFocus, hasRegistered]);
+  }), [selected, index, textRef, selectedByFocus, hasRegistered]);
   return /*#__PURE__*/_jsx(SelectItemContext.Provider, {
     value: contextValue,
     children: element

package/esm/select/item/SelectItemContext.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export interface SelectItemContext {
   selected: boolean;
-  indexRef: React.RefObject<number>;
+  index: number;
   textRef: React.RefObject<HTMLElement | null>;
   selectedByFocus: boolean;
   hasRegistered: boolean;