@zohodesk/components 1.0.0-temp-206.5 → 1.0.0-temp-207

package/lib/Textarea/utils/calculateNodeHeightOne.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = calculateNodeHeightOne;
+
+var _getSizingData2 = _interopRequireDefault(require("./getSizingData"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var getHeight = function getHeight(node, _ref) {
+  var borderSize = _ref.borderSize,
+      paddingSize = _ref.paddingSize,
+      isBorderBox = _ref.isBorderBox;
+  var height = node.scrollHeight;
+
+  if (isBorderBox) {
+    // border-box: add border, since height = content + padding + border
+    return height + borderSize;
+  } // remove padding, since height = content
+
+
+  return height - paddingSize;
+};
+
+function calculateNodeHeightOne(_ref2) {
+  var _ref2$minRows = _ref2.minRows,
+      minRows = _ref2$minRows === void 0 ? 1 : _ref2$minRows,
+      _ref2$maxRows = _ref2.maxRows,
+      maxRows = _ref2$maxRows === void 0 ? 5 : _ref2$maxRows,
+      textareaEle = _ref2.textareaEle,
+      hiddenTextareaEle = _ref2.hiddenTextareaEle;
+
+  var _getSizingData = (0, _getSizingData2["default"])(hiddenTextareaEle),
+      computedStyle = _getSizingData.computedStyle,
+      paddingSize = _getSizingData.paddingSize,
+      borderSize = _getSizingData.borderSize,
+      boxSizing = _getSizingData.boxSizing;
+
+  var isBorderBox = boxSizing === "border-box"; // If input's width is shrunk and it's not visible, don't sync height.
+
+  if (computedStyle.width === '0px') {
+    return {
+      height: 0
+    };
+  }
+
+  var hiddenTextarea = hiddenTextareaEle; // The height of the inner content
+
+  var height = getHeight(hiddenTextarea, {
+    paddingSize: paddingSize,
+    borderSize: borderSize,
+    isBorderBox: isBorderBox
+  });
+  var innerHeight = getHeight(hiddenTextarea, {
+    paddingSize: paddingSize,
+    borderSize: borderSize,
+    isBorderBox: isBorderBox
+  }); // measure height of a textarea with a single row
+
+  hiddenTextarea.value = textareaEle.value || textareaEle.placeholder || "x";
+  hiddenTextarea.style.width = computedStyle.width;
+  var rowHeight = hiddenTextarea.scrollHeight - paddingSize;
+  var minHeight = rowHeight * minRows + (isBorderBox ? paddingSize + borderSize : 0);
+  var maxHeight = rowHeight * maxRows + (isBorderBox ? paddingSize + borderSize : 0);
+  height = Math.min(maxHeight, Math.max(minHeight, height)); // Take the box sizing into account for applying this value as a style.
+
+  var overflow = Math.abs(height - innerHeight) <= 1;
+  return {
+    height: height,
+    overflow: overflow
+  };
+}

package/lib/Textarea/utils/debounce.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = debounce;
+
+// Corresponds to 10 frames at 60 Hz.
+function debounce(func) {
+  var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 166;
+  var timeout;
+
+  function debounced() {
+    var _this = this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    var later = function later() {
+      func.apply(_this, args);
+    };
+
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  }
+
+  debounced.clear = function () {
+    clearTimeout(timeout);
+  };
+
+  return debounced;
+}

package/lib/Textarea/utils/getSizingData.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _ownerWindow = _interopRequireDefault(require("./ownerWindow"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var getStyleValue = function getStyleValue(value) {
+  return parseInt(value, 10) || 0;
+};
+
+var getSizingData = function getSizingData(node) {
+  var containerWindow = (0, _ownerWindow["default"])(node);
+  var computedStyle = containerWindow.getComputedStyle(node);
+
+  if (computedStyle === null) {
+    return null;
+  }
+
+  var boxSizing = computedStyle.boxSizing;
+  var paddingSize = getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
+  var borderSize = getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
+  return {
+    boxSizing: boxSizing,
+    paddingSize: paddingSize,
+    borderSize: borderSize,
+    containerWindow: containerWindow,
+    computedStyle: computedStyle
+  };
+};
+
+var _default = getSizingData;
+exports["default"] = _default;

package/lib/Textarea/utils/ownerDocument.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var ownerDocument = function ownerDocument(node) {
+  return node && node.ownerDocument || document;
+};
+
+var _default = ownerDocument;
+exports["default"] = _default;

package/lib/Textarea/utils/ownerWindow.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _ownerDocument = _interopRequireDefault(require("./ownerDocument"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var ownerWindow = function ownerWindow(node) {
+  var document = (0, _ownerDocument["default"])(node);
+  return document.defaultView || window;
+};
+
+var _default = ownerWindow;
+exports["default"] = _default;

package/lib/Textarea/utils/updateState.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var updateState = function updateState(prevState, newState, renderRef) {
+  var height = newState.height,
+      overflow = newState.overflow;
+  var renders = renderRef; // Need a large enough difference to update the height.
+  // This prevents infinite rendering loop.
+
+  if (renders.current < 20 && (height > 0 && Math.abs((prevState.height || 0) - height) > 1 || prevState.overflow !== overflow)) {
+    renders.current += 1;
+    return {
+      overflow: overflow,
+      height: height
+    };
+  } // if (process.env.NODE_ENV !== "production") {
+  //   if (renders.current === 20) {
+  //     console.error(
+  //       [
+  //         "MUI: Too many re-renders. The layout is unstable.",
+  //         "TextareaAutosize limits the number of renders to prevent an infinite loop."
+  //       ].join("\n")
+  //     )
+  //   }
+  // }
+
+
+  return prevState;
+};
+
+var _default = updateState;
+exports["default"] = _default;

package/lib/Tooltip/Tooltip.js

@@ -15,12 +15,14 @@ var _propTypes = require("./props/propTypes");
 
 var _Config = require("../Provider/Config");
 
-var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
-
 var _ResizeObserver = _interopRequireDefault(require("../Responsive/ResizeObserver"));
 
 var _selectn = _interopRequireDefault(require("selectn"));
 
+var _cssUtils = require("../utils/cssUtils");
+
+var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -251,7 +253,8 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
 
           var isHtml = titleDiv.getAttribute('data-ishtml');
           var dataTooltipnoArrow = titleDiv.getAttribute('data-tooltip-noarrow') === 'true' ? true : false;
-          var dataTooltipWrap = titleDiv.getAttribute('data-title-wrap') === 'true' ? true : false;
+          var dataTooltipWrap = titleDiv.getAttribute('data-title-wrap') || 'normal'; // values: normal, pre, pre-wrap, pre-line, nowrap, break-spaces
+
           var clientRect = titleDiv.getBoundingClientRect();
           var boxLayout = this.getClientRectOfContEl(containerElement);
           this.setState({
@@ -545,7 +548,15 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
           customClass = _this$props.customClass;
       var arrowStyle = isArrowHorizontal ? isArrowRight ? _TooltipModule["default"].arrowRight : _TooltipModule["default"].arrowLeft : isArrowDown ? _TooltipModule["default"].arrowDown : _TooltipModule["default"].arrowUp;
       title = title ? title.trim() : null;
-      var tooltipCss = "".concat(_TooltipModule["default"].tooltipcont, " ").concat(dataTooltipWrap ? _TooltipModule["default"].tooltipWrapCont : _TooltipModule["default"].tooltipNormalCont);
+      var tooltipWhiteSpaceModification = dataTooltipWrap;
+
+      if (dataTooltipWrap == 'pre') {
+        tooltipWhiteSpaceModification = 'preWrap';
+      } else if (dataTooltipWrap == 'nowrap') {
+        tooltipWhiteSpaceModification = 'normal';
+      }
+
+      var tooltipCss = "".concat(_TooltipModule["default"].tooltipcont, " ").concat(_cssUtils.whiteSpaceClassMapping[tooltipWhiteSpaceModification]);
       return title ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(customClass, " ").concat(_TooltipModule["default"].tooltiptext),
         style: {

package/lib/Tooltip/Tooltip.module.css

@@ -26,14 +26,6 @@
   border-color: transparent;
   border-radius: var(--zd_size4);
 }
-
-.tooltipWrapCont {
-  white-space: pre-wrap;
-}
-
-.tooltipNormalCont {
-  white-space: normal;
-}
 .tooltiparrow {
   content: '';
   position: absolute;

package/lib/common/common.module.css

@@ -522,4 +522,28 @@
 .fitContHeight {
   height: fit-content ;
   height: -moz-fit-content ;
+}
+
+.whiteSpace_normal {
+  white-space: normal;
+}
+
+.whiteSpace_nowrap {
+  white-space: nowrap;
+}
+
+.whiteSpace_pre {
+  white-space: pre;
+}
+
+.whiteSpace_preLine {
+  white-space: pre-line;
+}
+
+.whiteSpace_preWrap {
+  white-space: pre-wrap;
+}
+
+.whiteSpace_breakSpaces {
+  white-space: break-spaces
 }

package/lib/utils/cssUtils.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.whiteSpaceClassMapping = void 0;
+
+var _commonModule = _interopRequireDefault(require("../common/common.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var whiteSpaceClassMapping = {
+  // eslint-disable-next-line dot-notation
+  'normal': _commonModule["default"].whiteSpace_normal,
+  'pre': _commonModule["default"].whiteSpace_pre,
+  'pre-wrap': _commonModule["default"].whiteSpace_preWrap,
+  'pre-line': _commonModule["default"].whiteSpace_preLine,
+  // eslint-disable-next-line dot-notation
+  'nowrap': _commonModule["default"].whiteSpace_nowrap,
+  'break-spaces': _commonModule["default"].whiteSpace_breakSpaces
+};
+exports.whiteSpaceClassMapping = whiteSpaceClassMapping;

package/lib/v1/Heading/Heading.js

@@ -11,6 +11,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtils = require("../../utils/cssUtils");
+
 var _HeadingModule = _interopRequireDefault(require("../../Heading/Heading.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -29,14 +31,16 @@ function Heading(props) {
       title = props.title,
       dataTitle = props.dataTitle,
       dataId = props.dataId,
-      a11y = props.a11y;
+      a11y = props.a11y,
+      whiteSpace = props.whiteSpace;
   return /*#__PURE__*/_react["default"].createElement(tagName, _objectSpread({
-    className: "".concat(_HeadingModule["default"].reset, " ").concat(className),
+    className: "".concat(_HeadingModule["default"].reset, " ").concat(whiteSpace ? _cssUtils.whiteSpaceClassMapping[whiteSpace] : '', " ").concat(className),
     onClick: onClick,
     onDoubleClick: onDoubleClick,
     'data-title': dataTitle || title,
     'data-id': dataId,
-    'data-test-id': dataId
+    'data-test-id': dataId,
+    'data-title-wrap': whiteSpace
   }, a11y), title);
 }
 

package/lib/v1/Heading/props/propTypes.js

@@ -17,6 +17,7 @@ var propTypes = {
   dataTitle: _propTypes["default"].string,
   onClick: _propTypes["default"].func,
   onDoubleClick: _propTypes["default"].func,
-  a11y: _propTypes["default"].object
+  a11y: _propTypes["default"].object,
+  whiteSpace: _propTypes["default"].oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'])
 };
 exports.propTypes = propTypes;

package/lib/v1/Tab/Tabs.js

@@ -128,8 +128,8 @@ var Tabs = function Tabs(props) {
       searchErrorText = props.searchErrorText,
       placeHolderText = props.placeHolderText,
       searchBoxSize = props.searchBoxSize,
-      ariaTitleId = props.ariaTitleId,
-      isPopupOpen = props.isPopupOpen;
+      isPopupOpen = props.isPopupOpen,
+      closePopupOnly = props.closePopupOnly;
 
   function handleChange(value, e) {
     setSearchValue(value);
@@ -460,7 +460,7 @@ var Tabs = function Tabs(props) {
 
     e.preventDefault();
     onSelect(tab);
-    togglePopupLocal();
+    closePopupOnly();
   }
 
   function onScrollLocal(e) {

package/lib/v1/Tab/props/propTypes.js

@@ -106,8 +106,8 @@ var Tabs_propTypes = {
   dataSelectorId: _propTypes["default"].string,
   placeHolderText: _propTypes["default"].string,
   searchBoxSize: _propTypes["default"].string,
-  ariaTitleId: _propTypes["default"].string,
-  searchErrorText: _propTypes["default"].string
+  searchErrorText: _propTypes["default"].string,
+  closePopupOnly: _propTypes["default"].func
 };
 exports.Tabs_propTypes = Tabs_propTypes;
 var TabWrapper_propTypes = {

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

@@ -141,7 +141,7 @@
 }
 
 .emptyStateContainer {
-  padding-bottom: var(--zd_size25);
+  padding-bottom: var(--zd_size15) ;
 }
 
 .emptyStateTitle {
@@ -163,5 +163,5 @@
 }
 
 .listWrapper {
-  padding: var(--zd_size10) 0 ;
+  padding-top: var(--zd_size10) ;
 }

package/lib/v1/Tooltip/Tooltip.js

@@ -15,12 +15,14 @@ var _propTypes = require("./props/propTypes");
 
 var _Config = require("../../Provider/Config");
 
-var _TooltipModule = _interopRequireDefault(require("../../Tooltip/Tooltip.module.css"));
-
 var _ResizeObserver = _interopRequireDefault(require("../../Responsive/ResizeObserver"));
 
 var _selectn = _interopRequireDefault(require("selectn"));
 
+var _cssUtils = require("../../utils/cssUtils");
+
+var _TooltipModule = _interopRequireDefault(require("../../Tooltip/Tooltip.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -251,7 +253,8 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
 
           var isHtml = titleDiv.getAttribute('data-ishtml');
           var dataTooltipnoArrow = titleDiv.getAttribute('data-tooltip-noarrow') === 'true' ? true : false;
-          var dataTooltipWrap = titleDiv.getAttribute('data-title-wrap') === 'true' ? true : false;
+          var dataTooltipWrap = titleDiv.getAttribute('data-title-wrap') || 'normal'; // values: normal, pre, pre-wrap, pre-line, nowrap, break-spaces
+
           var clientRect = titleDiv.getBoundingClientRect();
           var boxLayout = this.getClientRectOfContEl(containerElement);
           this.setState({
@@ -545,7 +548,15 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
           customClass = _this$props.customClass;
       var arrowStyle = isArrowHorizontal ? isArrowRight ? _TooltipModule["default"].arrowRight : _TooltipModule["default"].arrowLeft : isArrowDown ? _TooltipModule["default"].arrowDown : _TooltipModule["default"].arrowUp;
       title = title ? title.trim() : null;
-      var tooltipCss = "".concat(_TooltipModule["default"].tooltipcont, " ").concat(dataTooltipWrap ? _TooltipModule["default"].tooltipWrapCont : _TooltipModule["default"].tooltipNormalCont);
+      var tooltipWhiteSpaceModification = dataTooltipWrap;
+
+      if (dataTooltipWrap == 'pre') {
+        tooltipWhiteSpaceModification = 'preWrap';
+      } else if (dataTooltipWrap == 'nowrap') {
+        tooltipWhiteSpaceModification = 'normal';
+      }
+
+      var tooltipCss = "".concat(_TooltipModule["default"].tooltipcont, " ").concat(_cssUtils.whiteSpaceClassMapping[tooltipWhiteSpaceModification]);
       return title ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(customClass, " ").concat(_TooltipModule["default"].tooltiptext),
         style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-206.5",
+  "version": "1.0.0-temp-207",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -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 download && npm run css:review && npm run review:props ",
+    "prepublishOnly": "node prePublish.js && npm run download && npm run css:review",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
@@ -68,11 +68,11 @@
     "@zohodesk-private/css-variable-migrator": "^1.0.7",
     "@zohodesk-private/node-plugins": "1.1.8",
     "@zohodesk-private/react-prop-validator": "1.2.3",
-    "@zohodesk/a11y": "2.2.3",
+    "@zohodesk/a11y": "2.2.4",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/icons": "1.0.56",
-    "@zohodesk/svg": "1.1.18",
+    "@zohodesk/icons": "1.0.58",
+    "@zohodesk/svg": "1.1.19",
     "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/virtualizer": "1.0.3",
@@ -86,14 +86,14 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.56",
+    "@zohodesk/icons": "1.0.58",
     "@zohodesk/variables": "1.0.0",
-    "@zohodesk/svg": "1.1.18",
+    "@zohodesk/svg": "1.1.19",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.5",
     "@zohodesk/utils": "1.3.14",
-    "@zohodesk/a11y": "2.2.3"
+    "@zohodesk/a11y": "2.2.4"
   }
 }