@dnb/eufemia 10.54.0 → 10.55.0

package/cjs/components/date-picker/DatePickerCalendar.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 _classnames = _interopRequireDefault(require("classnames"));
 var _format = _interopRequireDefault(require("date-fns/format"));
 var _subMonths = _interopRequireDefault(require("date-fns/subMonths"));
@@ -19,231 +19,122 @@ var _differenceInCalendarDays = _interopRequireDefault(require("date-fns/differe
 var _differenceInMonths = _interopRequireDefault(require("date-fns/differenceInMonths"));
 var _lastDayOfMonth = _interopRequireDefault(require("date-fns/lastDayOfMonth"));
 var _setDate = _interopRequireDefault(require("date-fns/setDate"));
-var _keycode = _interopRequireDefault(require("../../shared/keycode"));
-var _nb = _interopRequireDefault(require("date-fns/locale/nb"));
+var _localize = _interopRequireDefault(require("date-fns/locale/nb/_lib/localize"));
+var _formatLong = _interopRequireDefault(require("date-fns/locale/nb/_lib/formatLong"));
+var _localize2 = _interopRequireDefault(require("date-fns/locale/en-US/_lib/localize"));
+var _formatLong2 = _interopRequireDefault(require("date-fns/locale/en-US/_lib/formatLong"));
+var _formatLong3 = _interopRequireDefault(require("date-fns/locale/en-GB/_lib/formatLong"));
 var _DatePickerCalc = require("./DatePickerCalc");
 var _Button = _interopRequireDefault(require("../button/Button"));
 var _DatePickerContext = _interopRequireDefault(require("./DatePickerContext"));
+var _shared = require("../../shared");
 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 _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 DatePickerCalendar extends _react.default.PureComponent {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "onMouseLeaveHandler", () => {
-      this.context.updateState({
-        hoverDate: null
-      });
-    });
-    _defineProperty(this, "onKeyDownHandler", event => {
-      var _event$target;
-      if (String(event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.nodeName).toLowerCase() === 'td') {
-        try {
-          this._listRef.current.focus({
-            preventScroll: true
-          });
-        } catch (e) {}
-      }
-      const {
-        nr,
-        isRange,
-        onlyMonth,
-        hideNav,
-        onKeyDown
-      } = this.props;
-      if (typeof onKeyDown === 'function') {
-        return onKeyDown(event, this._listRef, nr);
-      }
-      const keyCode = (0, _keycode.default)(event);
-      switch (keyCode) {
-        case 'enter':
-        case 'space':
-        case 'left':
-        case 'right':
-        case 'up':
-        case 'down':
-          event.preventDefault();
-          event.persist();
-          break;
-        default:
-          return;
-      }
-      let type = nr === 0 ? 'start' : 'end';
-      if (!isRange) {
-        type = 'start';
-      }
-      let newDate = this.context[`${type}Date`];
-      if (newDate) {
-        newDate = this.keyNavCalc(newDate, keyCode);
-      } else {
-        newDate = this.context[`${type}Month`] || (isRange && nr === 1 ? (0, _addMonths.default)(new Date(), 1) : new Date());
-      }
-      if (newDate === this.context[`${type}Date`]) {
-        switch (keyCode) {
-          case 'enter':
-          case 'space':
-            this.callOnSelect({
-              event,
-              nr,
-              hidePicker: true
-            });
-            break;
-        }
-      } else {
-        const state = {};
-        const currentMonth = this.context[`${type}Month`];
-        if (currentMonth && !this.context[`${type}Date`] || currentMonth && Math.abs((0, _differenceInMonths.default)(newDate, currentMonth)) > 1) {
-          if (!isRange) {
-            newDate = currentMonth;
-          } else {
-            newDate = nr === 0 ? (0, _setDate.default)(currentMonth, 1) : (0, _lastDayOfMonth.default)(currentMonth);
-          }
-        } else if (currentMonth && !(0, _isSameMonth.default)(this.context[`${type}Date`], currentMonth)) {
-          state[`${type}Month`] = newDate;
-        }
-        newDate = this.findValid(newDate, keyCode);
-        if (this.hasReachedEnd(newDate)) {
-          return;
-        }
-        state[`${type}Date`] = newDate;
-        if (!isRange) {
-          state.endDate = newDate;
-        } else {
-          if (!this.context.startDate) {
-            state.startDate = newDate;
-          }
-          if (!this.context.endDate) {
-            state.endDate = newDate;
-          }
-        }
-        if (onlyMonth || hideNav) {
-          if (!(0, _isSameMonth.default)(state.startDate, this.context.startDate) || !(0, _isSameMonth.default)(state.endDate, this.context.startDate)) {
-            return;
-          }
-        }
-        state.changeMonthViews = true;
-        this.context.updateState(state, () => {
-          this.callOnSelect({
-            event,
-            nr,
-            hidePicker: false
-          });
-          if (this._listRef && this._listRef.current) {
-            this._listRef.current.focus({
-              preventScroll: true
-            });
-          }
-        });
-      }
-    });
-    _defineProperty(this, "hasReachedEnd", date => (0, _DatePickerCalc.isDisabled)(date, this.context.minDate, this.context.maxDate));
-    _defineProperty(this, "buildClassNames", day => (0, _classnames.default)(day.className, day.isStartDate && 'dnb-date-picker__day--start-date', day.isEndDate && 'dnb-date-picker__day--end-date', day.isPreview && 'dnb-date-picker__day--preview', day.isWithinSelection && 'dnb-date-picker__day--within-selection', day.isSelectable && 'dnb-date-picker__day--selectable', day.isInactive && 'dnb-date-picker__day--inactive', day.isDisabled && 'dnb-date-picker__day--disabled', day.isToday && 'dnb-date-picker__day--today'));
-    this._listRef = _react.default.createRef();
-    this._labelRef = _react.default.createRef();
-    this._days = {};
-    this._cache = {};
+const locales = {
+  'nb-NO': {
+    localize: _localize.default,
+    formatLong: _formatLong.default
+  },
+  'en-GB': {
+    localize: _localize2.default,
+    formatLong: _formatLong3.default
+  },
+  'en-US': {
+    localize: _localize2.default,
+    formatLong: _formatLong2.default
   }
-  componentDidMount() {
-    if (!this.props.noAutofocus && this.props.nr === 0) {
-      if (this._listRef.current) {
-        this._listRef.current.focus({
-          preventScroll: true
-        });
+};
+const defaultProps = {
+  prevBtn: true,
+  nextBtn: true,
+  titleFormat: 'MMMM yyyy',
+  dayOfWeekFormat: 'EEEEEE',
+  firstDayOfWeek: 'monday',
+  hideNav: false,
+  hideDays: false,
+  onlyMonth: false,
+  hideNextMonthWeek: false,
+  noAutoFocus: false,
+  rtl: false,
+  resetDate: true
+};
+const arrowKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+const keysToHandle = ['Enter', 'Space', ...arrowKeys];
+function DatePickerCalendar(restOfProps) {
+  const props = _objectSpread(_objectSpread({}, defaultProps), restOfProps);
+  const {
+    updateDates,
+    forceViewMonthChange,
+    startDate,
+    endDate,
+    hoverDate,
+    maxDate,
+    minDate,
+    startMonth,
+    endMonth,
+    translation: {
+      DatePicker: {
+        selected_month
       }
+    },
+    props: {
+      on_days_render
     }
-  }
-  callOnSelect(args) {
-    this.props.onSelect && this.props.onSelect(args);
-  }
-  keyNavCalc(date, keyCode) {
-    switch (keyCode) {
-      case 'left':
-        date = (0, _addDays.default)(date, -1);
-        break;
-      case 'right':
-        date = (0, _addDays.default)(date, 1);
-        break;
-      case 'up':
-        date = (0, _addWeeks.default)(date, -1);
-        break;
-      case 'down':
-        date = (0, _addWeeks.default)(date, 1);
-        break;
-    }
-    return date;
-  }
-  findValid(date, keyCode) {
-    if (this.context.props.on_days_render) {
-      const month = (0, _format.default)(date, 'yyyy-MM');
-      if (!this._days) {
-        return date;
-      }
-      if (!this._days[month]) {
-        this.getDays(date);
-      }
-      if (Array.isArray(this._days[month])) {
-        const foundDate = this._days[month].find(cur => (0, _isSameDay.default)(cur.date, date));
-        if (foundDate && foundDate.date && (foundDate.isDisabled || foundDate.isSelectable === false || foundDate.isInactive)) {
-          const nextDate = this.keyNavCalc(foundDate.date, keyCode);
-          foundDate.date = this.findValid(nextDate, keyCode);
-        }
-        if (foundDate && foundDate.date) {
-          return foundDate.date;
-        }
+  } = (0, _react.useContext)(_DatePickerContext.default);
+  const {
+    id,
+    nr,
+    rtl,
+    month,
+    isRange,
+    titleFormat,
+    firstDayOfWeek,
+    dayOfWeekFormat,
+    hideNav,
+    locale: localeCode,
+    hideDays,
+    onPrev,
+    onNext,
+    onSelect,
+    onHover,
+    onKeyDown,
+    resetDate,
+    prevBtn,
+    nextBtn,
+    noAutoFocus,
+    hideNextMonthWeek,
+    onlyMonth
+  } = props;
+  const listRef = (0, _react.useRef)();
+  const labelRef = (0, _react.useRef)();
+  const days = (0, _react.useRef)({});
+  const cache = (0, _react.useRef)({});
+  (0, _react.useEffect)(() => {
+    if (!noAutoFocus && nr === 0) {
+      if (listRef.current) {
+        listRef.current.focus({
+          preventScroll: true
+        });
       }
     }
-    return date;
-  }
-  getCacheKey() {
-    const {
-      nr,
-      month,
-      firstDayOfWeek,
-      onlyMonth,
-      hideNextMonthWeek
-    } = this.props;
-    const {
-      startDate,
-      endDate,
-      hoverDate,
-      maxDate,
-      minDate
-    } = this.context;
-    return [nr, month, firstDayOfWeek, onlyMonth, hideNextMonthWeek, startDate, endDate, hoverDate, maxDate, minDate].join('|');
-  }
-  getMemorizedDays(month) {
-    const key = this.getCacheKey();
-    if (this._cache[key]) {
-      return this._cache[key];
-    } else {
-      let count = 0;
-      return this._cache[key] = Object.values(this.getDays(month).reduce((acc, cur, i) => {
-        acc[count] = acc[count] || [];
-        acc[count].push(cur);
-        if (i % 7 === 6) {
-          count++;
-        }
-        return acc;
-      }, {}));
-    }
-  }
-  getDays(month) {
-    const {
-      nr,
-      firstDayOfWeek,
-      onlyMonth,
-      hideNextMonthWeek
-    } = this.props;
-    const {
-      startDate,
-      endDate,
-      hoverDate,
-      maxDate,
-      minDate
-    } = this.context;
-    let days = (0, _DatePickerCalc.getCalendar)(month || new Date(), (0, _DatePickerCalc.dayOffset)(firstDayOfWeek), {
+  }, [noAutoFocus, nr]);
+  const onMouseLeaveHandler = (0, _react.useCallback)(() => {
+    updateDates({
+      hoverDate: null
+    });
+  }, [updateDates]);
+  const callOnSelect = (0, _react.useCallback)(event => {
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(event);
+  }, [onSelect]);
+  const getDays = (0, _react.useCallback)(month => {
+    let daysFromCalendar = (0, _DatePickerCalc.getCalendar)(month || new Date(), (0, _DatePickerCalc.dayOffset)(firstDayOfWeek), {
       onlyMonth,
       hideNextMonthWeek
     }).map(date => (0, _DatePickerCalc.makeDayObject)(date, {
@@ -254,333 +145,299 @@ class DatePickerCalendar extends _react.default.PureComponent {
       maxDate,
       month
     }));
-    if (this.context.props.on_days_render) {
-      const changedDays = this.context.props.on_days_render(days, nr);
+    if (on_days_render) {
+      const changedDays = on_days_render(daysFromCalendar, nr);
       if (Array.isArray(changedDays)) {
-        days = changedDays;
+        daysFromCalendar = changedDays;
       }
     }
-    this._days[(0, _format.default)(month, 'yyyy-MM')] = days;
-    return days;
-  }
-  render() {
-    const {
-      id,
-      nr,
-      rtl,
-      month,
-      isRange,
-      titleFormat,
-      locale,
-      firstDayOfWeek,
-      dayOfWeekFormat,
-      hideNav,
-      hideDays,
-      onPrev,
-      onNext,
-      resetDate,
-      onHover,
-      prevBtn,
-      nextBtn
-    } = this.props;
-    const {
+    days.current[(0, _format.default)(month, 'yyyy-MM')] = daysFromCalendar;
+    return daysFromCalendar;
+  }, [endDate, firstDayOfWeek, hideNextMonthWeek, hoverDate, maxDate, minDate, nr, on_days_render, onlyMonth, startDate]);
+  const keyNavCalc = (0, _react.useCallback)((date, keyCode) => {
+    if (!arrowKeys.includes(keyCode)) {
+      return date;
+    }
+    const dateHandler = /(ArrowLeft|ArrowRight)/g.test(keyCode) ? _addDays.default : _addWeeks.default;
+    const shiftAmount = /(ArrowLeft|ArrowUp)/g.test(keyCode) ? -1 : 1;
+    return dateHandler(date, shiftAmount);
+  }, []);
+  const findValid = (0, _react.useCallback)((date, keyCode) => {
+    if (!on_days_render) {
+      return date;
+    }
+    if (!days.current) {
+      return date;
+    }
+    const month = (0, _format.default)(date, 'yyyy-MM');
+    if (!days.current[month]) {
+      getDays(date);
+    }
+    if (Array.isArray(days.current[month])) {
+      const foundDate = days.current[month].find(cur => (0, _isSameDay.default)(cur.date, date));
+      if (foundDate !== null && foundDate !== void 0 && foundDate.date && (foundDate.isDisabled || foundDate.isSelectable === false || foundDate.isInactive)) {
+        const nextDate = keyNavCalc(foundDate.date, keyCode);
+        foundDate.date = findValid(nextDate, keyCode);
+      }
+      if (foundDate !== null && foundDate !== void 0 && foundDate.date) {
+        return foundDate.date;
+      }
+    }
+    return date;
+  }, [on_days_render, getDays, keyNavCalc]);
+  const hasReachedEnd = (0, _react.useCallback)(date => (0, _DatePickerCalc.isDisabled)(date, minDate, maxDate), [minDate, maxDate]);
+  const onKeyDownHandler = (0, _react.useCallback)(event => {
+    const pressedKey = event.code;
+    if (typeof onKeyDown === 'function') {
+      return onKeyDown(event, listRef, nr);
+    }
+    if (!keysToHandle.includes(pressedKey)) {
+      return;
+    }
+    event.preventDefault();
+    event.persist();
+    const currentDates = {
       startDate,
       endDate,
-      hoverDate,
-      maxDate,
-      minDate,
-      translation: {
-        DatePicker: {
-          selected_month
-        }
+      startMonth,
+      endMonth
+    };
+    const dateType = !isRange || nr === 0 ? 'start' : 'end';
+    const currentDate = currentDates[`${dateType}Date`];
+    let newDate = currentDate ? keyNavCalc(currentDate, pressedKey) : currentDates[`${dateType}Month`] || (isRange && nr === 1 ? (0, _addMonths.default)(new Date(), 1) : new Date());
+    if (newDate === currentDate && (pressedKey === 'Enter' || pressedKey === 'Space')) {
+      return callOnSelect({
+        event,
+        nr,
+        hidePicker: true
+      });
+    }
+    const dates = {};
+    const currentMonth = currentDates[`${dateType}Month`];
+    if (currentMonth && !currentDate || currentMonth && Math.abs((0, _differenceInMonths.default)(newDate, currentMonth)) > 1) {
+      newDate = !isRange ? currentMonth : nr === 0 ? (0, _setDate.default)(currentMonth, 1) : (0, _lastDayOfMonth.default)(currentMonth);
+    } else if (currentMonth && !(0, _isSameMonth.default)(currentDate, currentMonth)) {
+      dates[`${dateType}Month`] = newDate;
+    }
+    newDate = findValid(newDate, pressedKey);
+    if (hasReachedEnd(newDate)) {
+      return;
+    }
+    dates[`${dateType}Date`] = newDate;
+    if (!isRange) {
+      dates.endDate = newDate;
+    } else {
+      if (!startDate) {
+        dates.startDate = newDate;
       }
-    } = this.context;
-    const weekDays = this.getMemorizedDays(month);
-    return _react.default.createElement("div", {
-      className: 'dnb-date-picker__calendar' + (rtl ? " rtl" : ""),
-      lang: locale === null || locale === void 0 ? void 0 : locale.code
-    }, !hideNav && _react.default.createElement("div", {
-      className: "dnb-date-picker__header"
-    }, _react.default.createElement("div", {
-      className: "dnb-date-picker__header__nav"
-    }, _react.default.createElement(PrevButton, {
-      nr: nr,
-      minDate: minDate,
-      month: month,
-      locale: locale,
-      context: this.context,
-      prevBtn: prevBtn,
-      onPrev: onPrev
-    })), _react.default.createElement("label", {
-      id: `${id}--title`,
-      className: "dnb-date-picker__header__title dnb-no-focus",
-      title: selected_month.replace(/%s/, (0, _format.default)(month, titleFormat, {
-        locale
-      })),
-      tabIndex: "-1",
-      ref: this._labelRef
-    }, (0, _format.default)(month, titleFormat, {
+      if (!endDate) {
+        dates.endDate = newDate;
+      }
+    }
+    if (onlyMonth || hideNav) {
+      if (!(0, _isSameMonth.default)(dates.startDate, startDate) || !(0, _isSameMonth.default)(dates.endDate, startDate)) {
+        return;
+      }
+    }
+    updateDates(dates, () => {
+      callOnSelect(_objectSpread({
+        event,
+        nr,
+        hidePicker: false
+      }, dates));
+    });
+    forceViewMonthChange();
+    if (listRef && listRef.current) {
+      listRef.current.focus({
+        preventScroll: true
+      });
+    }
+  }, [callOnSelect, findValid, hasReachedEnd, onKeyDown, startDate, endDate, updateDates, hideNav, isRange, keyNavCalc, nr, onlyMonth, endMonth, startMonth, forceViewMonthChange]);
+  const cacheKey = (0, _react.useMemo)(() => {
+    return [nr, month, firstDayOfWeek, onlyMonth, hideNextMonthWeek, startDate, endDate, hoverDate, maxDate, minDate].join('|');
+  }, [nr, month, firstDayOfWeek, onlyMonth, hideNextMonthWeek, startDate, endDate, hoverDate, maxDate, minDate]);
+  const weekDays = (0, _react.useMemo)(() => {
+    if (cache.current[cacheKey]) {
+      return cache.current[cacheKey];
+    }
+    let count = 0;
+    return cache.current[cacheKey] = Object.values(getDays(month).reduce((acc, cur, i) => {
+      acc[count] = acc[count] || [];
+      acc[count].push(cur);
+      if (i % 7 === 6) {
+        count++;
+      }
+      return acc;
+    }, {}));
+  }, [cacheKey, getDays, month]);
+  const locale = (0, _react.useMemo)(() => _objectSpread({}, locales[localeCode]), [localeCode]);
+  return _react.default.createElement("div", {
+    className: 'dnb-date-picker__calendar' + (rtl ? " rtl" : ""),
+    lang: localeCode
+  }, !hideNav && _react.default.createElement("div", {
+    className: "dnb-date-picker__header"
+  }, _react.default.createElement("div", {
+    className: "dnb-date-picker__header__nav"
+  }, _react.default.createElement(CalendarButton, {
+    type: "prev",
+    nr: nr,
+    date: minDate,
+    month: month,
+    locale: locale,
+    showButton: prevBtn,
+    onClick: onPrev
+  })), _react.default.createElement("label", {
+    id: `${id}--title`,
+    className: "dnb-date-picker__header__title dnb-no-focus",
+    title: selected_month.replace(/%s/, (0, _format.default)(month, titleFormat, {
+      locale
+    })),
+    tabIndex: -1,
+    ref: labelRef
+  }, (0, _format.default)(month, titleFormat, {
+    locale
+  })), _react.default.createElement("div", {
+    className: "dnb-date-picker__header__nav"
+  }, _react.default.createElement(CalendarButton, {
+    type: "next",
+    nr: nr,
+    date: maxDate,
+    month: month,
+    locale: locale,
+    showButton: nextBtn,
+    onClick: onNext
+  }))), _react.default.createElement("table", {
+    role: "grid",
+    className: "dnb-no-focus",
+    tabIndex: 0,
+    "aria-labelledby": `${id}--title`,
+    onKeyDown: onKeyDownHandler,
+    onMouseLeave: onMouseLeaveHandler,
+    ref: listRef
+  }, !hideDays && _react.default.createElement("thead", {
+    "aria-hidden": true
+  }, _react.default.createElement("tr", {
+    role: "row",
+    className: "dnb-date-picker__labels"
+  }, (0, _DatePickerCalc.getWeek)((0, _DatePickerCalc.dayOffset)(firstDayOfWeek)).map((day, i) => _react.default.createElement("th", {
+    key: i,
+    role: "columnheader",
+    scope: "col",
+    className: `dnb-date-picker__labels__day dnb-date-picker__labels__day--${(0, _format.default)(day, 'i', {
+      locale
+    })}`,
+    "aria-label": (0, _format.default)(day, 'EEEE', {
       locale
-    })), _react.default.createElement("div", {
-      className: "dnb-date-picker__header__nav"
-    }, _react.default.createElement(NextButton, {
-      nr: nr,
-      maxDate: maxDate,
-      month: month,
-      locale: locale,
-      context: this.context,
-      nextBtn: nextBtn,
-      onNext: onNext
-    }))), _react.default.createElement("table", {
-      role: "grid",
-      className: "dnb-no-focus",
-      tabIndex: "0",
-      "aria-labelledby": `${id}--title`,
-      onKeyDown: this.onKeyDownHandler,
-      onMouseLeave: this.onMouseLeaveHandler,
-      ref: this._listRef
-    }, !hideDays && _react.default.createElement("thead", {
-      "aria-hidden": true
-    }, _react.default.createElement("tr", {
+    })
+  }, (0, _format.default)(day, dayOfWeekFormat, {
+    locale
+  }))))), _react.default.createElement("tbody", null, weekDays.map((week, i) => {
+    return _react.default.createElement("tr", {
+      key: 'week' + i,
       role: "row",
-      className: "dnb-date-picker__labels"
-    }, (0, _DatePickerCalc.getWeek)((0, _DatePickerCalc.dayOffset)(firstDayOfWeek)).map((day, i) => _react.default.createElement("th", {
-      key: i,
-      role: "columnheader",
-      scope: "col",
-      className: `dnb-date-picker__labels__day dnb-date-picker__labels__day--${(0, _format.default)(day, 'i', {
-        locale
-      })}`,
-      "aria-label": (0, _format.default)(day, 'EEEE', {
+      className: "dnb-date-picker__days"
+    }, week.map((day, i) => {
+      const title = (0, _format.default)(day.date, 'PPPP', {
         locale
-      })
-    }, (0, _format.default)(day, dayOfWeekFormat, {
-      locale
-    }))))), _react.default.createElement("tbody", null, weekDays.map((week, i) => {
-      return _react.default.createElement("tr", {
-        key: 'week' + i,
-        role: "row",
-        className: "dnb-date-picker__days"
-      }, week.map((day, i) => {
-        const title = (0, _format.default)(day.date, 'PPPP', {
+      });
+      const handleAsDisabled = day.isLastMonth || day.isNextMonth || day.isDisabled || day.isInactive;
+      const dateType = day.isStartDate ? 'start' : day.isEndDate ? 'end' : undefined;
+      const isSelectedDate = nr === 0 ? day.isStartDate : day.isEndDate;
+      const paramsCell = _objectSpread(_objectSpread({
+        tabIndex: -1
+      }, dateType && {
+        id: `${id}--button-${dateType}`
+      }), isSelectedDate && {
+        ['aria-selected']: true
+      });
+      const paramsButton = _objectSpread({}, isSelectedDate && {
+        ['aria-current']: 'date'
+      });
+      return _react.default.createElement("td", _extends({
+        key: 'day' + i,
+        role: "gridcell",
+        className: (0, _classnames.default)("dnb-date-picker__day dnb-no-focus", buildDayClassNames(day))
+      }, paramsCell), _react.default.createElement(_Button.default, _extends({
+        size: "medium",
+        variant: "secondary",
+        text: (0, _format.default)(day.date, 'd', {
           locale
-        });
-        const handleAsDisabled = day.isLastMonth || day.isNextMonth || day.isDisabled || day.isInactive;
-        const paramsCell = {};
-        paramsCell.tabIndex = '-1';
-        if (day.isStartDate) {
-          paramsCell.id = id + '--button-start';
-        } else if (day.isEndDate) {
-          paramsCell.id = id + '--button-end';
-        }
-        const paramsButton = {};
-        if (nr === 0 ? day.isStartDate : day.isEndDate) {
-          paramsButton['aria-current'] = 'date';
-          paramsCell['aria-selected'] = true;
-        }
-        return _react.default.createElement("td", _extends({
-          key: 'day' + i,
-          role: "gridcell",
-          className: (0, _classnames.default)("dnb-date-picker__day dnb-no-focus", this.buildClassNames(day)),
-          onFocus: this.onKeyDownHandler
-        }, paramsCell), _react.default.createElement(_Button.default, _extends({
-          size: "medium",
-          variant: "secondary",
-          text: (0, _format.default)(day.date, 'd', {
-            locale
-          }),
-          bounding: true,
-          disabled: handleAsDisabled,
-          tabIndex: handleAsDisabled ? '0' : '-1',
-          "aria-disabled": handleAsDisabled,
-          "aria-label": title
-        }, paramsButton, {
-          onClick: handleAsDisabled ? undefined : _ref => {
-            let {
-              event
-            } = _ref;
-            return onSelectRange({
-              day,
-              isRange,
-              startDate,
-              endDate,
-              resetDate,
-              event,
-              onSelect: state => this.context.updateState(state, () => this.callOnSelect({
+        }),
+        bounding: true,
+        disabled: handleAsDisabled,
+        tabIndex: handleAsDisabled ? 0 : -1,
+        "aria-disabled": handleAsDisabled,
+        "aria-label": title
+      }, paramsButton, {
+        on_click: handleAsDisabled ? undefined : _ref => {
+          let {
+            event
+          } = _ref;
+          return onSelectRange({
+            day,
+            isRange,
+            startDate,
+            endDate,
+            resetDate,
+            event,
+            onSelect: state => {
+              updateDates(state, dates => callOnSelect(_objectSpread(_objectSpread({}, dates), {}, {
                 event,
                 nr,
                 hidePicker: !isRange
-              }))
-            });
-          },
-          onMouseOver: handleAsDisabled ? undefined : () => onHoverDay({
-            day,
-            hoverDate,
-            onHover
-          }),
-          onFocus: handleAsDisabled ? undefined : () => onHoverDay({
-            day,
-            hoverDate,
-            onHover
-          })
-        })));
-      }));
-    }))));
-  }
+              })));
+            }
+          });
+        },
+        onMouseOver: handleAsDisabled ? undefined : () => onHoverDay({
+          day,
+          hoverDate,
+          onHover
+        }),
+        onFocus: handleAsDisabled ? undefined : () => onHoverDay({
+          day,
+          hoverDate,
+          onHover
+        })
+      })));
+    }));
+  }))));
 }
-exports.default = DatePickerCalendar;
-_defineProperty(DatePickerCalendar, "contextType", _DatePickerContext.default);
-_defineProperty(DatePickerCalendar, "defaultProps", {
-  id: null,
-  nr: null,
-  month: null,
-  prevBtn: true,
-  nextBtn: true,
-  titleFormat: 'MMMM yyyy',
-  dayOfWeekFormat: 'EEEEEE',
-  firstDayOfWeek: 'monday',
-  hideNav: false,
-  hideDays: false,
-  onlyMonth: false,
-  hideNextMonthWeek: false,
-  noAutofocus: false,
-  locale: _nb.default,
-  rtl: false,
-  onHover: null,
-  onSelect: null,
-  onPrev: null,
-  onNext: null,
-  isRange: null,
-  resetDate: true,
-  onKeyDown: null
-});
-process.env.NODE_ENV !== "production" ? DatePickerCalendar.propTypes = {
-  id: _propTypes.default.string,
-  nr: _propTypes.default.number,
-  month: _propTypes.default.instanceOf(Date),
-  prevBtn: _propTypes.default.bool,
-  nextBtn: _propTypes.default.bool,
-  titleFormat: _propTypes.default.string,
-  dayOfWeekFormat: _propTypes.default.string,
-  firstDayOfWeek: _propTypes.default.string,
-  hideNav: _propTypes.default.bool,
-  hideDays: _propTypes.default.bool,
-  onlyMonth: _propTypes.default.bool,
-  hideNextMonthWeek: _propTypes.default.bool,
-  noAutofocus: _propTypes.default.bool,
-  onHover: _propTypes.default.func,
-  onSelect: _propTypes.default.func,
-  onPrev: _propTypes.default.func,
-  onNext: _propTypes.default.func,
-  locale: _propTypes.default.object,
-  rtl: _propTypes.default.bool,
-  isRange: _propTypes.default.bool,
-  resetDate: _propTypes.default.bool,
-  onKeyDown: _propTypes.default.func
-} : void 0;
-const PrevButton = _ref2 => {
+var _default = DatePickerCalendar;
+exports.default = _default;
+function CalendarButton(_ref2) {
   let {
+    type,
     nr,
-    minDate,
+    date,
     month,
     locale,
-    context,
-    prevBtn,
-    onPrev,
+    showButton,
+    onClick,
     onKeyDown
   } = _ref2;
-  if (!prevBtn) {
+  const tr = (0, _shared.useTranslation)().DatePicker;
+  if (!showButton) {
     return _react.default.createElement(_react.default.Fragment, null);
   }
-  const disabled = minDate && (0, _isSameMonth.default)(month, minDate);
-  const onClick = () => onPrev && !disabled && onPrev({
-    nr
-  });
-  const {
-    translation: {
-      DatePicker: {
-        prev_month
-      }
-    }
-  } = context;
-  const title = prev_month.replace(/%s/, (0, _format.default)((0, _subMonths.default)(month, 1), 'MMMM yyyy', {
+  const disabled = date && (0, _isSameMonth.default)(month, date);
+  const title = tr[`${type}_month`].replace(/%s/, (0, _format.default)((0, _subMonths.default)(month, 1), 'MMMM yyyy', {
     locale
   }));
+  const icon = type === 'prev' ? 'chevron_left' : 'chevron_right';
   return _react.default.createElement(_Button.default, {
-    className: 'dnb-date-picker__prev' + (disabled ? " disabled" : ""),
-    icon: "chevron_left",
+    className: `dnb-date-picker__${type}` + (disabled ? " disabled" : ""),
+    icon: icon,
     size: "small",
     "aria-label": title,
-    onClick: onClick,
-    onKeyDown: onKeyDown
-  });
-};
-process.env.NODE_ENV !== "production" ? PrevButton.propTypes = {
-  nr: _propTypes.default.number.isRequired,
-  minDate: _propTypes.default.instanceOf(Date),
-  month: _propTypes.default.object.isRequired,
-  locale: _propTypes.default.object.isRequired,
-  context: _propTypes.default.object.isRequired,
-  prevBtn: _propTypes.default.bool.isRequired,
-  onPrev: _propTypes.default.func.isRequired,
-  onKeyDown: _propTypes.default.func
-} : void 0;
-PrevButton.defaultProps = {
-  minDate: null,
-  onKeyDown: null
-};
-const NextButton = _ref3 => {
-  let {
-    nr,
-    maxDate,
-    month,
-    locale,
-    context,
-    nextBtn,
-    onNext,
-    onKeyDown
-  } = _ref3;
-  if (!nextBtn) {
-    return _react.default.createElement(_react.default.Fragment, null);
-  }
-  const disabled = maxDate && (0, _isSameMonth.default)(month, maxDate);
-  const onClick = () => onNext && !disabled && onNext({
-    nr
-  });
-  const {
-    translation: {
-      DatePicker: {
-        next_month
-      }
-    }
-  } = context;
-  const title = next_month.replace(/%s/, (0, _format.default)((0, _addMonths.default)(month, 1), 'MMMM yyyy', {
-    locale
-  }));
-  return nextBtn && _react.default.createElement(_Button.default, {
-    className: 'dnb-date-picker__next' + (disabled ? " disabled" : ""),
-    icon: "chevron_right",
-    size: "small",
-    "aria-label": title,
-    onClick: onClick,
+    onClick: () => onClick && !disabled && onClick({
+      nr,
+      type
+    }),
     onKeyDown: onKeyDown
   });
-};
-process.env.NODE_ENV !== "production" ? NextButton.propTypes = {
-  nr: _propTypes.default.number.isRequired,
-  maxDate: _propTypes.default.instanceOf(Date),
-  month: _propTypes.default.object.isRequired,
-  locale: _propTypes.default.object.isRequired,
-  context: _propTypes.default.object.isRequired,
-  nextBtn: _propTypes.default.bool.isRequired,
-  onNext: _propTypes.default.func.isRequired,
-  onKeyDown: _propTypes.default.func
-} : void 0;
-NextButton.defaultProps = {
-  maxDate: null,
-  onKeyDown: null
-};
-const onSelectRange = _ref4 => {
+}
+function onSelectRange(_ref3) {
   let {
     day,
     isRange,
@@ -589,43 +446,42 @@ const onSelectRange = _ref4 => {
     onSelect,
     resetDate,
     event
-  } = _ref4;
+  } = _ref3;
   event.persist();
   if (!isRange) {
-    onSelect({
+    return onSelect({
       startDate: (0, _startOfDay.default)(day.date),
       endDate: (0, _startOfDay.default)(day.date),
       event
     });
-  } else if (!startDate || resetDate && startDate && endDate) {
-    onSelect({
+  }
+  if (!startDate || resetDate && startDate && endDate) {
+    return onSelect({
       startDate: (0, _startOfDay.default)(day.date),
       endDate: undefined,
       event
     });
-  } else {
-    const hasEndDate = endDate;
-    const daysToStartDate = Math.abs((0, _differenceInCalendarDays.default)(startDate, day.date));
-    const daysToEndDate = Math.abs((0, _differenceInCalendarDays.default)(endDate, day.date));
-    let range = (0, _DatePickerCalc.toRange)(startDate, day.date);
-    if (hasEndDate && !resetDate && daysToStartDate < daysToEndDate) {
-      range = (0, _DatePickerCalc.toRange)(endDate, day.date);
-    }
-    onSelect({
-      startDate: (0, _startOfDay.default)(range.startDate),
-      endDate: (0, _startOfDay.default)(range.endDate),
-      event
-    });
   }
-};
-const onHoverDay = _ref5 => {
+  const daysToStartDate = Math.abs((0, _differenceInCalendarDays.default)(startDate, day.date));
+  const daysToEndDate = Math.abs((0, _differenceInCalendarDays.default)(endDate, day.date));
+  const range = (0, _DatePickerCalc.toRange)(endDate && !resetDate && daysToStartDate < daysToEndDate ? endDate : startDate, day.date);
+  return onSelect({
+    startDate: (0, _startOfDay.default)(range.startDate),
+    endDate: (0, _startOfDay.default)(range.endDate),
+    event
+  });
+}
+function onHoverDay(_ref4) {
   let {
     day,
     hoverDate,
     onHover
-  } = _ref5;
-  if (!(0, _isSameDay.default)(day.date, hoverDate)) {
-    onHover && onHover(day.date);
+  } = _ref4;
+  if (!(0, _isSameDay.default)(day.date, hoverDate) && onHover) {
+    onHover(day.date);
   }
-};
+}
+function buildDayClassNames(day) {
+  return (0, _classnames.default)(day.className, day.isStartDate && 'dnb-date-picker__day--start-date', day.isEndDate && 'dnb-date-picker__day--end-date', day.isPreview && 'dnb-date-picker__day--preview', day.isWithinSelection && 'dnb-date-picker__day--within-selection', day.isSelectable && 'dnb-date-picker__day--selectable', day.isInactive && 'dnb-date-picker__day--inactive', day.isDisabled && 'dnb-date-picker__day--disabled', day.isToday && 'dnb-date-picker__day--today');
+}
 //# sourceMappingURL=DatePickerCalendar.js.map