fix: Chromatic/testing found bugs

packages/@react-aria/virtualizer/src/VirtualizerItem.tsx

@@ -88,15 +88,6 @@ export function layoutInfoToStyle(layoutInfo: LayoutInfo, dir: Direction, parent
     ...rectStyles
   };
 
-  if (layoutInfo.isSticky && !parent?.allowOverflow) {
-    if (style.top) {
-      style.marginTop = style.top;
-    }
-    if (style[xProperty]) {
-      style[dir === 'rtl' ? 'marginRight' : 'marginLeft'] = style[xProperty];
-    }
-  }
-
   cache.set(layoutInfo, style);
   return style;
 }

packages/@react-spectrum/s2/src/TableView.tsx

@@ -216,6 +216,7 @@ export class S2TableLayout<T> extends TableLayout<T> {
     return layoutNode;
   }
 
+  // y is the height of the headers
   protected buildBody(y: number): LayoutNode {
     let layoutNode = super.buildBody(y);
     let {children, layoutInfo} = layoutNode;

packages/@react-spectrum/s2/src/TreeView.tsx

@@ -29,7 +29,7 @@ import {
 import {centerBaseline} from './CenterBaseline';
 import {Checkbox} from './Checkbox';
 import Chevron from '../ui-icons/Chevron';
-import {colorMix, fontRelative, lightDark, style} from '../style' with {type: 'macro'};
+import {colorMix, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};
 import {DOMRef, Key} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
@@ -73,10 +73,13 @@ let InternalTreeContext = createContext<{isDetached?: boolean, isEmphasized?: bo
 // 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
 const tree = style({
+  ...focusRing(),
+  outlineOffset: -2, // make certain we are visible inside overflow hidden containers
   userSelect: 'none',
   minHeight: 0,
   minWidth: 0,
   width: 'full',
+  height: 'full',
   overflow: 'auto',
   boxSizing: 'border-box',
   justifyContent: {
@@ -85,9 +88,6 @@ const tree = style({
   alignItems: {
     isEmpty: 'center'
   },
-  height: {
-    isEmpty: 'full'
-  },
   '--indent': {
     type: 'width',
     value: 16
@@ -110,13 +110,13 @@ function TreeView(props: TreeViewProps, ref: DOMRef<HTMLDivElement>) {
       layout={ListLayout}
       layoutOptions={{
         rowHeight: scale === 'large' ? 50 : 40,
-        gap: isDetached ? 4 : 0
+        gap: isDetached ? 2 : 0
       }}>
       <TreeRendererContext.Provider value={{renderer}}>
         <InternalTreeContext.Provider value={{isDetached, isEmphasized}}>
           <Tree
             {...props}
-            className={({isEmpty}) => tree({isEmpty, isDetached}, props.styles)}
+            className={renderProps => tree({isDetached, ...renderProps}, props.styles)}
             selectionBehavior="toggle"
             ref={domRef}>
             {props.children}

packages/@react-spectrum/style-macro-s1/src/index.ts

@@ -10,5 +10,5 @@
  * governing permissions and limitations under the License.
  */
 
-export {style, baseColor, lightDark} from './spectrum-theme';
+export {style, baseColor, lightDark, focusRing} from './spectrum-theme';
 export {raw, keyframes} from './style-macro';

packages/@react-spectrum/style-macro-s1/src/spectrum-theme.ts

@@ -432,6 +432,16 @@ let durationProperty = createArbitraryProperty((value: number | string, property
 
 const colorWithAlpha = createColorProperty(color);
 
+export const focusRing = () => ({
+  outlineStyle: {
+    default: 'none',
+    isFocusVisible: 'solid'
+  },
+  outlineColor: 'focus-ring',
+  outlineWidth: 2,
+  outlineOffset: 2
+} as const);
+
 export const style = createTheme({
   properties: {
     // colors

packages/@react-spectrum/tree/docs/TreeView.mdx

@@ -419,49 +419,61 @@ The `<TreeViewItem>` component works with frameworks and client side routers lik
 
 ```tsx example
 <TreeView aria-label="Example tree with action groups" height="size-3000" maxWidth="size-6000" items={items}>
-  {(item: MyItem) => (
-    <TreeViewItem childItems={item.childItems} textValue={item.name}>
-      <TreeViewItemContent>
-        <Text>{item.name}</Text>
-        {item.icon}
-        <ActionGroup onAction={(key) => alert(`Item: ${item.id}, Action: ${key}`)}>
-          <Item key="edit" textValue="Edit">
-            <Edit />
-            <Text>Edit</Text>
-          </Item>
-          <Item key="delete" textValue="Delete">
-            <Delete />
-            <Text>Delete</Text>
-          </Item>
-        </ActionGroup>
-      </TreeViewItemContent>
-    </TreeViewItem>
-  )}
+  {function renderItem(item: MyItem) {
+    return (
+      <TreeViewItem childItems={item.childItems} textValue={item.name}>
+        <TreeViewItemContent>
+          <Text>{item.name}</Text>
+          {item.icon}
+          <ActionGroup onAction={(key) => alert(`Item: ${item.id}, Action: ${key}`)}>
+            <Item key="edit" textValue="Edit">
+              <Edit />
+              <Text>Edit</Text>
+            </Item>
+            <Item key="delete" textValue="Delete">
+              <Delete />
+              <Text>Delete</Text>
+            </Item>
+          </ActionGroup>
+        </TreeViewItemContent>
+        <Collection items={item.childItems}>
+          {renderItem}
+        </Collection>
+      </TreeViewItem>
+    )
+  }}
 </TreeView>
 ```
 
 ### With action menus
 
 ```tsx example
+import {Collection} from 'react-aria-components';
+
 <TreeView aria-label="Example tree with action menus" height="size-3000" maxWidth="size-6000" items={items}>
-  {(item: MyItem) => (
-    <TreeViewItem childItems={item.childItems} textValue={item.name}>
-      <TreeViewItemContent>
-        <Text>{item.name}</Text>
-        {item.icon}
-        <ActionMenu onAction={(key) => alert(`Item: ${item.id}, Action: ${key}`)}>
-          <Item key="edit" textValue="Edit">
-            <Edit />
-            <Text>Edit</Text>
-          </Item>
-          <Item key="delete" textValue="Delete">
-            <Delete />
-            <Text>Delete</Text>
-          </Item>
-        </ActionMenu>
-      </TreeViewItemContent>
-    </TreeViewItem>
-  )}
+  {function renderItem(item: MyItem) {
+    return (
+      <TreeViewItem childItems={item.childItems} textValue={item.name}>
+        <TreeViewItemContent>
+          <Text>{item.name}</Text>
+          {item.icon}
+          <ActionMenu onAction={(key) => alert(`Item: ${item.id}, Action: ${key}`)}>
+            <Item key="edit" textValue="Edit">
+              <Edit />
+              <Text>Edit</Text>
+            </Item>
+            <Item key="delete" textValue="Delete">
+              <Delete />
+              <Text>Delete</Text>
+            </Item>
+          </ActionMenu>
+        </TreeViewItemContent>
+        <Collection items={item.childItems}>
+          {renderItem}
+        </Collection>
+      </TreeViewItem>
+    )
+  }}
 </TreeView>
 ```
 

packages/@react-spectrum/tree/src/TreeView.tsx

@@ -27,10 +27,10 @@ import {Checkbox} from '@react-spectrum/checkbox';
 import ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';
 import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';
 import {DOMRef, Expandable, Key, SelectionBehavior, SpectrumSelectionProps, StyleProps} from '@react-types/shared';
+import {focusRing, style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};
 import {isAndroid} from '@react-aria/utils';
 import React, {createContext, JSX, JSXElementConstructor, ReactElement, ReactNode, useRef} from 'react';
 import {SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};
 import {useButton} from '@react-aria/button';
 import {useLocale} from '@react-aria/i18n';
 
@@ -66,6 +66,10 @@ const TreeRendererContext = createContext<TreeRendererContextValue>({});
 // 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
 const tree = style<Pick<TreeRenderProps, 'isEmpty'>>({
+  ...focusRing(),
+  outlineOffset: '[-2px]', // make certain we are visible inside overflow hidden containers
+  height: 'full',
+  width: 'full',
   borderWidth: 2,
   boxSizing: 'border-box',
   borderXWidth: 0,
@@ -80,22 +84,17 @@ const tree = style<Pick<TreeRenderProps, 'isEmpty'>>({
   alignItems: {
     isEmpty: 'center'
   },
-  width: {
-    isEmpty: 'full'
-  },
-  height: {
-    isEmpty: 'full'
-  },
   display: {
     isEmpty: 'flex'
-  }
+  },
+  overflow: 'auto'
 });
 
 /**
  * A tree view provides users with a way to navigate nested hierarchical information.
  */
 export const TreeView = React.forwardRef(function TreeView<T extends object>(props: SpectrumTreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {
-  let {children, selectionStyle} = props;
+  let {children, selectionStyle, UNSAFE_className} = props;
 
   let renderer;
   if (typeof children === 'function') {
@@ -108,7 +107,7 @@ export const TreeView = React.forwardRef(function TreeView<T extends object>(pro
 
   return (
     <TreeRendererContext.Provider value={{renderer}}>
-      <Tree {...props} {...styleProps} className={({isEmpty}) => tree({isEmpty})} selectionBehavior={selectionBehavior as SelectionBehavior} ref={domRef}>
+      <Tree {...props} {...styleProps} className={renderProps => UNSAFE_className + tree(renderProps)} selectionBehavior={selectionBehavior as SelectionBehavior} ref={domRef}>
         {props.children}
       </Tree>
     </TreeRendererContext.Provider>

packages/react-aria-components/docs/ListBox.mdx

@@ -1981,7 +1981,7 @@ A `ListBoxItem` can be targeted with the `.react-aria-ListBoxItem` CSS selector,
 
 <StateTable properties={docs.exports.ListBoxItemRenderProps.properties} showOptional />
 
-Items also support two slots: a label, and a description. When provided using the `<Text>` element, the item will have `aria-labelledby` and `aria-describedby` attributes pointing to these slots, improving screen reader announcement. See [complex items](#complex-items) for an example.
+Items also support two slots: a label, and a description. When provided using the `<Text>` element, the item will have `aria-labelledby` and `aria-describedby` attributes pointing to these slots, improving screen reader announcement. See [complex items](#text-slots) for an example.
 
 Note that items may not contain interactive children such as buttons, as screen readers will not be able to access them.
 

packages/react-aria-components/docs/Toast.mdx

@@ -108,7 +108,7 @@ Then, you can trigger a toast from anywhere using the exported `queue`.
   bottom: 16px;
   right: 16px;
   display: flex;
-  flex-direction: column;
+  flex-direction: column-reverse;
   gap: 8px;
   border-radius: 8px;
   outline: none;

packages/react-aria-components/src/Tree.tsx

@@ -19,7 +19,7 @@ import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, Slot
 import {DisabledBehavior, Expandable, forwardRefType, HoverEvents, Key, LinkDOMProps, MultipleSelection, RefObject} from '@react-types/shared';
 import {filterDOMProps, useObjectRef} from '@react-aria/utils';
 import {Collection as ICollection, Node, SelectionBehavior, TreeState, useTreeState} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {useControlledState} from '@react-stately/utils';
 
 class TreeCollection<T> implements ICollection<Node<T>> {
@@ -210,7 +210,6 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
   });
 
   let emptyState: ReactNode = null;
-  let emptyStatePropOverrides: HTMLAttributes<HTMLElement> | null = null;
   if (state.collection.size === 0 && props.renderEmptyState) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     let {isEmpty, ...values} = renderValues;
@@ -235,7 +234,7 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
       <div
         {...filterDOMProps(props)}
         {...renderProps}
-        {...mergeProps(gridProps, focusProps, emptyStatePropOverrides)}
+        {...mergeProps(gridProps, focusProps)}
         ref={ref}
         slot={props.slot || undefined}
         onScroll={props.onScroll}

packages/react-aria-components/src/index.ts

@@ -82,7 +82,6 @@ export {Virtualizer} from './Virtualizer';
 export {DIRECTORY_DRAG_TYPE, isDirectoryDropItem, isFileDropItem, isTextDropItem, SSRProvider, RouterProvider, I18nProvider, useLocale, useFilter, Pressable, Focusable} from 'react-aria';
 export {FormValidationContext} from 'react-stately';
 export {parseColor, getColorChannels} from '@react-stately/color';
-export {ListLayout as UNSTABLE_ListLayout, GridLayout as UNSTABLE_GridLayout} from '@react-stately/layout';
 export {ToastQueue as UNSTABLE_ToastQueue} from '@react-stately/toast';
 export {ListLayout, GridLayout, WaterfallLayout} from '@react-stately/layout';
 export {Layout, LayoutInfo, Size, Rect, Point} from '@react-stately/virtualizer';