@base-ui/react 1.2.0 → 1.3.0

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

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
 /**
- * An element placed before <Drawer.Indent> to render a background layer
- * that can be styled based on whether any drawer is open.
+ * 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.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerIndentBackground: React.ForwardRefExoticComponent<Omit<DrawerIndentBackgroundProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface DrawerIndentBackgroundState {
@@ -11,7 +13,7 @@ export interface DrawerIndentBackgroundState {
    */
   active: boolean;
 }
-export interface DrawerIndentBackgroundProps extends BaseUIComponentProps<'div', DrawerIndentBackground.State> {}
+export interface DrawerIndentBackgroundProps extends BaseUIComponentProps<'div', DrawerIndentBackgroundState> {}
 export declare namespace DrawerIndentBackground {
   type State = DrawerIndentBackgroundState;
   type Props = DrawerIndentBackgroundProps;

package/esm/drawer/indent-background/DrawerIndentBackground.js

@@ -17,8 +17,10 @@ const stateAttributesMapping = {
 };
 
 /**
- * An element placed before <Drawer.Indent> to render a background layer
- * that can be styled based on whether any drawer is open.
+ * 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.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export const DrawerIndentBackground = /*#__PURE__*/React.forwardRef(function DrawerIndentBackground(componentProps, forwardedRef) {
   const {

package/esm/drawer/index.d.ts

@@ -1,4 +1,4 @@
-export * as DrawerPreview from "./index.parts.js";
+export * as Drawer from "./index.parts.js";
 export type * from "./root/DrawerRoot.js";
 export type * from "./provider/DrawerProvider.js";
 export type * from "./indent/DrawerIndent.js";
@@ -6,6 +6,7 @@ export type * from "./indent-background/DrawerIndentBackground.js";
 export type * from "./trigger/DrawerTrigger.js";
 export type * from "./portal/DrawerPortal.js";
 export type * from "./popup/DrawerPopup.js";
+export type * from "./swipe-area/DrawerSwipeArea.js";
 export type * from "./content/DrawerContent.js";
 export type * from "./backdrop/DrawerBackdrop.js";
 export type * from "./viewport/DrawerViewport.js";

package/esm/drawer/index.js

@@ -1 +1 @@
-export * as DrawerPreview from "./index.parts.js";
+export * as Drawer from "./index.parts.js";

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

@@ -8,6 +8,7 @@ export { DrawerPopup as Popup } from "./popup/DrawerPopup.js";
 export { DrawerPortal as Portal } from "./portal/DrawerPortal.js";
 export { DrawerProvider as Provider } from "./provider/DrawerProvider.js";
 export { DrawerRoot as Root } from "./root/DrawerRoot.js";
+export { DrawerSwipeArea as SwipeArea } from "./swipe-area/DrawerSwipeArea.js";
 export { DrawerTitle as Title } from "./title/DrawerTitle.js";
 export { DrawerTrigger as Trigger } from "./trigger/DrawerTrigger.js";
 export { DrawerViewport as Viewport } from "./viewport/DrawerViewport.js";

package/esm/drawer/index.parts.js

@@ -8,6 +8,7 @@ export { DrawerPopup as Popup } from "./popup/DrawerPopup.js";
 export { DrawerPortal as Portal } from "./portal/DrawerPortal.js";
 export { DrawerProvider as Provider } from "./provider/DrawerProvider.js";
 export { DrawerRoot as Root } from "./root/DrawerRoot.js";
+export { DrawerSwipeArea as SwipeArea } from "./swipe-area/DrawerSwipeArea.js";
 export { DrawerTitle as Title } from "./title/DrawerTitle.js";
 export { DrawerTrigger as Trigger } from "./trigger/DrawerTrigger.js";
 export { DrawerViewport as Viewport } from "./viewport/DrawerViewport.js";

package/esm/drawer/popup/DrawerPopup.d.ts

@@ -10,7 +10,7 @@ import { type DrawerSwipeDirection } from "../root/DrawerRootContext.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerPopup: React.ForwardRefExoticComponent<Omit<DrawerPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DrawerPopupProps extends BaseUIComponentProps<'div', DrawerPopup.State> {
+export interface DrawerPopupProps extends BaseUIComponentProps<'div', DrawerPopupState> {
   /**
    * Determines the element to focus when the drawer is opened.
    *
@@ -20,7 +20,7 @@ export interface DrawerPopupProps extends BaseUIComponentProps<'div', DrawerPopu
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  initialFocus?: (boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void)) | undefined;
+  initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void) | undefined;
   /**
    * Determines the element to focus when the drawer is closed.
    *
@@ -30,13 +30,16 @@ export interface DrawerPopupProps extends BaseUIComponentProps<'div', DrawerPopu
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  finalFocus?: (boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void)) | undefined;
+  finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void) | undefined;
 }
 export interface DrawerPopupState {
   /**
    * Whether the drawer is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
   /**
    * Whether the active snap point is the full-height expanded state.

package/esm/drawer/popup/DrawerPopup.js

@@ -18,7 +18,64 @@ import { useDrawerRootContext } from "../root/DrawerRootContext.js";
 import { useDrawerSnapPoints } from "../root/useDrawerSnapPoints.js";
 import { useDrawerViewportContext } from "../viewport/DrawerViewportContext.js";
 import { EMPTY_OBJECT } from "../../utils/constants.js";
+// Module-level flag to ensure we only register the CSS properties once,
+// regardless of how many Drawer components are mounted.
 import { jsx as _jsx } from "react/jsx-runtime";
+let drawerSwipeVarsRegistered = false;
+
+/**
+ * Removes inheritance of high-frequency drawer swipe CSS variables, which
+ * reduces style recalculation cost in complex drawers with deep subtrees.
+ * Child elements that need these values can still opt-in by using `inherit`.
+ * See https://motion.dev/blog/web-animation-performance-tier-list
+ * under the "Improving CSS variable performance" section.
+ */
+function removeCSSVariableInheritance() {
+  if (drawerSwipeVarsRegistered) {
+    return;
+  }
+
+  // Intentionally keep inheritance disabled on WebKit as well. Safari doesn't support
+  // opting descendants back in via `--var: inherit` for custom properties registered
+  // with `inherits: false`, but Drawer does not rely on descendant access to these vars
+  // (unlike ScrollArea), so we keep the performance optimization enabled.
+  if (typeof CSS !== 'undefined' && 'registerProperty' in CSS) {
+    [DrawerPopupCssVars.swipeMovementX, DrawerPopupCssVars.swipeMovementY, DrawerPopupCssVars.snapPointOffset].forEach(name => {
+      try {
+        CSS.registerProperty({
+          name,
+          syntax: '<length>',
+          inherits: false,
+          initialValue: '0px'
+        });
+      } catch {
+        /* ignore already-registered */
+      }
+    });
+    [{
+      name: DrawerBackdropCssVars.swipeProgress,
+      initialValue: '0'
+    }, {
+      name: DrawerPopupCssVars.swipeStrength,
+      initialValue: '1'
+    }].forEach(({
+      name,
+      initialValue
+    }) => {
+      try {
+        CSS.registerProperty({
+          name,
+          syntax: '<number>',
+          inherits: false,
+          initialValue
+        });
+      } catch {
+        /* ignore already-registered */
+      }
+    });
+  }
+  drawerSwipeVarsRegistered = true;
+}
 const stateAttributesMapping = {
   ...baseMapping,
   ...transitionStatusMapping,
@@ -119,8 +176,7 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
       onPopupHeightChange(oldHeight);
       return;
     }
-    const scrollHeight = popupElement.scrollHeight;
-    const nextHeight = scrollHeight > 0 ? Math.min(offsetHeight, scrollHeight) : offsetHeight;
+    const nextHeight = offsetHeight;
     if (nextHeight === popupHeightRef.current) {
       return;
     }
@@ -139,6 +195,7 @@ export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(co
     if (!popupElement) {
       return undefined;
     }
+    removeCSSVariableInheritance();
     measureHeight();
     if (typeof ResizeObserver !== 'function') {
       return undefined;

package/esm/drawer/popup/DrawerPopupDataAttributes.d.ts

@@ -1,4 +1,20 @@
 export declare enum DrawerPopupDataAttributes {
+  /**
+   * Present when the drawer is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the drawer is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the drawer is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the drawer is animating out.
+   */
+  endingStyle = "data-ending-style",
   /**
    * Present when the drawer is at the expanded (full-height) snap point.
    */

package/esm/drawer/popup/DrawerPopupDataAttributes.js

@@ -1,4 +1,21 @@
-export let DrawerPopupDataAttributes = /*#__PURE__*/function (DrawerPopupDataAttributes) {
+import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.js";
+export let DrawerPopupDataAttributes = function (DrawerPopupDataAttributes) {
+  /**
+   * Present when the drawer is open.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the drawer is closed.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the drawer is animating in.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the drawer is animating out.
+   */
+  DrawerPopupDataAttributes[DrawerPopupDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
   /**
    * Present when the drawer is at the expanded (full-height) snap point.
    */

package/esm/drawer/portal/DrawerPortal.d.ts

@@ -9,7 +9,7 @@ import type { FloatingPortal } from "../../floating-ui-react/index.js";
  */
 export declare const DrawerPortal: DrawerPortal;
 export interface DrawerPortalState {}
-export interface DrawerPortalProps extends FloatingPortal.Props<DrawerPortal.State> {
+export interface DrawerPortalProps extends FloatingPortal.Props<DrawerPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
@@ -18,7 +18,7 @@ export interface DrawerPortalProps extends FloatingPortal.Props<DrawerPortal.Sta
   /**
    * A parent element to render the portal element into.
    */
-  container?: FloatingPortal.Props<DrawerPortal.State>['container'] | undefined;
+  container?: FloatingPortal.Props<DrawerPortalState>['container'] | undefined;
 }
 export interface DrawerPortal {
   (componentProps: DrawerPortalProps & React.RefAttributes<HTMLDivElement>): React.JSX.Element | null;

package/esm/drawer/provider/DrawerProvider.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 /**
- * Provides a shared context for coordinating global Drawer UI,
- * such as indent/background effects based on whether any Drawer is open.
+ * Provides a shared context for coordinating global Drawer UI, such as indent/background effects based on whether any Drawer is open.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */

package/esm/drawer/provider/DrawerProvider.js

@@ -5,8 +5,8 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { DrawerProviderContext } from "./DrawerProviderContext.js";
 
 /**
- * Provides a shared context for coordinating global Drawer UI,
- * such as indent/background effects based on whether any Drawer is open.
+ * Provides a shared context for coordinating global Drawer UI, such as indent/background effects based on whether any Drawer is open.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */

package/esm/drawer/root/DrawerRoot.d.ts

@@ -11,6 +11,7 @@ import type { PayloadChildRenderFunction } from "../../utils/popups/index.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare function DrawerRoot<Payload = unknown>(props: DrawerRoot.Props<Payload>): import("react/jsx-runtime").JSX.Element;
+export interface DrawerRootState {}
 export interface DrawerRootProps<Payload = unknown> {
   /**
    * Whether the drawer is currently open.
@@ -30,7 +31,7 @@ export interface DrawerRootProps<Payload = unknown> {
    * - `'trap-focus'`: focus is trapped inside the drawer, but document page scroll is not locked and pointer interactions outside of it remain enabled.
    * @default true
    */
-  modal?: (boolean | 'trap-focus') | undefined;
+  modal?: boolean | 'trap-focus' | undefined;
   /**
    * Event handler called when the drawer is opened or closed.
    */
@@ -63,12 +64,12 @@ export interface DrawerRootProps<Payload = unknown> {
    * 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).
    */
-  triggerId?: (string | null) | undefined;
+  triggerId?: string | null | undefined;
   /**
    * ID of the trigger that the drawer is associated with.
    * This is useful in conjunction with the `defaultOpen` prop to create an initially open drawer.
    */
-  defaultTriggerId?: (string | null) | undefined;
+  defaultTriggerId?: string | null | undefined;
   /**
    * The content of the drawer.
    */
@@ -114,6 +115,7 @@ export type DrawerRootChangeEventDetails = BaseUIChangeEventDetails<DrawerRoot.C
 export type DrawerRootSnapPointChangeEventReason = DrawerRootChangeEventReason;
 export type DrawerRootSnapPointChangeEventDetails = BaseUIChangeEventDetails<DrawerRootSnapPointChangeEventReason>;
 export declare namespace DrawerRoot {
+  type State = DrawerRootState;
   type Props<Payload = unknown> = DrawerRootProps<Payload>;
   type Actions = DrawerRootActions;
   type ChangeEventReason = DrawerRootChangeEventReason;

package/esm/drawer/root/DrawerRoot.js

@@ -6,6 +6,7 @@ import { useControlled } from '@base-ui/utils/useControlled';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { ownerWindow } from '@base-ui/utils/owner';
 import { isAndroid } from '@base-ui/utils/detectBrowser';
+import { useId } from '@base-ui/utils/useId';
 import { DrawerRootContext, useDrawerRootContext } from "./DrawerRootContext.js";
 import { Dialog } from "../../dialog/index.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
@@ -183,7 +184,7 @@ function createNestedSwipeProgressStore() {
   };
 }
 function DrawerProviderReporter() {
-  const drawerId = React.useId();
+  const drawerId = useId();
   const providerContext = useDrawerProviderContext(true);
   const dialogRootContext = useDialogRootContext(false);
   const open = dialogRootContext.store.useState('open');
@@ -191,7 +192,7 @@ function DrawerProviderReporter() {
   const popupElement = dialogRootContext.store.useState('popupElement');
   const isTopmost = nestedOpenDialogCount === 0;
   React.useEffect(() => {
-    if (!providerContext) {
+    if (!providerContext || drawerId == null) {
       return undefined;
     }
     return () => {
@@ -199,6 +200,9 @@ function DrawerProviderReporter() {
     };
   }, [drawerId, providerContext]);
   React.useEffect(() => {
+    if (drawerId == null) {
+      return;
+    }
     providerContext?.setDrawerOpen(drawerId, open);
   }, [drawerId, open, providerContext]);
   React.useEffect(() => {

package/esm/drawer/swipe-area/DrawerSwipeArea.d.ts

@@ -9,7 +9,7 @@ import { type DrawerSwipeDirection } from "../root/DrawerRootContext.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerSwipeArea: React.ForwardRefExoticComponent<Omit<DrawerSwipeAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DrawerSwipeAreaProps extends BaseUIComponentProps<'div', DrawerSwipeArea.State> {
+export interface DrawerSwipeAreaProps extends BaseUIComponentProps<'div', DrawerSwipeAreaState> {
   /**
    * Whether the swipe area is disabled.
    * @default false

package/esm/drawer/swipe-area/DrawerSwipeArea.js

@@ -15,35 +15,37 @@ import { useDrawerRootContext } from "../root/DrawerRootContext.js";
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
 import { useTriggerRegistration } from "../../utils/popups/index.js";
 import { useDrawerProviderContext } from "../provider/DrawerProviderContext.js";
-import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.js";
+import { DrawerSwipeAreaDataAttributes } from "./DrawerSwipeAreaDataAttributes.js";
 const DEFAULT_SWIPE_OPEN_RATIO = 0.5;
 const MIN_SWIPE_START_DISTANCE = 1;
 const VELOCITY_THRESHOLD = 0.1;
 const FALLBACK_SWIPE_OPEN_THRESHOLD = 40;
 const SWIPE_AREA_OPEN_HOOK = {
-  [CommonPopupDataAttributes.open]: ''
+  [DrawerSwipeAreaDataAttributes.open]: ''
 };
 const SWIPE_AREA_CLOSED_HOOK = {
-  [CommonPopupDataAttributes.closed]: ''
+  [DrawerSwipeAreaDataAttributes.closed]: ''
+};
+const SWIPE_AREA_SWIPING_HOOK = {
+  [DrawerSwipeAreaDataAttributes.swiping]: ''
+};
+const SWIPE_AREA_DISABLED_HOOK = {
+  [DrawerSwipeAreaDataAttributes.disabled]: ''
 };
 const stateAttributesMapping = {
   open(value) {
     return value ? SWIPE_AREA_OPEN_HOOK : SWIPE_AREA_CLOSED_HOOK;
   },
   swiping(value) {
-    return value ? {
-      'data-swiping': ''
-    } : null;
+    return value ? SWIPE_AREA_SWIPING_HOOK : null;
   },
   swipeDirection(value) {
     return value ? {
-      'data-swipe-direction': value
+      [DrawerSwipeAreaDataAttributes.swipeDirection]: value
     } : null;
   },
   disabled(value) {
-    return value ? {
-      'data-disabled': ''
-    } : null;
+    return value ? SWIPE_AREA_DISABLED_HOOK : null;
   }
 };
 const oppositeSwipeDirection = {

package/esm/drawer/swipe-area/DrawerSwipeAreaDataAttributes.d.ts

@@ -0,0 +1,23 @@
+export declare enum DrawerSwipeAreaDataAttributes {
+  /**
+   * Present when the drawer is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the drawer is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the swipe area is disabled.
+   */
+  disabled = "data-disabled",
+  /**
+   * Indicates the swipe direction.
+   * @type {'up' | 'down' | 'left' | 'right'}
+   */
+  swipeDirection = "data-swipe-direction",
+  /**
+   * Present when the drawer is being swiped.
+   */
+  swiping = "data-swiping",
+}

package/esm/drawer/swipe-area/DrawerSwipeAreaDataAttributes.js

@@ -0,0 +1,25 @@
+import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.js";
+export let DrawerSwipeAreaDataAttributes = function (DrawerSwipeAreaDataAttributes) {
+  /**
+   * Present when the drawer is open.
+   */
+  DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the drawer is closed.
+   */
+  DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the swipe area is disabled.
+   */
+  DrawerSwipeAreaDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Indicates the swipe direction.
+   * @type {'up' | 'down' | 'left' | 'right'}
+   */
+  DrawerSwipeAreaDataAttributes["swipeDirection"] = "data-swipe-direction";
+  /**
+   * Present when the drawer is being swiped.
+   */
+  DrawerSwipeAreaDataAttributes["swiping"] = "data-swiping";
+  return DrawerSwipeAreaDataAttributes;
+}({});

package/esm/drawer/title/DrawerTitle.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerTitle: DrawerTitle;
-export interface DrawerTitleProps extends BaseUIComponentProps<'h2', DrawerTitle.State> {}
+export interface DrawerTitleProps extends BaseUIComponentProps<'h2', DrawerTitleState> {}
 export interface DrawerTitleState {}
 export interface DrawerTitle {
   (componentProps: DrawerTitleProps): React.JSX.Element;

package/esm/drawer/trigger/DrawerTrigger.d.ts

@@ -11,7 +11,7 @@ export declare const DrawerTrigger: DrawerTrigger;
 export interface DrawerTrigger {
   <Payload>(componentProps: DrawerTriggerProps<Payload> & React.RefAttributes<HTMLElement>): React.JSX.Element;
 }
-export interface DrawerTriggerProps<Payload = unknown> extends NativeButtonProps, BaseUIComponentProps<'button', DrawerTrigger.State> {
+export interface DrawerTriggerProps<Payload = unknown> extends NativeButtonProps, BaseUIComponentProps<'button', DrawerTriggerState> {
   /**
    * A handle to associate the trigger with a drawer.
    * Can be created with the Drawer.createHandle() method.

package/esm/drawer/viewport/DrawerViewport.d.ts

@@ -13,6 +13,9 @@ export interface DrawerViewportState {
    * Whether the drawer is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
   /**
    * Whether the drawer is nested within another drawer.
@@ -23,7 +26,7 @@ export interface DrawerViewportState {
    */
   nestedDialogOpen: boolean;
 }
-export interface DrawerViewportProps extends BaseUIComponentProps<'div', DrawerViewport.State> {}
+export interface DrawerViewportProps extends BaseUIComponentProps<'div', DrawerViewportState> {}
 export declare namespace DrawerViewport {
   type Props = DrawerViewportProps;
   type State = DrawerViewportState;