"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

const defaultSnapPoints = [0.25, 0.55, 0.85];

export interface SheetProps extends React.HTMLAttributes<HTMLDivElement> {
  title?: string;
  description?: string;
  snapPoints?: number[];
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  triggerLabel?: string;
  trigger?: React.ReactNode;
  footer?: React.ReactNode;
}

export function Sheet({
  title = "Details",
  description,
  snapPoints = defaultSnapPoints,
  open,
  defaultOpen = false,
  onOpenChange,
  triggerLabel = "Open sheet",
  trigger,
  footer,
  className,
  children,
  ...props
}: SheetProps) {
  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
  const [activeSnap, setActiveSnap] = React.useState(1);
  const [dragOffset, setDragOffset] = React.useState(0);
  const [viewportHeight, setViewportHeight] = React.useState(0);
  const isControlled = open !== undefined;
  const isOpen = isControlled ? open : internalOpen;

  const orderedSnaps = React.useMemo(() => {
    return [...snapPoints]
      .map((point) => Math.min(Math.max(point, 0.1), 1))
      .sort((a, b) => a - b);
  }, [snapPoints]);

  const maxSnap = orderedSnaps[orderedSnaps.length - 1] ?? 0.85;

  const setOpen = React.useCallback(
    (value: boolean) => {
      if (!isControlled) {
        setInternalOpen(value);
      }
      onOpenChange?.(value);
    },
    [isControlled, onOpenChange]
  );

  React.useEffect(() => {
    if (!isOpen) {
      return undefined;
    }

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setOpen(false);
      }
    };

    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [isOpen, setOpen]);

  React.useEffect(() => {
    if (!isOpen) {
      return undefined;
    }

    const updateHeight = () => setViewportHeight(window.innerHeight);
    updateHeight();
    window.addEventListener("resize", updateHeight);

    const originalOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";

    return () => {
      document.body.style.overflow = originalOverflow;
      window.removeEventListener("resize", updateHeight);
    };
  }, [isOpen]);

  React.useEffect(() => {
    if (!isOpen) {
      setDragOffset(0);
    }
  }, [isOpen]);

  const maxHeight = viewportHeight * maxSnap;
  const snapHeights = orderedSnaps.map((snap) => viewportHeight * snap);
  const activeHeight = snapHeights[activeSnap] ?? maxHeight * 0.6;
  const baseTranslate = Math.max(maxHeight - activeHeight, 0);
  const translateY = Math.min(Math.max(baseTranslate + dragOffset, 0), maxHeight);

  const dragState = React.useRef<{ startY: number; active: boolean }>({
    startY: 0,
    active: false,
  });

  const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
    dragState.current = { startY: event.clientY, active: true };
    setDragOffset(0);
  };

  const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
    if (!dragState.current.active) {
      return;
    }

    const delta = event.clientY - dragState.current.startY;
    setDragOffset(Math.max(delta, -baseTranslate));
  };

  const handlePointerUp = () => {
    if (!dragState.current.active) {
      return;
    }

    dragState.current.active = false;

    const visibleHeight = Math.max(maxHeight - translateY, 0);
    const closestSnap = snapHeights.reduce(
      (closest, height, index) => {
        const currentDiff = Math.abs(height - visibleHeight);
        return currentDiff < closest.diff ? { index, diff: currentDiff } : closest;
      },
      { index: 0, diff: Number.POSITIVE_INFINITY }
    );

    if (visibleHeight < (snapHeights[0] ?? maxHeight * 0.25) * 0.6) {
      setOpen(false);
      setDragOffset(0);
      return;
    }

    setActiveSnap(closestSnap.index);
    setDragOffset(0);
  };

  const triggerElement = React.useMemo(() => {
    if (trigger) {
      if (React.isValidElement(trigger)) {
        const triggerElement = trigger as React.ReactElement<{
          onClick?: React.MouseEventHandler;
        }>;
        const existingOnClick = triggerElement.props.onClick;

        return React.cloneElement(triggerElement, {
          onClick: (event: React.MouseEvent) => {
            existingOnClick?.(event);
            setOpen(true);
          },
        });
      }

      return (
        <button
          type="button"
          onClick={() => setOpen(true)}
          className={cn(
            "inline-flex items-center gap-2 rounded-md border border-border",
            "bg-background px-4 py-2 text-sm font-medium text-foreground",
            "transition-colors hover:bg-muted",
            "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border"
          )}
        >
          {trigger}
        </button>
      );
    }

    if (!triggerLabel) {
      return null;
    }

    return (
      <button
        type="button"
        onClick={() => setOpen(true)}
        className={cn(
          "inline-flex items-center gap-2 rounded-md border border-border",
          "bg-background px-4 py-2 text-sm font-medium text-foreground",
          "transition-colors hover:bg-muted",
          "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border"
        )}
      >
        {triggerLabel}
      </button>
    );
  }, [trigger, triggerLabel, setOpen]);

  return (
    <div className={cn("inline-flex", className)} {...props}>
      {triggerElement}

      <div
        className={cn(
          "fixed inset-0 z-50 transition",
          isOpen ? "pointer-events-auto" : "pointer-events-none"
        )}
        aria-hidden={!isOpen}
      >
        <div
          className={cn(
            "absolute inset-0 bg-background/80 transition-opacity",
            isOpen ? "opacity-100" : "opacity-0"
          )}
          onClick={() => setOpen(false)}
        />

        <div
          role="dialog"
          aria-modal="true"
          className={cn(
            "absolute bottom-0 left-0 right-0 mx-auto flex w-full max-w-2xl flex-col",
            "rounded-t-3xl border border-border bg-card shadow-lg",
            "transition-transform duration-200"
          )}
          style={{ height: maxHeight, transform: `translateY(${translateY}px)` }}
          onPointerMove={handlePointerMove}
          onPointerUp={handlePointerUp}
          onPointerCancel={handlePointerUp}
        >
          <div
            className="flex flex-col items-center gap-3 border-b border-border px-6 py-3"
            onPointerDown={handlePointerDown}
          >
            <span className="h-1.5 w-12 rounded-full bg-muted" />
            <div className="text-center">
              <h2 className="text-base font-semibold text-foreground">{title}</h2>
              {description ? (
                <p className="text-sm text-muted-foreground">{description}</p>
              ) : null}
            </div>
          </div>

          <div className="flex-1 overflow-y-auto px-6 py-4 text-sm text-foreground">
            {children}
          </div>

          {footer ? (
            <div className="border-t border-border px-6 py-4">{footer}</div>
          ) : null}
        </div>
      </div>
    </div>
  );
}
Sheet

Dependencies

Files

Installation
