@react-spectrum/s2 0.9.2 → 0.10.1

package/src/Calendar.tsx

@@ -10,38 +10,554 @@
  * governing permissions and limitations under the License.
  */
 
+import {ActionButton, Header, HeaderContext, Heading, HeadingContext, pressScale} from './';
 import {
   Calendar as AriaCalendar,
+  CalendarCell as AriaCalendarCell,
+  CalendarGrid as AriaCalendarGrid,
+  CalendarHeaderCell as AriaCalendarHeaderCell,
   CalendarProps as AriaCalendarProps,
-  Button,
-  CalendarCell,
-  CalendarGrid,
+  ButtonProps,
+  CalendarCellProps,
+  CalendarCellRenderProps,
+  CalendarGridBody,
+  CalendarGridHeader,
+  CalendarHeaderCellProps,
+  CalendarState,
+  CalendarStateContext,
+  ContextValue,
   DateValue,
-  Heading,
+  Provider,
+  RangeCalendarState,
+  RangeCalendarStateContext,
   Text
 } from 'react-aria-components';
-import {ReactNode} from 'react';
+import {AriaCalendarGridProps} from '@react-aria/calendar';
+import {baseColor, focusRing, lightDark, style} from '../style' with {type: 'macro'};
+import {
+  CalendarDate,
+  getDayOfWeek,
+  startOfMonth
+} from '@internationalized/date';
+import ChevronLeftIcon from '../s2wf-icons/S2_Icon_ChevronLeft_20_N.svg';
+import ChevronRightIcon from '../s2wf-icons/S2_Icon_ChevronRight_20_N.svg';
+import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
+import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {helpTextStyles} from './Field';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import React, {createContext, CSSProperties, ForwardedRef, forwardRef, Fragment, PropsWithChildren, ReactElement, ReactNode, useContext, useMemo, useRef} from 'react';
+import {useDateFormatter, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
 export interface CalendarProps<T extends DateValue>
-  extends AriaCalendarProps<T> {
-  errorMessage?: string
+  extends Omit<AriaCalendarProps<T>, 'visibleDuration' | 'style' | 'className' | 'styles' | keyof GlobalDOMAttributes>,
+  StyleProps {
+  /**
+   * The error message to display when the calendar is invalid.
+   */
+  errorMessage?: ReactNode,
+  /**
+   * The number of months to display at once.
+   * @default 1
+   */
+  visibleMonths?: number
 }
 
-export function Calendar<T extends DateValue>(
-  {errorMessage, ...props}: CalendarProps<T>
-): ReactNode {
+export const CalendarContext = createContext<ContextValue<Partial<CalendarProps<any>>, HTMLDivElement>>(null);
+
+const calendarStyles = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 24,
+  width: 'fit',
+  disableTapHighlight: true
+}, getAllowedOverrides());
+
+const headerStyles = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: 'full'
+});
+
+const headingStyles = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  margin: 0,
+  width: 'full'
+});
+
+const titleStyles = style({
+  font: 'title-lg',
+  textAlign: 'center',
+  flexGrow: 1,
+  flexShrink: 0,
+  flexBasis: '0%',
+  minWidth: 0
+});
+
+const headerCellStyles = style({
+  font: 'title-sm',
+  cursor: 'default',
+  textAlign: 'center',
+  paddingStart: {
+    default: 4,
+    ':first-child': 0
+  },
+  paddingEnd: {
+    default: 4,
+    ':last-child': 0
+  },
+  paddingBottom: 12
+});
+
+const cellStyles = style({
+  outlineStyle: 'none',
+  '--cell-gap': {
+    type: 'paddingStart',
+    value: 4
+  },
+  paddingStart: {
+    default: 4,
+    isFirstChild: 0
+  },
+  paddingEnd: {
+    default: 4,
+    isLastChild: 0
+  },
+  paddingTop: {
+    default: 2,
+    isFirstWeek: 0
+  },
+  paddingBottom: 2,
+  position: 'relative',
+  width: 32,
+  height: 32,
+  display: {
+    default: 'flex',
+    isOutsideMonth: 'none'
+  },
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+
+const cellInnerStyles = style<CalendarCellRenderProps & {selectionMode: 'single' | 'range'}>({
+  ...focusRing(),
+  transition: {
+    default: 'default',
+    forcedColors: 'none'
+  },
+  outlineOffset: {
+    default: -2,
+    isToday: 2,
+    isSelected: {
+      selectionMode: {
+        single: 2,
+        range: -2
+      }
+    },
+    isSelectionStart: 2,
+    isSelectionEnd: 2
+  },
+  position: 'relative',
+  font: 'body-sm',
+  cursor: 'default',
+  width: 'full',
+  height: 32,
+  borderRadius: 'full',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  forcedColorAdjust: 'none',
+  backgroundColor: {
+    default: 'transparent',
+    isHovered: 'gray-100',
+    isPressed: 'gray-100',
+    isDisabled: 'transparent',
+    isToday: {
+      default: baseColor('gray-300'),
+      isDisabled: 'disabled'
+    },
+    isSelected: {
+      selectionMode: {
+        single: {
+          default: lightDark('accent-900', 'accent-700'),
+          isHovered: lightDark('accent-1000', 'accent-600'),
+          isPressed: lightDark('accent-1000', 'accent-600'),
+          isFocusVisible: lightDark('accent-1000', 'accent-600'),
+          isDisabled: 'transparent'
+        },
+        range: {
+          isHovered: 'blue-500'
+        }
+      }
+    },
+    isSelectionStart: {
+      default: lightDark('accent-900', 'accent-700'),
+      isHovered: lightDark('accent-1000', 'accent-600'),
+      isPressed: lightDark('accent-1000', 'accent-600'),
+      isFocusVisible: lightDark('accent-1000', 'accent-600')
+    },
+    isSelectionEnd: {
+      default: lightDark('accent-900', 'accent-700'),
+      isHovered: lightDark('accent-1000', 'accent-600'),
+      isPressed: lightDark('accent-1000', 'accent-600'),
+      isFocusVisible: lightDark('accent-1000', 'accent-600')
+    },
+    isUnavailable: 'transparent',
+    forcedColors: {
+      default: 'transparent',
+      isToday: 'ButtonFace',
+      isHovered: 'Highlight',
+      isSelected: {
+        selectionMode: {
+          single: 'Highlight',
+          range: {
+            isHovered: 'Highlight'
+          }
+        }
+      },
+      isSelectionStart: 'Highlight',
+      isSelectionEnd: 'Highlight',
+      isUnavailable: 'transparent'
+    }
+  },
+  color: {
+    default: 'neutral',
+    isSelected: {
+      default: 'white',
+      selectionMode: {
+        range: 'neutral'
+      }
+    },
+    isSelectionStart: 'white',
+    isSelectionEnd: 'white',
+    isDisabled: 'disabled',
+    forcedColors: {
+      default: 'ButtonText',
+      isToday: 'ButtonFace',
+      isSelected: 'HighlightText',
+      isSelectionStart: 'HighlightText',
+      isSelectionEnd: 'HighlightText',
+      isDisabled: 'GrayText'
+    }
+  }
+});
+
+const unavailableStyles = style({
+  position: 'absolute',
+  top: 'calc(50% - 1px)',
+  left: 'calc(25% - 1px)',
+  right: 'calc(25% - 1px)',
+  height: 2,
+  transform: 'rotate(-16deg)',
+  borderRadius: 'full',
+  backgroundColor: '[currentColor]'
+});
+
+const selectionSpanStyles = style({
+  position: 'absolute',
+  zIndex: -1,
+  top: 0,
+  insetStart: 'calc(-1 * var(--selection-span) * (var(--cell-width) + var(--cell-gap) + var(--cell-gap)))',
+  insetEnd: 0,
+  bottom: 0,
+  borderWidth: 2,
+  borderStyle: 'dashed',
+  borderColor: {
+    default: 'blue-800', // focus-indicator-color
+    forcedColors: {
+      default: 'ButtonText'
+    }
+  },
+  borderStartRadius: 'full',
+  borderEndRadius: 'full',
+  backgroundColor: {
+    default: 'blue-subtle',
+    forcedColors: {
+      default: 'Highlight'
+    }
+  },
+  forcedColorAdjust: 'none'
+});
+
+export const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Calendar<T extends DateValue>(props: CalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, CalendarContext);
+  let {
+    visibleMonths = 1,
+    errorMessage,
+    UNSAFE_style,
+    UNSAFE_className,
+    styles,
+    ...otherProps
+  } = props;
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   return (
-    <AriaCalendar {...props}>
-      <header>
-        <Button slot="previous">◀</Button>
-        <Heading />
-        <Button slot="next">▶</Button>
-      </header>
-      <CalendarGrid>
-        {(date) => <CalendarCell date={date} />}
-      </CalendarGrid>
-      {errorMessage && <Text slot="errorMessage">{errorMessage}</Text>}
+    <AriaCalendar
+      {...otherProps}
+      ref={ref}
+      visibleDuration={{months: visibleMonths}}
+      style={UNSAFE_style}
+      className={(UNSAFE_className || '') + calendarStyles(null, styles)}>
+      {({isInvalid, isDisabled}) => {
+        return (
+          <>
+            <Provider
+              values={[
+                [HeaderContext, null],
+                [HeadingContext, null]
+              ]}>
+              <Header styles={headerStyles}>
+                <CalendarButton slot="previous"><ChevronLeftIcon /></CalendarButton>
+                <CalendarHeading />
+                <CalendarButton slot="next"><ChevronRightIcon /></CalendarButton>
+              </Header>
+            </Provider>
+            <div
+              className={style({
+                display: 'flex',
+                flexDirection: 'row',
+                gap: 24,
+                width: 'full',
+                alignItems: 'start'
+              })}>
+              {Array.from({length: visibleMonths}).map((_, i) => (
+                <CalendarGrid months={i} key={i} />
+              ))}
+            </div>
+            {isInvalid && (
+              <Text slot="errorMessage" className={helpTextStyles({isInvalid, isDisabled, size: 'M'})}>
+                {errorMessage || stringFormatter.format('calendar.invalidSelection', {selectedCount: 1})}
+              </Text>
+            )}
+          </>
+        );
+      }}
     </AriaCalendar>
   );
+});
+
+export const CalendarGrid = (props: Omit<AriaCalendarGridProps, 'children'> & PropsWithChildren & {months: number}): ReactElement => {
+  // use isolation to start a new stacking context so that we can use zIndex -1 for the selection span.
+  return (
+    <AriaCalendarGrid
+      className={style({
+        borderCollapse: 'collapse',
+        borderSpacing: 0,
+        isolation: 'isolate'
+      })}
+      offset={{months: props.months}}>
+      <CalendarGridHeader>
+        {(day) => (
+          <CalendarHeaderCell>
+            {day}
+          </CalendarHeaderCell>
+        )}
+      </CalendarGridHeader>
+      <CalendarGridBody>
+        {(date) => (
+          <CalendarCell date={date} firstDayOfWeek={props.firstDayOfWeek} />
+        )}
+      </CalendarGridBody>
+    </AriaCalendarGrid>
+  );
+};
+
+// Ordinarily the heading is a formatted date range, ie January 2025 - February 2025.
+// However, we want to show each month individually.
+export const CalendarHeading = (): ReactElement => {
+  let calendarStateContext = useContext(CalendarStateContext);
+  let rangeCalendarStateContext = useContext(RangeCalendarStateContext);
+  let {visibleRange, timeZone} = calendarStateContext ?? rangeCalendarStateContext ?? {};
+  let currentMonth = visibleRange?.start ?? visibleRange?.end;
+  let monthFormatter = useDateFormatter({
+    month: 'long',
+    year: 'numeric',
+    era: currentMonth && currentMonth.calendar.identifier === 'gregory' && currentMonth.era === 'BC' ? 'short' : undefined,
+    calendar: visibleRange?.start.calendar.identifier,
+    timeZone
+  });
+  let months = useMemo(() => {
+    if (!visibleRange) {
+      return [];
+    }
+    let months: string[] = [];
+    for (let i = visibleRange.start; i.compare(visibleRange.end) <= 0; i = i.add({months: 1})) {
+      // TODO: account for the first week possibly overlapping, like with a custom 454 calendar.
+      // there has to be a better way to do this...
+      if (i.month === visibleRange.start.month) {
+        i = i.add({weeks: 1});
+      }
+      months.push(monthFormatter.format(i.toDate(timeZone!)));
+    }
+    return months;
+  }, [visibleRange, monthFormatter, timeZone]);
+
+  return (
+    <Heading styles={headingStyles}>
+      {months.map((month, i) => {
+        if (i === 0) {
+          return (
+            <Fragment key={month}>
+              <div className={titleStyles}>{month}</div>
+            </Fragment>
+          );
+        } else {
+          return (
+            <Fragment key={month}>
+              {/* Spacers to account for Next/Previous buttons and gap, spelled out to show the math */}
+              <div className={style({visibility: 'hidden', width: 32})} />
+              <div className={style({visibility: 'hidden', width: 24})} />
+              <div className={style({visibility: 'hidden', width: 32})} />
+              <div className={titleStyles}>{month}</div>
+            </Fragment>
+          );
+        }
+      })}
+    </Heading>
+  );
+};
+
+export const CalendarButton = (props: Omit<ButtonProps, 'children'> & {children: ReactNode}): ReactElement => {
+  let {direction} = useLocale();
+  return (
+    <div
+      className={
+        style({
+          scale: {
+            direction: {
+              rtl: -1
+            }
+          }
+        })({direction})
+      }>
+      <ActionButton
+        {...props}
+        isQuiet>
+        {props.children}
+      </ActionButton>
+    </div>
+  );
+};
+
+const CalendarHeaderCell = (props: Omit<CalendarHeaderCellProps, 'children'> & PropsWithChildren): ReactElement => {
+  return (
+    <AriaCalendarHeaderCell className={headerCellStyles}>
+      {props.children}
+    </AriaCalendarHeaderCell>
+  );
+};
+
+const CalendarCell = (props: Omit<CalendarCellProps, 'children'> & {firstDayOfWeek: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | undefined}): ReactElement => {
+  let {locale} = useLocale();
+  let firstDayOfWeek = props.firstDayOfWeek;
+  // Calculate the day and week index based on the date.
+  let {dayIndex, weekIndex} = useWeekAndDayIndices(props.date, locale, firstDayOfWeek);
+
+  let calendarStateContext = useContext(CalendarStateContext);
+  let rangeCalendarStateContext = useContext(RangeCalendarStateContext);
+  let state = (calendarStateContext ?? rangeCalendarStateContext)!;
+
+  let isFirstWeek = weekIndex === 0;
+  let isFirstChild = dayIndex === 0;
+  let isLastChild = dayIndex === 6;
+  return (
+    <AriaCalendarCell
+      date={props.date}
+      className={(renderProps) => cellStyles({...renderProps, isFirstChild, isLastChild, isFirstWeek})}>
+      {(renderProps) => <CalendarCellInner {...props} weekIndex={weekIndex} dayIndex={dayIndex} state={state} isRangeSelection={!!rangeCalendarStateContext} renderProps={renderProps} />}
+    </AriaCalendarCell>
+  );
+};
+
+const CalendarCellInner = (props: Omit<CalendarCellProps, 'children'> & {isRangeSelection: boolean, state: CalendarState | RangeCalendarState, weekIndex: number, dayIndex: number, renderProps?: CalendarCellRenderProps, date: DateValue}): ReactElement => {
+  let {weekIndex, dayIndex, date, renderProps, state, isRangeSelection} = props;
+  let {getDatesInWeek} = state;
+  let ref = useRef<HTMLDivElement>(null);
+  let {isUnavailable, formattedDate, isSelected} = renderProps!;
+  let startDate = startOfMonth(date);
+  let datesInWeek = getDatesInWeek(weekIndex, startDate);
+
+  // Starting from the current day, find the first day before it in the current week that is not selected.
+  // Then, the span of selected days is the current day minus the first unselected day.
+  let firstUnselectedInRangeInWeek = datesInWeek.slice(0, dayIndex + 1).reverse().findIndex((date, i) => {
+    return date && i > 0 && (!state.isSelected(date) || date.month !== props.date.month);
+  });
+  let selectionSpan = -1;
+  if (firstUnselectedInRangeInWeek > -1 && isSelected) {
+    selectionSpan = firstUnselectedInRangeInWeek - 1;
+  } else if (isSelected) {
+    selectionSpan = dayIndex;
+  }
+
+  let prevDay = date.subtract({days: 1});
+  let nextDay = date.add({days: 1});
+  let isBackgroundStyleApplied = (
+    isSelected
+    && isRangeSelection
+    && (state.isSelected(prevDay)
+      || (nextDay.month === date.month && state.isSelected(nextDay)))
+    );
+
+  return (
+    <div
+      className={style({
+        position: 'relative',
+        width: 32,
+        '--cell-width': {
+          type: 'width',
+          value: '[self(width)]'
+        }
+      })}>
+      <div
+        ref={ref}
+        style={pressScale(ref, {})(renderProps!)}
+        className={cellInnerStyles({...renderProps!, selectionMode: isRangeSelection ? 'range' : 'single'})}>
+        <div>
+          {formattedDate}
+        </div>
+        {isUnavailable && <div className={unavailableStyles} role="presentation" />}
+      </div>
+      {isBackgroundStyleApplied && <div style={{'--selection-span': selectionSpan} as CSSProperties} className={selectionSpanStyles} role="presentation" />}
+    </div>
+  );
+};
+
+type DayOfWeek = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
+
+/**
+ * Calculate the week index (0-based) and day index (0-based) for a given date within a month in a calendar.
+ * @param date - The date to calculate indices for.
+ * @param locale - The locale string (e.g., 'en-US', 'fr-FR', 'hi-IN-u-ca-indian').
+ * @param firstDayOfWeek - Optional override for the first day of the week ('sun', 'mon', 'tue', etc.).
+ * @returns Object with weekIndex and dayIndex.
+ */
+function useWeekAndDayIndices(
+  date: CalendarDate,
+  locale: string,
+  firstDayOfWeek?: DayOfWeek
+) {
+  let {dayIndex, weekIndex} = useMemo(() => {
+    // Get the day index within the week (0-6)
+    const dayIndex = getDayOfWeek(date, locale, firstDayOfWeek);
+
+    const monthStart = startOfMonth(date);
+
+    // Calculate the week index by finding which week this date falls into
+    // within the month's calendar grid
+    const monthStartDayOfWeek = getDayOfWeek(monthStart, locale, firstDayOfWeek);
+    const dayOfMonth = date.day;
+
+    const weekIndex = Math.floor((dayOfMonth + monthStartDayOfWeek - 1) / 7);
+
+    return {
+      weekIndex,
+      dayIndex
+    };
+  }, [date, locale, firstDayOfWeek]);
+
+  return {dayIndex, weekIndex};
 }

package/src/Card.tsx

@@ -19,7 +19,7 @@ import {composeRenderProps, ContextValue, DEFAULT_SLOT, type GridListItem, GridL
 import {ContentContext, FooterContext, TextContext} from './Content';
 import {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';
 import {DividerContext} from './Divider';
-import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMProps, DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';
 import {filterDOMProps, inertValue} from '@react-aria/utils';
 import {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IllustrationContext} from './Icon';
@@ -36,7 +36,7 @@ interface CardRenderProps {
   size: 'XS' | 'S' | 'M' | 'L' | 'XL'
 }
 
-export interface CardProps extends Omit<GridListItemProps, 'className' | 'style' | 'children' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd'>, StyleProps {
+export interface CardProps extends Omit<GridListItemProps, 'className' | 'style' | 'children' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {
   /** The children of the Card. */
   children: ReactNode | ((renderProps: CardRenderProps) => ReactNode),
   /**

package/src/CardView.tsx

@@ -16,15 +16,16 @@ import {
   ContextValue,
   GridLayout,
   GridListItem,
+  GridListLoadMoreItem,
   GridListProps,
+  GridListRenderProps,
   Size,
-  UNSTABLE_GridListLoadingSentinel,
   Virtualizer,
   WaterfallLayout
 } from 'react-aria-components';
 import {CardContext, InternalCardViewContext} from './Card';
 import {createContext, forwardRef, ReactElement, useMemo, useRef, useState} from 'react';
-import {DOMRef, DOMRefValue, forwardRefType, Key, LoadingState} from '@react-types/shared';
+import {DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, Key, LoadingState} from '@react-types/shared';
 import {focusRing, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {ImageCoordinator} from './ImageCoordinator';
@@ -33,7 +34,7 @@ import {useDOMRef} from '@react-spectrum/utils';
 import {useEffectEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style' | 'isLoading'>, UnsafeStyles {
+export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style' | 'isLoading' | keyof GlobalDOMAttributes>, UnsafeStyles {
   /**
    * The layout of the cards.
    * @default 'grid'
@@ -178,13 +179,15 @@ const cardViewStyles = style({
       isFocusVisible: 'solid'
     }
   },
-  outlineOffset: -2
+  outlineOffset: -2,
+  height: {
+    isActionBar: 'full'
+  }
 }, getAllowedOverrides({height: true}));
 
 const wrapperStyles = style({
   position: 'relative',
-  overflow: 'clip',
-  size: 'fit'
+  overflow: 'clip'
 }, getAllowedOverrides({height: true}));
 
 export const CardViewContext = createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
@@ -201,8 +204,10 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
     UNSAFE_className = '',
     UNSAFE_style,
     styles,
+    loadingState,
     onLoadMore,
     items,
+    renderEmptyState: renderEmptyStateProp,
     ...otherProps} = props;
   let domRef = useDOMRef(ref);
   let innerRef = useRef(null);
@@ -242,9 +247,11 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
 
   let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});
 
+  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
   let renderer;
   let cardLoadingSentinel = (
-    <UNSTABLE_GridListLoadingSentinel
+    <GridListLoadMoreItem
+      isLoading={isLoading}
       onLoadMore={onLoadMore} />
   );
 
@@ -266,6 +273,15 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
     );
   }
 
+  // Wrap the renderEmptyState function so that it is not called when there is a skeleton loader.
+  let renderEmptyState = renderEmptyStateProp ? (renderProps: GridListRenderProps) => {
+    let collection = renderProps.state.collection;
+    let firstKey = collection.getFirstKey();
+    if (firstKey == null || collection.getItem(firstKey)?.type !== 'skeleton') {
+      return renderEmptyStateProp(renderProps);
+    }
+  } : undefined;
+
   let cardView = (
     <Virtualizer layout={layout} layoutOptions={options}>
       <InternalCardViewContext.Provider value={GridListItem}>
@@ -274,6 +290,7 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
             <AriaGridList
               ref={scrollRef}
               {...otherProps}
+              renderEmptyState={renderEmptyState}
               items={items}
               layout="grid"
               selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}
@@ -288,7 +305,7 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
                 scrollPadding: options.minSpace.height,
                 scrollPaddingBottom: actionBarHeight + options.minSpace.height
               }}
-              className={renderProps => (!props.renderActionBar ? UNSAFE_className : '') + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, !props.renderActionBar ? styles : undefined)}>
+              className={renderProps => (!props.renderActionBar ? UNSAFE_className : '') + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading', isActionBar: !!props.renderActionBar}, !props.renderActionBar ? styles : undefined)}>
               {renderer}
             </AriaGridList>
           </ImageCoordinator>