@db-ux/react-core-components 2.0.0-0-6589a60 → 2.0.0

package/dist/components/accordion/accordion.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBAccordion: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLUListElement>, keyof import("../..").GlobalProps | keyof import("./model").DBAccordionDefaultProps> & import("./model").DBAccordionDefaultProps & import("../..").GlobalProps & React.RefAttributes<HTMLUListElement>>;
+declare const DBAccordion: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | keyof import("./model").DBAccordionDefaultProps> & import("./model").DBAccordionDefaultProps & import("../..").GlobalProps & React.RefAttributes<any>>;
 export default DBAccordion;

package/dist/components/accordion/accordion.js

@@ -12,12 +12,12 @@ function DBAccordionFn(props, component) {
     const [_name, set_name] = useState(() => "");
     const [initialized, setInitialized] = useState(() => false);
     const [_initOpenIndexDone, set_initOpenIndexDone] = useState(() => false);
-    function convertItems(items) {
+    function convertItems() {
         try {
-            if (typeof items === "string") {
-                return JSON.parse(items);
+            if (typeof props.items === "string") {
+                return JSON.parse(props.items);
             }
-            return items;
+            return props.items;
         }
         catch (error) {
             console.error(error);
@@ -59,23 +59,22 @@ function DBAccordionFn(props, component) {
                         details.removeAttribute("name");
                     }
                     else {
-                        details.name = _name;
+                        details.name = _name !== null && _name !== void 0 ? _name : "";
                     }
                 }
             }
         }
     }, [_ref.current, _name]);
     useEffect(() => {
-        var _a;
         if (_ref.current && _initOpenIndexDone) {
-            if ((props === null || props === void 0 ? void 0 : props.initOpenIndex) && ((_a = props.initOpenIndex) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            if ((props === null || props === void 0 ? void 0 : props.initOpenIndex) && props.initOpenIndex.length > 0) {
                 const childDetails = _ref.current.getElementsByTagName("details");
                 if (childDetails) {
                     const initOpenIndex = props.behavior === "single" && props.initOpenIndex.length > 1
                         ? [props.initOpenIndex[0]] // use only one index for behavior=single
                         : props.initOpenIndex;
                     Array.from(childDetails).forEach((details, index) => {
-                        if (initOpenIndex.includes(index)) {
+                        if (initOpenIndex === null || initOpenIndex === void 0 ? void 0 : initOpenIndex.includes(index)) {
                             details.open = true;
                         }
                     });
@@ -86,7 +85,7 @@ function DBAccordionFn(props, component) {
     }, [_ref.current, _initOpenIndexDone, props.initOpenIndex]);
     return (React.createElement("ul", 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"]), { id: _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-accordion", props.className), "data-variant": props.variant }),
         !props.items ? React.createElement(React.Fragment, null, props.children) : null,
-        props.items ? (React.createElement(React.Fragment, null, (_a = convertItems(props.items)) === null || _a === void 0 ? void 0 : _a.map((item, index) => (React.createElement(DBAccordionItem, { key: `accordion-item-${index}`, headlinePlain: item.headlinePlain, disabled: item.disabled, text: item.text }))))) : null));
+        props.items ? (React.createElement(React.Fragment, null, (_a = convertItems()) === null || _a === void 0 ? void 0 : _a.map((item, index) => (React.createElement(DBAccordionItem, { key: `accordion-item-${index}`, headlinePlain: item.headlinePlain, disabled: item.disabled, text: item.text }))))) : null));
 }
 const DBAccordion = forwardRef(DBAccordionFn);
 export default DBAccordion;

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

@@ -35,7 +35,7 @@ export type DBAccordionDefaultProps = {
 export type DBAccordionProps = DBAccordionDefaultProps & GlobalProps;
 export type DBAccordionDefaultState = {
     _initOpenIndexDone: boolean;
-    _name: string;
-    convertItems: (items?: unknown[] | string) => DBAccordionItemDefaultProps[];
+    _name?: string;
+    convertItems: () => DBAccordionItemDefaultProps[];
 };
 export type DBAccordionState = DBAccordionDefaultState & GlobalState & InitializedState;

package/dist/components/accordion-item/accordion-item.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
-declare const DBAccordionItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDetailsElement>, "text" | "disabled" | "onToggle" | keyof import("../../shared/model").GlobalProps | "headline" | "defaultOpen" | "headlinePlain"> & {
+declare const DBAccordionItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "name" | "text" | "disabled" | keyof import("../../shared/model").GlobalProps | "headline" | keyof import("../../shared/model").ToggleEventProps | "defaultOpen" | "headlinePlain"> & {
     defaultOpen?: boolean;
-    disabled?: boolean;
+    disabled?: boolean | string;
     headline?: any;
     headlinePlain?: string;
-} & import("../../shared/model").TextProps & import("../../shared/model").GlobalProps & import("../../shared/model").ToggleEventProps & React.RefAttributes<HTMLDetailsElement>>;
+} & import("../../shared/model").TextProps & import("../../shared/model").GlobalProps & import("../../shared/model").ToggleEventProps & import("../../shared/model").NameProps & React.RefAttributes<any>>;
 export default DBAccordionItem;

package/dist/components/accordion-item/accordion-item.js

@@ -8,7 +8,20 @@ function DBAccordionItemFn(props, component) {
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => DEFAULT_ID);
     const [_open, set_open] = useState(() => false);
-    function toggle(event) {
+    const [_name, set_name] = useState(() => undefined);
+    const [initialized, setInitialized] = useState(() => false);
+    function handleNameAttribute() {
+        if (_ref.current) {
+            const setAttribute = _ref.current.setAttribute;
+            _ref.current.setAttribute = (attribute, value) => {
+                setAttribute.call(_ref.current, attribute, value);
+                if (attribute === "name") {
+                    set_name(value);
+                }
+            };
+        }
+    }
+    function handleToggle(event) {
         // We need this for react https://github.com/facebook/react/issues/15486#issuecomment-488028431
         event === null || event === void 0 ? void 0 : event.preventDefault();
         const newStateOpen = !_open;
@@ -22,10 +35,21 @@ function DBAccordionItemFn(props, component) {
         if (props.defaultOpen) {
             set_open(props.defaultOpen);
         }
+        setInitialized(true);
     }, []);
+    useEffect(() => {
+        if (_ref.current && initialized) {
+            handleNameAttribute();
+        }
+    }, [_ref.current, initialized]);
+    useEffect(() => {
+        if (props.name) {
+            set_name(props.name);
+        }
+    }, [props.name]);
     return (React.createElement("li", Object.assign({ id: _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-accordion-item", props.className) }),
-        React.createElement("details", Object.assign({ "aria-disabled": getBooleanAsString(props.disabled), 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", "onToggle"]), { open: _open }),
-            React.createElement("summary", { onClick: (event) => toggle(event) },
+        React.createElement("details", Object.assign({ "aria-disabled": getBooleanAsString(props.disabled), 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", "onToggle"]), { name: _name, open: _open }),
+            React.createElement("summary", { onClick: (event) => handleToggle(event) },
                 props.headlinePlain ? React.createElement(React.Fragment, null, props.headlinePlain) : null,
                 !props.headlinePlain ? React.createElement(React.Fragment, null, props.headline) : null),
             React.createElement("div", null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)))));

package/dist/components/accordion-item/model.d.ts

@@ -1,4 +1,4 @@
-import { GlobalProps, GlobalState, TextProps, ToggleEventProps, ToggleEventState } from '../../shared/model';
+import { GlobalProps, GlobalState, InitializedState, NameProps, NameState, TextProps, ToggleEventProps, ToggleEventState } from '../../shared/model';
 export type DBAccordionItemDefaultProps = {
     /**
      * Initial state for the accordion item
@@ -7,7 +7,7 @@ export type DBAccordionItemDefaultProps = {
     /**
      * The disabled attribute can be set to keep a user from clicking on the element.
      */
-    disabled?: boolean;
+    disabled?: boolean | string;
     /**
      * Title of the accordion-item as slot
      */
@@ -17,8 +17,8 @@ export type DBAccordionItemDefaultProps = {
      */
     headlinePlain?: string;
 } & TextProps;
-export type DBAccordionItemProps = DBAccordionItemDefaultProps & GlobalProps & ToggleEventProps;
+export type DBAccordionItemProps = DBAccordionItemDefaultProps & GlobalProps & ToggleEventProps & NameProps;
 export type DBAccordionItemDefaultState = {
-    _open: boolean;
+    _open?: boolean;
 };
-export type DBAccordionItemState = DBAccordionItemDefaultState & GlobalState & ToggleEventState<HTMLElement>;
+export type DBAccordionItemState = DBAccordionItemDefaultState & GlobalState & ToggleEventState<HTMLElement> & InitializedState & NameState;

package/dist/components/badge/badge.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBBadge: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement>, "text" | "size" | keyof import("../..").GlobalProps | "semantic" | keyof import("./model").DBBadgeDefaultProps | "emphasis"> & import("./model").DBBadgeDefaultProps & import("../..").GlobalProps & import("../..").SemanticProps & import("../..").SizeProps & import("../..").TagEmphasisProps & import("../..").TextProps & React.RefAttributes<HTMLSpanElement>>;
+declare const DBBadge: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "text" | "size" | keyof import("../..").GlobalProps | "semantic" | keyof import("./model").DBBadgeDefaultProps | "emphasis"> & import("./model").DBBadgeDefaultProps & import("../..").GlobalProps & import("../..").SemanticProps & import("../..").SizeProps & import("../..").EmphasisProps & import("../..").TextProps & React.RefAttributes<any>>;
 export default DBBadge;

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

@@ -1,4 +1,4 @@
-import { GlobalProps, GlobalState, InitializedState, SemanticProps, SizeProps, TagEmphasisProps, TextProps } from '../../shared/model';
+import { GlobalProps, GlobalState, InitializedState, SemanticProps, SizeProps, EmphasisProps, TextProps } from '../../shared/model';
 export declare const BadgePlacementList: readonly ["inline", "corner-top-left", "corner-top-right", "corner-center-left", "corner-center-right", "corner-bottom-left", "corner-bottom-right"];
 export type BadgePlacementType = (typeof BadgePlacementList)[number];
 export type DBBadgeDefaultProps = {
@@ -11,6 +11,6 @@ export type DBBadgeDefaultProps = {
      */
     label?: string;
 };
-export type DBBadgeProps = DBBadgeDefaultProps & GlobalProps & SemanticProps & SizeProps & TagEmphasisProps & TextProps;
+export type DBBadgeProps = DBBadgeDefaultProps & GlobalProps & SemanticProps & SizeProps & EmphasisProps & TextProps;
 export type DBBadgeDefaultState = {};
 export type DBBadgeState = DBBadgeDefaultState & GlobalState & InitializedState;

package/dist/components/brand/brand.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBBrand: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "text" | "icon" | keyof import("../..").GlobalProps | "showIcon" | "hideLogo"> & import("./model").DBBrandDefaultProps & import("../..").GlobalProps & import("../..").IconProps & import("../..").ShowIconProps & import("../..").TextProps & React.RefAttributes<HTMLDivElement>>;
+declare const DBBrand: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "text" | "icon" | keyof import("../..").GlobalProps | "showIcon" | "hideLogo"> & import("./model").DBBrandDefaultProps & import("../..").GlobalProps & import("../..").IconProps & import("../..").ShowIconProps & import("../..").TextProps & React.RefAttributes<any>>;
 export default DBBrand;

package/dist/components/button/button.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "width" | "text" | "size" | "icon" | "onClick" | keyof import("./model").DBButtonDefaultProps | keyof import("../../shared/model").GlobalProps | "showIcon"> & import("./model").DBButtonDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLButtonElement> & import("../../shared/model").IconProps & import("../../shared/model").WidthProps & import("../../shared/model").SizeProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DBButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<any>, "width" | "text" | "size" | "icon" | "onClick" | keyof import("./model").DBButtonDefaultProps | keyof import("../../shared/model").GlobalProps | "showIcon"> & import("./model").DBButtonDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLButtonElement> & import("../../shared/model").IconProps & import("../../shared/model").WidthProps & import("../../shared/model").SizeProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
 export default DBButton;

package/dist/components/button/button.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
-import { cls, getBooleanAsString, getHideProp } from "../../utils";
+import { cls, getBoolean, getBooleanAsString, getHideProp } from "../../utils";
 function DBButtonFn(props, component) {
     const _ref = component || useRef(component);
     function handleClick(event) {
@@ -10,7 +10,7 @@ function DBButtonFn(props, component) {
             props.onClick(event);
         }
     }
-    return (React.createElement("button", 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"]), { 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-button", props.className), type: props.type || "button", disabled: props.disabled, "aria-label": props.label, "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon), "data-size": props.size, "data-state": props.state, "data-width": props.width, "data-variant": props.variant, "data-no-text": getBooleanAsString(props.noText), name: props.name, value: props.value, "aria-describedby": props.describedbyid, "aria-expanded": props.ariaexpanded, "aria-pressed": props.ariapressed, onClick: (event) => handleClick(event) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
+    return (React.createElement("button", 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"]), { 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-button", props.className), type: props.type || "button", disabled: getBoolean(props.disabled, "disabled"), "aria-label": props.label, "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon), "data-size": props.size, "data-state": props.state, "data-width": props.width, "data-variant": props.variant, "data-no-text": getBooleanAsString(props.noText), name: props.name, form: props.form, value: props.value, "aria-describedby": props.describedbyid, "aria-expanded": props.ariaexpanded, "aria-pressed": props.ariapressed, onClick: (event) => handleClick(event) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
 }
 const DBButton = forwardRef(DBButtonFn);
 export default DBButton;

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

@@ -17,11 +17,11 @@ export type DBButtonDefaultProps = {
     /**
      * The disabled attribute can be set to [keep a user from clicking on the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled).
      */
-    disabled?: boolean;
+    disabled?: boolean | string;
     /**
-     * Define the text next to the icon specified via the icon Property to get hidden.
+     * 	Associates the control with a form element
      */
-    noText?: boolean;
+    form?: string;
     /**
      * The label represents the [aria-label attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) value of the button
      */
@@ -30,6 +30,14 @@ export type DBButtonDefaultProps = {
      * The name attribute specifies a [name attributes value](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#name) for the button.
      */
     name?: string;
+    /**
+     * Define the text next to the icon specified via the icon Property to get hidden.
+     */
+    noText?: boolean | string;
+    /**
+     * Show loading progress inside button.
+     */
+    state?: ButtonStateType;
     /**
      * The type attribute specifies the [type of button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type).
      */
@@ -38,10 +46,6 @@ export type DBButtonDefaultProps = {
      * The value attribute specifies an initial [value for the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value).
      */
     value?: string;
-    /**
-     * Show loading progress inside button.
-     */
-    state?: ButtonStateType;
     /**
      * Variant of the button. Use only 1 primary button on a page as CTA otherwise use one of the adaptive buttons.
      */

package/dist/components/card/card.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBCard: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "spacing" | "onClick" | keyof import("../../shared/model").GlobalProps | keyof import("./model").DBCardDefaultProps> & import("./model").DBCardDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLElement> & import("../../shared/model").SpacingProps & React.RefAttributes<HTMLDivElement>>;
+declare const DBCard: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "spacing" | "onClick" | keyof import("../../shared/model").GlobalProps | keyof import("./model").DBCardDefaultProps> & import("./model").DBCardDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLElement> & import("../../shared/model").SpacingProps & React.RefAttributes<any>>;
 export default DBCard;

package/dist/components/checkbox/checkbox.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBCheckbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "checked" | keyof import("../../shared/model").GlobalProps | "indeterminate" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").FormProps | keyof import("../../shared/model").FormMessageProps> & import("./model").DBCheckboxDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").FormProps & import("../../shared/model").FormCheckProps & import("../../shared/model").FormMessageProps & import("../../shared/model").SizeProps & React.RefAttributes<HTMLInputElement>>;
+declare const DBCheckbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, "required" | "value" | "size" | "checked" | keyof import("../../shared/model").GlobalProps | "indeterminate" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | "showLabel" | keyof import("../../shared/model").FormMessageProps> & import("./model").DBCheckboxDefaultProps & 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").FormMessageProps & import("../../shared/model").SizeProps & React.RefAttributes<any>>;
 export default DBCheckbox;

package/dist/components/checkbox/checkbox.js

@@ -4,38 +4,40 @@ 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 DBInfotext from "../infotext/infotext";
-import { cls, delay, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import { cls, delay, getBoolean, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 function DBCheckboxFn(props, component) {
-    var _a, _b, _c, _d;
     const _ref = component || useRef(component);
     const [initialized, setInitialized] = useState(() => false);
     const [_id, set_id] = useState(() => undefined);
     const [_messageId, set_messageId] = useState(() => undefined);
     const [_validMessageId, set_validMessageId] = useState(() => undefined);
     const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
+    const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
     const [_descByIds, set_descByIds] = useState(() => "");
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
-    function handleChange(event) {
-        var _a, _b, _c, _d, _e, _f;
-        if (props.onChange) {
-            props.onChange(event);
-        }
-        if (props.change) {
-            props.change(event);
-        }
+    function hasValidState() {
+        var _a;
+        return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
+    }
+    function handleValidation() {
+        var _a, _b, _c, _d;
         /* For a11y reasons we need to map the correct message with the checkbox */
         if (!((_a = _ref.current) === null || _a === void 0 ? void 0 : _a.validity.valid) || props.validation === "invalid") {
             set_descByIds(_invalidMessageId);
+            set_invalidMessage(props.invalidMessage ||
+                ((_b = _ref.current) === null || _b === void 0 ? void 0 : _b.validationMessage) ||
+                DEFAULT_INVALID_MESSAGE);
             if (hasVoiceOver()) {
-                set_voiceOverFallback((_d = (_b = props.invalidMessage) !== null && _b !== void 0 ? _b : (_c = _ref.current) === null || _c === void 0 ? void 0 : _c.validationMessage) !== null && _d !== void 0 ? _d : DEFAULT_INVALID_MESSAGE);
+                set_voiceOverFallback(_invalidMessage);
                 delay(() => set_voiceOverFallback(""), 1000);
             }
         }
-        else if (props.validation === "valid" ||
-            (((_e = _ref.current) === null || _e === void 0 ? void 0 : _e.validity.valid) && props.required)) {
+        else if (hasValidState() &&
+            ((_c = _ref.current) === null || _c === void 0 ? void 0 : _c.validity.valid) &&
+            props.required) {
             set_descByIds(_validMessageId);
             if (hasVoiceOver()) {
-                set_voiceOverFallback((_f = props.validMessage) !== null && _f !== void 0 ? _f : DEFAULT_VALID_MESSAGE);
+                set_voiceOverFallback((_d = props.validMessage) !== null && _d !== void 0 ? _d : DEFAULT_VALID_MESSAGE);
                 delay(() => set_voiceOverFallback(""), 1000);
             }
         }
@@ -46,21 +48,21 @@ function DBCheckboxFn(props, component) {
             set_descByIds("");
         }
     }
+    function handleChange(event) {
+        if (props.onChange) {
+            props.onChange(event);
+        }
+        handleValidation();
+    }
     function handleBlur(event) {
         if (props.onBlur) {
             props.onBlur(event);
         }
-        if (props.blur) {
-            props.blur(event);
-        }
     }
     function handleFocus(event) {
         if (props.onFocus) {
             props.onFocus(event);
         }
-        if (props.focus) {
-            props.focus(event);
-        }
     }
     useEffect(() => {
         var _a;
@@ -70,7 +72,14 @@ function DBCheckboxFn(props, component) {
         set_messageId(mId + DEFAULT_MESSAGE_ID_SUFFIX);
         set_validMessageId(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
         set_invalidMessageId(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
+        set_invalidMessage(props.invalidMessage || DEFAULT_INVALID_MESSAGE);
     }, []);
+    useEffect(() => {
+        var _a;
+        set_invalidMessage(props.invalidMessage ||
+            ((_a = _ref.current) === null || _a === void 0 ? void 0 : _a.validationMessage) ||
+            DEFAULT_INVALID_MESSAGE);
+    }, [_ref.current, props.invalidMessage]);
     useEffect(() => {
         if (_id) {
             const messageId = _id + DEFAULT_MESSAGE_ID_SUFFIX;
@@ -87,7 +96,7 @@ function DBCheckboxFn(props, component) {
             if (props.indeterminate !== undefined) {
                 // When indeterminate is set, the value of the checked prop only impacts the form submitted values.
                 // It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)
-                _ref.current.indeterminate = props.indeterminate;
+                _ref.current.indeterminate = !!getBoolean(props.indeterminate);
             }
         }
     }, [initialized, _ref.current, props.indeterminate]);
@@ -95,18 +104,18 @@ function DBCheckboxFn(props, component) {
         if (initialized && _ref.current) {
             // in angular this must be set via native element
             if (props.checked != undefined) {
-                _ref.current.checked = props.checked;
+                _ref.current.checked = !!getBoolean(props.checked);
             }
             setInitialized(false);
         }
     }, [initialized, _ref.current, props.checked]);
     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-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: props.checked, disabled: props.disabled, value: props.value, required: props.required, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": _descByIds })),
+            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": _descByIds })),
             props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)),
         stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
-        React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, (_a = props.validMessage) !== null && _a !== void 0 ? _a : DEFAULT_VALID_MESSAGE),
-        React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, (_d = (_b = props.invalidMessage) !== null && _b !== void 0 ? _b : (_c = _ref.current) === null || _c === void 0 ? void 0 : _c.validationMessage) !== null && _d !== void 0 ? _d : DEFAULT_INVALID_MESSAGE),
+        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),
         React.createElement("span", { "data-visually-hidden": "true", role: "status" }, _voiceOverFallback)));
 }
 const DBCheckbox = forwardRef(DBCheckboxFn);

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

@@ -1,10 +1,10 @@
-import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormMessageProps, FormProps, FormState, GlobalProps, GlobalState, InitializedState, SizeProps } from '../../shared/model';
+import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormMessageProps, FormProps, FormState, FromValidState, GlobalProps, GlobalState, InitializedState, SizeProps } from '../../shared/model';
 export type DBCheckboxDefaultProps = {
     /**
      * Define an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#indeterminate) state of a checkbox
      */
-    indeterminate?: boolean;
+    indeterminate?: boolean | string;
 };
 export type DBCheckboxProps = DBCheckboxDefaultProps & GlobalProps & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & FormMessageProps & SizeProps;
 export type DBCheckboxDefaultState = {};
-export type DBCheckboxState = DBCheckboxDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & InitializedState;
+export type DBCheckboxState = DBCheckboxDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & InitializedState & FromValidState;

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

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBCustomSelect: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "required" | "icon" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | "showLabel" | keyof import("../../shared/model").FormMessageProps | keyof import("./model").DBCustomSelectDefaultProps | keyof import("./model").DBCustomSelectEvents> & import("../../shared/model").GlobalProps & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").FormMessageProps & import("./model").DBCustomSelectDefaultProps & import("./model").DBCustomSelectEvents & import("../../shared/model").IconProps & import("../../shared/model").ShowIconProps & import("../../shared/model").ShowLabelProps & React.RefAttributes<any>>;
+export default DBCustomSelect;