twico-ui 1.3.1 → 1.4.0

package/dist/index.d.cts

@@ -541,9 +541,9 @@ declare function CurrencyField(props: CurrencyFieldProps): React.JSX.Element;
  * Advanced data table (Material UI Data Grid Premium style): sortable, filterable
  * (per-column operators + quick search), hideable (with a searchable column list),
  * and pinnable (left/right, sticky) columns, drag-to-reorder and drag-to-resize
- * columns, a column-management + filter toolbar, density control, CSV export,
- * an optional aggregation/summary footer, optional checkbox selection with a
- * batch-action toolbar, an actions column (per-row icon buttons + overflow menu),
+ * columns, a column-management + filter toolbar (with opt-in density / aggregation /
+ * pivot / CSV-export tools), an optional aggregation/summary footer, optional
+ * checkbox selection with a batch-action toolbar, an actions column (per-row icon buttons + overflow menu),
  * page-number pagination with a configurable rows-per-page selector, a skeleton
  * loading state, and an optional server-side mode (sort/filter/paginate on the
  * backend — only the current page is loaded). Filter controls and the pager are
@@ -579,7 +579,7 @@ interface DatatableProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "row
    * full row objects server-side rather than relying on `selectedRows`.
    */
   batchActions?: DatatableBatchAction[];
-  /** Row height preset. The toolbar density button cycles it locally; changing this prop re-applies it. @default "standard" */
+  /** Row height preset. With `showDensity`, the toolbar density button cycles it locally; changing this prop re-applies it. @default "comfortable" */
   density?: "compact" | "standard" | "comfortable";
   /** Initial rows per page. 0 disables pagination. @default 10 */
   pageSize?: number;
@@ -598,8 +598,13 @@ interface DatatableProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "row
   rowCount?: number;
   /** Server-mode callback fired (debounced) whenever the query changes. */
   onServerChange?: (state: DatatableQuery) => void;
-  /** Show the Export toolbar button (split button: click = CSV, chevron = format menu). @default true */
+  /** Show the Export toolbar button (split button: click = CSV, chevron = format menu). @default false */
   showExport?: boolean;
+  /** Show the row-density toolbar button (cycles compact / standard / comfortable). The `density` prop
+   *  still sets the row height even when this button is hidden. @default false */
+  showDensity?: boolean;
+  /** Show the Pivot toolbar button. Also shown automatically when `pivot` or `pivotMode` is set. @default false */
+  showPivot?: boolean;
   /** Filename (without extension) for exports (CSV / Excel). @default "export" */
   exportFilename?: string;
   /** Server-mode precomputed aggregation. Per field, either a scalar/node (used as-is) or a per-function map
@@ -637,7 +642,9 @@ interface DatatableProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "row
   onCellClick?: (value: any, row: any, field: string) => void;
   /** Fired when the active cell changes: ({ key, field } | null). */
   onActiveCellChange?: (cell: { key: string | number; field: string } | null) => void;
-  /** “Show totals row” state (changing the prop re-applies it; the user can also toggle it in the toolbar **Aggregation** panel). Aggregation is configured at runtime from that panel (pick columns + function); a column's `aggregation` prop just seeds the initial choice. @default false */
+  /** Show the **Aggregation** toolbar button and start with the totals row on. From that panel the user
+   *  toggles totals and picks columns + functions (a column's `aggregation` prop seeds the initial choice);
+   *  changing the prop re-applies it. When false (the default) the Aggregation button is hidden. @default false */
   showAggregation?: boolean;
   /** Accessible label for the grid (role="grid"). A standard `aria-label` prop takes precedence. @default "Data table" */
   ariaLabel?: string;

package/dist/index.d.ts

@@ -541,9 +541,9 @@ declare function CurrencyField(props: CurrencyFieldProps): React.JSX.Element;
  * Advanced data table (Material UI Data Grid Premium style): sortable, filterable
  * (per-column operators + quick search), hideable (with a searchable column list),
  * and pinnable (left/right, sticky) columns, drag-to-reorder and drag-to-resize
- * columns, a column-management + filter toolbar, density control, CSV export,
- * an optional aggregation/summary footer, optional checkbox selection with a
- * batch-action toolbar, an actions column (per-row icon buttons + overflow menu),
+ * columns, a column-management + filter toolbar (with opt-in density / aggregation /
+ * pivot / CSV-export tools), an optional aggregation/summary footer, optional
+ * checkbox selection with a batch-action toolbar, an actions column (per-row icon buttons + overflow menu),
  * page-number pagination with a configurable rows-per-page selector, a skeleton
  * loading state, and an optional server-side mode (sort/filter/paginate on the
  * backend — only the current page is loaded). Filter controls and the pager are
@@ -579,7 +579,7 @@ interface DatatableProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "row
    * full row objects server-side rather than relying on `selectedRows`.
    */
   batchActions?: DatatableBatchAction[];
-  /** Row height preset. The toolbar density button cycles it locally; changing this prop re-applies it. @default "standard" */
+  /** Row height preset. With `showDensity`, the toolbar density button cycles it locally; changing this prop re-applies it. @default "comfortable" */
   density?: "compact" | "standard" | "comfortable";
   /** Initial rows per page. 0 disables pagination. @default 10 */
   pageSize?: number;
@@ -598,8 +598,13 @@ interface DatatableProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "row
   rowCount?: number;
   /** Server-mode callback fired (debounced) whenever the query changes. */
   onServerChange?: (state: DatatableQuery) => void;
-  /** Show the Export toolbar button (split button: click = CSV, chevron = format menu). @default true */
+  /** Show the Export toolbar button (split button: click = CSV, chevron = format menu). @default false */
   showExport?: boolean;
+  /** Show the row-density toolbar button (cycles compact / standard / comfortable). The `density` prop
+   *  still sets the row height even when this button is hidden. @default false */
+  showDensity?: boolean;
+  /** Show the Pivot toolbar button. Also shown automatically when `pivot` or `pivotMode` is set. @default false */
+  showPivot?: boolean;
   /** Filename (without extension) for exports (CSV / Excel). @default "export" */
   exportFilename?: string;
   /** Server-mode precomputed aggregation. Per field, either a scalar/node (used as-is) or a per-function map
@@ -637,7 +642,9 @@ interface DatatableProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "row
   onCellClick?: (value: any, row: any, field: string) => void;
   /** Fired when the active cell changes: ({ key, field } | null). */
   onActiveCellChange?: (cell: { key: string | number; field: string } | null) => void;
-  /** “Show totals row” state (changing the prop re-applies it; the user can also toggle it in the toolbar **Aggregation** panel). Aggregation is configured at runtime from that panel (pick columns + function); a column's `aggregation` prop just seeds the initial choice. @default false */
+  /** Show the **Aggregation** toolbar button and start with the totals row on. From that panel the user
+   *  toggles totals and picks columns + functions (a column's `aggregation` prop seeds the initial choice);
+   *  changing the prop re-applies it. When false (the default) the Aggregation button is hidden. @default false */
   showAggregation?: boolean;
   /** Accessible label for the grid (role="grid"). A standard `aria-label` prop takes precedence. @default "Data table" */
   ariaLabel?: string;

package/dist/index.mjs

@@ -187,7 +187,9 @@ function initials(name) {
 function safeSrc(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
-  return s.startsWith("javascript:") || s.startsWith("vbscript:") ? void 0 : url;
+  if (s.startsWith("javascript:") || s.startsWith("vbscript:")) return void 0;
+  if (s.startsWith("data:") && !s.startsWith("data:image/")) return void 0;
+  return url;
 }
 function Avatar({
   src,
@@ -3780,6 +3782,7 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
 .twc-dt__sw[data-on="true"]::after { transform: translateX(14px); }
 .twc-dt__panel-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; }
 .twc-dt__panel-title { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle); }
+.twc-dt__panel-count { font-weight: 600; color: var(--color-text-muted); text-transform: none; letter-spacing: 0; margin-inline-start: 6px; font-variant-numeric: tabular-nums; }
 .twc-dt__link { border: none; background: transparent; color: var(--color-primary); font-family: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: var(--radius-sm); }
 .twc-dt__link:hover { background: var(--color-primary-subtle); }
 
@@ -4177,7 +4180,7 @@ function Datatable({
   loading = false,
   rowKey,
   checkboxSelection = false,
-  density: densityProp = "standard",
+  density: densityProp = "comfortable",
   pageSize = 10,
   pageSizeOptions = [5, 10, 25, 50],
   height = 440,
@@ -4185,7 +4188,9 @@ function Datatable({
   rowCount,
   onServerChange,
   batchActions = [],
-  showExport = true,
+  showExport = false,
+  showDensity = false,
+  showPivot = false,
   exportFilename = "export",
   aggregationValues = null,
   disableColumnReorder = false,
@@ -4724,7 +4729,7 @@ function Datatable({
     rowFocusRef.current = null;
     const root = gridRef.current;
     if (!root) return;
-    const sel = typeof CSS !== "undefined" && CSS.escape ? CSS.escape(String(key)) : String(key).replace(/"/g, '\\"');
+    const sel = typeof CSS !== "undefined" && CSS.escape ? CSS.escape(String(key)) : String(key).replace(/[\\"]/g, "\\$&");
     const el = root.querySelector(`.twc-dt__row-handle[data-row-key="${sel}"]`);
     if (el) el.focus();
   });
@@ -5274,6 +5279,8 @@ function Datatable({
   };
   const shownColRows = cols.filter((c) => c.field !== "__pinactions__" && c.headerName.toLowerCase().includes(colQuery.trim().toLowerCase())).sort((a, b) => orderIdxOf(a.field) - orderIdxOf(b.field));
   const rowNumMatch = rowNumbers && "row number".includes(colQuery.trim().toLowerCase());
+  const manageableCols = cols.filter((c) => c.field !== "__pinactions__");
+  const visibleColCount = manageableCols.filter((c) => !hidden.has(c.field)).length;
   const rppOptions = Array.from(new Set([...pageSizeOptions || [], pageSize].filter((n) => n > 0))).sort((a, b) => a - b).map((n) => ({ value: String(n), label: String(n) }));
   const totalCols = ordered.length + (checkboxSelection ? 1 : 0) + (showRowNum ? 1 : 0);
   function renderGroupRow(item) {
@@ -5636,11 +5643,11 @@ function Datatable({
           ]
         }
       ),
-      /* @__PURE__ */ jsxs("button", { type: "button", className: "twc-dt__tbtn", "data-tip": "Change row density", onClick: () => setDensity((d) => d === "compact" ? "standard" : d === "standard" ? "comfortable" : "compact"), children: [
+      showDensity ? /* @__PURE__ */ jsxs("button", { type: "button", className: "twc-dt__tbtn", "data-tip": "Change row density", onClick: () => setDensity((d) => d === "compact" ? "standard" : d === "standard" ? "comfortable" : "compact"), children: [
         /* @__PURE__ */ jsx(Svg, { d: I.density }),
         /* @__PURE__ */ jsx("span", { className: "twc-dt__tlabel", children: density[0].toUpperCase() + density.slice(1) })
-      ] }),
-      /* @__PURE__ */ jsxs(
+      ] }) : null,
+      showAggregation ? /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
@@ -5665,8 +5672,8 @@ function Datatable({
             aggOn && hasAggregation ? /* @__PURE__ */ jsx("span", { className: "twc-dt__tbadge", children: ordered.filter((c) => aggOf(c)).length }) : null
           ]
         }
-      ),
-      /* @__PURE__ */ jsxs(
+      ) : null,
+      showPivot || pivotMode || pivot != null || pivotActive ? /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
@@ -5691,7 +5698,7 @@ function Datatable({
             pivotActive ? /* @__PURE__ */ jsx("span", { className: "twc-dt__tdot", "aria-label": "on", role: "img" }) : null
           ]
         }
-      ),
+      ) : null,
       showExport ? /* @__PURE__ */ jsxs("span", { className: "twc-dt__export", children: [
         /* @__PURE__ */ jsxs("button", { type: "button", className: "twc-dt__export-main", "data-tip": "Export to CSV", onClick: () => exportData("csv"), "aria-label": "Export to CSV", children: [
           /* @__PURE__ */ jsx(Svg, { d: I.download }),
@@ -6260,7 +6267,14 @@ function Datatable({
     ) : null,
     panel === "columns" && panelPos ? /* @__PURE__ */ jsxs("div", { className: "twc-dt__pop twc-dt__cols", style: { top: panelPos.top, left: panelPos.left }, role: "dialog", "aria-label": "Column settings", children: [
       /* @__PURE__ */ jsxs("div", { className: "twc-dt__panel-head", children: [
-        /* @__PURE__ */ jsx("span", { className: "twc-dt__panel-title", children: "Columns" }),
+        /* @__PURE__ */ jsxs("span", { className: "twc-dt__panel-title", children: [
+          "Columns ",
+          /* @__PURE__ */ jsxs("span", { className: "twc-dt__panel-count", title: `${visibleColCount} of ${manageableCols.length} columns shown`, children: [
+            visibleColCount,
+            "/",
+            manageableCols.length
+          ] })
+        ] }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__link", onClick: () => setHidden(/* @__PURE__ */ new Set()), children: "Show all" }),
           /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__link", onClick: () => setHidden(new Set(cols.filter((c) => c.hideable).map((c) => c.field))), children: "Hide all" })
@@ -8836,8 +8850,10 @@ var SIDEBAR_CSS = `
 .twc-sidebar__badge { flex: none; font-size: 11px; font-weight: var(--font-bold); padding: 1px 7px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-primary-fg); opacity: 1; visibility: visible;
   transition: opacity var(--duration-fast) var(--ease-standard) var(--duration-fast), visibility 0s; }
 .twc-sidebar[data-collapsed="true"] .twc-sidebar__badge { opacity: 0; visibility: hidden; transition: opacity var(--duration-instant) var(--ease-standard), visibility 0s var(--duration-instant); }
-/* Collapsed: pad the head so the brand mark lines up with the nav icon column (23px). */
-.twc-sidebar[data-collapsed="true"] .twc-sidebar__head { padding: 0 calc(var(--space-3) + 11px); }
+/* Collapsed: centre the brand mark in the 68px rail (\u2248 the nav icon column) with no
+   right padding, so a mark wider than the icons isn't clipped. flex-start (not
+   justify-content) keeps it from jolting to centre while the rail is still wide. */
+.twc-sidebar[data-collapsed="true"] .twc-sidebar__head { padding-inline: 18px 0; }
 .twc-sidebar[data-collapsed="true"] .twc-sidebar__brand, .twc-sidebar[data-collapsed="true"] .twc-sidebar__foot-user { font-size: 0; gap: 0; }
 .twc-sidebar[data-collapsed="true"] .twc-sidebar__foot-user { justify-content: center; }
 .twc-sidebar__brand > :not(:first-child) { visibility: visible; transition: opacity var(--duration-fast) var(--ease-standard) var(--duration-fast), visibility 0s; }
@@ -9066,7 +9082,7 @@ function Slider({
   }
   function onKeyDown(e) {
     if (disabled) return;
-    let next = val;
+    let next;
     if (e.key === "ArrowRight" || e.key === "ArrowUp") next = clampSnap(val + step);
     else if (e.key === "ArrowLeft" || e.key === "ArrowDown") next = clampSnap(val - step);
     else if (e.key === "Home") next = min;