carbon-react 103.2.0 → 104.0.0

package/lib/components/date/date.component.js

@@ -3,703 +3,349 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.BaseDateInput = exports.defaultDateFormat = void 0;
+exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _invariant = _interopRequireDefault(require("invariant"));
-
 var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 
-var _utils = require("../../style/utils");
+var _utils = require("./__internal__/utils");
+
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
-var _date = _interopRequireDefault(require("../../__internal__/date"));
+var _utils2 = require("../../style/utils");
 
-var _datePicker = _interopRequireDefault(require("./date-picker.component"));
+var _dateFormats = _interopRequireDefault(require("./__internal__/date-formats"));
 
-var _date2 = _interopRequireDefault(require("./date.style"));
+var _date = _interopRequireDefault(require("./date.style"));
 
 var _textbox = _interopRequireDefault(require("../textbox"));
 
-var _withUniqueIdProps = _interopRequireDefault(require("../../__internal__/utils/helpers/with-unique-id-props"));
-
-var _browserTypeCheck = require("../../__internal__/utils/helpers/browser-type-check");
+var _datePicker = _interopRequireDefault(require("./__internal__/date-picker"));
 
-var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-context"));
+var _dateRange = _interopRequireDefault(require("../date-range/date-range.context"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-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); 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 } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || 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; } 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 : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-const defaultDateFormat = "DD/MM/YYYY";
-exports.defaultDateFormat = defaultDateFormat;
-const hiddenDateFormat = "YYYY-MM-DD";
-const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
-
-let BaseDateInput = /*#__PURE__*/function (_React$Component) {
-  _inherits(BaseDateInput, _React$Component);
-
-  var _super = _createSuper(BaseDateInput);
-
-  function BaseDateInput(...args) {
-    var _this;
-
-    _classCallCheck(this, BaseDateInput);
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-    _this = _super.call(this, ...args);
-
-    _defineProperty(_assertThisInitialized(_this), "localeData", {
-      locale: _this.context.locale(),
-      formats: _this.context.date.formats.inputs(),
-      format: _this.context.date.formats.javascript()
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "isBlurBlocked", false);
-
-    _defineProperty(_assertThisInitialized(_this), "isOpening", false);
-
-    _defineProperty(_assertThisInitialized(_this), "inputHasFocus", _this.props.autoFocus || false);
-
-    _defineProperty(_assertThisInitialized(_this), "isControlled", _this.props.value !== undefined);
-
-    _defineProperty(_assertThisInitialized(_this), "initialVisibleValue", generateAdjustedValue(_this.props, _this.localeData));
-
-    _defineProperty(_assertThisInitialized(_this), "inputFocusedViaPicker", false);
-
-    _defineProperty(_assertThisInitialized(_this), "hasMounted", false);
-
-    _defineProperty(_assertThisInitialized(_this), "inputPresentationRef", /*#__PURE__*/_react.default.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      isDatePickerOpen: false,
-
-      /** Date object to pass to the DatePicker */
-      selectedDate: _date.default.stringToDate(_date.default.formatValue({
-        value: _this.initialVisibleValue,
-        ..._this.localeData
-      })),
-
-      /** Displayed value, format dependent on a region */
-      visibleValue: _this.initialVisibleValue,
-
-      /** Stores last valid values to be emitted onBlur if current input is invalid */
-      lastValidEventValues: {
-        formattedValue: _this.initialVisibleValue,
-        rawValue: _date.default.formatValue({
-          value: _this.initialVisibleValue,
-          ..._this.localeData
-        })
-      },
-      shouldPickerOpen: false
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "hasValueChanged", prevProps => {
-      if (_this.props.allowEmptyValue) {
-        return prevProps.value !== _this.props.value;
-      }
-
-      return _this.props.value && prevProps.value !== _this.props.value;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "assignInput", input => {
-      _this.input = input.current;
-      _this.inputPresentationRef.current = input.current.parentElement;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "shouldAllowBlur", () => {
-      return (0, _browserTypeCheck.isEdge)(navigator) && !_this.inputFocusedViaPicker;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "shouldBlockBlur", () => {
-      const {
-        disabled,
-        readOnly
-      } = _this.props;
-      const block = _this.isBlurBlocked || _this.inputFocusedViaPicker || _this.input === document.activeElement;
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-      if (disabled || readOnly || block) {
-        _this.inputFocusedViaPicker = _this.input === document.activeElement; // needed to block blur properly in Edge
-
-        if (!_this.shouldAllowBlur()) {
-          return true;
-        }
-      }
-
-      return false;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleBlur", () => {
-      // needed to make blur work properly in Edge
-      // https://stackoverflow.com/a/24695316/10894881
-      setTimeout(() => {
-        _this.inputHasFocus = false;
-
-        if (_this.shouldBlockBlur()) {
-          return;
-        }
-
-        _this.reformatVisibleDate();
-
-        if (_this.props.onBlur && !_this.state.isDatePickerOpen) {
-          const event = _this.buildCustomEvent({
-            target: _this.input,
-            type: "blur"
-          }, _date.default.formatValue({
-            value: _this.state.visibleValue,
-            ..._this.localeData
-          }));
-
-          _this.props.onBlur(event);
-        }
-      }, 0);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleFocus", ev => {
-      _this.inputHasFocus = true;
-      const {
-        disabled,
-        readOnly
-      } = _this.props;
-      if (disabled || readOnly) return;
-
-      if (_this.isAutoFocused) {
-        _this.isAutoFocused = false;
-      } else {
-        _this.openDatePicker();
-      }
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-      if (_this.props.onFocus) {
-        _this.props.onFocus(ev);
+const marginPropTypes = (0, _utils2.filterStyledSystemMarginProps)(_propTypes2.default.space);
+
+const DateInput = ({
+  adaptiveLabelBreakpoint,
+  allowEmptyValue,
+  autoFocus,
+  "data-component": dataComponent,
+  "data-element": dataElement,
+  "data-role": dataRole,
+  disabled,
+  disablePortal = false,
+  helpAriaLabel,
+  labelInline,
+  minDate,
+  maxDate,
+  onBlur,
+  onChange,
+  onClick,
+  onFocus,
+  onKeyDown,
+  pickerProps = {},
+  readOnly,
+  size = "medium",
+  tooltipPosition,
+  value,
+  ...rest
+}) => {
+  const wrapperRef = (0, _react.useRef)();
+  const parentRef = (0, _react.useRef)();
+  const inputRef = (0, _react.useRef)();
+  const pickerRef = (0, _react.useRef)();
+  const alreadyFocused = (0, _react.useRef)(false);
+  const isBlurBlocked = (0, _react.useRef)(false);
+  const focusedViaPicker = (0, _react.useRef)(false);
+  const l = (0, _useLocale.default)();
+  const {
+    dateFnsLocale
+  } = l.date;
+  const {
+    format,
+    formats
+  } = (0, _react.useMemo)(() => (0, _dateFormats.default)(dateFnsLocale()), [dateFnsLocale]);
+  const {
+    inputRefMap,
+    setInputRefMap
+  } = (0, _react.useContext)(_dateRange.default);
+  const inputName = dataElement === null || dataElement === void 0 ? void 0 : dataElement.split("-")[0];
+  const [open, setOpen] = (0, _react.useState)(false);
+  const [selectedDays, setSelectedDays] = (0, _react.useState)((0, _utils.checkISOFormatAndLength)(value) ? (0, _utils.parseISODate)(value) : (0, _utils.parseDate)(format, value));
+  const isInitialValue = (0, _react.useRef)(true);
+
+  const computeInvalidRawValue = inputValue => allowEmptyValue && !inputValue.length ? inputValue : null;
+
+  const buildCustomEvent = ev => {
+    const {
+      id,
+      name
+    } = ev.target;
+    const [matchedFormat, matchedValue] = (0, _utils.findMatchedFormatAndValue)(ev.target.value, formats);
+    const formattedValueString = ev.type === "blur" ? (0, _utils.formattedValue)(format, selectedDays) : ev.target.value;
+    const rawValue = (0, _utils.isDateValid)((0, _utils.parseDate)(matchedFormat, matchedValue)) ? (0, _utils.formatToISO)(matchedFormat, matchedValue) : computeInvalidRawValue(ev.target.value);
+    ev.target = { ...(name && {
+        name
+      }),
+      ...(id && {
+        id
+      }),
+      value: {
+        formattedValue: formattedValueString,
+        rawValue
       }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", ev => {
-      if (_this.props.onKeyDown) _this.props.onKeyDown(ev);
-
-      if (_events.default.isTabKey(ev)) {
-        _this.isOpening = false;
-        _this.inputFocusedViaPicker = false;
-
-        _this.closeDatePicker();
+    };
+    return ev;
+  };
+
+  const handleChange = ev => {
+    isInitialValue.current = false;
+    onChange(buildCustomEvent(ev));
+  };
+
+  const focusInput = () => {
+    var _inputRef$current;
+
+    focusedViaPicker.current = true;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+  };
+
+  const handleDayClick = (day, ev) => {
+    setSelectedDays(day);
+    onChange(buildCustomEvent({ ...ev,
+      target: { ...ev.target,
+        value: (0, _utils.formattedValue)(format, day)
       }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "openDatePicker", openedOnMount => {
-      document.addEventListener("click", _this.closeDatePicker);
+    }));
+    focusInput();
+    setOpen(false);
+  };
+
+  const handleBlur = ev => {
+    if (disabled || readOnly) {
+      return;
+    }
 
-      if (!openedOnMount && _this.inputFocusedViaPicker) {
-        _this.isBlurBlocked = true;
-        return;
-      }
+    let event;
 
-      _this.updateSelectedDate(_this.props.value || _date.default.formatValue({
-        value: _this.state.visibleValue,
-        ..._this.localeData
-      }));
+    if ((0, _utils.isDateValid)(selectedDays)) {
+      event = buildCustomEvent(ev);
 
-      _this.setState({
-        isDatePickerOpen: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "updateValidEventValues", value => {
-      if (_this.hasMounted) {
-        _this.setState({
-          visibleValue: _date.default.formatDateToCurrentLocale({
-            value,
-            ..._this.localeData
-          }),
-          lastValidEventValues: {
-            formattedValue: _date.default.formatDateToCurrentLocale({
-              value,
-              ..._this.localeData
-            }),
-            rawValue: _date.default.formatValue({
-              value,
-              ..._this.localeData
-            })
-          }
-        });
+      if ((0, _utils.formattedValue)(format, selectedDays) !== value) {
+        onChange(event);
       }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "reformatVisibleDate", () => {
+    } else {
       const {
-        lastValidEventValues,
-        visibleValue
-      } = _this.state;
-
-      if (_date.default.isValidDate({
-        value: visibleValue,
-        ..._this.localeData
-      }) || _this.canBeEmptyValues(visibleValue)) {
-        _this.updateValidEventValues(visibleValue);
-      } else if (!visibleValue.length) {
-        _this.updateValidEventValues(lastValidEventValues.formattedValue);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "closeDatePicker", () => {
-      if (_this.isOpening) {
-        _this.isOpening = false;
-        return;
-      }
-
-      document.removeEventListener("click", _this.closeDatePicker);
-
-      _this.setState({
-        isDatePickerOpen: false,
-        shouldPickerOpen: false
-      }, () => {
-        _this.isBlurBlocked = false;
-
-        if (_this.input !== document.activeElement) {
-          _this.handleBlur();
-        }
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleClick", event => {
-      if (_this.props.disabled || _this.props.readOnly) return;
-      _this.isOpening = true;
-
-      _this.setState(({
-        shouldPickerOpen
-      }) => ({
-        shouldPickerOpen: !shouldPickerOpen
-      }), () => {
-        if (_this.state.shouldPickerOpen) {
-          _this.isBlurBlocked = true;
-          _this.inputFocusedViaPicker = false;
-
-          _this.openDatePicker();
-        } else {
-          _this.inputFocusedViaPicker = false;
-          _this.isOpening = false;
-
-          _this.closeDatePicker();
+        id,
+        name
+      } = ev.target;
+      ev.target = { ...(name && {
+          name
+        }),
+        ...(id && {
+          id
+        }),
+        value: {
+          formattedValue: ev.target.value,
+          rawValue: computeInvalidRawValue(ev.target.value)
         }
-      });
-
-      if (_this.props.onClick) {
-        _this.props.onClick(event);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleDateSelect", selectedDate => {
-      const stringDateIso = _date.default.formatDateString(selectedDate);
-
-      _this.isBlurBlocked = true;
-      _this.isOpening = false;
-
-      _this.updateVisibleValue(stringDateIso);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "updateVisibleValue", date => {
-      const visibleValue = _date.default.formatDateToCurrentLocale({
-        value: date,
-        ..._this.localeData
-      });
-
-      const newDate = _this.getDateObject(date);
-
-      _this.setState({
-        selectedDate: newDate
-      }, () => {
-        _this.updateValidEventValues(visibleValue);
-
-        const event = {
-          target: _this.input
-        };
-        event.target.value = visibleValue;
-
-        _this.emitOnChangeCallback(event, date);
-
-        _this.focusInput();
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "focusInput", () => {
-      _this.inputFocusedViaPicker = true;
-      _this.isOpening = false;
+      };
+      event = ev;
+    }
 
-      _this.closeDatePicker();
+    if (isBlurBlocked.current) {
+      return;
+    }
 
-      _this.input.focus();
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
 
-      _this.isBlurBlocked = false;
-    });
+  const handleFocus = ev => {
+    if (disabled || readOnly) {
+      return;
+    }
 
-    _defineProperty(_assertThisInitialized(_this), "handleVisibleInputChange", ev => {
-      const {
-        disabled,
-        readOnly
-      } = _this.props;
-      const value = ev.target.value.formattedValue || ev.target.value;
-
-      const isValidDate = _date.default.isValidDate({
-        value,
-        ..._this.localeData
-      });
+    isBlurBlocked.current = false;
 
-      let isoDateString;
-      if (disabled || readOnly) return;
-      _this.isBlurBlocked = false;
+    if (!open && !alreadyFocused.current) {
+      setOpen(true);
+    } else {
+      alreadyFocused.current = false;
+    }
 
-      if (isValidDate || _this.canBeEmptyValues(value)) {
-        isoDateString = _date.default.formatValue({
-          value,
-          ..._this.localeData
-        });
+    if (onFocus) {
+      onFocus(ev);
+    }
+  };
 
-        _this.updateSelectedDate(isoDateString);
+  const handleKeyDown = ev => {
+    if (onKeyDown) {
+      onKeyDown(ev);
+    }
 
-        _this.emitOnChangeCallback(ev, isoDateString);
-      }
+    if (_events.default.isTabKey(ev)) {
+      setOpen(false);
+      alreadyFocused.current = false;
+    }
+  };
 
-      _this.setState({
-        visibleValue: value
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "updateSelectedDate", newValue => {
-      let selectedDate;
-      let visibleValue;
-
-      if (!newValue.length) {
-        selectedDate = newValue;
-        visibleValue = newValue;
-      } else {
-        selectedDate = _this.getDateObject(newValue);
-        visibleValue = _date.default.formatDateToCurrentLocale({
-          value: newValue,
-          ..._this.localeData
-        });
-      }
+  const handleClick = ev => {
+    if (disabled || readOnly) {
+      return;
+    }
 
-      _this.setState({
-        selectedDate,
-        visibleValue
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getDateObject", newValue => {
-      if (!_date.default.isValidDate({
-        value: newValue,
-        ..._this.localeData
-      })) {
-        return _date.default.stringToDate(_date.default.todayFormatted());
-      }
+    if (onClick) {
+      onClick(ev);
+    }
+  };
 
-      return _date.default.stringToDate(_date.default.formatValue({
-        value: newValue,
-        ..._this.localeData
-      }));
-    });
+  const handleMouseDown = ev => {
+    if (disabled || readOnly) {
+      return;
+    }
 
-    _defineProperty(_assertThisInitialized(_this), "emitOnChangeCallback", (ev, isoFormattedValue) => {
-      if (_this.props.onChange) {
-        const event = _this.buildCustomEvent(ev, isoFormattedValue);
+    isBlurBlocked.current = true;
 
-        _this.props.onChange(event);
-      }
-    });
+    if (ev.target.type === "text" && !open) {
+      setOpen(true);
+    } else if (ev.target.type !== "text") {
+      alreadyFocused.current = true;
+      setOpen(prev => !prev);
+    }
+  };
 
-    _defineProperty(_assertThisInitialized(_this), "canBeEmptyValues", value => {
-      return _this.props.allowEmptyValue && !value.length;
-    });
+  const handlePickerMouseDown = () => {
+    isBlurBlocked.current = true;
+  };
 
-    _defineProperty(_assertThisInitialized(_this), "buildCustomEvent", (ev, isoFormattedValue) => {
-      const {
-        id,
-        name,
-        value
-      } = ev.target;
-      const {
-        lastValidEventValues
-      } = _this.state;
+  const assignInput = input => {
+    var _inputRefMap$inputNam;
 
-      const validRawValue = _date.default.isValidDate({
-        value: isoFormattedValue,
-        ..._this.localeData
-      });
+    inputRef.current = input.current;
+    parentRef.current = input.current.parentElement;
 
-      const validValues = _this.canBeEmptyValues(value) ? {
-        formattedValue: "",
-        rawValue: ""
-      } : lastValidEventValues;
-      ev.target = { ...(name && {
-          name
-        }),
-        ...(id && {
-          id
-        }),
-        value: { ...validValues,
-          ...(validRawValue && {
-            formattedValue: _date.default.formatDateToCurrentLocale({
-              value,
-              ..._this.localeData
-            })
-          }),
-          ...(validRawValue && {
-            rawValue: isoFormattedValue
-          }),
-          ...(!validRawValue && {
-            formattedValue: value,
-            rawValue: value
-          })
+    if (inputRefMap && ((_inputRefMap$inputNam = inputRefMap[inputName]) === null || _inputRefMap$inputNam === void 0 ? void 0 : _inputRefMap$inputNam.setOpen) !== setOpen) {
+      setInputRefMap({
+        [inputName]: {
+          isBlurBlocked,
+          setOpen
         }
-      };
-      return ev;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderDatePicker", dateRangeProps => {
-      if (!_this.state.isDatePickerOpen) return null;
-      const {
-        visibleValue
-      } = _this.state;
-      let isoValue = "";
-
-      if (_date.default.isValidDate({
-        value: visibleValue,
-        ..._this.localeData
-      })) {
-        isoValue = _date.default.formatValue({
-          value: visibleValue,
-          ..._this.localeData
-        });
-      }
-
-      return /*#__PURE__*/_react.default.createElement("div", {
-        onClick: _this.markCurrentDatepicker,
-        role: "presentation"
-      }, /*#__PURE__*/_react.default.createElement(_datePicker.default, _extends({
-        inputElement: _this.inputPresentationRef,
-        selectedDate: _this.state.selectedDate,
-        handleDateSelect: _this.handleDateSelect,
-        inputDate: isoValue,
-        disablePortal: _this.props.disablePortal
-      }, dateRangeProps)));
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "markCurrentDatepicker", () => {
-      if (_this.props.disabled || _this.props.readOnly) return;
-      _this.isOpening = true;
-      _this.inputFocusedViaPicker = false;
-      _this.isBlurBlocked = true;
-
-      _this.openDatePicker();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "hiddenValue", () => {
-      if (_date.default.isValidDate({
-        value: _this.state.visibleValue,
-        ..._this.localeData
-      })) {
-        return _date.default.formatValue({
-          value: _this.state.visibleValue,
-          formatTo: hiddenDateFormat,
-          ..._this.localeData
-        });
-      }
-
-      return _this.state.lastValidEventValues.rawValue;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderHiddenInput", () => {
-      const props = {
-        name: _this.props.name,
-        type: "hidden",
-        "data-element": "hidden-input",
-        value: _this.hiddenValue()
-      };
-      return /*#__PURE__*/_react.default.createElement("input", props);
-    });
-
-    return _this;
-  }
-
-  _createClass(BaseDateInput, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.hasMounted = true;
-
-      if (this.props.autoFocus) {
-        this.isAutoFocused = true;
-        this.openDatePicker(true);
-        this.setState({
-          shouldPickerOpen: true
-        });
-      }
+      });
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      const message = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
-      (0, _invariant.default)(this.isControlled === (this.props.value !== undefined), message);
-
-      if (this.isControlled && !this.inputHasFocus && this.hasValueChanged(prevProps)) {
-        this.updateSelectedDate(this.props.value);
+  };
+
+  (0, _react.useEffect)(() => {
+    const fnClosePicker = ev => {
+      if (open && !_events.default.composedPath(ev).includes(parentRef.current) && !_events.default.composedPath(ev).includes(pickerRef.current)) {
+        alreadyFocused.current = true;
+        inputRef.current.focus();
+        isBlurBlocked.current = false;
+        inputRef.current.blur();
+        setOpen(false);
+        alreadyFocused.current = false;
       }
+    };
+
+    document.addEventListener("mousedown", fnClosePicker);
+    return function cleanup() {
+      document.removeEventListener("mousedown", fnClosePicker);
+    };
+  }, [open]);
+  (0, _react.useEffect)(() => {
+    const [matchedFormat, matchedValue] = (0, _utils.findMatchedFormatAndValue)(value, formats);
+
+    if (matchedFormat && matchedValue && (0, _utils.isDateValid)((0, _utils.parseDate)(matchedFormat, matchedValue))) {
+      setSelectedDays((0, _utils.parseDate)(...(0, _utils.additionalYears)(matchedFormat, matchedValue)));
+    } else if ((0, _utils.checkISOFormatAndLength)(value)) {
+      setSelectedDays((0, _utils.parseISODate)(value));
+    } else {
+      setSelectedDays(undefined);
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.hasMounted = false;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      const {
-        minDate,
-        maxDate,
-        labelInline,
-        adaptiveLabelBreakpoint,
-        disablePortal,
-        tooltipPosition,
-        "data-component": dataComponent,
-        "data-element": dataElement,
-        "data-role": dataRole,
-        ...inputProps
-      } = this.props;
-      let events = {};
-      delete inputProps.defaultValue;
-      delete inputProps.value;
-      events = {
-        onBlur: this.handleBlur,
-        onChange: this.handleVisibleInputChange,
-        onFocus: this.handleFocus,
-        onKeyDown: this.handleKeyDown,
-        onClick: this.handleClick,
-        iconOnClick: this.handleClick
-      };
-      return /*#__PURE__*/_react.default.createElement(_date2.default, _extends({
-        role: "presentation",
-        size: inputProps.size,
-        labelInline: labelInline,
-        "data-component": dataComponent,
-        "data-element": dataElement,
-        "data-role": dataRole
-      }, (0, _utils.filterStyledSystemMarginProps)(this.props)), /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({}, (0, _utils.filterOutStyledSystemSpacingProps)(inputProps), {
-        inputIcon: "calendar",
-        value: this.state.visibleValue,
-        labelInline: labelInline,
-        rawValue: _date.default.formatValue({
-          value: this.state.visibleValue,
-          ...this.localeData
-        }),
-        inputRef: this.assignInput,
-        adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
-        tooltipPosition: tooltipPosition,
-        helpAriaLabel: this.props.helpAriaLabel
-      }, events)), this.renderHiddenInput(), this.renderDatePicker({
-        minDate,
-        maxDate
-      }));
-    }
-  }]);
+  }, [value, formats]);
 
-  return BaseDateInput;
-}(_react.default.Component);
+  const computedValue = () => {
+    if ((0, _utils.checkISOFormatAndLength)(value)) {
+      return (0, _utils.formattedValue)(format, (0, _utils.parseISODate)(value));
+    }
 
-exports.BaseDateInput = BaseDateInput;
+    const valueSeparator = (0, _utils.getSeparator)(value);
+    const formatSeparator = (0, _utils.getSeparator)(format);
 
-function generateAdjustedValue({
-  value,
-  defaultValue,
-  allowEmptyValue
-}, {
-  locale,
-  formats,
-  format
-}) {
-  if (value !== undefined && canReturnValue(value, allowEmptyValue)) {
-    return _date.default.formatDateToCurrentLocale({
-      value,
-      locale,
-      formats,
-      format
-    });
-  }
-
-  if (canReturnValue(defaultValue, allowEmptyValue)) {
-    return _date.default.formatDateToCurrentLocale({
-      value: defaultValue,
-      locale,
-      formats,
-      format
-    });
-  }
-
-  return _date.default.formatDateToCurrentLocale({
-    value: _date.default.todayFormatted(),
-    locale,
-    formats,
-    format
-  });
-}
-
-function isValidInitialFormat(value) {
-  return _date.default.isValidDate({
-    value,
-    format: hiddenDateFormat
-  });
-}
-
-function canReturnValue(value, allowEmptyValue) {
-  if (!allowEmptyValue && value && value.length) {
-    const message = "The Date component must be initialised with a value in the iso (YYYY-MM-DD) format";
-    (0, _invariant.default)(isValidInitialFormat(value), message);
-  }
-
-  return isValidInitialFormat(value) || allowEmptyValue && !value;
-}
-
-const DateInput = (0, _withUniqueIdProps.default)(BaseDateInput);
-BaseDateInput.contextType = _i18nContext.default;
-BaseDateInput.propTypes = { ..._textbox.default.propTypes,
-  ...marginPropTypes,
+    const replaceSeparators = () => value.split("").map(char => char === valueSeparator ? formatSeparator : char).join("");
 
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-component": _propTypes.default.string,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-element": _propTypes.default.string,
+    if (isInitialValue.current && valueSeparator !== formatSeparator && (0, _utils.isDateValid)((0, _utils.parseDate)(format, replaceSeparators()))) {
+      const [matchedFormat, matchedValue] = (0, _utils.findMatchedFormatAndValue)(replaceSeparators(), formats);
+      return (0, _utils.formattedValue)(format, (0, _utils.parseDate)(...(0, _utils.additionalYears)(matchedFormat, matchedValue)));
+    }
 
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-role": _propTypes.default.string,
+    return value;
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_date.default, _extends({
+    ref: wrapperRef,
+    role: "presentation",
+    size: size,
+    labelInline: labelInline,
+    "data-component": dataComponent || "date",
+    "data-element": dataElement,
+    "data-role": dataRole
+  }, (0, _utils2.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({}, (0, _utils2.filterOutStyledSystemSpacingProps)(rest), {
+    value: computedValue(),
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onClick: handleClick,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown,
+    iconOnClick: handleClick,
+    onMouseDown: handleMouseDown,
+    iconOnMouseDown: handleMouseDown,
+    inputIcon: "calendar",
+    labelInline: labelInline,
+    inputRef: assignInput,
+    adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
+    tooltipPosition: tooltipPosition,
+    helpAriaLabel: helpAriaLabel,
+    autoFocus: autoFocus,
+    size: size,
+    disabled: disabled,
+    readOnly: readOnly
+  })), open && /*#__PURE__*/_react.default.createElement(_datePicker.default, {
+    disablePortal: disablePortal,
+    inputElement: parentRef,
+    pickerProps: pickerProps,
+    selectedDays: selectedDays,
+    setSelectedDays: setSelectedDays,
+    onDayClick: handleDayClick,
+    minDate: minDate,
+    maxDate: maxDate,
+    ref: pickerRef,
+    pickerMouseDown: handlePickerMouseDown
+  }));
+};
 
-  /** Boolean to allow the input to have an empty value */
-  allowEmptyValue: _propTypes.default.bool,
+DateInput.propTypes = { ..._textbox.default.propTypes,
+  ...marginPropTypes,
 
-  /** Automatically focus on component mount */
-  autoFocus: _propTypes.default.bool,
+  /** Pass any props that match the [DayPickerProps](https://react-day-picker.js.org/api/DayPicker)
+   * interface to override default behaviors
+   * */
+  pickerProps: _propTypes.default.object,
 
   /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
   disablePortal: _propTypes.default.bool,
@@ -710,30 +356,14 @@ BaseDateInput.propTypes = { ..._textbox.default.propTypes,
   /** Maximum possible date YYYY-MM-DD */
   maxDate: _propTypes.default.string,
 
-  /** Specify a callback triggered on blur */
-  onBlur: _propTypes.default.func,
-
   /** Specify a callback triggered on change */
-  onChange: _propTypes.default.func,
-
-  /** Specify a callback triggered on focus */
-  onFocus: _propTypes.default.func,
+  onChange: _propTypes.default.func.isRequired,
 
-  /** Name of the input */
-  name: _propTypes.default.string,
+  /** The current date string */
+  value: _propTypes.default.string.isRequired,
 
-  /** The current date YYYY-MM-DD */
-  value: _propTypes.default.string,
-
-  /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
-  adaptiveLabelBreakpoint: _propTypes.default.number,
-
-  /** Flag to configure component as mandatory */
-  required: _propTypes.default.bool
-};
-BaseDateInput.defaultProps = {
-  disablePortal: false,
-  "data-component": "date"
+  /** Boolean to allow the input to have an empty value */
+  allowEmptyValue: _propTypes.default.bool
 };
 var _default = DateInput;
 exports.default = _default;