@react-spectrum/s2 1.0.0 → 1.2.0

package/src/TableView.tsx

@@ -17,10 +17,12 @@ import {
   ButtonContext,
   CellRenderProps,
   Collection,
+  CollectionRendererContext,
   ColumnRenderProps,
   ColumnResizer,
   ContextValue,
   DEFAULT_SLOT,
+  DefaultCollectionRenderer,
   Form,
   Key,
   OverlayTriggerStateContext,
@@ -59,7 +61,7 @@ import Close from '../s2wf-icons/S2_Icon_Close_20_N.svg';
 import {ColumnSize} from '@react-types/table';
 import {CustomDialog, DialogContainer} from '..';
 import {DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, LinkDOMProps, LoadingState, Node} from '@react-types/shared';
-import {getActiveElement, getOwnerDocument, useLayoutEffect, useObjectRef} from '@react-aria/utils';
+import {getActiveElement, getOwnerDocument, isFocusWithin, nodeContains, useLayoutEffect, useObjectRef} from '@react-aria/utils';
 import {GridNode} from '@react-types/grid';
 import {IconContext} from './Icon';
 // @ts-ignore
@@ -120,7 +122,7 @@ interface S2TableProps {
 }
 
 // TODO: Note that loadMore and loadingState are now on the Table instead of on the TableBody
-export interface TableViewProps extends Omit<RACTableProps, 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks' | keyof GlobalDOMAttributes>, DOMProps, UnsafeStyles, S2TableProps {
+export interface TableViewProps extends Omit<RACTableProps, 'style' | 'className' | 'render' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks' | keyof GlobalDOMAttributes>, DOMProps, UnsafeStyles, S2TableProps {
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight
 }
@@ -388,7 +390,7 @@ const centeredWrapper = style({
   height: 'full'
 });
 
-export interface TableBodyProps<T> extends Omit<RACTableBodyProps<T>, 'style' | 'className' | keyof GlobalDOMAttributes> {}
+export interface TableBodyProps<T> extends Omit<RACTableBodyProps<T>, 'style' | 'className' | 'render' | keyof GlobalDOMAttributes> {}
 
 /**
  * The body of a `<Table>`, containing the table rows.
@@ -439,7 +441,9 @@ export const TableBody = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
   if (renderEmptyState != null && !isLoading) {
     emptyRender = (props: TableBodyRenderProps) => (
       <div className={centeredWrapper}>
-        {renderEmptyState(props)}
+        <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>
+          {renderEmptyState(props)}
+        </CollectionRendererContext.Provider>
       </div>
     );
   } else if (loadingState === 'loading') {
@@ -522,7 +526,7 @@ const columnStyles = style({
   forcedColorAdjust: 'none'
 });
 
-export interface ColumnProps extends Omit<RACColumnProps, 'style' | 'className' | keyof GlobalDOMAttributes> {
+export interface ColumnProps extends Omit<RACColumnProps, 'style' | 'className' | 'render' | keyof GlobalDOMAttributes> {
   /** Whether the column should render a divider between it and the next column. */
   showDivider?: boolean,
   /** Whether the column allows resizing. */
@@ -885,7 +889,7 @@ const selectAllCheckboxColumn = style({
   backgroundColor: 'gray-75'
 });
 
-export interface TableHeaderProps<T> extends Omit<RACTableHeaderProps<T>, 'style' | 'className' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd' | keyof GlobalDOMAttributes> {}
+export interface TableHeaderProps<T> extends Omit<RACTableHeaderProps<T>, 'style' | 'className' | 'render' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd' | keyof GlobalDOMAttributes> {}
 
 /**
  * A header within a `<Table>`, containing the table columns.
@@ -943,20 +947,13 @@ const commonCellStyles = {
   borderXWidth: 0,
   borderStyle: 'solid',
   position: 'relative',
-  color: {
-    default: 'gray-800',
-    forcedColors: 'ButtonText'
-  },
+  color: '--rowTextColor',
   outlineStyle: 'none',
   paddingX: 16 // table-edge-to-content
 } as const;
 
 const cell = style<CellRenderProps & S2TableProps & {isDivider: boolean}>({
   ...commonCellStyles,
-  color: {
-    default: baseColor('neutral-subdued'),
-    isSelected: baseColor('neutral')
-  },
   paddingY: centerPadding(),
   minHeight: {
     default: 40,
@@ -1030,7 +1027,7 @@ const cellContent = style({
   }
 });
 
-export interface CellProps extends Omit<RACCellProps, 'style' | 'className' | keyof GlobalDOMAttributes>, Pick<ColumnProps, 'align' | 'showDivider'> {
+export interface CellProps extends Omit<RACCellProps, 'style' | 'className' | 'render' | keyof GlobalDOMAttributes>, Pick<ColumnProps, 'align' | 'showDivider'> {
   /** @private */
   isSticky?: boolean,
   /** The content to render as the cell children. */
@@ -1220,7 +1217,7 @@ function EditableCellInner(props: EditableCellProps & {isFocusVisible: boolean,
     if (isOpen) {
       let activeElement = getActiveElement(getOwnerDocument(formRef.current));
       if (activeElement
-        && formRef.current?.contains(activeElement)
+        && nodeContains(formRef.current, activeElement)
         // not going to handle contenteditable https://stackoverflow.com/questions/6139107/programmatically-select-text-in-a-contenteditable-html-element
         // seems like an edge case anyways
         && (
@@ -1301,7 +1298,7 @@ function EditableCellInner(props: EditableCellProps & {isFocusVisible: boolean,
             onOpenChange={setIsOpen}
             ref={popoverRef}
             shouldCloseOnInteractOutside={() => {
-              if (!popoverRef.current?.contains(document.activeElement)) {
+              if (!isFocusWithin(popoverRef.current)) {
                 return false;
               }
               formRef.current?.requestSubmit();
@@ -1393,6 +1390,16 @@ const rowBackgroundColor = {
   }
 } as const;
 
+const rowTextColor = {
+  default: baseColor('neutral-subdued'),
+  isSelected: baseColor('neutral'),
+  isDisabled: {
+    default: 'disabled',
+    forcedColors: 'GrayText'
+  },
+  forcedColors: 'ButtonText'
+} as const;
+
 const row = style<RowRenderProps & S2TableProps>({
   height: 'full',
   position: 'relative',
@@ -1402,6 +1409,10 @@ const row = style<RowRenderProps & S2TableProps>({
     type: 'backgroundColor',
     value: rowBackgroundColor
   },
+  '--rowTextColor': {
+    type: 'color',
+    value: rowTextColor
+  },
   '--rowFocusIndicatorColor': {
     type: 'outlineColor',
     value: {
@@ -1446,6 +1457,13 @@ const row = style<RowRenderProps & S2TableProps>({
   forcedColorAdjust: 'none'
 });
 
+const selectionCheckbox = style({
+  visibility: {
+    default: 'visible',
+    ':is([slot="selection"][data-disabled="true"])': 'hidden'
+  }
+});
+
 export interface RowProps<T> extends Pick<RACRowProps<T>, 'id' | 'columns' | 'isDisabled' | 'onAction' | 'children' | 'textValue' | 'dependencies' | keyof GlobalDOMAttributes>, LinkDOMProps {}
 
 /**
@@ -1465,14 +1483,14 @@ export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T e
       className={renderProps => row({
         ...renderProps,
         ...tableVisualOptions
-      }) + (renderProps.isFocusVisible && ' ' + raw('&:before { content: ""; display: inline-block; position: sticky; inset-inline-start: 0; width: 3px; height: 100%; margin-inline-end: -3px; margin-block-end: 1px;  z-index: 3; background-color: var(--rowFocusIndicatorColor)'))}
+      }) + (renderProps.isFocusVisible ? ' ' + raw('&:before { content: ""; display: inline-block; position: sticky; inset-inline-start: 0; width: 3px; height: 100%; margin-inline-end: -3px; margin-block-end: 1px;  z-index: 3; background-color: var(--rowFocusIndicatorColor)') : '')}
       {...otherProps}>
       {selectionMode !== 'none' && selectionBehavior === 'toggle' && (
         // Not sure what we want to do with this className, in Cell it currently overrides the className that would have been applied.
         // The `spread` otherProps must be after className in Cell.
         // @ts-ignore
         <Cell isSticky className={checkboxCellStyle}>
-          <Checkbox slot="selection" />
+          <Checkbox slot="selection" styles={selectionCheckbox} />
         </Cell>
       )}
       <Collection items={columns} dependencies={[...dependencies, columns]}>

package/src/Tabs.tsx

@@ -42,7 +42,7 @@ import {useHasTabbableChild} from '@react-aria/focus';
 import {useLocale} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, UnsafeStyles {
+export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes>, UnsafeStyles {
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight,
   /** The content to display in the tabs. */
@@ -60,17 +60,17 @@ export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | '
   labelBehavior?: 'show' | 'hide'
 }
 
-export interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {
+export interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className' | 'render' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {
   /** The content to display in the tab. */
   children: ReactNode
 }
 
-export interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'style' | 'className' | 'aria-label' | 'aria-labelledby' | keyof GlobalDOMAttributes>, StyleProps {
+export interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'style' | 'className' | 'render' | 'aria-label' | 'aria-labelledby' | keyof GlobalDOMAttributes>, StyleProps {
   /** The content to display in the tablist. */
   children: ReactNode | ((item: T) => ReactNode)
 }
 
-export interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>, UnsafeStyles {
+export interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className' | 'render' | keyof GlobalDOMAttributes>, UnsafeStyles {
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight,
   /** The content to display in the tab panels. */

package/src/TabsPicker.tsx

@@ -56,7 +56,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 export interface PickerStyleProps {
 }
 export interface PickerProps<T extends object> extends
-  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className' | 'placeholder'>,
+  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className' | 'render' | 'placeholder'>,
   PickerStyleProps,
   StyleProps,
   SpectrumLabelableProps,
@@ -318,7 +318,7 @@ function TabLine(props: {isDisabled?: boolean}) {
 }
 
 
-export interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {
+export interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className' | 'render'>, StyleProps {
   children: ReactNode
 }
 export function PickerItem(props: PickerItemProps): ReactNode {

package/src/TagGroup.tsx

@@ -52,12 +52,12 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 // Get types from RSP and extend those?
-export interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'className' | 'onClick' | keyof GlobalDOMAttributes>, LabelableProps {
+export interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'className' | 'render' | 'onClick' | keyof GlobalDOMAttributes>, LabelableProps {
   /** The children of the tag. */
   children: ReactNode
 }
 
-export interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'>, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, StyleProps, Omit<HelpTextProps, 'errorMessage'> {
+export interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | 'style' | 'className' | 'render' | keyof GlobalDOMAttributes>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'>, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, StyleProps, Omit<HelpTextProps, 'errorMessage'> {
   /** A description for the tag group. */
   description?: ReactNode,
   /**

package/src/TextField.tsx

@@ -33,7 +33,7 @@ import {StyleString} from '../style/types';
 import {TextFieldRef} from '@react-types/textfield';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<InputProps, 'placeholder'> {
+export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<InputProps, 'placeholder'> {
   /**
    * The size of the text field.
    *

package/src/TimeField.tsx

@@ -27,7 +27,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
 export interface TimeFieldProps<T extends TimeValue> extends
-  Omit<AriaTimeFieldProps<T>, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
+  Omit<AriaTimeFieldProps<T>, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
   StyleProps,
   SpectrumLabelableProps,
   HelpTextProps {

package/src/Toast.tsx

@@ -19,7 +19,7 @@ import Chevron from '../s2wf-icons/S2_Icon_ChevronDown_20_N.svg';
 import {CloseButton} from './CloseButton';
 import {createContext, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {DOMProps} from '@react-types/shared';
-import {filterDOMProps, isWebKit, useEvent} from '@react-aria/utils';
+import {filterDOMProps, getEventTarget, isWebKit, useEvent} from '@react-aria/utils';
 import {flushSync} from 'react-dom';
 import {focusRing, style} from '../style' with {type: 'macro'};
 import {FocusScope, useModalOverlay} from 'react-aria';
@@ -34,7 +34,7 @@ import {useMediaQuery} from '@react-spectrum/utils';
 import {useOverlayTriggerState} from 'react-stately';
 
 export type ToastPlacement = 'top' | 'top end' | 'bottom' | 'bottom end';
-export interface ToastContainerProps extends Omit<ToastRegionProps<SpectrumToastValue>, 'queue' | 'children' | 'style' | 'className'> {
+export interface ToastContainerProps extends Omit<ToastRegionProps<SpectrumToastValue>, 'queue' | 'children' | 'style' | 'className' | 'render'> {
   /**
    * Placement of the toast container on the page.
    * @default "bottom"
@@ -446,7 +446,7 @@ function SpectrumToastList({placement, align, reduceMotion}) {
   let toastListRef = useRef(null);
   useEvent(toastListRef, 'click', (e) => {
     // Have to check if this is a button because stopPropagation in react events doesn't affect native events.
-    if (!isExpanded && !(e.target as Element)?.closest('button')) {
+    if (!isExpanded && !(getEventTarget(e) as Element)?.closest('button')) {
       toggleExpanded();
     }
   });

package/src/ToggleButton.tsx

@@ -26,7 +26,7 @@ import {useFocusableRef} from '@react-spectrum/utils';
 import {useFormProps} from './Form';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ActionButtonStyleProps {
+export interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ActionButtonStyleProps {
   /** The content to display in the button. */
   children: ReactNode,
   /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */

package/src/ToggleButtonGroup.tsx

@@ -16,7 +16,7 @@ import {createContext, ForwardedRef, forwardRef} from 'react';
 import {DOMProps, GlobalDOMAttributes} from '@react-types/shared';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ToggleButtonGroupProps extends ActionButtonGroupProps, Omit<RACToggleButtonGroupProps, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>, DOMProps {
+export interface ToggleButtonGroupProps extends ActionButtonGroupProps, Omit<RACToggleButtonGroupProps, 'children' | 'style' | 'className' | 'render' | keyof GlobalDOMAttributes>, DOMProps {
   /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */
   isEmphasized?: boolean
 }

package/src/Tooltip.tsx

@@ -38,7 +38,7 @@ export interface TooltipTriggerProps extends Omit<AriaTooltipTriggerComponentPro
   placement?: 'start' | 'end' | 'right' | 'left' | 'top' | 'bottom'
 }
 
-export interface TooltipProps extends Omit<AriaTooltipProps, 'children' | 'className' | 'style' | 'triggerRef' | 'UNSTABLE_portalContainer' | 'isEntering' | 'isExiting' | 'placement' | 'containerPadding' |  'offset' | 'crossOffset' |  'shouldFlip' | 'arrowBoundaryOffset' | 'isOpen' | 'defaultOpen' | 'onOpenChange' | keyof GlobalDOMAttributes>, DOMProps, UnsafeStyles {
+export interface TooltipProps extends Omit<AriaTooltipProps, 'children' | 'className' | 'style' | 'render' | 'triggerRef' | 'UNSTABLE_portalContainer' | 'isEntering' | 'isExiting' | 'placement' | 'containerPadding' |  'offset' | 'crossOffset' |  'shouldFlip' | 'arrowBoundaryOffset' | 'isOpen' | 'defaultOpen' | 'onOpenChange' | keyof GlobalDOMAttributes>, DOMProps, UnsafeStyles {
   /** The content of the tooltip. */
   children: ReactNode
 }

package/src/TreeView.tsx

@@ -41,21 +41,24 @@ import {ProgressCircle} from './ProgressCircle';
 import {raw} from '../style/style-macro' with {type: 'macro'};
 import React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useRef} from 'react';
 import {Text, TextContext} from './Content';
+import {useActionBarContainer} from './ActionBar';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useLocale, useLocalizedStringFormatter} from 'react-aria';
 import {useScale} from './utils';
 
 interface S2TreeProps {
   /** Handler that is called when a user performs an action on a row. */
-  onAction?: (key: Key) => void
+  onAction?: (key: Key) => void,
+  /** Provides the ActionBar to display when items are selected in the TreeView. */
+  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
 }
 
-export interface TreeViewProps<T> extends Omit<RACTreeProps<T>, 'style' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks' | keyof GlobalDOMAttributes>, UnsafeStyles, S2TreeProps {
+export interface TreeViewProps<T> extends Omit<RACTreeProps<T>, 'style' | 'className' | 'render' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks' | keyof GlobalDOMAttributes>, UnsafeStyles, S2TreeProps {
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight
 }
 
-export interface TreeViewItemProps extends Omit<RACTreeItemProps, 'className' | 'style' | 'onClick' | keyof GlobalDOMAttributes> {
+export interface TreeViewItemProps extends Omit<RACTreeItemProps, 'className' | 'style' | 'render' | 'onClick' | keyof GlobalDOMAttributes> {
   /** Whether this item has children, even if not loaded yet. */
   hasChildItems?: boolean
 }
@@ -71,6 +74,16 @@ interface TreeRendererContextValue {
 const TreeRendererContext = createContext<TreeRendererContextValue>({});
 
 
+const treeViewWrapper = style({
+  minHeight: 0,
+  minWidth: 0,
+  display: 'flex',
+  isolation: 'isolate',
+  disableTapHighlight: true,
+  position: 'relative',
+  overflow: 'clip'
+}, getAllowedOverrides({height: true}));
+
 // TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the
 // keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't
 // scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview
@@ -94,7 +107,7 @@ const tree = style({
     type: 'width',
     value: 16
   }
-}, getAllowedOverrides({height: true}));
+});
 
 /**
  * A tree view provides users with a way to navigate nested hierarchical information.
@@ -109,8 +122,11 @@ export const TreeView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tr
   }
 
   let domRef = useDOMRef(ref);
+  let scrollRef = useRef<HTMLElement | null>(null);
 
-  return (
+  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});
+
+  let treeContent = (
     <Virtualizer
       layout={ListLayout}
       layoutOptions={{
@@ -119,15 +135,36 @@ export const TreeView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tr
       <TreeRendererContext.Provider value={{renderer}}>
         <Tree
           {...props}
-          style={UNSAFE_style}
-          className={renderProps => (UNSAFE_className ?? '') + tree({...renderProps}, props.styles)}
+          style={{
+            ...(!props.renderActionBar ? UNSAFE_style : {}),
+            paddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0,
+            scrollPaddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0
+          }}
+          className={renderProps => (!props.renderActionBar ? (UNSAFE_className ?? '') : '') + tree({...renderProps})}
           selectionBehavior="toggle"
-          ref={domRef}>
+          selectedKeys={selectedKeys}
+          defaultSelectedKeys={undefined}
+          onSelectionChange={onSelectionChange}
+          ref={props.renderActionBar ? (scrollRef as any) : domRef}>
           {props.children}
         </Tree>
       </TreeRendererContext.Provider>
     </Virtualizer>
   );
+
+  if (props.renderActionBar) {
+    return (
+      <div
+        ref={domRef}
+        className={(UNSAFE_className ?? '') + treeViewWrapper(null, props.styles)}
+        style={UNSAFE_style}>
+        {treeContent}
+        {actionBar}
+      </div>
+    );
+  }
+
+  return treeContent;
 });
 
 const rowBackgroundColor = {
@@ -217,7 +254,11 @@ const treeCheckbox = style({
   gridArea: 'checkbox',
   marginStart: 12,
   marginEnd: 0,
-  paddingEnd: 0
+  paddingEnd: 0,
+  visibility: {
+    default: 'visible',
+    isDisabled: 'hidden'
+  }
 });
 
 const treeIcon = style({
@@ -302,7 +343,7 @@ export const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode
           <div className={treeCellGrid({isDisabled, isNextSelected, isSelected, isFirst, isNextFocused})}>
             {selectionMode !== 'none' && selectionBehavior === 'toggle' && (
               // TODO: add transition?
-              <div className={treeCheckbox}>
+              <div className={treeCheckbox({isDisabled: isDisabled || !state.selectionManager.canSelectItem(id) || state.disabledKeys.has(id)})}>
                 <Checkbox slot="selection" />
               </div>
             )}
@@ -319,8 +360,8 @@ export const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode
                   render: centerBaseline({slot: 'icon', styles: treeIcon}),
                   styles: style({size: fontRelative(20), flexShrink: 0})
                 }],
-                [ActionButtonGroupContext, {styles: treeActions}],
-                [ActionMenuContext, {styles: treeActionMenu, isQuiet: true}]
+                [ActionButtonGroupContext, {styles: treeActions, isDisabled}],
+                [ActionMenuContext, {styles: treeActionMenu, isQuiet: true, isDisabled}]
               ]}>
               {typeof children === 'string' ? <Text>{children}</Text> : children}
             </Provider>

package/src/index.ts

@@ -37,7 +37,7 @@ export {ColorSwatch, ColorSwatchContext} from './ColorSwatch';
 export {ColorSwatchPicker, ColorSwatchPickerContext} from './ColorSwatchPicker';
 export {ColorWheel, ColorWheelContext} from './ColorWheel';
 export {ComboBox, ComboBoxItem, ComboBoxSection, ComboBoxContext} from './ComboBox';
-export {ContextualHelp, ContextualHelpContext} from './ContextualHelp';
+export {ContextualHelp, ContextualHelpContext, ContextualHelpPopover} from './ContextualHelp';
 export {DateField, DateFieldContext} from './DateField';
 export {DatePicker, DatePickerContext} from './DatePicker';
 export {DateRangePicker, DateRangePickerContext} from './DateRangePicker';
@@ -57,7 +57,8 @@ export {Image, ImageContext} from './Image';
 export {ImageCoordinator} from './ImageCoordinator';
 export {InlineAlert, InlineAlertContext} from './InlineAlert';
 export {Link, LinkContext} from './Link';
-export {MenuItem, MenuTrigger, Menu, MenuSection, SubmenuTrigger, MenuContext} from './Menu';
+export {ListView, ListViewContext, ListViewItem} from './ListView';
+export {MenuItem, MenuTrigger, Menu, MenuSection, SubmenuTrigger, UnavailableMenuItemTrigger, MenuContext} from './Menu';
 export {Meter, MeterContext} from './Meter';
 export {NotificationBadge, NotificationBadgeContext} from './NotificationBadge';
 export {NumberField, NumberFieldContext} from './NumberField';
@@ -119,6 +120,7 @@ export type {ColorSwatchProps} from './ColorSwatch';
 export type {ColorSwatchPickerProps} from './ColorSwatchPicker';
 export type {ColorWheelProps} from './ColorWheel';
 export type {ComboBoxProps, ComboBoxItemProps, ComboBoxSectionProps} from './ComboBox';
+export type {ContextualHelpProps, ContextualHelpStyleProps, ContextualHelpPopoverProps} from './ContextualHelp';
 export type {DateFieldProps} from './DateField';
 export type {DatePickerProps} from './DatePicker';
 export type {DateRangePickerProps} from './DateRangePicker';
@@ -136,7 +138,8 @@ export type {InlineAlertProps} from './InlineAlert';
 export type {ImageProps} from './Image';
 export type {ImageCoordinatorProps} from './ImageCoordinator';
 export type {LinkProps} from './Link';
-export type {MenuTriggerProps, MenuProps, MenuItemProps, MenuSectionProps, SubmenuTriggerProps} from './Menu';
+export type {ListViewProps, ListViewItemProps} from './ListView';
+export type {MenuTriggerProps, MenuProps, MenuItemProps, MenuSectionProps, SubmenuTriggerProps, UnavailableMenuItemTriggerProps} from './Menu';
 export type {MeterProps} from './Meter';
 export type {NotificationBadgeProps} from './NotificationBadge';
 export type {PickerProps, PickerItemProps, PickerSectionProps} from './Picker';

package/style/__tests__/mergeStyles.test.ts

@@ -0,0 +1,68 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {mergeStyles} from '../runtime';
+import {style} from '../spectrum-theme';
+
+function stripMacro(css) {
+  return css.replaceAll(/ -macro-static-[0-9a-zA-Z]+/gi, '').replaceAll(/ -macro-dynamic-[0-9a-zA-Z]+/gi, '');
+}
+
+describe('mergeStyles', () => {
+  it('should merge styles', () => {
+    let a = style({backgroundColor: 'red-1000', color: 'pink-100'});
+    let b = style({fontSize: 'body-xs', backgroundColor: 'gray-50'});
+    let expected = style({backgroundColor: 'gray-50', color: 'pink-100', fontSize: 'body-xs'});
+    let merged = mergeStyles(a, b);
+    expect(stripMacro(merged)).toBe(stripMacro(expected.toString()));
+  });
+
+  it('should merge with arbitrary values', () => {
+    let a = style({backgroundColor: 'red-1000', color: '[hotpink]'});
+    let b = style({fontSize: '[15px]', backgroundColor: 'gray-50'});
+    let expected = style({backgroundColor: 'gray-50', color: '[hotpink]', fontSize: '[15px]'});
+    let merged = mergeStyles(a, b);
+    expect(stripMacro(merged)).toBe(stripMacro(expected.toString()));
+  });
+
+  describe('when merging styles with macros', () => {
+    it('should not merge multiple static macro classes', () => {
+      let a = style({backgroundColor: 'red-1000', color: 'pink-100'});
+      let b = style({fontSize: 'body-xs', backgroundColor: 'gray-50'});
+      let merged = mergeStyles(a, b);
+      // expect the merged styles to include two static different macro classes within the string
+      let macroClasses = merged.match(/-macro-static-[0-9a-zA-Z]+/g);
+      expect(macroClasses).toHaveLength(2);
+      expect(macroClasses![0] !== macroClasses![1]);
+    });
+
+    it('should not merge multiple dynamic macro classes', () => {
+      let a = style({backgroundColor: 'red-1000', color: {default: '[hotpink]', isDisabled: 'gray-400'}});
+      let b = style({fontSize: '[15px]', backgroundColor: {default: 'gray-50', isDisabled: 'gray-400'}});
+      let merged = mergeStyles(a({isDisabled: true}), b({isDisabled: false}));
+      let macroClasses = merged.match(/-macro-dynamic-[0-9a-zA-Z]+/g);
+      expect(macroClasses).toHaveLength(2);
+      expect(macroClasses![0] !== macroClasses![1]);
+    });
+
+    it('should retain both static and dynamic macro classes', () => {
+      let a = style({backgroundColor: 'red-1000', color: {default: '[hotpink]', isDisabled: 'gray-400'}});
+      let b = style({fontSize: 'body-xs', backgroundColor: 'gray-50'});
+      let merged = mergeStyles(a({isDisabled: true}), b);
+      let staticMacroClasses = merged.match(/-macro-static-[0-9a-zA-Z]+/g);
+      expect(staticMacroClasses).toHaveLength(1);
+      let dynamicMacroClasses = merged.match(/-macro-dynamic-[0-9a-zA-Z]+/g);
+      expect(dynamicMacroClasses).toHaveLength(1);
+      expect(staticMacroClasses![0] !== dynamicMacroClasses![0]);
+    });
+  });
+});