@zohodesk/components 1.2.44 → 1.2.46

package/lib/MultiSelect/MultiSelect.js

@@ -273,6 +273,18 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
 
 
       this.handleComponentDidUpdate(prevProps, prevState);
+
+      if (isPopupOpen && isNextOptions && prevProps.selectedOptions.length !== selectedOptions.length) {
+        var _ref2 = this.suggestionContainer || {},
+            scrollHeight = _ref2.scrollHeight,
+            clientHeight = _ref2.clientHeight;
+
+        var isElementScrollable = scrollHeight > clientHeight;
+
+        if (!isElementScrollable) {
+          this.handleScrollFuncCall();
+        }
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -514,9 +526,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
             });
           }
         } else {
-          var _ref2 = isRightArrow ? selectedOptions : selectedOptions.slice(-1),
-              _ref3 = _slicedToArray(_ref2, 1),
-              _newLastHighLightedSelectOption3 = _ref3[0];
+          var _ref3 = isRightArrow ? selectedOptions : selectedOptions.slice(-1),
+              _ref4 = _slicedToArray(_ref3, 1),
+              _newLastHighLightedSelectOption3 = _ref4[0];
 
           this.setState({
             lastHighLightedSelectOption: _newLastHighLightedSelectOption3,
@@ -726,8 +738,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         var to = id && selectedOptions.indexOf(id) >= 0 ? selectedOptions.indexOf(id) : null;
 
         if (to >= 0 && to < from) {
-          var _ref4 = [from, from = to];
-          to = _ref4[0];
+          var _ref5 = [from, from = to];
+          to = _ref5[0];
         }
 
         to += 1;
@@ -877,8 +889,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         });
       }
 
-      var _ref5 = e || {},
-          target = _ref5.target;
+      var _ref6 = e || {},
+          target = _ref6.target;
 
       target && target.setSelectionRange(target, 0);
       var onFocus = this.props.onFocus;

package/lib/Select/GroupSelect.js

@@ -669,6 +669,10 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
       });
+      var _i18nKeys = i18nKeys,
+          TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
+          _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
+          TextBox_ally_label = _i18nKeys$TextBox_all === void 0 ? 'Click to select options' : _i18nKeys$TextBox_all;
       var _this$state3 = this.state,
           selectedId = _this$state3.selectedId,
           hoverIndex = _this$state3.hoverIndex,
@@ -727,6 +731,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           ariaActivedescendant: selectedId,
           ariaOwns: setAriaId
         },
+        i18nKeys: TextBoxIcon_i18n,
         isFocus: isPopupReady,
         autoComplete: false
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

package/lib/v1/AppContainer/AppContainer.js

@@ -17,18 +17,6 @@ var _Layout = require("../Layout");
 
 var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
 
-require("../../common/basic.module.css");
-
-require("@zohodesk/variables/assets/colorVariables.module.css");
-
-require("@zohodesk/variables/assets/dotVariables.module.css");
-
-require("@zohodesk/variables/assets/sizeVariables.module.css");
-
-require("@zohodesk/variables/assets/fontsizeVariables.module.css");
-
-require("@zohodesk/variables/lib/fontFamilyVariables.module.css");
-
 require("@zohodesk/variables/assets/transitionVariables.module.css");
 
 require("@zohodesk/variables/assets/no_transitionVariables.module.css");

package/lib/v1/MultiSelect/MultiSelect.js

@@ -273,6 +273,18 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
 
 
       this.handleComponentDidUpdate(prevProps, prevState);
+
+      if (isPopupOpen && isNextOptions && prevProps.selectedOptions.length !== selectedOptions.length) {
+        var _ref2 = this.suggestionContainer || {},
+            scrollHeight = _ref2.scrollHeight,
+            clientHeight = _ref2.clientHeight;
+
+        var isElementScrollable = scrollHeight > clientHeight;
+
+        if (!isElementScrollable) {
+          this.handleScrollFuncCall();
+        }
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -514,9 +526,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
             });
           }
         } else {
-          var _ref2 = isRightArrow ? selectedOptions : selectedOptions.slice(-1),
-              _ref3 = _slicedToArray(_ref2, 1),
-              _newLastHighLightedSelectOption3 = _ref3[0];
+          var _ref3 = isRightArrow ? selectedOptions : selectedOptions.slice(-1),
+              _ref4 = _slicedToArray(_ref3, 1),
+              _newLastHighLightedSelectOption3 = _ref4[0];
 
           this.setState({
             lastHighLightedSelectOption: _newLastHighLightedSelectOption3,
@@ -727,8 +739,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         var to = id && selectedOptions.indexOf(id) >= 0 ? selectedOptions.indexOf(id) : null;
 
         if (to >= 0 && to < from) {
-          var _ref4 = [from, from = to];
-          to = _ref4[0];
+          var _ref5 = [from, from = to];
+          to = _ref5[0];
         }
 
         to += 1;
@@ -878,8 +890,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         });
       }
 
-      var _ref5 = e || {},
-          target = _ref5.target;
+      var _ref6 = e || {},
+          target = _ref6.target;
 
       target && target.setSelectionRange(target, 0);
       var onFocus = this.props.onFocus;

package/lib/v1/Select/GroupSelect.js

@@ -671,6 +671,10 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
       });
+      var _i18nKeys = i18nKeys,
+          TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
+          _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
+          TextBox_ally_label = _i18nKeys$TextBox_all === void 0 ? 'Click to select options' : _i18nKeys$TextBox_all;
       var _this$state3 = this.state,
           selectedId = _this$state3.selectedId,
           hoverIndex = _this$state3.hoverIndex,
@@ -729,6 +733,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           ariaActivedescendant: selectedId,
           ariaOwns: setAriaId
         },
+        i18nKeys: TextBoxIcon_i18n,
         isFocus: isPopupReady,
         autoComplete: false
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.2.44",
+  "version": "1.2.46",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -71,7 +71,7 @@
     "@zohodesk/a11y": "2.2.6",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/icons": "1.0.60",
+    "@zohodesk/icons": "1.0.61",
     "@zohodesk/svg": "1.1.19",
     "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.0.0",
@@ -86,7 +86,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.60",
+    "@zohodesk/icons": "1.0.61",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/svg": "1.1.19",
     "@zohodesk/virtualizer": "1.0.3",