@react-spectrum/s2 3.0.0-nightly-086ad3115-240912 → 3.0.0-nightly-8ab4f20de-240913

package/dist/Card.mjs.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Card.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 {ActionMenuContext} from './ActionMenu';\nimport {AvatarContext} from './Avatar';\nimport {ButtonContext, LinkButtonContext} from './Button';\nimport {Checkbox} from './Checkbox';\nimport {colorToken} from '../style/tokens' with {type: 'macro'};\nimport {ContentContext, FooterContext, TextContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';\nimport {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';\nimport {DividerContext} from './Divider';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {lightDark, size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CardProps extends Omit<GridListItemProps, 'className' | 'style' | 'children'>, StyleProps {\n  /** The children of the Card. */\n  children: ReactNode,\n  /**\n   * The size of the Card.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of internal padding within the Card.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The visual style of the Card.\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet'\n}\n\nconst borderRadius = {\n  default: 'lg',\n  size: {\n    XS: 'default',\n    S: 'default'\n  }\n} as const;\n\nlet card = style({\n  display: 'flex',\n  flexDirection: 'column',\n  position: 'relative',\n  borderRadius,\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      variant: {\n        primary: 'elevated',\n        secondary: 'layer-1'\n      },\n      forcedColors: 'ButtonFace'\n    }\n  },\n  backgroundColor: {\n    default: '--s2-container-bg',\n    variant: {\n      tertiary: 'transparent',\n      quiet: 'transparent'\n    }\n  },\n  boxShadow: {\n    default: 'emphasized',\n    isHovered: 'elevated',\n    isFocusVisible: 'elevated',\n    isSelected: 'elevated',\n    forcedColors: '[0 0 0 1px ButtonBorder]',\n    variant: {\n      tertiary: {\n        // Render border with box-shadow to avoid affecting layout.\n        default: `[0 0 0 1px ${colorToken('gray-100')}]`,\n        isHovered: `[0 0 0 1px ${colorToken('gray-200')}]`,\n        isFocusVisible: `[0 0 0 1px ${colorToken('gray-200')}]`,\n        isSelected: 'none',\n        forcedColors: '[0 0 0 1px ButtonBorder]'\n      },\n      quiet: 'none'\n    }\n  },\n  forcedColorAdjust: 'none',\n  transition: 'default',\n  fontFamily: 'sans',\n  overflow: {\n    default: 'clip',\n    variant: {\n      quiet: 'visible'\n    }\n  },\n  disableTapHighlight: true,\n  userSelect: {\n    isCardView: 'none'\n  },\n  cursor: {\n    isLink: 'pointer'\n  },\n  width: {\n    size: {\n      XS: 112,\n      S: 192,\n      M: 240,\n      L: 320,\n      XL: size(400)\n    },\n    isCardView: 'full'\n  },\n  height: 'full',\n  '--card-spacing': {\n    type: 'paddingTop',\n    value: {\n      density: {\n        compact: {\n          size: {\n            XS: size(6),\n            S: 8,\n            M: 12,\n            L: 16,\n            XL: 20\n          }\n        },\n        regular: {\n          size: {\n            XS: 8,\n            S: 12,\n            M: 16,\n            L: 20,\n            XL: 24\n          }\n        },\n        spacious: {\n          size: {\n            XS: 12,\n            S: 16,\n            M: 20,\n            L: 24,\n            XL: 28\n          }\n        }\n      }\n    }\n  },\n  '--card-padding-y': {\n    type: 'paddingTop',\n    value: {\n      default: '--card-spacing',\n      variant: {\n        quiet: 0\n      }\n    }\n  },\n  '--card-padding-x': {\n    type: 'paddingStart',\n    value: {\n      default: '--card-spacing',\n      variant: {\n        quiet: 0\n      }\n    }\n  },\n  paddingY: '--card-padding-y',\n  paddingX: '--card-padding-x',\n  boxSizing: 'border-box',\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid',\n    // Focus ring moves to preview when quiet.\n    variant: {\n      quiet: 'none'\n    }\n  }\n}, getAllowedOverrides());\n\nlet selectionIndicator = style({\n  position: 'absolute',\n  inset: 0,\n  zIndex: 2,\n  borderRadius,\n  pointerEvents: 'none',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  borderColor: 'gray-1000',\n  transition: 'default',\n  opacity: {\n    default: 0,\n    isSelected: 1\n  },\n  // Quiet cards with no checkbox have an extra inner stroke\n  // to distinguish the selection indicator from the preview.\n  outlineColor: 'gray-25',\n  outlineOffset: -4,\n  outlineStyle: {\n    default: 'none',\n    isStrokeInner: 'solid'\n  },\n  outlineWidth: 2\n});\n\nlet preview = style({\n  position: 'relative',\n  transition: 'default',\n  overflow: 'clip',\n  marginX: '[calc(var(--card-padding-x) * -1)]',\n  marginTop: '[calc(var(--card-padding-y) * -1)]',\n  marginBottom: {\n    ':last-child': '[calc(var(--card-padding-y) * -1)]'\n  },\n  borderRadius: {\n    isQuiet: borderRadius\n  },\n  boxShadow: {\n    isQuiet: {\n      isHovered: 'elevated',\n      isFocusVisible: 'elevated',\n      isSelected: 'elevated'\n    }\n  },\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isQuiet: {\n      isFocusVisible: 'solid'\n    }\n  }\n});\n\nconst image = style({\n  width: 'full',\n  aspectRatio: '[3/2]',\n  objectFit: 'cover',\n  userSelect: 'none',\n  pointerEvents: 'none'\n});\n\nlet title = style({\n  font: 'title',\n  fontSize: {\n    size: {\n      XS: 'title-xs',\n      S: 'title-xs',\n      M: 'title-sm',\n      L: 'title',\n      XL: 'title-lg'\n    }\n  },\n  lineClamp: 3,\n  gridArea: 'title'\n});\n\nlet description = style({\n  font: 'body',\n  fontSize: {\n    size: {\n      XS: 'body-2xs',\n      S: 'body-2xs',\n      M: 'body-xs',\n      L: 'body-sm',\n      XL: 'body'\n    }\n  },\n  lineClamp: 3,\n  gridArea: 'description'\n});\n\nlet content = style({\n  display: 'grid',\n  // By default, all elements are displayed in a stack.\n  // If an action menu is present, place it next to the title.\n  gridTemplateColumns: {\n    default: ['1fr'],\n    ':has([data-slot=menu])': ['minmax(0, 1fr)', 'auto']\n  },\n  gridTemplateAreas: {\n    default: [\n      'title',\n      'description'\n    ],\n    ':has([data-slot=menu])': [\n      'title menu',\n      'description description'\n    ]\n  },\n  columnGap: 4,\n  flexGrow: 1,\n  alignItems: 'baseline',\n  alignContent: 'space-between',\n  rowGap: {\n    size: {\n      XS: 4,\n      S: 4,\n      M: size(6),\n      L: size(6),\n      XL: 8\n    }\n  },\n  paddingTop: {\n    default: '--card-spacing',\n    ':first-child': 0\n  },\n  paddingBottom: {\n    default: '[calc(var(--card-spacing) * 1.5 / 2)]',\n    ':last-child': 0\n  }\n});\n\nlet footer = style({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'end',\n  justifyContent: 'space-between',\n  gap: 8,\n  paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'\n});\n\nexport const CardViewContext = createContext<'div' | typeof GridListItem>('div');\nexport const CardContext = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);\n\ninterface InternalCardContextValue {\n  isQuiet: boolean,\n  size: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  isSelected: boolean,\n  isHovered: boolean,\n  isFocusVisible: boolean,\n  isPressed: boolean,\n  isCheckboxSelection: boolean\n}\n\nconst InternalCardContext = createContext<InternalCardContextValue>({\n  isQuiet: false,\n  size: 'M',\n  isSelected: false,\n  isHovered: false,\n  isFocusVisible: false,\n  isPressed: false,\n  isCheckboxSelection: true\n});\n\nconst actionButtonSize = {\n  XS: 'XS',\n  S: 'XS',\n  M: 'S',\n  L: 'M',\n  XL: 'L'\n} as const;\n\nexport const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n  [props] = useSpectrumContextProps(props, ref, CardContext);\n  let domRef = useDOMRef(ref);\n  let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;\n  let isQuiet = variant === 'quiet';\n  let isSkeleton = useIsSkeleton();\n  let children = (\n    <Provider\n      values={[\n        [ImageContext, {alt: '', styles: image}],\n        [TextContext, {\n          slots: {\n            [DEFAULT_SLOT]: {},\n            title: {styles: title({size})},\n            description: {styles: description({size})}\n          }\n        }],\n        [ContentContext, {styles: content({size})}],\n        [DividerContext, {size: 'S'}],\n        [FooterContext, {styles: footer}],\n        [ActionMenuContext, {\n          isQuiet: true,\n          size: actionButtonSize[size],\n          isDisabled: isSkeleton,\n          // @ts-ignore\n          'data-slot': 'menu',\n          styles: style({gridArea: 'menu'})\n        }],\n        [SkeletonContext, isSkeleton]\n      ]}>\n      <ImageCoordinator>\n        {props.children}\n      </ImageCoordinator>\n    </Provider>\n  );\n\n  let ElementType = useContext(CardViewContext);\n  if (ElementType === 'div' || isSkeleton) {\n    return (\n      <div\n        {...filterDOMProps(otherProps)}\n        id={String(id)}\n        // @ts-ignore - React < 19 compat\n        inert={isSkeleton ? 'true' : undefined}\n        ref={domRef}\n        className={UNSAFE_className + card({size, density, variant, isCardView: ElementType !== 'div'}, styles)}\n        style={UNSAFE_style}>\n        <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: false, isHovered: false, isFocusVisible: false, isSelected: false, isPressed: false}}>\n          {children}\n        </InternalCardContext.Provider>\n      </div>\n    );\n  }\n\n  let press = pressScale(domRef, UNSAFE_style);\n  return (\n    <ElementType\n      {...props}\n      ref={domRef}\n      className={renderProps => UNSAFE_className + card({...renderProps, isCardView: true, isLink: !!props.href, size, density, variant}, styles)}\n      style={renderProps => \n        // Only the preview in quiet cards scales down on press\n        variant === 'quiet' ? UNSAFE_style : press(renderProps) \n      }>\n      {({selectionMode, selectionBehavior, isHovered, isFocusVisible, isSelected, isPressed}) => (\n        <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: selectionMode !== 'none' && selectionBehavior === 'toggle', isHovered, isFocusVisible, isSelected, isPressed}}>\n          {/* Selection indicator and checkbox move inside the preview for quiet cards */}\n          {!isQuiet && <SelectionIndicator />}\n          {!isQuiet && selectionMode !== 'none' && selectionBehavior === 'toggle' &&\n            <CardCheckbox />\n          }\n          {/* this makes the :first-child selector work even with the checkbox */}\n          <div className={style({display: 'contents'})}>\n            {children}\n          </div>\n        </InternalCardContext.Provider>\n      )}\n    </ElementType>\n  );\n});\n\nfunction SelectionIndicator() {\n  let {size, isSelected, isQuiet, isCheckboxSelection} = useContext(InternalCardContext);\n  return (\n    <div\n      className={selectionIndicator({\n        size,\n        isSelected,\n        // Add an inner stroke only for quiet cards with no checkbox to \n        // help distinguish the selected state from the preview.\n        isStrokeInner: isQuiet && !isCheckboxSelection\n      })} />\n  );\n}\n\nfunction CardCheckbox() {\n  let {size} = useContext(InternalCardContext);\n  return (\n    <div\n      className={style({\n        position: 'absolute',\n        top: '--card-spacing',\n        insetStart: '--card-spacing',\n        zIndex: 2,\n        padding: 4,\n        backgroundColor: lightDark('transparent-white-600', 'transparent-black-600'),\n        borderRadius: 'default',\n        boxShadow: 'emphasized'\n      })}>\n      <Checkbox\n        slot=\"selection\"\n        excludeFromTabOrder\n        size={size === 'XS' ? 'S' : size} />\n    </div>\n  );\n}\n\nexport interface CardPreviewProps extends UnsafeStyles, DOMProps {\n  children: ReactNode\n}\n\nexport const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n  let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);\n  let {UNSAFE_className, UNSAFE_style} = props;\n  let domRef = useDOMRef(ref);\n  return (\n    <div\n      {...filterDOMProps(props)}\n      slot=\"preview\"\n      ref={domRef}\n      className={UNSAFE_className + preview({size, isQuiet, isHovered, isFocusVisible, isSelected})}\n      style={isQuiet ? pressScale(domRef)({isPressed}) : UNSAFE_style}>\n      {isQuiet && <SelectionIndicator />}\n      {isQuiet && isCheckboxSelection && <CardCheckbox />}\n      <div className={style({borderRadius: '[inherit]', overflow: 'clip'})}>\n        {props.children}\n      </div>\n    </div>\n  );\n});\n\nconst collection = style({\n  display: 'grid',\n  gridTemplateColumns: 'repeat(3, 1fr)',\n  gap: {\n    default: 4,\n    size: {\n      XS: 2,\n      S: 2\n    }\n  }\n});\n\nconst collectionImage = style({\n  width: 'full',\n  aspectRatio: {\n    default: 'square',\n    ':nth-last-child(4):first-child': '[3/2]'\n  },\n  gridColumnEnd: {\n    ':nth-last-child(4):first-child': 'span 3'\n  },\n  objectFit: 'cover',\n  pointerEvents: 'none',\n  userSelect: 'none'\n});\n\nexport const CollectionCardPreview = forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n  let {size} = useContext(InternalCardContext)!;\n  return (\n    <CardPreview {...props} ref={ref}>\n      <div className={collection({size})}>\n        <ImageContext.Provider value={{styles: collectionImage}}>\n          {props.children}\n        </ImageContext.Provider>\n      </div>\n    </CardPreview>\n  );\n});\n\nexport interface AssetCardProps extends Omit<CardProps, 'density'> {}\n\nexport const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {\n  return (\n    <Card {...props} ref={ref} density=\"regular\">\n      <Provider\n        values={[\n          [ImageContext, {\n            alt: '',\n            styles: style({\n              width: 'full',\n              aspectRatio: 'square',\n              objectFit: 'contain',\n              pointerEvents: 'none',\n              userSelect: 'none'\n            })\n          }],\n          [IllustrationContext, {\n            render(icon) {\n              return (\n                <SkeletonWrapper>\n                  <div\n                    className={style({\n                      display: 'flex',\n                      alignItems: 'center',\n                      justifyContent: 'center',\n                      backgroundColor: 'gray-100',\n                      aspectRatio: 'square'\n                    })}>\n                    {icon}\n                  </div>\n                </SkeletonWrapper>\n              );\n            },\n            styles: style({\n              height: 'auto',\n              maxSize: 160,\n              // TODO: this is made up.\n              width: '[50%]'\n            })\n          }]\n        ]}>\n        {props.children}\n      </Provider>\n    </Card>\n  );\n});\n\nconst avatarSize = {\n  XS: 24,\n  S: 48,\n  M: 64,\n  L: 64,\n  XL: 80\n} as const;\n\nexport interface UserCardProps extends Omit<CardProps, 'density' | 'variant'> {\n  // Quiet is not supported due to lack of indent between preview and avatar.\n  variant?: 'primary' | 'secondary' | 'tertiary'\n}\n\nexport const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n  let {size = 'M'} = props;\n  return (\n    <Card {...props} ref={ref} density=\"spacious\">\n      <Provider\n        values={[\n          [ImageContext, {\n            alt: '',\n            styles: style({\n              width: 'full',\n              aspectRatio: '[3/1]',\n              objectFit: 'cover',\n              pointerEvents: 'none',\n              userSelect: 'none'\n            })\n          }],\n          [AvatarContext, {\n            size: avatarSize[size],\n            UNSAFE_style: {\n              '--size': avatarSize[size] + 'px'\n            } as CSSProperties,\n            styles: style({\n              position: 'relative',\n              marginTop: {\n                default: 0,\n                ':is([slot=preview] + &)': '[calc(var(--size) / -2)]'\n              }\n            }),\n            isOverBackground: true\n          }]\n        ]}>\n        {props.children}\n      </Provider>\n    </Card>\n  );\n});\n\nconst buttonSize = {\n  XS: 'S',\n  S: 'S',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nexport interface ProductCardProps extends Omit<CardProps, 'density' | 'variant'> {\n  // Quiet is not supported due to lack of indent between preview and thumbnail.\n  variant?: 'primary' | 'secondary' | 'tertiary'\n}\n\nexport const ProductCard = forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {\n  let {size = 'M'} = props;\n  return (\n    <Card {...props} ref={ref} density=\"spacious\">\n      <Provider\n        values={[\n          [ImageContext, {\n            slots: {\n              preview: {\n                alt: '',\n                styles: style({\n                  width: 'full',\n                  aspectRatio: '[5/1]',\n                  objectFit: 'cover',\n                  pointerEvents: 'none',\n                  userSelect: 'none'\n                })\n              },\n              thumbnail: {\n                alt: '',\n                styles: style({\n                  position: 'relative',\n                  pointerEvents: 'none',\n                  userSelect: 'none',\n                  size: {\n                    size: {\n                      XS: 24,\n                      S: 36,\n                      M: 40,\n                      L: 44,\n                      XL: 56\n                    }\n                  },\n                  borderRadius: {\n                    default: 'default',\n                    size: {\n                      XS: 'sm',\n                      S: 'sm'\n                    }\n                  },\n                  objectFit: 'cover',\n                  marginTop: {\n                    default: 0,\n                    ':is([slot=preview] + &)': '[calc(self(height) / -2)]'\n                  },\n                  outlineStyle: 'solid',\n                  outlineWidth: {\n                    default: 2,\n                    size: {\n                      XS: 1\n                    }\n                  },\n                  outlineColor: '--s2-container-bg'\n                })({size})\n              }\n            }\n          }],\n          [FooterContext, {\n            styles: mergeStyles(footer, style({\n              justifyContent: 'end'\n            }))\n          }],\n          [ButtonContext, {size: buttonSize[size]}],\n          [LinkButtonContext, {size: buttonSize[size]}]\n        ]}>\n        {props.children}\n      </Provider>\n    </Card>\n  );\n});\n"],"names":[],"version":3,"file":"Card.mjs.map"}

package/dist/CardView.cjs

@@ -0,0 +1,423 @@
+require("./CardView.css");
+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$reactstatelyvirtualizer = require("@react-stately/virtualizer");
+var $gDulG$reactariautils = require("@react-aria/utils");
+var $gDulG$react = require("react");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "CardView", () => $1aaf8931044a97bd$export$7e52c821f7b6f422);
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+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 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);
+        // 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));
+        // Compute the available width (minus the space between items)
+        let width = visibleWidth - this.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));
+        // 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));
+        // 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 newLayoutInfos = new Map();
+        let skeleton = null;
+        let skeletonCount = 0;
+        for(let row = 0; row < rows; row++){
+            let maxHeight = 0;
+            let rowLayoutInfos = [];
+            for(let col = 0; col < numColumns; col++){
+                // Repeat skeleton until the end of the current row.
+                let node = skeleton || iterator.next().value;
+                if (!node) break;
+                if (node.type === 'skeleton') skeleton = node;
+                let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;
+                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;
+                }
+                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
+                };
+                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;
+            // Keep adding skeleton rows until we fill the viewport
+            if (skeleton && row === rows - 1 && y < this.virtualizer.visibleRect.height) rows++;
+        }
+        this.layoutInfos = newLayoutInfos;
+        this.contentSize = new (0, $gDulG$reactstatelyvirtualizer.Size)(this.virtualizer.visibleRect.width, y);
+    }
+    getLayoutInfo(key) {
+        return this.layoutInfos.get(key);
+    }
+    getContentSize() {
+        return this.contentSize;
+    }
+    getVisibleLayoutInfos(rect) {
+        let layoutInfos = [];
+        for (let layoutInfo of this.layoutInfos.values())if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) layoutInfos.push(layoutInfo);
+        return layoutInfos;
+    }
+    updateItemSize(key, size) {
+        let layoutInfo = this.layoutInfos.get(key);
+        if (!size || !layoutInfo) return false;
+        if (size.height !== layoutInfo.rect.height) {
+            let newLayoutInfo = layoutInfo.copy();
+            newLayoutInfo.rect.height = size.height;
+            newLayoutInfo.estimatedSize = false;
+            this.layoutInfos.set(key, newLayoutInfo);
+            return true;
+        }
+        return false;
+    }
+}
+class $1aaf8931044a97bd$var$WaterfallLayout 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 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);
+        // 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));
+        // Compute the available width (minus the space between items)
+        let width = visibleWidth - this.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));
+        // 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));
+        // 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 newLayoutInfos = new Map();
+        let addNode = (key, node)=>{
+            let oldLayoutInfo = this.layoutInfos.get(key);
+            let height = itemHeight;
+            let estimatedSize = true;
+            if (oldLayoutInfo) {
+                height = oldLayoutInfo.rect.height;
+                estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize;
+            }
+            // 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);
+            let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);
+            let y = columnHeights[column];
+            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;
+            newLayoutInfos.set(key, layoutInfo);
+            columnHeights[column] += layoutInfo.rect.height + this.minSpace.height;
+            return layoutInfo;
+        };
+        let skeletonCount = 0;
+        for (let node of this.virtualizer.collection)if (node.type === 'skeleton') {
+            // Add skeleton cards until every column has at least one, and we fill the viewport.
+            let startingHeights = [
+                ...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 || {
+                    ...node
+                };
+            }
+            break;
+        } else addNode(node.key, node);
+        // Reset all columns to the maximum for the next section
+        let maxHeight = Math.max(...columnHeights);
+        this.contentSize = new (0, $gDulG$reactstatelyvirtualizer.Size)(this.virtualizer.visibleRect.width, maxHeight);
+        this.layoutInfos = newLayoutInfos;
+    }
+    getLayoutInfo(key) {
+        return this.layoutInfos.get(key);
+    }
+    getContentSize() {
+        return this.contentSize;
+    }
+    getVisibleLayoutInfos(rect) {
+        let layoutInfos = [];
+        for (let layoutInfo of this.layoutInfos.values())if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) layoutInfos.push(layoutInfo);
+        return layoutInfos;
+    }
+    updateItemSize(key, size) {
+        let layoutInfo = this.layoutInfos.get(key);
+        if (!size || !layoutInfo) return false;
+        if (size.height !== layoutInfo.rect.height) {
+            let newLayoutInfo = layoutInfo.copy();
+            newLayoutInfo.rect.height = size.height;
+            newLayoutInfo.estimatedSize = false;
+            this.layoutInfos.set(key, newLayoutInfo);
+            return true;
+        }
+        return false;
+    }
+    // Override keyboard navigation to work spacially.
+    getKeyRightOf(key) {
+        let layoutInfo = this.getLayoutInfo(key);
+        if (!layoutInfo) return null;
+        let rect = new (0, $gDulG$reactstatelyvirtualizer.Rect)(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);
+        let layoutInfos = this.getVisibleLayoutInfos(rect);
+        let bestKey = null;
+        let bestDistance = Infinity;
+        for (let candidate of layoutInfos){
+            if (candidate.key === key) continue;
+            // Find the closest item in the x direction with the most overlap in the y direction.
+            let deltaX = candidate.rect.x - rect.x;
+            let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);
+            let distance = deltaX - overlapY;
+            if (distance < bestDistance) {
+                bestDistance = distance;
+                bestKey = candidate.key;
+            }
+        }
+        return bestKey;
+    }
+    getKeyLeftOf(key) {
+        let layoutInfo = this.getLayoutInfo(key);
+        if (!layoutInfo) return null;
+        let rect = new (0, $gDulG$reactstatelyvirtualizer.Rect)(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);
+        let layoutInfos = this.getVisibleLayoutInfos(rect);
+        let bestKey = null;
+        let bestDistance = Infinity;
+        for (let candidate of layoutInfos){
+            if (candidate.key === key) continue;
+            // Find the closest item in the x direction with the most overlap in the y direction.
+            let deltaX = rect.maxX - candidate.rect.maxX;
+            let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);
+            let distance = deltaX - overlapY;
+            if (distance < bestDistance) {
+                bestDistance = distance;
+                bestKey = candidate.key;
+            }
+        }
+        return bestKey;
+    }
+}
+const $1aaf8931044a97bd$var$layoutOptions = {
+    XS: {
+        compact: {
+            minSpace: new (0, $gDulG$reactstatelyvirtualizer.Size)(6, 6),
+            minItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(100, 100),
+            maxItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(140, 140)
+        },
+        regular: {
+            minSpace: new (0, $gDulG$reactstatelyvirtualizer.Size)(8, 8),
+            minItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(100, 100),
+            maxItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(140, 140)
+        },
+        spacious: {
+            minSpace: new (0, $gDulG$reactstatelyvirtualizer.Size)(12, 12),
+            minItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(100, 100),
+            maxItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(140, 140)
+        }
+    },
+    S: {
+        compact: {
+            minSpace: new (0, $gDulG$reactstatelyvirtualizer.Size)(8, 8),
+            minItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(150, 150),
+            maxItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(210, 210)
+        },
+        regular: {
+            minSpace: new (0, $gDulG$reactstatelyvirtualizer.Size)(12, 12),
+            minItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(150, 150),
+            maxItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(210, 210)
+        },
+        spacious: {
+            minSpace: new (0, $gDulG$reactstatelyvirtualizer.Size)(16, 16),
+            minItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(150, 150),
+            maxItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(210, 210)
+        }
+    },
+    M: {
+        compact: {
+            minSpace: new (0, $gDulG$reactstatelyvirtualizer.Size)(12, 12),
+            minItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(200, 200),
+            maxItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(280, 280)
+        },
+        regular: {
+            minSpace: new (0, $gDulG$reactstatelyvirtualizer.Size)(16, 16),
+            minItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(200, 200),
+            maxItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(280, 280)
+        },
+        spacious: {
+            minSpace: new (0, $gDulG$reactstatelyvirtualizer.Size)(20, 20),
+            minItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(200, 200),
+            maxItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(280, 280)
+        }
+    },
+    L: {
+        compact: {
+            minSpace: new (0, $gDulG$reactstatelyvirtualizer.Size)(16, 16),
+            minItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(270, 270),
+            maxItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(370, 370)
+        },
+        regular: {
+            minSpace: new (0, $gDulG$reactstatelyvirtualizer.Size)(20, 20),
+            minItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(270, 270),
+            maxItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(370, 370)
+        },
+        spacious: {
+            minSpace: new (0, $gDulG$reactstatelyvirtualizer.Size)(24, 24),
+            minItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(270, 270),
+            maxItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(370, 370)
+        }
+    },
+    XL: {
+        compact: {
+            minSpace: new (0, $gDulG$reactstatelyvirtualizer.Size)(20, 20),
+            minItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(340, 340),
+            maxItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(460, 460)
+        },
+        regular: {
+            minSpace: new (0, $gDulG$reactstatelyvirtualizer.Size)(24, 24),
+            minItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(340, 340),
+            maxItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(460, 460)
+        },
+        spacious: {
+            minSpace: new (0, $gDulG$reactstatelyvirtualizer.Size)(28, 28),
+            minItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(340, 340),
+            maxItemSize: new (0, $gDulG$reactstatelyvirtualizer.Size)(460, 460)
+        }
+    }
+};
+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) || [];
+    rules += matches.join('');
+    if (props.isLoading) rules += ' __wb';
+    else rules += ' __wa';
+    if (props.isEmpty) rules += ' _Zd';
+    rules += ' _6b';
+    rules += ' _1c';
+    rules += ' _2d';
+    if (props.isEmpty) {
+        if (props.isFocusVisible) rules += ' _Lb';
+    } else rules += ' _La';
+    rules += ' da_____z';
+    rules += ' dx';
+    rules += ' _Nc';
+    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];
+    let layout = (0, $gDulG$react.useMemo)(()=>{
+        variant; // needed to invalidate useMemo
+        return layoutName === 'waterfall' ? new $1aaf8931044a97bd$var$WaterfallLayout(options) : new $1aaf8931044a97bd$var$FlexibleGridLayout(options);
+    }, [
+        options,
+        variant,
+        layoutName
+    ]);
+    let ref = (0, $gDulG$react.useRef)(null);
+    (0, $gDulG$reactariautils.useLoadMore)({
+        isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',
+        items: props.items,
+        onLoadMore: props.onLoadMore
+    }, ref);
+    return /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $gDulG$reactariacomponents.UNSTABLE_Virtualizer), {
+        layout: layout,
+        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
+                },
+                children: /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $a4f1585b527b9b7a$exports.ImageCoordinator), {
+                    children: /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $gDulG$reactariacomponents.GridList), {
+                        ref: ref,
+                        ...otherProps,
+                        layout: "grid",
+                        selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle',
+                        style: {
+                            ...UNSAFE_style,
+                            scrollPadding: options.minSpace.height
+                        },
+                        className: (renderProps)=>UNSAFE_className + $1aaf8931044a97bd$var$cardViewStyles({
+                                ...renderProps,
+                                isLoading: props.loadingState === 'loading'
+                            }, styles),
+                        children: children
+                    })
+                })
+            })
+        })
+    });
+}
+
+
+//# sourceMappingURL=CardView.cjs.map

package/dist/CardView.cjs.map

@@ -0,0 +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"}

package/dist/CardView.css

@@ -0,0 +1,60 @@
+.\.:not(#a#b) {
+  all: revert-layer;
+}
+
+@layer _.a {
+  .__wa {
+    overflow-y: auto;
+  }
+
+  .__wb {
+    overflow-y: hidden;
+  }
+
+  ._Zd {
+    display: flex;
+  }
+
+  ._6b {
+    flex-direction: column;
+  }
+
+  ._1c {
+    align-items: center;
+  }
+
+  ._2d {
+    justify-content: center;
+  }
+
+  ._La {
+    outline-style: none;
+  }
+
+  ._Lb {
+    outline-style: solid;
+  }
+
+  .dx {
+    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #456efe);
+  }
+
+  ._Nc {
+    outline-width: 2px;
+  }
+
+  ._M-3hmpw {
+    outline-offset: -2px;
+  }
+}
+
+@layer _.b, UNSAFE_overrides;
+
+@layer _.b.a {
+  @media (forced-colors: active) {
+    .da_____z {
+      outline-color: highlight;
+    }
+  }
+}
+/*# sourceMappingURL=CardView.css.map */