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

package/es/MultiSelect/MultiSelect.js

@@ -292,7 +292,7 @@ export class MultiSelectComponent extends React.Component {
     } = this.props;
     const highLightedSelectOptionsLen = highLightedSelectOptions.length;
 
-    if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13 || keyCode === 27 || keyCode === 9)) {
+    if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13 || keyCode === 27)) {
       suggestions = this.handleFilterSuggestions();
     }
 
@@ -420,13 +420,6 @@ export class MultiSelectComponent extends React.Component {
         });
       }
     } else if (keyCode === 27) {// this.handlePopupClose(e);
-    } else if (keyCode === 9) {
-      const selectedOption = suggestions[hoverOption] || {};
-      const {
-        id
-      } = selectedOption;
-      isPopupOpen && !getIsEmptyValue(id) && this.handleSelectOption(id, e);
-      this.handlePopupClose(e);
     }
   }
 
@@ -542,7 +535,11 @@ export class MultiSelectComponent extends React.Component {
     }
   }
 
-  handleFetchOptions(...args) {
+  handleFetchOptions() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
     const [APICall, searchStr] = args;
     const {
       isFetchingOptions
@@ -608,7 +605,9 @@ export class MultiSelectComponent extends React.Component {
     });
   }
 
-  handleClickSelectedOption(id = '', e) {
+  handleClickSelectedOption() {
+    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let e = arguments.length > 1 ? arguments[1] : undefined;
     const {
       selectedOptions
     } = this.props;
@@ -689,7 +688,9 @@ export class MultiSelectComponent extends React.Component {
     getNextOptions && getNextOptions(searchStr);
   }
 
-  handleChange(selectedOptions = [], e) {
+  handleChange() {
+    let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let e = arguments.length > 1 ? arguments[1] : undefined;
     const {
       optionsNormalize
     } = this.state;
@@ -862,8 +863,7 @@ export class MultiSelectComponent extends React.Component {
       a11y,
       children,
       customChildrenClass,
-      getFooter,
-      needEffect
+      getFooter
     } = this.props;
     const {
       clearText = 'Clear all',
@@ -891,7 +891,7 @@ export class MultiSelectComponent extends React.Component {
     const ariaErrorId = this.getNextAriaId();
     const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
+      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : '',
       onClick: this.handleInputFocus
@@ -1095,8 +1095,7 @@ MultiSelectComponent.propTypes = {
   children: PropTypes.node,
   customChildrenClass: PropTypes.string,
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  getFooter: PropTypes.func,
-  needEffect: PropTypes.bool
+  getFooter: PropTypes.func
 };
 MultiSelectComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -1126,8 +1125,7 @@ MultiSelectComponent.defaultProps = {
   a11y: {},
   textBoxClass: '',
   palette: 'default',
-  isSearchClearOnSelect: true,
-  needEffect: true
+  isSearchClearOnSelect: true
 };
 
 if (false) {

package/es/MultiSelect/MultiSelect.module.css

@@ -2,9 +2,14 @@
   position: relative;
 }
 
-.disabled, .readOnly {
-  cursor: not-allowed;
+.disabled {
+  composes: disabled from '../common/common.module.css';
 }
+
+.readOnly {
+  composes: readonly from '../common/common.module.css';
+}
+
 .container {
   max-height: var(--zd_size120);
   composes: oflowy from '../common/common.module.css';
@@ -17,28 +22,28 @@
 .borderColor_transparent {
   border-bottom-color: var(--zdt_multiselect_transparent_border);
 }
-.effect .borderColor_transparent:hover {
+.borderColor_transparent:hover {
   border-bottom-color: var(--zdt_multiselect_transparent_hover_border);
 }
-.effect .borderColor_transparent.active {
+.borderColor_transparent.active {
   border-bottom-color: var(--zdt_multiselect_transparent_active_border);
 }
 .borderColor_default {
   border-bottom-color: var(--zdt_multiselect_default_border);
 }
-.effect .borderColor_default:hover {
+.borderColor_default:hover {
   border-bottom-color: var(--zdt_multiselect_default_hover_border);
 }
-.effect .borderColor_default.active {
+.borderColor_default.active {
   border-bottom-color: var(--zdt_multiselect_default_active_border);
 }
 .borderColor_dark {
   border-bottom-color: var(--zdt_multiselect_dark_border);
 }
-.effect .borderColor_dark:hover {
+.borderColor_dark:hover {
   border-bottom-color: var(--zdt_multiselect_dark_hover_border);
 }
-.effect .borderColor_dark.active {
+.borderColor_dark.active {
   border-bottom-color: var(--zdt_multiselect_dark_active_border);
 }
 

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -87,8 +87,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       a11y,
       children,
       customChildrenClass,
-      isBoxPaddingNeed,
-      needEffect
+      isBoxPaddingNeed
     } = this.props;
     const {
       clearText = 'Clear all'
@@ -116,7 +115,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     const popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
     const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
     return /*#__PURE__*/React.createElement("div", {
-      className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
+      className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : '',
       onClick: this.handleInputFocus
@@ -289,7 +288,6 @@ MultiSelectWithAvatarComponent.propTypes = {
   palette: PropTypes.oneOf(['default', 'dark']),
   htmlId: PropTypes.string,
   isBoxPaddingNeed: PropTypes.bool,
-  needEffect: PropTypes.bool,
 
   /**** Popup props ****/
   isPopupOpen: PropTypes.bool,
@@ -339,8 +337,7 @@ MultiSelectWithAvatarComponent.defaultProps = {
   a11y: {},
   palette: 'default',
   isBoxPaddingNeed: true,
-  isSearchClearOnSelect: true,
-  needEffect: true
+  isSearchClearOnSelect: true
 };
 MultiSelectWithAvatarComponent.displayName = 'MultiSelectWithAvatar';
 const MultiSelectWithAvatar = Popup(MultiSelectWithAvatarComponent);

package/es/MultiSelect/SelectedOptions.js

@@ -37,14 +37,13 @@ export default class SelectedOptions extends React.PureComponent {
       } = option;
       const commonProps = {
         disabled: isDisabled,
-        onRemove: isDisabled || isReadOnly ? null : onRemove,
+        onRemove: isDisabled ? null : onRemove,
         text: value,
         palette: isDarkPalette,
         onSelectTag: isReadOnly ? null : onSelect,
         getRef: getRef,
         initial: value,
-        id: id,
-        isReadOnly: isReadOnly
+        id: id
       };
 
       if (optionType === 'avatar') {

package/es/MultiSelect/docs/AdvancedGroupMultiSelect__default.docs.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import AdvancedGroupMultiSelect from '../AdvancedGroupMultiSelect';
+export default class AdvancedGroupMultiSelect__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleSelectOptions = this.handleSelectOptions.bind(this);
+    this.getNextOptions = this.getNextOptions.bind(this);
+    this.groupFooter = this.groupFooter.bind(this);
+    this.onSearch = this.onSearch.bind(this);
+    this.state = {
+      selectedGroupOptions: [{
+        groupId: 'Group1',
+        id: 'group13'
+      }, {
+        groupId: 'Group1',
+        id: '1212'
+      }, {
+        groupId: 'Group2',
+        id: '2222'
+      }],
+      selectedOptionDetails: {
+        Group1: [{
+          value: 'Ashok',
+          id: '1212'
+        }],
+        Group2: [{
+          value: 'team 1',
+          id: '2222'
+        }]
+      }
+    };
+  }
+
+  getNextOptions(searchStr) {
+    return Promise.resolve();
+  }
+
+  onSearch(searchStr) {
+    return Promise.resolve();
+  }
+
+  handleSelectOptions() {
+    let selectedGroupOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    this.setState({
+      selectedGroupOptions
+    });
+  }
+
+  groupFooter() {
+    return /*#__PURE__*/React.createElement("div", null, "Footer");
+  }
+
+  render() {
+    let groupOptions = [{
+      id: 'Group1',
+      name: 'Group 1',
+      options: [{
+        id: 'group11',
+        value: 'Option 1'
+      }, {
+        id: 'group12',
+        value: 'Option 2'
+      }, {
+        id: 'group13',
+        value: 'Option 3'
+      }],
+      textField: 'value',
+      valueField: 'id'
+    }, {
+      id: 'Group2',
+      name: 'Group 2',
+      options: [{
+        id: 'group21',
+        value: 'Group2 Option 1'
+      }, {
+        id: 'group22',
+        value: 'Group2 Option 2'
+      }, {
+        id: 'group23',
+        value: 'Group2 Option 3'
+      }],
+      textField: 'value',
+      valueField: 'id'
+    }];
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, {
+      groupedOptions: groupOptions,
+      selectedGroupOptions: this.state.selectedGroupOptions,
+      onChange: this.handleSelectOptions,
+      dataIdSrchEmptyMsg: "EmptySearch",
+      dataIdNoOptnsMsg: "NoData",
+      needLocalSearch: true,
+      getNextOptions: this.getNextOptions,
+      onSearch: this.onSearch,
+      selectedOptionDetails: this.state.selectedOptionDetails,
+      i18nKeys: {
+        clearText: 'Clear Selected Items',
+        loadingText: 'Fetching...',
+        emptyText: 'No Options .',
+        noMoreText: 'No More Options .',
+        searchEmptyText: 'No Matches Found .'
+      }
+    }), /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, {
+      groupedOptions: groupOptions,
+      selectedGroupOptions: this.state.selectedGroupOptions,
+      onChange: this.handleSelectOptions,
+      emptyMessage: "No data found",
+      searchEmptyMessage: "No results found",
+      dataIdSrchEmptyMsg: "EmptySearch",
+      dataIdNoOptnsMsg: "NoData",
+      needLocalSearch: true,
+      getNextOptions: this.getNextOptions,
+      onSearch: this.onSearch,
+      selectedOptionDetails: this.state.selectedOptionDetails,
+      getFooter: this.groupFooter
+    }, /*#__PURE__*/React.createElement("div", null, "Children")));
+  }
+
+}
+
+if (false) {
+  AdvancedGroupMultiSelect__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide'
+  };
+}

package/es/MultiSelect/docs/AdvancedMultiSelect__default.docs.js

@@ -0,0 +1,114 @@
+/**** Libraries ****/
+import React, { Component } from 'react';
+/**** Components ****/
+
+import AdvancedMultiSelect from '../AdvancedMultiSelect';
+export default class AdvancedMultiSelect__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      options: [{
+        id: 2,
+        text: 'text2',
+        listItemProps: {
+          style: {
+            color: 'red'
+          }
+        }
+      }, {
+        id: 3,
+        text: 'text3',
+        listItemProps: {
+          style: {
+            color: 'blue'
+          }
+        }
+      }, {
+        id: 4,
+        text: 'text4'
+      }, {
+        id: 5,
+        text: 'text5'
+      }, {
+        id: 6,
+        text: 'text6'
+      }, {
+        id: 7,
+        text: 'text7'
+      }, {
+        id: 8,
+        text: 'text8'
+      }, {
+        id: 9,
+        text: 'text9'
+      }, {
+        id: 10,
+        text: 'text10'
+      }],
+      selectedOptions: [1, 2, 3, 4],
+      selectedOptionDetails: [{
+        id: 1,
+        text: 'text1'
+      }]
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleGetSelectedOptionDetails = this.handleGetSelectedOptionDetails.bind(this);
+    this.getFooter = this.getFooter.bind(this);
+  }
+
+  handleChange(selectedOptions) {
+    this.setState({
+      selectedOptions
+    });
+  }
+
+  handleGetSelectedOptionDetails() {
+    return Promise.resolve();
+  }
+
+  getFooter() {
+    return /*#__PURE__*/React.createElement("div", null, "Custom Footer");
+  }
+
+  render() {
+    let {
+      selectedOptions,
+      options,
+      selectedOptionDetails
+    } = this.state;
+    return /*#__PURE__*/React.createElement(AdvancedMultiSelect, {
+      id: "8888",
+      options: options,
+      selectedOptions: selectedOptions,
+      onChange: this.handleChange,
+      selectedOptionsLimit: 2,
+      selectedOptionDetails: selectedOptionDetails,
+      getSelectedOptionDetails: this.handleGetSelectedOptionDetails,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      placeHolder: "Select Text",
+      optionType: "default",
+      i18nKeys: {
+        clearText: 'Clear Selected Items',
+        loadingText: 'Fetching...',
+        emptyText: 'No Options .',
+        noMoreText: 'No More Options .',
+        searchEmptyText: 'No Matches Found .'
+      },
+      getFooter: this.getFooter,
+      customProps: {
+        SuggestionsProps: {
+          needBorder: false
+        }
+      }
+    });
+  }
+
+}
+
+if (false) {
+  AdvancedMultiSelect__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide'
+  };
+}

package/es/MultiSelect/docs/MultiSelectWithAvatar__default.docs.js

@@ -0,0 +1,141 @@
+/**** Libraries ****/
+import React, { Component } from 'react';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+/**** Components ****/
+
+import MultiSelectWithAvatar from '../MultiSelectWithAvatar';
+export default class MultiSelectWithAvatar__default extends Component {
+  constructor(props) {
+    super(props);
+    let photoURL = '';
+    this.state = {
+      options: [{
+        id: 'text1',
+        text: 'text1',
+        photoURL
+      }, {
+        id: 'text2',
+        text: 'text2',
+        photoURL
+      }, {
+        id: 'text3',
+        text: 'text3',
+        photoURL
+      }, {
+        id: 'text4',
+        text: 'text4',
+        photoURL
+      }, {
+        id: 'text5',
+        text: 'text5'
+      }, {
+        id: 'text6',
+        text: 'text6',
+        photoURL
+      }, {
+        id: 'text7',
+        text: 'text7',
+        photoURL
+      }, {
+        id: 'text8',
+        text: 'text8',
+        photoURL
+      }, {
+        id: 'text9',
+        text: 'text9',
+        photoURL
+      }, {
+        id: 'text10',
+        text: 'text10',
+        photoURL
+      }],
+      selectedOptions: ['text1', 'text2', 'text3', 'text4', 'text5']
+    };
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  handleSelect(options) {
+    this.setState({
+      selectedOptions: options
+    });
+  }
+
+  render() {
+    let {
+      selectedOptions,
+      options
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement("div", null, "Default"), /*#__PURE__*/React.createElement(MultiSelectWithAvatar, {
+      valueField: "id",
+      textField: "text",
+      imageField: "photoURL",
+      options: options,
+      onChange: this.handleSelect,
+      selectedOptions: selectedOptions,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      placeHolder: "Select Text",
+      i18nKeys: {
+        clearText: 'Clear Selected Items',
+        loadingText: 'Fetching...',
+        emptyText: 'No Options .',
+        noMoreText: 'No More Options .',
+        searchEmptyText: 'No Matches Found .'
+      }
+    }), /*#__PURE__*/React.createElement("div", null, "Disabled"), /*#__PURE__*/React.createElement(MultiSelectWithAvatar, {
+      isDisabled: true,
+      valueField: "id",
+      textField: "text",
+      imageField: "photoURL",
+      options: options,
+      onChange: this.handleSelect,
+      selectedOptions: selectedOptions,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      placeHolder: "Select Text",
+      emptyMessage: "No Options",
+      noMoreOptionsMessage: "No More Options",
+      searchEmptyMessage: "No Matches Found"
+    }), /*#__PURE__*/React.createElement("div", null, "Readonly"), /*#__PURE__*/React.createElement(MultiSelectWithAvatar, {
+      isReadOnly: true,
+      valueField: "id",
+      textField: "text",
+      imageField: "photoURL",
+      options: options,
+      onChange: this.handleSelect,
+      selectedOptions: selectedOptions,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      placeHolder: "Select Text",
+      emptyMessage: "No Options",
+      noMoreOptionsMessage: "No More Options",
+      searchEmptyMessage: "No Matches Found"
+    }), /*#__PURE__*/React.createElement(MultiSelectWithAvatar, {
+      isReadOnly: true,
+      valueField: "id",
+      textField: "text",
+      imageField: "photoURL",
+      options: options,
+      onChange: this.handleSelect,
+      selectedOptions: selectedOptions,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      placeHolder: "Select Text",
+      emptyMessage: "No Options",
+      noMoreOptionsMessage: "No More Options",
+      searchEmptyMessage: "No Matches Found",
+      needBorder: false,
+      disableAction: true
+    })));
+  }
+
+}
+
+if (false) {
+  MultiSelectWithAvatar__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    external: true,
+    description: ' '
+  };
+}