@zohodesk/components 1.0.0-temp-252.4 → 1.0.0-temp-256.1

package/es/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`MobileHeader rendering the defult props 1`] = `
 <DocumentFragment>
@@ -6,25 +6,25 @@ exports[`MobileHeader rendering the defult props 1`] = `
     class="container"
   >
     <div
-      class="header flex rowdir alignBetween vCenter"
+      class="flex row alignContent_spaceBetween alignItems_center header"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="cardHeading grow basis shrinkOff"
+        class="flexible basis_zero noShrink cardHeading"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="shrinkOn"
+        class="shrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <button
-          class="buttonText bold plainprimary medium"
+          class="bold plainprimary medium buttonText"
           data-id="buttonComp"
           data-selector-id="button"
           data-test-id="buttonComp"

package/es/MultiSelect/MultiSelect.js

@@ -27,6 +27,7 @@ import isMobilePopover from "../DropBox/utils/isMobilePopover";
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./MultiSelect.module.css";
 /**** Methods ****/
 
@@ -190,7 +191,8 @@ export class MultiSelectComponent extends React.Component {
 
   componentDidUpdate(prevProps, prevState) {
     const {
-      searchStr
+      searchStr,
+      hoverOption
     } = this.state;
     const {
       needLocalSearch,
@@ -201,9 +203,10 @@ export class MultiSelectComponent extends React.Component {
     } = this.props; //handle dropbox open & close
 
     if (prevProps.isPopupOpen !== isPopupOpen) {
-      isPopupOpen && onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
-
-      if (!isPopupOpen) {
+      if (isPopupOpen) {
+        this.scrollToHighlightedIndex();
+        onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
+      } else {
         this.setState({
           hoverOption: 0
         });
@@ -212,7 +215,7 @@ export class MultiSelectComponent extends React.Component {
       }
     }
 
-    if (isPopupOpen) {
+    if (prevState.hoverOption !== hoverOption && isPopupOpen) {
       this.scrollToHighlightedIndex();
     } //When suggestions length less than 5, getNextOptions function call
 
@@ -613,11 +616,7 @@ export class MultiSelectComponent extends React.Component {
     }
   }
 
-  handleFetchOptions() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
+  handleFetchOptions(...args) {
     const [APICall, searchStr] = args;
     const {
       isFetchingOptions
@@ -683,9 +682,7 @@ export class MultiSelectComponent extends React.Component {
     });
   }
 
-  handleClickSelectedOption() {
-    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    let e = arguments.length > 1 ? arguments[1] : undefined;
+  handleClickSelectedOption(id = '', e) {
     const {
       selectedOptions
     } = this.props;
@@ -761,9 +758,7 @@ export class MultiSelectComponent extends React.Component {
     isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);
   }
 
-  handleChange() {
-    let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    let e = arguments.length > 1 ? arguments[1] : undefined;
+  handleChange(selectedOptions = [], e) {
     const {
       optionsNormalize
     } = this.state;
@@ -912,8 +907,7 @@ export class MultiSelectComponent extends React.Component {
     this.suggestionContainer && refFunc(this.suggestionContainer);
   }
 
-  getSelectionUI() {
-    let isResponsive = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  getSelectionUI(isResponsive = false) {
     let {
       size,
       needBorder,
@@ -972,7 +966,7 @@ export class MultiSelectComponent extends React.Component {
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${style.container} ${style[size]} ${needBorder ? !disableAction ? style[`borderColor_${borderColor}`] : style.borderColor_transparent : ''} ${isActive && needBorder || isResponsive || isEditable && isFocus && needBorder ? style.active : ''} ${textBoxClass} ${needBorder ? style.hasBorder : ''}`,
+      className: `${style.container} ${style[size]} ${needBorder ? !disableAction ? style[`borderColor_${borderColor}`] : style.borderColor_transparent : ''} ${isActive && needBorder || isResponsive || isEditable && isFocus && needBorder ? style.active : ''} ${needBorder ? style.hasBorder : ''} ${textBoxClass} `,
       eleRef: this.selectedOptionContainerRef,
       wrap: "wrap"
     }, /*#__PURE__*/React.createElement(SelectedOptions, {
@@ -995,8 +989,8 @@ export class MultiSelectComponent extends React.Component {
       adjust: true,
       shrink: true
     }, /*#__PURE__*/React.createElement("span", {
-      className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
-          ${customChildrenClass ? customChildrenClass : ''}`
+      className: cn(` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
+          ${customChildrenClass ? customChildrenClass : ''}`)
     }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       isDisabled: isDisabled,
       inputRef: this.searchInputRef,
@@ -1095,6 +1089,7 @@ export class MultiSelectComponent extends React.Component {
       needEffect,
       boxSize,
       isLoading,
+      shouldUseInternalLoader,
       selectAllText,
       needSelectAll,
       isVirtualizerEnabled,
@@ -1125,8 +1120,9 @@ export class MultiSelectComponent extends React.Component {
     let {
       SuggestionsProps
     } = customProps;
+    const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
+      className: cn(`${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`),
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
@@ -1168,13 +1164,13 @@ export class MultiSelectComponent extends React.Component {
       i18nKeys: i18nKeys,
       onClick: this.handlePopupClose
     }, /*#__PURE__*/React.createElement("div", {
-      className: style.effect
+      className: cn(style.effect)
     }, this.getSelectionUI(true))) : null, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
       onSelect: this.handleSelectAll,
       selectAllText: selectAllText,
       suggestions: suggestions,
       dataId: dataId
-    })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
+    })) : null, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: style.loader
     }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
@@ -1182,7 +1178,7 @@ export class MultiSelectComponent extends React.Component {
       customClass: !isModel && dropBoxSize ? style[dropBoxSize] : '',
       eleRef: this.suggestionContainerRef
     }, isSearching ? /*#__PURE__*/React.createElement("div", {
-      className: style[palette]
+      className: cn(style[palette])
     }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
       a11y: a11yProps,
       needBorder: false,
@@ -1210,7 +1206,7 @@ export class MultiSelectComponent extends React.Component {
       palette: palette,
       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/MultiSelect/MultiSelectWithAvatar.js

@@ -23,6 +23,7 @@ import MultiSelectHeader from "./MultiSelectHeader";
 import isMobilePopover from "../DropBox/utils/isMobilePopover";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./MultiSelect.module.css";
 import MobileHeader from "./MobileHeader/MobileHeader";
 /*eslint-disable  react/sort-prop-types*/
@@ -96,6 +97,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       isBoxPaddingNeed,
       needEffect,
       isLoading,
+      shouldUseInternalLoader,
       keepSelectedOptions,
       customProps,
       limit
@@ -124,8 +126,9 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     const ariaErrorId = this.getNextAriaId();
     const popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
     let isModel = isMobilePopover(needResponsive);
+    const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
+      className: cn(` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`),
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
@@ -165,13 +168,13 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       i18nKeys: i18nKeys,
       onClick: this.handlePopupClose
     }, /*#__PURE__*/React.createElement("div", {
-      className: style.effect
+      className: cn(style.effect)
     }, this.getSelectionUI(true)))) : null, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
       onSelect: this.handleSelectAll,
       selectAllText: selectAllText,
       suggestions: suggestions,
       dataId: dataId
-    })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
+    })) : null, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: style.loader
     }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
@@ -204,7 +207,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       palette: palette,
       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/MultiSelect/Suggestions.js

@@ -14,12 +14,11 @@ import { Container, Box } from "../Layout";
 import { DUMMY_OBJECT, DUMMY_ARRAY } from "../utils/Common";
 import { renderNode } from '@zohodesk/utils';
 
-function SuggestionsVirtualizerContainer(_ref) {
-  let {
-    eleRef,
-    children,
-    setVirtualizerContainerRefFunction
-  } = _ref;
+function SuggestionsVirtualizerContainer({
+  eleRef,
+  children,
+  setVirtualizerContainerRefFunction
+}) {
   useMemo(() => {
     typeof setVirtualizerContainerRefFunction === 'function' && setVirtualizerContainerRefFunction(eleRef);
   }, [eleRef, setVirtualizerContainerRefFunction]);
@@ -33,12 +32,11 @@ export default class Suggestions extends React.PureComponent {
     this.renderVirtualizerSuggestionListItem = this.renderVirtualizerSuggestionListItem.bind(this);
   }
 
-  renderSuggestionList(_ref2) {
-    let {
-      suggestion,
-      index,
-      ref
-    } = _ref2;
+  renderSuggestionList({
+    suggestion,
+    index,
+    ref
+  }) {
     const {
       getRef,
       hoverOption,
@@ -170,11 +168,10 @@ export default class Suggestions extends React.PureComponent {
     }));
   }
 
-  renderVirtualizerSuggestionListItem(_ref3) {
-    let {
-      index,
-      ref
-    } = _ref3;
+  renderVirtualizerSuggestionListItem({
+    index,
+    ref
+  }) {
     const {
       suggestions
     } = this.props;

package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap

@@ -1,35 +1,34 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper  effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="advancedGroupMultiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="container medium  hasBorder borderColor_default  flex cover rowdir wrap vCenter"
+      class="flex fullSize row wrap alignItems_center container medium hasBorder borderColor_default"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="wrapper grow basisAuto shrinkOn"
+        class="flexible basis_auto shrink wrapper"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-              "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           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"
@@ -41,7 +40,7 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
               aria-haspopup="true"
               aria-owns="1"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -52,13 +51,13 @@ exports[`AdvancedGroupMultiSelect 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"