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

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,6 +6,9 @@
   max-height: var(--zd_size265);
   padding: var(--zd_size10) 0;
 }
+.responsivemaxHgt {
+  padding: 0;
+}
 .title {
   padding-top: var(--zd_size6);
 }

package/es/dropdown/ToggleDropDown/docs/ToggleDropDown__default.docs.js

@@ -0,0 +1,228 @@
+import React from 'react';
+import ToggleDropDown from '../ToggleDropDown';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+export default class ToggleDropDown__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: 'One',
+      groupValue: 'One',
+      valueId: 'one',
+      groupValueId: 'one'
+    };
+    this.onDropdownSelect = this.onSelect.bind(this, 'value');
+    this.onGroupSelect = this.onSelect.bind(this, 'groupValue');
+    this.getFooter = this.getFooter.bind(this);
+  }
+
+  onSelect(type, element, e) {
+    this.setState({
+      [type]: e.value,
+      [`${type}Id`]: e.id
+    });
+  }
+
+  getFooter() {
+    return /*#__PURE__*/React.createElement("div", null, "Custom Footer");
+  }
+
+  render() {
+    let {
+      value,
+      groupValue,
+      groupValueId,
+      valueId
+    } = this.state;
+    let options = [{
+      value: 'One',
+      id: 'one',
+      iconName: 'ZD-setupFields'
+    }, {
+      value: 'Two',
+      id: 'two',
+      iconName: 'ZD-setupFields'
+    }, {
+      value: 'Three',
+      id: 'three',
+      iconName: 'ZD-setupFields'
+    }, {
+      value: 'Four',
+      id: 'four',
+      iconName: 'ZD-setupFields'
+    }, {
+      needDivider: true
+    }, {
+      value: 'Five',
+      id: 'five',
+      iconName: 'ZD-setupFields'
+    }, {
+      value: 'Six',
+      id: 'six',
+      iconName: 'ZD-setupFields'
+    }, {
+      value: 'Seven',
+      id: 'seven',
+      iconName: 'ZD-setupFields'
+    }, {
+      needDivider: true
+    }, {
+      value: 'Eight',
+      id: 'eight',
+      iconName: 'ZD-setupFields'
+    }, {
+      needDivider: true
+    }, {
+      value: 'Nine',
+      id: 'nine',
+      iconName: 'ZD-setupFields'
+    }, {
+      value: 'Ten',
+      id: 'ten',
+      iconName: 'ZD-setupFields'
+    }];
+    let groupOptions = [{
+      name: 'Group 1',
+      items: [{
+        value: 'One',
+        id: 'one'
+      }, {
+        value: 'Two',
+        id: 'two'
+      }, {
+        value: 'Three',
+        id: 'three'
+      }]
+    }, {
+      name: 'Group 2',
+      items: [{
+        value: 'Four',
+        id: 'four'
+      }, {
+        value: 'Five',
+        id: 'five'
+      }, {
+        value: 'Six',
+        id: 'six'
+      }, {
+        value: 'Seven',
+        id: 'seven'
+      }],
+      needDivider: true
+    }, {
+      name: 'Group 3',
+      items: [{
+        value: 'Eight',
+        id: 'eight'
+      }, {
+        value: 'Nine',
+        id: 'nine'
+      }, {
+        value: 'Ten',
+        id: 'ten'
+      }],
+      needDivider: true
+    }, {
+      name: 'Group 4',
+      items: [{
+        value: 'Eleven',
+        id: 'eleven'
+      }, {
+        value: 'Twelve',
+        id: 'twelve'
+      }, {
+        value: 'Thirteen',
+        id: 'thirteen'
+      }, {
+        value: 'Fourteen',
+        id: 'fourteen'
+      }, {
+        value: 'Fifteen',
+        id: 'fifteen'
+      }],
+      needDivider: true
+    }, {
+      name: 'Group 5',
+      items: [{
+        value: 'Sixteen',
+        id: 'sixteen'
+      }, {
+        value: 'Seventeen',
+        id: 'seventeen'
+      }, {
+        value: 'Eighteen',
+        id: 'eighteen'
+      }]
+    }];
+    return /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      style: {
+        padding: 20
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      style: {
+        width: 330
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        font: '14px var(--zd_semibold)',
+        marginBottom: 9,
+        textTransform: 'uppercase'
+      }
+    }, "DropDown"), /*#__PURE__*/React.createElement(ToggleDropDown, {
+      value: value,
+      dataTitle: value,
+      keyName: "value",
+      onClick: this.onDropdownSelect,
+      isSearch: true,
+      options: options,
+      boxSize: "large",
+      boxPosition: "bottomRight",
+      selectedId: valueId,
+      isNeedEffect: false
+    })), /*#__PURE__*/React.createElement(Box, {
+      style: {
+        width: 330
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        font: '14px var(--zd_semibold)',
+        marginBottom: 9,
+        textTransform: 'uppercase'
+      }
+    }, "Group DropDown"), /*#__PURE__*/React.createElement(ToggleDropDown, {
+      value: groupValue,
+      dataTitle: groupValue,
+      keyName: "value",
+      onClick: this.onGroupSelect,
+      isSearch: true,
+      options: groupOptions,
+      boxSize: "large",
+      boxPosition: "bottomRight",
+      isGroupDropDown: true,
+      selectedId: groupValueId,
+      isNeedEffect: false
+    })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        font: '14px var(--zd_semibold)',
+        marginBottom: 9,
+        textTransform: 'uppercase'
+      }
+    }, "Custom Footer"), /*#__PURE__*/React.createElement(ToggleDropDown, {
+      value: value,
+      dataTitle: value,
+      keyName: "value",
+      onClick: this.onDropdownSelect,
+      isSearch: true,
+      options: options,
+      boxSize: "large",
+      boxPosition: "bottomRight",
+      selectedId: valueId,
+      isNeedEffect: false,
+      getFooter: this.getFooter
+    })));
+  }
+
+}
+ToggleDropDown__default.docs = {
+  componentGroup: 'Molecule'
+};