@react-spectrum/card 3.0.0-alpha.38 → 3.0.0-alpha.39
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.
- package/dist/CardBase.main.js +3 -6
- package/dist/CardBase.main.js.map +1 -1
- package/dist/CardBase.mjs +3 -6
- package/dist/CardBase.module.js +3 -6
- package/dist/CardBase.module.js.map +1 -1
- package/dist/CardView.main.js +3 -6
- package/dist/CardView.main.js.map +1 -1
- package/dist/CardView.mjs +3 -6
- package/dist/CardView.module.js +3 -6
- package/dist/CardView.module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/dist/{vars.081f4c73.css → vars.02438011.css} +3 -3
- package/dist/{vars.081f4c73.css.map → vars.02438011.css.map} +1 -1
- package/package.json +18 -18
- package/src/CardBase.tsx +5 -8
- package/src/CardView.tsx +5 -8
package/dist/CardBase.main.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
require("./vars.
|
|
1
|
+
require("./vars.02438011.css");
|
|
2
2
|
var $71570f0038472fa2$exports = require("./card_vars_css.main.js");
|
|
3
3
|
var $e57ab98cef2f01a5$exports = require("./CardViewContext.main.js");
|
|
4
4
|
var $1rjnI$reactspectrumcheckbox = require("@react-spectrum/checkbox");
|
|
@@ -39,7 +39,7 @@ $parcel$export(module.exports, "CardBase", () => $7888205ff7de382f$export$7a6cca
|
|
|
39
39
|
|
|
40
40
|
|
|
41
41
|
|
|
42
|
-
|
|
42
|
+
const $7888205ff7de382f$export$7a6ccaf429ad93a8 = /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).forwardRef(function CardBase(props, ref) {
|
|
43
43
|
props = (0, $1rjnI$reactspectrumprovider.useProviderProps)(props);
|
|
44
44
|
let context = (0, $e57ab98cef2f01a5$exports.useCardViewContext)() || {}; // we can call again here, won't change from Card.tsx
|
|
45
45
|
let { state: state } = context;
|
|
@@ -173,7 +173,7 @@ function $7888205ff7de382f$var$CardBase(props, ref) {
|
|
|
173
173
|
}, children), /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).createElement("div", {
|
|
174
174
|
className: (0, $1rjnI$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-Card-decoration')
|
|
175
175
|
}))));
|
|
176
|
-
}
|
|
176
|
+
});
|
|
177
177
|
function $7888205ff7de382f$var$useCard(props) {
|
|
178
178
|
let titleId = (0, $1rjnI$reactariautils.useSlotId)();
|
|
179
179
|
let descriptionId = (0, $1rjnI$reactariautils.useSlotId)();
|
|
@@ -198,9 +198,6 @@ function $7888205ff7de382f$var$useCard(props) {
|
|
|
198
198
|
contentProps: contentProps
|
|
199
199
|
};
|
|
200
200
|
}
|
|
201
|
-
/**
|
|
202
|
-
* TODO: Add description of component here.
|
|
203
|
-
*/ const $7888205ff7de382f$export$7a6ccaf429ad93a8 = /*#__PURE__*/ (0, ($parcel$interopDefault($1rjnI$react))).forwardRef($7888205ff7de382f$var$CardBase);
|
|
204
201
|
|
|
205
202
|
|
|
206
203
|
//# sourceMappingURL=CardBase.main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","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, 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"}
|
|
1
|
+
{"mappings":"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","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, 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 = {},\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"],"names":[],"version":3,"file":"CardBase.main.js.map"}
|
package/dist/CardBase.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./vars.
|
|
1
|
+
import "./vars.02438011.css";
|
|
2
2
|
import $8eFIe$card_vars_cssmodulejs from "./card_vars_css.mjs";
|
|
3
3
|
import {useCardViewContext as $8d180a244893de14$export$fea0b38586ec8f13} from "./CardViewContext.mjs";
|
|
4
4
|
import {Checkbox as $8eFIe$Checkbox} from "@react-spectrum/checkbox";
|
|
@@ -33,7 +33,7 @@ function $parcel$interopDefault(a) {
|
|
|
33
33
|
|
|
34
34
|
|
|
35
35
|
|
|
36
|
-
|
|
36
|
+
const $643dd8fa80926f94$export$7a6ccaf429ad93a8 = /*#__PURE__*/ (0, $8eFIe$react).forwardRef(function CardBase(props, ref) {
|
|
37
37
|
props = (0, $8eFIe$useProviderProps)(props);
|
|
38
38
|
let context = (0, $8d180a244893de14$export$fea0b38586ec8f13)() || {}; // we can call again here, won't change from Card.tsx
|
|
39
39
|
let { state: state } = context;
|
|
@@ -167,7 +167,7 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
|
|
|
167
167
|
}, children), /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
|
|
168
168
|
className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-decoration')
|
|
169
169
|
}))));
|
|
170
|
-
}
|
|
170
|
+
});
|
|
171
171
|
function $643dd8fa80926f94$var$useCard(props) {
|
|
172
172
|
let titleId = (0, $8eFIe$useSlotId)();
|
|
173
173
|
let descriptionId = (0, $8eFIe$useSlotId)();
|
|
@@ -192,9 +192,6 @@ function $643dd8fa80926f94$var$useCard(props) {
|
|
|
192
192
|
contentProps: contentProps
|
|
193
193
|
};
|
|
194
194
|
}
|
|
195
|
-
/**
|
|
196
|
-
* TODO: Add description of component here.
|
|
197
|
-
*/ const $643dd8fa80926f94$export$7a6ccaf429ad93a8 = /*#__PURE__*/ (0, $8eFIe$react).forwardRef($643dd8fa80926f94$var$CardBase);
|
|
198
195
|
|
|
199
196
|
|
|
200
197
|
export {$643dd8fa80926f94$export$7a6ccaf429ad93a8 as CardBase};
|
package/dist/CardBase.module.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./vars.
|
|
1
|
+
import "./vars.02438011.css";
|
|
2
2
|
import $8eFIe$card_vars_cssmodulejs from "./card_vars_css.module.js";
|
|
3
3
|
import {useCardViewContext as $8d180a244893de14$export$fea0b38586ec8f13} from "./CardViewContext.module.js";
|
|
4
4
|
import {Checkbox as $8eFIe$Checkbox} from "@react-spectrum/checkbox";
|
|
@@ -33,7 +33,7 @@ function $parcel$interopDefault(a) {
|
|
|
33
33
|
|
|
34
34
|
|
|
35
35
|
|
|
36
|
-
|
|
36
|
+
const $643dd8fa80926f94$export$7a6ccaf429ad93a8 = /*#__PURE__*/ (0, $8eFIe$react).forwardRef(function CardBase(props, ref) {
|
|
37
37
|
props = (0, $8eFIe$useProviderProps)(props);
|
|
38
38
|
let context = (0, $8d180a244893de14$export$fea0b38586ec8f13)() || {}; // we can call again here, won't change from Card.tsx
|
|
39
39
|
let { state: state } = context;
|
|
@@ -167,7 +167,7 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
|
|
|
167
167
|
}, children), /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
|
|
168
168
|
className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-decoration')
|
|
169
169
|
}))));
|
|
170
|
-
}
|
|
170
|
+
});
|
|
171
171
|
function $643dd8fa80926f94$var$useCard(props) {
|
|
172
172
|
let titleId = (0, $8eFIe$useSlotId)();
|
|
173
173
|
let descriptionId = (0, $8eFIe$useSlotId)();
|
|
@@ -192,9 +192,6 @@ function $643dd8fa80926f94$var$useCard(props) {
|
|
|
192
192
|
contentProps: contentProps
|
|
193
193
|
};
|
|
194
194
|
}
|
|
195
|
-
/**
|
|
196
|
-
* TODO: Add description of component here.
|
|
197
|
-
*/ const $643dd8fa80926f94$export$7a6ccaf429ad93a8 = /*#__PURE__*/ (0, $8eFIe$react).forwardRef($643dd8fa80926f94$var$CardBase);
|
|
198
195
|
|
|
199
196
|
|
|
200
197
|
export {$643dd8fa80926f94$export$7a6ccaf429ad93a8 as CardBase};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","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, 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.module.js.map"}
|
|
1
|
+
{"mappings":"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","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, 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 = {},\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"],"names":[],"version":3,"file":"CardBase.module.js.map"}
|
package/dist/CardView.main.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var $7888205ff7de382f$exports = require("./CardBase.main.js");
|
|
2
2
|
var $e57ab98cef2f01a5$exports = require("./CardViewContext.main.js");
|
|
3
3
|
var $85c597beff94758b$exports = require("./intlStrings.main.js");
|
|
4
|
-
require("./vars.
|
|
4
|
+
require("./vars.02438011.css");
|
|
5
5
|
var $71570f0038472fa2$exports = require("./card_vars_css.main.js");
|
|
6
6
|
var $kFdxB$reactspectrumutils = require("@react-spectrum/utils");
|
|
7
7
|
var $kFdxB$reactstatelygrid = require("@react-stately/grid");
|
|
@@ -49,7 +49,7 @@ $parcel$export(module.exports, "CardView", () => $514a55f6d91f25ef$export$7e52c8
|
|
|
49
49
|
|
|
50
50
|
|
|
51
51
|
|
|
52
|
-
|
|
52
|
+
const $514a55f6d91f25ef$export$7e52c821f7b6f422 = /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).forwardRef(function CardView(props, ref) {
|
|
53
53
|
let { scale: scale } = (0, $kFdxB$reactspectrumprovider.useProvider)();
|
|
54
54
|
let { styleProps: styleProps } = (0, $kFdxB$reactspectrumutils.useStyleProps)(props);
|
|
55
55
|
let domRef = (0, $kFdxB$reactspectrumutils.useDOMRef)(ref);
|
|
@@ -162,7 +162,7 @@ function $514a55f6d91f25ef$var$CardView(props, ref) {
|
|
|
162
162
|
else if (type === 'loader') return /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement($514a55f6d91f25ef$var$LoadingState, null);
|
|
163
163
|
else if (type === 'placeholder') return /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement($514a55f6d91f25ef$var$EmptyState, null);
|
|
164
164
|
}, [])));
|
|
165
|
-
}
|
|
165
|
+
});
|
|
166
166
|
function $514a55f6d91f25ef$var$LoadingState() {
|
|
167
167
|
let { state: state } = (0, $e57ab98cef2f01a5$exports.useCardViewContext)();
|
|
168
168
|
let stringFormatter = (0, $kFdxB$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($85c597beff94758b$exports))), '@react-spectrum/card');
|
|
@@ -233,9 +233,6 @@ function $514a55f6d91f25ef$var$InternalCard(props) {
|
|
|
233
233
|
layout: layoutType
|
|
234
234
|
}, item.rendered));
|
|
235
235
|
}
|
|
236
|
-
/**
|
|
237
|
-
* TODO: Add description of component here.
|
|
238
|
-
*/ const $514a55f6d91f25ef$export$7e52c821f7b6f422 = /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).forwardRef($514a55f6d91f25ef$var$CardView);
|
|
239
236
|
|
|
240
237
|
|
|
241
238
|
//# sourceMappingURL=CardView.main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/card/src/CardView.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 {CardBase} from './CardBase';\nimport {CardViewContext, useCardViewContext} from './CardViewContext';\nimport {classNames, useDOMRef, useStyleProps, useUnwrapDOMRef} from '@react-spectrum/utils';\nimport {DOMRef, DOMRefValue, Node} from '@react-types/shared';\nimport {GridCollection, useGridState} from '@react-stately/grid';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from '@react-aria/utils';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {ReactElement, ReactNode, useCallback, useMemo, useRef} from 'react';\nimport {ReusableView} from '@react-stately/virtualizer';\nimport {SpectrumCardViewProps} from '@react-types/card';\nimport styles from '@adobe/spectrum-css-temp/components/card/vars.css';\nimport {useCollator, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useGrid, useGridCell, useGridRow} from '@react-aria/grid';\nimport {useListState} from '@react-stately/list';\nimport {useProvider} from '@react-spectrum/provider';\nimport {Virtualizer, VirtualizerItem} from '@react-aria/virtualizer';\n\nfunction CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n let {scale} = useProvider();\n let {styleProps} = useStyleProps(props);\n let domRef = useDOMRef(ref);\n let {\n isQuiet,\n renderEmptyState,\n layout,\n loadingState,\n onLoadMore,\n cardOrientation = 'vertical'\n } = props;\n\n let collator = useCollator({usage: 'search', sensitivity: 'base'});\n let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n let cardViewLayout = useMemo(() => typeof layout === 'function' ? new layout({collator, cardOrientation, scale}) : layout, [layout, collator, cardOrientation, scale]);\n let layoutType = cardViewLayout.layoutType;\n\n let {direction} = useLocale();\n let {collection} = useListState(props);\n\n let gridCollection = useMemo(() => new GridCollection<T>({\n columnCount: 1,\n items: [...collection].map(item => ({\n // Makes the Grid row use the keys the user provides to the cards so that selection change via interactions returns the card keys\n ...item,\n hasChildNodes: true,\n childNodes: [{\n key: `cell-${item.key}`,\n type: 'cell',\n value: null,\n level: 0,\n rendered: null,\n textValue: item.textValue,\n hasChildNodes: false,\n childNodes: []\n }]\n }))\n }), [collection]);\n\n let state = useGridState({\n ...props,\n selectionMode: cardOrientation === 'horizontal' && layoutType === 'grid' ? 'none' : props.selectionMode,\n collection: gridCollection,\n focusMode: 'cell'\n });\n\n cardViewLayout.collection = gridCollection;\n cardViewLayout.disabledKeys = state.disabledKeys;\n\n let {gridProps} = useGrid({\n ...props,\n isVirtualized: true,\n keyboardDelegate: cardViewLayout\n }, state, domRef);\n\n type View = ReusableView<Node<T>, ReactNode>;\n let renderWrapper = useCallback((parent: View, reusableView: View) => (\n <VirtualizerItem\n key={reusableView.key}\n layoutInfo={reusableView.layoutInfo}\n virtualizer={reusableView.virtualizer}\n parent={parent?.layoutInfo}>\n {reusableView.rendered}\n </VirtualizerItem>\n ), []);\n\n let focusedKey = state.selectionManager.focusedKey;\n let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);\n if (focusedItem?.parentKey != null) {\n focusedKey = focusedItem.parentKey;\n }\n\n let persistedKeys = useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);\n\n // TODO: does aria-row count and aria-col count need to be modified? Perhaps aria-col count needs to be omitted\n return (\n <CardViewContext.Provider value={{state, isQuiet, layout: cardViewLayout, cardOrientation, renderEmptyState}}>\n <Virtualizer\n {...gridProps}\n {...styleProps}\n className={classNames(styles, 'spectrum-CardView')}\n ref={domRef}\n persistedKeys={persistedKeys}\n scrollDirection=\"vertical\"\n layout={cardViewLayout}\n collection={gridCollection}\n isLoading={isLoading}\n onLoadMore={onLoadMore}\n layoutOptions={useMemo(() => ({isLoading, direction}), [isLoading, direction])}\n renderWrapper={renderWrapper}\n style={{\n ...styleProps.style,\n scrollPaddingTop: cardViewLayout.margin || 0\n }}>\n {useCallback((type, item) => {\n if (type === 'item') {\n return (\n <InternalCard item={item} />\n );\n } else if (type === 'loader') {\n return <LoadingState />;\n } else if (type === 'placeholder') {\n return <EmptyState />;\n }\n }, [])}\n </Virtualizer>\n </CardViewContext.Provider>\n\n );\n}\n\nfunction LoadingState() {\n let {state} = useCardViewContext();\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/card');\n return (\n <CenteredWrapper>\n <ProgressCircle\n isIndeterminate\n aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')} />\n </CenteredWrapper>\n );\n}\n\nfunction EmptyState() {\n let {renderEmptyState} = useCardViewContext();\n let emptyState = renderEmptyState ? renderEmptyState() : null;\n if (emptyState == null) {\n return null;\n }\n\n return (\n <CenteredWrapper>\n {emptyState}\n </CenteredWrapper>\n );\n}\n\nfunction CenteredWrapper({children}) {\n let {state} = useCardViewContext();\n return (\n <div\n role=\"row\"\n aria-rowindex={state.collection.size + 1}\n className={classNames(styles, 'spectrum-CardView-centeredWrapper')}>\n <div role=\"gridcell\">\n {children}\n </div>\n </div>\n );\n}\n\nfunction InternalCard(props) {\n let {\n item\n } = props;\n let cellNode = [...item.childNodes][0];\n let {state, cardOrientation, isQuiet, layout} = useCardViewContext();\n\n let layoutType = layout.layoutType;\n let rowRef = useRef(undefined);\n let cellRef = useRef<DOMRefValue<HTMLDivElement>>(undefined);\n let unwrappedRef = useUnwrapDOMRef(cellRef);\n\n let {rowProps: gridRowProps} = useGridRow({\n node: item,\n isVirtualized: true\n }, state, rowRef);\n\n let {gridCellProps} = useGridCell({\n node: cellNode,\n focusMode: 'cell'\n }, state, unwrappedRef);\n\n // Prevent space key from scrolling the CardView if triggered on a disabled item or on a Card in a selectionMode=\"none\" CardView.\n let allowsInteraction = state.selectionManager.selectionMode !== 'none';\n let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);\n\n let onKeyDown = (e) => {\n if (e.key === ' ' && isDisabled) {\n e.preventDefault();\n }\n };\n\n let rowProps = mergeProps(\n gridRowProps,\n {onKeyDown}\n );\n\n if (layoutType === 'grid' || layoutType === 'gallery') {\n isQuiet = true;\n }\n\n if (layoutType !== 'grid') {\n cardOrientation = 'vertical';\n }\n\n // We don't want to focus the checkbox (or any other focusable elements) within the Card\n // when pressing the arrow keys so we delete the key down handler here. Arrow key navigation between\n // the cards in the CardView is handled by useGrid => useSelectableCollection instead.\n delete gridCellProps.onKeyDownCapture;\n return (\n <div {...rowProps} ref={rowRef} className={classNames(styles, 'spectrum-CardView-row')}>\n <CardBase\n ref={cellRef}\n articleProps={gridCellProps}\n isQuiet={isQuiet}\n orientation={cardOrientation}\n item={item}\n layout={layoutType}>\n {item.rendered}\n </CardBase>\n </div>\n );\n}\n\n/**\n * TODO: Add description of component here.\n */\nconst _CardView = React.forwardRef(CardView) as <T>(props: SpectrumCardViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_CardView as CardView};\n"],"names":[],"version":3,"file":"CardView.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/card/src/CardView.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 {CardBase} from './CardBase';\nimport {CardViewContext, useCardViewContext} from './CardViewContext';\nimport {classNames, useDOMRef, useStyleProps, useUnwrapDOMRef} from '@react-spectrum/utils';\nimport {DOMRef, DOMRefValue, Node} from '@react-types/shared';\nimport {GridCollection, useGridState} from '@react-stately/grid';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from '@react-aria/utils';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {ReactElement, ReactNode, useCallback, useMemo, useRef} from 'react';\nimport {ReusableView} from '@react-stately/virtualizer';\nimport {SpectrumCardViewProps} from '@react-types/card';\nimport styles from '@adobe/spectrum-css-temp/components/card/vars.css';\nimport {useCollator, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useGrid, useGridCell, useGridRow} from '@react-aria/grid';\nimport {useListState} from '@react-stately/list';\nimport {useProvider} from '@react-spectrum/provider';\nimport {Virtualizer, VirtualizerItem} from '@react-aria/virtualizer';\n\n/**\n * TODO: Add description of component here.\n */\nexport const CardView = React.forwardRef(function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n let {scale} = useProvider();\n let {styleProps} = useStyleProps(props);\n let domRef = useDOMRef(ref);\n let {\n isQuiet,\n renderEmptyState,\n layout,\n loadingState,\n onLoadMore,\n cardOrientation = 'vertical'\n } = props;\n\n let collator = useCollator({usage: 'search', sensitivity: 'base'});\n let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n let cardViewLayout = useMemo(() => typeof layout === 'function' ? new layout({collator, cardOrientation, scale}) : layout, [layout, collator, cardOrientation, scale]);\n let layoutType = cardViewLayout.layoutType;\n\n let {direction} = useLocale();\n let {collection} = useListState(props);\n\n let gridCollection = useMemo(() => new GridCollection<T>({\n columnCount: 1,\n items: [...collection].map(item => ({\n // Makes the Grid row use the keys the user provides to the cards so that selection change via interactions returns the card keys\n ...item,\n hasChildNodes: true,\n childNodes: [{\n key: `cell-${item.key}`,\n type: 'cell',\n value: null,\n level: 0,\n rendered: null,\n textValue: item.textValue,\n hasChildNodes: false,\n childNodes: []\n }]\n }))\n }), [collection]);\n\n let state = useGridState({\n ...props,\n selectionMode: cardOrientation === 'horizontal' && layoutType === 'grid' ? 'none' : props.selectionMode,\n collection: gridCollection,\n focusMode: 'cell'\n });\n\n cardViewLayout.collection = gridCollection;\n cardViewLayout.disabledKeys = state.disabledKeys;\n\n let {gridProps} = useGrid({\n ...props,\n isVirtualized: true,\n keyboardDelegate: cardViewLayout\n }, state, domRef);\n\n type View = ReusableView<Node<T>, ReactNode>;\n let renderWrapper = useCallback((parent: View, reusableView: View) => (\n <VirtualizerItem\n key={reusableView.key}\n layoutInfo={reusableView.layoutInfo}\n virtualizer={reusableView.virtualizer}\n parent={parent?.layoutInfo}>\n {reusableView.rendered}\n </VirtualizerItem>\n ), []);\n\n let focusedKey = state.selectionManager.focusedKey;\n let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);\n if (focusedItem?.parentKey != null) {\n focusedKey = focusedItem.parentKey;\n }\n\n let persistedKeys = useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);\n\n // TODO: does aria-row count and aria-col count need to be modified? Perhaps aria-col count needs to be omitted\n return (\n <CardViewContext.Provider value={{state, isQuiet, layout: cardViewLayout, cardOrientation, renderEmptyState}}>\n <Virtualizer\n {...gridProps}\n {...styleProps}\n className={classNames(styles, 'spectrum-CardView')}\n ref={domRef}\n persistedKeys={persistedKeys}\n scrollDirection=\"vertical\"\n layout={cardViewLayout}\n collection={gridCollection}\n isLoading={isLoading}\n onLoadMore={onLoadMore}\n layoutOptions={useMemo(() => ({isLoading, direction}), [isLoading, direction])}\n renderWrapper={renderWrapper}\n style={{\n ...styleProps.style,\n scrollPaddingTop: cardViewLayout.margin || 0\n }}>\n {useCallback((type, item) => {\n if (type === 'item') {\n return (\n <InternalCard item={item} />\n );\n } else if (type === 'loader') {\n return <LoadingState />;\n } else if (type === 'placeholder') {\n return <EmptyState />;\n }\n }, [])}\n </Virtualizer>\n </CardViewContext.Provider>\n\n );\n}) as <T>(props: SpectrumCardViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\nfunction LoadingState() {\n let {state} = useCardViewContext();\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/card');\n return (\n <CenteredWrapper>\n <ProgressCircle\n isIndeterminate\n aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')} />\n </CenteredWrapper>\n );\n}\n\nfunction EmptyState() {\n let {renderEmptyState} = useCardViewContext();\n let emptyState = renderEmptyState ? renderEmptyState() : null;\n if (emptyState == null) {\n return null;\n }\n\n return (\n <CenteredWrapper>\n {emptyState}\n </CenteredWrapper>\n );\n}\n\nfunction CenteredWrapper({children}) {\n let {state} = useCardViewContext();\n return (\n <div\n role=\"row\"\n aria-rowindex={state.collection.size + 1}\n className={classNames(styles, 'spectrum-CardView-centeredWrapper')}>\n <div role=\"gridcell\">\n {children}\n </div>\n </div>\n );\n}\n\nfunction InternalCard(props) {\n let {\n item\n } = props;\n let cellNode = [...item.childNodes][0];\n let {state, cardOrientation, isQuiet, layout} = useCardViewContext();\n\n let layoutType = layout.layoutType;\n let rowRef = useRef(undefined);\n let cellRef = useRef<DOMRefValue<HTMLDivElement>>(undefined);\n let unwrappedRef = useUnwrapDOMRef(cellRef);\n\n let {rowProps: gridRowProps} = useGridRow({\n node: item,\n isVirtualized: true\n }, state, rowRef);\n\n let {gridCellProps} = useGridCell({\n node: cellNode,\n focusMode: 'cell'\n }, state, unwrappedRef);\n\n // Prevent space key from scrolling the CardView if triggered on a disabled item or on a Card in a selectionMode=\"none\" CardView.\n let allowsInteraction = state.selectionManager.selectionMode !== 'none';\n let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);\n\n let onKeyDown = (e) => {\n if (e.key === ' ' && isDisabled) {\n e.preventDefault();\n }\n };\n\n let rowProps = mergeProps(\n gridRowProps,\n {onKeyDown}\n );\n\n if (layoutType === 'grid' || layoutType === 'gallery') {\n isQuiet = true;\n }\n\n if (layoutType !== 'grid') {\n cardOrientation = 'vertical';\n }\n\n // We don't want to focus the checkbox (or any other focusable elements) within the Card\n // when pressing the arrow keys so we delete the key down handler here. Arrow key navigation between\n // the cards in the CardView is handled by useGrid => useSelectableCollection instead.\n delete gridCellProps.onKeyDownCapture;\n return (\n <div {...rowProps} ref={rowRef} className={classNames(styles, 'spectrum-CardView-row')}>\n <CardBase\n ref={cellRef}\n articleProps={gridCellProps}\n isQuiet={isQuiet}\n orientation={cardOrientation}\n item={item}\n layout={layoutType}>\n {item.rendered}\n </CardBase>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"CardView.main.js.map"}
|
package/dist/CardView.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {CardBase as $643dd8fa80926f94$export$7a6ccaf429ad93a8} from "./CardBase.mjs";
|
|
2
2
|
import {CardViewContext as $8d180a244893de14$export$64992ac69f286e5c, useCardViewContext as $8d180a244893de14$export$fea0b38586ec8f13} from "./CardViewContext.mjs";
|
|
3
3
|
import $iOsT7$intlStringsmodulejs from "./intlStrings.mjs";
|
|
4
|
-
import "./vars.
|
|
4
|
+
import "./vars.02438011.css";
|
|
5
5
|
import $iOsT7$card_vars_cssmodulejs from "./card_vars_css.mjs";
|
|
6
6
|
import {useStyleProps as $iOsT7$useStyleProps, useDOMRef as $iOsT7$useDOMRef, classNames as $iOsT7$classNames, useUnwrapDOMRef as $iOsT7$useUnwrapDOMRef} from "@react-spectrum/utils";
|
|
7
7
|
import {GridCollection as $iOsT7$GridCollection, useGridState as $iOsT7$useGridState} from "@react-stately/grid";
|
|
@@ -43,7 +43,7 @@ function $parcel$interopDefault(a) {
|
|
|
43
43
|
|
|
44
44
|
|
|
45
45
|
|
|
46
|
-
|
|
46
|
+
const $81a52da995c19652$export$7e52c821f7b6f422 = /*#__PURE__*/ (0, $iOsT7$react).forwardRef(function CardView(props, ref) {
|
|
47
47
|
let { scale: scale } = (0, $iOsT7$useProvider)();
|
|
48
48
|
let { styleProps: styleProps } = (0, $iOsT7$useStyleProps)(props);
|
|
49
49
|
let domRef = (0, $iOsT7$useDOMRef)(ref);
|
|
@@ -156,7 +156,7 @@ function $81a52da995c19652$var$CardView(props, ref) {
|
|
|
156
156
|
else if (type === 'loader') return /*#__PURE__*/ (0, $iOsT7$react).createElement($81a52da995c19652$var$LoadingState, null);
|
|
157
157
|
else if (type === 'placeholder') return /*#__PURE__*/ (0, $iOsT7$react).createElement($81a52da995c19652$var$EmptyState, null);
|
|
158
158
|
}, [])));
|
|
159
|
-
}
|
|
159
|
+
});
|
|
160
160
|
function $81a52da995c19652$var$LoadingState() {
|
|
161
161
|
let { state: state } = (0, $8d180a244893de14$export$fea0b38586ec8f13)();
|
|
162
162
|
let stringFormatter = (0, $iOsT7$useLocalizedStringFormatter)((0, ($parcel$interopDefault($iOsT7$intlStringsmodulejs))), '@react-spectrum/card');
|
|
@@ -227,9 +227,6 @@ function $81a52da995c19652$var$InternalCard(props) {
|
|
|
227
227
|
layout: layoutType
|
|
228
228
|
}, item.rendered));
|
|
229
229
|
}
|
|
230
|
-
/**
|
|
231
|
-
* TODO: Add description of component here.
|
|
232
|
-
*/ const $81a52da995c19652$export$7e52c821f7b6f422 = /*#__PURE__*/ (0, $iOsT7$react).forwardRef($81a52da995c19652$var$CardView);
|
|
233
230
|
|
|
234
231
|
|
|
235
232
|
export {$81a52da995c19652$export$7e52c821f7b6f422 as CardView};
|
package/dist/CardView.module.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {CardBase as $643dd8fa80926f94$export$7a6ccaf429ad93a8} from "./CardBase.module.js";
|
|
2
2
|
import {CardViewContext as $8d180a244893de14$export$64992ac69f286e5c, useCardViewContext as $8d180a244893de14$export$fea0b38586ec8f13} from "./CardViewContext.module.js";
|
|
3
3
|
import $iOsT7$intlStringsmodulejs from "./intlStrings.module.js";
|
|
4
|
-
import "./vars.
|
|
4
|
+
import "./vars.02438011.css";
|
|
5
5
|
import $iOsT7$card_vars_cssmodulejs from "./card_vars_css.module.js";
|
|
6
6
|
import {useStyleProps as $iOsT7$useStyleProps, useDOMRef as $iOsT7$useDOMRef, classNames as $iOsT7$classNames, useUnwrapDOMRef as $iOsT7$useUnwrapDOMRef} from "@react-spectrum/utils";
|
|
7
7
|
import {GridCollection as $iOsT7$GridCollection, useGridState as $iOsT7$useGridState} from "@react-stately/grid";
|
|
@@ -43,7 +43,7 @@ function $parcel$interopDefault(a) {
|
|
|
43
43
|
|
|
44
44
|
|
|
45
45
|
|
|
46
|
-
|
|
46
|
+
const $81a52da995c19652$export$7e52c821f7b6f422 = /*#__PURE__*/ (0, $iOsT7$react).forwardRef(function CardView(props, ref) {
|
|
47
47
|
let { scale: scale } = (0, $iOsT7$useProvider)();
|
|
48
48
|
let { styleProps: styleProps } = (0, $iOsT7$useStyleProps)(props);
|
|
49
49
|
let domRef = (0, $iOsT7$useDOMRef)(ref);
|
|
@@ -156,7 +156,7 @@ function $81a52da995c19652$var$CardView(props, ref) {
|
|
|
156
156
|
else if (type === 'loader') return /*#__PURE__*/ (0, $iOsT7$react).createElement($81a52da995c19652$var$LoadingState, null);
|
|
157
157
|
else if (type === 'placeholder') return /*#__PURE__*/ (0, $iOsT7$react).createElement($81a52da995c19652$var$EmptyState, null);
|
|
158
158
|
}, [])));
|
|
159
|
-
}
|
|
159
|
+
});
|
|
160
160
|
function $81a52da995c19652$var$LoadingState() {
|
|
161
161
|
let { state: state } = (0, $8d180a244893de14$export$fea0b38586ec8f13)();
|
|
162
162
|
let stringFormatter = (0, $iOsT7$useLocalizedStringFormatter)((0, ($parcel$interopDefault($iOsT7$intlStringsmodulejs))), '@react-spectrum/card');
|
|
@@ -227,9 +227,6 @@ function $81a52da995c19652$var$InternalCard(props) {
|
|
|
227
227
|
layout: layoutType
|
|
228
228
|
}, item.rendered));
|
|
229
229
|
}
|
|
230
|
-
/**
|
|
231
|
-
* TODO: Add description of component here.
|
|
232
|
-
*/ const $81a52da995c19652$export$7e52c821f7b6f422 = /*#__PURE__*/ (0, $iOsT7$react).forwardRef($81a52da995c19652$var$CardView);
|
|
233
230
|
|
|
234
231
|
|
|
235
232
|
export {$81a52da995c19652$export$7e52c821f7b6f422 as CardView};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/card/src/CardView.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 {CardBase} from './CardBase';\nimport {CardViewContext, useCardViewContext} from './CardViewContext';\nimport {classNames, useDOMRef, useStyleProps, useUnwrapDOMRef} from '@react-spectrum/utils';\nimport {DOMRef, DOMRefValue, Node} from '@react-types/shared';\nimport {GridCollection, useGridState} from '@react-stately/grid';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from '@react-aria/utils';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {ReactElement, ReactNode, useCallback, useMemo, useRef} from 'react';\nimport {ReusableView} from '@react-stately/virtualizer';\nimport {SpectrumCardViewProps} from '@react-types/card';\nimport styles from '@adobe/spectrum-css-temp/components/card/vars.css';\nimport {useCollator, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useGrid, useGridCell, useGridRow} from '@react-aria/grid';\nimport {useListState} from '@react-stately/list';\nimport {useProvider} from '@react-spectrum/provider';\nimport {Virtualizer, VirtualizerItem} from '@react-aria/virtualizer';\n\nfunction CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n let {scale} = useProvider();\n let {styleProps} = useStyleProps(props);\n let domRef = useDOMRef(ref);\n let {\n isQuiet,\n renderEmptyState,\n layout,\n loadingState,\n onLoadMore,\n cardOrientation = 'vertical'\n } = props;\n\n let collator = useCollator({usage: 'search', sensitivity: 'base'});\n let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n let cardViewLayout = useMemo(() => typeof layout === 'function' ? new layout({collator, cardOrientation, scale}) : layout, [layout, collator, cardOrientation, scale]);\n let layoutType = cardViewLayout.layoutType;\n\n let {direction} = useLocale();\n let {collection} = useListState(props);\n\n let gridCollection = useMemo(() => new GridCollection<T>({\n columnCount: 1,\n items: [...collection].map(item => ({\n // Makes the Grid row use the keys the user provides to the cards so that selection change via interactions returns the card keys\n ...item,\n hasChildNodes: true,\n childNodes: [{\n key: `cell-${item.key}`,\n type: 'cell',\n value: null,\n level: 0,\n rendered: null,\n textValue: item.textValue,\n hasChildNodes: false,\n childNodes: []\n }]\n }))\n }), [collection]);\n\n let state = useGridState({\n ...props,\n selectionMode: cardOrientation === 'horizontal' && layoutType === 'grid' ? 'none' : props.selectionMode,\n collection: gridCollection,\n focusMode: 'cell'\n });\n\n cardViewLayout.collection = gridCollection;\n cardViewLayout.disabledKeys = state.disabledKeys;\n\n let {gridProps} = useGrid({\n ...props,\n isVirtualized: true,\n keyboardDelegate: cardViewLayout\n }, state, domRef);\n\n type View = ReusableView<Node<T>, ReactNode>;\n let renderWrapper = useCallback((parent: View, reusableView: View) => (\n <VirtualizerItem\n key={reusableView.key}\n layoutInfo={reusableView.layoutInfo}\n virtualizer={reusableView.virtualizer}\n parent={parent?.layoutInfo}>\n {reusableView.rendered}\n </VirtualizerItem>\n ), []);\n\n let focusedKey = state.selectionManager.focusedKey;\n let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);\n if (focusedItem?.parentKey != null) {\n focusedKey = focusedItem.parentKey;\n }\n\n let persistedKeys = useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);\n\n // TODO: does aria-row count and aria-col count need to be modified? Perhaps aria-col count needs to be omitted\n return (\n <CardViewContext.Provider value={{state, isQuiet, layout: cardViewLayout, cardOrientation, renderEmptyState}}>\n <Virtualizer\n {...gridProps}\n {...styleProps}\n className={classNames(styles, 'spectrum-CardView')}\n ref={domRef}\n persistedKeys={persistedKeys}\n scrollDirection=\"vertical\"\n layout={cardViewLayout}\n collection={gridCollection}\n isLoading={isLoading}\n onLoadMore={onLoadMore}\n layoutOptions={useMemo(() => ({isLoading, direction}), [isLoading, direction])}\n renderWrapper={renderWrapper}\n style={{\n ...styleProps.style,\n scrollPaddingTop: cardViewLayout.margin || 0\n }}>\n {useCallback((type, item) => {\n if (type === 'item') {\n return (\n <InternalCard item={item} />\n );\n } else if (type === 'loader') {\n return <LoadingState />;\n } else if (type === 'placeholder') {\n return <EmptyState />;\n }\n }, [])}\n </Virtualizer>\n </CardViewContext.Provider>\n\n );\n}\n\nfunction LoadingState() {\n let {state} = useCardViewContext();\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/card');\n return (\n <CenteredWrapper>\n <ProgressCircle\n isIndeterminate\n aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')} />\n </CenteredWrapper>\n );\n}\n\nfunction EmptyState() {\n let {renderEmptyState} = useCardViewContext();\n let emptyState = renderEmptyState ? renderEmptyState() : null;\n if (emptyState == null) {\n return null;\n }\n\n return (\n <CenteredWrapper>\n {emptyState}\n </CenteredWrapper>\n );\n}\n\nfunction CenteredWrapper({children}) {\n let {state} = useCardViewContext();\n return (\n <div\n role=\"row\"\n aria-rowindex={state.collection.size + 1}\n className={classNames(styles, 'spectrum-CardView-centeredWrapper')}>\n <div role=\"gridcell\">\n {children}\n </div>\n </div>\n );\n}\n\nfunction InternalCard(props) {\n let {\n item\n } = props;\n let cellNode = [...item.childNodes][0];\n let {state, cardOrientation, isQuiet, layout} = useCardViewContext();\n\n let layoutType = layout.layoutType;\n let rowRef = useRef(undefined);\n let cellRef = useRef<DOMRefValue<HTMLDivElement>>(undefined);\n let unwrappedRef = useUnwrapDOMRef(cellRef);\n\n let {rowProps: gridRowProps} = useGridRow({\n node: item,\n isVirtualized: true\n }, state, rowRef);\n\n let {gridCellProps} = useGridCell({\n node: cellNode,\n focusMode: 'cell'\n }, state, unwrappedRef);\n\n // Prevent space key from scrolling the CardView if triggered on a disabled item or on a Card in a selectionMode=\"none\" CardView.\n let allowsInteraction = state.selectionManager.selectionMode !== 'none';\n let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);\n\n let onKeyDown = (e) => {\n if (e.key === ' ' && isDisabled) {\n e.preventDefault();\n }\n };\n\n let rowProps = mergeProps(\n gridRowProps,\n {onKeyDown}\n );\n\n if (layoutType === 'grid' || layoutType === 'gallery') {\n isQuiet = true;\n }\n\n if (layoutType !== 'grid') {\n cardOrientation = 'vertical';\n }\n\n // We don't want to focus the checkbox (or any other focusable elements) within the Card\n // when pressing the arrow keys so we delete the key down handler here. Arrow key navigation between\n // the cards in the CardView is handled by useGrid => useSelectableCollection instead.\n delete gridCellProps.onKeyDownCapture;\n return (\n <div {...rowProps} ref={rowRef} className={classNames(styles, 'spectrum-CardView-row')}>\n <CardBase\n ref={cellRef}\n articleProps={gridCellProps}\n isQuiet={isQuiet}\n orientation={cardOrientation}\n item={item}\n layout={layoutType}>\n {item.rendered}\n </CardBase>\n </div>\n );\n}\n\n/**\n * TODO: Add description of component here.\n */\nconst _CardView = React.forwardRef(CardView) as <T>(props: SpectrumCardViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_CardView as CardView};\n"],"names":[],"version":3,"file":"CardView.module.js.map"}
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,cAAc;AACd;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAwBM,MAAM,0DAAW,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,SAA2B,KAA+B,EAAE,GAA2B;IACvI,IAAI,SAAC,KAAK,EAAC,GAAG,CAAA,GAAA,kBAAU;IACxB,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IACjC,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,WACF,OAAO,oBACP,gBAAgB,UAChB,MAAM,gBACN,YAAY,cACZ,UAAU,mBACV,kBAAkB,YACnB,GAAG;IAEJ,IAAI,WAAW,CAAA,GAAA,kBAAU,EAAE;QAAC,OAAO;QAAU,aAAa;IAAM;IAChE,IAAI,YAAY,iBAAiB,aAAa,iBAAiB;IAC/D,IAAI,iBAAiB,CAAA,GAAA,cAAM,EAAE,IAAM,OAAO,WAAW,aAAa,IAAI,OAAO;sBAAC;6BAAU;mBAAiB;QAAK,KAAK,QAAQ;QAAC;QAAQ;QAAU;QAAiB;KAAM;IACrK,IAAI,aAAa,eAAe,UAAU;IAE1C,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAC1B,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;IAEhC,IAAI,iBAAiB,CAAA,GAAA,cAAM,EAAE,IAAM,IAAI,CAAA,GAAA,qBAAa,EAAK;YACvD,aAAa;YACb,OAAO;mBAAI;aAAW,CAAC,GAAG,CAAC,CAAA,OAAS,CAAA;oBAClC,iIAAiI;oBACjI,GAAG,IAAI;oBACP,eAAe;oBACf,YAAY;wBAAC;4BACX,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,EAAE;4BACvB,MAAM;4BACN,OAAO;4BACP,OAAO;4BACP,UAAU;4BACV,WAAW,KAAK,SAAS;4BACzB,eAAe;4BACf,YAAY,EAAE;wBAChB;qBAAE;gBACJ,CAAA;QACF,IAAI;QAAC;KAAW;IAEhB,IAAI,QAAQ,CAAA,GAAA,mBAAW,EAAE;QACvB,GAAG,KAAK;QACR,eAAe,oBAAoB,gBAAgB,eAAe,SAAS,SAAS,MAAM,aAAa;QACvG,YAAY;QACZ,WAAW;IACb;IAEA,eAAe,UAAU,GAAG;IAC5B,eAAe,YAAY,GAAG,MAAM,YAAY;IAEhD,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,cAAM,EAAE;QACxB,GAAG,KAAK;QACR,eAAe;QACf,kBAAkB;IACpB,GAAG,OAAO;IAGV,IAAI,gBAAgB,CAAA,GAAA,kBAAU,EAAE,CAAC,QAAc,6BAC7C,gCAAC,CAAA,GAAA,sBAAc;YACb,KAAK,aAAa,GAAG;YACrB,YAAY,aAAa,UAAU;YACnC,aAAa,aAAa,WAAW;YACrC,MAAM,EAAE,mBAAA,6BAAA,OAAQ,UAAU;WACzB,aAAa,QAAQ,GAEvB,EAAE;IAEL,IAAI,aAAa,MAAM,gBAAgB,CAAC,UAAU;IAClD,IAAI,cAAc,eAAe,OAAO,CAAC,MAAM,gBAAgB,CAAC,UAAU;IAC1E,IAAI,CAAA,wBAAA,kCAAA,YAAa,SAAS,KAAI,MAC5B,aAAa,YAAY,SAAS;IAGpC,IAAI,gBAAgB,CAAA,GAAA,cAAM,EAAE,IAAM,cAAc,OAAO,IAAI,IAAI;YAAC;SAAW,IAAI,MAAM;QAAC;KAAW;IAEjG,+GAA+G;IAC/G,qBACE,gCAAC,CAAA,GAAA,yCAAc,EAAE,QAAQ;QAAC,OAAO;mBAAC;qBAAO;YAAS,QAAQ;6BAAgB;8BAAiB;QAAgB;qBACzG,gCAAC,CAAA,GAAA,kBAAU;QACR,GAAG,SAAS;QACZ,GAAG,UAAU;QACd,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;QAC9B,KAAK;QACL,eAAe;QACf,iBAAgB;QAChB,QAAQ;QACR,YAAY;QACZ,WAAW;QACX,YAAY;QACZ,eAAe,CAAA,GAAA,cAAM,EAAE,IAAO,CAAA;2BAAC;2BAAW;YAAS,CAAA,GAAI;YAAC;YAAW;SAAU;QAC7E,eAAe;QACf,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,kBAAkB,eAAe,MAAM,IAAI;QAC7C;OACC,CAAA,GAAA,kBAAU,EAAE,CAAC,MAAM;QAClB,IAAI,SAAS,QACX,qBACE,gCAAC;YAAa,MAAM;;aAEjB,IAAI,SAAS,UAClB,qBAAO,gCAAC;aACH,IAAI,SAAS,eAClB,qBAAO,gCAAC;IAEZ,GAAG,EAAE;AAKb;AAEA,SAAS;IACP,IAAI,SAAC,KAAK,EAAC,GAAG,CAAA,GAAA,yCAAiB;IAC/B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAChE,qBACE,gCAAC,2DACC,gCAAC,CAAA,GAAA,qBAAa;QACZ,iBAAA;QACA,cAAY,MAAM,UAAU,CAAC,IAAI,GAAG,IAAI,gBAAgB,MAAM,CAAC,iBAAiB,gBAAgB,MAAM,CAAC;;AAG/G;AAEA,SAAS;IACP,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,yCAAiB;IAC1C,IAAI,aAAa,mBAAmB,qBAAqB;IACzD,IAAI,cAAc,MAChB,OAAO;IAGT,qBACE,gCAAC,6CACE;AAGP;AAEA,SAAS,sCAAgB,YAAC,QAAQ,EAAC;IACjC,IAAI,SAAC,KAAK,EAAC,GAAG,CAAA,GAAA,yCAAiB;IAC/B,qBACE,gCAAC;QACC,MAAK;QACL,iBAAe,MAAM,UAAU,CAAC,IAAI,GAAG;QACvC,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;qBAC9B,gCAAC;QAAI,MAAK;OACP;AAIT;AAEA,SAAS,mCAAa,KAAK;IACzB,IAAI,QACF,IAAI,EACL,GAAG;IACJ,IAAI,WAAW;WAAI,KAAK,UAAU;KAAC,CAAC,EAAE;IACtC,IAAI,SAAC,KAAK,mBAAE,eAAe,WAAE,OAAO,UAAE,MAAM,EAAC,GAAG,CAAA,GAAA,yCAAiB;IAEjE,IAAI,aAAa,OAAO,UAAU;IAClC,IAAI,SAAS,CAAA,GAAA,aAAK,EAAE;IACpB,IAAI,UAAU,CAAA,GAAA,aAAK,EAA+B;IAClD,IAAI,eAAe,CAAA,GAAA,sBAAc,EAAE;IAEnC,IAAI,EAAC,UAAU,YAAY,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;QACxC,MAAM;QACN,eAAe;IACjB,GAAG,OAAO;IAEV,IAAI,iBAAC,aAAa,EAAC,GAAG,CAAA,GAAA,kBAAU,EAAE;QAChC,MAAM;QACN,WAAW;IACb,GAAG,OAAO;IAEV,iIAAiI;IACjI,IAAI,oBAAoB,MAAM,gBAAgB,CAAC,aAAa,KAAK;IACjE,IAAI,aAAa,CAAC,qBAAqB,MAAM,YAAY,CAAC,GAAG,CAAC,KAAK,GAAG;IAEtE,IAAI,YAAY,CAAC;QACf,IAAI,EAAE,GAAG,KAAK,OAAO,YACnB,EAAE,cAAc;IAEpB;IAEA,IAAI,WAAW,CAAA,GAAA,iBAAS,EACtB,cACA;mBAAC;IAAS;IAGZ,IAAI,eAAe,UAAU,eAAe,WAC1C,UAAU;IAGZ,IAAI,eAAe,QACjB,kBAAkB;IAGpB,wFAAwF;IACxF,oGAAoG;IACpG,sFAAsF;IACtF,OAAO,cAAc,gBAAgB;IACrC,qBACE,gCAAC;QAAK,GAAG,QAAQ;QAAE,KAAK;QAAQ,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;qBAC5D,gCAAC,CAAA,GAAA,yCAAO;QACN,KAAK;QACL,cAAc;QACd,SAAS;QACT,aAAa;QACb,MAAM;QACN,QAAQ;OACP,KAAK,QAAQ;AAItB","sources":["packages/@react-spectrum/card/src/CardView.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 {CardBase} from './CardBase';\nimport {CardViewContext, useCardViewContext} from './CardViewContext';\nimport {classNames, useDOMRef, useStyleProps, useUnwrapDOMRef} from '@react-spectrum/utils';\nimport {DOMRef, DOMRefValue, Node} from '@react-types/shared';\nimport {GridCollection, useGridState} from '@react-stately/grid';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from '@react-aria/utils';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {ReactElement, ReactNode, useCallback, useMemo, useRef} from 'react';\nimport {ReusableView} from '@react-stately/virtualizer';\nimport {SpectrumCardViewProps} from '@react-types/card';\nimport styles from '@adobe/spectrum-css-temp/components/card/vars.css';\nimport {useCollator, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useGrid, useGridCell, useGridRow} from '@react-aria/grid';\nimport {useListState} from '@react-stately/list';\nimport {useProvider} from '@react-spectrum/provider';\nimport {Virtualizer, VirtualizerItem} from '@react-aria/virtualizer';\n\n/**\n * TODO: Add description of component here.\n */\nexport const CardView = React.forwardRef(function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n let {scale} = useProvider();\n let {styleProps} = useStyleProps(props);\n let domRef = useDOMRef(ref);\n let {\n isQuiet,\n renderEmptyState,\n layout,\n loadingState,\n onLoadMore,\n cardOrientation = 'vertical'\n } = props;\n\n let collator = useCollator({usage: 'search', sensitivity: 'base'});\n let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';\n let cardViewLayout = useMemo(() => typeof layout === 'function' ? new layout({collator, cardOrientation, scale}) : layout, [layout, collator, cardOrientation, scale]);\n let layoutType = cardViewLayout.layoutType;\n\n let {direction} = useLocale();\n let {collection} = useListState(props);\n\n let gridCollection = useMemo(() => new GridCollection<T>({\n columnCount: 1,\n items: [...collection].map(item => ({\n // Makes the Grid row use the keys the user provides to the cards so that selection change via interactions returns the card keys\n ...item,\n hasChildNodes: true,\n childNodes: [{\n key: `cell-${item.key}`,\n type: 'cell',\n value: null,\n level: 0,\n rendered: null,\n textValue: item.textValue,\n hasChildNodes: false,\n childNodes: []\n }]\n }))\n }), [collection]);\n\n let state = useGridState({\n ...props,\n selectionMode: cardOrientation === 'horizontal' && layoutType === 'grid' ? 'none' : props.selectionMode,\n collection: gridCollection,\n focusMode: 'cell'\n });\n\n cardViewLayout.collection = gridCollection;\n cardViewLayout.disabledKeys = state.disabledKeys;\n\n let {gridProps} = useGrid({\n ...props,\n isVirtualized: true,\n keyboardDelegate: cardViewLayout\n }, state, domRef);\n\n type View = ReusableView<Node<T>, ReactNode>;\n let renderWrapper = useCallback((parent: View, reusableView: View) => (\n <VirtualizerItem\n key={reusableView.key}\n layoutInfo={reusableView.layoutInfo}\n virtualizer={reusableView.virtualizer}\n parent={parent?.layoutInfo}>\n {reusableView.rendered}\n </VirtualizerItem>\n ), []);\n\n let focusedKey = state.selectionManager.focusedKey;\n let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);\n if (focusedItem?.parentKey != null) {\n focusedKey = focusedItem.parentKey;\n }\n\n let persistedKeys = useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);\n\n // TODO: does aria-row count and aria-col count need to be modified? Perhaps aria-col count needs to be omitted\n return (\n <CardViewContext.Provider value={{state, isQuiet, layout: cardViewLayout, cardOrientation, renderEmptyState}}>\n <Virtualizer\n {...gridProps}\n {...styleProps}\n className={classNames(styles, 'spectrum-CardView')}\n ref={domRef}\n persistedKeys={persistedKeys}\n scrollDirection=\"vertical\"\n layout={cardViewLayout}\n collection={gridCollection}\n isLoading={isLoading}\n onLoadMore={onLoadMore}\n layoutOptions={useMemo(() => ({isLoading, direction}), [isLoading, direction])}\n renderWrapper={renderWrapper}\n style={{\n ...styleProps.style,\n scrollPaddingTop: cardViewLayout.margin || 0\n }}>\n {useCallback((type, item) => {\n if (type === 'item') {\n return (\n <InternalCard item={item} />\n );\n } else if (type === 'loader') {\n return <LoadingState />;\n } else if (type === 'placeholder') {\n return <EmptyState />;\n }\n }, [])}\n </Virtualizer>\n </CardViewContext.Provider>\n\n );\n}) as <T>(props: SpectrumCardViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\nfunction LoadingState() {\n let {state} = useCardViewContext();\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/card');\n return (\n <CenteredWrapper>\n <ProgressCircle\n isIndeterminate\n aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')} />\n </CenteredWrapper>\n );\n}\n\nfunction EmptyState() {\n let {renderEmptyState} = useCardViewContext();\n let emptyState = renderEmptyState ? renderEmptyState() : null;\n if (emptyState == null) {\n return null;\n }\n\n return (\n <CenteredWrapper>\n {emptyState}\n </CenteredWrapper>\n );\n}\n\nfunction CenteredWrapper({children}) {\n let {state} = useCardViewContext();\n return (\n <div\n role=\"row\"\n aria-rowindex={state.collection.size + 1}\n className={classNames(styles, 'spectrum-CardView-centeredWrapper')}>\n <div role=\"gridcell\">\n {children}\n </div>\n </div>\n );\n}\n\nfunction InternalCard(props) {\n let {\n item\n } = props;\n let cellNode = [...item.childNodes][0];\n let {state, cardOrientation, isQuiet, layout} = useCardViewContext();\n\n let layoutType = layout.layoutType;\n let rowRef = useRef(undefined);\n let cellRef = useRef<DOMRefValue<HTMLDivElement>>(undefined);\n let unwrappedRef = useUnwrapDOMRef(cellRef);\n\n let {rowProps: gridRowProps} = useGridRow({\n node: item,\n isVirtualized: true\n }, state, rowRef);\n\n let {gridCellProps} = useGridCell({\n node: cellNode,\n focusMode: 'cell'\n }, state, unwrappedRef);\n\n // Prevent space key from scrolling the CardView if triggered on a disabled item or on a Card in a selectionMode=\"none\" CardView.\n let allowsInteraction = state.selectionManager.selectionMode !== 'none';\n let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);\n\n let onKeyDown = (e) => {\n if (e.key === ' ' && isDisabled) {\n e.preventDefault();\n }\n };\n\n let rowProps = mergeProps(\n gridRowProps,\n {onKeyDown}\n );\n\n if (layoutType === 'grid' || layoutType === 'gallery') {\n isQuiet = true;\n }\n\n if (layoutType !== 'grid') {\n cardOrientation = 'vertical';\n }\n\n // We don't want to focus the checkbox (or any other focusable elements) within the Card\n // when pressing the arrow keys so we delete the key down handler here. Arrow key navigation between\n // the cards in the CardView is handled by useGrid => useSelectableCollection instead.\n delete gridCellProps.onKeyDownCapture;\n return (\n <div {...rowProps} ref={rowRef} className={classNames(styles, 'spectrum-CardView-row')}>\n <CardBase\n ref={cellRef}\n articleProps={gridCellProps}\n isQuiet={isQuiet}\n orientation={cardOrientation}\n item={item}\n layout={layoutType}>\n {item.rendered}\n </CardBase>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"CardView.module.js.map"}
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;AAmBA;IACE,QAAQ,CAAC,EAAE,KAAK,QAAQ,CAAC;IAEzB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED;IACE,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,SAAS,CAAA;CACrB;AAED,yBAAwB,CAAC,CAAE,SAAQ,OAAO,KAAK,CAAC,CAAC,EAAE,qBAAqB,CAAE,YAAW,gBAAgB;IACnG,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC;IAC5B,SAAS,CAAC,WAAW,EAAE,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IAC5C,SAAS,CAAC,QAAQ,EAAE,KAAK,QAAQ,CAAC;IAClC,SAAS,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC,CAAC;IAC5C,UAAU,EAAG,eAAe,CAAC,CAAC,CAAC;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,GAAG,CAAC,GAAG,CAAC,CAAa;IACnC,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;gBAEH,OAAO,GAAE,iBAAsB;IAS3C,MAAM,CAAC,mBAAmB,EAAE,oBAAoB,qBAAqB,CAAC;IA2BtE,eAAe,CAAC,mBAAmB,CAAC,EAAE,mBAAmB;IAEzD,cAAc;IAId,aAAa,CAAC,GAAG,EAAE,GAAG;IAItB,qBAAqB,CAAC,IAAI,EAAE,IAAI,EAAE,oBAAoB,UAAQ;IAY9D,SAAS,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,oBAAoB,EAAE,OAAO;IAY3E,sBAAsB,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IAwB/C,YAAY,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IAKrC,WAAW,CAAC,GAAG,EAAE,GAAG;IASpB,WAAW,CAAC,GAAG,EAAE,GAAG;IASpB,aAAa,CAAC,GAAG,EAAE,GAAG;IAetB,YAAY,CAAC,GAAG,EAAE,GAAG;IAerB,WAAW;IAKX,UAAU;IAOV,eAAe,CAAC,GAAG,EAAE,GAAG;IA+BxB,eAAe,CAAC,GAAG,EAAE,GAAG;IA2BxB,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG;CAyB9C;ACjRD,qCAAsC,SAAQ,iBAAiB;IAK7D;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAwBD,2BAA2B,CAAC,CAAE,SAAQ,WAAW,CAAC,CAAC;IACjD,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC;IACjC,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC;IAC5B,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC;gBAEhB,OAAO,GAAE,oBAAyB;IAW9C,IAAI,UAAU,WAEb;IAED;;;;SAIK;IACL,iBAAiB,CAAC,MAAM,KAAA;IAsCxB,eAAe;CA6GhB;ACnOD,kCAAmC,SAAQ,iBAAiB;IAK1D;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,WAAW,CAAA;CAC9B;AAqCD,wBAAwB,CAAC,CAAE,SAAQ,WAAW,CAAC,CAAC;IAC9C,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC;IAC5B,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC;IAC5B,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC;IACzB,SAAS,CAAC,UAAU,EAAE,MAAM,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,WAAW,CAAC;IAC7B,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC;IACzB,SAAS,CAAC,UAAU,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,iBAAiB,EAAE,MAAM,CAAC;gBAExB,OAAO,GAAE,iBAAsB;IAgB3C,IAAI,UAAU,WAEb;IAED,eAAe,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,EAAE,mBAAmB,UAAQ;IAWjD,eAAe;IA8Df,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,UAAU;IAiB/D,WAAW,CAAC,GAAG,EAAE,GAAG;IAepB,WAAW,CAAC,GAAG,EAAE,GAAG;CAcrB;AC/ND,uCAAwC,SAAQ,iBAAiB;IAC/D;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAGD,6BAA6B,CAAC,CAAE,SAAQ,WAAW,CAAC,CAAE,YAAW,gBAAgB;IAC/E,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC;IAC5B,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC;IAC5B,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC;IACzB,SAAS,CAAC,UAAU,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,UAAU,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,iBAAiB,EAAE,MAAM,CAAC;gBAExB,OAAO,GAAE,sBAA2B;IAiBhD,IAAI,UAAU,WAEb;IAED,eAAe,CAAC,mBAAmB,EAAE,mBAAmB;IA6FxD,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI;IAmBnC,kBAAkB,CAAC,aAAa,KAAA;IAWhC,eAAe,CAAC,GAAG,EAAE,GAAG;IAmBxB,cAAc,CAAC,GAAG,EAAE,GAAG;IAevB,aAAa,CAAC,GAAG,EAAE,GAAG;IAMtB,YAAY,CAAC,GAAG,EAAE,GAAG;CAKtB;
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/BaseLayout.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/GalleryLayout.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/GridLayout.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/WaterfallLayout.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/CardViewContext.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/CardBase.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/CardView.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/Card.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/index.ts","packages/@react-spectrum/card/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,"/*\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\n/// <reference types=\"css-module-types\" />\n\nexport type {GalleryLayoutOptions} from './GalleryLayout';\nexport type {GridLayoutOptions} from './GridLayout';\nexport type {WaterfallLayoutOptions} from './WaterfallLayout';\n\nexport {CardView} from './CardView';\nexport {GalleryLayout} from './GalleryLayout';\nexport {GridLayout} from './GridLayout';\nexport {WaterfallLayout} from './WaterfallLayout';\nexport {Card} from './Card';\nexport type {SpectrumCardViewProps} from '@react-types/card';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
|
@@ -803,9 +803,9 @@
|
|
|
803
803
|
}
|
|
804
804
|
|
|
805
805
|
.NOE1la_spectrum-Card--noLayout.NOE1la_spectrum-Card--default .NOE1la_spectrum-Card-illustration {
|
|
806
|
+
inline-size: 100%;
|
|
806
807
|
block-size: var(--spectrum-card-coverphoto-height, var(--spectrum-global-dimension-size-1700));
|
|
807
808
|
place-items: center;
|
|
808
|
-
inline-size: 100%;
|
|
809
809
|
display: grid;
|
|
810
810
|
}
|
|
811
811
|
|
|
@@ -1179,9 +1179,9 @@
|
|
|
1179
1179
|
}
|
|
1180
1180
|
|
|
1181
1181
|
.NOE1la_spectrum-Card--noLayout.NOE1la_spectrum-Card--isQuiet .NOE1la_spectrum-Card-illustration {
|
|
1182
|
+
inline-size: 100%;
|
|
1182
1183
|
block-size: var(--spectrum-card-coverphoto-height, var(--spectrum-global-dimension-size-1700));
|
|
1183
1184
|
place-items: center;
|
|
1184
|
-
inline-size: 100%;
|
|
1185
1185
|
display: grid;
|
|
1186
1186
|
}
|
|
1187
1187
|
|
|
@@ -1668,4 +1668,4 @@
|
|
|
1668
1668
|
.NOE1la_spectrum-Card--horizontal .NOE1la_spectrum-Card-image, .NOE1la_spectrum-Card--horizontal .NOE1la_spectrum-Card-illustration {
|
|
1669
1669
|
border-inline-end-color: var(--spectrum-card-coverphoto-border-color, var(--spectrum-global-color-gray-200));
|
|
1670
1670
|
}
|
|
1671
|
-
/*# sourceMappingURL=vars.
|
|
1671
|
+
/*# sourceMappingURL=vars.02438011.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@adobe/spectrum-css-temp/components/card/vars.css"],"sourcesContent":["/*\n * Copyright 2020 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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.
|
|
1
|
+
{"mappings":"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","sources":["packages/@adobe/spectrum-css-temp/components/card/vars.css"],"sourcesContent":["/*\n * Copyright 2020 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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.02438011.css.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/card",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.39",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -36,22 +36,22 @@
|
|
|
36
36
|
"url": "https://github.com/adobe/react-spectrum"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@react-aria/focus": "^3.19.
|
|
40
|
-
"@react-aria/grid": "^3.11.
|
|
41
|
-
"@react-aria/i18n": "^3.12.
|
|
42
|
-
"@react-aria/interactions": "^3.
|
|
43
|
-
"@react-aria/utils": "^3.
|
|
44
|
-
"@react-aria/virtualizer": "^4.1.
|
|
45
|
-
"@react-spectrum/checkbox": "^3.9.
|
|
46
|
-
"@react-spectrum/progress": "^3.7.
|
|
47
|
-
"@react-spectrum/utils": "^3.12.
|
|
48
|
-
"@react-stately/collections": "^3.12.
|
|
49
|
-
"@react-stately/grid": "^3.10.
|
|
50
|
-
"@react-stately/list": "^3.11.
|
|
51
|
-
"@react-stately/virtualizer": "^4.2.
|
|
52
|
-
"@react-types/card": "3.0.0-alpha.
|
|
53
|
-
"@react-types/provider": "^3.8.
|
|
54
|
-
"@react-types/shared": "^3.
|
|
39
|
+
"@react-aria/focus": "^3.19.1",
|
|
40
|
+
"@react-aria/grid": "^3.11.1",
|
|
41
|
+
"@react-aria/i18n": "^3.12.5",
|
|
42
|
+
"@react-aria/interactions": "^3.23.0",
|
|
43
|
+
"@react-aria/utils": "^3.27.0",
|
|
44
|
+
"@react-aria/virtualizer": "^4.1.1",
|
|
45
|
+
"@react-spectrum/checkbox": "^3.9.12",
|
|
46
|
+
"@react-spectrum/progress": "^3.7.12",
|
|
47
|
+
"@react-spectrum/utils": "^3.12.1",
|
|
48
|
+
"@react-stately/collections": "^3.12.1",
|
|
49
|
+
"@react-stately/grid": "^3.10.1",
|
|
50
|
+
"@react-stately/list": "^3.11.2",
|
|
51
|
+
"@react-stately/virtualizer": "^4.2.1",
|
|
52
|
+
"@react-types/card": "3.0.0-alpha.32",
|
|
53
|
+
"@react-types/provider": "^3.8.6",
|
|
54
|
+
"@react-types/shared": "^3.27.0",
|
|
55
55
|
"@swc/helpers": "^0.5.0"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"publishConfig": {
|
|
66
66
|
"access": "public"
|
|
67
67
|
},
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
|
|
69
69
|
}
|
package/src/CardBase.tsx
CHANGED
|
@@ -28,7 +28,10 @@ interface CardBaseProps<T> extends SpectrumCardProps {
|
|
|
28
28
|
item?: Node<T>
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
/**
|
|
32
|
+
* TODO: Add description of component here.
|
|
33
|
+
*/
|
|
34
|
+
export const CardBase = React.forwardRef(function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDivElement>) {
|
|
32
35
|
props = useProviderProps(props);
|
|
33
36
|
let context = useCardViewContext() || {}; // we can call again here, won't change from Card.tsx
|
|
34
37
|
let {state} = context;
|
|
@@ -151,7 +154,7 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
|
|
|
151
154
|
</article>
|
|
152
155
|
</FocusRing>
|
|
153
156
|
);
|
|
154
|
-
}
|
|
157
|
+
});
|
|
155
158
|
|
|
156
159
|
interface AriaCardOptions extends AriaCardProps {
|
|
157
160
|
}
|
|
@@ -183,9 +186,3 @@ function useCard(props: AriaCardOptions): CardAria {
|
|
|
183
186
|
contentProps
|
|
184
187
|
};
|
|
185
188
|
}
|
|
186
|
-
|
|
187
|
-
/**
|
|
188
|
-
* TODO: Add description of component here.
|
|
189
|
-
*/
|
|
190
|
-
const _CardBase = React.forwardRef(CardBase);
|
|
191
|
-
export {_CardBase as CardBase};
|
package/src/CardView.tsx
CHANGED
|
@@ -30,7 +30,10 @@ import {useListState} from '@react-stately/list';
|
|
|
30
30
|
import {useProvider} from '@react-spectrum/provider';
|
|
31
31
|
import {Virtualizer, VirtualizerItem} from '@react-aria/virtualizer';
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
/**
|
|
34
|
+
* TODO: Add description of component here.
|
|
35
|
+
*/
|
|
36
|
+
export const CardView = React.forwardRef(function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef<HTMLDivElement>) {
|
|
34
37
|
let {scale} = useProvider();
|
|
35
38
|
let {styleProps} = useStyleProps(props);
|
|
36
39
|
let domRef = useDOMRef(ref);
|
|
@@ -140,7 +143,7 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
|
|
|
140
143
|
</CardViewContext.Provider>
|
|
141
144
|
|
|
142
145
|
);
|
|
143
|
-
}
|
|
146
|
+
}) as <T>(props: SpectrumCardViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
|
|
144
147
|
|
|
145
148
|
function LoadingState() {
|
|
146
149
|
let {state} = useCardViewContext();
|
|
@@ -245,9 +248,3 @@ function InternalCard(props) {
|
|
|
245
248
|
</div>
|
|
246
249
|
);
|
|
247
250
|
}
|
|
248
|
-
|
|
249
|
-
/**
|
|
250
|
-
* TODO: Add description of component here.
|
|
251
|
-
*/
|
|
252
|
-
const _CardView = React.forwardRef(CardView) as <T>(props: SpectrumCardViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
|
|
253
|
-
export {_CardView as CardView};
|