twico-ui 1.3.1 → 1.4.0

package/dist/index.cjs

@@ -208,7 +208,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,
@@ -3801,6 +3803,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); }
 
@@ -4198,7 +4201,7 @@ function Datatable({
   loading = false,
   rowKey,
   checkboxSelection = false,
-  density: densityProp = "standard",
+  density: densityProp = "comfortable",
   pageSize = 10,
   pageSizeOptions = [5, 10, 25, 50],
   height = 440,
@@ -4206,7 +4209,9 @@ function Datatable({
   rowCount,
   onServerChange,
   batchActions = [],
-  showExport = true,
+  showExport = false,
+  showDensity = false,
+  showPivot = false,
   exportFilename = "export",
   aggregationValues = null,
   disableColumnReorder = false,
@@ -4745,7 +4750,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();
   });
@@ -5295,6 +5300,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) {
@@ -5657,11 +5664,11 @@ function Datatable({
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Svg, { d: I.density }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__tlabel", children: density[0].toUpperCase() + density.slice(1) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
+      ] }) : null,
+      showAggregation ? /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           type: "button",
@@ -5686,8 +5693,8 @@ function Datatable({
             aggOn && hasAggregation ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__tbadge", children: ordered.filter((c) => aggOf(c)).length }) : null
           ]
         }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
+      ) : null,
+      showPivot || pivotMode || pivot != null || pivotActive ? /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           type: "button",
@@ -5712,7 +5719,7 @@ function Datatable({
             pivotActive ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__tdot", "aria-label": "on", role: "img" }) : null
           ]
         }
-      ),
+      ) : null,
       showExport ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__export", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-dt__export-main", "data-tip": "Export to CSV", onClick: () => exportData("csv"), "aria-label": "Export to CSV", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.download }),
@@ -6281,7 +6288,14 @@ function Datatable({
     ) : null,
     panel === "columns" && panelPos ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__pop twc-dt__cols", style: { top: panelPos.top, left: panelPos.left }, role: "dialog", "aria-label": "Column settings", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__panel-head", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__panel-title", children: "Columns" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__panel-title", children: [
+          "Columns ",
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__panel-count", title: `${visibleColCount} of ${manageableCols.length} columns shown`, children: [
+            visibleColCount,
+            "/",
+            manageableCols.length
+          ] })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__link", onClick: () => setHidden(/* @__PURE__ */ new Set()), children: "Show all" }),
           /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__link", onClick: () => setHidden(new Set(cols.filter((c) => c.hideable).map((c) => c.field))), children: "Hide all" })
@@ -8857,8 +8871,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; }
@@ -9087,7 +9103,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;