react-table-edit 0.6.8 → 0.7.0

package/dist/index.mjs

@@ -3,8 +3,6 @@ import { Fragment as Fragment17, forwardRef as forwardRef3, useEffect as useEffe
 import { Button as Button5, DropdownMenu as DropdownMenu3, DropdownToggle as DropdownToggle3, Input as Input8, UncontrolledDropdown, UncontrolledTooltip as UncontrolledTooltip3 } from "reactstrap";
 import classnames9 from "classnames";
 import { useTranslation as useTranslation12 } from "react-i18next";
-import Select3 from "react-select";
-import AsyncSelect from "react-select/async";
 import { AlertCircle, Info as Info2, Settings } from "becoxy-icons";
 
 // test-app/src/component/react-input/index.tsx
@@ -277,21 +275,6 @@ var roundNumber = (num, fraction) => {
   return result;
 };
 
-// test-app/src/component/icon/index.tsx
-import * as Icon from "becoxy-icons";
-import { Fragment as Fragment3 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var IconCustom = (props) => {
-  const { iconName, size } = props;
-  if (iconName === "") {
-    return null;
-  } else {
-    const TagIcon = iconName === "" ? "" : Icon[iconName];
-    return /* @__PURE__ */ jsx3(Fragment3, { children: iconName === "" ? "" : /* @__PURE__ */ jsx3(TagIcon, { fontSize: size }) });
-  }
-};
-var icon_default = IconCustom;
-
 // test-app/src/component/table/index.tsx
 import moment2 from "moment";
 
@@ -317,28 +300,28 @@ import classNames2 from "classnames";
 import { Controller } from "react-hook-form";
 import { Input as Input2, Label, FormFeedback } from "reactstrap";
 import classnames from "classnames";
-import { Fragment as Fragment4 } from "react";
+import { Fragment as Fragment3 } from "react";
 import { useTranslation } from "react-i18next";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var TextInput = (props) => {
   const { t } = useTranslation();
   const { control, id, name, min, max, type, label, labelSize, required, errors, height, disabled, row, isLabel, placeholder, autoFocus, inLine, callback, readOnly, classes, ...rest } = props;
   const renderLabel = () => {
-    return /* @__PURE__ */ jsx4(Fragment4, { children: isLabel === false ? "" : /* @__PURE__ */ jsxs3(Label, { for: name, children: [
+    return /* @__PURE__ */ jsx3(Fragment3, { children: isLabel === false ? "" : /* @__PURE__ */ jsxs3(Label, { for: name, children: [
       t(label ? label : ""),
       " ",
-      required ? /* @__PURE__ */ jsx4("span", { className: "text-danger", children: "*" }) : "",
+      required ? /* @__PURE__ */ jsx3("span", { className: "text-danger", children: "*" }) : "",
       " "
     ] }) });
   };
   const renderInput = () => {
-    return /* @__PURE__ */ jsxs3(Fragment4, { children: [
-      /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      /* @__PURE__ */ jsx3(
         Controller,
         {
           name,
           control,
-          render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx4(
+          render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx3(
             Input2,
             {
               id,
@@ -380,10 +363,10 @@ var TextInput = (props) => {
           )
         }
       ),
-      errors && /* @__PURE__ */ jsx4(FormFeedback, { children: errors?.message })
+      errors && /* @__PURE__ */ jsx3(FormFeedback, { children: errors?.message })
     ] });
   };
-  return /* @__PURE__ */ jsx4(Fragment4, { children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx3(Fragment3, { children: /* @__PURE__ */ jsxs3(
     "div",
     {
       className: classnames(
@@ -397,7 +380,7 @@ var TextInput = (props) => {
       ),
       children: [
         renderLabel(),
-        /* @__PURE__ */ jsx4("div", { className: classnames("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
+        /* @__PURE__ */ jsx3("div", { className: classnames("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
       ]
     }
   ) });
@@ -409,9 +392,9 @@ import { Controller as Controller2 } from "react-hook-form";
 import { Label as Label2, FormFeedback as FormFeedback2 } from "reactstrap";
 import Select from "react-select";
 import classnames2 from "classnames";
-import { Fragment as Fragment5 } from "react";
+import { Fragment as Fragment4 } from "react";
 import { useTranslation as useTranslation2 } from "react-i18next";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var SelectBox = (props) => {
   const { t } = useTranslation2();
   const { control, id, placeholder, fieldValue, confirmHandle, disabled, name, options, label, isLabel, labelSize, classes, required, errors, isMulti, isClearable, labelComponent, callback, inLine, onInputChange, ref, menuPosition, ...rest } = props;
@@ -422,14 +405,14 @@ var SelectBox = (props) => {
     }
   };
   const renderSelect = () => {
-    return /* @__PURE__ */ jsxs4(Fragment5, { children: [
-      /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+      /* @__PURE__ */ jsx4(
         Controller2,
         {
           name,
           control,
           render: ({ field: { value, onChange } }) => {
-            return /* @__PURE__ */ jsx5(
+            return /* @__PURE__ */ jsx4(
               Select,
               {
                 ...rest,
@@ -464,10 +447,10 @@ var SelectBox = (props) => {
           }
         }
       ),
-      errors && /* @__PURE__ */ jsx5(FormFeedback2, { children: errors?.message })
+      errors && /* @__PURE__ */ jsx4(FormFeedback2, { children: errors?.message })
     ] });
   };
-  return /* @__PURE__ */ jsx5(Fragment5, { children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx4(Fragment4, { children: /* @__PURE__ */ jsxs4(
     "div",
     {
       className: classnames2(
@@ -483,10 +466,10 @@ var SelectBox = (props) => {
         isLabel === false ? "" : /* @__PURE__ */ jsxs4(Label2, { className: "form-label", for: name, children: [
           t(label ? label : ""),
           " ",
-          required ? /* @__PURE__ */ jsx5("span", { className: "text-danger", children: "*" }) : "",
+          required ? /* @__PURE__ */ jsx4("span", { className: "text-danger", children: "*" }) : "",
           " "
         ] }),
-        /* @__PURE__ */ jsx5("div", { className: classnames2("form-input-content", { "hidden-label": isLabel === false }), children: renderSelect() })
+        /* @__PURE__ */ jsx4("div", { className: classnames2("form-input-content", { "hidden-label": isLabel === false }), children: renderSelect() })
       ]
     }
   ) });
@@ -497,14 +480,14 @@ var select_default = SelectBox;
 import { Controller as Controller3 } from "react-hook-form";
 import { Label as Label3, FormFeedback as FormFeedback3 } from "reactstrap";
 import classnames3 from "classnames";
-import { Fragment as Fragment6 } from "react";
+import { Fragment as Fragment5 } from "react";
 import { useTranslation as useTranslation3 } from "react-i18next";
 import CreatableSelect from "react-select/creatable";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var CreatableSelectBox = (props) => {
   const { t } = useTranslation3();
   const { isMulti, id, isLabel, control, placeholder, fieldValue, name, options, label, labelSize, required, errors, inLine, isClearable, labelComponent, onInputChange, callback, ...rest } = props;
-  return /* @__PURE__ */ jsx6(Fragment6, { children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx5(Fragment5, { children: /* @__PURE__ */ jsxs5(
     "div",
     {
       className: classnames3(
@@ -519,16 +502,16 @@ var CreatableSelectBox = (props) => {
         isLabel === false ? "" : /* @__PURE__ */ jsxs5(Label3, { className: "form-label", for: name, children: [
           t(label),
           " ",
-          required ? /* @__PURE__ */ jsx6("span", { className: "text-danger", children: "*" }) : "",
+          required ? /* @__PURE__ */ jsx5("span", { className: "text-danger", children: "*" }) : "",
           " "
         ] }),
         /* @__PURE__ */ jsxs5("div", { className: classnames3("form-input-content", { "hidden-label": isLabel === false }), children: [
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx5(
             Controller3,
             {
               name,
               control,
-              render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx6(
+              render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx5(
                 CreatableSelect,
                 {
                   ...rest,
@@ -556,7 +539,7 @@ var CreatableSelectBox = (props) => {
               )
             }
           ),
-          errors && /* @__PURE__ */ jsx6(FormFeedback3, { children: errors?.message })
+          errors && /* @__PURE__ */ jsx5(FormFeedback3, { children: errors?.message })
         ] })
       ]
     }
@@ -568,9 +551,9 @@ var creactable_select_default = CreatableSelectBox;
 import { Controller as Controller4 } from "react-hook-form";
 import { Input as Input3, Label as Label4, FormFeedback as FormFeedback4 } from "reactstrap";
 import classnames4 from "classnames";
-import { Fragment as Fragment7 } from "react";
+import { Fragment as Fragment6 } from "react";
 import { useTranslation as useTranslation4 } from "react-i18next";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var NumberInput = (props) => {
   const { t } = useTranslation4();
   const {
@@ -600,21 +583,21 @@ var NumberInput = (props) => {
     ...rest
   } = props;
   const renderLabel = () => {
-    return /* @__PURE__ */ jsx7(Fragment7, { children: isLabel === false ? "" : /* @__PURE__ */ jsxs6(Label4, { className: "form-label", for: name, children: [
+    return /* @__PURE__ */ jsx6(Fragment6, { children: isLabel === false ? "" : /* @__PURE__ */ jsxs6(Label4, { className: "form-label", for: name, children: [
       t(label ? label : ""),
       " ",
-      required ? /* @__PURE__ */ jsx7("span", { className: "text-danger", children: "*" }) : "",
+      required ? /* @__PURE__ */ jsx6("span", { className: "text-danger", children: "*" }) : "",
       " "
     ] }) });
   };
   const renderInput = () => {
-    return /* @__PURE__ */ jsxs6(Fragment7, { children: [
-      /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsxs6(Fragment6, { children: [
+      /* @__PURE__ */ jsx6(
         Controller4,
         {
           name,
           control,
-          render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx7(
+          render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx6(
             Input3,
             {
               id,
@@ -674,10 +657,10 @@ var NumberInput = (props) => {
           )
         }
       ),
-      errors && /* @__PURE__ */ jsx7(FormFeedback4, { children: errors?.message })
+      errors && /* @__PURE__ */ jsx6(FormFeedback4, { children: errors?.message })
     ] });
   };
-  return /* @__PURE__ */ jsx7(Fragment7, { children: /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsx6(Fragment6, { children: /* @__PURE__ */ jsxs6(
     "div",
     {
       className: classnames4(
@@ -691,7 +674,7 @@ var NumberInput = (props) => {
       ),
       children: [
         renderLabel(),
-        /* @__PURE__ */ jsx7("div", { className: classnames4("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
+        /* @__PURE__ */ jsx6("div", { className: classnames4("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
       ]
     }
   ) });
@@ -699,7 +682,7 @@ var NumberInput = (props) => {
 var input_number_default = NumberInput;
 
 // test-app/src/component/edit-form/index.tsx
-import { Fragment as Fragment8, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var defaultWidth = 200;
 var EditForm = forwardRef((props, ref) => {
   const {
@@ -869,9 +852,9 @@ var EditForm = forwardRef((props, ref) => {
     }
   };
   const renderForm = (rows) => {
-    return /* @__PURE__ */ jsx8(Row, { className: "gy-25", children: rows.map((item, index) => {
+    return /* @__PURE__ */ jsx7(Row, { className: "gy-25", children: rows.map((item, index) => {
       if (item.type === "numeric") {
-        return /* @__PURE__ */ jsx8(Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ jsx8(
+        return /* @__PURE__ */ jsx7(Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ jsx7(
           input_number_default,
           {
             id: `form-element-${field}-${index}`,
@@ -891,7 +874,7 @@ var EditForm = forwardRef((props, ref) => {
           index
         ) }, index);
       } else if (item.type === "text") {
-        return /* @__PURE__ */ jsx8(Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ jsx8(
+        return /* @__PURE__ */ jsx7(Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ jsx7(
           input_text_default,
           {
             id: `form-element-${field}-${index}`,
@@ -908,7 +891,7 @@ var EditForm = forwardRef((props, ref) => {
           index
         ) }, index);
       } else if (item.type === "select") {
-        return /* @__PURE__ */ jsx8(Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ jsx8(
+        return /* @__PURE__ */ jsx7(Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ jsx7(
           select_default,
           {
             id: `form-element-${field}-${index}`,
@@ -927,7 +910,7 @@ var EditForm = forwardRef((props, ref) => {
           index
         ) }, index);
       } else if (item.type === "selectCreatable") {
-        return /* @__PURE__ */ jsx8(Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ jsx8(
+        return /* @__PURE__ */ jsx7(Col, { xl: 12, onKeyDown: (e) => formItemKeyDown(e, index), children: /* @__PURE__ */ jsx7(
           creactable_select_default,
           {
             id: `form-element-${field}-${index}`,
@@ -948,20 +931,20 @@ var EditForm = forwardRef((props, ref) => {
       }
     }) });
   };
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       className: "form-edit",
       ref,
       id,
-      children: /* @__PURE__ */ jsx8("div", { ref: editFormRef, children: /* @__PURE__ */ jsxs7(
+      children: /* @__PURE__ */ jsx7("div", { ref: editFormRef, children: /* @__PURE__ */ jsxs7(
         Dropdown,
         {
           isOpen: dropdownOpen,
           toggle: () => {
           },
           children: [
-            /* @__PURE__ */ jsx8(DropdownToggle, { tag: "div", children: /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx7(DropdownToggle, { tag: "div", children: /* @__PURE__ */ jsx7(
               Input4,
               {
                 style: { backgroundColor: "#FFF", textAlign: textAlign ?? "left" },
@@ -976,7 +959,7 @@ var EditForm = forwardRef((props, ref) => {
                 readOnly: true
               }
             ) }),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx7(
               DropdownMenu,
               {
                 className: "formula-dropdown icon-dropdown p-0",
@@ -987,8 +970,8 @@ var EditForm = forwardRef((props, ref) => {
                   borderRadius: 8,
                   zIndex: 1056
                 },
-                children: /* @__PURE__ */ jsx8(DropdownItem, { className: "p-0", style: { borderRadius: "6px" }, tag: "div", header: true, children: /* @__PURE__ */ jsxs7(Form, { className: "todo-modal", onKeyDown: (e) => formKeyDown(e, handleSubmit(handleOnSubmit)), children: [
-                  /* @__PURE__ */ jsx8(
+                children: /* @__PURE__ */ jsx7(DropdownItem, { className: "p-0", style: { borderRadius: "6px" }, tag: "div", header: true, children: /* @__PURE__ */ jsxs7(Form, { className: "todo-modal", onKeyDown: (e) => formKeyDown(e, handleSubmit(handleOnSubmit)), children: [
+                  /* @__PURE__ */ jsx7(
                     "div",
                     {
                       className: "p-1",
@@ -1000,8 +983,8 @@ var EditForm = forwardRef((props, ref) => {
                     }
                   ),
                   /* @__PURE__ */ jsxs7("div", { className: "d-flex justify-content-between p-50", style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }, children: [
-                    /* @__PURE__ */ jsx8("div", { className: "text-primary py-25", style: { fontSize: 12 }, children: footerTemplate ? footerTemplate(rowData) : "" }),
-                    !onChangeField ? /* @__PURE__ */ jsx8(Fragment8, { children: /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx7("div", { className: "text-primary py-25", style: { fontSize: 12 }, children: footerTemplate ? footerTemplate(rowData) : "" }),
+                    !onChangeField ? /* @__PURE__ */ jsx7(Fragment7, { children: /* @__PURE__ */ jsx7(
                       Button,
                       {
                         ref: buttonRef,
@@ -1015,7 +998,7 @@ var EditForm = forwardRef((props, ref) => {
                         },
                         children: t("Save")
                       }
-                    ) }) : /* @__PURE__ */ jsx8(Fragment8, {})
+                    ) }) : /* @__PURE__ */ jsx7(Fragment7, {})
                   ] })
                 ] }) })
               }
@@ -1029,7 +1012,7 @@ var EditForm = forwardRef((props, ref) => {
 var edit_form_default = EditForm;
 
 // test-app/src/component/sidebar-setting-column/index.tsx
-import { Fragment as Fragment10, useEffect as useEffect5, useState as useState4 } from "react";
+import { Fragment as Fragment9, useEffect as useEffect5, useState as useState4 } from "react";
 import { Button as Button2, Input as Input5 } from "reactstrap";
 import { useTranslation as useTranslation7 } from "react-i18next";
 
@@ -1037,23 +1020,23 @@ import { useTranslation as useTranslation7 } from "react-i18next";
 import { Edit, Info, Plus, X as X2 } from "becoxy-icons";
 import classNames3 from "classnames";
 import { useTranslation as useTranslation6 } from "react-i18next";
-import { Fragment as Fragment9, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var ModalHeader = (props) => {
   const { title, handleModal, typeModal = "Edit", component } = props;
   const { t } = useTranslation6();
   const handleModalIcon = () => {
     if (typeModal === "Edit" || typeModal === "Approval") {
-      return /* @__PURE__ */ jsx9(Edit, { fontSize: 17, className: "me-1" });
+      return /* @__PURE__ */ jsx8(Edit, { fontSize: 17, className: "me-1" });
     } else if (typeModal === "View") {
-      return /* @__PURE__ */ jsx9(Info, { fontSize: 17, className: "me-1" });
+      return /* @__PURE__ */ jsx8(Info, { fontSize: 17, className: "me-1" });
     } else if (typeModal === "Detail") {
-      return /* @__PURE__ */ jsx9(Info, { fontSize: 17, className: "me-1" });
+      return /* @__PURE__ */ jsx8(Info, { fontSize: 17, className: "me-1" });
     } else if (typeModal === "Order") {
-      return /* @__PURE__ */ jsx9("span", { className: "e-icons e-sorting-1 me-1", style: { fontSize: "14px" } });
+      return /* @__PURE__ */ jsx8("span", { className: "e-icons e-sorting-1 me-1", style: { fontSize: "14px" } });
     } else if (typeModal === "Process") {
-      return /* @__PURE__ */ jsx9("span", { className: "e-flat e-icons e-paste-match-destination me-1", style: { fontSize: "14px" } });
+      return /* @__PURE__ */ jsx8("span", { className: "e-flat e-icons e-paste-match-destination me-1", style: { fontSize: "14px" } });
     } else {
-      return /* @__PURE__ */ jsx9(Plus, { fontSize: 17, className: "me-1" });
+      return /* @__PURE__ */ jsx8(Plus, { fontSize: 17, className: "me-1" });
     }
   };
   return /* @__PURE__ */ jsxs8("div", { className: "modal-header d-flex align-items-center justify-content-between mb-1", children: [
@@ -1063,9 +1046,9 @@ var ModalHeader = (props) => {
         " ",
         t(title)
       ] }),
-      component ? component() : /* @__PURE__ */ jsx9(Fragment9, {})
+      component ? component() : /* @__PURE__ */ jsx8(Fragment8, {})
     ] }),
-    /* @__PURE__ */ jsx9("div", { className: "todo-item-action d-flex align-items-center", children: /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx8("div", { className: "todo-item-action d-flex align-items-center", children: /* @__PURE__ */ jsx8(
       X2,
       {
         className: classNames3("fw-normal mt-25 cursor-pointer", { "d-none": !handleModal }),
@@ -1081,7 +1064,7 @@ var modal_header_default = ModalHeader;
 import { ChevronLeft, ChevronRight } from "becoxy-icons";
 import classNames4 from "classnames";
 import { useEffect as useEffect4, useState as useState3 } from "react";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var Sidebar = (props) => {
   const {
     open,
@@ -1124,7 +1107,7 @@ var Sidebar = (props) => {
         }
       },
       children: [
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx9(
           "div",
           {
             className: classNames4("offcanvas-backdrop fade", {
@@ -1166,8 +1149,8 @@ var Sidebar = (props) => {
                     setIsFullScreen(!isFullScreen);
                   },
                   children: [
-                    /* @__PURE__ */ jsx10(ChevronLeft, { className: `${isFullScreen ? "d-none" : ""}`, fontSize: 16 }),
-                    /* @__PURE__ */ jsx10(ChevronRight, { className: `${!isFullScreen ? "d-none" : ""}`, fontSize: 15 })
+                    /* @__PURE__ */ jsx9(ChevronLeft, { className: `${isFullScreen ? "d-none" : ""}`, fontSize: 16 }),
+                    /* @__PURE__ */ jsx9(ChevronRight, { className: `${!isFullScreen ? "d-none" : ""}`, fontSize: 15 })
                   ]
                 }
               ),
@@ -1183,7 +1166,7 @@ var sidebar_default = Sidebar;
 
 // test-app/src/component/sidebar-setting-column/index.tsx
 import classnames5 from "classnames";
-import { Fragment as Fragment11, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var SidebarSetColumn = (props) => {
   const { column, setColumn, openSidebar, handleSidebar } = props;
   const { t } = useTranslation7();
@@ -1217,13 +1200,13 @@ var SidebarSetColumn = (props) => {
     };
   }, []);
   const renderFooterButtons = () => {
-    return /* @__PURE__ */ jsxs10(Fragment10, { children: [
-      /* @__PURE__ */ jsx11(Button2, { color: "primary", onClick: handleSubmit, className: "me-1", children: t("Confirm") }),
-      /* @__PURE__ */ jsx11(Button2, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })
+    return /* @__PURE__ */ jsxs10(Fragment9, { children: [
+      /* @__PURE__ */ jsx10(Button2, { color: "primary", onClick: handleSubmit, className: "me-1", children: t("Confirm") }),
+      /* @__PURE__ */ jsx10(Button2, { color: "secondary", onClick: handleCancel, outline: true, children: t("Close") })
     ] });
   };
   const visibleTemplate = (item, index) => {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx10(
       Input5,
       {
         defaultChecked: item.visible ?? true,
@@ -1241,7 +1224,7 @@ var SidebarSetColumn = (props) => {
     );
   };
   const fixColumnTemplate = (item, index) => {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx10(
       Input5,
       {
         defaultChecked: item.fixedType === "left" || item.fixedType === "right",
@@ -1270,7 +1253,7 @@ var SidebarSetColumn = (props) => {
       field: "headerText",
       headerText: "Column name",
       template: (e) => {
-        return /* @__PURE__ */ jsx11(Fragment11, { children: t(e.headerText) });
+        return /* @__PURE__ */ jsx10(Fragment10, { children: t(e.headerText) });
       },
       visible: true,
       width: 175,
@@ -1308,10 +1291,10 @@ var SidebarSetColumn = (props) => {
     }
   ];
   const renderHeaderCol = (col, indexCol) => {
-    return /* @__PURE__ */ jsx11(
-      Fragment10,
+    return /* @__PURE__ */ jsx10(
+      Fragment9,
       {
-        children: col.visible !== false && /* @__PURE__ */ jsx11(
+        children: col.visible !== false && /* @__PURE__ */ jsx10(
           "th",
           {
             className: classnames5(
@@ -1324,7 +1307,7 @@ var SidebarSetColumn = (props) => {
               top: `${0 * 42}px`,
               maxWidth: col.maxWidth
             },
-            children: /* @__PURE__ */ jsx11(
+            children: /* @__PURE__ */ jsx10(
               "div",
               {
                 role: "textbox",
@@ -1350,13 +1333,13 @@ var SidebarSetColumn = (props) => {
       toggleSidebar: handleCancel,
       width: 700,
       children: [
-        /* @__PURE__ */ jsx11(modal_header_default, { typeModal: "Edit", handleModal: handleCancel, title: "Column setup" }),
-        /* @__PURE__ */ jsx11("div", { className: "ms-2 react-table-edit", children: /* @__PURE__ */ jsx11("div", { className: "r-grid", children: /* @__PURE__ */ jsx11("div", { className: "r-gridtable", style: { height: windowSize.innerHeight - 120 }, children: /* @__PURE__ */ jsxs10("table", { style: { width: "100%" }, children: [
-          /* @__PURE__ */ jsx11("thead", { className: "r-gridheader", children: /* @__PURE__ */ jsx11("tr", { className: "r-row", role: "row", children: columns.map((col, index) => {
+        /* @__PURE__ */ jsx10(modal_header_default, { typeModal: "Edit", handleModal: handleCancel, title: "Column setup" }),
+        /* @__PURE__ */ jsx10("div", { className: "ms-2 react-table-edit", children: /* @__PURE__ */ jsx10("div", { className: "r-grid", children: /* @__PURE__ */ jsx10("div", { className: "r-gridtable", style: { height: windowSize.innerHeight - 120 }, children: /* @__PURE__ */ jsxs10("table", { style: { width: "100%" }, children: [
+          /* @__PURE__ */ jsx10("thead", { className: "r-gridheader", children: /* @__PURE__ */ jsx10("tr", { className: "r-row", role: "row", children: columns.map((col, index) => {
             return renderHeaderCol(col, index);
           }) }) }),
-          /* @__PURE__ */ jsx11("tbody", { className: "r-gridcontent", children: dataSource?.map((row, indexRow) => {
-            return /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx10("tbody", { className: "r-gridcontent", children: dataSource?.map((row, indexRow) => {
+            return /* @__PURE__ */ jsx10(
               "tr",
               {
                 className: classnames5("r-row", { "last-row": indexRow === dataSource.length - 1 }, { "fisrt-row": indexRow === 0 }),
@@ -1365,7 +1348,7 @@ var SidebarSetColumn = (props) => {
                   if (col.editType === "numeric" || col.editTypeCondition && col.editTypeCondition(row) === "numeric") {
                     value = formartNumberic(row[col.field], ",", ".", col.numericSettings?.fraction, true) ?? 0;
                   }
-                  return /* @__PURE__ */ jsx11(Fragment10, { children: col.visible !== false && /* @__PURE__ */ jsx11(
+                  return /* @__PURE__ */ jsx10(Fragment9, { children: col.visible !== false && /* @__PURE__ */ jsx10(
                     "td",
                     {
                       className: classnames5(
@@ -1391,21 +1374,21 @@ var SidebarSetColumn = (props) => {
                           e.stopPropagation();
                         }
                       },
-                      children: /* @__PURE__ */ jsx11(
+                      children: /* @__PURE__ */ jsx10(
                         "div",
                         {
                           className: classnames5("r-rowcell-div"),
                           style: {
                             width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : "auto"
                           },
-                          children: /* @__PURE__ */ jsx11(
+                          children: /* @__PURE__ */ jsx10(
                             "div",
                             {
                               className: classnames5("r-rowcell-content"),
                               style: {
                                 margin: "7px 9px"
                               },
-                              children: /* @__PURE__ */ jsx11("div", { className: "r-cell-text", children: col.template ? col.template(row, indexRow) : value })
+                              children: /* @__PURE__ */ jsx10("div", { className: "r-cell-text", children: col.template ? col.template(row, indexRow) : value })
                             }
                           )
                         }
@@ -1419,7 +1402,7 @@ var SidebarSetColumn = (props) => {
             );
           }) })
         ] }) }) }) }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx10(
           "div",
           {
             className: "d-flex justify-content-end p-1 ",
@@ -1439,10 +1422,10 @@ import { DropDownTreeComponent } from "@syncfusion/ej2-react-dropdowns";
 // test-app/src/component/paging/index.tsx
 import { ChevronRight as ChevronRight2, ChevronLeft as ChevronLeft2, ChevronsLeft, ChevronsRight } from "becoxy-icons";
 import classNames5 from "classnames";
-import { Fragment as Fragment12, useEffect as useEffect6, useState as useState5 } from "react";
+import { Fragment as Fragment11, useEffect as useEffect6, useState as useState5 } from "react";
 import { useTranslation as useTranslation8 } from "react-i18next";
 import Select2 from "react-select";
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOptions, onChangePageSize }) => {
   const { t } = useTranslation8();
   const [countPage, setCountPage] = useState5(0);
@@ -1457,7 +1440,7 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
     const arr = [];
     for (let index = (number - 1) * 5 + 1; index <= number * 5 && index <= Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1); index++) {
       arr.push(
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx11(
           "div",
           {
             className: classNames5("r-number", { "r-active": index === currentPage }),
@@ -1472,11 +1455,11 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
     }
     return arr;
   };
-  return /* @__PURE__ */ jsx12(Fragment12, { children: /* @__PURE__ */ jsxs11("div", { className: "r-pager", children: [
+  return /* @__PURE__ */ jsx11(Fragment11, { children: /* @__PURE__ */ jsxs11("div", { className: "r-pager", children: [
     /* @__PURE__ */ jsxs11("div", { className: "r-pagercontainer", children: [
-      /* @__PURE__ */ jsx12("button", { className: "r-button", type: "button", disabled: countPage <= 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: 1, old: currentPage }), children: /* @__PURE__ */ jsx12(ChevronsLeft, { fontSize: 16 }) }),
-      /* @__PURE__ */ jsx12("button", { className: "r-button", type: "button", disabled: countPage <= 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: currentPage - 1, old: currentPage }), children: /* @__PURE__ */ jsx12(ChevronLeft2, { fontSize: 16 }) }),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx11("button", { className: "r-button", type: "button", disabled: countPage <= 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: 1, old: currentPage }), children: /* @__PURE__ */ jsx11(ChevronsLeft, { fontSize: 16 }) }),
+      /* @__PURE__ */ jsx11("button", { className: "r-button", type: "button", disabled: countPage <= 1 || currentPage === 1, onClick: () => onChangePage({ totalItem, pageSize, currentPage: currentPage - 1, old: currentPage }), children: /* @__PURE__ */ jsx11(ChevronLeft2, { fontSize: 16 }) }),
+      /* @__PURE__ */ jsx11(
         "button",
         {
           className: classNames5("r-button", { "d-none": currentPageNumber === 1 }),
@@ -1489,7 +1472,7 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
         }
       ),
       renderPageNumber(currentPageNumber),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx11(
         "button",
         {
           className: classNames5("r-button", { "d-none": currentPageNumber * 5 >= countPage }),
@@ -1501,9 +1484,9 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
           children: "..."
         }
       ),
-      /* @__PURE__ */ jsx12("button", { className: "r-button", type: "button", disabled: countPage <= 1 || countPage === currentPage, onClick: () => onChangePage({ totalItem, pageSize, currentPage: currentPage + 1, old: currentPage }), children: /* @__PURE__ */ jsx12(ChevronRight2, { fontSize: 16 }) }),
-      /* @__PURE__ */ jsx12("button", { className: "r-button", type: "button", disabled: countPage <= 1 || countPage === currentPage, onClick: () => onChangePage({ totalItem, pageSize, currentPage: Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1), old: currentPage }), children: /* @__PURE__ */ jsx12(ChevronsRight, { fontSize: 16 }) }),
-      /* @__PURE__ */ jsx12("div", { className: "r-pagesize", children: /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx11("button", { className: "r-button", type: "button", disabled: countPage <= 1 || countPage === currentPage, onClick: () => onChangePage({ totalItem, pageSize, currentPage: currentPage + 1, old: currentPage }), children: /* @__PURE__ */ jsx11(ChevronRight2, { fontSize: 16 }) }),
+      /* @__PURE__ */ jsx11("button", { className: "r-button", type: "button", disabled: countPage <= 1 || countPage === currentPage, onClick: () => onChangePage({ totalItem, pageSize, currentPage: Math.floor(totalItem / pageSize) + (Math.floor(totalItem / pageSize) === totalItem / pageSize ? 0 : 1), old: currentPage }), children: /* @__PURE__ */ jsx11(ChevronsRight, { fontSize: 16 }) }),
+      /* @__PURE__ */ jsx11("div", { className: "r-pagesize", children: /* @__PURE__ */ jsx11(
         Select2,
         {
           value: { value: pageSize, label: pageSize },
@@ -1516,14 +1499,14 @@ var PagingComponent = ({ totalItem, pageSize, currentPage, onChangePage, pageOpt
           classNamePrefix: "select-pagesize"
         }
       ) }),
-      /* @__PURE__ */ jsx12("span", { style: { display: "inline", marginLeft: 10, fontSize: 13 }, children: t("pagerDropDown") })
+      /* @__PURE__ */ jsx11("span", { style: { display: "inline", marginLeft: 10, fontSize: 13 }, children: t("pagerDropDown") })
     ] }),
-    /* @__PURE__ */ jsx12("div", { className: "r-parentmsgbar", children: t("totalItemsInfo", { page: currentPage, countPage, totalItem }) })
+    /* @__PURE__ */ jsx11("div", { className: "r-parentmsgbar", children: t("totalItemsInfo", { page: currentPage, countPage, totalItem }) })
   ] }) });
 };
 
 // test-app/src/component/select-table/index.tsx
-import { forwardRef as forwardRef2, Fragment as Fragment13, useEffect as useEffect7, useMemo, useRef as useRef2, useState as useState6 } from "react";
+import { forwardRef as forwardRef2, Fragment as Fragment12, useEffect as useEffect7, useMemo, useRef as useRef2, useState as useState6 } from "react";
 import {
   DropdownItem as DropdownItem2,
   DropdownMenu as DropdownMenu2,
@@ -1538,7 +1521,7 @@ import { useTranslation as useTranslation9 } from "react-i18next";
 import classnames6 from "classnames";
 import moment from "moment";
 import { Plus as Plus2 } from "becoxy-icons";
-import { Fragment as Fragment14, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var defaultMaxHeight = 300;
 var SelectTable = forwardRef2((props, ref) => {
   const {
@@ -1618,17 +1601,12 @@ var SelectTable = forwardRef2((props, ref) => {
       }
     }
   }, [dropdownOpen]);
-  let timeOutBlur;
   useEffect7(() => {
     if (inputRef && !isDisabled) {
       inputRef.current.addEventListener("blur", function() {
-        timeOutBlur = setTimeout(() => {
-          if (!selectTableRef.current?.contains(document.activeElement)) {
-            setDropdownOpen(false);
-            setSearchTerm("");
-            setIsFocus(false);
-          }
-        }, 100);
+        setDropdownOpen(false);
+        setSearchTerm("");
+        setIsFocus(false);
       });
       inputRef.current.addEventListener("focus", function() {
         if (!isFocus) {
@@ -1753,10 +1731,10 @@ var SelectTable = forwardRef2((props, ref) => {
     }, 100);
   };
   const renderHeaderCol = (col, indexCol) => {
-    return /* @__PURE__ */ jsx13(
-      Fragment13,
+    return /* @__PURE__ */ jsx12(
+      Fragment12,
       {
-        children: col.visible !== false && /* @__PURE__ */ jsx13(
+        children: col.visible !== false && /* @__PURE__ */ jsx12(
           "th",
           {
             className: classnames6(
@@ -1769,7 +1747,7 @@ var SelectTable = forwardRef2((props, ref) => {
               top: `${0 * 35}px`,
               maxWidth: col.maxWidth
             },
-            children: /* @__PURE__ */ jsx13(
+            children: /* @__PURE__ */ jsx12(
               "div",
               {
                 role: "textbox",
@@ -1822,7 +1800,7 @@ var SelectTable = forwardRef2((props, ref) => {
         style: { paddingLeft: 10 * level },
         className: classnames6("r-select-row", { "last-row": indexRow === (optionsLoad ? optionsLoad : options).length - 1 }, { "fisrt-row": indexRow === 0 }),
         children: [
-          isMulti && /* @__PURE__ */ jsx13(
+          isMulti && /* @__PURE__ */ jsx12(
             "td",
             {
               className: classnames6(`r-select-rowcell`, { "r-select-move": indexFocus === indexRow, "r-select-active": !isMulti && value && value[fieldValue ?? "value"] === row[fieldValue ?? "value"] }),
@@ -1846,7 +1824,7 @@ var SelectTable = forwardRef2((props, ref) => {
                   e.stopPropagation();
                 }
               },
-              children: /* @__PURE__ */ jsx13(
+              children: /* @__PURE__ */ jsx12(
                 Input6,
                 {
                   checked: isSelected,
@@ -1868,8 +1846,8 @@ var SelectTable = forwardRef2((props, ref) => {
             } else if (col.type === "datetime") {
               valueDisplay = valueDisplay ? moment(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
             }
-            return /* @__PURE__ */ jsxs12(Fragment13, { children: [
-              col.visible !== false && /* @__PURE__ */ jsx13(
+            return /* @__PURE__ */ jsxs12(Fragment12, { children: [
+              col.visible !== false && /* @__PURE__ */ jsx12(
                 "td",
                 {
                   id: `select-${id}-${indexRow}-${indexCol}`,
@@ -1914,7 +1892,7 @@ var SelectTable = forwardRef2((props, ref) => {
                 },
                 `col-${indexRow}-${indexCol}`
               ),
-              checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx13(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay })
+              checkOverflow(indexRow, indexCol) && /* @__PURE__ */ jsx12(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay })
             ] }, indexCol);
           })
         ]
@@ -1925,15 +1903,15 @@ var SelectTable = forwardRef2((props, ref) => {
   const RenderTable = (props2) => {
     const {} = props2;
     let countDisplay = 0;
-    return /* @__PURE__ */ jsxs12(Fragment14, { children: [
+    return /* @__PURE__ */ jsxs12(Fragment13, { children: [
       /* @__PURE__ */ jsxs12("table", { style: { width: "100%" }, children: [
-        /* @__PURE__ */ jsx13("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ jsxs12("tr", { className: "r-select-row", role: "row", children: [
-          isMulti && /* @__PURE__ */ jsx13("th", { className: classnames6(`r-select-headercell`), style: { width: 40, top: `0px` }, children: /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx12("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ jsxs12("tr", { className: "r-select-row", role: "row", children: [
+          isMulti && /* @__PURE__ */ jsx12("th", { className: classnames6(`r-select-headercell`), style: { width: 40, top: `0px` }, children: /* @__PURE__ */ jsx12(
             "div",
             {
               style: { justifyContent: "center" },
               className: classnames6("r-select-headercell-div"),
-              children: /* @__PURE__ */ jsx13(
+              children: /* @__PURE__ */ jsx12(
                 Input6,
                 {
                   checked: isSelectedAll,
@@ -1959,37 +1937,37 @@ var SelectTable = forwardRef2((props, ref) => {
             return renderHeaderCol(col, index);
           })
         ] }) }),
-        (optionsLoad ? optionsLoad : options).length > 0 && !isLoading && /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsx13("tbody", { className: "r-select-gridcontent", children: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
+        (optionsLoad ? optionsLoad : options).length > 0 && !isLoading && /* @__PURE__ */ jsx12(Fragment13, { children: /* @__PURE__ */ jsx12("tbody", { className: "r-select-gridcontent", children: (optionsLoad ? optionsLoad : options)?.map((row, indexRow) => {
           if (!isMulti && loadOptions || checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
             const isSelected = isMulti && value?.some((x) => x === row[fieldValue ?? "value"]);
             countDisplay++;
-            return /* @__PURE__ */ jsx13(RenderElement, { isSelected, indexRow, row }, `select-table-${indexRow}`);
+            return /* @__PURE__ */ jsx12(RenderElement, { isSelected, indexRow, row }, `select-table-${indexRow}`);
           }
         }) }) })
       ] }),
       countDisplay === 0 && !isLoading && /* @__PURE__ */ jsxs12("div", { className: "r-no-data", children: [
-        /* @__PURE__ */ jsx13("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxs12("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [
-          /* @__PURE__ */ jsx13("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
+        /* @__PURE__ */ jsx12("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxs12("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [
+          /* @__PURE__ */ jsx12("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
           /* @__PURE__ */ jsxs12("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [
-            /* @__PURE__ */ jsx13("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }),
-            /* @__PURE__ */ jsx13("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })
+            /* @__PURE__ */ jsx12("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }),
+            /* @__PURE__ */ jsx12("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })
           ] })
         ] }) }),
         t("No data available.")
       ] }),
       isLoading && /* @__PURE__ */ jsxs12("div", { className: "r-no-data", children: [
-        /* @__PURE__ */ jsx13(Spinner, { className: "me-1", children: " " }),
+        /* @__PURE__ */ jsx12(Spinner, { className: "me-1", children: " " }),
         t("Loading...")
       ] })
     ] });
   };
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       className: classnames6("react-select-table", { "is-invalid": invalid }),
       ref,
       id,
-      children: /* @__PURE__ */ jsx13("div", { ref: selectTableRef, children: /* @__PURE__ */ jsxs12(
+      children: /* @__PURE__ */ jsx12("div", { ref: selectTableRef, children: /* @__PURE__ */ jsxs12(
         Dropdown2,
         {
           isOpen: dropdownOpen,
@@ -1999,20 +1977,18 @@ var SelectTable = forwardRef2((props, ref) => {
             /* @__PURE__ */ jsxs12(
               DropdownToggle2,
               {
-                onClick: () => {
+                onClick: (e) => {
                   if (!isDisabled) {
                     inputRef?.current.focus();
-                    if (dropdownOpen) {
-                      clearTimeout(timeOutBlur);
-                    }
                     handleOpenClose();
                   }
+                  e.preventDefault();
                 },
                 tag: "div",
                 className: classnames6("select-table-control", { "r-select-is-disabled": isDisabled }, { "r-select-is-open": dropdownOpen }, { "r-select-is-focus": isFocus }, { "r-select-is-invalid": invalid }),
                 children: [
                   /* @__PURE__ */ jsxs12("div", { className: "select-table-container", children: [
-                    isMulti ? /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsx13("div", { className: classnames6("select-value is-mutil", { "d-none": searchTerm }), children: value?.map((ele, index) => {
+                    isMulti ? /* @__PURE__ */ jsx12(Fragment13, { children: /* @__PURE__ */ jsx12("div", { className: classnames6("select-value is-mutil", { "d-none": searchTerm }), children: value?.map((ele, index) => {
                       const element = (optionsLoad ? optionsLoad : options).find((e) => e[fieldValue ?? "value"] === ele);
                       if (element) {
                         return /* @__PURE__ */ jsxs12("span", { children: [
@@ -2020,12 +1996,12 @@ var SelectTable = forwardRef2((props, ref) => {
                           element[fieldLabel ?? "label"]
                         ] }, index);
                       }
-                    }) }) }) : /* @__PURE__ */ jsx13(Fragment14, { children: /* @__PURE__ */ jsxs12("div", { className: classnames6("select-value", { "d-none": searchTerm }), children: [
+                    }) }) }) : /* @__PURE__ */ jsx12(Fragment13, { children: /* @__PURE__ */ jsxs12("div", { className: classnames6("select-value", { "d-none": searchTerm }), children: [
                       value ? formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? "label"] : "",
                       " "
                     ] }) }),
-                    !((isMulti ? value?.length > 0 : value) || isDisabled || searchTerm) && /* @__PURE__ */ jsx13("div", { className: classnames6("select-placeholder"), children: placeholder }),
-                    /* @__PURE__ */ jsx13("div", { className: "input-container", children: /* @__PURE__ */ jsx13(
+                    !((isMulti ? value?.length > 0 : value) || isDisabled || searchTerm) && /* @__PURE__ */ jsx12("div", { className: classnames6("select-placeholder"), children: placeholder }),
+                    /* @__PURE__ */ jsx12("div", { className: "input-container", children: /* @__PURE__ */ jsx12(
                       "input",
                       {
                         style: { textAlign: textAlign ?? "left" },
@@ -2046,11 +2022,11 @@ var SelectTable = forwardRef2((props, ref) => {
                     ) })
                   ] }),
                   isLoading && /* @__PURE__ */ jsxs12("div", { className: classnames6("select-table-indicator d-flex align-items-center"), children: [
-                    /* @__PURE__ */ jsx13(Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
-                    /* @__PURE__ */ jsx13(Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
-                    /* @__PURE__ */ jsx13(Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" })
+                    /* @__PURE__ */ jsx12(Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
+                    /* @__PURE__ */ jsx12(Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" }),
+                    /* @__PURE__ */ jsx12(Spinner, { style: { width: 4, height: 4, marginRight: 3 }, type: "grow" })
                   ] }),
-                  isClearable && value && !isDisabled && /* @__PURE__ */ jsx13(
+                  isClearable && value && !isDisabled && /* @__PURE__ */ jsx12(
                     "div",
                     {
                       className: classnames6("cursor-pointer"),
@@ -2058,14 +2034,14 @@ var SelectTable = forwardRef2((props, ref) => {
                         onChange(isMulti ? [] : void 0);
                         e.stopPropagation();
                       },
-                      children: /* @__PURE__ */ jsx13("svg", { height: "20", width: "20", color: "#c4c4c4", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ jsx13("path", { d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z" }) })
+                      children: /* @__PURE__ */ jsx12("svg", { height: "20", width: "20", color: "#c4c4c4", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ jsx12("path", { d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z" }) })
                     }
                   ),
-                  !isDisabled && /* @__PURE__ */ jsx13("div", { className: "select-table-indicator", children: /* @__PURE__ */ jsx13("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx13("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })
+                  !isDisabled && /* @__PURE__ */ jsx12("div", { className: "select-table-indicator", children: /* @__PURE__ */ jsx12("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx12("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx12(
               DropdownMenu2,
               {
                 container: component,
@@ -2075,20 +2051,19 @@ var SelectTable = forwardRef2((props, ref) => {
                   position: "fixed",
                   zIndex: 9999
                 },
-                children: /* @__PURE__ */ jsx13(DropdownItem2, { className: classnames6("p-0 menu-select-table"), style: { borderRadius: "6px" }, tag: "div", header: true, children: /* @__PURE__ */ jsx13(
+                children: /* @__PURE__ */ jsx12(DropdownItem2, { className: classnames6("p-0 menu-select-table"), style: { borderRadius: "6px" }, tag: "div", header: true, children: /* @__PURE__ */ jsx12(
                   "div",
                   {
                     onMouseDown: (e) => {
                       if (!isDisabled) {
                         inputRef?.current.focus();
-                        clearTimeout(timeOutBlur);
                         e.preventDefault();
                       }
                     },
                     children: /* @__PURE__ */ jsxs12("div", { className: "r-select-grid", children: [
-                      /* @__PURE__ */ jsx13("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ jsx13(RenderTable, {}) }),
-                      /* @__PURE__ */ jsx13("div", { className: classnames6("r-select-footer", { "d-none": !(showFooter === true || handleAdd) }), children: /* @__PURE__ */ jsxs12(Button3, { outline: true, color: "primary", onClick: handleAdd, className: classnames6("r-btn-add d-flex align-items-center", { "d-none": !handleAdd }), children: [
-                        /* @__PURE__ */ jsx13(Plus2, { className: "me-50", fontSize: 16 }),
+                      /* @__PURE__ */ jsx12("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ jsx12(RenderTable, {}) }),
+                      /* @__PURE__ */ jsx12("div", { className: classnames6("r-select-footer", { "d-none": !(showFooter === true || handleAdd) }), children: /* @__PURE__ */ jsxs12(Button3, { outline: true, color: "primary", onClick: handleAdd, className: classnames6("r-btn-add d-flex align-items-center", { "d-none": !handleAdd }), children: [
+                        /* @__PURE__ */ jsx12(Plus2, { className: "me-50", fontSize: 16 }),
                         t("AddNew"),
                         " (F9)"
                       ] }) })
@@ -2105,11 +2080,11 @@ var SelectTable = forwardRef2((props, ref) => {
 });
 
 // test-app/src/component/table/header.tsx
-import { Fragment as Fragment15 } from "react";
+import { Fragment as Fragment14 } from "react";
 import classnames7 from "classnames";
 import { Input as Input7 } from "reactstrap";
 import { useTranslation as useTranslation10 } from "react-i18next";
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 var HeaderTableCol = (props) => {
   const {
     selectEnable,
@@ -2124,7 +2099,7 @@ var HeaderTableCol = (props) => {
     isMulti
   } = props;
   const { t } = useTranslation10();
-  return /* @__PURE__ */ jsx14(Fragment15, { children: col.visible !== false && /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx13(Fragment14, { children: col.visible !== false && /* @__PURE__ */ jsx13(
     "th",
     {
       rowSpan: col.rowspan !== 1 ? col.rowspan : void 0,
@@ -2144,7 +2119,7 @@ var HeaderTableCol = (props) => {
           style: { justifyContent: col.textAlign ?? "left" },
           className: classnames7("r-headercell-div"),
           children: [
-            col.field === "checkbox" && /* @__PURE__ */ jsx14(
+            col.field === "checkbox" && /* @__PURE__ */ jsx13(
               Input7,
               {
                 checked: totalCount > 0 && selectedRows?.length >= totalCount,
@@ -2178,6 +2153,23 @@ import { Fragment as Fragment16 } from "react";
 import classnames8 from "classnames";
 import { Button as Button4, UncontrolledTooltip as UncontrolledTooltip2 } from "reactstrap";
 import { useTranslation as useTranslation11 } from "react-i18next";
+
+// test-app/src/component/icon/index.tsx
+import * as Icon from "becoxy-icons";
+import { Fragment as Fragment15 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var IconCustom = (props) => {
+  const { iconName, size } = props;
+  if (iconName === "") {
+    return null;
+  } else {
+    const TagIcon = iconName === "" ? "" : Icon[iconName];
+    return /* @__PURE__ */ jsx14(Fragment15, { children: iconName === "" ? "" : /* @__PURE__ */ jsx14(TagIcon, { fontSize: size }) });
+  }
+};
+var icon_default = IconCustom;
+
+// test-app/src/component/table/command.tsx
 import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var CommandElement = (props) => {
   const { commandItems, rowData, indexRow, handleCommandClick, indexFocus, setIndexFocus } = props;
@@ -2186,7 +2178,7 @@ var CommandElement = (props) => {
     return /* @__PURE__ */ jsxs14(
       Button4,
       {
-        id: `command-item-${indexRow}`,
+        id: `command-item-${indexRow}-${index}`,
         tabIndex: -1,
         style: { padding: "5px", minWidth: 45, height: "100%" },
         className: classnames8("command-item", {
@@ -2202,7 +2194,7 @@ var CommandElement = (props) => {
         },
         children: [
           item.icon && /* @__PURE__ */ jsx15(icon_default, { iconName: item.icon, size: 16 }),
-          /* @__PURE__ */ jsx15(UncontrolledTooltip2, { className: "r-tooltip", target: `command-item-${index}`, place: "top", children: t(item.tooltip ?? "") })
+          /* @__PURE__ */ jsx15(UncontrolledTooltip2, { className: "r-tooltip", target: `command-item-${indexRow}-${index}`, place: "top", children: t(item.tooltip ?? "") })
         ]
       },
       `command-${index}`
@@ -2472,6 +2464,12 @@ var TableEdit = forwardRef3((props, ref) => {
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
               }
+            },
+            onPaste: (e) => {
+              if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
+                pasteDataFromExcel(indexRow, indexCol, e);
+                e.preventDefault();
+              }
             }
           }
         );
@@ -2495,118 +2493,34 @@ var TableEdit = forwardRef3((props, ref) => {
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
               }
-            }
-          }
-        );
-      case "asyncSelect":
-        let optionAsyncSelects = [];
-        if (col.selectSettings?.optionsField) {
-          optionAsyncSelects = row[col.selectSettings?.optionsField] ? row[col.selectSettings?.optionsField] : [];
-        } else {
-          optionAsyncSelects = col.selectSettings?.options ? col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options : [];
-        }
-        let valueAsyncSelect = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? optionAsyncSelects?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : void 0;
-        if (!valueAsyncSelect && col.selectSettings?.defaultValue) {
-          valueAsyncSelect = col.selectSettings?.defaultValue(row);
-        }
-        return /* @__PURE__ */ jsxs15("div", { className: classnames9("d-flex select-group", { "is-invalid": col.validate && col.validate(row[col.field], row) }), children: [
-          /* @__PURE__ */ jsx16(
-            AsyncSelect,
-            {
-              menuPosition: "fixed",
-              value: valueAsyncSelect,
-              defaultOptions: optionAsyncSelects,
-              onChange: (val) => {
-                row[col.field] = val ? val[col.selectSettings?.fieldValue ?? "value"] : void 0;
-                if (col.callback) {
-                  col.callback(val, indexRow);
-                }
-                handleDataChange(row, col, indexRow);
-              },
-              menuPortalTarget: document.body,
-              isClearable: col.selectSettings?.isClearable ?? false,
-              classNamePrefix: col.selectSettings?.widthPopup ? `select-${col.selectSettings?.widthPopup}` : "select",
-              placeholder: t("Select"),
-              id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
-              loadOptions: col.selectSettings?.loadOptions,
-              className: classnames9("react-select"),
-              onKeyDown: (e) => {
-                if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
-                }
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx16(
-            "span",
-            {
-              onClick: () => {
-                if (col.selectSettings?.handAddNew) {
-                  col.selectSettings?.handAddNew("right");
-                }
-              },
-              className: classnames9("input-group-text", { "d-none": !col.selectSettings?.iconGroup }),
-              children: /* @__PURE__ */ jsx16(icon_default, { iconName: col.selectSettings?.iconGroup ?? "", size: 16 })
-            }
-          )
-        ] });
-      case "select":
-        let valueSelect;
-        let options = [];
-        if (col.selectSettings?.optionsField) {
-          options = row[col.selectSettings?.optionsField] ? row[col.selectSettings?.optionsField] : [];
-        } else {
-          options = col.selectSettings?.options ? col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options : [];
-        }
-        if (col.selectSettings?.isMulti) {
-          valueSelect = !isNullOrUndefined(row[col.field]) && row[col.field]?.length > 0 ? options?.filter((val) => row[col.field]?.includes(val[col.selectSettings?.fieldValue ?? "value"])) : [];
-        } else {
-          valueSelect = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? options?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : "";
-        }
-        return /* @__PURE__ */ jsx16(
-          Select3,
-          {
-            menuPosition: "fixed",
-            id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
-            value: valueSelect,
-            options,
-            onChange: (val) => {
-              row[col.field] = col.selectSettings?.isMulti ? val?.map((item) => item[col.selectSettings?.fieldValue ?? "value"]) ?? [] : val ? val[col.selectSettings?.fieldValue ?? "value"] : void 0;
-              if (col.callback) {
-                col.callback(val, indexRow);
-              }
-              handleDataChange(row, col, indexRow);
             },
-            menuPortalTarget: document.body,
-            isMulti: col.selectSettings?.isMulti ?? false,
-            isClearable: col.selectSettings?.isClearable ?? false,
-            classNamePrefix: col.selectSettings?.widthPopup ? `select-${col.selectSettings?.widthPopup}` : "select",
-            placeholder: t("Select"),
-            className: classnames9("react-select", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
-            onKeyDown: (e) => {
-              if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
+            onPaste: (e) => {
+              if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
+                pasteDataFromExcel(indexRow, indexCol, e);
+                e.preventDefault();
               }
             }
           }
         );
       case "selectTable":
-        let valueSelectTable;
-        let optionsSelectTable = [];
+        let valueSelect;
+        let optionsSelect = [];
         if (col.selectSettings?.optionsField) {
-          optionsSelectTable = row[col.selectSettings?.optionsField] ? row[col.selectSettings?.optionsField] : [];
+          optionsSelect = row[col.selectSettings?.optionsField] ? row[col.selectSettings?.optionsField] : [];
         } else {
-          optionsSelectTable = col.selectSettings?.options ? col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options : [];
+          optionsSelect = col.selectSettings?.options ? col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options : [];
         }
         if (col.selectSettings?.isMulti) {
-          valueSelectTable = !isNullOrUndefined(row[col.field]) && row[col.field]?.length > 0 ? optionsSelectTable?.filter((val) => row[col.field]?.includes(val[col.selectSettings?.fieldValue ?? "value"])) : [];
+          valueSelect = !isNullOrUndefined(row[col.field]) && row[col.field]?.length > 0 ? optionsSelect?.filter((val) => row[col.field]?.includes(val[col.selectSettings?.fieldValue ?? "value"])) : [];
         } else {
-          valueSelectTable = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? optionsSelectTable?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : "";
+          valueSelect = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? optionsSelect?.find((val) => val[col.selectSettings?.fieldValue ?? "value"] === row[col.field]) : "";
         }
         return /* @__PURE__ */ jsx16(
           SelectTable,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
-            value: valueSelectTable,
-            options: optionsSelectTable,
+            value: valueSelect,
+            options: optionsSelect,
             rowData: row,
             onChange: (val) => {
               row[col.field] = col.selectSettings?.isMulti ? val?.map((item) => item[col.selectSettings?.fieldValue ?? "value"]) ?? [] : val ? val[col.selectSettings?.fieldValue ?? "value"] : void 0;
@@ -3615,9 +3529,10 @@ var TableEdit = forwardRef3((props, ref) => {
                   selectedRows,
                   setSelectedRows,
                   totalCount
-                }
+                },
+                `header-${indexParent}-${index}`
               );
-            }) }, indexParent);
+            }) }, `header-${-indexParent}`);
           }) }),
           /* @__PURE__ */ jsx16("tbody", { className: "r-gridcontent", children: renderData() }),
           /* @__PURE__ */ jsx16("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ jsx16("tr", { className: "r-row", children: contentColumns.map((col, index) => {
@@ -3790,11 +3705,11 @@ var TabsMenuComponent = ({
 };
 
 // index.ts
-var Table_Edit_default = table_default;
+var Table_edit_default = table_default;
 export {
   SelectTable,
   TabsMenuComponent,
-  Table_Edit_default as default,
+  Table_edit_default as default,
   formartNumberic,
   generateUUID,
   isNullOrUndefined,