@zohodesk/components 1.6.19 → 1.6.21

package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap

@@ -31,7 +31,7 @@ exports[`ResponsiveDropBox rendering the defult props 1`] = `
         />
       </div>
       <div
-        class="flex coldir"
+        class="flex column"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"

package/lib/Select/GroupSelect.js

@@ -669,6 +669,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           htmlId = _this$props9.htmlId,
           iconOnHover = _this$props9.iconOnHover,
           isLoading = _this$props9.isLoading,
+          shouldUseInternalLoader = _this$props9.shouldUseInternalLoader,
           dataSelectorId = _this$props9.dataSelectorId,
           customProps = _this$props9.customProps,
           customClass = _this$props9.customClass;
@@ -708,6 +709,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
           _customClass$cardCont = customClass.cardContent,
           cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
+      var isInitialEmptyOptions = searchStr.length === 0 && revampedGroups.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
         "data-id": dataIdSlctComp,
@@ -813,7 +815,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           customClass: {
             customDropBox: dropBoxClass
           }
-        }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _SelectModule["default"].loader
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -883,7 +885,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           isLoading: isFetchingOptions,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId
-        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           isCover: false,
           align: "both"
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)));

package/lib/Select/Select.js

@@ -274,12 +274,13 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
+    value: function componentDidUpdate(prevProps, prevState) {
       var _this2 = this;
 
       var _this$state = this.state,
           searchStr = _this$state.searchStr,
-          selectedValueIndex = _this$state.selectedValueIndex;
+          selectedValueIndex = _this$state.selectedValueIndex,
+          hoverIndex = _this$state.hoverIndex;
       var _this$props = this.props,
           needLocalSearch = _this$props.needLocalSearch,
           onDropBoxClose = _this$props.onDropBoxClose,
@@ -289,12 +290,13 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           isPopupOpen = _this$props.isPopupOpen,
           isSearchClearOnClose = _this$props.isSearchClearOnClose;
 
-      if (isPopupOpen) {
+      if ((prevState.hoverIndex !== hoverIndex || prevState.selectedValueIndex !== selectedValueIndex) && isPopupOpen) {
         this.scrollToHighlightedIndex();
       }
 
       if (prevProps.isPopupOpen !== isPopupOpen) {
         if (isPopupOpen) {
+          this.scrollToHighlightedIndex();
           onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
           setTimeout(function () {
             _this2.searchInput && _this2.searchInput.focus({
@@ -849,6 +851,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           autoComplete = _this$props11.autoComplete,
           ariaLabelledby = _this$props11.ariaLabelledby,
           isLoading = _this$props11.isLoading,
+          shouldUseInternalLoader = _this$props11.shouldUseInternalLoader,
           dataSelectorId = _this$props11.dataSelectorId,
           isAbsolutePositioningNeeded = _this$props11.isAbsolutePositioningNeeded,
           positionsOffset = _this$props11.positionsOffset,
@@ -894,6 +897,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
           _customClass$cardCont = customClass.cardContent,
           cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
+      var isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
       var inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
         setAriaId: setAriaId,
         isReadOnly: isReadOnly,
@@ -1067,7 +1071,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           customClass: {
             customDropBox: dropBoxClass
           }
-        }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _SelectModule["default"].loader
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !getChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -1133,7 +1137,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           getCustomEmptyState: getCustomEmptyState ? _this7.handleGetAddNewOptionText : null,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId
-        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           isCover: false,
           align: "both"
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter({

package/lib/Select/SelectWithAvatar.js

@@ -221,6 +221,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           htmlId = _this$props.htmlId,
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
+          shouldUseInternalLoader = _this$props.shouldUseInternalLoader,
           dataSelectorId = _this$props.dataSelectorId,
           getTargetRef = _this$props.getTargetRef,
           customProps = _this$props.customProps,
@@ -253,6 +254,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
           _customClass$cardCont = customClass.cardContent,
           cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
+      var isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, "  ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -338,7 +340,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           customClass: {
             customDropBox: dropBoxClass
           }
-        }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _MultiSelectModule["default"].loader
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -400,7 +402,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           dataId: dataId,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId
-        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           isCover: false,
           align: "both"
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))))));

package/lib/Select/SelectWithIcon.js

@@ -431,6 +431,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           i18nKeys = _this$props7.i18nKeys,
           htmlId = _this$props7.htmlId,
           isLoading = _this$props7.isLoading,
+          shouldUseInternalLoader = _this$props7.shouldUseInternalLoader,
           dataSelectorId = _this$props7.dataSelectorId,
           customProps = _this$props7.customProps,
           customClass = _this$props7.customClass;
@@ -457,6 +458,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
           _customClass$cardCont = customClass.cardContent,
           cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
+      var isInitialEmptyOptions = searchValue.length === 0 && options.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : ''),
         "data-title": isDisabled ? title : null,
@@ -553,7 +555,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           customClass: {
             customDropBox: dropBoxClass
           }
-        }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _SelectModule["default"].loader
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -627,7 +629,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           dataId: dataId,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId
-        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           isCover: false,
           align: "both"
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))))));

package/lib/Select/__tests__/SelectWithIcon.spec.js

@@ -12,7 +12,9 @@ describe('SelectWithIcon', function () {
   test('rendering the defult props', function () {
     var mockOnChange = jest.fn();
 
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectWithIcon["default"], null)),
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectWithIcon["default"], {
+      options: []
+    })),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();

package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap

@@ -14,11 +14,11 @@ exports[`GroupSelect rendering the defult props 1`] = `
       data-test-id="GroupSelect"
     >
       <div
-        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+        class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -43,25 +43,25 @@ exports[`GroupSelect rendering the defult props 1`] = `
           />
         </div>
         <div
-          class="iconContainer  shrinkOff"
+          class="noShrink iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex cover rowdir"
+            class="flex fullSize row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="icon  shrinkOff"
+              class="noShrink icon"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover coldir both"
+                class="flex fullSize column alignItems_center justifyContent_center"
                 data-id="downIcon"
                 data-selector-id="container"
                 data-test-id="downIcon"