@seed-design/react-drawer 1.0.0

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@seed-design/react-drawer",
+  "version": "1.0.0",
+  "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-dialog": "^1.1.15",
+    "@radix-ui/react-use-callback-ref": "^1.1.0",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@seed-design/dom-utils": "1.0.0",
+    "@seed-design/react-primitive": "1.0.0"
+  },
+  "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,20 @@
+export {
+  DrawerBackdrop as Backdrop,
+  DrawerCloseButton as CloseButton,
+  DrawerContent as Content,
+  DrawerDescription as Description,
+  DrawerHandle as Handle,
+  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 DrawerPositionerProps as PositionerProps,
+  type DrawerRootProps as RootProps,
+  type DrawerTitleProps as TitleProps,
+  type DrawerTriggerProps as TriggerProps,
+} from "./Drawer";

package/src/Drawer.tsx

@@ -0,0 +1,410 @@
+"use client";
+
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
+import { dataAttr } from "@seed-design/dom-utils";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import type * as React from "react";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import type { DrawerDirection } from "./types";
+import { useDrawer, type DialogProps } from "./useDrawer";
+import { DrawerProvider, useDrawerContext } from "./useDrawerContext";
+
+export interface DrawerRootProps extends DialogProps {
+  children?: React.ReactNode;
+}
+
+export const DrawerRoot = (props: DrawerRootProps) => {
+  const { children, defaultOpen, dismissible, onOpenChange, modal } = props;
+  const api = useDrawer(props);
+  return (
+    <DialogPrimitive.Root
+      defaultOpen={defaultOpen}
+      open={api.isOpen}
+      onOpenChange={(open) => {
+        if (!dismissible && !open) return;
+        if (open) {
+          api.setHasBeenOpened(true);
+        } else {
+          api.closeDrawer(true);
+        }
+
+        api.setIsOpen(open);
+        onOpenChange?.(open);
+      }}
+      modal={modal}
+    >
+      <DrawerProvider value={api}>{children}</DrawerProvider>
+    </DialogPrimitive.Root>
+  );
+};
+
+export interface DrawerTriggerProps extends DialogPrimitive.DialogTriggerProps {}
+
+export const DrawerTrigger = DialogPrimitive.Trigger;
+
+export interface DrawerPositionerProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const DrawerPositioner = forwardRef<HTMLDivElement, DrawerPositionerProps>((props, ref) => {
+  const api = useDrawerContext();
+  return (
+    <Primitive.div
+      ref={ref}
+      {...props}
+      style={{ pointerEvents: api.isOpen ? undefined : "none" }}
+    />
+  );
+});
+DrawerPositioner.displayName = "DrawerPositioner";
+
+export interface DrawerBackdropProps
+  extends DialogPrimitive.DialogOverlayProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const DrawerBackdrop = forwardRef<HTMLDivElement, DrawerBackdropProps>((props, ref) => {
+  const {
+    overlayRef,
+    onRelease,
+    modal,
+    snapPoints,
+    isOpen,
+    shouldFade,
+    shouldAnimate,
+    shouldOverlayAnimate,
+  } = useDrawerContext();
+  const composedRef = useComposedRefs(ref, overlayRef);
+  const hasSnapPoints = snapPoints && snapPoints.length > 0;
+  const onMouseUp = useCallbackRef((event: React.PointerEvent<HTMLDivElement>) => onRelease(event));
+
+  // Overlay is the component that is locking scroll, removing it will unlock the scroll without having to dig into Radix's Dialog library
+  if (!modal) {
+    return null;
+  }
+
+  return (
+    <DialogPrimitive.Overlay
+      ref={composedRef}
+      onMouseUp={onMouseUp}
+      data-snap-points={isOpen && hasSnapPoints ? "true" : "false"}
+      data-snap-points-overlay={isOpen && shouldFade ? "true" : "false"}
+      data-animate={shouldAnimate?.current ? "true" : "false"}
+      data-should-overlay-animate={shouldOverlayAnimate ? "true" : "false"}
+      data-open={dataAttr(isOpen)}
+      {...props}
+    />
+  );
+});
+DrawerBackdrop.displayName = "DrawerBackdrop";
+
+export interface DrawerContentProps
+  extends DialogPrimitive.DialogContentProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((props, ref) => {
+  const { onPointerDownOutside, style, onOpenAutoFocus, ...restProps } = props;
+  const {
+    drawerRef,
+    onPress,
+    onRelease,
+    onDrag,
+    keyboardIsOpen,
+    snapPointsOffset,
+    activeSnapPointIndex,
+    modal,
+    isOpen,
+    direction,
+    snapPoints,
+    container,
+    handleOnly,
+    shouldAnimate,
+    autoFocus,
+    closeDrawer,
+    closeOnInteractOutside,
+    closeOnEscape,
+    dismissible,
+  } = useDrawerContext();
+  // Needed to use transition instead of animations
+  const [delayedSnapPoints, setDelayedSnapPoints] = useState(false);
+  const composedRef = useComposedRefs(ref, drawerRef);
+  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 },
+    direction: 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(direction) ? 1 : -1;
+
+    if (direction === "left" || direction === "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 (
+    <DialogPrimitive.Content
+      data-delayed-snap-points={delayedSnapPoints ? "true" : "false"}
+      data-drawer-direction={direction}
+      data-open={dataAttr(isOpen)}
+      data-drawer=""
+      data-snap-points={isOpen && hasSnapPoints ? "true" : "false"}
+      data-custom-container={container ? "true" : "false"}
+      data-animate={shouldAnimate?.current ? "true" : "false"}
+      {...restProps}
+      ref={composedRef}
+      style={
+        snapPointsOffset && snapPointsOffset.length > 0
+          ? ({
+              "--snap-point-height": `${snapPointsOffset[activeSnapPointIndex ?? 0]!}px`,
+              ...style,
+            } as React.CSSProperties)
+          : (style ?? {})
+      }
+      onPointerDown={(event) => {
+        if (handleOnly) return;
+        restProps.onPointerDown?.(event);
+        pointerStartRef.current = { x: event.pageX, y: event.pageY };
+        onPress(event);
+      }}
+      onOpenAutoFocus={(e) => {
+        onOpenAutoFocus?.(e);
+
+        if (!autoFocus) {
+          e.preventDefault();
+        }
+      }}
+      onPointerDownOutside={(e) => {
+        onPointerDownOutside?.(e);
+
+        if (!modal || e.defaultPrevented) {
+          e.preventDefault();
+          return;
+        }
+
+        if (keyboardIsOpen.current) {
+          keyboardIsOpen.current = false;
+        }
+      }}
+      onFocusOutside={(e) => {
+        if (!modal) {
+          e.preventDefault();
+          return;
+        }
+      }}
+      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);
+        }
+      }}
+      onInteractOutside={(e) => {
+        if (dismissible && closeOnInteractOutside) {
+          closeDrawer();
+        }
+        props.onInteractOutside?.(e);
+      }}
+      onEscapeKeyDown={(e) => {
+        if (dismissible && closeOnEscape) {
+          closeDrawer();
+        }
+        props.onEscapeKeyDown?.(e);
+      }}
+    />
+  );
+});
+DrawerContent.displayName = "DrawerContent";
+
+export interface DrawerTitleProps extends DialogPrimitive.DialogTitleProps {}
+
+export const DrawerTitle = DialogPrimitive.Title;
+
+export interface DrawerDescriptionProps extends DialogPrimitive.DialogDescriptionProps {}
+
+export const DrawerDescription = DialogPrimitive.Description;
+
+export interface DrawerCloseButtonProps extends DialogPrimitive.DialogCloseProps {}
+
+export const DrawerCloseButton = forwardRef<HTMLButtonElement, DrawerCloseButtonProps>(
+  (props, ref) => {
+    const api = useDrawerContext();
+    return (
+      <Primitive.button
+        ref={ref}
+        {...props}
+        onClick={(e) => {
+          props.onClick?.(e);
+          if (e.defaultPrevented) return;
+          api.setIsOpen(false);
+        }}
+      />
+    );
+  },
+);
+
+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,
+  } = useDrawerContext();
+
+  const closeTimeoutIdRef = useRef<number | null>(null);
+  const shouldCancelInteractionRef = useRef(false);
+
+  function handleStartCycle() {
+    // Stop if this is the second click of a double click
+    if (shouldCancelInteractionRef.current) {
+      handleCancelInteraction();
+      return;
+    }
+    window.setTimeout(() => {
+      handleCycleSnapPoints();
+    }, DOUBLE_TAP_TIMEOUT);
+  }
+
+  function handleCycleSnapPoints() {
+    // 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();
+      }
+      return;
+    }
+
+    const isLastSnapPoint = activeSnapPoint === snapPoints[snapPoints.length - 1];
+
+    if (isLastSnapPoint && dismissible) {
+      closeDrawer();
+      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 is already handled by the content component
+      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,37 @@
+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 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";

package/src/helpers.ts

@@ -0,0 +1,124 @@
+import type { AnyFunction, DrawerDirection } from "./types";
+
+interface Style {
+  [key: string]: string;
+}
+
+const cache = new WeakMap();
+
+export function isInView(el: HTMLElement): boolean {
+  const rect = el.getBoundingClientRect();
+
+  if (!window.visualViewport) return false;
+
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    // Need + 40 for safari detection
+    rect.bottom <= window.visualViewport.height - 40 &&
+    rect.right <= window.visualViewport.width
+  );
+}
+
+export function set(
+  el: Element | HTMLElement | null | undefined,
+  styles: Style,
+  ignoreCache = false,
+) {
+  if (!el || !(el instanceof HTMLElement)) return;
+  let originalStyles: Style = {};
+
+  Object.entries(styles).forEach(([key, value]: [string, string]) => {
+    if (key.startsWith("--")) {
+      el.style.setProperty(key, value);
+      return;
+    }
+
+    originalStyles[key] = (el.style as any)[key];
+    (el.style as any)[key] = value;
+  });
+
+  if (ignoreCache) return;
+
+  cache.set(el, originalStyles);
+}
+
+export function reset(el: Element | HTMLElement | null, prop?: string) {
+  if (!el || !(el instanceof HTMLElement)) return;
+  let originalStyles = cache.get(el);
+
+  if (!originalStyles) {
+    return;
+  }
+
+  if (prop) {
+    (el.style as any)[prop] = originalStyles[prop];
+  } else {
+    Object.entries(originalStyles).forEach(([key, value]) => {
+      (el.style as any)[key] = value;
+    });
+  }
+}
+
+export const isVertical = (direction: DrawerDirection) => {
+  switch (direction) {
+    case "top":
+    case "bottom":
+      return true;
+    case "left":
+    case "right":
+      return false;
+    default:
+      return direction satisfies never;
+  }
+};
+
+export function getTranslate(element: HTMLElement, direction: DrawerDirection): number | null {
+  if (!element) {
+    return null;
+  }
+  const style = window.getComputedStyle(element);
+  const transform =
+    // @ts-ignore
+    style.transform || style.webkitTransform || style.mozTransform;
+  let mat = transform.match(/^matrix3d\((.+)\)$/);
+  if (mat) {
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d
+    return Number.parseFloat(mat[1].split(", ")[isVertical(direction) ? 13 : 12]);
+  }
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix
+  mat = transform.match(/^matrix\((.+)\)$/);
+  return mat ? Number.parseFloat(mat[1].split(", ")[isVertical(direction) ? 5 : 4]) : null;
+}
+
+export function dampenValue(v: number) {
+  return 8 * (Math.log(v + 1) - 2);
+}
+
+export function assignStyle(
+  element: HTMLElement | null | undefined,
+  style: Partial<CSSStyleDeclaration>,
+) {
+  if (!element) return () => {};
+
+  const prevStyle = element.style.cssText;
+  Object.assign(element.style, style);
+
+  return () => {
+    element.style.cssText = prevStyle;
+  };
+}
+
+/**
+ * Receives functions as arguments and returns a new function that calls all.
+ */
+export function chain<T>(...fns: T[]) {
+  return (...args: T extends AnyFunction ? Parameters<T> : never) => {
+    for (const fn of fns) {
+      if (typeof fn === "function") {
+        // @ts-ignore
+        fn(...args);
+      }
+    }
+  };
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+export {
+  DrawerBackdrop,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHandle,
+  DrawerPositioner,
+  DrawerRoot,
+  DrawerTitle,
+  DrawerTrigger,
+  type DrawerBackdropProps,
+  type DrawerCloseButtonProps,
+  type DrawerContentProps,
+  type DrawerDescriptionProps,
+  type DrawerHandleProps,
+  type DrawerPositionerProps,
+  type DrawerRootProps,
+  type DrawerTitleProps,
+  type DrawerTriggerProps,
+} from "./Drawer";
+
+export { useDrawer, type DialogProps } from "./useDrawer";
+export { useDrawerContext, type DrawerContextValue } from "./useDrawerContext";
+
+export * as Drawer from "./Drawer.namespace";

package/src/types.ts

@@ -0,0 +1,7 @@
+export type DrawerDirection = "top" | "bottom" | "left" | "right";
+export interface SnapPoint {
+  fraction: number;
+  height: number;
+}
+
+export type AnyFunction = (...args: any) => any;