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

package/lib/Label/Label.module.css

@@ -1,12 +1,11 @@
 .varClass {
   /* label default variables */
-  --label_font_size: 14px;
-  --label_text_color: var(--zdt_base_color);
+  --label_font_size: var(--zd_font_size14);
+  --label_text_color: var(--zdt_label_default_text);
   --label_font_family: var(--zd_regular);
   --label_cursor: default;
   --label_line_height: 1.286;
 }
-
 /* css:lineheight-validation:ignore */
 .label {
   composes: varClass;
@@ -17,53 +16,42 @@
   font-family: var(--label_font_family);
   cursor: var(--label_cursor);
 }
-
 .xsmall {
-  --label_font_size: 12px;
-  --label_line_height: 1.5;
+  --label_font_size: var(--zd_font_size12);
+  --label_line_height:1.5;
 }
-
 .small {
-  --label_font_size: 13px;
-  --label_line_height: 1.385;
+  --label_font_size: var(--zd_font_size13);
+  --label_line_height:1.385;
 }
-
 .medium {
-  --label_font_size: 14px;
-  --label_line_height: 1.286;
+  --label_font_size: var(--zd_font_size14);
+  --label_line_height:1.286;
 }
-
 .large {
-  --label_font_size: 26px;
-  --label_line_height: 0.6923;
+  --label_font_size: var(--zd_font_size26);
+  --label_line_height:0.6923;
   composes: semibold from '../common/common.module.css';
 }
-
 .pointer {
   --label_cursor: pointer;
 }
-
 .cursor {
   --label_cursor: default;
 }
-
 .title {
   display: block;
 }
-
 .subtitle {
   display: inline-block;
 }
-
 .font_default {
   --label_font_family: var(--zd_regular);
 }
-
 .font_primary {
   --label_font_family: var(--zd_semibold);
   composes: ftsmooth from '../common/common.module.css';
 }
-
 .dotted {
   composes: dotted from '../common/common.module.css';
-}
+}

package/lib/Label/LabelColors.module.css

@@ -1,27 +1,21 @@
 .default {
-  --label_text_color: var(--zdt_base_color);
+  --label_text_color: var(--zdt_label_default_text);
 }
-
 .primary {
   --label_text_color: var(--zdt_label_primary_text);
 }
-
 .secondary {
   --label_text_color: var(--zdt_label_secondary_text);
 }
-
 .danger {
   --label_text_color: var(--zdt_label_danger_text);
 }
-
 .mandatory {
   --label_text_color: var(--zdt_label_mandatory_text);
 }
-
 .disable {
   --label_text_color: var(--zdt_label_disable_text);
 }
-
 .dark {
   --label_text_color: var(--zdt_label_dark_text);
 }

package/lib/Layout/Layout.module.css

@@ -11,8 +11,8 @@
 }
 
 .cover {
-  width: 100%;
-  height: 100%;
+  width: 100% ;
+  height: 100% ;
 }
 
 /* .flex {
@@ -67,8 +67,8 @@
   -webkit-box-flex: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
-  min-height: 0;
-  min-width: 0;
+  min-height: 0 ;
+  min-width: 0 ;
 }
 
 .shrinkOff {
@@ -83,18 +83,18 @@
   -moz-flex-shrink: 1;
   -webkit-flex-shrink: 1;
   -ms-flex-shrink: 1;
-  min-width: 0;
+  min-width: 0 ;
 }
 
 .basis {
-  flex-basis: 0%;
+  flex-basis: 0% ;
   -webkit-flex-basis: 0%;
   -moz-flex-basis: 0%;
   -ms-flex-basis: 0%;
 }
 
 .basisAuto {
-  flex-basis: auto;
+  flex-basis: auto ;
   -webkit-flex-basis: auto;
   -moz-flex-basis: auto;
   -ms-flex-basis: auto;
@@ -146,8 +146,8 @@
 
 .col-3 {
   -ms-flex-preferred-size: 25%;
-  flex-basis: 25%;
-  max-width: 25%;
+  flex-basis: 25% ;
+  max-width: 25% ;
 }
 
 .col-4 {
@@ -164,8 +164,8 @@
 
 .col-6 {
   -ms-flex-preferred-size: 50%;
-  flex-basis: 50%;
-  max-width: 50%;
+  flex-basis: 50% ;
+  max-width: 50% ;
 }
 
 .col-7 {
@@ -182,8 +182,8 @@
 
 .col-9 {
   -ms-flex-preferred-size: 75%;
-  flex-basis: 75%;
-  max-width: 75%;
+  flex-basis: 75% ;
+  max-width: 75% ;
 }
 
 .col-10 {
@@ -200,8 +200,8 @@
 
 .col-12 {
   -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
-  max-width: 100%;
+  flex-basis: 100% ;
+  max-width: 100% ;
 }
 
 .hCenter {

package/lib/ListItem/ListItem.js

@@ -150,7 +150,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: customListItem,
+        customClass: "".concat(_ListItemModule["default"].txtAlignBaseLine, " ").concat(customListItem),
         dataId: dataIdString,
         dataSelectorId: "".concat(dataSelectorId),
         isLink: isLink,
@@ -171,7 +171,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         adjust: true,
         className: _ListItemModule["default"].children
       }, children) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon),
+        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")

package/lib/ListItem/ListItem.module.css

@@ -1,12 +1,9 @@
 .varClass {
   /* listitem default variables */
-  --listitem_text_color: var(--zdt_base_color);
-  --listitem_padding: 9px 20px;
+  --listitem_text_color: var(--zdt_listitem_default_text);
+  --listitem_padding: var(--zd_size9) var(--zd_size20);
   --listitem_border_width: 0;
   --listitem_border_color: var(--zdt_listitem_default_border);
-  --listitem_avatar_margin: 0 15px 0 0
-    /*rtl: 0 0 0 15px*/
-  ;
   --listitem_bg_color: var(--zdt_listitem_default_bg);
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
   --listitem_height: auto;
@@ -17,6 +14,10 @@
 
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
+}[dir=ltr] .varClass {
+  --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
+}[dir=rtl] .varClass {
+  --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
 }
 
 .list {
@@ -24,49 +25,58 @@
   position: relative;
   list-style: none;
   color: var(--listitem_text_color);
-  font-size: 13px;
+  font-size: var(--zd_font_size13) ;
+  height: var(--listitem_height);
+  min-height: var(--listitem_min_height);
+  text-decoration: none;
   padding: var(--listitem_padding);
   border-width: var(--listitem_border_width);
   border-style: solid;
   border-color: var(--listitem_border_color);
-  height: var(--listitem_height);
-  min-height: var(--listitem_min_height);
   cursor: pointer;
-  text-decoration: none;
 }
 
-.list,
-.default,
-.secondary {
+.list, .default, .secondary {
   background-color: var(--listitem_bg_color);
 }
 
-.withBorder {
+[dir=ltr] .withBorder {
   --listitem_border_width: 0 0 0 1px
     /*rtl: 0 1px 0 0*/
   ;
 }
 
+[dir=rtl] .withBorder {
+  --listitem_border_width: 0 0 0 1px  ;
+}
+
 .active {
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
 
-.small {
-  --listitem_padding: 7px 3px 7px 5px
-    /*rtl: 7px 5px 7px 3px*/
-  ;
+[dir=ltr] .small {
+  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
+}
+
+[dir=rtl] .small {
+  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
 }
 
 .medium {
-  --listitem_padding: 7px 20px;
-  --listitem_min_height: 35px;
+  --listitem_padding: var(--zd_size7) var(--zd_size20);
+  --listitem_min_height: var(--zd_size35);
 }
 
 .large {
-  --listitem_padding: 10px 3px 10px 25px
-    /*rtl: 10px 25px 10px 3px*/
-  ;
-  --listitem_height: 48px;
+  --listitem_height: var(--zd_size48);
+}
+
+[dir=ltr] .large {
+  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
+}
+
+[dir=rtl] .large {
+  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
 }
 
 .value,
@@ -74,43 +84,55 @@
   composes: dotted from '../common/common.module.css';
 }
 
-.value,
-.multiLineValue {
+.value {
   line-height: 1.5385;
 }
 
 .multiLineValue {
+  line-height: 1.3076;
   word-break: break-word;
-  composes: clamp from '../common/common.module.css'
+  -webkit-line-clamp: 5;
+  composes: clamp from '../common/common.module.css';
 }
 
 .iconBox {
-  width: 20px;
-  margin-right: 10px;
+  width: var(--zd_size20) ;
   text-align: center;
 }
 
+[dir=ltr] .iconBox {
+  margin-right: var(--zd_size10) ;
+}
+
+[dir=rtl] .iconBox {
+  margin-left: var(--zd_size10) ;
+}
+
 .iconBox,
 .leftAvatar {
-  font-size: 0;
+  font-size: 0 ;
 }
 
 .leftAvatar {
   margin: var(--listitem_avatar_margin);
 }
 
-.defaultHover,
-.primaryHover,
-.secondaryHover,
-.darkHover {
+.defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
 
 .activewithBorder {
+  --listitem_border_color: var(--zdt_listitem_active_border);
+}
+
+[dir=ltr] .activewithBorder {
   --listitem_border_width: 0 0 0 1px
     /*rtl: 0 1px 0 0*/
   ;
-  --listitem_border_color: var(--zdt_listitem_active_border);
+}
+
+[dir=rtl] .activewithBorder {
+  --listitem_border_width: 0 0 0 1px  ;
 }
 
 .defaultHover,
@@ -149,10 +171,7 @@
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
 
-.activedefault,
-.activeprimary,
-.activesecondary,
-.activedark {
+.activedefault, .activeprimary, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
 
@@ -182,7 +201,14 @@
 .darkTick {
   position: absolute;
   color: var(--listitem_tickicon_color);
-  right: 20px;
+}
+
+[dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
+  right: var(--zd_size20) ;
+}
+
+[dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
+  left: var(--zd_size20) ;
 }
 
 .defaultTick {
@@ -197,27 +223,50 @@
   display: block;
 }
 
-.smallwithTick {
-  --listitem_padding: 7px 39px 7px 5px
-    /*rtl: 7px 5px 7px 39px*/
-  ;
+[dir=ltr] .smallwithTick {
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
 }
 
-.mediumwithTick {
-  --listitem_padding: 7px 39px 7px 20px
-    /*rtl: 7px 20px 7px 39px*/
-  ;
+[dir=rtl] .smallwithTick {
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
 }
 
-.largewithTick {
-  --listitem_padding: 10px 39px 10px 25px
-    /*rtl: 10px 25px 10px 39px*/
-  ;
+[dir=ltr] .mediumwithTick {
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
+}
+
+[dir=rtl] .mediumwithTick {
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
+}
+
+[dir=ltr] .largewithTick {
+  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
+}
+
+[dir=rtl] .largewithTick {
+  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
 }
 
 .responsiveHeight {
-  --listitem_min_height: 45px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  font-size: 15px;
+  --listitem_min_height: var(--zd_size45);
+  font-size: var(--zd_font_size15) ;
+  padding-top: var(--zd_size10) ;
+  padding-bottom: var(--zd_size10) ;
+}
+
+.autoHeight {
+  height: auto ;
+}
+
+.tickIconCenter {
+  top: 50% ;
+  transform: translateY(-50%);
+}
+
+.txtAlignBaseLine {
+  align-items: baseline;
+}
+
+.alignSelfTop {
+  align-self: start;
 }

package/lib/ListItem/ListItemWithAvatar.js

@@ -158,7 +158,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: customListItem,
+        customClass: "".concat(needMultiLineText ? _ListItemModule["default"].autoHeight : '', " ").concat(customListItem),
         dataId: "".concat(dataIdString, "_ListItemWithAvatar"),
         dataSelectorId: "".concat(dataSelectorId),
         onClick: this.handleClick,
@@ -168,7 +168,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].leftAvatar
+        className: "".concat(needMultiLineText ? _ListItemModule["default"].alignSelfTop : '', " ").concat(_ListItemModule["default"].leftAvatar)
       }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], {
         name: name,
         size: "small",
@@ -195,7 +195,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         "data-title": isDisabled ? null : title,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
       }, value) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].tickIcon,
+        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")

package/lib/ListItem/ListItemWithIcon.js

@@ -147,7 +147,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: customClass,
+        customClass: "".concat(needMultiLineText && iconClass && !iconName ? _ListItemModule["default"].txtAlignBaseLine : '', " ").concat(customClass),
         dataId: dataIdString,
         dataSelectorId: dataSelectorId,
         isLink: isLink,
@@ -176,7 +176,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         "data-title": isDisabled ? null : title,
         dataId: "".concat(dataIdString, "_Text")
       }, value), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].tickIcon,
+        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -53,6 +53,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -960,7 +962,9 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props8.a11y,
           palette = _this$props8.palette,
           needEffect = _this$props8.needEffect,
-          autoComplete = _this$props8.autoComplete;
+          autoComplete = _this$props8.autoComplete,
+          customProps = _this$props8.customProps;
+      var suggestionsProps = customProps.suggestionsProps;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -1116,7 +1120,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             a11y: {
               role: 'heading'
             }
-          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
             suggestions: suggestions,
             selectedOptions: selectedOptionIds,
             getRef: _this5.suggestionItemRef,
@@ -1128,7 +1132,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             a11y: {
               role: 'option'
             }
-          }));
+          }, suggestionsProps)));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,
           searchString: searchStr,

package/lib/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/lib/MultiSelect/MultiSelect.js

@@ -57,6 +57,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -1068,7 +1070,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           boxSize = _this$props15.boxSize,
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
-          needSelectAll = _this$props15.needSelectAll;
+          needSelectAll = _this$props15.needSelectAll,
+          customProps = _this$props15.customProps;
+      var _customProps$suggesti = customProps.suggestionsProps,
+          suggestionsProps = _customProps$suggesti === void 0 ? {} : _customProps$suggesti;
       var _this$state9 = this.state,
           selectedOptions = _this$state9.selectedOptions,
           searchStr = _this$state9.searchStr,
@@ -1140,7 +1145,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         eleRef: this.suggestionContainerRef
       }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _MultiSelectModule["default"][palette]
-      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
         hoverOption: hoverOption,
@@ -1153,7 +1158,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         a11y: {
           role: 'option'
         }
-      }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+      }, suggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,