@multiplatform.one/table 7.28.1 → 7.29.1

package/src/components/DataTable/nativeRoot.spec.tsx

@@ -0,0 +1,180 @@
+/**
+ * The native root honours the props the web root does (MPO-454).
+ *
+ * index.native.tsx handed useDataTable a subset of the web root's options
+ * and never drew a bulk bar, so on iOS the backoffice list (infinite server
+ * mode, rows only through `loadPage`) showed "No data available", and
+ * checked rows offered no Export CSV. These specs render the native root
+ * itself: the suite runs on web, so `react-native` resolves to
+ * react-native-web and FlashList, which the list layout never mounts, is
+ * stubbed.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { BulkAction, DataTableColumn, PageLoadQuery, PageLoadResult } from "../../types";
+import { DataTable } from "./index.native";
+
+vi.mock("@shopify/flash-list", () => ({ FlashList: () => null }));
+
+type Row = { id: number; name: string };
+
+const rows: Row[] = Array.from({ length: 50 }, (_, i) => ({ id: i + 1, name: `Row ${i + 1}` }));
+
+const columns: DataTableColumn<Row>[] = [
+  { accessorKey: "name", header: "Name", meta: { role: "title" } },
+  { accessorKey: "id", header: "ID" },
+];
+
+function pageLoader() {
+  return vi.fn(async (q: PageLoadQuery): Promise<PageLoadResult<Row>> => {
+    const start = q.pageIndex * q.pageSize;
+    return { rows: rows.slice(start, start + q.pageSize), totalCount: rows.length };
+  });
+}
+
+function renderInfinite(loadPage: ReturnType<typeof pageLoader>) {
+  return renderWithProviders(
+    <DataTable
+      data={[]}
+      columns={columns}
+      layout="list"
+      readOnly
+      paginationMode="infinite"
+      loadPage={loadPage}
+      initialState={{ pagination: { pageIndex: 0, pageSize: 10 } }}
+    />,
+  );
+}
+
+/** Where the tail sentinel reports itself on screen, via measureInWindow. */
+function placeSentinel(top: number) {
+  const real = HTMLElement.prototype.getBoundingClientRect;
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+    function (this: HTMLElement) {
+      if (this.getAttribute("data-testid") !== "infinite-sentinel") return real.call(this);
+      return {
+        x: 0,
+        y: top,
+        top,
+        left: 0,
+        right: 320,
+        bottom: top + 1,
+        width: 320,
+        height: 1,
+      } as DOMRect;
+    },
+  );
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("native DataTable infinite mode", () => {
+  it("renders page 0 from loadPage instead of the empty state", async () => {
+    const loadPage = pageLoader();
+    renderInfinite(loadPage);
+    expect(await screen.findByText("Row 1")).toBeDefined();
+    expect(screen.getByText("Row 10")).toBeDefined();
+    expect(screen.queryByText("Row 11")).toBeNull();
+    expect(screen.queryByText("No data available")).toBeNull();
+    expect(loadPage.mock.calls[0]![0].pageIndex).toBe(0);
+    expect(screen.getByTestId("infinite-status").textContent).toContain("50");
+    expect(screen.queryByLabelText("Go to next page")).toBeNull();
+  });
+
+  it("appends the next page once the tail sentinel comes on screen", async () => {
+    placeSentinel(200);
+    const loadPage = pageLoader();
+    renderInfinite(loadPage);
+    expect(await screen.findByText("Row 11", undefined, { timeout: 3000 })).toBeDefined();
+    expect(screen.getByText("Row 20")).toBeDefined();
+  });
+
+  it("holds the next page while the tail sentinel is below the fold", async () => {
+    placeSentinel(100_000);
+    const loadPage = pageLoader();
+    renderInfinite(loadPage);
+    expect(await screen.findByText("Row 10")).toBeDefined();
+    await waitFor(() => expect(loadPage.mock.calls.map(([q]) => q.pageIndex)).toEqual([0, 1]));
+    await new Promise((settle) => setTimeout(settle, 800));
+    expect(screen.queryByText("Row 11")).toBeNull();
+  });
+});
+
+describe("native DataTable bulk actions", () => {
+  it("checking rows shows the bulk bar, and an action receives the checked rows", async () => {
+    const exportCsv = vi.fn();
+    const bulkActions: BulkAction<Row>[] = [
+      { id: "assign", label: "Assign To", onExecute: vi.fn() },
+      { id: "export", label: "Export CSV", onExecute: exportCsv },
+    ];
+    renderWithProviders(
+      <DataTable
+        data={rows.slice(0, 3)}
+        columns={columns}
+        layout="list"
+        readOnly
+        enablePagination={false}
+        enableRowSelection
+        bulkActions={bulkActions}
+      />,
+    );
+    expect(screen.queryByText("Export CSV")).toBeNull();
+
+    fireEvent.click(screen.getByRole("checkbox", { name: "Select row Row 1" }));
+    fireEvent.click(screen.getByRole("checkbox", { name: "Select row Row 3" }));
+
+    expect(await screen.findByText("2 selected")).toBeDefined();
+    expect(screen.getByRole("button", { name: "Assign To" })).toBeDefined();
+    fireEvent.click(screen.getByRole("button", { name: "Export CSV" }));
+    await waitFor(() => expect(exportCsv).toHaveBeenCalledTimes(1));
+    expect(exportCsv.mock.calls[0]![0].map((row: Row) => row.name)).toEqual(["Row 1", "Row 3"]);
+  });
+});
+
+describe("native DataTable root parity with web", () => {
+  const read = (file: string) => readFileSync(resolve(__dirname, file), "utf-8");
+
+  /** Option names a root hands useDataTable. */
+  function useDataTableOptions(source: string): Set<string> {
+    const start = source.indexOf("useDataTable({");
+    const body = source.slice(start, source.indexOf("});", start));
+    return new Set([...body.matchAll(/^\s*([A-Za-z]+)\s*[,:]/gm)].map((match) => match[1]!));
+  }
+
+  /** Prop names every `<Component ... />` call site in a root passes. */
+  function propNames(source: string, component: string): Set<string> {
+    const names = new Set<string>();
+    for (const site of source.split(`<${component}`).slice(1)) {
+      // Stop at the element's end or at a nested element, whichever is first.
+      const end = site.search(/\/>|</);
+      const element = end === -1 ? site : site.slice(0, end);
+      for (const match of element.matchAll(/(?:^|\s)([A-Za-z][A-Za-z0-9]*)=[{"]/g)) {
+        names.add(match[1]!);
+      }
+    }
+    return names;
+  }
+
+  it("hands useDataTable every option the web root does", () => {
+    const web = useDataTableOptions(read("DataTableRoot.tsx"));
+    const native = useDataTableOptions(read("index.native.tsx"));
+    expect(web.size).toBeGreaterThan(0);
+    expect([...web].filter((option) => !native.has(option)).sort()).toEqual([]);
+  });
+
+  it.each(["DataTableBulkActions", "DataTableInfiniteTail"])(
+    "renders %s with every prop web passes",
+    (component) => {
+      const web = propNames(read("DataTableRoot.tsx"), component);
+      const native = propNames(read("index.native.tsx"), component);
+      expect(web.size).toBeGreaterThan(0);
+      expect([...web].filter((prop) => !native.has(prop)).sort()).toEqual([]);
+    },
+  );
+});

package/src/components/DataTableBulkActions/index.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, zIndex } from "@multiplatform.one/forms";
 import { ConfirmDialog, DropdownMenu } from "@multiplatform.one/components";
-import { Text, View, XStack } from "tamagui";
+import { Text, View, XStack, isWeb, useMedia } from "tamagui";
 import type { BulkAction } from "../../types";
 import { iconSizeForToken } from "../../utils/chromeIcons";
 import { withInterp } from "../../utils/withInterp";
@@ -53,6 +53,10 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
   // on-fill foreground) measured 1.88:1 as dark-scheme page text.
   const countColor = useAccentOnSurface();
   const placement = placementProp ?? (knobProps.bulkBarPlacement === "bottom" ? "bottom" : "top");
+  // Below $sm the actions do not fit one row beside the count and Clear:
+  // the count and Clear share the first line and the actions wrap beneath.
+  const { sm } = useMedia();
+  const stacked = !sm;
 
   // DG-TBL-03 scope switch: with page scope, once the visible page is fully
   // selected offer expanding the selection to every matching (filtered) row.
@@ -121,88 +125,113 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
     return null;
   }
 
+  const summary = (
+    <>
+      {showSelectionCount && (
+        <Text {...knobProps.label} fontWeight="400" color={countColor}>
+          {/* D-15: one whole-sentence key per variant (never concatenated
+              fragments — word order is locale-owned); withInterp fills the
+              params when no i18n instance is mounted (house table pattern). */}
+          {filteredOutCount > 0
+            ? withInterp(
+                t("{{n}} selected (+{{hidden}} filtered out)", {
+                  n: selectedItems.length,
+                  hidden: filteredOutCount,
+                }),
+                { n: selectedItems.length, hidden: filteredOutCount },
+              )
+            : withInterp(t("{{n}} selected", { n: selectedItems.length }), {
+                n: selectedItems.length,
+              })}
+        </Text>
+      )}
+
+      {showSelectAllMatching && (
+        <Button
+          size={knobProps.sizeToken}
+          onPress={() => ctx?.table.toggleAllRowsSelected(true)}
+          aria-label={`Select all ${matchingCount} matching rows`}
+          {...knobProps.borderRadius}
+        >
+          {`Select all ${matchingCount}`}
+        </Button>
+      )}
+    </>
+  );
+
+  const clearButton = (
+    <Button
+      size={knobProps.sizeToken}
+      onPress={onClearSelection}
+      aria-label="Clear selection"
+      {...knobProps.borderRadius}
+    >
+      Clear
+    </Button>
+  );
+
+  const actionGroup = (
+    <XStack {...knobProps.gap} flexWrap="wrap" {...(stacked ? {} : { flex: 1 })}>
+      {visibleActions.map((action) => (
+        <Button
+          key={action.id}
+          size={knobProps.sizeToken}
+          error={action.variant === "destructive"}
+          disabled={action.disabled}
+          // DG-ST-03: reason renders via the Button explain affordance;
+          // executing is derived busy state (spinner), not a bare disable.
+          disabledReason={action.disabledReason}
+          loading={isExecuting === action.id}
+          onPress={() => handleExecuteAction(action)}
+          {...knobProps.borderRadius}
+        >
+          {action.label}
+        </Button>
+      ))}
+
+      {overflowActions.length > 0 && (
+        <BulkActionsOverflowMenu
+          actions={overflowActions}
+          selectedItems={selectedItems}
+          onExecuteAction={handleExecuteAction}
+          isExecuting={isExecuting}
+        />
+      )}
+    </XStack>
+  );
+
   return (
     <>
       <View
-        flexDirection="row"
-        alignItems="center"
+        flexDirection={stacked ? "column" : "row"}
+        alignItems={stacked ? "stretch" : "center"}
         {...knobProps.borderRadius}
         {...knobProps.panelPadding}
         gap="$3"
         backgroundColor="$color2"
         borderColor="$color6"
-        position="sticky"
-        top={placement === "top" ? 0 : undefined}
-        bottom={placement === "bottom" ? 0 : undefined}
+        // Tamagui turns "sticky" into "absolute" on native, which floats the
+        // bar over the first rows; native keeps it in flow instead.
+        {...(isWeb
+          ? {
+              position: "sticky" as const,
+              top: placement === "top" ? 0 : undefined,
+              bottom: placement === "bottom" ? 0 : undefined,
+            }
+          : {})}
         zIndex={zIndex.stickyHeader}
         data-bulk-bar-placement={placement}
       >
-        {showSelectionCount && (
-          <Text {...knobProps.label} fontWeight="400" color={countColor}>
-            {/* D-15: one whole-sentence key per variant (never concatenated
-                fragments — word order is locale-owned); withInterp fills the
-                params when no i18n instance is mounted (house table pattern). */}
-            {filteredOutCount > 0
-              ? withInterp(
-                  t("{{n}} selected (+{{hidden}} filtered out)", {
-                    n: selectedItems.length,
-                    hidden: filteredOutCount,
-                  }),
-                  { n: selectedItems.length, hidden: filteredOutCount },
-                )
-              : withInterp(t("{{n}} selected", { n: selectedItems.length }), {
-                  n: selectedItems.length,
-                })}
-          </Text>
-        )}
-
-        {showSelectAllMatching && (
-          <Button
-            size={knobProps.sizeToken}
-            onPress={() => ctx?.table.toggleAllRowsSelected(true)}
-            aria-label={`Select all ${matchingCount} matching rows`}
-            {...knobProps.borderRadius}
-          >
-            {`Select all ${matchingCount}`}
-          </Button>
+        {stacked ? (
+          <XStack alignItems="center" justifyContent="space-between" gap="$3">
+            {summary}
+            {clearButton}
+          </XStack>
+        ) : (
+          summary
         )}
-
-        <XStack {...knobProps.gap} flex={1}>
-          {visibleActions.map((action) => (
-            <Button
-              key={action.id}
-              size={knobProps.sizeToken}
-              error={action.variant === "destructive"}
-              disabled={action.disabled}
-              // DG-ST-03: reason renders via the Button explain affordance;
-              // executing is derived busy state (spinner), not a bare disable.
-              disabledReason={action.disabledReason}
-              loading={isExecuting === action.id}
-              onPress={() => handleExecuteAction(action)}
-              {...knobProps.borderRadius}
-            >
-              {action.label}
-            </Button>
-          ))}
-
-          {overflowActions.length > 0 && (
-            <BulkActionsOverflowMenu
-              actions={overflowActions}
-              selectedItems={selectedItems}
-              onExecuteAction={handleExecuteAction}
-              isExecuting={isExecuting}
-            />
-          )}
-        </XStack>
-
-        <Button
-          size={knobProps.sizeToken}
-          onPress={onClearSelection}
-          aria-label="Clear selection"
-          {...knobProps.borderRadius}
-        >
-          Clear
-        </Button>
+        {actionGroup}
+        {stacked ? null : clearButton}
       </View>
 
       {/* LC-16: confirm routes through the canonical DestructiveAction→ConfirmDialog

package/src/components/DataTableCell/index.tsx

@@ -52,9 +52,10 @@ import { CellModalEditor } from "./CellModalEditor";
 import { CellOptionsEditor } from "./CellOptionsEditor";
 import { Star } from "@phosphor-icons/react";
 import { RichTextEditor } from "@multiplatform.one/rich-text";
+import { Text } from "@multiplatform.one/components";
 import { useResolvedKnobs, ensureCompositeFocusRing } from "@multiplatform.one/theme";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Text, View, isWeb } from "tamagui";
+import { View, isWeb } from "tamagui";
 import type { DataTableFieldProps, DataTableField } from "../../types";
 import { alignToFlex, getDefaultColumnAlign } from "../../utils/columnAlign";
 import { formatMoney } from "../../utils/money";
@@ -191,7 +192,7 @@ export function DataTableCell({
       typeof rowCurrency === "string" && rowCurrency ? rowCurrency : currency;
     return (
       <CellWrapper justify={cellJustify}>
-        <Text numberOfLines={1} aria-label={cellName}>
+        <Text numberOfLines={1} aria-label={cellName} fontSize={knobProps.label.fontSize}>
           {formatMoney(value, resolvedCurrency, locale)}
         </Text>
       </CellWrapper>

package/src/components/DataTableDateFilter/index.tsx

@@ -9,16 +9,8 @@ import {
 import { formatAbsoluteDate, parseCalendarDate, useResolvedKnobs } from "@multiplatform.one/theme";
 import React, { useState, useMemo } from "react";
 import { Button, DatePicker, FloatingPanel } from "@multiplatform.one/forms";
-import {
-  ScrollView,
-  Separator,
-  Text,
-  View,
-  XStack,
-  YStack,
-  getTokens,
-  getVariableValue,
-} from "tamagui";
+import { Separator, Text, View, XStack, YStack, getTokens, getVariableValue } from "tamagui";
+import { ScrollView } from "@multiplatform.one/components";
 import { t } from "../../shared/t";
 import { iconSizeForToken } from "../../utils/chromeIcons";
 

package/src/components/DataTableExport/index.tsx

@@ -9,7 +9,8 @@ import { downloadBlob } from "@multiplatform.one/platform";
 import { formatCalendarDate, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useState } from "react";
 import { Button, Checkbox, FloatingPanel, Input } from "@multiplatform.one/forms";
-import { ScrollView, Separator, Text, XStack, YStack, isWeb } from "tamagui";
+import { Separator, Text, XStack, YStack, isWeb } from "tamagui";
+import { ScrollView } from "@multiplatform.one/components";
 import type { DataTableField } from "../../types";
 import { iconSizeForToken } from "../../utils/chromeIcons";
 import { getViewLeafRows } from "../../utils/viewData";

package/src/components/DataTableFilters/DataTableFilters.stories.tsx

@@ -1,3 +1,4 @@
+import { Card } from "@multiplatform.one/components";
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { Text, View, YStack } from "tamagui";
@@ -331,18 +332,12 @@ export const InteractiveDemo: Story = {
             onClearFilters={handleClearFilters}
           />
 
-          <View
-            style={{
-              padding: "16px",
-              background: "#f5f5f5",
-              borderRadius: "4px",
-            }}
-          >
+          <Card>
             <Text fontSize="$4" fontWeight="bold">
               Current Filters:
             </Text>
             <pre style={{ fontSize: "12px", margin: 0 }}>{JSON.stringify(filters, null, 2)}</pre>
-          </View>
+          </Card>
         </YStack>
       );
     };
@@ -417,16 +412,9 @@ export const Accessibility: Story = {
     filters: sampleFilters,
   },
   render: (args) => (
-    <View>
+    <YStack gap="$4">
       <DataTableFilters {...args} />
-      <View
-        style={{
-          marginTop: "20px",
-          padding: "16px",
-          background: "#f8f9fa",
-          borderRadius: "4px",
-        }}
-      >
+      <Card>
         <Text fontSize="$4" fontWeight="bold">
           Accessibility Features:
         </Text>
@@ -437,8 +425,8 @@ export const Accessibility: Story = {
           <li>Focus management between filter controls</li>
           <li>Proper semantic markup for filter badges</li>
         </ul>
-      </View>
-    </View>
+      </Card>
+    </YStack>
   ),
 };
 

package/src/components/DataTableGrouping/index.tsx

@@ -434,7 +434,7 @@ function GroupHeader<T = any>({
           <Text {...knobProps.label} fontWeight="400" numberOfLines={1}>
             {label}
           </Text>
-          <Text fontSize={metaSize} color="$color10">
+          <Text fontSize={metaSize} color="$color11">
             ({countLabel})
           </Text>
         </XStack>
@@ -443,7 +443,7 @@ function GroupHeader<T = any>({
           <XStack gap="$3" flexWrap="wrap" justifyContent="flex-end">
             {aggregations.map((agg, index) => (
               <XStack key={index} alignItems="baseline" gap="$1">
-                <Text fontSize={metaSize} color="$color10">
+                <Text fontSize={metaSize} color="$color11">
                   {`${agg.label || `${agg.function}(${agg.column})`}:`}
                 </Text>
                 <Text {...knobProps.label} fontWeight="400">

package/src/components/DataTablePagination/DataTablePagination.stories.tsx

@@ -1,3 +1,4 @@
+import { Card } from "@multiplatform.one/components";
 import { action } from "@multiplatform.one/storybook";
 import type { GuardrailSpecimenParameter } from "@multiplatform.one/theme";
 import { Preset } from "@multiplatform.one/theme";
@@ -283,14 +284,7 @@ export const NavigationDemo: Story = {
             onPaginationChange={handlePaginationChange}
           />
 
-          <View
-            gap="$2"
-            style={{
-              padding: "16px",
-              background: "#e8f4fd",
-              borderRadius: "4px",
-            }}
-          >
+          <Card>
             <Text fontSize="$5" fontWeight="600">
               Navigation Controls:
             </Text>
@@ -344,7 +338,7 @@ export const NavigationDemo: Story = {
                 Last
               </Button>
             </XStack>
-          </View>
+          </Card>
         </YStack>
       );
     };
@@ -377,14 +371,7 @@ export const PageSizeDemo: Story = {
             onPaginationChange={handlePaginationChange}
           />
 
-          <View
-            gap="$2"
-            style={{
-              padding: "16px",
-              background: "#f0f9ff",
-              borderRadius: "4px",
-            }}
-          >
+          <Card>
             <Text fontSize="$5" fontWeight="600">
               Page Size Options:
             </Text>
@@ -394,20 +381,13 @@ export const PageSizeDemo: Story = {
                   key={size}
                   onPress={() => handlePaginationChange({ pageIndex: 0, pageSize: size })}
                   size="$2"
-                  {...({
-                    padding: "$1",
-                    backgroundColor: pagination.pageSize === size ? "$blue10" : "$gray2",
-                    color: pagination.pageSize === size ? "white" : "$gray12",
-                    borderWidth: 1,
-                    borderColor: "$gray6",
-                    borderRadius: "$2",
-                  } as any)}
+                  accent={pagination.pageSize === size}
                 >
                   {size}
                 </Button>
               ))}
             </XStack>
-          </View>
+          </Card>
         </YStack>
       );
     };
@@ -454,14 +434,7 @@ export const PageJumpDemo: Story = {
             onPaginationChange={handlePaginationChange}
           />
 
-          <View
-            gap="$2"
-            style={{
-              padding: "16px",
-              background: "#fff3cd",
-              borderRadius: "4px",
-            }}
-          >
+          <Card>
             <Text fontSize="$5" fontWeight="600">
               Page Jump:
             </Text>
@@ -483,7 +456,7 @@ export const PageJumpDemo: Story = {
                 Go
               </Button>
             </XStack>
-          </View>
+          </Card>
         </YStack>
       );
     };
@@ -508,16 +481,9 @@ export const Accessibility: Story = {
     ...Basic.args,
   },
   render: (args) => (
-    <View>
+    <YStack gap="$4">
       <DataTablePagination {...args} />
-      <View
-        style={{
-          marginTop: "20px",
-          padding: "16px",
-          background: "#f8f9fa",
-          borderRadius: "4px",
-        }}
-      >
+      <Card>
         <Text fontSize="$5" fontWeight="600">
           Accessibility Features:
         </Text>
@@ -529,8 +495,8 @@ export const Accessibility: Story = {
           <Text>• Focus management between controls</Text>
           <Text>• Proper semantic markup for pagination info</Text>
         </YStack>
-      </View>
-    </View>
+      </Card>
+    </YStack>
   ),
 };
 

package/src/components/DataTableViewOptions/index.tsx

@@ -8,8 +8,8 @@ import {
 import { getGroupPosition, stackRadiusProps, useResolvedKnobs } from "@multiplatform.one/theme";
 import React, { useState } from "react";
 import { Button, FloatingPanel, Input, Slider, Switch } from "@multiplatform.one/forms";
-import { DropdownMenu } from "@multiplatform.one/components";
-import { ScrollView, Separator, Text, View, XStack, YStack, useTheme } from "tamagui";
+import { DropdownMenu, ScrollView } from "@multiplatform.one/components";
+import { Separator, Text, View, XStack, YStack, useTheme } from "tamagui";
 import type { TableView } from "../../types";
 import { t } from "../../shared/t";
 import { iconSizeForToken } from "../../utils/chromeIcons";

package/src/components/KnobDialog.tsx

@@ -6,6 +6,7 @@
  * borderRadius, elevation, and sizing across the table package.
  */
 
+import { DialogShowFocus } from "@multiplatform.one/components";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import type React from "react";
 import { Dialog } from "tamagui";
@@ -62,6 +63,7 @@ export function KnobDialogContent({ children, minWidth }: KnobDialogContentProps
         {...(minWidth ? { minWidth } : {})}
       >
         {children}
+        <DialogShowFocus />
       </Dialog.Content>
     </Dialog.Portal>
   );