@zohodesk/dot 1.0.0-beta.225 → 1.0.0-beta.229

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -5,7 +5,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
-import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
 import Popup from '@zohodesk/components/lib/Popup/Popup';
 import { Box, Container } from '@zohodesk/components/lib/Layout';
 import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
@@ -20,6 +19,8 @@ import { scrollTo } from '@zohodesk/components/lib/utils/Common';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
+import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import { shallowDiff } from '../../utils/General';
 import style from './ToggleDropDown.module.css';
 export class ToggleDropDown extends Component {
@@ -472,6 +473,17 @@ export class ToggleDropDown extends Component {
     }
   }
 
+  responsiveFunc(_ref3) {
+    let {
+      mediaQueryOR
+    } = _ref3;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     const {
       options,
@@ -599,105 +611,180 @@ export class ToggleDropDown extends Component {
       name: "ZD-down",
       iconClass: `${'toggleDropIcon'} ${style.arrow} ${style[`${arrowIconPosition}_arrow`]}`,
       dataId: "statusdownarrow"
-    }) : null)))), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, _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
-      },
-      needResponsive: needResponsive,
-      isPadding: isPadding,
-      tabindex: "0",
-      a11y: {
-        role: !isSearch ? 'menu' : undefined,
-        ariaLabelledby: !isSearch ? ariaTitleId : undefined
-      },
-      palette: palette
-    }, DropBoxProps), /*#__PURE__*/React.createElement(Fragment, null, isSearch ? /*#__PURE__*/React.createElement("div", {
-      className: style.search
-    }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
-      placeHolder: placeHolderText,
-      onChange: this.handleChange,
-      value: searchValue,
-      onClear: this.onSearchClear,
-      size: searchBoxSize,
-      inputRef: this.searchInputRef,
-      onKeyDown: this.handleKeyDown,
-      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("div", {
-      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,
-      scroll: "vertical",
-      dataId: `${dataId}_list`,
-      className: style.maxHgt,
-      eleRef: this.scrollContentRef,
-      onScroll: this.handleScroll,
-      role: isSearch ? 'listbox' : undefined,
-      "aria-labelledby": isSearch ? ariaTitleId : undefined
-    }, isDataLoaded ? options && options.length != 0 ? isGroupDropDown ? /*#__PURE__*/React.createElement(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
+    }) : null)))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _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
+        },
+        needResponsive: needResponsive,
+        isPadding: isPadding,
+        tabindex: "0",
+        a11y: {
+          role: !isSearch ? 'menu' : undefined,
+          ariaLabelledby: !isSearch ? ariaTitleId : undefined
+        },
+        palette: palette,
+        isResponsivePadding: true
+      }, DropBoxProps), /*#__PURE__*/React.createElement(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,
+        onKeyDown: this.handleKeyDown,
+        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: 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",
+        dataId: `${dataId}_list`,
+        className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
+        eleRef: this.scrollContentRef,
+        onScroll: this.handleScroll,
+        role: isSearch ? 'listbox' : undefined,
+        "aria-labelledby": isSearch ? ariaTitleId : undefined
+      }, isDataLoaded ? options && options.length != 0 ? isGroupDropDown ? /*#__PURE__*/React.createElement(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,
+            disableTitle = '',
+            isDisabled = false
+          } = 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,
+            a11y: {
+              role: isSearch ? 'option' : 'menuitem',
+              ariaSelected: selectedId === item[idName]
+            }
+          }, 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,
+            a11y: {
+              role: isSearch ? 'option' : 'menuitem',
+              ariaSelected: selectedId === item[idName]
+            }
+          }, ListItemProps));
+        }));
+      })) : /*#__PURE__*/React.createElement(Fragment, null, options.map((item, i) => {
         const {
           iconName,
           iconSize,
           iconClass,
           title,
-          disableTitle = '',
-          isDisabled = false
+          needDivider,
+          isDisabled = false,
+          disableTitle = ''
         } = 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,
           disableTitle: disableTitle,
           isDisabled: isDisabled,
+          highlight: selectedIndex === listIndex,
           iconName: iconName,
           iconClass: iconClass,
           iconSize: iconSize,
@@ -706,6 +793,7 @@ export class ToggleDropDown extends Component {
           onMouseEnter: this.handleMouseEnter,
           getRef: this.itemRef,
           title: title ? title : item[keyName],
+          key: listIndex,
           palette: palette,
           a11y: {
             role: isSearch ? 'option' : 'menuitem',
@@ -716,10 +804,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,
@@ -732,82 +820,17 @@ export class ToggleDropDown extends Component {
             role: isSearch ? 'option' : 'menuitem',
             ariaSelected: selectedId === item[idName]
           }
-        }, ListItemProps));
-      }));
-    })) : /*#__PURE__*/React.createElement(Fragment, null, options.map((item, i) => {
-      const {
-        iconName,
-        iconSize,
-        iconClass,
-        title,
-        needDivider,
-        isDisabled = false,
-        disableTitle = ''
-      } = 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,
-        a11y: {
-          role: isSearch ? 'option' : 'menuitem',
-          ariaSelected: selectedId === item[idName]
-        }
-      }, 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,
-        a11y: {
-          role: isSearch ? 'option' : 'menuitem',
-          ariaSelected: selectedId === item[idName]
-        }
-      }, ListItemProps)));
-    })) : /*#__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("div", null, getFooter()) : null)) : null);
+        }, ListItemProps)));
+      })) : /*#__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/dropdown/ToggleDropDown/ToggleDropDown.module.css

@@ -6,19 +6,29 @@
   max-height: var(--zd_size265);
   padding: var(--zd_size10) 0;
 }
+.responsivemaxHgt {
+  padding: 0;
+}
 .title {
   padding-top: var(--zd_size6);
 }
-.default_arrow,
-.overlay_arrow {
+[dir=ltr] .default_arrow, [dir=ltr] .overlay_arrow {
   padding: 0 0 0 var(--zd_size5);
 }
+[dir=rtl] .default_arrow, [dir=rtl] .overlay_arrow {
+  padding: 0 var(--zd_size5) 0 0;
+}
 .overlay_arrow {
   position: absolute;
-  left: 100%;
   top: 50%;
   transform: translateY(-50%) perspective(1px);
 }
+[dir=ltr] .overlay_arrow {
+  left: 100%;
+}
+[dir=rtl] .overlay_arrow {
+  right: 100%;
+}
 .hoverIcon .arrow {
   opacity: 0;
   visibility: hidden;
@@ -44,12 +54,18 @@
 .cursor {
   cursor: pointer;
 }
-.dropBoxContainer {
+[dir=ltr] .dropBoxContainer {
   text-align: left;
 }
-.iconBox {
+[dir=rtl] .dropBoxContainer {
+  text-align: right;
+}
+[dir=ltr] .iconBox {
   margin-right: var(--zd_size4);
 }
+[dir=rtl] .iconBox {
+  margin-left: var(--zd_size4);
+}
 .iconBox > i {
   display: block;
 }
@@ -70,10 +86,10 @@
 }
 .hiddenInputElement{
   width: 100%;
-  padding: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  padding: 0;
   border: 0;
 }
 .groupName {