@zohodesk/components 1.0.0-temp-107 → 1.0.0-test-252

package/lib/DateTime/DateWidget.js

@@ -0,0 +1,1015 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("./props/propTypes");
+var _defaultProps = require("./props/defaultProps");
+var _datetimejs = _interopRequireDefault(require("@zohodesk/datetimejs"));
+var _DateTime = _interopRequireDefault(require("./DateTime"));
+var _Popup = _interopRequireDefault(require("../Popup/Popup"));
+var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
+var _Layout = require("../Layout");
+var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon/TextBoxIcon"));
+var _DateWidgetModule = _interopRequireDefault(require("./DateWidget.module.css"));
+var _validator = _interopRequireDefault(require("./validator"));
+var _common = require("../utils/datetime/common");
+var _dateFormatUtils = require("./dateFormatUtils");
+var _dateFormat = require("./dateFormatUtils/dateFormat");
+var _dayChange = require("./dateFormatUtils/dayChange");
+var _monthChange = require("./dateFormatUtils/monthChange");
+var _yearChange = require("./dateFormatUtils/yearChange");
+var _timeChange = require("./dateFormatUtils/timeChange");
+var _Common = require("../utils/Common");
+var _constants = require("./constants");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+/* eslint-disable react/no-unused-prop-types */
+/* eslint css-modules/no-unused-class: [0, { markAsUsed: 'inputLine'] }] */
+var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
+  _inherits(DateWidgetComponent, _React$Component);
+  var _super = _createSuper(DateWidgetComponent);
+  function DateWidgetComponent(props) {
+    var _this;
+    _classCallCheck(this, DateWidgetComponent);
+    _this = _super.call(this, props);
+    _this.handleSelect = _this.handleSelect.bind(_assertThisInitialized(_this));
+    _this.handleTogglePopup = _this.handleTogglePopup.bind(_assertThisInitialized(_this));
+    _this.handleGetDisplayText = _this.handleGetDisplayText.bind(_assertThisInitialized(_this));
+    _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
+    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
+    _this.getValueInputRef = _this.getValueInputRef.bind(_assertThisInitialized(_this));
+    _this.handleGetMethods = _this.handleGetMethods.bind(_assertThisInitialized(_this));
+    _this.handleInputClick = _this.handleInputClick.bind(_assertThisInitialized(_this));
+    _this.handleGetShowValue = _this.handleGetShowValue.bind(_assertThisInitialized(_this));
+    _this.handleSelection = _this.handleSelection.bind(_assertThisInitialized(_this));
+    _this.handleDateType = _this.handleDateType.bind(_assertThisInitialized(_this));
+    _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_this));
+    _this.handleGetAllowedType = _this.handleGetAllowedType.bind(_assertThisInitialized(_this));
+    _this.handleDateClear = _this.handleDateClear.bind(_assertThisInitialized(_this));
+    _this.handleDateTimeClear = _this.handleDateTimeClear.bind(_assertThisInitialized(_this));
+    _this.handleMouseDown = _this.handleMouseDown.bind(_assertThisInitialized(_this));
+    _this.handleDateIconClick = _this.handleDateIconClick.bind(_assertThisInitialized(_this));
+    _this.handleSelectionRangeDetails = _this.handleSelectionRangeDetails.bind(_assertThisInitialized(_this));
+    _this.handleBlurSelectionRange = _this.handleBlurSelectionRange.bind(_assertThisInitialized(_this));
+    _this.state = {
+      selected: '',
+      displayText: '',
+      dateFormatDetails: {},
+      dateFormatSelection: {},
+      day: '',
+      month: '',
+      year: '',
+      hour: '',
+      minute: '',
+      noon: '',
+      isDateEdited: false,
+      stateFocusOrder: '',
+      isError: false,
+      isFocused: false
+    };
+    _this.oldFocusOrder = '';
+    _this.focusOrder = '';
+    _this.oldKeyDownAction = ''; //'Arrow' || 'valueTyped'
+    _this.keyDownAction = ''; //'Arrow' || 'valueTyped'
+    _this.isMouseDown = false;
+    return _this;
+  }
+  _createClass(DateWidgetComponent, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var validation = this.props.validation;
+      var selected = this.state.selected;
+      if (validation && validation.validate) {
+        this.validateOnSelect(selected, this.props);
+      }
+      var _this$handleGetDispla = this.handleGetDisplayText(this.props),
+        displayText = _this$handleGetDispla.displayText,
+        newSelected = _this$handleGetDispla.selected;
+      this.setState({
+        displayText: displayText,
+        selected: newSelected
+      });
+      this.handleSelectionRangeDetails(this.props);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var _this$state = this.state,
+        selected = _this$state.selected,
+        day = _this$state.day,
+        month = _this$state.month,
+        year = _this$state.year,
+        hour = _this$state.hour,
+        minute = _this$state.minute,
+        noon = _this$state.noon,
+        isDateEdited = _this$state.isDateEdited,
+        stateFocusOrder = _this$state.stateFocusOrder,
+        isFocused = _this$state.isFocused;
+      var _this$props = this.props,
+        value = _this$props.value,
+        validation = _this$props.validation,
+        isPopupReady = _this$props.isPopupReady,
+        _this$props$dateForma = _this$props.dateFormat,
+        dateFormat = _this$props$dateForma === void 0 ? '' : _this$props$dateForma,
+        is24Hour = _this$props.is24Hour,
+        isHideCurrentYear = _this$props.isHideCurrentYear;
+      if (validation && validation.validate) {
+        this.validateOnSelect(selected, this.props);
+      }
+      if (value !== prevProps.value || dateFormat !== prevProps.dateFormat || is24Hour !== prevProps.is24Hour || isHideCurrentYear !== prevProps.isHideCurrentYear) {
+        var _this$handleGetDispla2 = this.handleGetDisplayText(this.props),
+          displayText = _this$handleGetDispla2.displayText,
+          _selected = _this$handleGetDispla2.selected;
+        this.setState({
+          selected: _selected,
+          displayText: displayText
+        });
+        if (value !== _constants.INVALID_DATE) {
+          this.setState({
+            day: '',
+            month: '',
+            year: '',
+            hour: '',
+            minute: '',
+            noon: '',
+            isDateEdited: false,
+            isError: false
+          });
+        }
+      }
+      if (prevProps.isPopupReady !== isPopupReady) {
+        if (isPopupReady) {
+          this.resetLocalDate && this.resetLocalDate();
+        }
+      }
+      var haveLocalValue = [day, month, year, hour, minute, noon].some(function (value) {
+        return !(0, _Common.getIsEmptyValue)(value);
+      });
+      if (isDateEdited !== haveLocalValue) {
+        this.setState({
+          isDateEdited: haveLocalValue
+        });
+      }
+      if (value !== prevProps.value || dateFormat !== prevProps.dateFormat || is24Hour !== prevProps.is24Hour || (0, _dateFormatUtils.arrayIsNotEqual)([day, month, year, hour, minute, noon], [prevState.day, prevState.month, prevState.year, prevState.hour, prevState.minute, prevState.noon])) {
+        this.handleSelectionRangeDetails(this.props);
+      }
+
+      // if (stateFocusOrder !== prevState.stateFocusOrder) {
+
+      isFocused && !(0, _Common.getIsEmptyValue)(stateFocusOrder) && this.handleSelection(stateFocusOrder);
+      this.handleBlurSelectionRange(stateFocusOrder, prevState.stateFocusOrder);
+      // }
+
+      // if (prevProps.isPopupOpen !== isPopupOpen) {
+      //   if (!isPopupOpen) {
+      //     this.valueInput && this.valueInput.focus({preventScroll:true});
+      //   }
+      // }
+    }
+  }, {
+    key: "handleSelect",
+    value: function handleSelect(userZoneSelectedTime, fotmattedValue, e) {
+      var _this$props2 = this.props,
+        id = _this$props2.id,
+        onSelect = _this$props2.onSelect,
+        closePopupOnly = _this$props2.closePopupOnly,
+        validation = _this$props2.validation;
+      if (validation && validation.validateOn) {
+        var selected = this.state.selected;
+        this.validateOnSelect(selected, this.props);
+      }
+      onSelect && onSelect(userZoneSelectedTime, id);
+      this.valueInput && this.valueInput.focus({
+        preventScroll: true
+      });
+      closePopupOnly(e);
+    }
+  }, {
+    key: "validateOnSelect",
+    value: function validateOnSelect(value, props) {
+      var defaultCheckPropsRules = ['required'];
+      var defaultValidateRules = ['required'];
+      var defaultType = 'onegroup';
+      var validation = props.validation,
+        onPassValidation = props.onPassValidation,
+        onFailValidation = props.onFailValidation;
+      var targetTag = this.elementRef;
+      if (validation) {
+        //validateOn won't work here ...
+        var newValidation = _validator["default"].combinePropsValidation(this.props, defaultType, 'onSelect', validation, defaultCheckPropsRules, defaultValidateRules);
+        var validationObj = {
+          validation: newValidation,
+          onPassValidation: onPassValidation,
+          onFailValidation: onFailValidation
+        };
+        _validator["default"].executeValidation(value, targetTag, validationObj, defaultType);
+      } else {
+        onPassValidation && onPassValidation(value, targetTag);
+      }
+    }
+  }, {
+    key: "handleTogglePopup",
+    value: function handleTogglePopup(e, isOpenOnly) {
+      var _this$props3 = this.props,
+        togglePopup = _this$props3.togglePopup,
+        _this$props3$defaultP = _this$props3.defaultPosition,
+        defaultPosition = _this$props3$defaultP === void 0 ? 'bottom' : _this$props3$defaultP,
+        openPopupOnly = _this$props3.openPopupOnly,
+        isPopupOpen = _this$props3.isPopupOpen,
+        removeClose = _this$props3.removeClose;
+      if (isOpenOnly) {
+        if (!isPopupOpen) {
+          togglePopup(e, "".concat(defaultPosition, "Right"));
+        } else {
+          removeClose(e);
+        }
+      }
+      !isOpenOnly && togglePopup(e, "".concat(defaultPosition, "Right"));
+    }
+  }, {
+    key: "handleSelectionRangeDetails",
+    value: function handleSelectionRangeDetails(props) {
+      var timeZone = props.timeZone,
+        dateFormat = props.dateFormat,
+        isDateTime = props.isDateTime,
+        value = props.value,
+        is24Hour = props.is24Hour;
+      var _this$state2 = this.state,
+        day = _this$state2.day,
+        month = _this$state2.month,
+        year = _this$state2.year,
+        hour = _this$state2.hour,
+        minute = _this$state2.minute,
+        noon = _this$state2.noon;
+      var selected = value === _constants.INVALID_DATE ? '' : value;
+
+      //New UI Changes
+      var dateFormatDetails = (0, _dateFormat.getDateFormatDetails)(dateFormat, {
+        isHideCurrentYear: false,
+        value: value,
+        timeZone: timeZone,
+        isDateTime: isDateTime
+      });
+      var dateFormatSelection = (0, _dateFormat.getDateFormatSelection)(dateFormatDetails, isDateTime, {
+        i18nShortMonths: _constants.i18nShortMonths,
+        i18nMonths: _constants.i18nMonths,
+        selectedValue: selected,
+        day: day,
+        month: month,
+        year: year,
+        hour: hour,
+        minute: minute,
+        noon: noon,
+        timeZone: timeZone,
+        is24Hour: is24Hour
+      });
+      var newDateFormat = dateFormatDetails.dateFormat;
+      this.setState({
+        dateFormatDetails: dateFormatDetails,
+        dateFormatSelection: dateFormatSelection,
+        newDateFormat: newDateFormat
+      });
+    }
+  }, {
+    key: "handleGetDisplayText",
+    value: function handleGetDisplayText(props) {
+      var timeZone = props.timeZone,
+        dateFormat = props.dateFormat,
+        isDateTime = props.isDateTime,
+        value = props.value,
+        is24Hour = props.is24Hour,
+        isHideCurrentYear = props.isHideCurrentYear;
+      var dateFormatDetails = (0, _dateFormat.getDateFormatDetails)(dateFormat, {
+        isHideCurrentYear: isHideCurrentYear,
+        value: value,
+        timeZone: timeZone,
+        isDateTime: isDateTime
+      });
+      var newDateFormat = dateFormatDetails.dateFormat;
+      var displayText = '';
+      var selected = value === _constants.INVALID_DATE ? '' : value;
+      if (selected) {
+        var format = newDateFormat,
+          convertedValue;
+        if (isDateTime) {
+          convertedValue = _datetimejs["default"].toDate(_datetimejs["default"].tz.utcToTz(value, timeZone));
+          format = "".concat(newDateFormat, " ").concat(is24Hour ? 'HH:mm' : 'hh:mm A');
+        } else {
+          convertedValue = _datetimejs["default"].toDate(value);
+        }
+        displayText = (0, _common.formatDate)(convertedValue, format);
+      }
+      return {
+        displayText: displayText,
+        selected: selected
+      };
+    }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(e) {
+      var keyCode = e.keyCode;
+      var _this$props4 = this.props,
+        isPopupOpen = _this$props4.isPopupOpen,
+        isPopupOpenOnEnter = _this$props4.isPopupOpenOnEnter,
+        onKeyDown = _this$props4.onKeyDown,
+        closePopupOnly = _this$props4.closePopupOnly,
+        cantEditOnPopupOpen = _this$props4.cantEditOnPopupOpen;
+      var isAllowedDateType = this.handleGetAllowedType();
+      if (isPopupOpen) {
+        if (keyCode === 9 && !isAllowedDateType) {
+          //on tab click popup close
+          closePopupOnly(e);
+        }
+        // ~~~~~~~ handle date navigation in dateTime popup ~~~~~
+        if (isAllowedDateType) {
+          cantEditOnPopupOpen && this.handleDateType(e);
+        }
+      } else if (!isPopupOpen) {
+        if (isPopupOpenOnEnter && keyCode === 13) {
+          //onEnter popup open
+          this.handleTogglePopup(e);
+        } else if (keyCode === 13) {
+          //onEnter submit case
+          onKeyDown && onKeyDown(e);
+        } else if (isAllowedDateType) {
+          this.handleDateType(e);
+        }
+      }
+    }
+  }, {
+    key: "getValueInputRef",
+    value: function getValueInputRef(el) {
+      var getRef = this.props.getRef;
+      this.valueInput = el;
+      getRef && getRef(el);
+    }
+  }, {
+    key: "handleFocus",
+    value: function handleFocus() {
+      var isAllowedDateType = this.handleGetAllowedType();
+      var isMouseDown = this.isMouseDown;
+      if (isAllowedDateType && !isMouseDown) {
+        var dateFormatSelection = this.state.dateFormatSelection;
+        var focusedIndex = dateFormatSelection.focusedIndex;
+        var _this$valueInput = this.valueInput,
+          newSelectionStart = _this$valueInput.selectionStart,
+          newSelectionEnd = _this$valueInput.selectionEnd;
+        var focusedOrder = focusedIndex["".concat(newSelectionStart, "_").concat(newSelectionEnd)] || 0;
+        isAllowedDateType && this.setState({
+          stateFocusOrder: focusedOrder,
+          isFocused: true
+        });
+      } else if (!isAllowedDateType) {
+        var valueInput = this.valueInput;
+        document.getSelection().removeAllRanges();
+        valueInput && valueInput.setSelectionRange(0, 0);
+        this.setState({
+          isFocused: true
+        });
+      }
+      var onFocus = this.props.onFocus;
+      onFocus && onFocus();
+    }
+  }, {
+    key: "handleBlur",
+    value: function handleBlur() {
+      this.focusOrder = '';
+      this.oldFocusOrder = '';
+      this.oldKeyDownAction = '';
+      this.keyDownAction = '';
+      this.setState({
+        isFocused: false
+      });
+
+      // const { valueInput } = this;
+      // document.getSelection().removeAllRanges();
+      // valueInput && valueInput.setSelectionRange(0, 0);
+
+      var onBlur = this.props.onBlur;
+      onBlur && onBlur();
+    }
+  }, {
+    key: "handleGetMethods",
+    value: function handleGetMethods(methods) {
+      var getMethods = this.props.getMethods;
+      var resetLocalDate = methods.resetLocalDate,
+        getStateValues = methods.getStateValues,
+        toggleYearView = methods.toggleYearView;
+      this.resetLocalDate = resetLocalDate;
+      this.getDateTimeStateValues = getStateValues;
+      this.DateTimeYearViewToggle = toggleYearView;
+      getMethods && getMethods(methods);
+    }
+  }, {
+    key: "handleDateType",
+    value: function handleDateType(e) {
+      var _this2 = this;
+      var keyCode = e.keyCode,
+        shiftKey = e.shiftKey;
+      var input = e.target;
+      if ((0, _dateFormatUtils.getIsSupportedKey)(e)) {
+        e.preventDefault();
+      }
+      var _this$props5 = this.props,
+        isDateTime = _this$props5.isDateTime,
+        timeZone = _this$props5.timeZone,
+        value = _this$props5.value,
+        onSelect = _this$props5.onSelect,
+        id = _this$props5.id,
+        min = _this$props5.min,
+        max = _this$props5.max,
+        minErrorText = _this$props5.minErrorText,
+        maxErrorText = _this$props5.maxErrorText,
+        onError = _this$props5.onError,
+        closePopupOnly = _this$props5.closePopupOnly,
+        is24Hour = _this$props5.is24Hour;
+      var _this$state3 = this.state,
+        dateFormatSelection = _this$state3.dateFormatSelection,
+        day = _this$state3.day,
+        month = _this$state3.month,
+        year = _this$state3.year,
+        hour = _this$state3.hour,
+        minute = _this$state3.minute,
+        noon = _this$state3.noon,
+        selected = _this$state3.selected,
+        dateFormatDetails = _this$state3.dateFormatDetails;
+      var focusedIndex = dateFormatSelection.focusedIndex,
+        order = dateFormatSelection.order;
+      var yearInfo = dateFormatDetails.yearInfo;
+      var _getDateDetails = (0, _dateFormat.getDateDetails)(selected, {
+          day: day,
+          month: month,
+          year: year,
+          hour: hour,
+          minute: minute,
+          noon: noon
+        }, isDateTime, timeZone, {
+          is24Hour: is24Hour
+        }),
+        _getDateDetails$day = _getDateDetails.day,
+        selectedDay = _getDateDetails$day === void 0 ? '' : _getDateDetails$day,
+        _getDateDetails$month = _getDateDetails.month,
+        selectedMonth = _getDateDetails$month === void 0 ? '' : _getDateDetails$month,
+        _getDateDetails$year = _getDateDetails.year,
+        selectedYear = _getDateDetails$year === void 0 ? '' : _getDateDetails$year,
+        _getDateDetails$hour = _getDateDetails.hour,
+        selectedHour = _getDateDetails$hour === void 0 ? '' : _getDateDetails$hour,
+        _getDateDetails$minut = _getDateDetails.minute,
+        selectedMinute = _getDateDetails$minut === void 0 ? '' : _getDateDetails$minut,
+        _getDateDetails$noon = _getDateDetails.noon,
+        selectedNoon = _getDateDetails$noon === void 0 ? '' : _getDateDetails$noon;
+      var newSelectionStart = input.selectionStart,
+        newSelectionEnd = input.selectionEnd;
+      var focusedOrder = focusedIndex["".concat(newSelectionStart, "_").concat(newSelectionEnd)];
+      var _ref = order[focusedOrder] || {},
+        type = _ref.type;
+      this.oldFocusOrder = this.focusOrder;
+      this.focusOrder = focusedOrder;
+      if (keyCode === 38 || keyCode === 40) {
+        //up arrow && down arrow
+        this.oldKeyDownAction = this.keyDownAction;
+        this.keyDownAction = 'Arrow';
+      } else {
+        this.oldKeyDownAction = this.keyDownAction;
+        this.keyDownAction = 'valueTyped';
+      }
+      var focusedOrders = {
+        focusOrder: this.focusOrder,
+        oldFocusOrder: this.oldFocusOrder
+      };
+      var keyActions = {
+        oldKeyAction: this.oldKeyDownAction,
+        keyAction: this.keyDownAction
+      };
+      var newDay = selectedDay,
+        newMonth = selectedMonth,
+        newYear = selectedYear,
+        newHour = selectedHour,
+        newMinute = selectedMinute,
+        newNoon = selectedNoon,
+        isValueChanged = false,
+        newFocusOrder = focusedOrder;
+      if (keyCode === 9 && shiftKey && !(0, _Common.getIsEmptyValue)(focusedOrder) && focusedOrder !== 0) {
+        e.preventDefault();
+        this.setState({
+          stateFocusOrder: focusedOrder - 1
+        });
+      } else if (keyCode === 9 && !shiftKey && !(0, _Common.getIsEmptyValue)(focusedOrder) && order.length - 1 !== focusedOrder) {
+        e.preventDefault();
+        this.setState({
+          stateFocusOrder: focusedOrder + 1
+        });
+      } else if (keyCode === 39) {
+        //arrow right
+        (0, _Common.getIsEmptyValue)(focusedOrder) ? this.setState({
+          stateFocusOrder: 0
+        }) : this.setState({
+          stateFocusOrder: focusedOrder + 1
+        });
+      } else if (keyCode === 37) {
+        //arrow left
+        (0, _Common.getIsEmptyValue)(focusedOrder) ? this.setState({
+          stateFocusOrder: order.length - 1
+        }) : this.setState({
+          stateFocusOrder: focusedOrder - 1
+        });
+      } else if (keyCode === 9) {
+        //on tab click popup close
+        closePopupOnly(e);
+      } else if (type === 'day') {
+        var _getChangedDay = (0, _dayChange.getChangedDay)({
+          day: selectedDay,
+          month: selectedMonth,
+          year: selectedYear
+        }, e, focusedOrders, keyActions);
+        newDay = _getChangedDay.day;
+        isValueChanged = _getChangedDay.isChanged;
+        newFocusOrder = _getChangedDay.focusOrder;
+      } else if (type === 'month') {
+        var _getChangedMonth = (0, _monthChange.getChangedMonth)({
+          day: selectedDay,
+          month: selectedMonth,
+          year: selectedYear
+        }, e, focusedOrders, keyActions);
+        newMonth = _getChangedMonth.month;
+        isValueChanged = _getChangedMonth.isChanged;
+        newFocusOrder = _getChangedMonth.focusOrder;
+      } else if (type === 'year') {
+        var _getChangedYear = (0, _yearChange.getChangedYear)({
+          day: selectedDay,
+          month: selectedMonth,
+          year: selectedYear
+        }, e, focusedOrders, keyActions, {
+          yearInfo: yearInfo
+        });
+        newYear = _getChangedYear.year;
+        isValueChanged = _getChangedYear.isChanged;
+        newFocusOrder = _getChangedYear.focusOrder;
+      } else if (type === 'hour') {
+        var _getChangedHour = (0, _timeChange.getChangedHour)({
+          hour: selectedHour
+        }, e, focusedOrders, keyActions, {
+          is24Hour: is24Hour
+        });
+        newHour = _getChangedHour.hour;
+        isValueChanged = _getChangedHour.isChanged;
+        newFocusOrder = _getChangedHour.focusOrder;
+      } else if (type === 'minute') {
+        var _getChangedMinute = (0, _timeChange.getChangedMinute)({
+          minute: selectedMinute
+        }, e, focusedOrders, keyActions);
+        newMinute = _getChangedMinute.minute;
+        isValueChanged = _getChangedMinute.isChanged;
+        newFocusOrder = _getChangedMinute.focusOrder;
+      } else if (type === 'noon') {
+        var _getChangedNoon = (0, _timeChange.getChangedNoon)({
+          noon: selectedNoon
+        }, e, focusedOrders, keyActions);
+        newNoon = _getChangedNoon.noon;
+        isValueChanged = _getChangedNoon.isChanged;
+        newFocusOrder = _getChangedNoon.focusOrder;
+      }
+      if (isValueChanged) {
+        var currentValue = {
+          day: newDay,
+          month: newMonth,
+          year: newYear,
+          hour: newHour,
+          minute: newMinute,
+          noon: newNoon
+        };
+        var errorCaseHandle = function errorCaseHandle(isEmptyValError) {
+          _this2.setState(function () {
+            return {
+              day: newDay,
+              month: newMonth,
+              year: newYear,
+              hour: newHour,
+              minute: newMinute,
+              noon: newNoon,
+              stateFocusOrder: newFocusOrder,
+              isDateEdited: true,
+              isError: !isEmptyValError
+            };
+          });
+          var newSelected = isEmptyValError ? '' : _constants.INVALID_DATE;
+          value !== newSelected && onSelect && onSelect(newSelected, id);
+        };
+        var _getIsValidDate = (0, _dateFormat.getIsValidDate)(currentValue, isDateTime, {
+            is24Hour: is24Hour
+          }),
+          isError = _getIsValidDate.isError,
+          isEmptyValError = _getIsValidDate.isEmptyValError;
+        if (isError) {
+          errorCaseHandle(isEmptyValError);
+        } else {
+          var _getSelectedDate = (0, _dateFormat.getSelectedDate)(currentValue, {
+              min: min,
+              max: max,
+              timeZone: timeZone,
+              isDateTime: isDateTime,
+              is24Hour: is24Hour
+            }),
+            selectedValue = _getSelectedDate.selectedValue,
+            selectedDateError = _getSelectedDate.isError,
+            errorType = _getSelectedDate.errorType;
+          if (selectedDateError) {
+            if (errorType === 'MIN') {
+              onError && onError(minErrorText, true);
+            } else if (errorType === 'MAX') {
+              onError && onError(maxErrorText, true);
+            }
+            errorCaseHandle();
+          } else {
+            this.setState(function () {
+              return {
+                day: '',
+                month: '',
+                year: '',
+                hour: '',
+                minute: '',
+                noon: '',
+                isDateEdited: false,
+                stateFocusOrder: newFocusOrder,
+                isError: false
+              };
+            });
+            onSelect && onSelect(selectedValue, id);
+          }
+        }
+      }
+    }
+  }, {
+    key: "handleSelection",
+    value: function handleSelection() {
+      var focusOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var isAllowedDateType = this.handleGetAllowedType();
+      if (isAllowedDateType) {
+        var dateFormatSelection = this.state.dateFormatSelection;
+        var _dateFormatSelection$ = dateFormatSelection.order,
+          order = _dateFormatSelection$ === void 0 ? {} : _dateFormatSelection$;
+        var _ref2 = order[focusOrder] || {},
+          index = _ref2.index;
+        if (!index) {
+          focusOrder = 0;
+          var _ref3 = order[focusOrder] || {};
+          index = _ref3.index;
+        }
+        if (index && this.valueInput) {
+          document.getSelection().removeAllRanges();
+          this.valueInput.setSelectionRange(index[0], index[1]);
+        }
+      }
+    }
+  }, {
+    key: "handleInputClick",
+    value: function handleInputClick(e) {
+      this.isMouseDown = false;
+      var dateFormatSelection = this.state.dateFormatSelection;
+      var input = e.target;
+      var selectionEnd = input.selectionEnd;
+      e.preventDefault();
+      var clickIndex = dateFormatSelection.clickIndex;
+      var focusOrder = clickIndex[selectionEnd] || clickIndex[selectionEnd - 1] || 0;
+      var isAllowedDateType = this.handleGetAllowedType();
+      if (isAllowedDateType) {
+        this.setState({
+          stateFocusOrder: focusOrder,
+          isFocused: true
+        });
+      }
+      if (!isAllowedDateType) {
+        this.handleTogglePopup(e);
+      } else {
+        var _this$props6 = this.props,
+          isPopupOpenOnClick = _this$props6.isPopupOpenOnClick,
+          isReadOnly = _this$props6.isReadOnly,
+          isDisabled = _this$props6.isDisabled;
+        if (isPopupOpenOnClick && (!isReadOnly || !isDisabled)) {
+          this.handleTogglePopup(e, true);
+        }
+        var _this$props7 = this.props,
+          isPopupCloseOnClick = _this$props7.isPopupCloseOnClick,
+          isPopupOpen = _this$props7.isPopupOpen,
+          closePopupOnly = _this$props7.closePopupOnly;
+        if (isPopupCloseOnClick && !isPopupOpen) {
+          closePopupOnly && closePopupOnly(e);
+        }
+      }
+    }
+  }, {
+    key: "handleMouseDown",
+    value: function handleMouseDown() {
+      this.isMouseDown = true;
+    }
+  }, {
+    key: "handleGetShowValue",
+    value: function handleGetShowValue() {
+      var _this$state4 = this.state,
+        day = _this$state4.day,
+        month = _this$state4.month,
+        year = _this$state4.year,
+        hour = _this$state4.hour,
+        minute = _this$state4.minute,
+        noon = _this$state4.noon,
+        dateFormatDetails = _this$state4.dateFormatDetails,
+        displayText = _this$state4.displayText,
+        newDateFormat = _this$state4.newDateFormat,
+        isDateEdited = _this$state4.isDateEdited,
+        isFocused = _this$state4.isFocused,
+        selected = _this$state4.selected;
+      var _this$props8 = this.props,
+        isDateTime = _this$props8.isDateTime,
+        is24Hour = _this$props8.is24Hour,
+        isPopupReady = _this$props8.isPopupReady,
+        timeZone = _this$props8.timeZone,
+        isPopupOpen = _this$props8.isPopupOpen;
+      if (isDateEdited || isFocused || isPopupReady || isPopupOpen) {
+        var _getDateDetails2 = (0, _dateFormat.getDateDetails)(selected, {
+            day: day,
+            month: month,
+            year: year,
+            hour: hour,
+            minute: minute,
+            noon: noon
+          }, isDateTime, timeZone, {
+            is24Hour: is24Hour
+          }),
+          _getDateDetails2$day = _getDateDetails2.day,
+          selectedDay = _getDateDetails2$day === void 0 ? '' : _getDateDetails2$day,
+          _getDateDetails2$mont = _getDateDetails2.month,
+          selectedMonth = _getDateDetails2$mont === void 0 ? '' : _getDateDetails2$mont,
+          _getDateDetails2$year = _getDateDetails2.year,
+          selectedYear = _getDateDetails2$year === void 0 ? '' : _getDateDetails2$year,
+          _getDateDetails2$hour = _getDateDetails2.hour,
+          selectedHour = _getDateDetails2$hour === void 0 ? '' : _getDateDetails2$hour,
+          _getDateDetails2$minu = _getDateDetails2.minute,
+          selectedMinute = _getDateDetails2$minu === void 0 ? '' : _getDateDetails2$minu,
+          _getDateDetails2$noon = _getDateDetails2.noon,
+          selectedNoon = _getDateDetails2$noon === void 0 ? '' : _getDateDetails2$noon;
+        var dateTimeString = (0, _dateFormat.getDateTimeString)({
+          day: selectedDay,
+          month: selectedMonth,
+          year: selectedYear,
+          hour: selectedHour,
+          minute: selectedMinute,
+          noon: selectedNoon
+        }, dateFormatDetails, isDateTime, {
+          i18nShortMonths: _constants.i18nShortMonths,
+          i18nMonths: _constants.i18nMonths,
+          is24Hour: is24Hour
+        });
+        return dateTimeString;
+      } else if (displayText) {
+        return displayText;
+      }
+      var timeFormat = is24Hour ? ' HH:mm' : ' hh:mm --';
+      var dateTimeFormat = isDateTime ? "".concat(newDateFormat).concat(timeFormat) : newDateFormat;
+      return dateTimeFormat || '';
+    }
+  }, {
+    key: "handleGetAllowedType",
+    value: function handleGetAllowedType() {
+      var _this$props9 = this.props,
+        isReadOnly = _this$props9.isReadOnly,
+        isDisabled = _this$props9.isDisabled,
+        isEditable = _this$props9.isEditable;
+      if (isEditable) {
+        if (isReadOnly || isDisabled) {
+          return false;
+        }
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "handleDateClear",
+    value: function handleDateClear() {
+      var _this$props10 = this.props,
+        id = _this$props10.id,
+        onSelect = _this$props10.onSelect,
+        value = _this$props10.value;
+      this.setState({
+        day: '',
+        month: '',
+        year: '',
+        hour: '',
+        minute: '',
+        noon: '',
+        isDateEdited: false,
+        stateFocusOrder: 0,
+        isError: false
+      });
+      value && onSelect && onSelect('', id);
+      this.valueInput && this.valueInput.focus({
+        preventScroll: true
+      });
+    }
+  }, {
+    key: "handleDateTimeClear",
+    value: function handleDateTimeClear(e) {
+      this.handleDateClear();
+      var closePopupOnly = this.props.closePopupOnly;
+      closePopupOnly(e);
+    }
+  }, {
+    key: "handleDateIconClick",
+    value: function handleDateIconClick(e) {
+      this.handleTogglePopup(e);
+      this.valueInput && this.valueInput.focus({
+        preventScroll: true
+      });
+    }
+  }, {
+    key: "handleBlurSelectionRange",
+    value: function handleBlurSelectionRange() {
+      var focusOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      var oldFocusOrder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+      var isAllowedDateType = this.handleGetAllowedType();
+      if (isAllowedDateType) {
+        // if (focusOrder !== oldFocusOrder) {
+        var _this$state$dateForma = this.state.dateFormatSelection,
+          dateFormatSelection = _this$state$dateForma === void 0 ? {} : _this$state$dateForma;
+        var _dateFormatSelection$2 = dateFormatSelection.order,
+          order = _dateFormatSelection$2 === void 0 ? [] : _dateFormatSelection$2;
+        var isPopupOpen = this.props.isPopupOpen;
+
+        // const { type: oldFocusedType = '' } = order[oldFocusOrder] || {};
+        var _ref4 = order[focusOrder] || {},
+          _ref4$type = _ref4.type,
+          focusedType = _ref4$type === void 0 ? '' : _ref4$type;
+        var _this$getDateTimeStat = this.getDateTimeStateValues(),
+          isYearView = _this$getDateTimeStat.isYearView,
+          oldIsMonthOpen = _this$getDateTimeStat.isMonthOpen;
+        var yearViewTypes = ['month', 'year'];
+        var isMonthOpen = focusedType === 'month';
+        if (isPopupOpen) {
+          if (yearViewTypes.indexOf(focusedType) >= 0 && (!isYearView || isMonthOpen !== oldIsMonthOpen)) {
+            this.DateTimeYearViewToggle(true, isMonthOpen);
+          } else if (yearViewTypes.indexOf(focusedType) === -1 && isYearView) {
+            this.DateTimeYearViewToggle(false, false);
+          }
+        }
+        // }
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props11 = this.props,
+        removeClose = _this$props11.removeClose,
+        minErrorText = _this$props11.minErrorText,
+        maxErrorText = _this$props11.maxErrorText,
+        min = _this$props11.min,
+        max = _this$props11.max,
+        placeholder = _this$props11.placeholder,
+        isPopupOpen = _this$props11.isPopupOpen,
+        isPopupReady = _this$props11.isPopupReady,
+        isDateTime = _this$props11.isDateTime,
+        position = _this$props11.position,
+        textBoxVariant = _this$props11.textBoxVariant,
+        textBoxSize = _this$props11.textBoxSize,
+        _this$props11$childre = _this$props11.children,
+        children = _this$props11$childre === void 0 ? null : _this$props11$childre,
+        isDisabled = _this$props11.isDisabled,
+        getContainerRef = _this$props11.getContainerRef,
+        getTargetRef = _this$props11.getTargetRef,
+        timeZone = _this$props11.timeZone,
+        isReadOnly = _this$props11.isReadOnly,
+        dataId = _this$props11.dataId,
+        needResponsive = _this$props11.needResponsive,
+        className = _this$props11.className,
+        needBorder = _this$props11.needBorder,
+        defaultTime = _this$props11.defaultTime,
+        needDefaultTime = _this$props11.needDefaultTime,
+        borderColor = _this$props11.borderColor,
+        i18nKeys = _this$props11.i18nKeys,
+        needErrorOnBlur = _this$props11.needErrorOnBlur,
+        htmlId = _this$props11.htmlId,
+        iconOnHover = _this$props11.iconOnHover,
+        is24Hour = _this$props11.is24Hour,
+        isAbsolutePositioningNeeded = _this$props11.isAbsolutePositioningNeeded,
+        positionsOffset = _this$props11.positionsOffset,
+        targetOffset = _this$props11.targetOffset,
+        isRestrictScroll = _this$props11.isRestrictScroll,
+        dropBoxPortalId = _this$props11.dropBoxPortalId;
+      var _this$state5 = this.state,
+        _this$state5$selected = _this$state5.selected,
+        value = _this$state5$selected === void 0 ? '' : _this$state5$selected,
+        isError = _this$state5.isError,
+        isDateEdited = _this$state5.isDateEdited,
+        isFocused = _this$state5.isFocused;
+      var showValue = this.handleGetShowValue();
+      var isAllowedDateType = this.handleGetAllowedType();
+      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)
+      }, children ? /*#__PURE__*/_react["default"].createElement("div", {
+        "data-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)
+      }, children) : /*#__PURE__*/_react["default"].createElement("div", {
+        "data-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),
+        onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
+        ref: getTargetRef
+      }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+        htmlId: htmlId,
+        value: showValue ? showValue : placeholder,
+        needBorder: needBorder,
+        size: textBoxSize,
+        variant: textBoxVariant,
+        inputRef: this.getValueInputRef,
+        isDisabled: isDisabled,
+        dataId: dataId,
+        needReadOnlyStyle: isReadOnly || isDisabled,
+        onKeyDown: this.handleKeyDown,
+        onFocus: this.handleFocus,
+        borderColor: showError ? 'error' : borderColor,
+        needEffect: !(isDisabled || isReadOnly || showError),
+        isClickable: true,
+        onClick: isDisabled || isReadOnly ? null : this.handleInputClick,
+        onBlur: this.handleBlur,
+        onClear: showClear ? this.handleDateClear : null,
+        isReadOnly: isReadOnly,
+        onMouseDown: this.handleMouseDown,
+        showClearIcon: showClear,
+        customClass: {
+          customTBoxWrap: isDateEdited || value ? '' : _DateWidgetModule["default"].placeHolder
+        },
+        iconOnHover: iconOnHover,
+        isFocus: isPopupReady,
+        autoComplete: false
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        align: "both",
+        onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        name: "ZD-datepicker",
+        size: "12"
+      })))), isReadOnly || isDisabled ? null : /*#__PURE__*/_react["default"].createElement(_DateTime["default"], {
+        value: value,
+        isDateTimeField: isDateTime,
+        onSelect: this.handleSelect,
+        timeZone: timeZone,
+        min: min,
+        max: max,
+        maxErrorText: maxErrorText,
+        minErrorText: minErrorText,
+        position: position,
+        isReady: isPopupOpen,
+        isActive: isPopupReady,
+        getRef: getContainerRef,
+        onClick: removeClose,
+        needResponsive: needResponsive,
+        dataId: dataId,
+        defaultTime: defaultTime,
+        needDefaultTime: needDefaultTime,
+        getMethods: this.handleGetMethods,
+        onClear: this.handleDateTimeClear,
+        needAction: isDateTime,
+        onDateSelect: !isDateTime ? this.handleSelect : null,
+        i18nKeys: i18nKeys,
+        is24Hour: is24Hour,
+        isAbsolute: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
+        dropBoxPortalId: dropBoxPortalId
+      }));
+    }
+  }]);
+  return DateWidgetComponent;
+}(_react["default"].Component);
+DateWidgetComponent.defaultProps = _defaultProps.DateWidget_defaultProps;
+DateWidgetComponent.propTypes = _propTypes.DateWidget_propTypes;
+var DateWidget = (0, _Popup["default"])(DateWidgetComponent);
+DateWidget.defaultProps = DateWidgetComponent.defaultProps;
+
+// eslint-disable-next-line no-undef
+if (false) {
+  DateWidgetComponent.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    external: true,
+    description: ' '
+  };
+  // eslint-disable-next-line react/forbid-foreign-prop-types
+  DateWidget.propTypes = DateWidgetComponent.propTypes;
+}
+var _default = DateWidget;
+exports["default"] = _default;