@react-spectrum/card 3.0.0-alpha.3 → 3.0.0-alpha.31

package/dist/zh-TW.mjs

@@ -0,0 +1,9 @@
+var $b7e2865acb74a940$exports = {};
+$b7e2865acb74a940$exports = {
+    "loading": `\u{6B63}\u{5728}\u{8F09}\u{5165}\u{2026}`,
+    "loadingMore": `\u{6B63}\u{5728}\u{8F09}\u{5165}\u{66F4}\u{591A}\u{2026}`
+};
+
+
+export {$b7e2865acb74a940$exports as default};
+//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js

@@ -0,0 +1,9 @@
+var $b7e2865acb74a940$exports = {};
+$b7e2865acb74a940$exports = {
+    "loading": `\u{6B63}\u{5728}\u{8F09}\u{5165}\u{2026}`,
+    "loadingMore": `\u{6B63}\u{5728}\u{8F09}\u{5165}\u{66F4}\u{591A}\u{2026}`
+};
+
+
+export {$b7e2865acb74a940$exports as default};
+//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,wCAAK,CAAC;IACpC,eAAe,CAAC,wDAAO,CAAC;AAC1B","sources":["packages/@react-spectrum/card/intl/zh-TW.json"],"sourcesContent":["{\n  \"loading\": \"正在載入…\",\n  \"loadingMore\": \"正在載入更多…\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@react-spectrum/card",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-alpha.31",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
   "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
   "types": "dist/types.d.ts",
   "source": "src/index.ts",
   "files": [
@@ -31,36 +36,34 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@babel/runtime": "^7.6.2",
-    "@react-aria/focus": "^3.5.2",
-    "@react-aria/grid": "^3.2.2",
-    "@react-aria/i18n": "^3.3.6",
-    "@react-aria/interactions": "^3.8.1",
-    "@react-aria/utils": "^3.11.2",
-    "@react-aria/virtualizer": "^3.3.7",
-    "@react-spectrum/checkbox": "^3.3.1",
-    "@react-spectrum/divider": "^3.2.1",
-    "@react-spectrum/layout": "^3.2.3",
-    "@react-spectrum/progress": "^3.1.5",
-    "@react-spectrum/utils": "^3.6.5",
-    "@react-stately/collections": "^3.3.6",
-    "@react-stately/grid": "^3.1.2",
-    "@react-stately/list": "^3.4.3",
-    "@react-stately/utils": "^3.4.1",
-    "@react-stately/virtualizer": "^3.1.7",
-    "@react-types/card": "3.0.0-alpha.3",
-    "@react-types/provider": "^3.4.1",
-    "@react-types/shared": "^3.11.1"
+    "@react-aria/focus": "^3.16.2",
+    "@react-aria/grid": "^3.8.8",
+    "@react-aria/i18n": "^3.10.2",
+    "@react-aria/interactions": "^3.21.1",
+    "@react-aria/utils": "^3.23.2",
+    "@react-aria/virtualizer": "^3.9.10",
+    "@react-spectrum/checkbox": "^3.9.4",
+    "@react-spectrum/progress": "^3.7.5",
+    "@react-spectrum/utils": "^3.11.5",
+    "@react-stately/collections": "^3.10.5",
+    "@react-stately/grid": "^3.8.5",
+    "@react-stately/list": "^3.10.3",
+    "@react-stately/virtualizer": "^3.6.8",
+    "@react-types/card": "3.0.0-alpha.24",
+    "@react-types/provider": "^3.7.2",
+    "@react-types/shared": "^3.22.1",
+    "@swc/helpers": "^0.5.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",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "404d41859b7d6f56201d7fc01bd9f22ae3512937"
+  "gitHead": "de9f84a22583fc741c29b341d14cd35ef4cca161"
 }

package/src/BaseLayout.tsx

@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {Direction, KeyboardDelegate, Node} from '@react-types/shared';
+import {Direction, Key, KeyboardDelegate, Node} from '@react-types/shared';
+import {getChildNodes, getFirstItem} from '@react-stately/collections';
 import {GridCollection} from '@react-stately/grid';
 import {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';
-import {Key} from 'react';
 import {Scale} from '@react-types/provider';
 
 export interface BaseLayoutOptions {
@@ -146,7 +146,7 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
     let layoutInfo = this.getLayoutInfo(parentRowKey);
     let rect = new Rect(layoutInfo.rect.x, layoutInfo.rect.maxY + 1, layoutInfo.rect.width, this.virtualizer.visibleRect.height);
     let closestRow = this.collection.getItem(this._findClosest(layoutInfo.rect, rect)?.key);
-    return closestRow?.childNodes[0]?.key;
+    return getFirstItem(getChildNodes(closestRow, this.collection))?.key;
   }
 
   getKeyAbove(key: Key) {
@@ -155,7 +155,7 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
     let layoutInfo = this.getLayoutInfo(parentRowKey);
     let rect = new Rect(layoutInfo.rect.x, 0, layoutInfo.rect.width, layoutInfo.rect.y - 1);
     let closestRow = this.collection.getItem(this._findClosest(layoutInfo.rect, rect)?.key);
-    return closestRow?.childNodes[0]?.key;
+    return getFirstItem(getChildNodes(closestRow, this.collection))?.key;
   }
 
   getKeyRightOf(key: Key) {
@@ -167,7 +167,7 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
       let item = this.collection.getItem(key);
       // Don't check if item is disabled because we want to be able to focus disabled items in a grid (double check this)
       if (item.type === 'item') {
-        return item.childNodes[0].key;
+        return getFirstItem(getChildNodes(item, this.collection))?.key;
       }
       key = this.direction === 'rtl' ?  this.collection.getKeyBefore(key) : this.collection.getKeyAfter(key);
     }
@@ -181,7 +181,7 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
       let item = this.collection.getItem(key);
       // Don't check if item is disabled because we want to be able to focus disabled items in a grid (double check this)
       if (item.type === 'item') {
-        return item.childNodes[0].key;
+        return getFirstItem(getChildNodes(item, this.collection))?.key;
       }
 
       key = this.direction === 'rtl' ?  this.collection.getKeyAfter(key) : this.collection.getKeyBefore(key);
@@ -190,12 +190,12 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
 
   getFirstKey() {
     let firstRow = this.collection.getItem(this.collection.getFirstKey());
-    return firstRow.childNodes[0].key;
+    return getFirstItem(getChildNodes(firstRow, this.collection))?.key;
   }
 
   getLastKey() {
     let lastRow = this.collection.getItem(this.collection.getLastKey());
-    return lastRow.childNodes[0].key;
+    return getFirstItem(getChildNodes(lastRow, this.collection))?.key;
   }
 
   // TODO: pretty unwieldy because it needs to bounce back and forth between the parent key and the child key
@@ -214,14 +214,14 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
 
       if (layoutInfo && layoutInfo.rect.y > pageY) {
         while (layoutInfo && layoutInfo.rect.y > pageY) {
-          let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
+          let childKey = getFirstItem(getChildNodes(this.collection.getItem(layoutInfo.key), this.collection))?.key;
           let keyAbove = this.collection.getItem(this.getKeyAbove(childKey))?.parentKey;
           layoutInfo = this.getLayoutInfo(keyAbove);
         }
       }
 
       if (layoutInfo) {
-        let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
+        let childKey = getFirstItem(getChildNodes(this.collection.getItem(layoutInfo.key), this.collection))?.key;
         return childKey;
       }
     }
@@ -243,14 +243,14 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
       layoutInfo = this.getLayoutInfo(keyBelow);
       if (layoutInfo && layoutInfo.rect.y < pageY) {
         while (layoutInfo && layoutInfo.rect.y < pageY) {
-          let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
+          let childKey = getFirstItem(getChildNodes(this.collection.getItem(layoutInfo.key), this.collection))?.key;
           let keyBelow = this.collection.getItem(this.getKeyBelow(childKey))?.parentKey;
           layoutInfo = this.getLayoutInfo(keyBelow);
         }
       }
 
       if (layoutInfo) {
-        let childKey = this.collection.getItem(layoutInfo.key).childNodes[0].key;
+        let childKey = getFirstItem(getChildNodes(this.collection.getItem(layoutInfo.key), this.collection))?.key;
         return childKey;
       }
     }
@@ -274,7 +274,7 @@ export class BaseLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {
       if (item.textValue) {
         let substring = item.textValue.slice(0, search.length);
         if (this.collator.compare(substring, search) === 0) {
-          return [...item.childNodes][0].key;
+          return getFirstItem(getChildNodes(item, this.collection))?.key;
         }
       }
 

package/src/CardBase.tsx

@@ -15,8 +15,7 @@ import {Checkbox} from '@react-spectrum/checkbox';
 import {classNames, SlotProvider, useDOMRef, useHasChild, useStyleProps} from '@react-spectrum/utils';
 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 {FocusRing, 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';
@@ -93,6 +92,7 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
     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')}
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [titleProps, contentProps, height, isQuiet, orientation]);
 
   useLayoutEffect(() => {

package/src/CardView.tsx

@@ -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 React, {ReactElement, ReactNode, 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, '@react-spectrum/card');
   let {direction} = useLocale();
   let {collection} = useListState(props);
 
@@ -87,12 +88,15 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
     keyboardDelegate: cardViewLayout
   }, state, domRef);
 
-  type View = ReusableView<Node<T>, unknown>;
+  type View = ReusableView<Node<T>, ReactNode>;
   let renderWrapper = (parent: View, reusableView: View) => (
     <VirtualizerItem
       key={reusableView.key}
-      reusableView={reusableView}
-      parent={parent} />
+      layoutInfo={reusableView.layoutInfo}
+      virtualizer={reusableView.virtualizer}
+      parent={parent?.layoutInfo}>
+      {reusableView.rendered}
+    </VirtualizerItem>
   );
 
   let focusedKey = state.selectionManager.focusedKey;
@@ -137,7 +141,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 +189,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 +199,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;

package/src/GalleryLayout.tsx

@@ -109,6 +109,7 @@ export class GalleryLayout<T> extends BaseLayout<T> {
           if (widths[item[0]][1] > this.minItemSize.width) {
             // subtract the delta from the width, if it's still greater than the min width
             // then we have finished, subtract the delta permanently from that width
+            // eslint-disable-next-line max-depth
             if (widths[item[0]][1] - delta > this.minItemSize.width) {
               widths[item[0]][1] -= delta;
               delta = 0;

package/src/GridLayout.tsx

@@ -11,9 +11,9 @@
  */
 
 import {BaseLayout, BaseLayoutOptions} from './BaseLayout';
-import {Key} from 'react';
+import {getChildNodes, getFirstItem} from '@react-stately/collections';
+import {Key, Node, Orientation} from '@react-types/shared';
 import {LayoutInfo, Rect, Size} from '@react-stately/virtualizer';
-import {Node, Orientation} from '@react-types/shared';
 
 export interface GridLayoutOptions extends BaseLayoutOptions {
   // /**
@@ -255,7 +255,8 @@ export class GridLayout<T> extends BaseLayout<T> {
       return null;
     }
 
-    return this.collection.rows[indexRowBelow]?.childNodes[0].key || null;
+    let row = this.collection.rows[indexRowBelow];
+    return row ? getFirstItem(getChildNodes(row, this.collection))?.key : null;
   }
 
   getKeyAbove(key: Key) {
@@ -269,6 +270,7 @@ export class GridLayout<T> extends BaseLayout<T> {
       return null;
     }
 
-    return this.collection.rows[indexRowAbove]?.childNodes[0].key || null;
+    let row = this.collection.rows[indexRowAbove];
+    return row ? getFirstItem(getChildNodes(row, this.collection))?.key : null;
   }
 }

package/src/WaterfallLayout.tsx

@@ -11,9 +11,9 @@
  */
 
 import {BaseLayout, BaseLayoutOptions} from './BaseLayout';
+import {getChildNodes, getFirstItem} from '@react-stately/collections';
 import {InvalidationContext, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';
-import {Key} from 'react';
-import {KeyboardDelegate, Node} from '@react-types/shared';
+import {Key, KeyboardDelegate, Node} from '@react-types/shared';
 
 export interface WaterfallLayoutOptions extends BaseLayoutOptions {
   /**
@@ -207,7 +207,8 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
       key = this._findClosest(layoutInfo.rect, rect)?.key;
     }
 
-    return this.collection.getItem(key)?.childNodes[0]?.key;
+    let item = this.collection.getItem(key);
+    return getFirstItem(getChildNodes(item, this.collection))?.key;
   }
 
   getClosestLeft(key: Key) {
@@ -221,7 +222,8 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
       key = this._findClosest(layoutInfo.rect, rect)?.key;
     }
 
-    return this.collection.getItem(key)?.childNodes[0]?.key;
+    let item = this.collection.getItem(key);
+    return getFirstItem(getChildNodes(item, this.collection))?.key;
   }
 
   getKeyRightOf(key: Key) {

package/src/index.ts

@@ -12,8 +12,13 @@
 
 /// <reference types="css-module-types" />
 
-export * from './CardView';
-export * from './GalleryLayout';
-export * from './GridLayout';
-export * from './WaterfallLayout';
-export * from './Card';
+export type {GalleryLayoutOptions} from './GalleryLayout';
+export type {GridLayoutOptions} from './GridLayout';
+export type {WaterfallLayoutOptions} from './WaterfallLayout';
+
+export {CardView} from './CardView';
+export {GalleryLayout} from './GalleryLayout';
+export {GridLayout} from './GridLayout';
+export {WaterfallLayout} from './WaterfallLayout';
+export {Card} from './Card';
+export type {SpectrumCardViewProps} from '@react-types/card';