@seed-design/react-drawer 0.0.0-alpha-20260414104312

package/lib/index.js

@@ -0,0 +1,18 @@
+import { D as DrawerBackdrop, a as DrawerCloseButton, b as DrawerContent, c as DrawerDescription, d as DrawerHandle, e as DrawerHeader, f as DrawerPositioner, g as DrawerRoot, h as DrawerTitle, i as DrawerTrigger } from './Drawer-12s-DPrL_6Um.js';
+export { u as useDrawer, j as useDrawerContext } from './Drawer-12s-DPrL_6Um.js';
+
+var Drawer_namespace = {
+  __proto__: null,
+  Backdrop: DrawerBackdrop,
+  CloseButton: DrawerCloseButton,
+  Content: DrawerContent,
+  Description: DrawerDescription,
+  Handle: DrawerHandle,
+  Header: DrawerHeader,
+  Positioner: DrawerPositioner,
+  Root: DrawerRoot,
+  Title: DrawerTitle,
+  Trigger: DrawerTrigger
+};
+
+export { Drawer_namespace as Drawer, DrawerBackdrop, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerHandle, DrawerHeader, DrawerPositioner, DrawerRoot, DrawerTitle, DrawerTrigger };

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@seed-design/react-drawer",
+  "version": "0.0.0-alpha-20260414104312",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daangn/seed-design.git",
+    "directory": "packages/react-headless/drawer"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./lib/index.cjs",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rm -rf lib",
+    "build": "bunchee",
+    "lint:publish": "bun publint"
+  },
+  "dependencies": {
+    "@radix-ui/react-compose-refs": "^1.1.2",
+    "@radix-ui/react-focus-scope": "^1.1.4",
+    "@radix-ui/react-use-callback-ref": "^1.1.0",
+    "@seed-design/dom-utils": "1.0.0",
+    "@seed-design/react-dismissible-layer": "0.0.0-alpha-20260414104312",
+    "@seed-design/react-presence": "0.0.0-alpha-20260414104312",
+    "@seed-design/react-primitive": "0.0.0-alpha-20260414104312",
+    "@seed-design/react-use-controllable-state": "1.0.0",
+    "aria-hidden": "^1.2.6"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/Drawer.namespace.ts

@@ -0,0 +1,22 @@
+export {
+  DrawerBackdrop as Backdrop,
+  DrawerCloseButton as CloseButton,
+  DrawerContent as Content,
+  DrawerDescription as Description,
+  DrawerHandle as Handle,
+  DrawerHeader as Header,
+  DrawerPositioner as Positioner,
+  DrawerRoot as Root,
+  DrawerTitle as Title,
+  DrawerTrigger as Trigger,
+  type DrawerBackdropProps as BackdropProps,
+  type DrawerCloseButtonProps as CloseButtonProps,
+  type DrawerContentProps as ContentProps,
+  type DrawerDescriptionProps as DescriptionProps,
+  type DrawerHandleProps as HandleProps,
+  type DrawerHeaderProps as HeaderProps,
+  type DrawerPositionerProps as PositionerProps,
+  type DrawerRootProps as RootProps,
+  type DrawerTitleProps as TitleProps,
+  type DrawerTriggerProps as TriggerProps,
+} from "./Drawer";

package/src/Drawer.tsx

@@ -0,0 +1,451 @@
+"use client";
+
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { FocusScope } from "@radix-ui/react-focus-scope";
+import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
+import { hideOthers } from "aria-hidden";
+import { DismissibleLayer } from "@seed-design/react-dismissible-layer";
+import { Presence } from "@seed-design/react-presence";
+import { dataAttr, mergeProps } from "@seed-design/dom-utils";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import type * as React from "react";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import type { DrawerDirection } from "./types";
+import { useDrawer, type UseDrawerProps } from "./useDrawer";
+import { DrawerProvider, useDrawerContext } from "./useDrawerContext";
+
+export interface DrawerRootProps extends UseDrawerProps {
+  children?: React.ReactNode;
+}
+
+export const DrawerRoot = (props: DrawerRootProps) => {
+  const api = useDrawer(props);
+  return <DrawerProvider value={api}>{props.children}</DrawerProvider>;
+};
+
+export interface DrawerTriggerProps
+  extends PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const DrawerTrigger = forwardRef<HTMLButtonElement, DrawerTriggerProps>((props, ref) => {
+  const api = useDrawerContext();
+  return <Primitive.button ref={ref} {...mergeProps(api.triggerProps, props)} />;
+});
+DrawerTrigger.displayName = "DrawerTrigger";
+
+export interface DrawerPositionerProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const DrawerPositioner = forwardRef<HTMLDivElement, DrawerPositionerProps>((props, ref) => {
+  const api = useDrawerContext();
+  return <Primitive.div ref={ref} {...mergeProps(api.positionerProps, props)} />;
+});
+DrawerPositioner.displayName = "DrawerPositioner";
+
+export interface DrawerBackdropProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const DrawerBackdrop = forwardRef<HTMLDivElement, DrawerBackdropProps>((props, ref) => {
+  const {
+    overlayRef,
+    onRelease,
+    modal,
+    snapPoints,
+    isOpen,
+    shouldFade,
+    shouldOverlayAnimate,
+    hasAnimationDone,
+    lazyMount,
+    unmountOnExit,
+  } = useDrawerContext();
+  const composedRef = composeRefs(ref, overlayRef);
+  const hasSnapPoints = snapPoints && snapPoints.length > 0;
+  const onMouseUp = useCallbackRef((event: React.PointerEvent<HTMLDivElement>) => onRelease(event));
+
+  if (!modal) {
+    return null;
+  }
+
+  return (
+    <Presence present={isOpen} unmountOnExit={unmountOnExit} lazyMount={lazyMount}>
+      <Primitive.div
+        ref={composedRef}
+        onMouseUp={onMouseUp}
+        data-snap-points={isOpen && hasSnapPoints ? "true" : "false"}
+        data-snap-points-overlay={isOpen && shouldFade ? "true" : "false"}
+        data-should-overlay-animate={shouldOverlayAnimate ? "true" : "false"}
+        data-open={dataAttr(isOpen)}
+        data-animation-done={hasAnimationDone ? "true" : "false"}
+        {...props}
+      />
+    </Presence>
+  );
+});
+DrawerBackdrop.displayName = "DrawerBackdrop";
+
+export interface DrawerContentProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((props, ref) => {
+  const { style, ...restProps } = props;
+
+  const {
+    drawerRef,
+    onPress,
+    onRelease,
+    onDrag,
+    keyboardIsOpen,
+    snapPointsOffset,
+    activeSnapPointIndex,
+    modal,
+    isOpen,
+    direction,
+    snapPoints,
+    container,
+    handleOnly,
+    autoFocus,
+    closeDrawer,
+    closeOnInteractOutside,
+    closeOnEscape,
+    dismissible,
+    hasAnimationDone,
+    titleId,
+    descriptionId,
+    lazyMount,
+    unmountOnExit,
+  } = useDrawerContext();
+
+  const [contentNode, setContentNode] = useState<HTMLDivElement | null>(null);
+  const contentRef = useCallback((el: HTMLDivElement | null) => setContentNode(el), []);
+
+  // aria-hide everything except the content when modal
+  useEffect(() => {
+    if (!isOpen || !modal || !contentNode) return;
+    return hideOthers(contentNode);
+  }, [isOpen, modal, contentNode]);
+
+  // Needed to use transition instead of animations
+  const [delayedSnapPoints, setDelayedSnapPoints] = useState(false);
+  const pointerStartRef = useRef<{ x: number; y: number } | null>(null);
+  const lastKnownPointerEventRef = useRef<React.PointerEvent<HTMLDivElement> | null>(null);
+  const wasBeyondThePointRef = useRef(false);
+  const hasSnapPoints = snapPoints && snapPoints.length > 0;
+
+  const isDeltaInDirection = (
+    delta: { x: number; y: number },
+    dir: DrawerDirection,
+    threshold = 0,
+  ) => {
+    if (wasBeyondThePointRef.current) return true;
+
+    const deltaY = Math.abs(delta.y);
+    const deltaX = Math.abs(delta.x);
+    const isDeltaX = deltaX > deltaY;
+    const dFactor = ["bottom", "right"].includes(dir) ? 1 : -1;
+
+    if (dir === "left" || dir === "right") {
+      const isReverseDirection = delta.x * dFactor < 0;
+      if (!isReverseDirection && deltaX >= 0 && deltaX <= threshold) {
+        return isDeltaX;
+      }
+    } else {
+      const isReverseDirection = delta.y * dFactor < 0;
+      if (!isReverseDirection && deltaY >= 0 && deltaY <= threshold) {
+        return !isDeltaX;
+      }
+    }
+
+    wasBeyondThePointRef.current = true;
+    return true;
+  };
+
+  useEffect(() => {
+    if (hasSnapPoints) {
+      window.requestAnimationFrame(() => {
+        setDelayedSnapPoints(true);
+      });
+    }
+  }, []);
+
+  function handleOnPointerUp(event: React.PointerEvent<HTMLDivElement> | null) {
+    pointerStartRef.current = null;
+    wasBeyondThePointRef.current = false;
+    onRelease(event);
+  }
+
+  return (
+    <Presence present={isOpen} unmountOnExit={unmountOnExit} lazyMount={lazyMount}>
+      {/* DismissibleLayer must wrap FocusScope, not the other way around.
+          FocusScope asChild uses Slot to forward tabIndex/onKeyDown/ref to the
+          DOM element; if DismissibleLayer sits between them, those props are
+          swallowed by DismissibleLayer's own destructuring and never reach the DOM. */}
+      <DismissibleLayer
+        enabled={isOpen}
+        blockPointerEvents={modal}
+        onEscapeKeyDown={(e) => {
+          if (e.defaultPrevented) return;
+          if (!dismissible || !closeOnEscape) return;
+          closeDrawer(false, { reason: "escapeKeyDown", event: e });
+        }}
+        onPressOutside={(e) => {
+          if (e.defaultPrevented) return;
+          if (!modal) return;
+          if (keyboardIsOpen.current) keyboardIsOpen.current = false;
+
+          if (!dismissible || !closeOnInteractOutside) return;
+          closeDrawer(false, { reason: "interactOutside", event: e });
+        }}
+        onFocusOutside={() => {
+          // Focus trapping is handled by FocusScope — nothing to do here.
+          // The old Radix architecture needed e.preventDefault() here (PR #1187)
+          // to prevent cascade closes, but the new DismissibleLayer handles
+          // that via onCascadeDismiss instead.
+        }}
+        onCascadeDismiss={({ dismissedParent }) => {
+          closeDrawer(false, { reason: "cascadeDismiss", dismissedParent });
+        }}
+      >
+        <FocusScope
+          asChild
+          loop={modal}
+          trapped={modal && isOpen}
+          onMountAutoFocus={(e) => {
+            // prevent FocusScope's default autoFocus behavior
+            e.preventDefault();
+
+            // when autoFocus is true, FocusScope sets the focus to the first tabbable element; otherwise content;
+            // the desired behavior is to set the focus to the content regardless of whether there are tabbable elements or not when true]
+            if (autoFocus) {
+              drawerRef.current?.focus();
+            }
+
+            // later, we can do something like:
+            // when trigger has clicked using keyboard, focus the first tabbable element;
+            // when trigger has clicked using mouse, focus the content
+            // -> matches Menu behavior
+          }}
+        >
+          <Primitive.div
+            role="dialog"
+            aria-modal={modal}
+            aria-labelledby={titleId}
+            aria-describedby={descriptionId}
+            data-delayed-snap-points={delayedSnapPoints ? "true" : "false"}
+            data-drawer-direction={direction}
+            data-open={dataAttr(isOpen)}
+            data-animation-done={hasAnimationDone ? "true" : "false"}
+            data-drawer=""
+            data-snap-points={isOpen && hasSnapPoints ? "true" : "false"}
+            data-custom-container={container ? "true" : "false"}
+            {...restProps}
+            ref={composeRefs(ref, drawerRef, contentRef)}
+            style={{
+              ...(snapPointsOffset && snapPointsOffset.length > 0
+                ? ({
+                    "--snap-point-height": `${snapPointsOffset[activeSnapPointIndex ?? 0]!}px`,
+                    ...style,
+                  } as React.CSSProperties)
+                : style),
+              ...(!modal && { pointerEvents: "auto" }),
+            }}
+            onPointerDown={(event) => {
+              if (handleOnly) return;
+              restProps.onPointerDown?.(event);
+              pointerStartRef.current = { x: event.pageX, y: event.pageY };
+              onPress(event);
+            }}
+            onPointerMove={(event) => {
+              lastKnownPointerEventRef.current = event;
+              if (handleOnly) return;
+              restProps.onPointerMove?.(event);
+              if (!pointerStartRef.current) return;
+              const yPosition = event.pageY - pointerStartRef.current.y;
+              const xPosition = event.pageX - pointerStartRef.current.x;
+
+              const swipeStartThreshold = event.pointerType === "touch" ? 10 : 2;
+              const delta = { x: xPosition, y: yPosition };
+
+              const isAllowedToSwipe = isDeltaInDirection(delta, direction, swipeStartThreshold);
+              if (isAllowedToSwipe) onDrag(event);
+              else if (
+                Math.abs(xPosition) > swipeStartThreshold ||
+                Math.abs(yPosition) > swipeStartThreshold
+              ) {
+                pointerStartRef.current = null;
+              }
+            }}
+            onPointerUp={(event) => {
+              restProps.onPointerUp?.(event);
+              pointerStartRef.current = null;
+              wasBeyondThePointRef.current = false;
+              onRelease(event);
+            }}
+            onPointerOut={(event) => {
+              restProps.onPointerOut?.(event);
+              handleOnPointerUp(lastKnownPointerEventRef.current);
+            }}
+            onContextMenu={(event) => {
+              restProps.onContextMenu?.(event);
+              if (lastKnownPointerEventRef.current) {
+                handleOnPointerUp(lastKnownPointerEventRef.current);
+              }
+            }}
+          />
+        </FocusScope>
+      </DismissibleLayer>
+    </Presence>
+  );
+});
+DrawerContent.displayName = "DrawerContent";
+
+export interface DrawerTitleProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLHeadingElement> {}
+
+export const DrawerTitle = forwardRef<HTMLHeadingElement, DrawerTitleProps>((props, ref) => {
+  const api = useDrawerContext();
+  return <Primitive.h2 ref={ref} {...mergeProps(api.titleProps, props)} />;
+});
+DrawerTitle.displayName = "DrawerTitle";
+
+export interface DrawerDescriptionProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLParagraphElement> {}
+
+export const DrawerDescription = forwardRef<HTMLParagraphElement, DrawerDescriptionProps>(
+  (props, ref) => {
+    const api = useDrawerContext();
+    return <Primitive.p ref={ref} {...mergeProps(api.descriptionProps, props)} />;
+  },
+);
+DrawerDescription.displayName = "DrawerDescription";
+
+export interface DrawerHeaderProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>((props, ref) => {
+  const api = useDrawerContext();
+  return <Primitive.div ref={ref} {...mergeProps(api.headerProps, props)} />;
+});
+DrawerHeader.displayName = "DrawerHeader";
+
+export interface DrawerCloseButtonProps
+  extends PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const DrawerCloseButton = forwardRef<HTMLButtonElement, DrawerCloseButtonProps>(
+  (props, ref) => {
+    const api = useDrawerContext();
+    return (
+      <Primitive.button
+        ref={composeRefs(ref, api.closeButtonRef)}
+        {...mergeProps(api.closeButtonProps, props)}
+      />
+    );
+  },
+);
+
+export interface DrawerHandleProps extends React.HTMLAttributes<HTMLDivElement> {
+  preventCycle?: boolean;
+}
+
+const LONG_HANDLE_PRESS_TIMEOUT = 250;
+const DOUBLE_TAP_TIMEOUT = 120;
+
+export const DrawerHandle = forwardRef<HTMLDivElement, DrawerHandleProps>((props, ref) => {
+  const { preventCycle = false, children, ...rest } = props;
+  const {
+    closeDrawer,
+    isDragging,
+    snapPoints,
+    activeSnapPoint,
+    setActiveSnapPoint,
+    dismissible,
+    handleOnly,
+    isOpen,
+    onPress,
+    onDrag,
+    onRelease,
+  } = useDrawerContext();
+
+  const closeTimeoutIdRef = useRef<number | null>(null);
+  const shouldCancelInteractionRef = useRef(false);
+
+  function handleStartCycle(event: React.MouseEvent<HTMLDivElement>) {
+    // Stop if this is the second click of a double click
+    if (shouldCancelInteractionRef.current) {
+      handleCancelInteraction();
+      return;
+    }
+    window.setTimeout(() => {
+      handleCycleSnapPoints(event);
+    }, DOUBLE_TAP_TIMEOUT);
+  }
+
+  function handleCycleSnapPoints(event: React.MouseEvent<HTMLDivElement>) {
+    // Prevent accidental taps while resizing drawer
+    if (isDragging || preventCycle || shouldCancelInteractionRef.current) {
+      handleCancelInteraction();
+      return;
+    }
+    // Make sure to clear the timeout id if the user releases the handle before the cancel timeout
+    handleCancelInteraction();
+
+    if (!snapPoints || snapPoints.length === 0) {
+      if (!dismissible) {
+        closeDrawer(false, { reason: "handleClickOnLastSnapPoint", event: event.nativeEvent });
+      }
+      return;
+    }
+
+    const isLastSnapPoint = activeSnapPoint === snapPoints[snapPoints.length - 1];
+
+    if (isLastSnapPoint && dismissible) {
+      closeDrawer(false, { reason: "handleClickOnLastSnapPoint", event: event.nativeEvent });
+      return;
+    }
+
+    const currentSnapIndex = snapPoints.findIndex((point) => point === activeSnapPoint);
+    if (currentSnapIndex === -1) return; // activeSnapPoint not found in snapPoints
+    const nextSnapPoint = snapPoints[currentSnapIndex + 1];
+    setActiveSnapPoint(nextSnapPoint);
+  }
+
+  function handleStartInteraction() {
+    closeTimeoutIdRef.current = window.setTimeout(() => {
+      // Cancel click interaction on a long press
+      shouldCancelInteractionRef.current = true;
+    }, LONG_HANDLE_PRESS_TIMEOUT);
+  }
+
+  function handleCancelInteraction() {
+    if (closeTimeoutIdRef.current) {
+      window.clearTimeout(closeTimeoutIdRef.current);
+    }
+    shouldCancelInteractionRef.current = false;
+  }
+
+  return (
+    <Primitive.div
+      ref={ref}
+      onClick={handleStartCycle}
+      onPointerCancel={handleCancelInteraction}
+      onPointerDown={(e) => {
+        if (handleOnly) onPress(e);
+        handleStartInteraction();
+      }}
+      onPointerMove={(e) => {
+        if (handleOnly) onDrag(e);
+      }}
+      onPointerUp={(e) => {
+        if (handleOnly) onRelease(e);
+        handleCancelInteraction();
+      }}
+      data-drawer-visible={isOpen ? "true" : "false"}
+      data-handle=""
+      aria-hidden="true"
+      {...rest}
+    >
+      {children}
+    </Primitive.div>
+  );
+});
+DrawerHandle.displayName = "DrawerHandle";

package/src/browser.ts

@@ -0,0 +1,44 @@
+export function isMobileFirefox(): boolean | undefined {
+  if (typeof window === "undefined" || typeof navigator === "undefined") return false;
+  return (
+    (/Firefox/.test(navigator.userAgent) && /Mobile/.test(navigator.userAgent)) ||
+    /FxiOS/.test(navigator.userAgent)
+  );
+}
+
+export function isMac(): boolean | undefined {
+  return testPlatform(/^Mac/);
+}
+
+export function isIPhone(): boolean | undefined {
+  return testPlatform(/^iPhone/);
+}
+
+export function isSafari(): boolean | undefined {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
+
+export function isIPad(): boolean | undefined {
+  return (
+    testPlatform(/^iPad/) ||
+    // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+    (isMac() && navigator.maxTouchPoints > 1)
+  );
+}
+
+export function isIOS(): boolean | undefined {
+  return isIPhone() || isIPad();
+}
+
+export function isAndroid(): boolean | undefined {
+  if (typeof window === "undefined" || typeof navigator === "undefined") return false;
+
+  return /Android/.test(navigator.userAgent);
+}
+
+// TODO: use userAgent instead?
+export function testPlatform(re: RegExp): boolean | undefined {
+  return typeof window !== "undefined" && window.navigator != null
+    ? re.test(window.navigator.platform)
+    : undefined;
+}

package/src/constants.ts

@@ -0,0 +1,21 @@
+/**
+ * TODO: move to recipe
+ */
+export const TRANSITIONS = {
+  ENTER_DURATION: 0.3, // $duration.d6
+  EXIT_DURATION: 0.2, // $duration.d4
+  OVERLAY_ENTER_TIMING_FUNCTION: "cubic-bezier(0, 0, 0.15, 1)", // $timing-function.enter
+  OVERLAY_EXIT_TIMING_FUNCTION: "cubic-bezier(0.35, 0, 1, 1)", // $timing-function.exit
+  CONTENT_ENTER_TIMING_FUNCTION: "cubic-bezier(0.03, 0.4, 0.1, 1)", // $timing-function.enter-expressive
+  CONTENT_EXIT_TIMING_FUNCTION: "cubic-bezier(0.35, 0, 1, 1)", // $timing-function.exit
+};
+
+export const VELOCITY_THRESHOLD = 0.4;
+
+export const CLOSE_THRESHOLD = 0.25;
+
+export const SCROLL_LOCK_TIMEOUT = 100;
+
+export const WINDOW_TOP_OFFSET = 26;
+
+export const DRAG_CLASS = "seed-dragging";