@mui/x-virtualizer 0.2.10 → 0.2.12

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 (46) hide show
  1. package/CHANGELOG.md +248 -0
  2. package/constants.d.ts +22 -0
  3. package/constants.js +26 -0
  4. package/esm/constants.d.ts +22 -0
  5. package/esm/constants.js +20 -0
  6. package/esm/features/colspan.d.ts +4 -4
  7. package/esm/features/dimensions.d.ts +14 -8
  8. package/esm/features/dimensions.js +26 -7
  9. package/esm/features/index.d.ts +1 -1
  10. package/esm/features/index.js +1 -1
  11. package/esm/features/keyboard.d.ts +3 -3
  12. package/esm/features/keyboard.js +1 -1
  13. package/esm/features/rowspan.d.ts +4 -4
  14. package/esm/features/virtualization/index.d.ts +2 -0
  15. package/esm/features/virtualization/index.js +2 -0
  16. package/esm/features/virtualization/layout.d.ts +129 -0
  17. package/esm/features/virtualization/layout.js +152 -0
  18. package/esm/features/{virtualization.d.ts → virtualization/virtualization.d.ts} +35 -58
  19. package/esm/features/{virtualization.js → virtualization/virtualization.js} +97 -134
  20. package/esm/index.d.ts +2 -1
  21. package/esm/index.js +3 -2
  22. package/esm/models/core.d.ts +7 -0
  23. package/esm/models/core.js +7 -0
  24. package/esm/models/dimensions.d.ts +8 -0
  25. package/esm/useVirtualizer.d.ts +25 -69
  26. package/esm/useVirtualizer.js +21 -4
  27. package/features/colspan.d.ts +4 -4
  28. package/features/dimensions.d.ts +14 -8
  29. package/features/dimensions.js +26 -7
  30. package/features/index.d.ts +1 -1
  31. package/features/keyboard.d.ts +3 -3
  32. package/features/rowspan.d.ts +4 -4
  33. package/features/virtualization/index.d.ts +2 -0
  34. package/features/virtualization/index.js +27 -0
  35. package/features/virtualization/layout.d.ts +129 -0
  36. package/features/virtualization/layout.js +163 -0
  37. package/features/{virtualization.d.ts → virtualization/virtualization.d.ts} +35 -58
  38. package/features/{virtualization.js → virtualization/virtualization.js} +97 -134
  39. package/index.d.ts +2 -1
  40. package/index.js +12 -1
  41. package/models/core.d.ts +7 -0
  42. package/models/core.js +8 -1
  43. package/models/dimensions.d.ts +8 -0
  44. package/package.json +2 -2
  45. package/useVirtualizer.d.ts +25 -69
  46. package/useVirtualizer.js +20 -3
@@ -21,9 +21,9 @@ var platform = _interopRequireWildcard(require("@mui/x-internals/platform"));
21
21
  var _useRunOnce = require("@mui/x-internals/useRunOnce");
22
22
  var _store = require("@mui/x-internals/store");
23
23
  var _reactMajor = _interopRequireDefault(require("@mui/x-internals/reactMajor"));
24
- var _core = require("../models/core");
25
- var _dimensions = require("./dimensions");
26
- var _models = require("../models");
24
+ var _core = require("../../models/core");
25
+ var _dimensions = require("../dimensions");
26
+ var _models = require("../../models");
27
27
  /* eslint-disable import/export, @typescript-eslint/no-redeclare */
28
28
 
29
29
  const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
@@ -39,12 +39,18 @@ const EMPTY_RENDER_CONTEXT = exports.EMPTY_RENDER_CONTEXT = {
39
39
  firstColumnIndex: 0,
40
40
  lastColumnIndex: 0
41
41
  };
42
- const selectors = {
43
- store: (0, _store.createSelector)(state => state.virtualization),
44
- renderContext: (0, _store.createSelector)(state => state.virtualization.renderContext),
45
- enabledForRows: (0, _store.createSelector)(state => state.virtualization.enabledForRows),
46
- enabledForColumns: (0, _store.createSelector)(state => state.virtualization.enabledForColumns)
47
- };
42
+ const selectors = (() => {
43
+ const firstRowIndexSelector = (0, _store.createSelector)(state => state.virtualization.renderContext.firstRowIndex);
44
+ return {
45
+ store: (0, _store.createSelector)(state => state.virtualization),
46
+ renderContext: (0, _store.createSelector)(state => state.virtualization.renderContext),
47
+ enabledForRows: (0, _store.createSelector)(state => state.virtualization.enabledForRows),
48
+ enabledForColumns: (0, _store.createSelector)(state => state.virtualization.enabledForColumns),
49
+ offsetTop: (0, _store.createSelector)(_dimensions.Dimensions.selectors.rowPositions, firstRowIndexSelector, (rowPositions, firstRowIndex) => rowPositions[firstRowIndex] ?? 0),
50
+ context: (0, _store.createSelector)(state => state.virtualization.context),
51
+ scrollPosition: (0, _store.createSelector)(state => state.virtualization.scrollPosition)
52
+ };
53
+ })();
48
54
  const Virtualization = exports.Virtualization = {
49
55
  initialize: initializeState,
50
56
  use: useVirtualization,
@@ -56,7 +62,12 @@ function initializeState(params) {
56
62
  enabled: !platform.isJSDOM,
57
63
  enabledForRows: !platform.isJSDOM,
58
64
  enabledForColumns: !platform.isJSDOM,
59
- renderContext: EMPTY_RENDER_CONTEXT
65
+ renderContext: EMPTY_RENDER_CONTEXT,
66
+ props: params.layout.constructor.elements.reduce((acc, key) => (acc[key], acc), {}),
67
+ context: {},
68
+ scrollPosition: {
69
+ current: _models.ScrollPosition.EMPTY
70
+ }
60
71
  }, params.initialState?.virtualization),
61
72
  // FIXME: refactor once the state shape is settled
62
73
  getters: null
@@ -68,10 +79,10 @@ function initializeState(params) {
68
79
 
69
80
  function useVirtualization(store, params, api) {
70
81
  const {
71
- refs,
82
+ layout,
72
83
  dimensions: {
73
84
  rowHeight,
74
- columnsTotalWidth
85
+ columnsTotalWidth = 0
75
86
  },
76
87
  virtualization: {
77
88
  isRtl = false,
@@ -85,8 +96,6 @@ function useVirtualization(store, params, api) {
85
96
  columns,
86
97
  pinnedRows = _core.PinnedRows.EMPTY,
87
98
  pinnedColumns = _core.PinnedColumns.EMPTY,
88
- minimalContentHeight,
89
- autoHeight,
90
99
  onWheel,
91
100
  onTouchMove,
92
101
  onRenderContextChange,
@@ -95,7 +104,6 @@ function useVirtualization(store, params, api) {
95
104
  renderRow,
96
105
  renderInfiniteLoadingTrigger
97
106
  } = params;
98
- const needsHorizontalScrollbar = (0, _store.useStore)(store, _dimensions.Dimensions.selectors.needsHorizontalScrollbar);
99
107
  const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
100
108
  const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
101
109
  const isUpdateScheduled = React.useRef(false);
@@ -103,7 +111,6 @@ function useVirtualization(store, params, api) {
103
111
  const renderContext = (0, _store.useStore)(store, selectors.renderContext);
104
112
  const enabledForRows = (0, _store.useStore)(store, selectors.enabledForRows);
105
113
  const enabledForColumns = (0, _store.useStore)(store, selectors.enabledForColumns);
106
- const rowsMeta = (0, _store.useStore)(store, _dimensions.Dimensions.selectors.rowsMeta);
107
114
  const contentHeight = (0, _store.useStore)(store, _dimensions.Dimensions.selectors.contentHeight);
108
115
 
109
116
  /*
@@ -131,7 +138,10 @@ function useVirtualization(store, params, api) {
131
138
  const updateRenderContext = React.useCallback(nextRenderContext => {
132
139
  if (!areRenderContextsEqual(nextRenderContext, store.state.virtualization.renderContext)) {
133
140
  store.set('virtualization', (0, _extends2.default)({}, store.state.virtualization, {
134
- renderContext: nextRenderContext
141
+ renderContext: nextRenderContext,
142
+ scrollPosition: {
143
+ current: (0, _extends2.default)({}, scrollPosition.current)
144
+ }
135
145
  }));
136
146
  }
137
147
 
@@ -147,7 +157,7 @@ function useVirtualization(store, params, api) {
147
157
  previousContextScrollPosition.current = scrollPosition.current;
148
158
  }, [store, onRenderContextChange]);
149
159
  const triggerUpdateRenderContext = (0, _useEventCallback.default)(() => {
150
- const scroller = refs.scroller.current;
160
+ const scroller = layout.refs.scroller.current;
151
161
  if (!scroller) {
152
162
  return undefined;
153
163
  }
@@ -175,6 +185,11 @@ function useVirtualization(store, params, api) {
175
185
  const didChangeDirection = scrollCache.direction !== direction;
176
186
  const shouldUpdate = didCrossThreshold || didChangeDirection;
177
187
  if (!shouldUpdate) {
188
+ store.set('virtualization', (0, _extends2.default)({}, store.state.virtualization, {
189
+ scrollPosition: {
190
+ current: (0, _extends2.default)({}, scrollPosition.current)
191
+ }
192
+ }));
178
193
  return renderContext;
179
194
  }
180
195
 
@@ -241,9 +256,6 @@ function useVirtualization(store, params, api) {
241
256
  onScrollChange?.(scrollPosition.current, nextRenderContext);
242
257
  }
243
258
  });
244
- const getOffsetTop = () => {
245
- return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
246
- };
247
259
 
248
260
  /**
249
261
  * HACK: unstable_rowTree fixes the issue described below, but does it by tightly coupling this
@@ -372,34 +384,13 @@ function useVirtualization(store, params, api) {
372
384
  if (panel) {
373
385
  rowElements.push(panel);
374
386
  }
375
- if (rowParams.position === undefined && isLastVisibleInSection) {
387
+ if (rowParams.position === undefined && isLastVisibleInSection && renderInfiniteLoadingTrigger) {
376
388
  rowElements.push(renderInfiniteLoadingTrigger(id));
377
389
  }
378
390
  });
379
391
  return rowElements;
380
392
  };
381
- const scrollerStyle = React.useMemo(() => ({
382
- overflowX: !needsHorizontalScrollbar ? 'hidden' : undefined,
383
- overflowY: autoHeight ? 'hidden' : undefined
384
- }), [needsHorizontalScrollbar, autoHeight]);
385
- const contentSize = React.useMemo(() => {
386
- const size = {
387
- width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto',
388
- flexBasis: contentHeight,
389
- flexShrink: 0
390
- };
391
- if (size.flexBasis === 0) {
392
- size.flexBasis = minimalContentHeight; // Give room to show the overlay when there no rows.
393
- }
394
- return size;
395
- }, [columnsTotalWidth, contentHeight, needsHorizontalScrollbar, minimalContentHeight]);
396
393
  const scrollRestoreCallback = React.useRef(null);
397
- const contentNodeRef = React.useCallback(node => {
398
- if (!node) {
399
- return;
400
- }
401
- scrollRestoreCallback.current?.(columnsTotalWidth, contentHeight);
402
- }, [columnsTotalWidth, contentHeight]);
403
394
  (0, _useEnhancedEffect.default)(() => {
404
395
  if (!isRenderContextReady.current) {
405
396
  return;
@@ -407,15 +398,15 @@ function useVirtualization(store, params, api) {
407
398
  forceUpdateRenderContextCallback();
408
399
  }, [enabledForColumns, enabledForRows, forceUpdateRenderContextCallback]);
409
400
  (0, _useEnhancedEffect.default)(() => {
410
- if (refs.scroller.current) {
411
- refs.scroller.current.scrollLeft = 0;
401
+ if (layout.refs.scroller.current) {
402
+ layout.refs.scroller.current.scrollLeft = 0;
412
403
  }
413
- }, [refs.scroller, scrollReset]);
404
+ }, [layout.refs.scroller, scrollReset]);
414
405
  (0, _useRunOnce.useRunOnce)(renderContext !== EMPTY_RENDER_CONTEXT, () => {
415
406
  onScrollChange?.(scrollPosition.current, renderContext);
416
407
  isRenderContextReady.current = true;
417
- if (initialState?.scroll && refs.scroller.current) {
418
- const scroller = refs.scroller.current;
408
+ if (initialState?.scroll && layout.refs.scroller.current) {
409
+ const scroller = layout.refs.scroller.current;
419
410
  const {
420
411
  top,
421
412
  left
@@ -458,20 +449,14 @@ function useVirtualization(store, params, api) {
458
449
  }
459
450
  });
460
451
  (0, _store.useStoreEffect)(store, _dimensions.Dimensions.selectors.dimensions, forceUpdateRenderContext);
461
- const refSetter = name => node => {
462
- if (node && refs[name].current !== node) {
463
- refs[name].current = node;
452
+ (0, _useEnhancedEffect.default)(() => {
453
+ if (layout.refs.scroller) {
454
+ scrollRestoreCallback.current?.(columnsTotalWidth, contentHeight);
464
455
  }
465
- };
456
+ }, [layout.refs.scroller, columnsTotalWidth, contentHeight]);
466
457
  const isFirstSizing = React.useRef(true);
467
- const containerCleanup = React.useRef(undefined);
468
- const containerRef = (0, _useEventCallback.default)(node => {
469
- if (!node) {
470
- // Cleanup for R18
471
- containerCleanup.current?.();
472
- return;
473
- }
474
- refs.container.current = node;
458
+ const containerRef = useRefCallback(node => {
459
+ layout.refs.container.current = node;
475
460
  const unsubscribe = (0, _dimensions.observeRootNode)(node, store, rootSize => {
476
461
  if (rootSize.width === 0 && rootSize.height === 0 && store.state.rootSize.height !== 0 && store.state.rootSize.width !== 0) {
477
462
  return;
@@ -485,98 +470,58 @@ function useVirtualization(store, params, api) {
485
470
  api.debouncedUpdateDimensions();
486
471
  }
487
472
  });
488
- containerCleanup.current = () => {
473
+ return () => {
489
474
  unsubscribe?.();
490
- refs.container.current = null;
475
+ layout.refs.container.current = null;
491
476
  };
492
- if (_reactMajor.default >= 19) {
493
- /* eslint-disable-next-line consistent-return */
494
- return containerCleanup.current;
495
- }
496
477
  });
497
- const scrollerCleanup = React.useRef(undefined);
498
- const scrollerRef = (0, _useEventCallback.default)(node => {
499
- if (!node) {
500
- // Cleanup for R18
501
- scrollerCleanup.current?.();
502
- return;
503
- }
504
- scrollerCleanup.current?.();
505
- refs.scroller.current = node;
478
+ const scrollerRef = useRefCallback(node => {
479
+ layout.refs.scroller.current = node;
506
480
  const opts = {
507
481
  passive: true
508
482
  };
509
483
  node.addEventListener('scroll', handleScroll, opts);
510
484
  node.addEventListener('wheel', onWheel, opts);
511
485
  node.addEventListener('touchmove', onTouchMove, opts);
512
- scrollerCleanup.current = () => {
486
+ return () => {
513
487
  node.removeEventListener('scroll', handleScroll, opts);
514
488
  node.removeEventListener('wheel', onWheel, opts);
515
489
  node.removeEventListener('touchmove', onTouchMove, opts);
516
- refs.scroller.current = null;
490
+ layout.refs.scroller.current = null;
517
491
  };
518
- if (_reactMajor.default >= 19) {
519
- /* eslint-disable-next-line consistent-return */
520
- return scrollerCleanup.current;
521
- }
522
492
  });
523
- const scrollbarVerticalRef = (0, _useEventCallback.default)(refSetter('scrollbarVertical'));
524
- const scrollbarHorizontalRef = (0, _useEventCallback.default)(refSetter('scrollbarHorizontal'));
525
- const getters = {
493
+ const layoutParams = {
494
+ containerRef,
495
+ scrollerRef
496
+ };
497
+ const layoutAPI = layout.use(store, params, api, layoutParams);
498
+ const getters = (0, _extends2.default)({
526
499
  setPanels,
527
- getOffsetTop,
528
500
  getRows,
529
- rows: params.rows,
530
- getContainerProps: () => ({
531
- ref: containerRef
532
- }),
533
- getScrollerProps: () => ({
534
- ref: scrollerRef,
535
- style: scrollerStyle,
536
- role: 'presentation',
537
- // `tabIndex` shouldn't be used along role=presentation, but it fixes a Firefox bug
538
- // https://github.com/mui/mui-x/pull/13891#discussion_r1683416024
539
- tabIndex: platform.isFirefox ? -1 : undefined
540
- }),
541
- getContentProps: () => ({
542
- ref: contentNodeRef,
543
- style: contentSize,
544
- role: 'presentation'
545
- }),
546
- getScrollbarVerticalProps: () => ({
547
- ref: scrollbarVerticalRef,
548
- scrollPosition
549
- }),
550
- getScrollbarHorizontalProps: () => ({
551
- ref: scrollbarHorizontalRef,
552
- scrollPosition
553
- }),
554
- getScrollAreaProps: () => ({
555
- scrollPosition
556
- })
557
- };
558
-
559
- /* Placeholder API functions for colspan & rowspan to re-implement */
560
-
561
- const getCellColSpanInfo = () => {
562
- throw new Error('Unimplemented: colspan feature is required');
563
- };
564
- const calculateColSpan = () => {
565
- throw new Error('Unimplemented: colspan feature is required');
566
- };
567
- const getHiddenCellsOrigin = () => {
568
- throw new Error('Unimplemented: rowspan feature is required');
569
- };
570
- return {
501
+ rows: params.rows
502
+ }, layoutAPI);
503
+ return (0, _extends2.default)({
571
504
  getters,
572
- useVirtualization: () => (0, _store.useStore)(store, state => state),
573
505
  setPanels,
574
506
  forceUpdateRenderContext,
575
- scheduleUpdateRenderContext,
576
- getCellColSpanInfo,
577
- calculateColSpan,
578
- getHiddenCellsOrigin
579
- };
507
+ scheduleUpdateRenderContext
508
+ }, createSpanningAPI());
509
+ }
510
+ function useRefCallback(fn) {
511
+ const refCleanup = React.useRef(undefined);
512
+ const refCallback = (0, _useEventCallback.default)(node => {
513
+ if (!node) {
514
+ // Cleanup for R18
515
+ refCleanup.current?.();
516
+ return;
517
+ }
518
+ refCleanup.current = fn(node);
519
+ if (_reactMajor.default >= 19) {
520
+ /* eslint-disable-next-line consistent-return */
521
+ return refCleanup.current;
522
+ }
523
+ });
524
+ return refCallback;
580
525
  }
581
526
  function inputsSelector(store, params, api, enabledForRows, enabledForColumns) {
582
527
  const dimensions = _dimensions.Dimensions.selectors.dimensions(store.state);
@@ -590,7 +535,7 @@ function inputsSelector(store, params, api, enabledForRows, enabledForColumns) {
590
535
  api,
591
536
  enabledForRows,
592
537
  enabledForColumns,
593
- autoHeight: params.autoHeight,
538
+ autoHeight: dimensions.autoHeight,
594
539
  rowBufferPx: params.virtualization.rowBufferPx,
595
540
  columnBufferPx: params.virtualization.columnBufferPx,
596
541
  leftPinnedWidth: dimensions.leftPinnedWidth,
@@ -895,6 +840,24 @@ function getFirstNonSpannedColumnToRender({
895
840
  }
896
841
  return firstNonSpannedColumnToRender;
897
842
  }
843
+
844
+ /** Placeholder API functions for colspan & rowspan to re-implement */
845
+ function createSpanningAPI() {
846
+ const getCellColSpanInfo = () => {
847
+ throw new Error('Unimplemented: colspan feature is required');
848
+ };
849
+ const calculateColSpan = () => {
850
+ throw new Error('Unimplemented: colspan feature is required');
851
+ };
852
+ const getHiddenCellsOrigin = () => {
853
+ throw new Error('Unimplemented: rowspan feature is required');
854
+ };
855
+ return {
856
+ getCellColSpanInfo,
857
+ calculateColSpan,
858
+ getHiddenCellsOrigin
859
+ };
860
+ }
898
861
  function roundToDecimalPlaces(value, decimals) {
899
862
  return Math.round(value * 10 ** decimals) / 10 ** decimals;
900
863
  }
package/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from "./useVirtualizer.js";
2
- export * from "./features/index.js";
2
+ export * from "./features/index.js";
3
+ export * from "./constants.js";
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-virtualizer v0.2.10
2
+ * @mui/x-virtualizer v0.2.12
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -31,4 +31,15 @@ Object.keys(_features).forEach(function (key) {
31
31
  return _features[key];
32
32
  }
33
33
  });
34
+ });
35
+ var _constants = require("./constants");
36
+ Object.keys(_constants).forEach(function (key) {
37
+ if (key === "default" || key === "__esModule") return;
38
+ if (key in exports && exports[key] === _constants[key]) return;
39
+ Object.defineProperty(exports, key, {
40
+ enumerable: true,
41
+ get: function () {
42
+ return _constants[key];
43
+ }
44
+ });
34
45
  });
package/models/core.d.ts CHANGED
@@ -62,6 +62,13 @@ export type ScrollPosition = {
62
62
  top: number;
63
63
  left: number;
64
64
  };
65
+ export declare const ScrollPosition: {
66
+ EMPTY: {
67
+ top: number;
68
+ left: number;
69
+ };
70
+ equals: (a: ScrollPosition, b: ScrollPosition) => boolean;
71
+ };
65
72
  export declare enum ScrollDirection {
66
73
  NONE = 0,
67
74
  UP = 1,
package/models/core.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.Size = exports.ScrollDirection = exports.PinnedRows = exports.PinnedColumns = void 0;
6
+ exports.Size = exports.ScrollPosition = exports.ScrollDirection = exports.PinnedRows = exports.PinnedColumns = void 0;
7
7
  /* eslint-disable @typescript-eslint/no-redeclare */
8
8
 
9
9
  const Size = exports.Size = {
@@ -28,6 +28,13 @@ const PinnedColumns = exports.PinnedColumns = {
28
28
  right: []
29
29
  }
30
30
  };
31
+ const ScrollPosition = exports.ScrollPosition = {
32
+ EMPTY: {
33
+ top: 0,
34
+ left: 0
35
+ },
36
+ equals: (a, b) => a.top === b.top && a.left === b.left
37
+ };
31
38
  let ScrollDirection = exports.ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
32
39
  ScrollDirection[ScrollDirection["NONE"] = 0] = "NONE";
33
40
  ScrollDirection[ScrollDirection["UP"] = 1] = "UP";
@@ -65,6 +65,14 @@ export interface DimensionsState {
65
65
  * Size of the bottom container.
66
66
  */
67
67
  bottomContainerHeight: number;
68
+ /**
69
+ * Indicates that the container takes the height of its content.
70
+ */
71
+ autoHeight: boolean;
72
+ /**
73
+ * Minimal height to display the content area.
74
+ */
75
+ minimalContentHeight: string | number | undefined;
68
76
  }
69
77
  /**
70
78
  * The rows total height and positions.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/x-virtualizer",
3
- "version": "0.2.10",
3
+ "version": "0.2.12",
4
4
  "author": "MUI Team",
5
5
  "description": "MUI virtualization library",
6
6
  "license": "MIT",
@@ -29,7 +29,7 @@
29
29
  "dependencies": {
30
30
  "@babel/runtime": "^7.28.4",
31
31
  "@mui/utils": "^7.3.5",
32
- "@mui/x-internals": "8.19.0"
32
+ "@mui/x-internals": "8.22.0"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -1,25 +1,21 @@
1
1
  import * as React from 'react';
2
- import { integer, RefObject } from '@mui/x-internals/types';
2
+ import { integer } from '@mui/x-internals/types';
3
3
  import { Store } from '@mui/x-internals/store';
4
4
  import { Colspan } from "./features/colspan.js";
5
5
  import { Dimensions } from "./features/dimensions.js";
6
6
  import { Rowspan } from "./features/rowspan.js";
7
- import { Virtualization } from "./features/virtualization.js";
7
+ import { Virtualization } from "./features/virtualization/index.js";
8
+ import type { Layout } from "./features/virtualization/layout.js";
8
9
  import type { HeightEntry, RowSpacing } from "./models/dimensions.js";
9
10
  import type { ColspanParams } from "./features/colspan.js";
10
11
  import type { DimensionsParams } from "./features/dimensions.js";
11
- import type { VirtualizationParams } from "./features/virtualization.js";
12
+ import type { VirtualizationParams } from "./features/virtualization/index.js";
12
13
  import { ColumnWithWidth, FocusedCell, Size, PinnedRows, PinnedColumns, RenderContext, Row, RowEntry } from "./models/index.js";
13
14
  export type Virtualizer = ReturnType<typeof useVirtualizer>;
14
- export type VirtualScrollerCompat = Virtualization.State['getters'];
15
- export type BaseState = Virtualization.State & Dimensions.State;
16
- export type VirtualizerParams = {
17
- refs: {
18
- container: RefObject<HTMLDivElement | null>;
19
- scroller: RefObject<HTMLDivElement | null>;
20
- scrollbarVertical: RefObject<HTMLDivElement | null>;
21
- scrollbarHorizontal: RefObject<HTMLDivElement | null>;
22
- };
15
+ export type VirtualScrollerCompat<L extends Layout = Layout> = Virtualization.State<L>['getters'];
16
+ export type BaseState<L extends Layout = Layout> = Virtualization.State<L> & Dimensions.State;
17
+ export type VirtualizerParams<L extends Layout = Layout> = {
18
+ layout: L;
23
19
  dimensions: DimensionsParams;
24
20
  virtualization: VirtualizationParams;
25
21
  colspan?: ColspanParams;
@@ -29,7 +25,7 @@ export type VirtualizerParams = {
29
25
  left: number;
30
26
  };
31
27
  rowSpanning?: Rowspan.State['rowSpanning'];
32
- virtualization?: Partial<Virtualization.State['virtualization']>;
28
+ virtualization?: Partial<Virtualization.State<L>['virtualization']>;
33
29
  };
34
30
  /** current page rows */
35
31
  rows: RowEntry[];
@@ -39,13 +35,11 @@ export type VirtualizerParams = {
39
35
  lastRowIndex: integer;
40
36
  } | null;
41
37
  rowCount: integer;
42
- columns: ColumnWithWidth[];
38
+ columns?: ColumnWithWidth[];
43
39
  pinnedRows?: PinnedRows;
44
40
  pinnedColumns?: PinnedColumns;
45
- autoHeight: boolean;
46
41
  disableHorizontalScroll?: boolean;
47
42
  disableVerticalScroll?: boolean;
48
- minimalContentHeight?: number | string;
49
43
  getRowHeight?: (row: RowEntry) => number | null | undefined | 'auto';
50
44
  /**
51
45
  * Function that returns the estimated height for a row.
@@ -68,7 +62,7 @@ export type VirtualizerParams = {
68
62
  */
69
63
  applyRowHeight?: (entry: HeightEntry, rowEntry: RowEntry) => void;
70
64
  virtualizeColumnsWithAutoRowHeight?: boolean;
71
- resizeThrottleMs: number;
65
+ resizeThrottleMs?: number;
72
66
  onResize?: (lastSize: Size) => void;
73
67
  onWheel?: (event: React.WheelEvent) => void;
74
68
  onTouchMove?: (event: React.TouchEvent) => void;
@@ -94,10 +88,15 @@ export type VirtualizerParams = {
94
88
  isVirtualFocusRow: boolean;
95
89
  showBottomBorder: boolean;
96
90
  }) => React.ReactElement;
97
- renderInfiniteLoadingTrigger: (id: any) => React.ReactElement;
91
+ renderInfiniteLoadingTrigger?: (id: any) => React.ReactElement;
92
+ };
93
+ type RequiredFields<T, K extends keyof T> = T & Required<Pick<T, K>>;
94
+ export type ParamsWithDefaults = RequiredFields<VirtualizerParams, 'resizeThrottleMs' | 'columns'> & {
95
+ dimensions: RequiredFields<VirtualizerParams['dimensions'], 'columnsTotalWidth' | 'leftPinnedWidth' | 'rightPinnedWidth' | 'topPinnedHeight' | 'bottomPinnedHeight' | 'autoHeight'>;
96
+ virtualization: RequiredFields<VirtualizerParams['virtualization'], 'isRtl' | 'rowBufferPx' | 'columnBufferPx'>;
98
97
  };
99
- export declare const useVirtualizer: (params: VirtualizerParams) => {
100
- store: Store<Dimensions.State & Virtualization.State & Colspan.State & Rowspan.State>;
98
+ export declare const useVirtualizer: <L extends Layout = Layout>(params: VirtualizerParams<L>) => {
99
+ store: Store<Dimensions.State & Virtualization.State<L> & Colspan.State & Rowspan.State>;
101
100
  api: {
102
101
  updateDimensions: (firstUpdate?: boolean) => void;
103
102
  debouncedUpdateDimensions: (((firstUpdate?: boolean) => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
@@ -113,57 +112,13 @@ export declare const useVirtualizer: (params: VirtualizerParams) => {
113
112
  resetRowHeights: () => void;
114
113
  };
115
114
  } & {
116
- getters: {
117
- setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
118
- getOffsetTop: () => number;
119
- getRows: (rowParams?: {
120
- rows?: RowEntry[];
121
- position?: import("./models/index.js").PinnedRowPosition;
122
- renderContext?: RenderContext;
123
- }, unstable_rowTree?: Record<import("./models/index.js").RowId, any>) => React.ReactNode[];
124
- rows: RowEntry[];
125
- getContainerProps: () => {
126
- ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
127
- };
128
- getScrollerProps: () => {
129
- ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
130
- style: React.CSSProperties;
131
- role: string;
132
- tabIndex: number | undefined;
133
- };
134
- getContentProps: () => {
135
- ref: (node: HTMLDivElement | null) => void;
136
- style: React.CSSProperties;
137
- role: string;
138
- };
139
- getScrollbarVerticalProps: () => {
140
- ref: (node: HTMLDivElement | null) => void;
141
- scrollPosition: React.RefObject<{
142
- top: number;
143
- left: number;
144
- }>;
145
- };
146
- getScrollbarHorizontalProps: () => {
147
- ref: (node: HTMLDivElement | null) => void;
148
- scrollPosition: React.RefObject<{
149
- top: number;
150
- left: number;
151
- }>;
152
- };
153
- getScrollAreaProps: () => {
154
- scrollPosition: React.RefObject<{
155
- top: number;
156
- left: number;
157
- }>;
158
- };
159
- };
160
- useVirtualization: () => BaseState;
161
- setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
162
- forceUpdateRenderContext: () => void;
163
- scheduleUpdateRenderContext: () => void;
164
115
  getCellColSpanInfo: (rowId: import("./models/index.js").RowId, columnIndex: integer) => import("./models/index.js").CellColSpanInfo;
165
116
  calculateColSpan: (rowId: import("./models/index.js").RowId, minFirstColumn: integer, maxLastColumn: integer, columns: ColumnWithWidth[]) => void;
166
117
  getHiddenCellsOrigin: () => Record<import("./models/index.js").RowId, Record<number, number>>;
118
+ getters: any;
119
+ setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
120
+ forceUpdateRenderContext: () => void;
121
+ scheduleUpdateRenderContext: () => void;
167
122
  } & {
168
123
  resetColSpan: () => void;
169
124
  getCellColSpanInfo: (rowId: import("./models/index.js").RowId, columnIndex: integer) => import("./models/index.js").CellColSpanInfo | undefined;
@@ -173,4 +128,5 @@ export declare const useVirtualizer: (params: VirtualizerParams) => {
173
128
  } & {
174
129
  getViewportPageSize: () => number;
175
130
  };
176
- };
131
+ };
132
+ export {};