feat: Tabs collapse behaviour (#7202)

* feat: Tabs collapse behaviour

* Get picker menu working

* fix all the lint

* Support orientation changes, fix sizing

* fix lint

* reduce renders, tix ts

* support iconOnly with collapsing

* fix frickin lint

* fix TS

* remove unused context

* pass along disabled keys

* Some style cleanup

* fix lint

* truly fix lint

* fix lint

* review comments

* more review comments

* Fix restore focus

Author: snowystinger

packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx

@@ -16,6 +16,7 @@ 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,
@@ -30,7 +31,7 @@ export default meta;
 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="FoR"><Edit /><Text>Founding of Rome</Text></Tab>
       <Tab id="MaR">Monarchy and Republic</Tab>
       <Tab id="Emp">Empire</Tab>
     </TabList>
@@ -56,7 +57,7 @@ export const Example = (args: any) => (
 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="FoR"><Edit /><Text>Founding of Rome</Text></Tab>
       <Tab id="MaR">Monarchy and Republic</Tab>
       <Tab id="Emp">Empire</Tab>
     </TabList>
@@ -73,11 +74,11 @@ export const Disabled = (args: any) => (
 );
 
 export const Icons = (args: any) => (
-  <Tabs {...args} styles={style({width: 208, height: 144})}>
+  <Tabs {...args} styles={style({width: 208, height: 144})} iconOnly>
     <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>
+      <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.

packages/@react-spectrum/s2/intl/en-US.json

@@ -20,6 +20,7 @@
   "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",

packages/@react-spectrum/s2/intl/he-IL.json

@@ -21,6 +21,7 @@
   "table.resizeColumn": "שנה את גודל העמודה",
   "table.sortAscending": "מיין בסדר עולה",
   "table.sortDescending": "מיין בסדר יורד",
+  "tabs.selectorLabel": "Tab selector",
   "tag.actions": "פעולות",
   "tag.hideButtonLabel": "הצג פחות",
   "tag.noTags": "ללא",

packages/@react-spectrum/s2/package.json

@@ -131,6 +131,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",