@base-ui/react 1.6.0 → 1.7.0

package/select/separator/SelectSeparator.d.mts

@@ -0,0 +1,26 @@
+import type * as React from 'react';
+import type { BaseUIComponentProps, Orientation } from "../../internals/types.mjs";
+export interface SelectSeparatorProps extends BaseUIComponentProps<'div', SelectSeparatorState> {
+  /**
+   * The orientation of the separator.
+   * @default 'horizontal'
+   */
+  orientation?: Orientation | undefined;
+}
+export interface SelectSeparatorState {
+  /**
+   * The orientation of the separator.
+   */
+  orientation: Orientation;
+}
+/**
+ * A visual separator between items or groups.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+export declare const SelectSeparator: React.ForwardRefExoticComponent<SelectSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export declare namespace SelectSeparator {
+  type Props = SelectSeparatorProps;
+  type State = SelectSeparatorState;
+}

package/select/separator/SelectSeparator.d.ts

@@ -0,0 +1,26 @@
+import type * as React from 'react';
+import type { BaseUIComponentProps, Orientation } from "../../internals/types.js";
+export interface SelectSeparatorProps extends BaseUIComponentProps<'div', SelectSeparatorState> {
+  /**
+   * The orientation of the separator.
+   * @default 'horizontal'
+   */
+  orientation?: Orientation | undefined;
+}
+export interface SelectSeparatorState {
+  /**
+   * The orientation of the separator.
+   */
+  orientation: Orientation;
+}
+/**
+ * A visual separator between items or groups.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+export declare const SelectSeparator: React.ForwardRefExoticComponent<SelectSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export declare namespace SelectSeparator {
+  type Props = SelectSeparatorProps;
+  type State = SelectSeparatorState;
+}

package/select/separator/SelectSeparator.js

@@ -0,0 +1,15 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectSeparator = void 0;
+var _ListboxSeparator = require("../../utils/listbox-separator/ListboxSeparator");
+/**
+ * A visual separator between items or groups.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectSeparator = exports.SelectSeparator = _ListboxSeparator.ListboxSeparator;

package/select/separator/SelectSeparator.mjs

@@ -0,0 +1,10 @@
+'use client';
+
+import { ListboxSeparator } from "../../utils/listbox-separator/ListboxSeparator.mjs";
+/**
+ * A visual separator between items or groups.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+export const SelectSeparator = ListboxSeparator;

package/select/store.d.mts

@@ -1,8 +1,8 @@
-import { Store } from '@base-ui/utils/store';
+import { ReactStore } from '@base-ui/utils/store';
 import { type InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
 import type { TransitionStatus } from "../internals/useTransitionStatus.mjs";
 import type { HTMLProps } from "../internals/types.mjs";
-import type { Side } from "../utils/useAnchorPositioning.mjs";
+import type { Side } from "../internals/useAnchorPositioning.mjs";
 import { type Group } from "../internals/resolveValueLabel.mjs";
 export type State = {
   id: string | undefined;
@@ -34,18 +34,16 @@ export type State = {
   scrollDownArrowVisible: boolean;
   hasScrollArrows: boolean;
 };
-export type SelectStore = Store<State>;
+export type SelectStore = ReactStore<State>;
 export declare const selectors: {
   id: (state: State) => string | undefined;
   labelId: (state: State) => string | undefined;
   modal: (state: State) => boolean;
-  multiple: (state: State) => boolean;
   items: (state: State) => readonly Group<any>[] | readonly {
     label: React.ReactNode;
     value: any;
   }[] | Record<string, import("react").ReactNode> | undefined;
   itemToStringLabel: (state: State) => ((item: any) => string) | undefined;
-  itemToStringValue: (state: State) => ((item: any) => string) | undefined;
   isItemEqualToValue: (state: State) => (itemValue: any, selectedValue: any) => boolean;
   value: (state: State) => any;
   hasSelectedValue: (state: State) => boolean;

package/select/store.d.ts

@@ -1,8 +1,8 @@
-import { Store } from '@base-ui/utils/store';
+import { ReactStore } from '@base-ui/utils/store';
 import { type InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
 import type { TransitionStatus } from "../internals/useTransitionStatus.js";
 import type { HTMLProps } from "../internals/types.js";
-import type { Side } from "../utils/useAnchorPositioning.js";
+import type { Side } from "../internals/useAnchorPositioning.js";
 import { type Group } from "../internals/resolveValueLabel.js";
 export type State = {
   id: string | undefined;
@@ -34,18 +34,16 @@ export type State = {
   scrollDownArrowVisible: boolean;
   hasScrollArrows: boolean;
 };
-export type SelectStore = Store<State>;
+export type SelectStore = ReactStore<State>;
 export declare const selectors: {
   id: (state: State) => string | undefined;
   labelId: (state: State) => string | undefined;
   modal: (state: State) => boolean;
-  multiple: (state: State) => boolean;
   items: (state: State) => readonly Group<any>[] | readonly {
     label: React.ReactNode;
     value: any;
   }[] | Record<string, import("react").ReactNode> | undefined;
   itemToStringLabel: (state: State) => ((item: any) => string) | undefined;
-  itemToStringValue: (state: State) => ((item: any) => string) | undefined;
   isItemEqualToValue: (state: State) => (itemValue: any, selectedValue: any) => boolean;
   value: (state: State) => any;
   hasSelectedValue: (state: State) => boolean;

package/select/store.js

@@ -4,20 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectors = void 0;
-var _store = require("@base-ui/utils/store");
 var _itemEquality = require("../internals/itemEquality");
 var _resolveValueLabel = require("../internals/resolveValueLabel");
 const selectors = exports.selectors = {
-  id: (0, _store.createSelector)(state => state.id),
-  labelId: (0, _store.createSelector)(state => state.labelId),
-  modal: (0, _store.createSelector)(state => state.modal),
-  multiple: (0, _store.createSelector)(state => state.multiple),
-  items: (0, _store.createSelector)(state => state.items),
-  itemToStringLabel: (0, _store.createSelector)(state => state.itemToStringLabel),
-  itemToStringValue: (0, _store.createSelector)(state => state.itemToStringValue),
-  isItemEqualToValue: (0, _store.createSelector)(state => state.isItemEqualToValue),
-  value: (0, _store.createSelector)(state => state.value),
-  hasSelectedValue: (0, _store.createSelector)(state => {
+  id: state => state.id,
+  labelId: state => state.labelId,
+  modal: state => state.modal,
+  items: state => state.items,
+  itemToStringLabel: state => state.itemToStringLabel,
+  isItemEqualToValue: state => state.isItemEqualToValue,
+  value: state => state.value,
+  hasSelectedValue: state => {
     const {
       value,
       multiple,
@@ -30,19 +27,19 @@ const selectors = exports.selectors = {
       return value.length > 0;
     }
     return (0, _resolveValueLabel.stringifyAsValue)(value, itemToStringValue) !== '';
-  }),
-  hasNullItemLabel: (0, _store.createSelector)((state, enabled) => {
+  },
+  hasNullItemLabel: (state, enabled) => {
     return enabled ? (0, _resolveValueLabel.hasNullItemLabel)(state.items) : false;
-  }),
-  open: (0, _store.createSelector)(state => state.open),
-  mounted: (0, _store.createSelector)(state => state.mounted),
-  forceMount: (0, _store.createSelector)(state => state.forceMount),
-  transitionStatus: (0, _store.createSelector)(state => state.transitionStatus),
-  openMethod: (0, _store.createSelector)(state => state.openMethod),
-  activeIndex: (0, _store.createSelector)(state => state.activeIndex),
-  selectedIndex: (0, _store.createSelector)(state => state.selectedIndex),
-  isActive: (0, _store.createSelector)((state, index) => state.activeIndex === index),
-  isSelected: (0, _store.createSelector)((state, itemValue) => {
+  },
+  open: state => state.open,
+  mounted: state => state.mounted,
+  forceMount: state => state.forceMount,
+  transitionStatus: state => state.transitionStatus,
+  openMethod: state => state.openMethod,
+  activeIndex: state => state.activeIndex,
+  selectedIndex: state => state.selectedIndex,
+  isActive: (state, index) => state.activeIndex === index,
+  isSelected: (state, itemValue) => {
     const comparer = state.isItemEqualToValue;
     const storeValue = state.value;
     if (state.multiple) {
@@ -53,17 +50,17 @@ const selectors = exports.selectors = {
     // value changes while the popup is open, where the index sync is deferred) must not
     // keep a previously selected item marked as selected.
     return (0, _itemEquality.compareItemEquality)(itemValue, storeValue, comparer);
-  }),
-  isSelectedByFocus: (0, _store.createSelector)((state, index) => {
+  },
+  isSelectedByFocus: (state, index) => {
     return state.selectedIndex === index;
-  }),
-  popupProps: (0, _store.createSelector)(state => state.popupProps),
-  triggerProps: (0, _store.createSelector)(state => state.triggerProps),
-  triggerElement: (0, _store.createSelector)(state => state.triggerElement),
-  positionerElement: (0, _store.createSelector)(state => state.positionerElement),
-  listElement: (0, _store.createSelector)(state => state.listElement),
-  popupSide: (0, _store.createSelector)(state => state.popupSide),
-  scrollUpArrowVisible: (0, _store.createSelector)(state => state.scrollUpArrowVisible),
-  scrollDownArrowVisible: (0, _store.createSelector)(state => state.scrollDownArrowVisible),
-  hasScrollArrows: (0, _store.createSelector)(state => state.hasScrollArrows)
+  },
+  popupProps: state => state.popupProps,
+  triggerProps: state => state.triggerProps,
+  triggerElement: state => state.triggerElement,
+  positionerElement: state => state.positionerElement,
+  listElement: state => state.listElement,
+  popupSide: state => state.popupSide,
+  scrollUpArrowVisible: state => state.scrollUpArrowVisible,
+  scrollDownArrowVisible: state => state.scrollDownArrowVisible,
+  hasScrollArrows: state => state.hasScrollArrows
 };

package/select/store.mjs

@@ -1,17 +1,14 @@
-import { createSelector } from '@base-ui/utils/store';
 import { compareItemEquality } from "../internals/itemEquality.mjs";
 import { hasNullItemLabel, stringifyAsValue } from "../internals/resolveValueLabel.mjs";
 export const selectors = {
-  id: createSelector(state => state.id),
-  labelId: createSelector(state => state.labelId),
-  modal: createSelector(state => state.modal),
-  multiple: createSelector(state => state.multiple),
-  items: createSelector(state => state.items),
-  itemToStringLabel: createSelector(state => state.itemToStringLabel),
-  itemToStringValue: createSelector(state => state.itemToStringValue),
-  isItemEqualToValue: createSelector(state => state.isItemEqualToValue),
-  value: createSelector(state => state.value),
-  hasSelectedValue: createSelector(state => {
+  id: state => state.id,
+  labelId: state => state.labelId,
+  modal: state => state.modal,
+  items: state => state.items,
+  itemToStringLabel: state => state.itemToStringLabel,
+  isItemEqualToValue: state => state.isItemEqualToValue,
+  value: state => state.value,
+  hasSelectedValue: state => {
     const {
       value,
       multiple,
@@ -24,19 +21,19 @@ export const selectors = {
       return value.length > 0;
     }
     return stringifyAsValue(value, itemToStringValue) !== '';
-  }),
-  hasNullItemLabel: createSelector((state, enabled) => {
+  },
+  hasNullItemLabel: (state, enabled) => {
     return enabled ? hasNullItemLabel(state.items) : false;
-  }),
-  open: createSelector(state => state.open),
-  mounted: createSelector(state => state.mounted),
-  forceMount: createSelector(state => state.forceMount),
-  transitionStatus: createSelector(state => state.transitionStatus),
-  openMethod: createSelector(state => state.openMethod),
-  activeIndex: createSelector(state => state.activeIndex),
-  selectedIndex: createSelector(state => state.selectedIndex),
-  isActive: createSelector((state, index) => state.activeIndex === index),
-  isSelected: createSelector((state, itemValue) => {
+  },
+  open: state => state.open,
+  mounted: state => state.mounted,
+  forceMount: state => state.forceMount,
+  transitionStatus: state => state.transitionStatus,
+  openMethod: state => state.openMethod,
+  activeIndex: state => state.activeIndex,
+  selectedIndex: state => state.selectedIndex,
+  isActive: (state, index) => state.activeIndex === index,
+  isSelected: (state, itemValue) => {
     const comparer = state.isItemEqualToValue;
     const storeValue = state.value;
     if (state.multiple) {
@@ -47,17 +44,17 @@ export const selectors = {
     // value changes while the popup is open, where the index sync is deferred) must not
     // keep a previously selected item marked as selected.
     return compareItemEquality(itemValue, storeValue, comparer);
-  }),
-  isSelectedByFocus: createSelector((state, index) => {
+  },
+  isSelectedByFocus: (state, index) => {
     return state.selectedIndex === index;
-  }),
-  popupProps: createSelector(state => state.popupProps),
-  triggerProps: createSelector(state => state.triggerProps),
-  triggerElement: createSelector(state => state.triggerElement),
-  positionerElement: createSelector(state => state.positionerElement),
-  listElement: createSelector(state => state.listElement),
-  popupSide: createSelector(state => state.popupSide),
-  scrollUpArrowVisible: createSelector(state => state.scrollUpArrowVisible),
-  scrollDownArrowVisible: createSelector(state => state.scrollDownArrowVisible),
-  hasScrollArrows: createSelector(state => state.hasScrollArrows)
+  },
+  popupProps: state => state.popupProps,
+  triggerProps: state => state.triggerProps,
+  triggerElement: state => state.triggerElement,
+  positionerElement: state => state.positionerElement,
+  listElement: state => state.listElement,
+  popupSide: state => state.popupSide,
+  scrollUpArrowVisible: state => state.scrollUpArrowVisible,
+  scrollDownArrowVisible: state => state.scrollDownArrowVisible,
+  hasScrollArrows: state => state.hasScrollArrows
 };

package/select/trigger/SelectTrigger.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.mjs";
 import type { FieldRootState } from "../../field/root/FieldRoot.mjs";
-import type { Side } from "../../utils/useAnchorPositioning.mjs";
+import type { Side } from "../../internals/useAnchorPositioning.mjs";
 /**
  * A button that opens the select popup.
  * Renders a `<button>` element.

package/select/trigger/SelectTrigger.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 import type { FieldRootState } from "../../field/root/FieldRoot.js";
-import type { Side } from "../../utils/useAnchorPositioning.js";
+import type { Side } from "../../internals/useAnchorPositioning.js";
 /**
  * A button that opens the select popup.
  * Renders a `<button>` element.

package/select/trigger/SelectTrigger.js

@@ -9,7 +9,6 @@ exports.SelectTrigger = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _owner = require("@base-ui/utils/owner");
 var _useTimeout = require("@base-ui/utils/useTimeout");
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _store = require("@base-ui/utils/store");
 var _SelectRootContext = require("../root/SelectRootContext");
@@ -27,7 +26,6 @@ var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetail
 var _reasons = require("../../internals/reasons");
 var _useLabelableId = require("../../internals/labelable-provider/useLabelableId");
 var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
-const BOUNDARY_OFFSET = 2;
 const SELECTED_DELAY = 400;
 const stateAttributesMapping = {
   ..._popupStateMapping.pressableTriggerOpenStateMapping,
@@ -100,9 +98,7 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
     disabled,
     native: nativeButton
   });
-  const setTriggerElement = (0, _useStableCallback.useStableCallback)(element => {
-    store.set('triggerElement', element);
-  });
+  const setTriggerElement = store.useStateSetter('triggerElement');
   const timeoutFocus = (0, _useTimeout.useTimeout)();
   const timeoutMouseDown = (0, _useTimeout.useTimeout)();
   const selectedDelayTimeout = (0, _useTimeout.useTimeout)();
@@ -131,7 +127,7 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
   const mergedProps = (0, _mergeProps.mergeProps)(triggerProps, {
     id,
     role: 'combobox',
-    'aria-expanded': open ? 'true' : 'false',
+    'aria-expanded': open,
     'aria-haspopup': 'listbox',
     'aria-controls': open ? listElement?.id ?? (0, _utils.getFloatingFocusElement)(positionerElement)?.id : undefined,
     'aria-labelledby': ariaLabelledBy,
@@ -180,8 +176,7 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
         if ((0, _utils.contains)(triggerRef.current, mouseUpTarget) || (0, _utils.contains)(positionerRef.current, mouseUpTarget)) {
           return;
         }
-        const bounds = (0, _getPseudoElementBounds.getPseudoElementBounds)(triggerRef.current);
-        if (mouseEvent.clientX >= bounds.left - BOUNDARY_OFFSET && mouseEvent.clientX <= bounds.right + BOUNDARY_OFFSET && mouseEvent.clientY >= bounds.top - BOUNDARY_OFFSET && mouseEvent.clientY <= bounds.bottom + BOUNDARY_OFFSET) {
+        if ((0, _getPseudoElementBounds.isMouseWithinBounds)(mouseEvent, triggerRef.current)) {
           return;
         }
         setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.cancelOpen, mouseEvent));

package/select/trigger/SelectTrigger.mjs

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { useTimeout } from '@base-ui/utils/useTimeout';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useStore } from '@base-ui/utils/store';
 import { useSelectRootContext } from "../root/SelectRootContext.mjs";
@@ -13,7 +12,7 @@ import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.
 import { fieldValidityMapping } from "../../internals/field-constants/constants.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { selectors } from "../store.mjs";
-import { getPseudoElementBounds } from "../../utils/getPseudoElementBounds.mjs";
+import { isMouseWithinBounds } from "../../utils/getPseudoElementBounds.mjs";
 import { contains, getFloatingFocusElement } from "../../floating-ui-react/utils.mjs";
 import { mergeProps } from "../../merge-props/index.mjs";
 import { useButton } from "../../internals/use-button/index.mjs";
@@ -21,7 +20,6 @@ import { createChangeEventDetails } from "../../internals/createBaseUIEventDetai
 import { REASONS } from "../../internals/reasons.mjs";
 import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.mjs";
 import { resolveAriaLabelledBy } from "../../utils/resolveAriaLabelledBy.mjs";
-const BOUNDARY_OFFSET = 2;
 const SELECTED_DELAY = 400;
 const stateAttributesMapping = {
   ...pressableTriggerOpenStateMapping,
@@ -94,9 +92,7 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
     disabled,
     native: nativeButton
   });
-  const setTriggerElement = useStableCallback(element => {
-    store.set('triggerElement', element);
-  });
+  const setTriggerElement = store.useStateSetter('triggerElement');
   const timeoutFocus = useTimeout();
   const timeoutMouseDown = useTimeout();
   const selectedDelayTimeout = useTimeout();
@@ -125,7 +121,7 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
   const mergedProps = mergeProps(triggerProps, {
     id,
     role: 'combobox',
-    'aria-expanded': open ? 'true' : 'false',
+    'aria-expanded': open,
     'aria-haspopup': 'listbox',
     'aria-controls': open ? listElement?.id ?? getFloatingFocusElement(positionerElement)?.id : undefined,
     'aria-labelledby': ariaLabelledBy,
@@ -174,8 +170,7 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
         if (contains(triggerRef.current, mouseUpTarget) || contains(positionerRef.current, mouseUpTarget)) {
           return;
         }
-        const bounds = getPseudoElementBounds(triggerRef.current);
-        if (mouseEvent.clientX >= bounds.left - BOUNDARY_OFFSET && mouseEvent.clientX <= bounds.right + BOUNDARY_OFFSET && mouseEvent.clientY >= bounds.top - BOUNDARY_OFFSET && mouseEvent.clientY <= bounds.bottom + BOUNDARY_OFFSET) {
+        if (isMouseWithinBounds(mouseEvent, triggerRef.current)) {
           return;
         }
         setOpen(false, createChangeEventDetails(REASONS.cancelOpen, mouseEvent));

package/select/value/SelectValue.js

@@ -50,7 +50,7 @@ const SelectValue = exports.SelectValue = /*#__PURE__*/React.forwardRef(function
     children = childrenProp(value);
   } else if (childrenProp != null) {
     children = childrenProp;
-  } else if (!hasSelectedValue && placeholder != null && !hasNullLabel) {
+  } else if (shouldCheckNullItemLabel && !hasNullLabel) {
     children = placeholder;
   } else if (Array.isArray(value)) {
     children = (0, _resolveValueLabel.resolveMultipleLabels)(value, items, itemToStringLabel);

package/select/value/SelectValue.mjs

@@ -44,7 +44,7 @@ export const SelectValue = /*#__PURE__*/React.forwardRef(function SelectValue(co
     children = childrenProp(value);
   } else if (childrenProp != null) {
     children = childrenProp;
-  } else if (!hasSelectedValue && placeholder != null && !hasNullLabel) {
+  } else if (shouldCheckNullItemLabel && !hasNullLabel) {
     children = placeholder;
   } else if (Array.isArray(value)) {
     children = resolveMultipleLabels(value, items, itemToStringLabel);