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

package/CHANGELOG.md

@@ -0,0 +1,55 @@
+# @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
+
+- fix(DBTabs): ensure navigation arrows appear correctly on window resize - [see commit 4e65e00](https://github.com/db-ux-design-system/core-web/commit/4e65e00d280cae18baee03b5a7a9b13eec063835):
+  - This update resolves an issue where navigation arrows in DBTabs would not appear or update correctly when the window was resized. The component now properly responds to resize events, ensuring arrows are always shown or hidden as needed.
+
+- fix(select): jumping placeholder for label above - [see commit 7ed8d22](https://github.com/db-ux-design-system/core-web/commit/7ed8d2225102e0e9044437e95917e11eef4bc73f)
+
+- enabled [`@db-ux/agent-cli`](https://www.npmjs.com/package/@db-ux/agent-cli) for every package - [see commit 0233048](https://github.com/db-ux-design-system/core-web/commit/023304869e61f5a506dca66a22d69e5f3d70f4d0):
+  - auto-generate/auto-update `.github/copilot-instructions.md`, to ensure GitHub Copilot uses DB UX Components for code generation
+
+## 3.1.17
+
+### Patch Changes
+
+- 0c20c00: fix: color mode for textarea resizer control set by color-mode-switch documentation UI component
+- 0c20c00: refactor: enabling `hidden` HTML attribute in every context in which we need to set overwriting styling declarations (`display`)
+- Updated dependencies [0c20c00]
+- Updated dependencies [0c20c00]
+  - @db-ux/core-components@3.1.17
+  - @db-ux/core-foundations@3.1.17
+
+## 3.1.16
+
+### Patch Changes
+
+- a28eb71: fix(custom-select): keyboard navigation for option groups in single-select mode:
+  - Fixes a keyboard accessibility issue where users could not navigate to options in subsequent option groups using arrow keys in single-select mode.
+  - Now, all options are accessible via keyboard regardless of group boundaries.
+- a28eb71: fix: JS framework core-components packages are missing `@db-ux` dependencies
+- Updated dependencies [a28eb71]
+- Updated dependencies [a28eb71]
+  - @db-ux/core-components@3.1.16
+  - @db-ux/core-foundations@3.1.16
+
+## 3.1.15
+
+### Patch Changes
+
+- 262964b: fix(Switch): double event firing with Angular signals
+- 262964b: fix(CustomSelect): tags remaining visible when form values are reset
+- 262964b: fix(CustomSelect): custom removeTagsTexts are not applied correctly

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.18",
+  "version": "3.1.20",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -19,6 +19,7 @@
     "build": "npm-run-all tsc",
     "mv:dist": "cpr dist ../../build-outputs/react/dist --overwrite",
     "mv:agent": "cpr agent ../../build-outputs/react/agent --overwrite",
+    "mv:changelog": "cpr CHANGELOG.md ../../build-outputs/react/CHANGELOG.md --overwrite",
     "mv:package.json": "cpr package.json ../../build-outputs/react/package.json --overwrite",
     "mv:readme": "cpr README.md ../../build-outputs/react/README.md --overwrite",
     "open:report": "npx playwright show-report",
@@ -41,7 +42,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "3.1.18",
-    "@db-ux/core-foundations": "3.1.18"
+    "@db-ux/core-components": "3.1.20",
+    "@db-ux/core-foundations": "3.1.20"
   }
 }