@base-ui/react 1.1.0 → 1.2.0

package/esm/drawer/indent/DrawerIndent.js

@@ -0,0 +1,81 @@
+'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.
+ *
+ * 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,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/esm/drawer/indent-background/DrawerIndentBackground.js

@@ -0,0 +1,41 @@
+'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.
+ */
+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,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/esm/drawer/index.js

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

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

@@ -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/esm/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;
+}

package/esm/drawer/popup/DrawerPopup.js

@@ -0,0 +1,285 @@
+'use client';
+
+import * as React from 'react';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { FloatingFocusManager } from "../../floating-ui-react/index.js";
+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 { DrawerBackdropCssVars } from "../backdrop/DrawerBackdropCssVars.js";
+import { DrawerPopupCssVars } from "./DrawerPopupCssVars.js";
+import { DrawerPopupDataAttributes } from "./DrawerPopupDataAttributes.js";
+import { useDialogPortalContext } from "../../dialog/portal/DialogPortalContext.js";
+import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
+import { COMPOSITE_KEYS } from "../../composite/composite.js";
+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";
+import { jsx as _jsx } from "react/jsx-runtime";
+const stateAttributesMapping = {
+  ...baseMapping,
+  ...transitionStatusMapping,
+  expanded(value) {
+    return value ? {
+      [DrawerPopupDataAttributes.expanded]: ''
+    } : null;
+  },
+  nestedDrawerOpen(value) {
+    return value ? {
+      [DrawerPopupDataAttributes.nestedDrawerOpen]: ''
+    } : null;
+  },
+  nestedDrawerSwiping(value) {
+    return value ? {
+      [DrawerPopupDataAttributes.nestedDrawerSwiping]: ''
+    } : null;
+  },
+  swipeDirection(value) {
+    return value ? {
+      [DrawerPopupDataAttributes.swipeDirection]: value
+    } : null;
+  },
+  swiping(value) {
+    return value ? {
+      [DrawerPopupDataAttributes.swiping]: ''
+    } : null;
+  }
+};
+
+/**
+ * A container for the drawer contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+export const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(componentProps, forwardedRef) {
+  const {
+    className,
+    finalFocus,
+    initialFocus,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useDialogRootContext();
+  const {
+    swipeDirection,
+    frontmostHeight,
+    hasNestedDrawer,
+    nestedSwiping,
+    nestedSwipeProgressStore,
+    onPopupHeightChange,
+    notifyParentFrontmostHeight,
+    notifyParentHasNestedDrawer
+  } = useDrawerRootContext();
+  const descriptionElementId = store.useState('descriptionElementId');
+  const disablePointerDismissal = store.useState('disablePointerDismissal');
+  const floatingRootContext = store.useState('floatingRootContext');
+  const rootPopupProps = store.useState('popupProps');
+  const modal = store.useState('modal');
+  const mounted = store.useState('mounted');
+  const nested = store.useState('nested');
+  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
+  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 swipe = useDrawerViewportContext(true);
+  const swiping = swipe?.swiping ?? false;
+  const swipeStrength = swipe?.swipeStrength ?? null;
+  const {
+    snapPoints,
+    activeSnapPoint,
+    activeSnapPointOffset
+  } = useDrawerSnapPoints();
+  useDialogPortalContext();
+  const [popupHeight, setPopupHeight] = React.useState(0);
+  const popupHeightRef = React.useRef(0);
+  const measureHeight = useStableCallback(() => {
+    const popupElement = store.context.popupRef.current;
+    if (!popupElement) {
+      return;
+    }
+    const offsetHeight = popupElement.offsetHeight;
+
+    // Only skip while the element is still actually stretched beyond its last measured height.
+    if (popupHeightRef.current > 0 && frontmostHeight > popupHeightRef.current && offsetHeight > popupHeightRef.current) {
+      return;
+    }
+    const keepHeightWhileNested = popupHeightRef.current > 0 && hasNestedDrawer;
+    if (keepHeightWhileNested) {
+      const oldHeight = popupHeightRef.current;
+      setPopupHeight(oldHeight);
+      onPopupHeightChange(oldHeight);
+      return;
+    }
+    const scrollHeight = popupElement.scrollHeight;
+    const nextHeight = scrollHeight > 0 ? Math.min(offsetHeight, scrollHeight) : offsetHeight;
+    if (nextHeight === popupHeightRef.current) {
+      return;
+    }
+    popupHeightRef.current = nextHeight;
+    setPopupHeight(nextHeight);
+    onPopupHeightChange(nextHeight);
+  });
+  useIsoLayoutEffect(() => {
+    if (!mounted) {
+      popupHeightRef.current = 0;
+      setPopupHeight(0);
+      onPopupHeightChange(0);
+      return undefined;
+    }
+    const popupElement = store.context.popupRef.current;
+    if (!popupElement) {
+      return undefined;
+    }
+    measureHeight();
+    if (typeof ResizeObserver !== 'function') {
+      return undefined;
+    }
+    const resizeObserver = new ResizeObserver(measureHeight);
+    resizeObserver.observe(popupElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [measureHeight, mounted, nestedDrawerOpen, onPopupHeightChange, store.context.popupRef]);
+  useIsoLayoutEffect(() => {
+    const popupRef = store.context.popupRef;
+    const syncNestedSwipeProgress = () => {
+      const popupElement = popupRef.current;
+      if (!popupElement) {
+        return;
+      }
+      const progress = nestedSwipeProgressStore.getSnapshot();
+      if (progress > 0) {
+        popupElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, `${progress}`);
+      } else {
+        popupElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, '0');
+      }
+    };
+    syncNestedSwipeProgress();
+    const unsubscribe = nestedSwipeProgressStore.subscribe(syncNestedSwipeProgress);
+    return () => {
+      unsubscribe();
+      const popupElement = popupRef.current;
+      if (popupElement) {
+        popupElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, '0');
+      }
+    };
+  }, [nestedSwipeProgressStore, store.context.popupRef]);
+  React.useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+    notifyParentFrontmostHeight?.(frontmostHeight);
+    return () => {
+      notifyParentFrontmostHeight?.(0);
+    };
+  }, [frontmostHeight, open, notifyParentFrontmostHeight]);
+  React.useEffect(() => {
+    if (!notifyParentHasNestedDrawer) {
+      return undefined;
+    }
+    const present = open || transitionStatus === 'ending';
+    notifyParentHasNestedDrawer(present);
+    return () => {
+      notifyParentHasNestedDrawer(false);
+    };
+  }, [notifyParentHasNestedDrawer, open, transitionStatus]);
+  useOpenChangeComplete({
+    open,
+    ref: store.context.popupRef,
+    onComplete() {
+      if (open) {
+        store.context.onOpenChangeComplete?.(true);
+      }
+    }
+  });
+  const resolvedInitialFocus = initialFocus === undefined ? store.context.popupRef : initialFocus;
+  const state = {
+    open,
+    nested,
+    transitionStatus,
+    expanded: activeSnapPoint === 1,
+    nestedDrawerOpen,
+    nestedDrawerSwiping: nestedSwiping,
+    swipeDirection,
+    swiping
+  };
+  let popupHeightCssVarValue;
+  const shouldUseAutoHeight = !hasNestedDrawer && transitionStatus !== 'ending';
+  if (popupHeight && !shouldUseAutoHeight) {
+    popupHeightCssVarValue = `${popupHeight}px`;
+  }
+  const shouldApplySnapPoints = snapPoints && snapPoints.length > 0 && (swipeDirection === 'down' || swipeDirection === 'up');
+  let snapPointOffsetValue = null;
+  if (shouldApplySnapPoints && activeSnapPointOffset !== null) {
+    snapPointOffsetValue = swipeDirection === 'up' ? -activeSnapPointOffset : activeSnapPointOffset;
+  }
+  let dragStyles = swipe ? swipe.getDragStyles() : EMPTY_OBJECT;
+  if (shouldApplySnapPoints && swipeDirection === 'down') {
+    const baseOffset = activeSnapPointOffset ?? 0;
+    const movementValue = Number.parseFloat(String(dragStyles[DrawerPopupCssVars.swipeMovementY] ?? 0));
+    const nextOffset = Number.isFinite(movementValue) ? baseOffset + movementValue : baseOffset;
+    const shouldDamp = nextOffset < 0;
+    if (swiping && shouldDamp && Number.isFinite(movementValue)) {
+      const overshoot = Math.abs(nextOffset);
+      const dampedOffset = -Math.sqrt(overshoot);
+      const dampedMovement = dampedOffset - baseOffset;
+      dragStyles = {
+        ...dragStyles,
+        transform: undefined,
+        [DrawerPopupCssVars.swipeMovementY]: `${dampedMovement}px`
+      };
+    } else {
+      dragStyles = {
+        ...dragStyles,
+        transform: undefined
+      };
+    }
+  }
+  const element = useRenderElement('div', componentProps, {
+    state,
+    props: [rootPopupProps, {
+      'aria-labelledby': titleElementId,
+      'aria-describedby': descriptionElementId,
+      role,
+      tabIndex: -1,
+      hidden: !mounted,
+      onKeyDown(event) {
+        if (COMPOSITE_KEYS.has(event.key)) {
+          event.stopPropagation();
+        }
+      },
+      style: {
+        ...dragStyles,
+        [DrawerBackdropCssVars.swipeProgress]: '0',
+        [DrawerPopupCssVars.nestedDrawers]: nestedOpenDialogCount,
+        [DrawerPopupCssVars.height]: popupHeightCssVarValue,
+        [DrawerPopupCssVars.snapPointOffset]: typeof snapPointOffsetValue === 'number' ? `${snapPointOffsetValue}px` : '0px',
+        [DrawerPopupCssVars.frontmostHeight]: frontmostHeight ? `${frontmostHeight}px` : undefined,
+        [DrawerPopupCssVars.swipeStrength]: typeof swipeStrength === 'number' && Number.isFinite(swipeStrength) && swipeStrength > 0 ? `${swipeStrength}` : '1'
+      }
+    }, elementProps],
+    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
+    stateAttributesMapping
+  });
+  return /*#__PURE__*/_jsx(FloatingFocusManager, {
+    context: floatingRootContext,
+    openInteractionType: openMethod,
+    disabled: !mounted,
+    closeOnFocusOut: !disablePointerDismissal,
+    initialFocus: resolvedInitialFocus,
+    returnFocus: finalFocus,
+    modal: modal !== false,
+    restoreFocus: "popup",
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerPopup.displayName = "DrawerPopup";

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

@@ -0,0 +1,37 @@
+export declare enum DrawerPopupCssVars {
+  /**
+   * The number of nested drawers that are currently open.
+   * @type {number}
+   */
+  nestedDrawers = "--nested-drawers",
+  /**
+   * The height of the drawer popup.
+   * @type {CSS length}
+   */
+  height = "--drawer-height",
+  /**
+   * The height of the frontmost open drawer in the current nested drawer stack.
+   * @type {CSS length}
+   */
+  frontmostHeight = "--drawer-frontmost-height",
+  /**
+   * The swipe movement on the X axis.
+   * @type {CSS length}
+   */
+  swipeMovementX = "--drawer-swipe-movement-x",
+  /**
+   * The swipe movement on the Y axis.
+   * @type {CSS length}
+   */
+  swipeMovementY = "--drawer-swipe-movement-y",
+  /**
+   * The snap point offset used for translating the drawer.
+   * @type {CSS length}
+   */
+  snapPointOffset = "--drawer-snap-point-offset",
+  /**
+   * A scalar (0.1-1) used to scale the swipe release transition duration in CSS.
+   * @type {number}
+   */
+  swipeStrength = "--drawer-swipe-strength",
+}

package/esm/drawer/popup/DrawerPopupCssVars.js

@@ -0,0 +1,38 @@
+export let DrawerPopupCssVars = /*#__PURE__*/function (DrawerPopupCssVars) {
+  /**
+   * The number of nested drawers that are currently open.
+   * @type {number}
+   */
+  DrawerPopupCssVars["nestedDrawers"] = "--nested-drawers";
+  /**
+   * The height of the drawer popup.
+   * @type {CSS length}
+   */
+  DrawerPopupCssVars["height"] = "--drawer-height";
+  /**
+   * The height of the frontmost open drawer in the current nested drawer stack.
+   * @type {CSS length}
+   */
+  DrawerPopupCssVars["frontmostHeight"] = "--drawer-frontmost-height";
+  /**
+   * The swipe movement on the X axis.
+   * @type {CSS length}
+   */
+  DrawerPopupCssVars["swipeMovementX"] = "--drawer-swipe-movement-x";
+  /**
+   * The swipe movement on the Y axis.
+   * @type {CSS length}
+   */
+  DrawerPopupCssVars["swipeMovementY"] = "--drawer-swipe-movement-y";
+  /**
+   * The snap point offset used for translating the drawer.
+   * @type {CSS length}
+   */
+  DrawerPopupCssVars["snapPointOffset"] = "--drawer-snap-point-offset";
+  /**
+   * A scalar (0.1-1) used to scale the swipe release transition duration in CSS.
+   * @type {number}
+   */
+  DrawerPopupCssVars["swipeStrength"] = "--drawer-swipe-strength";
+  return DrawerPopupCssVars;
+}({});

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

@@ -0,0 +1,27 @@
+export declare enum DrawerPopupDataAttributes {
+  /**
+   * Present when the drawer is at the expanded (full-height) snap point.
+   */
+  expanded = "data-expanded",
+  /**
+   * Present when a nested drawer is open.
+   */
+  nestedDrawerOpen = "data-nested-drawer-open",
+  /**
+   * Present when a nested drawer is being swiped.
+   */
+  nestedDrawerSwiping = "data-nested-drawer-swiping",
+  /**
+   * Present when the drawer is dismissed by swiping.
+   */
+  swipeDismiss = "data-swipe-dismiss",
+  /**
+   * 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/popup/DrawerPopupDataAttributes.js

@@ -0,0 +1,28 @@
+export let DrawerPopupDataAttributes = /*#__PURE__*/function (DrawerPopupDataAttributes) {
+  /**
+   * Present when the drawer is at the expanded (full-height) snap point.
+   */
+  DrawerPopupDataAttributes["expanded"] = "data-expanded";
+  /**
+   * Present when a nested drawer is open.
+   */
+  DrawerPopupDataAttributes["nestedDrawerOpen"] = "data-nested-drawer-open";
+  /**
+   * Present when a nested drawer is being swiped.
+   */
+  DrawerPopupDataAttributes["nestedDrawerSwiping"] = "data-nested-drawer-swiping";
+  /**
+   * Present when the drawer is dismissed by swiping.
+   */
+  DrawerPopupDataAttributes["swipeDismiss"] = "data-swipe-dismiss";
+  /**
+   * Indicates the swipe direction.
+   * @type {'up' | 'down' | 'left' | 'right'}
+   */
+  DrawerPopupDataAttributes["swipeDirection"] = "data-swipe-direction";
+  /**
+   * Present when the drawer is being swiped.
+   */
+  DrawerPopupDataAttributes["swiping"] = "data-swiping";
+  return DrawerPopupDataAttributes;
+}({});