@dowel-ui/react 0.7.0 → 0.8.0

package/src/components/expandable-list/expandable-list.tsx

@@ -0,0 +1,260 @@
+"use client";
+
+// Ported from SmoothUI Job Listing Component (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import { AnimatePresence, LayoutGroup, MotionConfig, motion } from "motion/react";
+import { Dialog } from "radix-ui";
+import { useId, useRef, useState, type ComponentPropsWithRef, type ReactNode } from "react";
+
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * A list of compact rows — a job, a release, a person — each of which grows
+ * into a detail card over a blurred backdrop.
+ *
+ * Every row is a real button that opens a Radix modal dialog: focus moves into
+ * it and is trapped, the page behind is inert, Escape, the backdrop and a
+ * named Close button all dismiss it, and focus returns to the row that opened
+ * it. The title and description name and describe the dialog.
+ *
+ * The row growing into the card (and its logo and title travelling with it)
+ * is a shared-layout animation between two DOM positions — `motion`'s
+ * layoutId, the one reason this depends on it (ADR 0014). Under reduced
+ * motion the dialog simply appears in place.
+ */
+
+const expandableListVariants = cva("flex w-full flex-col", {
+  variants: {
+    density: {
+      comfortable: "gap-4",
+      compact: "gap-2",
+    },
+  },
+  defaultVariants: {
+    density: "comfortable",
+  },
+});
+
+export interface ExpandableListItem {
+  id: string;
+  title: string;
+  /** A line under the title — a role and salary, say. */
+  subtitle?: ReactNode;
+  /** Small print — location, schedule. */
+  meta?: ReactNode;
+  /** A logo or avatar. Decorative: the title names the row. */
+  media?: ReactNode;
+  /** The detail shown when the row is open. */
+  content: ReactNode;
+  /** Controls in the detail view — an Apply link, say. */
+  actions?: ReactNode;
+}
+
+export interface ExpandableListProps
+  extends
+    Omit<ComponentPropsWithRef<"ul">, "children" | "defaultValue">,
+    VariantProps<typeof expandableListVariants> {
+  items: ExpandableListItem[];
+  /** The open item's id, or null (controlled). */
+  value?: string | null;
+  defaultValue?: string | null;
+  onValueChange?: (value: string | null) => void;
+  /** Accessible name of the Close button. */
+  closeLabel?: string;
+  rowClassName?: string;
+}
+
+const transition = { type: "spring", bounce: 0.1, duration: 0.25 } as const;
+
+function Summary({
+  item,
+  layout,
+  detail = false,
+}: {
+  item: ExpandableListItem;
+  layout: (part: string) => string;
+  detail?: boolean;
+}) {
+  return (
+    <span className="flex w-full min-w-0 items-center gap-4 text-start">
+      {item.media ? (
+        <motion.span
+          layoutId={layout("media")}
+          aria-hidden="true"
+          className="grid shrink-0 place-items-center [&_svg]:size-8"
+        >
+          {item.media}
+        </motion.span>
+      ) : null}
+      <span className="flex min-w-0 flex-col gap-0.5">
+        {detail ? (
+          <Dialog.Title asChild>
+            <motion.h2
+              layoutId={layout("title")}
+              className="text-sm font-medium text-foreground"
+            >
+              {item.title}
+            </motion.h2>
+          </Dialog.Title>
+        ) : (
+          <motion.span layoutId={layout("title")} className="font-medium text-foreground">
+            {item.title}
+          </motion.span>
+        )}
+        {item.subtitle ? (
+          <span className="text-xs text-muted-foreground">{item.subtitle}</span>
+        ) : null}
+        {item.meta ? <span className="text-xs text-muted-foreground">{item.meta}</span> : null}
+      </span>
+    </span>
+  );
+}
+
+/** Rows that expand into a detail dialog, growing out of their place in the list. */
+export function ExpandableList({
+  className,
+  density,
+  items,
+  value: valueProp,
+  defaultValue = null,
+  onValueChange,
+  closeLabel = "Close",
+  rowClassName,
+  ...props
+}: ExpandableListProps) {
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const openId = valueProp === undefined ? uncontrolled : valueProp;
+  const openItem = items.find((item) => item.id === openId);
+  const uid = useId();
+  const rows = useRef(new Map<string, HTMLButtonElement>());
+
+  function select(next: string | null) {
+    if (valueProp === undefined) setUncontrolled(next);
+    onValueChange?.(next);
+  }
+
+  const layoutFor = (id: string) => (part: string) => `${uid}-${part}-${id}`;
+
+  return (
+    <MotionConfig reducedMotion="user" transition={transition}>
+      <LayoutGroup id={uid}>
+        <ul
+          data-slot="expandable-list"
+          className={cn(expandableListVariants({ density }), className)}
+          {...props}
+        >
+          {items.map((item) => (
+            <li key={item.id}>
+              <motion.button
+                type="button"
+                ref={(node: HTMLButtonElement | null) => {
+                  if (node) rows.current.set(item.id, node);
+                  else rows.current.delete(item.id);
+                }}
+                layoutId={layoutFor(item.id)("card")}
+                aria-haspopup="dialog"
+                aria-expanded={openId === item.id}
+                data-slot="expandable-list-row"
+                data-state={openId === item.id ? "open" : "closed"}
+                onClick={() => select(item.id)}
+                whileTap={{ scale: 0.97 }}
+                className={cn(
+                  "flex w-full cursor-pointer items-center gap-4 border border-border bg-card p-2 text-card-foreground shadow-xs select-none md:p-4",
+                  "transition-colors duration-[var(--duration-fast)] hover:bg-accent",
+                  focusRing,
+                  rowClassName,
+                )}
+                style={{ borderRadius: 8 }}
+              >
+                <Summary item={item} layout={layoutFor(item.id)} />
+              </motion.button>
+            </li>
+          ))}
+        </ul>
+
+        <Dialog.Root
+          open={openItem !== undefined}
+          onOpenChange={(open) => {
+            if (!open) select(null);
+          }}
+        >
+          <AnimatePresence>
+            {openItem ? (
+              <Dialog.Portal forceMount key={openItem.id}>
+                <Dialog.Overlay asChild forceMount>
+                  <motion.div
+                    data-slot="expandable-list-overlay"
+                    className="fixed inset-0 z-[var(--z-overlay)] bg-overlay backdrop-blur-xl"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                  />
+                </Dialog.Overlay>
+                <div className="pointer-events-none fixed inset-0 z-[var(--z-modal)] grid place-items-center p-4">
+                  <Dialog.Content
+                    asChild
+                    forceMount
+                    onCloseAutoFocus={(event) => {
+                      event.preventDefault();
+                      rows.current.get(openItem.id)?.focus();
+                    }}
+                  >
+                    <motion.div
+                      layoutId={layoutFor(openItem.id)("card")}
+                      data-slot="expandable-list-detail"
+                      className="pointer-events-auto relative flex max-h-full w-[90%] max-w-2xl flex-col items-start gap-4 overflow-y-auto border border-border bg-card p-4 pe-14 text-card-foreground shadow-xl outline-none"
+                      style={{ borderRadius: 12 }}
+                    >
+                      <Summary item={openItem} layout={layoutFor(openItem.id)} detail />
+                      <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="flex w-full flex-col gap-4"
+                      >
+                        <Dialog.Description asChild>
+                          <div className="text-sm text-muted-foreground">
+                            {openItem.content}
+                          </div>
+                        </Dialog.Description>
+                        {openItem.actions ? (
+                          <div className="flex flex-wrap gap-2">{openItem.actions}</div>
+                        ) : null}
+                      </motion.div>
+                      <Dialog.Close
+                        aria-label={closeLabel}
+                        data-slot="expandable-list-close"
+                        className={cn(
+                          "absolute end-3 top-3 grid size-8 place-items-center rounded-full text-muted-foreground",
+                          "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground",
+                          focusRing,
+                        )}
+                      >
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          aria-hidden="true"
+                          className="size-4"
+                        >
+                          <path
+                            d="m6 6 12 12M18 6 6 18"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                          />
+                        </svg>
+                      </Dialog.Close>
+                    </motion.div>
+                  </Dialog.Content>
+                </div>
+              </Dialog.Portal>
+            ) : null}
+          </AnimatePresence>
+        </Dialog.Root>
+      </LayoutGroup>
+    </MotionConfig>
+  );
+}
+
+export { expandableListVariants };

package/src/components/expandable-list/index.ts

@@ -0,0 +1,6 @@
+export {
+  ExpandableList,
+  expandableListVariants,
+  type ExpandableListItem,
+  type ExpandableListProps,
+} from "./expandable-list";

package/src/components/expandable-list/meta.ts

@@ -0,0 +1,19 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "expandable-list",
+  title: "Expandable List",
+  description:
+    "A list of compact rows — jobs, releases, people — each growing into a detail dialog out of its place in the list.",
+  category: "display",
+  status: "beta",
+  dependencies: ["class-variance-authority", "motion", "radix-ui"],
+  registryDependencies: [],
+  files: ["expandable-list.tsx"],
+  a11y:
+    'Each row is a button with aria-haspopup="dialog" and aria-expanded. The detail is a Radix modal dialog: ' +
+    "focus moves in and is trapped, the page behind is inert, it is named by the item's title and described by " +
+    "its content, and Escape, the backdrop or the named Close button dismiss it — after which focus returns to " +
+    "the row that opened it. Row media is aria-hidden. The grow-from-row animation uses motion's layoutId inside " +
+    'MotionConfig reducedMotion="user", so under reduced motion the dialog appears in place.',
+});

package/src/components/expanding-search/expanding-search.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+// Original design (pattern inspired by bencho Search; no code referenced).
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type CSSProperties,
+  type FocusEvent,
+  type FormEvent,
+  type KeyboardEvent,
+} from "react";
+
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * A search button that opens into a field.
+ *
+ * A search landmark holding a trigger (aria-expanded, aria-controls) and a
+ * field whose inline size transitions open. Opening focuses the field;
+ * Escape clears it first, then collapses and returns focus to the trigger;
+ * leaving an empty field collapses it quietly. A clear button appears once
+ * there is text.
+ *
+ * Combobox-ready: `inputProps` is spread onto the <input>, so a consumer can
+ * add role="combobox", aria-activedescendant and its own key handling, and
+ * render the listbox as `children`. Its onKeyDown runs first, and calling
+ * preventDefault there (say, to close its listbox on Escape) stops this
+ * component's own Escape handling.
+ */
+
+const expandingSearchVariants = cva(
+  "relative inline-flex h-10 items-center rounded-full bg-card text-card-foreground",
+  {
+    variants: {
+      /** A hairline ring. */
+      stroke: {
+        true: "shadow-[inset_0_0_0_1px_var(--color-border)]",
+        false: "",
+      },
+    },
+    defaultVariants: { stroke: true },
+  },
+);
+
+const iconButton = cn(
+  "grid size-10 shrink-0 place-items-center rounded-full text-muted-foreground",
+  "transition-[background-color,color] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]",
+  "hover:text-foreground disabled:pointer-events-none disabled:opacity-55",
+  focusRing,
+);
+
+export interface ExpandingSearchProps
+  extends
+    Omit<ComponentPropsWithRef<"form">, "onSubmit" | "defaultValue" | "onChange">,
+    VariantProps<typeof expandingSearchVariants> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Called with the text on Enter. */
+  onSearch?: (value: string) => void;
+  /** Names the trigger and the field. */
+  label?: string;
+  placeholder?: string;
+  clearLabel?: string;
+  /** The open field's inline size, any CSS length. */
+  expandedWidth?: string;
+  disabled?: boolean;
+  /** Spread onto the <input> — for combobox wiring. */
+  inputProps?: Omit<ComponentPropsWithRef<"input">, "value" | "defaultValue">;
+}
+
+function Glyph({ d }: { d: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className="size-4"
+    >
+      <path d={d} />
+    </svg>
+  );
+}
+
+/** A search button that expands into a field, and collapses back with Escape. */
+export function ExpandingSearch({
+  className,
+  stroke,
+  value: valueProp,
+  defaultValue = "",
+  onValueChange,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  onSearch,
+  label = "Search",
+  placeholder = "Search…",
+  clearLabel = "Clear search",
+  expandedWidth = "14rem",
+  disabled = false,
+  inputProps = {},
+  onBlur,
+  style,
+  children,
+  ...props
+}: ExpandingSearchProps) {
+  const inputId = useId();
+  const [innerValue, setInnerValue] = useState(defaultValue);
+  const value = valueProp ?? innerValue;
+  const [innerOpen, setInnerOpen] = useState(defaultOpen);
+  const open = openProp ?? innerOpen;
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const focusNext = useRef<"input" | "trigger" | null>(null);
+
+  useEffect(() => {
+    const target = focusNext.current;
+    focusNext.current = null;
+    if (target === "input") inputRef.current?.focus();
+    else if (target === "trigger") triggerRef.current?.focus();
+  });
+
+  function setValue(next: string) {
+    if (valueProp === undefined) setInnerValue(next);
+    onValueChange?.(next);
+  }
+
+  function setOpen(next: boolean, focus: "input" | "trigger" | null) {
+    focusNext.current = focus;
+    if (next === open) return;
+    if (openProp === undefined) setInnerOpen(next);
+    onOpenChange?.(next);
+  }
+
+  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    inputProps.onKeyDown?.(event);
+    if (event.defaultPrevented || event.key !== "Escape") return;
+    event.preventDefault();
+    if (value) setValue("");
+    else setOpen(false, "trigger");
+  }
+
+  function handleBlur(event: FocusEvent<HTMLFormElement>) {
+    onBlur?.(event);
+    if (event.currentTarget.contains(event.relatedTarget)) return;
+    if (!value) setOpen(false, null);
+  }
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (open) onSearch?.(value);
+  }
+
+  return (
+    <form
+      role="search"
+      aria-label={label}
+      data-slot="expanding-search"
+      data-state={open ? "open" : "closed"}
+      className={cn(expandingSearchVariants({ stroke }), className)}
+      style={{ "--expanding-search-width": expandedWidth, ...style } as CSSProperties}
+      onSubmit={handleSubmit}
+      onBlur={handleBlur}
+      {...props}
+    >
+      <button
+        ref={triggerRef}
+        type="button"
+        aria-label={label}
+        aria-expanded={open}
+        aria-controls={inputId}
+        disabled={disabled}
+        data-slot="expanding-search-trigger"
+        className={iconButton}
+        onClick={() => {
+          setOpen(!open, open ? null : "input");
+        }}
+      >
+        <Glyph d="m21 21-4.34-4.34M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" />
+      </button>
+      <div
+        data-slot="expanding-search-field"
+        className={cn(
+          "flex h-full items-center overflow-hidden",
+          "transition-[width,visibility] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]",
+          open ? "visible w-[var(--expanding-search-width)]" : "invisible w-0",
+        )}
+      >
+        <input
+          ref={inputRef}
+          id={inputId}
+          type="search"
+          aria-label={label}
+          placeholder={placeholder}
+          disabled={disabled}
+          autoComplete="off"
+          {...inputProps}
+          value={value}
+          data-slot="expanding-search-input"
+          className={cn(
+            "h-full min-w-0 flex-1 bg-transparent pe-1 text-sm outline-none placeholder:text-muted-foreground",
+            "[&::-webkit-search-cancel-button]:appearance-none",
+            inputProps.className,
+          )}
+          onChange={(event) => {
+            inputProps.onChange?.(event);
+            setValue(event.target.value);
+          }}
+          onKeyDown={handleKeyDown}
+        />
+        {value ? (
+          <button
+            type="button"
+            aria-label={clearLabel}
+            data-slot="expanding-search-clear"
+            className={cn(iconButton, "size-8 hover:bg-foreground/6")}
+            onClick={() => {
+              setValue("");
+              focusNext.current = "input";
+              inputRef.current?.focus();
+            }}
+          >
+            <Glyph d="M18 6 6 18M6 6l12 12" />
+          </button>
+        ) : null}
+      </div>
+      {children}
+    </form>
+  );
+}
+
+export { expandingSearchVariants };

package/src/components/expanding-search/index.ts

@@ -0,0 +1,5 @@
+export {
+  ExpandingSearch,
+  expandingSearchVariants,
+  type ExpandingSearchProps,
+} from "./expanding-search";

package/src/components/expanding-search/meta.ts

@@ -0,0 +1,19 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "expanding-search",
+  title: "Expanding Search",
+  description:
+    "A search button that opens into a field, clears, and collapses back with Escape — ready for a combobox.",
+  category: "form",
+  status: "beta",
+  dependencies: ["class-variance-authority"],
+  registryDependencies: [],
+  files: ["expanding-search.tsx"],
+  a11y:
+    "A labelled search landmark. The trigger is a button with aria-expanded and aria-controls; opening moves " +
+    "focus into the field. Escape clears the text first, then collapses and returns focus to the trigger; " +
+    "leaving an empty field collapses it without moving focus. The collapsed field is visibility-hidden, so " +
+    "it is out of the tab order. `inputProps` reaches the input for combobox wiring, and its onKeyDown can " +
+    "preventDefault to keep Escape for its own listbox.",
+});