@zohodesk/components 1.2.19 → 1.2.21

package/lib/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -9,7 +9,6 @@ exports[`Switch rendering the CustomClass 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium SwtichCustomSwitchSize shrinkOff"
@@ -26,6 +25,7 @@ exports[`Switch rendering the CustomClass 1`] = `
       <label
         class="label switch_mediumLabel SwtichCustomSwitch"
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -52,7 +52,6 @@ exports[`Switch rendering the CustomProps 1`] = `
     data-switch="true"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -69,6 +68,7 @@ exports[`Switch rendering the CustomProps 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -95,7 +95,6 @@ exports[`Switch rendering the ID 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -112,6 +111,7 @@ exports[`Switch rendering the ID 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -137,7 +137,6 @@ exports[`Switch rendering the Name 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -155,6 +154,7 @@ exports[`Switch rendering the Name 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -171,7 +171,6 @@ exports[`Switch rendering the Title 1`] = `
     data-test-id="containerComponent"
     data-title="LabelTitle"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -188,6 +187,7 @@ exports[`Switch rendering the Title 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -203,7 +203,6 @@ exports[`Switch rendering the Value 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -220,6 +219,7 @@ exports[`Switch rendering the Value 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -235,7 +235,6 @@ exports[`Switch rendering the checked 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -253,6 +252,7 @@ exports[`Switch rendering the checked 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -268,7 +268,6 @@ exports[`Switch rendering the dataId 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -287,6 +286,7 @@ exports[`Switch rendering the dataId 1`] = `
         data-id="data-Switch"
         data-test-id="data-Switch"
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -302,7 +302,6 @@ exports[`Switch rendering the defult props 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -317,6 +316,7 @@ exports[`Switch rendering the defult props 1`] = `
       />
       <label
         class="label switch_mediumLabel "
+        tabindex="0"
       />
     </div>
   </div>
@@ -333,7 +333,6 @@ exports[`Switch rendering the disabled and disableTitle 1`] = `
     data-test-id="containerComponent"
     data-title="data-disableTitle"
     role="switch"
-    tabindex="-1"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -351,6 +350,7 @@ exports[`Switch rendering the disabled and disableTitle 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="-1"
       />
     </div>
   </div>
@@ -366,7 +366,6 @@ exports[`Switch rendering the isReadOnly 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="-1"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -382,6 +381,7 @@ exports[`Switch rendering the isReadOnly 1`] = `
       />
       <label
         class="label switch_mediumLabel "
+        tabindex="-1"
       />
     </div>
   </div>
@@ -397,7 +397,6 @@ exports[`Switch rendering the labelSize of- danger 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -414,6 +413,7 @@ exports[`Switch rendering the labelSize of- danger 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -439,7 +439,6 @@ exports[`Switch rendering the labelSize of- default 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -456,6 +455,7 @@ exports[`Switch rendering the labelSize of- default 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -481,7 +481,6 @@ exports[`Switch rendering the labelSize of- large 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -498,6 +497,7 @@ exports[`Switch rendering the labelSize of- large 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -523,7 +523,6 @@ exports[`Switch rendering the labelSize of- mandatory 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -540,6 +539,7 @@ exports[`Switch rendering the labelSize of- mandatory 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -565,7 +565,6 @@ exports[`Switch rendering the labelSize of- medium 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -582,6 +581,7 @@ exports[`Switch rendering the labelSize of- medium 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -607,7 +607,6 @@ exports[`Switch rendering the labelSize of- primary 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -624,6 +623,7 @@ exports[`Switch rendering the labelSize of- primary 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -649,7 +649,6 @@ exports[`Switch rendering the labelSize of- secondary 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -666,6 +665,7 @@ exports[`Switch rendering the labelSize of- secondary 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -691,7 +691,6 @@ exports[`Switch rendering the labelSize of- small 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -708,6 +707,7 @@ exports[`Switch rendering the labelSize of- small 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -733,7 +733,6 @@ exports[`Switch rendering the size of- medium 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -750,6 +749,7 @@ exports[`Switch rendering the size of- medium 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -765,7 +765,6 @@ exports[`Switch rendering the size of- small 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_small  shrinkOff"
@@ -782,6 +781,7 @@ exports[`Switch rendering the size of- small 1`] = `
       <label
         class="label switch_smallLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -797,7 +797,6 @@ exports[`Switch rendering the text 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -814,6 +813,7 @@ exports[`Switch rendering the text 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label

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);