twico-ui 1.17.2 → 1.18.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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)
 
 

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);
@@ -17809,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;