@db-ux/react-core-components 4.3.1 → 4.3.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @db-ux/react-core-components
 
+## 4.3.2
+
+### Patch Changes
+
+- fix(input): add missing `accept` attribute for file inputs - [see commit d74707d](https://github.com/db-ux-design-system/core-web/commit/d74707d17045a0efb182856e9a3db192a4d6e2fa)
+
+- fix: rendering issue with drawer and sub-navigation when user has `prefers-reduced-motion: reduce` - [see commit cd23ff2](https://github.com/db-ux-design-system/core-web/commit/cd23ff2da5fa8a11121c3195467b4b4c0ab2ebb6)
+
+- fix(customselect): select last remaining result with enter key - [see commit cc6a445](https://github.com/db-ux-design-system/core-web/commit/cc6a445c523cc196b9c93584c62772ba9864996f)
+
 ## 4.3.1
 
 ### Patch Changes

package/dist/components/custom-select/custom-select.js

@@ -296,6 +296,14 @@ function DBCustomSelectFn(props, component) {
                     activeElement.click();
                     event.preventDefault();
                 }
+                else if (activeElement.getAttribute("type") === "search") {
+                    // When Enter is pressed in search field, select the first available option
+                    const firstOption = _options === null || _options === void 0 ? void 0 : _options.find((opt) => !opt.isGroupTitle && !opt.disabled);
+                    if (firstOption === null || firstOption === void 0 ? void 0 : firstOption.value) {
+                        handleSelect(firstOption.value);
+                        event.preventDefault();
+                    }
+                }
             }
         }
         else if (event.key === "ArrowDown" ||

package/dist/components/drawer/drawer.js

@@ -43,7 +43,7 @@ function DBDrawerFn(props, component) {
             const open = Boolean(props.open);
             if (open && !_ref.current.open) {
                 if (dialogContainerRef.current) {
-                    dialogContainerRef.current.hidden = false;
+                    dialogContainerRef.current.removeAttribute("data-transition");
                 }
                 if (props.position === "absolute" ||
                     props.backdrop === "none" ||
@@ -53,16 +53,19 @@ function DBDrawerFn(props, component) {
                 else {
                     _ref.current.showModal();
                 }
+                void delay(() => {
+                    if (dialogContainerRef.current) {
+                        dialogContainerRef.current.dataset["transition"] = "open";
+                    }
+                }, 1);
             }
             if (!open && _ref.current.open) {
                 if (dialogContainerRef.current) {
-                    dialogContainerRef.current.hidden = true;
+                    dialogContainerRef.current.dataset["transition"] =
+                        "close";
                 }
-                delay(() => {
+                void delay(() => {
                     var _a;
-                    if (dialogContainerRef.current) {
-                        dialogContainerRef.current.hidden = false;
-                    }
                     (_a = _ref.current) === null || _a === void 0 ? void 0 : _a.close();
                 }, 401);
             }

package/dist/components/input/input.js

@@ -145,7 +145,7 @@ 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: getStep(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") ||
+        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"), accept: props.accept, placeholder: (_d = props.placeholder) !== null && _d !== void 0 ? _d : DEFAULT_PLACEHOLDER, disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), step: getStep(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, role: ["datetime-local", "date", "time", "week", "month", "color"].includes((_f = props.type) !== null && _f !== void 0 ? _f : "") && isIOSSafari()
                 ? "textbox"
                 : undefined })),

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

@@ -14,6 +14,10 @@ export type DBInputDefaultProps = {
      * Allow selecting multiple files. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file#multiple
      */
     multiple?: boolean | string;
+    /**
+     * Specifies the types of files that the server accepts (for type="file"). https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
+     */
+    accept?: string;
     /**
      * Maximum value
      */

package/package.json

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