@camunda/camunda-composite-components 0.2.18-rc.4 → 0.2.18-rc.5

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

@@ -8,9 +8,9 @@ import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configu
 import { defaultTheme, useC3Profile, } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 import { resolveTheme, } from "../c3-user-configuration/c3-profile-provider/carbon-theme-provider";
 import { useC3HelpCenter } from "./c3-help-center-provider";
-export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, mixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
+export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, mixpanelTrack: customMixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
     const { isHelpCenterOpen: isOpen, setIsHelpCenterOpen } = useC3HelpCenter();
-    const { userToken, decodedToken, activeOrganizationId, handleTheme, decodedAudience, } = useC3UserConfiguration() || {};
+    const { userToken, decodedToken, activeOrganizationId, handleTheme, decodedAudience, analyticsTrack, } = useC3UserConfiguration() || {};
     const { theme: themeConfig, isEnabled, reloadClusters } = useC3Profile();
     const themeHandlingEnabled = isEnabled && !!handleTheme && !!themeConfig;
     const themeRef = useRef();
@@ -20,6 +20,14 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
     const [helpCenterConfig, setHelpCenterConfig] = useState(defaultHelpCenterConfig);
     const [email, setEmail] = useState("");
     const [showSurvey, setShowSurvey] = useState(autoStartSurvey);
+    const mixpanelTrack = (event, data) => {
+        if (customMixpanelTrack) {
+            customMixpanelTrack(event, data);
+        }
+        else if (analyticsTrack) {
+            analyticsTrack(event, data);
+        }
+    };
     useEffect(() => {
         const updateResolvedTheme = ({ matches }) => {
             if (themeRef.current === "system") {
@@ -92,7 +100,7 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
                 });
                 setPersona({ wasShown: true });
             }
-            mixpanelTrack?.(`helpcenter:open`, {
+            mixpanelTrack?.("helpcenter:open", {
                 to: activeTab ?? firstTab,
                 from: origin,
             });

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

@@ -49,6 +49,7 @@ export type Tab = {
 };
 export type Organization = {
     uuid: string;
+    name: string;
     salesPlan?: {
         type: string;
     };

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

@@ -152,34 +152,30 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
                     React.createElement(SideNavItems, null,
                         React.createElement(SideNavMenuItem, null,
                             React.createElement("h5", null, "Help Center")),
-                        React.createElement("li", { style: { marginTop: "4px" } },
-                            React.createElement(Stack, null,
-                                React.createElement("ul", null, tabBar.map(({ name, id, text }) => {
-                                    const active = activeTab === name;
-                                    let tabBackgroundColor = theme === "light" ? "#F4F4F4" : "#161616";
-                                    let tabButtonColor = theme === "light" ? "#525252" : "#f4f4f4";
-                                    if (active) {
-                                        tabBackgroundColor =
-                                            theme === "light" ? "#E5E5E5" : "#8D8D8D3D";
-                                        tabButtonColor =
-                                            theme === "light" ? "#161616" : "#f4f4f4";
-                                    }
-                                    return (React.createElement("li", { key: name },
-                                        React.createElement(Button, { className: active ? "active" : "", kind: "secondary", onClick: () => {
-                                                setActiveTab(name);
-                                                mixpanelTrack?.("helpcenter:open", {
-                                                    to: id,
-                                                    from: origin,
-                                                });
-                                            }, style: {
-                                                width: "100%",
-                                                backgroundColor: tabBackgroundColor,
-                                                color: tabButtonColor,
-                                            }, "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("span", { className: "cds--link" }, link.label)))))))),
+                        React.createElement("div", { style: { marginTop: "4px" } },
+                            React.createElement(Stack, null, tabBar.map(({ name, id, text }) => {
+                                const active = activeTab === name;
+                                let tabBackgroundColor = theme === "light" ? "#F4F4F4" : "#161616";
+                                let tabButtonColor = theme === "light" ? "#525252" : "#f4f4f4";
+                                if (active) {
+                                    tabBackgroundColor =
+                                        theme === "light" ? "#E5E5E5" : "#8D8D8D3D";
+                                    tabButtonColor = theme === "light" ? "#161616" : "#f4f4f4";
+                                }
+                                return (React.createElement(Button, { className: active ? "active" : "", kind: "secondary", onClick: () => {
+                                        setActiveTab(name);
+                                        mixpanelTrack?.("helpcenter:open", {
+                                            to: id,
+                                            from: origin,
+                                        });
+                                    }, style: {
+                                        width: "100%",
+                                        backgroundColor: tabBackgroundColor,
+                                        color: tabButtonColor,
+                                    }, key: name, "aria-label": text }, text));
+                            }))),
+                        React.createElement("div", { style: { position: "absolute", bottom: "20px" } }, configuration.links.map((link) => (React.createElement(SideNavMenuItem, { key: link.label.split(" ").join("-").toLowerCase(), href: link.link, target: "_blank" },
+                            React.createElement("span", { className: "cds--link" }, link.label))))))),
                 content)),
         persona.complete && activeTab === "recommendations" && (React.createElement(ModalFooter, { style: {
                 height: "62px",

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

@@ -157,12 +157,13 @@ export const Feedback = (props) => {
                                 // eslint-disable-next-line
                                 // @ts-ignore
                                 align: "bottom" },
-                                React.createElement(Button, { kind: "ghost", "aria-label": "Information", renderIcon: Information, iconDescription: "Information", style: {
-                                        marginTop: "-10px",
-                                        backgroundColor: props.theme === "light" ? "#FFFFFF" : "#161616",
-                                        color: props.theme === "light" ? "#161616" : "#F4F4F4",
-                                        paddingLeft: "0px",
-                                    } }))),
+                                React.createElement("span", { className: "upload-file" },
+                                    React.createElement(Button, { kind: "ghost", renderIcon: Information, iconDescription: "Information", style: {
+                                            marginTop: "-10px",
+                                            backgroundColor: props.theme === "light" ? "#FFFFFF" : "#161616",
+                                            color: props.theme === "light" ? "#161616" : "#F4F4F4",
+                                            paddingLeft: "0px",
+                                        } })))),
                         React.createElement("p", { className: "cds--label-description", style: { marginTop: "-24px" } }, "Max. file size is 5MB. Supported file types are .jpg and .png."))),
                     !orgIsEnterPriseOrPaidCC &&
                         (() => {

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

@@ -10,19 +10,21 @@ export type C3NavigationSideBarBaseProps = {
     elements?: C3NavigationElementProps[];
     bottomElements?: C3NavigationElementProps[];
 };
+export type CamundaOrg = {
+    activeLabel: string;
+    otherLabel: string;
+    orgName: string;
+    action: {
+        label: string;
+        onClick: () => void;
+    };
+};
 export type C3NavigationOrgSideBarProps = C3NavigationSideBarBaseProps & {
     type: "org";
     customElements?: {
-        activeOrganization?: {
-            activeLabel: string;
-            otherLabel: string;
-            orgName: string;
-            action: {
-                label: string;
-                onClick: () => void;
-            };
-        };
+        activeOrganization?: CamundaOrg;
     };
+    switchToOrg?: (orgId: string) => void;
 };
 export type C3NavigationInfoSideBarProps = C3NavigationSideBarBaseProps & {
     type: "info";

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

@@ -4,15 +4,49 @@ import { Enterprise } from "@carbon/react/icons";
 import C3NavigationSideBar from "./c3-navigation-sidebar";
 import { SwitcherDivider } from "./components";
 import { useOrgSidebarState } from "./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";
 const C3OrgSidebar = ({ sideBar }) => {
-    const { customElements, ...sideBarProps } = sideBar;
-    const activeOrganization = customElements?.activeOrganization;
+    const { customElements, switchToOrg, elements, ...sideBarProps } = sideBar;
     const { isOpen, setIsOpen } = useOrgSidebarState();
+    const { decodedAudience, setActiveOrgId, analyticsTrack } = useC3UserConfiguration();
+    const { activeOrg, orgs } = useC3Profile();
+    const isCustomized = Boolean(customElements?.activeOrganization);
+    const onManageOrg = () => {
+        if (!isCustomized) {
+            analyticsTrack?.("navBar:orgSettings:click", { orgId: activeOrg?.uuid });
+        }
+        if (sideBar.closeOnClick !== false)
+            setIsOpen(false);
+    };
+    const activeOrganization = customElements?.activeOrganization || {
+        activeLabel: "Active Organization",
+        orgName: activeOrg?.name || "",
+        action: {
+            onClick: onManageOrg,
+            label: "Manage",
+        },
+        otherLabel: "Other Organizations",
+    };
+    const switchOrg = (orgId) => {
+        setActiveOrgId(orgId);
+        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),
+    }));
     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 }) }, activeOrganization && (React.createElement(React.Fragment, null,
+        }, icon: React.createElement(Enterprise, { size: 20 }) }, (customElements?.activeOrganization || activeOrg) && (React.createElement(React.Fragment, null,
         React.createElement("div", { style: {
                 padding: "1rem",
                 paddingTop: "1.5rem",
@@ -35,12 +69,11 @@ const C3OrgSidebar = ({ sideBar }) => {
                         overflow: "hidden",
                         whiteSpace: "nowrap",
                     }, title: activeOrganization.orgName }, activeOrganization.orgName)),
-            React.createElement(Button, { size: "md", kind: "ghost", key: "org-management", onClick: () => {
+            isCustomized ? (React.createElement(Button, { size: "md", kind: "ghost", onClick: () => {
                     activeOrganization.action.onClick();
-                    if (sideBar.closeOnClick !== false) {
-                        setIsOpen(false);
-                    }
-                }, tabIndex: itemTabIndex }, activeOrganization.action.label)),
+                    onManageOrg();
+                }, tabIndex: itemTabIndex }, activeOrganization.action?.label)) : (activeOrg?.uuid &&
+                decodedAudience && (React.createElement(Button, { as: "a", size: "md", kind: "ghost", key: "org-management", href: `https://console.${decodedAudience}/org/${activeOrg?.uuid}/management`, onClick: onManageOrg, tabIndex: itemTabIndex }, activeOrganization.action?.label)))),
         sideBar.elements && sideBar.elements.length > 0 && (React.createElement(React.Fragment, null,
             React.createElement(SwitcherDivider, null),
             React.createElement(FormLabel, { style: {

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

@@ -14,6 +14,7 @@ import { C3SidebarStateProvider } from "./c3-navigation-sidebar/c3-sidebar-state
 import { C3HelpCenter } from "../c3-help-center/c3-help-center";
 import { C3ClusterTag } from "../c3-cluster-tag/c3-cluster-tag";
 import { useC3HelpCenter } from "../c3-help-center/c3-help-center-provider";
+import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 /**
  * UI SHELL
  * Docs: https://react.carbondesignsystem.com/?path=/story/components-ui-shell--fixed-side-nav
@@ -40,9 +41,11 @@ const ClusterTagWrapper = styled.div `
 `;
 export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, infoButton, helpCenter, actionButtons, userSideBar, notificationSideBar, clusterUuid, options, }) => {
     const { setIsHelpCenterOpen, isHelpCenterOpen } = useC3HelpCenter();
+    const { activeOrg } = useC3Profile();
     const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`);
     const appBarElementsLength = appBar.elements?.length ?? 0;
     const displayAppBar = appBarElementsLength > 0 || (!isLargeScreen && navbar.elements.length > 0);
+    const orgName = activeOrg?.name || navbar.orgName;
     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 },
@@ -90,14 +93,14 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                                 }),
                             clusterUuid && (React.createElement(ClusterTagWrapper, null,
                                 React.createElement(C3ClusterTag, { clusterUuid: clusterUuid, conditionalRendering: options?.conditionalTagRendering }))),
-                            navbar.orgName && (React.createElement("div", { className: "bodyText", style: {
+                            orgName && (React.createElement("div", { className: "bodyText", style: {
                                     fontSize: "14px",
                                     lineHeight: "3rem",
                                     textOverflow: "ellipsis",
                                     whiteSpace: "nowrap",
                                     overflow: "hidden",
                                     maxWidth: "150px",
-                                } }, navbar.orgName))),
+                                } }, orgName))),
                         actionButtons && React.createElement(C3ActionButtons, { elements: actionButtons }),
                         notificationSideBar && (React.createElement(C3NotificationSidebar, { sideBar: {
                                 ...notificationSideBar,

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

@@ -6,8 +6,9 @@ export declare function createAppBarProps(options?: {
     isOpen?: boolean;
     elements?: Array<C3NavigationElementProps>;
 }): C3NavigationProps["appBar"];
-export declare function createNavBarBarProps(options?: {
+export declare function createNavBarBarProps({ orgName, elements, }?: {
     elements?: C3NavigationNavBarProps["elements"];
+    orgName?: string;
 }): C3NavigationNavBarProps;
 export declare function createInfoSideBarProps(options: {
     isOpen: boolean;
@@ -15,7 +16,8 @@ export declare function createInfoSideBarProps(options: {
 }): C3NavigationProps["infoSideBar"];
 export declare function createOrgSideBarProps(options: {
     isOpen: boolean;
-    orgCount: number;
+    orgCount?: number;
+    useConfig?: boolean;
 }): C3NavigationProps["orgSideBar"];
 export declare function createUserSideBarProps(options: {
     isOpen: boolean;

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

@@ -61,9 +61,9 @@ export function createAppBarProps(options = {}) {
         elementClicked: (element) => console.log(`event coming from the appBarProps: ${element} has been clicked`),
     };
 }
-export function createNavBarBarProps(options = {}) {
+export function createNavBarBarProps({ orgName = "Camunda", elements = undefined, } = {}) {
     return {
-        elements: options?.elements ?? [
+        elements: elements ?? [
             {
                 key: "dashboard",
                 label: "Dashboard",
@@ -79,7 +79,7 @@ export function createNavBarBarProps(options = {}) {
                 },
             },
         ],
-        orgName: "Camunda",
+        orgName,
         tags: [
             {
                 key: "stage",
@@ -125,36 +125,45 @@ export function createInfoSideBarProps(options) {
 }
 export function createOrgSideBarProps(options) {
     const elements = [];
-    for (let i = 0; i < options.orgCount; i++) {
-        elements.push({
-            key: `org-${i}`,
-            label: `Organization ${i}`,
-        });
+    if (options.orgCount !== undefined) {
+        for (let i = 0; i < options.orgCount; i++) {
+            elements.push({
+                key: `org-${i}`,
+                label: `Organization ${i}`,
+            });
+        }
     }
     return {
         isOpen: options.isOpen,
-        customElements: {
-            activeOrganization: {
-                activeLabel: "Active Organization",
-                otherLabel: "Other Organization",
-                orgName: "Camunda",
-                action: {
-                    label: "Manage",
-                    onClick: () => console.log("Manage organization"),
+        customElements: options.useConfig
+            ? undefined
+            : {
+                activeOrganization: {
+                    activeLabel: "Active Organization",
+                    otherLabel: "Other Organization",
+                    orgName: "Camunda",
+                    action: {
+                        label: "Manage",
+                        onClick: () => console.log("Manage organization"),
+                    },
                 },
             },
-        },
-        elements,
-        bottomElements: [
-            {
-                key: "createTrial",
-                label: "Create new Trial Org",
-                renderIcon: Add,
-                onClick: () => {
-                    console.log("clicked");
+        elements: options.useConfig ? undefined : elements,
+        bottomElements: options.useConfig
+            ? undefined
+            : [
+                {
+                    key: "createTrial",
+                    label: "Create new Trial Org",
+                    renderIcon: Add,
+                    onClick: () => {
+                        console.log("clicked");
+                    },
                 },
-            },
-        ],
+            ],
+        switchToOrg: options.useConfig
+            ? (orgId) => console.log("Switch to org: ", orgId)
+            : undefined,
     };
 }
 export function createUserSideBarProps(options) {

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

@@ -1,12 +1,12 @@
 import { FC } from "react";
 import { Persona } from "../c3-help-center/c3-help-center.types";
-import { Dict } from "mixpanel-browser";
+import { MixPanelTrack } from "../c3-user-configuration/c3-user-configuration-provider";
 export type C3OnboardingSurveyProps = {
     onRequestClose: () => void;
     onRequestSkip: () => void;
     personaCallback: (persona: Persona) => void;
     theme: "light" | "dark";
-    mixpanelTrack?: (event: string, data: Dict | undefined) => void;
+    mixpanelTrack?: MixPanelTrack;
     origin: "console" | "webmodeler" | "operate" | "tasklist" | "optimize";
     modal: boolean;
     persona: Persona | undefined;

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

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { OnboardingSurvey } from "./onboardingSurvey";
 import { defaultOnboardingConfig } from "./defaultOnboardingConfig";
 import { getOnboardingConfig, submitSurvey, updatePersona, } from "../../api/help-center";
-import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
+import { useC3UserConfiguration, } from "../c3-user-configuration/c3-user-configuration-provider";
 export const C3OnboardingSurvey = (props) => {
     const { userToken, decodedToken, activeOrganizationId, decodedAudience } = useC3UserConfiguration() || {};
     const [persona, setPersona] = useState(props.persona);

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

@@ -1,6 +1,5 @@
 import { Select, SelectItem, Stack, TextInput } from "@carbon/react";
 import React, { useState } from "react";
-import { getTitleId } from "../helpers";
 export const DropdownSelect = ({ title, label, elements, selectedElement, setSelectedElement, exceptionTitle, exceptionLabel, exceptionValue, }) => {
     let showSuggestion = false;
     const [suggestion, setSuggestion] = useState((selectedElement ?? "").split(" - ").length > 0
@@ -23,8 +22,6 @@ export const DropdownSelect = ({ title, label, elements, selectedElement, setSel
         setSuggestion(input);
         setElement(rawElement);
     };
-    const titleId = getTitleId(title);
-    const exceptionTitleId = getTitleId(exceptionTitle);
     return (React.createElement(React.Fragment, null,
         React.createElement(Stack, null, (() => {
             return (React.createElement(React.Fragment, null,
@@ -33,7 +30,7 @@ export const DropdownSelect = ({ title, label, elements, selectedElement, setSel
                         gridTemplateColumns: "58% 42%",
                     } },
                     React.createElement(Stack, { gap: 1 },
-                        React.createElement("h4", { id: titleId }, title),
+                        React.createElement("h4", null, title),
                         (() => {
                             if (label) {
                                 return React.createElement("p", { className: "cds--modal-header__label" }, label);
@@ -41,7 +38,7 @@ export const DropdownSelect = ({ title, label, elements, selectedElement, setSel
                             return React.createElement(React.Fragment, null);
                         })(),
                         " "),
-                    React.createElement(Select, { key: `select-${Math.random() * 10000}`, id: `select-${Math.random() * 10000}`, size: "lg", defaultValue: elements[0].value, "aria-labelledby": titleId, labelText: "", onChange: (event) => {
+                    React.createElement(Select, { key: `select-${Math.random() * 10000}`, id: `select-${Math.random() * 10000}`, size: "lg", defaultValue: elements[0].value, labelText: "", onChange: (event) => {
                             const element = elements.find((e) => e.value === event.target.value);
                             if (element)
                                 setElement(element.value);
@@ -52,11 +49,11 @@ export const DropdownSelect = ({ title, label, elements, selectedElement, setSel
                                 React.createElement("div", { style: { marginTop: "24px" } }),
                                 React.createElement("div", { style: { marginTop: "24px" } }),
                                 React.createElement(Stack, { gap: 1 },
-                                    React.createElement("h4", { id: exceptionTitleId }, exceptionTitle),
+                                    React.createElement("h4", null, exceptionTitle),
                                     React.createElement("p", { className: "cds--modal-header__label" }, exceptionLabel)),
                                 React.createElement(TextInput, { style: { height: "48px" }, id: `text-input-element-${Math.random() * 1000}`, placeholder: "Enter your suggestion", labelText: "", value: suggestion, onChange: (event) => {
                                         calculateSuggestion(event.target.value);
-                                    }, "aria-labelledby": exceptionTitleId, "aria-label": exceptionTitle })));
+                                    } })));
                         }
                         return React.createElement(React.Fragment, null);
                     })())));

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

@@ -1,14 +1,10 @@
 import { TextInput, Stack } from "@carbon/react";
 import React from "react";
-import { getTitleId } from "../helpers";
-export const TextInputElement = ({ title, label, preFiledValue, setValue, placeholder }) => {
-    const titleId = getTitleId(title);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Stack, { orientation: "horizontal" },
-            React.createElement(Stack, { gap: 1 },
-                React.createElement("h4", { id: titleId }, title),
-                label && React.createElement("p", { className: "cds--modal-header__label" }, label)),
-            React.createElement(TextInput, { id: `text-input-element-${Math.random() * 1000}`, placeholder: placeholder ?? "", labelText: "", value: preFiledValue ?? "", onChange: (event) => {
-                    setValue(event.target.value);
-                }, "aria-labelledby": titleId }))));
-};
+export const TextInputElement = ({ title, label, preFiledValue, setValue, placeholder }) => (React.createElement(React.Fragment, null,
+    React.createElement(Stack, { orientation: "horizontal" },
+        React.createElement(Stack, { gap: 1 },
+            React.createElement("h4", null, title),
+            label && React.createElement("p", { className: "cds--modal-header__label" }, label)),
+        React.createElement(TextInput, { id: `text-input-element-${Math.random() * 1000}`, placeholder: placeholder ?? "", labelText: "", value: preFiledValue ?? "", onChange: (event) => {
+                setValue(event.target.value);
+            } }))));

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

@@ -37,7 +37,11 @@ export const C3ProfileProvider = ({ children }) => {
             setActiveOrg(res?.find((org) => org.uuid === config.activeOrganizationId) || null);
         });
         loadClusters();
-    }, [config?.activeOrganizationId, decodedToken, decodedAudience]);
+    }, [
+        config?.activeOrganizationId,
+        JSON.stringify(decodedToken),
+        decodedAudience,
+    ]);
     useEffect(() => {
         const updateSystemTheme = ({ matches }) => {
             if (themeRef.current === "system")

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

@@ -1,10 +1,13 @@
 import React, { FC, ReactNode } from "react";
 import { Endpoints, Stage } from "../../api/endpoints.const";
 import { DecodedToken } from "./authToken";
+import { Dict } from "mixpanel-browser";
+export type MixPanelTrack = (event: string, data?: Dict) => void;
 type C3UserConfigurationBase = {
     activeOrganizationId: string;
     userToken: string;
     getNewUserToken: () => Promise<string>;
+    analyticsTrack?: MixPanelTrack;
 };
 type C3UserConfigurationWithEndpoints = C3UserConfigurationBase & {
     endpoints: Endpoints;
@@ -18,6 +21,8 @@ export type C3UserConfiguration = C3UserConfigurationWithEndpoints | C3UserConfi
 export type C3UserConfigurationContextValue = C3UserConfiguration & {
     decodedToken: DecodedToken | null;
     decodedAudience: string | null;
+    setActiveOrgId: (newOrg: string) => void;
+    analyticsTrack?: MixPanelTrack;
 };
 export declare const C3UserConfigurationContext: React.Context<C3UserConfigurationContextValue>;
 declare const C3UserConfigurationProvider: FC<C3UserConfiguration & {

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

@@ -9,19 +9,30 @@ export const C3UserConfigurationContext = React.createContext({
     decodedToken: null,
     decodedAudience: null,
     getNewUserToken: () => Promise.resolve(""),
+    setActiveOrgId: () => undefined,
 });
-const C3UserConfigurationProvider = ({ children, ...config }) => {
+const C3UserConfigurationProvider = ({ children, activeOrganizationId, ...config }) => {
     const [decodedToken, setDecodedToken] = useState(null);
     const [decodedAudience, setDecodedAudience] = useState(null);
+    const [activeOrgId, setActiveOrgId] = useState(activeOrganizationId);
     useEffect(() => {
         if (config.userToken)
             setDecodedToken(decodeJWT(config.userToken));
     }, [config.userToken]);
+    useEffect(() => {
+        setActiveOrgId(activeOrganizationId);
+    }, [activeOrganizationId]);
     useEffect(() => {
         const { audience } = decodedToken || {};
         setDecodedAudience((typeof audience === "string" ? audience : audience?.[0]) || null);
     }, [decodedToken]);
-    return (React.createElement(C3UserConfigurationContext.Provider, { value: { ...config, decodedToken, decodedAudience } },
+    return (React.createElement(C3UserConfigurationContext.Provider, { value: {
+            ...config,
+            activeOrganizationId: activeOrgId,
+            setActiveOrgId,
+            decodedToken,
+            decodedAudience,
+        } },
         React.createElement(C3ProfileProvider, null,
             React.createElement(C3HelpCenterProvider, null, children))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@camunda/camunda-composite-components",
-	"version": "0.2.18-rc.4",
+	"version": "0.2.18-rc.5",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"build": "yarn clean && tsc",
@@ -33,16 +33,16 @@
 		"@carbon/react": "1.37.0",
 		"@mdx-js/react": "2.3.0",
 		"@playwright/test": "1.37.1",
-		"@storybook/addon-a11y": "7.4.6",
-		"@storybook/addon-actions": "7.4.6",
-		"@storybook/addon-docs": "7.4.6",
-		"@storybook/addon-essentials": "7.4.6",
-		"@storybook/addon-interactions": "7.4.6",
-		"@storybook/addon-links": "7.4.6",
-		"@storybook/blocks": "7.4.6",
+		"@storybook/addon-a11y": "7.5.1",
+		"@storybook/addon-actions": "7.5.1",
+		"@storybook/addon-docs": "7.5.1",
+		"@storybook/addon-essentials": "7.5.1",
+		"@storybook/addon-interactions": "7.5.1",
+		"@storybook/addon-links": "7.5.1",
+		"@storybook/blocks": "7.5.1",
 		"@storybook/preset-scss": "1.0.3",
-		"@storybook/react": "7.4.6",
-		"@storybook/react-webpack5": "7.4.6",
+		"@storybook/react": "7.5.1",
+		"@storybook/react-webpack5": "7.5.1",
 		"@storybook/test-runner": "0.13.0",
 		"@storybook/testing-library": "0.2.2",
 		"@types/carbon-components-react": "7.55.3",
@@ -52,20 +52,20 @@
 		"@types/react": "18.2.21",
 		"@types/react-dom": "18.2.7",
 		"@types/styled-components": "5.1.27",
-		"@typescript-eslint/eslint-plugin": "6.7.5",
-		"@typescript-eslint/parser": "6.7.5",
+		"@typescript-eslint/eslint-plugin": "6.9.0",
+		"@typescript-eslint/parser": "6.9.0",
 		"axe-playwright": "1.2.3",
 		"babel-loader": "9.1.3",
 		"copyfiles": "2.4.1",
 		"css-loader": "6.8.1",
-		"eslint": "8.51.0",
+		"eslint": "8.52.0",
 		"eslint-config-prettier": "9.0.0",
 		"eslint-import-resolver-typescript": "3.6.1",
-		"eslint-plugin-import": "2.28.1",
+		"eslint-plugin-import": "2.29.0",
 		"eslint-plugin-prettier": "5.0.1",
 		"eslint-plugin-react": "7.33.2",
 		"eslint-plugin-react-hooks": "4.6.0",
-		"eslint-plugin-storybook": "0.6.14",
+		"eslint-plugin-storybook": "0.6.15",
 		"event-source-polyfill": "1.0.31",
 		"husky": "8.0.3",
 		"mixpanel-browser": "2.47.0",
@@ -76,7 +76,7 @@
 		"sass": "1.66.1",
 		"sass-loader": "13.3.2",
 		"serve": "14.2.1",
-		"storybook": "7.4.6",
+		"storybook": "7.5.1",
 		"style-loader": "3.3.3",
 		"styled-components": "6.0.7",
 		"typescript": "5.2.2",

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

@@ -1 +0,0 @@
-export declare const getTitleId: (title: string) => string;

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

@@ -1,5 +0,0 @@
-export const getTitleId = (title) => title
-    .toLowerCase()
-    .replace(/[^a-zA-Z0-9]+/g, "-")
-    .replace(/^-/, "")
-    .replace(/-$/, "");