@camunda/camunda-composite-components 0.2.18-rc.0 → 0.2.18-rc.1

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: customMixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
+export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, mixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
     const { isHelpCenterOpen: isOpen, setIsHelpCenterOpen } = useC3HelpCenter();
-    const { userToken, decodedToken, activeOrganizationId, handleTheme, decodedAudience, mixPanelTrack: configMixpanelTrack, } = useC3UserConfiguration() || {};
+    const { userToken, decodedToken, activeOrganizationId, handleTheme, decodedAudience, } = useC3UserConfiguration() || {};
     const { theme: themeConfig, isEnabled, reloadClusters } = useC3Profile();
     const themeHandlingEnabled = isEnabled && !!handleTheme && !!themeConfig;
     const themeRef = useRef();
@@ -20,14 +20,6 @@ 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 (configMixpanelTrack) {
-            configMixpanelTrack(event, data);
-        }
-    };
     useEffect(() => {
         const updateResolvedTheme = ({ matches }) => {
             if (themeRef.current === "system") {
@@ -100,7 +92,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,7 +49,6 @@ export type Tab = {
 };
 export type Organization = {
     uuid: string;
-    name: string;
     salesPlan?: {
         type: string;
     };

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

@@ -152,30 +152,34 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
                     React.createElement(SideNavItems, null,
                         React.createElement(SideNavMenuItem, null,
                             React.createElement("h5", null, "Help Center")),
-                        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))))))),
+                        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)))))))),
                 content)),
         persona.complete && activeTab === "recommendations" && (React.createElement(ModalFooter, { style: {
                 height: "62px",

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

@@ -157,13 +157,12 @@ export const Feedback = (props) => {
                                 // eslint-disable-next-line
                                 // @ts-ignore
                                 align: "bottom" },
-                                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(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("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,21 +10,19 @@ 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?: CamundaOrg;
+        activeOrganization?: {
+            activeLabel: string;
+            otherLabel: string;
+            orgName: string;
+            action: {
+                label: string;
+                onClick: () => void;
+            };
+        };
     };
-    switchToOrg?: (orgId: string) => void;
 };
 export type C3NavigationInfoSideBarProps = C3NavigationSideBarBaseProps & {
     type: "info";

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

@@ -4,47 +4,15 @@ 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, switchToOrg, elements, ...sideBarProps } = sideBar;
+    const { customElements, ...sideBarProps } = sideBar;
+    const activeOrganization = customElements?.activeOrganization;
     const { isOpen, setIsOpen } = useOrgSidebarState();
-    const { decodedAudience, setActiveOrgId, mixPanelTrack } = useC3UserConfiguration();
-    const { activeOrg, orgs } = useC3Profile();
-    const isCustomized = Boolean(customElements?.activeOrganization);
-    const onManageOrg = () => {
-        if (!isCustomized) {
-            mixPanelTrack?.("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);
-        mixPanelTrack?.("navBar:orgSwitch:click", { orgId });
-        switchToOrg?.(orgId);
-        setIsOpen(false);
-    };
-    const orgElements = orgs?.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 }) }, (customElements?.activeOrganization || activeOrg) && (React.createElement(React.Fragment, null,
+        }, icon: React.createElement(Enterprise, { size: 20 }) }, activeOrganization && (React.createElement(React.Fragment, null,
         React.createElement("div", { style: {
                 padding: "1rem",
                 paddingTop: "1.5rem",
@@ -67,11 +35,12 @@ const C3OrgSidebar = ({ sideBar }) => {
                         overflow: "hidden",
                         whiteSpace: "nowrap",
                     }, title: activeOrganization.orgName }, activeOrganization.orgName)),
-            isCustomized ? (React.createElement(Button, { size: "md", kind: "ghost", onClick: () => {
+            React.createElement(Button, { size: "md", kind: "ghost", key: "org-management", onClick: () => {
                     activeOrganization.action.onClick();
-                    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)))),
+                    if (sideBar.closeOnClick !== false) {
+                        setIsOpen(false);
+                    }
+                }, 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/story-helpers.d.ts

@@ -15,8 +15,7 @@ export declare function createInfoSideBarProps(options: {
 }): C3NavigationProps["infoSideBar"];
 export declare function createOrgSideBarProps(options: {
     isOpen: boolean;
-    orgCount?: number;
-    useConfig?: boolean;
+    orgCount: number;
 }): C3NavigationProps["orgSideBar"];
 export declare function createUserSideBarProps(options: {
     isOpen: boolean;

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

@@ -125,45 +125,36 @@ export function createInfoSideBarProps(options) {
 }
 export function createOrgSideBarProps(options) {
     const elements = [];
-    if (options.orgCount !== undefined) {
-        for (let i = 0; i < options.orgCount; i++) {
-            elements.push({
-                key: `org-${i}`,
-                label: `Organization ${i}`,
-            });
-        }
+    for (let i = 0; i < options.orgCount; i++) {
+        elements.push({
+            key: `org-${i}`,
+            label: `Organization ${i}`,
+        });
     }
     return {
         isOpen: options.isOpen,
-        customElements: options.useConfig
-            ? undefined
-            : {
-                activeOrganization: {
-                    activeLabel: "Active Organization",
-                    otherLabel: "Other Organization",
-                    orgName: "Camunda",
-                    action: {
-                        label: "Manage",
-                        onClick: () => console.log("Manage organization"),
-                    },
+        customElements: {
+            activeOrganization: {
+                activeLabel: "Active Organization",
+                otherLabel: "Other Organization",
+                orgName: "Camunda",
+                action: {
+                    label: "Manage",
+                    onClick: () => console.log("Manage organization"),
                 },
             },
-        elements: options.useConfig ? undefined : elements,
-        bottomElements: options.useConfig
-            ? undefined
-            : [
-                {
-                    key: "createTrial",
-                    label: "Create new Trial Org",
-                    renderIcon: Add,
-                    onClick: () => {
-                        console.log("clicked");
-                    },
+        },
+        elements,
+        bottomElements: [
+            {
+                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 { MixPanelTrack } from "../c3-user-configuration/c3-user-configuration-provider";
+import { Dict } from "mixpanel-browser";
 export type C3OnboardingSurveyProps = {
     onRequestClose: () => void;
     onRequestSkip: () => void;
     personaCallback: (persona: Persona) => void;
     theme: "light" | "dark";
-    mixpanelTrack?: MixPanelTrack;
+    mixpanelTrack?: (event: string, data: Dict | undefined) => void;
     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

@@ -22,6 +22,7 @@ export const DropdownSelect = ({ title, label, elements, selectedElement, setSel
         setSuggestion(input);
         setElement(rawElement);
     };
+    const titleId = title.replace(/\s/g, "-").toLowerCase();
     return (React.createElement(React.Fragment, null,
         React.createElement(Stack, null, (() => {
             return (React.createElement(React.Fragment, null,
@@ -30,7 +31,7 @@ export const DropdownSelect = ({ title, label, elements, selectedElement, setSel
                         gridTemplateColumns: "58% 42%",
                     } },
                     React.createElement(Stack, { gap: 1 },
-                        React.createElement("h4", null, title),
+                        React.createElement("h4", { id: titleId }, title),
                         (() => {
                             if (label) {
                                 return React.createElement("p", { className: "cds--modal-header__label" }, label);
@@ -38,7 +39,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, labelText: "", onChange: (event) => {
+                    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) => {
                             const element = elements.find((e) => e.value === event.target.value);
                             if (element)
                                 setElement(element.value);

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

@@ -1,10 +1,13 @@
 import { TextInput, Stack } from "@carbon/react";
 import React from "react";
-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);
-            } }))));
+export const TextInputElement = ({ title, label, preFiledValue, setValue, placeholder }) => {
+    const titleId = title.replace(/\s/g, "-").toLowerCase();
+    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 }))));
+};

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

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

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

@@ -1,13 +1,10 @@
 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>;
-    mixPanelTrack?: MixPanelTrack;
 };
 type C3UserConfigurationWithEndpoints = C3UserConfigurationBase & {
     endpoints: Endpoints;
@@ -21,8 +18,6 @@ export type C3UserConfiguration = C3UserConfigurationWithEndpoints | C3UserConfi
 export type C3UserConfigurationContextValue = C3UserConfiguration & {
     decodedToken: DecodedToken | null;
     decodedAudience: string | null;
-    setActiveOrgId: (newOrg: string) => void;
-    mixPanelTrack?: 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,30 +9,19 @@ export const C3UserConfigurationContext = React.createContext({
     decodedToken: null,
     decodedAudience: null,
     getNewUserToken: () => Promise.resolve(""),
-    setActiveOrgId: () => undefined,
 });
-const C3UserConfigurationProvider = ({ children, activeOrganizationId, ...config }) => {
+const C3UserConfigurationProvider = ({ children, ...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,
-            activeOrganizationId: activeOrgId,
-            setActiveOrgId,
-            decodedToken,
-            decodedAudience,
-        } },
+    return (React.createElement(C3UserConfigurationContext.Provider, { value: { ...config, 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.0",
+	"version": "0.2.18-rc.1",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"build": "yarn clean && tsc",
@@ -26,10 +26,10 @@
 		"test": "yarn test:ts && yarn test:storybook && yarn test:visual-regression:docker"
 	},
 	"devDependencies": {
-		"@babel/core": "7.23.0",
-		"@babel/preset-env": "7.22.20",
+		"@babel/core": "7.23.2",
+		"@babel/preset-env": "7.23.2",
 		"@babel/preset-react": "7.22.15",
-		"@babel/preset-typescript": "7.23.0",
+		"@babel/preset-typescript": "7.23.2",
 		"@carbon/react": "1.37.0",
 		"@mdx-js/react": "2.3.0",
 		"@playwright/test": "1.37.1",