@zohodesk/components 1.2.52 → 1.2.53

package/README.md

@@ -32,6 +32,18 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.53
+
+- **CheckBox** - Disabled State CheckBox Color Fixed
+- **Radio** - ReadOnly State Radio Cursor and color Fixed
+- **Textarea** - isFocus Prop added
+- **AdvancedGroupMultiSelect** - isFocus Prop added
+- **AdvancedMultiSelect** - isFocus Prop added
+- **MultiSelect** - isFocus Prop added
+- **DateWidget** - onDropboxClose,renderCustomHeader,renderCustomFooter Props added
+- **DateTime** - renderCustomHeader,renderCustomFooter Props added
+- **GroupSelect** - customProps supported
+
 # 1.2.52
 
 - **Typography** - component added in v0

package/es/CheckBox/CheckBox.js

@@ -74,17 +74,18 @@ export default class CheckBox extends React.Component {
       role = 'checkbox',
       ariaChecked = checked
     } = a11y;
+    const isEditable = !(isReadOnly || disabled);
     return /*#__PURE__*/React.createElement(Container, {
       dataId: dataId,
       isCover: false,
       isInline: text ? false : true,
       alignBox: "row",
       align: "vertical",
-      className: `${style.container} ${accessMode} ${isReadOnly || disabled ? '' : `${style[palette]}`} 
-        ${checked ? `${style[`checked${palette}`]}` : ''} ${customCheckBox}`,
+      className: `${style.container} ${accessMode} ${!isEditable ? '' : `${style[palette]}`} 
+        ${checked ? `${style[`checked${palette}`]}` : ''}  ${customCheckBox}`,
       "data-title": toolTip,
-      onClick: isReadOnly || disabled ? null : this.onChange,
-      tabIndex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
+      onClick: !isEditable ? null : this.onChange,
+      tabIndex: !isEditable || ariaHidden ? '-1' : '0',
       "aria-checked": ariaChecked,
       eleRef: this.handleGetContainerRef,
       role: role,
@@ -94,7 +95,7 @@ export default class CheckBox extends React.Component {
       "data-selector-id": dataSelectorId || id,
       ...CheckBoxProps
     }, /*#__PURE__*/React.createElement(Box, {
-      className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''}`
+      className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''} ${!isEditable ? `${style[`disabled`]}` : ''}`
     }, /*#__PURE__*/React.createElement("input", {
       type: "hidden",
       id: id,

package/es/CheckBox/CheckBox.module.css

@@ -97,10 +97,10 @@
   margin-right: var(--zd_size6) ;
 }
 
-.checkedprimary,
+ .checkedprimary,
 .checkeddanger {
   stroke: var(--checkbox_checked_stroke_color);
-}
+} 
 .primary:hover
 /* .primary:focus  */
 {
@@ -138,6 +138,9 @@
 .checkeddangerLabel {
   --checkbox_checked_active_color: var(--zdt_checkbox_danger_stroke_border);
 }
+.disabled {
+  opacity: 0.7
+}
 @keyframes tickAnimate {
   0% {
     stroke-dashoffset: 40;

package/es/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/es/DateTime/DateTime.js

@@ -650,12 +650,15 @@ export default class DateTime extends React.PureComponent {
       targetOffset,
       isRestrictScroll,
       dropBoxPortalId,
+      renderCustomHeader,
+      renderCustomFooter,
       customProps = {},
       weekStartDay,
       holidays
     } = this.props;
     const {
-      TimeProps = {}
+      TimeProps = {},
+      DropBoxProps = {}
     } = customProps;
     const {
       timeText = 'Time',
@@ -686,7 +689,7 @@ export default class DateTime extends React.PureComponent {
       "data-id": `${dataId}_Calendar`,
       "data-test-id": `${dataId}_Calendar`,
       onClick: this.closePopup
-    }, /*#__PURE__*/React.createElement(DateTimePopupHeader, {
+    }, renderCustomHeader, /*#__PURE__*/React.createElement(DateTimePopupHeader, {
       onOpenYearView: this.handleOpenYearView,
       showMonthTxt: showmonthtxt,
       isYearView: isYearView,
@@ -742,7 +745,7 @@ export default class DateTime extends React.PureComponent {
       monthNames: monthNames,
       monthNamesShort: monthNamesShort,
       isMonthOpen: isMonthOpen
-    })) : null));
+    })) : null), renderCustomFooter);
     return isDefaultPosition ? /*#__PURE__*/React.createElement("div", {
       className: `${style.dropBox} ${className}`,
       "data-id": `${dataId}_dateBoxContainer`,
@@ -766,7 +769,8 @@ export default class DateTime extends React.PureComponent {
       positionsOffset: positionsOffset,
       targetOffset: targetOffset,
       isRestrictScroll: isRestrictScroll,
-      portalId: dropBoxPortalId
+      portalId: dropBoxPortalId,
+      ...DropBoxProps
     }, /*#__PURE__*/React.createElement(Box, null, childEle)) : null;
   }