@mkt-loitd/react-table-grid-custom 1.0.2 → 1.0.7

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,17 +17,31 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  ReactTableGridCustom: () => ReactTableGridCustom
+  ReactTableGridCustom: () => ReactTableGridCustom,
+  TableStyleContextWapper: () => TableStyleContextWapper
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/ReactTableGridCustom.tsx
-var import_core2 = require("@mantine/core");
+var import_core = require("@mantine/core");
+var import_lodash = require("lodash");
+var import_react2 = require("react");
+var import_react_data_grid = require("react-data-grid");
+var import_styles = require("react-data-grid/lib/styles.css");
+var import_react_i18next2 = require("react-i18next");
 
 // src/helpers/table.ts
 var calculatorTotalPage = ({ total = 0, pageSize = 0 }) => {
@@ -53,65 +69,20 @@ function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
 
-// src/ReactTableGridCustom.tsx
-var import_lodash = require("lodash");
-var import_react3 = require("react");
-var import_react_data_grid = require("react-data-grid");
-var import_styles = require("react-data-grid/lib/styles.css");
-var import_react_i18next2 = require("react-i18next");
-
-// src/component/ComboboxCustom.tsx
-var import_core = require("@mantine/core");
+// src/hooks/useTranslationTable.ts
 var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var ComboboxCustom = ({ options, onChange, value }) => {
-  const combobox = (0, import_core.useCombobox)({
-    onDropdownClose: () => combobox.resetSelectedOption()
-  });
-  const newOptions = (0, import_react.useMemo)(() => {
-    return (options != null ? options : []).map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_core.Combobox.Option,
-      {
-        className: "page_size-table",
-        value: item,
-        disabled: item === value,
-        children: item
-      },
-      item
-    ));
-  }, [options, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_core.Combobox,
-    {
-      size: "sm",
-      store: combobox,
-      onOptionSubmit: (val) => {
-        onChange && onChange(val);
-        combobox.closeDropdown();
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Combobox.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_core.InputBase,
-          {
-            component: "button",
-            type: "button",
-            pointer: true,
-            rightSectionPointerEvents: "none",
-            onClick: () => combobox.toggleDropdown(),
-            className: "w-[70px]",
-            classNames: { input: "custom_input_table" },
-            children: value || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Input.Placeholder, { children: "Pick value" })
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Combobox.Dropdown, { className: "w-[70px]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Combobox.Options, { children: newOptions }) })
-      ]
-    }
-  );
+var import_react_i18next = require("react-i18next");
+var useTranslationTable = (column) => {
+  const { i18n, t } = (0, import_react_i18next.useTranslation)();
+  const columnTranslation = (0, import_react.useMemo)(() => {
+    return column.map((item) => ({ ...item, name: t(`${item == null ? void 0 : item.name}`) }));
+  }, [i18n == null ? void 0 : i18n.language, column]);
+  return columnTranslation;
 };
-var ComboboxCustom_default = ComboboxCustom;
+var useTranslationTable_default = useTranslationTable;
 
 // src/component/Icons.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 var LoadingIcon = ({
   isSpin = false,
   h = 30,
@@ -119,7 +90,7 @@ var LoadingIcon = ({
   size = 30,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "svg",
     {
       className: `${isSpin ? "animate-spin" : ""} ${className != null ? className : ""}`,
@@ -130,7 +101,7 @@ var LoadingIcon = ({
       height: size || h,
       fill: "currentColor",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" })
     }
   );
 };
@@ -140,7 +111,7 @@ var ArrowIcon = ({
   size,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "svg",
     {
       className,
@@ -151,7 +122,7 @@ var ArrowIcon = ({
       height: size != null ? size : h,
       width: size != null ? size : w,
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -163,35 +134,23 @@ var ArrowIcon = ({
 };
 
 // src/component/RenderSortStatus.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var RenderSortStatus = ({ sortDirection, priority }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    sortDirection !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    sortDirection !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       ArrowIcon,
       {
         className: cn(sortDirection === "DESC" && "-rotate-180", "transition-transform"),
         size: 20
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: priority })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: priority })
   ] });
 };
 var RenderSortStatus_default = RenderSortStatus;
 
-// src/hooks/useTranslationTable.ts
-var import_react2 = require("react");
-var import_react_i18next = require("react-i18next");
-var useTranslationTable = (column) => {
-  const { i18n, t } = (0, import_react_i18next.useTranslation)();
-  const columnTranslation = (0, import_react2.useMemo)(() => {
-    return column.map((item) => ({ ...item, name: t(`${item == null ? void 0 : item.name}`) }));
-  }, [i18n == null ? void 0 : i18n.language, column]);
-  return columnTranslation;
-};
-var useTranslationTable_default = useTranslationTable;
-
 // src/ReactTableGridCustom.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var ReactTableGridCustomInner = ({
   classNamePaginationTable,
   classNameWapperTable,
@@ -214,200 +173,393 @@ var ReactTableGridCustomInner = ({
   ...spread
 }) => {
   const { t } = (0, import_react_i18next2.useTranslation)();
-  const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
-  const tableRef = (0, import_react3.useRef)(null);
-  const [containerWidth, setContainerWidth] = (0, import_react3.useState)(0);
-  const [sortColumns, setSortColumns] = (0, import_react3.useState)([]);
+  const tableRef = (0, import_react2.useRef)(null);
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(true);
+  const [containerWidth, setContainerWidth] = (0, import_react2.useState)(0);
+  const [sortColumns, setSortColumns] = (0, import_react2.useState)([]);
   const isSelectRow = selectedRows !== void 0;
-  const maxPage = (0, import_react3.useMemo)(
-    () => !hiddenPagination ? calculatorTotalPage({
-      total,
-      pageSize
-    }) : 0,
+  const maxPage = (0, import_react2.useMemo)(
+    () => !hiddenPagination ? calculatorTotalPage({ total, pageSize }) : 0,
     [pageSize, total, hiddenPagination]
   );
-  const toInPagination = (0, import_react3.useMemo)(() => {
-    const initPage = {
-      from: 0,
-      to: 0
-    };
-    if (!hiddenPaginationText && pageSize && page) {
-      const from = STT(
-        {
-          page,
-          pageSize
-        },
-        0
-      );
+  const toInPagination = (0, import_react2.useMemo)(() => {
+    if (!hiddenPaginationText && page && pageSize) {
+      const from = STT({ page, pageSize }, 0);
       return {
         from,
-        to: maxPage === page ? total : page * pageSize
+        to: maxPage === page ? total != null ? total : 0 : page * pageSize
       };
     }
-    return initPage;
-  }, [pageSize, page, hiddenPaginationText, maxPage, total]);
-  const columnTranslation = useTranslationTable_default(columns);
-  (0, import_react3.useEffect)(() => {
-    var _a;
-    setIsLoading(false);
-    if ((_a = tableRef.current) == null ? void 0 : _a.element) {
-      const width = tableRef.current.element.offsetWidth;
-      if (width) setContainerWidth(width);
-    }
-  }, []);
-  const newColumns = (0, import_react3.useMemo)(() => {
-    let columnsCustom = [...columnTranslation];
-    const adjustedContainerWidth = containerWidth - 80 + 35;
-    columnsCustom = columnsCustom.map((col) => {
-      const newCol = { ...col };
-      delete newCol.maxWidth;
-      newCol.width = 200;
-      return newCol;
-    });
-    const totalMaxWidth = columnsCustom.reduce((sum, col) => {
-      var _a;
-      return sum + ("width" in col ? Number((_a = col == null ? void 0 : col.width) != null ? _a : 200) : 0);
-    }, 0);
-    if (totalMaxWidth < adjustedContainerWidth && columnsCustom.length > 0) {
-      const evenWidth = Math.floor(adjustedContainerWidth / columnsCustom.length);
-      columnsCustom = columnsCustom.map((col) => {
-        const newCol = { ...col };
-        delete newCol.maxWidth;
-        newCol.width = evenWidth;
-        return newCol;
-      });
-    }
+    return { from: 0, to: 0 };
+  }, [page, pageSize, hiddenPaginationText, maxPage, total]);
+  const columnTranslation = useTranslationTable_default(
+    columns
+  );
+  const newColumns = (0, import_react2.useMemo)(() => {
+    let cols = [
+      ...columnTranslation
+    ];
+    const adjustedWidth = containerWidth - 45;
+    cols = cols.map(
+      (col) => "key" in col ? {
+        ...col,
+        width: 200,
+        maxWidth: void 0
+      } : col
+    );
     if (isSelectRow) {
-      columnsCustom.unshift(import_react_data_grid.SelectColumn);
+      cols.unshift(import_react_data_grid.SelectColumn);
     }
-    if (!hiddenSTT || !hiddenSTT && page && pageSize) {
-      columnsCustom.unshift({
+    if (!hiddenSTT) {
+      const sttColumn = {
         key: "index",
         name: "STT",
         width: 80,
         renderCell: ({ rowIdx }) => STT({ page, pageSize }, rowIdx)
-      });
+      };
+      cols.unshift(sttColumn);
     }
-    return columnsCustom;
-  }, [hiddenSTT, isSelectRow, page, pageSize, columnTranslation, containerWidth]);
-  const customRowKeyGetter = (0, import_react3.useMemo)(() => {
-    return (row) => {
+    return cols;
+  }, [
+    columnTranslation,
+    containerWidth,
+    hiddenSTT,
+    isSelectRow,
+    page,
+    pageSize
+  ]);
+  const customRowKeyGetter = (0, import_react2.useCallback)(
+    (row) => {
       if (typeof rowKeyGetter === "function") {
         return rowKeyGetter(row);
       }
-      return (0, import_lodash.get)(row, rowKeyGetter);
-    };
-  }, [rowKeyGetter]);
-  const handlePageChange = (0, import_react3.useCallback)(
-    (page2) => {
-      if (onChange) {
-        onChange(page2);
-        return;
-      }
-      if (setConfigPagination) {
-        setConfigPagination((prev) => ({ ...prev, page: page2 }));
+      if (typeof rowKeyGetter === "string") {
+        return (0, import_lodash.get)(row, rowKeyGetter);
       }
+      throw new Error(
+        "rowKeyGetter must be a string or a function"
+      );
     },
-    [setConfigPagination, onChange]
+    [rowKeyGetter]
   );
-  const sortedRows = (0, import_react3.useMemo)(() => {
-    var _a, _b, _c;
-    if (sortColumns.length === 0) return data;
-    const direction = (_b = (_a = sortColumns[0]) == null ? void 0 : _a.direction) == null ? void 0 : _b.toLocaleLowerCase();
-    const columnKey = (_c = sortColumns[0]) == null ? void 0 : _c.columnKey;
-    return (0, import_lodash.orderBy)(data, columnKey, direction);
+  const sortedRows = (0, import_react2.useMemo)(() => {
+    if (!sortColumns.length) return data;
+    const { columnKey, direction } = sortColumns[0];
+    if (!direction) return data;
+    const order = direction === "ASC" ? "asc" : "desc";
+    const iteratee = typeof columnKey === "string" ? columnKey : String(columnKey);
+    return (0, import_lodash.orderBy)(data, [iteratee], [order]);
   }, [data, sortColumns]);
-  (0, import_react3.useEffect)(() => {
-    if (page && page > maxPage && maxPage > 0) {
-      handlePageChange(1);
+  (0, import_react2.useEffect)(() => {
+    var _a;
+    setIsLoading(false);
+    if ((_a = tableRef.current) == null ? void 0 : _a.element) {
+      setContainerWidth(tableRef.current.element.offsetWidth);
     }
-  }, [page, maxPage, handlePageChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       className: cn(
-        "wapper_table flex-1 rounded-md overflow-hidden relative h-full flex flex-col min-h-0",
+        "wapper_table flex flex-col h-full min-h-0",
         classNameWapperTable
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative wapper_table_empty wrapperDatagrid flex flex-col flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            import_react_data_grid.DataGrid,
-            {
-              ref: tableRef,
-              "aria-rowcount": sortedRows == null ? void 0 : sortedRows.length,
-              selectedRows,
-              rows: sortedRows,
-              rowKeyGetter: rowKeyGetter && isSelectRow ? customRowKeyGetter : void 0,
-              columns: newColumns,
-              renderers: {
-                renderSortStatus: RenderSortStatus_default,
-                renderCheckbox({ onChange: onChange2, checked, ...spread2 }) {
-                  const handleChange = (e) => {
-                    onChange2(e.target.checked, e.nativeEvent.shiftKey);
-                  };
-                  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core2.Checkbox, { color: "indigo", checked: !!checked, onChange: handleChange, ...spread2 });
-                }
-              },
-              className: "fill-grid flex-1 h-full min-h-0",
-              defaultColumnOptions: {
-                // minWidth: 200,
-                // maxWidth: 200,
-                renderCell: ({ column, row }) => {
-                  const value = (0, import_lodash.get)(row, column.key);
-                  return [null, void 0, ""].includes(value) ? "-" : value;
-                }
-              },
-              sortColumns,
-              onSortColumnsChange: setSortColumns,
-              ...spread
-            }
-          ),
-          total === 0 && TableLogo && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "no_result absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 select-none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-col justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: TableLogo, alt: "", className: "size-32" }) }) })
-        ] }),
-        !hiddenPagination && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          "div",
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_react_data_grid.DataGrid,
           {
-            className: cn(
-              "flex justify-between items-center flex-wrap wapper_pagination p-[10px] pl-2 mt-auto",
-              classNamePaginationTable
-            ),
-            children: [
-              !hiddenPaginationText && page && pageSize && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-sm", children: paginationText ? paginationText({ ...toInPagination, total }) : total ? `${t("display")} ${toInPagination == null ? void 0 : toInPagination.from} ${t("to")} ${toInPagination == null ? void 0 : toInPagination.to} ${t("in")} ${total} ${t("data")}` : "..." }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                ComboboxCustom_default,
-                {
-                  options: listPageSize,
-                  value: pageSize == null ? void 0 : pageSize.toString(),
-                  onChange: (value) => {
-                    if (setConfigPagination) {
-                      setConfigPagination((prev) => ({ ...prev, pageSize: Number(value), page: 1 }));
+            ref: tableRef,
+            rows: sortedRows,
+            columns: newColumns,
+            selectedRows,
+            rowKeyGetter: isSelectRow ? customRowKeyGetter : void 0,
+            sortColumns,
+            onSortColumnsChange: setSortColumns,
+            renderers: {
+              renderSortStatus: RenderSortStatus_default,
+              renderCheckbox({ onChange: onChange2, checked, ...props }) {
+                return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_core.Checkbox,
+                  {
+                    ...props,
+                    checked: !!checked,
+                    onChange: (e) => {
+                      const nativeEvent = e.nativeEvent;
+                      const shiftKey = nativeEvent instanceof MouseEvent ? nativeEvent.shiftKey : false;
+                      onChange2(e.target.checked, shiftKey);
                     }
                   }
-                }
-              ),
-              !!maxPage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                import_core2.Pagination,
-                {
-                  color: "indigo",
-                  total: maxPage,
-                  size: "sm",
-                  value: page,
-                  onChange: handlePageChange
-                }
-              )
-            ]
+                );
+              }
+            },
+            ...spread
           }
         ),
-        (fetching || isLoading) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute inset-0 bg-gray-50/45 flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border-[2px] rounded-full border-gray-200 shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LoadingIcon, { isSpin: true }) }) })
+        (fetching || isLoading) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoadingIcon, { isSpin: true }) })
       ]
     }
   );
 };
-var ReactTableGridCustom = (0, import_react3.memo)(
+var ReactTableGridCustom = (0, import_react2.memo)(
   ReactTableGridCustomInner
 );
+
+// src/component/TableStyleContextWapper.tsx
+var import_react7 = require("react");
+
+// src/component/ui/ContextMenu/ContextMenu.tsx
+var import_react3 = require("react");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ContextMenu = ({ selector, children, zIndex = 40 }) => {
+  const menuRef = (0, import_react3.useRef)(null);
+  const closeMenu = (0, import_react3.useCallback)(() => {
+    const contextMenuElem = menuRef.current;
+    const elementParent = document.querySelector(selector);
+    if (contextMenuElem && contextMenuElem.classList.contains("shadow-menu")) {
+      contextMenuElem.classList.remove("shadow-menu");
+      contextMenuElem.style.opacity = "0";
+      contextMenuElem.style.visibility = "hidden";
+    }
+    if (elementParent) {
+      elementParent.style.removeProperty("overflow");
+    }
+  }, [menuRef.current]);
+  (0, import_react3.useEffect)(() => {
+    const elementParent = document.querySelector(selector);
+    if (elementParent) {
+      const clickMenu = (e) => {
+        const contextMenuElem = menuRef.current;
+        if (contextMenuElem) {
+          contextMenuElem.style.opacity = "1";
+          contextMenuElem.style.visibility = "visible";
+          const { width: widthContextMenu, height: heightContextMenu } = contextMenuElem.getBoundingClientRect();
+          elementParent.style.overflow = "hidden";
+          const maxWidth = window.innerWidth;
+          const maxHeight = window.innerHeight;
+          const remainingLeft = maxWidth - e.clientX;
+          const isLeft = remainingLeft >= widthContextMenu;
+          const showTop = heightContextMenu + e.clientY <= maxHeight;
+          const showBottom = e.clientY - heightContextMenu >= 0;
+          const isCenter = !(showTop || showBottom);
+          isCenter;
+          const styleOrigin = {
+            x: "left",
+            y: "top"
+          };
+          if (isLeft) {
+            contextMenuElem.style.left = `${e.clientX}px`;
+            styleOrigin.x = "left";
+          } else {
+            contextMenuElem.style.left = `${e.clientX - widthContextMenu}px`;
+            styleOrigin.x = "right";
+          }
+          if (showTop) {
+            contextMenuElem.style.top = `${e.clientY}px`;
+            styleOrigin.y = "top";
+          } else if (showBottom) {
+            contextMenuElem.style.top = `${e.clientY - heightContextMenu}px`;
+            styleOrigin.y = "bottom";
+          } else {
+            const HalfHeight = heightContextMenu / 2;
+            const calculatorTop = HalfHeight + e.clientY;
+            const showTopCenter = calculatorTop <= maxHeight;
+            const calculatorBottom = e.clientY - HalfHeight;
+            const showBottom2 = calculatorBottom >= 0;
+            let topNew = calculatorBottom;
+            if (!showBottom2 && showTopCenter) {
+              topNew = topNew - calculatorBottom;
+            } else if (!showTopCenter && showBottom2) {
+              const ts = calculatorTop - maxHeight;
+              topNew = topNew - ts;
+            }
+            contextMenuElem.style.top = `${topNew}px`;
+            styleOrigin.y = "center";
+          }
+          contextMenuElem.style.transformOrigin = `${styleOrigin.y} ${styleOrigin.x}`;
+          if (!contextMenuElem.classList.contains("shadow-menu")) {
+            contextMenuElem.classList.add("shadow-menu");
+          }
+        }
+      };
+      elementParent.addEventListener("contextmenu", clickMenu);
+      window.addEventListener("click", closeMenu);
+      return () => {
+        elementParent.removeEventListener("contextmenu", clickMenu);
+        window.removeEventListener("click", closeMenu);
+      };
+    }
+    return () => {
+    };
+  }, []);
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: "fixed z-40 w-fit",
+        ref: menuRef,
+        style: { opacity: 0, visibility: "hidden", zIndex },
+        children
+      }
+    ),
+    document.body
+  );
+};
+var ContextMenu_default = ContextMenu;
+
+// src/component/ui/ContextMenu/RenderContextMenu.tsx
+var import_react6 = require("react");
+
+// src/component/ui/ContextMenu/ContextMenuItem.tsx
+var import_react_i18next3 = require("react-i18next");
+var import_md = require("react-icons/md");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ContextMenuItem = ({
+  currentValue,
+  expandValue,
+  valueClickItem,
+  show,
+  isArrow
+}) => {
+  const { t } = (0, import_react_i18next3.useTranslation)();
+  const Icon = currentValue.Icon;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: `cursor-pointer p-2 flex items-center space-x-2 relative ${show ? "bg-[#555] text-white" : "hover:bg-[#555] hover:text-white"}`,
+      onClick: () => {
+        var _a;
+        expandValue && valueClickItem && (currentValue == null ? void 0 : currentValue.onClick) && ((_a = currentValue == null ? void 0 : currentValue.onClick) == null ? void 0 : _a.call(currentValue, valueClickItem, expandValue));
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: 20 }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-sm flex-1", children: t(`${currentValue.action}`) }),
+        isArrow && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_md.MdKeyboardArrowRight, { size: 20 })
+      ]
+    }
+  );
+};
+var ContextMenuItem_default = ContextMenuItem;
+
+// src/component/ui/ContextMenu/DropdownContextChild.tsx
+var import_react4 = __toESM(require("@tippyjs/react"));
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var DropdownContextChild = ({ button, children, ...rest }) => {
+  const id = (0, import_react5.useId)();
+  const instanceRef = (0, import_react5.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react4.default,
+    {
+      theme: "drop-down",
+      className: "!bg-transparent !text-inherit !border-r-0 [&>*]:!p-0",
+      appendTo: document.body,
+      arrow: false,
+      placement: "auto",
+      interactive: true,
+      allowHTML: true,
+      content: children,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "div",
+        {
+          id: `div-${id}`,
+          onClick: () => {
+            var _a;
+            (_a = instanceRef == null ? void 0 : instanceRef.current) == null ? void 0 : _a.show();
+          },
+          children: button
+        }
+      )
+    }
+  );
+};
+var DropdownContextChild_default = DropdownContextChild;
+
+// src/component/ui/ContextMenu/RenderContextMenu.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var RenderContextMenu = ({
+  renderData,
+  valueClickItem,
+  expandValue = {}
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-white shadow-submenu p-1 min-w-[250px] border", children: renderData == null ? void 0 : renderData.map((menuAction, index) => {
+    const [isShow, setIsShow] = (0, import_react6.useState)(false);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react6.Fragment, { children: [
+      !(menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        ContextMenuItem_default,
+        {
+          currentValue: menuAction,
+          expandValue,
+          valueClickItem
+        }
+      ),
+      (menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        DropdownContextChild_default,
+        {
+          appendTo: "parent",
+          placement: "right",
+          offset: [0, 5],
+          onShow: () => setIsShow(true),
+          onHide: () => setIsShow(false),
+          button: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            ContextMenuItem_default,
+            {
+              currentValue: menuAction,
+              expandValue,
+              valueClickItem,
+              show: isShow,
+              isArrow: true
+            }
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "dropdown-context-child absolute -top-[20px] -left-1", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            RenderContextMenu,
+            {
+              renderData: menuAction == null ? void 0 : menuAction.children,
+              expandValue,
+              valueClickItem
+            }
+          ) })
+        }
+      )
+    ] }, index);
+  }) });
+};
+var RenderContextMenu_default = RenderContextMenu;
+
+// src/component/TableStyleContextWapper.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var TableStyleContextMenuWapper = ({
+  children,
+  contextMenuProps,
+  clsTablecustom,
+  renderContext
+}) => {
+  const idWapper = (0, import_react7.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      id: `wapper_menu_context-${idWapper}`,
+      className: `border border-[#dedede] rounded-xl overflow-hidden bg-white flex-1 h-full flex flex-col min-h-[360px] ${clsTablecustom != null ? clsTablecustom : ""}`,
+      children: [
+        (renderContext == null ? void 0 : renderContext.renderData) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          ContextMenu_default,
+          {
+            selector: `[id="wapper_menu_context-${idWapper}"] .rdg`,
+            ...contextMenuProps,
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RenderContextMenu_default, { ...renderContext })
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+var TableStyleContextWapper = (0, import_react7.memo)(
+  TableStyleContextMenuWapper
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ReactTableGridCustom
+  ReactTableGridCustom,
+  TableStyleContextWapper
 });