qbs-react-grid 1.3.16 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/es/ColumnGroup.js +1 -1
  2. package/es/ColumnResizeHandler.js +2 -2
  3. package/es/Scrollbar.js +1 -1
  4. package/es/Table.d.ts +1 -1
  5. package/es/qbsTable/QbsTable.js +120 -8
  6. package/es/qbsTable/TableCardList.js +1 -1
  7. package/es/utils/getTableColumns.js +10 -10
  8. package/es/utils/useAffix.d.ts +4 -4
  9. package/es/utils/useAffix.js +5 -5
  10. package/es/utils/useCellDescriptor.d.ts +2 -2
  11. package/es/utils/usePosition.d.ts +5 -5
  12. package/es/utils/usePosition.js +3 -3
  13. package/es/utils/useScrollListener.d.ts +4 -4
  14. package/es/utils/useScrollListener.js +15 -15
  15. package/es/utils/useTableDimension.d.ts +11 -11
  16. package/es/utils/useTableDimension.js +2 -2
  17. package/es/utils/useTableRows.d.ts +1 -1
  18. package/lib/ColumnGroup.js +1 -1
  19. package/lib/ColumnResizeHandler.js +2 -2
  20. package/lib/Scrollbar.js +1 -1
  21. package/lib/Table.d.ts +1 -1
  22. package/lib/qbsTable/QbsTable.js +120 -8
  23. package/lib/qbsTable/TableCardList.js +1 -1
  24. package/lib/utils/getTableColumns.js +10 -10
  25. package/lib/utils/useAffix.d.ts +4 -4
  26. package/lib/utils/useAffix.js +5 -5
  27. package/lib/utils/useCellDescriptor.d.ts +2 -2
  28. package/lib/utils/usePosition.d.ts +5 -5
  29. package/lib/utils/usePosition.js +3 -3
  30. package/lib/utils/useScrollListener.d.ts +4 -4
  31. package/lib/utils/useScrollListener.js +14 -14
  32. package/lib/utils/useTableDimension.d.ts +11 -11
  33. package/lib/utils/useTableDimension.js +2 -2
  34. package/lib/utils/useTableRows.d.ts +1 -1
  35. package/package.json +7 -7
  36. package/src/ColumnGroup.tsx +25 -11
  37. package/src/ColumnResizeHandler.tsx +2 -2
  38. package/src/Scrollbar.tsx +1 -1
  39. package/src/Table.tsx +4 -4
  40. package/src/qbsTable/QbsTable.tsx +222 -116
  41. package/src/qbsTable/TableCardList.tsx +2 -2
  42. package/src/utils/getTableColumns.ts +4 -4
  43. package/src/utils/useAffix.ts +11 -11
  44. package/src/utils/useCellDescriptor.ts +4 -4
  45. package/src/utils/usePosition.ts +9 -9
  46. package/src/utils/useScrollListener.ts +19 -19
  47. package/src/utils/useTableDimension.ts +4 -4
package/es/ColumnGroup.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
3
  var _excluded = ["header", "className", "children", "classPrefix", "headerHeight", "verticalAlign", "align", "width", "groupHeaderHeight"];
4
- import React from 'react';
5
4
  import PropTypes from 'prop-types';
5
+ import React from 'react';
6
6
  import { useClassNames } from './utils';
7
7
  var ColumnGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
8
8
  var header = props.header,
@@ -30,8 +30,8 @@ var ColumnResizeHandler = /*#__PURE__*/React.forwardRef(function (props, ref) {
30
30
  merge = _useClassNames.merge;
31
31
  var classes = merge(className, withClassPrefix());
32
32
  var columnWidth = useRef(defaultColumnWidth || 0);
33
- var mouseMoveTracker = useRef();
34
- var isKeyDown = useRef();
33
+ var mouseMoveTracker = useRef(null);
34
+ var isKeyDown = useRef(false);
35
35
  var cursorDelta = useRef(0);
36
36
  var handleMove = useCallback(function (deltaX) {
37
37
  if (!isKeyDown.current) {
package/es/Scrollbar.js CHANGED
@@ -37,7 +37,7 @@ var Scrollbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
37
37
  var scrollRange = useRef(scrollLength);
38
38
  var barRef = useRef(null);
39
39
  var handleRef = useRef(null);
40
- var mouseMoveTracker = useRef();
40
+ var mouseMoveTracker = useRef(null);
41
41
  var _useClassNames = useClassNames(classPrefix),
42
42
  withClassPrefix = _useClassNames.withClassPrefix,
43
43
  merge = _useClassNames.merge,
package/es/Table.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import type { StandardProps, SortType, RowKeyType, TableLocaleType, TableSizeChangeEventName, RowDataType } from './@types/common';
2
+ import type { RowDataType, RowKeyType, SortType, StandardProps, TableLocaleType, TableSizeChangeEventName } from './@types/common';
3
3
  export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
4
4
  /**
5
5
  * The height of the table will be automatically expanded according to the number of data rows,
@@ -123,7 +123,7 @@ var QbsTable = function QbsTable(_ref) {
123
123
  var _useState4 = useState(false),
124
124
  isOpen = _useState4[0],
125
125
  setIsOpen = _useState4[1];
126
- var prevColumns = useRef();
126
+ var prevColumns = useRef(null);
127
127
  var _useState5 = useState(tableView),
128
128
  tableViewToggle = _useState5[0],
129
129
  setTableViewToggle = _useState5[1];
@@ -347,6 +347,115 @@ var QbsTable = function QbsTable(_ref) {
347
347
  return item.grouped;
348
348
  }) ? true : false;
349
349
  };
350
+ // const columnsRendered: React.ReactElement[] = useMemo(
351
+ // () =>
352
+ // (columns ?? []).map(
353
+ // ({
354
+ // title,
355
+ // field,
356
+ // resizable,
357
+ // sortable,
358
+ // colWidth,
359
+ // align,
360
+ // grouped,
361
+ // groupHeader,
362
+ // fixed,
363
+ // children,
364
+ // customCell,
365
+ // renderCell,
366
+ // isVisible,
367
+ // link,
368
+ // getPath,
369
+ // rowClick,
370
+ // sortKey,
371
+ // type,
372
+ // hideLink
373
+ // }) =>
374
+ // isVisible &&
375
+ // (grouped ? (
376
+ // <ColumnGroup
377
+ // header={groupHeader}
378
+ // fixed={fixed}
379
+ // align={align}
380
+ // verticalAlign="middle"
381
+ // groupHeaderHeight={40}
382
+ // >
383
+ // {children?.map(child => (
384
+ // <Column
385
+ // key={child.title}
386
+ // sortable={child.sortable}
387
+ // width={child.colWidth ?? COLUMN_WIDTH}
388
+ // resizable={child.resizable}
389
+ // align={child.align}
390
+ // onResize={handleColumnWidth}
391
+ // fixed={child.fixed}
392
+ // >
393
+ // <HeaderCell
394
+ // dataTheme={dataTheme}
395
+ // verticalAlign={'middle'}
396
+ // className={` ${classes.headerClass}`}
397
+ // sortKey={child.sortKey}
398
+ // renderSortIcon={renderSortIcon}
399
+ // >
400
+ // {child.title}
401
+ // </HeaderCell>
402
+ // {child.customCell || child.link ? (
403
+ // <CustomTableCell
404
+ // renderCell={child.renderCell}
405
+ // dataKey={child.field}
406
+ // dataTheme={dataTheme}
407
+ // type={child.type}
408
+ // path={child.getPath}
409
+ // link={child.link}
410
+ // />
411
+ // ) : (
412
+ // <Cell
413
+ // className={` ${classes.cellClass}`}
414
+ // dataKey={child.field}
415
+ // dataTheme={dataTheme}
416
+ // />
417
+ // )}
418
+ // </Column>
419
+ // ))}
420
+ // </ColumnGroup>
421
+ // ) : (
422
+ // <Column
423
+ // key={title}
424
+ // sortable={sortable}
425
+ // width={colWidth ?? COLUMN_WIDTH}
426
+ // resizable={resizable}
427
+ // align={align}
428
+ // fixed={fixed}
429
+ // onResize={handleColumnWidth}
430
+ // >
431
+ // <HeaderCell
432
+ // dataTheme={dataTheme}
433
+ // verticalAlign={findGrouped() ? 'middle' : undefined}
434
+ // className={` ${classes.headerClass}`}
435
+ // sortKey={sortKey}
436
+ // renderSortIcon={renderSortIcon}
437
+ // >
438
+ // {title}
439
+ // </HeaderCell>
440
+ // {customCell || link ? (
441
+ // <CustomTableCell
442
+ // renderCell={renderCell}
443
+ // dataKey={field}
444
+ // rowClick={rowClick}
445
+ // type={type}
446
+ // hideLink={hideLink}
447
+ // path={getPath}
448
+ // dataTheme={dataTheme}
449
+ // link={link}
450
+ // />
451
+ // ) : (
452
+ // <Cell dataKey={field} dataTheme={dataTheme} className={` ${classes.cellClass}`} />
453
+ // )}
454
+ // </Column>
455
+ // ))
456
+ // ),
457
+ // [columns, dataTheme]
458
+ // );
350
459
  var columnsRendered = useMemo(function () {
351
460
  return (columns != null ? columns : []).map(function (_ref3) {
352
461
  var title = _ref3.title,
@@ -368,13 +477,13 @@ var QbsTable = function QbsTable(_ref) {
368
477
  sortKey = _ref3.sortKey,
369
478
  type = _ref3.type,
370
479
  hideLink = _ref3.hideLink;
371
- return /*#__PURE__*/React.createElement(React.Fragment, null, isVisible && /*#__PURE__*/React.createElement(React.Fragment, null, grouped ? /*#__PURE__*/React.createElement(ColumnGroup, {
480
+ return isVisible ? grouped ? /*#__PURE__*/React.createElement(ColumnGroup, {
372
481
  header: groupHeader,
373
482
  fixed: fixed,
374
483
  align: align,
375
484
  verticalAlign: "middle",
376
485
  groupHeaderHeight: 40
377
- }, /*#__PURE__*/React.createElement(React.Fragment, null, children === null || children === void 0 ? void 0 : children.map(function (child) {
486
+ }, children === null || children === void 0 ? void 0 : children.map(function (child) {
378
487
  var _child$colWidth;
379
488
  return /*#__PURE__*/React.createElement(Column, {
380
489
  key: child.title,
@@ -386,7 +495,7 @@ var QbsTable = function QbsTable(_ref) {
386
495
  fixed: child.fixed
387
496
  }, /*#__PURE__*/React.createElement(HeaderCell, {
388
497
  dataTheme: dataTheme,
389
- verticalAlign: 'middle',
498
+ verticalAlign: "middle",
390
499
  className: " " + classes.headerClass,
391
500
  sortKey: child.sortKey,
392
501
  renderSortIcon: renderSortIcon
@@ -402,7 +511,7 @@ var QbsTable = function QbsTable(_ref) {
402
511
  dataKey: child.field,
403
512
  dataTheme: dataTheme
404
513
  }));
405
- }))) : /*#__PURE__*/React.createElement(Column, {
514
+ })) : /*#__PURE__*/React.createElement(Column, {
406
515
  key: title,
407
516
  sortable: sortable,
408
517
  width: colWidth != null ? colWidth : COLUMN_WIDTH,
@@ -429,9 +538,12 @@ var QbsTable = function QbsTable(_ref) {
429
538
  dataKey: field,
430
539
  dataTheme: dataTheme,
431
540
  className: " " + classes.cellClass
432
- }))));
433
- });
434
- }, [columns, dataTheme]);
541
+ })) : /*#__PURE__*/React.createElement(React.Fragment, null);
542
+ } // ✅ Fix: Return `null` instead of `false`
543
+ ).filter(Boolean);
544
+ },
545
+ // ✅ Fix: Remove `undefined` and `false` elements
546
+ [columns, dataTheme]);
435
547
  return /*#__PURE__*/React.createElement("div", {
436
548
  className: "qbs-table " + classes.tableContainerClass,
437
549
  "data-theme": dataTheme
@@ -108,7 +108,7 @@ var QbsTable = function QbsTable(_ref) {
108
108
  var _useState4 = useState(false),
109
109
  isOpen = _useState4[0],
110
110
  setIsOpen = _useState4[1];
111
- var prevColumns = useRef();
111
+ var prevColumns = useRef(null);
112
112
  var tableBodyRef = useRef(null);
113
113
  var handleSortColumn = useCallback(function (sortColumn, sortType) {
114
114
  setLoading(true);
@@ -1,7 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import flatten from 'lodash/flatten';
2
3
  import React from 'react';
3
4
  import * as ReactIs from 'react-is';
4
- import flatten from 'lodash/flatten';
5
5
  import ColumnGroup from '../ColumnGroup';
6
6
 
7
7
  /**
@@ -14,13 +14,13 @@ function getTableColumns(children) {
14
14
  var flattenColumns = flatten(childrenArray).map(function (column) {
15
15
  // If the column is a group, we need to get the columns from the children.
16
16
  if ((column === null || column === void 0 ? void 0 : column.type) === ColumnGroup) {
17
- var _column$props = column === null || column === void 0 ? void 0 : column.props,
18
- header = _column$props.header,
19
- groupChildren = _column$props.children,
20
- align = _column$props.align,
21
- fixed = _column$props.fixed,
22
- verticalAlign = _column$props.verticalAlign,
23
- groupHeaderHeight = _column$props.groupHeaderHeight;
17
+ var _ref = column === null || column === void 0 ? void 0 : column.props,
18
+ header = _ref.header,
19
+ groupChildren = _ref.children,
20
+ align = _ref.align,
21
+ fixed = _ref.fixed,
22
+ verticalAlign = _ref.verticalAlign,
23
+ groupHeaderHeight = _ref.groupHeaderHeight;
24
24
  var childColumns = getTableColumns(groupChildren);
25
25
  return childColumns.map(function (childColumn, index) {
26
26
  // Overwrite the props set by ColumnGroup to Column.
@@ -49,9 +49,9 @@ function getTableColumns(children) {
49
49
  return /*#__PURE__*/React.cloneElement(childColumn, groupCellProps);
50
50
  });
51
51
  } else if (ReactIs.isFragment(column)) {
52
- var _column$props2;
52
+ var _column$props;
53
53
  // If the column is a fragment, we need to get the columns from the children.
54
- return getTableColumns((_column$props2 = column.props) === null || _column$props2 === void 0 ? void 0 : _column$props2.children);
54
+ return getTableColumns((_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.children);
55
55
  } else if (Array.isArray(column)) {
56
56
  // If the column is an array, need check item in the array.
57
57
  return getTableColumns(column);
@@ -6,11 +6,11 @@ interface AffixProps {
6
6
  contentHeight: React.MutableRefObject<number>;
7
7
  affixHeader?: boolean | number;
8
8
  affixHorizontalScrollbar?: boolean | number;
9
- tableOffset: React.RefObject<ElementOffset>;
10
- headerOffset: React.RefObject<ElementOffset>;
9
+ tableOffset: React.RefObject<ElementOffset | null>;
10
+ headerOffset: React.RefObject<ElementOffset | null>;
11
11
  headerHeight: number;
12
- scrollbarXRef: React.RefObject<ScrollbarInstance>;
13
- affixHeaderWrapperRef: React.RefObject<HTMLDivElement>;
12
+ scrollbarXRef: React.RefObject<ScrollbarInstance | null>;
13
+ affixHeaderWrapperRef: React.RefObject<HTMLDivElement | null>;
14
14
  }
15
15
  declare const useAffix: (props: AffixProps) => void;
16
16
  export default useAffix;
@@ -1,10 +1,10 @@
1
- import { useRef, useCallback, useEffect } from 'react';
2
- import getHeight from 'dom-lib/getHeight';
3
1
  import addStyle from 'dom-lib/addStyle';
4
- import removeStyle from 'dom-lib/removeStyle';
2
+ import getHeight from 'dom-lib/getHeight';
5
3
  import on from 'dom-lib/on';
6
- import toggleClass from './toggleClass';
4
+ import removeStyle from 'dom-lib/removeStyle';
5
+ import { useCallback, useEffect, useRef } from 'react';
7
6
  import isNumberOrTrue from './isNumberOrTrue';
7
+ import toggleClass from './toggleClass';
8
8
  import useUpdateEffect from './useUpdateEffect';
9
9
  var useAffix = function useAffix(props) {
10
10
  var getTableHeight = props.getTableHeight,
@@ -16,7 +16,7 @@ var useAffix = function useAffix(props) {
16
16
  headerHeight = props.headerHeight,
17
17
  scrollbarXRef = props.scrollbarXRef,
18
18
  affixHeaderWrapperRef = props.affixHeaderWrapperRef;
19
- var scrollListener = useRef();
19
+ var scrollListener = useRef(null);
20
20
  var handleAffixHorizontalScrollbar = useCallback(function () {
21
21
  var _tableOffset$current, _scrollbarXRef$curren;
22
22
  var scrollY = window.scrollY || window.pageYOffset;
@@ -15,8 +15,8 @@ interface CellDescriptorProps<Row> {
15
15
  onSortColumn?: (dataKey: string, sortType?: SortType) => void;
16
16
  onHeaderCellResize?: (width: number, dataKey: string) => void;
17
17
  rowHeight?: number | ((rowData?: Row) => number);
18
- mouseAreaRef: React.RefObject<HTMLDivElement>;
19
- tableRef: React.RefObject<HTMLDivElement>;
18
+ mouseAreaRef: React.RefObject<HTMLDivElement | null>;
19
+ tableRef: React.RefObject<HTMLDivElement | null>;
20
20
  }
21
21
  interface CellDescriptor {
22
22
  columns: React.ReactNode[];
@@ -4,13 +4,13 @@ interface PositionProps {
4
4
  data: readonly RowDataType[];
5
5
  height: number;
6
6
  tableWidth: React.MutableRefObject<number>;
7
- tableRef: React.RefObject<HTMLDivElement>;
7
+ tableRef: React.RefObject<HTMLDivElement | null>;
8
8
  prefix: (str: string) => string;
9
9
  translateDOMPositionXY: React.MutableRefObject<any>;
10
- wheelWrapperRef: React.RefObject<HTMLDivElement>;
11
- headerWrapperRef: React.RefObject<HTMLDivElement>;
12
- affixHeaderWrapperRef: React.RefObject<HTMLDivElement>;
13
- tableHeaderRef: React.RefObject<HTMLDivElement>;
10
+ wheelWrapperRef: React.RefObject<HTMLDivElement | null>;
11
+ headerWrapperRef: React.RefObject<HTMLDivElement | null>;
12
+ affixHeaderWrapperRef: React.RefObject<HTMLDivElement | null>;
13
+ tableHeaderRef: React.RefObject<HTMLDivElement | null>;
14
14
  scrollX: React.MutableRefObject<number>;
15
15
  scrollY: React.MutableRefObject<number>;
16
16
  contentWidth: React.MutableRefObject<number>;
@@ -1,10 +1,10 @@
1
- import { useCallback, useRef } from 'react';
2
1
  import addStyle from 'dom-lib/addStyle';
2
+ import { useCallback, useRef } from 'react';
3
3
  import { SCROLLBAR_WIDTH } from '../constants';
4
+ import defer from './defer';
5
+ import isSupportTouchEvent from './isSupportTouchEvent';
4
6
  import toggleClass from './toggleClass';
5
7
  import useUpdateEffect from './useUpdateEffect';
6
- import isSupportTouchEvent from './isSupportTouchEvent';
7
- import defer from './defer';
8
8
  /**
9
9
  * Update the position of the table according to the scrolling information of the table.
10
10
  * @param props
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
- import type { ScrollbarInstance } from '../Scrollbar';
3
2
  import type { RowDataType } from '../@types/common';
3
+ import type { ScrollbarInstance } from '../Scrollbar';
4
4
  interface ScrollListenerProps {
5
5
  rtl: boolean;
6
6
  data: readonly RowDataType[];
@@ -10,11 +10,11 @@ interface ScrollListenerProps {
10
10
  headerHeight: number;
11
11
  autoHeight?: boolean;
12
12
  tableBodyRef: React.RefObject<HTMLDivElement>;
13
- scrollbarXRef: React.RefObject<ScrollbarInstance>;
14
- scrollbarYRef: React.RefObject<ScrollbarInstance>;
13
+ scrollbarXRef: React.RefObject<ScrollbarInstance | null>;
14
+ scrollbarYRef: React.RefObject<ScrollbarInstance | null>;
15
15
  disabledScroll?: boolean;
16
16
  loading?: boolean;
17
- tableRef: React.RefObject<HTMLDivElement>;
17
+ tableRef: React.RefObject<HTMLDivElement | null>;
18
18
  contentWidth: React.MutableRefObject<number>;
19
19
  tableWidth: React.MutableRefObject<number>;
20
20
  scrollY: React.MutableRefObject<number>;
@@ -1,16 +1,16 @@
1
- import { useRef, useCallback, useState, useEffect } from 'react';
2
- import WheelHandler from 'dom-lib/WheelHandler';
3
- import scrollLeft from 'dom-lib/scrollLeft';
4
- import scrollTop from 'dom-lib/scrollTop';
5
1
  import on from 'dom-lib/on';
6
2
  import removeStyle from 'dom-lib/removeStyle';
7
- import { requestAnimationTimeout, cancelAnimationTimeout } from './requestAnimationTimeout';
8
- import useUpdateEffect from './useUpdateEffect';
9
- import useMount from './useMount';
10
- import { SCROLLBAR_WIDTH, TRANSITION_DURATION, BEZIER } from '../constants';
11
- import isSupportTouchEvent from './isSupportTouchEvent';
12
- import flushSync from './flushSync';
3
+ import scrollLeft from 'dom-lib/scrollLeft';
4
+ import scrollTop from 'dom-lib/scrollTop';
5
+ import WheelHandler from 'dom-lib/WheelHandler';
6
+ import { useCallback, useEffect, useRef, useState } from 'react';
7
+ import { BEZIER, SCROLLBAR_WIDTH, TRANSITION_DURATION } from '../constants';
13
8
  import defer from './defer';
9
+ import flushSync from './flushSync';
10
+ import isSupportTouchEvent from './isSupportTouchEvent';
11
+ import { cancelAnimationTimeout, requestAnimationTimeout } from './requestAnimationTimeout';
12
+ import useMount from './useMount';
13
+ import useUpdateEffect from './useUpdateEffect';
14
14
 
15
15
  // Inertial sliding start time threshold
16
16
  var momentumTimeThreshold = 300;
@@ -69,10 +69,10 @@ var useScrollListener = function useScrollListener(props) {
69
69
  headerHeight = props.headerHeight,
70
70
  rtl = props.rtl,
71
71
  tableKey = props.tableKey;
72
- var wheelListener = useRef();
73
- var touchStartListener = useRef();
74
- var touchMoveListener = useRef();
75
- var touchEndListener = useRef();
72
+ var wheelListener = useRef(null);
73
+ var touchStartListener = useRef(null);
74
+ var touchMoveListener = useRef(null);
75
+ var touchEndListener = useRef(null);
76
76
  var _useState = useState(false),
77
77
  isChildFocused = _useState[0],
78
78
  setIsChildFocused = _useState[1];
@@ -164,7 +164,7 @@ var useScrollListener = function useScrollListener(props) {
164
164
  (_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);
165
165
  (_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);
166
166
  }, [handleWheel, scrollbarXRef, scrollbarYRef]);
167
- var wheelHandler = useRef();
167
+ var wheelHandler = useRef(null);
168
168
 
169
169
  // Stop unending scrolling and remove transition
170
170
  var stopScroll = useCallback(function () {
@@ -5,8 +5,8 @@ interface TableDimensionProps<Row, Key> {
5
5
  rowHeight: number | ((rowData?: Row) => number);
6
6
  height: number;
7
7
  minHeight: number;
8
- tableRef?: React.RefObject<HTMLDivElement>;
9
- headerWrapperRef?: React.RefObject<HTMLDivElement>;
8
+ tableRef?: React.RefObject<HTMLDivElement | null>;
9
+ headerWrapperRef?: React.RefObject<HTMLDivElement | null>;
10
10
  width?: number;
11
11
  prefix: (str: string) => string;
12
12
  affixHeader?: boolean | number;
@@ -31,15 +31,15 @@ interface TableDimensionProps<Row, Key> {
31
31
  * @returns
32
32
  */
33
33
  declare const useTableDimension: <Row extends RowDataType<never>, Key>(props: TableDimensionProps<Row, Key>) => {
34
- contentHeight: React.MutableRefObject<number>;
35
- contentWidth: React.MutableRefObject<number>;
36
- minScrollY: React.MutableRefObject<number>;
37
- minScrollX: React.MutableRefObject<number>;
38
- scrollY: React.MutableRefObject<number>;
39
- scrollX: React.MutableRefObject<number>;
40
- tableWidth: React.MutableRefObject<number>;
41
- headerOffset: React.MutableRefObject<ElementOffset | null>;
42
- tableOffset: React.MutableRefObject<ElementOffset | null>;
34
+ contentHeight: React.RefObject<number>;
35
+ contentWidth: React.RefObject<number>;
36
+ minScrollY: React.RefObject<number>;
37
+ minScrollX: React.RefObject<number>;
38
+ scrollY: React.RefObject<number>;
39
+ scrollX: React.RefObject<number>;
40
+ tableWidth: React.RefObject<number>;
41
+ headerOffset: React.RefObject<ElementOffset | null>;
42
+ tableOffset: React.RefObject<ElementOffset | null>;
43
43
  getTableHeight: () => number;
44
44
  setScrollY: (value: number) => void;
45
45
  setScrollX: (value: number) => void;
@@ -43,8 +43,8 @@ var useTableDimension = function useTableDimension(props) {
43
43
  var tableWidth = useRef(widthProp || 0);
44
44
  var tableHeight = useRef(heightProp || 0);
45
45
  var columnCount = useRef(0);
46
- var resizeObserver = useRef();
47
- var containerResizeObserver = useRef();
46
+ var resizeObserver = useRef(null);
47
+ var containerResizeObserver = useRef(null);
48
48
  var headerOffset = useRef(null);
49
49
  var tableOffset = useRef(null);
50
50
  var getRowHeight = useCallback(function (rowData) {
@@ -14,7 +14,7 @@ interface TableRowsProps<Row, Key> {
14
14
  declare const useTableRows: <Row extends RowDataType<never>, Key>(props: TableRowsProps<Row, Key>) => {
15
15
  bindTableRowsRef: (index: number | string, rowData: any) => (ref: HTMLElement) => void;
16
16
  tableRowsMaxHeight: number[];
17
- tableRows: import("react").MutableRefObject<{
17
+ tableRows: import("react").RefObject<{
18
18
  [key: string]: [HTMLElement, any];
19
19
  }>;
20
20
  };
@@ -5,8 +5,8 @@ exports.__esModule = true;
5
5
  exports["default"] = void 0;
6
6
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
7
7
  var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
8
- var _react = _interopRequireDefault(require("react"));
9
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
+ var _react = _interopRequireDefault(require("react"));
10
10
  var _utils = require("./utils");
11
11
  var _excluded = ["header", "className", "children", "classPrefix", "headerHeight", "verticalAlign", "align", "width", "groupHeaderHeight"];
12
12
  var ColumnGroup = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
@@ -37,8 +37,8 @@ var ColumnResizeHandler = /*#__PURE__*/_react["default"].forwardRef(function (pr
37
37
  merge = _useClassNames.merge;
38
38
  var classes = merge(className, withClassPrefix());
39
39
  var columnWidth = (0, _react.useRef)(defaultColumnWidth || 0);
40
- var mouseMoveTracker = (0, _react.useRef)();
41
- var isKeyDown = (0, _react.useRef)();
40
+ var mouseMoveTracker = (0, _react.useRef)(null);
41
+ var isKeyDown = (0, _react.useRef)(false);
42
42
  var cursorDelta = (0, _react.useRef)(0);
43
43
  var handleMove = (0, _react.useCallback)(function (deltaX) {
44
44
  if (!isKeyDown.current) {
package/lib/Scrollbar.js CHANGED
@@ -44,7 +44,7 @@ var Scrollbar = /*#__PURE__*/_react["default"].forwardRef(function (props, ref)
44
44
  var scrollRange = (0, _react.useRef)(scrollLength);
45
45
  var barRef = (0, _react.useRef)(null);
46
46
  var handleRef = (0, _react.useRef)(null);
47
- var mouseMoveTracker = (0, _react.useRef)();
47
+ var mouseMoveTracker = (0, _react.useRef)(null);
48
48
  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
49
49
  withClassPrefix = _useClassNames.withClassPrefix,
50
50
  merge = _useClassNames.merge,
package/lib/Table.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import type { StandardProps, SortType, RowKeyType, TableLocaleType, TableSizeChangeEventName, RowDataType } from './@types/common';
2
+ import type { RowDataType, RowKeyType, SortType, StandardProps, TableLocaleType, TableSizeChangeEventName } from './@types/common';
3
3
  export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
4
4
  /**
5
5
  * The height of the table will be automatically expanded according to the number of data rows,