@react-spectrum/s2 3.0.0-nightly-73414999f-240916 → 3.0.0-nightly-9e79420c1-240918

package/dist/CardView.cjs

@@ -3,9 +3,10 @@ var $230078a1c4ce81d8$exports = require("./Card.cjs");
 var $a4f1585b527b9b7a$exports = require("./ImageCoordinator.cjs");
 var $gDulG$reactjsxruntime = require("react/jsx-runtime");
 var $gDulG$reactariacomponents = require("react-aria-components");
+var $gDulG$react = require("react");
 var $gDulG$reactstatelyvirtualizer = require("@react-stately/virtualizer");
+var $gDulG$reactspectrumutils = require("@react-spectrum/utils");
 var $gDulG$reactariautils = require("@react-aria/utils");
-var $gDulG$react = require("react");
 
 
 function $parcel$export(e, n, v, s) {
@@ -30,40 +31,32 @@ $parcel$export(module.exports, "CardView", () => $1aaf8931044a97bd$export$7e52c8
 
 
 
+
 class $1aaf8931044a97bd$var$FlexibleGridLayout extends (0, $gDulG$reactstatelyvirtualizer.Layout) {
-    constructor(options){
-        super();
-        this.contentSize = new (0, $gDulG$reactstatelyvirtualizer.Size)();
-        this.layoutInfos = new Map();
-        this.minItemSize = options.minItemSize || new (0, $gDulG$reactstatelyvirtualizer.Size)(200, 200);
-        this.maxItemSize = options.maxItemSize || new (0, $gDulG$reactstatelyvirtualizer.Size)(Infinity, Infinity);
-        this.minSpace = options.minSpace || new (0, $gDulG$reactstatelyvirtualizer.Size)(18, 18);
-        this.maxColumns = options.maxColumns || Infinity;
-        this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
-    }
     update(invalidationContext) {
+        let { minItemSize: minItemSize = new (0, $gDulG$reactstatelyvirtualizer.Size)(200, 200), maxItemSize: maxItemSize = new (0, $gDulG$reactstatelyvirtualizer.Size)(Infinity, Infinity), minSpace: minSpace = new (0, $gDulG$reactstatelyvirtualizer.Size)(18, 18), maxColumns: maxColumns = Infinity } = invalidationContext.layoutOptions || {};
         let visibleWidth = this.virtualizer.visibleRect.width;
         // The max item width is always the entire viewport.
         // If the max item height is infinity, scale in proportion to the max width.
-        let maxItemWidth = Math.min(this.maxItemSize.width, visibleWidth);
-        let maxItemHeight = Number.isFinite(this.maxItemSize.height) ? this.maxItemSize.height : Math.floor(this.minItemSize.height / this.minItemSize.width * maxItemWidth);
+        let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);
+        let maxItemHeight = Number.isFinite(maxItemSize.height) ? maxItemSize.height : Math.floor(minItemSize.height / minItemSize.width * maxItemWidth);
         // Compute the number of rows and columns needed to display the content
-        let columns = Math.floor(visibleWidth / (this.minItemSize.width + this.minSpace.width));
-        let numColumns = Math.max(1, Math.min(this.maxColumns, columns));
+        let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));
+        let numColumns = Math.max(1, Math.min(maxColumns, columns));
         // Compute the available width (minus the space between items)
-        let width = visibleWidth - this.minSpace.width * Math.max(0, numColumns);
+        let width = visibleWidth - minSpace.width * Math.max(0, numColumns);
         // Compute the item width based on the space available
         let itemWidth = Math.floor(width / numColumns);
-        itemWidth = Math.max(this.minItemSize.width, Math.min(maxItemWidth, itemWidth));
+        itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));
         // Compute the item height, which is proportional to the item width
-        let t = (itemWidth - this.minItemSize.width) / Math.max(1, maxItemWidth - this.minItemSize.width);
-        let itemHeight = this.minItemSize.height + Math.floor((maxItemHeight - this.minItemSize.height) * t);
-        itemHeight = Math.max(this.minItemSize.height, Math.min(maxItemHeight, itemHeight));
+        let t = (itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width);
+        let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);
+        itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));
         // Compute the horizontal spacing and content height
         let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));
         let rows = Math.ceil(this.virtualizer.collection.size / numColumns);
         let iterator = this.virtualizer.collection[Symbol.iterator]();
-        let y = rows > 0 ? this.minSpace.height : 0;
+        let y = rows > 0 ? minSpace.height : 0;
         let newLayoutInfos = new Map();
         let skeleton = null;
         let skeletonCount = 0;
@@ -76,27 +69,28 @@ class $1aaf8931044a97bd$var$FlexibleGridLayout extends (0, $gDulG$reactstatelyvi
                 if (!node) break;
                 if (node.type === 'skeleton') skeleton = node;
                 let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;
+                let content = skeleton ? {
+                    ...skeleton
+                } : node;
                 let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);
                 let oldLayoutInfo = this.layoutInfos.get(key);
                 let height = itemHeight;
                 let estimatedSize = true;
                 if (oldLayoutInfo) {
                     height = oldLayoutInfo.rect.height;
-                    estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize;
+                    estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== content;
                 }
                 let rect = new (0, $gDulG$reactstatelyvirtualizer.Rect)(x, y, itemWidth, height);
                 let layoutInfo = new (0, $gDulG$reactstatelyvirtualizer.LayoutInfo)(node.type, key, rect);
                 layoutInfo.estimatedSize = estimatedSize;
                 layoutInfo.allowOverflow = true;
-                if (skeleton) layoutInfo.content = {
-                    ...skeleton
-                };
+                layoutInfo.content = content;
                 newLayoutInfos.set(key, layoutInfo);
                 rowLayoutInfos.push(layoutInfo);
                 maxHeight = Math.max(maxHeight, rect.height);
             }
             for (let layoutInfo of rowLayoutInfos)layoutInfo.rect.height = maxHeight;
-            y += maxHeight + this.minSpace.height;
+            y += maxHeight + minSpace.height;
             // Keep adding skeleton rows until we fill the viewport
             if (skeleton && row === rows - 1 && y < this.virtualizer.visibleRect.height) rows++;
         }
@@ -126,40 +120,36 @@ class $1aaf8931044a97bd$var$FlexibleGridLayout extends (0, $gDulG$reactstatelyvi
         }
         return false;
     }
-}
-class $1aaf8931044a97bd$var$WaterfallLayout extends (0, $gDulG$reactstatelyvirtualizer.Layout) {
-    constructor(options){
-        super();
+    constructor(...args){
+        super(...args);
         this.contentSize = new (0, $gDulG$reactstatelyvirtualizer.Size)();
         this.layoutInfos = new Map();
-        this.minItemSize = options.minItemSize || new (0, $gDulG$reactstatelyvirtualizer.Size)(200, 200);
-        this.maxItemSize = options.maxItemSize || new (0, $gDulG$reactstatelyvirtualizer.Size)(Infinity, Infinity);
-        this.minSpace = options.minSpace || new (0, $gDulG$reactstatelyvirtualizer.Size)(18, 18);
-        this.maxColumns = options.maxColumns || Infinity;
-        this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
     }
+}
+class $1aaf8931044a97bd$var$WaterfallLayout extends (0, $gDulG$reactstatelyvirtualizer.Layout) {
     update(invalidationContext) {
+        let { minItemSize: minItemSize = new (0, $gDulG$reactstatelyvirtualizer.Size)(200, 200), maxItemSize: maxItemSize = new (0, $gDulG$reactstatelyvirtualizer.Size)(Infinity, Infinity), minSpace: minSpace = new (0, $gDulG$reactstatelyvirtualizer.Size)(18, 18), maxColumns: maxColumns = Infinity } = invalidationContext.layoutOptions || {};
         let visibleWidth = this.virtualizer.visibleRect.width;
         // The max item width is always the entire viewport.
         // If the max item height is infinity, scale in proportion to the max width.
-        let maxItemWidth = Math.min(this.maxItemSize.width, visibleWidth);
-        let maxItemHeight = Number.isFinite(this.maxItemSize.height) ? this.maxItemSize.height : Math.floor(this.minItemSize.height / this.minItemSize.width * maxItemWidth);
+        let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);
+        let maxItemHeight = Number.isFinite(maxItemSize.height) ? maxItemSize.height : Math.floor(minItemSize.height / minItemSize.width * maxItemWidth);
         // Compute the number of rows and columns needed to display the content
-        let columns = Math.floor(visibleWidth / (this.minItemSize.width + this.minSpace.width));
-        let numColumns = Math.max(1, Math.min(this.maxColumns, columns));
+        let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));
+        let numColumns = Math.max(1, Math.min(maxColumns, columns));
         // Compute the available width (minus the space between items)
-        let width = visibleWidth - this.minSpace.width * Math.max(0, numColumns);
+        let width = visibleWidth - minSpace.width * Math.max(0, numColumns);
         // Compute the item width based on the space available
         let itemWidth = Math.floor(width / numColumns);
-        itemWidth = Math.max(this.minItemSize.width, Math.min(maxItemWidth, itemWidth));
+        itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));
         // Compute the item height, which is proportional to the item width
-        let t = (itemWidth - this.minItemSize.width) / Math.max(1, maxItemWidth - this.minItemSize.width);
-        let itemHeight = this.minItemSize.height + Math.floor((maxItemHeight - this.minItemSize.height) * t);
-        itemHeight = Math.max(this.minItemSize.height, Math.min(maxItemHeight, itemHeight));
+        let t = (itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width);
+        let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);
+        itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));
         // Compute the horizontal spacing and content height
         let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));
         // Setup an array of column heights
-        let columnHeights = Array(numColumns).fill(this.minSpace.height);
+        let columnHeights = Array(numColumns).fill(minSpace.height);
         let newLayoutInfos = new Map();
         let addNode = (key, node)=>{
             let oldLayoutInfo = this.layoutInfos.get(key);
@@ -167,7 +157,7 @@ class $1aaf8931044a97bd$var$WaterfallLayout extends (0, $gDulG$reactstatelyvirtu
             let estimatedSize = true;
             if (oldLayoutInfo) {
                 height = oldLayoutInfo.rect.height;
-                estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize;
+                estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;
             }
             // Figure out which column to place the item in, and compute its position.
             let column = columnHeights.reduce((minIndex, h, i)=>h < columnHeights[minIndex] ? i : minIndex, 0);
@@ -177,9 +167,9 @@ class $1aaf8931044a97bd$var$WaterfallLayout extends (0, $gDulG$reactstatelyvirtu
             let layoutInfo = new (0, $gDulG$reactstatelyvirtualizer.LayoutInfo)(node.type, key, rect);
             layoutInfo.estimatedSize = estimatedSize;
             layoutInfo.allowOverflow = true;
+            layoutInfo.content = node;
             newLayoutInfos.set(key, layoutInfo);
-            columnHeights[column] += layoutInfo.rect.height + this.minSpace.height;
-            return layoutInfo;
+            columnHeights[column] += layoutInfo.rect.height + minSpace.height;
         };
         let skeletonCount = 0;
         for (let node of this.virtualizer.collection)if (node.type === 'skeleton') {
@@ -188,10 +178,11 @@ class $1aaf8931044a97bd$var$WaterfallLayout extends (0, $gDulG$reactstatelyvirtu
                 ...columnHeights
             ];
             while(!columnHeights.every((h, i)=>h !== startingHeights[i]) || Math.min(...columnHeights) < this.virtualizer.visibleRect.height){
-                let layoutInfo = addNode(`${node.key}-${skeletonCount++}`, node);
-                layoutInfo.content = this.layoutInfos.get(layoutInfo.key)?.content || {
+                let key = `${node.key}-${skeletonCount++}`;
+                let content = this.layoutInfos.get(key)?.content || {
                     ...node
                 };
+                addNode(key, content);
             }
             break;
         } else addNode(node.key, node);
@@ -264,6 +255,24 @@ class $1aaf8931044a97bd$var$WaterfallLayout extends (0, $gDulG$reactstatelyvirtu
         }
         return bestKey;
     }
+    // This overrides the default behavior of shift selection to work spacially
+    // rather than following the order of the items in the collection (which may appear unpredictable).
+    getKeyRange(from, to) {
+        let fromLayoutInfo = this.getLayoutInfo(from);
+        let toLayoutInfo = this.getLayoutInfo(to);
+        if (!fromLayoutInfo || !toLayoutInfo) return [];
+        // Find items where half of the area intersects the rectangle 
+        // formed from the first item to the last item in the range.
+        let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);
+        let keys = [];
+        for (let layoutInfo of this.layoutInfos.values())if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) keys.push(layoutInfo.key);
+        return keys;
+    }
+    constructor(...args){
+        super(...args);
+        this.contentSize = new (0, $gDulG$reactstatelyvirtualizer.Size)();
+        this.layoutInfos = new Map();
+    }
 }
 const $1aaf8931044a97bd$var$layoutOptions = {
     XS: {
@@ -352,6 +361,13 @@ const $1aaf8931044a97bd$var$layoutOptions = {
         }
     }
 };
+const $1aaf8931044a97bd$var$SIZES = [
+    'XS',
+    'S',
+    'M',
+    'L',
+    'XL'
+];
 const $1aaf8931044a97bd$var$cardViewStyles = function anonymous(props, overrides) {
     let rules = " .";
     let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r|k|o|p)[^\s]+/g) || [];
@@ -371,35 +387,61 @@ const $1aaf8931044a97bd$var$cardViewStyles = function anonymous(props, overrides
     rules += ' _M-3hmpw';
     return rules;
 };
-function $1aaf8931044a97bd$export$7e52c821f7b6f422(props) {
-    let { children: children, layout: layoutName = 'grid', size: size = 'M', density: density = 'regular', variant: variant = 'primary', selectionStyle: selectionStyle = 'checkbox', UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, ...otherProps } = props;
-    let options = $1aaf8931044a97bd$var$layoutOptions[size][density];
+function $1aaf8931044a97bd$var$CardView(props, ref) {
+    let { children: children, layout: layoutName = 'grid', size: sizeProp = 'M', density: density = 'regular', variant: variant = 'primary', selectionStyle: selectionStyle = 'checkbox', UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, ...otherProps } = props;
+    let domRef = (0, $gDulG$reactspectrumutils.useDOMRef)(ref);
     let layout = (0, $gDulG$react.useMemo)(()=>{
-        variant; // needed to invalidate useMemo
-        return layoutName === 'waterfall' ? new $1aaf8931044a97bd$var$WaterfallLayout(options) : new $1aaf8931044a97bd$var$FlexibleGridLayout(options);
+        return layoutName === 'waterfall' ? new $1aaf8931044a97bd$var$WaterfallLayout() : new $1aaf8931044a97bd$var$FlexibleGridLayout();
     }, [
-        options,
-        variant,
         layoutName
     ]);
-    let ref = (0, $gDulG$react.useRef)(null);
+    // This calculates the maximum t-shirt size where at least two columns fit in the available width.
+    let [maxSizeIndex, setMaxSizeIndex] = (0, $gDulG$react.useState)($1aaf8931044a97bd$var$SIZES.length - 1);
+    let updateSize = (0, $gDulG$reactariautils.useEffectEvent)(()=>{
+        let w = domRef.current?.clientWidth ?? 0;
+        let i = $1aaf8931044a97bd$var$SIZES.length - 1;
+        while(i > 0){
+            let opts = $1aaf8931044a97bd$var$layoutOptions[$1aaf8931044a97bd$var$SIZES[i]][density];
+            if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) break;
+            i--;
+        }
+        setMaxSizeIndex(i);
+    });
+    (0, $gDulG$reactariautils.useResizeObserver)({
+        ref: domRef,
+        box: 'border-box',
+        onResize: updateSize
+    });
+    (0, $gDulG$reactariautils.useLayoutEffect)(()=>{
+        updateSize();
+    }, [
+        updateSize
+    ]);
+    // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.
+    let size = $1aaf8931044a97bd$var$SIZES[Math.min(maxSizeIndex, $1aaf8931044a97bd$var$SIZES.indexOf(sizeProp))];
+    let options = $1aaf8931044a97bd$var$layoutOptions[size][density];
     (0, $gDulG$reactariautils.useLoadMore)({
         isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',
         items: props.items,
         onLoadMore: props.onLoadMore
-    }, ref);
+    }, domRef);
+    let ctx = (0, $gDulG$react.useMemo)(()=>({
+            size: size,
+            variant: variant
+        }), [
+        size,
+        variant
+    ]);
     return /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $gDulG$reactariacomponents.UNSTABLE_Virtualizer), {
         layout: layout,
+        layoutOptions: options,
         children: /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $230078a1c4ce81d8$exports.CardViewContext).Provider, {
             value: (0, $gDulG$reactariacomponents.GridListItem),
             children: /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $230078a1c4ce81d8$exports.CardContext).Provider, {
-                value: {
-                    size: size,
-                    variant: variant
-                },
+                value: ctx,
                 children: /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $a4f1585b527b9b7a$exports.ImageCoordinator), {
                     children: /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $gDulG$reactariacomponents.GridList), {
-                        ref: ref,
+                        ref: domRef,
                         ...otherProps,
                         layout: "grid",
                         selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle',
@@ -418,6 +460,7 @@ function $1aaf8931044a97bd$export$7e52c821f7b6f422(props) {
         })
     });
 }
+const $1aaf8931044a97bd$export$7e52c821f7b6f422 = /*#__PURE__*/ (0, $gDulG$react.forwardRef)($1aaf8931044a97bd$var$CardView);
 
 
 //# sourceMappingURL=CardView.cjs.map

package/dist/CardView.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport {\n  GridList as AriaGridList,\n  GridLayoutOptions,\n  GridListItem,\n  GridListProps,\n  UNSTABLE_Virtualizer\n} from 'react-aria-components';\nimport {CardContext, CardViewContext} from './Card';\nimport {focusRing, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\nimport {Key, LoadingState, Node} from '@react-types/shared';\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useLoadMore} from '@react-aria/utils';\nimport {useMemo, useRef} from 'react';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style'>, UnsafeStyles {\n  /**\n   * The layout of the cards.\n   * @default 'grid'\n   */\n  layout?: 'grid' | 'waterfall',\n  /**\n   * The size of the cards.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of space between the cards.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The visual style of the cards.\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',\n  /**\n   * How selection should be displayed.\n   * @default 'checkbox'\n   */\n  selectionStyle?: 'checkbox' | 'highlight',\n  /** The loading state of the CardView. */\n  loadingState?: LoadingState,\n  /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n  onLoadMore?: () => void,\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\nclass FlexibleGridLayout<T extends object, O> extends Layout<Node<T>, O> {\n  protected minItemSize: Size;\n  protected maxItemSize: Size;\n  protected minSpace: Size;\n  protected maxColumns: number;\n  protected dropIndicatorThickness: number;\n  protected contentSize: Size = new Size();\n  protected layoutInfos: Map<Key, LayoutInfo> = new Map();\n\n  constructor(options: GridLayoutOptions) {\n    super();\n    this.minItemSize = options.minItemSize || new Size(200, 200);\n    this.maxItemSize = options.maxItemSize || new Size(Infinity, Infinity);\n    this.minSpace = options.minSpace || new Size(18, 18);\n    this.maxColumns = options.maxColumns || Infinity;\n    this.dropIndicatorThickness = options.dropIndicatorThickness || 2;\n  }\n\n  update(invalidationContext: InvalidationContext): void {\n    let visibleWidth = this.virtualizer.visibleRect.width;\n\n    // The max item width is always the entire viewport.\n    // If the max item height is infinity, scale in proportion to the max width.\n    let maxItemWidth = Math.min(this.maxItemSize.width, visibleWidth);\n    let maxItemHeight = Number.isFinite(this.maxItemSize.height) \n      ? this.maxItemSize.height\n      : Math.floor((this.minItemSize.height / this.minItemSize.width) * maxItemWidth);\n\n    // Compute the number of rows and columns needed to display the content\n    let columns = Math.floor(visibleWidth / (this.minItemSize.width + this.minSpace.width));\n    let numColumns = Math.max(1, Math.min(this.maxColumns, columns));\n\n    // Compute the available width (minus the space between items)\n    let width = visibleWidth - (this.minSpace.width * Math.max(0, numColumns));\n\n    // Compute the item width based on the space available\n    let itemWidth = Math.floor(width / numColumns);\n    itemWidth = Math.max(this.minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n    // Compute the item height, which is proportional to the item width\n    let t = ((itemWidth - this.minItemSize.width) / Math.max(1, maxItemWidth - this.minItemSize.width));\n    let itemHeight = this.minItemSize.height +  Math.floor((maxItemHeight - this.minItemSize.height) * t);\n    itemHeight = Math.max(this.minItemSize.height, Math.min(maxItemHeight, itemHeight));    \n\n    // Compute the horizontal spacing and content height\n    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n    let rows = Math.ceil(this.virtualizer.collection.size / numColumns);\n    let iterator = this.virtualizer.collection[Symbol.iterator]();\n    let y = rows > 0 ? this.minSpace.height : 0;\n    let newLayoutInfos = new Map();\n    let skeleton: Node<T> | null = null;\n    let skeletonCount = 0;\n    for (let row = 0; row < rows; row++) {\n      let maxHeight = 0;\n      let rowLayoutInfos: LayoutInfo[] = [];\n      for (let col = 0; col < numColumns; col++) {\n        // Repeat skeleton until the end of the current row.\n        let node = skeleton || iterator.next().value;\n        if (!node) {\n          break;\n        }\n\n        if (node.type === 'skeleton') {\n          skeleton = node;\n        }\n\n        let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;\n        let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);\n        let oldLayoutInfo = this.layoutInfos.get(key);\n        let height = itemHeight;\n        let estimatedSize = true;\n        if (oldLayoutInfo) {\n          height = oldLayoutInfo.rect.height;\n          estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize;\n        }\n\n        let rect = new Rect(x, y, itemWidth, height);\n        let layoutInfo = new LayoutInfo(node.type, key, rect);\n        layoutInfo.estimatedSize = estimatedSize;\n        layoutInfo.allowOverflow = true;\n        if (skeleton) {\n          layoutInfo.content = {...skeleton};\n        }\n        newLayoutInfos.set(key, layoutInfo);\n        rowLayoutInfos.push(layoutInfo);\n\n        maxHeight = Math.max(maxHeight, rect.height);\n      }\n\n      for (let layoutInfo of rowLayoutInfos) {\n        layoutInfo.rect.height = maxHeight;\n      }\n\n      y += maxHeight + this.minSpace.height;\n\n      // Keep adding skeleton rows until we fill the viewport\n      if (skeleton && row === rows - 1 && y < this.virtualizer.visibleRect.height) {\n        rows++;\n      }\n    }\n\n    this.layoutInfos = newLayoutInfos;\n    this.contentSize = new Size(this.virtualizer.visibleRect.width, y);\n  }\n\n  getLayoutInfo(key: Key): LayoutInfo {\n    return this.layoutInfos.get(key)!;\n  }\n\n  getContentSize(): Size {\n    return this.contentSize;\n  }\n\n  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n    let layoutInfos: LayoutInfo[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n        layoutInfos.push(layoutInfo);\n      }\n    }\n    return layoutInfos;\n  }\n\n  updateItemSize(key: Key, size: Size) {\n    let layoutInfo = this.layoutInfos.get(key);\n    if (!size || !layoutInfo) {\n      return false;\n    }\n\n    if (size.height !== layoutInfo.rect.height) {\n      let newLayoutInfo = layoutInfo.copy();\n      newLayoutInfo.rect.height = size.height;\n      newLayoutInfo.estimatedSize = false;\n      this.layoutInfos.set(key, newLayoutInfo);\n      return true;\n    }\n\n    return false;\n  }\n}\n\nclass WaterfallLayout<T extends object, O> extends Layout<Node<T>, O> {\n  protected minItemSize: Size;\n  protected maxItemSize: Size;\n  protected minSpace: Size;\n  protected maxColumns: number;\n  protected dropIndicatorThickness: number;\n  protected contentSize: Size = new Size();\n  protected layoutInfos: Map<Key, LayoutInfo> = new Map();\n\n  constructor(options: GridLayoutOptions) {\n    super();\n    this.minItemSize = options.minItemSize || new Size(200, 200);\n    this.maxItemSize = options.maxItemSize || new Size(Infinity, Infinity);\n    this.minSpace = options.minSpace || new Size(18, 18);\n    this.maxColumns = options.maxColumns || Infinity;\n    this.dropIndicatorThickness = options.dropIndicatorThickness || 2;\n  }\n\n  update(invalidationContext: InvalidationContext): void {\n    let visibleWidth = this.virtualizer.visibleRect.width;\n\n    // The max item width is always the entire viewport.\n    // If the max item height is infinity, scale in proportion to the max width.\n    let maxItemWidth = Math.min(this.maxItemSize.width, visibleWidth);\n    let maxItemHeight = Number.isFinite(this.maxItemSize.height) \n      ? this.maxItemSize.height\n      : Math.floor((this.minItemSize.height / this.minItemSize.width) * maxItemWidth);\n\n    // Compute the number of rows and columns needed to display the content\n    let columns = Math.floor(visibleWidth / (this.minItemSize.width + this.minSpace.width));\n    let numColumns = Math.max(1, Math.min(this.maxColumns, columns));\n\n    // Compute the available width (minus the space between items)\n    let width = visibleWidth - (this.minSpace.width * Math.max(0, numColumns));\n\n    // Compute the item width based on the space available\n    let itemWidth = Math.floor(width / numColumns);\n    itemWidth = Math.max(this.minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n    // Compute the item height, which is proportional to the item width\n    let t = ((itemWidth - this.minItemSize.width) / Math.max(1, maxItemWidth - this.minItemSize.width));\n    let itemHeight = this.minItemSize.height +  Math.floor((maxItemHeight - this.minItemSize.height) * t);\n    itemHeight = Math.max(this.minItemSize.height, Math.min(maxItemHeight, itemHeight));    \n\n    // Compute the horizontal spacing and content height\n    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n    // Setup an array of column heights\n    let columnHeights = Array(numColumns).fill(this.minSpace.height);\n    let newLayoutInfos = new Map();\n    let addNode = (key, node) => {\n      let oldLayoutInfo = this.layoutInfos.get(key);\n      let height = itemHeight;\n      let estimatedSize = true;\n      if (oldLayoutInfo) {\n        height = oldLayoutInfo.rect.height;\n        estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize;\n      }\n\n      // Figure out which column to place the item in, and compute its position.\n      let column = columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);\n      let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);\n      let y = columnHeights[column];\n\n      let rect = new Rect(x, y, itemWidth, height);\n      let layoutInfo = new LayoutInfo(node.type, key, rect);\n      layoutInfo.estimatedSize = estimatedSize;\n      layoutInfo.allowOverflow = true;\n      newLayoutInfos.set(key, layoutInfo);\n\n      columnHeights[column] += layoutInfo.rect.height + this.minSpace.height;\n      return layoutInfo;\n    };\n\n    let skeletonCount = 0;\n    for (let node of this.virtualizer.collection) {\n      if (node.type === 'skeleton') {\n        // Add skeleton cards until every column has at least one, and we fill the viewport.\n        let startingHeights = [...columnHeights];\n        while (\n          !columnHeights.every((h, i) => h !== startingHeights[i]) ||\n          Math.min(...columnHeights) < this.virtualizer.visibleRect.height\n        ) {\n          let layoutInfo = addNode(`${node.key}-${skeletonCount++}`, node);\n          layoutInfo.content = this.layoutInfos.get(layoutInfo.key)?.content || {...node};\n        }\n        break;\n      } else {\n        addNode(node.key, node);\n      }\n    }\n\n    // Reset all columns to the maximum for the next section\n    let maxHeight = Math.max(...columnHeights);\n    this.contentSize = new Size(this.virtualizer.visibleRect.width, maxHeight);\n    this.layoutInfos = newLayoutInfos;\n  }\n\n  getLayoutInfo(key: Key): LayoutInfo {\n    return this.layoutInfos.get(key)!;\n  }\n\n  getContentSize(): Size {\n    return this.contentSize;\n  }\n\n  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n    let layoutInfos: LayoutInfo[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n        layoutInfos.push(layoutInfo);\n      }\n    }\n    return layoutInfos;\n  }\n\n  updateItemSize(key: Key, size: Size) {\n    let layoutInfo = this.layoutInfos.get(key);\n    if (!size || !layoutInfo) {\n      return false;\n    }\n\n    if (size.height !== layoutInfo.rect.height) {\n      let newLayoutInfo = layoutInfo.copy();\n      newLayoutInfo.rect.height = size.height;\n      newLayoutInfo.estimatedSize = false;\n      this.layoutInfos.set(key, newLayoutInfo);\n      return true;\n    }\n\n    return false;\n  }\n\n  // Override keyboard navigation to work spacially.\n  getKeyRightOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = candidate.rect.x - rect.x;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n\n  getKeyLeftOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = rect.maxX - candidate.rect.maxX;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n}\n\nconst layoutOptions = {\n  XS: {\n    compact: {\n      minSpace: new Size(6, 6),\n      minItemSize: new Size(100, 100),\n      maxItemSize: new Size(140, 140)\n    },\n    regular: {\n      minSpace: new Size(8, 8),\n      minItemSize: new Size(100, 100),\n      maxItemSize: new Size(140, 140)\n    },\n    spacious: {\n      minSpace: new Size(12, 12),\n      minItemSize: new Size(100, 100),\n      maxItemSize: new Size(140, 140)\n    }\n  },\n  S: {\n    compact: {\n      minSpace: new Size(8, 8),\n      minItemSize: new Size(150, 150),\n      maxItemSize: new Size(210, 210)\n    },\n    regular: {\n      minSpace: new Size(12, 12),\n      minItemSize: new Size(150, 150),\n      maxItemSize: new Size(210, 210)\n    },\n    spacious: {\n      minSpace: new Size(16, 16),\n      minItemSize: new Size(150, 150),\n      maxItemSize: new Size(210, 210)\n    }\n  },\n  M: {\n    compact: {\n      minSpace: new Size(12, 12),\n      minItemSize: new Size(200, 200),\n      maxItemSize: new Size(280, 280)\n    },\n    regular: {\n      minSpace: new Size(16, 16),\n      minItemSize: new Size(200, 200),\n      maxItemSize: new Size(280, 280)\n    },\n    spacious: {\n      minSpace: new Size(20, 20),\n      minItemSize: new Size(200, 200),\n      maxItemSize: new Size(280, 280)\n    }\n  },\n  L: {\n    compact: {\n      minSpace: new Size(16, 16),\n      minItemSize: new Size(270, 270),\n      maxItemSize: new Size(370, 370)\n    },\n    regular: {\n      minSpace: new Size(20, 20),\n      minItemSize: new Size(270, 270),\n      maxItemSize: new Size(370, 370)\n    },\n    spacious: {\n      minSpace: new Size(24, 24),\n      minItemSize: new Size(270, 270),\n      maxItemSize: new Size(370, 370)\n    }\n  },\n  XL: {\n    compact: {\n      minSpace: new Size(20, 20),\n      minItemSize: new Size(340, 340),\n      maxItemSize: new Size(460, 460)\n    },\n    regular: {\n      minSpace: new Size(24, 24),\n      minItemSize: new Size(340, 340),\n      maxItemSize: new Size(460, 460)\n    },\n    spacious: {\n      minSpace: new Size(28, 28),\n      minItemSize: new Size(340, 340),\n      maxItemSize: new Size(460, 460)\n    }\n  }\n};\n\nconst cardViewStyles = style({\n  overflowY: {\n    default: 'auto',\n    isLoading: 'hidden'\n  },\n  display: {\n    isEmpty: 'flex'\n  },\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isEmpty: {\n      isFocusVisible: 'solid'\n    }\n  },\n  outlineOffset: -2\n}, getAllowedOverrides({height: true}));\n\nexport function CardView<T extends object>(props: CardViewProps<T>) {\n  let {children, layout: layoutName = 'grid', size = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  let options = layoutOptions[size][density];\n  let layout = useMemo(() => {\n    variant; // needed to invalidate useMemo\n    return layoutName === 'waterfall' ? new WaterfallLayout(options) : new FlexibleGridLayout(options);\n  }, [options, variant, layoutName]);\n\n  let ref = useRef(null);\n  useLoadMore({\n    isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',\n    items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>\n    onLoadMore: props.onLoadMore\n  }, ref);\n\n  return (\n    <UNSTABLE_Virtualizer layout={layout}>\n      <CardViewContext.Provider value={GridListItem}>\n        <CardContext.Provider value={{size, variant}}>\n          <ImageCoordinator>\n            <AriaGridList\n              ref={ref}\n              {...otherProps}\n              layout=\"grid\"\n              selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n              style={{\n                ...UNSAFE_style,\n                scrollPadding: options.minSpace.height\n              }}\n              className={renderProps => UNSAFE_className + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, styles)}>\n              {children}\n            </AriaGridList>\n          </ImageCoordinator>\n        </CardContext.Provider>\n      </CardViewContext.Provider>\n    </UNSTABLE_Virtualizer>\n  );\n}\n"],"names":[],"version":3,"file":"CardView.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport {\n  GridList as AriaGridList,\n  GridLayoutOptions,\n  GridListItem,\n  GridListProps,\n  UNSTABLE_Virtualizer\n} from 'react-aria-components';\nimport {CardContext, CardViewContext} from './Card';\nimport {DOMRef, forwardRefType, Key, LayoutDelegate, LoadingState, Node} from '@react-types/shared';\nimport {focusRing, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {forwardRef, useMemo, useState} from 'react';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style'>, UnsafeStyles {\n  /**\n   * The layout of the cards.\n   * @default 'grid'\n   */\n  layout?: 'grid' | 'waterfall',\n  /**\n   * The size of the cards.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of space between the cards.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The visual style of the cards.\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',\n  /**\n   * How selection should be displayed.\n   * @default 'checkbox'\n   */\n  selectionStyle?: 'checkbox' | 'highlight',\n  /** The loading state of the CardView. */\n  loadingState?: LoadingState,\n  /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n  onLoadMore?: () => void,\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\nclass FlexibleGridLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> {\n  protected contentSize: Size = new Size();\n  protected layoutInfos: Map<Key, LayoutInfo> = new Map();\n\n  update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n    let {\n      minItemSize = new Size(200, 200),\n      maxItemSize = new Size(Infinity, Infinity),\n      minSpace = new Size(18, 18),\n      maxColumns = Infinity\n    } = invalidationContext.layoutOptions || {};\n    let visibleWidth = this.virtualizer.visibleRect.width;\n\n    // The max item width is always the entire viewport.\n    // If the max item height is infinity, scale in proportion to the max width.\n    let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n    let maxItemHeight = Number.isFinite(maxItemSize.height) \n      ? maxItemSize.height\n      : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n    // Compute the number of rows and columns needed to display the content\n    let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n    let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n    // Compute the available width (minus the space between items)\n    let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n    // Compute the item width based on the space available\n    let itemWidth = Math.floor(width / numColumns);\n    itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n    // Compute the item height, which is proportional to the item width\n    let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n    let itemHeight = minItemSize.height +  Math.floor((maxItemHeight - minItemSize.height) * t);\n    itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));    \n\n    // Compute the horizontal spacing and content height\n    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n    let rows = Math.ceil(this.virtualizer.collection.size / numColumns);\n    let iterator = this.virtualizer.collection[Symbol.iterator]();\n    let y = rows > 0 ? minSpace.height : 0;\n    let newLayoutInfos = new Map();\n    let skeleton: Node<T> | null = null;\n    let skeletonCount = 0;\n    for (let row = 0; row < rows; row++) {\n      let maxHeight = 0;\n      let rowLayoutInfos: LayoutInfo[] = [];\n      for (let col = 0; col < numColumns; col++) {\n        // Repeat skeleton until the end of the current row.\n        let node = skeleton || iterator.next().value;\n        if (!node) {\n          break;\n        }\n\n        if (node.type === 'skeleton') {\n          skeleton = node;\n        }\n\n        let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;\n        let content = skeleton ? {...skeleton} : node;\n        let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);\n        let oldLayoutInfo = this.layoutInfos.get(key);\n        let height = itemHeight;\n        let estimatedSize = true;\n        if (oldLayoutInfo) {\n          height = oldLayoutInfo.rect.height;\n          estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || (oldLayoutInfo.content !== content);\n        }\n\n        let rect = new Rect(x, y, itemWidth, height);\n        let layoutInfo = new LayoutInfo(node.type, key, rect);\n        layoutInfo.estimatedSize = estimatedSize;\n        layoutInfo.allowOverflow = true;\n        layoutInfo.content = content;\n        newLayoutInfos.set(key, layoutInfo);\n        rowLayoutInfos.push(layoutInfo);\n\n        maxHeight = Math.max(maxHeight, rect.height);\n      }\n\n      for (let layoutInfo of rowLayoutInfos) {\n        layoutInfo.rect.height = maxHeight;\n      }\n\n      y += maxHeight + minSpace.height;\n\n      // Keep adding skeleton rows until we fill the viewport\n      if (skeleton && row === rows - 1 && y < this.virtualizer.visibleRect.height) {\n        rows++;\n      }\n    }\n\n    this.layoutInfos = newLayoutInfos;\n    this.contentSize = new Size(this.virtualizer.visibleRect.width, y);\n  }\n\n  getLayoutInfo(key: Key): LayoutInfo {\n    return this.layoutInfos.get(key)!;\n  }\n\n  getContentSize(): Size {\n    return this.contentSize;\n  }\n\n  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n    let layoutInfos: LayoutInfo[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n        layoutInfos.push(layoutInfo);\n      }\n    }\n    return layoutInfos;\n  }\n\n  updateItemSize(key: Key, size: Size) {\n    let layoutInfo = this.layoutInfos.get(key);\n    if (!size || !layoutInfo) {\n      return false;\n    }\n\n    if (size.height !== layoutInfo.rect.height) {\n      let newLayoutInfo = layoutInfo.copy();\n      newLayoutInfo.rect.height = size.height;\n      newLayoutInfo.estimatedSize = false;\n      this.layoutInfos.set(key, newLayoutInfo);\n      return true;\n    }\n\n    return false;\n  }\n}\n\nclass WaterfallLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> implements LayoutDelegate {\n  protected contentSize: Size = new Size();\n  protected layoutInfos: Map<Key, LayoutInfo> = new Map();\n\n  update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n    let {\n      minItemSize = new Size(200, 200),\n      maxItemSize = new Size(Infinity, Infinity),\n      minSpace = new Size(18, 18),\n      maxColumns = Infinity\n    } = invalidationContext.layoutOptions || {};\n    let visibleWidth = this.virtualizer.visibleRect.width;\n\n    // The max item width is always the entire viewport.\n    // If the max item height is infinity, scale in proportion to the max width.\n    let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n    let maxItemHeight = Number.isFinite(maxItemSize.height) \n      ? maxItemSize.height\n      : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n    // Compute the number of rows and columns needed to display the content\n    let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n    let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n    // Compute the available width (minus the space between items)\n    let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n    // Compute the item width based on the space available\n    let itemWidth = Math.floor(width / numColumns);\n    itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n    // Compute the item height, which is proportional to the item width\n    let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n    let itemHeight = minItemSize.height +  Math.floor((maxItemHeight - minItemSize.height) * t);\n    itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));    \n\n    // Compute the horizontal spacing and content height\n    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n    // Setup an array of column heights\n    let columnHeights = Array(numColumns).fill(minSpace.height);\n    let newLayoutInfos = new Map();\n    let addNode = (key: Key, node: Node<T>) => {\n      let oldLayoutInfo = this.layoutInfos.get(key);\n      let height = itemHeight;\n      let estimatedSize = true;\n      if (oldLayoutInfo) {\n        height = oldLayoutInfo.rect.height;\n        estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;\n      }\n\n      // Figure out which column to place the item in, and compute its position.\n      let column = columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);\n      let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);\n      let y = columnHeights[column];\n\n      let rect = new Rect(x, y, itemWidth, height);\n      let layoutInfo = new LayoutInfo(node.type, key, rect);\n      layoutInfo.estimatedSize = estimatedSize;\n      layoutInfo.allowOverflow = true;\n      layoutInfo.content = node;\n      newLayoutInfos.set(key, layoutInfo);\n\n      columnHeights[column] += layoutInfo.rect.height + minSpace.height;\n    };\n\n    let skeletonCount = 0;\n    for (let node of this.virtualizer.collection) {\n      if (node.type === 'skeleton') {\n        // Add skeleton cards until every column has at least one, and we fill the viewport.\n        let startingHeights = [...columnHeights];\n        while (\n          !columnHeights.every((h, i) => h !== startingHeights[i]) ||\n          Math.min(...columnHeights) < this.virtualizer.visibleRect.height\n        ) {\n          let key = `${node.key}-${skeletonCount++}`;\n          let content = this.layoutInfos.get(key)?.content || {...node};\n          addNode(key, content);\n        }\n        break;\n      } else {\n        addNode(node.key, node);\n      }\n    }\n\n    // Reset all columns to the maximum for the next section\n    let maxHeight = Math.max(...columnHeights);\n    this.contentSize = new Size(this.virtualizer.visibleRect.width, maxHeight);\n    this.layoutInfos = newLayoutInfos;\n  }\n\n  getLayoutInfo(key: Key): LayoutInfo {\n    return this.layoutInfos.get(key)!;\n  }\n\n  getContentSize(): Size {\n    return this.contentSize;\n  }\n\n  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n    let layoutInfos: LayoutInfo[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n        layoutInfos.push(layoutInfo);\n      }\n    }\n    return layoutInfos;\n  }\n\n  updateItemSize(key: Key, size: Size) {\n    let layoutInfo = this.layoutInfos.get(key);\n    if (!size || !layoutInfo) {\n      return false;\n    }\n\n    if (size.height !== layoutInfo.rect.height) {\n      let newLayoutInfo = layoutInfo.copy();\n      newLayoutInfo.rect.height = size.height;\n      newLayoutInfo.estimatedSize = false;\n      this.layoutInfos.set(key, newLayoutInfo);\n      return true;\n    }\n\n    return false;\n  }\n\n  // Override keyboard navigation to work spacially.\n  getKeyRightOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = candidate.rect.x - rect.x;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n\n  getKeyLeftOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = rect.maxX - candidate.rect.maxX;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n\n  // This overrides the default behavior of shift selection to work spacially\n  // rather than following the order of the items in the collection (which may appear unpredictable).\n  getKeyRange(from: Key, to: Key): Key[] {\n    let fromLayoutInfo = this.getLayoutInfo(from);\n    let toLayoutInfo = this.getLayoutInfo(to);\n    if (!fromLayoutInfo || !toLayoutInfo) {\n      return [];\n    }\n\n    // Find items where half of the area intersects the rectangle \n    // formed from the first item to the last item in the range.\n    let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);\n    let keys: Key[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) {\n        keys.push(layoutInfo.key);\n      }\n    }\n    return keys;\n  }\n}\n\nconst layoutOptions = {\n  XS: {\n    compact: {\n      minSpace: new Size(6, 6),\n      minItemSize: new Size(100, 100),\n      maxItemSize: new Size(140, 140)\n    },\n    regular: {\n      minSpace: new Size(8, 8),\n      minItemSize: new Size(100, 100),\n      maxItemSize: new Size(140, 140)\n    },\n    spacious: {\n      minSpace: new Size(12, 12),\n      minItemSize: new Size(100, 100),\n      maxItemSize: new Size(140, 140)\n    }\n  },\n  S: {\n    compact: {\n      minSpace: new Size(8, 8),\n      minItemSize: new Size(150, 150),\n      maxItemSize: new Size(210, 210)\n    },\n    regular: {\n      minSpace: new Size(12, 12),\n      minItemSize: new Size(150, 150),\n      maxItemSize: new Size(210, 210)\n    },\n    spacious: {\n      minSpace: new Size(16, 16),\n      minItemSize: new Size(150, 150),\n      maxItemSize: new Size(210, 210)\n    }\n  },\n  M: {\n    compact: {\n      minSpace: new Size(12, 12),\n      minItemSize: new Size(200, 200),\n      maxItemSize: new Size(280, 280)\n    },\n    regular: {\n      minSpace: new Size(16, 16),\n      minItemSize: new Size(200, 200),\n      maxItemSize: new Size(280, 280)\n    },\n    spacious: {\n      minSpace: new Size(20, 20),\n      minItemSize: new Size(200, 200),\n      maxItemSize: new Size(280, 280)\n    }\n  },\n  L: {\n    compact: {\n      minSpace: new Size(16, 16),\n      minItemSize: new Size(270, 270),\n      maxItemSize: new Size(370, 370)\n    },\n    regular: {\n      minSpace: new Size(20, 20),\n      minItemSize: new Size(270, 270),\n      maxItemSize: new Size(370, 370)\n    },\n    spacious: {\n      minSpace: new Size(24, 24),\n      minItemSize: new Size(270, 270),\n      maxItemSize: new Size(370, 370)\n    }\n  },\n  XL: {\n    compact: {\n      minSpace: new Size(20, 20),\n      minItemSize: new Size(340, 340),\n      maxItemSize: new Size(460, 460)\n    },\n    regular: {\n      minSpace: new Size(24, 24),\n      minItemSize: new Size(340, 340),\n      maxItemSize: new Size(460, 460)\n    },\n    spacious: {\n      minSpace: new Size(28, 28),\n      minItemSize: new Size(340, 340),\n      maxItemSize: new Size(460, 460)\n    }\n  }\n};\n\nconst SIZES = ['XS', 'S', 'M', 'L', 'XL'] as const;\n\nconst cardViewStyles = style({\n  overflowY: {\n    default: 'auto',\n    isLoading: 'hidden'\n  },\n  display: {\n    isEmpty: 'flex'\n  },\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isEmpty: {\n      isFocusVisible: 'solid'\n    }\n  },\n  outlineOffset: -2\n}, getAllowedOverrides({height: true}));\n\nfunction CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let {children, layout: layoutName = 'grid', size: sizeProp = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  let domRef = useDOMRef(ref);\n  let layout = useMemo(() => {\n    return layoutName === 'waterfall' ? new WaterfallLayout() : new FlexibleGridLayout();\n  }, [layoutName]);\n  \n  // This calculates the maximum t-shirt size where at least two columns fit in the available width.\n  let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);\n  let updateSize = useEffectEvent(() => {\n    let w = domRef.current?.clientWidth ?? 0;\n    let i = SIZES.length - 1;\n    while (i > 0) {\n      let opts = layoutOptions[SIZES[i]][density];\n      if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) {\n        break;\n      }\n      i--;\n    }\n    setMaxSizeIndex(i);\n  });\n\n  useResizeObserver({\n    ref: domRef,\n    box: 'border-box',\n    onResize: updateSize\n  });\n\n  useLayoutEffect(() => {\n    updateSize();\n  }, [updateSize]);\n\n  // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.\n  let size = SIZES[Math.min(maxSizeIndex, SIZES.indexOf(sizeProp))];\n  let options = layoutOptions[size][density];\n\n  useLoadMore({\n    isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',\n    items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>\n    onLoadMore: props.onLoadMore\n  }, domRef);\n\n  let ctx = useMemo(() => ({size, variant}), [size, variant]);\n  \n  return (\n    <UNSTABLE_Virtualizer layout={layout} layoutOptions={options}>\n      <CardViewContext.Provider value={GridListItem}>\n        <CardContext.Provider value={ctx}>\n          <ImageCoordinator>\n            <AriaGridList\n              ref={domRef}\n              {...otherProps}\n              layout=\"grid\"\n              selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n              style={{\n                ...UNSAFE_style,\n                scrollPadding: options.minSpace.height\n              }}\n              className={renderProps => UNSAFE_className + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, styles)}>\n              {children}\n            </AriaGridList>\n          </ImageCoordinator>\n        </CardContext.Provider>\n      </CardViewContext.Provider>\n    </UNSTABLE_Virtualizer>\n  );\n}\n\nconst _CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(CardView);\nexport {_CardView as CardView};\n"],"names":[],"version":3,"file":"CardView.cjs.map"}

package/dist/CardView.css.map

@@ -1 +1 @@
-{"mappings":"AAmeuB;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA","sources":["packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport {\n  GridList as AriaGridList,\n  GridLayoutOptions,\n  GridListItem,\n  GridListProps,\n  UNSTABLE_Virtualizer\n} from 'react-aria-components';\nimport {CardContext, CardViewContext} from './Card';\nimport {focusRing, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\nimport {Key, LoadingState, Node} from '@react-types/shared';\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useLoadMore} from '@react-aria/utils';\nimport {useMemo, useRef} from 'react';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style'>, UnsafeStyles {\n  /**\n   * The layout of the cards.\n   * @default 'grid'\n   */\n  layout?: 'grid' | 'waterfall',\n  /**\n   * The size of the cards.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of space between the cards.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The visual style of the cards.\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',\n  /**\n   * How selection should be displayed.\n   * @default 'checkbox'\n   */\n  selectionStyle?: 'checkbox' | 'highlight',\n  /** The loading state of the CardView. */\n  loadingState?: LoadingState,\n  /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n  onLoadMore?: () => void,\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\nclass FlexibleGridLayout<T extends object, O> extends Layout<Node<T>, O> {\n  protected minItemSize: Size;\n  protected maxItemSize: Size;\n  protected minSpace: Size;\n  protected maxColumns: number;\n  protected dropIndicatorThickness: number;\n  protected contentSize: Size = new Size();\n  protected layoutInfos: Map<Key, LayoutInfo> = new Map();\n\n  constructor(options: GridLayoutOptions) {\n    super();\n    this.minItemSize = options.minItemSize || new Size(200, 200);\n    this.maxItemSize = options.maxItemSize || new Size(Infinity, Infinity);\n    this.minSpace = options.minSpace || new Size(18, 18);\n    this.maxColumns = options.maxColumns || Infinity;\n    this.dropIndicatorThickness = options.dropIndicatorThickness || 2;\n  }\n\n  update(invalidationContext: InvalidationContext): void {\n    let visibleWidth = this.virtualizer.visibleRect.width;\n\n    // The max item width is always the entire viewport.\n    // If the max item height is infinity, scale in proportion to the max width.\n    let maxItemWidth = Math.min(this.maxItemSize.width, visibleWidth);\n    let maxItemHeight = Number.isFinite(this.maxItemSize.height) \n      ? this.maxItemSize.height\n      : Math.floor((this.minItemSize.height / this.minItemSize.width) * maxItemWidth);\n\n    // Compute the number of rows and columns needed to display the content\n    let columns = Math.floor(visibleWidth / (this.minItemSize.width + this.minSpace.width));\n    let numColumns = Math.max(1, Math.min(this.maxColumns, columns));\n\n    // Compute the available width (minus the space between items)\n    let width = visibleWidth - (this.minSpace.width * Math.max(0, numColumns));\n\n    // Compute the item width based on the space available\n    let itemWidth = Math.floor(width / numColumns);\n    itemWidth = Math.max(this.minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n    // Compute the item height, which is proportional to the item width\n    let t = ((itemWidth - this.minItemSize.width) / Math.max(1, maxItemWidth - this.minItemSize.width));\n    let itemHeight = this.minItemSize.height +  Math.floor((maxItemHeight - this.minItemSize.height) * t);\n    itemHeight = Math.max(this.minItemSize.height, Math.min(maxItemHeight, itemHeight));    \n\n    // Compute the horizontal spacing and content height\n    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n    let rows = Math.ceil(this.virtualizer.collection.size / numColumns);\n    let iterator = this.virtualizer.collection[Symbol.iterator]();\n    let y = rows > 0 ? this.minSpace.height : 0;\n    let newLayoutInfos = new Map();\n    let skeleton: Node<T> | null = null;\n    let skeletonCount = 0;\n    for (let row = 0; row < rows; row++) {\n      let maxHeight = 0;\n      let rowLayoutInfos: LayoutInfo[] = [];\n      for (let col = 0; col < numColumns; col++) {\n        // Repeat skeleton until the end of the current row.\n        let node = skeleton || iterator.next().value;\n        if (!node) {\n          break;\n        }\n\n        if (node.type === 'skeleton') {\n          skeleton = node;\n        }\n\n        let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;\n        let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);\n        let oldLayoutInfo = this.layoutInfos.get(key);\n        let height = itemHeight;\n        let estimatedSize = true;\n        if (oldLayoutInfo) {\n          height = oldLayoutInfo.rect.height;\n          estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize;\n        }\n\n        let rect = new Rect(x, y, itemWidth, height);\n        let layoutInfo = new LayoutInfo(node.type, key, rect);\n        layoutInfo.estimatedSize = estimatedSize;\n        layoutInfo.allowOverflow = true;\n        if (skeleton) {\n          layoutInfo.content = {...skeleton};\n        }\n        newLayoutInfos.set(key, layoutInfo);\n        rowLayoutInfos.push(layoutInfo);\n\n        maxHeight = Math.max(maxHeight, rect.height);\n      }\n\n      for (let layoutInfo of rowLayoutInfos) {\n        layoutInfo.rect.height = maxHeight;\n      }\n\n      y += maxHeight + this.minSpace.height;\n\n      // Keep adding skeleton rows until we fill the viewport\n      if (skeleton && row === rows - 1 && y < this.virtualizer.visibleRect.height) {\n        rows++;\n      }\n    }\n\n    this.layoutInfos = newLayoutInfos;\n    this.contentSize = new Size(this.virtualizer.visibleRect.width, y);\n  }\n\n  getLayoutInfo(key: Key): LayoutInfo {\n    return this.layoutInfos.get(key)!;\n  }\n\n  getContentSize(): Size {\n    return this.contentSize;\n  }\n\n  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n    let layoutInfos: LayoutInfo[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n        layoutInfos.push(layoutInfo);\n      }\n    }\n    return layoutInfos;\n  }\n\n  updateItemSize(key: Key, size: Size) {\n    let layoutInfo = this.layoutInfos.get(key);\n    if (!size || !layoutInfo) {\n      return false;\n    }\n\n    if (size.height !== layoutInfo.rect.height) {\n      let newLayoutInfo = layoutInfo.copy();\n      newLayoutInfo.rect.height = size.height;\n      newLayoutInfo.estimatedSize = false;\n      this.layoutInfos.set(key, newLayoutInfo);\n      return true;\n    }\n\n    return false;\n  }\n}\n\nclass WaterfallLayout<T extends object, O> extends Layout<Node<T>, O> {\n  protected minItemSize: Size;\n  protected maxItemSize: Size;\n  protected minSpace: Size;\n  protected maxColumns: number;\n  protected dropIndicatorThickness: number;\n  protected contentSize: Size = new Size();\n  protected layoutInfos: Map<Key, LayoutInfo> = new Map();\n\n  constructor(options: GridLayoutOptions) {\n    super();\n    this.minItemSize = options.minItemSize || new Size(200, 200);\n    this.maxItemSize = options.maxItemSize || new Size(Infinity, Infinity);\n    this.minSpace = options.minSpace || new Size(18, 18);\n    this.maxColumns = options.maxColumns || Infinity;\n    this.dropIndicatorThickness = options.dropIndicatorThickness || 2;\n  }\n\n  update(invalidationContext: InvalidationContext): void {\n    let visibleWidth = this.virtualizer.visibleRect.width;\n\n    // The max item width is always the entire viewport.\n    // If the max item height is infinity, scale in proportion to the max width.\n    let maxItemWidth = Math.min(this.maxItemSize.width, visibleWidth);\n    let maxItemHeight = Number.isFinite(this.maxItemSize.height) \n      ? this.maxItemSize.height\n      : Math.floor((this.minItemSize.height / this.minItemSize.width) * maxItemWidth);\n\n    // Compute the number of rows and columns needed to display the content\n    let columns = Math.floor(visibleWidth / (this.minItemSize.width + this.minSpace.width));\n    let numColumns = Math.max(1, Math.min(this.maxColumns, columns));\n\n    // Compute the available width (minus the space between items)\n    let width = visibleWidth - (this.minSpace.width * Math.max(0, numColumns));\n\n    // Compute the item width based on the space available\n    let itemWidth = Math.floor(width / numColumns);\n    itemWidth = Math.max(this.minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n    // Compute the item height, which is proportional to the item width\n    let t = ((itemWidth - this.minItemSize.width) / Math.max(1, maxItemWidth - this.minItemSize.width));\n    let itemHeight = this.minItemSize.height +  Math.floor((maxItemHeight - this.minItemSize.height) * t);\n    itemHeight = Math.max(this.minItemSize.height, Math.min(maxItemHeight, itemHeight));    \n\n    // Compute the horizontal spacing and content height\n    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n    // Setup an array of column heights\n    let columnHeights = Array(numColumns).fill(this.minSpace.height);\n    let newLayoutInfos = new Map();\n    let addNode = (key, node) => {\n      let oldLayoutInfo = this.layoutInfos.get(key);\n      let height = itemHeight;\n      let estimatedSize = true;\n      if (oldLayoutInfo) {\n        height = oldLayoutInfo.rect.height;\n        estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize;\n      }\n\n      // Figure out which column to place the item in, and compute its position.\n      let column = columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);\n      let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);\n      let y = columnHeights[column];\n\n      let rect = new Rect(x, y, itemWidth, height);\n      let layoutInfo = new LayoutInfo(node.type, key, rect);\n      layoutInfo.estimatedSize = estimatedSize;\n      layoutInfo.allowOverflow = true;\n      newLayoutInfos.set(key, layoutInfo);\n\n      columnHeights[column] += layoutInfo.rect.height + this.minSpace.height;\n      return layoutInfo;\n    };\n\n    let skeletonCount = 0;\n    for (let node of this.virtualizer.collection) {\n      if (node.type === 'skeleton') {\n        // Add skeleton cards until every column has at least one, and we fill the viewport.\n        let startingHeights = [...columnHeights];\n        while (\n          !columnHeights.every((h, i) => h !== startingHeights[i]) ||\n          Math.min(...columnHeights) < this.virtualizer.visibleRect.height\n        ) {\n          let layoutInfo = addNode(`${node.key}-${skeletonCount++}`, node);\n          layoutInfo.content = this.layoutInfos.get(layoutInfo.key)?.content || {...node};\n        }\n        break;\n      } else {\n        addNode(node.key, node);\n      }\n    }\n\n    // Reset all columns to the maximum for the next section\n    let maxHeight = Math.max(...columnHeights);\n    this.contentSize = new Size(this.virtualizer.visibleRect.width, maxHeight);\n    this.layoutInfos = newLayoutInfos;\n  }\n\n  getLayoutInfo(key: Key): LayoutInfo {\n    return this.layoutInfos.get(key)!;\n  }\n\n  getContentSize(): Size {\n    return this.contentSize;\n  }\n\n  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n    let layoutInfos: LayoutInfo[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n        layoutInfos.push(layoutInfo);\n      }\n    }\n    return layoutInfos;\n  }\n\n  updateItemSize(key: Key, size: Size) {\n    let layoutInfo = this.layoutInfos.get(key);\n    if (!size || !layoutInfo) {\n      return false;\n    }\n\n    if (size.height !== layoutInfo.rect.height) {\n      let newLayoutInfo = layoutInfo.copy();\n      newLayoutInfo.rect.height = size.height;\n      newLayoutInfo.estimatedSize = false;\n      this.layoutInfos.set(key, newLayoutInfo);\n      return true;\n    }\n\n    return false;\n  }\n\n  // Override keyboard navigation to work spacially.\n  getKeyRightOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = candidate.rect.x - rect.x;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n\n  getKeyLeftOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = rect.maxX - candidate.rect.maxX;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n}\n\nconst layoutOptions = {\n  XS: {\n    compact: {\n      minSpace: new Size(6, 6),\n      minItemSize: new Size(100, 100),\n      maxItemSize: new Size(140, 140)\n    },\n    regular: {\n      minSpace: new Size(8, 8),\n      minItemSize: new Size(100, 100),\n      maxItemSize: new Size(140, 140)\n    },\n    spacious: {\n      minSpace: new Size(12, 12),\n      minItemSize: new Size(100, 100),\n      maxItemSize: new Size(140, 140)\n    }\n  },\n  S: {\n    compact: {\n      minSpace: new Size(8, 8),\n      minItemSize: new Size(150, 150),\n      maxItemSize: new Size(210, 210)\n    },\n    regular: {\n      minSpace: new Size(12, 12),\n      minItemSize: new Size(150, 150),\n      maxItemSize: new Size(210, 210)\n    },\n    spacious: {\n      minSpace: new Size(16, 16),\n      minItemSize: new Size(150, 150),\n      maxItemSize: new Size(210, 210)\n    }\n  },\n  M: {\n    compact: {\n      minSpace: new Size(12, 12),\n      minItemSize: new Size(200, 200),\n      maxItemSize: new Size(280, 280)\n    },\n    regular: {\n      minSpace: new Size(16, 16),\n      minItemSize: new Size(200, 200),\n      maxItemSize: new Size(280, 280)\n    },\n    spacious: {\n      minSpace: new Size(20, 20),\n      minItemSize: new Size(200, 200),\n      maxItemSize: new Size(280, 280)\n    }\n  },\n  L: {\n    compact: {\n      minSpace: new Size(16, 16),\n      minItemSize: new Size(270, 270),\n      maxItemSize: new Size(370, 370)\n    },\n    regular: {\n      minSpace: new Size(20, 20),\n      minItemSize: new Size(270, 270),\n      maxItemSize: new Size(370, 370)\n    },\n    spacious: {\n      minSpace: new Size(24, 24),\n      minItemSize: new Size(270, 270),\n      maxItemSize: new Size(370, 370)\n    }\n  },\n  XL: {\n    compact: {\n      minSpace: new Size(20, 20),\n      minItemSize: new Size(340, 340),\n      maxItemSize: new Size(460, 460)\n    },\n    regular: {\n      minSpace: new Size(24, 24),\n      minItemSize: new Size(340, 340),\n      maxItemSize: new Size(460, 460)\n    },\n    spacious: {\n      minSpace: new Size(28, 28),\n      minItemSize: new Size(340, 340),\n      maxItemSize: new Size(460, 460)\n    }\n  }\n};\n\nconst cardViewStyles = style({\n  overflowY: {\n    default: 'auto',\n    isLoading: 'hidden'\n  },\n  display: {\n    isEmpty: 'flex'\n  },\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isEmpty: {\n      isFocusVisible: 'solid'\n    }\n  },\n  outlineOffset: -2\n}, getAllowedOverrides({height: true}));\n\nexport function CardView<T extends object>(props: CardViewProps<T>) {\n  let {children, layout: layoutName = 'grid', size = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  let options = layoutOptions[size][density];\n  let layout = useMemo(() => {\n    variant; // needed to invalidate useMemo\n    return layoutName === 'waterfall' ? new WaterfallLayout(options) : new FlexibleGridLayout(options);\n  }, [options, variant, layoutName]);\n\n  let ref = useRef(null);\n  useLoadMore({\n    isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',\n    items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>\n    onLoadMore: props.onLoadMore\n  }, ref);\n\n  return (\n    <UNSTABLE_Virtualizer layout={layout}>\n      <CardViewContext.Provider value={GridListItem}>\n        <CardContext.Provider value={{size, variant}}>\n          <ImageCoordinator>\n            <AriaGridList\n              ref={ref}\n              {...otherProps}\n              layout=\"grid\"\n              selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n              style={{\n                ...UNSAFE_style,\n                scrollPadding: options.minSpace.height\n              }}\n              className={renderProps => UNSAFE_className + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, styles)}>\n              {children}\n            </AriaGridList>\n          </ImageCoordinator>\n        </CardContext.Provider>\n      </CardViewContext.Provider>\n    </UNSTABLE_Virtualizer>\n  );\n}\n"],"names":[],"version":3,"file":"CardView.css.map"}
+{"mappings":"AA2euB;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA","sources":["packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport {\n  GridList as AriaGridList,\n  GridLayoutOptions,\n  GridListItem,\n  GridListProps,\n  UNSTABLE_Virtualizer\n} from 'react-aria-components';\nimport {CardContext, CardViewContext} from './Card';\nimport {DOMRef, forwardRefType, Key, LayoutDelegate, LoadingState, Node} from '@react-types/shared';\nimport {focusRing, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {forwardRef, useMemo, useState} from 'react';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style'>, UnsafeStyles {\n  /**\n   * The layout of the cards.\n   * @default 'grid'\n   */\n  layout?: 'grid' | 'waterfall',\n  /**\n   * The size of the cards.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of space between the cards.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The visual style of the cards.\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',\n  /**\n   * How selection should be displayed.\n   * @default 'checkbox'\n   */\n  selectionStyle?: 'checkbox' | 'highlight',\n  /** The loading state of the CardView. */\n  loadingState?: LoadingState,\n  /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */\n  onLoadMore?: () => void,\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\nclass FlexibleGridLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> {\n  protected contentSize: Size = new Size();\n  protected layoutInfos: Map<Key, LayoutInfo> = new Map();\n\n  update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n    let {\n      minItemSize = new Size(200, 200),\n      maxItemSize = new Size(Infinity, Infinity),\n      minSpace = new Size(18, 18),\n      maxColumns = Infinity\n    } = invalidationContext.layoutOptions || {};\n    let visibleWidth = this.virtualizer.visibleRect.width;\n\n    // The max item width is always the entire viewport.\n    // If the max item height is infinity, scale in proportion to the max width.\n    let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n    let maxItemHeight = Number.isFinite(maxItemSize.height) \n      ? maxItemSize.height\n      : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n    // Compute the number of rows and columns needed to display the content\n    let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n    let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n    // Compute the available width (minus the space between items)\n    let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n    // Compute the item width based on the space available\n    let itemWidth = Math.floor(width / numColumns);\n    itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n    // Compute the item height, which is proportional to the item width\n    let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n    let itemHeight = minItemSize.height +  Math.floor((maxItemHeight - minItemSize.height) * t);\n    itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));    \n\n    // Compute the horizontal spacing and content height\n    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n    let rows = Math.ceil(this.virtualizer.collection.size / numColumns);\n    let iterator = this.virtualizer.collection[Symbol.iterator]();\n    let y = rows > 0 ? minSpace.height : 0;\n    let newLayoutInfos = new Map();\n    let skeleton: Node<T> | null = null;\n    let skeletonCount = 0;\n    for (let row = 0; row < rows; row++) {\n      let maxHeight = 0;\n      let rowLayoutInfos: LayoutInfo[] = [];\n      for (let col = 0; col < numColumns; col++) {\n        // Repeat skeleton until the end of the current row.\n        let node = skeleton || iterator.next().value;\n        if (!node) {\n          break;\n        }\n\n        if (node.type === 'skeleton') {\n          skeleton = node;\n        }\n\n        let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;\n        let content = skeleton ? {...skeleton} : node;\n        let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);\n        let oldLayoutInfo = this.layoutInfos.get(key);\n        let height = itemHeight;\n        let estimatedSize = true;\n        if (oldLayoutInfo) {\n          height = oldLayoutInfo.rect.height;\n          estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || (oldLayoutInfo.content !== content);\n        }\n\n        let rect = new Rect(x, y, itemWidth, height);\n        let layoutInfo = new LayoutInfo(node.type, key, rect);\n        layoutInfo.estimatedSize = estimatedSize;\n        layoutInfo.allowOverflow = true;\n        layoutInfo.content = content;\n        newLayoutInfos.set(key, layoutInfo);\n        rowLayoutInfos.push(layoutInfo);\n\n        maxHeight = Math.max(maxHeight, rect.height);\n      }\n\n      for (let layoutInfo of rowLayoutInfos) {\n        layoutInfo.rect.height = maxHeight;\n      }\n\n      y += maxHeight + minSpace.height;\n\n      // Keep adding skeleton rows until we fill the viewport\n      if (skeleton && row === rows - 1 && y < this.virtualizer.visibleRect.height) {\n        rows++;\n      }\n    }\n\n    this.layoutInfos = newLayoutInfos;\n    this.contentSize = new Size(this.virtualizer.visibleRect.width, y);\n  }\n\n  getLayoutInfo(key: Key): LayoutInfo {\n    return this.layoutInfos.get(key)!;\n  }\n\n  getContentSize(): Size {\n    return this.contentSize;\n  }\n\n  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n    let layoutInfos: LayoutInfo[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n        layoutInfos.push(layoutInfo);\n      }\n    }\n    return layoutInfos;\n  }\n\n  updateItemSize(key: Key, size: Size) {\n    let layoutInfo = this.layoutInfos.get(key);\n    if (!size || !layoutInfo) {\n      return false;\n    }\n\n    if (size.height !== layoutInfo.rect.height) {\n      let newLayoutInfo = layoutInfo.copy();\n      newLayoutInfo.rect.height = size.height;\n      newLayoutInfo.estimatedSize = false;\n      this.layoutInfos.set(key, newLayoutInfo);\n      return true;\n    }\n\n    return false;\n  }\n}\n\nclass WaterfallLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> implements LayoutDelegate {\n  protected contentSize: Size = new Size();\n  protected layoutInfos: Map<Key, LayoutInfo> = new Map();\n\n  update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {\n    let {\n      minItemSize = new Size(200, 200),\n      maxItemSize = new Size(Infinity, Infinity),\n      minSpace = new Size(18, 18),\n      maxColumns = Infinity\n    } = invalidationContext.layoutOptions || {};\n    let visibleWidth = this.virtualizer.visibleRect.width;\n\n    // The max item width is always the entire viewport.\n    // If the max item height is infinity, scale in proportion to the max width.\n    let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n    let maxItemHeight = Number.isFinite(maxItemSize.height) \n      ? maxItemSize.height\n      : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n    // Compute the number of rows and columns needed to display the content\n    let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n    let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n    // Compute the available width (minus the space between items)\n    let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n    // Compute the item width based on the space available\n    let itemWidth = Math.floor(width / numColumns);\n    itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n    // Compute the item height, which is proportional to the item width\n    let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n    let itemHeight = minItemSize.height +  Math.floor((maxItemHeight - minItemSize.height) * t);\n    itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));    \n\n    // Compute the horizontal spacing and content height\n    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n    // Setup an array of column heights\n    let columnHeights = Array(numColumns).fill(minSpace.height);\n    let newLayoutInfos = new Map();\n    let addNode = (key: Key, node: Node<T>) => {\n      let oldLayoutInfo = this.layoutInfos.get(key);\n      let height = itemHeight;\n      let estimatedSize = true;\n      if (oldLayoutInfo) {\n        height = oldLayoutInfo.rect.height;\n        estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;\n      }\n\n      // Figure out which column to place the item in, and compute its position.\n      let column = columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);\n      let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);\n      let y = columnHeights[column];\n\n      let rect = new Rect(x, y, itemWidth, height);\n      let layoutInfo = new LayoutInfo(node.type, key, rect);\n      layoutInfo.estimatedSize = estimatedSize;\n      layoutInfo.allowOverflow = true;\n      layoutInfo.content = node;\n      newLayoutInfos.set(key, layoutInfo);\n\n      columnHeights[column] += layoutInfo.rect.height + minSpace.height;\n    };\n\n    let skeletonCount = 0;\n    for (let node of this.virtualizer.collection) {\n      if (node.type === 'skeleton') {\n        // Add skeleton cards until every column has at least one, and we fill the viewport.\n        let startingHeights = [...columnHeights];\n        while (\n          !columnHeights.every((h, i) => h !== startingHeights[i]) ||\n          Math.min(...columnHeights) < this.virtualizer.visibleRect.height\n        ) {\n          let key = `${node.key}-${skeletonCount++}`;\n          let content = this.layoutInfos.get(key)?.content || {...node};\n          addNode(key, content);\n        }\n        break;\n      } else {\n        addNode(node.key, node);\n      }\n    }\n\n    // Reset all columns to the maximum for the next section\n    let maxHeight = Math.max(...columnHeights);\n    this.contentSize = new Size(this.virtualizer.visibleRect.width, maxHeight);\n    this.layoutInfos = newLayoutInfos;\n  }\n\n  getLayoutInfo(key: Key): LayoutInfo {\n    return this.layoutInfos.get(key)!;\n  }\n\n  getContentSize(): Size {\n    return this.contentSize;\n  }\n\n  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n    let layoutInfos: LayoutInfo[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {\n        layoutInfos.push(layoutInfo);\n      }\n    }\n    return layoutInfos;\n  }\n\n  updateItemSize(key: Key, size: Size) {\n    let layoutInfo = this.layoutInfos.get(key);\n    if (!size || !layoutInfo) {\n      return false;\n    }\n\n    if (size.height !== layoutInfo.rect.height) {\n      let newLayoutInfo = layoutInfo.copy();\n      newLayoutInfo.rect.height = size.height;\n      newLayoutInfo.estimatedSize = false;\n      this.layoutInfos.set(key, newLayoutInfo);\n      return true;\n    }\n\n    return false;\n  }\n\n  // Override keyboard navigation to work spacially.\n  getKeyRightOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = candidate.rect.x - rect.x;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n\n  getKeyLeftOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = rect.maxX - candidate.rect.maxX;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n\n  // This overrides the default behavior of shift selection to work spacially\n  // rather than following the order of the items in the collection (which may appear unpredictable).\n  getKeyRange(from: Key, to: Key): Key[] {\n    let fromLayoutInfo = this.getLayoutInfo(from);\n    let toLayoutInfo = this.getLayoutInfo(to);\n    if (!fromLayoutInfo || !toLayoutInfo) {\n      return [];\n    }\n\n    // Find items where half of the area intersects the rectangle \n    // formed from the first item to the last item in the range.\n    let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);\n    let keys: Key[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) {\n        keys.push(layoutInfo.key);\n      }\n    }\n    return keys;\n  }\n}\n\nconst layoutOptions = {\n  XS: {\n    compact: {\n      minSpace: new Size(6, 6),\n      minItemSize: new Size(100, 100),\n      maxItemSize: new Size(140, 140)\n    },\n    regular: {\n      minSpace: new Size(8, 8),\n      minItemSize: new Size(100, 100),\n      maxItemSize: new Size(140, 140)\n    },\n    spacious: {\n      minSpace: new Size(12, 12),\n      minItemSize: new Size(100, 100),\n      maxItemSize: new Size(140, 140)\n    }\n  },\n  S: {\n    compact: {\n      minSpace: new Size(8, 8),\n      minItemSize: new Size(150, 150),\n      maxItemSize: new Size(210, 210)\n    },\n    regular: {\n      minSpace: new Size(12, 12),\n      minItemSize: new Size(150, 150),\n      maxItemSize: new Size(210, 210)\n    },\n    spacious: {\n      minSpace: new Size(16, 16),\n      minItemSize: new Size(150, 150),\n      maxItemSize: new Size(210, 210)\n    }\n  },\n  M: {\n    compact: {\n      minSpace: new Size(12, 12),\n      minItemSize: new Size(200, 200),\n      maxItemSize: new Size(280, 280)\n    },\n    regular: {\n      minSpace: new Size(16, 16),\n      minItemSize: new Size(200, 200),\n      maxItemSize: new Size(280, 280)\n    },\n    spacious: {\n      minSpace: new Size(20, 20),\n      minItemSize: new Size(200, 200),\n      maxItemSize: new Size(280, 280)\n    }\n  },\n  L: {\n    compact: {\n      minSpace: new Size(16, 16),\n      minItemSize: new Size(270, 270),\n      maxItemSize: new Size(370, 370)\n    },\n    regular: {\n      minSpace: new Size(20, 20),\n      minItemSize: new Size(270, 270),\n      maxItemSize: new Size(370, 370)\n    },\n    spacious: {\n      minSpace: new Size(24, 24),\n      minItemSize: new Size(270, 270),\n      maxItemSize: new Size(370, 370)\n    }\n  },\n  XL: {\n    compact: {\n      minSpace: new Size(20, 20),\n      minItemSize: new Size(340, 340),\n      maxItemSize: new Size(460, 460)\n    },\n    regular: {\n      minSpace: new Size(24, 24),\n      minItemSize: new Size(340, 340),\n      maxItemSize: new Size(460, 460)\n    },\n    spacious: {\n      minSpace: new Size(28, 28),\n      minItemSize: new Size(340, 340),\n      maxItemSize: new Size(460, 460)\n    }\n  }\n};\n\nconst SIZES = ['XS', 'S', 'M', 'L', 'XL'] as const;\n\nconst cardViewStyles = style({\n  overflowY: {\n    default: 'auto',\n    isLoading: 'hidden'\n  },\n  display: {\n    isEmpty: 'flex'\n  },\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isEmpty: {\n      isFocusVisible: 'solid'\n    }\n  },\n  outlineOffset: -2\n}, getAllowedOverrides({height: true}));\n\nfunction CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let {children, layout: layoutName = 'grid', size: sizeProp = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n  let domRef = useDOMRef(ref);\n  let layout = useMemo(() => {\n    return layoutName === 'waterfall' ? new WaterfallLayout() : new FlexibleGridLayout();\n  }, [layoutName]);\n  \n  // This calculates the maximum t-shirt size where at least two columns fit in the available width.\n  let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);\n  let updateSize = useEffectEvent(() => {\n    let w = domRef.current?.clientWidth ?? 0;\n    let i = SIZES.length - 1;\n    while (i > 0) {\n      let opts = layoutOptions[SIZES[i]][density];\n      if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) {\n        break;\n      }\n      i--;\n    }\n    setMaxSizeIndex(i);\n  });\n\n  useResizeObserver({\n    ref: domRef,\n    box: 'border-box',\n    onResize: updateSize\n  });\n\n  useLayoutEffect(() => {\n    updateSize();\n  }, [updateSize]);\n\n  // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.\n  let size = SIZES[Math.min(maxSizeIndex, SIZES.indexOf(sizeProp))];\n  let options = layoutOptions[size][density];\n\n  useLoadMore({\n    isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',\n    items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>\n    onLoadMore: props.onLoadMore\n  }, domRef);\n\n  let ctx = useMemo(() => ({size, variant}), [size, variant]);\n  \n  return (\n    <UNSTABLE_Virtualizer layout={layout} layoutOptions={options}>\n      <CardViewContext.Provider value={GridListItem}>\n        <CardContext.Provider value={ctx}>\n          <ImageCoordinator>\n            <AriaGridList\n              ref={domRef}\n              {...otherProps}\n              layout=\"grid\"\n              selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n              style={{\n                ...UNSAFE_style,\n                scrollPadding: options.minSpace.height\n              }}\n              className={renderProps => UNSAFE_className + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, styles)}>\n              {children}\n            </AriaGridList>\n          </ImageCoordinator>\n        </CardContext.Provider>\n      </CardViewContext.Provider>\n    </UNSTABLE_Virtualizer>\n  );\n}\n\nconst _CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(CardView);\nexport {_CardView as CardView};\n"],"names":[],"version":3,"file":"CardView.css.map"}