@dnb/eufemia 10.54.0 → 10.55.0

package/cjs/components/date-picker/DatePickerInput.js

@@ -1,11 +1,11 @@
 "use strict";
+"use client";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
 var _addDays = _interopRequireDefault(require("date-fns/addDays"));
 var _addMonths = _interopRequireDefault(require("date-fns/addMonths"));
 var _addYears = _interopRequireDefault(require("date-fns/addYears"));
@@ -18,480 +18,537 @@ var _Input = _interopRequireWildcard(require("../input/Input"));
 var _componentHelper = require("../../shared/component-helper");
 var _DatePickerCalc = require("./DatePickerCalc");
 var _DatePickerContext = _interopRequireDefault(require("./DatePickerContext"));
-const _excluded = ["id", "title", "submitAttributes", "isRange", "maskOrder", "maskPlaceholder", "separatorRexExp", "onChange", "onFocus", "onSubmit", "onBlur", "selectedDateTitle", "showInput", "input_element", "locale", "disabled", "skeleton", "opened", "size", "status", "status_state", "status_props"],
-  _excluded2 = ["className", "value"];
+var _shared = require("../../shared");
 var _span;
+const _excluded = ["isRange", "maskOrder", "separatorRexExp", "id", "title", "submitAttributes", "maskPlaceholder", "onFocus", "onBlur", "onChange", "onSubmit", "selectedDateTitle", "showInput", "input_element", "lang", "disabled", "skeleton", "opened", "size", "status", "status_state", "status_props"],
+  _excluded2 = ["className", "value"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-class DatePickerInput extends _react.default.PureComponent {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "state", {
-      _listenForPropChanges: true,
-      focusState: 'virgin',
-      partialStartDate: '',
-      partialEndDate: ''
-    });
-    _defineProperty(this, "shortcutHandler", async e => {
-      if (this.focusMode) {
-        const success = (e.clipboardData || typeof window !== 'undefined' && window.clipboardData).getData('text');
-        if (success) {
-          e.preventDefault();
-          try {
-            const separators = ['.', '/'];
-            const possibleFormats = ['yyyy-MM-dd'];
-            possibleFormats.forEach(date => {
-              separators.forEach(sep => {
-                possibleFormats.push(date.replace(/-/g, sep));
-              });
-            });
-            possibleFormats.forEach(date => {
-              possibleFormats.push(date.split('').reverse().join(''));
-            });
-            let date;
-            for (let i = 0, l = possibleFormats.length; i < l; ++i) {
-              date = (0, _DatePickerCalc.convertStringToDate)(success, {
-                date_format: possibleFormats[i]
-              });
-              if (date) {
-                break;
-              }
-            }
-            const mode = this.focusMode === 'start' ? 'startDate' : 'endDate';
-            if (date && !this.state[mode]) {
-              this.context.setState({
-                [mode]: date
-              });
-            }
-          } catch (e) {
-            (0, _componentHelper.warn)(e);
-          }
-        }
-      }
-    });
-    _defineProperty(this, "callOnChangeAsInvalid", state => {
-      this.context.updateState({
-        hoverDate: null
-      }, () => {
-        if (this.context.hasHadValidDate) {
-          const {
-            startDate,
-            endDate,
-            event
-          } = _objectSpread(_objectSpread({}, this.context), state);
-          this.context.callOnChangeHandler({
-            startDate,
-            endDate,
-            event
-          });
-        }
-      });
-    });
-    _defineProperty(this, "callOnChange", _ref => {
-      let {
-        startDate,
-        endDate,
-        event
-      } = _ref;
-      const state = {
-        changeMonthViews: true
-      };
-      if (typeof startDate !== 'undefined' && (0, _isValid.default)(startDate)) {
-        state.startDate = startDate;
-      }
-      if (!this.props.isRange) {
-        endDate = startDate;
+const defaultProps = {
+  maskOrder: 'dd/mm/yyyy',
+  maskPlaceholder: 'dd/mm/åååå',
+  separatorRexExp: /[-/ ]/g,
+  status_state: 'error',
+  opened: false
+};
+function DatePickerInput(externalProps) {
+  const props = _objectSpread(_objectSpread({}, defaultProps), externalProps);
+  const {
+      isRange,
+      maskOrder,
+      separatorRexExp,
+      id,
+      title,
+      submitAttributes,
+      maskPlaceholder,
+      onFocus,
+      onBlur,
+      onChange,
+      onSubmit,
+      selectedDateTitle,
+      showInput,
+      input_element,
+      lang,
+      disabled,
+      skeleton,
+      opened,
+      size,
+      status,
+      status_state,
+      status_props
+    } = props,
+    attributes = _objectWithoutProperties(props, _excluded);
+  const [focusState, setFocusState] = (0, _react.useState)('virgin');
+  const [partialDates, setPartialDates] = (0, _react.useState)({
+    partialStartDate: '',
+    partialEndDate: ''
+  });
+  const {
+    updateDates,
+    callOnChangeHandler,
+    hasHadValidDate,
+    getReturnObject,
+    __startDay,
+    __startMonth,
+    __startYear,
+    __endDay,
+    __endMonth,
+    __endYear,
+    startDate,
+    endDate,
+    props: {
+      on_type,
+      label
+    }
+  } = (0, _react.useContext)(_DatePickerContext.default);
+  const translation = (0, _shared.useTranslation)().DatePicker;
+  const modeDate = (0, _react.useMemo)(() => ({
+    startDate,
+    endDate
+  }), [startDate, endDate]);
+  const inputDates = (0, _react.useMemo)(() => ({
+    __startDay,
+    __startMonth,
+    __startYear,
+    __endDay,
+    __endMonth,
+    __endYear
+  }), [__startDay, __startMonth, __startYear, __endDay, __endMonth, __endYear]);
+  const startDayRef = (0, _react.useRef)();
+  const startMonthRef = (0, _react.useRef)();
+  const startYearRef = (0, _react.useRef)();
+  const endDayRef = (0, _react.useRef)();
+  const endMonthRef = (0, _react.useRef)();
+  const endYearRef = (0, _react.useRef)();
+  const inputRefs = (0, _react.useMemo)(() => ({
+    startDayRef,
+    startMonthRef,
+    startYearRef,
+    endDayRef,
+    endMonthRef,
+    endYearRef
+  }), []);
+  const startDayDateRef = (0, _react.useRef)();
+  const endDayDateRef = (0, _react.useRef)();
+  const startMonthDateRef = (0, _react.useRef)();
+  const endMonthDateRef = (0, _react.useRef)();
+  const startYearDateRef = (0, _react.useRef)();
+  const endYearDateRef = (0, _react.useRef)();
+  const dateRefs = (0, _react.useMemo)(() => ({
+    startDay: startDayDateRef,
+    startMonth: endDayDateRef,
+    startYear: startMonthDateRef,
+    endDay: endMonthDateRef,
+    endMonth: startYearDateRef,
+    endYear: endYearDateRef
+  }), []);
+  const startDateRef = (0, _react.useRef)();
+  const endDateRef = (0, _react.useRef)();
+  const temporaryDates = (0, _react.useMemo)(() => ({
+    startDate: startDateRef,
+    endDate: endDateRef
+  }), []);
+  const refList = (0, _react.useRef)();
+  const focusMode = (0, _react.useRef)();
+  const maskList = (0, _react.useMemo)(() => {
+    const separators = maskOrder.match(separatorRexExp);
+    return maskOrder.split(separatorRexExp).reduce((acc, cur) => {
+      if (!cur) {
+        return acc;
       }
-      if (typeof endDate !== 'undefined' && (0, _isValid.default)(endDate)) {
-        state.endDate = endDate;
+      acc.push(cur);
+      if (separators.length > 0) {
+        acc.push(separators.shift());
       }
-      this.context.updateState(state, () => {
-        if (typeof startDate !== 'undefined' && (0, _isValid.default)(startDate) || typeof endDate !== 'undefined' && (0, _isValid.default)(endDate)) {
-          this.context.callOnChangeHandler({
-            event
-          });
-        }
+      return acc;
+    }, []);
+  }, [maskOrder, separatorRexExp]);
+  const pasteHandler = (0, _react.useCallback)(async event => {
+    if (!focusMode.current) {
+      return;
+    }
+    const success = (event.clipboardData || typeof window !== 'undefined' && window['clipboardData']).getData('text');
+    if (!success) {
+      return;
+    }
+    event.preventDefault();
+    try {
+      const separators = ['.', '/'];
+      const possibleFormats = ['yyyy-MM-dd'];
+      possibleFormats.forEach(date => {
+        separators.forEach(sep => {
+          possibleFormats.push(date.replace(/-/g, sep));
+        });
       });
-    });
-    _defineProperty(this, "callOnType", _ref2 => {
-      let {
-        event
-      } = _ref2;
-      const getDates = () => ['start', 'end'].reduce((acc, mode) => {
-        acc[`${mode}Date`] = [this[`_${mode}Year`] || this.context[`__${mode}Year`] || 'yyyy', this[`_${mode}Month`] || this.context[`__${mode}Month`] || 'mm', this[`_${mode}Day`] || this.context[`__${mode}Day`] || 'dd'].join('-');
-        return acc;
-      }, {});
-      let {
-        startDate,
-        endDate
-      } = getDates();
-      const partialStartDate = startDate;
-      const partialEndDate = endDate;
-      this.setState({
-        partialStartDate,
-        partialEndDate
+      possibleFormats.forEach(date => {
+        possibleFormats.push(date.split('').reverse().join(''));
       });
-      startDate = (0, _parseISO.default)(startDate);
-      endDate = (0, _parseISO.default)(endDate);
-      if (!(0, _isValid.default)(startDate)) {
-        startDate = null;
+      let date;
+      let index = 0;
+      for (index; index < possibleFormats.length; ++index) {
+        date = (0, _DatePickerCalc.convertStringToDate)(success, {
+          date_format: possibleFormats[index]
+        });
+        if (date) {
+          break;
+        }
       }
-      if (!(0, _isValid.default)(endDate)) {
-        endDate = null;
+      const mode = focusMode.current === 'start' ? 'startDate' : 'endDate';
+      if (date) {
+        updateDates({
+          [mode]: date
+        });
       }
-      let returnObject = this.context.getReturnObject({
-        startDate,
-        endDate,
-        event,
-        partialStartDate,
-        partialEndDate
-      });
-      if (returnObject.is_valid === false || returnObject.is_valid_start_date === false || returnObject.is_valid_end_date === false) {
+    } catch (error) {
+      (0, _componentHelper.warn)(error);
+    }
+  }, [updateDates]);
+  const callOnChangeAsInvalid = (0, _react.useCallback)(state => {
+    updateDates({
+      hoverDate: null
+    }, dates => {
+      if (hasHadValidDate) {
         const {
           startDate,
-          endDate
-        } = getDates();
-        const typedDates = this.props.isRange ? {
-          start_date: startDate,
-          end_date: endDate
-        } : {
-          date: startDate
-        };
-        returnObject = _objectSpread(_objectSpread({}, returnObject), typedDates);
-      }
-      (0, _componentHelper.dispatchCustomElementEvent)(this.context, 'on_type', returnObject);
-    });
-    _defineProperty(this, "prepareCounting", async _ref3 => {
-      let {
-        keyCode,
-        target,
-        event
-      } = _ref3;
-      try {
-        const isDate = target.getAttribute('class').match(/__input--([day|month|year]+)($|\s)/)[1];
-        const isInRange = target.getAttribute('id').match(/-([start|end]+)-/)[1];
-        let date = isInRange === 'start' ? this.context.startDate : this.context.endDate;
-        if (!date) {
-          return;
-        }
-        const count = keyCode === 'up' ? 1 : -1;
-        if (keyCode === 'up' || keyCode === 'down') {
-          switch (isDate) {
-            case 'day':
-              date = (0, _addDays.default)(date, count);
-              break;
-            case 'month':
-              date = (0, _addMonths.default)(date, count);
-              break;
-            case 'year':
-              date = (0, _addYears.default)(date, count);
-              break;
-          }
-        }
-        this.callOnChange({
-          [isInRange === 'start' ? 'startDate' : 'endDate']: date,
+          endDate,
+          event
+        } = _objectSpread(_objectSpread({}, state), dates);
+        callOnChangeHandler({
+          startDate,
+          endDate,
           event
         });
-        await wait(1);
-        selectAll(target);
-      } catch (e) {
-        (0, _componentHelper.warn)(e);
       }
     });
-    _defineProperty(this, "selectStart", target => {
-      target.focus();
-      target.setSelectionRange(0, 0);
-    });
-    _defineProperty(this, "onFocusHandler", event => {
-      try {
-        selectAll(event.target);
-      } catch (e) {
-        (0, _componentHelper.warn)(e);
-      }
-      this.setState({
-        focusState: 'focus',
-        _listenForPropChanges: false
-      });
-      if (this.props.onFocus) {
-        this.props.onFocus(_objectSpread(_objectSpread({}, event), this.context.getReturnObject({
+  }, [updateDates, callOnChangeHandler, hasHadValidDate]);
+  const callOnChange = (0, _react.useCallback)(_ref => {
+    let {
+      startDate,
+      endDate,
+      event
+    } = _ref;
+    const state = {};
+    if (typeof startDate !== 'undefined' && (0, _isValid.default)(startDate)) {
+      state['startDate'] = startDate;
+    }
+    if (!isRange) {
+      endDate = startDate;
+    }
+    if (typeof endDate !== 'undefined' && (0, _isValid.default)(endDate)) {
+      state['endDate'] = endDate;
+    }
+    updateDates(state, dates => {
+      if (typeof startDate !== 'undefined' && (0, _isValid.default)(startDate) || typeof endDate !== 'undefined' && (0, _isValid.default)(endDate)) {
+        callOnChangeHandler(_objectSpread({
           event
-        })));
+        }, dates));
       }
     });
-    _defineProperty(this, "onBlurHandler", event => {
-      const {
-        partialStartDate,
-        partialEndDate
-      } = this.state;
-      this.focusMode = null;
-      this.setState({
-        focusState: 'blur',
-        _listenForPropChanges: false
-      });
-      if (this.props.onBlur) {
-        this.props.onBlur(_objectSpread(_objectSpread({}, event), this.context.getReturnObject({
-          event,
-          partialStartDate,
-          partialEndDate
-        })));
-      }
+  }, [updateDates, callOnChangeHandler, isRange]);
+  const callOnType = (0, _react.useCallback)(_ref2 => {
+    let {
+      event
+    } = _ref2;
+    const getDates = () => ['start', 'end'].reduce((acc, mode) => {
+      acc[`${mode}Date`] = [dateRefs[`${mode}Year`].current || inputDates[`__${mode}Year`] || 'yyyy', dateRefs[`${mode}Month`].current || inputDates[`__${mode}Month`] || 'mm', dateRefs[`${mode}Day`].current || inputDates[`__${mode}Day`] || 'dd'].join('-');
+      return acc;
+    }, {
+      startDate: undefined,
+      endDate: undefined
     });
-    _defineProperty(this, "onKeyDownHandler", async event => {
-      const keyCode = (0, _componentHelper.keycode)(event);
-      const target = event.target;
-      if (target.selectionStart !== target.selectionEnd) {
-        this.selectStart(target);
-      }
-      switch (keyCode) {
-        case 'up':
-        case 'down':
-          event.persist();
-          event.preventDefault();
-          this.prepareCounting({
-            event,
-            keyCode,
-            target
-          });
-          return false;
-        case 'tab':
-          return false;
+    let {
+      startDate,
+      endDate
+    } = getDates();
+    const partialStartDate = startDate;
+    const partialEndDate = endDate;
+    setPartialDates({
+      partialStartDate,
+      partialEndDate
+    });
+    startDate = (0, _parseISO.default)(startDate);
+    endDate = (0, _parseISO.default)(endDate);
+    if (!(0, _isValid.default)(startDate)) {
+      startDate = null;
+    }
+    if (!(0, _isValid.default)(endDate)) {
+      endDate = null;
+    }
+    let returnObject = getReturnObject({
+      startDate,
+      endDate,
+      event,
+      partialStartDate,
+      partialEndDate
+    });
+    if (returnObject.is_valid === false || returnObject.is_valid_start_date === false || returnObject.is_valid_end_date === false) {
+      const {
+        startDate,
+        endDate
+      } = getDates();
+      const typedDates = isRange ? {
+        start_date: startDate,
+        end_date: endDate
+      } : {
+        date: startDate
+      };
+      returnObject = _objectSpread(_objectSpread({}, returnObject), typedDates);
+    }
+    on_type === null || on_type === void 0 ? void 0 : on_type(_objectSpread({}, returnObject));
+  }, [isRange, dateRefs, getReturnObject, inputDates, on_type]);
+  const prepareCounting = (0, _react.useCallback)(async _ref3 => {
+    let {
+      keyCode,
+      target,
+      event
+    } = _ref3;
+    try {
+      const isDate = target.getAttribute('class').match(/__input--([day|month|year]+)($|\s)/)[1];
+      const isInRange = target.getAttribute('id').match(/-([start|end]+)-/)[1];
+      let date = isInRange === 'start' ? startDate : endDate;
+      if (!date) {
+        return;
       }
-      const size = parseFloat(target.getAttribute('size'));
-      const firstSelectionStart = target.selectionStart;
-      await wait(1);
-      const secondSelectionStart = target.selectionStart;
-      const isValid = /[0-9]/.test(keyCode);
-      const index = this.refList.findIndex(_ref4 => {
-        let {
-          current
-        } = _ref4;
-        return current === target;
-      });
-      if (index < this.refList.length - 1 && (secondSelectionStart === size && isValid && keyCode !== 'left' && keyCode !== 'backspace' || firstSelectionStart === size && keyCode === 'right')) {
-        try {
-          if (!this.refList[index + 1].current) {
-            return;
-          }
-          const nextSibling = this.refList[index + 1].current;
-          if (nextSibling) {
-            nextSibling.focus();
-            nextSibling.setSelectionRange(0, 0);
-          }
-        } catch (e) {
-          (0, _componentHelper.warn)(e);
-        }
-      } else if (firstSelectionStart === 0 && index > 0) {
-        switch (keyCode) {
-          case 'left':
-          case 'backspace':
-            try {
-              const prevSibling = this.refList[index - 1].current;
-              if (prevSibling) {
-                const endPos = prevSibling.value.length;
-                prevSibling.focus();
-                prevSibling.setSelectionRange(endPos, endPos);
-              }
-            } catch (e) {
-              (0, _componentHelper.warn)(e);
-            }
+      const count = keyCode === 'ArrowUp' ? 1 : -1;
+      if (keyCode === 'ArrowUp' || keyCode === 'ArrowDown') {
+        switch (isDate) {
+          case 'day':
+            date = (0, _addDays.default)(date, count);
+            break;
+          case 'month':
+            date = (0, _addMonths.default)(date, count);
+            break;
+          case 'year':
+            date = (0, _addYears.default)(date, count);
             break;
         }
       }
+      callOnChange({
+        [isInRange === 'start' ? 'startDate' : 'endDate']: date,
+        event
+      });
+      await wait(1);
+      selectAll(target);
+    } catch (e) {
+      (0, _componentHelper.warn)(e);
+    }
+  }, [startDate, endDate, callOnChange]);
+  const selectStart = (0, _react.useCallback)(target => {
+    target.focus();
+    target.setSelectionRange(0, 0);
+  }, []);
+  const onFocusHandler = (0, _react.useCallback)(event => {
+    try {
+      selectAll(event.target);
+    } catch (e) {
+      (0, _componentHelper.warn)(e);
+    }
+    setFocusState('focus');
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(_objectSpread(_objectSpread({}, event), getReturnObject({
+      event
+    })));
+  }, [getReturnObject, onFocus]);
+  const onBlurHandler = (0, _react.useCallback)(event => {
+    focusMode.current = null;
+    setFocusState('blur');
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(_objectSpread(_objectSpread(_objectSpread({}, event), getReturnObject({
+      event
+    })), partialDates));
+  }, [onBlur, getReturnObject, partialDates]);
+  const onKeyDownHandler = (0, _react.useCallback)(async event => {
+    const keyCode = event.key;
+    const target = event.target;
+    if (target.selectionStart !== target.selectionEnd) {
+      selectStart(target);
+    }
+    switch (keyCode) {
+      case 'ArrowUp':
+      case 'ArrowDown':
+        event.persist();
+        event.preventDefault();
+        prepareCounting({
+          event,
+          keyCode,
+          target
+        });
+        return false;
+      case 'Tab':
+        return false;
+    }
+    const size = parseFloat(target.getAttribute('size'));
+    const firstSelectionStart = target.selectionStart;
+    await wait(1);
+    const secondSelectionStart = target.selectionStart;
+    const isValid = /[0-9]/g.test(keyCode);
+    const refListArray = refList.current;
+    const index = refListArray.findIndex(_ref4 => {
+      let {
+        current
+      } = _ref4;
+      return current === target;
     });
-    _defineProperty(this, "set_startDay", event => {
-      this.setDate(event, 'start', 'Day');
-    });
-    _defineProperty(this, "set_startMonth", event => {
-      this.setDate(event, 'start', 'Month');
-    });
-    _defineProperty(this, "set_startYear", event => {
-      this.setDate(event, 'start', 'Year');
-    });
-    _defineProperty(this, "set_endDay", event => {
-      this.setDate(event, 'end', 'Day');
-    });
-    _defineProperty(this, "set_endMonth", event => {
-      this.setDate(event, 'end', 'Month');
-    });
-    _defineProperty(this, "set_endYear", event => {
-      this.setDate(event, 'end', 'Year');
-    });
-    _defineProperty(this, "setDate", (event, mode, type) => {
-      event.persist();
-      const value = event.target.value;
-      this[`_${mode}${type}`] = value;
-      if (this.context[`${mode}Date`]) {
-        this[`tmp_${mode}Date`] = this.context[`${mode}Date`];
+    if (index < refListArray.length - 1 && (secondSelectionStart === size && isValid && keyCode !== 'ArrowLeft' && keyCode !== 'Backspace' || firstSelectionStart === size && keyCode === 'ArrowRight')) {
+      try {
+        if (!refListArray[index + 1].current) {
+          return;
+        }
+        const nextSibling = refListArray[index + 1].current;
+        if (nextSibling) {
+          nextSibling.focus();
+          nextSibling.setSelectionRange(0, 0);
+        }
+      } catch (e) {
+        (0, _componentHelper.warn)(e);
       }
-      const fallback = this[`tmp_${mode}Date`];
-      const year = this[`_${mode}Year`] || fallback && fallback.getFullYear();
-      const month = this[`_${mode}Month`] || fallback && fallback.getMonth() + 1;
-      const day = this[`_${mode}Day`] || fallback && fallback.getDate();
-      const date = new Date(parseFloat(year), parseFloat(month) - 1, parseFloat(day));
-      const isValidDate = !/[^0-9]/.test(day) && !/[^0-9]/.test(month) && !/[^0-9]/.test(year) && (0, _isValid.default)(date) && date.getDate() == parseFloat(day) && date.getMonth() + 1 == parseFloat(month) && date.getFullYear() == parseFloat(year);
-      if (isValidDate) {
-        this.callOnChange({
-          [`${mode}Date`]: date,
-          event
-        });
-      } else {
-        this.context.updateState({
-          [`${mode}Date`]: null
-        });
-        this.context.updateState({
-          [`__${mode}${type}`]: value
-        });
-        this.callOnChangeAsInvalid({
-          [`${mode}Date`]: null,
-          event
-        });
+    } else if (firstSelectionStart === 0 && index > 0) {
+      switch (keyCode) {
+        case 'ArrowLeft':
+        case 'Backspace':
+          try {
+            const prevSibling = refListArray[index - 1].current;
+            if (prevSibling) {
+              const endPos = prevSibling.value.length;
+              prevSibling.focus();
+              prevSibling.setSelectionRange(endPos, endPos);
+            }
+          } catch (e) {
+            (0, _componentHelper.warn)(e);
+          }
+          break;
       }
-      this.callOnType({
+    }
+  }, [prepareCounting, selectStart]);
+  const setDate = (0, _react.useCallback)((event, mode, type) => {
+    var _dateRefs, _dateRefs2, _dateRefs3;
+    event.persist();
+    const value = event.target.value;
+    dateRefs[`${mode}${type}`].current = value;
+    if (modeDate[`${mode}Date`]) {
+      temporaryDates[`${mode}Date`].current = modeDate[`${mode}Date`];
+    }
+    const fallback = temporaryDates[`${mode}Date`].current;
+    const year = ((_dateRefs = dateRefs[`${mode}Year`]) === null || _dateRefs === void 0 ? void 0 : _dateRefs.current) || fallback && fallback.getFullYear();
+    const month = ((_dateRefs2 = dateRefs[`${mode}Month`]) === null || _dateRefs2 === void 0 ? void 0 : _dateRefs2.current) || fallback && fallback.getMonth() + 1;
+    const day = ((_dateRefs3 = dateRefs[`${mode}Day`]) === null || _dateRefs3 === void 0 ? void 0 : _dateRefs3.current) || fallback && fallback.getDate();
+    const date = new Date(parseFloat(String(year)), parseFloat(String(month)) - 1, parseFloat(String(day)));
+    const isValidDate = !/[^0-9]/.test(String(day)) && !/[^0-9]/.test(String(month)) && !/[^0-9]/.test(String(year)) && (0, _isValid.default)(date) && date.getDate() == parseFloat(String(day)) && date.getMonth() + 1 == parseFloat(String(month)) && date.getFullYear() == parseFloat(String(year));
+    if (isValidDate) {
+      callOnChange({
+        [`${mode}Date`]: date,
         event
       });
+    } else {
+      updateDates({
+        [`${mode}Date`]: null,
+        [`__${mode}${type}`]: value
+      });
+      callOnChangeAsInvalid({
+        [`${mode}Date`]: null,
+        event
+      });
+    }
+    callOnType({
+      event
     });
-    _defineProperty(this, "renderInputElement", params => {
-      const {
-        id,
-        isRange
-      } = this.props;
-      this.refList = [];
-      const startDateList = this.generateDateList(params, 'start');
-      const endDateList = this.generateDateList(params, 'end');
-      return _react.default.createElement("span", {
-        id: `${id}-input`,
-        className: "dnb-date-picker__input__wrapper"
-      }, startDateList, isRange && (_span || (_span = _react.default.createElement("span", {
-        className: "dnb-date-picker--separator",
-        "aria-hidden": true
-      }, ' – '))), isRange && endDateList);
-    });
-    const _separators = props.maskOrder.match(props.separatorRexExp);
-    this.maskList = props.maskOrder.split(props.separatorRexExp).reduce((acc, cur) => {
-      if (cur) {
-        acc.push(cur);
-        if (_separators.length > 0) {
-          acc.push(_separators.shift());
-        }
-      }
-      return acc;
-    }, []);
-    this._startDayRef = _react.default.createRef();
-    this._startMonthRef = _react.default.createRef();
-    this._startYearRef = _react.default.createRef();
-    this._endDayRef = _react.default.createRef();
-    this._endMonthRef = _react.default.createRef();
-    this._endYearRef = _react.default.createRef();
-  }
-  componentWillUnmount() {
-    if (this._shortcuts) {
-      this._shortcuts.remove(this.osShortcut);
+  }, [updateDates, callOnChange, callOnChangeAsInvalid, callOnType, modeDate, dateRefs, temporaryDates]);
+  const dateSetters = (0, _react.useMemo)(() => ({
+    set_startDay: event => {
+      setDate(event, 'start', 'Day');
+    },
+    set_startMonth: event => {
+      setDate(event, 'start', 'Month');
+    },
+    set_startYear: event => {
+      setDate(event, 'start', 'Year');
+    },
+    set_endDay: event => {
+      setDate(event, 'end', 'Day');
+    },
+    set_endMonth: event => {
+      setDate(event, 'end', 'Month');
+    },
+    set_endYear: event => {
+      setDate(event, 'end', 'Year');
     }
-  }
-  getPlaceholderChar(value) {
-    const index = this.props.maskOrder.indexOf(value);
-    return this.props.maskPlaceholder[index];
-  }
-  generateDateList(params, mode) {
-    return this.maskList.map((value, i) => {
+  }), [setDate]);
+  const getPlaceholderChar = (0, _react.useCallback)(value => {
+    const index = maskOrder.indexOf(value);
+    return maskPlaceholder[index];
+  }, [maskOrder, maskPlaceholder]);
+  const generateDateList = (0, _react.useCallback)((element, mode) => {
+    return maskList.map((value, i) => {
       const state = value.slice(0, 1);
-      const placeholderChar = this.getPlaceholderChar(value);
-      const {
-        input_element,
-        separatorRexExp,
-        isRange,
-        size
-      } = this.props;
+      const placeholderChar = getPlaceholderChar(value);
       const {
         day,
         month,
         year
-      } = this.context.translation.DatePicker;
-      const isRangeLabel = isRange ? `${this.context.translation.DatePicker[mode]} ` : '';
+      } = translation;
+      const isRangeLabel = isRange ? `${translation[mode]} ` : '';
       if (!separatorRexExp.test(value)) {
         if (!input_element) {
-          params = _objectSpread(_objectSpread({}, params), {}, {
-            onKeyDown: this.onKeyDownHandler,
-            onPaste: this.shortcutHandler,
+          element = _objectSpread(_objectSpread({}, element), {}, {
+            onKeyDown: onKeyDownHandler,
+            onPaste: pasteHandler,
             onFocus: e => {
-              this.focusMode = mode;
-              this.onFocusHandler(e);
+              focusMode.current = mode;
+              onFocusHandler(e);
             },
-            onBlur: this.onBlurHandler,
+            onBlur: onBlurHandler,
             placeholderChar
           });
         }
-        const DateField = input_element && _react.default.isValidElement(input_element) ? input_element : InputElement;
+        const DateField = input_element && _react.default.isValidElement(input_element) ? input_element.type : InputElement;
         const inputSizeClassName = size && `dnb-date-picker__input--${size}`;
         switch (state) {
           case 'd':
-            this.refList.push(this[`_${mode}DayRef`]);
+            refList.current.push(inputRefs[`${mode}DayRef`]);
             return _react.default.createElement(_react.default.Fragment, {
               key: 'dd' + i
-            }, _react.default.createElement(DateField, _extends({}, params, {
-              id: `${this.props.id}-${mode}-day`,
+            }, _react.default.createElement(DateField, _extends({}, element, {
+              id: `${id}-${mode}-day`,
               key: 'di' + i,
-              className: (0, _classnames.default)("dnb-date-picker__input dnb-date-picker__input--day", params.className, inputSizeClassName),
-              size: "2",
+              className: (0, _classnames.default)("dnb-date-picker__input dnb-date-picker__input--day", element.className, inputSizeClassName),
+              size: 2,
               mask: [/[0-3]/, /[0-9]/],
-              inputRef: this[`_${mode}DayRef`],
-              onChange: this[`set_${mode}Day`],
-              value: this.context[`__${mode}Day`] || '',
-              "aria-labelledby": `${this.props.id}-${mode}-day-label`
+              inputRef: inputRefs[`${mode}DayRef`],
+              onChange: dateSetters[`set_${mode}Day`],
+              value: inputDates[`__${mode}Day`] || '',
+              "aria-labelledby": `${id}-${mode}-day-label`
             })), _react.default.createElement("label", {
               key: 'dl' + i,
               hidden: true,
-              id: `${this.props.id}-${mode}-day-label`,
-              htmlFor: `${this.props.id}-${mode}-day`
+              id: `${id}-${mode}-day-label`,
+              htmlFor: `${id}-${mode}-day`
             }, isRangeLabel + day));
           case 'm':
-            this.refList.push(this[`_${mode}MonthRef`]);
+            refList.current.push(inputRefs[`${mode}MonthRef`]);
             return _react.default.createElement(_react.default.Fragment, {
               key: 'mm' + i
-            }, _react.default.createElement(DateField, _extends({}, params, {
-              id: `${this.props.id}-${mode}-month`,
+            }, _react.default.createElement(DateField, _extends({}, element, {
+              id: `${id}-${mode}-month`,
               key: 'mi' + i,
-              className: (0, _classnames.default)("dnb-date-picker__input dnb-date-picker__input--month", params.className, inputSizeClassName),
-              size: "2",
+              className: (0, _classnames.default)("dnb-date-picker__input dnb-date-picker__input--month", element.className, inputSizeClassName),
+              size: 2,
               mask: [/[0-1]/, /[0-9]/],
-              inputRef: this[`_${mode}MonthRef`],
-              onChange: this[`set_${mode}Month`],
-              value: this.context[`__${mode}Month`] || '',
-              "aria-labelledby": `${this.props.id}-${mode}-month-label`
+              inputRef: inputRefs[`${mode}MonthRef`],
+              onChange: dateSetters[`set_${mode}Month`],
+              value: inputDates[`__${mode}Month`] || '',
+              "aria-labelledby": `${id}-${mode}-month-label`
             })), _react.default.createElement("label", {
               key: 'ml' + i,
               hidden: true,
-              id: `${this.props.id}-${mode}-month-label`,
-              htmlFor: `${this.props.id}-${mode}-month`
+              id: `${id}-${mode}-month-label`,
+              htmlFor: `${id}-${mode}-month`
             }, isRangeLabel + month));
           case 'y':
-            this.refList.push(this[`_${mode}YearRef`]);
+            refList.current.push(inputRefs[`${mode}YearRef`]);
             return _react.default.createElement(_react.default.Fragment, {
               key: 'yy' + i
-            }, _react.default.createElement(DateField, _extends({}, params, {
-              id: `${this.props.id}-${mode}-year`,
+            }, _react.default.createElement(DateField, _extends({}, element, {
+              id: `${id}-${mode}-year`,
               key: 'yi' + i,
-              className: (0, _classnames.default)("dnb-date-picker__input dnb-date-picker__input--year", params.className, inputSizeClassName),
-              size: "4",
+              className: (0, _classnames.default)("dnb-date-picker__input dnb-date-picker__input--year", element.className, inputSizeClassName),
+              size: 4,
               mask: [/[1-2]/, /[0-9]/, /[0-9]/, /[0-9]/],
-              inputRef: this[`_${mode}YearRef`],
-              onChange: this[`set_${mode}Year`],
-              value: this.context[`__${mode}Year`] || '',
-              "aria-labelledby": `${this.props.id}-${mode}-year-label`
+              inputRef: inputRefs[`${mode}YearRef`],
+              onChange: dateSetters[`set_${mode}Year`],
+              value: inputDates[`__${mode}Year`] || '',
+              "aria-labelledby": `${id}-${mode}-year-label`
             })), _react.default.createElement("label", {
               key: 'yl' + i,
               hidden: true,
-              id: `${this.props.id}-${mode}-year-label`,
-              htmlFor: `${this.props.id}-${mode}-year`
+              id: `${id}-${mode}-year-label`,
+              htmlFor: `${id}-${mode}-year`
             }, isRangeLabel + year));
         }
       }
@@ -501,143 +558,68 @@ class DatePickerInput extends _react.default.PureComponent {
         "aria-hidden": true
       }, placeholderChar);
     });
+  }, [id, input_element, isRange, size, translation, separatorRexExp, dateSetters, inputRefs, maskList, onBlurHandler, onFocusHandler, getPlaceholderChar, pasteHandler, onKeyDownHandler, inputDates]);
+  const renderInputElement = (0, _react.useCallback)(element => {
+    refList.current = [];
+    const startDateList = generateDateList(element, 'start');
+    const endDateList = generateDateList(element, 'end');
+    return _react.default.createElement("span", {
+      id: `${id}-input`,
+      className: "dnb-date-picker__input__wrapper"
+    }, startDateList, isRange && (_span || (_span = _react.default.createElement("span", {
+      className: "dnb-date-picker--separator",
+      "aria-hidden": true
+    }, ' – '))), isRange && endDateList);
+  }, [id, isRange, generateDateList]);
+  const formatDate = (0, _react.useMemo)(() => selectedDateTitle ? `${selectedDateTitle}, ${translation.open_picker_text}` : translation.open_picker_text, [selectedDateTitle, translation]);
+  (0, _componentHelper.validateDOMAttributes)(props, attributes);
+  (0, _componentHelper.validateDOMAttributes)(null, submitAttributes);
+  const SubmitElement = (0, _react.useMemo)(() => showInput ? _Input.SubmitButton : _Button.default, [showInput]);
+  if (!showInput) {
+    submitAttributes.innerRef = submitAttributes.ref;
+    submitAttributes.ref = null;
   }
-  formatDate() {
-    const {
-      open_picker_text
-    } = this.context.translation.DatePicker;
-    const {
-      selectedDateTitle
-    } = this.props;
-    return selectedDateTitle ? `${selectedDateTitle}, ${open_picker_text}` : open_picker_text;
-  }
-  render() {
-    const _this$props = this.props,
-      {
-        id,
-        title,
-        submitAttributes,
-        isRange,
-        maskOrder,
-        maskPlaceholder,
-        separatorRexExp,
-        onChange,
-        onFocus,
-        onSubmit,
-        onBlur,
-        selectedDateTitle,
-        showInput,
-        input_element,
-        locale,
-        disabled,
-        skeleton,
-        opened,
-        size,
-        status,
-        status_state,
-        status_props
-      } = _this$props,
-      attributes = _objectWithoutProperties(_this$props, _excluded);
-    const {
-      focusState
-    } = this.state;
-    (0, _componentHelper.validateDOMAttributes)(this.props, attributes);
-    (0, _componentHelper.validateDOMAttributes)(null, submitAttributes);
-    const UsedButton = showInput ? _Input.SubmitButton : _Button.default;
-    if (!showInput) {
-      submitAttributes.innerRef = submitAttributes.ref;
-      submitAttributes.ref = null;
-    }
-    return _react.default.createElement("fieldset", {
-      className: "dnb-date-picker__fieldset",
-      lang: locale === null || locale === void 0 ? void 0 : locale.code
-    }, this.context.props.label && _react.default.createElement("legend", {
-      className: "dnb-sr-only"
-    }, this.context.props.label), _react.default.createElement(_Input.default, _extends({
-      id: `${id}__input`,
-      input_state: disabled ? 'disabled' : focusState,
-      input_element: input_element && typeof input_element !== 'string' ? typeof input_element === 'function' ? input_element(this.props) : input_element : this.renderInputElement,
-      disabled: disabled || skeleton,
+  return _react.default.createElement("fieldset", {
+    className: "dnb-date-picker__fieldset",
+    lang: lang
+  }, label && _react.default.createElement("legend", {
+    className: "dnb-sr-only"
+  }, label), _react.default.createElement(_Input.default, _extends({
+    id: `${id}__input`,
+    input_state: disabled ? 'disabled' : focusState,
+    input_element: input_element && typeof input_element !== 'string' ? typeof input_element === 'function' ? input_element(props) : input_element : renderInputElement,
+    disabled: disabled || skeleton,
+    skeleton: skeleton,
+    size: size,
+    status: !opened ? status : null,
+    status_state: status_state
+  }, status_props, {
+    submit_element: _react.default.createElement(SubmitElement, _extends({
+      id: id,
+      disabled: disabled,
       skeleton: skeleton,
+      className: (0, _classnames.default)(showInput && 'dnb-button--input-button', opened && 'dnb-button--active'),
+      "aria-label": formatDate,
+      title: title,
       size: size,
-      status: !opened ? status : null,
-      status_state: status_state
-    }, status_props, {
-      submit_element: _react.default.createElement(UsedButton, _extends({
-        id: id,
-        disabled: disabled,
-        skeleton: skeleton,
-        className: (0, _classnames.default)(showInput && 'dnb-button--input-button', opened && 'dnb-button--active'),
-        "aria-label": this.formatDate(),
-        title: title,
-        size: size,
-        status: status,
-        status_state: status_state,
-        type: "button",
-        icon: "calendar",
-        variant: "secondary",
-        on_submit: onSubmit,
-        on_click: onSubmit
-      }, submitAttributes, status_props)),
-      lang: locale === null || locale === void 0 ? void 0 : locale.code
-    }, attributes)));
-  }
+      status: status,
+      status_state: status_state,
+      type: "button",
+      icon: "calendar",
+      variant: "secondary",
+      on_submit: onSubmit,
+      on_click: onSubmit
+    }, submitAttributes, status_props)),
+    lang: lang
+  }, attributes)));
 }
-exports.default = DatePickerInput;
-_defineProperty(DatePickerInput, "contextType", _DatePickerContext.default);
-_defineProperty(DatePickerInput, "defaultProps", {
-  id: null,
-  title: null,
-  selectedDateTitle: null,
-  maskOrder: 'dd/mm/yyyy',
-  maskPlaceholder: 'dd/mm/åååå',
-  separatorRexExp: /[-/ ]/g,
-  submitAttributes: null,
-  isRange: null,
-  size: null,
-  status: null,
-  status_state: 'error',
-  status_props: null,
-  input_element: null,
-  disabled: null,
-  locale: null,
-  skeleton: null,
-  opened: false,
-  showInput: null,
-  onChange: null,
-  onSubmit: null,
-  onFocus: null,
-  onBlur: null
-});
-process.env.NODE_ENV !== "production" ? DatePickerInput.propTypes = {
-  id: _propTypes.default.string,
-  title: _propTypes.default.string,
-  selectedDateTitle: _propTypes.default.string,
-  maskOrder: _propTypes.default.string,
-  maskPlaceholder: _propTypes.default.string,
-  separatorRexExp: _propTypes.default.instanceOf(RegExp),
-  submitAttributes: _propTypes.default.object,
-  isRange: _propTypes.default.bool,
-  size: _propTypes.default.oneOf(['default', 'small', 'medium', 'large']),
-  status: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.func, _propTypes.default.node]),
-  status_state: _propTypes.default.string,
-  status_props: _propTypes.default.object,
-  input_element: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
-  locale: _propTypes.default.object,
-  disabled: _propTypes.default.bool,
-  skeleton: _propTypes.default.bool,
-  opened: _propTypes.default.bool,
-  showInput: _propTypes.default.bool,
-  onChange: _propTypes.default.func,
-  onSubmit: _propTypes.default.func,
-  onFocus: _propTypes.default.func,
-  onBlur: _propTypes.default.func
-} : void 0;
-const selectAll = target => {
+var _default = DatePickerInput;
+exports.default = _default;
+function selectAll(target) {
   target.focus();
   target.select();
-};
-const InputElement = _ref5 => {
+}
+function InputElement(_ref5) {
   let {
       className,
       value
@@ -651,9 +633,9 @@ const InputElement = _ref5 => {
     autoCapitalize: "none",
     spellCheck: false,
     autoCorrect: "off",
-    className: (0, _classnames.default)(className, /\d+/.test(value) && 'dnb-date-picker__input--highlight'),
+    className: (0, _classnames.default)(className, /\d+/.test(String(value)) && 'dnb-date-picker__input--highlight'),
     value: value
   }, props));
-};
-const wait = t => new Promise(r => setTimeout(r, t));
+}
+const wait = duration => new Promise(r => setTimeout(r, duration));
 //# sourceMappingURL=DatePickerInput.js.map