@react-aria/virtualizer 3.0.0-nightly-641446f65-240905

package/README.md

@@ -0,0 +1,3 @@
+# @react-aria/virtualizer
+
+This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.

package/dist/ScrollView.main.js

@@ -0,0 +1,214 @@
+var $efdd61e59e023a1d$exports = require("./utils.main.js");
+var $kvIfm$reactdom = require("react-dom");
+var $kvIfm$react = require("react");
+var $kvIfm$reactstatelyvirtualizer = require("@react-stately/virtualizer");
+var $kvIfm$reactariautils = require("@react-aria/utils");
+var $kvIfm$reactariai18n = require("@react-aria/i18n");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useScrollView", () => $00ca8c0b29e3e07c$export$2ea0c4974da4731b);
+$parcel$export(module.exports, "ScrollView", () => $00ca8c0b29e3e07c$export$5665e3d6be6adea);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ // @ts-ignore
+
+
+
+
+
+
+function $00ca8c0b29e3e07c$var$ScrollView(props, ref) {
+    ref = (0, $kvIfm$reactariautils.useObjectRef)(ref);
+    let { scrollViewProps: scrollViewProps, contentProps: contentProps } = $00ca8c0b29e3e07c$export$2ea0c4974da4731b(props, ref);
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($kvIfm$react))).createElement("div", {
+        role: "presentation",
+        ...scrollViewProps,
+        ref: ref
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($kvIfm$react))).createElement("div", {
+        role: "presentation",
+        ...contentProps
+    }, props.children));
+}
+const $00ca8c0b29e3e07c$export$5665e3d6be6adea = /*#__PURE__*/ (0, ($parcel$interopDefault($kvIfm$react))).forwardRef($00ca8c0b29e3e07c$var$ScrollView);
+function $00ca8c0b29e3e07c$export$2ea0c4974da4731b(props, ref) {
+    let { contentSize: contentSize, onVisibleRectChange: onVisibleRectChange, innerStyle: innerStyle, onScrollStart: onScrollStart, onScrollEnd: onScrollEnd, scrollDirection: scrollDirection = 'both', ...otherProps } = props;
+    let state = (0, $kvIfm$react.useRef)({
+        scrollTop: 0,
+        scrollLeft: 0,
+        scrollEndTime: 0,
+        scrollTimeout: null,
+        width: 0,
+        height: 0,
+        isScrolling: false
+    }).current;
+    let { direction: direction } = (0, $kvIfm$reactariai18n.useLocale)();
+    let [isScrolling, setScrolling] = (0, $kvIfm$react.useState)(false);
+    let onScroll = (0, $kvIfm$react.useCallback)((e)=>{
+        if (e.target !== e.currentTarget) return;
+        if (props.onScroll) props.onScroll(e);
+        (0, $kvIfm$reactdom.flushSync)(()=>{
+            let scrollTop = e.currentTarget.scrollTop;
+            let scrollLeft = (0, $efdd61e59e023a1d$exports.getScrollLeft)(e.currentTarget, direction);
+            // Prevent rubber band scrolling from shaking when scrolling out of bounds
+            state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));
+            state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));
+            onVisibleRectChange(new (0, $kvIfm$reactstatelyvirtualizer.Rect)(state.scrollLeft, state.scrollTop, state.width, state.height));
+            if (!state.isScrolling) {
+                state.isScrolling = true;
+                setScrolling(true);
+                // Pause typekit MutationObserver during scrolling.
+                window.dispatchEvent(new Event('tk.disconnect-observer'));
+                if (onScrollStart) onScrollStart();
+            }
+            // So we don't constantly call clearTimeout and setTimeout,
+            // keep track of the current timeout time and only reschedule
+            // the timer when it is getting close.
+            let now = Date.now();
+            if (state.scrollEndTime <= now + 50) {
+                state.scrollEndTime = now + 300;
+                clearTimeout(state.scrollTimeout);
+                state.scrollTimeout = setTimeout(()=>{
+                    state.isScrolling = false;
+                    setScrolling(false);
+                    state.scrollTimeout = null;
+                    window.dispatchEvent(new Event('tk.connect-observer'));
+                    if (onScrollEnd) onScrollEnd();
+                }, 300);
+            }
+        });
+    }, [
+        props,
+        direction,
+        state,
+        contentSize,
+        onVisibleRectChange,
+        onScrollStart,
+        onScrollEnd
+    ]);
+    // Attach event directly to ref so RAC Virtualizer doesn't need to send props upward.
+    (0, $kvIfm$reactariautils.useEvent)(ref, 'scroll', onScroll);
+    // eslint-disable-next-line arrow-body-style
+    (0, $kvIfm$react.useEffect)(()=>{
+        return ()=>{
+            clearTimeout(state.scrollTimeout);
+            if (state.isScrolling) window.dispatchEvent(new Event('tk.connect-observer'));
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    let updateSize = (0, $kvIfm$reactariautils.useEffectEvent)((flush)=>{
+        let dom = ref.current;
+        if (!dom) return;
+        let isTestEnv = false;
+        let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth');
+        let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientHeight');
+        let clientWidth = dom.clientWidth;
+        let clientHeight = dom.clientHeight;
+        let w = isTestEnv && !isClientWidthMocked ? Infinity : clientWidth;
+        let h = isTestEnv && !isClientHeightMocked ? Infinity : clientHeight;
+        if (state.width !== w || state.height !== h) {
+            state.width = w;
+            state.height = h;
+            flush(()=>{
+                onVisibleRectChange(new (0, $kvIfm$reactstatelyvirtualizer.Rect)(state.scrollLeft, state.scrollTop, w, h));
+            });
+            // If the clientWidth or clientHeight changed, scrollbars appeared or disappeared as
+            // a result of the layout update. In this case, re-layout again to account for the
+            // adjusted space. In very specific cases this might result in the scrollbars disappearing
+            // again, resulting in extra padding. We stop after a maximum of two layout passes to avoid
+            // an infinite loop. This matches how browsers behavior with native CSS grid layout.
+            if (!isTestEnv && clientWidth !== dom.clientWidth || clientHeight !== dom.clientHeight) {
+                state.width = dom.clientWidth;
+                state.height = dom.clientHeight;
+                flush(()=>{
+                    onVisibleRectChange(new (0, $kvIfm$reactstatelyvirtualizer.Rect)(state.scrollLeft, state.scrollTop, state.width, state.height));
+                });
+            }
+        }
+    });
+    let didUpdateSize = (0, $kvIfm$react.useRef)(false);
+    (0, $kvIfm$reactariautils.useLayoutEffect)(()=>{
+        // React doesn't allow flushSync inside effects, so queue a microtask.
+        // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).
+        queueMicrotask(()=>{
+            if (!didUpdateSize.current) {
+                didUpdateSize.current = true;
+                updateSize((0, $kvIfm$reactdom.flushSync));
+            }
+        });
+    }, [
+        updateSize
+    ]);
+    (0, $kvIfm$react.useEffect)(()=>{
+        if (!didUpdateSize.current) {
+            // If useEffect ran before the above microtask, we are in a synchronous render (e.g. act).
+            // Update the size here so that you don't need to mock timers in tests.
+            didUpdateSize.current = true;
+            updateSize((fn)=>fn());
+        }
+    }, [
+        updateSize
+    ]);
+    let onResize = (0, $kvIfm$react.useCallback)(()=>{
+        updateSize((0, $kvIfm$reactdom.flushSync));
+    }, [
+        updateSize
+    ]);
+    // Watch border-box instead of of content-box so that we don't go into
+    // an infinite loop when scrollbars appear or disappear.
+    (0, $kvIfm$reactariautils.useResizeObserver)({
+        ref: ref,
+        box: 'border-box',
+        onResize: onResize
+    });
+    let style = {
+        // Reset padding so that relative positioning works correctly. Padding will be done in JS layout.
+        padding: 0,
+        ...otherProps.style
+    };
+    if (scrollDirection === 'horizontal') {
+        style.overflowX = 'auto';
+        style.overflowY = 'hidden';
+    } else if (scrollDirection === 'vertical' || contentSize.width === state.width) {
+        // Set overflow-x: hidden if content size is equal to the width of the scroll view.
+        // This prevents horizontal scrollbars from flickering during resizing due to resize observer
+        // firing slower than the frame rate, which may cause an infinite re-render loop.
+        style.overflowY = 'auto';
+        style.overflowX = 'hidden';
+    } else style.overflow = 'auto';
+    innerStyle = {
+        width: Number.isFinite(contentSize.width) ? contentSize.width : undefined,
+        height: Number.isFinite(contentSize.height) ? contentSize.height : undefined,
+        pointerEvents: isScrolling ? 'none' : 'auto',
+        position: 'relative',
+        ...innerStyle
+    };
+    return {
+        scrollViewProps: {
+            ...otherProps,
+            style: style
+        },
+        contentProps: {
+            role: 'presentation',
+            style: innerStyle
+        }
+    };
+}
+
+
+//# sourceMappingURL=ScrollView.main.js.map

package/dist/ScrollView.main.js.map

@@ -0,0 +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 role=\"presentation\" {...contentProps}>\n        {props.children}\n      </div>\n    </div>\n  );\n}\n\nconst ScrollViewForwardRef = React.forwardRef(ScrollView);\nexport {ScrollViewForwardRef as ScrollView};\n\nexport function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement | null>) {\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,\n    width: 0,\n    height: 0,\n    isScrolling: false\n  }).current;\n  let {direction} = useLocale();\n\n  let [isScrolling, setScrolling] = useState(false);\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\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        clearTimeout(state.scrollTimeout);\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  // eslint-disable-next-line arrow-body-style\n  useEffect(() => {\n    return () => {\n      clearTimeout(state.scrollTimeout);\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 updateSize = useEffectEvent((flush: typeof flushSync) => {\n    let dom = ref.current;\n    if (!dom) {\n      return;\n    }\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\n  let didUpdateSize = useRef(false);\n  useLayoutEffect(() => {\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    queueMicrotask(() => {\n      if (!didUpdateSize.current) {\n        didUpdateSize.current = true;\n        updateSize(flushSync);\n      }\n    });\n  }, [updateSize]);\n  useEffect(() => {\n    if (!didUpdateSize.current) {\n      // If useEffect ran before the above microtask, we are in a synchronous render (e.g. act).\n      // Update the size here so that you don't need to mock timers in tests.\n      didUpdateSize.current = true;\n      updateSize(fn => fn());\n    }\n  }, [updateSize]);\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    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

@@ -0,0 +1,204 @@
+import {getScrollLeft as $ce415dc67314b753$export$1389d168952b34b5} from "./utils.mjs";
+import {flushSync as $f9kpT$flushSync} from "react-dom";
+import $f9kpT$react, {useRef as $f9kpT$useRef, useState as $f9kpT$useState, useCallback as $f9kpT$useCallback, useEffect as $f9kpT$useEffect} from "react";
+import {Rect as $f9kpT$Rect} from "@react-stately/virtualizer";
+import {useObjectRef as $f9kpT$useObjectRef, useEvent as $f9kpT$useEvent, useEffectEvent as $f9kpT$useEffectEvent, useLayoutEffect as $f9kpT$useLayoutEffect, useResizeObserver as $f9kpT$useResizeObserver} from "@react-aria/utils";
+import {useLocale as $f9kpT$useLocale} from "@react-aria/i18n";
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ // @ts-ignore
+
+
+
+
+
+
+function $44a6ee657928b002$var$ScrollView(props, ref) {
+    ref = (0, $f9kpT$useObjectRef)(ref);
+    let { scrollViewProps: scrollViewProps, contentProps: contentProps } = $44a6ee657928b002$export$2ea0c4974da4731b(props, ref);
+    return /*#__PURE__*/ (0, $f9kpT$react).createElement("div", {
+        role: "presentation",
+        ...scrollViewProps,
+        ref: ref
+    }, /*#__PURE__*/ (0, $f9kpT$react).createElement("div", {
+        role: "presentation",
+        ...contentProps
+    }, props.children));
+}
+const $44a6ee657928b002$export$5665e3d6be6adea = /*#__PURE__*/ (0, $f9kpT$react).forwardRef($44a6ee657928b002$var$ScrollView);
+function $44a6ee657928b002$export$2ea0c4974da4731b(props, ref) {
+    let { contentSize: contentSize, onVisibleRectChange: onVisibleRectChange, innerStyle: innerStyle, onScrollStart: onScrollStart, onScrollEnd: onScrollEnd, scrollDirection: scrollDirection = 'both', ...otherProps } = props;
+    let state = (0, $f9kpT$useRef)({
+        scrollTop: 0,
+        scrollLeft: 0,
+        scrollEndTime: 0,
+        scrollTimeout: null,
+        width: 0,
+        height: 0,
+        isScrolling: false
+    }).current;
+    let { direction: direction } = (0, $f9kpT$useLocale)();
+    let [isScrolling, setScrolling] = (0, $f9kpT$useState)(false);
+    let onScroll = (0, $f9kpT$useCallback)((e)=>{
+        if (e.target !== e.currentTarget) return;
+        if (props.onScroll) props.onScroll(e);
+        (0, $f9kpT$flushSync)(()=>{
+            let scrollTop = e.currentTarget.scrollTop;
+            let scrollLeft = (0, $ce415dc67314b753$export$1389d168952b34b5)(e.currentTarget, direction);
+            // Prevent rubber band scrolling from shaking when scrolling out of bounds
+            state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));
+            state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));
+            onVisibleRectChange(new (0, $f9kpT$Rect)(state.scrollLeft, state.scrollTop, state.width, state.height));
+            if (!state.isScrolling) {
+                state.isScrolling = true;
+                setScrolling(true);
+                // Pause typekit MutationObserver during scrolling.
+                window.dispatchEvent(new Event('tk.disconnect-observer'));
+                if (onScrollStart) onScrollStart();
+            }
+            // So we don't constantly call clearTimeout and setTimeout,
+            // keep track of the current timeout time and only reschedule
+            // the timer when it is getting close.
+            let now = Date.now();
+            if (state.scrollEndTime <= now + 50) {
+                state.scrollEndTime = now + 300;
+                clearTimeout(state.scrollTimeout);
+                state.scrollTimeout = setTimeout(()=>{
+                    state.isScrolling = false;
+                    setScrolling(false);
+                    state.scrollTimeout = null;
+                    window.dispatchEvent(new Event('tk.connect-observer'));
+                    if (onScrollEnd) onScrollEnd();
+                }, 300);
+            }
+        });
+    }, [
+        props,
+        direction,
+        state,
+        contentSize,
+        onVisibleRectChange,
+        onScrollStart,
+        onScrollEnd
+    ]);
+    // Attach event directly to ref so RAC Virtualizer doesn't need to send props upward.
+    (0, $f9kpT$useEvent)(ref, 'scroll', onScroll);
+    // eslint-disable-next-line arrow-body-style
+    (0, $f9kpT$useEffect)(()=>{
+        return ()=>{
+            clearTimeout(state.scrollTimeout);
+            if (state.isScrolling) window.dispatchEvent(new Event('tk.connect-observer'));
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    let updateSize = (0, $f9kpT$useEffectEvent)((flush)=>{
+        let dom = ref.current;
+        if (!dom) return;
+        let isTestEnv = false;
+        let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth');
+        let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientHeight');
+        let clientWidth = dom.clientWidth;
+        let clientHeight = dom.clientHeight;
+        let w = isTestEnv && !isClientWidthMocked ? Infinity : clientWidth;
+        let h = isTestEnv && !isClientHeightMocked ? Infinity : clientHeight;
+        if (state.width !== w || state.height !== h) {
+            state.width = w;
+            state.height = h;
+            flush(()=>{
+                onVisibleRectChange(new (0, $f9kpT$Rect)(state.scrollLeft, state.scrollTop, w, h));
+            });
+            // If the clientWidth or clientHeight changed, scrollbars appeared or disappeared as
+            // a result of the layout update. In this case, re-layout again to account for the
+            // adjusted space. In very specific cases this might result in the scrollbars disappearing
+            // again, resulting in extra padding. We stop after a maximum of two layout passes to avoid
+            // an infinite loop. This matches how browsers behavior with native CSS grid layout.
+            if (!isTestEnv && clientWidth !== dom.clientWidth || clientHeight !== dom.clientHeight) {
+                state.width = dom.clientWidth;
+                state.height = dom.clientHeight;
+                flush(()=>{
+                    onVisibleRectChange(new (0, $f9kpT$Rect)(state.scrollLeft, state.scrollTop, state.width, state.height));
+                });
+            }
+        }
+    });
+    let didUpdateSize = (0, $f9kpT$useRef)(false);
+    (0, $f9kpT$useLayoutEffect)(()=>{
+        // React doesn't allow flushSync inside effects, so queue a microtask.
+        // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).
+        queueMicrotask(()=>{
+            if (!didUpdateSize.current) {
+                didUpdateSize.current = true;
+                updateSize((0, $f9kpT$flushSync));
+            }
+        });
+    }, [
+        updateSize
+    ]);
+    (0, $f9kpT$useEffect)(()=>{
+        if (!didUpdateSize.current) {
+            // If useEffect ran before the above microtask, we are in a synchronous render (e.g. act).
+            // Update the size here so that you don't need to mock timers in tests.
+            didUpdateSize.current = true;
+            updateSize((fn)=>fn());
+        }
+    }, [
+        updateSize
+    ]);
+    let onResize = (0, $f9kpT$useCallback)(()=>{
+        updateSize((0, $f9kpT$flushSync));
+    }, [
+        updateSize
+    ]);
+    // Watch border-box instead of of content-box so that we don't go into
+    // an infinite loop when scrollbars appear or disappear.
+    (0, $f9kpT$useResizeObserver)({
+        ref: ref,
+        box: 'border-box',
+        onResize: onResize
+    });
+    let style = {
+        // Reset padding so that relative positioning works correctly. Padding will be done in JS layout.
+        padding: 0,
+        ...otherProps.style
+    };
+    if (scrollDirection === 'horizontal') {
+        style.overflowX = 'auto';
+        style.overflowY = 'hidden';
+    } else if (scrollDirection === 'vertical' || contentSize.width === state.width) {
+        // Set overflow-x: hidden if content size is equal to the width of the scroll view.
+        // This prevents horizontal scrollbars from flickering during resizing due to resize observer
+        // firing slower than the frame rate, which may cause an infinite re-render loop.
+        style.overflowY = 'auto';
+        style.overflowX = 'hidden';
+    } else style.overflow = 'auto';
+    innerStyle = {
+        width: Number.isFinite(contentSize.width) ? contentSize.width : undefined,
+        height: Number.isFinite(contentSize.height) ? contentSize.height : undefined,
+        pointerEvents: isScrolling ? 'none' : 'auto',
+        position: 'relative',
+        ...innerStyle
+    };
+    return {
+        scrollViewProps: {
+            ...otherProps,
+            style: style
+        },
+        contentProps: {
+            role: 'presentation',
+            style: innerStyle
+        }
+    };
+}
+
+
+export {$44a6ee657928b002$export$2ea0c4974da4731b as useScrollView, $44a6ee657928b002$export$5665e3d6be6adea as ScrollView};
+//# sourceMappingURL=ScrollView.module.js.map

package/dist/ScrollView.module.js

@@ -0,0 +1,204 @@
+import {getScrollLeft as $ce415dc67314b753$export$1389d168952b34b5} from "./utils.module.js";
+import {flushSync as $f9kpT$flushSync} from "react-dom";
+import $f9kpT$react, {useRef as $f9kpT$useRef, useState as $f9kpT$useState, useCallback as $f9kpT$useCallback, useEffect as $f9kpT$useEffect} from "react";
+import {Rect as $f9kpT$Rect} from "@react-stately/virtualizer";
+import {useObjectRef as $f9kpT$useObjectRef, useEvent as $f9kpT$useEvent, useEffectEvent as $f9kpT$useEffectEvent, useLayoutEffect as $f9kpT$useLayoutEffect, useResizeObserver as $f9kpT$useResizeObserver} from "@react-aria/utils";
+import {useLocale as $f9kpT$useLocale} from "@react-aria/i18n";
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ // @ts-ignore
+
+
+
+
+
+
+function $44a6ee657928b002$var$ScrollView(props, ref) {
+    ref = (0, $f9kpT$useObjectRef)(ref);
+    let { scrollViewProps: scrollViewProps, contentProps: contentProps } = $44a6ee657928b002$export$2ea0c4974da4731b(props, ref);
+    return /*#__PURE__*/ (0, $f9kpT$react).createElement("div", {
+        role: "presentation",
+        ...scrollViewProps,
+        ref: ref
+    }, /*#__PURE__*/ (0, $f9kpT$react).createElement("div", {
+        role: "presentation",
+        ...contentProps
+    }, props.children));
+}
+const $44a6ee657928b002$export$5665e3d6be6adea = /*#__PURE__*/ (0, $f9kpT$react).forwardRef($44a6ee657928b002$var$ScrollView);
+function $44a6ee657928b002$export$2ea0c4974da4731b(props, ref) {
+    let { contentSize: contentSize, onVisibleRectChange: onVisibleRectChange, innerStyle: innerStyle, onScrollStart: onScrollStart, onScrollEnd: onScrollEnd, scrollDirection: scrollDirection = 'both', ...otherProps } = props;
+    let state = (0, $f9kpT$useRef)({
+        scrollTop: 0,
+        scrollLeft: 0,
+        scrollEndTime: 0,
+        scrollTimeout: null,
+        width: 0,
+        height: 0,
+        isScrolling: false
+    }).current;
+    let { direction: direction } = (0, $f9kpT$useLocale)();
+    let [isScrolling, setScrolling] = (0, $f9kpT$useState)(false);
+    let onScroll = (0, $f9kpT$useCallback)((e)=>{
+        if (e.target !== e.currentTarget) return;
+        if (props.onScroll) props.onScroll(e);
+        (0, $f9kpT$flushSync)(()=>{
+            let scrollTop = e.currentTarget.scrollTop;
+            let scrollLeft = (0, $ce415dc67314b753$export$1389d168952b34b5)(e.currentTarget, direction);
+            // Prevent rubber band scrolling from shaking when scrolling out of bounds
+            state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));
+            state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));
+            onVisibleRectChange(new (0, $f9kpT$Rect)(state.scrollLeft, state.scrollTop, state.width, state.height));
+            if (!state.isScrolling) {
+                state.isScrolling = true;
+                setScrolling(true);
+                // Pause typekit MutationObserver during scrolling.
+                window.dispatchEvent(new Event('tk.disconnect-observer'));
+                if (onScrollStart) onScrollStart();
+            }
+            // So we don't constantly call clearTimeout and setTimeout,
+            // keep track of the current timeout time and only reschedule
+            // the timer when it is getting close.
+            let now = Date.now();
+            if (state.scrollEndTime <= now + 50) {
+                state.scrollEndTime = now + 300;
+                clearTimeout(state.scrollTimeout);
+                state.scrollTimeout = setTimeout(()=>{
+                    state.isScrolling = false;
+                    setScrolling(false);
+                    state.scrollTimeout = null;
+                    window.dispatchEvent(new Event('tk.connect-observer'));
+                    if (onScrollEnd) onScrollEnd();
+                }, 300);
+            }
+        });
+    }, [
+        props,
+        direction,
+        state,
+        contentSize,
+        onVisibleRectChange,
+        onScrollStart,
+        onScrollEnd
+    ]);
+    // Attach event directly to ref so RAC Virtualizer doesn't need to send props upward.
+    (0, $f9kpT$useEvent)(ref, 'scroll', onScroll);
+    // eslint-disable-next-line arrow-body-style
+    (0, $f9kpT$useEffect)(()=>{
+        return ()=>{
+            clearTimeout(state.scrollTimeout);
+            if (state.isScrolling) window.dispatchEvent(new Event('tk.connect-observer'));
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    let updateSize = (0, $f9kpT$useEffectEvent)((flush)=>{
+        let dom = ref.current;
+        if (!dom) return;
+        let isTestEnv = false;
+        let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth');
+        let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientHeight');
+        let clientWidth = dom.clientWidth;
+        let clientHeight = dom.clientHeight;
+        let w = isTestEnv && !isClientWidthMocked ? Infinity : clientWidth;
+        let h = isTestEnv && !isClientHeightMocked ? Infinity : clientHeight;
+        if (state.width !== w || state.height !== h) {
+            state.width = w;
+            state.height = h;
+            flush(()=>{
+                onVisibleRectChange(new (0, $f9kpT$Rect)(state.scrollLeft, state.scrollTop, w, h));
+            });
+            // If the clientWidth or clientHeight changed, scrollbars appeared or disappeared as
+            // a result of the layout update. In this case, re-layout again to account for the
+            // adjusted space. In very specific cases this might result in the scrollbars disappearing
+            // again, resulting in extra padding. We stop after a maximum of two layout passes to avoid
+            // an infinite loop. This matches how browsers behavior with native CSS grid layout.
+            if (!isTestEnv && clientWidth !== dom.clientWidth || clientHeight !== dom.clientHeight) {
+                state.width = dom.clientWidth;
+                state.height = dom.clientHeight;
+                flush(()=>{
+                    onVisibleRectChange(new (0, $f9kpT$Rect)(state.scrollLeft, state.scrollTop, state.width, state.height));
+                });
+            }
+        }
+    });
+    let didUpdateSize = (0, $f9kpT$useRef)(false);
+    (0, $f9kpT$useLayoutEffect)(()=>{
+        // React doesn't allow flushSync inside effects, so queue a microtask.
+        // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).
+        queueMicrotask(()=>{
+            if (!didUpdateSize.current) {
+                didUpdateSize.current = true;
+                updateSize((0, $f9kpT$flushSync));
+            }
+        });
+    }, [
+        updateSize
+    ]);
+    (0, $f9kpT$useEffect)(()=>{
+        if (!didUpdateSize.current) {
+            // If useEffect ran before the above microtask, we are in a synchronous render (e.g. act).
+            // Update the size here so that you don't need to mock timers in tests.
+            didUpdateSize.current = true;
+            updateSize((fn)=>fn());
+        }
+    }, [
+        updateSize
+    ]);
+    let onResize = (0, $f9kpT$useCallback)(()=>{
+        updateSize((0, $f9kpT$flushSync));
+    }, [
+        updateSize
+    ]);
+    // Watch border-box instead of of content-box so that we don't go into
+    // an infinite loop when scrollbars appear or disappear.
+    (0, $f9kpT$useResizeObserver)({
+        ref: ref,
+        box: 'border-box',
+        onResize: onResize
+    });
+    let style = {
+        // Reset padding so that relative positioning works correctly. Padding will be done in JS layout.
+        padding: 0,
+        ...otherProps.style
+    };
+    if (scrollDirection === 'horizontal') {
+        style.overflowX = 'auto';
+        style.overflowY = 'hidden';
+    } else if (scrollDirection === 'vertical' || contentSize.width === state.width) {
+        // Set overflow-x: hidden if content size is equal to the width of the scroll view.
+        // This prevents horizontal scrollbars from flickering during resizing due to resize observer
+        // firing slower than the frame rate, which may cause an infinite re-render loop.
+        style.overflowY = 'auto';
+        style.overflowX = 'hidden';
+    } else style.overflow = 'auto';
+    innerStyle = {
+        width: Number.isFinite(contentSize.width) ? contentSize.width : undefined,
+        height: Number.isFinite(contentSize.height) ? contentSize.height : undefined,
+        pointerEvents: isScrolling ? 'none' : 'auto',
+        position: 'relative',
+        ...innerStyle
+    };
+    return {
+        scrollViewProps: {
+            ...otherProps,
+            style: style
+        },
+        contentProps: {
+            role: 'presentation',
+            style: innerStyle
+        }
+    };
+}
+
+
+export {$44a6ee657928b002$export$2ea0c4974da4731b as useScrollView, $44a6ee657928b002$export$5665e3d6be6adea as ScrollView};
+//# sourceMappingURL=ScrollView.module.js.map