@base-ui/react 1.2.0 → 1.4.0

package/esm/select/item/SelectItem.js

@@ -3,8 +3,6 @@
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
-import { isMouseWithinBounds } from '@base-ui/utils/isMouseWithinBounds';
-import { useTimeout } from '@base-ui/utils/useTimeout';
 import { useStore } from '@base-ui/utils/store';
 import { useSelectRootContext } from "../root/SelectRootContext.js";
 import { useCompositeListItem, IndexGuessBehavior } from "../../composite/list/useCompositeListItem.js";
@@ -31,6 +29,7 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     label,
     disabled = false,
     nativeButton = false,
+    style,
     ...elementProps
   } = componentProps;
   const textRef = React.useRef(null);
@@ -47,11 +46,9 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     selectionRef,
     typingRef,
     valuesRef,
-    keyboardActiveRef,
     multiple,
-    highlightItemOnHover
+    selectedItemTextRef
   } = useSelectRootContext();
-  const highlightTimeout = useTimeout();
   const highlighted = useStore(store, selectors.isActive, listItem.index);
   const selected = useStore(store, selectors.isSelected, listItem.index, itemValue);
   const selectedByFocus = useStore(store, selectors.isSelectedByFocus, listItem.index);
@@ -72,7 +69,7 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
   }, [hasRegistered, index, itemValue, valuesRef]);
   useIsoLayoutEffect(() => {
     if (!hasRegistered) {
-      return undefined;
+      return;
     }
     const selectedValue = store.state.value;
     let selectedCandidate = selectedValue;
@@ -81,9 +78,13 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     }
     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;
+      }
     }
-    return undefined;
-  }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue]);
+  }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue, selectedItemTextRef]);
   const state = {
     disabled,
     selected,
@@ -93,9 +94,6 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     active: highlighted,
     selected
   });
-  // With our custom `focusItemOnHover` implementation, this interferes with the logic and can
-  // cause the index state to be stuck when leaving the select popup.
-  rootProps.onFocus = undefined;
   rootProps.id = undefined;
   const lastKeyRef = React.useRef(null);
   const pointerTypeRef = React.useRef('mouse');
@@ -106,7 +104,8 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
   } = useButton({
     disabled,
     focusableWhenDisabled: true,
-    native: nativeButton
+    native: nativeButton,
+    composite: true
   });
   function commitSelection(event) {
     const selectedValue = store.state.value;
@@ -123,29 +122,6 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     role: 'option',
     'aria-selected': selected,
     tabIndex: highlighted ? 0 : -1,
-    onFocus() {
-      store.set('activeIndex', index);
-    },
-    onMouseEnter() {
-      if (!keyboardActiveRef.current && store.state.selectedIndex === null && highlightItemOnHover) {
-        store.set('activeIndex', index);
-      }
-    },
-    onMouseMove() {
-      if (highlightItemOnHover) {
-        store.set('activeIndex', index);
-      }
-    },
-    onMouseLeave(event) {
-      if (!highlightItemOnHover || keyboardActiveRef.current || isMouseWithinBounds(event)) {
-        return;
-      }
-      highlightTimeout.start(0, () => {
-        if (store.state.activeIndex === index) {
-          store.set('activeIndex', null);
-        }
-      });
-    },
     onTouchStart() {
       selectionRef.current = {
         allowSelectedMouseUp: false,
@@ -155,6 +131,9 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     onKeyDown(event) {
       lastKeyRef.current = event.key;
       store.set('activeIndex', index);
+      if (event.key === ' ' && typingRef.current) {
+        event.preventDefault();
+      }
     },
     onClick(event) {
       didPointerDownRef.current = false;
@@ -163,7 +142,7 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
       if (event.type === 'keydown' && lastKeyRef.current === null) {
         return;
       }
-      if (disabled || lastKeyRef.current === ' ' && typingRef.current || pointerTypeRef.current !== 'touch' && !highlighted) {
+      if (disabled || event.type === 'keydown' && lastKeyRef.current === ' ' && typingRef.current || pointerTypeRef.current !== 'touch' && !highlighted) {
         return;
       }
       lastKeyRef.current = null;
@@ -176,10 +155,12 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
       pointerTypeRef.current = event.pointerType;
       didPointerDownRef.current = true;
     },
-    onMouseUp(event) {
+    onMouseUp() {
       if (disabled) {
         return;
       }
+
+      // Regular click (pointerdown on this element) if didPointerDownRef is set, otherwise drag-to-select
       if (didPointerDownRef.current) {
         didPointerDownRef.current = false;
         return;
@@ -189,7 +170,7 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
       if (disallowSelectedMouseUp || disallowUnselectedMouseUp || pointerTypeRef.current !== 'touch' && !highlighted) {
         return;
       }
-      commitSelection(event.nativeEvent);
+      itemRef.current?.click();
     }
   };
   const element = useRenderElement('div', componentProps, {

package/esm/select/item-indicator/SelectItemIndicator.d.ts

@@ -9,12 +9,20 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  */
 export declare const SelectItemIndicator: React.ForwardRefExoticComponent<Omit<SelectItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface SelectItemIndicatorState {
+  /**
+   * Whether the item is selected.
+   */
   selected: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface SelectItemIndicatorProps extends BaseUIComponentProps<'span', SelectItemIndicator.State> {
+export interface SelectItemIndicatorProps extends BaseUIComponentProps<'span', SelectItemIndicatorState> {
   children?: React.ReactNode;
-  /** Whether to keep the HTML element in the DOM when the item is not selected. */
+  /**
+   * Whether to keep the HTML element in the DOM when the item is not selected.
+   */
   keepMounted?: boolean | undefined;
 }
 export declare namespace SelectItemIndicator {

package/esm/select/item-indicator/SelectItemIndicator.js

@@ -38,6 +38,7 @@ const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentPr
   const {
     render,
     className,
+    style,
     keepMounted,
     ...elementProps
   } = componentProps;

package/esm/select/item-indicator/SelectItemIndicatorDataAttributes.d.ts

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

package/esm/select/item-indicator/SelectItemIndicatorDataAttributes.js

@@ -0,0 +1,12 @@
+import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+export let SelectItemIndicatorDataAttributes = function (SelectItemIndicatorDataAttributes) {
+  /**
+   * Present when the indicator is animating in.
+   */
+  SelectItemIndicatorDataAttributes[SelectItemIndicatorDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the indicator is animating out.
+   */
+  SelectItemIndicatorDataAttributes[SelectItemIndicatorDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return SelectItemIndicatorDataAttributes;
+}({});

package/esm/select/item-text/SelectItemText.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const SelectItemText: React.NamedExoticComponent<Omit<SelectItemTextProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectItemTextState {}
-export interface SelectItemTextProps extends BaseUIComponentProps<'div', SelectItemText.State> {}
+export interface SelectItemTextProps extends BaseUIComponentProps<'div', SelectItemTextState> {}
 export declare namespace SelectItemText {
   type State = SelectItemTextState;
   type Props = SelectItemTextProps;

package/esm/select/item-text/SelectItemText.js

@@ -24,6 +24,7 @@ export const SelectItemText = /*#__PURE__*/React.memo(/*#__PURE__*/React.forward
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const localRef = React.useCallback(node => {

package/esm/select/label/SelectLabel.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { FieldRoot } from "../../field/root/FieldRoot.js";
+/**
+ * An accessible label that is automatically associated with the select trigger.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+export declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type SelectLabelState = FieldRoot.State;
+export interface SelectLabelProps extends Omit<BaseUIComponentProps<'div', SelectLabel.State>, 'id'> {}
+export declare namespace SelectLabel {
+  type State = SelectLabelState;
+  type Props = SelectLabelProps;
+}

package/esm/select/label/SelectLabel.js

@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+import { useStore } from '@base-ui/utils/store';
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { fieldValidityMapping } from "../../field/utils/constants.js";
+import { useLabel } from "../../labelable-provider/useLabel.js";
+import { getDefaultLabelId } from "../../utils/resolveAriaLabelledBy.js";
+import { useSelectRootContext } from "../root/SelectRootContext.js";
+import { selectors } from "../store.js";
+
+/**
+ * An accessible label that is automatically associated with the select trigger.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+export const SelectLabel = /*#__PURE__*/React.forwardRef(function SelectLabel(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    style,
+    ...elementProps
+  } = componentProps;
+  // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.
+  const elementPropsWithoutId = elementProps;
+  delete elementPropsWithoutId.id;
+  const fieldRootContext = useFieldRootContext();
+  const {
+    store
+  } = useSelectRootContext();
+  const triggerElement = useStore(store, selectors.triggerElement);
+  const rootId = useStore(store, selectors.id);
+  const defaultLabelId = getDefaultLabelId(rootId);
+  const labelProps = useLabel({
+    id: defaultLabelId,
+    fallbackControlId: triggerElement?.id ?? rootId,
+    setLabelId(nextLabelId) {
+      store.set('labelId', nextLabelId);
+    }
+  });
+  return useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    state: fieldRootContext.state,
+    props: [labelProps, elementProps],
+    stateAttributesMapping: fieldValidityMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") SelectLabel.displayName = "SelectLabel";

package/esm/select/list/SelectList.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
 export declare const SelectList: React.ForwardRefExoticComponent<Omit<SelectListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface SelectListProps extends BaseUIComponentProps<'div', SelectList.State> {}
+export interface SelectListProps extends BaseUIComponentProps<'div', SelectListState> {}
 export interface SelectListState {}
 export declare namespace SelectList {
   type Props = SelectListProps;

package/esm/select/list/SelectList.js

@@ -20,6 +20,7 @@ export const SelectList = /*#__PURE__*/React.forwardRef(function SelectList(comp
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/select/popup/SelectPopup.d.ts

@@ -10,7 +10,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
 export declare const SelectPopup: React.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface SelectPopupProps extends BaseUIComponentProps<'div', SelectPopup.State> {
+export interface SelectPopupProps extends BaseUIComponentProps<'div', SelectPopupState> {
   children?: React.ReactNode;
   /**
    * Determines the element to focus when the select popup is closed.
@@ -21,12 +21,24 @@ export interface SelectPopupProps extends BaseUIComponentProps<'div', SelectPopu
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  finalFocus?: (boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void)) | undefined;
+  finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void) | undefined;
 }
 export interface SelectPopupState {
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side | 'none';
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the component is open.
+   */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export declare namespace SelectPopup {