fix(ui-tabs): fix tabs panel layout when unmountOnExit is false

INSTUI-4994

Author: ToMESSKa

cypress/component/Tabs.cy.tsx

@@ -112,6 +112,26 @@ describe('<Tabs/>', () => {
     cy.wrap(onChange).its('lastCall.args[1].index').should('equal', 1)
   })
 
+  it('should keep non-selected panel hidden when unmountOnExit is false', () => {
+    cy.mount(
+      <Tabs>
+        <Tabs.Panel renderTitle="First Tab" unmountOnExit={false}>
+          Tab 1 content
+        </Tabs.Panel>
+        <Tabs.Panel renderTitle="Second Tab">Tab 2 content</Tabs.Panel>
+      </Tabs>
+    )
+
+    cy.get('[role="tabpanel"]').should('have.length', 2)
+
+    cy.get('[role="tabpanel"]').eq(0).should('not.have.css', 'display', 'none')
+    cy.get('[role="tabpanel"]').eq(1).should('have.css', 'display', 'none')
+
+    cy.contains('[role="tab"]', 'Second Tab').click()
+    cy.get('[role="tabpanel"]').eq(1).should('not.have.css', 'display', 'none')
+    cy.get('[role="tabpanel"]').eq(0).should('have.css', 'display', 'none')
+  })
+
   it('should render a fade-out gradient when tabOverflow set to scroll and Tabs overflow', async () => {
     const Example = ({ width }: { width: string }) => (
       <div style={{ width }}>

packages/ui-tabs/src/Tabs/v2/Panel/styles.ts

@@ -28,7 +28,6 @@ import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
 type StyleParams = {
   maxHeight: TabsPanelProps['maxHeight']
   isSelected: TabsPanelProps['isSelected']
-  isHidden: boolean
 }
 
 /**
@@ -43,9 +42,11 @@ type StyleParams = {
 const generateStyle = (
   componentTheme: ReturnType<NewComponentTypes['TabsPanel']>,
   params: StyleParams,
-  sharedTokens: SharedTokens
+  sharedTokens: SharedTokens,
+  state: { isHidden: boolean }
 ): TabsPanelStyle => {
-  const { maxHeight, isSelected, isHidden } = params
+  const { maxHeight, isSelected } = params
+  const { isHidden } = state
 
   return {
     panel: {