@zohodesk/components 1.0.0-temp-139 → 1.0.0-temp-141

package/es/MultiSelect/MultiSelect.module.css

@@ -1,206 +1,206 @@
-.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_multiselect_transparent_border);
-}
-.effect .borderColor_transparent:hover {
-  border-bottom-color: var(--zdt_multiselect_transparent_hover_border);
-}
-.effect .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 {
-  border-bottom-color: var(--zdt_multiselect_default_hover_border);
-}
-.effect .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 {
-  border-bottom-color: var(--zdt_multiselect_dark_hover_border);
-}
-.effect .borderColor_dark.active {
-  border-bottom-color: var(--zdt_multiselect_dark_active_border);
-}
-
-.container.medium {
-  padding-bottom: var(--zd_size8);
-}
-
-.container.xmedium {
-  min-height: var(--zd_size30);
-  padding-bottom: var(--zd_size3);
-}
-
-.delete {
-  font: inherit;
-  padding: var(--zd_size2) var(--zd_size6);
-  cursor: pointer;
-  border: 0;
-  background-color: var(--zdt_multiselect_delete_bg);
-}
-.delete,
-.defaultDelete {
-  color: var(--zdt_multiselect_delete_text);
-}
-.darkDelete {
-  color: var(--zdt_multiselect_darkdelete_text);
-}
-
-.delete:hover,
-.defaultDelete:hover {
-  color: var(--zdt_multiselect_delete_hover_text);
-}
-.darkDelete:hover {
-  color: var(--zdt_multiselect_darkdelete_hover_text);
-}
-.transparentContainer .delete {
-  opacity: 0;
-  visibility: hidden;
-}
-.transparentContainer:hover .delete {
-  opacity: 1;
-  visibility: visible;
-}
-
-.tag {
-  max-width: 100%;
-}
-
-[dir=ltr] .container.xmedium .tag {
-  margin: var(--zd_size2) var(--zd_size10) 0 0;
-}
-
-[dir=rtl] .container.xmedium .tag {
-  margin: var(--zd_size2) 0 0 var(--zd_size10);
-}
-
-[dir=ltr] .container.medium .tag {
-  margin: var(--zd_size5) var(--zd_size10) 0 0;
-}
-
-[dir=rtl] .container.medium .tag {
-  margin: var(--zd_size5) 0 0 var(--zd_size10);
-}
-.responsiveParent{
-  width: 100%;
-}
-.box {
-  background: var(--zdt_multiselect_box_bg);
-}
-
-.selectAll:hover {
-  color: var(--zdt_multiselect_selectall_text);
-}
-
-.small {
-  max-height: var(--zd_size200);
-}
-
-.medium {
-  max-height: var(--zd_size350);
-}
-
-.large {
-  max-height: var(--zd_size400);
-}
-
-.commonMessage {
-  font-size: var(--zd_font_size14);
-  composes: semibold from '../common/common.module.css';
-  padding: var(--zd_size12) var(--zd_size15);
-}
-.default,
-.dark {
-  composes: commonMessage;
-}
-.default,
-.defaultBox {
-  color: var(--zdt_multiselect_message_text);
-}
-.dark,
-.darkBox {
-  color: var(--zdt_multiselect_darkmsg_text);
-}
-.dark, .darkBox {
-  background: var(--zdt_multiselect_darkmsg_bg);
-}
-
-.hide {
-  composes: vishidden from '../common/common.module.css';
-}
-.custmSpan {
-  display: inline-block;
-  vertical-align: middle;
-  opacity: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-  visibility: hidden;
-}
-.custmSpanMedium {
-  height: var(--zd_size35);
-}
-.custmSpanXmedium {
-  height: var(--zd_size28);
-}
-.custmInputWrapper {
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-[dir=ltr] .custmInputWrapper {
-  left: 0;
-}
-[dir=rtl] .custmInputWrapper {
-  right: 0;
-}
-.title {
-  margin-bottom: var(--zd_size6);
-}
-.groupTitle {
-  margin: var(--zd_size6) 0;
-}
-.loader {
-  padding: var(--zd_size10);
-}
-.iconContainer {
-  padding-top: var(--zd_size3)
-}
-[dir=ltr] .clearIconSpace {
-  padding-right: var(--zd_size37)
-}
-[dir=rtl] .clearIconSpace {
-  padding-left: var(--zd_size37)
-}
-.search{
-  padding: 0px 20px;
-}
-.more {
-  font-size: var(--zd_font_size14);
-  color: var(--zdt_multiselect_more_text);
-  font-family: inherit;
-  cursor: pointer;
-  margin-top: var(--zd_size5);
-  background-color: var(--zdt_multiselect_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_multiselect_transparent_border);
+}
+.effect .borderColor_transparent:hover {
+  border-bottom-color: var(--zdt_multiselect_transparent_hover_border);
+}
+.effect .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 {
+  border-bottom-color: var(--zdt_multiselect_default_hover_border);
+}
+.effect .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 {
+  border-bottom-color: var(--zdt_multiselect_dark_hover_border);
+}
+.effect .borderColor_dark.active {
+  border-bottom-color: var(--zdt_multiselect_dark_active_border);
+}
+
+.container.medium {
+  padding-bottom: var(--zd_size8);
+}
+
+.container.xmedium {
+  min-height: var(--zd_size30);
+  padding-bottom: var(--zd_size3);
+}
+
+.delete {
+  font: inherit;
+  padding: var(--zd_size2) var(--zd_size6);
+  cursor: pointer;
+  border: 0;
+  background-color: var(--zdt_multiselect_delete_bg);
+}
+.delete,
+.defaultDelete {
+  color: var(--zdt_multiselect_delete_text);
+}
+.darkDelete {
+  color: var(--zdt_multiselect_darkdelete_text);
+}
+
+.delete:hover,
+.defaultDelete:hover {
+  color: var(--zdt_multiselect_delete_hover_text);
+}
+.darkDelete:hover {
+  color: var(--zdt_multiselect_darkdelete_hover_text);
+}
+.transparentContainer .delete {
+  opacity: 0;
+  visibility: hidden;
+}
+.transparentContainer:hover .delete {
+  opacity: 1;
+  visibility: visible;
+}
+
+.tag {
+  max-width: 100%;
+}
+
+[dir=ltr] .container.xmedium .tag {
+  margin: var(--zd_size2) var(--zd_size10) 0 0;
+}
+
+[dir=rtl] .container.xmedium .tag {
+  margin: var(--zd_size2) 0 0 var(--zd_size10);
+}
+
+[dir=ltr] .container.medium .tag {
+  margin: var(--zd_size5) var(--zd_size10) 0 0;
+}
+
+[dir=rtl] .container.medium .tag {
+  margin: var(--zd_size5) 0 0 var(--zd_size10);
+}
+.responsiveParent{
+  width: 100%;
+}
+.box {
+  background: var(--zdt_multiselect_box_bg);
+}
+
+.selectAll:hover {
+  color: var(--zdt_multiselect_selectall_text);
+}
+
+.small {
+  max-height: var(--zd_size200);
+}
+
+.medium {
+  max-height: var(--zd_size350);
+}
+
+.large {
+  max-height: var(--zd_size400);
+}
+
+.commonMessage {
+  font-size: var(--zd_font_size14);
+  composes: semibold from '../common/common.module.css';
+  padding: var(--zd_size12) var(--zd_size15);
+}
+.default,
+.dark {
+  composes: commonMessage;
+}
+.default,
+.defaultBox {
+  color: var(--zdt_multiselect_message_text);
+}
+.dark,
+.darkBox {
+  color: var(--zdt_multiselect_darkmsg_text);
+}
+.dark, .darkBox {
+  background: var(--zdt_multiselect_darkmsg_bg);
+}
+
+.hide {
+  composes: vishidden from '../common/common.module.css';
+}
+.custmSpan {
+  display: inline-block;
+  vertical-align: middle;
+  opacity: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+  visibility: hidden;
+}
+.custmSpanMedium {
+  height: var(--zd_size35);
+}
+.custmSpanXmedium {
+  height: var(--zd_size28);
+}
+.custmInputWrapper {
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+[dir=ltr] .custmInputWrapper {
+  left: 0;
+}
+[dir=rtl] .custmInputWrapper {
+  right: 0;
+}
+.title {
+  margin-bottom: var(--zd_size6);
+}
+.groupTitle {
+  margin: var(--zd_size6) 0;
+}
+.loader {
+  padding: var(--zd_size10);
+}
+.iconContainer {
+  padding-top: var(--zd_size3)
+}
+[dir=ltr] .clearIconSpace {
+  padding-right: var(--zd_size37)
+}
+[dir=rtl] .clearIconSpace {
+  padding-left: var(--zd_size37)
+}
+.search{
+  padding: 0px 20px;
+}
+.more {
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_multiselect_more_text);
+  font-family: inherit;
+  cursor: pointer;
+  margin-top: var(--zd_size5);
+  background-color: var(--zdt_multiselect_delete_bg);
+  border: 0;
 }

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -1,3 +1,4 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /**** Libraries ****/
 import React from 'react';
 import { MultiSelectWithAvatar_propTypes } from './props/propTypes';
@@ -99,8 +100,14 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       customChildrenClass,
       isBoxPaddingNeed,
       needEffect,
-      isLoading
+      isLoading,
+      keepSelectedOptions,
+      customProps
     } = this.props;
+    let {
+      TextBoxProps = {},
+      SuggestionsProps = {}
+    } = customProps;
     const {
       clearText = 'Clear all'
     } = i18nKeys;
@@ -119,7 +126,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       highLightedSelectOptions,
       options,
       isFetchingOptions,
-      isActive
+      isActive,
+      selectedOptionIds
     } = this.state;
     const suggestions = this.handleFilterSuggestions();
     const setAriaId = this.getNextAriaId();
@@ -183,7 +191,10 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       customClass: {
         customTBoxWrap: style.custmInputWrapper
       },
-      autoComplete: false
+      autoComplete: false,
+      customProps: {
+        TextBoxProps: TextBoxProps
+      }
     }, /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       alignBox: "row",
@@ -245,7 +256,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+        needTick: keepSelectedOptions,
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
         hoverOption: hoverOption,
@@ -254,10 +266,11 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
         needBorder: false,
         dataId: `${dataId}_Options`,
         palette: palette,
+        selectedOptions: selectedOptionIds,
         a11y: {
           role: 'option'
         }
-      }) : /*#__PURE__*/React.createElement(EmptyState, {
+      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/es/MultiSelect/SelectedOptions.module.css

@@ -1,15 +1,15 @@
-.tag {
-  max-width: 100%;
-}
-[dir=ltr] .xmedium {
-  margin: 0 var(--zd_size10) var(--zd_size2) 0;
-}
-[dir=rtl] .xmedium {
-  margin: 0 0 var(--zd_size2) var(--zd_size10);
-}
-[dir=ltr] .medium {
-  margin: var(--zd_size5) var(--zd_size10) 0 0;
-}
-[dir=rtl] .medium {
-  margin: var(--zd_size5) 0 0 var(--zd_size10);
-}
+.tag {
+  max-width: 100%;
+}
+[dir=ltr] .xmedium {
+  margin: 0 var(--zd_size10) var(--zd_size2) 0;
+}
+[dir=rtl] .xmedium {
+  margin: 0 0 var(--zd_size2) var(--zd_size10);
+}
+[dir=ltr] .medium {
+  margin: var(--zd_size5) var(--zd_size10) 0 0;
+}
+[dir=rtl] .medium {
+  margin: var(--zd_size5) 0 0 var(--zd_size10);
+}

package/es/MultiSelect/props/defaultProps.js

@@ -106,7 +106,8 @@ export const MultiSelect_defaultProps = {
   needEffect: true,
   boxSize: 'default',
   isLoading: false,
-  dataSelectorId: 'multiSelect'
+  dataSelectorId: 'multiSelect',
+  keepSelectedOptions: false
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'
@@ -138,7 +139,9 @@ export const MultiSelectWithAvatar_defaultProps = {
   isSearchClearOnSelect: true,
   needEffect: true,
   isLoading: false,
-  dataSelectorId: 'multiSelectWithAvatar'
+  dataSelectorId: 'multiSelectWithAvatar',
+  keepSelectedOptions: false,
+  customProps: {}
 };
 export const SelectedOptions_defaultProps = {
   size: 'medium'

package/es/MultiSelect/props/propTypes.js

@@ -239,7 +239,8 @@ export const MultiSelect_propTypes = {
   needEffect: PropTypes.bool,
   boxSize: PropTypes.string,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  keepSelectedOptions: PropTypes.bool
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -294,6 +295,11 @@ export const MultiSelectWithAvatar_propTypes = {
   htmlId: PropTypes.string,
   isBoxPaddingNeed: PropTypes.bool,
   needEffect: PropTypes.bool,
+  keepSelectedOptions: PropTypes.bool,
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object,
+    DropBoxProps: PropTypes.object
+  }),
   /**** Popup props ****/
   isPopupOpen: PropTypes.bool,
   isPopupReady: PropTypes.bool,

package/es/PopOver/PopOver.module.css

@@ -1,8 +1,8 @@
-.popup {
-  position: relative;
-  background-color: var(--dot_white);
-}
-.target {
-  composes: offSelection from '../common/common.module.css';
-  cursor: pointer;
-}
+.popup {
+  position: relative;
+  background-color: var(--dot_white);
+}
+.target {
+  composes: offSelection from '../common/common.module.css';
+  cursor: pointer;
+}