@elliemae/ds-tabs 2.0.0-alpha.1 → 2.0.0-alpha.13

package/cjs/SubTabBar.js

@@ -1,45 +0,0 @@
-'use strict';
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-var dsClassnames = require('@elliemae/ds-classnames');
-var TabBar = require('./TabBar.js');
-var Carousel = require('./Carousel.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-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
-});
-
-module.exports = SubTabBar;

package/cjs/TabBar.js

@@ -1,410 +0,0 @@
-'use strict';
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var React = require('react');
-var lodash = require('lodash');
-var dsClassnames = require('@elliemae/ds-classnames');
-var RequiredMark = require('@elliemae/ds-form/RequiredMark');
-var memoizeOne = require('memoize-one');
-var resizeObserver = require('resize-observer');
-var styled = require('styled-components');
-var Carousel = require('./Carousel.js');
-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);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-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
-}), {
-  propsToRemoveFromFinalElement: ['withCarousel', 'flexibleTabsHeaders', 'fixedTabsHeaders', 'withLeftGradients', 'withRightGradients', 'isDSMobile']
-});
-const TabContainer = dsClassnames.aggregatedClasses('button', {
-  role: 'tab'
-})(blockName, 'tab', ({
-  isActive,
-  showSeparator,
-  disabled
-}) => ({
-  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) => {
-      const {
-        tabListRef,
-        props
-      } = this;
-      const {
-        onTabClick,
-        flexibleTabsHeaders,
-        isDSMobile
-      } = props;
-
-      if (isDSMobile && flexibleTabsHeaders) {
-        const tabListDomEl = tabListRef.current;
-        const el = e.target;
-        const {
-          offsetLeft
-        } = el;
-        const {
-          width: elWidth
-        } = el.getBoundingClientRect();
-        const {
-          width: listWidth
-        } = tabListDomEl.getBoundingClientRect();
-        const extraSideSpace = listWidth - elWidth;
-        const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;
-        const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;
-        tabListDomEl.scrollTo({
-          top: 0,
-          left: centeredLeftOffset,
-          behavior: 'smooth'
-        });
-      }
-
-      e.preventDefault();
-      onTabClick(tabId);
-    });
-
-    _defineProperty__default['default'](this, "handleKeyPress", (tabId, e, index) => {
-      const {
-        tabs,
-        handleDownArrow,
-        handleUpArrow // onTabClick,
-
-      } = this.props;
-
-      if (e.keyCode === 39) {
-        var _this$tabsRef;
-
-        const nextTab = tabs[index + 1];
-        if (!nextTab && handleDownArrow) handleDownArrow(e);
-        if (!nextTab) return; // const { props } = nextTab
-        // onTabClick(props.tabId)
-
-        (_this$tabsRef = this.tabsRef[index + 1]) === null || _this$tabsRef === void 0 ? void 0 : _this$tabsRef.focus();
-      }
-
-      if (e.keyCode === 37) {
-        var _this$tabsRef2;
-
-        const nextTab = tabs[index - 1];
-        if (!nextTab && handleUpArrow) handleUpArrow(e);
-        if (!nextTab) return; // const { props } = nextTab
-        // onTabClick(props.tabId)
-
-        (_this$tabsRef2 = this.tabsRef[index - 1]) === null || _this$tabsRef2 === void 0 ? void 0 : _this$tabsRef2.focus();
-      }
-
-      if (e.keyCode === 40 && handleDownArrow) {
-        handleDownArrow(e);
-      }
-
-      if (e.keyCode === 38 && handleUpArrow) {
-        handleUpArrow(e);
-      }
-    });
-
-    _defineProperty__default['default'](this, "handleTabsHeadersHorizontalScroll", lodash.debounce(() => {
-      const {
-        tabListRef,
-        props
-      } = this;
-      const {
-        flexibleTabsHeaders,
-        isDSMobile
-      } = props;
-
-      if (isDSMobile && flexibleTabsHeaders) {
-        const tabListDomEl = tabListRef.current;
-        const {
-          scrollLeft,
-          scrollWidth,
-          clientWidth
-        } = tabListDomEl;
-        const withLeftGradients = this.shouldHaveLeftGradient(scrollLeft, gradientWidth);
-        const withRightGradients = this.shouldHaveRightGradient(scrollLeft, gradientWidth, clientWidth, scrollWidth);
-        this.setState({
-          withLeftGradients,
-          withRightGradients
-        });
-      }
-    }, 50));
-
-    _defineProperty__default['default'](this, "renderTabs", memoizeOne__default['default']((activeTab, tabs) => {
-      const {
-        showSeparator
-      } = this.props;
-      return React__default['default'].Children.map(tabs, (tab, index) => {
-        const {
-          tabId,
-          title,
-          style,
-          required,
-          disabled
-        } = tab.props;
-        const isActive = activeTab === tabId;
-        return [/*#__PURE__*/jsxRuntime.jsxs(TabContainer, {
-          // eslint-disable-next-line no-return-assign
-          ref: t => {
-            this.tabsRef[index] = t;
-
-            if (index === 0 && this.props.firstSubtabRef) {
-              this.props.firstSubtabRef.current = t;
-            }
-
-            if (index === tabs.length - 1 && this.props.lastTabRef) {
-              this.props.lastTabRef.current = t;
-            }
-          },
-          "aria-controls": tabId,
-          "aria-selected": isActive,
-          "aria-disabled": !!disabled,
-          classProps: {
-            isActive,
-            showSeparator,
-            disabled
-          },
-          "data-tab-id": tabId,
-          id: `${tabId}-label`,
-          onClick: e => {
-            if (!disabled) this.handleTabClick(tabId, e, index);
-          },
-          onKeyDown: e => {
-            if (!disabled) this.handleKeyPress(tabId, e, index);
-          },
-          style: style,
-          tabIndex: 0,
-          children: [title, /*#__PURE__*/_jsx__default['default'](RequiredMark__default['default'], {
-            required: required
-          })]
-        }, tabId)];
-      }, null);
-    }));
-
-    this.tabListRef = /*#__PURE__*/React__default['default'].createRef();
-    this.resizeObserver = new resizeObserver.ResizeObserver(() => this.setIndicatorStyle());
-    this.state = {
-      indicatorStyle: null,
-      withLeftGradients: false,
-      withRightGradients: false
-    };
-    this.setIndicatorStyle = this.setIndicatorStyle.bind(this);
-    this.getIndicatorStyles = this.getIndicatorStyles.bind(this);
-    this.handleGradients = this.handleGradients.bind(this);
-    this.handleTabsHeadersHorizontalScroll = this.handleTabsHeadersHorizontalScroll.bind(this);
-    this.tabsRef = {};
-    this.setIndicatorStyle = this.setIndicatorStyle.bind(this);
-  }
-
-  componentDidMount() {
-    const {
-      showSelectionIndicator
-    } = this.props;
-    this.resizeObserver.observe(this.tabListRef.current);
-
-    if (showSelectionIndicator) {
-      this.setIndicatorStyle();
-    }
-
-    window.addEventListener('resize', this.handleGradients);
-    window.addEventListener('orientationchange', this.handleGradients);
-    this.handleGradients();
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      activeTab,
-      showSelectionIndicator
-    } = this.props;
-
-    if (showSelectionIndicator && prevProps.activeTab !== activeTab) {
-      this.setIndicatorStyle(activeTab);
-    }
-  }
-
-  componentWillUnmount() {
-    this.resizeObserver.unobserve(this.tabListRef.current);
-    window.removeEventListener('resize', this.handleGradients);
-    window.removeEventListener('orientationchange', this.handleGradients);
-  }
-
-  handleGradients() {
-    const {
-      scrollLeft,
-      scrollWidth,
-      clientWidth
-    } = this.tabListRef.current;
-    const withLeftGradients = this.shouldHaveLeftGradient(scrollLeft, gradientWidth);
-    const withRightGradients = this.shouldHaveRightGradient(scrollLeft, gradientWidth, clientWidth, scrollWidth);
-    this.setState({
-      withLeftGradients,
-      withRightGradients
-    });
-  }
-
-  shouldHaveLeftGradient(scrollLeft, gWidth) {
-    return Math.abs(scrollLeft) > gWidth;
-  } // eslint-disable-next-line max-params
-
-
-  shouldHaveRightGradient(scrollLeft, gWidth, clientWidth, scrollWidth) {
-    return Math.abs(scrollLeft) <= scrollWidth - (clientWidth + gWidth);
-  }
-
-  setIndicatorStyle() {
-    const {
-      activeTab
-    } = this.props;
-    setTimeout(() => this.setState({
-      indicatorStyle: this.getIndicatorStyles(activeTab)
-    }), 100);
-  }
-
-  getActiveTabElement(activeTab) {
-    const tabListEl = this.tabListRef.current;
-    const tabSelector = `[data-tab-id="${activeTab}"]`;
-    return tabListEl && tabListEl.querySelector(tabSelector);
-  }
-
-  isElementVisible(el, holder) {
-    const {
-      left,
-      right,
-      width
-    } = el.getBoundingClientRect();
-    const holderRect = holder.getBoundingClientRect();
-    return left <= holderRect.left ? holderRect.left - left <= width : right - holderRect.right <= width;
-  }
-
-  getVisibleDimensions(node, referenceNode) {
-    const pos = node.getBoundingClientRect();
-    const referencePos = referenceNode.getBoundingClientRect();
-    return {
-      width: Math.min(node.clientWidth, referencePos.left + referenceNode.clientWidth - pos.left, node.clientWidth - (referencePos.left - pos.left)),
-      height: Math.min(node.clientHeight, referencePos.top + referenceNode.clientHeight - pos.top, node.clientHeight - (referencePos.top - pos.top))
-    };
-  }
-
-  getIndicatorStyles(activeTab) {
-    const tabListEl = this.tabListRef.current;
-    const {
-      withCarousel
-    } = this.props;
-    const activeTabEl = this.getActiveTabElement(activeTab);
-    if (!activeTabEl || !this.isElementVisible(activeTabEl, tabListEl)) return null;
-    const {
-      clientHeight,
-      clientWidth,
-      offsetTop,
-      offsetLeft
-    } = activeTabEl;
-    const {
-      left
-    } = activeTabEl.getBoundingClientRect();
-    const leftOff = withCarousel ? Math.max(0, left - tabListEl.getBoundingClientRect().left) : offsetLeft;
-    const width = withCarousel ? this.getVisibleDimensions(activeTabEl, tabListEl).width : clientWidth + 2;
-    return {
-      height: clientHeight,
-      left: `${Math.floor(leftOff)}px`,
-      // using left and top for ie compatibility
-      top: `${Math.floor(offsetTop)}px`,
-      width
-    };
-  }
-
-  render() {
-    const {
-      id,
-      tabs,
-      activeTab,
-      renderCustomTabBar,
-      withCarousel,
-      isDSMobile,
-      flexibleTabsHeaders,
-      fixedTabsHeaders
-    } = this.props;
-    const {
-      indicatorStyle,
-      withLeftGradients,
-      withRightGradients
-    } = this.state;
-
-    if (renderCustomTabBar) {
-      return renderCustomTabBar({
-        innerRef: this.tabListRef,
-        withCarousel,
-        tabsComponents: this.renderTabs(activeTab, tabs)
-      });
-    }
-
-    const shouldUseCarousel = !isDSMobile && withCarousel;
-    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: /*#__PURE__*/_jsx__default['default'](StyledTabList, {
-        withCarousel: withCarousel,
-        "aria-label": id,
-        innerRef: this.tabListRef,
-        role: "tablist",
-        "data-testid": "tab-list",
-        isDSMobile: isDSMobile,
-        flexibleTabsHeaders: flexibleTabsHeaders,
-        withLeftGradients: withLeftGradients,
-        withRightGradients: withRightGradients,
-        fixedTabsHeaders: fixedTabsHeaders,
-        onScroll: this.handleTabsHeadersHorizontalScroll,
-        style: {
-          width: '100%'
-        }
-      }, void 0, /*#__PURE__*/_jsx__default['default'](StyledTabWrapper, {
-        isDSMobile: isDSMobile,
-        flexibleTabsHeaders: flexibleTabsHeaders,
-        fixedTabsHeaders: fixedTabsHeaders
-      }, void 0, shouldUseCarousel ? /*#__PURE__*/_jsx__default['default'](Carousel, {
-        onScroll: this.setIndicatorStyle
-      }, void 0, this.renderTabs(activeTab, tabs)) : null, !shouldUseCarousel ? this.renderTabs(activeTab, tabs) : null, /*#__PURE__*/_jsx__default['default'](SelectionIndicator, {
-        style: indicatorStyle
-      })))
-    });
-  }
-
-}
-
-TabBar.defaultProps = {
-  showSelectionIndicator: true,
-  showSeparator: false,
-  isDSMobile: false
-};
-
-module.exports = TabBar;

package/cjs/TabTypes.js

@@ -1,12 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const TabTypes = {
-  NORMAL: 'normal',
-  SUBTABS: 'subtabs'
-};
-const getTabTypes = () => Object.keys(TabTypes).map(key => TabTypes[key]);
-
-exports.TabTypes = TabTypes;
-exports.getTabTypes = getTabTypes;

package/cjs/TabsImpl.js

@@ -1,114 +0,0 @@
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _jsx = require('@babel/runtime/helpers/jsx');
-var React = require('react');
-var dsClassnames = require('@elliemae/ds-classnames');
-var TabsPanels = require('./TabsPanels.js');
-var TabBar = require('./TabBar.js');
-var SubTabBar = require('./SubTabBar.js');
-var TabTypes = require('./TabTypes.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const blockName = 'tabs';
-const StyledTabsContainer = dsClassnames.aggregatedClasses('div')(blockName);
-const StyledTabBarContainer = dsClassnames.aggregatedClasses('div')(blockName, 'tab-bar-container');
-const TabBarComponentsByType = {
-  [TabTypes.TabTypes.NORMAL]: TabBar,
-  [TabTypes.TabTypes.SUBTABS]: SubTabBar
-};
-
-const TabsImpl = props => {
-  var _tabs$, _tabs$$props, _TabsPanels, _StyledTabBarContaine;
-
-  const {
-    animated,
-    children: tabs,
-    type,
-    tabBarExtraContent,
-    onTabChange,
-    enableMouseEvents,
-    innerRef,
-    onlyRenderActiveTab,
-    containerProps,
-    allowTextSelection,
-    tabsListAriaLabel,
-    activeTab,
-    firstSubtabRef,
-    lastTabRef,
-    withCarousel,
-    flexibleTabsHeaders,
-    fixedTabsHeaders,
-    isDSMobile
-  } = props;
-  const [actualActiveTab, setActualActiveTab] = React.useState(activeTab || (tabs === null || tabs === void 0 ? void 0 : (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : (_tabs$$props = _tabs$.props) === null || _tabs$$props === void 0 ? void 0 : _tabs$$props.tabId));
-  const firstTabRefByParent = React.useRef(null);
-  const lastTabRefByParent = React.useRef(null);
-  React.useEffect(() => {
-    if (activeTab) {
-      setActualActiveTab(activeTab);
-    }
-  }, [activeTab]);
-  const handleTabClick = React.useCallback(tab => {
-    setActualActiveTab(tab);
-    onTabChange(tab);
-  }, [onTabChange]);
-  const handleDownArrow = React.useCallback(e => {
-    var _firstTabRefByParent$;
-
-    e.preventDefault();
-    e.stopPropagation();
-    if (firstTabRefByParent !== null && firstTabRefByParent !== void 0 && firstTabRefByParent.current) (_firstTabRefByParent$ = firstTabRefByParent.current) === null || _firstTabRefByParent$ === void 0 ? void 0 : _firstTabRefByParent$.focus();
-  }, [firstTabRefByParent]);
-  const handleUpArrow = React.useCallback(e => {
-    var _lastTabRef$current;
-
-    e.preventDefault();
-    e.stopPropagation();
-    if (lastTabRef !== null && lastTabRef !== void 0 && lastTabRef.current) (_lastTabRef$current = lastTabRef.current) === null || _lastTabRef$current === void 0 ? void 0 : _lastTabRef$current.focus();
-  }, [lastTabRef]);
-  const PureTabBarComponent = React.useMemo(() => {
-    const TabBarComponent = TabBarComponentsByType[type] || TabBar;
-    return /*#__PURE__*/_jsx__default['default'](TabBarComponent, {
-      withCarousel: withCarousel,
-      activeTab: actualActiveTab,
-      onTabClick: handleTabClick,
-      tabs: tabs,
-      firstSubtabRef: firstSubtabRef,
-      lastTabRef: lastTabRefByParent,
-      handleDownArrow: handleDownArrow,
-      handleUpArrow: handleUpArrow,
-      isDSMobile: isDSMobile,
-      flexibleTabsHeaders: flexibleTabsHeaders,
-      fixedTabsHeaders: fixedTabsHeaders
-    });
-  }, [type, withCarousel, actualActiveTab, handleTabClick, tabs, firstSubtabRef, lastTabRefByParent, handleDownArrow, handleUpArrow, isDSMobile]);
-  const PureTabsPanels = React.useMemo(() => _TabsPanels || (_TabsPanels = /*#__PURE__*/_jsx__default['default'](TabsPanels, {
-    activeTab: actualActiveTab,
-    allowTextSelection: allowTextSelection,
-    animated: animated,
-    enableMouseEvents: enableMouseEvents,
-    onlyRenderActiveTab: onlyRenderActiveTab,
-    onTabChange: handleTabClick,
-    tabsComponents: tabs,
-    lastTabRef: lastTabRefByParent,
-    firstTabRefByParent: firstTabRefByParent
-  })), [actualActiveTab, allowTextSelection, animated, enableMouseEvents, onlyRenderActiveTab, handleTabClick, tabs, lastTabRefByParent, firstTabRefByParent]);
-  const PureTabsImpl = React.useMemo(() => /*#__PURE__*/jsxRuntime.jsxs(StyledTabsContainer, _objectSpread(_objectSpread({}, containerProps), {}, {
-    "aria-label": tabsListAriaLabel,
-    innerRef: innerRef,
-    role: "tablist",
-    children: [_StyledTabBarContaine || (_StyledTabBarContaine = /*#__PURE__*/_jsx__default['default'](StyledTabBarContainer, {}, void 0, PureTabBarComponent, tabBarExtraContent)), PureTabsPanels]
-  })), [containerProps, tabsListAriaLabel, innerRef, PureTabBarComponent, tabBarExtraContent, PureTabsPanels]);
-  return PureTabsImpl;
-};
-
-module.exports = TabsImpl;

package/cjs/TabsPanels.js

@@ -1,82 +0,0 @@
-'use strict';
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var React = require('react');
-var memoizeOne = require('memoize-one');
-var dsClassnames = require('@elliemae/ds-classnames');
-var SwipeableViews = require('react-swipeable-views');
-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);
-
-const blockName = 'tabs-panels';
-const Panels = dsClassnames.aggregatedClasses('div')(blockName);
-
-const getIndexById = (children, activeId) => children && children.findIndex(item => item.props.tabId === activeId);
-
-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) => {
-      const {
-        animated,
-        onlyRenderActiveTab,
-        allowTextSelection
-      } = this.props;
-      return React__default['default'].Children.map(tabsComponents, tab => {
-        const {
-          tabId: panelId,
-          style,
-          children: content
-        } = tab.props;
-        const isActive = activeTab === panelId;
-        const shouldRender = !onlyRenderActiveTab || isActive;
-        return /*#__PURE__*/_jsx__default['default'](PanelContainer, {
-          "aria-labelledby": `${panelId}-label`,
-          lastTabRef: this.props.lastTabRef,
-          firstSubtabRef: this.props.firstTabRefByParent,
-          classProps: {
-            isActive
-          },
-          "data-panel-id": panelId,
-          hidden: !animated && !isActive,
-          onMouseDown: e => {
-            const role = e.target.getAttribute('role');
-            if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();
-          },
-          role: "tabpanel",
-          style: style
-        }, panelId, shouldRender && content);
-      }, null);
-    }));
-  }
-
-  render() {
-    const {
-      activeTab,
-      tabsComponents,
-      animated,
-      onTabChange,
-      enableMouseEvents
-    } = this.props;
-    const panels = animated ? /*#__PURE__*/_jsx__default['default'](SwipeableViews__default['default'], {
-      enableMouseEvents: enableMouseEvents,
-      index: getIndexById(tabsComponents, activeTab),
-      onChangeIndex: index => onTabChange(getIdByIndex(tabsComponents, index))
-    }, void 0, this.renderPanels(activeTab, tabsComponents)) : this.renderPanels(activeTab, tabsComponents);
-    return /*#__PURE__*/_jsx__default['default'](Panels, {}, void 0, panels);
-  }
-
-}
-
-module.exports = TabsPanels;

package/cjs/package.json

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

package/cjs/useResize.js

@@ -1,24 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var lodash = require('lodash');
-
-function useResize(ref, callback) {
-  var _ref$current;
-
-  const {
-    right,
-    left
-  } = (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect()) || {
-    right: null,
-    left: null
-  };
-  const handleResize = lodash.debounce(callback, 300);
-  React.useLayoutEffect(() => {
-    handleResize();
-  }, [right, left]);
-}
-
-exports.useResize = useResize;