@zohodesk/components 1.0.0-temp-191 → 1.0.0-temp-192

package/es/Modal/Modal.js

@@ -1,3 +1,5 @@
+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 ReactDOM from 'react-dom';
@@ -129,10 +131,9 @@ export default class Modal extends React.Component {
 
     if (isMounted) {
       if (Element) {
-        return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Element, {
-          ref: this.setRef,
-          ...elementProps
-        }), this.portalDiv);
+        return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Element, _extends({
+          ref: this.setRef
+        }, elementProps)), this.portalDiv);
       }
 
       return null;

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -1,3 +1,5 @@
+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); }
+
 import React from 'react';
 import { AdvancedGroupMultiSelect_propTypes } from './props/propTypes';
 import { AdvancedGroupMultiSelect_defaultProps } from './props/defaultProps';
@@ -870,8 +872,12 @@ class AdvancedGroupMultiSelect extends React.Component {
       a11y,
       palette,
       needEffect,
-      autoComplete
+      autoComplete,
+      customProps
     } = this.props;
+    const {
+      suggestionsProps
+    } = customProps;
     let {
       clearText = 'Clear all'
     } = i18nKeys;
@@ -1031,7 +1037,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'heading'
           }
-        })), /*#__PURE__*/React.createElement(Suggestions, {
+        })), /*#__PURE__*/React.createElement(Suggestions, _extends({
           suggestions: suggestions,
           selectedOptions: selectedOptionIds,
           getRef: this.suggestionItemRef,
@@ -1043,7 +1049,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'option'
           }
-        }));
+        }, suggestionsProps)));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,
         searchString: searchStr,

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -1,3 +1,5 @@
+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 { AdvancedMultiSelect_propTypes } from './props/propTypes';
@@ -486,7 +488,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       let {
         tabletMode
       } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
         animationStyle: animationStyle,
         boxPosition: position || `${defaultDropBoxPosition}Center`,
         getRef: getContainerRef,
@@ -500,11 +502,11 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         a11y: {
           role: 'listbox',
           ariaMultiselectable: true
-        },
-        ...DropBoxProps,
+        }
+      }, DropBoxProps, {
         alignBox: "row",
         isResponsivePadding: getFooter ? false : true
-      }, isLoading ? /*#__PURE__*/React.createElement(Container, {
+      }), isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader
       }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
@@ -521,7 +523,7 @@ export class AdvancedMultiSelectComponent 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({
         suggestions: suggestions,
         selectedOptions: allselectedOptionIds,
         getRef: this.suggestionItemRef,
@@ -532,9 +534,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         listItemSize: listItemSize,
         a11y: {
           role: 'option'
-        },
-        ...SuggestionsProps
-      }) : /*#__PURE__*/React.createElement(EmptyState, {
+        }
+      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/es/MultiSelect/MobileHeader/MobileHeader.module.css

@@ -1,19 +1,16 @@
-.container {
-  padding: 0 20px 12px 20px;
-}
-
-.header {
-  padding-bottom: 4px;
-}
-
-.cardHeading {
-  font-size: 16px;
-  color: var(--zdt_multiselect_res_title_text);
-  composes: bold dotted from '../../common/common.module.css'
-}
-
-.buttonText {
-  font-size: 15px;
-  padding: 0;
-  composes: dotted from '../../common/common.module.css'
-}
+.container{
+    padding: 0 var(--zd_size20) var(--zd_size12) var(--zd_size20) ;
+  }
+  .header{
+    padding-bottom: var(--zd_size4) ;
+  }
+  .cardHeading{
+    font-size: var(--zd_font_size16) ;
+    color: var(--zdt_multiselect_res_title_text);
+    composes: bold dotted from '../../common/common.module.css'
+  }
+  .buttonText{
+    font-size: var(--zd_font_size15) ;
+    composes: dotted from '../../common/common.module.css';
+    padding: 0 
+  }

package/es/MultiSelect/MultiSelect.js

@@ -1,3 +1,5 @@
+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 { MultiSelect_propTypes } from './props/propTypes';
@@ -990,8 +992,12 @@ export class MultiSelectComponent extends React.Component {
       boxSize,
       isLoading,
       selectAllText,
-      needSelectAll
+      needSelectAll,
+      customProps
     } = this.props;
+    const {
+      suggestionsProps = {}
+    } = customProps;
     const {
       selectedOptions,
       searchStr,
@@ -1064,7 +1070,7 @@ export class MultiSelectComponent extends React.Component {
       eleRef: this.suggestionContainerRef
     }, isSearching ? /*#__PURE__*/React.createElement("div", {
       className: style[palette]
-    }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+    }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
       suggestions: suggestions,
       getRef: this.suggestionItemRef,
       hoverOption: hoverOption,
@@ -1077,7 +1083,7 @@ export class MultiSelectComponent extends React.Component {
       a11y: {
         role: 'option'
       }
-    }) : /*#__PURE__*/React.createElement(EmptyState, {
+    }, suggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,
       searchString: searchStr,

package/es/MultiSelect/MultiSelect.module.css

@@ -1,122 +1,110 @@
 .wrapper {
   position: relative;
 }
-
-.disabled,
-.readOnly {
+.disabled, .readOnly {
   cursor: not-allowed;
 }
-
 .container {
-  max-height: 120px;
+  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;
-  transition: border var(--zd_transition2) linear 0s;
 }
-
 .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: 8px;
+  padding-bottom: var(--zd_size8) ;
 }
 
 .container.xmedium {
-  padding-bottom: 3px;
-  min-height: 30px;
+  min-height: var(--zd_size30) ;
+  padding-bottom: var(--zd_size3) ;
 }
 
 .delete {
-  padding: 2px 6px;
+  font: inherit;
+  padding: var(--zd_size2) var(--zd_size6) ;
   cursor: pointer;
   border: 0;
   background-color: var(--zdt_multiselect_delete_bg);
-  font: inherit;
 }
-
 .delete,
 .defaultDelete {
   color: var(--zdt_multiselect_delete_text);
 }
-
 .darkDelete {
   color: var(--zdt_multiselect_darkdelete_text);
 }
 
 .delete:hover,
 .defaultDelete:hover {
-  color: var(--zdt_base_color);
+  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%;
+  max-width: 100% ;
 }
 
-.container.xmedium .tag {
-  margin: 2px 10px 0 0;
+[dir=ltr] .container.xmedium .tag {
+  margin: var(--zd_size2) var(--zd_size10) 0 0 ;
 }
 
-.container.medium .tag {
-  margin: 5px 10px 0 0;
+[dir=rtl] .container.xmedium .tag {
+  margin: var(--zd_size2) 0 0 var(--zd_size10) ;
 }
 
-.responsiveParent {
-  width: 100%;
+[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_base_bg);
+  background: var(--zdt_multiselect_box_bg);
 }
 
 .selectAll:hover {
@@ -124,43 +112,41 @@
 }
 
 .small {
-  max-height: 200px;
+  max-height: var(--zd_size200) ;
 }
 
 .medium {
-  max-height: 350px;
+  max-height: var(--zd_size350) ;
 }
 
 .large {
-  max-height: 400px;
+  max-height: var(--zd_size400) ;
 }
 
 .commonMessage {
-  font-size: 14px;
+  font-size: var(--zd_font_size14) ;
   composes: semibold from '../common/common.module.css';
-  padding: 12px 15px;
+  padding: var(--zd_size12) var(--zd_size15) ;
 }
-
 .default,
 .dark {
   composes: commonMessage;
 }
-
 .default,
 .defaultBox {
   color: var(--zdt_multiselect_message_text);
 }
-
 .dark,
 .darkBox {
-  background: var(--zdt_multiselect_darkmsg_bg);
   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;
@@ -168,51 +154,51 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 100%;
+  max-width: 100% ;
   visibility: hidden;
 }
-
 .custmSpanMedium {
-  height: 35px;
+  height: var(--zd_size35) ;
 }
-
 .custmSpanXmedium {
-  height: 28px;
+  height: var(--zd_size28) ;
 }
-
 .custmInputWrapper {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
+  top: 0 ;
+  width: 100% ;
+}
+[dir=ltr] .custmInputWrapper {
+  left: 0 ;
+}
+[dir=rtl] .custmInputWrapper {
+  right: 0 ;
 }
-
 .title {
-  margin-bottom: 6px;
+  margin-bottom: var(--zd_size6) ;
 }
-
 .groupTitle {
-  margin: 6px 0;
+  margin: var(--zd_size6) 0 ;
 }
-
 .loader {
-  padding: 10px;
+  padding: var(--zd_size10) ;
 }
-
 .iconContainer {
-  padding-top: 3px
+  padding-top: var(--zd_size3) 
 }
-
-.clearIconSpace {
-  padding-right: 37px
+[dir=ltr] .clearIconSpace {
+  padding-right: var(--zd_size37) 
+}
+[dir=rtl] .clearIconSpace {
+  padding-left: var(--zd_size37) 
 }
 
 .more {
-  font-size: 14px;
+  font-size: var(--zd_font_size14) ;
   color: var(--zdt_multiselect_more_text);
-  cursor: pointer;
-  margin-top: 5px;
   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,5 @@
+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';
@@ -83,6 +85,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       needEffect,
       isLoading,
       keepSelectedOptions,
+      needMultiLineText,
       customProps
     } = this.props;
     let {
@@ -155,7 +158,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       shrink: true,
       customClass: !isModel && 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,
@@ -169,8 +172,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       a11y: {
         role: 'option'
       },
-      ...SuggestionsProps
-    }) : /*#__PURE__*/React.createElement(EmptyState, {
+      needMultiLineText: needMultiLineText
+    }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,
       searchString: searchStr,

package/es/MultiSelect/SelectedOptions.js

@@ -1,3 +1,5 @@
+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 { SelectedOptions_propTypes } from './props/propTypes';
@@ -50,28 +52,28 @@ export default class SelectedOptions extends React.PureComponent {
         return /*#__PURE__*/React.createElement(Box, {
           className: `${style.tag} ${style[size]}`,
           key: `${id}photoTag`
-        }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
+        }, /*#__PURE__*/React.createElement(Tag, _extends({}, commonProps, {
           active: highLightedSelectOptions.indexOf(id) >= 0,
           hasAvatar: true,
           imageURL: photoURL
-        }));
+        })));
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(Box, {
           className: `${style.tag} ${style[size]}`,
           key: `${id}iconTag`
-        }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
+        }, /*#__PURE__*/React.createElement(Tag, _extends({}, commonProps, {
           active: highLightedSelectOptions.indexOf(id) >= 0,
           iconName: icon,
           iconSize: iconSize
-        }));
+        })));
       }
 
       return /*#__PURE__*/React.createElement(Box, {
         className: `${style.tag} ${style[size]}`,
         key: `${id}tag`
-      }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
+      }, /*#__PURE__*/React.createElement(Tag, _extends({}, commonProps, {
         active: highLightedSelectOptions.indexOf(id) >= 0
-      }));
+      })));
     }));
   }
 

package/es/MultiSelect/SelectedOptions.module.css

@@ -1,9 +1,15 @@
 .tag {
-  max-width: 100%;
+  max-width: 100% ;
 }
-.xmedium {
-  margin: 0 10px 2px 0;
+[dir=ltr] .xmedium {
+  margin: 0 var(--zd_size10) var(--zd_size2) 0 ;
 }
-.medium {
-  margin: 5px 10px 0 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/Suggestions.js

@@ -1,3 +1,5 @@
+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 { Suggestions_propTypes } from './props/propTypes';
@@ -27,7 +29,8 @@ export default class Suggestions extends React.PureComponent {
       avatarPalette,
       palette,
       htmlId,
-      a11y
+      a11y,
+      needMultiLineText
     } = this.props;
     const {
       ariaParentRole,
@@ -74,7 +77,7 @@ export default class Suggestions extends React.PureComponent {
       }
 
       if (optionType === 'avatar') {
-        return /*#__PURE__*/React.createElement(ListItemWithAvatar, { ...commonProps,
+        return /*#__PURE__*/React.createElement(ListItemWithAvatar, _extends({}, commonProps, {
           autoHover: false,
           getRef: getRef,
           highlight: isHighlight,
@@ -92,10 +95,11 @@ export default class Suggestions extends React.PureComponent {
           size: listItemSize,
           avatarPalette: avatarPalette,
           palette: palette,
-          a11y: list_a11y
-        });
+          a11y: list_a11y,
+          needMultiLineText: needMultiLineText
+        }));
       } else if (optionType === 'icon') {
-        return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
+        return /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({}, commonProps, {
           autoHover: false,
           getRef: getRef,
           highlight: isHighlight,
@@ -112,11 +116,12 @@ export default class Suggestions extends React.PureComponent {
           iconSize: iconSize,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y
-        });
+          a11y: list_a11y,
+          needMultiLineText: needMultiLineText
+        }));
       }
 
-      return /*#__PURE__*/React.createElement(ListItem, { ...commonProps,
+      return /*#__PURE__*/React.createElement(ListItem, _extends({}, commonProps, {
         autoHover: false,
         getRef: getRef,
         highlight: isHighlight,
@@ -131,8 +136,9 @@ export default class Suggestions extends React.PureComponent {
         active: isActive,
         size: listItemSize,
         palette: palette,
-        a11y: list_a11y
-      });
+        a11y: list_a11y,
+        needMultiLineText: needMultiLineText
+      }));
     })));
   }
 

package/es/MultiSelect/props/defaultProps.js

@@ -35,7 +35,8 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   needEffect: true,
   palette: 'default',
   isLoading: false,
-  dataSelectorId: 'advancedGroupMultiSelect'
+  dataSelectorId: 'advancedGroupMultiSelect',
+  customProps: {}
 };
 export const AdvancedMultiSelect_defaultProps = {
   animationStyle: 'bounce',
@@ -109,7 +110,9 @@ export const MultiSelect_defaultProps = {
   dataSelectorId: 'multiSelect',
   keepSelectedOptions: false,
   selectedOptionsCount: 0,
-  cardHeaderName: ''
+  cardHeaderName: '',
+  needResponsive: true,
+  customProps: {}
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'
@@ -143,11 +146,14 @@ export const MultiSelectWithAvatar_defaultProps = {
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
+  needResponsive: true,
+  needMultiLineText: false,
   customProps: {}
 };
 export const SelectedOptions_defaultProps = {
   size: 'medium'
 };
 export const Suggestions_defaultProps = {
-  a11y: {}
+  a11y: {},
+  needMultiLineText: false
 };