@mkt-loitd/react-table-grid-custom 1.2.3 → 1.2.5

package/dist/index.css

@@ -55,100 +55,3 @@ div[aria-sort] > span {
   position: sticky !important;
   right: 0 !important;
 }
-
-/* src/component/ui/ContextMenu/ContextMenu.css */
-.shadow-menu {
-  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-  animation: open 0.3s;
-  transform-origin: top left;
-}
-.shadow-submenu {
-  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-}
-@keyframes open {
-  from {
-    transform: scale(0);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
-/* node_modules/tippy.js/dist/tippy.css */
-.tippy-box[data-animation=fade][data-state=hidden] {
-  opacity: 0;
-}
-[data-tippy-root] {
-  max-width: calc(100vw - 10px);
-}
-.tippy-box {
-  position: relative;
-  background-color: #333;
-  color: #fff;
-  border-radius: 4px;
-  font-size: 14px;
-  line-height: 1.4;
-  white-space: normal;
-  outline: 0;
-  transition-property:
-    transform,
-    visibility,
-    opacity;
-}
-.tippy-box[data-placement^=top] > .tippy-arrow {
-  bottom: 0;
-}
-.tippy-box[data-placement^=top] > .tippy-arrow:before {
-  bottom: -7px;
-  left: 0;
-  border-width: 8px 8px 0;
-  border-top-color: initial;
-  transform-origin: center top;
-}
-.tippy-box[data-placement^=bottom] > .tippy-arrow {
-  top: 0;
-}
-.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
-  top: -7px;
-  left: 0;
-  border-width: 0 8px 8px;
-  border-bottom-color: initial;
-  transform-origin: center bottom;
-}
-.tippy-box[data-placement^=left] > .tippy-arrow {
-  right: 0;
-}
-.tippy-box[data-placement^=left] > .tippy-arrow:before {
-  border-width: 8px 0 8px 8px;
-  border-left-color: initial;
-  right: -7px;
-  transform-origin: center left;
-}
-.tippy-box[data-placement^=right] > .tippy-arrow {
-  left: 0;
-}
-.tippy-box[data-placement^=right] > .tippy-arrow:before {
-  left: -7px;
-  border-width: 8px 8px 8px 0;
-  border-right-color: initial;
-  transform-origin: center right;
-}
-.tippy-box[data-inertia][data-state=visible] {
-  transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
-}
-.tippy-arrow {
-  width: 16px;
-  height: 16px;
-  color: #333;
-}
-.tippy-arrow:before {
-  content: "";
-  position: absolute;
-  border-color: transparent;
-  border-style: solid;
-}
-.tippy-content {
-  position: relative;
-  padding: 5px 9px;
-  z-index: 1;
-}

package/dist/index.d.mts

@@ -1,10 +1,7 @@
-import * as react from 'react';
 import { Dispatch, SetStateAction, Key, ReactNode, JSX, MutableRefObject } from 'react';
 import { ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
 export { Column, ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
 import { PaginationRootProps } from '@mantine/core';
-import { TFunction } from 'i18next';
-import { UseMutateFunction } from '@tanstack/react-query';
 
 type TColumnsTable<T = unknown, SR = unknown> = readonly ColumnOrColumnGroup<NoInfer<T>, NoInfer<SR>>[];
 interface IPaginationParams$1 {
@@ -14,7 +11,7 @@ interface IPaginationParams$1 {
 interface IObjectDynamic {
     [key: string]: any;
 }
-interface ISetConfigPagination$1 extends IPaginationParams$1, IObjectDynamic {
+interface ISetConfigPagination extends IPaginationParams$1, IObjectDynamic {
 }
 interface useShowHideColumnParameter<T, SR = unknown> {
     nameLocal?: string;
@@ -32,6 +29,9 @@ interface useShowHideColumnReturn<T, SR> {
     handleFindLocation: (filterColumns: TColumnsTable<T, SR>, locationColumns?: string[]) => TColumnsTable<T, SR>;
     handleChangeLocation?: (arr: string[]) => void;
 }
+interface ICalculatorTotalPage extends IPaginationParams$1 {
+    total?: number;
+}
 
 declare const useShowHideColumn: <T, SR = unknown>({ nameLocal, columns, ignoreColumns }: useShowHideColumnParameter<T, SR>) => useShowHideColumnReturn<T, SR>;
 
@@ -49,7 +49,7 @@ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key>
     data?: T[];
     /** Nếu hàm onChange nên dùng useCallback */
     onChange?: Pick<PaginationRootProps, 'onChange'>['onChange'];
-    setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination$1>>;
+    setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination>>;
     /** Nếu hàm rowKeyGetter nên dùng useCallback*/
     rowKeyGetter?: string | Maybe<(row: NoInfer<T>) => K>;
     hiddenPaginationText?: boolean;
@@ -58,9 +58,10 @@ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key>
     listPageSize?: string[];
     fetching?: boolean;
     TableLogo?: string;
+    [key: string]: any;
 }
 interface refTablePaginationClient extends Required<IPaginationParams> {
-    setConfigSearch: Dispatch<SetStateAction<ISetConfigPagination$1>>;
+    setConfigSearch: Dispatch<SetStateAction<ISetConfigPagination>>;
     resetPagition: (conditional?: boolean) => void;
 }
 
@@ -75,157 +76,10 @@ interface ReactTableGridCustomPaginationClientProps<T = unknown, SR = unknown, K
 }
 declare const ReactTableGridCustomPaginationClient: ReactTableGridCustomPaginationClientComponent;
 
-interface ContextMenuProps {
-    selector: string;
-    children?: ReactNode;
-    zIndex?: number;
-}
-
-interface IMainResponse<T = any> {
-    success?: boolean;
-    status?: 'success' | 'error' | 'warning';
-    data?: T;
-    payload?: {
-        data?: T;
-        [key: string]: any;
-    };
-    message?: {
-        key: string;
-        [key: string]: any;
-    };
-    error?: any;
-}
-interface IFieldUpdateAndCheck<T = any, F = any, V = any> {
-    id?: string | number;
-    field?: F;
-    value?: V;
-    data?: T;
-    [key: string]: any;
-}
-interface Account {
-    id?: string | number;
-    username?: string;
-    password?: string;
-    email?: string;
-    status?: string;
-    [key: string]: any;
-}
-interface Post {
-    id?: string | number;
-    title?: string;
-    content?: string;
-    createdAt?: number;
-    [key: string]: any;
-}
-interface AppSettings {
-    [key: string]: any;
-}
-interface ISetConfigPagination {
-    page?: number;
-    limit?: number;
-    total?: number;
-    [key: string]: any;
-}
-type ITaskName = string;
-
-interface IActionUiUtilBy {
-    action?: string;
-    [key: string]: any;
-}
-interface IPayloadStartAction {
-    action?: string;
-    [key: string]: any;
-}
-
-interface Proxy {
-    id?: string;
-    host?: string;
-    port?: number;
-    username?: string;
-    password?: string;
-    protocol?: string;
-    provider?: string;
-    [key: string]: any;
-}
-
-interface IPayloadRemoveProxy {
-    ids: string[];
-}
-interface IPayloadService {
-    updateByClipboard?: UseMutateFunction<IMainResponse<string[]>, Error, IFieldUpdateAndCheck<Account, string[], keyof Account>, unknown>;
-    removeFieldBy?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Account, Array<keyof Account>, string[]>, unknown>;
-    copyByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Account, string, string[]>, unknown>;
-    actionBy?: UseMutateFunction<IMainResponse<string[]>, Error, IFieldUpdateAndCheck<Account, IActionUiUtilBy, string[]>, unknown>;
-    updateAccountByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Account, Partial<Account>, string[]>, unknown>;
-    deleteProxy?: UseMutateFunction<IMainResponse<boolean>, Error, IPayloadRemoveProxy, unknown>;
-    removePostByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Post, undefined, string[]>, unknown>;
-    startAction?: UseMutateFunction<IMainResponse<boolean>, Error, IPayloadStartAction, unknown>;
-    updateSettings?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<AppSettings, object, boolean>, unknown>;
-    useCopyProxyByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Proxy, string, string[]>[], unknown>;
-    exportLinkSuccess?: UseMutateFunction<IMainResponse<boolean>, Error, ITaskName, unknown>;
-    setAction?: Dispatch<SetStateAction<ITaskName>>;
-}
-
-type IDispatchState<T> = Dispatch<SetStateAction<T>>;
-
-interface IExpandValue extends IPayloadService {
-    t?: TFunction<any, any> | undefined | any;
-    setConfigSearch?: IDispatchState<ISetConfigPagination>;
-    setSelectedRecords?: Dispatch<ReadonlySet<string>>;
-    setIsShowEdit?: Dispatch<SetStateAction<boolean>>;
-    setIsOpenEditContent?: Dispatch<SetStateAction<boolean>>;
-    setIsCopy?: Dispatch<SetStateAction<boolean>>;
-    setIsChangeCate?: Dispatch<SetStateAction<boolean>>;
-    setIsBackup?: Dispatch<SetStateAction<boolean>>;
-}
-type configContextMenuType = {
-    Icon: (prop?: any) => ReactNode;
-    action: string;
-    onClick?: (value: string[], expandValue: IExpandValue) => void;
-    children?: configContextMenuType[];
-};
-interface RenderContextMenuProps {
-    renderData?: configContextMenuType[];
-    valueClickItem?: any;
-    expandValue?: IExpandValue;
-    classWapper?: boolean;
-}
-
-interface TableStyleWapperProps {
-    children?: ReactNode;
-    contextMenuProps?: Omit<ContextMenuProps, 'selector' | 'children'> & {
-        selector?: string;
-    };
-    renderContext?: RenderContextMenuProps;
-    clsTablecustom?: string;
-}
-declare const TableStyleContextWapper: react.NamedExoticComponent<TableStyleWapperProps>;
-
 interface IPaginationParams {
     pageSize?: number;
     page?: number;
 }
 type Maybe<T> = T | undefined | null;
-interface ICalculatorTotalPage extends IPaginationParams {
-    total?: number;
-}
-interface ISTTParams extends IPaginationParams {
-}
-interface UseShowHideColumnParameter<T, SR = unknown> {
-    nameLocal?: string;
-    /** nếu đầu vào là columns: Functions() thì nên dùng useMemo thì sẽ tối ưu hơn */
-    columns: TColumnsTable<T, SR>;
-    ignoreColumns?: string[];
-}
-interface UseShowHideColumnReturn<T, SR> {
-    hiddenColumns: string[];
-    setHiddenColumns: Dispatch<SetStateAction<string[]>>;
-    columnsTable: TColumnsTable<T, SR>;
-    changeHiddenColumn: (key: string | string[]) => void;
-    newShowhideColumns: TColumnsTable<T, SR>;
-    locationColumns: string[];
-    handleFindLocation: (filterColumns: TColumnsTable<T, SR>, locationColumns?: string[]) => TColumnsTable<T, SR>;
-    handleChangeLocation?: (arr: string[]) => void;
-}
 
-export { type ICalculatorTotalPage, type IPaginationParams, type IReactTableGridCustom, type ISTTParams, type Maybe, ReactTableGridCustom, ReactTableGridCustomPaginationClient, type ReactTableGridCustomPaginationClientComponent, type ReactTableGridCustomPaginationClientProps, type TColumnsTable, TableStyleContextWapper, type TableStyleWapperProps, type UseShowHideColumnParameter, type UseShowHideColumnReturn, useShowHideColumn };
+export { type IPaginationParams, type IReactTableGridCustom, type Maybe, ReactTableGridCustom, ReactTableGridCustomPaginationClient, type TColumnsTable, useShowHideColumn };

package/dist/index.d.ts

@@ -1,10 +1,7 @@
-import * as react from 'react';
 import { Dispatch, SetStateAction, Key, ReactNode, JSX, MutableRefObject } from 'react';
 import { ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
 export { Column, ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
 import { PaginationRootProps } from '@mantine/core';
-import { TFunction } from 'i18next';
-import { UseMutateFunction } from '@tanstack/react-query';
 
 type TColumnsTable<T = unknown, SR = unknown> = readonly ColumnOrColumnGroup<NoInfer<T>, NoInfer<SR>>[];
 interface IPaginationParams$1 {
@@ -14,7 +11,7 @@ interface IPaginationParams$1 {
 interface IObjectDynamic {
     [key: string]: any;
 }
-interface ISetConfigPagination$1 extends IPaginationParams$1, IObjectDynamic {
+interface ISetConfigPagination extends IPaginationParams$1, IObjectDynamic {
 }
 interface useShowHideColumnParameter<T, SR = unknown> {
     nameLocal?: string;
@@ -32,6 +29,9 @@ interface useShowHideColumnReturn<T, SR> {
     handleFindLocation: (filterColumns: TColumnsTable<T, SR>, locationColumns?: string[]) => TColumnsTable<T, SR>;
     handleChangeLocation?: (arr: string[]) => void;
 }
+interface ICalculatorTotalPage extends IPaginationParams$1 {
+    total?: number;
+}
 
 declare const useShowHideColumn: <T, SR = unknown>({ nameLocal, columns, ignoreColumns }: useShowHideColumnParameter<T, SR>) => useShowHideColumnReturn<T, SR>;
 
@@ -49,7 +49,7 @@ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key>
     data?: T[];
     /** Nếu hàm onChange nên dùng useCallback */
     onChange?: Pick<PaginationRootProps, 'onChange'>['onChange'];
-    setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination$1>>;
+    setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination>>;
     /** Nếu hàm rowKeyGetter nên dùng useCallback*/
     rowKeyGetter?: string | Maybe<(row: NoInfer<T>) => K>;
     hiddenPaginationText?: boolean;
@@ -58,9 +58,10 @@ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key>
     listPageSize?: string[];
     fetching?: boolean;
     TableLogo?: string;
+    [key: string]: any;
 }
 interface refTablePaginationClient extends Required<IPaginationParams> {
-    setConfigSearch: Dispatch<SetStateAction<ISetConfigPagination$1>>;
+    setConfigSearch: Dispatch<SetStateAction<ISetConfigPagination>>;
     resetPagition: (conditional?: boolean) => void;
 }
 
@@ -75,157 +76,10 @@ interface ReactTableGridCustomPaginationClientProps<T = unknown, SR = unknown, K
 }
 declare const ReactTableGridCustomPaginationClient: ReactTableGridCustomPaginationClientComponent;
 
-interface ContextMenuProps {
-    selector: string;
-    children?: ReactNode;
-    zIndex?: number;
-}
-
-interface IMainResponse<T = any> {
-    success?: boolean;
-    status?: 'success' | 'error' | 'warning';
-    data?: T;
-    payload?: {
-        data?: T;
-        [key: string]: any;
-    };
-    message?: {
-        key: string;
-        [key: string]: any;
-    };
-    error?: any;
-}
-interface IFieldUpdateAndCheck<T = any, F = any, V = any> {
-    id?: string | number;
-    field?: F;
-    value?: V;
-    data?: T;
-    [key: string]: any;
-}
-interface Account {
-    id?: string | number;
-    username?: string;
-    password?: string;
-    email?: string;
-    status?: string;
-    [key: string]: any;
-}
-interface Post {
-    id?: string | number;
-    title?: string;
-    content?: string;
-    createdAt?: number;
-    [key: string]: any;
-}
-interface AppSettings {
-    [key: string]: any;
-}
-interface ISetConfigPagination {
-    page?: number;
-    limit?: number;
-    total?: number;
-    [key: string]: any;
-}
-type ITaskName = string;
-
-interface IActionUiUtilBy {
-    action?: string;
-    [key: string]: any;
-}
-interface IPayloadStartAction {
-    action?: string;
-    [key: string]: any;
-}
-
-interface Proxy {
-    id?: string;
-    host?: string;
-    port?: number;
-    username?: string;
-    password?: string;
-    protocol?: string;
-    provider?: string;
-    [key: string]: any;
-}
-
-interface IPayloadRemoveProxy {
-    ids: string[];
-}
-interface IPayloadService {
-    updateByClipboard?: UseMutateFunction<IMainResponse<string[]>, Error, IFieldUpdateAndCheck<Account, string[], keyof Account>, unknown>;
-    removeFieldBy?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Account, Array<keyof Account>, string[]>, unknown>;
-    copyByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Account, string, string[]>, unknown>;
-    actionBy?: UseMutateFunction<IMainResponse<string[]>, Error, IFieldUpdateAndCheck<Account, IActionUiUtilBy, string[]>, unknown>;
-    updateAccountByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Account, Partial<Account>, string[]>, unknown>;
-    deleteProxy?: UseMutateFunction<IMainResponse<boolean>, Error, IPayloadRemoveProxy, unknown>;
-    removePostByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Post, undefined, string[]>, unknown>;
-    startAction?: UseMutateFunction<IMainResponse<boolean>, Error, IPayloadStartAction, unknown>;
-    updateSettings?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<AppSettings, object, boolean>, unknown>;
-    useCopyProxyByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Proxy, string, string[]>[], unknown>;
-    exportLinkSuccess?: UseMutateFunction<IMainResponse<boolean>, Error, ITaskName, unknown>;
-    setAction?: Dispatch<SetStateAction<ITaskName>>;
-}
-
-type IDispatchState<T> = Dispatch<SetStateAction<T>>;
-
-interface IExpandValue extends IPayloadService {
-    t?: TFunction<any, any> | undefined | any;
-    setConfigSearch?: IDispatchState<ISetConfigPagination>;
-    setSelectedRecords?: Dispatch<ReadonlySet<string>>;
-    setIsShowEdit?: Dispatch<SetStateAction<boolean>>;
-    setIsOpenEditContent?: Dispatch<SetStateAction<boolean>>;
-    setIsCopy?: Dispatch<SetStateAction<boolean>>;
-    setIsChangeCate?: Dispatch<SetStateAction<boolean>>;
-    setIsBackup?: Dispatch<SetStateAction<boolean>>;
-}
-type configContextMenuType = {
-    Icon: (prop?: any) => ReactNode;
-    action: string;
-    onClick?: (value: string[], expandValue: IExpandValue) => void;
-    children?: configContextMenuType[];
-};
-interface RenderContextMenuProps {
-    renderData?: configContextMenuType[];
-    valueClickItem?: any;
-    expandValue?: IExpandValue;
-    classWapper?: boolean;
-}
-
-interface TableStyleWapperProps {
-    children?: ReactNode;
-    contextMenuProps?: Omit<ContextMenuProps, 'selector' | 'children'> & {
-        selector?: string;
-    };
-    renderContext?: RenderContextMenuProps;
-    clsTablecustom?: string;
-}
-declare const TableStyleContextWapper: react.NamedExoticComponent<TableStyleWapperProps>;
-
 interface IPaginationParams {
     pageSize?: number;
     page?: number;
 }
 type Maybe<T> = T | undefined | null;
-interface ICalculatorTotalPage extends IPaginationParams {
-    total?: number;
-}
-interface ISTTParams extends IPaginationParams {
-}
-interface UseShowHideColumnParameter<T, SR = unknown> {
-    nameLocal?: string;
-    /** nếu đầu vào là columns: Functions() thì nên dùng useMemo thì sẽ tối ưu hơn */
-    columns: TColumnsTable<T, SR>;
-    ignoreColumns?: string[];
-}
-interface UseShowHideColumnReturn<T, SR> {
-    hiddenColumns: string[];
-    setHiddenColumns: Dispatch<SetStateAction<string[]>>;
-    columnsTable: TColumnsTable<T, SR>;
-    changeHiddenColumn: (key: string | string[]) => void;
-    newShowhideColumns: TColumnsTable<T, SR>;
-    locationColumns: string[];
-    handleFindLocation: (filterColumns: TColumnsTable<T, SR>, locationColumns?: string[]) => TColumnsTable<T, SR>;
-    handleChangeLocation?: (arr: string[]) => void;
-}
 
-export { type ICalculatorTotalPage, type IPaginationParams, type IReactTableGridCustom, type ISTTParams, type Maybe, ReactTableGridCustom, ReactTableGridCustomPaginationClient, type ReactTableGridCustomPaginationClientComponent, type ReactTableGridCustomPaginationClientProps, type TColumnsTable, TableStyleContextWapper, type TableStyleWapperProps, type UseShowHideColumnParameter, type UseShowHideColumnReturn, useShowHideColumn };
+export { type IPaginationParams, type IReactTableGridCustom, type Maybe, ReactTableGridCustom, ReactTableGridCustomPaginationClient, type TColumnsTable, useShowHideColumn };

package/dist/index.js

@@ -32,7 +32,6 @@ var index_exports = {};
 __export(index_exports, {
   ReactTableGridCustom: () => ReactTableGridCustom,
   ReactTableGridCustomPaginationClient: () => ReactTableGridCustomPaginationClient,
-  TableStyleContextWapper: () => TableStyleContextWapper,
   useShowHideColumn: () => useShowHideColumn
 });
 module.exports = __toCommonJS(index_exports);
@@ -517,7 +516,7 @@ var ReactTableGridCustomPaginationClientInner = ({
     ReactTableGridCustom,
     {
       data: newDataAccount,
-      total: data == null ? void 0 : data.length,
+      total: (data == null ? void 0 : data.length) || 0,
       page: configSearch == null ? void 0 : configSearch.page,
       pageSize: configSearch == null ? void 0 : configSearch.pageSize,
       setConfigPagination: setConfigSearch,
@@ -528,265 +527,9 @@ var ReactTableGridCustomPaginationClientInner = ({
 var ReactTableGridCustomPaginationClient = (0, import_react5.memo)(
   ReactTableGridCustomPaginationClientInner
 );
-
-// src/component/ui/Table/TableStyleContextWapper.tsx
-var import_react10 = require("react");
-
-// src/component/ui/ContextMenu/ContextMenu.tsx
-var import_react6 = require("react");
-var import_react_dom = require("react-dom");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var ContextMenu = ({ selector, children, zIndex = 40 }) => {
-  const menuRef = (0, import_react6.useRef)(null);
-  const closeMenu = (0, import_react6.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_react6.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_runtime5.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_react9 = 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_runtime6 = 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_runtime6.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_runtime6.jsx)(Icon, { size: 20 }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-sm flex-1", children: t(`${currentValue.action}`) }),
-        isArrow && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_md.MdKeyboardArrowRight, { size: 20 })
-      ]
-    }
-  );
-};
-var ContextMenuItem_default = ContextMenuItem;
-
-// src/component/ui/ContextMenu/DropdownContextChild.tsx
-var import_react7 = __toESM(require("@tippyjs/react"));
-var import_react8 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var DropdownContextChild = ({ button, children, ...rest }) => {
-  const id = (0, import_react8.useId)();
-  const instanceRef = (0, import_react8.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_react7.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_runtime7.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_runtime8 = require("react/jsx-runtime");
-var RenderContextMenu = ({
-  renderData,
-  valueClickItem,
-  expandValue = {}
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.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_react9.useState)(false);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react9.Fragment, { children: [
-      !(menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        ContextMenuItem_default,
-        {
-          currentValue: menuAction,
-          expandValue,
-          valueClickItem
-        }
-      ),
-      (menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        DropdownContextChild_default,
-        {
-          appendTo: "parent",
-          placement: "right",
-          offset: [0, 5],
-          onShow: () => setIsShow(true),
-          onHide: () => setIsShow(false),
-          button: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            ContextMenuItem_default,
-            {
-              currentValue: menuAction,
-              expandValue,
-              valueClickItem,
-              show: isShow,
-              isArrow: true
-            }
-          ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "dropdown-context-child absolute -top-[20px] -left-1", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            RenderContextMenu,
-            {
-              renderData: menuAction == null ? void 0 : menuAction.children,
-              expandValue,
-              valueClickItem
-            }
-          ) })
-        }
-      )
-    ] }, index);
-  }) });
-};
-var RenderContextMenu_default = RenderContextMenu;
-
-// src/component/ui/Table/TableStyleContextWapper.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var TableStyleContextMenuWapper = ({
-  children,
-  contextMenuProps,
-  clsTablecustom,
-  renderContext
-}) => {
-  const idWapper = (0, import_react10.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)(
-          ContextMenu_default,
-          {
-            selector: `[id="wapper_menu_context-${idWapper}"] .rdg`,
-            ...contextMenuProps,
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RenderContextMenu_default, { ...renderContext })
-          }
-        ),
-        children
-      ]
-    }
-  );
-};
-var TableStyleContextWapper = (0, import_react10.memo)(
-  TableStyleContextMenuWapper
-);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ReactTableGridCustom,
   ReactTableGridCustomPaginationClient,
-  TableStyleContextWapper,
   useShowHideColumn
 });

package/dist/index.mjs

@@ -493,7 +493,7 @@ var ReactTableGridCustomPaginationClientInner = ({
     ReactTableGridCustom,
     {
       data: newDataAccount,
-      total: data == null ? void 0 : data.length,
+      total: (data == null ? void 0 : data.length) || 0,
       page: configSearch == null ? void 0 : configSearch.page,
       pageSize: configSearch == null ? void 0 : configSearch.pageSize,
       setConfigPagination: setConfigSearch,
@@ -504,264 +504,8 @@ var ReactTableGridCustomPaginationClientInner = ({
 var ReactTableGridCustomPaginationClient = memo2(
   ReactTableGridCustomPaginationClientInner
 );
-
-// src/component/ui/Table/TableStyleContextWapper.tsx
-import { memo as memo3, useId as useId2 } from "react";
-
-// src/component/ui/ContextMenu/ContextMenu.tsx
-import { useCallback as useCallback4, useEffect as useEffect2, useRef as useRef2 } from "react";
-import { createPortal } from "react-dom";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var ContextMenu = ({ selector, children, zIndex = 40 }) => {
-  const menuRef = useRef2(null);
-  const closeMenu = useCallback4(() => {
-    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__ */ jsx5(
-      "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 useState4 } from "react";
-
-// src/component/ui/ContextMenu/ContextMenuItem.tsx
-import { useTranslation as useTranslation3 } from "react-i18next";
-import { MdKeyboardArrowRight } from "react-icons/md";
-import { jsx as jsx6, 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__ */ jsx6(Icon, { size: 20 }),
-        /* @__PURE__ */ jsx6("span", { className: "text-sm flex-1", children: t(`${currentValue.action}`) }),
-        isArrow && /* @__PURE__ */ jsx6(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 jsx7 } from "react/jsx-runtime";
-var DropdownContextChild = ({ button, children, ...rest }) => {
-  const id = useId();
-  const instanceRef = useRef3(null);
-  return /* @__PURE__ */ jsx7(
-    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__ */ jsx7(
-        "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 jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-var RenderContextMenu = ({
-  renderData,
-  valueClickItem,
-  expandValue = {}
-}) => {
-  return /* @__PURE__ */ jsx8("div", { className: "bg-white shadow-submenu p-1 min-w-[250px] border", children: renderData == null ? void 0 : renderData.map((menuAction, index) => {
-    const [isShow, setIsShow] = useState4(false);
-    return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-      !(menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ jsx8(
-        ContextMenuItem_default,
-        {
-          currentValue: menuAction,
-          expandValue,
-          valueClickItem
-        }
-      ),
-      (menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ jsx8(
-        DropdownContextChild_default,
-        {
-          appendTo: "parent",
-          placement: "right",
-          offset: [0, 5],
-          onShow: () => setIsShow(true),
-          onHide: () => setIsShow(false),
-          button: /* @__PURE__ */ jsx8(
-            ContextMenuItem_default,
-            {
-              currentValue: menuAction,
-              expandValue,
-              valueClickItem,
-              show: isShow,
-              isArrow: true
-            }
-          ),
-          children: /* @__PURE__ */ jsx8("div", { className: "dropdown-context-child absolute -top-[20px] -left-1", children: /* @__PURE__ */ jsx8(
-            RenderContextMenu,
-            {
-              renderData: menuAction == null ? void 0 : menuAction.children,
-              expandValue,
-              valueClickItem
-            }
-          ) })
-        }
-      )
-    ] }, index);
-  }) });
-};
-var RenderContextMenu_default = RenderContextMenu;
-
-// src/component/ui/Table/TableStyleContextWapper.tsx
-import { jsx as jsx9, 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__ */ jsx9(
-          ContextMenu_default,
-          {
-            selector: `[id="wapper_menu_context-${idWapper}"] .rdg`,
-            ...contextMenuProps,
-            children: /* @__PURE__ */ jsx9(RenderContextMenu_default, { ...renderContext })
-          }
-        ),
-        children
-      ]
-    }
-  );
-};
-var TableStyleContextWapper = memo3(
-  TableStyleContextMenuWapper
-);
 export {
   ReactTableGridCustom,
   ReactTableGridCustomPaginationClient,
-  TableStyleContextWapper,
   useShowHideColumn
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mkt-loitd/react-table-grid-custom",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "React Table Grid Custom component",
   "license": "ISC",
   "private": false,