@base-ui/react 1.4.1 → 1.5.0

package/drawer/swipe-area/DrawerSwipeArea.js

@@ -72,11 +72,11 @@ function resolveTouchAction(direction) {
  */
 const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     disabled = false,
     swipeDirection: swipeDirectionProp,
-    style,
     ...elementProps
   } = componentProps;
   const {
@@ -102,13 +102,13 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
   const swipeAreaId = (0, _useBaseUiId.useBaseUiId)(componentProps.id);
   const registerTrigger = (0, _popups.useTriggerRegistration)(swipeAreaId, store);
   const open = store.useState('open');
-  const resolvedSwipeDirection = swipeDirectionProp ?? oppositeSwipeDirection[swipeDirection];
-  const dismissDirection = oppositeSwipeDirection[resolvedSwipeDirection];
-  const enabled = !disabled && (!open || swipeActive);
   const resetDragDelta = (0, _useStableCallback.useStableCallback)(() => {
     dragDeltaRef.current.x = 0;
     dragDeltaRef.current.y = 0;
   });
+  const resolvedSwipeDirection = swipeDirectionProp ?? oppositeSwipeDirection[swipeDirection];
+  const dismissDirection = oppositeSwipeDirection[resolvedSwipeDirection];
+  const enabled = !disabled && (!open || swipeActive);
   function disableDismissForSwipe() {
     releaseDismissTimeout.clear();
     store.context.outsidePressEnabledRef.current = false;
@@ -361,6 +361,7 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
           return;
         }
         swipePointerProps.onPointerDown?.(event);
+
         // Prevent native text selection/drag gestures from competing with swipe-open dragging.
         if (event.cancelable) {
           event.preventDefault();

package/drawer/viewport/DrawerViewport.js

@@ -54,8 +54,8 @@ const DRAWER_CONTENT_SELECTOR = `[${_DrawerContentDataAttributes.DRAWER_CONTENT_
  */
 const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(props, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     children,
     ...elementProps
@@ -71,25 +71,25 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
     snapToSequentialPoints
   } = (0, _DrawerRootContext.useDrawerRootContext)();
   const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)(true);
-  const visualStateStore = providerContext?.visualStateStore;
+  const {
+    snapPoints,
+    resolvedSnapPoints,
+    activeSnapPoint,
+    activeSnapPointOffset,
+    setActiveSnapPoint,
+    popupHeight
+  } = (0, _useDrawerSnapPoints.useDrawerSnapPoints)();
   const open = store.useState('open');
   const mounted = store.useState('mounted');
   const nested = store.useState('nested');
   const nestedOpenDrawerCount = store.useState('nestedOpenDrawerCount');
   const viewportElement = store.useState('viewportElement');
   const popupElementState = store.useState('popupElement');
+  const visualStateStore = providerContext?.visualStateStore;
   const nestedDrawerOpen = nestedOpenDrawerCount > 0;
   const scrollAxis = swipeDirection === 'left' || swipeDirection === 'right' ? 'horizontal' : 'vertical';
   const isVerticalScrollAxis = scrollAxis === 'vertical';
   const crossScrollAxis = isVerticalScrollAxis ? 'horizontal' : 'vertical';
-  const {
-    snapPoints,
-    resolvedSnapPoints,
-    activeSnapPoint,
-    activeSnapPointOffset,
-    setActiveSnapPoint,
-    popupHeight
-  } = (0, _useDrawerSnapPoints.useDrawerSnapPoints)();
   const [swipeRelease, setSwipeRelease] = React.useState(null);
   const pendingSwipeCloseSnapPointRef = React.useRef(undefined);
   const resetSwipeRef = React.useRef(null);
@@ -702,10 +702,8 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
     swiping: swipe.swiping,
     getDragStyles: swipe.getDragStyles,
     swipeStrength: swipeRelease ?? null,
-    setSwipeDismissed(dismissed) {
-      setSwipeDismissedElements(store.context.popupRef.current, store.context.backdropRef.current, dismissed);
-    }
-  }), [store, swipe.getDragStyles, swipe.swiping, swipeRelease]);
+    setSwipeDismissed
+  }), [setSwipeDismissed, swipe.getDragStyles, swipe.swiping, swipeRelease]);
   function resetTouchTrackingState() {
     ignoreTouchSwipeRef.current = false;
     touchScrollStateRef.current = null;
@@ -715,6 +713,7 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogViewport.DialogViewport, {
     ref: forwardedRef,
     className: className,
+    style: style,
     render: render,
     ...(0, _mergeProps.mergeProps)(elementProps, {
       onPointerDown(event) {

package/esm/accordion/item/AccordionItem.d.ts

@@ -12,6 +12,10 @@ import { REASONS } from "../../internals/reasons.js";
  */
 export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface AccordionItemState extends AccordionRootState {
+  /**
+   * Whether the accordion item's panel is currently hidden.
+   */
+  hidden: boolean;
   /**
    * The item index.
    */

package/esm/accordion/item/AccordionItem.js

@@ -68,9 +68,8 @@ export const AccordionItem = /*#__PURE__*/React.forwardRef(function AccordionIte
   const collapsibleState = React.useMemo(() => ({
     open: collapsible.open,
     disabled: collapsible.disabled,
-    hidden: !collapsible.mounted,
     transitionStatus: collapsible.transitionStatus
-  }), [collapsible.open, collapsible.disabled, collapsible.mounted, collapsible.transitionStatus]);
+  }), [collapsible.open, collapsible.disabled, collapsible.transitionStatus]);
   const collapsibleContext = React.useMemo(() => ({
     ...collapsible,
     onOpenChange,
@@ -78,11 +77,13 @@ export const AccordionItem = /*#__PURE__*/React.forwardRef(function AccordionIte
   }), [collapsible, collapsibleState, onOpenChange]);
   const state = React.useMemo(() => ({
     ...rootState,
+    hidden: !isOpen && !collapsible.mounted,
     index,
     disabled,
     open: isOpen
-  }), [disabled, index, isOpen, rootState]);
-  const [triggerId, setTriggerId] = React.useState(useBaseUiId());
+  }), [collapsible.mounted, disabled, index, isOpen, rootState]);
+  const defaultTriggerId = useBaseUiId();
+  const [triggerId, setTriggerId] = React.useState(defaultTriggerId);
   const accordionItemContext = React.useMemo(() => ({
     open: isOpen,
     state,

package/esm/accordion/panel/AccordionPanel.js

@@ -3,13 +3,13 @@
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { warn } from '@base-ui/utils/warn';
+import { resolveStyle } from "../../utils/resolveStyle.js";
 import { useCollapsibleRootContext } from "../../collapsible/root/CollapsibleRootContext.js";
 import { useCollapsiblePanel } from "../../collapsible/panel/useCollapsiblePanel.js";
 import { useAccordionRootContext } from "../root/AccordionRootContext.js";
 import { useAccordionItemContext } from "../item/AccordionItemContext.js";
 import { accordionStateAttributesMapping } from "../item/stateAttributesMapping.js";
 import { AccordionPanelCssVars } from "./AccordionPanelCssVars.js";
-import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
 import { useRenderElement } from "../../internals/useRenderElement.js";
 /**
  * A collapsible panel with the accordion item contents.
@@ -32,24 +32,12 @@ export const AccordionPanel = /*#__PURE__*/React.forwardRef(function AccordionPa
     keepMounted: contextKeepMounted
   } = useAccordionRootContext();
   const {
-    abortControllerRef,
-    animationTypeRef,
-    height,
     mounted,
     onOpenChange,
     open,
     panelId,
-    panelRef,
-    runOnceAnimationsFinish,
-    setDimensions,
-    setHiddenUntilFound,
-    setKeepMounted,
     setMounted,
     setOpen,
-    setVisible,
-    transitionDimensionRef,
-    visible,
-    width,
     setPanelIdState,
     transitionStatus
   } = useCollapsibleRootContext();
@@ -59,7 +47,7 @@ export const AccordionPanel = /*#__PURE__*/React.forwardRef(function AccordionPa
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useIsoLayoutEffect(() => {
       if (keepMountedProp === false && hiddenUntilFound) {
-        warn('The `keepMounted={false}` prop on a Accordion.Panel will be ignored when using `contextHiddenUntilFound` on the Panel or the Root since it requires the panel to remain mounted when closed.');
+        warn('The `keepMounted={false}` prop on an `Accordion.Panel` is ignored when `hiddenUntilFound` is enabled on the panel or root, since the panel must remain mounted while closed.');
       }
     }, [hiddenUntilFound, keepMountedProp]);
   }
@@ -72,59 +60,41 @@ export const AccordionPanel = /*#__PURE__*/React.forwardRef(function AccordionPa
     }
     return undefined;
   }, [idProp, setPanelIdState]);
-  useIsoLayoutEffect(() => {
-    setHiddenUntilFound(hiddenUntilFound);
-  }, [setHiddenUntilFound, hiddenUntilFound]);
-  useIsoLayoutEffect(() => {
-    setKeepMounted(keepMounted);
-  }, [setKeepMounted, keepMounted]);
-  useOpenChangeComplete({
-    open: open && transitionStatus === 'idle',
-    ref: panelRef,
-    onComplete() {
-      if (!open) {
-        return;
-      }
-      setDimensions({
-        width: undefined,
-        height: undefined
-      });
-    }
-  });
   const {
-    props
+    height,
+    props,
+    ref,
+    shouldPreventOpenAnimation,
+    shouldRender,
+    transitionStatus: panelTransitionStatus,
+    width
   } = useCollapsiblePanel({
-    abortControllerRef,
-    animationTypeRef,
     externalRef: forwardedRef,
-    height,
     hiddenUntilFound,
     id: idProp ?? panelId,
     keepMounted,
     mounted,
     onOpenChange,
     open,
-    panelRef,
-    runOnceAnimationsFinish,
-    setDimensions,
     setMounted,
     setOpen,
-    setVisible,
-    transitionDimensionRef,
-    visible,
-    width
+    transitionStatus
   });
   const {
     state,
     triggerId
   } = useAccordionItemContext();
-  const panelState = React.useMemo(() => ({
+  const panelState = {
     ...state,
-    transitionStatus
-  }), [state, transitionStatus]);
-  const element = useRenderElement('div', componentProps, {
+    transitionStatus: panelTransitionStatus
+  };
+  const resolvedStyle = resolveStyle(style, panelState);
+  const element = useRenderElement('div', {
+    ...componentProps,
+    style: undefined
+  }, {
     state: panelState,
-    ref: [forwardedRef, panelRef],
+    ref,
     props: [props, {
       'aria-labelledby': triggerId,
       role: 'region',
@@ -132,10 +102,18 @@ export const AccordionPanel = /*#__PURE__*/React.forwardRef(function AccordionPa
         [AccordionPanelCssVars.accordionPanelHeight]: height === undefined ? 'auto' : `${height}px`,
         [AccordionPanelCssVars.accordionPanelWidth]: width === undefined ? 'auto' : `${width}px`
       }
-    }, elementProps],
+    }, elementProps, resolvedStyle ? {
+      style: resolvedStyle
+    } : undefined,
+    // Resolve the public `style` prop so temporary `animationName: 'none'`
+    // can still win after user's inline styles have been merged.
+    shouldPreventOpenAnimation ? {
+      style: {
+        animationName: 'none'
+      }
+    } : undefined],
     stateAttributesMapping: accordionStateAttributesMapping
   });
-  const shouldRender = keepMounted || hiddenUntilFound || mounted;
   if (!shouldRender) {
     return null;
   }

package/esm/accordion/root/AccordionRoot.js

@@ -30,7 +30,7 @@ export const AccordionRoot = /*#__PURE__*/React.forwardRef(function AccordionRoo
     hiddenUntilFound: hiddenUntilFoundProp,
     keepMounted: keepMountedProp,
     loopFocus = true,
-    onValueChange: onValueChangeProp,
+    onValueChange,
     multiple = false,
     orientation = 'vertical',
     value: valueProp,
@@ -43,7 +43,7 @@ export const AccordionRoot = /*#__PURE__*/React.forwardRef(function AccordionRoo
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useIsoLayoutEffect(() => {
       if (hiddenUntilFoundProp && keepMountedProp === false) {
-        warn('The `keepMounted={false}` prop on a Accordion.Root will be ignored when using `hiddenUntilFound` since it requires Panels to remain mounted when closed.');
+        warn('The `keepMounted={false}` prop on `Accordion.Root` is ignored when `hiddenUntilFound` is enabled, since panels must remain mounted while closed.');
       }
     }, [hiddenUntilFoundProp, keepMountedProp]);
   }
@@ -56,7 +56,6 @@ export const AccordionRoot = /*#__PURE__*/React.forwardRef(function AccordionRoo
     }
     return undefined;
   }, [valueProp, defaultValueProp]);
-  const onValueChange = useStableCallback(onValueChangeProp);
   const accordionItemRefs = React.useRef([]);
   const [value, setValue] = useControlled({
     controlled: valueProp,
@@ -68,7 +67,7 @@ export const AccordionRoot = /*#__PURE__*/React.forwardRef(function AccordionRoo
     const details = createChangeEventDetails(REASONS.none);
     if (!multiple) {
       const nextValue = value[0] === newValue ? [] : [newValue];
-      onValueChange(nextValue, details);
+      onValueChange?.(nextValue, details);
       if (details.isCanceled) {
         return;
       }
@@ -76,14 +75,14 @@ export const AccordionRoot = /*#__PURE__*/React.forwardRef(function AccordionRoo
     } else if (nextOpen) {
       const nextOpenValues = value.slice();
       nextOpenValues.push(newValue);
-      onValueChange(nextOpenValues, details);
+      onValueChange?.(nextOpenValues, details);
       if (details.isCanceled) {
         return;
       }
       setValue(nextOpenValues);
     } else {
       const nextOpenValues = value.filter(v => v !== newValue);
-      onValueChange(nextOpenValues, details);
+      onValueChange?.(nextOpenValues, details);
       if (details.isCanceled) {
         return;
       }

package/esm/accordion/trigger/AccordionTrigger.js

@@ -6,11 +6,10 @@ import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { triggerOpenStateMapping } from "../../utils/collapsibleOpenStateMapping.js";
 import { useButton } from "../../internals/use-button/index.js";
 import { useCollapsibleRootContext } from "../../collapsible/root/CollapsibleRootContext.js";
-import { ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT, HOME, END, stopEvent } from "../../internals/composite/composite.js";
+import { ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT, COMPOSITE_KEYS, stopEvent } from "../../internals/composite/composite.js";
 import { useAccordionRootContext } from "../root/AccordionRootContext.js";
 import { useAccordionItemContext } from "../item/AccordionItemContext.js";
 import { useRenderElement } from "../../internals/useRenderElement.js";
-const SUPPORTED_KEYS = new Set([ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT, HOME, END]);
 function getActiveTriggers(accordionItemRefs) {
   const {
     current: accordionItemElements
@@ -82,14 +81,14 @@ export const AccordionTrigger = /*#__PURE__*/React.forwardRef(function Accordion
       setTriggerId(undefined);
     };
   }, [idProp, setTriggerId]);
-  const props = React.useMemo(() => ({
+  const props = {
     'aria-controls': open ? panelId : undefined,
     'aria-expanded': open,
     id,
     tabIndex: 0,
     onClick: handleTrigger,
     onKeyDown(event) {
-      if (!SUPPORTED_KEYS.has(event.key)) {
+      if (!COMPOSITE_KEYS.has(event.key)) {
         return;
       }
       stopEvent(event);
@@ -154,7 +153,7 @@ export const AccordionTrigger = /*#__PURE__*/React.forwardRef(function Accordion
         triggers[nextIndex].focus();
       }
     }
-  }), [accordionItemRefs, handleTrigger, id, isHorizontal, isRtl, loopFocus, open, panelId]);
+  };
   const element = useRenderElement('button', componentProps, {
     state,
     ref: [forwardedRef, buttonRef],

package/esm/alert-dialog/handle.d.ts

@@ -1,2 +1,15 @@
 import { DialogHandle } from "../dialog/store/DialogHandle.js";
-export declare function createAlertDialogHandle<Payload>(): DialogHandle<Payload>;
+import { DialogStore } from "../dialog/store/DialogStore.js";
+export declare const alertDialogState: {
+  readonly modal: true;
+  readonly disablePointerDismissal: true;
+  readonly role: "alertdialog";
+};
+/**
+ * A handle to control an Alert Dialog imperatively and to associate detached triggers with it.
+ */
+export declare class AlertDialogHandle<Payload> extends DialogHandle<Payload> {
+  private readonly __alertDialogBrand;
+  constructor(store?: DialogStore<Payload>);
+}
+export declare function createAlertDialogHandle<Payload>(): AlertDialogHandle<Payload>;

package/esm/alert-dialog/handle.js

@@ -1,9 +1,24 @@
 import { DialogHandle } from "../dialog/store/DialogHandle.js";
 import { DialogStore } from "../dialog/store/DialogStore.js";
+export const alertDialogState = {
+  modal: true,
+  disablePointerDismissal: true,
+  role: 'alertdialog'
+};
+
+/**
+ * A handle to control an Alert Dialog imperatively and to associate detached triggers with it.
+ */
+export class AlertDialogHandle extends DialogHandle {
+  constructor(store) {
+    const alertDialogStore = store ?? new DialogStore(alertDialogState);
+    super(alertDialogStore);
+    if (store) {
+      // Supplied stores may have been created as plain dialogs; enforce alert-dialog state.
+      this.store.update(alertDialogState);
+    }
+  }
+}
 export function createAlertDialogHandle() {
-  return new DialogHandle(new DialogStore({
-    modal: true,
-    disablePointerDismissal: true,
-    role: 'alertdialog'
-  }));
+  return new AlertDialogHandle();
 }

package/esm/alert-dialog/index.d.ts

@@ -6,5 +6,5 @@ export type { DialogDescriptionProps as AlertDialogDescriptionProps, DialogDescr
 export type { DialogPopupProps as AlertDialogPopupProps, DialogPopupState as AlertDialogPopupState } from "../dialog/popup/DialogPopup.js";
 export type { DialogPortalProps as AlertDialogPortalProps, DialogPortalState as AlertDialogPortalState } from "../dialog/portal/DialogPortal.js";
 export type { DialogTitleProps as AlertDialogTitleProps, DialogTitleState as AlertDialogTitleState } from "../dialog/title/DialogTitle.js";
-export type { DialogTriggerProps as AlertDialogTriggerProps, DialogTriggerState as AlertDialogTriggerState } from "../dialog/trigger/DialogTrigger.js";
+export type * from "./trigger/AlertDialogTrigger.js";
 export type { DialogViewportProps as AlertDialogViewportProps, DialogViewportState as AlertDialogViewportState } from "../dialog/viewport/DialogViewport.js";

package/esm/alert-dialog/index.parts.d.ts

@@ -5,7 +5,6 @@ export { DialogDescription as Description } from "../dialog/description/DialogDe
 export { DialogPopup as Popup } from "../dialog/popup/DialogPopup.js";
 export { DialogPortal as Portal } from "../dialog/portal/DialogPortal.js";
 export { DialogTitle as Title } from "../dialog/title/DialogTitle.js";
-export { DialogTrigger as Trigger } from "../dialog/trigger/DialogTrigger.js";
+export { AlertDialogTrigger as Trigger } from "./trigger/AlertDialogTrigger.js";
 export { DialogViewport as Viewport } from "../dialog/viewport/DialogViewport.js";
-export { createAlertDialogHandle as createHandle } from "./handle.js";
-export { DialogHandle as Handle } from "../dialog/store/DialogHandle.js";
+export { AlertDialogHandle as Handle, createAlertDialogHandle as createHandle } from "./handle.js";

package/esm/alert-dialog/index.parts.js

@@ -5,7 +5,6 @@ export { DialogDescription as Description } from "../dialog/description/DialogDe
 export { DialogPopup as Popup } from "../dialog/popup/DialogPopup.js";
 export { DialogPortal as Portal } from "../dialog/portal/DialogPortal.js";
 export { DialogTitle as Title } from "../dialog/title/DialogTitle.js";
-export { DialogTrigger as Trigger } from "../dialog/trigger/DialogTrigger.js";
+export { AlertDialogTrigger as Trigger } from "./trigger/AlertDialogTrigger.js";
 export { DialogViewport as Viewport } from "../dialog/viewport/DialogViewport.js";
-export { createAlertDialogHandle as createHandle } from "./handle.js";
-export { DialogHandle as Handle } from "../dialog/store/DialogHandle.js";
+export { AlertDialogHandle as Handle, createAlertDialogHandle as createHandle } from "./handle.js";

package/esm/alert-dialog/root/AlertDialogRoot.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
-import { DialogHandle } from "../../dialog/store/DialogHandle.js";
 import type { DialogRoot } from "../../dialog/root/DialogRoot.js";
+import type { AlertDialogHandle } from "../handle.js";
 /**
  * Groups all parts of the alert dialog.
  * Doesn't render its own HTML element.
@@ -12,15 +12,15 @@ export declare function AlertDialogRoot<Payload>(props: AlertDialogRoot.Props<Pa
 export interface AlertDialogRootState {}
 export interface AlertDialogRootProps<Payload = unknown> extends Omit<DialogRoot.Props<Payload>, 'modal' | 'disablePointerDismissal' | 'onOpenChange' | 'actionsRef' | 'handle'> {
   /**
-   * Event handler called when the dialog is opened or closed.
+   * Event handler called when the alert dialog is opened or closed.
    */
   onOpenChange?: ((open: boolean, eventDetails: AlertDialogRoot.ChangeEventDetails) => void) | undefined;
   /**
    * A ref to imperative actions.
-   * - `unmount`: When specified, the dialog will not be unmounted when closed.
-   * Instead, the `unmount` function must be called to unmount the dialog manually.
-   * Useful when the dialog's animation is controlled by an external library.
-   * - `close`: Closes the dialog imperatively when called.
+   * - `unmount`: When specified, the alert dialog will not be unmounted when closed.
+   * Instead, the `unmount` function must be called to unmount the alert dialog manually.
+   * Useful when the alert dialog's animation is controlled by an external library.
+   * - `close`: Closes the alert dialog imperatively when called.
    */
   actionsRef?: React.RefObject<AlertDialogRoot.Actions | null> | undefined;
   /**
@@ -28,7 +28,7 @@ export interface AlertDialogRootProps<Payload = unknown> extends Omit<DialogRoot
    * If specified, allows external triggers to control the alert dialog's open state.
    * Can be created with the AlertDialog.createHandle() method.
    */
-  handle?: DialogHandle<Payload> | undefined;
+  handle?: AlertDialogHandle<Payload> | undefined;
 }
 export type AlertDialogRootActions = DialogRoot.Actions;
 export type AlertDialogRootChangeEventReason = DialogRoot.ChangeEventReason;

package/esm/alert-dialog/root/AlertDialogRoot.js

@@ -1,11 +1,6 @@
 'use client';
 
-import * as React from 'react';
-import { IsDrawerContext } from "../../dialog/root/DialogRoot.js";
-import { useDialogRoot } from "../../dialog/root/useDialogRoot.js";
-import { DialogRootContext, useDialogRootContext } from "../../dialog/root/DialogRootContext.js";
-import { DialogStore } from "../../dialog/store/DialogStore.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { useRenderDialogRoot } from "../../dialog/root/useRenderDialogRoot.js";
 /**
  * Groups all parts of the alert dialog.
  * Doesn't render its own HTML element.
@@ -13,53 +8,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
  */
 export function AlertDialogRoot(props) {
-  const {
-    children,
-    open: openProp,
-    defaultOpen = false,
-    onOpenChange,
-    onOpenChangeComplete,
-    actionsRef,
-    handle,
-    triggerId: triggerIdProp,
-    defaultTriggerId: defaultTriggerIdProp = null
-  } = props;
-  const parentDialogRootContext = useDialogRootContext(true);
-  const nested = Boolean(parentDialogRootContext);
-  const store = DialogStore.useStore(handle?.store, {
-    open: defaultOpen,
-    openProp,
-    activeTriggerId: defaultTriggerIdProp,
-    triggerIdProp,
-    modal: true,
-    disablePointerDismissal: true,
-    nested,
-    role: 'alertdialog'
-  });
-  store.useControlledProp('openProp', openProp);
-  store.useControlledProp('triggerIdProp', triggerIdProp);
-  store.useSyncedValue('nested', nested);
-  store.useContextCallback('onOpenChange', onOpenChange);
-  store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
-  const payload = store.useState('payload');
-  useDialogRoot({
-    store,
-    actionsRef,
-    parentContext: parentDialogRootContext?.store.context,
-    isDrawer: false,
-    onOpenChange,
-    triggerIdProp
-  });
-  const contextValue = React.useMemo(() => ({
-    store
-  }), [store]);
-  return /*#__PURE__*/_jsx(IsDrawerContext.Provider, {
-    value: false,
-    children: /*#__PURE__*/_jsx(DialogRootContext.Provider, {
-      value: contextValue,
-      children: typeof children === 'function' ? children({
-        payload
-      }) : children
-    })
-  });
+  return useRenderDialogRoot(props, 'alert-dialog');
 }

package/esm/alert-dialog/trigger/AlertDialogTrigger.d.ts

@@ -0,0 +1,25 @@
+import type * as React from 'react';
+import { type DialogTriggerProps, type DialogTriggerState } from "../../dialog/trigger/DialogTrigger.js";
+import type { AlertDialogHandle } from "../handle.js";
+/**
+ * A button that opens the alert dialog.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
+ */
+export declare const AlertDialogTrigger: AlertDialogTrigger;
+export interface AlertDialogTrigger {
+  <Payload>(componentProps: AlertDialogTriggerProps<Payload>): React.JSX.Element;
+}
+export interface AlertDialogTriggerProps<Payload = unknown> extends Omit<DialogTriggerProps<Payload>, 'handle'> {
+  /**
+   * A handle to associate the trigger with an alert dialog.
+   * Can be created with the AlertDialog.createHandle() method.
+   */
+  handle?: AlertDialogHandle<Payload> | undefined;
+}
+export interface AlertDialogTriggerState extends DialogTriggerState {}
+export declare namespace AlertDialogTrigger {
+  type Props<Payload = unknown> = AlertDialogTriggerProps<Payload>;
+  type State = AlertDialogTriggerState;
+}

package/esm/alert-dialog/trigger/AlertDialogTrigger.js

@@ -0,0 +1,10 @@
+'use client';
+
+import { DialogTrigger } from "../../dialog/trigger/DialogTrigger.js";
+/**
+ * A button that opens the alert dialog.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
+ */
+export const AlertDialogTrigger = DialogTrigger;

package/esm/alert-dialog/trigger/AlertDialogTriggerDataAttributes.d.ts

@@ -0,0 +1,10 @@
+export declare enum AlertDialogTriggerDataAttributes {
+  /**
+   * Present when the trigger is disabled.
+   */
+  disabled = "data-disabled",
+  /**
+   * Present when the corresponding alert dialog is open.
+   */
+  popupOpen = "data-popup-open",
+}

package/esm/alert-dialog/trigger/AlertDialogTriggerDataAttributes.js

@@ -0,0 +1,12 @@
+import { CommonTriggerDataAttributes } from "../../utils/popupStateMapping.js";
+export let AlertDialogTriggerDataAttributes = function (AlertDialogTriggerDataAttributes) {
+  /**
+   * Present when the trigger is disabled.
+   */
+  AlertDialogTriggerDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the corresponding alert dialog is open.
+   */
+  AlertDialogTriggerDataAttributes[AlertDialogTriggerDataAttributes["popupOpen"] = CommonTriggerDataAttributes.popupOpen] = "popupOpen";
+  return AlertDialogTriggerDataAttributes;
+}({});