@db-ux/react-core-components 3.0.8 → 3.1.0

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

@@ -257,12 +257,23 @@ function DBCustomSelectFn(props, component) {
         event.preventDefault();
     }
     function handleKeyboardPress(event) {
-        var _a;
+        var _a, _b;
         event.stopPropagation();
         if (event.key === "Escape" && ((_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.open)) {
             handleClose(undefined, true);
             handleSummaryFocus();
         }
+        else if (event.key === "Enter" && ((_b = detailsRef.current) === null || _b === void 0 ? void 0 : _b.open)) {
+            // Handle Enter key to select option like Space key
+            if (self.document) {
+                const activeElement = self.document.activeElement;
+                if (["checkbox", "radio"].includes(activeElement.getAttribute("type") || "")) {
+                    // Trigger click to simulate Space key behavior
+                    activeElement.click();
+                    event.preventDefault();
+                }
+            }
+        }
         else if (event.key === "ArrowDown" ||
             event.key === "ArrowUp" ||
             event.key === "ArrowLeft" ||

package/dist/components/input/input.js

@@ -117,12 +117,12 @@ 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"), 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 })),
+                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,
         props.children,
-        stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
-        hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,
-        React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, _invalidMessage),
+        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,
+        React.createElement(DBInfotext, { semantic: "critical", id: _invalidMessageId, size: props.invalidMessageSize || "small" }, _invalidMessage),
         React.createElement("span", { "data-visually-hidden": "true", role: "status" }, _voiceOverFallback)));
 }
 const DBInput = forwardRef(DBInputFn);

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

@@ -1,4 +1,4 @@
-import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FormTextProps, FromValidState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InputEventProps, InputEventState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, ValueLabelType } from '../../shared/model';
+import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FormTextProps, FromValidState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InputEventProps, InputEventState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, SizeType, ValueLabelType } from '../../shared/model';
 export declare const InputTypeList: readonly ["color", "date", "datetime-local", "email", "file", "hidden", "month", "number", "password", "range", "search", "tel", "text", "time", "url", "week"];
 export type InputTypeType = (typeof InputTypeList)[number];
 export type DBInputDefaultProps = {
@@ -34,6 +34,26 @@ export type DBInputDefaultProps = {
      * Sets [step value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step).
      */
     step?: number | string;
+    /**
+     * Hint for the [enter key behavior](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) on virtual keyboards.
+     */
+    enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+    /**
+     * Hint for [virtual keyboard](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) selection.
+     */
+    inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /**
+    * The size of the message infotext. Defaults to "small".
+    */
+    messageSize?: SizeType;
+    /**
+     * The size of the valid message infotext. Defaults to "small".
+     */
+    validMessageSize?: SizeType;
+    /**
+     * The size of the invalid message infotext. Defaults to "small".
+     */
+    invalidMessageSize?: SizeType;
 };
 export type DBInputProps = DBInputDefaultProps & GlobalProps & FormTextProps & InputEventProps<HTMLInputElement> & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & IconProps & IconTrailingProps & FormMessageProps & ShowIconProps & IconLeadingProps & ShowIconLeadingProps & ShowIconTrailingProps & FormSizeProps;
 export type DBInputDefaultState = {

package/dist/components/select/select.js

@@ -6,7 +6,7 @@ import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LAB
 import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getOptionKey, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 import DBInfotext from "../infotext/infotext";
 function DBSelectFn(props, component) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => undefined);
     const [_messageId, set_messageId] = useState(() => undefined);
@@ -47,9 +47,12 @@ function DBSelectFn(props, component) {
         else if (stringPropVisible(props.message, props.showMessage)) {
             set_descByIds(_messageId);
         }
-        else {
+        else if (props.placeholder) {
             set_descByIds(_placeholderId);
         }
+        else {
+            set_descByIds(undefined);
+        }
     }
     function handleClick(event) {
         if (props.onClick) {
@@ -110,9 +113,12 @@ function DBSelectFn(props, component) {
             if (stringPropVisible(props.message, props.showMessage)) {
                 set_descByIds(messageId);
             }
-            else {
+            else if (props.placeholder) {
                 set_descByIds(placeholderId);
             }
+            else {
+                set_descByIds(undefined);
+            }
             handleValidation();
             setInitialized(false);
         }
@@ -123,12 +129,12 @@ function DBSelectFn(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-select", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon) }),
         React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
         React.createElement("select", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, 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"]), { required: getBoolean(props.required, "required"), disabled: getBoolean(props.disabled, "disabled"), id: _id, name: props.name, size: props.size, value: props.value, autoComplete: props.autocomplete, multiple: props.multiple, onInput: (event) => handleInput(event), onClick: (event) => handleClick(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": (_b = props.ariaDescribedBy) !== null && _b !== void 0 ? _b : _descByIds }),
-            React.createElement("option", { hidden: true }),
+            props.variant === "floating" || props.placeholder ? (React.createElement("option", { className: "placeholder", value: "" })) : null,
             ((_c = props.options) === null || _c === void 0 ? void 0 : _c.length) ? (React.createElement(React.Fragment, null, (_d = props.options) === null || _d === void 0 ? void 0 : _d.map((option) => {
                 var _a;
                 return option.options ? (React.createElement("optgroup", { label: getOptionLabel(option), key: getOptionKey(option, "select-optgroup-") }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (React.createElement("option", { value: optgroupOption.value, disabled: optgroupOption.disabled, key: getOptionKey(optgroupOption, "select-optgroup-option-") }, getOptionLabel(optgroupOption)))))) : (React.createElement("option", { value: option.value, disabled: option.disabled, key: getOptionKey(option, "select-option-") }, getOptionLabel(option)));
             }))) : (React.createElement(React.Fragment, null, props.children))),
-        React.createElement("span", { id: _placeholderId }, (_e = props.placeholder) !== null && _e !== void 0 ? _e : props.label),
+        props.placeholder ? (React.createElement("span", { id: _placeholderId }, props.placeholder)) : null,
         stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
         hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,
         React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, _invalidMessage),

package/package.json

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