@versini/ui-datagrid 5.0.0 → 6.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.
- package/dist/7.js +1 -1
- package/dist/8.js +1 -1
- package/dist/DataGrid/index.js +20 -8
- package/dist/DataGrid/useHeightAnimation.d.ts +5 -2
- package/dist/DataGridBody/index.js +1 -1
- package/dist/DataGridCell/index.js +1 -1
- package/dist/DataGridCellSort/index.js +1 -1
- package/dist/DataGridConstants/index.js +1 -1
- package/dist/DataGridFooter/index.js +1 -1
- package/dist/DataGridHeader/index.js +1 -1
- package/dist/DataGridInfinite/index.js +1 -1
- package/dist/DataGridRow/index.js +1 -1
- package/dist/DataGridSorting/index.js +1 -1
- package/dist/u.js +1 -1
- package/dist/y.js +1 -1
- package/package.json +1 -1
package/dist/7.js
CHANGED
package/dist/8.js
CHANGED
package/dist/DataGrid/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid
|
|
2
|
+
@versini/ui-datagrid v6.0.1
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -9,6 +9,9 @@ import { BlurEffects } from "../7.js";
|
|
|
9
9
|
import { getDataGridClasses } from "../y.js";
|
|
10
10
|
import { DataGridContext } from "../8.js";
|
|
11
11
|
const HEIGHT_ANIMATION_DURATION = 300;
|
|
12
|
+
function heightOf(el) {
|
|
13
|
+
return el.getBoundingClientRect().height;
|
|
14
|
+
}
|
|
12
15
|
function prefersReducedMotion() {
|
|
13
16
|
return Boolean(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches);
|
|
14
17
|
}
|
|
@@ -22,17 +25,18 @@ function useHeightAnimation(wrapper, grid, enabled) {
|
|
|
22
25
|
] : [
|
|
23
26
|
wrapper
|
|
24
27
|
];
|
|
25
|
-
let wrapperHeight = wrapper
|
|
28
|
+
let wrapperHeight = heightOf(wrapper);
|
|
26
29
|
let gridHeight = grid.offsetHeight;
|
|
27
30
|
let gridWidth = grid.offsetWidth;
|
|
28
31
|
let animation;
|
|
32
|
+
let target = 0;
|
|
29
33
|
let frame = 0;
|
|
30
34
|
const unlock = ()=>{
|
|
31
35
|
for (const el of clipped)el.style.removeProperty("overflow-y");
|
|
32
36
|
};
|
|
33
37
|
const settle = ()=>{
|
|
34
38
|
unlock();
|
|
35
|
-
wrapperHeight = wrapper
|
|
39
|
+
wrapperHeight = heightOf(wrapper);
|
|
36
40
|
if (animation) {
|
|
37
41
|
animation = void 0;
|
|
38
42
|
frame = requestAnimationFrame(()=>observer.observe(wrapper));
|
|
@@ -40,7 +44,7 @@ function useHeightAnimation(wrapper, grid, enabled) {
|
|
|
40
44
|
};
|
|
41
45
|
const observer = new ResizeObserver((entries)=>{
|
|
42
46
|
if (!entries.some((entry)=>entry.target === grid)) {
|
|
43
|
-
wrapperHeight = wrapper
|
|
47
|
+
wrapperHeight = heightOf(wrapper);
|
|
44
48
|
return;
|
|
45
49
|
}
|
|
46
50
|
const nextGridHeight = grid.offsetHeight;
|
|
@@ -50,14 +54,21 @@ function useHeightAnimation(wrapper, grid, enabled) {
|
|
|
50
54
|
gridHeight = nextGridHeight;
|
|
51
55
|
gridWidth = nextGridWidth;
|
|
52
56
|
if (!heightChanged || resized && !animation) {
|
|
53
|
-
wrapperHeight = wrapper
|
|
57
|
+
wrapperHeight = heightOf(wrapper);
|
|
54
58
|
return;
|
|
55
59
|
}
|
|
56
|
-
const from = animation ? wrapper
|
|
60
|
+
const from = animation ? heightOf(wrapper) : wrapperHeight;
|
|
61
|
+
const effect = animation?.effect;
|
|
62
|
+
if (effect) effect.target = null;
|
|
63
|
+
const to = heightOf(wrapper);
|
|
64
|
+
if (effect) effect.target = wrapper;
|
|
65
|
+
if (animation && to === target) return;
|
|
57
66
|
animation?.cancel();
|
|
58
|
-
const to = wrapper.offsetHeight;
|
|
59
67
|
if (from === to || prefersReducedMotion()) return void settle();
|
|
60
|
-
if (!animation)
|
|
68
|
+
if (!animation) {
|
|
69
|
+
cancelAnimationFrame(frame);
|
|
70
|
+
observer.unobserve(wrapper);
|
|
71
|
+
}
|
|
61
72
|
for (const el of clipped)el.style.overflowY = "hidden";
|
|
62
73
|
const current = wrapper.animate({
|
|
63
74
|
height: [
|
|
@@ -72,6 +83,7 @@ function useHeightAnimation(wrapper, grid, enabled) {
|
|
|
72
83
|
current.onfinish = settleIfCurrent;
|
|
73
84
|
current.oncancel = settleIfCurrent;
|
|
74
85
|
animation = current;
|
|
86
|
+
target = to;
|
|
75
87
|
});
|
|
76
88
|
observer.observe(grid);
|
|
77
89
|
observer.observe(wrapper);
|
|
@@ -8,8 +8,11 @@ export declare const HEIGHT_ANIMATION_DURATION = 300;
|
|
|
8
8
|
* lives here and not on an element around the grid: an outer clip would cut the
|
|
9
9
|
* border off for the length of the animation.
|
|
10
10
|
*
|
|
11
|
-
* The grid's height drives the animation
|
|
12
|
-
* wrapper's
|
|
11
|
+
* The grid's height drives the animation. It usually does not depend on the
|
|
12
|
+
* wrapper's, but a virtualized body's does: as the wrapper grows, its scroller
|
|
13
|
+
* shows more rows, which the virtualizer renders and measures, so the grid
|
|
14
|
+
* changes height on almost every frame while the wrapper's target stays put. A
|
|
15
|
+
* change that keeps the target lets the running animation carry on. Both
|
|
13
16
|
* elements are passed in rather than read from refs, because the grid element
|
|
14
17
|
* is replaced when a sticky header or footer registers after the first render,
|
|
15
18
|
* and the observer has to follow it. The wrapper is observed too, only to keep
|
package/dist/u.js
CHANGED
package/dist/y.js
CHANGED