@zohodesk/components 1.1.0 → 1.2.0-temp-195

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);
+}

package/lib/DateTime/DaysRow.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = require("./props/propTypes");
+
 var _DateTimeModule = _interopRequireDefault(require("./DateTime.module.css"));
 
 var _Layout = require("../Layout");
@@ -74,4 +76,5 @@ var DaysRow = /*#__PURE__*/function (_PureComponent) {
   return DaysRow;
 }(_react.PureComponent);
 
-exports["default"] = DaysRow;
+exports["default"] = DaysRow;
+DaysRow.propTypes = _propTypes.DaysRow_propTypes;

package/lib/DateTime/Time.js

@@ -9,6 +9,10 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = require("./props/propTypes");
+
+var _defaultProps = require("./props/defaultProps");
+
 var _Layout = require("../Layout");
 
 var _Select = _interopRequireDefault(require("../Select/Select"));
@@ -113,6 +117,8 @@ var Time = /*#__PURE__*/function (_PureComponent) {
 }(_react.PureComponent);
 
 exports["default"] = Time;
+Time.propTypes = _propTypes.Time_propTypes;
+Time.defaultProps = _defaultProps.Time_defaultProps;
 
 var Hour = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(Hour, _React$PureComponent);

package/lib/DateTime/YearView.js

@@ -267,7 +267,6 @@ var YearView = /*#__PURE__*/function (_React$PureComponent3) {
       var _this$props5 = this.props,
           viewedYear = _this$props5.viewedYear,
           viewedMonth = _this$props5.viewedMonth,
-          monthNames = _this$props5.monthNames,
           monthNamesShort = _this$props5.monthNamesShort,
           isMonthOpen = _this$props5.isMonthOpen;
       viewedYear = parseInt(viewedYear) || 0;

package/lib/DateTime/YearView.module.css

@@ -1,99 +1,99 @@
-[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) ;
-}
-
-.month {
-  width: 30.333%;
-  font-size: var(--zd_font_size12) ;
-  line-height: var(--zd_size26);
-  height: var(--zd_size26) ;
-  color: var(--zdt_yearview_month_text);
-  text-align: center;
-  margin: 0 0 var(--zd_size1) ;
-  cursor: pointer;
-  background-color: var(--zdt_yearview_month_bg);
-  border-radius: 20px;
-}
-
-.month:hover {
-  background-color: var(--zdt_yearview_month_hover_bg);
-}
-
-.currentMonth,
-.currentMonth:hover {
-  color: var(--zdt_yearview_currentmonth_text);
-}
-
-.currentMonth, .currentMonth:hover {
-  background-color: var(--zdt_yearview_currentmonth_bg);
-}
-
-.yearBox {
-  border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
-}
-
-.year {
-  padding: var(--zd_size7) 0 ;
-  cursor: pointer;
-}
-
-.year:hover .yearText,
-.year:hover .arrow {
-  color: var(--zdt_yearview_year_hover_text);
-}
-
-.yearText {
-  color: var(--zdt_yearview_yeartext_text);
-  font-size: var(--zd_font_size11) ;
-}
-
-.arrow {
-  color: var(--zdt_yearview_yeartext_text);
-  transition: transform var(--zd_transition1);
-}
-
-.isActive {
-  cursor: default;
-}
-
-.isActive .yearText {
-  font-family: var(--zd_semibold);
-  color: var(--zdt_yearview_year_hover_text);
-  font-size: var(--zd_font_size11) ;
-}
-
-.arrowActive {
-  color: var(--zdt_yearview_year_hover_text);
-}
-
-[dir=ltr] .arrowActive {
-  transform: rotate(180deg);
-}
-
-[dir=rtl] .arrowActive {
-  transform: rotate(-180deg);
-}
-
-.container {
-  height: 100% ;
-  overflow-y: auto;
-  overflow-x: hidden;
-  composes: boxPadding;
-  background-color: var(--zdt_yearview_default_bg);
-}
-
-.yearContainer {
-  height: var(--zd_size135) ;
-  overflow: hidden;
-  transition: height var(--zd_transition1);
-  padding-bottom: var(--zd_size5) ;
-}
-
-.toggleYear {
-  height: 0 ;
-  padding: 0 ;
+[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) ;
+}
+
+.month {
+  width: 30.333%;
+  font-size: var(--zd_font_size12) ;
+  line-height: 2.1667;
+  height: var(--zd_size26) ;
+  color: var(--zdt_yearview_month_text);
+  text-align: center;
+  margin: 0 0 var(--zd_size1) ;
+  cursor: pointer;
+  background-color: var(--zdt_yearview_month_bg);
+  border-radius: 20px;
+}
+
+.month:hover {
+  background-color: var(--zdt_yearview_month_hover_bg);
+}
+
+.currentMonth,
+.currentMonth:hover {
+  color: var(--zdt_yearview_currentmonth_text);
+}
+
+.currentMonth, .currentMonth:hover {
+  background-color: var(--zdt_yearview_currentmonth_bg);
+}
+
+.yearBox {
+  border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
+}
+
+.year {
+  padding: var(--zd_size7) 0 ;
+  cursor: pointer;
+}
+
+.year:hover .yearText,
+.year:hover .arrow {
+  color: var(--zdt_yearview_year_hover_text);
+}
+
+.yearText {
+  color: var(--zdt_yearview_yeartext_text);
+  font-size: var(--zd_font_size11) ;
+}
+
+.arrow {
+  color: var(--zdt_yearview_yeartext_text);
+  transition: transform var(--zd_transition1);
+}
+
+.isActive {
+  cursor: default;
+}
+
+.isActive .yearText {
+  font-family: var(--zd_semibold);
+  color: var(--zdt_yearview_year_hover_text);
+  font-size: var(--zd_font_size11) ;
+}
+
+.arrowActive {
+  color: var(--zdt_yearview_year_hover_text);
+}
+
+[dir=ltr] .arrowActive {
+  transform: rotate(180deg);
+}
+
+[dir=rtl] .arrowActive {
+  transform: rotate(-180deg);
+}
+
+.container {
+  height: 100% ;
+  overflow-y: auto;
+  overflow-x: hidden;
+  composes: boxPadding;
+  background-color: var(--zdt_yearview_default_bg);
+}
+
+.yearContainer {
+  height: var(--zd_size135) ;
+  overflow: hidden;
+  transition: height var(--zd_transition1);
+  padding-bottom: var(--zd_size5) ;
+}
+
+.toggleYear {
+  height: 0 ;
+  padding: 0 ;
 }

package/lib/DateTime/dateFormatUtils/dateFormat.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getDateDetails = getDateDetails;
 exports.getDateFormatDetails = getDateFormatDetails;
 exports.getDateFormatSelection = getDateFormatSelection;
+exports.getDateText = getDateText;
 exports.getDateTimeString = getDateTimeString;
 exports.getIsValidDate = getIsValidDate;
 exports.getSelectedDate = getSelectedDate;
@@ -234,6 +235,14 @@ function getDateTimeString() {
   return "".concat(dateString).concat(timeString);
 }
 
+function getDateText(value, isDateTime, timeZone) {
+  if (value && !timeZone) {
+    value = value.replace('Z', '');
+  }
+
+  return value ? isDateTime ? timeZone ? _datetimejs["default"].toDate(_datetimejs["default"].tz.utcToTz(value, timeZone)) : new Date(value) : timeZone ? _datetimejs["default"].toDate(value) : new Date(value) : new Date();
+}
+
 function getDateDetails(value, localValues, isDateTime, timeZone, _ref7) {
   var is24Hour = _ref7.is24Hour;
   var day = localValues.day,
@@ -244,7 +253,7 @@ function getDateDetails(value, localValues, isDateTime, timeZone, _ref7) {
       noon = localValues.noon;
 
   if (value) {
-    var dateObj = isDateTime ? _datetimejs["default"].toDate(_datetimejs["default"].tz.utcToTz(value, timeZone)) : value ? _datetimejs["default"].toDate(value) : new Date();
+    var dateObj = getDateText(value, isDateTime, timeZone);
     var selectedDay = dateObj.getDate();
     var selectedMonth = dateObj.getMonth();
     var selectedYear = dateObj.getFullYear();
@@ -409,7 +418,12 @@ function getSelectedDate(values, props) {
       selectedValue = '';
 
   if (isDateTime) {
-    selectedInMillis = _datetimejs["default"].tz.tzToUtc(Date.UTC(year, month, date, hour, mins), timeZone);
+    if (timeZone) {
+      selectedInMillis = _datetimejs["default"].tz.tzToUtc(Date.UTC(year, month, date, hour, mins), timeZone);
+    } else {
+      selectedInMillis = Date.UTC(year, month, date, hour, mins);
+    }
+
     selectedValue = _datetimejs["default"].ISO(selectedInMillis);
   } else {
     selectedInMillis = Date.UTC(year, month, date);

package/lib/DateTime/dateFormatUtils/dayChange.js

@@ -7,6 +7,8 @@ exports.getChangedDay = getChangedDay;
 
 var _index = require("./index");
 
+var _Common = require("../../utils/Common");
+
 /** * Methods ** */
 function getChangedDay(values, event, focusOrders, keyActions) {
   var keyCode = event.keyCode,
@@ -44,7 +46,7 @@ function getChangedDay(values, event, focusOrders, keyActions) {
       newDay -= 1;
     }
   } else if ((0, _index.getIsNumberTyped)(event)) {
-    var keyString = String.fromCharCode(which);
+    var keyString = (0, _Common.getKeyValue)(event);
     var newValue = isNewType ? keyString : day.toString() + keyString;
     newValue = Number.parseInt(newValue);
 

package/lib/DateTime/dateFormatUtils/index.js

@@ -27,18 +27,14 @@ exports.getNoonDetails = getNoonDetails;
 exports.getYearDetails = getYearDetails;
 exports.removeYearPattern = removeYearPattern;
 
-var _datetimejs = _interopRequireDefault(require("@zohodesk/datetimejs"));
-
 var _common = require("../../utils/datetime/common");
 
 var _constants = require("../constants");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _dateFormat = require("./dateFormat");
 
 /* eslint-disable no-param-reassign */
 
-/** * Libraries ** */
-
 /** * Methods ** */
 
 /** * Constants ** */
@@ -81,7 +77,7 @@ function getIsNumberTyped(event) {
       metaKey = event.metaKey,
       shiftKey = event.shiftKey;
 
-  if (keyCode >= 48 && keyCode <= 57 && !ctrlKey && !metaKey && !shiftKey) {
+  if ((keyCode >= 48 && keyCode <= 57 || keyCode >= 96 && keyCode <= 105) && !ctrlKey && !metaKey && !shiftKey) {
     return true;
   }
 
@@ -278,7 +274,7 @@ function getIsCurrentYear(_ref) {
   var isCurrentYear = false;
 
   if (value && value !== _constants.INVALID_DATE) {
-    var dateObj = isDateTime ? _datetimejs["default"].toDate(_datetimejs["default"].tz.utcToTz(value, timeZone)) : _datetimejs["default"].toDate(value);
+    var dateObj = (0, _dateFormat.getDateText)(value, isDateTime, timeZone);
     var currentDateObj = new Date();
     var currentYear = currentDateObj.getFullYear();
     var selectedYear = dateObj.getFullYear();

package/lib/DateTime/dateFormatUtils/monthChange.js

@@ -7,6 +7,8 @@ exports.getChangedMonth = getChangedMonth;
 
 var _index = require("./index");
 
+var _Common = require("../../utils/Common");
+
 /** * Methods ** */
 function getChangedMonth(values, event, focusOrders, keyActions) {
   var keyCode = event.keyCode,
@@ -48,7 +50,7 @@ function getChangedMonth(values, event, focusOrders, keyActions) {
       newMonth -= 1;
     }
   } else if ((0, _index.getIsNumberTyped)(event)) {
-    var keyString = String.fromCharCode(which);
+    var keyString = (0, _Common.getKeyValue)(event);
     var newValue = isNewType ? keyString : month.toString() + keyString;
     newValue = Number.parseInt(newValue);
 

package/lib/DateTime/dateFormatUtils/timeChange.js

@@ -61,7 +61,7 @@ function getChangedHour(values, event, focusOrders, keyActions) {
       newHour -= 1;
     }
   } else if ((0, _index.getIsNumberTyped)(event)) {
-    var keyString = String.fromCharCode(which);
+    var keyString = (0, _Common.getKeyValue)(event);
     var newValue = isNewType ? keyString : hour.toString() + keyString;
     newValue = Number.parseInt(newValue);
 
@@ -132,7 +132,7 @@ function getChangedMinute(values, event, focusOrders, keyActions) {
       newMinute -= 1;
     }
   } else if ((0, _index.getIsNumberTyped)(event)) {
-    var keyString = String.fromCharCode(which);
+    var keyString = (0, _Common.getKeyValue)(event);
     var newValue = isNewType ? keyString : minute.toString() + keyString;
     newValue = Number.parseInt(newValue);
 
@@ -206,7 +206,7 @@ function getChangedNoon(values, event, focusOrders
       newNoon = allowedValues[currentNoonIndex - 1];
     }
   } else if ((0, _index.getIsNoonValueTyped)(event)) {
-    var keyString = String.fromCharCode(which); // let newValue = isNewType ? keyString : noon.toString() + keyString;
+    var keyString = (0, _Common.getKeyValue)(event).toUpperCase(); // let newValue = isNewType ? keyString : noon.toString() + keyString;
 
     var newValue = keyString;
     var needChangeNoon = newNoon.indexOf(newValue) === -1 ? true : false;

package/lib/DateTime/dateFormatUtils/yearChange.js

@@ -7,6 +7,8 @@ exports.getChangedYear = getChangedYear;
 
 var _index = require("./index");
 
+var _Common = require("../../utils/Common");
+
 /** * Methods ** */
 function getChangedYear(values, event, focusOrders, keyActions, _ref) {
   var yearInfo = _ref.yearInfo;
@@ -64,7 +66,7 @@ function getChangedYear(values, event, focusOrders, keyActions, _ref) {
       newYear -= 1;
     }
   } else if ((0, _index.getIsNumberTyped)(event)) {
-    var keyString = String.fromCharCode(which);
+    var keyString = (0, _Common.getKeyValue)(event);
     var newValue = isNewType ? keyString : year.toString() + keyString;
     var newValueString = newValue || '';
     newValue = Number.parseInt(newValue);

package/lib/DateTime/props/defaultProps.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.YearView_defaultProps = exports.Span_defaultProps = exports.DateWidget_defaultProps = exports.DateTime_defaultProps = exports.CalendarView_defaultProps = void 0;
+exports.YearView_defaultProps = exports.Time_defaultProps = exports.Span_defaultProps = exports.DateWidget_defaultProps = exports.DateTime_defaultProps = exports.DateTimePopupFooter_defaultProps = exports.CalendarView_defaultProps = void 0;
 var CalendarView_defaultProps = {
   dataId: 'dateContainer',
   needBorder: true
@@ -59,4 +59,12 @@ var YearView_defaultProps = {
   dataId: 'dateContainer',
   needBorder: true
 };
-exports.YearView_defaultProps = YearView_defaultProps;
+exports.YearView_defaultProps = YearView_defaultProps;
+var DateTimePopupFooter_defaultProps = {
+  dataId: 'DateTimePopupFooter'
+};
+exports.DateTimePopupFooter_defaultProps = DateTimePopupFooter_defaultProps;
+var Time_defaultProps = {
+  dataId: 'Time'
+};
+exports.Time_defaultProps = Time_defaultProps;

package/lib/DateTime/props/propTypes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.YearView_propTypes = exports.Span_propTypes = exports.DateWidget_propTypes = exports.DateTime_propTypes = exports.CalendarView_propTypes = void 0;
+exports.YearView_propTypes = exports.Time_propTypes = exports.Span_propTypes = exports.DaysRow_propTypes = exports.DateWidget_propTypes = exports.DateTime_propTypes = exports.DateTimePopupHeader_propTypes = exports.DateTimePopupFooter_propTypes = exports.CalendarView_propTypes = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -29,7 +29,12 @@ var CalendarView_propTypes = {
   month: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   needBorder: _propTypes["default"].bool,
   onSelect: _propTypes["default"].func,
-  year: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+  year: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  dayNames: _propTypes["default"].array,
+  dayNamesShort: _propTypes["default"].array,
+  todayMonth: _propTypes["default"].string,
+  todayDate: _propTypes["default"].string,
+  todayYear: _propTypes["default"].string
 };
 exports.CalendarView_propTypes = CalendarView_propTypes;
 var Span_propTypes = {
@@ -88,7 +93,11 @@ var DateTime_propTypes = {
   value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   is24Hour: _propTypes["default"].bool,
   isDefaultPosition: _propTypes["default"].bool,
-  isToday: _propTypes["default"].bool
+  customDateFormat: _propTypes["default"].string,
+  positionsOffset: _propTypes["default"].array,
+  targetOffset: _propTypes["default"].string,
+  isRestrictScroll: _propTypes["default"].bool,
+  dropBoxPortalId: _propTypes["default"].string
 };
 exports.DateTime_propTypes = DateTime_propTypes;
 var DateWidget_propTypes = {
@@ -150,14 +159,61 @@ var DateWidget_propTypes = {
   onFocus: _propTypes["default"].func,
   onBlur: _propTypes["default"].func,
   boxSize: _propTypes["default"].string,
-  onError: _propTypes["default"].func
+  onError: _propTypes["default"].func,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  positionsOffset: _propTypes["default"].array,
+  targetOffset: _propTypes["default"].array,
+  isRestrictScroll: _propTypes["default"].bool,
+  dropBoxPortalId: _propTypes["default"].string,
+  a11y: _propTypes["default"].object
 };
 exports.DateWidget_propTypes = DateWidget_propTypes;
 var YearView_propTypes = {
-  dataId: _propTypes["default"].string,
-  needBorder: _propTypes["default"].bool,
   onSelectMonth: _propTypes["default"].func,
   onSelectYear: _propTypes["default"].func,
-  viewedYear: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+  viewedYear: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  viewedMonth: _propTypes["default"].string,
+  monthNamesShort: _propTypes["default"].array,
+  isMonthOpen: _propTypes["default"].bool
+};
+exports.YearView_propTypes = YearView_propTypes;
+var DateTimePopupFooter_propTypes = {
+  submitText: _propTypes["default"].string,
+  onSubmit: _propTypes["default"].func,
+  cancelText: _propTypes["default"].string,
+  onCancel: _propTypes["default"].func,
+  dataId: _propTypes["default"].string
+};
+exports.DateTimePopupFooter_propTypes = DateTimePopupFooter_propTypes;
+var DateTimePopupHeader_propTypes = {
+  onOpenYearView: _propTypes["default"].func,
+  showMonthTxt: _propTypes["default"].string,
+  isYearView: _propTypes["default"].bool,
+  prevMonthTitleText: _propTypes["default"].string,
+  nextMonthTitleText: _propTypes["default"].string,
+  onModifyCalendar: _propTypes["default"].func
+};
+exports.DateTimePopupHeader_propTypes = DateTimePopupHeader_propTypes;
+var DaysRow_propTypes = {
+  dayNames: _propTypes["default"].array,
+  dayNamesShort: _propTypes["default"].object
+};
+exports.DaysRow_propTypes = DaysRow_propTypes;
+var Time_propTypes = {
+  timeText: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  hourSuggestions: _propTypes["default"].array,
+  onHourSelect: _propTypes["default"].func,
+  hours: _propTypes["default"].string,
+  hourEmptyText: _propTypes["default"].string,
+  needResponsive: _propTypes["default"].bool,
+  minSuggestions: _propTypes["default"].array,
+  onMinutesSelect: _propTypes["default"].func,
+  mins: _propTypes["default"].string,
+  minuteEmptyText: _propTypes["default"].string,
+  ampmSuggestions: _propTypes["default"].array,
+  onAmPmSelect: _propTypes["default"].func,
+  amPm: _propTypes["default"].string,
+  is24Hour: _propTypes["default"].bool
 };
-exports.YearView_propTypes = YearView_propTypes;
+exports.Time_propTypes = Time_propTypes;