@base-ui/react 1.0.0 → 1.2.0

package/drawer/content/DrawerContent.js

@@ -0,0 +1,32 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerContent = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _DialogRootContext = require("../../dialog/root/DialogRootContext");
+var _useRenderElement = require("../../utils/useRenderElement");
+/**
+ * A container for the drawer contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+const DrawerContent = exports.DrawerContent = /*#__PURE__*/React.forwardRef(function DrawerContent(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  (0, _DialogRootContext.useDialogRootContext)();
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      ['data-swipe-ignore']: ''
+    }, elementProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerContent.displayName = "DrawerContent";

package/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', DrawerDescription.State> {}
+export interface DrawerDescriptionState {}
+export interface DrawerDescription {
+  (componentProps: DrawerDescriptionProps): React.JSX.Element;
+}
+export declare namespace DrawerDescription {
+  type Props = DrawerDescriptionProps;
+  type State = DrawerDescriptionState;
+}

package/drawer/description/DrawerDescription.js

@@ -0,0 +1,15 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerDescription = void 0;
+var _DialogDescription = require("../../dialog/description/DialogDescription");
+/**
+ * A paragraph with additional information about the drawer.
+ * Renders a `<p>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+const DrawerDescription = exports.DrawerDescription = _DialogDescription.DialogDescription;

package/drawer/indent/DrawerIndent.d.ts

@@ -0,0 +1,20 @@
+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.
+ *
+ * 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', DrawerIndent.State> {}
+export declare namespace DrawerIndent {
+  type State = DrawerIndentState;
+  type Props = DrawerIndentProps;
+}

package/drawer/indent/DrawerIndent.js

@@ -0,0 +1,87 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerIndent = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _DrawerProviderContext = require("../provider/DrawerProviderContext");
+var _DrawerBackdropCssVars = require("../backdrop/DrawerBackdropCssVars");
+var _DrawerPopupCssVars = require("../popup/DrawerPopupCssVars");
+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.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+const DrawerIndent = exports.DrawerIndent = /*#__PURE__*/React.forwardRef(function DrawerIndent(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)(true);
+  const active = providerContext?.active ?? false;
+  const visualStateStore = providerContext?.visualStateStore;
+  const indentRef = React.useRef(null);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    const element = indentRef.current;
+    if (!element || !visualStateStore) {
+      return undefined;
+    }
+    const syncVisualState = () => {
+      const {
+        swipeProgress,
+        frontmostHeight
+      } = visualStateStore.getSnapshot();
+      if (swipeProgress <= 0) {
+        element.style.setProperty(_DrawerBackdropCssVars.DrawerBackdropCssVars.swipeProgress, '0');
+      } else {
+        element.style.setProperty(_DrawerBackdropCssVars.DrawerBackdropCssVars.swipeProgress, `${swipeProgress}`);
+      }
+      if (frontmostHeight <= 0) {
+        element.style.removeProperty(_DrawerPopupCssVars.DrawerPopupCssVars.height);
+      } else {
+        element.style.setProperty(_DrawerPopupCssVars.DrawerPopupCssVars.height, `${frontmostHeight}px`);
+      }
+    };
+    syncVisualState();
+    const unsubscribe = visualStateStore.subscribe(syncVisualState);
+    return () => {
+      unsubscribe();
+      element.style.setProperty(_DrawerBackdropCssVars.DrawerBackdropCssVars.swipeProgress, '0');
+      element.style.removeProperty(_DrawerPopupCssVars.DrawerPopupCssVars.height);
+    };
+  }, [visualStateStore]);
+  const state = {
+    active
+  };
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    ref: [forwardedRef, indentRef],
+    state,
+    props: [{
+      style: {
+        [_DrawerBackdropCssVars.DrawerBackdropCssVars.swipeProgress]: '0'
+      }
+    }, elementProps],
+    stateAttributesMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerIndent.displayName = "DrawerIndent";

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

@@ -0,0 +1,18 @@
+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.
+ */
+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', DrawerIndentBackground.State> {}
+export declare namespace DrawerIndentBackground {
+  type State = DrawerIndentBackgroundState;
+  type Props = DrawerIndentBackgroundProps;
+}

package/drawer/indent-background/DrawerIndentBackground.js

@@ -0,0 +1,47 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerIndentBackground = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useRenderElement = require("../../utils/useRenderElement");
+var _DrawerProviderContext = require("../provider/DrawerProviderContext");
+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.
+ */
+const DrawerIndentBackground = exports.DrawerIndentBackground = /*#__PURE__*/React.forwardRef(function DrawerIndentBackground(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)(true);
+  const active = providerContext?.active ?? false;
+  const state = {
+    active
+  };
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    ref: forwardedRef,
+    state,
+    props: elementProps,
+    stateAttributesMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerIndentBackground.displayName = "DrawerIndentBackground";

package/drawer/index.d.ts

@@ -0,0 +1,14 @@
+export * as DrawerPreview 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 "./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/drawer/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerPreview = void 0;
+var _DrawerPreview = _interopRequireWildcard(require("./index.parts"));
+exports.DrawerPreview = _DrawerPreview;

package/drawer/index.parts.d.ts

@@ -0,0 +1,14 @@
+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 { 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/drawer/index.parts.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Backdrop", {
+  enumerable: true,
+  get: function () {
+    return _DrawerBackdrop.DrawerBackdrop;
+  }
+});
+Object.defineProperty(exports, "Close", {
+  enumerable: true,
+  get: function () {
+    return _DrawerClose.DrawerClose;
+  }
+});
+Object.defineProperty(exports, "Content", {
+  enumerable: true,
+  get: function () {
+    return _DrawerContent.DrawerContent;
+  }
+});
+Object.defineProperty(exports, "Description", {
+  enumerable: true,
+  get: function () {
+    return _DrawerDescription.DrawerDescription;
+  }
+});
+Object.defineProperty(exports, "Handle", {
+  enumerable: true,
+  get: function () {
+    return _DialogHandle.DialogHandle;
+  }
+});
+Object.defineProperty(exports, "Indent", {
+  enumerable: true,
+  get: function () {
+    return _DrawerIndent.DrawerIndent;
+  }
+});
+Object.defineProperty(exports, "IndentBackground", {
+  enumerable: true,
+  get: function () {
+    return _DrawerIndentBackground.DrawerIndentBackground;
+  }
+});
+Object.defineProperty(exports, "Popup", {
+  enumerable: true,
+  get: function () {
+    return _DrawerPopup.DrawerPopup;
+  }
+});
+Object.defineProperty(exports, "Portal", {
+  enumerable: true,
+  get: function () {
+    return _DrawerPortal.DrawerPortal;
+  }
+});
+Object.defineProperty(exports, "Provider", {
+  enumerable: true,
+  get: function () {
+    return _DrawerProvider.DrawerProvider;
+  }
+});
+Object.defineProperty(exports, "Root", {
+  enumerable: true,
+  get: function () {
+    return _DrawerRoot.DrawerRoot;
+  }
+});
+Object.defineProperty(exports, "Title", {
+  enumerable: true,
+  get: function () {
+    return _DrawerTitle.DrawerTitle;
+  }
+});
+Object.defineProperty(exports, "Trigger", {
+  enumerable: true,
+  get: function () {
+    return _DrawerTrigger.DrawerTrigger;
+  }
+});
+Object.defineProperty(exports, "Viewport", {
+  enumerable: true,
+  get: function () {
+    return _DrawerViewport.DrawerViewport;
+  }
+});
+Object.defineProperty(exports, "createHandle", {
+  enumerable: true,
+  get: function () {
+    return _DialogHandle.createDialogHandle;
+  }
+});
+var _DrawerBackdrop = require("./backdrop/DrawerBackdrop");
+var _DrawerClose = require("./close/DrawerClose");
+var _DrawerContent = require("./content/DrawerContent");
+var _DrawerDescription = require("./description/DrawerDescription");
+var _DrawerIndent = require("./indent/DrawerIndent");
+var _DrawerIndentBackground = require("./indent-background/DrawerIndentBackground");
+var _DrawerPopup = require("./popup/DrawerPopup");
+var _DrawerPortal = require("./portal/DrawerPortal");
+var _DrawerProvider = require("./provider/DrawerProvider");
+var _DrawerRoot = require("./root/DrawerRoot");
+var _DrawerTitle = require("./title/DrawerTitle");
+var _DrawerTrigger = require("./trigger/DrawerTrigger");
+var _DrawerViewport = require("./viewport/DrawerViewport");
+var _DialogHandle = require("../dialog/store/DialogHandle");

package/drawer/popup/DrawerPopup.d.ts

@@ -0,0 +1,69 @@
+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', DrawerPopup.State> {
+  /**
+   * 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;
+  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;
+}