@zohodesk/components 1.0.0-temp-58 → 1.0.0-temp-61

package/es/MultiSelect/AdvancedMultiSelect.module.css

@@ -1,127 +1,127 @@
-.wrapper {
-  position: relative;
-}
-.disabled, .readOnly {
-  cursor: not-allowed;
-}
-.container {
-  max-height: var(--zd_size120);
-  composes: oflowy from '../common/common.module.css';
-}
-.hasBorder {
-  transition: border var(--zd_transition2) linear 0s;
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-}
-.borderColor_transparent {
-  border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
-}
-.effect .borderColor_transparent:hover {
-  border-bottom-color: var(--zdt_advancedmultiselect_transparent_hover_border);
-}
-.effect .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 {
-  border-bottom-color: var(--zdt_advancedmultiselect_default_hover_border);
-}
-.effect .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 {
-  border-bottom-color: var(--zdt_advancedmultiselect_dark_hover_border);
-}
-.effect .borderColor_dark.active {
-  border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
-}
-[dir=ltr] .container.medium {
-  padding: 0 var(--zd_size34) var(--zd_size7) 0;
-}
-[dir=rtl] .container.medium {
-  padding: 0 0 var(--zd_size7) var(--zd_size34);
-}
-.container.xmedium {
-  min-height: var(--zd_size30);
-}
-[dir=ltr] .container.xmedium {
-  padding: 0 var(--zd_size34) var(--zd_size1) 0;
-}
-[dir=rtl] .container.xmedium {
-  padding: 0 0 var(--zd_size1) var(--zd_size34);
-}
-
-.delete {
-  position: absolute;
-  bottom: 0;
-  color: var(--zdt_advancedmultiselect_delete_text);
-  padding-bottom: var(--zd_size10);
-  cursor: pointer;
-  background-color: var(--zdt_advancedmultiselect_delete_bg);
-  border: 0;
-}
-
-[dir=ltr] .delete {
-  right: var(--zd_size15);
-}
-
-[dir=rtl] .delete {
-  left: var(--zd_size15);
-}
-
-.delete:hover {
-  color: var(--zdt_advancedmultiselect_delete_hover_text);
-}
-.transparentContainer .delete {
-  opacity: 0;
-  visibility: hidden;
-}
-.transparentContainer:hover .delete {
-  opacity: 1;
-  visibility: visible;
-}
-
-.box {
-  background: var(--zdt_advancedmultiselect_box_bg);
-}
-
-.small {
-  max-height: var(--zd_size200);
-}
-
-.medium {
-  max-height: var(--zd_size350);
-}
-
-.large {
-  max-height: var(--zd_size400);
-}
-
-.dropContainer {
-  display: inline-block;
-  max-width: 100%;
-  margin-bottom: var(--zd_size5);
-}
-
-.dropPopup {
-  font-size: var(--zd_font_size13);
-}
-
-.dropPopup :global .toggleDropIcon {
-  color: var(--zdt_advancedmultiselect_droppopup_text);
-}
-
-.more {
-  font-size: var(--zd_font_size14);
-  color: var(--zdt_advancedmultiselect_more_text);
-  font-family: inherit;
-  cursor: pointer;
-  margin-top: var(--zd_size5);
-  background-color: var(--zdt_advancedmultiselect_delete_bg);
-  border: 0;
-}
+.wrapper {
+  position: relative;
+}
+.disabled, .readOnly {
+  cursor: not-allowed;
+}
+.container {
+  max-height: var(--zd_size120);
+  composes: oflowy from '../common/common.module.css';
+}
+.hasBorder {
+  transition: border var(--zd_transition2) linear 0s;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+}
+.borderColor_transparent {
+  border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
+}
+.effect .borderColor_transparent:hover {
+  border-bottom-color: var(--zdt_advancedmultiselect_transparent_hover_border);
+}
+.effect .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 {
+  border-bottom-color: var(--zdt_advancedmultiselect_default_hover_border);
+}
+.effect .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 {
+  border-bottom-color: var(--zdt_advancedmultiselect_dark_hover_border);
+}
+.effect .borderColor_dark.active {
+  border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
+}
+[dir=ltr] .container.medium {
+  padding: 0 var(--zd_size34) var(--zd_size7) 0;
+}
+[dir=rtl] .container.medium {
+  padding: 0 0 var(--zd_size7) var(--zd_size34);
+}
+.container.xmedium {
+  min-height: var(--zd_size30);
+}
+[dir=ltr] .container.xmedium {
+  padding: 0 var(--zd_size34) var(--zd_size1) 0;
+}
+[dir=rtl] .container.xmedium {
+  padding: 0 0 var(--zd_size1) var(--zd_size34);
+}
+
+.delete {
+  position: absolute;
+  bottom: 0;
+  color: var(--zdt_advancedmultiselect_delete_text);
+  padding-bottom: var(--zd_size10);
+  cursor: pointer;
+  background-color: var(--zdt_advancedmultiselect_delete_bg);
+  border: 0;
+}
+
+[dir=ltr] .delete {
+  right: var(--zd_size15);
+}
+
+[dir=rtl] .delete {
+  left: var(--zd_size15);
+}
+
+.delete:hover {
+  color: var(--zdt_advancedmultiselect_delete_hover_text);
+}
+.transparentContainer .delete {
+  opacity: 0;
+  visibility: hidden;
+}
+.transparentContainer:hover .delete {
+  opacity: 1;
+  visibility: visible;
+}
+
+.box {
+  background: var(--zdt_advancedmultiselect_box_bg);
+}
+
+.small {
+  max-height: var(--zd_size200);
+}
+
+.medium {
+  max-height: var(--zd_size350);
+}
+
+.large {
+  max-height: var(--zd_size400);
+}
+
+.dropContainer {
+  display: inline-block;
+  max-width: 100%;
+  margin-bottom: var(--zd_size5);
+}
+
+.dropPopup {
+  font-size: var(--zd_font_size13);
+}
+
+.dropPopup :global .toggleDropIcon {
+  color: var(--zdt_advancedmultiselect_droppopup_text);
+}
+
+.more {
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_advancedmultiselect_more_text);
+  font-family: inherit;
+  cursor: pointer;
+  margin-top: var(--zd_size5);
+  background-color: var(--zdt_advancedmultiselect_delete_bg);
+  border: 0;
+}

package/es/MultiSelect/MultiSelect.js

@@ -24,6 +24,7 @@ import style from './MultiSelect.module.css';
 
 import { debounce, scrollTo, bind, getIsEmptyValue, getSearchString } from '../utils/Common.js';
 import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetMultiSelectSelectedOptions as makeGetSelectedOptions, makeObjectConcat, filterSelectedOptions, makeGetIsShowClearIcon } from '../utils/dropDownUtils';
+import { getLibraryConfig } from '../Provider/Config';
 /* eslint-disable react/forbid-component-props */
 
 /* eslint-disable react/no-unused-prop-types */
@@ -313,8 +314,8 @@ export class MultiSelectComponent extends React.Component {
     if (suggestionsLen && isPopupOpen && keyCode === 38) {
       //up arrow
 
-      /*if (hoverOption === 0) { //disable first to last option higlight
-        !isNextOptions && this.setState({ hoverOption: suggestionsLen - 1 });
+      /*if (hoverOption === 0) { //disable first to last option higlight
+        !isNextOptions && this.setState({ hoverOption: suggestionsLen - 1 });
       }*/
       if (hoverOption) {
         this.setState({
@@ -324,9 +325,9 @@ export class MultiSelectComponent extends React.Component {
     } else if (suggestionsLen && isPopupOpen && keyCode === 40) {
       //down arrow
 
-      /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
-        //disable last to first option higlight
-        !isNextOptions && this.setState({ hoverOption: 0 });
+      /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
+        //disable last to first option higlight
+        !isNextOptions && this.setState({ hoverOption: 0 });
       }*/
       if (isNextOptions && suggestionsLen >= 5 && hoverOption === suggestionsLen - 3) {
         getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);
@@ -869,7 +870,8 @@ export class MultiSelectComponent extends React.Component {
       getFooter,
       needEffect,
       disabledOptions,
-      boxSize
+      boxSize,
+      autoComplete
     } = this.props;
     const {
       clearText = 'Clear all',
@@ -960,7 +962,7 @@ export class MultiSelectComponent extends React.Component {
         ariaRequired: true,
         ariaDescribedby: ariaErrorId
       },
-      autoComplete: false
+      autoComplete: autoComplete
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: "vertical"
@@ -1035,6 +1037,7 @@ export class MultiSelectComponent extends React.Component {
 }
 MultiSelectComponent.propTypes = {
   animationStyle: PropTypes.string,
+  autoComplete: PropTypes.bool,
   borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
   closePopupOnly: PropTypes.func,
   dataId: PropTypes.string,
@@ -1114,6 +1117,7 @@ MultiSelectComponent.propTypes = {
 };
 MultiSelectComponent.defaultProps = {
   animationStyle: 'bounce',
+  autoComplete: getLibraryConfig('autoComplete'),
   dataId: 'multiSelect',
   dropBoxSize: 'small',
   isAnimate: true,