qbs-react-grid 1.3.15 → 2.0.1

package/es/ColumnGroup.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["header", "className", "children", "classPrefix", "headerHeight", "verticalAlign", "align", "width", "groupHeaderHeight"];
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import { useClassNames } from './utils';
 var ColumnGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var header = props.header,

package/es/ColumnResizeHandler.js

@@ -30,8 +30,8 @@ var ColumnResizeHandler = /*#__PURE__*/React.forwardRef(function (props, ref) {
     merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix());
   var columnWidth = useRef(defaultColumnWidth || 0);
-  var mouseMoveTracker = useRef();
-  var isKeyDown = useRef();
+  var mouseMoveTracker = useRef(null);
+  var isKeyDown = useRef(false);
   var cursorDelta = useRef(0);
   var handleMove = useCallback(function (deltaX) {
     if (!isKeyDown.current) {

package/es/Scrollbar.js

@@ -37,7 +37,7 @@ var Scrollbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var scrollRange = useRef(scrollLength);
   var barRef = useRef(null);
   var handleRef = useRef(null);
-  var mouseMoveTracker = useRef();
+  var mouseMoveTracker = useRef(null);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,

package/es/Table.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { StandardProps, SortType, RowKeyType, TableLocaleType, TableSizeChangeEventName, RowDataType } from './@types/common';
+import type { RowDataType, RowKeyType, SortType, StandardProps, TableLocaleType, TableSizeChangeEventName } from './@types/common';
 export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
     /**
      * The height of the table will be automatically expanded according to the number of data rows,

package/es/qbsTable/QbsTable.js

@@ -123,7 +123,7 @@ var QbsTable = function QbsTable(_ref) {
   var _useState4 = useState(false),
     isOpen = _useState4[0],
     setIsOpen = _useState4[1];
-  var prevColumns = useRef();
+  var prevColumns = useRef(null);
   var _useState5 = useState(tableView),
     tableViewToggle = _useState5[0],
     setTableViewToggle = _useState5[1];
@@ -336,13 +336,126 @@ var QbsTable = function QbsTable(_ref) {
     prevColumns.current = columns;
   }, [columns, handleColumnsResizable]);
   useEffect(function () {
-    setTableViewToggle(!isMobile);
+    if (tableView) {
+      setTableViewToggle(!isMobile);
+    } else {
+      setTableViewToggle(false);
+    }
   }, [isMobile]);
   var findGrouped = function findGrouped() {
     return columns !== null && columns !== void 0 && columns.find(function (item) {
       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 = useMemo(function () {
     return (columns != null ? columns : []).map(function (_ref3) {
       var title = _ref3.title,
@@ -364,13 +477,13 @@ var QbsTable = function QbsTable(_ref) {
         sortKey = _ref3.sortKey,
         type = _ref3.type,
         hideLink = _ref3.hideLink;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isVisible && /*#__PURE__*/React.createElement(React.Fragment, null, grouped ? /*#__PURE__*/React.createElement(ColumnGroup, {
+      return isVisible ? grouped ? /*#__PURE__*/React.createElement(ColumnGroup, {
         header: groupHeader,
         fixed: fixed,
         align: align,
         verticalAlign: "middle",
         groupHeaderHeight: 40
-      }, /*#__PURE__*/React.createElement(React.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.createElement(Column, {
           key: child.title,
@@ -382,7 +495,7 @@ var QbsTable = function QbsTable(_ref) {
           fixed: child.fixed
         }, /*#__PURE__*/React.createElement(HeaderCell, {
           dataTheme: dataTheme,
-          verticalAlign: 'middle',
+          verticalAlign: "middle",
           className: " " + classes.headerClass,
           sortKey: child.sortKey,
           renderSortIcon: renderSortIcon
@@ -398,7 +511,7 @@ var QbsTable = function QbsTable(_ref) {
           dataKey: child.field,
           dataTheme: dataTheme
         }));
-      }))) : /*#__PURE__*/React.createElement(Column, {
+      })) : /*#__PURE__*/React.createElement(Column, {
         key: title,
         sortable: sortable,
         width: colWidth != null ? colWidth : COLUMN_WIDTH,
@@ -425,9 +538,12 @@ var QbsTable = function QbsTable(_ref) {
         dataKey: field,
         dataTheme: dataTheme,
         className: " " + classes.cellClass
-      }))));
-    });
-  }, [columns, dataTheme]);
+      })) : /*#__PURE__*/React.createElement(React.Fragment, null);
+    } // ✅ Fix: Return `null` instead of `false`
+    ).filter(Boolean);
+  },
+  // ✅ Fix: Remove `undefined` and `false` elements
+  [columns, dataTheme]);
   return /*#__PURE__*/React.createElement("div", {
     className: "qbs-table " + classes.tableContainerClass,
     "data-theme": dataTheme

package/es/qbsTable/TableCardList.js

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

package/es/utils/getTableColumns.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import flatten from 'lodash/flatten';
 import React from 'react';
 import * as ReactIs from 'react-is';
-import flatten from 'lodash/flatten';
 import ColumnGroup from '../ColumnGroup';
 
 /**
@@ -14,13 +14,13 @@ function getTableColumns(children) {
   var flattenColumns = flatten(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) {
-      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.
@@ -49,9 +49,9 @@ function getTableColumns(children) {
         return /*#__PURE__*/React.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/es/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/es/utils/useAffix.js

@@ -1,10 +1,10 @@
-import { useRef, useCallback, useEffect } from 'react';
-import getHeight from 'dom-lib/getHeight';
 import addStyle from 'dom-lib/addStyle';
-import removeStyle from 'dom-lib/removeStyle';
+import getHeight from 'dom-lib/getHeight';
 import on from 'dom-lib/on';
-import toggleClass from './toggleClass';
+import removeStyle from 'dom-lib/removeStyle';
+import { useCallback, useEffect, useRef } from 'react';
 import isNumberOrTrue from './isNumberOrTrue';
+import toggleClass from './toggleClass';
 import useUpdateEffect from './useUpdateEffect';
 var useAffix = function useAffix(props) {
   var getTableHeight = props.getTableHeight,
@@ -16,7 +16,7 @@ var useAffix = function useAffix(props) {
     headerHeight = props.headerHeight,
     scrollbarXRef = props.scrollbarXRef,
     affixHeaderWrapperRef = props.affixHeaderWrapperRef;
-  var scrollListener = useRef();
+  var scrollListener = useRef(null);
   var handleAffixHorizontalScrollbar = useCallback(function () {
     var _tableOffset$current, _scrollbarXRef$curren;
     var scrollY = window.scrollY || window.pageYOffset;

package/es/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/es/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/es/utils/usePosition.js

@@ -1,10 +1,10 @@
-import { useCallback, useRef } from 'react';
 import addStyle from 'dom-lib/addStyle';
+import { useCallback, useRef } from 'react';
 import { SCROLLBAR_WIDTH } from '../constants';
+import defer from './defer';
+import isSupportTouchEvent from './isSupportTouchEvent';
 import toggleClass from './toggleClass';
 import useUpdateEffect from './useUpdateEffect';
-import isSupportTouchEvent from './isSupportTouchEvent';
-import defer from './defer';
 /**
  * Update the position of the table according to the scrolling information of the table.
  * @param props

package/es/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/es/utils/useScrollListener.js

@@ -1,16 +1,16 @@
-import { useRef, useCallback, useState, useEffect } from 'react';
-import WheelHandler from 'dom-lib/WheelHandler';
-import scrollLeft from 'dom-lib/scrollLeft';
-import scrollTop from 'dom-lib/scrollTop';
 import on from 'dom-lib/on';
 import removeStyle from 'dom-lib/removeStyle';
-import { requestAnimationTimeout, cancelAnimationTimeout } from './requestAnimationTimeout';
-import useUpdateEffect from './useUpdateEffect';
-import useMount from './useMount';
-import { SCROLLBAR_WIDTH, TRANSITION_DURATION, BEZIER } from '../constants';
-import isSupportTouchEvent from './isSupportTouchEvent';
-import flushSync from './flushSync';
+import scrollLeft from 'dom-lib/scrollLeft';
+import scrollTop from 'dom-lib/scrollTop';
+import WheelHandler from 'dom-lib/WheelHandler';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { BEZIER, SCROLLBAR_WIDTH, TRANSITION_DURATION } from '../constants';
 import defer from './defer';
+import flushSync from './flushSync';
+import isSupportTouchEvent from './isSupportTouchEvent';
+import { cancelAnimationTimeout, requestAnimationTimeout } from './requestAnimationTimeout';
+import useMount from './useMount';
+import useUpdateEffect from './useUpdateEffect';
 
 // Inertial sliding start time threshold
 var momentumTimeThreshold = 300;
@@ -69,10 +69,10 @@ var useScrollListener = function useScrollListener(props) {
     headerHeight = props.headerHeight,
     rtl = props.rtl,
     tableKey = props.tableKey;
-  var wheelListener = useRef();
-  var touchStartListener = useRef();
-  var touchMoveListener = useRef();
-  var touchEndListener = useRef();
+  var wheelListener = useRef(null);
+  var touchStartListener = useRef(null);
+  var touchMoveListener = useRef(null);
+  var touchEndListener = useRef(null);
   var _useState = useState(false),
     isChildFocused = _useState[0],
     setIsChildFocused = _useState[1];
@@ -164,7 +164,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 = useRef();
+  var wheelHandler = useRef(null);
 
   // Stop unending scrolling and remove transition
   var stopScroll = useCallback(function () {

package/es/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/es/utils/useTableDimension.js

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

package/es/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/lib/ColumnGroup.js

@@ -5,8 +5,8 @@ exports.__esModule = true;
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
 var _utils = require("./utils");
 var _excluded = ["header", "className", "children", "classPrefix", "headerHeight", "verticalAlign", "align", "width", "groupHeaderHeight"];
 var ColumnGroup = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {

package/lib/ColumnResizeHandler.js

@@ -37,8 +37,8 @@ var ColumnResizeHandler = /*#__PURE__*/_react["default"].forwardRef(function (pr
     merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix());
   var columnWidth = (0, _react.useRef)(defaultColumnWidth || 0);
-  var mouseMoveTracker = (0, _react.useRef)();
-  var isKeyDown = (0, _react.useRef)();
+  var mouseMoveTracker = (0, _react.useRef)(null);
+  var isKeyDown = (0, _react.useRef)(false);
   var cursorDelta = (0, _react.useRef)(0);
   var handleMove = (0, _react.useCallback)(function (deltaX) {
     if (!isKeyDown.current) {

package/lib/Scrollbar.js

@@ -44,7 +44,7 @@ var Scrollbar = /*#__PURE__*/_react["default"].forwardRef(function (props, ref)
   var scrollRange = (0, _react.useRef)(scrollLength);
   var barRef = (0, _react.useRef)(null);
   var handleRef = (0, _react.useRef)(null);
-  var mouseMoveTracker = (0, _react.useRef)();
+  var mouseMoveTracker = (0, _react.useRef)(null);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,

package/lib/Table.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { StandardProps, SortType, RowKeyType, TableLocaleType, TableSizeChangeEventName, RowDataType } from './@types/common';
+import type { RowDataType, RowKeyType, SortType, StandardProps, TableLocaleType, TableSizeChangeEventName } from './@types/common';
 export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
     /**
      * The height of the table will be automatically expanded according to the number of data rows,