@dnb/eufemia 10.54.0 → 10.55.0

package/es/components/date-picker/DatePickerCalendar.js

@@ -1,7 +1,10 @@
+"use client";
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React from 'react';
-import PropTypes from 'prop-types';
+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; }
+import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import classnames from 'classnames';
 import format from 'date-fns/format';
 import subMonths from 'date-fns/subMonths';
@@ -15,226 +18,113 @@ import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
 import differenceInMonths from 'date-fns/differenceInMonths';
 import lastDayOfMonth from 'date-fns/lastDayOfMonth';
 import setDate from 'date-fns/setDate';
-import keycode from '../../shared/keycode';
-import nbLocale from 'date-fns/locale/nb';
+import nbLocalize from 'date-fns/locale/nb/_lib/localize';
+import nbFormatLong from 'date-fns/locale/nb/_lib/formatLong';
+import enLocalize from 'date-fns/locale/en-US/_lib/localize';
+import enFormatLong from 'date-fns/locale/en-US/_lib/formatLong';
+import gbFormatLong from 'date-fns/locale/en-GB/_lib/formatLong';
 import { isDisabled, makeDayObject, toRange, getWeek, dayOffset, getCalendar } from './DatePickerCalc';
 import Button from '../button/Button';
 import DatePickerContext from './DatePickerContext';
-export default class DatePickerCalendar extends React.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 = keycode(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 ? addMonths(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(differenceInMonths(newDate, currentMonth)) > 1) {
-          if (!isRange) {
-            newDate = currentMonth;
-          } else {
-            newDate = nr === 0 ? setDate(currentMonth, 1) : lastDayOfMonth(currentMonth);
-          }
-        } else if (currentMonth && !isSameMonth(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 (!isSameMonth(state.startDate, this.context.startDate) || !isSameMonth(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 => isDisabled(date, this.context.minDate, this.context.maxDate));
-    _defineProperty(this, "buildClassNames", day => classnames(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.createRef();
-    this._labelRef = React.createRef();
-    this._days = {};
-    this._cache = {};
+import { useTranslation } from '../../shared';
+const locales = {
+  'nb-NO': {
+    localize: nbLocalize,
+    formatLong: nbFormatLong
+  },
+  'en-GB': {
+    localize: enLocalize,
+    formatLong: gbFormatLong
+  },
+  'en-US': {
+    localize: enLocalize,
+    formatLong: enFormatLong
   }
-  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 = addDays(date, -1);
-        break;
-      case 'right':
-        date = addDays(date, 1);
-        break;
-      case 'up':
-        date = addWeeks(date, -1);
-        break;
-      case 'down':
-        date = addWeeks(date, 1);
-        break;
-    }
-    return date;
-  }
-  findValid(date, keyCode) {
-    if (this.context.props.on_days_render) {
-      const month = format(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 => isSameDay(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;
-        }
+  } = useContext(DatePickerContext);
+  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 = useRef();
+  const labelRef = useRef();
+  const days = useRef({});
+  const cache = useRef({});
+  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 = getCalendar(month || new Date(), dayOffset(firstDayOfWeek), {
+  }, [noAutoFocus, nr]);
+  const onMouseLeaveHandler = useCallback(() => {
+    updateDates({
+      hoverDate: null
+    });
+  }, [updateDates]);
+  const callOnSelect = useCallback(event => {
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(event);
+  }, [onSelect]);
+  const getDays = useCallback(month => {
+    let daysFromCalendar = getCalendar(month || new Date(), dayOffset(firstDayOfWeek), {
       onlyMonth,
       hideNextMonthWeek
     }).map(date => makeDayObject(date, {
@@ -245,327 +135,294 @@ export default class DatePickerCalendar extends React.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[format(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[format(month, 'yyyy-MM')] = daysFromCalendar;
+    return daysFromCalendar;
+  }, [endDate, firstDayOfWeek, hideNextMonthWeek, hoverDate, maxDate, minDate, nr, on_days_render, onlyMonth, startDate]);
+  const keyNavCalc = useCallback((date, keyCode) => {
+    if (!arrowKeys.includes(keyCode)) {
+      return date;
+    }
+    const dateHandler = /(ArrowLeft|ArrowRight)/g.test(keyCode) ? addDays : addWeeks;
+    const shiftAmount = /(ArrowLeft|ArrowUp)/g.test(keyCode) ? -1 : 1;
+    return dateHandler(date, shiftAmount);
+  }, []);
+  const findValid = useCallback((date, keyCode) => {
+    if (!on_days_render) {
+      return date;
+    }
+    if (!days.current) {
+      return date;
+    }
+    const month = format(date, 'yyyy-MM');
+    if (!days.current[month]) {
+      getDays(date);
+    }
+    if (Array.isArray(days.current[month])) {
+      const foundDate = days.current[month].find(cur => isSameDay(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 = useCallback(date => isDisabled(date, minDate, maxDate), [minDate, maxDate]);
+  const onKeyDownHandler = 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 ? addMonths(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(differenceInMonths(newDate, currentMonth)) > 1) {
+      newDate = !isRange ? currentMonth : nr === 0 ? setDate(currentMonth, 1) : lastDayOfMonth(currentMonth);
+    } else if (currentMonth && !isSameMonth(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.createElement("div", {
-      className: 'dnb-date-picker__calendar' + (rtl ? " rtl" : ""),
-      lang: locale === null || locale === void 0 ? void 0 : locale.code
-    }, !hideNav && React.createElement("div", {
-      className: "dnb-date-picker__header"
-    }, React.createElement("div", {
-      className: "dnb-date-picker__header__nav"
-    }, React.createElement(PrevButton, {
-      nr: nr,
-      minDate: minDate,
-      month: month,
-      locale: locale,
-      context: this.context,
-      prevBtn: prevBtn,
-      onPrev: onPrev
-    })), React.createElement("label", {
-      id: `${id}--title`,
-      className: "dnb-date-picker__header__title dnb-no-focus",
-      title: selected_month.replace(/%s/, format(month, titleFormat, {
-        locale
-      })),
-      tabIndex: "-1",
-      ref: this._labelRef
-    }, format(month, titleFormat, {
+      if (!endDate) {
+        dates.endDate = newDate;
+      }
+    }
+    if (onlyMonth || hideNav) {
+      if (!isSameMonth(dates.startDate, startDate) || !isSameMonth(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 = 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 = 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 = useMemo(() => _objectSpread({}, locales[localeCode]), [localeCode]);
+  return React.createElement("div", {
+    className: 'dnb-date-picker__calendar' + (rtl ? " rtl" : ""),
+    lang: localeCode
+  }, !hideNav && React.createElement("div", {
+    className: "dnb-date-picker__header"
+  }, React.createElement("div", {
+    className: "dnb-date-picker__header__nav"
+  }, React.createElement(CalendarButton, {
+    type: "prev",
+    nr: nr,
+    date: minDate,
+    month: month,
+    locale: locale,
+    showButton: prevBtn,
+    onClick: onPrev
+  })), React.createElement("label", {
+    id: `${id}--title`,
+    className: "dnb-date-picker__header__title dnb-no-focus",
+    title: selected_month.replace(/%s/, format(month, titleFormat, {
+      locale
+    })),
+    tabIndex: -1,
+    ref: labelRef
+  }, format(month, titleFormat, {
+    locale
+  })), React.createElement("div", {
+    className: "dnb-date-picker__header__nav"
+  }, React.createElement(CalendarButton, {
+    type: "next",
+    nr: nr,
+    date: maxDate,
+    month: month,
+    locale: locale,
+    showButton: nextBtn,
+    onClick: onNext
+  }))), React.createElement("table", {
+    role: "grid",
+    className: "dnb-no-focus",
+    tabIndex: 0,
+    "aria-labelledby": `${id}--title`,
+    onKeyDown: onKeyDownHandler,
+    onMouseLeave: onMouseLeaveHandler,
+    ref: listRef
+  }, !hideDays && React.createElement("thead", {
+    "aria-hidden": true
+  }, React.createElement("tr", {
+    role: "row",
+    className: "dnb-date-picker__labels"
+  }, getWeek(dayOffset(firstDayOfWeek)).map((day, i) => React.createElement("th", {
+    key: i,
+    role: "columnheader",
+    scope: "col",
+    className: `dnb-date-picker__labels__day dnb-date-picker__labels__day--${format(day, 'i', {
+      locale
+    })}`,
+    "aria-label": format(day, 'EEEE', {
       locale
-    })), React.createElement("div", {
-      className: "dnb-date-picker__header__nav"
-    }, React.createElement(NextButton, {
-      nr: nr,
-      maxDate: maxDate,
-      month: month,
-      locale: locale,
-      context: this.context,
-      nextBtn: nextBtn,
-      onNext: onNext
-    }))), React.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.createElement("thead", {
-      "aria-hidden": true
-    }, React.createElement("tr", {
+    })
+  }, format(day, dayOfWeekFormat, {
+    locale
+  }))))), React.createElement("tbody", null, weekDays.map((week, i) => {
+    return React.createElement("tr", {
+      key: 'week' + i,
       role: "row",
-      className: "dnb-date-picker__labels"
-    }, getWeek(dayOffset(firstDayOfWeek)).map((day, i) => React.createElement("th", {
-      key: i,
-      role: "columnheader",
-      scope: "col",
-      className: `dnb-date-picker__labels__day dnb-date-picker__labels__day--${format(day, 'i', {
-        locale
-      })}`,
-      "aria-label": format(day, 'EEEE', {
+      className: "dnb-date-picker__days"
+    }, week.map((day, i) => {
+      const title = format(day.date, 'PPPP', {
         locale
-      })
-    }, format(day, dayOfWeekFormat, {
-      locale
-    }))))), React.createElement("tbody", null, weekDays.map((week, i) => {
-      return React.createElement("tr", {
-        key: 'week' + i,
-        role: "row",
-        className: "dnb-date-picker__days"
-      }, week.map((day, i) => {
-        const title = format(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.createElement("td", _extends({
+        key: 'day' + i,
+        role: "gridcell",
+        className: classnames("dnb-date-picker__day dnb-no-focus", buildDayClassNames(day))
+      }, paramsCell), React.createElement(Button, _extends({
+        size: "medium",
+        variant: "secondary",
+        text: format(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.createElement("td", _extends({
-          key: 'day' + i,
-          role: "gridcell",
-          className: classnames("dnb-date-picker__day dnb-no-focus", this.buildClassNames(day)),
-          onFocus: this.onKeyDownHandler
-        }, paramsCell), React.createElement(Button, _extends({
-          size: "medium",
-          variant: "secondary",
-          text: format(day.date, 'd', {
-            locale
-          }),
-          bounding: true,
-          disabled: handleAsDisabled,
-          tabIndex: handleAsDisabled ? '0' : '-1',
-          "aria-disabled": handleAsDisabled,
-          "aria-label": title
-        }, paramsButton, {
-          onClick: handleAsDisabled ? undefined : ({
-            event
-          }) => 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 : ({
+          event
+        }) => 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
+        })
+      })));
+    }));
+  }))));
 }
-_defineProperty(DatePickerCalendar, "contextType", DatePickerContext);
-_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: nbLocale,
-  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.string,
-  nr: PropTypes.number,
-  month: PropTypes.instanceOf(Date),
-  prevBtn: PropTypes.bool,
-  nextBtn: PropTypes.bool,
-  titleFormat: PropTypes.string,
-  dayOfWeekFormat: PropTypes.string,
-  firstDayOfWeek: PropTypes.string,
-  hideNav: PropTypes.bool,
-  hideDays: PropTypes.bool,
-  onlyMonth: PropTypes.bool,
-  hideNextMonthWeek: PropTypes.bool,
-  noAutofocus: PropTypes.bool,
-  onHover: PropTypes.func,
-  onSelect: PropTypes.func,
-  onPrev: PropTypes.func,
-  onNext: PropTypes.func,
-  locale: PropTypes.object,
-  rtl: PropTypes.bool,
-  isRange: PropTypes.bool,
-  resetDate: PropTypes.bool,
-  onKeyDown: PropTypes.func
-} : void 0;
-const PrevButton = ({
+export default DatePickerCalendar;
+function CalendarButton({
+  type,
   nr,
-  minDate,
+  date,
   month,
   locale,
-  context,
-  prevBtn,
-  onPrev,
+  showButton,
+  onClick,
   onKeyDown
-}) => {
-  if (!prevBtn) {
+}) {
+  const tr = useTranslation().DatePicker;
+  if (!showButton) {
     return React.createElement(React.Fragment, null);
   }
-  const disabled = minDate && isSameMonth(month, minDate);
-  const onClick = () => onPrev && !disabled && onPrev({
-    nr
-  });
-  const {
-    translation: {
-      DatePicker: {
-        prev_month
-      }
-    }
-  } = context;
-  const title = prev_month.replace(/%s/, format(subMonths(month, 1), 'MMMM yyyy', {
+  const disabled = date && isSameMonth(month, date);
+  const title = tr[`${type}_month`].replace(/%s/, format(subMonths(month, 1), 'MMMM yyyy', {
     locale
   }));
+  const icon = type === 'prev' ? 'chevron_left' : 'chevron_right';
   return React.createElement(Button, {
-    className: 'dnb-date-picker__prev' + (disabled ? " disabled" : ""),
-    icon: "chevron_left",
-    size: "small",
-    "aria-label": title,
-    onClick: onClick,
-    onKeyDown: onKeyDown
-  });
-};
-process.env.NODE_ENV !== "production" ? PrevButton.propTypes = {
-  nr: PropTypes.number.isRequired,
-  minDate: PropTypes.instanceOf(Date),
-  month: PropTypes.object.isRequired,
-  locale: PropTypes.object.isRequired,
-  context: PropTypes.object.isRequired,
-  prevBtn: PropTypes.bool.isRequired,
-  onPrev: PropTypes.func.isRequired,
-  onKeyDown: PropTypes.func
-} : void 0;
-PrevButton.defaultProps = {
-  minDate: null,
-  onKeyDown: null
-};
-const NextButton = ({
-  nr,
-  maxDate,
-  month,
-  locale,
-  context,
-  nextBtn,
-  onNext,
-  onKeyDown
-}) => {
-  if (!nextBtn) {
-    return React.createElement(React.Fragment, null);
-  }
-  const disabled = maxDate && isSameMonth(month, maxDate);
-  const onClick = () => onNext && !disabled && onNext({
-    nr
-  });
-  const {
-    translation: {
-      DatePicker: {
-        next_month
-      }
-    }
-  } = context;
-  const title = next_month.replace(/%s/, format(addMonths(month, 1), 'MMMM yyyy', {
-    locale
-  }));
-  return nextBtn && React.createElement(Button, {
-    className: 'dnb-date-picker__next' + (disabled ? " disabled" : ""),
-    icon: "chevron_right",
+    className: `dnb-date-picker__${type}` + (disabled ? " disabled" : ""),
+    icon: icon,
     size: "small",
     "aria-label": title,
-    onClick: onClick,
+    onClick: () => onClick && !disabled && onClick({
+      nr,
+      type
+    }),
     onKeyDown: onKeyDown
   });
-};
-process.env.NODE_ENV !== "production" ? NextButton.propTypes = {
-  nr: PropTypes.number.isRequired,
-  maxDate: PropTypes.instanceOf(Date),
-  month: PropTypes.object.isRequired,
-  locale: PropTypes.object.isRequired,
-  context: PropTypes.object.isRequired,
-  nextBtn: PropTypes.bool.isRequired,
-  onNext: PropTypes.func.isRequired,
-  onKeyDown: PropTypes.func
-} : void 0;
-NextButton.defaultProps = {
-  maxDate: null,
-  onKeyDown: null
-};
-const onSelectRange = ({
+}
+function onSelectRange({
   day,
   isRange,
   startDate,
@@ -573,42 +430,41 @@ const onSelectRange = ({
   onSelect,
   resetDate,
   event
-}) => {
+}) {
   event.persist();
   if (!isRange) {
-    onSelect({
+    return onSelect({
       startDate: startOfDay(day.date),
       endDate: startOfDay(day.date),
       event
     });
-  } else if (!startDate || resetDate && startDate && endDate) {
-    onSelect({
+  }
+  if (!startDate || resetDate && startDate && endDate) {
+    return onSelect({
       startDate: startOfDay(day.date),
       endDate: undefined,
       event
     });
-  } else {
-    const hasEndDate = endDate;
-    const daysToStartDate = Math.abs(differenceInCalendarDays(startDate, day.date));
-    const daysToEndDate = Math.abs(differenceInCalendarDays(endDate, day.date));
-    let range = toRange(startDate, day.date);
-    if (hasEndDate && !resetDate && daysToStartDate < daysToEndDate) {
-      range = toRange(endDate, day.date);
-    }
-    onSelect({
-      startDate: startOfDay(range.startDate),
-      endDate: startOfDay(range.endDate),
-      event
-    });
   }
-};
-const onHoverDay = ({
+  const daysToStartDate = Math.abs(differenceInCalendarDays(startDate, day.date));
+  const daysToEndDate = Math.abs(differenceInCalendarDays(endDate, day.date));
+  const range = toRange(endDate && !resetDate && daysToStartDate < daysToEndDate ? endDate : startDate, day.date);
+  return onSelect({
+    startDate: startOfDay(range.startDate),
+    endDate: startOfDay(range.endDate),
+    event
+  });
+}
+function onHoverDay({
   day,
   hoverDate,
   onHover
-}) => {
-  if (!isSameDay(day.date, hoverDate)) {
-    onHover && onHover(day.date);
+}) {
+  if (!isSameDay(day.date, hoverDate) && onHover) {
+    onHover(day.date);
   }
-};
+}
+function buildDayClassNames(day) {
+  return classnames(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