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

package/lib/Avatar/Avatar.module.css

@@ -18,31 +18,19 @@
   composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
   vertical-align: middle;
   font-size: var(--avatar_font_size);
-  /* css:theme-validation:ignore */
   color: var(--avatar_text_color);
   border-width: var(--avatar_border_width);
   border-style: var(--avatar_border_style);
 }
 
 .border {
-  /* css:theme-validation:ignore */
   border-color: var(--avatar_border_color);
 }
 
-.borderOnHover:hover,
-.borderOnActive {
-  /* css:theme-validation:ignore */
-}
-
 .borderOnHover:hover, .borderOnActive {
   border-color: var(--avatar_border_hoverColor);
 }
 
-.avatar,
-.primary {
-  /* css:theme-validation:ignore */
-}
-
 .avatar, .primary {
   background-color: var(--avatar_bg_color);
 }

package/lib/AvatarTeam/AvatarTeam.module.css

@@ -25,13 +25,10 @@
   composes: varClass;
   composes: posab from '../common/common.module.css';
   top: var(--avatarteam_top_top);
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
   width: var(--avatarteam_width);
   height: var(--avatarteam_height);
   outline-width: var(--avatarteam_outline_width);
   outline-style: var(--avatarteam_outline_style);
-  /* css:theme-validation:ignore */
   outline-color: var(--avatarteam_outline_color);
   border-width: var(--avatarteam_border_width);
   border-style: var(--avatarteam_border_style);
@@ -76,7 +73,6 @@
   top: var(--avatarteam_bottom_top);
   outline-width: var(--avatarteam_outline_width);
   outline-style: var(--avatarteam_outline_style);
-  /* css:theme-validation:ignore */
   outline-color: var( --avatarteam_outline_color);
 }
 .team:after, .team:before {

package/lib/Button/css/Button.module.css

@@ -48,13 +48,10 @@
   composes: dotted from '../../common/common.module.css';
   position: relative;
   font-size: var(--button_font_size);
-  /* css:theme-validation:ignore */
   color: var(--button_text_color);
   font-family: var(--button_font_family);
   text-transform: var(--button_text_transform);
-  /* css:theme-validation:ignore */
   min-width: var(--button_min_width);
-  /* css:theme-validation:ignore */
   height: var(--button_height);
   background-color: var(--button_bg_color);
   border-radius: var(--button_border_radius);
@@ -298,7 +295,6 @@
 .loadingelement:after {
   content: '';
   position: absolute;
-  /* css:theme-validation:ignore */
 }
 
 .loadingelement:before, .loadingelement:after {
@@ -472,7 +468,6 @@
   transform-origin: center;
   border-width: 2px 2px 0 0;
   border-style: solid;
-  /* css:theme-validation:ignore */
   border-color: var(--button_success_border_color);
   animation: tick var(--zd_no_transition3) ease 0s forwards;
 }
@@ -529,6 +524,5 @@
 }
 
 .loader{
-  /* css:theme-validation:ignore */
   color:var(--dot_mirror)
 }

package/lib/Buttongroup/Buttongroup.module.css

@@ -11,8 +11,6 @@
 .buttonGroup {
   composes: varClass;
   composes: cboth from '../common/common.module.css';
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
   background-color: var(--buttongroup_bg_color);
   box-shadow: var(--buttongroup_box_shadow);
   padding: var(--buttongroup_padding);

package/lib/CheckBox/CheckBox.js

@@ -57,6 +57,7 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
     _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
+    _this.handleGetContainerRef = _this.handleGetContainerRef.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -68,33 +69,41 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
           checked = _this$props.checked;
       onChange && onChange(!checked, e);
     }
+  }, {
+    key: "handleGetContainerRef",
+    value: function handleGetContainerRef(ele) {
+      var _this$props2 = this.props,
+          getContainerRef = _this$props2.getContainerRef,
+          id = _this$props2.id;
+      getContainerRef && getContainerRef(ele, id);
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-          id = _this$props2.id,
-          checked = _this$props2.checked,
-          disabled = _this$props2.disabled,
-          isReadOnly = _this$props2.isReadOnly,
-          disabledTitle = _this$props2.disabledTitle,
-          title = _this$props2.title,
-          palette = _this$props2.palette,
-          text = _this$props2.text,
-          size = _this$props2.size,
-          labelPalette = _this$props2.labelPalette,
-          labelSize = _this$props2.labelSize,
-          isFilled = _this$props2.isFilled,
-          isClipped = _this$props2.isClipped,
-          getRef = _this$props2.getRef,
-          variant = _this$props2.variant,
-          active = _this$props2.active,
-          dataId = _this$props2.dataId,
-          name = _this$props2.name,
-          activeStyle = _this$props2.activeStyle,
-          a11y = _this$props2.a11y,
-          customClass = _this$props2.customClass,
-          customProps = _this$props2.customProps,
-          dataSelectorId = _this$props2.dataSelectorId;
+      var _this$props3 = this.props,
+          id = _this$props3.id,
+          checked = _this$props3.checked,
+          disabled = _this$props3.disabled,
+          isReadOnly = _this$props3.isReadOnly,
+          disabledTitle = _this$props3.disabledTitle,
+          title = _this$props3.title,
+          palette = _this$props3.palette,
+          text = _this$props3.text,
+          size = _this$props3.size,
+          labelPalette = _this$props3.labelPalette,
+          labelSize = _this$props3.labelSize,
+          isFilled = _this$props3.isFilled,
+          isClipped = _this$props3.isClipped,
+          getRef = _this$props3.getRef,
+          variant = _this$props3.variant,
+          active = _this$props3.active,
+          dataId = _this$props3.dataId,
+          name = _this$props3.name,
+          activeStyle = _this$props3.activeStyle,
+          a11y = _this$props3.a11y,
+          customClass = _this$props3.customClass,
+          customProps = _this$props3.customProps,
+          dataSelectorId = _this$props3.dataSelectorId;
       var _customProps$CheckBox = customProps.CheckBoxProps,
           CheckBoxProps = _customProps$CheckBox === void 0 ? {} : _customProps$CheckBox,
           _customProps$LabelPro = customProps.LabelProps,
@@ -127,6 +136,7 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         onClick: isReadOnly || disabled ? null : this.onChange,
         tabIndex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
         "aria-checked": ariaChecked,
+        eleRef: this.handleGetContainerRef,
         role: role,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,

package/lib/CheckBox/CheckBox.module.css

@@ -34,7 +34,6 @@
 }
 .boxContainer {
   composes: offSelection from '../common/common.module.css';
-  /* css:theme-validation:ignore */
   border-radius: 2px;
   background-color: var(--checkbox_bg_color);
 }
@@ -121,7 +120,6 @@
 
 .checkedprimaryLabel,
 .checkeddangerLabel {
-  /* css:theme-validation:ignore */
   color: var(--checkbox_checked_active_color);
 }
 .activeprimaryLabel:hover

package/lib/CheckBox/props/propTypes.js

@@ -18,6 +18,7 @@ var propTypes = {
   disabled: _propTypes["default"].bool,
   disabledTitle: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
+  getContainerRef: _propTypes["default"].func,
   id: _propTypes["default"].string,
   isFilled: _propTypes["default"].bool,
   isClipped: _propTypes["default"].bool,

package/lib/DateTime/DateTime.module.css

@@ -36,7 +36,6 @@
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
   line-height: 1.3846;
-  /* css:theme-validation:ignore */
   text-align: center;
   padding: var(--zd_size4) 0 ;
   border-radius: 50%;

package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -18,11 +18,6 @@
     box-shadow: var(--dropbox_box_shadow);
 }
 
-.defaultPalette,
-.darkPalette {
-  /* css:theme-validation:ignore */
-}
-
 .defaultPalette, .darkPalette {
     background-color: var(--dropbox_bg_color);
 }
@@ -212,7 +207,6 @@
     height: var(--zd_size10) ;
     width: var(--zd_size10) ;
     box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
-  /* css:theme-validation:ignore */
     background-color: var(--dropbox_bg_color);
     -webkit-transform: rotateZ(-45deg);
     transform: rotateZ(-45deg);
@@ -422,7 +416,6 @@
 .closeBar {
   /*  Variable:Ignore  */
     height: 6px;
-  /* css:theme-validation:ignore */
     width: 20% ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);

package/lib/DropBox/css/DropBox.module.css

@@ -49,7 +49,6 @@
 
 .freeze {
   composes: varClass;
-  /* css:theme-validation:ignore */
   background: var(--dropbox_mob_bg_color);
 }
 

package/lib/DropDown/DropDownHeading.module.css

@@ -18,9 +18,7 @@
   font-size: var(--zd_font_size11) ;
   letter-spacing: 0.6px;
   text-transform: var(--dropdownheading_text_transform);
-  /* css:theme-validation:ignore */
   color: var(--dropdownheading_text_color);
-  /* css:theme-validation:ignore */
   padding: var(--dropdownheading_padding);
   background-color: var(--dropdownheading_bg_color);
 }
@@ -35,10 +33,6 @@
 .light {
   composes: default;
 }
-.light::after,
-.dark::after {
-  /* css:theme-validation:ignore */
-}
 .light::after, .dark::after {
   background-color: var(--dropdownheading_underline_bg_color);
 }

package/lib/DropDown/DropDownItem.module.css

@@ -20,8 +20,6 @@
   position: relative;
   color: var(--zdt_dropdown_default_text);
   font-size: var(--zd_font_size13) ;
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
   padding: var(--dropdownitem-padding);
   border-style: solid;
   border-color: var(--dropdownitem-border-color);
@@ -76,7 +74,6 @@
   opacity: 0;
   visibility: hidden;
   width: var(--dropdownitem-user-width);
-  /* css:theme-validation:ignore */
   border-width: var(--dropdownitem-user-border-width);
   border-style: var(--dropdownitem-user-border-style);
   border-color: var(--dropdownitem-user-border-color);

package/lib/Label/Label.module.css

@@ -12,7 +12,6 @@
   vertical-align: middle;
   line-height: var(--label_line_height);
   font-size: var(--label_font_size);
-  /* css:theme-validation:ignore */
   color: var(--label_text_color);
   font-family: var(--label_font_family);
   cursor: var(--label_cursor);

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

@@ -17,16 +17,15 @@
 }[dir=ltr] .varClass {
   --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
 }[dir=rtl] .varClass {
-  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
+  --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
 }
+
 .list {
   composes: varClass;
   position: relative;
   list-style: none;
-  /* css:theme-validation:ignore */
   color: var(--listitem_text_color);
   font-size: var(--zd_font_size13) ;
-  /* css:theme-validation:ignore */
   height: var(--listitem_height);
   min-height: var(--listitem_min_height);
   text-decoration: none;
@@ -36,142 +35,163 @@
   border-color: var(--listitem_border_color);
   cursor: pointer;
 }
-.list,
-.default,
-.secondary {
-  /* css:theme-validation:ignore */
-}
+
 .list, .default, .secondary {
   background-color: var(--listitem_bg_color);
 }
+
 [dir=ltr] .withBorder {
-  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
+  --listitem_border_width: 0 0 0 1px
+    /*rtl: 0 1px 0 0*/
+  ;
 }
+
 [dir=rtl] .withBorder {
-  --listitem_border_width: 0 1px 0 0;
+  --listitem_border_width: 0 0 0 1px  ;
 }
+
 .active {
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
+
 [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_size5) var(--zd_size7) var(--zd_size3);
+  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
 }
+
 .medium {
   --listitem_padding: var(--zd_size7) var(--zd_size20);
   --listitem_min_height: var(--zd_size35);
 }
+
 .large {
   --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_size25) var(--zd_size10) var(--zd_size3);
+  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
 }
+
 .value,
 .children {
   composes: dotted from '../common/common.module.css';
 }
-.value, .multiLineValue {
+
+.value {
   line-height: 1.5385;
 }
-.multiLineValue{
+
+.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: 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 ;
 }
+
 .leftAvatar {
   margin: var(--listitem_avatar_margin);
 }
 
-.defaultHover,
-.primaryHover,
-.secondaryHover,
-.darkHover {
-  /* css:theme-validation:ignore */
-}
-
 .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_width: 0 0 0 1px
+    /*rtl: 0 1px 0 0*/
+  ;
 }
+
 [dir=rtl] .activewithBorder {
-  --listitem_border_width: 0 1px 0 0;
+  --listitem_border_width: 0 0 0 1px  ;
 }
 
 .defaultHover,
 .defaultEffect:hover
+
 /* .defaultEffect:focus  */
-{
+  {
   --listitem_bg_color: var(--zdt_listitem_highlight_bg);
 }
+
 .primaryHover,
 .primaryEffect:hover
+
 /* .primaryEffect:focus */
- {
+  {
   --listitem_bg_color: var(--zdt_listitem_primary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
 }
+
 .secondaryHover,
 .secondaryEffect:hover
+
 /* .secondaryEffect:focus  */
-{
+  {
   --listitem_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);
 }
+
 .darkHover,
 .darkEffect:hover
+
 /* .darkEffect:focus */
- {
+  {
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
-.activedefault,
-.activeprimary,
-.activesecondary,
-.activedark {
-  /* css:theme-validation:ignore */
-}
+
 .activedefault, .activeprimary, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
+
 .activedefault,
 .activedefault:hover,
 .activeprimary,
 .activeprimary:hover {
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
 }
+
 .activesecondary {
   --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);
 }
+
 .dark {
   --listitem_bg_color: var(--zdt_listitem_dark_bg);
   --listitem_text_color: var(--zdt_listitem_dark_text);
 }
+
 .activedark {
   --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
 }
@@ -180,7 +200,6 @@
 .defaultTick,
 .darkTick {
   position: absolute;
-  /* css:theme-validation:ignore */
   color: var(--listitem_tickicon_color);
 }
 
@@ -191,36 +210,63 @@
 [dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
   left: var(--zd_size20) ;
 }
+
 .defaultTick {
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }
+
 .darkTick {
   --listitem_tickicon_color: var(--zdt_listitem_dark_tickicon);
 }
-.defaultTick > i {
+
+.defaultTick>i {
   display: block;
 }
+
 [dir=ltr] .smallwithTick {
   --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
 }
+
 [dir=rtl] .smallwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
 }
+
 [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_size20) var(--zd_size7) var(--zd_size39);
+  --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_size25) var(--zd_size10) var(--zd_size39);
+  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
 }
+
 .responsiveHeight {
   --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")