@db-ux/react-core-components 4.0.4 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @db-ux/react-core-components
 
+## 4.1.0
+
+### Minor Changes
+
+- refactor(notification): update and simplify grid layout for block link variant - [see commit cb83f96](https://github.com/db-ux-design-system/core-web/commit/cb83f966eaf29c85b4cf0079750bdd563f216d6e)
+
+- fix(DBCustomSelect): properly announce selected options - [see commit 773edeb](https://github.com/db-ux-design-system/core-web/commit/773edeb943a085eb79e1c8d59059137b2830fbf0):
+  - feat(DBCustomSelect): introduce new property `selectedPrefix`
+
+### Patch Changes
+
+- fix(DBCustomSelect): automatically handle form reset events - [see commit 6af5246](https://github.com/db-ux-design-system/core-web/commit/6af5246b3b2e6febdc6ff6342ba1a8eb10184d14):
+  - An event listener is now added for every form component (input, custom-select, etc.) when a `form` property is passed.
+  - This listener detects form resets and updates the component's internal value/checked state accordingly.
+  - > **Note**: This does not work for `ngModel` in Angular.
+
+- fix(button): Replace fixed height with min-height for buttons to allow dynamic height adjustment when text wraps - [see commit d1fd2c4](https://github.com/db-ux-design-system/core-web/commit/d1fd2c4e58a5ed6f75fab44700cd2d93c7232474)
+
 ## 4.0.4
 
 ### Patch Changes

package/dist/components/checkbox/checkbox.js

@@ -4,6 +4,7 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
 import { cls, delay, getBoolean, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import { addCheckedResetEventListener, } from "../../utils/form-components";
 import DBInfotext from "../infotext/infotext";
 function DBCheckboxFn(props, component) {
     var _a;
@@ -16,6 +17,7 @@ function DBCheckboxFn(props, component) {
     const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
     const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
+    const [abortController, setAbortController] = useState(() => undefined);
     function hasValidState() {
         var _a;
         return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
@@ -49,7 +51,7 @@ function DBCheckboxFn(props, component) {
             set_descByIds(undefined);
         }
     }
-    function handleChange(event) {
+    function handleChange(event, reset) {
         if (props.onChange) {
             props.onChange(event);
         }
@@ -111,6 +113,27 @@ function DBCheckboxFn(props, component) {
             setInitialized(false);
         }
     }, [initialized, _ref.current, props.checked]);
+    useEffect(() => {
+        if (_ref.current) {
+            const defaultChecked = props.defaultChecked;
+            let controller = abortController;
+            if (!controller) {
+                controller = new AbortController();
+                setAbortController(controller);
+            }
+            addCheckedResetEventListener(_ref.current, {
+                checked: props.checked,
+                defaultChecked,
+            }, (event) => {
+                handleChange(event, true);
+            }, controller.signal);
+        }
+    }, [_ref.current]);
+    useEffect(() => {
+        return () => {
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+        };
+    }, []);
     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-checkbox", props.className), "data-size": props.size, "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-hide-label": getHideProp(props.showLabel) }),
         React.createElement("label", { htmlFor: _id },
             React.createElement("input", Object.assign({ type: "checkbox", "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"]), { id: _id, name: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), value: props.value, required: getBoolean(props.required, "required"), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": (_a = props.ariaDescribedBy) !== null && _a !== void 0 ? _a : _descByIds })),

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

@@ -7,6 +7,7 @@ import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getOptionKey,
 import { DocumentClickListener } from "../../utils/document-click-listener";
 import { DocumentScrollListener } from "../../utils/document-scroll-listener";
 import { handleFixedDropdown } from "../../utils/floating-components";
+import { addResetEventListener, } from "../../utils/form-components";
 import DBButton from "../button/button";
 import DBCustomSelectDropdown from "../custom-select-dropdown/custom-select-dropdown";
 import DBCustomSelectListItem from "../custom-select-list-item/custom-select-list-item";
@@ -35,6 +36,7 @@ function DBCustomSelectFn(props, component) {
     const [_infoTextId, set_infoTextId] = useState(() => undefined);
     const [_validity, set_validity] = useState(() => "no-validation");
     const [_userInteraction, set_userInteraction] = useState(() => false);
+    const [abortController, setAbortController] = useState(() => undefined);
     const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_selectedLabels, set_selectedLabels] = useState(() => "");
     const [_selectedLabelsId, set_selectedLabelsId] = useState(() => undefined);
@@ -69,7 +71,7 @@ function DBCustomSelectFn(props, component) {
         }
         /* For a11y reasons we need to map the correct message with the select */
         if (!((_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.validity.valid) || props.validation === "invalid") {
-            set_descByIds(_invalidMessageId);
+            setDescById(_invalidMessageId);
             set_invalidMessage(props.invalidMessage ||
                 ((_b = selectRef.current) === null || _b === void 0 ? void 0 : _b.validationMessage) ||
                 DEFAULT_INVALID_MESSAGE);
@@ -84,7 +86,7 @@ function DBCustomSelectFn(props, component) {
         else if (hasValidState() &&
             ((_d = selectRef.current) === null || _d === void 0 ? void 0 : _d.validity.valid) &&
             props.required) {
-            set_descByIds(_validMessageId);
+            setDescById(_validMessageId);
             if (hasVoiceOver()) {
                 set_voiceOverFallback((_e = props.validMessage) !== null && _e !== void 0 ? _e : DEFAULT_VALID_MESSAGE);
                 delay(() => set_voiceOverFallback(""), 1000);
@@ -92,11 +94,11 @@ function DBCustomSelectFn(props, component) {
             set_validity((_f = props.validation) !== null && _f !== void 0 ? _f : "valid");
         }
         else if (stringPropVisible(props.message, props.showMessage)) {
-            set_descByIds(_messageId);
+            setDescById(_messageId);
             set_validity((_g = props.validation) !== null && _g !== void 0 ? _g : "no-validation");
         }
         else {
-            set_descByIds(_placeholderId);
+            setDescById(_placeholderId);
             set_validity((_h = props.validation) !== null && _h !== void 0 ? _h : "no-validation");
         }
     }
@@ -547,6 +549,25 @@ function DBCustomSelectFn(props, component) {
             handleValidation();
         }
     }, [_values, selectRef.current]);
+    useEffect(() => {
+        if (selectRef.current) {
+            let controller = abortController;
+            if (!controller) {
+                controller = new AbortController();
+                setAbortController(controller);
+            }
+            const initialValues = props.values;
+            addResetEventListener(selectRef.current, () => {
+                const resetValue = initialValues
+                    ? initialValues
+                    : selectRef.current.value
+                        ? [selectRef.current.value]
+                        : [];
+                handleOptionSelected(resetValue);
+                handleValidation();
+            }, controller.signal);
+        }
+    }, [selectRef.current]);
     useEffect(() => {
         set_validity(props.validation);
     }, [props.validation]);
@@ -635,6 +656,11 @@ function DBCustomSelectFn(props, component) {
             ((_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.validationMessage) ||
             DEFAULT_INVALID_MESSAGE);
     }, [selectRef.current, props.invalidMessage]);
+    useEffect(() => {
+        return () => {
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+        };
+    }, []);
     return (React.createElement("div", Object.assign({ id: _id, 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", "onOptionSelected", "onAmountChange", "onDropdownToggle"]), 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-custom-select", props.className), "aria-invalid": _validity === "invalid", "data-custom-validity": _validity, "data-width": props.formFieldWidth, "data-variant": props.variant === "floating" &&
             props.selectedType === "tag" &&
             props.multiple
@@ -646,7 +672,9 @@ function DBCustomSelectFn(props, component) {
             props.children,
             props.options ? (React.createElement(React.Fragment, null,
                 React.createElement("summary", { className: "db-custom-select-form-field", id: _summaryId, "aria-disabled": getBooleanAsString(props.disabled), "aria-labelledby": _labelId },
-                    (_selectedLabels === null || _selectedLabels === void 0 ? void 0 : _selectedLabels.length) ? (React.createElement("span", { "data-visually-hidden": getBooleanAsString(props.selectedType === "tag"), id: _selectedLabelsId }, _selectedLabels)) : null,
+                    (_selectedLabels === null || _selectedLabels === void 0 ? void 0 : _selectedLabels.length) ? (React.createElement("span", { "data-visually-hidden": getBooleanAsString(props.selectedType === "tag"), id: _selectedLabelsId },
+                        props.selectedPrefix ? (React.createElement("span", { "data-visually-hidden": "true" }, props.selectedPrefix)) : null,
+                        _selectedLabels)) : null,
                     props.selectedType === "tag" ? (React.createElement("div", null, _selectedOptions === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.map((option, index) => (React.createElement(DBTag, { emphasis: "strong", behavior: "removable", removeButton: getTagRemoveLabel(option), onRemove: (event) => handleTagRemove(option, event), key: getOptionKey(option, "tag-") }, getOptionLabel(option)))))) : null),
                 React.createElement(DBCustomSelectDropdown, { width: props.dropdownWidth },
                     searchEnabled ? (React.createElement("div", null,

package/dist/components/custom-select/model.d.ts

@@ -140,6 +140,11 @@ export type DBCustomSelectDefaultProps = {
      * You need to define the empty state as well based on selected options.
      */
     selectedLabels?: string;
+    /**
+     * Optional: Prefix text announced by screen readers before the selection
+     * (e.g., "Ausgewählt" or "Selected").
+     */
+    selectedPrefix?: string;
     /**
      * Change the selected type for values shown in multi select
      */

package/dist/components/input/input.js

@@ -4,6 +4,7 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
 import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getInputValue, getNumber, hasVoiceOver, isArrayOfStrings, isIOSSafari, stringPropVisible, uuid, } from "../../utils";
+import { addValueResetEventListener, } from "../../utils/form-components";
 import DBInfotext from "../infotext/infotext";
 function DBInputFn(props, component) {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -17,6 +18,7 @@ function DBInputFn(props, component) {
     const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_value, set_value] = useState(() => undefined);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
+    const [abortController, setAbortController] = useState(() => undefined);
     function hasValidState() {
         var _a;
         return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
@@ -50,13 +52,13 @@ function DBInputFn(props, component) {
             set_descByIds(undefined);
         }
     }
-    function handleInput(event) {
+    function handleInput(event, reset) {
         if (props.onInput) {
             props.onInput(event);
         }
         handleValidation();
     }
-    function handleChange(event) {
+    function handleChange(event, reset) {
         if (props.onChange) {
             props.onChange(event);
         }
@@ -114,6 +116,28 @@ function DBInputFn(props, component) {
     useEffect(() => {
         set_value(props.value);
     }, [props.value]);
+    useEffect(() => {
+        if (_ref.current) {
+            const defaultValue = props.defaultValue;
+            let controller = abortController;
+            if (!controller) {
+                controller = new AbortController();
+                setAbortController(controller);
+            }
+            addValueResetEventListener(_ref.current, {
+                value: props.value,
+                defaultValue,
+            }, (event) => {
+                handleChange(event, true);
+                handleInput(event, true);
+            }, controller.signal);
+        }
+    }, [_ref.current]);
+    useEffect(() => {
+        return () => {
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+        };
+    }, []);
     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") ||

package/dist/components/notification/notification.js

@@ -16,7 +16,7 @@ function DBNotificationFn(props, component) {
             props.onClose(event);
         }
     }
-    return (React.createElement("article", Object.assign({ 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", "onClose"]), { id: props.id }, 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-notification", props.className), "aria-live": props.ariaLive, "data-semantic": props.semantic, "data-variant": props.variant, "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon), "data-link-variant": props.linkVariant }),
+    return (React.createElement("article", Object.assign({ 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", "onClose"]), { id: props.id }, 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-notification", props.className), "aria-live": props.ariaLive, "data-semantic": props.semantic, "data-variant": props.variant, "data-icon": getBoolean(props.showIcon) !== false ? props.icon : undefined, "data-show-icon": getBooleanAsString(props.showIcon), "data-link-variant": props.linkVariant }),
         React.createElement(React.Fragment, null, props.image),
         stringPropVisible(props.headline, props.showHeadline) ? (React.createElement("header", null, props.headline)) : null,
         React.createElement("p", null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),

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

@@ -1,5 +1,5 @@
-import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, InitializedState, SizeProps } from '../../shared/model';
+import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, InitializedState, InputEventProps, InputEventState, SizeProps } from '../../shared/model';
 export type DBRadioDefaultProps = {};
-export type DBRadioProps = DBRadioDefaultProps & GlobalProps & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & SizeProps;
+export type DBRadioProps = DBRadioDefaultProps & GlobalProps & InputEventProps<HTMLInputElement> & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & SizeProps;
 export type DBRadioDefaultState = {};
-export type DBRadioState = DBRadioDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & InitializedState;
+export type DBRadioState = DBRadioDefaultState & GlobalState & InputEventState<HTMLInputElement> & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & InitializedState;

package/dist/components/radio/radio.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBRadio: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, "value" | "size" | "checked" | keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | keyof import("../../shared/model").RequiredProps | "showLabel"> & import("../../shared/model").GlobalProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").FormCheckProps & import("../../shared/model").SizeProps & React.RefAttributes<any>>;
+declare const DBRadio: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, "value" | "size" | "checked" | keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | keyof import("../../shared/model").RequiredProps | "showLabel" | keyof import("../../shared/model").InputEventProps<HTMLInputElement>> & import("../../shared/model").GlobalProps & import("../../shared/model").InputEventProps<HTMLInputElement> & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").FormCheckProps & import("../../shared/model").SizeProps & React.RefAttributes<any>>;
 export default DBRadio;

package/dist/components/radio/radio.js

@@ -2,12 +2,19 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBoolean, getHideProp, uuid } from "../../utils";
+import { cls, delay, getBoolean, getHideProp, uuid } from "../../utils";
+import { addResetEventListener, } from "../../utils/form-components";
 function DBRadioFn(props, component) {
     const _ref = component || useRef(component);
     const [initialized, setInitialized] = useState(() => false);
     const [_id, set_id] = useState(() => undefined);
-    function handleChange(event) {
+    const [abortController, setAbortController] = useState(() => undefined);
+    function handleInput(event, reset) {
+        if (props.onInput) {
+            props.onInput(event);
+        }
+    }
+    function handleChange(event, reset) {
         if (props.onChange) {
             props.onChange(event);
         }
@@ -32,8 +39,35 @@ function DBRadioFn(props, component) {
             _ref.current.checked = true;
         }
     }, [initialized, _ref.current, props.checked]);
+    useEffect(() => {
+        if (_ref.current) {
+            const defaultChecked = props.defaultChecked;
+            let controller = abortController;
+            if (!controller) {
+                controller = new AbortController();
+                setAbortController(controller);
+            }
+            addResetEventListener(_ref.current, (event) => {
+                void delay(() => {
+                    const resetChecked = props.checked
+                        ? props.checked
+                        : defaultChecked
+                            ? defaultChecked
+                            : _ref.current.checked;
+                    const valueEvent = Object.assign(Object.assign({}, event), { target: Object.assign(Object.assign({}, event.target), { value: "", checked: resetChecked }) });
+                    handleChange(valueEvent, true);
+                    handleInput(valueEvent, true);
+                }, 1);
+            }, controller.signal);
+        }
+    }, [_ref.current]);
+    useEffect(() => {
+        return () => {
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+        };
+    }, []);
     return (React.createElement("label", Object.assign({ "data-size": props.size, "data-hide-label": getHideProp(props.showLabel), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk) }, 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-radio", props.className), htmlFor: _id }),
-        React.createElement("input", Object.assign({ type: "radio", "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"]), { id: _id, name: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), value: props.value, required: getBoolean(props.required, "required"), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
+        React.createElement("input", Object.assign({ type: "radio", "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"]), { id: _id, name: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), value: props.value, required: getBoolean(props.required, "required"), onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
         props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)));
 }
 const DBRadio = forwardRef(DBRadioFn);

package/dist/components/select/select.js

@@ -4,6 +4,7 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
 import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getOptionKey, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import { addValueResetEventListener, } from "../../utils/form-components";
 import DBInfotext from "../infotext/infotext";
 function DBSelectFn(props, component) {
     var _a, _b, _c, _d;
@@ -18,6 +19,7 @@ function DBSelectFn(props, component) {
     const [_value, set_value] = useState(() => "");
     const [initialized, setInitialized] = useState(() => false);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
+    const [abortController, setAbortController] = useState(() => undefined);
     function hasValidState() {
         var _a;
         return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
@@ -59,13 +61,13 @@ function DBSelectFn(props, component) {
             props.onClick(event);
         }
     }
-    function handleInput(event) {
+    function handleInput(event, reset) {
         if (props.onInput) {
             props.onInput(event);
         }
         handleValidation();
     }
-    function handleChange(event) {
+    function handleChange(event, reset) {
         if (props.onChange) {
             props.onChange(event);
         }
@@ -126,6 +128,28 @@ function DBSelectFn(props, component) {
     useEffect(() => {
         set_value(props.value);
     }, [props.value]);
+    useEffect(() => {
+        if (_ref.current) {
+            const defaultValue = props.defaultValue;
+            let controller = abortController;
+            if (!controller) {
+                controller = new AbortController();
+                setAbortController(controller);
+            }
+            addValueResetEventListener(_ref.current, {
+                value: props.value,
+                defaultValue,
+            }, (event) => {
+                handleChange(event, true);
+                handleInput(event, true);
+            }, controller.signal);
+        }
+    }, [_ref.current]);
+    useEffect(() => {
+        return () => {
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+        };
+    }, []);
     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 }),

package/dist/components/switch/switch.js

@@ -4,6 +4,7 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
 import { cls, delay, getBoolean, getBooleanAsString, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import { addCheckedResetEventListener, } from "../../utils/form-components";
 import DBInfotext from "../infotext/infotext";
 function DBSwitchFn(props, component) {
     var _a, _b, _c;
@@ -15,6 +16,7 @@ function DBSwitchFn(props, component) {
     const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
     const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
+    const [abortController, setAbortController] = useState(() => undefined);
     function hasValidState() {
         var _a;
         return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
@@ -50,7 +52,7 @@ function DBSwitchFn(props, component) {
         }
         set_descByIds(undefined);
     }
-    function handleChange(event) {
+    function handleChange(event, reset) {
         if (props.onChange) {
             props.onChange(event);
         }
@@ -85,6 +87,27 @@ function DBSwitchFn(props, component) {
         props.invalidMessage,
         props.checked,
     ]);
+    useEffect(() => {
+        if (_ref.current) {
+            const defaultChecked = props.defaultChecked;
+            let controller = abortController;
+            if (!controller) {
+                controller = new AbortController();
+                setAbortController(controller);
+            }
+            addCheckedResetEventListener(_ref.current, {
+                checked: props.checked,
+                defaultChecked,
+            }, (event) => {
+                handleChange(event, true);
+            }, controller.signal);
+        }
+    }, [_ref.current]);
+    useEffect(() => {
+        return () => {
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+        };
+    }, []);
     return (React.createElement("div", Object.assign({ "data-visual-aid": getBooleanAsString(props.visualAid), "data-size": props.size, "data-hide-label": getHideProp(props.showLabel), "data-variant": props.variant, "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-custom-validity": props.validation }, 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-switch", props.className) }),
         React.createElement("label", { htmlFor: _id },
             React.createElement("input", Object.assign({ type: "checkbox", role: "switch", id: _id, 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"]), { checked: getBoolean(props.checked, "checked"), value: props.value, disabled: getBoolean(props.disabled, "disabled"), "aria-invalid": props.validation === "invalid" ? "true" : undefined, "aria-describedby": _descByIds, name: props.name, required: getBoolean(props.required, "required"), "data-aid-icon": (_a = props.iconLeading) !== null && _a !== void 0 ? _a : props.icon, "data-aid-icon-trailing": props.iconTrailing, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),

package/dist/components/textarea/textarea.js

@@ -4,6 +4,7 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_ROWS, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
 import { cls, delay, getBoolean, getHideProp, getNumber, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import { addValueResetEventListener, } from "../../utils/form-components";
 import DBInfotext from "../infotext/infotext";
 function DBTextareaFn(props, component) {
     var _a, _b, _c, _d;
@@ -16,6 +17,7 @@ function DBTextareaFn(props, component) {
     const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_value, set_value] = useState(() => "");
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
+    const [abortController, setAbortController] = useState(() => undefined);
     function hasValidState() {
         var _a;
         return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
@@ -49,13 +51,13 @@ function DBTextareaFn(props, component) {
             set_descByIds(undefined);
         }
     }
-    function handleInput(event) {
+    function handleInput(event, reset) {
         if (props.onInput) {
             props.onInput(event);
         }
         handleValidation();
     }
-    function handleChange(event) {
+    function handleChange(event, reset) {
         if (props.onChange) {
             props.onChange(event);
         }
@@ -101,6 +103,28 @@ function DBTextareaFn(props, component) {
     useEffect(() => {
         set_value(props.value);
     }, [props.value]);
+    useEffect(() => {
+        if (_ref.current) {
+            const defaultValue = props.defaultValue;
+            let controller = abortController;
+            if (!controller) {
+                controller = new AbortController();
+                setAbortController(controller);
+            }
+            addValueResetEventListener(_ref.current, {
+                value: props.value,
+                defaultValue,
+            }, (event) => {
+                handleChange(event, true);
+                handleInput(event, true);
+            }, controller.signal);
+        }
+    }, [_ref.current]);
+    useEffect(() => {
+        return () => {
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+        };
+    }, []);
     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-textarea", props.className), "data-variant": props.variant, "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-hide-label": getHideProp(props.showLabel) }),
         React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
         React.createElement("textarea", 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, "data-resize": props.resize, "data-hide-resizer": getHideProp((_b = props.showResizer) !== null && _b !== void 0 ? _b : true), disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), readOnly: getBoolean(props.readOnly, "readOnly") ||

package/dist/shared/model.d.ts

@@ -365,6 +365,10 @@ export type FormState = {
      * This is an internal Fallback
      */
     _voiceOverFallback?: string;
+    /**
+     * We use this to remove form event listener
+     */
+    abortController?: AbortController;
 };
 export type InitializedState = {
     initialized: boolean;
@@ -461,7 +465,7 @@ export type InputEventProps<T> = {
     onInput?: (event: InputEvent<T>) => void;
 };
 export type InputEventState<T> = {
-    handleInput: (event: InputEvent<T> | any) => void;
+    handleInput: (event: InputEvent<T> | any, reset?: boolean) => void;
 };
 export type ChangeEvent<T> = React.ChangeEvent<T>;
 export type ChangeEventProps<T> = {
@@ -469,7 +473,7 @@ export type ChangeEventProps<T> = {
     onChange?: (event: ChangeEvent<T>) => void;
 };
 export type ChangeEventState<T> = {
-    handleChange: (event: ChangeEvent<T> | any) => void;
+    handleChange: (event: ChangeEvent<T> | any, reset?: boolean) => void;
 };
 export type InteractionEvent<T> = React.FocusEvent<T>;
 export type FocusEventProps<T> = {

package/dist/utils/form-components.d.ts

@@ -1,2 +1,11 @@
 export declare const handleFrameworkEventAngular: (component: any, event: any, modelValue?: string) => void;
 export declare const handleFrameworkEventVue: (emit: (event: string, ...args: any[]) => void, event: any, modelValue?: string) => void;
+export declare const addResetEventListener: (element: any, resetFunction: (event: Event) => void, signal: AbortSignal) => void;
+export declare const addCheckedResetEventListener: (element: any, props: {
+    checked?: boolean | string;
+    defaultChecked?: boolean;
+}, resetFunction: (event: any) => void, signal: AbortSignal) => void;
+export declare const addValueResetEventListener: (element: any, props: {
+    value?: string;
+    defaultValue?: string;
+}, resetFunction: (event: any) => void, signal: AbortSignal) => void;

package/dist/utils/form-components.js

@@ -1,8 +1,39 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { delay } from './index';
 export const handleFrameworkEventAngular = (component, event, modelValue = 'value') => {
     component.propagateChange(event.target[modelValue]);
+    component.writeValue(event.target[modelValue]);
 };
 export const handleFrameworkEventVue = (emit, event, modelValue = 'value') => {
     // TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
     emit(`update:${modelValue}`, event.target[modelValue]);
 };
+export const addResetEventListener = (element, resetFunction, signal) => {
+    if (element.form && !element._dbFormResetListenerAdded) {
+        element.form.addEventListener('reset', (event) => {
+            resetFunction(event);
+        }, {
+            signal
+        });
+        // Mark as added to avoid duplicate listeners
+        element._dbFormResetListenerAdded = true;
+    }
+};
+export const addCheckedResetEventListener = (element, props, resetFunction, signal) => {
+    addResetEventListener(element, (event) => {
+        void delay(() => {
+            const resetValue = props.checked ? props.checked : props.defaultChecked ? props.defaultChecked : element.checked;
+            const valueEvent = Object.assign(Object.assign({}, event), { target: Object.assign(Object.assign({}, event.target), { checked: resetValue }) });
+            resetFunction(valueEvent);
+        }, 1);
+    }, signal);
+};
+export const addValueResetEventListener = (element, props, resetFunction, signal) => {
+    addResetEventListener(element, (event) => {
+        void delay(() => {
+            const resetValue = props.value ? props.value : props.defaultValue ? props.defaultValue : element.value;
+            const valueEvent = Object.assign(Object.assign({}, event), { target: Object.assign(Object.assign({}, event.target), { value: resetValue }) });
+            resetFunction(valueEvent);
+        }, 1);
+    }, signal);
+};

package/package.json

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