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

package/dist/CardView.main.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-spectrum/card/src/CardView.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 {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 stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/card');\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  cardViewLayout.isLoading = isLoading;\n  cardViewLayout.direction = direction;\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 = (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 margin = cardViewLayout.margin || 0;\n  let virtualizer = cardViewLayout.virtualizer;\n  let scrollToItem = useCallback((key) => {\n    virtualizer && virtualizer.scrollToItem(key, {\n      duration: 0,\n      offsetY: margin\n    });\n  }, [margin, virtualizer]);\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}}>\n      <Virtualizer\n        {...gridProps}\n        {...styleProps}\n        className={classNames(styles, 'spectrum-CardView')}\n        ref={domRef}\n        focusedKey={focusedKey}\n        scrollDirection=\"vertical\"\n        layout={cardViewLayout}\n        collection={gridCollection}\n        isLoading={isLoading}\n        onLoadMore={onLoadMore}\n        renderWrapper={renderWrapper}\n        transitionDuration={isLoading ? 160 : 220}\n        scrollToItem={scrollToItem}>\n        {(type, item) => {\n          if (type === 'item') {\n            return (\n              <InternalCard item={item} />\n            );\n          } else if (type === 'loader') {\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          } else if (type === 'placeholder') {\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        }}\n      </Virtualizer>\n    </CardViewContext.Provider>\n\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();\n  let cellRef = useRef<DOMRefValue<HTMLDivElement>>();\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"}

package/dist/CardView.mjs

@@ -0,0 +1,227 @@
+import {CardBase as $643dd8fa80926f94$export$7a6ccaf429ad93a8} from "./CardBase.mjs";
+import {CardViewContext as $8d180a244893de14$export$64992ac69f286e5c, useCardViewContext as $8d180a244893de14$export$fea0b38586ec8f13} from "./CardViewContext.mjs";
+import $iOsT7$intlStringsmodulejs from "./intlStrings.mjs";
+import "./vars.e5a6cd16.css";
+import $iOsT7$card_vars_cssmodulejs from "./card_vars_css.mjs";
+import {useStyleProps as $iOsT7$useStyleProps, useDOMRef as $iOsT7$useDOMRef, classNames as $iOsT7$classNames, useUnwrapDOMRef as $iOsT7$useUnwrapDOMRef} from "@react-spectrum/utils";
+import {GridCollection as $iOsT7$GridCollection, useGridState as $iOsT7$useGridState} from "@react-stately/grid";
+import {mergeProps as $iOsT7$mergeProps} from "@react-aria/utils";
+import {ProgressCircle as $iOsT7$ProgressCircle} from "@react-spectrum/progress";
+import $iOsT7$react, {useMemo as $iOsT7$useMemo, useCallback as $iOsT7$useCallback, useRef as $iOsT7$useRef} from "react";
+import {useCollator as $iOsT7$useCollator, useLocalizedStringFormatter as $iOsT7$useLocalizedStringFormatter, useLocale as $iOsT7$useLocale} from "@react-aria/i18n";
+import {useGrid as $iOsT7$useGrid, useGridRow as $iOsT7$useGridRow, useGridCell as $iOsT7$useGridCell} from "@react-aria/grid";
+import {useListState as $iOsT7$useListState} from "@react-stately/list";
+import {useProvider as $iOsT7$useProvider} from "@react-spectrum/provider";
+import {VirtualizerItem as $iOsT7$VirtualizerItem, Virtualizer as $iOsT7$Virtualizer} from "@react-aria/virtualizer";
+
+
+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 $81a52da995c19652$var$CardView(props, ref) {
+    let { scale: scale } = (0, $iOsT7$useProvider)();
+    let { styleProps: styleProps } = (0, $iOsT7$useStyleProps)(props);
+    let domRef = (0, $iOsT7$useDOMRef)(ref);
+    let { isQuiet: isQuiet, renderEmptyState: renderEmptyState, layout: layout, loadingState: loadingState, onLoadMore: onLoadMore, cardOrientation: cardOrientation = "vertical" } = props;
+    let collator = (0, $iOsT7$useCollator)({
+        usage: "search",
+        sensitivity: "base"
+    });
+    let isLoading = loadingState === "loading" || loadingState === "loadingMore";
+    let cardViewLayout = (0, $iOsT7$useMemo)(()=>typeof layout === "function" ? new layout({
+            collator: collator,
+            cardOrientation: cardOrientation,
+            scale: scale
+        }) : layout, [
+        layout,
+        collator,
+        cardOrientation,
+        scale
+    ]);
+    let layoutType = cardViewLayout.layoutType;
+    let stringFormatter = (0, $iOsT7$useLocalizedStringFormatter)((0, ($parcel$interopDefault($iOsT7$intlStringsmodulejs))), "@react-spectrum/card");
+    let { direction: direction } = (0, $iOsT7$useLocale)();
+    let { collection: collection } = (0, $iOsT7$useListState)(props);
+    let gridCollection = (0, $iOsT7$useMemo)(()=>new (0, $iOsT7$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, $iOsT7$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, $iOsT7$useGrid)({
+        ...props,
+        isVirtualized: true,
+        keyboardDelegate: cardViewLayout
+    }, state, domRef);
+    let renderWrapper = (parent, reusableView)=>/*#__PURE__*/ (0, $iOsT7$react).createElement((0, $iOsT7$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, $iOsT7$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, $iOsT7$react).createElement((0, $8d180a244893de14$export$64992ac69f286e5c).Provider, {
+        value: {
+            state: state,
+            isQuiet: isQuiet,
+            layout: cardViewLayout,
+            cardOrientation: cardOrientation
+        }
+    }, /*#__PURE__*/ (0, $iOsT7$react).createElement((0, $iOsT7$Virtualizer), {
+        ...gridProps,
+        ...styleProps,
+        className: (0, $iOsT7$classNames)((0, ($parcel$interopDefault($iOsT7$card_vars_cssmodulejs))), "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, $iOsT7$react).createElement($81a52da995c19652$var$InternalCard, {
+            item: item
+        });
+        else if (type === "loader") return /*#__PURE__*/ (0, $iOsT7$react).createElement($81a52da995c19652$var$CenteredWrapper, null, /*#__PURE__*/ (0, $iOsT7$react).createElement((0, $iOsT7$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, $iOsT7$react).createElement($81a52da995c19652$var$CenteredWrapper, null, emptyState);
+        }
+    }));
+}
+function $81a52da995c19652$var$CenteredWrapper({ children: children }) {
+    let { state: state } = (0, $8d180a244893de14$export$fea0b38586ec8f13)();
+    return /*#__PURE__*/ (0, $iOsT7$react).createElement("div", {
+        role: "row",
+        "aria-rowindex": state.collection.size + 1,
+        className: (0, $iOsT7$classNames)((0, ($parcel$interopDefault($iOsT7$card_vars_cssmodulejs))), "spectrum-CardView-centeredWrapper")
+    }, /*#__PURE__*/ (0, $iOsT7$react).createElement("div", {
+        role: "gridcell"
+    }, children));
+}
+function $81a52da995c19652$var$InternalCard(props) {
+    let { item: item } = props;
+    let cellNode = [
+        ...item.childNodes
+    ][0];
+    let { state: state, cardOrientation: cardOrientation, isQuiet: isQuiet, layout: layout } = (0, $8d180a244893de14$export$fea0b38586ec8f13)();
+    let layoutType = layout.layoutType;
+    let rowRef = (0, $iOsT7$useRef)();
+    let cellRef = (0, $iOsT7$useRef)();
+    let unwrappedRef = (0, $iOsT7$useUnwrapDOMRef)(cellRef);
+    let { rowProps: gridRowProps } = (0, $iOsT7$useGridRow)({
+        node: item,
+        isVirtualized: true
+    }, state, rowRef);
+    let { gridCellProps: gridCellProps } = (0, $iOsT7$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, $iOsT7$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, $iOsT7$react).createElement("div", {
+        ...rowProps,
+        ref: rowRef,
+        className: (0, $iOsT7$classNames)((0, ($parcel$interopDefault($iOsT7$card_vars_cssmodulejs))), "spectrum-CardView-row")
+    }, /*#__PURE__*/ (0, $iOsT7$react).createElement((0, $643dd8fa80926f94$export$7a6ccaf429ad93a8), {
+        ref: cellRef,
+        articleProps: gridCellProps,
+        isQuiet: isQuiet,
+        orientation: cardOrientation,
+        item: item,
+        layout: layoutType
+    }, item.rendered));
+}
+/**
+ * TODO: Add description of component here.
+ */ const $81a52da995c19652$export$7e52c821f7b6f422 = /*#__PURE__*/ (0, $iOsT7$react).forwardRef($81a52da995c19652$var$CardView);
+
+
+export {$81a52da995c19652$export$7e52c821f7b6f422 as CardView};
+//# sourceMappingURL=CardView.mjs.map

package/dist/CardView.module.js

@@ -0,0 +1,227 @@
+import {CardBase as $643dd8fa80926f94$export$7a6ccaf429ad93a8} from "./CardBase.module.js";
+import {CardViewContext as $8d180a244893de14$export$64992ac69f286e5c, useCardViewContext as $8d180a244893de14$export$fea0b38586ec8f13} from "./CardViewContext.module.js";
+import $iOsT7$intlStringsmodulejs from "./intlStrings.module.js";
+import "./vars.e5a6cd16.css";
+import $iOsT7$card_vars_cssmodulejs from "./card_vars_css.module.js";
+import {useStyleProps as $iOsT7$useStyleProps, useDOMRef as $iOsT7$useDOMRef, classNames as $iOsT7$classNames, useUnwrapDOMRef as $iOsT7$useUnwrapDOMRef} from "@react-spectrum/utils";
+import {GridCollection as $iOsT7$GridCollection, useGridState as $iOsT7$useGridState} from "@react-stately/grid";
+import {mergeProps as $iOsT7$mergeProps} from "@react-aria/utils";
+import {ProgressCircle as $iOsT7$ProgressCircle} from "@react-spectrum/progress";
+import $iOsT7$react, {useMemo as $iOsT7$useMemo, useCallback as $iOsT7$useCallback, useRef as $iOsT7$useRef} from "react";
+import {useCollator as $iOsT7$useCollator, useLocalizedStringFormatter as $iOsT7$useLocalizedStringFormatter, useLocale as $iOsT7$useLocale} from "@react-aria/i18n";
+import {useGrid as $iOsT7$useGrid, useGridRow as $iOsT7$useGridRow, useGridCell as $iOsT7$useGridCell} from "@react-aria/grid";
+import {useListState as $iOsT7$useListState} from "@react-stately/list";
+import {useProvider as $iOsT7$useProvider} from "@react-spectrum/provider";
+import {VirtualizerItem as $iOsT7$VirtualizerItem, Virtualizer as $iOsT7$Virtualizer} from "@react-aria/virtualizer";
+
+
+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 $81a52da995c19652$var$CardView(props, ref) {
+    let { scale: scale } = (0, $iOsT7$useProvider)();
+    let { styleProps: styleProps } = (0, $iOsT7$useStyleProps)(props);
+    let domRef = (0, $iOsT7$useDOMRef)(ref);
+    let { isQuiet: isQuiet, renderEmptyState: renderEmptyState, layout: layout, loadingState: loadingState, onLoadMore: onLoadMore, cardOrientation: cardOrientation = "vertical" } = props;
+    let collator = (0, $iOsT7$useCollator)({
+        usage: "search",
+        sensitivity: "base"
+    });
+    let isLoading = loadingState === "loading" || loadingState === "loadingMore";
+    let cardViewLayout = (0, $iOsT7$useMemo)(()=>typeof layout === "function" ? new layout({
+            collator: collator,
+            cardOrientation: cardOrientation,
+            scale: scale
+        }) : layout, [
+        layout,
+        collator,
+        cardOrientation,
+        scale
+    ]);
+    let layoutType = cardViewLayout.layoutType;
+    let stringFormatter = (0, $iOsT7$useLocalizedStringFormatter)((0, ($parcel$interopDefault($iOsT7$intlStringsmodulejs))), "@react-spectrum/card");
+    let { direction: direction } = (0, $iOsT7$useLocale)();
+    let { collection: collection } = (0, $iOsT7$useListState)(props);
+    let gridCollection = (0, $iOsT7$useMemo)(()=>new (0, $iOsT7$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, $iOsT7$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, $iOsT7$useGrid)({
+        ...props,
+        isVirtualized: true,
+        keyboardDelegate: cardViewLayout
+    }, state, domRef);
+    let renderWrapper = (parent, reusableView)=>/*#__PURE__*/ (0, $iOsT7$react).createElement((0, $iOsT7$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, $iOsT7$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, $iOsT7$react).createElement((0, $8d180a244893de14$export$64992ac69f286e5c).Provider, {
+        value: {
+            state: state,
+            isQuiet: isQuiet,
+            layout: cardViewLayout,
+            cardOrientation: cardOrientation
+        }
+    }, /*#__PURE__*/ (0, $iOsT7$react).createElement((0, $iOsT7$Virtualizer), {
+        ...gridProps,
+        ...styleProps,
+        className: (0, $iOsT7$classNames)((0, ($parcel$interopDefault($iOsT7$card_vars_cssmodulejs))), "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, $iOsT7$react).createElement($81a52da995c19652$var$InternalCard, {
+            item: item
+        });
+        else if (type === "loader") return /*#__PURE__*/ (0, $iOsT7$react).createElement($81a52da995c19652$var$CenteredWrapper, null, /*#__PURE__*/ (0, $iOsT7$react).createElement((0, $iOsT7$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, $iOsT7$react).createElement($81a52da995c19652$var$CenteredWrapper, null, emptyState);
+        }
+    }));
+}
+function $81a52da995c19652$var$CenteredWrapper({ children: children }) {
+    let { state: state } = (0, $8d180a244893de14$export$fea0b38586ec8f13)();
+    return /*#__PURE__*/ (0, $iOsT7$react).createElement("div", {
+        role: "row",
+        "aria-rowindex": state.collection.size + 1,
+        className: (0, $iOsT7$classNames)((0, ($parcel$interopDefault($iOsT7$card_vars_cssmodulejs))), "spectrum-CardView-centeredWrapper")
+    }, /*#__PURE__*/ (0, $iOsT7$react).createElement("div", {
+        role: "gridcell"
+    }, children));
+}
+function $81a52da995c19652$var$InternalCard(props) {
+    let { item: item } = props;
+    let cellNode = [
+        ...item.childNodes
+    ][0];
+    let { state: state, cardOrientation: cardOrientation, isQuiet: isQuiet, layout: layout } = (0, $8d180a244893de14$export$fea0b38586ec8f13)();
+    let layoutType = layout.layoutType;
+    let rowRef = (0, $iOsT7$useRef)();
+    let cellRef = (0, $iOsT7$useRef)();
+    let unwrappedRef = (0, $iOsT7$useUnwrapDOMRef)(cellRef);
+    let { rowProps: gridRowProps } = (0, $iOsT7$useGridRow)({
+        node: item,
+        isVirtualized: true
+    }, state, rowRef);
+    let { gridCellProps: gridCellProps } = (0, $iOsT7$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, $iOsT7$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, $iOsT7$react).createElement("div", {
+        ...rowProps,
+        ref: rowRef,
+        className: (0, $iOsT7$classNames)((0, ($parcel$interopDefault($iOsT7$card_vars_cssmodulejs))), "spectrum-CardView-row")
+    }, /*#__PURE__*/ (0, $iOsT7$react).createElement((0, $643dd8fa80926f94$export$7a6ccaf429ad93a8), {
+        ref: cellRef,
+        articleProps: gridCellProps,
+        isQuiet: isQuiet,
+        orientation: cardOrientation,
+        item: item,
+        layout: layoutType
+    }, item.rendered));
+}
+/**
+ * TODO: Add description of component here.
+ */ const $81a52da995c19652$export$7e52c821f7b6f422 = /*#__PURE__*/ (0, $iOsT7$react).forwardRef($81a52da995c19652$var$CardView);
+
+
+export {$81a52da995c19652$export$7e52c821f7b6f422 as CardView};
+//# sourceMappingURL=CardView.module.js.map

package/dist/CardView.module.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-spectrum/card/src/CardView.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 {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 stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/card');\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  cardViewLayout.isLoading = isLoading;\n  cardViewLayout.direction = direction;\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 = (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 margin = cardViewLayout.margin || 0;\n  let virtualizer = cardViewLayout.virtualizer;\n  let scrollToItem = useCallback((key) => {\n    virtualizer && virtualizer.scrollToItem(key, {\n      duration: 0,\n      offsetY: margin\n    });\n  }, [margin, virtualizer]);\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}}>\n      <Virtualizer\n        {...gridProps}\n        {...styleProps}\n        className={classNames(styles, 'spectrum-CardView')}\n        ref={domRef}\n        focusedKey={focusedKey}\n        scrollDirection=\"vertical\"\n        layout={cardViewLayout}\n        collection={gridCollection}\n        isLoading={isLoading}\n        onLoadMore={onLoadMore}\n        renderWrapper={renderWrapper}\n        transitionDuration={isLoading ? 160 : 220}\n        scrollToItem={scrollToItem}>\n        {(type, item) => {\n          if (type === 'item') {\n            return (\n              <InternalCard item={item} />\n            );\n          } else if (type === 'loader') {\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          } else if (type === 'placeholder') {\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        }}\n      </Virtualizer>\n    </CardViewContext.Provider>\n\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();\n  let cellRef = useRef<DOMRefValue<HTMLDivElement>>();\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"}

package/dist/CardViewContext.main.js

@@ -0,0 +1,31 @@
+var $g0nMI$react = require("react");
+
+
+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, "CardViewContext", () => $e57ab98cef2f01a5$export$64992ac69f286e5c);
+$parcel$export(module.exports, "useCardViewContext", () => $e57ab98cef2f01a5$export$fea0b38586ec8f13);
+/*
+ * Copyright 2020 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.
+ */ 
+const $e57ab98cef2f01a5$export$64992ac69f286e5c = /*#__PURE__*/ (0, ($parcel$interopDefault($g0nMI$react))).createContext(null);
+function $e57ab98cef2f01a5$export$fea0b38586ec8f13() {
+    return (0, $g0nMI$react.useContext)($e57ab98cef2f01a5$export$64992ac69f286e5c);
+}
+
+
+//# sourceMappingURL=CardViewContext.main.js.map

package/dist/CardViewContext.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;AAIM,MAAM,0DAAkB,CAAA,GAAA,sCAAI,EAAE,aAAa,CAAC;AAE5C,SAAS;IACd,OAAO,CAAA,GAAA,uBAAS,EAAE;AACpB","sources":["packages/@react-spectrum/card/src/CardViewContext.tsx"],"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\nimport React, {useContext} from 'react';\n\nexport const CardViewContext = React.createContext(null);\n\nexport function useCardViewContext() {\n  return useContext(CardViewContext);\n}\n"],"names":[],"version":3,"file":"CardViewContext.main.js.map"}

package/dist/CardViewContext.mjs

@@ -0,0 +1,21 @@
+import $ip66o$react, {useContext as $ip66o$useContext} from "react";
+
+/*
+ * Copyright 2020 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.
+ */ 
+const $8d180a244893de14$export$64992ac69f286e5c = /*#__PURE__*/ (0, $ip66o$react).createContext(null);
+function $8d180a244893de14$export$fea0b38586ec8f13() {
+    return (0, $ip66o$useContext)($8d180a244893de14$export$64992ac69f286e5c);
+}
+
+
+export {$8d180a244893de14$export$64992ac69f286e5c as CardViewContext, $8d180a244893de14$export$fea0b38586ec8f13 as useCardViewContext};
+//# sourceMappingURL=CardViewContext.mjs.map

package/dist/CardViewContext.module.js

@@ -0,0 +1,21 @@
+import $ip66o$react, {useContext as $ip66o$useContext} from "react";
+
+/*
+ * Copyright 2020 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.
+ */ 
+const $8d180a244893de14$export$64992ac69f286e5c = /*#__PURE__*/ (0, $ip66o$react).createContext(null);
+function $8d180a244893de14$export$fea0b38586ec8f13() {
+    return (0, $ip66o$useContext)($8d180a244893de14$export$64992ac69f286e5c);
+}
+
+
+export {$8d180a244893de14$export$64992ac69f286e5c as CardViewContext, $8d180a244893de14$export$fea0b38586ec8f13 as useCardViewContext};
+//# sourceMappingURL=CardViewContext.module.js.map

package/dist/CardViewContext.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;AAAA;;;;;;;;;;CAUC;AAIM,MAAM,0DAAkB,CAAA,GAAA,YAAI,EAAE,aAAa,CAAC;AAE5C,SAAS;IACd,OAAO,CAAA,GAAA,iBAAS,EAAE;AACpB","sources":["packages/@react-spectrum/card/src/CardViewContext.tsx"],"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\nimport React, {useContext} from 'react';\n\nexport const CardViewContext = React.createContext(null);\n\nexport function useCardViewContext() {\n  return useContext(CardViewContext);\n}\n"],"names":[],"version":3,"file":"CardViewContext.module.js.map"}