@camunda/camunda-composite-components 0.22.5 → 0.22.7

package/lib/esm/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@camunda/camunda-composite-components",
-    "version": "0.22.5",
+    "version": "0.22.7",
     "description": "Camunda Composite Components",
     "bugs": {
         "url": "https://github.com/camunda/camunda-cloud-management-apps/issues"
@@ -58,34 +58,34 @@
         "@auth0/auth0-spa-js": "2.18.0",
         "@camunda/ccma-shared-types": "workspace:*",
         "@carbon/react": "1.103.0",
-        "@chromatic-com/storybook": "5.0.2",
+        "@chromatic-com/storybook": "5.1.1",
         "@mdx-js/react": "3.1.1",
         "@playwright/test": "1.58.2",
-        "@storybook/addon-a11y": "10.3.1",
-        "@storybook/addon-docs": "10.3.1",
-        "@storybook/addon-links": "10.3.1",
-        "@storybook/addon-vitest": "10.3.1",
-        "@storybook/react": "10.3.1",
-        "@storybook/react-vite": "10.3.1",
-        "@vitest/browser": "4.1.0",
-        "@vitest/browser-playwright": "4.1.0",
-        "vitest": "4.1.0",
+        "@storybook/addon-a11y": "10.3.3",
+        "@storybook/addon-docs": "10.3.3",
+        "@storybook/addon-links": "10.3.3",
+        "@storybook/addon-vitest": "10.3.3",
+        "@storybook/react": "10.3.3",
+        "@storybook/react-vite": "10.3.3",
+        "@vitest/browser": "4.1.1",
+        "@vitest/browser-playwright": "4.1.1",
+        "vitest": "4.1.1",
         "conventional-changelog-conventionalcommits": "9.3.0",
         "eslint-import-resolver-typescript": "4.4.4",
         "eslint-plugin-react": "7.37.5",
         "eslint-plugin-react-hooks": "7.0.1",
-        "eslint-plugin-storybook": "10.3.1",
+        "eslint-plugin-storybook": "10.3.3",
         "event-source-polyfill": "1.0.31",
-        "mixpanel-browser": "2.76.0",
+        "mixpanel-browser": "2.77.0",
         "playwright": "1.58.2",
         "react": "19.2.4",
         "react-dom": "19.2.4",
         "react-is": "19.2.4",
         "rimraf": "6.1.3",
         "serve": "14.2.6",
-        "storybook": "10.3.1",
+        "storybook": "10.3.3",
         "styled-components": "6.3.12",
-        "typescript-eslint": "8.57.1",
+        "typescript-eslint": "8.57.2",
         "wait-on": "9.0.4"
     },
     "peerDependencies": {

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

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 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 { Fragment, 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';
@@ -107,6 +107,14 @@ const SubElementWrapper = styled.ul `
     visibility: inherit;
   }
 `;
+const AppBarDivider = styled.li.attrs({
+    role: 'separator',
+    'aria-hidden': 'true',
+}) `
+  border-top: 1px solid var(--cds-border-subtle);
+  margin: 0.5rem 1rem;
+  list-style: none;
+`;
 export const C3NavigationAppBar = ({ app: appProps, appBar, forwardRef, navbar, toggleAppbar, }) => {
     const { currentApp, domain, analyticsTrack, currentClusterUuid } = useC3UserConfiguration();
     const { orgs, clusters, setClusters, activeOrg, isEnabled, loadClustersById, } = useC3Profile();
@@ -326,7 +334,14 @@ export const C3NavigationAppBar = ({ app: appProps, appBar, forwardRef, navbar,
         }
         setAppElements(defaultElements);
     }, [clusters, currentApp, domain, handleSuperOrg]);
-    const appBarElements = appBar.elements || (clusters || clustersByOrgId ? appElements : null);
+    const hasExtraAppBarElements = (appBar.extraElements?.length ?? 0) > 0;
+    const appBarElements = appBar.elements
+        ? appBar.elements
+        : clusters || clustersByOrgId
+            ? [...appElements, ...(appBar.extraElements ?? [])]
+            : hasExtraAppBarElements
+                ? appBar.extraElements
+                : 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: () => {
@@ -342,39 +357,38 @@ export const C3NavigationAppBar = ({ app: appProps, appBar, forwardRef, navbar,
                                             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();
+                                        }, children: element.label }, element.key))) })) }), _jsx("li", { children: _jsx(SubElementWrapper, { "$expanded": appBar.isOpen, children: appBarElements?.map((element) => {
+                                        if (element.subElements && element.subElements.length > 0) {
+                                            return (_jsxs(Fragment, { children: [element.preceedingDivider && _jsx(AppBarDivider, {}), _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 (_jsxs(Fragment, { children: [element.preceedingDivider && _jsx(AppBarDivider, {}), _jsx(SideNavLink, { as: element.routeProps && forwardRef, large: true, isActive: element.active, ...element.routeProps, onClick: () => {
+                                                            if (element.onClick) {
+                                                                element.onClick();
                                                             }
-                                                            if (subElement.routeProps?.onClick) {
-                                                                subElement.routeProps.onClick();
+                                                            if (element.routeProps?.onClick) {
+                                                                element.routeProps.onClick();
                                                             }
                                                             if (appBar.closeOnClick !== false) {
                                                                 toggleAppbar(false);
                                                             }
                                                             if (appBar.elementClicked) {
-                                                                appBar.elementClicked(subElement.key);
+                                                                appBar.elementClicked(element.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));
-                                            }
-                                        }) }) })] }) }) })] }));
+                                                        }, href: element.href, target: element.href ? element.target : undefined, children: element.label })] }, element.key));
+                                        }
+                                    }) }) })] }) }) })] }));
 };

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

@@ -64,6 +64,7 @@ export type C3NavigationNotificationsSideBarProps = C3NavigationSideBarBaseProps
 type AppTeaserRouteProps = any;
 export type C3NavigationAppBarProps = Omit<C3NavigationSideBarBaseProps, 'tooltip'> & {
     type: 'app';
+    extraElements?: C3NavigationElementProps[];
     appTeaserRouteProps?: {
         operate?: AppTeaserRouteProps;
         tasklist?: AppTeaserRouteProps;

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

@@ -70,10 +70,13 @@ const LICENSE_EXPIRY = DAY * 30;
 export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, infoButton, helpCenter, actionButtons, userSideBar, notificationSideBar, clusterUuid, options, }) => {
     const { openHelpCenter } = useC3HelpCenter();
     const { currentClusterUuid, decodedAudience } = useC3UserConfiguration();
-    const { activeOrg } = useC3Profile();
+    const { activeOrg, isEnabled } = useC3Profile();
     const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`);
     const appBarElementsLength = appBar.elements?.length ?? 0;
+    const appBarExtraElementsLength = appBar.extraElements?.length ?? 0;
     const displayAppBar = !!(appBarElementsLength > 0 ||
+        appBarExtraElementsLength > 0 ||
+        isEnabled ||
         appBar.appTeaserRouteProps ||
         (!isLargeScreen && navbar.elements.length > 0));
     const [appBarOpen, setAppBarOpen] = useState(appBar.isOpen || false);

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

@@ -14,6 +14,10 @@ test.describe('Navigation', () => {
         await getStory(page, 'uishell-c3navigation--app-bar-opened');
         await expect(page).toHaveScreenshot();
     });
+    test('App bar opened with extra elements', async ({ page }) => {
+        await getStory(page, 'uishell-c3navigation--app-bar-opened-with-extra-elements');
+        await expect(page).toHaveScreenshot();
+    });
     test('Org bar open', async ({ page }) => {
         await getStory(page, 'uishell-c3navigation--org-side-bar-opened');
         await expect(page).toHaveScreenshot();

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

@@ -5,6 +5,7 @@ export declare function createAppProps(): C3NavigationAppProps;
 export declare function createAppBarProps(options?: {
     isOpen?: boolean;
     elements?: Array<C3NavigationElementProps>;
+    extraElements?: Array<C3NavigationElementProps>;
     useElementsFromConfig?: boolean;
 }): C3NavigationProps['appBar'];
 export declare function createNavBarBarProps({ orgName, elements, showLicenseTag, showProductionLicense, isCommercial, expiresAt, }?: {

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

@@ -95,6 +95,7 @@ export function createAppBarProps(options = {}) {
                     ],
                 },
             ]),
+        extraElements: options.extraElements,
         elementClicked: (element) => console.log(`event coming from the appBarProps: ${element} has been clicked`),
     };
 }

package/lib/esm/src/utils/versionCheck.utils.js

@@ -15,7 +15,27 @@ export var VersionCheckOperator;
     VersionCheckOperator[VersionCheckOperator["SameMinor"] = 5] = "SameMinor";
 })(VersionCheckOperator || (VersionCheckOperator = {}));
 export const checkVersion = (params) => {
-    if (!semver.valid(params.versionToCompareTo)) {
+    // quick exit: if the versionToCompareTo is
+    //   - `SNAPSHOT` there is not a lot we can compare here to, so we return false directly
+    //   - ends with `-SNAPSHOT` we ignore the `-SNAPSHOT` part for the comparison, guess a good matching semver compliant version and try to move on with the generated one in the code
+    if (params.versionToCompareTo === 'SNAPSHOT') {
+        return false;
+    }
+    let versionToCompareTo = params.versionToCompareTo;
+    if (versionToCompareTo.endsWith('-SNAPSHOT')) {
+        versionToCompareTo = versionToCompareTo.replace('-SNAPSHOT', '');
+        const parts = versionToCompareTo.split('.');
+        if (parts.length === 1) {
+            versionToCompareTo = `${parts[0]}.0.0`;
+        }
+        else if (parts.length === 2) {
+            versionToCompareTo = `${parts[0]}.${parts[1]}.0`;
+        }
+        else if (parts.length === 3) {
+            versionToCompareTo = `${parts[0]}.${parts[1]}.${parts[2]}`;
+        }
+    }
+    if (!semver.valid(versionToCompareTo)) {
         throw new Error('Invalid version to compare to');
     }
     let version = '';
@@ -44,11 +64,11 @@ export const checkVersion = (params) => {
         }
     }
     let parsedVersionToCompareTo = '';
-    if (semver.valid(params.versionToCompareTo ?? '')) {
-        parsedVersionToCompareTo = params.versionToCompareTo ?? '';
+    if (semver.valid(versionToCompareTo ?? '')) {
+        parsedVersionToCompareTo = versionToCompareTo ?? '';
     }
     else {
-        const versionSplit = params.versionToCompareTo?.split(':') ?? [];
+        const versionSplit = versionToCompareTo?.split(':') ?? [];
         if (versionSplit.length > 1) {
             parsedVersionToCompareTo = versionSplit[1];
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camunda/camunda-composite-components",
-  "version": "0.22.5",
+  "version": "0.22.7",
   "description": "Camunda Composite Components",
   "bugs": {
     "url": "https://github.com/camunda/camunda-cloud-management-apps/issues"
@@ -31,36 +31,36 @@
   "devDependencies": {
     "@auth0/auth0-spa-js": "2.18.0",
     "@carbon/react": "1.103.0",
-    "@chromatic-com/storybook": "5.0.2",
+    "@chromatic-com/storybook": "5.1.1",
     "@mdx-js/react": "3.1.1",
     "@playwright/test": "1.58.2",
-    "@storybook/addon-a11y": "10.3.1",
-    "@storybook/addon-docs": "10.3.1",
-    "@storybook/addon-links": "10.3.1",
-    "@storybook/addon-vitest": "10.3.1",
-    "@storybook/react": "10.3.1",
-    "@storybook/react-vite": "10.3.1",
-    "@vitest/browser": "4.1.0",
-    "@vitest/browser-playwright": "4.1.0",
-    "vitest": "4.1.0",
+    "@storybook/addon-a11y": "10.3.3",
+    "@storybook/addon-docs": "10.3.3",
+    "@storybook/addon-links": "10.3.3",
+    "@storybook/addon-vitest": "10.3.3",
+    "@storybook/react": "10.3.3",
+    "@storybook/react-vite": "10.3.3",
+    "@vitest/browser": "4.1.1",
+    "@vitest/browser-playwright": "4.1.1",
+    "vitest": "4.1.1",
     "conventional-changelog-conventionalcommits": "9.3.0",
     "eslint-import-resolver-typescript": "4.4.4",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "7.0.1",
-    "eslint-plugin-storybook": "10.3.1",
+    "eslint-plugin-storybook": "10.3.3",
     "event-source-polyfill": "1.0.31",
-    "mixpanel-browser": "2.76.0",
+    "mixpanel-browser": "2.77.0",
     "playwright": "1.58.2",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "react-is": "19.2.4",
     "rimraf": "6.1.3",
     "serve": "14.2.6",
-    "storybook": "10.3.1",
+    "storybook": "10.3.3",
     "styled-components": "6.3.12",
-    "typescript-eslint": "8.57.1",
+    "typescript-eslint": "8.57.2",
     "wait-on": "9.0.4",
-    "@camunda/ccma-shared-types": "0.0.3"
+    "@camunda/ccma-shared-types": "0.0.4"
   },
   "peerDependencies": {
     "@carbon/react": "1.x",