react-table-edit 0.9.6 → 0.9.8

package/dist/index.js

@@ -53,11 +53,11 @@ __export(Table_edit_exports, {
 module.exports = __toCommonJS(Table_edit_exports);
 
 // test-app/src/component/table/index.tsx
-var import_react15 = require("react");
-var import_reactstrap10 = require("reactstrap");
-var import_classnames13 = __toESM(require("classnames"));
-var import_react_i18next11 = require("react-i18next");
-var import_becoxy_icons6 = require("becoxy-icons");
+var import_react16 = require("react");
+var import_reactstrap11 = require("reactstrap");
+var import_classnames14 = __toESM(require("classnames"));
+var import_react_i18next12 = require("react-i18next");
+var import_becoxy_icons7 = require("becoxy-icons");
 
 // test-app/src/component/react-input/index.tsx
 var import_becoxy_icons = require("becoxy-icons");
@@ -330,7 +330,7 @@ var roundNumber = (num, fraction) => {
 };
 
 // test-app/src/component/table/index.tsx
-var import_moment2 = __toESM(require("moment"));
+var import_moment3 = __toESM(require("moment"));
 
 // test-app/src/component/edit-form/index.tsx
 var import_react8 = require("react");
@@ -572,7 +572,7 @@ var import_classnames5 = __toESM(require("classnames"));
 var import_react7 = require("react");
 
 // test-app/src/component/select-table/index.tsx
-var import_react6 = require("react");
+var import_react6 = __toESM(require("react"));
 var import_reactstrap4 = require("reactstrap");
 var import_react_i18next3 = require("react-i18next");
 var import_classnames4 = __toESM(require("classnames"));
@@ -689,19 +689,17 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
   const listKeyUse = ["Escape", "Space", "Enter", "Tab", "NumpadEnter", "ArrowDown", "ArrowUp", "F9"];
   const handleOnKeyDown = (e) => {
     let key = "";
-    if (onKeyDown && (!dropdownOpen || !listKeyUse.includes(e.code))) {
+    if (onKeyDown && (!dropdownOpen || !listKeyUse.includes(e.code) || (e.code === "Enter" || e.code === "Tab" || e.code === "NumpadEnter" || e.code === "Space") && !(optionsLoad ? optionsLoad : options)[indexFocus] || (e.code === "ArrowDown" || e.code === "ArrowUp") && (optionsLoad?.length ?? 0) === 0 && options.length === 0 || e.code === "Escape" && !(isClearable && value && !isDisabled))) {
       key = onKeyDown(e);
-      if (key === "ArrowRight" || key === "ArrowLeft") {
-        closeMenu();
-      }
     }
     let flag = false;
     if (!key) {
       if (e.code === "F9") {
         handleAdd();
         flag = true;
-      } else if (e.code === "Escape" || e.code === "Space") {
-        if (dropdownOpen) {
+      } else if (e.code === "Space") {
+        const newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
+        if (dropdownOpen && newItem) {
           if ((optionsLoad ? optionsLoad : options)[indexFocus]) {
             onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
           }
@@ -710,14 +708,21 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
           handleOpenClose();
           flag = true;
         }
+      } else if (e.code === "Escape") {
+        if (dropdownOpen && isClearable && value && !isDisabled) {
+          onChange(void 0);
+          handleOpenClose();
+          flag = true;
+        }
       } else if (e.code === "Enter" || e.code === "Tab" || e.code === "NumpadEnter") {
-        if (dropdownOpen) {
-          onChange((optionsLoad ? optionsLoad : options)[indexFocus]);
+        const newItem = (optionsLoad ? optionsLoad : options)[indexFocus];
+        if (dropdownOpen && newItem) {
+          onChange(newItem);
           handleOpenClose();
           flag = true;
         }
       } else if (e.code === "ArrowDown") {
-        if (dropdownOpen) {
+        if (dropdownOpen && ((optionsLoad?.length ?? 0) > 0 || options.length > 0)) {
           let newIndex = 0;
           if (indexFocus >= 0) {
             newIndex = indexFocus + 1;
@@ -737,7 +742,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
           flag = true;
         }
       } else if (e.code === "ArrowUp") {
-        if (dropdownOpen) {
+        if (dropdownOpen && ((optionsLoad?.length ?? 0) > 0 || options.length > 0)) {
           let newIndex = 0;
           if (indexFocus >= 0) {
             newIndex = indexFocus - 1;
@@ -849,7 +854,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
     const element = document.getElementById(`select-${id}-${indexRow}-${indexCol}`);
     return element && element.scrollWidth > element.clientWidth;
   };
-  const RenderElement = (props2) => {
+  const RenderElement = import_react6.default.memo((props2) => {
     const { indexRow, row, isSelected, level = 0 } = props2;
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "tr",
@@ -868,13 +873,11 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
                   const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
                   if (index > -1) {
                     value?.splice(index, 1);
-                    const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
-                    onChange(valueArr);
+                    onChange([...value]);
                   } else {
                     if (value) {
                       value?.push(row[fieldValue ?? "value"]);
-                      const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
-                      onChange(valueArr);
+                      onChange([...value]);
                     } else {
                       onChange([row[fieldValue ?? "value"]]);
                     }
@@ -921,13 +924,11 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
                       const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
                       if (index > -1) {
                         value?.splice(index, 1);
-                        const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
-                        onChange(valueArr);
+                        onChange([...value]);
                       } else {
                         if (value) {
                           value?.push(row[fieldValue ?? "value"]);
-                          const valueArr = (optionsLoad ? optionsLoad : options).filter((ele) => value?.some((x) => x === ele[fieldValue ?? "value"]));
-                          onChange(valueArr);
+                          onChange([...value]);
                         } else {
                           onChange([row[fieldValue ?? "value"]]);
                         }
@@ -957,7 +958,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
       },
       `row-${indexRow}`
     );
-  };
+  });
   const RenderTable = (props2) => {
     const {} = props2;
     let countDisplay = 0;
@@ -979,7 +980,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
                       if (isSelectedAll) {
                         onChange([]);
                       } else {
-                        onChange([...optionsLoad ? optionsLoad : options]);
+                        onChange([...(optionsLoad ? optionsLoad : options).map((x) => x[fieldValue ?? "value"])]);
                       }
                       e.stopPropagation();
                     }
@@ -2001,9 +2002,6 @@ var SidebarSetColumn = (props) => {
 };
 var sidebar_setting_column_default = SidebarSetColumn;
 
-// test-app/src/component/table/index.tsx
-var import_ej2_react_dropdowns = require("@syncfusion/ej2-react-dropdowns");
-
 // test-app/src/component/table/paging/index.tsx
 var import_becoxy_icons5 = require("becoxy-icons");
 var import_classnames10 = __toESM(require("classnames"));
@@ -2235,10 +2233,587 @@ var CommandElement = (props) => {
 };
 var command_default = CommandElement;
 
-// test-app/src/component/table/index.tsx
+// test-app/src/component/select-table-tree/index.tsx
+var import_react15 = __toESM(require("react"));
+var import_reactstrap10 = require("reactstrap");
+var import_react_i18next11 = require("react-i18next");
+var import_classnames13 = __toESM(require("classnames"));
+var import_moment2 = __toESM(require("moment"));
+var import_becoxy_icons6 = require("becoxy-icons");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
+var defaultMaxHeight2 = 250;
+var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
+  const {
+    id,
+    menuWidth,
+    width,
+    invalid,
+    onKeyDown,
+    placeholder,
+    textAlign,
+    options,
+    columns,
+    decimalSeparator,
+    thousandSeparator,
+    onChange,
+    value,
+    fieldValue,
+    fieldLabel,
+    fieldChildren,
+    maxHeight,
+    handleAdd,
+    isClearable,
+    component,
+    formatOptionLabel,
+    isMulti,
+    noHeader,
+    isDisabled,
+    showFooter,
+    selectChilds,
+    footerComponent,
+    onPaste
+  } = props;
+  const selectTableRef = (0, import_react15.useRef)();
+  const selectMenuTableRef = (0, import_react15.useRef)();
+  const inputRef = (0, import_react15.useRef)();
+  const [dropdownOpen, setDropdownOpen] = (0, import_react15.useState)(false);
+  const [isFocus, setIsFocus] = (0, import_react15.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react15.useState)("");
   const { t } = (0, import_react_i18next11.useTranslation)();
+  const areAllItemsSelected = (value2, options2, fieldValue2) => {
+    const checkAllSelected = (nodes) => {
+      return nodes.every((node) => {
+        const isSelected = value2.includes(node[fieldValue2]);
+        const childrenSelected = node.children ? checkAllSelected(node.children) : true;
+        return isSelected && childrenSelected;
+      });
+    };
+    return checkAllSelected(options2);
+  };
+  const isSelectedAll = (0, import_react15.useMemo)(() => {
+    return isMulti === true && options.length > 0 && areAllItemsSelected(value, options, fieldValue ?? "value");
+  }, [options, value]);
+  const defaultColumns = noHeader ? [
+    {
+      headerText: "Name",
+      field: fieldLabel ?? "label",
+      width: menuWidth
+    }
+  ] : [
+    {
+      field: "key",
+      headerText: "Code",
+      width: 100,
+      maxWidth: 120,
+      minWidth: 80
+    },
+    {
+      headerText: "Name",
+      field: "label",
+      width: 150,
+      maxWidth: 200,
+      minWidth: 250
+    }
+  ];
+  const closeMenu = () => {
+    setDropdownOpen(false);
+  };
+  (0, import_react15.useEffect)(() => {
+    if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
+      const index = options?.findIndex((e) => e[fieldValue ?? "value"] === value[fieldValue ?? "value"]);
+      if (index >= 0) {
+        selectMenuTableRef.current.scrollTo({ top: (index - 1) * 30 });
+      }
+    }
+  }, [dropdownOpen]);
+  (0, import_react15.useEffect)(() => {
+    if (inputRef && !isDisabled) {
+      inputRef.current.addEventListener("blur", function() {
+        setDropdownOpen(false);
+        setSearchTerm("");
+        setIsFocus(false);
+      });
+      inputRef.current.addEventListener("focus", function() {
+        if (!isFocus) {
+          setIsFocus(true);
+        }
+      });
+    }
+  }, [inputRef]);
+  (0, import_react15.useEffect)(() => {
+    if (searchTerm && !dropdownOpen) {
+      setDropdownOpen(true);
+    }
+  }, [searchTerm]);
+  const handleOpenClose = () => {
+    setSearchTerm("");
+    if (dropdownOpen) {
+      closeMenu();
+    } else {
+      if (!isDisabled) {
+        setDropdownOpen(true);
+      }
+    }
+  };
+  const listKeyUse = ["Escape", "Space", "F9"];
+  const handleOnKeyDown = (e) => {
+    let key = "";
+    if (onKeyDown && (!dropdownOpen || !listKeyUse.includes(e.code) || e.code === "Escape" && !(isClearable && value && !isDisabled))) {
+      key = onKeyDown(e);
+    }
+    let flag = false;
+    if (!key) {
+      if (e.code === "F9") {
+        handleAdd();
+        flag = true;
+      } else if (e.code === "Space") {
+        if (!searchTerm) {
+          handleOpenClose();
+          flag = true;
+        }
+      } else if (e.code === "Escape") {
+        if (dropdownOpen && isClearable && value && !isDisabled) {
+          onChange(void 0);
+          handleOpenClose();
+          flag = true;
+        }
+      }
+    }
+    if (flag) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  };
+  const renderHeaderCol = (col, indexCol) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react15.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "th",
+      {
+        className: (0, import_classnames13.default)(`r-select-headercell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }),
+        style: {
+          width: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.width,
+          minWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
+          maxWidth: col.fixedType ? Number(col.maxWidth ? col.maxWidth : col.width ? col.width : col.minWidth ?? "auto") : col.minWidth,
+          top: `${0 * 35}px`
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "div",
+          {
+            role: "textbox",
+            title: t(col.headerText ?? ""),
+            style: {
+              height: `${1 * 35}px`,
+              justifyContent: col.textAlign ?? "left"
+            },
+            className: "r-select-headercell-div",
+            children: t(col.headerText ?? "")
+          }
+        )
+      }
+    ) }, `header-select-${indexCol}`);
+  };
+  const checkSearch = (keyword, data, columnsSearch) => {
+    if (!keyword || columnsSearch.length === 0) {
+      return true;
+    }
+    for (let index = 0; index < columnsSearch.length; index++) {
+      const key = columnsSearch[index].field.trim();
+      if (data[key] && data[key].toString().trim().toLowerCase().includes(keyword.trim().toLowerCase())) {
+        return true;
+      }
+    }
+    if (data[fieldChildren ?? "children"]) {
+      return data[fieldChildren ?? "children"].some((child) => checkSearch(keyword, child, columnsSearch));
+    }
+    return false;
+  };
+  const checkOverflow = (indexRow, indexCol) => {
+    const element = document.getElementById(`select-${id}-${indexRow}-${indexCol}`);
+    return element && element.scrollWidth > element.clientWidth;
+  };
+  const getSelectAll = (tree, checkValue = false) => {
+    const selects = [];
+    const traverse = (items) => {
+      items.forEach((item) => {
+        if (item[fieldValue ?? "value"] && !(checkValue && value?.includes(item[fieldValue ?? "value"]))) {
+          selects.push(item[fieldValue ?? "value"]);
+        }
+        if (item[fieldChildren ?? "children"] && item[fieldChildren ?? "children"].length > 0) {
+          traverse(item[fieldChildren ?? "children"]);
+        }
+      });
+    };
+    traverse(tree);
+    return selects;
+  };
+  const RenderElement = import_react15.default.memo((props2) => {
+    const { indexRow, row, isSelected, level = 0 } = props2;
+    const [expanded, setExpanded] = (0, import_react15.useState)(row.expanded);
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        "tr",
+        {
+          id: `row-select-table-${indexRow}`,
+          className: (0, import_classnames13.default)("r-select-row", { "fisrt-row": indexRow === 0 && level === 0 }),
+          children: [
+            isMulti && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              "td",
+              {
+                className: (0, import_classnames13.default)(`r-select-rowcell`, { "r-select-active": !isMulti && value && isSelected }),
+                style: {
+                  textAlign: "center",
+                  paddingLeft: level * 15 + (row[fieldChildren ?? "children"].length > 0 ? 0 : 10)
+                },
+                onClick: (e) => {
+                  if (isMulti) {
+                    const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
+                    if (index > -1) {
+                      if (!selectChilds) {
+                        value?.splice(index, 1);
+                      } else {
+                        value?.splice(index, 1);
+                        getSelectAll(row[fieldChildren ?? "children"]).forEach((x) => {
+                          const index2 = value?.findIndex((y) => y === x);
+                          if (index2 > -1) {
+                            value?.splice(index2, 1);
+                          }
+                        });
+                      }
+                      onChange([...value]);
+                    } else {
+                      if (value) {
+                        if (!selectChilds) {
+                          onChange([...value, row[fieldValue ?? "value"]]);
+                        } else {
+                          onChange([...value, row[fieldValue ?? "value"], ...getSelectAll(row[fieldChildren ?? "children"], true)]);
+                        }
+                      } else {
+                        onChange([row[fieldValue ?? "value"]]);
+                      }
+                    }
+                    e.stopPropagation();
+                  }
+                },
+                children: [
+                  row[fieldChildren ?? "children"].length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    import_becoxy_icons6.ChevronRight,
+                    {
+                      onClick: (e) => {
+                        if (expanded) {
+                          row.expanded = false;
+                          setExpanded(false);
+                        } else {
+                          row.expanded = true;
+                          setExpanded(true);
+                        }
+                        e.stopPropagation();
+                      },
+                      fontSize: 18,
+                      className: (0, import_classnames13.default)("me-50 pb-0 r-icon-expand", { "is-open": expanded })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    import_reactstrap10.Input,
+                    {
+                      checked: isSelected,
+                      type: "checkbox",
+                      className: "cursor-pointer",
+                      onChange: () => {
+                      },
+                      style: { textAlign: "center" }
+                    }
+                  )
+                ]
+              }
+            ),
+            (columns ? columns : defaultColumns).map((col, indexCol) => {
+              let valueDisplay = row[col.field];
+              if (col.type === "numeric" || col.typeCondition && col.typeCondition(row) === "numeric") {
+                valueDisplay = formartNumberic(row[col.field], decimalSeparator ?? ".", thousandSeparator ?? ",", col.fraction ?? 0, true) ?? 0;
+              } else if (col.type === "date") {
+                valueDisplay = valueDisplay ? (0, import_moment2.default)(valueDisplay).format("DD/MM/yyyy") : "";
+              } else if (col.type === "datetime") {
+                valueDisplay = valueDisplay ? (0, import_moment2.default)(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react15.Fragment, { children: [
+                col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                  "td",
+                  {
+                    id: `select-${id}-${indexRow}-${indexCol}`,
+                    className: (0, import_classnames13.default)(`r-select-rowcell`, { "r-select-active": !isMulti && value && isSelected }),
+                    style: {
+                      paddingLeft: 9 + (indexCol === 0 && !isMulti ? level * 10 + (row[fieldChildren ?? "children"].length > 0 ? 0 : 15) : 0),
+                      textAlign: col.textAlign ? col.textAlign : "left"
+                    },
+                    onClick: (e) => {
+                      if (isMulti) {
+                        const index = value?.findIndex((x) => x === row[fieldValue ?? "value"]);
+                        if (index > -1) {
+                          if (!selectChilds) {
+                            value?.splice(index, 1);
+                          } else {
+                            value?.splice(index, 1);
+                            getSelectAll(row[fieldChildren ?? "children"]).forEach((x) => {
+                              const index2 = value?.findIndex((y) => y === x);
+                              if (index2 > -1) {
+                                value?.splice(index2, 1);
+                              }
+                            });
+                          }
+                          onChange([...value]);
+                        } else {
+                          if (value) {
+                            if (!selectChilds) {
+                              onChange([...value, row[fieldValue ?? "value"]]);
+                            } else {
+                              onChange([...value, row[fieldValue ?? "value"], ...getSelectAll(row[fieldChildren ?? "children"], true)]);
+                            }
+                          } else {
+                            onChange([row[fieldValue ?? "value"]]);
+                          }
+                        }
+                        e.stopPropagation();
+                      } else {
+                        onChange(row);
+                        setSearchTerm("");
+                        closeMenu();
+                      }
+                      e.preventDefault();
+                      e.stopPropagation();
+                    },
+                    children: [
+                      !isMulti && indexCol === 0 && row[fieldChildren ?? "children"].length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                        import_becoxy_icons6.ChevronRight,
+                        {
+                          onClick: (e) => {
+                            if (expanded) {
+                              row.expanded = false;
+                              setExpanded(false);
+                            } else {
+                              row.expanded = true;
+                              setExpanded(true);
+                            }
+                            e.stopPropagation();
+                          },
+                          fontSize: 18,
+                          className: (0, import_classnames13.default)("me-50 r-icon-expand", { "is-open": expanded })
+                        }
+                      ),
+                      col.template ? col.template(row, indexRow) : valueDisplay
+                    ]
+                  },
+                  `col-${indexRow}-${indexCol}`
+                ),
+                checkOverflow(indexRow, indexCol) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay })
+              ] }, indexCol);
+            })
+          ]
+        },
+        `row-${indexRow}`
+      ),
+      row[fieldChildren ?? "children"] && row.expanded && row[fieldChildren ?? "children"].map((child, indexChild) => {
+        if (checkSearch(searchTerm, child, columns ? columns : defaultColumns)) {
+          const isSelectedChild = isMulti ? value?.some((x) => x === child[fieldValue ?? "value"]) : value[fieldValue ?? "value"] === child[fieldValue ?? "value"];
+          return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RenderElement, { isSelected: isSelectedChild, indexRow: indexChild, row: child, level: level + 1 }, `select-table-${indexRow}-${indexChild}`);
+        }
+      })
+    ] });
+  });
+  const RenderTable = (props2) => {
+    const {} = props2;
+    let countDisplay = 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("table", { style: { width: "100%" }, children: [
+        !noHeader && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("tr", { className: "r-select-row", role: "row", children: [
+          isMulti && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "th",
+            {
+              className: (0, import_classnames13.default)(`r-select-headercell checkbox-column`),
+              style: { width: 40, minWidth: 40, maxWidth: 100, top: `0px` },
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                "div",
+                {
+                  style: { justifyContent: "center" },
+                  className: (0, import_classnames13.default)("r-select-headercell-div"),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    import_reactstrap10.Input,
+                    {
+                      checked: isSelectedAll,
+                      type: "checkbox",
+                      onClick: (e) => {
+                        if (isMulti) {
+                          if (isSelectedAll) {
+                            onChange([]);
+                          } else {
+                            onChange(getSelectAll(options));
+                          }
+                          e.stopPropagation();
+                        }
+                      },
+                      readOnly: true,
+                      className: (0, import_classnames13.default)("cursor-pointer", { "d-none": !isMulti }),
+                      style: { textAlign: "center", marginTop: 6 }
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          !noHeader && (columns ? columns : defaultColumns).map((col, index) => {
+            return renderHeaderCol(col, index);
+          })
+        ] }) }),
+        options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tbody", { className: "r-select-gridcontent", children: options?.map((row, indexRow) => {
+          if (checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
+            const isSelected = isMulti ? value?.some((x) => x === row[fieldValue ?? "value"]) : value[fieldValue ?? "value"] === row[fieldValue ?? "value"];
+            countDisplay++;
+            return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RenderElement, { isSelected, indexRow, row }, `select-table-${indexRow}`);
+          }
+        }) }) })
+      ] }),
+      countDisplay === 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "r-no-data", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsx)("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.")
+      ] })
+    ] });
+  };
+  const getSelectedRecords = (tree, value2) => {
+    const records = [];
+    const traverse = (nodes) => {
+      nodes.forEach((node) => {
+        if (value2.includes(node[fieldValue ?? "value"])) {
+          records.push(node);
+        }
+        if (node.children && node.children.length > 0) {
+          traverse(node.children);
+        }
+      });
+    };
+    traverse(tree);
+    return records;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      className: (0, import_classnames13.default)("react-select-table", { "is-invalid": invalid }),
+      ref,
+      id,
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: selectTableRef, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        import_reactstrap10.Dropdown,
+        {
+          isOpen: dropdownOpen,
+          toggle: () => {
+          },
+          onMouseDown: (e) => e.preventDefault(),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              import_reactstrap10.DropdownToggle,
+              {
+                onClick: (e) => {
+                  if (!isDisabled) {
+                    inputRef?.current.focus();
+                    handleOpenClose();
+                  }
+                  e.preventDefault();
+                },
+                tag: "div",
+                style: { width: width ? width : "100%" },
+                className: (0, import_classnames13.default)("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__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "select-table-container", children: [
+                    isMulti ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_classnames13.default)("select-value is-mutil", { "d-none": searchTerm }), children: getSelectedRecords(options, value).map((ele, index) => {
+                      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
+                        index === 0 ? "" : ", ",
+                        ele[fieldLabel ?? "label"]
+                      ] }, index);
+                    }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: (0, import_classnames13.default)("select-value", { "d-none": searchTerm }), children: [
+                      value ? formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? "label"] : "",
+                      " "
+                    ] }) }),
+                    !((isMulti ? value?.length > 0 : value) || isDisabled || searchTerm) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_classnames13.default)("select-placeholder"), children: placeholder }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "input-container", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                      "input",
+                      {
+                        style: { textAlign: textAlign ?? "left" },
+                        ref: inputRef,
+                        className: (0, import_classnames13.default)("select-input"),
+                        readOnly: isDisabled,
+                        value: searchTerm,
+                        onPaste: (e) => onPaste && !dropdownOpen && onPaste(e),
+                        onChange: (val) => {
+                          setSearchTerm(val.target.value);
+                        },
+                        onKeyDown: (e) => handleOnKeyDown(e)
+                      }
+                    ) })
+                  ] }),
+                  isClearable && value && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    "div",
+                    {
+                      className: (0, import_classnames13.default)("cursor-pointer"),
+                      onClick: (e) => {
+                        onChange(isMulti ? [] : void 0);
+                        e.stopPropagation();
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { height: "20", width: "20", color: "#c4c4c4", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", className: "css-tj5bde-Svg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsx)("div", { className: "select-table-indicator", onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { height: "20", width: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsx)(
+              import_reactstrap10.DropdownMenu,
+              {
+                container: component,
+                className: "formula-dropdown icon-dropdown p-0",
+                style: {
+                  width: "min-content",
+                  position: "fixed",
+                  borderRadius: 3,
+                  zIndex: 9999
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.DropdownItem, { className: (0, import_classnames13.default)("p-0 menu-select-table"), style: { borderRadius: "6px" }, tag: "div", header: true, children: dropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  "div",
+                  {
+                    onMouseDown: (e) => {
+                      if (!isDisabled) {
+                        inputRef?.current.focus();
+                        e.preventDefault();
+                      }
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "r-select-grid", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-select-gridtable", ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight2 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RenderTable, {}) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: (0, import_classnames13.default)("r-select-footer", { "d-none": !(showFooter === true || handleAdd || isMulti) }), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_reactstrap10.Button, { outline: true, color: "primary", onClick: handleAdd, className: (0, import_classnames13.default)("r-btn d-flex align-items-center", { "d-none": !handleAdd }), children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_becoxy_icons6.Plus, { className: "me-50", fontSize: 16 }),
+                          t("AddNew"),
+                          " (F9)"
+                        ] }),
+                        isMulti && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ms-50 text-primary h-100 d-flex align-items-center", onClick: handleAdd, children: t("countSelected", { item: value?.length ?? 0 }) }),
+                        footerComponent ? footerComponent() : null
+                      ] })
+                    ] })
+                  }
+                ) })
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+});
+
+// test-app/src/component/table/index.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
+  const { t } = (0, import_react_i18next12.useTranslation)();
   const {
     idTable,
     dataSource,
@@ -2266,36 +2841,35 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
     handleSelect,
     isMulti
   } = props;
-  (0, import_react15.useImperativeHandle)(ref, () => {
+  (0, import_react16.useImperativeHandle)(ref, () => {
     return {
       refeshFocusRow: handleRefeshRow
     };
   });
-  const [refreshRow, setRefreshRow] = (0, import_react15.useState)(false);
-  const [indexFocus, setIndexFocus] = (0, import_react15.useState)();
-  const [selectedRows, setSelectedRows] = (0, import_react15.useState)([]);
-  const [headerColumns, setHeaderColumns] = (0, import_react15.useState)([[]]);
-  const [contentColumns, setContentColumns] = (0, import_react15.useState)([]);
-  const [levelCol, setLevelCol] = (0, import_react15.useState)(0);
-  const [columnFistEdit, setColumnFistEdit] = (0, import_react15.useState)(0);
-  const [columnLastEdit, setColumnlastEdit] = (0, import_react15.useState)(0);
-  const [objWidthFix, setObjWidthFix] = (0, import_react15.useState)({});
-  const [openPopupTree, setOpenPopupTree] = (0, import_react15.useState)(false);
-  const [openPopupSetupColumn, setOpenPopupSetupColumn] = (0, import_react15.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react15.useState)("");
-  const tableElement = (0, import_react15.useRef)(null);
-  const gridRef = (0, import_react15.useRef)();
+  const [refreshRow, setRefreshRow] = (0, import_react16.useState)(false);
+  const [indexFocus, setIndexFocus] = (0, import_react16.useState)();
+  const [selectedRows, setSelectedRows] = (0, import_react16.useState)([]);
+  const [headerColumns, setHeaderColumns] = (0, import_react16.useState)([[]]);
+  const [contentColumns, setContentColumns] = (0, import_react16.useState)([]);
+  const [levelCol, setLevelCol] = (0, import_react16.useState)(0);
+  const [columnFistEdit, setColumnFistEdit] = (0, import_react16.useState)(0);
+  const [columnLastEdit, setColumnlastEdit] = (0, import_react16.useState)(0);
+  const [objWidthFix, setObjWidthFix] = (0, import_react16.useState)({});
+  const [openPopupSetupColumn, setOpenPopupSetupColumn] = (0, import_react16.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react16.useState)("");
+  const tableElement = (0, import_react16.useRef)(null);
+  const gridRef = (0, import_react16.useRef)();
   let totalCount = dataSource.length;
   const pagingClient = pagingSetting?.allowPaging && (pagingSetting?.pagingClient || !(editDisable || addDisable));
   const searchClient = searchSetting?.searchEnable && (searchSetting?.searchClient || !(editDisable || addDisable));
   const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
   const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (pagingClient && pagingSetting.setCurrentPage && Math.ceil(totalCount / (pagingSetting?.pageSize ?? 1)) < (pagingSetting.currentPage ?? 1)) {
       pagingSetting.setCurrentPage(1);
     }
   }, [dataSource]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     let indexFirst = -1;
     let indexlast = -1;
     let letfWidthFix = 0;
@@ -2329,7 +2903,7 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
     setColumnFistEdit(indexFirst + 1);
     setColumnlastEdit(indexlast + 1);
   }, [contentColumns]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const arrHeaderColumns = [];
     const arrContentColumns = [];
     let headerLevelRow = 0;
@@ -2346,7 +2920,7 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
     setHeaderColumns(arrHeaderColumns);
     setContentColumns(arrContentColumns);
   }, [columns]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const arrHeaderColumns = [];
     const arrContentColumns = [];
     let headerLevelRow = 0;
@@ -2463,7 +3037,7 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
     }
   };
   const searchTemplate = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "me-50 r-search", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "me-50 r-search", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       react_input_default,
       {
         style: { width: "230px" },
@@ -2484,12 +3058,12 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
   const renderEdit = (row, col, indexRow, indexCol) => {
     switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
       case "date":
-        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_reactstrap10.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_reactstrap11.Input,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
-            value: row[col.field] ? (0, import_moment2.default)(row[col.field]).format("yyyy-MM-DD") : row[col.field],
+            value: row[col.field] ? (0, import_moment3.default)(row[col.field]).format("yyyy-MM-DD") : row[col.field],
             onChange: (val) => {
               row[col.field] = val.target.value;
               if (col.callback) {
@@ -2497,7 +3071,7 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
               }
               handleDataChange(row, col, indexRow);
             },
-            className: (0, import_classnames13.default)("border-0 rounded-0 r-date-input", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: (0, import_classnames14.default)("border-0 rounded-0 r-date-input", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             type: "date",
             max: "9999-12-31",
             onKeyDown: (e) => {
@@ -2513,12 +3087,12 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
           }
         );
       case "datetime":
-        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_reactstrap10.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_reactstrap11.Input,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
-            value: row[col.field] ? (0, import_moment2.default)(row[col.field]).format("yyyy-MM-DD HH:MM") : row[col.field],
+            value: row[col.field] ? (0, import_moment3.default)(row[col.field]).format("yyyy-MM-DD HH:MM") : row[col.field],
             onChange: (val) => {
               row[col.field] = val.target.value;
               if (col.callback) {
@@ -2526,7 +3100,7 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
               }
               handleDataChange(row, col, indexRow);
             },
-            className: (0, import_classnames13.default)("border-0 rounded-0 r-date-input", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: (0, import_classnames14.default)("border-0 rounded-0 r-date-input", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             type: "datetime-local",
             max: "9999-12-31T23:59",
             onKeyDown: (e) => {
@@ -2557,7 +3131,7 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
             valueSelect = col.selectSettings?.defaultValue(row);
           }
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           SelectTable,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -2565,7 +3139,11 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
             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;
+              if (isMulti) {
+                row[col.field] = !isNullOrUndefined(val) ? val : [];
+              } else {
+                row[col.field] = !isNullOrUndefined(val) ? val[col.selectSettings?.fieldValue ?? "value"] : void 0;
+              }
               if (col.callback) {
                 col.callback(val, indexRow);
               }
@@ -2583,6 +3161,10 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
             handleAdd: col.selectSettings?.handAddNew,
             isMulti: col.selectSettings?.isMulti,
             noHeader: col.selectSettings?.noHeader,
+            showFooter: col.selectSettings?.showFooter,
+            formatOptionLabel: col.selectSettings?.formatOptionLabel,
+            footerComponent: col.selectSettings?.footerComponent,
+            width: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : void 0,
             invalid: col.validate && col.validate(row[col.field], row),
             maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : void 0,
             menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : void 0,
@@ -2600,68 +3182,95 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
           }
         );
       case "selectTree":
-        let valueSelectTree = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? [row[col.field]] : [];
         const findItemInTree = (items, value) => {
           for (let index = 0; index < items.length; index++) {
             const item = items[index];
             if (item[col.selectSettings?.fieldValue ? col.selectSettings?.fieldValue : "value"] === value) {
               return { ...item };
-            } else if (item["children"]?.length > 0) {
-              const itemFilter = findItemInTree(item["children"], value);
+            } else if (item[col.selectSettings?.fieldChild ?? "children"]?.length > 0) {
+              const itemFilter = findItemInTree(item[col.selectSettings?.fieldChild ?? "children"], value);
               if (itemFilter) {
                 return itemFilter;
               }
             }
           }
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        let valueSelectTree;
+        let optionsSelectTree = [];
+        if (col.selectSettings?.optionsField) {
+          optionsSelectTree = row[col.selectSettings?.optionsField] ? row[col.selectSettings?.optionsField] : [];
+        } else {
+          optionsSelectTree = col.selectSettings?.options ? col.selectSettings?.validateOption ? col.selectSettings?.options.filter((item) => col.selectSettings?.validateOption(item, row)) : col.selectSettings?.options : [];
+        }
+        if (col.selectSettings?.isMulti) {
+          valueSelectTree = row[col.field];
+        } else {
+          valueSelectTree = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? findItemInTree(optionsSelectTree, row[col.field]) : "";
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "div",
           {
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
               }
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              import_ej2_react_dropdowns.DropDownTreeComponent,
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              SelectTableTree,
               {
                 id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
-                fields: {
-                  dataSource: col.selectSettings?.options,
-                  value: col.selectSettings?.fieldValue ? col.selectSettings?.fieldValue : "value",
-                  text: "label",
-                  parentValue: "parentId",
-                  child: "children"
-                },
-                className: (0, import_classnames13.default)("select-tree", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
-                allowFiltering: false,
                 value: valueSelectTree,
-                popupHeight: 250,
-                popupWidth: "auto",
-                changeOnBlur: false,
-                showClearButton: col.selectSettings?.isClearable,
-                change: (val) => {
-                  const item = val?.value?.length > 0 ? val?.value[0] : void 0;
-                  if (row[col.field] !== item) {
-                    row[col.field] = item;
-                    if (col.callback) {
-                      col.callback(item ? findItemInTree(col.selectSettings?.options, item) : void 0, indexRow);
-                    }
-                    handleDataChange(row, col, indexRow);
+                options: optionsSelectTree,
+                rowData: row,
+                onChange: (val) => {
+                  if (isMulti) {
+                    row[col.field] = !isNullOrUndefined(val) ? val : [];
+                  } else {
+                    row[col.field] = !isNullOrUndefined(val) ? val[col.selectSettings?.fieldValue ?? "value"] : void 0;
                   }
+                  if (col.callback) {
+                    col.callback(val, indexRow);
+                  }
+                  handleDataChange(row, col, indexRow);
                 },
-                open: () => {
-                  setOpenPopupTree(true);
+                fieldValue: col.selectSettings?.fieldValue,
+                fieldLabel: col.selectSettings?.fieldLabel,
+                component: tableElement,
+                columns: col.selectSettings?.columns,
+                isClearable: col.selectSettings?.isClearable ?? false,
+                decimalSeparator,
+                thousandSeparator,
+                placeholder: t("Select"),
+                loadOptions: col.selectSettings?.loadOptions,
+                handleAdd: col.selectSettings?.handAddNew,
+                fieldChildren: col.selectSettings?.fieldChild ?? "children",
+                selectChilds: col.selectSettings?.selectChilds,
+                showFooter: col.selectSettings?.showFooter,
+                formatOptionLabel: col.selectSettings?.formatOptionLabel,
+                footerComponent: col.selectSettings?.footerComponent,
+                width: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : void 0,
+                isMulti: col.selectSettings?.isMulti,
+                noHeader: col.selectSettings?.noHeader,
+                invalid: col.validate && col.validate(row[col.field], row),
+                maxHeight: col.selectSettings?.heightPopup ? Number(col.selectSettings?.heightPopup) : void 0,
+                menuWidth: col.selectSettings?.widthPopup ? Number(col.selectSettings?.widthPopup) : void 0,
+                textAlign: col.textAlign ?? "left",
+                onKeyDown: (e) => {
+                  if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
+                  }
                 },
-                close: () => {
-                  setOpenPopupTree(false);
+                onPaste: (e) => {
+                  if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
+                    pasteDataFromExcel(indexRow, indexCol, e);
+                    e.preventDefault();
+                  }
                 }
               }
             )
           }
         );
       case "checkbox":
-        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_reactstrap10.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_reactstrap11.Input,
           {
             checked: row[col.field],
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -2683,13 +3292,13 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
         );
       case "numeric":
         let valueCurrency = row[col.field];
-        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_reactstrap10.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_reactstrap11.Input,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
             defaultValue: formartNumberic(valueCurrency, decimalSeparator, thousandSeparator, col.numericSettings?.fraction),
-            className: (0, import_classnames13.default)("border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: (0, import_classnames14.default)("border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             onChange: (val) => {
               let newVal = "";
               const flag = val.target?.value.startsWith("-");
@@ -2773,8 +3382,8 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
           }
         );
       case "color":
-        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_reactstrap10.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_reactstrap11.Input,
           {
             type: "color",
             value: row[col.field],
@@ -2796,7 +3405,7 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
           `col-${indexRow}-${indexCol}`
         ) });
       case "form":
-        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           edit_form_default,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -2824,13 +3433,13 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
           }
         );
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_reactstrap10.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_reactstrap11.Input,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
             defaultValue: isNullOrUndefined(row[col.field]) ? "" : row[col.field],
-            className: (0, import_classnames13.default)("border-0 rounded-0 input-element", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            className: (0, import_classnames14.default)("border-0 rounded-0 input-element", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
             onBlur: (val) => {
               if (row[col.field] != val.target?.value) {
                 row[col.field] = val.target?.value;
@@ -2885,9 +3494,9 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
           }
         }
         if ((tableElement.current?.scrollHeight ?? 0) > 0) {
-          if ((tableElement.current?.scrollTop ?? 0) > (row - 1) * 34) {
-            tableElement.current?.scrollTo({ behavior: "smooth", top: (row - 1) * 34 });
-          } else if ((tableElement.current?.clientHeight ?? 0) - (haveSum ? 30 : 0) - headerColumns.length * 42 < row * 34 - (tableElement.current?.scrollTop ?? 0)) {
+          if ((tableElement.current?.scrollTop ?? 0) > (row - 1) % (pagingSetting?.pageSize ?? 1) * 34) {
+            tableElement.current?.scrollTo({ behavior: "smooth", top: (row - 1) % (pagingSetting?.pageSize ?? 1) * 34 });
+          } else if ((tableElement.current?.clientHeight ?? 0) - (haveSum ? 30 : 0) - headerColumns.length * 42 < row % (pagingSetting?.pageSize ?? 1) * 34 - (tableElement.current?.scrollTop ?? 0)) {
             tableElement.current?.scrollTo({ behavior: "smooth", top: (tableElement.current?.scrollTop ?? 0) + 34 });
           }
         }
@@ -3012,11 +3621,9 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
     }
   };
   useOnClickOutside(gridRef, () => {
-    if (!openPopupTree) {
-      setTimeout(() => {
-        setIndexFocus(-1);
-      }, 50);
-    }
+    setTimeout(() => {
+      setIndexFocus(-1);
+    }, 50);
   });
   const handleAdd = () => {
     const lengthData = dataSource.length;
@@ -3212,7 +3819,7 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
       }
     }
   };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     setIndexFocus(-1);
     if (setSelectedItem) {
       if (isMulti) {
@@ -3239,7 +3846,7 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
       }
     }
   }, [selectedRows]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!isMulti) {
       if (dataSource && selectedItem && selectedItem[fieldKey]) {
         if (selectedRows?.length === 0 || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
@@ -3256,10 +3863,10 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
   }, [selectedItem]);
   const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
     if (col.field === "command") {
-      return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "td",
         {
-          className: (0, import_classnames13.default)(
+          className: (0, import_classnames14.default)(
             `r-rowcell p-0 fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -3269,15 +3876,15 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
             textAlign: col.textAlign ? col.textAlign : "left"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-rowcell-div ", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-rowcell-div ", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
         },
         `col-${indexRow}-${indexCol}`
       );
     } else if (col.field === "#") {
-      return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "td",
         {
-          className: (0, import_classnames13.default)(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
+          className: (0, import_classnames14.default)(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
           tabIndex: Number(`${indexRow}${indexCol}`),
           style: {
             left: col.fixedType === "left" ? objWidthFix[indexCol] : void 0,
@@ -3321,15 +3928,15 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
               e.stopPropagation();
             }
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-rowcell-div pt-50", children: indexRow + 1 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-rowcell-div pt-50", children: indexRow + 1 })
         },
         `col-${indexRow}-${indexCol}`
       );
     } else if (col.field === "checkbox") {
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "td",
         {
-          className: (0, import_classnames13.default)(
+          className: (0, import_classnames14.default)(
             `r-rowcell p-0 fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -3339,7 +3946,7 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
             textAlign: col.textAlign ? col.textAlign : "center"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "div",
             {
               className: "r-rowcell-div cursor-pointer",
@@ -3363,8 +3970,8 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
                   e.stopPropagation();
                 }
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                import_reactstrap10.Input,
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                import_reactstrap11.Input,
                 {
                   checked: isSelected,
                   type: "checkbox",
@@ -3384,16 +3991,16 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
       if (col.editType === "numeric" || col.editTypeCondition && col.editTypeCondition(row) === "numeric") {
         value = formartNumberic(row[col.field], decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) ?? 0;
       } else if (col.editType === "date") {
-        value = value ? (0, import_moment2.default)(value).format("DD/MM/yyyy") : "";
+        value = value ? (0, import_moment3.default)(value).format("DD/MM/yyyy") : "";
       } else if (col.editType === "datetime") {
-        value = value ? (0, import_moment2.default)(value).format("DD/MM/yyyy HH:mm") : "";
+        value = value ? (0, import_moment3.default)(value).format("DD/MM/yyyy HH:mm") : "";
       }
       const typeDis = !editDisable && (indexFocus === indexRow || col.editType === "checkbox") && (!col.disabledCondition || !col.disabledCondition(row)) ? col.editEnable ? 1 : col.template ? 2 : 3 : col.template ? 2 : 3;
       const errorMessage = typeDis === 1 || col.field === "" || !col.validate ? "" : col.validate(row[col.field], row);
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react15.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "td",
         {
-          className: (0, import_classnames13.default)(
+          className: (0, import_classnames14.default)(
             `r-rowcell fix-${col.fixedType}`,
             { "cell-fixed": col.fixedType },
             { "r-active": isSelected && editDisable || indexFocus === indexRow }
@@ -3435,25 +4042,25 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
               e.stopPropagation();
             }
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "div",
             {
-              className: (0, import_classnames13.default)("r-rowcell-div"),
-              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              className: (0, import_classnames14.default)("r-rowcell-div"),
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                 "div",
                 {
                   id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
-                  className: (0, import_classnames13.default)("r-rowcell-content", { "r-is-invalid": errorMessage }),
+                  className: (0, import_classnames14.default)("r-rowcell-content", { "r-is-invalid": errorMessage }),
                   style: {
                     margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2,
                     color: col.editType === "numeric" && Number(row[col.field]) < 0 ? "red" : ""
                   },
                   children: [
-                    typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { id: `error-${indexRow}-${indexCol}`, className: (0, import_classnames13.default)("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_becoxy_icons6.AlertCircle, { fontSize: 15.5 }) }),
-                    !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                      import_reactstrap10.UncontrolledTooltip,
+                    typeDis === 1 && !refreshRow ? renderEdit(row, col, indexRow, indexCol) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { id: `error-${indexRow}-${indexCol}`, className: (0, import_classnames14.default)("cursor-pointer text-primary icon-table", { "d-none": !errorMessage }), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_becoxy_icons7.AlertCircle, { fontSize: 15.5 }) }),
+                    !(typeDis === 1 && !refreshRow) && checkOverflow(indexRow, indexCol) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : value }),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      import_reactstrap11.UncontrolledTooltip,
                       {
                         target: `error-${indexRow}-${indexCol}`,
                         className: "r-tooltip tooltip-error",
@@ -3475,10 +4082,10 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
     return element && element.scrollWidth > element.clientWidth;
   };
   const renderFooterCol = (col, indexCol) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react15.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "td",
       {
-        className: (0, import_classnames13.default)(
+        className: (0, import_classnames14.default)(
           `p-0 px-50 r-footer fix-${col.fixedType}`,
           { "cell-fixed": col.fixedType }
         ),
@@ -3487,56 +4094,56 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
           right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
           textAlign: col.textAlign ? col.textAlign : "left"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource.reduce(function(accumulator, currentValue) {
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-footer-div", children: col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource.reduce(function(accumulator, currentValue) {
           return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
         }, 0), decimalSeparator, thousandSeparator, col.numericSettings?.fraction, true) : "" })
       }
     ) }, `summarycell-${indexCol}`);
   };
   const renderToolbarTop = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "r-toolbar-items", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
-        return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-toolbar-items", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-left-${index}`) : "";
       }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
-        return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) : "";
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-center-${index}`) : "";
       }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
-        return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) : "";
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
+        return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) : "";
       }) })
     ] }) });
   };
   const renderToolbarBottom = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "r-toolbar-items", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "r-toolbar-left", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_classnames13.default)("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.Button, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
-        (indexFocus ?? -1) > -1 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_classnames13.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.Button, { color: "success", outline: true, onClick: () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-toolbar-items", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-toolbar-left", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.Button, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
+        (indexFocus ?? -1) > -1 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.Button, { color: "success", outline: true, onClick: () => {
             handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
           }, className: "d-flex", children: t("Duplicate") }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_classnames13.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.Button, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_classnames13.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.Button, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: " " }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_classnames13.default)("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.Button, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.Button, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.Button, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: " " }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.Button, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
         toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-          return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
+          return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
         })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-        return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
+        return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
       }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "r-toolbar-right", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-toolbar-right", children: [
         toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
-          return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
+          return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_classnames13.default)("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_becoxy_icons6.Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_classnames13.default)("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_reactstrap10.UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.DropdownToggle, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_becoxy_icons6.Info, { className: "cursor-pointer" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_reactstrap10.DropdownMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "d-flex flex-column p-50 py-25", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\xE2n b\u1EA3n" }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\xE9p h\xE0ng" }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + V \u0111\u1EC3  d\xE1n h\xE0ng" })
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item me-25", { "d-none": headerColumns.length > 1 }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_becoxy_icons7.Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_reactstrap11.UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.DropdownToggle, { href: "/", tag: "a", color: "info", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_becoxy_icons7.Info, { className: "cursor-pointer" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.DropdownMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "d-flex flex-column p-50 py-25", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\xE2n b\u1EA3n" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontSize: 13 }, children: "Ch\u1ECDn \xF4 v\xE0 Ctrl + V \u0111\u1EC3 d\xE1n th\xF4ng tin t\u1EEB excel" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\xE9p h\xE0ng" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\xE0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\xE0ng v\xE0 nh\u1EA5n Ctrl + V \u0111\u1EC3  d\xE1n h\xE0ng" })
           ] }) })
         ] }) })
       ] })
@@ -3565,10 +4172,10 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
         const flagDisplay = !pagingClient || totalCount > (pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1) && totalCount <= (pagingSetting.pageSize ?? 0) * (pagingSetting.currentPage ?? 0);
         if (flagDisplay) {
           countDisplay++;
-          return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "tr",
             {
-              className: (0, import_classnames13.default)("r-row", { "fisrt-row": countDisplay === 0 }),
+              className: (0, import_classnames14.default)("r-row", { "fisrt-row": countDisplay === 0 }),
               children: contentColumns.map((col, indexCol) => {
                 return renderContentCol(col, row, indexRow, indexCol, isSelected);
               })
@@ -3579,19 +4186,19 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
       }
     });
   };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm)) {
       pagingSetting?.setCurrentPage(1);
     }
   }, [searchTerm, searchSetting?.searchTerm]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "react-table-edit", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "r-grid", ref: gridRef, children: [
-        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: renderToolbarTop() }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("table", { style: { width: "100%" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "react-table-edit", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-grid", ref: gridRef, children: [
+        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: renderToolbarTop() }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("table", { style: { width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 header_default,
                 {
                   col,
@@ -3611,14 +4218,14 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
               );
             }) }, `header-${-indexParent}`);
           }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tbody", { className: "r-gridcontent", children: renderData() }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tr", { className: "r-row", children: contentColumns.map((col, index) => {
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tbody", { className: "r-gridcontent", children: renderData() }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tr", { className: "r-row", children: contentColumns.map((col, index) => {
             return renderFooterCol(col, index);
-          }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {}) })
+          }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}) })
         ] }) }),
-        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: renderToolbarBottom() }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {})
+        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: renderToolbarBottom() }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {})
       ] }),
-      pagingSetting?.allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      pagingSetting?.allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         PagingComponent,
         {
           onChangePage,
@@ -3628,9 +4235,9 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
           totalItem: pagingClient ? totalCount : pagingSetting?.totalItem ?? 0,
           onChangePageSize
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {})
+      ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       sidebar_setting_column_default,
       {
         handleSidebar: () => {
@@ -3646,12 +4253,12 @@ var TableEdit = (0, import_react15.forwardRef)((props, ref) => {
 var table_default = TableEdit;
 
 // test-app/src/component/tab-menu/index.tsx
-var import_becoxy_icons7 = require("becoxy-icons");
-var import_classnames14 = __toESM(require("classnames"));
-var import_react16 = require("react");
+var import_becoxy_icons8 = require("becoxy-icons");
+var import_classnames15 = __toESM(require("classnames"));
+var import_react17 = require("react");
 var import_react_router_dom = require("react-router-dom");
-var import_reactstrap11 = require("reactstrap");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_reactstrap12 = require("reactstrap");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var TabsMenuComponent = ({
   buttonWidth,
   tabParent,
@@ -3663,14 +4270,14 @@ var TabsMenuComponent = ({
   renderModal
 }) => {
   const navigate = (0, import_react_router_dom.useNavigate)();
-  const [dataMenu, setDataMenu] = (0, import_react16.useState)([]);
-  const [openMenu, setOpenMenu] = (0, import_react16.useState)(false);
-  const [url, setUrl] = (0, import_react16.useState)("");
-  const [contentWidth, setContentWidth] = (0, import_react16.useState)(0);
-  const [componentWidth, setComponentWidth] = (0, import_react16.useState)(0);
-  const [scrollPosition, setScrollPosition] = (0, import_react16.useState)(0);
-  const [dataItem, setDataItem] = (0, import_react16.useState)([]);
-  const [openModal, setOpenModal] = (0, import_react16.useState)({});
+  const [dataMenu, setDataMenu] = (0, import_react17.useState)([]);
+  const [openMenu, setOpenMenu] = (0, import_react17.useState)(false);
+  const [url, setUrl] = (0, import_react17.useState)("");
+  const [contentWidth, setContentWidth] = (0, import_react17.useState)(0);
+  const [componentWidth, setComponentWidth] = (0, import_react17.useState)(0);
+  const [scrollPosition, setScrollPosition] = (0, import_react17.useState)(0);
+  const [dataItem, setDataItem] = (0, import_react17.useState)([]);
+  const [openModal, setOpenModal] = (0, import_react17.useState)({});
   const handleWindowResize = () => {
     const tabEle = document.getElementById(`tab-component-${resourceCode}`);
     const tabContent = document.getElementById(`content-component-${resourceCode}`);
@@ -3679,7 +4286,7 @@ var TabsMenuComponent = ({
       setContentWidth(tabContent?.offsetWidth ?? 0);
     }
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     setUrl(window.location.pathname);
     window.addEventListener("resize", handleWindowResize);
     setTimeout(() => {
@@ -3695,7 +4302,7 @@ var TabsMenuComponent = ({
       window.removeEventListener("resize", handleWindowResize);
     };
   }, []);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const item = resources?.find((x) => x.code === (resourceCodeParent ? resourceCodeParent : resourceCode));
     if (item) {
       if (resourceCodeParent) {
@@ -3726,23 +4333,23 @@ var TabsMenuComponent = ({
   const handleModal = (name) => {
     setOpenModal((old) => ({ ...old, [name]: !(openModal[name] ?? false) }));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react16.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react17.Fragment, { children: [
     renderModal ? renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }) : "",
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: (0, import_classnames14.default)("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: (0, import_classnames15.default)("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "div",
         {
           onClick: () => handleScroll(-200),
-          className: (0, import_classnames14.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_becoxy_icons7.ChevronLeft, {})
+          className: (0, import_classnames15.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_becoxy_icons8.ChevronLeft, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
         if (item?.resAttributes?.IS_MENU === "1") {
-          return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_reactstrap11.UncontrolledDropdown, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.DropdownToggle, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: item.name }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_reactstrap11.DropdownMenu, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              import_reactstrap11.DropdownItem,
+          return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_reactstrap12.UncontrolledDropdown, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_reactstrap12.DropdownToggle, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: item.name }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_reactstrap12.DropdownMenu, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              import_reactstrap12.DropdownItem,
               {
                 style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%" },
                 onClick: () => {
@@ -3758,23 +4365,23 @@ var TabsMenuComponent = ({
             )) })
           ] }, item.code);
         } else {
-          return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             import_react_router_dom.Link,
             {
               to: item.url,
-              className: (0, import_classnames14.default)("tab-custom-item", { active: item.url === url || tabParent && url?.split("/").length > 3 && item.url.startsWith(url.substring(0, url.lastIndexOf("/"))) }),
+              className: (0, import_classnames15.default)("tab-custom-item", { active: item.url === url || tabParent && url?.split("/").length > 3 && item.url.startsWith(url.substring(0, url.lastIndexOf("/"))) }),
               children: item.name
             },
             item.code
           );
         }
       }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "div",
         {
           onClick: () => handleScroll(200),
-          className: (0, import_classnames14.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_becoxy_icons7.ChevronRight, {})
+          className: (0, import_classnames15.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_becoxy_icons8.ChevronRight, {})
         }
       )
     ] })
@@ -3782,10 +4389,10 @@ var TabsMenuComponent = ({
 };
 
 // test-app/src/component/input-style/index.tsx
-var import_becoxy_icons8 = require("becoxy-icons");
-var import_reactstrap12 = require("reactstrap");
-var import_classnames15 = __toESM(require("classnames"));
-var import_react17 = require("react");
+var import_becoxy_icons9 = require("becoxy-icons");
+var import_reactstrap13 = require("reactstrap");
+var import_classnames16 = __toESM(require("classnames"));
+var import_react18 = require("react");
 
 // test-app/src/component/input-style/fonts.ts
 var OptionFont = [
@@ -4644,7 +5251,7 @@ var OptionFont = [
 ];
 
 // test-app/src/component/input-style/index.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var InputStyleComponent = (props) => {
   const {
     value,
@@ -4658,8 +5265,8 @@ var InputStyleComponent = (props) => {
     disabledItalic,
     disabledUnderline
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react17.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "d-flex align-items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react18.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "d-flex align-items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       SelectTable,
       {
         options: OptionFont,
@@ -4675,12 +5282,12 @@ var InputStyleComponent = (props) => {
             field: "label",
             headerText: "",
             template: (row) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { fontFamily: row.label }, children: row.label });
+              return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontFamily: row.label }, children: row.label });
             }
           }
         ],
         formatOptionLabel: (props2) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { style: {
+          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { style: {
             paddingLeft: 3,
             borderRadius: 2,
             fontFamily: value.fontFamily,
@@ -4693,7 +5300,7 @@ var InputStyleComponent = (props) => {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_classnames15.default)("ms-25", { "d-none": disabledFontSize }), style: { width: 60 }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_classnames16.default)("ms-25", { "d-none": disabledFontSize }), style: { width: 60 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       SelectTable,
       {
         options: Array.from({ length: 100 }, (_, i) => ({ value: i + 1, label: i + 1 })),
@@ -4705,45 +5312,45 @@ var InputStyleComponent = (props) => {
         }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       {
-        className: (0, import_classnames15.default)("btn-input-style", { "active-custom": value.bold }, { "d-none": disabledBold }),
+        className: (0, import_classnames16.default)("btn-input-style", { "active-custom": value.bold }, { "d-none": disabledBold }),
         onClick: () => {
           if (!disabled) {
             onChange({ ...value, bold: !value.bold });
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_becoxy_icons8.Bold, { fontSize: 18 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_becoxy_icons9.Bold, { fontSize: 18 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       {
-        className: (0, import_classnames15.default)("btn-input-style", { "active-custom": value.italic }, { "d-none": disabledItalic }),
+        className: (0, import_classnames16.default)("btn-input-style", { "active-custom": value.italic }, { "d-none": disabledItalic }),
         onClick: () => {
           if (!disabled) {
             onChange({ ...value, italic: !value.italic });
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_becoxy_icons8.Italic, { fontSize: 18 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_becoxy_icons9.Italic, { fontSize: 18 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       {
-        className: (0, import_classnames15.default)("btn-input-style", { "active-custom": value.underline }, { "d-none": disabledUnderline }),
+        className: (0, import_classnames16.default)("btn-input-style", { "active-custom": value.underline }, { "d-none": disabledUnderline }),
         onClick: () => {
           if (!disabled) {
             onChange({ ...value, underline: !value.underline });
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_becoxy_icons8.Underline, { fontSize: 18 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_becoxy_icons9.Underline, { fontSize: 18 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_reactstrap12.Button, { tag: "label", color: "none", className: (0, import_classnames15.default)("btn-input-style", { "d-none": disabledColor }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_becoxy_icons8.Type, { stroke: value.color ?? "#000000", fontSize: 18 }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_reactstrap13.Button, { tag: "label", color: "none", className: (0, import_classnames16.default)("btn-input-style", { "d-none": disabledColor }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_becoxy_icons9.Type, { stroke: value.color ?? "#000000", fontSize: 18 }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "input",
         {
           type: "color",
@@ -4757,10 +5364,10 @@ var InputStyleComponent = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_reactstrap12.Button, { tag: "label", color: "none", className: (0, import_classnames15.default)("btn-input-style", { "d-none": disabledBackgroundColor }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_becoxy_icons8.Droplet, { fill: value.backgroundColor ?? "#ffffff", fontSize: 18 }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        import_reactstrap12.Input,
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_reactstrap13.Button, { tag: "label", color: "none", className: (0, import_classnames16.default)("btn-input-style", { "d-none": disabledBackgroundColor }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_becoxy_icons9.Droplet, { fill: value.backgroundColor ?? "#ffffff", fontSize: 18 }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_reactstrap13.Input,
         {
           id: "backgroundColor",
           type: "color",