@base-ui/react 1.1.0 → 1.2.0

package/esm/combobox/root/utils/useFilteredItems.js

@@ -0,0 +1,9 @@
+import { useComboboxDerivedItemsContext } from "../ComboboxRootContext.js";
+
+/**
+ * Returns the internally filtered items.
+ */
+export function useFilteredItems() {
+  const items = useComboboxDerivedItemsContext();
+  return items.filteredItems;
+}

package/esm/combobox/row/ComboboxRowContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 export const ComboboxRowContext = /*#__PURE__*/React.createContext(false);
 if (process.env.NODE_ENV !== "production") ComboboxRowContext.displayName = "ComboboxRowContext";

package/esm/combobox/store.d.ts

@@ -43,16 +43,16 @@ export type State = {
   setInputValue: (value: string, eventDetails: AriaCombobox.ChangeEventDetails) => void;
   setSelectedValue: (value: any, eventDetails: AriaCombobox.ChangeEventDetails) => void;
   setIndices: (indices: {
-    activeIndex?: number | null;
-    selectedIndex?: number | null;
-    type?: 'keyboard' | 'pointer' | 'none';
+    activeIndex?: (number | null) | undefined;
+    selectedIndex?: (number | null) | undefined;
+    type?: ('keyboard' | 'pointer' | 'none') | undefined;
   }) => void;
   onItemHighlighted: (item: any, eventDetails: AriaCombobox.HighlightEventDetails) => void;
   forceMount: () => void;
   handleSelection: (event: MouseEvent | PointerEvent | KeyboardEvent, passedValue?: any) => void;
   getItemProps: (props?: HTMLProps & {
-    active?: boolean;
-    selected?: boolean;
+    active?: boolean | undefined;
+    selected?: boolean | undefined;
   }) => Record<string, unknown>;
   requestSubmit: () => void;
   name: string | undefined;
@@ -64,8 +64,8 @@ export type State = {
   virtualized: boolean;
   onOpenChangeComplete: (open: boolean) => void;
   openOnInputClick: boolean;
-  itemToStringLabel?: (item: any) => string;
-  isItemEqualToValue: (item: any, value: any) => boolean;
+  itemToStringLabel?: ((item: any) => string) | undefined;
+  isItemEqualToValue: (itemValue: any, selectedValue: any) => boolean;
   modal: boolean;
   autoHighlight: false | 'always' | 'input-change';
   submitOnItemClick: boolean;
@@ -87,14 +87,14 @@ export declare const selectors: {
   activeIndex: (state: State) => number | null;
   selectedIndex: (state: State) => number | null;
   isActive: (state: State, index: number) => boolean;
-  isSelected: (state: State, candidate: any) => boolean;
+  isSelected: (state: State, itemValue: any) => boolean;
   transitionStatus: (state: State) => TransitionStatus;
   popupProps: (state: State) => HTMLProps;
   inputProps: (state: State) => HTMLProps;
   triggerProps: (state: State) => HTMLProps;
   getItemProps: (state: State) => (props?: HTMLProps & {
-    active?: boolean;
-    selected?: boolean;
+    active?: boolean | undefined;
+    selected?: boolean | undefined;
   }) => Record<string, unknown>;
   positionerElement: (state: State) => HTMLElement | null;
   listElement: (state: State) => HTMLElement | null;
@@ -124,7 +124,7 @@ export declare const selectors: {
   onOpenChangeComplete: (state: State) => (open: boolean) => void;
   openOnInputClick: (state: State) => boolean;
   itemToStringLabel: (state: State) => ((item: any) => string) | undefined;
-  isItemEqualToValue: (state: State) => (item: any, value: any) => boolean;
+  isItemEqualToValue: (state: State) => (itemValue: any, selectedValue: any) => boolean;
   modal: (state: State) => boolean;
   autoHighlight: (state: State) => false | "always" | "input-change";
   submitOnItemClick: (state: State) => boolean;

package/esm/combobox/store.js

@@ -33,13 +33,13 @@ export const selectors = {
   activeIndex: createSelector(state => state.activeIndex),
   selectedIndex: createSelector(state => state.selectedIndex),
   isActive: createSelector((state, index) => state.activeIndex === index),
-  isSelected: createSelector((state, candidate) => {
+  isSelected: createSelector((state, itemValue) => {
     const comparer = state.isItemEqualToValue;
     const selectedValue = state.selectedValue;
     if (Array.isArray(selectedValue)) {
-      return selectedValue.some(value => compareItemEquality(value, candidate, comparer));
+      return selectedValue.some(selectedItem => compareItemEquality(itemValue, selectedItem, comparer));
     }
-    return compareItemEquality(selectedValue, candidate, comparer);
+    return compareItemEquality(itemValue, selectedValue, comparer);
   }),
   transitionStatus: createSelector(state => state.transitionStatus),
   popupProps: createSelector(state => state.popupProps),

package/esm/combobox/trigger/ComboboxTrigger.d.ts

@@ -34,7 +34,7 @@ export interface ComboboxTriggerProps extends NativeButtonProps, BaseUIComponent
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export declare namespace ComboboxTrigger {
   type State = ComboboxTriggerState;

package/esm/combobox/trigger/ComboboxTrigger.js

@@ -79,7 +79,7 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
   function trackPointerType(event) {
     currentPointerTypeRef.current = event.pointerType;
   }
-  const domReference = floatingRootContext.select('domReferenceElement');
+  const domReference = floatingRootContext.useState('domReferenceElement');
 
   // Update the floating root context to use the trigger element when it differs from the current reference.
   // This ensures useClick and useTypeahead attach handlers to the correct element.
@@ -118,14 +118,14 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
     native: nativeButton,
     disabled
   });
-  const state = React.useMemo(() => ({
+  const state = {
     ...fieldState,
     open,
     disabled,
     popupSide,
     listEmpty,
     placeholder: !hasSelectedValue
-  }), [fieldState, open, disabled, popupSide, listEmpty, hasSelectedValue]);
+  };
   const setTriggerElement = useStableCallback(element => {
     store.set('triggerElement', element);
   });
@@ -139,7 +139,6 @@ export const ComboboxTrigger = /*#__PURE__*/React.forwardRef(function ComboboxTr
       'aria-expanded': open ? 'true' : 'false',
       'aria-haspopup': inputInsidePopup ? 'dialog' : 'listbox',
       'aria-controls': open ? listElement?.id : undefined,
-      'aria-readonly': readOnly || undefined,
       'aria-required': inputInsidePopup ? required || undefined : undefined,
       'aria-labelledby': labelId,
       onPointerDown: trackPointerType,

package/esm/composite/item/CompositeItem.d.ts

@@ -7,12 +7,12 @@ import { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
 export declare function CompositeItem<Metadata, State extends Record<string, any>>(componentProps: CompositeItem.Props<Metadata, State>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export interface CompositeItemProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<any, State>, 'render' | 'className'> {
   children?: React.ReactNode;
-  metadata?: Metadata;
-  refs?: React.Ref<HTMLElement | null>[];
-  props?: Array<Record<string, any> | (() => Record<string, any>)>;
-  state?: State;
-  stateAttributesMapping?: StateAttributesMapping<State>;
-  tag?: keyof React.JSX.IntrinsicElements;
+  metadata?: Metadata | undefined;
+  refs?: React.Ref<HTMLElement | null>[] | undefined;
+  props?: Array<Record<string, any> | (() => Record<string, any>)> | undefined;
+  state?: State | undefined;
+  stateAttributesMapping?: StateAttributesMapping<State> | undefined;
+  tag?: keyof React.JSX.IntrinsicElements | undefined;
 }
 export declare namespace CompositeItem {
   type Props<Metadata, State extends Record<string, any>> = CompositeItemProps<Metadata, State>;

package/esm/composite/list/CompositeList.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export type CompositeMetadata<CustomMetadata> = {
-  index?: number | null;
+  index?: (number | null) | undefined;
 } & CustomMetadata;
 /**
  * Provides context for a list of items in a composite component.
@@ -18,8 +18,8 @@ export interface CompositeListProps<Metadata> {
    * A ref to the list of element labels, ordered by their index.
    * `useTypeahead`'s `listRef` prop.
    */
-  labelsRef?: React.RefObject<Array<string | null>>;
-  onMapChange?: (newMap: Map<Element, CompositeMetadata<Metadata> | null>) => void;
+  labelsRef?: React.RefObject<Array<string | null>> | undefined;
+  onMapChange?: ((newMap: Map<Element, CompositeMetadata<Metadata> | null>) => void) | undefined;
 }
 export declare namespace CompositeList {
   type Props<Metadata> = CompositeListProps<Metadata>;

package/esm/composite/list/CompositeListContext.d.ts

@@ -4,7 +4,7 @@ export interface CompositeListContextValue<Metadata> {
   unregister: (node: Element) => void;
   subscribeMapChange: (fn: (map: Map<Element, Metadata | null>) => void) => () => void;
   elementsRef: React.RefObject<Array<HTMLElement | null>>;
-  labelsRef?: React.RefObject<Array<string | null>>;
+  labelsRef?: React.RefObject<Array<string | null>> | undefined;
   nextIndexRef: React.RefObject<number>;
 }
 export declare const CompositeListContext: React.Context<CompositeListContextValue<any>>;

package/esm/composite/list/useCompositeListItem.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 export interface UseCompositeListItemParameters<Metadata> {
-  index?: number;
-  label?: string | null;
-  metadata?: Metadata;
-  textRef?: React.RefObject<HTMLElement | null>;
+  index?: number | undefined;
+  label?: (string | null) | undefined;
+  metadata?: Metadata | undefined;
+  textRef?: React.RefObject<HTMLElement | null> | undefined;
   /** Enables guessing the indexes. This avoids a re-render after mount, which is useful for
    * large lists. This should be used for lists that are likely flat and vertical, other cases
    * might trigger a re-render anyway. */
-  indexGuessBehavior?: IndexGuessBehavior;
+  indexGuessBehavior?: IndexGuessBehavior | undefined;
 }
 interface UseCompositeListItemReturnValue {
   ref: (node: HTMLElement | null) => void;

package/esm/composite/root/CompositeRoot.d.ts

@@ -8,25 +8,25 @@ import { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
  */
 export declare function CompositeRoot<Metadata extends {}, State extends Record<string, any>>(componentProps: CompositeRoot.Props<Metadata, State>): import("react/jsx-runtime").JSX.Element;
 export interface CompositeRootProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<'div', State>, 'render' | 'className' | 'children'> {
-  props?: Array<Record<string, any> | (() => Record<string, any>)>;
-  state?: State;
-  stateAttributesMapping?: StateAttributesMapping<State>;
-  refs?: React.Ref<HTMLElement | null>[];
-  tag?: keyof React.JSX.IntrinsicElements;
-  orientation?: 'horizontal' | 'vertical' | 'both';
-  cols?: number;
-  loopFocus?: boolean;
-  highlightedIndex?: number;
-  onHighlightedIndexChange?: (index: number) => void;
-  itemSizes?: Dimensions[];
-  dense?: boolean;
-  enableHomeAndEndKeys?: boolean;
-  onMapChange?: (newMap: Map<Node, CompositeMetadata<Metadata> | null>) => void;
-  stopEventPropagation?: boolean;
-  rootRef?: React.RefObject<HTMLElement | null>;
-  disabledIndices?: number[];
-  modifierKeys?: ModifierKey[];
-  highlightItemOnHover?: boolean;
+  props?: Array<Record<string, any> | (() => Record<string, any>)> | undefined;
+  state?: State | undefined;
+  stateAttributesMapping?: StateAttributesMapping<State> | undefined;
+  refs?: React.Ref<HTMLElement | null>[] | undefined;
+  tag?: keyof React.JSX.IntrinsicElements | undefined;
+  orientation?: ('horizontal' | 'vertical' | 'both') | undefined;
+  cols?: number | undefined;
+  loopFocus?: boolean | undefined;
+  highlightedIndex?: number | undefined;
+  onHighlightedIndexChange?: ((index: number) => void) | undefined;
+  itemSizes?: Dimensions[] | undefined;
+  dense?: boolean | undefined;
+  enableHomeAndEndKeys?: boolean | undefined;
+  onMapChange?: ((newMap: Map<Node, CompositeMetadata<Metadata> | null>) => void) | undefined;
+  stopEventPropagation?: boolean | undefined;
+  rootRef?: React.RefObject<HTMLElement | null> | undefined;
+  disabledIndices?: number[] | undefined;
+  modifierKeys?: ModifierKey[] | undefined;
+  highlightItemOnHover?: boolean | undefined;
 }
 export declare namespace CompositeRoot {
   type Props<Metadata, State extends Record<string, any>> = CompositeRootProps<Metadata, State>;

package/esm/composite/root/useCompositeRoot.d.ts

@@ -4,38 +4,38 @@ import { type Dimensions, type ModifierKey } from "../composite.js";
 import { CompositeMetadata } from "../list/CompositeList.js";
 import { HTMLProps } from "../../utils/types.js";
 export interface UseCompositeRootParameters {
-  orientation?: 'horizontal' | 'vertical' | 'both';
-  cols?: number;
-  loopFocus?: boolean;
-  highlightedIndex?: number;
-  onHighlightedIndexChange?: (index: number) => void;
-  dense?: boolean;
+  orientation?: ('horizontal' | 'vertical' | 'both') | undefined;
+  cols?: number | undefined;
+  loopFocus?: boolean | undefined;
+  highlightedIndex?: number | undefined;
+  onHighlightedIndexChange?: ((index: number) => void) | undefined;
+  dense?: boolean | undefined;
   direction: TextDirection;
-  itemSizes?: Array<Dimensions>;
-  rootRef?: React.Ref<Element>;
+  itemSizes?: Array<Dimensions> | undefined;
+  rootRef?: React.Ref<Element> | undefined;
   /**
    * When `true`, pressing the Home key moves focus to the first item,
    * and pressing the End key moves focus to the last item.
    * @default false
    */
-  enableHomeAndEndKeys?: boolean;
+  enableHomeAndEndKeys?: boolean | undefined;
   /**
    * When `true`, keypress events on Composite's navigation keys
    * be stopped with event.stopPropagation().
    * @default false
    */
-  stopEventPropagation?: boolean;
+  stopEventPropagation?: boolean | undefined;
   /**
    * Array of item indices to be considered disabled.
    * Used for composite items that are focusable when disabled.
    */
-  disabledIndices?: number[];
+  disabledIndices?: number[] | undefined;
   /**
    * Array of [modifier key values](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#modifier_keys) that should allow normal keyboard actions
    * when pressed. By default, all modifier keys prevent normal actions.
    * @default []
    */
-  modifierKeys?: ModifierKey[];
+  modifierKeys?: ModifierKey[] | undefined;
 }
 export declare function useCompositeRoot(params: UseCompositeRootParameters): {
   props: HTMLProps;

package/esm/context-menu/index.d.ts

@@ -9,6 +9,7 @@ export type { MenuArrowProps as ContextMenuArrowProps, MenuArrowState as Context
 export type { MenuGroupProps as ContextMenuGroupProps, MenuGroupState as ContextMenuGroupState } from "../menu/group/MenuGroup.js";
 export type { MenuGroupLabelProps as ContextMenuGroupLabelProps, MenuGroupLabelState as ContextMenuGroupLabelState } from "../menu/group-label/MenuGroupLabel.js";
 export type { MenuItemProps as ContextMenuItemProps, MenuItemState as ContextMenuItemState } from "../menu/item/MenuItem.js";
+export type { MenuLinkItemProps as ContextMenuLinkItemProps, MenuLinkItemState as ContextMenuLinkItemState } from "../menu/link-item/MenuLinkItem.js";
 export type { MenuCheckboxItemProps as ContextMenuCheckboxItemProps, MenuCheckboxItemState as ContextMenuCheckboxItemState } from "../menu/checkbox-item/MenuCheckboxItem.js";
 export type { MenuCheckboxItemIndicatorProps as ContextMenuCheckboxItemIndicatorProps, MenuCheckboxItemIndicatorState as ContextMenuCheckboxItemIndicatorState } from "../menu/checkbox-item-indicator/MenuCheckboxItemIndicator.js";
 export type { MenuRadioGroupProps as ContextMenuRadioGroupProps, MenuRadioGroupState as ContextMenuRadioGroupState } from "../menu/radio-group/MenuRadioGroup.js";

package/esm/context-menu/index.parts.d.ts

@@ -10,6 +10,7 @@ export { MenuGroupLabel as GroupLabel } from "../menu/group-label/MenuGroupLabel
 export { MenuItem as Item } from "../menu/item/MenuItem.js";
 export { MenuCheckboxItem as CheckboxItem } from "../menu/checkbox-item/MenuCheckboxItem.js";
 export { MenuCheckboxItemIndicator as CheckboxItemIndicator } from "../menu/checkbox-item-indicator/MenuCheckboxItemIndicator.js";
+export { MenuLinkItem as LinkItem } from "../menu/link-item/MenuLinkItem.js";
 export { MenuRadioGroup as RadioGroup } from "../menu/radio-group/MenuRadioGroup.js";
 export { MenuRadioItem as RadioItem } from "../menu/radio-item/MenuRadioItem.js";
 export { MenuRadioItemIndicator as RadioItemIndicator } from "../menu/radio-item-indicator/MenuRadioItemIndicator.js";

package/esm/context-menu/index.parts.js

@@ -10,6 +10,7 @@ export { MenuGroupLabel as GroupLabel } from "../menu/group-label/MenuGroupLabel
 export { MenuItem as Item } from "../menu/item/MenuItem.js";
 export { MenuCheckboxItem as CheckboxItem } from "../menu/checkbox-item/MenuCheckboxItem.js";
 export { MenuCheckboxItemIndicator as CheckboxItemIndicator } from "../menu/checkbox-item-indicator/MenuCheckboxItemIndicator.js";
+export { MenuLinkItem as LinkItem } from "../menu/link-item/MenuLinkItem.js";
 export { MenuRadioGroup as RadioGroup } from "../menu/radio-group/MenuRadioGroup.js";
 export { MenuRadioItem as RadioItem } from "../menu/radio-item/MenuRadioItem.js";
 export { MenuRadioItemIndicator as RadioItemIndicator } from "../menu/radio-item-indicator/MenuRadioItemIndicator.js";

package/esm/context-menu/root/ContextMenuRoot.d.ts

@@ -13,7 +13,7 @@ export interface ContextMenuRootProps extends Omit<Menu.Root.Props, 'modal' | 'o
   /**
    * Event handler called when the menu is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: ContextMenuRoot.ChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: ContextMenuRoot.ChangeEventDetails) => void) | undefined;
 }
 export type ContextMenuRootChangeEventReason = MenuRoot.ChangeEventReason;
 export type ContextMenuRootChangeEventDetails = BaseUIChangeEventDetails<ContextMenuRoot.ChangeEventReason>;

package/esm/context-menu/root/ContextMenuRootContext.js

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

package/esm/context-menu/trigger/ContextMenuTrigger.js

@@ -39,6 +39,7 @@ export const ContextMenuTrigger = /*#__PURE__*/React.forwardRef(function Context
     store
   } = useMenuRootContext(false);
   const open = store.useState('open');
+  const disabled = store.useState('disabled');
   const triggerRef = React.useRef(null);
   const touchPositionRef = React.useRef(null);
   const longPressTimeout = useTimeout();
@@ -67,6 +68,9 @@ export const ContextMenuTrigger = /*#__PURE__*/React.forwardRef(function Context
     });
   }
   function handleContextMenu(event) {
+    if (disabled) {
+      return;
+    }
     allowMouseUpTriggerRef.current = true;
     stopEvent(event);
     handleLongPress(event.clientX, event.clientY, event.nativeEvent);
@@ -91,6 +95,9 @@ export const ContextMenuTrigger = /*#__PURE__*/React.forwardRef(function Context
     });
   }
   function handleTouchStart(event) {
+    if (disabled) {
+      return;
+    }
     allowMouseUpTriggerRef.current = false;
     if (event.touches.length === 1) {
       event.stopPropagation();
@@ -123,6 +130,9 @@ export const ContextMenuTrigger = /*#__PURE__*/React.forwardRef(function Context
   }
   React.useEffect(() => {
     function handleDocumentContextMenu(event) {
+      if (disabled) {
+        return;
+      }
       const target = getTarget(event);
       const targetElement = target;
       if (contains(triggerRef.current, targetElement) || contains(internalBackdropRef.current, targetElement) || contains(backdropRef.current, targetElement)) {
@@ -134,10 +144,10 @@ export const ContextMenuTrigger = /*#__PURE__*/React.forwardRef(function Context
     return () => {
       doc.removeEventListener('contextmenu', handleDocumentContextMenu);
     };
-  }, [backdropRef, internalBackdropRef]);
-  const state = React.useMemo(() => ({
+  }, [backdropRef, disabled, internalBackdropRef]);
+  const state = {
     open
-  }), [open]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [triggerRef, forwardedRef],

package/esm/csp-provider/CSPContext.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export interface CSPContextValue {
-  nonce?: string;
-  disableStyleElements?: boolean;
+  nonce?: string | undefined;
+  disableStyleElements?: boolean | undefined;
 }
 /**
  * @internal

package/esm/csp-provider/CSPProvider.d.ts

@@ -12,12 +12,12 @@ export interface CSPProviderProps {
   /**
    * The nonce value to apply to inline `<style>` and `<script>` tags.
    */
-  nonce?: string;
+  nonce?: string | undefined;
   /**
    * Whether inline `<style>` elements created by Base UI components should not be rendered. Instead, components must specify the CSS styles via custom class names or other methods.
    * @default false
    */
-  disableStyleElements?: boolean;
+  disableStyleElements?: boolean | undefined;
 }
 export declare namespace CSPProvider {
   type State = CSPProviderState;

package/esm/dialog/backdrop/DialogBackdrop.d.ts

@@ -13,7 +13,7 @@ export interface DialogBackdropProps extends BaseUIComponentProps<'div', DialogB
    * Whether the backdrop is forced to render even when nested.
    * @default false
    */
-  forceRender?: boolean;
+  forceRender?: boolean | undefined;
 }
 export interface DialogBackdropState {
   /**

package/esm/dialog/backdrop/DialogBackdrop.js

@@ -30,10 +30,10 @@ export const DialogBackdrop = /*#__PURE__*/React.forwardRef(function DialogBackd
   const nested = store.useState('nested');
   const mounted = store.useState('mounted');
   const transitionStatus = store.useState('transitionStatus');
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus
-  }), [open, transitionStatus]);
+  };
   return useRenderElement('div', componentProps, {
     state,
     ref: [store.context.backdropRef, forwardedRef],

package/esm/dialog/close/DialogClose.js

@@ -37,9 +37,9 @@ export const DialogClose = /*#__PURE__*/React.forwardRef(function DialogClose(co
     disabled,
     native: nativeButton
   });
-  const state = React.useMemo(() => ({
+  const state = {
     disabled
-  }), [disabled]);
+  };
   return useRenderElement('button', componentProps, {
     state,
     ref: [forwardedRef, buttonRef],

package/esm/dialog/popup/DialogPopup.d.ts

@@ -19,7 +19,7 @@ export interface DialogPopupProps extends BaseUIComponentProps<'div', DialogPopu
    * - `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) => boolean | HTMLElement | null | void);
+  initialFocus?: (boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void)) | undefined;
   /**
    * Determines the element to focus when the dialog is closed.
    *
@@ -29,7 +29,7 @@ export interface DialogPopupProps extends BaseUIComponentProps<'div', DialogPopu
    * - `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);
+  finalFocus?: (boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void)) | undefined;
 }
 export interface DialogPopupState {
   /**

package/esm/dialog/popup/DialogPopup.js

@@ -74,12 +74,12 @@ export const DialogPopup = /*#__PURE__*/React.forwardRef(function DialogPopup(co
   }
   const resolvedInitialFocus = initialFocus === undefined ? defaultInitialFocus : initialFocus;
   const nestedDialogOpen = nestedOpenDialogCount > 0;
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     nested,
     transitionStatus,
     nestedDialogOpen
-  }), [open, nested, transitionStatus, nestedDialogOpen]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     props: [rootPopupProps, {

package/esm/dialog/portal/DialogPortal.d.ts

@@ -16,11 +16,11 @@ export interface DialogPortalProps extends FloatingPortal.Props<DialogPortal.Sta
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
   /**
    * A parent element to render the portal element into.
    */
-  container?: FloatingPortal.Props<DialogPortal.State>['container'];
+  container?: FloatingPortal.Props<DialogPortal.State>['container'] | undefined;
 }
 export declare namespace DialogPortal {
   type Props = DialogPortalProps;

package/esm/dialog/portal/DialogPortalContext.js

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

package/esm/dialog/root/DialogRoot.d.ts

@@ -14,14 +14,14 @@ export interface DialogRootProps<Payload = unknown> {
   /**
    * Whether the dialog is currently open.
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Whether the dialog is initially open.
    *
    * To render a controlled dialog, use the `open` prop instead.
    * @default false
    */
-  defaultOpen?: boolean;
+  defaultOpen?: boolean | undefined;
   /**
    * Determines if the dialog enters a modal state when open.
    * - `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.
@@ -29,20 +29,20 @@ export interface DialogRootProps<Payload = unknown> {
    * - `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.
    * @default true
    */
-  modal?: boolean | 'trap-focus';
+  modal?: (boolean | 'trap-focus') | undefined;
   /**
    * Event handler called when the dialog is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: DialogRoot.ChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: DialogRoot.ChangeEventDetails) => void) | undefined;
   /**
    * Event handler called after any animations complete when the dialog is opened or closed.
    */
-  onOpenChangeComplete?: (open: boolean) => void;
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
   /**
    * Determines whether the dialog should close on outside clicks.
    * @default false
    */
-  disablePointerDismissal?: boolean;
+  disablePointerDismissal?: boolean | undefined;
   /**
    * A ref to imperative actions.
    * - `unmount`: When specified, the dialog will not be unmounted when closed.
@@ -50,13 +50,13 @@ export interface DialogRootProps<Payload = unknown> {
    * Useful when the dialog's animation is controlled by an external library.
    * - `close`: Closes the dialog imperatively when called.
    */
-  actionsRef?: React.RefObject<DialogRoot.Actions | null>;
+  actionsRef?: React.RefObject<DialogRoot.Actions | null> | undefined;
   /**
    * A handle to associate the dialog with a trigger.
    * If specified, allows external triggers to control the dialog's open state.
    * Can be created with the Dialog.createHandle() method.
    */
-  handle?: DialogHandle<Payload>;
+  handle?: DialogHandle<Payload> | undefined;
   /**
    * The content of the dialog.
    * This can be a regular React node or a render function that receives the `payload` of the active trigger.
@@ -67,12 +67,12 @@ export interface DialogRootProps<Payload = unknown> {
    * This is useful in conjunction with the `open` prop to create a controlled dialog.
    * There's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set).
    */
-  triggerId?: string | null;
+  triggerId?: (string | null) | undefined;
   /**
    * ID of the trigger that the dialog is associated with.
    * This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog.
    */
-  defaultTriggerId?: string | null;
+  defaultTriggerId?: (string | null) | undefined;
 }
 export interface DialogRootActions {
   unmount: () => void;

package/esm/dialog/root/DialogRoot.js

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
+import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
 import { useDialogRoot } from "./useDialogRoot.js";
 import { DialogRootContext, useDialogRootContext } from "./DialogRootContext.js";
 import { DialogStore } from "../store/DialogStore.js";
@@ -30,15 +31,27 @@ export function DialogRoot(props) {
   const nested = Boolean(parentDialogRootContext);
   const store = useRefWithInit(() => {
     return handle?.store ?? new DialogStore({
-      open: openProp ?? defaultOpen,
-      activeTriggerId: triggerIdProp !== undefined ? triggerIdProp : defaultTriggerIdProp,
+      open: defaultOpen,
+      openProp,
+      activeTriggerId: defaultTriggerIdProp,
+      triggerIdProp,
       modal,
       disablePointerDismissal,
       nested
     });
   }).current;
-  store.useControlledProp('open', openProp, defaultOpen);
-  store.useControlledProp('activeTriggerId', triggerIdProp, defaultTriggerIdProp);
+
+  // Support initially open state when uncontrolled
+  useOnFirstRender(() => {
+    if (openProp === undefined && store.state.open === false && defaultOpen === true) {
+      store.update({
+        open: true,
+        activeTriggerId: defaultTriggerIdProp
+      });
+    }
+  });
+  store.useControlledProp('openProp', openProp);
+  store.useControlledProp('triggerIdProp', triggerIdProp);
   store.useSyncedValues({
     disablePointerDismissal,
     nested,