@zohodesk/components 1.0.0-alpha-264 → 1.0.0-alpha-266

package/lib/Button/props/propTypes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = void 0;
+exports.propTypes = exports["default"] = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var propTypes = {
@@ -27,6 +27,9 @@ var propTypes = {
     customStatus: _propTypes["default"].string,
     customStatusSize: _propTypes["default"].string
   }),
+  customStyle: _propTypes["default"].object,
   customProps: _propTypes["default"].object
 };
-exports.propTypes = propTypes;
+exports.propTypes = propTypes;
+var _default = propTypes;
+exports["default"] = _default;

package/lib/Buttongroup/Buttongroup.module.css

@@ -7,6 +7,7 @@
   --buttongroup_border_style: solid;
   --buttongroup_border_color: var(--zdt_buttongroup_default_border);
 }
+
 .buttonGroup {
   composes: varClass;
   composes: cboth from '../common/common.module.css';
@@ -19,71 +20,88 @@
 }
 
 .footer {
-  --buttongroup_box_shadow: 0 -4px 5px -3px var(--zdt_buttongroup_footer_box_shadow);
+  --buttongroup_box_shadow: var(--zd_bs_buttongroup_footer);
 }
 
 [dir=ltr] .footer {
-  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60)/*rtl: var(--zd_size20) var(--zd_size60) var(--zd_size20) 0*/;
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60)
+    /*rtl: var(--zd_size20) var(--zd_size60) var(--zd_size20) 0*/
+  ;
 }
 
 [dir=rtl] .footer {
-  --buttongroup_padding: var(--zd_size20) var(--zd_size60) var(--zd_size20) 0;
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60)  ;
 }
+
 .header {
   --buttongroup_padding: var(--zd_size12) var(--zd_size20);
   --buttongroup_border_width: 0 0 1px 0;
 }
-[dir=ltr] .tab > div button:first-child {
+
+[dir=ltr] .tab>div button:first-child {
   border-radius: 5px 0 0 5px;
 }
-[dir=rtl] .tab > div button:first-child {
+
+[dir=rtl] .tab>div button:first-child {
   border-radius: 0 5px 5px 0;
 }
-[dir=ltr] .tab > div button:last-child {
+
+[dir=ltr] .tab>div button:last-child {
   border-radius: 0 5px 5px 0;
 }
-[dir=rtl] .tab > div button:last-child {
+
+[dir=rtl] .tab>div button:last-child {
   border-radius: 5px 0 0 5px;
 }
 
 .alignleft {
   composes: fleft from '../common/common.module.css';
 }
+
 .alignright {
   composes: fright from '../common/common.module.css';
 }
+
 .aligncenter {
   composes: tcenter from '../common/common.module.css';
 }
-[dir=ltr] .alignleft > button:first-child {
+
+[dir=ltr] .alignleft>button:first-child {
   margin-left: 0;
 }
-[dir=rtl] .alignleft > button:first-child {
+
+[dir=rtl] .alignleft>button:first-child {
   margin-right: 0;
 }
-[dir=ltr] .alignleft > button {
+
+[dir=ltr] .alignleft>button {
   margin-left: var(--zd_size15);
 }
-[dir=rtl] .alignleft > button {
+
+[dir=rtl] .alignleft>button {
   margin-right: var(--zd_size15);
 }
 
-[dir=ltr] .alignright > button:last-child {
+[dir=ltr] .alignright>button:last-child {
   margin-right: 0;
 }
 
-[dir=rtl] .alignright > button:last-child {
+[dir=rtl] .alignright>button:last-child {
   margin-left: 0;
 }
-[dir=ltr] .alignright > button {
+
+[dir=ltr] .alignright>button {
   margin-right: var(--zd_size15);
 }
-[dir=rtl] .alignright > button {
+
+[dir=rtl] .alignright>button {
   margin-left: var(--zd_size15);
 }
-[dir=ltr] .aligncenter > button {
+
+[dir=ltr] .aligncenter>button {
   margin-right: var(--zd_size15);
 }
-[dir=rtl] .aligncenter > button {
+
+[dir=rtl] .aligncenter>button {
   margin-left: var(--zd_size15);
-}
+}

package/lib/DateTime/DateTime.js

@@ -19,7 +19,6 @@ var _common = require("../utils/datetime/common");
 var _Common = require("../utils/Common");
 var _constants = require("./constants");
 var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
-var _CustomResponsive = require("../Responsive/CustomResponsive");
 var _Layout = require("../Layout");
 var _dateFormatUtils = require("./dateFormatUtils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -74,25 +73,6 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
     _this.handleYearViewToggle = _this.handleYearViewToggle.bind(_assertThisInitialized(_this));
     var _props$i18nKeys$ampmT = props.i18nKeys.ampmText,
       ampmText = _props$i18nKeys$ampmT === void 0 ? _constants.ampmTextDefault : _props$i18nKeys$ampmT;
-    var _getHourDetails = (0, _dateFormatUtils.getHourDetails)(props.is24Hour),
-      hourStart = _getHourDetails.startPoint,
-      hourEnd = _getHourDetails.endPoint;
-    _this.hourSuggestions = function () {
-      var hourArr = [];
-      for (var hour = hourStart; hour <= hourEnd; hour++) {
-        var htxt = hour < 10 ? "0".concat(hour) : "".concat(hour);
-        hourArr.push(htxt);
-      }
-      return hourArr;
-    }();
-    _this.minSuggestions = function () {
-      var minArr = [];
-      for (var minute = 0; minute <= 59; minute++) {
-        var mtxt = minute < 10 ? "0".concat(minute) : "".concat(minute);
-        minArr.push(mtxt);
-      }
-      return minArr;
-    }();
     _this.ampmSuggestions = function () {
       var ampmSuggestions = [];
       ampmText.forEach(function (text, index) {
@@ -175,7 +155,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
       year = dateObj.getFullYear();
       hours = defaultHour ? defaultHour : dateObj.getHours();
       mins = !(0, _Common.getIsEmptyValue)(defaultMin) ? defaultMin : dateObj.getMinutes();
-      mins = mins < 10 ? "0".concat(mins) : mins;
+      mins = (0, _dateFormatUtils.addZeroIfNeeded)(mins);
       amPm = defaultAmPm ? defaultAmPm : hours < 12 ? 'AM' : 'PM';
       hours = this.getHours(hours, is24Hour);
       return {
@@ -201,7 +181,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
           hours -= 12;
         }
       }
-      hours = hours < 10 ? "0".concat(hours) : hours;
+      hours = (0, _dateFormatUtils.addZeroIfNeeded)(hours);
       return hours;
     }
   }, {
@@ -613,16 +593,6 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         isMonthOpen: false
       });
     }
-  }, {
-    key: "responsiveFunc",
-    value: function responsiveFunc(_ref3) {
-      var mediaQueryOR = _ref3.mediaQueryOR;
-      return {
-        tabletMode: mediaQueryOR([{
-          maxWidth: 700
-        }])
-      };
-    }
   }, {
     key: "render",
     value: function render() {
@@ -712,12 +682,12 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
       }), isDateTimeField ? /*#__PURE__*/_react["default"].createElement(_Time["default"], {
         timeText: timeText,
         dataId: dataId,
-        hourSuggestions: this.hourSuggestions,
+        hourSuggestions: (0, _dateFormatUtils.getHourSuggestions)(),
         onHourSelect: this.hoursSelect,
         hours: hours,
         hourEmptyText: hourEmptyText,
         needResponsive: needResponsive,
-        minSuggestions: this.minSuggestions,
+        minSuggestions: (0, _dateFormatUtils.getMinuteSuggestions)(),
         onMinutesSelect: this.minutesSelect,
         mins: mins,
         minuteEmptyText: minuteEmptyText,
@@ -745,33 +715,27 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
       return isDefaultPosition ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_DateTimeModule["default"].dropBox, " ").concat(className),
         "data-id": "".concat(dataId, "_dateBoxContainer")
-      }, childEle) : isReady ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
-        query: this.responsiveFunc,
-        responsiveId: "Helmet"
-      }, function (_ref4) {
-        var tabletMode = _ref4.tabletMode;
-        return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
-          size: boxSize,
-          boxPosition: position,
-          isActive: isActive,
-          isArrow: false,
-          isAnimate: isAnimate,
-          animationStyle: "bounce",
-          getRef: getRef,
-          onClick: onClick,
-          dataId: "".concat(dataId, "_dateBoxContainer"),
-          needResponsive: needResponsive,
-          isAbsolutePositioningNeeded: isAbsolute,
-          customClass: {
-            customDropBoxWrap: className
-          },
-          isPadding: isPadding,
-          positionsOffset: positionsOffset,
-          targetOffset: targetOffset,
-          isRestrictScroll: isRestrictScroll,
-          portalId: dropBoxPortalId
-        }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, childEle));
-      }) : null;
+      }, childEle) : isReady ? /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+        size: boxSize,
+        boxPosition: position,
+        isActive: isActive,
+        isArrow: false,
+        isAnimate: isAnimate,
+        animationStyle: "bounce",
+        getRef: getRef,
+        onClick: onClick,
+        dataId: "".concat(dataId, "_dateBoxContainer"),
+        needResponsive: needResponsive,
+        isAbsolutePositioningNeeded: isAbsolute,
+        customClass: {
+          customDropBoxWrap: className
+        },
+        isPadding: isPadding,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
+        portalId: dropBoxPortalId
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, childEle)) : null;
     }
   }]);
   return DateTime;

package/lib/DateTime/DateTime.module.css

@@ -231,6 +231,6 @@
 .dropBox {
   width: 100%;
   border-radius: 3px;
-  box-shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+  box-shadow: var(--zd_bs_dropbox_bottom);
   background-color: var(--zdt_dropbox_default_bg);
 }

package/lib/DateTime/dateFormatUtils/dateFormats.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dateSymbols = exports.dataFormatList = void 0;
+// Date Pattern Letters And its Meanings :-
+// 1. d/D: day without 0 prefix on single digit.
+// 2. dd/DD: day with 0 prefix if single digit.
+// 3. M: Month without 0 prefix on single digit.
+// 4. MM: Month with 0 prefix if single digit.
+// 5. yy/YY: Last two digit of year.
+// 6. yyyy/YYYY: represents full year.
+// 7. HH: 24 hour based hour. ie. 13:00. **H** will display hour without prefix 0 if single digit
+// 8. hh: 12 hour based hour. ie. 01:00. **h** will display hour without prefix 0 if single digit
+// 9. m: minute without 0 prefix on single digit.
+// 10.mm: minute with 0 prefix if single digit.
+// 11.s: second without 0 prefix on single digit.
+// 12.ss: second with 0 prefix if single digit.
+// 13.S: milliseconds with 0 prefix if single digit.
+// 14.a: represent the AM or PM
+// 15.A: represent the AM or PM
+// 16.Z: represent the timezone (Asia/Kolkata)
+// 17. (O) : Offset Of the timezone (GMT+00:00)
+
+var dateSymbols = {
+  d: 'date',
+  dd: 'date',
+  DD: 'date',
+  M: 'month',
+  MM: 'month',
+  yy: 'year',
+  YY: 'year',
+  YYYY: 'year',
+  yyyy: 'year',
+  h: 'hour',
+  hh: 'hour',
+  H: 'hour',
+  HH: 'hour',
+  m: 'minute',
+  mm: 'minute',
+  s: 'second',
+  ss: 'second',
+  S: 'millisecond',
+  a: 'AMPM',
+  Z: 'timezone',
+  O: 'offset'
+};
+exports.dateSymbols = dateSymbols;
+var dataFormatList = ['yyyy/MM/dd', 'yyyy-MM-dd', 'yyyy.MM.dd', 'yyyy MM dd', 'MM/dd/yyyy', 'MM-dd-yyyy', 'MM.dd.yyyy', 'MM dd yyyy', 'dd/MM/yyyy', 'dd-MM-yyyy', 'dd.MM.yyyy', 'dd MM yyyy', 'yyyy/MMM/dd', 'yyyy-MMM-dd', 'yyyy.MMM.dd', 'yyyy MMM dd', 'MMM/dd/yyyy', 'MMM-dd-yyyy', 'MMM.dd.yyyy', 'MMM dd yyyy', 'dd/MMM/yyyy', 'dd-MMM-yyyy', 'dd.MMM.yyyy', 'dd MMM yyyy', 'dd/MMMM/yyyy', 'dd-MMMM-yyyy', 'dd-MMMM-yyyy', 'dd MMMM yyyy', 'MMMM/dd/yyyy', 'MMMM-dd-yyyy', 'MMMM.dd.yyyy', 'MMMM dd yyyy', 'yyyy/MMMM/dd', 'yyyy-MMMM-dd', 'yyyy.MMMM.dd', 'yyyy MMMM dd', 'dd/MM/YY', 'dd-MM-YY', 'dd.MM.YY', 'dd MM YY', 'MM/dd/YY', 'MM-dd-YY', 'MM.dd.YY', 'MM dd YY', 'YY/MM/dd', 'YY-MM-dd', 'YY.MM.dd', 'YY MM dd', 'dd/MMM/YY', 'dd-MMM-YY', 'dd.MMM.YY', 'dd MMM YY', 'MMM/dd/YY', 'MMM-dd-YY', 'MMM.dd.YY', 'MMM dd YY', 'YY/MMM/dd', 'YY-MMM-dd', 'YY.MMM.dd', 'YY MMM dd', 'dd/MMMM/YY', 'dd-MMMM-YY', 'dd.MMMM.YY', 'dd MMMM YY', 'MMMM/dd/YY', 'MMMM-dd-YY', 'MMMM.dd.YY', 'MMMM dd YY', 'YY/MMMM/dd', 'YY-MMMM-dd', 'YY.MMMM.dd', 'YY MMMM dd'];
+exports.dataFormatList = dataFormatList;

package/lib/DateTime/dateFormatUtils/index.js

@@ -4,12 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.addZero = addZero;
+exports.addZeroIfNeeded = addZeroIfNeeded;
 exports.arrayIsNotEqual = arrayIsNotEqual;
 exports.convertTwoDigitToYear = convertTwoDigitToYear;
 exports.convertYearToTwoDigit = convertYearToTwoDigit;
 exports.getDayDetails = getDayDetails;
 exports.getDayEnd = getDayEnd;
 exports.getHourDetails = getHourDetails;
+exports.getHourSuggestions = getHourSuggestions;
 exports.getIsCurrentYear = getIsCurrentYear;
 exports.getIsDeleteTyped = getIsDeleteTyped;
 exports.getIsEmptyHour = getIsEmptyHour;
@@ -19,6 +21,7 @@ exports.getIsNoonValueTyped = getIsNoonValueTyped;
 exports.getIsNumberTyped = getIsNumberTyped;
 exports.getIsSupportedKey = getIsSupportedKey;
 exports.getMinuteDetails = getMinuteDetails;
+exports.getMinuteSuggestions = getMinuteSuggestions;
 exports.getMonthDetails = getMonthDetails;
 exports.getNoonDetails = getNoonDetails;
 exports.getYearDetails = getYearDetails;
@@ -130,12 +133,37 @@ function getHourDetails(is24Hour) {
     endPoint: is24Hour ? 23 : 12
   };
 }
+function getHourSuggestions(is24Hour) {
+  var _getHourDetails = getHourDetails(is24Hour),
+    startPoint = _getHourDetails.startPoint,
+    endPoint = _getHourDetails.endPoint;
+  var hourArr = [];
+  for (var hour = startPoint; hour <= endPoint; hour++) {
+    var htxt = addZeroIfNeeded(hour);
+    hourArr.push(htxt);
+  }
+  return hourArr;
+}
 function getMinuteDetails() {
   return {
     startPoint: 0,
     endPoint: 59
   };
 }
+function getMinuteSuggestions() {
+  var _getMinuteDetails = getMinuteDetails(),
+    startPoint = _getMinuteDetails.startPoint,
+    endPoint = _getMinuteDetails.endPoint;
+  var minArr = [];
+  for (var minute = startPoint; minute <= endPoint; minute++) {
+    var mtxt = addZeroIfNeeded(minute);
+    minArr.push(mtxt);
+  }
+  return minArr;
+}
+function addZeroIfNeeded(value) {
+  return value < 10 ? "0".concat(value) : value;
+}
 function getIsNoonValueTyped(event) {
   var keyCode = event.keyCode;
   if (keyCode === 65 || keyCode === 77 || keyCode === 80) {
@@ -178,9 +206,9 @@ function getIsEmptyValue(value, startPoint, endPoint) {
   return true;
 }
 function getIsEmptyHour(value, is24Hour) {
-  var _getHourDetails = getHourDetails(is24Hour),
-    startPoint = _getHourDetails.startPoint,
-    endPoint = _getHourDetails.endPoint;
+  var _getHourDetails2 = getHourDetails(is24Hour),
+    startPoint = _getHourDetails2.startPoint,
+    endPoint = _getHourDetails2.endPoint;
   return getIsEmptyValue(value, startPoint, endPoint);
 }
 function getIsEmptyYear(value, yearLength) {

package/lib/DateTime/props/propTypes.js

@@ -5,7 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.YearView_propTypes = exports.Span_propTypes = exports.DateWidget_propTypes = exports.DateTime_propTypes = exports.CalendarView_propTypes = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _dateFormats = require("../dateFormatUtils/dateFormats");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var CalendarView_propTypes = {
   dataId: _propTypes["default"].string,
   date: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
@@ -81,7 +88,7 @@ var DateWidget_propTypes = {
   className: _propTypes["default"].string,
   closePopupOnly: _propTypes["default"].func,
   dataId: _propTypes["default"].string,
-  dateFormat: _propTypes["default"].oneOf(['yyyy/MM/dd', 'MM/dd/yyyy', 'dd/MM/yyyy', 'yyyy-MM-dd', 'MM-dd-yyyy', 'dd-MM-yyyy', 'yyyy.MM.dd', 'MM.dd.yyyy', 'dd.MM.yyyy', 'dd/MMMM/YY', 'dd/MMM/YY']),
+  dateFormat: _propTypes["default"].oneOf(_toConsumableArray(_dateFormats.dataFormatList)),
   defaultPosition: _propTypes["default"].oneOf(['top', 'bottom', 'right', 'left']),
   defaultTime: _propTypes["default"].string,
   getContainerRef: _propTypes["default"].func,

package/lib/DropBox/DropBox.js

@@ -14,6 +14,7 @@ var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 var _DropBoxElement = _interopRequireDefault(require("./DropBoxElement/DropBoxElement"));
 var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
+var _Common = require("./../utils/Common");
 var _DropBoxModule = _interopRequireDefault(require("./css/DropBox.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -22,9 +23,6 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function DropBox(props) {
   var focusRef = (0, _react.useRef)(null);
   var DropBoxContext = (0, _react.useContext)(_LibraryContextInit["default"]);
-  var onFreezeClick = function onFreezeClick(e) {
-    e && e.stopPropagation();
-  };
   var needResponsive = props.needResponsive,
     portalId = props.portalId,
     isActive = props.isActive,
@@ -70,13 +68,13 @@ function DropBox(props) {
   }, /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(_DropBoxModule["default"].freezeLayer, " ").concat(_DropBoxModule["default"].freeze),
     style: zIndexStyle,
-    onClick: onFreezeClick
+    onClick: _Common.cancelBubblingEffect
   }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
     portalId: portalId
   }, /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, isRestrictScroll ? /*#__PURE__*/_react["default"].createElement("div", {
     className: _DropBoxModule["default"].freezeLayer,
     style: zIndexStyle,
-    onClick: onFreezeClick
+    onClick: _Common.cancelBubblingEffect
   }) : null, dropBoxEle)) : dropBoxEle;
 }
 DropBox.propTypes = _propTypes.DropBoxPropTypes;

package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -74,27 +74,23 @@
 
 /* shadow */
 .top_shadow {
-    --dropbox_box_shadow: 0 -3px 30px var(--zdt_dropbox_default_box_shadow);
+    --dropbox_box_shadow: var(--zd_bs_dropbox_top);
 }
 
 .left_shadow {
-    --dropbox_box_shadow: -4px 0 30px var(--zdt_dropbox_default_box_shadow);
+    --dropbox_box_shadow: var(--zd_bs_dropbox_left);
 }
 
 .right_shadow {
-    --dropbox_box_shadow: 4px 0 30px var(--zdt_dropbox_default_box_shadow);
+    --dropbox_box_shadow: var(--zd_bs_dropbox_right);
 }
 
 .bottom_shadow {
-    --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+    --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
 }
 
-[dir=ltr] .defaultShadow {
-    box-shadow: 4px 3px 30px var(--zdt_dropbox_default_box_shadow);
-}
-
-[dir=rtl] .defaultShadow {
-    box-shadow: -4px 3px 30px var(--zdt_dropbox_default_box_shadow);
+.defaultShadow {
+    box-shadow: var(--zd_bs_dropbox_default);
 }
 
 /* box direction styles */

package/lib/DropBox/css/DropBox.module.css

@@ -3,7 +3,7 @@
   --dropbox_bg_color: var(--zdt_dropbox_default_bg);
   --dropbox_border_radius: 0;
   --dropbox_padding: 0;
-  --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+  --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
 
   /* dropbox arrow default variables */
   --dropbox_arrow_box_shadow_color: var(--zdt_dropbox_arrow_shadow);

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -147,7 +147,6 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       } else {
         this.handleChange([].concat(_toConsumableArray(selectedOptions), [option]), e);
       }
-      // e && e.stopPropagation && this.handlePopupClose(e);
     }
   }, {
     key: "handleFormatOptions",

package/lib/MultiSelect/MultiSelect.js

@@ -492,8 +492,6 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       } else {
         this.handleChange([].concat(_toConsumableArray(selectedOptions), [option]), e);
       }
-
-      // e && e.stopPropagation && this.handlePopupClose(e);
     }
   }, {
     key: "handleRemoveOption",

package/lib/Popup/Popup.js

@@ -415,8 +415,7 @@ var Popup = function Popup(Component) {
       key: "removeClose",
       value: function removeClose(e) {
         // e && e.preventDefault && e.preventDefault();
-        e && e.stopPropagation && e.stopPropagation();
-        e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
+        (0, _Common.cancelBubblingEffect)(e);
       }
     }, {
       key: "handlePopupPosition",