@zohodesk/components 1.2.1 → 1.2.3

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",

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -4,28 +4,25 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { MultiSelectWithAvatar_propTypes } from './props/propTypes';
 import { MultiSelectWithAvatar_defaultProps } from './props/defaultProps';
+import { defaultProps as MobileHeader_defaultProps } from './MobileHeader/props/defaultProps';
 /**** Components ****/
 
 import { MultiSelectComponent } from './MultiSelect';
 import Popup from '../Popup/Popup';
-import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '../Layout';
 import Card, { CardContent, 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 Loader from '@zohodesk/svg/lib/Loader/Loader';
-/**** Icons ****/
-
-import { Icon } from '@zohodesk/icons';
+import MultiSelectHeader from './MultiSelectHeader';
 /**** CSS ****/
 
 import style from './MultiSelect.module.css';
+import MobileHeader from './MobileHeader/MobileHeader';
 /*eslint-disable  react/sort-prop-types*/
 
 /* eslint-disable react/forbid-component-props */
@@ -76,7 +73,6 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       emptyMessage,
       noMoreOptionsMessage,
       dropBoxSize,
-      placeHolder,
       isPopupOpen,
       isPopupReady,
       position,
@@ -86,24 +82,15 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       removeClose,
       isAnimate,
       animationStyle,
-      textBoxSize,
-      variant,
-      size,
       isDisabled,
       title,
       dataId,
       dataSelectorId,
       needResponsive,
       borderColor,
-      textBoxClass,
-      needBorder,
       disableAction,
       palette,
-      htmlId,
       i18nKeys,
-      a11y,
-      children,
-      customChildrenClass,
       isBoxPaddingNeed,
       needEffect,
       isLoading,
@@ -111,16 +98,9 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       customProps
     } = this.props;
     let {
-      TextBoxProps = {},
       SuggestionsProps = {}
     } = customProps;
-    const {
-      clearText = 'Clear all'
-    } = i18nKeys;
-    const {
-      clearLabel = 'Clear all'
-    } = a11y;
-    i18nKeys = Object.assign({}, i18nKeys, {
+    i18nKeys = Object.assign({}, MobileHeader_defaultProps.i18nKeys, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage,
       noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
@@ -129,17 +109,14 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       selectedOptions,
       searchStr,
       hoverOption,
-      highLightedSelectOptions,
       options,
       isFetchingOptions,
-      isActive,
       selectedOptionIds
     } = this.state;
     const suggestions = this.handleFilterSuggestions();
     const setAriaId = this.getNextAriaId();
     const ariaErrorId = this.getNextAriaId();
     const popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
-    const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
     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}`,
@@ -147,79 +124,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus,
       "data-selector-id": dataSelectorId
-    }, /*#__PURE__*/React.createElement(Container, {
-      align: "vertical",
-      alignBox: "row",
-      className: `${style.container}  ${style[size]} ${needBorder ? style[`borderColor_${borderColor}`] : ''} ${isActive && needBorder ? style.active : ''} ${textBoxClass ? textBoxClass : ''} ${needBorder ? style.hasBorder : ''}`,
-      eleRef: this.selectedOptionContainerRef,
-      wrap: "wrap"
-    }, /*#__PURE__*/React.createElement(SelectedOptions, {
-      selectedOptions: selectedOptions,
-      highLightedSelectOptions: highLightedSelectOptions,
-      isReadOnly: isReadOnly,
-      getRef: this.selectedOptionRef,
-      onRemove: this.handleRemoveOption,
-      onSelect: this.handleClickSelectedOption,
-      size: size,
-      palette: palette
-    }), /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.wrapper,
-      adjust: true,
-      shrink: true
-    }, /*#__PURE__*/React.createElement("span", {
-      className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
-               ${customChildrenClass ? customChildrenClass : ''}`
-    }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, {
-      isDisabled: isDisabled,
-      inputRef: this.searchInputRef,
-      needBorder: false,
-      onBlur: this.handleInactive,
-      onChange: this.handleSearch,
-      onClick: this.handleInputCick,
-      onFocus: this.handleActive,
-      onKeyDown: this.handleKeyDown,
-      placeHolder: selectedOptions.length >= 1 ? '' : placeHolder,
-      size: textBoxSize,
-      value: searchStr,
-      variant: variant,
-      dataId: `${dataId}_textBox`,
-      isReadOnly: isReadOnly,
-      tabindex: isDisabled && '-1',
-      htmlId: htmlId,
-      a11y: {
-        ariaExpanded: popUpState ? true : false,
-        ariaHaspopup: true,
-        role: 'combobox',
-        ariaControls: setAriaId,
-        ariaOwns: setAriaId,
-        ariaDescribedby: ariaErrorId
-      },
-      customClass: {
-        customTBoxWrap: style.custmInputWrapper
-      },
-      autoComplete: false,
-      customProps: {
-        TextBoxProps: TextBoxProps
-      }
-    }, /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      alignBox: "row",
-      align: "vertical",
-      className: style.iconContainer
-    }, children ? /*#__PURE__*/React.createElement(Box, {
-      dataId: `${dataId}_children`
-    }, children) : null, isShowClearIcon ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.delete} ${style[`${palette}Delete`]}`,
-      dataId: `${dataId}_clearIcon`,
-      "data-title": clearText,
-      onClick: this.handleDeselectAll,
-      tagName: "button",
-      "aria-label": clearLabel
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-delete",
-      size: "15"
-    })) : null)))), popUpState ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    }, this.getSelectionUI(), popUpState ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
     }, _ref2 => {
@@ -250,13 +155,18 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       }, /*#__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(React.Fragment, null, /*#__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, {
@@ -300,13 +210,5 @@ MultiSelectWithAvatarComponent.defaultProps = MultiSelectWithAvatar_defaultProps
 MultiSelectWithAvatarComponent.displayName = 'MultiSelectWithAvatar';
 const MultiSelectWithAvatar = Popup(MultiSelectWithAvatarComponent);
 MultiSelectWithAvatar.defaultProps = MultiSelectWithAvatarComponent.defaultProps;
-MultiSelectWithAvatar.propTypes = MultiSelectWithAvatarComponent.propTypes; // if (__DOCS__) {
-//   MultiSelectWithAvatarComponent.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-//   // eslint-disable-next-line react/forbid-foreign-prop-types
-//   MultiSelectWithAvatar.propTypes = MultiSelectWithAvatarComponent.propTypes;
-// }
-
+MultiSelectWithAvatar.propTypes = MultiSelectWithAvatarComponent.propTypes;
 export default MultiSelectWithAvatar;

package/es/MultiSelect/props/defaultProps.js

@@ -107,7 +107,9 @@ export const MultiSelect_defaultProps = {
   boxSize: 'default',
   isLoading: false,
   dataSelectorId: 'multiSelect',
-  keepSelectedOptions: false
+  keepSelectedOptions: false,
+  selectedOptionsCount: 0,
+  cardHeaderName: ''
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'

package/es/MultiSelect/props/propTypes.js

@@ -62,7 +62,8 @@ export const AdvancedGroupMultiSelect_propTypes = {
   onChange: PropTypes.func,
   needToCloseOnSelect: PropTypes.func,
   searchStr: PropTypes.string,
-  children: PropTypes.node
+  children: PropTypes.node,
+  dataSelectorId: PropTypes.string
 };
 export const AdvancedMultiSelect_propTypes = {
   id: PropTypes.string.isRequired,
@@ -164,7 +165,7 @@ export const MultiSelect_propTypes = {
   borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
   closePopupOnly: PropTypes.func,
   dataId: PropTypes.string,
-  defaultDropBoxPosition: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
   disableAction: PropTypes.bool,
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
   emptyMessage: PropTypes.string.isRequired,
@@ -197,7 +198,6 @@ export const MultiSelect_propTypes = {
   needBorder: PropTypes.bool,
   needLocalSearch: PropTypes.bool,
   needResponsive: PropTypes.bool,
-  needSelectAll: PropTypes.bool,
   needToCloseOnSelect: PropTypes.bool,
   //For Group multiSelect
   noMoreOptionsMessage: PropTypes.string,
@@ -219,7 +219,6 @@ export const MultiSelect_propTypes = {
   removeClose: PropTypes.func,
   searchDebounceTime: PropTypes.number,
   searchEmptyMessage: PropTypes.string,
-  selectAllText: PropTypes.string,
   selectedOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
   size: PropTypes.oneOf(['medium', 'xmedium']),
   textBoxClass: PropTypes.string,
@@ -239,77 +238,30 @@ export const MultiSelect_propTypes = {
   boxSize: PropTypes.string,
   isLoading: PropTypes.bool,
   dataSelectorId: PropTypes.string,
-  keepSelectedOptions: PropTypes.bool
+  keepSelectedOptions: PropTypes.bool,
+  needSelectAll: PropTypes.bool,
+  selectAllText: PropTypes.string,
+  setAriaId: PropTypes.string,
+  ariaErrorId: PropTypes.string
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
-  needSelectAll: PropTypes.bool,
   onSelect: PropTypes.func,
   selectAllText: PropTypes.string,
   suggestions: PropTypes.array
 };
 export const MultiSelectWithAvatar_propTypes = {
-  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
   options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     photoURL: PropTypes.string
   }))]).isRequired,
-  placeHolder: PropTypes.string,
-  emptyMessage: PropTypes.string.isRequired,
-  valueField: PropTypes.string,
-  textField: PropTypes.string,
   imageField: PropTypes.string,
-  isReadOnly: PropTypes.bool,
-  needSelectAll: PropTypes.bool,
-  selectAllText: PropTypes.string,
-  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
-  searchEmptyMessage: PropTypes.string,
-  noMoreOptionsMessage: PropTypes.string,
-  isAnimate: PropTypes.bool,
-  animationStyle: PropTypes.string,
-  size: PropTypes.oneOf(['medium', 'xmedium']),
-  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
-  variant: PropTypes.string,
-  isDisabled: PropTypes.bool,
-  title: PropTypes.string,
-  needResponsive: PropTypes.bool,
-  dataId: PropTypes.string,
-  borderColor: PropTypes.oneOf(['transparent', 'default']),
-  textBoxClass: PropTypes.string,
-  needBorder: PropTypes.bool,
-  disableAction: PropTypes.bool,
-  palette: PropTypes.oneOf(['default', 'dark']),
-  htmlId: PropTypes.string,
-  isBoxPaddingNeed: PropTypes.bool,
-  needEffect: PropTypes.bool,
-  keepSelectedOptions: PropTypes.bool,
   customProps: PropTypes.shape({
     SuggestionsProps: PropTypes.object,
     DropBoxProps: PropTypes.object
   }),
-
-  /**** Popup props ****/
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  removeClose: PropTypes.func,
-  position: PropTypes.string,
-  getContainerRef: PropTypes.func,
-  i18nKeys: PropTypes.shape({
-    clearText: PropTypes.string,
-    loadingText: PropTypes.string,
-    emptyText: PropTypes.string,
-    noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
-  }),
-  a11y: PropTypes.shape({
-    clearLabel: PropTypes.string
-  }),
-  children: PropTypes.node,
-  customChildrenClass: PropTypes.string,
-  disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string
+  ...MultiSelect_propTypes
 };
 export const SelectedOptions_propTypes = {
   getRef: PropTypes.func,

package/es/TextBox/TextBox.js

@@ -6,7 +6,7 @@ import { propTypes } from './props/propTypes';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['xmedium', 'medium', 'small', 'default', 'primary', 'secondary'] }] */
 
 import style from './TextBox.module.css';
-export default class Textbox extends React.PureComponent {
+export default class TextBox extends React.PureComponent {
   constructor(props) {
     super(props);
     this.onChange = this.onChange.bind(this);
@@ -171,8 +171,8 @@ export default class Textbox extends React.PureComponent {
   }
 
 }
-Textbox.defaultProps = defaultProps;
-Textbox.propTypes = propTypes; // if (__DOCS__) {
+TextBox.defaultProps = defaultProps;
+TextBox.propTypes = propTypes; // if (__DOCS__) {
 //   Textbox.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide',

package/es/deprecated/PortalLayer/props/propTypes.js

@@ -7,7 +7,9 @@ export const propTypes = {
   portalId: PropTypes.string,
   renderChildren: PropTypes.func,
   saveGetFunction: PropTypes.func,
-  saveUpdateFunction: PropTypes.func
+  saveUpdateFunction: PropTypes.func,
+  isActive: PropTypes.bool,
+  name: PropTypes.string
 };
 export const RefElement_propTypes = {
   Element: PropTypes.node,

package/lib/Button/Button.js

@@ -40,7 +40,9 @@ function Button(props) {
       title = props.title,
       dataSelectorId = props.dataSelectorId,
       customProps = props.customProps,
-      customStyle = props.customStyle;
+      customStyle = props.customStyle,
+      a11y = props.a11y,
+      id = props.id;
   var finalStyle = (0, _utils.mergeStyle)(_ButtonModule["default"], customStyle);
 
   var _cssJSLogic = (0, _cssJSLogic2["default"])({
@@ -62,7 +64,9 @@ function Button(props) {
     type: "button",
     ref: getRef,
     "data-selector-id": dataSelectorId
-  }, customProps), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
+  }, customProps, a11y, {
+    id: id
+  }), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
     className: finalStyle.overlay
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: loaderParentClass

package/lib/Button/props/defaultProps.js

@@ -21,6 +21,7 @@ var defaultProps = {
   status: 'none',
   text: 'Button',
   customClass: {},
-  customProps: {}
+  customProps: {},
+  a11y: {}
 };
 exports.defaultProps = defaultProps;

package/lib/Button/props/propTypes.js

@@ -30,7 +30,9 @@ var propTypes = {
     customStatusSize: _propTypes["default"].string
   }),
   customStyle: _propTypes["default"].object,
-  customProps: _propTypes["default"].object
+  customProps: _propTypes["default"].object,
+  id: _propTypes["default"].string,
+  a11y: _propTypes["default"].object
 };
 exports.propTypes = propTypes;
 var _default = propTypes;

package/lib/Heading/Heading.module.css

@@ -1,5 +1,5 @@
 .reset {
-  font-size: initial ;
+  font-size: inherit ;
   font-weight: initial;
   margin: initial ;
 }

package/lib/Label/Label.js

@@ -66,7 +66,10 @@ var Label = /*#__PURE__*/function (_React$Component) {
           dataSelectorId = _this$props.dataSelectorId,
           variant = _this$props.variant,
           customClass = _this$props.customClass,
-          id = _this$props.id;
+          id = _this$props.id,
+          _this$props$a11y = _this$props.a11y,
+          a11y = _this$props$a11y === void 0 ? {} : _this$props$a11y;
+      var tabIndex = a11y.tabIndex;
       return /*#__PURE__*/_react["default"].createElement("label", {
         className: "".concat(_LabelModule["default"].label, " ").concat(_LabelModule["default"][type], " ").concat(_LabelModule["default"][size], " ").concat(_LabelColorsModule["default"][palette], " ").concat(_LabelModule["default"]["font_".concat(variant)], "\n          ").concat(clipped ? _LabelModule["default"].dotted : '', " ").concat(onClick ? _LabelModule["default"].pointer : _LabelModule["default"].cursor, " ").concat(customClass, " "),
         htmlFor: htmlFor,
@@ -75,7 +78,8 @@ var Label = /*#__PURE__*/function (_React$Component) {
         "data-test-id": dataId,
         "data-selector-id": dataSelectorId,
         onClick: onClick,
-        id: id
+        id: id,
+        tabIndex: tabIndex
       }, text);
     }
   }]);

package/lib/Label/props/propTypes.js

@@ -22,6 +22,9 @@ var propTypes = {
   type: _propTypes["default"].oneOf(['title', 'subtitle']),
   variant: _propTypes["default"].oneOf(['primary', 'default']),
   customClass: _propTypes["default"].string,
+  a11y: _propTypes["default"].shape({
+    tabIndex: _propTypes["default"].string
+  }),
   id: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -1090,13 +1090,12 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
           customClass: "".concat(_MultiSelectModule["default"].box, " ").concat(_MultiSelectModule["default"]["".concat(palette, "Box")]),
           onScroll: _this5.handleScroll
-        }, /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
-          needSelectAll: needSelectAll,
+        }, needSelectAll ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
           onSelect: _this5.handleSelectAll,
           selectAllText: selectAllText,
           suggestions: suggestionOptionIds,
           dataId: dataId
-        })), isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+        })) : null, isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           shrink: true,
           customClass: !tabletMode && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
           eleRef: _this5.suggestionContainerRef

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -575,13 +575,12 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
           customClass: _MultiSelectModule["default"].box,
           onScroll: _this4.handleScroll
-        }, /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
-          needSelectAll: needSelectAll,
+        }, needSelectAll ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
           onSelect: _this4.handleSelectAll,
           selectAllText: selectAllText,
           suggestions: suggestions,
           dataId: dataIdSelectAllEle
-        })), /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+        })) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           shrink: true,
           customClass: !tabletMode && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
           eleRef: _this4.suggestionContainerRef

package/lib/MultiSelect/MobileHeader/MobileHeader.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = MobileHeader;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("../../Button/Button"));
+
+var _Layout = require("../../Layout");
+
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
+var _MobileHeaderModule = _interopRequireDefault(require("./MobileHeader.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function MobileHeader(props) {
+  var i18nKeys = props.i18nKeys,
+      onClick = props.onClick,
+      selectedOptions = props.selectedOptions,
+      children = props.children;
+  var i18nText = Object.assign({}, i18nKeys, {
+    mobileHeaderText: i18nKeys.mobileHeaderText ? "".concat(i18nKeys.mobileHeaderText) : "".concat(selectedOptions.length, " Selected")
+  });
+  var mobilePrimaryButtonText = i18nText.mobilePrimaryButtonText,
+      mobileSecondaryButtonText = i18nText.mobileSecondaryButtonText,
+      mobileHeaderText = i18nText.mobileHeaderText;
+  var showMobileHeader = i18nKeys.mobileHeaderText || !i18nKeys.mobileHeaderText && selectedOptions.length >= 1;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _MobileHeaderModule["default"].container
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    isCover: false,
+    align: "vertical",
+    alignContent: "between",
+    alignBox: "row",
+    className: _MobileHeaderModule["default"].header
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _MobileHeaderModule["default"].cardHeading,
+    "data-title": showMobileHeader ? mobileHeaderText : null,
+    flexible: true
+  }, showMobileHeader && mobileHeaderText), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: onClick,
+    isBold: true,
+    size: "medium",
+    text: selectedOptions.length >= 1 ? mobilePrimaryButtonText : mobileSecondaryButtonText,
+    palette: "plainPrimary",
+    customClass: {
+      customButton: _MobileHeaderModule["default"].buttonText
+    },
+    "data-title": mobilePrimaryButtonText
+  }))), children);
+}
+
+MobileHeader.defaultProps = _defaultProps.defaultProps;
+MobileHeader.propTypes = _propTypes.propTypes;

package/lib/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/lib/MultiSelect/MobileHeader/props/defaultProps.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  selectedOptions: [],
+  i18nKeys: {
+    mobilePrimaryButtonText: 'Done',
+    mobileSecondaryButtonText: 'Close'
+  }
+};
+exports.defaultProps = defaultProps;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  i18nKeys: _propTypes["default"].object,
+  onClick: _propTypes["default"].func,
+  selectedOptions: _propTypes["default"].array,
+  children: _propTypes["default"].node
+};
+exports.propTypes = propTypes;