@react-spectrum/card 3.0.0-alpha.32 → 3.0.0-alpha.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/dist/BaseLayout.main.js +21 -26
  2. package/dist/BaseLayout.main.js.map +1 -1
  3. package/dist/BaseLayout.mjs +22 -27
  4. package/dist/BaseLayout.module.js +21 -26
  5. package/dist/BaseLayout.module.js.map +1 -1
  6. package/dist/Card.main.js +2 -2
  7. package/dist/Card.mjs +3 -3
  8. package/dist/Card.module.js +2 -2
  9. package/dist/CardBase.main.js +37 -37
  10. package/dist/CardBase.main.js.map +1 -1
  11. package/dist/CardBase.mjs +38 -38
  12. package/dist/CardBase.module.js +37 -37
  13. package/dist/CardBase.module.js.map +1 -1
  14. package/dist/CardView.main.js +56 -48
  15. package/dist/CardView.main.js.map +1 -1
  16. package/dist/CardView.mjs +58 -50
  17. package/dist/CardView.module.js +57 -49
  18. package/dist/CardView.module.js.map +1 -1
  19. package/dist/CardViewContext.mjs +1 -1
  20. package/dist/GalleryLayout.main.js +10 -10
  21. package/dist/GalleryLayout.main.js.map +1 -1
  22. package/dist/GalleryLayout.mjs +11 -11
  23. package/dist/GalleryLayout.module.js +10 -10
  24. package/dist/GalleryLayout.module.js.map +1 -1
  25. package/dist/GridLayout.main.js +18 -42
  26. package/dist/GridLayout.main.js.map +1 -1
  27. package/dist/GridLayout.mjs +19 -43
  28. package/dist/GridLayout.module.js +18 -42
  29. package/dist/GridLayout.module.js.map +1 -1
  30. package/dist/WaterfallLayout.main.js +7 -7
  31. package/dist/WaterfallLayout.main.js.map +1 -1
  32. package/dist/WaterfallLayout.mjs +8 -8
  33. package/dist/WaterfallLayout.module.js +7 -7
  34. package/dist/WaterfallLayout.module.js.map +1 -1
  35. package/dist/ar-AE.mjs +1 -1
  36. package/dist/bg-BG.mjs +1 -1
  37. package/dist/card_vars_css.mjs +1 -1
  38. package/dist/cs-CZ.mjs +1 -1
  39. package/dist/da-DK.mjs +1 -1
  40. package/dist/de-DE.mjs +1 -1
  41. package/dist/el-GR.mjs +1 -1
  42. package/dist/en-US.mjs +1 -1
  43. package/dist/es-ES.mjs +1 -1
  44. package/dist/et-EE.mjs +1 -1
  45. package/dist/fi-FI.mjs +1 -1
  46. package/dist/fr-FR.mjs +1 -1
  47. package/dist/he-IL.mjs +1 -1
  48. package/dist/hr-HR.mjs +1 -1
  49. package/dist/hu-HU.mjs +1 -1
  50. package/dist/intlStrings.mjs +1 -1
  51. package/dist/it-IT.mjs +1 -1
  52. package/dist/ja-JP.mjs +1 -1
  53. package/dist/ko-KR.mjs +1 -1
  54. package/dist/lt-LT.mjs +1 -1
  55. package/dist/lv-LV.mjs +1 -1
  56. package/dist/nb-NO.mjs +1 -1
  57. package/dist/nl-NL.mjs +1 -1
  58. package/dist/pl-PL.mjs +1 -1
  59. package/dist/pt-BR.mjs +1 -1
  60. package/dist/pt-PT.mjs +1 -1
  61. package/dist/ro-RO.mjs +1 -1
  62. package/dist/ru-RU.mjs +1 -1
  63. package/dist/sk-SK.mjs +1 -1
  64. package/dist/sl-SI.mjs +1 -1
  65. package/dist/sr-SP.mjs +1 -1
  66. package/dist/sv-SE.mjs +1 -1
  67. package/dist/tr-TR.mjs +1 -1
  68. package/dist/types.d.ts +12 -11
  69. package/dist/types.d.ts.map +1 -1
  70. package/dist/uk-UA.mjs +1 -1
  71. package/dist/zh-CN.mjs +1 -1
  72. package/dist/zh-TW.main.js +1 -1
  73. package/dist/zh-TW.main.js.map +1 -1
  74. package/dist/zh-TW.mjs +2 -2
  75. package/dist/zh-TW.module.js +1 -1
  76. package/dist/zh-TW.module.js.map +1 -1
  77. package/package.json +20 -20
  78. package/src/BaseLayout.tsx +22 -19
  79. package/src/CardBase.tsx +1 -1
  80. package/src/CardView.tsx +42 -38
  81. package/src/GalleryLayout.tsx +2 -2
  82. package/src/GridLayout.tsx +0 -35
  83. package/src/WaterfallLayout.tsx +2 -2
package/dist/CardBase.main.js CHANGED
@@ -43,7 +43,7 @@ function $7888205ff7de382f$var$CardBase(props, ref) {
43
43
  let context = (0, $e57ab98cef2f01a5$exports.useCardViewContext)() || {}; // we can call again here, won't change from Card.tsx
44
44
  let { state: state } = context;
45
45
  let manager = state === null || state === void 0 ? void 0 : state.selectionManager;
46
- let { isQuiet: isQuiet, orientation: orientation = "vertical", articleProps: articleProps = {}, item: item, layout: layout, children: children } = props;
46
+ let { isQuiet: isQuiet, orientation: orientation = 'vertical', articleProps: articleProps = {}, item: item, layout: layout, children: children } = props;
47
47
  let key = item === null || item === void 0 ? void 0 : item.key;
48
48
  let isSelected = manager === null || manager === void 0 ? void 0 : manager.isSelected(key);
49
49
  let isDisabled = state === null || state === void 0 ? void 0 : state.disabledKeys.has(key);
@@ -51,11 +51,11 @@ function $7888205ff7de382f$var$CardBase(props, ref) {
51
51
  let { styleProps: styleProps } = (0, $1rjnI$reactspectrumutils.useStyleProps)(props);
52
52
  let { cardProps: cardProps, titleProps: titleProps, contentProps: contentProps } = $7888205ff7de382f$var$useCard(props);
53
53
  let domRef = (0, $1rjnI$reactspectrumutils.useDOMRef)(ref);
54
- let gridRef = (0, $1rjnI$react.useRef)();
54
+ let gridRef = (0, $1rjnI$react.useRef)(undefined);
55
55
  let checkboxRef = (0, $1rjnI$react.useRef)(null);
56
56
  // cards are only interactive if there is a selection manager and it allows selection
57
57
  let { hoverProps: hoverProps, isHovered: isHovered } = (0, $1rjnI$reactariainteractions.useHover)({
58
- isDisabled: manager === undefined || (manager === null || manager === void 0 ? void 0 : manager.selectionMode) === "none" || isDisabled
58
+ isDisabled: manager === undefined || (manager === null || manager === void 0 ? void 0 : manager.selectionMode) === 'none' || isDisabled
59
59
  });
60
60
  let [isFocused, setIsFocused] = (0, $1rjnI$react.useState)(false);
61
61
  let { focusWithinProps: focusWithinProps } = (0, $1rjnI$reactariainteractions.useFocusWithin)({
@@ -63,13 +63,13 @@ function $7888205ff7de382f$var$CardBase(props, ref) {
63
63
  isDisabled: isDisabled
64
64
  });
65
65
  // ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default
66
- let hasPreviewImage = (0, $1rjnI$reactspectrumutils.useHasChild)(`.${(0, ($parcel$interopDefault($71570f0038472fa2$exports)))["spectrum-Card-image"]}`, gridRef);
67
- let hasPreviewIllustration = (0, $1rjnI$reactspectrumutils.useHasChild)(`.${(0, ($parcel$interopDefault($71570f0038472fa2$exports)))["spectrum-Card-illustration"]}`, gridRef);
66
+ let hasPreviewImage = (0, $1rjnI$reactspectrumutils.useHasChild)(`.${(0, ($parcel$interopDefault($71570f0038472fa2$exports)))['spectrum-Card-image']}`, gridRef);
67
+ let hasPreviewIllustration = (0, $1rjnI$reactspectrumutils.useHasChild)(`.${(0, ($parcel$interopDefault($71570f0038472fa2$exports)))['spectrum-Card-illustration']}`, gridRef);
68
68
  let hasPreview = hasPreviewImage || hasPreviewIllustration;
69
69
  // this is for horizontal cards
70
70
  let [height, setHeight] = (0, $1rjnI$react.useState)(NaN);
71
71
  let updateHeight = (0, $1rjnI$react.useCallback)(()=>{
72
- if (orientation !== "horizontal") return;
72
+ if (orientation !== 'horizontal') return;
73
73
  let cardHeight = gridRef.current.getBoundingClientRect().height;
74
74
  setHeight(cardHeight);
75
75
  }, [
@@ -82,35 +82,35 @@ function $7888205ff7de382f$var$CardBase(props, ref) {
82
82
  onResize: updateHeight
83
83
  });
84
84
  let aspectRatioEnforce = undefined;
85
- if (orientation === "horizontal" && !isNaN(height)) aspectRatioEnforce = {
85
+ if (orientation === 'horizontal' && !isNaN(height)) aspectRatioEnforce = {
86
86
  height: `${height}px`,
87
87
  width: `${height}px`
88
88
  };
89
89
  let slots = (0, $1rjnI$react.useMemo)(()=>({
90
90
  image: {
91
- UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-image"),
92
- objectFit: orientation === "horizontal" ? "cover" : "contain",
93
- alt: "",
91
+ UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-image'),
92
+ objectFit: orientation === 'horizontal' ? 'cover' : 'contain',
93
+ alt: '',
94
94
  ...aspectRatioEnforce
95
95
  },
96
96
  illustration: {
97
- UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-illustration"),
97
+ UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-illustration'),
98
98
  ...aspectRatioEnforce
99
99
  },
100
100
  avatar: {
101
- UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-avatar"),
102
- size: "avatar-size-400"
101
+ UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-avatar'),
102
+ size: 'avatar-size-400'
103
103
  },
104
104
  heading: {
105
- UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-heading"),
105
+ UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-heading'),
106
106
  ...titleProps
107
107
  },
108
108
  content: {
109
- UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-content"),
109
+ UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-content'),
110
110
  ...contentProps
111
111
  },
112
112
  detail: {
113
- UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-detail")
113
+ UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-detail')
114
114
  }
115
115
  }), [
116
116
  titleProps,
@@ -125,7 +125,7 @@ function $7888205ff7de382f$var$CardBase(props, ref) {
125
125
  let nextNode = walker.nextNode();
126
126
  while(nextNode != null){
127
127
  if (checkboxRef.current && !checkboxRef.current.UNSAFE_getDOMNode().contains(nextNode)) {
128
- console.warn("Card does not support focusable elements, please contact the team regarding your use case.");
128
+ console.warn('Card does not support focusable elements, please contact the team regarding your use case.');
129
129
  break;
130
130
  }
131
131
  nextNode = walker.nextNode();
@@ -135,42 +135,42 @@ function $7888205ff7de382f$var$CardBase(props, ref) {
135
135
  children
136
136
  ]);
137
137
  return /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement((0, $1rjnI$reactariafocus.FocusRing), {
138
- focusRingClass: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "focus-ring")
138
+ focusRingClass: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'focus-ring')
139
139
  }, /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement("article", {
140
140
  ...styleProps,
141
141
  ...(0, $1rjnI$reactariautils.mergeProps)(cardProps, focusWithinProps, hoverProps, (0, $1rjnI$reactariautils.filterDOMProps)(props), articleProps),
142
142
  ref: domRef,
143
- className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card", {
144
- "spectrum-Card--default": !isQuiet && orientation !== "horizontal",
145
- "spectrum-Card--isQuiet": isQuiet && orientation !== "horizontal",
146
- "spectrum-Card--horizontal": orientation === "horizontal",
147
- "spectrum-Card--noPreview": !hasPreview,
148
- "is-hovered": isHovered,
149
- "is-focused": isFocused,
150
- "is-selected": isSelected,
151
- "spectrum-Card--waterfall": layout === "waterfall",
152
- "spectrum-Card--gallery": layout === "gallery",
153
- "spectrum-Card--grid": layout === "grid",
154
- "spectrum-Card--noLayout": layout !== "waterfall" && layout !== "gallery" && layout !== "grid"
143
+ className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card', {
144
+ 'spectrum-Card--default': !isQuiet && orientation !== 'horizontal',
145
+ 'spectrum-Card--isQuiet': isQuiet && orientation !== 'horizontal',
146
+ 'spectrum-Card--horizontal': orientation === 'horizontal',
147
+ 'spectrum-Card--noPreview': !hasPreview,
148
+ 'is-hovered': isHovered,
149
+ 'is-focused': isFocused,
150
+ 'is-selected': isSelected,
151
+ 'spectrum-Card--waterfall': layout === 'waterfall',
152
+ 'spectrum-Card--gallery': layout === 'gallery',
153
+ 'spectrum-Card--grid': layout === 'grid',
154
+ 'spectrum-Card--noLayout': layout !== 'waterfall' && layout !== 'gallery' && layout !== 'grid'
155
155
  }, styleProps.className)
156
156
  }, /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement("div", {
157
157
  ref: gridRef,
158
- className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-grid")
159
- }, manager && manager.selectionMode !== "none" && /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement("div", {
160
- className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-checkboxWrapper")
158
+ className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-grid')
159
+ }, manager && manager.selectionMode !== 'none' && /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement("div", {
160
+ className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-checkboxWrapper')
161
161
  }, /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement((0, $1rjnI$reactspectrumcheckbox.Checkbox), {
162
162
  ref: checkboxRef,
163
163
  isDisabled: isDisabled,
164
164
  excludeFromTabOrder: true,
165
165
  isSelected: isSelected,
166
166
  onChange: onChange,
167
- UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-checkbox"),
167
+ UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-checkbox'),
168
168
  isEmphasized: true,
169
169
  "aria-label": "select"
170
170
  })), /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement((0, $1rjnI$reactspectrumutils.SlotProvider), {
171
171
  slots: slots
172
172
  }, children), /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement("div", {
173
- className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-Card-decoration")
173
+ className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-decoration')
174
174
  }))));
175
175
  }
176
176
  function $7888205ff7de382f$var$useCard(props) {
@@ -189,8 +189,8 @@ function $7888205ff7de382f$var$useCard(props) {
189
189
  return {
190
190
  cardProps: {
191
191
  ...(0, $1rjnI$reactariautils.filterDOMProps)(props),
192
- "aria-labelledby": titleId,
193
- "aria-describedby": descriptionId,
192
+ 'aria-labelledby': titleId,
193
+ 'aria-describedby': descriptionId,
194
194
  tabIndex: 0
195
195
  },
196
196
  titleProps: titleProps,
package/dist/CardBase.main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/card/src/CardBase.tsx"],"sourcesContent":["/*\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 '@react-types/card';\nimport {Checkbox} from '@react-spectrum/checkbox';\nimport {classNames, SlotProvider, useDOMRef, useHasChild, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, Node} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useLayoutEffect, useResizeObserver, useSlotId} from '@react-aria/utils';\nimport {FocusRing, getFocusableTreeWalker} from '@react-aria/focus';\nimport React, {HTMLAttributes, useCallback, useMemo, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/card/vars.css';\nimport {useCardViewContext} from './CardViewContext';\nimport {useFocusWithin, useHover} from '@react-aria/interactions';\nimport {useProviderProps} from '@react-spectrum/provider';\n\ninterface CardBaseProps<T> extends SpectrumCardProps {\n articleProps?: HTMLAttributes<HTMLElement>,\n item?: Node<T>\n}\n\nfunction CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDivElement>) {\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 = {},\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>();\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({isDisabled: manager === undefined || manager?.selectionMode === 'none' || isDisabled});\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 image: {UNSAFE_className: classNames(styles, 'spectrum-Card-image'), objectFit: orientation === 'horizontal' ? 'cover' : 'contain', alt: '', ...aspectRatioEnforce},\n illustration: {UNSAFE_className: classNames(styles, 'spectrum-Card-illustration'), ...aspectRatioEnforce},\n avatar: {UNSAFE_className: classNames(styles, 'spectrum-Card-avatar'), size: 'avatar-size-400'},\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 // eslint-disable-next-line react-hooks/exhaustive-deps\n }), [titleProps, contentProps, height, isQuiet, orientation]);\n\n useLayoutEffect(() => {\n if (gridRef?.current) {\n let walker = getFocusableTreeWalker(gridRef.current);\n let nextNode = walker.nextNode();\n while (nextNode != null) {\n if (checkboxRef.current && !checkboxRef.current.UNSAFE_getDOMNode().contains(nextNode)) {\n console.warn('Card does not support focusable elements, please contact the team regarding your use case.');\n break;\n }\n nextNode = walker.nextNode();\n }\n }\n }, [children]);\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <article\n {...styleProps}\n {...mergeProps(cardProps, focusWithinProps, hoverProps, filterDOMProps(props), articleProps)}\n ref={domRef}\n className={classNames(styles, 'spectrum-Card', {\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': layout !== 'waterfall' && layout !== 'gallery' && layout !== 'grid'\n }, styleProps.className)}>\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 </div>\n )}\n <SlotProvider slots={slots}>\n {children}\n </SlotProvider>\n <div className={classNames(styles, 'spectrum-Card-decoration')} />\n </div>\n </article>\n </FocusRing>\n );\n}\n\ninterface AriaCardOptions extends AriaCardProps {\n}\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 id: titleId\n }), [titleId]);\n let contentProps = useMemo(() => ({\n id: descriptionId\n }), [descriptionId]);\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\n/**\n * TODO: Add description of component here.\n */\nconst _CardBase = React.forwardRef(CardBase);\nexport {_CardBase as CardBase};\n"],"names":[],"version":3,"file":"CardBase.main.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/card/src/CardBase.tsx"],"sourcesContent":["/*\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 '@react-types/card';\nimport {Checkbox} from '@react-spectrum/checkbox';\nimport {classNames, SlotProvider, useDOMRef, useHasChild, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, Node} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useLayoutEffect, useResizeObserver, useSlotId} from '@react-aria/utils';\nimport {FocusRing, getFocusableTreeWalker} from '@react-aria/focus';\nimport React, {HTMLAttributes, useCallback, useMemo, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/card/vars.css';\nimport {useCardViewContext} from './CardViewContext';\nimport {useFocusWithin, useHover} from '@react-aria/interactions';\nimport {useProviderProps} from '@react-spectrum/provider';\n\ninterface CardBaseProps<T> extends SpectrumCardProps {\n articleProps?: HTMLAttributes<HTMLElement>,\n item?: Node<T>\n}\n\nfunction CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDivElement>) {\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 = {},\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({isDisabled: manager === undefined || manager?.selectionMode === 'none' || isDisabled});\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 image: {UNSAFE_className: classNames(styles, 'spectrum-Card-image'), objectFit: orientation === 'horizontal' ? 'cover' : 'contain', alt: '', ...aspectRatioEnforce},\n illustration: {UNSAFE_className: classNames(styles, 'spectrum-Card-illustration'), ...aspectRatioEnforce},\n avatar: {UNSAFE_className: classNames(styles, 'spectrum-Card-avatar'), size: 'avatar-size-400'},\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 // eslint-disable-next-line react-hooks/exhaustive-deps\n }), [titleProps, contentProps, height, isQuiet, orientation]);\n\n useLayoutEffect(() => {\n if (gridRef?.current) {\n let walker = getFocusableTreeWalker(gridRef.current);\n let nextNode = walker.nextNode();\n while (nextNode != null) {\n if (checkboxRef.current && !checkboxRef.current.UNSAFE_getDOMNode().contains(nextNode)) {\n console.warn('Card does not support focusable elements, please contact the team regarding your use case.');\n break;\n }\n nextNode = walker.nextNode();\n }\n }\n }, [children]);\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <article\n {...styleProps}\n {...mergeProps(cardProps, focusWithinProps, hoverProps, filterDOMProps(props), articleProps)}\n ref={domRef}\n className={classNames(styles, 'spectrum-Card', {\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': layout !== 'waterfall' && layout !== 'gallery' && layout !== 'grid'\n }, styleProps.className)}>\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 </div>\n )}\n <SlotProvider slots={slots}>\n {children}\n </SlotProvider>\n <div className={classNames(styles, 'spectrum-Card-decoration')} />\n </div>\n </article>\n </FocusRing>\n );\n}\n\ninterface AriaCardOptions extends AriaCardProps {\n}\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 id: titleId\n }), [titleId]);\n let contentProps = useMemo(() => ({\n id: descriptionId\n }), [descriptionId]);\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\n/**\n * TODO: Add description of component here.\n */\nconst _CardBase = React.forwardRef(CardBase);\nexport {_CardBase as CardBase};\n"],"names":[],"version":3,"file":"CardBase.main.js.map"}
package/dist/CardBase.mjs CHANGED
@@ -37,7 +37,7 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
37
37
  let context = (0, $8d180a244893de14$export$fea0b38586ec8f13)() || {}; // we can call again here, won't change from Card.tsx
38
38
  let { state: state } = context;
39
39
  let manager = state === null || state === void 0 ? void 0 : state.selectionManager;
40
- let { isQuiet: isQuiet, orientation: orientation = "vertical", articleProps: articleProps = {}, item: item, layout: layout, children: children } = props;
40
+ let { isQuiet: isQuiet, orientation: orientation = 'vertical', articleProps: articleProps = {}, item: item, layout: layout, children: children } = props;
41
41
  let key = item === null || item === void 0 ? void 0 : item.key;
42
42
  let isSelected = manager === null || manager === void 0 ? void 0 : manager.isSelected(key);
43
43
  let isDisabled = state === null || state === void 0 ? void 0 : state.disabledKeys.has(key);
@@ -45,11 +45,11 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
45
45
  let { styleProps: styleProps } = (0, $8eFIe$useStyleProps)(props);
46
46
  let { cardProps: cardProps, titleProps: titleProps, contentProps: contentProps } = $643dd8fa80926f94$var$useCard(props);
47
47
  let domRef = (0, $8eFIe$useDOMRef)(ref);
48
- let gridRef = (0, $8eFIe$useRef)();
48
+ let gridRef = (0, $8eFIe$useRef)(undefined);
49
49
  let checkboxRef = (0, $8eFIe$useRef)(null);
50
50
  // cards are only interactive if there is a selection manager and it allows selection
51
51
  let { hoverProps: hoverProps, isHovered: isHovered } = (0, $8eFIe$useHover)({
52
- isDisabled: manager === undefined || (manager === null || manager === void 0 ? void 0 : manager.selectionMode) === "none" || isDisabled
52
+ isDisabled: manager === undefined || (manager === null || manager === void 0 ? void 0 : manager.selectionMode) === 'none' || isDisabled
53
53
  });
54
54
  let [isFocused, setIsFocused] = (0, $8eFIe$useState)(false);
55
55
  let { focusWithinProps: focusWithinProps } = (0, $8eFIe$useFocusWithin)({
@@ -57,13 +57,13 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
57
57
  isDisabled: isDisabled
58
58
  });
59
59
  // ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default
60
- let hasPreviewImage = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))["spectrum-Card-image"]}`, gridRef);
61
- let hasPreviewIllustration = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))["spectrum-Card-illustration"]}`, gridRef);
60
+ let hasPreviewImage = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))['spectrum-Card-image']}`, gridRef);
61
+ let hasPreviewIllustration = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))['spectrum-Card-illustration']}`, gridRef);
62
62
  let hasPreview = hasPreviewImage || hasPreviewIllustration;
63
63
  // this is for horizontal cards
64
64
  let [height, setHeight] = (0, $8eFIe$useState)(NaN);
65
65
  let updateHeight = (0, $8eFIe$useCallback)(()=>{
66
- if (orientation !== "horizontal") return;
66
+ if (orientation !== 'horizontal') return;
67
67
  let cardHeight = gridRef.current.getBoundingClientRect().height;
68
68
  setHeight(cardHeight);
69
69
  }, [
@@ -76,35 +76,35 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
76
76
  onResize: updateHeight
77
77
  });
78
78
  let aspectRatioEnforce = undefined;
79
- if (orientation === "horizontal" && !isNaN(height)) aspectRatioEnforce = {
79
+ if (orientation === 'horizontal' && !isNaN(height)) aspectRatioEnforce = {
80
80
  height: `${height}px`,
81
81
  width: `${height}px`
82
82
  };
83
83
  let slots = (0, $8eFIe$useMemo)(()=>({
84
84
  image: {
85
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-image"),
86
- objectFit: orientation === "horizontal" ? "cover" : "contain",
87
- alt: "",
85
+ UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-image'),
86
+ objectFit: orientation === 'horizontal' ? 'cover' : 'contain',
87
+ alt: '',
88
88
  ...aspectRatioEnforce
89
89
  },
90
90
  illustration: {
91
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-illustration"),
91
+ UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-illustration'),
92
92
  ...aspectRatioEnforce
93
93
  },
94
94
  avatar: {
95
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-avatar"),
96
- size: "avatar-size-400"
95
+ UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-avatar'),
96
+ size: 'avatar-size-400'
97
97
  },
98
98
  heading: {
99
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-heading"),
99
+ UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-heading'),
100
100
  ...titleProps
101
101
  },
102
102
  content: {
103
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-content"),
103
+ UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-content'),
104
104
  ...contentProps
105
105
  },
106
106
  detail: {
107
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-detail")
107
+ UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-detail')
108
108
  }
109
109
  }), [
110
110
  titleProps,
@@ -119,7 +119,7 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
119
119
  let nextNode = walker.nextNode();
120
120
  while(nextNode != null){
121
121
  if (checkboxRef.current && !checkboxRef.current.UNSAFE_getDOMNode().contains(nextNode)) {
122
- console.warn("Card does not support focusable elements, please contact the team regarding your use case.");
122
+ console.warn('Card does not support focusable elements, please contact the team regarding your use case.');
123
123
  break;
124
124
  }
125
125
  nextNode = walker.nextNode();
@@ -129,42 +129,42 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
129
129
  children
130
130
  ]);
131
131
  return /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$FocusRing), {
132
- focusRingClass: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "focus-ring")
132
+ focusRingClass: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'focus-ring')
133
133
  }, /*#__PURE__*/ (0, $8eFIe$react).createElement("article", {
134
134
  ...styleProps,
135
135
  ...(0, $8eFIe$mergeProps)(cardProps, focusWithinProps, hoverProps, (0, $8eFIe$filterDOMProps)(props), articleProps),
136
136
  ref: domRef,
137
- className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card", {
138
- "spectrum-Card--default": !isQuiet && orientation !== "horizontal",
139
- "spectrum-Card--isQuiet": isQuiet && orientation !== "horizontal",
140
- "spectrum-Card--horizontal": orientation === "horizontal",
141
- "spectrum-Card--noPreview": !hasPreview,
142
- "is-hovered": isHovered,
143
- "is-focused": isFocused,
144
- "is-selected": isSelected,
145
- "spectrum-Card--waterfall": layout === "waterfall",
146
- "spectrum-Card--gallery": layout === "gallery",
147
- "spectrum-Card--grid": layout === "grid",
148
- "spectrum-Card--noLayout": layout !== "waterfall" && layout !== "gallery" && layout !== "grid"
137
+ className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card', {
138
+ 'spectrum-Card--default': !isQuiet && orientation !== 'horizontal',
139
+ 'spectrum-Card--isQuiet': isQuiet && orientation !== 'horizontal',
140
+ 'spectrum-Card--horizontal': orientation === 'horizontal',
141
+ 'spectrum-Card--noPreview': !hasPreview,
142
+ 'is-hovered': isHovered,
143
+ 'is-focused': isFocused,
144
+ 'is-selected': isSelected,
145
+ 'spectrum-Card--waterfall': layout === 'waterfall',
146
+ 'spectrum-Card--gallery': layout === 'gallery',
147
+ 'spectrum-Card--grid': layout === 'grid',
148
+ 'spectrum-Card--noLayout': layout !== 'waterfall' && layout !== 'gallery' && layout !== 'grid'
149
149
  }, styleProps.className)
150
150
  }, /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
151
151
  ref: gridRef,
152
- className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-grid")
153
- }, manager && manager.selectionMode !== "none" && /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
154
- className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-checkboxWrapper")
152
+ className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-grid')
153
+ }, manager && manager.selectionMode !== 'none' && /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
154
+ className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-checkboxWrapper')
155
155
  }, /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$Checkbox), {
156
156
  ref: checkboxRef,
157
157
  isDisabled: isDisabled,
158
158
  excludeFromTabOrder: true,
159
159
  isSelected: isSelected,
160
160
  onChange: onChange,
161
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-checkbox"),
161
+ UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-checkbox'),
162
162
  isEmphasized: true,
163
163
  "aria-label": "select"
164
164
  })), /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$SlotProvider), {
165
165
  slots: slots
166
166
  }, children), /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
167
- className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-decoration")
167
+ className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-decoration')
168
168
  }))));
169
169
  }
170
170
  function $643dd8fa80926f94$var$useCard(props) {
@@ -183,8 +183,8 @@ function $643dd8fa80926f94$var$useCard(props) {
183
183
  return {
184
184
  cardProps: {
185
185
  ...(0, $8eFIe$filterDOMProps)(props),
186
- "aria-labelledby": titleId,
187
- "aria-describedby": descriptionId,
186
+ 'aria-labelledby': titleId,
187
+ 'aria-describedby': descriptionId,
188
188
  tabIndex: 0
189
189
  },
190
190
  titleProps: titleProps,
@@ -197,4 +197,4 @@ function $643dd8fa80926f94$var$useCard(props) {
197
197
 
198
198
 
199
199
  export {$643dd8fa80926f94$export$7a6ccaf429ad93a8 as CardBase};
200
- //# sourceMappingURL=CardBase.mjs.map
200
+ //# sourceMappingURL=CardBase.module.js.map
package/dist/CardBase.module.js CHANGED
@@ -37,7 +37,7 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
37
37
  let context = (0, $8d180a244893de14$export$fea0b38586ec8f13)() || {}; // we can call again here, won't change from Card.tsx
38
38
  let { state: state } = context;
39
39
  let manager = state === null || state === void 0 ? void 0 : state.selectionManager;
40
- let { isQuiet: isQuiet, orientation: orientation = "vertical", articleProps: articleProps = {}, item: item, layout: layout, children: children } = props;
40
+ let { isQuiet: isQuiet, orientation: orientation = 'vertical', articleProps: articleProps = {}, item: item, layout: layout, children: children } = props;
41
41
  let key = item === null || item === void 0 ? void 0 : item.key;
42
42
  let isSelected = manager === null || manager === void 0 ? void 0 : manager.isSelected(key);
43
43
  let isDisabled = state === null || state === void 0 ? void 0 : state.disabledKeys.has(key);
@@ -45,11 +45,11 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
45
45
  let { styleProps: styleProps } = (0, $8eFIe$useStyleProps)(props);
46
46
  let { cardProps: cardProps, titleProps: titleProps, contentProps: contentProps } = $643dd8fa80926f94$var$useCard(props);
47
47
  let domRef = (0, $8eFIe$useDOMRef)(ref);
48
- let gridRef = (0, $8eFIe$useRef)();
48
+ let gridRef = (0, $8eFIe$useRef)(undefined);
49
49
  let checkboxRef = (0, $8eFIe$useRef)(null);
50
50
  // cards are only interactive if there is a selection manager and it allows selection
51
51
  let { hoverProps: hoverProps, isHovered: isHovered } = (0, $8eFIe$useHover)({
52
- isDisabled: manager === undefined || (manager === null || manager === void 0 ? void 0 : manager.selectionMode) === "none" || isDisabled
52
+ isDisabled: manager === undefined || (manager === null || manager === void 0 ? void 0 : manager.selectionMode) === 'none' || isDisabled
53
53
  });
54
54
  let [isFocused, setIsFocused] = (0, $8eFIe$useState)(false);
55
55
  let { focusWithinProps: focusWithinProps } = (0, $8eFIe$useFocusWithin)({
@@ -57,13 +57,13 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
57
57
  isDisabled: isDisabled
58
58
  });
59
59
  // ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default
60
- let hasPreviewImage = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))["spectrum-Card-image"]}`, gridRef);
61
- let hasPreviewIllustration = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))["spectrum-Card-illustration"]}`, gridRef);
60
+ let hasPreviewImage = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))['spectrum-Card-image']}`, gridRef);
61
+ let hasPreviewIllustration = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))['spectrum-Card-illustration']}`, gridRef);
62
62
  let hasPreview = hasPreviewImage || hasPreviewIllustration;
63
63
  // this is for horizontal cards
64
64
  let [height, setHeight] = (0, $8eFIe$useState)(NaN);
65
65
  let updateHeight = (0, $8eFIe$useCallback)(()=>{
66
- if (orientation !== "horizontal") return;
66
+ if (orientation !== 'horizontal') return;
67
67
  let cardHeight = gridRef.current.getBoundingClientRect().height;
68
68
  setHeight(cardHeight);
69
69
  }, [
@@ -76,35 +76,35 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
76
76
  onResize: updateHeight
77
77
  });
78
78
  let aspectRatioEnforce = undefined;
79
- if (orientation === "horizontal" && !isNaN(height)) aspectRatioEnforce = {
79
+ if (orientation === 'horizontal' && !isNaN(height)) aspectRatioEnforce = {
80
80
  height: `${height}px`,
81
81
  width: `${height}px`
82
82
  };
83
83
  let slots = (0, $8eFIe$useMemo)(()=>({
84
84
  image: {
85
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-image"),
86
- objectFit: orientation === "horizontal" ? "cover" : "contain",
87
- alt: "",
85
+ UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-image'),
86
+ objectFit: orientation === 'horizontal' ? 'cover' : 'contain',
87
+ alt: '',
88
88
  ...aspectRatioEnforce
89
89
  },
90
90
  illustration: {
91
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-illustration"),
91
+ UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-illustration'),
92
92
  ...aspectRatioEnforce
93
93
  },
94
94
  avatar: {
95
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-avatar"),
96
- size: "avatar-size-400"
95
+ UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-avatar'),
96
+ size: 'avatar-size-400'
97
97
  },
98
98
  heading: {
99
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-heading"),
99
+ UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-heading'),
100
100
  ...titleProps
101
101
  },
102
102
  content: {
103
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-content"),
103
+ UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-content'),
104
104
  ...contentProps
105
105
  },
106
106
  detail: {
107
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-detail")
107
+ UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-detail')
108
108
  }
109
109
  }), [
110
110
  titleProps,
@@ -119,7 +119,7 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
119
119
  let nextNode = walker.nextNode();
120
120
  while(nextNode != null){
121
121
  if (checkboxRef.current && !checkboxRef.current.UNSAFE_getDOMNode().contains(nextNode)) {
122
- console.warn("Card does not support focusable elements, please contact the team regarding your use case.");
122
+ console.warn('Card does not support focusable elements, please contact the team regarding your use case.');
123
123
  break;
124
124
  }
125
125
  nextNode = walker.nextNode();
@@ -129,42 +129,42 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
129
129
  children
130
130
  ]);
131
131
  return /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$FocusRing), {
132
- focusRingClass: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "focus-ring")
132
+ focusRingClass: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'focus-ring')
133
133
  }, /*#__PURE__*/ (0, $8eFIe$react).createElement("article", {
134
134
  ...styleProps,
135
135
  ...(0, $8eFIe$mergeProps)(cardProps, focusWithinProps, hoverProps, (0, $8eFIe$filterDOMProps)(props), articleProps),
136
136
  ref: domRef,
137
- className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card", {
138
- "spectrum-Card--default": !isQuiet && orientation !== "horizontal",
139
- "spectrum-Card--isQuiet": isQuiet && orientation !== "horizontal",
140
- "spectrum-Card--horizontal": orientation === "horizontal",
141
- "spectrum-Card--noPreview": !hasPreview,
142
- "is-hovered": isHovered,
143
- "is-focused": isFocused,
144
- "is-selected": isSelected,
145
- "spectrum-Card--waterfall": layout === "waterfall",
146
- "spectrum-Card--gallery": layout === "gallery",
147
- "spectrum-Card--grid": layout === "grid",
148
- "spectrum-Card--noLayout": layout !== "waterfall" && layout !== "gallery" && layout !== "grid"
137
+ className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card', {
138
+ 'spectrum-Card--default': !isQuiet && orientation !== 'horizontal',
139
+ 'spectrum-Card--isQuiet': isQuiet && orientation !== 'horizontal',
140
+ 'spectrum-Card--horizontal': orientation === 'horizontal',
141
+ 'spectrum-Card--noPreview': !hasPreview,
142
+ 'is-hovered': isHovered,
143
+ 'is-focused': isFocused,
144
+ 'is-selected': isSelected,
145
+ 'spectrum-Card--waterfall': layout === 'waterfall',
146
+ 'spectrum-Card--gallery': layout === 'gallery',
147
+ 'spectrum-Card--grid': layout === 'grid',
148
+ 'spectrum-Card--noLayout': layout !== 'waterfall' && layout !== 'gallery' && layout !== 'grid'
149
149
  }, styleProps.className)
150
150
  }, /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
151
151
  ref: gridRef,
152
- className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-grid")
153
- }, manager && manager.selectionMode !== "none" && /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
154
- className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-checkboxWrapper")
152
+ className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-grid')
153
+ }, manager && manager.selectionMode !== 'none' && /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
154
+ className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-checkboxWrapper')
155
155
  }, /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$Checkbox), {
156
156
  ref: checkboxRef,
157
157
  isDisabled: isDisabled,
158
158
  excludeFromTabOrder: true,
159
159
  isSelected: isSelected,
160
160
  onChange: onChange,
161
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-checkbox"),
161
+ UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-checkbox'),
162
162
  isEmphasized: true,
163
163
  "aria-label": "select"
164
164
  })), /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$SlotProvider), {
165
165
  slots: slots
166
166
  }, children), /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
167
- className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-decoration")
167
+ className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-decoration')
168
168
  }))));
169
169
  }
170
170
  function $643dd8fa80926f94$var$useCard(props) {
@@ -183,8 +183,8 @@ function $643dd8fa80926f94$var$useCard(props) {
183
183
  return {
184
184
  cardProps: {
185
185
  ...(0, $8eFIe$filterDOMProps)(props),
186
- "aria-labelledby": titleId,
187
- "aria-describedby": descriptionId,
186
+ 'aria-labelledby': titleId,
187
+ 'aria-describedby': descriptionId,
188
188
  tabIndex: 0
189
189
  },
190
190
  titleProps: titleProps,