@bearmenu/ui 0.8.33 → 0.8.35

package/src/components/responsive-overlay.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import * as React from "react";
+import { X } from "lucide-react";
+import { useMediaQuery } from "../hooks/use-media-query";
+import { cn } from "../lib/utils";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog";
+import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "./drawer";
+
+/** The board switches container at Tailwind's `md`, not at the library's `lg`. */
+const MD_MEDIA_QUERY = "(min-width: 768px)";
+
+/**
+ * Sends focus back to whatever opened the overlay once it closes.
+ *
+ * Radix restores focus to its own `DialogTrigger`, and this overlay is
+ * controlled — the opener is an ordinary button somewhere else on the page, or
+ * a URL that was already carrying `?add=1` on arrival. Left to the primitives,
+ * focus lands on `document.body` and a keyboard user starts again from the top
+ * of the page. The shared table's brief asks for the opposite in as many words:
+ * "focus returns to the control that opened an overlay or a sheet".
+ *
+ * The opener is tracked while the overlay is CLOSED rather than captured when
+ * it opens: by the time an effect could run on the opening render, the dialog
+ * has already mounted and pulled focus into itself.
+ */
+function useFocusReturn(open: boolean) {
+  const openerRef = React.useRef<HTMLElement | null>(null);
+  const wasOpen = React.useRef(false);
+
+  React.useEffect(() => {
+    if (open) {
+      wasOpen.current = true;
+      return;
+    }
+
+    if (wasOpen.current) {
+      wasOpen.current = false;
+      const opener = openerRef.current;
+      // The overlay is still unmounting on this tick, and it takes focus with
+      // it; restoring on the next frame lands after that.
+      if (opener && opener.isConnected) {
+        requestAnimationFrame(() => opener.focus());
+      }
+    }
+
+    const track = (event: FocusEvent) => {
+      const target = event.target;
+      if (target instanceof HTMLElement) openerRef.current = target;
+    };
+    if (document.activeElement instanceof HTMLElement && document.activeElement !== document.body) {
+      openerRef.current = document.activeElement;
+    }
+    document.addEventListener("focusin", track);
+    return () => document.removeEventListener("focusin", track);
+  }, [open]);
+}
+
+export type ResponsiveOverlayProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** The overlay's name — "Add an item", "Split this item", "Invite people". */
+  title: React.ReactNode;
+  /** The one line under it — "Table 18 · from the menu". Optional, never two lines. */
+  subtitle?: React.ReactNode;
+  /** The scrolling body. */
+  children: React.ReactNode;
+  /** The closing band — an `ActionBar`, usually. */
+  footer?: React.ReactNode;
+  /**
+   * The close button's accessible name. Injected, like every label here: the
+   * design system holds no copy and no i18n.
+   */
+  closeLabel?: string;
+  /** Widths for the desktop dialog. Mobile is always the full-width drawer. */
+  size?: React.ComponentPropsWithoutRef<typeof DialogContent>["size"];
+  /** Classes for the panel itself — the dialog box or the drawer sheet. */
+  className?: string;
+  /** Classes for the scrolling body. */
+  bodyClassName?: string;
+};
+
+/**
+ * ResponsiveOverlay — one overlay authored once: a `Drawer` under md, a
+ * `Dialog` from md.
+ *
+ * The shared-table board draws the same chrome on T1, T3, T5, T6 and T8
+ * (16-shared-table.html) and the two widths never disagree about it: the
+ * title and its one-line subtitle top left, a round close top right, the body,
+ * and a footer band carrying the note and the actions. What differs is the
+ * container — a sheet that a thumb drags down, or a box in the middle of the
+ * screen — and that is the only thing this component switches.
+ *
+ * The scrim is `--scrim-overlay`. bearmenu-fe's `globals.css` loads after the
+ * design system's and defines a `--scrim` of its own — an opaque photo hue —
+ * so an overlay that reached for `bg-scrim` would paint that colour over the
+ * whole page at full alpha. The two drawer/dialog primitives still carry their
+ * older `bg-black/…`; this component states the token explicitly rather than
+ * changing theirs underneath every other caller.
+ *
+ * It resolves the width with `useMediaQuery`, which is mobile-first: the
+ * drawer is what the server and the first client frame render. A wide screen
+ * that arrives with the overlay already open — an invite link opened on a
+ * laptop — therefore shows the sheet for one frame before the dialog replaces
+ * it. That is the library's documented convention for every breakpoint-
+ * switching component, and a second breakpoint hook with different semantics
+ * would be a worse thing to own than one frame.
+ */
+const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProps>(
+  (
+    {
+      open,
+      onOpenChange,
+      title,
+      subtitle,
+      children,
+      footer,
+      closeLabel = "Close",
+      size = "lg",
+      className,
+      bodyClassName,
+    },
+    ref
+  ) => {
+    const isWide = useMediaQuery(MD_MEDIA_QUERY);
+    const titleId = React.useId();
+    const subtitleId = React.useId();
+    useFocusReturn(open);
+
+    const header = (
+      <div data-slot="responsive-overlay-header" className="flex items-start gap-3 px-5 pt-5">
+        <div className="min-w-0 flex-1">
+          {isWide ? (
+            <DialogTitle id={titleId} className="text-[19px] font-bold leading-tight">
+              {title}
+            </DialogTitle>
+          ) : (
+            <DrawerTitle id={titleId} className="text-[19px] font-bold leading-tight">
+              {title}
+            </DrawerTitle>
+          )}
+          {subtitle ? (
+            isWide ? (
+              <DialogDescription id={subtitleId} className="mt-1 text-[13px] text-muted-foreground">
+                {subtitle}
+              </DialogDescription>
+            ) : (
+              <DrawerDescription id={subtitleId} className="mt-1 text-[13px] text-muted-foreground">
+                {subtitle}
+              </DrawerDescription>
+            )
+          ) : null}
+        </div>
+        <button
+          type="button"
+          data-slot="responsive-overlay-close"
+          onClick={() => onOpenChange(false)}
+          // 32px disc, 44px of tap target around it — the frames draw the disc,
+          // the accessibility floor asks for the target.
+          className="-m-1.5 grid size-11 shrink-0 place-items-center rounded-full text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        >
+          <span className="grid size-8 place-items-center rounded-full bg-surface-2 transition-colors hover:bg-muted">
+            <X className="size-4" aria-hidden />
+          </span>
+          <span className="sr-only">{closeLabel}</span>
+        </button>
+      </div>
+    );
+
+    const body = (
+      <div
+        data-slot="responsive-overlay-body"
+        className={cn("min-h-0 flex-1 overflow-y-auto px-5 py-4", bodyClassName)}
+      >
+        {children}
+      </div>
+    );
+
+    const foot = footer ? (
+      <div
+        data-slot="responsive-overlay-footer"
+        className="shrink-0 border-t border-border bg-surface-2"
+      >
+        {footer}
+      </div>
+    ) : null;
+
+    if (isWide) {
+      return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+          <DialogContent
+            ref={ref}
+            size={size}
+            showCloseButton={false}
+            overlayClassName="bg-scrim-overlay backdrop-blur-none"
+            aria-labelledby={titleId}
+            aria-describedby={subtitle ? subtitleId : undefined}
+            className={cn(
+              // The dialog's own `grid gap-4 p-6` would put air between the
+              // header, the body and the band the frames draw flush.
+              "flex max-h-[85vh] flex-col gap-0 overflow-hidden p-0",
+              className
+            )}
+          >
+            {header}
+            {body}
+            {foot}
+          </DialogContent>
+        </Dialog>
+      );
+    }
+
+    return (
+      <Drawer open={open} onOpenChange={onOpenChange}>
+        <DrawerContent
+          ref={ref}
+          overlayClassName="bg-scrim-overlay"
+          aria-labelledby={titleId}
+          aria-describedby={subtitle ? subtitleId : undefined}
+          className={cn("flex max-h-[85vh] flex-col p-0", className)}
+        >
+          {header}
+          {body}
+          {foot}
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+);
+ResponsiveOverlay.displayName = "ResponsiveOverlay";
+
+export { ResponsiveOverlay };