@zohodesk/dot 1.0.0-temp-87 → 1.0.0-temp-88

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -1,9 +1,10 @@
+import "core-js/modules/es.array.includes";
+
 function _extends() { _extends = Object.assign || 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, { 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';
@@ -18,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 {
@@ -470,6 +473,17 @@ export class ToggleDropDown extends Component {
     }
   }
 
+  responsiveFunc(_ref3) {
+    let {
+      mediaQueryOR
+    } = _ref3;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     const {
       options,
@@ -597,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,
@@ -704,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',
@@ -714,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,
@@ -730,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

@@ -1,97 +1,100 @@
-.wrapper {
-  position: relative;
-  max-width: 100%;
-}
-.maxHgt {
-  max-height: var(--zd_size265);
-  padding: var(--zd_size10) 0;
-}
-.title {
-  padding-top: var(--zd_size6);
-}
-[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;
-  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;
-}
-.hoverIcon:hover .arrow,
-.hoverIcon:focus .arrow {
-  opacity: 1;
-  visibility: visible;
-}
-.value {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
-}
-.search {
-  padding: var(--zd_size6) var(--zd_size20) 0;
-}
-.svgWrapper {
-  padding-bottom: var(--zd_size25);
-}
-.cursorDefault {
-  cursor: default;
-}
-.cursor {
-  cursor: pointer;
-}
-[dir=ltr] .dropBoxContainer {
-  text-align: left;
-}
-[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;
-}
-.loader {
-  width: var(--zd_size40);
-  margin: 0 auto;
-}
-.seperatedLine {
-  height: var(--zd_size1);
-  border-bottom: 1px solid var(--zdt_toggledropdown_line_border);
-  margin: var(--zd_size7) 0 var(--zd_size8);
-}
-.hiddenInput {
-  width: 0;
-  height: 0;
-  opacity: 0;
-  position: absolute;
-}
-.hiddenInputElement{
-  width: 100%;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  padding: 0;
-  border: 0;
-}
-.groupName {
-  margin: var(--zd_size6) 0;
-}
-.dropdown {
-  background-color: transparent;
-}
+.wrapper {
+  position: relative;
+  max-width: 100%;
+}
+.maxHgt {
+  max-height: var(--zd_size265);
+  padding: var(--zd_size10) 0;
+}
+.responsivemaxHgt {
+  padding: 0;
+}
+.title {
+  padding-top: var(--zd_size6);
+}
+[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;
+  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;
+}
+.hoverIcon:hover .arrow,
+.hoverIcon:focus .arrow {
+  opacity: 1;
+  visibility: visible;
+}
+.value {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
+}
+.search {
+  padding: var(--zd_size6) var(--zd_size20) 0;
+}
+.svgWrapper {
+  padding-bottom: var(--zd_size25);
+}
+.cursorDefault {
+  cursor: default;
+}
+.cursor {
+  cursor: pointer;
+}
+[dir=ltr] .dropBoxContainer {
+  text-align: left;
+}
+[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;
+}
+.loader {
+  width: var(--zd_size40);
+  margin: 0 auto;
+}
+.seperatedLine {
+  height: var(--zd_size1);
+  border-bottom: 1px solid var(--zdt_toggledropdown_line_border);
+  margin: var(--zd_size7) 0 var(--zd_size8);
+}
+.hiddenInput {
+  width: 0;
+  height: 0;
+  opacity: 0;
+  position: absolute;
+}
+.hiddenInputElement{
+  width: 100%;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding: 0;
+  border: 0;
+}
+.groupName {
+  margin: var(--zd_size6) 0;
+}
+.dropdown {
+  background-color: transparent;
+}