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

package/dist/module.js

@@ -7,9 +7,9 @@ import { ProgressCircle } from "@react-spectrum/progress";
 import { GridCollection, useGridState } from "@react-stately/grid";
 import { useProviderProps, useProvider } from "@react-spectrum/provider";
 import { useFocusWithin, useHover } from "@react-aria/interactions";
-import _react, { useMemo, useRef, useState, useContext, forwardRef } from "react";
+import _react, { useCallback, useMemo, useRef, useState, useContext, forwardRef } from "react";
 import { FocusRing } from "@react-aria/focus";
-import { filterDOMProps, mergeProps, useLayoutEffect, useSlotId } from "@react-aria/utils";
+import { filterDOMProps, mergeProps, useLayoutEffect, useResizeObserver, useSlotId } from "@react-aria/utils";
 import { Divider } from "@react-spectrum/divider";
 import { classNames, SlotProvider, useDOMRef, useHasChild, useStyleProps, useUnwrapDOMRef } from "@react-spectrum/utils";
 import { Checkbox } from "@react-spectrum/checkbox";
@@ -51,6 +51,9 @@ $a8414e711d6ad206767a67f293235d49$exports = {
   "spectrum-Card--gallery": "_spectrum-Card--gallery_dd040",
   "spectrum-Card--closeToSquare": "_spectrum-Card--closeToSquare_dd040",
   "spectrum-Card--horizontal": "_spectrum-Card--horizontal_dd040",
+  "spectrum-CardView": "_spectrum-CardView_dd040",
+  "spectrum-CardView-centeredWrapper": "_spectrum-CardView-centeredWrapper_dd040",
+  "spectrum-CardView-row": "_spectrum-CardView-row_dd040",
   "is-drop-target": "_is-drop-target_dd040"
 };
 
@@ -63,8 +66,7 @@ function $f9069c2077073c56c9fbb170659475$export$useCardViewContext() {
 var $a8414e711d6ad206767a67f293235d49$$interop$default = $parcel$interopDefault($a8414e711d6ad206767a67f293235d49$exports);
 
 function $c6a745aa43479b6f54b3654a7597126$var$CardBase(props, ref) {
-  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
-
+  props = useProviderProps(props);
   let context = $f9069c2077073c56c9fbb170659475$export$useCardViewContext() || {}; // we can call again here, won't change from Card.tsx
 
   let {
@@ -115,14 +117,18 @@ function $c6a745aa43479b6f54b3654a7597126$var$CardBase(props, ref) {
   let hasPreview = hasPreviewImage || hasPreviewIllustration; // 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)) {
@@ -288,13 +294,6 @@ function $c6a745aa43479b6f54b3654a7597126$var$useCard(props) {
 
 const $c6a745aa43479b6f54b3654a7597126$export$CardBase = /*#__PURE__*/_react.forwardRef($c6a745aa43479b6f54b3654a7597126$var$CardBase);
 
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/src/cardview.css
-var $b608036255d92f62fb59a1e995c612b$exports = {};
-$b608036255d92f62fb59a1e995c612b$exports = {
-  "react-spectrum-CardView-centeredWrapper": "_react-spectrum-CardView-centeredWrapper_0cd7c",
-  "react-spectrum-CardView-CardWrapper": "_react-spectrum-CardView-CardWrapper_0cd7c",
-  "react-spectrum-CardView": "_react-spectrum-CardView_0cd7c"
-};
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/intl/ar-AE.json
 var $a48fff6baafc14357869c7ba184ba3$exports = {};
 $a48fff6baafc14357869c7ba184ba3$exports = JSON.parse("{\"loading\":\"جارٍ التحميل...\",\"loadingMore\":\"جارٍ تحميل المزيد...\"}");
@@ -434,7 +433,6 @@ const $e295579aca996ab66b8081d2bb9$var$intlMessages = {
   "zh-CN": _babelRuntimeHelpersEsmInteropRequireDefault($b747d69bc7146092b42e6b9d8758$exports).default,
   "zh-TW": _babelRuntimeHelpersEsmInteropRequireDefault($ea3eb1b4589dd69e29e4f55504e$exports).default
 };
-var $b608036255d92f62fb59a1e995c612b$$interop$default = $parcel$interopDefault($b608036255d92f62fb59a1e995c612b$exports);
 
 function $e295579aca996ab66b8081d2bb9$var$CardView(props, ref) {
   let {
@@ -449,7 +447,8 @@ function $e295579aca996ab66b8081d2bb9$var$CardView(props, ref) {
     renderEmptyState,
     layout,
     loadingState,
-    onLoadMore
+    onLoadMore,
+    cardOrientation = 'vertical'
   } = props;
   let collator = useCollator({
     usage: 'search',
@@ -457,18 +456,11 @@ function $e295579aca996ab66b8081d2bb9$var$CardView(props, ref) {
   });
   let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
   let cardViewLayout = useMemo(() => typeof layout === 'function' ? new layout({
-    collator
-  }) : layout, [layout, collator]);
+    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($e295579aca996ab66b8081d2bb9$var$intlMessages);
   let {
     direction
@@ -493,7 +485,9 @@ function $e295579aca996ab66b8081d2bb9$var$CardView(props, ref) {
     }))
   }), [collection]);
   let state = useGridState(_babelRuntimeHelpersEsmExtends({}, props, {
-    collection: gridCollection
+    selectionMode: cardOrientation === 'horizontal' && layoutType === 'grid' ? 'none' : props.selectionMode,
+    collection: gridCollection,
+    focusMode: 'cell'
   }));
   cardViewLayout.collection = gridCollection;
   cardViewLayout.disabledKeys = state.disabledKeys;
@@ -507,7 +501,6 @@ function $e295579aca996ab66b8081d2bb9$var$CardView(props, ref) {
   }), state, domRef);
 
   let renderWrapper = (parent, reusableView) => /*#__PURE__*/_react.createElement(VirtualizerItem, {
-    className: classNames($b608036255d92f62fb59a1e995c612b$$interop$default, 'react-spectrum-CardView-CardWrapper'),
     key: reusableView.key,
     reusableView: reusableView,
     parent: parent
@@ -518,17 +511,26 @@ function $e295579aca996ab66b8081d2bb9$var$CardView(props, ref) {
 
   if ((focusedItem == null ? void 0 : focusedItem.parentKey) != null) {
     focusedKey = focusedItem.parentKey;
-  } // TODO: does aria-row count and aria-col count need to be modified? Perhaps aria-col count needs to be omitted
+  }
 
+  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 /*#__PURE__*/_react.createElement($f9069c2077073c56c9fbb170659475$export$CardViewContext.Provider, {
     value: {
       state,
       isQuiet,
-      layout: cardViewLayout
+      layout: cardViewLayout,
+      cardOrientation
     }
   }, /*#__PURE__*/_react.createElement(Virtualizer, _babelRuntimeHelpersEsmExtends({}, gridProps, styleProps, {
-    className: classNames($b608036255d92f62fb59a1e995c612b$$interop$default, 'react-spectrum-CardView'),
+    className: classNames($a8414e711d6ad206767a67f293235d49$$interop$default, 'spectrum-CardView'),
     ref: domRef,
     focusedKey: focusedKey,
     scrollDirection: "vertical",
@@ -536,7 +538,9 @@ function $e295579aca996ab66b8081d2bb9$var$CardView(props, ref) {
     collection: gridCollection,
     isLoading: isLoading,
     onLoadMore: onLoadMore,
-    renderWrapper: renderWrapper
+    renderWrapper: renderWrapper,
+    transitionDuration: isLoading ? 160 : 220,
+    scrollToItem: scrollToItem
   }), (type, item) => {
     if (type === 'item') {
       return /*#__PURE__*/_react.createElement($e295579aca996ab66b8081d2bb9$var$InternalCard, {
@@ -569,7 +573,7 @@ function $e295579aca996ab66b8081d2bb9$var$CenteredWrapper(_ref) {
   return /*#__PURE__*/_react.createElement("div", {
     role: "row",
     "aria-rowindex": state.collection.size + 1,
-    className: classNames($b608036255d92f62fb59a1e995c612b$$interop$default, 'react-spectrum-CardView-centeredWrapper')
+    className: classNames($a8414e711d6ad206767a67f293235d49$$interop$default, 'spectrum-CardView-centeredWrapper')
   }, /*#__PURE__*/_react.createElement("div", {
     role: "gridcell"
   }, children));
@@ -607,11 +611,13 @@ function $e295579aca996ab66b8081d2bb9$var$InternalCard(props) {
     isQuiet = true;
   }
 
+  if (layoutType !== 'grid') {
+    cardOrientation = 'vertical';
+  }
+
   return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersEsmExtends({}, rowProps, {
     ref: rowRef,
-    style: {
-      height: '100%'
-    }
+    className: classNames($a8414e711d6ad206767a67f293235d49$$interop$default, 'spectrum-CardView-row')
   }), /*#__PURE__*/_react.createElement($c6a745aa43479b6f54b3654a7597126$export$CardBase, {
     ref: cellRef,
     articleProps: gridCellProps,
@@ -643,9 +649,13 @@ class $aae6c2773b778a15b92f7e7612b9cfc5$export$BaseLayout extends Layout {
     this.isLoading = void 0;
     this.disabledKeys = new Set();
     this.direction = void 0;
+    this.scale = void 0;
+    this.margin = void 0;
     this.layoutInfos = new Map();
     this.collator = options.collator;
     this.lastCollection = null;
+    this.scale = options.scale || 'medium';
+    this.margin = options.margin || 24;
   }
 
   validate(invalidationContext) {
@@ -903,14 +913,11 @@ class $aae6c2773b778a15b92f7e7612b9cfc5$export$BaseLayout extends Layout {
 
 }
 
-// TODO: copied from V2, update this with the proper spectrum values
-// Should these be affected by Scale as well?
 const $e9ed5e9ac7fa3fdf4332ceb63dd0$var$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
@@ -919,8 +926,10 @@ const $e9ed5e9ac7fa3fdf4332ceb63dd0$var$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
   }
@@ -931,10 +940,8 @@ export class GalleryLayout extends $aae6c2773b778a15b92f7e7612b9cfc5$export$Base
       options = {};
     }
 
-    super(options); // TODO: restore cardSize option when we support different size cards
-
+    super(options);
     this.idealRowHeight = void 0;
-    this.margin = void 0;
     this.itemSpacing = void 0;
     this.itemPadding = void 0;
     this.minItemSize = void 0;
@@ -942,7 +949,7 @@ export class GalleryLayout extends $aae6c2773b778a15b92f7e7612b9cfc5$export$Base
     let cardSize = 'L';
     this.idealRowHeight = options.idealRowHeight || $e9ed5e9ac7fa3fdf4332ceb63dd0$var$DEFAULT_OPTIONS[cardSize].idealRowHeight;
     this.itemSpacing = options.itemSpacing || $e9ed5e9ac7fa3fdf4332ceb63dd0$var$DEFAULT_OPTIONS[cardSize].itemSpacing;
-    this.itemPadding = options.itemPadding != null ? options.itemPadding : $e9ed5e9ac7fa3fdf4332ceb63dd0$var$DEFAULT_OPTIONS[cardSize].itemPadding;
+    this.itemPadding = options.itemPadding != null ? options.itemPadding : $e9ed5e9ac7fa3fdf4332ceb63dd0$var$DEFAULT_OPTIONS[cardSize].itemPadding[this.scale];
     this.minItemSize = options.minItemSize || $e9ed5e9ac7fa3fdf4332ceb63dd0$var$DEFAULT_OPTIONS[cardSize].minItemSize;
     this.threshold = options.threshold || 1;
     this.margin = options.margin != null ? options.margin : $e9ed5e9ac7fa3fdf4332ceb63dd0$var$DEFAULT_OPTIONS[cardSize].margin;
@@ -1074,6 +1081,7 @@ export class GalleryLayout extends $aae6c2773b778a15b92f7e7612b9cfc5$export$Base
         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;
       }
@@ -1186,12 +1194,12 @@ function $e9ed5e9ac7fa3fdf4332ceb63dd0$var$linearPartition(seq, k) {
   return result;
 }
 
-// TODO: copied from V2, update this with the proper spectrum values
-// Should these be affected by Scale as well?
 const $e001599dfc5221c58c4d9b2f5f1b9bd$var$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),
@@ -1199,10 +1207,20 @@ const $e001599dfc5221c58c4d9b2f5f1b9bd$var$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),
@@ -1216,25 +1234,25 @@ export class GridLayout extends $aae6c2773b778a15b92f7e7612b9cfc5$export$BaseLay
       options = {};
     }
 
-    super(options); // TODO: restore cardSize option when we support different size cards
-
+    super(options);
     this.minItemSize = void 0;
     this.maxItemSize = void 0;
-    this.margin = void 0;
     this.minSpace = void 0;
     this.maxColumns = void 0;
     this.itemPadding = void 0;
+    this.cardOrientation = void 0;
     this.itemSize = void 0;
     this.numColumns = void 0;
     this.numRows = void 0;
     this.horizontalSpacing = void 0;
     let cardSize = 'L';
-    this.minItemSize = options.minItemSize || $e001599dfc5221c58c4d9b2f5f1b9bd$var$DEFAULT_OPTIONS[cardSize].minItemSize;
+    this.cardOrientation = options.cardOrientation || 'vertical';
+    this.minItemSize = options.minItemSize || $e001599dfc5221c58c4d9b2f5f1b9bd$var$DEFAULT_OPTIONS[cardSize].minItemSize[this.cardOrientation];
     this.maxItemSize = options.maxItemSize || $e001599dfc5221c58c4d9b2f5f1b9bd$var$DEFAULT_OPTIONS[cardSize].maxItemSize;
     this.margin = options.margin != null ? options.margin : $e001599dfc5221c58c4d9b2f5f1b9bd$var$DEFAULT_OPTIONS[cardSize].margin;
     this.minSpace = options.minSpace || $e001599dfc5221c58c4d9b2f5f1b9bd$var$DEFAULT_OPTIONS[cardSize].minSpace;
     this.maxColumns = options.maxColumns || $e001599dfc5221c58c4d9b2f5f1b9bd$var$DEFAULT_OPTIONS[cardSize].maxColumns;
-    this.itemPadding = options.itemPadding != null ? options.itemPadding : $e001599dfc5221c58c4d9b2f5f1b9bd$var$DEFAULT_OPTIONS[cardSize].itemPadding;
+    this.itemPadding = options.itemPadding != null ? options.itemPadding : $e001599dfc5221c58c4d9b2f5f1b9bd$var$DEFAULT_OPTIONS[cardSize].itemPadding[this.cardOrientation][this.scale];
     this.itemSize = null;
     this.numColumns = 0;
     this.numRows = 0;
@@ -1243,8 +1261,7 @@ export class GridLayout extends $aae6c2773b778a15b92f7e7612b9cfc5$export$BaseLay
 
   get layoutType() {
     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) {
     if (allowInsertingAtEnd === void 0) {
@@ -1279,7 +1296,7 @@ export class GridLayout extends $aae6c2773b778a15b92f7e7612b9cfc5$export$BaseLay
         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);
         }
       } // Check if loader is in view and add to res if so
@@ -1297,21 +1314,24 @@ export class GridLayout extends $aae6c2773b778a15b92f7e7612b9cfc5$export$BaseLay
 
   buildCollection() {
     let visibleWidth = this.virtualizer.visibleRect.width;
-    let visibleHeight = this.virtualizer.visibleRect.height; // Compute the number of rows and columns needed to display the content
+    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); // Compute the available width (minus the space between items)
 
     let width = availableWidth - this.minSpace.width * Math.max(0, this.numColumns - 1); // 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)); // Compute the item height, which is proportional to the item width
+    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
 
     this.horizontalSpacing = this.numColumns < 2 ? 0 : Math.floor((availableWidth - this.numColumns * this.itemSize.width) / (this.numColumns - 1));
@@ -1358,6 +1378,7 @@ export class GridLayout extends $aae6c2773b778a15b92f7e7612b9cfc5$export$BaseLay
     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;
   } // Since the collection doesn't represent the visual layout, need to calculate what row and column the current key is in,
@@ -1412,7 +1433,6 @@ export class WaterfallLayout extends $aae6c2773b778a15b92f7e7612b9cfc5$export$Ba
     super(options);
     this.minItemSize = void 0;
     this.maxItemSize = void 0;
-    this.margin = void 0;
     this.minSpace = void 0;
     this.maxColumns = void 0;
     this.itemPadding = void 0;
@@ -1482,6 +1502,7 @@ export class WaterfallLayout extends $aae6c2773b778a15b92f7e7612b9cfc5$export$Ba
       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?
       // Removing it from v2 doesn't seem to do anything?
       // if (layoutInfo.estimatedSize && !invalidationContext.contentChanged && !this.collectionView._transaction) {
@@ -1489,8 +1510,7 @@ export class WaterfallLayout extends $aae6c2773b778a15b92f7e7612b9cfc5$export$Ba
       // }
 
       columnHeights[column] += layoutInfo.rect.height + this.minSpace.height;
-    } // Reset all columns to the maximum for the next section
-
+    }
 
     let maxHeight = Math.max.apply(Math, columnHeights) - this.minSpace.height + this.margin;
     columnHeights.fill(maxHeight);