@zohodesk/components 1.2.20 → 1.2.21

package/es/v1/Tab/v1Tab.module.css

@@ -0,0 +1,100 @@
+.tab {
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  text-decoration: none;
+  cursor: pointer;
+}
+.vertical {
+  height: 100% ;
+}
+.horizontal {
+  width: 100% ;
+  max-width: 100% ;
+}
+.textContainer,
+.tabText {
+  max-width: inherit ;
+}
+.tabText {
+  composes: dotted from '../../common/common.module.css';
+}
+.disabled {
+  cursor: not-allowed;
+}
+.border {
+  border-bottom: 1px solid var(--zdt_tab_default_border);
+}
+
+.alpha,
+.beta,
+.delta {
+  transition: all var(--zd_transition2);
+}
+.alpha {
+  font-size: var(--zd_font_size11) ;
+  line-height: 3;
+  padding: 0 var(--zd_size18) ;
+}
+.tabAlpha {
+  composes: alpha;
+  color: var(--zdt_tab_alpha_text);
+}
+.alphaHover:hover {
+  color: var(--zdt_tab_alpha_hover_text);
+  background-color: var(--zdt_tab_alpha_hover_bg);
+}
+.alphaActive {
+  composes: alpha;
+  color: var(--zdt_tab_alpha_active_text);
+}
+.alphaActive_border, .betaActive_border {
+  border-color: var(--zdt_tab_alpha_active_border);
+}
+.deltaActive_border {
+  border-color: var(--zdt_tab_delta_active_border);
+}
+.beta {
+  font-size: var(--zd_font_size14) ;
+  line-height: 4.2857;
+  text-transform: capitalize;
+  padding: 0 var(--zd_size4) ;
+}
+[dir=ltr] .beta {
+  margin-right: var(--zd_size40) ;
+}
+[dir=rtl] .beta {
+  margin-left: var(--zd_size40) ;
+}
+.tabBeta {
+  composes: beta;
+  color: var(--zdt_tab_alpha_text);
+}
+.betaHover:hover {
+  color: var(--zdt_tab_alpha_hover_text);
+}
+.betaActive {
+  composes: beta;
+  color: var(--zdt_tab_alpha_hover_text);
+}
+.delta {
+  font-size: var(--zd_font_size11) ;
+  line-height: 3;
+  padding: 0 var(--zd_size4) ;
+}
+[dir=ltr] .delta {
+  margin-right: var(--zd_size10) ;
+}
+[dir=rtl] .delta {
+  margin-left: var(--zd_size10) ;
+}
+.tabDelta {
+  composes: delta;
+  color: var(--zdt_tab_alpha_text);
+}
+.deltaHover:hover {
+  color: var(--zdt_tab_alpha_active_text);
+}
+.deltaActive {
+  composes: delta;
+  color: var(--zdt_tab_alpha_active_text);
+}

package/es/v1/Tab/v1TabContent.module.css

@@ -0,0 +1,4 @@
+/* $Id$ */
+.container {
+  position: relative;
+}

package/es/v1/Tab/v1Tabs.module.css

@@ -0,0 +1,137 @@
+.tab {
+  position: relative;
+  z-index: 1;
+  --tab_position_gap: 22px;
+}
+
+.alpha {
+  height: var(--zd_size35) ;
+  background-color: var(--zdt_tabs_alpha_bg);
+}
+
+[dir=ltr] .alpha_padding {
+  padding-left: var(--zd_size15) ;
+}
+
+[dir=rtl] .alpha_padding {
+  padding-right: var(--zd_size15) ;
+}
+
+.alpha_border {
+  border-width: 0 0 1px 0;
+  border-color: var(--zdt_tabs_alpha_border);
+  border-style: solid;
+}
+
+.alpha::after {
+  content: '';
+  position: absolute;
+  z-index: -2;
+  width: 76% ;
+  bottom: 0 ;
+  height: var(--zd_size10) ;
+  border-radius: 100px / 5px;
+  box-shadow: var(--zd_bs_tabs_shadow);
+}
+
+[dir=ltr] .alpha::after {
+  left: 12% ;
+}
+
+[dir=rtl] .alpha::after {
+  right: 12% ;
+}
+
+.alpha:before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  width: 100% ;
+  height: 100% ;
+  top: 0 ;
+  background: inherit;
+}
+
+[dir=ltr] .alpha:before {
+  left: 0 ;
+}
+
+[dir=rtl] .alpha:before {
+  right: 0 ;
+}
+
+.beta {
+  height: var(--zd_size61) ;
+  background-color: var(--zdt_tabs_alpha_bg);
+}
+
+[dir=ltr] .beta_padding {
+  padding-left: var(--zd_size13) ;
+}
+
+[dir=rtl] .beta_padding {
+  padding-right: var(--zd_size13) ;
+}
+
+.beta_border {
+  border-bottom: 1px solid var(--zdt_tabs_alpha_border);
+}
+
+.delta {
+  height: var(--zd_size35) ;
+  background-color: var(--zdt_tabs_alpha_bg);
+}
+
+[dir=ltr] .delta_padding {
+  padding-left: var(--zd_size10) ;
+}
+
+[dir=rtl] .delta_padding {
+  padding-right: var(--zd_size10) ;
+}
+
+.delta_border {
+  border-bottom: 1px dotted var(--zdt_tabs_alpha_border);
+}
+
+.delta .highlight {
+  border-color: var(--zdt_tabs_delta_border);
+}
+
+.maxWidth {
+  max-width: 100% ;
+}
+
+.highlight {
+  position: absolute;
+  bottom: 0 ;
+  border-bottom: 1px solid var(--zdt_tabs_highlight_border);
+}
+
+.lineAnimate {
+  transition: transform var(--zd_transition3) linear;
+}
+
+.menu {
+  position: relative;
+  cursor: pointer;
+}
+
+.menuBox {
+  max-height: var(--zd_size220) ;
+}
+.bottomRightToLeft,
+.topRightToLeft,
+.bottomCenterToLeft {
+  right: calc(var(--tab_position_gap) * -1); 
+}
+
+.bottomLeftToRight,
+.topLeftToRight,
+.bottomCenterToRight {
+  left: calc(var(--tab_position_gap) * -1); 
+}
+
+.hidden {
+  visibility: hidden;
+}

package/es/v1/TextBox/TextBox.js

@@ -40,7 +40,8 @@ function TextBox(props) {
     onFocus,
     onBlur,
     onChange,
-    inputRef
+    inputRef,
+    isScrollPrevent
   } = props;
   let {
     ariaLabel,
@@ -106,6 +107,10 @@ function TextBox(props) {
     onChange && !isReadOnly && onChange(value, e);
   };
 
+  const handlePreventTextBoxScroll = () => {
+    this.inputEle.scrollLeft = 0;
+  };
+
   let classList = needAppearance ? `${style.container} ${style[size]}  ${style[variant]} ${needBorder ? style.border : ''} ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isFocus ? style.focus : ''}` : `${style.basic}`;
   value = value === null || value === undefined ? '' : value;
   return /*#__PURE__*/React.createElement("input", _extends({
@@ -123,7 +128,7 @@ function TextBox(props) {
     "aria-activedescendant": ariaActivedescendant,
     "aria-readonly": ariaReadonly,
     "aria-multiselectable": ariaMultiselectable,
-    className: `${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${isClickable ? style.pointer : ''} ${classList} ${style[`borderColor_${borderColor}`]} ${customClass ? customClass : ''}`,
+    className: `${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${isClickable ? style.pointer : ''} ${classList} ${style[`borderColor_${borderColor}`]} ${isScrollPrevent ? style.inputDotted : ''} ${customClass ? customClass : ''}`,
     "data-id": `${dataId}`,
     "data-test-id": `${dataId}`,
     "data-selector-id": dataSelectorId,
@@ -140,6 +145,7 @@ function TextBox(props) {
     ref: handleRef,
     type: type,
     value: value,
+    onScroll: isScrollPrevent ? handlePreventTextBoxScroll : '',
     onKeyPress: onKeyPress,
     onMouseDown: onMouseDown
   }, options.current, customProps));

package/es/v1/TextBox/props/defaultProps.js

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

package/es/v1/TextBox/props/propTypes.js

@@ -49,6 +49,7 @@ export const propTypes = {
     ariaMultiselectable: PropTypes.bool
   }),
   isFocus: PropTypes.bool,
+  isScrollPrevent: PropTypes.bool,
   customProps: PropTypes.object,
   dataSelectorId: PropTypes.string,
   autoComplete: PropTypes.bool

package/es/v1/TextBoxIcon/TextBoxIcon.js

@@ -49,7 +49,8 @@ export default function TextBoxIcon(props) {
     customProps,
     inputRef,
     onFocus,
-    onBlur
+    onBlur,
+    isScrollPrevent
   } = props;
   const {
     customTBoxWrap = '',
@@ -122,6 +123,7 @@ export default function TextBoxIcon(props) {
     onKeyPress: onKeyPress,
     onMouseDown: onMouseDown,
     needBorder: false,
+    isScrollPrevent: isScrollPrevent,
     customClass: customTextBox,
     customProps: TextBoxProps
   }))), /*#__PURE__*/React.createElement(Box, {

package/es/v1/TextBoxIcon/props/defaultProps.js

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

package/es/v1/TextBoxIcon/props/propTypes.js

@@ -45,6 +45,7 @@ export const propTypes = { ...TextBox_propTypes,
   iconOnHover: PropTypes.bool,
   isFocus: PropTypes.bool,
   onClearMouseDown: PropTypes.func,
+  isScrollPrevent: PropTypes.bool,
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object
   })

package/es/v1/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/lib/DateTime/DateTime.module.css

@@ -35,7 +35,7 @@
 .grid {
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
-  line-height: var(--zd_size18);
+  line-height: 1.3846;
   /* css:theme-validation:ignore */
   text-align: center;
   padding: var(--zd_size4) 0 ;
@@ -72,7 +72,7 @@
 
 .thMonYear {
   font-size: var(--zd_font_size13) ;
-  line-height: var(--zd_size24);
+  line-height: 1.8462;
   color: var(--zdt_datetime_datestr_text);
   composes: semibold;
   display: initial

package/lib/DateTime/YearView.module.css

@@ -9,7 +9,7 @@
 .month {
   width: 30.333%;
   font-size: var(--zd_font_size12) ;
-  line-height: var(--zd_size26);
+  line-height: 2.1667;
   height: var(--zd_size26) ;
   color: var(--zdt_yearview_month_text);
   text-align: center;

package/lib/Label/Label.module.css

@@ -4,8 +4,9 @@
   --label_text_color: var(--zdt_label_default_text);
   --label_font_family: var(--zd_regular);
   --label_cursor: default;
-  --label_line_height: 18px;
+  --label_line_height: 1.286;
 }
+/* css:lineheight-validation:ignore */
 .label {
   composes: varClass;
   vertical-align: middle;
@@ -18,15 +19,19 @@
 }
 .xsmall {
   --label_font_size: var(--zd_font_size12);
+  --label_line_height:1.5;
 }
 .small {
   --label_font_size: var(--zd_font_size13);
+  --label_line_height:1.385;
 }
 .medium {
   --label_font_size: var(--zd_font_size14);
+  --label_line_height:1.286;
 }
 .large {
   --label_font_size: var(--zd_font_size26);
+  --label_line_height:0.6923;
   composes: semibold from '../common/common.module.css';
 }
 .pointer {

package/lib/ListItem/ListItem.module.css

@@ -77,7 +77,7 @@
   composes: dotted from '../common/common.module.css';
 }
 .value, .multiLineValue {
-  line-height: var(--zd_size20);
+  line-height: 1.5385;
 }
 .multiLineValue{
   word-break: break-word;

package/lib/Ribbon/Ribbon.module.css

@@ -32,6 +32,7 @@
   --ribbon_tag_before_border_width: 1px 0 0 1px  ;
 }
 
+/* css:lineheight-validation:ignore */
 .basic {
   composes: varClass;
   position: relative;
@@ -215,7 +216,6 @@
   composes: dotted from '../common/common.module.css';
   display: block;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
-  --ribbon_line_height: 20px;
   --ribbon_text_transform: uppercase;
 }
 
@@ -227,6 +227,22 @@
   --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
 }
 
+.flag.small {
+  --ribbon_line_height: 2.2223;
+}
+
+.flag.medium {
+  --ribbon_line_height: 1.8182;
+}
+
+.flag.large {
+  --ribbon_line_height: 1.5385;
+}
+
+.flag.xlarge {
+  --ribbon_line_height: 1.4286;
+}
+
 .flag::after {
   position: absolute;
   /*  Variable:Ignore  */
@@ -262,10 +278,25 @@
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   --ribbon_padding: var(--zd_size6) var(--zd_size10);
-  --ribbon_line_height: 20px;
   text-align: center;
 }
 
+.ribbon.small {
+  --ribbon_line_height: 2.2223;
+}
+
+.ribbon.medium {
+  --ribbon_line_height: 1.8182;
+}
+
+.ribbon.large {
+  --ribbon_line_height: 1.5385;
+}
+
+.ribbon.xlarge {
+  --ribbon_line_height: 1.4286;
+}
+
 .ribbon::after,
 .ribbon::before {
   position: absolute;
@@ -373,7 +404,6 @@
 .sticker {
   display: block;
   height: var(--zd_size18) ;
-  line-height: var(--zd_size11);
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   text-align: center;
@@ -383,6 +413,22 @@
   padding: var(--zd_size3) var(--zd_size10) ;
 }
 
+.sticker.small {
+  line-height: 1.2223;
+}
+
+.sticker.medium {
+  line-height: 1;
+}
+
+.sticker.large {
+  line-height: 0.8462;
+}
+
+.sticker.xlarge {
+  line-height: 0.7858;
+}
+
 .after,
 .before {
   position: absolute;

package/lib/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); } }
@@ -841,8 +847,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",
@@ -890,7 +899,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/Select/Select.module.css

@@ -1,65 +1,84 @@
 .input {
   cursor: pointer;
 }
+
 .small {
   max-height: var(--zd_size200) ;
 }
+
 .medium {
   max-height: var(--zd_size350) ;
 }
+
 .large {
   max-height: var(--zd_size400) ;
 }
+
 .emptyState {
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_select_emptystate_text);
   composes: semibold from '../common/common.module.css';
 }
+
 .box_small .emptyState {
   padding: var(--zd_size12) var(--zd_size6) ;
 }
+
 .box_medium .emptyState {
   padding: var(--zd_size12) var(--zd_size15) ;
 }
+
 .hide {
   composes: vishidden from '../common/common.module.css';
 }
+
 .container {
   position: relative;
 }
+/* css:lineheight-validation:ignore */
 .arrowIcon {
   height: var(--zd_size8) ;
   line-height: var(--zd_size8);
 }
+
 .small.search {
   padding: 0 var(--zd_size5) ;
 }
+
 .medium.search {
   padding: var(--zd_size3) var(--zd_size20) 0 ;
 }
+
 .title {
   margin-bottom: var(--zd_size6) ;
 }
+
 .groupTitle {
   margin: var(--zd_size6) 0 ;
 }
+
 .listItemContainer {
   padding: var(--zd_size10) 0 ;
 }
+
 .responsivelistItemContainer {
   padding: var(--zd_size10) 0 0 ;
 }
+
 .readonly {
   --textboxicon_icon_cursor: not-allowed;
 }
+
 .transparentContainer .arrowIcon {
   opacity: 0;
   visibility: hidden;
 }
+
 .transparentContainer:hover .arrowIcon {
   opacity: 1;
   visibility: visible;
 }
+
 .disable {
   color: var(--zdt_select_disable_text);
 }
@@ -78,9 +97,11 @@
 [dir=rtl] .leftIcon {
   right: 0 ;
 }
+
 [dir=ltr] .iconSelect {
   padding-left: var(--zd_size30) ;
 }
+
 [dir=rtl] .iconSelect {
   padding-right: var(--zd_size30) ;
 }
@@ -88,22 +109,27 @@
 .dropBoxList {
   padding: var(--zd_size10) 0 ;
 }
-.responsivedropBoxList{
+
+.responsivedropBoxList {
   padding: var(--zd_size10) 0 0 0 ;
 }
+
 .rotate {
   transform: rotateX(180deg);
 }
+
 .iconOnHoverStyle .arrowIcon,
 .iconOnHoverReadonly .arrowIcon,
 .iconOnHoverReadonly:hover .arrowIcon {
   opacity: 0;
   visibility: hidden;
 }
+
 .iconOnHoverStyle:hover .arrowIcon {
   opacity: 1;
   visibility: visible;
 }
+
 .loader {
   padding: var(--zd_size10) ;
 }