@zohodesk/components 1.0.0-temp-255 → 1.0.0-temp-252.4

package/es/Select/SelectWithAvatar.js

@@ -118,9 +118,10 @@ class SelectWithAvatarComponent extends SelectComponent {
     }
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -267,94 +268,97 @@ class SelectWithAvatarComponent extends SelectComponent {
     }, TextBoxProps)))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, ({
-      tabletMode
-    }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-      animationStyle: animationStyle,
-      boxPosition: position || `${defaultDropBoxPosition}Center`,
-      getRef: getContainerRef,
-      isActive: isPopupReady,
-      isAnimate: true,
-      isArrow: false,
-      onClick: removeClose,
-      needResponsive: needResponsive,
-      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-      positionsOffset: positionsOffset,
-      targetOffset: targetOffset,
-      isRestrictScroll: isRestrictScroll,
-      isPadding: false,
-      isResponsivePadding: true,
-      alignBox: "row",
-      dataId: `${dataId}_dropbox`,
-      customClass: {
-        customDropBox: dropBoxClass
-      }
-    }, isLoading ? /*#__PURE__*/React.createElement(Container, {
-      align: "both",
-      className: style.loader
-    }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Card, {
-      onScroll: this.handleScroll
-    }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-      className: `${selectStyle.search} ${selectStyle[size]}`
-    }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
-      inputRef: this.searchInputRef,
-      maxLength: maxLength,
-      onChange: this.handleSearch,
-      onKeyDown: this.handleKeyDown,
-      placeHolder: searchBoxPlaceHolder,
-      size: searchBoxSize,
-      value: searchStr,
-      onClear: this.handleClearSearch,
-      dataId: `${dataId}_search`,
-      a11y: {
-        ariaAutocomplete: 'list',
-        ariaControls: setAriaId,
-        ariaDescribedby: ariaErrorId
-      },
-      autoComplete: false
-    }, DropdownSearchTextBoxProps)))) : null, /*#__PURE__*/React.createElement(CardContent, {
-      shrink: true,
-      customClass: `${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
-      eleRef: this.suggestionContainerRef
-    }, groupName ? /*#__PURE__*/React.createElement("div", {
-      className: style.title
-    }, /*#__PURE__*/React.createElement(DropDownHeading, {
-      text: groupName,
-      a11y: {
-        role: 'heading'
-      }
-    })) : null, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
-      dataId: `${dataId}_Options`,
-      activeId: selectedId,
-      suggestions: suggestions,
-      getRef: this.suggestionItemRef,
-      hoverOption: hoverIndex,
-      onClick: this.handleChange,
-      onMouseEnter: this.handleMouseEnter,
-      needTick: true,
-      needBorder: false,
-      selectedOptions: [selectedId],
-      className: selectStyle.listItemContainer,
-      htmlId: setAriaId,
-      a11y: {
-        ariaParentRole: 'listbox',
-        role: 'option'
-      }
-    }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
-      isLoading: isFetchingOptions,
-      options: options,
-      searchString: searchStr,
-      suggestions: suggestions,
-      renderCustomEmptyState: renderCustomEmptyState,
-      dataId: dataId,
-      i18nKeys: i18nKeys,
-      htmlId: ariaErrorId
-    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      align: "both"
-    }, /*#__PURE__*/React.createElement(Loader, null))))))) : null);
+    }, _ref2 => {
+      let {
+        tabletMode
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+        animationStyle: animationStyle,
+        boxPosition: position || `${defaultDropBoxPosition}Center`,
+        getRef: getContainerRef,
+        isActive: isPopupReady,
+        isAnimate: true,
+        isArrow: false,
+        onClick: removeClose,
+        needResponsive: needResponsive,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
+        isPadding: false,
+        isResponsivePadding: true,
+        alignBox: "row",
+        dataId: `${dataId}_dropbox`,
+        customClass: {
+          customDropBox: dropBoxClass
+        }
+      }, isLoading ? /*#__PURE__*/React.createElement(Container, {
+        align: "both",
+        className: style.loader
+      }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, /*#__PURE__*/React.createElement(Card, {
+        onScroll: this.handleScroll
+      }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
+        className: `${selectStyle.search} ${selectStyle[size]}`
+      }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
+        inputRef: this.searchInputRef,
+        maxLength: maxLength,
+        onChange: this.handleSearch,
+        onKeyDown: this.handleKeyDown,
+        placeHolder: searchBoxPlaceHolder,
+        size: searchBoxSize,
+        value: searchStr,
+        onClear: this.handleClearSearch,
+        dataId: `${dataId}_search`,
+        a11y: {
+          ariaAutocomplete: 'list',
+          ariaControls: setAriaId,
+          ariaDescribedby: ariaErrorId
+        },
+        autoComplete: false
+      }, DropdownSearchTextBoxProps)))) : null, /*#__PURE__*/React.createElement(CardContent, {
+        shrink: true,
+        customClass: `${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
+        eleRef: this.suggestionContainerRef
+      }, groupName ? /*#__PURE__*/React.createElement("div", {
+        className: style.title
+      }, /*#__PURE__*/React.createElement(DropDownHeading, {
+        text: groupName,
+        a11y: {
+          role: 'heading'
+        }
+      })) : null, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+        dataId: `${dataId}_Options`,
+        activeId: selectedId,
+        suggestions: suggestions,
+        getRef: this.suggestionItemRef,
+        hoverOption: hoverIndex,
+        onClick: this.handleChange,
+        onMouseEnter: this.handleMouseEnter,
+        needTick: true,
+        needBorder: false,
+        selectedOptions: [selectedId],
+        className: selectStyle.listItemContainer,
+        htmlId: setAriaId,
+        a11y: {
+          ariaParentRole: 'listbox',
+          role: 'option'
+        }
+      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
+        isLoading: isFetchingOptions,
+        options: options,
+        searchString: searchStr,
+        suggestions: suggestions,
+        renderCustomEmptyState: renderCustomEmptyState,
+        dataId: dataId,
+        i18nKeys: i18nKeys,
+        htmlId: ariaErrorId
+      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        align: "both"
+      }, /*#__PURE__*/React.createElement(Loader, null))))));
+    }) : null);
   }
 
 }

package/es/Select/SelectWithIcon.js

@@ -268,7 +268,8 @@ class SelectWithIcon extends Component {
     isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchValue);
   }
 
-  handleFetchOptions(APICall, searchValue = '') {
+  handleFetchOptions(APICall) {
+    let searchValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     let {
       isFetchingOptions = false
     } = this.state;
@@ -299,9 +300,10 @@ class SelectWithIcon extends Component {
     }
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -457,109 +459,112 @@ class SelectWithIcon extends Component {
     })))))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, ({
-      tabletMode
-    }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-      animationStyle: animationStyle,
-      boxPosition: position,
-      isActive: isPopupReady,
-      isAnimate: true,
-      isArrow: false,
-      onClick: removeClose,
-      getRef: getContainerRef,
-      needResponsive: needResponsive,
-      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-      positionsOffset: positionsOffset,
-      targetOffset: targetOffset,
-      isRestrictScroll: isRestrictScroll,
-      dataId: `${dataId}_suggestions`,
-      size: boxSize,
-      isPadding: false,
-      isResponsivePadding: true,
-      alignBox: "row",
-      customClass: {
-        customDropBox: dropBoxClass
-      }
-    }, isLoading ? /*#__PURE__*/React.createElement(Container, {
-      align: "both",
-      className: style.loader
-    }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Card, {
-      onScroll: this.handleScroll,
-      htmlId: setAriaId,
-      a11y: {
-        role: 'listbox'
-      }
-    }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-      className: `${style.search} ${style[size]}`
-    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-      onClear: this.onSearchClear,
-      onChange: this.onSearch,
-      placeHolder: searchBoxPlaceHolder,
-      value: searchValue,
-      maxLength: maxLength,
-      onKeyDown: this.handleKeyDown,
-      inputRef: this.searchInputRef,
-      size: searchBoxSize,
-      dataId: `${dataId}_search`,
-      a11y: {
-        ariaDescribedby: ariaErrorId
-      },
-      autoComplete: false,
-      customProps: {
-        TextBoxProps: DropdownSearchTextBoxProps
-      }
-    }))) : null, /*#__PURE__*/React.createElement(CardContent, {
-      customClass: `${tabletMode ? style.responsivedropBoxList : style.dropBoxList} ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
-      shrink: true,
-      eleRef: this.scrollContentRef,
-      dataId: `${dataId}_Options`
-    }, options.length ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((options, i) => {
+    }, _ref2 => {
       let {
-        iconName,
-        iconSize,
-        iconColor
-      } = options;
-      return /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
-        key: options[idKey],
-        value: options[valueKey],
-        secondaryValue: options[secondaryValueKey],
-        size: "medium",
-        onClick: this.handleChange,
-        id: options[idKey],
-        index: i,
-        title: options[valueKey],
-        palette: "default",
-        dataId: options[idKey],
-        iconName: iconName,
-        iconSize: iconSize,
-        iconClass: iconColor,
-        active: selectedId === options[idKey],
-        needBorder: needListBorder,
-        needTick: needTick,
-        onMouseEnter: this.handleMouseEnter,
-        highlight: selectedIndex === i,
-        getRef: this.itemRef,
+        tabletMode
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+        animationStyle: animationStyle,
+        boxPosition: position,
+        isActive: isPopupReady,
+        isAnimate: true,
+        isArrow: false,
+        onClick: removeClose,
+        getRef: getContainerRef,
+        needResponsive: needResponsive,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
+        dataId: `${dataId}_suggestions`,
+        size: boxSize,
+        isPadding: false,
+        isResponsivePadding: true,
+        alignBox: "row",
+        customClass: {
+          customDropBox: dropBoxClass
+        }
+      }, isLoading ? /*#__PURE__*/React.createElement(Container, {
+        align: "both",
+        className: style.loader
+      }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, /*#__PURE__*/React.createElement(Card, {
+        onScroll: this.handleScroll,
+        htmlId: setAriaId,
         a11y: {
-          role: 'option',
-          ariaSelected: selectedId === options[idKey],
-          ariaLabel: options[valueKey]
+          role: 'listbox'
         }
-      }, ListItemProps));
-    })) : /*#__PURE__*/React.createElement(EmptyState, {
-      isLoading: isFetchingOptions,
-      options: options,
-      searchString: searchValue,
-      suggestions: options,
-      renderCustomEmptyState: renderCustomEmptyState,
-      dataId: dataId,
-      i18nKeys: i18nKeys,
-      htmlId: ariaErrorId
-    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      align: "both"
-    }, /*#__PURE__*/React.createElement(Loader, null))))))) : null);
+      }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
+        className: `${style.search} ${style[size]}`
+      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+        onClear: this.onSearchClear,
+        onChange: this.onSearch,
+        placeHolder: searchBoxPlaceHolder,
+        value: searchValue,
+        maxLength: maxLength,
+        onKeyDown: this.handleKeyDown,
+        inputRef: this.searchInputRef,
+        size: searchBoxSize,
+        dataId: `${dataId}_search`,
+        a11y: {
+          ariaDescribedby: ariaErrorId
+        },
+        autoComplete: false,
+        customProps: {
+          TextBoxProps: DropdownSearchTextBoxProps
+        }
+      }))) : null, /*#__PURE__*/React.createElement(CardContent, {
+        customClass: `${tabletMode ? style.responsivedropBoxList : style.dropBoxList} ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
+        shrink: true,
+        eleRef: this.scrollContentRef,
+        dataId: `${dataId}_Options`
+      }, options.length ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((options, i) => {
+        let {
+          iconName,
+          iconSize,
+          iconColor
+        } = options;
+        return /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
+          key: options[idKey],
+          value: options[valueKey],
+          secondaryValue: options[secondaryValueKey],
+          size: "medium",
+          onClick: this.handleChange,
+          id: options[idKey],
+          index: i,
+          title: options[valueKey],
+          palette: "default",
+          dataId: options[idKey],
+          iconName: iconName,
+          iconSize: iconSize,
+          iconClass: iconColor,
+          active: selectedId === options[idKey],
+          needBorder: needListBorder,
+          needTick: needTick,
+          onMouseEnter: this.handleMouseEnter,
+          highlight: selectedIndex === i,
+          getRef: this.itemRef,
+          a11y: {
+            role: 'option',
+            ariaSelected: selectedId === options[idKey],
+            ariaLabel: options[valueKey]
+          }
+        }, ListItemProps));
+      })) : /*#__PURE__*/React.createElement(EmptyState, {
+        isLoading: isFetchingOptions,
+        options: options,
+        searchString: searchValue,
+        suggestions: options,
+        renderCustomEmptyState: renderCustomEmptyState,
+        dataId: dataId,
+        i18nKeys: i18nKeys,
+        htmlId: ariaErrorId
+      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        align: "both"
+      }, /*#__PURE__*/React.createElement(Loader, null))))));
+    }) : null);
   }
 
 }

package/es/Select/__tests__/Select.spec.js

@@ -618,12 +618,15 @@ describe('Select -', () => {
   });
   test('Should trigger onAddNewOption, when click on the custom search empty state button', () => {
     const addMessage = 'Add New Option';
-    const getCustomEmptyState = jest.fn(({
-      searchString,
-      onAddNewOption
-    }) => /*#__PURE__*/React.createElement("button", {
-      onClick: onAddNewOption
-    }, addMessage));
+    const getCustomEmptyState = jest.fn(_ref => {
+      let {
+        searchString,
+        onAddNewOption
+      } = _ref;
+      return /*#__PURE__*/React.createElement("button", {
+        onClick: onAddNewOption
+      }, addMessage);
+    });
     const mockOnAddNewOption = jest.fn();
     const {
       getByRole,

package/es/Tab/Tab.js

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

package/es/Tab/TabContent.js

@@ -5,22 +5,25 @@ import { Container } from "../Layout";
 import style from "./TabContent.module.css";
 /* eslint-disable react/forbid-component-props */
 
-const TabContent = ({
-  children,
-  scroll,
-  dataId,
-  id,
-  dataSelectorId
-}) => /*#__PURE__*/React.createElement(Container, {
-  className: style.container,
-  scroll: scroll,
-  dataId: `${dataId}_TabContent`,
-  isScrollAttribute: true,
-  "aria-labelledby": id,
-  tabindex: "-1",
-  role: "tabpanel",
-  dataSelectorId: dataSelectorId
-}, children);
+const TabContent = _ref => {
+  let {
+    children,
+    scroll,
+    dataId,
+    id,
+    dataSelectorId
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Container, {
+    className: style.container,
+    scroll: scroll,
+    dataId: `${dataId}_TabContent`,
+    isScrollAttribute: true,
+    "aria-labelledby": id,
+    tabindex: "-1",
+    role: "tabpanel",
+    dataSelectorId: dataSelectorId
+  }, children);
+};
 
 TabContent.defaultProps = TabContent_defaultProps;
 TabContent.propTypes = TabContent_propTypes;

package/es/Tab/TabContentWrapper.js

@@ -6,25 +6,28 @@ import { TabContentWrapper_propTypes } from "./props/propTypes";
 import { Box } from "../Layout";
 /* eslint-disable react/forbid-component-props */
 
-const TabContentWrapper = ({
-  style,
-  className,
-  children,
-  dataId,
-  selectedTab,
-  onScroll,
-  dataSelectorId,
-  tagName,
-  a11y
-}) => /*#__PURE__*/React.createElement(Box, _extends({
-  flexible: true,
-  style: style,
-  dataId: dataId,
-  className: className,
-  onScroll: onScroll,
-  dataSelectorId: dataSelectorId,
-  tagName: tagName
-}, a11y), React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
+const TabContentWrapper = _ref => {
+  let {
+    style,
+    className,
+    children,
+    dataId,
+    selectedTab,
+    onScroll,
+    dataSelectorId,
+    tagName,
+    a11y
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    flexible: true,
+    style: style,
+    dataId: dataId,
+    className: className,
+    onScroll: onScroll,
+    dataSelectorId: dataSelectorId,
+    tagName: tagName
+  }, a11y), React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
+};
 
 TabContentWrapper.defaultProps = TabContentWrapper_defaultProps;
 TabContentWrapper.propTypes = TabContentWrapper_propTypes;

package/es/Tab/TabWrapper.js

@@ -6,21 +6,22 @@ import { TabWrapper_propTypes } from "./props/propTypes";
 import { Container } from "../Layout";
 import { TAB_ALIGN_MAPPING } from "./utils/tabConfigs";
 
-function TabWrapper({
-  defaultTab,
-  hookToDisableInternalState,
-  onSelect,
-  type,
-  isAnimate,
-  needTabBorder,
-  needBorder,
-  needPadding,
-  needAppearance,
-  align,
-  dataId,
-  children,
-  dataSelectorId
-}) {
+function TabWrapper(_ref) {
+  let {
+    defaultTab,
+    hookToDisableInternalState,
+    onSelect,
+    type,
+    isAnimate,
+    needTabBorder,
+    needBorder,
+    needPadding,
+    needAppearance,
+    align,
+    dataId,
+    children,
+    dataSelectorId
+  } = _ref;
   let [selectedTabInternal, setSelected] = useState(!hookToDisableInternalState ? defaultTab || 0 : null);
   const setSelectedTab = useCallback(id => {
     if (!hookToDisableInternalState) {