@zohodesk/components 1.1.0 → 1.2.0-temp-195

package/es/v1/DateTime/DateWidget.js

@@ -0,0 +1,1107 @@
+/**** Libraries ****/
+import React from 'react';
+import { DateWidget_propTypes } from './props/propTypes';
+import { DateWidget_defaultProps } from './props/defaultProps';
+/**** Components ****/
+
+import DateTime from './DateTime';
+import Popup from '../Popup/Popup';
+import { Icon } from '@zohodesk/icons';
+import { Container } from '../Layout';
+import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
+/**** CSS ****/
+
+import style from '../../DateTime/DateWidget.module.css';
+/**** Methods ****/
+
+import validator from '../../DateTime/validator';
+import { formatDate } from '../../utils/datetime/common';
+import { getIsSupportedKey, arrayIsNotEqual } from '../../DateTime/dateFormatUtils';
+import { getDateFormatDetails, getDateFormatSelection, getDateTimeString, getDateDetails, getIsValidDate, getSelectedDate, getDateText } from '../../DateTime/dateFormatUtils/dateFormat';
+import { getChangedDay } from '../../DateTime/dateFormatUtils/dayChange';
+import { getChangedMonth } from '../../DateTime/dateFormatUtils/monthChange';
+import { getChangedYear } from '../../DateTime/dateFormatUtils/yearChange';
+import { getChangedHour, getChangedMinute, getChangedNoon } from '../../DateTime/dateFormatUtils/timeChange';
+import { getIsEmptyValue } from '../../utils/Common';
+/** * Constants ** */
+
+import { INVALID_DATE, i18nShortMonths, i18nMonths } from '../../DateTime/constants';
+/* eslint-disable react/no-unused-prop-types */
+
+/* eslint css-modules/no-unused-class: [0, { markAsUsed: 'inputLine'] }] */
+
+class DateWidgetComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleSelect = this.handleSelect.bind(this);
+    this.handleTogglePopup = this.handleTogglePopup.bind(this);
+    this.handleGetDisplayText = this.handleGetDisplayText.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.getValueInputRef = this.getValueInputRef.bind(this);
+    this.handleGetMethods = this.handleGetMethods.bind(this);
+    this.handleInputClick = this.handleInputClick.bind(this);
+    this.handleGetShowValue = this.handleGetShowValue.bind(this);
+    this.handleSelection = this.handleSelection.bind(this);
+    this.handleDateType = this.handleDateType.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleGetAllowedType = this.handleGetAllowedType.bind(this);
+    this.handleDateClear = this.handleDateClear.bind(this);
+    this.handleDateTimeClear = this.handleDateTimeClear.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleDateIconClick = this.handleDateIconClick.bind(this);
+    this.handleSelectionRangeDetails = this.handleSelectionRangeDetails.bind(this);
+    this.handleBlurSelectionRange = this.handleBlurSelectionRange.bind(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;
+  }
+
+  componentDidMount() {
+    const {
+      validation
+    } = this.props;
+    const {
+      selected
+    } = this.state;
+
+    if (validation && validation.validate) {
+      this.validateOnSelect(selected, this.props);
+    }
+
+    const {
+      displayText,
+      selected: newSelected
+    } = this.handleGetDisplayText(this.props);
+    this.setState({
+      displayText,
+      selected: newSelected
+    });
+    this.handleSelectionRangeDetails(this.props);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      selected,
+      day,
+      month,
+      year,
+      hour,
+      minute,
+      noon,
+      isDateEdited,
+      stateFocusOrder,
+      isFocused
+    } = this.state;
+    const {
+      value,
+      validation,
+      isPopupReady,
+      dateFormat = '',
+      is24Hour,
+      isHideCurrentYear
+    } = this.props;
+
+    if (validation && validation.validate) {
+      this.validateOnSelect(selected, this.props);
+    }
+
+    if (value !== prevProps.value || dateFormat !== prevProps.dateFormat || is24Hour !== prevProps.is24Hour || isHideCurrentYear !== prevProps.isHideCurrentYear) {
+      const {
+        displayText,
+        selected
+      } = this.handleGetDisplayText(this.props);
+      this.setState({
+        selected,
+        displayText
+      });
+
+      if (value !== INVALID_DATE) {
+        this.setState({
+          day: '',
+          month: '',
+          year: '',
+          hour: '',
+          minute: '',
+          noon: '',
+          isDateEdited: false,
+          isError: false
+        });
+      }
+    }
+
+    if (prevProps.isPopupReady !== isPopupReady) {
+      if (isPopupReady) {
+        this.resetLocalDate && this.resetLocalDate();
+      }
+    }
+
+    const haveLocalValue = [day, month, year, hour, minute, noon].some(value => !getIsEmptyValue(value));
+
+    if (isDateEdited !== haveLocalValue) {
+      this.setState({
+        isDateEdited: haveLocalValue
+      });
+    }
+
+    if (value !== prevProps.value || dateFormat !== prevProps.dateFormat || is24Hour !== prevProps.is24Hour || 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 && !getIsEmptyValue(stateFocusOrder) && this.handleSelection(stateFocusOrder);
+    this.handleBlurSelectionRange(stateFocusOrder, prevState.stateFocusOrder); // }
+    // if (prevProps.isPopupOpen !== isPopupOpen) {
+    //   if (!isPopupOpen) {
+    //     this.valueInput && this.valueInput.focus({preventScroll:true});
+    //   }
+    // }
+  }
+
+  handleSelect(userZoneSelectedTime, fotmattedValue, e) {
+    const {
+      id,
+      onSelect,
+      closePopupOnly,
+      validation
+    } = this.props;
+
+    if (validation && validation.validateOn) {
+      const {
+        selected
+      } = this.state;
+      this.validateOnSelect(selected, this.props);
+    }
+
+    onSelect && onSelect(userZoneSelectedTime, id);
+    this.valueInput && this.valueInput.focus({
+      preventScroll: true
+    });
+    closePopupOnly(e);
+  }
+
+  validateOnSelect(value, props) {
+    const defaultCheckPropsRules = ['required'];
+    const defaultValidateRules = ['required'];
+    const defaultType = 'onegroup';
+    const {
+      validation,
+      onPassValidation,
+      onFailValidation
+    } = props;
+    const targetTag = this.elementRef;
+
+    if (validation) {
+      //validateOn won't work here ...
+      const newValidation = validator.combinePropsValidation(this.props, defaultType, 'onSelect', validation, defaultCheckPropsRules, defaultValidateRules);
+      const validationObj = {
+        validation: newValidation,
+        onPassValidation,
+        onFailValidation
+      };
+      validator.executeValidation(value, targetTag, validationObj, defaultType);
+    } else {
+      onPassValidation && onPassValidation(value, targetTag);
+    }
+  }
+
+  handleTogglePopup(e, isOpenOnly) {
+    const {
+      togglePopup,
+      defaultPosition = 'bottom',
+      isPopupOpen,
+      removeClose
+    } = this.props;
+
+    if (isOpenOnly) {
+      if (!isPopupOpen) {
+        togglePopup(e, `${defaultPosition}Right`);
+      } else {
+        removeClose(e);
+      }
+    }
+
+    !isOpenOnly && togglePopup(e, `${defaultPosition}Right`);
+  }
+
+  handleSelectionRangeDetails(props) {
+    const {
+      timeZone,
+      dateFormat,
+      isDateTime,
+      value,
+      is24Hour
+    } = props;
+    const {
+      day,
+      month,
+      year,
+      hour,
+      minute,
+      noon
+    } = this.state;
+    const selected = value === INVALID_DATE ? '' : value; //New UI Changes
+
+    const dateFormatDetails = getDateFormatDetails(dateFormat, {
+      isHideCurrentYear: false,
+      value,
+      timeZone,
+      isDateTime
+    });
+    const dateFormatSelection = getDateFormatSelection(dateFormatDetails, isDateTime, {
+      i18nShortMonths,
+      i18nMonths,
+      selectedValue: selected,
+      day,
+      month,
+      year,
+      hour,
+      minute,
+      noon,
+      timeZone,
+      is24Hour
+    });
+    const {
+      dateFormat: newDateFormat
+    } = dateFormatDetails;
+    this.setState({
+      dateFormatDetails,
+      dateFormatSelection,
+      newDateFormat
+    });
+  }
+
+  handleGetDisplayText(props) {
+    const {
+      timeZone,
+      dateFormat,
+      isDateTime,
+      value,
+      is24Hour,
+      isHideCurrentYear
+    } = props;
+    const dateFormatDetails = getDateFormatDetails(dateFormat, {
+      isHideCurrentYear,
+      value,
+      timeZone,
+      isDateTime
+    });
+    const {
+      dateFormat: newDateFormat
+    } = dateFormatDetails;
+    let displayText = '';
+    const selected = value === INVALID_DATE ? '' : value;
+
+    if (selected) {
+      let format = newDateFormat,
+          convertedValue = getDateText(value, isDateTime, timeZone);
+
+      if (isDateTime) {
+        format = `${newDateFormat} ${is24Hour ? 'HH:mm' : 'hh:mm A'}`;
+      }
+
+      displayText = formatDate(convertedValue, format);
+    }
+
+    return {
+      displayText,
+      selected
+    };
+  }
+
+  handleKeyDown(e) {
+    const {
+      keyCode
+    } = e;
+    const {
+      isPopupOpen,
+      isPopupOpenOnEnter,
+      onKeyDown,
+      closePopupOnly,
+      cantEditOnPopupOpen
+    } = this.props;
+    const 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);
+      }
+    }
+  }
+
+  getValueInputRef(el) {
+    const {
+      getRef
+    } = this.props;
+    this.valueInput = el;
+    getRef && getRef(el);
+  }
+
+  handleFocus() {
+    const isAllowedDateType = this.handleGetAllowedType();
+    const {
+      isMouseDown
+    } = this;
+
+    if (isAllowedDateType && !isMouseDown) {
+      const {
+        dateFormatSelection
+      } = this.state;
+      const {
+        focusedIndex
+      } = dateFormatSelection;
+      const {
+        selectionStart: newSelectionStart,
+        selectionEnd: newSelectionEnd
+      } = this.valueInput;
+      const focusedOrder = focusedIndex[`${newSelectionStart}_${newSelectionEnd}`] || 0;
+      isAllowedDateType && this.setState({
+        stateFocusOrder: focusedOrder,
+        isFocused: true
+      });
+    } else if (!isAllowedDateType) {
+      const {
+        valueInput
+      } = this;
+      document.getSelection().removeAllRanges();
+      valueInput && valueInput.setSelectionRange(0, 0);
+      this.setState({
+        isFocused: true
+      });
+    }
+
+    const {
+      onFocus
+    } = this.props;
+    onFocus && onFocus();
+  }
+
+  handleBlur() {
+    this.focusOrder = '';
+    this.oldFocusOrder = '';
+    this.oldKeyDownAction = '';
+    this.keyDownAction = '';
+    this.setState({
+      isFocused: false
+    }); // const { valueInput } = this;
+    // document.getSelection().removeAllRanges();
+    // valueInput && valueInput.setSelectionRange(0, 0);
+
+    const {
+      onBlur
+    } = this.props;
+    onBlur && onBlur();
+  }
+
+  handleGetMethods(methods) {
+    const {
+      getMethods
+    } = this.props;
+    const {
+      resetLocalDate,
+      getStateValues,
+      toggleYearView
+    } = methods;
+    this.resetLocalDate = resetLocalDate;
+    this.getDateTimeStateValues = getStateValues;
+    this.DateTimeYearViewToggle = toggleYearView;
+    getMethods && getMethods(methods);
+  }
+
+  handleDateType(e) {
+    const {
+      keyCode,
+      shiftKey
+    } = e;
+    const input = e.target;
+
+    if (getIsSupportedKey(e)) {
+      e.preventDefault();
+    }
+
+    const {
+      isDateTime,
+      timeZone,
+      value,
+      onSelect,
+      id,
+      min,
+      max,
+      minErrorText,
+      maxErrorText,
+      onError,
+      closePopupOnly,
+      is24Hour
+    } = this.props;
+    const {
+      dateFormatSelection,
+      day,
+      month,
+      year,
+      hour,
+      minute,
+      noon,
+      selected,
+      dateFormatDetails
+    } = this.state;
+    const {
+      focusedIndex,
+      order
+    } = dateFormatSelection;
+    const {
+      yearInfo
+    } = dateFormatDetails;
+    const {
+      day: selectedDay = '',
+      month: selectedMonth = '',
+      year: selectedYear = '',
+      hour: selectedHour = '',
+      minute: selectedMinute = '',
+      noon: selectedNoon = ''
+    } = getDateDetails(selected, {
+      day,
+      month,
+      year,
+      hour,
+      minute,
+      noon
+    }, isDateTime, timeZone, {
+      is24Hour
+    });
+    const {
+      selectionStart: newSelectionStart,
+      selectionEnd: newSelectionEnd
+    } = input;
+    const focusedOrder = focusedIndex[`${newSelectionStart}_${newSelectionEnd}`];
+    const {
+      type
+    } = order[focusedOrder] || {};
+    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';
+    }
+
+    const focusedOrders = {
+      focusOrder: this.focusOrder,
+      oldFocusOrder: this.oldFocusOrder
+    };
+    const keyActions = {
+      oldKeyAction: this.oldKeyDownAction,
+      keyAction: this.keyDownAction
+    };
+    let newDay = selectedDay,
+        newMonth = selectedMonth,
+        newYear = selectedYear,
+        newHour = selectedHour,
+        newMinute = selectedMinute,
+        newNoon = selectedNoon,
+        isValueChanged = false,
+        newFocusOrder = focusedOrder;
+
+    if (keyCode === 9 && shiftKey && !getIsEmptyValue(focusedOrder) && focusedOrder !== 0) {
+      e.preventDefault();
+      this.setState({
+        stateFocusOrder: focusedOrder - 1
+      });
+    } else if (keyCode === 9 && !shiftKey && !getIsEmptyValue(focusedOrder) && order.length - 1 !== focusedOrder) {
+      e.preventDefault();
+      this.setState({
+        stateFocusOrder: focusedOrder + 1
+      });
+    } else if (keyCode === 39) {
+      //arrow right
+      getIsEmptyValue(focusedOrder) ? this.setState({
+        stateFocusOrder: 0
+      }) : this.setState({
+        stateFocusOrder: focusedOrder + 1
+      });
+    } else if (keyCode === 37) {
+      //arrow left
+      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') {
+      ({
+        day: newDay,
+        isChanged: isValueChanged,
+        focusOrder: newFocusOrder
+      } = getChangedDay({
+        day: selectedDay,
+        month: selectedMonth,
+        year: selectedYear
+      }, e, focusedOrders, keyActions));
+    } else if (type === 'month') {
+      ({
+        /*day: newDay,*/
+        month: newMonth,
+        isChanged: isValueChanged,
+        focusOrder: newFocusOrder
+      } = getChangedMonth({
+        day: selectedDay,
+        month: selectedMonth,
+        year: selectedYear
+      }, e, focusedOrders, keyActions));
+    } else if (type === 'year') {
+      ({
+        /*day: newDay,*/
+        year: newYear,
+        isChanged: isValueChanged,
+        focusOrder: newFocusOrder
+      } = getChangedYear({
+        day: selectedDay,
+        month: selectedMonth,
+        year: selectedYear
+      }, e, focusedOrders, keyActions, {
+        yearInfo
+      }));
+    } else if (type === 'hour') {
+      ({
+        hour: newHour,
+        isChanged: isValueChanged,
+        focusOrder: newFocusOrder
+      } = getChangedHour({
+        hour: selectedHour
+      }, e, focusedOrders, keyActions, {
+        is24Hour
+      }));
+    } else if (type === 'minute') {
+      ({
+        minute: newMinute,
+        isChanged: isValueChanged,
+        focusOrder: newFocusOrder
+      } = getChangedMinute({
+        minute: selectedMinute
+      }, e, focusedOrders, keyActions));
+    } else if (type === 'noon') {
+      ({
+        noon: newNoon,
+        isChanged: isValueChanged,
+        focusOrder: newFocusOrder
+      } = getChangedNoon({
+        noon: selectedNoon
+      }, e, focusedOrders, keyActions));
+    }
+
+    if (isValueChanged) {
+      const currentValue = {
+        day: newDay,
+        month: newMonth,
+        year: newYear,
+        hour: newHour,
+        minute: newMinute,
+        noon: newNoon
+      };
+
+      const errorCaseHandle = isEmptyValError => {
+        this.setState(() => ({
+          day: newDay,
+          month: newMonth,
+          year: newYear,
+          hour: newHour,
+          minute: newMinute,
+          noon: newNoon,
+          stateFocusOrder: newFocusOrder,
+          isDateEdited: true,
+          isError: !isEmptyValError
+        }));
+        const newSelected = isEmptyValError ? '' : INVALID_DATE;
+        value !== newSelected && onSelect && onSelect(newSelected, id);
+      };
+
+      const {
+        isError,
+        isEmptyValError
+      } = getIsValidDate(currentValue, isDateTime, {
+        is24Hour
+      });
+
+      if (isError) {
+        errorCaseHandle(isEmptyValError);
+      } else {
+        const {
+          selectedValue,
+          isError: selectedDateError,
+          errorType
+        } = getSelectedDate(currentValue, {
+          min,
+          max,
+          timeZone,
+          isDateTime,
+          is24Hour
+        });
+
+        if (selectedDateError) {
+          if (errorType === 'MIN') {
+            onError && onError(minErrorText, true);
+          } else if (errorType === 'MAX') {
+            onError && onError(maxErrorText, true);
+          }
+
+          errorCaseHandle();
+        } else {
+          this.setState(() => ({
+            day: '',
+            month: '',
+            year: '',
+            hour: '',
+            minute: '',
+            noon: '',
+            isDateEdited: false,
+            stateFocusOrder: newFocusOrder,
+            isError: false
+          }));
+          onSelect && onSelect(selectedValue, id);
+        }
+      }
+    }
+  }
+
+  handleSelection() {
+    let focusOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    const isAllowedDateType = this.handleGetAllowedType();
+
+    if (isAllowedDateType) {
+      const {
+        dateFormatSelection
+      } = this.state;
+      const {
+        order = {}
+      } = dateFormatSelection;
+      let {
+        index
+      } = order[focusOrder] || {};
+
+      if (!index) {
+        focusOrder = 0;
+        ({
+          index
+        } = order[focusOrder] || {});
+      }
+
+      if (index && this.valueInput) {
+        document.getSelection().removeAllRanges();
+        this.valueInput.setSelectionRange(index[0], index[1]);
+      }
+    }
+  }
+
+  handleInputClick(e) {
+    this.isMouseDown = false;
+    const {
+      dateFormatSelection
+    } = this.state;
+    const input = e.target;
+    const {
+      selectionEnd
+    } = input;
+    e.preventDefault();
+    const {
+      clickIndex
+    } = dateFormatSelection;
+    const focusOrder = clickIndex[selectionEnd] || clickIndex[selectionEnd - 1] || 0;
+    const isAllowedDateType = this.handleGetAllowedType();
+
+    if (isAllowedDateType) {
+      this.setState({
+        stateFocusOrder: focusOrder,
+        isFocused: true
+      });
+    }
+
+    if (!isAllowedDateType) {
+      this.handleTogglePopup(e);
+    } else {
+      const {
+        isPopupOpenOnClick,
+        isReadOnly,
+        isDisabled
+      } = this.props;
+
+      if (isPopupOpenOnClick && (!isReadOnly || !isDisabled)) {
+        this.handleTogglePopup(e, true);
+      }
+
+      const {
+        isPopupCloseOnClick,
+        isPopupOpen,
+        closePopupOnly
+      } = this.props;
+
+      if (isPopupCloseOnClick && !isPopupOpen) {
+        closePopupOnly && closePopupOnly(e);
+      }
+    }
+  }
+
+  handleMouseDown() {
+    this.isMouseDown = true;
+  }
+
+  handleGetShowValue() {
+    const {
+      day,
+      month,
+      year,
+      hour,
+      minute,
+      noon,
+      dateFormatDetails,
+      displayText,
+      newDateFormat,
+      isDateEdited,
+      isFocused,
+      selected
+    } = this.state;
+    const {
+      isDateTime,
+      is24Hour,
+      isPopupReady,
+      timeZone,
+      isPopupOpen
+    } = this.props;
+
+    if (isDateEdited || isFocused || isPopupReady || isPopupOpen) {
+      const {
+        day: selectedDay = '',
+        month: selectedMonth = '',
+        year: selectedYear = '',
+        hour: selectedHour = '',
+        minute: selectedMinute = '',
+        noon: selectedNoon = ''
+      } = getDateDetails(selected, {
+        day,
+        month,
+        year,
+        hour,
+        minute,
+        noon
+      }, isDateTime, timeZone, {
+        is24Hour
+      });
+      const dateTimeString = getDateTimeString({
+        day: selectedDay,
+        month: selectedMonth,
+        year: selectedYear,
+        hour: selectedHour,
+        minute: selectedMinute,
+        noon: selectedNoon
+      }, dateFormatDetails, isDateTime, {
+        i18nShortMonths,
+        i18nMonths,
+        is24Hour
+      });
+      return dateTimeString;
+    } else if (displayText) {
+      return displayText;
+    }
+
+    const timeFormat = is24Hour ? ' HH:mm' : ' hh:mm --';
+    const dateTimeFormat = isDateTime ? `${newDateFormat}${timeFormat}` : newDateFormat;
+    return dateTimeFormat || '';
+  }
+
+  handleGetAllowedType() {
+    const {
+      isReadOnly,
+      isDisabled,
+      isEditable
+    } = this.props;
+
+    if (isEditable) {
+      if (isReadOnly || isDisabled) {
+        return false;
+      }
+
+      return true;
+    }
+
+    return false;
+  }
+
+  handleDateClear() {
+    const {
+      id,
+      onSelect,
+      value
+    } = this.props;
+    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 });
+  }
+
+  handleDateTimeClear(e) {
+    this.handleDateClear();
+    const {
+      closePopupOnly
+    } = this.props;
+    closePopupOnly(e);
+  }
+
+  handleDateIconClick(e) {
+    this.handleTogglePopup(e);
+    this.valueInput && this.valueInput.focus({
+      preventScroll: true
+    });
+  }
+
+  handleBlurSelectionRange() {
+    let focusOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let oldFocusOrder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    const isAllowedDateType = this.handleGetAllowedType();
+
+    if (isAllowedDateType) {
+      // if (focusOrder !== oldFocusOrder) {
+      const {
+        dateFormatSelection = {},
+        isFocused
+      } = this.state;
+      const {
+        order = []
+      } = dateFormatSelection;
+      const {
+        isPopupOpen
+      } = this.props; // const { type: oldFocusedType = '' } = order[oldFocusOrder] || {};
+
+      const {
+        type: focusedType = ''
+      } = order[focusOrder] || {};
+      const {
+        /*isActive,*/
+        isYearView,
+        isMonthOpen: oldIsMonthOpen
+      } = this.getDateTimeStateValues();
+      const yearViewTypes = ['month', 'year'];
+      const isMonthOpen = focusedType === 'month';
+
+      if (isPopupOpen) {
+        if (yearViewTypes.indexOf(focusedType) >= 0 && (!isYearView || isMonthOpen !== oldIsMonthOpen)) {
+          if (!isFocused && isYearView) {
+            this.DateTimeYearViewToggle(true, oldIsMonthOpen);
+          } else {
+            this.DateTimeYearViewToggle(true, isMonthOpen);
+          }
+        } else if (yearViewTypes.indexOf(focusedType) === -1) {
+          if (!isFocused && isYearView) {
+            this.DateTimeYearViewToggle(isYearView, oldIsMonthOpen);
+          } else {
+            this.DateTimeYearViewToggle(false, false);
+          }
+        }
+      } // }
+
+    }
+  }
+
+  render() {
+    const {
+      removeClose,
+      minErrorText,
+      maxErrorText,
+      min,
+      max,
+      placeholder,
+      isPopupOpen,
+      isPopupReady,
+      isDateTime,
+      position,
+      textBoxVariant,
+      textBoxSize,
+      children = null,
+      isDisabled,
+      getContainerRef,
+      getTargetRef,
+      timeZone,
+      isReadOnly,
+      dataId,
+      needResponsive,
+      className,
+      needBorder,
+      defaultTime,
+      needDefaultTime,
+      borderColor,
+      i18nKeys,
+      needErrorOnBlur,
+      htmlId,
+      iconOnHover,
+      is24Hour,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
+      dropBoxPortalId,
+      a11y,
+      boxSize,
+      onError,
+      startDate,
+      endDate
+    } = this.props;
+    const {
+      selected: value = '',
+      isError,
+      isDateEdited,
+      isFocused
+    } = this.state;
+    const showValue = this.handleGetShowValue();
+    const isAllowedDateType = this.handleGetAllowedType();
+    const showClear = !(isDisabled || isReadOnly) && (isDateEdited || value) ? true : false;
+    const showError = needErrorOnBlur ? isError && !isFocused && !isPopupOpen : isError;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container}`
+    }, children ? /*#__PURE__*/React.createElement("div", {
+      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
+      onClick: isDisabled || isReadOnly ? null : this.handleTogglePopup,
+      ref: getTargetRef,
+      className: `${className ? className : ''} ${isDisabled ? style.disabled : style.enabled}`
+    }, children) : /*#__PURE__*/React.createElement("div", {
+      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
+      className: `${className ? className : ''} ${style.textBox} ${isPopupOpen && !isDisabled ? style.textBoxFocus : ''} ${isDisabled ? style.disabled : isReadOnly ? style.readOnly : style.enabled}`,
+      onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
+      ref: getTargetRef
+    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+      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 ? '' : style.placeHolder
+      },
+      iconOnHover: iconOnHover,
+      isFocus: isPopupReady,
+      autoComplete: false,
+      a11y: a11y
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-datepicker",
+      size: "12"
+    })))), isReadOnly || isDisabled ? null : /*#__PURE__*/React.createElement(DateTime, {
+      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,
+      boxSize: boxSize,
+      onError: onError,
+      startDate: startDate,
+      endDate: endDate
+    }));
+  }
+
+}
+
+DateWidgetComponent.defaultProps = DateWidget_defaultProps;
+DateWidgetComponent.propTypes = DateWidget_propTypes;
+const DateWidget = Popup(DateWidgetComponent);
+DateWidget.defaultProps = DateWidgetComponent.defaultProps;
+DateWidget.propTypes = DateWidgetComponent.propTypes; // eslint-disable-next-line no-undef
+// if (__DOCS__) {
+//   DateWidgetComponent.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+//   // eslint-disable-next-line react/forbid-foreign-prop-types
+//   DateWidget.propTypes = DateWidgetComponent.propTypes;
+// }
+
+export default DateWidget;