@base-ui/react 1.1.0 → 1.3.0

package/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/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/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/context-menu/index.parts.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "Item", {
     return _MenuItem.MenuItem;
   }
 });
+Object.defineProperty(exports, "LinkItem", {
+  enumerable: true,
+  get: function () {
+    return _MenuLinkItem.MenuLinkItem;
+  }
+});
 Object.defineProperty(exports, "Popup", {
   enumerable: true,
   get: function () {
@@ -123,6 +129,7 @@ var _MenuGroupLabel = require("../menu/group-label/MenuGroupLabel");
 var _MenuItem = require("../menu/item/MenuItem");
 var _MenuCheckboxItem = require("../menu/checkbox-item/MenuCheckboxItem");
 var _MenuCheckboxItemIndicator = require("../menu/checkbox-item-indicator/MenuCheckboxItemIndicator");
+var _MenuLinkItem = require("../menu/link-item/MenuLinkItem");
 var _MenuRadioGroup = require("../menu/radio-group/MenuRadioGroup");
 var _MenuRadioItem = require("../menu/radio-item/MenuRadioItem");
 var _MenuRadioItemIndicator = require("../menu/radio-item-indicator/MenuRadioItemIndicator");

package/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/context-menu/root/ContextMenuRootContext.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/context-menu/trigger/ContextMenuTrigger.d.ts

@@ -7,13 +7,13 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Context Menu](https://base-ui.com/react/components/context-menu)
  */
 export declare const ContextMenuTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export type ContextMenuTriggerState = {
+export interface ContextMenuTriggerState {
   /**
    * Whether the context menu is currently open.
    */
   open: boolean;
-};
-export interface ContextMenuTriggerProps extends BaseUIComponentProps<'div', ContextMenuTrigger.State> {}
+}
+export interface ContextMenuTriggerProps extends BaseUIComponentProps<'div', ContextMenuTriggerState> {}
 export declare namespace ContextMenuTrigger {
   type State = ContextMenuTriggerState;
   type Props = ContextMenuTriggerProps;

package/context-menu/trigger/ContextMenuTrigger.js

@@ -45,6 +45,7 @@ const ContextMenuTrigger = exports.ContextMenuTrigger = /*#__PURE__*/React.forwa
     store
   } = (0, _MenuRootContext.useMenuRootContext)(false);
   const open = store.useState('open');
+  const disabled = store.useState('disabled');
   const triggerRef = React.useRef(null);
   const touchPositionRef = React.useRef(null);
   const longPressTimeout = (0, _useTimeout.useTimeout)();
@@ -73,6 +74,9 @@ const ContextMenuTrigger = exports.ContextMenuTrigger = /*#__PURE__*/React.forwa
     });
   }
   function handleContextMenu(event) {
+    if (disabled) {
+      return;
+    }
     allowMouseUpTriggerRef.current = true;
     (0, _utils.stopEvent)(event);
     handleLongPress(event.clientX, event.clientY, event.nativeEvent);
@@ -97,6 +101,9 @@ const ContextMenuTrigger = exports.ContextMenuTrigger = /*#__PURE__*/React.forwa
     });
   }
   function handleTouchStart(event) {
+    if (disabled) {
+      return;
+    }
     allowMouseUpTriggerRef.current = false;
     if (event.touches.length === 1) {
       event.stopPropagation();
@@ -129,6 +136,9 @@ const ContextMenuTrigger = exports.ContextMenuTrigger = /*#__PURE__*/React.forwa
   }
   React.useEffect(() => {
     function handleDocumentContextMenu(event) {
+      if (disabled) {
+        return;
+      }
       const target = (0, _utils.getTarget)(event);
       const targetElement = target;
       if ((0, _utils.contains)(triggerRef.current, targetElement) || (0, _utils.contains)(internalBackdropRef.current, targetElement) || (0, _utils.contains)(backdropRef.current, targetElement)) {
@@ -140,10 +150,10 @@ const ContextMenuTrigger = exports.ContextMenuTrigger = /*#__PURE__*/React.forwa
     return () => {
       doc.removeEventListener('contextmenu', handleDocumentContextMenu);
     };
-  }, [backdropRef, internalBackdropRef]);
-  const state = React.useMemo(() => ({
+  }, [backdropRef, disabled, internalBackdropRef]);
+  const state = {
     open
-  }), [open]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [triggerRef, forwardedRef],

package/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/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/dialog/backdrop/DialogBackdrop.d.ts

@@ -8,18 +8,21 @@ import { type BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogBackdrop: React.ForwardRefExoticComponent<Omit<DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DialogBackdropProps extends BaseUIComponentProps<'div', DialogBackdrop.State> {
+export interface DialogBackdropProps extends BaseUIComponentProps<'div', DialogBackdropState> {
   /**
    * Whether the backdrop is forced to render even when nested.
    * @default false
    */
-  forceRender?: boolean;
+  forceRender?: boolean | undefined;
 }
 export interface DialogBackdropState {
   /**
    * Whether the dialog is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export declare namespace DialogBackdrop {

package/dialog/backdrop/DialogBackdrop.js

@@ -36,10 +36,10 @@ const DialogBackdrop = exports.DialogBackdrop = /*#__PURE__*/React.forwardRef(fu
   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 (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [store.context.backdropRef, forwardedRef],

package/dialog/close/DialogClose.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogClose: React.ForwardRefExoticComponent<Omit<DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export interface DialogCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', DialogClose.State> {}
+export interface DialogCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', DialogCloseState> {}
 export interface DialogCloseState {
   /**
    * Whether the button is currently disabled.

package/dialog/close/DialogClose.js

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

package/dialog/description/DialogDescription.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export interface DialogDescriptionProps extends BaseUIComponentProps<'p', DialogDescription.State> {}
+export interface DialogDescriptionProps extends BaseUIComponentProps<'p', DialogDescriptionState> {}
 export interface DialogDescriptionState {}
 export declare namespace DialogDescription {
   type Props = DialogDescriptionProps;

package/dialog/popup/DialogPopup.d.ts

@@ -9,7 +9,7 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogPopup: React.ForwardRefExoticComponent<Omit<DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DialogPopupProps extends BaseUIComponentProps<'div', DialogPopup.State> {
+export interface DialogPopupProps extends BaseUIComponentProps<'div', DialogPopupState> {
   /**
    * Determines the element to focus when the dialog is opened.
    *
@@ -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,13 +29,16 @@ 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 {
   /**
    * Whether the dialog is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
   /**
    * Whether the dialog is nested within a parent dialog.

package/dialog/popup/DialogPopup.js

@@ -80,12 +80,12 @@ const DialogPopup = exports.DialogPopup = /*#__PURE__*/React.forwardRef(function
   }
   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 = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     props: [rootPopupProps, {

package/dialog/portal/DialogPortal.d.ts

@@ -8,20 +8,19 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogPortal: React.ForwardRefExoticComponent<Omit<DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare namespace DialogPortal {
-  interface State {}
-}
-export interface DialogPortalProps extends FloatingPortal.Props<DialogPortal.State> {
+export interface DialogPortalState {}
+export interface DialogPortalProps extends FloatingPortal.Props<DialogPortalState> {
   /**
    * 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<DialogPortalState>['container'] | undefined;
 }
 export declare namespace DialogPortal {
+  type State = DialogPortalState;
   type Props = DialogPortalProps;
 }

package/dialog/portal/DialogPortalContext.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/dialog/root/DialogRoot.d.ts

@@ -10,39 +10,43 @@ import { type PayloadChildRenderFunction } from "../../utils/popups/index.js";
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare function DialogRoot<Payload>(props: DialogRoot.Props<Payload>): import("react/jsx-runtime").JSX.Element;
+export interface DialogRootState {}
 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.
    * - `false`: user interaction with the rest of the document is allowed.
    * - `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.
+   *
+   * When `modal` is `true` or `'trap-focus'`, render `<Dialog.Close>` inside `<Dialog.Popup>` so
+   * touch screen readers can escape the popup.
    * @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 +54,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 +71,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;
@@ -83,6 +87,7 @@ export type DialogRootChangeEventDetails = BaseUIChangeEventDetails<DialogRoot.C
   preventUnmountOnClose(): void;
 };
 export declare namespace DialogRoot {
+  type State = DialogRootState;
   type Props<Payload = unknown> = DialogRootProps<Payload>;
   type Actions = DialogRootActions;
   type ChangeEventReason = DialogRootChangeEventReason;

package/dialog/root/DialogRoot.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DialogRoot = DialogRoot;
 var React = _interopRequireWildcard(require("react"));
 var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
+var _useOnFirstRender = require("@base-ui/utils/useOnFirstRender");
 var _useDialogRoot = require("./useDialogRoot");
 var _DialogRootContext = require("./DialogRootContext");
 var _DialogStore = require("../store/DialogStore");
@@ -36,15 +37,27 @@ function DialogRoot(props) {
   const nested = Boolean(parentDialogRootContext);
   const store = (0, _useRefWithInit.useRefWithInit)(() => {
     return handle?.store ?? new _DialogStore.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
+  (0, _useOnFirstRender.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,

package/dialog/root/useDialogRoot.d.ts

@@ -1,17 +1,13 @@
 import { type DialogRoot } from "./DialogRoot.js";
 import { DialogStore } from "../store/DialogStore.js";
-export declare function useDialogRoot(params: useDialogRoot.Parameters): useDialogRoot.ReturnValue;
+export declare function useDialogRoot(params: UseDialogRootParameters): UseDialogRootReturnValue;
 export interface UseDialogRootSharedParameters {}
 export interface UseDialogRootParameters {
   store: DialogStore<any>;
-  actionsRef?: DialogRoot.Props['actionsRef'];
-  parentContext?: DialogStore<unknown>['context'];
+  actionsRef?: DialogRoot.Props['actionsRef'] | undefined;
+  parentContext?: DialogStore<unknown>['context'] | undefined;
   onOpenChange: DialogRoot.Props['onOpenChange'];
-  triggerIdProp?: string | null;
+  triggerIdProp?: string | null | undefined;
 }
 export type UseDialogRootReturnValue = void;
-export declare namespace useDialogRoot {
-  type SharedParameters = UseDialogRootSharedParameters;
-  type Parameters = UseDialogRootParameters;
-  type ReturnValue = UseDialogRootReturnValue;
-}
+export interface UseDialogRootState {}

package/dialog/root/useDialogRoot.js

@@ -27,15 +27,12 @@ function useDialogRoot(params) {
   const popupElement = store.useState('popupElement');
   const {
     openMethod,
-    triggerProps,
-    reset: resetOpenInteractionType
+    triggerProps
   } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
   (0, _popups.useImplicitActiveTrigger)(store);
   const {
     forceUnmount
-  } = (0, _popups.useOpenStateTransitions)(open, store, () => {
-    resetOpenInteractionType();
-  });
+  } = (0, _popups.useOpenStateTransitions)(open, store);
   const createDialogEventDetails = (0, _useStableCallback.useStableCallback)(reason => {
     const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason);
     details.preventUnmountOnClose = () => {
@@ -72,6 +69,10 @@ function useDialogRoot(params) {
       };
     },
     outsidePress(event) {
+      if (!store.context.outsidePressEnabledRef.current) {
+        return false;
+      }
+
       // For mouse events, only accept left button (button 0)
       // For touch events, a single touch is equivalent to left button
       if ('button' in event && event.button !== 0) {