@dowel-ui/react 0.7.0 → 0.8.0

package/src/components/comment-bubble/comment-bubble.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+// Ported from SmoothUI Figma Comment (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
+import {
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type FormEvent,
+  type KeyboardEvent,
+} from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/avatar";
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * A canvas comment pin: an avatar in a speech-bubble corner that grows into
+ * the thread (and, with `onReply`, a composer). The source sprang width and
+ * height with motion; here the thread is measured and the bubble's size is a
+ * CSS transition, with the text blurring in just after the bubble opens.
+ *
+ * The avatar is a disclosure button. Escape collapses the thread and returns
+ * focus to it; a press outside collapses it too.
+ */
+
+export interface CommentBubbleAuthor {
+  name: string;
+  /** Avatar image URL. Initials are shown without one, or while it loads. */
+  avatarUrl?: string;
+}
+
+export interface CommentBubbleComment {
+  id: string;
+  author: CommentBubbleAuthor;
+  message: string;
+  /** Pre-formatted, e.g. "Just now" or "2h". */
+  timestamp?: string;
+}
+
+export interface CommentBubbleProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** The thread. The first comment's author is the pin's avatar. */
+  comments: CommentBubbleComment[];
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** The expanded bubble's width. Numbers are pixels. */
+  width?: number | string;
+  /** Shows a reply composer; called with the trimmed reply. */
+  onReply?: (message: string) => void;
+  /** The reply field's accessible name and placeholder. */
+  replyLabel?: string;
+}
+
+const COLLAPSED = 32;
+
+function initials(name: string) {
+  return name
+    .split(/\s+/)
+    .map((part) => part.charAt(0))
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+}
+
+function Face({ author }: { author: CommentBubbleAuthor }) {
+  return (
+    <Avatar size="xs" className="size-6">
+      {author.avatarUrl ? <AvatarImage src={author.avatarUrl} alt="" /> : null}
+      <AvatarFallback className="text-[0.625rem]">{initials(author.name)}</AvatarFallback>
+    </Avatar>
+  );
+}
+
+/** An avatar pin that expands into a comment thread. */
+export function CommentBubble({
+  className,
+  comments,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  width = "11.25rem",
+  onReply,
+  replyLabel = "Reply",
+  ...props
+}: CommentBubbleProps) {
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+  const open = openProp ?? uncontrolled;
+  const [height, setHeight] = useState<number | null>(null);
+  const bubbleRef = useRef<HTMLDivElement>(null);
+  const threadRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const replyRef = useRef<HTMLInputElement>(null);
+  const restoreFocus = useRef(false);
+  const threadId = useId();
+  const first = comments[0];
+
+  function setOpen(next: boolean, restore = false) {
+    restoreFocus.current = restore;
+    if (openProp === undefined) setUncontrolled(next);
+    onOpenChange?.(next);
+  }
+
+  useLayoutEffect(() => {
+    const element = threadRef.current;
+    if (!element) return;
+    const measure = () => setHeight(element.offsetHeight || null);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      replyRef.current?.focus();
+    } else if (restoreFocus.current) {
+      restoreFocus.current = false;
+      triggerRef.current?.focus();
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: PointerEvent) => {
+      if (!bubbleRef.current?.contains(event.target as Node)) setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  });
+
+  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    if (event.key === "Escape" && open) {
+      event.preventDefault();
+      setOpen(false, true);
+    }
+  }
+
+  function handleReply(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const field = replyRef.current!;
+    const message = field.value.trim();
+    if (!message) return;
+    onReply?.(message);
+    field.value = "";
+  }
+
+  if (!first) return null;
+  const state = open ? "open" : "closed";
+  const extra = comments.length - 1;
+
+  return (
+    <div
+      data-slot="comment-bubble"
+      data-state={state}
+      className={cn("relative size-8", className)}
+      {...props}
+    >
+      {/* Escape bubbles up from the thread's controls; the surface itself is not a control. */}
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      <div
+        ref={bubbleRef}
+        data-slot="comment-bubble-surface"
+        data-state={state}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          "absolute start-0 bottom-0 overflow-hidden rounded-2xl rounded-es-none bg-popover text-popover-foreground shadow-lg ring-1 ring-border",
+          "transition-[width,height] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]",
+          "data-[state=closed]:delay-[var(--duration-instant)]",
+        )}
+        style={{
+          width: open ? width : COLLAPSED,
+          height: open ? (height ?? "auto") : COLLAPSED,
+        }}
+      >
+        <button
+          ref={triggerRef}
+          type="button"
+          data-slot="comment-bubble-trigger"
+          data-state={state}
+          aria-expanded={open}
+          aria-controls={threadId}
+          aria-label={`Comment by ${first.author.name}${extra > 0 ? `, ${String(extra)} ${extra === 1 ? "reply" : "replies"}` : ""}`}
+          onClick={() => setOpen(!open)}
+          className={cn(
+            "absolute start-1 top-1 z-10 rounded-full",
+            "transition-[top,inset-inline-start] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]",
+            "data-[state=open]:start-3 data-[state=open]:top-3",
+            focusRing,
+          )}
+        >
+          <Face author={first.author} />
+        </button>
+        <div
+          ref={threadRef}
+          id={threadId}
+          role="group"
+          aria-label={`Comment thread by ${first.author.name}`}
+          data-slot="comment-bubble-thread"
+          data-state={state}
+          inert={!open}
+          className={cn(
+            "absolute start-0 top-0 flex flex-col gap-2 py-3 ps-11 pe-4 text-[0.6875rem] leading-4 font-medium",
+            "transition-[opacity,filter,visibility] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
+            "data-[state=open]:delay-[var(--duration-fast)]",
+            "data-[state=closed]:invisible data-[state=closed]:opacity-0 data-[state=closed]:blur-[3px]",
+          )}
+          style={{ width }}
+        >
+          <ol className="flex max-h-60 flex-col gap-2 overflow-y-auto">
+            {comments.map((comment, index) => (
+              <li key={comment.id} className="flex gap-2">
+                {index > 0 ? (
+                  <span className="-ms-8 shrink-0">
+                    <Face author={comment.author} />
+                  </span>
+                ) : null}
+                <div className="flex min-w-0 flex-col gap-0.5">
+                  <p className="flex flex-wrap gap-x-1">
+                    <span className="font-semibold text-foreground">{comment.author.name}</span>
+                    {comment.timestamp ? (
+                      <span className="text-muted-foreground">{comment.timestamp}</span>
+                    ) : null}
+                  </p>
+                  <p className="text-foreground">{comment.message}</p>
+                </div>
+              </li>
+            ))}
+          </ol>
+          {onReply ? (
+            <form onSubmit={handleReply} className="flex items-center gap-1">
+              <input
+                ref={replyRef}
+                type="text"
+                aria-label={replyLabel}
+                placeholder={`${replyLabel}…`}
+                className={cn(
+                  "min-w-0 flex-1 rounded-md bg-muted px-2 py-1 text-foreground placeholder:text-muted-foreground",
+                  focusRing,
+                )}
+              />
+              <button
+                type="submit"
+                aria-label="Send reply"
+                className={cn(
+                  "flex size-6 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground",
+                  focusRing,
+                )}
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2.5}
+                  aria-hidden="true"
+                  className="size-3"
+                >
+                  <path d="M12 19V5M5 12l7-7 7 7" />
+                </svg>
+              </button>
+            </form>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/comment-bubble/index.ts

@@ -0,0 +1,6 @@
+export {
+  CommentBubble,
+  type CommentBubbleAuthor,
+  type CommentBubbleComment,
+  type CommentBubbleProps,
+} from "./comment-bubble";

package/src/components/comment-bubble/meta.ts

@@ -0,0 +1,18 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "comment-bubble",
+  title: "Comment Bubble",
+  description:
+    "A canvas comment pin — an avatar in a speech-bubble corner that grows into the thread and a reply composer.",
+  category: "display",
+  status: "beta",
+  dependencies: [],
+  registryDependencies: ["avatar"],
+  files: ["comment-bubble.tsx"],
+  a11y:
+    'The avatar is a disclosure button ("Comment by <name>, N replies") with aria-expanded and aria-controls. ' +
+    "The thread is a labelled group and an ordered list; while collapsed it is invisible and inert. Opening moves " +
+    "focus to the reply field when there is one; Escape collapses the thread and returns focus to the avatar; a " +
+    "press outside collapses it. The reply field and send button are named. The grow and blur stop under reduced motion.",
+});

package/src/components/context-menu/context-menu.tsx

@@ -0,0 +1,280 @@
+"use client";
+
+// Ported from SmoothUI Context Menu (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
+import type { ComponentPropsWithRef } from "react";
+
+import { mirrorForDirection } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/**
+ * A menu of actions opened at the pointer by a secondary click or a long press.
+ *
+ * The parts and their props mirror DropdownMenu exactly, so a menu can move
+ * between the two by renaming its imports. It is never the only way to reach
+ * an action: a context menu is invisible until summoned, so what it offers
+ * should also live somewhere visible. Keyboard users open it with Shift+F10
+ * or the Menu key, which needs the trigger to be focusable.
+ *
+ * The source's spring is CSS: the surface pops from the pointer with a slight
+ * overshoot, and its items drop in with a 20ms stagger. Both are decoration
+ * and stop under reduced motion; closing uses the shared quick float-out.
+ */
+export const ContextMenu = ContextMenuPrimitive.Root;
+export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+export const ContextMenuGroup = ContextMenuPrimitive.Group;
+export const ContextMenuPortal = ContextMenuPrimitive.Portal;
+export const ContextMenuSub = ContextMenuPrimitive.Sub;
+export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const PREFIX = "dowel-context-menu";
+
+/** Stagger delays for the first dozen entries; later ones arrive with the twelfth. */
+const STAGGER = Array.from(
+  { length: 11 },
+  (_, i) =>
+    `[data-slot$=context-menu-content]>:nth-child(${String(i + 2)}){animation-delay:calc(${String((i + 1) * 20)}ms * var(--motion-scale))}`,
+).join("\n");
+
+const STYLES = `
+@keyframes ${PREFIX}-in{from{opacity:0;transform:translateY(-4px) scale(.95)}}
+@keyframes ${PREFIX}-item-in{from{opacity:0;transform:translateY(-4px)}}
+${STAGGER}
+[data-slot$=context-menu-content]>:nth-child(n+13){animation-delay:calc(240ms * var(--motion-scale))}
+`;
+
+/** Shared surface styling for the root menu and every submenu. The keyframe
+ * names are spelled out because Tailwind reads class names from the source. */
+const menuSurface = cn(
+  "z-[var(--z-popover)] min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-lg border border-border",
+  "bg-popover p-1 text-popover-foreground shadow-lg outline-none",
+  "max-h-[var(--radix-context-menu-content-available-height)]",
+  "origin-[var(--radix-context-menu-content-transform-origin)]",
+  "data-[state=closed]:animate-float-out",
+  "data-[state=open]:animate-[dowel-context-menu-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)]",
+  "data-[state=open]:[&>*]:animate-[dowel-context-menu-item-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)_both]",
+);
+
+/** Shared item styling. Highlight follows data-highlighted, which the primitive
+ * drives from both pointer and keyboard, so the two never disagree. */
+const menuItem = cn(
+  "relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none select-none",
+  "transition-colors duration-[var(--duration-instant)]",
+  "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-55",
+  "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+);
+
+function Styles() {
+  return (
+    <style href={PREFIX} precedence="dowel">
+      {STYLES}
+    </style>
+  );
+}
+
+export type ContextMenuContentProps = ComponentPropsWithRef<
+  typeof ContextMenuPrimitive.Content
+>;
+
+export function ContextMenuContent({ className, ...props }: ContextMenuContentProps) {
+  return (
+    <>
+      <Styles />
+      <ContextMenuPrimitive.Portal>
+        <ContextMenuPrimitive.Content
+          data-slot="context-menu-content"
+          className={cn(menuSurface, className)}
+          {...props}
+        />
+      </ContextMenuPrimitive.Portal>
+    </>
+  );
+}
+
+export interface ContextMenuItemProps extends ComponentPropsWithRef<
+  typeof ContextMenuPrimitive.Item
+> {
+  /** Styles the item as destructive. Pair with a label that says what is destroyed. */
+  variant?: "default" | "destructive";
+  /** Indents the item to align with items that have a leading indicator. */
+  inset?: boolean;
+}
+
+export function ContextMenuItem({
+  className,
+  variant = "default",
+  inset,
+  ...props
+}: ContextMenuItemProps) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-variant={variant}
+      className={cn(
+        menuItem,
+        inset && "ps-8",
+        variant === "destructive" &&
+          "text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Tick shown by checkbox and radio items. Decorative: the state is already in
+ * aria-checked, so announcing it twice would be noise. */
+function ItemIndicator({ radio = false }: { radio?: boolean }) {
+  return (
+    <span className="pointer-events-none absolute start-2 grid size-4 place-items-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        {radio ? (
+          <span className="size-2 rounded-full bg-current" />
+        ) : (
+          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="size-3.5">
+            <path
+              d="m5 13 4 4L19 7"
+              stroke="currentColor"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        )}
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+  );
+}
+
+export function ContextMenuCheckboxItem({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithRef<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(menuItem, "ps-8", className)}
+      {...props}
+    >
+      <ItemIndicator />
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+export function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithRef<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(menuItem, "ps-8", className)}
+      {...props}
+    >
+      <ItemIndicator radio />
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+export interface ContextMenuLabelProps extends ComponentPropsWithRef<
+  typeof ContextMenuPrimitive.Label
+> {
+  inset?: boolean;
+}
+
+export function ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      className={cn(
+        "px-2 py-1.5 text-xs font-medium text-muted-foreground",
+        inset && "ps-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ContextMenuSeparator({
+  className,
+  ...props
+}: ComponentPropsWithRef<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+/** Keyboard hint. aria-hidden because the shortcut is decoration here — bind it
+ * for real at the application level. */
+export function ContextMenuShortcut({ className, ...props }: ComponentPropsWithRef<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      aria-hidden="true"
+      className={cn("ms-auto text-2xs tracking-wide text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export interface ContextMenuSubTriggerProps extends ComponentPropsWithRef<
+  typeof ContextMenuPrimitive.SubTrigger
+> {
+  inset?: boolean;
+}
+
+export function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ContextMenuSubTriggerProps) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      className={cn(menuItem, "data-[state=open]:bg-accent", inset && "ps-8", className)}
+      {...props}
+    >
+      {children}
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        aria-hidden="true"
+        className={cn("ms-auto size-3.5", mirrorForDirection)}
+      >
+        <path
+          d="m9 18 6-6-6-6"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+export function ContextMenuSubContent({
+  className,
+  ...props
+}: ComponentPropsWithRef<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.SubContent
+        data-slot="context-menu-sub-content"
+        className={cn(menuSurface, className)}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}

package/src/components/context-menu/index.ts

@@ -0,0 +1,21 @@
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+  type ContextMenuContentProps,
+  type ContextMenuItemProps,
+  type ContextMenuLabelProps,
+  type ContextMenuSubTriggerProps,
+} from "./context-menu";

package/src/components/context-menu/meta.ts

@@ -0,0 +1,19 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "context-menu",
+  title: "Context Menu",
+  description:
+    "A right-click menu that pops from the pointer with a spring and staggers its items in — same parts as Dropdown Menu.",
+  category: "overlay",
+  status: "beta",
+  dependencies: ["radix-ui"],
+  registryDependencies: [],
+  files: ["context-menu.tsx"],
+  a11y:
+    "Opens on right-click, long press, Shift+F10 or the Menu key — the keyboard paths need a focusable " +
+    "trigger. Full menu keyboard model: arrows move, Home/End jump, typeahead searches, Escape closes and " +
+    "returns focus, Right/Left open and close submenus (mirrored in RTL). Checkbox and radio items expose " +
+    "aria-checked; shortcuts are aria-hidden hints. A context menu is invisible until summoned, so its " +
+    "actions should also be reachable elsewhere. The pop and stagger stop under reduced motion.",
+});