@base-ui/react 1.1.0 → 1.3.0

package/select/backdrop/SelectBackdrop.js

@@ -36,10 +36,10 @@ const SelectBackdrop = exports.SelectBackdrop = /*#__PURE__*/React.forwardRef(fu
   const open = (0, _store.useStore)(store, _store2.selectors.open);
   const mounted = (0, _store.useStore)(store, _store2.selectors.mounted);
   const transitionStatus = (0, _store.useStore)(store, _store2.selectors.transitionStatus);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus
-  }), [open, transitionStatus]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: forwardedRef,

package/select/group/SelectGroup.d.ts

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

package/select/group/SelectGroupContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/select/group-label/SelectGroupLabel.d.ts

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

package/select/icon/SelectIcon.d.ts

@@ -13,7 +13,7 @@ export interface SelectIconState {
    */
   open: boolean;
 }
-export interface SelectIconProps extends BaseUIComponentProps<'span', SelectIcon.State> {}
+export interface SelectIconProps extends BaseUIComponentProps<'span', SelectIconState> {}
 export declare namespace SelectIcon {
   type State = SelectIconState;
   type Props = SelectIconProps;

package/select/icon/SelectIcon.js

@@ -28,9 +28,9 @@ const SelectIcon = exports.SelectIcon = /*#__PURE__*/React.forwardRef(function S
     store
   } = (0, _SelectRootContext.useSelectRootContext)();
   const open = (0, _store.useStore)(store, _store2.selectors.open);
-  const state = React.useMemo(() => ({
+  const state = {
     open
-  }), [open]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     state,
     ref: forwardedRef,

package/select/index.d.ts

@@ -1,5 +1,6 @@
 export * as Select from "./index.parts.js";
 export type * from "./root/SelectRoot.js";
+export type * from "./label/SelectLabel.js";
 export type * from "./trigger/SelectTrigger.js";
 export type * from "./value/SelectValue.js";
 export type * from "./icon/SelectIcon.js";

package/select/index.parts.d.ts

@@ -1,4 +1,5 @@
 export { SelectRoot as Root } from "./root/SelectRoot.js";
+export { SelectLabel as Label } from "./label/SelectLabel.js";
 export { SelectTrigger as Trigger } from "./trigger/SelectTrigger.js";
 export { SelectValue as Value } from "./value/SelectValue.js";
 export { SelectIcon as Icon } from "./icon/SelectIcon.js";

package/select/index.parts.js

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "ItemText", {
     return _SelectItemText.SelectItemText;
   }
 });
+Object.defineProperty(exports, "Label", {
+  enumerable: true,
+  get: function () {
+    return _SelectLabel.SelectLabel;
+  }
+});
 Object.defineProperty(exports, "List", {
   enumerable: true,
   get: function () {
@@ -112,6 +118,7 @@ Object.defineProperty(exports, "Value", {
   }
 });
 var _SelectRoot = require("./root/SelectRoot");
+var _SelectLabel = require("./label/SelectLabel");
 var _SelectTrigger = require("./trigger/SelectTrigger");
 var _SelectValue = require("./value/SelectValue");
 var _SelectIcon = require("./icon/SelectIcon");

package/select/item/SelectItem.d.ts

@@ -21,7 +21,7 @@ export interface SelectItemState {
    */
   highlighted: boolean;
 }
-export interface SelectItemProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'div', SelectItem.State>, 'id'> {
+export interface SelectItemProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'div', SelectItemState>, 'id'> {
   children?: React.ReactNode;
   /**
    * A unique value that identifies this select item.
@@ -32,13 +32,13 @@ export interface SelectItemProps extends NonNativeButtonProps, Omit<BaseUICompon
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Specifies the text label to use when the item is matched during keyboard text navigation.
    *
    * Defaults to the item text content if not provided.
    */
-  label?: string;
+  label?: string | undefined;
 }
 export declare namespace SelectItem {
   type State = SelectItemState;

package/select/item/SelectItem.js

@@ -32,7 +32,7 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
   const {
     render,
     className,
-    value = null,
+    value: itemValue = null,
     label,
     disabled = false,
     nativeButton = false,
@@ -58,7 +58,7 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
   } = (0, _SelectRootContext.useSelectRootContext)();
   const highlightTimeout = (0, _useTimeout.useTimeout)();
   const highlighted = (0, _store.useStore)(store, _store2.selectors.isActive, listItem.index);
-  const selected = (0, _store.useStore)(store, _store2.selectors.isSelected, listItem.index, value);
+  const selected = (0, _store.useStore)(store, _store2.selectors.isSelected, listItem.index, itemValue);
   const selectedByFocus = (0, _store.useStore)(store, _store2.selectors.isSelectedByFocus, listItem.index);
   const isItemEqualToValue = (0, _store.useStore)(store, _store2.selectors.isItemEqualToValue);
   const index = listItem.index;
@@ -70,30 +70,30 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
       return undefined;
     }
     const values = valuesRef.current;
-    values[index] = value;
+    values[index] = itemValue;
     return () => {
       delete values[index];
     };
-  }, [hasRegistered, index, value, valuesRef]);
+  }, [hasRegistered, index, itemValue, valuesRef]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!hasRegistered) {
       return undefined;
     }
     const selectedValue = store.state.value;
-    let candidate = selectedValue;
+    let selectedCandidate = selectedValue;
     if (multiple && Array.isArray(selectedValue) && selectedValue.length > 0) {
-      candidate = selectedValue[selectedValue.length - 1];
+      selectedCandidate = selectedValue[selectedValue.length - 1];
     }
-    if (candidate !== undefined && (0, _itemEquality.compareItemEquality)(candidate, value, isItemEqualToValue)) {
+    if (selectedCandidate !== undefined && (0, _itemEquality.compareItemEquality)(itemValue, selectedCandidate, isItemEqualToValue)) {
       store.set('selectedIndex', index);
     }
     return undefined;
-  }, [hasRegistered, index, multiple, isItemEqualToValue, store, value]);
-  const state = React.useMemo(() => ({
+  }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue]);
+  const state = {
     disabled,
     selected,
     highlighted
-  }), [disabled, selected, highlighted]);
+  };
   const rootProps = getItemProps({
     active: highlighted,
     selected
@@ -111,16 +111,17 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
   } = (0, _useButton.useButton)({
     disabled,
     focusableWhenDisabled: true,
-    native: nativeButton
+    native: nativeButton,
+    composite: true
   });
   function commitSelection(event) {
     const selectedValue = store.state.value;
     if (multiple) {
       const currentValue = Array.isArray(selectedValue) ? selectedValue : [];
-      const nextValue = selected ? (0, _itemEquality.removeItem)(currentValue, value, isItemEqualToValue) : [...currentValue, value];
+      const nextValue = selected ? (0, _itemEquality.removeItem)(currentValue, itemValue, isItemEqualToValue) : [...currentValue, itemValue];
       setValue(nextValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event));
     } else {
-      setValue(value, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event));
+      setValue(itemValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event));
       setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event));
     }
   }
@@ -132,7 +133,7 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
       store.set('activeIndex', index);
     },
     onMouseEnter() {
-      if (!keyboardActiveRef.current && store.state.selectedIndex === null) {
+      if (!keyboardActiveRef.current && store.state.selectedIndex === null && highlightItemOnHover) {
         store.set('activeIndex', index);
       }
     },
@@ -160,6 +161,9 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
     onKeyDown(event) {
       lastKeyRef.current = event.key;
       store.set('activeIndex', index);
+      if (event.key === ' ' && typingRef.current) {
+        event.preventDefault();
+      }
     },
     onClick(event) {
       didPointerDownRef.current = false;
@@ -168,7 +172,7 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
       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;
@@ -181,10 +185,12 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
       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;
@@ -194,7 +200,7 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
       if (disallowSelectedMouseUp || disallowUnselectedMouseUp || pointerTypeRef.current !== 'touch' && !highlighted) {
         return;
       }
-      commitSelection(event.nativeEvent);
+      itemRef.current?.click();
     }
   };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {

package/select/item/SelectItemContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

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

@@ -9,13 +9,21 @@ 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. */
-  keepMounted?: boolean;
+  /**
+   * Whether to keep the HTML element in the DOM when the item is not selected.
+   */
+  keepMounted?: boolean | undefined;
 }
 export declare namespace SelectItemIndicator {
   type State = SelectItemIndicatorState;

package/select/item-indicator/SelectItemIndicator.js

@@ -54,10 +54,10 @@ const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentPr
     transitionStatus,
     setMounted
   } = (0, _useTransitionStatus.useTransitionStatus)(selected);
-  const state = React.useMemo(() => ({
+  const state = {
     selected,
     transitionStatus
-  }), [selected, transitionStatus]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     ref: [forwardedRef, indicatorRef],
     state,

package/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/select/item-indicator/SelectItemIndicatorDataAttributes.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectItemIndicatorDataAttributes = void 0;
+var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+let SelectItemIndicatorDataAttributes = exports.SelectItemIndicatorDataAttributes = function (SelectItemIndicatorDataAttributes) {
+  /**
+   * Present when the indicator is animating in.
+   */
+  SelectItemIndicatorDataAttributes[SelectItemIndicatorDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the indicator is animating out.
+   */
+  SelectItemIndicatorDataAttributes[SelectItemIndicatorDataAttributes["endingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return SelectItemIndicatorDataAttributes;
+}({});

package/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/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/select/label/SelectLabel.js

@@ -0,0 +1,54 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectLabel = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _store = require("@base-ui/utils/store");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _FieldRootContext = require("../../field/root/FieldRootContext");
+var _constants = require("../../field/utils/constants");
+var _useLabel = require("../../labelable-provider/useLabel");
+var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
+var _SelectRootContext = require("../root/SelectRootContext");
+var _store2 = require("../store");
+/**
+ * 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)
+ */
+const SelectLabel = exports.SelectLabel = /*#__PURE__*/React.forwardRef(function SelectLabel(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...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 = (0, _FieldRootContext.useFieldRootContext)();
+  const {
+    store
+  } = (0, _SelectRootContext.useSelectRootContext)();
+  const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
+  const rootId = (0, _store.useStore)(store, _store2.selectors.id);
+  const defaultLabelId = (0, _resolveAriaLabelledBy.getDefaultLabelId)(rootId);
+  const labelProps = (0, _useLabel.useLabel)({
+    id: defaultLabelId,
+    fallbackControlId: triggerElement?.id ?? rootId,
+    setLabelId(nextLabelId) {
+      store.set('labelId', nextLabelId);
+    }
+  });
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    ref: forwardedRef,
+    state: fieldRootContext.state,
+    props: [labelProps, elementProps],
+    stateAttributesMapping: _constants.fieldValidityMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") SelectLabel.displayName = "SelectLabel";

package/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/select/popup/SelectPopup.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
 import type { BaseUIComponentProps } from "../../utils/types.js";
 import type { Side, Align } from "../../utils/useAnchorPositioning.js";
 import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
@@ -9,13 +10,35 @@ 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.
+   *
+   * - `false`: Do not move focus.
+   * - `true`: Move focus based on the default behavior (trigger or previously focused element).
+   * - `RefObject`: Move focus to the ref element.
+   * - `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;
 }
 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 {