@zohodesk/components 1.0.0-temp-42 → 1.0.0-temp-43

package/es/Responsive/docs/Responsive__Custom.docs.js

@@ -5,10 +5,9 @@ import Radio from '../../Radio/Radio'; // eslint-disable-next-line css-modules/n
 
 import style from './style.module.css'; // eslint-disable-next-line react/prop-types
 
-function WindowSizeBar(_ref) {
-  let {
-    isTouchDevice
-  } = _ref;
+function WindowSizeBar({
+  isTouchDevice
+}) {
   let [{
     windowWidth,
     windowHeight
@@ -45,12 +44,11 @@ export default class Responsive__Custom extends React.Component {
     this.switchToOr = this.handleMethodChange.bind(this, 'orFunction');
   }
 
-  customQuery(_ref2) {
-    let {
-      mediaQueryOR,
-      mediaQueryAND,
-      isTouchDevice
-    } = _ref2;
+  customQuery({
+    mediaQueryOR,
+    mediaQueryAND,
+    isTouchDevice
+  }) {
     const {
       method
     } = this.state;
@@ -154,45 +152,42 @@ export default class Responsive__Custom extends React.Component {
     } = this.state;
     return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ResponsiveSender, null, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.customQuery
-    }, _ref3 => {
-      let {
-        isQureyMatched,
-        isTouchDevice
-      } = _ref3;
-      return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(WindowSizeBar, {
-        isTouchDevice: isTouchDevice
-      }), /*#__PURE__*/React.createElement(Box, {
-        flexible: true,
-        scroll: "vertical"
-      }, /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        align: "vertical",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Radio, {
-        text: "AND Function",
-        onChange: this.switchToAnd,
-        name: "AndFunction",
-        checked: method === 'AndFunction'
-      }), /*#__PURE__*/React.createElement("div", {
-        style: {
-          margin: '20px'
-        }
-      }, /*#__PURE__*/React.createElement(Radio, {
-        text: "OR Function",
-        onChange: this.switchToOr,
-        name: "orFunction",
-        checked: method === 'orFunction'
-      }))), /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        align: "both",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Box, {
-        shrink: true,
-        className: ` ${style.box} ${isQureyMatched ? style.selected : ''} `
-      }, "minWidth: 700, maxWidth: 800 ||  minHeight: 700, maxHeight: 800"))));
-    })));
+    }, ({
+      isQureyMatched,
+      isTouchDevice
+    }) => /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(WindowSizeBar, {
+      isTouchDevice: isTouchDevice
+    }), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      scroll: "vertical"
+    }, /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      alignBox: "row",
+      align: "vertical",
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Radio, {
+      text: "AND Function",
+      onChange: this.switchToAnd,
+      name: "AndFunction",
+      checked: method === 'AndFunction'
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '20px'
+      }
+    }, /*#__PURE__*/React.createElement(Radio, {
+      text: "OR Function",
+      onChange: this.switchToOr,
+      name: "orFunction",
+      checked: method === 'orFunction'
+    }))), /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      alignBox: "row",
+      align: "both",
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Box, {
+      shrink: true,
+      className: ` ${style.box} ${isQureyMatched ? style.selected : ''} `
+    }, "minWidth: 700, maxWidth: 800 ||  minHeight: 700, maxHeight: 800")))))));
   }
 
 }

package/es/Responsive/docs/Responsive__default.docs.js

@@ -8,83 +8,80 @@ import { Container, Box } from '../../Layout';
 import style from './style.module.css';
 export default class Responsive__default extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ResponsiveReceiver, null, _ref => {
-      let {
-        breakPoint,
-        deviceUpto,
-        deviceBetween,
-        deviceOnly,
-        isTouchDevice
-      } = _ref;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-        className: style.header
-      }, ` ${breakPoint} ${isTouchDevice} `), /*#__PURE__*/React.createElement(Box, {
-        flexible: true,
-        scroll: "vertical"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: style.subHeading
-      }, "Common Break Points"), /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MOBILE']) ? style.selected : ''} `
-      }, "MOBILE - 480"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['TABLET_S']) ? style.selected : ''}  `
-      }, "TABLET_S - 640"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['TABLET']) ? style.selected : ''} `
-      }, "TABLET - 768"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['LAPTOP_S']) ? style.selected : ''}  `
-      }, "LAPTOP_S - 1024"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['LAPTOP']) ? style.selected : ''} `
-      }, "LAPTOP - 1440")), /*#__PURE__*/React.createElement("div", {
-        className: style.subHeading
-      }, "Other Break Points"), /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MONITOR']) ? style.selected : ''} `
-      }, "MONITOR - 1920"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MONITOR_M']) ? style.selected : ''} `
-      }, "MONITOR_M - 1600"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['LAPTOP_M']) ? style.selected : ''}  `
-      }, "LAPTOP_M - 1280"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['TABLET_M']) ? style.selected : ''} `
-      }, "TABLET_M - 720"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MOBILE_M']) ? style.selected : ''} `
-      }, "MOBILE_M - 375.04"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MOBILE_S']) ? style.selected : ''}  `
-      }, "MOBILE_S - 360"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MOBILE_XS']) ? style.selected : ''} `
-      }, "MOBILE_XS - 320")), /*#__PURE__*/React.createElement("div", {
-        className: style.subHeading
-      }, "Device Between"), /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceBetween('MOBILE_XS', 'TABLET') ? style.selected : ''} `
-      }, "MOBILE - TABLET"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceBetween('TABLET_M', 'LAPTOP') ? style.selected : ''} `
-      }, "TABLET - LAPTOP"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceBetween('LAPTOP_M', 'MONITOR') ? style.selected : ''}  `
-      }, "LAPTOP - MONITOR")), /*#__PURE__*/React.createElement("div", {
-        className: style.subHeading
-      }, "Device Upto"), /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceUpto('MONITOR') ? style.selected : ''} `
-      }, "MONITOR"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceUpto('LAPTOP') ? style.selected : ''} `
-      }, "LAPTOP"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceUpto('TABLET') ? style.selected : ''}  `
-      }, "TABLET"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceUpto('MOBILE') ? style.selected : ''}  `
-      }, "MOBILE"))));
-    }));
+    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ResponsiveReceiver, null, ({
+      breakPoint,
+      deviceUpto,
+      deviceBetween,
+      deviceOnly,
+      isTouchDevice
+    }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+      className: style.header
+    }, ` ${breakPoint} ${isTouchDevice} `), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      scroll: "vertical"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.subHeading
+    }, "Common Break Points"), /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      alignBox: "row",
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['MOBILE']) ? style.selected : ''} `
+    }, "MOBILE - 480"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['TABLET_S']) ? style.selected : ''}  `
+    }, "TABLET_S - 640"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['TABLET']) ? style.selected : ''} `
+    }, "TABLET - 768"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['LAPTOP_S']) ? style.selected : ''}  `
+    }, "LAPTOP_S - 1024"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['LAPTOP']) ? style.selected : ''} `
+    }, "LAPTOP - 1440")), /*#__PURE__*/React.createElement("div", {
+      className: style.subHeading
+    }, "Other Break Points"), /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      alignBox: "row",
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['MONITOR']) ? style.selected : ''} `
+    }, "MONITOR - 1920"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['MONITOR_M']) ? style.selected : ''} `
+    }, "MONITOR_M - 1600"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['LAPTOP_M']) ? style.selected : ''}  `
+    }, "LAPTOP_M - 1280"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['TABLET_M']) ? style.selected : ''} `
+    }, "TABLET_M - 720"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['MOBILE_M']) ? style.selected : ''} `
+    }, "MOBILE_M - 375.04"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['MOBILE_S']) ? style.selected : ''}  `
+    }, "MOBILE_S - 360"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['MOBILE_XS']) ? style.selected : ''} `
+    }, "MOBILE_XS - 320")), /*#__PURE__*/React.createElement("div", {
+      className: style.subHeading
+    }, "Device Between"), /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      alignBox: "row",
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceBetween('MOBILE_XS', 'TABLET') ? style.selected : ''} `
+    }, "MOBILE - TABLET"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceBetween('TABLET_M', 'LAPTOP') ? style.selected : ''} `
+    }, "TABLET - LAPTOP"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceBetween('LAPTOP_M', 'MONITOR') ? style.selected : ''}  `
+    }, "LAPTOP - MONITOR")), /*#__PURE__*/React.createElement("div", {
+      className: style.subHeading
+    }, "Device Upto"), /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      alignBox: "row",
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceUpto('MONITOR') ? style.selected : ''} `
+    }, "MONITOR"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceUpto('LAPTOP') ? style.selected : ''} `
+    }, "LAPTOP"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceUpto('TABLET') ? style.selected : ''}  `
+    }, "TABLET"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceUpto('MOBILE') ? style.selected : ''}  `
+    }, "MOBILE"))))));
   }
 
 }

package/es/Responsive/sizeObservers.js

@@ -68,11 +68,7 @@ export class Subscribale {
     this.subscribers.length && this.disconnect();
   }
 
-  dispatch() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
+  dispatch(...args) {
     this.subscribers.forEach(subscriber => {
       subscriber(...args);
     });

package/es/Ribbon/__tests__/Ribbon.spec.js

@@ -1,3 +1,4 @@
+import "core-js/modules/web.url.to-json";
 import React from 'react';
 import Ribbon from '../Ribbon';
 import renderer from 'react-test-renderer';

package/es/RippleEffect/RippleEffect.js

@@ -10,9 +10,10 @@ export default function RippleEffect(props) {
     palette,
     hoverType,
     isNeedEffect,
-    needBorder
+    needBorder,
+    isCopyTextEnabled
   } = props;
-  let className = isNeedEffect ? `${style.effect} ${style[palette]} ${needBorder ? style.border : ''} ${style[`${hoverType}Hover`] ? style[`${hoverType}Hover`] : ''} ${isActive && !isDisabled ? style.active : ''} ${isDisabled ? '' : style.hoverEffect} ${isDisabled ? CssProvider('isDisabled') : ''}` : '';
+  let className = isNeedEffect ? `${style.effect} ${style[palette]} ${needBorder ? style.border : ''} ${style[`${hoverType}Hover`] ? style[`${hoverType}Hover`] : ''} ${isActive && !isDisabled ? style.active : ''} ${isDisabled ? '' : style.hoverEffect} ${isCopyTextEnabled ? style.notAllowed : isDisabled ? CssProvider('isDisabled') : ''}` : '';
   let child = React.Children.only(children);
   return /*#__PURE__*/React.cloneElement(child, {
     className: `${child.props.className || ''} ${className}`
@@ -24,7 +25,8 @@ RippleEffect.defaultProps = {
   isNeedEffect: true,
   needBorder: true,
   hoverType: 'default',
-  palette: 'default'
+  palette: 'default',
+  isCopyTextEnabled: false
 };
 RippleEffect.propTypes = {
   children: PropTypes.node,
@@ -33,7 +35,8 @@ RippleEffect.propTypes = {
   isDisabled: PropTypes.bool,
   isNeedEffect: PropTypes.bool,
   needBorder: PropTypes.bool,
-  palette: PropTypes.oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger'])
+  palette: PropTypes.oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
+  isCopyTextEnabled: PropTypes.bool
 };
 
 if (false) {

package/es/RippleEffect/RippleEffect.module.css

@@ -65,3 +65,6 @@
 .hoverEffect:hover.primaryDark.bgHover, .hoverEffect:focus.primaryDark.bgHover {
   background-color: var(--zdt_rippleeffect_primary_dark_bg);
 }
+.notAllowed {
+  cursor: not-allowed;
+}

package/es/RippleEffect/docs/RippleEffect__default.docs.js

@@ -86,7 +86,7 @@ export default class RippleEffect__default extends React.Component {
         fontSize: '13px',
         padding: '4px 9px 7px',
         cursor: 'pointer',
-        color: 'var(--dot_text_strongGreen)'
+        color: 'var(--dot_strongGreen)'
       }
     }, "Green"))), /*#__PURE__*/React.createElement("div", {
       style: {
@@ -100,7 +100,7 @@ export default class RippleEffect__default extends React.Component {
         fontSize: '13px',
         padding: '4px 9px 7px',
         cursor: 'pointer',
-        color: 'var(--dot_text_brightRed)'
+        color: 'var(--dot_brightRed)'
       }
     }, "Danger")))), /*#__PURE__*/React.createElement("div", {
       style: boxStyle
@@ -162,7 +162,7 @@ export default class RippleEffect__default extends React.Component {
         fontSize: '13px',
         padding: '4px 9px 7px',
         cursor: 'pointer',
-        color: 'var(--dot_text_strongGreen)'
+        color: 'var(--dot_strongGreen)'
       }
     }, "Green"))), /*#__PURE__*/React.createElement("div", {
       style: {
@@ -177,7 +177,7 @@ export default class RippleEffect__default extends React.Component {
         fontSize: '13px',
         padding: '4px 9px 7px',
         cursor: 'pointer',
-        color: 'var(--dot_text_brightRed)'
+        color: 'var(--dot_brightRed)'
       }
     }, "Danger")))), /*#__PURE__*/React.createElement("div", {
       style: boxStyle
@@ -223,7 +223,7 @@ export default class RippleEffect__default extends React.Component {
         fontSize: '13px',
         padding: '4px 9px 7px',
         cursor: 'pointer',
-        color: 'var(--dot_text_strongGreen)'
+        color: 'var(--dot_strongGreen)'
       }
     }, "Green"))), /*#__PURE__*/React.createElement("div", {
       style: {
@@ -238,7 +238,7 @@ export default class RippleEffect__default extends React.Component {
         fontSize: '13px',
         padding: '4px 9px 7px',
         cursor: 'pointer',
-        color: 'var(--dot_text_brightRed)'
+        color: 'var(--dot_brightRed)'
       }
     }, "Danger"))), /*#__PURE__*/React.createElement("div", {
       style: {
@@ -328,7 +328,7 @@ export default class RippleEffect__default extends React.Component {
       style: {
         fontSize: '13px',
         padding: '4px 9px 7px',
-        color: 'var(--dot_text_strongGreen)'
+        color: 'var(--dot_strongGreen)'
       }
     }, "Green")))), /*#__PURE__*/React.createElement("div", {
       style: boxStyle
@@ -405,7 +405,7 @@ export default class RippleEffect__default extends React.Component {
         fontSize: '13px',
         padding: '4px 9px 7px',
         cursor: 'pointer',
-        color: 'var(--dot_text_strongGreen)'
+        color: 'var(--dot_strongGreen)'
       }
     }, "Green"))), /*#__PURE__*/React.createElement("div", {
       style: {

package/es/Select/GroupSelect.js

@@ -489,8 +489,7 @@ export class GroupSelectComponent extends PureComponent {
     }
   }
 
-  handleFetchOptions(APICall) {
-    let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  handleFetchOptions(APICall, searchStr = '') {
     // let funcArgs = args.slice(1, args.length);
     let {
       isFetchingOptions = false

package/es/Select/Select.js

@@ -455,8 +455,7 @@ export class SelectComponent extends Component {
     }
   }
 
-  handleFetchOptions(APICall) {
-    let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  handleFetchOptions(APICall, searchStr = '') {
     // let funcArgs = args.slice(1, args.length);
     let {
       isFetchingOptions = false

package/es/Select/Select.module.css

@@ -47,7 +47,7 @@
   padding: var(--zd_size10) 0;
 }
 .readonly {
-  composes: readonly from '../common/common.module.css';
+  --textboxicon_icon_cursor: not-allowed;
 }
 .transparentContainer .arrowIcon {
   opacity: 0;

package/es/Select/SelectWithAvatar.js

@@ -141,7 +141,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       tagSize,
       groupName,
       i18nKeys,
-      htmlId
+      htmlId,
+      needEffect
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -164,7 +165,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${className ? className : ''}`,
+      className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : ''
     }, /*#__PURE__*/React.createElement(Container, {
@@ -342,7 +343,8 @@ SelectWithAvatarComponent.propTypes = {
   title: PropTypes.string,
   togglePopup: PropTypes.func,
   valueField: PropTypes.string,
-  htmlId: PropTypes.string
+  htmlId: PropTypes.string,
+  needEffect: PropTypes.bool
 };
 SelectWithAvatarComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -363,7 +365,8 @@ SelectWithAvatarComponent.defaultProps = {
   dataId: 'selectWithAvatar',
   borderColor: 'default',
   isSearchClearOnClose: true,
-  i18nKeys: {}
+  i18nKeys: {},
+  needEffect: true
 };
 SelectWithAvatarComponent.displayName = 'SelectWithAvatar';
 let SelectWithAvatar = Popup(SelectWithAvatarComponent);

package/es/Select/docs/Select__default.docs.js

@@ -87,8 +87,7 @@ export default class Select__default extends React.Component {
     });
   }
 
-  customChildren() {
-    let serach = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  customChildren(serach = {}) {
     return /*#__PURE__*/React.createElement("div", null, serach.searchString, "Custom Children");
   }
 

package/es/Stencils/__tests__/Stencils.spec.js

@@ -1,3 +1,4 @@
+import "core-js/modules/web.url.to-json";
 import React from 'react';
 import Stencils from '../Stencils';
 import renderer from 'react-test-renderer';

package/es/Tab/Tab.js

@@ -22,33 +22,32 @@ const tabTypes = {
     tab: 'tabDelta'
   }
 };
-export default function Tab(_ref) {
-  let {
-    id,
-    style,
-    text,
-    children,
-    className,
-    dataId,
-    title,
-    titlePosition,
-    activeClass,
-    href,
-    isLink,
-    isDisabled,
-    tourId,
-    onClick,
-    isActive,
-    getTabRef,
-    onSelect,
-    type,
-    isAnimate,
-    needBorder,
-    needAppearance,
-    align,
-    isVirtual,
-    customProps
-  } = _ref;
+export default function Tab({
+  id,
+  style,
+  text,
+  children,
+  className,
+  dataId,
+  title,
+  titlePosition,
+  activeClass,
+  href,
+  isLink,
+  isDisabled,
+  tourId,
+  onClick,
+  isActive,
+  getTabRef,
+  onSelect,
+  type,
+  isAnimate,
+  needBorder,
+  needAppearance,
+  align,
+  isVirtual,
+  customProps
+}) {
   let clickListener = useCallback(event => {
     if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {
       event && event.stopPropagation();

package/es/Tab/TabContent.js

@@ -4,23 +4,20 @@ import { Container } from '../Layout';
 import style from './TabContent.module.css';
 /* eslint-disable react/forbid-component-props */
 
-const TabContent = _ref => {
-  let {
-    children,
-    scroll,
-    dataId,
-    id
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Container, {
-    className: style.container,
-    scroll: scroll,
-    dataId: `${dataId}_TabContent`,
-    isScrollAttribute: true,
-    "aria-labelledby": id,
-    tabindex: "0",
-    role: "tabpanel"
-  }, children);
-};
+const TabContent = ({
+  children,
+  scroll,
+  dataId,
+  id
+}) => /*#__PURE__*/React.createElement(Container, {
+  className: style.container,
+  scroll: scroll,
+  dataId: `${dataId}_TabContent`,
+  isScrollAttribute: true,
+  "aria-labelledby": id,
+  tabindex: "0",
+  role: "tabpanel"
+}, children);
 
 TabContent.defaultProps = {
   dataId: 'tabContent'

package/es/Tab/TabContentWrapper.js

@@ -3,23 +3,20 @@ import { PropTypes } from 'prop-types';
 import { Box } from '../Layout';
 /* eslint-disable react/forbid-component-props */
 
-const TabContentWrapper = _ref => {
-  let {
-    style,
-    className,
-    children,
-    dataId,
-    selectedTab,
-    onScroll
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    style: style,
-    dataId: dataId,
-    className: className,
-    onScroll: onScroll
-  }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
-};
+const TabContentWrapper = ({
+  style,
+  className,
+  children,
+  dataId,
+  selectedTab,
+  onScroll
+}) => /*#__PURE__*/React.createElement(Box, {
+  flexible: true,
+  style: style,
+  dataId: dataId,
+  className: className,
+  onScroll: onScroll
+}, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
 
 TabContentWrapper.defaultProps = {
   children: []