@sb1/ffe-datepicker-react 100.11.0 → 100.12.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/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.11.0",
+    "version": "100.12.1",
     "license": "MIT",
     "author": "SpareBank 1",
     "files": [
@@ -24,11 +24,11 @@
         "test:watch": "ffe-buildtool jest --watch"
     },
     "dependencies": {
-        "@sb1/ffe-datepicker": "^100.11.0",
-        "@sb1/ffe-dropdown-react": "^100.11.0",
-        "@sb1/ffe-form": "^100.11.0",
-        "@sb1/ffe-form-react": "^100.11.0",
-        "@sb1/ffe-icons-react": "^100.11.0",
+        "@sb1/ffe-datepicker": "^100.12.1",
+        "@sb1/ffe-dropdown-react": "^100.12.1",
+        "@sb1/ffe-form": "^100.12.1",
+        "@sb1/ffe-form-react": "^100.12.1",
+        "@sb1/ffe-icons-react": "^100.12.1",
         "@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.11.0",
+        "@sb1/ffe-buildtool": "^100.12.1",
         "eslint": "^9.22.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
@@ -47,5 +47,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "8d6488be9b6820620bf7c3b6d267f344ce5cb0d6"
+    "gitHead": "d51dcc5967ccdc3f0f947fc0ba8c6ef016800255"
 }

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;