@zohodesk/components 1.2.52 → 1.2.53

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

@@ -5,7 +5,7 @@ exports[`CheckBox component Should be disable 1`] = `
   <div
     aria-checked="true"
     class="container disabled  
-        checkedprimary  flex rowdir vCenter"
+        checkedprimary   flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -13,7 +13,7 @@ exports[`CheckBox component Should be disable 1`] = `
     tabindex="-1"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled disabled shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -74,7 +74,7 @@ exports[`CheckBox component Should be isReadOnly 1`] = `
   <div
     aria-checked="false"
     class="container readonly  
-          inflex rowdir vCenter"
+           inflex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -82,7 +82,7 @@ exports[`CheckBox component Should be isReadOnly 1`] = `
     tabindex="-1"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled disabled shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -118,7 +118,7 @@ exports[`CheckBox component Should be render ID 1`] = `
   <div
     aria-checked="false"
     class="container pointer primary 
-          flex rowdir vCenter"
+           flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -126,7 +126,7 @@ exports[`CheckBox component Should be render ID 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -183,7 +183,7 @@ exports[`CheckBox component Should be render activeStyle is minus 1`] = `
   <div
     aria-checked="false"
     class="container pointer primary 
-          inflex rowdir vCenter"
+           inflex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -191,7 +191,7 @@ exports[`CheckBox component Should be render activeStyle is minus 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -227,7 +227,7 @@ exports[`CheckBox component Should be render dataSelectorId 1`] = `
   <div
     aria-checked="false"
     class="container pointer primary 
-          inflex rowdir vCenter"
+           inflex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -235,7 +235,7 @@ exports[`CheckBox component Should be render dataSelectorId 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -271,7 +271,7 @@ exports[`CheckBox component Should be render disabledTitle and title 1`] = `
   <div
     aria-checked="false"
     class="container disabled  
-          flex rowdir vCenter"
+           flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -280,7 +280,7 @@ exports[`CheckBox component Should be render disabledTitle and title 1`] = `
     tabindex="-1"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled disabled shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -335,7 +335,7 @@ exports[`CheckBox component Should be render isClipped is false 1`] = `
   <div
     aria-checked="false"
     class="container pointer primary 
-          inflex rowdir vCenter"
+           inflex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -343,7 +343,7 @@ exports[`CheckBox component Should be render isClipped is false 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -379,7 +379,7 @@ exports[`CheckBox component Should be render isFilled 1`] = `
   <div
     aria-checked="false"
     class="container pointer primary 
-          inflex rowdir vCenter"
+           inflex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -387,7 +387,7 @@ exports[`CheckBox component Should be render isFilled 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -423,7 +423,7 @@ exports[`CheckBox component Should be render name 1`] = `
   <div
     aria-checked="false"
     class="container pointer primary 
-          inflex rowdir vCenter"
+           inflex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -431,7 +431,7 @@ exports[`CheckBox component Should be render name 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -468,7 +468,7 @@ exports[`CheckBox component Should be render text 1`] = `
   <div
     aria-checked="false"
     class="container pointer primary 
-          flex rowdir vCenter"
+           flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -476,7 +476,7 @@ exports[`CheckBox component Should be render text 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -531,7 +531,7 @@ exports[`CheckBox component Should be render title 1`] = `
   <div
     aria-checked="false"
     class="container pointer primary 
-          flex rowdir vCenter"
+           flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -540,7 +540,7 @@ exports[`CheckBox component Should be render title 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -595,7 +595,7 @@ exports[`CheckBox component Should be render with the basic set of default props
   <div
     aria-checked="false"
     class="container pointer primary 
-          inflex rowdir vCenter"
+           inflex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -603,7 +603,7 @@ exports[`CheckBox component Should be render with the basic set of default props
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -639,7 +639,7 @@ exports[`CheckBox component Should render active - danger 1`] = `
   <div
     aria-checked="true"
     class="container pointer danger 
-        checkeddanger  flex rowdir vCenter"
+        checkeddanger   flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -647,7 +647,7 @@ exports[`CheckBox component Should render active - danger 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -708,7 +708,7 @@ exports[`CheckBox component Should render active - primary 1`] = `
   <div
     aria-checked="true"
     class="container pointer primary 
-        checkedprimary  flex rowdir vCenter"
+        checkedprimary   flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -716,7 +716,7 @@ exports[`CheckBox component Should render active - primary 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -777,7 +777,7 @@ exports[`CheckBox component Should render labelSize - default 1`] = `
   <div
     aria-checked="false"
     class="container pointer primary 
-          flex rowdir vCenter"
+           flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -785,7 +785,7 @@ exports[`CheckBox component Should render labelSize - default 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -840,7 +840,7 @@ exports[`CheckBox component Should render labelSize - large 1`] = `
   <div
     aria-checked="false"
     class="container pointer primary 
-          flex rowdir vCenter"
+           flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -848,7 +848,7 @@ exports[`CheckBox component Should render labelSize - large 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -903,7 +903,7 @@ exports[`CheckBox component Should render labelSize - medium 1`] = `
   <div
     aria-checked="false"
     class="container pointer primary 
-          flex rowdir vCenter"
+           flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -911,7 +911,7 @@ exports[`CheckBox component Should render labelSize - medium 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -966,7 +966,7 @@ exports[`CheckBox component Should render labelSize - primary 1`] = `
   <div
     aria-checked="false"
     class="container pointer primary 
-          flex rowdir vCenter"
+           flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -974,7 +974,7 @@ exports[`CheckBox component Should render labelSize - primary 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1029,7 +1029,7 @@ exports[`CheckBox component Should render labelSize - small 1`] = `
   <div
     aria-checked="false"
     class="container pointer primary 
-          flex rowdir vCenter"
+           flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1037,7 +1037,7 @@ exports[`CheckBox component Should render labelSize - small 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1092,7 +1092,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - da
   <div
     aria-checked="true"
     class="container pointer danger 
-        checkeddanger  flex rowdir vCenter"
+        checkeddanger   flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1100,7 +1100,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - da
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1161,7 +1161,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
   <div
     aria-checked="true"
     class="container pointer primary 
-        checkedprimary  flex rowdir vCenter"
+        checkedprimary   flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1169,7 +1169,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1230,7 +1230,7 @@ exports[`CheckBox component Should render size - danger 1`] = `
   <div
     aria-checked="false"
     class="container pointer primary 
-          flex rowdir vCenter"
+           flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1238,7 +1238,7 @@ exports[`CheckBox component Should render size - danger 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1293,7 +1293,7 @@ exports[`CheckBox component Should render size - default 1`] = `
   <div
     aria-checked="false"
     class="container pointer primary 
-          flex rowdir vCenter"
+           flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1301,7 +1301,7 @@ exports[`CheckBox component Should render size - default 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1356,7 +1356,7 @@ exports[`CheckBox component Should render size - mandatory 1`] = `
   <div
     aria-checked="false"
     class="container pointer primary 
-          flex rowdir vCenter"
+           flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1364,7 +1364,7 @@ exports[`CheckBox component Should render size - mandatory 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1419,7 +1419,7 @@ exports[`CheckBox component Should render size - medium 1`] = `
   <div
     aria-checked="true"
     class="container pointer primary 
-        checkedprimary  inflex rowdir vCenter"
+        checkedprimary   inflex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1427,7 +1427,7 @@ exports[`CheckBox component Should render size - medium 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1469,7 +1469,7 @@ exports[`CheckBox component Should render size - primary 1`] = `
   <div
     aria-checked="false"
     class="container pointer primary 
-          flex rowdir vCenter"
+           flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1477,7 +1477,7 @@ exports[`CheckBox component Should render size - primary 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1532,7 +1532,7 @@ exports[`CheckBox component Should render size - secondary 1`] = `
   <div
     aria-checked="false"
     class="container pointer primary 
-          flex rowdir vCenter"
+           flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1540,7 +1540,7 @@ exports[`CheckBox component Should render size - secondary 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1595,7 +1595,7 @@ exports[`CheckBox component Should render size - small 1`] = `
   <div
     aria-checked="true"
     class="container pointer primary 
-        checkedprimary  inflex rowdir vCenter"
+        checkedprimary   inflex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1603,7 +1603,7 @@ exports[`CheckBox component Should render size - small 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer small  filled shrinkOff"
+      class="boxContainer small  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1648,7 +1648,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
     aria-label="ariaLabelCheckBox"
     aria-labelledby="ariaLabelledbyCheckBox"
     class="container pointer primary 
-        checkedprimary  inflex rowdir vCenter"
+        checkedprimary   inflex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1656,7 +1656,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1701,7 +1701,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
     aria-label="ariaLabelCheckBox"
     aria-labelledby="ariaLabelledbyCheckBox"
     class="container pointer primary 
-        checkedprimary  inflex rowdir vCenter"
+        checkedprimary   inflex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1709,7 +1709,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
     tabindex="-1"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1751,7 +1751,7 @@ exports[`CheckBox component rendering the Custom Props 1`] = `
   <div
     aria-checked="false"
     class="container pointer primary 
-          flex rowdir vCenter"
+           flex rowdir vCenter"
     data-id="checkBox"
     data-props="true"
     data-selector-id="container"
@@ -1760,7 +1760,7 @@ exports[`CheckBox component rendering the Custom Props 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium  filled shrinkOff"
+      class="boxContainer medium  filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1813,7 +1813,7 @@ exports[`CheckBox component rendering the Custom class 1`] = `
   <div
     aria-checked="true"
     class="container pointer primary 
-        checkedprimary customCheckBoxClass flex rowdir vCenter"
+        checkedprimary  customCheckBoxClass flex rowdir vCenter"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1821,7 +1821,7 @@ exports[`CheckBox component rendering the Custom class 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer medium customCBoxSizeClass filled shrinkOff"
+      class="boxContainer medium customCBoxSizeClass filled  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

package/lib/DateTime/DateTime.js

@@ -43,6 +43,8 @@ var _dateFormat = require("./dateFormatUtils/dateFormat");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 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."); }
@@ -733,12 +735,16 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
           targetOffset = _this$props7.targetOffset,
           isRestrictScroll = _this$props7.isRestrictScroll,
           dropBoxPortalId = _this$props7.dropBoxPortalId,
+          renderCustomHeader = _this$props7.renderCustomHeader,
+          renderCustomFooter = _this$props7.renderCustomFooter,
           _this$props7$customPr = _this$props7.customProps,
           customProps = _this$props7$customPr === void 0 ? {} : _this$props7$customPr,
           weekStartDay = _this$props7.weekStartDay,
           holidays = _this$props7.holidays;
       var _customProps$TimeProp = customProps.TimeProps,
-          TimeProps = _customProps$TimeProp === void 0 ? {} : _customProps$TimeProp;
+          TimeProps = _customProps$TimeProp === void 0 ? {} : _customProps$TimeProp,
+          _customProps$DropBoxP = customProps.DropBoxProps,
+          DropBoxProps = _customProps$DropBoxP === void 0 ? {} : _customProps$DropBoxP;
       var _i18nKeys$timeText = i18nKeys.timeText,
           timeText = _i18nKeys$timeText === void 0 ? 'Time' : _i18nKeys$timeText,
           _i18nKeys$submitText = i18nKeys.submitText,
@@ -779,7 +785,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         "data-id": "".concat(dataId, "_Calendar"),
         "data-test-id": "".concat(dataId, "_Calendar"),
         onClick: this.closePopup
-      }, /*#__PURE__*/_react["default"].createElement(_DateTimePopupHeader["default"], {
+      }, renderCustomHeader, /*#__PURE__*/_react["default"].createElement(_DateTimePopupHeader["default"], {
         onOpenYearView: this.handleOpenYearView,
         showMonthTxt: showmonthtxt,
         isYearView: isYearView,
@@ -835,13 +841,13 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         monthNames: monthNames,
         monthNamesShort: monthNamesShort,
         isMonthOpen: isMonthOpen
-      })) : null));
+      })) : null), renderCustomFooter);
 
       return isDefaultPosition ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_DateTimeModule["default"].dropBox, " ").concat(className),
         "data-id": "".concat(dataId, "_dateBoxContainer"),
         "data-test-id": "".concat(dataId, "_dateBoxContainer")
-      }, childEle) : isReady ? /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      }, childEle) : isReady ? /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], _extends({
         size: boxSize,
         boxPosition: position,
         isActive: isActive,
@@ -861,7 +867,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         targetOffset: targetOffset,
         isRestrictScroll: isRestrictScroll,
         portalId: dropBoxPortalId
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, childEle)) : null;
+      }, DropBoxProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, childEle)) : null;
     }
   }]);
 

package/lib/DateTime/DateWidget.js

@@ -179,7 +179,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           dateFormat = _this$props2$dateForm === void 0 ? '' : _this$props2$dateForm,
           is24Hour = _this$props2.is24Hour,
           isHideCurrentYear = _this$props2.isHideCurrentYear,
-          getPopupProps = _this$props2.getPopupProps;
+          getPopupProps = _this$props2.getPopupProps,
+          onDropboxClose = _this$props2.onDropboxClose;
 
       if (validation && validation.validate) {
         this.validateOnSelect(selected, this.props);
@@ -212,6 +213,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
       if (prevProps.isPopupReady !== isPopupReady) {
         if (isPopupReady) {
           this.resetLocalDate && this.resetLocalDate();
+        } else {
+          typeof onDropboxClose === 'function' && onDropboxClose();
         }
 
         if (getPopupProps) {
@@ -1032,6 +1035,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props12.a11y,
           boxSize = _this$props12.boxSize,
           onError = _this$props12.onError,
+          renderCustomHeader = _this$props12.renderCustomHeader,
+          renderCustomFooter = _this$props12.renderCustomFooter,
           weekStartDay = _this$props12.weekStartDay,
           holidays = _this$props12.holidays,
           _this$props12$customP = _this$props12.customProps,
@@ -1136,6 +1141,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         dropBoxPortalId: dropBoxPortalId,
         boxSize: boxSize,
         onError: onError,
+        renderCustomHeader: renderCustomHeader,
+        renderCustomFooter: renderCustomFooter,
         customProps: DateTimeProps,
         weekStartDay: weekStartDay,
         holidays: holidays

package/lib/DateTime/props/propTypes.js

@@ -100,6 +100,8 @@ var DateTime_propTypes = {
   targetOffset: _propTypes["default"].string,
   isRestrictScroll: _propTypes["default"].bool,
   dropBoxPortalId: _propTypes["default"].string,
+  renderCustomHeader: _propTypes["default"].node,
+  renderCustomFooter: _propTypes["default"].node,
   customProps: _propTypes["default"].object,
   weekStartDay: _propTypes["default"].oneOf([0, 1, 2, 3, 4, 5, 6]),
   holidays: _propTypes["default"].arrayOf(_propTypes["default"].number)
@@ -172,6 +174,9 @@ var DateWidget_propTypes = {
   dropBoxPortalId: _propTypes["default"].string,
   a11y: _propTypes["default"].object,
   getPopupProps: _propTypes["default"].func,
+  renderCustomHeader: _propTypes["default"].node,
+  renderCustomFooter: _propTypes["default"].node,
+  onDropboxClose: _propTypes["default"].func,
   customProps: _propTypes["default"].object,
   weekStartDay: _propTypes["default"].oneOf([0, 1, 2, 3, 4, 5, 6]),
   holidays: _propTypes["default"].arrayOf(_propTypes["default"].number)