@zohodesk/components 1.0.0-test-252 → 1.0.0

package/lib/DateTime/DateWidget.js

@@ -1,49 +1,87 @@
 "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 _icons = require("@zohodesk/icons");
+
 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));
@@ -83,21 +121,27 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
     _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;
+          displayText = _this$handleGetDispla.displayText,
+          newSelected = _this$handleGetDispla.selected;
+
       this.setState({
         displayText: displayText,
         selected: newSelected
@@ -108,35 +152,39 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
     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;
+          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;
+          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;
+            displayText = _this$handleGetDispla2.displayText,
+            _selected = _this$handleGetDispla2.selected;
+
         this.setState({
           selected: _selected,
           displayText: displayText
         });
+
         if (value !== _constants.INVALID_DATE) {
           this.setState({
             day: '',
@@ -150,29 +198,30 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           });
         }
       }
+
       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) {
 
-      // if (stateFocusOrder !== prevState.stateFocusOrder) {
 
       isFocused && !(0, _Common.getIsEmptyValue)(stateFocusOrder) && this.handleSelection(stateFocusOrder);
-      this.handleBlurSelectionRange(stateFocusOrder, prevState.stateFocusOrder);
-      // }
-
+      this.handleBlurSelectionRange(stateFocusOrder, prevState.stateFocusOrder); // }
       // if (prevProps.isPopupOpen !== isPopupOpen) {
       //   if (!isPopupOpen) {
       //     this.valueInput && this.valueInput.focus({preventScroll:true});
@@ -183,14 +232,16 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
     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;
+          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
@@ -204,17 +255,20 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
       var defaultValidateRules = ['required'];
       var defaultType = 'onegroup';
       var validation = props.validation,
-        onPassValidation = props.onPassValidation,
-        onFailValidation = props.onFailValidation;
+          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);
@@ -224,12 +278,13 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
     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;
+          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"));
@@ -237,26 +292,26 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           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;
+          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;
+          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
 
-      //New UI Changes
       var dateFormatDetails = (0, _dateFormat.getDateFormatDetails)(dateFormat, {
         isHideCurrentYear: false,
         value: value,
@@ -287,11 +342,11 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
     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;
+          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,
@@ -301,17 +356,21 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
       var newDateFormat = dateFormatDetails.dateFormat;
       var displayText = '';
       var selected = value === _constants.INVALID_DATE ? '' : value;
+
       if (selected) {
         var format = newDateFormat,
-          convertedValue;
+            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
@@ -322,18 +381,20 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
     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;
+          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 ~~~~~
+        } // ~~~~~~~ handle date navigation in dateTime popup ~~~~~
+
+
         if (isAllowedDateType) {
           cantEditOnPopupOpen && this.handleDateType(e);
         }
@@ -361,12 +422,13 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
     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;
+            newSelectionStart = _this$valueInput.selectionStart,
+            newSelectionEnd = _this$valueInput.selectionEnd;
         var focusedOrder = focusedIndex["".concat(newSelectionStart, "_").concat(newSelectionEnd)] || 0;
         isAllowedDateType && this.setState({
           stateFocusOrder: focusedOrder,
@@ -380,6 +442,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           isFocused: true
         });
       }
+
       var onFocus = this.props.onFocus;
       onFocus && onFocus();
     }
@@ -392,9 +455,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
       this.keyDownAction = '';
       this.setState({
         isFocused: false
-      });
-
-      // const { valueInput } = this;
+      }); // const { valueInput } = this;
       // document.getSelection().removeAllRanges();
       // valueInput && valueInput.setSelectionRange(0, 0);
 
@@ -406,8 +467,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
     value: function handleGetMethods(methods) {
       var getMethods = this.props.getMethods;
       var resetLocalDate = methods.resetLocalDate,
-        getStateValues = methods.getStateValues,
-        toggleYearView = methods.toggleYearView;
+          getStateValues = methods.getStateValues,
+          toggleYearView = methods.toggleYearView;
       this.resetLocalDate = resetLocalDate;
       this.getDateTimeStateValues = getStateValues;
       this.DateTimeYearViewToggle = toggleYearView;
@@ -417,67 +478,75 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
     key: "handleDateType",
     value: function handleDateType(e) {
       var _this2 = this;
+
       var keyCode = e.keyCode,
-        shiftKey = e.shiftKey;
+          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;
+          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;
+          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;
+          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;
+        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;
+          newSelectionEnd = input.selectionEnd;
       var focusedOrder = focusedIndex["".concat(newSelectionStart, "_").concat(newSelectionEnd)];
+
       var _ref = order[focusedOrder] || {},
-        type = _ref.type;
+          type = _ref.type;
+
       this.oldFocusOrder = this.focusOrder;
       this.focusOrder = focusedOrder;
+
       if (keyCode === 38 || keyCode === 40) {
         //up arrow && down arrow
         this.oldKeyDownAction = this.keyDownAction;
@@ -486,6 +555,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         this.oldKeyDownAction = this.keyDownAction;
         this.keyDownAction = 'valueTyped';
       }
+
       var focusedOrders = {
         focusOrder: this.focusOrder,
         oldFocusOrder: this.oldFocusOrder
@@ -495,13 +565,14 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         keyAction: this.keyDownAction
       };
       var newDay = selectedDay,
-        newMonth = selectedMonth,
-        newYear = selectedYear,
-        newHour = selectedHour,
-        newMinute = selectedMinute,
-        newNoon = selectedNoon,
-        isValueChanged = false,
-        newFocusOrder = focusedOrder;
+          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({
@@ -535,6 +606,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           month: selectedMonth,
           year: selectedYear
         }, e, focusedOrders, keyActions);
+
         newDay = _getChangedDay.day;
         isValueChanged = _getChangedDay.isChanged;
         newFocusOrder = _getChangedDay.focusOrder;
@@ -544,6 +616,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           month: selectedMonth,
           year: selectedYear
         }, e, focusedOrders, keyActions);
+
         newMonth = _getChangedMonth.month;
         isValueChanged = _getChangedMonth.isChanged;
         newFocusOrder = _getChangedMonth.focusOrder;
@@ -555,6 +628,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         }, e, focusedOrders, keyActions, {
           yearInfo: yearInfo
         });
+
         newYear = _getChangedYear.year;
         isValueChanged = _getChangedYear.isChanged;
         newFocusOrder = _getChangedYear.focusOrder;
@@ -564,6 +638,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         }, e, focusedOrders, keyActions, {
           is24Hour: is24Hour
         });
+
         newHour = _getChangedHour.hour;
         isValueChanged = _getChangedHour.isChanged;
         newFocusOrder = _getChangedHour.focusOrder;
@@ -571,6 +646,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         var _getChangedMinute = (0, _timeChange.getChangedMinute)({
           minute: selectedMinute
         }, e, focusedOrders, keyActions);
+
         newMinute = _getChangedMinute.minute;
         isValueChanged = _getChangedMinute.isChanged;
         newFocusOrder = _getChangedMinute.focusOrder;
@@ -578,10 +654,12 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         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,
@@ -591,6 +669,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           minute: newMinute,
           noon: newNoon
         };
+
         var errorCaseHandle = function errorCaseHandle(isEmptyValError) {
           _this2.setState(function () {
             return {
@@ -605,33 +684,38 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
               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;
+          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;
+            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 () {
@@ -657,17 +741,23 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
     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$;
+            order = _dateFormatSelection$ === void 0 ? {} : _dateFormatSelection$;
+
         var _ref2 = order[focusOrder] || {},
-          index = _ref2.index;
+            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]);
@@ -685,26 +775,31 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
       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;
+            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;
+            isPopupCloseOnClick = _this$props7.isPopupCloseOnClick,
+            isPopupOpen = _this$props7.isPopupOpen,
+            closePopupOnly = _this$props7.closePopupOnly;
+
         if (isPopupCloseOnClick && !isPopupOpen) {
           closePopupOnly && closePopupOnly(e);
         }
@@ -719,47 +814,49 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
     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;
+          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;
+          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;
+          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,
@@ -776,6 +873,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
       } else if (displayText) {
         return displayText;
       }
+
       var timeFormat = is24Hour ? ' HH:mm' : ' hh:mm --';
       var dateTimeFormat = isDateTime ? "".concat(newDateFormat).concat(timeFormat) : newDateFormat;
       return dateTimeFormat || '';
@@ -784,24 +882,27 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
     key: "handleGetAllowedType",
     value: function handleGetAllowedType() {
       var _this$props9 = this.props,
-        isReadOnly = _this$props9.isReadOnly,
-        isDisabled = _this$props9.isDisabled,
-        isEditable = _this$props9.isEditable;
+          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;
+          id = _this$props10.id,
+          onSelect = _this$props10.onSelect,
+          value = _this$props10.value;
       this.setState({
         day: '',
         month: '',
@@ -813,10 +914,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         stateFocusOrder: 0,
         isError: false
       });
-      value && onSelect && onSelect('', id);
-      this.valueInput && this.valueInput.focus({
-        preventScroll: true
-      });
+      value && onSelect && onSelect('', id); // this.valueInput && this.valueInput.focus({ preventScroll: true });
     }
   }, {
     key: "handleDateTimeClear",
@@ -839,79 +937,85 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
       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;
+            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;
+            order = _dateFormatSelection$2 === void 0 ? [] : _dateFormatSelection$2;
+        var isPopupOpen = this.props.isPopupOpen; // const { type: oldFocusedType = '' } = order[oldFocusOrder] || {};
 
-        // const { type: oldFocusedType = '' } = order[oldFocusOrder] || {};
         var _ref4 = order[focusOrder] || {},
-          _ref4$type = _ref4.type,
-          focusedType = _ref4$type === void 0 ? '' : _ref4$type;
+            _ref4$type = _ref4.type,
+            focusedType = _ref4$type === void 0 ? '' : _ref4$type;
+
         var _this$getDateTimeStat = this.getDateTimeStateValues(),
-          isYearView = _this$getDateTimeStat.isYearView,
-          oldIsMonthOpen = _this$getDateTimeStat.isMonthOpen;
+            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;
+          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,
+          a11y = _this$props11.a11y,
+          boxSize = _this$props11.boxSize,
+          onError = _this$props11.onError;
       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;
+          _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;
@@ -920,11 +1024,13 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         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")),
+        "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
         onClick: isDisabled || isReadOnly ? null : this.handleTogglePopup,
         ref: getTargetRef,
         className: "".concat(className ? className : '', " ").concat(isDisabled ? _DateWidgetModule["default"].disabled : _DateWidgetModule["default"].enabled)
       }, children) : /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
+        "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
         className: "".concat(className ? className : '', " ").concat(_DateWidgetModule["default"].textBox, " ").concat(isPopupOpen && !isDisabled ? _DateWidgetModule["default"].textBoxFocus : '', " ").concat(isDisabled ? _DateWidgetModule["default"].disabled : isReadOnly ? _DateWidgetModule["default"].readOnly : _DateWidgetModule["default"].enabled),
         onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
         ref: getTargetRef
@@ -954,11 +1060,12 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         },
         iconOnHover: iconOnHover,
         isFocus: isPopupReady,
-        autoComplete: false
+        autoComplete: false,
+        a11y: a11y
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both",
         onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-datepicker",
         size: "12"
       })))), isReadOnly || isDisabled ? null : /*#__PURE__*/_react["default"].createElement(_DateTime["default"], {
@@ -989,27 +1096,30 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         positionsOffset: positionsOffset,
         targetOffset: targetOffset,
         isRestrictScroll: isRestrictScroll,
-        dropBoxPortalId: dropBoxPortalId
+        dropBoxPortalId: dropBoxPortalId,
+        boxSize: boxSize,
+        onError: onError
       }));
     }
   }]);
+
   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;
-}
+DateWidget.defaultProps = DateWidgetComponent.defaultProps; // 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;
+// }
+
 var _default = DateWidget;
 exports["default"] = _default;