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

package/dist/main.js

@@ -50,6 +50,7 @@ var _react2 = require("react");
 var _react = $parcel$interopDefault(_react2);
 
 var {
+  useCallback,
   useMemo,
   useRef,
   useState,
@@ -65,6 +66,7 @@ var {
   filterDOMProps,
   mergeProps,
   useLayoutEffect,
+  useResizeObserver,
   useSlotId
 } = require("@react-aria/utils");
 
@@ -125,6 +127,9 @@ $e80f3e549a26f7869571c50d85a$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"
 };
 
@@ -137,8 +142,7 @@ function $d2268ebff01b30dc8701260db9de8b73$export$useCardViewContext() {
 var $e80f3e549a26f7869571c50d85a$$interop$default = $parcel$interopDefault($e80f3e549a26f7869571c50d85a$exports);
 
 function $c05a01cf76428c47b3d1dc747d32$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 = $d2268ebff01b30dc8701260db9de8b73$export$useCardViewContext() || {}; // we can call again here, won't change from Card.tsx
 
   let {
@@ -189,14 +193,18 @@ function $c05a01cf76428c47b3d1dc747d32$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)) {
@@ -362,13 +370,6 @@ function $c05a01cf76428c47b3d1dc747d32$var$useCard(props) {
 
 const $c05a01cf76428c47b3d1dc747d32$export$CardBase = /*#__PURE__*/_react.forwardRef($c05a01cf76428c47b3d1dc747d32$var$CardBase);
 
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/card/src/cardview.css
-var $ebdef199d5449cee6008bd291a26a$exports = {};
-$ebdef199d5449cee6008bd291a26a$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 $a73c2251b3d85c65b5e95b28f93c8042$exports = {};
 $a73c2251b3d85c65b5e95b28f93c8042$exports = JSON.parse("{\"loading\":\"جارٍ التحميل...\",\"loadingMore\":\"جارٍ تحميل المزيد...\"}");
@@ -508,7 +509,6 @@ const $e13c04c0c86a4119edea9d2f83b$var$intlMessages = {
   "zh-CN": _babelRuntimeHelpersInteropRequireDefault($b9216cdc8ad21d0c1b8e94822b8d13a3$exports).default,
   "zh-TW": _babelRuntimeHelpersInteropRequireDefault($f9135827d71b7bceae5eb74e24cd6$exports).default
 };
-var $ebdef199d5449cee6008bd291a26a$$interop$default = $parcel$interopDefault($ebdef199d5449cee6008bd291a26a$exports);
 
 function $e13c04c0c86a4119edea9d2f83b$var$CardView(props, ref) {
   let {
@@ -523,7 +523,8 @@ function $e13c04c0c86a4119edea9d2f83b$var$CardView(props, ref) {
     renderEmptyState,
     layout,
     loadingState,
-    onLoadMore
+    onLoadMore,
+    cardOrientation = 'vertical'
   } = props;
   let collator = useCollator({
     usage: 'search',
@@ -531,18 +532,11 @@ function $e13c04c0c86a4119edea9d2f83b$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($e13c04c0c86a4119edea9d2f83b$var$intlMessages);
   let {
     direction
@@ -567,7 +561,9 @@ function $e13c04c0c86a4119edea9d2f83b$var$CardView(props, ref) {
     }))
   }), [collection]);
   let state = useGridState(_babelRuntimeHelpersExtends({}, props, {
-    collection: gridCollection
+    selectionMode: cardOrientation === 'horizontal' && layoutType === 'grid' ? 'none' : props.selectionMode,
+    collection: gridCollection,
+    focusMode: 'cell'
   }));
   cardViewLayout.collection = gridCollection;
   cardViewLayout.disabledKeys = state.disabledKeys;
@@ -581,7 +577,6 @@ function $e13c04c0c86a4119edea9d2f83b$var$CardView(props, ref) {
   }), state, domRef);
 
   let renderWrapper = (parent, reusableView) => /*#__PURE__*/_react.createElement(VirtualizerItem, {
-    className: classNames($ebdef199d5449cee6008bd291a26a$$interop$default, 'react-spectrum-CardView-CardWrapper'),
     key: reusableView.key,
     reusableView: reusableView,
     parent: parent
@@ -592,17 +587,26 @@ function $e13c04c0c86a4119edea9d2f83b$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($d2268ebff01b30dc8701260db9de8b73$export$CardViewContext.Provider, {
     value: {
       state,
       isQuiet,
-      layout: cardViewLayout
+      layout: cardViewLayout,
+      cardOrientation
     }
   }, /*#__PURE__*/_react.createElement(Virtualizer, _babelRuntimeHelpersExtends({}, gridProps, styleProps, {
-    className: classNames($ebdef199d5449cee6008bd291a26a$$interop$default, 'react-spectrum-CardView'),
+    className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-CardView'),
     ref: domRef,
     focusedKey: focusedKey,
     scrollDirection: "vertical",
@@ -610,7 +614,9 @@ function $e13c04c0c86a4119edea9d2f83b$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($e13c04c0c86a4119edea9d2f83b$var$InternalCard, {
@@ -643,7 +649,7 @@ function $e13c04c0c86a4119edea9d2f83b$var$CenteredWrapper(_ref) {
   return /*#__PURE__*/_react.createElement("div", {
     role: "row",
     "aria-rowindex": state.collection.size + 1,
-    className: classNames($ebdef199d5449cee6008bd291a26a$$interop$default, 'react-spectrum-CardView-centeredWrapper')
+    className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-CardView-centeredWrapper')
   }, /*#__PURE__*/_react.createElement("div", {
     role: "gridcell"
   }, children));
@@ -681,11 +687,13 @@ function $e13c04c0c86a4119edea9d2f83b$var$InternalCard(props) {
     isQuiet = true;
   }
 
+  if (layoutType !== 'grid') {
+    cardOrientation = 'vertical';
+  }
+
   return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({}, rowProps, {
     ref: rowRef,
-    style: {
-      height: '100%'
-    }
+    className: classNames($e80f3e549a26f7869571c50d85a$$interop$default, 'spectrum-CardView-row')
   }), /*#__PURE__*/_react.createElement($c05a01cf76428c47b3d1dc747d32$export$CardBase, {
     ref: cellRef,
     articleProps: gridCellProps,
@@ -719,9 +727,13 @@ class $ae626509048548c15655cbbeb258411$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) {
@@ -979,14 +991,11 @@ class $ae626509048548c15655cbbeb258411$export$BaseLayout extends Layout {
 
 }
 
-// TODO: copied from V2, update this with the proper spectrum values
-// Should these be affected by Scale as well?
 const $a23e32931be921d018d1ae1efeda8$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
@@ -995,8 +1004,10 @@ const $a23e32931be921d018d1ae1efeda8$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
   }
@@ -1008,10 +1019,8 @@ class GalleryLayout extends $ae626509048548c15655cbbeb258411$export$BaseLayout {
       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;
@@ -1019,7 +1028,7 @@ class GalleryLayout extends $ae626509048548c15655cbbeb258411$export$BaseLayout {
     let cardSize = 'L';
     this.idealRowHeight = options.idealRowHeight || $a23e32931be921d018d1ae1efeda8$var$DEFAULT_OPTIONS[cardSize].idealRowHeight;
     this.itemSpacing = options.itemSpacing || $a23e32931be921d018d1ae1efeda8$var$DEFAULT_OPTIONS[cardSize].itemSpacing;
-    this.itemPadding = options.itemPadding != null ? options.itemPadding : $a23e32931be921d018d1ae1efeda8$var$DEFAULT_OPTIONS[cardSize].itemPadding;
+    this.itemPadding = options.itemPadding != null ? options.itemPadding : $a23e32931be921d018d1ae1efeda8$var$DEFAULT_OPTIONS[cardSize].itemPadding[this.scale];
     this.minItemSize = options.minItemSize || $a23e32931be921d018d1ae1efeda8$var$DEFAULT_OPTIONS[cardSize].minItemSize;
     this.threshold = options.threshold || 1;
     this.margin = options.margin != null ? options.margin : $a23e32931be921d018d1ae1efeda8$var$DEFAULT_OPTIONS[cardSize].margin;
@@ -1151,6 +1160,7 @@ class GalleryLayout extends $ae626509048548c15655cbbeb258411$export$BaseLayout {
         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;
       }
@@ -1266,12 +1276,12 @@ function $a23e32931be921d018d1ae1efeda8$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 $e0c00724bec6201efad9430accf8c3b1$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),
@@ -1279,10 +1289,20 @@ const $e0c00724bec6201efad9430accf8c3b1$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),
@@ -1297,25 +1317,25 @@ class GridLayout extends $ae626509048548c15655cbbeb258411$export$BaseLayout {
       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 || $e0c00724bec6201efad9430accf8c3b1$var$DEFAULT_OPTIONS[cardSize].minItemSize;
+    this.cardOrientation = options.cardOrientation || 'vertical';
+    this.minItemSize = options.minItemSize || $e0c00724bec6201efad9430accf8c3b1$var$DEFAULT_OPTIONS[cardSize].minItemSize[this.cardOrientation];
     this.maxItemSize = options.maxItemSize || $e0c00724bec6201efad9430accf8c3b1$var$DEFAULT_OPTIONS[cardSize].maxItemSize;
     this.margin = options.margin != null ? options.margin : $e0c00724bec6201efad9430accf8c3b1$var$DEFAULT_OPTIONS[cardSize].margin;
     this.minSpace = options.minSpace || $e0c00724bec6201efad9430accf8c3b1$var$DEFAULT_OPTIONS[cardSize].minSpace;
     this.maxColumns = options.maxColumns || $e0c00724bec6201efad9430accf8c3b1$var$DEFAULT_OPTIONS[cardSize].maxColumns;
-    this.itemPadding = options.itemPadding != null ? options.itemPadding : $e0c00724bec6201efad9430accf8c3b1$var$DEFAULT_OPTIONS[cardSize].itemPadding;
+    this.itemPadding = options.itemPadding != null ? options.itemPadding : $e0c00724bec6201efad9430accf8c3b1$var$DEFAULT_OPTIONS[cardSize].itemPadding[this.cardOrientation][this.scale];
     this.itemSize = null;
     this.numColumns = 0;
     this.numRows = 0;
@@ -1324,8 +1344,7 @@ class GridLayout extends $ae626509048548c15655cbbeb258411$export$BaseLayout {
 
   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) {
@@ -1360,7 +1379,7 @@ class GridLayout extends $ae626509048548c15655cbbeb258411$export$BaseLayout {
         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
@@ -1378,21 +1397,24 @@ class GridLayout extends $ae626509048548c15655cbbeb258411$export$BaseLayout {
 
   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));
@@ -1439,6 +1461,7 @@ class GridLayout extends $ae626509048548c15655cbbeb258411$export$BaseLayout {
     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,
@@ -1496,7 +1519,6 @@ class WaterfallLayout extends $ae626509048548c15655cbbeb258411$export$BaseLayout
     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;
@@ -1566,6 +1588,7 @@ class WaterfallLayout extends $ae626509048548c15655cbbeb258411$export$BaseLayout
       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) {
@@ -1573,8 +1596,7 @@ class WaterfallLayout extends $ae626509048548c15655cbbeb258411$export$BaseLayout
       // }
 
       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);