From 5a6dd9b9fed58ffd5efc9dd07090073fcc5d0efe Mon Sep 17 00:00:00 2001
From: Tom Schindl <tom.schindl@bestsolution.at>
Date: Wed, 8 Jun 2022 13:43:14 +0200
Subject: [PATCH 1/5] fix flickering line in collapsed mode

instead of modifying the DOM all nodes are kept in
the DOM and are hiden/shown upon request
---
 packages/@react-spectrum/tabs/src/Tabs.tsx | 60 +++++++++++-----------
 1 file changed, 29 insertions(+), 31 deletions(-)

diff --git a/packages/@react-spectrum/tabs/src/Tabs.tsx b/packages/@react-spectrum/tabs/src/Tabs.tsx
index 9f43229e04f..f5e96db489d 100644
--- a/packages/@react-spectrum/tabs/src/Tabs.tsx
+++ b/packages/@react-spectrum/tabs/src/Tabs.tsx
@@ -12,7 +12,7 @@
 
 import {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 import {DOMProps, DOMRef, Node, Orientation} from '@react-types/shared';
-import {filterDOMProps, useValueEffect} from '@react-aria/utils';
+import {filterDOMProps} from '@react-aria/utils';
 import {FocusRing} from '@react-aria/focus';
 import {Item, Picker} from '@react-spectrum/picker';
 import {ListCollection, SingleSelectListState} from '@react-stately/list';
@@ -64,7 +64,7 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
 
   let {direction} = useLocale();
   let {styleProps} = useStyleProps(otherProps);
-  let [collapse, setCollapse] = useValueEffect(false);
+  let [collapse, setCollapse] = useState(false);
   let [selectedTab, setSelectedTab] = useState<HTMLElement>();
   const [tabListState, setTabListState] = useState<TabListState<T>>(null);
 
@@ -80,29 +80,16 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
   }, [children, tabListState?.selectedKey, collapse, tablistRef]);
 
   let checkShouldCollapse = useCallback(() => {
-    let computeShouldCollapse = () => {
-      if (wrapperRef.current) {
-        let tabsComponent = wrapperRef.current;
-        let tabs = tablistRef.current.querySelectorAll('[role="tab"]');
-        let lastTab = tabs[tabs.length - 1];
-
-        let end = direction === 'rtl' ? 'left' : 'right';
-        let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];
-        let farEdgeLastTab = lastTab?.getBoundingClientRect()[end];
-        let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;
-
-        return shouldCollapse;
-      }
-    };
-
-    if (orientation !== 'vertical') {
-      setCollapse(function* () {
-        // Make Tabs render in non-collapsed state
-        yield false;
-
-        // Compute if Tabs should collapse and update
-        yield computeShouldCollapse();
-      });
+    if (wrapperRef.current && orientation !== 'vertical') {
+      let tabsComponent = wrapperRef.current;
+      let tabs = tablistRef.current.querySelectorAll('[role="tab"]');
+      let lastTab = tabs[tabs.length - 1];
+
+      let end = direction === 'rtl' ? 'left' : 'right';
+      let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];
+      let farEdgeLastTab = lastTab?.getBoundingClientRect()[end];
+      let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;
+      setCollapse(shouldCollapse);
     }
   }, [tablistRef, wrapperRef, direction, orientation, setCollapse]);
 
@@ -270,6 +257,8 @@ export function TabList<T>(props: SpectrumTabListProps<T>) {
   }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);
   let stylePropsForVertical = orientation === 'vertical' ? styleProps : {};
 
+  let style : React.CSSProperties = collapse ? {visibility: 'hidden', position: 'absolute'} : {};
+
   let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');
   const tabContent = (
     <div
@@ -288,7 +277,9 @@ export function TabList<T>(props: SpectrumTabListProps<T>) {
         },
         orientation === 'vertical' && styleProps.className
       )
-      }>
+      }
+      aria-hidden={collapse}
+      style={style}>
       {[...state.collection].map((item) => (
         <Tab key={item.key} item={item} state={state} isDisabled={isDisabled} orientation={orientation} />
       ))}
@@ -309,7 +300,8 @@ export function TabList<T>(props: SpectrumTabListProps<T>) {
           'spectrum-TabsPanel-collapseWrapper',
           styleProps.className
         )}>
-        {collapse ? <TabPicker {...props} {...tabProps} id={tabPanelProps['aria-labelledby']} state={state} className={tabListclassName} /> : tabContent}
+        <TabPicker {...props} {...tabProps} visible={collapse} id={tabPanelProps['aria-labelledby']} state={state} className={tabListclassName} />
+        {tabContent}
       </div>
     );
   }
@@ -359,7 +351,8 @@ interface TabPickerProps<T> extends Omit<SpectrumPickerProps<T>, 'children'> {
   density?: 'compact' | 'regular',
   isEmphasized?: boolean,
   state: SingleSelectListState<T>,
-  className?: string
+  className?: string,
+  visible: boolean
 }
 
 function TabPicker<T>(props: TabPickerProps<T>) {
@@ -372,7 +365,8 @@ function TabPicker<T>(props: TabPickerProps<T>) {
     'aria-label': ariaLabel,
     density,
     className,
-    id
+    id,
+    visible
   } = props;
 
   let ref = useRef();
@@ -394,6 +388,8 @@ function TabPicker<T>(props: TabPickerProps<T>) {
     'aria-label': ariaLabel
   };
 
+  const style : React.CSSProperties = visible ? {} : {visibility: 'hidden', position: 'absolute'};
+
   // TODO: Figure out if tabListProps should go onto the div here, v2 doesn't do it
   return (
     <div
@@ -408,7 +404,9 @@ function TabPicker<T>(props: TabPickerProps<T>) {
           'spectrum-Tabs--emphasized': isEmphasized
         },
         className
-      )}>
+      )}
+      style={style}
+      aria-hidden={!visible}>
       <SlotProvider
         slots={{
           icon: {
@@ -425,7 +423,7 @@ function TabPicker<T>(props: TabPickerProps<T>) {
           items={items}
           ref={ref}
           isQuiet
-          isDisabled={isDisabled}
+          isDisabled={!visible || isDisabled}
           selectedKey={state.selectedKey}
           disabledKeys={state.disabledKeys}
           onSelectionChange={state.setSelectedKey}>

From 6c6829a9f4241db04dc8ea20ece329e7511cbf26 Mon Sep 17 00:00:00 2001
From: Tom Schindl <tom.schindl@bestsolution.at>
Date: Wed, 8 Jun 2022 13:43:46 +0200
Subject: [PATCH 2/5] fix tests to pass an aria label

---
 packages/@react-spectrum/tabs/test/Tabs.test.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/@react-spectrum/tabs/test/Tabs.test.js b/packages/@react-spectrum/tabs/test/Tabs.test.js
index 944e0052fd6..8e3828a9ddd 100644
--- a/packages/@react-spectrum/tabs/test/Tabs.test.js
+++ b/packages/@react-spectrum/tabs/test/Tabs.test.js
@@ -28,7 +28,7 @@ function renderComponent(props = {}, itemProps) {
   let {items = defaultItems} = props;
   return render(
     <Provider theme={theme}>
-      <Tabs {...props} items={items}>
+      <Tabs aria-label="Tab Sample" {...props} items={items}>
         <TabList>
           {item => (
             <Item {...itemProps} key={item.name} title={item.name || item.children} />
@@ -223,7 +223,7 @@ describe('Tabs', function () {
   it('does not generate conflicting ids between multiple tabs instances', function () {
     let tree = render(
       <Provider theme={theme}>
-        <Tabs>
+        <Tabs aria-label="Tab Sample">
           <TabList>
             {defaultItems.map(item => (
               <Item key={item.name} title={item.name || item.children} />
@@ -237,7 +237,7 @@ describe('Tabs', function () {
             ))}
           </TabPanels>
         </Tabs>
-        <Tabs>
+        <Tabs aria-label="Tab Sample 2">
           <TabList>
             {defaultItems.map(item => (
               <Item key={item.name} title={item.name || item.children} />
@@ -316,7 +316,7 @@ describe('Tabs', function () {
 
     tree.rerender(
       <Provider theme={theme}>
-        <Tabs disabledKeys={[defaultItems[0].name]} onSelectionChange={onSelectionChange} items={defaultItems.slice(0, 1)}>
+        <Tabs aria-label="Tab Example" disabledKeys={[defaultItems[0].name]} onSelectionChange={onSelectionChange} items={defaultItems.slice(0, 1)}>
           <TabList>
             {item => (
               <Item key={item.name} title={item.name || item.children} />
@@ -499,7 +499,7 @@ describe('Tabs', function () {
 
     rerender(
       <Provider theme={theme}>
-        <Tabs items={newItems} orientation="vertical">
+        <Tabs aria-label="Tab Example" items={newItems} orientation="vertical">
           <TabList>
             {item => (
               <Item key={item.name} title={item.name || item.children} />
@@ -618,7 +618,7 @@ describe('Tabs', function () {
   it('tabpanel should have tabIndex=0 only when there are no focusable elements', async function () {
     let {getByRole, getAllByRole} = render(
       <Provider theme={theme}>
-        <Tabs maxWidth={500}>
+        <Tabs aria-label="Tab Example" maxWidth={500}>
           <TabList>
             <Item>Tab 1</Item>
             <Item>Tab 2</Item>
@@ -653,7 +653,7 @@ describe('Tabs', function () {
   it('TabPanel children do not share values between panels', () => {
     let {getByDisplayValue, getAllByRole, getByTestId} = render(
       <Provider theme={theme}>
-        <Tabs maxWidth={500}>
+        <Tabs aria-label="Tab Example" maxWidth={500}>
           <TabList>
             <Item>Tab 1</Item>
             <Item>Tab 2</Item>

From a7c137ec156b9243b9d0a4e9f52ae4ce91e55ee2 Mon Sep 17 00:00:00 2001
From: Tom Schindl <tom.schindl@bestsolution.at>
Date: Mon, 13 Jun 2022 22:15:31 +0200
Subject: [PATCH 3/5] fix remarks and rename property

---
 packages/@react-spectrum/tabs/src/Tabs.tsx | 32 ++++++++++++----------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/@react-spectrum/tabs/src/Tabs.tsx b/packages/@react-spectrum/tabs/src/Tabs.tsx
index f5e96db489d..5c3993855b9 100644
--- a/packages/@react-spectrum/tabs/src/Tabs.tsx
+++ b/packages/@react-spectrum/tabs/src/Tabs.tsx
@@ -36,7 +36,7 @@ interface TabsContext<T> {
     tabListState: TabListState<T>,
     setTabListState: (state: TabListState<T>) => void,
     selectedTab: HTMLElement,
-    collapse: boolean
+    collapsed: boolean
   },
   refs: {
     wrapperRef: MutableRefObject<HTMLDivElement>,
@@ -64,7 +64,7 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
 
   let {direction} = useLocale();
   let {styleProps} = useStyleProps(otherProps);
-  let [collapse, setCollapse] = useState(false);
+  let [collapsed, setCollapsed] = useState(false);
   let [selectedTab, setSelectedTab] = useState<HTMLElement>();
   const [tabListState, setTabListState] = useState<TabListState<T>>(null);
 
@@ -77,7 +77,7 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
       }
     }
     // collapse is in the dep array so selectedTab can be updated for TabLine positioning
-  }, [children, tabListState?.selectedKey, collapse, tablistRef]);
+  }, [children, tabListState?.selectedKey, collapsed, tablistRef]);
 
   let checkShouldCollapse = useCallback(() => {
     if (wrapperRef.current && orientation !== 'vertical') {
@@ -89,9 +89,9 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
       let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];
       let farEdgeLastTab = lastTab?.getBoundingClientRect()[end];
       let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;
-      setCollapse(shouldCollapse);
+      setCollapsed(shouldCollapse);
     }
-  }, [tablistRef, wrapperRef, direction, orientation, setCollapse]);
+  }, [tablistRef, wrapperRef, direction, orientation, setCollapsed]);
 
   useEffect(() => {
     checkShouldCollapse();
@@ -105,14 +105,14 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
 
   // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.
   let collapsibleTabListId = useId();
-  if (collapse && orientation !== 'vertical') {
+  if (collapsed && orientation !== 'vertical') {
     tabPanelProps['aria-labelledby'] = collapsibleTabListId;
   }
   return (
     <TabContext.Provider
       value={{
         tabProps: {...props, orientation, density},
-        tabState: {tabListState, setTabListState, selectedTab, collapse},
+        tabState: {tabListState, setTabListState, selectedTab, collapsed},
         refs: {tablistRef, wrapperRef},
         tabPanelProps
       }}>
@@ -242,7 +242,7 @@ export function TabList<T>(props: SpectrumTabListProps<T>) {
   const tabContext = useContext(TabContext);
   const {refs, tabState, tabProps, tabPanelProps} = tabContext;
   const {isQuiet, density, isDisabled, isEmphasized, orientation} = tabProps;
-  const {selectedTab, collapse, setTabListState} = tabState;
+  const {selectedTab, collapsed, setTabListState} = tabState;
   const {tablistRef, wrapperRef} = refs;
   // Pass original Tab props but override children to create the collection.
   const state = useTabListState({...tabProps, children: props.children});
@@ -255,14 +255,18 @@ export function TabList<T>(props: SpectrumTabListProps<T>) {
     setTabListState(state);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);
-  let stylePropsForVertical = orientation === 'vertical' ? styleProps : {};
 
-  let style : React.CSSProperties = collapse ? {visibility: 'hidden', position: 'absolute'} : {};
+  let collapseStyle : React.CSSProperties = collapsed && orientation !== 'vertical' ? {visibility: 'hidden', position: 'absolute'} : {};
+  let stylePropsFinal = orientation === 'vertical' ? styleProps : {style: collapseStyle};
+
+  if (collapsed && orientation !== 'vertical') {
+    tabListProps['aria-hidden'] = true;
+  }
 
   let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');
   const tabContent = (
     <div
-      {...stylePropsForVertical}
+      {...stylePropsFinal}
       {...tabListProps}
       ref={tablistRef}
       className={classNames(
@@ -277,9 +281,7 @@ export function TabList<T>(props: SpectrumTabListProps<T>) {
         },
         orientation === 'vertical' && styleProps.className
       )
-      }
-      aria-hidden={collapse}
-      style={style}>
+      }>
       {[...state.collection].map((item) => (
         <Tab key={item.key} item={item} state={state} isDisabled={isDisabled} orientation={orientation} />
       ))}
@@ -300,7 +302,7 @@ export function TabList<T>(props: SpectrumTabListProps<T>) {
           'spectrum-TabsPanel-collapseWrapper',
           styleProps.className
         )}>
-        <TabPicker {...props} {...tabProps} visible={collapse} id={tabPanelProps['aria-labelledby']} state={state} className={tabListclassName} />
+        <TabPicker {...props} {...tabProps} visible={collapsed} id={tabPanelProps['aria-labelledby']} state={state} className={tabListclassName} />
         {tabContent}
       </div>
     );

From cfd64caa1946865222def065f9fb957255d96913 Mon Sep 17 00:00:00 2001
From: Tom Schindl <tom.schindl@bestsolution.at>
Date: Tue, 28 Jun 2022 16:04:17 +0200
Subject: [PATCH 4/5] Update packages/@react-spectrum/tabs/src/Tabs.tsx

Co-authored-by: Robert Snow <snowystinger@gmail.com>
---
 packages/@react-spectrum/tabs/src/Tabs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/tabs/src/Tabs.tsx b/packages/@react-spectrum/tabs/src/Tabs.tsx
index 5c3993855b9..64e045d1d2e 100644
--- a/packages/@react-spectrum/tabs/src/Tabs.tsx
+++ b/packages/@react-spectrum/tabs/src/Tabs.tsx
@@ -408,7 +408,7 @@ function TabPicker<T>(props: TabPickerProps<T>) {
         className
       )}
       style={style}
-      aria-hidden={!visible}>
+      aria-hidden={visible ? undefined : true}>
       <SlotProvider
         slots={{
           icon: {

From aa4f52113cc2466273cfc00a7aff6c6944405b0c Mon Sep 17 00:00:00 2001
From: Tom Schindl <tom.schindl@bestsolution.at>
Date: Wed, 29 Jun 2022 20:42:56 +0200
Subject: [PATCH 5/5] fixed overflow behavior

---
 packages/@react-spectrum/tabs/src/Tabs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/tabs/src/Tabs.tsx b/packages/@react-spectrum/tabs/src/Tabs.tsx
index 64e045d1d2e..9f015e8f913 100644
--- a/packages/@react-spectrum/tabs/src/Tabs.tsx
+++ b/packages/@react-spectrum/tabs/src/Tabs.tsx
@@ -256,7 +256,7 @@ export function TabList<T>(props: SpectrumTabListProps<T>) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);
 
-  let collapseStyle : React.CSSProperties = collapsed && orientation !== 'vertical' ? {visibility: 'hidden', position: 'absolute'} : {};
+  let collapseStyle : React.CSSProperties = collapsed && orientation !== 'vertical' ? {maxWidth: 'calc(100% + 1px)', overflow: 'hidden', visibility: 'hidden', position: 'absolute'} : {maxWidth: 'calc(100% + 1px)'};
   let stylePropsFinal = orientation === 'vertical' ? styleProps : {style: collapseStyle};
 
   if (collapsed && orientation !== 'vertical') {