@zohodesk/components 1.0.0-temp-47 → 1.0.0-temp-48

package/es/ListItem/docs/ListItemWithIcon__custom.docs.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import ListItemWithIcon from '../ListItemWithIcon';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import style from '../../common/docStyle.module.css';
+export default class ListItemWithIcon__custom extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      customClass: style.listItem,
+      value: "ListItem",
+      iconName: "ZD-teams2"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      customClass: style.listItem,
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      autoHover: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      customClass: style.listItem,
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      highlight: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      customClass: style.listItem,
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      active: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      customClass: style.listItem,
+      value: "ListItem disabled",
+      isDisabled: true,
+      iconName: "ZD-teams2",
+      active: true
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithIcon__custom.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithIcon__default.docs.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import ListItemWithIcon from '../ListItemWithIcon';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class ListItemWithIcon__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem",
+      iconName: "ZD-teams2"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      autoHover: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      highlight: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      active: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem disabled",
+      isDisabled: true,
+      iconName: "ZD-teams2",
+      active: true
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithIcon__default.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithRadio__custom.docs.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import ListItemWithRadio from '../ListItemWithRadio';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import style from '../../common/docStyle.module.css';
+export default class ListItemWithRadio__custom extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      value: "ListItem",
+      id: "11"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      value: "ListItem",
+      autoHover: true,
+      id: "12"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      value: "ListItem",
+      highlight: true,
+      checked: true,
+      id: "13"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      value: "ListItem",
+      active: true,
+      checked: true,
+      id: "14"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      isDisabled: true,
+      value: "ListItem disabled",
+      active: true,
+      checked: true,
+      id: "14"
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithRadio__custom.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithRadio__default.docs.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import ListItemWithRadio from '../ListItemWithRadio';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class ListItemWithRadio__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      value: "ListItem",
+      id: "11"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      value: "ListItem",
+      autoHover: true,
+      id: "12"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      value: "ListItem",
+      highlight: true,
+      checked: true,
+      id: "13"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      value: "ListItem",
+      active: true,
+      checked: true,
+      id: "14"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      isDisabled: true,
+      value: "ListItem disabled",
+      active: true,
+      checked: true,
+      id: "14"
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithRadio__default.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItem__custom.docs.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import ListItem from '../ListItem';
+import style from '../../common/docStyle.module.css';
+export default class ListItem__custom extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      isLink: true,
+      href: "https://zoho.com",
+      disableTitle: "Disabled list",
+      palette: "default"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      autoHover: true,
+      disableTitle: "Disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      highlight: true,
+      disableTitle: "Disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      autoHover: true,
+      active: true,
+      disableTitle: "Disabled list",
+      title: "ListItem title"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      active: true,
+      needTick: true,
+      disableTitle: "disabled list",
+      palette: "dark"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem disabled",
+      palette: "secondary",
+      autoHover: true,
+      isDisabled: true,
+      disableTitle: "disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      autoHover: true,
+      active: true,
+      value: "ListItemListItemListItemListItemListItem"
+    }, "ChildrenChildrenChildren ChildrenChildrenChildrenChildren")));
+  }
+
+}
+
+if (false) {
+  ListItem__custom.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItem__default.docs.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import ListItem from '../ListItem';
+export default class ListItem__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      value: "ListItem",
+      isLink: true,
+      href: "https://zoho.com",
+      disableTitle: "Disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      value: "ListItem",
+      autoHover: true,
+      disableTitle: "Disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      value: "ListItem",
+      highlight: true,
+      disableTitle: "Disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      value: "ListItem",
+      active: true,
+      disableTitle: "Disabled list",
+      title: "ListItem title"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      value: "ListItem",
+      active: true,
+      needTick: true,
+      disableTitle: "disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      value: "ListItem disabled",
+      palette: "secondary",
+      autoHover: true,
+      isDisabled: true,
+      disableTitle: "disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      autoHover: true,
+      active: true,
+      value: "ListItemListItemListItemListItemListItem"
+    }, "ChildrenChildrenChildren ChildrenChildrenChildrenChildren")));
+  }
+
+}
+
+if (false) {
+  ListItem__default.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -254,7 +254,9 @@ class AdvancedGroupMultiSelect extends React.Component {
     }) : this.togglePopup(e);
   }
 
-  handleClickSelectedOption(id = '', e) {
+  handleClickSelectedOption() {
+    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let e = arguments.length > 1 ? arguments[1] : undefined;
     let {
       selectedOptionIds
     } = this.state;
@@ -525,7 +527,11 @@ class AdvancedGroupMultiSelect extends React.Component {
     });
   }
 
-  handleFetchOptions(...args) {
+  handleFetchOptions() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
     let [APICall, searchStr] = args;
     let {
       isFetchingOptions
@@ -638,7 +644,9 @@ class AdvancedGroupMultiSelect extends React.Component {
     this.handleChange([]);
   }
 
-  handleChange(selectedOptions = [], e) {
+  handleChange() {
+    let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let e = arguments.length > 1 ? arguments[1] : undefined;
     let {
       onChange,
       needToCloseOnSelect,
@@ -847,8 +855,7 @@ class AdvancedGroupMultiSelect extends React.Component {
       i18nKeys,
       a11y,
       isSearchClearOnSelect,
-      palette,
-      needEffect
+      palette
     } = this.props;
     let {
       clearText = 'Clear all'
@@ -877,7 +884,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
+      className: `${style.wrapper} ${isDisabled ? style.disabled : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : '',
       onClick: this.handleInputFocus
@@ -1053,8 +1060,7 @@ AdvancedGroupMultiSelect.defaultProps = {
   isPadding: false,
   i18nKeys: {},
   a11y: {},
-  isSearchClearOnSelect: true,
-  needEffect: PropTypes.bool
+  isSearchClearOnSelect: true
 };
 AdvancedGroupMultiSelect.propTypes = {
   animationStyle: PropTypes.string,
@@ -1104,8 +1110,7 @@ AdvancedGroupMultiSelect.propTypes = {
   variant: PropTypes.string,
   htmlId: PropTypes.string,
   isSearchClearOnSelect: PropTypes.bool,
-  palette: PropTypes.oneOf(['default', 'dark']),
-  needEffect: true
+  palette: PropTypes.oneOf(['default', 'dark'])
 };
 
 if (false) {

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -76,7 +76,9 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     return suggestions;
   }
 
-  handleChange(selectedOptions = [], e) {
+  handleChange() {
+    let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let e = arguments.length > 1 ? arguments[1] : undefined;
     const {
       optionsNormalize,
       searchStr
@@ -347,8 +349,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       borderColor,
       isBoxPaddingNeed,
       getFooter,
-      customProps,
-      needEffect
+      customProps
     } = this.props;
     let {
       SuggestionsProps = {},
@@ -381,7 +382,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     const setAriaId = this.getNextAriaId();
     const ariaErrorId = this.getNextAriaId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
+      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
       "data-id": dataIdMultiSelectComp,
       "data-title": isDisabled ? title : '',
       onClick: this.handleInputFocus
@@ -524,7 +525,6 @@ AdvancedMultiSelectComponent.propTypes = {
   //For grouping multiSelect
   getPublicMethods: PropTypes.func,
   optionType: PropTypes.oneOf(['default', 'avatar', 'icon']),
-  needEffect: PropTypes.bool,
   animationStyle: PropTypes.string,
   defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
@@ -599,8 +599,7 @@ AdvancedMultiSelectComponent.defaultProps = {
   borderColor: 'default',
   isBoxPaddingNeed: true,
   isSearchClearOnSelect: true,
-  customProps: {},
-  needEffect: true
+  customProps: {}
 };
 AdvancedMultiSelectComponent.displayName = 'AdvancedMultiSelect';
 const AdvancedMultiSelect = Popup(AdvancedMultiSelectComponent);

package/es/MultiSelect/AdvancedMultiSelect.module.css

@@ -1,8 +1,8 @@
 .wrapper {
   position: relative;
 }
-.disabled, .readOnly {
-  cursor: not-allowed;
+.disabled {
+  composes: disabled from '../common/common.module.css';
 }
 .container {
   max-height: var(--zd_size120);
@@ -16,28 +16,28 @@
 .borderColor_transparent {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
 }
-.effect .borderColor_transparent:hover {
+.borderColor_transparent:hover {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_hover_border);
 }
-.effect .borderColor_transparent.active {
+.borderColor_transparent.active {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_active_border);
 }
 .borderColor_default {
   border-bottom-color: var(--zdt_advancedmultiselect_default_border);
 }
-.effect .borderColor_default:hover {
+.borderColor_default:hover {
   border-bottom-color: var(--zdt_advancedmultiselect_default_hover_border);
 }
-.effect .borderColor_default.active {
+.borderColor_default.active {
   border-bottom-color: var(--zdt_advancedmultiselect_default_active_border);
 }
 .borderColor_dark {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_border);
 }
-.effect .borderColor_dark:hover {
+.borderColor_dark:hover {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_hover_border);
 }
-.effect .borderColor_dark.active {
+.borderColor_dark.active {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
 }
 [dir=ltr] .container.medium {