@zohodesk/components 1.0.0-temp-168 → 1.0.0-temp-169

package/es/DateTime/dateFormatUtils/index.js

@@ -46,7 +46,7 @@ export function getIsNumberTyped(event) {
     shiftKey
   } = event;
 
-  if (keyCode >= 48 && keyCode <= 57 && !ctrlKey && !metaKey && !shiftKey) {
+  if ((keyCode >= 48 && keyCode <= 57 || keyCode >= 96 && keyCode <= 105) && !ctrlKey && !metaKey && !shiftKey) {
     return true;
   }
 

package/es/DateTime/dateFormatUtils/monthChange.js

@@ -1,5 +1,6 @@
 /** * Methods ** */
 import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getMonthDetails, getDayEnd } from './index';
+import { getKeyValue } from '../../utils/Common';
 export function getChangedMonth(values, event, focusOrders, keyActions) {
   const {
     keyCode,
@@ -43,7 +44,7 @@ export function getChangedMonth(values, event, focusOrders, keyActions) {
       newMonth -= 1;
     }
   } else if (getIsNumberTyped(event)) {
-    const keyString = String.fromCharCode(which);
+    const keyString = getKeyValue(event);
     let newValue = isNewType ? keyString : month.toString() + keyString;
     newValue = Number.parseInt(newValue);
 

package/es/DateTime/dateFormatUtils/timeChange.js

@@ -1,6 +1,6 @@
 /** * Methods ** */
 import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getHourDetails, getMinuteDetails, getNoonDetails, getIsNoonValueTyped, getIsEmptyHour } from './index';
-import { getIsEmptyValue } from '../../utils/Common';
+import { getKeyValue, getIsEmptyValue } from '../../utils/Common';
 export function getChangedHour(values, event, focusOrders, keyActions) {
   let {
     is24Hour = false
@@ -43,7 +43,7 @@ export function getChangedHour(values, event, focusOrders, keyActions) {
       newHour -= 1;
     }
   } else if (getIsNumberTyped(event)) {
-    const keyString = String.fromCharCode(which);
+    const keyString = getKeyValue(event);
     let newValue = isNewType ? keyString : hour.toString() + keyString;
     newValue = Number.parseInt(newValue);
 
@@ -118,7 +118,7 @@ export function getChangedMinute(values, event, focusOrders, keyActions) {
       newMinute -= 1;
     }
   } else if (getIsNumberTyped(event)) {
-    const keyString = String.fromCharCode(which);
+    const keyString = getKeyValue(event);
     let newValue = isNewType ? keyString : minute.toString() + keyString;
     newValue = Number.parseInt(newValue);
 
@@ -194,7 +194,7 @@ export function getChangedNoon(values, event, focusOrders
       newNoon = allowedValues[currentNoonIndex - 1];
     }
   } else if (getIsNoonValueTyped(event)) {
-    const keyString = String.fromCharCode(which); // let newValue = isNewType ? keyString : noon.toString() + keyString;
+    const keyString = getKeyValue(event).toUpperCase(); // let newValue = isNewType ? keyString : noon.toString() + keyString;
 
     const newValue = keyString;
     const needChangeNoon = newNoon.indexOf(newValue) === -1 ? true : false;

package/es/DateTime/dateFormatUtils/yearChange.js

@@ -1,5 +1,6 @@
 /** * Methods ** */
 import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getDayEnd, convertYearToTwoDigit, getYearDetails, convertTwoDigitToYear, getIsEmptyYear } from './index';
+import { getKeyValue } from '../../utils/Common';
 export function getChangedYear(values, event, focusOrders, keyActions, _ref) {
   let {
     yearInfo
@@ -65,7 +66,7 @@ export function getChangedYear(values, event, focusOrders, keyActions, _ref) {
       newYear -= 1;
     }
   } else if (getIsNumberTyped(event)) {
-    const keyString = String.fromCharCode(which);
+    const keyString = getKeyValue(event);
     let newValue = isNewType ? keyString : year.toString() + keyString;
     const newValueString = newValue || '';
     newValue = Number.parseInt(newValue);

package/es/DropBox/DropBox.js

@@ -28,11 +28,11 @@ export default function DropBox(props) {
     focusScopeProps = {}
   } = customProps;
   const {
-    autoFocus = true,
-    restoreFocus = true,
-    needArrowLoop = true,
-    needTabLoop = false,
-    enableEnterAction = true
+    needAutoFocus = true,
+    needRestoreFocus = true,
+    needListNavigation = true,
+    needFocusLoop = false,
+    needEnterAction = true
   } = focusScopeProps;
   const {
     direction
@@ -55,11 +55,11 @@ export default function DropBox(props) {
   const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, _extends({
     onClose: onClose,
     elementRef: dropBoxRef,
-    autoFocus: autoFocus,
-    restoreFocus: restoreFocus,
-    needArrowLoop: needArrowLoop,
-    needTabLoop: needTabLoop,
-    enableEnterAction: enableEnterAction
+    needAutoFocus: needAutoFocus,
+    needRestoreFocus: needRestoreFocus,
+    needListNavigation: needListNavigation,
+    needFocusLoop: needFocusLoop,
+    needEnterAction: needEnterAction
   }, focusScopeProps), /*#__PURE__*/React.createElement(DropBoxElement, _extends({
     isModel: isModel,
     direction: direction

package/es/DropDown/DropDown.js

@@ -14,13 +14,7 @@ export default class DropDown extends React.Component {
   }
 
 }
-DropDown.propTypes = DropDown_propTypes; // if (__DOCS__) {
-//   DropDown.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }
-
+DropDown.propTypes = DropDown_propTypes;
 export class DropDownTarget extends React.Component {
   render() {
     let {

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -1004,13 +1004,12 @@ class AdvancedGroupMultiSelect extends React.Component {
       }, /*#__PURE__*/React.createElement(Card, {
         customClass: `${style.box} ${style[`${palette}Box`]}`,
         onScroll: this.handleScroll
-      }, /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
-        needSelectAll: needSelectAll,
+      }, needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
         onSelect: this.handleSelectAll,
         selectAllText: selectAllText,
         suggestions: suggestionOptionIds,
         dataId: dataId
-      })), isDataLoaded ? /*#__PURE__*/React.createElement(CardContent, {
+      })) : null, isDataLoaded ? /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
@@ -1066,11 +1065,14 @@ class AdvancedGroupMultiSelect extends React.Component {
 }
 
 AdvancedGroupMultiSelect.defaultProps = AdvancedGroupMultiSelect_defaultProps;
-AdvancedGroupMultiSelect.propTypes = AdvancedGroupMultiSelect_propTypes; // if (__DOCS__) {
+AdvancedGroupMultiSelect.propTypes = AdvancedGroupMultiSelect_propTypes;
+const AdvancedGroupMultiSelectComponent = Popup(AdvancedGroupMultiSelect);
+AdvancedGroupMultiSelectComponent.defaultProps = AdvancedGroupMultiSelect.defaultProps;
+AdvancedGroupMultiSelectComponent.propTypes = AdvancedGroupMultiSelect.propTypes; // if (__DOCS__) {
 //   AdvancedGroupMultiSelect.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
 //   };
 // }
 
-export default Popup(AdvancedGroupMultiSelect);
+export default AdvancedGroupMultiSelectComponent;

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -514,13 +514,12 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       }, /*#__PURE__*/React.createElement(Card, {
         customClass: style.box,
         onScroll: this.handleScroll
-      }, /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
-        needSelectAll: needSelectAll,
+      }, needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
         onSelect: this.handleSelectAll,
         selectAllText: selectAllText,
         suggestions: suggestions,
         dataId: dataIdSelectAllEle
-      })), /*#__PURE__*/React.createElement(CardContent, {
+      })) : null, /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
@@ -556,7 +555,8 @@ AdvancedMultiSelectComponent.propTypes = AdvancedMultiSelect_propTypes;
 AdvancedMultiSelectComponent.defaultProps = AdvancedMultiSelect_defaultProps;
 AdvancedMultiSelectComponent.displayName = 'AdvancedMultiSelect';
 const AdvancedMultiSelect = Popup(AdvancedMultiSelectComponent);
-AdvancedMultiSelect.defaultProps = AdvancedMultiSelectComponent.defaultProps; // if (__DOCS__) {
+AdvancedMultiSelect.defaultProps = AdvancedMultiSelectComponent.defaultProps;
+AdvancedMultiSelect.propTypes = AdvancedMultiSelectComponent.propTypes; // if (__DOCS__) {
 //   AdvancedMultiSelectComponent.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'

package/es/MultiSelect/MobileHeader/MobileHeader.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import Button from '../../Button/Button';
+import { Container, Box } from '../../Layout';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from './MobileHeader.module.css';
+export default function MobileHeader(props) {
+  let {
+    i18nKeys,
+    onClick,
+    selectedOptions,
+    children
+  } = props;
+  const i18nText = Object.assign({}, i18nKeys, {
+    mobileHeaderText: i18nKeys.mobileHeaderText ? `${i18nKeys.mobileHeaderText}` : `${selectedOptions.length} Selected`
+  });
+  let {
+    mobilePrimaryButtonText,
+    mobileSecondaryButtonText,
+    mobileHeaderText
+  } = i18nText;
+  const showMobileHeader = i18nKeys.mobileHeaderText || !i18nKeys.mobileHeaderText && selectedOptions.length >= 1;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.container
+  }, /*#__PURE__*/React.createElement(Container, {
+    isCover: false,
+    align: "vertical",
+    alignContent: "between",
+    alignBox: "row",
+    className: style.header
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.cardHeading,
+    "data-title": showMobileHeader ? mobileHeaderText : null,
+    flexible: true
+  }, showMobileHeader && mobileHeaderText), /*#__PURE__*/React.createElement(Box, {
+    shrink: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: onClick,
+    isBold: true,
+    size: "medium",
+    text: selectedOptions.length >= 1 ? mobilePrimaryButtonText : mobileSecondaryButtonText,
+    palette: "plainPrimary",
+    customClass: {
+      customButton: style.buttonText
+    },
+    "data-title": mobilePrimaryButtonText
+  }))), children);
+}
+MobileHeader.defaultProps = defaultProps;
+MobileHeader.propTypes = propTypes;

package/es/MultiSelect/MobileHeader/MobileHeader.module.css

@@ -0,0 +1,16 @@
+.container{
+    padding: 0 var(--zd_size20) var(--zd_size12) var(--zd_size20) ;
+  }
+  .header{
+    padding-bottom: var(--zd_size4) ;
+  }
+  .cardHeading{
+    font-size: var(--zd_font_size16) ;
+    color: var(--zdt_multiselect_res_title_text);
+    composes: bold dotted from '../../common/common.module.css'
+  }
+  .buttonText{
+    font-size: var(--zd_font_size15) ;
+    composes: dotted from '../../common/common.module.css';
+    padding: 0 
+  }

package/es/MultiSelect/MobileHeader/props/defaultProps.js

@@ -0,0 +1,7 @@
+export const defaultProps = {
+  selectedOptions: [],
+  i18nKeys: {
+    mobilePrimaryButtonText: 'Done',
+    mobileSecondaryButtonText: 'Close'
+  }
+};

package/es/MultiSelect/MobileHeader/props/propTypes.js

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  i18nKeys: PropTypes.object,
+  onClick: PropTypes.func,
+  selectedOptions: PropTypes.array,
+  children: PropTypes.node
+};

package/es/MultiSelect/MultiSelect.js

@@ -2,20 +2,21 @@
 import React from 'react';
 import { MultiSelect_propTypes } from './props/propTypes';
 import { MultiSelect_defaultProps } from './props/defaultProps';
+import { defaultProps as MobileHeader_defaultProps } from './MobileHeader/props/defaultProps';
 /**** Components ****/
 
 import Popup from '../Popup/Popup';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '../Layout';
-import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
+import Card, { CardContent, CardFooter, CardHeader } from '../Card/Card';
 import SelectedOptions from './SelectedOptions';
 import Suggestions from './Suggestions';
 import EmptyState from './EmptyState';
-import MultiSelectHeader from './MultiSelectHeader';
 import CssProvider from '../Provider/CssProvider';
 import { getUniqueId } from '../Provider/IdProvider';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import MultiSelectHeader from './MultiSelectHeader';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** Icons ****/
 
@@ -27,7 +28,7 @@ import style from './MultiSelect.module.css';
 
 import { debounce, scrollTo, bind, getIsEmptyValue, getSearchString, findScrollEnd } from '../utils/Common.js';
 import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetMultiSelectSelectedOptions as makeGetSelectedOptions, makeObjectConcat, filterSelectedOptions, makeGetIsShowClearIcon } from '../utils/dropDownUtils';
-import { getLibraryConfig } from '../Provider/Config';
+import MobileHeader from './MobileHeader/MobileHeader';
 /* eslint-disable react/forbid-component-props */
 
 /* eslint-disable react/no-unused-prop-types */
@@ -74,7 +75,7 @@ export class MultiSelectComponent extends React.Component {
     this.allSelectedOptionsDetails = normalizedSelectedOptions;
     this.suggestionsOrder = [];
     this._isMounted = false;
-    bind.apply(this, ['handleInputCick', 'handleFilterSuggestions', 'handleKeyDown', 'handleSelectAll', 'handleDeselectAll', 'handleSelectOption', 'handleRemoveOption', 'handleSearch', 'handleClickSelectedOption', 'handleChange', 'handlePopupClose', 'togglePopup', 'selectedOptionRef', 'searchInputRef', 'suggestionContainerRef', 'suggestionItemRef', 'selectedOptionContainerRef', 'handleActive', 'handleInactive', 'handleMouseEnter', 'handleFetchOptions', 'handleFormatOptions', 'handleGetSelectedOptions', 'handleComponentDidUpdate', 'handleInputFocus', 'handleExposedPublicMethods']);
+    bind.apply(this, ['handleInputCick', 'handleFilterSuggestions', 'handleKeyDown', 'handleSelectAll', 'handleDeselectAll', 'handleSelectOption', 'handleRemoveOption', 'handleSearch', 'handleClickSelectedOption', 'handleChange', 'handlePopupClose', 'togglePopup', 'selectedOptionRef', 'searchInputRef', 'suggestionContainerRef', 'suggestionItemRef', 'selectedOptionContainerRef', 'handleActive', 'handleInactive', 'handleMouseEnter', 'handleFetchOptions', 'handleFormatOptions', 'handleGetSelectedOptions', 'handleComponentDidUpdate', 'handleInputFocus', 'handleExposedPublicMethods', 'getSelectionUI', 'moveFocusToTextbox']);
     this.handleSearchOptions = debounce(this.handleSearchOptions.bind(this), searchDebounceTime);
     this.handleScroll = this.handleScroll.bind(this);
     this.handleScrollFuncCall = debounce(this.handleScrollFuncCall.bind(this), 500);
@@ -530,9 +531,7 @@ export class MultiSelectComponent extends React.Component {
       this.handleChange(newSelectedOptions);
     }
 
-    this.searchInput && this.searchInput.focus({
-      preventScroll: true
-    });
+    this.moveFocusToTextbox();
   }
 
   handleMouseEnter(id, val, hoverOptionIndex, e) {
@@ -680,9 +679,7 @@ export class MultiSelectComponent extends React.Component {
     this.setState({
       shiftKeyPressHighLighted: 0
     });
-    this.searchInput && this.searchInput.focus({
-      preventScroll: true
-    });
+    this.moveFocusToTextbox();
   }
 
   handleScroll(e) {
@@ -732,9 +729,7 @@ export class MultiSelectComponent extends React.Component {
 
     onChange && onChange(newSelectedOptions, allSelectedOptionsDetails); // this.setState({ searchStr: '' });
 
-    this.searchInput && this.searchInput.focus({
-      preventScroll: true
-    });
+    this.moveFocusToTextbox();
 
     if (needToCloseOnSelect) {
       togglePopup(e);
@@ -824,7 +819,11 @@ export class MultiSelectComponent extends React.Component {
       isDisabled,
       isReadOnly
     } = this.props;
-    this.searchInput && !isDisabled && !isReadOnly && this.searchInput.focus({
+    !isDisabled && !isReadOnly && this.moveFocusToTextbox();
+  }
+
+  moveFocusToTextbox() {
+    this.searchInput && this.searchInput.focus({
       preventScroll: true
     });
   }
@@ -850,78 +849,46 @@ export class MultiSelectComponent extends React.Component {
     };
   }
 
-  render() {
+  getSelectionUI() {
+    let isResponsive = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     let {
-      isReadOnly,
-      needSelectAll,
-      searchEmptyMessage,
-      emptyMessage,
-      noMoreOptionsMessage,
-      dropBoxSize,
+      size,
+      needBorder,
+      disableAction,
+      borderColor,
       placeHolder,
-      isPopupOpen,
-      isPopupReady,
-      position,
-      defaultDropBoxPosition,
-      selectAllText,
-      getContainerRef,
-      removeClose,
-      isAnimate,
-      animationStyle,
       textBoxSize,
       variant,
-      size,
-      isDisabled,
-      title,
-      needResponsive,
-      dataId,
-      dataSelectorId,
-      isSearching,
-      borderColor,
       textBoxClass,
-      needBorder,
-      disableAction,
-      isBoxPaddingNeed,
-      palette,
       needAutoFocus,
       htmlId,
-      i18nKeys,
-      a11y,
       children,
       customChildrenClass,
-      getFooter,
-      needEffect,
-      disabledOptions,
-      boxSize,
       autoComplete,
-      isLoading
+      a11y,
+      disabledOptions,
+      i18nKeys,
+      isReadOnly,
+      isDisabled,
+      palette,
+      dataId,
+      setAriaId,
+      isPopupOpen,
+      ariaErrorId
     } = this.props;
+    let {
+      isActive,
+      selectedOptions,
+      highLightedSelectOptions,
+      searchStr
+    } = this.state;
     const {
-      clearText = 'Clear all',
-      searchText = 'Searching...'
+      clearText = 'Clear all'
     } = i18nKeys;
     const {
       clearLabel = 'Clear all',
       ariaLabelledby
     } = a11y;
-    i18nKeys = Object.assign({}, i18nKeys, {
-      emptyText: i18nKeys.emptyText || emptyMessage,
-      searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage,
-      noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
-    });
-    const {
-      selectedOptions,
-      searchStr,
-      hoverOption,
-      highLightedSelectOptions,
-      options,
-      isFetchingOptions,
-      isActive,
-      selectedOptionIds
-    } = this.state;
-    const suggestions = this.handleFilterSuggestions();
-    const setAriaId = this.getNextAriaId();
-    const ariaErrorId = this.getNextAriaId();
     let {
       isShowClearIcon: isShowClear
     } = this.getIsShowClearIcon({
@@ -929,17 +896,10 @@ export class MultiSelectComponent extends React.Component {
       disabledOptions
     });
     const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && isShowClear;
-    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 : ''}`,
-      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
-      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
-      "data-title": isDisabled ? title : null,
-      onClick: this.handleInputFocus,
-      "data-selector-id": dataSelectorId
-    }, /*#__PURE__*/React.createElement(Container, {
+    return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${style.container} ${style[size]} ${needBorder ? !disableAction ? style[`borderColor_${borderColor}`] : style.borderColor_transparent : ''} ${isActive && needBorder ? style.active : ''} ${textBoxClass} ${needBorder ? style.hasBorder : ''}`,
+      className: `${style.container} ${style[size]} ${needBorder ? !disableAction ? style[`borderColor_${borderColor}`] : style.borderColor_transparent : ''} ${isActive && needBorder || isResponsive ? style.active : ''} ${textBoxClass} ${needBorder ? style.hasBorder : ''}`,
       eleRef: this.selectedOptionContainerRef,
       wrap: "wrap"
     }, /*#__PURE__*/React.createElement(SelectedOptions, {
@@ -958,14 +918,14 @@ export class MultiSelectComponent extends React.Component {
       shrink: true
     }, /*#__PURE__*/React.createElement("span", {
       className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
-              ${customChildrenClass ? customChildrenClass : ''}`
+          ${customChildrenClass ? customChildrenClass : ''}`
     }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, {
       isDisabled: isDisabled,
       inputRef: this.searchInputRef,
       needBorder: false,
       onBlur: this.handleInactive,
       onChange: this.handleSearch,
-      onClick: this.handleInputCick,
+      onClick: !isResponsive ? this.handleInputCick : undefined,
       onFocus: this.handleActive,
       onKeyDown: this.handleKeyDown,
       autofocus: needAutoFocus,
@@ -1006,7 +966,69 @@ export class MultiSelectComponent extends React.Component {
       size: "15"
     })) : null, children ? /*#__PURE__*/React.createElement(Box, {
       dataId: `${dataId}_children`
-    }, children) : null)))), !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    }, children) : null))));
+  }
+
+  render() {
+    let {
+      isReadOnly,
+      searchEmptyMessage,
+      emptyMessage,
+      noMoreOptionsMessage,
+      dropBoxSize,
+      isPopupOpen,
+      isPopupReady,
+      position,
+      defaultDropBoxPosition,
+      getContainerRef,
+      removeClose,
+      isAnimate,
+      animationStyle,
+      isDisabled,
+      title,
+      needResponsive,
+      dataId,
+      dataSelectorId,
+      isSearching,
+      borderColor,
+      disableAction,
+      isBoxPaddingNeed,
+      palette,
+      i18nKeys,
+      getFooter,
+      needEffect,
+      boxSize,
+      isLoading,
+      selectAllText,
+      needSelectAll
+    } = this.props;
+    const {
+      selectedOptions,
+      searchStr,
+      hoverOption,
+      options,
+      isFetchingOptions,
+      selectedOptionIds
+    } = this.state;
+    const {
+      searchText = 'Searching...'
+    } = i18nKeys;
+    const suggestions = this.handleFilterSuggestions();
+    const setAriaId = this.getNextAriaId();
+    const ariaErrorId = this.getNextAriaId();
+    i18nKeys = Object.assign({}, MobileHeader_defaultProps.i18nKeys, i18nKeys, {
+      emptyText: i18nKeys.emptyText || emptyMessage,
+      searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage,
+      noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
+    });
+    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 : ''}`,
+      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
+      "data-title": isDisabled ? title : null,
+      onClick: this.handleInputFocus,
+      "data-selector-id": dataSelectorId
+    }, this.getSelectionUI(), !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
     }, _ref2 => {
@@ -1038,13 +1060,18 @@ export class MultiSelectComponent extends React.Component {
       }, /*#__PURE__*/React.createElement(Card, {
         customClass: `${style.box} ${style[`${palette}Box`]}`,
         onScroll: this.handleScroll
-      }, /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
-        needSelectAll: needSelectAll,
+      }, tabletMode && /*#__PURE__*/React.createElement(MobileHeader, {
+        selectedOptions: selectedOptions,
+        i18nKeys: i18nKeys,
+        onClick: this.handlePopupClose
+      }, /*#__PURE__*/React.createElement("div", {
+        className: style.effect
+      }, this.getSelectionUI(true))), needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
         onSelect: this.handleSelectAll,
         selectAllText: selectAllText,
         suggestions: suggestions,
         dataId: dataId
-      })), isLoading ? /*#__PURE__*/React.createElement(Container, {
+      })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader
       }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
@@ -1084,13 +1111,7 @@ export class MultiSelectComponent extends React.Component {
 
 }
 MultiSelectComponent.propTypes = MultiSelect_propTypes;
-MultiSelectComponent.defaultProps = MultiSelect_defaultProps; // if (__DOCS__) {
-//   MultiSelectComponent.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }
-
+MultiSelectComponent.defaultProps = MultiSelect_defaultProps;
 MultiSelectComponent.displayName = 'MultiSelect';
 const MultiSelect = Popup(MultiSelectComponent);
 MultiSelect.propTypes = MultiSelectComponent.propTypes;

package/es/MultiSelect/MultiSelect.module.css

@@ -192,10 +192,7 @@
 [dir=rtl] .clearIconSpace {
   padding-left: var(--zd_size37) 
 }
-.search{
-  /*  Variable:Ignore  */
-  padding: 0px 20px;
-}
+
 .more {
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_multiselect_more_text);
@@ -204,4 +201,4 @@
   margin-top: var(--zd_size5) ;
   background-color: var(--zdt_multiselect_delete_bg);
   border: 0;
-}
+}

package/es/MultiSelect/MultiSelectHeader.js

@@ -12,12 +12,11 @@ export default class MultiSelectHeader extends React.PureComponent {
   render() {
     let {
       dataId,
-      needSelectAll,
       onSelect,
       selectAllText,
       suggestions
     } = this.props;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, suggestions.length > 1 && needSelectAll ? /*#__PURE__*/React.createElement(ListItemWithIcon, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, suggestions.length > 1 ? /*#__PURE__*/React.createElement(ListItemWithIcon, {
       autoHover: false,
       value: selectAllText,
       iconName: "ZD-androidd",