@zohodesk/components 1.6.22 → 1.6.23-exp-2

package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap

@@ -3,13 +3,13 @@
 exports[`ColorMultiSelect Should render the default selected value 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -21,11 +21,10 @@ exports[`ColorMultiSelect Should render the default selected value 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-          "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container  custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -39,7 +38,7 @@ exports[`ColorMultiSelect Should render the default selected value 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -86,13 +85,13 @@ exports[`ColorMultiSelect Should render the default selected value 1`] = `
 exports[`ColorMultiSelect Should render the selected value 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -105,7 +104,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
       >
         <div
           aria-labelledby="7"
-          class="container effect    medium lgRadius danger  pointer "
+          class="container effect medium lgRadius danger pointer"
           data-id="tag_Tag"
           data-selector-id="tag"
           data-test-id="tag_Tag"
@@ -122,8 +121,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
           </div>
           <button
             aria-label="Delete"
-            class="buttonReset close 
-            lgRadiusClose  closedanger "
+            class="buttonReset close lgRadiusClose closedanger"
             data-id="tag_RemoveTag"
             data-test-id="tag_RemoveTag"
             type="button"
@@ -137,7 +135,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
             >
               <i
                 aria-hidden="true"
-                class="zd_font_icons  basic icon-close2 fbold  "
+                class="zd_font_icons basic icon-close2 fbold"
                 data-id="fontIcon"
                 data-selector-id="fontIcon"
                 data-test-id="fontIcon"
@@ -155,7 +153,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
       >
         <div
           aria-labelledby="8"
-          class="container effect    medium lgRadius danger  pointer "
+          class="container effect medium lgRadius danger pointer"
           data-id="tag_Tag"
           data-selector-id="tag"
           data-test-id="tag_Tag"
@@ -172,8 +170,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
           </div>
           <button
             aria-label="Delete"
-            class="buttonReset close 
-            lgRadiusClose  closedanger "
+            class="buttonReset close lgRadiusClose closedanger"
             data-id="tag_RemoveTag"
             data-test-id="tag_RemoveTag"
             type="button"
@@ -187,7 +184,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
             >
               <i
                 aria-hidden="true"
-                class="zd_font_icons  basic icon-close2 fbold  "
+                class="zd_font_icons basic icon-close2 fbold"
                 data-id="fontIcon"
                 data-selector-id="fontIcon"
                 data-test-id="fontIcon"
@@ -204,11 +201,10 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium clearIconSpace
-          "
+          class="custmSpan custmSpanMedium clearIconSpace"
         />
         <div
-          class="flex row varClass customContainer    effect     container  custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -222,7 +218,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -266,7 +262,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons  rtl basic icon-delete   "
+                      class="zd_font_icons rtl basic icon-delete"
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"
@@ -287,13 +283,13 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
 exports[`ColorMultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -305,11 +301,10 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-          "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container  custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -323,7 +318,7 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -370,13 +365,13 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
 exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -388,11 +383,10 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-          "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container  custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -406,7 +400,7 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -453,13 +447,13 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
 exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -471,11 +465,10 @@ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-          "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container  custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -489,7 +482,7 @@ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"

package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap

@@ -3,11 +3,11 @@
 exports[`ColorSingleSelect Should render the default selected value 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
@@ -38,7 +38,7 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
           >
             <div
               aria-labelledby="5"
-              class="container effect    medium lgRadius default   "
+              class="container effect medium lgRadius default"
               data-id="tag_Tag"
               data-selector-id="tag"
               data-test-id="tag_Tag"
@@ -64,7 +64,7 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons  basic icon-down   "
+              class="zd_font_icons basic icon-down"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -81,11 +81,11 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
 exports[`ColorSingleSelect Should render the selected value 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
@@ -116,7 +116,7 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
           >
             <div
               aria-labelledby="8"
-              class="container effect    medium lgRadius default   "
+              class="container effect medium lgRadius default"
               data-id="tag_Tag"
               data-selector-id="tag"
               data-test-id="tag_Tag"
@@ -138,7 +138,7 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons  basic icon-down   "
+              class="zd_font_icons basic icon-down"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -155,11 +155,11 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
 exports[`ColorSingleSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
@@ -201,7 +201,7 @@ exports[`ColorSingleSelect rendering the defult props 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons  basic icon-down   "
+              class="zd_font_icons basic icon-down"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -218,11 +218,11 @@ exports[`ColorSingleSelect rendering the defult props 1`] = `
 exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
@@ -266,7 +266,7 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons  basic icon-down   "
+              class="zd_font_icons basic icon-down"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -283,11 +283,11 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
 exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
@@ -318,7 +318,7 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
           >
             <div
               aria-labelledby="13"
-              class="container effect    medium lgRadius default   "
+              class="container effect medium lgRadius default"
               data-id="tag_Tag"
               data-selector-id="tag"
               data-test-id="tag_Tag"
@@ -344,7 +344,7 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons  basic icon-down   "
+              class="zd_font_icons basic icon-down"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -361,11 +361,11 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
 exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-selector-id="select"
   >
     <div
-      class=" arrowContainer "
+      class="arrowContainer"
       data-id="selectComponent"
       data-test-id="selectComponent"
     >
@@ -407,7 +407,7 @@ exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons  basic icon-down   "
+              class="zd_font_icons basic icon-down"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"

package/lib/ColorSelect/_shared/ColorIndicator/ColorIndicator.js

@@ -13,6 +13,8 @@ var _propTypes = require("./props/propTypes");
 
 var _Common = require("../../../utils/Common");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _ColorIndicatorModule = _interopRequireDefault(require("./ColorIndicator.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -32,7 +34,7 @@ function ColorIndicator(props) {
       background = _ref.background;
 
   return /*#__PURE__*/_react["default"].createElement("div", _extends({}, tagAttributes, a11yAttributes, {
-    className: "".concat(_ColorIndicatorModule["default"].varClass, " ").concat(_ColorIndicatorModule["default"].indicator, " ").concat(_ColorIndicatorModule["default"][shape], " ").concat(customClass),
+    className: (0, _cssUtility.cn)("".concat(_ColorIndicatorModule["default"].varClass, " ").concat(_ColorIndicatorModule["default"].indicator, " ").concat(_ColorIndicatorModule["default"][shape], " ").concat(customClass)),
     style: {
       backgroundColor: background
     },

package/lib/ColorSelect/_shared/ColorIndicator/__tests__/__snapshots__/ColorIndicator.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`ColorIndicator rendering the color of- { background: '#0000ff', text: '#ffffff', border: '#000000' } 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
     style="background-color: rgb(0, 0, 255);"
@@ -14,7 +14,7 @@ exports[`ColorIndicator rendering the color of- { background: '#0000ff', text: '
 exports[`ColorIndicator rendering the color of- { background: '#00ff00', text: '#000000', border: '#ffffff' } 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
     style="background-color: rgb(0, 255, 0);"
@@ -25,7 +25,7 @@ exports[`ColorIndicator rendering the color of- { background: '#00ff00', text: '
 exports[`ColorIndicator rendering the color of- { background: '#ff0000', text: '#000000', border: '#ffffff' } 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
     style="background-color: rgb(255, 0, 0);"
@@ -36,7 +36,7 @@ exports[`ColorIndicator rendering the color of- { background: '#ff0000', text: '
 exports[`ColorIndicator rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
   />
@@ -46,7 +46,7 @@ exports[`ColorIndicator rendering the defult props 1`] = `
 exports[`ColorIndicator rendering the shape of- circle 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
   />
@@ -56,7 +56,7 @@ exports[`ColorIndicator rendering the shape of- circle 1`] = `
 exports[`ColorIndicator rendering the shape of- square 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator square "
+    class="varClass indicator square"
     data-id=""
     data-test-id=""
   />
@@ -67,7 +67,7 @@ exports[`ColorIndicator rendering with a11yAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-label="color_indicator_aria-label"
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
   />
@@ -87,7 +87,7 @@ exports[`ColorIndicator rendering with custom class 1`] = `
 exports[`ColorIndicator rendering with custom id and test id 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id="custom-id"
     data-test-id="test-id"
   />
@@ -97,7 +97,7 @@ exports[`ColorIndicator rendering with custom id and test id 1`] = `
 exports[`ColorIndicator rendering with tagAttributes 1`] = `
 <DocumentFragment>
   <div
-    class="varClass indicator circle "
+    class="varClass indicator circle"
     data-id=""
     data-test-id=""
     title="color_indicator_tagAttributes"

package/lib/ColorSelect/_shared/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap

@@ -4,7 +4,7 @@ exports[`ColoredTag rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="1"
-    class="container effect    medium lgRadius default   "
+    class="container effect medium lgRadius default"
     data-id="tag_Tag"
     data-selector-id="tag"
     data-test-id="tag_Tag"
@@ -23,7 +23,7 @@ exports[`ColoredTag rendering with colorConfig 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="3"
-    class="container effect    medium lgRadius default   "
+    class="container effect medium lgRadius default"
     data-id="tag_Tag"
     data-selector-id="tag"
     data-test-id="tag_Tag"
@@ -43,7 +43,7 @@ exports[`ColoredTag rendering with customAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="4"
-    class="container effect    medium lgRadius default   "
+    class="container effect medium lgRadius default"
     data-custom-attribute="true"
     data-id="tag_Tag"
     data-selector-id="tag"
@@ -63,7 +63,7 @@ exports[`ColoredTag rendering with isActive true 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="2"
-    class="container effect selected activedefault   medium lgRadius default   "
+    class="container effect selected activedefault medium lgRadius default"
     data-id="tag_TagSelected"
     data-selector-id="tag"
     data-test-id="tag_TagSelected"
@@ -82,7 +82,7 @@ exports[`ColoredTag rendering with text 1`] = `
 <DocumentFragment>
   <div
     aria-labelledby="5"
-    class="container effect    medium lgRadius default   "
+    class="container effect medium lgRadius default"
     data-id="tag_Tag"
     data-selector-id="tag"
     data-test-id="tag_Tag"

package/lib/DateTime/CalendarView.js

@@ -15,6 +15,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _Layout = require("../Layout");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DateTimeModule = _interopRequireDefault(require("./DateTime.module.css"));
 
 var _common = require("../utils/datetime/common");
@@ -225,7 +227,7 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
       }), /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(dataId, "_dateContainer"),
         "data-test-id": "".concat(dataId, "_dateContainer"),
-        className: "".concat(_DateTimeModule["default"].dateContainer, " ").concat(needBorder ? _DateTimeModule["default"].separator : '')
+        className: (0, _cssUtility.cn)("".concat(_DateTimeModule["default"].dateContainer, " ").concat(needBorder ? _DateTimeModule["default"].separator : ''))
       }, rows));
     }
   }]);

package/lib/DateTime/DateTime.js

@@ -25,6 +25,8 @@ var _DateTimePopupFooter = _interopRequireDefault(require("./DateTimePopupFooter
 
 var _Time = _interopRequireDefault(require("./Time"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DateTimeModule = _interopRequireDefault(require("./DateTime.module.css"));
 
 var _common = require("../utils/datetime/common");
@@ -781,7 +783,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       var childEle = /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DateTimeModule["default"].container, " ").concat(innerClass),
+        className: (0, _cssUtility.cn)("".concat(_DateTimeModule["default"].container, " ").concat(innerClass)),
         "data-id": "".concat(dataId, "_Calendar"),
         "data-test-id": "".concat(dataId, "_Calendar"),
         onClick: this.closePopup
@@ -793,7 +795,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         nextMonthTitleText: nextMonthTitleText,
         onModifyCalendar: this.modifyCalendar
       }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: _DateTimeModule["default"].subContainer
+        className: (0, _cssUtility.cn)(_DateTimeModule["default"].subContainer)
       }, /*#__PURE__*/_react["default"].createElement(_CalendarView["default"], {
         needBorder: isDateTimeField || needAction,
         dataId: dataId,
@@ -832,7 +834,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         onCancel: this.handleClear,
         dataId: dataId
       }) : null, isYearView ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _DateTimeModule["default"].yearContainer
+        className: (0, _cssUtility.cn)(_DateTimeModule["default"].yearContainer)
       }, /*#__PURE__*/_react["default"].createElement(_YearView["default"], {
         onSelectYear: this.handleSelectYear,
         onSelectMonth: this.handleSelectMonthViaYearView,
@@ -844,7 +846,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
       })) : null), renderCustomFooter);
 
       return isDefaultPosition ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DateTimeModule["default"].dropBox, " ").concat(className),
+        className: (0, _cssUtility.cn)("".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"], _extends({

package/lib/DateTime/DateTimePopupFooter.js

@@ -17,6 +17,8 @@ var _Layout = require("../Layout");
 
 var _Button = _interopRequireDefault(require("../Button/Button"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DateTimeModule = _interopRequireDefault(require("./DateTime.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -77,7 +79,7 @@ var DateTimePopupFooter = /*#__PURE__*/function (_PureComponent) {
         onClick: onSubmit,
         dataId: "".concat(dataId, "_saveBtn")
       }), /*#__PURE__*/_react["default"].createElement("span", {
-        className: _DateTimeModule["default"].space
+        className: (0, _cssUtility.cn)(_DateTimeModule["default"].space)
       }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         text: cancelText,
         size: "medium",