@camunda/camunda-composite-components 0.6.4 → 0.7.0

package/lib/esm/package.json

@@ -4,7 +4,7 @@
         "type": "git",
         "url": "git+https://github.com/camunda-cloud/camunda-composite-components.git"
     },
-    "version": "0.6.3-rc.4",
+    "version": "0.6.4",
     "scripts": {
         "clean": "rimraf lib/",
         "build": "yarn clean && tsc",
@@ -30,29 +30,29 @@
         "test": "yarn test:ts && yarn test:storybook && yarn test:visual-regression:docker"
     },
     "devDependencies": {
-        "@babel/core": "7.24.4",
-        "@babel/preset-env": "7.24.4",
+        "@babel/core": "7.24.5",
+        "@babel/preset-env": "7.24.5",
         "@babel/preset-react": "7.24.1",
         "@babel/preset-typescript": "7.24.1",
-        "@carbon/react": "1.54.0",
+        "@carbon/react": "1.55.0",
         "@mdx-js/react": "3.0.1",
         "@playwright/test": "1.42.1",
         "@semantic-release/changelog": "6.0.3",
         "@semantic-release/git": "10.0.1",
-        "@storybook/addon-a11y": "8.0.9",
-        "@storybook/addon-actions": "8.0.9",
-        "@storybook/addon-docs": "8.0.9",
-        "@storybook/addon-essentials": "8.0.9",
-        "@storybook/addon-interactions": "8.0.9",
-        "@storybook/addon-links": "8.0.9",
-        "@storybook/addon-mdx-gfm": "8.0.9",
+        "@storybook/addon-a11y": "8.0.10",
+        "@storybook/addon-actions": "8.0.10",
+        "@storybook/addon-docs": "8.0.10",
+        "@storybook/addon-essentials": "8.0.10",
+        "@storybook/addon-interactions": "8.0.10",
+        "@storybook/addon-links": "8.0.10",
+        "@storybook/addon-mdx-gfm": "8.0.10",
         "@storybook/addon-webpack5-compiler-babel": "3.0.3",
-        "@storybook/blocks": "8.0.9",
+        "@storybook/blocks": "8.0.10",
         "@storybook/preset-scss": "1.0.3",
-        "@storybook/react": "8.0.9",
-        "@storybook/react-webpack5": "8.0.9",
-        "@storybook/test": "8.0.9",
-        "@storybook/test-runner": "0.17.0",
+        "@storybook/react": "8.0.10",
+        "@storybook/react-webpack5": "8.0.10",
+        "@storybook/test": "8.0.10",
+        "@storybook/test-runner": "0.18.0",
         "@types/carbon-components-react": "7.55.10",
         "@types/event-source-polyfill": "1.0.5",
         "@types/mixpanel-browser": "2.49.0",
@@ -86,7 +86,7 @@
         "sass-loader": "14.1.1",
         "semantic-release": "23.0.7",
         "serve": "14.2.1",
-        "storybook": "8.0.9",
+        "storybook": "8.0.10",
         "style-loader": "4.0.0",
         "styled-components": "6.1.8",
         "typescript": "5.4.4",

package/lib/esm/src/api/api.d.ts

@@ -19,4 +19,10 @@ export interface RequestPayload {
     };
     enableLogs?: boolean;
 }
-export declare function request(payload: RequestPayload): Promise<any>;
+export type RequestResponse<R = undefined> = {
+    success: boolean;
+    result?: R;
+    status?: number;
+    error?: string;
+};
+export declare const request: <R = undefined>(payload: RequestPayload) => Promise<RequestResponse<R>>;

package/lib/esm/src/api/api.js

@@ -1,6 +1,6 @@
 import { getEndpoint, NOTIFICATIONS, ACCOUNTS, } from "./endpoints.const";
 import { JWTUtils } from "./jwt.utils";
-export async function request(payload) {
+export const request = async (payload) => {
     const headers = {};
     if (payload.camundaAuth) {
         if (JWTUtils.isExpired(payload.camundaAuth.token) &&
@@ -55,28 +55,32 @@ export async function request(payload) {
             headers,
             body,
         });
-        let success = true;
-        if (response.status >= 400 && response.status < 500) {
-            success = false;
-        }
-        if (response.status >= 500) {
-            success = false;
-        }
-        if (!success && payload.enableLogs) {
-            console.error(response.statusText, response.status);
+        if (response.status >= 400) {
+            if (payload.enableLogs)
+                console.error(response.statusText, response.status);
+            return {
+                success: false,
+                status: response.status,
+                error: response.statusText,
+            };
         }
         const responseType = payload.responseType ?? type;
+        let res;
         switch (responseType) {
             case "json":
-                return response.json();
+                res = await response.json();
+                break;
             case "text":
-                return response.text();
+                res = await response.text();
+                break;
             default:
-                return response;
+                res = response;
         }
+        return { success: true, result: res };
     }
     catch (error) {
         if (payload.enableLogs)
             console.error("API request failed:", error);
+        return { success: false, error: error?.toString() };
     }
-}
+};

package/lib/esm/src/api/help-center.d.ts

@@ -1,8 +1,8 @@
 import { HelpCenterConfig } from "../components/c3-help-center/defaultHelpCenterConfig";
 import { Persona, TileConfig, WpCardType } from "../components/c3-help-center/c3-help-center.types";
 import { OnboardingConfig } from "../components/c3-onboarding-survey/defaultOnboardingConfig";
-import { RequestPayload } from "./api";
-export declare const getConfig: (accessToken: string, audience: string, orgId: string) => Promise<HelpCenterConfig | null>;
+import { RequestPayload, RequestResponse } from "./api";
+export declare const getConfig: (accessToken: string, audience: string, orgId: string) => Promise<RequestResponse<HelpCenterConfig | null>>;
 export declare const getTiles: ({ accessToken, tileConfig, salesPlanType, clusterIds, persona, flags, cloudAudience, }: {
     accessToken: string;
     tileConfig: TileConfig[];
@@ -13,19 +13,19 @@ export declare const getTiles: ({ accessToken, tileConfig, salesPlanType, cluste
     clusterIds: string[];
     salesPlanType: string;
     flags: string[];
-}) => Promise<WpCardType[]>;
+}) => Promise<RequestResponse<WpCardType[]>>;
 export declare const getOnboardingConfig: ({ camundaAuth, audience, orgId, }: {
     audience: string;
     camundaAuth: RequestPayload["camundaAuth"];
     orgId: string;
-}) => Promise<OnboardingConfig>;
+}) => Promise<RequestResponse<OnboardingConfig>>;
 export declare const updatePersona: ({ newPersona, audience, accessToken, orgId, userId, }: {
     newPersona: Persona;
     audience: string;
     orgId: string;
     userId: string;
     accessToken: string;
-}) => Promise<void>;
+}) => Promise<RequestResponse<undefined>>;
 export declare const submitSurvey: ({ audience, token, data, }: {
     audience: string;
     token: string;
@@ -33,9 +33,9 @@ export declare const submitSurvey: ({ audience, token, data, }: {
         email: string;
         orgUuid: string;
     };
-}) => Promise<void>;
+}) => Promise<RequestResponse<undefined>>;
 export declare const submitFeedback: ({ token, audience, formData, }: {
     token: string;
     audience: string;
     formData: FormData;
-}) => Promise<any>;
+}) => Promise<RequestResponse<undefined>>;

package/lib/esm/src/api/notifications.d.ts

@@ -1,4 +1,5 @@
 import { C3NotificationsProps } from "../components/c3-navigation/c3-navigation.types";
+import { RequestResponse } from "./api";
 export interface Notification {
     uuid: string;
     userId?: string;
@@ -25,7 +26,7 @@ export interface Notification {
 }
 export type AnalyticsEvent = "notification-panel-opened" | "notification-clicked-cta";
 export declare class NotificationService {
-    static getNotifications(options: C3NotificationsProps): Promise<Notification[]>;
+    static getNotifications(options: C3NotificationsProps): Promise<RequestResponse<Notification[]>>;
     static sendAnalyticsEvent(options: C3NotificationsProps, eventOptions: {
         event: AnalyticsEvent;
         id?: string;

package/lib/esm/src/api/organizations.d.ts

@@ -1,3 +1,4 @@
+import { RequestResponse } from "./api";
 export type StartingPrice = {
     amount: number;
     currency: string;
@@ -6,4 +7,9 @@ export type StartingPrice = {
 export declare const getStartingPrice: ({ token, audience, }: {
     token: string;
     audience: string;
-}) => Promise<StartingPrice>;
+}) => Promise<RequestResponse<StartingPrice>>;
+export declare const leaveOrganization: ({ token, audience, orgId, }: {
+    token: string;
+    audience: string;
+    orgId: string;
+}) => Promise<RequestResponse>;

package/lib/esm/src/api/organizations.js

@@ -4,3 +4,8 @@ export const getStartingPrice = async ({ token, audience, }) => request({
     camundaAuth: { token },
     responseType: "json",
 });
+export const leaveOrganization = async ({ token, audience, orgId, }) => request({
+    url: `https://accounts.${audience}/external/organizations/${orgId}/membership`,
+    camundaAuth: { token },
+    method: "delete",
+});

package/lib/esm/src/api/profile.d.ts

@@ -1,3 +1,4 @@
+import { RequestResponse } from "./api";
 import { C3NotificationsProps } from "../components/c3-navigation/c3-navigation.types";
 import { Theme } from "../components/c3-user-configuration/c3-profile-provider/c3-profile-provider";
 import { Organization } from "../utils/camunda.types";
@@ -16,5 +17,5 @@ export type UpdateThemeOptions = C3NotificationsProps & {
     theme: Profile["theme"];
 };
 export declare const updateTheme: ({ endpoints, stage, userToken, getNewUserToken, theme, }: UpdateThemeOptions) => Promise<void>;
-export declare const getOrgs: (stage: string, accessToken: string) => Promise<Organization[] | null>;
-export declare const getClusters: (stage: string, accessToken: string, orgId: string) => Promise<Cluster[] | null>;
+export declare const getOrgs: (stage: string, accessToken: string) => Promise<RequestResponse<Organization[] | null>>;
+export declare const getClusters: (stage: string, accessToken: string, orgId: string) => Promise<RequestResponse<Cluster[] | null>>;

package/lib/esm/src/components/c3-app-teaser/c3-app-teaser-page.js

@@ -15,12 +15,12 @@ export const C3AppTeaserPage = ({ appName, redirectToClusters, redirectToCreateC
         if (!userToken || !decodedAudience)
             return;
         (async () => {
-            const res = await getStartingPrice({
+            const { result } = await getStartingPrice({
                 token: userToken,
                 audience: decodedAudience,
             });
-            if (res) {
-                setPricing(res);
+            if (result) {
+                setPricing(result);
             }
         })();
     }, [userToken, decodedAudience]);

package/lib/esm/src/components/c3-empty-state/c3-empty-state.js

@@ -12,7 +12,7 @@ export const C3EmptyState = ({ icon, heading, description, button, link, }) => (
             React.createElement(Stack, { gap: 6 },
                 React.createElement("p", { style: { maxWidth: "400px" } }, description),
                 React.createElement(Stack, { gap: 5 },
-                    button && (React.createElement(React.Fragment, null, "items" in button ? (React.createElement(MenuButton, { size: "md", disabled: button.disabled, label: button.label }, button.items.map((menuItem) => {
+                    button && (React.createElement(React.Fragment, null, "items" in button ? (React.createElement(MenuButton, { size: "md", disabled: button.disabled, label: button.label, menuAlignment: "bottom" }, button.items.map((menuItem) => {
                         return (React.createElement(MenuItem, { key: menuItem.id, onClick: menuItem.onClick, renderIcon: menuItem.icon, disabled: menuItem.disabled, label: menuItem.label }));
                     }))) : (React.createElement(Button, { id: button.id, size: "md", onClick: button.onClick, renderIcon: button.icon, disabled: button.disabled }, button.label)))),
                     link && (React.createElement("div", null,

package/lib/esm/src/components/c3-help-center/c3-help-center.js

@@ -60,7 +60,7 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
     const fetchConfig = async () => {
         if (!userToken || !decodedAudience)
             return;
-        const onboardConfig = await getConfig(userToken, decodedAudience, activeOrganizationId);
+        const { result: onboardConfig } = await getConfig(userToken, decodedAudience, activeOrganizationId);
         setHelpCenterConfig(onboardConfig || defaultHelpCenterConfig);
     };
     const isFirstLoad = useRef(true);

package/lib/esm/src/components/c3-help-center/help-center.js

@@ -9,6 +9,17 @@ import { useC3HelpCenter } from "./c3-help-center-provider";
 import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 import { TabContentSkeleton } from "./tabs/tabContentSkeleton";
 import { StyledModalBody, StyledModalHeader } from "./styles";
+import styled from "styled-components";
+const StyledModalFooter = styled(ModalFooter) `
+	height: 62px;
+	padding-right: 16px;
+	padding-top: 16px;
+	padding-bottom: 16px;
+	border-top: 1px;
+	border-style: solid;
+	border-color: ${({ $hcTheme }) => $hcTheme === "light" ? "#E0E0E0" : "#727272"};
+	background-color: ${({ $hcTheme }) => $hcTheme === "light" ? "#FFFFFF" : "#161616"};
+`;
 export const HelpCenter = ({ configuration, persona, email, audience, flags = [], onRequestResumeSurvey, onRequestRetakeSurvey, onRequestClose, mixpanelTrack, theme, origin, initialTab, }) => {
     const { tabs } = configuration;
     const firstTab = tabs[0].id;
@@ -29,7 +40,7 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
             setIsLoadingTiles(true);
             for (const singleTab of tabs) {
                 if (token) {
-                    tiles[singleTab.id] = await getTiles({
+                    const { result } = await getTiles({
                         tileConfig: singleTab.tiles,
                         cloudAudience: audience,
                         persona,
@@ -38,6 +49,8 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
                         flags,
                         accessToken: token,
                     });
+                    if (result)
+                        tiles[singleTab.id] = result;
                 }
             }
             setIsLoadingTiles(false);
@@ -181,23 +194,17 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
                                             }, "aria-label": text }, text)));
                                 })))),
                         React.createElement("li", { style: { position: "absolute", bottom: "20px" } },
-                            React.createElement("ul", null, configuration.links.map((link) => (React.createElement(SideNavMenuItem, { key: link.label.split(" ").join("-").toLowerCase(), href: link.link, target: "_blank" },
+                            React.createElement("ul", null, configuration.links.map((link) => (React.createElement(SideNavMenuItem, { key: link.label.split(" ").join("-").toLowerCase(), href: link.link, 
+                                // eslint-disable-next-line
+                                // @ts-ignore
+                                target: "_blank" },
                                 React.createElement("span", { className: "cds--link" }, link.label)))))))),
                 content,
                 React.createElement("div", { style: { display: activeTab === "feedback" ? "block" : "none" } },
                     React.createElement(Feedback, { audience: audience, theme: theme, mixpanelTrack: mixpanelTrack, setHeader: (head) => {
                             header = head;
                         }, salesPlanType: organization?.salesPlan?.type ?? "" })))),
-        persona.complete && activeTab === "recommendations" && (React.createElement(ModalFooter, { style: {
-                height: "62px",
-                paddingRight: "16px",
-                paddingTop: "16px",
-                paddingBottom: "16px",
-                borderTop: "1px",
-                borderStyle: "solid",
-                borderColor: theme === "light" ? "#E0E0E0" : "#727272",
-                backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
-            } },
+        persona.complete && activeTab === "recommendations" && (React.createElement(StyledModalFooter, { "$hcTheme": theme },
             React.createElement("div", null,
                 React.createElement(Button, { kind: "tertiary", renderIcon: Undo, onClick: onRequestRetakeSurvey, size: "sm", style: {
                         maxWidth: "200px",

package/lib/esm/src/components/c3-help-center/styles.d.ts

@@ -1,4 +1,3 @@
-/// <reference path="../../../../../src/carbon.d.ts" />
 import { ModalBodyProps, ModalHeaderProps } from "@carbon/react";
 import { FC } from "react";
 export declare const headingStyles: import("styled-components").RuleSet<object>;

package/lib/esm/src/components/c3-help-center/tabs/feedback.js

@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import { Idea, Debug, Information, Chat } from "@carbon/react/icons";
 import { submitFeedback } from "../../../api/help-center";
 import { useC3UserConfiguration } from "../../c3-user-configuration/c3-user-configuration-provider";
+import styled from "styled-components";
 var ReportType;
 (function (ReportType) {
     ReportType["Feedback"] = "feedback";
@@ -21,6 +22,9 @@ var Placeholder;
     Placeholder["Idea"] = "Tell us how we can improve our product";
     Placeholder["Bug"] = "Tell us what went wrong";
 })(Placeholder || (Placeholder = {}));
+const StyledRadioTile = styled(RadioTile) `
+	min-width: 200px;
+`;
 export const Feedback = (props) => {
     props.setHeader("Share your feedback");
     const { userToken } = useC3UserConfiguration();
@@ -121,23 +125,17 @@ export const Feedback = (props) => {
                         columnGap: "12px",
                     } },
                     React.createElement("div", { style: { flexGrow: "1" } },
-                        React.createElement(RadioTile, { checked: selectedType === ReportType.Feedback, onClick: () => {
-                                setSelectedType(ReportType.Feedback);
-                            }, value: ReportType.Feedback, style: { minWidth: "200px" } },
+                        React.createElement(StyledRadioTile, { checked: selectedType === ReportType.Feedback, onChange: (value) => setSelectedType(value), value: ReportType.Feedback },
                             React.createElement(Stack, null,
                                 React.createElement(Chat, { size: "40" }),
                                 React.createElement("p", null, "General feedback")))),
                     React.createElement("div", { style: { flexGrow: "1" } },
-                        React.createElement(RadioTile, { checked: selectedType === ReportType.Idea, onClick: () => {
-                                setSelectedType(ReportType.Idea);
-                            }, value: ReportType.Idea, style: { minWidth: "200px" } },
+                        React.createElement(StyledRadioTile, { checked: selectedType === ReportType.Idea, onChange: (value) => setSelectedType(value), value: ReportType.Idea },
                             React.createElement(Stack, null,
                                 React.createElement(Idea, { size: "40" }),
                                 React.createElement("p", null, "Suggest an idea")))),
                     React.createElement("div", { style: { flexGrow: "1" } },
-                        React.createElement(RadioTile, { checked: selectedType === ReportType.Bug, onClick: () => {
-                                setSelectedType(ReportType.Bug);
-                            }, value: ReportType.Bug, style: { minWidth: "200px" } },
+                        React.createElement(StyledRadioTile, { checked: selectedType === ReportType.Bug, onChange: (value) => setSelectedType(value), value: ReportType.Bug },
                             React.createElement(Stack, null,
                                 React.createElement(Debug, { size: "40" }),
                                 React.createElement("p", null, "Report a bug"))))))),

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

@@ -11,7 +11,7 @@ export const C3NavigationAppBar = ({ app: appProps, appBar, forwardRef, navbar,
     const { currentApp, domain, analyticsTrack, currentClusterUuid } = useC3UserConfiguration();
     const { clusters, activeOrg, isEnabled } = useC3Profile();
     const [appBarOpen, setAppBarOpen] = useState(appBar.isOpen);
-    const [panelRef, iconRef] = useOnClickOutside(() => setAppBarOpen(false));
+    const { setPanelRef: panelRef, setIconRef: iconRef } = useOnClickOutside(() => setAppBarOpen(false));
     const [appElements, setAppElements] = useState([]);
     if (!appBar.elements && !isEnabled)
         console.warn("No app elements and user config provided. Please provide at least one of them.");
@@ -79,7 +79,13 @@ export const C3NavigationAppBar = ({ app: appProps, appBar, forwardRef, navbar,
     }, [JSON.stringify(clusters), currentApp, domain]);
     const appBarElements = appBar.elements || (clusters ? appElements : null);
     return (React.createElement(React.Fragment, null,
-        React.createElement(HeaderGlobalAction, { ref: iconRef, "aria-label": "Camunda components", isActive: appBarOpen, onClick: () => {
+        React.createElement(HeaderGlobalAction
+        // eslint-disable-next-line
+        // @ts-ignore
+        , { 
+            // eslint-disable-next-line
+            // @ts-ignore
+            ref: iconRef, "aria-label": "Camunda components", isActive: appBarOpen, onClick: () => {
                 setAppBarOpen(!appBarOpen);
             }, tooltipAlignment: "start", 
             /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */

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

@@ -7,5 +7,6 @@ declare const C3NavigationSidebarElement: (props: {
     itemTabIndex?: number;
     sideBar: C3NavigationSideBarProps;
     setSideBarOpen: (open: boolean) => void;
+    scrollBarWidth: number;
 }) => React.JSX.Element;
 export default C3NavigationSidebarElement;

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

@@ -1,34 +1,62 @@
 import { Button } from "@carbon/react";
 import React, { useEffect, useRef, useState } from "react";
 import { SwitcherDivider } from "./components";
+import styled from "styled-components";
+const Row = styled.div `
+	display: flex;
+	justify-content: start;
+	align-items: center;
+
+	.cds--switcher__item:nth-child(1) {
+		margin-block-start: 0;
+	}
+
+	&:nth-child(1) {
+		margin-block-start: 1rem;
+	}
+
+	.cds--overflow-menu-options {
+		z-index: 9000 !important;
+	}
+`;
 const C3NavigationSidebarElement = (props) => {
     const sideBarElementRef = useRef(null);
     const [isOverflown, setIsOverflown] = useState(false);
-    useEffect(() => {
+    const { overflowMenu } = props.element;
+    const handleSetIsOverflown = () => {
         const element = sideBarElementRef.current;
         setIsOverflown(element ? element.offsetWidth < element.scrollWidth : false);
-    }, [JSON.stringify(props.element)]);
+    };
+    useEffect(() => {
+        window.addEventListener("resize", handleSetIsOverflown);
+        handleSetIsOverflown();
+        return () => window.removeEventListener("resize", handleSetIsOverflown);
+    }, []);
     return (React.createElement(React.Fragment, null,
         props.element.preceedingDivider && React.createElement(SwitcherDivider, null),
-        React.createElement(Button, { style: {
-                width: "calc(16rem - 2px)",
-                ...(props.index === 0 &&
-                    (!("elements" in props.sideBar) || !props.sideBar.elements)
-                    ? { marginTop: "1.5rem" }
-                    : {}),
-            }, size: "sm", kind: props.element.kind ?? "ghost", className: "cds--switcher__item", onClick: () => {
-                if (props.element.onClick) {
-                    props.element.onClick();
-                }
-                if (props.sideBar.closeOnClick !== false) {
-                    props.setSideBarOpen(false);
-                }
-            }, tabIndex: props.itemTabIndex, renderIcon: props.element.renderIcon },
-            React.createElement("span", { ref: (el) => (sideBarElementRef.current = el), title: isOverflown ? props.element.label : "", style: {
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                    width: "100%",
-                } }, props.element.label))));
+        React.createElement(Row, null,
+            React.createElement(Button, { style: {
+                    width: overflowMenu
+                        ? `calc(14rem - ${props.scrollBarWidth}px)`
+                        : `calc(16rem - ${props.scrollBarWidth}px)`,
+                    ...(props.index === 0 &&
+                        (!("elements" in props.sideBar) || !props.sideBar.elements)
+                        ? { marginTop: "1.5rem" }
+                        : {}),
+                }, size: "sm", kind: props.element.kind ?? "ghost", className: "cds--switcher__item", onClick: () => {
+                    if (props.element.onClick) {
+                        props.element.onClick();
+                    }
+                    if (props.sideBar.closeOnClick !== false) {
+                        props.setSideBarOpen(false);
+                    }
+                }, tabIndex: props.itemTabIndex, renderIcon: props.element.renderIcon },
+                React.createElement("span", { ref: sideBarElementRef, title: isOverflown ? props.element.label : "", style: {
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        width: "100%",
+                    } }, props.element.label)),
+            overflowMenu)));
 };
 export default C3NavigationSidebarElement;

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

@@ -1,5 +1,5 @@
 import { Button, HeaderGlobalAction, HeaderPanel as CarbonHeaderPanel, Stack, SwitcherDivider, } from "@carbon/react";
-import React from "react";
+import React, { useEffect } from "react";
 import { useOnClickOutside } from "../helpers";
 import C3NavigationSidebarElement from "./c3-navigation-sidebar-element";
 import styled from "styled-components";
@@ -23,7 +23,7 @@ const BottomElements = styled.div `
 const C3NavigationSideBar = (props) => {
     const { icon, sideBar, children, version, bottomChildren } = props;
     const { callbacks, onOpen } = sideBar;
-    const { isOpen, setIsOpen: setOpenState } = useSidebarState()[sideBar.type];
+    const { isOpen, setIsOpen: setOpenState, scrollBarWidth, setScrollBarWidth, } = useSidebarState()[sideBar.type];
     const setIsOpen = (open) => {
         if (open) {
             callbacks?.beforeOpening?.();
@@ -34,16 +34,46 @@ const C3NavigationSideBar = (props) => {
             callbacks?.afterClosing?.();
     };
     const itemTabIndex = isOpen ? undefined : -1;
-    const [panelRef, iconRef] = useOnClickOutside(() => setIsOpen(false));
+    const { panelRef, setPanelRef, setIconRef } = useOnClickOutside(() => setIsOpen(false));
     const id = `c3-${sideBar.type}-sidebar`;
+    const handleResize = () => {
+        const scrollbarWidth = panelRef.current
+            ? panelRef.current?.offsetWidth - panelRef.current?.clientWidth
+            : 0;
+        setScrollBarWidth(scrollbarWidth);
+    };
+    useEffect(() => {
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    useEffect(() => {
+        if (isOpen) {
+            setTimeout(() => {
+                handleResize();
+            }, 120);
+        }
+    }, [isOpen]);
     return (React.createElement(Wrapper, null,
-        React.createElement(HeaderGlobalAction, { ref: iconRef, "aria-label": `Open ${sideBar.ariaLabel}`, "aria-expanded": isOpen, "aria-controls": id, onClick: () => {
+        React.createElement(HeaderGlobalAction
+        // eslint-disable-next-line
+        // @ts-ignore
+        , { 
+            // eslint-disable-next-line
+            // @ts-ignore
+            ref: setIconRef, "aria-label": `Open ${sideBar.ariaLabel}`, "aria-expanded": isOpen, "aria-controls": id, onClick: () => {
                 setIsOpen(!isOpen);
             }, isActive: isOpen, tooltipAlignment: sideBar.type === "user" ? "end" : "center", 
             /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
             /* @ts-ignore */
             leaveDelayMs: 100 }, icon),
-        React.createElement(HeaderPanel, { ref: panelRef, expanded: isOpen, id: id },
+        React.createElement(HeaderPanel
+        // eslint-disable-next-line
+        // @ts-ignore
+        , { 
+            // eslint-disable-next-line
+            // @ts-ignore
+            ref: setPanelRef, expanded: isOpen, id: id, style: { width: isOpen ? "calc(16rem)" : "0" } },
             React.createElement(Stack, null,
                 children,
                 sideBar.elements &&
@@ -52,7 +82,7 @@ const C3NavigationSideBar = (props) => {
                     sideBar.customElements &&
                     "activeOrganization" in sideBar.customElements &&
                     !sideBar.customElements?.activeOrganization && React.createElement(SwitcherDivider, null),
-                sideBar.elements?.map((element, index) => (React.createElement(C3NavigationSidebarElement, { key: element.key, element: element, index: index, sideBar: sideBar, setSideBarOpen: setIsOpen, itemTabIndex: itemTabIndex }))),
+                sideBar.elements?.map((element, index) => (React.createElement(C3NavigationSidebarElement, { key: element.key, element: element, index: index, sideBar: sideBar, setSideBarOpen: setIsOpen, itemTabIndex: itemTabIndex, scrollBarWidth: scrollBarWidth }))),
                 bottomChildren),
             version,
             React.createElement(BottomElements, null, sideBar.bottomElements &&
@@ -63,6 +93,6 @@ const C3NavigationSideBar = (props) => {
                         if (sideBar.closeOnClick !== false) {
                             setIsOpen(false);
                         }
-                    }, tabIndex: itemTabIndex }, element.label)))))));
+                    }, tabIndex: itemTabIndex, style: { width: `calc(16rem + 2px - ${scrollBarWidth}px)` } }, element.label)))))));
 };
 export default C3NavigationSideBar;

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

@@ -25,6 +25,7 @@ export type C3NavigationOrgSideBarProps = C3NavigationSideBarBaseProps & {
         activeOrganization?: CamundaOrg;
     };
     switchToOrg?: (orgId: string) => void;
+    manageOrg?: (orgId: string) => void;
 };
 export type C3NavigationInfoSideBarProps = C3NavigationSideBarBaseProps & {
     type: "info";

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

@@ -45,7 +45,7 @@ export const C3NotificationSidebar = ({ sideBar }) => {
     const { onLinkClick } = sideBar;
     const { notifications, markAsRead, dismiss, markAllAsRead, dismissAll, analytics, enabled, } = useContext(C3NotificationContext);
     const [unreadNotifications, setUnreadNotifications] = useState([]);
-    const hasUnreadNotifications = notifications.some(({ state }) => state === "new");
+    const hasUnreadNotifications = notifications?.some(({ state }) => state === "new");
     const { isOpen } = useNotificationSidebarState();
     const notificationsRef = useRef();
     notificationsRef.current = notifications;
@@ -86,7 +86,7 @@ export const C3NotificationSidebar = ({ sideBar }) => {
             ...sideBar,
             ariaLabel: sideBar.ariaLabel || "Notification Sidebar",
             callbacks: { beforeOpening, afterClosing },
-        }, icon: hasUnreadNotifications ? (React.createElement(C3NotificationsUnreadIcon, { size: 20 })) : (React.createElement(NotificationIcon, { size: 20, label: "Notifications" })) },
+        }, icon: hasUnreadNotifications ? (React.createElement(C3NotificationsUnreadIcon, { size: 20 })) : (React.createElement(NotificationIcon, { size: 20, "aria-label": "Notifications" })) },
         React.createElement(PanelHeader, null,
             React.createElement(PanelTitle, null, "Notifications"),
             notifications.length > 0 && (

package/lib/esm/src/components/c3-navigation/c3-navigation-sidebar/c3-sidebar-state-provider.d.ts

@@ -8,6 +8,8 @@ type DefaultValues = {
 type SideBarState = {
     isOpen: boolean;
     setIsOpen: (isOpen: boolean) => void;
+    scrollBarWidth: number;
+    setScrollBarWidth: (scrollBarWidth: number) => void;
 };
 type C3SidebarsState = {
     notifications: SideBarState;