@zohodesk/components 1.0.0-temp-182 → 1.0.0-temp-183

package/es/v1/Tab/Tabs.js

@@ -1,73 +1,63 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import useEffectCallOnlyAfterState from '@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState';
+/* eslint-disable react/forbid-component-props */
+/* eslint css-modules/no-unused-class: [2, {
+      markAsUsed: [
+          'hidden','alpha','gamma','beta','delta','special','text','maxWidth','widgetList','menuContainer','border','tabText','block','tabAlpha','alphaActive','gammaActive','betaActive','deltaActive','tabGamma','tabBeta','tabDelta','specialActive','tabSpecial',
+          'alpha_padding','alpha_border','gamma_padding','gamma_border','beta_padding','beta_border','delta_padding','delta_border','textContainer','disabled','alphaActive_border','gammaActive_border','betaActive_border','deltaActive_border'
+        ]
+    }]
+*/
+import React from 'react';
 import Tab from './Tab';
 import { Tabs_defaultProps } from './props/defaultProps';
 import { Tabs_propTypes } from './props/propTypes';
-import { remConvert, getTotalDimension, cs, throttle, cancelBubblingEffect } from '../../utils/Common';
+import { remConvert, getTotalDimension, cs, bind, throttle, cancelBubblingEffect } from '../../utils/Common';
 import { Box, Container } from '../Layout';
 import ResizeObserver from '../Responsive/ResizeObserver';
 import ListItem from '../ListItem/ListItem';
 import { Icon } from '@zohodesk/icons';
-import tabsStyle from './v1Tabs.module.css';
+import tabsStyle from '../../Tab/Tabs.module.css';
 import Popup from '../Popup/Popup';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import btnstyle from '../../semantic/Button/semanticButton.module.css';
-
-const Tabs = props => {
-  const [totalDimension, setTotalDimension] = useState(null);
-  const [tabDimensions, setTabDimensions] = useState({});
-  const highlightInitialDimension = useRef(null);
-  const [renderVirtualTabs, setRenderVirtualTabs] = useState(true);
-  const [tabKeys, setTabKeys] = useState([]);
-  const tabsObserver = useRef(new ResizeObserver(onResize));
-  const tabObserver = useRef({});
-  const highlight = useRef(null);
-  const tabsEle = useRef(null);
-  const tabElement = useRef({});
-  let {
-    style,
-    className,
-    dataId,
-    highlightClass,
-    type,
-    isAnimate,
-    needTabBorder,
-    needBorder,
-    needPadding,
-    align,
-    boxPosition,
-    removeClose,
-    togglePopup,
-    needAppearance,
-    children,
-    onSelect,
-    onScroll,
-    isResponsive,
-    maxTabsCount,
-    minTabsCount,
-    childType,
-    containerClass,
-    dataSelectorId,
-    selectedTab
-  } = props;
-
-  function onTabResize(size, target) {
+class Tabs extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      totalDimension: null,
+      tabDimensions: {},
+      highlightInitialDimension: null,
+      renderVirtualTabs: true,
+      tabKeys: []
+    };
+    bind.apply(this, ['moreTabSelect', 'onResize', 'onTabResize', 'getHighlightRef', 'getTabsRef', 'getTabRef', 'getHighlightDim', 'onSizeChange', 'onScroll', 'togglePopup', 'setMaxDim']);
+    this.tabsObserver = new ResizeObserver(this.onResize);
+    this.tabObserver = {};
+  }
+  onTabResize(size, target) {
+    let {
+      align
+    } = this.props;
+    let {
+      tabDimensions
+    } = this.state;
     let newDim = Object.assign({}, tabDimensions);
     let elemDim = getTotalDimension(target, align);
-
     if (elemDim !== 0) {
       newDim[target.dataset.key] = elemDim;
     }
-
-    setTabDimensions(newDim);
+    this.setState({
+      tabDimensions: newDim
+    });
   }
-
-  useEffect(() => {
-    let totalDimension = getTotalDimensionLocal();
-    let tabDimensions = getTabDimensions();
+  componentDidMount() {
+    let {
+      children,
+      childType
+    } = this.props;
+    let totalDimension = this.getTotalDimension();
+    let tabDimensions = this.getTabDimensions();
     let tabKeys = [];
     let restrictedKeys = ['state', 'props', 'refs', 'context'];
     React.Children.toArray(children).forEach(child => {
@@ -79,54 +69,70 @@ const Tabs = props => {
         }
       }
     });
-    setTotalDimension(totalDimension);
-    setTabDimensions(tabDimensions);
-    setRenderVirtualTabs(false);
-    setTabKeys(tabKeys);
-
-    if (highlight.current) {
-      highlightInitialDimension.current = getHighlightDim();
-      moveHighlight();
+    this.setState({
+      totalDimension,
+      tabDimensions,
+      renderVirtualTabs: false,
+      tabKeys
+    });
+    this.highlight && this.setState({
+      highlightInitialDimension: this.getHighlightDim()
+    }, () => {
+      this.moveHighlight();
+    });
+  }
+  componentWillUnmount() {
+    if (this.tabsObserver) {
+      this.tabsObserver.disconnect();
+      this.tabsObserver = null;
     }
-
-    return () => {
-      if (tabsObserver.current) {
-        tabsObserver.current.disconnect();
-        tabsObserver.current = null;
-      }
-
-      if (tabObserver.current) {
-        Object.keys(tabObserver.current).forEach(observer => {
-          tabObserver.current[observer] && tabObserver.current[observer].disconnect();
-        });
-        tabObserver.current = null;
-      }
-    };
-  }, []);
-
-  function setMaxDim() {
+    if (this.tabObserver) {
+      Object.keys(this.tabObserver).forEach(observer => {
+        this.tabObserver[observer] && this.tabObserver[observer].disconnect();
+      });
+      this.tabObserver = null;
+    }
+  }
+  setMaxDim() {
     let totalDimension = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-
+    let {
+      selectedTab
+    } = this.props;
     // let actual = Object.keys(tabDimensions).reduce(
     //   (sum, tab) => sum + (tabDimensions[tab] || 0),
     //   0
     // );
-    if (totalDimension && tabElement.current[selectedTab]) {
+    if (totalDimension && this[selectedTab]) {
+      let {
+        align
+      } = this.props;
       let newDim = `${remConvert(totalDimension)}rem`;
-      align === 'vertical' ? tabElement.current[selectedTab].style.maxWidth = newDim : tabElement.current[selectedTab].style.maxHeight = newDim;
+      align === 'vertical' ? this[selectedTab].style.maxWidth = newDim : this[selectedTab].style.maxHeight = newDim;
     }
   }
-
-  function getHighlightDim() {
-    return align === 'vertical' ? highlight.current.offsetLeft : highlight.current.offsetTop;
+  getHighlightDim() {
+    let {
+      align
+    } = this.props;
+    return align === 'vertical' ? this.highlight.offsetLeft : this.highlight.offsetTop;
   }
-
-  useEffectCallOnlyAfterState(() => {
-    if (children) {
+  componentDidUpdate(prevProps) {
+    let {
+      children,
+      selectedTab,
+      childType
+    } = this.props;
+    let {
+      tabDimensions,
+      totalDimension,
+      tabKeys
+    } = this.state;
+    if (prevProps.children && children) {
       /**
        * To recalculate the dimensions of tabs we are checking the children length.
        * and also checking the tab id and their order.
        */
+
       let newTabKeys = [];
       React.Children.toArray(children).forEach(child => {
         if (child && child.props.id && child.type === childType) {
@@ -134,108 +140,124 @@ const Tabs = props => {
         }
       });
       let isSameTabKeys = newTabKeys.every((current, index) => tabKeys[index] === current);
-
       if (newTabKeys.length !== tabKeys.length || !isSameTabKeys) {
-        setRenderVirtualTabs(true);
-        setTabKeys(newTabKeys);
-        setTimeout(() => {
-          setTabDimensions(getTabDimensions());
-          setTotalDimension(getTotalDimensionLocal());
-          setRenderVirtualTabs(false);
+        this.setState({
+          renderVirtualTabs: true,
+          tabKeys: newTabKeys
+        }, () => {
+          totalDimension = this.getTotalDimension();
+          tabDimensions = this.getTabDimensions();
+          this.setState({
+            tabDimensions,
+            totalDimension,
+            renderVirtualTabs: false
+          });
         });
       }
-
-      if (newTabKeys.length === 1) {
-        moveHighlight();
+      if (prevProps.selectedTab !== selectedTab || newTabKeys.length === 1) {
+        this.moveHighlight();
       }
     }
-  });
-  useEffectCallOnlyAfterState(() => {
-    tabsObserver.current && tabsObserver.current.replaceResizeHandler(onResize);
-
-    if (children) {
-      moveHighlight();
-    }
-  }, [selectedTab]);
-
-  function moveHighlight() {
-    let node = highlight.current;
-
+  }
+  moveHighlight() {
+    let {
+      isAnimate,
+      needTabBorder,
+      selectedTab,
+      align
+    } = this.props;
+    let {
+      highlightInitialDimension
+    } = this.state;
+    let node = this.highlight;
     if (isAnimate && needTabBorder && node) {
-      let tabActive = tabElement.current[selectedTab];
-
+      let tabActive = this[selectedTab];
       if (tabActive) {
         let position, dimension;
-
         if (align === 'vertical') {
           position = tabActive.offsetLeft;
           dimension = tabActive.offsetWidth;
-          node.style.transform = `translateX(${remConvert(position - highlightInitialDimension.current)}rem)`;
+          node.style.transform = `translateX(${remConvert(position - highlightInitialDimension)}rem)`;
           node.style.width = `${remConvert(dimension)}rem`;
         } else if (align === 'horizontal') {
           position = tabActive.offsetTop;
           dimension = tabActive.offsetHeight;
-          node.style.transform = `translateY(${remConvert(position - highlightInitialDimension.current)}rem)`;
+          node.style.transform = `translateY(${remConvert(position - highlightInitialDimension)}rem)`;
           node.style.height = `${remConvert(dimension)}rem`;
         }
       }
     }
   }
-
-  const getHighlightRef = useCallback(ele => {
-    highlight.current = ele;
-  }, []);
-  const getTabsRef = useCallback(ele => {
-    tabsEle.current = ele;
-
+  getHighlightRef(ele) {
+    this.highlight = ele;
+  }
+  getTabsRef(ele) {
+    this.tabsEle = ele;
     if (ele) {
-      tabsObserver.current.observe(ele);
+      this.tabsObserver.observe(ele);
     } else {
-      tabsObserver.current && tabsObserver.current.disconnect();
-    }
-  }, []);
-
-  function onSizeChange() {
-    let totalDimension = getTotalDimensionLocal();
-    setTotalDimension(totalDimension);
-
-    if (highlight.current) {
-      highlightInitialDimension.current = getHighlightDim();
-      moveHighlight();
+      this.tabsObserver && this.tabsObserver.disconnect();
     }
   }
-
-  function onResize(timer) {
-    if (tabsEle.current && isResponsive) {
+  onSizeChange() {
+    let totalDimension = this.getTotalDimension();
+    this.setState({
+      totalDimension
+    });
+    this.highlight && this.setState({
+      highlightInitialDimension: this.getHighlightDim()
+    }, () => {
+      this.moveHighlight();
+    });
+  }
+  onResize(timer) {
+    let {
+      isResponsive
+    } = this.props;
+    if (this.tabsEle && isResponsive) {
       if (!timer) {
-        onSizeChange();
+        this.onSizeChange();
       } else {
         setTimeout(() => {
-          onSizeChange();
+          this.onSizeChange();
         }, timer);
       }
     }
   }
-
-  function getTotalDimensionLocal() {
-    let totalDimension = tabsEle.current && getTotalDimension(tabsEle.current, align);
+  getTotalDimension() {
+    let {
+      align
+    } = this.props;
+    let totalDimension = this.tabsEle && getTotalDimension(this.tabsEle, align);
     return totalDimension;
   }
-
-  function getTabDimensions() {
+  getTabDimensions() {
+    let {
+      children,
+      align,
+      childType
+    } = this.props;
     let tabDimensions = {};
-    React.Children.forEach(children, child => /*#__PURE__*/React.isValidElement(child) && child.type === childType && tabElement.current[child.props.id] && Object.assign(tabDimensions, {
-      [child.props.id]: tabElement.current[child.props.id] && getTotalDimension(tabElement.current[child.props.id], align)
+    React.Children.forEach(children, child => /*#__PURE__*/React.isValidElement(child) && child.type === childType && this[child.props.id] && Object.assign(tabDimensions, {
+      [child.props.id]: this[child.props.id] && getTotalDimension(this[child.props.id], align)
     }));
     return tabDimensions;
   }
-
-  function responsiveTab(totalDimension, tabDimensions) {
+  responsiveTab(totalDimension, tabDimensions) {
+    let {
+      children,
+      maxTabsCount,
+      minTabsCount,
+      isResponsive
+    } = this.props;
     let mainTabs = [],
-        moreTabs = [],
-        otherTabs = [];
-
+      moreTabs = [],
+      otherTabs = [];
     if (totalDimension && isResponsive) {
+      let {
+        childType,
+        selectedTab
+      } = this.props;
       let selectedTabDimension = tabDimensions[selectedTab] || 0;
       let remainingDimension = totalDimension - selectedTabDimension;
       let maxTabsTobeVisible = maxTabsCount - 1;
@@ -245,7 +267,6 @@ const Tabs = props => {
           const elemDimension = tabDimensions[child.props.id];
           let isMaxCountExceeded = maxTabsTobeVisible <= 0 ? true : false;
           let isMinCountNotExceeded = minTabsToBeVisible < minTabsCount ? true : false;
-
           if (child.props.id === selectedTab) {
             mainTabs.push(child);
           } else if (isMinCountNotExceeded) {
@@ -264,7 +285,6 @@ const Tabs = props => {
           otherTabs.push(child);
         }
       });
-
       if (selectedTabDimension > totalDimension) {
         /* let { align } = this.props;
         let newDim = `${remConvert(totalDimension)}rem`;
@@ -275,9 +295,12 @@ const Tabs = props => {
           newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxHeight: newDim } }));
         }
         mainTabs = newTabs; */
-        setMaxDim(totalDimension);
+        this.setMaxDim(totalDimension);
       }
     } else if (!isResponsive) {
+      let {
+        childType
+      } = this.props;
       React.Children.forEach(children, child => {
         if (child && child.type === childType && child.props.id) {
           mainTabs.push(child);
@@ -288,55 +311,55 @@ const Tabs = props => {
     } else {
       moreTabs = children;
     }
-
     return {
       mainTabs,
       moreTabs,
       otherTabs
     };
   }
-
-  function getTabRef(refName, ele, isVirtual) {
-    if (ele) {
-      tabElement.current[refName] = ele;
-    } // tabElement.current[refName] = ele
-
-
+  getTabRef(refName, ele, isVirtual) {
+    this[refName] = ele;
     let key = isVirtual ? `virtual_${refName}` : refName;
-
     if (ele) {
-      tabObserver.current[key] = new ResizeObserver(onTabResize);
-      tabObserver.current[key].observe(ele);
+      this.tabObserver[key] = new ResizeObserver(this.onTabResize);
+      this.tabObserver[key].observe(ele);
     } else {
-      if (tabObserver.current && tabObserver.current[key]) {
-        tabObserver.current[key].disconnect();
+      if (this.tabObserver && this.tabObserver[key]) {
+        this.tabObserver[key].disconnect();
       }
     }
   }
-
-  function moreTabSelect(tab, value, index, e) {
+  moreTabSelect(tab, value, index, e) {
+    let {
+      onSelect
+    } = this.props;
     if (e && e.target && e.target.parentElement.tagName === 'A' && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
       cancelBubblingEffect(e);
       return;
     }
-
     e.preventDefault();
     onSelect(tab);
   }
-
-  function onScrollLocal(e) {
+  onScroll(e) {
     e.persist();
+    let {
+      onScroll
+    } = this.props;
     onScroll && throttle(onScroll, 100, e);
   }
-
-  function togglePopupLocal(e) {
+  togglePopup(e) {
+    let {
+      boxPosition,
+      togglePopup,
+      align,
+      removeClose
+    } = this.props;
     removeClose && removeClose(e);
     let popupPosition = align === 'vertical' ? 'bottomLeft' : 'rightTop';
     boxPosition = boxPosition ? boxPosition : popupPosition;
     togglePopup(e, boxPosition);
   }
-
-  function responsiveFunc(_ref) {
+  responsiveFunc(_ref) {
     let {
       mediaQueryOR
     } = _ref;
@@ -346,9 +369,9 @@ const Tabs = props => {
       }])
     };
   }
-
-  function renderTabs(mainTabs, moreTabs, isVirtual) {
+  renderTabs(mainTabs, moreTabs, isVirtual) {
     let {
+      selectedTab,
       moreButtonClass,
       moreButtonActiveClass,
       moreBoxClass,
@@ -360,6 +383,7 @@ const Tabs = props => {
       isPopupOpen,
       getContainerRef,
       showTitleInMoreOptions,
+      onSelect,
       moreContainerClass,
       align,
       type,
@@ -370,8 +394,9 @@ const Tabs = props => {
       getTargetRef,
       position,
       customProps,
-      getCustomDropBoxHeaderPlaceHolder
-    } = props;
+      getCustomDropBoxHeaderPlaceHolder,
+      dataSelectorId
+    } = this.props;
     let {
       DropBoxProps = {},
       ListItemProps = {},
@@ -382,23 +407,19 @@ const Tabs = props => {
       if (!child) {
         return null;
       }
-
       let MainTab = child.type;
       let classProps = {};
-
       if (itemActiveClass) {
         classProps.activeClass = itemActiveClass;
       }
-
       if (itemClass) {
         classProps.className = itemClass;
       }
-
       return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(MainTab, _extends({}, child.props, {
         key: child.props.id,
-        getTabRef: getTabRef,
-        onSelect: onSelect // recalculateDimension={tabElement.current[recalculateDimension]}
-        ,
+        getTabRef: this.getTabRef,
+        onSelect: onSelect,
+        recalculateDimension: this.recalculateDimension,
         isActive: child.props.id === selectedTab,
         type: type,
         isAnimate: isAnimate,
@@ -413,7 +434,7 @@ const Tabs = props => {
     }, /*#__PURE__*/React.createElement(Container, _extends({
       className: `${btnstyle.buttonReset} ${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
       align: "both",
-      onClick: togglePopupLocal,
+      onClick: this.togglePopup,
       dataId: "moreTabs",
       eleRef: getTargetRef
     }, MoreButtonProps, {
@@ -424,7 +445,7 @@ const Tabs = props => {
       name: iconName,
       size: iconSize
     })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: responsiveFunc,
+      query: this.responsiveFunc,
       responsiveId: "Helmet"
     }, _ref2 => {
       let {
@@ -444,18 +465,17 @@ const Tabs = props => {
       }, DropBoxProps, {
         isResponsivePadding: true,
         needFocusScope: true,
-        onClose: togglePopupLocal
-      }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(props), /*#__PURE__*/React.createElement(Box, {
+        onClose: this.togglePopup
+      }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), /*#__PURE__*/React.createElement(Box, {
         flexible: true,
         shrink: true,
         scroll: "vertical",
         className: `${tabletMode ? '' : tabsStyle.menuBox} ${moreBoxClass}`,
-        onScroll: onScrollLocal
+        onScroll: this.onScroll
       }, React.Children.map(moreTabs, child => {
         if (!child) {
           return null;
         }
-
         let {
           text,
           id,
@@ -469,7 +489,7 @@ const Tabs = props => {
         return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(ListItem, _extends({
           key: id,
           value: value,
-          onClick: moreTabSelect,
+          onClick: this.moreTabSelect,
           id: id,
           title: title || text,
           isLink: isLink,
@@ -484,40 +504,62 @@ const Tabs = props => {
       })));
     })) : null);
   }
-
-  let {
-    mainTabs,
-    moreTabs,
-    otherTabs
-  } = responsiveTab(totalDimension, tabDimensions);
-  let appearanceClass = cs([tabsStyle[type], needBorder && tabsStyle[`${type}_border`], needPadding && tabsStyle[`${type}_padding`]]);
-  let tabsClass = cs([tabsStyle.tab, className, needAppearance && appearanceClass]);
-  let hlClass = cs([tabsStyle.highlight, highlightClass, isAnimate && tabsStyle.lineAnimate]);
-  return /*#__PURE__*/React.createElement(Box, {
-    className: containerClass,
-    dataSelectorId: dataSelectorId
-  }, /*#__PURE__*/React.createElement(Container, {
-    alignBox: align === 'vertical' ? 'row' : 'column',
-    className: tabsClass,
-    style: style
-  }, /*#__PURE__*/React.createElement(Box, {
-    eleRef: getTabsRef,
-    flexible: true
-  }, renderVirtualTabs && /*#__PURE__*/React.createElement(Container, {
-    alignBox: align === 'vertical' ? 'row' : 'column',
-    className: tabsStyle.hidden
-  }, renderTabs(children, [], true)), /*#__PURE__*/React.createElement(Container, {
-    alignBox: align === 'vertical' ? 'row' : 'column'
-  }, renderTabs(mainTabs, moreTabs, false))), otherTabs.length ? /*#__PURE__*/React.createElement(Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/React.createElement("div", {
-    className: hlClass,
-    ref: getHighlightRef,
-    "data-id": dataId,
-    "data-test-id": dataId
-  })));
-};
-
+  render() {
+    let {
+      style,
+      className,
+      dataId,
+      highlightClass,
+      type,
+      isAnimate,
+      needTabBorder,
+      needBorder,
+      needPadding,
+      align,
+      needAppearance,
+      children,
+      containerClass,
+      dataSelectorId
+    } = this.props;
+    let {
+      totalDimension,
+      tabDimensions,
+      renderVirtualTabs
+    } = this.state;
+    let {
+      mainTabs,
+      moreTabs,
+      otherTabs
+    } = this.responsiveTab(totalDimension, tabDimensions);
+    let appearanceClass = cs([tabsStyle[type], needBorder && tabsStyle[`${type}_border`], needPadding && tabsStyle[`${type}_padding`]]);
+    let tabsClass = cs([tabsStyle.tab, className, needAppearance && appearanceClass]);
+    let hlClass = cs([tabsStyle.highlight, highlightClass, isAnimate && tabsStyle.lineAnimate]);
+    return /*#__PURE__*/React.createElement(Box, {
+      className: containerClass,
+      dataSelectorId: dataSelectorId
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: align === 'vertical' ? 'row' : 'column',
+      className: tabsClass,
+      style: style
+    }, /*#__PURE__*/React.createElement(Box, {
+      eleRef: this.getTabsRef,
+      flexible: true
+    }, renderVirtualTabs && /*#__PURE__*/React.createElement(Container, {
+      alignBox: align === 'vertical' ? 'row' : 'column',
+      className: tabsStyle.hidden
+    }, this.renderTabs(children, [], true)), /*#__PURE__*/React.createElement(Container, {
+      alignBox: align === 'vertical' ? 'row' : 'column'
+    }, this.renderTabs(mainTabs, moreTabs, false))), otherTabs.length ? /*#__PURE__*/React.createElement(Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/React.createElement("div", {
+      className: hlClass,
+      ref: this.getHighlightRef,
+      "data-id": dataId,
+      "data-test-id": dataId
+    })));
+  }
+}
 Tabs.propTypes = Tabs_propTypes;
-Tabs.defaultProps = { ...Tabs_defaultProps,
+Tabs.defaultProps = {
+  ...Tabs_defaultProps,
   childType: Tab
 };
 export default Popup(Tabs);