@camunda/camunda-composite-components 0.22.4 → 0.22.5

package/lib/esm/src/components/c3-navigation/c3-navigation-actions/c3-action-buttons.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { HeaderGlobalAction } from '@carbon/react';
+const C3ActionButtons = ({ elements, }) => {
+    return (_jsx(_Fragment, { children: elements.map((actionButton) => {
+            if ('element' in actionButton) {
+                return actionButton.element;
+            }
+            else {
+                return (_jsx(HeaderGlobalAction, { "aria-label": `Open ${actionButton.label}`, onClick: actionButton.action, isActive: false, children: actionButton.icon }, `${actionButton.label}-key`));
+            }
+        }) }));
+};
+export default C3ActionButtons;

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

@@ -0,0 +1,10 @@
+import type { JSX, ReactElement } from 'react';
+export interface C3ActionButtonElement {
+    element: JSX.Element;
+}
+export interface C3ActionButtonSimple {
+    label: string;
+    icon: ReactElement;
+    action: () => void;
+}
+export type C3ActionButtonsProps = Array<C3ActionButtonElement | C3ActionButtonSimple>;

package/lib/esm/src/components/c3-navigation/c3-navigation-actions/c3-action-buttons.types.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+export {};

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

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { C3NavigationProps } from '../c3-navigation.types';
+export type LoadingStatus = 'inactive' | 'active' | 'finished' | 'error';
+export declare const C3NavigationAppBar: React.FC<C3NavigationProps>;

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

@@ -0,0 +1,380 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { FormLabel, HeaderGlobalAction, HeaderMenuItem, HeaderSideNavItems, Modal, SideNavItems, SideNavLink, SideNavMenu, SideNavMenuItem, } from '@carbon/react';
+import { Close } from '@carbon/react/icons/index.esm.js';
+import { useCallback, useEffect, useState } from 'react';
+import { styled } from 'styled-components';
+import { C3AppMenuIcon } from '../../../assets/c3-icons.js';
+import { useClusterUpdate } from '../../../contexts/c3-cluster-update-manager.js';
+import { APPS, getEndpointForApp, getReadableAppName, hasReadPermissionForApp, isAdminApp, } from '../../../utils/camunda.js';
+import { checkVersion, VersionCheckOperator, } from '../../../utils/versionCheck.utils.js';
+import { useC3Profile } from '../../c3-user-configuration/c3-profile-provider/c3-profile-provider.js';
+import { useC3UserConfiguration } from '../../c3-user-configuration/c3-user-configuration-provider.js';
+import { ActiveOrgName } from '../c3-org-sidebar/components.js';
+import { useOnClickOutside } from '../helpers.js';
+import { NavWrapper, SideNav } from './components.js';
+const getOrgLink = (app, orgId, domain) => {
+    switch (app) {
+        case 'console': {
+            return `https://console.${domain}/org/${orgId}`;
+        }
+        case 'modeler': {
+            return `https://modeler.${domain}/login?returnUrl=/org/${orgId}`;
+        }
+        default: {
+            return '#';
+        }
+    }
+};
+const getClustersToRender = (clusters, activeOrg, appToNavigateTo) => {
+    return clusters?.filter(({ status, endpoints, generation }) => status[isAdminApp(appToNavigateTo) ? 'zeebe' : appToNavigateTo] ===
+        'Healthy' &&
+        getEndpointForApp(appToNavigateTo, endpoints) &&
+        // either the user has appreadpermissions on this app
+        (hasReadPermissionForApp(appToNavigateTo, activeOrg?.permissions) ||
+            //  OR this is a 8.8+ cluster - in this case we also allow rendering this item
+            checkVersion({
+                possiblyVersionOrDockerPath: generation.versions?.zeebe,
+                trueForSnapshot: true,
+                operator: VersionCheckOperator.GreaterThanOrEqual,
+                versionToCompareTo: '8.8.0',
+                trueOnInvalidVersion: false,
+            })));
+};
+/**
+ * Returns the display label for admin/identity clusters in the app bar.
+ * Shows "Admin" only if at least one cluster is on version 8.9.0-alpha5 or newer;
+ * otherwise falls back to "Identity" for older cluster versions.
+ */
+const getAdminLabelForClusters = (clusters) => {
+    const hasAdminVersionCluster = clusters.some((cluster) => checkVersion({
+        possiblyVersionOrDockerPath: cluster.generation.versions?.zeebe,
+        trueForSnapshot: true,
+        operator: VersionCheckOperator.GreaterThanOrEqual,
+        versionToCompareTo: '8.9.0-alpha5',
+        trueOnInvalidVersion: false,
+    }));
+    return hasAdminVersionCluster ? 'Admin' : 'Identity';
+};
+const OrgNameWrapper = styled.div `
+  margin-bottom: 1rem;
+  padding: 0px 16px;
+  @media (min-width: 768px) {
+    display: none;
+  }
+`;
+const OrgPickerModal = ({ isOpen, onCancel, orgs, activeOrg, loadingStatus, appToNavigateTo, domain, }) => {
+    const hasNoTeams = Object.values(orgs ?? {})?.every(({ org }) => {
+        return !org?.name;
+    });
+    const hasNoTeamsWithClusters = Object.values(orgs ?? {})?.every(({ clusters }) => {
+        const isConsoleOrModeler = [APPS[0], APPS[1]].includes(appToNavigateTo);
+        return (!isConsoleOrModeler &&
+            getClustersToRender(clusters, activeOrg, appToNavigateTo).length === 0);
+    });
+    return (_jsx(Modal, { danger: true, open: isOpen, modalHeading: 'Select a team', onRequestClose: onCancel, passiveModal: true, loadingStatus: loadingStatus, size: 'sm', children: _jsxs("div", { style: { marginLeft: '-1rem' }, children: [_jsx(FormLabel, { style: {
+                        paddingTop: '15px',
+                        paddingLeft: '1rem',
+                    }, children: hasNoTeams
+                        ? 'No teams found'
+                        : hasNoTeamsWithClusters
+                            ? 'No teams with clusters found'
+                            : 'Teams' }), _jsx("div", { style: {
+                        marginTop: '-1rem',
+                    }, children: _jsx(SideNavItems, { children: Object.values(orgs ?? {})?.map(({ org, clusters }) => {
+                            const isConsoleOrModeler = [APPS[0], APPS[1]].includes(appToNavigateTo);
+                            const toOrg = getOrgLink(appToNavigateTo, org.uuid, domain ?? '');
+                            if (isConsoleOrModeler) {
+                                return (_jsx(SideNavLink, { href: toOrg, children: org?.name }, org?.uuid));
+                            }
+                            const clustersToRender = getClustersToRender(clusters, activeOrg, appToNavigateTo);
+                            if (clustersToRender.length === 0) {
+                                return null;
+                            }
+                            return (_jsx(SideNavMenu, { title: org?.name, children: clustersToRender?.map((cluster) => {
+                                    return (_jsx(SideNavMenuItem, { href: cluster.endpoints[appToNavigateTo], children: cluster.name }, cluster.uuid));
+                                }) }, org?.uuid));
+                        }) }) })] }) }));
+};
+const SubElementWrapper = styled.ul `
+  .cds--side-nav__submenu[aria-expanded='true'] + .cds--side-nav__menu {
+    max-block-size: 456px;
+    overflow-y: auto;
+    visibility: inherit;
+  }
+`;
+export const C3NavigationAppBar = ({ app: appProps, appBar, forwardRef, navbar, toggleAppbar, }) => {
+    const { currentApp, domain, analyticsTrack, currentClusterUuid } = useC3UserConfiguration();
+    const { orgs, clusters, setClusters, activeOrg, isEnabled, loadClustersById, } = useC3Profile();
+    const { setPanelRef: panelRef, setIconRef: iconRef } = useOnClickOutside(() => toggleAppbar(false));
+    const [appElements, setAppElements] = useState([]);
+    const [loadingStatus, setLoadingStatus] = useState('inactive');
+    const [clustersByOrgId, setClustersByOrgId] = useState(null);
+    const [appToNavigateTo, setAppToNavigateTo] = useState(APPS[0]);
+    useClusterUpdate({
+        onUpdate: (data) => {
+            if (data && data.org && data.org === activeOrg?.uuid) {
+                switch (data.entity) {
+                    case 'cluster': {
+                        if (data.payload.uuid) {
+                            const clusterDto = data.payload;
+                            const status = clusterDto.status;
+                            const endpoints = {
+                                tasklist: status?.tasklistUrl,
+                                operate: status?.operateUrl,
+                                optimize: status?.optimizeUrl,
+                                console: '',
+                                modeler: '',
+                                identity: '',
+                                admin: '',
+                            };
+                            const expectedStatus = {
+                                tasklist: status?.tasklistStatus,
+                                operate: status?.operateStatus,
+                                optimize: status?.optimizeStatus,
+                                console: '',
+                                modeler: '',
+                                identity: '',
+                                admin: '',
+                                zeebe: '',
+                            };
+                            const affectedCluster = {
+                                uuid: clusterDto.uuid,
+                                name: clusterDto.name,
+                                status: expectedStatus,
+                                generation: clusterDto.generation,
+                                endpoints,
+                            };
+                            switch (data.type) {
+                                case 'deleted': {
+                                    setClusters((clusters) => clusters?.filter((cluster) => cluster.uuid !== affectedCluster.uuid) ?? []);
+                                    break;
+                                }
+                                case 'updated': {
+                                    setClusters((clusters) => {
+                                        if (!clusters) {
+                                            return [];
+                                        }
+                                        const clustersClone = [...clusters];
+                                        const clusterToUpdateIndex = clustersClone?.findIndex((cluster) => cluster.uuid === affectedCluster.uuid);
+                                        if (clusterToUpdateIndex > -1) {
+                                            clustersClone[clusterToUpdateIndex] = affectedCluster;
+                                            return clustersClone;
+                                        }
+                                        return clusters;
+                                    });
+                                    break;
+                                }
+                                case 'created': {
+                                    setClusters((clusters) => {
+                                        if (!clusters) {
+                                            return [];
+                                        }
+                                        const clustersClone = [...clusters];
+                                        const clusterToUpdateIndex = clustersClone?.findIndex((cluster) => cluster.uuid === affectedCluster.uuid);
+                                        if (clusterToUpdateIndex > -1) {
+                                            clustersClone[clusterToUpdateIndex] = affectedCluster;
+                                        }
+                                        else {
+                                            clustersClone.push(affectedCluster);
+                                        }
+                                        return clustersClone;
+                                    });
+                                    break;
+                                }
+                                default:
+                                    break;
+                            }
+                        }
+                        break;
+                    }
+                    default: {
+                        break;
+                    }
+                }
+            }
+        },
+    });
+    if (!appBar.elements && !isEnabled)
+        console.warn('No app elements and user config provided. Please provide at least one of them.');
+    const isMemberOfTeam = useCallback((orgUuid) => orgs?.some(({ uuid }) => uuid === orgUuid) || false, [orgs]);
+    const getClustersForSuperOrg = useCallback(async () => {
+        const updatedClusterByOrgId = {};
+        await Promise.all(activeOrg?.childOrganizations
+            ?.filter((team) => isMemberOfTeam(team.uuid))
+            .map((org) => loadClustersById(org.uuid)?.then(({ result }) => {
+            updatedClusterByOrgId[org.uuid] = {
+                org,
+                clusters: result ?? [],
+            };
+        })) ?? []);
+        setClustersByOrgId(updatedClusterByOrgId);
+    }, [activeOrg, isMemberOfTeam]);
+    const handleSuperOrg = useCallback(() => {
+        if (!activeOrg?.uuid) {
+            return;
+        }
+        setIsOrgPickerModalOpen(true);
+        if (clustersByOrgId) {
+            return;
+        }
+        setLoadingStatus('active');
+        getClustersForSuperOrg()
+            .catch((error) => console.error(error))
+            .finally(() => {
+            setLoadingStatus('finished');
+        });
+    }, [clustersByOrgId, activeOrg, getClustersForSuperOrg]);
+    useEffect(() => {
+        if (activeOrg?.isSuperOrg) {
+            getClustersForSuperOrg()
+                .catch((error) => console.error(error))
+                .finally(() => {
+                setLoadingStatus('finished');
+            });
+        }
+    }, [activeOrg, getClustersForSuperOrg]);
+    useEffect(() => {
+        if (appBar.elements)
+            return;
+        const defaultElements = [];
+        const enforceDropDown = !APPS.filter((app) => app !== 'console' && app !== 'modeler').every((app) => getClustersToRender(clusters ?? [], activeOrg, app).length < 2);
+        for (const app of APPS) {
+            if (!domain || !currentApp || !activeOrg?.uuid)
+                return;
+            const element = {
+                key: app,
+                label: getReadableAppName(app),
+                active: isAdminApp(app) ? isAdminApp(currentApp) : currentApp === app,
+                href: currentApp === app || (isAdminApp(app) && isAdminApp(currentApp))
+                    ? '#'
+                    : undefined,
+                onClick: currentApp === app || (isAdminApp(app) && isAdminApp(currentApp))
+                    ? () => false
+                    : undefined,
+            };
+            if (app === currentApp &&
+                ['console', 'modeler'].includes(app) &&
+                appProps.routeProps) {
+                element.routeProps = appProps.routeProps;
+            }
+            else if (app === 'console') {
+                element.href = `https://console.${domain}/org/${activeOrg?.uuid}`;
+            }
+            else if (app === 'modeler') {
+                const hasPermission = activeOrg?.permissions?.org?.webide?.read;
+                if (hasPermission) {
+                    element.href = `https://modeler.${domain}/login?returnUrl=/org/${activeOrg?.uuid}`;
+                }
+            }
+            else {
+                const appHasReadPermission = hasReadPermissionForApp(app, activeOrg?.permissions);
+                const clustersToRender = getClustersToRender(clusters ?? [], activeOrg, app);
+                if (isAdminApp(app)) {
+                    element.label = getAdminLabelForClusters(clustersToRender);
+                }
+                if (clustersToRender?.length === 1 && !enforceDropDown) {
+                    element.href = getEndpointForApp(app, clustersToRender[0].endpoints);
+                }
+                else if (clustersToRender?.length > 1 ||
+                    (enforceDropDown && clustersToRender?.length > 0)) {
+                    element.onClick = undefined;
+                    element.subElements = clustersToRender.map((cluster, index) => ({
+                        key: `${app}-${cluster.uuid}-${index}`,
+                        label: cluster.name,
+                        href: getEndpointForApp(app, cluster.endpoints),
+                        onClick: () => {
+                            toggleAppbar(false);
+                            analyticsTrack?.(`${app}:open`, { currentApp: app });
+                        },
+                        isActive: (currentApp === app && currentClusterUuid === cluster.uuid) ||
+                            (isAdminApp(app) &&
+                                isAdminApp(currentApp) &&
+                                currentClusterUuid === cluster.uuid),
+                    }));
+                }
+                else if (isAdminApp(app)) {
+                    // no app-teaser for admin/identity for now
+                    continue;
+                }
+                else if (appHasReadPermission) {
+                    if (appBar.appTeaserRouteProps?.[app]) {
+                        element.routeProps = appBar.appTeaserRouteProps?.[app];
+                    }
+                    else {
+                        element.href = `https://${currentApp}.${domain}/org/${activeOrg?.uuid}/appTeaser/${app}`;
+                    }
+                }
+            }
+            if (element.href || element.routeProps || element.subElements) {
+                if (activeOrg.isSuperOrg) {
+                    element.href = '#';
+                    element.routeProps = null;
+                    element.onClick = () => {
+                        setAppToNavigateTo(app);
+                        handleSuperOrg();
+                        // probs want to track?
+                        // analyticsTrack?.(`${app}:open`, { currentApp: app })
+                    };
+                }
+                defaultElements.push(element);
+            }
+        }
+        setAppElements(defaultElements);
+    }, [clusters, currentApp, domain, handleSuperOrg]);
+    const appBarElements = appBar.elements || (clusters || clustersByOrgId ? appElements : null);
+    const [isOrgPickerModalOpen, setIsOrgPickerModalOpen] = useState(false);
+    const orgName = activeOrg?.name || navbar.orgName;
+    return (_jsxs(_Fragment, { children: [_jsx(HeaderGlobalAction, { ref: iconRef, "aria-label": 'Camunda components', isActive: appBar.isOpen, onClick: () => {
+                    toggleAppbar(!appBar.isOpen);
+                }, tooltipAlignment: 'start', 
+                // @ts-expect-error
+                leaveDelayMs: 100, children: appBar.isOpen ? _jsx(Close, { size: 20 }) : _jsx(C3AppMenuIcon, { size: 20 }) }), _jsx(OrgPickerModal, { activeOrg: activeOrg, appToNavigateTo: appToNavigateTo, isOpen: isOrgPickerModalOpen, orgs: clustersByOrgId, onCancel: () => {
+                    setIsOrgPickerModalOpen(false);
+                }, loadingStatus: loadingStatus, domain: domain }), _jsx(NavWrapper, { children: _jsx(SideNav, { ref: panelRef, "aria-label": appBar.ariaLabel || 'Side Navigation', expanded: appBar.isOpen, isPersistent: false, children: _jsxs(SideNavItems, { children: [orgName && (_jsx("li", { children: _jsxs(OrgNameWrapper, { children: [_jsx(FormLabel, { children: "Organization" }), _jsx(ActiveOrgName, { className: 'textPrimary', title: orgName, children: orgName })] }) })), _jsx("li", { children: navbar.elements.length > 0 && (_jsx(HeaderSideNavItems, { hasDivider: true, children: navbar.elements.map((element) => (_jsx(HeaderMenuItem, { as: element.routeProps && forwardRef, isActive: element.isCurrentPage, ...element.routeProps, onClick: () => {
+                                            if (element.routeProps.onClick) {
+                                                element.routeProps.onClick();
+                                            }
+                                            if (appBar.closeOnClick !== false) {
+                                                toggleAppbar(false);
+                                            }
+                                        }, children: element.label }, element.key))) })) }), _jsx("li", { children: _jsx(SubElementWrapper, { "$expanded": appBar.isOpen, children: appBarElements &&
+                                        appBarElements.map((element) => {
+                                            if (element.subElements && element.subElements.length > 0) {
+                                                return (_jsx(SideNavMenu, { large: true, title: element.label, children: element.subElements.map((subElement) => (_jsx(SideNavMenuItem, { as: subElement.routeProps && forwardRef, href: subElement.href, target: subElement.href ? subElement.target : undefined, isActive: subElement.isActive || subElement.active, ...subElement.routeProps, onClick: () => {
+                                                            if (subElement.onClick) {
+                                                                subElement.onClick();
+                                                            }
+                                                            if (subElement.routeProps?.onClick) {
+                                                                subElement.routeProps.onClick();
+                                                            }
+                                                            if (appBar.closeOnClick !== false) {
+                                                                toggleAppbar(false);
+                                                            }
+                                                            if (appBar.elementClicked) {
+                                                                appBar.elementClicked(subElement.key);
+                                                            }
+                                                        }, children: subElement.label }, subElement.key))) }, element.key));
+                                            }
+                                            else {
+                                                return (_jsx(SideNavLink, { as: element.routeProps && forwardRef, large: true, isActive: element.active, ...element.routeProps, onClick: () => {
+                                                        if (element.onClick) {
+                                                            element.onClick();
+                                                        }
+                                                        if (element.routeProps?.onClick) {
+                                                            element.routeProps.onClick();
+                                                        }
+                                                        if (appBar.closeOnClick !== false) {
+                                                            toggleAppbar(false);
+                                                        }
+                                                        if (appBar.elementClicked) {
+                                                            appBar.elementClicked(element.key);
+                                                        }
+                                                    }, href: element.href, target: element.href ? element.target : undefined, children: element.label }, element.key));
+                                            }
+                                        }) }) })] }) }) })] }));
+};

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

@@ -0,0 +1,2 @@
+export declare const NavWrapper: any;
+export declare const SideNav: any;

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

@@ -0,0 +1,21 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { SideNav as CarbonSideNav } from '@carbon/react';
+import styled from 'styled-components';
+export const NavWrapper = styled.div `
+  .cds--side-nav__overlay {
+    display: none;
+  }
+`;
+// Use a minimal prop typing to wrap Carbon's SideNav without relying on legacy carbon-components-react types
+export const SideNav = styled(CarbonSideNav) `
+  visibility: ${({ expanded }) => (expanded ? 'visible' : 'hidden')};
+  display: grid;
+  grid-auto-flow: row;
+  grid-auto-rows: max-content 1fr;
+  border-right: ${({ expanded }) => expanded ? '1px solid var(--cds-border-subtle)' : undefined};
+  overflow-y: auto;
+`;

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

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import type { C3NavigationInfoSideBarProps } from './c3-navigation-sidebar.types';
+declare const C3InfoSidebar: FC<{
+    sideBar: C3NavigationInfoSideBarProps;
+}>;
+export default C3InfoSidebar;

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Help } from '@carbon/react/icons/index.esm.js';
+import { useC3UserConfiguration } from '../../c3-user-configuration/c3-user-configuration-provider.js';
+import C3NavigationSideBar from './c3-navigation-sidebar.js';
+import { SwitcherDivider } from './components.js';
+const C3InfoSidebar = ({ sideBar, }) => {
+    const { version, ...sideBarProps } = sideBar;
+    const { enableLogs } = useC3UserConfiguration();
+    if (version && enableLogs)
+        console.warn('The `version` prop in the info sidebar is deprecated and will be removed in a future release. Please set `version` in the `userSideBar` prop instead.');
+    return (_jsx(C3NavigationSideBar, { sideBar: {
+            ...sideBarProps,
+            ariaLabel: sideBarProps.ariaLabel || 'Info Sidebar',
+        }, icon: _jsx(Help, { size: 20 }), bottomChildren: version !== undefined && (_jsxs(_Fragment, { children: [_jsx(SwitcherDivider, {}), _jsxs("span", { className: 'cds--switcher__item', style: {
+                        padding: 'var(--cds-spacing-05)',
+                        paddingTop: 'var(--cds-spacing-03)',
+                        paddingBottom: 0,
+                        color: 'var(--cds-text-primary)',
+                        fontSize: 'var(--cds-body-01-font-size)',
+                        fontWeight: 'var(--cds-body-01-font-weight)',
+                        lineHeight: 'var(--cds-body-01-line-height)',
+                        letterSpacing: 'var(--cds-body-01-letter-spacing)',
+                    }, children: ["Version ", version] }), _jsxs("span", { className: 'cds--switcher__item', style: {
+                        paddingRight: 'var(--cds-spacing-05)',
+                        paddingLeft: 'var(--cds-spacing-05)',
+                        color: 'var(--cds-text-secondary)',
+                        fontSize: 'var(--cds-label-01-font-size)',
+                        fontWeight: 'var(--cds-label-01-font-weight)',
+                        lineHeight: 'var(--cds-label-01-line-height)',
+                        letterSpacing: 'var(--cds-label-01-letter-spacing)',
+                    }, children: [`© Camunda Services GmbH ${new Date().getFullYear()}`, _jsx("br", {}), " All rights reserved."] })] })) }));
+};
+export default C3InfoSidebar;

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

@@ -0,0 +1,12 @@
+import { type JSX } from 'react';
+import type { C3NavigationElementProps } from '../c3-navigation.types';
+import type { C3NavigationSideBarProps } from './c3-navigation-sidebar.types';
+declare const C3NavigationSidebarElement: (props: {
+    element: C3NavigationElementProps;
+    index: number;
+    itemTabIndex?: number;
+    sideBar: C3NavigationSideBarProps;
+    setSideBarOpen: (open: boolean) => void;
+    scrollBarWidth: number;
+}) => JSX.Element;
+export default C3NavigationSidebarElement;

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Button, SideNavLink } from '@carbon/react';
+import { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { SwitcherDivider } from './components.js';
+const Row = styled.div `
+  display: flex;
+  justify-content: start;
+  align-items: center;
+
+  li {
+    list-style-type: none;
+  }
+
+  .cds--switcher__item:nth-child(1) {
+    margin-block-start: 0;
+  }
+
+  &:nth-child(1) {
+    margin-block-start: 1rem;
+  }
+
+  .cds--overflow-menu-options {
+    z-index: 9000 !important;
+  }
+`;
+const C3NavigationSidebarElement = (props) => {
+    const sideBarElementRef = useRef(null);
+    const [isOverflown, setIsOverflown] = useState(false);
+    const { overflowMenu, isActive, isNavLink } = props.element;
+    const Element = isNavLink ? SideNavLink : Button;
+    const handleSetIsOverflown = () => {
+        const element = sideBarElementRef.current;
+        setIsOverflown(element ? element.offsetWidth < element.scrollWidth : false);
+    };
+    useEffect(() => {
+        window.addEventListener('resize', handleSetIsOverflown);
+        handleSetIsOverflown();
+        return () => window.removeEventListener('resize', handleSetIsOverflown);
+    }, []);
+    return (_jsxs(_Fragment, { children: [props.element.preceedingDivider && _jsx(SwitcherDivider, {}), _jsxs(Row, { children: [_jsx(Element, { style: {
+                            width: overflowMenu
+                                ? `calc(14rem - ${props.scrollBarWidth}px)`
+                                : `calc(16rem - ${props.scrollBarWidth}px)`,
+                            ...(props.index === 0 &&
+                                (!('elements' in props.sideBar) || !props.sideBar.elements)
+                                ? { marginTop: '1.5rem' }
+                                : {}),
+                        }, size: 'sm', kind: props.element.kind ?? 'ghost', className: `cds--switcher__item ${isActive ? 'cds--side-nav__item--active' : ''}`, onClick: () => {
+                            if (props.element.onClick) {
+                                props.element.onClick();
+                            }
+                            if (props.sideBar.closeOnClick !== false) {
+                                props.setSideBarOpen(false);
+                            }
+                        }, tabIndex: props.itemTabIndex, renderIcon: props.element.renderIcon, ...(isNavLink ? { isActive } : {}), children: _jsx("span", { ref: sideBarElementRef, title: isOverflown ? props.element.label : '', style: {
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                width: '100%',
+                            }, children: props.element.label }) }), overflowMenu] })] }));
+};
+export default C3NavigationSidebarElement;

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

@@ -0,0 +1,10 @@
+import { type JSX, type ReactElement, type ReactNode } from 'react';
+import type { C3NavigationSideBarProps } from './c3-navigation-sidebar.types';
+declare const C3NavigationSideBar: (props: {
+    sideBar: C3NavigationSideBarProps;
+    icon: ReactElement;
+    children?: ReactNode;
+    version?: ReactNode;
+    bottomChildren?: ReactNode;
+}) => JSX.Element;
+export default C3NavigationSideBar;