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

package/src/CardView.tsx

@@ -12,17 +12,18 @@
 
 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 {mergeProps} from '@react-aria/utils';
 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 {useCollator, useLocale, useMessageFormatter} from '@react-aria/i18n';
+import styles from '@adobe/spectrum-css-temp/components/card/vars.css';
+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';
@@ -37,22 +38,16 @@ 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 stringFormatter = useLocalizedStringFormatter(intlMessages);
   let {direction} = useLocale();
   let {collection} = useListState(props);
 
@@ -77,7 +72,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 +91,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 +102,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 +125,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 (
@@ -131,7 +138,7 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
               <CenteredWrapper>
                 <ProgressCircle
                   isIndeterminate
-                  aria-label={state.collection.size > 0 ? formatMessage('loadingMore') : formatMessage('loading')} />
+                  aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')} />
               </CenteredWrapper>
             );
           } else if (type === 'placeholder') {
@@ -159,7 +166,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>
@@ -179,7 +186,7 @@ function InternalCard(props) {
   let cellRef = useRef<DOMRefValue<HTMLDivElement>>();
   let unwrappedRef = useUnwrapDOMRef(cellRef);
 
-  let {rowProps} = useGridRow({
+  let {rowProps: gridRowProps} = useGridRow({
     node: item,
     isVirtualized: true
   }, state, rowRef);
@@ -189,13 +196,35 @@ 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;
   }
 
+  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}

package/src/GalleryLayout.tsx

@@ -30,7 +30,7 @@ export interface GalleryLayoutOptions extends BaseLayoutOptions {
   itemSpacing?: Size,
   /**
    * The vertical padding for an item.
-   * @default 114
+   * @default 78
    */
   itemPadding?: number,
   /**
@@ -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': 78,
+      'large': 99
+    },
     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;
@@ -146,104 +138,107 @@ export class GalleryLayout<T> extends BaseLayout<T> {
     let y = this.margin;
     let availableWidth = visibleWidth - this.margin * 2;
 
-    // Compute aspect ratios for all of the items, and the total width if all items were on in a single row.
-    let ratios = [];
-    let totalWidth = 0;
-    let minRatio = this.minItemSize.width / this.minItemSize.height;
-    let maxRatio = availableWidth / this.minItemSize.height;
-
-    for (let node of this.collection) {
-      let ratio = node.props.width / node.props.height;
-      if (ratio < minRatio) {
-        ratio = minRatio;
-      } else if (ratio > maxRatio && ratio !== minRatio) {
-        ratio = maxRatio;
+    // If avaliable 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 = [];
+      let totalWidth = 0;
+      let minRatio = this.minItemSize.width / this.minItemSize.height;
+      let maxRatio = availableWidth / this.minItemSize.height;
+
+      for (let node of this.collection) {
+        let ratio = node.props.width / node.props.height;
+        if (ratio < minRatio) {
+          ratio = minRatio;
+        } else if (ratio > maxRatio && ratio !== minRatio) {
+          ratio = maxRatio;
+        }
+
+        let itemWidth = ratio * this.minItemSize.height;
+        ratios.push(ratio);
+        totalWidth += itemWidth;
       }
 
-      let itemWidth = ratio * this.minItemSize.height;
-      ratios.push(ratio);
-      totalWidth += itemWidth;
-    }
+      totalWidth += this.itemSpacing.width * (this.collection.size - 1);
 
-    totalWidth += this.itemSpacing.width * (this.collection.size - 1);
+      // Determine how many rows we'll need, and partition the items into rows
+      // using the aspect ratios as weights.
+      let rows = Math.max(1, Math.ceil(totalWidth / availableWidth));
+      // if the available width can't hold two items, then every item will get its own row
+      // this leads to a faster run through linear partition and more dependable output for small row widths
+      if (availableWidth <= (this.minItemSize.width * 2) + (this.itemPadding * 2)) {
+        rows = this.collection.size;
+      }
 
-    // Determine how many rows we'll need, and partition the items into rows
-    // using the aspect ratios as weights.
-    let rows = Math.max(1, Math.ceil(totalWidth / availableWidth));
-    // if the available width can't hold two items, then every item will get its own row
-    // this leads to a faster run through linear partition and more dependable output for small row widths
-    if (availableWidth <= (this.minItemSize.width * 2) + (this.itemPadding * 2)) {
-      rows = this.collection.size;
-    }
+      let weightedRatios = ratios.map(ratio => ratio < this.threshold ? ratio + (0.5 * (1 / ratio)) : ratio);
+      let partition = linearPartition(weightedRatios, rows);
 
-    let weightedRatios = ratios.map(ratio => ratio < this.threshold ? ratio + (0.5 * (1 / ratio)) : ratio);
-    let partition = linearPartition(weightedRatios, rows);
+      let index = 0;
+      for (let row of partition) {
+        // Compute the total weight for this row
+        let totalWeight = 0;
+        for (let j = index; j < index + row.length; j++) {
+          totalWeight += ratios[j];
+        }
 
-    let index = 0;
-    for (let row of partition) {
-      // Compute the total weight for this row
-      let totalWeight = 0;
-      for (let j = index; j < index + row.length; j++) {
-        totalWeight += ratios[j];
-      }
+        // Determine the row height based on the total available width and weight of this row.
+        let bestRowHeight = (availableWidth - (row.length - 1) * this.itemSpacing.width) / totalWeight;
 
-      // Determine the row height based on the total available width and weight of this row.
-      let bestRowHeight = (availableWidth - (row.length - 1) * this.itemSpacing.width) / totalWeight;
+        // if this is the last row and the row height is >2x the ideal row height, then cap to the ideal height
+        // probably doing this because if the last row has one extremely tall image, then the row becomes huge
+        // though that can happen anywhere if a row has lots of tall images... so i'm not sure why this one matters
+        if (row === partition[partition.length - 1] && bestRowHeight > this.idealRowHeight * 2) {
+          bestRowHeight = this.idealRowHeight;
+        }
+        let itemHeight = Math.round(bestRowHeight) + this.itemPadding;
+        let x = this.margin;
+
+        // if any items are going to end up too small, add a bit of width to them and subtract it from wider objects
+        let widths = [];
+        for (let j = index; j < index + row.length; j++) {
+          let width = Math.round(bestRowHeight * ratios[j]);
+          widths.push([j - index, width]);
+        }
+        this._distributeWidths(widths);
+
+        // Create items for this row.
+        for (let j = index; j < index + row.length; j++) {
+          let node = this.collection.rows[j];
+          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;
+        }
 
-      // if this is the last row and the row height is >2x the ideal row height, then cap to the ideal height
-      // probably doing this because if the last row has one extremely tall image, then the row becomes huge
-      // though that can happen anywhere if a row has lots of tall images... so i'm not sure why this one matters
-      if (row === partition[partition.length - 1] && bestRowHeight > this.idealRowHeight * 2) {
-        bestRowHeight = this.idealRowHeight;
-      }
-      let itemHeight = Math.round(bestRowHeight) + this.itemPadding;
-      let x = this.margin;
-
-      // if any items are going to end up too small, add a bit of width to them and subtract it from wider objects
-      let widths = [];
-      for (let j = index; j < index + row.length; j++) {
-        let width = Math.round(bestRowHeight * ratios[j]);
-        widths.push([j - index, width]);
-      }
-      this._distributeWidths(widths);
-
-      // Create items for this row.
-      for (let j = index; j < index + row.length; j++) {
-        let node = this.collection.rows[j];
-        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);
-        this.layoutInfos.set(node.key, layoutInfo);
-        x += itemWidth + this.itemSpacing.width;
+        y += itemHeight + this.itemSpacing.height;
+        index += row.length;
       }
 
-      y += itemHeight + this.itemSpacing.height;
-      index += row.length;
-    }
+      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
+        // so it doesn't scroll
+        if (this.collection.size === 0) {
+          loaderY = 0;
+          loaderHeight = visibleHeight || 60;
+        }
 
-    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
-      // so it doesn't scroll
-      if (this.collection.size === 0) {
-        loaderY = 0;
-        loaderHeight = visibleHeight || 60;
+        let rect = new Rect(0, loaderY, visibleWidth, loaderHeight);
+        let loader = new LayoutInfo('loader', 'loader', rect);
+        this.layoutInfos.set('loader', loader);
+        y = loader.rect.maxY;
       }
 
-      let rect = new Rect(0, loaderY, visibleWidth, loaderHeight);
-      let loader = new LayoutInfo('loader', 'loader', rect);
-      this.layoutInfos.set('loader', loader);
-      y = loader.rect.maxY;
-    }
-
-    if (this.collection.size === 0 && !this.isLoading) {
-      let rect = new Rect(0, 0, visibleWidth, visibleHeight);
-      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);
-      this.layoutInfos.set('placeholder', placeholder);
-      y = placeholder.rect.maxY;
+      if (this.collection.size === 0 && !this.isLoading) {
+        let rect = new Rect(0, 0, visibleWidth, visibleHeight);
+        let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);
+        this.layoutInfos.set('placeholder', placeholder);
+        y = placeholder.rect.maxY;
+      }
     }
-
     this.contentSize = new Size(visibleWidth, y);
   }
 }

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
@@ -40,22 +35,15 @@ export interface WaterfallLayoutOptions extends BaseLayoutOptions {
    * The maximum number of columns.
    * @default Infinity
    */
-  maxColumns?: number,
-  /**
-   * The vertical padding for an item.
-   * @default 56
-   */
-  itemPadding?: number
+  maxColumns?: number
 }
 
 // TODO: this didn't have any options that varied with card size, should it have?
 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;
@@ -69,8 +57,6 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
     this.margin = options.margin != null ? options.margin : 24;
     this.minSpace = options.minSpace || new Size(18, 18);
     this.maxColumns = options.maxColumns || Infinity;
-    // TODO: not entirely sure what this is for since the layout will automatically shift itself to the correct vertical space for the card
-    this.itemPadding = options.itemPadding != null ? options.itemPadding : 56;
 
     this.itemWidth = 0;
     this.numColumns = 0;
@@ -119,8 +105,8 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
       } else if (node.props.width && node.props.height) {
         let nodeWidth = node.props.width;
         let nodeHeight = node.props.height;
-        let scaledHeight = Math.round(nodeWidth * ((itemWidth) / nodeHeight));
-        height = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, scaledHeight)) + this.itemPadding;
+        let scaledHeight = Math.round(nodeHeight * ((itemWidth) / nodeWidth));
+        height = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, scaledHeight));
       } else {
         height = itemWidth;
       }
@@ -133,6 +119,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?
@@ -185,10 +172,9 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
       // TODO: also not sure about copying layout info vs mutating it. Listlayout does the below
       // but I feel that is because it actually maintained a layoutNode map cache which this doesn't have
       let newLayoutInfo = layoutInfo.copy();
-      newLayoutInfo.rect.height = size.height;
+      newLayoutInfo.rect.height = size.height < 600 ? size.height : 600;
+      newLayoutInfo.estimatedSize = false;
       this.layoutInfos.set(key, newLayoutInfo);
-      // TODO: v2 had layoutInfo.estimatedSize = view.estimatedSize || false; but we can't do the same here?
-      layoutInfo.estimatedSize = false;
       return true;
     }