@react-spectrum/s2 0.6.0 → 0.7.1

package/src/Breadcrumbs.tsx

@@ -15,13 +15,13 @@ import {
   Breadcrumb as AriaBreadcrumb,
   BreadcrumbsProps as AriaBreadcrumbsProps,
   CollectionRenderer,
+  CollectionRendererContext,
   ContextValue,
+  DefaultCollectionRenderer,
   HeadingContext,
   Link,
   Provider,
-  Breadcrumbs as RACBreadcrumbs,
-  UNSTABLE_CollectionRendererContext,
-  UNSTABLE_DefaultCollectionRenderer
+  Breadcrumbs as RACBreadcrumbs
 } from 'react-aria-components';
 import {AriaBreadcrumbItemProps, useLocale} from 'react-aria';
 import ChevronIcon from '../ui-icons/Chevron';
@@ -31,12 +31,12 @@ import {focusRing, size, style} from '../style' with { type: 'macro' };
 import FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';
 import {forwardRefType} from './types';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {inertValue, useLayoutEffect} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {Menu, MenuItem, MenuTrigger} from './Menu';
 import {Text} from './Content';
 import {useDOMRef, useResizeObserver} from '@react-spectrum/utils';
-import {useLayoutEffect} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -62,10 +62,10 @@ interface BreadcrumbsStyleProps {
 
 export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'items' | 'style' | 'className'>, BreadcrumbsStyleProps, StyleProps {
   /** The children of the Breadcrumbs. */
-  children?: ReactNode
+  children: ReactNode
 }
 
-export const BreadcrumbsContext = createContext<ContextValue<BreadcrumbsProps<any>, DOMRefValue<HTMLOListElement>>>(null);
+export const BreadcrumbsContext = createContext<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>>>(null);
 
 const wrapper = style<BreadcrumbsStyleProps>({
   position: 'relative',
@@ -95,7 +95,7 @@ const wrapper = style<BreadcrumbsStyleProps>({
   }
 }, getAllowedOverrides());
 
-const InternalBreadcrumbsContext = createContext<BreadcrumbsProps<any>>({});
+const InternalBreadcrumbsContext = createContext<Partial<BreadcrumbsProps<any>>>({});
 
 /** 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>) {
@@ -139,7 +139,7 @@ let BreadcrumbMenu = (props: {items: Array<Node<any>>, onAction: BreadcrumbsProp
   let {size, isDisabled} = useContext(InternalBreadcrumbsContext);
   let label = stringFormatter.format('breadcrumbs.more');
   return (
-    <UNSTABLE_CollectionRendererContext.Provider value={UNSTABLE_DefaultCollectionRenderer}>
+    <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>
       <li className={breadcrumbStyles({size, isDisabled, isMenu: true})}>
         <MenuTrigger>
           <ActionButton isDisabled={isDisabled} isQuiet aria-label={label}><FolderIcon /></ActionButton>
@@ -159,7 +159,7 @@ let BreadcrumbMenu = (props: {items: Array<Node<any>>, onAction: BreadcrumbsProp
           size={size}
           className={chevronStyles({direction, isMenu: true})} />
       </li>
-    </UNSTABLE_CollectionRendererContext.Provider>
+    </CollectionRendererContext.Provider>
   );
 };
 
@@ -168,7 +168,7 @@ let HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | nu
   return (
     <div
       // @ts-ignore
-      inert="true"
+      inert={inertValue(true)}
       ref={listRef}
       className={style({
         display: '[inherit]',
@@ -290,7 +290,7 @@ const heading = style({
 
 export interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'autoFocus'>, LinkDOMProps {
   /** The children of the breadcrumb item. */
-  children?: ReactNode
+  children: ReactNode
 }
 
 /** An individual Breadcrumb for Breadcrumbs. */
@@ -360,9 +360,9 @@ let CollapseContext = createContext<{
 function CollapsingCollection({children, containerRef, onAction}) {
   return (
     <CollapseContext.Provider value={{containerRef, onAction}}>
-      <UNSTABLE_CollectionRendererContext.Provider value={CollapsingCollectionRenderer}>
+      <CollectionRendererContext.Provider value={CollapsingCollectionRenderer}>
         {children}
-      </UNSTABLE_CollectionRendererContext.Provider>
+      </CollectionRendererContext.Provider>
     </CollapseContext.Provider>
   );
 }

package/src/Button.tsx

@@ -53,16 +53,16 @@ interface ButtonStyleProps {
 
 export interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {
   /** The content to display in the Button. */
-  children?: ReactNode
+  children: ReactNode
 }
 
 export interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children'>, StyleProps, ButtonStyleProps {
   /** The content to display in the Button. */
-  children?: ReactNode
+  children: ReactNode
 }
 
-export const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);
-export const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);
+export const ButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const LinkButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>>(null);
 
 const iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
 const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({

package/src/ButtonGroup.tsx

@@ -57,7 +57,7 @@ interface ButtonGroupContextValue extends Partial<ButtonGroupProps> {
   isHidden?: boolean
 }
 
-export const ButtonGroupContext = createContext<ContextValue<ButtonGroupContextValue, DOMRefValue<HTMLDivElement>>>({});
+export const ButtonGroupContext = createContext<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>>({});
 
 const buttongroup = style<ButtonGroupStyleProps>({
   display: 'inline-flex',

package/src/Card.tsx

@@ -20,7 +20,7 @@ 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 {filterDOMProps} from '@react-aria/utils';
+import {filterDOMProps, inertValue} from '@react-aria/utils';
 import {focusRing, lightDark, space, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IllustrationContext} from './Icon';
@@ -421,7 +421,7 @@ export const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLD
         {...filterDOMProps(otherProps)}
         id={id != null ? String(id) : undefined}
         // @ts-ignore - React < 19 compat
-        inert={isSkeleton ? 'true' : undefined}
+        inert={inertValue(isSkeleton)}
         ref={domRef}
         className={UNSAFE_className + card({size, density, variant, isCardView: ElementType !== 'div'}, styles)}
         style={UNSAFE_style}>

package/src/CardView.tsx

@@ -13,18 +13,19 @@
 import {
   GridList as AriaGridList,
   ContextValue,
-  GridLayoutOptions,
+  GridLayout,
   GridListItem,
   GridListProps,
-  UNSTABLE_Virtualizer
+  Size,
+  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, LayoutDelegate, LoadingState, Node} from '@react-types/shared';
+import {DOMRef, DOMRefValue, forwardRefType, 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';
-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';
@@ -66,359 +67,6 @@ export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'key
   renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
 }
 
-class FlexibleGridLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> {
-  protected contentSize: Size = new Size();
-  protected layoutInfos: Map<Key, LayoutInfo> = new Map();
-
-  update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {
-    let {
-      minItemSize = new Size(200, 200),
-      maxItemSize = new Size(Infinity, Infinity),
-      minSpace = new Size(18, 18),
-      maxColumns = Infinity
-    } = invalidationContext.layoutOptions || {};
-    let visibleWidth = this.virtualizer!.visibleRect.width;
-
-    // The max item width is always the entire viewport.
-    // If the max item height is infinity, scale in proportion to the max width.
-    let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);
-    let maxItemHeight = Number.isFinite(maxItemSize.height)
-      ? maxItemSize.height
-      : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);
-
-    // Compute the number of rows and columns needed to display the content
-    let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));
-    let numColumns = Math.max(1, Math.min(maxColumns, columns));
-
-    // Compute the available width (minus the space between items)
-    let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));
-
-    // Compute the item width based on the space available
-    let itemWidth = Math.floor(width / numColumns);
-    itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));
-
-    // Compute the item height, which is proportional to the item width
-    let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));
-    let itemHeight = minItemSize.height +  Math.floor((maxItemHeight - minItemSize.height) * t);
-    itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));
-
-    // Compute the horizontal spacing and content height
-    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));
-
-    let rows = Math.ceil(this.virtualizer!.collection.size / numColumns);
-    let iterator = this.virtualizer!.collection[Symbol.iterator]();
-    let y = rows > 0 ? minSpace.height : 0;
-    let newLayoutInfos = new Map();
-    let skeleton: Node<T> | null = null;
-    let skeletonCount = 0;
-    for (let row = 0; row < rows; row++) {
-      let maxHeight = 0;
-      let rowLayoutInfos: LayoutInfo[] = [];
-      for (let col = 0; col < numColumns; col++) {
-        // Repeat skeleton until the end of the current row.
-        let node = skeleton || iterator.next().value;
-        if (!node) {
-          break;
-        }
-
-        if (node.type === 'skeleton') {
-          skeleton = node;
-        }
-
-        let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;
-        let content = skeleton ? {...skeleton} : node;
-        let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);
-        let oldLayoutInfo = this.layoutInfos.get(key);
-        let height = itemHeight;
-        let estimatedSize = true;
-        if (oldLayoutInfo) {
-          height = oldLayoutInfo.rect.height;
-          estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || (oldLayoutInfo.content !== content);
-        }
-
-        let rect = new Rect(x, y, itemWidth, height);
-        let layoutInfo = new LayoutInfo(node.type, key, rect);
-        layoutInfo.estimatedSize = estimatedSize;
-        layoutInfo.allowOverflow = true;
-        layoutInfo.content = content;
-        newLayoutInfos.set(key, layoutInfo);
-        rowLayoutInfos.push(layoutInfo);
-
-        maxHeight = Math.max(maxHeight, rect.height);
-      }
-
-      for (let layoutInfo of rowLayoutInfos) {
-        layoutInfo.rect.height = maxHeight;
-      }
-
-      y += maxHeight + minSpace.height;
-
-      // Keep adding skeleton rows until we fill the viewport
-      if (skeleton && row === rows - 1 && y < this.virtualizer!.visibleRect.height) {
-        rows++;
-      }
-    }
-
-    this.layoutInfos = newLayoutInfos;
-    this.contentSize = new Size(this.virtualizer!.visibleRect.width, y);
-  }
-
-  getLayoutInfo(key: Key): LayoutInfo {
-    return this.layoutInfos.get(key)!;
-  }
-
-  getContentSize(): Size {
-    return this.contentSize;
-  }
-
-  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {
-    let layoutInfos: LayoutInfo[] = [];
-    for (let layoutInfo of this.layoutInfos.values()) {
-      if (layoutInfo.rect.intersects(rect) || this.virtualizer!.isPersistedKey(layoutInfo.key)) {
-        layoutInfos.push(layoutInfo);
-      }
-    }
-    return layoutInfos;
-  }
-
-  updateItemSize(key: Key, size: Size) {
-    let layoutInfo = this.layoutInfos.get(key);
-    if (!size || !layoutInfo) {
-      return false;
-    }
-
-    if (size.height !== layoutInfo.rect.height) {
-      let newLayoutInfo = layoutInfo.copy();
-      newLayoutInfo.rect.height = size.height;
-      newLayoutInfo.estimatedSize = false;
-      this.layoutInfos.set(key, newLayoutInfo);
-      return true;
-    }
-
-    return false;
-  }
-}
-
-class WaterfallLayoutInfo extends LayoutInfo {
-  column = 0;
-
-  copy(): WaterfallLayoutInfo {
-    let res = super.copy() as WaterfallLayoutInfo;
-    res.column = this.column;
-    return res;
-  }
-}
-
-class WaterfallLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> implements LayoutDelegate {
-  protected contentSize: Size = new Size();
-  protected layoutInfos: Map<Key, WaterfallLayoutInfo> = new Map();
-  protected numColumns = 0;
-
-  update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {
-    let {
-      minItemSize = new Size(200, 200),
-      maxItemSize = new Size(Infinity, Infinity),
-      minSpace = new Size(18, 18),
-      maxColumns = Infinity
-    } = invalidationContext.layoutOptions || {};
-    let visibleWidth = this.virtualizer!.visibleRect.width;
-
-    // The max item width is always the entire viewport.
-    // If the max item height is infinity, scale in proportion to the max width.
-    let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);
-    let maxItemHeight = Number.isFinite(maxItemSize.height)
-      ? maxItemSize.height
-      : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);
-
-    // Compute the number of rows and columns needed to display the content
-    let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));
-    let numColumns = Math.max(1, Math.min(maxColumns, columns));
-
-    // Compute the available width (minus the space between items)
-    let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));
-
-    // Compute the item width based on the space available
-    let itemWidth = Math.floor(width / numColumns);
-    itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));
-
-    // Compute the item height, which is proportional to the item width
-    let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));
-    let itemHeight = minItemSize.height +  Math.floor((maxItemHeight - minItemSize.height) * t);
-    itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));
-
-    // Compute the horizontal spacing and content height
-    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));
-
-    // Setup an array of column heights
-    let columnHeights = Array(numColumns).fill(minSpace.height);
-    let newLayoutInfos = new Map();
-    let addNode = (key: Key, node: Node<T>) => {
-      let oldLayoutInfo = this.layoutInfos.get(key);
-      let height = itemHeight;
-      let estimatedSize = true;
-      if (oldLayoutInfo) {
-        height = oldLayoutInfo.rect.height;
-        estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;
-      }
-
-      // Figure out which column to place the item in, and compute its position.
-      // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.
-      let prevColumn = numColumns === this.numColumns ? oldLayoutInfo?.column : undefined;
-      let column = prevColumn ?? columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);
-      let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);
-      let y = columnHeights[column];
-
-      let rect = new Rect(x, y, itemWidth, height);
-      let layoutInfo = new WaterfallLayoutInfo(node.type, key, rect);
-      layoutInfo.estimatedSize = estimatedSize;
-      layoutInfo.allowOverflow = true;
-      layoutInfo.content = node;
-      layoutInfo.column = column;
-      newLayoutInfos.set(key, layoutInfo);
-
-      columnHeights[column] += layoutInfo.rect.height + minSpace.height;
-    };
-
-    let skeletonCount = 0;
-    for (let node of this.virtualizer!.collection) {
-      if (node.type === 'skeleton') {
-        // Add skeleton cards until every column has at least one, and we fill the viewport.
-        let startingHeights = [...columnHeights];
-        while (
-          !columnHeights.every((h, i) => h !== startingHeights[i]) ||
-          Math.min(...columnHeights) < this.virtualizer!.visibleRect.height
-        ) {
-          let key = `${node.key}-${skeletonCount++}`;
-          let content = this.layoutInfos.get(key)?.content || {...node};
-          addNode(key, content);
-        }
-        break;
-      } else {
-        addNode(node.key, node);
-      }
-    }
-
-    // Reset all columns to the maximum for the next section
-    let maxHeight = Math.max(...columnHeights);
-    this.contentSize = new Size(this.virtualizer!.visibleRect.width, maxHeight);
-    this.layoutInfos = newLayoutInfos;
-    this.numColumns = numColumns;
-  }
-
-  getLayoutInfo(key: Key): LayoutInfo {
-    return this.layoutInfos.get(key)!;
-  }
-
-  getContentSize(): Size {
-    return this.contentSize;
-  }
-
-  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {
-    let layoutInfos: LayoutInfo[] = [];
-    for (let layoutInfo of this.layoutInfos.values()) {
-      if (layoutInfo.rect.intersects(rect) || this.virtualizer!.isPersistedKey(layoutInfo.key)) {
-        layoutInfos.push(layoutInfo);
-      }
-    }
-    return layoutInfos;
-  }
-
-  updateItemSize(key: Key, size: Size) {
-    let layoutInfo = this.layoutInfos.get(key);
-    if (!size || !layoutInfo) {
-      return false;
-    }
-
-    if (size.height !== layoutInfo.rect.height) {
-      let newLayoutInfo = layoutInfo.copy();
-      newLayoutInfo.rect.height = size.height;
-      newLayoutInfo.estimatedSize = false;
-      this.layoutInfos.set(key, newLayoutInfo);
-      return true;
-    }
-
-    return false;
-  }
-
-  // Override keyboard navigation to work spacially.
-  getKeyRightOf(key: Key): Key | null {
-    let layoutInfo = this.getLayoutInfo(key);
-    if (!layoutInfo) {
-      return null;
-    }
-
-    let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer!.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);
-    let layoutInfos = this.getVisibleLayoutInfos(rect);
-    let bestKey: Key | null = null;
-    let bestDistance = Infinity;
-    for (let candidate of layoutInfos) {
-      if (candidate.key === key) {
-        continue;
-      }
-
-      // Find the closest item in the x direction with the most overlap in the y direction.
-      let deltaX = candidate.rect.x - rect.x;
-      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);
-      let distance = deltaX - overlapY;
-      if (distance < bestDistance) {
-        bestDistance = distance;
-        bestKey = candidate.key;
-      }
-    }
-
-    return bestKey;
-  }
-
-  getKeyLeftOf(key: Key): Key | null {
-    let layoutInfo = this.getLayoutInfo(key);
-    if (!layoutInfo) {
-      return null;
-    }
-
-    let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);
-    let layoutInfos = this.getVisibleLayoutInfos(rect);
-    let bestKey: Key | null = null;
-    let bestDistance = Infinity;
-    for (let candidate of layoutInfos) {
-      if (candidate.key === key) {
-        continue;
-      }
-
-      // Find the closest item in the x direction with the most overlap in the y direction.
-      let deltaX = rect.maxX - candidate.rect.maxX;
-      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);
-      let distance = deltaX - overlapY;
-      if (distance < bestDistance) {
-        bestDistance = distance;
-        bestKey = candidate.key;
-      }
-    }
-
-    return bestKey;
-  }
-
-  // This overrides the default behavior of shift selection to work spacially
-  // rather than following the order of the items in the collection (which may appear unpredictable).
-  getKeyRange(from: Key, to: Key): Key[] {
-    let fromLayoutInfo = this.getLayoutInfo(from);
-    let toLayoutInfo = this.getLayoutInfo(to);
-    if (!fromLayoutInfo || !toLayoutInfo) {
-      return [];
-    }
-
-    // Find items where half of the area intersects the rectangle
-    // formed from the first item to the last item in the range.
-    let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);
-    let keys: Key[] = [];
-    for (let layoutInfo of this.layoutInfos.values()) {
-      if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) {
-        keys.push(layoutInfo.key);
-      }
-    }
-    return keys;
-  }
-}
-
 const layoutOptions = {
   XS: {
     compact: {
@@ -531,7 +179,13 @@ const cardViewStyles = style({
   outlineOffset: -2
 }, getAllowedOverrides({height: true}));
 
-export const CardViewContext = createContext<ContextValue<CardViewProps<any>, DOMRefValue<HTMLDivElement>>>(null);
+const wrapperStyles = style({
+  position: 'relative', 
+  overflow: 'clip', 
+  size: 'fit'
+}, getAllowedOverrides({height: true}));
+
+export const CardViewContext = createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
 
 export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);
@@ -539,9 +193,6 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
   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]);
 
   // This calculates the maximum t-shirt size where at least two columns fit in the available width.
   let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);
@@ -570,6 +221,7 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
 
   // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.
   let size = SIZES[Math.min(maxSizeIndex, SIZES.indexOf(sizeProp))];
+  let layout = layoutName === 'waterfall' ? WaterfallLayout : GridLayout;
   let options = layoutOptions[size][density];
 
   useLoadMore({
@@ -583,7 +235,7 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
   let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});
 
   let cardView = (
-    <UNSTABLE_Virtualizer layout={layout} layoutOptions={options}>
+    <Virtualizer layout={layout} layoutOptions={options}>
       <InternalCardViewContext.Provider value={GridListItem}>
         <CardContext.Provider value={ctx}>
           <ImageCoordinator>
@@ -596,27 +248,27 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
               defaultSelectedKeys={undefined}
               onSelectionChange={onSelectionChange}
               style={{
-                ...UNSAFE_style,
+                ...(!props.renderActionBar ? UNSAFE_style : {}),
                 // 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)}>
+              className={renderProps => (!props.renderActionBar ? UNSAFE_className : '') + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, !props.renderActionBar ? styles : undefined)}>
               {children}
             </AriaGridList>
           </ImageCoordinator>
         </CardContext.Provider>
       </InternalCardViewContext.Provider>
-    </UNSTABLE_Virtualizer>
+    </Virtualizer>
   );
 
   // 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'})}>
+      <div ref={domRef} className={UNSAFE_className + wrapperStyles(null, styles)} style={UNSAFE_style}>
         {cardView}
         {actionBar}
       </div>

package/src/Checkbox.tsx

@@ -41,7 +41,7 @@ export interface CheckboxProps extends Omit<AriaCheckboxProps, 'className' | 'st
   children?: ReactNode
 }
 
-export const CheckboxContext = createContext<ContextValue<CheckboxProps, FocusableRefValue<HTMLLabelElement>>>(null);
+export const CheckboxContext = createContext<ContextValue<Partial<CheckboxProps>, FocusableRefValue<HTMLLabelElement>>>(null);
 
 const wrapper = style({
   display: 'flex',

package/src/CheckboxGroup.tsx

@@ -41,7 +41,7 @@ export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'classN
   /**
    * The Checkboxes contained within the CheckboxGroup.
    */
-  children?: ReactNode,
+  children: ReactNode,
   /**
    * By default, checkboxes are not emphasized (gray).
    * The emphasized (blue) version provides visual prominence.
@@ -49,7 +49,7 @@ export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'classN
   isEmphasized?: boolean
 }
 
-export const CheckboxGroupContext = createContext<ContextValue<CheckboxGroupProps, DOMRefValue<HTMLDivElement>>>(null);
+export const CheckboxGroupContext = createContext<ContextValue<Partial<CheckboxGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A CheckboxGroup allows users to select one or more items from a list of choices.

package/src/CloseButton.tsx

@@ -79,7 +79,7 @@ const styles = style({
   }
 }, getAllowedOverrides());
 
-export const CloseButtonContext = createContext<ContextValue<CloseButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);
+export const CloseButtonContext = createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 /**
  * A CloseButton allows a user to dismiss a dialog.

package/src/ColorArea.tsx

@@ -25,7 +25,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'className' | 'style'>, StyleProps {}
 
-export const ColorAreaContext = createContext<ContextValue<ColorAreaProps, DOMRefValue<HTMLDivElement>>>(null);
+export const ColorAreaContext = createContext<ContextValue<Partial<ColorAreaProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.

package/src/ColorField.tsx

@@ -34,7 +34,7 @@ export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' |
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const ColorFieldContext = createContext<ContextValue<ColorFieldProps, TextFieldRef>>(null);
+export const ColorFieldContext = createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);
 
 /**
  * A color field allows users to edit a hex color or individual color channel value.

package/src/ColorSlider.tsx

@@ -31,7 +31,7 @@ export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children'
   label?: string
 }
 
-export const ColorSliderContext = createContext<ContextValue<ColorSliderProps, DOMRefValue<HTMLDivElement>>>(null);
+export const ColorSliderContext = createContext<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A ColorSlider allows users to adjust an individual channel of a color value.