warqadui 0.0.38 → 0.0.41

package/dist/index.js

@@ -3248,7 +3248,7 @@ var TableCell = import_react16.default.memo(
     );
   },
   (prev, next) => {
-    return prev.cell.getValue() === next.cell.getValue() && prev.cell.row.getIsExpanded() === next.cell.row.getIsExpanded() && prev.cell.row.getIsSelected() === next.cell.row.getIsSelected() && prev.rowPadding === next.rowPadding && prev.verticalLines === next.verticalLines;
+    return prev.cell.getValue() === next.cell.getValue() && prev.cell.row.original === next.cell.row.original && prev.cell.row.getIsExpanded() === next.cell.row.getIsExpanded() && prev.cell.row.getIsSelected() === next.cell.row.getIsSelected() && prev.rowPadding === next.rowPadding && prev.verticalLines === next.verticalLines;
   }
 );
 var TableRow = import_react16.default.memo(
@@ -3335,7 +3335,9 @@ function PostTable({
     }
     return initialState;
   });
-  const [data, setData] = (0, import_react16.useState)(controlledData || []);
+  const [internalData, setInternalData] = (0, import_react16.useState)(controlledData || []);
+  const isControlled = controlledData !== void 0;
+  const data = isControlled ? controlledData : internalData;
   const entryRowRef = (0, import_react16.useRef)(null);
   const focusAndScrollEntryRow = () => {
     setTimeout(() => {
@@ -3356,11 +3358,6 @@ function PostTable({
   (0, import_react16.useEffect)(() => {
     focusAndScrollEntryRow();
   }, []);
-  (0, import_react16.useEffect)(() => {
-    if (controlledData) {
-      setData(controlledData);
-    }
-  }, [controlledData]);
   const [entryData, setEntryData] = (0, import_react16.useState)({});
   const [editingIndex, setEditingIndex] = (0, import_react16.useState)(null);
   const [isSavingAsync, setIsSavingAsync] = (0, import_react16.useState)(false);
@@ -3392,23 +3389,21 @@ function PostTable({
     };
   });
   const handleSaveField = (0, import_react16.useCallback)(async () => {
-    const {
-      data: data2,
-      entryData: entryData2,
-      editingIndex: editingIndex2,
-      isSavingAsync: isSavingAsync2,
-      submitLoading: submitLoading2,
-      onChange: onChange2
-    } = latestStateRef.current;
+    const { data: data2, entryData: entryData2, editingIndex: editingIndex2, onChange: onChange2 } = latestStateRef.current;
     if (Object.keys(entryData2).length === 0) return;
-    let newData = [...data2];
-    if (editingIndex2 !== null) {
-      newData[editingIndex2] = {
-        ...newData[editingIndex2],
-        ...entryData2
+    const actionType = editingIndex2 !== null ? "edit" : "add";
+    const entryToSave = { ...entryData2 };
+    const updated = [...data2];
+    let entryToPass;
+    if (actionType === "edit" && editingIndex2 !== null) {
+      updated[editingIndex2] = {
+        ...updated[editingIndex2],
+        ...entryToSave
       };
+      entryToPass = updated[editingIndex2];
     } else {
-      newData = [...newData, entryData2];
+      updated.push(entryToSave);
+      entryToPass = updated[updated.length - 1];
     }
     if (onChange2) {
       setIsSavingAsync(true);
@@ -3434,12 +3429,11 @@ function PostTable({
             }));
           }
         };
-        const type = editingIndex2 !== null ? "edit" : "add";
         const result = await onChange2({
-          entryData: entryData2,
+          entryData: entryToPass,
           actions,
-          actionType: type,
-          fullData: newData
+          actionType,
+          fullData: updated
         });
         if (result === false) {
           setIsSavingAsync(false);
@@ -3450,14 +3444,14 @@ function PostTable({
         return;
       }
     }
-    setData(newData);
+    setInternalData(updated);
     setEntryData({});
     setFieldErrors({});
     setIsSavingAsync(false);
     if (editingIndex2 !== null) {
       setEditingIndex(null);
     } else {
-      focusAndScrollEntryRow();
+      setTimeout(() => focusAndScrollEntryRow(), 0);
     }
   }, []);
   const handleCancelEdit = (0, import_react16.useCallback)(() => {
@@ -3470,43 +3464,56 @@ function PostTable({
   const handleEdit = (0, import_react16.useCallback)((index2, rowOriginal) => {
     const { onEdit: onEdit2 } = latestStateRef.current;
     setEditingIndex(index2);
-    setEntryData(rowOriginal);
+    setEntryData({ ...rowOriginal });
     if (onEdit2) onEdit2(rowOriginal);
   }, []);
   const handleDelete = (0, import_react16.useCallback)(
-    (index2) => {
+    async (index2) => {
       const { data: data2, editingIndex: editingIndex2, onChange: onChange2, onDelete: onDelete2 } = latestStateRef.current;
       const rowToDelete = data2[index2];
-      const newData = data2.filter((_, i) => i !== index2);
-      setData(newData);
-      if (onDelete2) onDelete2(rowToDelete);
-      const actions = {
-        focus: (columnId) => {
-          if (entryRowRef.current) {
-            const td = entryRowRef.current.querySelector(
-              `td[data-column-id="${columnId}"]`
-            );
-            if (td) {
-              const input = td.querySelector(
-                `input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex='0'], [id*='${columnId}']`
-              );
-              if (input) input.focus();
+      const updated = data2.filter((_, i) => i !== index2);
+      if (onChange2) {
+        setIsSavingAsync(true);
+        try {
+          const actions = {
+            focus: (columnId) => {
+              if (entryRowRef.current) {
+                const td = entryRowRef.current.querySelector(
+                  `td[data-column-id="${columnId}"]`
+                );
+                if (td) {
+                  const input = td.querySelector(
+                    `input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex='0'], [id*='${columnId}']`
+                  );
+                  if (input) input.focus();
+                }
+              }
+            },
+            setError: (columnId, error) => {
+              setFieldErrors((prev) => ({
+                ...prev,
+                [columnId]: error
+              }));
             }
+          };
+          const result = await onChange2({
+            entryData: rowToDelete,
+            actions,
+            actionType: "delete",
+            fullData: updated
+          });
+          if (result === false) {
+            setIsSavingAsync(false);
+            return;
           }
-        },
-        setError: (columnId, error) => {
-          setFieldErrors((prev) => ({
-            ...prev,
-            [columnId]: error
-          }));
+        } catch (error) {
+          setIsSavingAsync(false);
+          return;
         }
-      };
-      onChange2?.({
-        entryData: data2[index2],
-        actions,
-        actionType: "delete",
-        fullData: newData
-      });
+      }
+      setInternalData(updated);
+      if (onDelete2) onDelete2(rowToDelete);
+      setIsSavingAsync(false);
       if (editingIndex2 === index2) {
         handleCancelEdit();
       } else if (editingIndex2 !== null && editingIndex2 > index2) {
@@ -4353,7 +4360,7 @@ var useA4StatementView = ({
             pageIndex === 0 && DisplayInfoGridEl,
             /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
               pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-800 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2 print:hidden", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: "Recent Transactions" }),
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }),
                 /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   "input",
                   {
@@ -4365,7 +4372,7 @@ var useA4StatementView = ({
                   }
                 )
               ] }),
-              pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hidden print:flex mb-4 border-b border-gray-200 print:border-gray-200 pb-2 items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-sm font-bold text-gray-800 print:text-gray-800 uppercase tracking-wide shrink-0", children: "Recent Transactions" }) }),
+              pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hidden print:flex mb-4 border-b border-gray-200 print:border-gray-200 pb-2 items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-sm font-bold text-gray-800 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
               pageIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-5 print:h-0" }),
               /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 SimpleTable,

package/dist/index.mjs

@@ -3219,7 +3219,7 @@ var TableCell = React9.memo(
     );
   },
   (prev, next) => {
-    return prev.cell.getValue() === next.cell.getValue() && prev.cell.row.getIsExpanded() === next.cell.row.getIsExpanded() && prev.cell.row.getIsSelected() === next.cell.row.getIsSelected() && prev.rowPadding === next.rowPadding && prev.verticalLines === next.verticalLines;
+    return prev.cell.getValue() === next.cell.getValue() && prev.cell.row.original === next.cell.row.original && prev.cell.row.getIsExpanded() === next.cell.row.getIsExpanded() && prev.cell.row.getIsSelected() === next.cell.row.getIsSelected() && prev.rowPadding === next.rowPadding && prev.verticalLines === next.verticalLines;
   }
 );
 var TableRow = React9.memo(
@@ -3306,7 +3306,9 @@ function PostTable({
     }
     return initialState;
   });
-  const [data, setData] = useState15(controlledData || []);
+  const [internalData, setInternalData] = useState15(controlledData || []);
+  const isControlled = controlledData !== void 0;
+  const data = isControlled ? controlledData : internalData;
   const entryRowRef = useRef5(null);
   const focusAndScrollEntryRow = () => {
     setTimeout(() => {
@@ -3327,11 +3329,6 @@ function PostTable({
   useEffect10(() => {
     focusAndScrollEntryRow();
   }, []);
-  useEffect10(() => {
-    if (controlledData) {
-      setData(controlledData);
-    }
-  }, [controlledData]);
   const [entryData, setEntryData] = useState15({});
   const [editingIndex, setEditingIndex] = useState15(null);
   const [isSavingAsync, setIsSavingAsync] = useState15(false);
@@ -3363,23 +3360,21 @@ function PostTable({
     };
   });
   const handleSaveField = useCallback2(async () => {
-    const {
-      data: data2,
-      entryData: entryData2,
-      editingIndex: editingIndex2,
-      isSavingAsync: isSavingAsync2,
-      submitLoading: submitLoading2,
-      onChange: onChange2
-    } = latestStateRef.current;
+    const { data: data2, entryData: entryData2, editingIndex: editingIndex2, onChange: onChange2 } = latestStateRef.current;
     if (Object.keys(entryData2).length === 0) return;
-    let newData = [...data2];
-    if (editingIndex2 !== null) {
-      newData[editingIndex2] = {
-        ...newData[editingIndex2],
-        ...entryData2
+    const actionType = editingIndex2 !== null ? "edit" : "add";
+    const entryToSave = { ...entryData2 };
+    const updated = [...data2];
+    let entryToPass;
+    if (actionType === "edit" && editingIndex2 !== null) {
+      updated[editingIndex2] = {
+        ...updated[editingIndex2],
+        ...entryToSave
       };
+      entryToPass = updated[editingIndex2];
     } else {
-      newData = [...newData, entryData2];
+      updated.push(entryToSave);
+      entryToPass = updated[updated.length - 1];
     }
     if (onChange2) {
       setIsSavingAsync(true);
@@ -3405,12 +3400,11 @@ function PostTable({
             }));
           }
         };
-        const type = editingIndex2 !== null ? "edit" : "add";
         const result = await onChange2({
-          entryData: entryData2,
+          entryData: entryToPass,
           actions,
-          actionType: type,
-          fullData: newData
+          actionType,
+          fullData: updated
         });
         if (result === false) {
           setIsSavingAsync(false);
@@ -3421,14 +3415,14 @@ function PostTable({
         return;
       }
     }
-    setData(newData);
+    setInternalData(updated);
     setEntryData({});
     setFieldErrors({});
     setIsSavingAsync(false);
     if (editingIndex2 !== null) {
       setEditingIndex(null);
     } else {
-      focusAndScrollEntryRow();
+      setTimeout(() => focusAndScrollEntryRow(), 0);
     }
   }, []);
   const handleCancelEdit = useCallback2(() => {
@@ -3441,43 +3435,56 @@ function PostTable({
   const handleEdit = useCallback2((index2, rowOriginal) => {
     const { onEdit: onEdit2 } = latestStateRef.current;
     setEditingIndex(index2);
-    setEntryData(rowOriginal);
+    setEntryData({ ...rowOriginal });
     if (onEdit2) onEdit2(rowOriginal);
   }, []);
   const handleDelete = useCallback2(
-    (index2) => {
+    async (index2) => {
       const { data: data2, editingIndex: editingIndex2, onChange: onChange2, onDelete: onDelete2 } = latestStateRef.current;
       const rowToDelete = data2[index2];
-      const newData = data2.filter((_, i) => i !== index2);
-      setData(newData);
-      if (onDelete2) onDelete2(rowToDelete);
-      const actions = {
-        focus: (columnId) => {
-          if (entryRowRef.current) {
-            const td = entryRowRef.current.querySelector(
-              `td[data-column-id="${columnId}"]`
-            );
-            if (td) {
-              const input = td.querySelector(
-                `input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex='0'], [id*='${columnId}']`
-              );
-              if (input) input.focus();
+      const updated = data2.filter((_, i) => i !== index2);
+      if (onChange2) {
+        setIsSavingAsync(true);
+        try {
+          const actions = {
+            focus: (columnId) => {
+              if (entryRowRef.current) {
+                const td = entryRowRef.current.querySelector(
+                  `td[data-column-id="${columnId}"]`
+                );
+                if (td) {
+                  const input = td.querySelector(
+                    `input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex='0'], [id*='${columnId}']`
+                  );
+                  if (input) input.focus();
+                }
+              }
+            },
+            setError: (columnId, error) => {
+              setFieldErrors((prev) => ({
+                ...prev,
+                [columnId]: error
+              }));
             }
+          };
+          const result = await onChange2({
+            entryData: rowToDelete,
+            actions,
+            actionType: "delete",
+            fullData: updated
+          });
+          if (result === false) {
+            setIsSavingAsync(false);
+            return;
           }
-        },
-        setError: (columnId, error) => {
-          setFieldErrors((prev) => ({
-            ...prev,
-            [columnId]: error
-          }));
+        } catch (error) {
+          setIsSavingAsync(false);
+          return;
         }
-      };
-      onChange2?.({
-        entryData: data2[index2],
-        actions,
-        actionType: "delete",
-        fullData: newData
-      });
+      }
+      setInternalData(updated);
+      if (onDelete2) onDelete2(rowToDelete);
+      setIsSavingAsync(false);
       if (editingIndex2 === index2) {
         handleCancelEdit();
       } else if (editingIndex2 !== null && editingIndex2 > index2) {
@@ -4328,7 +4335,7 @@ var useA4StatementView = ({
             pageIndex === 0 && DisplayInfoGridEl,
             /* @__PURE__ */ jsxs20("div", { className: "grow w-full px-8 pb-8", children: [
               pageIndex === 0 && /* @__PURE__ */ jsxs20("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-800 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2 print:hidden", children: [
-                /* @__PURE__ */ jsx28("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: "Recent Transactions" }),
+                /* @__PURE__ */ jsx28("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }),
                 /* @__PURE__ */ jsx28(
                   "input",
                   {
@@ -4340,7 +4347,7 @@ var useA4StatementView = ({
                   }
                 )
               ] }),
-              pageIndex === 0 && /* @__PURE__ */ jsx28("div", { className: "hidden print:flex mb-4 border-b border-gray-200 print:border-gray-200 pb-2 items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ jsx28("h3", { className: "text-sm font-bold text-gray-800 print:text-gray-800 uppercase tracking-wide shrink-0", children: "Recent Transactions" }) }),
+              pageIndex === 0 && /* @__PURE__ */ jsx28("div", { className: "hidden print:flex mb-4 border-b border-gray-200 print:border-gray-200 pb-2 items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ jsx28("h3", { className: "text-sm font-bold text-gray-800 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
               pageIndex > 0 && /* @__PURE__ */ jsx28("div", { className: "h-5 print:h-0" }),
               /* @__PURE__ */ jsx28(
                 SimpleTable,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "warqadui",
-  "version": "0.0.38",
+  "version": "0.0.41",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",