@db-ux/react-core-components 4.4.3 → 4.5.0

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

@@ -4,7 +4,7 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { cls, getBoolean, getBooleanAsString } from "../../utils";
 function DBTabItemFn(props, component) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     const _ref = component || useRef(component);
     const [_selected, set_selected] = useState(() => false);
     const [_name, set_name] = useState(() => undefined);
@@ -69,8 +69,8 @@ function DBTabItemFn(props, component) {
         };
     }, []);
     return (React.createElement("li", Object.assign({ role: "none" }, 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", "data-density"]), { className: cls("db-tab-item", props.className) }),
-        React.createElement("label", { htmlFor: props.id, "data-icon": (_a = props.iconLeading) !== null && _a !== void 0 ? _a : props.icon, "data-icon-trailing": props.iconTrailing, "data-show-icon": getBooleanAsString((_b = props.showIconLeading) !== null && _b !== void 0 ? _b : props.showIcon), "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing), "data-no-text": getBooleanAsString(props.noText) },
-            React.createElement("input", Object.assign({ type: "radio", role: "tab", disabled: getBoolean(props.disabled, "disabled"), "aria-selected": _selected, checked: getBoolean(props.checked, "checked"), 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", "data-density"]), { name: _name, id: props.id, onInput: (event) => handleChange(event) })),
+        React.createElement("label", { htmlFor: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": (_c = props.iconLeading) !== null && _c !== void 0 ? _c : props.icon, "data-icon-trailing": props.iconTrailing, "data-show-icon": getBooleanAsString((_d = props.showIconLeading) !== null && _d !== void 0 ? _d : props.showIcon), "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing), "data-no-text": getBooleanAsString(props.noText) },
+            React.createElement("input", Object.assign({ type: "radio", role: "tab", disabled: getBoolean(props.disabled, "disabled"), "aria-selected": _selected, checked: getBoolean(props.checked, "checked"), 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", "data-density"]), { name: _name, id: (_e = props.id) !== null && _e !== void 0 ? _e : (_f = props.propOverrides) === null || _f === void 0 ? void 0 : _f.id, onInput: (event) => handleChange(event) })),
             props.label ? React.createElement(React.Fragment, null, props.label) : null,
             props.children)));
 }

package/dist/components/tab-list/tab-list.js

@@ -4,8 +4,9 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
 import { cls } from "../../utils";
 function DBTabListFn(props, component) {
+    var _a, _b;
     const _ref = component || useRef(component);
-    return (React.createElement("div", 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", "data-density"]), { 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", "data-density"]), { className: cls("db-tab-list", props.className) }),
+    return (React.createElement("div", 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", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.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", "data-density"]), { className: cls("db-tab-list", props.className) }),
         React.createElement("ul", { role: "tablist" }, props.children)));
 }
 const DBTabList = forwardRef(DBTabListFn);

package/dist/components/tab-panel/tab-panel.js

@@ -4,9 +4,10 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, useEffect, forwardRef } from "react";
 import { cls } from "../../utils";
 function DBTabPanelFn(props, component) {
+    var _a, _b;
     const _ref = component || useRef(component);
     useEffect(() => { }, []);
-    return (React.createElement("section", Object.assign({ role: "tabpanel", 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", "data-density"]), 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", "data-density"]), { className: cls("db-tab-panel", props.className), id: props.id }),
+    return (React.createElement("section", Object.assign({ role: "tabpanel", 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", "data-density"]), 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", "data-density"]), { className: cls("db-tab-panel", props.className), id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }),
         props.content ? React.createElement(React.Fragment, null, props.content) : null,
         props.children));
 }

package/dist/components/tabs/tabs.js

@@ -9,7 +9,7 @@ import DBTabList from "../tab-list/tab-list";
 import DBTabPanel from "../tab-panel/tab-panel";
 import { useId } from "react";
 function DBTabsFn(props, component) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const uuid = useId();
     const _ref = component || useRef(component);
     const [_name, set_name] = useState(() => "");
@@ -168,11 +168,11 @@ function DBTabsFn(props, component) {
             set_resizeObserver(undefined);
         };
     }, []);
-    return (React.createElement("div", 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", "data-density", "onTabSelect", "onIndexChange"]), { 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", "data-density"]), { className: cls("db-tabs", props.className), "data-orientation": props.orientation, "data-scroll-behavior": props.behavior, "data-alignment": (_a = props.alignment) !== null && _a !== void 0 ? _a : "start", "data-width": (_b = props.width) !== null && _b !== void 0 ? _b : "auto", onInput: (event) => handleChange(event), onChange: (event) => handleChange(event) }),
+    return (React.createElement("div", 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", "data-density", "onTabSelect", "onIndexChange"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.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", "data-density"]), { className: cls("db-tabs", props.className), "data-orientation": props.orientation, "data-scroll-behavior": props.behavior, "data-alignment": (_c = props.alignment) !== null && _c !== void 0 ? _c : "start", "data-width": (_d = props.width) !== null && _d !== void 0 ? _d : "auto", onInput: (event) => handleChange(event), onChange: (event) => handleChange(event) }),
         showScrollLeft ? (React.createElement(DBButton, { className: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: (event) => scroll(true) }, "Scroll left")) : null,
         props.tabs ? (React.createElement(React.Fragment, null,
-            React.createElement(DBTabList, null, (_c = convertTabs()) === null || _c === void 0 ? void 0 : _c.map((tab, index) => (React.createElement(DBTabItem, { key: props.name + "tab-item" + index, active: tab.active, label: tab.label, iconTrailing: tab.iconTrailing, icon: tab.icon, noText: tab.noText })))), (_d = convertTabs()) === null || _d === void 0 ? void 0 :
-            _d.map((tab, index) => (React.createElement(DBTabPanel, { key: props.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null,
+            React.createElement(DBTabList, null, (_e = convertTabs()) === null || _e === void 0 ? void 0 : _e.map((tab, index) => (React.createElement(DBTabItem, { key: props.name + "tab-item" + index, active: tab.active, label: tab.label, iconTrailing: tab.iconTrailing, icon: tab.icon, noText: tab.noText })))), (_f = convertTabs()) === null || _f === void 0 ? void 0 :
+            _f.map((tab, index) => (React.createElement(DBTabPanel, { key: props.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null,
         showScrollRight ? (React.createElement(DBButton, { className: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: (event) => scroll() }, "Scroll right")) : null,
         props.children));
 }

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

@@ -1,4 +1,4 @@
-import { ClickEvent, ContentSlotProps, EmphasisProps, GlobalProps, GlobalState, IconProps, OverflowProps, SemanticProps, ShowIconProps } from '../../shared/model';
+import { ClickEvent, ContentSlotProps, EmphasisProps, GlobalProps, GlobalState, IconProps, NoTextProps, OverflowProps, SemanticProps, ShowIconProps } from '../../shared/model';
 export declare const TagBehaviorList: readonly ["static", "removable"];
 export type TagBehaviorType = (typeof TagBehaviorList)[number];
 export type DBTagEventsProps = {
@@ -18,10 +18,6 @@ export type DBTagDefaultProps = {
      *  - removable: add a remove button at the end of the tag
      */
     behavior?: TagBehaviorType | string;
-    /**
-     * Define the text next to the icon specified via the icon Property to get hidden.
-     */
-    noText?: boolean | string;
     /**
      * The removeButton attribute shows the cancel button.
      */
@@ -39,7 +35,7 @@ export type DBTagDefaultProps = {
      */
     value?: string;
 };
-export type DBTagProps = DBTagDefaultProps & GlobalProps & IconProps & SemanticProps & OverflowProps & EmphasisProps & ShowIconProps & ContentSlotProps & DBTagEventsProps;
+export type DBTagProps = DBTagDefaultProps & GlobalProps & IconProps & SemanticProps & OverflowProps & EmphasisProps & ShowIconProps & ContentSlotProps & DBTagEventsProps & NoTextProps;
 export type DBTagDefaultState = {
     getRemoveButtonText: () => string;
     handleRemove: (event?: ClickEvent<HTMLButtonElement> | void) => void;

package/dist/components/tag/tag.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTag: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "content" | "semantic" | keyof import("../../shared/model").GlobalProps | "emphasis" | "icon" | "showIcon" | keyof import("./model").DBTagDefaultProps | "overflow" | keyof import("./model").DBTagEventsProps> & import("./model").DBTagDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").OverflowProps & import("../../shared/model").EmphasisProps & import("../../shared/model").ShowIconProps & import("../../shared/model").ContentSlotProps & import("./model").DBTagEventsProps & React.RefAttributes<any>>;
+declare const DBTag: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "content" | keyof import("../../shared/model").GlobalProps | "semantic" | "emphasis" | "icon" | "showIcon" | "noText" | keyof import("./model").DBTagDefaultProps | "overflow" | keyof import("./model").DBTagEventsProps> & import("./model").DBTagDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").OverflowProps & import("../../shared/model").EmphasisProps & import("../../shared/model").ShowIconProps & import("../../shared/model").ContentSlotProps & import("./model").DBTagEventsProps & import("../../shared/model").NoTextProps & React.RefAttributes<any>>;
 export default DBTag;

package/dist/components/tag/tag.js

@@ -6,7 +6,7 @@ import { DEFAULT_REMOVE } from "../../shared/constants";
 import { cls, getBooleanAsString } from "../../utils";
 import DBTooltip from "../tooltip/tooltip";
 function DBTagFn(props, component) {
-    var _a;
+    var _a, _b, _c;
     const _ref = component || useRef(component);
     function handleRemove(event) {
         if (!event)
@@ -23,7 +23,7 @@ function DBTagFn(props, component) {
         // TODO: We should think this through again, if we would really like to have default and especially english, instead of german labels in here
         return DEFAULT_REMOVE;
     }
-    return (React.createElement("div", 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", "data-density", "onRemove"]), { 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", "data-density"]), { className: cls("db-tag", props.className), "data-semantic": props.semantic, "data-emphasis": props.emphasis, "data-icon": props.icon, "data-show-check-state": getBooleanAsString((_a = props.showCheckState) !== null && _a !== void 0 ? _a : true), "data-show-icon": getBooleanAsString(props.showIcon), "data-no-text": getBooleanAsString(props.noText), "data-overflow": getBooleanAsString(props.overflow) }),
+    return (React.createElement("div", 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", "data-density", "onRemove"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.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", "data-density"]), { className: cls("db-tag", props.className), "data-semantic": props.semantic, "data-emphasis": props.emphasis, "data-icon": props.icon, "data-show-check-state": getBooleanAsString((_c = props.showCheckState) !== null && _c !== void 0 ? _c : true), "data-show-icon": getBooleanAsString(props.showIcon), "data-no-text": getBooleanAsString(props.noText), "data-overflow": getBooleanAsString(props.overflow) }),
         React.createElement(React.Fragment, null, props.content),
         props.children,
         props.text ? React.createElement(React.Fragment, null, props.text) : null,

package/dist/components/textarea/textarea.js

@@ -8,7 +8,7 @@ import { addValueResetEventListener, } from "../../utils/form-components";
 import DBInfotext from "../infotext/infotext";
 import { useId } from "react";
 function DBTextareaFn(props, component) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const uuid = useId();
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => undefined);
@@ -75,15 +75,24 @@ function DBTextareaFn(props, component) {
             props.onFocus(event);
         }
     }
-    useEffect(() => {
-        var _a;
-        const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `textarea-${uuid}`;
+    function resetIds() {
+        var _a, _b, _c;
+        const mId = (_c = (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : `textarea-${uuid}`;
         set_id(mId);
         set_messageId(mId + DEFAULT_MESSAGE_ID_SUFFIX);
         set_validMessageId(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
         set_invalidMessageId(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
+    }
+    useEffect(() => {
+        resetIds();
         set_invalidMessage(props.invalidMessage || DEFAULT_INVALID_MESSAGE);
     }, []);
+    useEffect(() => {
+        var _a, _b;
+        if ((_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) {
+            resetIds();
+        }
+    }, [props.id, (_a = props.propOverrides) === null || _a === void 0 ? void 0 : _a.id]);
     useEffect(() => {
         var _a;
         set_invalidMessage(props.invalidMessage ||
@@ -133,9 +142,9 @@ function DBTextareaFn(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", "data-density"]), { 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", "data-density"]), { 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") ||
-                getBoolean(props.readonly, "readonly"), form: props.form, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), name: props.name, wrap: props.wrap, spellCheck: props.spellCheck, autoComplete: props.autocomplete, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), value: props.value, "aria-describedby": (_c = props.ariaDescribedBy) !== null && _c !== void 0 ? _c : _descByIds, placeholder: (_d = props.placeholder) !== null && _d !== void 0 ? _d : DEFAULT_PLACEHOLDER, rows: getNumber(props.rows, DEFAULT_ROWS), cols: getNumber(props.cols) })),
+        React.createElement("label", { htmlFor: _id }, (_b = props.label) !== null && _b !== void 0 ? _b : 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", "data-density"]), { id: _id, "data-resize": props.resize, "data-hide-resizer": getHideProp((_c = props.showResizer) !== null && _c !== void 0 ? _c : true), disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), readOnly: getBoolean(props.readOnly, "readOnly") ||
+                getBoolean(props.readonly, "readonly"), form: props.form, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), name: props.name, wrap: props.wrap, spellCheck: props.spellCheck, autoComplete: props.autocomplete, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), value: props.value, "aria-describedby": (_d = props.ariaDescribedBy) !== null && _d !== void 0 ? _d : _descByIds, placeholder: (_e = props.placeholder) !== null && _e !== void 0 ? _e : DEFAULT_PLACEHOLDER, rows: getNumber(props.rows, DEFAULT_ROWS), cols: getNumber(props.cols) })),
         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/dist/components/tooltip/model.d.ts

@@ -1,4 +1,4 @@
-import { ClickEventState, DocumentScrollState, EmphasisProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState } from '../../shared/model';
+import { ClickEventState, DocumentScrollState, EmphasisProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState, ResetIdState, WrapProps } from '../../shared/model';
 export declare const TooltipVariantList: readonly ["description", "label"];
 export type TooltipVariantType = (typeof TooltipVariantList)[number];
 export type DBTooltipDefaultProps = {
@@ -13,8 +13,8 @@ export type DBTooltipDefaultProps = {
      */
     variant?: TooltipVariantType;
 };
-export type DBTooltipProps = DBTooltipDefaultProps & GlobalProps & EmphasisProps & PlacementProps & PopoverProps;
+export type DBTooltipProps = DBTooltipDefaultProps & GlobalProps & EmphasisProps & PlacementProps & PopoverProps & WrapProps;
 export type DBTooltipDefaultState = {
     getParent: () => HTMLElement;
 };
-export type DBTooltipState = DBTooltipDefaultState & GlobalState & ClickEventState<HTMLElement> & PopoverState & InitializedState & DocumentScrollState;
+export type DBTooltipState = DBTooltipDefaultState & GlobalState & ClickEventState<HTMLElement> & PopoverState & InitializedState & DocumentScrollState & ResetIdState;

package/dist/components/tooltip/tooltip.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "placement" | "emphasis" | keyof import("./model").DBTooltipDefaultProps | keyof import("../../shared/model").PopoverProps> & import("./model").DBTooltipDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").EmphasisProps & import("../../shared/model").PlacementProps & import("../../shared/model").PopoverProps & React.RefAttributes<any>>;
+declare const DBTooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "placement" | "emphasis" | "wrap" | keyof import("./model").DBTooltipDefaultProps | keyof import("../../shared/model").PopoverProps> & import("./model").DBTooltipDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").EmphasisProps & import("../../shared/model").PlacementProps & import("../../shared/model").PopoverProps & import("../../shared/model").WrapProps & React.RefAttributes<any>>;
 export default DBTooltip;

package/dist/components/tooltip/tooltip.js

@@ -8,7 +8,7 @@ import { DocumentScrollListener } from "../../utils/document-scroll-listener";
 import { handleFixedPopover } from "../../utils/floating-components";
 import { useId } from "react";
 function DBTooltipFn(props, component) {
-    var _a, _b;
+    var _a, _b, _c;
     const uuid = useId();
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => DEFAULT_ID);
@@ -64,15 +64,20 @@ function DBTooltipFn(props, component) {
         handleAutoPlacement(parent);
         _observer === null || _observer === void 0 ? void 0 : _observer.observe(getParent());
     }
+    function resetIds() {
+        var _a, _b, _c;
+        set_id((_c = (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : "tooltip-" + uuid);
+    }
     useEffect(() => {
-        set_id(props.id || "tooltip-" + uuid);
+        resetIds();
         setInitialized(true);
     }, []);
     useEffect(() => {
-        if (props.id) {
-            set_id(props.id);
+        var _a, _b;
+        if ((_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) {
+            resetIds();
         }
-    }, [props.id]);
+    }, [props.id, (_a = props.propOverrides) === null || _a === void 0 ? void 0 : _a.id]);
     useEffect(() => {
         if (_ref.current && initialized && _id) {
             const parent = getParent();
@@ -104,7 +109,7 @@ function DBTooltipFn(props, component) {
             setInitialized(false);
         }
     }, [_ref.current, initialized, _id]);
-    return (React.createElement("i", Object.assign({ role: "tooltip", "aria-hidden": "true", "data-gap": "true", 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", "data-density"]), 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", "data-density"]), { className: cls("db-tooltip", props.className), id: _id, "data-emphasis": props.emphasis, "data-animation": getBooleanAsString((_a = props.animation) !== null && _a !== void 0 ? _a : true), "data-delay": props.delay, "data-width": props.width, "data-show-arrow": getBooleanAsString((_b = props.showArrow) !== null && _b !== void 0 ? _b : true), "data-placement": props.placement, onClick: (event) => handleClick(event) }), props.children));
+    return (React.createElement("i", Object.assign({ role: "tooltip", "aria-hidden": "true", "data-gap": "true", 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", "data-density"]), 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", "data-density"]), { className: cls("db-tooltip", props.className), id: _id, "data-emphasis": props.emphasis, "data-wrap": getBooleanAsString(props.wrap), "data-animation": getBooleanAsString((_b = props.animation) !== null && _b !== void 0 ? _b : true), "data-delay": props.delay, "data-width": props.width, "data-show-arrow": getBooleanAsString((_c = props.showArrow) !== null && _c !== void 0 ? _c : true), "data-placement": props.placement, onClick: (event) => handleClick(event) }), props.children));
 }
 const DBTooltip = forwardRef(DBTooltipFn);
 export default DBTooltip;

package/dist/index.d.ts

@@ -12,6 +12,8 @@ export * from './components/card';
 export * from './components/card/model';
 export * from './components/checkbox';
 export * from './components/checkbox/model';
+export * from './components/custom-button';
+export * from './components/custom-button/model';
 export * from './components/custom-select';
 export * from './components/custom-select-dropdown';
 export * from './components/custom-select-dropdown/model';

package/dist/index.js

@@ -12,6 +12,8 @@ export * from './components/card';
 export * from './components/card/model';
 export * from './components/checkbox';
 export * from './components/checkbox/model';
+export * from './components/custom-button';
+export * from './components/custom-button/model';
 export * from './components/custom-select';
 export * from './components/custom-select-dropdown';
 export * from './components/custom-select-dropdown/model';

package/dist/shared/model.d.ts

@@ -21,7 +21,12 @@ export interface GlobalProps {
      * Before using please check for the [accessibility concerns](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_concerns)
      */
     autofocus?: boolean | string;
+    /**
+     * Allows overriding specific props on nested elements or internal component structure.
+     */
+    propOverrides?: PropOverridesType;
 }
+export type PropOverridesType = Pick<GlobalProps, 'id'>;
 export type GlobalState = {
     _id?: string;
 };
@@ -352,6 +357,9 @@ export type FromValidState = {
     handleValidation: () => void;
     _invalidMessage?: string;
 };
+export type ResetIdState = {
+    resetIds: () => void;
+};
 export type FormState = {
     _messageId?: string;
     _validMessageId?: string;
@@ -369,7 +377,7 @@ export type FormState = {
      * We use this to remove form event listener
      */
     abortController?: AbortController;
-};
+} & ResetIdState;
 export type InitializedState = {
     initialized: boolean;
 };
@@ -520,6 +528,12 @@ export type AriaControlsProps = {
      */
     controls?: string;
 };
+export type NoTextProps = {
+    /**
+     * Define the text next to the icon specified via the icon Property to get hidden.
+     */
+    noText?: boolean | string;
+};
 export type ValueLabelType = {
     value: string;
     label?: string;

package/dist/utils/index.js

@@ -70,15 +70,15 @@ export const getBooleanAsString = (originBool) => {
     if (originBool === undefined || originBool === null)
         return;
     if (typeof originBool === 'string') {
-        return String(Boolean(originBool));
+        return String(originBool === 'true');
     }
     return String(originBool);
 };
 export const getBoolean = (originBool, propertyName) => {
     if (originBool === undefined || originBool === null)
         return;
-    if (typeof originBool === 'string' && propertyName) {
-        return Boolean(propertyName === originBool || originBool);
+    if (typeof originBool === 'string') {
+        return Boolean(propertyName === originBool || originBool === 'true');
     }
     return Boolean(originBool);
 };
@@ -119,20 +119,19 @@ export const getStep = (step) => {
 export const getInputValue = (value, inputType) => {
     return inputType && ['number', 'range'].includes(inputType) ? getNumber(value) : value;
 };
+const toBool = (value) => typeof value === 'string' ? value === 'true' : value;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const getHideProp = (show) => {
     if (show === undefined || show === null) {
         return undefined;
     }
-    return getBooleanAsString(!Boolean(show));
+    return getBooleanAsString(!toBool(show));
 };
 export const stringPropVisible = (givenString, showString) => {
     if (showString === undefined) {
         return !!givenString;
     }
-    else {
-        return Boolean(showString) && Boolean(givenString);
-    }
+    return toBool(showString) && Boolean(givenString);
 };
 export const getSearchInput = (element) => element.querySelector(`input[type="search"]`);
 export const getOptionKey = (option, prefix) => {

package/package.json

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