@multiplatform.one/table 6.6.0 → 7.0.0

package/src/components/DataTable/index.native.tsx

@@ -15,11 +15,11 @@ import {
 } from "@phosphor-icons/react";
 import { FlashList, type FlashListRef } from "@shopify/flash-list";
 import { AsyncBoundary, EmptyState, useDirection } from "@multiplatform.one/components";
-import { Button, Field, useFormField, zIndex } from "@multiplatform.one/forms";
+import { Button, Field, useFormField } from "@multiplatform.one/forms";
 import { flexRender } from "@tanstack/react-table";
 import { hairline, useResolvedKnobs } from "@multiplatform.one/theme";
 import React, { useRef, useMemo, useCallback } from "react";
-import { ScrollView, Spinner, Text, View, useMedia, withStaticProperties } from "tamagui";
+import { ScrollView, Text, View, useMedia, withStaticProperties } from "tamagui";
 import { useTranslation } from "react-i18next";
 import { useDataTable } from "../../hooks/useDataTable";
 import type { DataTableColumn, DataTableField } from "../../types";
@@ -37,6 +37,8 @@ import { DataTableGrouping } from "../DataTableGrouping";
 import { DataTableCell } from "../DataTableCell";
 import { Table } from "@multiplatform.one/table-primitives";
 import { DataTableContext } from "./DataTableContext";
+import { DataTableDocumentList } from "./DataTableDocumentList";
+import { tableRowStateProps } from "./rowStateChrome";
 import { DataTableStateContext } from "./DataTableStateContext";
 import type { DataTableStateContextValue } from "./DataTableStateContext";
 import type { DataTableRootProps } from "./DataTableRoot";
@@ -110,6 +112,8 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
   initialState,
   onStateChange,
   onRetry,
+  isLoading: isLoadingProp,
+  isFetching: isFetchingProp,
   syncWithUrl = false,
   urlDebounceMs = 500,
   urlStrategy,
@@ -163,9 +167,10 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
 }: DataTableRootProps<TData>) {
   const { t } = useTranslation();
   const { sm } = useMedia();
-  // Native keeps its certified card pattern; the `layout` prop only pins a
-  // mode ("table" forces the grid, "cards" forces cards, default auto = !sm).
-  const showCards = layout === "cards" || (layout === "auto" && !sm);
+  // Native: `list` is subject-led document rows (same as web). Cards stay
+  // the certified compact pattern; `table` pins the grid.
+  const showList = layout === "list";
+  const showCards = !showList && (layout === "cards" || (layout === "auto" && !sm));
   const { knobProps, disabledState } = useResolvedKnobs({
     intent: undefined,
     component: "DataTable",
@@ -210,6 +215,8 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     enableKeyboardNavigation: false,
     rowCount,
     pageCount,
+    isLoading: isLoadingProp,
+    isFetching: isFetchingProp,
   });
 
   const resolvedSize: "sm" | "md" | "lg" =
@@ -219,6 +226,17 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
 
   const headerGroups = table.getHeaderGroups();
   const tableRows = table.getRowModel().rows;
+  const heldRowsRef = useRef(tableRows);
+  if (tableRows.length > 0) {
+    heldRowsRef.current = tableRows;
+  }
+  const queryInFlight = Boolean(state.isFetching || state.isPlaceholderData || state.isLoading);
+  const displayRows =
+    tableRows.length > 0
+      ? tableRows
+      : queryInFlight && heldRowsRef.current.length > 0
+        ? heldRowsRef.current
+        : tableRows;
   const footerGroups = table.getFooterGroups();
 
   const flashListRef = useRef<FlashListRef<(typeof tableRows)[0]>>(null);
@@ -502,7 +520,11 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
   const renderRow = useCallback(
     (row: (typeof tableRows)[0], index: number) => (
       <Table.Row
-        backgroundColor={tableZebraOn && index % 2 === 1 ? "$color2" : "$color1"}
+        {...(tableRowStateProps({
+          selected: Boolean(row.getIsSelected?.()),
+          zebraOn: tableZebraOn,
+          index,
+        }) as any)}
         rowLocation="middle"
         key={`${row.id}-${index}`}
         aria-rowindex={index + 1}
@@ -622,6 +644,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
         onLoadView: actions.loadView,
         views: state.views,
         activeViewId: state.activeViewId,
+        isFetching: Boolean(state.isFetching),
       });
     }
     return (
@@ -636,6 +659,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
         enableViews={enableViews}
         enableGlobalSearch={enableGlobalSearch}
         enableFiltering={enableFiltering}
+        isFetching={Boolean(state.isFetching)}
       />
     );
   };
@@ -689,7 +713,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
           />
         );
       }
-      if (state.isLoading && tableRows.length === 0) {
+      if (state.isLoading && displayRows.length === 0 && !state.isFetching) {
         return <AsyncBoundary loading layout="table" aria-label={ariaLabel || "Data table"} />;
       }
 
@@ -703,6 +727,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
               aria-describedby={ariaDescribedBy}
               aria-live="polite"
               aria-atomic="false"
+              aria-busy={queryInFlight || undefined}
               {...knobProps.containerRadius}
               // UX-011 / Axiom 6 HONEST STATE: `disabled` makes the whole
               // assembly inert (pointerEvents none blocks every touch) and
@@ -737,20 +762,32 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
                 })),
               })}
 
-              {showCards ? (
+              {showList ? (
+                <DataTableDocumentList
+                  tableRows={displayRows}
+                  disabled={disabled}
+                  hasActiveFilters={computed.hasActiveFilters}
+                  renderCellContent={renderCellContent}
+                  compact={isCompact}
+                  queryInFlight={queryInFlight}
+                  {...(rowPressActive ? { getRowPressProps } : {})}
+                />
+              ) : showCards ? (
                 <View flexDirection="column" gap="$2">
-                  {tableRows.length === 0 ? (
-                    <EmptyState
-                      compact
-                      backgroundColor="$color1"
-                      borderRadius="$4"
-                      aria-live="polite"
-                      title={
-                        computed.hasActiveFilters ? t("No results found") : t("No data available")
-                      }
-                    />
+                  {displayRows.length === 0 ? (
+                    queryInFlight ? null : (
+                      <EmptyState
+                        compact
+                        backgroundColor="$color1"
+                        borderRadius="$4"
+                        aria-live="polite"
+                        title={
+                          computed.hasActiveFilters ? t("No results found") : t("No data available")
+                        }
+                      />
+                    )
                   ) : (
-                    tableRows.map((row, index) =>
+                    displayRows.map((row, index) =>
                       renderMobileCard(
                         row,
                         index,
@@ -898,32 +935,34 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
                       </Table.Head>
 
                       <Table.Body aria-label="Table data">
-                        {tableRows.length === 0 ? (
+                        {displayRows.length === 0 ? (
                           <Table.Row>
                             <Table.Cell>
-                              <EmptyState
-                                compact
-                                aria-live="polite"
-                                title={
-                                  computed.hasActiveFilters
-                                    ? t("No results found")
-                                    : t("No data available")
-                                }
-                              />
+                              {queryInFlight ? null : (
+                                <EmptyState
+                                  compact
+                                  aria-live="polite"
+                                  title={
+                                    computed.hasActiveFilters
+                                      ? t("No results found")
+                                      : t("No data available")
+                                  }
+                                />
+                              )}
                             </Table.Cell>
                           </Table.Row>
                         ) : isVirtualized ? (
                           <View style={{ height: virtualizationHeight }}>
                             <FlashList
                               ref={flashListRef}
-                              data={tableRows}
+                              data={displayRows}
                               drawDistance={rowHeightPx * virtualizationOverscan}
                               keyExtractor={(row) => row.id}
                               renderItem={({ item, index }) => renderRow(item, index)}
                             />
                           </View>
                         ) : (
-                          tableRows.map((row, index) => {
+                          displayRows.map((row, index) => {
                             const mainRow = renderRow(row, index);
                             const subRow =
                               enableRowExpansion &&
@@ -994,25 +1033,6 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
                   {renderPaginationComponent()}
                 </View>
               )}
-
-              {state.isLoading && (
-                <View
-                  position="absolute"
-                  top={0}
-                  left={0}
-                  right={0}
-                  bottom={0}
-                  alignItems="center"
-                  justifyContent="center"
-                  zIndex={zIndex.loading}
-                  aria-busy={true}
-                  aria-live="assertive"
-                  aria-label="Loading table data"
-                  role="status"
-                >
-                  <Spinner size="large" color="$color10" />
-                </View>
-              )}
             </View>
           </DataTableStateContext.Provider>
         </DataTableContext.Provider>
@@ -1057,6 +1077,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
       renderSubComponent,
       footerGroups,
       sm,
+      showList,
       showCards,
       renderPaginationComponent,
       showAddRow,
@@ -1068,6 +1089,11 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
       defaultRow,
       disabled,
       disabledState,
+      renderCellContent,
+      rowPressActive,
+      getRowPressProps,
+      displayRows,
+      queryInFlight,
       t,
     ],
   );

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

@@ -0,0 +1,137 @@
+/**
+ * keepPreviousData — a refetch must not blank the body.
+ *
+ * TanStack Query's placeholderData / keepPreviousData, AG Grid's delta
+ * row-data, and Frappe Desk's list all keep the last painted rows on
+ * screen while the next query is in flight. The only in-flight chrome
+ * allowed is a toolbar spinner (aria-busy). Skeleton, empty-state, and
+ * a covering overlay are first-load only.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import type { DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+
+type Person = { id: number; firstName: string; age: number };
+
+const sampleData: Person[] = [
+  { id: 1, firstName: "John", age: 28 },
+  { id: 2, firstName: "Jane", age: 32 },
+];
+
+const columns: DataTableColumn<Person>[] = [
+  { id: "firstName", accessorKey: "firstName", header: "First Name" },
+  { id: "age", accessorKey: "age", header: "Age" },
+];
+
+function renderTable(extra: Record<string, unknown> = {}, data: Person[] = sampleData) {
+  return renderWithProviders(
+    <DataTable
+      data={data}
+      columns={columns as DataTableColumn<Record<string, any>>[]}
+      layout="table"
+      enablePagination={false}
+      enableGlobalSearch={false}
+      enableFiltering={false}
+      onStateChange={vi.fn()}
+      {...extra}
+    />,
+  );
+}
+
+describe("DataTable keepPreviousData", () => {
+  it("keeps previous rows painted when isFetching arrives with empty data", () => {
+    const { rerender, getByText, queryByText } = renderTable({ isFetching: false });
+    expect(getByText("John")).toBeDefined();
+
+    rerender(
+      <DataTable
+        data={[]}
+        columns={columns as DataTableColumn<Record<string, any>>[]}
+        layout="table"
+        enablePagination={false}
+        enableGlobalSearch={false}
+        enableFiltering={false}
+        isFetching
+        onStateChange={vi.fn()}
+      />,
+    );
+
+    expect(getByText("John")).toBeDefined();
+    expect(getByText("Jane")).toBeDefined();
+    expect(queryByText("No data available")).toBeNull();
+    expect(queryByText("No results found")).toBeNull();
+  });
+
+  it("keeps previous rows in list layout while isFetching blanks the payload", () => {
+    const { rerender, getByText, queryByText, container } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={columns as DataTableColumn<Record<string, any>>[]}
+        layout="list"
+        enablePagination={false}
+        enableGlobalSearch={false}
+        enableFiltering={false}
+        onStateChange={vi.fn()}
+      />,
+    );
+    expect(container.querySelectorAll('[data-testid="data-table-list-row"]').length).toBe(2);
+
+    rerender(
+      <DataTable
+        data={[]}
+        columns={columns as DataTableColumn<Record<string, any>>[]}
+        layout="list"
+        enablePagination={false}
+        enableGlobalSearch={false}
+        enableFiltering={false}
+        isFetching
+        onStateChange={vi.fn()}
+      />,
+    );
+
+    expect(getByText("John")).toBeDefined();
+    expect(container.querySelectorAll('[data-testid="data-table-list-row"]').length).toBe(2);
+    expect(queryByText("No data available")).toBeNull();
+  });
+
+  it("does not cover existing rows with a loading overlay when isLoading is set", () => {
+    const { getByText, queryByLabelText } = renderTable({ isLoading: true });
+    expect(getByText("John")).toBeDefined();
+    expect(queryByLabelText("Loading table data")).toBeNull();
+  });
+
+  it("does not unmount rows for a skeleton when isLoading arrives after a first paint", () => {
+    const { rerender, getByText, queryByLabelText } = renderTable({ isLoading: false });
+    expect(getByText("John")).toBeDefined();
+
+    rerender(
+      <DataTable
+        data={sampleData}
+        columns={columns as DataTableColumn<Record<string, any>>[]}
+        layout="table"
+        enablePagination={false}
+        enableGlobalSearch={false}
+        enableFiltering={false}
+        isLoading
+        onStateChange={vi.fn()}
+      />,
+    );
+
+    expect(getByText("John")).toBeDefined();
+    expect(queryByLabelText("Loading table data")).toBeNull();
+  });
+
+  it("does not paint the true-empty copy while a first fetch is in flight", () => {
+    const { queryByText, container } = renderTable({ isFetching: true }, []);
+    expect(queryByText("No data available")).toBeNull();
+    expect(queryByText("No results found")).toBeNull();
+    expect(container.querySelector('[aria-busy="true"]')).not.toBeNull();
+  });
+
+  it("shows empty state only after the query settles with zero rows", () => {
+    const { getByText } = renderTable({ isFetching: false, isLoading: false }, []);
+    expect(getByText("No data available")).toBeDefined();
+  });
+});

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

@@ -0,0 +1,118 @@
+/**
+ * LC-71 RING-ANATOMY on table rows and cells.
+ *
+ * Two channels, never shared: selected = fill; keyboard focus = one inset
+ * ring on the perceived control (the row when the row is the tab stop, the
+ * cell when Excel-mode keyboard nav is on the cell). Unselected siblings
+ * carry neither a selection border nor a ring. Pointer-origin focus paints
+ * no ring.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+
+type Person = { id: number; firstName: string; age: number };
+
+const sampleData: Person[] = [
+  { id: 1, firstName: "Alice", age: 30 },
+  { id: 2, firstName: "Bob", age: 40 },
+  { id: 3, firstName: "Carol", age: 20 },
+];
+
+const columns: DataTableColumn<Person>[] = [
+  { id: "firstName", accessorKey: "firstName", header: "First Name" },
+  { id: "age", accessorKey: "age", header: "Age" },
+];
+
+function renderGrid(extra: Record<string, unknown> = {}) {
+  return renderWithProviders(
+    <DataTable
+      data={sampleData}
+      columns={columns as DataTableColumn<Record<string, any>>[]}
+      layout="table"
+      enablePagination={false}
+      enableGlobalSearch={false}
+      enableFiltering={false}
+      onStateChange={vi.fn()}
+      {...extra}
+    />,
+  );
+}
+
+describe("DataTable LC-71 row/cell rings", () => {
+  it("selected row is fill (data-row-selected), not a ring on every sibling", () => {
+    const { container } = renderGrid({ enableRowSelection: true });
+    fireEvent.click(screen.getByRole("checkbox", { name: "Select row Alice" }));
+
+    const selected = container.querySelectorAll('[data-row-selected="true"]');
+    const unselected = container.querySelectorAll('[data-row-selected="false"]');
+    expect(selected.length).toBe(1);
+    expect(unselected.length).toBe(2);
+    expect(selected[0]?.getAttribute("aria-selected")).toBe("true");
+    for (const row of unselected) {
+      expect(row.getAttribute("aria-selected")).not.toBe("true");
+      expect(row.getAttribute("data-row-keyboard-focus")).not.toBe("true");
+    }
+  });
+
+  it("keyboard-focused pressable row is the only ring (LC-71)", () => {
+    const { container } = renderGrid({ onRowPress: vi.fn() });
+    const rows = Array.from(container.querySelectorAll('[data-row-press="true"]')) as HTMLElement[];
+    expect(rows).toHaveLength(3);
+
+    rows[0].focus();
+    fireEvent.keyDown(rows[0], { key: "ArrowDown" });
+    expect(document.activeElement).toBe(rows[1]);
+
+    const focused = container.querySelectorAll('[data-row-keyboard-focus="true"]');
+    expect(focused.length).toBe(1);
+    expect(focused[0]).toBe(rows[1]);
+    expect(rows[0].getAttribute("data-row-keyboard-focus")).not.toBe("true");
+    expect(rows[2].getAttribute("data-row-keyboard-focus")).not.toBe("true");
+  });
+
+  it("Excel-mode keyboard nav rings exactly one cell, never every cell", () => {
+    const { container } = renderGrid({ enableKeyboardNavigation: true });
+    const grid = container.querySelector('[data-table-grid="true"]') as HTMLElement;
+    expect(grid).not.toBeNull();
+
+    fireEvent.keyDown(grid, { key: "ArrowDown" });
+    const focusedCells = container.querySelectorAll('[data-cell-keyboard-focus="true"]');
+    expect(focusedCells.length).toBe(1);
+
+    fireEvent.keyDown(grid, { key: "ArrowRight" });
+    const after = container.querySelectorAll('[data-cell-keyboard-focus="true"]');
+    expect(after.length).toBe(1);
+    expect(after[0]).not.toBe(focusedCells[0]);
+
+    const focusedRows = container.querySelectorAll('[data-row-keyboard-focus="true"]');
+    expect(focusedRows.length).toBe(0);
+  });
+
+  it("list layout selected row uses the same fill channel", () => {
+    const { container } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={columns as DataTableColumn<Record<string, any>>[]}
+        layout="list"
+        enableRowSelection
+        enablePagination={false}
+        enableGlobalSearch={false}
+        enableFiltering={false}
+        onStateChange={vi.fn()}
+      />,
+    );
+    fireEvent.click(screen.getByRole("checkbox", { name: "Select row Alice" }));
+    const selected = container.querySelectorAll(
+      '[data-testid="data-table-list-row"][data-row-selected="true"]',
+    );
+    expect(selected.length).toBe(1);
+    expect(
+      container.querySelectorAll('[data-testid="data-table-list-row"][data-row-selected="false"]')
+        .length,
+    ).toBe(2);
+  });
+});

package/src/components/DataTable/rowStateChrome.ts

@@ -0,0 +1,38 @@
+/**
+ * LC-71 RING-ANATOMY for table rows and cells.
+ *
+ * Two channels, never shared: selected = fill; keyboard focus = one inset
+ * ring on the perceived control (the row when the row is the tab stop, the
+ * cell when Excel-mode keyboard nav is on the cell).
+ */
+
+import { ensureFocusVisibleRing, keyboardFocusRingProps } from "@multiplatform.one/theme";
+
+export const tableRowFocusVisibleStyle = ensureFocusVisibleRing({ outlineOffset: -2 });
+
+export function tableRowStateProps(opts: {
+  selected?: boolean;
+  keyboardFocused?: boolean;
+  zebraOn?: boolean;
+  index?: number;
+}): Record<string, unknown> {
+  const selected = Boolean(opts.selected);
+  const keyboardFocused = Boolean(opts.keyboardFocused);
+  const zebra = Boolean(opts.zebraOn) && (opts.index ?? 0) % 2 === 1;
+  const rest = zebra ? "$color2" : "$color1";
+  return {
+    backgroundColor: selected ? "$color4" : rest,
+    hoverStyle: { backgroundColor: selected ? "$color4" : "$color3" },
+    ...(keyboardFocused ? keyboardFocusRingProps : {}),
+    "aria-selected": selected ? true : undefined,
+    "data-row-selected": selected ? "true" : "false",
+    "data-row-keyboard-focus": keyboardFocused ? "true" : "false",
+  };
+}
+
+export function tableCellKeyboardProps(focused: boolean): Record<string, unknown> {
+  return {
+    ...(focused ? keyboardFocusRingProps : {}),
+    "data-cell-keyboard-focus": focused ? "true" : "false",
+  };
+}

package/src/components/DataTableCell/CellModalEditor.native.tsx

@@ -33,6 +33,7 @@ export function CellModalEditor({
   onCommit,
   children,
   title,
+  label,
 }: CellModalEditorProps) {
   const { knobProps } = useResolvedKnobs();
   const [open, setOpen] = useState(false);
@@ -95,6 +96,9 @@ export function CellModalEditor({
           paddingHorizontal="$1"
           paddingVertical="$1"
           borderRadius="$2"
+          {...(label
+            ? { accessibilityLabel: label, accessibilityRole: "button" as const }
+            : undefined)}
         >
           <FieldDisplay field={field} value={value} fieldProps={fieldProps} />
         </View>

package/src/components/DataTableCell/CellModalEditor.tsx

@@ -17,7 +17,7 @@ import { FieldDisplay, type FieldDisplayType } from "@multiplatform.one/forms";
 import { TableCellContext } from "@multiplatform.one/table-primitives";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useCallback, useRef, useState, type ReactNode } from "react";
-import { Button, Dialog, Text, View, XStack, YStack } from "tamagui";
+import { Button, Dialog, Text, View, XStack, YStack, isWeb } from "tamagui";
 import { t } from "../../shared/t";
 
 export interface CellModalEditorProps {
@@ -36,6 +36,11 @@ export interface CellModalEditorProps {
   children: (draftValue: any, onDraftChange: (value: any) => void) => ReactNode;
   /** Title shown in the modal header. */
   title?: string;
+  /**
+   * Accessible name for the chromeless cell trigger (column header).
+   * Chromeless faces have no field label, so the trigger announces this.
+   */
+  label?: string;
 }
 
 export function CellModalEditor({
@@ -47,6 +52,7 @@ export function CellModalEditor({
   onCommit,
   children,
   title,
+  label,
 }: CellModalEditorProps) {
   const { knobProps } = useResolvedKnobs();
   const [open, setOpen] = useState(false);
@@ -101,11 +107,20 @@ export function CellModalEditor({
     setDraft(draftRef.current);
   }, []);
 
+  const triggerLocked = disabled || readOnly;
+  const handleTriggerKeyDown = (event: { key?: string; preventDefault?: () => void }) => {
+    if (triggerLocked) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault?.();
+      handleOpen();
+    }
+  };
+
   return (
     <>
       <View
         onPress={handleOpen}
-        cursor={disabled || readOnly ? "default" : "pointer"}
+        cursor={triggerLocked ? "default" : "pointer"}
         opacity={disabled ? 0.5 : 1}
         flexDirection="row"
         alignItems="center"
@@ -113,7 +128,20 @@ export function CellModalEditor({
         paddingHorizontal="$1"
         paddingVertical="$1"
         borderRadius="$2"
-        hoverStyle={!disabled && !readOnly ? { backgroundColor: "$backgroundHover" } : undefined}
+        hoverStyle={!triggerLocked ? { backgroundColor: "$backgroundHover" } : undefined}
+        // LC-71: parent CellWrapper paints the one ring on the cell boundary.
+        outlineWidth={0}
+        focusVisibleStyle={{ outlineWidth: 0 }}
+        {...(isWeb && !triggerLocked
+          ? {
+              role: "button" as const,
+              tabIndex: 0,
+              "aria-label": label,
+              "aria-haspopup": "dialog" as const,
+              "aria-expanded": open,
+              onKeyDown: handleTriggerKeyDown,
+            }
+          : undefined)}
       >
         <FieldDisplay field={field} value={value} fieldProps={fieldProps} />
       </View>