es-grid-template 1.9.21 → 1.9.23

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

@@ -194,10 +194,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
         value: any;
         rowData: RecordType;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "display" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "display" | "position">);
-    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "display" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "display" | "position">);
+    onCellStyles?: Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width">);
+    onCellHeaderStyles?: Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "display" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "display" | "position">);
+    onCellFooterStyles?: Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

package/es/table-component/TableContainer.js

@@ -112,11 +112,15 @@ const TableContainer = props => {
         return;
       }
       if (containerRef.current && tableBody && !tableBody.contains(event.target)) {
-        setFocusedCell(undefined);
-        setIsSelectionChange(prev => ({
-          ...prev,
-          isChange: false
-        }));
+        if (focusedCell) {
+          setFocusedCell(undefined);
+        }
+        if (isSelectionChange?.isChange) {
+          setIsSelectionChange(prev => ({
+            ...prev,
+            isChange: false
+          }));
+        }
       }
     };
     document.addEventListener('mousedown', handleClickOutside);

package/es/table-component/TableContainerEdit.js

@@ -608,25 +608,28 @@ const TableContainerEdit = props => {
         if (editingKey) {
           onBlur?.(dataSource);
         }
-        setTimeout(() => {
-          setEditingKey('');
-          // editingKey.current = ''
-        });
-        setEndCell(undefined);
-        setStartCell(undefined);
-        setRangeState(undefined);
-        setFocusedCell(undefined);
+        if (editingKey) {
+          setTimeout(() => {
+            setEditingKey('');
+          });
+        }
+        if (endCell) {
+          setEndCell(undefined);
+        }
+        if (startCell) {
+          setStartCell(undefined);
+        }
+        if (rangeState) {
+          setRangeState(undefined);
+        }
+        if (focusedCell) {
+          setFocusedCell(undefined);
+        }
       }
     };
-
-    // document.addEventListener('click', handleClickOutside)
     document.addEventListener('mousedown', handleClickOutside);
-    // document.addEventListener('touchstart', handleClickOutside)
-
     return () => {
-      // document.removeEventListener('click', handleClickOutside)
       document.removeEventListener('mousedown', handleClickOutside);
-      // document.removeEventListener('touchstart', handleClickOutside)
     };
   }, [dataSource, editingKey, id, onBlur]);
   const columnSizingState = table.getState().columnSizing;

package/es/table-component/style.scss

@@ -152,8 +152,8 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
     }
 
     .#{$prefix}-grid-thead {
-      // background-color: #ffffff;
-      background-color: inherit;
+      background-color: #ffffff;
+      // background-color: inherit;
        font-weight: 500;
 
       .#{$prefix}-grid-cell {

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

@@ -125,9 +125,9 @@ const Grid = props => {
       }
       return true;
     },
-    initialState: {
-      rowSelection: {}
-    },
+    // initialState: {
+    //   rowSelection: {}
+    // },
     onRowSelectionChange: setRowSelection,
     // RowSelection
 
@@ -202,6 +202,14 @@ const Grid = props => {
     const isEqual = isObjEqual(convertToObjTrue(mergedSelectedKeys), rowSelection);
     if (!isEqual) {
       setRowSelection(convertToObjTrue(mergedSelectedKeys));
+      // table.setRowSelection(convertToObjTrue(mergedSelectedKeys))
+
+      if (mergedSelectedKeys.length === 0) {
+        setIsSelectionChange(prev => ({
+          ...prev,
+          rowsData: []
+        }));
+      }
     }
   }, [mergedSelectedKeys]);
   React.useEffect(() => {

package/lib/table-component/TableContainer.js

@@ -119,11 +119,15 @@ const TableContainer = props => {
         return;
       }
       if (containerRef.current && tableBody && !tableBody.contains(event.target)) {
-        setFocusedCell(undefined);
-        setIsSelectionChange(prev => ({
-          ...prev,
-          isChange: false
-        }));
+        if (focusedCell) {
+          setFocusedCell(undefined);
+        }
+        if (isSelectionChange?.isChange) {
+          setIsSelectionChange(prev => ({
+            ...prev,
+            isChange: false
+          }));
+        }
       }
     };
     document.addEventListener('mousedown', handleClickOutside);

package/lib/table-component/TableContainerEdit.js

@@ -615,25 +615,28 @@ const TableContainerEdit = props => {
         if (editingKey) {
           onBlur?.(dataSource);
         }
-        setTimeout(() => {
-          setEditingKey('');
-          // editingKey.current = ''
-        });
-        setEndCell(undefined);
-        setStartCell(undefined);
-        setRangeState(undefined);
-        setFocusedCell(undefined);
+        if (editingKey) {
+          setTimeout(() => {
+            setEditingKey('');
+          });
+        }
+        if (endCell) {
+          setEndCell(undefined);
+        }
+        if (startCell) {
+          setStartCell(undefined);
+        }
+        if (rangeState) {
+          setRangeState(undefined);
+        }
+        if (focusedCell) {
+          setFocusedCell(undefined);
+        }
       }
     };
-
-    // document.addEventListener('click', handleClickOutside)
     document.addEventListener('mousedown', handleClickOutside);
-    // document.addEventListener('touchstart', handleClickOutside)
-
     return () => {
-      // document.removeEventListener('click', handleClickOutside)
       document.removeEventListener('mousedown', handleClickOutside);
-      // document.removeEventListener('touchstart', handleClickOutside)
     };
   }, [dataSource, editingKey, id, onBlur]);
   const columnSizingState = table.getState().columnSizing;

package/lib/table-component/style.scss

@@ -152,8 +152,8 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
     }
 
     .#{$prefix}-grid-thead {
-      // background-color: #ffffff;
-      background-color: inherit;
+      background-color: #ffffff;
+      // background-color: inherit;
        font-weight: 500;
 
       .#{$prefix}-grid-cell {

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

@@ -130,9 +130,9 @@ const Grid = props => {
       }
       return true;
     },
-    initialState: {
-      rowSelection: {}
-    },
+    // initialState: {
+    //   rowSelection: {}
+    // },
     onRowSelectionChange: setRowSelection,
     // RowSelection
 
@@ -207,6 +207,14 @@ const Grid = props => {
     const isEqual = (0, _utils.isObjEqual)((0, _utils.convertToObjTrue)(mergedSelectedKeys), rowSelection);
     if (!isEqual) {
       setRowSelection((0, _utils.convertToObjTrue)(mergedSelectedKeys));
+      // table.setRowSelection(convertToObjTrue(mergedSelectedKeys))
+
+      if (mergedSelectedKeys.length === 0) {
+        setIsSelectionChange(prev => ({
+          ...prev,
+          rowsData: []
+        }));
+      }
     }
   }, [mergedSelectedKeys]);
   _react.default.useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.21",
+  "version": "1.9.23",
   "description": "es-grid-template",
   "keywords": [
     "react",