@terpjs/react-core 0.7.0 → 0.8.0

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) => (
             <>

package/src/dataview/DataViewTable.tsx

@@ -1,9 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
 
 import { injectTerpStyles } from "../styles";
 import type { BadgeTone } from "../ui/Badge";
-import { toneSoftColors } from "../ui/Badge";
 import type { UiText } from "../uiText";
 import { DataViewExpandToggle, DataViewExpandableRow } from "./DataViewExpandableRow";
 import { DataViewRowActions } from "./DataViewRowActions";
@@ -46,41 +45,6 @@ export interface DataViewTableProps<T> {
   rowActionsLayout: DataViewRowActionsLayout;
 }
 
-const headerCellStyle: CSSProperties = {
-  position: "relative",
-  padding: "var(--space-2) var(--space-3)",
-  textAlign: "left",
-  fontSize: "var(--font-size-xs)",
-  fontWeight: "var(--font-weight-semibold)" as never,
-  color: "var(--color-neutral-500)",
-  textTransform: "uppercase",
-  letterSpacing: "0.04em",
-  borderBottom: "1px solid var(--color-neutral-200)",
-  whiteSpace: "nowrap",
-  background: "var(--color-neutral-0)",
-};
-
-const bodyCellStyle: CSSProperties = {
-  padding: "var(--space-3)",
-  borderBottom: "1px solid var(--color-neutral-100)",
-  fontSize: "var(--font-size-sm)",
-  color: "var(--color-neutral-900)",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-};
-
-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,
-};
-
 /**
  * The table layout of {@link DataView}: sortable, resizable headers; system columns
  * (expand → select → user columns → actions); row click, selection, expansion.
@@ -166,17 +130,13 @@ export function DataViewTable<T>(props: DataViewTableProps<T>) {
     <table
       ref={tableRef}
       data-terp="dataview-table"
-      style={{
-        width: "100%",
-        borderCollapse: "collapse",
-        tableLayout: liveSizing !== null ? "fixed" : "auto",
-      }}
+      data-resizing={liveSizing !== null || undefined}
     >
       <thead>
         <tr>
-          {hasExpand && <th style={{ ...headerCellStyle, width: 40 }} aria-hidden />}
+          {hasExpand && <th data-terp="dataview-expand-cell" aria-hidden />}
           {props.selectionEnabled && (
-            <th style={{ ...headerCellStyle, width: 40 }}>
+            <th data-terp="dataview-select-cell">
               <input
                 ref={selectAllRef}
                 type="checkbox"
@@ -197,27 +157,17 @@ export function DataViewTable<T>(props: DataViewTableProps<T>) {
                 aria-sort={
                   sort === undefined ? undefined : sort.desc ? "descending" : "ascending"
                 }
-                style={{ ...headerCellStyle, width }}
+                style={width === undefined ? undefined : { width }}
               >
                 {sortable ? (
                   <button
                     type="button"
+                    data-terp="dataview-column-sort"
                     onClick={() => props.onToggleSort(column.id)}
-                    style={{
-                      font: "inherit",
-                      color: "inherit",
-                      display: "inline-flex",
-                      alignItems: "center",
-                      gap: "var(--space-1)",
-                      background: "transparent",
-                      border: "none",
-                      padding: 0,
-                      cursor: "pointer",
-                    }}
                   >
                     {resolve(column.header)}
                     {sort === undefined ? (
-                      <SortNoneGlyph size={12} style={{ opacity: 0.5 }} />
+                      <SortNoneGlyph size={12} />
                     ) : sort.desc ? (
                       <SortDescGlyph size={12} />
                     ) : (
@@ -231,44 +181,18 @@ export function DataViewTable<T>(props: DataViewTableProps<T>) {
                   role="separator"
                   aria-orientation="vertical"
                   aria-label={`${resolve(strings.resizeColumn)}: ${resolve(column.meta?.label ?? column.header)}`}
+                  data-terp="dataview-column-resizer"
                   onPointerDown={(event) => {
                     event.preventDefault();
                     startResize(column.id, event.clientX);
                   }}
-                  style={{
-                    position: "absolute",
-                    top: 0,
-                    // Sit flush with the cell's right edge — a negative offset would
-                    // let the last column's handle spill past the table and trip the
-                    // scroll container's overflow-x, adding a spurious scrollbar.
-                    right: 0,
-                    width: 7,
-                    height: "100%",
-                    cursor: "col-resize",
-                    zIndex: 1,
-                    touchAction: "none",
-                  }}
                 />
               </th>
             );
           })}
           {hasActions && (
-            <th style={{ ...headerCellStyle, width: 56 }}>
-              <span
-                style={{
-                  position: "absolute",
-                  width: 1,
-                  height: 1,
-                  padding: 0,
-                  margin: -1,
-                  overflow: "hidden",
-                  clip: "rect(0 0 0 0)",
-                  whiteSpace: "nowrap",
-                  border: 0,
-                }}
-              >
-                {resolve(strings.actions)}
-              </span>
+            <th data-terp="dataview-actions-cell">
+              <span>{resolve(strings.actions)}</span>
             </th>
           )}
         </tr>
@@ -283,23 +207,13 @@ export function DataViewTable<T>(props: DataViewTableProps<T>) {
             <RowGroup key={rowId}>
               <tr
                 onClick={clickable ? () => props.onRowClick?.(row) : undefined}
-                data-terp={clickable ? "dataview-row" : undefined}
+                data-terp="dataview-row"
+                data-clickable={clickable || undefined}
                 data-selected={props.isSelected(rowId) || undefined}
                 data-tone={tone ?? undefined}
-                style={{
-                  cursor: clickable ? "pointer" : undefined,
-                  // A row's own state outranks the selection tint — selection still
-                  // shows via the checkbox and data-selected.
-                  background:
-                    tone !== null
-                      ? toneSoftColors[tone]
-                      : props.isSelected(rowId)
-                        ? "var(--color-neutral-50)"
-                        : undefined,
-                }}
               >
                 {hasExpand && (
-                  <td style={bodyCellStyle}>
+                  <td data-terp="dataview-expand-cell">
                     <DataViewExpandToggle
                       expanded={expanded}
                       onToggle={() => props.onToggleExpanded(rowId)}
@@ -307,7 +221,7 @@ export function DataViewTable<T>(props: DataViewTableProps<T>) {
                   </td>
                 )}
                 {props.selectionEnabled && (
-                  <td style={bodyCellStyle} onClick={(event) => event.stopPropagation()}>
+                  <td data-terp="dataview-select-cell" onClick={(event) => event.stopPropagation()}>
                     <input
                       type="checkbox"
                       aria-label={resolve(strings.selectRow)}
@@ -317,7 +231,7 @@ export function DataViewTable<T>(props: DataViewTableProps<T>) {
                   </td>
                 )}
                 {props.columns.map((column) => (
-                  <td key={column.id} style={bodyCellStyle}>
+                  <td key={column.id}>
                     {clickable && column === props.columns[0] && (
                       <button
                         type="button"
@@ -329,7 +243,6 @@ export function DataViewTable<T>(props: DataViewTableProps<T>) {
                           event.stopPropagation();
                           props.onRowClick?.(row);
                         }}
-                        style={recordButtonStyle}
                       />
                     )}
                     {column.cell !== undefined
@@ -338,7 +251,7 @@ export function DataViewTable<T>(props: DataViewTableProps<T>) {
                   </td>
                 ))}
                 {hasActions && (
-                  <td style={{ ...bodyCellStyle, textAlign: "right" }}>
+                  <td data-terp="dataview-actions-cell">
                     <DataViewRowActions
                       row={row}
                       actions={props.rowActions?.(row) ?? []}