@camunda/camunda-composite-components 0.20.2 → 0.20.3

package/lib/esm/src/components/c3-navigation/c3-navigation.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Header, HeaderGlobalBar, HeaderMenuItem, HeaderName, HeaderNavigation, SkipToContent, Tag, Toggletip, ToggletipButton, ToggletipContent, Stack as CarbonStack, Link, Callout, DefinitionTooltip, } from "@carbon/react";
 import React, { useState } from "react";
 import C3InfoSidebar from "./c3-navigation-sidebar/c3-info-sidebar";
@@ -110,15 +111,7 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                     tooltip: navbar.licenseTag.isProductionLicense
                         ? undefined
                         : {
-                            content: (React.createElement("p", null,
-                                "Non-production license. For production usage details, visit our",
-                                " ",
-                                React.createElement(Link, { href: NON_PRODUCTION_TERMS_LINK, target: "_blank", style: { display: "inline" } }, "terms & conditions page"),
-                                " ",
-                                "or",
-                                " ",
-                                React.createElement(Link, { href: SALES_CONTACT_LINK, target: "_blank", style: { display: "inline" } }, "contact our sales team"),
-                                ".")),
+                            content: (_jsxs("p", { children: ["Non-production license. For production usage details, visit our", " ", _jsx(Link, { href: NON_PRODUCTION_TERMS_LINK, target: "_blank", style: { display: "inline" }, children: "terms & conditions page" }), " ", "or", " ", _jsx(Link, { href: SALES_CONTACT_LINK, target: "_blank", style: { display: "inline" }, children: "contact our sales team" }), "."] })),
                             buttonLabel: "Learn more",
                         },
                 },
@@ -147,7 +140,7 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                     color: "blue",
                     renderIcon: Time,
                     tooltip: {
-                        content: (React.createElement("p", null, "Please renew and provide new license keys to continue production use of Camunda.")),
+                        content: (_jsx("p", { children: "Please renew and provide new license keys to continue production use of Camunda." })),
                         buttonLabel: "Learn more",
                     },
                 },
@@ -164,7 +157,7 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                     color: "red",
                     renderIcon: Warning,
                     tooltip: {
-                        content: (React.createElement("p", null, "To continue using all features, please renew your license.")),
+                        content: (_jsx("p", { children: "To continue using all features, please renew your license." })),
                         buttonLabel: "Learn more",
                     },
                 },
@@ -173,116 +166,81 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
     ];
     if (app.prefix)
         console.warn("The `prefix` prop is deprecated and will be removed in a future release. It has been replaced with a Camunda icon.");
-    return (React.createElement(C3SidebarStateProvider, { isNotificationSidebarOpen: notificationSideBar?.isOpen, isOrgSidebarOpen: orgSideBar?.isOpen, isInfoSidebarOpen: infoSideBar?.isOpen, isUserSidebarOpen: userSideBar?.isOpen },
-        React.createElement(Header, { "aria-label": app.ariaLabel },
-            React.createElement(SkipToContent, null),
-            displayAppBar && (React.createElement(C3NavigationAppBar, { app: app, appBar: { ...appBar, isOpen: appBarOpen }, forwardRef: forwardRef, navbar: navbar, toggleAppbar: (value) => {
-                    setAppBarOpen(value);
-                } })),
-            React.createElement(HeaderName, { as: forwardRef, prefix: "", ...app.routeProps },
-                React.createElement(Stack, { gap: 3, orientation: "horizontal" },
-                    React.createElement(CamundaLogo, { "aria-label": "Camunda" }),
-                    React.createElement("span", null, app.name))),
-            React.createElement(HeaderNavigation, { "aria-label": app.ariaLabel }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, as: element.routeProps && forwardRef, isActive: element.isCurrentPage, ...element.routeProps },
-                React.createElement("span", null, element.label))))),
-            React.createElement(HeaderGlobalBar, null,
-                React.createElement(ResponsiveNavbarElementsWrapper, null,
-                    tags &&
-                        tags.length > 0 &&
-                        tags.map((tag) => {
-                            if (tag?.tooltip !== undefined) {
-                                const { content, buttonLabel } = tag.tooltip;
-                                return (React.createElement("div", { key: tag.key, style: {
-                                        height: "1.5rem",
-                                        marginTop: "0.75rem",
-                                    } },
-                                    React.createElement(Toggletip, null,
-                                        React.createElement(ToggletipButton, { as: "span", label: buttonLabel },
-                                            React.createElement(Tag, { type: tag.color, renderIcon: tag.renderIcon, style: {
-                                                    margin: "0",
-                                                    cursor: "pointer",
+    return (_jsxs(C3SidebarStateProvider, { isNotificationSidebarOpen: notificationSideBar?.isOpen, isOrgSidebarOpen: orgSideBar?.isOpen, isInfoSidebarOpen: infoSideBar?.isOpen, isUserSidebarOpen: userSideBar?.isOpen, children: [_jsxs(Header, { "aria-label": app.ariaLabel, children: [_jsx(SkipToContent, {}), displayAppBar && (_jsx(C3NavigationAppBar, { app: app, appBar: { ...appBar, isOpen: appBarOpen }, forwardRef: forwardRef, navbar: navbar, toggleAppbar: (value) => {
+                            setAppBarOpen(value);
+                        } })), _jsx(HeaderName, { as: forwardRef, prefix: "", ...app.routeProps, children: _jsxs(Stack, { gap: 3, orientation: "horizontal", children: [_jsx(CamundaLogo, { "aria-label": "Camunda" }), _jsx("span", { children: app.name })] }) }), _jsx(HeaderNavigation, { "aria-label": app.ariaLabel, children: navbar.elements.map((element) => (_jsx(HeaderMenuItem, { as: element.routeProps && forwardRef, isActive: element.isCurrentPage, ...element.routeProps, children: _jsx("span", { children: element.label }) }, element.key))) }), _jsxs(HeaderGlobalBar, { children: [_jsxs(ResponsiveNavbarElementsWrapper, { children: [tags &&
+                                        tags.length > 0 &&
+                                        tags.map((tag) => {
+                                            if (tag?.tooltip !== undefined) {
+                                                const { content, buttonLabel } = tag.tooltip;
+                                                return (_jsx("div", { style: {
+                                                        height: "1.5rem",
+                                                        marginTop: "0.75rem",
+                                                    }, children: _jsxs(Toggletip, { children: [_jsx(ToggletipButton, { as: "span", label: buttonLabel, children: _jsx(Tag, { type: tag.color, renderIcon: tag.renderIcon, style: {
+                                                                        margin: "0",
+                                                                        cursor: "pointer",
+                                                                        overflow: "hidden",
+                                                                        whiteSpace: "nowrap",
+                                                                        textOverflow: "ellipsis",
+                                                                    }, children: tag.label }) }), _jsx(StyledToggletipContent, { children: content })] }) }, tag.key));
+                                            }
+                                            return (_jsx(Tag, { renderIcon: tag.renderIcon, style: {
+                                                    height: "1.5rem",
+                                                    marginTop: "0.75rem",
                                                     overflow: "hidden",
                                                     whiteSpace: "nowrap",
                                                     textOverflow: "ellipsis",
-                                                } }, tag.label)),
-                                        React.createElement(StyledToggletipContent, null, content))));
-                            }
-                            return (React.createElement(Tag, { key: tag.key, renderIcon: tag.renderIcon, style: {
-                                    height: "1.5rem",
-                                    marginTop: "0.75rem",
-                                    overflow: "hidden",
-                                    whiteSpace: "nowrap",
-                                    textOverflow: "ellipsis",
-                                }, type: tag.color }, tag.label));
-                        }),
-                    (clusterUuid || currentClusterUuid) && (React.createElement(ClusterTagWrapper, null,
-                        React.createElement(C3ClusterTagWithClusterName, { clusterUuid: clusterUuid || currentClusterUuid || "", conditionalRendering: options?.conditionalTagRendering }))),
-                    orgName && (React.createElement(OrgName, { orgName: orgName, isSuperOrg: activeOrg?.isSuperOrg, activeSuperOrg: activeOrg?.superOrganization?.name }))),
-                actionButtons && React.createElement(C3ActionButtons, { elements: actionButtons }),
-                notificationSideBar && (React.createElement(C3NotificationSidebar, { sideBar: {
-                        ...notificationSideBar,
-                        type: "notifications",
-                    } })),
-                orgSideBar && (React.createElement(C3OrgSidebar, { sideBar: {
-                        ...orgSideBar,
-                        type: "org",
-                    } })),
-                infoButton || helpCenter ? (React.createElement(HelpCenterHint, null,
-                    React.createElement(InfoButton, { onClick: infoButton ? infoButton.onClick : () => openHelpCenter() }))) : (infoSideBar && (React.createElement(C3InfoSidebar, { sideBar: { ...infoSideBar, type: "info" } }))),
-                userSideBar && (React.createElement(C3UserSidebar, { sideBar: {
-                        ...userSideBar,
-                        type: "user",
-                    } })))),
-        (() => {
-            if (camundaStatus.error &&
-                camundaStatus.endpoint &&
-                options?.c8StatusBanner) {
-                return (React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: "cds--header", style: {
-                            position: "fixed",
-                            marginTop: "48px",
-                            zIndex: "7000",
-                        } },
-                        React.createElement(Callout, { title: "", kind: "error", lowContrast: true, style: { maxWidth: "100%" } },
-                            React.createElement("div", { style: {
-                                    display: "flex",
-                                    justifyContent: "space-between",
-                                    alignItems: "center",
-                                    width: "100%",
-                                    position: "absolute",
-                                    paddingRight: "62px",
-                                } },
-                                React.createElement("div", { className: "cds--actionable-notification__title", dir: "auto", style: {
-                                        overflow: "hidden",
-                                        whiteSpace: "nowrap",
-                                        textWrap: "nowrap",
-                                    } }, "Service incident alert"),
-                                React.createElement(DefinitionTooltip, { "aria-describedby": "", definition: "We're aware of a live incident potentially impacting our SaaS product. Please check our status page for details.", align: "bottom", openOnHover: true, style: {
-                                        marginTop: "-1px",
-                                        width: "calc(100vw - 400px)",
-                                        borderBlockEnd: "none",
-                                        overflow: "hidden",
-                                        textOverflow: "ellipsis",
-                                        textWrap: "nowrap",
-                                        whiteSpace: "nowrap",
-                                        fontSize: "14px",
-                                    } },
-                                    React.createElement("span", null, "We're aware of a live incident potentially impacting our SaaS product. Please check our status page for details.")),
-                                React.createElement(Link, { onClick: () => {
-                                        window.open(camundaStatus.endpoint, "_blank");
-                                    }, inline: true, style: {
-                                        cursor: "pointer",
-                                        color: "$link-primary",
-                                        marginLeft: "auto",
-                                        marginRight: 0,
-                                        textDecoration: "none",
-                                        overflow: "hidden",
-                                        whiteSpace: "nowrap",
-                                        textWrap: "nowrap",
-                                    } }, "Camunda status page")))),
-                    React.createElement("div", { style: { height: "48px" } })));
-            }
-            return React.createElement(React.Fragment, null);
-        })(),
-        helpCenter && React.createElement(C3HelpCenter, { ...helpCenter })));
+                                                }, type: tag.color, children: tag.label }, tag.key));
+                                        }), (clusterUuid || currentClusterUuid) && (_jsx(ClusterTagWrapper, { children: _jsx(C3ClusterTagWithClusterName, { clusterUuid: clusterUuid || currentClusterUuid || "", conditionalRendering: options?.conditionalTagRendering }) })), orgName && (_jsx(OrgName, { orgName: orgName, isSuperOrg: activeOrg?.isSuperOrg, activeSuperOrg: activeOrg?.superOrganization?.name }))] }), actionButtons && _jsx(C3ActionButtons, { elements: actionButtons }), notificationSideBar && (_jsx(C3NotificationSidebar, { sideBar: {
+                                    ...notificationSideBar,
+                                    type: "notifications",
+                                } })), orgSideBar && (_jsx(C3OrgSidebar, { sideBar: {
+                                    ...orgSideBar,
+                                    type: "org",
+                                } })), infoButton || helpCenter ? (_jsx(HelpCenterHint, { children: _jsx(InfoButton, { onClick: infoButton ? infoButton.onClick : () => openHelpCenter() }) })) : (infoSideBar && (_jsx(C3InfoSidebar, { sideBar: { ...infoSideBar, type: "info" } }))), userSideBar && (_jsx(C3UserSidebar, { sideBar: {
+                                    ...userSideBar,
+                                    type: "user",
+                                } }))] })] }), (() => {
+                if (camundaStatus.error &&
+                    camundaStatus.endpoint &&
+                    options?.c8StatusBanner) {
+                    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "cds--header", style: {
+                                    position: "fixed",
+                                    marginTop: "48px",
+                                    zIndex: "7000",
+                                }, children: _jsx(Callout, { title: "", kind: "error", lowContrast: true, style: { maxWidth: "100%" }, children: _jsxs("div", { style: {
+                                            display: "flex",
+                                            justifyContent: "space-between",
+                                            alignItems: "center",
+                                            width: "100%",
+                                            position: "absolute",
+                                            paddingRight: "62px",
+                                        }, children: [_jsx("div", { className: "cds--actionable-notification__title", dir: "auto", style: {
+                                                    overflow: "hidden",
+                                                    whiteSpace: "nowrap",
+                                                    textWrap: "nowrap",
+                                                }, children: "Service incident alert" }), _jsx(DefinitionTooltip, { "aria-describedby": "", definition: "We're aware of a live incident potentially impacting our SaaS product. Please check our status page for details.", align: "bottom", openOnHover: true, style: {
+                                                    marginTop: "-1px",
+                                                    width: "calc(100vw - 400px)",
+                                                    borderBlockEnd: "none",
+                                                    overflow: "hidden",
+                                                    textOverflow: "ellipsis",
+                                                    textWrap: "nowrap",
+                                                    whiteSpace: "nowrap",
+                                                    fontSize: "14px",
+                                                }, children: _jsx("span", { children: "We're aware of a live incident potentially impacting our SaaS product. Please check our status page for details." }) }), _jsx(Link, { onClick: () => {
+                                                    window.open(camundaStatus.endpoint, "_blank");
+                                                }, inline: true, style: {
+                                                    cursor: "pointer",
+                                                    color: "$link-primary",
+                                                    marginLeft: "auto",
+                                                    marginRight: 0,
+                                                    textDecoration: "none",
+                                                    overflow: "hidden",
+                                                    whiteSpace: "nowrap",
+                                                    textWrap: "nowrap",
+                                                }, children: "Camunda status page" })] }) }) }), _jsx("div", { style: { height: "48px" } })] }));
+                }
+                return _jsx(_Fragment, {});
+            })(), helpCenter && _jsx(C3HelpCenter, { ...helpCenter })] }));
 };

package/lib/esm/src/components/c3-navigation/c3-navigation.types.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
-import { Tag } from "@carbon/react";
 import { Endpoints, Stage } from "../../api/endpoints.const";
-import { C3NavigationAppBarProps, C3NavigationInfoSideBarProps, C3NavigationNotificationsSideBarProps, C3NavigationOrgSideBarProps, C3NavigationUserSideBarProps } from "./c3-navigation-sidebar/c3-navigation-sidebar.types";
-import { C3ActionButtonsProps } from "./c3-navigation-actions/c3-action-buttons.types";
-import { C3HelpCenterProps } from "../c3-help-center/c3-help-center";
+import { TagColor } from "../c3-cluster-tag/c3-cluster-tag";
 import { CamundaClusterStage } from "../c3-cluster-tag/c3-cluster-tag.types";
+import { C3HelpCenterProps } from "../c3-help-center/c3-help-center";
+import { C3ActionButtonsProps } from "./c3-navigation-actions/c3-action-buttons.types";
+import { C3NavigationAppBarProps, C3NavigationInfoSideBarProps, C3NavigationNotificationsSideBarProps, C3NavigationOrgSideBarProps, C3NavigationUserSideBarProps } from "./c3-navigation-sidebar/c3-navigation-sidebar.types";
 export interface C3NavigationAppProps {
     prefix?: string;
     name: string;
@@ -38,7 +37,7 @@ export interface C3NavigationNavBarProps {
     tags?: Array<{
         label: string;
         key: string;
-        color?: React.ComponentProps<typeof Tag>["type"];
+        color?: TagColor;
         renderIcon?: any;
         tooltip?: {
             content: React.ReactNode;

package/lib/esm/src/components/c3-navigation/c3-notification-provider/c3-notification-container.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { type FC } from "react";
 import { Notification as NotificationProps } from "../../../api/notifications";
 export declare const NotificationTitle: any;
 export declare const NotificationDescription: any;

package/lib/esm/src/components/c3-navigation/c3-notification-provider/c3-notification-container.js

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import styled from "styled-components";
 import { Button, Link, Tile } from "@carbon/react";
 import { Close } from "@carbon/react/icons";
@@ -87,25 +88,16 @@ const C3NotificationContainer = ({ description, state, timestamp, title, onDismi
         }
         return true;
     };
-    return (React.createElement(NotificationTile, { onMouseEnter: () => {
+    return (_jsxs(NotificationTile, { onMouseEnter: () => {
             setIsHovering(true);
         }, onMouseLeave: () => {
             setIsHovering(false);
-        } },
-        React.createElement(UnreadNotificationHeader, null,
-            (state === "new" || unread) && React.createElement(Dot, null),
-            React.createElement(NotificationHeader, null,
-                React.createElement(Timestamp, null, getReadableTimestamp(timestamp)),
-                React.createElement(CloseButton
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                , { 
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore
-                    kind: "ghost", hasIconOnly: true, iconDescription: "Dismiss", align: "bottom-right", renderIcon: Close, onClick: dismissNotification, size: "sm", "$show": isHovering }))),
-        React.createElement(NotificationTitle, null, title),
-        React.createElement(NotificationDescription, null, description),
-        meta && (React.createElement(LinkContainer, null,
-            React.createElement(Link, { href: meta.href, onClick: handleLinkClick, visited: true, style: { fontSize: "var(--cds-helper-text-01-font-size)" } }, meta.label)))));
+        }, children: [_jsxs(UnreadNotificationHeader, { children: [(state === "new" || unread) && _jsx(Dot, {}), _jsxs(NotificationHeader, { children: [_jsx(Timestamp, { children: getReadableTimestamp(timestamp) }), _jsx(CloseButton
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-ignore
+                            , { 
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                kind: "ghost", hasIconOnly: true, iconDescription: "Dismiss", align: "bottom-right", renderIcon: Close, onClick: dismissNotification, size: "sm", "$show": isHovering })] })] }), _jsx(NotificationTitle, { children: title }), _jsx(NotificationDescription, { children: description }), meta && (_jsx(LinkContainer, { children: _jsx(Link, { href: meta.href, onClick: handleLinkClick, visited: true, style: { fontSize: "var(--cds-helper-text-01-font-size)" }, children: meta.label }) }))] }));
 };
 export default C3NotificationContainer;

package/lib/esm/src/components/c3-navigation/c3-notification-provider/c3-notification-provider.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useContext, useEffect, useRef, useState, } from "react";
 import { NotificationService, } from "../../../api/notifications";
 import { C3UserConfigurationContext } from "../../c3-user-configuration/c3-user-configuration-provider";
@@ -85,7 +86,7 @@ const C3NotificationProvider = ({ children, }) => {
             });
         }
     };
-    return (React.createElement(C3NotificationContext.Provider, { value: {
+    return (_jsx(C3NotificationContext.Provider, { value: {
             enabled,
             notifications,
             markAsRead,
@@ -94,12 +95,11 @@ const C3NotificationProvider = ({ children, }) => {
             dismissAll,
             analytics,
             isFetching,
-        } }, children));
+        }, children: children }));
 };
 export function withNotifications(Component) {
     return function WithNamespace(props) {
-        return (React.createElement(C3NotificationProvider, null,
-            React.createElement(Component, { ...props })));
+        return (_jsx(C3NotificationProvider, { children: _jsx(Component, { ...props }) }));
     };
 }
 export default C3NotificationProvider;

package/lib/esm/src/components/c3-navigation/c3-org-name.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { body01, label01 } from "../styles";
 const OrgNameWrapper = styled.div `
@@ -31,6 +31,4 @@ const SingleOrgName = styled.div `
 	overflow: hidden;
 	max-width: 150px;
 `;
-export const OrgName = ({ orgName, isSuperOrg, activeSuperOrg }) => (React.createElement(OrgNameWrapper, null, activeSuperOrg && !isSuperOrg ? (React.createElement(SuperOrgWrapper, { title: orgName },
-    React.createElement(SuperOrgName, null, activeSuperOrg),
-    React.createElement(TeamName, null, orgName))) : (React.createElement(SingleOrgName, { className: "bodyText", title: orgName }, orgName))));
+export const OrgName = ({ orgName, isSuperOrg, activeSuperOrg }) => (_jsx(OrgNameWrapper, { children: activeSuperOrg && !isSuperOrg ? (_jsxs(SuperOrgWrapper, { title: orgName, children: [_jsx(SuperOrgName, { children: activeSuperOrg }), _jsx(TeamName, { children: orgName })] })) : (_jsx(SingleOrgName, { className: "bodyText", title: orgName, children: orgName })) }));

package/lib/esm/src/components/c3-navigation/c3-org-sidebar/c3-org-sidebar.js

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
 import { Button, FormLabel, TreeNode, TreeView } from "@carbon/react";
 import { Enterprise } from "@carbon/react/icons";
 import C3NavigationSideBar from "../c3-navigation-sidebar/c3-navigation-sidebar";
@@ -12,10 +13,10 @@ function renderTree({ nodes, expanded, withIcons = false }) {
     if (!nodes) {
         return;
     }
-    return nodes.map(({ children, renderIcon, isExpanded, isDisabled, ...nodeProps }) => (React.createElement(TreeNode, { key: nodeProps.id, renderIcon: withIcons ? renderIcon : null, isExpanded: expanded ?? isExpanded, ...(isDisabled && {
+    return nodes.map(({ children, renderIcon, isExpanded, isDisabled, ...nodeProps }) => (_jsx(TreeNode, { renderIcon: withIcons ? renderIcon : null, isExpanded: expanded ?? isExpanded, ...(isDisabled && {
             style: { cursor: "not-allowed" },
             "aria-disabled": "true",
-        }), ...nodeProps }, renderTree({ nodes: children, expanded, withIcons }))));
+        }), ...nodeProps, children: renderTree({ nodes: children, expanded, withIcons }) }, nodeProps.id)));
 }
 const C3OrgSidebar = ({ sideBar }) => {
     const { customElements, switchToOrg, manageOrg, manageSuperorg, manageTeam, ...sideBarProps } = sideBar;
@@ -128,68 +129,55 @@ const C3OrgSidebar = ({ sideBar }) => {
         };
         return acc;
     }, {}) ?? {};
-    return (React.createElement(C3NavigationSideBar, { sideBar: {
+    return (_jsx(C3NavigationSideBar, { sideBar: {
             ...sideBarProps,
             ariaLabel: sideBarProps.ariaLabel || "Organization Sidebars",
-        }, icon: React.createElement(Enterprise, { size: 20 }) }, (customElements?.activeOrganization || activeOrg) && (React.createElement(React.Fragment, null,
-        isCustomized ? (React.createElement(ActiveOrgWrapperCustom, null,
-            React.createElement("div", { style: {
-                    overflow: "hidden",
-                    display: "grid",
-                    gap: "4px",
-                } },
-                React.createElement(FormLabel, null, activeOrganization.activeLabel),
-                React.createElement(ActiveOrgName, { className: "textPrimary", title: activeOrganization.orgName, "$isCustomized": true }, activeOrganization.orgName)),
-            React.createElement(Button, { size: "md", kind: "ghost", onClick: () => {
-                    activeOrganization.action.onClick();
-                    onManageCustomOrg();
-                }, tabIndex: itemTabIndex }, activeOrganization.action?.label))) : (React.createElement(ActiveOrgWrapper, { "$scrollBarWidth": scrollBarWidth },
-            React.createElement(FormLabel, null, activeOrganization.activeLabel),
-            React.createElement(ActiveOrgNameWrapper, null,
-                React.createElement(ActiveOrgName, { className: "textPrimary", title: activeOrganization.orgName }, activeOrganization.orgName),
-                activeOrg?.uuid && domain && (React.createElement(ManageOrgOverflowMenu, { canManage: canUserManageOrg(activeOrg), canLeave: canUserLeaveOrg(activeOrg), isLastOrg: isLastOrg, isOrgMember: isMemberOfTeam(activeOrg.uuid), orgName: activeOrg.name, onManage: () => onManageOrg(activeOrg), onRequestToLeave: () => {
-                        setOrgToLeave(activeOrg);
-                        setIsConfirmLeaveModalOpen(true);
-                    } }))),
-            React.createElement(ConfirmLeaveModal, { isOpen: isConfirmLeaveModalOpen, orgName: orgToLeave?.name || "", onConfirm: confirmLeaveOrg, onCancel: () => {
-                    setIsConfirmLeaveModalOpen(false);
-                    setOrgToLeave(null);
-                }, loadingStatus: loadingStatus }))),
-        React.createElement(SwitcherDivider, null),
-        React.createElement(OrgListWrapper, null,
-            React.createElement(TreeView, { label: "All organizations", ...(activeOrg?.uuid ? { selected: [activeOrg?.uuid] } : {}) }, renderTree({
-                nodes: Object.values(groupedBySuperOrg)?.map((element) => {
-                    const userTeams = Object.values(element?.childOrganizations)?.filter((child) => isMemberOfTeam(child.uuid));
-                    const defaultIsExpanded = (activeOrg?.uuid === element.uuid ||
-                        !isMemberOfTeam(element.uuid) ||
-                        userTeams?.some((team) => activeOrg?.uuid === team.uuid)) ??
-                        false;
-                    return {
-                        children: userTeams?.length > 0
-                            ? userTeams.map((team) => {
+        }, icon: _jsx(Enterprise, { size: 20 }), children: (customElements?.activeOrganization || activeOrg) && (_jsxs(_Fragment, { children: [isCustomized ? (_jsxs(ActiveOrgWrapperCustom, { children: [_jsxs("div", { style: {
+                                overflow: "hidden",
+                                display: "grid",
+                                gap: "4px",
+                            }, children: [_jsx(FormLabel, { children: activeOrganization.activeLabel }), _jsx(ActiveOrgName, { className: "textPrimary", title: activeOrganization.orgName, "$isCustomized": true, children: activeOrganization.orgName })] }), _jsx(Button, { size: "md", kind: "ghost", onClick: () => {
+                                activeOrganization.action.onClick();
+                                onManageCustomOrg();
+                            }, tabIndex: itemTabIndex, children: activeOrganization.action?.label })] })) : (_jsxs(ActiveOrgWrapper, { "$scrollBarWidth": scrollBarWidth, children: [_jsx(FormLabel, { children: activeOrganization.activeLabel }), _jsxs(ActiveOrgNameWrapper, { children: [_jsx(ActiveOrgName, { className: "textPrimary", title: activeOrganization.orgName, children: activeOrganization.orgName }), activeOrg?.uuid && domain && (_jsx(ManageOrgOverflowMenu, { canManage: canUserManageOrg(activeOrg), canLeave: canUserLeaveOrg(activeOrg), isLastOrg: isLastOrg, isOrgMember: isMemberOfTeam(activeOrg.uuid), orgName: activeOrg.name, onManage: () => onManageOrg(activeOrg), onRequestToLeave: () => {
+                                        setOrgToLeave(activeOrg);
+                                        setIsConfirmLeaveModalOpen(true);
+                                    } }))] }), _jsx(ConfirmLeaveModal, { isOpen: isConfirmLeaveModalOpen, orgName: orgToLeave?.name || "", onConfirm: confirmLeaveOrg, onCancel: () => {
+                                setIsConfirmLeaveModalOpen(false);
+                                setOrgToLeave(null);
+                            }, loadingStatus: loadingStatus })] })), _jsx(SwitcherDivider, {}), _jsx(OrgListWrapper, { children: _jsx(TreeView, { label: "All organizations", ...(activeOrg?.uuid ? { selected: [activeOrg?.uuid] } : {}), children: renderTree({
+                            nodes: Object.values(groupedBySuperOrg)?.map((element) => {
+                                const userTeams = Object.values(element?.childOrganizations)?.filter((child) => isMemberOfTeam(child.uuid));
+                                const defaultIsExpanded = (activeOrg?.uuid === element.uuid ||
+                                    !isMemberOfTeam(element.uuid) ||
+                                    userTeams?.some((team) => activeOrg?.uuid === team.uuid)) ??
+                                    false;
                                 return {
-                                    id: team.uuid,
-                                    label: team.name,
-                                    isExpanded: false,
-                                    value: team.uuid,
+                                    children: userTeams?.length > 0
+                                        ? userTeams.map((team) => {
+                                            return {
+                                                id: team.uuid,
+                                                label: team.name,
+                                                isExpanded: false,
+                                                value: team.uuid,
+                                                renderIcon: null,
+                                                onSelect: canSwitchToOrg(team.uuid)
+                                                    ? () => switchOrg(team.uuid, true)
+                                                    : undefined,
+                                            };
+                                        })
+                                        : null,
+                                    id: element.uuid,
+                                    label: element.name,
+                                    value: element.uuid,
                                     renderIcon: null,
-                                    onSelect: canSwitchToOrg(team.uuid)
-                                        ? () => switchOrg(team.uuid, true)
+                                    isExpanded: defaultIsExpanded,
+                                    isDisabled: !isMemberOfTeam(element.uuid),
+                                    onSelect: canSwitchToOrg(element.uuid)
+                                        ? () => switchOrg(element.uuid, true)
                                         : undefined,
                                 };
-                            })
-                            : null,
-                        id: element.uuid,
-                        label: element.name,
-                        value: element.uuid,
-                        renderIcon: null,
-                        isExpanded: defaultIsExpanded,
-                        isDisabled: !isMemberOfTeam(element.uuid),
-                        onSelect: canSwitchToOrg(element.uuid)
-                            ? () => switchOrg(element.uuid, true)
-                            : undefined,
-                    };
-                }),
-            })))))));
+                            }),
+                        }) }) })] })) }));
 };
 export default C3OrgSidebar;

package/lib/esm/src/components/c3-navigation/c3-org-sidebar/components.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Dropdown, Modal, OverflowMenu, OverflowMenuItem, Popover, PopoverContent, } from "@carbon/react";
 import styled from "styled-components";
@@ -36,13 +37,7 @@ export const ActiveOrgName = styled.div `
 	white-space: nowrap;
 `;
 export const ConfirmLeaveModal = ({ isOpen, onConfirm, onCancel, orgName, loadingStatus }) => {
-    return (React.createElement(Modal, { danger: true, open: isOpen, modalHeading: "Leave organization", primaryButtonText: "Leave", secondaryButtonText: "Cancel", closeButtonLabel: "Cancel", loadingStatus: loadingStatus, onRequestClose: onCancel, onRequestSubmit: onConfirm, onSecondarySubmit: onCancel, loadingDescription: "Leaving" },
-        React.createElement("p", null,
-            "Are you sure you want to leave ",
-            React.createElement("strong", null, orgName),
-            "?"),
-        React.createElement("br", null),
-        React.createElement("p", null, "Leaving this organization will remove you from all associated teams and projects. To regain access you would need to reach out to the admin/owner of this organization.")));
+    return (_jsxs(Modal, { danger: true, open: isOpen, modalHeading: "Leave organization", primaryButtonText: "Leave", secondaryButtonText: "Cancel", closeButtonLabel: "Cancel", loadingStatus: loadingStatus, onRequestClose: onCancel, onRequestSubmit: onConfirm, onSecondarySubmit: onCancel, loadingDescription: "Leaving", children: [_jsxs("p", { children: ["Are you sure you want to leave ", _jsx("strong", { children: orgName }), "?"] }), _jsx("br", {}), _jsx("p", { children: "Leaving this organization will remove you from all associated teams and projects. To regain access you would need to reach out to the admin/owner of this organization." })] }));
 };
 const PopoverWrapper = styled(Popover) `
 	max-width: 11rem;
@@ -59,17 +54,13 @@ const StyledOverflowMenu = styled(OverflowMenu) `
 `;
 export const ManageOrgOverflowMenu = ({ canManage, canLeave, isLastOrg, isOrgMember, onManage, onRequestToLeave, orgName, }) => {
     const [isPopoverShown, setIsPopoverShown] = React.useState(false);
-    const leaveMenuItem = (React.createElement(OverflowMenuItem, { itemText: "Leave organization", disabled: !canLeave, onClick: onRequestToLeave, onMouseOver: () => setIsPopoverShown(true), onMouseLeave: () => setIsPopoverShown(false), "aria-label": `Leave organization - ${orgName}` }));
+    const leaveMenuItem = (_jsx(OverflowMenuItem, { itemText: "Leave organization", disabled: !canLeave, onClick: onRequestToLeave, onMouseOver: () => setIsPopoverShown(true), onMouseLeave: () => setIsPopoverShown(false), "aria-label": `Leave organization - ${orgName}` }));
     const popoverLabel = !isOrgMember
         ? "You are not a member of this team. You can only leave teams you are a member of."
         : isLastOrg
             ? "You need to be a member of at least one organization. Join a different organization first if you wish to leave."
             : "Owners cannot leave an organization directly. Assign another user as an owner if you wish to leave.";
-    return (React.createElement(StyledOverflowMenu, { size: "sm", flipped: true, "aria-label": "Organization options menu", "data-floating-menu-container": "cds--header-panel", ...{ align: "top-right" } },
-        canManage && (React.createElement(OverflowMenuItem, { itemText: "Manage organization", onClick: onManage, "aria-label": `Manage organization - ${orgName}` })),
-        canLeave ? (leaveMenuItem) : (React.createElement(PopoverWrapper, { open: isPopoverShown, label: popoverLabel, align: "bottom-right" },
-            leaveMenuItem,
-            React.createElement(PopoverContent, null, popoverLabel)))));
+    return (_jsxs(StyledOverflowMenu, { size: "sm", flipped: true, "aria-label": "Organization options menu", "data-floating-menu-container": "cds--header-panel", align: "top-right", children: [canManage && (_jsx(OverflowMenuItem, { itemText: "Manage organization", onClick: onManage, "aria-label": `Manage organization - ${orgName}` })), canLeave ? (leaveMenuItem) : (_jsxs(PopoverWrapper, { open: isPopoverShown, label: popoverLabel, align: "bottom-right", children: [leaveMenuItem, _jsx(PopoverContent, { children: popoverLabel })] }))] }));
 };
 export const StyledDropdown = styled(Dropdown) `
 	grid-gap: 0;
@@ -85,4 +76,23 @@ export const StyledDropdown = styled(Dropdown) `
 `;
 export const OrgListWrapper = styled.div `
 	padding: 1rem 1rem 15px;
+
+	.cds--tree-node__label__text {
+		white-space: normal !important;
+		word-wrap: break-word;
+		word-break: break-word;
+		max-width: 200px;
+		display: inline-block;
+	}
+
+	.cds--tree-node__label__text-button {
+		white-space: normal !important;
+		height: auto !important;
+		min-height: 2rem;
+		padding: 0.5rem 1rem;
+	}
+
+	.cds--tree-node {
+		min-height: auto;
+	}
 `;

package/lib/esm/src/components/c3-navigation/helpers.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 export declare function useOnClickOutside(handler: (e: Event) => void): {
-    panelRef: import("react").MutableRefObject<HTMLElement | null>;
+    panelRef: import("@types/react").MutableRefObject<HTMLElement | null>;
     setPanelRef: (node: unknown) => void;
-    iconRef: import("react").MutableRefObject<HTMLElement | null>;
+    iconRef: import("@types/react").MutableRefObject<HTMLElement | null>;
     setIconRef: (node: unknown) => void;
 };
 export declare function executeMediaQuery(mediaQuery: string): MediaQueryList;

package/lib/esm/src/components/c3-navigation/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-declare const _default: import("react").ComponentType<import("./c3-navigation.types").C3NavigationProps>;
+declare const _default: import("@types/react").ComponentType<import("./c3-navigation.types").C3NavigationProps>;
 export default _default;

package/lib/esm/src/components/c3-navigation/stories/story-helpers.js

@@ -1,4 +1,5 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// React import not required with automatic JSX runtime
 import { Link } from "@carbon/react";
 import { ArrowRight, TrashCan, Add } from "@carbon/react/icons";
 export function createAppProps() {
@@ -110,10 +111,7 @@ export function createNavBarBarProps({ orgName = "Camunda", elements = undefined
                 label: "tooltip tag",
                 color: "purple",
                 tooltip: {
-                    content: (React.createElement("p", null,
-                        "tooltip popover with a",
-                        " ",
-                        React.createElement(Link, { href: "http://camunda.com/" }, "link"))),
+                    content: (_jsxs("p", { children: ["tooltip popover with a", " ", _jsx(Link, { href: "http://camunda.com/", children: "link" })] })),
                     buttonLabel: "open the tooltip",
                 },
             },

package/lib/esm/src/components/c3-navigation/stories/story-templates.d.ts

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import { C3Navigation } from "../c3-navigation";
-import { StoryFn } from "@storybook/react";
+import { StoryFn } from "@storybook/react-webpack5";
 export declare const DefaultTemplate: StoryFn<typeof C3Navigation>;
 export declare const SuperUserToggle: FC<{
     isActive?: boolean;