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

package/dist/utils.mjs

@@ -0,0 +1,73 @@
+/*
+ * 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.
+ */ let $ce415dc67314b753$var$cachedRTLResult = null;
+function $ce415dc67314b753$export$faf7630257ad4304(recalculate = false) {
+    if ($ce415dc67314b753$var$cachedRTLResult === null || recalculate) {
+        const outerDiv = document.createElement('div');
+        const outerStyle = outerDiv.style;
+        outerStyle.width = '50px';
+        outerStyle.height = '50px';
+        outerStyle.overflow = 'scroll';
+        outerStyle.direction = 'rtl';
+        const innerDiv = document.createElement('div');
+        const innerStyle = innerDiv.style;
+        innerStyle.width = '100px';
+        innerStyle.height = '100px';
+        outerDiv.appendChild(innerDiv);
+        document.body.appendChild(outerDiv);
+        if (outerDiv.scrollLeft > 0) $ce415dc67314b753$var$cachedRTLResult = 'positive-descending';
+        else {
+            outerDiv.scrollLeft = 1;
+            if (outerDiv.scrollLeft === 0) $ce415dc67314b753$var$cachedRTLResult = 'negative';
+            else $ce415dc67314b753$var$cachedRTLResult = 'positive-ascending';
+        }
+        document.body.removeChild(outerDiv);
+        return $ce415dc67314b753$var$cachedRTLResult;
+    }
+    return $ce415dc67314b753$var$cachedRTLResult;
+}
+function $ce415dc67314b753$export$1389d168952b34b5(node, direction) {
+    let { scrollLeft: scrollLeft } = node;
+    // scrollLeft in rtl locales differs across browsers, so normalize.
+    // See comment by getRTLOffsetType below for details.
+    if (direction === 'rtl') {
+        let { scrollWidth: scrollWidth, clientWidth: clientWidth } = node;
+        switch($ce415dc67314b753$export$faf7630257ad4304()){
+            case 'negative':
+                scrollLeft = -scrollLeft;
+                break;
+            case 'positive-descending':
+                scrollLeft = scrollWidth - clientWidth - scrollLeft;
+                break;
+        }
+    }
+    return scrollLeft;
+}
+function $ce415dc67314b753$export$ed5fd5ffe5ab0ac(node, direction, scrollLeft) {
+    if (direction === 'rtl') switch($ce415dc67314b753$export$faf7630257ad4304()){
+        case 'negative':
+            scrollLeft = -scrollLeft;
+            break;
+        case 'positive-ascending':
+            break;
+        default:
+            {
+                const { clientWidth: clientWidth, scrollWidth: scrollWidth } = node;
+                scrollLeft = scrollWidth - clientWidth - scrollLeft;
+                break;
+            }
+    }
+    node.scrollLeft = scrollLeft;
+}
+
+
+export {$ce415dc67314b753$export$faf7630257ad4304 as getRTLOffsetType, $ce415dc67314b753$export$1389d168952b34b5 as getScrollLeft, $ce415dc67314b753$export$ed5fd5ffe5ab0ac as setScrollLeft};
+//# sourceMappingURL=utils.module.js.map

package/dist/utils.module.js

@@ -0,0 +1,73 @@
+/*
+ * 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.
+ */ let $ce415dc67314b753$var$cachedRTLResult = null;
+function $ce415dc67314b753$export$faf7630257ad4304(recalculate = false) {
+    if ($ce415dc67314b753$var$cachedRTLResult === null || recalculate) {
+        const outerDiv = document.createElement('div');
+        const outerStyle = outerDiv.style;
+        outerStyle.width = '50px';
+        outerStyle.height = '50px';
+        outerStyle.overflow = 'scroll';
+        outerStyle.direction = 'rtl';
+        const innerDiv = document.createElement('div');
+        const innerStyle = innerDiv.style;
+        innerStyle.width = '100px';
+        innerStyle.height = '100px';
+        outerDiv.appendChild(innerDiv);
+        document.body.appendChild(outerDiv);
+        if (outerDiv.scrollLeft > 0) $ce415dc67314b753$var$cachedRTLResult = 'positive-descending';
+        else {
+            outerDiv.scrollLeft = 1;
+            if (outerDiv.scrollLeft === 0) $ce415dc67314b753$var$cachedRTLResult = 'negative';
+            else $ce415dc67314b753$var$cachedRTLResult = 'positive-ascending';
+        }
+        document.body.removeChild(outerDiv);
+        return $ce415dc67314b753$var$cachedRTLResult;
+    }
+    return $ce415dc67314b753$var$cachedRTLResult;
+}
+function $ce415dc67314b753$export$1389d168952b34b5(node, direction) {
+    let { scrollLeft: scrollLeft } = node;
+    // scrollLeft in rtl locales differs across browsers, so normalize.
+    // See comment by getRTLOffsetType below for details.
+    if (direction === 'rtl') {
+        let { scrollWidth: scrollWidth, clientWidth: clientWidth } = node;
+        switch($ce415dc67314b753$export$faf7630257ad4304()){
+            case 'negative':
+                scrollLeft = -scrollLeft;
+                break;
+            case 'positive-descending':
+                scrollLeft = scrollWidth - clientWidth - scrollLeft;
+                break;
+        }
+    }
+    return scrollLeft;
+}
+function $ce415dc67314b753$export$ed5fd5ffe5ab0ac(node, direction, scrollLeft) {
+    if (direction === 'rtl') switch($ce415dc67314b753$export$faf7630257ad4304()){
+        case 'negative':
+            scrollLeft = -scrollLeft;
+            break;
+        case 'positive-ascending':
+            break;
+        default:
+            {
+                const { clientWidth: clientWidth, scrollWidth: scrollWidth } = node;
+                scrollLeft = scrollWidth - clientWidth - scrollLeft;
+                break;
+            }
+    }
+    node.scrollLeft = scrollLeft;
+}
+
+
+export {$ce415dc67314b753$export$faf7630257ad4304 as getRTLOffsetType, $ce415dc67314b753$export$1389d168952b34b5 as getScrollLeft, $ce415dc67314b753$export$ed5fd5ffe5ab0ac as setScrollLeft};
+//# sourceMappingURL=utils.module.js.map

package/dist/utils.module.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA;;;;;;;;;;CAUC,GASD,IAAI,wCAAwC;AAarC,SAAS,0CAAiB,cAAuB,KAAK;IAC3D,IAAI,0CAAoB,QAAQ,aAAa;QAC3C,MAAM,WAAW,SAAS,aAAa,CAAC;QACxC,MAAM,aAAa,SAAS,KAAK;QACjC,WAAW,KAAK,GAAG;QACnB,WAAW,MAAM,GAAG;QACpB,WAAW,QAAQ,GAAG;QACtB,WAAW,SAAS,GAAG;QAEvB,MAAM,WAAW,SAAS,aAAa,CAAC;QACxC,MAAM,aAAa,SAAS,KAAK;QACjC,WAAW,KAAK,GAAG;QACnB,WAAW,MAAM,GAAG;QAEpB,SAAS,WAAW,CAAC;QAErB,SAAS,IAAI,CAAC,WAAW,CAAC;QAE1B,IAAI,SAAS,UAAU,GAAG,GACxB,wCAAkB;aACb;YACL,SAAS,UAAU,GAAG;YACtB,IAAI,SAAS,UAAU,KAAK,GAC1B,wCAAkB;iBAElB,wCAAkB;QAEtB;QAEA,SAAS,IAAI,CAAC,WAAW,CAAC;QAE1B,OAAO;IACT;IAEA,OAAO;AACT;AAEO,SAAS,0CAAc,IAAa,EAAE,SAAoB;IAC/D,IAAI,cAAC,UAAU,EAAC,GAAG;IAEnB,mEAAmE;IACnE,qDAAqD;IACrD,IAAI,cAAc,OAAO;QACvB,IAAI,eAAC,WAAW,eAAE,WAAW,EAAC,GAAG;QACjC,OAAQ;YACN,KAAK;gBACH,aAAa,CAAC;gBACd;YACF,KAAK;gBACH,aAAa,cAAc,cAAc;gBACzC;QACJ;IACF;IAEA,OAAO;AACT;AAEO,SAAS,yCAAc,IAAa,EAAE,SAAoB,EAAE,UAAkB;IACnF,IAAI,cAAc,OAChB,OAAQ;QACN,KAAK;YACH,aAAa,CAAC;YACd;QACF,KAAK;YACH;QACF;YAAS;gBACP,MAAM,eAAC,WAAW,eAAE,WAAW,EAAC,GAAG;gBACnC,aAAa,cAAc,cAAc;gBACzC;YACF;IACF;IAGF,KAAK,UAAU,GAAG;AACpB","sources":["packages/@react-aria/virtualizer/src/utils.ts"],"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\nimport {Direction} from '@react-types/shared';\n\nexport type RTLOffsetType =\n  | 'negative'\n  | 'positive-descending'\n  | 'positive-ascending';\n\nlet cachedRTLResult: RTLOffsetType | null = null;\n\n\n// Original licensing for the following methods can be found in the\n// NOTICE file in the root directory of this source tree.\n// See https://github.com/bvaughn/react-window/blob/master/src/createGridComponent.js\n\n// According to the spec, scrollLeft should be negative for RTL aligned elements.\n// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).\n// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.\n// The safest way to check this is to intentionally set a negative offset,\n// and then verify that the subsequent \"scroll\" event matches the negative offset.\n// If it does not match, then we can assume a non-standard RTL scroll implementation.\nexport function getRTLOffsetType(recalculate: boolean = false): RTLOffsetType {\n  if (cachedRTLResult === null || recalculate) {\n    const outerDiv = document.createElement('div');\n    const outerStyle = outerDiv.style;\n    outerStyle.width = '50px';\n    outerStyle.height = '50px';\n    outerStyle.overflow = 'scroll';\n    outerStyle.direction = 'rtl';\n\n    const innerDiv = document.createElement('div');\n    const innerStyle = innerDiv.style;\n    innerStyle.width = '100px';\n    innerStyle.height = '100px';\n\n    outerDiv.appendChild(innerDiv);\n\n    document.body.appendChild(outerDiv);\n\n    if (outerDiv.scrollLeft > 0) {\n      cachedRTLResult = 'positive-descending';\n    } else {\n      outerDiv.scrollLeft = 1;\n      if (outerDiv.scrollLeft === 0) {\n        cachedRTLResult = 'negative';\n      } else {\n        cachedRTLResult = 'positive-ascending';\n      }\n    }\n\n    document.body.removeChild(outerDiv);\n\n    return cachedRTLResult;\n  }\n\n  return cachedRTLResult;\n}\n\nexport function getScrollLeft(node: Element, direction: Direction): number {\n  let {scrollLeft} = node;\n\n  // scrollLeft in rtl locales differs across browsers, so normalize.\n  // See comment by getRTLOffsetType below for details.\n  if (direction === 'rtl') {\n    let {scrollWidth, clientWidth} = node;\n    switch (getRTLOffsetType()) {\n      case 'negative':\n        scrollLeft = -scrollLeft;\n        break;\n      case 'positive-descending':\n        scrollLeft = scrollWidth - clientWidth - scrollLeft;\n        break;\n    }\n  }\n\n  return scrollLeft;\n}\n\nexport function setScrollLeft(node: Element, direction: Direction, scrollLeft: number) {\n  if (direction === 'rtl') {\n    switch (getRTLOffsetType()) {\n      case 'negative':\n        scrollLeft = -scrollLeft;\n        break;\n      case 'positive-ascending':\n        break;\n      default: {\n        const {clientWidth, scrollWidth} = node;\n        scrollLeft = scrollWidth - clientWidth - scrollLeft;\n        break;\n      }\n    }\n  }\n\n  node.scrollLeft = scrollLeft;\n}\n"],"names":[],"version":3,"file":"utils.module.js.map"}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@react-aria/virtualizer",
+  "version": "3.0.0-nightly-641446f65-240905",
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@react-aria/i18n": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/interactions": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/utils": "^3.0.0-nightly-641446f65-240905",
+    "@react-stately/virtualizer": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/shared": "^3.0.0-nightly-641446f65-240905",
+    "@swc/helpers": "^0.5.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "stableVersion": "4.0.2"
+}

package/src/ScrollView.tsx

@@ -0,0 +1,246 @@
+/*
+ * 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
+import {flushSync} from 'react-dom';
+import {getScrollLeft} from './utils';
+import React, {
+  CSSProperties,
+  ForwardedRef,
+  HTMLAttributes,
+  ReactNode,
+  RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import {Rect, Size} from '@react-stately/virtualizer';
+import {useEffectEvent, useEvent, useLayoutEffect, useObjectRef, useResizeObserver} from '@react-aria/utils';
+import {useLocale} from '@react-aria/i18n';
+
+interface ScrollViewProps extends HTMLAttributes<HTMLElement> {
+  contentSize: Size,
+  onVisibleRectChange: (rect: Rect) => void,
+  children?: ReactNode,
+  innerStyle?: CSSProperties,
+  onScrollStart?: () => void,
+  onScrollEnd?: () => void,
+  scrollDirection?: 'horizontal' | 'vertical' | 'both'
+}
+
+function ScrollView(props: ScrollViewProps, ref: ForwardedRef<HTMLDivElement | null>) {
+  ref = useObjectRef(ref);
+  let {scrollViewProps, contentProps} = useScrollView(props, ref);
+
+  return (
+    <div role="presentation" {...scrollViewProps} ref={ref}>
+      <div role="presentation" {...contentProps}>
+        {props.children}
+      </div>
+    </div>
+  );
+}
+
+const ScrollViewForwardRef = React.forwardRef(ScrollView);
+export {ScrollViewForwardRef as ScrollView};
+
+export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement | null>) {
+  let {
+    contentSize,
+    onVisibleRectChange,
+    innerStyle,
+    onScrollStart,
+    onScrollEnd,
+    scrollDirection = 'both',
+    ...otherProps
+  } = props;
+
+  let state = useRef({
+    scrollTop: 0,
+    scrollLeft: 0,
+    scrollEndTime: 0,
+    scrollTimeout: null,
+    width: 0,
+    height: 0,
+    isScrolling: false
+  }).current;
+  let {direction} = useLocale();
+
+  let [isScrolling, setScrolling] = useState(false);
+  let onScroll = useCallback((e) => {
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+
+    if (props.onScroll) {
+      props.onScroll(e);
+    }
+
+    flushSync(() => {
+      let scrollTop = e.currentTarget.scrollTop;
+      let scrollLeft = 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 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.
+  useEvent(ref, 'scroll', onScroll);
+
+  // eslint-disable-next-line arrow-body-style
+  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 = useEffectEvent((flush: typeof flushSync) => {
+    let dom = ref.current;
+    if (!dom) {
+      return;
+    }
+
+    let isTestEnv = process.env.NODE_ENV === 'test' && !process.env.VIRT_ON;
+    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 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 Rect(state.scrollLeft, state.scrollTop, state.width, state.height));
+        });
+      }
+    }
+  });
+
+  let didUpdateSize = useRef(false);
+  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(flushSync);
+      }
+    });
+  }, [updateSize]);
+  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 = useCallback(() => {
+    updateSize(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.
+  useResizeObserver({ref, box: 'border-box', onResize});
+
+  let style: React.CSSProperties = {
+    // 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
+    },
+    contentProps: {
+      role: 'presentation',
+      style: innerStyle
+    }
+  };
+}

package/src/Virtualizer.tsx

@@ -0,0 +1,117 @@
+/*
+ * 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.
+ */
+
+import {Collection, Key, RefObject} from '@react-types/shared';
+import {Layout, Rect, ReusableView, useVirtualizerState} from '@react-stately/virtualizer';
+import {mergeProps, useLoadMore} from '@react-aria/utils';
+import React, {HTMLAttributes, ReactElement, ReactNode, useCallback, useRef} from 'react';
+import {ScrollView} from './ScrollView';
+import {VirtualizerItem} from './VirtualizerItem';
+
+type RenderWrapper<T extends object, V> = (
+  parent: ReusableView<T, V> | null,
+  reusableView: ReusableView<T, V>,
+  children: ReusableView<T, V>[],
+  renderChildren: (views: ReusableView<T, V>[]) => ReactElement[]
+) => ReactElement;
+
+interface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+  children: (type: string, content: T) => V,
+  renderWrapper?: RenderWrapper<T, V>,
+  layout: Layout<T, O>,
+  collection: Collection<T>,
+  persistedKeys?: Set<Key> | null,
+  scrollDirection?: 'horizontal' | 'vertical' | 'both',
+  isLoading?: boolean,
+  onLoadMore?: () => void,
+  layoutOptions?: O
+}
+
+function Virtualizer<T extends object, V extends ReactNode, O>(props: VirtualizerProps<T, V, O>, ref: RefObject<HTMLDivElement | null>) {
+  let {
+    children: renderView,
+    renderWrapper,
+    layout,
+    collection,
+    scrollDirection,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    isLoading,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onLoadMore,
+    persistedKeys,
+    layoutOptions,
+    ...otherProps
+  } = props;
+
+  let fallbackRef = useRef<HTMLDivElement>(undefined);
+  ref = ref || fallbackRef;
+
+  let state = useVirtualizerState({
+    layout,
+    collection,
+    renderView,
+    onVisibleRectChange(rect) {
+      ref.current.scrollLeft = rect.x;
+      ref.current.scrollTop = rect.y;
+    },
+    persistedKeys,
+    layoutOptions
+  });
+
+  useLoadMore({isLoading, onLoadMore, scrollOffset: 1}, ref);
+  let onVisibleRectChange = useCallback((rect: Rect) => {
+    state.setVisibleRect(rect);
+  }, [state]);
+
+  return (
+    <ScrollView
+      {...mergeProps(otherProps, {onVisibleRectChange})}
+      ref={ref}
+      contentSize={state.contentSize}
+      onScrollStart={state.startScrolling}
+      onScrollEnd={state.endScrolling}
+      scrollDirection={scrollDirection}>
+      {renderChildren(null, state.visibleViews, renderWrapper || defaultRenderWrapper)}
+    </ScrollView>
+  );
+}
+
+// forwardRef doesn't support generic parameters, so cast the result to the correct type
+// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
+const _Virtualizer = React.forwardRef(Virtualizer) as <T extends object, V, O>(props: VirtualizerProps<T, V, O> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;
+export {_Virtualizer as Virtualizer};
+
+function renderChildren<T extends object, V>(parent: ReusableView<T, V> | null, views: ReusableView<T, V>[], renderWrapper: RenderWrapper<T, V>) {
+  return views.map(view => {
+    return renderWrapper(
+      parent,
+      view,
+      view.children ? Array.from(view.children) : [],
+      childViews => renderChildren(view, childViews, renderWrapper)
+    );
+  });
+}
+
+function defaultRenderWrapper<T extends object, V extends ReactNode>(
+  parent: ReusableView<T, V> | null,
+  reusableView: ReusableView<T, V>
+) {
+  return (
+    <VirtualizerItem
+      key={reusableView.key}
+      layoutInfo={reusableView.layoutInfo}
+      virtualizer={reusableView.virtualizer}
+      parent={parent?.layoutInfo}>
+      {reusableView.rendered}
+    </VirtualizerItem>
+  );
+}

package/src/VirtualizerItem.tsx

@@ -0,0 +1,87 @@
+/*
+ * 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.
+ */
+
+import {Direction} from '@react-types/shared';
+import {LayoutInfo} from '@react-stately/virtualizer';
+import React, {CSSProperties, ReactNode, useRef} from 'react';
+import {useLocale} from '@react-aria/i18n';
+import {useVirtualizerItem, VirtualizerItemOptions} from './useVirtualizerItem';
+
+interface VirtualizerItemProps extends Omit<VirtualizerItemOptions, 'ref'> {
+  parent?: LayoutInfo | null,
+  className?: string,
+  children: ReactNode
+}
+
+export function VirtualizerItem(props: VirtualizerItemProps) {
+  let {className, layoutInfo, virtualizer, parent, children} = props;
+  let {direction} = useLocale();
+  let ref = useRef(undefined);
+  useVirtualizerItem({
+    layoutInfo,
+    virtualizer,
+    ref
+  });
+
+  return (
+    <div role="presentation" ref={ref} className={className} style={layoutInfoToStyle(layoutInfo, direction, parent)}>
+      {children}
+    </div>
+  );
+}
+
+let cache = new WeakMap();
+export function layoutInfoToStyle(layoutInfo: LayoutInfo, dir: Direction, parent?: LayoutInfo | null): CSSProperties {
+  let xProperty = dir === 'rtl' ? 'right' : 'left';
+  let cached = cache.get(layoutInfo);
+  if (cached && cached[xProperty] != null) {
+    if (!parent) {
+      return cached;
+    }
+
+    // Invalidate if the parent position changed.
+    let top = layoutInfo.rect.y - parent.rect.y;
+    let x = layoutInfo.rect.x - parent.rect.x;
+    if (cached.top === top && cached[xProperty] === x) {
+      return cached;
+    }
+  }
+
+  let rectStyles = {
+    top: layoutInfo.rect.y - (parent ? parent.rect.y : 0),
+    [xProperty]: layoutInfo.rect.x - (parent ? parent.rect.x : 0),
+    width: layoutInfo.rect.width,
+    height: layoutInfo.rect.height
+  };
+
+  // Get rid of any non finite values since they aren't valid css values
+  Object.entries(rectStyles).forEach(([key, value]) => {
+    if (!Number.isFinite(value)) {
+      rectStyles[key] = undefined;
+    }
+  });
+
+  let style: CSSProperties = {
+    position: layoutInfo.isSticky ? 'sticky' : 'absolute',
+    // Sticky elements are positioned in normal document flow. Display inline-block so that they don't push other sticky columns onto the following rows.
+    display: layoutInfo.isSticky ? 'inline-block' : undefined,
+    overflow: layoutInfo.allowOverflow ? 'visible' : 'hidden',
+    opacity: layoutInfo.opacity,
+    zIndex: layoutInfo.zIndex,
+    transform: layoutInfo.transform,
+    contain: 'size layout style',
+    ...rectStyles
+  };
+
+  cache.set(layoutInfo, style);
+  return style;
+}

package/src/index.ts

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+export type {RTLOffsetType} from './utils';
+export type {VirtualizerItemOptions} from './useVirtualizerItem';
+export {Virtualizer} from './Virtualizer';
+export {useVirtualizerItem} from './useVirtualizerItem';
+export {VirtualizerItem, layoutInfoToStyle} from './VirtualizerItem';
+export {ScrollView, useScrollView} from './ScrollView';
+export {getRTLOffsetType, getScrollLeft, setScrollLeft} from './utils';