@base-ui/react 1.7.0 → 1.8.0

package/select/positioner/SelectPositionerCssVars.mjs

@@ -1,28 +1,25 @@
-export let SelectPositionerCssVars = /*#__PURE__*/function (SelectPositionerCssVars) {
-  /**
-   * The available width between the trigger and the edge of the viewport.
-   * @type {number}
-   */
-  SelectPositionerCssVars["availableWidth"] = "--available-width";
-  /**
-   * The available height between the trigger and the edge of the viewport.
-   * @type {number}
-   */
-  SelectPositionerCssVars["availableHeight"] = "--available-height";
-  /**
-   * The anchor's width.
-   * @type {number}
-   */
-  SelectPositionerCssVars["anchorWidth"] = "--anchor-width";
-  /**
-   * The anchor's height.
-   * @type {number}
-   */
-  SelectPositionerCssVars["anchorHeight"] = "--anchor-height";
-  /**
-   * The coordinates that this element is anchored to. Used for animations and transitions.
-   * @type {string}
-   */
-  SelectPositionerCssVars["transformOrigin"] = "--transform-origin";
-  return SelectPositionerCssVars;
-}({});
+/**
+ * The available width between the trigger and the edge of the viewport.
+ * @type {number}
+ */
+export const availableWidth = '--available-width';
+/**
+ * The available height between the trigger and the edge of the viewport.
+ * @type {number}
+ */
+export const availableHeight = '--available-height';
+/**
+ * The anchor's width.
+ * @type {number}
+ */
+export const anchorWidth = '--anchor-width';
+/**
+ * The anchor's height.
+ * @type {number}
+ */
+export const anchorHeight = '--anchor-height';
+/**
+ * The coordinates that this element is anchored to. Used for animations and transitions.
+ * @type {string}
+ */
+export const transformOrigin = '--transform-origin';

package/select/positioner/SelectPositionerDataAttributes.d.mts

@@ -1,24 +1,22 @@
-export declare enum SelectPositionerDataAttributes {
-  /**
-   * Present when the select popup is open.
-   */
-  open = "data-open",
-  /**
-   * Present when the select popup is closed.
-   */
-  closed = "data-closed",
-  /**
-   * Present when the anchor is hidden.
-   */
-  anchorHidden = "data-anchor-hidden",
-  /**
-   * Indicates which side the popup is positioned relative to the trigger.
-   * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
-   */
-  side = "data-side",
-  /**
-   * Indicates how the popup is aligned relative to specified side.
-   * @type {'start' | 'center' | 'end'}
-   */
-  align = "data-align",
-}
+/**
+ * Present when the select popup is open.
+ */
+export declare const open = "data-open";
+/**
+ * Present when the select popup is closed.
+ */
+export declare const closed = "data-closed";
+/**
+ * Present when the anchor is hidden.
+ */
+export declare const anchorHidden = "data-anchor-hidden";
+/**
+ * Indicates which side the popup is positioned relative to the trigger.
+ * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+ */
+export declare const side = "data-side";
+/**
+ * Indicates how the popup is aligned relative to specified side.
+ * @type {'start' | 'center' | 'end'}
+ */
+export declare const align = "data-align";

package/select/positioner/SelectPositionerDataAttributes.d.ts

@@ -1,24 +1,22 @@
-export declare enum SelectPositionerDataAttributes {
-  /**
-   * Present when the select popup is open.
-   */
-  open = "data-open",
-  /**
-   * Present when the select popup is closed.
-   */
-  closed = "data-closed",
-  /**
-   * Present when the anchor is hidden.
-   */
-  anchorHidden = "data-anchor-hidden",
-  /**
-   * Indicates which side the popup is positioned relative to the trigger.
-   * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
-   */
-  side = "data-side",
-  /**
-   * Indicates how the popup is aligned relative to specified side.
-   * @type {'start' | 'center' | 'end'}
-   */
-  align = "data-align",
-}
+/**
+ * Present when the select popup is open.
+ */
+export declare const open = "data-open";
+/**
+ * Present when the select popup is closed.
+ */
+export declare const closed = "data-closed";
+/**
+ * Present when the anchor is hidden.
+ */
+export declare const anchorHidden = "data-anchor-hidden";
+/**
+ * Indicates which side the popup is positioned relative to the trigger.
+ * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+ */
+export declare const side = "data-side";
+/**
+ * Indicates how the popup is aligned relative to specified side.
+ * @type {'start' | 'center' | 'end'}
+ */
+export declare const align = "data-align";

package/select/positioner/SelectPositionerDataAttributes.js

@@ -3,30 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SelectPositionerDataAttributes = void 0;
+exports.side = exports.open = exports.closed = exports.anchorHidden = exports.align = void 0;
 var _popupStateMapping = require("../../utils/popupStateMapping");
-let SelectPositionerDataAttributes = exports.SelectPositionerDataAttributes = function (SelectPositionerDataAttributes) {
-  /**
-   * Present when the select popup is open.
-   */
-  SelectPositionerDataAttributes[SelectPositionerDataAttributes["open"] = _popupStateMapping.CommonPopupDataAttributes.open] = "open";
-  /**
-   * Present when the select popup is closed.
-   */
-  SelectPositionerDataAttributes[SelectPositionerDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
-  /**
-   * Present when the anchor is hidden.
-   */
-  SelectPositionerDataAttributes[SelectPositionerDataAttributes["anchorHidden"] = _popupStateMapping.CommonPopupDataAttributes.anchorHidden] = "anchorHidden";
-  /**
-   * Indicates which side the popup is positioned relative to the trigger.
-   * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
-   */
-  SelectPositionerDataAttributes[SelectPositionerDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
-  /**
-   * Indicates how the popup is aligned relative to specified side.
-   * @type {'start' | 'center' | 'end'}
-   */
-  SelectPositionerDataAttributes[SelectPositionerDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
-  return SelectPositionerDataAttributes;
-}({});
+/**
+ * Present when the select popup is open.
+ */
+const open = exports.open = _popupStateMapping.CommonPopupDataAttributes.open;
+/**
+ * Present when the select popup is closed.
+ */
+const closed = exports.closed = _popupStateMapping.CommonPopupDataAttributes.closed;
+/**
+ * Present when the anchor is hidden.
+ */
+const anchorHidden = exports.anchorHidden = _popupStateMapping.CommonPopupDataAttributes.anchorHidden;
+/**
+ * Indicates which side the popup is positioned relative to the trigger.
+ * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+ */
+const side = exports.side = _popupStateMapping.CommonPopupDataAttributes.side;
+/**
+ * Indicates how the popup is aligned relative to specified side.
+ * @type {'start' | 'center' | 'end'}
+ */
+const align = exports.align = _popupStateMapping.CommonPopupDataAttributes.align;

package/select/positioner/SelectPositionerDataAttributes.mjs

@@ -1,26 +1,24 @@
 import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.mjs";
-export let SelectPositionerDataAttributes = function (SelectPositionerDataAttributes) {
-  /**
-   * Present when the select popup is open.
-   */
-  SelectPositionerDataAttributes[SelectPositionerDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
-  /**
-   * Present when the select popup is closed.
-   */
-  SelectPositionerDataAttributes[SelectPositionerDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
-  /**
-   * Present when the anchor is hidden.
-   */
-  SelectPositionerDataAttributes[SelectPositionerDataAttributes["anchorHidden"] = CommonPopupDataAttributes.anchorHidden] = "anchorHidden";
-  /**
-   * Indicates which side the popup is positioned relative to the trigger.
-   * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
-   */
-  SelectPositionerDataAttributes[SelectPositionerDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
-  /**
-   * Indicates how the popup is aligned relative to specified side.
-   * @type {'start' | 'center' | 'end'}
-   */
-  SelectPositionerDataAttributes[SelectPositionerDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
-  return SelectPositionerDataAttributes;
-}({});
+
+/**
+ * Present when the select popup is open.
+ */
+export const open = CommonPopupDataAttributes.open;
+/**
+ * Present when the select popup is closed.
+ */
+export const closed = CommonPopupDataAttributes.closed;
+/**
+ * Present when the anchor is hidden.
+ */
+export const anchorHidden = CommonPopupDataAttributes.anchorHidden;
+/**
+ * Indicates which side the popup is positioned relative to the trigger.
+ * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+ */
+export const side = CommonPopupDataAttributes.side;
+/**
+ * Indicates how the popup is aligned relative to specified side.
+ * @type {'start' | 'center' | 'end'}
+ */
+export const align = CommonPopupDataAttributes.align;

package/select/root/SelectRoot.js

@@ -32,12 +32,12 @@ var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
 var _FormContext = require("../../internals/form-context/FormContext");
 var _resolveValueLabel = require("../../internals/resolveValueLabel");
 var _itemEquality = require("../../internals/itemEquality");
-var _areArraysEqual = require("../../internals/areArraysEqual");
 var _useValueChanged = require("../../internals/useValueChanged");
 var _useOpenInteractionType = require("../../utils/useOpenInteractionType");
 var _scrollEdges = require("../../utils/scrollEdges");
 var _popups = require("../../utils/popups");
 var _mergeProps = require("../../merge-props");
+var _noop = require("../../internals/noop");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups all parts of the select.
@@ -119,6 +119,7 @@ function SelectRoot(props) {
     dragY: 0
   });
   const alignItemWithTriggerActiveRef = React.useRef(false);
+  const initialValueRef = React.useRef(value);
   const {
     mounted,
     setMounted,
@@ -145,8 +146,8 @@ function SelectRoot(props) {
     openMethod: null,
     activeIndex: null,
     selectedIndex: null,
-    popupProps: {},
-    triggerProps: {},
+    popupProps: _empty.EMPTY_OBJECT,
+    triggerProps: _empty.EMPTY_OBJECT,
     triggerElement: null,
     positionerElement: null,
     listElement: null,
@@ -154,11 +155,29 @@ function SelectRoot(props) {
     scrollUpArrowVisible: false,
     scrollDownArrowVisible: false,
     hasScrollArrows: false
-  })).current;
-  const activeIndex = (0, _store.useStore)(store, _store2.selectors.activeIndex);
-  const selectedIndex = (0, _store.useStore)(store, _store2.selectors.selectedIndex);
-  const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
-  const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
+  }, {
+    setValue: _noop.NOOP,
+    setOpen: _noop.NOOP,
+    handleScrollArrowVisibility: _noop.NOOP,
+    onOpenChangeComplete: _noop.NOOP,
+    listRef,
+    popupRef,
+    scrollHandlerRef,
+    scrollArrowsMountedCountRef,
+    valueRef,
+    valuesRef,
+    labelsRef,
+    typingRef,
+    selectionRef,
+    firstItemTextRef,
+    selectedItemTextRef,
+    alignItemWithTriggerActiveRef,
+    initialValueRef
+  }, _store2.selectors)).current;
+  const activeIndex = store.useState('activeIndex');
+  const selectedIndex = store.useState('selectedIndex');
+  const triggerElement = store.useState('triggerElement');
+  const positionerElement = store.useState('positionerElement');
   const previousOpenMethod = (0, _usePreviousValue.usePreviousValue)(openMethod);
   const renderedOpenMethod = openMethod ?? previousOpenMethod;
   const serializedValue = React.useMemo(() => {
@@ -179,7 +198,7 @@ function SelectRoot(props) {
   const controlRef = (0, _useValueAsRef.useValueAsRef)(triggerElement);
   const getStringifiedValueForForm = (0, _useStableCallback.useStableCallback)(() => fieldStringValue);
   (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, generatedId, value, getStringifiedValueForForm, !disabled, nameProp);
-  const initialValueRef = React.useRef(value);
+
   // Mirror the `hasSelectedValue` store selector so the Field's filled state agrees with the
   // trigger/value placeholder semantics (a value serializing to `''` counts as empty).
   const hasSelectedValue = multiple ? Array.isArray(value) && value.length > 0 : value != null && serializedValue !== '';
@@ -187,15 +206,7 @@ function SelectRoot(props) {
     setFilled(hasSelectedValue);
   }, [hasSelectedValue, setFilled]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(function syncSelectedIndex() {
-    let target = value;
-    let empty = false;
-    if (multiple) {
-      const currentValue = Array.isArray(value) ? value : [];
-      empty = currentValue.length === 0;
-      target = currentValue[currentValue.length - 1];
-    }
-    const index = empty ? -1 : (0, _itemEquality.findItemIndex)(valuesRef.current, target, isItemEqualToValue);
-    const nextIndex = index === -1 ? null : index;
+    const nextIndex = (0, _itemEquality.findSelectionIndex)(valuesRef.current, value, isItemEqualToValue, multiple);
     if (nextIndex === null) {
       selectedItemTextRef.current = null;
     }
@@ -204,16 +215,9 @@ function SelectRoot(props) {
     }
     store.set('selectedIndex', nextIndex);
   }, [multiple, open, value, isItemEqualToValue, store]);
-  function isSelectedValueDirty(currentValue) {
-    const initialValue = validityData.initialValue;
-    if (Array.isArray(currentValue) && Array.isArray(initialValue)) {
-      return !(0, _areArraysEqual.areArraysEqual)(currentValue, initialValue, (itemValue, initialItemValue) => (0, _itemEquality.compareItemEquality)(itemValue, initialItemValue, isItemEqualToValue));
-    }
-    return currentValue !== initialValue;
-  }
   (0, _useValueChanged.useValueChanged)(value, () => {
     clearErrors(name);
-    setDirty(isSelectedValueDirty(value));
+    setDirty((0, _itemEquality.isSelectedValueDirty)(value, validityData.initialValue, isItemEqualToValue));
     validation.change(value);
   });
   const setOpen = (0, _useStableCallback.useStableCallback)((nextOpen, eventDetails) => {
@@ -276,13 +280,17 @@ function SelectRoot(props) {
       floating: positionerElement
     }
   });
+
+  // `readOnly` locks the value, not the interaction: the popup can be opened and browsed so the
+  // user can see the available options and which one is selected. Committing a value is blocked
+  // separately in `SelectItem` and in the hidden input's autofill handler.
   const click = (0, _floatingUiReact.useClick)(floatingContext, {
-    enabled: !readOnly && !disabled,
+    enabled: !disabled,
     event: 'mousedown'
   });
   const dismiss = (0, _floatingUiReact.useDismiss)(floatingContext);
   const listNavigation = (0, _floatingUiReact.useListNavigation)(floatingContext, {
-    enabled: !readOnly && !disabled,
+    enabled: !disabled,
     listRef,
     activeIndex,
     selectedIndex,
@@ -297,7 +305,9 @@ function SelectRoot(props) {
     focusItemOnHover: highlightItemOnHover
   });
   const typeahead = (0, _floatingUiReact.useTypeahead)(floatingContext, {
-    enabled: !readOnly && !disabled && (open || !multiple),
+    // Typeahead on an open popup only moves the highlight, so it remains available while
+    // `readOnly`. The closed-trigger variant commits a value instead, so it doesn't.
+    enabled: !disabled && (open || !readOnly && !multiple),
     listRef: labelsRef,
     activeIndex,
     selectedIndex,
@@ -323,6 +333,13 @@ function SelectRoot(props) {
   const mergedTriggerProps = React.useMemo(() => (0, _mergeProps.mergeProps)(typeahead.reference, listNavigation.reference, dismiss.reference, click.reference, interactionTypeProps), [click.reference, typeahead.reference, listNavigation.reference, dismiss.reference, interactionTypeProps]);
   const popupProps = React.useMemo(() => (0, _mergeProps.mergeProps)(_popups.FOCUSABLE_POPUP_PROPS, typeahead.floating, listNavigation.floating, dismiss.floating), [typeahead.floating, listNavigation.floating, dismiss.floating]);
   const itemProps = listNavigation.item ?? _empty.EMPTY_OBJECT;
+  store.useContextCallback('setValue', setValue);
+  store.useContextCallback('setOpen', setOpen);
+  store.useContextCallback('handleScrollArrowVisibility', handleScrollArrowVisibility);
+  store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
+
+  // The prop bags must be in the store before the parts render. `useSyncedValues` writes in a
+  // layout effect, after all descendants have rendered.
   (0, _useOnFirstRender.useOnFirstRender)(() => {
     store.update({
       popupProps,
@@ -345,34 +362,14 @@ function SelectRoot(props) {
     isItemEqualToValue,
     openMethod: renderedOpenMethod
   });
-  const contextValue = React.useMemo(() => ({
-    store,
-    floatingContext,
-    required,
+  const rootPropsContextValue = React.useMemo(() => ({
     disabled,
     readOnly,
+    required,
     multiple,
     highlightItemOnHover,
-    setValue,
-    setOpen,
-    listRef,
-    popupRef,
-    scrollHandlerRef,
-    handleScrollArrowVisibility,
-    scrollArrowsMountedCountRef,
-    itemProps,
-    valueRef,
-    valuesRef,
-    labelsRef,
-    typingRef,
-    selectionRef,
-    firstItemTextRef,
-    selectedItemTextRef,
-    validation,
-    onOpenChangeComplete,
-    alignItemWithTriggerActiveRef,
-    initialValueRef
-  }), [store, floatingContext, required, disabled, readOnly, multiple, highlightItemOnHover, setValue, setOpen, itemProps, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
+    itemProps
+  }), [disabled, readOnly, required, multiple, highlightItemOnHover, itemProps]);
   const ref = (0, _useMergedRefs.useMergedRefs)(inputRef, validation.inputRef);
   const hiddenInputName = multiple ? undefined : name;
   const hiddenInputs = React.useMemo(() => {
@@ -391,8 +388,14 @@ function SelectRoot(props) {
     });
   }, [multiple, value, form, name, itemToStringValue, disabled]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SelectRootContext.SelectRootContext.Provider, {
-    value: contextValue,
-    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+    value: store,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectRootContext.SelectRootPropsContext.Provider, {
+      value: rootPropsContextValue,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectRootContext.SelectFloatingContext.Provider, {
+        value: floatingContext,
+        children: children
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       ...validation.getValidationProps(disabled, {
         onFocus() {
           // Move focus to the trigger element when the hidden input is focused.
@@ -416,7 +419,8 @@ function SelectRoot(props) {
             }
 
             // Preserve the original serialized matching, then fall back to rendered text,
-            // which browsers can autofill for primitive values like `value="US">United States`.
+            // which browsers can autofill for primitive values like
+            // `value="US">United States`.
             const nextValueLower = nextValue.toLowerCase();
             let matchingIndex = valuesRef.current.findIndex(candidate => (0, _resolveValueLabel.stringifyAsValue)(candidate, itemToStringValue).toLowerCase() === nextValueLower || (0, _resolveValueLabel.stringifyAsLabel)(candidate, itemToStringLabel).toLowerCase() === nextValueLower);
             if (matchingIndex === -1) {