@react-spectrum/card 3.0.0-alpha.53 → 3.0.0-alpha.55

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 (240) hide show
  1. package/dist/import.mjs +6 -6
  2. package/dist/main.js +10 -10
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +6 -6
  5. package/dist/module.js.map +1 -1
  6. package/dist/types/src/index.d.ts +9 -0
  7. package/package.json +22 -46
  8. package/src/index.ts +13 -9
  9. package/dist/BaseLayout.main.js +0 -213
  10. package/dist/BaseLayout.main.js.map +0 -1
  11. package/dist/BaseLayout.mjs +0 -208
  12. package/dist/BaseLayout.module.js +0 -208
  13. package/dist/BaseLayout.module.js.map +0 -1
  14. package/dist/Card.main.js +0 -52
  15. package/dist/Card.main.js.map +0 -1
  16. package/dist/Card.mjs +0 -43
  17. package/dist/Card.module.js +0 -43
  18. package/dist/Card.module.js.map +0 -1
  19. package/dist/CardBase.main.js +0 -205
  20. package/dist/CardBase.main.js.map +0 -1
  21. package/dist/CardBase.mjs +0 -200
  22. package/dist/CardBase.module.js +0 -200
  23. package/dist/CardBase.module.js.map +0 -1
  24. package/dist/CardView.main.js +0 -238
  25. package/dist/CardView.main.js.map +0 -1
  26. package/dist/CardView.mjs +0 -233
  27. package/dist/CardView.module.js +0 -233
  28. package/dist/CardView.module.js.map +0 -1
  29. package/dist/CardViewContext.main.js +0 -32
  30. package/dist/CardViewContext.main.js.map +0 -1
  31. package/dist/CardViewContext.mjs +0 -22
  32. package/dist/CardViewContext.module.js +0 -22
  33. package/dist/CardViewContext.module.js.map +0 -1
  34. package/dist/GalleryLayout.main.js +0 -230
  35. package/dist/GalleryLayout.main.js.map +0 -1
  36. package/dist/GalleryLayout.mjs +0 -225
  37. package/dist/GalleryLayout.module.js +0 -225
  38. package/dist/GalleryLayout.module.js.map +0 -1
  39. package/dist/GridLayout.main.js +0 -175
  40. package/dist/GridLayout.main.js.map +0 -1
  41. package/dist/GridLayout.mjs +0 -170
  42. package/dist/GridLayout.module.js +0 -170
  43. package/dist/GridLayout.module.js.map +0 -1
  44. package/dist/WaterfallLayout.main.js +0 -182
  45. package/dist/WaterfallLayout.main.js.map +0 -1
  46. package/dist/WaterfallLayout.mjs +0 -177
  47. package/dist/WaterfallLayout.module.js +0 -177
  48. package/dist/WaterfallLayout.module.js.map +0 -1
  49. package/dist/ar-AE.main.js +0 -7
  50. package/dist/ar-AE.main.js.map +0 -1
  51. package/dist/ar-AE.mjs +0 -9
  52. package/dist/ar-AE.module.js +0 -9
  53. package/dist/ar-AE.module.js.map +0 -1
  54. package/dist/bg-BG.main.js +0 -7
  55. package/dist/bg-BG.main.js.map +0 -1
  56. package/dist/bg-BG.mjs +0 -9
  57. package/dist/bg-BG.module.js +0 -9
  58. package/dist/bg-BG.module.js.map +0 -1
  59. package/dist/card.4d5d6544.css +0 -1671
  60. package/dist/card.4d5d6544.css.map +0 -1
  61. package/dist/card_vars_css.main.js +0 -116
  62. package/dist/card_vars_css.main.js.map +0 -1
  63. package/dist/card_vars_css.mjs +0 -118
  64. package/dist/card_vars_css.module.js +0 -118
  65. package/dist/card_vars_css.module.js.map +0 -1
  66. package/dist/cs-CZ.main.js +0 -7
  67. package/dist/cs-CZ.main.js.map +0 -1
  68. package/dist/cs-CZ.mjs +0 -9
  69. package/dist/cs-CZ.module.js +0 -9
  70. package/dist/cs-CZ.module.js.map +0 -1
  71. package/dist/da-DK.main.js +0 -7
  72. package/dist/da-DK.main.js.map +0 -1
  73. package/dist/da-DK.mjs +0 -9
  74. package/dist/da-DK.module.js +0 -9
  75. package/dist/da-DK.module.js.map +0 -1
  76. package/dist/de-DE.main.js +0 -7
  77. package/dist/de-DE.main.js.map +0 -1
  78. package/dist/de-DE.mjs +0 -9
  79. package/dist/de-DE.module.js +0 -9
  80. package/dist/de-DE.module.js.map +0 -1
  81. package/dist/el-GR.main.js +0 -7
  82. package/dist/el-GR.main.js.map +0 -1
  83. package/dist/el-GR.mjs +0 -9
  84. package/dist/el-GR.module.js +0 -9
  85. package/dist/el-GR.module.js.map +0 -1
  86. package/dist/en-US.main.js +0 -7
  87. package/dist/en-US.main.js.map +0 -1
  88. package/dist/en-US.mjs +0 -9
  89. package/dist/en-US.module.js +0 -9
  90. package/dist/en-US.module.js.map +0 -1
  91. package/dist/es-ES.main.js +0 -7
  92. package/dist/es-ES.main.js.map +0 -1
  93. package/dist/es-ES.mjs +0 -9
  94. package/dist/es-ES.module.js +0 -9
  95. package/dist/es-ES.module.js.map +0 -1
  96. package/dist/et-EE.main.js +0 -7
  97. package/dist/et-EE.main.js.map +0 -1
  98. package/dist/et-EE.mjs +0 -9
  99. package/dist/et-EE.module.js +0 -9
  100. package/dist/et-EE.module.js.map +0 -1
  101. package/dist/fi-FI.main.js +0 -7
  102. package/dist/fi-FI.main.js.map +0 -1
  103. package/dist/fi-FI.mjs +0 -9
  104. package/dist/fi-FI.module.js +0 -9
  105. package/dist/fi-FI.module.js.map +0 -1
  106. package/dist/fr-FR.main.js +0 -7
  107. package/dist/fr-FR.main.js.map +0 -1
  108. package/dist/fr-FR.mjs +0 -9
  109. package/dist/fr-FR.module.js +0 -9
  110. package/dist/fr-FR.module.js.map +0 -1
  111. package/dist/he-IL.main.js +0 -7
  112. package/dist/he-IL.main.js.map +0 -1
  113. package/dist/he-IL.mjs +0 -9
  114. package/dist/he-IL.module.js +0 -9
  115. package/dist/he-IL.module.js.map +0 -1
  116. package/dist/hr-HR.main.js +0 -7
  117. package/dist/hr-HR.main.js.map +0 -1
  118. package/dist/hr-HR.mjs +0 -9
  119. package/dist/hr-HR.module.js +0 -9
  120. package/dist/hr-HR.module.js.map +0 -1
  121. package/dist/hu-HU.main.js +0 -7
  122. package/dist/hu-HU.main.js.map +0 -1
  123. package/dist/hu-HU.mjs +0 -9
  124. package/dist/hu-HU.module.js +0 -9
  125. package/dist/hu-HU.module.js.map +0 -1
  126. package/dist/intlStrings.main.js +0 -108
  127. package/dist/intlStrings.main.js.map +0 -1
  128. package/dist/intlStrings.mjs +0 -110
  129. package/dist/intlStrings.module.js +0 -110
  130. package/dist/intlStrings.module.js.map +0 -1
  131. package/dist/it-IT.main.js +0 -7
  132. package/dist/it-IT.main.js.map +0 -1
  133. package/dist/it-IT.mjs +0 -9
  134. package/dist/it-IT.module.js +0 -9
  135. package/dist/it-IT.module.js.map +0 -1
  136. package/dist/ja-JP.main.js +0 -7
  137. package/dist/ja-JP.main.js.map +0 -1
  138. package/dist/ja-JP.mjs +0 -9
  139. package/dist/ja-JP.module.js +0 -9
  140. package/dist/ja-JP.module.js.map +0 -1
  141. package/dist/ko-KR.main.js +0 -7
  142. package/dist/ko-KR.main.js.map +0 -1
  143. package/dist/ko-KR.mjs +0 -9
  144. package/dist/ko-KR.module.js +0 -9
  145. package/dist/ko-KR.module.js.map +0 -1
  146. package/dist/lt-LT.main.js +0 -7
  147. package/dist/lt-LT.main.js.map +0 -1
  148. package/dist/lt-LT.mjs +0 -9
  149. package/dist/lt-LT.module.js +0 -9
  150. package/dist/lt-LT.module.js.map +0 -1
  151. package/dist/lv-LV.main.js +0 -7
  152. package/dist/lv-LV.main.js.map +0 -1
  153. package/dist/lv-LV.mjs +0 -9
  154. package/dist/lv-LV.module.js +0 -9
  155. package/dist/lv-LV.module.js.map +0 -1
  156. package/dist/nb-NO.main.js +0 -7
  157. package/dist/nb-NO.main.js.map +0 -1
  158. package/dist/nb-NO.mjs +0 -9
  159. package/dist/nb-NO.module.js +0 -9
  160. package/dist/nb-NO.module.js.map +0 -1
  161. package/dist/nl-NL.main.js +0 -7
  162. package/dist/nl-NL.main.js.map +0 -1
  163. package/dist/nl-NL.mjs +0 -9
  164. package/dist/nl-NL.module.js +0 -9
  165. package/dist/nl-NL.module.js.map +0 -1
  166. package/dist/pl-PL.main.js +0 -7
  167. package/dist/pl-PL.main.js.map +0 -1
  168. package/dist/pl-PL.mjs +0 -9
  169. package/dist/pl-PL.module.js +0 -9
  170. package/dist/pl-PL.module.js.map +0 -1
  171. package/dist/pt-BR.main.js +0 -7
  172. package/dist/pt-BR.main.js.map +0 -1
  173. package/dist/pt-BR.mjs +0 -9
  174. package/dist/pt-BR.module.js +0 -9
  175. package/dist/pt-BR.module.js.map +0 -1
  176. package/dist/pt-PT.main.js +0 -7
  177. package/dist/pt-PT.main.js.map +0 -1
  178. package/dist/pt-PT.mjs +0 -9
  179. package/dist/pt-PT.module.js +0 -9
  180. package/dist/pt-PT.module.js.map +0 -1
  181. package/dist/ro-RO.main.js +0 -7
  182. package/dist/ro-RO.main.js.map +0 -1
  183. package/dist/ro-RO.mjs +0 -9
  184. package/dist/ro-RO.module.js +0 -9
  185. package/dist/ro-RO.module.js.map +0 -1
  186. package/dist/ru-RU.main.js +0 -7
  187. package/dist/ru-RU.main.js.map +0 -1
  188. package/dist/ru-RU.mjs +0 -9
  189. package/dist/ru-RU.module.js +0 -9
  190. package/dist/ru-RU.module.js.map +0 -1
  191. package/dist/sk-SK.main.js +0 -7
  192. package/dist/sk-SK.main.js.map +0 -1
  193. package/dist/sk-SK.mjs +0 -9
  194. package/dist/sk-SK.module.js +0 -9
  195. package/dist/sk-SK.module.js.map +0 -1
  196. package/dist/sl-SI.main.js +0 -7
  197. package/dist/sl-SI.main.js.map +0 -1
  198. package/dist/sl-SI.mjs +0 -9
  199. package/dist/sl-SI.module.js +0 -9
  200. package/dist/sl-SI.module.js.map +0 -1
  201. package/dist/sr-SP.main.js +0 -7
  202. package/dist/sr-SP.main.js.map +0 -1
  203. package/dist/sr-SP.mjs +0 -9
  204. package/dist/sr-SP.module.js +0 -9
  205. package/dist/sr-SP.module.js.map +0 -1
  206. package/dist/sv-SE.main.js +0 -7
  207. package/dist/sv-SE.main.js.map +0 -1
  208. package/dist/sv-SE.mjs +0 -9
  209. package/dist/sv-SE.module.js +0 -9
  210. package/dist/sv-SE.module.js.map +0 -1
  211. package/dist/tr-TR.main.js +0 -7
  212. package/dist/tr-TR.main.js.map +0 -1
  213. package/dist/tr-TR.mjs +0 -9
  214. package/dist/tr-TR.module.js +0 -9
  215. package/dist/tr-TR.module.js.map +0 -1
  216. package/dist/types.d.ts +0 -194
  217. package/dist/types.d.ts.map +0 -1
  218. package/dist/uk-UA.main.js +0 -7
  219. package/dist/uk-UA.main.js.map +0 -1
  220. package/dist/uk-UA.mjs +0 -9
  221. package/dist/uk-UA.module.js +0 -9
  222. package/dist/uk-UA.module.js.map +0 -1
  223. package/dist/zh-CN.main.js +0 -7
  224. package/dist/zh-CN.main.js.map +0 -1
  225. package/dist/zh-CN.mjs +0 -9
  226. package/dist/zh-CN.module.js +0 -9
  227. package/dist/zh-CN.module.js.map +0 -1
  228. package/dist/zh-TW.main.js +0 -7
  229. package/dist/zh-TW.main.js.map +0 -1
  230. package/dist/zh-TW.mjs +0 -9
  231. package/dist/zh-TW.module.js +0 -9
  232. package/dist/zh-TW.module.js.map +0 -1
  233. package/src/BaseLayout.tsx +0 -290
  234. package/src/Card.tsx +0 -48
  235. package/src/CardBase.tsx +0 -188
  236. package/src/CardView.tsx +0 -250
  237. package/src/CardViewContext.tsx +0 -27
  238. package/src/GalleryLayout.tsx +0 -321
  239. package/src/GridLayout.tsx +0 -242
  240. package/src/WaterfallLayout.tsx +0 -241
@@ -1,205 +0,0 @@
1
- require("./card.4d5d6544.css");
2
- var $71570f0038472fa2$exports = require("./card_vars_css.main.js");
3
- var $e57ab98cef2f01a5$exports = require("./CardViewContext.main.js");
4
- var $1rjnI$reactspectrumcheckbox = require("@react-spectrum/checkbox");
5
- var $1rjnI$reactspectrumutils = require("@react-spectrum/utils");
6
- var $1rjnI$reactariautils = require("@react-aria/utils");
7
- var $1rjnI$reactariafocus = require("@react-aria/focus");
8
- var $1rjnI$react = require("react");
9
- var $1rjnI$reactariainteractions = require("@react-aria/interactions");
10
- var $1rjnI$reactspectrumprovider = require("@react-spectrum/provider");
11
-
12
-
13
- function $parcel$interopDefault(a) {
14
- return a && a.__esModule ? a.default : a;
15
- }
16
-
17
- function $parcel$export(e, n, v, s) {
18
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
19
- }
20
-
21
- $parcel$export(module.exports, "CardBase", () => $7888205ff7de382f$export$7a6ccaf429ad93a8);
22
- // @ts-nocheck
23
- /*
24
- * Copyright 2021 Adobe. All rights reserved.
25
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
26
- * you may not use this file except in compliance with the License. You may obtain a copy
27
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
28
- *
29
- * Unless required by applicable law or agreed to in writing, software distributed under
30
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
31
- * OF ANY KIND, either express or implied. See the License for the specific language
32
- * governing permissions and limitations under the License.
33
- */
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
- const $7888205ff7de382f$export$7a6ccaf429ad93a8 = /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).forwardRef(function CardBase(props, ref) {
43
- props = (0, $1rjnI$reactspectrumprovider.useProviderProps)(props);
44
- let context = (0, $e57ab98cef2f01a5$exports.useCardViewContext)() || {}; // we can call again here, won't change from Card.tsx
45
- let { state: state } = context;
46
- let manager = state === null || state === void 0 ? void 0 : state.selectionManager;
47
- let { isQuiet: isQuiet, orientation: orientation = 'vertical', articleProps: articleProps = {
48
- role: 'article'
49
- }, item: item, layout: layout, children: children } = props;
50
- let key = item === null || item === void 0 ? void 0 : item.key;
51
- let isSelected = manager === null || manager === void 0 ? void 0 : manager.isSelected(key);
52
- let isDisabled = state === null || state === void 0 ? void 0 : state.disabledKeys.has(key);
53
- let onChange = ()=>manager === null || manager === void 0 ? void 0 : manager.select(key);
54
- let { styleProps: styleProps } = (0, $1rjnI$reactspectrumutils.useStyleProps)(props);
55
- let { cardProps: cardProps, titleProps: titleProps, contentProps: contentProps } = $7888205ff7de382f$var$useCard(props);
56
- let domRef = (0, $1rjnI$reactspectrumutils.useDOMRef)(ref);
57
- let gridRef = (0, $1rjnI$react.useRef)(undefined);
58
- let checkboxRef = (0, $1rjnI$react.useRef)(null);
59
- // cards are only interactive if there is a selection manager and it allows selection
60
- let { hoverProps: hoverProps, isHovered: isHovered } = (0, $1rjnI$reactariainteractions.useHover)({
61
- isDisabled: manager === undefined || (manager === null || manager === void 0 ? void 0 : manager.selectionMode) === 'none' || isDisabled
62
- });
63
- let [isFocused, setIsFocused] = (0, $1rjnI$react.useState)(false);
64
- let { focusWithinProps: focusWithinProps } = (0, $1rjnI$reactariainteractions.useFocusWithin)({
65
- onFocusWithinChange: setIsFocused,
66
- isDisabled: isDisabled
67
- });
68
- // ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default
69
- let hasPreviewImage = (0, $1rjnI$reactspectrumutils.useHasChild)(`.${(0, ($parcel$interopDefault($71570f0038472fa2$exports)))['spectrum-Card-image']}`, gridRef);
70
- let hasPreviewIllustration = (0, $1rjnI$reactspectrumutils.useHasChild)(`.${(0, ($parcel$interopDefault($71570f0038472fa2$exports)))['spectrum-Card-illustration']}`, gridRef);
71
- let hasPreview = hasPreviewImage || hasPreviewIllustration;
72
- // this is for horizontal cards
73
- let [height, setHeight] = (0, $1rjnI$react.useState)(NaN);
74
- let updateHeight = (0, $1rjnI$react.useCallback)(()=>{
75
- if (orientation !== 'horizontal') return;
76
- let cardHeight = gridRef.current.getBoundingClientRect().height;
77
- setHeight(cardHeight);
78
- }, [
79
- orientation,
80
- gridRef,
81
- setHeight
82
- ]);
83
- (0, $1rjnI$reactariautils.useResizeObserver)({
84
- ref: gridRef,
85
- onResize: updateHeight
86
- });
87
- let aspectRatioEnforce = undefined;
88
- if (orientation === 'horizontal' && !isNaN(height)) aspectRatioEnforce = {
89
- height: `${height}px`,
90
- width: `${height}px`
91
- };
92
- let slots = (0, $1rjnI$react.useMemo)(()=>({
93
- image: {
94
- UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-image'),
95
- objectFit: orientation === 'horizontal' ? 'cover' : 'contain',
96
- alt: '',
97
- ...aspectRatioEnforce
98
- },
99
- illustration: {
100
- UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-illustration'),
101
- ...aspectRatioEnforce
102
- },
103
- avatar: {
104
- UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-avatar'),
105
- size: 'avatar-size-400'
106
- },
107
- heading: {
108
- UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-heading'),
109
- ...titleProps
110
- },
111
- content: {
112
- UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-content'),
113
- ...contentProps
114
- },
115
- detail: {
116
- UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-detail')
117
- }
118
- }), [
119
- titleProps,
120
- contentProps,
121
- height,
122
- isQuiet,
123
- orientation
124
- ]);
125
- (0, $1rjnI$reactariautils.useLayoutEffect)(()=>{
126
- if (gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) {
127
- let walker = (0, $1rjnI$reactariafocus.getFocusableTreeWalker)(gridRef.current);
128
- let nextNode = walker.nextNode();
129
- while(nextNode != null){
130
- if (checkboxRef.current && !(0, $1rjnI$reactariautils.nodeContains)(checkboxRef.current.UNSAFE_getDOMNode(), nextNode)) {
131
- console.warn('Card does not support focusable elements, please contact the team regarding your use case.');
132
- break;
133
- }
134
- nextNode = walker.nextNode();
135
- }
136
- }
137
- }, [
138
- children
139
- ]);
140
- return /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement((0, $1rjnI$reactariafocus.FocusRing), {
141
- focusRingClass: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'focus-ring')
142
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement("div", {
143
- ...styleProps,
144
- ...(0, $1rjnI$reactariautils.mergeProps)(cardProps, focusWithinProps, hoverProps, (0, $1rjnI$reactariautils.filterDOMProps)(props), articleProps),
145
- ref: domRef,
146
- className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card', {
147
- 'spectrum-Card--default': !isQuiet && orientation !== 'horizontal',
148
- 'spectrum-Card--isQuiet': isQuiet && orientation !== 'horizontal',
149
- 'spectrum-Card--horizontal': orientation === 'horizontal',
150
- 'spectrum-Card--noPreview': !hasPreview,
151
- 'is-hovered': isHovered,
152
- 'is-focused': isFocused,
153
- 'is-selected': isSelected,
154
- 'spectrum-Card--waterfall': layout === 'waterfall',
155
- 'spectrum-Card--gallery': layout === 'gallery',
156
- 'spectrum-Card--grid': layout === 'grid',
157
- 'spectrum-Card--noLayout': layout !== 'waterfall' && layout !== 'gallery' && layout !== 'grid'
158
- }, styleProps.className)
159
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement("div", {
160
- ref: gridRef,
161
- className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-grid')
162
- }, manager && manager.selectionMode !== 'none' && /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement("div", {
163
- className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-checkboxWrapper')
164
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement((0, $1rjnI$reactspectrumcheckbox.Checkbox), {
165
- ref: checkboxRef,
166
- isDisabled: isDisabled,
167
- excludeFromTabOrder: true,
168
- isSelected: isSelected,
169
- onChange: onChange,
170
- UNSAFE_className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-checkbox'),
171
- isEmphasized: true,
172
- "aria-label": "select"
173
- })), /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement((0, $1rjnI$reactspectrumutils.SlotProvider), {
174
- slots: slots
175
- }, children), /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement("div", {
176
- className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-decoration')
177
- }))));
178
- });
179
- function $7888205ff7de382f$var$useCard(props) {
180
- let titleId = (0, $1rjnI$reactariautils.useSlotId)();
181
- let descriptionId = (0, $1rjnI$reactariautils.useSlotId)();
182
- let titleProps = (0, $1rjnI$react.useMemo)(()=>({
183
- id: titleId
184
- }), [
185
- titleId
186
- ]);
187
- let contentProps = (0, $1rjnI$react.useMemo)(()=>({
188
- id: descriptionId
189
- }), [
190
- descriptionId
191
- ]);
192
- return {
193
- cardProps: {
194
- ...(0, $1rjnI$reactariautils.filterDOMProps)(props),
195
- 'aria-labelledby': titleId,
196
- 'aria-describedby': descriptionId,
197
- tabIndex: 0
198
- },
199
- titleProps: titleProps,
200
- contentProps: contentProps
201
- };
202
- }
203
-
204
-
205
- //# sourceMappingURL=CardBase.main.js.map
@@ -1 +0,0 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,cAAc;AACd;;;;;;;;;;CAUC;;;;;;;;;AAsBM,MAAM,0DAAW,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,SAA2B,KAAuB,EAAE,GAA2B;IAC/H,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,IAAI,UAAU,CAAA,GAAA,4CAAiB,OAAO,CAAC,GAAG,qDAAqD;IAC/F,IAAI,SAAC,KAAK,EAAC,GAAG;IACd,IAAI,UAAU,kBAAA,4BAAA,MAAO,gBAAgB;IACrC,IAAI,WACF,OAAO,eACP,cAAc,0BACd,eAAe;QAAC,MAAM;IAAS,SAC/B,IAAI,UACJ,MAAM,YACN,QAAQ,EACT,GAAG;IAEJ,IAAI,MAAM,iBAAA,2BAAA,KAAM,GAAG;IACnB,IAAI,aAAa,oBAAA,8BAAA,QAAS,UAAU,CAAC;IACrC,IAAI,aAAa,kBAAA,4BAAA,MAAO,YAAY,CAAC,GAAG,CAAC;IACzC,IAAI,WAAW,IAAM,oBAAA,8BAAA,QAAS,MAAM,CAAC;IAErC,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,IAAI,aAAC,SAAS,cAAE,UAAU,gBAAE,YAAY,EAAC,GAAG,8BAAQ;IACpD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,UAAU,CAAA,GAAA,mBAAK,EAAkB;IACrC,IAAI,cAAc,CAAA,GAAA,mBAAK,EAAE;IAEzB,qFAAqF;IACrF,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;QAAC,YAAY,YAAY,aAAa,CAAA,oBAAA,8BAAA,QAAS,aAAa,MAAK,UAAU;IAAU;IAC5H,IAAI,CAAC,WAAW,aAAa,GAAG,CAAA,GAAA,qBAAO,EAAE;IACzC,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,2CAAa,EAAE;QACtC,qBAAqB;oBACrB;IACF;IAEA,wGAAwG;IACxG,IAAI,kBAAkB,CAAA,GAAA,qCAAU,EAAE,CAAC,CAAC,EAAE,CAAA,GAAA,mDAAK,CAAC,CAAC,sBAAsB,EAAE,EAAE;IACvE,IAAI,yBAAyB,CAAA,GAAA,qCAAU,EAAE,CAAC,CAAC,EAAE,CAAA,GAAA,mDAAK,CAAC,CAAC,6BAA6B,EAAE,EAAE;IACrF,IAAI,aAAa,mBAAmB;IAEpC,+BAA+B;IAC/B,IAAI,CAAC,QAAQ,UAAU,GAAG,CAAA,GAAA,qBAAO,EAAE;IACnC,IAAI,eAAe,CAAA,GAAA,wBAAU,EAAE;QAC7B,IAAI,gBAAgB,cAClB;QAGF,IAAI,aAAa,QAAQ,OAAO,CAAC,qBAAqB,GAAG,MAAM;QAC/D,UAAU;IACZ,GAAG;QAAC;QAAa;QAAS;KAAU;IACpC,CAAA,GAAA,uCAAgB,EAAE;QAAC,KAAK;QAAS,UAAU;IAAY;IAEvD,IAAI,qBAAqB;IACzB,IAAI,gBAAgB,gBAAgB,CAAC,MAAM,SACzC,qBAAqB;QACnB,QAAQ,GAAG,OAAO,EAAE,CAAC;QACrB,OAAO,GAAG,OAAO,EAAE,CAAC;IACtB;IAGF,IAAI,QAAQ,CAAA,GAAA,oBAAM,EAAE,IAAO,CAAA;YACzB,OAAO;gBAAC,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;gBAAwB,WAAW,gBAAgB,eAAe,UAAU;gBAAW,KAAK;gBAAI,GAAG,kBAAkB;YAAA;YAClK,cAAc;gBAAC,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;gBAA+B,GAAG,kBAAkB;YAAA;YACxG,QAAQ;gBAAC,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;gBAAyB,MAAM;YAAiB;YAC9F,SAAS;gBAAC,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;gBAA0B,GAAG,UAAU;YAAA;YACtF,SAAS;gBAAC,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;gBAA0B,GAAG,YAAY;YAAA;YACxF,QAAQ;gBAAC,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YAAuB;QAEvE,CAAA,GAAI;QAAC;QAAY;QAAc;QAAQ;QAAS;KAAY;IAE5D,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,oBAAA,8BAAA,QAAS,OAAO,EAAE;YACpB,IAAI,SAAS,CAAA,GAAA,4CAAqB,EAAE,QAAQ,OAAO;YACnD,IAAI,WAAW,OAAO,QAAQ;YAC9B,MAAO,YAAY,KAAM;gBACvB,IAAI,YAAY,OAAO,IAAI,CAAC,CAAA,GAAA,kCAAW,EAAE,YAAY,OAAO,CAAC,iBAAiB,IAAI,WAAW;oBAC3F,QAAQ,IAAI,CAAC;oBACb;gBACF;gBACA,WAAW,OAAO,QAAQ;YAC5B;QACF;IACF,GAAG;QAAC;KAAS;IAEb,qBACE,0DAAC,CAAA,GAAA,+BAAQ;QAAE,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBAC5C,0DAAC;QACE,GAAG,UAAU;QACb,GAAG,CAAA,GAAA,gCAAS,EAAE,WAAW,kBAAkB,YAAY,CAAA,GAAA,oCAAa,EAAE,QAAQ,aAAa;QAC5F,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG,iBAAiB;YAC7C,0BAA0B,CAAC,WAAW,gBAAgB;YACtD,0BAA0B,WAAW,gBAAgB;YACrD,6BAA6B,gBAAgB;YAC7C,4BAA4B,CAAC;YAC7B,cAAc;YACd,cAAc;YACd,eAAe;YACf,4BAA4B,WAAW;YACvC,0BAA0B,WAAW;YACrC,uBAAuB,WAAW;YAClC,2BAA2B,WAAW,eAAe,WAAW,aAAa,WAAW;QAC1F,GAAG,WAAW,SAAS;qBACvB,0DAAC;QAAI,KAAK;QAAS,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;OAC9C,WAAW,QAAQ,aAAa,KAAK,wBACpC,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBACjC,0DAAC,CAAA,GAAA,qCAAO;QACN,KAAK;QACL,YAAY;QACZ,qBAAA;QACA,YAAY;QACZ,UAAU;QACV,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QACrC,cAAA;QACA,cAAW;uBAGjB,0DAAC,CAAA,GAAA,sCAAW;QAAE,OAAO;OAClB,yBAEH,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;;AAK7C;AAWA,SAAS,8BAAQ,KAAsB;IACrC,IAAI,UAAU,CAAA,GAAA,+BAAQ;IACtB,IAAI,gBAAgB,CAAA,GAAA,+BAAQ;IAC5B,IAAI,aAAa,CAAA,GAAA,oBAAM,EAAE,IAAO,CAAA;YAC9B,IAAI;QACN,CAAA,GAAI;QAAC;KAAQ;IACb,IAAI,eAAe,CAAA,GAAA,oBAAM,EAAE,IAAO,CAAA;YAChC,IAAI;QACN,CAAA,GAAI;QAAC;KAAc;IAEnB,OAAO;QACL,WAAW;YACT,GAAG,CAAA,GAAA,oCAAa,EAAE,MAAM;YACxB,mBAAmB;YACnB,oBAAoB;YACpB,UAAU;QACZ;oBACA;sBACA;IACF;AACF","sources":["packages/@react-spectrum/card/src/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 '@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, nodeContains, 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\n/**\n * TODO: Add description of component here.\n */\nexport const CardBase = React.forwardRef(function 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 = {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({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 && !nodeContains(checkboxRef.current.UNSAFE_getDOMNode(), 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 <div\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 </div>\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"],"names":[],"version":3,"file":"CardBase.main.js.map"}
package/dist/CardBase.mjs DELETED
@@ -1,200 +0,0 @@
1
- import "./card.4d5d6544.css";
2
- import $8eFIe$card_vars_cssmodulejs from "./card_vars_css.mjs";
3
- import {useCardViewContext as $8d180a244893de14$export$fea0b38586ec8f13} from "./CardViewContext.mjs";
4
- import {Checkbox as $8eFIe$Checkbox} from "@react-spectrum/checkbox";
5
- import {useStyleProps as $8eFIe$useStyleProps, useDOMRef as $8eFIe$useDOMRef, useHasChild as $8eFIe$useHasChild, classNames as $8eFIe$classNames, SlotProvider as $8eFIe$SlotProvider} from "@react-spectrum/utils";
6
- import {useResizeObserver as $8eFIe$useResizeObserver, useLayoutEffect as $8eFIe$useLayoutEffect, nodeContains as $8eFIe$nodeContains, mergeProps as $8eFIe$mergeProps, filterDOMProps as $8eFIe$filterDOMProps, useSlotId as $8eFIe$useSlotId} from "@react-aria/utils";
7
- import {getFocusableTreeWalker as $8eFIe$getFocusableTreeWalker, FocusRing as $8eFIe$FocusRing} from "@react-aria/focus";
8
- import $8eFIe$react, {useRef as $8eFIe$useRef, useState as $8eFIe$useState, useCallback as $8eFIe$useCallback, useMemo as $8eFIe$useMemo} from "react";
9
- import {useHover as $8eFIe$useHover, useFocusWithin as $8eFIe$useFocusWithin} from "@react-aria/interactions";
10
- import {useProviderProps as $8eFIe$useProviderProps} from "@react-spectrum/provider";
11
-
12
-
13
- function $parcel$interopDefault(a) {
14
- return a && a.__esModule ? a.default : a;
15
- }
16
- // @ts-nocheck
17
- /*
18
- * Copyright 2021 Adobe. All rights reserved.
19
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
20
- * you may not use this file except in compliance with the License. You may obtain a copy
21
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
22
- *
23
- * Unless required by applicable law or agreed to in writing, software distributed under
24
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
25
- * OF ANY KIND, either express or implied. See the License for the specific language
26
- * governing permissions and limitations under the License.
27
- */
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
- const $643dd8fa80926f94$export$7a6ccaf429ad93a8 = /*#__PURE__*/ (0, $8eFIe$react).forwardRef(function CardBase(props, ref) {
37
- props = (0, $8eFIe$useProviderProps)(props);
38
- let context = (0, $8d180a244893de14$export$fea0b38586ec8f13)() || {}; // we can call again here, won't change from Card.tsx
39
- let { state: state } = context;
40
- let manager = state === null || state === void 0 ? void 0 : state.selectionManager;
41
- let { isQuiet: isQuiet, orientation: orientation = 'vertical', articleProps: articleProps = {
42
- role: 'article'
43
- }, item: item, layout: layout, children: children } = props;
44
- let key = item === null || item === void 0 ? void 0 : item.key;
45
- let isSelected = manager === null || manager === void 0 ? void 0 : manager.isSelected(key);
46
- let isDisabled = state === null || state === void 0 ? void 0 : state.disabledKeys.has(key);
47
- let onChange = ()=>manager === null || manager === void 0 ? void 0 : manager.select(key);
48
- let { styleProps: styleProps } = (0, $8eFIe$useStyleProps)(props);
49
- let { cardProps: cardProps, titleProps: titleProps, contentProps: contentProps } = $643dd8fa80926f94$var$useCard(props);
50
- let domRef = (0, $8eFIe$useDOMRef)(ref);
51
- let gridRef = (0, $8eFIe$useRef)(undefined);
52
- let checkboxRef = (0, $8eFIe$useRef)(null);
53
- // cards are only interactive if there is a selection manager and it allows selection
54
- let { hoverProps: hoverProps, isHovered: isHovered } = (0, $8eFIe$useHover)({
55
- isDisabled: manager === undefined || (manager === null || manager === void 0 ? void 0 : manager.selectionMode) === 'none' || isDisabled
56
- });
57
- let [isFocused, setIsFocused] = (0, $8eFIe$useState)(false);
58
- let { focusWithinProps: focusWithinProps } = (0, $8eFIe$useFocusWithin)({
59
- onFocusWithinChange: setIsFocused,
60
- isDisabled: isDisabled
61
- });
62
- // ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default
63
- let hasPreviewImage = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))['spectrum-Card-image']}`, gridRef);
64
- let hasPreviewIllustration = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))['spectrum-Card-illustration']}`, gridRef);
65
- let hasPreview = hasPreviewImage || hasPreviewIllustration;
66
- // this is for horizontal cards
67
- let [height, setHeight] = (0, $8eFIe$useState)(NaN);
68
- let updateHeight = (0, $8eFIe$useCallback)(()=>{
69
- if (orientation !== 'horizontal') return;
70
- let cardHeight = gridRef.current.getBoundingClientRect().height;
71
- setHeight(cardHeight);
72
- }, [
73
- orientation,
74
- gridRef,
75
- setHeight
76
- ]);
77
- (0, $8eFIe$useResizeObserver)({
78
- ref: gridRef,
79
- onResize: updateHeight
80
- });
81
- let aspectRatioEnforce = undefined;
82
- if (orientation === 'horizontal' && !isNaN(height)) aspectRatioEnforce = {
83
- height: `${height}px`,
84
- width: `${height}px`
85
- };
86
- let slots = (0, $8eFIe$useMemo)(()=>({
87
- image: {
88
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-image'),
89
- objectFit: orientation === 'horizontal' ? 'cover' : 'contain',
90
- alt: '',
91
- ...aspectRatioEnforce
92
- },
93
- illustration: {
94
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-illustration'),
95
- ...aspectRatioEnforce
96
- },
97
- avatar: {
98
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-avatar'),
99
- size: 'avatar-size-400'
100
- },
101
- heading: {
102
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-heading'),
103
- ...titleProps
104
- },
105
- content: {
106
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-content'),
107
- ...contentProps
108
- },
109
- detail: {
110
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-detail')
111
- }
112
- }), [
113
- titleProps,
114
- contentProps,
115
- height,
116
- isQuiet,
117
- orientation
118
- ]);
119
- (0, $8eFIe$useLayoutEffect)(()=>{
120
- if (gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) {
121
- let walker = (0, $8eFIe$getFocusableTreeWalker)(gridRef.current);
122
- let nextNode = walker.nextNode();
123
- while(nextNode != null){
124
- if (checkboxRef.current && !(0, $8eFIe$nodeContains)(checkboxRef.current.UNSAFE_getDOMNode(), nextNode)) {
125
- console.warn('Card does not support focusable elements, please contact the team regarding your use case.');
126
- break;
127
- }
128
- nextNode = walker.nextNode();
129
- }
130
- }
131
- }, [
132
- children
133
- ]);
134
- return /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$FocusRing), {
135
- focusRingClass: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'focus-ring')
136
- }, /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
137
- ...styleProps,
138
- ...(0, $8eFIe$mergeProps)(cardProps, focusWithinProps, hoverProps, (0, $8eFIe$filterDOMProps)(props), articleProps),
139
- ref: domRef,
140
- className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card', {
141
- 'spectrum-Card--default': !isQuiet && orientation !== 'horizontal',
142
- 'spectrum-Card--isQuiet': isQuiet && orientation !== 'horizontal',
143
- 'spectrum-Card--horizontal': orientation === 'horizontal',
144
- 'spectrum-Card--noPreview': !hasPreview,
145
- 'is-hovered': isHovered,
146
- 'is-focused': isFocused,
147
- 'is-selected': isSelected,
148
- 'spectrum-Card--waterfall': layout === 'waterfall',
149
- 'spectrum-Card--gallery': layout === 'gallery',
150
- 'spectrum-Card--grid': layout === 'grid',
151
- 'spectrum-Card--noLayout': layout !== 'waterfall' && layout !== 'gallery' && layout !== 'grid'
152
- }, styleProps.className)
153
- }, /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
154
- ref: gridRef,
155
- className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-grid')
156
- }, manager && manager.selectionMode !== 'none' && /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
157
- className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-checkboxWrapper')
158
- }, /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$Checkbox), {
159
- ref: checkboxRef,
160
- isDisabled: isDisabled,
161
- excludeFromTabOrder: true,
162
- isSelected: isSelected,
163
- onChange: onChange,
164
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-checkbox'),
165
- isEmphasized: true,
166
- "aria-label": "select"
167
- })), /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$SlotProvider), {
168
- slots: slots
169
- }, children), /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
170
- className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-decoration')
171
- }))));
172
- });
173
- function $643dd8fa80926f94$var$useCard(props) {
174
- let titleId = (0, $8eFIe$useSlotId)();
175
- let descriptionId = (0, $8eFIe$useSlotId)();
176
- let titleProps = (0, $8eFIe$useMemo)(()=>({
177
- id: titleId
178
- }), [
179
- titleId
180
- ]);
181
- let contentProps = (0, $8eFIe$useMemo)(()=>({
182
- id: descriptionId
183
- }), [
184
- descriptionId
185
- ]);
186
- return {
187
- cardProps: {
188
- ...(0, $8eFIe$filterDOMProps)(props),
189
- 'aria-labelledby': titleId,
190
- 'aria-describedby': descriptionId,
191
- tabIndex: 0
192
- },
193
- titleProps: titleProps,
194
- contentProps: contentProps
195
- };
196
- }
197
-
198
-
199
- export {$643dd8fa80926f94$export$7a6ccaf429ad93a8 as CardBase};
200
- //# sourceMappingURL=CardBase.module.js.map
@@ -1,200 +0,0 @@
1
- import "./card.4d5d6544.css";
2
- import $8eFIe$card_vars_cssmodulejs from "./card_vars_css.module.js";
3
- import {useCardViewContext as $8d180a244893de14$export$fea0b38586ec8f13} from "./CardViewContext.module.js";
4
- import {Checkbox as $8eFIe$Checkbox} from "@react-spectrum/checkbox";
5
- import {useStyleProps as $8eFIe$useStyleProps, useDOMRef as $8eFIe$useDOMRef, useHasChild as $8eFIe$useHasChild, classNames as $8eFIe$classNames, SlotProvider as $8eFIe$SlotProvider} from "@react-spectrum/utils";
6
- import {useResizeObserver as $8eFIe$useResizeObserver, useLayoutEffect as $8eFIe$useLayoutEffect, nodeContains as $8eFIe$nodeContains, mergeProps as $8eFIe$mergeProps, filterDOMProps as $8eFIe$filterDOMProps, useSlotId as $8eFIe$useSlotId} from "@react-aria/utils";
7
- import {getFocusableTreeWalker as $8eFIe$getFocusableTreeWalker, FocusRing as $8eFIe$FocusRing} from "@react-aria/focus";
8
- import $8eFIe$react, {useRef as $8eFIe$useRef, useState as $8eFIe$useState, useCallback as $8eFIe$useCallback, useMemo as $8eFIe$useMemo} from "react";
9
- import {useHover as $8eFIe$useHover, useFocusWithin as $8eFIe$useFocusWithin} from "@react-aria/interactions";
10
- import {useProviderProps as $8eFIe$useProviderProps} from "@react-spectrum/provider";
11
-
12
-
13
- function $parcel$interopDefault(a) {
14
- return a && a.__esModule ? a.default : a;
15
- }
16
- // @ts-nocheck
17
- /*
18
- * Copyright 2021 Adobe. All rights reserved.
19
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
20
- * you may not use this file except in compliance with the License. You may obtain a copy
21
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
22
- *
23
- * Unless required by applicable law or agreed to in writing, software distributed under
24
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
25
- * OF ANY KIND, either express or implied. See the License for the specific language
26
- * governing permissions and limitations under the License.
27
- */
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
- const $643dd8fa80926f94$export$7a6ccaf429ad93a8 = /*#__PURE__*/ (0, $8eFIe$react).forwardRef(function CardBase(props, ref) {
37
- props = (0, $8eFIe$useProviderProps)(props);
38
- let context = (0, $8d180a244893de14$export$fea0b38586ec8f13)() || {}; // we can call again here, won't change from Card.tsx
39
- let { state: state } = context;
40
- let manager = state === null || state === void 0 ? void 0 : state.selectionManager;
41
- let { isQuiet: isQuiet, orientation: orientation = 'vertical', articleProps: articleProps = {
42
- role: 'article'
43
- }, item: item, layout: layout, children: children } = props;
44
- let key = item === null || item === void 0 ? void 0 : item.key;
45
- let isSelected = manager === null || manager === void 0 ? void 0 : manager.isSelected(key);
46
- let isDisabled = state === null || state === void 0 ? void 0 : state.disabledKeys.has(key);
47
- let onChange = ()=>manager === null || manager === void 0 ? void 0 : manager.select(key);
48
- let { styleProps: styleProps } = (0, $8eFIe$useStyleProps)(props);
49
- let { cardProps: cardProps, titleProps: titleProps, contentProps: contentProps } = $643dd8fa80926f94$var$useCard(props);
50
- let domRef = (0, $8eFIe$useDOMRef)(ref);
51
- let gridRef = (0, $8eFIe$useRef)(undefined);
52
- let checkboxRef = (0, $8eFIe$useRef)(null);
53
- // cards are only interactive if there is a selection manager and it allows selection
54
- let { hoverProps: hoverProps, isHovered: isHovered } = (0, $8eFIe$useHover)({
55
- isDisabled: manager === undefined || (manager === null || manager === void 0 ? void 0 : manager.selectionMode) === 'none' || isDisabled
56
- });
57
- let [isFocused, setIsFocused] = (0, $8eFIe$useState)(false);
58
- let { focusWithinProps: focusWithinProps } = (0, $8eFIe$useFocusWithin)({
59
- onFocusWithinChange: setIsFocused,
60
- isDisabled: isDisabled
61
- });
62
- // ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default
63
- let hasPreviewImage = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))['spectrum-Card-image']}`, gridRef);
64
- let hasPreviewIllustration = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))['spectrum-Card-illustration']}`, gridRef);
65
- let hasPreview = hasPreviewImage || hasPreviewIllustration;
66
- // this is for horizontal cards
67
- let [height, setHeight] = (0, $8eFIe$useState)(NaN);
68
- let updateHeight = (0, $8eFIe$useCallback)(()=>{
69
- if (orientation !== 'horizontal') return;
70
- let cardHeight = gridRef.current.getBoundingClientRect().height;
71
- setHeight(cardHeight);
72
- }, [
73
- orientation,
74
- gridRef,
75
- setHeight
76
- ]);
77
- (0, $8eFIe$useResizeObserver)({
78
- ref: gridRef,
79
- onResize: updateHeight
80
- });
81
- let aspectRatioEnforce = undefined;
82
- if (orientation === 'horizontal' && !isNaN(height)) aspectRatioEnforce = {
83
- height: `${height}px`,
84
- width: `${height}px`
85
- };
86
- let slots = (0, $8eFIe$useMemo)(()=>({
87
- image: {
88
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-image'),
89
- objectFit: orientation === 'horizontal' ? 'cover' : 'contain',
90
- alt: '',
91
- ...aspectRatioEnforce
92
- },
93
- illustration: {
94
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-illustration'),
95
- ...aspectRatioEnforce
96
- },
97
- avatar: {
98
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-avatar'),
99
- size: 'avatar-size-400'
100
- },
101
- heading: {
102
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-heading'),
103
- ...titleProps
104
- },
105
- content: {
106
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-content'),
107
- ...contentProps
108
- },
109
- detail: {
110
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-detail')
111
- }
112
- }), [
113
- titleProps,
114
- contentProps,
115
- height,
116
- isQuiet,
117
- orientation
118
- ]);
119
- (0, $8eFIe$useLayoutEffect)(()=>{
120
- if (gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) {
121
- let walker = (0, $8eFIe$getFocusableTreeWalker)(gridRef.current);
122
- let nextNode = walker.nextNode();
123
- while(nextNode != null){
124
- if (checkboxRef.current && !(0, $8eFIe$nodeContains)(checkboxRef.current.UNSAFE_getDOMNode(), nextNode)) {
125
- console.warn('Card does not support focusable elements, please contact the team regarding your use case.');
126
- break;
127
- }
128
- nextNode = walker.nextNode();
129
- }
130
- }
131
- }, [
132
- children
133
- ]);
134
- return /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$FocusRing), {
135
- focusRingClass: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'focus-ring')
136
- }, /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
137
- ...styleProps,
138
- ...(0, $8eFIe$mergeProps)(cardProps, focusWithinProps, hoverProps, (0, $8eFIe$filterDOMProps)(props), articleProps),
139
- ref: domRef,
140
- className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card', {
141
- 'spectrum-Card--default': !isQuiet && orientation !== 'horizontal',
142
- 'spectrum-Card--isQuiet': isQuiet && orientation !== 'horizontal',
143
- 'spectrum-Card--horizontal': orientation === 'horizontal',
144
- 'spectrum-Card--noPreview': !hasPreview,
145
- 'is-hovered': isHovered,
146
- 'is-focused': isFocused,
147
- 'is-selected': isSelected,
148
- 'spectrum-Card--waterfall': layout === 'waterfall',
149
- 'spectrum-Card--gallery': layout === 'gallery',
150
- 'spectrum-Card--grid': layout === 'grid',
151
- 'spectrum-Card--noLayout': layout !== 'waterfall' && layout !== 'gallery' && layout !== 'grid'
152
- }, styleProps.className)
153
- }, /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
154
- ref: gridRef,
155
- className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-grid')
156
- }, manager && manager.selectionMode !== 'none' && /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
157
- className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-checkboxWrapper')
158
- }, /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$Checkbox), {
159
- ref: checkboxRef,
160
- isDisabled: isDisabled,
161
- excludeFromTabOrder: true,
162
- isSelected: isSelected,
163
- onChange: onChange,
164
- UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-checkbox'),
165
- isEmphasized: true,
166
- "aria-label": "select"
167
- })), /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$SlotProvider), {
168
- slots: slots
169
- }, children), /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
170
- className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-decoration')
171
- }))));
172
- });
173
- function $643dd8fa80926f94$var$useCard(props) {
174
- let titleId = (0, $8eFIe$useSlotId)();
175
- let descriptionId = (0, $8eFIe$useSlotId)();
176
- let titleProps = (0, $8eFIe$useMemo)(()=>({
177
- id: titleId
178
- }), [
179
- titleId
180
- ]);
181
- let contentProps = (0, $8eFIe$useMemo)(()=>({
182
- id: descriptionId
183
- }), [
184
- descriptionId
185
- ]);
186
- return {
187
- cardProps: {
188
- ...(0, $8eFIe$filterDOMProps)(props),
189
- 'aria-labelledby': titleId,
190
- 'aria-describedby': descriptionId,
191
- tabIndex: 0
192
- },
193
- titleProps: titleProps,
194
- contentProps: contentProps
195
- };
196
- }
197
-
198
-
199
- export {$643dd8fa80926f94$export$7a6ccaf429ad93a8 as CardBase};
200
- //# sourceMappingURL=CardBase.module.js.map