warqadui 0.0.21 → 0.0.23

package/dist/index.d.mts

@@ -424,14 +424,19 @@ declare module "@tanstack/react-table" {
 }
 interface PostTableActions {
     focus: (columnId: string) => void;
-    setError: (columnId: string, hasError: boolean) => void;
+    setError: (columnId: string, error: boolean | string) => void;
 }
 interface PostTableProps<TData> {
     columns: (ColumnDef<TData, any> & {
         key?: string;
     })[];
     data?: TData[];
-    onChange?: (entryData: Partial<TData>, actions: PostTableActions, actionType: "add" | "edit" | "delete", fullData: TData[]) => void | Promise<void | boolean>;
+    onChange?: (params: {
+        entryData: Partial<TData>;
+        actions: PostTableActions;
+        actionType: "add" | "edit" | "delete";
+        fullData: TData[];
+    }) => void | Promise<void | boolean>;
     isLoading?: boolean;
     className?: string;
     verticalLines?: boolean;

package/dist/index.d.ts

@@ -424,14 +424,19 @@ declare module "@tanstack/react-table" {
 }
 interface PostTableActions {
     focus: (columnId: string) => void;
-    setError: (columnId: string, hasError: boolean) => void;
+    setError: (columnId: string, error: boolean | string) => void;
 }
 interface PostTableProps<TData> {
     columns: (ColumnDef<TData, any> & {
         key?: string;
     })[];
     data?: TData[];
-    onChange?: (entryData: Partial<TData>, actions: PostTableActions, actionType: "add" | "edit" | "delete", fullData: TData[]) => void | Promise<void | boolean>;
+    onChange?: (params: {
+        entryData: Partial<TData>;
+        actions: PostTableActions;
+        actionType: "add" | "edit" | "delete";
+        fullData: TData[];
+    }) => void | Promise<void | boolean>;
     isLoading?: boolean;
     className?: string;
     verticalLines?: boolean;

package/dist/index.js

@@ -1212,7 +1212,7 @@ var Input = (0, import_react8.forwardRef)(
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "min-h-[20px]", children: message && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) })
+          message && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
         ]
       }
     );
@@ -1359,7 +1359,7 @@ var PhoneInput = (0, import_react9.forwardRef)(
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "min-h-[20px]", children: message && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) })
+      message && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
     ] });
     if (form && name) {
       return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -1571,7 +1571,7 @@ var SelectRoot = ({
             String(opt.value) || index
           )) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "min-h-[20px]", children: message && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) })
+        message && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
       ]
     }
   ) });
@@ -1847,7 +1847,7 @@ var Textarea = (0, import_react11.forwardRef)(
           ...inputProps
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "min-h-[20px]", children: message && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) })
+      message && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
     ] });
     if (form && name) {
       return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -2371,8 +2371,7 @@ var SearchApiRoot = ({
             },
             String(getOptionValue(opt)) || index
           )) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "min-h-[20px]", children: message && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) })
+        ] })
       ]
     }
   ) });
@@ -2568,7 +2567,7 @@ var SearchApiContent = (0, import_react13.forwardRef)(
     }, [isOpen]);
     if (!isOpen || typeof document === "undefined") return null;
     return (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
         "div",
         {
           ref: dropdownContentRef,
@@ -2576,10 +2575,13 @@ var SearchApiContent = (0, import_react13.forwardRef)(
           style: { ...dropdownStyle, ...style },
           onMouseDown: (e) => e.stopPropagation(),
           ...props,
-          children: isLoading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-4 text-center text-sm text-gray-500", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Loader2, { className: "h-5 w-5 animate-spin mx-auto mb-2" }),
-            "Loading options..."
-          ] }) : import_react13.default.Children.count(children) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "py-1", children }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "p-4 text-center text-sm text-gray-500", children: error && options.length === 0 ? error : searchTerm ? `No results for "${searchTerm}"` : "No options available" })
+          children: [
+            error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-3 py-2 text-sm text-red-600 dark:text-red-400 border-b border-gray-100 dark:border-zinc-800", children: error }),
+            isLoading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "p-4 text-center text-sm text-gray-500", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Loader2, { className: "h-5 w-5 animate-spin mx-auto mb-2" }),
+              "Loading options..."
+            ] }) : import_react13.default.Children.count(children) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "py-1", children }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "p-4 text-center text-sm text-gray-500", children: searchTerm ? `No results for "${searchTerm}"` : "No options available" })
+          ]
         }
       ),
       document.body
@@ -2746,7 +2748,7 @@ var DateInput = (0, import_react14.forwardRef)(
           )
         }
       ) : renderDatePicker(value, onChange, onBlur, ref),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "min-h-[20px]", children: message && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) })
+      message && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
     ] });
   }
 );
@@ -3173,15 +3175,20 @@ function PostTable({
               }
             }
           },
-          setError: (columnId, hasError) => {
+          setError: (columnId, error) => {
             setFieldErrors((prev) => ({
               ...prev,
-              [columnId]: hasError
+              [columnId]: error
             }));
           }
         };
         const type = editingIndex !== null ? "edit" : "add";
-        const result = await onChange(entryData, actions, type, newData);
+        const result = await onChange({
+          entryData,
+          actions,
+          actionType: type,
+          fullData: newData
+        });
         if (result === false) {
           setIsSavingAsync(false);
           return;
@@ -3227,14 +3234,19 @@ function PostTable({
           }
         }
       },
-      setError: (columnId, hasError) => {
+      setError: (columnId, error) => {
         setFieldErrors((prev) => ({
           ...prev,
-          [columnId]: hasError
+          [columnId]: error
         }));
       }
     };
-    onChange?.(data[index2], actions, "delete", newData);
+    onChange?.({
+      entryData: data[index2],
+      actions,
+      actionType: "delete",
+      fullData: newData
+    });
     if (editingIndex === index2) {
       handleCancelEdit();
     } else if (editingIndex !== null && editingIndex > index2) {
@@ -3461,7 +3473,8 @@ function PostTable({
                   const fieldRenderer = column.columnDef.meta?.field;
                   const accessor = column.columnDef.accessorKey || column.id;
                   const value = entryData[accessor] || "";
-                  const hasError = !!fieldErrors[accessor];
+                  const error = fieldErrors[accessor];
+                  const hasError = !!error;
                   const onChangeValue = (val) => {
                     setEntryData((prev) => ({
                       ...prev,
@@ -3495,12 +3508,12 @@ function PostTable({
                         column.id === "_index" ? "w-px whitespace-nowrap" : "",
                         hasError && "ring-1 ring-inset ring-red-500"
                       ),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                         "div",
                         {
                           className: cn(
-                            "flex items-center",
-                            column.id === "_index" ? "" : "w-full min-w-32 h-9"
+                            "flex items-center relative group w-full",
+                            column.id === "_index" ? "" : "min-w-32 h-9"
                           ),
                           onKeyDown: (e) => {
                             if (e.key === "Enter") {
@@ -3508,23 +3521,26 @@ function PostTable({
                               handleSaveField();
                             }
                           },
-                          children: fieldRenderer ? fieldRenderer({
-                            value,
-                            onChange: onChangeValue,
-                            rowData: entryData,
-                            setRowData: setEntryData
-                          }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                            Fields_default.Input,
-                            {
-                              id: `pti-${accessor}`,
-                              label: "",
-                              variant: "ghost",
+                          children: [
+                            fieldRenderer ? fieldRenderer({
                               value,
-                              onChange: (e) => onChangeValue(e.target.value),
-                              className: "px-0! bg-transparent!",
-                              placeholder: `${typeof column.columnDef.header === "string" ? column.columnDef.header : column.id}`
-                            }
-                          )
+                              onChange: onChangeValue,
+                              rowData: entryData,
+                              setRowData: setEntryData
+                            }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                              Fields_default.Input,
+                              {
+                                id: `pti-${accessor}`,
+                                label: "",
+                                variant: "ghost",
+                                value,
+                                onChange: (e) => onChangeValue(e.target.value),
+                                className: "px-0! bg-transparent!",
+                                placeholder: `${typeof column.columnDef.header === "string" ? column.columnDef.header : column.id}`
+                              }
+                            ),
+                            typeof error === "string" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute left-1/2 -translate-x-1/2 bottom-[100%] mb-2 z-[9999] pointer-events-none opacity-0 group-hover:opacity-100 focus-within:opacity-100 group-focus-within:opacity-100 transition-opacity whitespace-nowrap bg-red-500 text-white text-xs px-2.5 py-1.5 rounded shadow-lg before:content-[''] before:absolute before:top-full before:left-1/2 before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-red-500", children: error })
+                          ]
                         }
                       )
                     },

package/dist/index.mjs

@@ -1135,7 +1135,7 @@ var Input = forwardRef(
               }
             )
           ] }),
-          /* @__PURE__ */ jsx16("div", { className: "min-h-[20px]", children: message && /* @__PURE__ */ jsx16("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) })
+          message && /* @__PURE__ */ jsx16("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
         ]
       }
     );
@@ -1284,7 +1284,7 @@ var PhoneInput = forwardRef2(
           }
         )
       ] }),
-      /* @__PURE__ */ jsx17("div", { className: "min-h-[20px]", children: message && /* @__PURE__ */ jsx17("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) })
+      message && /* @__PURE__ */ jsx17("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
     ] });
     if (form && name) {
       return /* @__PURE__ */ jsx17(
@@ -1503,7 +1503,7 @@ var SelectRoot = ({
             String(opt.value) || index
           )) })
         ] }),
-        /* @__PURE__ */ jsx18("div", { className: "min-h-[20px]", children: message && /* @__PURE__ */ jsx18("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) })
+        message && /* @__PURE__ */ jsx18("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
       ]
     }
   ) });
@@ -1781,7 +1781,7 @@ var Textarea = forwardRef4(
           ...inputProps
         }
       ) }),
-      /* @__PURE__ */ jsx19("div", { className: "min-h-[20px]", children: message && /* @__PURE__ */ jsx19("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) })
+      message && /* @__PURE__ */ jsx19("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
     ] });
     if (form && name) {
       return /* @__PURE__ */ jsx19(
@@ -2312,8 +2312,7 @@ var SearchApiRoot = ({
             },
             String(getOptionValue(opt)) || index
           )) })
-        ] }),
-        /* @__PURE__ */ jsx20("div", { className: "min-h-[20px]", children: message && /* @__PURE__ */ jsx20("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) })
+        ] })
       ]
     }
   ) });
@@ -2509,7 +2508,7 @@ var SearchApiContent = forwardRef5(
     }, [isOpen]);
     if (!isOpen || typeof document === "undefined") return null;
     return createPortal2(
-      /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsxs15(
         "div",
         {
           ref: dropdownContentRef,
@@ -2517,10 +2516,13 @@ var SearchApiContent = forwardRef5(
           style: { ...dropdownStyle, ...style },
           onMouseDown: (e) => e.stopPropagation(),
           ...props,
-          children: isLoading && options.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: "p-4 text-center text-sm text-gray-500", children: [
-            /* @__PURE__ */ jsx20(Loader22, { className: "h-5 w-5 animate-spin mx-auto mb-2" }),
-            "Loading options..."
-          ] }) : React7.Children.count(children) > 0 ? /* @__PURE__ */ jsx20("div", { className: "py-1", children }) : /* @__PURE__ */ jsx20("div", { className: "p-4 text-center text-sm text-gray-500", children: error && options.length === 0 ? error : searchTerm ? `No results for "${searchTerm}"` : "No options available" })
+          children: [
+            error && /* @__PURE__ */ jsx20("div", { className: "px-3 py-2 text-sm text-red-600 dark:text-red-400 border-b border-gray-100 dark:border-zinc-800", children: error }),
+            isLoading && options.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: "p-4 text-center text-sm text-gray-500", children: [
+              /* @__PURE__ */ jsx20(Loader22, { className: "h-5 w-5 animate-spin mx-auto mb-2" }),
+              "Loading options..."
+            ] }) : React7.Children.count(children) > 0 ? /* @__PURE__ */ jsx20("div", { className: "py-1", children }) : /* @__PURE__ */ jsx20("div", { className: "p-4 text-center text-sm text-gray-500", children: searchTerm ? `No results for "${searchTerm}"` : "No options available" })
+          ]
         }
       ),
       document.body
@@ -2689,7 +2691,7 @@ var DateInput = forwardRef6(
           )
         }
       ) : renderDatePicker(value, onChange, onBlur, ref),
-      /* @__PURE__ */ jsx21("div", { className: "min-h-[20px]", children: message && /* @__PURE__ */ jsx21("p", { className: "text-sm text-red-600 dark:text-red-400", children: message }) })
+      message && /* @__PURE__ */ jsx21("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
     ] });
   }
 );
@@ -3131,15 +3133,20 @@ function PostTable({
               }
             }
           },
-          setError: (columnId, hasError) => {
+          setError: (columnId, error) => {
             setFieldErrors((prev) => ({
               ...prev,
-              [columnId]: hasError
+              [columnId]: error
             }));
           }
         };
         const type = editingIndex !== null ? "edit" : "add";
-        const result = await onChange(entryData, actions, type, newData);
+        const result = await onChange({
+          entryData,
+          actions,
+          actionType: type,
+          fullData: newData
+        });
         if (result === false) {
           setIsSavingAsync(false);
           return;
@@ -3185,14 +3192,19 @@ function PostTable({
           }
         }
       },
-      setError: (columnId, hasError) => {
+      setError: (columnId, error) => {
         setFieldErrors((prev) => ({
           ...prev,
-          [columnId]: hasError
+          [columnId]: error
         }));
       }
     };
-    onChange?.(data[index2], actions, "delete", newData);
+    onChange?.({
+      entryData: data[index2],
+      actions,
+      actionType: "delete",
+      fullData: newData
+    });
     if (editingIndex === index2) {
       handleCancelEdit();
     } else if (editingIndex !== null && editingIndex > index2) {
@@ -3419,7 +3431,8 @@ function PostTable({
                   const fieldRenderer = column.columnDef.meta?.field;
                   const accessor = column.columnDef.accessorKey || column.id;
                   const value = entryData[accessor] || "";
-                  const hasError = !!fieldErrors[accessor];
+                  const error = fieldErrors[accessor];
+                  const hasError = !!error;
                   const onChangeValue = (val) => {
                     setEntryData((prev) => ({
                       ...prev,
@@ -3453,12 +3466,12 @@ function PostTable({
                         column.id === "_index" ? "w-px whitespace-nowrap" : "",
                         hasError && "ring-1 ring-inset ring-red-500"
                       ),
-                      children: /* @__PURE__ */ jsx23(
+                      children: /* @__PURE__ */ jsxs18(
                         "div",
                         {
                           className: cn(
-                            "flex items-center",
-                            column.id === "_index" ? "" : "w-full min-w-32 h-9"
+                            "flex items-center relative group w-full",
+                            column.id === "_index" ? "" : "min-w-32 h-9"
                           ),
                           onKeyDown: (e) => {
                             if (e.key === "Enter") {
@@ -3466,23 +3479,26 @@ function PostTable({
                               handleSaveField();
                             }
                           },
-                          children: fieldRenderer ? fieldRenderer({
-                            value,
-                            onChange: onChangeValue,
-                            rowData: entryData,
-                            setRowData: setEntryData
-                          }) : /* @__PURE__ */ jsx23(
-                            Fields_default.Input,
-                            {
-                              id: `pti-${accessor}`,
-                              label: "",
-                              variant: "ghost",
+                          children: [
+                            fieldRenderer ? fieldRenderer({
                               value,
-                              onChange: (e) => onChangeValue(e.target.value),
-                              className: "px-0! bg-transparent!",
-                              placeholder: `${typeof column.columnDef.header === "string" ? column.columnDef.header : column.id}`
-                            }
-                          )
+                              onChange: onChangeValue,
+                              rowData: entryData,
+                              setRowData: setEntryData
+                            }) : /* @__PURE__ */ jsx23(
+                              Fields_default.Input,
+                              {
+                                id: `pti-${accessor}`,
+                                label: "",
+                                variant: "ghost",
+                                value,
+                                onChange: (e) => onChangeValue(e.target.value),
+                                className: "px-0! bg-transparent!",
+                                placeholder: `${typeof column.columnDef.header === "string" ? column.columnDef.header : column.id}`
+                              }
+                            ),
+                            typeof error === "string" && /* @__PURE__ */ jsx23("div", { className: "absolute left-1/2 -translate-x-1/2 bottom-[100%] mb-2 z-[9999] pointer-events-none opacity-0 group-hover:opacity-100 focus-within:opacity-100 group-focus-within:opacity-100 transition-opacity whitespace-nowrap bg-red-500 text-white text-xs px-2.5 py-1.5 rounded shadow-lg before:content-[''] before:absolute before:top-full before:left-1/2 before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-red-500", children: error })
+                          ]
                         }
                       )
                     },