twico-ui 1.17.2 → 1.18.1

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.1](https://github.com/EncryptionL/twico-ui/compare/v1.18.0...v1.18.1) (2026-07-23)
+
+
+### Bug Fixes
+
+* **datatable:** stop the reorder grip from clipping the selection checkbox ([096f5e8](https://github.com/EncryptionL/twico-ui/commit/096f5e8977949bc664ffcec21931c9062d831522)), closes [#261](https://github.com/EncryptionL/twico-ui/issues/261)
+
+# [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);
@@ -9372,7 +9451,8 @@ function Datatable({
     return [...L, ...mid, ...R];
   }, [pins, hidden, visibleCols, colByField, order]);
   const NUM_W = 56;
-  const numLeft = checkboxSelection ? 44 : 0;
+  const CHK_W = checkboxSelection ? rowReorder ? 68 : 44 : 0;
+  const numLeft = CHK_W;
   const leadW = numLeft + (showRowNum ? NUM_W : 0);
   const stickyOf = (field) => {
     if (pins.left.includes(field)) {
@@ -10295,7 +10375,7 @@ function Datatable({
         onDragEnd: reorderable ? () => setRowDrag({ from: null, over: null, after: false }) : void 0,
         onClick: (e) => handleRowClick(e, k, row),
         children: [
-          checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", "data-pin-edge": pins.left.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: 44 }, children: [
+          checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", "data-pin-edge": pins.left.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: CHK_W }, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
               reorderable ? rowHandle(k, midIdx, row) : null,
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -10703,7 +10783,7 @@ function Datatable({
         onKeyDown: onGridKeyDown,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("thead", { ref: theadRef, children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { role: "row", "aria-rowindex": 1, children: [
-            checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("th", { className: "twc-dt__th", role: "columnheader", "aria-label": "Select", "data-pin": "left", "data-pin-edge": pins.left.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: 44, minWidth: 44 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__th-inner", style: { justifyContent: "center", padding: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("th", { className: "twc-dt__th", role: "columnheader", "aria-label": "Select", "data-pin": "left", "data-pin-edge": pins.left.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: CHK_W, minWidth: CHK_W }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__th-inner", style: { justifyContent: "center", padding: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
                 className: "twc-dt__check",
@@ -10879,7 +10959,7 @@ function Datatable({
             })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? Array.from({ length: paginated ? Math.min(sizeVal, 8) : 8 }).map((_, ri) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "twc-dt__row", role: "row", children: [
-            checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", style: { insetInlineStart: 0, width: 44 }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "18px", height: 18, borderRadius: 4 } }) }) : null,
+            checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", style: { insetInlineStart: 0, width: CHK_W }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "18px", height: 18, borderRadius: 4 } }) }) : null,
             showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "16px", height: 14, borderRadius: 4 } }) }) : null,
             ordered.map((c, ci) => {
               const st = stickyOf(c.field);
@@ -10901,7 +10981,7 @@ function Datatable({
             pinnedBottomRows.map((row) => renderLeaf(row, keyIndex.get(keyOf(row)), "bottom"))
           ] }) }),
           hasAggregation && aggOn && !loading && paged.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("tfoot", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { role: "row", children: [
-            checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { role: "gridcell", "data-pin": "left", "data-pin-edge": pins.left.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: 44 } }) : null,
+            checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { role: "gridcell", "data-pin": "left", "data-pin-edge": pins.left.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: CHK_W } }) : null,
             showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": pins.left.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W } }) : null,
             ordered.map((c) => {
               const st = stickyOf(c.field);
@@ -17809,21 +17889,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;