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

package/es/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/es/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/es/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/es/ListItem/ListContainer.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, { useCallback } from 'react';
 import { Container } from '../Layout';
@@ -71,7 +73,7 @@ const ListContainer = props => {
     options.tabindex = '0';
   }
 
-  return /*#__PURE__*/React.createElement(Container, {
+  return /*#__PURE__*/React.createElement(Container, _extends({
     role: role,
     "data-a11y-inset-focus": insetFocus,
     "aria-selected": ariaSelected,
@@ -87,11 +89,8 @@ const ListContainer = props => {
     onMouseOver: onMouseOver,
     eleRef: eleRef,
     tagName: isLink ? 'a' : 'li',
-    "data-title": isDisabled ? disableTitle : title,
-    ...options,
-    ...customProps,
-    ...a11yAttributes
-  }, children);
+    "data-title": isDisabled ? disableTitle : title
+  }, options, customProps, a11yAttributes), children);
 };
 
 ListContainer.defaultProps = ListContainerDefaultProps;

package/es/ListItem/ListItem.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 { Box } from '../Layout';
@@ -90,7 +92,7 @@ export default class ListItem extends React.Component {
     } = listA11y;
     let tickIconPalette = style[`${palette}Tick`] ? style[`${palette}Tick`] : '';
     let dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
-    return /*#__PURE__*/React.createElement(ListContainer, {
+    return /*#__PURE__*/React.createElement(ListContainer, _extends({
       a11y: listA11y,
       size: size,
       palette: palette,
@@ -100,7 +102,7 @@ export default class ListItem extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: customListItem,
+      customClass: `${style.txtAlignBaseLine} ${customListItem}`,
       dataId: dataIdString,
       dataSelectorId: `${dataSelectorId}`,
       isLink: isLink,
@@ -111,9 +113,8 @@ export default class ListItem extends React.Component {
       onClick: this.handleClick,
       onMouseEnter: this.handleMouseEnter,
       eleRef: this.getRef,
-      customProps: ListItemProps,
-      ...ContainerProps
-    }, value ? /*#__PURE__*/React.createElement(Box, {
+      customProps: ListItemProps
+    }, ContainerProps), value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
       className: needMultiLineText ? style.multiLineValue : style.value
@@ -122,7 +123,7 @@ export default class ListItem extends React.Component {
       adjust: true,
       className: style.children
     }, children) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon}`,
+      className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/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/es/ListItem/ListItemWithAvatar.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 { Box } from '../Layout';
@@ -95,7 +97,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
     } = listA11y;
     let isDarkPalette = palette === 'dark';
     let dataIdString = value ? value : dataId;
-    return /*#__PURE__*/React.createElement(ListContainer, {
+    return /*#__PURE__*/React.createElement(ListContainer, _extends({
       a11y: listA11y,
       size: size,
       palette: palette,
@@ -105,7 +107,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: customListItem,
+      customClass: `${needMultiLineText ? style.autoHeight : ''} ${customListItem}`,
       dataId: `${dataIdString}_ListItemWithAvatar`,
       dataSelectorId: `${dataSelectorId}`,
       onClick: this.handleClick,
@@ -113,10 +115,9 @@ export default class ListItemWithAvatar extends React.PureComponent {
       eleRef: this.getRef,
       disableTitle: disableTitle,
       title: null,
-      customProps: ListItemProps,
-      ...ContainerProps
-    }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
-      className: style.leftAvatar
+      customProps: ListItemProps
+    }, ContainerProps), name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
+      className: `${needMultiLineText ? style.alignSelfTop : ''} ${style.leftAvatar}`
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,
       size: "small",
@@ -143,7 +144,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       "data-title": isDisabled ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
     }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: style.tickIcon,
+      className: `${style.tickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItemWithCheckBox.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 ListContainer from './ListContainer';
 import { ListItemWithCheckBoxDefaultProps } from './props/defaultProps';
@@ -74,7 +76,7 @@ export default class ListItemWithCheckBox extends React.Component {
       customCheckBox = '',
       customLabel = ''
     } = customClass;
-    return /*#__PURE__*/React.createElement(ListContainer, {
+    return /*#__PURE__*/React.createElement(ListContainer, _extends({
       a11y: listA11y,
       size: size,
       palette: palette,
@@ -90,9 +92,8 @@ export default class ListItemWithCheckBox extends React.Component {
       eleRef: this.getRef,
       disableTitle: disableTitle,
       title: null,
-      customProps: ListItemProps,
-      ...ContainerProps
-    }, /*#__PURE__*/React.createElement(Box, {
+      customProps: ListItemProps
+    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
       className: style.iconBox
     }, /*#__PURE__*/React.createElement(CheckBox, {
       checked: checked,

package/es/ListItem/ListItemWithIcon.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 { Box } from '../Layout';
@@ -85,7 +87,7 @@ export default class ListItemWithIcon extends React.Component {
       ariaHidden
     } = listA11y;
     let dataIdString = dataId ? `${dataId.replace("'", '_')}` : value.toLowerCase().replace("'", '_');
-    return /*#__PURE__*/React.createElement(ListContainer, {
+    return /*#__PURE__*/React.createElement(ListContainer, _extends({
       a11y: listA11y,
       size: size,
       palette: palette,
@@ -95,7 +97,7 @@ export default class ListItemWithIcon extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: customClass,
+      customClass: `${needMultiLineText && iconClass && !iconName ? style.txtAlignBaseLine : ''} ${customClass}`,
       dataId: dataIdString,
       dataSelectorId: dataSelectorId,
       isLink: isLink,
@@ -106,9 +108,8 @@ export default class ListItemWithIcon extends React.Component {
       eleRef: this.getRef,
       disableTitle: disableTitle,
       title: null,
-      customProps: ListItemProps,
-      ...ContainerProps
-    }, iconName && /*#__PURE__*/React.createElement(Box, {
+      customProps: ListItemProps
+    }, ContainerProps), iconName && /*#__PURE__*/React.createElement(Box, {
       "aria-hidden": true,
       className: style.iconBox,
       dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`
@@ -125,7 +126,7 @@ export default class ListItemWithIcon extends React.Component {
       "data-title": isDisabled ? null : title,
       dataId: `${dataIdString}_Text`
     }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: style.tickIcon,
+      className: `${style.tickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItemWithRadio.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 Radio from '../Radio/Radio';
 import { Box } from '../Layout';
@@ -75,7 +77,7 @@ export default class ListItemWithRadio extends React.Component {
       customRadio = '',
       customRadioWrap = ''
     } = customClass;
-    return /*#__PURE__*/React.createElement(ListContainer, {
+    return /*#__PURE__*/React.createElement(ListContainer, _extends({
       a11y: listA11y,
       size: size,
       palette: palette,
@@ -91,9 +93,8 @@ export default class ListItemWithRadio extends React.Component {
       eleRef: this.getRef,
       disableTitle: disableTitle,
       title: null,
-      customProps: ListItemProps,
-      ...ContainerProps
-    }, /*#__PURE__*/React.createElement(Box, {
+      customProps: ListItemProps
+    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
       className: style.iconBox
     }, /*#__PURE__*/React.createElement(Radio, {
       checked: checked,