@react-spectrum/card 3.0.0-alpha.4 → 3.0.0-alpha.41

package/dist/vars.02438011.css.map

@@ -0,0 +1 @@
+{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAwFJ;;;;;;;;;;AASE;;;;AAIA;;;;AAGA;;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAUA;;;;AAaE;;;;;;AASJ;;;;AAKE;;;;AAMF;;;;AAEE;;;;;AAMF;;;;AAEE;;;;;AAMF;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;;AAMA;;;;AAQA;;;;;;;AACE;;;;AAGA;;;;;AASA;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAUA;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAUA;;;;;;;;;;;;AAaE;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAUF;;;;;;;;;;AAWE;;;;AAKF;;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAeA;;;;;AAKA;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAMA;;;;;;;;AAOA;;;;;;;AAMA;;;;AAOF;;;;;;;AACE;;;;AAGA;;;;;AASA;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAUA;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAUA;;;;;;;;;;;;AAaE;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAUF;;;;;;;;;;;AAYE;;;;AAIF;;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAgBA;;;;;AAKA;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAMA;;;;;;;;AAOA;;;;;;;AAMA;;;;;;AASF;;;;;;;AACE;;;;AAGA;;;;;AASA;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAUA;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAUA;;;;;;;;;;;AAYE;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAUF;;;;;;;;;;AAcE;;;;AAIF;;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAgBA;;;;;;;AAOA;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAMA;;;;;;;;AAOA;;;;;;;AAMA;;;;AAWF;;;;AACE;;;;AAGA;;;;AAGA;;;;AAKA;;;;;;;;;;;AAWE;;;;;;AAOA;;;;;;;;;AAYA;;;;;;;;AASF;;;;;;;;AAUA;;;;;AAKA;;;;AAGA;;;;;;;;AAcA;;;;AASF;;;;AACE;;;;AAGA;;;;AAGA;;;;AAKA;;;;;;;;;;;AAWE;;;;;;AAOA;;;;;;;;;AAYA;;;;;;;;AASF;;;;;;;;AASE;;;;;AATF;;;;;;;;AASE;;;;;AAMF;;;;;AAKA;;;;AAGA;;;;;;;;AAcA;;;;;;AASF;;;;AACE;;;;AAGA;;;;AAGA;;;;AAKA;;;;;;;;;;;;AAYE;;;;;;;;;;AAaA;;;;;;;;;AAYA;;;;;;;;AASF;;;;;;;;AAUA;;;;;AAMA;;;;;AAKA;;;;AAGA;;;;;;;;AAcA;;;;;;AASF;;;;AACE;;;;AAGA;;;;AAGA;;;;AAKA;;;;;;;;;;;;AAYE;;;;;;AAOA;;;;;;;;;;;AAcA;;;;;;;;AASF;;;;;;AAWA;;;;;;;AAOA;;;;AAGA;;;;;AAIA;;;;;;;;AAOA;;;;AAgBF;;;;;;AACE;;;;AAMA;;;;AAWA;;;;;;;;;;AAUE;;;;;;;;AASF;;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAkBA;;;;;AAMA;;;;AAGA;;;;;;;;AAOA;;;;AAIA;;;;;;;;;AAaF;;;;;;AACE;;;;AAMA;;;;AAWA;;;;;;;;;;;;AAYE;;;;;;;;AAgBF;;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAkBA;;;;;AAMA;;;;AAGA;;;;;;;;AAOA;;;;AAIA;;;;;;;;;AAeF;;;;AAGE;;;;;;;;AAOA;;;;;AAoBA;;;;;;AAMC;;;;AAID;;;;AAcF;;;;AAIA;;;;AAiBA;;;;;AAIE;;;;AAEE;;;;AAOA;;;;AAQF;;;;AAEE;;;;AAQF;;;;AAEE;;;;AAKF;;;;AAEE;;;;AAKF;;;;AAEE;;;;;AAIA;;;;AAEE;;;;;AAMJ;;;;AAGA;;;;;AAME;;;;;AAMF;;;;AAcA;;;;AASF;;;;;AAKM;;;;;AAUA;;;;AAsBA;;;;AAgBA;;;;AAME;;;;AAQJ;;;;;AAwBF;;;;;;AAQF;;;;;AAGE;;;;AAGI;;;;AASA;;;;AASJ;;;;AAGI;;;;AASJ;;;;AAGI;;;;AAMJ;;;;AAGI;;;;AAMJ;;;;AAGI;;;;;AAKF;;;;AAGI;;;;;AASJ;;;;;AAMF","sources":["packages/@adobe/spectrum-css-temp/components/card/vars.css"],"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@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.02438011.css.map"}

package/dist/zh-CN.main.js

@@ -0,0 +1,7 @@
+module.exports = {
+    "loading": `\u{6B63}\u{5728}\u{52A0}\u{8F7D}...`,
+    "loadingMore": `\u{6B63}\u{5728}\u{52A0}\u{8F7D}\u{66F4}\u{591A}...`
+};
+
+
+//# sourceMappingURL=zh-CN.main.js.map

package/dist/zh-CN.main.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,mCAAO,CAAC;IACtC,eAAe,CAAC,mDAAS,CAAC;AAC5B","sources":["packages/@react-spectrum/card/intl/zh-CN.json"],"sourcesContent":["{\n  \"loading\": \"正在加载...\",\n  \"loadingMore\": \"正在加载更多...\"\n}\n"],"names":[],"version":3,"file":"zh-CN.main.js.map"}

package/dist/zh-CN.mjs

@@ -0,0 +1,9 @@
+var $88c83d794a7a062b$exports = {};
+$88c83d794a7a062b$exports = {
+    "loading": `\u{6B63}\u{5728}\u{52A0}\u{8F7D}...`,
+    "loadingMore": `\u{6B63}\u{5728}\u{52A0}\u{8F7D}\u{66F4}\u{591A}...`
+};
+
+
+export {$88c83d794a7a062b$exports as default};
+//# sourceMappingURL=zh-CN.module.js.map

package/dist/zh-CN.module.js

@@ -0,0 +1,9 @@
+var $88c83d794a7a062b$exports = {};
+$88c83d794a7a062b$exports = {
+    "loading": `\u{6B63}\u{5728}\u{52A0}\u{8F7D}...`,
+    "loadingMore": `\u{6B63}\u{5728}\u{52A0}\u{8F7D}\u{66F4}\u{591A}...`
+};
+
+
+export {$88c83d794a7a062b$exports as default};
+//# sourceMappingURL=zh-CN.module.js.map

package/dist/zh-CN.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,mCAAO,CAAC;IACtC,eAAe,CAAC,mDAAS,CAAC;AAC5B","sources":["packages/@react-spectrum/card/intl/zh-CN.json"],"sourcesContent":["{\n  \"loading\": \"正在加载...\",\n  \"loadingMore\": \"正在加载更多...\"\n}\n"],"names":[],"version":3,"file":"zh-CN.module.js.map"}

package/dist/zh-TW.main.js

@@ -0,0 +1,7 @@
+module.exports = {
+    "loading": `\u{8F09}\u{5165}\u{4E2D}\u{2026}`,
+    "loadingMore": `\u{6B63}\u{5728}\u{8F09}\u{5165}\u{66F4}\u{591A}\u{2026}`
+};
+
+
+//# sourceMappingURL=zh-TW.main.js.map

package/dist/zh-TW.main.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,gCAAI,CAAC;IACnC,eAAe,CAAC,wDAAO,CAAC;AAC1B","sources":["packages/@react-spectrum/card/intl/zh-TW.json"],"sourcesContent":["{\n  \"loading\": \"載入中…\",\n  \"loadingMore\": \"正在載入更多…\"\n}\n"],"names":[],"version":3,"file":"zh-TW.main.js.map"}

package/dist/zh-TW.mjs

@@ -0,0 +1,9 @@
+var $b7e2865acb74a940$exports = {};
+$b7e2865acb74a940$exports = {
+    "loading": `\u{8F09}\u{5165}\u{4E2D}\u{2026}`,
+    "loadingMore": `\u{6B63}\u{5728}\u{8F09}\u{5165}\u{66F4}\u{591A}\u{2026}`
+};
+
+
+export {$b7e2865acb74a940$exports as default};
+//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js

@@ -0,0 +1,9 @@
+var $b7e2865acb74a940$exports = {};
+$b7e2865acb74a940$exports = {
+    "loading": `\u{8F09}\u{5165}\u{4E2D}\u{2026}`,
+    "loadingMore": `\u{6B63}\u{5728}\u{8F09}\u{5165}\u{66F4}\u{591A}\u{2026}`
+};
+
+
+export {$b7e2865acb74a940$exports as default};
+//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,gCAAI,CAAC;IACnC,eAAe,CAAC,wDAAO,CAAC;AAC1B","sources":["packages/@react-spectrum/card/intl/zh-TW.json"],"sourcesContent":["{\n  \"loading\": \"載入中…\",\n  \"loadingMore\": \"正在載入更多…\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@react-spectrum/card",
-  "version": "3.0.0-alpha.4",
+  "version": "3.0.0-alpha.41",
   "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": [
@@ -31,36 +36,34 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@babel/runtime": "^7.6.2",
-    "@react-aria/focus": "^3.5.2",
-    "@react-aria/grid": "^3.2.3",
-    "@react-aria/i18n": "^3.3.6",
-    "@react-aria/interactions": "^3.8.1",
-    "@react-aria/utils": "^3.11.2",
-    "@react-aria/virtualizer": "^3.3.7",
-    "@react-spectrum/checkbox": "^3.3.1",
-    "@react-spectrum/divider": "^3.2.1",
-    "@react-spectrum/layout": "^3.2.3",
-    "@react-spectrum/progress": "^3.1.5",
-    "@react-spectrum/utils": "^3.6.5",
-    "@react-stately/collections": "^3.3.6",
-    "@react-stately/grid": "^3.1.2",
-    "@react-stately/list": "^3.4.3",
-    "@react-stately/utils": "^3.4.1",
-    "@react-stately/virtualizer": "^3.1.7",
-    "@react-types/card": "3.0.0-alpha.3",
-    "@react-types/provider": "^3.4.1",
-    "@react-types/shared": "^3.11.1"
+    "@react-aria/focus": "^3.20.1",
+    "@react-aria/grid": "^3.12.1",
+    "@react-aria/i18n": "^3.12.7",
+    "@react-aria/interactions": "^3.24.1",
+    "@react-aria/utils": "^3.28.1",
+    "@react-aria/virtualizer": "^4.1.3",
+    "@react-spectrum/checkbox": "^3.9.14",
+    "@react-spectrum/progress": "^3.7.14",
+    "@react-spectrum/utils": "^3.12.3",
+    "@react-stately/collections": "^3.12.2",
+    "@react-stately/grid": "^3.11.0",
+    "@react-stately/list": "^3.12.0",
+    "@react-stately/virtualizer": "^4.3.1",
+    "@react-types/card": "3.0.0-alpha.34",
+    "@react-types/provider": "^3.8.7",
+    "@react-types/shared": "^3.28.0",
+    "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
     "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b98f0e60590d784afd54140916576021d4c1bfd7"
+  "gitHead": "9c4ebbc0c1972cc880febc29de995ca58caa3ba4"
 }

package/src/BaseLayout.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -10,10 +11,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {Direction, KeyboardDelegate, Node} from '@react-types/shared';
+import {Direction, Key, KeyboardDelegate, Node} from '@react-types/shared';
+import {getChildNodes, getFirstItem} from '@react-stately/collections';
 import {GridCollection} from '@react-stately/grid';
 import {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';
-import {Key} from 'react';
 import {Scale} from '@react-types/provider';
 
 export interface BaseLayoutOptions {
@@ -27,7 +28,12 @@ export interface BaseLayoutOptions {
   margin?: number
 }
 
-export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
+interface CardViewLayoutOptions {
+  isLoading: boolean,
+  direction: Direction
+}
+
+export class BaseLayout<T> extends Layout<Node<T>, CardViewLayoutOptions> implements KeyboardDelegate {
   protected contentSize: Size;
   protected layoutInfos: Map<Key, LayoutInfo>;
   protected collator: Intl.Collator;
@@ -48,8 +54,10 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
     this.margin = options.margin || 24;
   }
 
-  validate(invalidationContext: InvalidationContext<Node<T>, unknown>) {
+  update(invalidationContext: InvalidationContext<CardViewLayoutOptions>) {
     this.collection = this.virtualizer.collection as GridCollection<T>;
+    this.isLoading = invalidationContext.layoutOptions?.isLoading || false;
+    this.direction = invalidationContext.layoutOptions?.direction || 'ltr';
     this.buildCollection(invalidationContext);
 
     // Remove layout info that doesn't exist in new collection
@@ -73,21 +81,21 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  buildCollection(invalidationContext?: InvalidationContext<Node<T>, unknown>) {}
+  buildCollection(invalidationContext?: InvalidationContext) {}
 
   getContentSize() {
     return this.contentSize;
   }
 
   getLayoutInfo(key: Key) {
-    return this.layoutInfos.get(key);
+    return this.layoutInfos.get(key)!;
   }
 
-  getVisibleLayoutInfos(rect) {
+  getVisibleLayoutInfos(rect: Rect, excludePersistedKeys = false) {
     let res: LayoutInfo[] = [];
 
     for (let layoutInfo of this.layoutInfos.values()) {
-      if (this.isVisible(layoutInfo, rect)) {
+      if (this.isVisible(layoutInfo, rect, excludePersistedKeys)) {
         res.push(layoutInfo);
       }
     }
@@ -95,24 +103,20 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
     return res;
   }
 
-  isVisible(layoutInfo: LayoutInfo, rect: Rect) {
-    return layoutInfo.rect.intersects(rect);
-  }
+  isVisible(layoutInfo: LayoutInfo, rect: Rect, excludePersistedKeys: boolean) {
+    if (layoutInfo.rect.intersects(rect)) {
+      return true;
+    }
 
-  getInitialLayoutInfo(layoutInfo: LayoutInfo) {
-    layoutInfo.opacity = 0;
-    layoutInfo.transform = 'scale3d(0.8, 0.8, 0.8)';
-    return layoutInfo;
-  }
+    if (!excludePersistedKeys) {
+      return this.virtualizer.isPersistedKey(layoutInfo.key);
+    }
 
-  getFinalLayoutInfo(layoutInfo: LayoutInfo) {
-    layoutInfo.opacity = 0;
-    layoutInfo.transform = 'scale3d(0.8, 0.8, 0.8)';
-    return layoutInfo;
+    return false;
   }
 
   _findClosestLayoutInfo(target: Rect, rect: Rect) {
-    let layoutInfos = this.getVisibleLayoutInfos(rect);
+    let layoutInfos = this.getVisibleLayoutInfos(rect, true);
     let best = null;
     let bestDistance = Infinity;
 
@@ -146,7 +150,7 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
     let layoutInfo = this.getLayoutInfo(parentRowKey);
     let rect = new Rect(layoutInfo.rect.x, layoutInfo.rect.maxY + 1, layoutInfo.rect.width, this.virtualizer.visibleRect.height);
     let closestRow = this.collection.getItem(this._findClosest(layoutInfo.rect, rect)?.key);
-    return closestRow?.childNodes[0]?.key;
+    return getFirstItem(getChildNodes(closestRow, this.collection))?.key;
   }
 
   getKeyAbove(key: Key) {
@@ -155,7 +159,7 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
     let layoutInfo = this.getLayoutInfo(parentRowKey);
     let rect = new Rect(layoutInfo.rect.x, 0, layoutInfo.rect.width, layoutInfo.rect.y - 1);
     let closestRow = this.collection.getItem(this._findClosest(layoutInfo.rect, rect)?.key);
-    return closestRow?.childNodes[0]?.key;
+    return getFirstItem(getChildNodes(closestRow, this.collection))?.key;
   }
 
   getKeyRightOf(key: Key) {
@@ -167,7 +171,7 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
       let item = this.collection.getItem(key);
       // Don't check if item is disabled because we want to be able to focus disabled items in a grid (double check this)
       if (item.type === 'item') {
-        return item.childNodes[0].key;
+        return getFirstItem(getChildNodes(item, this.collection))?.key;
       }
       key = this.direction === 'rtl' ?  this.collection.getKeyBefore(key) : this.collection.getKeyAfter(key);
     }
@@ -181,7 +185,7 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
       let item = this.collection.getItem(key);
       // Don't check if item is disabled because we want to be able to focus disabled items in a grid (double check this)
       if (item.type === 'item') {
-        return item.childNodes[0].key;
+        return getFirstItem(getChildNodes(item, this.collection))?.key;
       }
 
       key = this.direction === 'rtl' ?  this.collection.getKeyAfter(key) : this.collection.getKeyBefore(key);
@@ -190,12 +194,12 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
 
   getFirstKey() {
     let firstRow = this.collection.getItem(this.collection.getFirstKey());
-    return firstRow.childNodes[0].key;
+    return getFirstItem(getChildNodes(firstRow, this.collection))?.key;
   }
 
   getLastKey() {
     let lastRow = this.collection.getItem(this.collection.getLastKey());
-    return lastRow.childNodes[0].key;
+    return getFirstItem(getChildNodes(lastRow, this.collection))?.key;
   }
 
   // TODO: pretty unwieldy because it needs to bounce back and forth between the parent key and the child key
@@ -214,14 +218,14 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
 
       if (layoutInfo && layoutInfo.rect.y > pageY) {
         while (layoutInfo && layoutInfo.rect.y > pageY) {
-          let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
+          let childKey = getFirstItem(getChildNodes(this.collection.getItem(layoutInfo.key), this.collection))?.key;
           let keyAbove = this.collection.getItem(this.getKeyAbove(childKey))?.parentKey;
           layoutInfo = this.getLayoutInfo(keyAbove);
         }
       }
 
       if (layoutInfo) {
-        let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
+        let childKey = getFirstItem(getChildNodes(this.collection.getItem(layoutInfo.key), this.collection))?.key;
         return childKey;
       }
     }
@@ -243,14 +247,14 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
       layoutInfo = this.getLayoutInfo(keyBelow);
       if (layoutInfo && layoutInfo.rect.y < pageY) {
         while (layoutInfo && layoutInfo.rect.y < pageY) {
-          let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
+          let childKey = getFirstItem(getChildNodes(this.collection.getItem(layoutInfo.key), this.collection))?.key;
           let keyBelow = this.collection.getItem(this.getKeyBelow(childKey))?.parentKey;
           layoutInfo = this.getLayoutInfo(keyBelow);
         }
       }
 
       if (layoutInfo) {
-        let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
+        let childKey = getFirstItem(getChildNodes(this.collection.getItem(layoutInfo.key), this.collection))?.key;
         return childKey;
       }
     }
@@ -274,7 +278,7 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
       if (item.textValue) {
         let substring = item.textValue.slice(0, search.length);
         if (this.collator.compare(substring, search) === 0) {
-          return [...item.childNodes][0].key;
+          return getFirstItem(getChildNodes(item, this.collection))?.key;
         }
       }
 

package/src/Card.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");

package/src/CardBase.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -15,8 +16,7 @@ import {Checkbox} from '@react-spectrum/checkbox';
 import {classNames, SlotProvider, useDOMRef, useHasChild, useStyleProps} from '@react-spectrum/utils';
 import {DOMRef, Node} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useLayoutEffect, useResizeObserver, useSlotId} from '@react-aria/utils';
-import {FocusRing} from '@react-aria/focus';
-import {getFocusableTreeWalker} from  '@react-aria/focus';
+import {FocusRing, getFocusableTreeWalker} from '@react-aria/focus';
 import React, {HTMLAttributes, useCallback, useMemo, useRef, useState} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/card/vars.css';
 import {useCardViewContext} from './CardViewContext';
@@ -28,7 +28,10 @@ interface CardBaseProps<T> extends SpectrumCardProps {
   item?: Node<T>
 }
 
-function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDivElement>) {
+/**
+ * TODO: Add description of component here.
+ */
+export const CardBase = React.forwardRef(function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let context = useCardViewContext() || {}; // we can call again here, won't change from Card.tsx
   let {state} = context;
@@ -50,7 +53,7 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
   let {styleProps} = useStyleProps(props);
   let {cardProps, titleProps, contentProps} = useCard(props);
   let domRef = useDOMRef(ref);
-  let gridRef = useRef<HTMLDivElement>();
+  let gridRef = useRef<HTMLDivElement>(undefined);
   let checkboxRef = useRef(null);
 
   // cards are only interactive if there is a selection manager and it allows selection
@@ -93,6 +96,7 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
     heading: {UNSAFE_className: classNames(styles, 'spectrum-Card-heading'), ...titleProps},
     content: {UNSAFE_className: classNames(styles, 'spectrum-Card-content'), ...contentProps},
     detail: {UNSAFE_className: classNames(styles, 'spectrum-Card-detail')}
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [titleProps, contentProps, height, isQuiet, orientation]);
 
   useLayoutEffect(() => {
@@ -150,7 +154,7 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
       </article>
     </FocusRing>
   );
-}
+});
 
 interface AriaCardOptions extends AriaCardProps {
 }
@@ -182,9 +186,3 @@ function useCard(props: AriaCardOptions): CardAria {
     contentProps
   };
 }
-
-/**
- * TODO: Add description of component here.
- */
-const _CardBase = React.forwardRef(CardBase);
-export {_CardBase as CardBase};

package/src/CardView.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -17,18 +18,22 @@ import {DOMRef, DOMRefValue, Node} from '@react-types/shared';
 import {GridCollection, useGridState} from '@react-stately/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {mergeProps} from '@react-aria/utils';
 import {ProgressCircle} from '@react-spectrum/progress';
-import React, {ReactElement, useCallback, useMemo, useRef} from 'react';
+import React, {ReactElement, ReactNode, useCallback, useMemo, useRef} from 'react';
 import {ReusableView} from '@react-stately/virtualizer';
 import {SpectrumCardViewProps} from '@react-types/card';
 import styles from '@adobe/spectrum-css-temp/components/card/vars.css';
-import {useCollator, useLocale, useMessageFormatter} from '@react-aria/i18n';
+import {useCollator, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useGrid, useGridCell, useGridRow} from '@react-aria/grid';
 import {useListState} from '@react-stately/list';
 import {useProvider} from '@react-spectrum/provider';
 import {Virtualizer, VirtualizerItem} from '@react-aria/virtualizer';
 
-function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef<HTMLDivElement>) {
+/**
+ * TODO: Add description of component here.
+ */
+export const CardView = React.forwardRef(function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {scale} = useProvider();
   let {styleProps} = useStyleProps(props);
   let domRef = useDOMRef(ref);
@@ -46,7 +51,6 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
   let cardViewLayout = useMemo(() => typeof layout === 'function' ? new layout({collator, cardOrientation, scale}) : layout, [layout, collator, cardOrientation, scale]);
   let layoutType = cardViewLayout.layoutType;
 
-  let formatMessage = useMessageFormatter(intlMessages);
   let {direction} = useLocale();
   let {collection} = useListState(props);
 
@@ -78,8 +82,6 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
 
   cardViewLayout.collection = gridCollection;
   cardViewLayout.disabledKeys = state.disabledKeys;
-  cardViewLayout.isLoading = isLoading;
-  cardViewLayout.direction = direction;
 
   let {gridProps} = useGrid({
     ...props,
@@ -87,13 +89,16 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
     keyboardDelegate: cardViewLayout
   }, state, domRef);
 
-  type View = ReusableView<Node<T>, unknown>;
-  let renderWrapper = (parent: View, reusableView: View) => (
+  type View = ReusableView<Node<T>, ReactNode>;
+  let renderWrapper = useCallback((parent: View, reusableView: View) => (
     <VirtualizerItem
       key={reusableView.key}
-      reusableView={reusableView}
-      parent={parent} />
-  );
+      layoutInfo={reusableView.layoutInfo}
+      virtualizer={reusableView.virtualizer}
+      parent={parent?.layoutInfo}>
+      {reusableView.rendered}
+    </VirtualizerItem>
+  ), []);
 
   let focusedKey = state.selectionManager.focusedKey;
   let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);
@@ -101,62 +106,69 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
     focusedKey = focusedItem.parentKey;
   }
 
-  let margin = cardViewLayout.margin || 0;
-  let virtualizer = cardViewLayout.virtualizer;
-  let scrollToItem = useCallback((key) => {
-    virtualizer && virtualizer.scrollToItem(key, {
-      duration: 0,
-      offsetY: margin
-    });
-  }, [margin, virtualizer]);
+  let persistedKeys = useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);
 
   // TODO: does aria-row count and aria-col count need to be modified? Perhaps aria-col count needs to be omitted
   return (
-    <CardViewContext.Provider value={{state, isQuiet, layout: cardViewLayout, cardOrientation}}>
+    <CardViewContext.Provider value={{state, isQuiet, layout: cardViewLayout, cardOrientation, renderEmptyState}}>
       <Virtualizer
         {...gridProps}
         {...styleProps}
         className={classNames(styles, 'spectrum-CardView')}
         ref={domRef}
-        focusedKey={focusedKey}
+        persistedKeys={persistedKeys}
         scrollDirection="vertical"
         layout={cardViewLayout}
         collection={gridCollection}
         isLoading={isLoading}
         onLoadMore={onLoadMore}
+        layoutOptions={useMemo(() => ({isLoading, direction}), [isLoading, direction])}
         renderWrapper={renderWrapper}
-        transitionDuration={isLoading ? 160 : 220}
-        scrollToItem={scrollToItem}>
-        {(type, item) => {
+        style={{
+          ...styleProps.style,
+          scrollPaddingTop: cardViewLayout.margin || 0
+        }}>
+        {useCallback((type, item) => {
           if (type === 'item') {
             return (
               <InternalCard item={item} />
             );
           } else if (type === 'loader') {
-            return (
-              <CenteredWrapper>
-                <ProgressCircle
-                  isIndeterminate
-                  aria-label={state.collection.size > 0 ? formatMessage('loadingMore') : formatMessage('loading')} />
-              </CenteredWrapper>
-            );
+            return <LoadingState />;
           } else if (type === 'placeholder') {
-            let emptyState = renderEmptyState ? renderEmptyState() : null;
-            if (emptyState == null) {
-              return null;
-            }
-
-            return (
-              <CenteredWrapper>
-                {emptyState}
-              </CenteredWrapper>
-            );
+            return <EmptyState />;
           }
-        }}
+        }, [])}
       </Virtualizer>
     </CardViewContext.Provider>
 
   );
+}) as <T>(props: SpectrumCardViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
+
+function LoadingState() {
+  let {state} = useCardViewContext();
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/card');
+  return (
+    <CenteredWrapper>
+      <ProgressCircle
+        isIndeterminate
+        aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')} />
+    </CenteredWrapper>
+  );
+}
+
+function EmptyState() {
+  let {renderEmptyState} = useCardViewContext();
+  let emptyState = renderEmptyState ? renderEmptyState() : null;
+  if (emptyState == null) {
+    return null;
+  }
+
+  return (
+    <CenteredWrapper>
+      {emptyState}
+    </CenteredWrapper>
+  );
 }
 
 function CenteredWrapper({children}) {
@@ -181,11 +193,11 @@ function InternalCard(props) {
   let {state, cardOrientation, isQuiet, layout} = useCardViewContext();
 
   let layoutType = layout.layoutType;
-  let rowRef = useRef();
-  let cellRef = useRef<DOMRefValue<HTMLDivElement>>();
+  let rowRef = useRef(undefined);
+  let cellRef = useRef<DOMRefValue<HTMLDivElement>>(undefined);
   let unwrappedRef = useUnwrapDOMRef(cellRef);
 
-  let {rowProps} = useGridRow({
+  let {rowProps: gridRowProps} = useGridRow({
     node: item,
     isVirtualized: true
   }, state, rowRef);
@@ -195,6 +207,20 @@ function InternalCard(props) {
     focusMode: 'cell'
   }, state, unwrappedRef);
 
+  // Prevent space key from scrolling the CardView if triggered on a disabled item or on a Card in a selectionMode="none" CardView.
+  let allowsInteraction = state.selectionManager.selectionMode !== 'none';
+  let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
+
+  let onKeyDown = (e) => {
+    if (e.key === ' ' && isDisabled) {
+      e.preventDefault();
+    }
+  };
+
+  let rowProps = mergeProps(
+    gridRowProps,
+    {onKeyDown}
+  );
 
   if (layoutType === 'grid' || layoutType === 'gallery') {
     isQuiet = true;
@@ -222,9 +248,3 @@ function InternalCard(props) {
     </div>
   );
 }
-
-/**
- * TODO: Add description of component here.
- */
-const _CardView = React.forwardRef(CardView) as <T>(props: SpectrumCardViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
-export {_CardView as CardView};

package/src/CardViewContext.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");