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

package/dist/types.d.ts

@@ -1,16 +1,23 @@
-import { DOMRefValue, Direction, KeyboardDelegate, Node } from "@react-types/shared";
-import React, { Key } from "react";
-import { SpectrumCardViewProps } from "@react-types/card";
+import { DOMRef, Direction, KeyboardDelegate, Node, Orientation, DOMRefValue, ItemProps } from "@react-types/shared";
+import React, { ReactElement, Key } from "react";
+import { SpectrumCardViewProps, SpectrumCardProps } from "@react-types/card";
 import { GridCollection } from "@react-stately/grid";
 import { InvalidationContext, Layout, LayoutInfo, Rect, Size } from "@react-stately/virtualizer";
+import { Scale } from "@react-types/provider";
 /**
  * TODO: Add description of component here.
  */
 export const CardView: <T>(props: SpectrumCardViewProps<T> & {
-    ref?: React.Ref<DOMRefValue<HTMLDivElement>>;
-}) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+    ref?: DOMRef<HTMLDivElement>;
+}) => ReactElement;
 interface BaseLayoutOptions {
     collator?: Intl.Collator;
+    scale?: Scale;
+    /**
+     * The margin around the grid view between the edges and the items.
+     * @default 24
+     */
+    margin?: number;
 }
 declare class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
     protected contentSize: Size;
@@ -21,6 +28,8 @@ declare class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate
     isLoading: boolean;
     disabledKeys: Set<Key>;
     direction: Direction;
+    scale: Scale;
+    margin: number;
     constructor(options?: BaseLayoutOptions);
     validate(invalidationContext: InvalidationContext<Node<T>, unknown>): void;
     buildCollection(invalidationContext?: InvalidationContext<Node<T>, unknown>): void;
@@ -40,7 +49,7 @@ declare class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate
     getLastKey(): any;
     getKeyPageAbove(key: Key): any;
     getKeyPageBelow(key: Key): any;
-    getKeyForSearch(search: string, fromKey?: Key): string | number;
+    getKeyForSearch(search: string, fromKey?: Key): Key;
 }
 export interface GalleryLayoutOptions extends BaseLayoutOptions {
     /**
@@ -55,7 +64,7 @@ export interface GalleryLayoutOptions extends BaseLayoutOptions {
     itemSpacing?: Size;
     /**
      * The vertical padding for an item.
-     * @default 114
+     * @default 78
      */
     itemPadding?: number;
     /**
@@ -69,15 +78,9 @@ export interface GalleryLayoutOptions extends BaseLayoutOptions {
      * @type {number}
      */
     threshold?: number;
-    /**
-     * The margin around the grid view between the edges and the items.
-     * @default 24
-     */
-    margin?: number;
 }
 export class GalleryLayout<T> extends BaseLayout<T> {
     protected idealRowHeight: number;
-    protected margin: number;
     protected itemSpacing: Size;
     itemPadding: number;
     protected minItemSize: Size;
@@ -95,7 +98,7 @@ export class GalleryLayout<T> extends BaseLayout<T> {
 export interface GridLayoutOptions extends BaseLayoutOptions {
     /**
      * The minimum item size.
-     * @default 208 x 208
+     * @default 208 x 208 for horizontal card orientation. 102 x 102 for vertical card orientation.
      */
     minItemSize?: Size;
     /**
@@ -103,11 +106,6 @@ export interface GridLayoutOptions extends BaseLayoutOptions {
      * @default Infinity
      */
     maxItemSize?: Size;
-    /**
-     * The margin around the grid view between the edges and the items.
-     * @default 24
-     */
-    margin?: number;
     /**
      * The minimum space required between items.
      * @default 18 x 18
@@ -119,18 +117,23 @@ export interface GridLayoutOptions extends BaseLayoutOptions {
      */
     maxColumns?: number;
     /**
-     * The vertical padding for an item.
+     * The additional padding along the card's main axis. Affects the sizing of the content area following the card image.
      * @default 95
      */
     itemPadding?: number;
+    /**
+     * The orientation of the cards withn the grid.
+     * @default vertical
+     */
+    cardOrientation?: Orientation;
 }
 export class GridLayout<T> extends BaseLayout<T> {
     protected minItemSize: Size;
     protected maxItemSize: Size;
-    protected margin: number;
     protected minSpace: Size;
     protected maxColumns: number;
     itemPadding: number;
+    cardOrientation: Orientation;
     protected itemSize: Size;
     protected numColumns: number;
     protected numRows: number;
@@ -155,11 +158,6 @@ export interface WaterfallLayoutOptions extends BaseLayoutOptions {
      * @default Infinity
      */
     maxItemSize?: Size;
-    /**
-     * The margin around the grid view between the edges and the items.
-     * @default 24
-     */
-    margin?: number;
     /**
      * The minimum space required between items.
      * @default 18 x 18
@@ -170,19 +168,12 @@ export interface WaterfallLayoutOptions extends BaseLayoutOptions {
      * @default Infinity
      */
     maxColumns?: number;
-    /**
-     * The vertical padding for an item.
-     * @default 56
-     */
-    itemPadding?: number;
 }
 export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegate {
     protected minItemSize: Size;
     protected maxItemSize: Size;
-    protected margin: number;
     protected minSpace: Size;
     protected maxColumns: number;
-    itemPadding: number;
     protected numColumns: number;
     protected itemWidth: number;
     protected horizontalSpacing: number;
@@ -196,6 +187,6 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
     getKeyRightOf(key: Key): any;
     getKeyLeftOf(key: Key): any;
 }
-export let Card: <T>(props: any, ref: any) => JSX.Element;
+export let Card: React.ForwardRefExoticComponent<ItemProps<SpectrumCardProps> & SpectrumCardProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
 
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":"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","sources":["./packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/CardViewContext.tsx","./packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/CardBase.tsx","./packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/CardView.tsx","./packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/BaseLayout.tsx","./packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/GalleryLayout.tsx","./packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/GridLayout.tsx","./packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/WaterfallLayout.tsx","./packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/Card.tsx","./packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/CardViewContext.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/CardBase.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/CardView.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/BaseLayout.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/GalleryLayout.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/GridLayout.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/WaterfallLayout.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/Card.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/index.ts","packages/@react-spectrum/card/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,"/*\n * Copyright 2021 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/// <reference types=\"css-module-types\" />\n\nexport * from './CardView';\nexport * from './GalleryLayout';\nexport * from './GridLayout';\nexport * from './WaterfallLayout';\nexport * from './Card';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/card",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.4",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -32,24 +32,25 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/focus": "^3.4.0",
-    "@react-aria/grid": "^3.0.0",
-    "@react-aria/i18n": "^3.3.2",
-    "@react-aria/interactions": "^3.5.0",
-    "@react-aria/utils": "^3.0.0",
-    "@react-aria/virtualizer": "^3.3.4",
-    "@react-spectrum/checkbox": "^3.2.3",
-    "@react-spectrum/divider": "^3.1.2",
-    "@react-spectrum/layout": "^3.2.0",
-    "@react-spectrum/progress": "^3.1.3",
-    "@react-spectrum/utils": "^3.0.0",
-    "@react-stately/collections": "^3.3.4",
-    "@react-stately/grid": "^3.0.0",
-    "@react-stately/list": "^3.3.0",
-    "@react-stately/utils": "^3.2.1",
-    "@react-stately/virtualizer": "^3.1.5",
-    "@react-types/card": "3.0.0-alpha.0",
-    "@react-types/shared": "^3.0.0"
+    "@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"
   },
   "devDependencies": {
     "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
@@ -61,5 +62,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9397d0262111f7207cb1ee2cbdda86cd5d180298"
+  "gitHead": "b98f0e60590d784afd54140916576021d4c1bfd7"
 }

package/src/BaseLayout.tsx

@@ -14,9 +14,17 @@ import {Direction, KeyboardDelegate, Node} from '@react-types/shared';
 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 {
-  collator?: Intl.Collator
+  collator?: Intl.Collator,
+  // TODO: is this valid or is scale a spectrum specific thing that should be left out of the layouts?
+  scale?: Scale,
+  /**
+   * The margin around the grid view between the edges and the items.
+   * @default 24
+   */
+  margin?: number
 }
 
 export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
@@ -28,12 +36,16 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
   isLoading: boolean;
   disabledKeys: Set<Key> = new Set();
   direction: Direction;
+  scale: Scale;
+  margin: number;
 
   constructor(options: BaseLayoutOptions = {}) {
     super();
     this.layoutInfos = new Map();
     this.collator = options.collator;
     this.lastCollection = null;
+    this.scale = options.scale || 'medium';
+    this.margin = options.margin || 24;
   }
 
   validate(invalidationContext: InvalidationContext<Node<T>, unknown>) {

package/src/Card.tsx

@@ -10,14 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-
 import {CardBase} from './CardBase';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue, ItemProps} from '@react-types/shared';
 import {PartialNode} from '@react-stately/collections';
-import React, {forwardRef} from 'react';
+import React, {forwardRef, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes} from 'react';
 import {SpectrumCardProps} from '@react-types/card';
 import {useCardViewContext} from './CardViewContext';
 
+
 let Card = forwardRef((props: SpectrumCardProps, ref: DOMRef<HTMLDivElement>) => {
   let context = useCardViewContext();
   if (context !== null) {
@@ -29,10 +29,8 @@ let Card = forwardRef((props: SpectrumCardProps, ref: DOMRef<HTMLDivElement>) =>
   }
 });
 
-// TODO: Update the typescript for the below and the export
 // @ts-ignore
-// eslint-disable-next-line
-Card.getCollectionNode = function* getCollectionNode<T>(props, context: any): Generator<PartialNode<T>> {
+Card.getCollectionNode = function* getCollectionNode<T>(props: any): Generator<PartialNode<T>> {
   let {children, textValue} = props;
 
   yield {
@@ -45,6 +43,5 @@ Card.getCollectionNode = function* getCollectionNode<T>(props, context: any): Ge
   };
 };
 
-// eslint-disable-next-line
-let _Card = Card as <T>(props, ref) => JSX.Element;
+let _Card = Card as ForwardRefExoticComponent<ItemProps<SpectrumCardProps> & PropsWithoutRef<SpectrumCardProps> & RefAttributes<DOMRefValue<HTMLDivElement>>>;
 export {_Card as Card};

package/src/CardBase.tsx

@@ -13,11 +13,11 @@
 import {AriaCardProps, SpectrumCardProps} from '@react-types/card';
 import {Checkbox} from '@react-spectrum/checkbox';
 import {classNames, SlotProvider, useDOMRef, useHasChild, useStyleProps} from '@react-spectrum/utils';
-import {Divider} from '@react-spectrum/divider';
 import {DOMRef, Node} from '@react-types/shared';
-import {filterDOMProps, mergeProps, useLayoutEffect, useSlotId} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, useLayoutEffect, useResizeObserver, useSlotId} from '@react-aria/utils';
 import {FocusRing} from '@react-aria/focus';
-import React, {HTMLAttributes, useMemo, useRef, useState} from 'react';
+import {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';
 import {useFocusWithin, useHover} from '@react-aria/interactions';
@@ -30,7 +30,6 @@ interface CardBaseProps<T> extends SpectrumCardProps {
 
 function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
-  // TODO: Don't send in articleProps via context (unless we want to make another context for InternalCard)? Pass it in via props since it will only be provided via CardView's InternalCard
   let context = useCardViewContext() || {}; // we can call again here, won't change from Card.tsx
   let {state} = context;
   let manager = state?.selectionManager;
@@ -39,7 +38,8 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
     orientation = 'vertical',
     articleProps = {},
     item,
-    layout
+    layout,
+    children
   } = props;
 
   let key = item?.key;
@@ -51,6 +51,7 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
   let {cardProps, titleProps, contentProps} = useCard(props);
   let domRef = useDOMRef(ref);
   let gridRef = useRef<HTMLDivElement>();
+  let checkboxRef = useRef(null);
 
   // cards are only interactive if there is a selection manager and it allows selection
   let {hoverProps, isHovered} = useHover({isDisabled: manager === undefined || manager?.selectionMode === 'none' || isDisabled});
@@ -60,8 +61,6 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
     isDisabled
   });
 
-  let hasFooter = useHasChild(`.${styles['spectrum-Card-footer']}`, gridRef);
-
   // ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default
   let hasPreviewImage = useHasChild(`.${styles['spectrum-Card-image']}`, gridRef);
   let hasPreviewIllustration = useHasChild(`.${styles['spectrum-Card-illustration']}`, gridRef);
@@ -69,13 +68,16 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
 
   // this is for horizontal cards
   let [height, setHeight] = useState(NaN);
-  useLayoutEffect(() => {
+  let updateHeight = useCallback(() => {
     if (orientation !== 'horizontal') {
       return;
     }
+
     let cardHeight = gridRef.current.getBoundingClientRect().height;
     setHeight(cardHeight);
-  }, [gridRef, setHeight, orientation]);
+  }, [orientation, gridRef, setHeight]);
+  useResizeObserver({ref: gridRef, onResize: updateHeight});
+
   let aspectRatioEnforce = undefined;
   if (orientation === 'horizontal' && !isNaN(height)) {
     aspectRatioEnforce = {
@@ -90,63 +92,22 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
     avatar: {UNSAFE_className: classNames(styles, 'spectrum-Card-avatar'), size: 'avatar-size-400'},
     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')},
-    actionmenu: {UNSAFE_className: classNames(styles, 'spectrum-Card-actions'), align: 'end', isQuiet: true},
-    footer: {UNSAFE_className: classNames(styles, 'spectrum-Card-footer'), isHidden: isQuiet},
-    divider: {UNSAFE_className: classNames(styles, 'spectrum-Card-divider'), size: 'S'}
+    detail: {UNSAFE_className: classNames(styles, 'spectrum-Card-detail')}
   }), [titleProps, contentProps, height, isQuiet, orientation]);
 
-  // This is only for quiet grid cards
-  let [isCloseToSquare, setIsCloseToSquare] = useState(false);
   useLayoutEffect(() => {
-    if (!(layout === 'grid' && isQuiet)) {
-      return;
-    }
-    // ToDo: how to handle illustrations? what if the illustration looks like an image? What about swatches/fonts https://spectrum-contributions.corp.adobe.com/page/asset-card-beta/#File-type
-    let image = gridRef.current.querySelector(`.${styles['spectrum-Card-image']} img`) as HTMLImageElement;
-    if (!image) {
-      return;
-    }
-    let measure = () => {
-      let height = image.naturalHeight;
-      let width = image.naturalWidth;
-      /*
-      * ToDo: Choose between min-padding and plain ratio
-      * Do we want to just do a ratio measurement when it's close to being a square?
-      * or do we want to actually figure out min-padding?
-      * Min Padding would require us to check that the padding is not less than the min in both Vertical and Horizontal
-      * Unfortunately img contain doesn't actually create padding, which is what this math below can figure out
-      * Vs the commented out straight ratio check
-      * */
-      let imgTagHeight = image.clientHeight;
-      let imgTagWidth = image.clientWidth;
-      let ratio = Math.min(imgTagWidth / width, imgTagHeight / height);
-      let trueHeight = ratio * height;
-      let trueWidth = ratio * width;
-      let paddingVertical = imgTagHeight - trueHeight;
-      let paddingHorizontal = imgTagWidth - trueWidth;
-      if (paddingVertical < 16 && paddingHorizontal < 16) { // ToDo: does this need to be different per scale?
-        setIsCloseToSquare(true);
-      } else {
-        setIsCloseToSquare(false);
+    if (gridRef?.current) {
+      let walker = getFocusableTreeWalker(gridRef.current);
+      let nextNode = walker.nextNode();
+      while (nextNode != null) {
+        if (checkboxRef.current && !checkboxRef.current.UNSAFE_getDOMNode().contains(nextNode)) {
+          console.warn('Card does not support focusable elements, please contact the team regarding your use case.');
+          break;
+        }
+        nextNode = walker.nextNode();
       }
-
-      // let ratio = height / width;
-      // if (ratio > 0.9 && ratio < 1.1) {
-      //   setIsCloseToSquare(true);
-      // }
-    };
-    if (image.complete) {
-      measure();
-    } else {
-      image.addEventListener('load', measure);
-      return () => {
-        image.removeEventListener('load', measure);
-      };
     }
-    // ToDo: how to re-run if image src changes?
-  }, [props.children, setIsCloseToSquare, isQuiet, layout]);
-
+  }, [children]);
 
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
@@ -158,7 +119,6 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
           'spectrum-Card--default': !isQuiet && orientation !== 'horizontal',
           'spectrum-Card--isQuiet': isQuiet && orientation !== 'horizontal',
           'spectrum-Card--horizontal': orientation === 'horizontal',
-          'spectrum-Card--closeToSquare': isCloseToSquare,
           'spectrum-Card--noPreview': !hasPreview,
           'is-hovered': isHovered,
           'is-focused': isFocused,
@@ -172,6 +132,7 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
           {manager && manager.selectionMode !== 'none' && (
             <div className={classNames(styles, 'spectrum-Card-checkboxWrapper')}>
               <Checkbox
+                ref={checkboxRef}
                 isDisabled={isDisabled}
                 excludeFromTabOrder
                 isSelected={isSelected}
@@ -182,8 +143,7 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
             </div>
           )}
           <SlotProvider slots={slots}>
-            {props.children}
-            {hasFooter && <Divider />}
+            {children}
           </SlotProvider>
           <div className={classNames(styles, 'spectrum-Card-decoration')} />
         </div>

package/src/CardView.tsx

@@ -12,16 +12,16 @@
 
 import {CardBase} from './CardBase';
 import {CardViewContext, useCardViewContext} from './CardViewContext';
-import cardViewStyles from './cardview.css';
 import {classNames, useDOMRef, useStyleProps, useUnwrapDOMRef} from '@react-spectrum/utils';
 import {DOMRef, DOMRefValue, Node} from '@react-types/shared';
 import {GridCollection, useGridState} from '@react-stately/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {ProgressCircle} from '@react-spectrum/progress';
-import React, {ReactElement, useMemo, useRef} from 'react';
+import React, {ReactElement, 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 {useGrid, useGridCell, useGridRow} from '@react-aria/grid';
 import {useListState} from '@react-stately/list';
@@ -37,21 +37,15 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
     renderEmptyState,
     layout,
     loadingState,
-    onLoadMore
+    onLoadMore,
+    cardOrientation = 'vertical'
   } = props;
+
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
-  let cardViewLayout = useMemo(() => typeof layout === 'function' ? new layout({collator}) : layout, [layout, collator]);
+  let cardViewLayout = useMemo(() => typeof layout === 'function' ? new layout({collator, cardOrientation, scale}) : layout, [layout, collator, cardOrientation, scale]);
   let layoutType = cardViewLayout.layoutType;
 
-  if (typeof layout === 'function') {
-    if (layoutType === 'grid') {
-      cardViewLayout.itemPadding = scale === 'large' ? 116 : 95;
-    } else if (layoutType === 'gallery') {
-      cardViewLayout.itemPadding = scale === 'large' ? 143 : 114;
-    }
-  }
-
   let formatMessage = useMessageFormatter(intlMessages);
   let {direction} = useLocale();
   let {collection} = useListState(props);
@@ -77,7 +71,9 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
 
   let state = useGridState({
     ...props,
-    collection: gridCollection
+    selectionMode: cardOrientation === 'horizontal' && layoutType === 'grid' ? 'none' : props.selectionMode,
+    collection: gridCollection,
+    focusMode: 'cell'
   });
 
   cardViewLayout.collection = gridCollection;
@@ -94,7 +90,6 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
   type View = ReusableView<Node<T>, unknown>;
   let renderWrapper = (parent: View, reusableView: View) => (
     <VirtualizerItem
-      className={classNames(cardViewStyles, 'react-spectrum-CardView-CardWrapper')}
       key={reusableView.key}
       reusableView={reusableView}
       parent={parent} />
@@ -106,13 +101,22 @@ 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]);
+
   // 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}}>
+    <CardViewContext.Provider value={{state, isQuiet, layout: cardViewLayout, cardOrientation}}>
       <Virtualizer
         {...gridProps}
         {...styleProps}
-        className={classNames(cardViewStyles, 'react-spectrum-CardView')}
+        className={classNames(styles, 'spectrum-CardView')}
         ref={domRef}
         focusedKey={focusedKey}
         scrollDirection="vertical"
@@ -120,7 +124,9 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
         collection={gridCollection}
         isLoading={isLoading}
         onLoadMore={onLoadMore}
-        renderWrapper={renderWrapper}>
+        renderWrapper={renderWrapper}
+        transitionDuration={isLoading ? 160 : 220}
+        scrollToItem={scrollToItem}>
         {(type, item) => {
           if (type === 'item') {
             return (
@@ -159,7 +165,7 @@ function CenteredWrapper({children}) {
     <div
       role="row"
       aria-rowindex={state.collection.size + 1}
-      className={classNames(cardViewStyles, 'react-spectrum-CardView-centeredWrapper')}>
+      className={classNames(styles, 'spectrum-CardView-centeredWrapper')}>
       <div role="gridcell">
         {children}
       </div>
@@ -194,8 +200,16 @@ function InternalCard(props) {
     isQuiet = true;
   }
 
+  if (layoutType !== 'grid') {
+    cardOrientation = 'vertical';
+  }
+
+  // We don't want to focus the checkbox (or any other focusable elements) within the Card
+  // when pressing the arrow keys so we delete the key down handler here. Arrow key navigation between
+  // the cards in the CardView is handled by useGrid => useSelectableCollection instead.
+  delete gridCellProps.onKeyDownCapture;
   return (
-    <div {...rowProps} ref={rowRef} style={{height: '100%'}}>
+    <div {...rowProps} ref={rowRef} className={classNames(styles, 'spectrum-CardView-row')}>
       <CardBase
         ref={cellRef}
         articleProps={gridCellProps}