@fctc/widget-logic 1.1.0 → 1.1.1

package/dist/action.js

@@ -27,7 +27,7 @@ __export(action_exports, {
 });
 module.exports = __toCommonJS(action_exports);
 
-// src/action/use-archieve-row.tsx
+// src/action/use-archieve-row.ts
 var import_interface_logic = require("@fctc/interface-logic");
 var useArchieveHandler = ({
   data,
@@ -54,7 +54,7 @@ var useArchieveHandler = ({
   return handleDuplicateRecord;
 };
 
-// src/action/use-duplicate-row.tsx
+// src/action/use-duplicate-row.ts
 var import_interface_logic2 = require("@fctc/interface-logic");
 var useDuplicateRowHandler = ({
   data,
@@ -80,7 +80,7 @@ var useDuplicateRowHandler = ({
   return handleDuplicateRecord;
 };
 
-// src/action/use-get-field-export.tsx
+// src/action/use-get-field-export.ts
 var import_interface_logic3 = require("@fctc/interface-logic");
 var useGetFieldExportHandler = ({
   data,
@@ -113,7 +113,7 @@ var useGetFieldExportHandler = ({
   return handleGetFieldExport;
 };
 
-// src/action/use-export-excel.tsx
+// src/action/use-export-excel.ts
 var import_interface_logic4 = require("@fctc/interface-logic");
 var useExportExcelHandler = ({
   data,

package/dist/action.mjs

@@ -1,4 +1,4 @@
-// src/action/use-archieve-row.tsx
+// src/action/use-archieve-row.ts
 import { useButton } from "@fctc/interface-logic";
 var useArchieveHandler = ({
   data,
@@ -25,7 +25,7 @@ var useArchieveHandler = ({
   return handleDuplicateRecord;
 };
 
-// src/action/use-duplicate-row.tsx
+// src/action/use-duplicate-row.ts
 import { useDuplicateRecord } from "@fctc/interface-logic";
 var useDuplicateRowHandler = ({
   data,
@@ -51,7 +51,7 @@ var useDuplicateRowHandler = ({
   return handleDuplicateRecord;
 };
 
-// src/action/use-get-field-export.tsx
+// src/action/use-get-field-export.ts
 import { useGetFieldExport } from "@fctc/interface-logic";
 var useGetFieldExportHandler = ({
   data,
@@ -84,7 +84,7 @@ var useGetFieldExportHandler = ({
   return handleGetFieldExport;
 };
 
-// src/action/use-export-excel.tsx
+// src/action/use-export-excel.ts
 import { evalJSONDomain, useExportExcel } from "@fctc/interface-logic";
 var useExportExcelHandler = ({
   data,

package/dist/common.d.mts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+
+declare const DEFAULT_EVENTS: readonly ["mousedown", "touchstart"];
+type EventType = (typeof DEFAULT_EVENTS)[number];
+interface UseClickOutsideOptions {
+    handler: (event?: Event) => void;
+    events?: readonly EventType[];
+    nodes?: (HTMLDivElement | null)[];
+    refs?: any;
+}
+declare const useClickOutside: ({ handler, events, nodes, refs, }: UseClickOutsideOptions) => RefObject<HTMLDivElement | null>;
+
+export { useClickOutside };

package/dist/common.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+
+declare const DEFAULT_EVENTS: readonly ["mousedown", "touchstart"];
+type EventType = (typeof DEFAULT_EVENTS)[number];
+interface UseClickOutsideOptions {
+    handler: (event?: Event) => void;
+    events?: readonly EventType[];
+    nodes?: (HTMLDivElement | null)[];
+    refs?: any;
+}
+declare const useClickOutside: ({ handler, events, nodes, refs, }: UseClickOutsideOptions) => RefObject<HTMLDivElement | null>;
+
+export { useClickOutside };

package/dist/common.js

@@ -0,0 +1,60 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/common.ts
+var common_exports = {};
+__export(common_exports, {
+  useClickOutside: () => useClickOutside
+});
+module.exports = __toCommonJS(common_exports);
+
+// src/common/use-click-outside.ts
+var import_react = require("react");
+var DEFAULT_EVENTS = ["mousedown", "touchstart"];
+var useClickOutside = ({
+  handler,
+  events = DEFAULT_EVENTS,
+  nodes = [],
+  refs
+}) => {
+  const ref = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const listener = (event) => {
+      const { target } = event;
+      if (refs && refs?.length > 0 && refs?.some((r) => r.current?.contains(target))) {
+        return;
+      }
+      if (!(target instanceof HTMLElement)) return;
+      const shouldIgnore = target.hasAttribute("data-ignore-outside-clicks") || !document.body.contains(target) && target.tagName !== "HTML";
+      const shouldTrigger = nodes.length > 0 ? nodes.every((node) => node && !event.composedPath().includes(node)) : ref.current && !ref.current.contains(target);
+      if (shouldTrigger && !shouldIgnore) {
+        handler(event);
+      }
+    };
+    events.forEach((event) => document.addEventListener(event, listener));
+    return () => {
+      events.forEach((event) => document.removeEventListener(event, listener));
+    };
+  }, [handler, nodes, events]);
+  return ref;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useClickOutside
+});

package/dist/common.mjs

@@ -0,0 +1,33 @@
+// src/common/use-click-outside.ts
+import { useEffect, useRef } from "react";
+var DEFAULT_EVENTS = ["mousedown", "touchstart"];
+var useClickOutside = ({
+  handler,
+  events = DEFAULT_EVENTS,
+  nodes = [],
+  refs
+}) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    const listener = (event) => {
+      const { target } = event;
+      if (refs && refs?.length > 0 && refs?.some((r) => r.current?.contains(target))) {
+        return;
+      }
+      if (!(target instanceof HTMLElement)) return;
+      const shouldIgnore = target.hasAttribute("data-ignore-outside-clicks") || !document.body.contains(target) && target.tagName !== "HTML";
+      const shouldTrigger = nodes.length > 0 ? nodes.every((node) => node && !event.composedPath().includes(node)) : ref.current && !ref.current.contains(target);
+      if (shouldTrigger && !shouldIgnore) {
+        handler(event);
+      }
+    };
+    events.forEach((event) => document.addEventListener(event, listener));
+    return () => {
+      events.forEach((event) => document.removeEventListener(event, listener));
+    };
+  }, [handler, nodes, events]);
+  return ref;
+};
+export {
+  useClickOutside
+};

package/dist/form.d.mts

@@ -3,22 +3,23 @@ interface UseSaveFormProps$1 {
         context: any;
         model: string;
         specification: any;
-        id: any;
-        nameField: any;
-        object: any;
+        ids: any;
+        nameField?: any;
+        object?: any;
     };
     onSuccess?: (res: any) => void;
     onError?: (err: any) => void;
     onSettled?: (err: any) => void;
 }
-declare const UseOnChangeFormHandler: ({ data, onSuccess, onError, onSettled, }: UseSaveFormProps$1) => () => void;
+declare const UseOnChangeFormHandler: ({ data, onSuccess, onError, onSettled, }: UseSaveFormProps$1) => Promise<any>;
 
 interface UseSaveFormProps {
     data: {
         context: any;
         model: string;
-        specification: any;
-        id: number | string;
+        specification?: any;
+        ids: any;
+        records: any;
     };
     onSuccess?: (res: any) => void;
     onError?: (err: any) => void;

package/dist/form.d.ts

@@ -3,22 +3,23 @@ interface UseSaveFormProps$1 {
         context: any;
         model: string;
         specification: any;
-        id: any;
-        nameField: any;
-        object: any;
+        ids: any;
+        nameField?: any;
+        object?: any;
     };
     onSuccess?: (res: any) => void;
     onError?: (err: any) => void;
     onSettled?: (err: any) => void;
 }
-declare const UseOnChangeFormHandler: ({ data, onSuccess, onError, onSettled, }: UseSaveFormProps$1) => () => void;
+declare const UseOnChangeFormHandler: ({ data, onSuccess, onError, onSettled, }: UseSaveFormProps$1) => Promise<any>;
 
 interface UseSaveFormProps {
     data: {
         context: any;
         model: string;
-        specification: any;
-        id: number | string;
+        specification?: any;
+        ids: any;
+        records: any;
     };
     onSuccess?: (res: any) => void;
     onError?: (err: any) => void;

package/dist/form.js

@@ -26,7 +26,7 @@ __export(form_exports, {
 });
 module.exports = __toCommonJS(form_exports);
 
-// src/widget/form/use-on-change-form.tsx
+// src/widget/form/use-on-change-form.ts
 var import_interface_logic = require("@fctc/interface-logic");
 var UseOnChangeFormHandler = ({
   data,
@@ -35,27 +35,32 @@ var UseOnChangeFormHandler = ({
   onSettled
 }) => {
   const fetchOnchange = (0, import_interface_logic.useOnChangeForm)();
-  const handleOnChangeForm = () => {
+  return new Promise((resolve, reject) => {
     fetchOnchange.mutate(
       {
-        ids: data.id ? data.id : [],
+        ids: data.ids ? data.ids : [],
         model: data.model,
         specification: data.specification,
         context: data.context,
         object: data.object,
-        fieldChange: [data.nameField]
+        fieldChange: data.nameField
       },
       {
-        onSuccess,
-        onError,
+        onSuccess: (res) => {
+          onSuccess?.(res);
+          resolve(res);
+        },
+        onError: (err) => {
+          onError?.(err);
+          reject(err);
+        },
         onSettled
       }
     );
-  };
-  return handleOnChangeForm;
+  });
 };
 
-// src/widget/form/use-save-form.tsx
+// src/widget/form/use-save-form.ts
 var import_interface_logic2 = require("@fctc/interface-logic");
 var useSaveFormHandler = ({
   data,
@@ -67,9 +72,9 @@ var useSaveFormHandler = ({
   const handleSaveForm = () => {
     fetchSave.mutate(
       {
-        ids: data.id ? [data.id] : [],
+        ids: data.ids ? [data.ids] : [],
         model: data.model,
-        data,
+        data: data.records,
         specification: data.specification,
         context: data.context
       },
@@ -83,7 +88,7 @@ var useSaveFormHandler = ({
   return handleSaveForm;
 };
 
-// src/widget/form/use-remove-row.tsx
+// src/widget/form/use-remove-row.ts
 var import_interface_logic3 = require("@fctc/interface-logic");
 var useRemoveRowHandler = ({
   data,

package/dist/form.mjs

@@ -1,4 +1,4 @@
-// src/widget/form/use-on-change-form.tsx
+// src/widget/form/use-on-change-form.ts
 import { useOnChangeForm } from "@fctc/interface-logic";
 var UseOnChangeFormHandler = ({
   data,
@@ -7,27 +7,32 @@ var UseOnChangeFormHandler = ({
   onSettled
 }) => {
   const fetchOnchange = useOnChangeForm();
-  const handleOnChangeForm = () => {
+  return new Promise((resolve, reject) => {
     fetchOnchange.mutate(
       {
-        ids: data.id ? data.id : [],
+        ids: data.ids ? data.ids : [],
         model: data.model,
         specification: data.specification,
         context: data.context,
         object: data.object,
-        fieldChange: [data.nameField]
+        fieldChange: data.nameField
       },
       {
-        onSuccess,
-        onError,
+        onSuccess: (res) => {
+          onSuccess?.(res);
+          resolve(res);
+        },
+        onError: (err) => {
+          onError?.(err);
+          reject(err);
+        },
         onSettled
       }
     );
-  };
-  return handleOnChangeForm;
+  });
 };
 
-// src/widget/form/use-save-form.tsx
+// src/widget/form/use-save-form.ts
 import { useSave } from "@fctc/interface-logic";
 var useSaveFormHandler = ({
   data,
@@ -39,9 +44,9 @@ var useSaveFormHandler = ({
   const handleSaveForm = () => {
     fetchSave.mutate(
       {
-        ids: data.id ? [data.id] : [],
+        ids: data.ids ? [data.ids] : [],
         model: data.model,
-        data,
+        data: data.records,
         specification: data.specification,
         context: data.context
       },
@@ -55,7 +60,7 @@ var useSaveFormHandler = ({
   return handleSaveForm;
 };
 
-// src/widget/form/use-remove-row.tsx
+// src/widget/form/use-remove-row.ts
 import { useRemoveRow } from "@fctc/interface-logic";
 var useRemoveRowHandler = ({
   data,

package/dist/index.d.mts

@@ -1,3 +1,5 @@
 export { useArchieveHandler, useDuplicateRowHandler, useExportExcelHandler, useGetFieldExportHandler } from './action.mjs';
 export { UseOnChangeFormHandler, useRemoveRowHandler, useSaveFormHandler } from './form.mjs';
 export { useTableHandler } from './table.mjs';
+export { useClickOutside } from './common.mjs';
+import 'react';

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 export { useArchieveHandler, useDuplicateRowHandler, useExportExcelHandler, useGetFieldExportHandler } from './action.js';
 export { UseOnChangeFormHandler, useRemoveRowHandler, useSaveFormHandler } from './form.js';
 export { useTableHandler } from './table.js';
+export { useClickOutside } from './common.js';
+import 'react';

package/dist/index.js

@@ -22,6 +22,7 @@ var index_exports = {};
 __export(index_exports, {
   UseOnChangeFormHandler: () => UseOnChangeFormHandler,
   useArchieveHandler: () => useArchieveHandler,
+  useClickOutside: () => useClickOutside,
   useDuplicateRowHandler: () => useDuplicateRowHandler,
   useExportExcelHandler: () => useExportExcelHandler,
   useGetFieldExportHandler: () => useGetFieldExportHandler,
@@ -31,7 +32,7 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/action/use-archieve-row.tsx
+// src/action/use-archieve-row.ts
 var import_interface_logic = require("@fctc/interface-logic");
 var useArchieveHandler = ({
   data,
@@ -58,7 +59,7 @@ var useArchieveHandler = ({
   return handleDuplicateRecord;
 };
 
-// src/action/use-duplicate-row.tsx
+// src/action/use-duplicate-row.ts
 var import_interface_logic2 = require("@fctc/interface-logic");
 var useDuplicateRowHandler = ({
   data,
@@ -84,7 +85,7 @@ var useDuplicateRowHandler = ({
   return handleDuplicateRecord;
 };
 
-// src/action/use-get-field-export.tsx
+// src/action/use-get-field-export.ts
 var import_interface_logic3 = require("@fctc/interface-logic");
 var useGetFieldExportHandler = ({
   data,
@@ -117,7 +118,7 @@ var useGetFieldExportHandler = ({
   return handleGetFieldExport;
 };
 
-// src/action/use-export-excel.tsx
+// src/action/use-export-excel.ts
 var import_interface_logic4 = require("@fctc/interface-logic");
 var useExportExcelHandler = ({
   data,
@@ -148,7 +149,7 @@ var useExportExcelHandler = ({
   return handleExport;
 };
 
-// src/widget/form/use-on-change-form.tsx
+// src/widget/form/use-on-change-form.ts
 var import_interface_logic5 = require("@fctc/interface-logic");
 var UseOnChangeFormHandler = ({
   data,
@@ -157,27 +158,32 @@ var UseOnChangeFormHandler = ({
   onSettled
 }) => {
   const fetchOnchange = (0, import_interface_logic5.useOnChangeForm)();
-  const handleOnChangeForm = () => {
+  return new Promise((resolve, reject) => {
     fetchOnchange.mutate(
       {
-        ids: data.id ? data.id : [],
+        ids: data.ids ? data.ids : [],
         model: data.model,
         specification: data.specification,
         context: data.context,
         object: data.object,
-        fieldChange: [data.nameField]
+        fieldChange: data.nameField
       },
       {
-        onSuccess,
-        onError,
+        onSuccess: (res) => {
+          onSuccess?.(res);
+          resolve(res);
+        },
+        onError: (err) => {
+          onError?.(err);
+          reject(err);
+        },
         onSettled
       }
     );
-  };
-  return handleOnChangeForm;
+  });
 };
 
-// src/widget/form/use-save-form.tsx
+// src/widget/form/use-save-form.ts
 var import_interface_logic6 = require("@fctc/interface-logic");
 var useSaveFormHandler = ({
   data,
@@ -189,9 +195,9 @@ var useSaveFormHandler = ({
   const handleSaveForm = () => {
     fetchSave.mutate(
       {
-        ids: data.id ? [data.id] : [],
+        ids: data.ids ? [data.ids] : [],
         model: data.model,
-        data,
+        data: data.records,
         specification: data.specification,
         context: data.context
       },
@@ -205,7 +211,7 @@ var useSaveFormHandler = ({
   return handleSaveForm;
 };
 
-// src/widget/form/use-remove-row.tsx
+// src/widget/form/use-remove-row.ts
 var import_interface_logic7 = require("@fctc/interface-logic");
 var useRemoveRowHandler = ({
   data,
@@ -231,7 +237,7 @@ var useRemoveRowHandler = ({
   return handleRemoveRow;
 };
 
-// src/widget/table/use-table.tsx
+// src/widget/table/use-table.ts
 var import_interface_logic8 = require("@fctc/interface-logic");
 var import_react = require("react");
 function mergeButtons(fields) {
@@ -245,20 +251,14 @@ function mergeButtons(fields) {
   }
   return others;
 }
-var useTableHandler = ({
-  fields,
-  data,
-  dataModel,
-  context,
-  typeTable
-}) => {
-  const [rows, setRows] = (0, import_react.useState)(data || []);
+var useTableHandler = ({ data }) => {
+  const [rows, setRows] = (0, import_react.useState)(data.records || []);
   const [columns, setColumns] = (0, import_react.useState)([]);
-  const dataModelFields = fields?.map((field) => {
+  const dataModelFields = data.fields?.map((field) => {
     return {
-      ...dataModel?.[field?.name],
+      ...data.dataModel?.[field?.name],
       ...field,
-      string: field?.string || dataModel?.[field?.name]?.string
+      string: field?.string || data.dataModel?.[field?.name]?.string
     };
   });
   const mergeFields = mergeButtons(dataModelFields);
@@ -271,7 +271,7 @@ var useTableHandler = ({
           if (item[field] && typeof item[field] === "object" && item[field].display_name) {
             transformedItem[field] = item[field];
           } else if (Array.isArray(item[field]) && item[field].length > 0) {
-            if (typeTable === "group" && item[field]?.length === 2 && typeof item[field]?.[1] === "string") {
+            if (data.typeTable === "group" && item[field]?.length === 2 && typeof item[field]?.[1] === "string") {
               transformedItem["string"] = item[field]?.[1];
             }
             transformedItem[field] = item[field];
@@ -282,13 +282,13 @@ var useTableHandler = ({
     });
   };
   (0, import_react.useEffect)(() => {
-    setRows(transformData(data || null));
-  }, [data]);
+    setRows(transformData(data.records || null));
+  }, [data.records]);
   const handleGetColumns = () => {
     let cols = [];
     try {
       cols = mergeFields?.filter((item) => {
-        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? import_interface_logic8.domainHelper.matchDomains(context, item?.column_invisible) : item?.invisible ? import_interface_logic8.domainHelper.matchDomains(context, item?.invisible) : false);
+        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? import_interface_logic8.domainHelper.matchDomains(data.context, item?.column_invisible) : item?.invisible ? import_interface_logic8.domainHelper.matchDomains(data.context, item?.invisible) : false);
       })?.map((field) => {
         return {
           name: field?.name,
@@ -305,7 +305,7 @@ var useTableHandler = ({
   (0, import_react.useEffect)(() => {
     const columns2 = handleGetColumns();
     setColumns(columns2);
-  }, [data]);
+  }, [data.records]);
   const onToggleColumnOptional = (item) => {
     const tempColumn = [...columns]?.map((val) => {
       if (item?.name === val?.name) {
@@ -322,13 +322,45 @@ var useTableHandler = ({
     rows,
     columns,
     onToggleColumnOptional,
-    typeTable
+    typeTable: data.typeTable
   };
 };
+
+// src/common/use-click-outside.ts
+var import_react2 = require("react");
+var DEFAULT_EVENTS = ["mousedown", "touchstart"];
+var useClickOutside = ({
+  handler,
+  events = DEFAULT_EVENTS,
+  nodes = [],
+  refs
+}) => {
+  const ref = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const listener = (event) => {
+      const { target } = event;
+      if (refs && refs?.length > 0 && refs?.some((r) => r.current?.contains(target))) {
+        return;
+      }
+      if (!(target instanceof HTMLElement)) return;
+      const shouldIgnore = target.hasAttribute("data-ignore-outside-clicks") || !document.body.contains(target) && target.tagName !== "HTML";
+      const shouldTrigger = nodes.length > 0 ? nodes.every((node) => node && !event.composedPath().includes(node)) : ref.current && !ref.current.contains(target);
+      if (shouldTrigger && !shouldIgnore) {
+        handler(event);
+      }
+    };
+    events.forEach((event) => document.addEventListener(event, listener));
+    return () => {
+      events.forEach((event) => document.removeEventListener(event, listener));
+    };
+  }, [handler, nodes, events]);
+  return ref;
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   UseOnChangeFormHandler,
   useArchieveHandler,
+  useClickOutside,
   useDuplicateRowHandler,
   useExportExcelHandler,
   useGetFieldExportHandler,

package/dist/index.mjs

@@ -1,4 +1,4 @@
-// src/action/use-archieve-row.tsx
+// src/action/use-archieve-row.ts
 import { useButton } from "@fctc/interface-logic";
 var useArchieveHandler = ({
   data,
@@ -25,7 +25,7 @@ var useArchieveHandler = ({
   return handleDuplicateRecord;
 };
 
-// src/action/use-duplicate-row.tsx
+// src/action/use-duplicate-row.ts
 import { useDuplicateRecord } from "@fctc/interface-logic";
 var useDuplicateRowHandler = ({
   data,
@@ -51,7 +51,7 @@ var useDuplicateRowHandler = ({
   return handleDuplicateRecord;
 };
 
-// src/action/use-get-field-export.tsx
+// src/action/use-get-field-export.ts
 import { useGetFieldExport } from "@fctc/interface-logic";
 var useGetFieldExportHandler = ({
   data,
@@ -84,7 +84,7 @@ var useGetFieldExportHandler = ({
   return handleGetFieldExport;
 };
 
-// src/action/use-export-excel.tsx
+// src/action/use-export-excel.ts
 import { evalJSONDomain, useExportExcel } from "@fctc/interface-logic";
 var useExportExcelHandler = ({
   data,
@@ -115,7 +115,7 @@ var useExportExcelHandler = ({
   return handleExport;
 };
 
-// src/widget/form/use-on-change-form.tsx
+// src/widget/form/use-on-change-form.ts
 import { useOnChangeForm } from "@fctc/interface-logic";
 var UseOnChangeFormHandler = ({
   data,
@@ -124,27 +124,32 @@ var UseOnChangeFormHandler = ({
   onSettled
 }) => {
   const fetchOnchange = useOnChangeForm();
-  const handleOnChangeForm = () => {
+  return new Promise((resolve, reject) => {
     fetchOnchange.mutate(
       {
-        ids: data.id ? data.id : [],
+        ids: data.ids ? data.ids : [],
         model: data.model,
         specification: data.specification,
         context: data.context,
         object: data.object,
-        fieldChange: [data.nameField]
+        fieldChange: data.nameField
       },
       {
-        onSuccess,
-        onError,
+        onSuccess: (res) => {
+          onSuccess?.(res);
+          resolve(res);
+        },
+        onError: (err) => {
+          onError?.(err);
+          reject(err);
+        },
         onSettled
       }
     );
-  };
-  return handleOnChangeForm;
+  });
 };
 
-// src/widget/form/use-save-form.tsx
+// src/widget/form/use-save-form.ts
 import { useSave } from "@fctc/interface-logic";
 var useSaveFormHandler = ({
   data,
@@ -156,9 +161,9 @@ var useSaveFormHandler = ({
   const handleSaveForm = () => {
     fetchSave.mutate(
       {
-        ids: data.id ? [data.id] : [],
+        ids: data.ids ? [data.ids] : [],
         model: data.model,
-        data,
+        data: data.records,
         specification: data.specification,
         context: data.context
       },
@@ -172,7 +177,7 @@ var useSaveFormHandler = ({
   return handleSaveForm;
 };
 
-// src/widget/form/use-remove-row.tsx
+// src/widget/form/use-remove-row.ts
 import { useRemoveRow } from "@fctc/interface-logic";
 var useRemoveRowHandler = ({
   data,
@@ -198,7 +203,7 @@ var useRemoveRowHandler = ({
   return handleRemoveRow;
 };
 
-// src/widget/table/use-table.tsx
+// src/widget/table/use-table.ts
 import { domainHelper } from "@fctc/interface-logic";
 import { useEffect, useState } from "react";
 function mergeButtons(fields) {
@@ -212,20 +217,14 @@ function mergeButtons(fields) {
   }
   return others;
 }
-var useTableHandler = ({
-  fields,
-  data,
-  dataModel,
-  context,
-  typeTable
-}) => {
-  const [rows, setRows] = useState(data || []);
+var useTableHandler = ({ data }) => {
+  const [rows, setRows] = useState(data.records || []);
   const [columns, setColumns] = useState([]);
-  const dataModelFields = fields?.map((field) => {
+  const dataModelFields = data.fields?.map((field) => {
     return {
-      ...dataModel?.[field?.name],
+      ...data.dataModel?.[field?.name],
       ...field,
-      string: field?.string || dataModel?.[field?.name]?.string
+      string: field?.string || data.dataModel?.[field?.name]?.string
     };
   });
   const mergeFields = mergeButtons(dataModelFields);
@@ -238,7 +237,7 @@ var useTableHandler = ({
           if (item[field] && typeof item[field] === "object" && item[field].display_name) {
             transformedItem[field] = item[field];
           } else if (Array.isArray(item[field]) && item[field].length > 0) {
-            if (typeTable === "group" && item[field]?.length === 2 && typeof item[field]?.[1] === "string") {
+            if (data.typeTable === "group" && item[field]?.length === 2 && typeof item[field]?.[1] === "string") {
               transformedItem["string"] = item[field]?.[1];
             }
             transformedItem[field] = item[field];
@@ -249,13 +248,13 @@ var useTableHandler = ({
     });
   };
   useEffect(() => {
-    setRows(transformData(data || null));
-  }, [data]);
+    setRows(transformData(data.records || null));
+  }, [data.records]);
   const handleGetColumns = () => {
     let cols = [];
     try {
       cols = mergeFields?.filter((item) => {
-        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? domainHelper.matchDomains(context, item?.column_invisible) : item?.invisible ? domainHelper.matchDomains(context, item?.invisible) : false);
+        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? domainHelper.matchDomains(data.context, item?.column_invisible) : item?.invisible ? domainHelper.matchDomains(data.context, item?.invisible) : false);
       })?.map((field) => {
         return {
           name: field?.name,
@@ -272,7 +271,7 @@ var useTableHandler = ({
   useEffect(() => {
     const columns2 = handleGetColumns();
     setColumns(columns2);
-  }, [data]);
+  }, [data.records]);
   const onToggleColumnOptional = (item) => {
     const tempColumn = [...columns]?.map((val) => {
       if (item?.name === val?.name) {
@@ -289,12 +288,44 @@ var useTableHandler = ({
     rows,
     columns,
     onToggleColumnOptional,
-    typeTable
+    typeTable: data.typeTable
   };
 };
+
+// src/common/use-click-outside.ts
+import { useEffect as useEffect2, useRef } from "react";
+var DEFAULT_EVENTS = ["mousedown", "touchstart"];
+var useClickOutside = ({
+  handler,
+  events = DEFAULT_EVENTS,
+  nodes = [],
+  refs
+}) => {
+  const ref = useRef(null);
+  useEffect2(() => {
+    const listener = (event) => {
+      const { target } = event;
+      if (refs && refs?.length > 0 && refs?.some((r) => r.current?.contains(target))) {
+        return;
+      }
+      if (!(target instanceof HTMLElement)) return;
+      const shouldIgnore = target.hasAttribute("data-ignore-outside-clicks") || !document.body.contains(target) && target.tagName !== "HTML";
+      const shouldTrigger = nodes.length > 0 ? nodes.every((node) => node && !event.composedPath().includes(node)) : ref.current && !ref.current.contains(target);
+      if (shouldTrigger && !shouldIgnore) {
+        handler(event);
+      }
+    };
+    events.forEach((event) => document.addEventListener(event, listener));
+    return () => {
+      events.forEach((event) => document.removeEventListener(event, listener));
+    };
+  }, [handler, nodes, events]);
+  return ref;
+};
 export {
   UseOnChangeFormHandler,
   useArchieveHandler,
+  useClickOutside,
   useDuplicateRowHandler,
   useExportExcelHandler,
   useGetFieldExportHandler,

package/dist/table.d.mts

@@ -1,8 +1,22 @@
-declare const useTableHandler: ({ fields, data, dataModel, context, typeTable, }: any) => {
-    rows: any;
+interface UseTableProps {
+    data: {
+        fields: any[];
+        records: any[];
+        dataModel: {
+            [fieldName: string]: {
+                string?: string;
+                [key: string]: any;
+            };
+        };
+        context: any;
+        typeTable?: 'list' | 'group' | 'calendar';
+    };
+}
+declare const useTableHandler: ({ data }: UseTableProps) => {
+    rows: any[];
     columns: any;
     onToggleColumnOptional: (item: any) => void;
-    typeTable: any;
+    typeTable: "list" | "group" | "calendar" | undefined;
 };
 
 export { useTableHandler };

package/dist/table.d.ts

@@ -1,8 +1,22 @@
-declare const useTableHandler: ({ fields, data, dataModel, context, typeTable, }: any) => {
-    rows: any;
+interface UseTableProps {
+    data: {
+        fields: any[];
+        records: any[];
+        dataModel: {
+            [fieldName: string]: {
+                string?: string;
+                [key: string]: any;
+            };
+        };
+        context: any;
+        typeTable?: 'list' | 'group' | 'calendar';
+    };
+}
+declare const useTableHandler: ({ data }: UseTableProps) => {
+    rows: any[];
     columns: any;
     onToggleColumnOptional: (item: any) => void;
-    typeTable: any;
+    typeTable: "list" | "group" | "calendar" | undefined;
 };
 
 export { useTableHandler };

package/dist/table.js

@@ -24,7 +24,7 @@ __export(table_exports, {
 });
 module.exports = __toCommonJS(table_exports);
 
-// src/widget/table/use-table.tsx
+// src/widget/table/use-table.ts
 var import_interface_logic = require("@fctc/interface-logic");
 var import_react = require("react");
 function mergeButtons(fields) {
@@ -38,20 +38,14 @@ function mergeButtons(fields) {
   }
   return others;
 }
-var useTableHandler = ({
-  fields,
-  data,
-  dataModel,
-  context,
-  typeTable
-}) => {
-  const [rows, setRows] = (0, import_react.useState)(data || []);
+var useTableHandler = ({ data }) => {
+  const [rows, setRows] = (0, import_react.useState)(data.records || []);
   const [columns, setColumns] = (0, import_react.useState)([]);
-  const dataModelFields = fields?.map((field) => {
+  const dataModelFields = data.fields?.map((field) => {
     return {
-      ...dataModel?.[field?.name],
+      ...data.dataModel?.[field?.name],
       ...field,
-      string: field?.string || dataModel?.[field?.name]?.string
+      string: field?.string || data.dataModel?.[field?.name]?.string
     };
   });
   const mergeFields = mergeButtons(dataModelFields);
@@ -64,7 +58,7 @@ var useTableHandler = ({
           if (item[field] && typeof item[field] === "object" && item[field].display_name) {
             transformedItem[field] = item[field];
           } else if (Array.isArray(item[field]) && item[field].length > 0) {
-            if (typeTable === "group" && item[field]?.length === 2 && typeof item[field]?.[1] === "string") {
+            if (data.typeTable === "group" && item[field]?.length === 2 && typeof item[field]?.[1] === "string") {
               transformedItem["string"] = item[field]?.[1];
             }
             transformedItem[field] = item[field];
@@ -75,13 +69,13 @@ var useTableHandler = ({
     });
   };
   (0, import_react.useEffect)(() => {
-    setRows(transformData(data || null));
-  }, [data]);
+    setRows(transformData(data.records || null));
+  }, [data.records]);
   const handleGetColumns = () => {
     let cols = [];
     try {
       cols = mergeFields?.filter((item) => {
-        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? import_interface_logic.domainHelper.matchDomains(context, item?.column_invisible) : item?.invisible ? import_interface_logic.domainHelper.matchDomains(context, item?.invisible) : false);
+        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? import_interface_logic.domainHelper.matchDomains(data.context, item?.column_invisible) : item?.invisible ? import_interface_logic.domainHelper.matchDomains(data.context, item?.invisible) : false);
       })?.map((field) => {
         return {
           name: field?.name,
@@ -98,7 +92,7 @@ var useTableHandler = ({
   (0, import_react.useEffect)(() => {
     const columns2 = handleGetColumns();
     setColumns(columns2);
-  }, [data]);
+  }, [data.records]);
   const onToggleColumnOptional = (item) => {
     const tempColumn = [...columns]?.map((val) => {
       if (item?.name === val?.name) {
@@ -115,7 +109,7 @@ var useTableHandler = ({
     rows,
     columns,
     onToggleColumnOptional,
-    typeTable
+    typeTable: data.typeTable
   };
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/table.mjs

@@ -1,4 +1,4 @@
-// src/widget/table/use-table.tsx
+// src/widget/table/use-table.ts
 import { domainHelper } from "@fctc/interface-logic";
 import { useEffect, useState } from "react";
 function mergeButtons(fields) {
@@ -12,20 +12,14 @@ function mergeButtons(fields) {
   }
   return others;
 }
-var useTableHandler = ({
-  fields,
-  data,
-  dataModel,
-  context,
-  typeTable
-}) => {
-  const [rows, setRows] = useState(data || []);
+var useTableHandler = ({ data }) => {
+  const [rows, setRows] = useState(data.records || []);
   const [columns, setColumns] = useState([]);
-  const dataModelFields = fields?.map((field) => {
+  const dataModelFields = data.fields?.map((field) => {
     return {
-      ...dataModel?.[field?.name],
+      ...data.dataModel?.[field?.name],
       ...field,
-      string: field?.string || dataModel?.[field?.name]?.string
+      string: field?.string || data.dataModel?.[field?.name]?.string
     };
   });
   const mergeFields = mergeButtons(dataModelFields);
@@ -38,7 +32,7 @@ var useTableHandler = ({
           if (item[field] && typeof item[field] === "object" && item[field].display_name) {
             transformedItem[field] = item[field];
           } else if (Array.isArray(item[field]) && item[field].length > 0) {
-            if (typeTable === "group" && item[field]?.length === 2 && typeof item[field]?.[1] === "string") {
+            if (data.typeTable === "group" && item[field]?.length === 2 && typeof item[field]?.[1] === "string") {
               transformedItem["string"] = item[field]?.[1];
             }
             transformedItem[field] = item[field];
@@ -49,13 +43,13 @@ var useTableHandler = ({
     });
   };
   useEffect(() => {
-    setRows(transformData(data || null));
-  }, [data]);
+    setRows(transformData(data.records || null));
+  }, [data.records]);
   const handleGetColumns = () => {
     let cols = [];
     try {
       cols = mergeFields?.filter((item) => {
-        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? domainHelper.matchDomains(context, item?.column_invisible) : item?.invisible ? domainHelper.matchDomains(context, item?.invisible) : false);
+        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? domainHelper.matchDomains(data.context, item?.column_invisible) : item?.invisible ? domainHelper.matchDomains(data.context, item?.invisible) : false);
       })?.map((field) => {
         return {
           name: field?.name,
@@ -72,7 +66,7 @@ var useTableHandler = ({
   useEffect(() => {
     const columns2 = handleGetColumns();
     setColumns(columns2);
-  }, [data]);
+  }, [data.records]);
   const onToggleColumnOptional = (item) => {
     const tempColumn = [...columns]?.map((val) => {
       if (item?.name === val?.name) {
@@ -89,7 +83,7 @@ var useTableHandler = ({
     rows,
     columns,
     onToggleColumnOptional,
-    typeTable
+    typeTable: data.typeTable
   };
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fctc/widget-logic",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -24,6 +24,11 @@
       "types": "./dist/table.d.ts",
       "import": "./dist/table.mjs",
       "require": "./dist/table.cjs"
+    },
+    "./common": {
+      "types": "./dist/common.d.ts",
+      "import": "./dist/common.mjs",
+      "require": "./dist/common.cjs"
     }
   },
   "files": [