@base-ui/react 1.0.0 → 1.2.0

package/esm/combobox/item/ComboboxItemContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const ComboboxItemContext = /*#__PURE__*/React.createContext(undefined);

package/esm/combobox/item-indicator/ComboboxItemIndicator.d.ts

@@ -5,14 +5,14 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Indicates whether the item is selected.
  * Renders a `<span>` element.
  */
-export declare const ComboboxItemIndicator: React.ForwardRefExoticComponent<ComboboxItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const ComboboxItemIndicator: React.ForwardRefExoticComponent<Omit<ComboboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface ComboboxItemIndicatorProps extends BaseUIComponentProps<'span', ComboboxItemIndicator.State> {
   children?: React.ReactNode;
   /**
    * Whether to keep the HTML element in the DOM when the item is not selected.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export interface ComboboxItemIndicatorState {
   selected: boolean;

package/esm/combobox/item-indicator/ComboboxItemIndicator.js

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

package/esm/combobox/list/ComboboxList.d.ts

@@ -4,7 +4,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * A list container for the items.
  * Renders a `<div>` element.
  */
-export declare const ComboboxList: React.ForwardRefExoticComponent<ComboboxListProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxList: React.ForwardRefExoticComponent<Omit<ComboboxListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxListState {
   /**
    * Whether the list is empty.

package/esm/combobox/list/ComboboxList.js

@@ -60,9 +60,9 @@ export const ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(
     }
     return children;
   }, [children]);
-  const state = React.useMemo(() => ({
+  const state = {
     empty
-  }), [empty]);
+  };
   const floatingId = floatingRootContext.useState('floatingId');
   const element = useRenderElement('div', componentProps, {
     state,

package/esm/combobox/popup/ComboboxPopup.d.ts

@@ -7,7 +7,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  * A container for the list.
  * Renders a `<div>` element.
  */
-export declare const ComboboxPopup: React.ForwardRefExoticComponent<ComboboxPopupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxPopup: React.ForwardRefExoticComponent<Omit<ComboboxPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxPopupState {
   open: boolean;
   side: Side;
@@ -26,7 +26,7 @@ export interface ComboboxPopupProps extends BaseUIComponentProps<'div', Combobox
    * - `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.
    */
-  initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => void | boolean | HTMLElement | null);
+  initialFocus?: (boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => void | boolean | HTMLElement | null)) | undefined;
   /**
    * Determines the element to focus when the popup is closed.
    *
@@ -36,7 +36,7 @@ export interface ComboboxPopupProps extends BaseUIComponentProps<'div', Combobox
    * - `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) => void | boolean | HTMLElement | null);
+  finalFocus?: (boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => void | boolean | HTMLElement | null)) | undefined;
 }
 export declare namespace ComboboxPopup {
   type State = ComboboxPopupState;

package/esm/combobox/popup/ComboboxPopup.js

@@ -52,14 +52,14 @@ export const ComboboxPopup = /*#__PURE__*/React.forwardRef(function ComboboxPopu
       }
     }
   });
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side: positioning.side,
     align: positioning.align,
     anchorHidden: positioning.anchorHidden,
     transitionStatus,
     empty
-  }), [open, positioning.side, positioning.align, positioning.anchorHidden, transitionStatus, empty]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, store.state.popupRef],

package/esm/combobox/popup/ComboboxPopupDataAttributes.js

@@ -20,12 +20,12 @@ export let ComboboxPopupDataAttributes = function (ComboboxPopupDataAttributes)
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  ComboboxPopupDataAttributes["side"] = "data-side";
+  ComboboxPopupDataAttributes[ComboboxPopupDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  ComboboxPopupDataAttributes["align"] = "data-align";
+  ComboboxPopupDataAttributes[ComboboxPopupDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present if animations should be instant.
    * @type {'click' | 'dismiss'}

package/esm/combobox/portal/ComboboxPortal.d.ts

@@ -5,7 +5,7 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  * By default, the portal element is appended to `<body>`.
  * Renders a `<div>` element.
  */
-export declare const ComboboxPortal: React.ForwardRefExoticComponent<ComboboxPortalProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxPortal: React.ForwardRefExoticComponent<Omit<ComboboxPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare namespace ComboboxPortal {
   interface State {}
 }
@@ -14,7 +14,7 @@ export interface ComboboxPortalProps extends FloatingPortal.Props<ComboboxPortal
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace ComboboxPortal {
   type Props = ComboboxPortalProps;

package/esm/combobox/portal/ComboboxPortalContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const ComboboxPortalContext = /*#__PURE__*/React.createContext(undefined);

package/esm/combobox/positioner/ComboboxPositioner.d.ts

@@ -5,7 +5,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Positions the popup against the trigger.
  * Renders a `<div>` element.
  */
-export declare const ComboboxPositioner: React.ForwardRefExoticComponent<ComboboxPositionerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxPositioner: React.ForwardRefExoticComponent<Omit<ComboboxPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxPositionerState {
   /**
    * Whether the popup is currently open.

package/esm/combobox/positioner/ComboboxPositioner.js

@@ -12,6 +12,7 @@ import { useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { useComboboxPortalContext } from "../portal/ComboboxPortalContext.js";
 import { DROPDOWN_COLLISION_AVOIDANCE } from "../../utils/constants.js";
+import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { selectors } from "../store.js";
 import { InternalBackdrop } from "../../utils/InternalBackdrop.js";
@@ -52,6 +53,7 @@ export const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function Combobo
   const triggerElement = useStore(store, selectors.triggerElement);
   const inputElement = useStore(store, selectors.inputElement);
   const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
+  const transitionStatus = useStore(store, selectors.transitionStatus);
   const empty = filteredItems.length === 0;
   const resolvedAnchor = anchor ?? (inputInsidePopup ? triggerElement : inputElement);
   const positioning = useAnchorPositioning({
@@ -86,13 +88,13 @@ export const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function Combobo
       style
     };
   }, [open, mounted, positioning.positionerStyles]);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side: positioning.side,
     align: positioning.align,
     anchorHidden: positioning.anchorHidden,
     empty
-  }), [open, positioning.side, positioning.align, positioning.anchorHidden, empty]);
+  };
   useIsoLayoutEffect(() => {
     store.set('popupSide', positioning.side);
   }, [store, positioning.side]);
@@ -111,7 +113,7 @@ export const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function Combobo
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, setPositionerElement],
-    props: [defaultProps, elementProps],
+    props: [defaultProps, getDisabledMountTransitionStyles(transitionStatus), elementProps],
     stateAttributesMapping: popupStateMapping
   });
   return /*#__PURE__*/_jsxs(ComboboxPositionerContext.Provider, {

package/esm/combobox/positioner/ComboboxPositionerDataAttributes.js

@@ -16,12 +16,12 @@ export let ComboboxPositionerDataAttributes = function (ComboboxPositionerDataAt
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  ComboboxPositionerDataAttributes["side"] = "data-side";
+  ComboboxPositionerDataAttributes[ComboboxPositionerDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  ComboboxPositionerDataAttributes["align"] = "data-align";
+  ComboboxPositionerDataAttributes[ComboboxPositionerDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the items list is empty.
    */

package/esm/combobox/root/AriaCombobox.d.ts

@@ -5,11 +5,11 @@ import { Group } from "../../utils/resolveValueLabel.js";
 /**
  * @internal
  */
-export declare function AriaCombobox<Value, Mode extends SelectionMode = 'none'>(props: Omit<ComboboxRootConditionalProps<Value, Mode>, 'items'> & {
+export declare function AriaCombobox<Value, Mode extends SelectionMode = 'none'>(props: Omit<AriaComboboxProps<Value, Mode>, 'items'> & {
   items: readonly Group<any>[];
 }): React.JSX.Element;
-export declare function AriaCombobox<Value, Mode extends SelectionMode = 'none'>(props: Omit<ComboboxRootConditionalProps<Value, Mode>, 'items'> & {
-  items?: readonly any[];
+export declare function AriaCombobox<Value, Mode extends SelectionMode = 'none'>(props: Omit<AriaComboboxProps<Value, Mode>, 'items'> & {
+  items?: readonly any[] | undefined;
 }): React.JSX.Element;
 type SelectionMode = 'single' | 'multiple' | 'none';
 type ComboboxItemValueType<ItemValue, Mode extends SelectionMode> = Mode extends 'multiple' ? ItemValue[] : ItemValue;
@@ -18,50 +18,50 @@ interface ComboboxRootProps<ItemValue> {
   /**
    * Identifies the field when a form is submitted.
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * The id of the component.
    */
-  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 popup.
    * @default false
    */
-  readOnly?: boolean;
+  readOnly?: boolean | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Whether the popup is initially open.
    *
    * To render a controlled popup, use the `open` prop instead.
    * @default false
    */
-  defaultOpen?: boolean;
+  defaultOpen?: boolean | undefined;
   /**
    * Whether the popup is currently open. Use when controlled.
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Event handler called when the popup is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: AriaCombobox.ChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: AriaCombobox.ChangeEventDetails) => void) | undefined;
   /**
    * Event handler called after any animations complete when the popup is opened or closed.
    */
-  onOpenChangeComplete?: (open: boolean) => void;
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
   /**
    * Whether the popup opens when clicking the input.
    * @default true
    */
-  openOnInputClick?: boolean;
+  openOnInputClick?: boolean | undefined;
   /**
    * Whether the first matching item is highlighted automatically.
    * - `false`: do not highlight automatically.
@@ -69,39 +69,46 @@ interface ComboboxRootProps<ItemValue> {
    * - `'always'`: highlight the first item as soon as the list opens.
    * @default false
    */
-  autoHighlight?: boolean | 'always';
+  autoHighlight?: (boolean | 'always') | undefined;
   /**
    * Whether the highlighted item should be preserved when the pointer leaves the list.
    * @default false
    */
-  keepHighlight?: boolean;
+  keepHighlight?: boolean | 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 to loop keyboard focus back to the input when the end of the list is reached while using the arrow keys. The first item can then be reached by pressing <kbd>ArrowDown</kbd> again from the input, or the last item can be reached by pressing <kbd>ArrowUp</kbd> from the input.
+   * The input is always included in the focus loop per [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
+   * When disabled, focus does not move when on the last element and the user presses <kbd>ArrowDown</kbd>, or when on the first element and the user presses <kbd>ArrowUp</kbd>.
+   * @default true
+   */
+  loopFocus?: boolean | undefined;
   /**
    * The input value of the combobox. Use when controlled.
    */
-  inputValue?: React.ComponentProps<'input'>['value'];
+  inputValue?: React.ComponentProps<'input'>['value'] | undefined;
   /**
    * Callback fired when the input value of the combobox changes.
    */
-  onInputValueChange?: (value: string, eventDetails: AriaCombobox.ChangeEventDetails) => void;
+  onInputValueChange?: ((value: string, eventDetails: AriaCombobox.ChangeEventDetails) => void) | undefined;
   /**
    * The uncontrolled input value when initially rendered.
    *
    * To render a controlled input, use the `inputValue` prop instead.
    */
-  defaultInputValue?: React.ComponentProps<'input'>['defaultValue'];
+  defaultInputValue?: React.ComponentProps<'input'>['defaultValue'] | undefined;
   /**
    * A ref to imperative actions.
    * - `unmount`: When specified, the combobox will not be unmounted when closed.
    * Instead, the `unmount` function must be called to unmount the combobox manually.
    * Useful when the combobox's animation is controlled by an external library.
    */
-  actionsRef?: React.RefObject<AriaCombobox.Actions>;
+  actionsRef?: React.RefObject<AriaCombobox.Actions | null> | undefined;
   /**
    * Callback fired when an item is highlighted or unhighlighted.
    * Receives the highlighted item value (or `undefined` if no item is highlighted) and event details with a `reason` property describing why the highlight changed.
@@ -110,69 +117,69 @@ interface ComboboxRootProps<ItemValue> {
    * - `'pointer'`: the highlight changed due to pointer hovering.
    * - `'none'`: the highlight changed programmatically.
    */
-  onItemHighlighted?: (itemValue: ItemValue | undefined, eventDetails: AriaCombobox.HighlightEventDetails) => void;
+  onItemHighlighted?: ((itemValue: ItemValue | undefined, eventDetails: AriaCombobox.HighlightEventDetails) => void) | undefined;
   /**
    * A ref to the hidden input element.
    */
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
   /**
    * Whether list items are presented in a grid layout.
    * When enabled, arrow keys navigate across rows and columns inferred from DOM rows.
    * @default false
    */
-  grid?: boolean;
+  grid?: boolean | undefined;
   /**
    * The items to be displayed in the list.
    * Can be either a flat array of items or an array of groups with items.
    */
-  items?: readonly any[] | readonly Group<any>[];
+  items?: (readonly any[] | readonly Group<any>[]) | undefined;
   /**
    * Filtered items to display in the list.
    * When provided, the list will use these items instead of filtering the `items` prop internally.
    * Use when you want to control filtering logic externally with the `useFilter()` hook.
    */
-  filteredItems?: readonly any[] | readonly Group<any>[];
+  filteredItems?: (readonly any[] | readonly Group<any>[]) | undefined;
   /**
    * Filter function used to match items vs input query.
    */
-  filter?: null | ((itemValue: ItemValue, query: string, itemToString?: (itemValue: ItemValue) => string) => boolean);
+  filter?: (null | ((itemValue: ItemValue, query: string, itemToString?: (itemValue: ItemValue) => string) => boolean)) | undefined;
   /**
    * When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for display in the input.
    * If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.
    */
-  itemToStringLabel?: (itemValue: ItemValue) => string;
+  itemToStringLabel?: ((itemValue: ItemValue) => string) | undefined;
   /**
    * When the item values are objects (`<Combobox.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: ItemValue) => string;
+  itemToStringValue?: ((itemValue: ItemValue) => string) | undefined;
   /**
    * Custom comparison logic used to determine if a combobox item value matches the current selected value. Useful when item values are objects without matching referentially.
    * Defaults to `Object.is` comparison.
    */
-  isItemEqualToValue?: (itemValue: ItemValue, selectedValue: ItemValue) => boolean;
+  isItemEqualToValue?: ((itemValue: ItemValue, value: ItemValue) => boolean) | undefined;
   /**
    * Whether the items are being externally virtualized.
    * @default false
    */
-  virtualized?: boolean;
+  virtualized?: boolean | undefined;
   /**
    * Whether the list is rendered inline without using the popup.
    * @default false
    */
-  inline?: boolean;
+  inline?: boolean | undefined;
   /**
    * Determines if the popup enters a modal state when open.
    * - `true`: user interaction is limited to the popup: 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 false
    */
-  modal?: boolean;
+  modal?: boolean | undefined;
   /**
    * The maximum number of items to display in the list.
    * @default -1
    */
-  limit?: number;
+  limit?: number | undefined;
   /**
    * Controls how the component behaves with respect to list filtering and inline autocompletion.
    * - `list` (default): items are dynamically filtered based on the input value. The input value does not change based on the active item.
@@ -181,23 +188,28 @@ interface ComboboxRootProps<ItemValue> {
    * - `none`: items are static (not filtered), and the input value will not change based on the active item.
    * @default 'list'
    */
-  autoComplete?: 'list' | 'both' | 'inline' | 'none';
+  autoComplete?: ('list' | 'both' | 'inline' | 'none') | undefined;
+  /**
+   * Provides a hint to the browser for autofill on the hidden input element.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete
+   */
+  formAutoComplete?: string | undefined;
   /**
    * The locale to use for string comparison.
    * Defaults to the user's runtime locale.
    */
-  locale?: Intl.LocalesArgument;
+  locale?: Intl.LocalesArgument | undefined;
   /**
    * Whether clicking an item should submit the owning form.
    * @default false
    */
-  submitOnItemClick?: boolean;
+  submitOnItemClick?: boolean | undefined;
   /**
    * INTERNAL: When `selectionMode` is `none`, controls whether selecting an item fills the input.
    */
-  fillInputOnItemPress?: boolean;
+  fillInputOnItemPress?: boolean | undefined;
 }
-export type ComboboxRootConditionalProps<Value, Mode extends SelectionMode = 'none'> = Omit<ComboboxRootProps<Value>, 'selectionMode' | 'selectedValue' | 'defaultSelectedValue' | 'onSelectedValueChange'> & {
+export type AriaComboboxProps<Value, Mode extends SelectionMode = 'none'> = ComboboxRootProps<Value> & {
   /**
    * How the combobox should remember the selected value.
    * - `single`: Remembers the last selected value.
@@ -205,24 +217,24 @@ export type ComboboxRootConditionalProps<Value, Mode extends SelectionMode = 'no
    * - `none`: Do not remember the selected value.
    * @default 'none'
    */
-  selectionMode?: Mode;
+  selectionMode?: Mode | undefined;
   /**
    * The selected value of the combobox. Use when controlled.
    */
-  selectedValue?: ComboboxItemValueType<Value, Mode>;
+  selectedValue?: ComboboxItemValueType<Value, Mode> | undefined;
   /**
    * The uncontrolled selected value of the combobox when it's initially rendered.
    *
    * To render a controlled combobox, use the `selectedValue` prop instead.
    */
-  defaultSelectedValue?: ComboboxItemValueType<Value, Mode> | null;
+  defaultSelectedValue?: (ComboboxItemValueType<Value, Mode> | null) | undefined;
   /**
    * Callback fired when the selected value of the combobox changes.
    */
-  onSelectedValueChange?: (value: ComboboxItemValueType<Value, Mode>, eventDetails: AriaCombobox.ChangeEventDetails) => void;
+  onSelectedValueChange?: ((value: ComboboxItemValueType<Value, Mode>, eventDetails: AriaCombobox.ChangeEventDetails) => void) | undefined;
 };
 export declare namespace AriaCombobox {
-  type Props<Value, Mode extends SelectionMode = 'none'> = ComboboxRootConditionalProps<Value, Mode>;
+  type Props<Value, Mode extends SelectionMode = 'none'> = AriaComboboxProps<Value, Mode>;
   interface State {}
   interface Actions {
     unmount: () => void;