npm - @react-spectrum/card - Versions diffs - 3.0.0-alpha.1 → 3.0.0-alpha.10 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/types.d.ts CHANGED Viewed

@@ -1,15 +1,9 @@
-import { DOMRefValue, Direction, KeyboardDelegate, Node, Orientation } from "@react-types/shared";
-import React, { Key } from "react";
-import { SpectrumCardViewProps } from "@react-types/card";
+import { Direction, KeyboardDelegate, Node, Orientation, DOMRef, DOMRefValue, ItemProps } from "@react-types/shared";
 import { GridCollection } from "@react-stately/grid";
 import { InvalidationContext, Layout, LayoutInfo, Rect, Size } from "@react-stately/virtualizer";
+import React, { Key, ReactElement } from "react";
 import { Scale } from "@react-types/provider";
-/**
- * TODO: Add description of component here.
- */
-export const CardView: <T>(props: SpectrumCardViewProps<T> & {
-    ref?: React.Ref<DOMRefValue<HTMLDivElement>>;
-}) => 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>)>;
+import { SpectrumCardViewProps, SpectrumCardProps } from "@react-types/card";
 interface BaseLayoutOptions {
     collator?: Intl.Collator;
     scale?: Scale;
@@ -49,7 +43,7 @@ declare class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate
     getLastKey(): any;
     getKeyPageAbove(key: Key): any;
     getKeyPageBelow(key: Key): any;
-    getKeyForSearch(search: string, fromKey?: Key): string | number;
+    getKeyForSearch(search: string, fromKey?: Key): Key;
 }
 export interface GalleryLayoutOptions extends BaseLayoutOptions {
     /**
@@ -64,7 +58,7 @@ export interface GalleryLayoutOptions extends BaseLayoutOptions {
     itemSpacing?: Size;
     /**
      * The vertical padding for an item.
-     * @default 114
+     * @default 78
      */
     itemPadding?: number;
     /**
@@ -168,18 +162,12 @@ export interface WaterfallLayoutOptions extends BaseLayoutOptions {
      * @default Infinity
      */
     maxColumns?: number;
-    /**
-     * The vertical padding for an item.
-     * @default 56
-     */
-    itemPadding?: number;
 }
 export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegate {
     protected minItemSize: Size;
     protected maxItemSize: Size;
     protected minSpace: Size;
     protected maxColumns: number;
-    itemPadding: number;
     protected numColumns: number;
     protected itemWidth: number;
     protected horizontalSpacing: number;
@@ -193,6 +181,13 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
     getKeyRightOf(key: Key): any;
     getKeyLeftOf(key: Key): any;
 }
-export let Card: <T>(props: any, ref: any) => JSX.Element;
+/**
+ * TODO: Add description of component here.
+ */
+export const CardView: <T>(props: SpectrumCardViewProps<T> & {
+    ref?: DOMRef<HTMLDivElement>;
+}) => ReactElement;
+export let Card: React.ForwardRefExoticComponent<ItemProps<SpectrumCardProps> & SpectrumCardProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
+export type { SpectrumCardViewProps } from '@react-types/card';
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"A;~~A;A;A;A;A;AE6NA;A;GAEG;AACH,OAAA,MAAM;A;6MAA+H,CAAC;AC9MtI;~~IACE,QAAQ,CAAC,EAAE,KAAK,QAAQ,CAAC;IAEzB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd~~;A;A;~~OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,yBAAwB,CAAC,CAAE,SAAQ,OAAO,KAAK,CAAC,CAAC,CAAE,YAAW,gBAAgB;IAC5E,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC;IAC5B,SAAS,CAAC,WAAW,EAAE,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IAC5C,SAAS,CAAC,QAAQ,EAAE,KAAK,QAAQ,CAAC;IAClC,SAAS,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC,CAAC;IAC5C,UAAU,EAAG,eAAe,CAAC,CAAC,CAAC;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,GAAG,CAAC,GAAG,CAAC,CAAa;IACnC,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;gBAEH,OAAO,GAAE,iBAAsB;IAS3C,QAAQ,CAAC,mBAAmB,EAAE,oBAAoB,KAAK,CAAC,CAAC,EAAE,OAAO,CAAC;IAyBnE,eAAe,CAAC,mBAAmB,CAAC,EAAE,oBAAoB,KAAK,CAAC,CAAC,EAAE,OAAO,CAAC;IAE3E,cAAc;IAId,aAAa,CAAC,GAAG,EAAE,GAAG;IAItB,qBAAqB,CAAC,IAAI,KAAA;IAY1B,SAAS,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI;IAI5C,oBAAoB,CAAC,UAAU,EAAE,UAAU;IAM3C,kBAAkB,CAAC,UAAU,EAAE,UAAU;IAMzC,sBAAsB,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IAwB/C,YAAY,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IAKrC,WAAW,CAAC,GAAG,EAAE,GAAG;IASpB,WAAW,CAAC,GAAG,EAAE,GAAG;IASpB,aAAa,CAAC,GAAG,EAAE,GAAG;IAetB,YAAY,CAAC,GAAG,EAAE,GAAG;IAerB,WAAW;IAKX,UAAU;IAOV,eAAe,CAAC,GAAG,EAAE,GAAG;IA+BxB,eAAe,CAAC,GAAG,EAAE,GAAG;IA2BxB,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG;CAyB9C;AC9QD,qCAAsC,SAAQ,iBAAiB;IAK7D~~;A;A;~~OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB~~;A;A;~~OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB~~;A;A;~~OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB~~;A;A;~~OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB~~;A;A;A;~~OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAwBD,2BAA2B,CAAC,CAAE,SAAQ,WAAW,CAAC,CAAC;IACjD,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC;IACjC,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC;IAC5B,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC;gBAEhB,OAAO,GAAE,oBAAyB;IAW9C,IAAI,UAAU,WAEb;IAED~~;A;A;A;~~SAIK;IACL,iBAAiB,CAAC,MAAM,KAAA;IAqCxB,eAAe;~~CA2GhB~~;~~AChOD~~,kCAAmC,SAAQ,iBAAiB;IAK1D~~;A;A;~~OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB~~;A;A;~~OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB~~;A;A;~~OAGG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB~~;A;A;~~OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB~~;A;A;~~OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB~~;A;A;~~OAGG;IACH,eAAe,CAAC,EAAE,WAAW,CAAA;CAC9B;AAqCD,wBAAwB,CAAC,CAAE,SAAQ,WAAW,CAAC,CAAC;IAC9C,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC;IAC5B,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC;IAC5B,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC;IACzB,SAAS,CAAC,UAAU,EAAE,MAAM,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,WAAW,CAAC;IAC7B,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC;IACzB,SAAS,CAAC,UAAU,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,iBAAiB,EAAE,MAAM,CAAC;gBAExB,OAAO,GAAE,iBAAsB;IAgB3C,IAAI,UAAU,WAEb;IAED,eAAe,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,EAAE,mBAAmB,UAAQ;IAWjD,qBAAqB,CAAC,IAAI,KAAA;IAmC1B,eAAe;IA8Df,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,UAAU;IAiB/D,WAAW,CAAC,GAAG,EAAE,GAAG;IAcpB,WAAW,CAAC,GAAG,EAAE,GAAG;CAarB;AChQD,uCAAwC,SAAQ,iBAAiB;IAC/D~~;A;A;~~OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB~~;A;A;~~OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB~~;A;A;~~OAGG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB~~;A;A;~~OAGG;IACH,UAAU,CAAC,EAAE,MAAM,~~CAAC;IACpB;A;A;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,~~CAAA;~~CACrB~~;AAGD,6BAA6B,CAAC,CAAE,SAAQ,WAAW,CAAC,CAAE,YAAW,gBAAgB;IAC/E,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC;IAC5B,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC;IAC5B,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC;IACzB,SAAS,CAAC,UAAU,EAAE,MAAM,CAAC;IAC7B,~~WAAW,EAAE,MAAM,CAAC;IACpB,~~SAAS,CAAC,UAAU,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,iBAAiB,EAAE,MAAM,CAAC;gBAExB,OAAO,GAAE,sBAA2B;~~IAmBhD~~,IAAI,UAAU,WAEb;IAED,eAAe,CAAC,mBAAmB,EAAE,oBAAoB,KAAK,CAAC,CAAC,EAAE,OAAO,CAAC;IA6F1E,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI;~~IAoBnC~~,kBAAkB,CAAC,aAAa,KAAA;IAWhC,eAAe,CAAC,GAAG,EAAE,GAAG;IAkBxB,cAAc,CAAC,GAAG,EAAE,GAAG;IAcvB,aAAa,CAAC,GAAG,EAAE,GAAG;IAMtB,YAAY,CAAC,GAAG,EAAE,GAAG;CAKtB;~~ACtMD~~,OAAA,IAAI,~~8CAA8C~~,CAAC","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"}
1	+ {"mappings":"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","sources":["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/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/Card.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/index.ts","packages/@react-spectrum/card/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,"/\n Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport type {GalleryLayoutOptions} from './GalleryLayout';\nexport type {GridLayoutOptions} from './GridLayout';\nexport type {WaterfallLayoutOptions} from './WaterfallLayout';\n\nexport {CardView} from './CardView';\nexport {GalleryLayout} from './GalleryLayout';\nexport {GridLayout} from './GridLayout';\nexport {WaterfallLayout} from './WaterfallLayout';\nexport {Card} from './Card';\nexport type {SpectrumCardViewProps} from '@react-types/card';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/card",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.10",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -32,35 +32,35 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/focus": "^3.4.0",
-    "@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.6.3",
-    "@react-stately/collections": "^3.3.4",
-    "@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"
+    "@react-aria/focus": "^3.7.0",
+    "@react-aria/grid": "^3.4.0",
+    "@react-aria/i18n": "^3.5.0",
+    "@react-aria/interactions": "^3.10.0",
+    "@react-aria/utils": "^3.13.2",
+    "@react-aria/virtualizer": "^3.4.2",
+    "@react-spectrum/checkbox": "^3.5.0",
+    "@react-spectrum/divider": "^3.4.0",
+    "@react-spectrum/layout": "^3.4.0",
+    "@react-spectrum/progress": "^3.3.0",
+    "@react-spectrum/utils": "^3.7.2",
+    "@react-stately/collections": "^3.4.2",
+    "@react-stately/grid": "^3.3.0",
+    "@react-stately/list": "^3.5.2",
+    "@react-stately/utils": "^3.5.1",
+    "@react-stately/virtualizer": "^3.2.2",
+    "@react-types/card": "3.0.0-alpha.8",
+    "@react-types/provider": "^3.5.2",
+    "@react-types/shared": "^3.14.0"
   },
   "devDependencies": {
     "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "896eabe5521a0349a675c4773ed7629addd4b8c4"
+  "gitHead": "cd7c0ec917122c7612f653c22f8ed558f8b66ecd"
 }

package/src/Card.tsx CHANGED Viewed

@@ -10,14 +10,14 @@
  * governing permissions and limitations under the License.
  */
 import {CardBase} from './CardBase';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue, ItemProps} from '@react-types/shared';
 import {PartialNode} from '@react-stately/collections';
-import React, {forwardRef} from 'react';
+import React, {forwardRef, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes} from 'react';
 import {SpectrumCardProps} from '@react-types/card';
 import {useCardViewContext} from './CardViewContext';
 let Card = forwardRef((props: SpectrumCardProps, ref: DOMRef<HTMLDivElement>) => {
   let context = useCardViewContext();
   if (context !== null) {
@@ -29,10 +29,8 @@ let Card = forwardRef((props: SpectrumCardProps, ref: DOMRef<HTMLDivElement>) =>
   }
 });
-// TODO: Update the typescript for the below and the export
 // @ts-ignore
-// eslint-disable-next-line
-Card.getCollectionNode = function* getCollectionNode<T>(props, context: any): Generator<PartialNode<T>> {
+Card.getCollectionNode = function* getCollectionNode<T>(props: any): Generator<PartialNode<T>> {
   let {children, textValue} = props;
   yield {
@@ -45,6 +43,5 @@ Card.getCollectionNode = function* getCollectionNode<T>(props, context: any): Ge
   };
 };
-// eslint-disable-next-line
-let _Card = Card as <T>(props, ref) => JSX.Element;
+let _Card = Card as ForwardRefExoticComponent<ItemProps<SpectrumCardProps> & PropsWithoutRef<SpectrumCardProps> & RefAttributes<DOMRefValue<HTMLDivElement>>>;
 export {_Card as Card};

package/src/CardBase.tsx CHANGED Viewed

@@ -13,10 +13,10 @@
 import {AriaCardProps, SpectrumCardProps} from '@react-types/card';
 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, useResizeObserver, useSlotId} from '@react-aria/utils';
 import {FocusRing} from '@react-aria/focus';
+import {getFocusableTreeWalker} from  '@react-aria/focus';
 import React, {HTMLAttributes, useCallback, useMemo, useRef, useState} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/card/vars.css';
 import {useCardViewContext} from './CardViewContext';
@@ -38,7 +38,8 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
     orientation = 'vertical',
     articleProps = {},
     item,
-    layout
+    layout,
+    children
   } = props;
   let key = item?.key;
@@ -50,6 +51,7 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
   let {cardProps, titleProps, contentProps} = useCard(props);
   let domRef = useDOMRef(ref);
   let gridRef = useRef<HTMLDivElement>();
+  let checkboxRef = useRef(null);
   // cards are only interactive if there is a selection manager and it allows selection
   let {hoverProps, isHovered} = useHover({isDisabled: manager === undefined || manager?.selectionMode === 'none' || isDisabled});
@@ -59,8 +61,6 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
     isDisabled
   });
-  let hasFooter = useHasChild(`.${styles['spectrum-Card-footer']}`, gridRef);
   // ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default
   let hasPreviewImage = useHasChild(`.${styles['spectrum-Card-image']}`, gridRef);
   let hasPreviewIllustration = useHasChild(`.${styles['spectrum-Card-illustration']}`, gridRef);
@@ -92,63 +92,22 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
     avatar: {UNSAFE_className: classNames(styles, 'spectrum-Card-avatar'), size: 'avatar-size-400'},
     heading: {UNSAFE_className: classNames(styles, 'spectrum-Card-heading'), ...titleProps},
     content: {UNSAFE_className: classNames(styles, 'spectrum-Card-content'), ...contentProps},
-    detail: {UNSAFE_className: classNames(styles, 'spectrum-Card-detail')},
-    actionmenu: {UNSAFE_className: classNames(styles, 'spectrum-Card-actions'), align: 'end', isQuiet: true},
-    footer: {UNSAFE_className: classNames(styles, 'spectrum-Card-footer'), isHidden: isQuiet},
-    divider: {UNSAFE_className: classNames(styles, 'spectrum-Card-divider'), size: 'S'}
+    detail: {UNSAFE_className: classNames(styles, 'spectrum-Card-detail')}
   }), [titleProps, contentProps, height, isQuiet, orientation]);
-  // This is only for quiet grid cards
-  let [isCloseToSquare, setIsCloseToSquare] = useState(false);
   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(`.${styles['spectrum-Card-image']} img`) as HTMLImageElement;
-    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) { // ToDo: does this need to be different per scale?
-        setIsCloseToSquare(true);
-      } else {
-        setIsCloseToSquare(false);
+    if (gridRef?.current) {
+      let walker = 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();
       }
-      // 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);
-      };
     }
-    // ToDo: how to re-run if image src changes?
-  }, [props.children, setIsCloseToSquare, isQuiet, layout]);
+  }, [children]);
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
@@ -160,7 +119,6 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
           '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,
@@ -174,6 +132,7 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
           {manager && manager.selectionMode !== 'none' && (
             <div className={classNames(styles, 'spectrum-Card-checkboxWrapper')}>
               <Checkbox
+                ref={checkboxRef}
                 isDisabled={isDisabled}
                 excludeFromTabOrder
                 isSelected={isSelected}
@@ -184,8 +143,7 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
             </div>
           )}
           <SlotProvider slots={slots}>
-            {props.children}
-            {hasFooter && <Divider />}
+            {children}
           </SlotProvider>
           <div className={classNames(styles, 'spectrum-Card-decoration')} />
         </div>

package/src/CardView.tsx CHANGED Viewed

@@ -17,12 +17,13 @@ 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, 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 {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';
@@ -46,7 +47,7 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
   let cardViewLayout = useMemo(() => typeof layout === 'function' ? new layout({collator, cardOrientation, scale}) : layout, [layout, collator, cardOrientation, scale]);
   let layoutType = cardViewLayout.layoutType;
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let {direction} = useLocale();
   let {collection} = useListState(props);
@@ -137,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') {
@@ -185,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);
@@ -195,6 +196,20 @@ 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;
@@ -204,6 +219,10 @@ function InternalCard(props) {
     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} className={classNames(styles, 'spectrum-CardView-row')}>
       <CardBase

package/src/GalleryLayout.tsx CHANGED Viewed

@@ -30,7 +30,7 @@ export interface GalleryLayoutOptions extends BaseLayoutOptions {
   itemSpacing?: Size,
   /**
    * The vertical padding for an item.
-   * @default 114
+   * @default 78
    */
   itemPadding?: number,
   /**
@@ -60,8 +60,8 @@ const DEFAULT_OPTIONS = {
     minItemSize: new Size(136, 136),
     itemSpacing: new Size(18, 18),
     itemPadding: {
-      'medium': 114,
-      'large': 143
+      'medium': 78,
+      'large': 99
     },
     dropSpacing: 100,
     margin: 24
@@ -138,105 +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);
-        layoutInfo.allowOverflow = true;
-        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);
   }
 }