{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/card/CardBase.tsx"],"sourcesContent":["// @ts-nocheck\n/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaCardProps, SpectrumCardProps} from './types';\nimport {Checkbox} from '../checkbox/Checkbox';\nimport {classNames} from '../utils/classNames';\nimport {DOMRef, Node} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport {getFocusableTreeWalker} from 'react-aria/private/focus/FocusScope';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {nodeContains} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport React, {HTMLAttributes, useCallback, useMemo, useRef, useState} from 'react';\nimport {SlotProvider} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/card/vars.css';\nimport {useCardViewContext} from './CardViewContext';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useFocusWithin} from 'react-aria/useFocusWithin';\nimport {useHasChild} from '../utils/useHasChild';\nimport {useHover} from 'react-aria/useHover';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useProviderProps} from '../provider/Provider';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSlotId} from 'react-aria/private/utils/useId';\nimport {useStyleProps} from '../utils/styleProps';\n\ninterface CardBaseProps<T> extends SpectrumCardProps {\n  articleProps?: HTMLAttributes<HTMLElement>;\n  item?: Node<T>;\n}\n\n/**\n * TODO: Add description of component here.\n */\nexport const CardBase = React.forwardRef(function CardBase<T extends object>(\n  props: CardBaseProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  props = useProviderProps(props);\n  let context = useCardViewContext() || {}; // we can call again here, won't change from Card.tsx\n  let {state} = context;\n  let manager = state?.selectionManager;\n  let {\n    isQuiet,\n    orientation = 'vertical',\n    articleProps = {role: 'article'},\n    item,\n    layout,\n    children\n  } = props;\n\n  let key = item?.key;\n  let isSelected = manager?.isSelected(key);\n  let isDisabled = state?.disabledKeys.has(key);\n  let onChange = () => manager?.select(key);\n\n  let {styleProps} = useStyleProps(props);\n  let {cardProps, titleProps, contentProps} = useCard(props);\n  let domRef = useDOMRef(ref);\n  let gridRef = useRef<HTMLDivElement>(undefined);\n  let checkboxRef = useRef(null);\n\n  // cards are only interactive if there is a selection manager and it allows selection\n  let {hoverProps, isHovered} = useHover({\n    isDisabled: manager === undefined || manager?.selectionMode === 'none' || isDisabled\n  });\n  let [isFocused, setIsFocused] = useState(false);\n  let {focusWithinProps} = useFocusWithin({\n    onFocusWithinChange: setIsFocused,\n    isDisabled\n  });\n\n  // ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default\n  let hasPreviewImage = useHasChild(`.${styles['spectrum-Card-image']}`, gridRef);\n  let hasPreviewIllustration = useHasChild(`.${styles['spectrum-Card-illustration']}`, gridRef);\n  let hasPreview = hasPreviewImage || hasPreviewIllustration;\n\n  // this is for horizontal cards\n  let [height, setHeight] = useState(NaN);\n  let updateHeight = useCallback(() => {\n    if (orientation !== 'horizontal') {\n      return;\n    }\n\n    let cardHeight = gridRef.current.getBoundingClientRect().height;\n    setHeight(cardHeight);\n  }, [orientation, gridRef, setHeight]);\n  useResizeObserver({ref: gridRef, onResize: updateHeight});\n\n  let aspectRatioEnforce = undefined;\n  if (orientation === 'horizontal' && !isNaN(height)) {\n    aspectRatioEnforce = {\n      height: `${height}px`,\n      width: `${height}px`\n    };\n  }\n\n  let slots = useMemo(\n    () => ({\n      image: {\n        UNSAFE_className: classNames(styles, 'spectrum-Card-image'),\n        objectFit: orientation === 'horizontal' ? 'cover' : 'contain',\n        alt: '',\n        ...aspectRatioEnforce\n      },\n      illustration: {\n        UNSAFE_className: classNames(styles, 'spectrum-Card-illustration'),\n        ...aspectRatioEnforce\n      },\n      avatar: {\n        UNSAFE_className: classNames(styles, 'spectrum-Card-avatar'),\n        size: 'avatar-size-400'\n      },\n      heading: {UNSAFE_className: classNames(styles, 'spectrum-Card-heading'), ...titleProps},\n      content: {UNSAFE_className: classNames(styles, 'spectrum-Card-content'), ...contentProps},\n      detail: {UNSAFE_className: classNames(styles, 'spectrum-Card-detail')}\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [titleProps, contentProps, height, isQuiet, orientation]\n  );\n\n  useLayoutEffect(() => {\n    if (gridRef?.current) {\n      let walker = getFocusableTreeWalker(gridRef.current);\n      let nextNode = walker.nextNode();\n      while (nextNode != null) {\n        if (\n          checkboxRef.current &&\n          !nodeContains(checkboxRef.current.UNSAFE_getDOMNode(), nextNode)\n        ) {\n          console.warn(\n            'Card does not support focusable elements, please contact the team regarding your use case.'\n          );\n          break;\n        }\n        nextNode = walker.nextNode();\n      }\n    }\n  }, [children]);\n\n  return (\n    <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n      <div\n        {...styleProps}\n        {...mergeProps(\n          cardProps,\n          focusWithinProps,\n          hoverProps,\n          filterDOMProps(props),\n          articleProps\n        )}\n        ref={domRef}\n        className={classNames(\n          styles,\n          'spectrum-Card',\n          {\n            'spectrum-Card--default': !isQuiet && orientation !== 'horizontal',\n            'spectrum-Card--isQuiet': isQuiet && orientation !== 'horizontal',\n            'spectrum-Card--horizontal': orientation === 'horizontal',\n            'spectrum-Card--noPreview': !hasPreview,\n            'is-hovered': isHovered,\n            'is-focused': isFocused,\n            'is-selected': isSelected,\n            'spectrum-Card--waterfall': layout === 'waterfall',\n            'spectrum-Card--gallery': layout === 'gallery',\n            'spectrum-Card--grid': layout === 'grid',\n            'spectrum-Card--noLayout':\n              layout !== 'waterfall' && layout !== 'gallery' && layout !== 'grid'\n          },\n          styleProps.className\n        )}>\n        <div ref={gridRef} className={classNames(styles, 'spectrum-Card-grid')}>\n          {manager && manager.selectionMode !== 'none' && (\n            <div className={classNames(styles, 'spectrum-Card-checkboxWrapper')}>\n              <Checkbox\n                ref={checkboxRef}\n                isDisabled={isDisabled}\n                excludeFromTabOrder\n                isSelected={isSelected}\n                onChange={onChange}\n                UNSAFE_className={classNames(styles, 'spectrum-Card-checkbox')}\n                isEmphasized\n                aria-label=\"select\"\n              />\n            </div>\n          )}\n          <SlotProvider slots={slots}>{children}</SlotProvider>\n          <div className={classNames(styles, 'spectrum-Card-decoration')} />\n        </div>\n      </div>\n    </FocusRing>\n  );\n});\n\ninterface AriaCardOptions extends AriaCardProps {}\n\ninterface CardAria {\n  cardProps: HTMLAttributes<HTMLDivElement>;\n  titleProps: HTMLAttributes<HTMLDivElement>;\n  contentProps: HTMLAttributes<HTMLDivElement>;\n}\n\nfunction useCard(props: AriaCardOptions): CardAria {\n  let titleId = useSlotId();\n  let descriptionId = useSlotId();\n  let titleProps = useMemo(\n    () => ({\n      id: titleId\n    }),\n    [titleId]\n  );\n  let contentProps = useMemo(\n    () => ({\n      id: descriptionId\n    }),\n    [descriptionId]\n  );\n\n  return {\n    cardProps: {\n      ...filterDOMProps(props),\n      'aria-labelledby': titleId,\n      'aria-describedby': descriptionId,\n      tabIndex: 0\n    },\n    titleProps,\n    contentProps\n  };\n}\n"],"names":[],"version":3,"file":"CardBase.cjs.map"}