twico-ui 1.22.1 → 1.22.3

package/dist/index.d.cts

@@ -1953,7 +1953,10 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   rowReorder?: boolean;
   /** Enable drag-to-resize row height (handle on the row's bottom edge). @default false */
   rowResize?: boolean;
-  /** Called with the new array of row keys after a drag-reorder. */
+  /** Called with the new array of row keys after a drag-reorder. In `serverMode` the drag order is
+   *  an optimistic overlay: persist the keys, then hand back a new `rows` prop — the overlay clears on
+   *  any `rows` change, so a rejected reorder reverts (reload the authoritative order) and a
+   *  server-corrected order reflects, both without remounting. */
   onRowOrderChange?: (keys: Array<string | number>) => void;
   /** Initial pivot model (seeds the toolbar **Pivot** panel, which the user can edit live): aggregate `values` across `rows` (row groups) × `columns` (nested column groups). */
   pivot?: {

package/dist/index.d.ts

@@ -1953,7 +1953,10 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   rowReorder?: boolean;
   /** Enable drag-to-resize row height (handle on the row's bottom edge). @default false */
   rowResize?: boolean;
-  /** Called with the new array of row keys after a drag-reorder. */
+  /** Called with the new array of row keys after a drag-reorder. In `serverMode` the drag order is
+   *  an optimistic overlay: persist the keys, then hand back a new `rows` prop — the overlay clears on
+   *  any `rows` change, so a rejected reorder reverts (reload the authoritative order) and a
+   *  server-corrected order reflects, both without remounting. */
   onRowOrderChange?: (keys: Array<string | number>) => void;
   /** Initial pivot model (seeds the toolbar **Pivot** panel, which the user can edit live): aggregate `values` across `rows` (row groups) × `columns` (nested column groups). */
   pivot?: {

package/dist/index.mjs

@@ -9278,6 +9278,9 @@ function Datatable({
   const [headH, setHeadH] = React51__default.useState(41);
   const theadRef = React51__default.useRef(null);
   const [rowOrder, setRowOrder] = React51__default.useState(null);
+  React51__default.useEffect(() => {
+    if (serverMode) setRowOrder(null);
+  }, [rows, serverMode]);
   const [rowHeights, setRowHeights] = React51__default.useState({});
   const [rowDrag, setRowDrag] = React51__default.useState({ from: null, over: null, after: false });
   const [rowGrab, setRowGrab] = React51__default.useState(null);
@@ -9337,6 +9340,7 @@ function Datatable({
     }
   };
   const stateReadyRef = React51__default.useRef(false);
+  const stateRestoredRef = React51__default.useRef(false);
   const onStateChangeRef = React51__default.useRef(onStateChange);
   onStateChangeRef.current = onStateChange;
   React51__default.useEffect(() => {
@@ -9352,7 +9356,7 @@ function Datatable({
     }
     return void 0;
   }, [filters, sort, quick, pageVal, sizeVal, order, widths, hidden, pins, density, fWidths, fPanelSize, stateKey]);
-  React51__default.useEffect(() => {
+  const restoreState = () => {
     let saved = null;
     if (stateKey) {
       try {
@@ -9363,8 +9367,22 @@ function Datatable({
     }
     if (!saved && initialState) saved = initialState;
     if (saved) applyState(saved);
-    stateReadyRef.current = true;
+    stateRestoredRef.current = true;
+  };
+  React51__default.useEffect(() => {
+    if (columns.length) {
+      restoreState();
+      stateReadyRef.current = true;
+    }
+    return () => {
+      stateReadyRef.current = false;
+    };
   }, []);
+  React51__default.useEffect(() => {
+    if (stateRestoredRef.current || !columns.length) return;
+    restoreState();
+    stateReadyRef.current = true;
+  }, [columns.length]);
   const rootRef = React51__default.useRef(null);
   const [compact, setCompact] = React51__default.useState(false);
   React51__default.useEffect(() => {
@@ -9437,20 +9455,19 @@ function Datatable({
   React51__default.useEffect(() => {
     setOrder((prev) => mergeColOrder(prev, columns.map((c) => c.field).filter(Boolean)));
   }, [columns]);
-  const densitySyncedRef = React51__default.useRef(false);
+  const densityPropRef = React51__default.useRef(densityProp);
   React51__default.useEffect(() => {
-    if (densitySyncedRef.current) setDensity(densityProp);
-    else densitySyncedRef.current = true;
+    if (densityPropRef.current === densityProp) return;
+    densityPropRef.current = densityProp;
+    setDensity(densityProp);
   }, [densityProp]);
   React51__default.useEffect(() => {
     setAggOn(showAggregation);
   }, [showAggregation]);
-  const pageSizeSyncedRef = React51__default.useRef(false);
+  const pageSizePropRef = React51__default.useRef(pageSize);
   React51__default.useEffect(() => {
-    if (!pageSizeSyncedRef.current) {
-      pageSizeSyncedRef.current = true;
-      return;
-    }
+    if (pageSizePropRef.current === pageSize) return;
+    pageSizePropRef.current = pageSize;
     if (pageSizeControlled) return;
     setInternalRpp(pageSize > 0 ? pageSize : 10);
     setInternalPage(0);