@zohodesk/components 1.0.0-temp-59 → 1.0.0-temp-62

package/README.md

@@ -32,6 +32,25 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-237
+
+- ListItem Responsive Min Height Fixed
+- CheckBox data-selector attribute added
+
+# 1.0.0-alpha-236
+
+- Input => autocomplete added in provider configuration
+
+# 1.0.0-alpha-235
+
+-Tooltip 
+    => data-title-wrap prop added
+    => tooltip calculation based on root or window case added
+
+# 1.0.0-alpha-234
+
+- MultiSelect => SelectedId fix on component did update
+
 # 1.0.0-alpha-233
 
 - MultiSelect => On press tab key selecting option removed

package/assets/Appearance/pureDark/mode/pureDarkMode.module.css

@@ -206,9 +206,9 @@
 	
 	/* stencils */
 	--zdt_stencil_primary_bg: var(--zdt_cta_grey_10_bg);
-	--zdt_stencil_primary_gradient_bg: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_primary_gradient_bg: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
 	--zdt_stencil_secondary_bg: var(--zdt_cta_grey_15_bg);
-	--zdt_stencil_secondary_gradient_bg: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_secondary_gradient_bg: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
 	
 	/* switch */
 	--zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);

package/assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css

@@ -15,14 +15,14 @@
 	
 	/* tag */
 	--zdt_tag_dark_text: #d0d0d4;
-	--zdt_tag_dark_bg: #42485f;
+	--zdt_tag_dark_bg: #262626;
 	--zdt_tag_dark_hover_text: #d0d0d4;
 	--zdt_tag_dark_hover_bg: var(--dot_matterhorn);
 	--zdt_tag_dark_close_bg: #864654;
 	--zdt_tag_dark_close_text: var(--dot_brightRed);
 	
 	/* multiselect */
-	--zdt_multiselect_dark_border: var(--dot_mulledwine);
+	--zdt_multiselect_dark_border: #585858;
 	--zdt_multiselect_darkmsg_bg: #212121;
 	--zdt_multiselect_darkmsg_text: #d0d0d4;
 	--zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);

package/assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css

@@ -15,14 +15,14 @@
 	
 	/* tag */
 	--zdt_tag_dark_text: #d0d0d4;
-	--zdt_tag_dark_bg: #42485f;
+	--zdt_tag_dark_bg: #262626;
 	--zdt_tag_dark_hover_text: #d0d0d4;
 	--zdt_tag_dark_hover_bg: var(--dot_matterhorn);
 	--zdt_tag_dark_close_bg: #864654;
 	--zdt_tag_dark_close_text: var(--dot_brightRed);
 	
 	/* multiselect */
-	--zdt_multiselect_dark_border: var(--dot_mulledwine);
+	--zdt_multiselect_dark_border: #585858;
 	--zdt_multiselect_darkmsg_bg: #212121;
 	--zdt_multiselect_darkmsg_text: #d0d0d4;
 	--zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);

package/assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css

@@ -15,14 +15,14 @@
 	
 	/* tag */
 	--zdt_tag_dark_text: #d0d0d4;
-	--zdt_tag_dark_bg: #42485f;
+	--zdt_tag_dark_bg: #262626;
 	--zdt_tag_dark_hover_text: #d0d0d4;
 	--zdt_tag_dark_hover_bg: var(--dot_matterhorn);
 	--zdt_tag_dark_close_bg: #864654;
 	--zdt_tag_dark_close_text: var(--dot_brightRed);
 	
 	/* multiselect */
-	--zdt_multiselect_dark_border: var(--dot_mulledwine);
+	--zdt_multiselect_dark_border: #585858;
 	--zdt_multiselect_darkmsg_bg: #212121;
 	--zdt_multiselect_darkmsg_text: #d0d0d4;
 	--zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);

package/assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css

@@ -15,14 +15,14 @@
 	
 	/* tag */
 	--zdt_tag_dark_text: #d0d0d4;
-	--zdt_tag_dark_bg: #42485f;
+	--zdt_tag_dark_bg: #262626;
 	--zdt_tag_dark_hover_text: #d0d0d4;
 	--zdt_tag_dark_hover_bg: var(--dot_matterhorn);
 	--zdt_tag_dark_close_bg: #864654;
 	--zdt_tag_dark_close_text: var(--dot_brightRed);
 	
 	/* multiselect */
-	--zdt_multiselect_dark_border: var(--dot_mulledwine);
+	--zdt_multiselect_dark_border: #585858;
 	--zdt_multiselect_darkmsg_bg: #212121;
 	--zdt_multiselect_darkmsg_text: #d0d0d4;
 	--zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);

package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css

@@ -15,14 +15,14 @@
 	
 	/* tag */
 	--zdt_tag_dark_text: #d0d0d4;
-	--zdt_tag_dark_bg: #42485f;
+	--zdt_tag_dark_bg: #262626;
 	--zdt_tag_dark_hover_text: #d0d0d4;
 	--zdt_tag_dark_hover_bg: var(--dot_matterhorn);
 	--zdt_tag_dark_close_bg: #864654;
 	--zdt_tag_dark_close_text: var(--dot_brightRed);
 	
 	/* multiselect */
-	--zdt_multiselect_dark_border: var(--dot_mulledwine);
+	--zdt_multiselect_dark_border: #585858;
 	--zdt_multiselect_darkmsg_bg: #212121;
 	--zdt_multiselect_darkmsg_text: #d0d0d4;
 	--zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);

package/es/AppContainer/AppContainer.js

@@ -28,7 +28,7 @@ export default class AppContainer extends React.Component {
 
   mouseOverDispatch(e) {
     if (this.tooltipRef) {
-      this.tooltipRef.handleOver(e);
+      this.tooltipRef.handleOver(e, this.containerElement);
     }
   }
 

package/es/CheckBox/CheckBox.js

@@ -79,7 +79,8 @@ export default class CheckBox extends React.Component {
       role: role,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
-      "aria-hidden": ariaHidden
+      "aria-hidden": ariaHidden,
+      "data-selector": id
     }, CheckBoxProps), /*#__PURE__*/React.createElement(Box, {
       className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''}`
     }, /*#__PURE__*/React.createElement("input", {

package/es/ListItem/ListItem.module.css

@@ -198,7 +198,7 @@
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
 }
 .responsiveHeight {
-  --listitem_height: var(--zd_size45);
+  --listitem_min_height: var(--zd_size45);
   font-size: var(--zd_font_size15);
   padding-top: var(--zd_size10);
   padding-bottom: var(--zd_size10);

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -24,6 +24,7 @@ import style from './MultiSelect.module.css';
 
 import { debounce, scrollTo, getIsEmptyValue, getSearchString } from '../utils/Common.js';
 import { makeGetMultiSelectSelectedOptions, makeGetGroupSelectOptions, optionIdGrouping, makeGetGroupSelectFilterSuggestions, makeGetOptionIdChange, extractOptionId, makeFormatOptions, makeObjectConcat } from '../utils/dropDownUtils';
+import { getLibraryConfig } from '../Provider/Config';
 /* eslint-disable react/forbid-component-props */
 
 /* eslint-disable react/no-unused-prop-types */
@@ -854,9 +855,9 @@ class AdvancedGroupMultiSelect extends React.Component {
       htmlId,
       i18nKeys,
       a11y,
-      isSearchClearOnSelect,
       palette,
-      needEffect
+      needEffect,
+      autoComplete
     } = this.props;
     let {
       clearText = 'Clear all'
@@ -941,7 +942,7 @@ class AdvancedGroupMultiSelect extends React.Component {
         ariaOwns: setAriaId,
         ariaDescribedby: ariaErrorId
       },
-      autoComplete: false
+      autoComplete: autoComplete
     })), !isReadOnly && !isDisabled && selectedGroupOptions.length > 1 ? /*#__PURE__*/React.createElement(Box, {
       className: style.delete,
       dataId: `${dataId}_clearIcon`,
@@ -1032,6 +1033,7 @@ class AdvancedGroupMultiSelect extends React.Component {
 
 AdvancedGroupMultiSelect.defaultProps = {
   animationStyle: 'bounce',
+  autoComplete: getLibraryConfig('autoComplete'),
   dataId: 'multiSelect',
   defaultDropBoxPosition: 'bottom',
   dropBoxSize: 'small',
@@ -1066,6 +1068,7 @@ AdvancedGroupMultiSelect.defaultProps = {
 };
 AdvancedGroupMultiSelect.propTypes = {
   animationStyle: PropTypes.string,
+  autoComplete: PropTypes.bool,
   borderColor: PropTypes.oneOf(['transparent', 'default']),
   customClass: PropTypes.string,
   dataId: PropTypes.string,

package/es/MultiSelect/MultiSelect.js

@@ -24,6 +24,7 @@ import style from './MultiSelect.module.css';
 
 import { debounce, scrollTo, bind, getIsEmptyValue, getSearchString } from '../utils/Common.js';
 import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetMultiSelectSelectedOptions as makeGetSelectedOptions, makeObjectConcat, filterSelectedOptions, makeGetIsShowClearIcon } from '../utils/dropDownUtils';
+import { getLibraryConfig } from '../Provider/Config';
 /* eslint-disable react/forbid-component-props */
 
 /* eslint-disable react/no-unused-prop-types */
@@ -869,7 +870,8 @@ export class MultiSelectComponent extends React.Component {
       getFooter,
       needEffect,
       disabledOptions,
-      boxSize
+      boxSize,
+      autoComplete
     } = this.props;
     const {
       clearText = 'Clear all',
@@ -960,7 +962,7 @@ export class MultiSelectComponent extends React.Component {
         ariaRequired: true,
         ariaDescribedby: ariaErrorId
       },
-      autoComplete: false
+      autoComplete: autoComplete
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: "vertical"
@@ -1035,6 +1037,7 @@ export class MultiSelectComponent extends React.Component {
 }
 MultiSelectComponent.propTypes = {
   animationStyle: PropTypes.string,
+  autoComplete: PropTypes.bool,
   borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
   closePopupOnly: PropTypes.func,
   dataId: PropTypes.string,
@@ -1114,6 +1117,7 @@ MultiSelectComponent.propTypes = {
 };
 MultiSelectComponent.defaultProps = {
   animationStyle: 'bounce',
+  autoComplete: getLibraryConfig('autoComplete'),
   dataId: 'multiSelect',
   dropBoxSize: 'small',
   isAnimate: true,

package/es/Provider/Config.js

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

package/es/Select/GroupSelect.js

@@ -127,7 +127,7 @@ export class GroupSelectComponent extends PureComponent {
       let {
         selectedId,
         hoverIndex
-      } = this.handleGetSelectedId(this.props, allOptionIds);
+      } = this.handleGetSelectedId(this.props, newOptionIds);
       newSelectedId = selectedId;
       this.setState({
         selectedId,

package/es/Select/Select.js

@@ -22,6 +22,7 @@ import { debounce, scrollTo, getIsEmptyValue, getSearchString } from '../utils/C
 /**** CSS ****/
 
 import style from './Select.module.css';
+import { getLibraryConfig } from '../Provider/Config';
 /* eslint-disable react/no-deprecated */
 
 /* eslint-disable react/no-unused-prop-types */
@@ -715,7 +716,8 @@ export class SelectComponent extends Component {
       htmlId,
       children,
       iconOnHover,
-      customProps
+      customProps,
+      autoComplete
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -783,7 +785,7 @@ export class SelectComponent extends Component {
       borderColor: borderColor,
       htmlId: htmlId,
       isFocus: isPopupReady,
-      autoComplete: false,
+      autoComplete: autoComplete,
       customProps: {
         TextBoxProps: TextBoxProps
       }
@@ -830,7 +832,7 @@ export class SelectComponent extends Component {
       onKeyPress: this.handleValueInputChange,
       borderColor: borderColor,
       htmlId: htmlId,
-      autoComplete: false,
+      autoComplete: autoComplete,
       isFocus: isPopupReady,
       customProps: TextBoxProps
     })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
@@ -865,7 +867,7 @@ export class SelectComponent extends Component {
       onClear: this.handleClearSearch,
       dataId: `${dataId}_search`,
       i18nKeys: TextBoxIcon_i18n,
-      autoComplete: false,
+      autoComplete: autoComplete,
       customProps: {
         TextBoxProps: DropdownSearchTextBoxProps
       }
@@ -905,6 +907,7 @@ export class SelectComponent extends Component {
 }
 SelectComponent.propTypes = {
   animationStyle: PropTypes.string,
+  autoComplete: PropTypes.bool,
   autoSelectDebouneTime: PropTypes.number,
   autoSelectOnType: PropTypes.bool,
   borderColor: PropTypes.oneOf(['transparent', 'default']),
@@ -990,6 +993,7 @@ SelectComponent.propTypes = {
 };
 SelectComponent.defaultProps = {
   animationStyle: 'bounce',
+  autoComplete: getLibraryConfig('autoComplete'),
   autoSelectOnType: true,
   dataId: 'selectComponent',
   dropBoxSize: 'small',

package/es/Tooltip/Tooltip.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { getLibraryConfig } from '../Provider/Config';
 import style from './Tooltip.module.css';
 export default class Tooltip extends React.Component {
   constructor(props) {
@@ -90,7 +91,8 @@ export default class Tooltip extends React.Component {
     };
   }
 
-  handleOver(e) {
+  handleOver(e, targetElement) {
+    let containerElement = getLibraryConfig('tooltipContainer') === 'root' && targetElement ? targetElement : document.body;
     let element = e.target;
     let titleDiv = element.hasAttribute('data-title') || element.hasAttribute('title') ? element : element.closest('[data-title]') || element.closest('[title]');
 
@@ -146,12 +148,14 @@ export default class Tooltip extends React.Component {
 
         let isHtml = titleDiv.getAttribute('data-ishtml');
         let dataTooltipnoArrow = titleDiv.getAttribute('data-tooltip-noarrow') === 'true' ? true : false;
+        let dataTooltipWrap = titleDiv.getAttribute('data-title-wrap') === 'true' ? true : false;
         let clientRect = titleDiv.getBoundingClientRect();
-        let boxLayout = document.body.getBoundingClientRect();
+        let boxLayout = containerElement.getBoundingClientRect();
         this.setState({
           title,
           isHtml,
-          dataTooltipnoArrow
+          dataTooltipnoArrow,
+          dataTooltipWrap
         }, () => {
           let tooltip = this.toolTip;
 
@@ -177,8 +181,8 @@ export default class Tooltip extends React.Component {
             let tooltipLeft;
             /* offset width, height of body */
 
-            let bodyWidth = document.body.offsetWidth;
-            let bodyHeight = document.body.offsetHeight;
+            let bodyWidth = containerElement.offsetWidth;
+            let bodyHeight = containerElement.offsetHeight;
             let isArrowHorizontal = false;
             let isArrowDown = false;
             let isArrowRight = false;
@@ -424,7 +428,8 @@ export default class Tooltip extends React.Component {
       isArrowHorizontal,
       width,
       isHtml,
-      dataTooltipnoArrow
+      dataTooltipnoArrow,
+      dataTooltipWrap
     } = this.state;
     let {
       dataId,
@@ -432,6 +437,7 @@ export default class Tooltip extends React.Component {
     } = this.props;
     let arrowStyle = isArrowHorizontal ? isArrowRight ? style.arrowRight : style.arrowLeft : isArrowDown ? style.arrowDown : style.arrowUp;
     title = title ? title.trim() : null;
+    let tooltipCss = `${style.tooltipcont} ${dataTooltipWrap ? style.tooltipWrapCont : style.tooltipNormalCont}`;
     return title ? /*#__PURE__*/React.createElement("div", {
       className: `${customClass} ${style.tooltiptext}`,
       style: {
@@ -448,12 +454,12 @@ export default class Tooltip extends React.Component {
         top: arrowTop
       }
     }) : null, isHtml ? /*#__PURE__*/React.createElement("div", {
-      className: style.tooltipcont,
+      className: tooltipCss,
       dangerouslySetInnerHTML: {
         __html: title
       }
     }) : /*#__PURE__*/React.createElement("div", {
-      className: style.tooltipcont
+      className: tooltipCss
     }, title)) : null;
   }
 

package/es/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/lib/AppContainer/AppContainer.js

@@ -84,7 +84,7 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
     key: "mouseOverDispatch",
     value: function mouseOverDispatch(e) {
       if (this.tooltipRef) {
-        this.tooltipRef.handleOver(e);
+        this.tooltipRef.handleOver(e, this.containerElement);
       }
     }
   }, {

package/lib/CheckBox/CheckBox.js

@@ -127,7 +127,8 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         role: role,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,
-        "aria-hidden": ariaHidden
+        "aria-hidden": ariaHidden,
+        "data-selector": id
       }, CheckBoxProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_CheckBoxModule["default"].boxContainer, " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize, " ").concat(isFilled ? _CheckBoxModule["default"].filled : '')
       }, /*#__PURE__*/_react["default"].createElement("input", {

package/lib/ListItem/ListItem.module.css

@@ -198,7 +198,7 @@
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
 }
 .responsiveHeight {
-  --listitem_height: var(--zd_size45);
+  --listitem_min_height: var(--zd_size45);
   font-size: var(--zd_font_size15);
   padding-top: var(--zd_size10);
   padding-bottom: var(--zd_size10);

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -43,6 +43,8 @@ var _Common = require("../utils/Common.js");
 
 var _dropDownUtils = require("../utils/dropDownUtils");
 
+var _Config = require("../Provider/Config");
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -944,9 +946,9 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           htmlId = _this$props8.htmlId,
           i18nKeys = _this$props8.i18nKeys,
           a11y = _this$props8.a11y,
-          isSearchClearOnSelect = _this$props8.isSearchClearOnSelect,
           palette = _this$props8.palette,
-          needEffect = _this$props8.needEffect;
+          needEffect = _this$props8.needEffect,
+          autoComplete = _this$props8.autoComplete;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -1030,7 +1032,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           ariaOwns: setAriaId,
           ariaDescribedby: ariaErrorId
         },
-        autoComplete: false
+        autoComplete: autoComplete
       })), !isReadOnly && !isDisabled && selectedGroupOptions.length > 1 ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _MultiSelectModule["default"]["delete"],
         dataId: "".concat(dataId, "_clearIcon"),
@@ -1122,6 +1124,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
 
 AdvancedGroupMultiSelect.defaultProps = {
   animationStyle: 'bounce',
+  autoComplete: (0, _Config.getLibraryConfig)('autoComplete'),
   dataId: 'multiSelect',
   defaultDropBoxPosition: 'bottom',
   dropBoxSize: 'small',
@@ -1156,6 +1159,7 @@ AdvancedGroupMultiSelect.defaultProps = {
 };
 AdvancedGroupMultiSelect.propTypes = {
   animationStyle: _propTypes["default"].string,
+  autoComplete: _propTypes["default"].bool,
   borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
   customClass: _propTypes["default"].string,
   dataId: _propTypes["default"].string,

package/lib/MultiSelect/MultiSelect.js

@@ -41,6 +41,8 @@ var _Common = require("../utils/Common.js");
 
 var _dropDownUtils = require("../utils/dropDownUtils");
 
+var _Config = require("../Provider/Config");
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -942,7 +944,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           getFooter = _this$props13.getFooter,
           needEffect = _this$props13.needEffect,
           disabledOptions = _this$props13.disabledOptions,
-          boxSize = _this$props13.boxSize;
+          boxSize = _this$props13.boxSize,
+          autoComplete = _this$props13.autoComplete;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText,
@@ -1031,7 +1034,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           ariaRequired: true,
           ariaDescribedby: ariaErrorId
         },
-        autoComplete: false
+        autoComplete: autoComplete
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         align: "vertical"
@@ -1110,6 +1113,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
 exports.MultiSelectComponent = MultiSelectComponent;
 MultiSelectComponent.propTypes = {
   animationStyle: _propTypes["default"].string,
+  autoComplete: _propTypes["default"].bool,
   borderColor: _propTypes["default"].oneOf(['transparent', 'default', 'dark']),
   closePopupOnly: _propTypes["default"].func,
   dataId: _propTypes["default"].string,
@@ -1189,6 +1193,7 @@ MultiSelectComponent.propTypes = {
 };
 MultiSelectComponent.defaultProps = {
   animationStyle: 'bounce',
+  autoComplete: (0, _Config.getLibraryConfig)('autoComplete'),
   dataId: 'multiSelect',
   dropBoxSize: 'small',
   isAnimate: true,

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-temp-59",
+  "version": "1.0.0-temp-62",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -36,11 +36,11 @@
   "devDependencies": {
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/variables": "1.0.0-beta.29",
-    "@zohodesk/icons": "1.0.0-beta.96",
+    "@zohodesk/icons": "1.0.0-beta.98",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/svg": "1.0.0-beta.41"
+    "@zohodesk/svg": "1.0.0-beta.42"
   },
   "dependencies": {
     "hoist-non-react-statics": "3.0.1",
@@ -49,9 +49,9 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.0-beta.96",
+    "@zohodesk/icons": "1.0.0-beta.98",
     "@zohodesk/variables": "1.0.0-beta.29",
-    "@zohodesk/svg": "1.0.0-beta.41",
+    "@zohodesk/svg": "1.0.0-beta.42",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3"