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

package/dist/CardBase.mjs

@@ -0,0 +1,200 @@
+import "./vars.e5a6cd16.css";
+import $8eFIe$card_vars_cssmodulejs from "./card_vars_css.mjs";
+import {useCardViewContext as $8d180a244893de14$export$fea0b38586ec8f13} from "./CardViewContext.mjs";
+import {Checkbox as $8eFIe$Checkbox} from "@react-spectrum/checkbox";
+import {useStyleProps as $8eFIe$useStyleProps, useDOMRef as $8eFIe$useDOMRef, useHasChild as $8eFIe$useHasChild, classNames as $8eFIe$classNames, SlotProvider as $8eFIe$SlotProvider} from "@react-spectrum/utils";
+import {useResizeObserver as $8eFIe$useResizeObserver, useLayoutEffect as $8eFIe$useLayoutEffect, mergeProps as $8eFIe$mergeProps, filterDOMProps as $8eFIe$filterDOMProps, useSlotId as $8eFIe$useSlotId} from "@react-aria/utils";
+import {getFocusableTreeWalker as $8eFIe$getFocusableTreeWalker, FocusRing as $8eFIe$FocusRing} from "@react-aria/focus";
+import $8eFIe$react, {useRef as $8eFIe$useRef, useState as $8eFIe$useState, useCallback as $8eFIe$useCallback, useMemo as $8eFIe$useMemo} from "react";
+import {useHover as $8eFIe$useHover, useFocusWithin as $8eFIe$useFocusWithin} from "@react-aria/interactions";
+import {useProviderProps as $8eFIe$useProviderProps} from "@react-spectrum/provider";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+function $643dd8fa80926f94$var$CardBase(props, ref) {
+    props = (0, $8eFIe$useProviderProps)(props);
+    let context = (0, $8d180a244893de14$export$fea0b38586ec8f13)() || {}; // we can call again here, won't change from Card.tsx
+    let { state: state } = context;
+    let manager = state === null || state === void 0 ? void 0 : state.selectionManager;
+    let { isQuiet: isQuiet, orientation: orientation = "vertical", articleProps: articleProps = {}, item: item, layout: layout, children: children } = props;
+    let key = item === null || item === void 0 ? void 0 : item.key;
+    let isSelected = manager === null || manager === void 0 ? void 0 : manager.isSelected(key);
+    let isDisabled = state === null || state === void 0 ? void 0 : state.disabledKeys.has(key);
+    let onChange = ()=>manager === null || manager === void 0 ? void 0 : manager.select(key);
+    let { styleProps: styleProps } = (0, $8eFIe$useStyleProps)(props);
+    let { cardProps: cardProps, titleProps: titleProps, contentProps: contentProps } = $643dd8fa80926f94$var$useCard(props);
+    let domRef = (0, $8eFIe$useDOMRef)(ref);
+    let gridRef = (0, $8eFIe$useRef)();
+    let checkboxRef = (0, $8eFIe$useRef)(null);
+    // cards are only interactive if there is a selection manager and it allows selection
+    let { hoverProps: hoverProps, isHovered: isHovered } = (0, $8eFIe$useHover)({
+        isDisabled: manager === undefined || (manager === null || manager === void 0 ? void 0 : manager.selectionMode) === "none" || isDisabled
+    });
+    let [isFocused, setIsFocused] = (0, $8eFIe$useState)(false);
+    let { focusWithinProps: focusWithinProps } = (0, $8eFIe$useFocusWithin)({
+        onFocusWithinChange: setIsFocused,
+        isDisabled: isDisabled
+    });
+    // ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default
+    let hasPreviewImage = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))["spectrum-Card-image"]}`, gridRef);
+    let hasPreviewIllustration = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))["spectrum-Card-illustration"]}`, gridRef);
+    let hasPreview = hasPreviewImage || hasPreviewIllustration;
+    // this is for horizontal cards
+    let [height, setHeight] = (0, $8eFIe$useState)(NaN);
+    let updateHeight = (0, $8eFIe$useCallback)(()=>{
+        if (orientation !== "horizontal") return;
+        let cardHeight = gridRef.current.getBoundingClientRect().height;
+        setHeight(cardHeight);
+    }, [
+        orientation,
+        gridRef,
+        setHeight
+    ]);
+    (0, $8eFIe$useResizeObserver)({
+        ref: gridRef,
+        onResize: updateHeight
+    });
+    let aspectRatioEnforce = undefined;
+    if (orientation === "horizontal" && !isNaN(height)) aspectRatioEnforce = {
+        height: `${height}px`,
+        width: `${height}px`
+    };
+    let slots = (0, $8eFIe$useMemo)(()=>({
+            image: {
+                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-image"),
+                objectFit: orientation === "horizontal" ? "cover" : "contain",
+                alt: "",
+                ...aspectRatioEnforce
+            },
+            illustration: {
+                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-illustration"),
+                ...aspectRatioEnforce
+            },
+            avatar: {
+                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-avatar"),
+                size: "avatar-size-400"
+            },
+            heading: {
+                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-heading"),
+                ...titleProps
+            },
+            content: {
+                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-content"),
+                ...contentProps
+            },
+            detail: {
+                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-detail")
+            }
+        }), [
+        titleProps,
+        contentProps,
+        height,
+        isQuiet,
+        orientation
+    ]);
+    (0, $8eFIe$useLayoutEffect)(()=>{
+        if (gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) {
+            let walker = (0, $8eFIe$getFocusableTreeWalker)(gridRef.current);
+            let nextNode = walker.nextNode();
+            while(nextNode != null){
+                if (checkboxRef.current && !checkboxRef.current.UNSAFE_getDOMNode().contains(nextNode)) {
+                    console.warn("Card does not support focusable elements, please contact the team regarding your use case.");
+                    break;
+                }
+                nextNode = walker.nextNode();
+            }
+        }
+    }, [
+        children
+    ]);
+    return /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$FocusRing), {
+        focusRingClass: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "focus-ring")
+    }, /*#__PURE__*/ (0, $8eFIe$react).createElement("article", {
+        ...styleProps,
+        ...(0, $8eFIe$mergeProps)(cardProps, focusWithinProps, hoverProps, (0, $8eFIe$filterDOMProps)(props), articleProps),
+        ref: domRef,
+        className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card", {
+            "spectrum-Card--default": !isQuiet && orientation !== "horizontal",
+            "spectrum-Card--isQuiet": isQuiet && orientation !== "horizontal",
+            "spectrum-Card--horizontal": orientation === "horizontal",
+            "spectrum-Card--noPreview": !hasPreview,
+            "is-hovered": isHovered,
+            "is-focused": isFocused,
+            "is-selected": isSelected,
+            "spectrum-Card--waterfall": layout === "waterfall",
+            "spectrum-Card--gallery": layout === "gallery",
+            "spectrum-Card--grid": layout === "grid",
+            "spectrum-Card--noLayout": layout !== "waterfall" && layout !== "gallery" && layout !== "grid"
+        }, styleProps.className)
+    }, /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
+        ref: gridRef,
+        className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-grid")
+    }, manager && manager.selectionMode !== "none" && /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
+        className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-checkboxWrapper")
+    }, /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$Checkbox), {
+        ref: checkboxRef,
+        isDisabled: isDisabled,
+        excludeFromTabOrder: true,
+        isSelected: isSelected,
+        onChange: onChange,
+        UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-checkbox"),
+        isEmphasized: true,
+        "aria-label": "select"
+    })), /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$SlotProvider), {
+        slots: slots
+    }, children), /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
+        className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-decoration")
+    }))));
+}
+function $643dd8fa80926f94$var$useCard(props) {
+    let titleId = (0, $8eFIe$useSlotId)();
+    let descriptionId = (0, $8eFIe$useSlotId)();
+    let titleProps = (0, $8eFIe$useMemo)(()=>({
+            id: titleId
+        }), [
+        titleId
+    ]);
+    let contentProps = (0, $8eFIe$useMemo)(()=>({
+            id: descriptionId
+        }), [
+        descriptionId
+    ]);
+    return {
+        cardProps: {
+            ...(0, $8eFIe$filterDOMProps)(props),
+            "aria-labelledby": titleId,
+            "aria-describedby": descriptionId,
+            tabIndex: 0
+        },
+        titleProps: titleProps,
+        contentProps: contentProps
+    };
+}
+/**
+ * TODO: Add description of component here.
+ */ const $643dd8fa80926f94$export$7a6ccaf429ad93a8 = /*#__PURE__*/ (0, $8eFIe$react).forwardRef($643dd8fa80926f94$var$CardBase);
+
+
+export {$643dd8fa80926f94$export$7a6ccaf429ad93a8 as CardBase};
+//# sourceMappingURL=CardBase.mjs.map

package/dist/CardBase.module.js

@@ -0,0 +1,200 @@
+import "./vars.e5a6cd16.css";
+import $8eFIe$card_vars_cssmodulejs from "./card_vars_css.module.js";
+import {useCardViewContext as $8d180a244893de14$export$fea0b38586ec8f13} from "./CardViewContext.module.js";
+import {Checkbox as $8eFIe$Checkbox} from "@react-spectrum/checkbox";
+import {useStyleProps as $8eFIe$useStyleProps, useDOMRef as $8eFIe$useDOMRef, useHasChild as $8eFIe$useHasChild, classNames as $8eFIe$classNames, SlotProvider as $8eFIe$SlotProvider} from "@react-spectrum/utils";
+import {useResizeObserver as $8eFIe$useResizeObserver, useLayoutEffect as $8eFIe$useLayoutEffect, mergeProps as $8eFIe$mergeProps, filterDOMProps as $8eFIe$filterDOMProps, useSlotId as $8eFIe$useSlotId} from "@react-aria/utils";
+import {getFocusableTreeWalker as $8eFIe$getFocusableTreeWalker, FocusRing as $8eFIe$FocusRing} from "@react-aria/focus";
+import $8eFIe$react, {useRef as $8eFIe$useRef, useState as $8eFIe$useState, useCallback as $8eFIe$useCallback, useMemo as $8eFIe$useMemo} from "react";
+import {useHover as $8eFIe$useHover, useFocusWithin as $8eFIe$useFocusWithin} from "@react-aria/interactions";
+import {useProviderProps as $8eFIe$useProviderProps} from "@react-spectrum/provider";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+function $643dd8fa80926f94$var$CardBase(props, ref) {
+    props = (0, $8eFIe$useProviderProps)(props);
+    let context = (0, $8d180a244893de14$export$fea0b38586ec8f13)() || {}; // we can call again here, won't change from Card.tsx
+    let { state: state } = context;
+    let manager = state === null || state === void 0 ? void 0 : state.selectionManager;
+    let { isQuiet: isQuiet, orientation: orientation = "vertical", articleProps: articleProps = {}, item: item, layout: layout, children: children } = props;
+    let key = item === null || item === void 0 ? void 0 : item.key;
+    let isSelected = manager === null || manager === void 0 ? void 0 : manager.isSelected(key);
+    let isDisabled = state === null || state === void 0 ? void 0 : state.disabledKeys.has(key);
+    let onChange = ()=>manager === null || manager === void 0 ? void 0 : manager.select(key);
+    let { styleProps: styleProps } = (0, $8eFIe$useStyleProps)(props);
+    let { cardProps: cardProps, titleProps: titleProps, contentProps: contentProps } = $643dd8fa80926f94$var$useCard(props);
+    let domRef = (0, $8eFIe$useDOMRef)(ref);
+    let gridRef = (0, $8eFIe$useRef)();
+    let checkboxRef = (0, $8eFIe$useRef)(null);
+    // cards are only interactive if there is a selection manager and it allows selection
+    let { hoverProps: hoverProps, isHovered: isHovered } = (0, $8eFIe$useHover)({
+        isDisabled: manager === undefined || (manager === null || manager === void 0 ? void 0 : manager.selectionMode) === "none" || isDisabled
+    });
+    let [isFocused, setIsFocused] = (0, $8eFIe$useState)(false);
+    let { focusWithinProps: focusWithinProps } = (0, $8eFIe$useFocusWithin)({
+        onFocusWithinChange: setIsFocused,
+        isDisabled: isDisabled
+    });
+    // ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default
+    let hasPreviewImage = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))["spectrum-Card-image"]}`, gridRef);
+    let hasPreviewIllustration = (0, $8eFIe$useHasChild)(`.${(0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs)))["spectrum-Card-illustration"]}`, gridRef);
+    let hasPreview = hasPreviewImage || hasPreviewIllustration;
+    // this is for horizontal cards
+    let [height, setHeight] = (0, $8eFIe$useState)(NaN);
+    let updateHeight = (0, $8eFIe$useCallback)(()=>{
+        if (orientation !== "horizontal") return;
+        let cardHeight = gridRef.current.getBoundingClientRect().height;
+        setHeight(cardHeight);
+    }, [
+        orientation,
+        gridRef,
+        setHeight
+    ]);
+    (0, $8eFIe$useResizeObserver)({
+        ref: gridRef,
+        onResize: updateHeight
+    });
+    let aspectRatioEnforce = undefined;
+    if (orientation === "horizontal" && !isNaN(height)) aspectRatioEnforce = {
+        height: `${height}px`,
+        width: `${height}px`
+    };
+    let slots = (0, $8eFIe$useMemo)(()=>({
+            image: {
+                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-image"),
+                objectFit: orientation === "horizontal" ? "cover" : "contain",
+                alt: "",
+                ...aspectRatioEnforce
+            },
+            illustration: {
+                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-illustration"),
+                ...aspectRatioEnforce
+            },
+            avatar: {
+                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-avatar"),
+                size: "avatar-size-400"
+            },
+            heading: {
+                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-heading"),
+                ...titleProps
+            },
+            content: {
+                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-content"),
+                ...contentProps
+            },
+            detail: {
+                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-detail")
+            }
+        }), [
+        titleProps,
+        contentProps,
+        height,
+        isQuiet,
+        orientation
+    ]);
+    (0, $8eFIe$useLayoutEffect)(()=>{
+        if (gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) {
+            let walker = (0, $8eFIe$getFocusableTreeWalker)(gridRef.current);
+            let nextNode = walker.nextNode();
+            while(nextNode != null){
+                if (checkboxRef.current && !checkboxRef.current.UNSAFE_getDOMNode().contains(nextNode)) {
+                    console.warn("Card does not support focusable elements, please contact the team regarding your use case.");
+                    break;
+                }
+                nextNode = walker.nextNode();
+            }
+        }
+    }, [
+        children
+    ]);
+    return /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$FocusRing), {
+        focusRingClass: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "focus-ring")
+    }, /*#__PURE__*/ (0, $8eFIe$react).createElement("article", {
+        ...styleProps,
+        ...(0, $8eFIe$mergeProps)(cardProps, focusWithinProps, hoverProps, (0, $8eFIe$filterDOMProps)(props), articleProps),
+        ref: domRef,
+        className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card", {
+            "spectrum-Card--default": !isQuiet && orientation !== "horizontal",
+            "spectrum-Card--isQuiet": isQuiet && orientation !== "horizontal",
+            "spectrum-Card--horizontal": orientation === "horizontal",
+            "spectrum-Card--noPreview": !hasPreview,
+            "is-hovered": isHovered,
+            "is-focused": isFocused,
+            "is-selected": isSelected,
+            "spectrum-Card--waterfall": layout === "waterfall",
+            "spectrum-Card--gallery": layout === "gallery",
+            "spectrum-Card--grid": layout === "grid",
+            "spectrum-Card--noLayout": layout !== "waterfall" && layout !== "gallery" && layout !== "grid"
+        }, styleProps.className)
+    }, /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
+        ref: gridRef,
+        className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-grid")
+    }, manager && manager.selectionMode !== "none" && /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
+        className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-checkboxWrapper")
+    }, /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$Checkbox), {
+        ref: checkboxRef,
+        isDisabled: isDisabled,
+        excludeFromTabOrder: true,
+        isSelected: isSelected,
+        onChange: onChange,
+        UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-checkbox"),
+        isEmphasized: true,
+        "aria-label": "select"
+    })), /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$SlotProvider), {
+        slots: slots
+    }, children), /*#__PURE__*/ (0, $8eFIe$react).createElement("div", {
+        className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "spectrum-Card-decoration")
+    }))));
+}
+function $643dd8fa80926f94$var$useCard(props) {
+    let titleId = (0, $8eFIe$useSlotId)();
+    let descriptionId = (0, $8eFIe$useSlotId)();
+    let titleProps = (0, $8eFIe$useMemo)(()=>({
+            id: titleId
+        }), [
+        titleId
+    ]);
+    let contentProps = (0, $8eFIe$useMemo)(()=>({
+            id: descriptionId
+        }), [
+        descriptionId
+    ]);
+    return {
+        cardProps: {
+            ...(0, $8eFIe$filterDOMProps)(props),
+            "aria-labelledby": titleId,
+            "aria-describedby": descriptionId,
+            tabIndex: 0
+        },
+        titleProps: titleProps,
+        contentProps: contentProps
+    };
+}
+/**
+ * TODO: Add description of component here.
+ */ const $643dd8fa80926f94$export$7a6ccaf429ad93a8 = /*#__PURE__*/ (0, $8eFIe$react).forwardRef($643dd8fa80926f94$var$CardBase);
+
+
+export {$643dd8fa80926f94$export$7a6ccaf429ad93a8 as CardBase};
+//# sourceMappingURL=CardBase.module.js.map

package/dist/CardBase.module.js.map

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

package/dist/CardView.main.js

@@ -0,0 +1,232 @@
+var $7888205ff7de382f$exports = require("./CardBase.main.js");
+var $e57ab98cef2f01a5$exports = require("./CardViewContext.main.js");
+var $85c597beff94758b$exports = require("./intlStrings.main.js");
+require("./vars.e5a6cd16.css");
+var $71570f0038472fa2$exports = require("./card_vars_css.main.js");
+var $kFdxB$reactspectrumutils = require("@react-spectrum/utils");
+var $kFdxB$reactstatelygrid = require("@react-stately/grid");
+var $kFdxB$reactariautils = require("@react-aria/utils");
+var $kFdxB$reactspectrumprogress = require("@react-spectrum/progress");
+var $kFdxB$react = require("react");
+var $kFdxB$reactariai18n = require("@react-aria/i18n");
+var $kFdxB$reactariagrid = require("@react-aria/grid");
+var $kFdxB$reactstatelylist = require("@react-stately/list");
+var $kFdxB$reactspectrumprovider = require("@react-spectrum/provider");
+var $kFdxB$reactariavirtualizer = require("@react-aria/virtualizer");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "CardView", () => $514a55f6d91f25ef$export$7e52c821f7b6f422);
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $514a55f6d91f25ef$var$CardView(props, ref) {
+    let { scale: scale } = (0, $kFdxB$reactspectrumprovider.useProvider)();
+    let { styleProps: styleProps } = (0, $kFdxB$reactspectrumutils.useStyleProps)(props);
+    let domRef = (0, $kFdxB$reactspectrumutils.useDOMRef)(ref);
+    let { isQuiet: isQuiet, renderEmptyState: renderEmptyState, layout: layout, loadingState: loadingState, onLoadMore: onLoadMore, cardOrientation: cardOrientation = "vertical" } = props;
+    let collator = (0, $kFdxB$reactariai18n.useCollator)({
+        usage: "search",
+        sensitivity: "base"
+    });
+    let isLoading = loadingState === "loading" || loadingState === "loadingMore";
+    let cardViewLayout = (0, $kFdxB$react.useMemo)(()=>typeof layout === "function" ? new layout({
+            collator: collator,
+            cardOrientation: cardOrientation,
+            scale: scale
+        }) : layout, [
+        layout,
+        collator,
+        cardOrientation,
+        scale
+    ]);
+    let layoutType = cardViewLayout.layoutType;
+    let stringFormatter = (0, $kFdxB$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($85c597beff94758b$exports))), "@react-spectrum/card");
+    let { direction: direction } = (0, $kFdxB$reactariai18n.useLocale)();
+    let { collection: collection } = (0, $kFdxB$reactstatelylist.useListState)(props);
+    let gridCollection = (0, $kFdxB$react.useMemo)(()=>new (0, $kFdxB$reactstatelygrid.GridCollection)({
+            columnCount: 1,
+            items: [
+                ...collection
+            ].map((item)=>({
+                    // Makes the Grid row use the keys the user provides to the cards so that selection change via interactions returns the card keys
+                    ...item,
+                    hasChildNodes: true,
+                    childNodes: [
+                        {
+                            key: `cell-${item.key}`,
+                            type: "cell",
+                            value: null,
+                            level: 0,
+                            rendered: null,
+                            textValue: item.textValue,
+                            hasChildNodes: false,
+                            childNodes: []
+                        }
+                    ]
+                }))
+        }), [
+        collection
+    ]);
+    let state = (0, $kFdxB$reactstatelygrid.useGridState)({
+        ...props,
+        selectionMode: cardOrientation === "horizontal" && layoutType === "grid" ? "none" : props.selectionMode,
+        collection: gridCollection,
+        focusMode: "cell"
+    });
+    cardViewLayout.collection = gridCollection;
+    cardViewLayout.disabledKeys = state.disabledKeys;
+    cardViewLayout.isLoading = isLoading;
+    cardViewLayout.direction = direction;
+    let { gridProps: gridProps } = (0, $kFdxB$reactariagrid.useGrid)({
+        ...props,
+        isVirtualized: true,
+        keyboardDelegate: cardViewLayout
+    }, state, domRef);
+    let renderWrapper = (parent, reusableView)=>/*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement((0, $kFdxB$reactariavirtualizer.VirtualizerItem), {
+            key: reusableView.key,
+            layoutInfo: reusableView.layoutInfo,
+            virtualizer: reusableView.virtualizer,
+            parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo
+        }, reusableView.rendered);
+    let focusedKey = state.selectionManager.focusedKey;
+    let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);
+    if ((focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.parentKey) != null) focusedKey = focusedItem.parentKey;
+    let margin = cardViewLayout.margin || 0;
+    let virtualizer = cardViewLayout.virtualizer;
+    let scrollToItem = (0, $kFdxB$react.useCallback)((key)=>{
+        virtualizer && virtualizer.scrollToItem(key, {
+            duration: 0,
+            offsetY: margin
+        });
+    }, [
+        margin,
+        virtualizer
+    ]);
+    // TODO: does aria-row count and aria-col count need to be modified? Perhaps aria-col count needs to be omitted
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement((0, $e57ab98cef2f01a5$exports.CardViewContext).Provider, {
+        value: {
+            state: state,
+            isQuiet: isQuiet,
+            layout: cardViewLayout,
+            cardOrientation: cardOrientation
+        }
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement((0, $kFdxB$reactariavirtualizer.Virtualizer), {
+        ...gridProps,
+        ...styleProps,
+        className: (0, $kFdxB$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-CardView"),
+        ref: domRef,
+        focusedKey: focusedKey,
+        scrollDirection: "vertical",
+        layout: cardViewLayout,
+        collection: gridCollection,
+        isLoading: isLoading,
+        onLoadMore: onLoadMore,
+        renderWrapper: renderWrapper,
+        transitionDuration: isLoading ? 160 : 220,
+        scrollToItem: scrollToItem
+    }, (type, item)=>{
+        if (type === "item") return /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement($514a55f6d91f25ef$var$InternalCard, {
+            item: item
+        });
+        else if (type === "loader") return /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement($514a55f6d91f25ef$var$CenteredWrapper, null, /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement((0, $kFdxB$reactspectrumprogress.ProgressCircle), {
+            isIndeterminate: true,
+            "aria-label": state.collection.size > 0 ? stringFormatter.format("loadingMore") : stringFormatter.format("loading")
+        }));
+        else if (type === "placeholder") {
+            let emptyState = renderEmptyState ? renderEmptyState() : null;
+            if (emptyState == null) return null;
+            return /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement($514a55f6d91f25ef$var$CenteredWrapper, null, emptyState);
+        }
+    }));
+}
+function $514a55f6d91f25ef$var$CenteredWrapper({ children: children }) {
+    let { state: state } = (0, $e57ab98cef2f01a5$exports.useCardViewContext)();
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement("div", {
+        role: "row",
+        "aria-rowindex": state.collection.size + 1,
+        className: (0, $kFdxB$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-CardView-centeredWrapper")
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement("div", {
+        role: "gridcell"
+    }, children));
+}
+function $514a55f6d91f25ef$var$InternalCard(props) {
+    let { item: item } = props;
+    let cellNode = [
+        ...item.childNodes
+    ][0];
+    let { state: state, cardOrientation: cardOrientation, isQuiet: isQuiet, layout: layout } = (0, $e57ab98cef2f01a5$exports.useCardViewContext)();
+    let layoutType = layout.layoutType;
+    let rowRef = (0, $kFdxB$react.useRef)();
+    let cellRef = (0, $kFdxB$react.useRef)();
+    let unwrappedRef = (0, $kFdxB$reactspectrumutils.useUnwrapDOMRef)(cellRef);
+    let { rowProps: gridRowProps } = (0, $kFdxB$reactariagrid.useGridRow)({
+        node: item,
+        isVirtualized: true
+    }, state, rowRef);
+    let { gridCellProps: gridCellProps } = (0, $kFdxB$reactariagrid.useGridCell)({
+        node: cellNode,
+        focusMode: "cell"
+    }, state, unwrappedRef);
+    // Prevent space key from scrolling the CardView if triggered on a disabled item or on a Card in a selectionMode="none" CardView.
+    let allowsInteraction = state.selectionManager.selectionMode !== "none";
+    let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
+    let onKeyDown = (e)=>{
+        if (e.key === " " && isDisabled) e.preventDefault();
+    };
+    let rowProps = (0, $kFdxB$reactariautils.mergeProps)(gridRowProps, {
+        onKeyDown: onKeyDown
+    });
+    if (layoutType === "grid" || layoutType === "gallery") isQuiet = true;
+    if (layoutType !== "grid") cardOrientation = "vertical";
+    // We don't want to focus the checkbox (or any other focusable elements) within the Card
+    // when pressing the arrow keys so we delete the key down handler here. Arrow key navigation between
+    // the cards in the CardView is handled by useGrid => useSelectableCollection instead.
+    delete gridCellProps.onKeyDownCapture;
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement("div", {
+        ...rowProps,
+        ref: rowRef,
+        className: (0, $kFdxB$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), "spectrum-CardView-row")
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement((0, $7888205ff7de382f$exports.CardBase), {
+        ref: cellRef,
+        articleProps: gridCellProps,
+        isQuiet: isQuiet,
+        orientation: cardOrientation,
+        item: item,
+        layout: layoutType
+    }, item.rendered));
+}
+/**
+ * TODO: Add description of component here.
+ */ const $514a55f6d91f25ef$export$7e52c821f7b6f422 = /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).forwardRef($514a55f6d91f25ef$var$CardView);
+
+
+//# sourceMappingURL=CardView.main.js.map