twico-ui 1.17.1 → 1.18.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to Twico UI are documented here (newest first). This file is generated automatically on each release by [semantic-release](https://semantic-release.gitbook.io/) from [Conventional Commits](https://www.conventionalcommits.org/) — do not edit it by hand. The same notes appear on each [GitHub Release](https://github.com/EncryptionL/twico-ui/releases).
 
+# [1.18.0](https://github.com/EncryptionL/twico-ui/compare/v1.17.2...v1.18.0) (2026-07-17)
+
+
+### Bug Fixes
+
+* **hooks:** copy off a secure origin via execCommand fallback ([2786e74](https://github.com/EncryptionL/twico-ui/commit/2786e7414aec19832eacb8277830f72ae935307e)), closes [#255](https://github.com/EncryptionL/twico-ui/issues/255)
+
+
+### Features
+
+* **datatable:** persist & restore view state via stateKey/initialState/onStateChange ([0830d59](https://github.com/EncryptionL/twico-ui/commit/0830d591e9bfb21395efa72ad67286326471371b)), closes [#45](https://github.com/EncryptionL/twico-ui/issues/45) [#259](https://github.com/EncryptionL/twico-ui/issues/259)
+
+## [1.17.2](https://github.com/EncryptionL/twico-ui/compare/v1.17.1...v1.17.2) (2026-07-17)
+
+
+### Bug Fixes
+
+* **datatable:** clamp footer range + title on truncated cells/headers ([#252](https://github.com/EncryptionL/twico-ui/issues/252), [#253](https://github.com/EncryptionL/twico-ui/issues/253)) ([21a023e](https://github.com/EncryptionL/twico-ui/commit/21a023eb20aa8d05b5413ea752c18e32e15a03dc))
+
 ## [1.17.1](https://github.com/EncryptionL/twico-ui/compare/v1.17.0...v1.17.1) (2026-07-15)
 
 

package/dist/index.cjs

@@ -9011,6 +9011,9 @@ function Datatable({
   onBatchUpdate,
   showBatchEdit = true,
   batchEditFields = null,
+  stateKey,
+  initialState,
+  onStateChange,
   showPageJumper = true,
   selectionMode = "none",
   onRowClick,
@@ -9173,6 +9176,75 @@ function Datatable({
   const [rowGrab, setRowGrab] = React51__namespace.default.useState(null);
   const [reorderMsg, setReorderMsg] = React51__namespace.default.useState("");
   const rowFocusRef = React51__namespace.default.useRef(null);
+  const serializeState = () => ({
+    filters: filters.map(({ id, ...f }) => f),
+    // strip the internal row id
+    sort,
+    quickFilter: quick,
+    page: pageVal,
+    pageSize: sizeVal,
+    columnOrder: order,
+    columnWidths: widths,
+    columnVisibility: Object.fromEntries([...hidden].map((f) => [f, false])),
+    // absent = visible
+    columnPinning: Object.fromEntries([...pins.left.map((f) => [f, "left"]), ...pins.right.map((f) => [f, "right"])]),
+    density
+  });
+  const applyState = (s) => {
+    if (!s || typeof s !== "object") return;
+    const known = new Set(cols.map((c) => c.field).filter(Boolean));
+    if (Array.isArray(s.filters)) setFilters(s.filters.filter((f) => f && known.has(f.field)).map((f, i) => ({ id: Date.now() + Math.random() + i, field: f.field, op: f.op, value: f.value })));
+    if ("sort" in s) setSort(s.sort && known.has(s.sort.field) ? { field: s.sort.field, dir: s.sort.dir === "desc" ? "desc" : "asc" } : null);
+    if (typeof s.quickFilter === "string" && quickFilter === void 0) setInternalQuick(s.quickFilter);
+    if (typeof s.page === "number" && !pageControlled) setInternalPage(Math.max(0, Math.floor(s.page)));
+    if (typeof s.pageSize === "number" && !pageSizeControlled) setInternalRpp(s.pageSize > 0 ? s.pageSize : 10);
+    if (Array.isArray(s.columnOrder)) {
+      const savedOrder = s.columnOrder.filter((f) => known.has(f));
+      const missing = cols.map((c) => c.field).filter((f) => f && !savedOrder.includes(f));
+      setOrder([...savedOrder, ...missing]);
+    }
+    if (s.columnWidths && typeof s.columnWidths === "object") setWidths(Object.fromEntries(Object.entries(s.columnWidths).filter(([f, w]) => known.has(f) && typeof w === "number")));
+    if (s.columnVisibility && typeof s.columnVisibility === "object") setHidden(new Set(Object.keys(s.columnVisibility).filter((f) => known.has(f) && s.columnVisibility[f] === false)));
+    if (s.columnPinning && typeof s.columnPinning === "object") {
+      const l = [], r2 = [];
+      for (const [f, side] of Object.entries(s.columnPinning)) {
+        if (!known.has(f)) continue;
+        if (side === "left") l.push(f);
+        else if (side === "right") r2.push(f);
+      }
+      setPins({ left: l, right: r2 });
+    }
+    if (s.density === "compact" || s.density === "standard" || s.density === "comfortable") setDensity(s.density);
+  };
+  const stateReadyRef = React51__namespace.default.useRef(false);
+  const onStateChangeRef = React51__namespace.default.useRef(onStateChange);
+  onStateChangeRef.current = onStateChange;
+  React51__namespace.default.useEffect(() => {
+    if (!stateReadyRef.current) return void 0;
+    if (!stateKey && !onStateChange) return void 0;
+    const state = serializeState();
+    onStateChangeRef.current?.(state);
+    if (stateKey) {
+      try {
+        window.localStorage.setItem(stateKey, JSON.stringify(state));
+      } catch {
+      }
+    }
+    return void 0;
+  }, [filters, sort, quick, pageVal, sizeVal, order, widths, hidden, pins, density, stateKey]);
+  React51__namespace.default.useEffect(() => {
+    let saved = null;
+    if (stateKey) {
+      try {
+        const raw = window.localStorage.getItem(stateKey);
+        if (raw) saved = JSON.parse(raw);
+      } catch {
+      }
+    }
+    if (!saved && initialState) saved = initialState;
+    if (saved) applyState(saved);
+    stateReadyRef.current = true;
+  }, []);
   const rootRef = React51__namespace.default.useRef(null);
   const [compact, setCompact] = React51__namespace.default.useState(false);
   React51__namespace.default.useEffect(() => {
@@ -9214,13 +9286,20 @@ function Datatable({
       return [...kept, ...added];
     });
   }, [columns]);
+  const densitySyncedRef = React51__namespace.default.useRef(false);
   React51__namespace.default.useEffect(() => {
-    setDensity(densityProp);
+    if (densitySyncedRef.current) setDensity(densityProp);
+    else densitySyncedRef.current = true;
   }, [densityProp]);
   React51__namespace.default.useEffect(() => {
     setAggOn(showAggregation);
   }, [showAggregation]);
+  const pageSizeSyncedRef = React51__namespace.default.useRef(false);
   React51__namespace.default.useEffect(() => {
+    if (!pageSizeSyncedRef.current) {
+      pageSizeSyncedRef.current = true;
+      return;
+    }
     if (pageSizeControlled) return;
     setInternalRpp(pageSize > 0 ? pageSize : 10);
     setInternalPage(0);
@@ -10328,6 +10407,8 @@ function Datatable({
             const editable = isColEditable(c);
             const isEditing = editing && editing.key === k && editing.field === c.field;
             const cellActive = selectionMode === "cell" && activeCell && activeCell.key === k && activeCell.field === c.field;
+            const display = c.valueFormatter ? c.valueFormatter(val, row) : val;
+            const cellTitle = !isActions && !c.renderCell && !isEditing && (typeof display === "string" || typeof display === "number") ? String(display) : void 0;
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "td",
               {
@@ -10346,14 +10427,14 @@ function Datatable({
                 "data-pin": st.pin,
                 "data-pin-edge": st.edge,
                 style: { width: widthOf(c), ...st.style },
-                title: isActions || c.renderCell || editable ? void 0 : String(val ?? ""),
+                title: cellTitle,
                 onClick: selectionMode === "cell" ? (e) => handleCellClick(e, k, row, c) : void 0,
                 onFocus: () => setFocus((f) => f.r === ri && f.c === ci ? f : { r: ri, c: ci }),
                 onDoubleClick: editable ? () => beginEdit(k, c, row) : void 0,
                 children: [
                   !checkboxSelection && reorderable && ci === 0 && !isEditing ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 6, maxWidth: "100%" }, children: [
                     rowHandle(k, midIdx, row),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: isActions ? renderActions(c, row) : c.renderCell ? c.renderCell(val, row) : c.valueFormatter ? c.valueFormatter(val, row) : val })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: isActions ? renderActions(c, row) : c.renderCell ? c.renderCell(val, row) : display })
                   ] }) : isEditing ? c.renderEditCell ? (
                     // #236: full escape hatch — the host drops in its own editor (searchable/creatable/
                     // async Combobox, …) and drives the lifecycle via commit/cancel. Wrapped in
@@ -10372,7 +10453,7 @@ function Datatable({
                       onCancel: cancelEdit,
                       onKeyDown: onEditKey
                     }
-                  ) : isActions ? renderActions(c, row) : c.renderCell ? c.renderCell(val, row) : c.valueFormatter ? c.valueFormatter(val, row) : val,
+                  ) : isActions ? renderActions(c, row) : c.renderCell ? c.renderCell(val, row) : display,
                   editable && !isEditing ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__edit-hint", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.pencil }) }) : null
                 ]
               },
@@ -10788,6 +10869,7 @@ function Datatable({
                           className: "twc-dt__th-label",
                           role: c.sortable ? "button" : void 0,
                           tabIndex: c.sortable ? 0 : void 0,
+                          title: typeof c.headerName === "string" ? c.headerName : void 0,
                           "aria-label": c.sortable ? `${c.headerName}, sort` : void 0,
                           draggable: reorderable || void 0,
                           onDragStart: reorderable ? (e) => {
@@ -10919,8 +11001,8 @@ function Datatable({
           const nf = (n) => n.toLocaleString();
           if (totalRows === 0) return "No rows";
           const shown = paged.length;
-          const start = paginated ? pageVal * sizeVal + 1 : 1;
-          const end = paginated ? start + shown - 1 : shown;
+          const start = paginated ? Math.min(pageVal * sizeVal + 1, totalRows) : 1;
+          const end = paginated ? Math.min(start + shown - 1, totalRows) : shown;
           return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             paginated ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               "Showing ",
@@ -17806,21 +17888,47 @@ function useLocalStorage(key, initialValue) {
   );
   return [stored, setValue];
 }
+function legacyCopy(text) {
+  try {
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.setAttribute("readonly", "");
+    ta.style.cssText = "position:fixed;top:0;left:0;width:1px;height:1px;padding:0;border:none;opacity:0;pointer-events:none;";
+    document.body.appendChild(ta);
+    const sel = document.getSelection();
+    const prev = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
+    ta.focus();
+    ta.select();
+    ta.setSelectionRange(0, ta.value.length);
+    const ok = document.execCommand("copy");
+    document.body.removeChild(ta);
+    if (prev && sel) {
+      sel.removeAllRanges();
+      sel.addRange(prev);
+    }
+    return ok;
+  } catch {
+    return false;
+  }
+}
 function useCopyToClipboard(timeout = 1500) {
   const [copied, setCopied] = React51__namespace.default.useState(false);
   const copy = React51__namespace.default.useCallback(async (text) => {
-    if (!canUseDOM2 || !navigator.clipboard) {
+    if (!canUseDOM2) {
       setCopied(false);
       return false;
     }
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      return true;
-    } catch (e) {
-      setCopied(false);
-      return false;
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        return true;
+      } catch {
+      }
     }
+    const ok = legacyCopy(String(text ?? ""));
+    setCopied(ok);
+    return ok;
   }, []);
   React51__namespace.default.useEffect(() => {
     if (!copied) return void 0;