@db-ux/react-core-components 3.0.0 → 3.0.2-copilot-66b0168

package/agent/Tag.md

@@ -0,0 +1,56 @@
+
+
+# Tag Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBButton } from "@db-ux/react-react-core-components";
+import { DBCheckbox } from "@db-ux/react-react-core-components";
+import { DBLink } from "@db-ux/react-react-core-components";
+import { DBRadio } from "@db-ux/react-react-core-components";
+import { DBTag } from "@db-ux/react-react-core-components";
+
+function Tag(props: any) {
+  return (
+    <>
+      <h1>DBTag Documentation Examples</h1>
+      <h2>1. Default Tags</h2>
+      <DBTag>
+        <DBButton>Tag as Button</DBButton>
+      </DBTag>
+      <DBTag>
+        <DBLink>Tag as Link</DBLink>
+      </DBTag>
+      <DBTag>
+        <DBCheckbox>Tag as Checkbox</DBCheckbox>
+      </DBTag>
+      <DBTag>
+        <DBRadio>Tag as Radio</DBRadio>
+      </DBTag>
+      <DBTag>Static Tag</DBTag>
+      <h2>2. Overflow Example</h2>
+      <DBTag overflow>
+        <span>Static Tag with overflow</span>
+      </DBTag>
+      <h2>3. Removable Tag</h2>
+      <DBTag
+        behavior="removable"
+        onRemove={(event) => console.log("Tag removed")}
+      >
+        Removable Tag
+      </DBTag>
+      <h2>4. Semantic Variants</h2>
+      <DBTag semantic="adaptive">Adaptive Tag</DBTag>
+      <DBTag semantic="neutral">Neutral Tag</DBTag>
+      <DBTag semantic="critical">Critical Tag</DBTag>
+      <DBTag semantic="informational">Informational Tag</DBTag>
+      <DBTag semantic="warning">Warning Tag</DBTag>
+      <DBTag semantic="successful">Successful Tag</DBTag>
+      <h2>5. Icon Support</h2>
+      <DBTag icon="user">Tag with Icon</DBTag>
+    </>
+  );
+}
+
+export default Tag;
+```

package/agent/Textarea.md

@@ -0,0 +1,45 @@
+
+
+# Textarea Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBTextarea } from "@db-ux/react-react-core-components";
+
+function Textarea(props: any) {
+  return (
+    <>
+      <h1>DBTextarea Documentation Examples</h1>
+      <h2>1. Default Textarea</h2>
+      <DBTextarea label="Default Textarea" />
+      <h2>2. Resizable Variants</h2>
+      <DBTextarea resize="none" label="No Resize" />
+      <DBTextarea resize="both" label="Resize Both" />
+      <DBTextarea resize="horizontal" label="Resize Horizontal" />
+      <DBTextarea resize="vertical" label="Resize Vertical" />
+      <h2>3. Rows and Columns</h2>
+      <DBTextarea label="Custom Rows and Columns" rows={5} cols={30} />
+      <h2>4. Wrap Variants</h2>
+      <DBTextarea wrap="hard" label="Hard Wrap" />
+      <DBTextarea wrap="soft" label="Soft Wrap" />
+      <DBTextarea wrap="off" label="No Wrap" />
+      <h2>5. Disabled State</h2>
+      <DBTextarea label="Disabled Textarea" disabled />
+      <h2>6. Placeholder Examples</h2>
+      <DBTextarea placeholder="Enter text here" label="With Placeholder" />
+      <h2>7. Message Property Example</h2>
+      <DBTextarea
+        label="Textarea with Message"
+        message="This is a helper message."
+      />
+      <h2>8. Input Event Example</h2>
+      <DBTextarea
+        label="Input Event"
+        onInput={(event) => console.log("Input event:", event.target.value)}
+      />
+    </>
+  );
+}
+
+export default Textarea;
+```

package/agent/Tooltip.md

@@ -0,0 +1,47 @@
+
+
+# Tooltip Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBButton } from "@db-ux/react-react-core-components";
+import { DBTooltip } from "@db-ux/react-react-core-components";
+
+function Tooltip(props: any) {
+  return (
+    <>
+      <h1>DBTooltip Documentation Examples</h1>
+      <h2>1. Default Tooltip</h2>
+      <DBButton>
+        Hover on me to open Tooltip
+        <DBTooltip>Tooltip</DBTooltip>
+      </DBButton>
+      <h2>2. Tooltip Variants</h2>
+      <DBButton>
+        Description Tooltip
+        <DBTooltip variant="description">Description Tooltip Content</DBTooltip>
+      </DBButton>
+      <DBButton>
+        Label Tooltip
+        <DBTooltip variant="label">Label Tooltip Content</DBTooltip>
+      </DBButton>
+      <h2>3. Tooltip with Arrow</h2>
+      <DBButton>
+        Tooltip with Arrow
+        <DBTooltip showArrow>Tooltip Content with Arrow</DBTooltip>
+      </DBButton>
+      <h2>4. Placement Variants</h2>
+      <DBButton>
+        Top Placement
+        <DBTooltip placement="top">Tooltip Content at Top</DBTooltip>
+      </DBButton>
+      <DBButton>
+        Bottom Placement
+        <DBTooltip placement="bottom">Tooltip Content at Bottom</DBTooltip>
+      </DBButton>
+    </>
+  );
+}
+
+export default Tooltip;
+```

package/agent/_instructions.md

@@ -0,0 +1,31 @@
+- Use "@db-ux/react-core-components" as import for components:
+  - use for `DBDrawer` or `Drawer` the file __agent-path__/Drawer.md
+  - use for `DBTooltip` or `Tooltip` the file __agent-path__/Tooltip.md
+  - use for `DBTextarea` or `Textarea` the file __agent-path__/Textarea.md
+  - use for `DBTag` or `Tag` the file __agent-path__/Tag.md
+  - use for `DBTabs` or `Tabs` the file __agent-path__/Tabs.md
+  - use for `DBTabItem` or `TabItem` the file __agent-path__/TabItem.md
+  - use for `DBSwitch` or `Switch` the file __agent-path__/Switch.md
+  - use for `DBStack` or `Stack` the file __agent-path__/Stack.md
+  - use for `DBSelect` or `Select` the file __agent-path__/Select.md
+  - use for `DBSection` or `Section` the file __agent-path__/Section.md
+  - use for `DBRadio` or `Radio` the file __agent-path__/Radio.md
+  - use for `DBPopover` or `Popover` the file __agent-path__/Popover.md
+  - use for `DBPage` or `Page` the file __agent-path__/Page.md
+  - use for `DBNotification` or `Notification` the file __agent-path__/Notification.md
+  - use for `DBNavigationItem` or `NavigationItem` the file __agent-path__/NavigationItem.md
+  - use for `DBNavigation` or `Navigation` the file __agent-path__/Navigation.md
+  - use for `DBLink` or `Link` the file __agent-path__/Link.md
+  - use for `DBInput` or `Input` the file __agent-path__/Input.md
+  - use for `DBInfotext` or `Infotext` the file __agent-path__/Infotext.md
+  - use for `DBIcon` or `Icon` the file __agent-path__/Icon.md
+  - use for `DBHeader` or `Header` the file __agent-path__/Header.md
+  - use for `DBDivider` or `Divider` the file __agent-path__/Divider.md
+  - use for `DBCustomSelect` or `CustomSelect` the file __agent-path__/CustomSelect.md
+  - use for `DBCheckbox` or `Checkbox` the file __agent-path__/Checkbox.md
+  - use for `DBCard` or `Card` the file __agent-path__/Card.md
+  - use for `DBButton` or `Button` the file __agent-path__/Button.md
+  - use for `DBBrand` or `Brand` the file __agent-path__/Brand.md
+  - use for `DBBadge` or `Badge` the file __agent-path__/Badge.md
+  - use for `DBAccordionItem` or `AccordionItem` the file __agent-path__/AccordionItem.md
+  - use for `DBAccordion` or `Accordion` the file __agent-path__/Accordion.md

package/dist/components/checkbox/checkbox.js

@@ -14,7 +14,7 @@ function DBCheckboxFn(props, component) {
     const [_validMessageId, set_validMessageId] = useState(() => undefined);
     const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
     const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
-    const [_descByIds, set_descByIds] = useState(() => "");
+    const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
     function hasValidState() {
         var _a;
@@ -46,7 +46,7 @@ function DBCheckboxFn(props, component) {
             set_descByIds(_messageId);
         }
         else {
-            set_descByIds("");
+            set_descByIds(undefined);
         }
     }
     function handleChange(event) {
@@ -90,6 +90,7 @@ function DBCheckboxFn(props, component) {
             if (stringPropVisible(props.message, props.showMessage)) {
                 set_descByIds(messageId);
             }
+            handleValidation();
         }
     }, [_id]);
     useEffect(() => {

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

@@ -34,7 +34,8 @@ function DBCustomSelectFn(props, component) {
     const [_placeholderId, set_placeholderId] = useState(() => undefined);
     const [_infoTextId, set_infoTextId] = useState(() => undefined);
     const [_validity, set_validity] = useState(() => "no-validation");
-    const [_descByIds, set_descByIds] = useState(() => "");
+    const [_userInteraction, set_userInteraction] = useState(() => false);
+    const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_selectedLabels, set_selectedLabels] = useState(() => "");
     const [_selectedLabelsId, set_selectedLabelsId] = useState(() => undefined);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
@@ -76,7 +77,9 @@ function DBCustomSelectFn(props, component) {
                 set_voiceOverFallback(_invalidMessage);
                 delay(() => set_voiceOverFallback(""), 1000);
             }
-            set_validity((_c = props.validation) !== null && _c !== void 0 ? _c : "invalid");
+            if (_userInteraction) {
+                set_validity((_c = props.validation) !== null && _c !== void 0 ? _c : "invalid");
+            }
         }
         else if (hasValidState() &&
             ((_d = selectRef.current) === null || _d === void 0 ? void 0 : _d.validity.valid) &&
@@ -300,6 +303,7 @@ function DBCustomSelectFn(props, component) {
         if (skip)
             return;
         set_values(values);
+        set_userInteraction(true);
         if (props.onOptionSelected) {
             props.onOptionSelected(values !== null && values !== void 0 ? values : []);
         }
@@ -485,7 +489,7 @@ function DBCustomSelectFn(props, component) {
         else if (_options) {
             set_hasNoOptions(_options.length === 0);
         }
-    }, [props.showNoResults, _options]);
+    }, [props.showNoResults, props.showLoading, _options]);
     useEffect(() => {
         var _a;
         setSelectAllEnabled(Boolean(props.multiple && ((_a = props.showSelectAll) !== null && _a !== void 0 ? _a : amountOptions > 5)));
@@ -503,8 +507,10 @@ function DBCustomSelectFn(props, component) {
         }
     }, [props.values]);
     useEffect(() => {
-        handleValidation();
-    }, [_values]);
+        if (selectRef.current) {
+            handleValidation();
+        }
+    }, [_values, selectRef.current]);
     useEffect(() => {
         set_validity(props.validation);
     }, [props.validation]);
@@ -611,7 +617,9 @@ function DBCustomSelectFn(props, component) {
                         React.createElement(DBInput, { type: "search", ref: searchInputRef, name: _id, form: _id, showLabel: false, value: _searchValue, label: (_d = props.searchLabel) !== null && _d !== void 0 ? _d : DEFAULT_LABEL, placeholder: (_e = props.searchPlaceholder) !== null && _e !== void 0 ? _e : props.searchLabel, ariaDescribedBy: _hasNoOptions || props.showLoading
                                 ? _infoTextId
                                 : undefined, onInput: (event) => handleSearch(event) }))) : null,
-                    _hasNoOptions || props.showLoading ? (React.createElement(DBInfotext, { id: _infoTextId, icon: _hasNoOptions ? undefined : "circular_arrows", semantic: _hasNoOptions ? "warning" : "informational" }, (_f = (_hasNoOptions ? props.noResultsText : props.loadingText)) !== null && _f !== void 0 ? _f : DEFAULT_MESSAGE)) : (React.createElement(React.Fragment, null,
+                    _hasNoOptions || props.showLoading ? (React.createElement(DBInfotext, { id: _infoTextId, icon: props.showLoading ? "circular_arrows" : undefined, semantic: props.showLoading ? "informational" : "warning" }, (_f = (props.showLoading
+                        ? props.loadingText
+                        : props.noResultsText)) !== null && _f !== void 0 ? _f : DEFAULT_MESSAGE)) : (React.createElement(React.Fragment, null,
                         React.createElement(React.Fragment, null,
                             selectAllEnabled ? (React.createElement("div", null,
                                 React.createElement("div", { className: "db-checkbox db-custom-select-list-item" },

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

@@ -190,6 +190,7 @@ export type DBCustomSelectDefaultState = {
     _internalChangeTimestamp: number;
     _documentClickListenerCallbackId?: string;
     _searchValue?: string;
+    _userInteraction?: boolean;
     getNativeSelectValue: () => string;
     getOptionLabel: (option: CustomSelectOptionType) => string;
     getOptionChecked: (value?: string) => boolean;

package/dist/components/header/header.js

@@ -2,15 +2,14 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { DEFAULT_BURGER_MENU, DEFAULT_ID } from "../../shared/constants";
-import { addAttributeToChildren, cls, getBoolean, uuid } from "../../utils";
+import { DEFAULT_BURGER_MENU } from "../../shared/constants";
+import { addAttributeToChildren, cls, getBoolean } from "../../utils";
 import { isEventTargetNavigationItem } from "../../utils/navigation";
 import DBButton from "../button/button";
 import DBDrawer from "../drawer/drawer";
 function DBHeaderFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
-    const [_id, set_id] = useState(() => DEFAULT_ID);
     const [initialized, setInitialized] = useState(() => false);
     const [forcedToMobile, setForcedToMobile] = useState(() => false);
     function handleToggle(event) {
@@ -29,23 +28,19 @@ function DBHeaderFn(props, component) {
     }
     useEffect(() => {
         setInitialized(true);
-        set_id(props.id || "header-" + uuid());
     }, []);
     useEffect(() => {
-        if (initialized && document && _id && props.forceMobile) {
-            const headerElement = document.getElementById(_id !== null && _id !== void 0 ? _id : "");
-            if (headerElement) {
-                // Adds this attribute to the header to enable all styling which would have
-                // @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device
-                addAttributeToChildren(headerElement, {
-                    key: "data-force-mobile",
-                    value: "true",
-                });
-            }
+        if (initialized && _ref.current && props.forceMobile) {
+            // Adds this attribute to the header to enable all styling which would have
+            // @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device
+            addAttributeToChildren(_ref.current, {
+                key: "data-force-mobile",
+                value: "true",
+            });
             setForcedToMobile(true);
         }
-    }, [initialized]);
-    return (React.createElement("header", 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", "onToggle"]), 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-header", props.className), id: _id, "data-width": props.width, "data-on-forcing-mobile": props.forceMobile && !forcedToMobile }),
+    }, [initialized, _ref.current]);
+    return (React.createElement("header", 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", "onToggle"]), 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-header", props.className), id: props.id, "data-width": props.width, "data-on-forcing-mobile": props.forceMobile && !forcedToMobile }),
         React.createElement(DBDrawer, { className: "db-header-drawer", spacing: "small", rounded: true, open: getBoolean(props.drawerOpen), onClose: (event) => handleToggle() },
             React.createElement("div", { className: "db-header-drawer-navigation" },
                 React.createElement("div", { className: "db-header-navigation", onClick: (event) => handleNavigationItemClick(event) }, props.children),
@@ -64,7 +59,7 @@ function DBHeaderFn(props, component) {
                     React.createElement(React.Fragment, null, props.primaryAction))),
             React.createElement("div", { className: "db-header-action-container" },
                 React.createElement("div", { className: "db-header-burger-menu-container" },
-                    React.createElement(DBButton, { icon: "menu", variant: "ghost", id: _id + "-burger-menu", noText: true, onClick: (event) => handleToggle() }, (_a = props.burgerMenuLabel) !== null && _a !== void 0 ? _a : DEFAULT_BURGER_MENU)),
+                    React.createElement(DBButton, { icon: "menu", variant: "ghost", noText: true, onClick: (event) => handleToggle() }, (_a = props.burgerMenuLabel) !== null && _a !== void 0 ? _a : DEFAULT_BURGER_MENU)),
                 React.createElement("div", { className: "db-header-secondary-action" },
                     React.createElement(React.Fragment, null, props.secondaryAction))))));
 }

package/dist/components/input/input.js

@@ -14,8 +14,8 @@ function DBInputFn(props, component) {
     const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
     const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
     const [_dataListId, set_dataListId] = useState(() => undefined);
-    const [_descByIds, set_descByIds] = useState(() => "");
-    const [_value, set_value] = useState(() => "");
+    const [_descByIds, set_descByIds] = useState(() => undefined);
+    const [_value, set_value] = useState(() => undefined);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
     function hasValidState() {
         var _a;
@@ -47,7 +47,7 @@ function DBInputFn(props, component) {
             set_descByIds(_messageId);
         }
         else {
-            set_descByIds("");
+            set_descByIds(undefined);
         }
     }
     function handleInput(event) {
@@ -108,6 +108,7 @@ function DBInputFn(props, component) {
             if (stringPropVisible(props.message, props.showMessage)) {
                 set_descByIds(messageId);
             }
+            handleValidation();
         }
     }, [_id]);
     useEffect(() => {

package/dist/components/select/select.js

@@ -14,7 +14,7 @@ function DBSelectFn(props, component) {
     const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
     const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
     const [_placeholderId, set_placeholderId] = useState(() => "");
-    const [_descByIds, set_descByIds] = useState(() => "");
+    const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_value, set_value] = useState(() => "");
     const [initialized, setInitialized] = useState(() => false);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
@@ -113,6 +113,7 @@ function DBSelectFn(props, component) {
             else {
                 set_descByIds(placeholderId);
             }
+            handleValidation();
             setInitialized(false);
         }
     }, [_id, initialized]);

package/dist/components/tabs/tabs.js

@@ -102,24 +102,29 @@ function DBTabsFn(props, component) {
         }
     }
     function handleChange(event) {
-        var _a, _b;
+        var _a;
         event.stopPropagation();
-        const closest = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest;
-        if (!closest)
-            return;
-        const list = closest("ul");
-        const listItem = 
-        // db-tab-item for angular and stencil wrapping elements
-        (_b = closest("db-tab-item")) !== null && _b !== void 0 ? _b : closest("li");
-        if (list !== null && listItem !== null) {
-            const indices = Array.from(list.childNodes).indexOf(listItem);
-            if (props.onIndexChange) {
-                props.onIndexChange(indices);
+        if (event.target) {
+            const target = event.target;
+            const parent = target.parentElement;
+            if (parent &&
+                parent.parentElement &&
+                ((_a = parent.parentElement) === null || _a === void 0 ? void 0 : _a.nodeName) === "LI") {
+                const tabItem = parent.parentElement;
+                if (tabItem) {
+                    const list = tabItem.parentElement;
+                    if (list) {
+                        const indices = Array.from(list.childNodes).indexOf(tabItem);
+                        if (props.onIndexChange) {
+                            props.onIndexChange(indices);
+                        }
+                        if (props.onTabSelect) {
+                            props.onTabSelect(event);
+                        }
+                    }
+                }
             }
         }
-        if (props.onTabSelect) {
-            props.onTabSelect(event);
-        }
     }
     useEffect(() => {
         set_id(props.id || _id);
@@ -148,7 +153,7 @@ function DBTabsFn(props, component) {
             setInitialized(false);
         }
     }, [_ref.current, initialized]);
-    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", "onTabSelect", "onIndexChange"]), { 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-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) }),
+    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", "onTabSelect", "onIndexChange"]), { 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-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) }),
         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 :

package/dist/components/textarea/textarea.js

@@ -13,7 +13,7 @@ function DBTextareaFn(props, component) {
     const [_validMessageId, set_validMessageId] = useState(() => undefined);
     const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
     const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
-    const [_descByIds, set_descByIds] = useState(() => "");
+    const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_value, set_value] = useState(() => "");
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
     function hasValidState() {
@@ -46,7 +46,7 @@ function DBTextareaFn(props, component) {
             set_descByIds(_messageId);
         }
         else {
-            set_descByIds("");
+            set_descByIds(undefined);
         }
     }
     function handleInput(event) {
@@ -95,6 +95,7 @@ function DBTextareaFn(props, component) {
             if (stringPropVisible(props.message, props.showMessage)) {
                 set_descByIds(messageId);
             }
+            handleValidation();
         }
     }, [_id]);
     useEffect(() => {

package/dist/index.d.ts

@@ -1,40 +1,79 @@
 export * from './components/accordion';
 export * from './components/accordion-item';
+export * from './components/accordion-item/model';
+export * from './components/accordion/model';
 export * from './components/badge';
+export * from './components/badge/model';
 export * from './components/brand';
+export * from './components/brand/model';
 export * from './components/button';
+export * from './components/button/model';
 export * from './components/card';
+export * from './components/card/model';
 export * from './components/checkbox';
+export * from './components/checkbox/model';
 export * from './components/custom-select';
 export * from './components/custom-select-dropdown';
+export * from './components/custom-select-dropdown/model';
 export * from './components/custom-select-form-field';
+export * from './components/custom-select-form-field/model';
 export * from './components/custom-select-list';
 export * from './components/custom-select-list-item';
+export * from './components/custom-select-list-item/model';
+export * from './components/custom-select-list/model';
+export * from './components/custom-select/model';
 export * from './components/divider';
+export * from './components/divider/model';
 export * from './components/drawer';
+export * from './components/drawer/model';
 export * from './components/header';
+export * from './components/header/model';
 export * from './components/icon';
+export * from './components/icon/model';
 export * from './components/infotext';
+export * from './components/infotext/model';
 export * from './components/input';
+export * from './components/input/model';
 export * from './components/link';
+export * from './components/link/model';
 export * from './components/navigation';
 export * from './components/navigation-item';
+export * from './components/navigation-item/model';
+export * from './components/navigation/model';
 export * from './components/notification';
+export * from './components/notification/model';
 export * from './components/page';
+export * from './components/page/model';
 export * from './components/popover';
+export * from './components/popover/model';
 export * from './components/radio';
+export * from './components/radio/model';
 export * from './components/section';
+export * from './components/section/model';
 export * from './components/select';
+export * from './components/select/model';
 export * from './components/stack';
+export * from './components/stack/model';
 export * from './components/switch';
+export * from './components/switch/model';
 export * from './components/tab-item';
+export * from './components/tab-item/model';
 export * from './components/tab-list';
+export * from './components/tab-list/model';
 export * from './components/tab-panel';
+export * from './components/tab-panel/model';
 export * from './components/tabs';
+export * from './components/tabs/model';
 export * from './components/tag';
+export * from './components/tag/model';
 export * from './components/textarea';
+export * from './components/textarea/model';
 export * from './components/tooltip';
+export * from './components/tooltip/model';
 export * from './shared/constants';
 export * from './shared/model';
+export * from './utils/document-click-listener';
+export * from './utils/document-scroll-listener';
+export * from './utils/floating-components';
 export * from './utils/index';
 export * from './utils/navigation';

package/dist/index.js

@@ -1,40 +1,79 @@
 export * from './components/accordion';
 export * from './components/accordion-item';
+export * from './components/accordion-item/model';
+export * from './components/accordion/model';
 export * from './components/badge';
+export * from './components/badge/model';
 export * from './components/brand';
+export * from './components/brand/model';
 export * from './components/button';
+export * from './components/button/model';
 export * from './components/card';
+export * from './components/card/model';
 export * from './components/checkbox';
+export * from './components/checkbox/model';
 export * from './components/custom-select';
 export * from './components/custom-select-dropdown';
+export * from './components/custom-select-dropdown/model';
 export * from './components/custom-select-form-field';
+export * from './components/custom-select-form-field/model';
 export * from './components/custom-select-list';
 export * from './components/custom-select-list-item';
+export * from './components/custom-select-list-item/model';
+export * from './components/custom-select-list/model';
+export * from './components/custom-select/model';
 export * from './components/divider';
+export * from './components/divider/model';
 export * from './components/drawer';
+export * from './components/drawer/model';
 export * from './components/header';
+export * from './components/header/model';
 export * from './components/icon';
+export * from './components/icon/model';
 export * from './components/infotext';
+export * from './components/infotext/model';
 export * from './components/input';
+export * from './components/input/model';
 export * from './components/link';
+export * from './components/link/model';
 export * from './components/navigation';
 export * from './components/navigation-item';
+export * from './components/navigation-item/model';
+export * from './components/navigation/model';
 export * from './components/notification';
+export * from './components/notification/model';
 export * from './components/page';
+export * from './components/page/model';
 export * from './components/popover';
+export * from './components/popover/model';
 export * from './components/radio';
+export * from './components/radio/model';
 export * from './components/section';
+export * from './components/section/model';
 export * from './components/select';
+export * from './components/select/model';
 export * from './components/stack';
+export * from './components/stack/model';
 export * from './components/switch';
+export * from './components/switch/model';
 export * from './components/tab-item';
+export * from './components/tab-item/model';
 export * from './components/tab-list';
+export * from './components/tab-list/model';
 export * from './components/tab-panel';
+export * from './components/tab-panel/model';
 export * from './components/tabs';
+export * from './components/tabs/model';
 export * from './components/tag';
+export * from './components/tag/model';
 export * from './components/textarea';
+export * from './components/textarea/model';
 export * from './components/tooltip';
+export * from './components/tooltip/model';
 export * from './shared/constants';
 export * from './shared/model';
+export * from './utils/document-click-listener';
+export * from './utils/document-scroll-listener';
+export * from './utils/floating-components';
 export * from './utils/index';
 export * from './utils/navigation';