@zohodesk/components 1.0.0-temp-187 → 1.0.0-temp-188

package/lib/CheckBox/CheckBox.module.css

@@ -9,42 +9,52 @@
   --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
   --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
 }
+
 .container {
   composes: varClass;
   stroke: var(--checkbox_stroke_color);
 }
+
 .container, .pointer, .readonly {
   cursor: var(--checkbox_cursor);
 }
+
 .pointer {
   --checkbox_cursor: pointer;
 }
+
 .readonly {
   --checkbox_cursor: default;
 }
+
 .cbBox {
   fill: none;
   stroke-width: var(--checkbox_stroke_width);
   stroke-linecap: round;
   stroke: inherit;
 }
+
 .tickPath {
   composes: cbBox;
   stroke-dasharray: 40;
 }
+
 .boxContainer {
   composes: offSelection from '../common/common.module.css';
   /* css:theme-validation:ignore */
   border-radius: 2px;
   background-color: var(--checkbox_bg_color);
 }
+
 .filled {
   --checkbox_bg_color: inherit;
 }
+
 .medium {
   width: 16px;
   height: 16px;
 }
+
 .small {
   width: 13px;
   height: 13px;
@@ -82,18 +92,23 @@
 [dir=rtl] .checkedtickPath {
   animation: tickAnimate var(--zd_transition3) ease forwards;
 }
+
 .linePath {
   transform-origin: center;
 }
+
 [dir=ltr] .linePath {
   animation: lineAnimate var(--zd_transition3) ease forwards;
 }
+
 [dir=rtl] .linePath {
   animation: lineAnimate var(--zd_transition3) ease forwards;
 }
+
 [dir=ltr] .text {
   margin-left: 6px;
 }
+
 [dir=rtl] .text {
   margin-right: 6px;
 }
@@ -102,19 +117,25 @@
 .checkeddanger {
   stroke: var(--checkbox_checked_stroke_color);
 }
+
 .primary:hover
+
 /* .primary:focus  */
-{
+  {
   --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
 }
+
 .checkedprimary {
   --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
 }
+
 .danger:hover
+
 /* .danger:focus */
- {
+  {
   --checkbox_stroke_color: var(--zdt_checkbox_danger_stroke_border);
 }
+
 .checkeddanger {
   --checkbox_checked_stroke_color: var(--zdt_checkbox_danger_stroke_border);
 }
@@ -124,19 +145,25 @@
   /* css:theme-validation:ignore */
   color: var(--checkbox_checked_active_color);
 }
+
 .activeprimaryLabel:hover
+
 /* .activeprimaryLabel:focus  */
-{
+  {
   --label_text_color: var(--zdt_checkbox_label_primary_text);
 }
+
 .checkedprimaryLabel {
   --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
 }
+
 .activedangerLabel:hover
+
 /* .activedangerLabel:focus  */
-{
+  {
   --label_text_color: var(--zdt_checkbox_label_danger_text);
 }
+
 .checkeddangerLabel {
   --checkbox_checked_active_color: var(--zdt_checkbox_danger_stroke_border);
 }
@@ -144,6 +171,7 @@
   0% {
     stroke-dashoffset: 40;
   }
+
   100% {
     stroke-dashoffset: 0;
   }
@@ -153,7 +181,8 @@
   0% {
     transform: scaleX(0);
   }
+
   100% {
     transform: scaleX(1);
   }
-}
+}

package/lib/ListItem/props/defaultProps.js

@@ -36,7 +36,7 @@ var ListItemDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItem',
-  needMultiLineText: false
+  needMultiLineText: true
 };
 exports.ListItemDefaultProps = ListItemDefaultProps;
 var ListItemWithAvatarDefaultProps = {

package/lib/Tag/Tag.module.css

@@ -21,15 +21,21 @@
   /* tag normal icon default variables */
   --tag_icon_bg_color: var(--zdt_tag_icon_bg);
 }[dir=ltr] .varClass {
-  --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
+  --tag_closeicon_border_radius: 0 12px 12px 0
+    /*rtl: 12px 0 0 12px*/
+  ;
   --tag_closeicon_padding: 0 7px 0 6px
-    /*rtl: 0 6px 0 7px*/;
-  --tag_icon_margin: 0 0 0 5px /*rtl: 0 5px 0 0*/;
+    /*rtl: 0 6px 0 7px*/
+  ;
+  --tag_icon_margin: 0 0 0 5px
+    /*rtl: 0 5px 0 0*/
+  ;
 }[dir=rtl] .varClass {
-  --tag_closeicon_border_radius: 12px 0 0 12px;
-  --tag_closeicon_padding: 0 6px 0 7px;
-  --tag_icon_margin: 0 5px 0 0;
+  --tag_closeicon_border_radius: 0 12px 12px 0  ;
+  --tag_closeicon_padding: 0 7px 0 6px  ;
+  --tag_icon_margin: 0 0 0 5px  ;
 }
+
 .container {
   composes: varClass;
   composes: dInflex alignVertical flexrow from '../common/common.module.css';
@@ -51,49 +57,62 @@
   padding: var(--tag_padding);
   cursor: var(--tag_cursor);
 }
+
 .disabled {
   pointer-events: none;
   --tag_text_color: var(--zdt_tag_disabled_text);
 }
+
 .readonly,
 .disabled {
   --tag_cursor: not-allowed;
 }
+
 .pointer {
   --tag_cursor: pointer;
 }
+
 .lgRadius {
   --tag_border_radius: 25px;
 }
+
 .smRadius {
   --tag_border_radius: 3px;
 }
+
 .text {
   composes: dotted flexgrow from '../common/common.module.css';
 }
+
 .smalltext,
 .mediumtext {
   font-size: var(--tag_font_size);
 }
+
 .smalltext, .mediumtext {
   padding: var(--tag_inner_text_padding);
 }
+
 .small {
   --tag_height: 20px;
   --tag_padding: 1px;
   --tag_inner_text_padding: 0 7px;
 }
+
 [dir=ltr] .small .avatar {
   transform: scale(0.8) translateX(-2px);
   margin-right: -8px;
 }
+
 [dir=rtl] .small .avatar {
   transform: scale(0.8) translateX(2px);
   margin-left: -8px;
 }
+
 .smalltext {
   --tag_font_size: 12px;
 }
+
 .activesmallEffect {
   --tag_inner_text_padding: 0 25px 0 7px;
 }
@@ -103,9 +122,11 @@
   --tag_padding: 2px;
   --tag_inner_text_padding: 0 6px;
 }
+
 .mediumtext {
   --tag_font_size: 13px;
 }
+
 .activemediumEffect {
   --tag_inner_text_padding: 0 25px 0 6px;
 }
@@ -113,10 +134,12 @@
 .selected .close {
   display: block;
 }
+
 .activedanger,
 .closedanger:hover {
   --tag_closeicon_bg_color: var(--zdt_tag_danger_bg);
 }
+
 .activeprimary,
 .closeprimary:hover {
   --tag_closeicon_bg_color: var(--zdt_tag_primary_hover_bg);
@@ -125,6 +148,7 @@
 .container:hover .close {
   display: block;
 }
+
 .close {
   /* css:theme-validation:ignore */
   color: var(--tag_closeicon_color);
@@ -138,41 +162,58 @@
   border-radius: var(--tag_closeicon_border_radius);
   background: var(--tag_closeicon_bg_color);
 }
+
 [dir=ltr] .close {
   right: 0;
 }
+
 [dir=rtl] .close {
   left: 0;
 }
+
 [dir=ltr] .lgRadiusClose {
-  --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
+  --tag_closeicon_border_radius: 0 12px 12px 0
+    /*rtl: 12px 0 0 12px*/
+  ;
 }
+
 [dir=rtl] .lgRadiusClose {
-  --tag_closeicon_border_radius: 12px 0 0 12px;
+  --tag_closeicon_border_radius: 0 12px 12px 0  ;
 }
+
 [dir=ltr] .smRadiusClose {
-  --tag_closeicon_border_radius: 0 3px 3px 0 /*rtl: 3px 0 0 3px*/;
+  --tag_closeicon_border_radius: 0 3px 3px 0
+    /*rtl: 3px 0 0 3px*/
+  ;
 }
+
 [dir=rtl] .smRadiusClose {
-  --tag_closeicon_border_radius: 3px 0 0 3px;
+  --tag_closeicon_border_radius: 0 3px 3px 0  ;
 }
+
 .closedanger {
   --tag_closeicon_bg_color: var(--zdt_tag_closedanger_bg);
 }
+
 .closeprimary {
   --tag_closeicon_bg_color: var(--zdt_tag_closeprimary_bg);
 }
+
 .default,
-.danger,.defaultLink {
+.danger,
+.defaultLink {
   --tag_bg_color: var(--zdt_tag_default_danger_bg);
 }
+
 .effect.default:hover {
   --tag_bg_color: var(--zdt_tag_default_hover_bg);
 }
+
 .activedefault,
 .effect.activedefault:hover {
   --tag_bg_color: var(--zdt_tag_active_default_bg);
 }
+
 .activeprimaryClose,
 .activeprimaryClose:hover {
   --tag_closeicon_bg_color: var(--zdt_tag_primary_bg);
@@ -181,37 +222,46 @@
 .effect.danger:hover {
   --tag_bg_color: var(--zdt_tag_danger_hover_bg);
 }
+
 .activedanger,
 .effect.activedanger:hover {
   --tag_bg_color: var(--zdt_tag_danger_hover_bg);
 }
+
 .activedangerClose,
 .activedangerClose:hover {
   --tag_closeicon_bg_color: var(--zdt_tag_danger_bg);
 }
+
 .secondary {
   --tag_bg_color: var(--zdt_tag_secondary_bg);
   --tag_text_color: var(--zdt_tag_secondary_text);
 }
+
 .activesecondary,
 .effect.secondary:hover {
   --tag_bg_color: var(--zdt_tag_secondary_hover_bg);
 }
+
 .activedefaultLink,
-.effect.defaultLink:hover{
---tag_bg_color: var(--zdt_tag_defaultLink_hover_bg);
---tag_text_color: var(--zdt_tag_defaultLink_hover_text);
-};
+.effect.defaultLink:hover {
+  --tag_bg_color: var(--zdt_tag_defaultLink_hover_bg);
+  --tag_text_color: var(--zdt_tag_defaultLink_hover_text);
+}
+
+;
 
 .pureDotted {
   --tag_bg_color: var(--zdt_tag_pure_bg);
   --tag_border_width: 1px;
   --tag_border_color: var(--zdt_tag_pure_border);
 }
+
 .effect.pureDotted:hover {
   --tag_bg_color: var(--zdt_tag_pure_hover_bg);
   --tag_border_color: var(--zdt_tag_pure_hover_border);
 }
+
 .activepureDotted,
 .effect.activepureDotted:hover {
   --tag_bg_color: var(--zdt_tag_pure_bg);
@@ -222,6 +272,7 @@
   --tag_border_width: 1px;
   --tag_border_color: var(--zdt_tag_primary_border);
 }
+
 .effect.primaryDotted:hover,
 .activeprimaryDotted,
 .primary,
@@ -234,28 +285,35 @@
   margin: var(--tag_icon_margin);
   background-color: var(--tag_icon_bg_color);
 }
-.icon > i {
+
+.icon>i {
   display: block;
 }
+
 .dark {
   --tag_bg_color: var(--zdt_tag_dark_bg);
   --tag_text_color: var(--zdt_tag_dark_text);
 }
+
 .effect.dark:hover {
   --tag_bg_color: var(--zdt_tag_dark_hover_bg);
   --tag_text_color: var(--zdt_tag_dark_hover_text);
 }
+
 .darkTagClose {
   --tag_closeicon_bg_color: var(--zdt_tag_dark_close_bg);
   --tag_closeicon_color: var(--zdt_tag_dark_close_text);
 }
+
 .darkTagClose:hover {
   --tag_closeicon_bg_color: var(--zdt_tag_dark_close_hover_bg);
   --tag_closeicon_color: var(--zdt_tag_secondary_text);
 }
+
 .pureDarkDotted {
   composes: dark pureDotted;
 }
+
 .darkPrimaryDotted {
   composes: dark primaryDotted;
 }

package/lib/TextBox/TextBox.module.css

@@ -50,6 +50,7 @@
   /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+
 /* css:lineheight-validation:ignore */
 .container {
   composes: basic;

package/lib/Textarea/Textarea.module.css

@@ -12,6 +12,7 @@
   /* textarea placeholder default variable */
   --textarea_placeholder_text_color: var(--zdt_textarea_placeholder_text);
 }
+
 .basic {
   composes: varClass;
   -webkit-appearance: none;
@@ -23,44 +24,56 @@
   color: var(--textarea_text_color);
   cursor: var(--textarea_cursor);
 }
+
 .basic, .noBorder {
   border-width: var(--textarea_border_width);
 }
+
 .basic::placeholder {
   /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
+
 .basic::-webkit-placeholder {
   /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
+
 .basic::-moz-placeholder {
   /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
+
 .basic::-ms-placeholder {
   /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
+
 .basic:disabled {
   --textarea_cursor: not-allowed;
   --textarea_text_color: var(--zdt_textarea_default_text);
 }
+
 .readonly {
   --textarea_cursor: not-allowed;
 }
+
 .resizeX {
   composes: resizeX from '../common/common.module.css';
 }
+
 .resizeY {
   composes: resizeY from '../common/common.module.css';
 }
+
 .noresize {
   composes: resizenone from '../common/common.module.css';
 }
+
 .resizeboth {
   composes: resizeboth from '../common/common.module.css';
 }
+
 /* css:lineheight-validation:ignore */
 .container {
   composes: basic;
@@ -82,65 +95,81 @@
   border-color: var(--textarea_border_color);
   padding: var(--textarea_padding);
 }
+
 .needBorder {
   --textarea_border_width: 0 0 1px 0;
 }
+
 .borderColor_transparent {
   --textarea_border_color: var(--zdt_textarea_transparent_border);
 }
+
 .borderColor_default {
   --textarea_border_color: var(--zdt_textarea_default_border);
 }
+
 .effect:hover {
   --textarea_border_color: var(--zdt_textarea_hover_border);
 }
+
 .effect:focus {
   --textarea_border_color: var(--zdt_textarea_focus_border);
 }
+
 .xsmall,
 .xmedium {
   vertical-align: middle;
 }
+
 .xsmall {
   --textarea_font_size: 14px;
   --textarea_padding: 4px 0 2px;
   --textarea_height: 28px;
   --textarea_line_height: 1.3572;
 }
+
 .xmedium {
   --textarea_font_size: 13px;
   --textarea_padding: 4px 0 2px;
   --textarea_height: 25px;
   --textarea_line_height: 1.3077;
 }
+
 .small {
   --textarea_height: 30px;
   --textarea_padding: 2px 0;
 }
+
 .smallanimated:focus,
 .xsmallanimated:focus,
 .xmediumanimated:focus {
   --textarea_height: 70px;
 }
+
 .medium {
   --textarea_height: 88px;
   --textarea_padding: 2px;
 }
+
 .large {
   --textarea_height: 45px;
   --textarea_padding: 2px;
 }
+
 .largeanimated:focus {
   --textarea_height: 220px;
 }
+
 .xlarge {
   --textarea_height: 184px;
 }
+
 .default {
   font-family: var(--zd_regular);
   --textarea_text_color: var(--zdt_textarea_black_text);
 }
+
 .primary {
   composes: semibold from '../common/common.module.css';
   --textarea_text_color: var(--zdt_textarea_black_text);
-}
+}

package/lib/v1/Animation/Animation.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
 var _reactTransitionGroup = require("react-transition-group");
-var _transitionModule = _interopRequireDefault(require("../../common/transition.module.css"));
+var _utils = require("./utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function Animation(props) {
   var name = props.name,
@@ -23,91 +23,9 @@ function Animation(props) {
     onExit = _props$onExit === void 0 ? function () {} : _props$onExit,
     _props$delayClassName = props.delayClassName,
     delayClassName = _props$delayClassName === void 0 ? null : _props$delayClassName;
-  var animation = {
-    zoomIn: {
-      enter: _transitionModule["default"].zoomInEnter,
-      enterActive: _transitionModule["default"].zoomInEnterActive,
-      enterDone: _transitionModule["default"].zoomInEnterActive,
-      exit: _transitionModule["default"].zoomInLeave,
-      exitActive: _transitionModule["default"].zoomInLeaveActive,
-      exitDone: _transitionModule["default"].zoomInLeaveActive,
-      appear: _transitionModule["default"].zoomInEnter,
-      appearActive: _transitionModule["default"].zoomInEnterActive
-    },
-    scaleIn: {
-      enter: _transitionModule["default"].scaleInEnter,
-      enterActive: _transitionModule["default"].scaleInEnterActive,
-      enterDone: _transitionModule["default"].scaleInEnterActive,
-      exit: _transitionModule["default"].scaleInLeave,
-      exitActive: _transitionModule["default"].scaleInLeaveActive,
-      exitDone: _transitionModule["default"].scaleInLeaveActive,
-      appear: _transitionModule["default"].scaleInEnter,
-      appearActive: _transitionModule["default"].scaleInEnterActive
-    },
-    fadeIn: {
-      enter: _transitionModule["default"].fadeInEnter,
-      enterActive: _transitionModule["default"].fadeInEnterActive,
-      enterDone: _transitionModule["default"].fadeInEnterActive,
-      exit: _transitionModule["default"].fadeInLeave,
-      exitActive: _transitionModule["default"].fadeInLeaveActive,
-      exitDone: _transitionModule["default"].fadeInLeaveActive,
-      appear: _transitionModule["default"].fadeInEnter,
-      appearActive: _transitionModule["default"].fadeInEnterActive
-    },
-    slideLeft: {
-      enter: _transitionModule["default"].slideLeftEnter,
-      enterActive: _transitionModule["default"].slideLeftEnterActive,
-      enterDone: _transitionModule["default"].slideLeftEnterActive,
-      exit: _transitionModule["default"].slideLeftLeave,
-      exitActive: _transitionModule["default"].slideLeftLeaveActive,
-      exitDone: _transitionModule["default"].slideLeftLeaveActive,
-      appear: _transitionModule["default"].slideLeftEnter,
-      appearActive: _transitionModule["default"].slideLeftEnterActive
-    },
-    slideDown: {
-      enter: _transitionModule["default"].slideDownEnter,
-      enterActive: _transitionModule["default"].slideDownEnterActive,
-      enterDone: _transitionModule["default"].slideDownEnterActive,
-      exit: _transitionModule["default"].slideDownLeave,
-      exitActive: _transitionModule["default"].slideDownLeaveActive,
-      exitDone: _transitionModule["default"].slideDownLeaveActive,
-      appear: _transitionModule["default"].slideDownEnter,
-      appearActive: _transitionModule["default"].slideDownEnterActive
-    },
-    skewIn: {
-      enter: _transitionModule["default"].skewInEnter,
-      enterActive: _transitionModule["default"].skewInEnterActive,
-      enterDone: _transitionModule["default"].skewInEnterActive,
-      exit: _transitionModule["default"].skewInLeave,
-      exitActive: _transitionModule["default"].skewInLeaveActive,
-      exitDone: _transitionModule["default"].skewInLeaveActive,
-      appear: _transitionModule["default"].skewInEnter,
-      appearActive: _transitionModule["default"].skewInEnterActive
-    },
-    none: {
-      enter: _transitionModule["default"].noneEnter,
-      enterActive: _transitionModule["default"].noneEnterActive,
-      enterDone: _transitionModule["default"].noneEnterActive,
-      exit: _transitionModule["default"].noneLeave,
-      exitActive: _transitionModule["default"].noneLeaveActive,
-      exitDone: _transitionModule["default"].noneLeaveActive,
-      appear: _transitionModule["default"].noneEnter,
-      appearActive: _transitionModule["default"].noneEnterActive
-    },
-    "default": {
-      enter: _transitionModule["default"].defaultEnter,
-      enterActive: _transitionModule["default"].defaultEnterActive,
-      enterDone: _transitionModule["default"].defaultEnterActive,
-      exit: _transitionModule["default"].defaultLeave,
-      exitActive: _transitionModule["default"].defaultLeaveActive,
-      exitDone: _transitionModule["default"].defaultLeaveActive,
-      appear: _transitionModule["default"].defaultEnter,
-      appearActive: _transitionModule["default"].defaultEnterActive
-    }
-  };
-  var newClassNames = delayClassName ? Object.assign({}, animation[name], {
-    exit: "".concat(delayClassName, " ").concat(animation[name].exit)
-  }) : animation[name];
+  var newClassNames = delayClassName ? Object.assign({}, _utils.animationStyle[name], {
+    exit: "".concat(delayClassName, " ").concat(_utils.animationStyle[name].exit)
+  }) : animaanimationStyletion[name];
   return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
     classNames: newClassNames && newClassNames,
     "in": isActive,