@react-spectrum/card 3.0.0-nightly.3074 → 3.0.0-nightly.3077

package/dist/module.js

@@ -9,9 +9,8 @@ import {useListState as $k8Xpo$useListState} from "@react-stately/list";
 import {useProvider as $k8Xpo$useProvider, useProviderProps as $k8Xpo$useProviderProps} from "@react-spectrum/provider";
 import {VirtualizerItem as $k8Xpo$VirtualizerItem, Virtualizer as $k8Xpo$Virtualizer} from "@react-aria/virtualizer";
 import {Checkbox as $k8Xpo$Checkbox} from "@react-spectrum/checkbox";
-import {Divider as $k8Xpo$Divider} from "@react-spectrum/divider";
 import {useResizeObserver as $k8Xpo$useResizeObserver, useLayoutEffect as $k8Xpo$useLayoutEffect, mergeProps as $k8Xpo$mergeProps, filterDOMProps as $k8Xpo$filterDOMProps, useSlotId as $k8Xpo$useSlotId} from "@react-aria/utils";
-import {FocusRing as $k8Xpo$FocusRing} from "@react-aria/focus";
+import {getFocusableTreeWalker as $k8Xpo$getFocusableTreeWalker, FocusRing as $k8Xpo$FocusRing} from "@react-aria/focus";
 import {useHover as $k8Xpo$useHover, useFocusWithin as $k8Xpo$useFocusWithin} from "@react-aria/interactions";
 import {Size as $k8Xpo$Size, Rect as $k8Xpo$Rect, LayoutInfo as $k8Xpo$LayoutInfo, Layout as $k8Xpo$Layout} from "@react-stately/virtualizer";
 
@@ -46,10 +45,7 @@ $parcel$export($2ebe8b6b61a3e4e2$exports, "spectrum-Card-image", () => $2ebe8b6b
 $parcel$export($2ebe8b6b61a3e4e2$exports, "spectrum-Card-illustration", () => $2ebe8b6b61a3e4e2$export$13dd3510ae7a8399, (v) => $2ebe8b6b61a3e4e2$export$13dd3510ae7a8399 = v);
 $parcel$export($2ebe8b6b61a3e4e2$exports, "spectrum-Card-avatar", () => $2ebe8b6b61a3e4e2$export$159930c59efb6273, (v) => $2ebe8b6b61a3e4e2$export$159930c59efb6273 = v);
 $parcel$export($2ebe8b6b61a3e4e2$exports, "spectrum-Card-detail", () => $2ebe8b6b61a3e4e2$export$16715af38fbd9819, (v) => $2ebe8b6b61a3e4e2$export$16715af38fbd9819 = v);
-$parcel$export($2ebe8b6b61a3e4e2$exports, "spectrum-Card-actions", () => $2ebe8b6b61a3e4e2$export$8a136ca0c815e3d4, (v) => $2ebe8b6b61a3e4e2$export$8a136ca0c815e3d4 = v);
 $parcel$export($2ebe8b6b61a3e4e2$exports, "spectrum-Card-content", () => $2ebe8b6b61a3e4e2$export$d946625b97e8aa17, (v) => $2ebe8b6b61a3e4e2$export$d946625b97e8aa17 = v);
-$parcel$export($2ebe8b6b61a3e4e2$exports, "spectrum-Card-divider", () => $2ebe8b6b61a3e4e2$export$f41a14ec81fc166a, (v) => $2ebe8b6b61a3e4e2$export$f41a14ec81fc166a = v);
-$parcel$export($2ebe8b6b61a3e4e2$exports, "spectrum-Card-footer", () => $2ebe8b6b61a3e4e2$export$6d6eb6737fc59a18, (v) => $2ebe8b6b61a3e4e2$export$6d6eb6737fc59a18 = v);
 $parcel$export($2ebe8b6b61a3e4e2$exports, "spectrum-Card--waterfall", () => $2ebe8b6b61a3e4e2$export$d9c7209e0e4f7e4d, (v) => $2ebe8b6b61a3e4e2$export$d9c7209e0e4f7e4d = v);
 $parcel$export($2ebe8b6b61a3e4e2$exports, "spectrum-Card--default", () => $2ebe8b6b61a3e4e2$export$c7a022df9e10a238, (v) => $2ebe8b6b61a3e4e2$export$c7a022df9e10a238 = v);
 $parcel$export($2ebe8b6b61a3e4e2$exports, "spectrum-Card--noPreview", () => $2ebe8b6b61a3e4e2$export$b77922bc0320c9e4, (v) => $2ebe8b6b61a3e4e2$export$b77922bc0320c9e4 = v);
@@ -57,7 +53,6 @@ $parcel$export($2ebe8b6b61a3e4e2$exports, "spectrum-Card--grid", () => $2ebe8b6b
 $parcel$export($2ebe8b6b61a3e4e2$exports, "spectrum-Card--noLayout", () => $2ebe8b6b61a3e4e2$export$a03d836e6ef3e749, (v) => $2ebe8b6b61a3e4e2$export$a03d836e6ef3e749 = v);
 $parcel$export($2ebe8b6b61a3e4e2$exports, "spectrum-Card--isQuiet", () => $2ebe8b6b61a3e4e2$export$92ad04b5ac9296ea, (v) => $2ebe8b6b61a3e4e2$export$92ad04b5ac9296ea = v);
 $parcel$export($2ebe8b6b61a3e4e2$exports, "spectrum-Card--gallery", () => $2ebe8b6b61a3e4e2$export$ccd8ffc36bd10cc, (v) => $2ebe8b6b61a3e4e2$export$ccd8ffc36bd10cc = v);
-$parcel$export($2ebe8b6b61a3e4e2$exports, "spectrum-Card--closeToSquare", () => $2ebe8b6b61a3e4e2$export$20899a36767527c0, (v) => $2ebe8b6b61a3e4e2$export$20899a36767527c0 = v);
 $parcel$export($2ebe8b6b61a3e4e2$exports, "spectrum-Card--horizontal", () => $2ebe8b6b61a3e4e2$export$1c52334407225704, (v) => $2ebe8b6b61a3e4e2$export$1c52334407225704 = v);
 $parcel$export($2ebe8b6b61a3e4e2$exports, "spectrum-CardView", () => $2ebe8b6b61a3e4e2$export$2f34e9e3e0b89d95, (v) => $2ebe8b6b61a3e4e2$export$2f34e9e3e0b89d95 = v);
 $parcel$export($2ebe8b6b61a3e4e2$exports, "spectrum-CardView-centeredWrapper", () => $2ebe8b6b61a3e4e2$export$7fc89689fcfab196, (v) => $2ebe8b6b61a3e4e2$export$7fc89689fcfab196 = v);
@@ -77,10 +72,7 @@ var $2ebe8b6b61a3e4e2$export$8d5fea71dc66db80;
 var $2ebe8b6b61a3e4e2$export$13dd3510ae7a8399;
 var $2ebe8b6b61a3e4e2$export$159930c59efb6273;
 var $2ebe8b6b61a3e4e2$export$16715af38fbd9819;
-var $2ebe8b6b61a3e4e2$export$8a136ca0c815e3d4;
 var $2ebe8b6b61a3e4e2$export$d946625b97e8aa17;
-var $2ebe8b6b61a3e4e2$export$f41a14ec81fc166a;
-var $2ebe8b6b61a3e4e2$export$6d6eb6737fc59a18;
 var $2ebe8b6b61a3e4e2$export$d9c7209e0e4f7e4d;
 var $2ebe8b6b61a3e4e2$export$c7a022df9e10a238;
 var $2ebe8b6b61a3e4e2$export$b77922bc0320c9e4;
@@ -88,7 +80,6 @@ var $2ebe8b6b61a3e4e2$export$59739ab951d2dcc7;
 var $2ebe8b6b61a3e4e2$export$a03d836e6ef3e749;
 var $2ebe8b6b61a3e4e2$export$92ad04b5ac9296ea;
 var $2ebe8b6b61a3e4e2$export$ccd8ffc36bd10cc;
-var $2ebe8b6b61a3e4e2$export$20899a36767527c0;
 var $2ebe8b6b61a3e4e2$export$1c52334407225704;
 var $2ebe8b6b61a3e4e2$export$2f34e9e3e0b89d95;
 var $2ebe8b6b61a3e4e2$export$7fc89689fcfab196;
@@ -108,10 +99,7 @@ $2ebe8b6b61a3e4e2$export$8d5fea71dc66db80 = "_spectrum-Card-image_6fdf9f";
 $2ebe8b6b61a3e4e2$export$13dd3510ae7a8399 = "_spectrum-Card-illustration_6fdf9f";
 $2ebe8b6b61a3e4e2$export$159930c59efb6273 = "_spectrum-Card-avatar_6fdf9f";
 $2ebe8b6b61a3e4e2$export$16715af38fbd9819 = "_spectrum-Card-detail_6fdf9f";
-$2ebe8b6b61a3e4e2$export$8a136ca0c815e3d4 = "_spectrum-Card-actions_6fdf9f";
 $2ebe8b6b61a3e4e2$export$d946625b97e8aa17 = "_spectrum-Card-content_6fdf9f";
-$2ebe8b6b61a3e4e2$export$f41a14ec81fc166a = "_spectrum-Card-divider_6fdf9f";
-$2ebe8b6b61a3e4e2$export$6d6eb6737fc59a18 = "_spectrum-Card-footer_6fdf9f";
 $2ebe8b6b61a3e4e2$export$d9c7209e0e4f7e4d = "_spectrum-Card--waterfall_6fdf9f";
 $2ebe8b6b61a3e4e2$export$c7a022df9e10a238 = "_spectrum-Card--default_6fdf9f";
 $2ebe8b6b61a3e4e2$export$b77922bc0320c9e4 = "_spectrum-Card--noPreview_6fdf9f";
@@ -119,7 +107,6 @@ $2ebe8b6b61a3e4e2$export$59739ab951d2dcc7 = "_spectrum-Card--grid_6fdf9f";
 $2ebe8b6b61a3e4e2$export$a03d836e6ef3e749 = "_spectrum-Card--noLayout_6fdf9f";
 $2ebe8b6b61a3e4e2$export$92ad04b5ac9296ea = "_spectrum-Card--isQuiet_6fdf9f";
 $2ebe8b6b61a3e4e2$export$ccd8ffc36bd10cc = "_spectrum-Card--gallery_6fdf9f";
-$2ebe8b6b61a3e4e2$export$20899a36767527c0 = "_spectrum-Card--closeToSquare_6fdf9f";
 $2ebe8b6b61a3e4e2$export$1c52334407225704 = "_spectrum-Card--horizontal_6fdf9f";
 $2ebe8b6b61a3e4e2$export$2f34e9e3e0b89d95 = "_spectrum-CardView_6fdf9f";
 $2ebe8b6b61a3e4e2$export$7fc89689fcfab196 = "_spectrum-CardView-centeredWrapper_6fdf9f";
@@ -143,7 +130,7 @@ function $6b5e97142b400aef$var$CardBase(props, ref) {
     let { state: state  } = context;
     let manager = state?.selectionManager;
     let { isQuiet: isQuiet , orientation: orientation = 'vertical' , articleProps: articleProps = {
-    } , item: item , layout: layout  } = props;
+    } , item: item , layout: layout , children: children  } = props;
     let key = item?.key;
     let isSelected = manager?.isSelected(key);
     let isDisabled = state?.disabledKeys.has(key);
@@ -153,6 +140,7 @@ function $6b5e97142b400aef$var$CardBase(props, ref) {
     let { cardProps: cardProps , titleProps: titleProps , contentProps: contentProps  } = $6b5e97142b400aef$var$useCard(props);
     let domRef = $k8Xpo$useDOMRef(ref);
     let gridRef = $k8Xpo$useRef();
+    let checkboxRef = $k8Xpo$useRef(null);
     // cards are only interactive if there is a selection manager and it allows selection
     let { hoverProps: hoverProps , isHovered: isHovered  } = $k8Xpo$useHover({
         isDisabled: manager === undefined || manager?.selectionMode === 'none' || isDisabled
@@ -162,13 +150,12 @@ function $6b5e97142b400aef$var$CardBase(props, ref) {
         onFocusWithinChange: setIsFocused,
         isDisabled: isDisabled
     });
-    let hasFooter = $k8Xpo$useHasChild(`.${(/*@__PURE__*/$parcel$interopDefault($2ebe8b6b61a3e4e2$exports))['spectrum-Card-footer']}`, gridRef);
     // ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default
     let hasPreviewImage = $k8Xpo$useHasChild(`.${(/*@__PURE__*/$parcel$interopDefault($2ebe8b6b61a3e4e2$exports))['spectrum-Card-image']}`, gridRef);
     let hasPreviewIllustration = $k8Xpo$useHasChild(`.${(/*@__PURE__*/$parcel$interopDefault($2ebe8b6b61a3e4e2$exports))['spectrum-Card-illustration']}`, gridRef);
     let hasPreview = hasPreviewImage || hasPreviewIllustration;
     // this is for horizontal cards
-    let [height1, setHeight] = $k8Xpo$useState(NaN);
+    let [height, setHeight] = $k8Xpo$useState(NaN);
     let updateHeight = $k8Xpo$useCallback(()=>{
         if (orientation !== 'horizontal') return;
         let cardHeight = gridRef.current.getBoundingClientRect().height;
@@ -183,9 +170,9 @@ function $6b5e97142b400aef$var$CardBase(props, ref) {
         onResize: updateHeight
     });
     let aspectRatioEnforce = undefined;
-    if (orientation === 'horizontal' && !isNaN(height1)) aspectRatioEnforce = {
-        height: `${height1}px`,
-        width: `${height1}px`
+    if (orientation === 'horizontal' && !isNaN(height)) aspectRatioEnforce = {
+        height: `${height}px`,
+        width: `${height}px`
     };
     let slots = $k8Xpo$useMemo(()=>({
             image: {
@@ -212,72 +199,29 @@ function $6b5e97142b400aef$var$CardBase(props, ref) {
             },
             detail: {
                 UNSAFE_className: $k8Xpo$classNames((/*@__PURE__*/$parcel$interopDefault($2ebe8b6b61a3e4e2$exports)), 'spectrum-Card-detail')
-            },
-            actionmenu: {
-                UNSAFE_className: $k8Xpo$classNames((/*@__PURE__*/$parcel$interopDefault($2ebe8b6b61a3e4e2$exports)), 'spectrum-Card-actions'),
-                align: 'end',
-                isQuiet: true
-            },
-            footer: {
-                UNSAFE_className: $k8Xpo$classNames((/*@__PURE__*/$parcel$interopDefault($2ebe8b6b61a3e4e2$exports)), 'spectrum-Card-footer'),
-                isHidden: isQuiet
-            },
-            divider: {
-                UNSAFE_className: $k8Xpo$classNames((/*@__PURE__*/$parcel$interopDefault($2ebe8b6b61a3e4e2$exports)), 'spectrum-Card-divider'),
-                size: 'S'
             }
         })
     , [
         titleProps,
         contentProps,
-        height1,
+        height,
         isQuiet,
         orientation
     ]);
-    // This is only for quiet grid cards
-    let [isCloseToSquare, setIsCloseToSquare] = $k8Xpo$useState(false);
     $k8Xpo$useLayoutEffect(()=>{
-        if (!(layout === 'grid' && isQuiet)) return;
-        // ToDo: how to handle illustrations? what if the illustration looks like an image? What about swatches/fonts https://spectrum-contributions.corp.adobe.com/page/asset-card-beta/#File-type
-        let image = gridRef.current.querySelector(`.${(/*@__PURE__*/$parcel$interopDefault($2ebe8b6b61a3e4e2$exports))['spectrum-Card-image']} img`);
-        if (!image) return;
-        let measure = ()=>{
-            let height = image.naturalHeight;
-            let width = image.naturalWidth;
-            /*
-      * ToDo: Choose between min-padding and plain ratio
-      * Do we want to just do a ratio measurement when it's close to being a square?
-      * or do we want to actually figure out min-padding?
-      * Min Padding would require us to check that the padding is not less than the min in both Vertical and Horizontal
-      * Unfortunately img contain doesn't actually create padding, which is what this math below can figure out
-      * Vs the commented out straight ratio check
-      * */ let imgTagHeight = image.clientHeight;
-            let imgTagWidth = image.clientWidth;
-            let ratio = Math.min(imgTagWidth / width, imgTagHeight / height);
-            let trueHeight = ratio * height;
-            let trueWidth = ratio * width;
-            let paddingVertical = imgTagHeight - trueHeight;
-            let paddingHorizontal = imgTagWidth - trueWidth;
-            if (paddingVertical < 16 && paddingHorizontal < 16) setIsCloseToSquare(true);
-            else setIsCloseToSquare(false);
-        // let ratio = height / width;
-        // if (ratio > 0.9 && ratio < 1.1) {
-        //   setIsCloseToSquare(true);
-        // }
-        };
-        if (image.complete) measure();
-        else {
-            image.addEventListener('load', measure);
-            return ()=>{
-                image.removeEventListener('load', measure);
-            };
+        if (gridRef?.current) {
+            let walker = $k8Xpo$getFocusableTreeWalker(gridRef.current);
+            let nextNode = walker.nextNode();
+            while(nextNode != null){
+                if (checkboxRef.current && !checkboxRef.current.UNSAFE_getDOMNode().contains(nextNode)) {
+                    console.warn('Card does not support focusable elements, please contact the team regarding your use case.');
+                    break;
+                }
+                nextNode = walker.nextNode();
+            }
         }
-    // ToDo: how to re-run if image src changes?
     }, [
-        props.children,
-        setIsCloseToSquare,
-        isQuiet,
-        layout
+        children
     ]);
     return(/*#__PURE__*/ $k8Xpo$react.createElement($k8Xpo$FocusRing, {
         focusRingClass: $k8Xpo$classNames((/*@__PURE__*/$parcel$interopDefault($2ebe8b6b61a3e4e2$exports)), 'focus-ring')
@@ -289,7 +233,6 @@ function $6b5e97142b400aef$var$CardBase(props, ref) {
             'spectrum-Card--default': !isQuiet && orientation !== 'horizontal',
             'spectrum-Card--isQuiet': isQuiet && orientation !== 'horizontal',
             'spectrum-Card--horizontal': orientation === 'horizontal',
-            'spectrum-Card--closeToSquare': isCloseToSquare,
             'spectrum-Card--noPreview': !hasPreview,
             'is-hovered': isHovered,
             'is-focused': isFocused,
@@ -305,6 +248,7 @@ function $6b5e97142b400aef$var$CardBase(props, ref) {
     }, manager && manager.selectionMode !== 'none' && /*#__PURE__*/ $k8Xpo$react.createElement("div", {
         className: $k8Xpo$classNames((/*@__PURE__*/$parcel$interopDefault($2ebe8b6b61a3e4e2$exports)), 'spectrum-Card-checkboxWrapper')
     }, /*#__PURE__*/ $k8Xpo$react.createElement($k8Xpo$Checkbox, {
+        ref: checkboxRef,
         isDisabled: isDisabled,
         excludeFromTabOrder: true,
         isSelected: isSelected,
@@ -314,7 +258,7 @@ function $6b5e97142b400aef$var$CardBase(props, ref) {
         "aria-label": "select"
     })), /*#__PURE__*/ $k8Xpo$react.createElement($k8Xpo$SlotProvider, {
         slots: slots
-    }, props.children, hasFooter && /*#__PURE__*/ $k8Xpo$react.createElement($k8Xpo$Divider, null)), /*#__PURE__*/ $k8Xpo$react.createElement("div", {
+    }, children), /*#__PURE__*/ $k8Xpo$react.createElement("div", {
         className: $k8Xpo$classNames((/*@__PURE__*/$parcel$interopDefault($2ebe8b6b61a3e4e2$exports)), 'spectrum-Card-decoration')
     })))));
 }
@@ -688,6 +632,10 @@ function $49e01256efa8773b$var$InternalCard(props) {
     }, state, unwrappedRef);
     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(/*#__PURE__*/ $k8Xpo$react.createElement("div", {
         ...rowProps,
         ref: rowRef,
@@ -912,8 +860,8 @@ const $22fcfd471bc7ee86$var$DEFAULT_OPTIONS = {
         minItemSize: new $k8Xpo$Size(136, 136),
         itemSpacing: new $k8Xpo$Size(18, 18),
         itemPadding: {
-            'medium': 114,
-            'large': 143
+            'medium': 78,
+            'large': 99
         },
         dropSpacing: 100,
         margin: 24
@@ -1304,8 +1252,6 @@ class $e7acb160b0e0df88$export$e9f7cda058ba8df8 extends $ce95ffe2429f6396$export
         this.margin = options.margin != null ? options.margin : 24;
         this.minSpace = options.minSpace || new $k8Xpo$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;
         this.lastCollection = null;
@@ -1345,8 +1291,8 @@ class $e7acb160b0e0df88$export$e9f7cda058ba8df8 extends $ce95ffe2429f6396$export
             } 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;
             // Figure out which column to place the item in, and compute its position.
             let column = this.getNextColumnIndex(columnHeights);