@react-aria/virtualizer 4.1.10 → 4.1.11
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/ScrollView.main.js
CHANGED
|
@@ -108,7 +108,7 @@ function $00ca8c0b29e3e07c$export$2ea0c4974da4731b(props, ref) {
|
|
|
108
108
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
109
109
|
}, []);
|
|
110
110
|
let isUpdatingSize = (0, $kvIfm$react.useRef)(false);
|
|
111
|
-
let updateSize = (0, $kvIfm$
|
|
111
|
+
let updateSize = (0, $kvIfm$react.useCallback)((flush)=>{
|
|
112
112
|
let dom = ref.current;
|
|
113
113
|
if (!dom || isUpdatingSize.current) return;
|
|
114
114
|
// Prevent reentrancy when resize observer fires, triggers re-layout that results in
|
|
@@ -141,10 +141,17 @@ function $00ca8c0b29e3e07c$export$2ea0c4974da4731b(props, ref) {
|
|
|
141
141
|
}
|
|
142
142
|
}
|
|
143
143
|
isUpdatingSize.current = false;
|
|
144
|
-
}
|
|
144
|
+
}, [
|
|
145
|
+
ref,
|
|
146
|
+
state,
|
|
147
|
+
onVisibleRectChange
|
|
148
|
+
]);
|
|
149
|
+
let updateSizeEvent = (0, $kvIfm$reactariautils.useEffectEvent)(updateSize);
|
|
145
150
|
// Update visible rect when the content size changes, in case scrollbars need to appear or disappear.
|
|
146
151
|
let lastContentSize = (0, $kvIfm$react.useRef)(null);
|
|
147
152
|
let [update, setUpdate] = (0, $kvIfm$react.useState)({});
|
|
153
|
+
// We only contain a call to setState in here for testing environments.
|
|
154
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
148
155
|
(0, $kvIfm$reactariautils.useLayoutEffect)(()=>{
|
|
149
156
|
if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) {
|
|
150
157
|
// React doesn't allow flushSync inside effects, so queue a microtask.
|
|
@@ -160,13 +167,13 @@ function $00ca8c0b29e3e07c$export$2ea0c4974da4731b(props, ref) {
|
|
|
160
167
|
setUpdate({});
|
|
161
168
|
lastContentSize.current = contentSize;
|
|
162
169
|
return;
|
|
163
|
-
} else queueMicrotask(()=>
|
|
170
|
+
} else queueMicrotask(()=>updateSizeEvent((0, $kvIfm$reactdom.flushSync)));
|
|
164
171
|
}
|
|
165
172
|
lastContentSize.current = contentSize;
|
|
166
173
|
});
|
|
167
174
|
// Will only run in tests, needs to be in separate effect so it is properly run in the next render in strict mode.
|
|
168
175
|
(0, $kvIfm$reactariautils.useLayoutEffect)(()=>{
|
|
169
|
-
|
|
176
|
+
updateSizeEvent((fn)=>fn());
|
|
170
177
|
}, [
|
|
171
178
|
update
|
|
172
179
|
]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-aria/virtualizer/src/ScrollView.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// @ts-ignore\nimport {flushSync} from 'react-dom';\nimport {getScrollLeft} from './utils';\nimport React, {\n CSSProperties,\n ForwardedRef,\n HTMLAttributes,\n ReactNode,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {Rect, Size} from '@react-stately/virtualizer';\nimport {useEffectEvent, useEvent, useLayoutEffect, useObjectRef, useResizeObserver} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\n\ninterface ScrollViewProps extends HTMLAttributes<HTMLElement> {\n contentSize: Size,\n onVisibleRectChange: (rect: Rect) => void,\n children?: ReactNode,\n innerStyle?: CSSProperties,\n onScrollStart?: () => void,\n onScrollEnd?: () => void,\n scrollDirection?: 'horizontal' | 'vertical' | 'both'\n}\n\nfunction ScrollView(props: ScrollViewProps, ref: ForwardedRef<HTMLDivElement | null>) {\n ref = useObjectRef(ref);\n let {scrollViewProps, contentProps} = useScrollView(props, ref);\n\n return (\n <div role=\"presentation\" {...scrollViewProps} ref={ref}>\n <div {...contentProps}>\n {props.children}\n </div>\n </div>\n );\n}\n\nconst ScrollViewForwardRef:\n React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<HTMLDivElement | null>> =\nReact.forwardRef(ScrollView);\nexport {ScrollViewForwardRef as ScrollView};\n\ninterface ScrollViewAria {\n isScrolling: boolean,\n scrollViewProps: HTMLAttributes<HTMLElement>,\n contentProps: HTMLAttributes<HTMLElement>\n}\n\nexport function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement | null>): ScrollViewAria {\n let {\n contentSize,\n onVisibleRectChange,\n innerStyle,\n onScrollStart,\n onScrollEnd,\n scrollDirection = 'both',\n ...otherProps\n } = props;\n\n let state = useRef({\n scrollTop: 0,\n scrollLeft: 0,\n scrollEndTime: 0,\n scrollTimeout: null as ReturnType<typeof setTimeout> | null,\n width: 0,\n height: 0,\n isScrolling: false\n }).current;\n let {direction} = useLocale();\n\n let [isScrolling, setScrolling] = useState(false);\n\n let onScroll = useCallback((e) => {\n if (e.target !== e.currentTarget) {\n return;\n }\n\n if (props.onScroll) {\n props.onScroll(e);\n }\n\n flushSync(() => {\n let scrollTop = e.currentTarget.scrollTop;\n let scrollLeft = getScrollLeft(e.currentTarget, direction);\n\n // Prevent rubber band scrolling from shaking when scrolling out of bounds\n state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));\n state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));\n\n if (!state.isScrolling) {\n state.isScrolling = true;\n setScrolling(true);\n\n // Pause typekit MutationObserver during scrolling.\n window.dispatchEvent(new Event('tk.disconnect-observer'));\n if (onScrollStart) {\n onScrollStart();\n }\n }\n\n // So we don't constantly call clearTimeout and setTimeout,\n // keep track of the current timeout time and only reschedule\n // the timer when it is getting close.\n let now = Date.now();\n if (state.scrollEndTime <= now + 50) {\n state.scrollEndTime = now + 300;\n\n if (state.scrollTimeout != null) {\n clearTimeout(state.scrollTimeout);\n }\n\n state.scrollTimeout = setTimeout(() => {\n state.isScrolling = false;\n setScrolling(false);\n state.scrollTimeout = null;\n\n window.dispatchEvent(new Event('tk.connect-observer'));\n if (onScrollEnd) {\n onScrollEnd();\n }\n }, 300);\n }\n });\n }, [props, direction, state, contentSize, onVisibleRectChange, onScrollStart, onScrollEnd]);\n\n // Attach event directly to ref so RAC Virtualizer doesn't need to send props upward.\n useEvent(ref, 'scroll', onScroll);\n\n useEffect(() => {\n return () => {\n if (state.scrollTimeout != null) {\n clearTimeout(state.scrollTimeout);\n }\n\n if (state.isScrolling) {\n window.dispatchEvent(new Event('tk.connect-observer'));\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n let isUpdatingSize = useRef(false);\n let updateSize = useEffectEvent((flush: typeof flushSync) => {\n let dom = ref.current;\n if (!dom || isUpdatingSize.current) {\n return;\n }\n\n // Prevent reentrancy when resize observer fires, triggers re-layout that results in\n // content size update, causing below layout effect to fire. This avoids infinite loops.\n isUpdatingSize.current = true;\n\n let isTestEnv = process.env.NODE_ENV === 'test' && !process.env.VIRT_ON;\n let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth');\n let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientHeight');\n let clientWidth = dom.clientWidth;\n let clientHeight = dom.clientHeight;\n let w = isTestEnv && !isClientWidthMocked ? Infinity : clientWidth;\n let h = isTestEnv && !isClientHeightMocked ? Infinity : clientHeight;\n\n if (state.width !== w || state.height !== h) {\n state.width = w;\n state.height = h;\n flush(() => {\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, w, h));\n });\n\n // If the clientWidth or clientHeight changed, scrollbars appeared or disappeared as\n // a result of the layout update. In this case, re-layout again to account for the\n // adjusted space. In very specific cases this might result in the scrollbars disappearing\n // again, resulting in extra padding. We stop after a maximum of two layout passes to avoid\n // an infinite loop. This matches how browsers behavior with native CSS grid layout.\n if (!isTestEnv && clientWidth !== dom.clientWidth || clientHeight !== dom.clientHeight) {\n state.width = dom.clientWidth;\n state.height = dom.clientHeight;\n flush(() => {\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));\n });\n }\n }\n\n isUpdatingSize.current = false;\n });\n\n // Update visible rect when the content size changes, in case scrollbars need to appear or disappear.\n let lastContentSize = useRef<Size | null>(null);\n let [update, setUpdate] = useState({});\n useLayoutEffect(() => {\n if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) {\n // React doesn't allow flushSync inside effects, so queue a microtask.\n // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).\n // If we are in an `act` environment, update immediately without a microtask so you don't need\n // to mock timers in tests. In this case, the update is synchronous already.\n // IS_REACT_ACT_ENVIRONMENT is used by React 18. Previous versions checked for the `jest` global.\n // https://github.com/reactwg/react-18/discussions/102\n // @ts-ignore\n if (typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined') {\n // This is so we update size in a separate render but within the same act. Needs to be setState instead of refs\n // due to strict mode.\n setUpdate({});\n lastContentSize.current = contentSize;\n return;\n } else {\n queueMicrotask(() => updateSize(flushSync));\n }\n }\n\n lastContentSize.current = contentSize;\n });\n\n // Will only run in tests, needs to be in separate effect so it is properly run in the next render in strict mode.\n useLayoutEffect(() => {\n updateSize(fn => fn());\n }, [update]);\n\n let onResize = useCallback(() => {\n updateSize(flushSync);\n }, [updateSize]);\n\n // Watch border-box instead of of content-box so that we don't go into\n // an infinite loop when scrollbars appear or disappear.\n useResizeObserver({ref, box: 'border-box', onResize});\n\n let style: React.CSSProperties = {\n // Reset padding so that relative positioning works correctly. Padding will be done in JS layout.\n padding: 0,\n ...otherProps.style\n };\n\n if (scrollDirection === 'horizontal') {\n style.overflowX = 'auto';\n style.overflowY = 'hidden';\n } else if (scrollDirection === 'vertical' || contentSize.width === state.width) {\n // Set overflow-x: hidden if content size is equal to the width of the scroll view.\n // This prevents horizontal scrollbars from flickering during resizing due to resize observer\n // firing slower than the frame rate, which may cause an infinite re-render loop.\n style.overflowY = 'auto';\n style.overflowX = 'hidden';\n } else {\n style.overflow = 'auto';\n }\n\n innerStyle = {\n width: Number.isFinite(contentSize.width) ? contentSize.width : undefined,\n height: Number.isFinite(contentSize.height) ? contentSize.height : undefined,\n pointerEvents: isScrolling ? 'none' : 'auto',\n position: 'relative',\n ...innerStyle\n };\n\n return {\n isScrolling,\n scrollViewProps: {\n ...otherProps,\n style\n },\n contentProps: {\n role: 'presentation',\n style: innerStyle\n }\n };\n}\n"],"names":[],"version":3,"file":"ScrollView.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/virtualizer/src/ScrollView.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// @ts-ignore\nimport {flushSync} from 'react-dom';\nimport {getScrollLeft} from './utils';\nimport React, {\n CSSProperties,\n ForwardedRef,\n HTMLAttributes,\n ReactNode,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {Rect, Size} from '@react-stately/virtualizer';\nimport {useEffectEvent, useEvent, useLayoutEffect, useObjectRef, useResizeObserver} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\n\ninterface ScrollViewProps extends HTMLAttributes<HTMLElement> {\n contentSize: Size,\n onVisibleRectChange: (rect: Rect) => void,\n children?: ReactNode,\n innerStyle?: CSSProperties,\n onScrollStart?: () => void,\n onScrollEnd?: () => void,\n scrollDirection?: 'horizontal' | 'vertical' | 'both'\n}\n\nfunction ScrollView(props: ScrollViewProps, ref: ForwardedRef<HTMLDivElement | null>) {\n ref = useObjectRef(ref);\n let {scrollViewProps, contentProps} = useScrollView(props, ref);\n\n return (\n <div role=\"presentation\" {...scrollViewProps} ref={ref}>\n <div {...contentProps}>\n {props.children}\n </div>\n </div>\n );\n}\n\nconst ScrollViewForwardRef:\n React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<HTMLDivElement | null>> =\nReact.forwardRef(ScrollView);\nexport {ScrollViewForwardRef as ScrollView};\n\ninterface ScrollViewAria {\n isScrolling: boolean,\n scrollViewProps: HTMLAttributes<HTMLElement>,\n contentProps: HTMLAttributes<HTMLElement>\n}\n\nexport function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement | null>): ScrollViewAria {\n let {\n contentSize,\n onVisibleRectChange,\n innerStyle,\n onScrollStart,\n onScrollEnd,\n scrollDirection = 'both',\n ...otherProps\n } = props;\n\n let state = useRef({\n scrollTop: 0,\n scrollLeft: 0,\n scrollEndTime: 0,\n scrollTimeout: null as ReturnType<typeof setTimeout> | null,\n width: 0,\n height: 0,\n isScrolling: false\n }).current;\n let {direction} = useLocale();\n\n let [isScrolling, setScrolling] = useState(false);\n\n let onScroll = useCallback((e) => {\n if (e.target !== e.currentTarget) {\n return;\n }\n\n if (props.onScroll) {\n props.onScroll(e);\n }\n\n flushSync(() => {\n let scrollTop = e.currentTarget.scrollTop;\n let scrollLeft = getScrollLeft(e.currentTarget, direction);\n\n // Prevent rubber band scrolling from shaking when scrolling out of bounds\n state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));\n state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));\n\n if (!state.isScrolling) {\n state.isScrolling = true;\n setScrolling(true);\n\n // Pause typekit MutationObserver during scrolling.\n window.dispatchEvent(new Event('tk.disconnect-observer'));\n if (onScrollStart) {\n onScrollStart();\n }\n }\n\n // So we don't constantly call clearTimeout and setTimeout,\n // keep track of the current timeout time and only reschedule\n // the timer when it is getting close.\n let now = Date.now();\n if (state.scrollEndTime <= now + 50) {\n state.scrollEndTime = now + 300;\n\n if (state.scrollTimeout != null) {\n clearTimeout(state.scrollTimeout);\n }\n\n state.scrollTimeout = setTimeout(() => {\n state.isScrolling = false;\n setScrolling(false);\n state.scrollTimeout = null;\n\n window.dispatchEvent(new Event('tk.connect-observer'));\n if (onScrollEnd) {\n onScrollEnd();\n }\n }, 300);\n }\n });\n }, [props, direction, state, contentSize, onVisibleRectChange, onScrollStart, onScrollEnd]);\n\n // Attach event directly to ref so RAC Virtualizer doesn't need to send props upward.\n useEvent(ref, 'scroll', onScroll);\n\n useEffect(() => {\n return () => {\n if (state.scrollTimeout != null) {\n clearTimeout(state.scrollTimeout);\n }\n\n if (state.isScrolling) {\n window.dispatchEvent(new Event('tk.connect-observer'));\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n let isUpdatingSize = useRef(false);\n let updateSize = useCallback((flush: typeof flushSync) => {\n let dom = ref.current;\n if (!dom || isUpdatingSize.current) {\n return;\n }\n\n // Prevent reentrancy when resize observer fires, triggers re-layout that results in\n // content size update, causing below layout effect to fire. This avoids infinite loops.\n isUpdatingSize.current = true;\n\n let isTestEnv = process.env.NODE_ENV === 'test' && !process.env.VIRT_ON;\n let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth');\n let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientHeight');\n let clientWidth = dom.clientWidth;\n let clientHeight = dom.clientHeight;\n let w = isTestEnv && !isClientWidthMocked ? Infinity : clientWidth;\n let h = isTestEnv && !isClientHeightMocked ? Infinity : clientHeight;\n\n if (state.width !== w || state.height !== h) {\n state.width = w;\n state.height = h;\n flush(() => {\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, w, h));\n });\n\n // If the clientWidth or clientHeight changed, scrollbars appeared or disappeared as\n // a result of the layout update. In this case, re-layout again to account for the\n // adjusted space. In very specific cases this might result in the scrollbars disappearing\n // again, resulting in extra padding. We stop after a maximum of two layout passes to avoid\n // an infinite loop. This matches how browsers behavior with native CSS grid layout.\n if (!isTestEnv && clientWidth !== dom.clientWidth || clientHeight !== dom.clientHeight) {\n state.width = dom.clientWidth;\n state.height = dom.clientHeight;\n flush(() => {\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));\n });\n }\n }\n\n isUpdatingSize.current = false;\n }, [ref, state, onVisibleRectChange]);\n let updateSizeEvent = useEffectEvent(updateSize);\n\n // Update visible rect when the content size changes, in case scrollbars need to appear or disappear.\n let lastContentSize = useRef<Size | null>(null);\n let [update, setUpdate] = useState({});\n // We only contain a call to setState in here for testing environments.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(() => {\n if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) {\n // React doesn't allow flushSync inside effects, so queue a microtask.\n // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).\n // If we are in an `act` environment, update immediately without a microtask so you don't need\n // to mock timers in tests. In this case, the update is synchronous already.\n // IS_REACT_ACT_ENVIRONMENT is used by React 18. Previous versions checked for the `jest` global.\n // https://github.com/reactwg/react-18/discussions/102\n // @ts-ignore\n if (typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined') {\n // This is so we update size in a separate render but within the same act. Needs to be setState instead of refs\n // due to strict mode.\n setUpdate({});\n lastContentSize.current = contentSize;\n return;\n } else {\n queueMicrotask(() => updateSizeEvent(flushSync));\n }\n }\n\n lastContentSize.current = contentSize;\n });\n\n // Will only run in tests, needs to be in separate effect so it is properly run in the next render in strict mode.\n useLayoutEffect(() => {\n updateSizeEvent(fn => fn());\n }, [update]);\n\n let onResize = useCallback(() => {\n updateSize(flushSync);\n }, [updateSize]);\n\n // Watch border-box instead of of content-box so that we don't go into\n // an infinite loop when scrollbars appear or disappear.\n useResizeObserver({ref, box: 'border-box', onResize});\n\n let style: React.CSSProperties = {\n // Reset padding so that relative positioning works correctly. Padding will be done in JS layout.\n padding: 0,\n ...otherProps.style\n };\n\n if (scrollDirection === 'horizontal') {\n style.overflowX = 'auto';\n style.overflowY = 'hidden';\n } else if (scrollDirection === 'vertical' || contentSize.width === state.width) {\n // Set overflow-x: hidden if content size is equal to the width of the scroll view.\n // This prevents horizontal scrollbars from flickering during resizing due to resize observer\n // firing slower than the frame rate, which may cause an infinite re-render loop.\n style.overflowY = 'auto';\n style.overflowX = 'hidden';\n } else {\n style.overflow = 'auto';\n }\n\n innerStyle = {\n width: Number.isFinite(contentSize.width) ? contentSize.width : undefined,\n height: Number.isFinite(contentSize.height) ? contentSize.height : undefined,\n pointerEvents: isScrolling ? 'none' : 'auto',\n position: 'relative',\n ...innerStyle\n };\n\n return {\n isScrolling,\n scrollViewProps: {\n ...otherProps,\n style\n },\n contentProps: {\n role: 'presentation',\n style: innerStyle\n }\n };\n}\n"],"names":[],"version":3,"file":"ScrollView.main.js.map"}
|
package/dist/ScrollView.mjs
CHANGED
|
@@ -97,7 +97,7 @@ function $44a6ee657928b002$export$2ea0c4974da4731b(props, ref) {
|
|
|
97
97
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
98
98
|
}, []);
|
|
99
99
|
let isUpdatingSize = (0, $f9kpT$useRef)(false);
|
|
100
|
-
let updateSize = (0, $f9kpT$
|
|
100
|
+
let updateSize = (0, $f9kpT$useCallback)((flush)=>{
|
|
101
101
|
let dom = ref.current;
|
|
102
102
|
if (!dom || isUpdatingSize.current) return;
|
|
103
103
|
// Prevent reentrancy when resize observer fires, triggers re-layout that results in
|
|
@@ -130,10 +130,17 @@ function $44a6ee657928b002$export$2ea0c4974da4731b(props, ref) {
|
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
132
|
isUpdatingSize.current = false;
|
|
133
|
-
}
|
|
133
|
+
}, [
|
|
134
|
+
ref,
|
|
135
|
+
state,
|
|
136
|
+
onVisibleRectChange
|
|
137
|
+
]);
|
|
138
|
+
let updateSizeEvent = (0, $f9kpT$useEffectEvent)(updateSize);
|
|
134
139
|
// Update visible rect when the content size changes, in case scrollbars need to appear or disappear.
|
|
135
140
|
let lastContentSize = (0, $f9kpT$useRef)(null);
|
|
136
141
|
let [update, setUpdate] = (0, $f9kpT$useState)({});
|
|
142
|
+
// We only contain a call to setState in here for testing environments.
|
|
143
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
137
144
|
(0, $f9kpT$useLayoutEffect)(()=>{
|
|
138
145
|
if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) {
|
|
139
146
|
// React doesn't allow flushSync inside effects, so queue a microtask.
|
|
@@ -149,13 +156,13 @@ function $44a6ee657928b002$export$2ea0c4974da4731b(props, ref) {
|
|
|
149
156
|
setUpdate({});
|
|
150
157
|
lastContentSize.current = contentSize;
|
|
151
158
|
return;
|
|
152
|
-
} else queueMicrotask(()=>
|
|
159
|
+
} else queueMicrotask(()=>updateSizeEvent((0, $f9kpT$flushSync)));
|
|
153
160
|
}
|
|
154
161
|
lastContentSize.current = contentSize;
|
|
155
162
|
});
|
|
156
163
|
// Will only run in tests, needs to be in separate effect so it is properly run in the next render in strict mode.
|
|
157
164
|
(0, $f9kpT$useLayoutEffect)(()=>{
|
|
158
|
-
|
|
165
|
+
updateSizeEvent((fn)=>fn());
|
|
159
166
|
}, [
|
|
160
167
|
update
|
|
161
168
|
]);
|
|
@@ -97,7 +97,7 @@ function $44a6ee657928b002$export$2ea0c4974da4731b(props, ref) {
|
|
|
97
97
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
98
98
|
}, []);
|
|
99
99
|
let isUpdatingSize = (0, $f9kpT$useRef)(false);
|
|
100
|
-
let updateSize = (0, $f9kpT$
|
|
100
|
+
let updateSize = (0, $f9kpT$useCallback)((flush)=>{
|
|
101
101
|
let dom = ref.current;
|
|
102
102
|
if (!dom || isUpdatingSize.current) return;
|
|
103
103
|
// Prevent reentrancy when resize observer fires, triggers re-layout that results in
|
|
@@ -130,10 +130,17 @@ function $44a6ee657928b002$export$2ea0c4974da4731b(props, ref) {
|
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
132
|
isUpdatingSize.current = false;
|
|
133
|
-
}
|
|
133
|
+
}, [
|
|
134
|
+
ref,
|
|
135
|
+
state,
|
|
136
|
+
onVisibleRectChange
|
|
137
|
+
]);
|
|
138
|
+
let updateSizeEvent = (0, $f9kpT$useEffectEvent)(updateSize);
|
|
134
139
|
// Update visible rect when the content size changes, in case scrollbars need to appear or disappear.
|
|
135
140
|
let lastContentSize = (0, $f9kpT$useRef)(null);
|
|
136
141
|
let [update, setUpdate] = (0, $f9kpT$useState)({});
|
|
142
|
+
// We only contain a call to setState in here for testing environments.
|
|
143
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
137
144
|
(0, $f9kpT$useLayoutEffect)(()=>{
|
|
138
145
|
if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) {
|
|
139
146
|
// React doesn't allow flushSync inside effects, so queue a microtask.
|
|
@@ -149,13 +156,13 @@ function $44a6ee657928b002$export$2ea0c4974da4731b(props, ref) {
|
|
|
149
156
|
setUpdate({});
|
|
150
157
|
lastContentSize.current = contentSize;
|
|
151
158
|
return;
|
|
152
|
-
} else queueMicrotask(()=>
|
|
159
|
+
} else queueMicrotask(()=>updateSizeEvent((0, $f9kpT$flushSync)));
|
|
153
160
|
}
|
|
154
161
|
lastContentSize.current = contentSize;
|
|
155
162
|
});
|
|
156
163
|
// Will only run in tests, needs to be in separate effect so it is properly run in the next render in strict mode.
|
|
157
164
|
(0, $f9kpT$useLayoutEffect)(()=>{
|
|
158
|
-
|
|
165
|
+
updateSizeEvent((fn)=>fn());
|
|
159
166
|
}, [
|
|
160
167
|
update
|
|
161
168
|
]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-aria/virtualizer/src/ScrollView.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// @ts-ignore\nimport {flushSync} from 'react-dom';\nimport {getScrollLeft} from './utils';\nimport React, {\n CSSProperties,\n ForwardedRef,\n HTMLAttributes,\n ReactNode,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {Rect, Size} from '@react-stately/virtualizer';\nimport {useEffectEvent, useEvent, useLayoutEffect, useObjectRef, useResizeObserver} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\n\ninterface ScrollViewProps extends HTMLAttributes<HTMLElement> {\n contentSize: Size,\n onVisibleRectChange: (rect: Rect) => void,\n children?: ReactNode,\n innerStyle?: CSSProperties,\n onScrollStart?: () => void,\n onScrollEnd?: () => void,\n scrollDirection?: 'horizontal' | 'vertical' | 'both'\n}\n\nfunction ScrollView(props: ScrollViewProps, ref: ForwardedRef<HTMLDivElement | null>) {\n ref = useObjectRef(ref);\n let {scrollViewProps, contentProps} = useScrollView(props, ref);\n\n return (\n <div role=\"presentation\" {...scrollViewProps} ref={ref}>\n <div {...contentProps}>\n {props.children}\n </div>\n </div>\n );\n}\n\nconst ScrollViewForwardRef:\n React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<HTMLDivElement | null>> =\nReact.forwardRef(ScrollView);\nexport {ScrollViewForwardRef as ScrollView};\n\ninterface ScrollViewAria {\n isScrolling: boolean,\n scrollViewProps: HTMLAttributes<HTMLElement>,\n contentProps: HTMLAttributes<HTMLElement>\n}\n\nexport function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement | null>): ScrollViewAria {\n let {\n contentSize,\n onVisibleRectChange,\n innerStyle,\n onScrollStart,\n onScrollEnd,\n scrollDirection = 'both',\n ...otherProps\n } = props;\n\n let state = useRef({\n scrollTop: 0,\n scrollLeft: 0,\n scrollEndTime: 0,\n scrollTimeout: null as ReturnType<typeof setTimeout> | null,\n width: 0,\n height: 0,\n isScrolling: false\n }).current;\n let {direction} = useLocale();\n\n let [isScrolling, setScrolling] = useState(false);\n\n let onScroll = useCallback((e) => {\n if (e.target !== e.currentTarget) {\n return;\n }\n\n if (props.onScroll) {\n props.onScroll(e);\n }\n\n flushSync(() => {\n let scrollTop = e.currentTarget.scrollTop;\n let scrollLeft = getScrollLeft(e.currentTarget, direction);\n\n // Prevent rubber band scrolling from shaking when scrolling out of bounds\n state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));\n state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));\n\n if (!state.isScrolling) {\n state.isScrolling = true;\n setScrolling(true);\n\n // Pause typekit MutationObserver during scrolling.\n window.dispatchEvent(new Event('tk.disconnect-observer'));\n if (onScrollStart) {\n onScrollStart();\n }\n }\n\n // So we don't constantly call clearTimeout and setTimeout,\n // keep track of the current timeout time and only reschedule\n // the timer when it is getting close.\n let now = Date.now();\n if (state.scrollEndTime <= now + 50) {\n state.scrollEndTime = now + 300;\n\n if (state.scrollTimeout != null) {\n clearTimeout(state.scrollTimeout);\n }\n\n state.scrollTimeout = setTimeout(() => {\n state.isScrolling = false;\n setScrolling(false);\n state.scrollTimeout = null;\n\n window.dispatchEvent(new Event('tk.connect-observer'));\n if (onScrollEnd) {\n onScrollEnd();\n }\n }, 300);\n }\n });\n }, [props, direction, state, contentSize, onVisibleRectChange, onScrollStart, onScrollEnd]);\n\n // Attach event directly to ref so RAC Virtualizer doesn't need to send props upward.\n useEvent(ref, 'scroll', onScroll);\n\n useEffect(() => {\n return () => {\n if (state.scrollTimeout != null) {\n clearTimeout(state.scrollTimeout);\n }\n\n if (state.isScrolling) {\n window.dispatchEvent(new Event('tk.connect-observer'));\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n let isUpdatingSize = useRef(false);\n let updateSize = useEffectEvent((flush: typeof flushSync) => {\n let dom = ref.current;\n if (!dom || isUpdatingSize.current) {\n return;\n }\n\n // Prevent reentrancy when resize observer fires, triggers re-layout that results in\n // content size update, causing below layout effect to fire. This avoids infinite loops.\n isUpdatingSize.current = true;\n\n let isTestEnv = process.env.NODE_ENV === 'test' && !process.env.VIRT_ON;\n let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth');\n let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientHeight');\n let clientWidth = dom.clientWidth;\n let clientHeight = dom.clientHeight;\n let w = isTestEnv && !isClientWidthMocked ? Infinity : clientWidth;\n let h = isTestEnv && !isClientHeightMocked ? Infinity : clientHeight;\n\n if (state.width !== w || state.height !== h) {\n state.width = w;\n state.height = h;\n flush(() => {\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, w, h));\n });\n\n // If the clientWidth or clientHeight changed, scrollbars appeared or disappeared as\n // a result of the layout update. In this case, re-layout again to account for the\n // adjusted space. In very specific cases this might result in the scrollbars disappearing\n // again, resulting in extra padding. We stop after a maximum of two layout passes to avoid\n // an infinite loop. This matches how browsers behavior with native CSS grid layout.\n if (!isTestEnv && clientWidth !== dom.clientWidth || clientHeight !== dom.clientHeight) {\n state.width = dom.clientWidth;\n state.height = dom.clientHeight;\n flush(() => {\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));\n });\n }\n }\n\n isUpdatingSize.current = false;\n });\n\n // Update visible rect when the content size changes, in case scrollbars need to appear or disappear.\n let lastContentSize = useRef<Size | null>(null);\n let [update, setUpdate] = useState({});\n useLayoutEffect(() => {\n if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) {\n // React doesn't allow flushSync inside effects, so queue a microtask.\n // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).\n // If we are in an `act` environment, update immediately without a microtask so you don't need\n // to mock timers in tests. In this case, the update is synchronous already.\n // IS_REACT_ACT_ENVIRONMENT is used by React 18. Previous versions checked for the `jest` global.\n // https://github.com/reactwg/react-18/discussions/102\n // @ts-ignore\n if (typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined') {\n // This is so we update size in a separate render but within the same act. Needs to be setState instead of refs\n // due to strict mode.\n setUpdate({});\n lastContentSize.current = contentSize;\n return;\n } else {\n queueMicrotask(() => updateSize(flushSync));\n }\n }\n\n lastContentSize.current = contentSize;\n });\n\n // Will only run in tests, needs to be in separate effect so it is properly run in the next render in strict mode.\n useLayoutEffect(() => {\n updateSize(fn => fn());\n }, [update]);\n\n let onResize = useCallback(() => {\n updateSize(flushSync);\n }, [updateSize]);\n\n // Watch border-box instead of of content-box so that we don't go into\n // an infinite loop when scrollbars appear or disappear.\n useResizeObserver({ref, box: 'border-box', onResize});\n\n let style: React.CSSProperties = {\n // Reset padding so that relative positioning works correctly. Padding will be done in JS layout.\n padding: 0,\n ...otherProps.style\n };\n\n if (scrollDirection === 'horizontal') {\n style.overflowX = 'auto';\n style.overflowY = 'hidden';\n } else if (scrollDirection === 'vertical' || contentSize.width === state.width) {\n // Set overflow-x: hidden if content size is equal to the width of the scroll view.\n // This prevents horizontal scrollbars from flickering during resizing due to resize observer\n // firing slower than the frame rate, which may cause an infinite re-render loop.\n style.overflowY = 'auto';\n style.overflowX = 'hidden';\n } else {\n style.overflow = 'auto';\n }\n\n innerStyle = {\n width: Number.isFinite(contentSize.width) ? contentSize.width : undefined,\n height: Number.isFinite(contentSize.height) ? contentSize.height : undefined,\n pointerEvents: isScrolling ? 'none' : 'auto',\n position: 'relative',\n ...innerStyle\n };\n\n return {\n isScrolling,\n scrollViewProps: {\n ...otherProps,\n style\n },\n contentProps: {\n role: 'presentation',\n style: innerStyle\n }\n };\n}\n"],"names":[],"version":3,"file":"ScrollView.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/virtualizer/src/ScrollView.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// @ts-ignore\nimport {flushSync} from 'react-dom';\nimport {getScrollLeft} from './utils';\nimport React, {\n CSSProperties,\n ForwardedRef,\n HTMLAttributes,\n ReactNode,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {Rect, Size} from '@react-stately/virtualizer';\nimport {useEffectEvent, useEvent, useLayoutEffect, useObjectRef, useResizeObserver} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\n\ninterface ScrollViewProps extends HTMLAttributes<HTMLElement> {\n contentSize: Size,\n onVisibleRectChange: (rect: Rect) => void,\n children?: ReactNode,\n innerStyle?: CSSProperties,\n onScrollStart?: () => void,\n onScrollEnd?: () => void,\n scrollDirection?: 'horizontal' | 'vertical' | 'both'\n}\n\nfunction ScrollView(props: ScrollViewProps, ref: ForwardedRef<HTMLDivElement | null>) {\n ref = useObjectRef(ref);\n let {scrollViewProps, contentProps} = useScrollView(props, ref);\n\n return (\n <div role=\"presentation\" {...scrollViewProps} ref={ref}>\n <div {...contentProps}>\n {props.children}\n </div>\n </div>\n );\n}\n\nconst ScrollViewForwardRef:\n React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<HTMLDivElement | null>> =\nReact.forwardRef(ScrollView);\nexport {ScrollViewForwardRef as ScrollView};\n\ninterface ScrollViewAria {\n isScrolling: boolean,\n scrollViewProps: HTMLAttributes<HTMLElement>,\n contentProps: HTMLAttributes<HTMLElement>\n}\n\nexport function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement | null>): ScrollViewAria {\n let {\n contentSize,\n onVisibleRectChange,\n innerStyle,\n onScrollStart,\n onScrollEnd,\n scrollDirection = 'both',\n ...otherProps\n } = props;\n\n let state = useRef({\n scrollTop: 0,\n scrollLeft: 0,\n scrollEndTime: 0,\n scrollTimeout: null as ReturnType<typeof setTimeout> | null,\n width: 0,\n height: 0,\n isScrolling: false\n }).current;\n let {direction} = useLocale();\n\n let [isScrolling, setScrolling] = useState(false);\n\n let onScroll = useCallback((e) => {\n if (e.target !== e.currentTarget) {\n return;\n }\n\n if (props.onScroll) {\n props.onScroll(e);\n }\n\n flushSync(() => {\n let scrollTop = e.currentTarget.scrollTop;\n let scrollLeft = getScrollLeft(e.currentTarget, direction);\n\n // Prevent rubber band scrolling from shaking when scrolling out of bounds\n state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));\n state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));\n\n if (!state.isScrolling) {\n state.isScrolling = true;\n setScrolling(true);\n\n // Pause typekit MutationObserver during scrolling.\n window.dispatchEvent(new Event('tk.disconnect-observer'));\n if (onScrollStart) {\n onScrollStart();\n }\n }\n\n // So we don't constantly call clearTimeout and setTimeout,\n // keep track of the current timeout time and only reschedule\n // the timer when it is getting close.\n let now = Date.now();\n if (state.scrollEndTime <= now + 50) {\n state.scrollEndTime = now + 300;\n\n if (state.scrollTimeout != null) {\n clearTimeout(state.scrollTimeout);\n }\n\n state.scrollTimeout = setTimeout(() => {\n state.isScrolling = false;\n setScrolling(false);\n state.scrollTimeout = null;\n\n window.dispatchEvent(new Event('tk.connect-observer'));\n if (onScrollEnd) {\n onScrollEnd();\n }\n }, 300);\n }\n });\n }, [props, direction, state, contentSize, onVisibleRectChange, onScrollStart, onScrollEnd]);\n\n // Attach event directly to ref so RAC Virtualizer doesn't need to send props upward.\n useEvent(ref, 'scroll', onScroll);\n\n useEffect(() => {\n return () => {\n if (state.scrollTimeout != null) {\n clearTimeout(state.scrollTimeout);\n }\n\n if (state.isScrolling) {\n window.dispatchEvent(new Event('tk.connect-observer'));\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n let isUpdatingSize = useRef(false);\n let updateSize = useCallback((flush: typeof flushSync) => {\n let dom = ref.current;\n if (!dom || isUpdatingSize.current) {\n return;\n }\n\n // Prevent reentrancy when resize observer fires, triggers re-layout that results in\n // content size update, causing below layout effect to fire. This avoids infinite loops.\n isUpdatingSize.current = true;\n\n let isTestEnv = process.env.NODE_ENV === 'test' && !process.env.VIRT_ON;\n let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth');\n let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientHeight');\n let clientWidth = dom.clientWidth;\n let clientHeight = dom.clientHeight;\n let w = isTestEnv && !isClientWidthMocked ? Infinity : clientWidth;\n let h = isTestEnv && !isClientHeightMocked ? Infinity : clientHeight;\n\n if (state.width !== w || state.height !== h) {\n state.width = w;\n state.height = h;\n flush(() => {\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, w, h));\n });\n\n // If the clientWidth or clientHeight changed, scrollbars appeared or disappeared as\n // a result of the layout update. In this case, re-layout again to account for the\n // adjusted space. In very specific cases this might result in the scrollbars disappearing\n // again, resulting in extra padding. We stop after a maximum of two layout passes to avoid\n // an infinite loop. This matches how browsers behavior with native CSS grid layout.\n if (!isTestEnv && clientWidth !== dom.clientWidth || clientHeight !== dom.clientHeight) {\n state.width = dom.clientWidth;\n state.height = dom.clientHeight;\n flush(() => {\n onVisibleRectChange(new Rect(state.scrollLeft, state.scrollTop, state.width, state.height));\n });\n }\n }\n\n isUpdatingSize.current = false;\n }, [ref, state, onVisibleRectChange]);\n let updateSizeEvent = useEffectEvent(updateSize);\n\n // Update visible rect when the content size changes, in case scrollbars need to appear or disappear.\n let lastContentSize = useRef<Size | null>(null);\n let [update, setUpdate] = useState({});\n // We only contain a call to setState in here for testing environments.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(() => {\n if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) {\n // React doesn't allow flushSync inside effects, so queue a microtask.\n // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).\n // If we are in an `act` environment, update immediately without a microtask so you don't need\n // to mock timers in tests. In this case, the update is synchronous already.\n // IS_REACT_ACT_ENVIRONMENT is used by React 18. Previous versions checked for the `jest` global.\n // https://github.com/reactwg/react-18/discussions/102\n // @ts-ignore\n if (typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined') {\n // This is so we update size in a separate render but within the same act. Needs to be setState instead of refs\n // due to strict mode.\n setUpdate({});\n lastContentSize.current = contentSize;\n return;\n } else {\n queueMicrotask(() => updateSizeEvent(flushSync));\n }\n }\n\n lastContentSize.current = contentSize;\n });\n\n // Will only run in tests, needs to be in separate effect so it is properly run in the next render in strict mode.\n useLayoutEffect(() => {\n updateSizeEvent(fn => fn());\n }, [update]);\n\n let onResize = useCallback(() => {\n updateSize(flushSync);\n }, [updateSize]);\n\n // Watch border-box instead of of content-box so that we don't go into\n // an infinite loop when scrollbars appear or disappear.\n useResizeObserver({ref, box: 'border-box', onResize});\n\n let style: React.CSSProperties = {\n // Reset padding so that relative positioning works correctly. Padding will be done in JS layout.\n padding: 0,\n ...otherProps.style\n };\n\n if (scrollDirection === 'horizontal') {\n style.overflowX = 'auto';\n style.overflowY = 'hidden';\n } else if (scrollDirection === 'vertical' || contentSize.width === state.width) {\n // Set overflow-x: hidden if content size is equal to the width of the scroll view.\n // This prevents horizontal scrollbars from flickering during resizing due to resize observer\n // firing slower than the frame rate, which may cause an infinite re-render loop.\n style.overflowY = 'auto';\n style.overflowX = 'hidden';\n } else {\n style.overflow = 'auto';\n }\n\n innerStyle = {\n width: Number.isFinite(contentSize.width) ? contentSize.width : undefined,\n height: Number.isFinite(contentSize.height) ? contentSize.height : undefined,\n pointerEvents: isScrolling ? 'none' : 'auto',\n position: 'relative',\n ...innerStyle\n };\n\n return {\n isScrolling,\n scrollViewProps: {\n ...otherProps,\n style\n },\n contentProps: {\n role: 'presentation',\n style: innerStyle\n }\n };\n}\n"],"names":[],"version":3,"file":"ScrollView.module.js.map"}
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;AAcA,4BACI,UAAU,GACV,qBAAqB,GACrB,oBAAoB,CAAC;AAezB,iCAAiC,WAAW,GAAE,OAAe,GAAG,aAAa,CAmC5E;AAED,8BAA8B,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,GAAG,MAAM,CAkBzE;AAED,8BAA8B,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI,CAiB3F;ACzFD;IACE,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,CAAA;CAC3C;AAED;IACE,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,WAAW,EAAE,YAAY,CAAC;IAC1B,GAAG,EAAE,UAAU,WAAW,GAAG,IAAI,CAAC,CAAA;CACnC;AAED,mCAAmC,OAAO,EAAE,sBAAsB,GAAG;IAAC,UAAU,EAAE,MAAM,IAAI,CAAA;CAAC,CAkB5F;ACfD,yBAA0B,SAAQ,eAAe,WAAW,CAAC;IAC3D,WAAW,EAAE,IAAI,CAAC;IAClB,mBAAmB,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,eAAe,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAA;CACrD;AAeD,OAAA,MAAM,YACJ,MAAM,yBAAyB,CAAC,eAAe,GAAG,MAAM,aAAa,CAAC,cAAc,GAAG,IAAI,CAAC,CAClE,CAAC;AAG7B;IACE,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,eAAe,WAAW,CAAC,CAAC;IAC7C,YAAY,EAAE,eAAe,WAAW,CAAC,CAAA;CAC1C;AAED,8BAA8B,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,YAAU,WAAW,GAAG,IAAI,CAAC,GAAG,cAAc,
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/virtualizer/src/packages/@react-aria/virtualizer/src/utils.ts","packages/@react-aria/virtualizer/src/packages/@react-aria/virtualizer/src/useVirtualizerItem.ts","packages/@react-aria/virtualizer/src/packages/@react-aria/virtualizer/src/ScrollView.tsx","packages/@react-aria/virtualizer/src/packages/@react-aria/virtualizer/src/VirtualizerItem.tsx","packages/@react-aria/virtualizer/src/packages/@react-aria/virtualizer/src/Virtualizer.tsx","packages/@react-aria/virtualizer/src/packages/@react-aria/virtualizer/src/index.ts","packages/@react-aria/virtualizer/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport type {RTLOffsetType} from './utils';\nexport type {VirtualizerItemOptions} from './useVirtualizerItem';\nexport {Virtualizer} from './Virtualizer';\nexport {useVirtualizerItem} from './useVirtualizerItem';\nexport {VirtualizerItem, layoutInfoToStyle} from './VirtualizerItem';\nexport {ScrollView, useScrollView} from './ScrollView';\nexport {getRTLOffsetType, getScrollLeft, setScrollLeft} from './utils';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/virtualizer",
|
|
3
|
-
"version": "4.1.
|
|
3
|
+
"version": "4.1.11",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
"url": "https://github.com/adobe/react-spectrum"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@react-aria/i18n": "^3.12.
|
|
30
|
-
"@react-aria/interactions": "^3.
|
|
31
|
-
"@react-aria/utils": "^3.
|
|
29
|
+
"@react-aria/i18n": "^3.12.14",
|
|
30
|
+
"@react-aria/interactions": "^3.26.0",
|
|
31
|
+
"@react-aria/utils": "^3.32.0",
|
|
32
32
|
"@react-stately/virtualizer": "^4.4.4",
|
|
33
33
|
"@react-types/shared": "^3.32.1",
|
|
34
34
|
"@swc/helpers": "^0.5.0"
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"publishConfig": {
|
|
41
41
|
"access": "public"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "4d838da5bfe36abb35aed166995a9ef63825370f"
|
|
44
44
|
}
|
package/src/ScrollView.tsx
CHANGED
|
@@ -157,7 +157,7 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
|
|
|
157
157
|
}, []);
|
|
158
158
|
|
|
159
159
|
let isUpdatingSize = useRef(false);
|
|
160
|
-
let updateSize =
|
|
160
|
+
let updateSize = useCallback((flush: typeof flushSync) => {
|
|
161
161
|
let dom = ref.current;
|
|
162
162
|
if (!dom || isUpdatingSize.current) {
|
|
163
163
|
return;
|
|
@@ -197,11 +197,14 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
|
|
|
197
197
|
}
|
|
198
198
|
|
|
199
199
|
isUpdatingSize.current = false;
|
|
200
|
-
});
|
|
200
|
+
}, [ref, state, onVisibleRectChange]);
|
|
201
|
+
let updateSizeEvent = useEffectEvent(updateSize);
|
|
201
202
|
|
|
202
203
|
// Update visible rect when the content size changes, in case scrollbars need to appear or disappear.
|
|
203
204
|
let lastContentSize = useRef<Size | null>(null);
|
|
204
205
|
let [update, setUpdate] = useState({});
|
|
206
|
+
// We only contain a call to setState in here for testing environments.
|
|
207
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
205
208
|
useLayoutEffect(() => {
|
|
206
209
|
if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) {
|
|
207
210
|
// React doesn't allow flushSync inside effects, so queue a microtask.
|
|
@@ -218,7 +221,7 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
|
|
|
218
221
|
lastContentSize.current = contentSize;
|
|
219
222
|
return;
|
|
220
223
|
} else {
|
|
221
|
-
queueMicrotask(() =>
|
|
224
|
+
queueMicrotask(() => updateSizeEvent(flushSync));
|
|
222
225
|
}
|
|
223
226
|
}
|
|
224
227
|
|
|
@@ -227,7 +230,7 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
|
|
|
227
230
|
|
|
228
231
|
// Will only run in tests, needs to be in separate effect so it is properly run in the next render in strict mode.
|
|
229
232
|
useLayoutEffect(() => {
|
|
230
|
-
|
|
233
|
+
updateSizeEvent(fn => fn());
|
|
231
234
|
}, [update]);
|
|
232
235
|
|
|
233
236
|
let onResize = useCallback(() => {
|