@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.
Files changed (65) hide show
  1. package/build.sh +3 -1
  2. package/dist/cjs/internal/data-editor-container/data-grid-container.css +1 -0
  3. package/dist/cjs/internal/data-editor-container/data-grid-container.js +25 -30
  4. package/dist/cjs/internal/data-grid-overlay-editor/data-grid-overlay-editor-style.css +1 -0
  5. package/dist/cjs/internal/data-grid-overlay-editor/data-grid-overlay-editor-style.js +19 -75
  6. package/dist/cjs/internal/data-grid-overlay-editor/private/bubbles-overlay-editor-style.css +1 -0
  7. package/dist/cjs/internal/data-grid-overlay-editor/private/bubbles-overlay-editor-style.js +5 -32
  8. package/dist/cjs/internal/data-grid-overlay-editor/private/drilldown-overlay-editor.css +1 -0
  9. package/dist/cjs/internal/data-grid-overlay-editor/private/drilldown-overlay-editor.js +15 -45
  10. package/dist/cjs/internal/data-grid-overlay-editor/private/image-overlay-editor-style.css +1 -0
  11. package/dist/cjs/internal/data-grid-overlay-editor/private/image-overlay-editor-style.js +5 -54
  12. package/dist/cjs/internal/data-grid-overlay-editor/private/markdown-overlay-editor-style.css +1 -0
  13. package/dist/cjs/internal/data-grid-overlay-editor/private/markdown-overlay-editor-style.js +9 -74
  14. package/dist/cjs/internal/data-grid-overlay-editor/private/number-overlay-editor-style.css +1 -0
  15. package/dist/cjs/internal/data-grid-overlay-editor/private/number-overlay-editor-style.js +5 -13
  16. package/dist/cjs/internal/data-grid-overlay-editor/private/uri-overlay-editor-style.css +1 -0
  17. package/dist/cjs/internal/data-grid-overlay-editor/private/uri-overlay-editor-style.js +5 -51
  18. package/dist/cjs/internal/data-grid-search/data-grid-search-style.css +1 -0
  19. package/dist/cjs/internal/data-grid-search/data-grid-search-style.js +5 -94
  20. package/dist/cjs/internal/growing-entry/growing-entry-style.css +3 -0
  21. package/dist/cjs/internal/growing-entry/growing-entry-style.js +15 -58
  22. package/dist/cjs/internal/markdown-div/private/markdown-container.css +1 -0
  23. package/dist/cjs/internal/markdown-div/private/markdown-container.js +5 -17
  24. package/dist/cjs/internal/scrolling-data-grid/infinite-scroller.css +1 -0
  25. package/dist/cjs/internal/scrolling-data-grid/infinite-scroller.js +233 -231
  26. package/dist/dts/common/render-state-provider.d.ts +0 -1
  27. package/dist/dts/common/styles.d.ts +0 -1
  28. package/dist/dts/common/support.d.ts +0 -1
  29. package/dist/dts/common/utils.d.ts +0 -1
  30. package/dist/dts/internal/data-grid/cell-set.d.ts +0 -1
  31. package/dist/dts/internal/data-grid/color-parser.d.ts +0 -1
  32. package/dist/dts/internal/data-grid/data-grid-sprites.d.ts +0 -1
  33. package/dist/dts/internal/data-grid/event-args.d.ts +0 -1
  34. package/dist/dts/internal/data-grid/image-window-loader-interface.d.ts +0 -1
  35. package/dist/dts/internal/data-grid/sprites.d.ts +0 -1
  36. package/dist/dts/internal/data-grid-overlay-editor/private/image-overlay-editor-style.d.ts +0 -1
  37. package/dist/dts/internal/data-grid-overlay-editor/private/image-overlay-editor.d.ts +0 -1
  38. package/dist/dts/internal/markdown-div/markdown-div.d.ts +0 -1
  39. package/dist/dts/internal/markdown-div/private/markdown-container.d.ts +0 -1
  40. package/dist/esm/internal/data-editor-container/data-grid-container.css +1 -0
  41. package/dist/esm/internal/data-editor-container/data-grid-container.js +25 -30
  42. package/dist/esm/internal/data-grid-overlay-editor/data-grid-overlay-editor-style.css +1 -0
  43. package/dist/esm/internal/data-grid-overlay-editor/data-grid-overlay-editor-style.js +19 -75
  44. package/dist/esm/internal/data-grid-overlay-editor/private/bubbles-overlay-editor-style.css +1 -0
  45. package/dist/esm/internal/data-grid-overlay-editor/private/bubbles-overlay-editor-style.js +5 -32
  46. package/dist/esm/internal/data-grid-overlay-editor/private/drilldown-overlay-editor.css +1 -0
  47. package/dist/esm/internal/data-grid-overlay-editor/private/drilldown-overlay-editor.js +15 -45
  48. package/dist/esm/internal/data-grid-overlay-editor/private/image-overlay-editor-style.css +1 -0
  49. package/dist/esm/internal/data-grid-overlay-editor/private/image-overlay-editor-style.js +5 -54
  50. package/dist/esm/internal/data-grid-overlay-editor/private/markdown-overlay-editor-style.css +1 -0
  51. package/dist/esm/internal/data-grid-overlay-editor/private/markdown-overlay-editor-style.js +9 -74
  52. package/dist/esm/internal/data-grid-overlay-editor/private/number-overlay-editor-style.css +1 -0
  53. package/dist/esm/internal/data-grid-overlay-editor/private/number-overlay-editor-style.js +5 -13
  54. package/dist/esm/internal/data-grid-overlay-editor/private/uri-overlay-editor-style.css +1 -0
  55. package/dist/esm/internal/data-grid-overlay-editor/private/uri-overlay-editor-style.js +5 -51
  56. package/dist/esm/internal/data-grid-search/data-grid-search-style.css +1 -0
  57. package/dist/esm/internal/data-grid-search/data-grid-search-style.js +5 -94
  58. package/dist/esm/internal/growing-entry/growing-entry-style.css +3 -0
  59. package/dist/esm/internal/growing-entry/growing-entry-style.js +15 -58
  60. package/dist/esm/internal/markdown-div/private/markdown-container.css +1 -0
  61. package/dist/esm/internal/markdown-div/private/markdown-container.js +5 -17
  62. package/dist/esm/internal/scrolling-data-grid/infinite-scroller.css +1 -0
  63. package/dist/esm/internal/scrolling-data-grid/infinite-scroller.js +233 -231
  64. package/dist/index.css +12 -0
  65. package/package.json +1 -1
@@ -1,60 +1,17 @@
1
1
  import { styled } from "@linaria/react";
2
- export const InputBox = styled.textarea `
3
- position: absolute;
4
- left: 0;
5
- right: 0;
6
- top: 0;
7
- bottom: 0;
8
- width: 100%;
9
- height: 100%;
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.div `
3
- word-break: break-word;
4
- -webkit-touch-callout: default;
5
- padding-top: 6px;
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 ScrollRegionStyle = styled.div `
8
- .dvn-scroller {
9
- overflow: ${p => (p.isSafari ? "scroll" : "auto")};
10
- transform: translate3d(0, 0, 0);
11
- }
12
-
13
- .dvn-hidden {
14
- visibility: hidden;
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
- const [hasTouches, setHasTouches] = React.useState(false);
61
- const safeWindow = typeof window === "undefined" ? null : window;
62
- const cbTimer = React.useRef(0);
63
- useEventListener("touchstart", React.useCallback(() => {
64
- window.clearTimeout(cbTimer.current);
65
- setHasTouches(true);
66
- }, []), safeWindow, true, false);
67
- useEventListener("touchend", React.useCallback(e => {
68
- if (e.touches.length === 0) {
69
- cbTimer.current = window.setTimeout(() => setHasTouches(false), delay);
70
- }
71
- }, [delay]), safeWindow, true, false);
72
- return hasTouches;
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
- const { children, clientHeight, scrollHeight, scrollWidth, update, draggable, className, preventDiagonalScrolling = false, paddingBottom = 0, paddingRight = 0, rightElement, rightElementProps, kineticScrollPerfHack = false, scrollRef, initialSize, } = p;
87
- const padders = [];
88
- const rightElementSticky = rightElementProps?.sticky ?? false;
89
- const rightElementFill = rightElementProps?.fill ?? false;
90
- // Track the virtual scroll position directly for smooth scrolling
91
- const virtualScrollY = React.useRef(0);
92
- const lastScrollY = React.useRef(0);
93
- const scroller = React.useRef(null);
94
- const dpr = typeof window === "undefined" ? 1 : window.devicePixelRatio;
95
- const lastDpr = React.useRef(dpr);
96
- // Reset scroll tracking when device pixel ratio changes (e.g., browser zoom)
97
- React.useEffect(() => {
98
- if (lastDpr.current !== dpr) {
99
- virtualScrollY.current = 0;
100
- lastScrollY.current = 0;
101
- lastDpr.current = dpr;
102
- const el = scroller.current;
103
- if (el !== null) {
104
- onScrollRef.current(el.scrollLeft, el.scrollTop);
105
- }
106
- }
107
- }, [dpr]);
108
- const lastScrollPosition = React.useRef({
109
- scrollLeft: 0,
110
- scrollTop: 0,
111
- lockDirection: undefined,
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
- const rightWrapRef = React.useRef(null);
114
- const hasTouches = useTouchUpDelayed(200);
115
- const [isIdle, setIsIdle] = React.useState(true);
116
- const idleTimer = React.useRef(0);
117
- React.useLayoutEffect(() => {
118
- if (!isIdle || hasTouches || lastScrollPosition.current.lockDirection === undefined)
119
- return;
120
- const el = scroller.current;
121
- if (el === null)
122
- return;
123
- const [lx, ly] = lastScrollPosition.current.lockDirection;
124
- if (lx !== undefined) {
125
- el.scrollLeft = lx;
126
- }
127
- else if (ly !== undefined) {
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
- const { ref, width, height } = useResizeDetector(initialSize);
233
- if (typeof window !== "undefined" && (lastProps.current?.height !== height || lastProps.current?.width !== width)) {
234
- window.setTimeout(() => onScrollRef.current(), 0);
235
- lastProps.current = { width, height };
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
- if ((width ?? 0) === 0 || (height ?? 0) === 0)
238
- return React.createElement("div", { ref: ref });
239
- return (React.createElement("div", { ref: ref },
240
- React.createElement(ScrollRegionStyle, { isSafari: browserIsSafari.value },
241
- React.createElement("div", { className: "dvn-underlay" }, children),
242
- React.createElement("div", { ref: setRefs, style: lastProps.current, draggable: draggable, onDragStart: e => {
243
- if (!draggable) {
244
- e.stopPropagation();
245
- e.preventDefault();
246
- }
247
- }, className: "dvn-scroller " + (className ?? ""), onScroll: () => onScroll() },
248
- React.createElement("div", { className: "dvn-scroll-inner" + (rightElement === undefined ? " dvn-hidden" : "") },
249
- React.createElement("div", { className: "dvn-stack" }, padders),
250
- rightElement !== undefined && (React.createElement(React.Fragment, null,
251
- !rightElementFill && React.createElement("div", { className: "dvn-spacer" }),
252
- React.createElement("div", { ref: rightWrapRef, style: {
253
- height,
254
- maxHeight: clientHeight - Math.ceil(dpr % 1),
255
- position: "sticky",
256
- top: 0,
257
- paddingLeft: 1,
258
- marginBottom: -40,
259
- marginRight: paddingRight,
260
- flexGrow: rightElementFill ? 1 : undefined,
261
- right: rightElementSticky ? (paddingRight ?? 0) : undefined,
262
- pointerEvents: "auto",
263
- } }, rightElement))))))));
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
- //# sourceMappingURL=infinite-scroller.js.map
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@glideappsfinal/glide-data-grid",
3
- "version": "6.0.9",
3
+ "version": "6.0.10",
4
4
  "description": "React data grid for beautifully displaying and editing large amounts of data with amazing performance.",
5
5
  "sideEffects": [
6
6
  "**/*.css"