@glideappsfinal/glide-data-grid 6.0.9 → 6.0.10
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/build.sh +3 -1
- package/dist/cjs/internal/data-editor-container/data-grid-container.css +1 -0
- package/dist/cjs/internal/data-editor-container/data-grid-container.js +25 -30
- package/dist/cjs/internal/data-grid-overlay-editor/data-grid-overlay-editor-style.css +1 -0
- package/dist/cjs/internal/data-grid-overlay-editor/data-grid-overlay-editor-style.js +19 -75
- package/dist/cjs/internal/data-grid-overlay-editor/private/bubbles-overlay-editor-style.css +1 -0
- package/dist/cjs/internal/data-grid-overlay-editor/private/bubbles-overlay-editor-style.js +5 -32
- package/dist/cjs/internal/data-grid-overlay-editor/private/drilldown-overlay-editor.css +1 -0
- package/dist/cjs/internal/data-grid-overlay-editor/private/drilldown-overlay-editor.js +15 -45
- package/dist/cjs/internal/data-grid-overlay-editor/private/image-overlay-editor-style.css +1 -0
- package/dist/cjs/internal/data-grid-overlay-editor/private/image-overlay-editor-style.js +5 -54
- package/dist/cjs/internal/data-grid-overlay-editor/private/markdown-overlay-editor-style.css +1 -0
- package/dist/cjs/internal/data-grid-overlay-editor/private/markdown-overlay-editor-style.js +9 -74
- package/dist/cjs/internal/data-grid-overlay-editor/private/number-overlay-editor-style.css +1 -0
- package/dist/cjs/internal/data-grid-overlay-editor/private/number-overlay-editor-style.js +5 -13
- package/dist/cjs/internal/data-grid-overlay-editor/private/uri-overlay-editor-style.css +1 -0
- package/dist/cjs/internal/data-grid-overlay-editor/private/uri-overlay-editor-style.js +5 -51
- package/dist/cjs/internal/data-grid-search/data-grid-search-style.css +1 -0
- package/dist/cjs/internal/data-grid-search/data-grid-search-style.js +5 -94
- package/dist/cjs/internal/growing-entry/growing-entry-style.css +3 -0
- package/dist/cjs/internal/growing-entry/growing-entry-style.js +15 -58
- package/dist/cjs/internal/markdown-div/private/markdown-container.css +1 -0
- package/dist/cjs/internal/markdown-div/private/markdown-container.js +5 -17
- package/dist/cjs/internal/scrolling-data-grid/infinite-scroller.css +1 -0
- package/dist/cjs/internal/scrolling-data-grid/infinite-scroller.js +233 -231
- package/dist/dts/common/render-state-provider.d.ts +0 -1
- package/dist/dts/common/styles.d.ts +0 -1
- package/dist/dts/common/support.d.ts +0 -1
- package/dist/dts/common/utils.d.ts +0 -1
- package/dist/dts/internal/data-grid/cell-set.d.ts +0 -1
- package/dist/dts/internal/data-grid/color-parser.d.ts +0 -1
- package/dist/dts/internal/data-grid/data-grid-sprites.d.ts +0 -1
- package/dist/dts/internal/data-grid/event-args.d.ts +0 -1
- package/dist/dts/internal/data-grid/image-window-loader-interface.d.ts +0 -1
- package/dist/dts/internal/data-grid/sprites.d.ts +0 -1
- package/dist/dts/internal/data-grid-overlay-editor/private/image-overlay-editor-style.d.ts +0 -1
- package/dist/dts/internal/data-grid-overlay-editor/private/image-overlay-editor.d.ts +0 -1
- package/dist/dts/internal/markdown-div/markdown-div.d.ts +0 -1
- package/dist/dts/internal/markdown-div/private/markdown-container.d.ts +0 -1
- package/dist/esm/internal/data-editor-container/data-grid-container.css +1 -0
- package/dist/esm/internal/data-editor-container/data-grid-container.js +25 -30
- package/dist/esm/internal/data-grid-overlay-editor/data-grid-overlay-editor-style.css +1 -0
- package/dist/esm/internal/data-grid-overlay-editor/data-grid-overlay-editor-style.js +19 -75
- package/dist/esm/internal/data-grid-overlay-editor/private/bubbles-overlay-editor-style.css +1 -0
- package/dist/esm/internal/data-grid-overlay-editor/private/bubbles-overlay-editor-style.js +5 -32
- package/dist/esm/internal/data-grid-overlay-editor/private/drilldown-overlay-editor.css +1 -0
- package/dist/esm/internal/data-grid-overlay-editor/private/drilldown-overlay-editor.js +15 -45
- package/dist/esm/internal/data-grid-overlay-editor/private/image-overlay-editor-style.css +1 -0
- package/dist/esm/internal/data-grid-overlay-editor/private/image-overlay-editor-style.js +5 -54
- package/dist/esm/internal/data-grid-overlay-editor/private/markdown-overlay-editor-style.css +1 -0
- package/dist/esm/internal/data-grid-overlay-editor/private/markdown-overlay-editor-style.js +9 -74
- package/dist/esm/internal/data-grid-overlay-editor/private/number-overlay-editor-style.css +1 -0
- package/dist/esm/internal/data-grid-overlay-editor/private/number-overlay-editor-style.js +5 -13
- package/dist/esm/internal/data-grid-overlay-editor/private/uri-overlay-editor-style.css +1 -0
- package/dist/esm/internal/data-grid-overlay-editor/private/uri-overlay-editor-style.js +5 -51
- package/dist/esm/internal/data-grid-search/data-grid-search-style.css +1 -0
- package/dist/esm/internal/data-grid-search/data-grid-search-style.js +5 -94
- package/dist/esm/internal/growing-entry/growing-entry-style.css +3 -0
- package/dist/esm/internal/growing-entry/growing-entry-style.js +15 -58
- package/dist/esm/internal/markdown-div/private/markdown-container.css +1 -0
- package/dist/esm/internal/markdown-div/private/markdown-container.js +5 -17
- package/dist/esm/internal/scrolling-data-grid/infinite-scroller.css +1 -0
- package/dist/esm/internal/scrolling-data-grid/infinite-scroller.js +233 -231
- package/dist/index.css +12 -0
- package/package.json +1 -1
|
@@ -1,60 +1,17 @@
|
|
|
1
1
|
import { styled } from "@linaria/react";
|
|
2
|
-
export const InputBox = styled
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
2
|
+
export const InputBox = /*#__PURE__*/styled('textarea')({
|
|
3
|
+
name: "InputBox",
|
|
4
|
+
class: "gdg-izpuzkl",
|
|
5
|
+
propsAsIs: false
|
|
6
|
+
});
|
|
7
|
+
export const ShadowBox = /*#__PURE__*/styled('div')({
|
|
8
|
+
name: "ShadowBox",
|
|
9
|
+
class: "gdg-s69h75o",
|
|
10
|
+
propsAsIs: false
|
|
11
|
+
});
|
|
12
|
+
export const GrowingEntryStyle = /*#__PURE__*/styled('div')({
|
|
13
|
+
name: "GrowingEntryStyle",
|
|
14
|
+
class: "gdg-g1y0xocz",
|
|
15
|
+
propsAsIs: false
|
|
16
|
+
});
|
|
10
17
|
|
|
11
|
-
border-radius: 0px;
|
|
12
|
-
|
|
13
|
-
resize: none;
|
|
14
|
-
white-space: pre-wrap;
|
|
15
|
-
min-width: 100%;
|
|
16
|
-
overflow: hidden;
|
|
17
|
-
border: 0;
|
|
18
|
-
background-color: transparent;
|
|
19
|
-
|
|
20
|
-
::placeholder {
|
|
21
|
-
color: var(--gdg-text-light);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
font-size: var(--gdg-editor-font-size);
|
|
25
|
-
line-height: 16px;
|
|
26
|
-
font-family: var(--gdg-font-family);
|
|
27
|
-
-webkit-text-fill-color: var(--gdg-text-dark);
|
|
28
|
-
color: var(--gdg-text-dark);
|
|
29
|
-
padding: 0;
|
|
30
|
-
margin: 0;
|
|
31
|
-
|
|
32
|
-
.gdg-invalid & {
|
|
33
|
-
text-decoration: underline;
|
|
34
|
-
text-decoration-color: #d60606;
|
|
35
|
-
}
|
|
36
|
-
`;
|
|
37
|
-
export const ShadowBox = styled.div `
|
|
38
|
-
visibility: hidden;
|
|
39
|
-
white-space: pre-wrap;
|
|
40
|
-
word-wrap: break-word;
|
|
41
|
-
|
|
42
|
-
width: max-content;
|
|
43
|
-
max-width: 100%;
|
|
44
|
-
|
|
45
|
-
min-width: 100%;
|
|
46
|
-
|
|
47
|
-
font-size: var(--gdg-editor-font-size);
|
|
48
|
-
line-height: 16px;
|
|
49
|
-
font-family: var(--gdg-font-family);
|
|
50
|
-
color: var(--gdg-text-dark);
|
|
51
|
-
padding: 0;
|
|
52
|
-
margin: 0;
|
|
53
|
-
|
|
54
|
-
padding-bottom: 2px;
|
|
55
|
-
`;
|
|
56
|
-
export const GrowingEntryStyle = styled.div `
|
|
57
|
-
position: relative;
|
|
58
|
-
margin-top: 6px;
|
|
59
|
-
`;
|
|
60
|
-
//# sourceMappingURL=growing-entry-style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.gdg-mnuv029{word-break:break-word;-webkit-touch-callout:default;padding-top:6px;}.gdg-mnuv029 >*{margin:0;}.gdg-mnuv029 *:last-child{margin-bottom:0;}.gdg-mnuv029 p img{width:100%;}
|
|
@@ -1,19 +1,7 @@
|
|
|
1
1
|
import { styled } from "@linaria/react";
|
|
2
|
-
export const MarkdownContainer = styled
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
export const MarkdownContainer = /*#__PURE__*/styled('div')({
|
|
3
|
+
name: "MarkdownContainer",
|
|
4
|
+
class: "gdg-mnuv029",
|
|
5
|
+
propsAsIs: false
|
|
6
|
+
});
|
|
6
7
|
|
|
7
|
-
> * {
|
|
8
|
-
margin: 0;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
& *:last-child {
|
|
12
|
-
margin-bottom: 0;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
& p img {
|
|
16
|
-
width: 100%;
|
|
17
|
-
}
|
|
18
|
-
`;
|
|
19
|
-
//# sourceMappingURL=markdown-container.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.gdg-s1dgczr6 .dvn-scroller{overflow:var(--s1dgczr6-0);transform:translate3d(0, 0, 0);}.gdg-s1dgczr6 .dvn-hidden{visibility:hidden;}.gdg-s1dgczr6 .dvn-scroll-inner{display:flex;pointer-events:none;}.gdg-s1dgczr6 .dvn-scroll-inner >*{flex-shrink:0;}.gdg-s1dgczr6 .dvn-scroll-inner .dvn-spacer{flex-grow:1;}.gdg-s1dgczr6 .dvn-scroll-inner .dvn-stack{display:flex;flex-direction:column;}.gdg-s1dgczr6 .dvn-underlay>*{position:absolute;left:0;top:0;}.gdg-s1dgczr6 canvas{outline:none;}.gdg-s1dgczr6 canvas *{height:0;}
|
|
@@ -4,48 +4,15 @@ import { useResizeDetector } from "../../common/resize-detector.js";
|
|
|
4
4
|
import { browserIsSafari } from "../../common/browser-detect.js";
|
|
5
5
|
import { useEventListener } from "../../common/utils.js";
|
|
6
6
|
import useKineticScroll from "./use-kinetic-scroll.js";
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
.dvn-scroll-inner {
|
|
18
|
-
display: flex;
|
|
19
|
-
pointer-events: none;
|
|
20
|
-
|
|
21
|
-
> * {
|
|
22
|
-
flex-shrink: 0;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.dvn-spacer {
|
|
26
|
-
flex-grow: 1;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.dvn-stack {
|
|
30
|
-
display: flex;
|
|
31
|
-
flex-direction: column;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.dvn-underlay > * {
|
|
36
|
-
position: absolute;
|
|
37
|
-
left: 0;
|
|
38
|
-
top: 0;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
canvas {
|
|
42
|
-
outline: none;
|
|
43
|
-
|
|
44
|
-
* {
|
|
45
|
-
height: 0;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
`;
|
|
7
|
+
const _exp = /*#__PURE__*/() => p => p.isSafari ? "scroll" : "auto";
|
|
8
|
+
const ScrollRegionStyle = /*#__PURE__*/styled('div')({
|
|
9
|
+
name: "ScrollRegionStyle",
|
|
10
|
+
class: "gdg-s1dgczr6",
|
|
11
|
+
propsAsIs: false,
|
|
12
|
+
vars: {
|
|
13
|
+
"s1dgczr6-0": [_exp()]
|
|
14
|
+
}
|
|
15
|
+
});
|
|
49
16
|
// Browser's maximum div height limit. Varies a bit by browsers.
|
|
50
17
|
const BROWSER_MAX_DIV_HEIGHT = 33_554_400;
|
|
51
18
|
// Maximum height of a single padder segment to avoid browser performance issues.
|
|
@@ -57,19 +24,19 @@ const BROWSER_MAX_DIV_HEIGHT = 33_554_400;
|
|
|
57
24
|
// based on the current scroll position.
|
|
58
25
|
const MAX_PADDER_SEGMENT_HEIGHT = 5_000_000;
|
|
59
26
|
function useTouchUpDelayed(delay) {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
27
|
+
const [hasTouches, setHasTouches] = React.useState(false);
|
|
28
|
+
const safeWindow = typeof window === "undefined" ? null : window;
|
|
29
|
+
const cbTimer = React.useRef(0);
|
|
30
|
+
useEventListener("touchstart", React.useCallback(() => {
|
|
31
|
+
window.clearTimeout(cbTimer.current);
|
|
32
|
+
setHasTouches(true);
|
|
33
|
+
}, []), safeWindow, true, false);
|
|
34
|
+
useEventListener("touchend", React.useCallback(e => {
|
|
35
|
+
if (e.touches.length === 0) {
|
|
36
|
+
cbTimer.current = window.setTimeout(() => setHasTouches(false), delay);
|
|
37
|
+
}
|
|
38
|
+
}, [delay]), safeWindow, true, false);
|
|
39
|
+
return hasTouches;
|
|
73
40
|
}
|
|
74
41
|
/**
|
|
75
42
|
* InfiniteScroller provides virtual scrolling capabilities for the data grid.
|
|
@@ -83,183 +50,218 @@ function useTouchUpDelayed(delay) {
|
|
|
83
50
|
* to the full virtual scroll range
|
|
84
51
|
*/
|
|
85
52
|
export const InfiniteScroller = p => {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
53
|
+
const {
|
|
54
|
+
children,
|
|
55
|
+
clientHeight,
|
|
56
|
+
scrollHeight,
|
|
57
|
+
scrollWidth,
|
|
58
|
+
update,
|
|
59
|
+
draggable,
|
|
60
|
+
className,
|
|
61
|
+
preventDiagonalScrolling = false,
|
|
62
|
+
paddingBottom = 0,
|
|
63
|
+
paddingRight = 0,
|
|
64
|
+
rightElement,
|
|
65
|
+
rightElementProps,
|
|
66
|
+
kineticScrollPerfHack = false,
|
|
67
|
+
scrollRef,
|
|
68
|
+
initialSize
|
|
69
|
+
} = p;
|
|
70
|
+
const padders = [];
|
|
71
|
+
const rightElementSticky = rightElementProps?.sticky ?? false;
|
|
72
|
+
const rightElementFill = rightElementProps?.fill ?? false;
|
|
73
|
+
// Track the virtual scroll position directly for smooth scrolling
|
|
74
|
+
const virtualScrollY = React.useRef(0);
|
|
75
|
+
const lastScrollY = React.useRef(0);
|
|
76
|
+
const scroller = React.useRef(null);
|
|
77
|
+
const dpr = typeof window === "undefined" ? 1 : window.devicePixelRatio;
|
|
78
|
+
const lastDpr = React.useRef(dpr);
|
|
79
|
+
// Reset scroll tracking when device pixel ratio changes (e.g., browser zoom)
|
|
80
|
+
React.useEffect(() => {
|
|
81
|
+
if (lastDpr.current !== dpr) {
|
|
82
|
+
virtualScrollY.current = 0;
|
|
83
|
+
lastScrollY.current = 0;
|
|
84
|
+
lastDpr.current = dpr;
|
|
85
|
+
const el = scroller.current;
|
|
86
|
+
if (el !== null) {
|
|
87
|
+
onScrollRef.current(el.scrollLeft, el.scrollTop);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}, [dpr]);
|
|
91
|
+
const lastScrollPosition = React.useRef({
|
|
92
|
+
scrollLeft: 0,
|
|
93
|
+
scrollTop: 0,
|
|
94
|
+
lockDirection: undefined
|
|
95
|
+
});
|
|
96
|
+
const rightWrapRef = React.useRef(null);
|
|
97
|
+
const hasTouches = useTouchUpDelayed(200);
|
|
98
|
+
const [isIdle, setIsIdle] = React.useState(true);
|
|
99
|
+
const idleTimer = React.useRef(0);
|
|
100
|
+
React.useLayoutEffect(() => {
|
|
101
|
+
if (!isIdle || hasTouches || lastScrollPosition.current.lockDirection === undefined) return;
|
|
102
|
+
const el = scroller.current;
|
|
103
|
+
if (el === null) return;
|
|
104
|
+
const [lx, ly] = lastScrollPosition.current.lockDirection;
|
|
105
|
+
if (lx !== undefined) {
|
|
106
|
+
el.scrollLeft = lx;
|
|
107
|
+
} else if (ly !== undefined) {
|
|
108
|
+
el.scrollTop = ly;
|
|
109
|
+
}
|
|
110
|
+
lastScrollPosition.current.lockDirection = undefined;
|
|
111
|
+
}, [hasTouches, isIdle]);
|
|
112
|
+
const onScroll = React.useCallback((scrollLeft, scrollTop) => {
|
|
113
|
+
const el = scroller.current;
|
|
114
|
+
if (el === null) return;
|
|
115
|
+
scrollTop = scrollTop ?? el.scrollTop;
|
|
116
|
+
scrollLeft = scrollLeft ?? el.scrollLeft;
|
|
117
|
+
const lastScrollTop = lastScrollPosition.current.scrollTop;
|
|
118
|
+
const lastScrollLeft = lastScrollPosition.current.scrollLeft;
|
|
119
|
+
const dx = scrollLeft - lastScrollLeft;
|
|
120
|
+
const dy = scrollTop - lastScrollTop;
|
|
121
|
+
if (hasTouches && dx !== 0 && dy !== 0 && (Math.abs(dx) > 3 || Math.abs(dy) > 3) && preventDiagonalScrolling && lastScrollPosition.current.lockDirection === undefined) {
|
|
122
|
+
lastScrollPosition.current.lockDirection = Math.abs(dx) < Math.abs(dy) ? [lastScrollLeft, undefined] : [undefined, lastScrollTop];
|
|
123
|
+
}
|
|
124
|
+
const lock = lastScrollPosition.current.lockDirection;
|
|
125
|
+
scrollLeft = lock?.[0] ?? scrollLeft;
|
|
126
|
+
scrollTop = lock?.[1] ?? scrollTop;
|
|
127
|
+
lastScrollPosition.current.scrollLeft = scrollLeft;
|
|
128
|
+
lastScrollPosition.current.scrollTop = scrollTop;
|
|
129
|
+
const cWidth = el.clientWidth;
|
|
130
|
+
const cHeight = el.clientHeight;
|
|
131
|
+
const newY = scrollTop;
|
|
132
|
+
const delta = lastScrollY.current - newY;
|
|
133
|
+
const scrollableHeight = el.scrollHeight - cHeight;
|
|
134
|
+
lastScrollY.current = newY;
|
|
135
|
+
// Calculate the virtual Y position
|
|
136
|
+
let virtualY;
|
|
137
|
+
// When content height exceeds browser limits, use hybrid approach
|
|
138
|
+
if (scrollableHeight > 0 && scrollHeight > el.scrollHeight + 5) {
|
|
139
|
+
// For large jumps (scrollbar interaction) or edge positions,
|
|
140
|
+
// recalculate position based on percentage
|
|
141
|
+
if (Math.abs(delta) > 2000 || newY === 0 || newY === scrollableHeight) {
|
|
142
|
+
const scrollProgress = Math.max(0, Math.min(1, newY / scrollableHeight));
|
|
143
|
+
const virtualScrollableHeight = scrollHeight - cHeight;
|
|
144
|
+
virtualY = scrollProgress * virtualScrollableHeight;
|
|
145
|
+
// Update our tracked position for subsequent smooth scrolling
|
|
146
|
+
virtualScrollY.current = virtualY;
|
|
147
|
+
} else {
|
|
148
|
+
// For smooth scrolling, apply the delta directly to virtual position
|
|
149
|
+
// This preserves 1:1 pixel movement for smooth scrolling
|
|
150
|
+
virtualScrollY.current -= delta;
|
|
151
|
+
virtualY = virtualScrollY.current;
|
|
152
|
+
}
|
|
153
|
+
} else {
|
|
154
|
+
// Direct mapping when within browser limits
|
|
155
|
+
virtualY = newY;
|
|
156
|
+
virtualScrollY.current = virtualY;
|
|
157
|
+
}
|
|
158
|
+
// Ensure virtual Y is within valid bounds
|
|
159
|
+
virtualY = Math.max(0, Math.min(virtualY, scrollHeight - cHeight));
|
|
160
|
+
virtualScrollY.current = virtualY; // Keep tracked position in bounds too
|
|
161
|
+
if (lock !== undefined) {
|
|
162
|
+
window.clearTimeout(idleTimer.current);
|
|
163
|
+
setIsIdle(false);
|
|
164
|
+
idleTimer.current = window.setTimeout(() => setIsIdle(true), 200);
|
|
165
|
+
}
|
|
166
|
+
update({
|
|
167
|
+
x: scrollLeft,
|
|
168
|
+
y: virtualY,
|
|
169
|
+
width: cWidth - paddingRight,
|
|
170
|
+
height: cHeight - paddingBottom,
|
|
171
|
+
paddingRight: rightWrapRef.current?.clientWidth ?? 0
|
|
112
172
|
});
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
el.scrollTop = ly;
|
|
129
|
-
}
|
|
130
|
-
lastScrollPosition.current.lockDirection = undefined;
|
|
131
|
-
}, [hasTouches, isIdle]);
|
|
132
|
-
const onScroll = React.useCallback((scrollLeft, scrollTop) => {
|
|
133
|
-
const el = scroller.current;
|
|
134
|
-
if (el === null)
|
|
135
|
-
return;
|
|
136
|
-
scrollTop = scrollTop ?? el.scrollTop;
|
|
137
|
-
scrollLeft = scrollLeft ?? el.scrollLeft;
|
|
138
|
-
const lastScrollTop = lastScrollPosition.current.scrollTop;
|
|
139
|
-
const lastScrollLeft = lastScrollPosition.current.scrollLeft;
|
|
140
|
-
const dx = scrollLeft - lastScrollLeft;
|
|
141
|
-
const dy = scrollTop - lastScrollTop;
|
|
142
|
-
if (hasTouches &&
|
|
143
|
-
dx !== 0 &&
|
|
144
|
-
dy !== 0 &&
|
|
145
|
-
(Math.abs(dx) > 3 || Math.abs(dy) > 3) &&
|
|
146
|
-
preventDiagonalScrolling &&
|
|
147
|
-
lastScrollPosition.current.lockDirection === undefined) {
|
|
148
|
-
lastScrollPosition.current.lockDirection =
|
|
149
|
-
Math.abs(dx) < Math.abs(dy) ? [lastScrollLeft, undefined] : [undefined, lastScrollTop];
|
|
150
|
-
}
|
|
151
|
-
const lock = lastScrollPosition.current.lockDirection;
|
|
152
|
-
scrollLeft = lock?.[0] ?? scrollLeft;
|
|
153
|
-
scrollTop = lock?.[1] ?? scrollTop;
|
|
154
|
-
lastScrollPosition.current.scrollLeft = scrollLeft;
|
|
155
|
-
lastScrollPosition.current.scrollTop = scrollTop;
|
|
156
|
-
const cWidth = el.clientWidth;
|
|
157
|
-
const cHeight = el.clientHeight;
|
|
158
|
-
const newY = scrollTop;
|
|
159
|
-
const delta = lastScrollY.current - newY;
|
|
160
|
-
const scrollableHeight = el.scrollHeight - cHeight;
|
|
161
|
-
lastScrollY.current = newY;
|
|
162
|
-
// Calculate the virtual Y position
|
|
163
|
-
let virtualY;
|
|
164
|
-
// When content height exceeds browser limits, use hybrid approach
|
|
165
|
-
if (scrollableHeight > 0 && scrollHeight > el.scrollHeight + 5) {
|
|
166
|
-
// For large jumps (scrollbar interaction) or edge positions,
|
|
167
|
-
// recalculate position based on percentage
|
|
168
|
-
if (Math.abs(delta) > 2000 || newY === 0 || newY === scrollableHeight) {
|
|
169
|
-
const scrollProgress = Math.max(0, Math.min(1, newY / scrollableHeight));
|
|
170
|
-
const virtualScrollableHeight = scrollHeight - cHeight;
|
|
171
|
-
virtualY = scrollProgress * virtualScrollableHeight;
|
|
172
|
-
// Update our tracked position for subsequent smooth scrolling
|
|
173
|
-
virtualScrollY.current = virtualY;
|
|
174
|
-
}
|
|
175
|
-
else {
|
|
176
|
-
// For smooth scrolling, apply the delta directly to virtual position
|
|
177
|
-
// This preserves 1:1 pixel movement for smooth scrolling
|
|
178
|
-
virtualScrollY.current -= delta;
|
|
179
|
-
virtualY = virtualScrollY.current;
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
else {
|
|
183
|
-
// Direct mapping when within browser limits
|
|
184
|
-
virtualY = newY;
|
|
185
|
-
virtualScrollY.current = virtualY;
|
|
186
|
-
}
|
|
187
|
-
// Ensure virtual Y is within valid bounds
|
|
188
|
-
virtualY = Math.max(0, Math.min(virtualY, scrollHeight - cHeight));
|
|
189
|
-
virtualScrollY.current = virtualY; // Keep tracked position in bounds too
|
|
190
|
-
if (lock !== undefined) {
|
|
191
|
-
window.clearTimeout(idleTimer.current);
|
|
192
|
-
setIsIdle(false);
|
|
193
|
-
idleTimer.current = window.setTimeout(() => setIsIdle(true), 200);
|
|
194
|
-
}
|
|
195
|
-
update({
|
|
196
|
-
x: scrollLeft,
|
|
197
|
-
y: virtualY,
|
|
198
|
-
width: cWidth - paddingRight,
|
|
199
|
-
height: cHeight - paddingBottom,
|
|
200
|
-
paddingRight: rightWrapRef.current?.clientWidth ?? 0,
|
|
201
|
-
});
|
|
202
|
-
}, [paddingBottom, paddingRight, scrollHeight, update, preventDiagonalScrolling, hasTouches]);
|
|
203
|
-
useKineticScroll(kineticScrollPerfHack && browserIsSafari.value, onScroll, scroller);
|
|
204
|
-
const onScrollRef = React.useRef(onScroll);
|
|
205
|
-
onScrollRef.current = onScroll;
|
|
206
|
-
const lastProps = React.useRef(undefined);
|
|
207
|
-
const didFirstScroll = React.useRef(false);
|
|
208
|
-
// if this is not a layout effect there will be a flicker when changing the number of freezeColumns
|
|
209
|
-
// we need to document what this is needed at all.
|
|
210
|
-
React.useLayoutEffect(() => {
|
|
211
|
-
if (didFirstScroll.current)
|
|
212
|
-
onScroll();
|
|
213
|
-
else
|
|
214
|
-
didFirstScroll.current = true;
|
|
215
|
-
}, [onScroll, paddingBottom, paddingRight]);
|
|
216
|
-
const setRefs = React.useCallback((instance) => {
|
|
217
|
-
scroller.current = instance;
|
|
218
|
-
if (scrollRef !== undefined) {
|
|
219
|
-
scrollRef.current = instance;
|
|
220
|
-
}
|
|
221
|
-
}, [scrollRef]);
|
|
222
|
-
let key = 0;
|
|
223
|
-
let h = 0;
|
|
224
|
-
// Ensure we don't create padders that exceed browser limits
|
|
225
|
-
const effectiveScrollHeight = Math.min(scrollHeight, BROWSER_MAX_DIV_HEIGHT);
|
|
226
|
-
padders.push(React.createElement("div", { key: key++, style: { width: scrollWidth, height: 0 } }));
|
|
227
|
-
while (h < effectiveScrollHeight) {
|
|
228
|
-
const toAdd = Math.min(MAX_PADDER_SEGMENT_HEIGHT, effectiveScrollHeight - h);
|
|
229
|
-
padders.push(React.createElement("div", { key: key++, style: { width: 0, height: toAdd } }));
|
|
230
|
-
h += toAdd;
|
|
173
|
+
}, [paddingBottom, paddingRight, scrollHeight, update, preventDiagonalScrolling, hasTouches]);
|
|
174
|
+
useKineticScroll(kineticScrollPerfHack && browserIsSafari.value, onScroll, scroller);
|
|
175
|
+
const onScrollRef = React.useRef(onScroll);
|
|
176
|
+
onScrollRef.current = onScroll;
|
|
177
|
+
const lastProps = React.useRef(undefined);
|
|
178
|
+
const didFirstScroll = React.useRef(false);
|
|
179
|
+
// if this is not a layout effect there will be a flicker when changing the number of freezeColumns
|
|
180
|
+
// we need to document what this is needed at all.
|
|
181
|
+
React.useLayoutEffect(() => {
|
|
182
|
+
if (didFirstScroll.current) onScroll();else didFirstScroll.current = true;
|
|
183
|
+
}, [onScroll, paddingBottom, paddingRight]);
|
|
184
|
+
const setRefs = React.useCallback(instance => {
|
|
185
|
+
scroller.current = instance;
|
|
186
|
+
if (scrollRef !== undefined) {
|
|
187
|
+
scrollRef.current = instance;
|
|
231
188
|
}
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
189
|
+
}, [scrollRef]);
|
|
190
|
+
let key = 0;
|
|
191
|
+
let h = 0;
|
|
192
|
+
// Ensure we don't create padders that exceed browser limits
|
|
193
|
+
const effectiveScrollHeight = Math.min(scrollHeight, BROWSER_MAX_DIV_HEIGHT);
|
|
194
|
+
padders.push(React.createElement("div", {
|
|
195
|
+
key: key++,
|
|
196
|
+
style: {
|
|
197
|
+
width: scrollWidth,
|
|
198
|
+
height: 0
|
|
236
199
|
}
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
200
|
+
}));
|
|
201
|
+
while (h < effectiveScrollHeight) {
|
|
202
|
+
const toAdd = Math.min(MAX_PADDER_SEGMENT_HEIGHT, effectiveScrollHeight - h);
|
|
203
|
+
padders.push(React.createElement("div", {
|
|
204
|
+
key: key++,
|
|
205
|
+
style: {
|
|
206
|
+
width: 0,
|
|
207
|
+
height: toAdd
|
|
208
|
+
}
|
|
209
|
+
}));
|
|
210
|
+
h += toAdd;
|
|
211
|
+
}
|
|
212
|
+
const {
|
|
213
|
+
ref,
|
|
214
|
+
width,
|
|
215
|
+
height
|
|
216
|
+
} = useResizeDetector(initialSize);
|
|
217
|
+
if (typeof window !== "undefined" && (lastProps.current?.height !== height || lastProps.current?.width !== width)) {
|
|
218
|
+
window.setTimeout(() => onScrollRef.current(), 0);
|
|
219
|
+
lastProps.current = {
|
|
220
|
+
width,
|
|
221
|
+
height
|
|
222
|
+
};
|
|
223
|
+
}
|
|
224
|
+
if ((width ?? 0) === 0 || (height ?? 0) === 0) return React.createElement("div", {
|
|
225
|
+
ref: ref
|
|
226
|
+
});
|
|
227
|
+
return React.createElement("div", {
|
|
228
|
+
ref: ref
|
|
229
|
+
}, React.createElement(ScrollRegionStyle, {
|
|
230
|
+
isSafari: browserIsSafari.value
|
|
231
|
+
}, React.createElement("div", {
|
|
232
|
+
className: "dvn-underlay"
|
|
233
|
+
}, children), React.createElement("div", {
|
|
234
|
+
ref: setRefs,
|
|
235
|
+
style: lastProps.current,
|
|
236
|
+
draggable: draggable,
|
|
237
|
+
onDragStart: e => {
|
|
238
|
+
if (!draggable) {
|
|
239
|
+
e.stopPropagation();
|
|
240
|
+
e.preventDefault();
|
|
241
|
+
}
|
|
242
|
+
},
|
|
243
|
+
className: "dvn-scroller " + (className ?? ""),
|
|
244
|
+
onScroll: () => onScroll()
|
|
245
|
+
}, React.createElement("div", {
|
|
246
|
+
className: "dvn-scroll-inner" + (rightElement === undefined ? " dvn-hidden" : "")
|
|
247
|
+
}, React.createElement("div", {
|
|
248
|
+
className: "dvn-stack"
|
|
249
|
+
}, padders), rightElement !== undefined && React.createElement(React.Fragment, null, !rightElementFill && React.createElement("div", {
|
|
250
|
+
className: "dvn-spacer"
|
|
251
|
+
}), React.createElement("div", {
|
|
252
|
+
ref: rightWrapRef,
|
|
253
|
+
style: {
|
|
254
|
+
height,
|
|
255
|
+
maxHeight: clientHeight - Math.ceil(dpr % 1),
|
|
256
|
+
position: "sticky",
|
|
257
|
+
top: 0,
|
|
258
|
+
paddingLeft: 1,
|
|
259
|
+
marginBottom: -40,
|
|
260
|
+
marginRight: paddingRight,
|
|
261
|
+
flexGrow: rightElementFill ? 1 : undefined,
|
|
262
|
+
right: rightElementSticky ? paddingRight ?? 0 : undefined,
|
|
263
|
+
pointerEvents: "auto"
|
|
264
|
+
}
|
|
265
|
+
}, rightElement))))));
|
|
264
266
|
};
|
|
265
|
-
|
|
267
|
+
|
package/dist/index.css
CHANGED
|
@@ -1,2 +1,14 @@
|
|
|
1
1
|
/* Auto-generated file */
|
|
2
2
|
@import "./esm/data-editor/group-rename.css";
|
|
3
|
+
@import "./esm/internal/scrolling-data-grid/infinite-scroller.css";
|
|
4
|
+
@import "./esm/internal/data-editor-container/data-grid-container.css";
|
|
5
|
+
@import "./esm/internal/data-grid-overlay-editor/private/bubbles-overlay-editor-style.css";
|
|
6
|
+
@import "./esm/internal/data-grid-overlay-editor/private/uri-overlay-editor-style.css";
|
|
7
|
+
@import "./esm/internal/data-grid-overlay-editor/private/markdown-overlay-editor-style.css";
|
|
8
|
+
@import "./esm/internal/data-grid-overlay-editor/private/drilldown-overlay-editor.css";
|
|
9
|
+
@import "./esm/internal/data-grid-overlay-editor/private/image-overlay-editor-style.css";
|
|
10
|
+
@import "./esm/internal/data-grid-overlay-editor/private/number-overlay-editor-style.css";
|
|
11
|
+
@import "./esm/internal/data-grid-overlay-editor/data-grid-overlay-editor-style.css";
|
|
12
|
+
@import "./esm/internal/data-grid-search/data-grid-search-style.css";
|
|
13
|
+
@import "./esm/internal/markdown-div/private/markdown-container.css";
|
|
14
|
+
@import "./esm/internal/growing-entry/growing-entry-style.css";
|
package/package.json
CHANGED