@base-ui/react 1.3.0 → 1.4.1

package/dialog/store/DialogStore.d.ts

@@ -9,6 +9,7 @@ export type State<Payload> = PopupStoreState<Payload> & {
   openMethod: InteractionType | null;
   nested: boolean;
   nestedOpenDialogCount: number;
+  nestedOpenDrawerCount: number;
   titleElementId: string | undefined;
   descriptionElementId: string | undefined;
   viewportElement: HTMLElement | null;
@@ -19,13 +20,14 @@ type Context = PopupStoreContext<DialogRoot.ChangeEventDetails> & {
   readonly backdropRef: React.RefObject<HTMLDivElement | null>;
   readonly internalBackdropRef: React.RefObject<HTMLDivElement | null>;
   readonly outsidePressEnabledRef: React.MutableRefObject<boolean>;
-  readonly onNestedDialogOpen?: ((ownChildrenCount: number) => void) | undefined;
+  readonly onNestedDialogOpen?: ((dialogCount: number, drawerCount: number) => void) | undefined;
   readonly onNestedDialogClose?: (() => void) | undefined;
 };
 declare const selectors: {
   modal: (state: State<unknown>) => boolean | "trap-focus";
   nested: (state: State<unknown>) => boolean;
   nestedOpenDialogCount: (state: State<unknown>) => number;
+  nestedOpenDrawerCount: (state: State<unknown>) => number;
   disablePointerDismissal: (state: State<unknown>) => boolean;
   openMethod: (state: State<unknown>) => InteractionType | null;
   descriptionElementId: (state: State<unknown>) => string | undefined;
@@ -36,7 +38,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -53,7 +55,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -70,7 +72,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -82,12 +84,12 @@ declare const selectors: {
     activeTriggerProps: import("../../index.js").HTMLProps;
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
-  }) => import("../../utils/useTransitionStatus.js").TransitionStatus;
+  }) => import("../../internals/useTransitionStatus.js").TransitionStatus;
   floatingRootContext: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -104,7 +106,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -121,7 +123,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -138,7 +140,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -155,7 +157,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -172,7 +174,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -189,7 +191,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -206,7 +208,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -223,7 +225,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -240,7 +242,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -257,7 +259,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -274,7 +276,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -291,5 +293,6 @@ declare const selectors: {
 export declare class DialogStore<Payload> extends ReactStore<Readonly<State<Payload>>, Context, typeof selectors> {
   constructor(initialState?: Partial<State<Payload>>);
   setOpen: (nextOpen: boolean, eventDetails: Omit<DialogRoot.ChangeEventDetails, "preventUnmountOnClose">) => void;
+  static useStore<Payload>(externalStore: DialogStore<Payload> | undefined, initialState?: Partial<State<Payload>>): DialogStore<Payload>;
 }
 export {};

package/dialog/store/DialogStore.js

@@ -7,12 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.DialogStore = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@base-ui/utils/store");
+var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _popups = require("../../utils/popups");
 const selectors = {
   ..._popups.popupStoreSelectors,
   modal: (0, _store.createSelector)(state => state.modal),
   nested: (0, _store.createSelector)(state => state.nested),
   nestedOpenDialogCount: (0, _store.createSelector)(state => state.nestedOpenDialogCount),
+  nestedOpenDrawerCount: (0, _store.createSelector)(state => state.nestedOpenDrawerCount),
   disablePointerDismissal: (0, _store.createSelector)(state => state.disablePointerDismissal),
   openMethod: (0, _store.createSelector)(state => state.openMethod),
   descriptionElementId: (0, _store.createSelector)(state => state.descriptionElementId),
@@ -47,13 +49,7 @@ class DialogStore extends _store.ReactStore {
     if (eventDetails.isCanceled) {
       return;
     }
-    const details = {
-      open: nextOpen,
-      nativeEvent: eventDetails.event,
-      reason: eventDetails.reason,
-      nested: this.state.nested
-    };
-    this.state.floatingRootContext.context.events?.emit('openchange', details);
+    this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
     const updatedState = {
       open: nextOpen
     };
@@ -67,6 +63,13 @@ class DialogStore extends _store.ReactStore {
     }
     this.update(updatedState);
   };
+  static useStore(externalStore, initialState) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const internalStore = (0, _useRefWithInit.useRefWithInit)(() => {
+      return new DialogStore(initialState);
+    }).current;
+    return externalStore ?? internalStore;
+  }
 }
 exports.DialogStore = DialogStore;
 function createInitialState(initialState = {}) {
@@ -81,6 +84,7 @@ function createInitialState(initialState = {}) {
     openMethod: null,
     nested: false,
     nestedOpenDialogCount: 0,
+    nestedOpenDrawerCount: 0,
     role: 'dialog',
     ...initialState
   };

package/dialog/title/DialogTitle.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type BaseUIComponentProps } from "../../utils/types.js";
+import { type BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A heading that labels the dialog.
  * Renders an `<h2>` element.

package/dialog/title/DialogTitle.js

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.DialogTitle = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _DialogRootContext = require("../root/DialogRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _useBaseUiId = require("../../utils/useBaseUiId");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _useBaseUiId = require("../../internals/useBaseUiId");
 /**
  * A heading that labels the dialog.
  * Renders an `<h2>` element.
@@ -20,6 +20,7 @@ const DialogTitle = exports.DialogTitle = /*#__PURE__*/React.forwardRef(function
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;

package/dialog/trigger/DialogTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 import { DialogHandle } from "../store/DialogHandle.js";
 /**
  * A button that opens the dialog.

package/dialog/trigger/DialogTrigger.js

@@ -10,12 +10,12 @@ exports.DialogTrigger = void 0;
 var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 var _DialogRootContext = require("../root/DialogRootContext");
-var _useButton = require("../../use-button/useButton");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useButton = require("../../internals/use-button/useButton");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _constants = require("../../utils/constants");
+var _constants = require("../../internals/constants");
 var _popups = require("../../utils/popups");
-var _useBaseUiId = require("../../utils/useBaseUiId");
+var _useBaseUiId = require("../../internals/useBaseUiId");
 var _floatingUiReact = require("../../floating-ui-react");
 /**
  * A button that opens the dialog.
@@ -32,6 +32,7 @@ const DialogTrigger = exports.DialogTrigger = /*#__PURE__*/React.forwardRef(func
     id: idProp,
     payload,
     handle,
+    style,
     ...elementProps
   } = componentProps;
   const dialogRootContext = (0, _DialogRootContext.useDialogRootContext)(true);

package/dialog/viewport/DialogViewport.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type BaseUIComponentProps } from "../../utils/types.js";
-import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
+import { type BaseUIComponentProps } from "../../internals/types.js";
+import { type TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * A positioning container for the dialog popup that can be made scrollable.
  * Renders a `<div>` element.

package/dialog/viewport/DialogViewport.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DialogViewport = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _DialogRootContext = require("../root/DialogRootContext");
 var _DialogPortalContext = require("../portal/DialogPortalContext");
 var _DialogViewportDataAttributes = require("./DialogViewportDataAttributes");
@@ -39,6 +39,7 @@ const DialogViewport = exports.DialogViewport = /*#__PURE__*/React.forwardRef(fu
     className,
     render,
     children,
+    style,
     ...elementProps
   } = componentProps;
   const keepMounted = (0, _DialogPortalContext.useDialogPortalContext)();

package/direction-provider/DirectionProvider.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type TextDirection } from "./DirectionContext.js";
+import { type TextDirection } from "../internals/direction-context/DirectionContext.js";
 /**
  * Enables RTL behavior for Base UI components.
  *

package/direction-provider/DirectionProvider.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DirectionProvider = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _DirectionContext = require("./DirectionContext");
+var _DirectionContext = require("../internals/direction-context/DirectionContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Enables RTL behavior for Base UI components.

package/direction-provider/index.parts.d.ts

@@ -1,3 +1,3 @@
 export { DirectionProvider as Provider } from "./DirectionProvider.js";
-export { useDirection } from "./DirectionContext.js";
-export type { TextDirection } from "./DirectionContext.js";
+export { useDirection } from "../internals/direction-context/DirectionContext.js";
+export type { TextDirection } from "../internals/direction-context/DirectionContext.js";

package/direction-provider/index.parts.js

@@ -16,4 +16,4 @@ Object.defineProperty(exports, "useDirection", {
   }
 });
 var _DirectionProvider = require("./DirectionProvider");
-var _DirectionContext = require("./DirectionContext");
+var _DirectionContext = require("../internals/direction-context/DirectionContext");

package/drawer/backdrop/DrawerBackdrop.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
-import { type BaseUIComponentProps } from "../../utils/types.js";
+import { type TransitionStatus } from "../../internals/useTransitionStatus.js";
+import { type BaseUIComponentProps } from "../../internals/types.js";
 /**
  * An overlay displayed beneath the popup.
  * Renders a `<div>` element.

package/drawer/backdrop/DrawerBackdrop.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.DrawerBackdrop = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _DialogRootContext = require("../../dialog/root/DialogRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _DrawerPopupCssVars = require("../popup/DrawerPopupCssVars");
 var _DrawerBackdropCssVars = require("./DrawerBackdropCssVars");
 const stateAttributesMapping = {
@@ -28,6 +28,7 @@ const DrawerBackdrop = exports.DrawerBackdrop = /*#__PURE__*/React.forwardRef(fu
   const {
     render,
     className,
+    style,
     forceRender = false,
     ...elementProps
   } = componentProps;

package/drawer/close/DrawerClose.d.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 /**
  * A button that closes the drawer.
  * Renders a `<button>` element.

package/drawer/content/DrawerContent.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A container for the drawer contents.
  * Renders a `<div>` element.

package/drawer/content/DrawerContent.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DrawerContent = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _DialogRootContext = require("../../dialog/root/DialogRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _DrawerContentDataAttributes = require("./DrawerContentDataAttributes");
 /**
  * A container for the drawer contents.
@@ -20,6 +20,7 @@ const DrawerContent = exports.DrawerContent = /*#__PURE__*/React.forwardRef(func
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   (0, _DialogRootContext.useDialogRootContext)();

package/drawer/description/DrawerDescription.d.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A paragraph with additional information about the drawer.
  * Renders a `<p>` element.

package/drawer/indent/DrawerIndent.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A wrapper element intended to contain your app's main UI.
  * Applies `data-active` when any drawer within the nearest `<Drawer.Provider>` is open.

package/drawer/indent/DrawerIndent.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DrawerIndent = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _DrawerProviderContext = require("../provider/DrawerProviderContext");
 var _DrawerBackdropCssVars = require("../backdrop/DrawerBackdropCssVars");
 var _DrawerPopupCssVars = require("../popup/DrawerPopupCssVars");
@@ -36,6 +36,7 @@ const DrawerIndent = exports.DrawerIndent = /*#__PURE__*/React.forwardRef(functi
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)(true);

package/drawer/indent-background/DrawerIndentBackground.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * An element placed before `<Drawer.Indent>` to render a background layer that can be styled based on whether any drawer is open.
  * Renders a `<div>` element.

package/drawer/indent-background/DrawerIndentBackground.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DrawerIndentBackground = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _DrawerProviderContext = require("../provider/DrawerProviderContext");
 const stateAttributesMapping = {
   active(value) {
@@ -32,6 +32,7 @@ const DrawerIndentBackground = exports.DrawerIndentBackground = /*#__PURE__*/Rea
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)(true);

package/drawer/popup/DrawerPopup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 import { type DrawerSwipeDirection } from "../root/DrawerRootContext.js";
 /**
  * A container for the drawer contents.

package/drawer/popup/DrawerPopup.js

@@ -7,23 +7,25 @@ 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 _empty = require("@base-ui/utils/empty");
 var _floatingUiReact = require("../../floating-ui-react");
 var _DialogRootContext = require("../../dialog/root/DialogRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _DrawerBackdropCssVars = require("../backdrop/DrawerBackdropCssVars");
 var _DrawerPopupCssVars = require("./DrawerPopupCssVars");
 var _DrawerPopupDataAttributes = require("./DrawerPopupDataAttributes");
 var _DialogPortalContext = require("../../dialog/portal/DialogPortalContext");
-var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
-var _composite = require("../../composite/composite");
+var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
+var _composite = require("../../internals/composite/composite");
 var _DrawerRootContext = require("../root/DrawerRootContext");
 var _useDrawerSnapPoints = require("../root/useDrawerSnapPoints");
 var _DrawerViewportContext = require("../viewport/DrawerViewportContext");
-var _constants = require("../../utils/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 // Module-level flag to ensure we only register the CSS properties once,
 // regardless of how many Drawer components are mounted.
@@ -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) {
@@ -285,7 +299,7 @@ const DrawerPopup = exports.DrawerPopup = /*#__PURE__*/React.forwardRef(function
   if (shouldApplySnapPoints && activeSnapPointOffset !== null) {
     snapPointOffsetValue = swipeDirection === 'up' ? -activeSnapPointOffset : activeSnapPointOffset;
   }
-  let dragStyles = swipe ? swipe.getDragStyles() : _constants.EMPTY_OBJECT;
+  let dragStyles = swipe ? swipe.getDragStyles() : _empty.EMPTY_OBJECT;
   if (shouldApplySnapPoints && swipeDirection === 'down') {
     const baseOffset = activeSnapPointOffset ?? 0;
     const movementValue = Number.parseFloat(String(dragStyles[_DrawerPopupCssVars.DrawerPopupCssVars.swipeMovementY] ?? 0));
@@ -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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type DrawerSwipeDirection, type DrawerSnapPoint } from "./DrawerRootContext.js";
-import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { type BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import type { DialogHandle } from "../../dialog/store/DialogHandle.js";
 import type { PayloadChildRenderFunction } from "../../utils/popups/index.js";
 /**
@@ -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;
   /**