@terpjs/react-core 0.1.0

package/src/dataview/DataViewColumnSettings.tsx

@@ -0,0 +1,118 @@
+import { ArrowDownGlyph, ArrowUpGlyph, ColumnsGlyph } from "./glyphs";
+import { DataViewMenu, useDataViewText } from "./internal";
+import type { DataViewColumn } from "./types";
+
+export interface DataViewColumnSettingsProps<T> {
+  /** The user columns in effective order (system columns are never listed here). */
+  columns: DataViewColumn<T>[];
+  columnVisibility: Record<string, boolean>;
+  onColumnVisibleChange: (columnId: string, visible: boolean) => void;
+  onMoveColumn: (columnId: string, direction: -1 | 1) => void;
+}
+
+/**
+ * The "view options" menu: 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.
+ */
+export function DataViewColumnSettings<T>({
+  columns,
+  columnVisibility,
+  onColumnVisibleChange,
+  onMoveColumn,
+}: DataViewColumnSettingsProps<T>) {
+  const { strings, resolve } = useDataViewText();
+
+  return (
+    <DataViewMenu
+      trigger={
+        <>
+          <ColumnsGlyph />
+          <span style={{ fontSize: "var(--font-size-sm)" }}>{resolve(strings.viewOptions)}</span>
+        </>
+      }
+      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)",
+            }}
+          >
+            {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)",
+                  }}
+                >
+                  <input
+                    type="checkbox"
+                    checked={visible}
+                    onChange={(event) => onColumnVisibleChange(column.id, event.target.checked)}
+                    aria-label={label}
+                  />
+                  {label}
+                </label>
+                <button
+                  type="button"
+                  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"
+                  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>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </DataViewMenu>
+  );
+}
+
+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

@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+
+import { ChevronDownGlyph, ChevronRightGlyph } from "./glyphs";
+import { useDataViewText } from "./internal";
+
+/**
+ * The expand-toggle chevron rendered in the expand system column (and on cards).
+ * Stops click propagation so toggling never triggers row navigation.
+ */
+export function DataViewExpandToggle({
+  expanded,
+  onToggle,
+}: {
+  expanded: boolean;
+  onToggle: () => void;
+}) {
+  const { strings, resolve } = useDataViewText();
+  return (
+    <button
+      type="button"
+      aria-label={resolve(expanded ? strings.collapseRow : strings.expandRow)}
+      aria-expanded={expanded}
+      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>
+  );
+}
+
+/**
+ * The full-width detail panel row rendered directly under an expanded row: one cell
+ * spanning every column, visually attached to its parent row.
+ */
+export function DataViewExpandableRow({
+  colSpan,
+  children,
+}: {
+  colSpan: number;
+  children: ReactNode;
+}) {
+  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)",
+        }}
+      >
+        {children}
+      </td>
+    </tr>
+  );
+}

package/src/dataview/DataViewPagination.tsx

@@ -0,0 +1,113 @@
+import type { CSSProperties } from "react";
+
+import { useDataViewText } from "./internal";
+import {
+  PageFirstGlyph,
+  PageLastGlyph,
+  PageNextGlyph,
+  PagePrevGlyph,
+} from "./glyphs";
+import type { DataViewPaginationState } from "./hooks/useDataViewState";
+
+export interface DataViewPaginationProps {
+  pagination: DataViewPaginationState;
+  totalCount: number;
+  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
+ * there is only one page).
+ */
+export function DataViewPagination({
+  pagination,
+  totalCount,
+  onPaginationChange,
+}: DataViewPaginationProps) {
+  const { strings, format } = useDataViewText();
+
+  const pageCount = Math.max(1, Math.ceil(totalCount / pagination.pageSize));
+  const pageIndex = Math.min(pagination.pageIndex, pageCount - 1);
+  const from = totalCount === 0 ? 0 : pageIndex * pagination.pageSize + 1;
+  const to = Math.min(totalCount, (pageIndex + 1) * pagination.pageSize);
+
+  const goTo = (index: number) => onPaginationChange({ ...pagination, pageIndex: index });
+  const atFirst = pageIndex === 0;
+  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)",
+      }}
+    >
+      <span>{format(strings.resultsRange, { from, to, total: totalCount })}</span>
+      {pageCount > 1 && (
+        <span style={{ display: "inline-flex", alignItems: "center", gap: "var(--space-2)" }}>
+          <span>{format(strings.pageOf, { page: pageIndex + 1, pages: pageCount })}</span>
+          <button
+            type="button"
+            aria-label={format(strings.firstPage, {})}
+            disabled={atFirst}
+            onClick={() => goTo(0)}
+            data-terp="iconbutton"
+            style={pagerButtonStyle(atFirst)}
+          >
+            <PageFirstGlyph />
+          </button>
+          <button
+            type="button"
+            aria-label={format(strings.previousPage, {})}
+            disabled={atFirst}
+            onClick={() => goTo(pageIndex - 1)}
+            data-terp="iconbutton"
+            style={pagerButtonStyle(atFirst)}
+          >
+            <PagePrevGlyph />
+          </button>
+          <button
+            type="button"
+            aria-label={format(strings.nextPage, {})}
+            disabled={atLast}
+            onClick={() => goTo(pageIndex + 1)}
+            data-terp="iconbutton"
+            style={pagerButtonStyle(atLast)}
+          >
+            <PageNextGlyph />
+          </button>
+          <button
+            type="button"
+            aria-label={format(strings.lastPage, {})}
+            disabled={atLast}
+            onClick={() => goTo(pageCount - 1)}
+            data-terp="iconbutton"
+            style={pagerButtonStyle(atLast)}
+          >
+            <PageLastGlyph />
+          </button>
+        </span>
+      )}
+    </div>
+  );
+}

package/src/dataview/DataViewRowActions.tsx

@@ -0,0 +1,131 @@
+import type { MouseEvent, ReactNode } from "react";
+
+import { EllipsisGlyph } from "./glyphs";
+import { DataViewMenu, DataViewMenuItem, useDataViewText } from "./internal";
+import type { DataViewRowAction } from "./types";
+import { resolveRowFlag } from "./types";
+
+export type DataViewRowActionsLayout = "menu" | "inline";
+
+export interface DataViewRowActionsProps<T> {
+  row: T;
+  actions: DataViewRowAction<T>[];
+  /** "menu" (default): ellipsis dropdown, `inline`-flagged actions beside it. */
+  layout: DataViewRowActionsLayout;
+  /** On mobile all standard actions collapse into the menu regardless of flags. */
+  isMobile: boolean;
+}
+
+function InlineActionButton<T>({ action, row }: { action: DataViewRowAction<T>; row: T }) {
+  const { resolve } = useDataViewText();
+  const disabled = resolveRowFlag(action.disabled, row);
+  const destructive = action.variant === "destructive";
+  return (
+    <button
+      type="button"
+      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>
+      )}
+      {resolve(action.label)}
+    </button>
+  );
+}
+
+/**
+ * The per-row actions control: renders custom controls inline always, standard actions
+ * either as buttons ("inline" layout / `inline` flag) or in an ellipsis menu. The whole
+ * cluster stops click propagation so actions never trigger row navigation.
+ */
+export function DataViewRowActions<T>({
+  row,
+  actions,
+  layout,
+  isMobile,
+}: DataViewRowActionsProps<T>) {
+  const { strings, resolve } = useDataViewText();
+
+  const visible = actions.filter((action) => !resolveRowFlag(action.hidden, row));
+  if (visible.length === 0) {
+    return null;
+  }
+
+  // Custom controls always render inline and own their interaction surface.
+  const custom = visible.filter((action) => action.render !== undefined);
+  const standard = visible.filter((action) => action.render === undefined);
+  const inline = isMobile
+    ? []
+    : layout === "inline"
+      ? standard
+      : standard.filter((action) => action.inline === true);
+  const menu = standard.filter((action) => !inline.includes(action));
+
+  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>
+  );
+
+  return (
+    <span
+      onClick={stop}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: "var(--space-1)",
+      }}
+    >
+      {custom.map(renderCustom)}
+      {inline.map((action, index) => (
+        <InlineActionButton key={`inline-${index}`} action={action} row={row} />
+      ))}
+      {menu.length > 0 && (
+        <DataViewMenu
+          trigger={<EllipsisGlyph />}
+          triggerLabel={resolve(strings.moreActions)}
+        >
+          {(close) => (
+            <>
+              {menu.map((action, index) => (
+                <DataViewMenuItem
+                  key={index}
+                  label={resolve(action.label)}
+                  icon={action.icon}
+                  destructive={action.variant === "destructive"}
+                  disabled={resolveRowFlag(action.disabled, row)}
+                  onSelect={() => {
+                    close();
+                    action.onClick?.(row);
+                  }}
+                />
+              ))}
+            </>
+          )}
+        </DataViewMenu>
+      )}
+    </span>
+  );
+}