@base-ui/react 1.1.0 → 1.2.0

package/select/popup/SelectPopupDataAttributes.js

@@ -26,11 +26,11 @@ let SelectPopupDataAttributes = exports.SelectPopupDataAttributes = function (Se
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  SelectPopupDataAttributes["side"] = "data-side";
+  SelectPopupDataAttributes[SelectPopupDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  SelectPopupDataAttributes["align"] = "data-align";
+  SelectPopupDataAttributes[SelectPopupDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   return SelectPopupDataAttributes;
 }({});

package/select/portal/SelectPortalContext.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/positioner/SelectPositioner.d.ts

@@ -19,7 +19,7 @@ export interface SelectPositionerProps extends useAnchorPositioning.SharedParame
    * Whether the positioner overlaps the trigger so the selected item's text is aligned with the trigger's value text. This only applies to mouse input and is automatically disabled if there is not enough space.
    * @default true
    */
-  alignItemWithTrigger?: boolean;
+  alignItemWithTrigger?: boolean | undefined;
 }
 export declare namespace SelectPositioner {
   type State = SelectPositionerState;

package/select/positioner/SelectPositioner.js

@@ -20,6 +20,7 @@ var _SelectPositionerContext = require("./SelectPositionerContext");
 var _InternalBackdrop = require("../../utils/InternalBackdrop");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _constants = require("../../utils/constants");
+var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
 var _utils = require("../popup/utils");
 var _store2 = require("../store");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
@@ -75,6 +76,7 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
   const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
   const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
   const isItemEqualToValue = (0, _store.useStore)(store, _store2.selectors.isItemEqualToValue);
+  const transitionStatus = (0, _store.useStore)(store, _store2.selectors.transitionStatus);
   const scrollUpArrowRef = React.useRef(null);
   const scrollDownArrowRef = React.useRef(null);
   const [controlledAlignItemWithTrigger, setControlledAlignItemWithTrigger] = React.useState(alignItemWithTrigger);
@@ -127,12 +129,12 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
       }
     };
   }, [open, mounted, positionerStyles]);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side: renderedSide,
     align: positioning.align,
     anchorHidden: positioning.anchorHidden
-  }), [open, renderedSide, positioning.align, positioning.anchorHidden]);
+  };
   const setPositionerElement = (0, _useStableCallback.useStableCallback)(element => {
     store.set('positionerElement', element);
   });
@@ -140,7 +142,7 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
     ref: [forwardedRef, setPositionerElement],
     state,
     stateAttributesMapping: _popupStateMapping.popupStateMapping,
-    props: [defaultProps, elementProps]
+    props: [defaultProps, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps]
   });
   const prevMapSizeRef = React.useRef(0);
   const onMapChange = (0, _useStableCallback.useStableCallback)(map => {
@@ -157,11 +159,11 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
     }
     const eventDetails = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none);
     if (prevSize !== 0 && !store.state.multiple && value !== null) {
-      const valueIndex = (0, _itemEquality.findItemIndex)(valuesRef.current, value, isItemEqualToValue);
-      if (valueIndex === -1) {
-        const initial = initialValueRef.current;
-        const hasInitial = initial != null && (0, _itemEquality.itemIncludes)(valuesRef.current, initial, isItemEqualToValue);
-        const nextValue = hasInitial ? initial : null;
+      const selectedValueIndex = (0, _itemEquality.findItemIndex)(valuesRef.current, value, isItemEqualToValue);
+      if (selectedValueIndex === -1) {
+        const initialSelectedValue = initialValueRef.current;
+        const hasInitial = initialSelectedValue != null && (0, _itemEquality.findItemIndex)(valuesRef.current, initialSelectedValue, isItemEqualToValue) !== -1;
+        const nextValue = hasInitial ? initialSelectedValue : null;
         setValue(nextValue, eventDetails);
         if (nextValue === null) {
           store.set('selectedIndex', null);
@@ -170,8 +172,9 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
       }
     }
     if (prevSize !== 0 && store.state.multiple && Array.isArray(value)) {
-      const nextValue = value.filter(v => (0, _itemEquality.itemIncludes)(valuesRef.current, v, isItemEqualToValue));
-      if (nextValue.length !== value.length || nextValue.some(v => !(0, _itemEquality.itemIncludes)(value, v, isItemEqualToValue))) {
+      const hasVisibleItem = selectedItemValue => (0, _itemEquality.findItemIndex)(valuesRef.current, selectedItemValue, isItemEqualToValue) !== -1;
+      const nextValue = value.filter(selectedItemValue => hasVisibleItem(selectedItemValue));
+      if (nextValue.length !== value.length || nextValue.some(selectedItemValue => !(0, _itemEquality.selectedValueIncludes)(value, selectedItemValue, isItemEqualToValue))) {
         setValue(nextValue, eventDetails);
         if (nextValue.length === 0) {
           store.set('selectedIndex', null);

package/select/positioner/SelectPositionerContext.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/positioner/SelectPositionerDataAttributes.js

@@ -22,11 +22,11 @@ let SelectPositionerDataAttributes = exports.SelectPositionerDataAttributes = fu
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  SelectPositionerDataAttributes["side"] = "data-side";
+  SelectPositionerDataAttributes[SelectPositionerDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  SelectPositionerDataAttributes["align"] = "data-align";
+  SelectPositionerDataAttributes[SelectPositionerDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   return SelectPositionerDataAttributes;
 }({});

package/select/root/SelectRoot.d.ts

@@ -14,74 +14,79 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
   /**
    * A ref to access the hidden input element.
    */
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
   /**
    * Identifies the field when a form is submitted.
    */
-  name?: string;
+  name?: string | undefined;
+  /**
+   * Provides a hint to the browser for autofill.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete
+   */
+  autoComplete?: string | undefined;
   /**
    * The id of the Select.
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * Whether the user must choose a value before submitting a form.
    * @default false
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * Whether the user should be unable to choose a different option from the select popup.
    * @default false
    */
-  readOnly?: boolean;
+  readOnly?: boolean | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Whether multiple items can be selected.
    * @default false
    */
-  multiple?: Multiple;
+  multiple?: Multiple | undefined;
   /**
    * Whether moving the pointer over items should highlight them.
    * Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
    * @default true
    */
-  highlightItemOnHover?: boolean;
+  highlightItemOnHover?: boolean | undefined;
   /**
    * Whether the select popup is initially open.
    *
    * To render a controlled select popup, use the `open` prop instead.
    * @default false
    */
-  defaultOpen?: boolean;
+  defaultOpen?: boolean | undefined;
   /**
    * Event handler called when the select popup is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: SelectRootChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: SelectRootChangeEventDetails) => void) | undefined;
   /**
    * Event handler called after any animations complete when the select popup is opened or closed.
    */
-  onOpenChangeComplete?: (open: boolean) => void;
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
   /**
    * Whether the select popup is currently open.
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Determines if the select enters a modal state when open.
    * - `true`: user interaction is limited to the select: document page scroll is locked and pointer interactions on outside elements are disabled.
    * - `false`: user interaction with the rest of the document is allowed.
    * @default true
    */
-  modal?: boolean;
+  modal?: boolean | undefined;
   /**
    * A ref to imperative actions.
    * - `unmount`: When specified, the select will not be unmounted when closed.
    * Instead, the `unmount` function must be called to unmount the select manually.
    * Useful when the select's animation is controlled by an external library.
    */
-  actionsRef?: React.RefObject<SelectRootActions | null>;
+  actionsRef?: React.RefObject<SelectRootActions | null> | undefined;
   /**
    * Data structure of the items rendered in the select popup.
    * When specified, `<Select.Value>` renders the label of the selected item instead of the raw value.
@@ -96,39 +101,39 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
    * <Select.Root items={items} />
    * ```
    */
-  items?: Record<string, React.ReactNode> | ReadonlyArray<{
+  items?: (Record<string, React.ReactNode> | ReadonlyArray<{
     label: React.ReactNode;
     value: any;
-  }>;
+  }>) | undefined;
   /**
    * When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for display in the trigger.
    * If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.
    */
-  itemToStringLabel?: (itemValue: Value) => string;
+  itemToStringLabel?: ((itemValue: Value) => string) | undefined;
   /**
    * When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for form submission.
    * If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.
    */
-  itemToStringValue?: (itemValue: Value) => string;
+  itemToStringValue?: ((itemValue: Value) => string) | undefined;
   /**
    * Custom comparison logic used to determine if a select item value matches the current selected value. Useful when item values are objects without matching referentially.
    * Defaults to `Object.is` comparison.
    */
-  isItemEqualToValue?: (itemValue: Value, value: Value) => boolean;
+  isItemEqualToValue?: ((itemValue: Value, value: Value) => boolean) | undefined;
   /**
    * The uncontrolled value of the select when it’s initially rendered.
    *
    * To render a controlled select, use the `value` prop instead.
    */
-  defaultValue?: SelectValueType<Value, Multiple> | null;
+  defaultValue?: (SelectValueType<Value, Multiple> | null) | undefined;
   /**
    * The value of the select. Use when controlled.
    */
-  value?: SelectValueType<Value, Multiple> | null;
+  value?: (SelectValueType<Value, Multiple> | null) | undefined;
   /**
    * Event handler called when the value of the select changes.
    */
-  onValueChange?: (value: SelectValueType<Value, Multiple> | (Multiple extends true ? never : null), eventDetails: SelectRootChangeEventDetails) => void;
+  onValueChange?: ((value: SelectValueType<Value, Multiple> | (Multiple extends true ? never : null), eventDetails: SelectRootChangeEventDetails) => void) | undefined;
 }
 export interface SelectRootState {}
 export interface SelectRootActions {

package/select/root/SelectRoot.js

@@ -50,6 +50,7 @@ function SelectRoot(props) {
     defaultOpen = false,
     onOpenChange,
     name: nameProp,
+    autoComplete,
     disabled: disabledProp = false,
     readOnly = false,
     required = false,
@@ -459,6 +460,7 @@ function SelectRoot(props) {
           }
         }),
         name: multiple ? undefined : name,
+        autoComplete: autoComplete,
         value: serializedValue,
         disabled: disabled,
         required: required && !hasMultipleSelection,

package/select/root/SelectRootContext.d.ts

@@ -14,30 +14,30 @@ export interface SelectRootContext {
   highlightItemOnHover: boolean;
   setValue: (nextValue: any, eventDetails: SelectRoot.ChangeEventDetails) => void;
   setOpen: (open: boolean, eventDetails: SelectRoot.ChangeEventDetails) => void;
-  listRef: React.MutableRefObject<Array<HTMLElement | null>>;
-  popupRef: React.MutableRefObject<HTMLDivElement | null>;
-  scrollHandlerRef: React.MutableRefObject<((el: HTMLDivElement) => void) | null>;
+  listRef: React.RefObject<Array<HTMLElement | null>>;
+  popupRef: React.RefObject<HTMLDivElement | null>;
+  scrollHandlerRef: React.RefObject<((el: HTMLDivElement) => void) | null>;
   handleScrollArrowVisibility: () => void;
   scrollArrowsMountedCountRef: React.RefObject<number>;
   getItemProps: (props?: HTMLProps & {
-    active?: boolean;
-    selected?: boolean;
+    active?: boolean | undefined;
+    selected?: boolean | undefined;
   }) => Record<string, unknown>;
   events: FloatingEvents;
-  valueRef: React.MutableRefObject<HTMLSpanElement | null>;
-  valuesRef: React.MutableRefObject<Array<any>>;
-  labelsRef: React.MutableRefObject<Array<string | null>>;
-  typingRef: React.MutableRefObject<boolean>;
-  selectionRef: React.MutableRefObject<{
+  valueRef: React.RefObject<HTMLSpanElement | null>;
+  valuesRef: React.RefObject<Array<any>>;
+  labelsRef: React.RefObject<Array<string | null>>;
+  typingRef: React.RefObject<boolean>;
+  selectionRef: React.RefObject<{
     allowUnselectedMouseUp: boolean;
     allowSelectedMouseUp: boolean;
   }>;
-  selectedItemTextRef: React.MutableRefObject<HTMLSpanElement | null>;
+  selectedItemTextRef: React.RefObject<HTMLSpanElement | null>;
   validation: UseFieldValidationReturnValue;
-  onOpenChangeComplete?: (open: boolean) => void;
-  keyboardActiveRef: React.MutableRefObject<boolean>;
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
+  keyboardActiveRef: React.RefObject<boolean>;
   alignItemWithTriggerActiveRef: React.RefObject<boolean>;
-  initialValueRef: React.MutableRefObject<any>;
+  initialValueRef: React.RefObject<any>;
 }
 export declare const SelectRootContext: React.Context<SelectRootContext | null>;
 export declare const SelectFloatingContext: React.Context<import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore | null>;

package/select/root/SelectRootContext.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/scroll-arrow/SelectScrollArrow.d.ts

@@ -18,7 +18,7 @@ export interface SelectScrollArrowProps extends BaseUIComponentProps<'div', Sele
    * Whether to keep the HTML element in the DOM while the select popup is not scrollable.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace SelectScrollArrow {
   type State = SelectScrollArrowState;

package/select/scroll-arrow/SelectScrollArrow.js

@@ -72,12 +72,12 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
       }
     }
   });
-  const state = React.useMemo(() => ({
+  const state = {
     direction,
     visible,
     side,
     transitionStatus
-  }), [direction, visible, side, transitionStatus]);
+  };
   const defaultProps = {
     'aria-hidden': true,
     children: direction === 'up' ? '▲' : '▼',

package/select/scroll-down-arrow/SelectScrollDownArrow.d.ts

@@ -13,7 +13,7 @@ export interface SelectScrollDownArrowProps extends BaseUIComponentProps<'div',
    * Whether to keep the HTML element in the DOM while the select popup is not scrollable.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace SelectScrollDownArrow {
   type State = SelectScrollDownArrowState;

package/select/scroll-down-arrow/SelectScrollDownArrowDataAttributes.js

@@ -27,6 +27,6 @@ let SelectScrollDownArrowDataAttributes = exports.SelectScrollDownArrowDataAttri
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  SelectScrollDownArrowDataAttributes["side"] = "data-side";
+  SelectScrollDownArrowDataAttributes[SelectScrollDownArrowDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   return SelectScrollDownArrowDataAttributes;
 }({});

package/select/scroll-up-arrow/SelectScrollUpArrow.d.ts

@@ -13,7 +13,7 @@ export interface SelectScrollUpArrowProps extends BaseUIComponentProps<'div', Se
    * Whether to keep the HTML element in the DOM while the select popup is not scrollable.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace SelectScrollUpArrow {
   type State = SelectScrollUpArrowState;

package/select/scroll-up-arrow/SelectScrollUpArrowDataAttributes.js

@@ -27,6 +27,6 @@ let SelectScrollUpArrowDataAttributes = exports.SelectScrollUpArrowDataAttribute
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  SelectScrollUpArrowDataAttributes["side"] = "data-side";
+  SelectScrollUpArrowDataAttributes[SelectScrollUpArrowDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   return SelectScrollUpArrowDataAttributes;
 }({});

package/select/store.d.ts

@@ -12,7 +12,7 @@ export type State = {
   }> | undefined;
   itemToStringLabel: ((item: any) => string) | undefined;
   itemToStringValue: ((item: any) => string) | undefined;
-  isItemEqualToValue: (item: any, value: any) => boolean;
+  isItemEqualToValue: (itemValue: any, selectedValue: any) => boolean;
   value: any;
   open: boolean;
   mounted: boolean;
@@ -41,7 +41,7 @@ export declare const selectors: {
   }[] | undefined;
   itemToStringLabel: (state: State) => ((item: any) => string) | undefined;
   itemToStringValue: (state: State) => ((item: any) => string) | undefined;
-  isItemEqualToValue: (state: State) => (item: any, value: any) => boolean;
+  isItemEqualToValue: (state: State) => (itemValue: any, selectedValue: any) => boolean;
   value: (state: State) => any;
   hasSelectedValue: (state: State) => boolean;
   hasNullItemLabel: (state: State, enabled: boolean) => boolean;
@@ -53,7 +53,7 @@ export declare const selectors: {
   activeIndex: (state: State) => number | null;
   selectedIndex: (state: State) => number | null;
   isActive: (state: State, index: number) => boolean;
-  isSelected: (state: State, index: number, candidate: any) => boolean;
+  isSelected: (state: State, index: number, itemValue: any) => boolean;
   isSelectedByFocus: (state: State, index: number) => boolean;
   popupProps: (state: State) => HTMLProps;
   triggerProps: (state: State) => HTMLProps;

package/select/store.js

@@ -41,11 +41,11 @@ const selectors = exports.selectors = {
   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, index, candidate) => {
+  isSelected: (0, _store.createSelector)((state, index, itemValue) => {
     const comparer = state.isItemEqualToValue;
     const storeValue = state.value;
     if (state.multiple) {
-      return Array.isArray(storeValue) && storeValue.some(item => (0, _itemEquality.compareItemEquality)(item, candidate, comparer));
+      return Array.isArray(storeValue) && storeValue.some(selectedItem => (0, _itemEquality.compareItemEquality)(itemValue, selectedItem, comparer));
     }
 
     // `selectedIndex` is only updated after the items mount for the first time,
@@ -53,7 +53,7 @@ const selectors = exports.selectors = {
     if (state.selectedIndex === index && state.selectedIndex !== null) {
       return true;
     }
-    return (0, _itemEquality.compareItemEquality)(storeValue, candidate, comparer);
+    return (0, _itemEquality.compareItemEquality)(itemValue, storeValue, comparer);
   }),
   isSelectedByFocus: (0, _store.createSelector)((state, index) => {
     return state.selectedIndex === index;

package/select/trigger/SelectTrigger.d.ts

@@ -29,7 +29,7 @@ export interface SelectTriggerState extends FieldRoot.State {
 export interface SelectTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', SelectTrigger.State> {
   children?: React.ReactNode;
   /** Whether the component should ignore user interaction. */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export declare namespace SelectTrigger {
   type State = SelectTriggerState;

package/select/trigger/SelectTrigger.js

@@ -221,14 +221,14 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
   // ensure nested useButton does not overwrite the combobox role:
   // <Toolbar.Button render={<Select.Trigger />} />
   props.role = 'combobox';
-  const state = React.useMemo(() => ({
+  const state = {
     ...fieldState,
     open,
     disabled,
     value,
     readOnly,
     placeholder: !hasSelectedValue
-  }), [fieldState, open, disabled, value, readOnly, hasSelectedValue]);
+  };
   return (0, _useRenderElement.useRenderElement)('button', componentProps, {
     ref: [forwardedRef, triggerRef],
     state,

package/select/value/SelectValue.d.ts

@@ -12,6 +12,10 @@ export interface SelectValueState {
    * The value of the currently selected item.
    */
   value: any;
+  /**
+   * Whether the placeholder is being displayed.
+   */
+  placeholder: boolean;
 }
 export interface SelectValueProps extends Omit<BaseUIComponentProps<'span', SelectValue.State>, 'children'> {
   /**

package/select/value/SelectValue.js

@@ -40,10 +40,10 @@ const SelectValue = exports.SelectValue = /*#__PURE__*/React.forwardRef(function
   const hasSelectedValue = (0, _store.useStore)(store, _store2.selectors.hasSelectedValue);
   const shouldCheckNullItemLabel = !hasSelectedValue && placeholder != null && childrenProp == null;
   const hasNullLabel = (0, _store.useStore)(store, _store2.selectors.hasNullItemLabel, shouldCheckNullItemLabel);
-  const state = React.useMemo(() => ({
+  const state = {
     value,
     placeholder: !hasSelectedValue
-  }), [value, hasSelectedValue]);
+  };
   let children = null;
   if (typeof childrenProp === 'function') {
     children = childrenProp(value);

package/separator/Separator.d.ts

@@ -12,7 +12,7 @@ export interface SeparatorProps extends BaseUIComponentProps<'div', Separator.St
    * The orientation of the separator.
    * @default 'horizontal'
    */
-  orientation?: Orientation;
+  orientation?: Orientation | undefined;
 }
 export interface SeparatorState {
   /**

package/separator/Separator.js

@@ -21,9 +21,9 @@ const Separator = exports.Separator = /*#__PURE__*/React.forwardRef(function Sep
     orientation = 'horizontal',
     ...elementProps
   } = componentProps;
-  const state = React.useMemo(() => ({
+  const state = {
     orientation
-  }), [orientation]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: forwardedRef,