@react-spectrum/s2 1.3.0 → 1.4.0

package/dist/private/Card.mjs.map

@@ -1 +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 {color, focusRing, lightDark, space, style} from '../style' with {type: 'macro'};\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContentContext, FooterContext, TextContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider} from 'react-aria-components/slots';\nimport {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';\nimport {DividerContext} from './Divider';\nimport {DOMProps, DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {GridListItem, GridListItemProps} from 'react-aria-components/GridList';\nimport {IllustrationContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {inertValue} from 'react-aria/private/utils/inertValue';\nimport {Link} from 'react-aria-components/Link';\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton';\nimport {useDOMRef} from './useDOMRef';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface CardRenderProps {\n  /** The size of the Card. */\n  size: 'XS' | 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface CardProps extends Omit<GridListItemProps, 'className' | 'style' | 'render' | 'children' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {\n  /** The children of the Card. */\n  children: ReactNode | ((renderProps: CardRenderProps) => 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 var(--hcm-buttonborder, ButtonBorder)]',\n    variant: {\n      tertiary: {\n        // Render border with box-shadow to avoid affecting layout.\n        default: `[0 0 0 2px ${color('gray-100')}]`,\n        isHovered: `[0 0 0 2px ${color('gray-200')}]`,\n        isFocusVisible: `[0 0 0 2px ${color('gray-200')}]`,\n        isSelected: 'none',\n        forcedColors: '[0 0 0 2px var(--hcm-buttonborder, ButtonBorder)]'\n      },\n      quiet: 'none'\n    }\n  },\n  forcedColorAdjust: 'none',\n  transition: 'default',\n  fontFamily: 'sans',\n  textDecoration: 'none',\n  overflow: {\n    default: 'clip',\n    variant: {\n      quiet: 'visible'\n    }\n  },\n  contain: 'layout',\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: 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: '[6px]',\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: lightDark('transparent-white-600', 'transparent-black-600'),\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: {\n    layout: {\n      grid: '3/2'\n    }\n  },\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: space(6),\n      L: space(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 actionMenu = style({\n  gridArea: 'menu',\n  // Don't cause the row to expand, preserve gap between title and description text.\n  // Would use -100% here but it doesn't work in Firefox.\n  marginY: 'calc(-1 * self(height))'\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 InternalCardViewContext = createContext({\n  ElementType: 'div' as 'div' | typeof GridListItem,\n  layout: 'grid' as 'grid' | 'waterfall'\n});\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\n/**\n * A Card summarizes an object that a user can select or navigate to.\n */\nexport const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n  [props] = useSpectrumContextProps(props, ref, CardContext);\n  let {ElementType, layout} = useContext(InternalCardViewContext);\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({layout})}],\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: actionMenu\n        }],\n        [SkeletonContext, isSkeleton]\n      ]}>\n      <ImageCoordinator>\n        {typeof props.children === 'function' ? props.children({size}) : props.children}\n      </ImageCoordinator>\n    </Provider>\n  );\n\n  let press = pressScale(domRef, UNSAFE_style);\n  if (ElementType === 'div' && !isSkeleton && props.href) {\n    // Standalone Card that has an href should be rendered as a Link.\n    // NOTE: In this case, the card must not contain interactive elements.\n    return (\n      <Link\n        {...filterDOMProps(otherProps, {isLink: true})}\n        ref={domRef as any}\n        className={renderProps => UNSAFE_className + card({...renderProps, size, density, variant, isCardView: false, isLink: true}, styles)}\n        style={renderProps =>\n          // Only the preview in quiet cards scales down on press\n          variant === 'quiet' ? UNSAFE_style : press(renderProps)\n        }>\n        {(renderProps) => (\n          <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: false, isSelected: false, ...renderProps}}>\n            {children}\n          </InternalCardContext.Provider>\n        )}\n      </Link>\n    );\n  }\n\n  if (ElementType === 'div' || isSkeleton) {\n    return (\n      <div\n        {...filterDOMProps(otherProps)}\n        id={id != null ? String(id) : undefined}\n        // @ts-ignore - React < 19 compat\n        inert={inertValue(isSkeleton)}\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  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  let {layout} = useContext(InternalCardViewContext);\n  return (\n    <Card {...props} ref={ref} density=\"regular\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [ImageContext, {\n              alt: '',\n              styles: style({\n                width: 'full',\n                aspectRatio: {\n                  layout: {\n                    grid: 'square'\n                  }\n                },\n                objectFit: 'contain',\n                pointerEvents: 'none',\n                userSelect: 'none'\n              })({layout})\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          {children}\n        </Provider>\n      ))}\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  /** The visual style of the Card. */\n  variant?: 'primary' | 'secondary' | 'tertiary'\n}\n\nexport const UserCard = forwardRef(function UserCard(props: UserCardProps, ref: DOMRef<HTMLDivElement>) {\n  let {size = 'M'} = props;\n  return (\n    <Card {...props} ref={ref} density=\"spacious\">\n      {composeRenderProps(props.children, children => (\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] / 16) + 'rem'\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          {children}\n        </Provider>\n      ))}\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  /** The visual style of the Card. */\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      {composeRenderProps(props.children, children => (\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          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n"],"names":[],"version":3,"file":"Card.mjs.map"}
+{"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 {color, focusRing, lightDark, space, style} from '../style' with {type: 'macro'};\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {ContentContext, FooterContext, TextContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider} from 'react-aria-components/slots';\nimport {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';\nimport {DividerContext} from './Divider';\nimport {DOMProps, DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {GridListItem, GridListItemProps} from 'react-aria-components/GridList';\nimport {IllustrationContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {inertValue} from 'react-aria/private/utils/inertValue';\nimport {Link} from 'react-aria-components/Link';\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton';\nimport {useDOMRef} from './useDOMRef';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface CardRenderProps {\n  /** The size of the Card. */\n  size: 'XS' | 'S' | 'M' | 'L' | 'XL';\n}\n\nexport interface CardProps\n  extends\n    Omit<\n      GridListItemProps,\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'children'\n      | 'onHoverChange'\n      | 'onHoverStart'\n      | 'onHoverEnd'\n      | 'onClick'\n      | keyof GlobalDOMAttributes\n    >,\n    StyleProps {\n  /** The children of the Card. */\n  children: ReactNode | ((renderProps: CardRenderProps) => ReactNode);\n  /**\n   * The size of the Card.\n   *\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL';\n  /**\n   * The amount of internal padding within the Card.\n   *\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious';\n  /**\n   * The visual style of the Card.\n   *\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  {\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 var(--hcm-buttonborder, ButtonBorder)]',\n      variant: {\n        tertiary: {\n          // Render border with box-shadow to avoid affecting layout.\n          default: `[0 0 0 2px ${color('gray-100')}]`,\n          isHovered: `[0 0 0 2px ${color('gray-200')}]`,\n          isFocusVisible: `[0 0 0 2px ${color('gray-200')}]`,\n          isSelected: 'none',\n          forcedColors: '[0 0 0 2px var(--hcm-buttonborder, ButtonBorder)]'\n        },\n        quiet: 'none'\n      }\n    },\n    forcedColorAdjust: 'none',\n    transition: 'default',\n    fontFamily: 'sans',\n    textDecoration: 'none',\n    overflow: {\n      default: 'clip',\n      variant: {\n        quiet: 'visible'\n      }\n    },\n    contain: 'layout',\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: 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: '[6px]',\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  },\n  getAllowedOverrides()\n);\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: lightDark('transparent-white-600', 'transparent-black-600'),\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: {\n    layout: {\n      grid: '3/2'\n    }\n  },\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: ['title', 'description'],\n    ':has([data-slot=menu])': ['title menu', 'description description']\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: space(6),\n      L: space(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 actionMenu = style({\n  gridArea: 'menu',\n  // Don't cause the row to expand, preserve gap between title and description text.\n  // Would use -100% here but it doesn't work in Firefox.\n  marginY: 'calc(-1 * self(height))'\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 InternalCardViewContext = createContext({\n  ElementType: 'div' as 'div' | typeof GridListItem,\n  layout: 'grid' as 'grid' | 'waterfall'\n});\nexport const CardContext =\n  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\n/**\n * A Card summarizes an object that a user can select or navigate to.\n */\nexport const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n  [props] = useSpectrumContextProps(props, ref, CardContext);\n  let {ElementType, layout} = useContext(InternalCardViewContext);\n  let domRef = useDOMRef(ref);\n  let {\n    density = 'regular',\n    size = 'M',\n    variant = 'primary',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    id,\n    ...otherProps\n  } = props;\n  let isQuiet = variant === 'quiet';\n  let isSkeleton = useIsSkeleton();\n  let children = (\n    <Provider\n      values={[\n        [ImageContext, {alt: '', styles: image({layout})}],\n        [\n          TextContext,\n          {\n            slots: {\n              [DEFAULT_SLOT]: {},\n              title: {styles: title({size})},\n              description: {styles: description({size})}\n            }\n          }\n        ],\n        [ContentContext, {styles: content({size})}],\n        [DividerContext, {size: 'S'}],\n        [FooterContext, {styles: footer}],\n        [\n          ActionMenuContext,\n          {\n            isQuiet: true,\n            size: actionButtonSize[size],\n            isDisabled: isSkeleton,\n            // @ts-ignore\n            'data-slot': 'menu',\n            styles: actionMenu\n          }\n        ],\n        [SkeletonContext, isSkeleton]\n      ]}>\n      <ImageCoordinator>\n        {typeof props.children === 'function' ? props.children({size}) : props.children}\n      </ImageCoordinator>\n    </Provider>\n  );\n\n  let press = pressScale(domRef, UNSAFE_style);\n  if (ElementType === 'div' && !isSkeleton && props.href) {\n    // Standalone Card that has an href should be rendered as a Link.\n    // NOTE: In this case, the card must not contain interactive elements.\n    return (\n      <Link\n        {...filterDOMProps(otherProps, {isLink: true})}\n        ref={domRef as any}\n        className={renderProps =>\n          UNSAFE_className +\n          card({...renderProps, size, density, variant, isCardView: false, isLink: true}, styles)\n        }\n        style={renderProps =>\n          // Only the preview in quiet cards scales down on press\n          variant === 'quiet' ? UNSAFE_style : press(renderProps)\n        }>\n        {renderProps => (\n          <InternalCardContext.Provider\n            value={{size, isQuiet, isCheckboxSelection: false, isSelected: false, ...renderProps}}>\n            {children}\n          </InternalCardContext.Provider>\n        )}\n      </Link>\n    );\n  }\n\n  if (ElementType === 'div' || isSkeleton) {\n    return (\n      <div\n        {...filterDOMProps(otherProps)}\n        id={id != null ? String(id) : undefined}\n        // @ts-ignore - React < 19 compat\n        inert={inertValue(isSkeleton)}\n        ref={domRef}\n        className={\n          UNSAFE_className +\n          card({size, density, variant, isCardView: ElementType !== 'div'}, styles)\n        }\n        style={UNSAFE_style}>\n        <InternalCardContext.Provider\n          value={{\n            size,\n            isQuiet,\n            isCheckboxSelection: false,\n            isHovered: false,\n            isFocusVisible: false,\n            isSelected: false,\n            isPressed: false\n          }}>\n          {children}\n        </InternalCardContext.Provider>\n      </div>\n    );\n  }\n\n  return (\n    <ElementType\n      {...props}\n      ref={domRef}\n      className={renderProps =>\n        UNSAFE_className +\n        card(\n          {...renderProps, isCardView: true, isLink: !!props.href, size, density, variant},\n          styles\n        )\n      }\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\n          value={{\n            size,\n            isQuiet,\n            isCheckboxSelection: selectionMode !== 'none' && selectionBehavior === 'toggle',\n            isHovered,\n            isFocusVisible,\n            isSelected,\n            isPressed\n          }}>\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'})}>{children}</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}\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 slot=\"selection\" excludeFromTabOrder 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(\n  props: CardPreviewProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} =\n    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'})}>{props.children}</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(\n  props: CardPreviewProps,\n  ref: DOMRef<HTMLDivElement>\n) {\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(\n  props: AssetCardProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {layout} = useContext(InternalCardViewContext);\n  return (\n    <Card {...props} ref={ref} density=\"regular\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [\n              ImageContext,\n              {\n                alt: '',\n                styles: style({\n                  width: 'full',\n                  aspectRatio: {\n                    layout: {\n                      grid: 'square'\n                    }\n                  },\n                  objectFit: 'contain',\n                  pointerEvents: 'none',\n                  userSelect: 'none'\n                })({layout})\n              }\n            ],\n            [\n              IllustrationContext,\n              {\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          ]}>\n          {children}\n        </Provider>\n      ))}\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  /** The visual style of the Card. */\n  variant?: 'primary' | 'secondary' | 'tertiary';\n}\n\nexport const UserCard = forwardRef(function UserCard(\n  props: UserCardProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {size = 'M'} = props;\n  return (\n    <Card {...props} ref={ref} density=\"spacious\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [\n              ImageContext,\n              {\n                alt: '',\n                styles: style({\n                  width: 'full',\n                  aspectRatio: '3/1',\n                  objectFit: 'cover',\n                  pointerEvents: 'none',\n                  userSelect: 'none'\n                })\n              }\n            ],\n            [\n              AvatarContext,\n              {\n                size: avatarSize[size],\n                UNSAFE_style: {\n                  '--size': avatarSize[size] / 16 + 'rem'\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          ]}>\n          {children}\n        </Provider>\n      ))}\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  /** The visual style of the Card. */\n  variant?: 'primary' | 'secondary' | 'tertiary';\n}\n\nexport const ProductCard = forwardRef(function ProductCard(\n  props: ProductCardProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let {size = 'M'} = props;\n  return (\n    <Card {...props} ref={ref} density=\"spacious\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [\n              ImageContext,\n              {\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            ],\n            [\n              FooterContext,\n              {\n                styles: mergeStyles(\n                  footer,\n                  style({\n                    justifyContent: 'end'\n                  })\n                )\n              }\n            ],\n            [ButtonContext, {size: buttonSize[size]}],\n            [LinkButtonContext, {size: buttonSize[size]}]\n          ]}>\n          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n"],"names":[],"version":3,"file":"Card.mjs.map"}

package/dist/private/CardView.cjs

@@ -145,22 +145,22 @@ const $1aaf8931044a97bd$var$cardViewStyles = function anonymous(props, overrides
         if (p[1] === "F") height = true;
         rules += p[0];
     }
-    if (props.isLoading) rules += ' Pc13';
-    else rules += ' Pa13';
-    if (props.isEmpty) rules += ' sd13';
-    rules += ' _oa13';
-    rules += ' _ta13';
-    rules += ' eb13';
-    rules += ' _Ca13';
+    if (props.isLoading) rules += ' Pc131';
+    else rules += ' Pa131';
+    if (props.isEmpty) rules += ' sd131';
+    rules += ' _oa131';
+    rules += ' _ta131';
+    rules += ' eb131';
+    rules += ' _Ca131';
     if (props.isEmpty) {
-        if (props.isFocusVisible) rules += ' _Lf13';
-    } else rules += ' _Le13';
-    rules += ' Oh13';
-    rules += ' Olc13';
-    rules += ' _Mc13';
-    rules += ' _Kb13';
+        if (props.isFocusVisible) rules += ' _Lf131';
+    } else rules += ' _Le131';
+    rules += ' Oh131';
+    rules += ' Olc131';
+    rules += ' _Mc131';
+    rules += ' _Kb131';
     if (props.isActionBar) {
-        if (!height) rules += ' Fb13';
+        if (!height) rules += ' Fb131';
     }
     return rules;
 };
@@ -172,9 +172,9 @@ const $1aaf8931044a97bd$var$wrapperStyles = function anonymous(props, overrides)
         if (p[1] === "_P") position = true;
         rules += p[0];
     }
-    if (!position) rules += ' _Pc13';
-    rules += ' _Nb13';
-    rules += ' Pb13';
+    if (!position) rules += ' _Pc131';
+    rules += ' _Nb131';
+    rules += ' Pb131';
     return rules;
 };
 const $1aaf8931044a97bd$export$64992ac69f286e5c = /*#__PURE__*/ (0, $gDulG$react.createContext)(null);

package/dist/private/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  GridListItem,\n  GridListLoadMoreItem,\n  GridListProps,\n  GridListRenderProps\n} from 'react-aria-components/GridList';\n\nimport {CardContext, InternalCardViewContext} from './Card';\nimport {Collection} from 'react-aria/Collection';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactElement, useCallback, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, Key, LoadingState} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {GridLayout, Size, Virtualizer, WaterfallLayout} from 'react-aria-components/Virtualizer';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {useActionBarContainer} from './ActionBar';\nimport {useDOMRef} from './useDOMRef';\nimport {useEffectEvent} from 'react-aria/private/utils/useEffectEvent';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style' | 'render' | 'isLoading' | keyof GlobalDOMAttributes>, 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  /** Provides the ActionBar to render when cards are selected in the CardView. */\n  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement\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  boxSizing: 'border-box',\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  height: {\n    isActionBar: 'full'\n  }\n}, getAllowedOverrides({height: true}));\n\nconst wrapperStyles = style({\n  position: 'relative',\n  overflow: 'clip'\n}, getAllowedOverrides({height: true}));\n\nexport const CardViewContext = createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A CardView displays a group of related objects, with support for selection and bulk actions.\n */\nexport const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);\n  let {\n    children,\n    layout: layoutName = 'grid',\n    size: sizeProp = 'M',\n    density = 'regular',\n    variant = 'primary',\n    selectionStyle = 'checkbox',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    loadingState,\n    onLoadMore,\n    items,\n    renderEmptyState: renderEmptyStateProp,\n    ...otherProps} = props;\n  let domRef = useDOMRef(ref);\n  let innerRef = useRef(null);\n  let scrollRef = props.renderActionBar ? innerRef : domRef;\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 = useCallback(() => {\n    let w = scrollRef.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  }, [scrollRef, density]);\n  let updateSizeEvent = useEffectEvent(updateSize);\n\n  useResizeObserver({\n    ref: scrollRef,\n    box: 'border-box',\n    onResize: updateSize\n  });\n\n  useLayoutEffect(() => {\n    updateSizeEvent();\n  }, []);\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 layout = layoutName === 'waterfall' ? WaterfallLayout : GridLayout;\n  let options = layoutOptions[size][density];\n\n  let ctx = useMemo(() => ({size, variant}), [size, variant]);\n\n  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});\n\n  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n  let renderer;\n  let cardLoadingSentinel = (\n    <GridListLoadMoreItem\n      isLoading={isLoading}\n      onLoadMore={onLoadMore} />\n  );\n\n  if (typeof children === 'function' && items) {\n    renderer = (\n      <>\n        <Collection items={items} dependencies={props.dependencies}>\n          {children}\n        </Collection>\n        {cardLoadingSentinel}\n      </>\n    );\n  } else {\n    renderer = (\n      <>\n        {children}\n        {cardLoadingSentinel}\n      </>\n    );\n  }\n\n  // Wrap the renderEmptyState function so that it is not called when there is a skeleton loader.\n  let renderEmptyState = renderEmptyStateProp ? (renderProps: GridListRenderProps) => {\n    let collection = renderProps.state.collection;\n    let firstKey = collection.getFirstKey();\n    if (firstKey == null || collection.getItem(firstKey)?.type !== 'skeleton') {\n      return renderEmptyStateProp(renderProps);\n    }\n  } : undefined;\n\n  let cardViewCtx = useMemo(() => ({\n    layout: layoutName,\n    ElementType: GridListItem\n  }), [layoutName]);\n\n  let cardView = (\n    <Virtualizer layout={layout} layoutOptions={options}>\n      <InternalCardViewContext.Provider value={cardViewCtx}>\n        <CardContext.Provider value={ctx}>\n          <ImageCoordinator>\n            <AriaGridList\n              ref={scrollRef}\n              {...otherProps}\n              renderEmptyState={renderEmptyState}\n              items={items}\n              layout=\"grid\"\n              selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n              selectedKeys={selectedKeys}\n              defaultSelectedKeys={undefined}\n              onSelectionChange={onSelectionChange}\n              style={{\n                ...(!props.renderActionBar ? UNSAFE_style : {}),\n                // Add padding at the bottom when the action bar is visible so users can scroll to the last items.\n                // Also add scroll padding so keyboard navigating preserves the padding.\n                paddingBottom: actionBarHeight > 0 ? actionBarHeight + options.minSpace.height : 0,\n                scrollPadding: options.minSpace.height,\n                scrollPaddingBottom: actionBarHeight + options.minSpace.height\n              }}\n              className={renderProps => (!props.renderActionBar ? UNSAFE_className : '') + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading', isActionBar: !!props.renderActionBar}, !props.renderActionBar ? styles : undefined)}>\n              {renderer}\n            </AriaGridList>\n          </ImageCoordinator>\n        </CardContext.Provider>\n      </InternalCardViewContext.Provider>\n    </Virtualizer>\n  );\n\n  // Add extra wrapper if there is an action bar so we can position relative to it.\n  // ActionBar cannot be inside the GridList due to ARIA and focus management requirements.\n  if (props.renderActionBar) {\n    return (\n      <div ref={domRef} className={UNSAFE_className + wrapperStyles(null, styles)} style={UNSAFE_style}>\n        {cardView}\n        {actionBar}\n      </div>\n    );\n  }\n\n  return cardView;\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  GridListItem,\n  GridListLoadMoreItem,\n  GridListProps,\n  GridListRenderProps\n} from 'react-aria-components/GridList';\n\nimport {CardContext, InternalCardViewContext} from './Card';\nimport {Collection} from 'react-aria/Collection';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {\n  createContext,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport {\n  DOMRef,\n  DOMRefValue,\n  forwardRefType,\n  GlobalDOMAttributes,\n  Key,\n  LoadingState\n} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {\n  getAllowedOverrides,\n  StylesPropWithHeight,\n  UnsafeStyles\n} from './style-utils' with {type: 'macro'};\nimport {GridLayout, Size, Virtualizer, WaterfallLayout} from 'react-aria-components/Virtualizer';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {useActionBarContainer} from './ActionBar';\nimport {useDOMRef} from './useDOMRef';\nimport {useEffectEvent} from 'react-aria/private/utils/useEffectEvent';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CardViewProps<T>\n  extends\n    Omit<\n      GridListProps<T>,\n      | 'layout'\n      | 'keyboardNavigationBehavior'\n      | 'selectionBehavior'\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'isLoading'\n      | keyof GlobalDOMAttributes\n    >,\n    UnsafeStyles {\n  /**\n   * The layout of the cards.\n   *\n   * @default 'grid'\n   */\n  layout?: 'grid' | 'waterfall';\n  /**\n   * The size of the cards.\n   *\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL';\n  /**\n   * The amount of space between the cards.\n   *\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious';\n  /**\n   * The visual style of the cards.\n   *\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet';\n  /**\n   * How selection should be displayed.\n   *\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  /** Provides the ActionBar to render when cards are selected in the CardView. */\n  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement;\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  {\n    overflowY: {\n      default: 'auto',\n      isLoading: 'hidden'\n    },\n    display: {\n      isEmpty: 'flex'\n    },\n    boxSizing: 'border-box',\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    height: {\n      isActionBar: 'full'\n    }\n  },\n  getAllowedOverrides({height: true})\n);\n\nconst wrapperStyles = style(\n  {\n    position: 'relative',\n    overflow: 'clip'\n  },\n  getAllowedOverrides({height: true})\n);\n\nexport const CardViewContext =\n  createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A CardView displays a group of related objects, with support for selection and bulk actions.\n */\nexport const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T>(\n  props: CardViewProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);\n  let {\n    children,\n    layout: layoutName = 'grid',\n    size: sizeProp = 'M',\n    density = 'regular',\n    variant = 'primary',\n    selectionStyle = 'checkbox',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    loadingState,\n    onLoadMore,\n    items,\n    renderEmptyState: renderEmptyStateProp,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let innerRef = useRef(null);\n  let scrollRef = props.renderActionBar ? innerRef : domRef;\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 = useCallback(() => {\n    let w = scrollRef.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  }, [scrollRef, density]);\n  let updateSizeEvent = useEffectEvent(updateSize);\n\n  useResizeObserver({\n    ref: scrollRef,\n    box: 'border-box',\n    onResize: updateSize\n  });\n\n  useLayoutEffect(() => {\n    updateSizeEvent();\n  }, []);\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 layout = layoutName === 'waterfall' ? WaterfallLayout : GridLayout;\n  let options = layoutOptions[size][density];\n\n  let ctx = useMemo(() => ({size, variant}), [size, variant]);\n\n  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({\n    ...props,\n    scrollRef\n  });\n\n  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n  let renderer;\n  let cardLoadingSentinel = <GridListLoadMoreItem isLoading={isLoading} onLoadMore={onLoadMore} />;\n\n  if (typeof children === 'function' && items) {\n    renderer = (\n      <>\n        <Collection items={items} dependencies={props.dependencies}>\n          {children}\n        </Collection>\n        {cardLoadingSentinel}\n      </>\n    );\n  } else {\n    renderer = (\n      <>\n        {children}\n        {cardLoadingSentinel}\n      </>\n    );\n  }\n\n  // Wrap the renderEmptyState function so that it is not called when there is a skeleton loader.\n  let renderEmptyState = renderEmptyStateProp\n    ? (renderProps: GridListRenderProps) => {\n        let collection = renderProps.state.collection;\n        let firstKey = collection.getFirstKey();\n        if (firstKey == null || collection.getItem(firstKey)?.type !== 'skeleton') {\n          return renderEmptyStateProp(renderProps);\n        }\n      }\n    : undefined;\n\n  let cardViewCtx = useMemo(\n    () => ({\n      layout: layoutName,\n      ElementType: GridListItem\n    }),\n    [layoutName]\n  );\n\n  let cardView = (\n    <Virtualizer layout={layout} layoutOptions={options}>\n      <InternalCardViewContext.Provider value={cardViewCtx}>\n        <CardContext.Provider value={ctx}>\n          <ImageCoordinator>\n            <AriaGridList\n              ref={scrollRef}\n              {...otherProps}\n              renderEmptyState={renderEmptyState}\n              items={items}\n              layout=\"grid\"\n              selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n              selectedKeys={selectedKeys}\n              defaultSelectedKeys={undefined}\n              onSelectionChange={onSelectionChange}\n              style={{\n                ...(!props.renderActionBar ? UNSAFE_style : {}),\n                // Add padding at the bottom when the action bar is visible so users can scroll to the last items.\n                // Also add scroll padding so keyboard navigating preserves the padding.\n                paddingBottom: actionBarHeight > 0 ? actionBarHeight + options.minSpace.height : 0,\n                scrollPadding: options.minSpace.height,\n                scrollPaddingBottom: actionBarHeight + options.minSpace.height\n              }}\n              className={renderProps =>\n                (!props.renderActionBar ? UNSAFE_className : '') +\n                cardViewStyles(\n                  {\n                    ...renderProps,\n                    isLoading: props.loadingState === 'loading',\n                    isActionBar: !!props.renderActionBar\n                  },\n                  !props.renderActionBar ? styles : undefined\n                )\n              }>\n              {renderer}\n            </AriaGridList>\n          </ImageCoordinator>\n        </CardContext.Provider>\n      </InternalCardViewContext.Provider>\n    </Virtualizer>\n  );\n\n  // Add extra wrapper if there is an action bar so we can position relative to it.\n  // ActionBar cannot be inside the GridList due to ARIA and focus management requirements.\n  if (props.renderActionBar) {\n    return (\n      <div\n        ref={domRef}\n        className={UNSAFE_className + wrapperStyles(null, styles)}\n        style={UNSAFE_style}>\n        {cardView}\n        {actionBar}\n      </div>\n    );\n  }\n\n  return cardView;\n});\n"],"names":[],"version":3,"file":"CardView.cjs.map"}

package/dist/private/CardView.css

@@ -1,65 +1,65 @@
 @layer _.a {
-  .Pa13 {
+  .Pa131 {
     overflow-y: auto;
   }
 
-  .Pc13 {
+  .Pc131 {
     overflow-y: hidden;
   }
 
-  .sd13 {
+  .sd131 {
     display: flex;
   }
 
-  ._oa13 {
+  ._oa131 {
     box-sizing: border-box;
   }
 
-  ._ta13 {
+  ._ta131 {
     flex-direction: column;
   }
 
-  .eb13 {
+  .eb131 {
     align-items: center;
   }
 
-  ._Ca13 {
+  ._Ca131 {
     justify-content: center;
   }
 
-  ._Le13 {
+  ._Le131 {
     outline-style: none;
   }
 
-  ._Lf13 {
+  ._Lf131 {
     outline-style: solid;
   }
 
-  .Oh13 {
+  .Oh131 {
     outline-color: light-dark(#4b75ff, #4069fd);
   }
 
-  ._Mc13 {
+  ._Mc131 {
     outline-width: 2px;
   }
 
-  ._Kb13 {
+  ._Kb131 {
     outline-offset: -2px;
   }
 
-  .Fb13 {
+  .Fb131 {
     height: 100%;
   }
 
-  ._Pc13 {
+  ._Pc131 {
     position: relative;
   }
 
-  ._Nb13 {
+  ._Nb131 {
     overflow-x: clip;
   }
 
-  .Pb13 {
+  .Pb131 {
     overflow-y: clip;
   }
 }
@@ -68,7 +68,7 @@
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .Olc13 {
+    .Olc131 {
       outline-color: highlight;
     }
   }

package/dist/private/CardView.css.map

@@ -1 +1 @@
-{"mappings":"ACkKuB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBD;;;;EAAA;;;;EAAA;;;;;AAzBC;;AAAA;EAAA;IAAA","sources":["bcfa03266ec99ed3","packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["@import \"b9a56ec855293cb6\";\n@import \"879fd470e85635cf\";\n","/*\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  GridListItem,\n  GridListLoadMoreItem,\n  GridListProps,\n  GridListRenderProps\n} from 'react-aria-components/GridList';\n\nimport {CardContext, InternalCardViewContext} from './Card';\nimport {Collection} from 'react-aria/Collection';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactElement, useCallback, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, Key, LoadingState} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {GridLayout, Size, Virtualizer, WaterfallLayout} from 'react-aria-components/Virtualizer';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {useActionBarContainer} from './ActionBar';\nimport {useDOMRef} from './useDOMRef';\nimport {useEffectEvent} from 'react-aria/private/utils/useEffectEvent';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style' | 'render' | 'isLoading' | keyof GlobalDOMAttributes>, 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  /** Provides the ActionBar to render when cards are selected in the CardView. */\n  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement\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  boxSizing: 'border-box',\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  height: {\n    isActionBar: 'full'\n  }\n}, getAllowedOverrides({height: true}));\n\nconst wrapperStyles = style({\n  position: 'relative',\n  overflow: 'clip'\n}, getAllowedOverrides({height: true}));\n\nexport const CardViewContext = createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A CardView displays a group of related objects, with support for selection and bulk actions.\n */\nexport const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);\n  let {\n    children,\n    layout: layoutName = 'grid',\n    size: sizeProp = 'M',\n    density = 'regular',\n    variant = 'primary',\n    selectionStyle = 'checkbox',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    loadingState,\n    onLoadMore,\n    items,\n    renderEmptyState: renderEmptyStateProp,\n    ...otherProps} = props;\n  let domRef = useDOMRef(ref);\n  let innerRef = useRef(null);\n  let scrollRef = props.renderActionBar ? innerRef : domRef;\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 = useCallback(() => {\n    let w = scrollRef.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  }, [scrollRef, density]);\n  let updateSizeEvent = useEffectEvent(updateSize);\n\n  useResizeObserver({\n    ref: scrollRef,\n    box: 'border-box',\n    onResize: updateSize\n  });\n\n  useLayoutEffect(() => {\n    updateSizeEvent();\n  }, []);\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 layout = layoutName === 'waterfall' ? WaterfallLayout : GridLayout;\n  let options = layoutOptions[size][density];\n\n  let ctx = useMemo(() => ({size, variant}), [size, variant]);\n\n  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});\n\n  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n  let renderer;\n  let cardLoadingSentinel = (\n    <GridListLoadMoreItem\n      isLoading={isLoading}\n      onLoadMore={onLoadMore} />\n  );\n\n  if (typeof children === 'function' && items) {\n    renderer = (\n      <>\n        <Collection items={items} dependencies={props.dependencies}>\n          {children}\n        </Collection>\n        {cardLoadingSentinel}\n      </>\n    );\n  } else {\n    renderer = (\n      <>\n        {children}\n        {cardLoadingSentinel}\n      </>\n    );\n  }\n\n  // Wrap the renderEmptyState function so that it is not called when there is a skeleton loader.\n  let renderEmptyState = renderEmptyStateProp ? (renderProps: GridListRenderProps) => {\n    let collection = renderProps.state.collection;\n    let firstKey = collection.getFirstKey();\n    if (firstKey == null || collection.getItem(firstKey)?.type !== 'skeleton') {\n      return renderEmptyStateProp(renderProps);\n    }\n  } : undefined;\n\n  let cardViewCtx = useMemo(() => ({\n    layout: layoutName,\n    ElementType: GridListItem\n  }), [layoutName]);\n\n  let cardView = (\n    <Virtualizer layout={layout} layoutOptions={options}>\n      <InternalCardViewContext.Provider value={cardViewCtx}>\n        <CardContext.Provider value={ctx}>\n          <ImageCoordinator>\n            <AriaGridList\n              ref={scrollRef}\n              {...otherProps}\n              renderEmptyState={renderEmptyState}\n              items={items}\n              layout=\"grid\"\n              selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n              selectedKeys={selectedKeys}\n              defaultSelectedKeys={undefined}\n              onSelectionChange={onSelectionChange}\n              style={{\n                ...(!props.renderActionBar ? UNSAFE_style : {}),\n                // Add padding at the bottom when the action bar is visible so users can scroll to the last items.\n                // Also add scroll padding so keyboard navigating preserves the padding.\n                paddingBottom: actionBarHeight > 0 ? actionBarHeight + options.minSpace.height : 0,\n                scrollPadding: options.minSpace.height,\n                scrollPaddingBottom: actionBarHeight + options.minSpace.height\n              }}\n              className={renderProps => (!props.renderActionBar ? UNSAFE_className : '') + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading', isActionBar: !!props.renderActionBar}, !props.renderActionBar ? styles : undefined)}>\n              {renderer}\n            </AriaGridList>\n          </ImageCoordinator>\n        </CardContext.Provider>\n      </InternalCardViewContext.Provider>\n    </Virtualizer>\n  );\n\n  // Add extra wrapper if there is an action bar so we can position relative to it.\n  // ActionBar cannot be inside the GridList due to ARIA and focus management requirements.\n  if (props.renderActionBar) {\n    return (\n      <div ref={domRef} className={UNSAFE_className + wrapperStyles(null, styles)} style={UNSAFE_style}>\n        {cardView}\n        {actionBar}\n      </div>\n    );\n  }\n\n  return cardView;\n});\n"],"names":[],"version":3,"file":"CardView.css.map"}
+{"mappings":"ACuMuB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4BD;;;;EAAA;;;;EAAA;;;;;AA5BC;;AAAA;EAAA;IAAA","sources":["bcfa03266ec99ed3","packages/@react-spectrum/s2/src/CardView.tsx"],"sourcesContent":["@import \"b9a56ec855293cb6\";\n@import \"879fd470e85635cf\";\n","/*\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  GridListItem,\n  GridListLoadMoreItem,\n  GridListProps,\n  GridListRenderProps\n} from 'react-aria-components/GridList';\n\nimport {CardContext, InternalCardViewContext} from './Card';\nimport {Collection} from 'react-aria/Collection';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {\n  createContext,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport {\n  DOMRef,\n  DOMRefValue,\n  forwardRefType,\n  GlobalDOMAttributes,\n  Key,\n  LoadingState\n} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {\n  getAllowedOverrides,\n  StylesPropWithHeight,\n  UnsafeStyles\n} from './style-utils' with {type: 'macro'};\nimport {GridLayout, Size, Virtualizer, WaterfallLayout} from 'react-aria-components/Virtualizer';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {useActionBarContainer} from './ActionBar';\nimport {useDOMRef} from './useDOMRef';\nimport {useEffectEvent} from 'react-aria/private/utils/useEffectEvent';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CardViewProps<T>\n  extends\n    Omit<\n      GridListProps<T>,\n      | 'layout'\n      | 'keyboardNavigationBehavior'\n      | 'selectionBehavior'\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'isLoading'\n      | keyof GlobalDOMAttributes\n    >,\n    UnsafeStyles {\n  /**\n   * The layout of the cards.\n   *\n   * @default 'grid'\n   */\n  layout?: 'grid' | 'waterfall';\n  /**\n   * The size of the cards.\n   *\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL';\n  /**\n   * The amount of space between the cards.\n   *\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious';\n  /**\n   * The visual style of the cards.\n   *\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet';\n  /**\n   * How selection should be displayed.\n   *\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  /** Provides the ActionBar to render when cards are selected in the CardView. */\n  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement;\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  {\n    overflowY: {\n      default: 'auto',\n      isLoading: 'hidden'\n    },\n    display: {\n      isEmpty: 'flex'\n    },\n    boxSizing: 'border-box',\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    height: {\n      isActionBar: 'full'\n    }\n  },\n  getAllowedOverrides({height: true})\n);\n\nconst wrapperStyles = style(\n  {\n    position: 'relative',\n    overflow: 'clip'\n  },\n  getAllowedOverrides({height: true})\n);\n\nexport const CardViewContext =\n  createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A CardView displays a group of related objects, with support for selection and bulk actions.\n */\nexport const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T>(\n  props: CardViewProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);\n  let {\n    children,\n    layout: layoutName = 'grid',\n    size: sizeProp = 'M',\n    density = 'regular',\n    variant = 'primary',\n    selectionStyle = 'checkbox',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    loadingState,\n    onLoadMore,\n    items,\n    renderEmptyState: renderEmptyStateProp,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let innerRef = useRef(null);\n  let scrollRef = props.renderActionBar ? innerRef : domRef;\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 = useCallback(() => {\n    let w = scrollRef.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  }, [scrollRef, density]);\n  let updateSizeEvent = useEffectEvent(updateSize);\n\n  useResizeObserver({\n    ref: scrollRef,\n    box: 'border-box',\n    onResize: updateSize\n  });\n\n  useLayoutEffect(() => {\n    updateSizeEvent();\n  }, []);\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 layout = layoutName === 'waterfall' ? WaterfallLayout : GridLayout;\n  let options = layoutOptions[size][density];\n\n  let ctx = useMemo(() => ({size, variant}), [size, variant]);\n\n  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({\n    ...props,\n    scrollRef\n  });\n\n  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n  let renderer;\n  let cardLoadingSentinel = <GridListLoadMoreItem isLoading={isLoading} onLoadMore={onLoadMore} />;\n\n  if (typeof children === 'function' && items) {\n    renderer = (\n      <>\n        <Collection items={items} dependencies={props.dependencies}>\n          {children}\n        </Collection>\n        {cardLoadingSentinel}\n      </>\n    );\n  } else {\n    renderer = (\n      <>\n        {children}\n        {cardLoadingSentinel}\n      </>\n    );\n  }\n\n  // Wrap the renderEmptyState function so that it is not called when there is a skeleton loader.\n  let renderEmptyState = renderEmptyStateProp\n    ? (renderProps: GridListRenderProps) => {\n        let collection = renderProps.state.collection;\n        let firstKey = collection.getFirstKey();\n        if (firstKey == null || collection.getItem(firstKey)?.type !== 'skeleton') {\n          return renderEmptyStateProp(renderProps);\n        }\n      }\n    : undefined;\n\n  let cardViewCtx = useMemo(\n    () => ({\n      layout: layoutName,\n      ElementType: GridListItem\n    }),\n    [layoutName]\n  );\n\n  let cardView = (\n    <Virtualizer layout={layout} layoutOptions={options}>\n      <InternalCardViewContext.Provider value={cardViewCtx}>\n        <CardContext.Provider value={ctx}>\n          <ImageCoordinator>\n            <AriaGridList\n              ref={scrollRef}\n              {...otherProps}\n              renderEmptyState={renderEmptyState}\n              items={items}\n              layout=\"grid\"\n              selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n              selectedKeys={selectedKeys}\n              defaultSelectedKeys={undefined}\n              onSelectionChange={onSelectionChange}\n              style={{\n                ...(!props.renderActionBar ? UNSAFE_style : {}),\n                // Add padding at the bottom when the action bar is visible so users can scroll to the last items.\n                // Also add scroll padding so keyboard navigating preserves the padding.\n                paddingBottom: actionBarHeight > 0 ? actionBarHeight + options.minSpace.height : 0,\n                scrollPadding: options.minSpace.height,\n                scrollPaddingBottom: actionBarHeight + options.minSpace.height\n              }}\n              className={renderProps =>\n                (!props.renderActionBar ? UNSAFE_className : '') +\n                cardViewStyles(\n                  {\n                    ...renderProps,\n                    isLoading: props.loadingState === 'loading',\n                    isActionBar: !!props.renderActionBar\n                  },\n                  !props.renderActionBar ? styles : undefined\n                )\n              }>\n              {renderer}\n            </AriaGridList>\n          </ImageCoordinator>\n        </CardContext.Provider>\n      </InternalCardViewContext.Provider>\n    </Virtualizer>\n  );\n\n  // Add extra wrapper if there is an action bar so we can position relative to it.\n  // ActionBar cannot be inside the GridList due to ARIA and focus management requirements.\n  if (props.renderActionBar) {\n    return (\n      <div\n        ref={domRef}\n        className={UNSAFE_className + wrapperStyles(null, styles)}\n        style={UNSAFE_style}>\n        {cardView}\n        {actionBar}\n      </div>\n    );\n  }\n\n  return cardView;\n});\n"],"names":[],"version":3,"file":"CardView.css.map"}

package/dist/private/CardView.mjs

@@ -138,22 +138,22 @@ const $bbcff092fe610ff3$var$cardViewStyles = function anonymous(props, overrides
         if (p[1] === "F") height = true;
         rules += p[0];
     }
-    if (props.isLoading) rules += ' Pc13';
-    else rules += ' Pa13';
-    if (props.isEmpty) rules += ' sd13';
-    rules += ' _oa13';
-    rules += ' _ta13';
-    rules += ' eb13';
-    rules += ' _Ca13';
+    if (props.isLoading) rules += ' Pc131';
+    else rules += ' Pa131';
+    if (props.isEmpty) rules += ' sd131';
+    rules += ' _oa131';
+    rules += ' _ta131';
+    rules += ' eb131';
+    rules += ' _Ca131';
     if (props.isEmpty) {
-        if (props.isFocusVisible) rules += ' _Lf13';
-    } else rules += ' _Le13';
-    rules += ' Oh13';
-    rules += ' Olc13';
-    rules += ' _Mc13';
-    rules += ' _Kb13';
+        if (props.isFocusVisible) rules += ' _Lf131';
+    } else rules += ' _Le131';
+    rules += ' Oh131';
+    rules += ' Olc131';
+    rules += ' _Mc131';
+    rules += ' _Kb131';
     if (props.isActionBar) {
-        if (!height) rules += ' Fb13';
+        if (!height) rules += ' Fb131';
     }
     return rules;
 };
@@ -165,9 +165,9 @@ const $bbcff092fe610ff3$var$wrapperStyles = function anonymous(props, overrides)
         if (p[1] === "_P") position = true;
         rules += p[0];
     }
-    if (!position) rules += ' _Pc13';
-    rules += ' _Nb13';
-    rules += ' Pb13';
+    if (!position) rules += ' _Pc131';
+    rules += ' _Nb131';
+    rules += ' Pb131';
     return rules;
 };
 const $bbcff092fe610ff3$export$64992ac69f286e5c = /*#__PURE__*/ (0, $aG2ym$createContext)(null);

package/dist/private/CardView.mjs.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  GridListItem,\n  GridListLoadMoreItem,\n  GridListProps,\n  GridListRenderProps\n} from 'react-aria-components/GridList';\n\nimport {CardContext, InternalCardViewContext} from './Card';\nimport {Collection} from 'react-aria/Collection';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactElement, useCallback, useMemo, useRef, useState} from 'react';\nimport {DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, Key, LoadingState} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {GridLayout, Size, Virtualizer, WaterfallLayout} from 'react-aria-components/Virtualizer';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {useActionBarContainer} from './ActionBar';\nimport {useDOMRef} from './useDOMRef';\nimport {useEffectEvent} from 'react-aria/private/utils/useEffectEvent';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style' | 'render' | 'isLoading' | keyof GlobalDOMAttributes>, 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  /** Provides the ActionBar to render when cards are selected in the CardView. */\n  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement\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  boxSizing: 'border-box',\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  height: {\n    isActionBar: 'full'\n  }\n}, getAllowedOverrides({height: true}));\n\nconst wrapperStyles = style({\n  position: 'relative',\n  overflow: 'clip'\n}, getAllowedOverrides({height: true}));\n\nexport const CardViewContext = createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A CardView displays a group of related objects, with support for selection and bulk actions.\n */\nexport const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);\n  let {\n    children,\n    layout: layoutName = 'grid',\n    size: sizeProp = 'M',\n    density = 'regular',\n    variant = 'primary',\n    selectionStyle = 'checkbox',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    loadingState,\n    onLoadMore,\n    items,\n    renderEmptyState: renderEmptyStateProp,\n    ...otherProps} = props;\n  let domRef = useDOMRef(ref);\n  let innerRef = useRef(null);\n  let scrollRef = props.renderActionBar ? innerRef : domRef;\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 = useCallback(() => {\n    let w = scrollRef.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  }, [scrollRef, density]);\n  let updateSizeEvent = useEffectEvent(updateSize);\n\n  useResizeObserver({\n    ref: scrollRef,\n    box: 'border-box',\n    onResize: updateSize\n  });\n\n  useLayoutEffect(() => {\n    updateSizeEvent();\n  }, []);\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 layout = layoutName === 'waterfall' ? WaterfallLayout : GridLayout;\n  let options = layoutOptions[size][density];\n\n  let ctx = useMemo(() => ({size, variant}), [size, variant]);\n\n  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});\n\n  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n  let renderer;\n  let cardLoadingSentinel = (\n    <GridListLoadMoreItem\n      isLoading={isLoading}\n      onLoadMore={onLoadMore} />\n  );\n\n  if (typeof children === 'function' && items) {\n    renderer = (\n      <>\n        <Collection items={items} dependencies={props.dependencies}>\n          {children}\n        </Collection>\n        {cardLoadingSentinel}\n      </>\n    );\n  } else {\n    renderer = (\n      <>\n        {children}\n        {cardLoadingSentinel}\n      </>\n    );\n  }\n\n  // Wrap the renderEmptyState function so that it is not called when there is a skeleton loader.\n  let renderEmptyState = renderEmptyStateProp ? (renderProps: GridListRenderProps) => {\n    let collection = renderProps.state.collection;\n    let firstKey = collection.getFirstKey();\n    if (firstKey == null || collection.getItem(firstKey)?.type !== 'skeleton') {\n      return renderEmptyStateProp(renderProps);\n    }\n  } : undefined;\n\n  let cardViewCtx = useMemo(() => ({\n    layout: layoutName,\n    ElementType: GridListItem\n  }), [layoutName]);\n\n  let cardView = (\n    <Virtualizer layout={layout} layoutOptions={options}>\n      <InternalCardViewContext.Provider value={cardViewCtx}>\n        <CardContext.Provider value={ctx}>\n          <ImageCoordinator>\n            <AriaGridList\n              ref={scrollRef}\n              {...otherProps}\n              renderEmptyState={renderEmptyState}\n              items={items}\n              layout=\"grid\"\n              selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n              selectedKeys={selectedKeys}\n              defaultSelectedKeys={undefined}\n              onSelectionChange={onSelectionChange}\n              style={{\n                ...(!props.renderActionBar ? UNSAFE_style : {}),\n                // Add padding at the bottom when the action bar is visible so users can scroll to the last items.\n                // Also add scroll padding so keyboard navigating preserves the padding.\n                paddingBottom: actionBarHeight > 0 ? actionBarHeight + options.minSpace.height : 0,\n                scrollPadding: options.minSpace.height,\n                scrollPaddingBottom: actionBarHeight + options.minSpace.height\n              }}\n              className={renderProps => (!props.renderActionBar ? UNSAFE_className : '') + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading', isActionBar: !!props.renderActionBar}, !props.renderActionBar ? styles : undefined)}>\n              {renderer}\n            </AriaGridList>\n          </ImageCoordinator>\n        </CardContext.Provider>\n      </InternalCardViewContext.Provider>\n    </Virtualizer>\n  );\n\n  // Add extra wrapper if there is an action bar so we can position relative to it.\n  // ActionBar cannot be inside the GridList due to ARIA and focus management requirements.\n  if (props.renderActionBar) {\n    return (\n      <div ref={domRef} className={UNSAFE_className + wrapperStyles(null, styles)} style={UNSAFE_style}>\n        {cardView}\n        {actionBar}\n      </div>\n    );\n  }\n\n  return cardView;\n});\n"],"names":[],"version":3,"file":"CardView.mjs.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  GridListItem,\n  GridListLoadMoreItem,\n  GridListProps,\n  GridListRenderProps\n} from 'react-aria-components/GridList';\n\nimport {CardContext, InternalCardViewContext} from './Card';\nimport {Collection} from 'react-aria/Collection';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {\n  createContext,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport {\n  DOMRef,\n  DOMRefValue,\n  forwardRefType,\n  GlobalDOMAttributes,\n  Key,\n  LoadingState\n} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {\n  getAllowedOverrides,\n  StylesPropWithHeight,\n  UnsafeStyles\n} from './style-utils' with {type: 'macro'};\nimport {GridLayout, Size, Virtualizer, WaterfallLayout} from 'react-aria-components/Virtualizer';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {useActionBarContainer} from './ActionBar';\nimport {useDOMRef} from './useDOMRef';\nimport {useEffectEvent} from 'react-aria/private/utils/useEffectEvent';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface CardViewProps<T>\n  extends\n    Omit<\n      GridListProps<T>,\n      | 'layout'\n      | 'keyboardNavigationBehavior'\n      | 'selectionBehavior'\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'isLoading'\n      | keyof GlobalDOMAttributes\n    >,\n    UnsafeStyles {\n  /**\n   * The layout of the cards.\n   *\n   * @default 'grid'\n   */\n  layout?: 'grid' | 'waterfall';\n  /**\n   * The size of the cards.\n   *\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL';\n  /**\n   * The amount of space between the cards.\n   *\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious';\n  /**\n   * The visual style of the cards.\n   *\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet';\n  /**\n   * How selection should be displayed.\n   *\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  /** Provides the ActionBar to render when cards are selected in the CardView. */\n  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement;\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  {\n    overflowY: {\n      default: 'auto',\n      isLoading: 'hidden'\n    },\n    display: {\n      isEmpty: 'flex'\n    },\n    boxSizing: 'border-box',\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    height: {\n      isActionBar: 'full'\n    }\n  },\n  getAllowedOverrides({height: true})\n);\n\nconst wrapperStyles = style(\n  {\n    position: 'relative',\n    overflow: 'clip'\n  },\n  getAllowedOverrides({height: true})\n);\n\nexport const CardViewContext =\n  createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A CardView displays a group of related objects, with support for selection and bulk actions.\n */\nexport const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T>(\n  props: CardViewProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);\n  let {\n    children,\n    layout: layoutName = 'grid',\n    size: sizeProp = 'M',\n    density = 'regular',\n    variant = 'primary',\n    selectionStyle = 'checkbox',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    loadingState,\n    onLoadMore,\n    items,\n    renderEmptyState: renderEmptyStateProp,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let innerRef = useRef(null);\n  let scrollRef = props.renderActionBar ? innerRef : domRef;\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 = useCallback(() => {\n    let w = scrollRef.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  }, [scrollRef, density]);\n  let updateSizeEvent = useEffectEvent(updateSize);\n\n  useResizeObserver({\n    ref: scrollRef,\n    box: 'border-box',\n    onResize: updateSize\n  });\n\n  useLayoutEffect(() => {\n    updateSizeEvent();\n  }, []);\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 layout = layoutName === 'waterfall' ? WaterfallLayout : GridLayout;\n  let options = layoutOptions[size][density];\n\n  let ctx = useMemo(() => ({size, variant}), [size, variant]);\n\n  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({\n    ...props,\n    scrollRef\n  });\n\n  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n  let renderer;\n  let cardLoadingSentinel = <GridListLoadMoreItem isLoading={isLoading} onLoadMore={onLoadMore} />;\n\n  if (typeof children === 'function' && items) {\n    renderer = (\n      <>\n        <Collection items={items} dependencies={props.dependencies}>\n          {children}\n        </Collection>\n        {cardLoadingSentinel}\n      </>\n    );\n  } else {\n    renderer = (\n      <>\n        {children}\n        {cardLoadingSentinel}\n      </>\n    );\n  }\n\n  // Wrap the renderEmptyState function so that it is not called when there is a skeleton loader.\n  let renderEmptyState = renderEmptyStateProp\n    ? (renderProps: GridListRenderProps) => {\n        let collection = renderProps.state.collection;\n        let firstKey = collection.getFirstKey();\n        if (firstKey == null || collection.getItem(firstKey)?.type !== 'skeleton') {\n          return renderEmptyStateProp(renderProps);\n        }\n      }\n    : undefined;\n\n  let cardViewCtx = useMemo(\n    () => ({\n      layout: layoutName,\n      ElementType: GridListItem\n    }),\n    [layoutName]\n  );\n\n  let cardView = (\n    <Virtualizer layout={layout} layoutOptions={options}>\n      <InternalCardViewContext.Provider value={cardViewCtx}>\n        <CardContext.Provider value={ctx}>\n          <ImageCoordinator>\n            <AriaGridList\n              ref={scrollRef}\n              {...otherProps}\n              renderEmptyState={renderEmptyState}\n              items={items}\n              layout=\"grid\"\n              selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}\n              selectedKeys={selectedKeys}\n              defaultSelectedKeys={undefined}\n              onSelectionChange={onSelectionChange}\n              style={{\n                ...(!props.renderActionBar ? UNSAFE_style : {}),\n                // Add padding at the bottom when the action bar is visible so users can scroll to the last items.\n                // Also add scroll padding so keyboard navigating preserves the padding.\n                paddingBottom: actionBarHeight > 0 ? actionBarHeight + options.minSpace.height : 0,\n                scrollPadding: options.minSpace.height,\n                scrollPaddingBottom: actionBarHeight + options.minSpace.height\n              }}\n              className={renderProps =>\n                (!props.renderActionBar ? UNSAFE_className : '') +\n                cardViewStyles(\n                  {\n                    ...renderProps,\n                    isLoading: props.loadingState === 'loading',\n                    isActionBar: !!props.renderActionBar\n                  },\n                  !props.renderActionBar ? styles : undefined\n                )\n              }>\n              {renderer}\n            </AriaGridList>\n          </ImageCoordinator>\n        </CardContext.Provider>\n      </InternalCardViewContext.Provider>\n    </Virtualizer>\n  );\n\n  // Add extra wrapper if there is an action bar so we can position relative to it.\n  // ActionBar cannot be inside the GridList due to ARIA and focus management requirements.\n  if (props.renderActionBar) {\n    return (\n      <div\n        ref={domRef}\n        className={UNSAFE_className + wrapperStyles(null, styles)}\n        style={UNSAFE_style}>\n        {cardView}\n        {actionBar}\n      </div>\n    );\n  }\n\n  return cardView;\n});\n"],"names":[],"version":3,"file":"CardView.mjs.map"}

package/dist/private/CenterBaseline.cjs

@@ -1,6 +1,7 @@
 require("./CenterBaseline.css");
 var $308b180f49d82d28$exports = require("../../icons/runtime.cjs");
 var $5B7cg$reactjsxruntime = require("react/jsx-runtime");
+var $5B7cg$reactariafilterDOMProps = require("react-aria/filterDOMProps");
 
 
 function $parcel$export(e, n, v, s) {
@@ -22,9 +23,12 @@ $parcel$export(module.exports, "centerBaseline", () => $e991cbcdf82ced71$export$
  * governing permissions and limitations under the License.
  */ 
 
-const $e991cbcdf82ced71$var$styles = " sd13 eb13";
+
+const $e991cbcdf82ced71$var$styles = " sd131 eb131";
 function $e991cbcdf82ced71$export$768dac55bb57081d(props) {
+    let domProps = (0, $5B7cg$reactariafilterDOMProps.filterDOMProps)(props);
     return /*#__PURE__*/ (0, $5B7cg$reactjsxruntime.jsx)("div", {
+        ...domProps,
         slot: props.slot,
         style: props.style,
         className: (0, $308b180f49d82d28$exports.mergeStyles)($e991cbcdf82ced71$var$styles, props.styles) + ' ' + $e991cbcdf82ced71$export$179e9489a09b14ac,