@db-ux/react-core-components 3.0.1 → 3.0.2-copilot2-e7bf98b

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "3.0.1",
+  "version": "3.0.2-copilot2-e7bf98b",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -11,11 +11,13 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/"
+    "dist/",
+    "agent"
   ],
   "scripts": {
     "build": "npm-run-all tsc",
     "mv:dist": "cpr dist ../../build-outputs/react/dist --overwrite",
+    "mv:agent": "cpr agent ../../build-outputs/react/agent -o",
     "mv:package.json": "cpr package.json ../../build-outputs/react/package.json --overwrite",
     "mv:readme": "cpr README.md ../../build-outputs/react/README.md --overwrite",
     "open:report": "npx playwright show-report",
@@ -38,7 +40,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "3.0.1",
-    "@db-ux/core-foundations": "3.0.1"
+    "@db-ux/core-components": "3.0.2-copilot2-e7bf98b",
+    "@db-ux/core-foundations": "3.0.2-copilot2-e7bf98b"
   }
 }