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

package/dist/CardBase.module.js

@@ -37,7 +37,7 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
     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 { 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);
@@ -49,7 +49,7 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
     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
+        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)({
@@ -57,13 +57,13 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
         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 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;
+        if (orientation !== 'horizontal') return;
         let cardHeight = gridRef.current.getBoundingClientRect().height;
         setHeight(cardHeight);
     }, [
@@ -76,35 +76,35 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
         onResize: updateHeight
     });
     let aspectRatioEnforce = undefined;
-    if (orientation === "horizontal" && !isNaN(height)) aspectRatioEnforce = {
+    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: "",
+                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"),
+                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"
+                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"),
+                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"),
+                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")
+                UNSAFE_className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-detail')
             }
         }), [
         titleProps,
@@ -119,7 +119,7 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
             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.");
+                    console.warn('Card does not support focusable elements, please contact the team regarding your use case.');
                     break;
                 }
                 nextNode = walker.nextNode();
@@ -129,42 +129,42 @@ function $643dd8fa80926f94$var$CardBase(props, ref) {
         children
     ]);
     return /*#__PURE__*/ (0, $8eFIe$react).createElement((0, $8eFIe$FocusRing), {
-        focusRingClass: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), "focus-ring")
+        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"
+        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")
+        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"),
+        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")
+        className: (0, $8eFIe$classNames)((0, ($parcel$interopDefault($8eFIe$card_vars_cssmodulejs))), 'spectrum-Card-decoration')
     }))));
 }
 function $643dd8fa80926f94$var$useCard(props) {
@@ -183,8 +183,8 @@ function $643dd8fa80926f94$var$useCard(props) {
     return {
         cardProps: {
             ...(0, $8eFIe$filterDOMProps)(props),
-            "aria-labelledby": titleId,
-            "aria-describedby": descriptionId,
+            'aria-labelledby': titleId,
+            'aria-describedby': descriptionId,
             tabIndex: 0
         },
         titleProps: titleProps,

package/dist/CardView.main.js

@@ -52,13 +52,13 @@ 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 { isQuiet: isQuiet, renderEmptyState: renderEmptyState, layout: layout, loadingState: loadingState, onLoadMore: onLoadMore, cardOrientation: cardOrientation = 'vertical' } = props;
     let collator = (0, $kFdxB$reactariai18n.useCollator)({
-        usage: "search",
-        sensitivity: "base"
+        usage: 'search',
+        sensitivity: 'base'
     });
-    let isLoading = loadingState === "loading" || loadingState === "loadingMore";
-    let cardViewLayout = (0, $kFdxB$react.useMemo)(()=>typeof layout === "function" ? new layout({
+    let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
+    let cardViewLayout = (0, $kFdxB$react.useMemo)(()=>typeof layout === 'function' ? new layout({
             collator: collator,
             cardOrientation: cardOrientation,
             scale: scale
@@ -69,7 +69,7 @@ function $514a55f6d91f25ef$var$CardView(props, ref) {
         scale
     ]);
     let layoutType = cardViewLayout.layoutType;
-    let stringFormatter = (0, $kFdxB$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($85c597beff94758b$exports))), "@react-spectrum/card");
+    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)({
@@ -83,7 +83,7 @@ function $514a55f6d91f25ef$var$CardView(props, ref) {
                     childNodes: [
                         {
                             key: `cell-${item.key}`,
-                            type: "cell",
+                            type: 'cell',
                             value: null,
                             level: 0,
                             rendered: null,
@@ -98,9 +98,9 @@ function $514a55f6d91f25ef$var$CardView(props, ref) {
     ]);
     let state = (0, $kFdxB$reactstatelygrid.useGridState)({
         ...props,
-        selectionMode: cardOrientation === "horizontal" && layoutType === "grid" ? "none" : props.selectionMode,
+        selectionMode: cardOrientation === 'horizontal' && layoutType === 'grid' ? 'none' : props.selectionMode,
         collection: gridCollection,
-        focusMode: "cell"
+        focusMode: 'cell'
     });
     cardViewLayout.collection = gridCollection;
     cardViewLayout.disabledKeys = state.disabledKeys;
@@ -142,7 +142,7 @@ function $514a55f6d91f25ef$var$CardView(props, ref) {
     }, /*#__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"),
+        className: (0, $kFdxB$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-CardView'),
         ref: domRef,
         focusedKey: focusedKey,
         scrollDirection: "vertical",
@@ -154,14 +154,14 @@ function $514a55f6d91f25ef$var$CardView(props, ref) {
         transitionDuration: isLoading ? 160 : 220,
         scrollToItem: scrollToItem
     }, (type, item)=>{
-        if (type === "item") return /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement($514a55f6d91f25ef$var$InternalCard, {
+        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), {
+        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")
+            "aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')
         }));
-        else if (type === "placeholder") {
+        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);
@@ -173,7 +173,7 @@ function $514a55f6d91f25ef$var$CenteredWrapper({ children: children }) {
     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")
+        className: (0, $kFdxB$reactspectrumutils.classNames)((0, ($parcel$interopDefault($71570f0038472fa2$exports))), 'spectrum-CardView-centeredWrapper')
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($kFdxB$react))).createElement("div", {
         role: "gridcell"
     }, children));
@@ -194,19 +194,19 @@ function $514a55f6d91f25ef$var$InternalCard(props) {
     }, state, rowRef);
     let { gridCellProps: gridCellProps } = (0, $kFdxB$reactariagrid.useGridCell)({
         node: cellNode,
-        focusMode: "cell"
+        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 allowsInteraction = state.selectionManager.selectionMode !== 'none';
     let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
     let onKeyDown = (e)=>{
-        if (e.key === " " && isDisabled) e.preventDefault();
+        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";
+    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.
@@ -214,7 +214,7 @@ function $514a55f6d91f25ef$var$InternalCard(props) {
     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")
+        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,

package/dist/CardView.mjs

@@ -46,13 +46,13 @@ 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 { isQuiet: isQuiet, renderEmptyState: renderEmptyState, layout: layout, loadingState: loadingState, onLoadMore: onLoadMore, cardOrientation: cardOrientation = 'vertical' } = props;
     let collator = (0, $iOsT7$useCollator)({
-        usage: "search",
-        sensitivity: "base"
+        usage: 'search',
+        sensitivity: 'base'
     });
-    let isLoading = loadingState === "loading" || loadingState === "loadingMore";
-    let cardViewLayout = (0, $iOsT7$useMemo)(()=>typeof layout === "function" ? new layout({
+    let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
+    let cardViewLayout = (0, $iOsT7$useMemo)(()=>typeof layout === 'function' ? new layout({
             collator: collator,
             cardOrientation: cardOrientation,
             scale: scale
@@ -63,7 +63,7 @@ function $81a52da995c19652$var$CardView(props, ref) {
         scale
     ]);
     let layoutType = cardViewLayout.layoutType;
-    let stringFormatter = (0, $iOsT7$useLocalizedStringFormatter)((0, ($parcel$interopDefault($iOsT7$intlStringsmodulejs))), "@react-spectrum/card");
+    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)({
@@ -77,7 +77,7 @@ function $81a52da995c19652$var$CardView(props, ref) {
                     childNodes: [
                         {
                             key: `cell-${item.key}`,
-                            type: "cell",
+                            type: 'cell',
                             value: null,
                             level: 0,
                             rendered: null,
@@ -92,9 +92,9 @@ function $81a52da995c19652$var$CardView(props, ref) {
     ]);
     let state = (0, $iOsT7$useGridState)({
         ...props,
-        selectionMode: cardOrientation === "horizontal" && layoutType === "grid" ? "none" : props.selectionMode,
+        selectionMode: cardOrientation === 'horizontal' && layoutType === 'grid' ? 'none' : props.selectionMode,
         collection: gridCollection,
-        focusMode: "cell"
+        focusMode: 'cell'
     });
     cardViewLayout.collection = gridCollection;
     cardViewLayout.disabledKeys = state.disabledKeys;
@@ -136,7 +136,7 @@ function $81a52da995c19652$var$CardView(props, ref) {
     }, /*#__PURE__*/ (0, $iOsT7$react).createElement((0, $iOsT7$Virtualizer), {
         ...gridProps,
         ...styleProps,
-        className: (0, $iOsT7$classNames)((0, ($parcel$interopDefault($iOsT7$card_vars_cssmodulejs))), "spectrum-CardView"),
+        className: (0, $iOsT7$classNames)((0, ($parcel$interopDefault($iOsT7$card_vars_cssmodulejs))), 'spectrum-CardView'),
         ref: domRef,
         focusedKey: focusedKey,
         scrollDirection: "vertical",
@@ -148,14 +148,14 @@ function $81a52da995c19652$var$CardView(props, ref) {
         transitionDuration: isLoading ? 160 : 220,
         scrollToItem: scrollToItem
     }, (type, item)=>{
-        if (type === "item") return /*#__PURE__*/ (0, $iOsT7$react).createElement($81a52da995c19652$var$InternalCard, {
+        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), {
+        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")
+            "aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')
         }));
-        else if (type === "placeholder") {
+        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);
@@ -167,7 +167,7 @@ function $81a52da995c19652$var$CenteredWrapper({ children: children }) {
     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")
+        className: (0, $iOsT7$classNames)((0, ($parcel$interopDefault($iOsT7$card_vars_cssmodulejs))), 'spectrum-CardView-centeredWrapper')
     }, /*#__PURE__*/ (0, $iOsT7$react).createElement("div", {
         role: "gridcell"
     }, children));
@@ -188,19 +188,19 @@ function $81a52da995c19652$var$InternalCard(props) {
     }, state, rowRef);
     let { gridCellProps: gridCellProps } = (0, $iOsT7$useGridCell)({
         node: cellNode,
-        focusMode: "cell"
+        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 allowsInteraction = state.selectionManager.selectionMode !== 'none';
     let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
     let onKeyDown = (e)=>{
-        if (e.key === " " && isDisabled) e.preventDefault();
+        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";
+    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.
@@ -208,7 +208,7 @@ function $81a52da995c19652$var$InternalCard(props) {
     return /*#__PURE__*/ (0, $iOsT7$react).createElement("div", {
         ...rowProps,
         ref: rowRef,
-        className: (0, $iOsT7$classNames)((0, ($parcel$interopDefault($iOsT7$card_vars_cssmodulejs))), "spectrum-CardView-row")
+        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,
@@ -224,4 +224,4 @@ function $81a52da995c19652$var$InternalCard(props) {
 
 
 export {$81a52da995c19652$export$7e52c821f7b6f422 as CardView};
-//# sourceMappingURL=CardView.mjs.map
+//# sourceMappingURL=CardView.module.js.map

package/dist/CardView.module.js

@@ -46,13 +46,13 @@ 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 { isQuiet: isQuiet, renderEmptyState: renderEmptyState, layout: layout, loadingState: loadingState, onLoadMore: onLoadMore, cardOrientation: cardOrientation = 'vertical' } = props;
     let collator = (0, $iOsT7$useCollator)({
-        usage: "search",
-        sensitivity: "base"
+        usage: 'search',
+        sensitivity: 'base'
     });
-    let isLoading = loadingState === "loading" || loadingState === "loadingMore";
-    let cardViewLayout = (0, $iOsT7$useMemo)(()=>typeof layout === "function" ? new layout({
+    let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
+    let cardViewLayout = (0, $iOsT7$useMemo)(()=>typeof layout === 'function' ? new layout({
             collator: collator,
             cardOrientation: cardOrientation,
             scale: scale
@@ -63,7 +63,7 @@ function $81a52da995c19652$var$CardView(props, ref) {
         scale
     ]);
     let layoutType = cardViewLayout.layoutType;
-    let stringFormatter = (0, $iOsT7$useLocalizedStringFormatter)((0, ($parcel$interopDefault($iOsT7$intlStringsmodulejs))), "@react-spectrum/card");
+    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)({
@@ -77,7 +77,7 @@ function $81a52da995c19652$var$CardView(props, ref) {
                     childNodes: [
                         {
                             key: `cell-${item.key}`,
-                            type: "cell",
+                            type: 'cell',
                             value: null,
                             level: 0,
                             rendered: null,
@@ -92,9 +92,9 @@ function $81a52da995c19652$var$CardView(props, ref) {
     ]);
     let state = (0, $iOsT7$useGridState)({
         ...props,
-        selectionMode: cardOrientation === "horizontal" && layoutType === "grid" ? "none" : props.selectionMode,
+        selectionMode: cardOrientation === 'horizontal' && layoutType === 'grid' ? 'none' : props.selectionMode,
         collection: gridCollection,
-        focusMode: "cell"
+        focusMode: 'cell'
     });
     cardViewLayout.collection = gridCollection;
     cardViewLayout.disabledKeys = state.disabledKeys;
@@ -136,7 +136,7 @@ function $81a52da995c19652$var$CardView(props, ref) {
     }, /*#__PURE__*/ (0, $iOsT7$react).createElement((0, $iOsT7$Virtualizer), {
         ...gridProps,
         ...styleProps,
-        className: (0, $iOsT7$classNames)((0, ($parcel$interopDefault($iOsT7$card_vars_cssmodulejs))), "spectrum-CardView"),
+        className: (0, $iOsT7$classNames)((0, ($parcel$interopDefault($iOsT7$card_vars_cssmodulejs))), 'spectrum-CardView'),
         ref: domRef,
         focusedKey: focusedKey,
         scrollDirection: "vertical",
@@ -148,14 +148,14 @@ function $81a52da995c19652$var$CardView(props, ref) {
         transitionDuration: isLoading ? 160 : 220,
         scrollToItem: scrollToItem
     }, (type, item)=>{
-        if (type === "item") return /*#__PURE__*/ (0, $iOsT7$react).createElement($81a52da995c19652$var$InternalCard, {
+        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), {
+        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")
+            "aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')
         }));
-        else if (type === "placeholder") {
+        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);
@@ -167,7 +167,7 @@ function $81a52da995c19652$var$CenteredWrapper({ children: children }) {
     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")
+        className: (0, $iOsT7$classNames)((0, ($parcel$interopDefault($iOsT7$card_vars_cssmodulejs))), 'spectrum-CardView-centeredWrapper')
     }, /*#__PURE__*/ (0, $iOsT7$react).createElement("div", {
         role: "gridcell"
     }, children));
@@ -188,19 +188,19 @@ function $81a52da995c19652$var$InternalCard(props) {
     }, state, rowRef);
     let { gridCellProps: gridCellProps } = (0, $iOsT7$useGridCell)({
         node: cellNode,
-        focusMode: "cell"
+        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 allowsInteraction = state.selectionManager.selectionMode !== 'none';
     let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
     let onKeyDown = (e)=>{
-        if (e.key === " " && isDisabled) e.preventDefault();
+        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";
+    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.
@@ -208,7 +208,7 @@ function $81a52da995c19652$var$InternalCard(props) {
     return /*#__PURE__*/ (0, $iOsT7$react).createElement("div", {
         ...rowProps,
         ref: rowRef,
-        className: (0, $iOsT7$classNames)((0, ($parcel$interopDefault($iOsT7$card_vars_cssmodulejs))), "spectrum-CardView-row")
+        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,

package/dist/CardViewContext.mjs

@@ -18,4 +18,4 @@ function $8d180a244893de14$export$fea0b38586ec8f13() {
 
 
 export {$8d180a244893de14$export$64992ac69f286e5c as CardViewContext, $8d180a244893de14$export$fea0b38586ec8f13 as useCardViewContext};
-//# sourceMappingURL=CardViewContext.mjs.map
+//# sourceMappingURL=CardViewContext.module.js.map

package/dist/GalleryLayout.main.js

@@ -33,8 +33,8 @@ const $8019a3d2c7d098ea$var$DEFAULT_OPTIONS = {
         minItemSize: new (0, $lJHSi$reactstatelyvirtualizer.Size)(136, 136),
         itemSpacing: new (0, $lJHSi$reactstatelyvirtualizer.Size)(18, 18),
         itemPadding: {
-            "medium": 78,
-            "large": 99
+            'medium': 78,
+            'large': 99
         },
         dropSpacing: 100,
         margin: 24
@@ -42,7 +42,7 @@ const $8019a3d2c7d098ea$var$DEFAULT_OPTIONS = {
 };
 class $8019a3d2c7d098ea$export$8e52095834484b61 extends (0, $5ee605f09afaa4de$exports.BaseLayout) {
     get layoutType() {
-        return "gallery";
+        return 'gallery';
     }
     /**
    * Takes a row of widths and if there are any widths smaller than the min-width, leech width starting from
@@ -84,7 +84,7 @@ class $8019a3d2c7d098ea$export$8e52095834484b61 extends (0, $5ee605f09afaa4de$ex
         let visibleHeight = this.virtualizer.visibleRect.height;
         let y = this.margin;
         let availableWidth = visibleWidth - this.margin * 2;
-        // If avaliable width is not greater than 0, skip node layout calculations
+        // If available width is not greater than 0, skip node layout calculations
         if (availableWidth > 0) {
             // Compute aspect ratios for all of the items, and the total width if all items were on in a single row.
             let ratios = [];
@@ -147,21 +147,21 @@ class $8019a3d2c7d098ea$export$8e52095834484b61 extends (0, $5ee605f09afaa4de$ex
             if (this.isLoading) {
                 let loaderY = y;
                 let loaderHeight = 60;
-                // If there aren't any items, make loader take all avaliable room and remove margin from y calculation
+                // If there aren't any items, make loader take all available room and remove margin from y calculation
                 // so it doesn't scroll
                 if (this.collection.size === 0) {
                     loaderY = 0;
                     loaderHeight = visibleHeight || 60;
                 }
                 let rect = new (0, $lJHSi$reactstatelyvirtualizer.Rect)(0, loaderY, visibleWidth, loaderHeight);
-                let loader = new (0, $lJHSi$reactstatelyvirtualizer.LayoutInfo)("loader", "loader", rect);
-                this.layoutInfos.set("loader", loader);
+                let loader = new (0, $lJHSi$reactstatelyvirtualizer.LayoutInfo)('loader', 'loader', rect);
+                this.layoutInfos.set('loader', loader);
                 y = loader.rect.maxY;
             }
             if (this.collection.size === 0 && !this.isLoading) {
                 let rect = new (0, $lJHSi$reactstatelyvirtualizer.Rect)(0, 0, visibleWidth, visibleHeight);
-                let placeholder = new (0, $lJHSi$reactstatelyvirtualizer.LayoutInfo)("placeholder", "placeholder", rect);
-                this.layoutInfos.set("placeholder", placeholder);
+                let placeholder = new (0, $lJHSi$reactstatelyvirtualizer.LayoutInfo)('placeholder', 'placeholder', rect);
+                this.layoutInfos.set('placeholder', placeholder);
                 y = placeholder.rect.maxY;
             }
         }
@@ -169,7 +169,7 @@ class $8019a3d2c7d098ea$export$8e52095834484b61 extends (0, $5ee605f09afaa4de$ex
     }
     constructor(options = {}){
         super(options);
-        let cardSize = "L";
+        let cardSize = 'L';
         this.idealRowHeight = options.idealRowHeight || $8019a3d2c7d098ea$var$DEFAULT_OPTIONS[cardSize].idealRowHeight;
         this.itemSpacing = options.itemSpacing || $8019a3d2c7d098ea$var$DEFAULT_OPTIONS[cardSize].itemSpacing;
         this.itemPadding = options.itemPadding != null ? options.itemPadding : $8019a3d2c7d098ea$var$DEFAULT_OPTIONS[cardSize].itemPadding[this.scale];