@instructure/ui-tabs 8.46.2-snapshot-7 → 8.46.2-snapshot-9

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.46.2-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.46.1...v8.46.2-snapshot-7) (2023-10-20)
+## [8.46.2-snapshot-9](https://github.com/instructure/instructure-ui/compare/v8.46.1...v8.46.2-snapshot-9) (2023-10-24)
 
-**Note:** Version bump only for package @instructure/ui-tabs
+
+### Features
+
+* **ui-tabs:** add active property to tabs ([5037855](https://github.com/instructure/instructure-ui/commit/5037855e67b322ce07c2ca1c3113ddeb0229f003))
 
 
 

package/es/Tabs/Panel/index.js

@@ -1,5 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["labelledBy", "variant", "id", "maxHeight", "minHeight", "padding", "textAlign", "children", "elementRef", "isDisabled", "isSelected", "styles"];
+const _excluded = ["labelledBy", "variant", "id", "maxHeight", "minHeight", "padding", "textAlign", "children", "elementRef", "isDisabled", "isSelected", "styles", "active"];
 var _dec, _class, _class2;
 /*
  * The MIT License (MIT)
@@ -76,6 +76,7 @@ let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
       isDisabled = _this$props3.isDisabled,
       isSelected = _this$props3.isSelected,
       styles = _this$props3.styles,
+      active = _this$props3.active,
       props = _objectWithoutProperties(_this$props3, _excluded);
     const isHidden = !isSelected || !!isDisabled;
     return jsx("div", Object.assign({}, passthroughProps(props), {
@@ -104,7 +105,8 @@ let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
   textAlign: 'start',
   variant: 'default',
   isSelected: false,
-  padding: 'small'
+  padding: 'small',
+  active: false
 }, _class2)) || _class);
 export default Panel;
 export { Panel };

package/es/Tabs/Panel/props.js

@@ -36,7 +36,8 @@ const propTypes = {
   labelledBy: PropTypes.string,
   padding: ThemeablePropTypes.spacing,
   textAlign: PropTypes.oneOf(['start', 'center', 'end']),
-  elementRef: PropTypes.func
+  elementRef: PropTypes.func,
+  active: PropTypes.bool
 };
-const allowedProps = ['renderTitle', 'children', 'variant', 'isSelected', 'isDisabled', 'maxHeight', 'minHeight', 'id', 'labelledBy', 'padding', 'textAlign', 'elementRef'];
+const allowedProps = ['renderTitle', 'children', 'variant', 'isSelected', 'isDisabled', 'maxHeight', 'minHeight', 'id', 'labelledBy', 'padding', 'textAlign', 'elementRef', 'active'];
 export { propTypes, allowedProps };

package/es/Tabs/__new-tests__/Tabs.test.js

@@ -0,0 +1,120 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _p, _Tabs, _Tabs2, _Tabs3;
+/*
+ * 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 => {
+  const _React$useState = React.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selectedIndex = _React$useState2[0],
+    setSelectedIndex = _React$useState2[1];
+  return /*#__PURE__*/React.createElement(Tabs, {
+    onRequestTabChange: (_event, {
+      index
+    }) => {
+      setSelectedIndex(index);
+      props.onIndexChange(index);
+    },
+    variant: "default",
+    margin: "medium"
+  }, /*#__PURE__*/React.createElement(Tabs.Panel, {
+    renderTitle: "First Tab",
+    id: "first",
+    isSelected: selectedIndex === 0,
+    active: true
+  }, _p || (_p = /*#__PURE__*/React.createElement("p", null, "CONTENT"))), /*#__PURE__*/React.createElement(Tabs.Panel, {
+    renderTitle: "Second Tab",
+    id: "second",
+    isSelected: selectedIndex === 1
+  }), /*#__PURE__*/React.createElement(Tabs.Panel, {
+    renderTitle: "Third Tab",
+    id: "third",
+    isSelected: selectedIndex === 2
+  }));
+};
+describe('<Tabs />', () => {
+  it('should render the correct number of panels', () => {
+    const _render = render(_Tabs || (_Tabs = /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "First Tab"
+      }, "Tab 1 content"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "Second Tab"
+      }, "Tab 2 content"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "Third Tab",
+        isDisabled: true
+      }, "Tab 3 content")))),
+      container = _render.container;
+    expect(container.firstChild).toBeInTheDocument();
+  });
+  it('should render same content for other tabs as for the active one', () => {
+    const _render2 = render(_Tabs2 || (_Tabs2 = /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "First Tab",
+        active: true
+      }, "CONTENT"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        id: "secondTab",
+        renderTitle: "Second Tab",
+        isSelected: true
+      }, "Child"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "Third Tab"
+      }, "Child")))),
+      container = _render2.container;
+    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 _render3 = render( /*#__PURE__*/React.createElement(TabExample, {
+        onIndexChange: onIndexChange
+      })),
+      container = _render3.container;
+    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 _render4 = render(_Tabs3 || (_Tabs3 = /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "First Tab",
+        active: true
+      }, "Tab 1 content"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "Second Tab",
+        active: true
+      }, "Tab 2 content"), /*#__PURE__*/React.createElement(Tabs.Panel, {
+        renderTitle: "Third Tab",
+        isDisabled: true
+      }, "Tab 3 content")))),
+      container = _render4.container;
+    expect(container.firstChild).toBeInTheDocument();
+    expect(consoleMock.mock.calls[0][0]).toEqual('Warning: [Tabs] Only one Panel can be marked as active.');
+  });
+});

package/es/Tabs/index.js

@@ -270,22 +270,39 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
       onKeyDown: this.handleTabKeyDown
     });
   }
-  clonePanel(_index, generatedId, selected, panel) {
+  clonePanel(_index, generatedId, selected, panel, activePanel) {
     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 : void 0,
       minHeight: !hasFixedHeight ? this.props.minHeight : '100%'
-    });
+    };
+    let activePanelClone = null;
+    if (activePanel !== void 0) {
+      // cloning active panel with a proper custom key as a workaround because
+      // safeCloneElement overwrites it with the key from the original element
+      activePanelClone = /*#__PURE__*/React.cloneElement(activePanel, {
+        key: panel.props.id || `panel-${id}`
+      });
+      return safeCloneElement(activePanelClone, {
+        padding: activePanelClone.props.padding || this.props.padding,
+        textAlign: activePanelClone.props.textAlign || this.props.textAlign,
+        ...commonProps
+      });
+    } 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
+      });
+    }
   }
   focus() {
     this._focusable && typeof this._focusable.focus === 'function' && this._focusable.focus();
@@ -304,6 +321,10 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
       tabOverflow = _this$props4.tabOverflow,
       styles = _this$props4.styles,
       props = _objectWithoutProperties(_this$props4, _excluded);
+    const activePanels = React.Children.toArray(children).filter(child => matchComponentTypes(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).filter(child => matchComponentTypes(child, [Panel])).findIndex(child => child.props.isSelected && !child.props.isDisabled);
     let index = 0;
     const selectedIndex = selectedChildIndex >= 0 ? selectedChildIndex : 0;
@@ -312,7 +333,11 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
         const selected = !child.props.isDisabled && (child.props.isSelected || selectedIndex === index);
         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 {
         panels.push(child);

package/lib/Tabs/Panel/index.js

@@ -14,7 +14,7 @@ var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
-const _excluded = ["labelledBy", "variant", "id", "maxHeight", "minHeight", "padding", "textAlign", "children", "elementRef", "isDisabled", "isSelected", "styles"];
+const _excluded = ["labelledBy", "variant", "id", "maxHeight", "minHeight", "padding", "textAlign", "children", "elementRef", "isDisabled", "isSelected", "styles", "active"];
 var _dec, _class, _class2;
 /*
  * The MIT License (MIT)
@@ -81,6 +81,7 @@ let Panel = exports.Panel = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       isDisabled = _this$props3.isDisabled,
       isSelected = _this$props3.isSelected,
       styles = _this$props3.styles,
+      active = _this$props3.active,
       props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     const isHidden = !isSelected || !!isDisabled;
     return (0, _emotion.jsx)("div", Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
@@ -109,6 +110,7 @@ let Panel = exports.Panel = (_dec = (0, _emotion.withStyle)(_styles.default, _th
   textAlign: 'start',
   variant: 'default',
   isSelected: false,
-  padding: 'small'
+  padding: 'small',
+  active: false
 }, _class2)) || _class);
 var _default = exports.default = Panel;

package/lib/Tabs/Panel/props.js

@@ -43,6 +43,7 @@ const propTypes = exports.propTypes = {
   labelledBy: _propTypes.default.string,
   padding: _emotion.ThemeablePropTypes.spacing,
   textAlign: _propTypes.default.oneOf(['start', 'center', 'end']),
-  elementRef: _propTypes.default.func
+  elementRef: _propTypes.default.func,
+  active: _propTypes.default.bool
 };
-const allowedProps = exports.allowedProps = ['renderTitle', 'children', 'variant', 'isSelected', 'isDisabled', 'maxHeight', 'minHeight', 'id', 'labelledBy', 'padding', 'textAlign', 'elementRef'];
+const allowedProps = exports.allowedProps = ['renderTitle', 'children', 'variant', 'isSelected', 'isDisabled', 'maxHeight', 'minHeight', 'id', 'labelledBy', 'padding', 'textAlign', 'elementRef', 'active'];

package/lib/Tabs/__new-tests__/Tabs.test.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../index");
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _p, _Tabs, _Tabs2, _Tabs3;
+/*
+ * 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.
+ */
+const TabExample = props => {
+  const _React$useState = _react.default.useState(0),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    selectedIndex = _React$useState2[0],
+    setSelectedIndex = _React$useState2[1];
+  return /*#__PURE__*/_react.default.createElement(_index.Tabs, {
+    onRequestTabChange: (_event, {
+      index
+    }) => {
+      setSelectedIndex(index);
+      props.onIndexChange(index);
+    },
+    variant: "default",
+    margin: "medium"
+  }, /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+    renderTitle: "First Tab",
+    id: "first",
+    isSelected: selectedIndex === 0,
+    active: true
+  }, _p || (_p = /*#__PURE__*/_react.default.createElement("p", null, "CONTENT"))), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+    renderTitle: "Second Tab",
+    id: "second",
+    isSelected: selectedIndex === 1
+  }), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+    renderTitle: "Third Tab",
+    id: "third",
+    isSelected: selectedIndex === 2
+  }));
+};
+describe('<Tabs />', () => {
+  it('should render the correct number of panels', () => {
+    const _render = (0, _react2.render)(_Tabs || (_Tabs = /*#__PURE__*/_react.default.createElement(_index.Tabs, null, /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "First Tab"
+      }, "Tab 1 content"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "Second Tab"
+      }, "Tab 2 content"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "Third Tab",
+        isDisabled: true
+      }, "Tab 3 content")))),
+      container = _render.container;
+    expect(container.firstChild).toBeInTheDocument();
+  });
+  it('should render same content for other tabs as for the active one', () => {
+    const _render2 = (0, _react2.render)(_Tabs2 || (_Tabs2 = /*#__PURE__*/_react.default.createElement(_index.Tabs, null, /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "First Tab",
+        active: true
+      }, "CONTENT"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        id: "secondTab",
+        renderTitle: "Second Tab",
+        isSelected: true
+      }, "Child"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "Third Tab"
+      }, "Child")))),
+      container = _render2.container;
+    const tabContent = _react2.screen.getByText('CONTENT');
+    expect(container).toBeInTheDocument();
+    expect(tabContent).toBeInTheDocument();
+    const childContent = _react2.screen.queryByText('Child');
+    expect(childContent).toBeNull();
+  });
+  it('should render the same content in second tab when selected', () => {
+    const onIndexChange = jest.fn();
+    const _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(TabExample, {
+        onIndexChange: onIndexChange
+      })),
+      container = _render3.container;
+    expect(container).toBeInTheDocument();
+    const secondTab = _react2.screen.getAllByRole('tab')[1];
+    _react2.fireEvent.click(secondTab);
+    expect(onIndexChange).toHaveBeenCalledWith(1);
+    const panelContent = _react2.screen.queryByText('CONTENT');
+    expect(panelContent).toBeInTheDocument();
+  });
+  it('should warn if multiple active tabs exist', () => {
+    const consoleMock = jest.spyOn(console, 'error').mockImplementation();
+    const _render4 = (0, _react2.render)(_Tabs3 || (_Tabs3 = /*#__PURE__*/_react.default.createElement(_index.Tabs, null, /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "First Tab",
+        active: true
+      }, "Tab 1 content"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "Second Tab",
+        active: true
+      }, "Tab 2 content"), /*#__PURE__*/_react.default.createElement(_index.Tabs.Panel, {
+        renderTitle: "Third Tab",
+        isDisabled: true
+      }, "Tab 3 content")))),
+      container = _render4.container;
+    expect(container.firstChild).toBeInTheDocument();
+    expect(consoleMock.mock.calls[0][0]).toEqual('Warning: [Tabs] Only one Panel can be marked as active.');
+  });
+});

package/lib/Tabs/index.js

@@ -285,22 +285,39 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       onKeyDown: this.handleTabKeyDown
     });
   }
-  clonePanel(_index, generatedId, selected, panel) {
+  clonePanel(_index, generatedId, selected, panel, activePanel) {
     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 (0, _safeCloneElement.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 : void 0,
       minHeight: !hasFixedHeight ? this.props.minHeight : '100%'
-    });
+    };
+    let activePanelClone = null;
+    if (activePanel !== void 0) {
+      // cloning active panel with a proper custom key as a workaround because
+      // safeCloneElement overwrites it with the key from the original element
+      activePanelClone = /*#__PURE__*/_react.default.cloneElement(activePanel, {
+        key: panel.props.id || `panel-${id}`
+      });
+      return (0, _safeCloneElement.safeCloneElement)(activePanelClone, {
+        padding: activePanelClone.props.padding || this.props.padding,
+        textAlign: activePanelClone.props.textAlign || this.props.textAlign,
+        ...commonProps
+      });
+    } else {
+      return (0, _safeCloneElement.safeCloneElement)(panel, {
+        key: panel.props.id || `panel-${id}`,
+        padding: panel.props.padding || this.props.padding,
+        textAlign: panel.props.textAlign || this.props.textAlign,
+        ...commonProps
+      });
+    }
   }
   focus() {
     this._focusable && typeof this._focusable.focus === 'function' && this._focusable.focus();
@@ -319,6 +336,10 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       tabOverflow = _this$props4.tabOverflow,
       styles = _this$props4.styles,
       props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
+    const activePanels = _react.default.Children.toArray(children).filter(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel])).filter(child => child.props.active);
+    if (activePanels.length > 1) {
+      (0, _console.logError)(false, `[Tabs] Only one Panel can be marked as active.`);
+    }
     const selectedChildIndex = _react.default.Children.toArray(children).filter(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel])).findIndex(child => child.props.isSelected && !child.props.isDisabled);
     let index = 0;
     const selectedIndex = selectedChildIndex >= 0 ? selectedChildIndex : 0;
@@ -327,7 +348,11 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
         const selected = !child.props.isDisabled && (child.props.isSelected || selectedIndex === index);
         const id = (0, _uid.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 {
         panels.push(child);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tabs",
-  "version": "8.46.2-snapshot-7",
+  "version": "8.46.2-snapshot-9",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,28 +23,30 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.46.2-snapshot-7",
-    "@instructure/ui-color-utils": "8.46.2-snapshot-7",
-    "@instructure/ui-test-locator": "8.46.2-snapshot-7",
-    "@instructure/ui-test-utils": "8.46.2-snapshot-7",
-    "@instructure/ui-themes": "8.46.2-snapshot-7"
+    "@instructure/ui-babel-preset": "8.46.2-snapshot-9",
+    "@instructure/ui-color-utils": "8.46.2-snapshot-9",
+    "@instructure/ui-test-locator": "8.46.2-snapshot-9",
+    "@instructure/ui-test-utils": "8.46.2-snapshot-9",
+    "@instructure/ui-themes": "8.46.2-snapshot-9",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/console": "8.46.2-snapshot-7",
-    "@instructure/debounce": "8.46.2-snapshot-7",
-    "@instructure/emotion": "8.46.2-snapshot-7",
-    "@instructure/shared-types": "8.46.2-snapshot-7",
-    "@instructure/ui-dom-utils": "8.46.2-snapshot-7",
-    "@instructure/ui-focusable": "8.46.2-snapshot-7",
-    "@instructure/ui-i18n": "8.46.2-snapshot-7",
-    "@instructure/ui-motion": "8.46.2-snapshot-7",
-    "@instructure/ui-prop-types": "8.46.2-snapshot-7",
-    "@instructure/ui-react-utils": "8.46.2-snapshot-7",
-    "@instructure/ui-testable": "8.46.2-snapshot-7",
-    "@instructure/ui-utils": "8.46.2-snapshot-7",
-    "@instructure/ui-view": "8.46.2-snapshot-7",
-    "@instructure/uid": "8.46.2-snapshot-7",
+    "@instructure/console": "8.46.2-snapshot-9",
+    "@instructure/debounce": "8.46.2-snapshot-9",
+    "@instructure/emotion": "8.46.2-snapshot-9",
+    "@instructure/shared-types": "8.46.2-snapshot-9",
+    "@instructure/ui-dom-utils": "8.46.2-snapshot-9",
+    "@instructure/ui-focusable": "8.46.2-snapshot-9",
+    "@instructure/ui-i18n": "8.46.2-snapshot-9",
+    "@instructure/ui-motion": "8.46.2-snapshot-9",
+    "@instructure/ui-prop-types": "8.46.2-snapshot-9",
+    "@instructure/ui-react-utils": "8.46.2-snapshot-9",
+    "@instructure/ui-testable": "8.46.2-snapshot-9",
+    "@instructure/ui-utils": "8.46.2-snapshot-9",
+    "@instructure/ui-view": "8.46.2-snapshot-9",
+    "@instructure/uid": "8.46.2-snapshot-9",
     "keycode": "^2.2.1",
     "prop-types": "^15.8.1"
   },

package/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

package/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 }

package/src/Tabs/README.md

@@ -256,6 +256,77 @@ class Example extends React.Component {
 render(<Example />)
 ```
 
+### Support for dynamic content with active panel
+
+Marking one of the `<Tabs.Panel>` as `active` will render that panel's content in all the panels. This is useful for dynamic content rendering: the panel area can be used as a container, what routing libraries, such as React Router, can use to render their children elements into.
+
+```js
+---
+example: true
+render: false
+---
+class Outlet extends React.Component {
+    state = {
+      show: false
+    }
+
+    componentDidMount() {
+      setTimeout(() => this.setState({ show: true }), 2000)
+    }
+
+    render() {
+      return (
+        <div>
+          <Heading level='h1' as='h1' margin='0 0 x-small'>
+            {this.state.show ? 'Hello Developer' : 'Simulating network call...'}
+          </Heading>
+          {this.state.show ? lorem.paragraphs() : <Spinner renderTitle='Loading' size='medium' />
+          }
+        </div>
+      )
+    }
+  }
+
+
+class Example extends React.Component {
+  state = {
+    selectedIndex: 0
+  }
+  handleTabChange = (event, { index, id }) => {
+    this.setState({
+      selectedIndex: index
+    })
+  }
+
+  render() {
+    const { selectedIndex } = this.state
+    return (
+      <Tabs
+        margin='large auto'
+        padding='medium'
+        onRequestTabChange={this.handleTabChange}
+      >
+        <Tabs.Panel
+          id='tabA'
+          renderTitle='Tab A'
+          textAlign='center'
+          padding='large'
+          isSelected={selectedIndex === 0}
+          active
+        >
+          <Outlet />
+        </Tabs.Panel>
+        <Tabs.Panel id='tabB' renderTitle='Disabled Tab' isDisabled />
+        <Tabs.Panel id='tabC' renderTitle='Tab C' isSelected={selectedIndex === 2} />
+        <Tabs.Panel id='tabD' renderTitle='Tab D' isSelected={selectedIndex === 3} />
+      </Tabs>
+    )
+  }
+}
+
+render(<Example />)
+```
+
 ### Guidelines
 
 ```js