@camunda/camunda-composite-components 0.6.4 → 0.7.0

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

@@ -2,17 +2,38 @@ 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 [notificationScrollBarWidth, setNotificationScrollBarWidth] = useState(0);
     const [isOrgSidebarOpen, setIsOrgSidebarOpen] = useState(value.isOrgSidebarOpen || false);
+    const [orgScrollBarWidth, setOrgScrollBarWidth] = useState(0);
     const [isInfoSidebarOpen, setIsInfoSidebarOpen] = useState(value.isInfoSidebarOpen || false);
+    const [infoScrollBarWidth, setInfoScrollBarWidth] = useState(0);
     const [isUserSidebarOpen, setIsUserSidebarOpen] = useState(value.isUserSidebarOpen || false);
+    const [userScrollBarWidth, setUserScrollBarWidth] = useState(0);
     return (React.createElement(C3SidebarStateContext.Provider, { value: {
             notifications: {
                 isOpen: isNotificationSidebarOpen,
                 setIsOpen: setIsNotificationSidebarOpen,
+                scrollBarWidth: notificationScrollBarWidth,
+                setScrollBarWidth: setNotificationScrollBarWidth,
+            },
+            org: {
+                isOpen: isOrgSidebarOpen,
+                setIsOpen: setIsOrgSidebarOpen,
+                scrollBarWidth: orgScrollBarWidth,
+                setScrollBarWidth: setOrgScrollBarWidth,
+            },
+            info: {
+                isOpen: isInfoSidebarOpen,
+                setIsOpen: setIsInfoSidebarOpen,
+                scrollBarWidth: infoScrollBarWidth,
+                setScrollBarWidth: setInfoScrollBarWidth,
+            },
+            user: {
+                isOpen: isUserSidebarOpen,
+                setIsOpen: setIsUserSidebarOpen,
+                scrollBarWidth: userScrollBarWidth,
+                setScrollBarWidth: setUserScrollBarWidth,
             },
-            org: { isOpen: isOrgSidebarOpen, setIsOpen: setIsOrgSidebarOpen },
-            info: { isOpen: isInfoSidebarOpen, setIsOpen: setIsInfoSidebarOpen },
-            user: { isOpen: isUserSidebarOpen, setIsOpen: setIsUserSidebarOpen },
         } }, children));
 };
 export const useSidebarState = () => {

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

@@ -1,3 +1,2 @@
-/// <reference path="../../../../../../src/carbon.d.ts" />
 import { SwitcherDivider as CarbonSwitcherDivider } from "@carbon/react";
 export declare const SwitcherDivider: typeof CarbonSwitcherDivider;

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

@@ -2,4 +2,5 @@ import { SwitcherDivider as CarbonSwitcherDivider } from "@carbon/react";
 import styled from "styled-components";
 export const SwitcherDivider = styled(CarbonSwitcherDivider) `
 	margin: auto;
+	width: calc(100% - 30px);
 `;

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

@@ -1,8 +1,8 @@
-import { Header, HeaderContainer, HeaderGlobalBar, HeaderMenuItem, HeaderName, HeaderNavigation, SkipToContent, Tag, Toggletip, ToggletipButton, ToggletipContent, Stack as CarbonStack, } from "@carbon/react";
+import { Header, HeaderContainer, HeaderGlobalBar, HeaderMenuItem, HeaderName, HeaderNavigation, SkipToContent, Tag, Toggletip, ToggletipButton, ToggletipContent, Stack as CarbonStack, Link, } from "@carbon/react";
 import React from "react";
 import C3InfoSidebar from "./c3-navigation-sidebar/c3-info-sidebar";
 import { C3NotificationSidebar } from "./c3-navigation-sidebar/c3-notification-sidebar";
-import C3OrgSidebar from "./c3-navigation-sidebar/c3-org-sidebar";
+import C3OrgSidebar from "./c3-org-sidebar/c3-org-sidebar";
 import C3UserSidebar from "./c3-navigation-sidebar/c3-user-sidebar";
 import { useMediaQuery } from "./helpers";
 import { C3NavigationAppBar } from "./c3-navigation-appbar/c3-navigation-appbar";
@@ -41,6 +41,8 @@ const ClusterTagWrapper = styled.div `
 		padding: 0 1rem;
 	}
 `;
+const NON_PRODUCTION_TERMS_LINK = "https://legal.camunda.com/#self-managed-non-production-terms";
+const SALES_CONTACT_LINK = "https://camunda.com/contact/";
 export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, infoButton, helpCenter, actionButtons, userSideBar, notificationSideBar, clusterUuid, options, }) => {
     const { openHelpCenter } = useC3HelpCenter();
     const { currentClusterUuid } = useC3UserConfiguration();
@@ -51,6 +53,34 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
         appBar.appTeaserRouteProps ||
         (!isLargeScreen && navbar.elements.length > 0);
     const orgName = activeOrg?.name || navbar.orgName;
+    const tags = [
+        ...(navbar.tags || []),
+        ...(navbar.licenseTag?.show
+            ? [
+                {
+                    key: "license-tag",
+                    label: navbar.licenseTag.isProductionLicense
+                        ? "Production license"
+                        : "Non-production license",
+                    color: "gray",
+                    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"),
+                                ".")),
+                            buttonLabel: "Learn more",
+                        },
+                },
+            ]
+            : []),
+    ];
     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 },
@@ -71,21 +101,19 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                                 gap: ".5rem",
                                 paddingRight: ".5rem",
                             } },
-                            navbar.tags &&
-                                navbar.tags.length > 0 &&
-                                navbar.tags.map((tag) => {
+                            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.50rem",
+                                                marginTop: "0.75rem",
                                             } },
                                             React.createElement(Toggletip, null,
                                                 React.createElement(ToggletipButton, { label: buttonLabel },
                                                     React.createElement(Tag, { type: tag.color, style: {
-                                                            padding: "0 1rem",
-                                                            marginRight: 0,
-                                                            marginLeft: 0,
+                                                            margin: "0",
                                                             cursor: "pointer",
                                                         } }, tag.label)),
                                                 React.createElement(StyledToggletipContent, null, content))));
@@ -93,7 +121,6 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                                     return (React.createElement(Tag, { key: tag.key, style: {
                                             height: "1.5rem",
                                             marginTop: "0.75rem",
-                                            padding: "0 1rem",
                                         }, type: tag.color }, tag.label));
                                 }),
                             (clusterUuid || currentClusterUuid) && (React.createElement(ClusterTagWrapper, null,

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

@@ -1,5 +1,3 @@
-/// <reference path="../../../../../src/carbon.d.ts" />
-/// <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";
@@ -26,6 +24,7 @@ export interface C3NavigationElementProps {
     onClick?: () => void;
     subElements?: C3NavigationElementProps[];
     preceedingDivider?: boolean;
+    overflowMenu?: React.ReactNode;
 }
 export interface C3NavigationNavBarProps {
     elements: Array<{
@@ -43,6 +42,10 @@ export interface C3NavigationNavBarProps {
             buttonLabel: string;
         };
     }>;
+    licenseTag?: {
+        show: boolean;
+        isProductionLicense: boolean;
+    };
     orgName?: string;
 }
 export interface C3NotificationsProps {

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

@@ -24,8 +24,9 @@ const C3NotificationProvider = ({ children, }) => {
         setNotifications([]);
     }
     if (enabled && !isFetched && config.userToken) {
-        NotificationService.getNotifications(config).then((response) => {
-            setNotifications(response);
+        NotificationService.getNotifications(config).then(({ result }) => {
+            if (result)
+                setNotifications(result);
             setFetched(true);
         });
     }
@@ -33,21 +34,22 @@ const C3NotificationProvider = ({ children, }) => {
         setEventStreamAvailable(true);
         NotificationService.notificationsStream(config, (notification) => {
             if (notification.orgId === activeOrganizationId) {
-                setNotifications((allNotifications) => NotificationService.updateNotifications(allNotifications, notification));
+                setNotifications(NotificationService.updateNotifications(notifications, notification));
             }
         });
     }
     useEffect(() => {
         if (enabled && config.userToken) {
-            NotificationService.getNotifications(config).then((response) => {
-                setNotifications(response);
+            NotificationService.getNotifications(config).then(({ result }) => {
+                if (result)
+                    setNotifications(result);
                 setFetched(true);
             });
         }
     }, [config?.userToken]);
     const changeState = (newState, { uuid, state }) => {
         if (enabled && state !== newState) {
-            setNotifications((allNotifications) => NotificationService.updateNotificationState(allNotifications, uuid, newState));
+            setNotifications(NotificationService.updateNotificationState(notifications, uuid, newState));
             NotificationService.changeState(config, uuid, newState);
         }
     };

package/lib/esm/src/components/c3-navigation/{c3-navigation-sidebar → c3-org-sidebar}/c3-org-sidebar.d.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { C3NavigationOrgSideBarProps } from "./c3-navigation-sidebar.types";
+import { C3NavigationOrgSideBarProps } from "../c3-navigation-sidebar/c3-navigation-sidebar.types";
 declare const C3OrgSidebar: FC<{
     sideBar: C3NavigationOrgSideBarProps;
 }>;

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

@@ -0,0 +1,125 @@
+import React, { useState } from "react";
+import { Button, FormLabel } from "@carbon/react";
+import { Enterprise } from "@carbon/react/icons";
+import C3NavigationSideBar from "../c3-navigation-sidebar/c3-navigation-sidebar";
+import { SwitcherDivider } from "../c3-navigation-sidebar/components";
+import { useOrgSidebarState } from "../c3-navigation-sidebar/c3-sidebar-state-provider";
+import { useC3Profile } from "../../c3-user-configuration/c3-profile-provider/c3-profile-provider";
+import { useC3UserConfiguration } from "../../c3-user-configuration/c3-user-configuration-provider";
+import { ActiveOrgName, ActiveOrgNameWrapper, ActiveOrgWrapper, ActiveOrgWrapperCustom, ConfirmLeaveModal, ManageOrgOverflowMenu, } from "./components";
+import { leaveOrganization } from "../../../api/organizations";
+const C3OrgSidebar = ({ sideBar }) => {
+    const { customElements, switchToOrg, manageOrg, elements, ...sideBarProps } = sideBar;
+    const { isOpen, setIsOpen, scrollBarWidth } = useOrgSidebarState();
+    const { userToken, decodedAudience, domain, analyticsTrack, setActiveOrgId } = useC3UserConfiguration();
+    const { activeOrg, orgs, removeOrg } = useC3Profile();
+    const isCustomized = Boolean(customElements?.activeOrganization);
+    const [isConfirmLeaveModalOpen, setIsConfirmLeaveModalOpen] = useState(false);
+    const [orgToLeave, setOrgToLeave] = useState(null);
+    const [loadingStatus, setLoadingStatus] = useState("inactive");
+    const isLastOrg = orgs?.length === 1;
+    const canUserLeaveOrg = (orgPermissions) => (!orgPermissions.org?.users?.owner?.update &&
+        orgs?.length &&
+        orgs.length > 1) ||
+        false;
+    const canUserManageOrg = (orgPermissions) => orgPermissions.org?.settings?.read || false;
+    const onManageCustomOrg = () => {
+        if (sideBar.closeOnClick !== false)
+            setIsOpen(false);
+    };
+    const onManageOrg = (orgId) => {
+        setIsOpen(false);
+        analyticsTrack?.("navBar:orgSettings:click", { orgId: activeOrg?.uuid });
+        if (manageOrg) {
+            manageOrg(orgId);
+        }
+        else {
+            window.location.href = `https://console.${domain}/org/${orgId}/management`;
+        }
+    };
+    const activeOrganization = customElements?.activeOrganization || {
+        activeLabel: "Active organization",
+        orgName: activeOrg?.name || "",
+        action: {
+            onClick: onManageCustomOrg,
+            label: "Manage",
+        },
+        otherLabel: "Other organizations",
+    };
+    const switchOrg = (orgId, track) => {
+        setActiveOrgId(orgId);
+        if (track)
+            analyticsTrack?.("navBar:orgSwitch:click", { orgId });
+        switchToOrg?.(orgId);
+        setIsOpen(false);
+    };
+    const orgElements = orgs
+        ?.filter(({ uuid }) => uuid !== activeOrg?.uuid)
+        .map((org) => ({
+        key: org.uuid,
+        label: org.name,
+        onClick: () => switchOrg(org.uuid, true),
+        overflowMenu: (React.createElement(ManageOrgOverflowMenu, { canManage: canUserManageOrg(org.permissions), canLeave: canUserLeaveOrg(org.permissions), isLastOrg: isLastOrg, onManage: () => onManageOrg(org.uuid), onRequestToLeave: () => {
+                setOrgToLeave(org);
+                setIsConfirmLeaveModalOpen(true);
+            } })),
+    }));
+    const confirmLeaveOrg = async () => {
+        if (orgToLeave && decodedAudience && userToken) {
+            setLoadingStatus("active");
+            const { success } = await leaveOrganization({
+                token: userToken,
+                audience: decodedAudience,
+                orgId: orgToLeave.uuid,
+            });
+            setLoadingStatus(success ? "finished" : "error");
+            if (success) {
+                setIsConfirmLeaveModalOpen(false);
+                removeOrg(orgToLeave.uuid);
+            }
+            if (orgToLeave.uuid === activeOrg?.uuid) {
+                const newActiveOrg = orgs?.[0]?.uuid;
+                if (newActiveOrg)
+                    switchOrg(newActiveOrg);
+            }
+        }
+    };
+    const itemTabIndex = isOpen ? undefined : -1;
+    return (React.createElement(C3NavigationSideBar, { sideBar: {
+            ...sideBarProps,
+            elements: elements || orgElements,
+            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?.permissions), canLeave: canUserLeaveOrg(activeOrg?.permissions), isLastOrg: isLastOrg, onManage: () => onManageOrg(activeOrg?.uuid), onRequestToLeave: () => {
+                        setOrgToLeave(activeOrg);
+                        setIsConfirmLeaveModalOpen(true);
+                    } }))),
+            React.createElement(ConfirmLeaveModal, { isOpen: isConfirmLeaveModalOpen, orgName: orgToLeave?.name || "", onConfirm: confirmLeaveOrg, onCancel: () => {
+                    setIsConfirmLeaveModalOpen(false);
+                    setOrgToLeave(null);
+                }, loadingStatus: loadingStatus }))),
+        ((sideBar.elements && sideBar.elements.length > 0) ||
+            (orgElements && orgElements.length > 0)) && (React.createElement(React.Fragment, null,
+            React.createElement(SwitcherDivider, null),
+            React.createElement(FormLabel, { style: {
+                    paddingTop: "15px",
+                    paddingLeft: "1rem",
+                    paddingBottom: ".25rem",
+                } }, activeOrganization.otherLabel)))))));
+};
+export default C3OrgSidebar;

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

@@ -0,0 +1,24 @@
+import React, { FC } from "react";
+import { ModalProps } from "@carbon/react/es/components/Modal/Modal";
+export declare const ActiveOrgWrapperCustom: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const ActiveOrgWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $scrollBarWidth: number;
+}>>;
+export declare const ActiveOrgNameWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const ActiveOrgName: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isCustomized?: boolean | undefined;
+}>>;
+export declare const ConfirmLeaveModal: FC<{
+    isOpen: boolean;
+    orgName: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    loadingStatus: ModalProps["loadingStatus"];
+}>;
+export declare const ManageOrgOverflowMenu: FC<{
+    canManage: boolean;
+    canLeave: boolean;
+    isLastOrg?: boolean;
+    onManage: () => void;
+    onRequestToLeave: () => void;
+}>;

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

@@ -0,0 +1,64 @@
+import React from "react";
+import { Modal, OverflowMenu, OverflowMenuItem, Popover, PopoverContent, } from "@carbon/react";
+import styled from "styled-components";
+export const ActiveOrgWrapperCustom = styled.div `
+	padding: 1.5rem 1rem 15px;
+	display: grid;
+	grid-auto-flow: column;
+	gap: 0.25rem;
+`;
+export const ActiveOrgWrapper = styled.div `
+	padding: 15px 0 0.5rem 1rem;
+	width: ${({ $scrollBarWidth }) => `calc(16rem - ${$scrollBarWidth}px)`};
+`;
+export const ActiveOrgNameWrapper = styled.div `
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+`;
+export const ActiveOrgName = styled.div `
+	height: 20px; // Set minimum height to allow decenders to be rendered
+	line-height: 20px;
+	font-size: 14px;
+	${({ $isCustomized }) => ($isCustomized ? "" : "width: calc(-2px + 13rem)")};
+	text-overflow: ellipsis;
+	overflow: hidden;
+	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.")));
+};
+const PopoverWrapper = styled(Popover) `
+	max-width: 11rem;
+
+	.cds--popover-content {
+		max-width: 176px;
+		padding: 0.5rem 1rem;
+	}
+`;
+const StyledOverflowMenu = styled(OverflowMenu) `
+	.cds--overflow-menu-options {
+		width: 165px;
+	}
+`;
+export const ManageOrgOverflowMenu = ({ canManage, canLeave, isLastOrg, onManage, onRequestToLeave }) => {
+    const [isPopoverShown, setIsPopoverShown] = React.useState(false);
+    const leaveMenuItem = (React.createElement(OverflowMenuItem, { itemText: "Leave organization", disabled: !canLeave, onClick: onRequestToLeave, onMouseOver: () => setIsPopoverShown(true), onMouseLeave: () => setIsPopoverShown(false) }));
+    const popoverLabel = 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", 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        align: "top-right", "data-floating-menu-container": "cds--header-panel" },
+        canManage && (React.createElement(OverflowMenuItem, { itemText: "Manage organization", onClick: onManage })),
+        canLeave ? (leaveMenuItem) : (React.createElement(PopoverWrapper, { open: isPopoverShown, label: popoverLabel, align: "bottom-right" },
+            leaveMenuItem,
+            React.createElement(PopoverContent, null, popoverLabel)))));
+};

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

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

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

@@ -34,7 +34,7 @@ export function useOnClickOutside(handler) {
             setListener();
         }
     }, []);
-    return [setPanelRef, setIconRef];
+    return { panelRef, setPanelRef, iconRef, setIconRef };
 }
 export function executeMediaQuery(mediaQuery) {
     return window.matchMedia(mediaQuery);

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

@@ -7,9 +7,11 @@ export declare function createAppBarProps(options?: {
     elements?: Array<C3NavigationElementProps>;
     useElementsFromConfig?: boolean;
 }): C3NavigationProps["appBar"];
-export declare function createNavBarBarProps({ orgName, elements, }?: {
+export declare function createNavBarBarProps({ orgName, elements, showLicenseTag, showProductionLicense, }?: {
     elements?: C3NavigationNavBarProps["elements"];
     orgName?: string;
+    showLicenseTag?: boolean;
+    showProductionLicense?: boolean;
 }): C3NavigationNavBarProps;
 export declare function createInfoSideBarProps(options: {
     isOpen: boolean;

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

@@ -72,7 +72,7 @@ export function createAppBarProps(options = {}) {
         elementClicked: (element) => console.log(`event coming from the appBarProps: ${element} has been clicked`),
     };
 }
-export function createNavBarBarProps({ orgName = "Camunda", elements = undefined, } = {}) {
+export function createNavBarBarProps({ orgName = "Camunda", elements = undefined, showLicenseTag, showProductionLicense, } = {}) {
     return {
         elements: elements ?? [
             {
@@ -91,21 +91,20 @@ export function createNavBarBarProps({ orgName = "Camunda", elements = undefined
             },
         ],
         orgName,
+        licenseTag: {
+            show: showLicenseTag || false,
+            isProductionLicense: showProductionLicense || false,
+        },
         tags: [
-            {
-                key: "stage",
-                label: "Production",
-                color: "red",
-            },
             {
                 key: "githash",
-                label: "abcdefg",
+                label: "example tag",
                 color: "teal",
             },
             {
                 key: "fooTooltip",
-                label: "I am a tooltip pill",
-                color: "cool-gray",
+                label: "tooltip tag",
+                color: "purple",
                 tooltip: {
                     content: (React.createElement("p", null,
                         "tooltip popover with a",

package/lib/esm/src/components/c3-onboarding-survey/c3-onboarding-survey.js

@@ -27,12 +27,13 @@ export const C3OnboardingSurvey = (props) => {
                 setUserId(userId);
             setOnboardConfig(defaultOnboardingConfig);
             setIsLoadingConfig(true);
-            const config = await getOnboardingConfig({
+            const { result: config } = await getOnboardingConfig({
                 audience: decodedAudience,
                 camundaAuth: { token: userToken },
                 orgId: activeOrganizationId,
             });
-            setOnboardConfig(config);
+            if (config)
+                setOnboardConfig(config);
             setIsLoadingConfig(false);
         })();
     }, [JSON.stringify(decodedToken), decodedAudience]);

package/lib/esm/src/components/c3-onboarding-survey/elements/radioGroupSingle.js

@@ -1,6 +1,11 @@
 import { Column, FlexGrid, RadioTile, Row, Stack, Tooltip, Button, } from "@carbon/react";
 import React from "react";
 import { Information } from "@carbon/react/icons";
+import styled from "styled-components";
+const StyledRadioTile = styled(RadioTile) `
+	background-color: ${({ $backgroundColor }) => $backgroundColor};
+	margin-bottom: 24px;
+`;
 export const RadioGroupElementSingle = ({ theme, title, label, elements, columns, tooltip, selectedElement, setSelectedElement, }) => {
     const backgroundColor = theme === "dark" ? "#393939" : "#E5E5E5";
     return (React.createElement(React.Fragment, null,
@@ -33,10 +38,7 @@ export const RadioGroupElementSingle = ({ theme, title, label, elements, columns
                 paddingRight: "0",
             } },
             React.createElement(Row, null, row.map((element, index) => (React.createElement(Column, { key: `column-${element.value}-${index}`, style: { maxWidth: `${100 / columns}%` } },
-                React.createElement(RadioTile, { key: `tile-${element.value}-${index}`, style: {
-                        backgroundColor,
-                        marginBottom: "24px",
-                    }, checked: (selectedElement ?? "") === element.value, onClick: () => {
-                        setSelectedElement(element.value);
+                React.createElement(StyledRadioTile, { "$backgroundColor": backgroundColor, key: `tile-${element.value}-${index}`, checked: (selectedElement ?? "") === element.value, onChange: (value) => {
+                        setSelectedElement(value);
                     }, value: element.value }, element.label)))))))))));
 };

package/lib/esm/src/components/c3-onboarding-survey/onboardingModal.d.ts

@@ -1,4 +1,3 @@
-/// <reference path="../../../../../src/carbon.d.ts" />
 import { ModalBodyProps } from "@carbon/react";
 import React, { FC } from "react";
 export declare const StyledModalBody: FC<ModalBodyProps>;

package/lib/esm/src/components/c3-onboarding-survey/onboardingModal.js

@@ -5,6 +5,9 @@ import { headingStyles } from "../c3-help-center/styles";
 export const StyledModalBody = styled(ModalBody) `
 	${headingStyles}
 `;
+const StyledModalFooter = styled(ModalFooter) `
+	background-color: ${({ $c3Theme }) => $c3Theme === "light" ? "#FFFFFF" : "#161616"};
+`;
 export const OnboardingModal = ({ isDoingAsyncWork, heading, headingLabel, primaryButtonText, primaryButtonDisabled = false, secondaryButtonText = "Cancel", tertiaryButtonText, loadingText, error = { title: "", description: "" }, danger = false, theme, onRequestClose, onSecondary, onPrimary, onTertiary, children, }) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(ModalHeader, { title: heading, label: headingLabel, style: {
@@ -21,9 +24,7 @@ export const OnboardingModal = ({ isDoingAsyncWork, heading, headingLabel, prima
                 React.createElement(Stack, { gap: 6 },
                     children,
                     error.title ? (React.createElement(InlineNotification, { kind: "error", title: error.title, subtitle: error.description, hideCloseButton: true })) : ("")))),
-        React.createElement(ModalFooter, { style: {
-                backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
-            } }, (() => {
+        React.createElement(StyledModalFooter, { "$c3Theme": theme }, (() => {
             if (tertiaryButtonText && onTertiary !== undefined) {
                 return (React.createElement(React.Fragment, null,
                     React.createElement(Button, { kind: "ghost", disabled: isDoingAsyncWork, onClick: () => onTertiary() }, tertiaryButtonText),

package/lib/esm/src/components/c3-user-configuration/c3-profile-provider/c3-profile-provider.d.ts

@@ -9,6 +9,7 @@ export type C3ProfileContextValue = {
     orgs: Organization[] | null;
     activeOrg: Organization | null;
     reloadOrgs: () => void;
+    removeOrg: (orgId: string) => void;
     clusters: Cluster[] | null;
     reloadClusters: () => void;
     resolvedTheme: ResolvedTheme;

package/lib/esm/src/components/c3-user-configuration/c3-profile-provider/c3-profile-provider.js

@@ -9,6 +9,7 @@ export const C3ProfileContext = createContext({
     orgs: null,
     activeOrg: null,
     reloadOrgs: () => undefined,
+    removeOrg: () => undefined,
     clusters: null,
     reloadClusters: () => undefined,
     resolvedTheme: defaultTheme,
@@ -26,18 +27,24 @@ export const C3ProfileProvider = ({ children }) => {
     const loadClusters = () => {
         if (!isConfigValid)
             return;
-        getClusters(decodedAudience, config.userToken, config.activeOrganizationId).then((res) => {
-            setClusters(res);
+        getClusters(decodedAudience, config.userToken, config.activeOrganizationId).then(({ result }) => {
+            if (result)
+                setClusters(result);
         });
     };
     const loadOrgs = () => {
         if (!isConfigValid)
             return;
-        getOrgs(decodedAudience, config.userToken).then((res) => {
-            setOrgs(res);
+        getOrgs(decodedAudience, config.userToken).then(({ result: res }) => {
+            setOrgs(res?.sort(({ name: a }, { name: b }) => a.localeCompare(b)) || null);
             setActiveOrg(res?.find((org) => org.uuid === config.activeOrganizationId) || null);
         });
     };
+    const removeOrg = (orgId) => {
+        if (orgs?.length === 1)
+            return;
+        setOrgs((orgs) => orgs?.filter((org) => org.uuid !== orgId) || null);
+    };
     useEffect(() => {
         if (config?.activeOrganizationId) {
             const org = orgs?.find((org) => org.uuid === config.activeOrganizationId);
@@ -100,6 +107,7 @@ export const C3ProfileProvider = ({ children }) => {
             reloadOrgs: loadOrgs,
             clusters,
             reloadClusters: loadClusters,
+            removeOrg,
             onThemeChange,
         } }, content));
 };