@zohodesk/components 1.0.0-temp-256 → 1.0.0-temp-257.1

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",

package/lib/DateTime/DateWidget.js

@@ -23,6 +23,8 @@ var _Layout = require("../Layout");
 
 var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon/TextBoxIcon"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DateWidgetModule = _interopRequireDefault(require("./DateWidget.module.css"));
 
 var _validator = _interopRequireDefault(require("./validator"));
@@ -1085,17 +1087,17 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
       var showClear = !(isDisabled || isReadOnly) && (isDateEdited || value) ? true : false;
       var showError = needErrorOnBlur ? isError && !isFocused && !isPopupOpen : isError;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DateWidgetModule["default"].container)
+        className: (0, _cssUtility.cn)("".concat(_DateWidgetModule["default"].container))
       }, children ? /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
         "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
         onClick: isDisabled || isReadOnly ? null : this.handleTogglePopup,
         ref: getTargetRef,
-        className: "".concat(className ? className : '', " ").concat(isDisabled ? _DateWidgetModule["default"].disabled : _DateWidgetModule["default"].enabled)
+        className: (0, _cssUtility.cn)("".concat(isDisabled ? _DateWidgetModule["default"].disabled : _DateWidgetModule["default"].enabled, " ").concat(className ? className : ''))
       }, children) : /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
         "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
-        className: "".concat(className ? className : '', " ").concat(_DateWidgetModule["default"].textBox, " ").concat(isPopupOpen && !isDisabled ? _DateWidgetModule["default"].textBoxFocus : '', " ").concat(isDisabled ? _DateWidgetModule["default"].disabled : isReadOnly ? _DateWidgetModule["default"].readOnly : _DateWidgetModule["default"].enabled),
+        className: (0, _cssUtility.cn)(" ".concat(_DateWidgetModule["default"].textBox, " ").concat(isPopupOpen && !isDisabled ? _DateWidgetModule["default"].textBoxFocus : '', " ").concat(isDisabled ? _DateWidgetModule["default"].disabled : isReadOnly ? _DateWidgetModule["default"].readOnly : _DateWidgetModule["default"].enabled, " ").concat(className ? className : '')),
         onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
         ref: getTargetRef
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({

package/lib/DateTime/Time.js

@@ -17,6 +17,8 @@ var _Layout = require("../Layout");
 
 var _Select = _interopRequireDefault(require("../Select/Select"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DateTimeModule = _interopRequireDefault(require("./DateTime.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -86,7 +88,7 @@ var Time = /*#__PURE__*/function (_PureComponent) {
           _customProps$AmPmSele = customProps.AmPmSelectProps,
           AmPmSelectProps = _customProps$AmPmSele === void 0 ? {} : _customProps$AmPmSele;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
-        className: _DateTimeModule["default"].text
+        className: (0, _cssUtility.cn)(_DateTimeModule["default"].text)
       }, timeText), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         align: "vertical",

package/lib/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`CalendarView rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="days flex cover rowdir"
+    class="flex fullSize row days"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
@@ -14,294 +14,294 @@ exports[`CalendarView rendering the defult props 1`] = `
     data-test-id="dateContainer_dateContainer"
   >
     <div
-      class="dateRow flex rowdir"
+      class="flex row dateRow"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
     </div>
     <div
-      class="dateRow flex rowdir"
+      class="flex row dateRow"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
     </div>
     <div
-      class="dateRow flex rowdir"
+      class="flex row dateRow"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
     </div>
     <div
-      class="dateRow flex rowdir"
+      class="flex row dateRow"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
     </div>
     <div
-      class="dateRow flex rowdir"
+      class="flex row dateRow"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
     </div>
     <div
-      class="dateRow flex rowdir"
+      class="flex row dateRow"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grid shrinkOff"
+        class="noShrink grid"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"