@zohodesk/components 1.2.20 → 1.2.21

package/lib/Tab/Tab.module.css

@@ -32,7 +32,7 @@
 }
 .alpha {
   font-size: var(--zd_font_size11) ;
-  line-height: var(--zd_size33);
+  line-height: 3;
   padding: 0 var(--zd_size18) ;
 }
 .tabAlpha {
@@ -55,7 +55,7 @@
 }
 .beta {
   font-size: var(--zd_font_size14) ;
-  line-height: var(--zd_size60);
+  line-height: 4.2857;
   text-transform: capitalize;
   padding: 0 var(--zd_size4) ;
 }
@@ -78,7 +78,7 @@
 }
 .delta {
   font-size: var(--zd_font_size11) ;
-  line-height: var(--zd_size33);
+  line-height: 3;
   padding: 0 var(--zd_size4) ;
 }
 [dir=ltr] .delta {

package/lib/TextBox/TextBox.js

@@ -55,6 +55,7 @@ var TextBox = /*#__PURE__*/function (_React$PureComponent) {
     _this.setFocus = _this.setFocus.bind(_assertThisInitialized(_this));
     _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
     _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_this));
+    _this.handlePreventTextBoxScroll = _this.handlePreventTextBoxScroll.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -104,6 +105,11 @@ var TextBox = /*#__PURE__*/function (_React$PureComponent) {
           isReadOnly = _this$props3.isReadOnly;
       onChange && !isReadOnly && onChange(value, e);
     }
+  }, {
+    key: "handlePreventTextBoxScroll",
+    value: function handlePreventTextBoxScroll() {
+      this.inputEle.scrollLeft = 0;
+    }
   }, {
     key: "render",
     value: function render() {
@@ -136,6 +142,7 @@ var TextBox = /*#__PURE__*/function (_React$PureComponent) {
           a11y = _this$props4.a11y,
           customClass = _this$props4.customClass,
           isFocus = _this$props4.isFocus,
+          isScrollPrevent = _this$props4.isScrollPrevent,
           customProps = _this$props4.customProps,
           dataSelectorId = _this$props4.dataSelectorId;
       var ariaLabel = a11y.ariaLabel,
@@ -187,7 +194,7 @@ var TextBox = /*#__PURE__*/function (_React$PureComponent) {
         "aria-activedescendant": ariaActivedescendant,
         "aria-readonly": ariaReadonly,
         "aria-multiselectable": ariaMultiselectable,
-        className: "".concat(isReadOnly && needReadOnlyStyle ? _TextBoxModule["default"].readonly : '', " ").concat(isClickable ? _TextBoxModule["default"].pointer : '', " ").concat(classList, " ").concat(_TextBoxModule["default"]["borderColor_".concat(borderColor)], " ").concat(customClass ? customClass : ''),
+        className: "".concat(isReadOnly && needReadOnlyStyle ? _TextBoxModule["default"].readonly : '', " ").concat(isClickable ? _TextBoxModule["default"].pointer : '', " ").concat(classList, " ").concat(_TextBoxModule["default"]["borderColor_".concat(borderColor)], " ").concat(isScrollPrevent ? _TextBoxModule["default"].inputDotted : '', " ").concat(customClass ? customClass : ''),
         "data-id": "".concat(dataId),
         "data-test-id": "".concat(dataId),
         "data-selector-id": dataSelectorId,
@@ -204,6 +211,7 @@ var TextBox = /*#__PURE__*/function (_React$PureComponent) {
         ref: this.inputRef,
         type: type,
         value: value,
+        onScroll: isScrollPrevent ? this.handlePreventTextBoxScroll : '',
         onKeyPress: onKeyPress,
         onMouseDown: onMouseDown
       }, options, customProps));

package/lib/TextBox/TextBox.module.css

@@ -14,11 +14,12 @@
   --textbox_letter_spacing: 0.1px;
   --textbox_padding: 0;
   --textbox_cursor: auto;
-  --textbox_line_height: 35px;
+  --textbox_line_height: 2.5;
 
   /* textbox placeholder default variable */
   --textbox_placeholder_text_color: var(--zdt_textbox_placeholder_text);
 }
+
 .basic {
   composes: varClass;
   -webkit-appearance: none;
@@ -29,22 +30,27 @@
   border: var(--textbox_border_width);
   cursor: var(--textbox_cursor);
 }
+
 .basic::placeholder {
   /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+
 .basic::-webkit-placeholder {
   /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+
 .basic::-moz-placeholder {
   /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+
 .basic::-ms-placeholder {
   /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+/* css:lineheight-validation:ignore */
 .container {
   composes: basic;
   /* css:theme-validation:ignore */
@@ -65,110 +71,139 @@
   border-style: var(--textbox_border_style);
   border-color: var(--textbox_border_color);
 }
+
 .basic:disabled,
 .container:disabled,
 .container:disabled:hover {
   --textbox_cursor: not-allowed;
   --textbox_text_color: var(--zdt_textbox_disabled_text);
 }
+
 .container:disabled,
 .container:disabled:hover {
   --textbox_bg_color: none;
 }
+
 .container::placeholder {
   /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+
 .container::-webkit-placeholder {
   /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+
 .container::-moz-placeholder {
   /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+
 .container::-ms-placeholder {
   /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+
 .pointer {
   --textbox_cursor: pointer;
 }
+
 /* Need Border */
 .border, .effect:hover, .effect:focus {
   border-width: var(--textbox_border_width);
   border-style: var(--textbox_border_style);
 }
+
 .effect:hover,
 .effect:focus {
   /* css:theme-validation:ignore */
 }
+
 .effect:hover, .effect:focus {
   border-color: var(--textbox_border_color);
 }
+
 .border {
   --textbox_border_width: 0 0 1px 0;
 }
+
 .borderColor_transparent,
 .borderColor_default {
   /* css:theme-validation:ignore */
 }
+
 .borderColor_transparent, .borderColor_default {
   border-color: var(--textbox_border_color);
 }
+
 .borderColor_transparent {
   --textbox_border_color: var(--zdt_textbox_transparent_border);
 }
+
 .borderColor_default {
   --textbox_border_color: var(--zdt_textbox_default_border);
 }
+
 .effect:hover {
   --textbox_border_color: var(--zdt_textbox_effect_hover_border);
 }
-.effect:focus,.focus,.focus:hover {
+
+.effect:focus,
+.focus,
+.focus:hover {
   --textbox_border_color: var(--zdt_textbox_effect_focus_border);
 }
+
 /* Size */
 .xmedium,
 .medium {
   --textbox_font_size: var(--zd_font_size14);
 }
+
 .xmedium {
   --textbox_height: var(--zd_size28);
-  --textbox_line_height: 28px;
+  --textbox_line_height: 2;
 }
+
 .medium {
   --textbox_height: var(--zd_size35);
-  --textbox_line_height: 35px;
+  --textbox_line_height: 2.5;
 }
+
 .small {
   --textbox_font_size: var(--zd_font_size12);
   --textbox_height: var(--zd_size28);
-  --textbox_line_height: 28px;
+  --textbox_line_height: 2.3334;
 }
+
 .xsmall {
   --textbox_font_size: var(--zd_font_size13);
   --textbox_height: var(--zd_size25);
-  --textbox_line_height: 25px;
+  --textbox_line_height: 1.9231;
 }
+
 .default,
 .primary,
 .secondary,
 .light {
   font-family: var(--textbox_font_family);
 }
+
 .primary {
   --textbox_text_color: var(--zdt_textbox_default_text);
   --textbox_font_family: var(--zd_semibold);
   composes: ftsmooth from '../common/common.module.css';
 }
+
 .secondary {
   --textbox_text_color: var(--zdt_textbox_secondary_text);
   --textbox_font_family: var(--zd_light);
 }
+
 .light {
   --textbox_text_color: var(--zdt_textbox_light_text);
 }
+
 .readonly,
 .readonly:hover,
 .readonly:focus {
@@ -176,3 +211,7 @@
   --textbox_text_color: var(--zdt_textbox_default_text);
   --textbox_bg_color: none;
 }
+
+.inputDotted {
+  composes: dotted from '../common/common.module.css'
+}

package/lib/TextBox/props/defaultProps.js

@@ -20,6 +20,7 @@ var defaultProps = {
   borderColor: 'default',
   a11y: {},
   isFocus: false,
+  isScrollPrevent: false,
   customProps: {},
   dataSelectorId: 'textBox'
 };

package/lib/TextBox/props/propTypes.js

@@ -58,5 +58,5 @@ var propTypes = (_propTypes = {
   ariaActivedescendant: _propTypes2["default"].string,
   ariaReadonly: _propTypes2["default"].bool,
   ariaMultiselectable: _propTypes2["default"].bool
-})), _defineProperty(_propTypes, "isFocus", _propTypes2["default"].bool), _defineProperty(_propTypes, "customProps", _propTypes2["default"].object), _defineProperty(_propTypes, "dataSelectorId", _propTypes2["default"].string), _defineProperty(_propTypes, "autoComplete", _propTypes2["default"].bool), _propTypes);
+})), _defineProperty(_propTypes, "isFocus", _propTypes2["default"].bool), _defineProperty(_propTypes, "isScrollPrevent", _propTypes2["default"].bool), _defineProperty(_propTypes, "customProps", _propTypes2["default"].object), _defineProperty(_propTypes, "dataSelectorId", _propTypes2["default"].string), _defineProperty(_propTypes, "autoComplete", _propTypes2["default"].bool), _propTypes);
 exports.propTypes = propTypes;

package/lib/TextBoxIcon/TextBoxIcon.js

@@ -147,6 +147,7 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
           iconOnHover = _this$props2.iconOnHover,
           isFocus = _this$props2.isFocus,
           onClearMouseDown = _this$props2.onClearMouseDown,
+          isScrollPrevent = _this$props2.isScrollPrevent,
           customProps = _this$props2.customProps;
       var isActive = this.state.isActive;
       var _customClass$customTB = customClass.customTBoxWrap,
@@ -194,6 +195,7 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
         onKeyPress: onKeyPress,
         onMouseDown: onMouseDown,
         needBorder: false,
+        isScrollPrevent: isScrollPrevent,
         customClass: customTextBox,
         customProps: TextBoxProps
       }))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

package/lib/TextBoxIcon/props/defaultProps.js

@@ -23,6 +23,7 @@ var defaultProps = {
   customClass: {},
   iconOnHover: false,
   isFocus: false,
+  isScrollPrevent: false,
   customProps: {},
   dataSelectorId: 'textBoxIcon'
 };

package/lib/TextBoxIcon/props/propTypes.js

@@ -62,6 +62,7 @@ var propTypes = _objectSpread(_objectSpread({}, _propTypes2.propTypes), {}, {
   iconOnHover: _propTypes["default"].bool,
   isFocus: _propTypes["default"].bool,
   onClearMouseDown: _propTypes["default"].func,
+  isScrollPrevent: _propTypes["default"].bool,
   customProps: _propTypes["default"].shape({
     TextBoxProps: _propTypes["default"].object
   })

package/lib/Textarea/Textarea.module.css

@@ -5,7 +5,7 @@
   --textarea_cursor: auto;
   --textarea_text_color: var(--zdt_textarea_default_text);
   --textarea_font_size: var(--zd_font_size14);
-  --textarea_line_height: 22px;
+  --textarea_line_height: 1.5712;
   --textarea_padding: var(--zd_size2) 0;
   --textarea_height: var(--zd_size30);
 
@@ -61,6 +61,7 @@
 .resizeboth {
   composes: resizeboth from '../common/common.module.css';
 }
+/* css:lineheight-validation:ignore */
 .container {
   composes: basic;
   transition: border var(--zd_transition2) linear 0s,
@@ -104,13 +105,13 @@
   --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;
+  --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: 17px;
+  --textarea_line_height: 1.3077;
 }
 .small {
   --textarea_height: var(--zd_size30);

package/lib/Tooltip/Tooltip.js

@@ -213,8 +213,10 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
         if (title !== '' && title) {
           titleDiv.setAttribute('data-title', title);
           titleDiv.removeAttribute('title');
+          var isInputElementType = element.type === 'text';
+          var elementText = isInputElementType ? element.value : element.innerText;
 
-          if (element.nodeName !== 'I' && element.innerText && element.innerText.trim() !== '') {
+          if (element.nodeName !== 'I' && elementText && elementText.trim() !== '') {
             var isContentDotted = '';
 
             if (element.scrollWidth !== 0) {
@@ -232,7 +234,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
               isContentDotted = offWidth < scrollWidth;
             }
 
-            var originText = element.innerText.replace(/\s/g, '').toLowerCase();
+            var originText = elementText.replace(/\s/g, '').toLowerCase();
             var tooltipText = title.replace(/\s/g, '').toLowerCase();
             var isDefaultTooltip = element.hasAttribute('data-istitle') || element.hasAttribute('istitle') ? element.getAttribute('data-istitle') || element.getAttribute('istitle') : 'false';
             isDefaultTooltip = isDefaultTooltip === 'true';

package/lib/Tooltip/Tooltip.module.css

@@ -17,7 +17,7 @@
   font-family: var(--zd_semibold);
   word-break: break-word;
   max-width: var(--zd_size420) ;
-  line-height: var(--zd_size20);
+  line-height: 1.5385;
   min-height: var(--zd_size24) ;
   overflow: hidden;
   background-color: var(--zdt_tooltip_default_bg);

package/lib/v1/Card/Card.js

@@ -20,7 +20,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _Layout = require("../Layout");
 
-var _Config = require("../../Provider/Config");
+var _Config = require("../Provider/Config");
 
 var _CardModule = _interopRequireDefault(require("../../Card/Card.module.css"));
 

package/lib/v1/CheckBox/CheckBox.js

@@ -15,7 +15,7 @@ var _Label = _interopRequireDefault(require("../Label/Label"));
 
 var _Layout = require("../Layout");
 
-var _CssProvider = _interopRequireDefault(require("../../Provider/CssProvider"));
+var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
 
 var _CheckBoxModule = _interopRequireDefault(require("../../CheckBox/CheckBox.module.css"));
 

package/lib/v1/Select/Select.js

@@ -53,6 +53,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -844,8 +850,11 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         htmlId: htmlId,
         isFocus: isPopupReady,
         autoComplete: autoComplete,
+        isScrollPrevent: true,
         customProps: {
-          TextBoxProps: TextBoxProps
+          TextBoxProps: _objectSpread({
+            'data-title': title || selected
+          }, TextBoxProps)
         }
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
@@ -893,7 +902,10 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         htmlId: htmlId,
         autoComplete: autoComplete,
         isFocus: isPopupReady,
-        customProps: TextBoxProps
+        isScrollPrevent: true,
+        customProps: _objectSpread({
+          'data-title': title || selected
+        }, TextBoxProps)
       })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: "Helmet"

package/lib/v1/Tab/Tab.js

@@ -17,7 +17,7 @@ var _Layout = require("../Layout");
 
 var _Common = require("../../utils/Common");
 
-var _TabModule = _interopRequireDefault(require("../../Tab/Tab.module.css"));
+var _v1TabModule = _interopRequireDefault(require("./v1Tab.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -87,10 +87,10 @@ function Tab(_ref) {
   var getTab = (0, _react.useCallback)(function (ref) {
     return getTabRef && getTabRef(id, ref, isVirtual);
   }, [id, isVirtual]);
-  var activeWithAppearance = (0, _Common.cs)([_TabModule["default"][styleContent.active], needBorder && !isAnimate && _TabModule["default"]["".concat(styleContent.active, "_border")]]);
+  var activeWithAppearance = (0, _Common.cs)([_v1TabModule["default"][styleContent.active], needBorder && !isAnimate && _v1TabModule["default"]["".concat(styleContent.active, "_border")]]);
   var activeClasses = (0, _Common.cs)([needAppearance && activeWithAppearance, activeClass]);
-  var inActiveClasses = needAppearance && (0, _Common.cs)([_TabModule["default"][styleContent.tab], tabTypes[type] && _TabModule["default"]["".concat("".concat(type, "Hover"))]]);
-  var tabClass = (0, _Common.cs)([_TabModule["default"].tab, align === 'vertical' ? _TabModule["default"].vertical : _TabModule["default"].horizontal, isDisabled && _TabModule["default"].disabled, needBorder && !isAnimate && needAppearance && _TabModule["default"].border, isActive ? activeClasses : inActiveClasses, className]);
+  var inActiveClasses = needAppearance && (0, _Common.cs)([_v1TabModule["default"][styleContent.tab], tabTypes[type] && _v1TabModule["default"]["".concat("".concat(type, "Hover"))]]);
+  var tabClass = (0, _Common.cs)([_v1TabModule["default"].tab, align === 'vertical' ? _v1TabModule["default"].vertical : _v1TabModule["default"].horizontal, isDisabled && _v1TabModule["default"].disabled, needBorder && !isAnimate && needAppearance && _v1TabModule["default"].border, isActive ? activeClasses : inActiveClasses, className]);
   return /*#__PURE__*/_react["default"].createElement(_Layout.Box, _extends({
     tourId: tourId,
     tagName: isLink ? 'a' : 'div',
@@ -113,11 +113,11 @@ function Tab(_ref) {
   }, customProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     alignBox: "row",
     align: "both",
-    className: _TabModule["default"].textContainer
+    className: _v1TabModule["default"].textContainer
   }, text && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     flexible: true,
     adjust: true,
-    className: _TabModule["default"].tabText
+    className: _v1TabModule["default"].tabText
   }, text), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     shrink: true
   }, children) : null));

package/lib/v1/Tab/TabContent.js

@@ -13,7 +13,7 @@ var _propTypes = require("./props/propTypes");
 
 var _Layout = require("../Layout");
 
-var _TabContentModule = _interopRequireDefault(require("../../Tab/TabContent.module.css"));
+var _v1TabContentModule = _interopRequireDefault(require("./v1TabContent.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -25,7 +25,7 @@ var TabContent = function TabContent(_ref) {
       id = _ref.id,
       dataSelectorId = _ref.dataSelectorId;
   return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-    className: _TabContentModule["default"].container,
+    className: _v1TabContentModule["default"].container,
     scroll: scroll,
     dataId: "".concat(dataId, "_TabContent"),
     isScrollAttribute: true,