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

package/lib/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -7,7 +7,6 @@ exports[`Button component Should be render with the basic set customButtonclass
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -22,7 +21,6 @@ exports[`Button component Should be render with the basic set customstatusSize p
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -37,7 +35,6 @@ exports[`Button component Should be render with the basic set customstyle  1`] =
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -52,7 +49,6 @@ exports[`Button component Should be render with the basic set of default props 1
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -68,7 +64,6 @@ exports[`Button component Should be render with the basic set of default props w
     data-selector-id="button"
     data-test-id="buttonComp_disabled"
     disabled=""
-    id="[object Object]"
     type="button"
   >
     Button
@@ -83,7 +78,6 @@ exports[`Button component Should be render with the basic set of default props w
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -98,7 +92,6 @@ exports[`Button component Should be render with the basic set of default props w
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -113,7 +106,6 @@ exports[`Button component Should be render with the basic set of default props w
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -128,7 +120,6 @@ exports[`Button component Should be render with the customstyle with medium  1`]
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -144,7 +135,6 @@ exports[`Button component Should render CustomStatusclassname of buttons - loadi
     data-selector-id="button"
     data-test-id="buttonComp"
     disabled=""
-    id="[object Object]"
     type="button"
   >
     Button
@@ -170,7 +160,6 @@ exports[`Button component Should render CustomStatusclassname of buttons - succe
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -196,7 +185,6 @@ exports[`Button component Should render Sizes of buttons - large 1`] = `
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -211,7 +199,6 @@ exports[`Button component Should render Sizes of buttons - medium 1`] = `
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -226,7 +213,6 @@ exports[`Button component Should render Sizes of buttons - small 1`] = `
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -241,7 +227,6 @@ exports[`Button component Should render Sizes of buttons - xlarge 1`] = `
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -257,7 +242,6 @@ exports[`Button component Should render Status of buttons - loading 1`] = `
     data-selector-id="button"
     data-test-id="buttonComp"
     disabled=""
-    id="[object Object]"
     type="button"
   >
     Button
@@ -283,7 +267,6 @@ exports[`Button component Should render Status of buttons - none 1`] = `
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -298,7 +281,6 @@ exports[`Button component Should render Status of buttons - success 1`] = `
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -324,7 +306,6 @@ exports[`Button component Should render palette of buttons - dangerFilled 1`] =
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -339,7 +320,6 @@ exports[`Button component Should render palette of buttons - info 1`] = `
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -354,7 +334,6 @@ exports[`Button component Should render palette of buttons - plainPrimary 1`] =
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -369,7 +348,6 @@ exports[`Button component Should render palette of buttons - plainSecondary 1`]
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -384,7 +362,6 @@ exports[`Button component Should render palette of buttons - primary 1`] = `
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -399,7 +376,6 @@ exports[`Button component Should render palette of buttons - primaryFilled 1`] =
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -414,7 +390,6 @@ exports[`Button component Should render palette of buttons - secondary 1`] = `
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -429,7 +404,6 @@ exports[`Button component Should render palette of buttons - secondaryFilled 1`]
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -444,7 +418,6 @@ exports[`Button component Should render palette of buttons - successFilled 1`] =
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button
@@ -459,7 +432,6 @@ exports[`Button component Should render palette of buttons - tertiaryFilled 1`]
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
-    id="[object Object]"
     type="button"
   >
     Button

package/lib/Button/props/defaultProps.js

@@ -22,7 +22,6 @@ var defaultProps = {
   text: 'Button',
   customClass: {},
   customProps: {},
-  a11y: {},
-  id: {}
+  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/DateTime/DateTime.module.css

@@ -94,10 +94,12 @@
 }
 
 .daysStr {
+  composes: dotted from '../common/common.module.css';
   font-size: var(--zd_font_size10) ;
   color: var(--zdt_datetime_daystr_text);
   text-transform: uppercase;
   composes: semibold;
+  width: var(--zd_size31) ;
 }
 
 .dateRow {

package/lib/DateTime/DateWidget.js

@@ -1108,7 +1108,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
 DateWidgetComponent.defaultProps = _defaultProps.DateWidget_defaultProps;
 DateWidgetComponent.propTypes = _propTypes.DateWidget_propTypes;
 var DateWidget = (0, _Popup["default"])(DateWidgetComponent);
-DateWidget.defaultProps = DateWidgetComponent.defaultProps; // eslint-disable-next-line no-undef
+DateWidget.defaultProps = DateWidgetComponent.defaultProps;
+DateWidget.propTypes = DateWidgetComponent.propTypes; // eslint-disable-next-line no-undef
 // if (__DOCS__) {
 //   DateWidgetComponent.docs = {
 //     componentGroup: 'Form Elements',

package/lib/DateTime/dateFormatUtils/dayChange.js

@@ -7,6 +7,8 @@ exports.getChangedDay = getChangedDay;
 
 var _index = require("./index");
 
+var _Common = require("../../utils/Common");
+
 /** * Methods ** */
 function getChangedDay(values, event, focusOrders, keyActions) {
   var keyCode = event.keyCode,
@@ -44,7 +46,7 @@ function getChangedDay(values, event, focusOrders, keyActions) {
       newDay -= 1;
     }
   } else if ((0, _index.getIsNumberTyped)(event)) {
-    var keyString = String.fromCharCode(which);
+    var keyString = (0, _Common.getKeyValue)(event);
     var newValue = isNewType ? keyString : day.toString() + keyString;
     newValue = Number.parseInt(newValue);
 

package/lib/DateTime/dateFormatUtils/index.js

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

package/lib/DateTime/dateFormatUtils/monthChange.js

@@ -7,6 +7,8 @@ exports.getChangedMonth = getChangedMonth;
 
 var _index = require("./index");
 
+var _Common = require("../../utils/Common");
+
 /** * Methods ** */
 function getChangedMonth(values, event, focusOrders, keyActions) {
   var keyCode = event.keyCode,
@@ -48,7 +50,7 @@ function getChangedMonth(values, event, focusOrders, keyActions) {
       newMonth -= 1;
     }
   } else if ((0, _index.getIsNumberTyped)(event)) {
-    var keyString = String.fromCharCode(which);
+    var keyString = (0, _Common.getKeyValue)(event);
     var newValue = isNewType ? keyString : month.toString() + keyString;
     newValue = Number.parseInt(newValue);
 

package/lib/DateTime/dateFormatUtils/timeChange.js

@@ -61,7 +61,7 @@ function getChangedHour(values, event, focusOrders, keyActions) {
       newHour -= 1;
     }
   } else if ((0, _index.getIsNumberTyped)(event)) {
-    var keyString = String.fromCharCode(which);
+    var keyString = (0, _Common.getKeyValue)(event);
     var newValue = isNewType ? keyString : hour.toString() + keyString;
     newValue = Number.parseInt(newValue);
 
@@ -132,7 +132,7 @@ function getChangedMinute(values, event, focusOrders, keyActions) {
       newMinute -= 1;
     }
   } else if ((0, _index.getIsNumberTyped)(event)) {
-    var keyString = String.fromCharCode(which);
+    var keyString = (0, _Common.getKeyValue)(event);
     var newValue = isNewType ? keyString : minute.toString() + keyString;
     newValue = Number.parseInt(newValue);
 
@@ -206,7 +206,7 @@ function getChangedNoon(values, event, focusOrders
       newNoon = allowedValues[currentNoonIndex - 1];
     }
   } else if ((0, _index.getIsNoonValueTyped)(event)) {
-    var keyString = String.fromCharCode(which); // let newValue = isNewType ? keyString : noon.toString() + keyString;
+    var keyString = (0, _Common.getKeyValue)(event).toUpperCase(); // let newValue = isNewType ? keyString : noon.toString() + keyString;
 
     var newValue = keyString;
     var needChangeNoon = newNoon.indexOf(newValue) === -1 ? true : false;

package/lib/DateTime/dateFormatUtils/yearChange.js

@@ -7,6 +7,8 @@ exports.getChangedYear = getChangedYear;
 
 var _index = require("./index");
 
+var _Common = require("../../utils/Common");
+
 /** * Methods ** */
 function getChangedYear(values, event, focusOrders, keyActions, _ref) {
   var yearInfo = _ref.yearInfo;
@@ -64,7 +66,7 @@ function getChangedYear(values, event, focusOrders, keyActions, _ref) {
       newYear -= 1;
     }
   } else if ((0, _index.getIsNumberTyped)(event)) {
-    var keyString = String.fromCharCode(which);
+    var keyString = (0, _Common.getKeyValue)(event);
     var newValue = isNewType ? keyString : year.toString() + keyString;
     var newValueString = newValue || '';
     newValue = Number.parseInt(newValue);

package/lib/DropBox/DropBox.js

@@ -50,16 +50,16 @@ function DropBox(props) {
       customProps = props.customProps;
   var _customProps$focusSco = customProps.focusScopeProps,
       focusScopeProps = _customProps$focusSco === void 0 ? {} : _customProps$focusSco;
-  var _focusScopeProps$auto = focusScopeProps.autoFocus,
-      autoFocus = _focusScopeProps$auto === void 0 ? true : _focusScopeProps$auto,
-      _focusScopeProps$rest = focusScopeProps.restoreFocus,
-      restoreFocus = _focusScopeProps$rest === void 0 ? true : _focusScopeProps$rest,
-      _focusScopeProps$need = focusScopeProps.needArrowLoop,
-      needArrowLoop = _focusScopeProps$need === void 0 ? true : _focusScopeProps$need,
-      _focusScopeProps$need2 = focusScopeProps.needTabLoop,
-      needTabLoop = _focusScopeProps$need2 === void 0 ? false : _focusScopeProps$need2,
-      _focusScopeProps$enab = focusScopeProps.enableEnterAction,
-      enableEnterAction = _focusScopeProps$enab === void 0 ? true : _focusScopeProps$enab;
+  var _focusScopeProps$need = focusScopeProps.needAutoFocus,
+      needAutoFocus = _focusScopeProps$need === void 0 ? true : _focusScopeProps$need,
+      _focusScopeProps$need2 = focusScopeProps.needRestoreFocus,
+      needRestoreFocus = _focusScopeProps$need2 === void 0 ? true : _focusScopeProps$need2,
+      _focusScopeProps$need3 = focusScopeProps.needListNavigation,
+      needListNavigation = _focusScopeProps$need3 === void 0 ? true : _focusScopeProps$need3,
+      _focusScopeProps$need4 = focusScopeProps.needFocusLoop,
+      needFocusLoop = _focusScopeProps$need4 === void 0 ? false : _focusScopeProps$need4,
+      _focusScopeProps$need5 = focusScopeProps.needEnterAction,
+      needEnterAction = _focusScopeProps$need5 === void 0 ? true : _focusScopeProps$need5;
 
   var _ref = DropBoxContext || {},
       direction = _ref.direction;
@@ -82,11 +82,11 @@ function DropBox(props) {
   var dropBoxEle = needFocusScope ? /*#__PURE__*/_react["default"].createElement(_FocusScope["default"], _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["default"].createElement(_DropBoxElement["default"], _extends({
     isModel: isModel,
     direction: direction

package/lib/DropDown/DropDown.js

@@ -67,12 +67,7 @@ var DropDown = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = DropDown;
-DropDown.propTypes = _propTypes.DropDown_propTypes; // if (__DOCS__) {
-//   DropDown.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }
+DropDown.propTypes = _propTypes.DropDown_propTypes;
 
 var DropDownTarget = /*#__PURE__*/function (_React$Component2) {
   _inherits(DropDownTarget, _React$Component2);

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
@@ -1153,13 +1152,15 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 AdvancedGroupMultiSelect.defaultProps = _defaultProps.AdvancedGroupMultiSelect_defaultProps;
-AdvancedGroupMultiSelect.propTypes = _propTypes.AdvancedGroupMultiSelect_propTypes; // if (__DOCS__) {
+AdvancedGroupMultiSelect.propTypes = _propTypes.AdvancedGroupMultiSelect_propTypes;
+var AdvancedGroupMultiSelectComponent = (0, _Popup["default"])(AdvancedGroupMultiSelect);
+AdvancedGroupMultiSelectComponent.defaultProps = AdvancedGroupMultiSelect.defaultProps;
+AdvancedGroupMultiSelectComponent.propTypes = AdvancedGroupMultiSelect.propTypes; // if (__DOCS__) {
 //   AdvancedGroupMultiSelect.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
 //   };
 // }
 
-var _default = (0, _Popup["default"])(AdvancedGroupMultiSelect);
-
+var _default = AdvancedGroupMultiSelectComponent;
 exports["default"] = _default;

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
@@ -621,7 +620,8 @@ AdvancedMultiSelectComponent.propTypes = _propTypes.AdvancedMultiSelect_propType
 AdvancedMultiSelectComponent.defaultProps = _defaultProps.AdvancedMultiSelect_defaultProps;
 AdvancedMultiSelectComponent.displayName = 'AdvancedMultiSelect';
 var AdvancedMultiSelect = (0, _Popup["default"])(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/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;