@sb1/ffe-datepicker-react 100.12.0 → 100.12.3

package/es/calendar/Calendar.js

@@ -27,35 +27,60 @@ var Calendar = /** @class */ (function (_super) {
         _this.clickableDateRef = React.createRef();
         _this.prevMonthButtonElementRef = React.createRef();
         _this.nextMonthButtonElementRef = React.createRef();
+        _this.monthSelectRef = React.createRef();
+        _this.yearSelectRef = React.createRef();
         _this.focusTrap = function (event) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             var activeElement = document.activeElement;
             if (event.key === 'Tab') {
                 event.preventDefault();
+                var dropdownCaption = _this.props.dropdownCaption;
                 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.nextMonthButtonElementRef.current) {
-                        (_b = _this.prevMonthButtonElementRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                    else if (activeElement === _this.nextMonthButtonElementRef.current) {
+                        if (dropdownCaption) {
+                            (_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();
+                        }
                     }
-                    if (activeElement === _this.prevMonthButtonElementRef.current) {
-                        (_c = _this.clickableDateRef.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.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.clickableDateRef.current) {
-                        (_d = _this.prevMonthButtonElementRef.current) === null || _d === void 0 ? void 0 : _d.focus();
+                        (_g = _this.prevMonthButtonElementRef.current) === null || _g === void 0 ? void 0 : _g.focus();
                         _this.setState({ isFocusingHeader: true });
                     }
-                    if (activeElement === _this.prevMonthButtonElementRef.current) {
-                        (_e = _this.nextMonthButtonElementRef.current) === null || _e === void 0 ? void 0 : _e.focus();
+                    else if (activeElement === _this.prevMonthButtonElementRef.current) {
+                        if (dropdownCaption) {
+                            (_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();
+                        }
                     }
-                    if (activeElement === _this.nextMonthButtonElementRef.current) {
-                        (_f = _this.clickableDateRef.current) === null || _f === void 0 ? void 0 : _f.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 (activeElement === _this.nextMonthButtonElementRef.current) {
+                        (_m = _this.clickableDateRef.current) === null || _m === void 0 ? void 0 : _m.focus();
                         _this.setState({ isFocusingHeader: false });
                         _this.forceUpdate();
                     }
@@ -222,7 +247,7 @@ var Calendar = /** @class */ (function (_super) {
             React.createElement("div", { className: this.props.calendarClassName || 'ffe-calendar', role: "application", onKeyDown: this.focusTrap },
                 React.createElement(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 }),
+                    }, minDate: this.props.minDate, maxDate: this.props.maxDate, monthSelectRef: this.monthSelectRef, yearSelectRef: this.yearSelectRef }),
                 React.createElement("table", { className: "ffe-calendar__grid", onKeyDown: this.keyDown, role: "presentation" },
                     React.createElement("thead", null,
                         React.createElement("tr", null, calendar.dayNames.map(this.renderDay))),

package/es/calendar/Header.js

@@ -3,7 +3,7 @@ import { Icon } from '@sb1/ffe-icons-react';
 import { Dropdown } from '@sb1/ffe-dropdown-react';
 import { getMonthOptions, getYearOptions } from '../util/dateRangeUtils';
 export 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;
+    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 = getMonthOptions(locale);
     var yearOptions = getYearOptions(minDate, maxDate);
@@ -31,9 +31,9 @@ export var Header = function (_a) {
                 React.createElement(Icon, { fileUrl: arrowBackIosIcon, size: "md", className: "ffe-calendar__icon-prev" })),
             React.createElement("header", { "aria-live": "polite", className: "ffe-calendar__title", id: "".concat(datepickerId, "-title") }, dropdownCaption ? (React.createElement("div", { className: "ffe-calendar__dropdown-container" },
                 React.createElement("div", { className: "ffe-calendar__dropdown ffe-calendar__month-dropdown" },
-                    React.createElement(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 }, monthOptions.map(function (option) { return (React.createElement("option", { key: option.value, value: option.value }, option.label)); }))),
+                    React.createElement(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.createElement("option", { key: option.value, value: option.value }, option.label)); }))),
                 React.createElement("div", { className: "ffe-calendar__dropdown ffe-calendar__year-dropdown" },
-                    React.createElement(Dropdown, { id: "".concat(datepickerId, "__year-select"), className: "ffe-calendar__year-select", value: year, onChange: handleYearChange, "aria-label": "".concat(year), onClick: handleDropdownClick, onFocus: handleDropdownFocus }, yearOptions.map(function (option) { return (React.createElement("option", { key: option.value, value: option.value }, option.label)); }))))) : (React.createElement("div", { id: "".concat(datepickerId, "__month-label"), "data-testid": "".concat(datepickerId, "__month-label") },
+                    React.createElement(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.createElement("option", { key: option.value, value: option.value }, option.label)); }))))) : (React.createElement("div", { id: "".concat(datepickerId, "__month-label"), "data-testid": "".concat(datepickerId, "__month-label") },
                 React.createElement("span", { className: "ffe-calendar__month" }, month),
                 React.createElement("span", { className: "ffe-calendar__year" }, year)))),
             React.createElement("button", { className: "ffe-calendar__month-nav ffe-calendar__next", onClick: nextMonthHandler, "aria-label": nextMonthLabel, type: "button", ref: nextMonthButtonElement, tabIndex: -1 },

package/es/input/DateInput.js

@@ -20,10 +20,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import i18n from '../i18n/i18n';
+import { isIOSSafari } from '../util/isIOSSafari';
 export var DateInput = React.forwardRef(function (_a, ref) {
     var ariaInvalid = _a.ariaInvalid, value = _a.value, className = _a.className, _b = _a.locale, locale = _b === void 0 ? 'nb' : _b, rest = __rest(_a, ["ariaInvalid", "value", "className", "locale"]);
-    return (React.createElement("input", __assign({}, rest, { "aria-invalid": ariaInvalid, maxLength: 10, ref: ref, "aria-placeholder": i18n[locale].DATE_FORMAT, value: value, className: classNames('ffe-input-field ffe-dateinput__field', className) })));
+    // VoiceOver on iOS Safari blocks interaction with date-related inputs.
+    // Using role="textbox" as a workaround on that platform.
+    // https://dev.to/mfranzke/voiceover-bug-on-ios-safari-blocks-date-time-related-inputs-especially-in-react-4f61
+    var role = useMemo(function () { return (isIOSSafari() ? 'textbox' : undefined); }, []);
+    return (React.createElement("input", __assign({ type: "date", role: role, "aria-invalid": ariaInvalid, maxLength: 10, ref: ref, "aria-placeholder": i18n[locale].DATE_FORMAT, value: value, className: classNames('ffe-input-field ffe-dateinput__field', className) }, rest)));
 });

package/es/tsconfig.esm.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/types.ts","../src/button/Button.tsx","../src/button/index.ts","../src/calendar/Calendar.tsx","../src/calendar/ClickableDate.tsx","../src/calendar/Header.tsx","../src/calendar/NonClickableDate.tsx","../src/calendar/index.ts","../src/datelogic/simplecalendar.ts","../src/datelogic/simpledate.ts","../src/datelogic/types.ts","../src/datepicker/Datepicker.tsx","../src/datepicker/DatepickerComp.tsx","../src/datepicker/DatepickerContext.tsx","../src/datepicker/SpinButton.tsx","../src/datepicker/index.ts","../src/datepicker/padZero.ts","../src/datepicker/testHelper.ts","../src/datepicker/toNumber.ts","../src/i18n/en.ts","../src/i18n/i18n.ts","../src/i18n/nb.ts","../src/i18n/nn.ts","../src/input/DateInput.tsx","../src/input/index.ts","../src/util/dateRangeUtils.ts","../src/util/dateUtil.ts"],"version":"5.9.3"}
+{"root":["../src/index.ts","../src/types.ts","../src/button/Button.tsx","../src/button/index.ts","../src/calendar/Calendar.tsx","../src/calendar/ClickableDate.tsx","../src/calendar/Header.tsx","../src/calendar/NonClickableDate.tsx","../src/calendar/index.ts","../src/datelogic/simplecalendar.ts","../src/datelogic/simpledate.ts","../src/datelogic/types.ts","../src/datepicker/Datepicker.tsx","../src/datepicker/DatepickerComp.tsx","../src/datepicker/DatepickerContext.tsx","../src/datepicker/SpinButton.tsx","../src/datepicker/index.ts","../src/datepicker/padZero.ts","../src/datepicker/testHelper.ts","../src/datepicker/toNumber.ts","../src/i18n/en.ts","../src/i18n/i18n.ts","../src/i18n/nb.ts","../src/i18n/nn.ts","../src/input/DateInput.tsx","../src/input/index.ts","../src/util/dateRangeUtils.ts","../src/util/dateUtil.ts","../src/util/isIOSSafari.ts"],"version":"5.9.3"}

package/es/util/isIOSSafari.js

@@ -0,0 +1,22 @@
+/**
+ * Detects iOS/iPadOS Safari to work around a VoiceOver bug that blocks
+ * interaction with date-related inputs.
+ * @see https://dev.to/mfranzke/voiceover-bug-on-ios-safari-blocks-date-time-related-inputs-especially-in-react-4f61
+ *
+ * Known limitations:
+ * - iOS WebViews (in-app browsers like Instagram, Facebook) use WebKit and may
+ *   be affected by the same bug, but are not detected here since they don't
+ *   include "Safari" in the user agent string.
+ */
+export var isIOSSafari = function () {
+    if (typeof navigator === 'undefined') {
+        return false;
+    }
+    var ua = navigator.userAgent;
+    // iPadOS 13+ in desktop mode reports as Macintosh, but can be identified
+    // by having touch points (real Macs have maxTouchPoints === 0).
+    var isIOS = /iP(ad|hone|od)/.test(ua) ||
+        (/Macintosh/.test(ua) && navigator.maxTouchPoints > 1);
+    var isSafari = !!ua.match(/Safari/) && !ua.match(/CriOS|FxiOS|OPiOS|EdgiOS/);
+    return isIOS && isSafari;
+};

package/lib/calendar/Calendar.js

@@ -63,35 +63,60 @@ var Calendar = /** @class */ (function (_super) {
         _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) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             var activeElement = document.activeElement;
             if (event.key === 'Tab') {
                 event.preventDefault();
+                var dropdownCaption = _this.props.dropdownCaption;
                 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.nextMonthButtonElementRef.current) {
-                        (_b = _this.prevMonthButtonElementRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                    else if (activeElement === _this.nextMonthButtonElementRef.current) {
+                        if (dropdownCaption) {
+                            (_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();
+                        }
                     }
-                    if (activeElement === _this.prevMonthButtonElementRef.current) {
-                        (_c = _this.clickableDateRef.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.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.clickableDateRef.current) {
-                        (_d = _this.prevMonthButtonElementRef.current) === null || _d === void 0 ? void 0 : _d.focus();
+                        (_g = _this.prevMonthButtonElementRef.current) === null || _g === void 0 ? void 0 : _g.focus();
                         _this.setState({ isFocusingHeader: true });
                     }
-                    if (activeElement === _this.prevMonthButtonElementRef.current) {
-                        (_e = _this.nextMonthButtonElementRef.current) === null || _e === void 0 ? void 0 : _e.focus();
+                    else if (activeElement === _this.prevMonthButtonElementRef.current) {
+                        if (dropdownCaption) {
+                            (_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();
+                        }
                     }
-                    if (activeElement === _this.nextMonthButtonElementRef.current) {
-                        (_f = _this.clickableDateRef.current) === null || _f === void 0 ? void 0 : _f.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 (activeElement === _this.nextMonthButtonElementRef.current) {
+                        (_m = _this.clickableDateRef.current) === null || _m === void 0 ? void 0 : _m.focus();
                         _this.setState({ isFocusingHeader: false });
                         _this.forceUpdate();
                     }
@@ -258,7 +283,7 @@ var Calendar = /** @class */ (function (_super) {
             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 }),
+                    }, 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))),

package/lib/calendar/Header.js

@@ -9,7 +9,7 @@ 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;
+    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);
@@ -37,9 +37,9 @@ var Header = function (_a) {
                 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("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 }, 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: "".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("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 }, 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: "".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("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/input/DateInput.js

@@ -10,6 +10,39 @@ var __assign = (this && this.__assign) || function () {
     };
     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);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        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)
@@ -26,10 +59,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateInput = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var i18n_1 = __importDefault(require("../i18n/i18n"));
+var isIOSSafari_1 = require("../util/isIOSSafari");
 exports.DateInput = react_1.default.forwardRef(function (_a, ref) {
     var ariaInvalid = _a.ariaInvalid, value = _a.value, className = _a.className, _b = _a.locale, locale = _b === void 0 ? 'nb' : _b, rest = __rest(_a, ["ariaInvalid", "value", "className", "locale"]);
-    return (react_1.default.createElement("input", __assign({}, rest, { "aria-invalid": ariaInvalid, maxLength: 10, ref: ref, "aria-placeholder": i18n_1.default[locale].DATE_FORMAT, value: value, className: (0, classnames_1.default)('ffe-input-field ffe-dateinput__field', className) })));
+    // VoiceOver on iOS Safari blocks interaction with date-related inputs.
+    // Using role="textbox" as a workaround on that platform.
+    // https://dev.to/mfranzke/voiceover-bug-on-ios-safari-blocks-date-time-related-inputs-especially-in-react-4f61
+    var role = (0, react_1.useMemo)(function () { return ((0, isIOSSafari_1.isIOSSafari)() ? 'textbox' : undefined); }, []);
+    return (react_1.default.createElement("input", __assign({ type: "date", role: role, "aria-invalid": ariaInvalid, maxLength: 10, ref: ref, "aria-placeholder": i18n_1.default[locale].DATE_FORMAT, value: value, className: (0, classnames_1.default)('ffe-input-field ffe-dateinput__field', className) }, rest)));
 });

package/lib/tsconfig.cjs.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/types.ts","../src/button/Button.tsx","../src/button/index.ts","../src/calendar/Calendar.tsx","../src/calendar/ClickableDate.tsx","../src/calendar/Header.tsx","../src/calendar/NonClickableDate.tsx","../src/calendar/index.ts","../src/datelogic/simplecalendar.ts","../src/datelogic/simpledate.ts","../src/datelogic/types.ts","../src/datepicker/Datepicker.tsx","../src/datepicker/DatepickerComp.tsx","../src/datepicker/DatepickerContext.tsx","../src/datepicker/SpinButton.tsx","../src/datepicker/index.ts","../src/datepicker/padZero.ts","../src/datepicker/testHelper.ts","../src/datepicker/toNumber.ts","../src/i18n/en.ts","../src/i18n/i18n.ts","../src/i18n/nb.ts","../src/i18n/nn.ts","../src/input/DateInput.tsx","../src/input/index.ts","../src/util/dateRangeUtils.ts","../src/util/dateUtil.ts"],"version":"5.9.3"}
+{"root":["../src/index.ts","../src/types.ts","../src/button/Button.tsx","../src/button/index.ts","../src/calendar/Calendar.tsx","../src/calendar/ClickableDate.tsx","../src/calendar/Header.tsx","../src/calendar/NonClickableDate.tsx","../src/calendar/index.ts","../src/datelogic/simplecalendar.ts","../src/datelogic/simpledate.ts","../src/datelogic/types.ts","../src/datepicker/Datepicker.tsx","../src/datepicker/DatepickerComp.tsx","../src/datepicker/DatepickerContext.tsx","../src/datepicker/SpinButton.tsx","../src/datepicker/index.ts","../src/datepicker/padZero.ts","../src/datepicker/testHelper.ts","../src/datepicker/toNumber.ts","../src/i18n/en.ts","../src/i18n/i18n.ts","../src/i18n/nb.ts","../src/i18n/nn.ts","../src/input/DateInput.tsx","../src/input/index.ts","../src/util/dateRangeUtils.ts","../src/util/dateUtil.ts","../src/util/isIOSSafari.ts"],"version":"5.9.3"}

package/lib/util/isIOSSafari.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isIOSSafari = void 0;
+/**
+ * Detects iOS/iPadOS Safari to work around a VoiceOver bug that blocks
+ * interaction with date-related inputs.
+ * @see https://dev.to/mfranzke/voiceover-bug-on-ios-safari-blocks-date-time-related-inputs-especially-in-react-4f61
+ *
+ * Known limitations:
+ * - iOS WebViews (in-app browsers like Instagram, Facebook) use WebKit and may
+ *   be affected by the same bug, but are not detected here since they don't
+ *   include "Safari" in the user agent string.
+ */
+var isIOSSafari = function () {
+    if (typeof navigator === 'undefined') {
+        return false;
+    }
+    var ua = navigator.userAgent;
+    // iPadOS 13+ in desktop mode reports as Macintosh, but can be identified
+    // by having touch points (real Macs have maxTouchPoints === 0).
+    var isIOS = /iP(ad|hone|od)/.test(ua) ||
+        (/Macintosh/.test(ua) && navigator.maxTouchPoints > 1);
+    var isSafari = !!ua.match(/Safari/) && !ua.match(/CriOS|FxiOS|OPiOS|EdgiOS/);
+    return isIOS && isSafari;
+};
+exports.isIOSSafari = isIOSSafari;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-datepicker-react",
-    "version": "100.12.0",
+    "version": "100.12.3",
     "license": "MIT",
     "author": "SpareBank 1",
     "files": [
@@ -24,11 +24,11 @@
         "test:watch": "ffe-buildtool jest --watch"
     },
     "dependencies": {
-        "@sb1/ffe-datepicker": "^100.12.0",
-        "@sb1/ffe-dropdown-react": "^100.12.0",
-        "@sb1/ffe-form": "^100.12.0",
-        "@sb1/ffe-form-react": "^100.12.0",
-        "@sb1/ffe-icons-react": "^100.12.0",
+        "@sb1/ffe-datepicker": "^100.12.3",
+        "@sb1/ffe-dropdown-react": "^100.12.3",
+        "@sb1/ffe-form": "^100.12.3",
+        "@sb1/ffe-form-react": "^100.12.3",
+        "@sb1/ffe-icons-react": "^100.12.3",
         "@testing-library/react": "^16.0.0",
         "@types/lodash.debounce": "^4.0.9",
         "classnames": "^2.3.1",
@@ -36,7 +36,7 @@
         "uuid": "^9.0.0"
     },
     "devDependencies": {
-        "@sb1/ffe-buildtool": "^100.12.0",
+        "@sb1/ffe-buildtool": "^100.12.3",
         "eslint": "^9.22.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
@@ -47,5 +47,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "78dd47a4064087480913e75ebd87b6c7deda6c54"
+    "gitHead": "c250edc3d20e5ed115c5c5951495d700e96a3be3"
 }

package/types/calendar/Calendar.d.ts

@@ -27,6 +27,8 @@ export declare class Calendar extends Component<CalendarProps, State> {
     clickableDateRef: React.RefObject<HTMLTableCellElement>;
     prevMonthButtonElementRef: React.RefObject<HTMLButtonElement>;
     nextMonthButtonElementRef: React.RefObject<HTMLButtonElement>;
+    monthSelectRef: React.RefObject<HTMLSelectElement>;
+    yearSelectRef: React.RefObject<HTMLSelectElement>;
     componentDidUpdate(prevProps: CalendarProps): void;
     shouldComponentUpdate(nextProps: CalendarProps): boolean;
     keyDown(event: React.KeyboardEvent<HTMLTableElement>): void;

package/types/calendar/Header.d.ts

@@ -10,6 +10,8 @@ interface HeaderProps {
     year: number;
     prevMonthButtonElement: React.RefObject<HTMLButtonElement>;
     nextMonthButtonElement: React.RefObject<HTMLButtonElement>;
+    monthSelectRef?: React.RefObject<HTMLSelectElement>;
+    yearSelectRef?: React.RefObject<HTMLSelectElement>;
     /** Nåværende månedsnummer (1-12) */
     monthNumber: number;
     /** Om måned- og år-dropdown skal vises i kalenderen */

package/types/tsconfig.types.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/types.ts","../src/button/Button.tsx","../src/button/index.ts","../src/calendar/Calendar.tsx","../src/calendar/ClickableDate.tsx","../src/calendar/Header.tsx","../src/calendar/NonClickableDate.tsx","../src/calendar/index.ts","../src/datelogic/simplecalendar.ts","../src/datelogic/simpledate.ts","../src/datelogic/types.ts","../src/datepicker/Datepicker.tsx","../src/datepicker/DatepickerComp.tsx","../src/datepicker/DatepickerContext.tsx","../src/datepicker/SpinButton.tsx","../src/datepicker/index.ts","../src/datepicker/padZero.ts","../src/datepicker/testHelper.ts","../src/datepicker/toNumber.ts","../src/i18n/en.ts","../src/i18n/i18n.ts","../src/i18n/nb.ts","../src/i18n/nn.ts","../src/input/DateInput.tsx","../src/input/index.ts","../src/util/dateRangeUtils.ts","../src/util/dateUtil.ts"],"version":"5.9.3"}
+{"root":["../src/index.ts","../src/types.ts","../src/button/Button.tsx","../src/button/index.ts","../src/calendar/Calendar.tsx","../src/calendar/ClickableDate.tsx","../src/calendar/Header.tsx","../src/calendar/NonClickableDate.tsx","../src/calendar/index.ts","../src/datelogic/simplecalendar.ts","../src/datelogic/simpledate.ts","../src/datelogic/types.ts","../src/datepicker/Datepicker.tsx","../src/datepicker/DatepickerComp.tsx","../src/datepicker/DatepickerContext.tsx","../src/datepicker/SpinButton.tsx","../src/datepicker/index.ts","../src/datepicker/padZero.ts","../src/datepicker/testHelper.ts","../src/datepicker/toNumber.ts","../src/i18n/en.ts","../src/i18n/i18n.ts","../src/i18n/nb.ts","../src/i18n/nn.ts","../src/input/DateInput.tsx","../src/input/index.ts","../src/util/dateRangeUtils.ts","../src/util/dateUtil.ts","../src/util/isIOSSafari.ts"],"version":"5.9.3"}

package/types/util/isIOSSafari.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Detects iOS/iPadOS Safari to work around a VoiceOver bug that blocks
+ * interaction with date-related inputs.
+ * @see https://dev.to/mfranzke/voiceover-bug-on-ios-safari-blocks-date-time-related-inputs-especially-in-react-4f61
+ *
+ * Known limitations:
+ * - iOS WebViews (in-app browsers like Instagram, Facebook) use WebKit and may
+ *   be affected by the same bug, but are not detected here since they don't
+ *   include "Safari" in the user agent string.
+ */
+export declare const isIOSSafari: () => boolean;