From 18c17d6d82042d115422418a10b678aa1d94f2cf Mon Sep 17 00:00:00 2001
From: Nishan <nishanbende@gmail.com>
Date: Sun, 7 Mar 2021 22:54:48 +0530
Subject: [PATCH 1/7] feat: update tabs existing api

---
 packages/@react-aria/tabs/src/useTabs.ts      |  35 +-
 packages/@react-spectrum/tabs/src/Tabs.tsx    | 227 +++++----
 .../tabs/stories/Tabs.stories.js              | 429 +++++++++---------
 .../@react-stately/tabs/src/useTabsState.ts   |   6 +-
 packages/@react-types/tabs/src/index.d.ts     |  40 +-
 5 files changed, 383 insertions(+), 354 deletions(-)

diff --git a/packages/@react-aria/tabs/src/useTabs.ts b/packages/@react-aria/tabs/src/useTabs.ts
index 2684c889786..b3014cd04dd 100644
--- a/packages/@react-aria/tabs/src/useTabs.ts
+++ b/packages/@react-aria/tabs/src/useTabs.ts
@@ -10,12 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaTabProps, AriaTabsProps} from '@react-types/tabs';
+import {AriaTabProps, AriaTabListProps, AriaTabPanelProps} from '@react-types/tabs';
 import {HTMLAttributes, Key, RefObject, useMemo} from 'react';
 import {mergeProps, useId, useLabels} from '@react-aria/utils';
 import {SingleSelectListState} from '@react-stately/list';
 import {TabsKeyboardDelegate} from './TabsKeyboardDelegate';
-import {TabsState} from '@react-stately/tabs';
+import {TabListState} from '@react-stately/tabs';
 import {useLocale} from '@react-aria/i18n';
 import {usePress} from '@react-aria/interactions';
 import {useSelectableCollection, useSelectableItem} from '@react-aria/selection';
@@ -23,13 +23,11 @@ import {useSelectableCollection, useSelectableItem} from '@react-aria/selection'
 interface TabsAria {
   /** Props for the tablist container. */
   tabListProps: HTMLAttributes<HTMLElement>,
-  /** Props for the associated tabpanel element. */
-  tabPanelProps: HTMLAttributes<HTMLElement>
 }
 
 const tabsIds = new WeakMap<SingleSelectListState<unknown>, string>();
 
-export function useTabs<T>(props: AriaTabsProps<T>, state: TabsState<T>, ref): TabsAria {
+export function useTabList<T>(props: AriaTabListProps<T>, state: TabListState<T>, ref): TabsAria {
   let {
     orientation = 'horizontal',
     keyboardActivation = 'automatic'
@@ -38,7 +36,6 @@ export function useTabs<T>(props: AriaTabsProps<T>, state: TabsState<T>, ref): T
     collection,
     selectionManager: manager,
     disabledKeys,
-    selectedKey
   } = state;
   let {direction} = useLocale();
   let delegate = useMemo(() => new TabsKeyboardDelegate(
@@ -67,12 +64,6 @@ export function useTabs<T>(props: AriaTabsProps<T>, state: TabsState<T>, ref): T
       role: 'tablist',
       'aria-orientation': orientation,
       tabIndex: undefined
-    },
-    tabPanelProps: {
-      id: generateId(state, selectedKey, 'tabpanel'),
-      'aria-labelledby': generateId(state, selectedKey, 'tab'),
-      tabIndex: 0,
-      role: 'tabpanel'
     }
   };
 }
@@ -123,6 +114,26 @@ export function useTab<T>(
   };
 }
 
+interface TabPanelAria {
+  /** Props for the tab panel element. */
+  tabPanelProps: HTMLAttributes<HTMLElement>;
+}
+  
+export function useTabPanel<T>(
+  props: AriaTabPanelProps,
+  state: TabListState<T>
+): TabPanelAria {
+  console.log("mann ", state)
+  return {
+    tabPanelProps: mergeProps(props, {
+      id: generateId(state, state?.selectedKey, 'tabpanel'),
+      'aria-labelledby': generateId(state, state?.selectedKey, 'tab'),
+      tabIndex: 0,
+      role: 'tabpanel',
+    }),
+  };
+}
+
 function generateId<T>(state: SingleSelectListState<T>, key: Key, role: string) {
   if (typeof key === 'string') {
     key = key.replace(/\s+/g, '');
diff --git a/packages/@react-spectrum/tabs/src/Tabs.tsx b/packages/@react-spectrum/tabs/src/Tabs.tsx
index 75f188dbe5e..1ef64527ede 100644
--- a/packages/@react-spectrum/tabs/src/Tabs.tsx
+++ b/packages/@react-spectrum/tabs/src/Tabs.tsx
@@ -15,18 +15,38 @@ import {DOMProps, DOMRef, Node, Orientation} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {Item, Picker} from '@react-spectrum/picker';
 import {mergeProps, useId, useLayoutEffect} from '@react-aria/utils';
-import React, {HTMLAttributes, Key, MutableRefObject, ReactElement, useCallback, useEffect, useRef, useState} from 'react';
-import {SingleSelectListState} from '@react-stately/list';
+import React, {Key, MutableRefObject, ReactElement, useCallback, useEffect, useRef, useState} from 'react';
+import {ListCollection, SingleSelectListState} from '@react-stately/list';
 import {SpectrumPickerProps} from '@react-types/select';
-import {SpectrumTabsProps} from '@react-types/tabs';
+import {SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps} from '@react-types/tabs';
 import styles from '@adobe/spectrum-css-temp/components/tabs/vars.css';
 import {Text} from '@react-spectrum/text';
 import {useHover} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
 import {useProvider, useProviderProps} from '@react-spectrum/provider';
 import {useResizeObserver} from '@react-aria/utils';
-import {useTab, useTabs} from '@react-aria/tabs';
-import {useTabsState} from '@react-stately/tabs';
+import {useTab, useTabList, useTabPanel} from '@react-aria/tabs';
+import {TabListState, useTabListState} from '@react-stately/tabs';
+import {useCollection} from '@react-stately/collections';
+
+interface TabsContext<T> {
+  tabProps: SpectrumTabsProps<T>;
+  tabState: {
+    tabListState: TabListState<T>;
+    setTabListState: (state: TabListState<T>) => void;
+    selectedTab: HTMLElement;
+    collapse: boolean
+  };
+  refs: { 
+    wrapperRef: MutableRefObject<HTMLDivElement>,
+    tablistRef: MutableRefObject<HTMLDivElement>
+  };
+  tabPanelProps: {
+    "aria-labelledby": string
+  }
+}
+
+const TabContext = React.createContext<TabsContext<any>>(null);
 
 function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
@@ -42,24 +62,23 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
   let domRef = useDOMRef(ref);
   let tablistRef = useRef<HTMLDivElement>();
   let wrapperRef = useRef<HTMLDivElement>();
-  let state = useTabsState(props);
 
   let {direction} = useLocale();
   let {styleProps} = useStyleProps(otherProps);
-  let {tabListProps, tabPanelProps} = useTabs(props, state, tablistRef);
   let [collapse, setCollapse] = useValueEffect(false);
   let [selectedTab, setSelectedTab] = useState<HTMLElement>();
+  const [tabListState, setTabListState] = React.useState<TabListState<T>>(null);
 
   useEffect(() => {
     if (tablistRef.current) {
-      let selectedTab: HTMLElement = tablistRef.current.querySelector(`[data-key="${state.selectedKey}"]`);
+      let selectedTab: HTMLElement = tablistRef.current.querySelector(`[data-key="${tabListState?.selectedKey}"]`);
 
       if (selectedTab != null) {
         setSelectedTab(selectedTab);
       }
     }
     // collapse is in the dep array so selectedTab can be updated for TabLine positioning
-  }, [children, state.selectedKey, collapse, tablistRef]);
+  }, [children, tabListState?.selectedKey, collapse, tablistRef]);
 
   let checkShouldCollapse = useCallback(() => {
     let computeShouldCollapse = () => {
@@ -94,48 +113,36 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
 
   useResizeObserver({ref: wrapperRef, onResize: checkShouldCollapse});
 
+  let tabPanelProps = {
+    'aria-labelledby': undefined
+  };
+
   // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.
   let collapsibleTabListId = useId();
   if (collapse && orientation !== 'vertical') {
     tabPanelProps['aria-labelledby'] = collapsibleTabListId;
   }
-
   return (
-    <div
-      {...styleProps}
-      ref={domRef}
-      className={classNames(
-        styles,
-        'spectrum-TabsPanel',
-        `spectrum-TabsPanel--${orientation}`,
-        styleProps.className
-      )}>
-      {orientation === 'vertical' &&
-        <TabList
-          {...tabListProps}
-          ref={tablistRef}
-          orientation={orientation}
-          density={density}
-          isQuiet={isQuiet}
-          isDisabled={isDisabled}
-          state={state}
-          selectedTab={selectedTab} />
-      }
-      {orientation !== 'vertical' &&
-        <CollapsibleTabList
-          {...props}
-          id={collapsibleTabListId}
-          wrapperRef={wrapperRef}
-          collapse={collapse}
-          tabListProps={tabListProps}
-          state={state}
-          selectedTab={selectedTab}
-          ref={tablistRef} />
-      }
-      <div {...tabPanelProps} className={classNames(styles, 'spectrum-TabsPanel-tabpanel')}>
-        {state.selectedItem && state.selectedItem.props.children}
+    <TabContext.Provider 
+      value={{
+        tabProps: {...props, orientation, density}, 
+        tabState: {tabListState, setTabListState, selectedTab, collapse}, 
+        refs: { tablistRef, wrapperRef },
+        tabPanelProps,
+      }}
+      >
+      <div
+        {...styleProps}
+        ref={domRef}
+        className={classNames(
+          styles,
+          'spectrum-TabsPanel',
+          `spectrum-TabsPanel--${orientation}`,
+          styleProps.className
+        )}>
+        {props.children}
       </div>
-    </div>
+    </TabContext.Provider>
   );
 }
 
@@ -238,77 +245,24 @@ function TabLine(props: TabLineProps) {
   return <div className={classNames(styles, 'spectrum-Tabs-selectionIndicator')} role="presentation" style={style} />;
 }
 
-interface CollapsibleTabListProps<T> extends TabListProps<T>, TabPickerProps<T> {
-  tabListProps?: HTMLAttributes<HTMLElement>,
-  wrapperRef: MutableRefObject<HTMLDivElement>,
-  collapse?: boolean,
-  tabListclassName?: string
-}
-
-const CollapsibleTabList = React.forwardRef(function <T> (props: CollapsibleTabListProps<T>, ref: MutableRefObject<HTMLDivElement>) {
-  let {
-    tabListProps,
-    density,
-    isQuiet,
-    isDisabled,
-    state,
-    selectedTab,
-    wrapperRef,
-    collapse
-  } = props;
-
-  let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');
-
-  return (
-    <div
-      ref={wrapperRef}
-      className={classNames(
-        styles,
-        'spectrum-TabsPanel-collapseWrapper'
-      )}>
-      {collapse && <TabPicker {...props} className={tabListclassName} />}
-      {!collapse && (
-        <TabList
-          {...tabListProps}
-          density={density}
-          isQuiet={isQuiet}
-          isDisabled={isDisabled}
-          state={state}
-          selectedTab={selectedTab}
-          ref={ref}
-          orientation="horizontal"
-          className={tabListclassName} />
-      )}
-    </div>
-  );
-});
-
-interface TabListProps<T> {
-  isQuiet?: boolean,
-  density?: 'compact' | 'regular',
-  isDisabled?: boolean,
-  orientation?: Orientation,
-  state: SingleSelectListState<T>,
-  selectedTab: HTMLElement,
-  className?: string
-}
-
-const TabList = React.forwardRef(function <T> (props: TabListProps<T>, ref: MutableRefObject<HTMLDivElement>) {
-  let {
-    isQuiet,
-    density,
-    state,
-    isDisabled,
-    orientation,
-    selectedTab,
-    className,
-    ...otherProps
-  } = props;
+export const TabList = function <T> (props: SpectrumTabListProps<T>) {
+  const tabContext = React.useContext(TabContext);
+  const {refs, tabState, tabProps, tabPanelProps} = tabContext;
+  const {isQuiet, density, isDisabled, orientation} = tabProps;
+  const {selectedTab, collapse, setTabListState} = tabState;
+  const {tablistRef, wrapperRef} = refs;
+  const state = useTabListState({...tabProps, children: props.children});
+  const {tabListProps} = useTabList({...tabProps, ...props}, state, tablistRef);
+  
+  useEffect(() => {
+    // Passing back to root as useTabPanel needs the TabListState
+    setTabListState(state);
+  },[state.disabledKeys, state.selectedItem, state.selectedKey, props.children])
 
-  return (
+  const tabContent = (
     <div
-      {...otherProps}
-      ref={ref}
+      {...tabListProps}
+      ref={tablistRef}
       className={classNames(
         styles,
         'spectrum-Tabs',
@@ -316,16 +270,53 @@ const TabList = React.forwardRef(function <T> (props: TabListProps<T>, ref: Muta
         {
           'spectrum-Tabs--quiet': isQuiet,
           ['spectrum-Tabs--compact']: density === 'compact'
-        },
-        className
-      )}>
+        })}
+      >
       {[...state.collection].map((item) => (
-        <Tab key={item.key} item={item} state={state} isDisabled={isDisabled} orientation={orientation} />
+          <Tab key={item.key} item={item} state={state} isDisabled={isDisabled} orientation={orientation} />
       ))}
       <TabLine orientation={orientation} selectedTab={selectedTab} />
     </div>
+  )
+
+
+  if (orientation === 'vertical') {
+    return tabContent;
+  } else {
+      let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');
+      return (
+        <div
+          ref={wrapperRef}
+          className={classNames(
+            styles,
+            'spectrum-TabsPanel-collapseWrapper'
+          )}>
+          {collapse ? <TabPicker {...props} {...tabProps} id={tabPanelProps['aria-labelledby']} state={state} className={tabListclassName} /> : tabContent}
+        </div>
+      );
+  }
+};
+
+
+export const TabPanels = function <T> (props: SpectrumTabPanelsProps<T>) {
+  const {tabState, tabProps, tabPanelProps: ctxTabPanelProps} = React.useContext(TabContext);
+  const {tabListState} = tabState;
+  const {tabPanelProps} = useTabPanel(props, tabListState);
+  
+  if(ctxTabPanelProps['aria-labelledby']){
+    tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby']
+  }
+
+  const factory = nodes => new ListCollection(nodes)
+  const collection = useCollection({items: tabProps.items, ...props}, factory);
+  const selectedItem = tabListState ? collection.getItem(tabListState.selectedKey) : null;
+
+  return (
+    <div {...tabPanelProps} className={classNames(styles, 'spectrum-TabsPanel-tabpanel')}>
+      {selectedItem && selectedItem.props.children}
+    </div> 
   );
-});
+};
 
 interface TabPickerProps<T> extends SpectrumPickerProps<T> {
   density?: 'compact' | 'regular',
diff --git a/packages/@react-spectrum/tabs/stories/Tabs.stories.js b/packages/@react-spectrum/tabs/stories/Tabs.stories.js
index 87a3ba006c4..bbf8abf5f4d 100644
--- a/packages/@react-spectrum/tabs/stories/Tabs.stories.js
+++ b/packages/@react-spectrum/tabs/stories/Tabs.stories.js
@@ -17,7 +17,7 @@ import {ButtonGroup} from '@react-spectrum/buttongroup';
 import Calendar from '@spectrum-icons/workflow/Calendar';
 import {Content, Flex, Heading, Text} from '@adobe/react-spectrum';
 import Dashboard from '@spectrum-icons/workflow/Dashboard';
-import {Item, Tabs} from '..';
+import {Item, Tabs, TabList, TabPanels} from '..';
 import React from 'react';
 import {storiesOf} from '@storybook/react';
 
@@ -118,16 +118,22 @@ storiesOf('Tabs', module)
     () => (
       <Flex minHeight={400} minWidth={400} UNSAFE_style={{borderWidth: 1, borderStyle: 'solid', borderColor: 'var(--spectrum-global-color-gray-800)', padding: '10px'}}>
         <Tabs>
-          <Item title="Tab 1">
-            <Content>
-              <Text>Hello World</Text>
-            </Content>
-          </Item>
-          <Item title="Tab 2">
-            <Content>
-              <Text>Goodbye World</Text>
-            </Content>
-          </Item>
+          <TabList>
+            <Item title="Tab 1" />
+            <Item title="Tab 2" />
+          </TabList>
+          <TabPanels>
+            <Item title="Tab 1">
+              <Content>
+                <Text>Hello World</Text>
+              </Content>
+            </Item>
+            <Item title="Tab 2">
+              <Content>
+                <Text>Goodbye World</Text>
+              </Content>
+            </Item>
+          </TabPanels>
         </Tabs>
       </Flex>
     )
@@ -155,56 +161,70 @@ storiesOf('Tabs', module)
 function render(props = {}) {
   return (
     <Tabs {...props} aria-label="Tab example" maxWidth={500} onSelectionChange={action('onSelectionChange')}>
+      <TabList>
+        <Item title="Tab 1" key="val1">
+        </Item>
+        <Item title="Tab 2" key="val2">
+        </Item>
+        <Item title="Tab 3" key="val3">
+        </Item>
+        <Item title="Tab 4" key="val4">
+        </Item>
+        <Item title="Tab 5" key="val5">
+        </Item>
+      </TabList>
+      <TabPanels>
       <Item title="Tab 1" key="val1">
-        <Content margin="size-160">
-          <Heading>Tab Body 1</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item title="Tab 2" key="val2">
-        <Content margin="size-160">
-          <Heading>Tab Body 2</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item title="Tab 3" key="val3">
-        <Content margin="size-160">
-          <Heading>Tab Body 3</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item title="Tab 4" key="val4">
-        <Content margin="size-160">
-          <Heading>Tab Body 4</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item title="Tab 5" key="val5">
-        <Content margin="size-160">
-          <Heading>Tab Body 5</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
+          <Content margin="size-160">
+            <Heading>Tab Body 1</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item title="Tab 2" key="val2">
+          <Content margin="size-160">
+            <Heading>Tab Body 2</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item title="Tab 3" key="val3">
+          <Content margin="size-160">
+            <Heading>Tab Body 3</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item title="Tab 4" key="val4">
+          <Content margin="size-160">
+            <Heading>Tab Body 4</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item title="Tab 5" key="val5">
+          <Content margin="size-160">
+            <Heading>Tab Body 5</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+      </TabPanels>
     </Tabs>
   );
 }
@@ -212,60 +232,52 @@ function render(props = {}) {
 function renderWithIcons(props = {}) {
   return (
     <Tabs {...props} aria-label="Tab example" maxWidth={500} onSelectionChange={action('onSelectionChange')}>
-      <Item
-        key="dashboard"
-        textValue="Dashboard"
-        title={
-          <>
-            <Dashboard />
-            <Text>Dashboard</Text>
-          </>
-        }>
-        <Content margin="size-160">
-          <Heading>Dashboard</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item
-        key="calendar"
-        textValue="Calendar"
-        title={
-          <>
-            <Calendar />
-            <Text>Calendar</Text>
-          </>
-        }>
-        <Content margin="size-160">
-          <Heading>Calendar</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item
-        key="bookmark"
-        textValue="Bookmark"
-        title={
-          <>
-            <Bookmark />
-            <Text>Bookmark</Text>
-          </>
-        }>
-        <Content margin="size-160">
-          <Heading>Bookmark</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
+      <TabList>
+        <Item key="dashboard" textValue="Dashboard">
+          <Dashboard />
+          <Text>Dashboard</Text>
+        </Item>
+        <Item key="calendar" textValue="Calendar">
+          <Calendar />
+          <Text>Calendar</Text>
+        </Item>
+        <Item key="bookmark" textValue="Bookmark">
+          <Bookmark />
+          <Text>Bookmark</Text>
+        </Item>
+      </TabList>
+      <TabPanels>
+        <Item key="dashboard">
+          <Content margin="size-160">
+            <Heading>Dashboard</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item key="calendar" textValue="Calendar">
+          <Content margin="size-160">
+            <Heading>Calendar</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item key="bookmark">
+          <Content margin="size-160">
+            <Heading>Bookmark</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+      </TabPanels>
     </Tabs>
   );
 }
@@ -273,56 +285,65 @@ function renderWithIcons(props = {}) {
 function renderWithFalsyKey(props = {}) {
   return (
     <Tabs {...props} aria-label="Tab example" maxWidth={500} onSelectionChange={action('onSelectionChange')}>
-      <Item title="Tab 1" key="">
-        <Content margin="size-160">
-          <Heading>Tab Body 1</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item title="Tab 2" key="val2">
-        <Content margin="size-160">
-          <Heading>Tab Body 2</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item title="Tab 3" key="val3">
-        <Content margin="size-160">
-          <Heading>Tab Body 3</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item title="Tab 4" key="val4">
-        <Content margin="size-160">
-          <Heading>Tab Body 4</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item title="Tab 5" key="val5">
-        <Content margin="size-160">
-          <Heading>Tab Body 5</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
+      <TabList>
+        <Item title="Tab 1" key="" />
+        <Item title="Tab 2" key="val2" />
+        <Item title="Tab 3" key="val3" />
+        <Item title="Tab 4" key="val4" />
+        <Item title="Tab 5" key="val5" />
+      </TabList>
+      <TabPanels>
+        <Item title="Tab 1" key="">
+          <Content margin="size-160">
+            <Heading>Tab Body 1</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item title="Tab 2" key="val2">
+          <Content margin="size-160">
+            <Heading>Tab Body 2</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item title="Tab 3" key="val3">
+          <Content margin="size-160">
+            <Heading>Tab Body 3</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item title="Tab 4" key="val4">
+          <Content margin="size-160">
+            <Heading>Tab Body 4</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item title="Tab 5" key="val5">
+          <Content margin="size-160">
+            <Heading>Tab Body 5</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+      </TabPanels>
     </Tabs>
   );
 }
@@ -358,26 +379,28 @@ let DynamicTabs = (props = {}) => {
   return (
     <div style={{width: '80%'}}>
       <Tabs {...props} aria-label="Tab example" items={tabs} onSelectionChange={action('onSelectionChange')}>
-        {item => (
-          <Item
-            key={item.name}
-            textValue={item.name}
-            title={
-              <>
+        <TabList>
+          {item => (
+            <Item key={item.name} textValue={item.name}>
                 {item.icon}
                 <Text>{item.name}</Text>
-              </>
-            }>
-            <Content margin="size-160">
-              <Heading>{item.children}</Heading>
-              <Text>
-                Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-                Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-                Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-              </Text>
-            </Content>
-          </Item>
-        )}
+            </Item>
+          )}
+        </TabList>
+        <TabPanels>
+          {item => (
+            <Item key={item.name}>
+              <Content margin="size-160">
+                <Heading>{item.children}</Heading>
+                <Text>
+                  Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+                  Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+                  Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+                </Text>
+              </Content>
+            </Item>
+          )}
+        </TabPanels>
       </Tabs>
       <ButtonGroup marginEnd="30px">
         <Button variant="secondary" onPress={() => addTab()}>
@@ -397,26 +420,28 @@ let OrientationFlip = (props = {}) => {
   return (
     <div style={{width: '80%'}}>
       <Tabs {...props} aria-label="Tab example" items={items} onSelectionChange={action('onSelectionChange')} orientation={flipOrientation ? 'horizontal' : 'vertical'}>
-        {item => (
-          <Item
-            key={item.name}
-            textValue={item.name}
-            title={
-              <>
-                {item.icon}
-                <Text>{item.name}</Text>
-              </>
-            }>
-            <Content margin="size-160">
-              <Heading>{item.children}</Heading>
-              <Text>
-                Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-                Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-                Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-              </Text>
-            </Content>
-          </Item>
-        )}
+        <TabList>
+          {item => (
+            <Item key={item.name} textValue={item.name}>
+              {item.icon}
+              <Text>{item.name}</Text>
+            </Item>
+          )}
+        </TabList>
+        <TabPanels>
+          {item => (
+            <Item key={item.name}>
+              <Content margin="size-160">
+                <Heading>{item.children}</Heading>
+                <Text>
+                  Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+                  Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+                  Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+                </Text>
+              </Content>
+            </Item>
+          )}
+        </TabPanels>
       </Tabs>
       <Button variant="secondary" onPress={() => setFlipOrientation((state) => !state)}>
         <Text>Flip Orientation</Text>
diff --git a/packages/@react-stately/tabs/src/useTabsState.ts b/packages/@react-stately/tabs/src/useTabsState.ts
index 76aa68a9aa3..96b50ebfc05 100644
--- a/packages/@react-stately/tabs/src/useTabsState.ts
+++ b/packages/@react-stately/tabs/src/useTabsState.ts
@@ -11,12 +11,12 @@
  */
 
 import {SingleSelectListState, useSingleSelectListState} from '@react-stately/list';
-import {TabsProps} from '@react-types/tabs';
+import {TabListProps} from '@react-types/tabs';
 import {useEffect} from 'react';
 
-export interface TabsState<T> extends SingleSelectListState<T> {}
+export interface TabListState<T> extends SingleSelectListState<T> {}
 
-export function useTabsState<T extends object>(props: TabsProps<T>): TabsState<T> {
+export function useTabListState<T extends object>(props: TabListProps<T>): TabListState<T> {
   let state = useSingleSelectListState<T>(props);
 
   useEffect(() => {
diff --git a/packages/@react-types/tabs/src/index.d.ts b/packages/@react-types/tabs/src/index.d.ts
index 0b98768684a..b652afdd837 100644
--- a/packages/@react-types/tabs/src/index.d.ts
+++ b/packages/@react-types/tabs/src/index.d.ts
@@ -13,6 +13,7 @@
 import {
   AriaLabelingProps,
   CollectionBase,
+  CollectionChildren,
   DOMProps,
   Node,
   Orientation,
@@ -28,9 +29,9 @@ export interface AriaTabProps<T> {
   isDisabled?: boolean
 }
 
-export interface TabsProps<T> extends CollectionBase<T>, SingleSelection {}
+export interface TabListProps<T> extends CollectionBase<T>, SingleSelection {}
 
-export interface AriaTabsProps<T> extends TabsProps<T>, DOMProps, AriaLabelingProps {
+export interface AriaTabListProps<T> extends TabListProps<T>, DOMProps, AriaLabelingProps {
   /**
    * Whether tabs are activated automatically on focus or manually.
    * @default 'automatic'
@@ -48,22 +49,23 @@ export interface AriaTabsProps<T> extends TabsProps<T>, DOMProps, AriaLabelingPr
   isDisabled?: boolean
 }
 
-export interface SpectrumTabsProps<T> extends AriaTabsProps<T>, StyleProps {
-  /** Whether the Tabs should be displayed with a quiet style. */
-  isQuiet?: boolean,
-  /**
-   * Sets the amount of space between the Tab and the Tab rail.
-   * @default 'regular'
-   */
-  density?: 'compact' | 'regular',
-  // overflowMode?: 'dropdown' | 'scrolling',
-  // isEmphasized?: boolean,
-  /** Whether Tabs are disabled. */
+export interface AriaTabPanelProps extends DOMProps, AriaLabelingProps {}
+
+interface SpectrumTabsProps<T> extends SingleSelection, DOMProps, StyleProps {
+  items?: Iterable<T>,
+  keyboardActivation?: 'automatic' | 'manual',
+  orientation?: Orientation,
   isDisabled?: boolean,
-  /** Handler that is called when the tab selection changes. */
-  onSelectionChange?: (selectedItem: Key) => void,
-  /** The currently selected Tab key in the collection (controlled). */
-  selectedKey?: Key,
-  /** The initial selected Tab key in the collection (uncontrolled). */
-  defaultSelectedKey?: Key
+  disabledKeys?: Iterable<Key>,
+  isQuiet?: boolean,
+  density?: 'compact' | 'regular'
+  children: any
 }
+
+export interface SpectrumTabListProps<T> extends DOMProps, StyleProps {
+  children: CollectionChildren<T>
+}
+
+export interface SpectrumTabPanelsProps<T> extends DOMProps, StyleProps {
+  children: CollectionChildren<T>
+}
\ No newline at end of file

From e157c33fa7d0f25beb6bc84c06cf8f1119c50132 Mon Sep 17 00:00:00 2001
From: Nishan <nishanbende@gmail.com>
Date: Sun, 7 Mar 2021 23:52:14 +0530
Subject: [PATCH 2/7] feat: fix test cases tabs api change

---
 packages/@react-aria/tabs/src/useTabs.ts      |   1 -
 .../@react-spectrum/tabs/test/Tabs.test.js    | 123 ++++++++++++------
 2 files changed, 86 insertions(+), 38 deletions(-)

diff --git a/packages/@react-aria/tabs/src/useTabs.ts b/packages/@react-aria/tabs/src/useTabs.ts
index b3014cd04dd..e89385e9bf7 100644
--- a/packages/@react-aria/tabs/src/useTabs.ts
+++ b/packages/@react-aria/tabs/src/useTabs.ts
@@ -123,7 +123,6 @@ export function useTabPanel<T>(
   props: AriaTabPanelProps,
   state: TabListState<T>
 ): TabPanelAria {
-  console.log("mann ", state)
   return {
     tabPanelProps: mergeProps(props, {
       id: generateId(state, state?.selectedKey, 'tabpanel'),
diff --git a/packages/@react-spectrum/tabs/test/Tabs.test.js b/packages/@react-spectrum/tabs/test/Tabs.test.js
index 1819ff52442..e971a11f19a 100644
--- a/packages/@react-spectrum/tabs/test/Tabs.test.js
+++ b/packages/@react-spectrum/tabs/test/Tabs.test.js
@@ -11,7 +11,7 @@
  */
 
 import {act, fireEvent, render, within} from '@testing-library/react';
-import {Item, Tabs} from '../src';
+import {Item, Tabs, TabList, TabPanels} from '../src';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {theme} from '@react-spectrum/theme-default';
@@ -28,11 +28,18 @@ function renderComponent(props) {
   return render(
     <Provider theme={theme}>
       <Tabs {...props} items={items}>
-        {item => (
-          <Item key={item.name} title={item.name}>
-            {item.children}
-          </Item>
-        )}
+        <TabList>
+          {item => (
+            <Item key={item.name} title={item.name || item.children} />
+          )}
+        </TabList>
+        <TabPanels>
+          {item => (
+            <Item key={item.name} title={item.name}>
+              {item.children}
+            </Item>
+          )}
+        </TabPanels>
       </Tabs>
     </Provider>
   );
@@ -217,18 +224,32 @@ describe('Tabs', function () {
     let tree = render(
       <Provider theme={theme}>
         <Tabs>
-          {items.map(item => (
-            <Item key={item.name} title={item.name}>
-              {item.children}
-            </Item>
-          ))}
+          <TabList>
+            {items.map(item => (
+              <Item key={item.name} title={item.name || item.children} />
+            ))}
+          </TabList>
+          <TabPanels>
+            {items.map(item => (
+              <Item key={item.name}>
+                {item.children}
+              </Item>
+            ))}
+          </TabPanels>
         </Tabs>
         <Tabs>
-          {items.map(item => (
-            <Item key={item.name} title={item.name}>
-              {item.children}
-            </Item>
-          ))}
+          <TabList>
+            {items.map(item => (
+              <Item key={item.name} title={item.name || item.children} />
+            ))}
+          </TabList>
+          <TabPanels>
+            {items.map(item => (
+              <Item key={item.name}>
+                {item.children}
+              </Item>
+            ))}
+          </TabPanels>
         </Tabs>
       </Provider>
     );
@@ -369,11 +390,18 @@ describe('Tabs', function () {
     let {getByRole, rerender} = render(
       <Provider theme={theme}>
         <Tabs aria-label="Test Tabs" items={items}>
-          {item => (
-            <Item key={item.name} title={item.name}>
-              {item.children}
-            </Item>
-          )}
+          <TabList>
+            {item => (
+              <Item key={item.name} title={item.name || item.children} />
+            )}
+          </TabList>
+          <TabPanels>
+            {item => (
+              <Item key={item.name}>
+                {item.children}
+              </Item>
+            )}
+          </TabPanels>
         </Tabs>
       </Provider>
     );
@@ -400,11 +428,18 @@ describe('Tabs', function () {
     rerender(
       <Provider theme={theme}>
         <Tabs aria-label="Test Tabs" items={newItems}>
-          {item => (
-            <Item key={item.name} title={item.name}>
-              {item.children}
-            </Item>
-          )}
+          <TabList>
+            {item => (
+              <Item key={item.name} title={item.name || item.children} />
+            )}
+          </TabList>
+          <TabPanels>
+            {item => (
+              <Item key={item.name}>
+                {item.children}
+              </Item>
+            )}
+          </TabPanels>
         </Tabs>
       </Provider>
     );
@@ -420,12 +455,19 @@ describe('Tabs', function () {
 
     rerender(
       <Provider theme={theme}>
-        <Tabs aria-label="Test Tabs" items={newItems} orientation="vertical">
-          {item => (
-            <Item key={item.name} title={item.name}>
-              {item.children}
-            </Item>
-          )}
+         <Tabs items={newItems} orientation="vertical">
+          <TabList>
+            {item => (
+              <Item key={item.name} title={item.name || item.children} />
+            )}
+          </TabList>
+          <TabPanels>
+            {item => (
+              <Item key={item.name}>
+                {item.children}
+              </Item>
+            )}
+          </TabPanels>
         </Tabs>
       </Provider>
     );
@@ -458,11 +500,18 @@ describe('Tabs', function () {
     rerender(
       <Provider theme={theme}>
         <Tabs aria-label="Test Tabs" items={newItems}>
-          {item => (
-            <Item key={item.name} title={item.name}>
-              {item.children}
-            </Item>
-          )}
+          <TabList>
+            {item => (
+              <Item key={item.name} title={item.name} />
+            )}
+          </TabList>
+          <TabPanels>
+            {item => (
+              <Item key={item.name}>
+                {item.children}
+              </Item>
+            )}
+          </TabPanels>
         </Tabs>
       </Provider>
     );

From b91a4e600de805146f0fea30c416eaf0b216e65f Mon Sep 17 00:00:00 2001
From: Nishan <nishanbende@gmail.com>
Date: Fri, 12 Mar 2021 21:29:32 +0530
Subject: [PATCH 3/7] fix: lint and naming issues

---
 packages/@react-aria/tabs/src/index.ts        |   4 +-
 packages/@react-aria/tabs/src/useTab.ts       |  65 ++++++++
 packages/@react-aria/tabs/src/useTabList.ts   |  66 ++++++++
 packages/@react-aria/tabs/src/useTabPanel.ts  |  33 ++++
 packages/@react-aria/tabs/src/useTabs.ts      | 143 ------------------
 packages/@react-aria/tabs/src/utils.ts        |  26 ++++
 packages/@react-spectrum/tabs/src/Tabs.tsx    |  64 ++++----
 .../tabs/stories/Tabs.stories.js              |  23 ++-
 .../@react-spectrum/tabs/test/Tabs.test.js    |   4 +-
 packages/@react-types/tabs/src/index.d.ts     |   4 +-
 10 files changed, 237 insertions(+), 195 deletions(-)
 create mode 100644 packages/@react-aria/tabs/src/useTab.ts
 create mode 100644 packages/@react-aria/tabs/src/useTabList.ts
 create mode 100644 packages/@react-aria/tabs/src/useTabPanel.ts
 delete mode 100644 packages/@react-aria/tabs/src/useTabs.ts
 create mode 100644 packages/@react-aria/tabs/src/utils.ts

diff --git a/packages/@react-aria/tabs/src/index.ts b/packages/@react-aria/tabs/src/index.ts
index 903442d05fa..6908022969f 100644
--- a/packages/@react-aria/tabs/src/index.ts
+++ b/packages/@react-aria/tabs/src/index.ts
@@ -10,4 +10,6 @@
  * governing permissions and limitations under the License.
  */
 
-export * from './useTabs';
+export * from './useTab';
+export * from './useTabPanel';
+export * from './useTabList';
diff --git a/packages/@react-aria/tabs/src/useTab.ts b/packages/@react-aria/tabs/src/useTab.ts
new file mode 100644
index 00000000000..e764acb48df
--- /dev/null
+++ b/packages/@react-aria/tabs/src/useTab.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2020 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 {AriaTabProps} from '@react-types/tabs';
+import {generateId} from './utils';
+import {HTMLAttributes, RefObject} from 'react';
+import {SingleSelectListState} from '@react-stately/list';
+import {usePress} from '@react-aria/interactions';
+import {useSelectableItem} from '@react-aria/selection';
+
+interface TabAria {
+    /** Props for the tab element. */
+    tabProps: HTMLAttributes<HTMLElement>
+  }
+  
+export function useTab<T>(
+    props: AriaTabProps<T>,
+    state: SingleSelectListState<T>,
+    ref: RefObject<HTMLElement>
+): TabAria {
+  let {item, isDisabled: propsDisabled} = props;
+  let {key} = item;
+  let {selectionManager: manager, selectedKey} = state;
+
+  let isSelected = key === selectedKey;
+
+  let {itemProps} = useSelectableItem({
+    selectionManager: manager,
+    key,
+    ref
+  });
+  let isDisabled = propsDisabled || state.disabledKeys.has(key);
+
+  let {pressProps} = usePress({...itemProps, isDisabled});
+  let tabId = generateId(state, key, 'tab');
+  let tabPanelId = generateId(state, key, 'tabpanel');
+  let {tabIndex} = pressProps;
+
+    // selected tab should have tabIndex=0, when it initializes
+  if (isSelected && !isDisabled) {
+    tabIndex = 0;
+  }
+
+  return {
+    tabProps: {
+      ...pressProps,
+      id: tabId,
+      'aria-selected': isSelected,
+      'aria-disabled': isDisabled || undefined,
+      'aria-controls': isSelected ? tabPanelId : undefined,
+      tabIndex: isDisabled ? undefined : tabIndex,
+      role: 'tab'
+    }
+  };
+}
+  
diff --git a/packages/@react-aria/tabs/src/useTabList.ts b/packages/@react-aria/tabs/src/useTabList.ts
new file mode 100644
index 00000000000..e1c7fe67c6b
--- /dev/null
+++ b/packages/@react-aria/tabs/src/useTabList.ts
@@ -0,0 +1,66 @@
+/*
+* Copyright 2020 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 {AriaTabListProps} from '@react-types/tabs';
+import {HTMLAttributes, useMemo} from 'react';
+import {mergeProps, useId, useLabels} from '@react-aria/utils';
+import {TabListState} from '@react-stately/tabs';
+import {tabsIds} from './utils';
+import {TabsKeyboardDelegate} from './TabsKeyboardDelegate';
+import {useLocale} from '@react-aria/i18n';
+import {useSelectableCollection} from '@react-aria/selection';
+
+interface TabListAria {
+    /** Props for the tablist container. */
+    tabListProps: HTMLAttributes<HTMLElement>
+  }
+  
+export function useTabList<T>(props: AriaTabListProps<T>, state: TabListState<T>, ref): TabListAria {
+  let {
+      orientation = 'horizontal',
+      keyboardActivation = 'automatic'
+    } = props;
+  let {
+      collection,
+      selectionManager: manager,
+      disabledKeys
+    } = state;
+  let {direction} = useLocale();
+  let delegate = useMemo(() => new TabsKeyboardDelegate(
+      collection,
+      direction,
+      orientation,
+      disabledKeys), [collection, disabledKeys, orientation, direction]);
+  
+  let {collectionProps} = useSelectableCollection({
+    ref,
+    selectionManager: manager,
+    keyboardDelegate: delegate,
+    selectOnFocus: keyboardActivation === 'automatic',
+    disallowEmptySelection: true
+  });
+  
+    // Compute base id for all tabs
+  let tabsId = useId();
+  tabsIds.set(state, tabsId);
+  
+  let tabListLabelProps = useLabels({...props, id: tabsId});
+  
+  return {
+    tabListProps: {
+      ...mergeProps(collectionProps, tabListLabelProps),
+      role: 'tablist',
+      'aria-orientation': orientation,
+      tabIndex: undefined
+    }
+  };
+}
diff --git a/packages/@react-aria/tabs/src/useTabPanel.ts b/packages/@react-aria/tabs/src/useTabPanel.ts
new file mode 100644
index 00000000000..3d903fc7505
--- /dev/null
+++ b/packages/@react-aria/tabs/src/useTabPanel.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2020 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 {AriaTabPanelProps} from '@react-types/tabs';
+import {generateId} from './utils';
+import {HTMLAttributes} from 'react';
+import {mergeProps} from '@react-aria/utils';
+import {TabListState} from '@react-stately/tabs';
+
+interface TabPanelAria {
+    /** Props for the tab panel element. */
+    tabPanelProps: HTMLAttributes<HTMLElement>
+}
+    
+export function useTabPanel<T>(props: AriaTabPanelProps, state: TabListState<T>): TabPanelAria {
+  return {
+    tabPanelProps: mergeProps(props, {
+      id: generateId(state, state?.selectedKey, 'tabpanel'),
+      'aria-labelledby': generateId(state, state?.selectedKey, 'tab'),
+      tabIndex: 0,
+      role: 'tabpanel'
+    })
+  };
+}
diff --git a/packages/@react-aria/tabs/src/useTabs.ts b/packages/@react-aria/tabs/src/useTabs.ts
deleted file mode 100644
index e89385e9bf7..00000000000
--- a/packages/@react-aria/tabs/src/useTabs.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-/*
- * Copyright 2020 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 {AriaTabProps, AriaTabListProps, AriaTabPanelProps} from '@react-types/tabs';
-import {HTMLAttributes, Key, RefObject, useMemo} from 'react';
-import {mergeProps, useId, useLabels} from '@react-aria/utils';
-import {SingleSelectListState} from '@react-stately/list';
-import {TabsKeyboardDelegate} from './TabsKeyboardDelegate';
-import {TabListState} from '@react-stately/tabs';
-import {useLocale} from '@react-aria/i18n';
-import {usePress} from '@react-aria/interactions';
-import {useSelectableCollection, useSelectableItem} from '@react-aria/selection';
-
-interface TabsAria {
-  /** Props for the tablist container. */
-  tabListProps: HTMLAttributes<HTMLElement>,
-}
-
-const tabsIds = new WeakMap<SingleSelectListState<unknown>, string>();
-
-export function useTabList<T>(props: AriaTabListProps<T>, state: TabListState<T>, ref): TabsAria {
-  let {
-    orientation = 'horizontal',
-    keyboardActivation = 'automatic'
-  } = props;
-  let {
-    collection,
-    selectionManager: manager,
-    disabledKeys,
-  } = state;
-  let {direction} = useLocale();
-  let delegate = useMemo(() => new TabsKeyboardDelegate(
-    collection,
-    direction,
-    orientation,
-    disabledKeys), [collection, disabledKeys, orientation, direction]);
-
-  let {collectionProps} = useSelectableCollection({
-    ref,
-    selectionManager: manager,
-    keyboardDelegate: delegate,
-    selectOnFocus: keyboardActivation === 'automatic',
-    disallowEmptySelection: true
-  });
-
-  // Compute base id for all tabs
-  let tabsId = useId();
-  tabsIds.set(state, tabsId);
-
-  let tabListLabelProps = useLabels({...props, id: tabsId});
-
-  return {
-    tabListProps: {
-      ...mergeProps(collectionProps, tabListLabelProps),
-      role: 'tablist',
-      'aria-orientation': orientation,
-      tabIndex: undefined
-    }
-  };
-}
-
-interface TabAria {
-  /** Props for the tab element. */
-  tabProps: HTMLAttributes<HTMLElement>
-}
-
-export function useTab<T>(
-  props: AriaTabProps<T>,
-  state: SingleSelectListState<T>,
-  ref: RefObject<HTMLElement>
-): TabAria {
-  let {item, isDisabled: propsDisabled} = props;
-  let {key} = item;
-  let {selectionManager: manager, selectedKey} = state;
-
-  let isSelected = key === selectedKey;
-
-  let {itemProps} = useSelectableItem({
-    selectionManager: manager,
-    key,
-    ref
-  });
-  let isDisabled = propsDisabled || state.disabledKeys.has(key);
-
-  let {pressProps} = usePress({...itemProps, isDisabled});
-  let tabId = generateId(state, key, 'tab');
-  let tabPanelId = generateId(state, key, 'tabpanel');
-  let {tabIndex} = pressProps;
-
-  // selected tab should have tabIndex=0, when it initializes
-  if (isSelected && !isDisabled) {
-    tabIndex = 0;
-  }
-
-  return {
-    tabProps: {
-      ...pressProps,
-      id: tabId,
-      'aria-selected': isSelected,
-      'aria-disabled': isDisabled || undefined,
-      'aria-controls': isSelected ? tabPanelId : undefined,
-      tabIndex: isDisabled ? undefined : tabIndex,
-      role: 'tab'
-    }
-  };
-}
-
-interface TabPanelAria {
-  /** Props for the tab panel element. */
-  tabPanelProps: HTMLAttributes<HTMLElement>;
-}
-  
-export function useTabPanel<T>(
-  props: AriaTabPanelProps,
-  state: TabListState<T>
-): TabPanelAria {
-  return {
-    tabPanelProps: mergeProps(props, {
-      id: generateId(state, state?.selectedKey, 'tabpanel'),
-      'aria-labelledby': generateId(state, state?.selectedKey, 'tab'),
-      tabIndex: 0,
-      role: 'tabpanel',
-    }),
-  };
-}
-
-function generateId<T>(state: SingleSelectListState<T>, key: Key, role: string) {
-  if (typeof key === 'string') {
-    key = key.replace(/\s+/g, '');
-  }
-
-  let baseId = tabsIds.get(state);
-  return `${baseId}-${role}-${key}`;
-}
diff --git a/packages/@react-aria/tabs/src/utils.ts b/packages/@react-aria/tabs/src/utils.ts
new file mode 100644
index 00000000000..3c125a0d303
--- /dev/null
+++ b/packages/@react-aria/tabs/src/utils.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2020 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 {Key} from 'react';
+import {SingleSelectListState} from '@react-stately/list';
+
+export const tabsIds = new WeakMap<SingleSelectListState<unknown>, string>();
+
+export function generateId<T>(state: SingleSelectListState<T>, key: Key, role: string) {
+  if (typeof key === 'string') {
+    key = key.replace(/\s+/g, '');
+  }
+  
+  let baseId = tabsIds.get(state);
+  return `${baseId}-${role}-${key}`;
+}
+  
diff --git a/packages/@react-spectrum/tabs/src/Tabs.tsx b/packages/@react-spectrum/tabs/src/Tabs.tsx
index 1ef64527ede..3f6246110ed 100644
--- a/packages/@react-spectrum/tabs/src/Tabs.tsx
+++ b/packages/@react-spectrum/tabs/src/Tabs.tsx
@@ -14,35 +14,35 @@ import {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps, useVal
 import {DOMProps, DOMRef, Node, Orientation} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {Item, Picker} from '@react-spectrum/picker';
+import {ListCollection, SingleSelectListState} from '@react-stately/list';
 import {mergeProps, useId, useLayoutEffect} from '@react-aria/utils';
 import React, {Key, MutableRefObject, ReactElement, useCallback, useEffect, useRef, useState} from 'react';
-import {ListCollection, SingleSelectListState} from '@react-stately/list';
 import {SpectrumPickerProps} from '@react-types/select';
-import {SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps} from '@react-types/tabs';
+import {SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-types/tabs';
 import styles from '@adobe/spectrum-css-temp/components/tabs/vars.css';
+import {TabListState, useTabListState} from '@react-stately/tabs';
 import {Text} from '@react-spectrum/text';
+import {useCollection} from '@react-stately/collections';
 import {useHover} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
 import {useProvider, useProviderProps} from '@react-spectrum/provider';
 import {useResizeObserver} from '@react-aria/utils';
 import {useTab, useTabList, useTabPanel} from '@react-aria/tabs';
-import {TabListState, useTabListState} from '@react-stately/tabs';
-import {useCollection} from '@react-stately/collections';
 
 interface TabsContext<T> {
-  tabProps: SpectrumTabsProps<T>;
+  tabProps: SpectrumTabsProps<T>,
   tabState: {
-    tabListState: TabListState<T>;
-    setTabListState: (state: TabListState<T>) => void;
-    selectedTab: HTMLElement;
+    tabListState: TabListState<T>,
+    setTabListState: (state: TabListState<T>) => void,
+    selectedTab: HTMLElement,
     collapse: boolean
-  };
+  },
   refs: { 
     wrapperRef: MutableRefObject<HTMLDivElement>,
     tablistRef: MutableRefObject<HTMLDivElement>
-  };
+  },
   tabPanelProps: {
-    "aria-labelledby": string
+    'aria-labelledby': string
   }
 }
 
@@ -52,8 +52,6 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
   props = useProviderProps(props);
   let {
     orientation = 'horizontal' as Orientation,
-    isDisabled,
-    isQuiet,
     density = 'regular',
     children,
     ...otherProps
@@ -127,10 +125,9 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
       value={{
         tabProps: {...props, orientation, density}, 
         tabState: {tabListState, setTabListState, selectedTab, collapse}, 
-        refs: { tablistRef, wrapperRef },
-        tabPanelProps,
-      }}
-      >
+        refs: {tablistRef, wrapperRef},
+        tabPanelProps
+      }}>
       <div
         {...styleProps}
         ref={domRef}
@@ -251,13 +248,15 @@ export const TabList = function <T> (props: SpectrumTabListProps<T>) {
   const {isQuiet, density, isDisabled, orientation} = tabProps;
   const {selectedTab, collapse, setTabListState} = tabState;
   const {tablistRef, wrapperRef} = refs;
+  // Pass original Tab props but override children to create the collection.
   const state = useTabListState({...tabProps, children: props.children});
+  
   const {tabListProps} = useTabList({...tabProps, ...props}, state, tablistRef);
   
   useEffect(() => {
     // Passing back to root as useTabPanel needs the TabListState
     setTabListState(state);
-  },[state.disabledKeys, state.selectedItem, state.selectedKey, props.children])
+  }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);
 
   const tabContent = (
     <div
@@ -270,30 +269,29 @@ export const TabList = function <T> (props: SpectrumTabListProps<T>) {
         {
           'spectrum-Tabs--quiet': isQuiet,
           ['spectrum-Tabs--compact']: density === 'compact'
-        })}
-      >
+        })}>
       {[...state.collection].map((item) => (
-          <Tab key={item.key} item={item} state={state} isDisabled={isDisabled} orientation={orientation} />
+        <Tab key={item.key} item={item} state={state} isDisabled={isDisabled} orientation={orientation} />
       ))}
       <TabLine orientation={orientation} selectedTab={selectedTab} />
     </div>
-  )
+  );
 
 
   if (orientation === 'vertical') {
     return tabContent;
   } else {
-      let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');
-      return (
-        <div
-          ref={wrapperRef}
-          className={classNames(
+    let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');
+    return (
+      <div
+        ref={wrapperRef}
+        className={classNames(
             styles,
             'spectrum-TabsPanel-collapseWrapper'
           )}>
-          {collapse ? <TabPicker {...props} {...tabProps} id={tabPanelProps['aria-labelledby']} state={state} className={tabListclassName} /> : tabContent}
-        </div>
-      );
+        {collapse ? <TabPicker {...props} {...tabProps} id={tabPanelProps['aria-labelledby']} state={state} className={tabListclassName} /> : tabContent}
+      </div>
+    );
   }
 };
 
@@ -303,11 +301,11 @@ export const TabPanels = function <T> (props: SpectrumTabPanelsProps<T>) {
   const {tabListState} = tabState;
   const {tabPanelProps} = useTabPanel(props, tabListState);
   
-  if(ctxTabPanelProps['aria-labelledby']){
-    tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby']
+  if (ctxTabPanelProps['aria-labelledby']) {
+    tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];
   }
 
-  const factory = nodes => new ListCollection(nodes)
+  const factory = nodes => new ListCollection(nodes);
   const collection = useCollection({items: tabProps.items, ...props}, factory);
   const selectedItem = tabListState ? collection.getItem(tabListState.selectedKey) : null;
 
diff --git a/packages/@react-spectrum/tabs/stories/Tabs.stories.js b/packages/@react-spectrum/tabs/stories/Tabs.stories.js
index bbf8abf5f4d..73b8d295075 100644
--- a/packages/@react-spectrum/tabs/stories/Tabs.stories.js
+++ b/packages/@react-spectrum/tabs/stories/Tabs.stories.js
@@ -17,7 +17,7 @@ import {ButtonGroup} from '@react-spectrum/buttongroup';
 import Calendar from '@spectrum-icons/workflow/Calendar';
 import {Content, Flex, Heading, Text} from '@adobe/react-spectrum';
 import Dashboard from '@spectrum-icons/workflow/Dashboard';
-import {Item, Tabs, TabList, TabPanels} from '..';
+import {Item, TabList, TabPanels, Tabs} from '..';
 import React from 'react';
 import {storiesOf} from '@storybook/react';
 
@@ -162,19 +162,14 @@ function render(props = {}) {
   return (
     <Tabs {...props} aria-label="Tab example" maxWidth={500} onSelectionChange={action('onSelectionChange')}>
       <TabList>
-        <Item title="Tab 1" key="val1">
-        </Item>
-        <Item title="Tab 2" key="val2">
-        </Item>
-        <Item title="Tab 3" key="val3">
-        </Item>
-        <Item title="Tab 4" key="val4">
-        </Item>
-        <Item title="Tab 5" key="val5">
-        </Item>
+        <Item title="Tab 1" key="val1" />
+        <Item title="Tab 2" key="val2" />
+        <Item title="Tab 3" key="val3" />
+        <Item title="Tab 4" key="val4" />
+        <Item title="Tab 5" key="val5" />
       </TabList>
       <TabPanels>
-      <Item title="Tab 1" key="val1">
+        <Item title="Tab 1" key="val1">
           <Content margin="size-160">
             <Heading>Tab Body 1</Heading>
             <Text>
@@ -382,8 +377,8 @@ let DynamicTabs = (props = {}) => {
         <TabList>
           {item => (
             <Item key={item.name} textValue={item.name}>
-                {item.icon}
-                <Text>{item.name}</Text>
+              {item.icon}
+              <Text>{item.name}</Text>
             </Item>
           )}
         </TabList>
diff --git a/packages/@react-spectrum/tabs/test/Tabs.test.js b/packages/@react-spectrum/tabs/test/Tabs.test.js
index e971a11f19a..ee948e4a48e 100644
--- a/packages/@react-spectrum/tabs/test/Tabs.test.js
+++ b/packages/@react-spectrum/tabs/test/Tabs.test.js
@@ -11,7 +11,7 @@
  */
 
 import {act, fireEvent, render, within} from '@testing-library/react';
-import {Item, Tabs, TabList, TabPanels} from '../src';
+import {Item, TabList, TabPanels, Tabs} from '../src';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {theme} from '@react-spectrum/theme-default';
@@ -455,7 +455,7 @@ describe('Tabs', function () {
 
     rerender(
       <Provider theme={theme}>
-         <Tabs items={newItems} orientation="vertical">
+        <Tabs items={newItems} orientation="vertical">
           <TabList>
             {item => (
               <Item key={item.name} title={item.name || item.children} />
diff --git a/packages/@react-types/tabs/src/index.d.ts b/packages/@react-types/tabs/src/index.d.ts
index b652afdd837..ada3cfd90fd 100644
--- a/packages/@react-types/tabs/src/index.d.ts
+++ b/packages/@react-types/tabs/src/index.d.ts
@@ -58,7 +58,7 @@ interface SpectrumTabsProps<T> extends SingleSelection, DOMProps, StyleProps {
   isDisabled?: boolean,
   disabledKeys?: Iterable<Key>,
   isQuiet?: boolean,
-  density?: 'compact' | 'regular'
+  density?: 'compact' | 'regular',
   children: any
 }
 
@@ -68,4 +68,4 @@ export interface SpectrumTabListProps<T> extends DOMProps, StyleProps {
 
 export interface SpectrumTabPanelsProps<T> extends DOMProps, StyleProps {
   children: CollectionChildren<T>
-}
\ No newline at end of file
+}

From 783f8293b7240f7a8ff6ad169872c07b1ff5bcf4 Mon Sep 17 00:00:00 2001
From: Nishan <nishanbende@gmail.com>
Date: Sat, 13 Mar 2021 18:08:56 +0530
Subject: [PATCH 4/7] tabs - add storybook example of custom layout in Tabs

---
 .../tabs/stories/Tabs.stories.js              | 53 +++++++++++++++----
 1 file changed, 43 insertions(+), 10 deletions(-)

diff --git a/packages/@react-spectrum/tabs/stories/Tabs.stories.js b/packages/@react-spectrum/tabs/stories/Tabs.stories.js
index 73b8d295075..791d2b6f803 100644
--- a/packages/@react-spectrum/tabs/stories/Tabs.stories.js
+++ b/packages/@react-spectrum/tabs/stories/Tabs.stories.js
@@ -11,6 +11,7 @@
  */
 
 import {action} from '@storybook/addon-actions';
+import {ActionButton} from '@react-spectrum/button';
 import Bookmark from '@spectrum-icons/workflow/Bookmark';
 import {Button} from '@react-spectrum/button';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
@@ -143,16 +144,48 @@ storiesOf('Tabs', module)
     () => (
       (
         <Tabs maxWidth={500}>
-          <Item title="Tab 1 long long long name">
-            <Content margin="size-160">
-              <Text>Text</Text>
-            </Content>
-          </Item>
-          <Item title="Tab 2">
-            <Content margin="size-160">
-              <Text>Text 2</Text>
-            </Content>
-          </Item>
+          <TabList>
+            <Item>
+              <Text>Tab 1 long long long name</Text>
+            </Item>
+            <Item>
+              <Text>Tab 2</Text>
+            </Item>
+          </TabList>
+          <TabPanels>
+            <Item>
+              <Content margin="size-160">
+                <Text>Text</Text>
+              </Content>
+            </Item>
+            <Item>
+              <Content margin="size-160">
+                <Text>Text 2</Text>
+              </Content>
+            </Item>
+          </TabPanels>
+        </Tabs>
+      )
+    )
+  )
+  .add(
+    'Tab with flex container in between',
+    () => (
+      (
+        <Tabs maxWidth={500}>
+          <Flex direction="column">
+            <Flex direction="row" alignItems="center">
+              <TabList>
+                <Item key="tab1">Tab</Item>
+              </TabList>
+              <ActionButton aria-label="Add Tabs">
+                Add
+              </ActionButton>
+            </Flex>
+            <TabPanels>
+              <Item key="tab1">Tab 1 content</Item>
+            </TabPanels>
+          </Flex>
         </Tabs>
       )
     )

From 5336c29043cc48c3079dabd47c707c7b245d4ed0 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dlu@livefyre.com>
Date: Tue, 6 Apr 2021 17:12:41 -0700
Subject: [PATCH 5/7] Fixing tab spacing

---
 packages/@react-aria/tabs/src/useTab.ts      | 12 ++++-----
 packages/@react-aria/tabs/src/useTabList.ts  | 28 ++++++++++----------
 packages/@react-aria/tabs/src/useTabPanel.ts |  4 +--
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/@react-aria/tabs/src/useTab.ts b/packages/@react-aria/tabs/src/useTab.ts
index e764acb48df..a8a98550223 100644
--- a/packages/@react-aria/tabs/src/useTab.ts
+++ b/packages/@react-aria/tabs/src/useTab.ts
@@ -18,14 +18,14 @@ import {usePress} from '@react-aria/interactions';
 import {useSelectableItem} from '@react-aria/selection';
 
 interface TabAria {
-    /** Props for the tab element. */
-    tabProps: HTMLAttributes<HTMLElement>
-  }
+  /** Props for the tab element. */
+  tabProps: HTMLAttributes<HTMLElement>
+}
   
 export function useTab<T>(
-    props: AriaTabProps<T>,
-    state: SingleSelectListState<T>,
-    ref: RefObject<HTMLElement>
+  props: AriaTabProps<T>,
+  state: SingleSelectListState<T>,
+  ref: RefObject<HTMLElement>
 ): TabAria {
   let {item, isDisabled: propsDisabled} = props;
   let {key} = item;
diff --git a/packages/@react-aria/tabs/src/useTabList.ts b/packages/@react-aria/tabs/src/useTabList.ts
index e1c7fe67c6b..50fefe22a06 100644
--- a/packages/@react-aria/tabs/src/useTabList.ts
+++ b/packages/@react-aria/tabs/src/useTabList.ts
@@ -20,26 +20,26 @@ import {useLocale} from '@react-aria/i18n';
 import {useSelectableCollection} from '@react-aria/selection';
 
 interface TabListAria {
-    /** Props for the tablist container. */
-    tabListProps: HTMLAttributes<HTMLElement>
-  }
+  /** Props for the tablist container. */
+  tabListProps: HTMLAttributes<HTMLElement>
+}
   
 export function useTabList<T>(props: AriaTabListProps<T>, state: TabListState<T>, ref): TabListAria {
   let {
-      orientation = 'horizontal',
-      keyboardActivation = 'automatic'
-    } = props;
+    orientation = 'horizontal',
+    keyboardActivation = 'automatic'
+  } = props;
   let {
-      collection,
-      selectionManager: manager,
-      disabledKeys
-    } = state;
+    collection,
+    selectionManager: manager,
+    disabledKeys
+  } = state;
   let {direction} = useLocale();
   let delegate = useMemo(() => new TabsKeyboardDelegate(
-      collection,
-      direction,
-      orientation,
-      disabledKeys), [collection, disabledKeys, orientation, direction]);
+    collection,
+    direction,
+    orientation,
+    disabledKeys), [collection, disabledKeys, orientation, direction]);
   
   let {collectionProps} = useSelectableCollection({
     ref,
diff --git a/packages/@react-aria/tabs/src/useTabPanel.ts b/packages/@react-aria/tabs/src/useTabPanel.ts
index 3d903fc7505..ffcc6f334ac 100644
--- a/packages/@react-aria/tabs/src/useTabPanel.ts
+++ b/packages/@react-aria/tabs/src/useTabPanel.ts
@@ -17,8 +17,8 @@ import {mergeProps} from '@react-aria/utils';
 import {TabListState} from '@react-stately/tabs';
 
 interface TabPanelAria {
-    /** Props for the tab panel element. */
-    tabPanelProps: HTMLAttributes<HTMLElement>
+  /** Props for the tab panel element. */
+  tabPanelProps: HTMLAttributes<HTMLElement>
 }
     
 export function useTabPanel<T>(props: AriaTabPanelProps, state: TabListState<T>): TabPanelAria {

From 3bbf011b6c39d00cbdb225c51d484591150e0119 Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Wed, 7 Apr 2021 13:56:18 -0700
Subject: [PATCH 6/7] add functionality to customized tabs story

---
 .../tabs/stories/Tabs.stories.js              | 88 ++++++++++++++-----
 1 file changed, 68 insertions(+), 20 deletions(-)

diff --git a/packages/@react-spectrum/tabs/stories/Tabs.stories.js b/packages/@react-spectrum/tabs/stories/Tabs.stories.js
index 791d2b6f803..bf0b1b9e6f3 100644
--- a/packages/@react-spectrum/tabs/stories/Tabs.stories.js
+++ b/packages/@react-spectrum/tabs/stories/Tabs.stories.js
@@ -16,7 +16,7 @@ import Bookmark from '@spectrum-icons/workflow/Bookmark';
 import {Button} from '@react-spectrum/button';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
 import Calendar from '@spectrum-icons/workflow/Calendar';
-import {Content, Flex, Heading, Text} from '@adobe/react-spectrum';
+import {ActionGroup, Content, Flex, Heading, Text} from '@adobe/react-spectrum';
 import Dashboard from '@spectrum-icons/workflow/Dashboard';
 import {Item, TabList, TabPanels, Tabs} from '..';
 import React from 'react';
@@ -170,25 +170,7 @@ storiesOf('Tabs', module)
   )
   .add(
     'Tab with flex container in between',
-    () => (
-      (
-        <Tabs maxWidth={500}>
-          <Flex direction="column">
-            <Flex direction="row" alignItems="center">
-              <TabList>
-                <Item key="tab1">Tab</Item>
-              </TabList>
-              <ActionButton aria-label="Add Tabs">
-                Add
-              </ActionButton>
-            </Flex>
-            <TabPanels>
-              <Item key="tab1">Tab 1 content</Item>
-            </TabPanels>
-          </Flex>
-        </Tabs>
-      )
-    )
+    () => <DynamicTabsWithDecoration />
   );
 
 function render(props = {}) {
@@ -477,3 +459,69 @@ let OrientationFlip = (props = {}) => {
     </div>
   );
 };
+
+
+let DynamicTabsWithDecoration = (props = {}) => {
+
+  let [tabs, setTabs] = React.useState(items);
+  let addTab = () => {
+    let newTabs = [...tabs];
+    newTabs.push({
+      name: `Tab ${tabs.length + 1}`,
+      children: `Tab Body ${tabs.length + 1}`
+    });
+
+    setTabs(newTabs);
+  };
+
+  let removeTab = () => {
+    if (tabs.length > 1) {
+      let newTabs = [...tabs];
+      newTabs.pop();
+      setTabs(newTabs);
+    }
+  };
+
+  return (
+    <div style={{width: '80%'}}>
+      <Tabs {...props} aria-label="Tab example" items={tabs} onSelectionChange={action('onSelectionChange')}>
+        <Flex direction="column">
+          <Flex direction="row" alignItems="center">
+            <TabList>
+              {item => (
+                <Item key={item.name} textValue={item.name}>
+                  {item.icon}
+                  <Text>{item.name}</Text>
+                </Item>
+              )}
+            </TabList>
+            <Flex alignItems="center" justifyContent="end" flexGrow={1} alignSelf="stretch" UNSAFE_style={{borderBottom: 'var(--spectrum-alias-border-size-thick) solid var(--spectrum-global-color-gray-200)'}}>
+              <ActionGroup marginEnd="30px" disabledKeys={tabs.length === 1 ? ['remove'] : undefined} onAction={val => val === 'add' ? addTab() : removeTab()}>
+                <Item key="add">
+                  <Text>Add Tab</Text>
+                </Item>
+                <Item key="remove">
+                  <Text>Remove Tab</Text>
+                </Item>
+              </ActionGroup>
+            </Flex>
+          </Flex>
+          <TabPanels>
+            {item => (
+              <Item key={item.name}>
+                <Content margin="size-160">
+                  <Heading>{item.children}</Heading>
+                  <Text>
+                    Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+                    Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+                    Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+                  </Text>
+                </Content>
+              </Item>
+            )}
+          </TabPanels>
+        </Flex>
+      </Tabs>
+    </div>
+  );
+};

From 6284567c4525aa111730af03984209ee18d47066 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 13 Apr 2021 16:36:08 -0700
Subject: [PATCH 7/7] Some cleanup and docs

---
 packages/@react-aria/tabs/src/useTab.ts       | 14 ++----
 packages/@react-aria/tabs/src/useTabList.ts   | 12 ++---
 packages/@react-spectrum/tabs/src/Tabs.tsx    | 48 +++++++++++--------
 .../tabs/stories/Tabs.stories.js              |  3 +-
 .../@react-stately/tabs/src/useTabsState.ts   | 10 +++-
 packages/@react-types/tabs/src/index.d.ts     |  7 ++-
 6 files changed, 51 insertions(+), 43 deletions(-)

diff --git a/packages/@react-aria/tabs/src/useTab.ts b/packages/@react-aria/tabs/src/useTab.ts
index a8a98550223..abac01f391f 100644
--- a/packages/@react-aria/tabs/src/useTab.ts
+++ b/packages/@react-aria/tabs/src/useTab.ts
@@ -21,14 +21,13 @@ interface TabAria {
   /** Props for the tab element. */
   tabProps: HTMLAttributes<HTMLElement>
 }
-  
+
 export function useTab<T>(
-  props: AriaTabProps<T>,
+  props: AriaTabProps,
   state: SingleSelectListState<T>,
   ref: RefObject<HTMLElement>
 ): TabAria {
-  let {item, isDisabled: propsDisabled} = props;
-  let {key} = item;
+  let {key, isDisabled: propsDisabled} = props;
   let {selectionManager: manager, selectedKey} = state;
 
   let isSelected = key === selectedKey;
@@ -45,11 +44,6 @@ export function useTab<T>(
   let tabPanelId = generateId(state, key, 'tabpanel');
   let {tabIndex} = pressProps;
 
-    // selected tab should have tabIndex=0, when it initializes
-  if (isSelected && !isDisabled) {
-    tabIndex = 0;
-  }
-
   return {
     tabProps: {
       ...pressProps,
@@ -62,4 +56,4 @@ export function useTab<T>(
     }
   };
 }
-  
+
diff --git a/packages/@react-aria/tabs/src/useTabList.ts b/packages/@react-aria/tabs/src/useTabList.ts
index 50fefe22a06..386c0b9fbb6 100644
--- a/packages/@react-aria/tabs/src/useTabList.ts
+++ b/packages/@react-aria/tabs/src/useTabList.ts
@@ -23,7 +23,7 @@ interface TabListAria {
   /** Props for the tablist container. */
   tabListProps: HTMLAttributes<HTMLElement>
 }
-  
+
 export function useTabList<T>(props: AriaTabListProps<T>, state: TabListState<T>, ref): TabListAria {
   let {
     orientation = 'horizontal',
@@ -40,7 +40,7 @@ export function useTabList<T>(props: AriaTabListProps<T>, state: TabListState<T>
     direction,
     orientation,
     disabledKeys), [collection, disabledKeys, orientation, direction]);
-  
+
   let {collectionProps} = useSelectableCollection({
     ref,
     selectionManager: manager,
@@ -48,13 +48,13 @@ export function useTabList<T>(props: AriaTabListProps<T>, state: TabListState<T>
     selectOnFocus: keyboardActivation === 'automatic',
     disallowEmptySelection: true
   });
-  
-    // Compute base id for all tabs
+
+  // Compute base id for all tabs
   let tabsId = useId();
   tabsIds.set(state, tabsId);
-  
+
   let tabListLabelProps = useLabels({...props, id: tabsId});
-  
+
   return {
     tabListProps: {
       ...mergeProps(collectionProps, tabListLabelProps),
diff --git a/packages/@react-spectrum/tabs/src/Tabs.tsx b/packages/@react-spectrum/tabs/src/Tabs.tsx
index 3f6246110ed..b65b270b6b9 100644
--- a/packages/@react-spectrum/tabs/src/Tabs.tsx
+++ b/packages/@react-spectrum/tabs/src/Tabs.tsx
@@ -16,7 +16,7 @@ import {FocusRing} from '@react-aria/focus';
 import {Item, Picker} from '@react-spectrum/picker';
 import {ListCollection, SingleSelectListState} from '@react-stately/list';
 import {mergeProps, useId, useLayoutEffect} from '@react-aria/utils';
-import React, {Key, MutableRefObject, ReactElement, useCallback, useEffect, useRef, useState} from 'react';
+import React, {Key, MutableRefObject, ReactElement, useCallback, useContext, useEffect, useRef, useState} from 'react';
 import {SpectrumPickerProps} from '@react-types/select';
 import {SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-types/tabs';
 import styles from '@adobe/spectrum-css-temp/components/tabs/vars.css';
@@ -37,7 +37,7 @@ interface TabsContext<T> {
     selectedTab: HTMLElement,
     collapse: boolean
   },
-  refs: { 
+  refs: {
     wrapperRef: MutableRefObject<HTMLDivElement>,
     tablistRef: MutableRefObject<HTMLDivElement>
   },
@@ -65,7 +65,7 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
   let {styleProps} = useStyleProps(otherProps);
   let [collapse, setCollapse] = useValueEffect(false);
   let [selectedTab, setSelectedTab] = useState<HTMLElement>();
-  const [tabListState, setTabListState] = React.useState<TabListState<T>>(null);
+  const [tabListState, setTabListState] = useState<TabListState<T>>(null);
 
   useEffect(() => {
     if (tablistRef.current) {
@@ -121,10 +121,10 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
     tabPanelProps['aria-labelledby'] = collapsibleTabListId;
   }
   return (
-    <TabContext.Provider 
+    <TabContext.Provider
       value={{
-        tabProps: {...props, orientation, density}, 
-        tabState: {tabListState, setTabListState, selectedTab, collapse}, 
+        tabProps: {...props, orientation, density},
+        tabState: {tabListState, setTabListState, selectedTab, collapse},
         refs: {tablistRef, wrapperRef},
         tabPanelProps
       }}>
@@ -150,13 +150,14 @@ interface TabProps<T> extends DOMProps {
   orientation?: Orientation
 }
 
-export function Tab<T>(props: TabProps<T>) {
+// @private
+function Tab<T>(props: TabProps<T>) {
   let {item, state, isDisabled: propsDisabled} = props;
   let {key, rendered} = item;
   let isDisabled = propsDisabled || state.disabledKeys.has(key);
 
   let ref = useRef<HTMLDivElement>();
-  let {tabProps} = useTab({item, isDisabled}, state, ref);
+  let {tabProps} = useTab({key, isDisabled}, state, ref);
 
   let {hoverProps, isHovered} = useHover({
     ...props
@@ -202,6 +203,7 @@ interface TabLineProps {
   selectedKey?: Key
 }
 
+// @private
 function TabLine(props: TabLineProps) {
   let {
     orientation,
@@ -242,20 +244,25 @@ function TabLine(props: TabLineProps) {
   return <div className={classNames(styles, 'spectrum-Tabs-selectionIndicator')} role="presentation" style={style} />;
 }
 
-export const TabList = function <T> (props: SpectrumTabListProps<T>) {
-  const tabContext = React.useContext(TabContext);
+/**
+ * A TabList is used within Tabs to group tabs that a user can switch between.
+ * The keys of the items within the <TabList> must match up with a corresponding item inside the <TabPanels>.
+ */
+export function TabList<T>(props: SpectrumTabListProps<T>) {
+  const tabContext = useContext(TabContext);
   const {refs, tabState, tabProps, tabPanelProps} = tabContext;
   const {isQuiet, density, isDisabled, orientation} = tabProps;
   const {selectedTab, collapse, setTabListState} = tabState;
   const {tablistRef, wrapperRef} = refs;
   // Pass original Tab props but override children to create the collection.
   const state = useTabListState({...tabProps, children: props.children});
-  
+
   const {tabListProps} = useTabList({...tabProps, ...props}, state, tablistRef);
-  
+
   useEffect(() => {
     // Passing back to root as useTabPanel needs the TabListState
     setTabListState(state);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);
 
   const tabContent = (
@@ -293,14 +300,17 @@ export const TabList = function <T> (props: SpectrumTabListProps<T>) {
       </div>
     );
   }
-};
-
+}
 
-export const TabPanels = function <T> (props: SpectrumTabPanelsProps<T>) {
-  const {tabState, tabProps, tabPanelProps: ctxTabPanelProps} = React.useContext(TabContext);
+/**
+ * TabPanels is used within Tabs as a container for the content of each tab.
+ * The keys of the items within the <TabPanels> must match up with a corresponding item inside the <TabList>.
+ */
+export function TabPanels<T>(props: SpectrumTabPanelsProps<T>) {
+  const {tabState, tabProps, tabPanelProps: ctxTabPanelProps} = useContext(TabContext);
   const {tabListState} = tabState;
   const {tabPanelProps} = useTabPanel(props, tabListState);
-  
+
   if (ctxTabPanelProps['aria-labelledby']) {
     tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];
   }
@@ -312,9 +322,9 @@ export const TabPanels = function <T> (props: SpectrumTabPanelsProps<T>) {
   return (
     <div {...tabPanelProps} className={classNames(styles, 'spectrum-TabsPanel-tabpanel')}>
       {selectedItem && selectedItem.props.children}
-    </div> 
+    </div>
   );
-};
+}
 
 interface TabPickerProps<T> extends SpectrumPickerProps<T> {
   density?: 'compact' | 'regular',
diff --git a/packages/@react-spectrum/tabs/stories/Tabs.stories.js b/packages/@react-spectrum/tabs/stories/Tabs.stories.js
index bf0b1b9e6f3..8aaaff3d958 100644
--- a/packages/@react-spectrum/tabs/stories/Tabs.stories.js
+++ b/packages/@react-spectrum/tabs/stories/Tabs.stories.js
@@ -11,12 +11,11 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {ActionButton} from '@react-spectrum/button';
+import {ActionGroup, Content, Flex, Heading, Text} from '@adobe/react-spectrum';
 import Bookmark from '@spectrum-icons/workflow/Bookmark';
 import {Button} from '@react-spectrum/button';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
 import Calendar from '@spectrum-icons/workflow/Calendar';
-import {ActionGroup, Content, Flex, Heading, Text} from '@adobe/react-spectrum';
 import Dashboard from '@spectrum-icons/workflow/Dashboard';
 import {Item, TabList, TabPanels, Tabs} from '..';
 import React from 'react';
diff --git a/packages/@react-stately/tabs/src/useTabsState.ts b/packages/@react-stately/tabs/src/useTabsState.ts
index 96b50ebfc05..4701194ba4c 100644
--- a/packages/@react-stately/tabs/src/useTabsState.ts
+++ b/packages/@react-stately/tabs/src/useTabsState.ts
@@ -21,8 +21,14 @@ export function useTabListState<T extends object>(props: TabListProps<T>): TabLi
 
   useEffect(() => {
     // Ensure a tab is always selected (in case no selected key was specified or if selected item was deleted from collection)
-    if (state.selectionManager.isEmpty || !state.collection.getItem(state.selectedKey)) {
-      state.selectionManager.replaceSelection(state.collection.getFirstKey());
+    let selectedKey = state.selectedKey;
+    if (state.selectionManager.isEmpty || !state.collection.getItem(selectedKey)) {
+      selectedKey = state.collection.getFirstKey();
+      state.selectionManager.replaceSelection(selectedKey);
+    }
+
+    if (state.selectionManager.focusedKey == null) {
+      state.selectionManager.setFocusedKey(selectedKey);
     }
   }, [state.selectionManager, state.selectedKey, state.collection]);
 
diff --git a/packages/@react-types/tabs/src/index.d.ts b/packages/@react-types/tabs/src/index.d.ts
index ada3cfd90fd..97062165775 100644
--- a/packages/@react-types/tabs/src/index.d.ts
+++ b/packages/@react-types/tabs/src/index.d.ts
@@ -15,16 +15,15 @@ import {
   CollectionBase,
   CollectionChildren,
   DOMProps,
-  Node,
   Orientation,
   SingleSelection,
   StyleProps
 } from '@react-types/shared';
 import {Key} from 'react';
 
-export interface AriaTabProps<T> {
-  /** Collection node for the tab. */
-  item: Node<T>,
+export interface AriaTabProps {
+  /** The key of the tab. */
+  key: Key,
   /** Whether the tab should be disabled. */
   isDisabled?: boolean
 }