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

package/es/RippleEffect/docs/RippleEffect__default.docs.js

@@ -0,0 +1,435 @@
+import React from 'react';
+import RippleEffect from '../RippleEffect';
+export default class RippleEffect__default extends React.Component {
+  render() {
+    let style = {
+      margin: '20px 20px 0'
+    },
+        boxStyle = {
+      border: '1px solid #e3e6eb',
+      padding: '15px 20px 25px',
+      marginBottom: '10px'
+    },
+        titleStyle = {
+      fontSize: '13px',
+      paddingBottom: '25px',
+      textTransform: 'upperCase'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Hover Default"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer'
+      }
+    }, "Default"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primary"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_hover_text)'
+      }
+    }, "Primary"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryLight"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_text)'
+      }
+    }, "Primary Light"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryFilled"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_secondary_text)'
+      }
+    }, "Primary Filled"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "green"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--dot_text_strongGreen)'
+      }
+    }, "Green"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "danger"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--dot_text_brightRed)'
+      }
+    }, "Danger")))), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Hover Border"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      hoverType: "border"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer'
+      }
+    }, "Default"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primary",
+      hoverType: "border"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_hover_text)'
+      }
+    }, "Primary"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryLight",
+      hoverType: "border"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_text)'
+      }
+    }, "Primary Light"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "green",
+      hoverType: "border"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--dot_text_strongGreen)'
+      }
+    }, "Green"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "danger",
+      hoverType: "border"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--dot_text_brightRed)'
+      }
+    }, "Danger")))), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Hover Bg Color"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      hoverType: "bg"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px'
+      }
+    }, "Default"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryLight",
+      hoverType: "bg"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_text)'
+      }
+    }, "Primary Light"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "green",
+      hoverType: "bg"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--dot_text_strongGreen)'
+      }
+    }, "Green"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "danger",
+      hoverType: "bg"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--dot_text_brightRed)'
+      }
+    }, "Danger"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryDark",
+      hoverType: "bg"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_text)'
+      }
+    }, "Primary Dark")))), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Disabled"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      isDisabled: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px'
+      }
+    }, "Default"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primary",
+      isDisabled: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_hover_text)'
+      }
+    }, "Primary"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryLight",
+      isDisabled: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_text)'
+      }
+    }, "Primary Light"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryFilled",
+      isDisabled: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_secondary_text)'
+      }
+    }, "Primary Filled"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "green",
+      isDisabled: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        color: 'var(--dot_text_strongGreen)'
+      }
+    }, "Green")))), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Active"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      isActive: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer'
+      }
+    }, "Default"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primary",
+      isActive: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_secondary_text)'
+      }
+    }, "Primary"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryLight",
+      isActive: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_text)'
+      }
+    }, "Primary Light"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryFilled",
+      isActive: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_secondary_text)'
+      }
+    }, "Primary Filled"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "green",
+      isActive: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--dot_text_strongGreen)'
+      }
+    }, "Green"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryDark",
+      isActive: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_text)'
+      }
+    }, "Primary Dark")))));
+  }
+
+}
+
+if (false) {
+  RippleEffect__default.docs = {
+    componentGroup: 'RippleEffect',
+    folderName: 'Style Guide'
+  };
+}

package/es/Select/GroupSelect.js

@@ -489,7 +489,8 @@ export class GroupSelectComponent extends PureComponent {
     }
   }
 
-  handleFetchOptions(APICall, searchStr = '') {
+  handleFetchOptions(APICall) {
+    let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     // let funcArgs = args.slice(1, args.length);
     let {
       isFetchingOptions = false

package/es/Select/Select.js

@@ -346,20 +346,6 @@ export class SelectComponent extends Component {
       this.valueInput && this.valueInput.focus({
         preventScroll: true
       }); //this.handlePopupClose(e);
-    } else if (keyCode === 9) {
-      let option = options[hoverIndex];
-      let {
-        id
-      } = option || {};
-
-      if (isPopupOpen && !getIsEmptyValue(id)) {
-        onChange && onChange(id, optionsNormalize[id]);
-        needCloseOnSelect && this.handlePopupClose(e);
-      }
-
-      if (!isPopupOpen && isPopupOpenOnEnter) {
-        this.togglePopup(e);
-      }
     }
   }
 
@@ -455,7 +441,8 @@ export class SelectComponent extends Component {
     }
   }
 
-  handleFetchOptions(APICall, searchStr = '') {
+  handleFetchOptions(APICall) {
+    let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     // let funcArgs = args.slice(1, args.length);
     let {
       isFetchingOptions = false

package/es/Select/Select.module.css

@@ -47,7 +47,7 @@
   padding: var(--zd_size10) 0;
 }
 .readonly {
-  --textboxicon_icon_cursor: not-allowed;
+  composes: readonly from '../common/common.module.css';
 }
 .transparentContainer .arrowIcon {
   opacity: 0;

package/es/Select/SelectWithAvatar.js

@@ -141,8 +141,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       tagSize,
       groupName,
       i18nKeys,
-      htmlId,
-      needEffect
+      htmlId
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -165,7 +164,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
+      className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${className ? className : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : ''
     }, /*#__PURE__*/React.createElement(Container, {
@@ -343,8 +342,7 @@ SelectWithAvatarComponent.propTypes = {
   title: PropTypes.string,
   togglePopup: PropTypes.func,
   valueField: PropTypes.string,
-  htmlId: PropTypes.string,
-  needEffect: PropTypes.bool
+  htmlId: PropTypes.string
 };
 SelectWithAvatarComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -365,8 +363,7 @@ SelectWithAvatarComponent.defaultProps = {
   dataId: 'selectWithAvatar',
   borderColor: 'default',
   isSearchClearOnClose: true,
-  i18nKeys: {},
-  needEffect: true
+  i18nKeys: {}
 };
 SelectWithAvatarComponent.displayName = 'SelectWithAvatar';
 let SelectWithAvatar = Popup(SelectWithAvatarComponent);

package/es/Select/docs/GroupSelect__default.docs.js

@@ -0,0 +1,149 @@
+/**** Libraries ****/
+import React, { Component } from 'react';
+/**** Components ****/
+
+import GroupSelect from '../GroupSelect';
+let groupedOptions = [{
+  id: 'tickets',
+  name: 'Tickets',
+  options: [{
+    id: '001',
+    subject: 'Ticket001'
+  }, {
+    id: '002',
+    subject: 'Ticket002'
+  }, {
+    id: '003',
+    subject: 'Ticket003'
+  }, {
+    id: '004',
+    subject: 'Ticket004'
+  }, {
+    id: '005',
+    subject: 'Ticket005'
+  }],
+  valueField: 'id',
+  textField: 'subject'
+}, {
+  id: 'tasks',
+  name: 'Tasks',
+  options: [{
+    id: '001',
+    subject: 'Task001'
+  }, {
+    id: '002',
+    subject: 'Task002'
+  }, {
+    id: '003',
+    subject: 'Task003'
+  }, {
+    id: '004',
+    subject: 'Task004'
+  }, {
+    id: '005',
+    subject: 'Task005'
+  }],
+  valueField: 'id',
+  textField: 'subject'
+}, {
+  id: 'accounts',
+  name: 'Accounts',
+  options: [{
+    id: '001',
+    name: 'Account001'
+  }, {
+    id: '002',
+    name: 'Account002'
+  }, {
+    id: '003',
+    name: 'Account003'
+  }, {
+    id: '004',
+    name: 'Account004'
+  }, {
+    id: '005',
+    name: 'Account005'
+  }],
+  valueField: 'id',
+  textField: 'name'
+}, {
+  id: 'contacts',
+  name: 'Contacts',
+  options: [{
+    id: '001',
+    name: 'Contact001'
+  }, {
+    id: '002',
+    name: 'Contact002'
+  }, {
+    id: '003',
+    name: 'Contact003'
+  }, {
+    id: '004',
+    name: 'Contact004'
+  }, {
+    id: '005',
+    name: 'Contact005'
+  }],
+  valueField: 'id',
+  textField: 'name'
+}];
+export default class GroupSelect__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedOption: {
+        groupId: 'tickets',
+        selected: '001'
+      }
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.groupFooter = this.groupFooter.bind(this);
+  }
+
+  handleChange(selectedOption) {
+    this.setState({
+      selectedOption
+    });
+  }
+
+  groupFooter() {
+    return /*#__PURE__*/React.createElement("div", null, "Footer");
+  }
+
+  render() {
+    let {
+      selectedOption
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(GroupSelect, {
+      groupedOptions: groupedOptions,
+      selectedOption: selectedOption,
+      onChange: this.handleChange,
+      needSearch: true,
+      searchEmptyMessage: "No matches found",
+      emptyMessage: "No Options",
+      isDefaultSelectValue: false,
+      placeHolder: "Select Option",
+      needLocalSearch: true
+    }), /*#__PURE__*/React.createElement(GroupSelect, {
+      groupedOptions: groupedOptions,
+      selectedOption: selectedOption,
+      onChange: this.handleChange,
+      needSearch: true,
+      searchEmptyMessage: "No matches found",
+      emptyMessage: "No Options",
+      isDefaultSelectValue: false,
+      placeHolder: "Select Option",
+      needLocalSearch: true,
+      getFooter: this.groupFooter
+    }, "Children"));
+  }
+
+}
+
+if (false) {
+  GroupSelect__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide'
+  };
+}