feat(ui-tabs): add active property to tabs

Closes: INSTUI-3876

Add support for multiple tabs->one tab panel. This makes
using React Router easier with less boilerplate code.

packages/ui-tabs/src/Tabs/Panel/index.tsx

@@ -55,7 +55,8 @@ class Panel extends Component<TabsPanelProps> {
     textAlign: 'start',
     variant: 'default',
     isSelected: false,
-    padding: 'small'
+    padding: 'small',
+    active: 'false'
   }
 
   componentDidMount() {
@@ -92,6 +93,7 @@ class Panel extends Component<TabsPanelProps> {
       isDisabled,
       isSelected,
       styles,
+      active,
       ...props
     } = this.props
     const isHidden = !isSelected || !!isDisabled

packages/ui-tabs/src/Tabs/Panel/props.ts

@@ -58,6 +58,11 @@ type TabsPanelOwnProps = {
    * provides a reference to the underlying html root element
    */
   elementRef?: (element: HTMLDivElement | null) => void
+  /**
+   * Only one `<Tabs.Panel />` can be marked as active. The marked panel's content is rendered
+   * for all the `<Tabs.Panel />`s.
+   */
+  active?: boolean
 }
 
 type PropKeys = keyof TabsPanelOwnProps
@@ -82,7 +87,8 @@ const propTypes: PropValidators<PropKeys> = {
   labelledBy: PropTypes.string,
   padding: ThemeablePropTypes.spacing,
   textAlign: PropTypes.oneOf(['start', 'center', 'end']),
-  elementRef: PropTypes.func
+  elementRef: PropTypes.func,
+  active: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -97,7 +103,8 @@ const allowedProps: AllowedPropKeys = [
   'labelledBy',
   'padding',
   'textAlign',
-  'elementRef'
+  'elementRef',
+  'active'
 ]
 
 export type { TabsPanelProps, TabsPanelStyle }

packages/ui-tabs/src/Tabs/index.tsx

@@ -430,6 +430,17 @@ 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 /*|| (activePanelCount === 1 && React.Children.toArray(children).length > 1)*/
+    ) {
+      error(false, `[Tabs] Only one Panel can be marked as active.`)
+    }
+
     const selectedChildIndex = (
       React.Children.toArray(children) as PanelChild[]
     )
@@ -447,7 +458,11 @@ 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, activePanels[0]))
+        } else {
+          panels.push(this.clonePanel(index, id, selected, child))
+        }
 
         index++
       } else {