@db-ux/react-core-components 3.1.19 → 3.1.20

package/CHANGELOG.md

@@ -1,10 +1,15 @@
 # @db-ux/react-core-components
 
+## 3.1.20
+
+### Patch Changes
+
+- fix(input): iOS Safari VoiceOver bug for types `date`, `datetime-local`, `week`, `month`, `time` and `color` - [see commit 2ca96c8](https://github.com/db-ux-design-system/core-web/commit/2ca96c8852b7413f9a3281d69e9c4fc6f79c4f13)
+
 ## 3.1.19
 
 _version bump_
 
-
 ## 3.1.18
 
 ### Patch Changes

package/dist/components/input/input.js

@@ -6,7 +6,7 @@ import { DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_ME
 import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getInputValue, getNumber, hasVoiceOver, isArrayOfStrings, stringPropVisible, uuid, } from "../../utils";
 import DBInfotext from "../infotext/infotext";
 function DBInputFn(props, component) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => undefined);
     const [_messageId, set_messageId] = useState(() => undefined);
@@ -81,6 +81,16 @@ function DBInputFn(props, component) {
             }))
             : _list) || []);
     }
+    function isIOSSafari() {
+        if (typeof window === "undefined" || typeof navigator === "undefined")
+            return false;
+        const ua = navigator.userAgent;
+        // iOS detection
+        const isIOS = /iP(ad|hone|od)/.test(ua);
+        // Safari detection (not Chrome or Firefox on iOS)
+        const isSafari = !!ua.match(/Safari/) && !ua.match(/CriOS|FxiOS|OPiOS|EdgiOS/);
+        return isIOS && isSafari;
+    }
     useEffect(() => {
         var _a;
         const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `input-${uuid()}`;
@@ -117,8 +127,10 @@ function DBInputFn(props, component) {
     return (React.createElement("div", Object.assign({}, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-input", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-show-icon": getBooleanAsString((_a = props.showIconLeading) !== null && _a !== void 0 ? _a : props.showIcon), "data-icon": (_b = props.iconLeading) !== null && _b !== void 0 ? _b : props.icon, "data-icon-trailing": props.iconTrailing, "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing) }),
         React.createElement("label", { htmlFor: _id }, (_c = props.label) !== null && _c !== void 0 ? _c : DEFAULT_LABEL),
         React.createElement("input", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, "data-field-sizing": props.fieldSizing, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id, name: props.name, type: props.type || "text", multiple: getBoolean(props.multiple, "multiple"), placeholder: (_d = props.placeholder) !== null && _d !== void 0 ? _d : DEFAULT_PLACEHOLDER, disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), step: getNumber(props.step), value: props.value, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), max: getInputValue(props.max, props.type), min: getInputValue(props.min, props.type), readOnly: getBoolean(props.readOnly, "readOnly") ||
-                getBoolean(props.readonly, "readonly"), form: props.form, pattern: props.pattern, size: props.size, autoComplete: props.autocomplete, autoFocus: getBoolean(props.autofocus, "autofocus"), enterKeyHint: props.enterkeyhint, inputMode: props.inputmode, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), list: props.dataList && _dataListId, "aria-describedby": (_e = props.ariaDescribedBy) !== null && _e !== void 0 ? _e : _descByIds })),
-        props.dataList ? (React.createElement("datalist", { id: _dataListId }, (_f = getDataList()) === null || _f === void 0 ? void 0 : _f.map((option) => (React.createElement("option", { key: _dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null,
+                getBoolean(props.readonly, "readonly"), form: props.form, pattern: props.pattern, size: props.size, autoComplete: props.autocomplete, autoFocus: getBoolean(props.autofocus, "autofocus"), enterKeyHint: props.enterkeyhint, inputMode: props.inputmode, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), list: props.dataList && _dataListId, "aria-describedby": (_e = props.ariaDescribedBy) !== null && _e !== void 0 ? _e : _descByIds, role: ["datetime-local", "date", "time", "week", "month", "color"].includes((_f = props.type) !== null && _f !== void 0 ? _f : "") && isIOSSafari()
+                ? "textbox"
+                : undefined })),
+        props.dataList ? (React.createElement("datalist", { id: _dataListId }, (_g = getDataList()) === null || _g === void 0 ? void 0 : _g.map((option) => (React.createElement("option", { key: _dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null,
         props.children,
         stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: props.messageSize || "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
         hasValidState() ? (React.createElement(DBInfotext, { semantic: "successful", id: _validMessageId, size: props.validMessageSize || "small" }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,

package/dist/components/input/model.d.ts

@@ -43,8 +43,8 @@ export type DBInputDefaultProps = {
      */
     inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
     /**
-    * The size of the message infotext. Defaults to "small".
-    */
+     * The size of the message infotext. Defaults to "small".
+     */
     messageSize?: SizeType;
     /**
      * The size of the valid message infotext. Defaults to "small".
@@ -59,5 +59,6 @@ export type DBInputProps = DBInputDefaultProps & GlobalProps & FormTextProps & I
 export type DBInputDefaultState = {
     _dataListId?: string;
     getDataList: () => ValueLabelType[];
+    isIOSSafari: () => boolean;
 };
 export type DBInputState = DBInputDefaultState & GlobalState & InputEventState<HTMLInputElement> & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & FromValidState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "3.1.19",
+  "version": "3.1.20",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -42,7 +42,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "3.1.19",
-    "@db-ux/core-foundations": "3.1.19"
+    "@db-ux/core-components": "3.1.20",
+    "@db-ux/core-foundations": "3.1.20"
   }
 }