@spree/dashboard-ui 0.1.0

package/src/spree/metadata/metadata-card.tsx

@@ -0,0 +1,62 @@
+import { BracesIcon } from 'lucide-react'
+import { Fragment } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card'
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '../../ui/empty'
+
+interface MetadataCardProps {
+  /**
+   * Free-form metadata stored on the record. Read-only — apps and integrations
+   * write to this; admins just see what's there. Always an object (possibly
+   * empty); the API never returns `null`.
+   */
+  metadata: Record<string, unknown>
+  /** Translated copy (passed by the app — this component stays headless). */
+  title: string
+  emptyTitle: string
+  emptyDescription: string
+}
+
+export function MetadataCard({ metadata, title, emptyTitle, emptyDescription }: MetadataCardProps) {
+  const entries = Object.entries(metadata)
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {entries.length === 0 ? (
+          <Empty className="border-0 p-0">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <BracesIcon />
+              </EmptyMedia>
+              <EmptyTitle>{emptyTitle}</EmptyTitle>
+              <EmptyDescription>{emptyDescription}</EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        ) : (
+          <dl className="grid grid-cols-[minmax(160px,1fr)_2fr] gap-x-4 gap-y-2 text-sm">
+            {entries.map(([key, value]) => (
+              <Fragment key={key}>
+                <dt>
+                  <code className="text-xs text-muted-foreground">{key}</code>
+                </dt>
+                <dd className="text-foreground/90 break-words font-mono text-xs">
+                  {formatValue(value)}
+                </dd>
+              </Fragment>
+            ))}
+          </dl>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+function formatValue(value: unknown): string {
+  if (value === null || value === undefined) return '—'
+  if (typeof value === 'string') return value
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value)
+  return JSON.stringify(value)
+}

package/src/spree/relative-time.tsx

@@ -0,0 +1,49 @@
+import { format, formatDistanceToNow } from 'date-fns'
+import type { ComponentProps, ReactNode } from 'react'
+import { activeDateLocale } from '../lib/date-locale'
+import { cn } from '../lib/utils'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
+
+type TooltipContentProps = ComponentProps<typeof TooltipContent>
+
+type RelativeTimeProps = {
+  iso: string | null | undefined
+  fallback?: ReactNode
+  prefix?: ReactNode
+  className?: string
+  side?: TooltipContentProps['side']
+  align?: TooltipContentProps['align']
+}
+
+export function RelativeTime({
+  iso,
+  fallback = '—',
+  prefix,
+  className,
+  side,
+  align,
+}: RelativeTimeProps) {
+  if (!iso) return <>{fallback}</>
+
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) return <>{fallback}</>
+
+  const locale = activeDateLocale()
+  const relative = formatDistanceToNow(date, { addSuffix: true, locale })
+  const absolute = format(date, 'PPpp', { locale })
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <time dateTime={iso} className={cn('cursor-default', className)}>
+          {prefix}
+          {prefix ? ' ' : null}
+          {relative}
+        </time>
+      </TooltipTrigger>
+      <TooltipContent side={side} align={align}>
+        {absolute}
+      </TooltipContent>
+    </Tooltip>
+  )
+}

package/src/spree/resource-combobox.tsx

@@ -0,0 +1,108 @@
+import type { ReactNode } from 'react'
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from '../ui/combobox'
+
+/**
+ * Anything we can pick. Records must have a stable string `id` so they round-
+ * trip through the `value` prop (the form/parent state keeps the ID, not the
+ * full record).
+ */
+export type ComboboxOption = { id: string }
+
+export interface ResourceComboboxProps<T extends ComboboxOption> {
+  /** Currently selected ID. */
+  value: string | undefined | null
+  /** Fires with the picked record's ID, or `undefined` when cleared. */
+  onChange: (id: string | undefined, record: T | null) => void
+
+  /**
+   * Records available to render in the dropdown. The caller owns fetching +
+   * caching; pass whatever subset of options should currently be visible.
+   * Must include the record matching `value` so the trigger can render its
+   * label, otherwise the trigger falls back to the raw ID.
+   */
+  items: T[]
+
+  /**
+   * Called as the user types — receives the raw input string. The caller
+   * typically debounces and queries with it. The combobox does NOT manage
+   * any internal input/query state.
+   */
+  onInputChange?: (next: string) => void
+
+  /** Renders the trigger + item label. */
+  getOptionLabel: (option: T) => string
+
+  /**
+   * Optional richer item renderer for the dropdown. Falls back to
+   * `getOptionLabel` when omitted.
+   */
+  renderOption?: (option: T) => ReactNode
+
+  /** Placeholder for the search input. */
+  placeholder?: string
+  /** Empty state text shown in the dropdown when items is empty. */
+  emptyText?: string
+  disabled?: boolean
+}
+
+/**
+ * Headless search-driven single-select picker. Doesn't fetch anything itself —
+ * pass `items` plus an `onInputChange` callback and wire the data layer
+ * outside (TanStack Query, SWR, manual state, whatever).
+ *
+ * `@spree/dashboard-core` ships a convenience `<ResourceCombobox>` (same name,
+ * same props shape minus `items`/`onInputChange`, plus a `search`/`hydrate`/
+ * `queryKey` interface) that wraps this one with TanStack Query — that's what
+ * most callsites use. Reach for the pure version here when the data flow
+ * doesn't match the wrapper's shape.
+ */
+export function ResourceCombobox<T extends ComboboxOption>({
+  value,
+  onChange,
+  items,
+  onInputChange,
+  getOptionLabel,
+  renderOption,
+  placeholder,
+  emptyText,
+  disabled,
+}: ResourceComboboxProps<T>) {
+  const selected = items.find((r) => r.id === value) ?? null
+
+  return (
+    <Combobox
+      items={items}
+      value={selected}
+      onValueChange={(record: T | null) => onChange(record?.id, record)}
+      onInputValueChange={onInputChange}
+      itemToStringLabel={(record: T | null) => (record ? getOptionLabel(record) : '')}
+      itemToStringValue={(record: T | null) => record?.id ?? ''}
+      // Filtering is server-side: the caller's `onInputChange` already narrows
+      // the items list. Disable Base UI's built-in client filter so it doesn't
+      // hide rows whose label doesn't substring-match the typed query.
+      filter={null}
+      // Mirror multi-autocomplete: `disabled` on the root also disables the
+      // dropdown trigger + selection mechanics, not just the input.
+      disabled={disabled}
+    >
+      <ComboboxInput placeholder={placeholder} disabled={disabled} showClear />
+      <ComboboxContent>
+        <ComboboxEmpty>{emptyText}</ComboboxEmpty>
+        <ComboboxList>
+          {(record: T) => (
+            <ComboboxItem key={record.id} value={record}>
+              {renderOption ? renderOption(record) : getOptionLabel(record)}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}

package/src/spree/resource-layout.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react'
+
+interface ResourceLayoutProps {
+  /** Rendered above the two columns. Typically <PageHeader />. */
+  header?: ReactNode
+  /** Left column content (8/12 on lg+). */
+  main: ReactNode
+  /** Right column content (4/12 on lg+). Optional — when omitted, main spans full width. */
+  sidebar?: ReactNode
+}
+
+/**
+ * Standard detail-page scaffold: header above, two columns below (8/4 on lg+,
+ * stacked under). Replaces the ad-hoc grid duplicated in product/order detail
+ * pages and the legacy `_edit_resource.html.erb` skeleton.
+ */
+export function ResourceLayout({ header, main, sidebar }: ResourceLayoutProps) {
+  return (
+    <div className="flex flex-col gap-6">
+      {header}
+      {sidebar ? (
+        <div className="grid grid-cols-12 gap-6">
+          <div className="col-span-12 lg:col-span-8 flex flex-col gap-6">{main}</div>
+          <div className="col-span-12 lg:col-span-4 flex flex-col gap-6">{sidebar}</div>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-6">{main}</div>
+      )}
+    </div>
+  )
+}

package/src/spree/resource-multi-autocomplete.tsx

@@ -0,0 +1,180 @@
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxValue,
+  useComboboxAnchor,
+} from '../ui/combobox'
+
+/**
+ * Anything we can pick. Items must have a stable string `id`. The label
+ * (and any other rendering) is up to the caller via `getOptionLabel`.
+ */
+export type AutocompleteOption = { id: string }
+
+/**
+ * Safely resolve an option's label. The caller's `getOptionLabel` typically
+ * reads hydrated fields (e.g. `c.email`), which throw or return blank when
+ * called against a stub `{ id }`. Detect that case (single own key, the `id`)
+ * and fall back to the raw id so chips for un-hydrated selections stay
+ * readable until hydration lands.
+ */
+function labelOrFallback<T extends AutocompleteOption>(
+  option: T,
+  getOptionLabel: (option: T) => string,
+): string {
+  const isStub = Object.keys(option).length === 1 && 'id' in option
+  if (isStub) return option.id
+  try {
+    return getOptionLabel(option) || option.id
+  } catch {
+    return option.id
+  }
+}
+
+export interface ResourceMultiAutocompleteProps<T extends AutocompleteOption> {
+  /** Currently selected IDs (controlled). */
+  value: string[]
+  onChange: (next: string[]) => void
+  /**
+   * Optional companion callback fired alongside `onChange` carrying the
+   * resolved option records for the selected IDs. Use this to stamp display
+   * labels on the parent state without re-fetching. IDs whose record isn't
+   * yet hydrated will be absent from this list.
+   */
+  onResolvedOptionsChange?: (options: T[]) => void
+
+  /**
+   * Records available to render in the dropdown — typically search results
+   * for the current query plus any selected records pulled from a cache.
+   * The caller owns fetching, caching, and merging.
+   */
+  items: T[]
+
+  /**
+   * Records matching `value` that we already have details for. Used to
+   * render chips with labels (and dispatch onResolvedOptionsChange with
+   * the right records). IDs missing from `selectedOptions` render as
+   * stubs (just the raw ID) until the caller hydrates them.
+   */
+  selectedOptions: T[]
+
+  /** Current text in the search input. */
+  inputValue: string
+  /** Called when the user types or selects (selection clears the input). */
+  onInputChange: (next: string) => void
+
+  /** Renders the chip and dropdown row label. */
+  getOptionLabel: (option: T) => string
+
+  /** Placeholder for the search input. */
+  placeholder?: string
+  /** Empty state text shown in the dropdown when items is empty. */
+  emptyText?: string
+  /** Override emptyText when the consumer's search is in-flight. */
+  fetchingText?: string
+  /** True while the consumer's data source is loading. */
+  isFetching?: boolean
+  /** Disable the whole picker. */
+  disabled?: boolean
+}
+
+/**
+ * Headless search-driven multi-select picker. Doesn't fetch anything — the
+ * caller passes `items` (visible options) + `selectedOptions` (records
+ * matching `value`) + `inputValue`/`onInputChange` for the typed query.
+ *
+ * `@spree/dashboard-core` ships a convenience `<ResourceMultiAutocomplete>`
+ * that wraps this with TanStack Query — that's what most callsites use.
+ * Reach for the pure version here when the data flow doesn't match the
+ * wrapper's shape.
+ */
+export function ResourceMultiAutocomplete<T extends AutocompleteOption>({
+  value,
+  onChange,
+  onResolvedOptionsChange,
+  items,
+  selectedOptions,
+  inputValue,
+  onInputChange,
+  getOptionLabel,
+  placeholder,
+  emptyText,
+  fetchingText,
+  isFetching,
+  disabled,
+}: ResourceMultiAutocompleteProps<T>) {
+  const { t } = useTranslation()
+  const resolvedPlaceholder = placeholder ?? t('admin.common.search_placeholder')
+  const resolvedEmptyText = emptyText ?? t('admin.common.no_results')
+  const resolvedFetchingText = fetchingText ?? t('admin.common.searching')
+  const anchorRef = useComboboxAnchor()
+
+  const handleChange = useCallback(
+    (next: T[]) => {
+      onChange(next.map((o) => o.id))
+      // Filter out stub `{id}` placeholders for un-hydrated IDs — callers
+      // typically stamp these on parent state and stubs would overwrite
+      // earlier real records.
+      onResolvedOptionsChange?.(next.filter((o) => Object.keys(o).length > 1))
+      onInputChange('')
+    },
+    [onChange, onResolvedOptionsChange, onInputChange],
+  )
+
+  void value // silence unused (value is consumed via selectedOptions)
+
+  return (
+    <Combobox
+      multiple
+      items={items}
+      value={selectedOptions}
+      onValueChange={handleChange as never}
+      itemToStringLabel={(o) => getOptionLabel(o as T)}
+      itemToStringValue={(o) => (o as T).id}
+      isItemEqualToValue={(a, b) => (a as T).id === (b as T).id}
+      // Filtering is server-side: the caller's data source already narrows
+      // the items list. Disable Base UI's client filter so it doesn't hide
+      // rows whose label doesn't substring-match the typed query (the typed
+      // query is often shorter than the actual label — partial email, etc.).
+      filter={null}
+      disabled={disabled}
+    >
+      <ComboboxChips ref={anchorRef}>
+        <ComboboxValue>
+          {(selected: T[]) =>
+            selected.map((opt) => (
+              // Stubs (un-hydrated IDs) come through with only `{ id }`. Fall
+              // back to the raw ID so the chip stays readable instead of going
+              // blank while hydration is in flight; `getOptionLabel` can also
+              // throw on stubs whose resolver assumes hydrated fields.
+              <ComboboxChip key={opt.id}>{labelOrFallback(opt, getOptionLabel)}</ComboboxChip>
+            ))
+          }
+        </ComboboxValue>
+        <ComboboxChipsInput
+          placeholder={resolvedPlaceholder}
+          value={inputValue}
+          onChange={(e) => onInputChange((e.target as HTMLInputElement).value)}
+        />
+      </ComboboxChips>
+      <ComboboxContent anchor={anchorRef}>
+        <ComboboxEmpty>{isFetching ? resolvedFetchingText : resolvedEmptyText}</ComboboxEmpty>
+        <ComboboxList>
+          {(option: T) => (
+            <ComboboxItem key={option.id} value={option}>
+              {getOptionLabel(option)}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}

package/src/spree/resource-name-cell.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react'
+import { cn } from '../lib/utils'
+
+interface ResourceNameCellProps {
+  /** Resource identifier, mirrored into the bridge data attribute. */
+  id: string
+  /** Data attribute the `useRowClickBridge` listener targets (e.g. `data-payment-method-id`). */
+  dataAttr: `data-${string}`
+  /** Primary text — the resource's display name. */
+  name: ReactNode
+  /** Optional secondary line. Falsy values render nothing. */
+  secondary?: ReactNode
+  /** Extra classes for the primary `<span>` — useful for `tabular-nums` on ID/number columns. */
+  nameClassName?: string
+}
+
+/**
+ * Standard "name + secondary" cell used as the primary clickable target in
+ * resource index tables. The wrapping `<button>` carries the bridge data
+ * attribute so `useRowClickBridge` resolves the row → detail navigation.
+ *
+ * Stays purely presentational — routing is the parent table's job via the
+ * bridge hook, not this component's. If you need a custom layout (icon
+ * thumbnail, status pill inline with name, etc.), compose it inline rather
+ * than overloading this cell with props.
+ */
+export function ResourceNameCell({
+  id,
+  dataAttr,
+  name,
+  secondary,
+  nameClassName,
+}: ResourceNameCellProps) {
+  return (
+    <button
+      type="button"
+      {...{ [dataAttr]: id }}
+      className="flex h-full w-full cursor-pointer flex-col items-start rounded text-left focus-visible:outline-none"
+    >
+      <span className={cn('font-medium', nameClassName)}>{name}</span>
+      {secondary && <span className="text-xs text-muted-foreground">{secondary}</span>}
+    </button>
+  )
+}

package/src/spree/route-error-boundary.tsx

@@ -0,0 +1,102 @@
+import { AlertTriangleIcon, RotateCcwIcon } from 'lucide-react'
+import { Component, type ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '../ui/button'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '../ui/empty'
+
+interface ErrorStateProps {
+  /** Headline. Defaults to "Something went wrong". */
+  title?: ReactNode
+  /** Smaller text below the title. Pass an Error and we'll show its message. */
+  description?: ReactNode
+  /** Error object — when supplied, its message is shown if `description` is omitted. */
+  error?: Error | null
+  /** Called by the retry button. When omitted, the button is hidden. */
+  onRetry?: () => void
+  /** Override the retry label. Default "Try again". */
+  retryLabel?: string
+}
+
+/**
+ * Friendly error display. Use directly when an async operation has failed
+ * (replacing the inline `<p className="text-destructive">Failed to load…</p>`
+ * scattered through detail pages), or as a route's `errorComponent`.
+ */
+export function ErrorState({ title, description, error, onRetry, retryLabel }: ErrorStateProps) {
+  const { t } = useTranslation()
+  const resolvedTitle = title ?? t('admin.errors.generic')
+  const resolvedRetryLabel = retryLabel ?? t('admin.components.error_state.retry')
+  const message = description ?? error?.message ?? t('admin.errors.unexpected_retry')
+
+  return (
+    <Empty>
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <AlertTriangleIcon />
+        </EmptyMedia>
+        <EmptyTitle>{resolvedTitle}</EmptyTitle>
+        <EmptyDescription>{message}</EmptyDescription>
+      </EmptyHeader>
+      {onRetry && (
+        <EmptyContent>
+          <Button variant="outline" size="sm" onClick={onRetry}>
+            <RotateCcwIcon className="size-4" />
+            {resolvedRetryLabel}
+          </Button>
+        </EmptyContent>
+      )}
+    </Empty>
+  )
+}
+
+interface RouteErrorBoundaryProps {
+  children: ReactNode
+  /** Optional fallback renderer; receives the caught error and a reset function. */
+  fallback?: (error: Error, reset: () => void) => ReactNode
+}
+
+interface RouteErrorBoundaryState {
+  error: Error | null
+}
+
+/**
+ * Route-level error boundary. Wrap a route component (or any subtree) so a
+ * thrown render error shows an `<ErrorState>` instead of crashing the SPA.
+ *
+ * For TanStack Router data errors (loader/component throws), prefer the
+ * route's `errorComponent: ErrorState` — that surface receives `{ error, reset }`
+ * directly. This boundary is for cases where a child component throws during
+ * render outside the loader path.
+ */
+export class RouteErrorBoundary extends Component<
+  RouteErrorBoundaryProps,
+  RouteErrorBoundaryState
+> {
+  state: RouteErrorBoundaryState = { error: null }
+
+  static getDerivedStateFromError(error: Error): RouteErrorBoundaryState {
+    return { error }
+  }
+
+  reset = () => {
+    this.setState({ error: null })
+  }
+
+  render() {
+    const { error } = this.state
+    if (!error) return this.props.children
+
+    if (this.props.fallback) {
+      return this.props.fallback(error, this.reset)
+    }
+
+    return <ErrorState error={error} onRetry={this.reset} />
+  }
+}

package/src/spree/row-actions.tsx

@@ -0,0 +1,85 @@
+import { CopyIcon, EllipsisVerticalIcon, EyeIcon, PencilIcon, Trash2Icon } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '../ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+
+export interface RowAction {
+  /** Stable key for React reconciliation. Doubles as the i18n action slug
+   *  (`'edit' | 'clone' | 'delete' | …`) when `label` is omitted: the helper
+   *  looks up `admin.row_actions.<key>` for built-ins, so callers don't have
+   *  to repeat the translation key. */
+  key: string
+  /** Override the auto-resolved label for custom (non-built-in) actions. */
+  label?: string
+  /** Override the default icon — required for actions other than the
+   *  three built-ins (edit/clone/delete). */
+  icon?: ReactNode
+  /** Skips rendering when false. Use for CanCanCan gates. */
+  visible?: boolean
+  /** Greys out the item without removing it (in-flight mutations). */
+  disabled?: boolean
+  /** Styles the item red — use for destructive actions. */
+  destructive?: boolean
+  onSelect: () => void
+}
+
+interface RowActionsProps {
+  /** Items in render order. Items with `visible: false` are filtered out. */
+  actions: RowAction[]
+}
+
+const BUILTIN_ICONS: Record<string, ReactNode> = {
+  edit: <PencilIcon className="size-4" />,
+  clone: <CopyIcon className="size-4" />,
+  delete: <Trash2Icon className="size-4" />,
+  view: <EyeIcon className="size-4" />,
+}
+
+/**
+ * Kebab dropdown shared by every `<ResourceTable rowActions={…}>` consumer
+ * (products, customers, payment methods, …). Keeps the icon, alignment, and
+ * a11y label consistent across the SPA.
+ *
+ * Built-in keys (`edit`, `clone`, `delete`) auto-resolve their label via
+ * `admin.row_actions.<key>` and pick up the matching icon, so the typical
+ * call site is:
+ *
+ *     <RowActions actions={[
+ *       { key: 'edit', onSelect: openEdit },
+ *       { key: 'delete', destructive: true, onSelect: openConfirm },
+ *     ]} />
+ */
+export function RowActions({ actions }: RowActionsProps) {
+  const { t } = useTranslation()
+  const visible = actions.filter((a) => a.visible !== false)
+  if (visible.length === 0) return null
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon-xs" aria-label={t('admin.row_actions.menu_label')}>
+          <EllipsisVerticalIcon className="size-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {visible.map((action) => (
+          <DropdownMenuItem
+            key={action.key}
+            onClick={action.onSelect}
+            disabled={action.disabled}
+            className={action.destructive ? 'text-destructive focus:text-destructive' : undefined}
+          >
+            {action.icon ?? BUILTIN_ICONS[action.key]}
+            {action.label ?? t(`admin.row_actions.${action.key}`)}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/spree/row-click-bridge.tsx

@@ -0,0 +1,17 @@
+import { useEffect } from 'react'
+
+export function useRowClickBridge(dataAttribute: string, onClick: (id: string) => void) {
+  useEffect(() => {
+    function handler(e: MouseEvent) {
+      const target = e.target as HTMLElement | null
+      const cell = target?.closest(`[${dataAttribute}]`) as HTMLElement | null
+      if (!cell) return
+      const id = cell.getAttribute(dataAttribute)
+      if (!id) return
+      e.preventDefault()
+      onClick(id)
+    }
+    document.addEventListener('click', handler)
+    return () => document.removeEventListener('click', handler)
+  }, [dataAttribute, onClick])
+}