@instructure/ui-tabs 11.6.0 → 11.6.1-snapshot-129

package/lib/Tabs/v1/Panel/index.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Panel = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _v11_ = require("@instructure/ui-view/v11_6");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _Transition = require("@instructure/ui-motion/lib/Transition");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+const _excluded = ["labelledBy", "variant", "id", "maxHeight", "minHeight", "padding", "textAlign", "children", "elementRef", "isDisabled", "isSelected", "styles", "active", "unmountOnExit", "tabIndex"];
+var _dec, _class, _Panel;
+/*
+ * 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.
+ */
+/**
+---
+parent: Tabs
+id: Tabs.Panel
+---
+**/
+let Panel = exports.Panel = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_Panel = class Panel extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, {
+      isHidden: this.isHidden
+    });
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, {
+      isHidden: this.isHidden
+    });
+  }
+  get isHidden() {
+    const _this$props3 = this.props,
+      isDisabled = _this$props3.isDisabled,
+      isSelected = _this$props3.isSelected;
+    return !isSelected || !!isDisabled;
+  }
+  render() {
+    const _this$props4 = this.props,
+      labelledBy = _this$props4.labelledBy,
+      variant = _this$props4.variant,
+      id = _this$props4.id,
+      maxHeight = _this$props4.maxHeight,
+      minHeight = _this$props4.minHeight,
+      padding = _this$props4.padding,
+      textAlign = _this$props4.textAlign,
+      children = _this$props4.children,
+      elementRef = _this$props4.elementRef,
+      isDisabled = _this$props4.isDisabled,
+      isSelected = _this$props4.isSelected,
+      styles = _this$props4.styles,
+      active = _this$props4.active,
+      unmountOnExit = _this$props4.unmountOnExit,
+      tabIndex = _this$props4.tabIndex,
+      props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
+    return (0, _jsxRuntime.jsx)("div", {
+      ...(0, _passthroughProps.passthroughProps)(props),
+      css: styles === null || styles === void 0 ? void 0 : styles.panel,
+      role: "tabpanel",
+      id: id,
+      "aria-labelledby": labelledBy,
+      "aria-hidden": this.isHidden ? 'true' : void 0,
+      tabIndex: this.isHidden ? void 0 : tabIndex,
+      ref: this.handleRef,
+      children: (0, _jsxRuntime.jsx)(_Transition.Transition, {
+        type: "fade",
+        in: !this.isHidden,
+        unmountOnExit: unmountOnExit,
+        transitionExit: false,
+        children: (0, _jsxRuntime.jsx)(_v11_.View, {
+          css: styles === null || styles === void 0 ? void 0 : styles.content,
+          maxHeight: maxHeight,
+          minHeight: minHeight,
+          as: "div",
+          padding: padding,
+          textAlign: textAlign,
+          children: children
+        })
+      })
+    });
+  }
+}, _Panel.displayName = "Panel", _Panel.componentId = 'Tabs.Panel', _Panel.allowedProps = _props.allowedProps, _Panel.defaultProps = {
+  isDisabled: false,
+  textAlign: 'start',
+  variant: 'default',
+  isSelected: false,
+  padding: 'small',
+  active: false,
+  unmountOnExit: true
+}, _Panel)) || _class);
+var _default = exports.default = Panel;

package/lib/Tabs/v1/Tab/index.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Tab = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
+var _v11_ = require("@instructure/ui-view/v11_6");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+const _excluded = ["id", "variant", "isSelected", "isDisabled", "controls", "children", "styles"];
+var _dec, _class, _Tab;
+/*
+ * 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.
+ */
+/**
+---
+parent: Tabs
+id: Tabs.Tab
+---
+**/
+let Tab = exports.Tab = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_Tab = class Tab extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.handleClick = event => {
+      const _this$props = this.props,
+        onClick = _this$props.onClick,
+        index = _this$props.index,
+        id = _this$props.id,
+        isDisabled = _this$props.isDisabled;
+      if (isDisabled) {
+        return;
+      }
+      if (typeof onClick === 'function') {
+        onClick(event, {
+          index,
+          id
+        });
+      }
+    };
+    this.handleKeyDown = event => {
+      const _this$props2 = this.props,
+        onKeyDown = _this$props2.onKeyDown,
+        index = _this$props2.index,
+        id = _this$props2.id,
+        isDisabled = _this$props2.isDisabled;
+      if (isDisabled) {
+        return;
+      }
+      if (typeof onKeyDown === 'function') {
+        onKeyDown(event, {
+          index,
+          id
+        });
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props3;
+    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props4;
+    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
+  }
+  render() {
+    const _this$props5 = this.props,
+      id = _this$props5.id,
+      variant = _this$props5.variant,
+      isSelected = _this$props5.isSelected,
+      isDisabled = _this$props5.isDisabled,
+      controls = _this$props5.controls,
+      children = _this$props5.children,
+      styles = _this$props5.styles,
+      props = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
+    return (0, _jsxRuntime.jsx)(_v11_.View, {
+      ...(0, _passthroughProps.passthroughProps)(props),
+      as: "div",
+      role: "tab",
+      id: id,
+      onClick: this.handleClick,
+      onKeyDown: this.handleKeyDown,
+      css: styles === null || styles === void 0 ? void 0 : styles.tab,
+      "aria-selected": isSelected ? 'true' : void 0,
+      "aria-disabled": isDisabled ? 'true' : void 0,
+      "aria-controls": controls,
+      tabIndex: isSelected && !isDisabled ? 0 : void 0,
+      position: "relative",
+      focusPosition: "inset",
+      children: (0, _callRenderProp.callRenderProp)(children)
+    });
+  }
+}, _Tab.displayName = "Tab", _Tab.componentId = 'Tabs.Tab', _Tab.allowedProps = _props.allowedProps, _Tab.defaultProps = {
+  variant: 'default',
+  isDisabled: false,
+  isSelected: false
+}, _Tab)) || _class);
+var _default = exports.default = Tab;

package/lib/Tabs/v1/index.js

@@ -0,0 +1,410 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Panel", {
+  enumerable: true,
+  get: function () {
+    return _Panel.Panel;
+  }
+});
+exports.default = exports.Tabs = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _keycode = _interopRequireDefault(require("keycode"));
+var _v11_ = require("@instructure/ui-view/v11_6");
+var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
+var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _console = require("@instructure/console");
+var _uid = require("@instructure/uid");
+var _Focusable = require("@instructure/ui-focusable/lib/Focusable");
+var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
+var _debounce = require("@instructure/debounce");
+var _px = require("@instructure/ui-utils/lib/px.js");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _Tab = require("./Tab");
+var _Panel = require("./Panel");
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+const _excluded = ["children", "elementRef", "maxWidth", "variant", "margin", "screenReaderLabel", "onRequestTabChange", "tabOverflow", "styles"];
+var _dec, _class, _Tabs;
+/*
+ * 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.
+ */
+/**
+---
+category: components
+---
+**/
+let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_Tabs = class Tabs extends _react.Component {
+  constructor(props) {
+    super(props);
+    this._tabList = null;
+    this._focusable = null;
+    this._tabListPosition = void 0;
+    this._debounced = void 0;
+    this._resizeListener = void 0;
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+    this.handleTabClick = (event, {
+      index
+    }) => {
+      const nextTab = this.getNextTab(index, 0);
+      this.fireOnChange(event, nextTab);
+    };
+    this.handleTabKeyDown = (event, {
+      index
+    }) => {
+      let nextTab;
+      if (event.keyCode === _keycode.default.codes.up || event.keyCode === _keycode.default.codes.left) {
+        // Select next tab to the left
+        nextTab = this.getNextTab(index, -1);
+      } else if (event.keyCode === _keycode.default.codes.down || event.keyCode === _keycode.default.codes.right) {
+        // Select next tab to the right
+        nextTab = this.getNextTab(index, 1);
+      }
+      if (nextTab) {
+        event.preventDefault();
+        this.fireOnChange(event, nextTab);
+      }
+    };
+    this.handleResize = () => {
+      this.setState({
+        withTabListOverflow: this._tabList.scrollWidth > this._tabList.offsetWidth
+      });
+      this._tabListPosition = (0, _getBoundingClientRect.getBoundingClientRect)(this._tabList);
+    };
+    this.handleFocusableRef = el => {
+      this._focusable = el;
+    };
+    this.handleTabListRef = el => {
+      this._tabList = el;
+    };
+    this.handleScroll = event => {
+      if (this.props.tabOverflow !== 'scroll' || !this.state.withTabListOverflow) {
+        event.preventDefault();
+        return;
+      }
+      const tabList = event.currentTarget;
+      const scrollLeftMax = Math.round(tabList.scrollWidth - (0, _getBoundingClientRect.getBoundingClientRect)(tabList).width);
+      const scrollLeft = Math.floor(Math.abs(tabList.scrollLeft));
+      this.setState({
+        showStartOverLay: scrollLeft > 0,
+        showEndOverLay: scrollLeft < scrollLeftMax
+      });
+    };
+    this.state = {
+      withTabListOverflow: false,
+      showStartOverLay: false,
+      showEndOverLay: false
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    if (this.props.tabOverflow === 'scroll' && this._tabList) {
+      this.startScrollOverflow();
+    }
+    if (this.props.shouldFocusOnRender) {
+      this.focus();
+    }
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    var _this$props$makeStyle2, _this$props2;
+    if (this.props.shouldFocusOnRender && !prevProps.shouldFocusOnRender) {
+      this.focus();
+    }
+
+    // start event listeners for scroll overflow
+    if (prevProps.tabOverflow === 'stack' && this.props.tabOverflow === 'scroll') {
+      this.startScrollOverflow();
+    }
+
+    // cancel event listeners for scroll overflow
+    if (prevProps.tabOverflow === 'scroll' && this.props.tabOverflow === 'stack') {
+      this.cancelScrollOverflow();
+    }
+
+    // we need to recalculate the scroll overflow if the style changes
+    if (this.props.tabOverflow === 'scroll' && prevProps.styles !== this.props.styles) {
+      this.handleResize();
+    }
+
+    // when tabList is set as overflown,
+    // make sure active tab is always visible
+    if (this.props.tabOverflow === 'scroll' && this._tabList && !prevState.withTabListOverflow && this.state.withTabListOverflow) {
+      const activeTabEl = this._tabList.querySelector('[aria-selected="true"]');
+      this.showActiveTabIfOverlayed(activeTabEl);
+    }
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  componentWillUnmount() {
+    this.cancelScrollOverflow();
+  }
+  startScrollOverflow() {
+    this.handleResize();
+    this._debounced = (0, _debounce.debounce)(this.handleResize, 300, {
+      leading: true,
+      trailing: true
+    });
+    this._tabListPosition = (0, _getBoundingClientRect.getBoundingClientRect)(this._tabList);
+    this._resizeListener = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const newWidth = entry.contentRect.width;
+        if (this._tabListPosition.width !== newWidth) {
+          var _this$_debounced;
+          (_this$_debounced = this._debounced) === null || _this$_debounced === void 0 ? void 0 : _this$_debounced.call(this);
+        }
+      }
+    });
+    this._resizeListener.observe(this._tabList);
+  }
+  cancelScrollOverflow() {
+    if (this._resizeListener) {
+      this._resizeListener.disconnect();
+    }
+    if (this._debounced) {
+      this._debounced.cancel();
+    }
+  }
+  getOverlayWidth() {
+    const _this$props3 = this.props,
+      variant = _this$props3.variant,
+      tabOverflow = _this$props3.tabOverflow,
+      styles = _this$props3.styles;
+    if (styles && tabOverflow === 'scroll') {
+      if (variant === 'default') {
+        return (0, _px.px)(styles === null || styles === void 0 ? void 0 : styles.scrollOverlayWidthDefault);
+      } else {
+        return (0, _px.px)(styles === null || styles === void 0 ? void 0 : styles.scrollOverlayWidthSecondary);
+      }
+    }
+    return 0;
+  }
+  showActiveTabIfOverlayed(activeTabEl) {
+    if (this._tabList && this._tabListPosition && typeof this._tabList.scrollTo === 'function' // test for scrollTo support
+    ) {
+      const tabPosition = (0, _getBoundingClientRect.getBoundingClientRect)(activeTabEl);
+      const tabListPosition = this._tabListPosition;
+      const tabListBoundStart = tabListPosition.left + this.getOverlayWidth();
+      const tabListBoundEnd = tabListPosition.right + this.getOverlayWidth();
+      const tabPositionStart = tabPosition.left;
+      const tabPositionEnd = tabPosition.right;
+      if (tabListBoundEnd > tabPositionEnd) {
+        const offset = Math.round(tabListBoundEnd - tabPositionEnd);
+        this._tabList.scrollTo({
+          top: 0,
+          left: this._tabList.scrollLeft + offset,
+          behavior: 'smooth'
+        });
+      } else if (tabListBoundStart > tabPositionStart) {
+        const offset = Math.round(tabListBoundStart - tabPositionStart);
+        this._tabList.scrollTo({
+          top: 0,
+          left: this._tabList.scrollLeft - offset,
+          behavior: 'smooth'
+        });
+      }
+    }
+  }
+  getNextTab(startIndex, step) {
+    const tabs = _react.Children.toArray(this.props.children).map(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel]) && child);
+    const count = tabs.length;
+    const change = step < 0 ? step + count : step;
+    (0, _console.logError)(startIndex >= 0 && startIndex < count, `[Tabs] Invalid tab index: '${startIndex}'.`);
+    let nextIndex = startIndex;
+    let nextTab;
+    do {
+      nextIndex = (nextIndex + change) % count;
+      nextTab = tabs[nextIndex];
+    } while (nextTab && nextTab.props && nextTab.props.isDisabled);
+    (0, _console.logError)(nextIndex >= 0 && nextIndex < count, `[Tabs] Invalid tab index: '${nextIndex}'.`);
+    return {
+      index: nextIndex,
+      id: nextTab.props.id
+    };
+  }
+  fireOnChange(event, {
+    index,
+    id
+  }) {
+    if (typeof this.props.onRequestTabChange === 'function') {
+      this.props.onRequestTabChange(event, {
+        index,
+        id
+      });
+    }
+
+    // this is needed because keypress cancels scrolling. So we have to trigger the scrolling
+    // one "tick" later than the keypress
+    setTimeout(() => {
+      if (this.state.withTabListOverflow) {
+        const tab = id ? this._tabList.querySelector(`#tab-${CSS.escape(id)}`) : null;
+        this.showActiveTabIfOverlayed(tab);
+      }
+    }, 0);
+  }
+  createTab(index, generatedId, selected, panel) {
+    const id = panel.props.id || generatedId;
+    return (0, _jsxRuntime.jsx)(_Tab.Tab, {
+      variant: this.props.variant,
+      id: `tab-${id}`,
+      controls: panel.props.id || `panel-${id}`,
+      index: index,
+      isSelected: selected,
+      isDisabled: panel.props.isDisabled,
+      onClick: this.handleTabClick,
+      onKeyDown: this.handleTabKeyDown,
+      isOverflowScroll: this.props.tabOverflow === 'scroll',
+      children: panel.props.renderTitle
+    }, `tab-${index}`);
+  }
+  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';
+    const commonProps = {
+      id: panel.props.id || `panel-${id}`,
+      labelledBy: `tab-${id}`,
+      isSelected: selected,
+      variant: this.props.variant,
+      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__*/(0, _react.cloneElement)(activePanel, {
+        key: `panel-${index}`
+      });
+      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-${index}`,
+        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();
+  }
+  render() {
+    const panels = [];
+    const tabs = [];
+    const _this$props4 = this.props,
+      children = _this$props4.children,
+      elementRef = _this$props4.elementRef,
+      maxWidth = _this$props4.maxWidth,
+      variant = _this$props4.variant,
+      margin = _this$props4.margin,
+      screenReaderLabel = _this$props4.screenReaderLabel,
+      onRequestTabChange = _this$props4.onRequestTabChange,
+      tabOverflow = _this$props4.tabOverflow,
+      styles = _this$props4.styles,
+      props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
+    const activePanels = _react.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.Children.toArray(children).filter(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel])).findIndex(child => child.props.isSelected && !child.props.isDisabled);
+    const selectedIndex = selectedChildIndex >= 0 ? selectedChildIndex : 0;
+    _react.Children.toArray(children).map((child, index) => {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel])) {
+        const selected = !child.props.isDisabled && (child.props.isSelected || selectedIndex === index);
+        const id = (0, _uid.uid)();
+        tabs.push(this.createTab(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));
+        }
+      } else {
+        panels.push(child);
+      }
+    });
+    const withScrollFade = tabOverflow === 'scroll' && this.state.withTabListOverflow;
+
+    // suppress overlay whenever final Tab is active, or Firefox will cover it
+    const startScrollOverlay = this.state.showStartOverLay ? (0, _jsxRuntime.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.startScrollOverlay
+    }, "start-overlay") : null;
+    const endScrollOverlay = this.state.showEndOverLay ? (0, _jsxRuntime.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.endScrollOverlay
+    }, "end-overlay") : null;
+    return (0, _jsxRuntime.jsxs)(_v11_.View, {
+      ...(0, _passthroughProps.passthroughProps)(props),
+      elementRef: this.handleRef,
+      maxWidth: maxWidth,
+      margin: margin,
+      as: "div",
+      css: styles === null || styles === void 0 ? void 0 : styles.container,
+      "data-cid": "Tabs",
+      children: [(0, _jsxRuntime.jsx)(_Focusable.Focusable, {
+        ref: this.handleFocusableRef,
+        children: () => (0, _jsxRuntime.jsx)(_v11_.View, {
+          as: "div",
+          position: "relative",
+          borderRadius: "medium",
+          shouldAnimateFocus: false,
+          css: styles === null || styles === void 0 ? void 0 : styles.tabs,
+          children: (0, _jsxRuntime.jsxs)(_v11_.View, {
+            as: "div",
+            role: "tablist",
+            css: styles === null || styles === void 0 ? void 0 : styles.tabList,
+            "aria-label": screenReaderLabel,
+            elementRef: this.handleTabListRef,
+            onScroll: this.handleScroll,
+            children: [tabs, withScrollFade && startScrollOverlay, withScrollFade && endScrollOverlay]
+          })
+        })
+      }), (0, _jsxRuntime.jsx)("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.panelsContainer,
+        children: panels
+      })]
+    });
+  }
+}, _Tabs.displayName = "Tabs", _Tabs.componentId = 'Tabs', _Tabs.allowedProps = _props.allowedProps, _Tabs.defaultProps = {
+  variant: 'default',
+  shouldFocusOnRender: false,
+  tabOverflow: 'stack'
+}, _Tabs.Panel = _Panel.Panel, _Tabs.Tab = _Tab.Tab, _Tabs)) || _class);
+var _default = exports.default = Tabs;