From 1e30c20c9b722aafc13cc4e0b9b05ee983c7f04b Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 10 Jan 2025 16:04:01 -0800
Subject: [PATCH 1/6] Revert "chore: Update JSDocs and apis for release
 (#7595)"

This reverts commit 101d0772b9df85ad0972b9e8bda2a152affb42ca.
---
 packages/@react-spectrum/s2/src/CardView.tsx  |  1 -
 packages/@react-spectrum/s2/src/TableView.tsx |  1 -
 packages/@react-spectrum/s2/src/Tabs.tsx      | 44 ++++++++-----------
 .../@react-spectrum/s2/src/TabsPicker.tsx     | 17 +++----
 .../@react-stately/selection/src/types.ts     |  1 -
 packages/react-aria-components/src/index.ts   |  1 -
 6 files changed, 24 insertions(+), 41 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/CardView.tsx b/packages/@react-spectrum/s2/src/CardView.tsx
index 8d275df67ec..28745d3ae4f 100644
--- a/packages/@react-spectrum/s2/src/CardView.tsx
+++ b/packages/@react-spectrum/s2/src/CardView.tsx
@@ -62,7 +62,6 @@ export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'key
   onLoadMore?: () => void,
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight,
-  /** Provides the ActionBar to render when cards are selected in the CardView. */
   renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
 }
 
diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx
index 73663391b86..dd281833cc2 100644
--- a/packages/@react-spectrum/s2/src/TableView.tsx
+++ b/packages/@react-spectrum/s2/src/TableView.tsx
@@ -105,7 +105,6 @@ interface S2TableProps {
   loadingState?: LoadingState,
   /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
   onLoadMore?: () => any,
-  /** Provides the ActionBar to display when rows are selected in the TableView. */
   renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
 }
 
diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index 7791c902370..486ded1fdce 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -53,11 +53,9 @@ export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | '
    */
   density?: 'compact' | 'regular',
   /**
-   * Defines if the text within the tabs should be hidden and only the icon should be shown.
-   * The text is always visible when the item is collapsed into a picker.
-   * @default 'show'
+   * If the tabs should only display icons and no text.
    */
-  labelBehavior?: 'show' | 'hide'
+  isIconOnly?: boolean
 }
 
 export interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className'>, StyleProps {
@@ -98,7 +96,7 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
     isDisabled,
     disabledKeys,
     orientation = 'horizontal',
-    labelBehavior = 'show'
+    isIconOnly = false
   } = props;
   let domRef = useDOMRef(ref);
   let [value, setValue] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null!, props.onSelectionChange);
@@ -114,7 +112,7 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
           disabledKeys,
           selectedKey: value,
           onSelectionChange: setValue,
-          labelBehavior,
+          isIconOnly,
           onFocus: () => pickerRef.current?.focus(),
           pickerRef
         }]
@@ -143,12 +141,10 @@ const tablist = style({
           compact: 24,
           regular: 32
         },
-        labelBehavior: {
-          hide: {
-            density: {
-              compact: 16,
-              regular: 24
-            }
+        isIconOnly: {
+          density: {
+            compact: 16,
+            regular: 24
           }
         }
       }
@@ -174,7 +170,7 @@ const tablist = style({
 });
 
 export function TabList<T extends object>(props: TabListProps<T>) {
-  let {density, isDisabled, disabledKeys, orientation, labelBehavior, onFocus} = useContext(InternalTabsContext) ?? {};
+  let {density, isDisabled, disabledKeys, orientation, isIconOnly, onFocus} = useContext(InternalTabsContext) ?? {};
   let {showItems} = useContext(CollapseContext) ?? {};
   let state = useContext(TabListStateContext);
   let [selectedTab, setSelectedTab] = useState<HTMLElement | undefined>(undefined);
@@ -212,7 +208,7 @@ export function TabList<T extends object>(props: TabListProps<T>) {
       <RACTabList
         {...props}
         ref={tablistRef}
-        className={renderProps => tablist({...renderProps, labelBehavior, density})} />
+        className={renderProps => tablist({...renderProps, isIconOnly, density})} />
       {orientation === 'horizontal' &&
         <TabLine showItems={showItems} disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}
     </div>
@@ -259,7 +255,7 @@ const selectedIndicator = style({
   transitionTimingFunction: 'in-out'
 });
 
-function TabLine(props: TabLineProps) {
+function TabLine(props: TabLineProps & {isIconOnly?: boolean}) {
   let {
     disabledKeys,
     isDisabled: isTabsDisabled,
@@ -346,9 +342,7 @@ const tab = style({
   flexShrink: 0,
   transition: 'default',
   paddingX: {
-    labelBehavior: {
-      hide: size(6)
-    }
+    isIconOnly: size(6)
   }
 }, getAllowedOverrides());
 
@@ -362,7 +356,7 @@ const icon = style({
 });
 
 export function Tab(props: TabProps) {
-  let {density, labelBehavior} = useContext(InternalTabsContext) ?? {};
+  let {density, isIconOnly} = useContext(InternalTabsContext) ?? {};
 
   return (
     <RACTab
@@ -370,7 +364,7 @@ export function Tab(props: TabProps) {
       // @ts-ignore
       originalProps={props}
       style={props.UNSAFE_style}
-      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, labelBehavior}, props.styles)}>
+      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, isIconOnly}, props.styles)}>
       {({
           // @ts-ignore
           isMenu
@@ -386,11 +380,9 @@ export function Tab(props: TabProps) {
                     style({
                       order: 1,
                       display: {
-                        labelBehavior: {
-                          hide: 'none'
-                        }
+                        isIconOnly: 'none'
                       }
-                    })({labelBehavior})
+                    })({isIconOnly})
                 }],
                 [IconContext, {
                   render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
@@ -487,7 +479,7 @@ let HiddenTabs = function (props: {
 let TabsMenu = (props: {items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']}) => {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   let {items} = props;
-  let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, pickerRef, labelBehavior} = useContext(InternalTabsContext);
+  let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, pickerRef, isIconOnly} = useContext(InternalTabsContext);
   let state = useContext(TabListStateContext);
   let allKeysDisabled = useMemo(() => {
     return isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());
@@ -509,7 +501,7 @@ let TabsMenu = (props: {items: Array<Node<any>>, onSelectionChange: TabsProps['o
           ref={pickerRef ? pickerRef : undefined}
           isDisabled={isDisabled || allKeysDisabled}
           density={density!}
-          labelBehavior={labelBehavior}
+          isIconOnly={isIconOnly}
           items={items}
           disabledKeys={disabledKeys}
           selectedKey={selectedKey}
diff --git a/packages/@react-spectrum/s2/src/TabsPicker.tsx b/packages/@react-spectrum/s2/src/TabsPicker.tsx
index 4f8473de94b..c66c8c264e0 100644
--- a/packages/@react-spectrum/s2/src/TabsPicker.tsx
+++ b/packages/@react-spectrum/s2/src/TabsPicker.tsx
@@ -88,9 +88,8 @@ export interface PickerProps<T extends object> extends
     density: 'compact' | 'regular',
     /**
      * If the tab picker should only display icon and no text for the button label.
-     * @default 'show
      */
-    labelBehavior?: 'show' | 'hide'
+    isIconOnly?: boolean
 }
 
 export const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
@@ -163,9 +162,7 @@ const iconCenterWrapper = style({
   display: 'flex',
   gridArea: 'icon',
   paddingStart: {
-    labelBehavior: {
-      hide: size(6)
-    }
+    isIconOnly: size(6)
   }
 });
 
@@ -184,7 +181,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
     items,
     placeholder = stringFormatter.format('picker.placeholder'),
     density,
-    labelBehavior = 'show',
+    isIconOnly,
     ...pickerProps
   } = props;
   let isQuiet = true;
@@ -220,7 +217,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
                       [IconContext, {
                         slots: {
                           icon: {
-                            render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({labelBehavior})}),
+                            render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({isIconOnly})}),
                             styles: icon
                           }
                         }
@@ -231,13 +228,11 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
                           [DEFAULT_SLOT]: {styles: style({
                             display: {
                               default: 'block',
-                              labelBehavior: {
-                                hide: 'none'
-                              }
+                              isIconOnly: 'none'
                             },
                             flexGrow: 1,
                             truncate: true
-                          })({labelBehavior})}
+                          })({isIconOnly})}
                         }
                       }],
                       [InsideSelectValueContext, true]
diff --git a/packages/@react-stately/selection/src/types.ts b/packages/@react-stately/selection/src/types.ts
index 8eafe03307b..f6adaff5cf9 100644
--- a/packages/@react-stately/selection/src/types.ts
+++ b/packages/@react-stately/selection/src/types.ts
@@ -108,6 +108,5 @@ export interface MultipleSelectionManager extends FocusState {
   isLink(key: Key): boolean,
   /** Returns the props for the given item. */
   getItemProps(key: Key): any,
-  /** The collection of nodes that the selection manager handles. */
   collection: Collection<Node<unknown>>
 }
diff --git a/packages/react-aria-components/src/index.ts b/packages/react-aria-components/src/index.ts
index e8c3bb8f04c..1950d15570c 100644
--- a/packages/react-aria-components/src/index.ts
+++ b/packages/react-aria-components/src/index.ts
@@ -83,7 +83,6 @@ 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 type {AutocompleteProps} from './Autocomplete';
 export type {BreadcrumbsProps, BreadcrumbProps, BreadcrumbRenderProps} from './Breadcrumbs';
 export type {ButtonProps, ButtonRenderProps} from './Button';
 export type {CalendarCellProps, CalendarProps, CalendarRenderProps, CalendarGridProps, CalendarGridHeaderProps, CalendarGridBodyProps, CalendarHeaderCellProps, CalendarCellRenderProps, RangeCalendarProps, RangeCalendarRenderProps} from './Calendar';

From 4cdae7198922fb0f94e878bc6bf2f0b8461e0368 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 10 Jan 2025 16:04:32 -0800
Subject: [PATCH 2/6] Revert "fix: Tabs infinite loop (#7487)"

This reverts commit 8228e4efd9be99973058a1f90fc7f7377e673f78.
---
 packages/@react-spectrum/s2/src/Tabs.tsx    | 7 +------
 packages/react-aria-components/src/Tabs.tsx | 6 ++----
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index 486ded1fdce..04de2f8bd7f 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -543,13 +543,8 @@ function CollapsingCollection({children, containerRef}) {
       _setShowItems(value);
     }
   }, [orientation]);
-  let ctx = useMemo(() => ({
-    containerRef,
-    showItems: orientation === 'vertical' ? true : showItems,
-    setShowItems
-  }), [containerRef, showItems, setShowItems]);
   return (
-    <CollapseContext.Provider value={ctx}>
+    <CollapseContext.Provider value={{containerRef, showItems: orientation === 'vertical' ? true : showItems, setShowItems}}>
       <UNSTABLE_CollectionRendererContext.Provider value={CollapsingCollectionRenderer}>
         {children}
       </UNSTABLE_CollectionRendererContext.Provider>
diff --git a/packages/react-aria-components/src/Tabs.tsx b/packages/react-aria-components/src/Tabs.tsx
index f4c3df0d9e6..9c771a17030 100644
--- a/packages/react-aria-components/src/Tabs.tsx
+++ b/packages/react-aria-components/src/Tabs.tsx
@@ -13,7 +13,7 @@
 import {AriaLabelingProps, forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
 import {AriaTabListProps, AriaTabPanelProps, mergeProps, Orientation, useFocusRing, useHover, useTab, useTabList, useTabPanel} from 'react-aria';
 import {Collection, CollectionBuilder, createHideableComponent, createLeafComponent} from '@react-aria/collections';
-import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, usePersistedKeys} from './Collection';
+import {CollectionProps, CollectionRendererContext, usePersistedKeys} from './Collection';
 import {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
 import {filterDOMProps, useObjectRef} from '@react-aria/utils';
 import {Collection as ICollection, Node, TabListState, useTabListState} from 'react-stately';
@@ -330,9 +330,7 @@ export const TabPanel = /*#__PURE__*/ createHideableComponent(function TabPanel(
           [TabsContext, null],
           [TabListStateContext, null]
         ]}>
-        <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>
-          {renderProps.children}
-        </CollectionRendererContext.Provider>
+        {renderProps.children}
       </Provider>
     </div>
   );

From f78f2a2a9f6a6db62b9dac6d9541a2dd74224098 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 10 Jan 2025 16:08:00 -0800
Subject: [PATCH 3/6] Revert "fix: Tabs from testing (#7463)"

This reverts commit 494e01c0a12baad6fc42874a4dfb01f835c15eb7.
---
 packages/@react-spectrum/s2/src/Tabs.tsx      | 37 +++++++------------
 .../@react-spectrum/s2/src/TabsPicker.tsx     | 29 ++++-----------
 .../s2/stories/Tabs.stories.tsx               | 20 ++++------
 3 files changed, 28 insertions(+), 58 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index 04de2f8bd7f..2b9dcd250b2 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -29,7 +29,7 @@ import {
 import {centerBaseline} from './CenterBaseline';
 import {Collection, DOMRef, DOMRefValue, FocusableRef, FocusableRefValue, Key, Node, Orientation, RefObject} from '@react-types/shared';
 import {createContext, forwardRef, Fragment, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
-import {focusRing, size, style} from '../style' with {type: 'macro'};
+import {focusRing, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
 // @ts-ignore
@@ -55,7 +55,7 @@ export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | '
   /**
    * If the tabs should only display icons and no text.
    */
-  isIconOnly?: boolean
+  iconOnly?: boolean
 }
 
 export interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className'>, StyleProps {
@@ -96,7 +96,7 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
     isDisabled,
     disabledKeys,
     orientation = 'horizontal',
-    isIconOnly = false
+    iconOnly = false
   } = props;
   let domRef = useDOMRef(ref);
   let [value, setValue] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null!, props.onSelectionChange);
@@ -112,7 +112,7 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
           disabledKeys,
           selectedKey: value,
           onSelectionChange: setValue,
-          isIconOnly,
+          iconOnly,
           onFocus: () => pickerRef.current?.focus(),
           pickerRef
         }]
@@ -170,7 +170,7 @@ const tablist = style({
 });
 
 export function TabList<T extends object>(props: TabListProps<T>) {
-  let {density, isDisabled, disabledKeys, orientation, isIconOnly, onFocus} = useContext(InternalTabsContext) ?? {};
+  let {density, isDisabled, disabledKeys, orientation, iconOnly, onFocus} = useContext(InternalTabsContext) ?? {};
   let {showItems} = useContext(CollapseContext) ?? {};
   let state = useContext(TabListStateContext);
   let [selectedTab, setSelectedTab] = useState<HTMLElement | undefined>(undefined);
@@ -208,7 +208,7 @@ export function TabList<T extends object>(props: TabListProps<T>) {
       <RACTabList
         {...props}
         ref={tablistRef}
-        className={renderProps => tablist({...renderProps, isIconOnly, density})} />
+        className={renderProps => tablist({...renderProps, isIconOnly: iconOnly, density})} />
       {orientation === 'horizontal' &&
         <TabLine showItems={showItems} disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}
     </div>
@@ -255,7 +255,7 @@ const selectedIndicator = style({
   transitionTimingFunction: 'in-out'
 });
 
-function TabLine(props: TabLineProps & {isIconOnly?: boolean}) {
+function TabLine(props: TabLineProps) {
   let {
     disabledKeys,
     isDisabled: isTabsDisabled,
@@ -301,14 +301,7 @@ function TabLine(props: TabLineProps & {isIconOnly?: boolean}) {
 
   useLayoutEffect(() => {
     onResize();
-  }, [onResize, state?.selectedItem?.key, density]);
-
-  let ref = useRef<HTMLElement | undefined>(selectedTab);
-  // assign ref before the useResizeObserver useEffect runs
-  useLayoutEffect(() => {
-    ref.current = selectedTab;
-  });
-  useResizeObserver({ref, onResize});
+  }, [onResize, state?.selectedItem?.key, direction, orientation, density]);
 
   return (
     <div style={{...style}} className={selectedIndicator({isDisabled, orientation})} />
@@ -340,10 +333,7 @@ const tab = style({
   position: 'relative',
   cursor: 'default',
   flexShrink: 0,
-  transition: 'default',
-  paddingX: {
-    isIconOnly: size(6)
-  }
+  transition: 'default'
 }, getAllowedOverrides());
 
 const icon = style({
@@ -356,7 +346,7 @@ const icon = style({
 });
 
 export function Tab(props: TabProps) {
-  let {density, isIconOnly} = useContext(InternalTabsContext) ?? {};
+  let {density, iconOnly} = useContext(InternalTabsContext) ?? {};
 
   return (
     <RACTab
@@ -364,7 +354,7 @@ export function Tab(props: TabProps) {
       // @ts-ignore
       originalProps={props}
       style={props.UNSAFE_style}
-      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, isIconOnly}, props.styles)}>
+      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density}, props.styles)}>
       {({
           // @ts-ignore
           isMenu
@@ -382,7 +372,7 @@ export function Tab(props: TabProps) {
                       display: {
                         isIconOnly: 'none'
                       }
-                    })({isIconOnly})
+                    })({isIconOnly: iconOnly})
                 }],
                 [IconContext, {
                   render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
@@ -479,7 +469,7 @@ let HiddenTabs = function (props: {
 let TabsMenu = (props: {items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']}) => {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   let {items} = props;
-  let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, pickerRef, isIconOnly} = useContext(InternalTabsContext);
+  let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, pickerRef} = useContext(InternalTabsContext);
   let state = useContext(TabListStateContext);
   let allKeysDisabled = useMemo(() => {
     return isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());
@@ -501,7 +491,6 @@ let TabsMenu = (props: {items: Array<Node<any>>, onSelectionChange: TabsProps['o
           ref={pickerRef ? pickerRef : undefined}
           isDisabled={isDisabled || allKeysDisabled}
           density={density!}
-          isIconOnly={isIconOnly}
           items={items}
           disabledKeys={disabledKeys}
           selectedKey={selectedKey}
diff --git a/packages/@react-spectrum/s2/src/TabsPicker.tsx b/packages/@react-spectrum/s2/src/TabsPicker.tsx
index c66c8c264e0..313c626876c 100644
--- a/packages/@react-spectrum/s2/src/TabsPicker.tsx
+++ b/packages/@react-spectrum/s2/src/TabsPicker.tsx
@@ -29,6 +29,7 @@ import {
   checkmark,
   description,
   icon,
+  iconCenterWrapper,
   label,
   menuitem,
   sectionHeader,
@@ -36,7 +37,7 @@ import {
 } from './Menu';
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
-import {edgeToText, focusRing, size, style} from '../style' with {type: 'macro'};
+import {edgeToText, focusRing, style} from '../style' with {type: 'macro'};
 import {fieldInput, StyleProps} from './style-utils' with {type: 'macro'};
 import {
   FieldLabel
@@ -85,11 +86,7 @@ export interface PickerProps<T extends object> extends
     /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */
     menuWidth?: number,
     /** Density of the tabs, affects the height of the picker. */
-    density: 'compact' | 'regular',
-    /**
-     * If the tab picker should only display icon and no text for the button label.
-     */
-    isIconOnly?: boolean
+    density: 'compact' | 'regular'
 }
 
 export const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
@@ -158,14 +155,6 @@ const iconStyles = style({
   }
 });
 
-const iconCenterWrapper = style({
-  display: 'flex',
-  gridArea: 'icon',
-  paddingStart: {
-    isIconOnly: size(6)
-  }
-});
-
 let InsideSelectValueContext = createContext(false);
 
 function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
@@ -181,7 +170,6 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
     items,
     placeholder = stringFormatter.format('picker.placeholder'),
     density,
-    isIconOnly,
     ...pickerProps
   } = props;
   let isQuiet = true;
@@ -217,7 +205,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
                       [IconContext, {
                         slots: {
                           icon: {
-                            render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({isIconOnly})}),
+                            render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),
                             styles: icon
                           }
                         }
@@ -226,13 +214,10 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
                         slots: {
                           // Default slot is useful when converting other collections to PickerItems.
                           [DEFAULT_SLOT]: {styles: style({
-                            display: {
-                              default: 'block',
-                              isIconOnly: 'none'
-                            },
+                            display: 'block',
                             flexGrow: 1,
                             truncate: true
-                          })({isIconOnly})}
+                          })}
                         }
                       }],
                       [InsideSelectValueContext, true]
@@ -306,7 +291,7 @@ export function PickerItem(props: PickerItemProps) {
           <DefaultProvider
             context={IconContext}
             value={{slots: {
-              icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({})}), styles: icon}
+              icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}
             }}}>
             <DefaultProvider
               context={TextContext}
diff --git a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
index fa8d585bf5f..554dda9aca4 100644
--- a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
@@ -30,10 +30,10 @@ const meta: Meta<typeof Tabs> = {
 export default meta;
 
 export const Example = (args: any) => (
-  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+  <div className={style({width: 700, height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
     <Tabs {...args} styles={style({width: 'full'})}>
       <TabList aria-label="History of Ancient Rome">
-        <Tab id="FoR">Founding of Rome</Tab>
+        <Tab id="FoR"><Edit /><Text>Founding of Rome</Text></Tab>
         <Tab id="MaR">Monarchy and Republic</Tab>
         <Tab id="Emp">Empire</Tab>
       </TabList>
@@ -58,10 +58,10 @@ export const Example = (args: any) => (
 );
 
 export const Disabled = (args: any) => (
-  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+  <div className={style({width: 700, height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
     <Tabs {...args} styles={style({width: 'full'})} disabledKeys={['FoR', 'MaR', 'Emp']}>
       <TabList aria-label="History of Ancient Rome">
-        <Tab id="FoR">Founding of Rome</Tab>
+        <Tab id="FoR"><Edit /><Text>Founding of Rome</Text></Tab>
         <Tab id="MaR">Monarchy and Republic</Tab>
         <Tab id="Emp">Empire</Tab>
       </TabList>
@@ -78,9 +78,9 @@ export const Disabled = (args: any) => (
   </div>
 );
 
-const IconsRender = (props) => (
-  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
-    <Tabs {...props} styles={style({width: 'full'})}>
+export const Icons = (args: any) => (
+  <div className={style({width: 700, height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+    <Tabs {...args} styles={style({width: 'full'})} iconOnly>
       <TabList aria-label="History of Ancient Rome">
         <Tab id="FoR" aria-label="Edit"><Edit /><Text>Founding of Rome</Text></Tab>
         <Tab id="MaR" aria-label="Notifications"><Bell /><Text>Monarchy and Republic</Text></Tab>
@@ -99,10 +99,6 @@ const IconsRender = (props) => (
   </div>
 );
 
-export const Icons = {
-  render: (args) => <IconsRender {...args} />
-};
-
 interface Item {
   id: number,
   title: string,
@@ -115,7 +111,7 @@ let items: Item[] = [
 ];
 
 export const Dynamic = (args: any) => (
-  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+  <div className={style({width: 700, height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
     <Tabs {...args} styles={style({width: 'full'})} disabledKeys={new Set([2])}>
       <TabList aria-label="History of Ancient Rome" items={items}>
         {item => <Tab>{item.title}</Tab>}

From c5d4bd6c212155a1180ca47f39e274f5cb03620c Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 10 Jan 2025 16:09:30 -0800
Subject: [PATCH 4/6] Revert "feat: Tabs collapse behaviour (#7202)"

This reverts commit cd4da2b3b04a7454bacdaef5f7fe9b9bc969c610.
---
 .../s2/chromatic/Tabs.stories.tsx             | 129 ++--
 packages/@react-spectrum/s2/intl/en-US.json   |   1 -
 packages/@react-spectrum/s2/intl/he-IL.json   |   1 -
 packages/@react-spectrum/s2/package.json      |   1 -
 packages/@react-spectrum/s2/src/Tabs.tsx      | 557 +++++-------------
 .../@react-spectrum/s2/src/TabsPicker.tsx     | 321 ----------
 .../s2/stories/Tabs.stories.tsx               | 145 ++---
 .../react-aria-components/src/Breadcrumbs.tsx |   1 -
 .../react-aria-components/src/ListBox.tsx     |   3 +-
 packages/react-aria-components/src/Tabs.tsx   |   7 +-
 yarn.lock                                     |   1 -
 11 files changed, 274 insertions(+), 893 deletions(-)
 delete mode 100644 packages/@react-spectrum/s2/src/TabsPicker.tsx

diff --git a/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx b/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx
index 366f3453d2c..0c69a249419 100644
--- a/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx
@@ -16,7 +16,6 @@ import Heart from '../s2wf-icons/S2_Icon_Heart_20_N.svg';
 import type {Meta} from '@storybook/react';
 import {style} from '../style/spectrum-theme' with { type: 'macro' };
 import {Tab, TabList, TabPanel, Tabs} from '../src/Tabs';
-import {Text} from '@react-spectrum/s2';
 
 const meta: Meta<typeof Tabs> = {
   component: Tabs,
@@ -28,72 +27,66 @@ const meta: Meta<typeof Tabs> = {
 
 export default meta;
 
-export const Example = {
-  render: (args: any) => (
-    <Tabs {...args} styles={style({width: 450, height: 256})}>
-      <TabList aria-label="History of Ancient Rome">
-        <Tab id="FoR">Founding of Rome</Tab>
-        <Tab id="MaR">Monarchy and Republic</Tab>
-        <Tab id="Emp">Empire</Tab>
-      </TabList>
-      <TabPanel id="FoR" UNSAFE_style={{display: 'flex'}}>
-        <div style={{overflow: 'auto'}}>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.</p>
-        </div>
-      </TabPanel>
-      <TabPanel id="MaR" UNSAFE_style={{display: 'flex'}}>
-        <div style={{overflow: 'auto'}}>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut vulputate justo. Suspendisse potenti. Nunc id fringilla leo, at luctus quam. Maecenas et ipsum nisi. Curabitur in porta purus, a pretium est. Fusce eu urna diam. Sed nunc neque, consectetur ut purus nec, consequat elementum libero. Sed ut diam in quam maximus condimentum at non erat. Vestibulum sagittis rutrum velit, vitae suscipit arcu. Nulla ac feugiat ante, vitae laoreet ligula. Maecenas sed molestie ligula. Nulla sed fringilla ex. Nulla viverra tortor at enim condimentum egestas. Nulla sed tristique sapien. Integer ligula quam, vulputate eget mollis eu, interdum sit amet justo.</p>
-          <p>Vivamus dignissim tortor ut sapien congue tristique. Sed ac aliquet mauris. Nulla metus dui, elementum sit amet luctus eu, condimentum id elit. Praesent id nibh sed ligula congue venenatis. Pellentesque urna turpis, eleifend id pellentesque a, auctor nec neque. Vestibulum ipsum mauris, rutrum sit amet magna et, aliquet mollis tellus. Pellentesque nec ultricies nibh, at tempus massa. Phasellus dictum turpis et interdum scelerisque. Aliquam fermentum tincidunt ipsum sit amet suscipit. Fusce non dui sed diam lacinia mattis fermentum eu urna. Cras pretium id nunc in elementum. Mauris laoreet odio vitae laoreet dictum. In non justo nec nunc vehicula posuere non non ligula. Nullam eleifend scelerisque nibh, in sollicitudin tortor ullamcorper vel. Praesent sagittis risus in erat dignissim, non lacinia elit efficitur. Quisque maximus nulla vel luctus pharetra.</p>
-        </div>
-      </TabPanel>
-      <TabPanel id="Emp" UNSAFE_style={{display: 'flex'}}>
-        <div style={{overflow: 'auto'}}>
-          <p>Alea jacta est.</p>
-        </div>
-      </TabPanel>
-    </Tabs>
-  )
-};
+export const Example = (args: any) => (
+  <Tabs {...args} styles={style({width: 450, height: 256})}>
+    <TabList aria-label="History of Ancient Rome">
+      <Tab id="FoR"><Edit />Founding of Rome</Tab>
+      <Tab id="MaR">Monarchy and Republic</Tab>
+      <Tab id="Emp">Empire</Tab>
+    </TabList>
+    <TabPanel id="FoR" UNSAFE_style={{display: 'flex'}}>
+      <div style={{overflow: 'auto'}}>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.</p>
+      </div>
+    </TabPanel>
+    <TabPanel id="MaR" UNSAFE_style={{display: 'flex'}}>
+      <div style={{overflow: 'auto'}}>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut vulputate justo. Suspendisse potenti. Nunc id fringilla leo, at luctus quam. Maecenas et ipsum nisi. Curabitur in porta purus, a pretium est. Fusce eu urna diam. Sed nunc neque, consectetur ut purus nec, consequat elementum libero. Sed ut diam in quam maximus condimentum at non erat. Vestibulum sagittis rutrum velit, vitae suscipit arcu. Nulla ac feugiat ante, vitae laoreet ligula. Maecenas sed molestie ligula. Nulla sed fringilla ex. Nulla viverra tortor at enim condimentum egestas. Nulla sed tristique sapien. Integer ligula quam, vulputate eget mollis eu, interdum sit amet justo.</p>
+        <p>Vivamus dignissim tortor ut sapien congue tristique. Sed ac aliquet mauris. Nulla metus dui, elementum sit amet luctus eu, condimentum id elit. Praesent id nibh sed ligula congue venenatis. Pellentesque urna turpis, eleifend id pellentesque a, auctor nec neque. Vestibulum ipsum mauris, rutrum sit amet magna et, aliquet mollis tellus. Pellentesque nec ultricies nibh, at tempus massa. Phasellus dictum turpis et interdum scelerisque. Aliquam fermentum tincidunt ipsum sit amet suscipit. Fusce non dui sed diam lacinia mattis fermentum eu urna. Cras pretium id nunc in elementum. Mauris laoreet odio vitae laoreet dictum. In non justo nec nunc vehicula posuere non non ligula. Nullam eleifend scelerisque nibh, in sollicitudin tortor ullamcorper vel. Praesent sagittis risus in erat dignissim, non lacinia elit efficitur. Quisque maximus nulla vel luctus pharetra.</p>
+      </div>
+    </TabPanel>
+    <TabPanel id="Emp" UNSAFE_style={{display: 'flex'}}>
+      <div style={{overflow: 'auto'}}>
+        <p>Alea jacta est.</p>
+      </div>
+    </TabPanel>
+  </Tabs>
+);
 
-export const Disabled = {
-  render: (args: any) => (
-    <Tabs {...args} styles={style({width: 450, height: 144})} disabledKeys={['FoR', 'MaR', 'Emp']}>
-      <TabList aria-label="History of Ancient Rome">
-        <Tab id="FoR" aria-label="Edit"><Edit /><Text>Edit</Text></Tab>
-        <Tab id="MaR" aria-label="Notifications"><Bell /><Text>Notifications</Text></Tab>
-        <Tab id="Emp" aria-label="Likes"><Heart /><Text>Likes</Text></Tab>
-      </TabList>
-      <TabPanel id="FoR">
-        Arma virumque cano, Troiae qui primus ab oris.
-      </TabPanel>
-      <TabPanel id="MaR">
-        Senatus Populusque Romanus.
-      </TabPanel>
-      <TabPanel id="Emp">
-        Alea jacta est.
-      </TabPanel>
-    </Tabs>
-  )
-};
+export const Disabled = (args: any) => (
+  <Tabs {...args} styles={style({width: 450, height: 144})} disabledKeys={['FoR', 'MaR', 'Emp']}>
+    <TabList aria-label="History of Ancient Rome">
+      <Tab id="FoR"><Edit />Founding of Rome</Tab>
+      <Tab id="MaR">Monarchy and Republic</Tab>
+      <Tab id="Emp">Empire</Tab>
+    </TabList>
+    <TabPanel id="FoR">
+      Arma virumque cano, Troiae qui primus ab oris.
+    </TabPanel>
+    <TabPanel id="MaR">
+      Senatus Populusque Romanus.
+    </TabPanel>
+    <TabPanel id="Emp">
+      Alea jacta est.
+    </TabPanel>
+  </Tabs>
+);
 
-export const Icons = {
-  render: (args: any) => (
-    <Tabs {...args} styles={style({width: 208, height: 144})} isIconOnly>
-      <TabList aria-label="History of Ancient Rome">
-        <Tab id="FoR" aria-label="Edit"><Edit /><Text>Edit</Text></Tab>
-        <Tab id="MaR" aria-label="Notifications"><Bell /><Text>Notifications</Text></Tab>
-        <Tab id="Emp" aria-label="Likes"><Heart /><Text>Likes</Text></Tab>
-      </TabList>
-      <TabPanel id="FoR">
-        Arma virumque cano, Troiae qui primus ab oris.
-      </TabPanel>
-      <TabPanel id="MaR">
-        Senatus Populusque Romanus.
-      </TabPanel>
-      <TabPanel id="Emp">
-        Alea jacta est.
-      </TabPanel>
-    </Tabs>
-  )
-};
+export const Icons = (args: any) => (
+  <Tabs {...args} styles={style({width: 208, height: 144})}>
+    <TabList aria-label="History of Ancient Rome">
+      <Tab id="FoR" aria-label="Edit"><Edit /></Tab>
+      <Tab id="MaR" aria-label="Notifications"><Bell /></Tab>
+      <Tab id="Emp" aria-label="Likes"><Heart /></Tab>
+    </TabList>
+    <TabPanel id="FoR">
+      Arma virumque cano, Troiae qui primus ab oris.
+    </TabPanel>
+    <TabPanel id="MaR">
+      Senatus Populusque Romanus.
+    </TabPanel>
+    <TabPanel id="Emp">
+      Alea jacta est.
+    </TabPanel>
+  </Tabs>
+);
diff --git a/packages/@react-spectrum/s2/intl/en-US.json b/packages/@react-spectrum/s2/intl/en-US.json
index 90828c535bb..38217e1a3cc 100644
--- a/packages/@react-spectrum/s2/intl/en-US.json
+++ b/packages/@react-spectrum/s2/intl/en-US.json
@@ -25,7 +25,6 @@
   "table.sortAscending": "Sort Ascending",
   "table.sortDescending": "Sort Descending",
   "table.resizeColumn": "Resize column",
-  "tabs.selectorLabel": "Tab selector",
   "tag.showAllButtonLabel": "Show all ({tagCount, number})",
   "tag.hideButtonLabel": "Show less",
   "tag.actions": "Actions",
diff --git a/packages/@react-spectrum/s2/intl/he-IL.json b/packages/@react-spectrum/s2/intl/he-IL.json
index edaeb149912..b433b945340 100644
--- a/packages/@react-spectrum/s2/intl/he-IL.json
+++ b/packages/@react-spectrum/s2/intl/he-IL.json
@@ -25,7 +25,6 @@
   "table.resizeColumn": "שנה את גודל העמודה",
   "table.sortAscending": "מיין בסדר עולה",
   "table.sortDescending": "מיין בסדר יורד",
-  "tabs.selectorLabel": "Tab selector",
   "tag.actions": "פעולות",
   "tag.hideButtonLabel": "הצג פחות",
   "tag.noTags": "ללא",
diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json
index 14e014f3407..153d3e1eb2d 100644
--- a/packages/@react-spectrum/s2/package.json
+++ b/packages/@react-spectrum/s2/package.json
@@ -132,7 +132,6 @@
     "@react-aria/utils": "^3.26.0",
     "@react-spectrum/utils": "^3.12.0",
     "@react-stately/layout": "^4.1.0",
-    "@react-stately/utils": "^3.10.5",
     "@react-stately/virtualizer": "^4.2.0",
     "@react-types/color": "^3.0.1",
     "@react-types/dialog": "^3.5.14",
diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index 2b9dcd250b2..ac8c776c881 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -11,35 +11,29 @@
  */
 
 import {
-  TabListProps as AriaTabListProps,
-  TabPanel as AriaTabPanel,
-  TabPanelProps as AriaTabPanelProps,
-  TabProps as AriaTabProps,
-  TabsProps as AriaTabsProps,
-  CollectionRenderer,
-  ContextValue,
-  Provider,
-  Tab as RACTab,
-  TabList as RACTabList,
-  Tabs as RACTabs,
-  TabListStateContext,
-  UNSTABLE_CollectionRendererContext,
-  UNSTABLE_DefaultCollectionRenderer
-} from 'react-aria-components';
+    TabListProps as AriaTabListProps,
+    TabPanel as AriaTabPanel,
+    TabPanelProps as AriaTabPanelProps,
+    TabProps as AriaTabProps,
+    TabsProps as AriaTabsProps,
+    ContextValue,
+    Provider,
+    Tab as RACTab,
+    TabList as RACTabList,
+    Tabs as RACTabs,
+    TabListStateContext,
+    useSlottedContext
+  } from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
-import {Collection, DOMRef, DOMRefValue, FocusableRef, FocusableRefValue, Key, Node, Orientation, RefObject} from '@react-types/shared';
-import {createContext, forwardRef, Fragment, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {Collection, DOMRef, DOMRefValue, Key, Node, Orientation} from '@react-types/shared';
+import {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react';
 import {focusRing, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import {Picker, PickerItem} from './TabsPicker';
 import {Text, TextContext} from './Content';
-import {useControlledState} from '@react-stately/utils';
 import {useDOMRef} from '@react-spectrum/utils';
-import {useEffectEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
-import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useLayoutEffect} from '@react-aria/utils';
+import {useLocale} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | 'children'>, UnsafeStyles {
@@ -51,19 +45,18 @@ export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | '
    * The amount of space between the tabs.
    * @default 'regular'
    */
-  density?: 'compact' | 'regular',
-  /**
-   * If the tabs should only display icons and no text.
-   */
-  iconOnly?: boolean
+  density?: 'compact' | 'regular'
 }
 
 export interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className'>, StyleProps {
   /** The content to display in the tab. */
-  children: ReactNode
+  children?: ReactNode
 }
 
-export interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'style' | 'className'>, StyleProps {}
+export interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'children' | 'style' | 'className'>, StyleProps {
+  /** The content to display in the tablist. */
+  children?: ReactNode
+}
 
 export interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className'>, UnsafeStyles {
   /** Spectrum-defined styles, returned by the `style()` macro. */
@@ -73,64 +66,82 @@ export interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'sty
 }
 
 export const TabsContext = createContext<ContextValue<TabsProps, DOMRefValue<HTMLDivElement>>>(null);
-const InternalTabsContext = createContext<TabsProps & {onFocus:() => void, pickerRef?: FocusableRef<HTMLButtonElement>}>({onFocus: () => {}});
 
-const tabs = style({
+const tabPanel = style({
+  marginTop: 4,
+  color: 'gray-800',
+  flexGrow: 1,
+  flexBasis: '[0%]',
+  minHeight: 0,
+  minWidth: 0
+}, getAllowedOverrides({height: true}));
+
+export function TabPanel(props: TabPanelProps) {
+  return (
+    <AriaTabPanel
+      {...props}
+      style={props.UNSAFE_style}
+      className={(props.UNSAFE_className || '') + tabPanel(null, props.styles)} />
+  );
+}
+
+const tab = style({
+  ...focusRing(),
   display: 'flex',
-  flexShrink: 0,
-  font: 'ui',
-  flexDirection: {
-    orientation: {
-      horizontal: 'column'
+  color: {
+    default: 'neutral-subdued',
+    isSelected: 'neutral',
+    isHovered: 'neutral-subdued',
+    isDisabled: 'disabled',
+    forcedColors: {
+      isSelected: 'Highlight',
+      isDisabled: 'GrayText'
+    }
+  },
+  borderRadius: 'sm',
+  gap: 'text-to-visual',
+  height: {
+    density: {
+      compact: 32,
+      regular: 48
     }
+  },
+  alignItems: 'center',
+  position: 'relative',
+  cursor: 'default',
+  flexShrink: 0,
+  transition: 'default'
+}, getAllowedOverrides());
+
+const icon = style({
+  flexShrink: 0,
+  '--iconPrimary': {
+    type: 'fill',
+    value: 'currentColor'
   }
-}, getAllowedOverrides({height: true}));
+});
 
-/**
- * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
- */
-export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {
-  [props, ref] = useSpectrumContextProps(props, ref, TabsContext);
-  let {
-    density = 'regular',
-    isDisabled,
-    disabledKeys,
-    orientation = 'horizontal',
-    iconOnly = false
-  } = props;
-  let domRef = useDOMRef(ref);
-  let [value, setValue] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null!, props.onSelectionChange);
-  let pickerRef = useRef<FocusableRefValue<HTMLButtonElement>>(null);
+export function Tab(props: TabProps) {
+  let {density} = useSlottedContext(TabsContext) ?? {};
 
   return (
-    <Provider
-      values={[
-        [InternalTabsContext, {
-          density,
-          isDisabled,
-          orientation,
-          disabledKeys,
-          selectedKey: value,
-          onSelectionChange: setValue,
-          iconOnly,
-          onFocus: () => pickerRef.current?.focus(),
-          pickerRef
-        }]
-      ]}>
-      <CollapsingCollection containerRef={domRef}>
-        <RACTabs
-          {...props}
-          ref={domRef}
-          selectedKey={value}
-          onSelectionChange={setValue}
-          style={props.UNSAFE_style}
-          className={renderProps => (props.UNSAFE_className || '') + tabs({...renderProps}, props.styles)}>
-          {props.children}
-        </RACTabs>
-      </CollapsingCollection>
-    </Provider>
+    <RACTab
+      {...props}
+      style={props.UNSAFE_style}
+      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density}, props.styles)}>
+      <Provider
+        values={[
+          [TextContext, {styles: style({order: 1})}],
+          [IconContext, {
+            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
+            styles: icon
+          }]
+        ]}>
+        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
+      </Provider>
+    </RACTab>
   );
-});
+}
 
 const tablist = style({
   display: 'flex',
@@ -140,12 +151,6 @@ const tablist = style({
         density: {
           compact: 24,
           regular: 32
-        },
-        isIconOnly: {
-          density: {
-            compact: 16,
-            regular: 24
-          }
         }
       }
     }
@@ -170,58 +175,63 @@ const tablist = style({
 });
 
 export function TabList<T extends object>(props: TabListProps<T>) {
-  let {density, isDisabled, disabledKeys, orientation, iconOnly, onFocus} = useContext(InternalTabsContext) ?? {};
-  let {showItems} = useContext(CollapseContext) ?? {};
+  let {density, isDisabled, disabledKeys, orientation} = useSlottedContext(TabsContext) ?? {};
   let state = useContext(TabListStateContext);
   let [selectedTab, setSelectedTab] = useState<HTMLElement | undefined>(undefined);
   let tablistRef = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
-    if (tablistRef?.current && showItems) {
+    if (tablistRef?.current) {
       let tab: HTMLElement | null = tablistRef.current.querySelector('[role=tab][data-selected=true]');
 
       if (tab != null) {
         setSelectedTab(tab);
       }
-    } else if (tablistRef?.current) {
-      let picker: HTMLElement | null = tablistRef.current.querySelector('button');
-      if (picker != null) {
-        setSelectedTab(picker);
-      }
     }
-  }, [tablistRef, state?.selectedItem?.key, showItems]);
-
-  let prevFocused = useRef<boolean | undefined>(false);
-  useLayoutEffect(() => {
-    if (!showItems && !prevFocused.current && state?.selectionManager.isFocused) {
-      onFocus();
-    }
-    prevFocused.current = state?.selectionManager.isFocused;
-  }, [state?.selectionManager.isFocused, state?.selectionManager.focusedKey, showItems]);
+  }, [tablistRef, state?.selectedItem?.key]);
 
   return (
     <div
       style={props.UNSAFE_style}
       className={(props.UNSAFE_className || '') + style({position: 'relative'}, getAllowedOverrides())(null, props.styles)}>
-      {showItems && orientation === 'vertical' &&
+      {orientation === 'vertical' &&
         <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}
       <RACTabList
         {...props}
         ref={tablistRef}
-        className={renderProps => tablist({...renderProps, isIconOnly: iconOnly, density})} />
+        className={renderProps => tablist({...renderProps, density})} />
       {orientation === 'horizontal' &&
-        <TabLine showItems={showItems} disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}
+        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}
     </div>
   );
 }
 
+function isAllTabsDisabled<T>(collection: Collection<Node<T>> | null, disabledKeys: Set<Key>) {
+  let testKey: Key | null = null;
+  if (collection && collection.size > 0) {
+    testKey = collection.getFirstKey();
+
+    let index = 0;
+    while (testKey && index < collection.size) {
+      // We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it
+      if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) {
+        return false;
+      }
+
+      testKey = collection.getKeyAfter(testKey);
+      index++;
+    }
+    return true;
+  }
+  return false;
+}
+
 interface TabLineProps {
   disabledKeys: Iterable<Key> | undefined,
   isDisabled: boolean | undefined,
   selectedTab: HTMLElement | undefined,
   orientation?: Orientation,
-  density?: 'compact' | 'regular',
-  showItems?: boolean
+  density?: 'compact' | 'regular'
 }
 
 const selectedIndicator = style({
@@ -266,9 +276,12 @@ function TabLine(props: TabLineProps) {
   let {direction} = useLocale();
   let state = useContext(TabListStateContext);
 
-  let isDisabled = useMemo(() => {
-    return isTabsDisabled || isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());
-  }, [state?.collection, disabledKeys, isTabsDisabled]);
+  // We want to add disabled styling to the selection indicator only if all the Tabs are disabled
+  let [isDisabled, setIsDisabled] = useState<boolean>(false);
+  useEffect(() => {
+    let isDisabled = isTabsDisabled || isAllTabsDisabled(state?.collection || null, disabledKeys ? new Set(disabledKeys) : new Set(null));
+    setIsDisabled(isDisabled);
+  }, [state?.collection, disabledKeys, isTabsDisabled, setIsDisabled]);
 
   let [style, setStyle] = useState<{transform: string | undefined, width: string | undefined, height: string | undefined}>({
     transform: undefined,
@@ -308,303 +321,43 @@ function TabLine(props: TabLineProps) {
   );
 }
 
-const tab = style({
-  ...focusRing(),
+const tabs = style({
   display: 'flex',
-  color: {
-    default: 'neutral-subdued',
-    isSelected: 'neutral',
-    isHovered: 'neutral-subdued',
-    isDisabled: 'disabled',
-    forcedColors: {
-      isSelected: 'Highlight',
-      isDisabled: 'GrayText'
-    }
-  },
-  borderRadius: 'sm',
-  gap: 'text-to-visual',
-  height: {
-    density: {
-      compact: 32,
-      regular: 48
-    }
-  },
-  alignItems: 'center',
-  position: 'relative',
-  cursor: 'default',
-  flexShrink: 0,
-  transition: 'default'
-}, getAllowedOverrides());
-
-const icon = style({
-  display: 'block',
   flexShrink: 0,
-  '--iconPrimary': {
-    type: 'fill',
-    value: 'currentColor'
+  fontFamily: 'sans',
+  fontWeight: 'normal',
+  flexDirection: {
+    orientation: {
+      horizontal: 'column'
+    }
   }
-});
-
-export function Tab(props: TabProps) {
-  let {density, iconOnly} = useContext(InternalTabsContext) ?? {};
-
-  return (
-    <RACTab
-      {...props}
-      // @ts-ignore
-      originalProps={props}
-      style={props.UNSAFE_style}
-      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density}, props.styles)}>
-      {({
-          // @ts-ignore
-          isMenu
-        }) => {
-        if (isMenu) {
-          return props.children;
-        } else {
-          return (
-            <Provider
-              values={[
-                [TextContext, {
-                  styles:
-                    style({
-                      order: 1,
-                      display: {
-                        isIconOnly: 'none'
-                      }
-                    })({isIconOnly: iconOnly})
-                }],
-                [IconContext, {
-                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-                  styles: icon
-                }]
-              ]}>
-              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
-            </Provider>
-          );
-        }
-      }}
-    </RACTab>
-  );
-}
-
-const tabPanel = style({
-  marginTop: 4,
-  color: 'gray-800',
-  flexGrow: 1,
-  flexBasis: '[0%]',
-  minHeight: 0,
-  minWidth: 0
 }, getAllowedOverrides({height: true}));
 
-export function TabPanel(props: TabPanelProps) {
+/**
+ * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
+ */
+export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, TabsContext);
+  let {
+    density = 'regular',
+    isDisabled,
+    disabledKeys,
+    orientation = 'horizontal'
+  } = props;
+  let domRef = useDOMRef(ref);
+
   return (
-    <AriaTabPanel
+    <RACTabs
       {...props}
+      ref={domRef}
       style={props.UNSAFE_style}
-      className={(props.UNSAFE_className || '') + tabPanel(null, props.styles)} />
-  );
-}
-
-function isAllTabsDisabled<T>(collection: Collection<Node<T>> | undefined, disabledKeys: Set<Key>) {
-  let testKey: Key | null = null;
-  if (collection && collection.size > 0) {
-    testKey = collection.getFirstKey();
-
-    let index = 0;
-    while (testKey && index < collection.size) {
-      // We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it
-      if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) {
-        return false;
-      }
-
-      testKey = collection.getKeyAfter(testKey);
-      index++;
-    }
-    return true;
-  }
-  return false;
-}
-
-let HiddenTabs = function (props: {
-  listRef: RefObject<HTMLDivElement | null>,
-  items: Array<Node<any>>,
-  size?: string,
-  density?: 'compact' | 'regular'
-}) {
-  let {listRef, items, size, density} = props;
-
-  return (
-    <div
-      // @ts-ignore
-      inert="true"
-      ref={listRef}
-      className={style({
-        display: '[inherit]',
-        flexDirection: '[inherit]',
-        gap: '[inherit]',
-        flexWrap: '[inherit]',
-        position: 'absolute',
-        inset: 0,
-        visibility: 'hidden',
-        overflow: 'hidden',
-        opacity: 0
-      })}>
-      {items.map((item) => {
-        // pull off individual props as an allow list, don't want refs or other props getting through
-        return (
-          <div
-            data-hidden-tab
-            style={item.props.UNSAFE_style}
-            key={item.key}
-            className={item.props.className({size, density})}>
-            {item.props.children({size, density})}
-          </div>
-        );
-      })}
-    </div>
+      className={renderProps => (props.UNSAFE_className || '') + tabs({...renderProps}, props.styles)}>
+      <Provider
+        values={[
+          [TabsContext, {density, isDisabled, disabledKeys, orientation}]
+        ]}>
+        {props.children}
+      </Provider>
+    </RACTabs>
   );
-};
-
-let TabsMenu = (props: {items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']}) => {
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
-  let {items} = props;
-  let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, pickerRef} = useContext(InternalTabsContext);
-  let state = useContext(TabListStateContext);
-  let allKeysDisabled = useMemo(() => {
-    return isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());
-  }, [state?.collection, disabledKeys]);
-
-  return (
-    <UNSTABLE_CollectionRendererContext.Provider value={UNSTABLE_DefaultCollectionRenderer}>
-      <div
-        className={style({
-          display: 'flex',
-          alignItems: 'center',
-          height: {
-            density: {
-              compact: 32,
-              regular: 48
-            }
-          }})({density})}>
-        <Picker
-          ref={pickerRef ? pickerRef : undefined}
-          isDisabled={isDisabled || allKeysDisabled}
-          density={density!}
-          items={items}
-          disabledKeys={disabledKeys}
-          selectedKey={selectedKey}
-          onSelectionChange={onSelectionChange}
-          aria-label={stringFormatter.format('tabs.selectorLabel')}>
-          {(item: Node<any>) => {
-            // need to determine the best way to handle icon only -> icon and text
-            // good enough to aria-label the picker item?
-            return (
-              <PickerItem
-                {...item.props.originalProps}
-                isDisabled={isDisabled || allKeysDisabled}
-                key={item.key}>
-                {item.props.children({density, isMenu: true})}
-              </PickerItem>
-            );
-          }}
-        </Picker>
-      </div>
-    </UNSTABLE_CollectionRendererContext.Provider>
-  );
-};
-
-// Context for passing the count for the custom renderer
-let CollapseContext = createContext<{
-  containerRef: RefObject<HTMLDivElement | null>,
-  showItems: boolean,
-  setShowItems:(value: boolean) => void
-} | null>(null);
-
-function CollapsingCollection({children, containerRef}) {
-  let [showItems, _setShowItems] = useState(true);
-  let {orientation} = useContext(InternalTabsContext);
-  let setShowItems = useCallback((value: boolean) => {
-    if (orientation === 'vertical') {
-      // if orientation is vertical, we always show the items
-      _setShowItems(true);
-    } else {
-      _setShowItems(value);
-    }
-  }, [orientation]);
-  return (
-    <CollapseContext.Provider value={{containerRef, showItems: orientation === 'vertical' ? true : showItems, setShowItems}}>
-      <UNSTABLE_CollectionRendererContext.Provider value={CollapsingCollectionRenderer}>
-        {children}
-      </UNSTABLE_CollectionRendererContext.Provider>
-    </CollapseContext.Provider>
-  );
-}
-
-let CollapsingCollectionRenderer: CollectionRenderer = {
-  CollectionRoot({collection}) {
-    return useCollectionRender(collection);
-  },
-  CollectionBranch({collection}) {
-    return useCollectionRender(collection);
-  }
-};
-
-
-let useCollectionRender = (collection: Collection<Node<unknown>>) => {
-  let {containerRef, showItems, setShowItems} = useContext(CollapseContext) ?? {};
-  let {density = 'regular', orientation = 'horizontal', onSelectionChange} = useContext(InternalTabsContext);
-  let {direction} = useLocale();
-
-  let children = useMemo(() => {
-    let result: Node<any>[] = [];
-    for (let key of collection.getKeys()) {
-      result.push(collection.getItem(key)!);
-    }
-    return result;
-  }, [collection]);
-
-  let listRef = useRef<HTMLDivElement | null>(null);
-  let updateOverflow = useEffectEvent(() => {
-    if (orientation === 'vertical' || !listRef.current || !containerRef?.current) {
-      return;
-    }
-    let container = listRef.current;
-    let containerRect = container.getBoundingClientRect();
-    let tabs = container.querySelectorAll('[data-hidden-tab]');
-    let lastTab = tabs[tabs.length - 1];
-    let lastTabRect = lastTab.getBoundingClientRect();
-    if (direction === 'ltr') {
-      setShowItems?.(lastTabRect.right <= containerRect.right);
-    } else {
-      setShowItems?.(lastTabRect.left >= containerRect.left);
-    }
-  });
-
-  useResizeObserver({ref: containerRef, onResize: updateOverflow});
-
-  useLayoutEffect(() => {
-    if (collection.size > 0) {
-      queueMicrotask(updateOverflow);
-    }
-  }, [collection.size, updateOverflow]);
-
-  useEffect(() => {
-    // Recalculate visible tags when fonts are loaded.
-    document.fonts?.ready.then(() => updateOverflow());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <>
-      <HiddenTabs items={children} density={density} listRef={listRef} />
-      {showItems ? (
-        children.map(node => <Fragment key={node.key}>{node.render?.(node)}</Fragment>)
-      ) : (
-        <>
-          <TabsMenu items={children} onSelectionChange={onSelectionChange} />
-        </>
-      )}
-    </>
-  );
-};
+});
diff --git a/packages/@react-spectrum/s2/src/TabsPicker.tsx b/packages/@react-spectrum/s2/src/TabsPicker.tsx
deleted file mode 100644
index 313c626876c..00000000000
--- a/packages/@react-spectrum/s2/src/TabsPicker.tsx
+++ /dev/null
@@ -1,321 +0,0 @@
-/*
- * 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 {
-  PopoverProps as AriaPopoverProps,
-  Select as AriaSelect,
-  SelectProps as AriaSelectProps,
-  Button,
-  ContextValue,
-  DEFAULT_SLOT,
-  ListBox,
-  ListBoxItem,
-  ListBoxItemProps,
-  ListBoxProps,
-  Provider,
-  SelectValue
-} from 'react-aria-components';
-import {centerBaseline} from './CenterBaseline';
-import {
-  checkmark,
-  description,
-  icon,
-  iconCenterWrapper,
-  label,
-  menuitem,
-  sectionHeader,
-  sectionHeading
-} from './Menu';
-import CheckmarkIcon from '../ui-icons/Checkmark';
-import ChevronIcon from '../ui-icons/Chevron';
-import {edgeToText, focusRing, style} from '../style' with {type: 'macro'};
-import {fieldInput, StyleProps} from './style-utils' with {type: 'macro'};
-import {
-  FieldLabel
-} from './Field';
-import {FocusableRef, FocusableRefValue, SpectrumLabelableProps} from '@react-types/shared';
-import {forwardRefType} from './types';
-import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
-import {IconContext} from './Icon';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import {Placement} from 'react-aria';
-import {PopoverBase} from './Popover';
-import {pressScale} from './pressScale';
-import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
-import {useFocusableRef} from '@react-spectrum/utils';
-import {useFormProps} from './Form';
-import {useLocalizedStringFormatter} from '@react-aria/i18n';
-import {useSpectrumContextProps} from './useSpectrumContextProps';
-
-
-export interface PickerStyleProps {
-}
-
-export interface PickerProps<T extends object> extends
-  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className'>,
-  PickerStyleProps,
-  StyleProps,
-  SpectrumLabelableProps,
-  Pick<ListBoxProps<T>, 'items'>,
-  Pick<AriaPopoverProps, 'shouldFlip'> {
-    /** The contents of the collection. */
-    children: ReactNode | ((item: T) => ReactNode),
-    /**
-     * Direction the menu will render relative to the Picker.
-     *
-     * @default 'bottom'
-     */
-    direction?: 'bottom' | 'top',
-    /**
-     * Alignment of the menu relative to the input target.
-     *
-     * @default 'start'
-     */
-    align?: 'start' | 'end',
-    /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */
-    menuWidth?: number,
-    /** Density of the tabs, affects the height of the picker. */
-    density: 'compact' | 'regular'
-}
-
-export const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
-
-const inputButton = style({
-  ...focusRing(),
-  ...fieldInput(),
-  outlineStyle: {
-    default: 'none',
-    isFocusVisible: 'solid'
-  },
-  position: 'relative',
-  font: 'ui',
-  display: 'flex',
-  textAlign: 'start',
-  borderStyle: 'none',
-  borderRadius: 'sm',
-  alignItems: 'center',
-  transition: 'default',
-  columnGap: 'text-to-visual',
-  paddingX: 0,
-  backgroundColor: 'transparent',
-  color: {
-    default: 'neutral',
-    isDisabled: 'disabled'
-  },
-  maxWidth: {
-    isQuiet: 'max'
-  },
-  disableTapHighlight: true,
-  height: {
-    default: 48,
-    density: {
-      compact: 32
-    }
-  },
-  boxSizing: 'border-box'
-});
-
-export let menu = style({
-  outlineStyle: 'none',
-  display: 'grid',
-  gridTemplateColumns: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],
-  boxSizing: 'border-box',
-  maxHeight: '[inherit]',
-  overflow: 'auto',
-  padding: 8,
-  fontFamily: 'sans',
-  fontSize: 'control'
-});
-
-const valueStyles = style({
-  flexGrow: 0,
-  truncate: true,
-  display: 'flex',
-  alignItems: 'center',
-  height: 'full'
-});
-
-const iconStyles = style({
-  flexShrink: 0,
-  rotate: 90,
-  '--iconPrimary': {
-    type: 'fill',
-    value: 'currentColor'
-  }
-});
-
-let InsideSelectValueContext = createContext(false);
-
-function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
-  [props, ref] = useSpectrumContextProps(props, ref, PickerContext);
-  let domRef = useFocusableRef(ref);
-  props = useFormProps(props);
-  let {
-    direction = 'bottom',
-    align = 'start',
-    shouldFlip = true,
-    children,
-    items,
-    placeholder = stringFormatter.format('picker.placeholder'),
-    density,
-    ...pickerProps
-  } = props;
-  let isQuiet = true;
-
-  const menuOffset: number = 6;
-  const size = 'M';
-
-  return (
-    <AriaSelect
-      {...pickerProps}
-      placeholder={placeholder}>
-      {({isOpen}) => (
-        <>
-          <FieldLabel isQuiet={isQuiet} />
-          <Button
-            ref={domRef}
-            style={renderProps => pressScale(domRef)(renderProps)}
-            // Prevent press scale from sticking while Picker is open.
-            // @ts-ignore
-            isPressed={false}
-            className={renderProps => inputButton({
-              ...renderProps,
-              size: 'M',
-              isOpen,
-              isQuiet,
-              density
-            })}>
-            <SelectValue className={valueStyles + ' ' + raw('&> * {display: none;}')}>
-              {({defaultChildren}) => {
-                return (
-                  <Provider
-                    values={[
-                      [IconContext, {
-                        slots: {
-                          icon: {
-                            render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),
-                            styles: icon
-                          }
-                        }
-                      }],
-                      [TextContext, {
-                        slots: {
-                          // Default slot is useful when converting other collections to PickerItems.
-                          [DEFAULT_SLOT]: {styles: style({
-                            display: 'block',
-                            flexGrow: 1,
-                            truncate: true
-                          })}
-                        }
-                      }],
-                      [InsideSelectValueContext, true]
-                    ]}>
-                    {defaultChildren}
-                  </Provider>
-                );
-              }}
-            </SelectValue>
-            <ChevronIcon
-              size={size}
-              className={iconStyles} />
-          </Button>
-          <PopoverBase
-            hideArrow
-            offset={menuOffset}
-            placement={`${direction} ${align}` as Placement}
-            shouldFlip={shouldFlip}
-            styles={style({
-              marginStart: -12,
-              minWidth: 192,
-              width: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'
-            })}>
-            <Provider
-              values={[
-                [HeaderContext, {styles: sectionHeader({size})}],
-                [HeadingContext, {styles: sectionHeading}],
-                [TextContext, {
-                  slots: {
-                    description: {styles: description({size})}
-                  }
-                }]
-              ]}>
-              <ListBox
-                items={items}
-                className={menu}>
-                {children}
-              </ListBox>
-            </Provider>
-          </PopoverBase>
-        </>
-      )}
-    </AriaSelect>
-  );
-}
-
-/**
- * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
- */
-let _Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(Picker);
-export {_Picker as Picker};
-
-export interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {
-  children: ReactNode
-}
-
-export function PickerItem(props: PickerItemProps) {
-  let ref = useRef(null);
-  let isLink = props.href != null;
-  const size = 'M';
-  return (
-    <ListBoxItem
-      {...props}
-      ref={ref}
-      textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}
-      style={pressScale(ref, props.UNSAFE_style)}
-      className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>
-      {(renderProps) => {
-        let {children} = props;
-        return (
-          <DefaultProvider
-            context={IconContext}
-            value={{slots: {
-              icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}
-            }}}>
-            <DefaultProvider
-              context={TextContext}
-              value={{
-                slots: {
-                  [DEFAULT_SLOT]: {styles: label({size})}
-                }
-              }}>
-              {!isLink && <CheckmarkIcon size={size} className={checkmark({...renderProps, size})} />}
-              {typeof children === 'string' ? <Text>{children}</Text> : children}
-            </DefaultProvider>
-          </DefaultProvider>
-        );
-      }}
-    </ListBoxItem>
-  );
-}
-
-// A Context.Provider that only sets a value if not inside SelectValue.
-function DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {
-  let inSelectValue = useContext(InsideSelectValueContext);
-  if (inSelectValue) {
-    return children;
-  }
-
-  return <context.Provider value={value}>{children}</context.Provider>;
-}
diff --git a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
index 554dda9aca4..688f4cb3842 100644
--- a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
@@ -11,7 +11,6 @@
  */
 
 import Bell from '../s2wf-icons/S2_Icon_Bell_20_N.svg';
-import {Collection, Text} from '@react-spectrum/s2';
 import Edit from '../s2wf-icons/S2_Icon_Edit_20_N.svg';
 import Heart from '../s2wf-icons/S2_Icon_Heart_20_N.svg';
 import type {Meta} from '@storybook/react';
@@ -30,99 +29,65 @@ const meta: Meta<typeof Tabs> = {
 export default meta;
 
 export const Example = (args: any) => (
-  <div className={style({width: 700, height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
-    <Tabs {...args} styles={style({width: 'full'})}>
-      <TabList aria-label="History of Ancient Rome">
-        <Tab id="FoR"><Edit /><Text>Founding of Rome</Text></Tab>
-        <Tab id="MaR">Monarchy and Republic</Tab>
-        <Tab id="Emp">Empire</Tab>
-      </TabList>
-      <TabPanel id="FoR" UNSAFE_style={{display: 'flex'}} data-panel>
-        <div style={{overflow: 'auto'}}>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.</p>
-        </div>
-      </TabPanel>
-      <TabPanel id="MaR" UNSAFE_style={{display: 'flex'}} data-panel>
-        <div style={{overflow: 'auto'}}>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut vulputate justo. Suspendisse potenti. Nunc id fringilla leo, at luctus quam. Maecenas et ipsum nisi. Curabitur in porta purus, a pretium est. Fusce eu urna diam. Sed nunc neque, consectetur ut purus nec, consequat elementum libero. Sed ut diam in quam maximus condimentum at non erat. Vestibulum sagittis rutrum velit, vitae suscipit arcu. Nulla ac feugiat ante, vitae laoreet ligula. Maecenas sed molestie ligula. Nulla sed fringilla ex. Nulla viverra tortor at enim condimentum egestas. Nulla sed tristique sapien. Integer ligula quam, vulputate eget mollis eu, interdum sit amet justo.</p>
-          <p>Vivamus dignissim tortor ut sapien congue tristique. Sed ac aliquet mauris. Nulla metus dui, elementum sit amet luctus eu, condimentum id elit. Praesent id nibh sed ligula congue venenatis. Pellentesque urna turpis, eleifend id pellentesque a, auctor nec neque. Vestibulum ipsum mauris, rutrum sit amet magna et, aliquet mollis tellus. Pellentesque nec ultricies nibh, at tempus massa. Phasellus dictum turpis et interdum scelerisque. Aliquam fermentum tincidunt ipsum sit amet suscipit. Fusce non dui sed diam lacinia mattis fermentum eu urna. Cras pretium id nunc in elementum. Mauris laoreet odio vitae laoreet dictum. In non justo nec nunc vehicula posuere non non ligula. Nullam eleifend scelerisque nibh, in sollicitudin tortor ullamcorper vel. Praesent sagittis risus in erat dignissim, non lacinia elit efficitur. Quisque maximus nulla vel luctus pharetra.</p>
-        </div>
-      </TabPanel>
-      <TabPanel id="Emp" UNSAFE_style={{display: 'flex'}} data-panel>
-        <div style={{overflow: 'auto'}}>
-          <p>Alea jacta est.</p>
-        </div>
-      </TabPanel>
-    </Tabs>
-  </div>
+  <Tabs {...args} styles={style({width: 450, height: 256})}>
+    <TabList aria-label="History of Ancient Rome">
+      <Tab id="FoR"><Edit />Founding of Rome</Tab>
+      <Tab id="MaR">Monarchy and Republic</Tab>
+      <Tab id="Emp">Empire</Tab>
+    </TabList>
+    <TabPanel id="FoR" UNSAFE_style={{display: 'flex'}}>
+      <div style={{overflow: 'auto'}}>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.</p>
+      </div>
+    </TabPanel>
+    <TabPanel id="MaR" UNSAFE_style={{display: 'flex'}}>
+      <div style={{overflow: 'auto'}}>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut vulputate justo. Suspendisse potenti. Nunc id fringilla leo, at luctus quam. Maecenas et ipsum nisi. Curabitur in porta purus, a pretium est. Fusce eu urna diam. Sed nunc neque, consectetur ut purus nec, consequat elementum libero. Sed ut diam in quam maximus condimentum at non erat. Vestibulum sagittis rutrum velit, vitae suscipit arcu. Nulla ac feugiat ante, vitae laoreet ligula. Maecenas sed molestie ligula. Nulla sed fringilla ex. Nulla viverra tortor at enim condimentum egestas. Nulla sed tristique sapien. Integer ligula quam, vulputate eget mollis eu, interdum sit amet justo.</p>
+        <p>Vivamus dignissim tortor ut sapien congue tristique. Sed ac aliquet mauris. Nulla metus dui, elementum sit amet luctus eu, condimentum id elit. Praesent id nibh sed ligula congue venenatis. Pellentesque urna turpis, eleifend id pellentesque a, auctor nec neque. Vestibulum ipsum mauris, rutrum sit amet magna et, aliquet mollis tellus. Pellentesque nec ultricies nibh, at tempus massa. Phasellus dictum turpis et interdum scelerisque. Aliquam fermentum tincidunt ipsum sit amet suscipit. Fusce non dui sed diam lacinia mattis fermentum eu urna. Cras pretium id nunc in elementum. Mauris laoreet odio vitae laoreet dictum. In non justo nec nunc vehicula posuere non non ligula. Nullam eleifend scelerisque nibh, in sollicitudin tortor ullamcorper vel. Praesent sagittis risus in erat dignissim, non lacinia elit efficitur. Quisque maximus nulla vel luctus pharetra.</p>
+      </div>
+    </TabPanel>
+    <TabPanel id="Emp" UNSAFE_style={{display: 'flex'}}>
+      <div style={{overflow: 'auto'}}>
+        <p>Alea jacta est.</p>
+      </div>
+    </TabPanel>
+  </Tabs>
 );
 
 export const Disabled = (args: any) => (
-  <div className={style({width: 700, height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
-    <Tabs {...args} styles={style({width: 'full'})} disabledKeys={['FoR', 'MaR', 'Emp']}>
-      <TabList aria-label="History of Ancient Rome">
-        <Tab id="FoR"><Edit /><Text>Founding of Rome</Text></Tab>
-        <Tab id="MaR">Monarchy and Republic</Tab>
-        <Tab id="Emp">Empire</Tab>
-      </TabList>
-      <TabPanel id="FoR">
-        Arma virumque cano, Troiae qui primus ab oris.
-      </TabPanel>
-      <TabPanel id="MaR">
-        Senatus Populusque Romanus.
-      </TabPanel>
-      <TabPanel id="Emp">
-        Alea jacta est.
-      </TabPanel>
-    </Tabs>
-  </div>
+  <Tabs {...args} styles={style({width: 450, height: 144})} disabledKeys={['FoR', 'MaR', 'Emp']}>
+    <TabList aria-label="History of Ancient Rome">
+      <Tab id="FoR"><Edit />Founding of Rome</Tab>
+      <Tab id="MaR">Monarchy and Republic</Tab>
+      <Tab id="Emp">Empire</Tab>
+    </TabList>
+    <TabPanel id="FoR">
+      Arma virumque cano, Troiae qui primus ab oris.
+    </TabPanel>
+    <TabPanel id="MaR">
+      Senatus Populusque Romanus.
+    </TabPanel>
+    <TabPanel id="Emp">
+      Alea jacta est.
+    </TabPanel>
+  </Tabs>
 );
 
 export const Icons = (args: any) => (
-  <div className={style({width: 700, height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
-    <Tabs {...args} styles={style({width: 'full'})} iconOnly>
-      <TabList aria-label="History of Ancient Rome">
-        <Tab id="FoR" aria-label="Edit"><Edit /><Text>Founding of Rome</Text></Tab>
-        <Tab id="MaR" aria-label="Notifications"><Bell /><Text>Monarchy and Republic</Text></Tab>
-        <Tab id="Emp" aria-label="Likes"><Heart /><Text>Empire</Text></Tab>
-      </TabList>
-      <TabPanel id="FoR">
-        Arma virumque cano, Troiae qui primus ab oris.
-      </TabPanel>
-      <TabPanel id="MaR">
-        Senatus Populusque Romanus.
-      </TabPanel>
-      <TabPanel id="Emp">
-        Alea jacta est.
-      </TabPanel>
-    </Tabs>
-  </div>
-);
-
-interface Item {
-  id: number,
-  title: string,
-  description: string
-}
-let items: Item[] = [
-  {id: 1, title: 'Mouse settings', description: 'Adjust the sensitivity and speed of your mouse.'},
-  {id: 2, title: 'Keyboard settings', description: 'Customize the layout and function of your keyboard.'},
-  {id: 3, title: 'Gamepad settings', description: 'Configure the buttons and triggers on your gamepad.'}
-];
-
-export const Dynamic = (args: any) => (
-  <div className={style({width: 700, height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
-    <Tabs {...args} styles={style({width: 'full'})} disabledKeys={new Set([2])}>
-      <TabList aria-label="History of Ancient Rome" items={items}>
-        {item => <Tab>{item.title}</Tab>}
-      </TabList>
-      <Collection items={items}>
-        {item => (
-          <TabPanel>
-            {item.description}
-          </TabPanel>
-      )}
-      </Collection>
-    </Tabs>
-  </div>
+  <Tabs {...args} styles={style({width: 208, height: 144})}>
+    <TabList aria-label="History of Ancient Rome">
+      <Tab id="FoR" aria-label="Edit"><Edit /></Tab>
+      <Tab id="MaR" aria-label="Notifications"><Bell /></Tab>
+      <Tab id="Emp" aria-label="Likes"><Heart /></Tab>
+    </TabList>
+    <TabPanel id="FoR">
+      Arma virumque cano, Troiae qui primus ab oris.
+    </TabPanel>
+    <TabPanel id="MaR">
+      Senatus Populusque Romanus.
+    </TabPanel>
+    <TabPanel id="Emp">
+      Alea jacta est.
+    </TabPanel>
+  </Tabs>
 );
diff --git a/packages/react-aria-components/src/Breadcrumbs.tsx b/packages/react-aria-components/src/Breadcrumbs.tsx
index fb980738997..fab3127041d 100644
--- a/packages/react-aria-components/src/Breadcrumbs.tsx
+++ b/packages/react-aria-components/src/Breadcrumbs.tsx
@@ -79,7 +79,6 @@ export const Breadcrumb = /*#__PURE__*/ createLeafComponent('item', function Bre
   // Recreating useBreadcrumbItem because we want to use composition instead of having the link builtin.
   let isCurrent = node.nextKey == null;
   let {isDisabled, onAction} = useSlottedContext(BreadcrumbsContext)!;
-  // why don't we use useBreadcrumbItem?
   let linkProps = {
     'aria-current': isCurrent ? 'page' : null,
     isDisabled: isDisabled || isCurrent,
diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx
index 926f53bfd98..a5aa2703f8e 100644
--- a/packages/react-aria-components/src/ListBox.tsx
+++ b/packages/react-aria-components/src/ListBox.tsx
@@ -13,7 +13,7 @@
 import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria';
 import {Collection, CollectionBuilder, createBranchComponent, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, ItemRenderProps, SectionContext, SectionProps} from './Collection';
-import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {ContextValue, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
 import {DragAndDropHooks} from './useDragAndDrop';
 import {DraggableCollectionState, DroppableCollectionState, ListState, Node, Orientation, SelectionBehavior, useListState} from 'react-stately';
@@ -398,7 +398,6 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent('item', function Li
         values={[
           [TextContext, {
             slots: {
-              [DEFAULT_SLOT]: labelProps,
               label: labelProps,
               description: descriptionProps
             }
diff --git a/packages/react-aria-components/src/Tabs.tsx b/packages/react-aria-components/src/Tabs.tsx
index 9c771a17030..14c388ac635 100644
--- a/packages/react-aria-components/src/Tabs.tsx
+++ b/packages/react-aria-components/src/Tabs.tsx
@@ -253,9 +253,8 @@ export const Tab = /*#__PURE__*/ createLeafComponent('item', (props: TabProps, f
   });
 
   let renderProps = useRenderProps({
-    ...props, // item.props? or is this correct and breadcrumbs are wrong?
+    ...props,
     id: undefined,
-    children: item.rendered,
     defaultClassName: 'react-aria-Tab',
     values: {
       isSelected,
@@ -278,9 +277,7 @@ export const Tab = /*#__PURE__*/ createLeafComponent('item', (props: TabProps, f
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}
       data-pressed={isPressed || undefined}
-      data-hovered={isHovered || undefined}>
-      {renderProps.children}
-    </ElementType>
+      data-hovered={isHovered || undefined} />
   );
 });
 
diff --git a/yarn.lock b/yarn.lock
index 7f47e45bd49..4d24a31b945 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7861,7 +7861,6 @@ __metadata:
     "@react-aria/utils": "npm:^3.26.0"
     "@react-spectrum/utils": "npm:^3.12.0"
     "@react-stately/layout": "npm:^4.1.0"
-    "@react-stately/utils": "npm:^3.10.5"
     "@react-stately/virtualizer": "npm:^4.2.0"
     "@react-types/color": "npm:^3.0.1"
     "@react-types/dialog": "npm:^3.5.14"

From a70251f6477ef80ddc86c4d51629b8f7c4b625db Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 10 Jan 2025 16:14:57 -0800
Subject: [PATCH 5/6] add stuff back that we still want

---
 packages/@react-spectrum/s2/package.json       | 1 +
 packages/@react-spectrum/s2/src/CardView.tsx   | 1 +
 packages/@react-spectrum/s2/src/TableView.tsx  | 1 +
 packages/@react-stately/selection/src/types.ts | 1 +
 packages/react-aria-components/src/Tabs.tsx    | 6 ++++--
 packages/react-aria-components/src/index.ts    | 1 +
 6 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json
index 153d3e1eb2d..14e014f3407 100644
--- a/packages/@react-spectrum/s2/package.json
+++ b/packages/@react-spectrum/s2/package.json
@@ -132,6 +132,7 @@
     "@react-aria/utils": "^3.26.0",
     "@react-spectrum/utils": "^3.12.0",
     "@react-stately/layout": "^4.1.0",
+    "@react-stately/utils": "^3.10.5",
     "@react-stately/virtualizer": "^4.2.0",
     "@react-types/color": "^3.0.1",
     "@react-types/dialog": "^3.5.14",
diff --git a/packages/@react-spectrum/s2/src/CardView.tsx b/packages/@react-spectrum/s2/src/CardView.tsx
index 28745d3ae4f..8d275df67ec 100644
--- a/packages/@react-spectrum/s2/src/CardView.tsx
+++ b/packages/@react-spectrum/s2/src/CardView.tsx
@@ -62,6 +62,7 @@ export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'key
   onLoadMore?: () => void,
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight,
+  /** Provides the ActionBar to render when cards are selected in the CardView. */
   renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
 }
 
diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx
index dd281833cc2..73663391b86 100644
--- a/packages/@react-spectrum/s2/src/TableView.tsx
+++ b/packages/@react-spectrum/s2/src/TableView.tsx
@@ -105,6 +105,7 @@ interface S2TableProps {
   loadingState?: LoadingState,
   /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
   onLoadMore?: () => any,
+  /** Provides the ActionBar to display when rows are selected in the TableView. */
   renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
 }
 
diff --git a/packages/@react-stately/selection/src/types.ts b/packages/@react-stately/selection/src/types.ts
index f6adaff5cf9..8eafe03307b 100644
--- a/packages/@react-stately/selection/src/types.ts
+++ b/packages/@react-stately/selection/src/types.ts
@@ -108,5 +108,6 @@ export interface MultipleSelectionManager extends FocusState {
   isLink(key: Key): boolean,
   /** Returns the props for the given item. */
   getItemProps(key: Key): any,
+  /** The collection of nodes that the selection manager handles. */
   collection: Collection<Node<unknown>>
 }
diff --git a/packages/react-aria-components/src/Tabs.tsx b/packages/react-aria-components/src/Tabs.tsx
index 14c388ac635..55935bf5132 100644
--- a/packages/react-aria-components/src/Tabs.tsx
+++ b/packages/react-aria-components/src/Tabs.tsx
@@ -13,7 +13,7 @@
 import {AriaLabelingProps, forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
 import {AriaTabListProps, AriaTabPanelProps, mergeProps, Orientation, useFocusRing, useHover, useTab, useTabList, useTabPanel} from 'react-aria';
 import {Collection, CollectionBuilder, createHideableComponent, createLeafComponent} from '@react-aria/collections';
-import {CollectionProps, CollectionRendererContext, usePersistedKeys} from './Collection';
+import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, usePersistedKeys} from './Collection';
 import {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
 import {filterDOMProps, useObjectRef} from '@react-aria/utils';
 import {Collection as ICollection, Node, TabListState, useTabListState} from 'react-stately';
@@ -327,7 +327,9 @@ export const TabPanel = /*#__PURE__*/ createHideableComponent(function TabPanel(
           [TabsContext, null],
           [TabListStateContext, null]
         ]}>
-        {renderProps.children}
+        <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>
+          {renderProps.children}
+        </CollectionRendererContext.Provider>
       </Provider>
     </div>
   );
diff --git a/packages/react-aria-components/src/index.ts b/packages/react-aria-components/src/index.ts
index 1950d15570c..e8c3bb8f04c 100644
--- a/packages/react-aria-components/src/index.ts
+++ b/packages/react-aria-components/src/index.ts
@@ -83,6 +83,7 @@ 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 type {AutocompleteProps} from './Autocomplete';
 export type {BreadcrumbsProps, BreadcrumbProps, BreadcrumbRenderProps} from './Breadcrumbs';
 export type {ButtonProps, ButtonRenderProps} from './Button';
 export type {CalendarCellProps, CalendarProps, CalendarRenderProps, CalendarGridProps, CalendarGridHeaderProps, CalendarGridBodyProps, CalendarHeaderCellProps, CalendarCellRenderProps, RangeCalendarProps, RangeCalendarRenderProps} from './Calendar';

From c6680bd9396017c8bb24892a030cd604b692f574 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 10 Jan 2025 16:17:20 -0800
Subject: [PATCH 6/6] update lock

---
 yarn.lock | 1 +
 1 file changed, 1 insertion(+)

diff --git a/yarn.lock b/yarn.lock
index 4d24a31b945..7f47e45bd49 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7861,6 +7861,7 @@ __metadata:
     "@react-aria/utils": "npm:^3.26.0"
     "@react-spectrum/utils": "npm:^3.12.0"
     "@react-stately/layout": "npm:^4.1.0"
+    "@react-stately/utils": "npm:^3.10.5"
     "@react-stately/virtualizer": "npm:^4.2.0"
     "@react-types/color": "npm:^3.0.1"
     "@react-types/dialog": "npm:^3.5.14"