qbs-react-grid 1.3.16 → 2.0.1

package/lib/qbsTable/QbsTable.js

@@ -129,7 +129,7 @@ var QbsTable = function QbsTable(_ref) {
   var _useState4 = (0, _react.useState)(false),
     isOpen = _useState4[0],
     setIsOpen = _useState4[1];
-  var prevColumns = (0, _react.useRef)();
+  var prevColumns = (0, _react.useRef)(null);
   var _useState5 = (0, _react.useState)(tableView),
     tableViewToggle = _useState5[0],
     setTableViewToggle = _useState5[1];
@@ -353,6 +353,115 @@ var QbsTable = function QbsTable(_ref) {
       return item.grouped;
     }) ? true : false;
   };
+  // const columnsRendered: React.ReactElement[] = useMemo(
+  //   () =>
+  //     (columns ?? []).map(
+  //       ({
+  //         title,
+  //         field,
+  //         resizable,
+  //         sortable,
+  //         colWidth,
+  //         align,
+  //         grouped,
+  //         groupHeader,
+  //         fixed,
+  //         children,
+  //         customCell,
+  //         renderCell,
+  //         isVisible,
+  //         link,
+  //         getPath,
+  //         rowClick,
+  //         sortKey,
+  //         type,
+  //         hideLink
+  //       }) =>
+  //         isVisible &&
+  //         (grouped ? (
+  //           <ColumnGroup
+  //             header={groupHeader}
+  //             fixed={fixed}
+  //             align={align}
+  //             verticalAlign="middle"
+  //             groupHeaderHeight={40}
+  //           >
+  //             {children?.map(child => (
+  //               <Column
+  //                 key={child.title}
+  //                 sortable={child.sortable}
+  //                 width={child.colWidth ?? COLUMN_WIDTH}
+  //                 resizable={child.resizable}
+  //                 align={child.align}
+  //                 onResize={handleColumnWidth}
+  //                 fixed={child.fixed}
+  //               >
+  //                 <HeaderCell
+  //                   dataTheme={dataTheme}
+  //                   verticalAlign={'middle'}
+  //                   className={` ${classes.headerClass}`}
+  //                   sortKey={child.sortKey}
+  //                   renderSortIcon={renderSortIcon}
+  //                 >
+  //                   {child.title}
+  //                 </HeaderCell>
+  //                 {child.customCell || child.link ? (
+  //                   <CustomTableCell
+  //                     renderCell={child.renderCell}
+  //                     dataKey={child.field}
+  //                     dataTheme={dataTheme}
+  //                     type={child.type}
+  //                     path={child.getPath}
+  //                     link={child.link}
+  //                   />
+  //                 ) : (
+  //                   <Cell
+  //                     className={` ${classes.cellClass}`}
+  //                     dataKey={child.field}
+  //                     dataTheme={dataTheme}
+  //                   />
+  //                 )}
+  //               </Column>
+  //             ))}
+  //           </ColumnGroup>
+  //         ) : (
+  //           <Column
+  //             key={title}
+  //             sortable={sortable}
+  //             width={colWidth ?? COLUMN_WIDTH}
+  //             resizable={resizable}
+  //             align={align}
+  //             fixed={fixed}
+  //             onResize={handleColumnWidth}
+  //           >
+  //             <HeaderCell
+  //               dataTheme={dataTheme}
+  //               verticalAlign={findGrouped() ? 'middle' : undefined}
+  //               className={` ${classes.headerClass}`}
+  //               sortKey={sortKey}
+  //               renderSortIcon={renderSortIcon}
+  //             >
+  //               {title}
+  //             </HeaderCell>
+  //             {customCell || link ? (
+  //               <CustomTableCell
+  //                 renderCell={renderCell}
+  //                 dataKey={field}
+  //                 rowClick={rowClick}
+  //                 type={type}
+  //                 hideLink={hideLink}
+  //                 path={getPath}
+  //                 dataTheme={dataTheme}
+  //                 link={link}
+  //               />
+  //             ) : (
+  //               <Cell dataKey={field} dataTheme={dataTheme} className={` ${classes.cellClass}`} />
+  //             )}
+  //           </Column>
+  //         ))
+  //     ),
+  //   [columns, dataTheme]
+  // );
   var columnsRendered = (0, _react.useMemo)(function () {
     return (columns != null ? columns : []).map(function (_ref3) {
       var title = _ref3.title,
@@ -374,13 +483,13 @@ var QbsTable = function QbsTable(_ref) {
         sortKey = _ref3.sortKey,
         type = _ref3.type,
         hideLink = _ref3.hideLink;
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isVisible && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, grouped ? /*#__PURE__*/_react["default"].createElement(_ColumnGroup["default"], {
+      return isVisible ? grouped ? /*#__PURE__*/_react["default"].createElement(_ColumnGroup["default"], {
         header: groupHeader,
         fixed: fixed,
         align: align,
         verticalAlign: "middle",
         groupHeaderHeight: 40
-      }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children === null || children === void 0 ? void 0 : children.map(function (child) {
+      }, children === null || children === void 0 ? void 0 : children.map(function (child) {
         var _child$colWidth;
         return /*#__PURE__*/_react["default"].createElement(_Column["default"], {
           key: child.title,
@@ -392,7 +501,7 @@ var QbsTable = function QbsTable(_ref) {
           fixed: child.fixed
         }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
           dataTheme: dataTheme,
-          verticalAlign: 'middle',
+          verticalAlign: "middle",
           className: " " + classes.headerClass,
           sortKey: child.sortKey,
           renderSortIcon: renderSortIcon
@@ -408,7 +517,7 @@ var QbsTable = function QbsTable(_ref) {
           dataKey: child.field,
           dataTheme: dataTheme
         }));
-      }))) : /*#__PURE__*/_react["default"].createElement(_Column["default"], {
+      })) : /*#__PURE__*/_react["default"].createElement(_Column["default"], {
         key: title,
         sortable: sortable,
         width: colWidth != null ? colWidth : COLUMN_WIDTH,
@@ -435,9 +544,12 @@ var QbsTable = function QbsTable(_ref) {
         dataKey: field,
         dataTheme: dataTheme,
         className: " " + classes.cellClass
-      }))));
-    });
-  }, [columns, dataTheme]);
+      })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null);
+    } // ✅ Fix: Return `null` instead of `false`
+    ).filter(Boolean);
+  },
+  // ✅ Fix: Remove `undefined` and `false` elements
+  [columns, dataTheme]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table " + classes.tableContainerClass,
     "data-theme": dataTheme

package/lib/qbsTable/TableCardList.js

@@ -114,7 +114,7 @@ var QbsTable = function QbsTable(_ref) {
   var _useState4 = (0, _react.useState)(false),
     isOpen = _useState4[0],
     setIsOpen = _useState4[1];
-  var prevColumns = (0, _react.useRef)();
+  var prevColumns = (0, _react.useRef)(null);
   var tableBodyRef = (0, _react.useRef)(null);
   var handleSortColumn = (0, _react.useCallback)(function (sortColumn, sortType) {
     setLoading(true);

package/lib/utils/getTableColumns.js

@@ -4,9 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _flatten = _interopRequireDefault(require("lodash/flatten"));
 var _react = _interopRequireDefault(require("react"));
 var ReactIs = _interopRequireWildcard(require("react-is"));
-var _flatten = _interopRequireDefault(require("lodash/flatten"));
 var _ColumnGroup = _interopRequireDefault(require("../ColumnGroup"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -20,13 +20,13 @@ function getTableColumns(children) {
   var flattenColumns = (0, _flatten["default"])(childrenArray).map(function (column) {
     // If the column is a group, we need to get the columns from the children.
     if ((column === null || column === void 0 ? void 0 : column.type) === _ColumnGroup["default"]) {
-      var _column$props = column === null || column === void 0 ? void 0 : column.props,
-        header = _column$props.header,
-        groupChildren = _column$props.children,
-        align = _column$props.align,
-        fixed = _column$props.fixed,
-        verticalAlign = _column$props.verticalAlign,
-        groupHeaderHeight = _column$props.groupHeaderHeight;
+      var _ref = column === null || column === void 0 ? void 0 : column.props,
+        header = _ref.header,
+        groupChildren = _ref.children,
+        align = _ref.align,
+        fixed = _ref.fixed,
+        verticalAlign = _ref.verticalAlign,
+        groupHeaderHeight = _ref.groupHeaderHeight;
       var childColumns = getTableColumns(groupChildren);
       return childColumns.map(function (childColumn, index) {
         // Overwrite the props set by ColumnGroup to Column.
@@ -55,9 +55,9 @@ function getTableColumns(children) {
         return /*#__PURE__*/_react["default"].cloneElement(childColumn, groupCellProps);
       });
     } else if (ReactIs.isFragment(column)) {
-      var _column$props2;
+      var _column$props;
       // If the column is a fragment, we need to get the columns from the children.
-      return getTableColumns((_column$props2 = column.props) === null || _column$props2 === void 0 ? void 0 : _column$props2.children);
+      return getTableColumns((_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.children);
     } else if (Array.isArray(column)) {
       // If the column is an array, need check item in the array.
       return getTableColumns(column);

package/lib/utils/useAffix.d.ts

@@ -6,11 +6,11 @@ interface AffixProps {
     contentHeight: React.MutableRefObject<number>;
     affixHeader?: boolean | number;
     affixHorizontalScrollbar?: boolean | number;
-    tableOffset: React.RefObject<ElementOffset>;
-    headerOffset: React.RefObject<ElementOffset>;
+    tableOffset: React.RefObject<ElementOffset | null>;
+    headerOffset: React.RefObject<ElementOffset | null>;
     headerHeight: number;
-    scrollbarXRef: React.RefObject<ScrollbarInstance>;
-    affixHeaderWrapperRef: React.RefObject<HTMLDivElement>;
+    scrollbarXRef: React.RefObject<ScrollbarInstance | null>;
+    affixHeaderWrapperRef: React.RefObject<HTMLDivElement | null>;
 }
 declare const useAffix: (props: AffixProps) => void;
 export default useAffix;

package/lib/utils/useAffix.js

@@ -3,13 +3,13 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports["default"] = void 0;
-var _react = require("react");
-var _getHeight = _interopRequireDefault(require("dom-lib/getHeight"));
 var _addStyle = _interopRequireDefault(require("dom-lib/addStyle"));
-var _removeStyle = _interopRequireDefault(require("dom-lib/removeStyle"));
+var _getHeight = _interopRequireDefault(require("dom-lib/getHeight"));
 var _on = _interopRequireDefault(require("dom-lib/on"));
-var _toggleClass = _interopRequireDefault(require("./toggleClass"));
+var _removeStyle = _interopRequireDefault(require("dom-lib/removeStyle"));
+var _react = require("react");
 var _isNumberOrTrue = _interopRequireDefault(require("./isNumberOrTrue"));
+var _toggleClass = _interopRequireDefault(require("./toggleClass"));
 var _useUpdateEffect = _interopRequireDefault(require("./useUpdateEffect"));
 var useAffix = function useAffix(props) {
   var getTableHeight = props.getTableHeight,
@@ -21,7 +21,7 @@ var useAffix = function useAffix(props) {
     headerHeight = props.headerHeight,
     scrollbarXRef = props.scrollbarXRef,
     affixHeaderWrapperRef = props.affixHeaderWrapperRef;
-  var scrollListener = (0, _react.useRef)();
+  var scrollListener = (0, _react.useRef)(null);
   var handleAffixHorizontalScrollbar = (0, _react.useCallback)(function () {
     var _tableOffset$current, _scrollbarXRef$curren;
     var scrollY = window.scrollY || window.pageYOffset;

package/lib/utils/useCellDescriptor.d.ts

@@ -15,8 +15,8 @@ interface CellDescriptorProps<Row> {
     onSortColumn?: (dataKey: string, sortType?: SortType) => void;
     onHeaderCellResize?: (width: number, dataKey: string) => void;
     rowHeight?: number | ((rowData?: Row) => number);
-    mouseAreaRef: React.RefObject<HTMLDivElement>;
-    tableRef: React.RefObject<HTMLDivElement>;
+    mouseAreaRef: React.RefObject<HTMLDivElement | null>;
+    tableRef: React.RefObject<HTMLDivElement | null>;
 }
 interface CellDescriptor {
     columns: React.ReactNode[];

package/lib/utils/usePosition.d.ts

@@ -4,13 +4,13 @@ interface PositionProps {
     data: readonly RowDataType[];
     height: number;
     tableWidth: React.MutableRefObject<number>;
-    tableRef: React.RefObject<HTMLDivElement>;
+    tableRef: React.RefObject<HTMLDivElement | null>;
     prefix: (str: string) => string;
     translateDOMPositionXY: React.MutableRefObject<any>;
-    wheelWrapperRef: React.RefObject<HTMLDivElement>;
-    headerWrapperRef: React.RefObject<HTMLDivElement>;
-    affixHeaderWrapperRef: React.RefObject<HTMLDivElement>;
-    tableHeaderRef: React.RefObject<HTMLDivElement>;
+    wheelWrapperRef: React.RefObject<HTMLDivElement | null>;
+    headerWrapperRef: React.RefObject<HTMLDivElement | null>;
+    affixHeaderWrapperRef: React.RefObject<HTMLDivElement | null>;
+    tableHeaderRef: React.RefObject<HTMLDivElement | null>;
     scrollX: React.MutableRefObject<number>;
     scrollY: React.MutableRefObject<number>;
     contentWidth: React.MutableRefObject<number>;

package/lib/utils/usePosition.js

@@ -3,13 +3,13 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports["default"] = void 0;
-var _react = require("react");
 var _addStyle = _interopRequireDefault(require("dom-lib/addStyle"));
+var _react = require("react");
 var _constants = require("../constants");
+var _defer = _interopRequireDefault(require("./defer"));
+var _isSupportTouchEvent = _interopRequireDefault(require("./isSupportTouchEvent"));
 var _toggleClass = _interopRequireDefault(require("./toggleClass"));
 var _useUpdateEffect = _interopRequireDefault(require("./useUpdateEffect"));
-var _isSupportTouchEvent = _interopRequireDefault(require("./isSupportTouchEvent"));
-var _defer = _interopRequireDefault(require("./defer"));
 /**
  * Update the position of the table according to the scrolling information of the table.
  * @param props

package/lib/utils/useScrollListener.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { ScrollbarInstance } from '../Scrollbar';
 import type { RowDataType } from '../@types/common';
+import type { ScrollbarInstance } from '../Scrollbar';
 interface ScrollListenerProps {
     rtl: boolean;
     data: readonly RowDataType[];
@@ -10,11 +10,11 @@ interface ScrollListenerProps {
     headerHeight: number;
     autoHeight?: boolean;
     tableBodyRef: React.RefObject<HTMLDivElement>;
-    scrollbarXRef: React.RefObject<ScrollbarInstance>;
-    scrollbarYRef: React.RefObject<ScrollbarInstance>;
+    scrollbarXRef: React.RefObject<ScrollbarInstance | null>;
+    scrollbarYRef: React.RefObject<ScrollbarInstance | null>;
     disabledScroll?: boolean;
     loading?: boolean;
-    tableRef: React.RefObject<HTMLDivElement>;
+    tableRef: React.RefObject<HTMLDivElement | null>;
     contentWidth: React.MutableRefObject<number>;
     tableWidth: React.MutableRefObject<number>;
     scrollY: React.MutableRefObject<number>;

package/lib/utils/useScrollListener.js

@@ -3,19 +3,19 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports["default"] = void 0;
-var _react = require("react");
-var _WheelHandler = _interopRequireDefault(require("dom-lib/WheelHandler"));
-var _scrollLeft = _interopRequireDefault(require("dom-lib/scrollLeft"));
-var _scrollTop = _interopRequireDefault(require("dom-lib/scrollTop"));
 var _on = _interopRequireDefault(require("dom-lib/on"));
 var _removeStyle = _interopRequireDefault(require("dom-lib/removeStyle"));
-var _requestAnimationTimeout = require("./requestAnimationTimeout");
-var _useUpdateEffect = _interopRequireDefault(require("./useUpdateEffect"));
-var _useMount = _interopRequireDefault(require("./useMount"));
+var _scrollLeft = _interopRequireDefault(require("dom-lib/scrollLeft"));
+var _scrollTop = _interopRequireDefault(require("dom-lib/scrollTop"));
+var _WheelHandler = _interopRequireDefault(require("dom-lib/WheelHandler"));
+var _react = require("react");
 var _constants = require("../constants");
-var _isSupportTouchEvent = _interopRequireDefault(require("./isSupportTouchEvent"));
-var _flushSync = _interopRequireDefault(require("./flushSync"));
 var _defer = _interopRequireDefault(require("./defer"));
+var _flushSync = _interopRequireDefault(require("./flushSync"));
+var _isSupportTouchEvent = _interopRequireDefault(require("./isSupportTouchEvent"));
+var _requestAnimationTimeout = require("./requestAnimationTimeout");
+var _useMount = _interopRequireDefault(require("./useMount"));
+var _useUpdateEffect = _interopRequireDefault(require("./useUpdateEffect"));
 // Inertial sliding start time threshold
 var momentumTimeThreshold = 300;
 
@@ -73,10 +73,10 @@ var useScrollListener = function useScrollListener(props) {
     headerHeight = props.headerHeight,
     rtl = props.rtl,
     tableKey = props.tableKey;
-  var wheelListener = (0, _react.useRef)();
-  var touchStartListener = (0, _react.useRef)();
-  var touchMoveListener = (0, _react.useRef)();
-  var touchEndListener = (0, _react.useRef)();
+  var wheelListener = (0, _react.useRef)(null);
+  var touchStartListener = (0, _react.useRef)(null);
+  var touchMoveListener = (0, _react.useRef)(null);
+  var touchEndListener = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     isChildFocused = _useState[0],
     setIsChildFocused = _useState[1];
@@ -168,7 +168,7 @@ var useScrollListener = function useScrollListener(props) {
     (_scrollbarXRef$curren = scrollbarXRef.current) === null || _scrollbarXRef$curren === void 0 ? void 0 : (_scrollbarXRef$curren2 = _scrollbarXRef$curren.onWheelScroll) === null || _scrollbarXRef$curren2 === void 0 ? void 0 : _scrollbarXRef$curren2.call(_scrollbarXRef$curren, deltaX);
     (_scrollbarYRef$curren = scrollbarYRef.current) === null || _scrollbarYRef$curren === void 0 ? void 0 : (_scrollbarYRef$curren2 = _scrollbarYRef$curren.onWheelScroll) === null || _scrollbarYRef$curren2 === void 0 ? void 0 : _scrollbarYRef$curren2.call(_scrollbarYRef$curren, deltaY, momentumOptions !== null && momentumOptions !== void 0 && momentumOptions.duration ? true : false);
   }, [handleWheel, scrollbarXRef, scrollbarYRef]);
-  var wheelHandler = (0, _react.useRef)();
+  var wheelHandler = (0, _react.useRef)(null);
 
   // Stop unending scrolling and remove transition
   var stopScroll = (0, _react.useCallback)(function () {

package/lib/utils/useTableDimension.d.ts

@@ -5,8 +5,8 @@ interface TableDimensionProps<Row, Key> {
     rowHeight: number | ((rowData?: Row) => number);
     height: number;
     minHeight: number;
-    tableRef?: React.RefObject<HTMLDivElement>;
-    headerWrapperRef?: React.RefObject<HTMLDivElement>;
+    tableRef?: React.RefObject<HTMLDivElement | null>;
+    headerWrapperRef?: React.RefObject<HTMLDivElement | null>;
     width?: number;
     prefix: (str: string) => string;
     affixHeader?: boolean | number;
@@ -31,15 +31,15 @@ interface TableDimensionProps<Row, Key> {
  * @returns
  */
 declare const useTableDimension: <Row extends RowDataType<never>, Key>(props: TableDimensionProps<Row, Key>) => {
-    contentHeight: React.MutableRefObject<number>;
-    contentWidth: React.MutableRefObject<number>;
-    minScrollY: React.MutableRefObject<number>;
-    minScrollX: React.MutableRefObject<number>;
-    scrollY: React.MutableRefObject<number>;
-    scrollX: React.MutableRefObject<number>;
-    tableWidth: React.MutableRefObject<number>;
-    headerOffset: React.MutableRefObject<ElementOffset | null>;
-    tableOffset: React.MutableRefObject<ElementOffset | null>;
+    contentHeight: React.RefObject<number>;
+    contentWidth: React.RefObject<number>;
+    minScrollY: React.RefObject<number>;
+    minScrollX: React.RefObject<number>;
+    scrollY: React.RefObject<number>;
+    scrollX: React.RefObject<number>;
+    tableWidth: React.RefObject<number>;
+    headerOffset: React.RefObject<ElementOffset | null>;
+    tableOffset: React.RefObject<ElementOffset | null>;
     getTableHeight: () => number;
     setScrollY: (value: number) => void;
     setScrollX: (value: number) => void;

package/lib/utils/useTableDimension.js

@@ -48,8 +48,8 @@ var useTableDimension = function useTableDimension(props) {
   var tableWidth = (0, _react.useRef)(widthProp || 0);
   var tableHeight = (0, _react.useRef)(heightProp || 0);
   var columnCount = (0, _react.useRef)(0);
-  var resizeObserver = (0, _react.useRef)();
-  var containerResizeObserver = (0, _react.useRef)();
+  var resizeObserver = (0, _react.useRef)(null);
+  var containerResizeObserver = (0, _react.useRef)(null);
   var headerOffset = (0, _react.useRef)(null);
   var tableOffset = (0, _react.useRef)(null);
   var getRowHeight = (0, _react.useCallback)(function (rowData) {

package/lib/utils/useTableRows.d.ts

@@ -14,7 +14,7 @@ interface TableRowsProps<Row, Key> {
 declare const useTableRows: <Row extends RowDataType<never>, Key>(props: TableRowsProps<Row, Key>) => {
     bindTableRowsRef: (index: number | string, rowData: any) => (ref: HTMLElement) => void;
     tableRowsMaxHeight: number[];
-    tableRows: import("react").MutableRefObject<{
+    tableRows: import("react").RefObject<{
         [key: string]: [HTMLElement, any];
     }>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qbs-react-grid",
-  "version": "1.3.16",
+  "version": "2.0.1",
   "description": "A React table component",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -51,8 +51,8 @@
   },
   "peerDependencies": {
     "prop-types": "^15.7.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
     "react-router-dom": "^6.21.0",
     "rsuite": "^5.21.0"
   },
@@ -75,8 +75,8 @@
     "@testing-library/react": "^13.4.0",
     "@types/lodash": "^4.14.165",
     "@types/prop-types": "^15.7.1",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^19.0.11",
+    "@types/react-dom": "^19.0.4",
     "@typescript-eslint/eslint-plugin": "^4.28.2",
     "@typescript-eslint/parser": "^4.28.2",
     "autoprefixer": "^10.4.20",
@@ -128,11 +128,11 @@
     "postcss-loader": "^8.1.1",
     "prettier": "^2.3.2",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
+    "react": "^19.0.0",
     "react-code-view": "^2.2.1",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.0.0",
     "rsuite": "^5.21.0",
     "sinon": "^11.1.2",
     "sinon-chai": "^3.7.0",

package/src/ColumnGroup.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { useClassNames } from './utils';
+import React from 'react';
 import { StandardProps } from './@types/common';
+import { useClassNames } from './utils';
 
 export interface ColumnGroupProps extends StandardProps {
   /** Alignment */
@@ -49,7 +49,18 @@ const ColumnGroup = React.forwardRef((props: ColumnGroupProps, ref: React.Ref<HT
   const { withClassPrefix, merge, prefix } = useClassNames(classPrefix);
   const classes = merge(className, withClassPrefix());
   const contentStyles = { ...styles, textAlign: align, verticalAlign };
+  interface NodeProps {
+    verticalAlign?: string;
+    children?: React.ReactNode;
+  }
 
+  interface MyComponentProps {
+    className?: string;
+    predefinedStyle?: React.CSSProperties;
+    headerHeight: number;
+    verticalAlign?: any;
+    children: any;
+  }
   return (
     <div ref={ref} className={classes} {...rest}>
       <div className={prefix('header')} style={styles}>
@@ -59,15 +70,18 @@ const ColumnGroup = React.forwardRef((props: ColumnGroupProps, ref: React.Ref<HT
       </div>
 
       {children
-        ? React.Children.map(children as React.ReactElement[], (node: React.ReactElement) => {
-            return React.cloneElement(node, {
-              className: prefix('cell'),
-              predefinedStyle: { height: restHeight, top: styles.height },
-              headerHeight: restHeight,
-              verticalAlign: node.props.verticalAlign || verticalAlign,
-              children: <span className={prefix('cell-content')}>{node.props.children}</span>
-            });
-          })
+        ? React.Children.map(
+            children as React.ReactElement<NodeProps>[],
+            (node: React.ReactElement<NodeProps>) => {
+              return React.cloneElement(node as React.ReactElement<MyComponentProps>, {
+                className: prefix('cell'),
+                predefinedStyle: { height: restHeight, top: styles.height },
+                headerHeight: restHeight,
+                verticalAlign: node.props.verticalAlign || verticalAlign,
+                children: <span className={prefix('cell-content')}>{node.props.children}</span>
+              });
+            }
+          )
         : null}
     </div>
   );

package/src/ColumnResizeHandler.tsx

@@ -46,8 +46,8 @@ const ColumnResizeHandler = React.forwardRef(
     const classes = merge(className, withClassPrefix());
 
     const columnWidth = useRef(defaultColumnWidth || 0);
-    const mouseMoveTracker = useRef<DOMMouseMoveTracker | null>();
-    const isKeyDown = useRef<boolean>();
+    const mouseMoveTracker = useRef<DOMMouseMoveTracker | null>(null);
+    const isKeyDown = useRef<boolean>(false);
     const cursorDelta = useRef<number>(0);
 
     const handleMove = useCallback(

package/src/Scrollbar.tsx

@@ -51,7 +51,7 @@ const Scrollbar = React.forwardRef((props: ScrollbarProps, ref) => {
   const scrollRange = useRef(scrollLength);
   const barRef = useRef<HTMLDivElement>(null);
   const handleRef = useRef<HTMLDivElement>(null);
-  const mouseMoveTracker = useRef<DOMMouseMoveTracker | null>();
+  const mouseMoveTracker = useRef<DOMMouseMoveTracker | null>(null);
 
   const { withClassPrefix, merge, prefix } = useClassNames(classPrefix);
   const classes = merge(

package/src/Table.tsx

@@ -49,12 +49,12 @@ import {
 } from './utils';
 
 import type {
-  StandardProps,
-  SortType,
+  RowDataType,
   RowKeyType,
+  SortType,
+  StandardProps,
   TableLocaleType,
-  TableSizeChangeEventName,
-  RowDataType
+  TableSizeChangeEventName
 } from './@types/common';
 /**
  * Filter those expanded nodes.