@zohodesk/components 1.6.19 → 1.6.21

package/es/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/es/Select/GroupSelect.js

@@ -591,6 +591,7 @@ export class GroupSelectComponent extends PureComponent {
       htmlId,
       iconOnHover,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       customProps,
       customClass
@@ -631,6 +632,7 @@ export class GroupSelectComponent extends PureComponent {
       dropBox: dropBoxClass = '',
       cardContent: cardContentClass = ''
     } = customClass;
+    const isInitialEmptyOptions = searchStr.length === 0 && revampedGroups.length === 0;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
       "data-id": dataIdSlctComp,
@@ -736,7 +738,7 @@ export class GroupSelectComponent extends PureComponent {
       customClass: {
         customDropBox: dropBoxClass
       }
-    }, isLoading ? /*#__PURE__*/React.createElement(Container, {
+    }, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: style.loader
     }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
@@ -808,7 +810,7 @@ export class GroupSelectComponent extends PureComponent {
       isLoading: isFetchingOptions,
       i18nKeys: i18nKeys,
       htmlId: ariaErrorId
-    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+    }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       align: "both"
     }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)))) : null);

package/es/Select/Select.js

@@ -218,10 +218,11 @@ export class SelectComponent extends Component {
     }
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     let {
       searchStr,
-      selectedValueIndex
+      selectedValueIndex,
+      hoverIndex
     } = this.state;
     let {
       needLocalSearch,
@@ -233,12 +234,13 @@ export class SelectComponent extends Component {
       isSearchClearOnClose
     } = this.props;
 
-    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(() => {
           this.searchInput && this.searchInput.focus({
@@ -799,6 +801,7 @@ export class SelectComponent extends Component {
       autoComplete,
       ariaLabelledby,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       isAbsolutePositioningNeeded,
       positionsOffset,
@@ -843,6 +846,7 @@ export class SelectComponent extends Component {
       dropBox: dropBoxClass = '',
       cardContent: cardContentClass = ''
     } = customClass;
+    const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     const inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
       setAriaId,
       isReadOnly,
@@ -1018,7 +1022,7 @@ export class SelectComponent extends Component {
       customClass: {
         customDropBox: dropBoxClass
       }
-    }, isLoading ? /*#__PURE__*/React.createElement(Container, {
+    }, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: style.loader
     }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, !getChildren ? /*#__PURE__*/React.createElement(Box, {
@@ -1085,7 +1089,7 @@ export class SelectComponent extends Component {
       getCustomEmptyState: getCustomEmptyState ? this.handleGetAddNewOptionText : null,
       i18nKeys: i18nKeys,
       htmlId: ariaErrorId
-    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+    }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       align: "both"
     }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter({

package/es/Select/SelectWithAvatar.js

@@ -170,6 +170,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       htmlId,
       needEffect,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       getTargetRef,
       customProps,
@@ -204,6 +205,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       dropBox: dropBoxClass = '',
       cardContent: cardContentClass = ''
     } = customClass;
+    const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -289,7 +291,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       customClass: {
         customDropBox: dropBoxClass
       }
-    }, isLoading ? /*#__PURE__*/React.createElement(Container, {
+    }, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: style.loader
     }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
@@ -351,7 +353,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       dataId: dataId,
       i18nKeys: i18nKeys,
       htmlId: ariaErrorId
-    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+    }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       align: "both"
     }, /*#__PURE__*/React.createElement(Loader, null))))))) : null);

package/es/Select/SelectWithIcon.js

@@ -357,6 +357,7 @@ class SelectWithIcon extends Component {
       i18nKeys,
       htmlId,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       customProps,
       customClass
@@ -383,6 +384,7 @@ class SelectWithIcon extends Component {
       dropBox: dropBoxClass = '',
       cardContent: cardContentClass = ''
     } = customClass;
+    const isInitialEmptyOptions = searchValue.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
       "data-title": isDisabled ? title : null,
@@ -480,7 +482,7 @@ class SelectWithIcon extends Component {
       customClass: {
         customDropBox: dropBoxClass
       }
-    }, isLoading ? /*#__PURE__*/React.createElement(Container, {
+    }, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: style.loader
     }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
@@ -556,7 +558,7 @@ class SelectWithIcon extends Component {
       dataId: dataId,
       i18nKeys: i18nKeys,
       htmlId: ariaErrorId
-    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+    }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       align: "both"
     }, /*#__PURE__*/React.createElement(Loader, null))))))) : null);

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

@@ -6,7 +6,9 @@ describe('SelectWithIcon', () => {
     const mockOnChange = jest.fn();
     const {
       asFragment
-    } = render( /*#__PURE__*/React.createElement(SelectWithIcon, null));
+    } = render( /*#__PURE__*/React.createElement(SelectWithIcon, {
+      options: []
+    }));
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/es/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"