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

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; }
@@ -512,10 +514,6 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         }
       } else if (keyCode === 27) {// this.handlePopupClose(e);
       } else if (keyCode === 9) {
-        var _selectedOption = suggestions[hoverOption] || {};
-
-        var _id = _selectedOption.id;
-        isPopupOpen && !(0, _Common.getIsEmptyValue)(_id) && this.handleSelectOption(_id, e);
         this.handlePopupClose(e);
       }
     }
@@ -946,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,
@@ -1035,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"
@@ -1114,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,
@@ -1193,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,9 @@ var id = {
   scrollFetchLimit: 80,
   isReducedMotion: false,
   direction: 'ltr',
-  tooltipDebounce: 175
+  tooltipDebounce: 175,
+  getTooltipContainer: function getTooltipContainer() {},
+  autoComplete: false
 };
 
 function getLibraryConfig(key) {

package/lib/Provider.js

@@ -13,8 +13,6 @@ var _AppContainer = _interopRequireDefault(require("./AppContainer/AppContainer"
 
 var _Layout = require("./Layout");
 
-var _Switch = _interopRequireDefault(require("./Switch/Switch"));
-
 require("../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
 
 require("../assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
@@ -59,6 +57,28 @@ require("../assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module
 
 require("../assets/Appearance/dark/mode/darkMode.module.css");
 
+require("../assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css");
+
+require("../assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css");
+
+require("../assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css");
+
+require("../assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css");
+
+require("../assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css");
+
+require("../assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css");
+
+require("../assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css");
+
+require("../assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css");
+
+require("../assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css");
+
+require("../assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css");
+
+require("../assets/Appearance/pureDark/mode/pureDarkMode.module.css");
+
 var _LibraryContextInit = _interopRequireDefault(require("./Provider/LibraryContextInit"));
 
 var _IdProvider = require("./Provider/IdProvider");
@@ -101,25 +121,16 @@ var Provider = /*#__PURE__*/function (_React$Component) {
       appearanceName: 'default',
       themeName: 'blue'
     };
-    _this.switchMode = _this.switchMode.bind(_assertThisInitialized(_this));
     _this.setTheme = _this.setTheme.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(Provider, [{
-    key: "switchMode",
-    value: function switchMode() {
-      var appearanceName = this.state.appearanceName;
-
-      if (appearanceName == 'default') {
-        this.setState({
-          appearanceName: 'dark'
-        });
-      } else {
-        this.setState({
-          appearanceName: 'default'
-        });
-      }
+    key: "setAppearance",
+    value: function setAppearance(mode) {
+      this.setState({
+        appearanceName: mode
+      });
     }
   }, {
     key: "setTheme",
@@ -158,6 +169,29 @@ var Provider = /*#__PURE__*/function (_React$Component) {
       var yellow = {
         backgroundColor: '#e8b923'
       };
+      var light = {
+        backgroundColor: '#fff'
+      };
+      var night = {
+        backgroundColor: '#232b38'
+      };
+      var dark = {
+        backgroundColor: '#212121'
+      };
+      var fixedPosition = {
+        position: 'fixed',
+        bottom: '0',
+        backgroundColor: '#272727',
+        padding: '10px',
+        borderRadius: '15px 15px 0 0',
+        minWidth: '100px',
+        textAlign: 'center',
+        boxShadow: '0 0 3px #000',
+        fontSize: '12px',
+        zIndex: '3',
+        display: 'flex',
+        alignItems: 'center'
+      };
       return /*#__PURE__*/_react["default"].createElement(_LibraryContextInit["default"].Provider, {
         value: {
           isReducedMotion: false,
@@ -173,29 +207,46 @@ var Provider = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         scroll: "vertical"
       }, this.props.children), /*#__PURE__*/_react["default"].createElement("div", {
+        style: Object.assign({}, fixedPosition, {
+          left: '20%',
+          transform: 'translate(-20%)'
+        })
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          color: '#fff'
+        }
+      }, "Appearance:"), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        title: "Light Mode",
+        style: Object.assign({}, themeClass, light),
+        onClick: function onClick() {
+          return _this2.setAppearance('default');
+        }
+      }), /*#__PURE__*/_react["default"].createElement("span", {
+        title: "Night Mode",
+        style: Object.assign({}, themeClass, night),
+        onClick: function onClick() {
+          return _this2.setAppearance('dark');
+        }
+      }), /*#__PURE__*/_react["default"].createElement("span", {
+        title: "Dark Mode",
+        style: Object.assign({}, themeClass, dark),
+        onClick: function onClick() {
+          return _this2.setAppearance('pureDark');
+        }
+      }))), /*#__PURE__*/_react["default"].createElement("div", {
+        style: Object.assign({}, fixedPosition, {
+          left: '80%',
+          transform: 'translate(-80%)'
+        })
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
-          position: 'fixed',
-          bottom: '0',
-          backgroundColor: '#272727',
-          padding: '10px',
-          borderRadius: '15px 15px 0 0',
-          minWidth: '100px',
-          textAlign: 'center',
-          left: '50%',
-          transform: 'translate(-50%)',
-          boxShadow: '0 0 3px #000',
-          fontSize: '12px',
-          zIndex: '3',
-          display: 'flex',
-          alignItems: 'center'
+          color: '#fff'
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
-        id: "switchMode",
-        text: "Light/Night Mode",
-        labelSize: "small",
-        onChange: this.switchMode,
-        checked: appearanceName == 'dark'
-      })), /*#__PURE__*/_react["default"].createElement("div", {
+      }, "Themes:"), /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           display: 'flex'
         }

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,8 +11,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Config = require("../Provider/Config");
+
 var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
 
+var _ResizeObserver = _interopRequireDefault(require("../Responsive/ResizeObserver"));
+
 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"); } }
@@ -60,10 +64,53 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
     _this.getDirection = document.getElementsByTagName('html')[0];
     _this.leftRightScreenEdge = _this.leftRightScreenEdge.bind(_assertThisInitialized(_this));
     _this.topBottomScreenEdge = _this.topBottomScreenEdge.bind(_assertThisInitialized(_this));
+    _this.observer = new _ResizeObserver["default"](_this.onResize);
+    _this.isResized = true;
+    _this.tooltipContainerClientRect = {};
+    _this.tooltipContainerEl = {};
     return _this;
   }
 
   _createClass(Tooltip, [{
+    key: "onResize",
+    value: function onResize(sizeOfObservedEl, observedEl) {
+      this.isResized = true;
+    }
+  }, {
+    key: "observeElement",
+    value: function observeElement() {
+      this.tooltipContainerEl = this.getToolTipContainerEl();
+      this.observer.observe(this.tooltipContainerEl);
+    }
+  }, {
+    key: "unObserveElement",
+    value: function unObserveElement() {
+      this.observer.unobserve(this.tooltipContainerEl);
+    }
+  }, {
+    key: "getClientRectOfContEl",
+    value: function getClientRectOfContEl(el) {
+      if (this.isResized) {
+        return this.setClientRectOfContEl(el);
+      }
+
+      return this.tooltipContainerClientRect;
+    }
+  }, {
+    key: "setClientRectOfContEl",
+    value: function setClientRectOfContEl(containerEl) {
+      this.isResized = false;
+      this.tooltipContainerClientRect = containerEl.getBoundingClientRect();
+      return this.tooltipContainerClientRect;
+    }
+  }, {
+    key: "getToolTipContainerEl",
+    value: function getToolTipContainerEl() {
+      var getTooltipContainer = (0, _Config.getLibraryConfig)('getTooltipContainer');
+      var tooltipContainer = typeof getTooltipContainer === 'function' ? getTooltipContainer() : null;
+      return tooltipContainer ? tooltipContainer : document.body;
+    }
+  }, {
     key: "getToolTipDOM",
     value: function getToolTipDOM(el) {
       this.toolTip = el;
@@ -137,9 +184,10 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "handleOver",
-    value: function handleOver(e) {
+    value: function handleOver(e, targetElement) {
       var _this2 = this;
 
+      var containerElement = this.tooltipContainerEl;
       var element = e.target;
       var titleDiv = element.hasAttribute('data-title') || element.hasAttribute('title') ? element : element.closest('[data-title]') || element.closest('[title]');
 
@@ -195,12 +243,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 = this.getClientRectOfContEl(containerElement);
           this.setState({
             title: title,
             isHtml: isHtml,
-            dataTooltipnoArrow: dataTooltipnoArrow
+            dataTooltipnoArrow: dataTooltipnoArrow,
+            dataTooltipWrap: dataTooltipWrap
           }, function () {
             var tooltip = _this2.toolTip;
 
@@ -226,8 +276,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 +530,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 +554,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/lib/common/docStyle.module.css

@@ -260,8 +260,12 @@
   background: #fff;
 }
 [data-mode='dark'] {
-  color: #E2E4E6;
-  background: #232B38;
+  color: #e2e4e6;
+  background: #232b38;
+}
+[data-mode='pureDark'] {
+  color: #e2e4e6;
+  background: #212121;
 }
 
 .baseHue {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-235",
+  "version": "1.0.0-alpha-238",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -31,16 +31,17 @@
     "test": "react-cli test",
     "sstest": "npm run init && react-cli sstest",
     "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": "rm package-lock.json && rm -rf node_modules/ && npm install"
+    "download": "rm package-lock.json && rm -rf node_modules/ && npm install",
+    "expublish": "npm publish --tag experimental-version"
   },
   "devDependencies": {
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/variables": "1.0.0-beta.29",
-    "@zohodesk/icons": "1.0.0-beta.98",
+    "@zohodesk/icons": "1.0.0-beta.105",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/svg": "1.0.0-beta.42"
+    "@zohodesk/svg": "1.0.0-beta.47"
   },
   "dependencies": {
     "hoist-non-react-statics": "3.0.1",
@@ -49,9 +50,9 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.0-beta.98",
+    "@zohodesk/icons": "1.0.0-beta.105",
     "@zohodesk/variables": "1.0.0-beta.29",
-    "@zohodesk/svg": "1.0.0-beta.42",
+    "@zohodesk/svg": "1.0.0-beta.47",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3"