@sb1/ffe-datepicker-react 100.12.3 → 101.0.0

package/lib/datepicker/DatepickerComp.js

@@ -37,66 +37,65 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatepickerComp = void 0;
-var react_1 = __importStar(require("react"));
-var DatepickerContext_1 = require("./DatepickerContext");
-var SpinButton_1 = require("./SpinButton");
-var padZero_1 = require("./padZero");
-var button_1 = require("../button");
-var calendar_1 = require("../calendar");
-var dateUtil_1 = require("../util/dateUtil");
-var lodash_debounce_1 = __importDefault(require("lodash.debounce"));
-var classnames_1 = __importDefault(require("classnames"));
-var simpledate_1 = require("../datelogic/simpledate");
-var ffe_form_react_1 = require("@sb1/ffe-form-react");
-var i18n_1 = __importDefault(require("../i18n/i18n"));
-var types_1 = require("../types");
-var DatepickerComp = function (_a) {
-    var ariaInvalidState = _a.ariaInvalid, ariaInvalidProp = _a["aria-invalid"], ariaDescribedbyState = _a.ariaDescribedby, ariaDescribedbyProp = _a["aria-describedby"], onBlur = _a.onBlur, calendarAbove = _a.calendarAbove, id = _a.id, maxDateProp = _a.maxDate, minDateProp = _a.minDate, onChange = _a.onChange, fullWidth = _a.fullWidth, fieldMessage = _a.fieldMessage, labelId = _a.labelId, dropdownCaption = _a.dropdownCaption, disabledDates = _a.disabledDates;
-    var _b = (0, react_1.useContext)(DatepickerContext_1.DatepickerContext), day = _b.day, setDay = _b.setDay, year = _b.year, setYear = _b.setYear, month = _b.month, setMonth = _b.setMonth, locale = _b.locale, calendarActiveDate = _b.calendarActiveDate, setCalendarActiveDate = _b.setCalendarActiveDate, setLastChangedValue = _b.setLastChangedValue;
-    var formatDate = (0, react_1.useCallback)(function () {
+const react_1 = __importStar(require("react"));
+const DatepickerContext_1 = require("./DatepickerContext");
+const SpinButton_1 = require("./SpinButton");
+const padZero_1 = require("./padZero");
+const button_1 = require("../button");
+const calendar_1 = require("../calendar");
+const dateUtil_1 = require("../util/dateUtil");
+const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
+const classnames_1 = __importDefault(require("classnames"));
+const simpledate_1 = require("../datelogic/simpledate");
+const ffe_form_react_1 = require("@sb1/ffe-form-react");
+const i18n_1 = __importDefault(require("../i18n/i18n"));
+const types_1 = require("../types");
+const DatepickerComp = ({ ariaInvalid: ariaInvalidState, 'aria-invalid': ariaInvalidProp, ariaDescribedby: ariaDescribedbyState, 'aria-describedby': ariaDescribedbyProp, onBlur, calendarAbove, id, maxDate: maxDateProp, minDate: minDateProp, onChange, fullWidth, fieldMessage, labelId, dropdownCaption, disabledDates, }) => {
+    const { day, setDay, year, setYear, month, setMonth, locale, calendarActiveDate, setCalendarActiveDate, setLastChangedValue, } = (0, react_1.useContext)(DatepickerContext_1.DatepickerContext);
+    const formatDate = (0, react_1.useCallback)(() => {
         return (0, dateUtil_1.getPaddedDateString)(day, month, year);
     }, [day, month, year]);
-    var _c = (0, react_1.useState)(false), displayDatePicker = _c[0], setDisplayDatePicker = _c[1];
-    var _d = (0, react_1.useState)(minDateProp), minDate = _d[0], setMinDate = _d[1];
-    var _e = (0, react_1.useState)(maxDateProp), maxDate = _e[0], setMaxDate = _e[1];
-    var _f = (0, react_1.useState)(formatDate()), lastValidDate = _f[0], setLastValidDate = _f[1];
-    var datepickerId = (0, react_1.useId)();
-    var buttonRef = (0, react_1.useRef)(null);
-    var dayRef = (0, react_1.useRef)(null);
-    var monthRef = (0, react_1.useRef)(null);
-    var yearRef = (0, react_1.useRef)(null);
-    var getFieldMessageId = function () {
-        return fieldMessage ? "".concat(datepickerId, "-fieldmessage") : undefined;
+    const [displayDatePicker, setDisplayDatePicker] = (0, react_1.useState)(false);
+    const [minDate, setMinDate] = (0, react_1.useState)(minDateProp);
+    const [maxDate, setMaxDate] = (0, react_1.useState)(maxDateProp);
+    const [lastValidDate, setLastValidDate] = (0, react_1.useState)(formatDate());
+    const datepickerId = (0, react_1.useId)();
+    const buttonRef = (0, react_1.useRef)(null);
+    const dayRef = (0, react_1.useRef)(null);
+    const monthRef = (0, react_1.useRef)(null);
+    const yearRef = (0, react_1.useRef)(null);
+    const getFieldMessageId = () => {
+        return fieldMessage ? `${datepickerId}-fieldmessage` : undefined;
     };
-    var _onChange = (0, react_1.useCallback)(function (date) {
+    const _onChange = (0, react_1.useCallback)((date) => {
         setLastChangedValue(date);
         onChange(date);
     }, [onChange, setLastChangedValue]);
-    var fieldMessageId = getFieldMessageId();
+    const fieldMessageId = getFieldMessageId();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    var debounceCalendar = (0, react_1.useCallback)((0, lodash_debounce_1.default)(function (newValue) {
+    const debounceCalendar = (0, react_1.useCallback)((0, lodash_debounce_1.default)((newValue) => {
         if (newValue !== lastValidDate && (0, dateUtil_1.validateDate)(newValue)) {
             setCalendarActiveDate(newValue);
             setLastValidDate(newValue);
         }
     }, 250), [lastValidDate]);
-    var hasMessage = !!fieldMessage;
-    (0, react_1.useEffect)(function () {
-        return function () {
+    const hasMessage = !!fieldMessage;
+    (0, react_1.useEffect)(() => {
+        return () => {
             debounceCalendar.cancel();
         };
     }, [debounceCalendar]);
-    var validateDateIntervals = (0, react_1.useCallback)(function () {
-        var dateString = formatDate();
-        (0, simpledate_1.getSimpleDateFromString)(dateString, function (date) {
-            var maxDateValidated = maxDateProp
+    const validateDateIntervals = (0, react_1.useCallback)(() => {
+        const dateString = formatDate();
+        (0, simpledate_1.getSimpleDateFromString)(dateString, date => {
+            const maxDateValidated = maxDateProp
                 ? (0, simpledate_1.getSimpleDateFromString)(maxDateProp)
                 : null;
             if ((maxDateValidated === null || maxDateValidated === void 0 ? void 0 : maxDateValidated.isBefore(date)) &&
                 (0, dateUtil_1.isDateInputWithTwoDigitYear)(dateString)) {
                 date.adjust({ period: 'Y', offset: -100 });
             }
-            var formattedDate = date.format();
+            const formattedDate = date.format();
             if (formattedDate !== dateString) {
                 setDay([date.date]);
                 setMonth([date.month + 1]);
@@ -105,7 +104,7 @@ var DatepickerComp = function (_a) {
             setLastValidDate(formattedDate);
         });
     }, [formatDate, maxDateProp, setDay, setMonth, setYear]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (minDateProp !== minDate || maxDateProp !== maxDate) {
             setMinDate(minDateProp);
             setMaxDate(maxDateProp);
@@ -121,43 +120,43 @@ var DatepickerComp = function (_a) {
         maxDate,
         validateDateIntervals,
     ]);
-    var closeCalendarSetInputFocus = function () {
+    const closeCalendarSetInputFocus = () => {
         var _a;
         setDisplayDatePicker(false);
         (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         validateDateIntervals();
     };
-    var escKeyHandler = function (evt) {
+    const escKeyHandler = (evt) => {
         if (evt.key === 'Escape') {
             closeCalendarSetInputFocus();
         }
     };
-    var globalClickHandler = function (evt) {
+    const globalClickHandler = (evt) => {
         if (displayDatePicker && evt.__datepickerID !== datepickerId) {
             closeCalendarSetInputFocus();
         }
     };
-    var addGlobalEventListeners = function () {
+    const addGlobalEventListeners = () => {
         window.addEventListener('click', globalClickHandler);
         window.addEventListener('keyup', escKeyHandler);
     };
-    var removeGlobalEventListeners = function () {
+    const removeGlobalEventListeners = () => {
         window.removeEventListener('click', globalClickHandler);
         window.removeEventListener('keyup', escKeyHandler);
     };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (displayDatePicker) {
             addGlobalEventListeners();
         }
         else {
             removeGlobalEventListeners();
         }
-        return function () {
+        return () => {
             removeGlobalEventListeners();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [displayDatePicker]);
-    var calendarButtonClickHandler = function () {
+    const calendarButtonClickHandler = () => {
         validateDateIntervals();
         setDisplayDatePicker(!displayDatePicker);
     };
@@ -165,11 +164,11 @@ var DatepickerComp = function (_a) {
      * Adds a flag on the click event so that the globalClickHandler()
      * can determine whether the ID matches. Makes it so that only one datepicker can be open at the same time
      */
-    var addFlagOnClickEventClickHandler = function (evt) {
-        var nativeEvent = evt.nativeEvent;
+    const addFlagOnClickEventClickHandler = (evt) => {
+        const nativeEvent = evt.nativeEvent;
         nativeEvent.__datepickerID = datepickerId;
     };
-    var focusSpinButton = function (evt) {
+    const focusSpinButton = (evt) => {
         var _a;
         if (evt.target !== yearRef.current &&
             evt.target !== buttonRef.current &&
@@ -178,9 +177,9 @@ var DatepickerComp = function (_a) {
             (_a = dayRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     };
-    var datePickedHandler = function (date) {
+    const datePickedHandler = (date) => {
         var _a;
-        var simpleDate = (0, simpledate_1.getSimpleDateFromString)(date);
+        const simpleDate = (0, simpledate_1.getSimpleDateFromString)(date);
         if (simpleDate) {
             setDay([simpleDate.date]);
             setMonth([simpleDate.month + 1]);
@@ -190,34 +189,34 @@ var DatepickerComp = function (_a) {
             (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     };
-    var ariaInvalid = function () {
-        var ariaInvalidTotal = ariaInvalidProp === 'true' || ariaInvalidState;
-        var isAriaInvalid = ariaInvalidTotal === 'true' || ariaInvalidTotal === true
+    const ariaInvalid = () => {
+        const ariaInvalidTotal = ariaInvalidProp === 'true' || ariaInvalidState;
+        const isAriaInvalid = ariaInvalidTotal === 'true' || ariaInvalidTotal === true
             ? 'true'
             : undefined;
         return isAriaInvalid;
     };
-    var ariaDescribedby = function () {
-        var ariaDescribedbyTotal = ariaDescribedbyProp !== null && ariaDescribedbyProp !== void 0 ? ariaDescribedbyProp : ariaDescribedbyState;
+    const ariaDescribedby = () => {
+        const ariaDescribedbyTotal = ariaDescribedbyProp !== null && ariaDescribedbyProp !== void 0 ? ariaDescribedbyProp : ariaDescribedbyState;
         return ariaDescribedbyTotal;
     };
-    var handlePaste = function (evt) {
+    const handlePaste = (evt) => {
         evt.preventDefault();
-        var paste = (evt.clipboardData || window.Clipboard).getData('text');
-        var date = (0, simpledate_1.getSimpleDateFromString)(paste);
+        const paste = (evt.clipboardData || window.Clipboard).getData('text');
+        const date = (0, simpledate_1.getSimpleDateFromString)(paste);
         if (date) {
             setDay([date.date]);
             setMonth([date.month + 1]);
             setYear([date.year]);
         }
     };
-    var _g = (0, react_1.useState)(true), init = _g[0], setInit = _g[1];
-    (0, react_1.useEffect)(function () {
+    const [init, setInit] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
         if (init) {
             setInit(false);
             return;
         }
-        var _a = lastValidDate.split('.').map(Number), day = _a[0], month = _a[1], year = _a[2];
+        const [day, month, year] = lastValidDate.split('.').map(Number);
         if (day * month * year > 0) {
             _onChange(lastValidDate);
             return;
@@ -230,12 +229,12 @@ var DatepickerComp = function (_a) {
             'ffe-datepicker--full-width': fullWidth,
             'ffe-input-group--message': hasMessage,
             'ffe-datepicker--invalid': ariaInvalid(),
-        }), "data-testid": "date-picker", onClick: function (e) {
+        }), "data-testid": "date-picker", onClick: e => {
             addFlagOnClickEventClickHandler(e);
             focusSpinButton(e);
         }, role: 'group', id: id },
-        react_1.default.createElement("div", { className: (0, classnames_1.default)('ffe-dateinput'), onBlur: function (evt) {
-                var elementReceivingFocus = evt.relatedTarget;
+        react_1.default.createElement("div", { className: (0, classnames_1.default)('ffe-dateinput'), onBlur: evt => {
+                const elementReceivingFocus = evt.relatedTarget;
                 if (elementReceivingFocus !== yearRef.current &&
                     elementReceivingFocus !== dayRef.current &&
                     elementReceivingFocus !== monthRef.current) {
@@ -243,22 +242,20 @@ var DatepickerComp = function (_a) {
                     validateDateIntervals();
                 }
             } },
-            react_1.default.createElement(SpinButton_1.SpinButton, { ref: dayRef, value: day !== null && day !== void 0 ? day : undefined, min: 1, max: 31, onPaste: handlePaste, onSpinButtonChange: function (newValue, allowFocusNext) {
-                    if (allowFocusNext === void 0) { allowFocusNext = true; }
+            react_1.default.createElement(SpinButton_1.SpinButton, { ref: dayRef, value: day !== null && day !== void 0 ? day : undefined, min: 1, max: 31, onPaste: handlePaste, onSpinButtonChange: (newValue, allowFocusNext = true) => {
                     return allowFocusNext
-                        ? setDay(newValue, function () {
+                        ? setDay(newValue, () => {
                             var _a;
                             return (_a = monthRef.current) === null || _a === void 0 ? void 0 : _a.focus({
                                 preventScroll: true,
                             });
                         })
                         : setDay(newValue);
-                }, nextSpinButton: monthRef, maxLength: 2, "aria-invalid": ariaInvalid(), "aria-valuenow": typeof day === 'number' ? day : undefined, "aria-valuetext": "".concat(day), "aria-label": i18n_1.default[locale].DAY, "aria-describedby": ariaDescribedby(), "aria-labelledby": labelId }, day ? (0, padZero_1.padZero)(day) : 'dd'),
+                }, nextSpinButton: monthRef, maxLength: 2, "aria-invalid": ariaInvalid(), "aria-valuenow": typeof day === 'number' ? day : undefined, "aria-valuetext": `${day}`, "aria-label": i18n_1.default[locale].DAY, "aria-describedby": ariaDescribedby(), "aria-labelledby": labelId }, day ? (0, padZero_1.padZero)(day) : 'dd'),
             ".",
-            react_1.default.createElement(SpinButton_1.SpinButton, { ref: monthRef, value: month !== null && month !== void 0 ? month : undefined, min: 1, max: 12, onPaste: handlePaste, onSpinButtonChange: function (newValue, allowFocusNext) {
-                    if (allowFocusNext === void 0) { allowFocusNext = true; }
+            react_1.default.createElement(SpinButton_1.SpinButton, { ref: monthRef, value: month !== null && month !== void 0 ? month : undefined, min: 1, max: 12, onPaste: handlePaste, onSpinButtonChange: (newValue, allowFocusNext = true) => {
                     return allowFocusNext
-                        ? setMonth(newValue, function () {
+                        ? setMonth(newValue, () => {
                             var _a;
                             return (_a = yearRef.current) === null || _a === void 0 ? void 0 : _a.focus({
                                 preventScroll: true,
@@ -266,12 +263,12 @@ var DatepickerComp = function (_a) {
                         })
                         : setMonth(newValue);
                 }, nextSpinButton: yearRef, prevSpinButton: dayRef, maxLength: 2, "aria-invalid": ariaInvalid(), "aria-valuenow": typeof month === 'number' ? month : undefined, "aria-valuetext": (0, types_1.isMonth)(month)
-                    ? "".concat(month, " - ").concat(i18n_1.default[locale]["MONTH_".concat(month)])
+                    ? `${month} - ${i18n_1.default[locale][`MONTH_${month}`]}`
                     : undefined, "aria-label": i18n_1.default[locale].MONTH, "aria-describedby": ariaDescribedby(), "aria-labelledby": labelId }, month ? (0, padZero_1.padZero)(month) : 'mm'),
             ".",
-            react_1.default.createElement(SpinButton_1.SpinButton, { ref: yearRef, className: 'ffe-dateinput__field-year', value: year !== null && year !== void 0 ? year : undefined, min: 1, max: 9999, onPaste: handlePaste, onSpinButtonChange: function (newValue) {
+            react_1.default.createElement(SpinButton_1.SpinButton, { ref: yearRef, className: 'ffe-dateinput__field-year', value: year !== null && year !== void 0 ? year : undefined, min: 1, max: 9999, onPaste: handlePaste, onSpinButtonChange: newValue => {
                     setYear(newValue);
-                }, prevSpinButton: monthRef, maxLength: 4, "aria-invalid": ariaInvalid(), "aria-valuetext": "".concat(year), "aria-valuenow": typeof year === 'number' ? year : undefined, "aria-label": i18n_1.default[locale].YEAR, "aria-describedby": ariaDescribedby(), "aria-labelledby": labelId }, year ? year : 'yyyy')),
+                }, prevSpinButton: monthRef, maxLength: 4, "aria-invalid": ariaInvalid(), "aria-valuetext": `${year}`, "aria-valuenow": typeof year === 'number' ? year : undefined, "aria-label": i18n_1.default[locale].YEAR, "aria-describedby": ariaDescribedby(), "aria-labelledby": labelId }, year ? year : 'yyyy')),
         react_1.default.createElement(button_1.Button, { onClick: calendarButtonClickHandler, locale: locale, value: calendarActiveDate || '', ref: buttonRef }),
         displayDatePicker && (react_1.default.createElement(calendar_1.Calendar, { calendarClassName: (0, classnames_1.default)('ffe-calendar ffe-calendar--datepicker', { 'ffe-calendar--datepicker--above': calendarAbove }), locale: locale, onDatePicked: datePickedHandler, selectedDate: calendarActiveDate, focusOnMount: true, dropdownCaption: dropdownCaption, minDate: minDate, maxDate: maxDate, disabledDates: disabledDates })),
         !!fieldMessage && (react_1.default.createElement(ffe_form_react_1.ErrorFieldMessage, { as: "p", id: fieldMessageId }, fieldMessage))));

package/lib/datepicker/DatepickerContext.js

@@ -34,34 +34,33 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatepickerProvider = exports.DatepickerContext = void 0;
-var react_1 = __importStar(require("react"));
-var simpledate_1 = require("../datelogic/simpledate");
-var dateUtil_1 = require("../util/dateUtil");
-var toNumber_1 = require("./toNumber");
+const react_1 = __importStar(require("react"));
+const simpledate_1 = require("../datelogic/simpledate");
+const dateUtil_1 = require("../util/dateUtil");
+const toNumber_1 = require("./toNumber");
 exports.DatepickerContext = (0, react_1.createContext)({
     day: null,
     month: null,
     year: null,
-    setDay: function () { return null; },
-    setMonth: function () { return null; },
-    setYear: function () { return null; },
+    setDay: () => null,
+    setMonth: () => null,
+    setYear: () => null,
     locale: 'nb',
     calendarActiveDate: '',
-    setCalendarActiveDate: function () { return null; },
-    setLastChangedValue: function () { return null; },
+    setCalendarActiveDate: () => null,
+    setLastChangedValue: () => null,
 });
-var MONTHS_PER_YEAR = 12;
-var MAX_DAYS = 31;
-var DatepickerProvider = function (_a) {
-    var _b;
-    var children = _a.children, _c = _a.value, value = _c === void 0 ? '' : _c, locale = _a.locale;
-    var newDate = (0, dateUtil_1.validateDate)(value) ? (0, simpledate_1.getSimpleDateFromString)(value) : '';
-    var _d = (0, react_1.useState)(newDate ? newDate.date : null), day = _d[0], setDay = _d[1];
-    var _e = (0, react_1.useState)(newDate ? newDate.month + 1 : null), month = _e[0], setMonth = _e[1];
-    var _f = (0, react_1.useState)(newDate ? newDate.year : null), year = _f[0], setYear = _f[1];
-    var _g = (0, react_1.useState)((_b = newDate === null || newDate === void 0 ? void 0 : newDate.toString()) !== null && _b !== void 0 ? _b : ''), calendarActiveDate = _g[0], setCalendarActiveDate = _g[1];
-    var _h = (0, react_1.useState)(value !== null && value !== void 0 ? value : ''), lastChangedValue = _h[0], setLastChangedValue = _h[1];
-    (0, react_1.useEffect)(function () {
+const MONTHS_PER_YEAR = 12;
+const MAX_DAYS = 31;
+const DatepickerProvider = ({ children, value = '', locale, }) => {
+    var _a;
+    const newDate = (0, dateUtil_1.validateDate)(value) ? (0, simpledate_1.getSimpleDateFromString)(value) : '';
+    const [day, setDay] = (0, react_1.useState)(newDate ? newDate.date : null);
+    const [month, setMonth] = (0, react_1.useState)(newDate ? newDate.month + 1 : null);
+    const [year, setYear] = (0, react_1.useState)(newDate ? newDate.year : null);
+    const [calendarActiveDate, setCalendarActiveDate] = (0, react_1.useState)((_a = newDate === null || newDate === void 0 ? void 0 : newDate.toString()) !== null && _a !== void 0 ? _a : '');
+    const [lastChangedValue, setLastChangedValue] = (0, react_1.useState)(value !== null && value !== void 0 ? value : '');
+    (0, react_1.useEffect)(() => {
         var _a;
         if (value !== lastChangedValue) {
             setDay(newDate ? newDate.date : null);
@@ -72,14 +71,13 @@ var DatepickerProvider = function (_a) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
     return (react_1.default.createElement(exports.DatepickerContext.Provider, { value: {
-            day: day,
-            month: month,
-            year: year,
-            setDay: function (newValue, focusNext) {
-                if (focusNext === void 0) { focusNext = undefined; }
-                var numbers = newValue.slice(-2);
-                var first = numbers[0], second = numbers[1];
-                var total = (0, toNumber_1.toNumber)(numbers);
+            day,
+            month,
+            year,
+            setDay: (newValue, focusNext = undefined) => {
+                const numbers = newValue.slice(-2);
+                const [first, second] = numbers;
+                const total = (0, toNumber_1.toNumber)(numbers);
                 if (total > MAX_DAYS) {
                     focusNext === null || focusNext === void 0 ? void 0 : focusNext();
                 }
@@ -94,11 +92,10 @@ var DatepickerProvider = function (_a) {
                     }
                 }
             },
-            setMonth: function (newValue, focusNext) {
-                if (focusNext === void 0) { focusNext = undefined; }
-                var numbers = newValue.slice(-2);
-                var first = numbers[0], second = numbers[1];
-                var total = (0, toNumber_1.toNumber)(numbers);
+            setMonth: (newValue, focusNext = undefined) => {
+                const numbers = newValue.slice(-2);
+                const [first, second] = numbers;
+                const total = (0, toNumber_1.toNumber)(numbers);
                 if (total > MONTHS_PER_YEAR) {
                     focusNext === null || focusNext === void 0 ? void 0 : focusNext();
                 }
@@ -113,15 +110,15 @@ var DatepickerProvider = function (_a) {
                     }
                 }
             },
-            setYear: function (newValue) {
+            setYear: newValue => {
                 setYear((0, toNumber_1.toNumber)(newValue.slice(-4)));
             },
-            calendarActiveDate: calendarActiveDate,
-            setCalendarActiveDate: function (date) {
+            calendarActiveDate,
+            setCalendarActiveDate: date => {
                 setCalendarActiveDate(date);
             },
-            locale: locale,
-            setLastChangedValue: function (val) {
+            locale,
+            setLastChangedValue: val => {
                 setLastChangedValue(val);
             },
         } }, children));

package/lib/datepicker/SpinButton.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -43,30 +32,17 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SpinButton = void 0;
-var react_1 = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-exports.SpinButton = react_1.default.forwardRef(function (_a, ref) {
-    var className = _a.className, onSpinButtonChange = _a.onSpinButtonChange, maxLength = _a.maxLength, min = _a.min, max = _a.max, value = _a.value, nextSpinButton = _a.nextSpinButton, prevSpinButton = _a.prevSpinButton, children = _a.children, rest = __rest(_a, ["className", "onSpinButtonChange", "maxLength", "min", "max", "value", "nextSpinButton", "prevSpinButton", "children"]);
-    var history = (0, react_1.useRef)([]);
-    var handleKeyDown = function (evt) {
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+exports.SpinButton = react_1.default.forwardRef(({ className, onSpinButtonChange, maxLength, min, max, value, nextSpinButton, prevSpinButton, children, ...rest }, ref) => {
+    const history = (0, react_1.useRef)([]);
+    const handleKeyDown = (evt) => {
         var _a, _b, _c;
-        evt.stopPropagation();
         if (/\d/.test(evt.key)) {
             history.current =
                 history.current.length === maxLength
@@ -80,7 +56,7 @@ exports.SpinButton = react_1.default.forwardRef(function (_a, ref) {
                 (_a = prevSpinButton === null || prevSpinButton === void 0 ? void 0 : prevSpinButton.current) === null || _a === void 0 ? void 0 : _a.focus();
                 return;
             }
-            var newValue = value === null || value === void 0 ? void 0 : value.toString().slice(0, -1);
+            const newValue = value === null || value === void 0 ? void 0 : value.toString().slice(0, -1);
             history.current = newValue
                 ? newValue.split('').map(Number)
                 : [];
@@ -88,7 +64,7 @@ exports.SpinButton = react_1.default.forwardRef(function (_a, ref) {
         }
         else if (evt.key === 'ArrowUp') {
             evt.preventDefault();
-            var newValue = (value !== null && value !== void 0 ? value : 0) + 1;
+            let newValue = (value !== null && value !== void 0 ? value : 0) + 1;
             if (newValue && newValue !== null && newValue > max) {
                 newValue = min;
             }
@@ -96,7 +72,7 @@ exports.SpinButton = react_1.default.forwardRef(function (_a, ref) {
         }
         else if (evt.key === 'ArrowDown') {
             evt.preventDefault();
-            var newValue = (value !== null && value !== void 0 ? value : 0) - 1;
+            let newValue = (value !== null && value !== void 0 ? value : 0) - 1;
             if (newValue < min) {
                 newValue = max;
             }
@@ -111,7 +87,7 @@ exports.SpinButton = react_1.default.forwardRef(function (_a, ref) {
             (_c = nextSpinButton === null || nextSpinButton === void 0 ? void 0 : nextSpinButton.current) === null || _c === void 0 ? void 0 : _c.focus();
         }
     };
-    return (react_1.default.createElement("span", __assign({ role: 'spinbutton', inputMode: 'numeric', className: (0, classnames_1.default)(className, 'ffe-dateinput__field'), tabIndex: 0, onFocus: function () {
+    return (react_1.default.createElement("span", { role: 'spinbutton', inputMode: 'numeric', className: (0, classnames_1.default)(className, 'ffe-dateinput__field'), tabIndex: 0, onFocus: () => {
             history.current = [];
-        }, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, ref: ref, onKeyDown: handleKeyDown }, rest), children));
+        }, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, ref: ref, onKeyDown: handleKeyDown, ...rest }, children));
 });

package/lib/datepicker/padZero.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.padZero = void 0;
-var padZero = function (value) {
+const padZero = (value) => {
     if (value < 10) {
-        return "0".concat(value);
+        return `0${value}`;
     }
     return value;
 };