@zohodesk/components 1.0.0-temp-80 → 1.0.0-temp-82

package/lib/DateTime/CalendarView.js

@@ -50,7 +50,10 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
         dataId = _this$props.dataId,
         needBorder = _this$props.needBorder,
         dayNames = _this$props.dayNames,
-        dayNamesShort = _this$props.dayNamesShort;
+        dayNamesShort = _this$props.dayNamesShort,
+        todayMonth = _this$props.todayMonth,
+        todayDate = _this$props.todayDate,
+        todayYear = _this$props.todayYear;
       var userSeeDate = new Date(year, month, 1);
       var userSeeDay = userSeeDate.getDay() + 1;
       var userSeeYear = userSeeDate.getFullYear();
@@ -71,6 +74,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
       var incremday = 1;
       var incremleti = 1;
+      var isSelectedDay = false;
       var isToday = false;
       var rows = function () {
         var rowArr = [];
@@ -84,19 +88,23 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
             }
             if (incremleti >= userSeeDay && incremday <= monthEnd) {
               if (incremday === parseInt(date) && parseInt(month) === userSeeMonth && parseInt(year) === userSeeYear) {
+                isSelectedDay = true;
+              } else if (todayDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear) {
                 isToday = true;
               } else {
+                isSelectedDay = false;
                 isToday = false;
               }
               output = /*#__PURE__*/_react["default"].createElement(Span, {
                 i: i,
-                isActive: isToday,
+                isActive: isSelectedDay,
                 tdclass: tdclass,
                 handleSelect: _this2.handleSelect,
                 incremday: incremday,
                 userSeeMonth: userSeeMonth,
                 userSeeYear: userSeeYear,
-                dataId: isToday ? "".concat(dataId, "_dateSelected") : "".concat(dataId, "_date")
+                dataId: isSelectedDay ? "".concat(dataId, "_dateSelected") : "".concat(dataId, "_date"),
+                isToday: isToday
               });
               incremday++;
             } else if (incremleti < userSeeDay) {
@@ -108,16 +116,17 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
               }
               var prevMonthEnd = (0, _common.getMonthEnd)(prevMonth, prevYear);
               var prevDate = prevMonthEnd - (userSeeDay - 1) + incremleti;
-              isToday = prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
+              isSelectedDay = prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
               output = /*#__PURE__*/_react["default"].createElement(Span, {
                 i: i,
-                isActive: isToday,
+                isActive: isSelectedDay,
                 tdclass: "".concat(tdclass, " ").concat(_DateTimeModule["default"].invalidDate),
                 handleSelect: _this2.handleSelect,
                 incremday: prevDate,
                 userSeeMonth: prevMonth,
                 userSeeYear: prevYear,
-                dataId: isToday ? "".concat(dataId, "_dateSelected") : "".concat(dataId, "_invalidDate")
+                dataId: isSelectedDay ? "".concat(dataId, "_dateSelected") : "".concat(dataId, "_invalidDate"),
+                isToday: isToday
               });
             } else if (incremleti > monthEnd) {
               var nextMonth = userSeeMonth + 1;
@@ -127,16 +136,17 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
                 nextYear = userSeeYear + 1;
               }
               var nextDate = incremleti - (userSeeDay - 1) - monthEnd;
-              isToday = nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
+              isSelectedDay = nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
               output = /*#__PURE__*/_react["default"].createElement(Span, {
                 i: i,
-                isActive: isToday,
+                isActive: isSelectedDay,
                 tdclass: "".concat(tdclass, "  ").concat(_DateTimeModule["default"].invalidDate),
                 handleSelect: _this2.handleSelect,
                 incremday: nextDate,
                 userSeeMonth: nextMonth,
                 userSeeYear: nextYear,
-                dataId: isToday ? "".concat(dataId, "_dateSelected") : "".concat(dataId, "_invalidDate")
+                dataId: isSelectedDay ? "".concat(dataId, "_dateSelected") : "".concat(dataId, "_invalidDate"),
+                isToday: isToday
               });
             } else {
               output = /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -200,10 +210,11 @@ var Span = /*#__PURE__*/function (_React$PureComponent2) {
         incremday = _this$props3.incremday,
         i = _this$props3.i,
         dataId = _this$props3.dataId,
-        isActive = _this$props3.isActive;
+        isActive = _this$props3.isActive,
+        isToday = _this$props3.isToday;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         dataId: dataId,
-        className: "".concat(tdclass, " ").concat(isActive ? _DateTimeModule["default"].today : ''),
+        className: "".concat(tdclass, " ").concat(isActive ? _DateTimeModule["default"].active : '', " ").concat(isToday ? _DateTimeModule["default"].today : ''),
         key: i,
         onClick: this.handleSelectChild
       }, incremday);

package/lib/DateTime/DateTime.js

@@ -154,6 +154,10 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         is24Hour = props.is24Hour; //defaultTime --> 12:00:PM
       defaultTime = needDefaultTime ? defaultTime ? defaultTime : '12:00:PM' : '';
       var defaultHour, defaultMin, defaultAmPm;
+      var todayObj = new Date();
+      var todayDate = todayObj.getDate();
+      var todayMonth = todayObj.getMonth();
+      var todayYear = todayObj.getFullYear();
       if (!value) {
         var _ref = defaultTime ? defaultTime.split(':') : [];
         var _ref2 = _slicedToArray(_ref, 3);
@@ -178,7 +182,10 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         year: year,
         mins: mins,
         hours: hours,
-        amPm: amPm
+        amPm: amPm,
+        todayDate: todayDate,
+        todayMonth: todayMonth,
+        todayYear: todayYear
       };
     }
   }, {
@@ -625,7 +632,10 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         mins = _this$state8.mins,
         amPm = _this$state8.amPm,
         isYearView = _this$state8.isYearView,
-        isMonthOpen = _this$state8.isMonthOpen;
+        isMonthOpen = _this$state8.isMonthOpen,
+        todayDate = _this$state8.todayDate,
+        todayMonth = _this$state8.todayMonth,
+        todayYear = _this$state8.todayYear;
       var _this$props7 = this.props,
         isDateTimeField = _this$props7.isDateTimeField,
         isActive = _this$props7.isActive,
@@ -693,7 +703,10 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         month: month,
         onSelect: this.dateSelect,
         dayNames: dayNames,
-        dayNamesShort: dayNamesShort
+        dayNamesShort: dayNamesShort,
+        todayDate: todayDate,
+        todayMonth: todayMonth,
+        todayYear: todayYear
       }), isDateTimeField ? /*#__PURE__*/_react["default"].createElement(_Time["default"], {
         timeText: timeText,
         dataId: dataId,

package/lib/DateTime/DateTime.module.css

@@ -1,188 +1,233 @@
-.semibold {
-  font-family: var(--zd_semibold);
-}
-[dir=ltr] .boxPadding {
-  padding-right: var(--zd_size19);
-  padding-left: var(--zd_size19);
-}
-[dir=rtl] .boxPadding {
-  padding-left: var(--zd_size19);
-  padding-right: var(--zd_size19);
-}
-.container {
-  font-size: var(--zd_font_size16);
-  composes: offSelection from '../common/common.module.css';
-  border-radius: 3px;
-  background-color: var(--zdt_datetime_default_bg);
-}
-.header {
-  min-height: var(--zd_size36);
-  composes: boxPadding;
-  text-align: center;
-  background-color: var(--zdt_datetime_header_bg);
-  border-radius: 0 0 2px 2px;
-  border-bottom: 1px solid var(--zdt_datetime_header_border);
-}
-
-.datesStr {
-  font-family: var(--zd_regular);
-}
-.grid {
-  width: var(--zd_size28);
-  height: var(--zd_size28);
-  line-height: var(--zd_size20);
-  text-align: center;
-  padding: var(--zd_size4) 0;
-  border-radius: 50%;
-}
-.thArrow,
-.datesStr {
-  font-size: var(--zd_font_size13);
-  color: var(--zdt_datetime_datestr_text);
-}
-.thArrow, .datesStr {
-  cursor: pointer;
-}
-.thArrow:hover,
-.datesStr:hover {
-  color: var(--zdt_datetime_datestr_text);
-}
-.thArrow:hover, .datesStr:hover {
-  background: var(--zdt_datetime_datestr_hover_bg);
-}
-
-[dir=ltr] .navigation {
-  margin-left: var(--zd_size2);
-}
-
-[dir=rtl] .navigation {
-  margin-right: var(--zd_size2);
-}
-.thMonYear {
-  font-size: var(--zd_font_size13);
-  line-height: var(--zd_size24);
-  color: var(--zdt_datetime_datestr_text);
-  composes: semibold;
-}
-.dateContainer {
-  margin: 0 var(--zd_size19) 0 var(--zd_size19);
-  padding: var(--zd_size6) 0 var(--zd_size10) 0;
-}
-.separator {
-  border-bottom: 1px dotted var(--zdt_datetime_separator_border);
-}
-.days {
-  min-height: var(--zd_size36);
-  composes: boxPadding;
-  composes: alignBetween from '../common/common.module.css';
-  padding-top: var(--zd_size7);
-}
-.daysStr {
-  font-size: var(--zd_font_size10);
-  color: var(--zdt_datetime_daystr_text);
-  text-transform: uppercase;
-  composes: semibold;
-}
-.dateRow {
-  height: var(--zd_size28);
-  composes: alignBetween from '../common/common.module.css';
-  margin: var(--zd_size1) 0 var(--zd_size5);
-}
-.dateRow:last-child {
-  margin-bottom: 0;
-}
-.sunday,
-.sunday:hover,
-.invalidDate.sunday:hover {
-  color: var(--zdt_datetime_invalid_hover_text);
-}
-.invalidDate {
-  color: var(--zdt_datetime_invalid_text);
-}
-.invalidDate.sunday {
-  color: var(--zdt_datetime_invaliddate_text);
-}
-
-.today,
-.today:hover {
-  color: var(--zdt_datetime_today_text);
-}
-
-.today, .today:hover {
-  background-color: var(--zdt_datetime_today_bg);
-  border-radius: 50%;
-}
-
-.timesection {
-  padding-top: var(--zd_size5);
-  padding-bottom: var(--zd_size10);
-}
-.dropDownContainer {
-  padding: 0 var(--zd_size5);
-}
-.dropDown {
-  width: var(--zd_size60);
-  display: inline-block;
-  position: relative;
-  margin: 0 var(--zd_size4);
-}
-.footer {
-  margin-top: var(--zd_size10);
-  padding-bottom: var(--zd_size12);
-}
-.timesection,
-.footer {
-  composes: boxPadding;
-}
-.space {
-  display: inline-block;
-  width: var(--zd_size15);
-}
-
-.downArrow {
-  color: var(--zdt_datetime_daystr_text);
-}
-
-[dir=ltr] .downArrow {
-  margin-left: var(--zd_size2);
-}
-
-[dir=rtl] .downArrow {
-  margin-right: var(--zd_size2);
-}
-.dateText {
-  cursor: pointer;
-}
-.dateText:hover .downArrow {
-  color: var(--zdt_datetime_datestr_text);
-}
-.text {
-  composes: boxPadding;
-  font-size: var(--zd_font_size11);
-  text-transform: uppercase;
-  color: var(--zdt_datetime_text);
-  composes: semibold;
-  display: block;
-  margin-top: var(--zd_size14);
-}
-.yearContainer {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-[dir=ltr] .yearContainer {
-  left: 0;
-}
-[dir=rtl] .yearContainer {
-  right: 0;
-}
-.subContainer {
-  position: relative;
-}
-.dropBox {
-  width: 100%;
-  border-radius: 3px;
-  box-shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
-  background-color: var(--zdt_dropbox_default_bg);
+.semibold {
+  font-family: var(--zd_semibold);
+}
+
+[dir=ltr] .boxPadding {
+  padding-right: var(--zd_size19);
+  padding-left: var(--zd_size19);
+}
+
+[dir=rtl] .boxPadding {
+  padding-left: var(--zd_size19);
+  padding-right: var(--zd_size19);
+}
+
+.container {
+  font-size: var(--zd_font_size16);
+  composes: offSelection from '../common/common.module.css';
+  border-radius: 3px;
+  background-color: var(--zdt_datetime_default_bg);
+}
+
+.header {
+  min-height: var(--zd_size36);
+  composes: boxPadding;
+  text-align: center;
+  background-color: var(--zdt_datetime_header_bg);
+  border-radius: 0 0 2px 2px;
+  border-bottom: 1px solid var(--zdt_datetime_header_border);
+}
+
+.datesStr {
+  font-family: var(--zd_regular);
+}
+
+.grid {
+  width: var(--zd_size28);
+  height: var(--zd_size28);
+  line-height: var(--zd_size18);
+  text-align: center;
+  padding: var(--zd_size4) 0;
+  border-radius: 50%;
+  border: 1px solid transparent;
+}
+
+.thArrow,
+.datesStr {
+  font-size: var(--zd_font_size13);
+  color: var(--zdt_datetime_datestr_text);
+}
+
+.thArrow, .datesStr {
+  cursor: pointer;
+}
+
+.thArrow:hover,
+.datesStr:hover {
+  color: var(--zdt_datetime_datestr_text);
+}
+
+.thArrow:hover, .datesStr:hover {
+  background: var(--zdt_datetime_datestr_hover_bg);
+}
+
+[dir=ltr] .navigation {
+  margin-left: var(--zd_size2);
+}
+
+[dir=rtl] .navigation {
+  margin-right: var(--zd_size2);
+}
+
+.thMonYear {
+  font-size: var(--zd_font_size13);
+  line-height: var(--zd_size24);
+  color: var(--zdt_datetime_datestr_text);
+  composes: semibold;
+}
+
+.dateContainer {
+  margin: 0 var(--zd_size19) 0 var(--zd_size19);
+  padding: var(--zd_size6) 0 var(--zd_size10) 0;
+}
+
+.separator {
+  border-bottom: 1px dotted var(--zdt_datetime_separator_border);
+}
+
+.days {
+  min-height: var(--zd_size36);
+  composes: boxPadding;
+  composes: alignBetween from '../common/common.module.css';
+  padding-top: var(--zd_size7);
+}
+
+.daysStr {
+  font-size: var(--zd_font_size10);
+  color: var(--zdt_datetime_daystr_text);
+  text-transform: uppercase;
+  composes: semibold;
+}
+
+.dateRow {
+  height: var(--zd_size28);
+  composes: alignBetween from '../common/common.module.css';
+  margin: var(--zd_size1) 0 var(--zd_size5);
+}
+
+.dateRow:last-child {
+  margin-bottom: 0;
+}
+
+.sunday,
+.sunday:hover,
+.invalidDate.sunday:hover {
+  color: var(--zdt_datetime_invalid_hover_text);
+}
+
+.invalidDate {
+  color: var(--zdt_datetime_invalid_text);
+}
+
+.invalidDate.sunday {
+  color: var(--zdt_datetime_invaliddate_text);
+}
+
+.active,
+.active:hover,
+.active.today,
+.active:hover.today:hover {
+  color: var(--zdt_datetime_today_text);
+}
+
+.active, .active:hover, .active.today, .active:hover.today:hover {
+  background-color: var(--zdt_datetime_selected_bg);
+  border-radius: 50%;
+}
+
+.today {
+  border: 1px solid var(--zdt_datetime_today_border);
+  border-radius: 50%;
+}
+
+.today:hover {
+  border: 1px solid var(--zdt_datetime_today_border);
+  background-color: var(--zdt_datetime_datestr_hover_bg);
+}
+
+.timesection {
+  padding-top: var(--zd_size5);
+  padding-bottom: var(--zd_size10);
+}
+
+.dropDownContainer {
+  padding: 0 var(--zd_size5);
+}
+
+.dropDown {
+  width: var(--zd_size60);
+  display: inline-block;
+  position: relative;
+  margin: 0 var(--zd_size4);
+}
+
+.footer {
+  margin-top: var(--zd_size10);
+  padding-bottom: var(--zd_size12);
+}
+
+.timesection,
+.footer {
+  composes: boxPadding;
+}
+
+.space {
+  display: inline-block;
+  width: var(--zd_size15);
+}
+
+.downArrow {
+  color: var(--zdt_datetime_daystr_text);
+}
+
+[dir=ltr] .downArrow {
+  margin-left: var(--zd_size2);
+}
+
+[dir=rtl] .downArrow {
+  margin-right: var(--zd_size2);
+}
+
+.dateText {
+  cursor: pointer;
+}
+
+.dateText:hover .downArrow {
+  color: var(--zdt_datetime_datestr_text);
+}
+
+.text {
+  composes: boxPadding;
+  font-size: var(--zd_font_size11);
+  text-transform: uppercase;
+  color: var(--zdt_datetime_text);
+  composes: semibold;
+  display: block;
+  margin-top: var(--zd_size14);
+}
+
+.yearContainer {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+[dir=ltr] .yearContainer {
+  left: 0;
+}
+
+[dir=rtl] .yearContainer {
+  right: 0;
+}
+
+.subContainer {
+  position: relative;
+}
+
+.dropBox {
+  width: 100%;
+  border-radius: 3px;
+  box-shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+  background-color: var(--zdt_dropbox_default_bg);
 }

package/lib/DateTime/DateWidget.module.css

@@ -1,38 +1,38 @@
-/* $Id */
-.container {
-  position: relative;
-  composes: offSelection from '../common/common.module.css';
-}
-.readOnly, .readOnly > input, .disabled {
-  cursor: not-allowed;
-}
-.enabled {
-  cursor: pointer;
-}
-.textBox {
-  position: relative;
-}
-.inputLine {
-  position: absolute;
-  bottom: 0;
-  transition: border var(--zd_transition2) linear 0s;
-  border-bottom: 1px solid var(--zdt_datewidget_input_border);
-}
-[dir=ltr] .inputLine {
-  left: 0;
-  right: 0;
-}
-[dir=rtl] .inputLine {
-  right: 0;
-  left: 0;
-}
-.enabled:hover .inputLine {
-  border-bottom-color: var(--zdt_datewidget_enabled_border);
-}
-.textBoxFocus .inputLine {
-  border-bottom-color: var(--zdt_datewidget_textboxfocus_border);
-}
-
-.placeHolder input {
-  color: var(--zdt_datewidget_placeholder_text);
-}
+/* $Id */
+.container {
+  position: relative;
+  composes: offSelection from '../common/common.module.css';
+}
+.readOnly, .readOnly > input, .disabled {
+  cursor: not-allowed;
+}
+.enabled {
+  cursor: pointer;
+}
+.textBox {
+  position: relative;
+}
+.inputLine {
+  position: absolute;
+  bottom: 0;
+  transition: border var(--zd_transition2) linear 0s;
+  border-bottom: 1px solid var(--zdt_datewidget_input_border);
+}
+[dir=ltr] .inputLine {
+  left: 0;
+  right: 0;
+}
+[dir=rtl] .inputLine {
+  right: 0;
+  left: 0;
+}
+.enabled:hover .inputLine {
+  border-bottom-color: var(--zdt_datewidget_enabled_border);
+}
+.textBoxFocus .inputLine {
+  border-bottom-color: var(--zdt_datewidget_textboxfocus_border);
+}
+
+.placeHolder input {
+  color: var(--zdt_datewidget_placeholder_text);
+}