@elliemae/ds-tabs 2.0.0-alpha.9 → 2.0.0-next.12

package/cjs/Carousel.js

@@ -1,9 +1,14 @@
 'use strict';
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
-var ChevronRight = require('@elliemae/ds-icons/ChevronRight');
-var ChevronLeft = require('@elliemae/ds-icons/ChevronLeft');
+var dsIcons = require('@elliemae/ds-icons');
 var styled = require('styled-components');
 var DSButton = require('@elliemae/ds-button');
 var useResize = require('./useResize.js');
@@ -13,16 +18,17 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var ChevronRight__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRight);
-var ChevronLeft__default = /*#__PURE__*/_interopDefaultLegacy(ChevronLeft);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
 const CarouselBtn = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
   componentId: "sc-1317h31-0"
-})(["position:absolute;z-index:1;margin:0;&:focus{& span{background-color:", ";background-size:90%;border-radius:2px;border-color:transparent;}}&&{width:16px;height:calc(100% - 2px);@media (min-width:", "){height:calc(100% - 4px);&:focus{& span{background-color:unset;}}}}", " && .em-ds-icon{height:16px;width:16px;}"], props => props.theme.colors.brand[200], ({
-  theme
-}) => theme.breakpoints.medium, props => props.right ? 'right: 0;' : 'left: 0;');
+})(["position:absolute;z-index:1;margin:0;&:focus{& span{background-color:", ";background-size:90%;border-radius:2px;border-color:transparent;}}&&{width:16px;height:calc(100% - 2px);@media (min-width:", "){height:calc(100% - 4px);&:focus{& span{background-color:unset;}}}}", " && .em-ds-icon{height:16px;width:16px;}"], props => props.theme.colors.brand[200], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.breakpoints.medium;
+}, props => props.right ? 'right: 0;' : 'left: 0;');
 const CarouselWrapper = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-1317h31-1"
 })(["position:relative;padding:0 16px;width:100%;"]);
@@ -40,10 +46,11 @@ function isVisibleElement(el, container) {
   return isVisible;
 }
 
-const Carousel = ({
-  children,
-  onScroll
-}) => {
+const Carousel = _ref2 => {
+  let {
+    children,
+    onScroll
+  } = _ref2;
   const itemsRef = React.useRef([]);
   const wrapRef = React.useRef(null);
   const leftRef = React.useRef(null);
@@ -120,7 +127,8 @@ const Carousel = ({
     onScroll(e);
   };
 
-  const handleClick = (e, onClick = () => {}) => {
+  const handleClick = function (e) {
+    let onClick = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
     const tabListDomEl = wrapRef.current;
     const el = e.target;
     const rect = el.getBoundingClientRect();
@@ -151,7 +159,7 @@ const Carousel = ({
     buttonType: "link",
     innerRef: leftRef,
     size: "s",
-    icon: /*#__PURE__*/_jsx__default["default"](ChevronLeft__default["default"], {
+    icon: /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronLeft, {
       size: "s",
       color: ['brand-primary', '600']
     }),
@@ -163,7 +171,7 @@ const Carousel = ({
     right: true,
     size: "s",
     buttonType: "link",
-    icon: /*#__PURE__*/_jsx__default["default"](ChevronRight__default["default"], {
+    icon: /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronRight, {
       size: "s",
       color: ['brand-primary', '600']
     }),

package/cjs/DSTab.js

@@ -10,16 +10,19 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const DSTab = ({
-  tabId = '',
-  title = '',
-  required = false
-}) => /*#__PURE__*/_jsx__default["default"]("div", {
-  "aria-labelledby": `${tabId}-label`,
-  tabId: tabId,
-  title: title,
-  required: required
-});
+const DSTab = _ref => {
+  let {
+    tabId = '',
+    title = '',
+    required = false
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    "aria-labelledby": "".concat(tabId, "-label"),
+    tabId: tabId,
+    title: title,
+    required: required
+  });
+};
 
 DSTab.displayName = 'DSTab';
 const props = {

package/cjs/DSTabs.js

@@ -13,44 +13,47 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const DSTabs = ({
-  containerProps = {},
-  innerRef,
-  animated = true,
-  enableMouseEvents = false,
-  allowTextSelection = false,
-  onTabChange = () => null,
-  tabsListAriaLabel = 'Tab list',
-  type = TabTypes.TabTypes.NORMAL,
-  tabBarExtraContent = undefined,
-  children: tabs,
-  onlyRenderActiveTab = false,
-  activeTab,
-  withCarousel = false,
-  firstSubtabRef,
-  lastTabRef,
-  flexibleTabsHeaders,
-  fixedTabsHeaders,
-  isDSMobile = false
-}) => /*#__PURE__*/_jsx__default["default"](TabsImpl, {
-  activeTab: activeTab,
-  firstSubtabRef: firstSubtabRef,
-  lastTabRef: lastTabRef,
-  allowTextSelection: allowTextSelection,
-  animated: animated,
-  containerProps: containerProps,
-  enableMouseEvents: enableMouseEvents,
-  innerRef: innerRef,
-  onlyRenderActiveTab: onlyRenderActiveTab,
-  onTabChange: onTabChange,
-  tabBarExtraContent: tabBarExtraContent,
-  tabsListAriaLabel: tabsListAriaLabel,
-  type: type,
-  withCarousel: withCarousel,
-  flexibleTabsHeaders: flexibleTabsHeaders,
-  fixedTabsHeaders: fixedTabsHeaders,
-  isDSMobile: isDSMobile
-}, void 0, tabs);
+const DSTabs = _ref => {
+  let {
+    containerProps = {},
+    innerRef,
+    animated = true,
+    enableMouseEvents = false,
+    allowTextSelection = false,
+    onTabChange = () => null,
+    tabsListAriaLabel = 'Tab list',
+    type = TabTypes.TabTypes.NORMAL,
+    tabBarExtraContent = undefined,
+    children: tabs,
+    onlyRenderActiveTab = false,
+    activeTab,
+    withCarousel = false,
+    firstSubtabRef,
+    lastTabRef,
+    flexibleTabsHeaders,
+    fixedTabsHeaders,
+    isDSMobile = false
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](TabsImpl, {
+    activeTab: activeTab,
+    firstSubtabRef: firstSubtabRef,
+    lastTabRef: lastTabRef,
+    allowTextSelection: allowTextSelection,
+    animated: animated,
+    containerProps: containerProps,
+    enableMouseEvents: enableMouseEvents,
+    innerRef: innerRef,
+    onlyRenderActiveTab: onlyRenderActiveTab,
+    onTabChange: onTabChange,
+    tabBarExtraContent: tabBarExtraContent,
+    tabsListAriaLabel: tabsListAriaLabel,
+    type: type,
+    withCarousel: withCarousel,
+    flexibleTabsHeaders: flexibleTabsHeaders,
+    fixedTabsHeaders: fixedTabsHeaders,
+    isDSMobile: isDSMobile
+  }, void 0, tabs);
+};
 
 const props = {
   /** Whether the tab transition should animate or not */

package/cjs/PanelContainer.js

@@ -2,6 +2,13 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var dsClassnames = require('@elliemae/ds-classnames');
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/SubTabBar.js

@@ -11,35 +11,44 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 const blockName = 'tabs-tab-bar';
-const SubTabList = dsClassnames.aggregatedClasses('div')(blockName, 'subtabs-list', ({
-  withCarousel
-}) => ({
-  carousel: withCarousel
-}));
-
-const SubTabBar = ({
-  withCarousel,
-  tabs = [],
-  activeTab = '',
-  onTabClick = () => null,
-  firstSubtabRef,
-  handleUpArrow
-}) => /*#__PURE__*/_jsx__default["default"](TabBar, {
-  activeTab: activeTab,
-  onTabClick: onTabClick,
-  handleUpArrow: handleUpArrow,
-  firstSubtabRef: firstSubtabRef,
-  renderCustomTabBar: ({
-    tabsComponents,
-    innerRef
-  }) => /*#__PURE__*/_jsx__default["default"](SubTabList, {
-    withCarousel: withCarousel,
-    innerRef: innerRef,
-    "data-testid": "subtabs-list"
-  }, void 0, withCarousel ? /*#__PURE__*/_jsx__default["default"](Carousel, {}, void 0, tabsComponents) : tabsComponents),
-  showSelectionIndicator: false,
-  showSeparator: true,
-  tabs: tabs
+const SubTabList = dsClassnames.aggregatedClasses('div')(blockName, 'subtabs-list', _ref => {
+  let {
+    withCarousel
+  } = _ref;
+  return {
+    carousel: withCarousel
+  };
 });
 
+const SubTabBar = _ref2 => {
+  let {
+    withCarousel,
+    tabs = [],
+    activeTab = '',
+    onTabClick = () => null,
+    firstSubtabRef,
+    handleUpArrow
+  } = _ref2;
+  return /*#__PURE__*/_jsx__default["default"](TabBar, {
+    activeTab: activeTab,
+    onTabClick: onTabClick,
+    handleUpArrow: handleUpArrow,
+    firstSubtabRef: firstSubtabRef,
+    renderCustomTabBar: _ref3 => {
+      let {
+        tabsComponents,
+        innerRef
+      } = _ref3;
+      return /*#__PURE__*/_jsx__default["default"](SubTabList, {
+        withCarousel: withCarousel,
+        innerRef: innerRef,
+        "data-testid": "subtabs-list"
+      }, void 0, withCarousel ? /*#__PURE__*/_jsx__default["default"](Carousel, {}, void 0, tabsComponents) : tabsComponents);
+    },
+    showSelectionIndicator: false,
+    showSeparator: true,
+    tabs: tabs
+  });
+};
+
 module.exports = SubTabBar;

package/cjs/TabBar.js

@@ -2,6 +2,8 @@
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
 var lodash = require('lodash');
 var dsClassnames = require('@elliemae/ds-classnames');
@@ -25,36 +27,45 @@ const blockName = 'tabs-tab-bar';
 const gradientWidth = 24;
 const StyledTabWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-7sdovg-0"
-})(["display:flex;flex:1;flex-wrap:nowrap;", ";"], ({
-  flexibleTabsHeaders
-}) => flexibleTabsHeaders ? '' : 'overflow-x: hidden');
-const StyledTabList = dsClassnames.aggregatedClasses('div')(blockName, 'list', ({
-  withCarousel,
-  flexibleTabsHeaders,
-  fixedTabsHeaders,
-  isDSMobile,
-  withLeftGradients,
-  withRightGradients
-}) => ({
-  carousel: withCarousel,
-  'flexible-table-headers': isDSMobile && flexibleTabsHeaders,
-  'fixed-table-headers': isDSMobile && fixedTabsHeaders,
-  'left-gradients': isDSMobile && flexibleTabsHeaders && withLeftGradients,
-  'right-gradients': isDSMobile && flexibleTabsHeaders && withRightGradients
-}), {
+})(["display:flex;flex:1;flex-wrap:nowrap;", ";"], _ref => {
+  let {
+    flexibleTabsHeaders
+  } = _ref;
+  return flexibleTabsHeaders ? '' : 'overflow-x: hidden';
+});
+const StyledTabList = dsClassnames.aggregatedClasses('div')(blockName, 'list', _ref2 => {
+  let {
+    withCarousel,
+    flexibleTabsHeaders,
+    fixedTabsHeaders,
+    isDSMobile,
+    withLeftGradients,
+    withRightGradients
+  } = _ref2;
+  return {
+    carousel: withCarousel,
+    'flexible-table-headers': isDSMobile && flexibleTabsHeaders,
+    'fixed-table-headers': isDSMobile && fixedTabsHeaders,
+    'left-gradients': isDSMobile && flexibleTabsHeaders && withLeftGradients,
+    'right-gradients': isDSMobile && flexibleTabsHeaders && withRightGradients
+  };
+}, {
   propsToRemoveFromFinalElement: ['withCarousel', 'flexibleTabsHeaders', 'fixedTabsHeaders', 'withLeftGradients', 'withRightGradients', 'isDSMobile']
 });
 const TabContainer = dsClassnames.aggregatedClasses('button', {
   role: 'tab'
-})(blockName, 'tab', ({
-  isActive,
-  showSeparator,
-  disabled
-}) => ({
-  active: isActive,
-  separator: showSeparator,
-  disabled
-}));
+})(blockName, 'tab', _ref3 => {
+  let {
+    isActive,
+    showSeparator,
+    disabled
+  } = _ref3;
+  return {
+    active: isActive,
+    separator: showSeparator,
+    disabled
+  };
+});
 const SelectionIndicator = dsClassnames.aggregatedClasses('div')(blockName, 'selection-indicator');
 
 class TabBar extends React.Component {
@@ -198,7 +209,7 @@ class TabBar extends React.Component {
             disabled
           },
           "data-tab-id": tabId,
-          id: `${tabId}-label`,
+          id: "".concat(tabId, "-label"),
           onClick: e => {
             if (!disabled) this.handleTabClick(tabId, e, index);
           },
@@ -295,7 +306,7 @@ class TabBar extends React.Component {
 
   getActiveTabElement(activeTab) {
     const tabListEl = this.tabListRef.current;
-    const tabSelector = `[data-tab-id="${activeTab}"]`;
+    const tabSelector = "[data-tab-id=\"".concat(activeTab, "\"]");
     return tabListEl && tabListEl.querySelector(tabSelector);
   }
 
@@ -335,12 +346,12 @@ class TabBar extends React.Component {
       left
     } = activeTabEl.getBoundingClientRect();
     const leftOff = withCarousel ? Math.max(0, left - tabListEl.getBoundingClientRect().left) : offsetLeft;
-    const width = withCarousel ? this.getVisibleDimensions(activeTabEl, tabListEl).width : clientWidth + 2;
+    const width = withCarousel ? this.getVisibleDimensions(activeTabEl, tabListEl).width + 2 : clientWidth + 2;
     return {
       height: clientHeight,
-      left: `${Math.floor(leftOff)}px`,
+      left: "".concat(Math.floor(leftOff), "px"),
       // using left and top for ie compatibility
-      top: `${Math.floor(offsetTop)}px`,
+      top: "".concat(Math.floor(offsetTop), "px"),
       width
     };
   }

package/cjs/TabTypes.js

@@ -2,6 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+
 const TabTypes = {
   NORMAL: 'normal',
   SUBTABS: 'subtabs'

package/cjs/TabsImpl.js

@@ -2,6 +2,12 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var dsClassnames = require('@elliemae/ds-classnames');
 var TabsPanels = require('./TabsPanels.js');

package/cjs/TabsPanels.js

@@ -2,6 +2,9 @@
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
 var memoizeOne = require('memoize-one');
 var dsClassnames = require('@elliemae/ds-classnames');
@@ -24,8 +27,8 @@ const getIndexById = (children, activeId) => children && children.findIndex(item
 const getIdByIndex = (children, index) => children && children[index].props.tabId;
 
 class TabsPanels extends React.Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
     _defineProperty__default["default"](this, "renderPanels", memoizeOne__default["default"]((activeTab, tabsComponents) => {
       const {
@@ -42,7 +45,7 @@ class TabsPanels extends React.Component {
         const isActive = activeTab === panelId;
         const shouldRender = !onlyRenderActiveTab || isActive;
         return /*#__PURE__*/_jsx__default["default"](PanelContainer, {
-          "aria-labelledby": `${panelId}-label`,
+          "aria-labelledby": "".concat(panelId, "-label"),
           lastTabRef: this.props.lastTabRef,
           firstSubtabRef: this.props.firstTabRefByParent,
           classProps: {

package/esm/Carousel.js

@@ -1,7 +1,12 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import React, { useRef, useState, useEffect } from 'react';
-import ChevronRight from '@elliemae/ds-icons/ChevronRight';
-import ChevronLeft from '@elliemae/ds-icons/ChevronLeft';
+import { ChevronLeft, ChevronRight } from '@elliemae/ds-icons';
 import styled from 'styled-components';
 import DSButton from '@elliemae/ds-button';
 import { useResize } from './useResize.js';
@@ -9,9 +14,12 @@ import { jsx } from 'react/jsx-runtime';
 
 const CarouselBtn = /*#__PURE__*/styled(DSButton).withConfig({
   componentId: "sc-1317h31-0"
-})(["position:absolute;z-index:1;margin:0;&:focus{& span{background-color:", ";background-size:90%;border-radius:2px;border-color:transparent;}}&&{width:16px;height:calc(100% - 2px);@media (min-width:", "){height:calc(100% - 4px);&:focus{& span{background-color:unset;}}}}", " && .em-ds-icon{height:16px;width:16px;}"], props => props.theme.colors.brand[200], ({
-  theme
-}) => theme.breakpoints.medium, props => props.right ? 'right: 0;' : 'left: 0;');
+})(["position:absolute;z-index:1;margin:0;&:focus{& span{background-color:", ";background-size:90%;border-radius:2px;border-color:transparent;}}&&{width:16px;height:calc(100% - 2px);@media (min-width:", "){height:calc(100% - 4px);&:focus{& span{background-color:unset;}}}}", " && .em-ds-icon{height:16px;width:16px;}"], props => props.theme.colors.brand[200], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.breakpoints.medium;
+}, props => props.right ? 'right: 0;' : 'left: 0;');
 const CarouselWrapper = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-1317h31-1"
 })(["position:relative;padding:0 16px;width:100%;"]);
@@ -29,10 +37,11 @@ function isVisibleElement(el, container) {
   return isVisible;
 }
 
-const Carousel = ({
-  children,
-  onScroll
-}) => {
+const Carousel = _ref2 => {
+  let {
+    children,
+    onScroll
+  } = _ref2;
   const itemsRef = useRef([]);
   const wrapRef = useRef(null);
   const leftRef = useRef(null);
@@ -109,7 +118,8 @@ const Carousel = ({
     onScroll(e);
   };
 
-  const handleClick = (e, onClick = () => {}) => {
+  const handleClick = function (e) {
+    let onClick = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
     const tabListDomEl = wrapRef.current;
     const el = e.target;
     const rect = el.getBoundingClientRect();

package/esm/DSTab.js

@@ -2,16 +2,19 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { PropTypes, describe } from 'react-desc';
 
-const DSTab = ({
-  tabId = '',
-  title = '',
-  required = false
-}) => /*#__PURE__*/_jsx("div", {
-  "aria-labelledby": `${tabId}-label`,
-  tabId: tabId,
-  title: title,
-  required: required
-});
+const DSTab = _ref => {
+  let {
+    tabId = '',
+    title = '',
+    required = false
+  } = _ref;
+  return /*#__PURE__*/_jsx("div", {
+    "aria-labelledby": "".concat(tabId, "-label"),
+    tabId: tabId,
+    title: title,
+    required: required
+  });
+};
 
 DSTab.displayName = 'DSTab';
 const props = {

package/esm/DSTabs.js

@@ -5,44 +5,47 @@ import { TabTypes } from './TabTypes.js';
 import TabsImpl from './TabsImpl.js';
 import { DSTab } from './DSTab.js';
 
-const DSTabs = ({
-  containerProps = {},
-  innerRef,
-  animated = true,
-  enableMouseEvents = false,
-  allowTextSelection = false,
-  onTabChange = () => null,
-  tabsListAriaLabel = 'Tab list',
-  type = TabTypes.NORMAL,
-  tabBarExtraContent = undefined,
-  children: tabs,
-  onlyRenderActiveTab = false,
-  activeTab,
-  withCarousel = false,
-  firstSubtabRef,
-  lastTabRef,
-  flexibleTabsHeaders,
-  fixedTabsHeaders,
-  isDSMobile = false
-}) => /*#__PURE__*/_jsx(TabsImpl, {
-  activeTab: activeTab,
-  firstSubtabRef: firstSubtabRef,
-  lastTabRef: lastTabRef,
-  allowTextSelection: allowTextSelection,
-  animated: animated,
-  containerProps: containerProps,
-  enableMouseEvents: enableMouseEvents,
-  innerRef: innerRef,
-  onlyRenderActiveTab: onlyRenderActiveTab,
-  onTabChange: onTabChange,
-  tabBarExtraContent: tabBarExtraContent,
-  tabsListAriaLabel: tabsListAriaLabel,
-  type: type,
-  withCarousel: withCarousel,
-  flexibleTabsHeaders: flexibleTabsHeaders,
-  fixedTabsHeaders: fixedTabsHeaders,
-  isDSMobile: isDSMobile
-}, void 0, tabs);
+const DSTabs = _ref => {
+  let {
+    containerProps = {},
+    innerRef,
+    animated = true,
+    enableMouseEvents = false,
+    allowTextSelection = false,
+    onTabChange = () => null,
+    tabsListAriaLabel = 'Tab list',
+    type = TabTypes.NORMAL,
+    tabBarExtraContent = undefined,
+    children: tabs,
+    onlyRenderActiveTab = false,
+    activeTab,
+    withCarousel = false,
+    firstSubtabRef,
+    lastTabRef,
+    flexibleTabsHeaders,
+    fixedTabsHeaders,
+    isDSMobile = false
+  } = _ref;
+  return /*#__PURE__*/_jsx(TabsImpl, {
+    activeTab: activeTab,
+    firstSubtabRef: firstSubtabRef,
+    lastTabRef: lastTabRef,
+    allowTextSelection: allowTextSelection,
+    animated: animated,
+    containerProps: containerProps,
+    enableMouseEvents: enableMouseEvents,
+    innerRef: innerRef,
+    onlyRenderActiveTab: onlyRenderActiveTab,
+    onTabChange: onTabChange,
+    tabBarExtraContent: tabBarExtraContent,
+    tabsListAriaLabel: tabsListAriaLabel,
+    type: type,
+    withCarousel: withCarousel,
+    flexibleTabsHeaders: flexibleTabsHeaders,
+    fixedTabsHeaders: fixedTabsHeaders,
+    isDSMobile: isDSMobile
+  }, void 0, tabs);
+};
 
 const props = {
   /** Whether the tab transition should animate or not */

package/esm/PanelContainer.js

@@ -1,5 +1,12 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import React from 'react';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import { jsx } from 'react/jsx-runtime';

package/esm/SubTabBar.js

@@ -5,35 +5,44 @@ import TabBar from './TabBar.js';
 import Carousel from './Carousel.js';
 
 const blockName = 'tabs-tab-bar';
-const SubTabList = aggregatedClasses('div')(blockName, 'subtabs-list', ({
-  withCarousel
-}) => ({
-  carousel: withCarousel
-}));
-
-const SubTabBar = ({
-  withCarousel,
-  tabs = [],
-  activeTab = '',
-  onTabClick = () => null,
-  firstSubtabRef,
-  handleUpArrow
-}) => /*#__PURE__*/_jsx(TabBar, {
-  activeTab: activeTab,
-  onTabClick: onTabClick,
-  handleUpArrow: handleUpArrow,
-  firstSubtabRef: firstSubtabRef,
-  renderCustomTabBar: ({
-    tabsComponents,
-    innerRef
-  }) => /*#__PURE__*/_jsx(SubTabList, {
-    withCarousel: withCarousel,
-    innerRef: innerRef,
-    "data-testid": "subtabs-list"
-  }, void 0, withCarousel ? /*#__PURE__*/_jsx(Carousel, {}, void 0, tabsComponents) : tabsComponents),
-  showSelectionIndicator: false,
-  showSeparator: true,
-  tabs: tabs
+const SubTabList = aggregatedClasses('div')(blockName, 'subtabs-list', _ref => {
+  let {
+    withCarousel
+  } = _ref;
+  return {
+    carousel: withCarousel
+  };
 });
 
+const SubTabBar = _ref2 => {
+  let {
+    withCarousel,
+    tabs = [],
+    activeTab = '',
+    onTabClick = () => null,
+    firstSubtabRef,
+    handleUpArrow
+  } = _ref2;
+  return /*#__PURE__*/_jsx(TabBar, {
+    activeTab: activeTab,
+    onTabClick: onTabClick,
+    handleUpArrow: handleUpArrow,
+    firstSubtabRef: firstSubtabRef,
+    renderCustomTabBar: _ref3 => {
+      let {
+        tabsComponents,
+        innerRef
+      } = _ref3;
+      return /*#__PURE__*/_jsx(SubTabList, {
+        withCarousel: withCarousel,
+        innerRef: innerRef,
+        "data-testid": "subtabs-list"
+      }, void 0, withCarousel ? /*#__PURE__*/_jsx(Carousel, {}, void 0, tabsComponents) : tabsComponents);
+    },
+    showSelectionIndicator: false,
+    showSeparator: true,
+    tabs: tabs
+  });
+};
+
 export { SubTabBar as default };

package/esm/TabBar.js

@@ -1,5 +1,7 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import React, { Component } from 'react';
 import { debounce } from 'lodash';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
@@ -14,36 +16,45 @@ const blockName = 'tabs-tab-bar';
 const gradientWidth = 24;
 const StyledTabWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-7sdovg-0"
-})(["display:flex;flex:1;flex-wrap:nowrap;", ";"], ({
-  flexibleTabsHeaders
-}) => flexibleTabsHeaders ? '' : 'overflow-x: hidden');
-const StyledTabList = aggregatedClasses('div')(blockName, 'list', ({
-  withCarousel,
-  flexibleTabsHeaders,
-  fixedTabsHeaders,
-  isDSMobile,
-  withLeftGradients,
-  withRightGradients
-}) => ({
-  carousel: withCarousel,
-  'flexible-table-headers': isDSMobile && flexibleTabsHeaders,
-  'fixed-table-headers': isDSMobile && fixedTabsHeaders,
-  'left-gradients': isDSMobile && flexibleTabsHeaders && withLeftGradients,
-  'right-gradients': isDSMobile && flexibleTabsHeaders && withRightGradients
-}), {
+})(["display:flex;flex:1;flex-wrap:nowrap;", ";"], _ref => {
+  let {
+    flexibleTabsHeaders
+  } = _ref;
+  return flexibleTabsHeaders ? '' : 'overflow-x: hidden';
+});
+const StyledTabList = aggregatedClasses('div')(blockName, 'list', _ref2 => {
+  let {
+    withCarousel,
+    flexibleTabsHeaders,
+    fixedTabsHeaders,
+    isDSMobile,
+    withLeftGradients,
+    withRightGradients
+  } = _ref2;
+  return {
+    carousel: withCarousel,
+    'flexible-table-headers': isDSMobile && flexibleTabsHeaders,
+    'fixed-table-headers': isDSMobile && fixedTabsHeaders,
+    'left-gradients': isDSMobile && flexibleTabsHeaders && withLeftGradients,
+    'right-gradients': isDSMobile && flexibleTabsHeaders && withRightGradients
+  };
+}, {
   propsToRemoveFromFinalElement: ['withCarousel', 'flexibleTabsHeaders', 'fixedTabsHeaders', 'withLeftGradients', 'withRightGradients', 'isDSMobile']
 });
 const TabContainer = aggregatedClasses('button', {
   role: 'tab'
-})(blockName, 'tab', ({
-  isActive,
-  showSeparator,
-  disabled
-}) => ({
-  active: isActive,
-  separator: showSeparator,
-  disabled
-}));
+})(blockName, 'tab', _ref3 => {
+  let {
+    isActive,
+    showSeparator,
+    disabled
+  } = _ref3;
+  return {
+    active: isActive,
+    separator: showSeparator,
+    disabled
+  };
+});
 const SelectionIndicator = aggregatedClasses('div')(blockName, 'selection-indicator');
 
 class TabBar extends Component {
@@ -187,7 +198,7 @@ class TabBar extends Component {
             disabled
           },
           "data-tab-id": tabId,
-          id: `${tabId}-label`,
+          id: "".concat(tabId, "-label"),
           onClick: e => {
             if (!disabled) this.handleTabClick(tabId, e, index);
           },
@@ -284,7 +295,7 @@ class TabBar extends Component {
 
   getActiveTabElement(activeTab) {
     const tabListEl = this.tabListRef.current;
-    const tabSelector = `[data-tab-id="${activeTab}"]`;
+    const tabSelector = "[data-tab-id=\"".concat(activeTab, "\"]");
     return tabListEl && tabListEl.querySelector(tabSelector);
   }
 
@@ -324,12 +335,12 @@ class TabBar extends Component {
       left
     } = activeTabEl.getBoundingClientRect();
     const leftOff = withCarousel ? Math.max(0, left - tabListEl.getBoundingClientRect().left) : offsetLeft;
-    const width = withCarousel ? this.getVisibleDimensions(activeTabEl, tabListEl).width : clientWidth + 2;
+    const width = withCarousel ? this.getVisibleDimensions(activeTabEl, tabListEl).width + 2 : clientWidth + 2;
     return {
       height: clientHeight,
-      left: `${Math.floor(leftOff)}px`,
+      left: "".concat(Math.floor(leftOff), "px"),
       // using left and top for ie compatibility
-      top: `${Math.floor(offsetTop)}px`,
+      top: "".concat(Math.floor(offsetTop), "px"),
       width
     };
   }

package/esm/TabTypes.js

@@ -1,3 +1,6 @@
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+
 const TabTypes = {
   NORMAL: 'normal',
   SUBTABS: 'subtabs'

package/esm/TabsImpl.js

@@ -1,5 +1,11 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import TabsPanels from './TabsPanels.js';

package/esm/TabsPanels.js

@@ -1,5 +1,8 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import React, { Component } from 'react';
 import memoizeOne from 'memoize-one';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
@@ -14,8 +17,8 @@ const getIndexById = (children, activeId) => children && children.findIndex(item
 const getIdByIndex = (children, index) => children && children[index].props.tabId;
 
 class TabsPanels extends Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
     _defineProperty(this, "renderPanels", memoizeOne((activeTab, tabsComponents) => {
       const {
@@ -32,7 +35,7 @@ class TabsPanels extends Component {
         const isActive = activeTab === panelId;
         const shouldRender = !onlyRenderActiveTab || isActive;
         return /*#__PURE__*/_jsx(PanelContainer, {
-          "aria-labelledby": `${panelId}-label`,
+          "aria-labelledby": "".concat(panelId, "-label"),
           lastTabRef: this.props.lastTabRef,
           firstSubtabRef: this.props.firstTabRefByParent,
           classProps: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-tabs",
-  "version": "2.0.0-alpha.9",
+  "version": "2.0.0-next.12",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tabs",
   "module": "./esm/index.js",
@@ -72,13 +72,13 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.0.0-alpha.9",
-    "@elliemae/ds-classnames": "2.0.0-alpha.9",
-    "@elliemae/ds-form": "2.0.0-alpha.9",
-    "@elliemae/ds-icons": "2.0.0-alpha.9",
+    "@elliemae/ds-button": "2.0.0-next.12",
+    "@elliemae/ds-classnames": "2.0.0-next.12",
+    "@elliemae/ds-form": "2.0.0-next.12",
+    "@elliemae/ds-icons": "2.0.0-next.12",
     "memoize-one": "~5.1.1",
     "prop-types": "~15.7.2",
-    "react-desc": "^4.1.3",
+    "react-desc": "~4.1.3",
     "react-swipeable-views": "~0.13.9",
     "resize-observer": "~1.0.2"
   },

package/cjs/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "commonjs",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}

package/esm/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "module",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}