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

package/dist/types.d.ts

@@ -1,8 +1,9 @@
-import { DOMRefValue, Direction, KeyboardDelegate, Node } from "@react-types/shared";
+import { DOMRefValue, Direction, KeyboardDelegate, Node, Orientation } from "@react-types/shared";
 import React, { Key } from "react";
 import { SpectrumCardViewProps } 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.
  */
@@ -11,6 +12,12 @@ export const CardView: <T>(props: SpectrumCardViewProps<T> & {
 }) => 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>)>;
 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;
@@ -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
@@ -179,7 +177,6 @@ export interface WaterfallLayoutOptions extends BaseLayoutOptions {
 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;

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"],"sourcesContent":[null,null,null,null,null,null,null,null,null],"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.1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -33,23 +33,24 @@
   "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-aria/grid": "^3.1.0",
+    "@react-aria/i18n": "^3.3.3",
+    "@react-aria/interactions": "^3.7.0",
+    "@react-aria/utils": "^3.10.0",
+    "@react-aria/virtualizer": "^3.3.5",
     "@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-spectrum/utils": "^3.6.3",
     "@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-stately/grid": "^3.1.0",
+    "@react-stately/list": "^3.4.0",
+    "@react-stately/utils": "^3.3.0",
+    "@react-stately/virtualizer": "^3.1.6",
+    "@react-types/card": "3.0.0-alpha.1",
+    "@react-types/provider": "^3.3.2",
+    "@react-types/shared": "^3.10.0"
   },
   "devDependencies": {
     "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
@@ -61,5 +62,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9397d0262111f7207cb1ee2cbdda86cd5d180298"
+  "gitHead": "896eabe5521a0349a675c4773ed7629addd4b8c4"
 }

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/CardBase.tsx

@@ -15,9 +15,9 @@ 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 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;
@@ -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 = {

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,12 @@ function InternalCard(props) {
     isQuiet = true;
   }
 
+  if (layoutType !== 'grid') {
+    cardOrientation = 'vertical';
+  }
+
   return (
-    <div {...rowProps} ref={rowRef} style={{height: '100%'}}>
+    <div {...rowProps} ref={rowRef} className={classNames(styles, 'spectrum-CardView-row')}>
       <CardBase
         ref={cellRef}
         articleProps={gridCellProps}

package/src/GalleryLayout.tsx

@@ -43,22 +43,14 @@ export interface GalleryLayoutOptions extends BaseLayoutOptions {
    * will be targeted.
    * @type {number}
    */
-  threshold?: number,
-  /**
-   * The margin around the grid view between the edges and the items.
-   * @default 24
-   */
-  margin?: number // TODO: Perhaps should accept Responsive<DimensionValue>
+  threshold?: number
 }
 
-// TODO: copied from V2, update this with the proper spectrum values
-// Should these be affected by Scale as well?
 const DEFAULT_OPTIONS = {
   S: {
     idealRowHeight: 112,
     minItemSize: new Size(96, 96),
     itemSpacing: new Size(8, 16),
-    // TODO: will need to update as well
     itemPadding: 24,
     dropSpacing: 50,
     margin: 8
@@ -67,8 +59,10 @@ const DEFAULT_OPTIONS = {
     idealRowHeight: 208,
     minItemSize: new Size(136, 136),
     itemSpacing: new Size(18, 18),
-    // TODO: updated to work with new v3 cards (there is additional space required for the descriptions if there is a description)
-    itemPadding: 114,
+    itemPadding: {
+      'medium': 114,
+      'large': 143
+    },
     dropSpacing: 100,
     margin: 24
   }
@@ -76,7 +70,6 @@ const DEFAULT_OPTIONS = {
 
 export class GalleryLayout<T> extends BaseLayout<T> {
   protected idealRowHeight: number;
-  protected margin: number;
   protected itemSpacing: Size;
   itemPadding: number;
   protected minItemSize: Size;
@@ -84,11 +77,10 @@ export class GalleryLayout<T> extends BaseLayout<T> {
 
   constructor(options: GalleryLayoutOptions = {}) {
     super(options);
-    // TODO: restore cardSize option when we support different size cards
     let cardSize = 'L';
     this.idealRowHeight = options.idealRowHeight || DEFAULT_OPTIONS[cardSize].idealRowHeight;
     this.itemSpacing = options.itemSpacing || DEFAULT_OPTIONS[cardSize].itemSpacing;
-    this.itemPadding = options.itemPadding != null ? options.itemPadding : DEFAULT_OPTIONS[cardSize].itemPadding;
+    this.itemPadding = options.itemPadding != null ? options.itemPadding : DEFAULT_OPTIONS[cardSize].itemPadding[this.scale];
     this.minItemSize = options.minItemSize || DEFAULT_OPTIONS[cardSize].minItemSize;
     this.threshold = options.threshold || 1;
     this.margin = options.margin != null ? options.margin : DEFAULT_OPTIONS[cardSize].margin;
@@ -213,6 +205,7 @@ export class GalleryLayout<T> extends BaseLayout<T> {
         let itemWidth = Math.max(widths[j - index][1], this.minItemSize.width);
         let rect = new Rect(x, y, itemWidth, itemHeight);
         let layoutInfo = new LayoutInfo(node.type, node.key, rect);
+        layoutInfo.allowOverflow = true;
         this.layoutInfos.set(node.key, layoutInfo);
         x += itemWidth + this.itemSpacing.width;
       }

package/src/GridLayout.tsx

@@ -13,7 +13,7 @@
 import {BaseLayout, BaseLayoutOptions} from './BaseLayout';
 import {Key} from 'react';
 import {LayoutInfo, Rect, Size} from '@react-stately/virtualizer';
-import {Node} from '@react-types/shared';
+import {Node, Orientation} from '@react-types/shared';
 
 export interface GridLayoutOptions extends BaseLayoutOptions {
   // /**
@@ -22,7 +22,7 @@ export interface GridLayoutOptions extends BaseLayoutOptions {
   // cardSize?: 'S' | 'M' | 'L',
   /**
    * 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,
   /**
@@ -30,11 +30,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, // TODO: Perhaps should accept Responsive<DimensionValue>
   /**
    * The minimum space required between items.
    * @default 18 x 18
@@ -46,18 +41,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
+  itemPadding?: number,
+  /**
+   * The orientation of the cards withn the grid.
+   * @default vertical
+   */
+  cardOrientation?: Orientation
 }
 
-// TODO: copied from V2, update this with the proper spectrum values
-// Should these be affected by Scale as well?
 const DEFAULT_OPTIONS = {
   S: {
     itemPadding: 20,
-    minItemSize: new Size(96, 96),
+    minItemSize: {
+      'vertical': new Size(96, 96)
+    },
     maxItemSize: new Size(Infinity, Infinity),
     margin: 8,
     minSpace: new Size(6, 6),
@@ -65,10 +65,20 @@ const DEFAULT_OPTIONS = {
     dropSpacing: 50
   },
   L: {
-    // TODO: for now bumping this higher since the new cards have more stuff in the content area.
-    // Will need to ask Spectrum what these values should be. Used to be 52. Do the same for S above
-    itemPadding: 95,
-    minItemSize: new Size(208, 208),
+    itemPadding: {
+      'vertical': {
+        'medium': 78,
+        'large': 98
+      },
+      'horizontal': {
+        'medium': 150,
+        'large': 170
+      }
+    },
+    minItemSize: {
+      'vertical': new Size(208, 208),
+      'horizontal': new Size(102, 102)
+    },
     maxItemSize: new Size(Infinity, Infinity),
     margin: 24,
     minSpace: new Size(18, 18),
@@ -80,10 +90,10 @@ const DEFAULT_OPTIONS = {
 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;
@@ -91,14 +101,14 @@ export class GridLayout<T> extends BaseLayout<T> {
 
   constructor(options: GridLayoutOptions = {}) {
     super(options);
-    // TODO: restore cardSize option when we support different size cards
     let cardSize = 'L';
-    this.minItemSize = options.minItemSize || DEFAULT_OPTIONS[cardSize].minItemSize;
+    this.cardOrientation = options.cardOrientation || 'vertical';
+    this.minItemSize = options.minItemSize || DEFAULT_OPTIONS[cardSize].minItemSize[this.cardOrientation];
     this.maxItemSize = options.maxItemSize || DEFAULT_OPTIONS[cardSize].maxItemSize;
     this.margin = options.margin != null ? options.margin : DEFAULT_OPTIONS[cardSize].margin;
     this.minSpace = options.minSpace || DEFAULT_OPTIONS[cardSize].minSpace;
     this.maxColumns = options.maxColumns || DEFAULT_OPTIONS[cardSize].maxColumns;
-    this.itemPadding = options.itemPadding != null ? options.itemPadding : DEFAULT_OPTIONS[cardSize].itemPadding;
+    this.itemPadding = options.itemPadding != null ? options.itemPadding : DEFAULT_OPTIONS[cardSize].itemPadding[this.cardOrientation][this.scale];
     this.itemSize = null;
     this.numColumns = 0;
     this.numRows = 0;
@@ -109,7 +119,6 @@ export class GridLayout<T> extends BaseLayout<T> {
     return 'grid';
   }
 
-  // TODO: Below functions From V2 Maybe don't need this? Might be a short cut for getting all visible rects since otherwise we'd have to iterate across all nodes
   getIndexAtPoint(x, y, allowInsertingAtEnd = false) {
     let itemHeight = this.itemSize.height + this.minSpace.height;
     let itemWidth = this.itemSize.width + this.horizontalSpacing;
@@ -141,7 +150,7 @@ export class GridLayout<T> extends BaseLayout<T> {
       for (let index = firstVisibleItem; index <= lastVisibleItem; index++) {
         let keyFromIndex = this.collection.rows[index].key;
         let layoutInfo = this.layoutInfos.get(keyFromIndex);
-        if (this.isVisible(layoutInfo, rect)) {
+        if (layoutInfo && this.isVisible(layoutInfo, rect)) {
           res.push(layoutInfo);
         }
       }
@@ -159,10 +168,13 @@ export class GridLayout<T> extends BaseLayout<T> {
   buildCollection() {
     let visibleWidth = this.virtualizer.visibleRect.width;
     let visibleHeight = this.virtualizer.visibleRect.height;
+    let horizontalItemPadding = this.cardOrientation === 'horizontal' ? this.itemPadding : 0;
+    let verticalItemPadding = this.cardOrientation === 'vertical' ? this.itemPadding : 0;
+    let minCardWidth = this.minItemSize.width + horizontalItemPadding;
 
     // Compute the number of rows and columns needed to display the content
     let availableWidth = visibleWidth - this.margin * 2;
-    let columns = Math.floor((availableWidth + this.minSpace.width) / (this.minItemSize.width + this.minSpace.width));
+    let columns = Math.floor((availableWidth + this.minSpace.width) / (minCardWidth + this.minSpace.width));
     this.numColumns = Math.max(1, Math.min(this.maxColumns, columns));
     this.numRows = Math.ceil(this.collection.size / this.numColumns);
 
@@ -171,13 +183,11 @@ export class GridLayout<T> extends BaseLayout<T> {
 
     // Compute the item width based on the space available
     let itemWidth = Math.floor(width / this.numColumns);
-    itemWidth = Math.max(this.minItemSize.width, Math.min(this.maxItemSize.width, itemWidth));
-
+    itemWidth = Math.max(minCardWidth, Math.min(this.maxItemSize.width, itemWidth));
     // Compute the item height, which is proportional to the item width
-    let t = ((itemWidth - this.minItemSize.width) / this.minItemSize.width);
-    let itemHeight = this.minItemSize.height + this.minItemSize.height * t;
-    itemHeight = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, itemHeight)) + this.itemPadding;
-
+    let t = ((itemWidth - minCardWidth) / minCardWidth);
+    let itemHeight = Math.floor(this.minItemSize.height + this.minItemSize.height * t);
+    itemHeight = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, itemHeight)) + verticalItemPadding;
     this.itemSize = new Size(itemWidth, itemHeight);
 
     // Compute the horizontal spacing and content height
@@ -226,6 +236,7 @@ export class GridLayout<T> extends BaseLayout<T> {
     let rect = new Rect(x, y, this.itemSize.width, this.itemSize.height);
     // TODO: Perhaps have it so that the child key for each row is stored with the layoutInfo?
     let layoutInfo = new LayoutInfo(node.type, node.key, rect);
+    layoutInfo.allowOverflow = true;
     this.layoutInfos.set(node.key, layoutInfo);
     return layoutInfo;
   }

package/src/WaterfallLayout.tsx

@@ -26,11 +26,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, // TODO: Perhaps should accept Responsive<DimensionValue>
   /**
    * The minimum space required between items.
    * @default 18 x 18
@@ -52,7 +47,6 @@ export interface WaterfallLayoutOptions extends BaseLayoutOptions {
 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;
@@ -133,6 +127,7 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
       let rect = new Rect(x, y, itemWidth, height);
       let layoutInfo = new LayoutInfo(node.type, key, rect);
       layoutInfo.estimatedSize = estimatedSize;
+      layoutInfo.allowOverflow = true;
       this.layoutInfos.set(key, layoutInfo);
 
       // TODO: From v2 figure out this bit, when does this get called and what to replace this.collectionView._transaction with?