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

package/src/helpers.ts

@@ -0,0 +1,145 @@
+import type { AnyFunction, DrawerDirection } from "./types";
+
+interface Style {
+  [key: string]: string;
+}
+
+const cache = new WeakMap();
+
+// HTML input types that do not cause the software keyboard to appear.
+const nonTextInputTypes = new Set([
+  "checkbox",
+  "radio",
+  "range",
+  "color",
+  "file",
+  "image",
+  "button",
+  "submit",
+  "reset",
+]);
+
+export function isInput(target: Element) {
+  return (
+    (target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
+    target instanceof HTMLTextAreaElement ||
+    (target instanceof HTMLElement && target.isContentEditable)
+  );
+}
+
+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,27 @@
+export {
+  DrawerBackdrop,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHandle,
+  DrawerHeader,
+  DrawerPositioner,
+  DrawerRoot,
+  DrawerTitle,
+  DrawerTrigger,
+  type DrawerBackdropProps,
+  type DrawerCloseButtonProps,
+  type DrawerContentProps,
+  type DrawerDescriptionProps,
+  type DrawerHandleProps,
+  type DrawerHeaderProps,
+  type DrawerPositionerProps,
+  type DrawerRootProps,
+  type DrawerTitleProps,
+  type DrawerTriggerProps,
+} from "./Drawer";
+
+export { useDrawer, type UseDrawerProps } 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;

package/src/use-position-fixed.ts

@@ -0,0 +1,149 @@
+// This code comes from https://github.com/emilkowalski/vaul/blob/main/src/use-position-fixed.ts
+
+import React from "react";
+import { isSafari } from "./browser";
+
+let previousBodyPosition: Record<string, string> | null = null;
+
+/**
+ * This hook is necessary to prevent buggy behavior on iOS devices (need to test on Android).
+ * I won't get into too much detail about what bugs it solves, but so far I've found that setting the body to `position: fixed` is the most reliable way to prevent those bugs.
+ * Issues that this hook solves:
+ * https://github.com/emilkowalski/vaul/issues/435
+ * https://github.com/emilkowalski/vaul/issues/433
+ * And more that I discovered, but were just not reported.
+ */
+
+export function usePositionFixed({
+  isOpen,
+  modal,
+  nested,
+  hasBeenOpened,
+  preventScrollRestoration,
+  noBodyStyles,
+}: {
+  isOpen: boolean;
+  modal: boolean;
+  nested: boolean;
+  hasBeenOpened: boolean;
+  preventScrollRestoration: boolean;
+  noBodyStyles: boolean;
+}) {
+  const [activeUrl, setActiveUrl] = React.useState(() =>
+    typeof window !== "undefined" ? window.location.href : "",
+  );
+  const scrollPos = React.useRef(0);
+
+  const setPositionFixed = React.useCallback(() => {
+    // All browsers on iOS will return true here.
+    if (!isSafari()) return;
+
+    // If previousBodyPosition is already set, don't set it again.
+    if (previousBodyPosition === null && isOpen && !noBodyStyles) {
+      previousBodyPosition = {
+        position: document.body.style.position,
+        top: document.body.style.top,
+        left: document.body.style.left,
+        height: document.body.style.height,
+        right: "unset",
+      };
+
+      // Update the dom inside an animation frame
+      const { scrollX, innerHeight } = window;
+
+      document.body.style.setProperty("position", "fixed", "important");
+      Object.assign(document.body.style, {
+        top: `${-scrollPos.current}px`,
+        left: `${-scrollX}px`,
+        right: "0px",
+        height: "auto",
+      });
+
+      window.setTimeout(
+        () =>
+          window.requestAnimationFrame(() => {
+            // Attempt to check if the bottom bar appeared due to the position change
+            const bottomBarHeight = innerHeight - window.innerHeight;
+            if (bottomBarHeight && scrollPos.current >= innerHeight) {
+              // Move the content further up so that the bottom bar doesn't hide it
+              document.body.style.top = `${-(scrollPos.current + bottomBarHeight)}px`;
+            }
+          }),
+        300,
+      );
+    }
+  }, [isOpen]);
+
+  const restorePositionSetting = React.useCallback(() => {
+    // All browsers on iOS will return true here.
+    if (!isSafari()) return;
+
+    if (previousBodyPosition !== null && !noBodyStyles) {
+      // Convert the position from "px" to Int
+      const y = -parseInt(document.body.style.top, 10);
+      const x = -parseInt(document.body.style.left, 10);
+
+      // Restore styles
+      Object.assign(document.body.style, previousBodyPosition);
+
+      window.requestAnimationFrame(() => {
+        if (preventScrollRestoration && activeUrl !== window.location.href) {
+          setActiveUrl(window.location.href);
+          return;
+        }
+
+        window.scrollTo(x, y);
+      });
+
+      previousBodyPosition = null;
+    }
+  }, [activeUrl]);
+
+  React.useEffect(() => {
+    function onScroll() {
+      scrollPos.current = window.scrollY;
+    }
+
+    onScroll();
+
+    window.addEventListener("scroll", onScroll);
+
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (!modal) return;
+
+    return () => {
+      if (typeof document === "undefined") return;
+
+      // Another drawer is opened, safe to ignore the execution
+      const hasDrawerOpened = !!document.querySelector("[data-drawer]");
+      if (hasDrawerOpened) return;
+
+      restorePositionSetting();
+    };
+  }, [modal, restorePositionSetting]);
+
+  React.useEffect(() => {
+    if (nested || !hasBeenOpened) return;
+    // This is needed to force Safari toolbar to show **before** the drawer starts animating to prevent a gnarly shift from happening
+    if (isOpen) {
+      // avoid for standalone mode (PWA)
+      const isStandalone = window.matchMedia("(display-mode: standalone)").matches;
+      !isStandalone && setPositionFixed();
+
+      if (!modal) {
+        window.setTimeout(() => {
+          restorePositionSetting();
+        }, 500);
+      }
+    } else {
+      restorePositionSetting();
+    }
+  }, [isOpen, hasBeenOpened, activeUrl, modal, nested, setPositionFixed, restorePositionSetting]);
+
+  return { restorePositionSetting };
+}

package/src/use-snap-points.ts

@@ -0,0 +1,353 @@
+import { useControllableState } from "@seed-design/react-use-controllable-state";
+import React from "react";
+import { TRANSITIONS, VELOCITY_THRESHOLD } from "./constants";
+import { isVertical, set } from "./helpers";
+import type { DrawerDirection } from "./types";
+
+export function useSnapPoints({
+  activeSnapPointProp,
+  setActiveSnapPointProp,
+  snapPoints,
+  drawerRef,
+  overlayRef,
+  fadeFromIndex,
+  onSnapPointChange,
+  direction = "bottom",
+  container,
+  snapToSequentialPoint,
+}: {
+  activeSnapPointProp?: number | string | null;
+  setActiveSnapPointProp?(snapPoint: number | null | string): void;
+  snapPoints?: (number | string)[];
+  fadeFromIndex?: number;
+  drawerRef: React.RefObject<HTMLDivElement | null>;
+  overlayRef: React.RefObject<HTMLDivElement | null>;
+  onSnapPointChange(activeSnapPointIndex: number): void;
+  direction?: DrawerDirection;
+  container?: HTMLElement | null | undefined;
+  snapToSequentialPoint?: boolean;
+}) {
+  const [activeSnapPoint, setActiveSnapPoint] = useControllableState<string | number | null>({
+    prop: activeSnapPointProp,
+    defaultProp: snapPoints?.[0] ?? null,
+    onChange: setActiveSnapPointProp,
+  });
+
+  const [windowDimensions, setWindowDimensions] = React.useState(
+    typeof window !== "undefined"
+      ? {
+          innerWidth: window.innerWidth,
+          innerHeight: window.innerHeight,
+        }
+      : undefined,
+  );
+
+  React.useEffect(() => {
+    function onResize() {
+      setWindowDimensions({
+        innerWidth: window.innerWidth,
+        innerHeight: window.innerHeight,
+      });
+    }
+    window.addEventListener("resize", onResize);
+
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+
+  const isLastSnapPoint = React.useMemo(
+    () => activeSnapPoint === snapPoints?.[snapPoints.length - 1] || null,
+    [snapPoints, activeSnapPoint],
+  );
+
+  const activeSnapPointIndex = React.useMemo(
+    () => snapPoints?.findIndex((snapPoint) => snapPoint === activeSnapPoint) ?? null,
+    [snapPoints, activeSnapPoint],
+  );
+
+  const shouldFade =
+    (snapPoints &&
+      snapPoints.length > 0 &&
+      (fadeFromIndex || fadeFromIndex === 0) &&
+      !Number.isNaN(fadeFromIndex) &&
+      snapPoints[fadeFromIndex] === activeSnapPoint) ||
+    !snapPoints;
+
+  const snapPointsOffset = React.useMemo(() => {
+    const containerSize = container
+      ? {
+          width: container.getBoundingClientRect().width,
+          height: container.getBoundingClientRect().height,
+        }
+      : typeof window !== "undefined"
+        ? { width: window.innerWidth, height: window.innerHeight }
+        : { width: 0, height: 0 };
+
+    return (
+      snapPoints?.map((snapPoint) => {
+        // FIXME
+        // 1 -> container 100% << expected
+        // 0.5 -> container 50% << expected
+        // 300px -> 300 -> 300px << expected
+        // 15rem -> 15 -> 15px << this makes no sense, should fix or disallow
+
+        const isPx = typeof snapPoint === "string";
+        let snapPointAsNumber = 0;
+
+        if (isPx) {
+          snapPointAsNumber = Number.parseInt(snapPoint, 10);
+        }
+
+        if (isVertical(direction)) {
+          const height = isPx
+            ? snapPointAsNumber
+            : windowDimensions
+              ? snapPoint * containerSize.height
+              : 0;
+
+          if (windowDimensions) {
+            return direction === "bottom"
+              ? containerSize.height - height
+              : -containerSize.height + height;
+          }
+
+          return height;
+        }
+        const width = isPx
+          ? snapPointAsNumber
+          : windowDimensions
+            ? snapPoint * containerSize.width
+            : 0;
+
+        if (windowDimensions) {
+          return direction === "right" ? containerSize.width - width : -containerSize.width + width;
+        }
+
+        return width;
+      }) ?? []
+    );
+  }, [snapPoints, windowDimensions, container, direction]);
+
+  const activeSnapPointOffset = React.useMemo(
+    () => (activeSnapPointIndex !== null ? snapPointsOffset?.[activeSnapPointIndex] : null),
+    [snapPointsOffset, activeSnapPointIndex],
+  );
+
+  const snapToPoint = React.useCallback(
+    (dimension: number) => {
+      const newSnapPointIndex =
+        snapPointsOffset?.findIndex((snapPointDim) => snapPointDim === dimension) ?? null;
+      onSnapPointChange(newSnapPointIndex);
+
+      set(drawerRef.current, {
+        transition: `transform ${TRANSITIONS.ENTER_DURATION}s ${TRANSITIONS.CONTENT_ENTER_TIMING_FUNCTION}`,
+        transform: isVertical(direction)
+          ? `translate3d(0, ${dimension}px, 0)`
+          : `translate3d(${dimension}px, 0, 0)`,
+      });
+
+      if (
+        snapPointsOffset &&
+        newSnapPointIndex !== snapPointsOffset.length - 1 &&
+        fadeFromIndex !== undefined &&
+        newSnapPointIndex !== fadeFromIndex &&
+        newSnapPointIndex < fadeFromIndex
+      ) {
+        if (fadeFromIndex !== 0) {
+          set(overlayRef.current, {
+            transition: `opacity ${TRANSITIONS.EXIT_DURATION}s ${TRANSITIONS.OVERLAY_EXIT_TIMING_FUNCTION}`,
+            opacity: "0",
+          });
+        }
+      } else {
+        set(overlayRef.current, {
+          transition: `opacity ${TRANSITIONS.ENTER_DURATION}s ${TRANSITIONS.OVERLAY_ENTER_TIMING_FUNCTION}`,
+          opacity: "1",
+        });
+      }
+
+      setActiveSnapPoint(snapPoints?.[Math.max(newSnapPointIndex, 0)]);
+    },
+    [
+      drawerRef,
+      overlayRef,
+      snapPoints,
+      snapPointsOffset,
+      fadeFromIndex,
+      direction,
+      onSnapPointChange,
+      setActiveSnapPoint,
+    ],
+  );
+
+  React.useEffect(() => {
+    if (activeSnapPoint || activeSnapPointProp) {
+      const newIndex =
+        snapPoints?.findIndex(
+          (snapPoint) => snapPoint === activeSnapPointProp || snapPoint === activeSnapPoint,
+        ) ?? -1;
+      if (snapPointsOffset && newIndex !== -1 && typeof snapPointsOffset[newIndex] === "number") {
+        snapToPoint(snapPointsOffset[newIndex] as number);
+      }
+    }
+  }, [activeSnapPoint, activeSnapPointProp, snapPoints, snapPointsOffset, snapToPoint]);
+
+  function onRelease({
+    draggedDistance,
+    closeDrawer,
+    velocity,
+    dismissible,
+    event,
+  }: {
+    draggedDistance: number;
+    closeDrawer: (fromWithin: boolean, details: { reason: "drag"; event: PointerEvent }) => void;
+    velocity: number;
+    dismissible: boolean;
+    event: PointerEvent;
+  }) {
+    if (fadeFromIndex === undefined) return;
+
+    const currentPosition =
+      direction === "bottom" || direction === "right"
+        ? (activeSnapPointOffset ?? 0) - draggedDistance
+        : (activeSnapPointOffset ?? 0) + draggedDistance;
+    const isOverlaySnapPoint = activeSnapPointIndex === fadeFromIndex - 1;
+    const isFirst = activeSnapPointIndex === 0;
+    const hasDraggedUp = draggedDistance > 0;
+
+    if (isOverlaySnapPoint) {
+      set(overlayRef.current, {
+        transition: `opacity ${TRANSITIONS.EXIT_DURATION}s ${TRANSITIONS.OVERLAY_EXIT_TIMING_FUNCTION}`,
+      });
+    }
+
+    if (!snapToSequentialPoint && velocity > 2 && !hasDraggedUp) {
+      if (dismissible) closeDrawer(false, { reason: "drag", event });
+      else snapToPoint(snapPointsOffset[0]); // snap to initial point
+      return;
+    }
+
+    if (!snapToSequentialPoint && velocity > 2 && hasDraggedUp && snapPointsOffset && snapPoints) {
+      snapToPoint(snapPointsOffset[snapPoints.length - 1] as number);
+      return;
+    }
+
+    // Find the closest snap point to the current position
+    const closestSnapPoint = snapPointsOffset?.reduce((prev, curr) => {
+      if (typeof prev !== "number" || typeof curr !== "number") return prev;
+
+      return Math.abs(curr - currentPosition) < Math.abs(prev - currentPosition) ? curr : prev;
+    });
+
+    const dim = isVertical(direction) ? window.innerHeight : window.innerWidth;
+    if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedDistance) < dim * 0.4) {
+      const dragDirection = hasDraggedUp ? 1 : -1; // 1 = up, -1 = down
+
+      // Don't do anything if we swipe upwards while being on the last snap point
+      if (dragDirection > 0 && isLastSnapPoint && snapPoints) {
+        snapToPoint(snapPointsOffset[snapPoints.length - 1]);
+        return;
+      }
+
+      if (isFirst && dragDirection < 0 && dismissible) {
+        closeDrawer(false, { reason: "drag", event });
+      }
+
+      if (activeSnapPointIndex === null) return;
+
+      snapToPoint(snapPointsOffset[activeSnapPointIndex + dragDirection]);
+      return;
+    }
+
+    snapToPoint(closestSnapPoint);
+  }
+
+  function onDrag({ draggedDistance }: { draggedDistance: number }) {
+    if (activeSnapPointOffset === null) return;
+    const newValue =
+      direction === "bottom" || direction === "right"
+        ? activeSnapPointOffset - draggedDistance
+        : activeSnapPointOffset + draggedDistance;
+
+    // Don't do anything if we exceed the last(biggest) snap point
+    if (
+      (direction === "bottom" || direction === "right") &&
+      newValue < snapPointsOffset[snapPointsOffset.length - 1]
+    ) {
+      return;
+    }
+    if (
+      (direction === "top" || direction === "left") &&
+      newValue > snapPointsOffset[snapPointsOffset.length - 1]
+    ) {
+      return;
+    }
+
+    set(drawerRef.current, {
+      transform: isVertical(direction)
+        ? `translate3d(0, ${newValue}px, 0)`
+        : `translate3d(${newValue}px, 0, 0)`,
+    });
+  }
+
+  function getPercentageDragged(absDraggedDistance: number, isDraggingDown: boolean) {
+    if (
+      !snapPoints ||
+      typeof activeSnapPointIndex !== "number" ||
+      !snapPointsOffset ||
+      fadeFromIndex === undefined
+    )
+      return null;
+
+    // If this is true we are dragging to a snap point that is supposed to have an overlay
+    const isOverlaySnapPoint = activeSnapPointIndex === fadeFromIndex - 1;
+    const isOverlaySnapPointOrHigher = activeSnapPointIndex >= fadeFromIndex;
+
+    if (isOverlaySnapPointOrHigher && isDraggingDown) {
+      return 0;
+    }
+
+    // Don't animate, but still use this one if we are dragging away from the overlaySnapPoint
+    if (isOverlaySnapPoint && !isDraggingDown) return 1;
+    if (!shouldFade && !isOverlaySnapPoint) return null;
+
+    // Either fadeFrom index or the one before
+    const targetSnapPointIndex = isOverlaySnapPoint
+      ? activeSnapPointIndex + 1
+      : activeSnapPointIndex - 1;
+
+    if (fadeFromIndex === 0 && activeSnapPointIndex === 0) {
+      let firstSnapPoint = snapPoints[0];
+      if (typeof firstSnapPoint === "string") {
+        firstSnapPoint = Number.parseInt(firstSnapPoint, 10);
+      }
+      const snapPointDistance = firstSnapPoint;
+      const percentageDragged = absDraggedDistance / Math.abs(snapPointDistance);
+      return percentageDragged;
+    }
+
+    // Get the distance from overlaySnapPoint to the one before or vice-versa to calculate the opacity percentage accordingly
+    const snapPointDistance = isOverlaySnapPoint
+      ? snapPointsOffset[targetSnapPointIndex] - snapPointsOffset[targetSnapPointIndex - 1]
+      : snapPointsOffset[targetSnapPointIndex + 1] - snapPointsOffset[targetSnapPointIndex];
+
+    const percentageDragged = absDraggedDistance / Math.abs(snapPointDistance);
+
+    if (isOverlaySnapPoint) {
+      return 1 - percentageDragged;
+    }
+
+    return percentageDragged;
+  }
+
+  return {
+    isLastSnapPoint,
+    activeSnapPoint,
+    shouldFade,
+    getPercentageDragged,
+    setActiveSnapPoint,
+    activeSnapPointIndex,
+    onRelease,
+    onDrag,
+    snapPointsOffset,
+  };
+}