@olddevs/ui 0.0.0-stage → 4.0.0

package/src/components/overlays/ContextMenu.tsx

@@ -0,0 +1,284 @@
+"use client";
+
+import * as Primitive from "@radix-ui/react-context-menu";
+import { forwardRef, type ReactNode } from "react";
+import { CheckIcon, ChevronRightIcon } from "../../icons.js";
+import { cn } from "../../lib/cn.js";
+import {
+  MENU_ITEM_CLASS,
+  MENU_ITEM_ICON_CLASS,
+  MENU_ITEM_SELECTED_CLASS,
+  MENU_ITEM_SHORTCUT_CLASS,
+  MENU_ITEM_SUBMENU_CLASS,
+  MENU_ITEM_TONE,
+  MENU_PANEL_CLASS,
+  MENU_SECTION_LABEL_CLASS,
+  MENU_SEPARATOR_CLASS,
+} from "../../lib/menu.js";
+import type { Tone } from "../../lib/variants.js";
+import { keyGlyphs } from "../content/Kbd.js";
+
+/**
+ * Контекстное меню — по правой кнопке мыши и по клавише контекстного меню.
+ *
+ * СОБРАНО НА RADIX, А НЕ НА react-aria, и это вынужденно: контекстного меню
+ * react-aria не даёт вовсе. Семейство Radix в пакете уже есть (диалог,
+ * попоувер, тултип), поэтому новая зависимость не приводит нового поставщика.
+ *
+ * Вид берётся из той же таблицы `lib/menu.ts`, что и у `Menu` на react-aria.
+ * Это единственное, что удерживает два меню от расхождения: библиотеки разные,
+ * а пользователь должен видеть одно и то же меню независимо от того, открыл он
+ * его кнопкой или правой кнопкой мыши. Сторожит снимок «два меню рядом».
+ */
+export const ContextMenu = Primitive.Root;
+export const ContextMenuTrigger = Primitive.Trigger;
+export const ContextMenuSub = Primitive.Sub;
+
+export interface ContextMenuContentProps {
+  /** Пункты, разделы и разделители меню. */
+  children?: ReactNode;
+  /** Классы на панель меню — например, ширина. */
+  className?: string;
+}
+
+/** Панель контекстного меню. Портал внутри — как у `Menu`. */
+export const ContextMenuContent = forwardRef<HTMLDivElement, ContextMenuContentProps>(
+  function ContextMenuContent({ children, className }, ref) {
+    return (
+      <Primitive.Portal>
+        <Primitive.Content ref={ref} className={cn(MENU_PANEL_CLASS, className)}>
+          {children}
+        </Primitive.Content>
+      </Primitive.Portal>
+    );
+  }
+);
+
+export interface ContextMenuItemProps {
+  /** Подпись пункта. Длинная обрезается многоточием. */
+  children?: ReactNode;
+  /** Иконка слева от подписи. */
+  icon?: ReactNode;
+  /** Горячая клавиша справа — напоминание, а не действие. */
+  shortcut?: ReactNode;
+  /** Цвет подписи и иконки. `danger` — для разрушительных действий. */
+  tone?: Tone;
+  /** Пункт неактивен: не выбирается и пропускается при навигации. */
+  disabled?: boolean;
+  /** Пункт выбран мышью или клавишей; меню после этого закрывается. */
+  onSelect?: () => void;
+  /** Классы на пункт. */
+  className?: string;
+}
+
+export const ContextMenuItem = forwardRef<HTMLDivElement, ContextMenuItemProps>(
+  function ContextMenuItem(
+    { children, icon, shortcut, tone = "neutral", disabled, onSelect, className },
+    ref
+  ) {
+    return (
+      <Primitive.Item
+        ref={ref}
+        disabled={disabled}
+        onSelect={onSelect}
+        // Пункт Radix получает настоящий DOM-фокус, и глобальное правило
+        // `:focus-visible` рисует вокруг него контур — которого у пункта
+        // react-aria нет, потому что подсветка там задана подложкой. Без этого
+        // атрибута два меню выглядят по-разному, и снимок «два меню рядом»
+        // ловит это первым же прогоном.
+        data-disable-focus-ring="true"
+        className={cn(MENU_ITEM_CLASS, MENU_ITEM_TONE[tone], className)}
+      >
+        {icon != null && <span className={MENU_ITEM_ICON_CLASS}>{icon}</span>}
+        <span className="truncate">{children}</span>
+        {shortcut != null && <kbd className={MENU_ITEM_SHORTCUT_CLASS}>{keyGlyphs(shortcut)}</kbd>}
+      </Primitive.Item>
+    );
+  }
+);
+
+export interface ContextMenuCheckboxItemProps extends Omit<ContextMenuItemProps, "icon"> {
+  /** Отмечен ли пункт. Управляется снаружи: меняется только вместе с этим свойством. */
+  checked?: boolean;
+  /** Пользователь переключил пункт; приходит новое значение. */
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+/**
+ * Пункт-переключатель.
+ *
+ * Здесь `checked`/`onCheckedChange` у самого пункта — в отличие от `Menu`, где
+ * переключатели заданы выбором на разделе. Расхождение не по прихоти: так
+ * устроены сами библиотеки, и подгонять одну под другую значило бы городить
+ * поверх неё свой слой состояния. Роль `menuitemcheckbox` и `aria-checked`
+ * каждая из них проставляет сама — а это и есть то, ради чего они взяты.
+ */
+export const ContextMenuCheckboxItem = forwardRef<HTMLDivElement, ContextMenuCheckboxItemProps>(
+  function ContextMenuCheckboxItem(
+    { children, shortcut, tone = "neutral", disabled, checked, onCheckedChange, className },
+    ref
+  ) {
+    return (
+      <Primitive.CheckboxItem
+        ref={ref}
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        disabled={disabled}
+        data-disable-focus-ring="true"
+        className={cn(MENU_ITEM_CLASS, MENU_ITEM_TONE[tone], MENU_ITEM_SELECTED_CLASS, className)}
+      >
+        <span className={MENU_ITEM_ICON_CLASS}>
+          <Primitive.ItemIndicator>
+            <CheckIcon size={14} strokeWidth={3} />
+          </Primitive.ItemIndicator>
+        </span>
+        <span className="truncate">{children}</span>
+        {shortcut != null && <kbd className={MENU_ITEM_SHORTCUT_CLASS}>{keyGlyphs(shortcut)}</kbd>}
+      </Primitive.CheckboxItem>
+    );
+  }
+);
+
+export interface ContextMenuRadioGroupProps {
+  /** Пункты `ContextMenuRadioItem` этой группы. */
+  children?: ReactNode;
+  /** Выбранное значение. `undefined` — не выбрано ничего. */
+  value?: string;
+  /** Выбран другой пункт; приходит его `value`. */
+  onValueChange?: (value: string) => void;
+}
+
+/**
+ * Раздел одиночного выбора.
+ *
+ * Выбор задан НА РАЗДЕЛЕ, а не на пункте, — в отличие от соседнего
+ * переключателя, где `checked` живёт у самого пункта. Разница не косметическая:
+ * «выбран ровно один» — свойство группы, и только зная группу, Radix может
+ * проставить `aria-checked="false"` остальным. Пункт, знающий лишь про себя,
+ * объявил бы невыбранных просто командами.
+ *
+ * Берите это, а не `ContextMenuCheckboxItem`, везде, где значение одно:
+ * флажок обещает, что можно отметить несколько, и обещание это ложное.
+ */
+export function ContextMenuRadioGroup({
+  children,
+  value,
+  onValueChange,
+}: ContextMenuRadioGroupProps) {
+  return (
+    <Primitive.RadioGroup value={value} onValueChange={onValueChange}>
+      {children}
+    </Primitive.RadioGroup>
+  );
+}
+
+export interface ContextMenuRadioItemProps extends Omit<ContextMenuItemProps, "icon" | "onSelect"> {
+  /** Значение пункта. Совпало со значением раздела — пункт выбран. */
+  value: string;
+}
+
+/**
+ * Пункт одиночного выбора. Живёт только внутри `ContextMenuRadioGroup`.
+ *
+ * Роль `menuitemradio` и `aria-checked` проставляет Radix — ради этого он и
+ * взят. Отметку рисует индикатор в том же слоте, что иконка у обычного пункта,
+ * поэтому своей иконки у пункта выбора нет: две иконки слева читались бы как
+ * два разных состояния.
+ */
+export const ContextMenuRadioItem = forwardRef<HTMLDivElement, ContextMenuRadioItemProps>(
+  function ContextMenuRadioItem(
+    { children, shortcut, tone = "neutral", disabled, value, className },
+    ref
+  ) {
+    return (
+      <Primitive.RadioItem
+        ref={ref}
+        value={value}
+        disabled={disabled}
+        data-disable-focus-ring="true"
+        className={cn(MENU_ITEM_CLASS, MENU_ITEM_TONE[tone], MENU_ITEM_SELECTED_CLASS, className)}
+      >
+        <span className={MENU_ITEM_ICON_CLASS}>
+          <Primitive.ItemIndicator>
+            <CheckIcon size={14} strokeWidth={3} />
+          </Primitive.ItemIndicator>
+        </span>
+        <span className="truncate">{children}</span>
+        {shortcut != null && <kbd className={MENU_ITEM_SHORTCUT_CLASS}>{keyGlyphs(shortcut)}</kbd>}
+      </Primitive.RadioItem>
+    );
+  }
+);
+
+/** Подпись раздела. */
+export function ContextMenuLabel({
+  children,
+  className,
+}: {
+  /** Текст подписи раздела. */
+  children?: ReactNode;
+  /** Классы на подпись. */
+  className?: string;
+}) {
+  return (
+    <Primitive.Label className={cn(MENU_SECTION_LABEL_CLASS, className)}>
+      {children}
+    </Primitive.Label>
+  );
+}
+
+/** Разделитель. */
+export function ContextMenuSeparator({
+  className,
+}: {
+  /** Классы на линию разделителя. */
+  className?: string;
+}) {
+  return <Primitive.Separator className={cn(MENU_SEPARATOR_CLASS, className)} />;
+}
+
+/** Пункт, открывающий подменю. */
+export function ContextMenuSubTrigger({
+  children,
+  icon,
+  className,
+}: {
+  /** Подпись пункта. Длинная обрезается многоточием. */
+  children?: ReactNode;
+  /** Иконка слева от подписи. */
+  icon?: ReactNode;
+  /** Классы на пункт. */
+  className?: string;
+}) {
+  return (
+    <Primitive.SubTrigger
+      data-disable-focus-ring="true"
+      className={cn(MENU_ITEM_CLASS, MENU_ITEM_TONE.neutral, className)}
+    >
+      {icon != null && <span className={MENU_ITEM_ICON_CLASS}>{icon}</span>}
+      <span className="truncate">{children}</span>
+      <span className={MENU_ITEM_SUBMENU_CLASS}>
+        <ChevronRightIcon size={14} />
+      </span>
+    </Primitive.SubTrigger>
+  );
+}
+
+/** Панель подменю. */
+export function ContextMenuSubContent({
+  children,
+  className,
+}: {
+  /** Пункты подменю. */
+  children?: ReactNode;
+  /** Классы на панель подменю. */
+  className?: string;
+}) {
+  return (
+    <Primitive.Portal>
+      <Primitive.SubContent className={cn(MENU_PANEL_CLASS, className)}>
+        {children}
+      </Primitive.SubContent>
+    </Primitive.Portal>
+  );
+}

package/src/components/overlays/Dialog.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { useRef, type CSSProperties, type ReactNode, type RefObject } from "react";
+import { cn } from "../../lib/cn.js";
+import { useOpenerFocus } from "../../hooks/useOpenerFocus.js";
+import { hasOpenAriaOverlay, OVERLAY_LAYER } from "../../lib/overlay-layer.js";
+import { useOverlayLayer } from "../../hooks/useOverlayLayer.js";
+import { withoutToolbarAxis } from "../../lib/toolbar-axis.js";
+import { ModalHeader } from "./ModalHeader.js";
+
+/** Портал окна: ось `Toolbar`, из которой открыто окно, внутрь не проходит. */
+const Portal = withoutToolbarAxis(DialogPrimitive.Portal);
+
+export interface DialogProps {
+  /** Показано ли окно. */
+  open: boolean;
+  /** Закрытие: кнопка закрытия, Escape, клик мимо — всё сюда. */
+  onClose: () => void;
+  /** Заголовок окна. Он же становится доступным именем диалога. */
+  title: ReactNode;
+  /** Строка под заголовком в шапке: слаг, дата, счётчик. */
+  subtitle?: ReactNode;
+  /**
+   * `id` узла, который служит окну описанием — текстом, который скринридер
+   * читает следом за именем.
+   *
+   * Идентификатор, а не сам текст, и это разбор дефекта. Первая версия
+   * принимала `ReactNode` и рисовала его скрытой копией: `ConfirmDialog`
+   * передавал туда свой `message` и тут же рисовал его же видимым абзацем —
+   * текст оказывался в документе ДВАЖДЫ. `message` типизирован как `ReactNode`,
+   * поэтому ссылка внутри него давала невидимый лишний табстоп, а компонент с
+   * собственным `id` — дубль идентификатора в документе.
+   *
+   * Описание обязано указывать на ТОТ ЖЕ узел, который видит глаз. Нужен текст
+   * только для озвучки — положите его в `children` под `sr-only` и сошлитесь
+   * сюда.
+   *
+   * Для `role="alertdialog"` описание требует APG: подтверждение, объявившее
+   * только имя и кнопку, вынуждает подтверждать вслепую.
+   */
+  describedBy?: string;
+  /** Иконка слева от заголовка. Цвет задаёт потребитель — он знает тон окна. */
+  icon?: ReactNode;
+  /**
+   * Идёт отправка: окно нельзя закрыть ни кнопкой закрытия, ни Escape, ни кликом мимо.
+   *
+   * Одно свойство вместо трёх запретов намеренно: «форма отправляется» — это
+   * одно состояние, а не три независимых решения, и разводить их значит
+   * позволить окну оказаться в состоянии «Escape закрывает, а кнопки закрытия нет».
+   */
+  loading?: boolean;
+  /** Вертикальное выравнивание: по центру или от верхнего края. */
+  align?: "center" | "start";
+  /** Классы на само окно — ширина, скругление, рамка. */
+  className?: string;
+  /** Классы на подложку — для окон с особой геометрией или анимацией. */
+  overlayClassName?: string;
+  /** Стили подложки — например, цвет и размытие для особого окна. */
+  overlayStyle?: CSSProperties;
+  /** Динамические стили на само окно. */
+  contentStyle?: CSSProperties;
+  /** Рисовать ли стандартную шапку. Особые окна оставляют собственную. */
+  header?: boolean;
+  /** Слой окна. Отдельные оверлеи приложения живут выше обычных. */
+  zIndex?: string;
+  /**
+   * `alertdialog` — для окна, которое прерывает работу и требует ответа:
+   * подтверждение удаления, предупреждение о несохранённом. Обычные окна
+   * с формой остаются `dialog`.
+   *
+   * Отдельного примитива под это не заводится: `@radix-ui/react-alert-dialog`
+   * отличается от обычного диалога ровно ролью и тем, что его нельзя закрыть
+   * кликом мимо, — а второе у нас и так решается пропом `loading`.
+   */
+  role?: "dialog" | "alertdialog";
+  /**
+   * Куда поставить фокус при открытии. По умолчанию — на первый элемент,
+   * до которого доходит Tab, а это кнопка закрытия в шапке.
+   *
+   * Проп нужен потому, что «куда смотрит пользователь, когда окно открылось» —
+   * решение самого окна, а не деталь реализации. Сделать это эффектом на
+   * стороне вызывающего нельзя: Radix ставит фокус позже, чем отрабатывают
+   * эффекты, и молча перебивает чужой вызов `focus()`. Проверено в витрине —
+   * фокус уезжал на кнопку закрытия.
+   */
+  initialFocusRef?: RefObject<HTMLElement | null>;
+  /** Дополнительная реакция на Escape для окон со своим внутренним состоянием. */
+  onEscapeKeyDown?: DialogPrimitive.DialogContentProps["onEscapeKeyDown"];
+  /** Доступное имя кнопки закрытия. Не задано — «Закрыть» из каталога сообщений. */
+  closeLabel?: string;
+  /** Содержимое окна под шапкой. */
+  children?: ReactNode;
+}
+
+/**
+ * Модальное окно целиком: подложка, ловушка фокуса, шапка и блокировка фона.
+ *
+ * ПОЧЕМУ ЭТО ОТДЕЛЬНЫЙ ПРИМИТИВ, А НЕ ПРОП У `ModalOverlay`. Подложка честно
+ * делает одно — гасит фон и ловит клик мимо, — и `role="dialog"` она взять не
+ * может: диалогу нужно доступное имя, а имя знает только вызывающий. Из-за
+ * этого каждый диалог во фронте собирал модальность руками, и собрал по-разному:
+ * из десяти окон роль и `aria-modal` были у одного, а ловушки фокуса не было
+ * ни у одного — Tab уводил в фон под затемнением, к кнопкам, которых не видно.
+ *
+ * Здесь имя известно (это `title`), поэтому окно берёт на себя всё сразу.
+ *
+ * ПОВЕДЕНИЕ — `@radix-ui/react-dialog`, третья peer-зависимость пакета после
+ * тултипа и поповера, и по той же логике (ADR-0004):
+ * ловушка фокуса, возврат фокуса на триггер, `aria-modal`, портал, Escape по
+ * слоям и `inert` для фона — это не то, что стоит писать заново. Своя ловушка
+ * фокуса — не примитив, а вторая библиотека.
+ *
+ * ПРОКРУТКУ ФОНА БЛОКИРУЕТ RADIX, а не `useScrollLock`. Внутри у него
+ * `react-remove-scroll`, и два замка на одном `body` — это два независимых
+ * счётчика, которые не видят друг друга. Поэтому `Dialog` хук не зовёт;
+ * `useScrollLock` остаётся для оверлеев, собранных вручную.
+ *
+ * ВЛОЖЕННОСТЬ РАБОТАЕТ САМА. Диалог подтверждения поверх окна редактирования —
+ * обычное дело, и Escape закрывает верхний слой, а не оба сразу: Radix ведёт
+ * стек слоёв. О ЧУЖОМ стеке он при этом не знает — меню пакета собраны на
+ * react-aria, и их слой окно различает отдельно (см. `escapeBelongsToAriaLayer`). Прежней версии для этого приходилось ловить Escape на фазе
+ * захвата и гасить событие `stopImmediatePropagation`.
+ */
+export function Dialog({
+  open,
+  onClose,
+  title,
+  subtitle,
+  describedBy,
+  icon,
+  loading = false,
+  align = "center",
+  className,
+  overlayClassName,
+  overlayStyle,
+  contentStyle,
+  header = true,
+  zIndex = OVERLAY_LAYER.modal,
+  role = "dialog",
+  initialFocusRef,
+  onEscapeKeyDown,
+  closeLabel,
+  children,
+}: DialogProps) {
+  // Во время отправки закрывать нечем — но обработчики не снимаются, а
+  // гасятся: снятый `onOpenChange` оставил бы Radix в состоянии, где он
+  // считает окно закрытым, а мы его всё ещё рисуем.
+  const block = loading ? (e: Event) => e.preventDefault() : undefined;
+
+  /** Само окно — чтобы отличить «Escape внутри» от «Escape в чужом слое». */
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  /**
+   * Escape, адресованный слою react-aria, до окна доходить не должен.
+   *
+   * Radix ведёт стек СВОИХ слоёв, и вложенные диалоги закрываются по одному.
+   * Но меню и списки пакета собраны на react-aria, а она ведёт свой стек, и о
+   * чужом ни одна из библиотек не знает: один Escape при открытом меню внутри
+   * окна закрывал и меню, и окно — то есть уносил форму вместе с несохранённым.
+   * Нашла история «Menu внутри Dialog».
+   *
+   * Признаком СЛУЖИЛО положение цели события: «`data-rac` и вне окна». Для
+   * меню это работало, а для `Combobox` ВНУТРИ окна — нет: фокус стоит в
+   * `Input`, который лежит внутри контента, список — в портале, и второе
+   * условие было ложным. Escape закрывал окно вместо списка подсказок.
+   *
+   * С волны 26 чужой слой определяется наличием открытого оверлея RAC в
+   * документе, а не положением цели, и живёт это в `lib/overlay-layer.ts`
+   * вместе со стеком слоёв — ADR-0041.
+   */
+  const escapeBelongsToAriaLayer = () => hasOpenAriaOverlay();
+
+  /**
+   * Кто открыл окно — чтобы вернуть ему фокус при закрытии.
+   *
+   * Radix возвращает фокус на свой `Dialog.Trigger`, а его здесь нет: окна
+   * открываются из состояния приложения, а не из обёрнутой кнопки. Без этого
+   * фокус после закрытия уезжает на `<body>` — проверено и в витрине, и в
+   * приложении, — и пользователь клавиатуры начинает обход страницы заново.
+   *
+   * Запоминаем в `onOpenAutoFocus`: он срабатывает ДО того, как Radix уведёт
+   * фокус внутрь окна, то есть `activeElement` там ещё тот, кто открыл.
+   */
+  const { remember, restore } = useOpenerFocus(open, contentRef);
+  // Слой состоит в общем стеке — ADR-0041 обещает это для ВСЕХ модальных
+  // слоёв кита, а не только для подложки.
+  useOverlayLayer(open, contentRef);
+
+  return (
+    <DialogPrimitive.Root
+      open={open}
+      onOpenChange={(next) => {
+        if (!next && !loading) onClose();
+      }}
+    >
+      <Portal>
+        {/*
+          Окно лежит ВНУТРИ подложки, а не рядом с ней. Так высокое содержимое
+          прокручивается вместе с затемнением, а не вылезает за экран: подложка
+          здесь одновременно и скролл-контейнер, и центрирующий флекс.
+        */}
+        <DialogPrimitive.Overlay
+          className={cn(
+            "animate-fadein data-[state=closed]:animate-fadeout fixed inset-0 flex justify-center overflow-auto p-6",
+            zIndex,
+            align === "start" ? "items-start" : "items-center",
+            overlayClassName
+          )}
+          style={{
+            background: "var(--overlay-scrim)",
+            backdropFilter: "blur(4px)",
+            ...overlayStyle,
+          }}
+        >
+          <DialogPrimitive.Content
+            // Роль ставится после спреда самого Radix, поэтому переопределяет
+            // его `dialog` — отдельный примитив ради одного атрибута не нужен.
+            role={role}
+            /*
+              Описание — проп, а не «его не бывает».
+
+              Здесь стоял жёсткий `undefined` ради подавления предупреждения
+              Radix, и следствие было шире, чем задумано: ни одно окно кита не
+              могло иметь описания вовсе. Для `ConfirmDialog` это значило, что
+              сам вопрос — «Удалить 12 элементов безвозвратно?» — скринридеру не
+              читался: он объявлял имя окна и кнопку, на которую уехал фокус.
+              Для роли `alertdialog` APG требует описание прямо.
+
+              `undefined` остаётся умолчанием: окно без описания не должно
+              ссылаться в пустоту, и предупреждение Radix тогда по-прежнему
+              подавляется.
+            */
+            aria-describedby={describedBy}
+            onOpenAutoFocus={(e) => {
+              remember();
+              if (initialFocusRef) {
+                e.preventDefault();
+                initialFocusRef.current?.focus();
+              }
+            }}
+            onCloseAutoFocus={restore}
+            ref={contentRef}
+            onEscapeKeyDown={(event) => {
+              if (loading) {
+                event.preventDefault();
+                return;
+              }
+              if (escapeBelongsToAriaLayer()) {
+                event.preventDefault();
+                return;
+              }
+              onEscapeKeyDown?.(event);
+            }}
+            onPointerDownOutside={block}
+            onInteractOutside={block}
+            className={cn(
+              "animate-sheetin data-[state=closed]:animate-sheetout border-line bg-bg-1 rounded-lg border outline-none",
+              className
+            )}
+            style={{ boxShadow: "var(--modal-shadow)", ...contentStyle }}
+          >
+            {header ? (
+              <ModalHeader
+                // Заголовок рисует Radix: он же регистрирует его как имя окна,
+                // поэтому `aria-labelledby` проставляется без нашего участия.
+                titleComponent={DialogPrimitive.Title}
+                title={title}
+                subtitle={subtitle}
+                icon={icon}
+                onClose={loading ? undefined : onClose}
+                closeLabel={closeLabel}
+              />
+            ) : (
+              <DialogPrimitive.Title className="sr-only">{title}</DialogPrimitive.Title>
+            )}
+            {children}
+          </DialogPrimitive.Content>
+        </DialogPrimitive.Overlay>
+      </Portal>
+    </DialogPrimitive.Root>
+  );
+}