es-grid-template 1.3.3 → 1.3.5

package/es/grid-component/type.d.ts

@@ -108,6 +108,7 @@ export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>,
     headerTooltip?: boolean | string | (() => ReactNode | ReactElement);
     columnGroupText?: string;
     textAlign?: ITextAlign;
+    headerTextAlign?: ITextAlign;
     template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
     showTooltip?: boolean;
     tooltipDescription?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
@@ -149,6 +150,7 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
     t?: any;
     lang?: string;
     contextMenuItems?: ContextMenuItem[];
+    showDefaultContext?: boolean;
     contextMenuHidden?: string[] | ((args?: Omit<ContextInfo<RecordType>, 'item' | 'event'>) => string[]);
     contextMenuOpen?: (args: Omit<ContextInfo<RecordType>, 'item'>) => void;
     contextMenuClick?: (args: ContextInfo<RecordType>) => void;
@@ -253,6 +255,7 @@ export interface ICellPasteModel<RecordType = AnyObject> {
     onPasted?: (args: IOnPastedProps, handleCallback: (callbackData: any[]) => void) => void;
     dataChange?: (data: RecordType[]) => void;
     getCallbackData?: (props: any) => void;
+    maxRowsPaste?: number;
 }
 export type SourceFilter = {
     key: string;

package/es/grid-component/useContext.d.ts

@@ -24,6 +24,8 @@ export type ContextCellChange<RecordType = AnyObject> = {
     record: any;
     field: string | undefined;
     option: any;
+    indexRow: number;
+    indexCol: number;
     newState?: any;
     prevState?: any;
     type: 'enter' | 'blur' | 'outClick';

package/lib/grid-component/ContextMenu.js

@@ -108,7 +108,10 @@ const ContextMenu = props => {
             maxHeight: pos.viewportHeight - 20,
             width: 'fit-content'
           },
-          rootClassName: 'popup-context-menu',
+          rootClassName: 'popup-context-menu'
+          // rootClassName={'be-popup-container'}
+          ,
+
           onClick: e => {
             setOpen(false);
             contextMenuClick?.({

package/lib/grid-component/EditableCell.js

@@ -23,12 +23,13 @@ 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; }
 // import moment from "moment";
 // import dayjs from "dayjs";
+// import {TreeSelect} from "antd";
 
 // import moment from "moment";
 
 const {
   SHOW_PARENT
-} = _antd.TreeSelect;
+} = _rcMasterUi.TreeSelect;
 const filterTreeNode = (input, treeNode) => {
   const {
     title,
@@ -53,7 +54,6 @@ const EditableCell = props => {
     ...restProps
   } = props;
   const {
-    rowKey,
     format,
     control,
     getValues,
@@ -122,6 +122,8 @@ const EditableCell = props => {
                 prevState,
                 newState,
                 option: newState,
+                indexCol,
+                indexRow,
                 type: 'blur'
               });
             }
@@ -194,6 +196,8 @@ const EditableCell = props => {
                 prevState,
                 newState,
                 option: newState,
+                indexCol,
+                indexRow,
                 type: 'blur'
               });
             }
@@ -314,6 +318,8 @@ const EditableCell = props => {
               prevState,
               newState,
               option: option,
+              indexCol,
+              indexRow,
               type: 'blur'
             });
           },
@@ -394,6 +400,8 @@ const EditableCell = props => {
               prevState,
               newState,
               option: option,
+              indexCol,
+              indexRow,
               type: 'blur'
             });
           },
@@ -449,6 +457,8 @@ const EditableCell = props => {
               prevState,
               newState,
               option: option,
+              indexCol,
+              indexRow,
               type: 'blur'
             });
           },
@@ -519,12 +529,23 @@ const EditableCell = props => {
 
         const newTreeData = (0, _hooks.convertLabelToTitle)(optionsTree);
         // @ts-ignore
-        const valueTreeSelect = column?.editSelectSettings?.isMulti ? Array.isArray(record[column.dataIndex]) ? record[column.dataIndex] : [] : record[column.dataIndex];
-        return /*#__PURE__*/_react.default.createElement(_antd.TreeSelect, {
+        // const valueTreeSelect = column?.editSelectSettings?.isMulti ? (Array.isArray(record[column.dataIndex]) ? record[column.dataIndex] : []) : record[column.dataIndex]
+
+        let valueTreeSelect = value;
+        if (fieldValue) {
+          // @ts-ignore
+          valueTreeSelect = record[fieldValue] ?? value;
+        }
+        if (isMulti || selectMode === 'checkbox') {
+          // @ts-ignore
+          valueTreeSelect = !(0, _hooks.isNullOrUndefined)(record[column.dataIndex]) && Array.isArray(record[column.dataIndex]) && record[column.dataIndex]?.length > 0 ? options.filter(val => record[column.dataIndex]?.includes(val[keySelect])) : undefined;
+        }
+        return /*#__PURE__*/_react.default.createElement(_rcMasterUi.TreeSelect, {
           id: `col${indexCol}-record${indexRow}`,
           className: 'be-tree-select',
           style: {
-            width: '100%'
+            width: '100%',
+            height: '100%'
           },
           value: valueTreeSelect,
           dropdownStyle: {
@@ -551,17 +572,28 @@ const EditableCell = props => {
             value: keySelect,
             children: 'children'
           },
-          treeCheckable: column?.editSelectSettings?.selectMode === 'checkbox'
-          // getPopupContainer={() => tableWrapperRef.current}
-          ,
-          filterTreeNode: filterTreeNode
-          // onChange={(val: any) => {
-          //   record[column.dataIndex] = val
-          //   handleCellChange(val, val, record, col, indexRow, indexCol)
-          //
-          // }}
-          ,
-
+          treeCheckable: column?.editSelectSettings?.selectMode === 'checkbox',
+          filterTreeNode: filterTreeNode,
+          onSelect: (val, option) => {
+            onChange(val ?? '');
+            const formState = getValues();
+            // const itemState = getValues(dataIndex)
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = val;
+            handleCellChange?.({
+              key: getRowKey?.(record, index),
+              field: column.field ?? column.dataIndex,
+              record: formState,
+              prevState,
+              newState,
+              option: option,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          },
+          popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined
         });
       case 'checkbox':
@@ -590,6 +622,8 @@ const EditableCell = props => {
               prevState: value,
               newState: newVal,
               field: column.field ?? column.dataIndex,
+              indexCol,
+              indexRow,
               type: 'blur'
             });
           },
@@ -675,6 +709,8 @@ const EditableCell = props => {
               record: formState,
               prevState: value,
               newState: `#${valueColor.toHex()}`,
+              indexCol,
+              indexRow,
               type: 'blur'
             });
           },
@@ -774,6 +810,8 @@ const EditableCell = props => {
                 record: formState,
                 prevState,
                 newState,
+                indexCol,
+                indexRow,
                 type: 'blur'
               });
             }
@@ -811,23 +849,28 @@ const EditableCell = props => {
                 prevState,
                 newState,
                 field: column.field ?? column.dataIndex,
+                indexCol,
+                indexRow,
                 type: 'blur'
               });
             }
           },
           onPressEnter: () => {
+            const key = getRowKey?.(record, index);
             const formState = getValues();
             const newState = getValues(dataIndex);
             // @ts-ignore
             const prevState = record[dataIndex];
             // @ts-ignore
             // if (itemState !== record[dataIndex]) {
-            // @ts-ignore
+
             handleCellChange?.({
-              key: record[rowKey],
+              key: key,
               newState,
               prevState,
               record: formState,
+              indexCol,
+              indexRow,
               type: 'enter'
             });
             // }

package/lib/grid-component/TableGrid.js

@@ -288,12 +288,6 @@ const TableGrid = props => {
     if (checkboxOnly !== true) {
       if (type === 'single') {}
     }
-    if (clickRef.current) return;
-
-    // @ts-ignore
-    clickRef.current = setTimeout(() => {
-      clickRef.current = null;
-    }, 250);
   };
   const handleRowDoubleClick = (record, index) => e => {
     if (clickRef.current) {
@@ -373,7 +367,7 @@ const TableGrid = props => {
       spinning: columns && columns.length === 0 || loading === true,
       indicator: /*#__PURE__*/_react.default.createElement(_LoadingSpinner.default, null)
     },
-    dataSource: columns && columns.length > 0 && loading !== true ? (0, _hooks.filterDataByColumns3)(dataSource, filterStates) : []
+    dataSource: columns && columns.length > 0 ? (0, _hooks.filterDataByColumns3)(dataSource, filterStates) : []
     // dataSource={columns && columns.length > 0 && loading !== true ? dataSource : []}
     // className={styles.customTable}
     ,
@@ -519,7 +513,10 @@ const TableGrid = props => {
     ,
     showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
   }, pagination)), bottomToolbar?.(), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
-    id: "tooltip-header"
+    id: "tooltip-header",
+    style: {
+      zIndex: 1999
+    }
   }));
 };
 var _default = exports.default = TableGrid;

package/lib/grid-component/hooks/columns/index.js

@@ -16,11 +16,16 @@ var _rcMasterUi = require("rc-master-ui");
 var _CheckboxFilter = _interopRequireDefault(require("../../CheckboxFilter"));
 var _useSelection = require("rc-master-ui/es/table/hooks/useSelection");
 var _numberRange = _interopRequireDefault(require("../../number-range"));
+var _number = _interopRequireDefault(require("../../number"));
 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; }
+// import {Typography} from "antd";
 const {
   RangePicker
 } = _rcMasterUi.DatePicker;
+
+// const { Text } = Typography;
+
 function flatColumns(columns, parentKey = 'key') {
   // @ts-ignore
   return columns.filter(column => column && typeof column === 'object').reduce((list, column, index) => {
@@ -79,7 +84,10 @@ const getValueCell = (column, value, format) => {
       const thousandSeparator = column?.format?.thousandSeparator ? column?.format?.thousandSeparator : format?.thousandSeparator;
       const decimalSeparator = column?.format?.decimalSeparator ? column?.format?.decimalSeparator : format?.decimalSeparator;
       const dec = column?.format?.decimalScale || column?.format?.decimalScale === 0 ? column?.format?.decimalScale : format?.decimalScale;
-      const content = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString() : '0';
+
+      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
+
+      const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(value.toFixed(dec)).toString() : value.toString() : '0';
       const numericFormatProps = {
         thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
         decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
@@ -89,7 +97,7 @@ const getValueCell = (column, value, format) => {
         decimalScale: column?.format?.decimalScale || column?.format?.decimalScale === 0 ? column?.format?.decimalScale : format?.decimalScale,
         fixedDecimalScale: (column?.format?.fixedDecimalScale ? column?.format?.fixedDecimalScale : format?.fixedDecimalScale) ?? false
       };
-      return !(0, _utils.isEmpty)(content) ? (0, _reactNumericComponent.numericFormatter)(content, numericFormatProps) : '';
+      return !(0, _utils.isEmpty)(contentNumber) ? (0, _reactNumericComponent.numericFormatter)(contentNumber, numericFormatProps) : '';
     case 'date':
       return value ? (0, _dayjs.default)(value).format(column?.format?.dateFormat ?? format?.dateFormat ?? 'DD/MM/YYYY') : '';
     case 'time':
@@ -113,7 +121,7 @@ const getValueCell = (column, value, format) => {
       }));
     case 'checkbox':
       return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Input, {
-        checked: !!content,
+        checked: !!value,
         readOnly: true,
         type: "checkbox"
       });
@@ -149,18 +157,11 @@ const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, s
     case 'Number':
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
         className: 'mb-1'
-      }, /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, {
-        value: selectedKeys[0]
-        // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
-        // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
-        // allowNegative={col.format && col.format.allowNegative === true}
-        ,
-        allowNegative: true,
-        customInput: _rcMasterUi.Input,
-        className: ' rounded-0 input-element form-control',
-        onValueChange: values => {
-          // onChangeValueFilter(type, values.floatValue)
-          setSelectedKeys(values.floatValue || values.floatValue === 0 ? [values.floatValue] : []);
+      }, /*#__PURE__*/_react.default.createElement(_number.default, {
+        t: t,
+        value: selectedKeys[0],
+        onChange: vals => {
+          setSelectedKeys(vals);
         }
       }))));
     case 'NumberRange':

package/lib/grid-component/hooks/content/HeaderContent.js

@@ -76,7 +76,9 @@ const HeaderContent = props => {
     // style={{flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', wordBreak: 'keep-all'}}
     // style={{flex: 1}}
     className: (0, _classnames.default)('', {}),
-    "data-tooltip-id": "tooltip-header",
+    "data-tooltip-id": "tooltip-header"
+    // data-tooltip-id="tooltip-cell-content"
+    ,
     "data-tooltip-content": tooltip,
     "data-tooltip-offset": 16
   }, headerTemplate ? (0, _utils.getTemplate)(headerTemplate) : t ? t(text) : text));

package/lib/grid-component/hooks/useColumns.js

@@ -274,7 +274,8 @@ const useColumns = config => {
           },
           onHeaderCell: () => ({
             width: col.width,
-            onResize: handleResize?.(col)
+            onResize: handleResize?.(col),
+            className: col.headerTextAlign === 'center' ? 'head-align-center' : col.headerTextAlign === 'right' ? 'head-align-right' : ''
           }),
           onCell: (data, index) => {
             return {

package/lib/grid-component/hooks/utils.d.ts

@@ -80,3 +80,16 @@ export declare function isDateString(str: any): boolean;
 export declare function compareDates(date1: any, date2: any): boolean;
 export declare function compareDate(itemValue: any, value: any): boolean;
 export declare function invalidDate(date: any): boolean;
+export declare const isContinuous: (set: any) => boolean;
+export declare const parseCells: (cellSet: any) => {
+    row: any;
+    col: any;
+    key: any;
+}[];
+export declare const buildConnectedRegions: (cells: any) => any[];
+export declare const isBottomMostInRegion: (rowIndex: number, colIndex: number, listSelectCell: any) => boolean;
+export declare const isTopMostInRegion: (rowIndex: number, colIndex: number, listSelectCell: any) => boolean;
+export declare function isRightMostInRegion(rowIndex: number, colIndex: number, listSelectCell: any): boolean;
+export declare function isEqualSet(setA: any, setB: any): boolean;
+export declare function isBottomMostInRanges(rowIndex: number, colIndex: number, regions: any[]): boolean;
+export declare const mergedSets: (arr: any[]) => Set<unknown>;

package/lib/grid-component/hooks/utils.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.addRowIdArray = void 0;
 exports.addRows8 = addRows8;
-exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = exports.checkChild = void 0;
+exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = exports.checkChild = exports.buildConnectedRegions = void 0;
 exports.compareDate = compareDate;
 exports.compareDates = compareDates;
 exports.filterDataByColumns3 = exports.filterDataByColumns2 = exports.filterDataByColumns = exports.editAbleColumns = exports.customWeekStartEndFormat = exports.countItemsBeforeIndex = exports.convertLabelToTitle = exports.convertFlatColumn = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.convertColumns = exports.convertArrayWithIndent = void 0;
@@ -15,9 +15,15 @@ exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exp
 exports.getHiddenParentKeys = getHiddenParentKeys;
 exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTemplate = exports.getRowsPasteIndex = exports.getRowNumber = exports.getLastSelectCell = void 0;
 exports.invalidDate = invalidDate;
-exports.isColor = exports.isArraysEqual = void 0;
+exports.isArraysEqual = void 0;
+exports.isBottomMostInRanges = isBottomMostInRanges;
+exports.isContinuous = exports.isColor = exports.isBottomMostInRegion = void 0;
 exports.isDateString = isDateString;
-exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.removeFieldRecursive = exports.removeColumns = exports.parseBooleanToValue = exports.newGuid = exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = exports.isEmpty = exports.isEditable = exports.isDisable = void 0;
+exports.isEmpty = exports.isEditable = exports.isDisable = void 0;
+exports.isEqualSet = isEqualSet;
+exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = void 0;
+exports.isRightMostInRegion = isRightMostInRegion;
+exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.removeFieldRecursive = exports.removeColumns = exports.parseCells = exports.parseBooleanToValue = exports.newGuid = exports.mergedSets = exports.isTopMostInRegion = void 0;
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _moment = _interopRequireDefault(require("moment/moment"));
 var _uuid = require("uuid");
@@ -1054,10 +1060,10 @@ const filterDataByColumns3 = (data, queries) => {
       const queryStr = value?.toString().toLowerCase?.();
       switch (operator.toLowerCase()) {
         case "equal":
-          condition = isDateComparison ? compareDates(itemDate, queryDate) : itemValue == value;
+          condition = isDateComparison ? compareDates(itemDate, queryDate) : itemValue === value;
           break;
         case "notequal":
-          condition = isDateComparison ? !compareDates(itemDate, queryDate) : itemValue != value;
+          condition = isDateComparison ? !compareDates(itemDate, queryDate) : itemValue !== value;
           break;
         case "greaterthan":
           // @ts-ignore
@@ -1103,9 +1109,19 @@ const filterDataByColumns3 = (data, queries) => {
 // ======= Helper functions ========
 
 // Kiểm tra có phải Date object không
+// function isDate(value: any) {
+//   return value instanceof Date || !isNaN(Date.parse(value));
+// }
 exports.filterDataByColumns3 = filterDataByColumns3;
 function isDate(value) {
-  return value instanceof Date || !isNaN(Date.parse(value));
+  if (value instanceof Date) {
+    return !isNaN(value.getTime());
+  }
+  if (typeof value === "string") {
+    // Chỉ chấp nhận định dạng yyyy-mm-dd hoặc mm/yyyy
+    return /^\d{4}-\d{2}-\d{2}$/.test(value) || /^\d{2}\/\d{4}$/.test(value);
+  }
+  return false;
 }
 
 // Chuỗi MM/YYYY → Date
@@ -1139,4 +1155,131 @@ function compareDate(itemValue, value) {
 }
 function invalidDate(date) {
   return date instanceof Date && !isNaN(date.getTime());
-}
+}
+const isContinuous = set => {
+  const rows = [];
+  const cols = [];
+  for (const item of set) {
+    const [row, col] = item.split('-').map(Number);
+    rows.push(row);
+    cols.push(col);
+  }
+
+  // Lấy danh sách duy nhất và sắp xếp
+  const uniqueSorted = arr => [...new Set(arr)].sort((a, b) => a - b);
+  const isSequential = arr => {
+    for (let i = 1; i < arr.length; i++) {
+      if (arr[i] !== arr[i - 1] + 1) {
+        return false;
+      }
+    }
+    return true;
+  };
+  const sortedRows = uniqueSorted(rows);
+  const sortedCols = uniqueSorted(cols);
+  return isSequential(sortedRows) && isSequential(sortedCols);
+};
+exports.isContinuous = isContinuous;
+const parseCells = cellSet => {
+  return Array.from(cellSet).map(cell => {
+    const [row, col] = cell.split('-').map(Number);
+    return {
+      row,
+      col,
+      key: cell
+    };
+  });
+};
+exports.parseCells = parseCells;
+const buildConnectedRegions = cells => {
+  const cellMap = new Map();
+  const visited = new Set();
+  for (const cell of cells) {
+    cellMap.set(cell.key, cell);
+  }
+  const directions = [[1, 0],
+  // down
+  [-1, 0],
+  // up
+  [0, 1],
+  // right
+  [0, -1] // left
+  ];
+  const regions = [];
+  for (const cell of cells) {
+    if (visited.has(cell.key)) continue;
+    const stack = [cell];
+    const region = [];
+    while (stack.length) {
+      const current = stack.pop();
+      if (visited.has(current.key)) continue;
+      visited.add(current.key);
+      region.push(current);
+      for (const [dr, dc] of directions) {
+        const neighborKey = `${current.row + dr}-${current.col + dc}`;
+        if (cellMap.has(neighborKey) && !visited.has(neighborKey)) {
+          stack.push(cellMap.get(neighborKey));
+        }
+      }
+    }
+    regions.push(region);
+  }
+  return regions;
+};
+exports.buildConnectedRegions = buildConnectedRegions;
+const isBottomMostInRegion = (rowIndex, colIndex, listSelectCell) => {
+  const cells = parseCells(listSelectCell);
+  const regions = buildConnectedRegions(cells);
+  for (const region of regions) {
+    if (region.some(cell => cell.row === rowIndex && cell.col === colIndex)) {
+      const maxRow = Math.max(...region.map(cell => cell.row));
+      return rowIndex === maxRow;
+    }
+  }
+  return false;
+};
+exports.isBottomMostInRegion = isBottomMostInRegion;
+const isTopMostInRegion = (rowIndex, colIndex, listSelectCell) => {
+  const cells = parseCells(listSelectCell);
+  const regions = buildConnectedRegions(cells);
+  for (const region of regions) {
+    if (region.some(cell => cell.row === rowIndex && cell.col === colIndex)) {
+      const minRow = Math.min(...region.map(cell => cell.row));
+      return rowIndex === minRow;
+    }
+  }
+  return false;
+};
+exports.isTopMostInRegion = isTopMostInRegion;
+function isRightMostInRegion(rowIndex, colIndex, listSelectCell) {
+  const cells = parseCells(listSelectCell);
+  const regions = buildConnectedRegions(cells);
+  for (const region of regions) {
+    if (region.some(cell => cell.row === rowIndex && cell.col === colIndex)) {
+      const maxCol = Math.max(...region.map(cell => cell.col));
+      return colIndex === maxCol;
+    }
+  }
+  return false;
+}
+function isEqualSet(setA, setB) {
+  if (setA.size !== setB.size) return false;
+  for (const item of setA) {
+    if (!setB.has(item)) return false;
+  }
+  return true;
+}
+function isBottomMostInRanges(rowIndex, colIndex, regions) {
+  const ranges = regions.map(it => parseCells(it));
+  for (const region of ranges) {
+    if (region.some(cell => cell.row === rowIndex && cell.col === colIndex)) {
+      const maxRow = Math.max(...region.map(cell => cell.row));
+      return rowIndex === maxRow;
+    }
+  }
+  return false;
+}
+const mergedSets = arr => {
+  return new Set(arr.flatMap(set => Array.from(set)));
+};
+exports.mergedSets = mergedSets;

package/lib/grid-component/number/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { IFormat } from "../type";
+type Props = {
+    t?: any;
+    format?: IFormat;
+    value: number | string | undefined;
+    onChange?: (values: any[]) => void;
+};
+declare const Number: (props: Props) => React.JSX.Element;
+export default Number;

package/lib/grid-component/number/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNumericComponent = require("react-numeric-component");
+var _rcMasterUi = require("rc-master-ui");
+var _hooks = require("../hooks");
+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 Number = props => {
+  const {
+    t,
+    value,
+    format,
+    onChange
+  } = props;
+  const values = _react.default.useMemo(() => [value], [value]);
+
+  // const [values, setValues] = React.useState<any[]>(() =>
+  //   mergedValues,
+  // );
+
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, {
+    value: values[0] ?? ''
+    // value={min}
+    ,
+    thousandSeparator: (0, _hooks.checkThousandSeparator)(format?.thousandSeparator, format?.decimalSeparator),
+    decimalSeparator: (0, _hooks.checkDecimalSeparator)(format?.thousandSeparator, format?.decimalSeparator),
+    allowNegative: true,
+    customInput: _rcMasterUi.Input,
+    className: 'rounded-0 input-element',
+    onValueChange: vals => {
+      // onChangeValueFilter(type, values.floatValue, 'min')
+
+      // setValues([vals.floatValue, values[1]])
+      onChange?.([vals.floatValue]);
+    }
+    // placeholder={t ? t('Min') : 'Min'}
+    ,
+    placeholder: t ? t('Enter') : 'Enter',
+    autoFocus: true
+  }));
+};
+var _default = exports.default = Number;

package/lib/grid-component/styles.scss

@@ -26,6 +26,14 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
 .popup-context-menu {
   min-width: 200px;
+
+}
+.ant-dropdown-menu.popup-context-menu {
+  .ant-dropdown-menu-submenu {
+    .ant-dropdown-menu-submenu-title {
+      align-items: center;
+    }
+  }
 }
 
 // -------------- Table -------------
@@ -239,6 +247,13 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
       .#{$prefix}-table-column-title {
         //display: flex;
       }
+
+      &.head-align-center {
+        text-align: center;
+      }
+      &.head-align-right {
+        text-align: right;
+      }
     }
   }