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

package/cjs/Carousel.js

@@ -2,9 +2,13 @@
 
 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');
@@ -14,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%;"]);
@@ -41,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);
@@ -121,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();
@@ -152,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']
     }),
@@ -164,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": "".concat(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

@@ -1,7 +1,8 @@
 'use strict';
 
 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');
@@ -15,7 +16,6 @@ var jsxRuntime = require('react/jsx-runtime');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var RequiredMark__default = /*#__PURE__*/_interopDefaultLegacy(RequiredMark);
 var memoizeOne__default = /*#__PURE__*/_interopDefaultLegacy(memoizeOne);
@@ -25,43 +25,52 @@ 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 {
   constructor(_props) {
     super(_props);
 
-    _defineProperty__default["default"](this, "handleTabClick", (tabId, e) => {
+    this.handleTabClick = (tabId, e) => {
       const {
         tabListRef,
         props
@@ -96,9 +105,9 @@ class TabBar extends React.Component {
 
       e.preventDefault();
       onTabClick(tabId);
-    });
+    };
 
-    _defineProperty__default["default"](this, "handleKeyPress", (tabId, e, index) => {
+    this.handleKeyPress = (tabId, e, index) => {
       const {
         tabs,
         handleDownArrow,
@@ -135,9 +144,9 @@ class TabBar extends React.Component {
       if (e.keyCode === 38 && handleUpArrow) {
         handleUpArrow(e);
       }
-    });
+    };
 
-    _defineProperty__default["default"](this, "handleTabsHeadersHorizontalScroll", lodash.debounce(() => {
+    this.handleTabsHeadersHorizontalScroll = lodash.debounce(() => {
       const {
         tabListRef,
         props
@@ -161,9 +170,8 @@ class TabBar extends React.Component {
           withRightGradients
         });
       }
-    }, 50));
-
-    _defineProperty__default["default"](this, "renderTabs", memoizeOne__default["default"]((activeTab, tabs) => {
+    }, 50);
+    this.renderTabs = memoizeOne__default["default"]((activeTab, tabs) => {
       const {
         showSeparator
       } = this.props;
@@ -212,8 +220,7 @@ class TabBar extends React.Component {
           })]
         }, tabId)];
       }, null);
-    }));
-
+    });
     this.tabListRef = /*#__PURE__*/React__default["default"].createRef();
     this.resizeObserver = new resizeObserver.ResizeObserver(() => this.setIndicatorStyle());
     this.state = {

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

@@ -3,6 +3,11 @@
 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

@@ -1,8 +1,9 @@
 'use strict';
 
 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');
@@ -12,7 +13,6 @@ var PanelContainer = require('./PanelContainer.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var memoizeOne__default = /*#__PURE__*/_interopDefaultLegacy(memoizeOne);
 var SwipeableViews__default = /*#__PURE__*/_interopDefaultLegacy(SwipeableViews);
@@ -25,10 +25,9 @@ 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);
-
-    _defineProperty__default["default"](this, "renderPanels", memoizeOne__default["default"]((activeTab, tabsComponents) => {
+  constructor() {
+    super(...arguments);
+    this.renderPanels = memoizeOne__default["default"]((activeTab, tabsComponents) => {
       const {
         animated,
         onlyRenderActiveTab,
@@ -59,7 +58,7 @@ class TabsPanels extends React.Component {
           style: style
         }, panelId, shouldRender && content);
       }, null);
-    }));
+    });
   }
 
   render() {

package/esm/Carousel.js

@@ -1,8 +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';
@@ -10,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%;"]);
@@ -30,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);
@@ -110,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": "".concat(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,6 @@
 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,43 +15,52 @@ 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 {
   constructor(_props) {
     super(_props);
 
-    _defineProperty(this, "handleTabClick", (tabId, e) => {
+    this.handleTabClick = (tabId, e) => {
       const {
         tabListRef,
         props
@@ -85,9 +95,9 @@ class TabBar extends Component {
 
       e.preventDefault();
       onTabClick(tabId);
-    });
+    };
 
-    _defineProperty(this, "handleKeyPress", (tabId, e, index) => {
+    this.handleKeyPress = (tabId, e, index) => {
       const {
         tabs,
         handleDownArrow,
@@ -124,9 +134,9 @@ class TabBar extends Component {
       if (e.keyCode === 38 && handleUpArrow) {
         handleUpArrow(e);
       }
-    });
+    };
 
-    _defineProperty(this, "handleTabsHeadersHorizontalScroll", debounce(() => {
+    this.handleTabsHeadersHorizontalScroll = debounce(() => {
       const {
         tabListRef,
         props
@@ -150,9 +160,8 @@ class TabBar extends Component {
           withRightGradients
         });
       }
-    }, 50));
-
-    _defineProperty(this, "renderTabs", memoizeOne((activeTab, tabs) => {
+    }, 50);
+    this.renderTabs = memoizeOne((activeTab, tabs) => {
       const {
         showSeparator
       } = this.props;
@@ -201,8 +210,7 @@ class TabBar extends Component {
           })]
         }, tabId)];
       }, null);
-    }));
-
+    });
     this.tabListRef = /*#__PURE__*/React.createRef();
     this.resizeObserver = new ResizeObserver(() => this.setIndicatorStyle());
     this.state = {

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,3 +1,8 @@
+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';

package/esm/TabsPanels.js

@@ -1,6 +1,7 @@
 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';
@@ -15,10 +16,9 @@ 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);
-
-    _defineProperty(this, "renderPanels", memoizeOne((activeTab, tabsComponents) => {
+  constructor() {
+    super(...arguments);
+    this.renderPanels = memoizeOne((activeTab, tabsComponents) => {
       const {
         animated,
         onlyRenderActiveTab,
@@ -49,7 +49,7 @@ class TabsPanels extends Component {
           style: style
         }, panelId, shouldRender && content);
       }, null);
-    }));
+    });
   }
 
   render() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-tabs",
-  "version": "2.0.0-next.9",
+  "version": "2.0.0-rc.12",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tabs",
   "module": "./esm/index.js",
@@ -72,20 +72,27 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.0.0-next.9",
-    "@elliemae/ds-classnames": "2.0.0-next.9",
-    "@elliemae/ds-form": "2.0.0-next.9",
-    "@elliemae/ds-icons": "2.0.0-next.9",
+    "@elliemae/ds-button": "2.0.0-rc.12",
+    "@elliemae/ds-classnames": "2.0.0-rc.12",
+    "@elliemae/ds-form": "2.0.0-rc.12",
+    "@elliemae/ds-icons": "2.0.0-rc.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"
   },
+  "devDependencies": {
+    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/react": "~12.1.2",
+    "@testing-library/user-event": "~13.5.0",
+    "styled-components": "~5.3.3"
+  },
   "peerDependencies": {
     "lodash": "^4.17.21",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",

package/types/DSTab.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 declare const DSTab: {
     ({ tabId, title, required }: {
@@ -8,15 +9,43 @@ declare const DSTab: {
     displayName: string;
     propTypes: {
         /** unique id for tab */
-        tabId: any;
+        tabId: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** tab title */
-        title: any;
+        title: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Show a required mark next to the title */
-        required: any;
+        required: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Whether or not it's a ds-tab from DSMobile tabs */
-        isDSMobile: any;
+        isDSMobile: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const DSTabWithSchema: any;
+declare const DSTabWithSchema: {
+    (props?: {
+        tabId?: string | undefined;
+        title?: string | undefined;
+        required?: boolean | undefined;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { DSTab, DSTabWithSchema };
 export default DSTab;

package/types/DSTabs.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 declare const DSTabs: {
     ({ containerProps, innerRef, animated, enableMouseEvents, allowTextSelection, onTabChange, tabsListAriaLabel, type, tabBarExtraContent, children: tabs, onlyRenderActiveTab, activeTab, withCarousel, firstSubtabRef, lastTabRef, flexibleTabsHeaders, fixedTabsHeaders, isDSMobile, }: {
@@ -22,43 +23,151 @@ declare const DSTabs: {
     }): JSX.Element;
     propTypes: {
         /** Whether the tab transition should animate or not */
-        animated: any;
+        animated: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Enables tab transition with mouse drag events */
-        enableMouseEvents: any;
+        enableMouseEvents: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Allow text selection when mouse drag events are active */
-        allowTextSelection: any;
+        allowTextSelection: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Handler when a user clicks on a different tab */
-        onTabChange: any;
+        onTabChange: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Tab type */
-        type: any;
+        type: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Extra content next to the tabs pills */
-        tabBarExtraContent: any;
+        tabBarExtraContent: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Only renders the active tab in the DOM */
-        onlyRenderActiveTab: any;
+        onlyRenderActiveTab: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Mobile only flexible tabs mode */
-        flexibleTabsHeaders: any;
+        flexibleTabsHeaders: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Mobile only fixed tabs mode */
-        fixedTabsHeaders: any;
+        fixedTabsHeaders: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Whether or not it's a ds-tab from DSMobile tabs */
-        isDSMobile: any;
+        isDSMobile: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Activate carousel behavior */
-        withCarousel: any;
+        withCarousel: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** The active tabId */
-        activeTab: any;
+        activeTab: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** tabs children */
         children: any;
         /** Aria label for the list */
-        tabsListAriaLabel: any;
+        tabsListAriaLabel: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Additional properties for the container */
-        containerProps: any;
+        containerProps: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** REF */
-        innerRef: any;
+        innerRef: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** internal ref to handle keyboard a11y behavior */
-        firstSubtabRef: any;
+        firstSubtabRef: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** internal ref to handle keyboard a11y behavior */
-        lastTabRef: any;
+        lastTabRef: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const DSTabsWithSchema: any;
+declare const DSTabsWithSchema: {
+    (props?: {
+        containerProps?: {} | undefined;
+        innerRef: any;
+        animated?: boolean | undefined;
+        enableMouseEvents?: boolean | undefined;
+        allowTextSelection?: boolean | undefined;
+        onTabChange?: (() => null) | undefined;
+        tabsListAriaLabel?: string | undefined;
+        type?: string | undefined;
+        tabBarExtraContent?: undefined;
+        children: any;
+        onlyRenderActiveTab?: boolean | undefined;
+        activeTab: any;
+        withCarousel?: boolean | undefined;
+        firstSubtabRef: any;
+        lastTabRef: any;
+        flexibleTabsHeaders: any;
+        fixedTabsHeaders: any;
+        isDSMobile?: boolean | undefined;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema; /** Handler when a user clicks on a different tab */
+};
 export { DSTabs, DSTabsWithSchema };
 export default DSTabs;