@instructure/ui-tabs 8.46.2-snapshot-6 → 8.46.2-snapshot-8

package/src/Tabs/__new-tests__/Tabs.test.tsx

@@ -0,0 +1,128 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+
+import { Tabs } from '../index'
+import { fireEvent, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+const TabExample = (props: { onIndexChange: (arg: number) => void }) => {
+  const [selectedIndex, setSelectedIndex] = React.useState(0)
+  return (
+    <Tabs
+      onRequestTabChange={(_event, { index }) => {
+        setSelectedIndex(index)
+        props.onIndexChange(index)
+      }}
+      variant="default"
+      margin="medium"
+    >
+      <Tabs.Panel renderTitle="First Tab" id="first" isSelected={selectedIndex === 0} active>
+        <p>CONTENT</p>
+      </Tabs.Panel>
+      <Tabs.Panel renderTitle="Second Tab" id="second" isSelected={selectedIndex === 1} />
+      <Tabs.Panel renderTitle="Third Tab" id="third" isSelected={selectedIndex === 2} />
+    </Tabs>
+  )
+}
+
+describe('<Tabs />', () => {
+  it('should render the correct number of panels', () => {
+    const { container } = render(
+      <Tabs>
+        <Tabs.Panel renderTitle="First Tab">Tab 1 content</Tabs.Panel>
+        <Tabs.Panel renderTitle="Second Tab">Tab 2 content</Tabs.Panel>
+        <Tabs.Panel renderTitle="Third Tab" isDisabled>
+          Tab 3 content
+        </Tabs.Panel>
+      </Tabs>
+    )
+
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('should render same content for other tabs as for the active one', () => {
+    const { container } = render(
+      <Tabs>
+        <Tabs.Panel renderTitle="First Tab" active>
+          CONTENT
+        </Tabs.Panel>
+        <Tabs.Panel id="secondTab" renderTitle="Second Tab" isSelected>
+          Child
+        </Tabs.Panel>
+        <Tabs.Panel renderTitle="Third Tab">Child</Tabs.Panel>
+      </Tabs>
+    )
+
+    const tabContent = screen.getByText('CONTENT')
+
+    expect(container).toBeInTheDocument()
+    expect(tabContent).toBeInTheDocument()
+
+    const childContent = screen.queryByText('Child')
+
+    expect(childContent).toBeNull()
+  })
+
+  it('should render the same content in second tab when selected', () => {
+    const onIndexChange = jest.fn()
+
+    const { container } = render(<TabExample onIndexChange={onIndexChange} />)
+    expect(container).toBeInTheDocument()
+
+    const secondTab = screen.getAllByRole('tab')[1]
+
+    fireEvent.click(secondTab)
+
+    expect(onIndexChange).toHaveBeenCalledWith(1)
+
+    const panelContent = screen.queryByText('CONTENT')
+
+    expect(panelContent).toBeInTheDocument()
+  })
+
+  it('should warn if multiple active tabs exist', () => {
+    const consoleMock = jest.spyOn(console, 'error').mockImplementation()
+    const { container } = render(
+      <Tabs>
+        <Tabs.Panel renderTitle="First Tab" active>
+          Tab 1 content
+        </Tabs.Panel>
+        <Tabs.Panel renderTitle="Second Tab" active>
+          Tab 2 content
+        </Tabs.Panel>
+        <Tabs.Panel renderTitle="Third Tab" isDisabled>
+          Tab 3 content
+        </Tabs.Panel>
+      </Tabs>
+    )
+
+    expect(container.firstChild).toBeInTheDocument()
+
+    expect(consoleMock.mock.calls[0][0]).toEqual(
+      'Warning: [Tabs] Only one Panel can be marked as active.'
+    )
+  })
+})

package/src/Tabs/index.tsx

@@ -27,7 +27,8 @@ import React, {
   Component,
   ComponentClass,
   ComponentElement,
-  createElement
+  createElement,
+  ReactElement
 } from 'react'
 
 import keycode from 'keycode'
@@ -359,24 +360,44 @@ class Tabs extends Component<TabsProps, TabsState> {
     _index: number,
     generatedId: string,
     selected: boolean,
-    panel: PanelChild
+    panel: PanelChild,
+    activePanel?: PanelChild
   ) {
     const id = panel.props.id || generatedId
 
     // fixHeight can be 0, so simply `fixheight` could return falsy value
     const hasFixedHeight = typeof this.props.fixHeight !== 'undefined'
 
-    return safeCloneElement(panel, {
+    const commonProps = {
       id: panel.props.id || `panel-${id}`,
       labelledBy: `tab-${id}`,
       isSelected: selected,
-      key: panel.props.id || `panel-${id}`,
       variant: this.props.variant,
-      padding: panel.props.padding || this.props.padding,
-      textAlign: panel.props.textAlign || this.props.textAlign,
       maxHeight: !hasFixedHeight ? this.props.maxHeight : undefined,
       minHeight: !hasFixedHeight ? this.props.minHeight : '100%'
-    } as TabsPanelProps & { key: string }) as PanelChild
+    }
+
+    let activePanelClone = null
+    if (activePanel !== undefined) {
+      // cloning active panel with a proper custom key as a workaround because
+      // safeCloneElement overwrites it with the key from the original element
+      activePanelClone = React.cloneElement(activePanel as ReactElement, {
+        key: panel.props.id || `panel-${id}`
+      })
+
+      return safeCloneElement(activePanelClone, {
+        padding: activePanelClone.props.padding || this.props.padding,
+        textAlign: activePanelClone.props.textAlign || this.props.textAlign,
+        ...commonProps
+      } as TabsPanelProps & { key: string }) as PanelChild
+    } else {
+      return safeCloneElement(panel, {
+        key: panel.props.id || `panel-${id}`,
+        padding: panel.props.padding || this.props.padding,
+        textAlign: panel.props.textAlign || this.props.textAlign,
+        ...commonProps
+      } as TabsPanelProps & { key: string }) as PanelChild
+    }
   }
 
   handleFocusableRef = (el: Focusable | null) => {
@@ -430,6 +451,14 @@ class Tabs extends Component<TabsProps, TabsState> {
       ...props
     } = this.props
 
+    const activePanels = (React.Children.toArray(children) as PanelChild[])
+      .filter((child) => matchComponentTypes<PanelChild>(child, [Panel]))
+      .filter((child) => child.props.active)
+
+    if (activePanels.length > 1) {
+      error(false, `[Tabs] Only one Panel can be marked as active.`)
+    }
+
     const selectedChildIndex = (
       React.Children.toArray(children) as PanelChild[]
     )
@@ -447,7 +476,13 @@ class Tabs extends Component<TabsProps, TabsState> {
         const id = uid()
 
         tabs.push(this.createTab(index, id, selected, child))
-        panels.push(this.clonePanel(index, id, selected, child))
+        if (activePanels.length === 1) {
+          panels.push(
+            this.clonePanel(index, id, selected, child, activePanels[0])
+          )
+        } else {
+          panels.push(this.clonePanel(index, id, selected, child))
+        }
 
         index++
       } else {