@zohodesk/components 1.1.0 → 1.2.0-temp-195

package/es/Textarea/Textarea.module.css

@@ -1,139 +1,140 @@
-.varClass {
-  /* textarea default variables */
-  --textarea_border_width: 0;
-  --textarea_border_color: none;
-  --textarea_cursor: auto;
-  --textarea_text_color: var(--zdt_textarea_default_text);
-  --textarea_font_size: var(--zd_font_size14);
-  --textarea_line_height: 22px;
-  --textarea_padding: var(--zd_size2) 0;
-  --textarea_height: var(--zd_size30);
-
-  /* textarea placeholder default variable */
-  --textarea_placeholder_text_color: var(--zdt_textarea_placeholder_text);
-}
-.basic {
-  composes: varClass;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: 0;
-  letter-spacing: 0.1px;
-  color: var(--textarea_text_color);
-  cursor: var(--textarea_cursor);
-}
-.basic, .noBorder {
-  border-width: var(--textarea_border_width);
-}
-.basic::placeholder {
-  color: var(--textarea_placeholder_text_color);
-}
-.basic::-webkit-placeholder {
-  color: var(--textarea_placeholder_text_color);
-}
-.basic::-moz-placeholder {
-  color: var(--textarea_placeholder_text_color);
-}
-.basic::-ms-placeholder {
-  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';
-}
-.container {
-  composes: basic;
-  transition: border var(--zd_transition2) linear 0s,
-    height var(--zd_transition2) linear 0s;
-  -moz-transition: border var(--zd_transition2) linear 0s,
-    height var(--zd_transition2) linear 0s;
-  width: 100% ;
-  max-width: 100% ;
-  min-width: var(--zd_size100) ;
-  font-size: var(--textarea_font_size);
-  line-height: var(--textarea_line_height);
-  height: var(--textarea_height);
-  -webkit-transition: border var(--zd_transition2) linear 0s,
-    height var(--zd_transition2) linear 0s;
-  border-style: solid;
-  background-color: var(--zdt_textarea_default_bg);
-  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: var(--zd_font_size14);
-  --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
-  --textarea_height: var(--zd_size28);
-  --textarea_line_height: 19px;
-}
-.xmedium {
-  --textarea_font_size: var(--zd_font_size13);
-  --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
-  --textarea_height: var(--zd_size25);
-  --textarea_line_height: 17px;
-}
-.small {
-  --textarea_height: var(--zd_size30);
-  --textarea_padding: var(--zd_size2) 0;
-}
-.smallanimated:focus,
-.xsmallanimated:focus,
-.xmediumanimated:focus {
-  --textarea_height: var(--zd_size70);
-}
-.medium {
-  --textarea_height: var(--zd_size88);
-  --textarea_padding: var(--zd_size2);
-}
-.large {
-  --textarea_height: var(--zd_size45);
-  --textarea_padding: var(--zd_size2);
-}
-.largeanimated:focus {
-  --textarea_height: var(--zd_size220);
-}
-.xlarge {
-  --textarea_height: var(--zd_size184);
-}
-.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);
-}
+.varClass {
+  /* textarea default variables */
+  --textarea_border_width: 0;
+  --textarea_border_color: none;
+  --textarea_cursor: text;
+  --textarea_text_color: var(--zdt_textarea_default_text);
+  --textarea_font_size: var(--zd_font_size14);
+  --textarea_line_height: 1.5712;
+  --textarea_padding: var(--zd_size2) 0;
+  --textarea_height: var(--zd_size30);
+
+  /* textarea placeholder default variable */
+  --textarea_placeholder_text_color: var(--zdt_textarea_placeholder_text);
+}
+.basic {
+  composes: varClass;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+  letter-spacing: 0.1px;
+  color: var(--textarea_text_color);
+  cursor: var(--textarea_cursor);
+}
+.basic, .noBorder {
+  border-width: var(--textarea_border_width);
+}
+.basic::placeholder {
+  color: var(--textarea_placeholder_text_color);
+}
+.basic::-webkit-placeholder {
+  color: var(--textarea_placeholder_text_color);
+}
+.basic::-moz-placeholder {
+  color: var(--textarea_placeholder_text_color);
+}
+.basic::-ms-placeholder {
+  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;
+  transition: border var(--zd_transition2) linear 0s,
+    height var(--zd_transition2) linear 0s;
+  -moz-transition: border var(--zd_transition2) linear 0s,
+    height var(--zd_transition2) linear 0s;
+  width: 100% ;
+  max-width: 100% ;
+  min-width: var(--zd_size100) ;
+  font-size: var(--textarea_font_size);
+  line-height: var(--textarea_line_height);
+  height: var(--textarea_height);
+  -webkit-transition: border var(--zd_transition2) linear 0s,
+    height var(--zd_transition2) linear 0s;
+  border-style: solid;
+  background-color: var(--zdt_textarea_default_bg);
+  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: var(--zd_font_size14);
+  --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
+  --textarea_height: var(--zd_size28);
+  --textarea_line_height: 1.3572;
+}
+.xmedium {
+  --textarea_font_size: var(--zd_font_size13);
+  --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
+  --textarea_height: var(--zd_size25);
+  --textarea_line_height: 1.3077;
+}
+.small {
+  --textarea_height: var(--zd_size30);
+  --textarea_padding: var(--zd_size2) 0;
+}
+.smallanimated:focus,
+.xsmallanimated:focus,
+.xmediumanimated:focus {
+  --textarea_height: var(--zd_size70);
+}
+.medium {
+  --textarea_height: var(--zd_size88);
+  --textarea_padding: var(--zd_size2);
+}
+.large {
+  --textarea_height: var(--zd_size45);
+  --textarea_padding: var(--zd_size2);
+}
+.largeanimated:focus {
+  --textarea_height: var(--zd_size220);
+}
+.xlarge {
+  --textarea_height: var(--zd_size184);
+}
+.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/es/Textarea/props/propTypes.js

@@ -3,7 +3,6 @@ export const propTypes = {
   animated: PropTypes.bool,
   autoFocus: PropTypes.bool,
   borderColor: PropTypes.oneOf(['transparent', 'default']),
-  className: PropTypes.string,
   dataId: PropTypes.string,
   dataSelectorId: PropTypes.string,
   getRef: PropTypes.func,

package/es/Tooltip/Tooltip.js

@@ -154,8 +154,10 @@ export default class Tooltip extends React.Component {
       if (title !== '' && title) {
         titleDiv.setAttribute('data-title', title);
         titleDiv.removeAttribute('title');
+        let isInputElementType = element.type === 'text';
+        let elementText = isInputElementType ? element.value : element.innerText;
 
-        if (element.nodeName !== 'I' && element.innerText && element.innerText.trim() !== '') {
+        if (element.nodeName !== 'I' && elementText && elementText.trim() !== '') {
           let isContentDotted = '';
 
           if (element.scrollWidth !== 0) {
@@ -173,7 +175,7 @@ export default class Tooltip extends React.Component {
             isContentDotted = offWidth < scrollWidth;
           }
 
-          let originText = element.innerText.replace(/\s/g, '').toLowerCase();
+          let originText = elementText.replace(/\s/g, '').toLowerCase();
           let tooltipText = title.replace(/\s/g, '').toLowerCase();
           let isDefaultTooltip = element.hasAttribute('data-istitle') || element.hasAttribute('istitle') ? element.getAttribute('data-istitle') || element.getAttribute('istitle') : 'false';
           isDefaultTooltip = isDefaultTooltip === 'true';

package/es/Tooltip/Tooltip.module.css

@@ -1,141 +1,141 @@
-.tooltiptext {
-  position: fixed;
-  z-index: 9999999;
-  /*Hook for editor alert*/
-  pointer-events: none;
-  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
-  border-radius: var(--zd_size4);
-}[dir=ltr] .tooltiptext {
-  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
-}[dir=rtl] .tooltiptext {
-  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
-}
-
-.tooltipcont {
-  color: var(--zdt_tooltip_default_text);
-  font-size: var(--zd_font_size13) ;
-  font-family: var(--zd_semibold);
-  word-break: break-word;
-  max-width: var(--zd_size420) ;
-  line-height: var(--zd_size20);
-  min-height: var(--zd_size24) ;
-  overflow: hidden;
-  background-color: var(--zdt_tooltip_default_bg);
-  padding: 0 var(--zd_size10) ;
-  border-style: solid;
-  border-color: transparent;
-  border-radius: var(--zd_size4);
-}
-
-.tooltipWrapCont {
-  white-space: pre-wrap;
-}
-
-.tooltipNormalCont {
-  white-space: normal;
-}
-.tooltiparrow {
-  content: '';
-  position: absolute;
-  top: 0 ;
-  border-top-left-radius: 3px;
-}
-
-.arrowUp,
-.arrowDown {
-  /*  Variable:Ignore  */
-  width: 11px;
-  /*  Variable:Ignore  */
-  height: 11px;
-  border-top: solid 6px var(--zdt_tooltip_default_bg);
-  border-left: solid 6px var(--zdt_tooltip_default_bg);
-  border-right: solid 6px transparent;
-  border-bottom: solid 6px transparent;
-  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
-  z-index: -1;
-}
-
-.arrowDown {
-  /*  Variable:Ignore  */
-  margin-top: -4px !important;
-  /* put important because of '.wms-mainui *' have margin: 0; */
-}
-
-.arrowLeft,
-.arrowRight {
-  /*  Variable:Ignore  */
-  width: 11px;
-  /*  Variable:Ignore  */
-  height: 11px;
-  border-top: solid 6px var(--zdt_tooltip_default_bg);
-  border-left: solid 6px var(--zdt_tooltip_default_bg);
-  border-right: solid 6px transparent;
-  border-bottom: solid 6px transparent;
-  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
-  z-index: -1;
-}
-
-.arrowRight {
-  /*  Variable:Ignore  */
-  margin-left: -2px;
-}
-
-.arrowLeft {
-  /*  Variable:Ignore  */
-  margin-left: 1px;
-}
-
-.arrowUp {
-  transform: rotate(45deg);
-}
-
-.arrowDown {
-  transform: rotate(225deg);
-}
-
-.arrowLeft {
-  transform: rotate(315deg) translateY(-50%);
-}
-
-.arrowRight {
-  transform: rotate(135deg) translateY(50%);
-}
-@keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@-webkit-keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@-moz-keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@-ms-keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
+.tooltiptext {
+  position: fixed;
+  z-index: 9999999;
+  /*Hook for editor alert*/
+  pointer-events: none;
+  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
+  border-radius: var(--zd_size4);
+}[dir=ltr] .tooltiptext {
+  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
+}[dir=rtl] .tooltiptext {
+  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
+}
+
+.tooltipcont {
+  color: var(--zdt_tooltip_default_text);
+  font-size: var(--zd_font_size13) ;
+  font-family: var(--zd_semibold);
+  word-break: break-word;
+  max-width: var(--zd_size420) ;
+  line-height: 1.5385;
+  min-height: var(--zd_size24) ;
+  overflow: hidden;
+  background-color: var(--zdt_tooltip_default_bg);
+  padding: 0 var(--zd_size10) ;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--zd_size4);
+}
+
+.tooltipWrapCont {
+  white-space: pre-wrap;
+}
+
+.tooltipNormalCont {
+  white-space: normal;
+}
+.tooltiparrow {
+  content: '';
+  position: absolute;
+  top: 0 ;
+  border-top-left-radius: 3px;
+}
+
+.arrowUp,
+.arrowDown {
+  /*  Variable:Ignore  */
+  width: 11px;
+  /*  Variable:Ignore  */
+  height: 11px;
+  border-top: solid 6px var(--zdt_tooltip_default_bg);
+  border-left: solid 6px var(--zdt_tooltip_default_bg);
+  border-right: solid 6px transparent;
+  border-bottom: solid 6px transparent;
+  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
+  z-index: -1;
+}
+
+.arrowDown {
+  /*  Variable:Ignore  */
+  margin-top: -4px !important;
+  /* put important because of '.wms-mainui *' have margin: 0; */
+}
+
+.arrowLeft,
+.arrowRight {
+  /*  Variable:Ignore  */
+  width: 11px;
+  /*  Variable:Ignore  */
+  height: 11px;
+  border-top: solid 6px var(--zdt_tooltip_default_bg);
+  border-left: solid 6px var(--zdt_tooltip_default_bg);
+  border-right: solid 6px transparent;
+  border-bottom: solid 6px transparent;
+  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
+  z-index: -1;
+}
+
+.arrowRight {
+  /*  Variable:Ignore  */
+  margin-left: -2px;
+}
+
+.arrowLeft {
+  /*  Variable:Ignore  */
+  margin-left: 1px;
+}
+
+.arrowUp {
+  transform: rotate(45deg);
+}
+
+.arrowDown {
+  transform: rotate(225deg);
+}
+
+.arrowLeft {
+  transform: rotate(315deg) translateY(-50%);
+}
+
+.arrowRight {
+  transform: rotate(135deg) translateY(50%);
+}
+@keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@-moz-keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@-ms-keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }

package/es/Tooltip/props/propTypes.js

@@ -1,8 +1,5 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
   dataId: PropTypes.string,
-  isHtml: PropTypes.string,
-  isPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
-  title: PropTypes.string,
   customClass: PropTypes.string
 };

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -1,5 +1,3 @@
-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 { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -86,14 +84,15 @@ export default class VelocityAnimationGroup extends React.Component {
       delay: exitDelay ? exitDelay : 0,
       display: 'none'
     };
-    return /*#__PURE__*/React.createElement(VelocityTransitionGroup, _extends({
+    return /*#__PURE__*/React.createElement(VelocityTransitionGroup, {
       enter: enterAnimation,
       leave: exitAnimation,
       component: component && component,
       runOnMount: runOnMount,
       enterHideStyle: enterHideStyle,
-      enterShowStyle: enterShowStyle
-    }, childProps), isActive ? children : null);
+      enterShowStyle: enterShowStyle,
+      ...childProps
+    }, isActive ? children : null);
   }
 
 }

package/es/common/a11y.module.css

@@ -1,4 +1,4 @@
-:root {
-    --lib_a11y_focusScope_focus_border: var(--zdt_a11y_focusScope_focus_border);
-    --lib_a11y_focusScope_focus_bg: var(--zdt_listitem_highlight_bg);
+:root {
+    --lib_a11y_focusScope_focus_border: var(--zdt_a11y_focusScope_focus_border);
+    --lib_a11y_focusScope_focus_bg: var(--zdt_listitem_highlight_bg);
 }