@react-spectrum/s2 0.5.0 → 0.6.0

package/src/Breadcrumbs.tsx

@@ -97,7 +97,8 @@ const wrapper = style<BreadcrumbsStyleProps>({
 
 const InternalBreadcrumbsContext = createContext<BreadcrumbsProps<any>>({});
 
-function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {
+/** Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */
+export const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, BreadcrumbsContext);
   let domRef = useDOMRef(ref);
   let {
@@ -129,7 +130,7 @@ function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<H
       </CollapsingCollection>
     </Provider>
   );
-}
+});
 
 let BreadcrumbMenu = (props: {items: Array<Node<any>>, onAction: BreadcrumbsProps<unknown>['onAction']}) => {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
@@ -162,10 +163,6 @@ let BreadcrumbMenu = (props: {items: Array<Node<any>>, onAction: BreadcrumbsProp
   );
 };
 
-/** Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */
-let _Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(Breadcrumbs);
-export {_Breadcrumbs as Breadcrumbs};
-
 let HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | null>, items: Array<Node<any>>, size: string}) {
   let {listRef, items, size} = props;
   return (
@@ -296,7 +293,8 @@ export interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children
   children?: ReactNode
 }
 
-function Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIElement>) {
+/** An individual Breadcrumb for Breadcrumbs. */
+export const Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIElement>) {
   let {href, target, rel, download, ping, referrerPolicy} = props;
   let {size = 'M'} = useContext(InternalBreadcrumbsContext) ?? {};
   let domRef = useDOMRef(ref);
@@ -351,11 +349,7 @@ function Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIEle
       }}
     </AriaBreadcrumb>
   );
-}
-
-/** An individual Breadcrumb for Breadcrumbs. */
-let _Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(Breadcrumb);
-export {_Breadcrumb as Breadcrumb};
+});
 
 // Context for passing the count for the custom renderer
 let CollapseContext = createContext<{

package/src/Button.tsx

@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};
+import {baseColor, focusRing, fontRelative, linearGradient, style} from '../style' with {type: 'macro'};
 import {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
-import {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {IconContext} from './Icon';
@@ -34,7 +34,7 @@ interface ButtonStyleProps {
    *
    * @default 'primary'
    */
-  variant?: 'primary' | 'secondary' | 'accent' | 'negative',
+  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai',
   /**
    * The background style of the Button.
    *
@@ -48,7 +48,7 @@ interface ButtonStyleProps {
    */
   size?: 'S' | 'M' | 'L' | 'XL',
   /** The static color style to apply. Useful when the Button appears over a color background. */
-  staticColor?: 'white' | 'black'
+  staticColor?: 'white' | 'black' | 'auto'
 }
 
 export interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {
@@ -65,8 +65,9 @@ export const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRe
 export const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);
 
 const iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
-const button = style<ButtonRenderProps & ButtonStyleProps>({
+const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({
   ...focusRing(),
+  ...staticColor(),
   position: 'relative',
   display: 'flex',
   alignItems: {
@@ -101,6 +102,10 @@ const button = style<ButtonRenderProps & ButtonStyleProps>({
     fillStyle: {
       fill: 0,
       outline: 2
+    },
+    variant: {
+      premium: 0,
+      genai: 0
     }
   },
   '--labelPadding': {
@@ -120,21 +125,12 @@ const button = style<ButtonRenderProps & ButtonStyleProps>({
       secondary: baseColor('gray-300')
     },
     isDisabled: 'disabled',
-    staticColor: {
-      white: {
-        variant: {
-          primary: baseColor('transparent-white-800'),
-          secondary: baseColor('transparent-white-300')
-        },
-        isDisabled: 'transparent-white-300'
+    isStaticColor: {
+      variant: {
+        primary: baseColor('transparent-overlay-800'),
+        secondary: baseColor('transparent-overlay-300')
       },
-      black: {
-        variant: {
-          primary: baseColor('transparent-black-800'),
-          secondary: baseColor('transparent-black-300')
-        },
-        isDisabled: 'transparent-black-300'
-      }
+      isDisabled: 'transparent-overlay-300'
     },
     forcedColors: {
       default: 'ButtonBorder',
@@ -149,52 +145,56 @@ const button = style<ButtonRenderProps & ButtonStyleProps>({
           primary: 'neutral',
           secondary: baseColor('gray-100'),
           accent: 'accent',
-          negative: 'negative'
+          negative: 'negative',
+          premium: 'gray-100',
+          genai: 'gray-100'
         },
         isDisabled: 'disabled'
       },
       outline: {
+        variant: {
+          premium: 'gray-100',
+          genai: 'gray-100'
+        },
         default: 'transparent',
         isHovered: 'gray-100',
         isPressed: 'gray-100',
         isFocusVisible: 'gray-100',
-        isDisabled: 'transparent'
+        isDisabled: {
+          default: 'transparent',
+          variant: {
+            premium: 'gray-100',
+            genai: 'gray-100'
+          }
+        }
       }
     },
-    staticColor: {
-      white: {
-        fillStyle: {
-          fill: {
-            variant: {
-              primary: baseColor('transparent-white-800'),
-              secondary: baseColor('transparent-white-100')
-            },
-            isDisabled: 'transparent-white-100'
+    isStaticColor: {
+      fillStyle: {
+        fill: {
+          variant: {
+            primary: baseColor('transparent-overlay-800'),
+            secondary: baseColor('transparent-overlay-100'),
+            premium: 'transparent-overlay-100',
+            genai: 'transparent-overlay-100'
           },
-          outline: {
-            default: 'transparent',
-            isHovered: 'transparent-white-100',
-            isPressed: 'transparent-white-100',
-            isFocusVisible: 'transparent-white-100',
-            isDisabled: 'transparent'
-          }
-        }
-      },
-      black: {
-        fillStyle: {
-          fill: {
-            variant: {
-              primary: baseColor('transparent-black-800'),
-              secondary: baseColor('transparent-black-100')
-            },
-            isDisabled: 'transparent-black-100'
+          isDisabled: 'transparent-overlay-100'
+        },
+        outline: {
+          variant: {
+            premium: 'transparent-overlay-100',
+            genai: 'transparent-overlay-100'
           },
-          outline: {
+          default: 'transparent',
+          isHovered: 'transparent-overlay-100',
+          isPressed: 'transparent-overlay-100',
+          isFocusVisible: 'transparent-overlay-100',
+          isDisabled: {
             default: 'transparent',
-            isHovered: 'transparent-black-100',
-            isPressed: 'transparent-black-100',
-            isFocusVisible: 'transparent-black-100',
-            isDisabled: 'transparent'
+            variant: {
+              premium: 'transparent-overlay-100',
+              genai: 'transparent-overlay-100'
+            }
           }
         }
       }
@@ -217,40 +217,40 @@ const button = style<ButtonRenderProps & ButtonStyleProps>({
           primary: 'gray-25',
           secondary: 'neutral',
           accent: 'white',
-          negative: 'white'
+          negative: 'white',
+          premium: 'white',
+          genai: 'white'
         },
         isDisabled: 'disabled'
       },
       outline: {
         default: 'neutral',
+        variant: {
+          premium: 'white',
+          genai: 'white'
+        },
         isDisabled: 'disabled'
       }
     },
-    staticColor: {
-      white: {
-        fillStyle: {
-          fill: {
-            variant: {
-              primary: 'black',
-              secondary: baseColor('transparent-white-800')
-            }
-          },
-          outline: baseColor('transparent-white-800')
+    isStaticColor: {
+      fillStyle: {
+        fill: {
+          variant: {
+            primary: 'auto',
+            secondary: baseColor('transparent-overlay-800'),
+            premium: 'white',
+            genai: 'white'
+          }
         },
-        isDisabled: 'transparent-white-400'
-      },
-      black: {
-        fillStyle: {
-          fill: {
-            variant: {
-              primary: 'white',
-              secondary: baseColor('transparent-black-800')
-            }
+        outline: {
+          variant: {
+            premium: 'white',
+            genai: 'white'
           },
-          outline: baseColor('transparent-black-800')
-        },
-        isDisabled: 'transparent-black-400'
-      }
+          default: baseColor('transparent-overlay-800')
+        }
+      },
+      isDisabled: 'transparent-overlay-400'
     },
     forcedColors: {
       fillStyle: {
@@ -271,17 +271,55 @@ const button = style<ButtonRenderProps & ButtonStyleProps>({
   },
   outlineColor: {
     default: 'focus-ring',
-    staticColor: {
-      white: 'white',
-      black: 'black'
-    },
+    isStaticColor: 'transparent-overlay-1000',
     forcedColors: 'Highlight'
   },
   forcedColorAdjust: 'none',
   disableTapHighlight: true
 }, getAllowedOverrides());
 
-function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+// Put the gradient background on a separate element from the button to work around a Safari
+// bug where transitions of custom properties cause layout flickering if any properties use rems. 🤣
+// https://bugs.webkit.org/show_bug.cgi?id=285622
+const gradient = style({
+  position: 'absolute',
+  inset: 0,
+  zIndex: -1,
+  transition: 'default',
+  borderRadius: '[inherit]',
+  backgroundImage: {
+    variant: {
+      premium: {
+        default: linearGradient('to bottom right', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),
+        isHovered: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),
+        isPressed: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),
+        isFocusVisible: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])
+      },
+      genai: {
+        default: linearGradient('to bottom right', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),
+        isHovered: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),
+        isPressed: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),
+        isFocusVisible: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])
+      }
+    },
+    isDisabled: 'none',
+    forcedColors: 'none'
+  },
+  // Force gradient colors to remain static between light and dark theme.
+  colorScheme: {
+    variant: {
+      premium: 'light',
+      genai: 'light'
+    }
+  }
+});
+
+/**
+ * Buttons allow users to perform an action.
+ * They have multiple styles for various needs, and are ideal for calling attention to
+ * where a user needs to do something in order to move forward in a flow.
+ */
+export const Button = forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);
   props = useFormProps(props);
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
@@ -327,80 +365,90 @@ function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {
         variant,
         fillStyle,
         size,
-        staticColor
+        staticColor,
+        isStaticColor: !!staticColor
       }, props.styles)}>
-      <Provider
-        values={[
-          [SkeletonContext, null],
-          [TextContext, {
-            styles: style({
-              paddingY: '--labelPadding',
-              order: 1,
-              opacity: {
-                default: 1,
-                isProgressVisible: 0
-              }
-            })({isProgressVisible}),
-            // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
-            'data-rsp-slot': 'text'
-          }],
-          [IconContext, {
-            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-            styles: style({
-              size: fontRelative(20),
-              marginStart: '--iconMargin',
-              flexShrink: 0,
-              opacity: {
-                default: 1,
-                isProgressVisible: 0
-              }
-            })({isProgressVisible})
-          }]
-        ]}>
-        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
-        {isPending &&
-          <div
-            className={style({
-              position: 'absolute',
-              top: '[50%]',
-              left: '[50%]',
-              transform: 'translate(-50%, -50%)',
-              opacity: {
-                default: 0,
-                isProgressVisible: 1
-              }
-            })({isProgressVisible, isPending})}>
-            <ProgressCircle
-              isIndeterminate
-              aria-label={stringFormatter.format('button.pending')}
-              size="S"
-              staticColor={staticColor}
-              styles={style({
-                size: {
+      {(renderProps) => (<>
+        {variant === 'genai' || variant === 'premium' 
+          ? (
+            <span
+              className={gradient({
+                ...renderProps,
+                // Retain hover styles when an overlay is open.
+                isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,
+                isDisabled: renderProps.isDisabled || isProgressVisible,
+                variant
+              })} />
+             )
+          : null}
+        <Provider
+          values={[
+            [SkeletonContext, null],
+            [TextContext, {
+              styles: style({
+                paddingY: '--labelPadding',
+                order: 1,
+                opacity: {
+                  default: 1,
+                  isProgressVisible: 0
+                }
+              })({isProgressVisible}),
+              // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
+              'data-rsp-slot': 'text'
+            }],
+            [IconContext, {
+              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
+              styles: style({
+                size: fontRelative(20),
+                marginStart: '--iconMargin',
+                flexShrink: 0,
+                opacity: {
+                  default: 1,
+                  isProgressVisible: 0
+                }
+              })({isProgressVisible})
+            }]
+          ]}>
+          {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
+          {isPending &&
+            <div
+              className={style({
+                position: 'absolute',
+                top: '[50%]',
+                left: '[50%]',
+                transform: 'translate(-50%, -50%)',
+                opacity: {
+                  default: 0,
+                  isProgressVisible: 1
+                }
+              })({isProgressVisible, isPending})}>
+              <ProgressCircle
+                isIndeterminate
+                aria-label={stringFormatter.format('button.pending')}
+                size="S"
+                staticColor={staticColor}
+                styles={style({
                   size: {
-                    S: 14,
-                    M: 18,
-                    L: 20,
-                    XL: 24
+                    size: {
+                      S: 14,
+                      M: 18,
+                      L: 20,
+                      XL: 24
+                    }
                   }
-                }
-              })({size})} />
-          </div>
-        }
-      </Provider>
+                })({size})} />
+            </div>
+          }
+        </Provider>
+      </>)}
     </RACButton>
   );
-}
+});
 
 /**
- * Buttons allow users to perform an action.
- * They have multiple styles for various needs, and are ideal for calling attention to
- * where a user needs to do something in order to move forward in a flow.
+ * A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.
  */
-let _Button = forwardRef(Button);
-export {_Button as Button};
-
-function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {
+export const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);
   props = useFormProps(props);
   let domRef = useFocusableRef(ref);
@@ -419,6 +467,7 @@ function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>
         fillStyle: props.fillStyle || 'fill',
         size: props.size || 'M',
         staticColor: props.staticColor,
+        isStaticColor: !!props.staticColor,
         isPending: false
       }, props.styles)}>
       <Provider
@@ -438,10 +487,4 @@ function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>
       </Provider>
     </Link>
   );
-}
-
-/**
- * A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.
- */
-let _LinkButton = forwardRef(LinkButton);
-export {_LinkButton as LinkButton};
+});

package/src/ButtonGroup.tsx

@@ -101,7 +101,10 @@ const buttongroup = style<ButtonGroupStyleProps>({
   }
 }, getAllowedOverrides());
 
-function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.
+ */
+export const ButtonGroup = forwardRef(function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);
   let domRef = useDOMRef(ref);
   let {
@@ -178,10 +181,4 @@ function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {
       </Provider>
     </div>
   );
-}
-
-/**
- * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.
- */
-const _ButtonGroup = forwardRef(ButtonGroup);
-export {_ButtonGroup as ButtonGroup};
+});

package/src/CardView.tsx

@@ -19,12 +19,13 @@ import {
   UNSTABLE_Virtualizer
 } from 'react-aria-components';
 import {CardContext, InternalCardViewContext} from './Card';
-import {createContext, forwardRef, useMemo, useState} from 'react';
+import {createContext, forwardRef, ReactElement, useMemo, useRef, useState} from 'react';
 import {DOMRef, DOMRefValue, forwardRefType, Key, LayoutDelegate, LoadingState, Node} 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';
 import {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';
+import {useActionBarContainer} from './ActionBar';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -60,7 +61,9 @@ export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'key
   /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
   onLoadMore?: () => void,
   /** Spectrum-defined styles, returned by the `style()` macro. */
-  styles?: StylesPropWithHeight
+  styles?: StylesPropWithHeight,
+  /** Provides the ActionBar to render when cards are selected in the CardView. */
+  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
 }
 
 class FlexibleGridLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> {
@@ -514,6 +517,7 @@ const cardViewStyles = style({
   display: {
     isEmpty: 'flex'
   },
+  boxSizing: 'border-box',
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
@@ -529,10 +533,12 @@ const cardViewStyles = style({
 
 export const CardViewContext = createContext<ContextValue<CardViewProps<any>, DOMRefValue<HTMLDivElement>>>(null);
 
-function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);
   let {children, layout: layoutName = 'grid', size: sizeProp = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;
   let domRef = useDOMRef(ref);
+  let innerRef = useRef(null);
+  let scrollRef = props.renderActionBar ? innerRef : domRef;
   let layout = useMemo(() => {
     return layoutName === 'waterfall' ? new WaterfallLayout() : new FlexibleGridLayout();
   }, [layoutName]);
@@ -540,7 +546,7 @@ function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDiv
   // This calculates the maximum t-shirt size where at least two columns fit in the available width.
   let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);
   let updateSize = useEffectEvent(() => {
-    let w = domRef.current?.clientWidth ?? 0;
+    let w = scrollRef.current?.clientWidth ?? 0;
     let i = SIZES.length - 1;
     while (i > 0) {
       let opts = layoutOptions[SIZES[i]][density];
@@ -553,7 +559,7 @@ function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDiv
   });
 
   useResizeObserver({
-    ref: domRef,
+    ref: scrollRef,
     box: 'border-box',
     onResize: updateSize
   });
@@ -570,23 +576,32 @@ function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDiv
     isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',
     items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>
     onLoadMore: props.onLoadMore
-  }, domRef);
+  }, scrollRef);
 
   let ctx = useMemo(() => ({size, variant}), [size, variant]);
 
-  return (
+  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});
+
+  let cardView = (
     <UNSTABLE_Virtualizer layout={layout} layoutOptions={options}>
       <InternalCardViewContext.Provider value={GridListItem}>
         <CardContext.Provider value={ctx}>
           <ImageCoordinator>
             <AriaGridList
-              ref={domRef}
+              ref={scrollRef}
               {...otherProps}
               layout="grid"
               selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}
+              selectedKeys={selectedKeys}
+              defaultSelectedKeys={undefined}
+              onSelectionChange={onSelectionChange}
               style={{
                 ...UNSAFE_style,
-                scrollPadding: options.minSpace.height
+                // Add padding at the bottom when the action bar is visible so users can scroll to the last items.
+                // Also add scroll padding so keyboard navigating preserves the padding.
+                paddingBottom: actionBarHeight > 0 ? actionBarHeight + options.minSpace.height : 0,
+                scrollPadding: options.minSpace.height,
+                scrollPaddingBottom: actionBarHeight + options.minSpace.height
               }}
               className={renderProps => UNSAFE_className + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, styles)}>
               {children}
@@ -596,7 +611,17 @@ function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDiv
       </InternalCardViewContext.Provider>
     </UNSTABLE_Virtualizer>
   );
-}
 
-const _CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(CardView);
-export {_CardView as CardView};
+  // Add extra wrapper if there is an action bar so we can position relative to it.
+  // ActionBar cannot be inside the GridList due to ARIA and focus management requirements.
+  if (props.renderActionBar) {
+    return (
+      <div ref={domRef} className={style({position: 'relative', overflow: 'clip', size: 'fit'})}>
+        {cardView}
+        {actionBar}
+      </div>
+    );
+  }
+
+  return cardView;
+});