@db-ux/react-core-components 4.9.0-1-c55de66 → 4.9.0-stencil-bundle-ad37ca4

package/CHANGELOG.md

@@ -189,7 +189,7 @@ _version bump_
 
 - fix: set DBTabItem internal state `_selected` correctly - [see commit f7625cb](https://github.com/db-ux-design-system/core-web/commit/f7625cbd9d64513527e826c9d2c1ef42b2734a4b):
 
-                - Now also sets aria-selected=true|false correctly which improves screen reader behaviour
+                  - Now also sets aria-selected=true|false correctly which improves screen reader behaviour
 
 ## 4.2.1
 

package/dist/components/accordion/accordion.js

@@ -31,7 +31,7 @@ function DBAccordionFn(props, component) {
     useEffect(() => {
         // If we have a single behavior we first check for
         // props.name otherwise for state_id
-        if (initialized) {
+        if (initialized && _ref.current) {
             if (props.behavior === "single") {
                 if (props.name) {
                     if (_name !== props.name) {

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

@@ -1,6 +1,7 @@
 import * as React from "react";
-declare const DBAccordionItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "name" | "text" | "defaultOpen" | "disabled" | "headline" | "headlinePlain" | keyof import("../../shared/model").ToggleEventProps> & {
+declare const DBAccordionItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "name" | "text" | "defaultOpen" | "open" | "disabled" | "headline" | "headlinePlain" | keyof import("../../shared/model").ToggleEventProps> & {
     defaultOpen?: boolean;
+    open?: boolean;
     disabled?: boolean | string;
     headline?: any;
     headlinePlain?: string;

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

@@ -27,7 +27,9 @@ function DBAccordionItemFn(props, component) {
         if (props.onToggle) {
             props.onToggle(newStateOpen);
         }
-        set_open(newStateOpen);
+        if (props.open === undefined) {
+            set_open(newStateOpen);
+        }
     }
     useEffect(() => {
         if (props.defaultOpen) {
@@ -45,6 +47,11 @@ function DBAccordionItemFn(props, component) {
             set_name(props.name);
         }
     }, [props.name]);
+    useEffect(() => {
+        if (props.open !== undefined) {
+            set_open(props.open);
+        }
+    }, [props.open]);
     return (React.createElement("li", Object.assign({ 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-accordion-item", props.className) }),
         React.createElement("details", Object.assign({ "aria-disabled": getBooleanAsString(props.disabled), ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density", "onToggle"]), { name: _name, open: _open }),
             React.createElement("summary", { onClick: (event) => handleToggle(event) },

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

@@ -4,6 +4,10 @@ export type DBAccordionItemDefaultProps = {
      * Initial state for the accordion item
      */
     defaultOpen?: boolean;
+    /**
+     * State for the accordion item
+     */
+    open?: boolean;
     /**
      * The disabled attribute can be set to keep a user from clicking on the element.
      */

package/dist/components/drawer/drawer.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants";
-import { cls, delay, getBooleanAsString, isKeyboardEvent } from "../../utils";
+import { cls, delay, getBoolean, getBooleanAsString, isKeyboardEvent, } from "../../utils";
 import DBButton from "../button/button";
 function DBDrawerFn(props, component) {
     var _a, _b, _c;
@@ -40,8 +40,8 @@ function DBDrawerFn(props, component) {
     }
     function handleDialogOpen() {
         if (_ref.current) {
-            const open = Boolean(props.open);
-            if (open && !_ref.current.open) {
+            const dialogOpen = getBoolean(props.open);
+            if (dialogOpen && !_ref.current.open) {
                 if (dialogContainerRef.current) {
                     dialogContainerRef.current.removeAttribute("data-transition");
                 }
@@ -59,7 +59,7 @@ function DBDrawerFn(props, component) {
                     }
                 }, 1);
             }
-            if (!open && _ref.current.open) {
+            if (!dialogOpen && _ref.current.open) {
                 if (dialogContainerRef.current) {
                     dialogContainerRef.current.dataset["transition"] =
                         "close";

package/dist/components/header/header.js

@@ -41,13 +41,6 @@ function DBHeaderFn(props, component) {
         }
     }, [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", "data-density", "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", "data-density"]), { className: cls("db-header", props.className), id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-width": props.width, "data-on-forcing-mobile": props.forceMobile && !forcedToMobile }),
-        React.createElement(DBDrawer, { className: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: props.closeButtonId, closeButtonText: props.closeButtonText, 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),
-                React.createElement("div", { className: "db-header-meta-navigation" },
-                    React.createElement(React.Fragment, null, props.metaNavigation))),
-            React.createElement("div", { className: "db-header-secondary-action" },
-                React.createElement(React.Fragment, null, props.secondaryAction))),
         React.createElement("div", { className: "db-header-meta-navigation" },
             React.createElement(React.Fragment, null, props.metaNavigation)),
         React.createElement("div", { className: "db-header-navigation-bar" },
@@ -61,7 +54,14 @@ function DBHeaderFn(props, component) {
                 React.createElement("div", { className: "db-header-burger-menu-container" },
                     React.createElement(DBButton, { icon: "menu", variant: "ghost", noText: true, onClick: (event) => handleToggle() }, (_c = props.burgerMenuLabel) !== null && _c !== void 0 ? _c : DEFAULT_BURGER_MENU)),
                 React.createElement("div", { className: "db-header-secondary-action" },
-                    React.createElement(React.Fragment, null, props.secondaryAction))))));
+                    React.createElement(React.Fragment, null, props.secondaryAction)))),
+        React.createElement(DBDrawer, { className: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: props.closeButtonId, closeButtonText: props.closeButtonText, 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),
+                React.createElement("div", { className: "db-header-meta-navigation" },
+                    React.createElement(React.Fragment, null, props.metaNavigation))),
+            React.createElement("div", { className: "db-header-secondary-action" },
+                React.createElement(React.Fragment, null, props.secondaryAction)))));
 }
 const DBHeader = forwardRef(DBHeaderFn);
 export default DBHeader;

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

@@ -17,6 +17,10 @@ export type DBNavigationItemDefaultProps = {
      * This is for mobile navigation only, if it is set the sub-navigation is a static overlay
      */
     subNavigationExpanded?: boolean | string;
+    /**
+     * Force hide sub-navigation - for web component output
+     */
+    hideSubNavigation?: boolean;
 };
 export type DBNavigationItemProps = DBNavigationItemDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & WidthProps & WrapProps & NavigationBackButtonProps & ShowIconProps & TextProps;
 export type DBNavigationItemDefaultState = {

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

@@ -70,14 +70,13 @@ function DBNavigationItemFn(props, component) {
             }
         }
     }, [initialized, _ref.current]);
-    return (React.createElement("li", 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, onMouseOver: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.enableFollow(), onMouseLeave: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.disableFollow(), onMouseMove: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.followByMouseEvent(event) }, 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-navigation-item", props.className), "data-width": props.width, "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon), "data-active": props.active, "data-wrap": getBooleanAsString(props.wrap), "aria-disabled": getBooleanAsString(props.disabled) }),
-        !hasSubNavigation ? (React.createElement(React.Fragment, null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children))) : null,
+    return (React.createElement("li", 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, onMouseOver: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.enableFollow(), onMouseLeave: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.disableFollow(), onMouseMove: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.followByMouseEvent(event) }, 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-navigation-item", props.className), "data-width": props.width, "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon), "data-active": props.active, "data-wrap": getBooleanAsString(props.wrap), "aria-disabled": getBooleanAsString(props.disabled) }), !getBoolean(props.hideSubNavigation, "hideSubNavigation") &&
         hasSubNavigation ? (React.createElement(React.Fragment, null,
-            React.createElement("button", { className: "db-navigation-item-expand-button", id: subNavigationToggleId, "aria-haspopup": hasAreaPopup ? "true" : undefined, "aria-expanded": isSubNavigationExpanded, "aria-controls": subNavigationId, disabled: getBoolean(props.disabled, "disabled"), onClick: (event) => handleClick(event) }, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),
-            React.createElement("menu", { className: "db-sub-navigation", id: subNavigationId, "aria-labelledby": subNavigationToggleId, "data-force-close": autoClose, onClick: (event) => handleNavigationItemClick(event) },
-                hasAreaPopup ? (React.createElement("div", { className: "db-mobile-navigation-back" },
-                    React.createElement(DBButton, { icon: "arrow_left", variant: "ghost", id: props.backButtonId, onClick: (event) => handleBackClick(event) }, (_c = props.backButtonText) !== null && _c !== void 0 ? _c : DEFAULT_BACK))) : null,
-                React.createElement(React.Fragment, null, props.subNavigation)))) : null));
+        React.createElement("button", { className: "db-navigation-item-expand-button", id: subNavigationToggleId, "aria-haspopup": hasAreaPopup ? "true" : undefined, "aria-expanded": isSubNavigationExpanded, "aria-controls": subNavigationId, disabled: getBoolean(props.disabled, "disabled"), onClick: (event) => handleClick(event) }, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),
+        React.createElement("menu", { className: "db-sub-navigation", id: subNavigationId, "aria-labelledby": subNavigationToggleId, "data-force-close": autoClose, onClick: (event) => handleNavigationItemClick(event) },
+            hasAreaPopup ? (React.createElement("div", { className: "db-mobile-navigation-back" },
+                React.createElement(DBButton, { icon: "arrow_left", variant: "ghost", id: props.backButtonId, onClick: (event) => handleBackClick(event) }, (_c = props.backButtonText) !== null && _c !== void 0 ? _c : DEFAULT_BACK))) : null,
+            React.createElement(React.Fragment, null, props.subNavigation)))) : props.text ? (React.createElement(React.Fragment, null, props.text)) : (React.createElement(React.Fragment, null, props.children))));
 }
 const DBNavigationItem = forwardRef(DBNavigationItemFn);
 export default DBNavigationItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.9.0-1-c55de66",
+  "version": "4.9.0-stencil-bundle-ad37ca4",
   "type": "module",
   "description": "React components for @db-ux/core-components",
   "repository": {
@@ -17,8 +17,8 @@
     "dist/"
   ],
   "dependencies": {
-    "@db-ux/core-components": "4.9.0-1-c55de66",
-    "@db-ux/core-foundations": "4.9.0-1-c55de66"
+    "@db-ux/core-components": "4.9.0-stencil-bundle-ad37ca4",
+    "@db-ux/core-foundations": "4.9.0-stencil-bundle-ad37ca4"
   },
   "devDependencies": {
     "@playwright/experimental-ct-react": "1.60.0",