@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/components/data-table-shared.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ROW_ACTIONS_KEY } from "./data-table-row-actions.js";
+import { DEFAULT_DATA_TABLE_LABELS } from "./data-table-labels.js";
+function splitCellProps(props) {
+  if (!props) return { attrs: {} };
+  const {
+    className,
+    style,
+    role: _role,
+    "data-col": _col,
+    ...attrs
+  } = props;
+  return { attrs, className, style };
+}
+const PHYSICAL_ALIGN = /(^|\s)((?:[\w-]+:)*)text-(left|right)(?=\s|$)/g;
+function logicalAlign(className) {
+  return className?.replace(
+    PHYSICAL_ALIGN,
+    (token, lead, variants, side) => (
+      // Already scoped to one direction: that is a caller choosing the physical side.
+      /(^|:)(ltr|rtl):/.test(variants) ? token : `${lead}${variants}text-${side === "right" ? "end" : "start"}`
+    )
+  );
+}
+function cleanAttrs(attrs) {
+  if (!attrs) return void 0;
+  const out = {};
+  for (const [k, v] of Object.entries(attrs)) if (v !== void 0) out[k] = v;
+  return out;
+}
+function columnLabel(col, labels) {
+  if (col.key === ROW_ACTIONS_KEY && labels) return labels.actions;
+  return col.headerText ?? (typeof col.header === "string" ? col.header : col.key);
+}
+function resolveDataTableLabels(...layers) {
+  if (!layers.some(Boolean)) return DEFAULT_DATA_TABLE_LABELS;
+  const partial = {};
+  const presets = { ...DEFAULT_DATA_TABLE_LABELS.presets };
+  for (const layer of layers) {
+    for (const [key, value] of Object.entries(layer ?? {})) {
+      if (value === void 0) continue;
+      if (key !== "presets") Object.assign(partial, { [key]: value });
+      else for (const [preset, text] of Object.entries(value)) if (text !== void 0) presets[preset] = text;
+    }
+  }
+  const merged = { ...DEFAULT_DATA_TABLE_LABELS, ...partial, presets };
+  if (partial.columns !== void 0 && partial.columnsCount === void 0) {
+    merged.columnsCount = (visible, total) => `${merged.columns} (${visible}/${total})`;
+  }
+  if (partial.filter !== void 0 && partial.filterColumn === void 0) {
+    merged.filterColumn = (column) => `${merged.filter}: ${column}`;
+  }
+  return merged;
+}
+function fromOutside(target, row) {
+  return !(target instanceof Node) || !row.contains(target);
+}
+const isPlainLeftClick = (e) => e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
+function RowLink({
+  href,
+  onActivate,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...rest,
+      href,
+      draggable: false,
+      className,
+      onClickCapture: (e) => {
+        if (fromOutside(e.target, e.currentTarget)) return;
+        if (isPlainLeftClick(e)) e.preventDefault();
+      },
+      onClick: (e) => {
+        if (fromOutside(e.target, e.currentTarget)) return;
+        if (!isPlainLeftClick(e)) {
+          e.stopPropagation();
+          return;
+        }
+        onActivate?.();
+      },
+      children
+    }
+  );
+}
+export {
+  RowLink,
+  cleanAttrs,
+  columnLabel,
+  fromOutside,
+  logicalAlign,
+  resolveDataTableLabels,
+  splitCellProps
+};
+//# sourceMappingURL=data-table-shared.js.map

package/dist/components/data-table-shared.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/data-table-shared.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport { ROW_ACTIONS_KEY } from \"./data-table-row-actions\";\nimport { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from \"./data-table-labels\";\nimport type { DataTableCellProps, DataTableColumn, DataTableHeadProps } from \"./data-table\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\n\n// What DataTable shares with its header (data-table-head.tsx), its column panel and its\n// phone layout (data-table-mobile.tsx): the cell-attribute and alignment rules, a\n// column's plain-text name, and the row link. Moved out of data-table.tsx unchanged\n// (refactor audit 2026-10, MOD-3), into a module of their own so none of those has to\n// import data-table.tsx at run time — which imports them. Since 0.35 also the table's\n// label resolver, which DataTable and its FilterPopover share and the barrel no longer\n// exports (round 0.35 R1).\n\n/**\n * Split a caller's cell attributes into what may reach the element and what the kit\n * owns. `role` and `data-col` are dropped outright (see `cellProps`); `className` and\n * `style` come back separately so the kit can merge rather than replace them.\n */\nexport function splitCellProps(\n  props: DataTableCellProps | DataTableHeadProps | undefined,\n): { attrs: Record<string, unknown>; className?: string; style?: CSSProperties } {\n  if (!props) return { attrs: {} };\n  const {\n    className,\n    style,\n    role: _role,\n    \"data-col\": _col,\n    ...attrs\n  } = props as DataTableCellProps & { \"data-col\"?: unknown };\n  return { attrs, className, style };\n}\n\n// A bare `text-right` / `text-left` token, with or without variant prefixes\n// (`md:text-right`). Deliberately NOT `text-right-…` or an arbitrary value.\nconst PHYSICAL_ALIGN = /(^|\\s)((?:[\\w-]+:)*)text-(left|right)(?=\\s|$)/g;\n\n/**\n * A column's `className`/`headClassName` with physical text alignment rewritten to\n * logical: `text-right` → `text-end`, `text-left` → `text-start`.\n *\n * Every numeric column written before 0.7.0 says `text-right`, and that is what it\n * MEANT: the end of the line, where digits line up. Rendered as written, a\n * right-to-left table puts those numbers on the far side from their own header's\n * sort button. Rewriting keeps each existing call site correct in both directions\n * with no change on its side; a caller who genuinely wants the physical side in RTL\n * too can say `ltr:text-right rtl:text-right`, which this leaves alone.\n */\nexport function logicalAlign(className: string | undefined): string | undefined {\n  return className?.replace(\n    PHYSICAL_ALIGN,\n    (token: string, lead: string, variants: string, side: string) =>\n      // Already scoped to one direction: that is a caller choosing the physical side.\n      /(^|:)(ltr|rtl):/.test(variants)\n        ? token\n        : `${lead}${variants}text-${side === \"right\" ? \"end\" : \"start\"}`,\n  );\n}\n\n/** Drop the undefined entries of a {@link DataTableProps.rowAttributes} map, so a\n *  caller can write `{ \"data-x\": cond ? \"y\" : undefined }` and get no attribute\n *  at all rather than the string \"undefined\" in the DOM. */\nexport function cleanAttrs(\n  attrs: Record<string, string | undefined> | undefined,\n): Record<string, string> | undefined {\n  if (!attrs) return undefined;\n  const out: Record<string, string> = {};\n  for (const [k, v] of Object.entries(attrs)) if (v !== undefined) out[k] = v;\n  return out;\n}\n\n/**\n * A column's name as a plain string.\n *\n * `header` is a ReactNode — an icon, a unit suffix, a tooltip-wrapped span — and\n * neither a live region nor the column-settings checklist can speak a React element.\n * The `key` fallback is the one the settings panel has always used; a column whose\n * header is not a string and whose key is not human-readable is a call site that\n * should pass a string header, and that is visible in what gets announced.\n */\nexport function columnLabel<T>(col: DataTableColumn<T>, labels?: DataTableLabels): string {\n  if (col.key === ROW_ACTIONS_KEY && labels) return labels.actions;\n  return col.headerText ?? (typeof col.header === \"string\" ? col.header : col.key);\n}\n\n/**\n * The table's labels: caller overrides merged onto the English defaults (presets merged\n * too, key by key, as the provider merges them — so the parameter is a\n * {@link LabelOverride}).\n *\n * DataTable's own, and FilterPopover's: public until 0.35, when it left the barrel for\n * DataTable's `labels` and the provider's `dataTable`, which it serves (round 0.35 R1,\n * refactor audit 2026-10 API-6a). It stays a resolver rather than `useKitLabels` for the\n * two keys it derives (`columnsCount`, `filterColumn`), which a plain merge would not.\n *\n * Lenient on purpose — a table with no labels at all still renders — so a translated app\n * finds out what fell back to English from `missingKitLabels(labels,\n * DEFAULT_UI_KIT_LABELS)` in its own test, where the answer is actionable.\n */\nexport function resolveDataTableLabels(\n  ...layers: (LabelOverride<DataTableLabels> | undefined)[]\n): DataTableLabels {\n  if (!layers.some(Boolean)) return DEFAULT_DATA_TABLE_LABELS;\n  // The layers in order, the provider's then the prop's, later winning key by key. An\n  // `undefined` key is skipped, as `useKitLabels` skips it, rather than blanking the word\n  // under it: DataTable spread `{ ...provider, ...prop }`, so `labels={{ autoSize:\n  // undefined }}` blanked the provider's word and the English one (round 0.35). `presets`\n  // is a record and is merged the same way, so renaming one keeps the other ten.\n  const partial: Partial<Omit<DataTableLabels, \"presets\">> = {};\n  const presets = { ...DEFAULT_DATA_TABLE_LABELS.presets };\n  for (const layer of layers) {\n    for (const [key, value] of Object.entries(layer ?? {})) {\n      if (value === undefined) continue;\n      if (key !== \"presets\") Object.assign(partial, { [key]: value });\n      else for (const [preset, text] of Object.entries(value)) if (text !== undefined) presets[preset] = text;\n    }\n  }\n  const merged: DataTableLabels = { ...DEFAULT_DATA_TABLE_LABELS, ...partial, presets };\n  // `columnsCount` was split out of `columns` + a template literal. Consumers have\n  // been translating `columns` since 0.1, and backfilling the English default over\n  // that would hand them \"Columns (4/9)\" back for having translated the key that\n  // existed at the time. So the count is derived from the RESOLVED `columns` unless the\n  // caller states the whole sentence, which is the escape hatch for a language where\n  // the parenthetical does not fit.\n  if (partial.columns !== undefined && partial.columnsCount === undefined) {\n    merged.columnsCount = (visible, total) => `${merged.columns} (${visible}/${total})`;\n  }\n  // The same for `filterColumn` (0.34), from a translated `filter`: the app's own word\n  // with the column, rather than English for having translated the key that existed.\n  if (partial.filter !== undefined && partial.filterColumn === undefined) {\n    merged.filterColumn = (column) => `${merged.filter}: ${column}`;\n  }\n  return merged;\n}\n\n/**\n * Whether a click that reached `row`'s handler did not start in the row's own DOM.\n *\n * React bubbles an event through the COMPONENT tree, portals included: a popover, a\n * menu or a dialog a cell (or the expansion under it) opens renders at `<body>` but\n * still reports its clicks to every React ancestor — the row among them. So a click\n * in a cell's portalled date picker opened the row it came from, and a page wrapped\n * such content in `<div onClick={(e) => e.stopPropagation()}>` to stop it (kastlan's\n * feedback page did, round its comments). The row owns the clicks on the row.\n */\nexport function fromOutside(target: EventTarget | null, row: HTMLElement): boolean {\n  return !(target instanceof Node) || !row.contains(target);\n}\n\n/** A click the APP owns. Anything else — middle, ⌘/Ctrl, Shift, Alt — belongs to\n *  the browser, and the whole feature is not touching it. */\nconst isPlainLeftClick = (e: React.MouseEvent) =>\n  e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;\n\n/**\n * The anchor a linkable row is opened through (Keksdose feedback #451).\n *\n * The plain left click is OURS: cancelled, then handed to the row's own handler, so\n * clicking a row still expands it in place instead of reloading the page. Every\n * other click — middle, ⌘/Ctrl, Shift, Alt — is left completely untouched, which is\n * the entire point of using an anchor rather than an `onAuxClick` + `window.open`:\n * that imitation buys back the middle click and still loses ⌘/Ctrl-click, \"copy link\n * address\", the status-bar preview and the phone's long-press menu.\n *\n * Modified clicks DO stop propagating: on a table with `selection`, ⌘/Ctrl-click and\n * Shift-click on a row mean \"select\" (feedback #289), and a row must not change its\n * selection while the browser is opening a tab. The rest of the row still selects —\n * the link is one cell, not the row.\n *\n * `draggable={false}` because an anchor otherwise hijacks a horizontal mouse drag as\n * a link-drag: that is both drag-to-select-text on the desktop table and the mouse\n * path through SwipeableRow's gesture on the mobile card.\n */\nexport function RowLink({\n  href,\n  onActivate,\n  className,\n  children,\n  ...rest\n}: {\n  href: string;\n  /** Runs on a plain left click. Omit it where an ANCESTOR already handles the\n   *  click (the desktop `<tr>`), or the row would toggle twice. */\n  onActivate?: () => void;\n  className?: string;\n  children: ReactNode;\n} & Omit<\n  React.AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"href\" | \"className\" | \"children\" | \"onClick\" | \"onClickCapture\"\n>) {\n  return (\n    <a\n      {...rest}\n      href={href}\n      draggable={false}\n      className={className}\n      // CAPTURE phase, and it has to be: on the mobile card the whole card is the\n      // anchor, so a nested control sits INSIDE it — and the ones that matter\n      // (the feedback row's status toggles) stop the click propagating so the row\n      // won't also expand. A bubble-phase handler would never run for those, and\n      // the browser would follow the link out from under the button press. Cancelling\n      // here happens before any descendant can silence the event; `stopPropagation`\n      // does not undo a `preventDefault`.\n      onClickCapture={(e) => {\n        // A click in a portal a descendant opened is not a click on the link: leave\n        // it (and a link inside it) alone. See `fromOutside`.\n        if (fromOutside(e.target, e.currentTarget)) return;\n        if (isPlainLeftClick(e)) e.preventDefault();\n      }}\n      onClick={(e) => {\n        if (fromOutside(e.target, e.currentTarget)) return;\n        if (!isPlainLeftClick(e)) {\n          e.stopPropagation();\n          return;\n        }\n        // Already cancelled above; this phase only decides what opens. A nested\n        // control that stopped propagation deliberately never reaches it, which is\n        // exactly how the row behaved before it became a link.\n        onActivate?.();\n      }}\n    >\n      {children}\n    </a>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/data-table-sort.d.ts

@@ -2,18 +2,18 @@
  *  primary sort). Encoded as `sort=date.desc,amount` in URLs and the server's
  *  transactions `sort` param — the pre-multi-sort single-value format
  *  (`sort=date.desc`) decodes as a one-element list. */
-type SortDir = "asc" | "desc";
-interface SortState {
+export type SortDir = "asc" | "desc";
+export interface SortState {
     key: string;
     dir: SortDir;
 }
 /** Coerce any persisted/URL-derived shape into a `SortState[]`. The
  *  pre-multi-sort localStorage format stored one `{key, dir}` object (or
  *  null); arrays pass through with junk entries dropped. */
-declare function normalizeSorts(raw: unknown): SortState[];
-declare function encodeSorts(sorts: SortState[]): string | null;
+export declare function normalizeSorts(raw: unknown): SortState[];
+export declare function encodeSorts(sorts: SortState[]): string | null;
 /** Decode a `sort` URL param, dropping unknown and duplicated keys. */
-declare function decodeSorts(raw: string | null, validKeys: ReadonlySet<string>): SortState[];
+export declare function decodeSorts(raw: string | null, validKeys: ReadonlySet<string>): SortState[];
 /**
  * How a header click steps through the directions (see {@link nextSorts}).
  *
@@ -25,10 +25,10 @@ declare function decodeSorts(raw: string | null, validKeys: ReadonlySet<string>)
  *   the sort, so the table can always be re-ranked; a shift-click criterion flips in
  *   place and stays for the same reason.
  */
-type SortCycle = "tri" | "toggle";
+export type SortCycle = "tri" | "toggle";
 /** Per-click options for {@link nextSorts}; every field is optional and the
  *  defaults reproduce the pre-0.8.0 cycle exactly. */
-interface SortStepOptions {
+export interface SortStepOptions {
     /** The direction a column starts in on its first click. `"desc"` for money and
      *  count columns, where the interesting rows are the large ones. Default `"asc"`. */
     firstDir?: SortDir;
@@ -41,6 +41,4 @@ interface SortStepOptions {
  *  sort, or step an existing entry in place (first → other → removed under `"tri"`,
  *  a plain flip under `"toggle"`). `firstDir` defaults to `"asc"`, `cycle` to
  *  `"tri"` — the cycle every table had before the options existed. */
-declare function nextSorts(prev: SortState[], key: string, additive: boolean, options?: SortStepOptions): SortState[];
-
-export { type SortCycle, type SortDir, type SortState, type SortStepOptions, decodeSorts, encodeSorts, nextSorts, normalizeSorts };
+export declare function nextSorts(prev: SortState[], key: string, additive: boolean, options?: SortStepOptions): SortState[];