es-grid-template 1.8.82 → 1.8.83

package/es/group-component/body/EditableCell.js

@@ -364,7 +364,7 @@ const EditableCell = props => {
           columns: columnsTable,
           options: options,
           defaultOptions: options,
-          value: valueSelectTable || undefined,
+          value: valueSelectTable ?? undefined,
           rowData: record,
           autoDestroy: true,
           onChange: (val, option) => {
@@ -461,7 +461,7 @@ const EditableCell = props => {
         }
         return /*#__PURE__*/React.createElement(Select, {
           options: options,
-          value: valueSelect || undefined,
+          value: valueSelect ?? undefined,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();
@@ -541,7 +541,7 @@ const EditableCell = props => {
         return /*#__PURE__*/React.createElement(AsyncSelect, {
           options: options,
           defaultOptions: options,
-          value: valueAsyncSelect || undefined,
+          value: valueAsyncSelect ?? undefined,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();
@@ -677,7 +677,7 @@ const EditableCell = props => {
             width: '100%',
             height: '100%'
           },
-          value: valueTreeSelect || undefined,
+          value: valueTreeSelect ?? undefined,
           dropdownStyle: {
             maxHeight: 400,
             overflow: 'auto'

package/es/group-component/hook/utils.d.ts

@@ -212,9 +212,9 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     ellipsis?: boolean;
     allowResizing?: boolean;
     allowSelection?: boolean | ((rowData: RecordType) => boolean);
-    onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
-    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
-    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
+    onCellStyles?: Omit<CSSProperties, "width" | "left" | "right" | "display" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "left" | "right" | "display" | "minWidth" | "position">);
+    onCellHeaderStyles?: Omit<CSSProperties, "width" | "left" | "right" | "display" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "left" | "right" | "display" | "minWidth" | "position">);
+    onCellFooterStyles?: Omit<CSSProperties, "width" | "left" | "right" | "display" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "left" | "right" | "display" | "minWidth" | "position">);
     sumGroup?: boolean;
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
 }[];

package/es/group-component/table/Grid.js

@@ -381,7 +381,11 @@ const Grid = props => {
         zIndex: 1050
       }
     },
-    title: /*#__PURE__*/React.createElement(React.Fragment, null, "  ", typeof fullScreenTitle === 'function' ? fullScreenTitle?.() : fullScreenTitle, " "),
+    title: /*#__PURE__*/React.createElement("div", {
+      style: {
+        minHeight: 24
+      }
+    }, "  ", typeof fullScreenTitle === 'function' ? fullScreenTitle?.() : fullScreenTitle, " "),
     destroyOnClose: true
   }, /*#__PURE__*/React.createElement("div", {
     style: {}

package/es/group-component/table/TableWrapper.js

@@ -4,9 +4,9 @@ import TableBody from "../body/TableBody";
 import TableFooter from "../footer/TableFooter";
 import ComponentSpinner from "../../grid-component/LoadingSpinner";
 import { Tooltip } from "react-tooltip";
-import ContextMenu from "../ContextMenu";
 import React, { useContext } from "react";
 import { TableContext } from "../useContext";
+import ContextMenu from "../../table-component/ContextMenu";
 const TableWrapper = props => {
   const {
     id,
@@ -146,24 +146,39 @@ const TableWrapper = props => {
         y
       }));
     }, 100);
-    if (!menuVisible) {
-      document.addEventListener(`click`, function onClickOutside(e) {
-        const element = e.target;
-        const menuContainer = document.querySelector('.popup-context-menu');
-        const isInsideContainer = element.closest('.popup-context-menu') && menuContainer;
-        if (isInsideContainer) {
-          return;
-        }
-        setMenuVisible(false);
-        setPosition(prevState => ({
-          ...prevState,
-          x: undefined,
-          y: undefined
-        }));
-        document.removeEventListener(`click`, onClickOutside);
-      });
-    }
+
+    // if (!menuVisible) {
+    //   document.addEventListener(`click`, function onClickOutside(e) {
+    //     const element: any = e.target
+    //     const menuContainer = document.querySelector('.popup-context-menu')
+
+    //     const isInsideContainer = element.closest('.popup-context-menu') && menuContainer
+
+    //     if (isInsideContainer) {
+    //       return
+    //     }
+    //     setMenuVisible(false)
+    //     setPosition(prevState => ({ ...prevState, x: undefined, y: undefined }))
+    //     document.removeEventListener(`click`, onClickOutside)
+    //   })
+    // }
   };
+  React.useEffect(() => {
+    const handleClickOutside = event => {
+      const element = event.target;
+      const containerContextMenu = document.querySelector(".popup-context-menu");
+      const isInsideContainerContext = containerContextMenu && element.closest(".popup-context-menu");
+      if (isInsideContainerContext) {
+        return;
+      } else {
+        setMenuVisible(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'relative'

package/es/table-component/ContextMenu.js

@@ -68,7 +68,9 @@ const ContextMenu = props => {
           // }
         }
       }));
-    }
+    },
+    destroyPopupOnHide: true
+    // autoAdjustOverflow
   }, /*#__PURE__*/React.createElement(React.Fragment, null));
 };
 export default ContextMenu;

package/es/table-component/TableContainer.js

@@ -212,8 +212,7 @@ const TableContainer = props => {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
-      alignItems: 'center',
-      gap: '.75rem'
+      alignItems: 'center'
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -228,7 +227,7 @@ const TableContainer = props => {
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'center',
-      gap: '.75rem'
+      gap: '.25rem'
     }
   }, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' && /*#__PURE__*/React.createElement(Pagination, _extends({
     showSizeChanger: true,

package/es/table-component/TableContainerEdit.js

@@ -1631,8 +1631,7 @@ const TableContainerEdit = props => {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
-      alignItems: 'center',
-      gap: '.75rem'
+      alignItems: 'center'
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {

package/es/table-component/body/EditableCell.js

@@ -350,7 +350,7 @@ const EditableCell = props => {
           columns: columnsTable,
           options: options,
           defaultOptions: options,
-          value: valueSelectTable || undefined,
+          value: valueSelectTable ?? undefined,
           rowData: record,
           autoDestroy: true,
           onChange: (val, option) => {
@@ -447,7 +447,7 @@ const EditableCell = props => {
         }
         return /*#__PURE__*/React.createElement(Select, {
           options: options,
-          value: valueSelect || undefined,
+          value: valueSelect ?? undefined,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();
@@ -527,7 +527,7 @@ const EditableCell = props => {
         return /*#__PURE__*/React.createElement(AsyncSelect, {
           options: options,
           defaultOptions: options,
-          value: valueAsyncSelect || undefined,
+          value: valueAsyncSelect ?? undefined,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();
@@ -651,7 +651,7 @@ const EditableCell = props => {
             width: '100%',
             height: '100%'
           },
-          value: valueTreeSelect,
+          value: valueTreeSelect ?? undefined,
           dropdownStyle: {
             maxHeight: 400,
             overflow: 'auto'

package/es/table-component/table/Grid.js

@@ -334,7 +334,11 @@ const Grid = props => {
         zIndex: 1050
       }
     },
-    title: /*#__PURE__*/React.createElement(React.Fragment, null, "  ", typeof fullScreenTitle === 'function' ? fullScreenTitle?.() : fullScreenTitle, " "),
+    title: /*#__PURE__*/React.createElement("div", {
+      style: {
+        minHeight: 24
+      }
+    }, "  ", typeof fullScreenTitle === 'function' ? fullScreenTitle?.() : fullScreenTitle, " "),
     destroyOnClose: true
   }, /*#__PURE__*/React.createElement("div", {
     style: {}

package/es/table-component/table/TableWrapper.js

@@ -124,10 +124,10 @@ const TableWrapper = props => {
       },
       event
     });
-    setMenuVisible(true);
 
     // Đợi DOM cập nhật và lấy kích thước menu
     setTimeout(() => {
+      setMenuVisible(true);
       const menuElement = menuRef.current; // Lấy menu từ DOM
       const menuWidth = menuElement?.offsetWidth || 200; // Mặc định 200px nếu chưa render
       const menuHeight = menuElement?.offsetHeight; // Mặc định 450px nếu chưa render
@@ -151,24 +151,41 @@ const TableWrapper = props => {
         y
       }));
     }, 100);
-    if (!menuVisible) {
-      document.addEventListener(`click`, function onClickOutside(e) {
-        const element = e.target;
-        const menuContainer = document.querySelector('.popup-context-menu');
-        const isInsideContainer = element.closest('.popup-context-menu') && menuContainer;
-        if (isInsideContainer) {
-          return;
-        }
-        setMenuVisible(false);
-        setPosition(prevState => ({
-          ...prevState,
-          x: undefined,
-          y: undefined
-        }));
-        document.removeEventListener(`click`, onClickOutside);
-      });
-    }
+
+    // if (!menuVisible) {
+
+    //   document.addEventListener(`click`, function onClickOutside(e) {
+    //     const element: any = e.target
+    //     const menuContainer = document.querySelector('.popup-context-menu')
+
+    //     const isInsideContainer = element.closest('.popup-context-menu') && menuContainer
+
+    //     if (isInsideContainer) {
+    //       return
+    //     }
+    //     setMenuVisible(false)
+    //     setPosition(prevState => ({ ...prevState, x: undefined, y: undefined }))
+    //     document.removeEventListener(`click`, onClickOutside)
+    //   })
+
+    // }
   };
+  React.useEffect(() => {
+    const handleClickOutside = event => {
+      const element = event.target;
+      const containerContextMenu = document.querySelector(".popup-context-menu");
+      const isInsideContainerContext = containerContextMenu && element.closest(".popup-context-menu");
+      if (isInsideContainerContext) {
+        return;
+      } else {
+        setMenuVisible(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'relative'

package/es/table-virtuoso/table/TableContainer.js

@@ -171,8 +171,7 @@ const TableContainer = props => {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
-      alignItems: 'center',
-      gap: '.75rem'
+      alignItems: 'center'
     }
   }, groupToolbar(), /*#__PURE__*/React.createElement("div", {
     style: {

package/es/table-virtuoso/table/TableWrapper.js

@@ -1,14 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 /* eslint-disable @typescript-eslint/no-shadow */
-
-// import type { Dispatch, SetStateAction } from 'react';
 import React, { useContext, useRef } from 'react';
 import { TableVirtuoso } from "react-virtuoso";
-import "@tanstack/react-table"; // useReactTable,
-// getCoreRowModel,
-// flexRender,
-// getGroupedRowModel,
-// getExpandedRowModel
 import TableHeadCell from "../header/TableHeadCell";
 import { TableContext } from "../useContext";
 import classNames from 'classnames';
@@ -16,10 +9,6 @@ import TableBodyRow from "../body/TableBodyRow";
 import TableFooterCell from "../footer/TableFooterCell";
 import { Tooltip } from 'react-tooltip';
 import ContextMenu from "../../table-component/ContextMenu";
-// import type { ColumnsTable, TableProps } from '../type';
-
-// type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
-
 const TableWrapper = props => {
   const {
     table,
@@ -39,7 +28,6 @@ const TableWrapper = props => {
     rowEditable,
     windowSize
   } = useContext(TableContext); //onRowHeaderStyles
-  // const { windowSize } = useContext(TableContext)
 
   // ref cho scroll container
   const scrollRef = useRef(null);

package/lib/group-component/body/EditableCell.js

@@ -372,7 +372,7 @@ const EditableCell = props => {
           columns: columnsTable,
           options: options,
           defaultOptions: options,
-          value: valueSelectTable || undefined,
+          value: valueSelectTable ?? undefined,
           rowData: record,
           autoDestroy: true,
           onChange: (val, option) => {
@@ -469,7 +469,7 @@ const EditableCell = props => {
         }
         return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
           options: options,
-          value: valueSelect || undefined,
+          value: valueSelect ?? undefined,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();
@@ -549,7 +549,7 @@ const EditableCell = props => {
         return /*#__PURE__*/_react.default.createElement(_asyncSelect.AsyncSelect, {
           options: options,
           defaultOptions: options,
-          value: valueAsyncSelect || undefined,
+          value: valueAsyncSelect ?? undefined,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();
@@ -685,7 +685,7 @@ const EditableCell = props => {
             width: '100%',
             height: '100%'
           },
-          value: valueTreeSelect || undefined,
+          value: valueTreeSelect ?? undefined,
           dropdownStyle: {
             maxHeight: 400,
             overflow: 'auto'

package/lib/group-component/table/Grid.js

@@ -387,7 +387,11 @@ const Grid = props => {
         zIndex: 1050
       }
     },
-    title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "  ", typeof fullScreenTitle === 'function' ? fullScreenTitle?.() : fullScreenTitle, " "),
+    title: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        minHeight: 24
+      }
+    }, "  ", typeof fullScreenTitle === 'function' ? fullScreenTitle?.() : fullScreenTitle, " "),
     destroyOnClose: true
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {}

package/lib/group-component/table/TableWrapper.js

@@ -11,9 +11,9 @@ var _TableBody = _interopRequireDefault(require("../body/TableBody"));
 var _TableFooter = _interopRequireDefault(require("../footer/TableFooter"));
 var _LoadingSpinner = _interopRequireDefault(require("../../grid-component/LoadingSpinner"));
 var _reactTooltip = require("react-tooltip");
-var _ContextMenu = _interopRequireDefault(require("../ContextMenu"));
 var _react = _interopRequireWildcard(require("react"));
 var _useContext = require("../useContext");
+var _ContextMenu = _interopRequireDefault(require("../../table-component/ContextMenu"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const TableWrapper = props => {
@@ -155,24 +155,39 @@ const TableWrapper = props => {
         y
       }));
     }, 100);
-    if (!menuVisible) {
-      document.addEventListener(`click`, function onClickOutside(e) {
-        const element = e.target;
-        const menuContainer = document.querySelector('.popup-context-menu');
-        const isInsideContainer = element.closest('.popup-context-menu') && menuContainer;
-        if (isInsideContainer) {
-          return;
-        }
-        setMenuVisible(false);
-        setPosition(prevState => ({
-          ...prevState,
-          x: undefined,
-          y: undefined
-        }));
-        document.removeEventListener(`click`, onClickOutside);
-      });
-    }
+
+    // if (!menuVisible) {
+    //   document.addEventListener(`click`, function onClickOutside(e) {
+    //     const element: any = e.target
+    //     const menuContainer = document.querySelector('.popup-context-menu')
+
+    //     const isInsideContainer = element.closest('.popup-context-menu') && menuContainer
+
+    //     if (isInsideContainer) {
+    //       return
+    //     }
+    //     setMenuVisible(false)
+    //     setPosition(prevState => ({ ...prevState, x: undefined, y: undefined }))
+    //     document.removeEventListener(`click`, onClickOutside)
+    //   })
+    // }
   };
+  _react.default.useEffect(() => {
+    const handleClickOutside = event => {
+      const element = event.target;
+      const containerContextMenu = document.querySelector(".popup-context-menu");
+      const isInsideContainerContext = containerContextMenu && element.closest(".popup-context-menu");
+      if (isInsideContainerContext) {
+        return;
+      } else {
+        setMenuVisible(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       position: 'relative'

package/lib/table-component/ContextMenu.js

@@ -77,7 +77,9 @@ const ContextMenu = props => {
           // }
         }
       }));
-    }
+    },
+    destroyPopupOnHide: true
+    // autoAdjustOverflow
   }, /*#__PURE__*/React.createElement(React.Fragment, null));
 };
 var _default = exports.default = ContextMenu;

package/lib/table-component/TableContainer.js

@@ -219,8 +219,7 @@ const TableContainer = props => {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
-      alignItems: 'center',
-      gap: '.75rem'
+      alignItems: 'center'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -235,7 +234,7 @@ const TableContainer = props => {
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'center',
-      gap: '.75rem'
+      gap: '.25rem'
     }
   }, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
     showSizeChanger: true,

package/lib/table-component/TableContainerEdit.js

@@ -1638,8 +1638,7 @@ const TableContainerEdit = props => {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
-      alignItems: 'center',
-      gap: '.75rem'
+      alignItems: 'center'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {

package/lib/table-component/body/EditableCell.js

@@ -358,7 +358,7 @@ const EditableCell = props => {
           columns: columnsTable,
           options: options,
           defaultOptions: options,
-          value: valueSelectTable || undefined,
+          value: valueSelectTable ?? undefined,
           rowData: record,
           autoDestroy: true,
           onChange: (val, option) => {
@@ -455,7 +455,7 @@ const EditableCell = props => {
         }
         return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
           options: options,
-          value: valueSelect || undefined,
+          value: valueSelect ?? undefined,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();
@@ -535,7 +535,7 @@ const EditableCell = props => {
         return /*#__PURE__*/_react.default.createElement(_asyncSelect.AsyncSelect, {
           options: options,
           defaultOptions: options,
-          value: valueAsyncSelect || undefined,
+          value: valueAsyncSelect ?? undefined,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();
@@ -659,7 +659,7 @@ const EditableCell = props => {
             width: '100%',
             height: '100%'
           },
-          value: valueTreeSelect,
+          value: valueTreeSelect ?? undefined,
           dropdownStyle: {
             maxHeight: 400,
             overflow: 'auto'

package/lib/table-component/table/Grid.js

@@ -339,7 +339,11 @@ const Grid = props => {
         zIndex: 1050
       }
     },
-    title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "  ", typeof fullScreenTitle === 'function' ? fullScreenTitle?.() : fullScreenTitle, " "),
+    title: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        minHeight: 24
+      }
+    }, "  ", typeof fullScreenTitle === 'function' ? fullScreenTitle?.() : fullScreenTitle, " "),
     destroyOnClose: true
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {}

package/lib/table-component/table/TableWrapper.js

@@ -133,10 +133,10 @@ const TableWrapper = props => {
       },
       event
     });
-    setMenuVisible(true);
 
     // Đợi DOM cập nhật và lấy kích thước menu
     setTimeout(() => {
+      setMenuVisible(true);
       const menuElement = menuRef.current; // Lấy menu từ DOM
       const menuWidth = menuElement?.offsetWidth || 200; // Mặc định 200px nếu chưa render
       const menuHeight = menuElement?.offsetHeight; // Mặc định 450px nếu chưa render
@@ -160,24 +160,41 @@ const TableWrapper = props => {
         y
       }));
     }, 100);
-    if (!menuVisible) {
-      document.addEventListener(`click`, function onClickOutside(e) {
-        const element = e.target;
-        const menuContainer = document.querySelector('.popup-context-menu');
-        const isInsideContainer = element.closest('.popup-context-menu') && menuContainer;
-        if (isInsideContainer) {
-          return;
-        }
-        setMenuVisible(false);
-        setPosition(prevState => ({
-          ...prevState,
-          x: undefined,
-          y: undefined
-        }));
-        document.removeEventListener(`click`, onClickOutside);
-      });
-    }
+
+    // if (!menuVisible) {
+
+    //   document.addEventListener(`click`, function onClickOutside(e) {
+    //     const element: any = e.target
+    //     const menuContainer = document.querySelector('.popup-context-menu')
+
+    //     const isInsideContainer = element.closest('.popup-context-menu') && menuContainer
+
+    //     if (isInsideContainer) {
+    //       return
+    //     }
+    //     setMenuVisible(false)
+    //     setPosition(prevState => ({ ...prevState, x: undefined, y: undefined }))
+    //     document.removeEventListener(`click`, onClickOutside)
+    //   })
+
+    // }
   };
+  _react.default.useEffect(() => {
+    const handleClickOutside = event => {
+      const element = event.target;
+      const containerContextMenu = document.querySelector(".popup-context-menu");
+      const isInsideContainerContext = containerContextMenu && element.closest(".popup-context-menu");
+      if (isInsideContainerContext) {
+        return;
+      } else {
+        setMenuVisible(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       position: 'relative'

package/lib/table-virtuoso/table/TableContainer.js

@@ -179,8 +179,7 @@ const TableContainer = props => {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
-      alignItems: 'center',
-      gap: '.75rem'
+      alignItems: 'center'
     }
   }, groupToolbar(), /*#__PURE__*/_react.default.createElement("div", {
     style: {

package/lib/table-virtuoso/table/TableWrapper.js

@@ -8,7 +8,6 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactVirtuoso = require("react-virtuoso");
-require("@tanstack/react-table");
 var _TableHeadCell = _interopRequireDefault(require("../header/TableHeadCell"));
 var _useContext = require("../useContext");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -20,12 +19,6 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /* eslint-disable @typescript-eslint/no-shadow */
 
-// import type { Dispatch, SetStateAction } from 'react';
-
-// import type { ColumnsTable, TableProps } from '../type';
-
-// type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
-
 const TableWrapper = props => {
   const {
     table,
@@ -45,7 +38,6 @@ const TableWrapper = props => {
     rowEditable,
     windowSize
   } = (0, _react.useContext)(_useContext.TableContext); //onRowHeaderStyles
-  // const { windowSize } = useContext(TableContext)
 
   // ref cho scroll container
   const scrollRef = (0, _react.useRef)(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.8.82",
+  "version": "1.8.83",
   "description": "es-grid-template",
   "keywords": [
     "react",
@@ -64,7 +64,7 @@
     "rc-checkbox": "^3.5.0",
     "rc-dropdown": "^4.2.1",
     "rc-field-form": "^2.6.0",
-    "rc-master-ui": "1.1.51",
+    "rc-master-ui": "1.1.52",
     "rc-select": "^14.16.3",
     "rc-tooltip": "^6.3.0",
     "rc-tree": "^5.10.1",

package/es/group-component/ContextMenu.d.ts

@@ -1,19 +0,0 @@
-import * as React from "react";
-import type { ContextInfo, ContextMenuItem } from "./../grid-component/type";
-export declare const findItemByKey: (array: any[], key: string, value: any) => any;
-type Props<RecordType> = {
-    rowData: RecordType | null;
-    contextMenuItems: ContextMenuItem[];
-    contextMenuClick?: (args: ContextInfo<RecordType>) => void;
-    open: boolean;
-    menuRef?: any;
-    setOpen: (open: boolean) => void;
-    pos: {
-        x: number | undefined;
-        y: number | undefined;
-        viewportWidth: number;
-        viewportHeight: number;
-    };
-};
-declare const ContextMenu: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
-export default ContextMenu;

package/es/group-component/ContextMenu.js

@@ -1,74 +0,0 @@
-import * as React from "react";
-import { Dropdown, Menu } from "antd";
-export const findItemByKey = (array, key, value) => {
-  for (let i = 0; i < array.length; i++) {
-    const item = array[i];
-    if (item[key] === value) {
-      return item;
-    }
-    if (item.children && item.children.length > 0) {
-      const foundInChildren = findItemByKey(item.children, key, value);
-      if (foundInChildren) {
-        return foundInChildren;
-      }
-    }
-  }
-  return null;
-};
-const ContextMenu = props => {
-  const {
-    menuRef,
-    open,
-    setOpen,
-    pos,
-    contextMenuClick,
-    contextMenuItems,
-    rowData
-  } = props;
-  return /*#__PURE__*/React.createElement(Dropdown, {
-    placement: 'topRight',
-    open: open,
-    overlayClassName: 'be-popup-container',
-    overlayStyle: {
-      left: `${pos.x}px`,
-      top: `${pos.y}px`
-    },
-    dropdownRender: () => {
-      return /*#__PURE__*/React.createElement("div", {
-        ref: menuRef
-      }, /*#__PURE__*/React.createElement(Menu, {
-        items: contextMenuItems,
-        style: {
-          minWidth: 200,
-          maxHeight: pos.viewportHeight - 20,
-          width: 'fit-content'
-        },
-        rootClassName: 'popup-context-menu'
-        // rootClassName={'be-popup-container'}
-        ,
-
-        onClick: e => {
-          setOpen(false);
-          contextMenuClick?.({
-            rowInfo: {
-              rowData
-            },
-            event: e.domEvent,
-            item: {
-              ...findItemByKey(contextMenuItems, 'key', e.key),
-              id: e.key
-            }
-          });
-
-          // if (!open) {
-          //   document.addEventListener(`click`, function onClickOutside() {
-          //     setOpen(false);
-          //     document.removeEventListener(`click`, onClickOutside);
-          //   });
-          // }
-        }
-      }));
-    }
-  }, /*#__PURE__*/React.createElement(React.Fragment, null));
-};
-export default ContextMenu;

package/lib/group-component/ContextMenu.d.ts

@@ -1,19 +0,0 @@
-import * as React from "react";
-import type { ContextInfo, ContextMenuItem } from "./../grid-component/type";
-export declare const findItemByKey: (array: any[], key: string, value: any) => any;
-type Props<RecordType> = {
-    rowData: RecordType | null;
-    contextMenuItems: ContextMenuItem[];
-    contextMenuClick?: (args: ContextInfo<RecordType>) => void;
-    open: boolean;
-    menuRef?: any;
-    setOpen: (open: boolean) => void;
-    pos: {
-        x: number | undefined;
-        y: number | undefined;
-        viewportWidth: number;
-        viewportHeight: number;
-    };
-};
-declare const ContextMenu: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
-export default ContextMenu;

package/lib/group-component/ContextMenu.js

@@ -1,83 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.findItemByKey = exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _antd = require("antd");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const findItemByKey = (array, key, value) => {
-  for (let i = 0; i < array.length; i++) {
-    const item = array[i];
-    if (item[key] === value) {
-      return item;
-    }
-    if (item.children && item.children.length > 0) {
-      const foundInChildren = findItemByKey(item.children, key, value);
-      if (foundInChildren) {
-        return foundInChildren;
-      }
-    }
-  }
-  return null;
-};
-exports.findItemByKey = findItemByKey;
-const ContextMenu = props => {
-  const {
-    menuRef,
-    open,
-    setOpen,
-    pos,
-    contextMenuClick,
-    contextMenuItems,
-    rowData
-  } = props;
-  return /*#__PURE__*/React.createElement(_antd.Dropdown, {
-    placement: 'topRight',
-    open: open,
-    overlayClassName: 'be-popup-container',
-    overlayStyle: {
-      left: `${pos.x}px`,
-      top: `${pos.y}px`
-    },
-    dropdownRender: () => {
-      return /*#__PURE__*/React.createElement("div", {
-        ref: menuRef
-      }, /*#__PURE__*/React.createElement(_antd.Menu, {
-        items: contextMenuItems,
-        style: {
-          minWidth: 200,
-          maxHeight: pos.viewportHeight - 20,
-          width: 'fit-content'
-        },
-        rootClassName: 'popup-context-menu'
-        // rootClassName={'be-popup-container'}
-        ,
-
-        onClick: e => {
-          setOpen(false);
-          contextMenuClick?.({
-            rowInfo: {
-              rowData
-            },
-            event: e.domEvent,
-            item: {
-              ...findItemByKey(contextMenuItems, 'key', e.key),
-              id: e.key
-            }
-          });
-
-          // if (!open) {
-          //   document.addEventListener(`click`, function onClickOutside() {
-          //     setOpen(false);
-          //     document.removeEventListener(`click`, onClickOutside);
-          //   });
-          // }
-        }
-      }));
-    }
-  }, /*#__PURE__*/React.createElement(React.Fragment, null));
-};
-var _default = exports.default = ContextMenu;