react-table-edit 1.2.44 → 1.2.46

package/dist/index.js

@@ -55,7 +55,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/component/table/index.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_reactstrap11 = require("reactstrap");
 var import_classnames14 = __toESM(require("classnames"));
 var import_react_i18next12 = require("react-i18next");
@@ -476,36 +476,34 @@ var import_react_hook_form2 = require("react-hook-form");
 var import_reactstrap3 = require("reactstrap");
 var import_classnames3 = __toESM(require("classnames"));
 var import_react5 = require("react");
+var import_react_number_format = require("react-number-format");
 var import_react_i18next2 = require("react-i18next");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var NumberInput = (props) => {
-  const { t } = (0, import_react_i18next2.useTranslation)();
   const {
-    control,
     id,
-    fractionCurrency = 10,
+    control,
+    fractionCurrency,
     name,
     min,
     max,
-    type,
     label,
     labelSize,
     required,
     errors,
-    height,
     disabled,
-    row,
     isLabel,
+    fixedDecimalScale,
     placeholder,
-    autoFocus,
     inLine,
     callback,
-    readOnly,
     decimalSeparator = ",",
     thousandSeparator = ".",
     classes,
-    ...rest
+    width,
+    allowNegative
   } = props;
+  const { t } = (0, import_react_i18next2.useTranslation)();
   const renderLabel = () => {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Fragment, { children: isLabel === false ? "" : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_reactstrap3.Label, { className: "form-label", for: name, children: [
       t(label ? label : ""),
@@ -521,64 +519,50 @@ var NumberInput = (props) => {
         {
           name,
           control,
-          render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            import_reactstrap3.Input,
-            {
-              id,
-              value: formartNumberic(value, decimalSeparator, thousandSeparator, fractionCurrency),
-              onChange: (val) => {
-                let newVal = "";
-                const flag = val.target?.value.startsWith("-");
-                if (val.target?.value.endsWith(decimalSeparator)) {
-                  if ((val.target?.value.match(new RegExp(decimalSeparator === "," ? "," : "\\.", "g")) || []).length > 1 || fractionCurrency === 0) {
-                    newVal = val.target?.value.slice(0, -1).replaceAll(thousandSeparator, "");
+          render: ({ field: { value, onChange } }) => {
+            let floatValue = parseFloat(value);
+            const numericFormatProps = {
+              value: !isNullOrUndefined(value) ? value : "",
+              thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+              decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+              allowNegative: allowNegative ?? false,
+              decimalScale: fractionCurrency ?? 0,
+              fixedDecimalScale
+            };
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_react_number_format.NumericFormat,
+              {
+                ...numericFormatProps,
+                className: (0, import_classnames3.default)("form-control text-right", {
+                  "is-invalid": errors
+                }),
+                onValueChange: (values) => {
+                  floatValue = values?.floatValue;
+                  const textBeforeDot = values?.value.split(".")[1];
+                  onChange(textBeforeDot ? parseFloat(values?.value).toFixed(textBeforeDot.length) : values?.floatValue);
+                },
+                onFocus: (e) => {
+                  e.target.setSelectionRange(0, e.target.innerText.length - 1);
+                },
+                onChange: () => {
+                  if (callback) {
+                    callback(floatValue);
+                  }
+                },
+                onBlur: () => {
+                  if (max && floatValue > max) {
+                    onChange(max);
+                  } else if (min && floatValue < min) {
+                    onChange(min);
                   } else {
-                    newVal = val.target?.value.replaceAll(thousandSeparator, "");
+                    onChange(floatValue);
                   }
-                } else {
-                  newVal = val.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator}]`, "g"), "");
-                }
-                if (decimalSeparator !== ".") {
-                  newVal = newVal.replaceAll(decimalSeparator, ".");
-                }
-                onChange(flag ? `-${newVal}` : newVal);
-              },
-              onBlur: (val) => {
-                let newVal = "";
-                const flag = val.target?.value.startsWith("-");
-                if (val.target?.value.endsWith(decimalSeparator)) {
-                  newVal = val.target?.value.slice(0, -1).replaceAll(new RegExp(`[^0-9${decimalSeparator}]`, "g"), "");
-                } else {
-                  newVal = val.target.value.replaceAll(new RegExp(`[^0-9${decimalSeparator}]`, "g"), "");
-                }
-                if (decimalSeparator !== ".") {
-                  newVal = newVal.replaceAll(decimalSeparator, ".");
-                }
-                let value2 = flag ? 0 - Number(newVal) : Number(newVal);
-                if (max !== void 0 && value2 > max) {
-                  value2 = max;
-                } else if (min !== void 0 && value2 < min) {
-                  value2 = min;
-                }
-                onChange(value2);
-                if (callback) {
-                  callback(value2);
-                }
-              },
-              style: { height: `${height}px` },
-              autoFocus,
-              disabled,
-              placeholder,
-              type: type ? type : "text",
-              invalid: errors && true,
-              className: "h-100",
-              rows: row,
-              min,
-              max,
-              readOnly,
-              ...rest
-            }
-          )
+                },
+                placeholder,
+                disabled
+              }
+            );
+          }
         }
       ),
       errors && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_reactstrap3.FormFeedback, { children: errors?.message })
@@ -598,7 +582,7 @@ var NumberInput = (props) => {
       ),
       children: [
         renderLabel(),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_classnames3.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: width ? width : void 0 }, className: (0, import_classnames3.default)("form-input-content", { "hidden-label": isLabel === false }), children: renderInput() })
       ]
     }
   ) });
@@ -713,9 +697,11 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
     }
   }, [inputRef]);
   (0, import_react6.useEffect)(() => {
-    if (searchTerm && !dropdownOpen) {
-      setDropdownOpen(true);
-      setIndexFocus(0);
+    if (searchTerm) {
+      if (!dropdownOpen) {
+        setDropdownOpen(true);
+      }
+      setIndexFocus(-1);
     }
   }, [searchTerm]);
   (0, import_react6.useEffect)(() => {
@@ -754,10 +740,9 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
         if (dropdownOpen && newItem) {
           handChange(newItem);
           handleOpenClose();
-          flag = true;
         }
-        if (!searchTerm) {
-          handleOpenClose();
+        if (!dropdownOpen) {
+          setDropdownOpen(true);
           flag = true;
         }
       } else if (e.code === "Escape") {
@@ -2874,9 +2859,79 @@ var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
 });
 
 // src/component/table/index.tsx
-var import_react_number_format = require("react-number-format");
+var import_react_number_format2 = require("react-number-format");
+
+// src/component/table/toolbar-top.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
+var renderToolbarTop = (toolbarTopOption) => {
+  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)(import_jsx_runtime16.Fragment, { children: /* @__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_runtime16.jsx)("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
+      return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: /* @__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_runtime16.jsx)("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
+      return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-top-right-${index}`) }) : "";
+    }) })
+  ] }) });
+};
+var toolbar_top_default = renderToolbarTop;
+
+// src/component/input-date/index.tsx
+var import_react16 = require("react");
+var import_react_datepicker = __toESM(require("react-datepicker"));
+var import_react_input_mask = __toESM(require("react-input-mask"));
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var DateInput = (props) => {
+  const { id, onKeyDown, dateFormat, className, onChange, value } = props;
+  const [open, setOpen] = (0, import_react16.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_react_datepicker.default,
+    {
+      id,
+      open,
+      className,
+      selected: value,
+      onChange: (date) => {
+        if (onChange) {
+          onChange(date);
+        }
+      },
+      dateFormat,
+      locale: "vi",
+      showMonthDropdown: true,
+      showYearDropdown: true,
+      dropdownMode: "select",
+      onCalendarClose: () => setOpen(false),
+      onCalendarOpen: () => setOpen(true),
+      customInput: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_input_mask.default, { mask: "99/99/9999", placeholder: dateFormat }),
+      onKeyDown: (e) => {
+        if (e.code === "Space") {
+          setOpen(!open);
+          setTimeout(() => {
+            const element = document.getElementById(id ?? "");
+            if (element) {
+              element.focus();
+            }
+          }, 100);
+        } else {
+          if (onKeyDown && !open) {
+            const rs = onKeyDown(e);
+            if (rs) {
+              setOpen(false);
+            }
+          }
+        }
+      }
+    }
+  );
+};
+var input_date_default = DateInput;
+
+// src/component/table/index.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var TableEdit = (0, import_react17.forwardRef)((props, ref) => {
   const { t } = (0, import_react_i18next12.useTranslation)();
   const {
     idTable,
@@ -2905,35 +2960,35 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
     isMulti,
     disableAutoKey
   } = props;
-  (0, import_react16.useImperativeHandle)(ref, () => {
+  (0, import_react17.useImperativeHandle)(ref, () => {
     return {
       refeshFocusRow: handleRefeshRow
     };
   });
-  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)();
+  const [refreshRow, setRefreshRow] = (0, import_react17.useState)(false);
+  const [indexFocus, setIndexFocus] = (0, import_react17.useState)();
+  const [selectedRows, setSelectedRows] = (0, import_react17.useState)([]);
+  const [headerColumns, setHeaderColumns] = (0, import_react17.useState)([[]]);
+  const [contentColumns, setContentColumns] = (0, import_react17.useState)([]);
+  const [levelCol, setLevelCol] = (0, import_react17.useState)(0);
+  const [columnFistEdit, setColumnFistEdit] = (0, import_react17.useState)(0);
+  const [columnLastEdit, setColumnlastEdit] = (0, import_react17.useState)(0);
+  const [objWidthFix, setObjWidthFix] = (0, import_react17.useState)({});
+  const [openPopupSetupColumn, setOpenPopupSetupColumn] = (0, import_react17.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react17.useState)("");
+  const tableElement = (0, import_react17.useRef)(null);
+  const gridRef = (0, import_react17.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_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (pagingClient && pagingSetting.setCurrentPage && Math.ceil(totalCount / (pagingSetting?.pageSize ?? 1)) < (pagingSetting.currentPage ?? 1)) {
       pagingSetting.setCurrentPage(1);
     }
   }, [dataSource]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     let indexFirst = -1;
     let indexlast = -1;
     let letfWidthFix = 0;
@@ -2967,7 +3022,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
     setColumnFistEdit(indexFirst + 1);
     setColumnlastEdit(indexlast + 1);
   }, [contentColumns]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const arrHeaderColumns = [];
     const arrContentColumns = [];
     let headerLevelRow = 0;
@@ -2984,7 +3039,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
     setHeaderColumns(arrHeaderColumns);
     setContentColumns(arrContentColumns);
   }, [columns]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const arrHeaderColumns = [];
     const arrContentColumns = [];
     let headerLevelRow = 0;
@@ -3063,7 +3118,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
     }
   };
   const searchTemplate = () => {
-    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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react17.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "me-50 r-search", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       react_input_default,
       {
         style: { width: "230px" },
@@ -3084,59 +3139,45 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
   const RenderEdit = (row, col, indexCol, indexRow) => {
     switch (col?.editTypeCondition ? col?.editTypeCondition(row) : col.editType) {
       case "date":
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_reactstrap11.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          input_date_default,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
-            style: { textAlign: col.textAlign, height: 29 },
-            value: row[col.field] ? formatDateTime(row[col.field], "yyyy-MM-dd") : row[col.field],
-            onChange: (val) => {
-              row[col.field] = val.target.value;
+            className: (0, import_classnames14.default)("form-control border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            value: row[col.field],
+            onChange: (date) => {
+              row[col.field] = date;
               if (col.callback) {
-                col.callback(row, val.target.value, indexRow);
+                col.callback(date, indexRow);
               }
               handleDataChange(row, col, indexRow);
             },
-            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",
+            dateFormat: "dd/MM/yyyy",
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
-              }
-            },
-            onPaste: (e) => {
-              if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
-                pasteDataFromExcel(indexRow, indexCol, e);
-                e.preventDefault();
+                return true;
               }
             }
           }
         );
       case "datetime":
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_reactstrap11.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          input_date_default,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
-            style: { textAlign: col.textAlign, height: 29 },
-            value: row[col.field] ? formatDateTime(row[col.field], "yyyy-MM-dd HH:mm") : row[col.field],
-            onChange: (val) => {
-              row[col.field] = val.target.value;
+            className: (0, import_classnames14.default)("form-control border-0 rounded-0 input-numeric", { "is-invalid": col.validate && col.validate(row[col.field], row) }),
+            value: row[col.field],
+            onChange: (date) => {
+              row[col.field] = date;
               if (col.callback) {
-                col.callback(val.target.value, indexRow);
+                col.callback(date, indexRow);
               }
               handleDataChange(row, col, indexRow);
             },
-            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",
+            dateFormat: "dd/MM/yyyy HH:mm",
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
-              }
-            },
-            onPaste: (e) => {
-              if (toolbarSetting?.showBottomToolbar && !editDisable && !addDisable) {
-                pasteDataFromExcel(indexRow, indexCol, e);
-                e.preventDefault();
+                return true;
               }
             }
           }
@@ -3157,7 +3198,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
             valueSelect = col.selectSettings?.defaultValue(row);
           }
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           SelectTable,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -3250,14 +3291,14 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
         } else {
           valueSelectTree = !isNullOrUndefined(row[col.field]) && row[col.field] !== "" ? findItemInTree(optionsSelectTree, row[col.field]) : "";
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "div",
           {
             onKeyDown: (e) => {
               if (checkKeyDown(e, row, col, indexRow + 1, indexCol + 1)) {
               }
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               SelectTableTree,
               {
                 id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -3316,7 +3357,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
           }
         );
       case "checkbox":
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           import_reactstrap11.Input,
           {
             checked: row[col.field],
@@ -3346,8 +3387,8 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
           decimalScale: col.numericSettings?.fraction ?? 0
         };
         let floatValue = parseFloat(row[col.field]);
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_react_number_format.NumericFormat,
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          import_react_number_format2.NumericFormat,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
             style: { textAlign: col.textAlign, height: 29 },
@@ -3390,7 +3431,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
           }
         );
       case "color":
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { padding: "4px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           import_reactstrap11.Input,
           {
             type: "color",
@@ -3413,7 +3454,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
           `col-${indexRow}-${indexCol}`
         ) });
       case "form":
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           edit_form_default,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -3441,7 +3482,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
           }
         );
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           import_reactstrap11.Input,
           {
             id: `${idTable}-col${indexCol + 1}-row${indexRow + 1}`,
@@ -3818,7 +3859,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
       }
     }
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     setIndexFocus(-1);
     if (setSelectedItem) {
       if (isMulti) {
@@ -3845,7 +3886,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
       }
     }
   }, [selectedRows]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isMulti) {
       if (dataSource && selectedItem && selectedItem[fieldKey]) {
         if (selectedRows?.length === 0 || selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
@@ -3862,7 +3903,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
   }, [selectedItem]);
   const renderContentCol = (col, row, indexRow, indexCol, isSelected) => {
     if (col.field === "command") {
-      return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "td",
         {
           className: (0, import_classnames14.default)(
@@ -3875,12 +3916,12 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
             textAlign: col.textAlign ? col.textAlign : "left"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-rowcell-div command", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "r-rowcell-div command", children: /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime16.jsx)(
+      return col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "td",
         {
           className: (0, import_classnames14.default)(`r-rowcell p-0 cursor-pointer fix-${col.fixedType}`, { "cell-fixed": col.fixedType }, { "r-active": isSelected && editDisable || indexFocus === indexRow }),
@@ -3927,12 +3968,12 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
               e.stopPropagation();
             }
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-rowcell-div", children: indexRow + 1 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "r-rowcell-div", children: indexRow + 1 })
         },
         `col-${indexRow}-${indexCol}`
       );
     } else if (col.field === "checkbox") {
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "td",
         {
           className: (0, import_classnames14.default)(
@@ -3945,7 +3986,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
             textAlign: col.textAlign ? col.textAlign : "center"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "div",
             {
               className: "r-rowcell-div cursor-pointer",
@@ -3969,7 +4010,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
                   e.stopPropagation();
                 }
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 import_reactstrap11.Input,
                 {
                   checked: isSelected,
@@ -3996,7 +4037,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
       }
       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_runtime16.jsx)(import_react16.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react17.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "td",
         {
           className: (0, import_classnames14.default)(
@@ -4036,11 +4077,11 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
               e.stopPropagation();
             }
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "div",
             {
               className: (0, import_classnames14.default)("r-rowcell-div"),
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
                 "div",
                 {
                   id: indexFocus === indexRow && typeDis !== 1 ? `${idTable}-col${indexCol + 1}-row${indexRow + 1}` : "",
@@ -4049,16 +4090,16 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
                     margin: typeDis === 1 ? 2 : !errorMessage ? "7px 9px" : 2
                   },
                   children: [
-                    typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : /* @__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) : col.editType === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
+                    typeDis === 1 && !refreshRow ? RenderEdit(row, col, indexCol, indexRow) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: typeDis === 2 ? col.template(row, indexRow) : col.editType === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
                       " ",
                       `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
                     ] }) : 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) && /* @__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) : col.editType === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime18.jsx)(import_becoxy_icons7.AlertCircle, { fontSize: 15.5 }) }),
+                    !(typeDis === 1 && !refreshRow) && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_reactstrap11.UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: typeDis === 2 ? col.template(row, indexRow) : col.editType === "numeric" && Number(row[col.field]) < 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
                       " ",
                       `${formatSetting?.prefixNegative ?? "-"}${value}${formatSetting?.suffixNegative ?? ""}`
                     ] }) : value }),
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                       import_reactstrap11.UncontrolledTooltip,
                       {
                         target: `error-${indexRow}-${indexCol}`,
@@ -4077,7 +4118,10 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
     }
   };
   const renderFooterCol = (col, indexCol) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    const sumValue = col.haveSum === true && col.editType === "numeric" ? formartNumberic(dataSource.reduce(function(accumulator, currentValue) {
+      return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
+    }, 0), formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true) : 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react17.Fragment, { children: col.visible !== false && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "td",
       {
         className: (0, import_classnames14.default)(
@@ -4089,60 +4133,51 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
           right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
           textAlign: col.textAlign ? col.textAlign : "left"
         },
-        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), formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true) : "" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "r-footer-div", children: [
+          col.haveSum === true && col.editType === "numeric" && Number(sumValue) >= 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: sumValue }),
+          col.haveSum === true && col.editType === "numeric" && Number(sumValue) < 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: [
+            " ",
+            `${formatSetting?.prefixNegative ?? "-"}${sumValue}${formatSetting?.suffixNegative ?? ""}`
+          ] })
+        ] })
       }
     ) }, `summarycell-${indexCol}`);
   };
-  const renderToolbarTop = () => {
-    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_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_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_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: () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime18.jsxs)("div", { className: "r-toolbar-items", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "r-toolbar-left", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_reactstrap11.Button, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
+        (indexFocus ?? -1) > -1 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime18.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_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") }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_reactstrap11.Button, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_reactstrap11.Button, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: " " }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime16.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
+          return item.align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${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_runtime18.jsx)("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
+        return item.align === "center" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`) : "";
       }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "r-toolbar-right", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "r-toolbar-right", children: [
         toolbarSetting?.toolbarBottomOptions?.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-bottom-right-${index}`) : "";
+          return item.align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`) : "";
         }),
-        /* @__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, { tag: "div", color: "primary", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_becoxy_icons7.Info, { className: "cursor-pointer text-primary" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime18.jsx)(import_becoxy_icons7.Settings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_classnames14.default)("r-toolbar-item me-25", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_reactstrap11.UncontrolledDropdown, { className: "dropdown-user nav-item", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_reactstrap11.DropdownToggle, { tag: "div", color: "primary", onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_becoxy_icons7.Info, { className: "cursor-pointer text-primary" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             import_reactstrap11.DropdownMenu,
             {
               className: "formula-dropdown icon-dropdown",
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("ul", { className: "mb-0 pe-50", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { 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)("li", { 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)("li", { 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)("li", { 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" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("ul", { className: "mb-0 pe-50", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { 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_runtime18.jsx)("li", { 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_runtime18.jsx)("li", { 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_runtime18.jsx)("li", { 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" })
               ] })
             }
           )
@@ -4173,7 +4208,7 @@ var TableEdit = (0, import_react16.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_runtime16.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "tr",
             {
               className: (0, import_classnames14.default)("r-row", { "fisrt-row": countDisplay === 0 }),
@@ -4187,19 +4222,19 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
       }
     });
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (pagingClient && pagingSetting?.setCurrentPage && (searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm)) {
       pagingSetting?.setCurrentPage(1);
     }
   }, [searchTerm, searchSetting?.searchTerm]);
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "react-table-edit", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "r-grid", ref: gridRef, children: [
+        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: toolbar_top_default(toolbarTopOption) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime18.jsxs)("table", { style: { width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 header_default,
                 {
                   col,
@@ -4219,14 +4254,14 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
               );
             }) }, `header-${-indexParent}`);
           }) }),
-          /* @__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) => {
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tbody", { className: "r-gridcontent", children: renderData() }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tr", { className: "r-row", children: contentColumns.map((col, index) => {
             return renderFooterCol(col, index);
-          }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}) })
+          }) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.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, {})
+        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: renderToolbarBottom() }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, {})
       ] }),
-      pagingSetting?.allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      pagingSetting?.allowPaging ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         PagingComponent,
         {
           onChangePage,
@@ -4236,9 +4271,9 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
           totalItem: pagingClient ? totalCount : pagingSetting?.totalItem ?? 0,
           onChangePageSize
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {})
+      ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       sidebar_setting_column_default,
       {
         handleSidebar: () => {
@@ -4256,10 +4291,10 @@ var table_default = TableEdit;
 // src/component/tab-menu/index.tsx
 var import_becoxy_icons8 = require("becoxy-icons");
 var import_classnames15 = __toESM(require("classnames"));
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_react_router_dom = require("react-router-dom");
 var import_reactstrap12 = require("reactstrap");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var TabsMenuComponent = ({
   buttonWidth,
   tabParent,
@@ -4271,14 +4306,14 @@ var TabsMenuComponent = ({
   renderModal
 }) => {
   const navigate = (0, import_react_router_dom.useNavigate)();
-  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 [dataMenu, setDataMenu] = (0, import_react18.useState)([]);
+  const [openMenu, setOpenMenu] = (0, import_react18.useState)(false);
+  const [url, setUrl] = (0, import_react18.useState)("");
+  const [contentWidth, setContentWidth] = (0, import_react18.useState)(0);
+  const [componentWidth, setComponentWidth] = (0, import_react18.useState)(0);
+  const [scrollPosition, setScrollPosition] = (0, import_react18.useState)(0);
+  const [dataItem, setDataItem] = (0, import_react18.useState)([]);
+  const [openModal, setOpenModal] = (0, import_react18.useState)({});
   const handleWindowResize = () => {
     const tabEle = document.getElementById(`tab-component-${resourceCode}`);
     const tabContent = document.getElementById(`content-component-${resourceCode}`);
@@ -4287,7 +4322,7 @@ var TabsMenuComponent = ({
       setContentWidth(tabContent?.offsetWidth ?? 0);
     }
   };
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     setUrl(window.location.pathname);
     window.addEventListener("resize", handleWindowResize);
     setTimeout(() => {
@@ -4303,7 +4338,7 @@ var TabsMenuComponent = ({
       window.removeEventListener("resize", handleWindowResize);
     };
   }, []);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const item = resources?.find((x) => x.code === (resourceCodeParent ? resourceCodeParent : resourceCode));
     if (item) {
       if (resourceCodeParent) {
@@ -4334,22 +4369,22 @@ var TabsMenuComponent = ({
   const handleModal = (name) => {
     setOpenModal((old) => ({ ...old, [name]: !(openModal[name] ?? false) }));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react17.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react18.Fragment, { children: [
     renderModal ? renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }) : "",
-    /* @__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)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime19.jsx)(
         "div",
         {
           onClick: () => handleScroll(-200),
           className: (0, import_classnames15.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_becoxy_icons8.ChevronLeft, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_becoxy_icons8.ChevronLeft, {})
         }
       ),
-      /* @__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) => {
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { id: `tab-component-${resourceCode}`, className: "tab-component", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { id: `content-component-${resourceCode}`, children: dataMenu.map((item) => {
         if (item?.resAttributes?.IS_MENU === "1") {
-          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)(
+          return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_reactstrap12.UncontrolledDropdown, { className: "tab-custom-item", isOpen: openMenu, toggle: toggleMenu, direction: "down", style: { backgroundColor: openMenu ? "#e0e0e0" : "" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_reactstrap12.DropdownToggle, { color: "#00000", style: { border: "none", boxShadow: "none", margin: 0, padding: 0 }, className: "background-none", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: item.name }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_reactstrap12.DropdownMenu, { container: document.body, end: true, style: { width: 300 }, children: item?.children?.map((x) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               import_reactstrap12.DropdownItem,
               {
                 style: { borderRadius: "5px", margin: "0 0.5rem", width: "95%" },
@@ -4366,7 +4401,7 @@ var TabsMenuComponent = ({
             )) })
           ] }, item.code);
         } else {
-          return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             import_react_router_dom.Link,
             {
               to: item.url,
@@ -4377,12 +4412,12 @@ var TabsMenuComponent = ({
           );
         }
       }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "div",
         {
           onClick: () => handleScroll(200),
           className: (0, import_classnames15.default)("btn-scroll", { "d-none": componentWidth >= contentWidth - 20 }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_becoxy_icons8.ChevronRight, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_becoxy_icons8.ChevronRight, {})
         }
       )
     ] })
@@ -4393,7 +4428,7 @@ var TabsMenuComponent = ({
 var import_becoxy_icons9 = require("becoxy-icons");
 var import_reactstrap13 = require("reactstrap");
 var import_classnames16 = __toESM(require("classnames"));
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/component/input-style/fonts.ts
 var OptionFont = [
@@ -5252,7 +5287,7 @@ var OptionFont = [
 ];
 
 // src/component/input-style/index.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var InputStyleComponent = (props) => {
   const {
     value,
@@ -5266,8 +5301,8 @@ var InputStyleComponent = (props) => {
     disabledItalic,
     disabledUnderline
   } = props;
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react19.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "d-flex align-items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       SelectTable,
       {
         options: OptionFont,
@@ -5283,12 +5318,12 @@ var InputStyleComponent = (props) => {
             field: "label",
             headerText: "",
             template: (row) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontFamily: row.label }, children: row.label });
+              return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontFamily: row.label }, children: row.label });
             }
           }
         ],
         formatOptionLabel: (props2) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { style: {
+          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { style: {
             paddingLeft: 3,
             borderRadius: 2,
             fontFamily: value.fontFamily,
@@ -5301,7 +5336,7 @@ var InputStyleComponent = (props) => {
         }
       }
     ),
-    /* @__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)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: (0, import_classnames16.default)("ms-25", { "d-none": disabledFontSize }), style: { width: 60 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       SelectTable,
       {
         options: Array.from({ length: 100 }, (_, i) => ({ value: i + 1, label: i + 1 })),
@@ -5313,7 +5348,7 @@ var InputStyleComponent = (props) => {
         }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       {
         className: (0, import_classnames16.default)("btn-input-style", { "active-custom": value.bold }, { "d-none": disabledBold }),
@@ -5322,10 +5357,10 @@ var InputStyleComponent = (props) => {
             onChange({ ...value, bold: !value.bold });
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_becoxy_icons9.Bold, { fontSize: 18 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_becoxy_icons9.Bold, { fontSize: 18 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       {
         className: (0, import_classnames16.default)("btn-input-style", { "active-custom": value.italic }, { "d-none": disabledItalic }),
@@ -5334,10 +5369,10 @@ var InputStyleComponent = (props) => {
             onChange({ ...value, italic: !value.italic });
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_becoxy_icons9.Italic, { fontSize: 18 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_becoxy_icons9.Italic, { fontSize: 18 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       {
         className: (0, import_classnames16.default)("btn-input-style", { "active-custom": value.underline }, { "d-none": disabledUnderline }),
@@ -5346,12 +5381,12 @@ var InputStyleComponent = (props) => {
             onChange({ ...value, underline: !value.underline });
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_becoxy_icons9.Underline, { fontSize: 18 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_becoxy_icons9.Underline, { fontSize: 18 })
       }
     ),
-    /* @__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)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_reactstrap13.Button, { tag: "label", color: "none", className: (0, import_classnames16.default)("btn-input-style", { "d-none": disabledColor }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_becoxy_icons9.Type, { stroke: value.color ?? "#000000", fontSize: 18 }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "input",
         {
           type: "color",
@@ -5365,9 +5400,9 @@ var InputStyleComponent = (props) => {
         }
       )
     ] }),
-    /* @__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)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_reactstrap13.Button, { tag: "label", color: "none", className: (0, import_classnames16.default)("btn-input-style", { "d-none": disabledBackgroundColor }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_becoxy_icons9.Droplet, { fill: value.backgroundColor ?? "#ffffff", fontSize: 18 }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         import_reactstrap13.Input,
         {
           id: "backgroundColor",