@base-ui/react 1.3.0 → 1.4.1

package/esm/dialog/root/useDialogRoot.js

@@ -1,19 +1,19 @@
 'use client';
 
 import * as React from 'react';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useScrollLock } from '@base-ui/utils/useScrollLock';
 import { useDismiss, useInteractions, useRole, useSyncedFloatingRootContext } from "../../floating-ui-react/index.js";
 import { contains, getTarget } from "../../floating-ui-react/utils.js";
 import { useOpenInteractionType } from "../../utils/useOpenInteractionType.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { useImplicitActiveTrigger, useOpenStateTransitions } from "../../utils/popups/index.js";
 export function useDialogRoot(params) {
   const {
     store,
     parentContext,
-    actionsRef
+    actionsRef,
+    isDrawer
   } = params;
   const open = store.useState('open');
   const disablePointerDismissal = store.useState('disablePointerDismissal');
@@ -27,16 +27,9 @@ export function useDialogRoot(params) {
   const {
     forceUnmount
   } = useOpenStateTransitions(open, store);
-  const createDialogEventDetails = useStableCallback(reason => {
-    const details = createChangeEventDetails(reason);
-    details.preventUnmountOnClose = () => {
-      store.set('preventUnmountingOnClose', true);
-    };
-    return details;
-  });
   const handleImperativeClose = React.useCallback(() => {
-    store.setOpen(false, createDialogEventDetails(REASONS.imperativeAction));
-  }, [store, createDialogEventDetails]);
+    store.setOpen(false, createChangeEventDetails(REASONS.imperativeAction));
+  }, [store]);
   React.useImperativeHandle(actionsRef, () => ({
     unmount: forceUnmount,
     close: handleImperativeClose
@@ -44,10 +37,10 @@ export function useDialogRoot(params) {
   const floatingRootContext = useSyncedFloatingRootContext({
     popupStore: store,
     onOpenChange: store.setOpen,
-    treatPopupAsFloatingElement: true,
-    noEmit: true
+    treatPopupAsFloatingElement: true
   });
   const [ownNestedOpenDialogs, setOwnNestedOpenDialogs] = React.useState(0);
+  const [ownNestedOpenDrawers, setOwnNestedOpenDrawers] = React.useState(0);
   const isTopmost = ownNestedOpenDialogs === 0;
   const role = useRole(floatingRootContext);
   const dismiss = useDismiss(floatingRootContext, {
@@ -97,18 +90,20 @@ export function useDialogRoot(params) {
     getTriggerProps
   } = useInteractions([role, dismiss]);
 
-  // Listen for nested open/close events on this store to maintain the count
-  store.useContextCallback('onNestedDialogOpen', ownChildrenCount => {
-    setOwnNestedOpenDialogs(ownChildrenCount + 1);
+  // Listen for nested open/close events on this store to maintain the counts.
+  store.useContextCallback('onNestedDialogOpen', (dialogCount, drawerCount) => {
+    setOwnNestedOpenDialogs(dialogCount);
+    setOwnNestedOpenDrawers(drawerCount);
   });
   store.useContextCallback('onNestedDialogClose', () => {
     setOwnNestedOpenDialogs(0);
+    setOwnNestedOpenDrawers(0);
   });
 
   // Notify parent of our open/close state using parent callbacks, if any
   React.useEffect(() => {
     if (parentContext?.onNestedDialogOpen && open) {
-      parentContext.onNestedDialogOpen(ownNestedOpenDialogs);
+      parentContext.onNestedDialogOpen(ownNestedOpenDialogs + 1, ownNestedOpenDrawers + (isDrawer ? 1 : 0));
     }
     if (parentContext?.onNestedDialogClose && !open) {
       parentContext.onNestedDialogClose();
@@ -118,7 +113,7 @@ export function useDialogRoot(params) {
         parentContext.onNestedDialogClose();
       }
     };
-  }, [open, parentContext, ownNestedOpenDialogs]);
+  }, [isDrawer, open, ownNestedOpenDialogs, ownNestedOpenDrawers, parentContext]);
   const activeTriggerProps = React.useMemo(() => getReferenceProps(triggerProps), [getReferenceProps, triggerProps]);
   const inactiveTriggerProps = React.useMemo(() => getTriggerProps(triggerProps), [getTriggerProps, triggerProps]);
   const popupProps = React.useMemo(() => getFloatingProps(), [getFloatingProps]);
@@ -128,6 +123,7 @@ export function useDialogRoot(params) {
     inactiveTriggerProps,
     popupProps,
     floatingRootContext,
-    nestedOpenDialogCount: ownNestedOpenDialogs
+    nestedOpenDialogCount: ownNestedOpenDialogs,
+    nestedOpenDrawerCount: ownNestedOpenDrawers
   });
 }

package/esm/dialog/store/DialogHandle.js

@@ -1,6 +1,6 @@
 import { DialogStore } from "./DialogStore.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 
 /**
  * A handle to control a Dialog imperatively and to associate detached triggers with it.

package/esm/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/esm/dialog/store/DialogStore.js

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { createSelector, ReactStore } from '@base-ui/utils/store';
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap } from "../../utils/popups/index.js";
 const selectors = {
   ...popupStoreSelectors,
   modal: createSelector(state => state.modal),
   nested: createSelector(state => state.nested),
   nestedOpenDialogCount: createSelector(state => state.nestedOpenDialogCount),
+  nestedOpenDrawerCount: createSelector(state => state.nestedOpenDrawerCount),
   disablePointerDismissal: createSelector(state => state.disablePointerDismissal),
   openMethod: createSelector(state => state.openMethod),
   descriptionElementId: createSelector(state => state.descriptionElementId),
@@ -40,13 +42,7 @@ export class DialogStore extends 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
     };
@@ -60,6 +56,13 @@ export class DialogStore extends ReactStore {
     }
     this.update(updatedState);
   };
+  static useStore(externalStore, initialState) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const internalStore = useRefWithInit(() => {
+      return new DialogStore(initialState);
+    }).current;
+    return externalStore ?? internalStore;
+  }
 }
 function createInitialState(initialState = {}) {
   return {
@@ -73,6 +76,7 @@ function createInitialState(initialState = {}) {
     openMethod: null,
     nested: false,
     nestedOpenDialogCount: 0,
+    nestedOpenDrawerCount: 0,
     role: 'dialog',
     ...initialState
   };

package/esm/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/esm/dialog/title/DialogTitle.js

@@ -2,8 +2,8 @@
 
 import * as React from 'react';
 import { useDialogRootContext } from "../root/DialogRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
 /**
  * A heading that labels the dialog.
  * Renders an `<h2>` element.
@@ -14,6 +14,7 @@ export const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(co
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;

package/esm/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/esm/dialog/trigger/DialogTrigger.js

@@ -3,12 +3,12 @@
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 import { useDialogRootContext } from "../root/DialogRootContext.js";
-import { useButton } from "../../use-button/useButton.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useButton } from "../../internals/use-button/useButton.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { triggerOpenStateMapping } from "../../utils/popupStateMapping.js";
-import { CLICK_TRIGGER_IDENTIFIER } from "../../utils/constants.js";
+import { CLICK_TRIGGER_IDENTIFIER } from "../../internals/constants.js";
 import { useTriggerDataForwarding } from "../../utils/popups/index.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
 import { useClick, useInteractions } from "../../floating-ui-react/index.js";
 
 /**
@@ -26,6 +26,7 @@ export const DialogTrigger = /*#__PURE__*/React.forwardRef(function DialogTrigge
     id: idProp,
     payload,
     handle,
+    style,
     ...elementProps
   } = componentProps;
   const dialogRootContext = useDialogRootContext(true);

package/esm/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/esm/dialog/viewport/DialogViewport.js

@@ -1,9 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
 import { useDialogRootContext } from "../root/DialogRootContext.js";
 import { useDialogPortalContext } from "../portal/DialogPortalContext.js";
 import { DialogViewportDataAttributes } from "./DialogViewportDataAttributes.js";
@@ -33,6 +33,7 @@ export const DialogViewport = /*#__PURE__*/React.forwardRef(function DialogViewp
     className,
     render,
     children,
+    style,
     ...elementProps
   } = componentProps;
   const keepMounted = useDialogPortalContext();

package/esm/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/esm/direction-provider/DirectionProvider.js

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

package/esm/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/esm/direction-provider/index.parts.js

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

package/esm/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/esm/drawer/backdrop/DrawerBackdrop.js

@@ -2,9 +2,9 @@
 
 import * as React from 'react';
 import { useDialogRootContext } from "../../dialog/root/DialogRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
 import { DrawerPopupCssVars } from "../popup/DrawerPopupCssVars.js";
 import { DrawerBackdropCssVars } from "./DrawerBackdropCssVars.js";
 const stateAttributesMapping = {
@@ -22,6 +22,7 @@ export const DrawerBackdrop = /*#__PURE__*/React.forwardRef(function DrawerBackd
   const {
     render,
     className,
+    style,
     forceRender = false,
     ...elementProps
   } = componentProps;

package/esm/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/esm/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/esm/drawer/content/DrawerContent.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useDialogRootContext } from "../../dialog/root/DialogRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { DRAWER_CONTENT_ATTRIBUTE } from "./DrawerContentDataAttributes.js";
 
 /**
@@ -15,6 +15,7 @@ export const DrawerContent = /*#__PURE__*/React.forwardRef(function DrawerConten
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   useDialogRootContext();

package/esm/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/esm/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/esm/drawer/indent/DrawerIndent.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useDrawerProviderContext } from "../provider/DrawerProviderContext.js";
 import { DrawerBackdropCssVars } from "../backdrop/DrawerBackdropCssVars.js";
 import { DrawerPopupCssVars } from "../popup/DrawerPopupCssVars.js";
@@ -30,6 +30,7 @@ export const DrawerIndent = /*#__PURE__*/React.forwardRef(function DrawerIndent(
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const providerContext = useDrawerProviderContext(true);

package/esm/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/esm/drawer/indent-background/DrawerIndentBackground.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useDrawerProviderContext } from "../provider/DrawerProviderContext.js";
 const stateAttributesMapping = {
   active(value) {
@@ -26,6 +26,7 @@ export const DrawerIndentBackground = /*#__PURE__*/React.forwardRef(function Dra
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const providerContext = useDrawerProviderContext(true);

package/esm/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.