@zohodesk/components 1.0.0-alpha-235 → 1.0.0-alpha-236

package/lib/Provider/Config.js

@@ -13,7 +13,10 @@ var id = {
   scrollFetchLimit: 80,
   isReducedMotion: false,
   direction: 'ltr',
-  tooltipDebounce: 175
+  tooltipDebounce: 175,
+  tooltipContainer: 'window',
+  // root || window
+  autoComplete: false
 };
 
 function getLibraryConfig(key) {

package/lib/Select/GroupSelect.js

@@ -192,7 +192,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
       }
 
       if (selectedOption !== prevProps.selectedOption) {
-        var _this$handleGetSelect2 = this.handleGetSelectedId(this.props, allOptionIds),
+        var _this$handleGetSelect2 = this.handleGetSelectedId(this.props, newOptionIds),
             _selectedId = _this$handleGetSelect2.selectedId,
             _hoverIndex = _this$handleGetSelect2.hoverIndex;
 

package/lib/Select/Select.js

@@ -37,6 +37,8 @@ var _Common = require("../utils/Common.js");
 
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
 
+var _Config = require("../Provider/Config");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -751,7 +753,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           htmlId = _this$props11.htmlId,
           children = _this$props11.children,
           iconOnHover = _this$props11.iconOnHover,
-          customProps = _this$props11.customProps;
+          customProps = _this$props11.customProps,
+          autoComplete = _this$props11.autoComplete;
       var _i18nKeys = i18nKeys,
           TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
           _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
@@ -818,7 +821,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         borderColor: borderColor,
         htmlId: htmlId,
         isFocus: isPopupReady,
-        autoComplete: false,
+        autoComplete: autoComplete,
         customProps: {
           TextBoxProps: TextBoxProps
         }
@@ -865,7 +868,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         onKeyPress: this.handleValueInputChange,
         borderColor: borderColor,
         htmlId: htmlId,
-        autoComplete: false,
+        autoComplete: autoComplete,
         isFocus: isPopupReady,
         customProps: TextBoxProps
       })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
@@ -900,7 +903,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         onClear: this.handleClearSearch,
         dataId: "".concat(dataId, "_search"),
         i18nKeys: TextBoxIcon_i18n,
-        autoComplete: false,
+        autoComplete: autoComplete,
         customProps: {
           TextBoxProps: DropdownSearchTextBoxProps
         }
@@ -944,6 +947,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
 exports.SelectComponent = SelectComponent;
 SelectComponent.propTypes = {
   animationStyle: _propTypes["default"].string,
+  autoComplete: _propTypes["default"].bool,
   autoSelectDebouneTime: _propTypes["default"].number,
   autoSelectOnType: _propTypes["default"].bool,
   borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
@@ -1029,6 +1033,7 @@ SelectComponent.propTypes = {
 };
 SelectComponent.defaultProps = {
   animationStyle: 'bounce',
+  autoComplete: (0, _Config.getLibraryConfig)('autoComplete'),
   autoSelectOnType: true,
   dataId: 'selectComponent',
   dropBoxSize: 'small',

package/lib/Tooltip/Tooltip.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Config = require("../Provider/Config");
+
 var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -137,9 +139,10 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "handleOver",
-    value: function handleOver(e) {
+    value: function handleOver(e, targetElement) {
       var _this2 = this;
 
+      var containerElement = (0, _Config.getLibraryConfig)('tooltipContainer') === 'root' && targetElement ? targetElement : document.body;
       var element = e.target;
       var titleDiv = element.hasAttribute('data-title') || element.hasAttribute('title') ? element : element.closest('[data-title]') || element.closest('[title]');
 
@@ -195,12 +198,14 @@ 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 clientRect = titleDiv.getBoundingClientRect();
-          var boxLayout = document.body.getBoundingClientRect();
+          var boxLayout = containerElement.getBoundingClientRect();
           this.setState({
             title: title,
             isHtml: isHtml,
-            dataTooltipnoArrow: dataTooltipnoArrow
+            dataTooltipnoArrow: dataTooltipnoArrow,
+            dataTooltipWrap: dataTooltipWrap
           }, function () {
             var tooltip = _this2.toolTip;
 
@@ -226,8 +231,8 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
               var tooltipLeft;
               /* offset width, height of body */
 
-              var bodyWidth = document.body.offsetWidth;
-              var bodyHeight = document.body.offsetHeight;
+              var bodyWidth = containerElement.offsetWidth;
+              var bodyHeight = containerElement.offsetHeight;
               var isArrowHorizontal = false;
               var isArrowDown = false;
               var isArrowRight = false;
@@ -480,12 +485,14 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
           isArrowHorizontal = _this$state.isArrowHorizontal,
           width = _this$state.width,
           isHtml = _this$state.isHtml,
-          dataTooltipnoArrow = _this$state.dataTooltipnoArrow;
+          dataTooltipnoArrow = _this$state.dataTooltipnoArrow,
+          dataTooltipWrap = _this$state.dataTooltipWrap;
       var _this$props = this.props,
           dataId = _this$props.dataId,
           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);
       return title ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(customClass, " ").concat(_TooltipModule["default"].tooltiptext),
         style: {
@@ -502,12 +509,12 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
           top: arrowTop
         }
       }) : null, isHtml ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TooltipModule["default"].tooltipcont,
+        className: tooltipCss,
         dangerouslySetInnerHTML: {
           __html: title
         }
       }) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TooltipModule["default"].tooltipcont
+        className: tooltipCss
       }, title)) : null;
     }
   }]);

package/lib/Tooltip/Tooltip.module.css

@@ -17,7 +17,6 @@
   max-width: 420px;
   line-height: var(--zd_size20);
   min-height: var(--zd_size24);
-  white-space: normal;
   overflow: hidden;
   background-color: var(--zdt_tooltip_default_bg);
   padding: 0 var(--zd_size10);
@@ -25,6 +24,12 @@
   border-color: transparent;
   border-radius: var(--zd_size4);
 }
+.tooltipWrapCont {
+  white-space: pre-wrap;
+}
+.tooltipNormalCont {
+  white-space: normal;
+}
 .tooltiparrow {
   content: '';
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-235",
+  "version": "1.0.0-alpha-236",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",