@zohodesk/components 1.2.20 → 1.2.21

package/lib/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/lib/v1/Tab/v1TabContent.module.css

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

package/lib/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/lib/v1/TextBox/TextBox.js

@@ -24,6 +24,8 @@ 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 TextBox(props) {
+  var _this = this;
+
   var type = props.type,
       name = props.name,
       id = props.id,
@@ -57,7 +59,8 @@ function TextBox(props) {
       onFocus = props.onFocus,
       onBlur = props.onBlur,
       onChange = props.onChange,
-      inputRef = props.inputRef;
+      inputRef = props.inputRef,
+      isScrollPrevent = props.isScrollPrevent;
   var ariaLabel = a11y.ariaLabel,
       ariaAutocomplete = a11y.ariaAutocomplete,
       ariaControls = a11y.ariaControls,
@@ -118,6 +121,10 @@ function TextBox(props) {
     onChange && !isReadOnly && onChange(value, e);
   };
 
+  var handlePreventTextBoxScroll = function handlePreventTextBoxScroll() {
+    _this.inputEle.scrollLeft = 0;
+  };
+
   var classList = needAppearance ? "".concat(_TextBoxModule["default"].container, " ").concat(_TextBoxModule["default"][size], "  ").concat(_TextBoxModule["default"][variant], " ").concat(needBorder ? _TextBoxModule["default"].border : '', " ").concat(isDisabled && !needEffect || isReadOnly && !needEffect ? '' : _TextBoxModule["default"].effect, " ").concat(isFocus ? _TextBoxModule["default"].focus : '') : "".concat(_TextBoxModule["default"].basic);
   value = value === null || value === undefined ? '' : value;
   return /*#__PURE__*/_react["default"].createElement("input", _extends({
@@ -135,7 +142,7 @@ function TextBox(props) {
     "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,
@@ -152,6 +159,7 @@ function TextBox(props) {
     ref: handleRef,
     type: type,
     value: value,
+    onScroll: isScrollPrevent ? handlePreventTextBoxScroll : '',
     onKeyPress: onKeyPress,
     onMouseDown: onMouseDown
   }, options.current, customProps));

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

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

package/lib/v1/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/v1/TextBoxIcon/TextBoxIcon.js

@@ -82,7 +82,8 @@ function TextBoxIcon(props) {
       customProps = props.customProps,
       inputRef = props.inputRef,
       onFocus = props.onFocus,
-      onBlur = props.onBlur;
+      onBlur = props.onBlur,
+      isScrollPrevent = props.isScrollPrevent;
   var _customClass$customTB = customClass.customTBoxWrap,
       customTBoxWrap = _customClass$customTB === void 0 ? '' : _customClass$customTB,
       _customClass$customTe = customClass.customTextBox,
@@ -159,6 +160,7 @@ function TextBoxIcon(props) {
     onKeyPress: onKeyPress,
     onMouseDown: onMouseDown,
     needBorder: false,
+    isScrollPrevent: isScrollPrevent,
     customClass: customTextBox,
     customProps: TextBoxProps
   }))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

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

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

package/lib/v1/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/v1/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.2.20",
+  "version": "1.2.21",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -22,13 +22,13 @@
     "lintAll": "react-cli lint ./src",
     "lintAllFix": "npm run lintAll --eslint:fix=true",
     "clean": "react-cli clean build unittest coverage es lib assets && mkdir assets",
-    "dubCheck": "node ./node_modules/@zohodesk-private/node-plugins/es/dublication_css_file_finder  node_modules/@zohodesk/icons/lib node_modules/@zohodesk/variables/lib",
+    "dubCheck": "node ./node_modules/@zohodesk-private/node-plugins/es/dublication_css_file_finder  node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es",
     "init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components && npm run build:variables",
     "build:variables": "react-cli clean ./assets && node ./preprocess/index",
     "rtl": "react-cli rtl ./src ./lib && react-cli rtl ./src ./es",
     "common_package_build": "cd ../common && npm run build && cd ../components",
     "start": "react-cli start",
-    "docs": "npm run dubCheck && npm run theme:validate && react-cli docs",
+    "docs": "npm run css:review && react-cli docs",
     "build:lib": "react-cli build:component:cmjs",
     "build:es": "react-cli build:library:es",
     "build": "npm run theme:validate && npm run build:lib && npm run build:es",
@@ -38,7 +38,7 @@
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run build && npm run rtl && npm run cssVariableConvert ",
-    "prepublishOnly": "node prePublish.js && npm run test && npm run download && npm run review:props",
+    "prepublishOnly": "node prePublish.js && npm run test && npm run download && npm run css:review && npm run review:props ",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
@@ -47,10 +47,12 @@
     "build:external": "npm run clean &&  npm run init  && npm run docsjs:build && npm run build:externalDocCopy && react-cli build:component:umd && npm run externalDocHTMLChange",
     "download": "react-cli clean ./node_modules ./package-lock.json && npm install",
     "expublish": "npm publish --tag experimental-version",
+    "css:lineheight:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/lineheight_automation/lineHeightErrorCheck.js ./src/",
     "cssVariableConvert": "react-cli variableConverter ./lib ./lib && react-cli variableConverter ./es ./es",
     "variable:addignore": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/variableIgnore.js ./src",
     "variable:convert": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/pxParserPostcss.js ./src",
     "variable:check": "node  ./node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json",
+    "css:review": " npm run dubCheck && npm run css:lineheight:validate && npm run theme:validate ",
     "theme:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation validate ./src ./.cli",
     "theme:addignore": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation addignore ./src ./.cli",
     "review:props": "node ./node_modules/@zohodesk-private/react-prop-validator/es/propValidation.js propValidationArg.json "
@@ -62,9 +64,9 @@
     "@testing-library/user-event": "^13.0.10",
     "@zohodesk-private/color-variable-preprocessor": "1.1.0",
     "@zohodesk-private/css-variable-migrator": "^1.0.7",
-    "@zohodesk-private/node-plugins": "1.1.1",
+    "@zohodesk-private/node-plugins": "^1.1.3",
     "@zohodesk-private/react-prop-validator": "1.2.0",
-    "@zohodesk/a11y": "2.1.1",
+    "@zohodesk/a11y": "2.1.2",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/hooks": "2.0.2",
     "@zohodesk/icons": "1.0.19",
@@ -90,6 +92,6 @@
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.2",
     "@zohodesk/utils": "1.3.13",
-    "@zohodesk/a11y": "2.1.0"
+    "@zohodesk/a11y": "2.1.2"
   }
 }