@camunda/camunda-composite-components 0.0.38-rc1 → 0.0.38-rc2

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

@@ -1,15 +1,12 @@
-import React, { useState } from "react";
+import React from "react";
 import { SwitcherDivider } from "./components";
 import { Help } from "@carbon/react/icons";
 import C3NavigationSideBar from "./c3-navigation-sidebar";
 const C3InfoSidebar = ({ sideBar, }) => {
-    const { version, isOpen, ...sideBarProps } = sideBar;
-    const [isSidebarOpen, setIsSidebarOpen] = useState(isOpen);
+    const { version, ...sideBarProps } = sideBar;
     return (React.createElement(C3NavigationSideBar, { sideBar: {
             ...sideBarProps,
             ariaLabel: sideBarProps.ariaLabel || "Info Sidebar",
-            isOpen: isSidebarOpen,
-            setIsOpen: setIsSidebarOpen,
         }, icon: React.createElement(Help, { size: 20 }), bottomChildren: version !== undefined && (React.createElement(React.Fragment, null,
             React.createElement(SwitcherDivider, null),
             React.createElement("span", { className: "cds--switcher__item", style: {

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

@@ -3,6 +3,7 @@ import React from "react";
 import { useOnClickOutside } from "../helpers";
 import C3NavigationSidebarElement from "./c3-navigation-sidebar-element";
 import styled from "styled-components";
+import { useSidebarState } from "./c3-sidebar-state-provider";
 const HeaderPanel = styled(CarbonHeaderPanel) `
 	visibility: ${({ expanded }) => (expanded ? "visible" : "hidden")};
 	display: grid;
@@ -13,11 +14,21 @@ const HeaderPanel = styled(CarbonHeaderPanel) `
 `;
 const C3NavigationSideBar = (props) => {
     const { icon, sideBar, children, bottomChildren } = props;
-    const { isOpen, setIsOpen } = sideBar;
+    const { callbacks } = sideBar;
+    const { isOpen, setIsOpen: setOpenState } = useSidebarState()[sideBar.type];
+    const setIsOpen = (open) => {
+        if (open)
+            callbacks?.beforeOpening?.();
+        setOpenState(open);
+        if (!open)
+            callbacks?.afterClosing?.();
+    };
     const itemTabIndex = isOpen ? undefined : -1;
-    const [panelRef, iconRef] = useOnClickOutside(() => isOpen && setIsOpen(false));
+    const [panelRef, iconRef] = useOnClickOutside(() => setIsOpen(false));
     return (React.createElement(React.Fragment, null,
-        React.createElement(HeaderGlobalAction, { ref: iconRef, "aria-label": `Open ${sideBar.ariaLabel}`, onClick: () => setIsOpen(!isOpen), isActive: isOpen, tooltipAlignment: sideBar.type === "user" ? "end" : "center" }, icon),
+        React.createElement(HeaderGlobalAction, { ref: iconRef, "aria-label": `Open ${sideBar.ariaLabel}`, onClick: () => {
+                setIsOpen(!isOpen);
+            }, isActive: isOpen, tooltipAlignment: sideBar.type === "user" ? "end" : "center" }, icon),
         React.createElement(HeaderPanel, { ref: panelRef, "aria-label": sideBar.ariaLabel, expanded: isOpen },
             React.createElement(Stack, null,
                 children,

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

@@ -56,5 +56,8 @@ export declare type C3NavigationAppBarProps = C3NavigationSideBarBaseProps & {
     type: "app";
 };
 export declare type C3NavigationSideBarProps = {
-    setIsOpen: (isOpen: boolean) => void;
+    callbacks?: {
+        beforeOpening?: () => void;
+        afterClosing?: () => void;
+    };
 } & (C3NavigationOrgSideBarProps | C3NavigationInfoSideBarProps | C3NavigationUserSideBarProps | C3NavigationNotificationsSideBarProps | C3NavigationAppBarProps);

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

@@ -1,11 +1,12 @@
 import { Button } from "@carbon/react";
 import { Notification as NotificationIcon } from "@carbon/react/icons";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import { C3BellIcon, C3NotificationsUnreadIcon } from "../../../icons/c3-icons";
 import C3NotificationContainer, { NotificationDescription, NotificationTitle, } from "../c3-notification-provider/c3-notification-container";
 import { C3NotificationContext } from "../c3-notification-provider/c3-notification-provider";
 import C3NavigationSideBar from "./c3-navigation-sidebar";
+import { useNotificationSidebarState } from "./c3-sidebar-state-provider";
 const PanelHeader = styled.div `
 	background: var(--cds-layer-01);
 	box-shadow: inset 0px -1px 0px var(--cds-border-subtle-01);
@@ -41,33 +42,34 @@ const EmptyStateDescription = styled(NotificationDescription) `
 	margin-top: 8px;
 `;
 export const C3NotificationSidebar = ({ sideBar }) => {
-    const { isOpen, onLinkClick } = sideBar;
-    const [isSidebarOpen, setIsSidebarOpen] = useState(isOpen);
+    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 { isOpen } = useNotificationSidebarState();
+    const notificationsRef = useRef();
+    notificationsRef.current = notifications;
     const markAllAsReadSidebar = () => {
-        const newNotifications = notifications.filter((notification) => notification.state === "new");
-        markAllAsRead(newNotifications);
+        const newNotifications = notificationsRef.current?.filter((notification) => notification.state === "new");
+        if (newNotifications)
+            markAllAsRead(newNotifications);
     };
     const dismissAllSidebar = () => dismissAll(notifications);
-    const setIsOpen = (open) => {
-        if (open) {
-            // remember new notifications, so the dots can be displayed
-            setUnreadNotifications(notifications
+    const beforeOpening = () => {
+        // remember new notifications, so the dots can be displayed
+        if (notificationsRef.current)
+            setUnreadNotifications(notificationsRef.current
                 .filter(({ state }) => state === "new")
                 .map(({ uuid }) => uuid));
-            markAllAsReadSidebar();
-            if (enabled && analytics) {
-                analytics("notification-panel-opened");
-            }
-        }
-        setIsSidebarOpen(open);
-        if (!open) {
-            markAllAsReadSidebar();
-            setUnreadNotifications([]);
+        markAllAsReadSidebar();
+        if (enabled && analytics) {
+            analytics("notification-panel-opened");
         }
     };
+    const afterClosing = () => {
+        markAllAsReadSidebar();
+        setUnreadNotifications([]);
+    };
     const sortNotificationsDescending = (a, b) => {
         if (new Date(a.timestamp) > new Date(b.timestamp))
             return -1;
@@ -76,15 +78,14 @@ export const C3NotificationSidebar = ({ sideBar }) => {
     useEffect(() => {
         // mark notifications as read on unmount
         return () => {
-            if (isSidebarOpen)
+            if (isOpen)
                 markAllAsReadSidebar();
         };
     }, []);
     return (React.createElement(C3NavigationSideBar, { sideBar: {
             ...sideBar,
             ariaLabel: sideBar.ariaLabel || "Notification Sidebar",
-            isOpen: isSidebarOpen,
-            setIsOpen,
+            callbacks: { beforeOpening, afterClosing },
         }, icon: hasUnreadNotifications ? (React.createElement(C3NotificationsUnreadIcon, { size: 20 })) : (React.createElement(NotificationIcon, { size: 20, label: "Notifications" })) },
         React.createElement(PanelHeader, null,
             React.createElement(PanelTitle, null, "Notifications"),

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

@@ -1,18 +1,17 @@
-import React, { useState } from "react";
+import React from "react";
 import { Button, FormLabel } from "@carbon/react";
 import { Enterprise } from "@carbon/react/icons";
 import C3NavigationSideBar from "./c3-navigation-sidebar";
 import { SwitcherDivider } from "./components";
+import { useOrgSidebarState } from "./c3-sidebar-state-provider";
 const C3OrgSidebar = ({ sideBar }) => {
-    const { customElements, isOpen, ...sideBarProps } = sideBar;
+    const { customElements, ...sideBarProps } = sideBar;
     const activeOrganization = customElements?.activeOrganization;
-    const [isSidebarOpen, setIsSidebarOpen] = useState(isOpen);
-    const itemTabIndex = isSidebarOpen ? undefined : -1;
+    const { isOpen, setIsOpen } = useOrgSidebarState();
+    const itemTabIndex = isOpen ? undefined : -1;
     return (React.createElement(C3NavigationSideBar, { sideBar: {
             ...sideBarProps,
             ariaLabel: sideBarProps.ariaLabel || "Organization Sidebars",
-            isOpen: isSidebarOpen,
-            setIsOpen: setIsSidebarOpen,
         }, icon: React.createElement(Enterprise, { size: 20 }) }, activeOrganization && (React.createElement(React.Fragment, null,
         React.createElement("div", { style: {
                 padding: "1rem",
@@ -39,7 +38,7 @@ const C3OrgSidebar = ({ sideBar }) => {
             React.createElement(Button, { size: "md", kind: "ghost", key: "org-management", onClick: () => {
                     activeOrganization.action.onClick();
                     if (sideBar.closeOnClick !== false) {
-                        setIsSidebarOpen(false);
+                        setIsOpen(false);
                     }
                 }, tabIndex: itemTabIndex }, activeOrganization.action.label)),
         sideBar.elements && sideBar.elements.length > 0 && (React.createElement(React.Fragment, null,

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

@@ -0,0 +1,27 @@
+import React, { FC } from "react";
+declare type DefaultValues = {
+    isNotificationSidebarOpen?: boolean;
+    isOrgSidebarOpen?: boolean;
+    isInfoSidebarOpen?: boolean;
+    isUserSidebarOpen?: boolean;
+};
+declare type SideBarState = {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+};
+declare type C3SidebarsState = {
+    notifications: SideBarState;
+    org: SideBarState;
+    info: SideBarState;
+    user: SideBarState;
+};
+export declare const C3SidebarStateContext: React.Context<C3SidebarsState | null>;
+export declare const C3SidebarStateProvider: FC<DefaultValues & {
+    children?: React.ReactNode;
+}>;
+export declare const useSidebarState: () => C3SidebarsState;
+export declare const useNotificationSidebarState: () => SideBarState;
+export declare const useOrgSidebarState: () => SideBarState;
+export declare const useInfoSidebarState: () => SideBarState;
+export declare const useUserSidebarState: () => SideBarState;
+export {};

package/lib/esm/components/c3-navigation/c3-navigation-sidebar/c3-sidebar-state-provider.js

@@ -0,0 +1,27 @@
+import React, { useContext, useState } from "react";
+export const C3SidebarStateContext = React.createContext(null);
+export const C3SidebarStateProvider = ({ children, ...value }) => {
+    const [isNotificationSidebarOpen, setIsNotificationSidebarOpen] = useState(value.isNotificationSidebarOpen || false);
+    const [isOrgSidebarOpen, setIsOrgSidebarOpen] = useState(value.isOrgSidebarOpen || false);
+    const [isInfoSidebarOpen, setIsInfoSidebarOpen] = useState(value.isInfoSidebarOpen || false);
+    const [isUserSidebarOpen, setIsUserSidebarOpen] = useState(value.isUserSidebarOpen || false);
+    return (React.createElement(C3SidebarStateContext.Provider, { value: {
+            notifications: {
+                isOpen: isNotificationSidebarOpen,
+                setIsOpen: setIsNotificationSidebarOpen,
+            },
+            org: { isOpen: isOrgSidebarOpen, setIsOpen: setIsOrgSidebarOpen },
+            info: { isOpen: isInfoSidebarOpen, setIsOpen: setIsInfoSidebarOpen },
+            user: { isOpen: isUserSidebarOpen, setIsOpen: setIsUserSidebarOpen },
+        } }, children));
+};
+export const useSidebarState = () => {
+    const value = useContext(C3SidebarStateContext);
+    if (!value)
+        throw new Error("No C3SidebarStateContextProvider found.");
+    return value;
+};
+export const useNotificationSidebarState = () => useSidebarState().notifications;
+export const useOrgSidebarState = () => useSidebarState().org;
+export const useInfoSidebarState = () => useSidebarState().info;
+export const useUserSidebarState = () => useSidebarState().user;

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

@@ -1,20 +1,19 @@
-import React, { useState } from "react";
+import React from "react";
 import C3NavigationSideBar from "./c3-navigation-sidebar";
 import { FormLabel, RadioButton, RadioButtonGroup, Stack, SwitcherDivider, Toggle, } from "@carbon/react";
 import { UserAvatar } from "@carbon/react/icons";
+import { useUserSidebarState } from "./c3-sidebar-state-provider";
 const C3UserSidebar = ({ sideBar }) => {
-    const { customElements, isOpen, ...sideBarProps } = sideBar;
+    const { customElements, ...sideBarProps } = sideBar;
     const profile = customElements?.profile;
     const themeSelector = customElements?.themeSelector;
     const stageToggle = customElements?.stageToggle;
     const customSection = customElements?.customSection;
-    const [isSidebarOpen, setIsSidebarOpen] = useState(isOpen);
-    const itemTabIndex = isSidebarOpen ? undefined : -1;
+    const { isOpen } = useUserSidebarState();
+    const itemTabIndex = isOpen ? undefined : -1;
     return (React.createElement(C3NavigationSideBar, { sideBar: {
             ...sideBarProps,
             ariaLabel: sideBarProps.ariaLabel || "User Sidebar",
-            isOpen: isSidebarOpen,
-            setIsOpen: setIsSidebarOpen,
         }, icon: React.createElement(UserAvatar, { size: 20 }), bottomChildren: customSection },
         profile && (React.createElement("div", { style: {
                 padding: "1rem",

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { C3NavigationProps } from "./c3-navigation.types";
-export declare const C3Navigation: ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, infoButton, userSideBar, notificationSideBar, }: C3NavigationProps) => JSX.Element;
+export declare const C3Navigation: ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, userSideBar, notificationSideBar, }: C3NavigationProps) => JSX.Element;

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

@@ -8,7 +8,7 @@ import { useMediaQuery } from "./helpers";
 import { C3NavigationAppBar } from "./c3-navigation-appbar";
 import styled from "styled-components";
 import { CamundaLogo } from "../../icons/c3-icons";
-import { InfoButton } from "./c3-info-button";
+import { C3SidebarStateProvider } from "./c3-navigation-sidebar/c3-sidebar-state-provider";
 /**
  * UI SHELL
  * Docs: https://react.carbondesignsystem.com/?path=/story/components-ui-shell--fixed-side-nav
@@ -28,62 +28,75 @@ const StyledToggletipContent = styled(ToggletipContent) `
 		color: var(--cds-link-hover-text-color);
 	}
 `;
-export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, infoButton, userSideBar, notificationSideBar, }) => {
+export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, userSideBar, notificationSideBar, }) => {
     const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`);
     const appBarElementsLength = appBar.elements?.length ?? 0;
     const displayAppBar = appBarElementsLength > 0 || (!isLargeScreen && navbar.elements.length > 0);
-    return (React.createElement(HeaderContainer, { render: () => {
-            return (React.createElement(Header, { "aria-label": app.ariaLabel },
-                React.createElement(SkipToContent, null),
-                displayAppBar && (React.createElement(C3NavigationAppBar, { app: app, appBar: appBar, forwardRef: forwardRef, navbar: navbar })),
-                React.createElement(HeaderName, { element: forwardRef, prefix: "", ...app.routeProps },
-                    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, element: element.routeProps && forwardRef, isCurrentPage: element.isCurrentPage, ...element.routeProps },
-                    React.createElement("span", null, element.label))))),
-                React.createElement(HeaderGlobalBar, null,
-                    React.createElement("div", { style: {
-                            display: "grid",
-                            gridAutoFlow: "column",
-                            gap: ".5rem",
-                            paddingRight: ".5rem",
-                        } },
-                        navbar.tags &&
-                            navbar.tags.length > 0 &&
-                            navbar.tags.map((tag) => {
-                                if (tag?.tooltip !== undefined) {
-                                    const { content, buttonLabel } = tag.tooltip;
-                                    return (React.createElement("div", { key: tag.key, style: {
+    return (React.createElement(C3SidebarStateProvider, { isNotificationSidebarOpen: notificationSideBar?.isOpen, isOrgSidebarOpen: orgSideBar?.isOpen, isInfoSidebarOpen: infoSideBar?.isOpen, isUserSidebarOpen: userSideBar?.isOpen },
+        React.createElement(HeaderContainer, { render: () => {
+                return (React.createElement(Header, { "aria-label": app.ariaLabel },
+                    React.createElement(SkipToContent, null),
+                    displayAppBar && (React.createElement(C3NavigationAppBar, { app: app, appBar: appBar, forwardRef: forwardRef, navbar: navbar })),
+                    React.createElement(HeaderName, { element: forwardRef, prefix: "", ...app.routeProps },
+                        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, element: element.routeProps && forwardRef, isCurrentPage: element.isCurrentPage, ...element.routeProps },
+                        React.createElement("span", null, element.label))))),
+                    React.createElement(HeaderGlobalBar, null,
+                        React.createElement("div", { style: {
+                                display: "grid",
+                                gridAutoFlow: "column",
+                                gap: ".5rem",
+                                paddingRight: ".5rem",
+                            } },
+                            navbar.tags &&
+                                navbar.tags.length > 0 &&
+                                navbar.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.50rem",
+                                            } },
+                                            React.createElement(Toggletip, null,
+                                                React.createElement(ToggletipButton, { label: buttonLabel },
+                                                    React.createElement(Tag, { type: tag.color, style: {
+                                                            padding: "0 1rem",
+                                                            marginRight: 0,
+                                                            marginLeft: 0,
+                                                            cursor: "pointer",
+                                                        } }, tag.label)),
+                                                React.createElement(StyledToggletipContent, null, content))));
+                                    }
+                                    return (React.createElement(Tag, { key: tag.key, style: {
                                             height: "1.5rem",
-                                            marginTop: "0.50rem",
-                                        } },
-                                        React.createElement(Toggletip, null,
-                                            React.createElement(ToggletipButton, { label: buttonLabel },
-                                                React.createElement(Tag, { type: tag.color, style: {
-                                                        padding: "0 1rem",
-                                                        marginRight: 0,
-                                                        marginLeft: 0,
-                                                        cursor: "pointer",
-                                                    } }, tag.label)),
-                                            React.createElement(StyledToggletipContent, null, content))));
-                                }
-                                return (React.createElement(Tag, { key: tag.key, style: {
-                                        height: "1.5rem",
-                                        marginTop: "0.75rem",
-                                        padding: "0 1rem",
-                                    }, type: tag.color }, tag.label));
-                            }),
-                        navbar.orgName && (React.createElement("div", { className: "bodyText", style: {
-                                fontSize: "14px",
-                                lineHeight: "3rem",
-                                textOverflow: "ellipsis",
-                                whiteSpace: "nowrap",
-                                overflow: "hidden",
-                                maxWidth: "150px",
-                            } }, navbar.orgName))),
-                    notificationSideBar && (React.createElement(C3NotificationSidebar, { sideBar: { ...notificationSideBar, type: "notifications" } })),
-                    orgSideBar && (React.createElement(C3OrgSidebar, { sideBar: { ...orgSideBar, type: "org" } })),
-                    infoButton ? (React.createElement(InfoButton, { onClick: infoButton.onClick })) : (infoSideBar && (React.createElement(C3InfoSidebar, { sideBar: { ...infoSideBar, type: "info" } }))),
-                    userSideBar && (React.createElement(C3UserSidebar, { sideBar: { ...userSideBar, type: "user" } })))));
-        } }));
+                                            marginTop: "0.75rem",
+                                            padding: "0 1rem",
+                                        }, type: tag.color }, tag.label));
+                                }),
+                            navbar.orgName && (React.createElement("div", { className: "bodyText", style: {
+                                    fontSize: "14px",
+                                    lineHeight: "3rem",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap",
+                                    overflow: "hidden",
+                                    maxWidth: "150px",
+                                } }, navbar.orgName))),
+                        notificationSideBar && (React.createElement(C3NotificationSidebar, { sideBar: {
+                                ...notificationSideBar,
+                                type: "notifications",
+                            } })),
+                        orgSideBar && (React.createElement(C3OrgSidebar, { sideBar: {
+                                ...orgSideBar,
+                                type: "org",
+                            } })),
+                        infoSideBar && (React.createElement(C3InfoSidebar, { sideBar: {
+                                ...infoSideBar,
+                                type: "info",
+                            } })),
+                        userSideBar && (React.createElement(C3UserSidebar, { sideBar: {
+                                ...userSideBar,
+                                type: "user",
+                            } })))));
+            } })));
 };

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

@@ -53,9 +53,6 @@ export interface C3NavigationProps {
     appBar: WithoutType<C3NavigationAppBarProps>;
     orgSideBar?: WithoutType<C3NavigationOrgSideBarProps>;
     infoSideBar?: WithoutType<C3NavigationInfoSideBarProps>;
-    infoButton?: {
-        onClick: () => void;
-    };
     userSideBar?: WithoutType<C3NavigationUserSideBarProps>;
     notificationSideBar?: WithoutType<C3NavigationNotificationsSideBarProps>;
     navbar: C3NavigationNavBarProps;

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

@@ -2,36 +2,38 @@ import { useCallback, useEffect, useRef, useState } from "react";
 export function useOnClickOutside(handler) {
     const panelRef = useRef(null);
     const iconRef = useRef(null);
+    const listener = (event) => {
+        if (!panelRef.current ||
+            !iconRef.current ||
+            (event.target instanceof Node &&
+                (panelRef.current.contains(event.target) ||
+                    iconRef.current.contains(event.target)))) {
+            return;
+        }
+        handler(event);
+    };
     const setListener = () => {
-        const listener = (event) => {
-            if (!panelRef.current ||
-                !iconRef.current ||
-                (event.target instanceof Node &&
-                    (panelRef.current.contains(event.target) ||
-                        iconRef.current.contains(event.target)))) {
-                return;
-            }
-            handler(event);
-        };
         document.addEventListener("mousedown", listener);
         document.addEventListener("touchstart", listener);
+    };
+    useEffect(() => {
         return () => {
             document.removeEventListener("mousedown", listener);
             document.removeEventListener("touchstart", listener);
         };
-    };
+    }, []);
     const setPanelRef = useCallback((node) => {
         if (node && node instanceof HTMLElement) {
             panelRef.current = node;
             setListener();
         }
-    }, [handler]);
+    }, []);
     const setIconRef = useCallback((node) => {
         if (node && node instanceof HTMLElement) {
             iconRef.current = node;
             setListener();
         }
-    }, [handler]);
+    }, []);
     return [setPanelRef, setIconRef];
 }
 export function executeMediaQuery(mediaQuery) {

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

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { C3Navigation } from "./c3-navigation";
+import { ComponentStory } from "@storybook/react";
+export declare const DefaultTemplate: ComponentStory<typeof C3Navigation>;
+export declare const SuperUserToggle: FC<{
+    isActive?: boolean;
+    onChange?: (newValue: boolean) => void;
+}>;
+export declare const NavbarWithCustomSection: FC;

package/lib/esm/components/c3-navigation/story-templates.js

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import { C3Navigation } from "./c3-navigation";
+import { createAppBarProps, createAppProps, createNavBarBarProps, createUserSideBarProps, } from "./story-helpers";
+import { SwitcherDivider, Toggle } from "@carbon/react";
+export const DefaultTemplate = (args) => (React.createElement(C3Navigation, { ...args }));
+export const SuperUserToggle = ({ isActive, onChange }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SwitcherDivider, null),
+        React.createElement("div", { style: { padding: ".5rem 1rem" } },
+            React.createElement(Toggle, { size: "sm", id: "toggle-super-admin-mode", defaultToggled: isActive, onToggle: (superAdminModeActive) => onChange?.(superAdminModeActive), labelText: "Enter super-admin mode" }))));
+};
+export const NavbarWithCustomSection = () => {
+    const [isSuperAdminModeActive, setIsSuperAdminModeActive] = useState(true);
+    return (React.createElement(C3Navigation, { app: createAppProps(), appBar: createAppBarProps(), navbar: {
+            ...createNavBarBarProps(),
+            tags: isSuperAdminModeActive
+                ? [
+                    {
+                        key: "superUserMode",
+                        label: "Super-user mode",
+                        color: "high-contrast",
+                    },
+                ]
+                : undefined,
+        }, userSideBar: {
+            ...createUserSideBarProps({ isOpen: false }),
+            customElements: {
+                customSection: (React.createElement(SuperUserToggle, { isActive: isSuperAdminModeActive, onChange: setIsSuperAdminModeActive })),
+            },
+        } }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@camunda/camunda-composite-components",
-	"version": "0.0.38-rc1",
+	"version": "0.0.38-rc2",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"copy-css-files": "copyfiles -u 1 src/components/**/*.css lib/esm",

package/lib/esm/components/c3-navigation/c3-info-button.d.ts

@@ -1,4 +0,0 @@
-import { FC } from "react";
-export declare const InfoButton: FC<{
-    onClick: () => void;
-}>;

package/lib/esm/components/c3-navigation/c3-info-button.js

@@ -1,5 +0,0 @@
-import React from "react";
-import { HeaderGlobalAction } from "@carbon/react";
-import { Help } from "@carbon/react/icons";
-export const InfoButton = ({ onClick }) => (React.createElement(HeaderGlobalAction, { "aria-label": "Open Help Center", tooltipAlignment: "center", onClick: onClick },
-    React.createElement(Help, { size: 20 })));