@terpjs/react-core 0.7.0 → 0.9.0

package/src/dataview/DataView.tsx

@@ -17,6 +17,7 @@ import { DataViewTextProvider, useDataViewText } from "./internal";
 import type {
   DataViewBatchAction,
   DataViewColumn,
+  DataViewDensity,
   DataViewQuery,
   DataViewRepository,
   DataViewRowAction,
@@ -39,6 +40,21 @@ interface DataViewBaseProps<T> {
   columns: DataViewColumn<T>[];
   /** "embedded" renders a plain compact view: no view toggle, no page-size selector, no footer. */
   variant?: "full" | "embedded";
+  /**
+   * How tightly this view packs its cells and controls (default `"comfortable"`).
+   *
+   * `"compact"` stamps `data-density="compact"` on the root, which re-scopes the live
+   * density tokens for the whole subtree — cell padding here, and the control heights
+   * `Button`, `Input` and `Select` already read, so the toolbar tightens with the table.
+   *
+   * `"comfortable"` stamps NO attribute, because comfortable IS the token sheet's
+   * `:root` value and an attribute for it would match no rule. The consequence worth
+   * knowing: inside an already-compact subtree, `density="comfortable"` does not make
+   * this view comfortable again. Expressing that needs a named comfortable copy of
+   * each live token, which ADR 0094 defers until something asks — nothing can ask
+   * until the shell takes a density of its own.
+   */
+  density?: DataViewDensity;
   enableSelection?: boolean;
   batchActions?: DataViewBatchAction<T>[];
   rowActions?: (row: T) => DataViewRowAction<T>[];
@@ -130,6 +146,13 @@ function useIsMobile(): boolean {
 function DataViewInner<T>(props: DataViewProps<T>) {
   const { strings, resolve } = useDataViewText();
   const embedded = props.variant === "embedded";
+  // Only the compact value is expressible as an attribute; see the prop's doc comment.
+  const densityAttribute = props.density === "compact" ? "compact" : undefined;
+  // Hoisted rather than written inline at the two roots, which is what the density
+  // attribute above already does and what keeps the marker scanner out of a trap: it
+  // reads a whole expression container, so every string literal inside one counts as a
+  // marker name and a conditional written at the attribute would report phantoms.
+  const variantAttribute = embedded ? "embedded" : "full";
   const serverSide = props.repository.capabilities.serverSide;
   const initialPageSize = embedded
     ? EMBEDDED_PAGE_SIZE
@@ -296,7 +319,7 @@ function DataViewInner<T>(props: DataViewProps<T>) {
       return props.renderError !== undefined ? (
         <>{props.renderError(error)}</>
       ) : (
-        <div style={{ padding: "var(--space-4)" }}>
+        <div data-terp="dataview-error">
           <ErrorState title={strings.errorTitle} error={error} />
         </div>
       );
@@ -325,7 +348,7 @@ function DataViewInner<T>(props: DataViewProps<T>) {
       );
     }
     return (
-      <div style={{ overflowX: "auto" }}>
+      <div data-terp="dataview-scroll">
         <DataViewTable
           rows={rows}
           columns={state.visibleColumns}
@@ -366,7 +389,7 @@ function DataViewInner<T>(props: DataViewProps<T>) {
       props.toolbarContent !== undefined ||
       props.toolbarTrailing !== undefined;
     return (
-      <div data-terp="dataview" style={{ display: "grid" }}>
+      <div data-terp="dataview" data-variant={variantAttribute} data-density={densityAttribute}>
         {showsEmbeddedToolbar && (
           <DataViewToolbar<T>
             searchEnabled={props.repository.capabilities.search}
@@ -401,15 +424,7 @@ function DataViewInner<T>(props: DataViewProps<T>) {
   }
 
   return (
-    <div
-      data-terp="dataview"
-      style={{
-        display: "grid",
-        background: "var(--color-neutral-0)",
-        border: "1px solid var(--color-neutral-200)",
-        borderRadius: "var(--radius-lg)",
-      }}
-    >
+    <div data-terp="dataview" data-variant={variantAttribute} data-density={densityAttribute}>
       <DataViewToolbar<T>
         searchEnabled={props.repository.capabilities.search}
         search={state.search}
@@ -458,20 +473,23 @@ function DataViewInner<T>(props: DataViewProps<T>) {
   );
 }
 
-/** Fixed-height placeholder rows so the initial load never causes a layout jump. */
+/**
+ * Fixed-height placeholder rows so the initial load never causes a layout jump.
+ *
+ * One consequence of taking those heights from the sheet is worth stating where it
+ * bites, because it is the sharpest instance of something the whole migration accepted
+ * rather than anything peculiar to this component: the style injector is guarded on
+ * `document`, so no migrated rule reaches server-rendered HTML. A server-rendered
+ * DataView emits its toolbar and this skeleton and nothing else, which makes this the
+ * one place where "no layout jump" is the entire reason the markup exists. Until
+ * hydration these five divs are now zero-height. `ssr.test.tsx` asserts the marker
+ * string only, so nothing fails — it is a trade, recorded, not an oversight.
+ */
 function DataViewSkeleton({ label }: { label: string }) {
   return (
-    <div role="status" aria-label={label} style={{ display: "grid", gap: "var(--space-2)", padding: "var(--space-3)" }}>
+    <div role="status" aria-label={label} data-terp="dataview-skeleton">
       {Array.from({ length: 5 }, (_, index) => (
-        <div
-          key={index}
-          aria-hidden
-          style={{
-            height: "2.75rem",
-            background: "var(--color-neutral-100)",
-            borderRadius: "var(--radius-md)",
-          }}
-        />
+        <div key={index} aria-hidden />
       ))}
     </div>
   );

package/src/dataview/DataViewCardList.tsx

@@ -1,7 +1,6 @@
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
 
 import type { BadgeTone } from "../ui/Badge";
-import { toneSoftColors } from "../ui/Badge";
 import type { UiText } from "../uiText";
 
 import { DataViewExpandToggle } from "./DataViewExpandableRow";
@@ -30,18 +29,6 @@ export interface DataViewCardListProps<T> {
   rowActions?: (row: T) => DataViewRowAction<T>[];
 }
 
-const recordButtonStyle: CSSProperties = {
-  position: "absolute",
-  width: 1,
-  height: 1,
-  padding: 0,
-  margin: -1,
-  overflow: "hidden",
-  clip: "rect(0 0 0 0)",
-  whiteSpace: "nowrap",
-  border: 0,
-};
-
 function slotValue<T>(
   columns: DataViewColumn<T>[],
   row: T,
@@ -68,7 +55,7 @@ export function DataViewCardList<T>(props: DataViewCardListProps<T>) {
   const { strings, resolve, format } = useDataViewText();
 
   return (
-    <ul style={{ listStyle: "none", margin: 0, padding: "var(--space-2)", display: "grid", gap: "var(--space-2)" }}>
+    <ul data-terp="dataview-card-list">
       {props.rows.map((row) => {
         const rowId = props.getRowId(row);
         const expanded = props.isExpanded(rowId);
@@ -78,18 +65,9 @@ export function DataViewCardList<T>(props: DataViewCardListProps<T>) {
           <li key={rowId}>
             <div
               onClick={clickable ? () => props.onRowClick?.(row) : undefined}
-              data-terp={clickable ? "dataview-card" : undefined}
+              data-terp="dataview-card"
+              data-clickable={clickable || undefined}
               data-tone={tone ?? undefined}
-              style={{
-                display: "grid",
-                gap: "var(--space-2)",
-                padding: "var(--space-3)",
-                background: tone !== null ? toneSoftColors[tone] : "var(--color-neutral-0)",
-                border: "1px solid var(--color-neutral-200)",
-                borderRadius: "var(--radius-lg)",
-                boxShadow: "var(--shadow-sm)",
-                cursor: clickable ? "pointer" : undefined,
-              }}
             >
               {clickable && (
                 <button
@@ -102,10 +80,9 @@ export function DataViewCardList<T>(props: DataViewCardListProps<T>) {
                     event.stopPropagation();
                     props.onRowClick?.(row);
                   }}
-                  style={recordButtonStyle}
                 />
               )}
-              <div style={{ display: "flex", alignItems: "flex-start", gap: "var(--space-2)" }}>
+              <div data-terp="dataview-card-main">
                 {props.renderExpanded !== undefined && (
                   <DataViewExpandToggle
                     expanded={expanded}
@@ -113,7 +90,7 @@ export function DataViewCardList<T>(props: DataViewCardListProps<T>) {
                   />
                 )}
                 {props.selectionEnabled && (
-                  <span onClick={(event) => event.stopPropagation()} style={{ display: "inline-flex" }}>
+                  <span onClick={(event) => event.stopPropagation()}>
                     <input
                       type="checkbox"
                       aria-label={resolve(strings.selectRow)}
@@ -122,7 +99,7 @@ export function DataViewCardList<T>(props: DataViewCardListProps<T>) {
                     />
                   </span>
                 )}
-                <div style={{ flex: 1, minWidth: 0 }}>
+                <div data-terp="dataview-card-body">
                   {props.renderCard !== undefined ? (
                     props.renderCard(row)
                   ) : (
@@ -139,12 +116,7 @@ export function DataViewCardList<T>(props: DataViewCardListProps<T>) {
                 )}
               </div>
               {expanded && props.renderExpanded !== undefined && (
-                <div
-                  style={{
-                    borderTop: "1px solid var(--color-neutral-200)",
-                    paddingTop: "var(--space-2)",
-                  }}
-                >
+                <div data-terp="dataview-card-expanded">
                   {props.renderExpanded(row)}
                 </div>
               )}
@@ -162,33 +134,15 @@ function DefaultCardBody<T>({ row, columns }: { row: T; columns: DataViewColumn<
   const status = slotValue(columns, row, "status");
   const date = slotValue(columns, row, "date");
   return (
-    <div style={{ display: "grid", gap: "var(--space-1)" }}>
-      <div style={{ display: "flex", alignItems: "center", gap: "var(--space-2)", flexWrap: "wrap" }}>
-        <span style={{ fontWeight: "var(--font-weight-medium)" as never }}>{title}</span>
+    <div data-terp="dataview-card-fields">
+      <div data-terp="dataview-card-heading">
+        <span data-terp="dataview-card-title">{title}</span>
         {status !== null && (
-          <span
-            style={{
-              fontSize: "var(--font-size-sm)",
-              padding: "0 var(--space-2)",
-              background: "var(--color-neutral-100)",
-              borderRadius: "var(--radius-full)",
-              color: "var(--color-neutral-700)",
-            }}
-          >
-            {status}
-          </span>
+          <span data-terp="dataview-card-status">{status}</span>
         )}
       </div>
-      {subtitle !== null && (
-        <span style={{ fontSize: "var(--font-size-sm)", color: "var(--color-neutral-500)" }}>
-          {subtitle}
-        </span>
-      )}
-      {date !== null && (
-        <span style={{ fontSize: "var(--font-size-sm)", color: "var(--color-neutral-500)" }}>
-          {date}
-        </span>
-      )}
+      {subtitle !== null && <span data-terp="dataview-card-meta">{subtitle}</span>}
+      {date !== null && <span data-terp="dataview-card-meta">{date}</span>}
     </div>
   );
 }

package/src/dataview/DataViewColumnSettings.tsx

@@ -1,5 +1,8 @@
+import { useId } from "react";
+
+import { Popover } from "../ui/Popover";
 import { ArrowDownGlyph, ArrowUpGlyph, ColumnsGlyph } from "./glyphs";
-import { DataViewMenu, useDataViewText } from "./internal";
+import { useDataViewText } from "./internal";
 import type { DataViewColumn } from "./types";
 
 export interface DataViewColumnSettingsProps<T> {
@@ -8,68 +11,72 @@ export interface DataViewColumnSettingsProps<T> {
   columnVisibility: Record<string, boolean>;
   onColumnVisibleChange: (columnId: string, visible: boolean) => void;
   onMoveColumn: (columnId: string, direction: -1 | 1) => void;
+  /**
+   * Render the panel open on mount — the same escape the menu primitive already exposes,
+   * and the only way a portalled panel reaches a per-specimen visual lane.
+   */
+  defaultOpen?: boolean;
 }
 
 /**
- * The "view options" menu: per-column show/hide checkboxes and up/down reordering.
+ * The "view options" panel: per-column show/hide checkboxes and up/down reordering.
  * Only user columns appear — the pinned system columns (select/expand/actions) are
  * never hideable or reorderable, and are skipped when computing reorder targets
  * because this list simply does not contain them.
+ *
+ * A `Popover` rather than a `Menu`, and the distinction is a correctness one rather than
+ * a preference. `Menu` stamps `role="menu"`, which ARIA requires to own only
+ * `menuitem` / `menuitemradio` / `menuitemcheckbox` / `group` children — and this panel's
+ * content is a heading, labelled checkboxes and paired reorder buttons, which is a small
+ * FORM. Feeding it to a menu produced a critical `aria-required-children` violation in
+ * every theme, and there is no arrangement that fixes it while keeping the interaction:
+ * reorder buttons inside a `menuitemcheckbox` would be interactive descendants of a menu
+ * item, which ARIA forbids in turn. The panel is therefore a group labelled by its own
+ * heading, navigated with Tab the way a form is, and `Popover` supplies the Escape,
+ * outside-click and focus-return behaviour `Menu` was being used for.
+ *
+ * Nothing had rendered this panel open before, which is why a shipped critical defect was
+ * invisible: the screenshot lane clips to the specimen and the panel portals to the body,
+ * and no specimen opened it at all.
  */
 export function DataViewColumnSettings<T>({
   columns,
   columnVisibility,
   onColumnVisibleChange,
   onMoveColumn,
+  defaultOpen,
 }: DataViewColumnSettingsProps<T>) {
   const { strings, resolve } = useDataViewText();
+  const headingId = useId();
 
   return (
-    <DataViewMenu
+    <Popover
+      defaultOpen={defaultOpen}
+      focusOnOpen
+      data-owner="dataview-column-settings"
       trigger={
-        <>
+        // The trigger keeps the menu-trigger marker, which is styling vocabulary rather than
+        // a semantic claim — the sheet describes it as the package's outlined control, and
+        // reusing it is what keeps this control's appearance identical. What it does NOT keep
+        // is aria-haspopup="menu", because the panel is no longer a menu; Popover supplies
+        // aria-expanded and aria-controls, which is the whole contract for a disclosure.
+        <button type="button" data-terp="menu-trigger">
           <ColumnsGlyph />
-          <span style={{ fontSize: "var(--font-size-sm)" }}>{resolve(strings.viewOptions)}</span>
-        </>
+          <span>{resolve(strings.viewOptions)}</span>
+        </button>
       }
-      triggerLabel={resolve(strings.viewOptions)}
     >
       {() => (
-        <div style={{ display: "grid", gap: "var(--space-1)" }}>
-          <div
-            style={{
-              padding: "var(--space-1) var(--space-2)",
-              fontSize: "var(--font-size-sm)",
-              fontWeight: "var(--font-weight-medium)" as never,
-              color: "var(--color-neutral-500)",
-            }}
-          >
+        <div data-terp="dataview-column-settings" role="group" aria-labelledby={headingId}>
+          <div id={headingId} data-terp="dataview-column-settings-title">
             {resolve(strings.columns)}
           </div>
           {columns.map((column, index) => {
             const label = resolve(column.meta?.label ?? column.header);
             const visible = columnVisibility[column.id] !== false;
             return (
-              <div
-                key={column.id}
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "var(--space-2)",
-                  padding: "var(--space-1) var(--space-2)",
-                  borderRadius: "var(--radius-sm)",
-                }}
-              >
-                <label
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "var(--space-2)",
-                    flex: 1,
-                    cursor: "pointer",
-                    fontSize: "var(--font-size-sm)",
-                  }}
-                >
+              <div key={column.id} data-terp="dataview-column-option">
+                <label>
                   <input
                     type="checkbox"
                     checked={visible}
@@ -80,19 +87,19 @@ export function DataViewColumnSettings<T>({
                 </label>
                 <button
                   type="button"
+                  data-terp="iconbutton"
                   aria-label={`${resolve(strings.moveUp)}: ${label}`}
                   disabled={index === 0}
                   onClick={() => onMoveColumn(column.id, -1)}
-                  style={reorderButtonStyle(index === 0)}
                 >
                   <ArrowUpGlyph size={14} />
                 </button>
                 <button
                   type="button"
+                  data-terp="iconbutton"
                   aria-label={`${resolve(strings.moveDown)}: ${label}`}
                   disabled={index === columns.length - 1}
                   onClick={() => onMoveColumn(column.id, 1)}
-                  style={reorderButtonStyle(index === columns.length - 1)}
                 >
                   <ArrowDownGlyph size={14} />
                 </button>
@@ -101,18 +108,6 @@ export function DataViewColumnSettings<T>({
           })}
         </div>
       )}
-    </DataViewMenu>
+    </Popover>
   );
 }
-
-function reorderButtonStyle(disabled: boolean) {
-  return {
-    display: "inline-flex",
-    padding: "var(--space-1)",
-    background: "transparent",
-    border: "none",
-    borderRadius: "var(--radius-sm)",
-    cursor: disabled ? "not-allowed" : "pointer",
-    color: disabled ? "var(--color-neutral-300)" : "var(--color-neutral-700)",
-  } as const;
-}

package/src/dataview/DataViewExpandableRow.tsx

@@ -20,19 +20,11 @@ export function DataViewExpandToggle({
       type="button"
       aria-label={resolve(expanded ? strings.collapseRow : strings.expandRow)}
       aria-expanded={expanded}
+      data-terp="iconbutton"
       onClick={(event) => {
         event.stopPropagation();
         onToggle();
       }}
-      style={{
-        display: "inline-flex",
-        padding: "var(--space-1)",
-        background: "transparent",
-        border: "none",
-        borderRadius: "var(--radius-sm)",
-        cursor: "pointer",
-        color: "var(--color-neutral-500)",
-      }}
     >
       {expanded ? <ChevronDownGlyph /> : <ChevronRightGlyph />}
     </button>
@@ -52,14 +44,7 @@ export function DataViewExpandableRow({
 }) {
   return (
     <tr>
-      <td
-        colSpan={colSpan}
-        style={{
-          padding: "var(--space-3) var(--space-4)",
-          background: "var(--color-neutral-50)",
-          borderBottom: "1px solid var(--color-neutral-200)",
-        }}
-      >
+      <td colSpan={colSpan} data-terp="dataview-expanded-cell">
         {children}
       </td>
     </tr>

package/src/dataview/DataViewPagination.tsx

@@ -1,5 +1,3 @@
-import type { CSSProperties } from "react";
-
 import { useDataViewText } from "./internal";
 import {
   PageFirstGlyph,
@@ -15,18 +13,6 @@ export interface DataViewPaginationProps {
   onPaginationChange: (pagination: DataViewPaginationState) => void;
 }
 
-const pagerButtonStyle = (disabled: boolean): CSSProperties => ({
-  display: "inline-flex",
-  alignItems: "center",
-  minHeight: "2rem",
-  padding: "var(--space-1) var(--space-2)",
-  background: "var(--color-neutral-0)",
-  border: "1px solid var(--color-neutral-300)",
-  borderRadius: "var(--radius-md)",
-  cursor: disabled ? "not-allowed" : "pointer",
-  color: disabled ? "var(--color-neutral-300)" : "var(--color-neutral-700)",
-});
-
 /**
  * The footer pagination bar: "X–Y of Z results", the current page / page count, and
  * first / prev / next / last controls (disabled at bounds; page controls hidden when
@@ -49,22 +35,10 @@ export function DataViewPagination({
   const atLast = pageIndex >= pageCount - 1;
 
   return (
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: "var(--space-3)",
-        flexWrap: "wrap",
-        padding: "var(--space-2) var(--space-3)",
-        borderTop: "1px solid var(--color-neutral-200)",
-        fontSize: "var(--font-size-sm)",
-        color: "var(--color-neutral-500)",
-      }}
-    >
+    <div data-terp="dataview-pagination">
       <span>{format(strings.resultsRange, { from, to, total: totalCount })}</span>
       {pageCount > 1 && (
-        <span style={{ display: "inline-flex", alignItems: "center", gap: "var(--space-2)" }}>
+        <span data-terp="dataview-pager">
           <span>{format(strings.pageOf, { page: pageIndex + 1, pages: pageCount })}</span>
           <button
             type="button"
@@ -72,7 +46,6 @@ export function DataViewPagination({
             disabled={atFirst}
             onClick={() => goTo(0)}
             data-terp="iconbutton"
-            style={pagerButtonStyle(atFirst)}
           >
             <PageFirstGlyph />
           </button>
@@ -82,7 +55,6 @@ export function DataViewPagination({
             disabled={atFirst}
             onClick={() => goTo(pageIndex - 1)}
             data-terp="iconbutton"
-            style={pagerButtonStyle(atFirst)}
           >
             <PagePrevGlyph />
           </button>
@@ -92,7 +64,6 @@ export function DataViewPagination({
             disabled={atLast}
             onClick={() => goTo(pageIndex + 1)}
             data-terp="iconbutton"
-            style={pagerButtonStyle(atLast)}
           >
             <PageNextGlyph />
           </button>
@@ -102,7 +73,6 @@ export function DataViewPagination({
             disabled={atLast}
             onClick={() => goTo(pageCount - 1)}
             data-terp="iconbutton"
-            style={pagerButtonStyle(atLast)}
           >
             <PageLastGlyph />
           </button>

package/src/dataview/DataViewRowActions.tsx

@@ -14,6 +14,12 @@ export interface DataViewRowActionsProps<T> {
   layout: DataViewRowActionsLayout;
   /** On mobile all standard actions collapse into the menu regardless of flags. */
   isMobile: boolean;
+  /**
+   * Render the overflow menu open on mount — the same escape `Menu`, `Popover` and both
+   * date pickers already expose, and for the same reason: a portalled panel is invisible
+   * to a per-specimen visual lane unless something can name its open state.
+   */
+  defaultOpen?: boolean;
 }
 
 function InlineActionButton<T>({ action, row }: { action: DataViewRowAction<T>; row: T }) {
@@ -23,30 +29,12 @@ function InlineActionButton<T>({ action, row }: { action: DataViewRowAction<T>;
   return (
     <button
       type="button"
+      data-terp="dataview-inline-action"
+      data-destructive={destructive || undefined}
       disabled={disabled}
       onClick={() => action.onClick?.(row)}
-      style={{
-        font: "inherit",
-        fontSize: "var(--font-size-sm)",
-        display: "inline-flex",
-        alignItems: "center",
-        minHeight: "2rem",
-        gap: "var(--space-1)",
-        padding: "var(--space-1) var(--space-2)",
-        background: "transparent",
-        border: "1px solid var(--color-neutral-300)",
-        borderRadius: "var(--radius-md)",
-        cursor: disabled ? "not-allowed" : "pointer",
-        color: disabled
-          ? "var(--color-neutral-300)"
-          : destructive
-            ? "var(--color-status-danger)"
-            : "var(--color-neutral-700)",
-      }}
     >
-      {action.icon !== undefined && (
-        <span aria-hidden style={{ display: "inline-flex" }}>{action.icon}</span>
-      )}
+      {action.icon !== undefined && <span aria-hidden>{action.icon}</span>}
       {resolve(action.label)}
     </button>
   );
@@ -62,6 +50,7 @@ export function DataViewRowActions<T>({
   actions,
   layout,
   isMobile,
+  defaultOpen,
 }: DataViewRowActionsProps<T>) {
   const { strings, resolve } = useDataViewText();
 
@@ -83,21 +72,11 @@ export function DataViewRowActions<T>({
   const stop = (event: MouseEvent) => event.stopPropagation();
 
   const renderCustom = (action: DataViewRowAction<T>, index: number): ReactNode => (
-    <span key={`custom-${index}`} style={{ display: "inline-flex" }}>
-      {action.render?.(row)}
-    </span>
+    <span key={`custom-${index}`}>{action.render?.(row)}</span>
   );
 
   return (
-    <span
-      onClick={stop}
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "flex-end",
-        gap: "var(--space-1)",
-      }}
-    >
+    <span data-terp="dataview-row-actions" onClick={stop}>
       {custom.map(renderCustom)}
       {inline.map((action, index) => (
         <InlineActionButton key={`inline-${index}`} action={action} row={row} />
@@ -106,6 +85,7 @@ export function DataViewRowActions<T>({
         <DataViewMenu
           trigger={<EllipsisGlyph />}
           triggerLabel={resolve(strings.moreActions)}
+          defaultOpen={defaultOpen}
         >
           {(close) => (
             <>