@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.
- package/CHANGELOG.md +248 -0
- package/constants.d.ts +22 -0
- package/constants.js +26 -0
- package/esm/constants.d.ts +22 -0
- package/esm/constants.js +20 -0
- package/esm/features/colspan.d.ts +4 -4
- package/esm/features/dimensions.d.ts +14 -8
- package/esm/features/dimensions.js +26 -7
- package/esm/features/index.d.ts +1 -1
- package/esm/features/index.js +1 -1
- package/esm/features/keyboard.d.ts +3 -3
- package/esm/features/keyboard.js +1 -1
- package/esm/features/rowspan.d.ts +4 -4
- package/esm/features/virtualization/index.d.ts +2 -0
- package/esm/features/virtualization/index.js +2 -0
- package/esm/features/virtualization/layout.d.ts +129 -0
- package/esm/features/virtualization/layout.js +152 -0
- package/esm/features/{virtualization.d.ts → virtualization/virtualization.d.ts} +35 -58
- package/esm/features/{virtualization.js → virtualization/virtualization.js} +97 -134
- package/esm/index.d.ts +2 -1
- package/esm/index.js +3 -2
- package/esm/models/core.d.ts +7 -0
- package/esm/models/core.js +7 -0
- package/esm/models/dimensions.d.ts +8 -0
- package/esm/useVirtualizer.d.ts +25 -69
- package/esm/useVirtualizer.js +21 -4
- package/features/colspan.d.ts +4 -4
- package/features/dimensions.d.ts +14 -8
- package/features/dimensions.js +26 -7
- package/features/index.d.ts +1 -1
- package/features/keyboard.d.ts +3 -3
- package/features/rowspan.d.ts +4 -4
- package/features/virtualization/index.d.ts +2 -0
- package/features/virtualization/index.js +27 -0
- package/features/virtualization/layout.d.ts +129 -0
- package/features/virtualization/layout.js +163 -0
- package/features/{virtualization.d.ts → virtualization/virtualization.d.ts} +35 -58
- package/features/{virtualization.js → virtualization/virtualization.js} +97 -134
- package/index.d.ts +2 -1
- package/index.js +12 -1
- package/models/core.d.ts +7 -0
- package/models/core.js +8 -1
- package/models/dimensions.d.ts +8 -0
- package/package.json +2 -2
- package/useVirtualizer.d.ts +25 -69
- 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("
|
|
25
|
-
var _dimensions = require("
|
|
26
|
-
var _models = require("
|
|
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
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
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
|
-
|
|
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
|
-
|
|
462
|
-
if (
|
|
463
|
-
|
|
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
|
|
468
|
-
|
|
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
|
-
|
|
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
|
|
498
|
-
|
|
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
|
-
|
|
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
|
|
524
|
-
|
|
525
|
-
|
|
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
|
-
|
|
531
|
-
|
|
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
|
-
|
|
577
|
-
|
|
578
|
-
|
|
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:
|
|
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
package/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @mui/x-virtualizer v0.2.
|
|
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";
|
package/models/dimensions.d.ts
CHANGED
|
@@ -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.
|
|
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.
|
|
32
|
+
"@mui/x-internals": "8.22.0"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
package/useVirtualizer.d.ts
CHANGED
|
@@ -1,25 +1,21 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { integer
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
|
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 {};
|