@react-spectrum/card 3.0.0-alpha.5 → 3.0.0-alpha.51

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>): void {
     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): void {}
 
-  getContentSize() {
+  getContentSize(): number {
     return this.contentSize;
   }
 
-  getLayoutInfo(key: Key) {
-    return this.layoutInfos.get(key);
+  getLayoutInfo(key: Key): LayoutInfo {
+    return this.layoutInfos.get(key)!;
   }
 
-  getVisibleLayoutInfos(rect) {
+  getVisibleLayoutInfos(rect: Rect, excludePersistedKeys = false): LayoutInfo[] {
     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): 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);
+  _findClosestLayoutInfo(target: Rect, rect: Rect): LayoutInfo | null {
+    let layoutInfos = this.getVisibleLayoutInfos(rect, true);
     let best = null;
     let bestDistance = Infinity;
 
@@ -135,30 +139,30 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
     return best;
   }
 
-  _findClosest(target: Rect, rect: Rect) {
+  _findClosest(target: Rect, rect: Rect): LayoutInfo | null {
     let best = this._findClosestLayoutInfo(target, rect);
     return best || null;
   }
 
-  getKeyBelow(key: Key) {
+  getKeyBelow(key: Key): Node<T> | undefined {
     // Expected key is the currently focused cell so we need the parent row key
     let parentRowKey = this.collection.getItem(key).parentKey;
     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) {
+  getKeyAbove(key: Key): Node<T> | undefined {
     // Expected key is the currently focused cell so we need the parent row key
     let parentRowKey = this.collection.getItem(key).parentKey;
     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) {
+  getKeyRightOf(key: Key): Node<T> | undefined {
     // Expected key is the currently focused cell so we need the parent row key
     let parentRowKey = this.collection.getItem(key).parentKey;
     key = this.direction === 'rtl' ?  this.collection.getKeyBefore(parentRowKey) : this.collection.getKeyAfter(parentRowKey);
@@ -167,13 +171,13 @@ 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);
     }
   }
 
-  getKeyLeftOf(key: Key) {
+  getKeyLeftOf(key: Key): Node<T> | undefined {
     // Expected key is the currently focused cell so we need the parent row key
     let parentRowKey = this.collection.getItem(key).parentKey;
     key = this.direction === 'rtl' ?  this.collection.getKeyAfter(parentRowKey) : this.collection.getKeyBefore(parentRowKey);
@@ -181,26 +185,26 @@ 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);
     }
   }
 
-  getFirstKey() {
+  getFirstKey(): Node<T> | undefined {
     let firstRow = this.collection.getItem(this.collection.getFirstKey());
-    return firstRow.childNodes[0].key;
+    return getFirstItem(getChildNodes(firstRow, this.collection))?.key;
   }
 
-  getLastKey() {
+  getLastKey(): Node<T> | undefined {
     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
   // Perhaps have layoutInfo store childKey as well so we don't need to do this? Or maybe make the layoutInfos be the cells instead of the rows?
-  getKeyPageAbove(key: Key) {
+  getKeyPageAbove(key: Key): Node<T> | undefined {
     // Expected key is the currently focused cell so we need the parent row key
     let parentRowKey = this.collection.getItem(key).parentKey;
     let layoutInfo = this.getLayoutInfo(parentRowKey);
@@ -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;
       }
     }
@@ -231,7 +235,7 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
 
   // TODO: pretty unwieldy because it needs to bounce back and forth between the parent key and the child key
   // Perhaps have layoutInfo store childKey as well so we don't need to do this?
-  getKeyPageBelow(key: Key) {
+  getKeyPageBelow(key: Key): Node<T> | undefined {
     // Expected key is the currently focused cell so we need the parent row key
     let parentRowKey = this.collection.getItem(key).parentKey;
     let layoutInfo = this.getLayoutInfo(parentRowKey);
@@ -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;
       }
     }
@@ -258,7 +262,7 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
     return this.getLastKey();
   }
 
-  getKeyForSearch(search: string, fromKey?: Key) {
+  getKeyForSearch(search: string, fromKey?: Key): Node<T> | undefined | null {
     if (!this.collator) {
       return null;
     }
@@ -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;
@@ -36,7 +39,7 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
   let {
     isQuiet,
     orientation = 'vertical',
-    articleProps = {},
+    articleProps = {role: 'article'},
     item,
     layout,
     children
@@ -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(() => {
@@ -111,7 +115,7 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
 
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
-      <article
+      <div
         {...styleProps}
         {...mergeProps(cardProps, focusWithinProps, hoverProps, filterDOMProps(props), articleProps)}
         ref={domRef}
@@ -147,10 +151,10 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
           </SlotProvider>
           <div className={classNames(styles, 'spectrum-Card-decoration')} />
         </div>
-      </article>
+      </div>
     </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");
@@ -12,8 +13,15 @@
 
 import React, {useContext} from 'react';
 
-export const CardViewContext = React.createContext(null);
+export interface CardViewContextValue {
+  state: 'idle' | 'loading' | 'error',
+  isQuiet: boolean,
+  layout: 'grid' | 'gallery' | 'waterfall',
+  cardOrientation: 'horizontal' | 'vertical',
+  renderEmptyState: () => React.ReactNode
+}
+export const CardViewContext = React.createContext<CardViewContextValue>(null);
 
-export function useCardViewContext() {
+export function useCardViewContext(): CardViewContextValue | null {
   return useContext(CardViewContext);
 }

package/src/GalleryLayout.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");
@@ -86,7 +87,7 @@ export class GalleryLayout<T> extends BaseLayout<T> {
     this.margin = options.margin != null ? options.margin : DEFAULT_OPTIONS[cardSize].margin;
   }
 
-  get layoutType() {
+  get layoutType(): string {
     return 'gallery';
   }
 
@@ -95,7 +96,7 @@ export class GalleryLayout<T> extends BaseLayout<T> {
    * the widest in the row until it can't give anymore, then move to the second widest and so forth.
    * Do this until all assets meet the min-width.
    * */
-  _distributeWidths(widths) {
+  _distributeWidths(widths: number[]): boolean {
     // create a copy of the widths array and sort it largest to smallest
     let sortedWidths = widths.concat().sort((a, b) => a[1] > b[1] ? -1 : 1);
     for (let width of widths) {
@@ -109,6 +110,7 @@ export class GalleryLayout<T> extends BaseLayout<T> {
           if (widths[item[0]][1] > this.minItemSize.width) {
             // subtract the delta from the width, if it's still greater than the min width
             // then we have finished, subtract the delta permanently from that width
+            // eslint-disable-next-line max-depth
             if (widths[item[0]][1] - delta > this.minItemSize.width) {
               widths[item[0]][1] -= delta;
               delta = 0;
@@ -132,13 +134,13 @@ export class GalleryLayout<T> extends BaseLayout<T> {
     return true;
   }
 
-  buildCollection() {
+  buildCollection(): void {
     let visibleWidth = this.virtualizer.visibleRect.width;
     let visibleHeight = this.virtualizer.visibleRect.height;
     let y = this.margin;
     let availableWidth = visibleWidth - this.margin * 2;
 
-    // If avaliable width is not greater than 0, skip node layout calculations
+    // If available width is not greater than 0, skip node layout calculations
     if (availableWidth > 0) {
       // Compute aspect ratios for all of the items, and the total width if all items were on in a single row.
       let ratios = [];
@@ -219,7 +221,7 @@ export class GalleryLayout<T> extends BaseLayout<T> {
       if (this.isLoading) {
         let loaderY = y;
         let loaderHeight = 60;
-        // If there aren't any items, make loader take all avaliable room and remove margin from y calculation
+        // If there aren't any items, make loader take all available room and remove margin from y calculation
         // so it doesn't scroll
         if (this.collection.size === 0) {
           loaderY = 0;