@base-ui/react 1.1.0 → 1.3.0

package/esm/drawer/backdrop/DrawerBackdrop.js

@@ -0,0 +1,57 @@
+'use client';
+
+import * as React from 'react';
+import { useDialogRootContext } from "../../dialog/root/DialogRootContext.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
+import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
+import { DrawerPopupCssVars } from "../popup/DrawerPopupCssVars.js";
+import { DrawerBackdropCssVars } from "./DrawerBackdropCssVars.js";
+const stateAttributesMapping = {
+  ...baseMapping,
+  ...transitionStatusMapping
+};
+
+/**
+ * An overlay displayed beneath the popup.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+export const DrawerBackdrop = /*#__PURE__*/React.forwardRef(function DrawerBackdrop(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    forceRender = false,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useDialogRootContext();
+  const open = store.useState('open');
+  const nested = store.useState('nested');
+  const mounted = store.useState('mounted');
+  const transitionStatus = store.useState('transitionStatus');
+  const state = {
+    open,
+    transitionStatus
+  };
+  return useRenderElement('div', componentProps, {
+    state,
+    ref: [store.context.backdropRef, forwardedRef],
+    stateAttributesMapping,
+    props: [{
+      role: 'presentation',
+      hidden: !mounted,
+      style: {
+        pointerEvents: !open ? 'none' : undefined,
+        userSelect: 'none',
+        WebkitUserSelect: 'none',
+        [DrawerBackdropCssVars.swipeProgress]: '0',
+        [DrawerPopupCssVars.swipeStrength]: '1'
+      }
+    }, elementProps],
+    enabled: forceRender || !nested
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerBackdrop.displayName = "DrawerBackdrop";

package/esm/drawer/backdrop/DrawerBackdropCssVars.d.ts

@@ -0,0 +1,7 @@
+export declare enum DrawerBackdropCssVars {
+  /**
+   * The swipe progress of the drawer gesture.
+   * @type {number}
+   */
+  swipeProgress = "--drawer-swipe-progress",
+}

package/esm/drawer/backdrop/DrawerBackdropCssVars.js

@@ -0,0 +1,8 @@
+export let DrawerBackdropCssVars = /*#__PURE__*/function (DrawerBackdropCssVars) {
+  /**
+   * The swipe progress of the drawer gesture.
+   * @type {number}
+   */
+  DrawerBackdropCssVars["swipeProgress"] = "--drawer-swipe-progress";
+  return DrawerBackdropCssVars;
+}({});

package/esm/drawer/backdrop/DrawerBackdropDataAttributes.d.ts

@@ -0,0 +1,18 @@
+export declare enum DrawerBackdropDataAttributes {
+  /**
+   * 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",
+}

package/esm/drawer/backdrop/DrawerBackdropDataAttributes.js

@@ -0,0 +1,20 @@
+import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.js";
+export let DrawerBackdropDataAttributes = function (DrawerBackdropDataAttributes) {
+  /**
+   * Present when the drawer is open.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the drawer is closed.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the drawer is animating in.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the drawer is animating out.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  return DrawerBackdropDataAttributes;
+}({});

package/esm/drawer/close/DrawerClose.d.ts

@@ -0,0 +1,23 @@
+import type * as React from 'react';
+import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+/**
+ * A button that closes the drawer.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+export declare const DrawerClose: DrawerClose;
+export interface DrawerCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', DrawerCloseState> {}
+export interface DrawerCloseState {
+  /**
+   * Whether the button is currently disabled.
+   */
+  disabled: boolean;
+}
+export interface DrawerClose {
+  (componentProps: DrawerCloseProps): React.JSX.Element;
+}
+export declare namespace DrawerClose {
+  type Props = DrawerCloseProps;
+  type State = DrawerCloseState;
+}

package/esm/drawer/close/DrawerClose.js

@@ -0,0 +1,10 @@
+'use client';
+
+import { DialogClose } from "../../dialog/close/DialogClose.js";
+/**
+ * A button that closes the drawer.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+export const DrawerClose = DialogClose;

package/esm/drawer/content/DrawerContent.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * A container for the drawer contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+export declare const DrawerContent: React.ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface DrawerContentProps extends BaseUIComponentProps<'div', DrawerContentState> {}
+export interface DrawerContentState {}
+export declare namespace DrawerContent {
+  type Props = DrawerContentProps;
+  type State = DrawerContentState;
+}

package/esm/drawer/content/DrawerContent.js

@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+import { useDialogRootContext } from "../../dialog/root/DialogRootContext.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { DRAWER_CONTENT_ATTRIBUTE } from "./DrawerContentDataAttributes.js";
+
+/**
+ * A container for the drawer contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+export const DrawerContent = /*#__PURE__*/React.forwardRef(function DrawerContent(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  useDialogRootContext();
+  return useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      [DRAWER_CONTENT_ATTRIBUTE]: ''
+    }, elementProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerContent.displayName = "DrawerContent";

package/esm/drawer/content/DrawerContentDataAttributes.d.ts

@@ -0,0 +1 @@
+export declare const DRAWER_CONTENT_ATTRIBUTE = "data-drawer-content";

package/esm/drawer/content/DrawerContentDataAttributes.js

@@ -0,0 +1 @@
+export const DRAWER_CONTENT_ATTRIBUTE = 'data-drawer-content';

package/esm/drawer/description/DrawerDescription.d.ts

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * A paragraph with additional information about the drawer.
+ * Renders a `<p>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+export declare const DrawerDescription: DrawerDescription;
+export interface DrawerDescriptionProps extends BaseUIComponentProps<'p', DrawerDescriptionState> {}
+export interface DrawerDescriptionState {}
+export interface DrawerDescription {
+  (componentProps: DrawerDescriptionProps): React.JSX.Element;
+}
+export declare namespace DrawerDescription {
+  type Props = DrawerDescriptionProps;
+  type State = DrawerDescriptionState;
+}

package/esm/drawer/description/DrawerDescription.js

@@ -0,0 +1,10 @@
+'use client';
+
+import { DialogDescription } from "../../dialog/description/DialogDescription.js";
+/**
+ * A paragraph with additional information about the drawer.
+ * Renders a `<p>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+export const DrawerDescription = DialogDescription;

package/esm/drawer/indent/DrawerIndent.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { BaseUIComponentProps } from "../../utils/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.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+export declare const DrawerIndent: React.ForwardRefExoticComponent<Omit<DrawerIndentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface DrawerIndentState {
+  /**
+   * Whether any drawer within the nearest <Drawer.Provider> is open.
+   */
+  active: boolean;
+}
+export interface DrawerIndentProps extends BaseUIComponentProps<'div', DrawerIndentState> {}
+export declare namespace DrawerIndent {
+  type State = DrawerIndentState;
+  type Props = DrawerIndentProps;
+}

package/esm/drawer/indent/DrawerIndent.js

@@ -0,0 +1,82 @@
+'use client';
+
+import * as React from 'react';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useDrawerProviderContext } from "../provider/DrawerProviderContext.js";
+import { DrawerBackdropCssVars } from "../backdrop/DrawerBackdropCssVars.js";
+import { DrawerPopupCssVars } from "../popup/DrawerPopupCssVars.js";
+const stateAttributesMapping = {
+  active(value) {
+    if (value) {
+      return {
+        'data-active': ''
+      };
+    }
+    return {
+      'data-inactive': ''
+    };
+  }
+};
+
+/**
+ * A wrapper element intended to contain your app's main UI.
+ * Applies `data-active` when any drawer within the nearest `<Drawer.Provider>` is open.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+export const DrawerIndent = /*#__PURE__*/React.forwardRef(function DrawerIndent(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const providerContext = useDrawerProviderContext(true);
+  const active = providerContext?.active ?? false;
+  const visualStateStore = providerContext?.visualStateStore;
+  const indentRef = React.useRef(null);
+  useIsoLayoutEffect(() => {
+    const element = indentRef.current;
+    if (!element || !visualStateStore) {
+      return undefined;
+    }
+    const syncVisualState = () => {
+      const {
+        swipeProgress,
+        frontmostHeight
+      } = visualStateStore.getSnapshot();
+      if (swipeProgress <= 0) {
+        element.style.setProperty(DrawerBackdropCssVars.swipeProgress, '0');
+      } else {
+        element.style.setProperty(DrawerBackdropCssVars.swipeProgress, `${swipeProgress}`);
+      }
+      if (frontmostHeight <= 0) {
+        element.style.removeProperty(DrawerPopupCssVars.height);
+      } else {
+        element.style.setProperty(DrawerPopupCssVars.height, `${frontmostHeight}px`);
+      }
+    };
+    syncVisualState();
+    const unsubscribe = visualStateStore.subscribe(syncVisualState);
+    return () => {
+      unsubscribe();
+      element.style.setProperty(DrawerBackdropCssVars.swipeProgress, '0');
+      element.style.removeProperty(DrawerPopupCssVars.height);
+    };
+  }, [visualStateStore]);
+  const state = {
+    active
+  };
+  return useRenderElement('div', componentProps, {
+    ref: [forwardedRef, indentRef],
+    state,
+    props: [{
+      style: {
+        [DrawerBackdropCssVars.swipeProgress]: '0'
+      }
+    }, elementProps],
+    stateAttributesMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerIndent.displayName = "DrawerIndent";

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

@@ -0,0 +1,20 @@
+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.
+ * 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 {
+  /**
+   * Whether any drawer within the nearest <Drawer.Provider> is open.
+   */
+  active: boolean;
+}
+export interface DrawerIndentBackgroundProps extends BaseUIComponentProps<'div', DrawerIndentBackgroundState> {}
+export declare namespace DrawerIndentBackground {
+  type State = DrawerIndentBackgroundState;
+  type Props = DrawerIndentBackgroundProps;
+}

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

@@ -0,0 +1,43 @@
+'use client';
+
+import * as React from 'react';
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useDrawerProviderContext } from "../provider/DrawerProviderContext.js";
+const stateAttributesMapping = {
+  active(value) {
+    if (value) {
+      return {
+        'data-active': ''
+      };
+    }
+    return {
+      'data-inactive': ''
+    };
+  }
+};
+
+/**
+ * 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 {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const providerContext = useDrawerProviderContext(true);
+  const active = providerContext?.active ?? false;
+  const state = {
+    active
+  };
+  return useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    state,
+    props: elementProps,
+    stateAttributesMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerIndentBackground.displayName = "DrawerIndentBackground";

package/esm/drawer/index.d.ts

@@ -0,0 +1,15 @@
+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";
+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";
+export type * from "./title/DrawerTitle.js";
+export type * from "./description/DrawerDescription.js";
+export type * from "./close/DrawerClose.js";

package/esm/drawer/index.js

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

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

@@ -0,0 +1,15 @@
+export { DrawerBackdrop as Backdrop } from "./backdrop/DrawerBackdrop.js";
+export { DrawerClose as Close } from "./close/DrawerClose.js";
+export { DrawerContent as Content } from "./content/DrawerContent.js";
+export { DrawerDescription as Description } from "./description/DrawerDescription.js";
+export { DrawerIndent as Indent } from "./indent/DrawerIndent.js";
+export { DrawerIndentBackground as IndentBackground } from "./indent-background/DrawerIndentBackground.js";
+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";
+export { createDialogHandle as createHandle, DialogHandle as Handle } from "../dialog/store/DialogHandle.js";

package/esm/drawer/index.parts.js

@@ -0,0 +1,15 @@
+export { DrawerBackdrop as Backdrop } from "./backdrop/DrawerBackdrop.js";
+export { DrawerClose as Close } from "./close/DrawerClose.js";
+export { DrawerContent as Content } from "./content/DrawerContent.js";
+export { DrawerDescription as Description } from "./description/DrawerDescription.js";
+export { DrawerIndent as Indent } from "./indent/DrawerIndent.js";
+export { DrawerIndentBackground as IndentBackground } from "./indent-background/DrawerIndentBackground.js";
+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";
+export { createDialogHandle as createHandle, DialogHandle as Handle } from "../dialog/store/DialogHandle.js";

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

@@ -0,0 +1,72 @@
+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 DrawerSwipeDirection } from "../root/DrawerRootContext.js";
+/**
+ * A container for the drawer contents.
+ * Renders a `<div>` element.
+ *
+ * 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', DrawerPopupState> {
+  /**
+   * Determines the element to focus when the drawer is opened.
+   *
+   * - `false`: Do not move focus.
+   * - `true`: Move focus based on the default behavior (first tabbable element or popup).
+   * - `RefObject`: Move focus to the ref element.
+   * - `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;
+  /**
+   * Determines the element to focus when the drawer is closed.
+   *
+   * - `false`: Do not move focus.
+   * - `true`: Move focus based on the default behavior (trigger or previously focused element).
+   * - `RefObject`: Move focus to the ref element.
+   * - `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;
+}
+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.
+   */
+  expanded: boolean;
+  /**
+   * Whether the drawer is nested within a parent drawer.
+   */
+  nested: boolean;
+  /**
+   * Whether the drawer has nested drawers open.
+   */
+  nestedDrawerOpen: boolean;
+  /**
+   * Whether a nested drawer is currently being swiped.
+   */
+  nestedDrawerSwiping: boolean;
+  /**
+   * The swipe direction used to dismiss the drawer.
+   */
+  swipeDirection: DrawerSwipeDirection;
+  /**
+   * Whether the drawer is being swiped.
+   */
+  swiping: boolean;
+}
+export declare namespace DrawerPopup {
+  type Props = DrawerPopupProps;
+  type State = DrawerPopupState;
+}