@sb1/ffe-datepicker-react 100.12.4 → 101.0.0

package/lib/calendar/Calendar.js

@@ -1,19 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -49,110 +34,107 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Calendar = void 0;
-var react_1 = __importStar(require("react"));
-var uuid_1 = require("uuid");
-var ClickableDate_1 = require("./ClickableDate");
-var NonClickableDate_1 = require("./NonClickableDate");
-var Header_1 = require("./Header");
-var simpledate_1 = require("../datelogic/simpledate");
-var simplecalendar_1 = require("../datelogic/simplecalendar");
-var Calendar = /** @class */ (function (_super) {
-    __extends(Calendar, _super);
-    function Calendar(props) {
-        var _this = _super.call(this, props) || this;
-        _this.clickableDateRef = react_1.default.createRef();
-        _this.prevMonthButtonElementRef = react_1.default.createRef();
-        _this.nextMonthButtonElementRef = react_1.default.createRef();
-        _this.monthSelectRef = react_1.default.createRef();
-        _this.yearSelectRef = react_1.default.createRef();
-        _this.focusTrap = function (event) {
+const react_1 = __importStar(require("react"));
+const ClickableDate_1 = require("./ClickableDate");
+const NonClickableDate_1 = require("./NonClickableDate");
+const Header_1 = require("./Header");
+const simpledate_1 = require("../datelogic/simpledate");
+const simplecalendar_1 = require("../datelogic/simplecalendar");
+class Calendar extends react_1.Component {
+    constructor(props) {
+        super(props);
+        this.clickableDateRef = react_1.default.createRef();
+        this.prevMonthButtonElementRef = react_1.default.createRef();
+        this.nextMonthButtonElementRef = react_1.default.createRef();
+        this.monthSelectRef = react_1.default.createRef();
+        this.yearSelectRef = react_1.default.createRef();
+        this.focusTrap = (event) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-            var activeElement = document.activeElement;
+            const activeElement = document.activeElement;
             if (event.key === 'Tab') {
                 event.preventDefault();
-                var dropdownCaption = _this.props.dropdownCaption;
+                const { dropdownCaption } = this.props;
                 if (event.shiftKey) {
-                    if (activeElement === _this.clickableDateRef.current) {
-                        (_a = _this.nextMonthButtonElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                        _this.setState({ isFocusingHeader: true });
+                    if (activeElement === this.clickableDateRef.current) {
+                        (_a = this.nextMonthButtonElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                        this.setState({ isFocusingHeader: true });
                     }
-                    else if (activeElement === _this.nextMonthButtonElementRef.current) {
+                    else if (activeElement === this.nextMonthButtonElementRef.current) {
                         if (dropdownCaption) {
-                            (_b = _this.yearSelectRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                            (_b = this.yearSelectRef.current) === null || _b === void 0 ? void 0 : _b.focus();
                         }
                         else {
-                            (_c = _this.prevMonthButtonElementRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+                            (_c = this.prevMonthButtonElementRef.current) === null || _c === void 0 ? void 0 : _c.focus();
                         }
                     }
-                    else if (dropdownCaption && activeElement === _this.yearSelectRef.current) {
-                        (_d = _this.monthSelectRef.current) === null || _d === void 0 ? void 0 : _d.focus();
+                    else if (dropdownCaption && activeElement === this.yearSelectRef.current) {
+                        (_d = this.monthSelectRef.current) === null || _d === void 0 ? void 0 : _d.focus();
                     }
-                    else if (dropdownCaption && activeElement === _this.monthSelectRef.current) {
-                        (_e = _this.prevMonthButtonElementRef.current) === null || _e === void 0 ? void 0 : _e.focus();
+                    else if (dropdownCaption && activeElement === this.monthSelectRef.current) {
+                        (_e = this.prevMonthButtonElementRef.current) === null || _e === void 0 ? void 0 : _e.focus();
                     }
-                    else if (activeElement === _this.prevMonthButtonElementRef.current) {
-                        (_f = _this.clickableDateRef.current) === null || _f === void 0 ? void 0 : _f.focus();
-                        _this.setState({ isFocusingHeader: false });
-                        _this.forceUpdate();
+                    else if (activeElement === this.prevMonthButtonElementRef.current) {
+                        (_f = this.clickableDateRef.current) === null || _f === void 0 ? void 0 : _f.focus();
+                        this.setState({ isFocusingHeader: false });
+                        this.forceUpdate();
                     }
                 }
                 else {
-                    if (activeElement === _this.clickableDateRef.current) {
-                        (_g = _this.prevMonthButtonElementRef.current) === null || _g === void 0 ? void 0 : _g.focus();
-                        _this.setState({ isFocusingHeader: true });
+                    if (activeElement === this.clickableDateRef.current) {
+                        (_g = this.prevMonthButtonElementRef.current) === null || _g === void 0 ? void 0 : _g.focus();
+                        this.setState({ isFocusingHeader: true });
                     }
-                    else if (activeElement === _this.prevMonthButtonElementRef.current) {
+                    else if (activeElement === this.prevMonthButtonElementRef.current) {
                         if (dropdownCaption) {
-                            (_h = _this.monthSelectRef.current) === null || _h === void 0 ? void 0 : _h.focus();
+                            (_h = this.monthSelectRef.current) === null || _h === void 0 ? void 0 : _h.focus();
                         }
                         else {
-                            (_j = _this.nextMonthButtonElementRef.current) === null || _j === void 0 ? void 0 : _j.focus();
+                            (_j = this.nextMonthButtonElementRef.current) === null || _j === void 0 ? void 0 : _j.focus();
                         }
                     }
-                    else if (dropdownCaption && activeElement === _this.monthSelectRef.current) {
-                        (_k = _this.yearSelectRef.current) === null || _k === void 0 ? void 0 : _k.focus();
+                    else if (dropdownCaption && activeElement === this.monthSelectRef.current) {
+                        (_k = this.yearSelectRef.current) === null || _k === void 0 ? void 0 : _k.focus();
                     }
-                    else if (dropdownCaption && activeElement === _this.yearSelectRef.current) {
-                        (_l = _this.nextMonthButtonElementRef.current) === null || _l === void 0 ? void 0 : _l.focus();
+                    else if (dropdownCaption && activeElement === this.yearSelectRef.current) {
+                        (_l = this.nextMonthButtonElementRef.current) === null || _l === void 0 ? void 0 : _l.focus();
                     }
-                    else if (activeElement === _this.nextMonthButtonElementRef.current) {
-                        (_m = _this.clickableDateRef.current) === null || _m === void 0 ? void 0 : _m.focus();
-                        _this.setState({ isFocusingHeader: false });
-                        _this.forceUpdate();
+                    else if (activeElement === this.nextMonthButtonElementRef.current) {
+                        (_m = this.clickableDateRef.current) === null || _m === void 0 ? void 0 : _m.focus();
+                        this.setState({ isFocusingHeader: false });
+                        this.forceUpdate();
                     }
                 }
             }
         };
-        _this.state = {
+        this.state = {
             calendar: new simplecalendar_1.SimpleCalendar((0, simpledate_1.getSimpleDateFromString)(props === null || props === void 0 ? void 0 : props.selectedDate), props.minDate, props.maxDate, props.disabledDates, props.locale),
             isFocusingHeader: false,
         };
-        _this.datepickerId = "ffe-calendar-".concat((0, uuid_1.v4)());
-        _this.keyDown = _this.keyDown.bind(_this);
-        _this.mouseClick = _this.mouseClick.bind(_this);
-        _this.nextMonth = _this.nextMonth.bind(_this);
-        _this.previousMonth = _this.previousMonth.bind(_this);
-        _this.navigateToMonthYear = _this.navigateToMonthYear.bind(_this);
-        _this.renderDate = _this.renderDate.bind(_this);
-        _this.renderWeek = _this.renderWeek.bind(_this);
-        _this.renderDay = _this.renderDay.bind(_this);
-        return _this;
+        this.datepickerId = `ffe-calendar-${Math.random().toString(36).slice(2)}`;
+        this.keyDown = this.keyDown.bind(this);
+        this.mouseClick = this.mouseClick.bind(this);
+        this.nextMonth = this.nextMonth.bind(this);
+        this.previousMonth = this.previousMonth.bind(this);
+        this.navigateToMonthYear = this.navigateToMonthYear.bind(this);
+        this.renderDate = this.renderDate.bind(this);
+        this.renderWeek = this.renderWeek.bind(this);
+        this.renderDay = this.renderDay.bind(this);
     }
     /* eslint-disable react/no-did-update-set-state */
-    Calendar.prototype.componentDidUpdate = function (prevProps) {
+    componentDidUpdate(prevProps) {
         if (prevProps.selectedDate !== this.props.selectedDate) {
             this.setState({
                 calendar: new simplecalendar_1.SimpleCalendar((0, simpledate_1.getSimpleDateFromString)(this.props.selectedDate), this.props.minDate, this.props.maxDate, this.props.disabledDates, this.props.locale),
             }, this.forceUpdate);
         }
-    };
-    Calendar.prototype.shouldComponentUpdate = function (nextProps) {
+    }
+    shouldComponentUpdate(nextProps) {
         return nextProps.selectedDate !== this.props.selectedDate;
-    };
-    Calendar.prototype.keyDown = function (event) {
+    }
+    keyDown(event) {
         var _a, _b, _c;
-        var calendar = this.state.calendar;
-        var scrollableEvents = [
+        const calendar = this.state.calendar;
+        const scrollableEvents = [
             'PageUp',
             'PageDown',
             'End',
@@ -217,79 +199,75 @@ var Calendar = /** @class */ (function (_super) {
                 return;
         }
         this.forceUpdate();
-    };
-    Calendar.prototype.mouseClick = function (date) {
-        var pickedDate = (0, simpledate_1.getSimpleDateFromTimestamp)(date.timestamp);
+    }
+    mouseClick(date) {
+        const pickedDate = (0, simpledate_1.getSimpleDateFromTimestamp)(date.timestamp);
         if (this.state.calendar.isDateWithinDateRange(pickedDate) &&
             date.isEnabled) {
             this.state.calendar.selectTimestamp(date.timestamp);
             this.props.onDatePicked(this.state.calendar.selected());
         }
-    };
-    Calendar.prototype.nextMonth = function (evt) {
+    }
+    nextMonth(evt) {
         evt.preventDefault();
         this.state.calendar.nextMonth();
         this.forceUpdate();
-    };
-    Calendar.prototype.previousMonth = function (evt) {
+    }
+    previousMonth(evt) {
         evt.preventDefault();
         this.state.calendar.previousMonth();
         this.forceUpdate();
-    };
-    Calendar.prototype.renderDate = function (calendarButtonState, index) {
-        var calendar = this.state.calendar;
+    }
+    renderDate(calendarButtonState, index) {
+        const { calendar } = this.state;
         if (calendarButtonState.isNonClickableDate) {
             return (react_1.default.createElement(NonClickableDate_1.NonClickableDate, { key: calendarButtonState.dayInMonth, date: { timestamp: calendarButtonState.timestamp } }));
         }
-        return (react_1.default.createElement(ClickableDate_1.ClickableDate, { calendarButtonState: calendarButtonState, month: calendar.focusedMonth, year: calendar.focusedYear, headers: "header__".concat(this.datepickerId, "__").concat(index), key: calendarButtonState.timestamp, onClick: this.mouseClick, locale: this.props.locale, dateButtonRef: calendarButtonState.isFocus
+        return (react_1.default.createElement(ClickableDate_1.ClickableDate, { calendarButtonState: calendarButtonState, month: calendar.focusedMonth, year: calendar.focusedYear, headers: `header__${this.datepickerId}__${index}`, key: calendarButtonState.timestamp, onClick: this.mouseClick, locale: this.props.locale, dateButtonRef: calendarButtonState.isFocus
                 ? this.clickableDateRef
                 : undefined, isFocusingHeader: this.state.isFocusingHeader, focusOnMount: this.props.focusOnMount }));
-    };
-    Calendar.prototype.renderWeek = function (week) {
-        return (react_1.default.createElement("tr", { key: "week-".concat(week.number), role: "presentation" }, week.dates.map(this.renderDate)));
-    };
-    Calendar.prototype.renderDay = function (day, index) {
-        return (react_1.default.createElement("th", { "aria-label": day.name, className: "ffe-calendar__weekday", id: "header__".concat(this.datepickerId, "__").concat(index), key: day.name },
+    }
+    renderWeek(week) {
+        return (react_1.default.createElement("tr", { key: `week-${week.number}`, role: "presentation" }, week.dates.map(this.renderDate)));
+    }
+    renderDay(day, index) {
+        return (react_1.default.createElement("th", { "aria-label": day.name, className: "ffe-calendar__weekday", id: `header__${this.datepickerId}__${index}`, key: day.name },
             react_1.default.createElement("span", { title: day.name }, day.shortName)));
-    };
+    }
     /**
      * Navigate to a specific month and year
      */
-    Calendar.prototype.navigateToMonthYear = function (month, year) {
-        var calendar = this.state.calendar;
-        var currentMonth = calendar.focusedDate.month + 1; // 1-indexed month
-        var currentYear = calendar.focusedYear;
+    navigateToMonthYear(month, year) {
+        const { calendar } = this.state;
+        let currentMonth = calendar.focusedDate.month + 1; // 1-indexed month
+        let currentYear = calendar.focusedYear;
         // Calculate how many months to move based on current and target date
-        var monthsDiff = (year - currentYear) * 12 + (month - currentMonth);
+        const monthsDiff = (year - currentYear) * 12 + (month - currentMonth);
         if (monthsDiff < 0) {
             // Go backward
-            for (var i = 0; i > monthsDiff; i--) {
+            for (let i = 0; i > monthsDiff; i--) {
                 calendar.previousMonth();
             }
         }
         else if (monthsDiff > 0) {
             // Go forward
-            for (var i = 0; i < monthsDiff; i++) {
+            for (let i = 0; i < monthsDiff; i++) {
                 calendar.nextMonth();
             }
         }
         this.forceUpdate();
-    };
-    Calendar.prototype.render = function () {
-        var _this = this;
-        var calendar = this.state.calendar;
+    }
+    render() {
+        const { calendar } = this.state;
         /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-        return (react_1.default.createElement("div", { role: "dialog", "aria-modal": true, "aria-labelledby": "".concat(this.datepickerId, "-title"), className: "ffe-default-mode" },
+        return (react_1.default.createElement("div", { role: "dialog", "aria-modal": true, "aria-labelledby": `${this.datepickerId}-title`, className: "ffe-default-mode" },
             react_1.default.createElement("div", { className: this.props.calendarClassName || 'ffe-calendar', role: "application", onKeyDown: this.focusTrap },
-                react_1.default.createElement(Header_1.Header, { datepickerId: this.datepickerId, month: calendar.focusedMonth, nextMonthHandler: this.nextMonth, nextMonthLabel: calendar.nextName, previousMonthHandler: this.previousMonth, previousMonthLabel: calendar.previousName, year: calendar.focusedYear, prevMonthButtonElement: this.prevMonthButtonElementRef, nextMonthButtonElement: this.nextMonthButtonElementRef, monthNumber: calendar.focusedDate.month + 1, locale: this.props.locale, dropdownCaption: this.props.dropdownCaption, onMonthYearChange: function (month, year) {
-                        return _this.navigateToMonthYear(month, year);
-                    }, minDate: this.props.minDate, maxDate: this.props.maxDate, monthSelectRef: this.monthSelectRef, yearSelectRef: this.yearSelectRef }),
+                react_1.default.createElement(Header_1.Header, { datepickerId: this.datepickerId, month: calendar.focusedMonth, nextMonthHandler: this.nextMonth, nextMonthLabel: calendar.nextName, previousMonthHandler: this.previousMonth, previousMonthLabel: calendar.previousName, year: calendar.focusedYear, prevMonthButtonElement: this.prevMonthButtonElementRef, nextMonthButtonElement: this.nextMonthButtonElementRef, monthNumber: calendar.focusedDate.month + 1, locale: this.props.locale, dropdownCaption: this.props.dropdownCaption, onMonthYearChange: (month, year) => this.navigateToMonthYear(month, year), minDate: this.props.minDate, maxDate: this.props.maxDate, monthSelectRef: this.monthSelectRef, yearSelectRef: this.yearSelectRef }),
                 react_1.default.createElement("table", { className: "ffe-calendar__grid", onKeyDown: this.keyDown, role: "presentation" },
                     react_1.default.createElement("thead", null,
                         react_1.default.createElement("tr", null, calendar.dayNames.map(this.renderDay))),
                     react_1.default.createElement("tbody", null, calendar.visibleDates.map(this.renderWeek))))));
         /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
-    };
-    return Calendar;
-}(react_1.Component));
+    }
+}
 exports.Calendar = Calendar;

package/lib/calendar/ClickableDate.js

@@ -1,19 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -52,31 +37,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ClickableDate = void 0;
-var react_1 = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var ClickableDate = /** @class */ (function (_super) {
-    __extends(ClickableDate, _super);
-    function ClickableDate() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ClickableDate.prototype.componentDidMount = function () {
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+class ClickableDate extends react_1.Component {
+    componentDidMount() {
         if (this.props.focusOnMount) {
             this.focusIfNeeded();
         }
-    };
-    ClickableDate.prototype.componentDidUpdate = function () {
+    }
+    componentDidUpdate() {
         this.focusIfNeeded();
-    };
-    ClickableDate.prototype.focusIfNeeded = function () {
+    }
+    focusIfNeeded() {
         var _a;
-        var _b = this.props, calendarButtonState = _b.calendarButtonState, isFocusingHeader = _b.isFocusingHeader, dateButtonRef = _b.dateButtonRef;
+        const { calendarButtonState, isFocusingHeader, dateButtonRef } = this.props;
         if (calendarButtonState.isFocus && !isFocusingHeader) {
             (_a = dateButtonRef === null || dateButtonRef === void 0 ? void 0 : dateButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
-    };
-    ClickableDate.prototype.dateClassName = function () {
-        var _a = this.props, calendarButtonState = _a.calendarButtonState, isFocusingHeader = _a.isFocusingHeader;
-        var isEnabled = calendarButtonState.isEnabled, isFocus = calendarButtonState.isFocus, isSelected = calendarButtonState.isSelected, isToday = calendarButtonState.isToday;
+    }
+    dateClassName() {
+        const { calendarButtonState, isFocusingHeader } = this.props;
+        const { isEnabled, isFocus, isSelected, isToday } = calendarButtonState;
         return (0, classnames_1.default)({
             'ffe-calendar__date': true,
             'ffe-calendar__date--today': isToday,
@@ -85,16 +66,15 @@ var ClickableDate = /** @class */ (function (_super) {
             'ffe-calendar__date--selected': isSelected,
             'ffe-calendar__date--disabled-focus': !isEnabled && isFocus,
         });
-    };
-    ClickableDate.prototype.tabIndex = function () {
+    }
+    tabIndex() {
         return this.props.calendarButtonState.isFocus ? 0 : -1;
-    };
-    ClickableDate.prototype.render = function () {
-        var _a = this.props, calendarButtonState = _a.calendarButtonState, headers = _a.headers, onClick = _a.onClick, locale = _a.locale, dateButtonRef = _a.dateButtonRef, month = _a.month, year = _a.year;
-        var monthName = locale === 'en' ? month : month.toLowerCase();
-        return (react_1.default.createElement("td", { className: "ffe-calendar__day", headers: headers, role: "button", ref: dateButtonRef, "aria-disabled": !calendarButtonState.isEnabled, "aria-current": calendarButtonState.isSelected, "aria-label": "".concat(calendarButtonState.dayInMonth, ". ").concat(monthName, " ").concat(year), tabIndex: this.tabIndex(), onClick: function () { return onClick(calendarButtonState); } },
+    }
+    render() {
+        const { calendarButtonState, headers, onClick, locale, dateButtonRef, month, year, } = this.props;
+        const monthName = locale === 'en' ? month : month.toLowerCase();
+        return (react_1.default.createElement("td", { className: "ffe-calendar__day", headers: headers, role: "button", ref: dateButtonRef, "aria-disabled": !calendarButtonState.isEnabled, "aria-current": calendarButtonState.isSelected, "aria-label": `${calendarButtonState.dayInMonth}. ${monthName} ${year}`, tabIndex: this.tabIndex(), onClick: () => onClick(calendarButtonState) },
             react_1.default.createElement("span", { className: this.dateClassName(), "aria-hidden": "true" }, calendarButtonState.dayInMonth)));
-    };
-    return ClickableDate;
-}(react_1.Component));
+    }
+}
 exports.ClickableDate = ClickableDate;

package/lib/calendar/Header.js

@@ -4,42 +4,41 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = void 0;
-var react_1 = __importDefault(require("react"));
-var ffe_icons_react_1 = require("@sb1/ffe-icons-react");
-var ffe_dropdown_react_1 = require("@sb1/ffe-dropdown-react");
-var dateRangeUtils_1 = require("../util/dateRangeUtils");
-var Header = function (_a) {
-    var datepickerId = _a.datepickerId, month = _a.month, nextMonthHandler = _a.nextMonthHandler, nextMonthLabel = _a.nextMonthLabel, previousMonthHandler = _a.previousMonthHandler, previousMonthLabel = _a.previousMonthLabel, year = _a.year, prevMonthButtonElement = _a.prevMonthButtonElement, nextMonthButtonElement = _a.nextMonthButtonElement, monthNumber = _a.monthNumber, _b = _a.dropdownCaption, dropdownCaption = _b === void 0 ? false : _b, locale = _a.locale, onMonthYearChange = _a.onMonthYearChange, minDate = _a.minDate, maxDate = _a.maxDate, monthSelectRef = _a.monthSelectRef, yearSelectRef = _a.yearSelectRef;
-    var arrowBackIosIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Im0zNjcuMzg0LTQ4MCAzMDEuMzA4IDMwMS4zMDhxMTEuOTIzIDExLjkyMyAxMS42MTUgMjguMDc3LS4zMDggMTYuMTUzLTEyLjIzMSAyOC4wNzZxLTExLjkyMiAxMS45MjMtMjguMDc2IDExLjkyM3QtMjguMDc2LTExLjkyM0wzMDUuMDc4LTQyOC43N3EtMTAuODQ3LTEwLjg0Ni0xNi4wNzctMjQuMzA3LTUuMjMxLTEzLjQ2Mi01LjIzMS0yNi45MjMgMC0xMy40NjEgNS4yMzEtMjYuOTIzIDUuMjMtMTMuNDYxIDE2LjA3Ny0yNC4zMDdsMzA2Ljg0Ni0zMDYuODQ2cTExLjkyMi0xMS45MjMgMjguMzg0LTExLjYxNiAxNi40NjEuMzA4IDI4LjM4NCAxMi4yMzEgMTEuOTIzIDExLjkyMyAxMS45MjMgMjguMDc2IDAgMTYuMTU0LTExLjkyMyAyOC4wNzdMMzY3LjM4NC00ODBaIi8+PC9zdmc+';
-    var monthOptions = (0, dateRangeUtils_1.getMonthOptions)(locale);
-    var yearOptions = (0, dateRangeUtils_1.getYearOptions)(minDate, maxDate);
-    var handleMonthChange = function (e) {
-        var selectedMonth = parseInt(e.target.value, 10);
+const react_1 = __importDefault(require("react"));
+const ffe_icons_react_1 = require("@sb1/ffe-icons-react");
+const ffe_dropdown_react_1 = require("@sb1/ffe-dropdown-react");
+const dateRangeUtils_1 = require("../util/dateRangeUtils");
+const Header = ({ datepickerId, month, nextMonthHandler, nextMonthLabel, previousMonthHandler, previousMonthLabel, year, prevMonthButtonElement, nextMonthButtonElement, monthNumber, dropdownCaption = false, locale, onMonthYearChange, minDate, maxDate, monthSelectRef, yearSelectRef, }) => {
+    const arrowBackIosIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Im0zNjcuMzg0LTQ4MCAzMDEuMzA4IDMwMS4zMDhxMTEuOTIzIDExLjkyMyAxMS42MTUgMjguMDc3LS4zMDggMTYuMTUzLTEyLjIzMSAyOC4wNzZxLTExLjkyMiAxMS45MjMtMjguMDc2IDExLjkyM3QtMjguMDc2LTExLjkyM0wzMDUuMDc4LTQyOC43N3EtMTAuODQ3LTEwLjg0Ni0xNi4wNzctMjQuMzA3LTUuMjMxLTEzLjQ2Mi01LjIzMS0yNi45MjMgMC0xMy40NjEgNS4yMzEtMjYuOTIzIDUuMjMtMTMuNDYxIDE2LjA3Ny0yNC4zMDdsMzA2Ljg0Ni0zMDYuODQ2cTExLjkyMi0xMS45MjMgMjguMzg0LTExLjYxNiAxNi40NjEuMzA4IDI4LjM4NCAxMi4yMzEgMTEuOTIzIDExLjkyMyAxMS45MjMgMjguMDc2IDAgMTYuMTU0LTExLjkyMyAyOC4wNzdMMzY3LjM4NC00ODBaIi8+PC9zdmc+';
+    const monthOptions = (0, dateRangeUtils_1.getMonthOptions)(locale);
+    const yearOptions = (0, dateRangeUtils_1.getYearOptions)(minDate, maxDate);
+    const handleMonthChange = (e) => {
+        const selectedMonth = parseInt(e.target.value, 10);
         onMonthYearChange === null || onMonthYearChange === void 0 ? void 0 : onMonthYearChange(selectedMonth, year);
     };
-    var handleYearChange = function (e) {
-        var selectedYear = parseInt(e.target.value, 10);
+    const handleYearChange = (e) => {
+        const selectedYear = parseInt(e.target.value, 10);
         onMonthYearChange === null || onMonthYearChange === void 0 ? void 0 : onMonthYearChange(monthNumber, selectedYear);
     };
     // Prevent event propagation when interacting with dropdowns to avoid
     // closing the calendar when selecting from dropdowns
-    var handleDropdownClick = function (e) {
+    const handleDropdownClick = (e) => {
         // Add datepickerId flag to prevent calendar from closing
         e.nativeEvent.__datepickerID = datepickerId;
         e.stopPropagation();
     };
-    var handleDropdownFocus = function (e) {
+    const handleDropdownFocus = (e) => {
         e.stopPropagation();
     };
     return (react_1.default.createElement("div", { className: "ffe-calendar__header" },
         react_1.default.createElement("div", { className: "ffe-calendar__header-inner-wrapper" },
             react_1.default.createElement("button", { className: "ffe-calendar__month-nav ffe-calendar__previous", onClick: previousMonthHandler, "aria-label": previousMonthLabel, type: "button", ref: prevMonthButtonElement, tabIndex: -1 },
                 react_1.default.createElement(ffe_icons_react_1.Icon, { fileUrl: arrowBackIosIcon, size: "md", className: "ffe-calendar__icon-prev" })),
-            react_1.default.createElement("header", { "aria-live": "polite", className: "ffe-calendar__title", id: "".concat(datepickerId, "-title") }, dropdownCaption ? (react_1.default.createElement("div", { className: "ffe-calendar__dropdown-container" },
+            react_1.default.createElement("header", { "aria-live": "polite", className: "ffe-calendar__title", id: `${datepickerId}-title` }, dropdownCaption ? (react_1.default.createElement("div", { className: "ffe-calendar__dropdown-container" },
                 react_1.default.createElement("div", { className: "ffe-calendar__dropdown ffe-calendar__month-dropdown" },
-                    react_1.default.createElement(ffe_dropdown_react_1.Dropdown, { id: "".concat(datepickerId, "__month-select"), className: "ffe-calendar__month-select", value: monthNumber, onChange: handleMonthChange, "aria-label": "".concat(month, " ").concat(year), onClick: handleDropdownClick, onFocus: handleDropdownFocus, ref: monthSelectRef }, monthOptions.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.label)); }))),
+                    react_1.default.createElement(ffe_dropdown_react_1.Dropdown, { id: `${datepickerId}__month-select`, className: "ffe-calendar__month-select", value: monthNumber, onChange: handleMonthChange, "aria-label": `${month} ${year}`, onClick: handleDropdownClick, onFocus: handleDropdownFocus, ref: monthSelectRef }, monthOptions.map(option => (react_1.default.createElement("option", { key: option.value, value: option.value }, option.label))))),
                 react_1.default.createElement("div", { className: "ffe-calendar__dropdown ffe-calendar__year-dropdown" },
-                    react_1.default.createElement(ffe_dropdown_react_1.Dropdown, { id: "".concat(datepickerId, "__year-select"), className: "ffe-calendar__year-select", value: year, onChange: handleYearChange, "aria-label": "".concat(year), onClick: handleDropdownClick, onFocus: handleDropdownFocus, ref: yearSelectRef }, yearOptions.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.label)); }))))) : (react_1.default.createElement("div", { id: "".concat(datepickerId, "__month-label"), "data-testid": "".concat(datepickerId, "__month-label") },
+                    react_1.default.createElement(ffe_dropdown_react_1.Dropdown, { id: `${datepickerId}__year-select`, className: "ffe-calendar__year-select", value: year, onChange: handleYearChange, "aria-label": `${year}`, onClick: handleDropdownClick, onFocus: handleDropdownFocus, ref: yearSelectRef }, yearOptions.map(option => (react_1.default.createElement("option", { key: option.value, value: option.value }, option.label))))))) : (react_1.default.createElement("div", { id: `${datepickerId}__month-label`, "data-testid": `${datepickerId}__month-label` },
                 react_1.default.createElement("span", { className: "ffe-calendar__month" }, month),
                 react_1.default.createElement("span", { className: "ffe-calendar__year" }, year)))),
             react_1.default.createElement("button", { className: "ffe-calendar__month-nav ffe-calendar__next", onClick: nextMonthHandler, "aria-label": nextMonthLabel, type: "button", ref: nextMonthButtonElement, tabIndex: -1 },

package/lib/calendar/NonClickableDate.js

@@ -4,9 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NonClickableDate = void 0;
-var react_1 = __importDefault(require("react"));
-var NonClickableDate = function (_a) {
-    var date = _a.date;
+const react_1 = __importDefault(require("react"));
+const NonClickableDate = ({ date }) => {
     return (react_1.default.createElement("td", { "aria-hidden": true, className: "ffe-calendar__day", key: date.timestamp, role: "button" }));
 };
 exports.NonClickableDate = NonClickableDate;