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

package/dist/index.mjs

@@ -1,5 +1,20 @@
 // src/ReactTableGridCustom.tsx
-import { Checkbox, Pagination } from "@mantine/core";
+import { Checkbox } from "@mantine/core";
+import { get, orderBy } from "lodash";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo as useMemo2,
+  useRef,
+  useState
+} from "react";
+import {
+  DataGrid,
+  SelectColumn
+} from "react-data-grid";
+import "react-data-grid/lib/styles.css";
+import { useTranslation as useTranslation2 } from "react-i18next";
 
 // src/helpers/table.ts
 var calculatorTotalPage = ({ total = 0, pageSize = 0 }) => {
@@ -27,65 +42,20 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-// src/ReactTableGridCustom.tsx
-import { get, orderBy } from "lodash";
-import { memo, useCallback, useEffect, useMemo as useMemo3, useRef, useState } from "react";
-import { DataGrid, SelectColumn } from "react-data-grid";
-import "react-data-grid/lib/styles.css";
-import { useTranslation as useTranslation2 } from "react-i18next";
-
-// src/component/ComboboxCustom.tsx
-import { Combobox, Input, InputBase, useCombobox } from "@mantine/core";
+// src/hooks/useTranslationTable.ts
 import { useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var ComboboxCustom = ({ options, onChange, value }) => {
-  const combobox = useCombobox({
-    onDropdownClose: () => combobox.resetSelectedOption()
-  });
-  const newOptions = useMemo(() => {
-    return (options != null ? options : []).map((item) => /* @__PURE__ */ jsx(
-      Combobox.Option,
-      {
-        className: "page_size-table",
-        value: item,
-        disabled: item === value,
-        children: item
-      },
-      item
-    ));
-  }, [options, value]);
-  return /* @__PURE__ */ jsxs(
-    Combobox,
-    {
-      size: "sm",
-      store: combobox,
-      onOptionSubmit: (val) => {
-        onChange && onChange(val);
-        combobox.closeDropdown();
-      },
-      children: [
-        /* @__PURE__ */ jsx(Combobox.Target, { children: /* @__PURE__ */ jsx(
-          InputBase,
-          {
-            component: "button",
-            type: "button",
-            pointer: true,
-            rightSectionPointerEvents: "none",
-            onClick: () => combobox.toggleDropdown(),
-            className: "w-[70px]",
-            classNames: { input: "custom_input_table" },
-            children: value || /* @__PURE__ */ jsx(Input.Placeholder, { children: "Pick value" })
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Combobox.Dropdown, { className: "w-[70px]", children: /* @__PURE__ */ jsx(Combobox.Options, { children: newOptions }) })
-      ]
-    }
-  );
+import { useTranslation } from "react-i18next";
+var useTranslationTable = (column) => {
+  const { i18n, t } = useTranslation();
+  const columnTranslation = 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
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var LoadingIcon = ({
   isSpin = false,
   h = 30,
@@ -93,7 +63,7 @@ var LoadingIcon = ({
   size = 30,
   className
 }) => {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "svg",
     {
       className: `${isSpin ? "animate-spin" : ""} ${className != null ? className : ""}`,
@@ -104,7 +74,7 @@ var LoadingIcon = ({
       height: size || h,
       fill: "currentColor",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx2("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__ */ 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" })
     }
   );
 };
@@ -114,7 +84,7 @@ var ArrowIcon = ({
   size,
   className
 }) => {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "svg",
     {
       className,
@@ -125,7 +95,7 @@ var ArrowIcon = ({
       height: size != null ? size : h,
       width: size != null ? size : w,
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx(
         "path",
         {
           fillRule: "evenodd",
@@ -137,35 +107,23 @@ var ArrowIcon = ({
 };
 
 // src/component/RenderSortStatus.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var RenderSortStatus = ({ sortDirection, priority }) => {
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    sortDirection !== void 0 && /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    sortDirection !== void 0 && /* @__PURE__ */ jsx2(
       ArrowIcon,
       {
         className: cn(sortDirection === "DESC" && "-rotate-180", "transition-transform"),
         size: 20
       }
     ),
-    /* @__PURE__ */ jsx3("span", { children: priority })
+    /* @__PURE__ */ jsx2("span", { children: priority })
   ] });
 };
 var RenderSortStatus_default = RenderSortStatus;
 
-// src/hooks/useTranslationTable.ts
-import { useMemo as useMemo2 } from "react";
-import { useTranslation } from "react-i18next";
-var useTranslationTable = (column) => {
-  const { i18n, t } = useTranslation();
-  const columnTranslation = useMemo2(() => {
-    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
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var ReactTableGridCustomInner = ({
   classNamePaginationTable,
   classNameWapperTable,
@@ -188,192 +146,129 @@ var ReactTableGridCustomInner = ({
   ...spread
 }) => {
   const { t } = useTranslation2();
-  const [isLoading, setIsLoading] = useState(true);
   const tableRef = useRef(null);
+  const [isLoading, setIsLoading] = useState(true);
   const [containerWidth, setContainerWidth] = useState(0);
   const [sortColumns, setSortColumns] = useState([]);
   const isSelectRow = selectedRows !== void 0;
-  const maxPage = useMemo3(
-    () => !hiddenPagination ? calculatorTotalPage({
-      total,
-      pageSize
-    }) : 0,
+  const maxPage = useMemo2(
+    () => !hiddenPagination ? calculatorTotalPage({ total, pageSize }) : 0,
     [pageSize, total, hiddenPagination]
   );
-  const toInPagination = useMemo3(() => {
-    const initPage = {
-      from: 0,
-      to: 0
-    };
-    if (!hiddenPaginationText && pageSize && page) {
-      const from = STT(
-        {
-          page,
-          pageSize
-        },
-        0
-      );
+  const toInPagination = useMemo2(() => {
+    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);
-  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 = useMemo3(() => {
-    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 = useMemo2(() => {
+    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(SelectColumn);
+      cols.unshift(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 = useMemo3(() => {
-    return (row) => {
+    return cols;
+  }, [
+    columnTranslation,
+    containerWidth,
+    hiddenSTT,
+    isSelectRow,
+    page,
+    pageSize
+  ]);
+  const customRowKeyGetter = useCallback(
+    (row) => {
       if (typeof rowKeyGetter === "function") {
         return rowKeyGetter(row);
       }
-      return get(row, rowKeyGetter);
-    };
-  }, [rowKeyGetter]);
-  const handlePageChange = useCallback(
-    (page2) => {
-      if (onChange) {
-        onChange(page2);
-        return;
-      }
-      if (setConfigPagination) {
-        setConfigPagination((prev) => ({ ...prev, page: page2 }));
+      if (typeof rowKeyGetter === "string") {
+        return get(row, rowKeyGetter);
       }
+      throw new Error(
+        "rowKeyGetter must be a string or a function"
+      );
     },
-    [setConfigPagination, onChange]
+    [rowKeyGetter]
   );
-  const sortedRows = useMemo3(() => {
-    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 orderBy(data, columnKey, direction);
+  const sortedRows = useMemo2(() => {
+    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 orderBy(data, [iteratee], [order]);
   }, [data, sortColumns]);
   useEffect(() => {
-    if (page && page > maxPage && maxPage > 0) {
-      handlePageChange(1);
+    var _a;
+    setIsLoading(false);
+    if ((_a = tableRef.current) == null ? void 0 : _a.element) {
+      setContainerWidth(tableRef.current.element.offsetWidth);
     }
-  }, [page, maxPage, handlePageChange]);
-  return /* @__PURE__ */ jsxs3(
+  }, []);
+  return /* @__PURE__ */ jsxs2(
     "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__ */ jsxs3("div", { className: "relative wapper_table_empty wrapperDatagrid flex flex-col flex-1", children: [
-          /* @__PURE__ */ jsx4(
-            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__ */ jsx4(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 = get(row, column.key);
-                  return [null, void 0, ""].includes(value) ? "-" : value;
-                }
-              },
-              sortColumns,
-              onSortColumnsChange: setSortColumns,
-              ...spread
-            }
-          ),
-          total === 0 && TableLogo && /* @__PURE__ */ jsx4("div", { className: "no_result absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 select-none", children: /* @__PURE__ */ jsx4("div", { className: "flex flex-col justify-center", children: /* @__PURE__ */ jsx4("img", { src: TableLogo, alt: "", className: "size-32" }) }) })
-        ] }),
-        !hiddenPagination && /* @__PURE__ */ jsxs3(
-          "div",
+        /* @__PURE__ */ jsx3(
+          DataGrid,
           {
-            className: cn(
-              "flex justify-between items-center flex-wrap wapper_pagination p-[10px] pl-2 mt-auto",
-              classNamePaginationTable
-            ),
-            children: [
-              !hiddenPaginationText && page && pageSize && /* @__PURE__ */ jsx4("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__ */ jsx4(
-                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__ */ jsx3(
+                  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__ */ jsx4(
-                Pagination,
-                {
-                  color: "indigo",
-                  total: maxPage,
-                  size: "sm",
-                  value: page,
-                  onChange: handlePageChange
-                }
-              )
-            ]
+                );
+              }
+            },
+            ...spread
           }
         ),
-        (fetching || isLoading) && /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 bg-gray-50/45 flex justify-center items-center", children: /* @__PURE__ */ jsx4("div", { className: "border-[2px] rounded-full border-gray-200 shadow-sm", children: /* @__PURE__ */ jsx4(LoadingIcon, { isSpin: true }) }) })
+        (fetching || isLoading) && /* @__PURE__ */ jsx3("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx3(LoadingIcon, { isSpin: true }) })
       ]
     }
   );
@@ -381,6 +276,262 @@ var ReactTableGridCustomInner = ({
 var ReactTableGridCustom = memo(
   ReactTableGridCustomInner
 );
+
+// src/component/TableStyleContextWapper.tsx
+import { memo as memo2, useId as useId2 } from "react";
+
+// src/component/ui/ContextMenu/ContextMenu.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ContextMenu = ({ selector, children, zIndex = 40 }) => {
+  const menuRef = useRef2(null);
+  const closeMenu = useCallback2(() => {
+    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]);
+  useEffect2(() => {
+    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 createPortal(
+    /* @__PURE__ */ jsx4(
+      "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
+import { Fragment as Fragment2, useState as useState2 } from "react";
+
+// src/component/ui/ContextMenu/ContextMenuItem.tsx
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { MdKeyboardArrowRight } from "react-icons/md";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var ContextMenuItem = ({
+  currentValue,
+  expandValue,
+  valueClickItem,
+  show,
+  isArrow
+}) => {
+  const { t } = useTranslation3();
+  const Icon = currentValue.Icon;
+  return /* @__PURE__ */ jsxs3(
+    "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__ */ jsx5(Icon, { size: 20 }),
+        /* @__PURE__ */ jsx5("span", { className: "text-sm flex-1", children: t(`${currentValue.action}`) }),
+        isArrow && /* @__PURE__ */ jsx5(MdKeyboardArrowRight, { size: 20 })
+      ]
+    }
+  );
+};
+var ContextMenuItem_default = ContextMenuItem;
+
+// src/component/ui/ContextMenu/DropdownContextChild.tsx
+import Tippy from "@tippyjs/react";
+import { useId, useRef as useRef3 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var DropdownContextChild = ({ button, children, ...rest }) => {
+  const id = useId();
+  const instanceRef = useRef3(null);
+  return /* @__PURE__ */ jsx6(
+    Tippy,
+    {
+      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__ */ jsx6(
+        "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
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var RenderContextMenu = ({
+  renderData,
+  valueClickItem,
+  expandValue = {}
+}) => {
+  return /* @__PURE__ */ jsx7("div", { className: "bg-white shadow-submenu p-1 min-w-[250px] border", children: renderData == null ? void 0 : renderData.map((menuAction, index) => {
+    const [isShow, setIsShow] = useState2(false);
+    return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      !(menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ jsx7(
+        ContextMenuItem_default,
+        {
+          currentValue: menuAction,
+          expandValue,
+          valueClickItem
+        }
+      ),
+      (menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ jsx7(
+        DropdownContextChild_default,
+        {
+          appendTo: "parent",
+          placement: "right",
+          offset: [0, 5],
+          onShow: () => setIsShow(true),
+          onHide: () => setIsShow(false),
+          button: /* @__PURE__ */ jsx7(
+            ContextMenuItem_default,
+            {
+              currentValue: menuAction,
+              expandValue,
+              valueClickItem,
+              show: isShow,
+              isArrow: true
+            }
+          ),
+          children: /* @__PURE__ */ jsx7("div", { className: "dropdown-context-child absolute -top-[20px] -left-1", children: /* @__PURE__ */ jsx7(
+            RenderContextMenu,
+            {
+              renderData: menuAction == null ? void 0 : menuAction.children,
+              expandValue,
+              valueClickItem
+            }
+          ) })
+        }
+      )
+    ] }, index);
+  }) });
+};
+var RenderContextMenu_default = RenderContextMenu;
+
+// src/component/TableStyleContextWapper.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var TableStyleContextMenuWapper = ({
+  children,
+  contextMenuProps,
+  clsTablecustom,
+  renderContext
+}) => {
+  const idWapper = useId2();
+  return /* @__PURE__ */ jsxs5(
+    "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__ */ jsx8(
+          ContextMenu_default,
+          {
+            selector: `[id="wapper_menu_context-${idWapper}"] .rdg`,
+            ...contextMenuProps,
+            children: /* @__PURE__ */ jsx8(RenderContextMenu_default, { ...renderContext })
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+var TableStyleContextWapper = memo2(
+  TableStyleContextMenuWapper
+);
 export {
-  ReactTableGridCustom
+  ReactTableGridCustom,
+  TableStyleContextWapper
 };