@zohodesk/dot 1.0.0-temp-232 → 1.0.0-temp-230.4

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -177,11 +177,17 @@ export class ToggleDropDown extends Component {
 
     if (this.props.from == 'activityFilter') {
       //Temproary
-      const results = this.props.options.filter(({
-        isDisabled: id1
-      }) => !prevProps.options.some(({
-        isDisabled: id2
-      }) => id2 === id1));
+      const results = this.props.options.filter(_ref => {
+        let {
+          isDisabled: id1
+        } = _ref;
+        return !prevProps.options.some(_ref2 => {
+          let {
+            isDisabled: id2
+          } = _ref2;
+          return id2 === id1;
+        });
+      });
 
       if (results.length > 0) {
         this.setState({
@@ -431,7 +437,8 @@ export class ToggleDropDown 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;
@@ -462,9 +469,10 @@ export class ToggleDropDown extends Component {
     }
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
+  responsiveFunc(_ref3) {
+    let {
+      mediaQueryOR
+    } = _ref3;
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -609,137 +617,217 @@ export class ToggleDropDown extends Component {
     }) : null)))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, ({
-      tabletMode
-    }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
-      boxPosition: position,
-      isActive: isPopupReady,
-      onClick: removeClose,
-      size: boxSize,
-      right: right,
-      left: left,
-      top: top,
-      bottom: bottom,
-      isArrow: isArrow,
-      isAnimate: true,
-      getRef: getContainerRef,
-      customClass: {
-        customDropBoxWrap: style.dropBoxContainer,
-        customDropBox: customDropBox
-      },
-      needResponsive: needResponsive,
-      isPadding: isPadding,
-      tabindex: "0",
-      a11y: {
-        role: !isSearch ? 'menu' : undefined,
-        ariaLabelledby: !isSearch ? ariaTitleId : undefined
-      },
-      palette: palette,
-      isResponsivePadding: true,
-      needFocusScope: true,
-      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-      positionsOffset: positionsOffset,
-      targetOffset: targetOffset,
-      isRestrictScroll: isRestrictScroll,
-      customProps: {
-        focusScopeProps: {
-          loadNextOptions: this.handleGetNextOptions,
-          searchValue: searchValue,
-          isFetchingOptions: isFetchingOptions
-        }
-      },
-      dataId: `${dataId}_dropbox`
-    }, DropBoxProps, {
-      onClose: this.handleTogglePopup
-    }), /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
-      className: style.search
-    }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
-      placeHolder: placeHolderText,
-      onChange: this.handleChange,
-      value: searchValue,
-      onClear: this.onSearchClear,
-      size: searchBoxSize // inputRef={this.searchInputRef}
-      ,
-      customProps: {
-        TextBoxProps: {
-          'data-a11y-autofocus': true
+    }, _ref4 => {
+      let {
+        tabletMode
+      } = _ref4;
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
+        boxPosition: position,
+        isActive: isPopupReady,
+        onClick: removeClose,
+        size: boxSize,
+        right: right,
+        left: left,
+        top: top,
+        bottom: bottom,
+        isArrow: isArrow,
+        isAnimate: true,
+        getRef: getContainerRef,
+        customClass: {
+          customDropBoxWrap: style.dropBoxContainer,
+          customDropBox: customDropBox
+        },
+        needResponsive: needResponsive,
+        isPadding: isPadding,
+        tabindex: "0",
+        a11y: {
+          role: !isSearch ? 'menu' : undefined,
+          ariaLabelledby: !isSearch ? ariaTitleId : undefined
+        },
+        palette: palette,
+        isResponsivePadding: true,
+        needFocusScope: true,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
+        customProps: {
+          focusScopeProps: {
+            loadNextOptions: this.handleGetNextOptions,
+            searchValue: searchValue,
+            isFetchingOptions: isFetchingOptions
+          }
+        },
+        dataId: `${dataId}_dropbox`
+      }, DropBoxProps, {
+        onClose: this.handleTogglePopup
+      }), /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
+        className: style.search
+      }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
+        placeHolder: placeHolderText,
+        onChange: this.handleChange,
+        value: searchValue,
+        onClear: this.onSearchClear,
+        size: searchBoxSize // inputRef={this.searchInputRef}
+        ,
+        customProps: {
+          TextBoxProps: {
+            'data-a11y-autofocus': true
+          }
+        } //search
+        // onKeyDown={this.handleKeyDown}
+        ,
+        dataId: `${dataId}_search`,
+        a11y: {
+          role: 'combobox',
+          ariaOwns: ariaTitleId,
+          // ariaActivedescendant: allyOptionsArr[selectedIndex] && allyOptionsArr[selectedIndex][keyName],
+          ariaAutocomplete: 'list',
+          ariaHaspopup: true,
+          ariaExpanded: true
         }
-      } //search
-      // onKeyDown={this.handleKeyDown}
-      ,
-      dataId: `${dataId}_search`,
-      a11y: {
-        role: 'combobox',
-        ariaOwns: ariaTitleId,
-        // ariaActivedescendant: allyOptionsArr[selectedIndex] && allyOptionsArr[selectedIndex][keyName],
-        ariaAutocomplete: 'list',
-        ariaHaspopup: true,
-        ariaExpanded: true
-      }
-    }, TextBoxIconProps))) : null, title && options.length != 0 && /*#__PURE__*/React.createElement(Box, {
-      className: style.title
-    }, /*#__PURE__*/React.createElement(DropDownHeading, {
-      text: title,
-      htmlId: ariaTitleId,
-      palette: palette,
-      a11y: {
-        role: 'heading'
-      },
-      customClass: style.dropdown
-    })), /*#__PURE__*/React.createElement(Box, {
-      id: ariaTitleId,
-      flexible: true,
-      shrink: true,
-      scroll: "vertical",
-      preventParentScroll: "vertical",
-      dataId: `${dataId}_list`,
-      className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt} ${customListBox}`,
-      eleRef: this.scrollContentRef,
-      onScroll: this.handleScroll,
-      role: isSearch ? 'listbox' : 'menu',
-      "aria-labelledby": isSearch ? ariaTitleId : undefined,
-      "data-scroll": "true"
-    }, isDataLoaded ? options && options.length != 0 ? isGroupDropDown ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map(group => {
-      const groupName = group[groupNameKey];
-      const groupOptions = group[groupOptionsKey];
-      const {
-        needDivider
-      } = group;
-      return /*#__PURE__*/React.createElement(Fragment, {
-        key: `index${groupName}`
-      }, needDivider && /*#__PURE__*/React.createElement("div", {
-        className: style.seperatedLine
-      }), groupName && /*#__PURE__*/React.createElement("div", {
-        className: style.groupName
+      }, TextBoxIconProps))) : null, title && options.length != 0 && /*#__PURE__*/React.createElement(Box, {
+        className: style.title
       }, /*#__PURE__*/React.createElement(DropDownHeading, {
-        text: groupName,
+        text: title,
+        htmlId: ariaTitleId,
         palette: palette,
         a11y: {
           role: 'heading'
-        }
-      })), groupOptions && groupOptions.map(item => {
+        },
+        customClass: style.dropdown
+      })), /*#__PURE__*/React.createElement(Box, {
+        id: ariaTitleId,
+        flexible: true,
+        shrink: true,
+        scroll: "vertical",
+        preventParentScroll: "vertical",
+        dataId: `${dataId}_list`,
+        className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt} ${customListBox}`,
+        eleRef: this.scrollContentRef,
+        onScroll: this.handleScroll,
+        role: isSearch ? 'listbox' : 'menu',
+        "aria-labelledby": isSearch ? ariaTitleId : undefined,
+        "data-scroll": "true"
+      }, isDataLoaded ? options && options.length != 0 ? isGroupDropDown ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map(group => {
+        const groupName = group[groupNameKey];
+        const groupOptions = group[groupOptionsKey];
+        const {
+          needDivider
+        } = group;
+        return /*#__PURE__*/React.createElement(Fragment, {
+          key: `index${groupName}`
+        }, needDivider && /*#__PURE__*/React.createElement("div", {
+          className: style.seperatedLine
+        }), groupName && /*#__PURE__*/React.createElement("div", {
+          className: style.groupName
+        }, /*#__PURE__*/React.createElement(DropDownHeading, {
+          text: groupName,
+          palette: palette,
+          a11y: {
+            role: 'heading'
+          }
+        })), groupOptions && groupOptions.map(item => {
+          const {
+            iconName,
+            iconSize,
+            iconClass,
+            title,
+            palette: _palette,
+            disableTitle = '',
+            isDisabled = false,
+            secondaryValue
+          } = item;
+          listIndex += 1;
+          return iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
+            key: listIndex,
+            dataId: item[keyName],
+            value: item[keyName],
+            id: item[idName],
+            active: selectedId === item[idName],
+            onClick: this.onSelect.bind(this, item),
+            index: listIndex // highlight={selectedIndex === listIndex}
+            ,
+            disableTitle: disableTitle,
+            isDisabled: isDisabled,
+            iconName: iconName,
+            iconClass: iconClass,
+            iconSize: iconSize,
+            needTick: needTick,
+            needBorder: false // onMouseEnter={this.handleMouseEnter}
+            ,
+            getRef: this.itemRef,
+            title: title ? title : item[keyName],
+            palette: _palette || palette,
+            needMultiLineText: needMultiLineText,
+            autoHover: true,
+            a11y: {
+              role: isSearch ? 'option' : 'menuitem',
+              ariaSelected: selectedId === item[idName],
+              ariaLabel: item[keyName]
+            },
+            secondaryValue: secondaryValue
+          }, ListItemWithIconProps)) : /*#__PURE__*/React.createElement(ListItem, _extends({
+            key: listIndex,
+            dataId: item[keyName],
+            value: item[keyName],
+            id: item[idName],
+            active: selectedId === item[idName],
+            onClick: this.onSelect.bind(this, item),
+            isDisabled: isDisabled,
+            disableTitle: disableTitle,
+            index: listIndex // highlight={selectedIndex === listIndex}
+            ,
+            needTick: needTick,
+            needBorder: false // onMouseEnter={this.handleMouseEnter}
+            ,
+            getRef: this.itemRef,
+            title: title ? title : item[keyName],
+            palette: _palette || palette,
+            needMultiLineText: needMultiLineText,
+            autoHover: true,
+            a11y: {
+              role: isSearch ? 'option' : 'menuitem',
+              ariaSelected: selectedId === item[idName],
+              ariaLabel: item[keyName]
+            },
+            secondaryValue: secondaryValue
+          }, ListItemProps));
+        }));
+      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        align: "both"
+      }, /*#__PURE__*/React.createElement(Loader, null))) : /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => {
         const {
           iconName,
           iconSize,
           iconClass,
           title,
           palette: _palette,
-          disableTitle = '',
+          needDivider,
           isDisabled = false,
+          disableTitle = '',
           secondaryValue
         } = item;
-        listIndex += 1;
-        return iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
-          key: listIndex,
+
+        if (!needDivider) {
+          listIndex += 1;
+        }
+
+        return /*#__PURE__*/React.createElement(Fragment, {
+          key: i
+        }, needDivider ? /*#__PURE__*/React.createElement("div", {
+          className: style.seperatedLine
+        }) : iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
           dataId: item[keyName],
           value: item[keyName],
           id: item[idName],
           active: selectedId === item[idName],
           onClick: this.onSelect.bind(this, item),
-          index: listIndex // highlight={selectedIndex === listIndex}
-          ,
+          index: listIndex,
           disableTitle: disableTitle,
-          isDisabled: isDisabled,
+          isDisabled: isDisabled // highlight={selectedIndex === listIndex}
+          ,
           iconName: iconName,
           iconClass: iconClass,
           iconSize: iconSize,
@@ -748,6 +836,7 @@ export class ToggleDropDown extends Component {
           ,
           getRef: this.itemRef,
           title: title ? title : item[keyName],
+          key: listIndex,
           palette: _palette || palette,
           needMultiLineText: needMultiLineText,
           autoHover: true,
@@ -762,10 +851,10 @@ export class ToggleDropDown extends Component {
           dataId: item[keyName],
           value: item[keyName],
           id: item[idName],
+          disableTitle: disableTitle,
+          isDisabled: isDisabled,
           active: selectedId === item[idName],
           onClick: this.onSelect.bind(this, item),
-          isDisabled: isDisabled,
-          disableTitle: disableTitle,
           index: listIndex // highlight={selectedIndex === listIndex}
           ,
           needTick: needTick,
@@ -782,98 +871,20 @@ export class ToggleDropDown extends Component {
             ariaLabel: item[keyName]
           },
           secondaryValue: secondaryValue
-        }, ListItemProps));
-      }));
-    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      align: "both"
-    }, /*#__PURE__*/React.createElement(Loader, null))) : /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => {
-      const {
-        iconName,
-        iconSize,
-        iconClass,
-        title,
-        palette: _palette,
-        needDivider,
-        isDisabled = false,
-        disableTitle = '',
-        secondaryValue
-      } = item;
-
-      if (!needDivider) {
-        listIndex += 1;
-      }
-
-      return /*#__PURE__*/React.createElement(Fragment, {
-        key: i
-      }, needDivider ? /*#__PURE__*/React.createElement("div", {
-        className: style.seperatedLine
-      }) : iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
-        dataId: item[keyName],
-        value: item[keyName],
-        id: item[idName],
-        active: selectedId === item[idName],
-        onClick: this.onSelect.bind(this, item),
-        index: listIndex,
-        disableTitle: disableTitle,
-        isDisabled: isDisabled // highlight={selectedIndex === listIndex}
-        ,
-        iconName: iconName,
-        iconClass: iconClass,
-        iconSize: iconSize,
-        needTick: needTick,
-        needBorder: false // onMouseEnter={this.handleMouseEnter}
-        ,
-        getRef: this.itemRef,
-        title: title ? title : item[keyName],
-        key: listIndex,
-        palette: _palette || palette,
-        needMultiLineText: needMultiLineText,
-        autoHover: true,
-        a11y: {
-          role: isSearch ? 'option' : 'menuitem',
-          ariaSelected: selectedId === item[idName],
-          ariaLabel: item[keyName]
-        },
-        secondaryValue: secondaryValue
-      }, ListItemWithIconProps)) : /*#__PURE__*/React.createElement(ListItem, _extends({
-        key: listIndex,
-        dataId: item[keyName],
-        value: item[keyName],
-        id: item[idName],
-        disableTitle: disableTitle,
-        isDisabled: isDisabled,
-        active: selectedId === item[idName],
-        onClick: this.onSelect.bind(this, item),
-        index: listIndex // highlight={selectedIndex === listIndex}
-        ,
-        needTick: needTick,
-        needBorder: false // onMouseEnter={this.handleMouseEnter}
-        ,
-        getRef: this.itemRef,
-        title: title ? title : item[keyName],
-        palette: _palette || palette,
-        needMultiLineText: needMultiLineText,
-        autoHover: true,
-        a11y: {
-          role: isSearch ? 'option' : 'menuitem',
-          ariaSelected: selectedId === item[idName],
-          ariaLabel: item[keyName]
-        },
-        secondaryValue: secondaryValue
-      }, ListItemProps)));
-    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      align: "both"
-    }, /*#__PURE__*/React.createElement(Loader, null))) : /*#__PURE__*/React.createElement(CommonEmptyState, {
-      className: style.svgWrapper,
-      description: searchEmptyHint,
-      title: searchErrorText || 'No results',
-      size: "small",
-      getEmptyState: this.emptySearchSVG
-    }) : /*#__PURE__*/React.createElement("div", {
-      className: style.loader
-    }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(Box, null, getFooter()) : null))) : null);
+        }, ListItemProps)));
+      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        align: "both"
+      }, /*#__PURE__*/React.createElement(Loader, null))) : /*#__PURE__*/React.createElement(CommonEmptyState, {
+        className: style.svgWrapper,
+        description: searchEmptyHint,
+        title: searchErrorText || 'No results',
+        size: "small",
+        getEmptyState: this.emptySearchSVG
+      }) : /*#__PURE__*/React.createElement("div", {
+        className: style.loader
+      }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(Box, null, getFooter()) : null));
+    }) : null);
   }
 
 }

package/es/errorstate/Inconvenience/Inconvenience.js

@@ -13,9 +13,10 @@ export default class Inconvenience extends React.Component {
     this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
     return {
       tablet: mediaQueryOR([{
         minWidth: 481,
@@ -40,35 +41,38 @@ export default class Inconvenience extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc
-    }, ({
-      tablet,
-      uptoMobile
-    }) => /*#__PURE__*/React.createElement(Container, {
-      className: `${uptoMobile || tablet ? commonStyle.tabletContainer : commonStyle.container} ${customClass}`,
-      dataId: dataId,
-      scroll: "vertical"
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: commonStyle.top
-    }, title ? /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
-    }, title) : null, subtitle ? /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
-    }, subtitle) : null), /*#__PURE__*/React.createElement(Box, {
-      className: `${style.imageContainer} ${uptoMobile ? commonStyle.mobileImageContainer : tablet ? commonStyle.tabletImageContainer : commonStyle.imageContainer}`
-    }, /*#__PURE__*/React.createElement(InconvenienceSVG, {
-      isFluid: true,
-      dataId: `${dataId}_svg`
-    })), /*#__PURE__*/React.createElement(Box, {
-      className: `${uptoMobile || tablet ? '' : commonStyle.footerWidth} ${commonStyle.footer}`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText
-    }, description), /*#__PURE__*/React.createElement(LinkText, {
-      text: urlText,
-      href: url,
-      onClick: onClick,
-      dataId: `${dataId}_link`,
-      customClass: uptoMobile || tablet ? commonStyle.tabletBtmText : ''
-    }))));
+    }, _ref2 => {
+      let {
+        tablet,
+        uptoMobile
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(Container, {
+        className: `${uptoMobile || tablet ? commonStyle.tabletContainer : commonStyle.container} ${customClass}`,
+        dataId: dataId,
+        scroll: "vertical"
+      }, /*#__PURE__*/React.createElement(Box, {
+        className: commonStyle.top
+      }, title ? /*#__PURE__*/React.createElement("div", {
+        className: uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
+      }, title) : null, subtitle ? /*#__PURE__*/React.createElement("div", {
+        className: uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
+      }, subtitle) : null), /*#__PURE__*/React.createElement(Box, {
+        className: `${style.imageContainer} ${uptoMobile ? commonStyle.mobileImageContainer : tablet ? commonStyle.tabletImageContainer : commonStyle.imageContainer}`
+      }, /*#__PURE__*/React.createElement(InconvenienceSVG, {
+        isFluid: true,
+        dataId: `${dataId}_svg`
+      })), /*#__PURE__*/React.createElement(Box, {
+        className: `${uptoMobile || tablet ? '' : commonStyle.footerWidth} ${commonStyle.footer}`
+      }, /*#__PURE__*/React.createElement("div", {
+        className: uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText
+      }, description), /*#__PURE__*/React.createElement(LinkText, {
+        text: urlText,
+        href: url,
+        onClick: onClick,
+        dataId: `${dataId}_link`,
+        customClass: uptoMobile || tablet ? commonStyle.tabletBtmText : ''
+      })));
+    });
   }
 
 }