twico-ui 1.45.1 → 1.46.0

package/dist/index.d.cts

@@ -2087,6 +2087,26 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
    * full row objects server-side rather than relying on `selectedRows`.
    */
   batchActions?: DatatableBatchAction<T>[];
+  /**
+   * #492: extra node in the **selection** toolbar, rendered beside the "N selected" count and before
+   * the batch actions — for the number the count does not carry.
+   *
+   * The count is not always what decides anything. A batch capped by total **size** refuses on
+   * gigabytes, not on items: "12 selected" is not the number the user needs, "12 selected · 2.4 GB"
+   * is. Before this there was nowhere to put it, so hosts lifted it into the main toolbar behind
+   * their own `selected.length > 0` guard — putting it in a different row from the count it
+   * qualifies, and re-deriving a selection this component already tracks.
+   *
+   * Prefer the **function form**: it receives the same `(keys, rows)` the batch actions get, so the
+   * host supplies one pure function and keeps no selection state of its own. (With `retainSelectedRows`
+   * the off-page rows resolve too; without it only the rows currently rendered do.) Pass a plain
+   * node when the summary does not depend on the selection.
+   *
+   * Complements `disabledReason` (#479), which explains the refusal once a cap is exceeded: this is
+   * the running total *before* that point, which is what lets someone stop at the right number
+   * instead of discovering the cap by hitting it.
+   */
+  selectionSummary?: React.ReactNode | ((keys: Array<string | number>, rows: T[]) => React.ReactNode);
   /** #322: fired when the checkbox row selection changes — `(keys, rows)`. The row-mode analogue of
    *  `onCellSelectionChange`, so a consumer can track the selection and drive a batch action's own
    *  `disabled`/`hidden` (which also accept predicates). */
@@ -2879,6 +2899,26 @@ interface CardGridProps<Row = any> extends Omit<React.HTMLAttributes<HTMLDivElem
    * `ctx.anchorEl` so an action can anchor a popover to its own button.
    */
   batchActions?: CardGridBatchAction<Row>[];
+  /**
+   * #492: extra node in the **selection** toolbar, rendered beside the "N selected" count and before
+   * the batch actions — for the number the count does not carry.
+   *
+   * The count is not always what decides anything. A batch capped by total **size** refuses on
+   * gigabytes, not on items: "12 selected" is not the number the user needs, "12 selected · 2.4 GB"
+   * is. Before this there was nowhere to put it, so hosts lifted it into the main toolbar behind
+   * their own `selected.length > 0` guard — putting it in a different row from the count it
+   * qualifies, and re-deriving a selection this component already tracks.
+   *
+   * Prefer the **function form**: it receives the same `(keys, rows)` the batch actions get, so the
+   * host supplies one pure function and keeps no selection state of its own. (With `retainSelectedRows`
+   * the off-page rows resolve too; without it only the rows currently rendered do.) Pass a plain
+   * node when the summary does not depend on the selection.
+   *
+   * Complements `disabledReason` (#479), which explains the refusal once a cap is exceeded: this is
+   * the running total *before* that point, which is what lets someone stop at the right number
+   * instead of discovering the cap by hitting it.
+   */
+  selectionSummary?: React.ReactNode | ((keys: Array<string | number>, rows: Row[]) => React.ReactNode);
   /** Fired when the selection changes — `(keys, rows)`, matching `Datatable.onRowSelectionChange`. */
   onRowSelectionChange?: (keys: Array<string | number>, rows: Row[]) => void;
   /**

package/dist/index.d.ts

@@ -2087,6 +2087,26 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
    * full row objects server-side rather than relying on `selectedRows`.
    */
   batchActions?: DatatableBatchAction<T>[];
+  /**
+   * #492: extra node in the **selection** toolbar, rendered beside the "N selected" count and before
+   * the batch actions — for the number the count does not carry.
+   *
+   * The count is not always what decides anything. A batch capped by total **size** refuses on
+   * gigabytes, not on items: "12 selected" is not the number the user needs, "12 selected · 2.4 GB"
+   * is. Before this there was nowhere to put it, so hosts lifted it into the main toolbar behind
+   * their own `selected.length > 0` guard — putting it in a different row from the count it
+   * qualifies, and re-deriving a selection this component already tracks.
+   *
+   * Prefer the **function form**: it receives the same `(keys, rows)` the batch actions get, so the
+   * host supplies one pure function and keeps no selection state of its own. (With `retainSelectedRows`
+   * the off-page rows resolve too; without it only the rows currently rendered do.) Pass a plain
+   * node when the summary does not depend on the selection.
+   *
+   * Complements `disabledReason` (#479), which explains the refusal once a cap is exceeded: this is
+   * the running total *before* that point, which is what lets someone stop at the right number
+   * instead of discovering the cap by hitting it.
+   */
+  selectionSummary?: React.ReactNode | ((keys: Array<string | number>, rows: T[]) => React.ReactNode);
   /** #322: fired when the checkbox row selection changes — `(keys, rows)`. The row-mode analogue of
    *  `onCellSelectionChange`, so a consumer can track the selection and drive a batch action's own
    *  `disabled`/`hidden` (which also accept predicates). */
@@ -2879,6 +2899,26 @@ interface CardGridProps<Row = any> extends Omit<React.HTMLAttributes<HTMLDivElem
    * `ctx.anchorEl` so an action can anchor a popover to its own button.
    */
   batchActions?: CardGridBatchAction<Row>[];
+  /**
+   * #492: extra node in the **selection** toolbar, rendered beside the "N selected" count and before
+   * the batch actions — for the number the count does not carry.
+   *
+   * The count is not always what decides anything. A batch capped by total **size** refuses on
+   * gigabytes, not on items: "12 selected" is not the number the user needs, "12 selected · 2.4 GB"
+   * is. Before this there was nowhere to put it, so hosts lifted it into the main toolbar behind
+   * their own `selected.length > 0` guard — putting it in a different row from the count it
+   * qualifies, and re-deriving a selection this component already tracks.
+   *
+   * Prefer the **function form**: it receives the same `(keys, rows)` the batch actions get, so the
+   * host supplies one pure function and keeps no selection state of its own. (With `retainSelectedRows`
+   * the off-page rows resolve too; without it only the rows currently rendered do.) Pass a plain
+   * node when the summary does not depend on the selection.
+   *
+   * Complements `disabledReason` (#479), which explains the refusal once a cap is exceeded: this is
+   * the running total *before* that point, which is what lets someone stop at the right number
+   * instead of discovering the cap by hitting it.
+   */
+  selectionSummary?: React.ReactNode | ((keys: Array<string | number>, rows: Row[]) => React.ReactNode);
   /** Fired when the selection changes — `(keys, rows)`, matching `Datatable.onRowSelectionChange`. */
   onRowSelectionChange?: (keys: Array<string | number>, rows: Row[]) => void;
   /**

package/dist/index.mjs

@@ -9537,6 +9537,12 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
 .twc-dt__batch-x:hover { background: color-mix(in srgb, var(--color-primary) 20%, transparent); }
 .twc-dt__batch-x svg { width: 16px; height: 16px; }
 .twc-dt__batch-count { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-primary-subtle-fg); white-space: nowrap; }
+/* #492: the host's running total, sitting with the count it qualifies. Same colour as the count,
+   differentiated by WEIGHT rather than by a lighter token: this bar is --color-primary-subtle, and
+   --color-text-subtle on that is 4.26:1, under the 4.5:1 needed for normal text. */
+.twc-dt__batch-summary { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm);
+  color: var(--color-primary-subtle-fg); white-space: nowrap; }
+.twc-dt__batch-summary::before { content: ""; width: var(--border-thin); height: 14px; background: currentColor; opacity: 0.35; }
 .twc-dt__batch-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
 .twc-dt__batch-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
   border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
@@ -10037,6 +10043,7 @@ function Datatable({
   onColumnVisibilityChange,
   batchActions = [],
   onRowSelectionChange,
+  selectionSummary,
   getRowStyle,
   getRowClassName,
   showExport = false,
@@ -12906,13 +12913,13 @@ function Datatable({
   return /* @__PURE__ */ jsxs("div", { className: `twc-dt ${className}`, ref: rootRef, "data-density": density, "data-resizing": resizing || void 0, "data-editing": editing ? "" : void 0, ...rest, children: [
     __twcStyles,
     /* @__PURE__ */ jsxs("div", { className: "twc-dt__toolbar", "data-compact": compact || void 0, children: [
-      toolbarActions != null ? /* @__PURE__ */ jsx("div", { className: "twc-dt__toolbar-actions", children: toolbarActions }) : null,
       (batchActions.length || hasBatchEditor) && selected.size > 0 ? /* @__PURE__ */ jsxs("div", { className: "twc-dt__batch", children: [
         /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__batch-x", onClick: clearSelection, "aria-label": "Clear selection", children: /* @__PURE__ */ jsx(Svg, { d: I.x }) }),
         /* @__PURE__ */ jsxs("span", { className: "twc-dt__batch-count", children: [
           selected.size,
           " selected"
         ] }),
+        selectionSummary != null ? /* @__PURE__ */ jsx("span", { className: "twc-dt__batch-summary", children: typeof selectionSummary === "function" ? selectionSummary(selKeys, selectedRows) : selectionSummary }) : null,
         /* @__PURE__ */ jsxs("div", { className: "twc-dt__batch-actions", children: [
           hasBatchEditor ? /* @__PURE__ */ jsxs("button", { type: "button", className: "twc-dt__batch-btn", onClick: (e) => openBatchEditor(e.currentTarget), children: [
             /* @__PURE__ */ jsx(Svg, { d: I.pencil }),
@@ -13107,6 +13114,7 @@ function Datatable({
           }
         )
       ] }) : null,
+      toolbarActions != null ? /* @__PURE__ */ jsx("div", { className: "twc-dt__toolbar-actions", children: toolbarActions }) : null,
       searchable ? /* @__PURE__ */ jsxs("div", { className: "twc-dt__search", children: [
         /* @__PURE__ */ jsx(Svg, { d: I.search }),
         /* @__PURE__ */ jsx("input", { ref: quickSearchRef, placeholder: "Search\u2026", "aria-label": "Search rows", value: quick, onChange: (e) => commitQuick(e.target.value) }),
@@ -14395,6 +14403,11 @@ var CARDGRID_CSS = `
   padding: var(--space-2) var(--space-3); border: var(--border-thin) solid var(--color-primary-border);
   background: var(--color-primary-subtle); border-radius: var(--radius-md); }
 .twc-cardgrid__batch-count { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-primary-subtle-fg); }
+/* #492: same slot, same contract as Datatable. Weight, not a lighter token - this bar is
+   --color-primary-subtle, where --color-text-subtle is 4.26:1 and fails normal-text contrast. */
+.twc-cardgrid__batch-summary { display: inline-flex; align-items: center; gap: var(--space-2);
+  font-size: var(--text-sm); color: var(--color-primary-subtle-fg); }
+.twc-cardgrid__batch-summary::before { content: ""; width: var(--border-thin); height: 14px; background: currentColor; opacity: 0.35; }
 .twc-cardgrid__batch-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
 .twc-cardgrid__batch-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-h-sm);
   padding-inline: var(--space-3); border: var(--border-thin) solid var(--color-border); background: var(--color-surface);
@@ -14450,6 +14463,7 @@ function CardGrid({
   // the whole point, and it was the only Datatable affordance CardGrid lacked.
   checkboxSelection = false,
   batchActions = [],
+  selectionSummary,
   onRowSelectionChange,
   selectionPlacement = "top-start",
   selectionLabel,
@@ -14657,6 +14671,7 @@ function CardGrid({
         selected.size,
         " selected"
       ] }),
+      selectionSummary != null ? /* @__PURE__ */ jsx("span", { className: "twc-cardgrid__batch-summary", children: typeof selectionSummary === "function" ? selectionSummary(selKeys, selectedRows) : selectionSummary }) : null,
       showSelectAll && pageRows.length > 0 ? /* @__PURE__ */ jsxs("label", { className: "twc-cardgrid__selall", children: [
         /* @__PURE__ */ jsx(
           Checkbox,