@gntik-ai/blocks 0.0.0-stage → 0.6.0

package/src/forms/DialogWizard/examples/CreateResource.tsx

@@ -0,0 +1,65 @@
+import { Button, Field, FieldLabel, Input, Stack } from '@gntik-ai/ui';
+import { useState } from 'react';
+import { DescriptionListCard } from '../../../data-display/DescriptionListCard/DescriptionListCard';
+import { ValidationSummary } from '../../ValidationSummary/ValidationSummary';
+import { DialogWizard } from '../DialogWizard';
+import { dialogWizardCopy, dialogWizardSteps } from '../fixtures';
+
+export default function CreateResource() {
+  const [open, setOpen] = useState(false);
+  const [current, setCurrent] = useState(0);
+  const [name, setName] = useState('');
+  const [pending, setPending] = useState(false);
+  const [created, setCreated] = useState('');
+  const valid = name.trim().length > 0;
+  const finish = () => {
+    if (pending) return;
+    setPending(true);
+    window.setTimeout(() => {
+      setCreated(name);
+      setOpen(false);
+      setPending(false);
+    }, 800);
+  };
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>{dialogWizardCopy.title}</Button>
+      <p role="status">{created && `Created ${created}`}</p>
+      <DialogWizard
+        {...dialogWizardCopy}
+        open={open}
+        onOpenChange={setOpen}
+        steps={dialogWizardSteps}
+        current={current}
+        onStepChange={setCurrent}
+        nextDisabled={current === 0 && !valid}
+        onFinish={finish}
+        finishPending={pending}
+        stepError={
+          current === 0 &&
+          !valid && (
+            <ValidationSummary
+              title="A name is required"
+              errors={[{ fieldId: 'resource-name', message: 'Enter a resource name' }]}
+            />
+          )
+        }
+        reviewStep={
+          <DescriptionListCard
+            title="Review resource"
+            description="Check these answers before creating."
+            items={[{ id: 'name', label: 'Name', value: name }]}
+          />
+        }
+      >
+        <Stack gap={4}>
+          <h2>{dialogWizardSteps[current]?.label}</h2>
+          <Field>
+            <FieldLabel>Name</FieldLabel>
+            <Input id="resource-name" value={name} onValueChange={setName} />
+          </Field>
+        </Stack>
+      </DialogWizard>
+    </>
+  );
+}

package/src/forms/DialogWizard/fixtures.ts

@@ -0,0 +1,20 @@
+/** Example data only; consumers own every label and all step state. */
+export const dialogWizardSteps = [{ label: 'Details' }, { label: 'Configuration' }, { label: 'Review' }];
+export const dialogWizardCopy = {
+  title: 'Create resource',
+  description: 'Configure and review a new resource.',
+  exitLabel: 'Exit',
+  cancelLabel: 'Cancel',
+  backLabel: 'Back',
+  nextLabel: 'Next',
+  finishLabel: 'Create resource',
+  pendingLabel: 'Creating resource…',
+  stepsLabel: 'Setup progress',
+  stepsSummaryLabel: 'Setup progress summary',
+  exitTitle: 'Leave this setup?',
+  exitDescription: 'Your answers stay available when you reopen the flow.',
+  exitConfirmLabel: 'Leave',
+  exitCancelLabel: 'Stay',
+  stepAnnouncement: ({ position, total, label }: { position: number; total: number; label: unknown }) =>
+    `Step ${position} of ${total}: ${label}`,
+};

package/src/forms/FileUploadPanel/FileUploadPanel.test.tsx

@@ -0,0 +1,43 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { FileUploadPanel } from './FileUploadPanel';
+import { acceptsFile } from './fixtures';
+
+describe('FileUploadPanel', () => {
+  it('renders the default list', async () => {
+    const { container } = render(<FileUploadPanel />);
+    expect(screen.getByRole('group', { name: 'Upload files' })).toBeInTheDocument();
+    expect(screen.getByRole('progressbar', { name: 'Uploading events-export.jsonl' })).toBeInTheDocument();
+    expect(screen.getByText(/File type not accepted/)).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('uploads accepted files, rejects the rest and removes items', async () => {
+    let finish: () => void = () => {};
+    const onUpload = vi.fn((_f: File, onProgress: (p: number) => void) => {
+      onProgress(40);
+      return new Promise<void>((r) => (finish = r));
+    });
+    const { container } = render(<FileUploadPanel defaultFiles={[]} onUpload={onUpload} maxSize={1000} />);
+    const input = container.querySelector('input[type="file"]') as HTMLInputElement;
+    const ok = new File(['a,b'], 'report.csv', { type: 'text/csv' });
+    const big = new File(['x'.repeat(2000)], 'big.csv', { type: 'text/csv' });
+    const bad = new File(['x'], 'photo.png', { type: 'image/png' });
+    fireEvent.change(input, { target: { files: [ok, big, bad] } });
+    expect(onUpload).toHaveBeenCalledOnce();
+    expect(screen.getByRole('progressbar', { name: 'Uploading report.csv' })).toBeInTheDocument();
+    expect(screen.getByText(/Exceeds the 1000 B limit/)).toBeInTheDocument();
+    expect(screen.getByText(/File type not accepted/)).toBeInTheDocument();
+    await act(async () => finish());
+    expect(screen.getByText(/^3 B · uploaded$/)).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Remove photo.png' }));
+    expect(screen.queryByText('photo.png')).not.toBeInTheDocument();
+  });
+
+  it('matches accept lists', () => {
+    expect(acceptsFile({ name: 'a.PDF', type: '' }, '.pdf')).toBe(true);
+    expect(acceptsFile({ name: 'a.png', type: 'image/png' }, 'image/*')).toBe(true);
+    expect(acceptsFile({ name: 'a.png', type: 'image/png' }, '.csv,application/pdf')).toBe(false);
+  });
+});

package/src/forms/FileUploadPanel/FileUploadPanel.tsx

@@ -0,0 +1,244 @@
+import { Button, IconButton, Progress, cn, useI18n } from '@gntik-ai/ui';
+import { CircleAlert, FileText, RotateCcw, Upload, X } from '@gntik-ai/icons';
+import { useId, useRef, useState, type DragEvent } from 'react';
+import { acceptsFile, formatBytes, simulateUpload, uploadItems, type UploadItem } from './fixtures';
+
+export type { UploadItem, UploadStatus } from './fixtures';
+
+export interface FileUploadPanelProps {
+  /** Accepted types, as for `<input accept>` (".csv,.json", "image/*"). */
+  accept?: string;
+  /** Maximum size per file in bytes. */
+  maxSize?: number;
+  multiple?: boolean;
+  /** Initial list (e.g. files already uploaded). */
+  defaultFiles?: UploadItem[];
+  /** Uploads one file and reports progress (0–100). Defaults to a demo simulation. */
+  onUpload?: (file: File, onProgress: (pct: number) => void) => Promise<void>;
+  onRemove?: (item: UploadItem) => void;
+  /** Visible label of the panel. */
+  label?: string;
+  /** Hint under the drop text; defaults to the accepted types and size limit. */
+  hint?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+let uid = 0;
+const nextId = () => `upload-${++uid}`;
+
+/**
+ * Drop zone with a Browse button, accept and size validation, and a file list with progress,
+ * retry and remove. Rejected files stay in the list with the reason.
+ */
+export function FileUploadPanel({
+  accept = '.csv,.json,.jsonl,.yaml,.pdf',
+  maxSize = 25 * 1024 * 1024,
+  multiple = true,
+  defaultFiles = uploadItems,
+  onUpload = simulateUpload,
+  onRemove,
+  label: labelProp,
+  hint,
+  disabled = false,
+  className,
+}: FileUploadPanelProps) {
+  const { t } = useI18n();
+  const label = labelProp ?? t('upload.label');
+  const id = useId();
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [sources, setSources] = useState<Record<string, File>>({});
+  const [items, setItems] = useState<UploadItem[]>(defaultFiles);
+  const [dragging, setDragging] = useState(false);
+  const [announcement, setAnnouncement] = useState('');
+  const hintText =
+    hint ??
+    t('upload.hint', {
+      types: accept
+        .split(',')
+        .map((a) => a.replace('.', '').toUpperCase())
+        .join(' · '),
+      size: formatBytes(maxSize),
+    });
+
+  const patch = (itemId: string, next: Partial<UploadItem>) =>
+    setItems((list) => list.map((x) => (x.id === itemId ? { ...x, ...next } : x)));
+
+  const start = (itemId: string, file: File) => {
+    patch(itemId, { status: 'uploading', progress: 0, error: undefined });
+    onUpload(file, (pct) => patch(itemId, { progress: pct })).then(
+      () => {
+        patch(itemId, { status: 'done', progress: 100 });
+        setAnnouncement(t('upload.done', { name: file.name }));
+      },
+      (e: unknown) => {
+        patch(itemId, { status: 'error', error: e instanceof Error ? e.message : t('upload.failed') });
+        setAnnouncement(t('upload.error', { name: file.name }));
+      },
+    );
+  };
+
+  const addFiles = (list: FileList | File[]) => {
+    const files = Array.from(list).slice(0, multiple ? undefined : 1);
+    const added: UploadItem[] = [];
+    const toStart: Array<[string, File]> = [];
+    const kept: Record<string, File> = {};
+    for (const file of files) {
+      const itemId = nextId();
+      const error = !acceptsFile(file, accept)
+        ? t('upload.typeRejected')
+        : file.size > maxSize
+          ? t('upload.tooLarge', { size: formatBytes(maxSize) })
+          : undefined;
+      added.push({
+        id: itemId,
+        name: file.name,
+        size: file.size,
+        progress: 0,
+        status: error ? 'error' : 'uploading',
+        error,
+      });
+      if (!error) {
+        kept[itemId] = file;
+        toStart.push([itemId, file]);
+      }
+    }
+    setItems((current) => (multiple ? [...current, ...added] : added));
+    setSources((current) => ({ ...current, ...kept }));
+    const rejected = added.filter((a) => a.error).length;
+    setAnnouncement(
+      [t('upload.added', { count: added.length - rejected }), rejected ? t('upload.rejected', { count: rejected }) : '']
+        .filter(Boolean)
+        .join(' '),
+    );
+    for (const [itemId, file] of toStart) start(itemId, file);
+  };
+
+  const remove = (item: UploadItem) => {
+    setSources((current) => Object.fromEntries(Object.entries(current).filter(([k]) => k !== item.id)));
+    setItems((list) => list.filter((x) => x.id !== item.id));
+    setAnnouncement(t('upload.removed', { name: item.name }));
+    onRemove?.(item);
+  };
+
+  const retryFor = (itemId: string) => {
+    const file = sources[itemId];
+    return file ? () => start(itemId, file) : undefined;
+  };
+
+  const onDrop = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setDragging(false);
+    if (!disabled && e.dataTransfer.files.length) addFiles(e.dataTransfer.files);
+  };
+
+  return (
+    <div role="group" aria-labelledby={`${id}-label`} className={cn('w-full', className)}>
+      <div id={`${id}-label`} className="mb-2 text-[13px] font-medium text-foreground">
+        {label}
+      </div>
+      <div
+        data-dragging={dragging || undefined}
+        data-disabled={disabled || undefined}
+        onDragOver={(e) => {
+          e.preventDefault();
+          if (!disabled) setDragging(true);
+        }}
+        onDragLeave={() => setDragging(false)}
+        onDrop={onDrop}
+        className={cn(
+          'rounded-xl border-2 border-dashed border-border bg-background/40 px-6 py-8 text-center transition-colors motion-reduce:transition-none',
+          'data-[dragging]:border-primary data-[dragging]:bg-primary/10 data-[disabled]:opacity-60',
+        )}
+      >
+        <div className="mx-auto grid size-12 place-items-center rounded-2xl bg-secondary/70 text-muted-foreground ring-1 ring-border">
+          <Upload size={22} aria-hidden />
+        </div>
+        <p className="mt-4 text-[13.5px] text-foreground">{t('upload.drop')}</p>
+        <Button
+          variant="secondary"
+          size="sm"
+          className="mt-2"
+          disabled={disabled}
+          onClick={() => inputRef.current?.click()}
+          aria-describedby={`${id}-hint`}
+        >
+          {t('upload.browse')}
+        </Button>
+        <p id={`${id}-hint`} className="mt-3 font-mono text-[11.5px] text-muted-foreground">
+          {hintText}
+        </p>
+        <input
+          ref={inputRef}
+          type="file"
+          hidden
+          accept={accept}
+          multiple={multiple}
+          disabled={disabled}
+          onChange={(e) => {
+            if (e.target.files?.length) addFiles(e.target.files);
+            e.target.value = '';
+          }}
+        />
+      </div>
+      {items.length > 0 && (
+        <ul aria-label={t('upload.files')} className="mt-4 space-y-2">
+          {items.map((item) => (
+            <FileRow key={item.id} item={item} onRemove={() => remove(item)} onRetry={retryFor(item.id)} />
+          ))}
+        </ul>
+      )}
+      <span role="status" className="sr-only">
+        {announcement}
+      </span>
+    </div>
+  );
+}
+
+function FileRow({ item, onRemove, onRetry }: { item: UploadItem; onRemove: () => void; onRetry?: () => void }) {
+  const { t } = useI18n();
+  const err = item.status === 'error';
+  const done = item.status === 'done';
+  return (
+    <li className="flex items-center gap-3 rounded-lg border border-border bg-card px-3.5 py-2.5 shadow-sm">
+      <span
+        className={cn(
+          'grid size-9 shrink-0 place-items-center rounded-md',
+          err
+            ? 'bg-destructive/12 text-destructive-chip-text'
+            : done
+              ? 'bg-primary/14 text-primary-chip-text'
+              : 'bg-secondary text-muted-foreground',
+        )}
+      >
+        {err ? <CircleAlert size={17} aria-hidden /> : <FileText size={17} aria-hidden />}
+      </span>
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-[13px] font-medium text-foreground">{item.name}</div>
+        {item.status === 'uploading' ? (
+          <Progress
+            value={item.progress}
+            size="sm"
+            aria-label={t('upload.uploading', { name: item.name })}
+            className="mt-1.5"
+          />
+        ) : (
+          <div className={cn('mt-0.5 font-mono text-[11px]', err ? 'text-destructive-text' : 'text-muted-foreground')}>
+            {err
+              ? t('upload.notUploaded', { error: item.error ?? t('upload.failed') })
+              : t('upload.uploaded', { size: formatBytes(item.size) })}
+          </div>
+        )}
+      </div>
+      {item.status === 'uploading' && (
+        <span className="shrink-0 font-mono text-[10.5px] text-muted-foreground tabular-nums">
+          {Math.round(item.progress)}%
+        </span>
+      )}
+      {err && onRetry && (
+        <IconButton icon={RotateCcw} size="sm" label={t('upload.retry', { name: item.name })} onClick={onRetry} />
+      )}
+      <IconButton icon={X} size="sm" label={t('common.removeItem', { label: item.name })} onClick={onRemove} />
+    </li>
+  );
+}

package/src/forms/FileUploadPanel/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'File upload panel',
+  family: 'forms',
+  status: 'stable',
+  description:
+    'Drag-and-drop zone with a Browse button, type and size validation, and a file list with progress, retry and remove.',
+  uses: ['Button', 'IconButton', 'Progress'],
+};

package/src/forms/FileUploadPanel/fixtures.ts

@@ -0,0 +1,66 @@
+export type UploadStatus = 'uploading' | 'done' | 'error';
+
+export interface UploadItem {
+  id: string;
+  name: string;
+  /** Size in bytes. */
+  size: number;
+  /** 0–100. */
+  progress: number;
+  status: UploadStatus;
+  /** Why the file was rejected or failed. */
+  error?: string;
+}
+
+export const uploadItems: UploadItem[] = [
+  { id: 'f1', name: 'service-config.yaml', size: 4_300, progress: 100, status: 'done' },
+  { id: 'f2', name: 'events-export.jsonl', size: 1_679_000, progress: 64, status: 'uploading' },
+  {
+    id: 'f3',
+    name: 'db-snapshot.bin',
+    size: 2_540_000_000,
+    progress: 0,
+    status: 'error',
+    error: 'File type not accepted',
+  },
+];
+
+/** Demo uploader: reports progress in steps and resolves after ~1.5 s. */
+export function simulateUpload(_file: File, onProgress: (pct: number) => void): Promise<void> {
+  return new Promise((resolve) => {
+    let pct = 0;
+    const step = () => {
+      pct = Math.min(100, pct + 20);
+      onProgress(pct);
+      if (pct >= 100) resolve();
+      else setTimeout(step, 250);
+    };
+    setTimeout(step, 250);
+  });
+}
+
+export function formatBytes(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ['KB', 'MB', 'GB', 'TB'];
+  let v = bytes / 1024;
+  let i = 0;
+  while (v >= 1024 && i < units.length - 1) {
+    v /= 1024;
+    i++;
+  }
+  return `${v >= 10 ? Math.round(v) : v.toFixed(1)} ${units[i]}`;
+}
+
+/** Matches a file against an `accept` list (".csv", "image/*", "application/pdf"). */
+export function acceptsFile(file: { name: string; type: string }, accept: string | undefined) {
+  if (!accept) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return accept
+    .split(',')
+    .map((a) => a.trim().toLowerCase())
+    .filter(Boolean)
+    .some((a) =>
+      a.startsWith('.') ? name.endsWith(a) : a.endsWith('/*') ? type.startsWith(a.slice(0, -1)) : type === a,
+    );
+}

package/src/forms/FormSection/FormSection.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button, Field, FieldLabel, Input } from '@gntik-ai/ui';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { FormSection } from './FormSection';
+
+describe('FormSection', () => {
+  it('renders the default section as a named region', async () => {
+    const { container } = render(<FormSection />);
+    expect(screen.getByRole('region', { name: 'General' })).toBeInTheDocument();
+    expect(screen.getByLabelText('Project name')).toHaveValue('billing-dashboard');
+    await expectNoAxeViolations(container);
+  });
+
+  it('renders custom fields and actions', async () => {
+    const onSave = vi.fn();
+    render(
+      <FormSection
+        title="Profile"
+        description="How you appear to others."
+        actions={<Button onClick={onSave}>Save</Button>}
+      >
+        <Field>
+          <FieldLabel>Display name</FieldLabel>
+          <Input />
+        </Field>
+      </FormSection>,
+    );
+    await userEvent.type(screen.getByLabelText('Display name'), 'Avery');
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+    expect(onSave).toHaveBeenCalledOnce();
+    expect(screen.getByLabelText('Display name')).toHaveValue('Avery');
+  });
+});

package/src/forms/FormSection/FormSection.tsx

@@ -0,0 +1,77 @@
+import { Field, FieldDescription, FieldLabel, Input, Textarea, cn } from '@gntik-ai/ui';
+import { useId, type HTMLAttributes, type ReactNode } from 'react';
+
+export interface FormSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'className'> {
+  /** Section title shown in the left column; also names the section landmark. */
+  title?: ReactNode;
+  /** Help text under the title. */
+  description?: ReactNode;
+  /** The fields (right column). Defaults to a sample "General" field set. */
+  children?: ReactNode;
+  /** Footer row under the fields (e.g. Save / Cancel). */
+  actions?: ReactNode;
+  /** Heading level that fits the page outline. */
+  headingLevel?: 'h2' | 'h3' | 'h4';
+  /** Draws a rule above the section (for stacked sections). */
+  divided?: boolean;
+  className?: string;
+}
+
+function SampleFields() {
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-6">
+      <Field className="sm:col-span-4">
+        <FieldLabel>Project name</FieldLabel>
+        <Input defaultValue="billing-dashboard" />
+        <FieldDescription>Lowercase letters, numbers and dashes.</FieldDescription>
+      </Field>
+      <Field className="sm:col-span-6">
+        <FieldLabel>Description</FieldLabel>
+        <Textarea rows={3} defaultValue="Usage and invoice reporting for every workspace." />
+      </Field>
+    </div>
+  );
+}
+
+/**
+ * Two-column form section: title and help on the left, fields on the right. Stacks into a
+ * single column on small screens.
+ */
+export function FormSection({
+  title = 'General',
+  description = 'Basic details shown to everyone who can access this project.',
+  children,
+  actions,
+  headingLevel: Heading = 'h2',
+  divided = false,
+  className,
+  ...props
+}: FormSectionProps) {
+  const id = useId();
+  return (
+    <section
+      aria-labelledby={title != null ? `${id}-title` : undefined}
+      className={cn(
+        'grid grid-cols-1 gap-x-10 gap-y-5 md:grid-cols-3',
+        divided && 'border-t border-border pt-8',
+        className,
+      )}
+      {...props}
+    >
+      <div className="min-w-0">
+        {title != null && (
+          <Heading id={`${id}-title`} className="text-[14px] font-semibold tracking-tight text-foreground">
+            {title}
+          </Heading>
+        )}
+        {description != null && (
+          <p className="mt-1 text-[13px] leading-6 text-pretty text-muted-foreground">{description}</p>
+        )}
+      </div>
+      <div className="min-w-0 md:col-span-2">
+        {children ?? <SampleFields />}
+        {actions != null && <div className="mt-6 flex flex-wrap items-center justify-end gap-2.5">{actions}</div>}
+      </div>
+    </section>
+  );
+}

package/src/forms/FormSection/block.meta.ts

@@ -0,0 +1,9 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Form section',
+  family: 'forms',
+  status: 'stable',
+  description: 'Two-column settings section: title and help on the left, fields on the right; stacks on small screens.',
+  uses: ['Field', 'Input', 'Textarea'],
+};

package/src/forms/InviteMembersDialog/InviteMembersDialog.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { InviteMembersDialog } from './InviteMembersDialog';
+
+describe('InviteMembersDialog', () => {
+  it('renders the trigger and an accessible dialog', async () => {
+    const { container } = render(<InviteMembersDialog />);
+    await expectNoAxeViolations(container);
+    await userEvent.click(screen.getByRole('button', { name: 'Invite members' }));
+    const dialog = await screen.findByRole('dialog', { name: 'Invite members' });
+    await expectNoAxeViolations(dialog);
+  });
+
+  it('validates the emails, then submits and closes', async () => {
+    const onInvite = vi.fn().mockResolvedValue(undefined);
+    render(<InviteMembersDialog defaultOpen onInvite={onInvite} />);
+    const input = await screen.findByLabelText(/Email addresses/);
+    await userEvent.click(screen.getByRole('button', { name: 'Send invitation' }));
+    expect(await screen.findByText('Add at least one email address.')).toBeInTheDocument();
+    expect(onInvite).not.toHaveBeenCalled();
+
+    await userEvent.type(input, 'not-an-email{Enter}');
+    await userEvent.click(screen.getByRole('button', { name: 'Send invitation' }));
+    expect(onInvite).not.toHaveBeenCalled();
+    await userEvent.click(screen.getByRole('button', { name: 'Remove not-an-email' }));
+
+    await userEvent.type(input, 'avery@example.com, sam@example.com,');
+    await userEvent.click(screen.getByRole('button', { name: 'Send 2 invitations' }));
+    expect(onInvite).toHaveBeenCalledWith({
+      emails: ['avery@example.com', 'sam@example.com'],
+      role: 'member',
+      message: '',
+    });
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  });
+});