@base-ui/react 1.3.0 → 1.4.0

package/drawer/popup/DrawerPopup.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DrawerPopup = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _error = require("@base-ui/utils/error");
+var _safeReact = require("@base-ui/utils/safeReact");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _floatingUiReact = require("../../floating-ui-react");
@@ -124,6 +126,7 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
     finalFocus,
     initialFocus,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -146,13 +149,13 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
   const modal = store.useState('modal');
   const mounted = store.useState('mounted');
   const nested = store.useState('nested');
-  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
+  const nestedOpenDrawerCount = store.useState('nestedOpenDrawerCount');
   const transitionStatus = store.useState('transitionStatus');
   const open = store.useState('open');
   const openMethod = store.useState('openMethod');
   const titleElementId = store.useState('titleElementId');
   const role = store.useState('role');
-  const nestedDrawerOpen = nestedOpenDialogCount > 0;
+  const nestedDrawerOpen = nestedOpenDrawerCount > 0;
   const swipe = (0, _DrawerViewportContext.useDrawerViewportContext)(true);
   const swiping = swipe?.swiping ?? false;
   const swipeStrength = swipe?.swipeStrength ?? null;
@@ -164,6 +167,17 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
   (0, _DialogPortalContext.useDialogPortalContext)();
   const [popupHeight, setPopupHeight] = React.useState(0);
   const popupHeightRef = React.useRef(0);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      if (swipe) {
+        return;
+      }
+      const ownerStackMessage = _safeReact.SafeReact.captureOwnerStack?.() || '';
+      const message = '<Drawer.Popup> expected to be rendered within <Drawer.Viewport>. Omitting the ' + 'viewport disables drawer swipe handling and touch scroll locking. Wrap ' + '<Drawer.Popup> in <Drawer.Viewport>.';
+      (0, _error.error)(`${message}${ownerStackMessage}`);
+    }, [swipe]);
+  }
   const measureHeight = (0, _useStableCallback.useStableCallback)(() => {
     const popupElement = store.context.popupRef.current;
     if (!popupElement) {
@@ -323,7 +337,7 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
       style: {
         ...dragStyles,
         [_DrawerBackdropCssVars.DrawerBackdropCssVars.swipeProgress]: '0',
-        [_DrawerPopupCssVars.DrawerPopupCssVars.nestedDrawers]: nestedOpenDialogCount,
+        [_DrawerPopupCssVars.DrawerPopupCssVars.nestedDrawers]: nestedOpenDrawerCount,
         [_DrawerPopupCssVars.DrawerPopupCssVars.height]: popupHeightCssVarValue,
         [_DrawerPopupCssVars.DrawerPopupCssVars.snapPointOffset]: typeof snapPointOffsetValue === 'number' ? `${snapPointOffsetValue}px` : '0px',
         [_DrawerPopupCssVars.DrawerPopupCssVars.frontmostHeight]: frontmostHeight ? `${frontmostHeight}px` : undefined,

package/drawer/root/DrawerRoot.d.ts

@@ -62,7 +62,7 @@ export interface DrawerRootProps<Payload = unknown> {
   /**
    * ID of the trigger that the drawer is associated with.
    * This is useful in conjunction with the `open` prop to create a controlled drawer.
-   * There's no need to specify this prop when the drawer is uncontrolled (i.e. when the `open` prop is not set).
+   * There's no need to specify this prop when the drawer is uncontrolled (that is, when the `open` prop is not set).
    */
   triggerId?: string | null | undefined;
   /**

package/drawer/root/DrawerRoot.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DrawerRoot = DrawerRoot;
 var React = _interopRequireWildcard(require("react"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _useControlled = require("@base-ui/utils/useControlled");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _owner = require("@base-ui/utils/owner");
@@ -14,6 +15,7 @@ var _detectBrowser = require("@base-ui/utils/detectBrowser");
 var _useId = require("@base-ui/utils/useId");
 var _DrawerRootContext = require("./DrawerRootContext");
 var _dialog = require("../../dialog");
+var _DialogRoot = require("../../dialog/root/DialogRoot");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _DialogRootContext = require("../../dialog/root/DialogRootContext");
@@ -151,18 +153,21 @@ function DrawerRoot(props) {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerRootContext.DrawerRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialog.Dialog.Root, {
-      open: openProp,
-      defaultOpen: defaultOpen,
-      onOpenChange: handleOpenChange,
-      onOpenChangeComplete: onOpenChangeComplete,
-      disablePointerDismissal: disablePointerDismissal,
-      modal: modal,
-      actionsRef: actionsRef,
-      handle: handle,
-      triggerId: triggerIdProp,
-      defaultTriggerId: defaultTriggerIdProp,
-      children: resolvedChildren
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogRoot.IsDrawerContext.Provider, {
+      value: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialog.Dialog.Root, {
+        open: openProp,
+        defaultOpen: defaultOpen,
+        onOpenChange: handleOpenChange,
+        onOpenChangeComplete: onOpenChangeComplete,
+        disablePointerDismissal: disablePointerDismissal,
+        modal: modal,
+        actionsRef: actionsRef,
+        handle: handle,
+        triggerId: triggerIdProp,
+        defaultTriggerId: defaultTriggerIdProp,
+        children: resolvedChildren
+      })
     })
   });
 }
@@ -229,9 +234,9 @@ function DrawerProviderReporter() {
       dialogRootContext.store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.closeWatcher, event));
     }
     const closeWatcher = new CloseWatcherCtor();
-    closeWatcher.addEventListener('close', handleCloseWatcher);
+    const unsubscribe = (0, _addEventListener.addEventListener)(closeWatcher, 'close', handleCloseWatcher);
     return () => {
-      closeWatcher.removeEventListener('close', handleCloseWatcher);
+      unsubscribe();
       closeWatcher.destroy();
     };
   }, [dialogRootContext.store, isTopmost, open, popupElement]);

package/drawer/root/DrawerRootContext.d.ts

@@ -38,6 +38,10 @@ export interface DrawerRootContext {
    * transitioning out).
    */
   hasNestedDrawer: boolean;
+  /**
+   * Called by the drawer popup to report its own measured height.
+   */
+  onPopupHeightChange: (height: number) => void;
   /**
    * Whether a nested drawer is currently being swiped.
    */
@@ -50,10 +54,6 @@ export interface DrawerRootContext {
    * Called by a nested drawer to report whether it is still present (open or transitioning out).
    */
   onNestedDrawerPresenceChange: (present: boolean) => void;
-  /**
-   * Called by the drawer popup to report its own measured height.
-   */
-  onPopupHeightChange: (height: number) => void;
   /**
    * Called by a nested drawer to report the frontmost height of its own stack.
    */

package/drawer/swipe-area/DrawerSwipeArea.js

@@ -76,6 +76,7 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
     render,
     disabled = false,
     swipeDirection: swipeDirectionProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -247,6 +248,18 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
     }
     store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.swipe, event, swipeAreaRef.current ?? undefined));
   }
+  function resetSwipeInteractionState() {
+    swipeStartEventRef.current = null;
+    openedBySwipeRef.current = false;
+    closedOffsetRef.current = null;
+    setSwipeActive(false);
+  }
+  function finishSwipeInteraction() {
+    resetSwipeInteractionState();
+    enableDismissAfterRelease();
+    resetDragDelta();
+    clearSwipeStyles();
+  }
   const swipe = (0, _useSwipeDismiss.useSwipeDismiss)({
     enabled,
     directions: [resolvedSwipeDirection],
@@ -305,15 +318,10 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
       } else if (openedBySwipeRef.current) {
         closeDrawer(event);
       }
-      swipeStartEventRef.current = null;
-      openedBySwipeRef.current = false;
-      setSwipeActive(false);
-      closedOffsetRef.current = null;
-      enableDismissAfterRelease();
-      resetDragDelta();
-      clearSwipeStyles();
+      finishSwipeInteraction();
       return false;
-    }
+    },
+    onCancel: finishSwipeInteraction
   });
   const swipePointerProps = swipe.getPointerProps();
   const swipeTouchProps = swipe.getTouchProps();
@@ -323,10 +331,7 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
       resetSwipe();
       resetDragDelta();
       clearSwipeStyles();
-      setSwipeActive(false);
-      openedBySwipeRef.current = false;
-      swipeStartEventRef.current = null;
-      closedOffsetRef.current = null;
+      resetSwipeInteractionState();
     }
   }, [clearSwipeStyles, enabled, resetDragDelta, resetSwipe]);
   React.useEffect(() => {

package/drawer/viewport/DrawerViewport.js

@@ -9,6 +9,7 @@ exports.DrawerViewport = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _dom = require("@floating-ui/utils/dom");
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _owner = require("@base-ui/utils/owner");
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
@@ -55,6 +56,7 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
   const {
     className,
     render,
+    style,
     children,
     ...elementProps
   } = props;
@@ -73,10 +75,10 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
   const open = store.useState('open');
   const mounted = store.useState('mounted');
   const nested = store.useState('nested');
-  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
+  const nestedOpenDrawerCount = store.useState('nestedOpenDrawerCount');
   const viewportElement = store.useState('viewportElement');
   const popupElementState = store.useState('popupElement');
-  const nestedDrawerOpen = nestedOpenDialogCount > 0;
+  const nestedDrawerOpen = nestedOpenDrawerCount > 0;
   const scrollAxis = swipeDirection === 'left' || swipeDirection === 'right' ? 'horizontal' : 'vertical';
   const isVerticalScrollAxis = scrollAxis === 'vertical';
   const crossScrollAxis = isVerticalScrollAxis ? 'horizontal' : 'vertical';
@@ -147,6 +149,13 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
     store.context.popupRef.current?.removeAttribute(_stateAttributesMapping.TransitionStatusDataAttributes.endingStyle);
     setSwipeRelease(null);
   });
+  const finishNestedSwipe = (0, _useStableCallback.useStableCallback)(() => {
+    if (!nestedSwipeActiveRef.current) {
+      return;
+    }
+    nestedSwipeActiveRef.current = false;
+    notifyParentSwipingChange?.(false);
+  });
   const applySwipeProgress = (0, _useStableCallback.useStableCallback)(({
     resolvedProgress,
     shouldTrackProgress,
@@ -154,9 +163,12 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
   }) => {
     const isActive = open && !nested && shouldTrackProgress;
     const swipeProgress = isActive ? resolvedProgress : 0;
+    const nestedSwipeProgress = open && shouldTrackProgress ? resolvedProgress : 0;
     if (notifyParent && notifyParentSwipeProgressChange) {
-      const nestedSwipeProgress = open && shouldTrackProgress ? resolvedProgress : 0;
       notifyParentSwipeProgressChange(nestedSwipeProgress);
+      if (nestedSwipeProgress <= 0) {
+        finishNestedSwipe();
+      }
     }
     visualStateStore?.set({
       swipeProgress,
@@ -275,9 +287,8 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
     },
     onSwipingChange(swiping) {
       setBackdropSwipingAttribute(store.context.backdropRef.current, swiping);
-      if (!swiping) {
-        nestedSwipeActiveRef.current = false;
-        notifyParentSwipingChange?.(false);
+      if (!swiping && !notifyParentSwipeProgressChange) {
+        finishNestedSwipe();
       }
     },
     swipeThreshold({
@@ -359,7 +370,7 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
         if (!popupElement) {
           return;
         }
-        notifyParentSwipingChange?.(false);
+        finishNestedSwipe();
         setSwipeDismissed(true);
         popupElement.style.removeProperty('transition');
         popupElement.setAttribute(_stateAttributesMapping.TransitionStatusDataAttributes.endingStyle, '');
@@ -644,15 +655,10 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
       }
       updateTouchScrollPosition(touchState, touch);
     }
-    doc.addEventListener('touchmove', handleNativeTouchMove, {
+    return (0, _addEventListener.addEventListener)(doc, 'touchmove', handleNativeTouchMove, {
       passive: false,
       capture: true
     });
-    return () => {
-      doc.removeEventListener('touchmove', handleNativeTouchMove, {
-        capture: true
-      });
-    };
   }, [mounted, nestedDrawerOpen, open, popupElementState, isVerticalScrollAxis, scrollAxis, swipeDirection, viewportElement]);
   React.useEffect(() => {
     if (!snapPointRange || swipe.swiping) {
@@ -689,9 +695,9 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
         frontmostHeight: 0
       });
       setBackdropSwipingAttribute(store.context.backdropRef.current, false);
-      notifyParentSwipingChange?.(false);
+      finishNestedSwipe();
     };
-  }, [notifyParentSwipingChange, store, visualStateStore]);
+  }, [finishNestedSwipe, store, visualStateStore]);
   const swipeProviderValue = React.useMemo(() => ({
     swiping: swipe.swiping,
     getDragStyles: swipe.getDragStyles,
@@ -781,10 +787,16 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
           return;
         }
         const rootElement = viewportElement ?? popupElementState;
-        const target = (0, _dom.isElement)(event.target) ? event.target : null;
+        const eventTarget = (0, _utils.getTarget)(event.nativeEvent);
+        const target = (0, _dom.isElement)(eventTarget) ? eventTarget : null;
+        if (rootElement && target && !(0, _utils.contains)(rootElement, target)) {
+          ignoreTouchSwipeRef.current = true;
+          touchScrollStateRef.current = null;
+          return;
+        }
         let scrollTarget = null;
         let hasCrossAxisScrollableContent = false;
-        if (rootElement && target && (0, _utils.contains)(rootElement, target)) {
+        if (rootElement && target) {
           scrollTarget = (0, _scrollable.findScrollableTouchTarget)(target, rootElement, scrollAxis);
           hasCrossAxisScrollableContent = (0, _scrollable.findScrollableTouchTarget)(target, rootElement, crossScrollAxis) != null;
         }
@@ -884,13 +896,13 @@ function hasExpandedSelectionWithinTarget(selection, target) {
   return selection.containsNode(target, true) || (0, _utils.contains)(target, anchorElement) || (0, _utils.contains)(target, focusElement);
 }
 function shouldIgnoreSwipeForTextSelection(doc, rootElement) {
-  const activeElement = doc.activeElement;
-  const activeElementWithinRoot = Boolean(activeElement && (0, _utils.contains)(rootElement, activeElement));
-  if (activeElementWithinRoot && isTextSelectionControl(activeElement)) {
+  const activeEl = (0, _utils.activeElement)(doc);
+  const activeElementWithinRoot = Boolean(activeEl && (0, _utils.contains)(rootElement, activeEl));
+  if (activeElementWithinRoot && isTextSelectionControl(activeEl)) {
     const {
       selectionStart,
       selectionEnd
-    } = activeElement;
+    } = activeEl;
     if (selectionStart != null && selectionEnd != null && selectionStart < selectionEnd) {
       return true;
     }
@@ -906,7 +918,7 @@ function isEventOnRangeInput(event, win) {
   if (composedPath) {
     return composedPath.some(pathTarget => isRangeInput(pathTarget, win));
   }
-  return isRangeInput(event.target, win);
+  return isRangeInput((0, _utils.getTarget)(event), win);
 }
 function isReactTouchEventOnRangeInput(event) {
   return isEventOnRangeInput(event.nativeEvent, (0, _owner.ownerWindow)(event.currentTarget));

package/esm/accordion/header/AccordionHeader.js

@@ -15,6 +15,7 @@ export const AccordionHeader = /*#__PURE__*/React.forwardRef(function AccordionH
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/accordion/item/AccordionItem.js

@@ -25,6 +25,7 @@ export const AccordionItem = /*#__PURE__*/React.forwardRef(function AccordionIte
     onOpenChange: onOpenChangeProp,
     render,
     value: valueProp,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/accordion/panel/AccordionPanel.js

@@ -24,6 +24,7 @@ export const AccordionPanel = /*#__PURE__*/React.forwardRef(function AccordionPa
     keepMounted: keepMountedProp,
     id: idProp,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -134,7 +135,7 @@ export const AccordionPanel = /*#__PURE__*/React.forwardRef(function AccordionPa
     }, elementProps],
     stateAttributesMapping: accordionStateAttributesMapping
   });
-  const shouldRender = keepMounted || hiddenUntilFound || !keepMounted && mounted;
+  const shouldRender = keepMounted || hiddenUntilFound || mounted;
   if (!shouldRender) {
     return null;
   }

package/esm/accordion/root/AccordionRoot.d.ts

@@ -45,7 +45,7 @@ export interface AccordionRootProps<Value = any> extends BaseUIComponentProps<'d
    */
   disabled?: boolean | undefined;
   /**
-   * Allows the browser’s built-in page search to find and expand the panel contents.
+   * Allows the browser's built-in page search to find and expand the panel contents.
    *
    * Overrides the `keepMounted` prop and uses `hidden="until-found"`
    * to hide the element without removing it from the DOM.

package/esm/accordion/root/AccordionRoot.js

@@ -35,6 +35,7 @@ export const AccordionRoot = /*#__PURE__*/React.forwardRef(function AccordionRoo
     orientation = 'vertical',
     value: valueProp,
     defaultValue: defaultValueProp,
+    style,
     ...elementProps
   } = componentProps;
   const direction = useDirection();

package/esm/accordion/trigger/AccordionTrigger.js

@@ -42,6 +42,7 @@ export const AccordionTrigger = /*#__PURE__*/React.forwardRef(function Accordion
     id: idProp,
     render,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -96,7 +97,7 @@ export const AccordionTrigger = /*#__PURE__*/React.forwardRef(function Accordion
       const numOfEnabledTriggers = triggers.length;
       const lastIndex = numOfEnabledTriggers - 1;
       let nextIndex = -1;
-      const thisIndex = triggers.indexOf(event.target);
+      const thisIndex = triggers.indexOf(event.currentTarget);
       function toNext() {
         if (loopFocus) {
           nextIndex = thisIndex + 1 > lastIndex ? 0 : thisIndex + 1;

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

@@ -1,2 +1,10 @@
 export * as AlertDialog from "./index.parts.js";
-export type * from "./root/AlertDialogRoot.js";
+export type * from "./root/AlertDialogRoot.js";
+export type { DialogBackdropProps as AlertDialogBackdropProps, DialogBackdropState as AlertDialogBackdropState } from "../dialog/backdrop/DialogBackdrop.js";
+export type { DialogCloseProps as AlertDialogCloseProps, DialogCloseState as AlertDialogCloseState } from "../dialog/close/DialogClose.js";
+export type { DialogDescriptionProps as AlertDialogDescriptionProps, DialogDescriptionState as AlertDialogDescriptionState } from "../dialog/description/DialogDescription.js";
+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 { DialogViewportProps as AlertDialogViewportProps, DialogViewportState as AlertDialogViewportState } from "../dialog/viewport/DialogViewport.js";

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

@@ -4,7 +4,7 @@ import { DialogHandle } from "../../dialog/store/DialogHandle.js";
 import type { DialogRoot } from "../../dialog/root/DialogRoot.js";
 /**
  * Groups all parts of the alert dialog.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
  */

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

@@ -1,14 +1,14 @@
 'use client';
 
 import * as React from 'react';
-import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
+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";
 /**
  * Groups all parts of the alert dialog.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
  */
@@ -24,20 +24,18 @@ export function AlertDialogRoot(props) {
     triggerId: triggerIdProp,
     defaultTriggerId: defaultTriggerIdProp = null
   } = props;
-  const parentDialogRootContext = useDialogRootContext();
+  const parentDialogRootContext = useDialogRootContext(true);
   const nested = Boolean(parentDialogRootContext);
-  const store = useRefWithInit(() => {
-    return handle?.store ?? new DialogStore({
-      open: defaultOpen,
-      openProp,
-      activeTriggerId: defaultTriggerIdProp,
-      triggerIdProp,
-      modal: true,
-      disablePointerDismissal: true,
-      nested,
-      role: 'alertdialog'
-    });
-  }).current;
+  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);
@@ -48,16 +46,20 @@ export function AlertDialogRoot(props) {
     store,
     actionsRef,
     parentContext: parentDialogRootContext?.store.context,
+    isDrawer: false,
     onOpenChange,
     triggerIdProp
   });
   const contextValue = React.useMemo(() => ({
     store
   }), [store]);
-  return /*#__PURE__*/_jsx(DialogRootContext.Provider, {
-    value: contextValue,
-    children: typeof children === 'function' ? children({
-      payload
-    }) : children
+  return /*#__PURE__*/_jsx(IsDrawerContext.Provider, {
+    value: false,
+    children: /*#__PURE__*/_jsx(DialogRootContext.Provider, {
+      value: contextValue,
+      children: typeof children === 'function' ? children({
+        payload
+      }) : children
+    })
   });
 }

package/esm/autocomplete/clear/AutocompleteClearDataAttributes.d.ts

@@ -0,0 +1 @@
+export { ComboboxClearDataAttributes as AutocompleteClearDataAttributes } from "../../combobox/clear/ComboboxClearDataAttributes.js";

package/esm/autocomplete/clear/AutocompleteClearDataAttributes.js

@@ -0,0 +1 @@
+export { ComboboxClearDataAttributes as AutocompleteClearDataAttributes } from "../../combobox/clear/ComboboxClearDataAttributes.js";

package/esm/autocomplete/index.d.ts

@@ -1,19 +1,22 @@
 export * as Autocomplete from "./index.parts.js";
 export type * from "./root/AutocompleteRoot.js";
+export type * from "./trigger/AutocompleteTrigger.js";
+export type * from "./input-group/AutocompleteInputGroup.js";
+export type * from "./item/AutocompleteItem.js";
 export type * from "./value/AutocompleteValue.js";
-export type { ComboboxTriggerProps as AutocompleteTriggerProps, ComboboxTriggerState as AutocompleteTriggerState } from "../combobox/trigger/ComboboxTrigger.js";
 export type { ComboboxInputProps as AutocompleteInputProps, ComboboxInputState as AutocompleteInputState } from "../combobox/input/ComboboxInput.js";
-export type { ComboboxInputGroupProps as AutocompleteInputGroupProps, ComboboxInputGroupState as AutocompleteInputGroupState } from "../combobox/input-group/ComboboxInputGroup.js";
+export type { ComboboxIconProps as AutocompleteIconProps, ComboboxIconState as AutocompleteIconState } from "../combobox/icon/ComboboxIcon.js";
+export type { ComboboxClearProps as AutocompleteClearProps, ComboboxClearState as AutocompleteClearState } from "../combobox/clear/ComboboxClear.js";
 export type { ComboboxPopupProps as AutocompletePopupProps, ComboboxPopupState as AutocompletePopupState } from "../combobox/popup/ComboboxPopup.js";
 export type { ComboboxPositionerProps as AutocompletePositionerProps, ComboboxPositionerState as AutocompletePositionerState } from "../combobox/positioner/ComboboxPositioner.js";
 export type { ComboboxListProps as AutocompleteListProps, ComboboxListState as AutocompleteListState } from "../combobox/list/ComboboxList.js";
-export type { ComboboxItemProps as AutocompleteItemProps, ComboboxItemState as AutocompleteItemState } from "../combobox/item/ComboboxItem.js";
+export type { ComboboxRowProps as AutocompleteRowProps, ComboboxRowState as AutocompleteRowState } from "../combobox/row/ComboboxRow.js";
 export type { ComboboxArrowProps as AutocompleteArrowProps, ComboboxArrowState as AutocompleteArrowState } from "../combobox/arrow/ComboboxArrow.js";
 export type { ComboboxBackdropProps as AutocompleteBackdropProps, ComboboxBackdropState as AutocompleteBackdropState } from "../combobox/backdrop/ComboboxBackdrop.js";
-export type { ComboboxPortalProps as AutocompletePortalProps } from "../combobox/portal/ComboboxPortal.js";
+export type { ComboboxPortalProps as AutocompletePortalProps, ComboboxPortalState as AutocompletePortalState } from "../combobox/portal/ComboboxPortal.js";
 export type { ComboboxGroupProps as AutocompleteGroupProps, ComboboxGroupState as AutocompleteGroupState } from "../combobox/group/ComboboxGroup.js";
 export type { ComboboxGroupLabelProps as AutocompleteGroupLabelProps, ComboboxGroupLabelState as AutocompleteGroupLabelState } from "../combobox/group-label/ComboboxGroupLabel.js";
 export type { ComboboxEmptyProps as AutocompleteEmptyProps, ComboboxEmptyState as AutocompleteEmptyState } from "../combobox/empty/ComboboxEmpty.js";
 export type { ComboboxStatusProps as AutocompleteStatusProps, ComboboxStatusState as AutocompleteStatusState } from "../combobox/status/ComboboxStatus.js";
-export type { ComboboxCollectionProps as AutocompleteCollectionProps } from "../combobox/collection/ComboboxCollection.js";
+export type { ComboboxCollectionState as AutocompleteCollectionState, ComboboxCollectionProps as AutocompleteCollectionProps } from "../combobox/collection/ComboboxCollection.js";
 export type { Filter as AutocompleteFilter, UseFilterOptions as AutocompleteFilterOptions } from "../combobox/root/utils/useFilter.js";

package/esm/autocomplete/index.parts.d.ts

@@ -1,8 +1,8 @@
 export { AutocompleteRoot as Root } from "./root/AutocompleteRoot.js";
 export { AutocompleteValue as Value } from "./value/AutocompleteValue.js";
-export { ComboboxTrigger as Trigger } from "../combobox/trigger/ComboboxTrigger.js";
+export { AutocompleteTrigger as Trigger } from "./trigger/AutocompleteTrigger.js";
 export { ComboboxInput as Input } from "../combobox/input/ComboboxInput.js";
-export { ComboboxInputGroup as InputGroup } from "../combobox/input-group/ComboboxInputGroup.js";
+export { AutocompleteInputGroup as InputGroup } from "./input-group/AutocompleteInputGroup.js";
 export { ComboboxIcon as Icon } from "../combobox/icon/ComboboxIcon.js";
 export { ComboboxClear as Clear } from "../combobox/clear/ComboboxClear.js";
 export { ComboboxList as List } from "../combobox/list/ComboboxList.js";
@@ -14,7 +14,7 @@ export { ComboboxPopup as Popup } from "../combobox/popup/ComboboxPopup.js";
 export { ComboboxArrow as Arrow } from "../combobox/arrow/ComboboxArrow.js";
 export { ComboboxGroup as Group } from "../combobox/group/ComboboxGroup.js";
 export { ComboboxGroupLabel as GroupLabel } from "../combobox/group-label/ComboboxGroupLabel.js";
-export { ComboboxItem as Item } from "../combobox/item/ComboboxItem.js";
+export { AutocompleteItem as Item } from "./item/AutocompleteItem.js";
 export { ComboboxRow as Row } from "../combobox/row/ComboboxRow.js";
 export { ComboboxCollection as Collection } from "../combobox/collection/ComboboxCollection.js";
 export { ComboboxEmpty as Empty } from "../combobox/empty/ComboboxEmpty.js";

package/esm/autocomplete/index.parts.js

@@ -1,8 +1,8 @@
 export { AutocompleteRoot as Root } from "./root/AutocompleteRoot.js";
 export { AutocompleteValue as Value } from "./value/AutocompleteValue.js";
-export { ComboboxTrigger as Trigger } from "../combobox/trigger/ComboboxTrigger.js";
+export { AutocompleteTrigger as Trigger } from "./trigger/AutocompleteTrigger.js";
 export { ComboboxInput as Input } from "../combobox/input/ComboboxInput.js";
-export { ComboboxInputGroup as InputGroup } from "../combobox/input-group/ComboboxInputGroup.js";
+export { AutocompleteInputGroup as InputGroup } from "./input-group/AutocompleteInputGroup.js";
 export { ComboboxIcon as Icon } from "../combobox/icon/ComboboxIcon.js";
 export { ComboboxClear as Clear } from "../combobox/clear/ComboboxClear.js";
 export { ComboboxList as List } from "../combobox/list/ComboboxList.js";
@@ -14,7 +14,7 @@ export { ComboboxPopup as Popup } from "../combobox/popup/ComboboxPopup.js";
 export { ComboboxArrow as Arrow } from "../combobox/arrow/ComboboxArrow.js";
 export { ComboboxGroup as Group } from "../combobox/group/ComboboxGroup.js";
 export { ComboboxGroupLabel as GroupLabel } from "../combobox/group-label/ComboboxGroupLabel.js";
-export { ComboboxItem as Item } from "../combobox/item/ComboboxItem.js";
+export { AutocompleteItem as Item } from "./item/AutocompleteItem.js";
 export { ComboboxRow as Row } from "../combobox/row/ComboboxRow.js";
 export { ComboboxCollection as Collection } from "../combobox/collection/ComboboxCollection.js";
 export { ComboboxEmpty as Empty } from "../combobox/empty/ComboboxEmpty.js";