@db-ux/react-core-components 3.1.16 → 3.1.18

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__/agent/Drawer.md
+  - use for `DBTooltip` or `Tooltip` the file __agent-path__/agent/Tooltip.md
+  - use for `DBTextarea` or `Textarea` the file __agent-path__/agent/Textarea.md
+  - use for `DBTag` or `Tag` the file __agent-path__/agent/Tag.md
+  - use for `DBTabs` or `Tabs` the file __agent-path__/agent/Tabs.md
+  - use for `DBTabItem` or `TabItem` the file __agent-path__/agent/TabItem.md
+  - use for `DBSwitch` or `Switch` the file __agent-path__/agent/Switch.md
+  - use for `DBStack` or `Stack` the file __agent-path__/agent/Stack.md
+  - use for `DBSelect` or `Select` the file __agent-path__/agent/Select.md
+  - use for `DBSection` or `Section` the file __agent-path__/agent/Section.md
+  - use for `DBRadio` or `Radio` the file __agent-path__/agent/Radio.md
+  - use for `DBPopover` or `Popover` the file __agent-path__/agent/Popover.md
+  - use for `DBPage` or `Page` the file __agent-path__/agent/Page.md
+  - use for `DBNotification` or `Notification` the file __agent-path__/agent/Notification.md
+  - use for `DBNavigationItem` or `NavigationItem` the file __agent-path__/agent/NavigationItem.md
+  - use for `DBNavigation` or `Navigation` the file __agent-path__/agent/Navigation.md
+  - use for `DBLink` or `Link` the file __agent-path__/agent/Link.md
+  - use for `DBInput` or `Input` the file __agent-path__/agent/Input.md
+  - use for `DBInfotext` or `Infotext` the file __agent-path__/agent/Infotext.md
+  - use for `DBIcon` or `Icon` the file __agent-path__/agent/Icon.md
+  - use for `DBHeader` or `Header` the file __agent-path__/agent/Header.md
+  - use for `DBDivider` or `Divider` the file __agent-path__/agent/Divider.md
+  - use for `DBCustomSelect` or `CustomSelect` the file __agent-path__/agent/CustomSelect.md
+  - use for `DBCheckbox` or `Checkbox` the file __agent-path__/agent/Checkbox.md
+  - use for `DBCard` or `Card` the file __agent-path__/agent/Card.md
+  - use for `DBButton` or `Button` the file __agent-path__/agent/Button.md
+  - use for `DBBrand` or `Brand` the file __agent-path__/agent/Brand.md
+  - use for `DBBadge` or `Badge` the file __agent-path__/agent/Badge.md
+  - use for `DBAccordionItem` or `AccordionItem` the file __agent-path__/agent/AccordionItem.md
+  - use for `DBAccordion` or `Accordion` the file __agent-path__/agent/Accordion.md

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

@@ -62,5 +62,6 @@ export type DBTabsDefaultState = {
     initTabList: () => void;
     initTabs: (init?: boolean) => void;
     handleChange: (event: InputEvent<HTMLElement>) => void;
+    _resizeObserver?: ResizeObserver;
 };
 export type DBTabsState = DBTabsDefaultState & GlobalState & InitializedState;

package/dist/components/tabs/tabs.js

@@ -16,6 +16,7 @@ function DBTabsFn(props, component) {
     const [showScrollLeft, setShowScrollLeft] = useState(() => false);
     const [showScrollRight, setShowScrollRight] = useState(() => false);
     const [scrollContainer, setScrollContainer] = useState(() => null);
+    const [_resizeObserver, set_resizeObserver] = useState(() => undefined);
     function convertTabs() {
         try {
             if (typeof props.tabs === "string") {
@@ -57,6 +58,14 @@ function DBTabsFn(props, component) {
                         container.addEventListener("scroll", () => {
                             evaluateScrollButtons(container);
                         });
+                        // Use ResizeObserver to re-evaluate scroll buttons because it provides more accurate, container-specific resize detection than global window resize events.
+                        if (!_resizeObserver) {
+                            const observer = new ResizeObserver(() => {
+                                evaluateScrollButtons(container);
+                            });
+                            observer.observe(container);
+                            set_resizeObserver(observer);
+                        }
                     }
                 }
             }
@@ -153,6 +162,12 @@ function DBTabsFn(props, component) {
             setInitialized(false);
         }
     }, [_ref.current, initialized]);
+    useEffect(() => {
+        return () => {
+            _resizeObserver === null || _resizeObserver === void 0 ? void 0 : _resizeObserver.disconnect();
+            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", "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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "3.1.16",
+  "version": "3.1.18",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -12,11 +12,13 @@
   "types": "./dist/index.d.ts",
   "files": [
     "dist/",
+    "agent",
     "CHANGELOG.md"
   ],
   "scripts": {
     "build": "npm-run-all tsc",
     "mv:dist": "cpr dist ../../build-outputs/react/dist --overwrite",
+    "mv:agent": "cpr agent ../../build-outputs/react/agent --overwrite",
     "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",
@@ -39,7 +41,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "3.1.16",
-    "@db-ux/core-foundations": "3.1.16"
+    "@db-ux/core-components": "3.1.18",
+    "@db-ux/core-foundations": "3.1.18"
   }
 }