@zohodesk/components 1.2.1 → 1.2.3

package/coverage/Buttongroup/props/propTypes.js.html

@@ -100,7 +100,7 @@ export const propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-11T17:46:20.575Z
+                at 2023-08-17T12:51:49.215Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/coverage-final.json

@@ -1,8 +1,8 @@
-{"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Button/Button.js": {"path":"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Button/Button.js","statementMap":{"0":{"start":{"line":27,"column":6},"end":{"line":27,"column":11}},"1":{"start":{"line":29,"column":21},"end":{"line":29,"column":51}},"2":{"start":{"line":31,"column":63},"end":{"line":34,"column":4}},"3":{"start":{"line":36,"column":20},"end":{"line":36,"column":40}},"4":{"start":{"line":38,"column":2},"end":{"line":60,"column":4}},"5":{"start":{"line":63,"column":0},"end":{"line":63,"column":35}},"6":{"start":{"line":65,"column":0},"end":{"line":65,"column":29}}},"fnMap":{"0":{"name":"Button","decl":{"start":{"line":13,"column":24},"end":{"line":13,"column":30}},"loc":{"start":{"line":13,"column":38},"end":{"line":61,"column":1}},"line":13}},"branchMap":{"0":{"loc":{"start":{"line":41,"column":15},"end":{"line":41,"column":55}},"type":"cond-expr","locations":[{"start":{"line":41,"column":26},"end":{"line":41,"column":46}},{"start":{"line":41,"column":49},"end":{"line":41,"column":55}}],"line":41},"1":{"loc":{"start":{"line":42,"column":20},"end":{"line":42,"column":60}},"type":"cond-expr","locations":[{"start":{"line":42,"column":31},"end":{"line":42,"column":51}},{"start":{"line":42,"column":54},"end":{"line":42,"column":60}}],"line":42},"2":{"loc":{"start":{"line":43,"column":16},"end":{"line":43,"column":53}},"type":"binary-expr","locations":[{"start":{"line":43,"column":16},"end":{"line":43,"column":24}},{"start":{"line":43,"column":28},"end":{"line":43,"column":53}}],"line":43},"3":{"loc":{"start":{"line":51,"column":7},"end":{"line":51,"column":33}},"type":"cond-expr","locations":[{"start":{"line":51,"column":18},"end":{"line":51,"column":26}},{"start":{"line":51,"column":29},"end":{"line":51,"column":33}}],"line":51},"4":{"loc":{"start":{"line":52,"column":7},"end":{"line":58,"column":7}},"type":"binary-expr","locations":[{"start":{"line":52,"column":7},"end":{"line":52,"column":29}},{"start":{"line":52,"column":33},"end":{"line":52,"column":47}},{"start":{"line":53,"column":8},"end":{"line":57,"column":14}}],"line":52}},"s":{"0":28,"1":28,"2":28,"3":28,"4":28,"5":1,"6":1},"f":{"0":28},"b":{"0":[1,27],"1":[1,27],"2":[28,27],"3":[0,28],"4":[28,4,4]},"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"310a4b7515bf58d5b5c5a6c3385c20b18de908f5"}
+{"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Button/Button.js": {"path":"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Button/Button.js","statementMap":{"0":{"start":{"line":29,"column":6},"end":{"line":29,"column":11}},"1":{"start":{"line":31,"column":21},"end":{"line":31,"column":51}},"2":{"start":{"line":33,"column":63},"end":{"line":36,"column":4}},"3":{"start":{"line":38,"column":20},"end":{"line":38,"column":40}},"4":{"start":{"line":40,"column":2},"end":{"line":64,"column":4}},"5":{"start":{"line":67,"column":0},"end":{"line":67,"column":35}},"6":{"start":{"line":69,"column":0},"end":{"line":69,"column":29}}},"fnMap":{"0":{"name":"Button","decl":{"start":{"line":13,"column":24},"end":{"line":13,"column":30}},"loc":{"start":{"line":13,"column":38},"end":{"line":65,"column":1}},"line":13}},"branchMap":{"0":{"loc":{"start":{"line":43,"column":15},"end":{"line":43,"column":55}},"type":"cond-expr","locations":[{"start":{"line":43,"column":26},"end":{"line":43,"column":46}},{"start":{"line":43,"column":49},"end":{"line":43,"column":55}}],"line":43},"1":{"loc":{"start":{"line":44,"column":20},"end":{"line":44,"column":60}},"type":"cond-expr","locations":[{"start":{"line":44,"column":31},"end":{"line":44,"column":51}},{"start":{"line":44,"column":54},"end":{"line":44,"column":60}}],"line":44},"2":{"loc":{"start":{"line":45,"column":16},"end":{"line":45,"column":53}},"type":"binary-expr","locations":[{"start":{"line":45,"column":16},"end":{"line":45,"column":24}},{"start":{"line":45,"column":28},"end":{"line":45,"column":53}}],"line":45},"3":{"loc":{"start":{"line":55,"column":7},"end":{"line":55,"column":33}},"type":"cond-expr","locations":[{"start":{"line":55,"column":18},"end":{"line":55,"column":26}},{"start":{"line":55,"column":29},"end":{"line":55,"column":33}}],"line":55},"4":{"loc":{"start":{"line":56,"column":7},"end":{"line":62,"column":7}},"type":"binary-expr","locations":[{"start":{"line":56,"column":7},"end":{"line":56,"column":29}},{"start":{"line":56,"column":33},"end":{"line":56,"column":47}},{"start":{"line":57,"column":8},"end":{"line":61,"column":14}}],"line":56}},"s":{"0":28,"1":28,"2":28,"3":28,"4":28,"5":1,"6":1},"f":{"0":28},"b":{"0":[1,27],"1":[1,27],"2":[28,27],"3":[0,28],"4":[28,4,4]},"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"76b2d3caf7dc65598f732a4d9c32b9e1d639ea0b"}
 ,"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Button/css/Button.module.css": {"path":"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Button/css/Button.module.css","statementMap":{"0":{"start":{"line":1,"column":0},"end":{"line":45,"column":1}}},"fnMap":{},"branchMap":{},"s":{"0":1},"f":{},"b":{},"inputSourceMap":null,"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"757cb7a39d2ebd54158da84009e5f917f03507cf"}
 ,"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Button/css/cssJSLogic.js": {"path":"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Button/css/cssJSLogic.js","statementMap":{"0":{"start":{"line":4,"column":90},"end":{"line":4,"column":95}},"1":{"start":{"line":6,"column":72},"end":{"line":6,"column":83}},"2":{"start":{"line":8,"column":21},"end":{"line":8,"column":42}},"3":{"start":{"line":9,"column":20},"end":{"line":9,"column":40}},"4":{"start":{"line":11,"column":20},"end":{"line":21,"column":4}},"5":{"start":{"line":23,"column":26},"end":{"line":28,"column":4}},"6":{"start":{"line":30,"column":25},"end":{"line":36,"column":4}},"7":{"start":{"line":38,"column":2},"end":{"line":42,"column":4}}},"fnMap":{"0":{"name":"cssJSLogic","decl":{"start":{"line":3,"column":24},"end":{"line":3,"column":34}},"loc":{"start":{"line":3,"column":53},"end":{"line":43,"column":1}},"line":3}},"branchMap":{"0":{"loc":{"start":{"line":6,"column":8},"end":{"line":6,"column":25}},"type":"default-arg","locations":[{"start":{"line":6,"column":23},"end":{"line":6,"column":25}}],"line":6},"1":{"loc":{"start":{"line":6,"column":27},"end":{"line":6,"column":44}},"type":"default-arg","locations":[{"start":{"line":6,"column":42},"end":{"line":6,"column":44}}],"line":6},"2":{"loc":{"start":{"line":6,"column":46},"end":{"line":6,"column":67}},"type":"default-arg","locations":[{"start":{"line":6,"column":65},"end":{"line":6,"column":67}}],"line":6},"3":{"loc":{"start":{"line":16,"column":21},"end":{"line":16,"column":46}},"type":"binary-expr","locations":[{"start":{"line":16,"column":21},"end":{"line":16,"column":35}},{"start":{"line":16,"column":39},"end":{"line":16,"column":46}}],"line":16},"4":{"loc":{"start":{"line":17,"column":33},"end":{"line":17,"column":60}},"type":"binary-expr","locations":[{"start":{"line":17,"column":33},"end":{"line":17,"column":47}},{"start":{"line":17,"column":51},"end":{"line":17,"column":60}}],"line":17},"5":{"loc":{"start":{"line":18,"column":27},"end":{"line":18,"column":53}},"type":"binary-expr","locations":[{"start":{"line":18,"column":27},"end":{"line":18,"column":41}},{"start":{"line":18,"column":45},"end":{"line":18,"column":53}}],"line":18},"6":{"loc":{"start":{"line":19,"column":42},"end":{"line":19,"column":79}},"type":"binary-expr","locations":[{"start":{"line":19,"column":42},"end":{"line":19,"column":56}},{"start":{"line":19,"column":60},"end":{"line":19,"column":68}},{"start":{"line":19,"column":72},"end":{"line":19,"column":79}}],"line":19},"7":{"loc":{"start":{"line":20,"column":20},"end":{"line":20,"column":62}},"type":"binary-expr","locations":[{"start":{"line":20,"column":20},"end":{"line":20,"column":36}},{"start":{"line":20,"column":40},"end":{"line":20,"column":62}}],"line":20}},"s":{"0":28,"1":28,"2":28,"3":28,"4":28,"5":28,"6":28,"7":28},"f":{"0":28},"b":{"0":[27],"1":[26],"2":[27],"3":[28,27],"4":[28,27],"5":[28,27],"6":[28,27,0],"7":[28,27]},"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"83ad9e91c5b73e460148a0b9ce6a7423978e4318"}
-,"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Button/props/defaultProps.js": {"path":"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Button/props/defaultProps.js","statementMap":{"0":{"start":{"line":3,"column":28},"end":{"line":18,"column":1}}},"fnMap":{},"branchMap":{},"s":{"0":1},"f":{},"b":{},"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"30f00c83c709a3736fe88c4ca4c861619f9978bc"}
-,"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Button/props/propTypes.js": {"path":"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Button/props/propTypes.js","statementMap":{"0":{"start":{"line":3,"column":25},"end":{"line":37,"column":1}}},"fnMap":{},"branchMap":{},"s":{"0":1},"f":{},"b":{},"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"f3de2e041524dc4074e4f39435d99dd99f4b2f6f"}
+,"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Button/props/defaultProps.js": {"path":"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Button/props/defaultProps.js","statementMap":{"0":{"start":{"line":3,"column":28},"end":{"line":19,"column":1}}},"fnMap":{},"branchMap":{},"s":{"0":1},"f":{},"b":{},"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"29f8cd18b9979ea28a3be540b99ec7f94040c961"}
+,"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Button/props/propTypes.js": {"path":"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Button/props/propTypes.js","statementMap":{"0":{"start":{"line":3,"column":25},"end":{"line":39,"column":1}}},"fnMap":{},"branchMap":{},"s":{"0":1},"f":{},"b":{},"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"f758df13036a2ae8cbf9709be232a12d7d885745"}
 ,"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Buttongroup/Buttongroup.js": {"path":"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Buttongroup/Buttongroup.js","statementMap":{"0":{"start":{"line":9,"column":82},"end":{"line":9,"column":92}},"1":{"start":{"line":10,"column":19},"end":{"line":10,"column":21}},"2":{"start":{"line":11,"column":4},"end":{"line":15,"column":9}},"3":{"start":{"line":13,"column":23},"end":{"line":13,"column":67}},"4":{"start":{"line":14,"column":8},"end":{"line":14,"column":32}},"5":{"start":{"line":16,"column":4},"end":{"line":25,"column":6}},"6":{"start":{"line":29,"column":0},"end":{"line":29,"column":40}},"7":{"start":{"line":30,"column":0},"end":{"line":30,"column":34}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":8,"column":2},"end":{"line":8,"column":3}},"loc":{"start":{"line":8,"column":11},"end":{"line":26,"column":3}},"line":8},"1":{"name":"(anonymous_1)","decl":{"start":{"line":12,"column":23},"end":{"line":12,"column":24}},"loc":{"start":{"line":12,"column":34},"end":{"line":15,"column":7}},"line":12}},"branchMap":{"0":{"loc":{"start":{"line":11,"column":4},"end":{"line":15,"column":8}},"type":"binary-expr","locations":[{"start":{"line":11,"column":4},"end":{"line":11,"column":12}},{"start":{"line":12,"column":6},"end":{"line":15,"column":8}}],"line":11},"1":{"loc":{"start":{"line":18,"column":58},"end":{"line":18,"column":88}},"type":"cond-expr","locations":[{"start":{"line":18,"column":72},"end":{"line":18,"column":83}},{"start":{"line":18,"column":86},"end":{"line":18,"column":88}}],"line":18}},"s":{"0":8,"1":8,"2":8,"3":21,"4":21,"5":8,"6":1,"7":1},"f":{"0":8,"1":21},"b":{"0":[8,7],"1":[1,7]},"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"106d519187109ea7b47a3fb793a79dd3a570ef24"}
 ,"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Buttongroup/Buttongroup.module.css": {"path":"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Buttongroup/Buttongroup.module.css","statementMap":{"0":{"start":{"line":1,"column":0},"end":{"line":10,"column":1}}},"fnMap":{},"branchMap":{},"s":{"0":1},"f":{},"b":{},"inputSourceMap":null,"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"b19a853c5ee33a27215725a96c4e52b463fb5a91"}
 ,"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Buttongroup/props/defaultProps.js": {"path":"/Users/bharathi-zt93/git/library/jsapps/dot/components/src/Buttongroup/props/defaultProps.js","statementMap":{"0":{"start":{"line":1,"column":28},"end":{"line":6,"column":1}}},"fnMap":{},"branchMap":{},"s":{"0":1},"f":{},"b":{},"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"f95e882a39620189c3ae2039de92b99d750f1b9b"}

package/coverage/index.html

@@ -176,7 +176,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-11T17:46:20.575Z
+                at 2023-08-17T12:51:49.215Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/coverage/utils/dummyFunction.js.html

@@ -73,7 +73,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-11T17:46:20.575Z
+                at 2023-08-17T12:51:49.215Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/utils/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-08-11T17:46:20.575Z
+                at 2023-08-17T12:51:49.215Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/es/Button/Button.js

@@ -27,7 +27,9 @@ export default function Button(props) {
     title,
     dataSelectorId,
     customProps,
-    customStyle
+    customStyle,
+    a11y,
+    id
   } = props;
   const finalStyle = mergeStyle(style, customStyle);
   const {
@@ -49,7 +51,9 @@ export default function Button(props) {
     type: "button",
     ref: getRef,
     "data-selector-id": dataSelectorId
-  }, customProps), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
+  }, customProps, a11y, {
+    id: id
+  }), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
     className: finalStyle.overlay
   }, /*#__PURE__*/React.createElement("div", {
     className: loaderParentClass

package/es/Button/props/defaultProps.js

@@ -13,5 +13,6 @@ export const defaultProps = {
   status: 'none',
   text: 'Button',
   customClass: {},
-  customProps: {}
+  customProps: {},
+  a11y: {}
 };

package/es/Button/props/propTypes.js

@@ -20,6 +20,8 @@ export const propTypes = {
     customStatusSize: PropTypes.string
   }),
   customStyle: PropTypes.object,
-  customProps: PropTypes.object
+  customProps: PropTypes.object,
+  id: PropTypes.string,
+  a11y: PropTypes.object
 };
 export default propTypes;

package/es/Heading/Heading.module.css

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

package/es/Label/Label.js

@@ -21,8 +21,12 @@ export default class Label extends React.Component {
       dataSelectorId,
       variant,
       customClass,
-      id
+      id,
+      a11y = {}
     } = this.props;
+    const {
+      tabIndex
+    } = a11y;
     return /*#__PURE__*/React.createElement("label", {
       className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
           ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass} `,
@@ -32,7 +36,8 @@ export default class Label extends React.Component {
       "data-test-id": dataId,
       "data-selector-id": dataSelectorId,
       onClick: onClick,
-      id: id
+      id: id,
+      tabIndex: tabIndex
     }, text);
   }
 

package/es/Label/props/propTypes.js

@@ -12,5 +12,8 @@ export const propTypes = {
   type: PropTypes.oneOf(['title', 'subtitle']),
   variant: PropTypes.oneOf(['primary', 'default']),
   customClass: PropTypes.string,
+  a11y: PropTypes.shape({
+    tabIndex: PropTypes.string
+  }),
   id: PropTypes.string
 };

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

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

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;