twico-ui 1.31.1 → 1.32.0

package/dist/index.d.cts

@@ -1924,6 +1924,12 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
    *  column, or **double-click** that edge to auto-fit the column to its widest visible content
    *  (header + rendered cells), Excel-style. @default false */
   disableColumnResize?: boolean;
+  /** #339: let end-users build their own combined columns at runtime. Adds a **"Combine columns…"** item to
+   *  each column's ⋮ menu that opens an editor to fold other columns' data into that column (they show in its
+   *  cell and their own columns hide); layout (inline/stacked) + labels are configurable, and "Uncombine"
+   *  restores them. The result is the same as a declarative `column.combine` and persists via `stateKey`.
+   *  @default false */
+  columnCombining?: boolean;
   /** Make all columns editable by default (double-click a cell to edit; per-column `editable` overrides). @default false */
   editMode?: boolean;
   /** Called when a cell edit is committed: (updatedRow, originalRow, field). */
@@ -2118,6 +2124,11 @@ interface DatatableState {
   /** #304: user-resized sizes of the other toolbar popovers (Columns/Aggregation/Pivot/Batch-edit),
    *  keyed by popover id → `{ w, h }` in px. Absent until a popover is dragged with `resizablePopovers`. */
   popoverSizes?: Record<string, { w?: number; h?: number }>;
+  /** #339: runtime user-defined combined columns (from `columnCombining`), keyed by target field →
+   *  `{ fields:[target, ...sources], layout, separator, labels }`. Absent until the user combines columns. */
+  columnCombine?: Record<string, { fields: string[]; layout?: "inline" | "stack"; separator?: string; labels?: boolean }>;
+  /** #341: user-resized width (px) of the batch-editor's column-name field. Absent until the user drags it. */
+  batchNameWidth?: number;
 }
 
 interface DatatableColumn<T = any> {
@@ -2127,6 +2138,18 @@ interface DatatableColumn<T = any> {
    *  quick-search, grouping, aggregation, the default cell render, and export. Falls back to
    *  `row[field]` when omitted. Inline edits still write to the raw `field`. */
   valueGetter?: (row: T) => unknown;
+  /** #338: merge several other columns' values into this one column — a convenience layer over
+   *  `valueGetter`. Give the source `fields` (or the shorthand `combine: ["a", "b"]`); Twico auto-derives
+   *  the combined value — so sort, filter, quick-search, grouping, aggregation, and export all operate on
+   *  it — and the cell render. `layout: "inline"` (default) joins the values with `separator` (default
+   *  `" · "`) on one line; `"stack"` puts each on its own line and auto-wraps the row. `labels` prefixes
+   *  each value with its source column's header. Note the split: the derived **value** used for
+   *  sort/filter/quick-search/grouping/aggregation/export is the raw source values joined by `separator`
+   *  (label-prefixed when `labels`), while the **cell render** additionally applies each source column's
+   *  `valueFormatter`. The combined value is synthetic, so the column is display-only (never inline-editable).
+   *  Supplying your own `valueGetter` and/or `renderCell` overrides the derived one(s) independently —
+   *  override `valueGetter` alone and the cell shows that value (not the source-join). */
+  combine?: string[] | { fields: string[]; layout?: "inline" | "stack"; separator?: string; labels?: boolean };
   /** Header label. @default field ("Actions" for actions columns) */
   headerName?: string;
   /** Data type. "actions" renders per-row action buttons via getActions. @default "string" */
@@ -2997,6 +3020,15 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
   size?: "xs" | "sm" | "md" | "lg";
   /** Fully rounded (circular). @default false */
   round?: boolean;
+  /** #342: render as a different element — use `"a"` for an icon **link** (GitHub icon, external nav, …) so
+   *  navigation is a real link, not a button. @default "button" */
+  as?: "button" | "a";
+  /** Link destination — only used with `as="a"`; scheme-sanitized (javascript:/data:/vbscript: drop the href). */
+  href?: string;
+  /** Anchor target — only used with `as="a"` (e.g. "_blank"). */
+  target?: React.HTMLAttributeAnchorTarget;
+  /** Anchor rel — only used with `as="a"`; pair "noopener noreferrer" with target="_blank". */
+  rel?: string;
   /** Accessible label — required for icon-only buttons. */
   "aria-label": string;
 }

package/dist/index.d.ts

@@ -1924,6 +1924,12 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
    *  column, or **double-click** that edge to auto-fit the column to its widest visible content
    *  (header + rendered cells), Excel-style. @default false */
   disableColumnResize?: boolean;
+  /** #339: let end-users build their own combined columns at runtime. Adds a **"Combine columns…"** item to
+   *  each column's ⋮ menu that opens an editor to fold other columns' data into that column (they show in its
+   *  cell and their own columns hide); layout (inline/stacked) + labels are configurable, and "Uncombine"
+   *  restores them. The result is the same as a declarative `column.combine` and persists via `stateKey`.
+   *  @default false */
+  columnCombining?: boolean;
   /** Make all columns editable by default (double-click a cell to edit; per-column `editable` overrides). @default false */
   editMode?: boolean;
   /** Called when a cell edit is committed: (updatedRow, originalRow, field). */
@@ -2118,6 +2124,11 @@ interface DatatableState {
   /** #304: user-resized sizes of the other toolbar popovers (Columns/Aggregation/Pivot/Batch-edit),
    *  keyed by popover id → `{ w, h }` in px. Absent until a popover is dragged with `resizablePopovers`. */
   popoverSizes?: Record<string, { w?: number; h?: number }>;
+  /** #339: runtime user-defined combined columns (from `columnCombining`), keyed by target field →
+   *  `{ fields:[target, ...sources], layout, separator, labels }`. Absent until the user combines columns. */
+  columnCombine?: Record<string, { fields: string[]; layout?: "inline" | "stack"; separator?: string; labels?: boolean }>;
+  /** #341: user-resized width (px) of the batch-editor's column-name field. Absent until the user drags it. */
+  batchNameWidth?: number;
 }
 
 interface DatatableColumn<T = any> {
@@ -2127,6 +2138,18 @@ interface DatatableColumn<T = any> {
    *  quick-search, grouping, aggregation, the default cell render, and export. Falls back to
    *  `row[field]` when omitted. Inline edits still write to the raw `field`. */
   valueGetter?: (row: T) => unknown;
+  /** #338: merge several other columns' values into this one column — a convenience layer over
+   *  `valueGetter`. Give the source `fields` (or the shorthand `combine: ["a", "b"]`); Twico auto-derives
+   *  the combined value — so sort, filter, quick-search, grouping, aggregation, and export all operate on
+   *  it — and the cell render. `layout: "inline"` (default) joins the values with `separator` (default
+   *  `" · "`) on one line; `"stack"` puts each on its own line and auto-wraps the row. `labels` prefixes
+   *  each value with its source column's header. Note the split: the derived **value** used for
+   *  sort/filter/quick-search/grouping/aggregation/export is the raw source values joined by `separator`
+   *  (label-prefixed when `labels`), while the **cell render** additionally applies each source column's
+   *  `valueFormatter`. The combined value is synthetic, so the column is display-only (never inline-editable).
+   *  Supplying your own `valueGetter` and/or `renderCell` overrides the derived one(s) independently —
+   *  override `valueGetter` alone and the cell shows that value (not the source-join). */
+  combine?: string[] | { fields: string[]; layout?: "inline" | "stack"; separator?: string; labels?: boolean };
   /** Header label. @default field ("Actions" for actions columns) */
   headerName?: string;
   /** Data type. "actions" renders per-row action buttons via getActions. @default "string" */
@@ -2997,6 +3020,15 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
   size?: "xs" | "sm" | "md" | "lg";
   /** Fully rounded (circular). @default false */
   round?: boolean;
+  /** #342: render as a different element — use `"a"` for an icon **link** (GitHub icon, external nav, …) so
+   *  navigation is a real link, not a button. @default "button" */
+  as?: "button" | "a";
+  /** Link destination — only used with `as="a"`; scheme-sanitized (javascript:/data:/vbscript: drop the href). */
+  href?: string;
+  /** Anchor target — only used with `as="a"` (e.g. "_blank"). */
+  target?: React.HTMLAttributeAnchorTarget;
+  /** Anchor rel — only used with `as="a"`; pair "noopener noreferrer" with target="_blank". */
+  rel?: string;
   /** Accessible label — required for icon-only buttons. */
   "aria-label": string;
 }