@camunda/camunda-composite-components 0.22.7 → 0.23.0

package/lib/esm/src/components/c3-navigation-v2/use-camunda-tools.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } 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';
+import { Help as HelpIcon, Information, Notification as NotificationIcon, UserAvatar, } from '@carbon/react/icons/index.esm.js';
+import { useContext, useMemo } from 'react';
+import { C3NotificationsUnreadIcon } from '../../assets/c3-icons.js';
+import { C3NotificationContext } from '../c3-navigation/c3-notification-provider/c3-notification-provider.js';
+import { C3InfoPanel } from './tools/c3-info-panel.js';
+import { C3NotificationsPanel } from './tools/c3-notifications-panel.js';
+import { C3UserPanel } from './tools/c3-user-panel.js';
+/**
+ * Single helper entry point for the standard Camunda tool set.
+ * Returns a ToolDescriptor[] ready to pass into C3NavigationV2's `tools` prop.
+ * Custom tools can be appended to the returned array.
+ *
+ * Must be called within a C3UserConfigurationProvider tree (SaaS).
+ */
+export const useCamundaTools = (options) => {
+    const { notifications: notifCtx } = useContext(C3NotificationContext);
+    const hasUnread = notifCtx?.some((n) => n.state === 'new');
+    return useMemo(() => {
+        const tools = [];
+        if (options.notifications !== undefined) {
+            const notifOptions = options.notifications;
+            const label = notifOptions.ariaLabel ?? 'Notifications';
+            tools.push({
+                key: 'notifications',
+                label,
+                renderButton: ({ onClick, isActive }) => (_jsx(HeaderGlobalAction, { "aria-label": label, onClick: onClick, isActive: isActive, tooltipAlignment: 'center', ...{ leaveDelayMs: 100 }, children: hasUnread ? (_jsx(C3NotificationsUnreadIcon, { size: 20 })) : (_jsx(NotificationIcon, { size: 20 })) })),
+                panel: (_jsx(C3NotificationsPanel, { onLinkClick: notifOptions.onLinkClick })),
+            });
+        }
+        if (options.info !== undefined) {
+            const { elements, title, ariaLabel } = options.info;
+            const label = ariaLabel ?? 'Info';
+            tools.push({
+                key: 'info',
+                label,
+                renderButton: ({ onClick, isActive }) => (_jsx(HeaderGlobalAction, { "aria-label": label, onClick: onClick, isActive: isActive, tooltipAlignment: 'center', ...{ leaveDelayMs: 100 }, children: _jsx(Information, { size: 20 }) })),
+                panel: (_jsx(C3InfoPanel, { elements: elements, title: title })),
+            });
+        }
+        if (options.help !== undefined) {
+            const { onClick, ariaLabel } = options.help;
+            const label = ariaLabel ?? 'Help';
+            tools.push({
+                key: 'help',
+                label,
+                renderButton: ({ isActive: _isActive }) => (_jsx(HeaderGlobalAction, { "aria-label": label, onClick: onClick, tooltipAlignment: 'center', ...{ leaveDelayMs: 100 }, children: _jsx(HelpIcon, { size: 20 }) })),
+                // no panel, help is a plain button
+            });
+        }
+        if (options.user !== undefined) {
+            const { ariaLabel, ...panelProps } = options.user;
+            const label = ariaLabel ?? 'Account';
+            tools.push({
+                key: 'user',
+                label,
+                renderButton: ({ onClick, isActive }) => (_jsx(HeaderGlobalAction, { "aria-label": label, onClick: onClick, isActive: isActive, tooltipAlignment: 'end', ...{ leaveDelayMs: 100 }, children: _jsx(UserAvatar, { size: 20 }) })),
+                panel: (_jsx(C3UserPanel, { ...panelProps })),
+            });
+        }
+        return tools;
+    }, [
+        hasUnread,
+        options.notifications,
+        options.info,
+        options.help,
+        options.user,
+    ]);
+};

package/lib/esm/src/components/c3-navigation-v2/use-cluster-webapp-breadcrumbs.d.ts

@@ -0,0 +1,33 @@
+import type { CamundaApp } from '../../utils/camunda.types';
+import type { BreadcrumbDescriptor } from './use-c3-navigation-v2';
+export interface UseClusterWebappBreadcrumbsOptions {
+    /** The app currently being viewed. */
+    currentApp: CamundaApp;
+    /**
+     * Optional resolver to convert an endpoint URL into linkProps.
+     * Defaults to `(url) => ({ href: url })`. Override to support
+     * client-side routing (e.g. returning `{ to: path }` for internal links).
+     */
+    resolveLinkProps?: (url: string, app: string) => {
+        href?: string;
+        to?: string;
+        [key: string]: unknown;
+    };
+}
+/**
+ * Builds the standard breadcrumb chain for a cluster-scoped Camunda webapp:
+ *
+ *   [Org] > [Cluster] > [App ▾]
+ *
+ * - **Org crumb**: shown when org data is available (SaaS). Links back to
+ *   web modeler at the org level.
+ * - **Cluster crumb**: shown when cluster data is available. Links back to
+ *   web modeler / console at the cluster level.
+ * - **App crumb**: always shown. Includes a dropdown to switch between
+ *   sibling apps on the same cluster (filtered to apps with endpoints).
+ *
+ * Crumbs are omitted when the underlying data is unavailable, so the same
+ * hook works for both SaaS (full chain) and Self-Managed (partial or single
+ * crumb) without any environment flag.
+ */
+export declare function useClusterWebappBreadcrumbs(options: UseClusterWebappBreadcrumbsOptions): BreadcrumbDescriptor[];

package/lib/esm/src/components/c3-navigation-v2/use-cluster-webapp-breadcrumbs.js

@@ -0,0 +1,126 @@
+/*
+ * 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 { Analytics, Application, Building, CloudApp, Diagram, Play, Settings, Task, } from '@carbon/react/icons/index.esm.js';
+import { useMemo } from 'react';
+import { useC3Profile } from '../c3-user-configuration/c3-profile-provider/c3-profile-provider.js';
+import { useC3UserConfiguration } from '../c3-user-configuration/c3-user-configuration-provider.js';
+const APP_ICONS = {
+    operate: Play,
+    tasklist: Task,
+    optimize: Analytics,
+    admin: Settings,
+    identity: Settings,
+    modeler: Diagram,
+    console: Application,
+};
+const APP_LABELS = {
+    operate: 'Operate',
+    tasklist: 'Tasklist',
+    optimize: 'Optimize',
+    admin: 'Admin',
+    identity: 'Admin',
+    modeler: 'Modeler',
+    console: 'Console',
+};
+/**
+ * Apps shown in the app-switcher dropdown. Order determines display order.
+ * `identity` is excluded: it was deprecated in favor of `admin` (8.9+).
+ * See `isAdminApp()` and `getEndpointForApp()` in `camunda.ts` for the
+ * aliasing/fallback logic that handles older clusters still using `identity`.
+ */
+const SWITCHABLE_APPS = [
+    'operate',
+    'tasklist',
+    'optimize',
+    'admin',
+];
+/**
+ * Builds the standard breadcrumb chain for a cluster-scoped Camunda webapp:
+ *
+ *   [Org] > [Cluster] > [App ▾]
+ *
+ * - **Org crumb**: shown when org data is available (SaaS). Links back to
+ *   web modeler at the org level.
+ * - **Cluster crumb**: shown when cluster data is available. Links back to
+ *   web modeler / console at the cluster level.
+ * - **App crumb**: always shown. Includes a dropdown to switch between
+ *   sibling apps on the same cluster (filtered to apps with endpoints).
+ *
+ * Crumbs are omitted when the underlying data is unavailable, so the same
+ * hook works for both SaaS (full chain) and Self-Managed (partial or single
+ * crumb) without any environment flag.
+ */
+export function useClusterWebappBreadcrumbs(options) {
+    const { currentApp, resolveLinkProps = (url) => ({ href: url }) } = options;
+    const { clusters, activeOrg } = useC3Profile();
+    const config = useC3UserConfiguration();
+    const currentClusterUuid = config.currentClusterUuid;
+    const currentCluster = useMemo(() => clusters?.find((c) => c.uuid === currentClusterUuid) ?? null, [clusters, currentClusterUuid]);
+    return useMemo(() => {
+        const crumbs = [];
+        // ── Org crumb ──────────────────────────────────────────────────────────
+        if (activeOrg) {
+            const modelerUrl = currentCluster?.endpoints?.modeler;
+            crumbs.push({
+                key: 'org',
+                label: activeOrg.name,
+                icon: Building,
+                ...(modelerUrl
+                    ? { linkProps: resolveLinkProps(modelerUrl, 'org') }
+                    : {}),
+            });
+        }
+        // ── Cluster crumb ──────────────────────────────────────────────────────
+        if (currentCluster) {
+            const modelerUrl = currentCluster.endpoints?.modeler;
+            const clusterUrl = modelerUrl
+                ? `${modelerUrl}?fromCluster=${currentCluster.uuid}`
+                : undefined;
+            crumbs.push({
+                key: 'cluster',
+                label: currentCluster.name,
+                icon: CloudApp,
+                ...(clusterUrl
+                    ? { linkProps: resolveLinkProps(clusterUrl, 'cluster') }
+                    : {}),
+            });
+        }
+        // ── App crumb ──────────────────────────────────────────────────────────
+        const appLabel = APP_LABELS[currentApp] ?? currentApp;
+        const appIcon = APP_ICONS[currentApp] ?? Application;
+        const siblingApps = SWITCHABLE_APPS.filter((app) => app !== currentApp && currentCluster?.endpoints?.[app]);
+        const dropdownItems = siblingApps.length > 0
+            ? [
+                {
+                    key: currentApp,
+                    label: appLabel,
+                    icon: APP_ICONS[currentApp] ?? Application,
+                    isSelected: true,
+                },
+                ...siblingApps.map((app) => ({
+                    key: app,
+                    label: APP_LABELS[app] ?? app,
+                    icon: APP_ICONS[app] ?? Application,
+                    isSelected: false,
+                    linkProps: resolveLinkProps(currentCluster?.endpoints[app] ?? '', app),
+                })),
+            ]
+            : undefined;
+        crumbs.push({
+            key: 'app',
+            label: appLabel,
+            icon: appIcon,
+            ...(dropdownItems
+                ? {
+                    dropdownTitle: 'Switch application',
+                    dropdownAriaLabel: 'Switch application',
+                    dropdownItems,
+                }
+                : {}),
+        });
+        return crumbs;
+    }, [activeOrg, currentCluster, currentApp, resolveLinkProps]);
+}

package/lib/esm/src/index.d.ts

@@ -8,10 +8,15 @@ export { C3DataTable } from './components/c3-data-table/c3-data-table';
 export { C3DataTableActionProps, C3DataTableHeaderContentType, C3DataTableHeadersProps, C3DataTableProps, C3DataTableToolbarButtonItemProps, C3DataTableToolbarMenuButtonItemProps, C3DataTableToolbarMultiItemButtonProps, C3DataTableToolbarMultiSelectItemProps, C3DataTableToolbarProps, C3DataTableToolbarSearchItemProps, Filter, RowBaseProps, } from './components/c3-data-table/c3-data-table.types';
 export { C3EmptyState } from './components/c3-empty-state/c3-empty-state';
 export { Button as C3EmptyStateButton, C3EmptyStateProps, MenuButton as C3EmptyStateMenuButton, } from './components/c3-empty-state/c3-empty-state.types';
+export type { C3HelpCenterProps } from './components/c3-help-center/c3-help-center';
+export { C3HelpCenter } from './components/c3-help-center/c3-help-center';
 export { useC3HelpCenter } from './components/c3-help-center/c3-help-center-provider';
+export { C3LicenseTag, type C3LicenseTagProps, } from './components/c3-license-tag';
 export { default as C3Navigation } from './components/c3-navigation';
 export { C3NavigationAppProps, C3NavigationElementProps, C3NavigationNavBarElement, C3NavigationNavBarProps, C3NavigationNavBarSubElement, C3NavigationProps, } from './components/c3-navigation/c3-navigation.types';
 export { C3NavigationSideBarBaseProps } from './components/c3-navigation/c3-navigation-sidebar/c3-navigation-sidebar.types';
+export type { AppProps as C3NavV2AppProps, BreadcrumbDescriptor, BreadcrumbDropdownItem, BreadcrumbSegment, C3NavigationV2Props, C3NotificationsPanelProps, C3UserPanelProps, GlobalActionButton, GroupDescriptor, GroupItemDescriptor, HelpToolOptions, ItemDescriptor, LinkComponent, LinkProps, NotificationsToolOptions, SectionDescriptor, SidebarGroup, SidebarGroupItem, SidebarItem, SidebarNode, SidebarNodeDescriptor, SidebarProps, SidebarSection, ToolDescriptor, UseC3NavigationV2Options, UseC3NavigationV2Return, UseCamundaToolsOptions, UserToolOptions, } from './components/c3-navigation-v2';
+export { C3BreadcrumbBar as preview_C3BreadcrumbBar, C3NavigationV2 as preview_C3NavigationV2, C3NotificationsPanel as preview_C3NotificationsPanel, C3Sidebar as preview_C3Sidebar, C3ToolsArea as preview_C3ToolsArea, C3UserPanel as preview_C3UserPanel, useC3NavigationV2 as preview_useC3NavigationV2, useCamundaTools as preview_useCamundaTools, useClusterWebappBreadcrumbs as preview_useClusterWebappBreadcrumbs, } from './components/c3-navigation-v2';
 export { C3BreadcrumbProps } from './components/c3-page/c3-breadcrumb/c3-breadcrumb.types';
 export { C3Page } from './components/c3-page/c3-page';
 export { C3PageProps } from './components/c3-page/c3-page.types';

package/lib/esm/src/index.js

@@ -9,8 +9,11 @@ export { C3ClusterTag, C3ClusterTagWithClusterName as C3ClusterTagWithName, } fr
 export { StageClusterLabels, } from './components/c3-cluster-tag/c3-cluster-tag.types.js';
 export { C3DataTable } from './components/c3-data-table/c3-data-table.js';
 export { C3EmptyState } from './components/c3-empty-state/c3-empty-state.js';
+export { C3HelpCenter } from './components/c3-help-center/c3-help-center.js';
 export { useC3HelpCenter } from './components/c3-help-center/c3-help-center-provider.js';
+export { C3LicenseTag, } from './components/c3-license-tag/index.js';
 export { default as C3Navigation } from './components/c3-navigation/index.js';
+export { C3BreadcrumbBar as preview_C3BreadcrumbBar, C3NavigationV2 as preview_C3NavigationV2, C3NotificationsPanel as preview_C3NotificationsPanel, C3Sidebar as preview_C3Sidebar, C3ToolsArea as preview_C3ToolsArea, C3UserPanel as preview_C3UserPanel, useC3NavigationV2 as preview_useC3NavigationV2, useCamundaTools as preview_useCamundaTools, useClusterWebappBreadcrumbs as preview_useClusterWebappBreadcrumbs, } from './components/c3-navigation-v2/index.js';
 export { C3Page } from './components/c3-page/c3-page.js';
 export { C3ResponsiveStack } from './components/c3-responsive-stack/c3-responsive-stack.js';
 export { useC3Profile } from './components/c3-user-configuration/c3-profile-provider/c3-profile-provider.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camunda/camunda-composite-components",
-  "version": "0.22.7",
+  "version": "0.23.0",
   "description": "Camunda Composite Components",
   "bugs": {
     "url": "https://github.com/camunda/camunda-cloud-management-apps/issues"
@@ -29,37 +29,37 @@
     "semver": "7.7.4"
   },
   "devDependencies": {
-    "@auth0/auth0-spa-js": "2.18.0",
+    "@auth0/auth0-spa-js": "2.19.0",
     "@carbon/react": "1.103.0",
     "@chromatic-com/storybook": "5.1.1",
     "@mdx-js/react": "3.1.1",
-    "@playwright/test": "1.58.2",
-    "@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",
+    "@playwright/test": "1.59.1",
+    "@storybook/addon-a11y": "10.3.5",
+    "@storybook/addon-docs": "10.3.5",
+    "@storybook/addon-links": "10.3.5",
+    "@storybook/addon-vitest": "10.3.5",
+    "@storybook/react": "10.3.5",
+    "@storybook/react-vite": "10.3.5",
+    "@vitest/browser": "4.1.4",
+    "@vitest/browser-playwright": "4.1.4",
+    "vitest": "4.1.4",
+    "conventional-changelog-conventionalcommits": "9.3.1",
     "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.3",
+    "eslint-plugin-storybook": "10.3.5",
     "event-source-polyfill": "1.0.31",
-    "mixpanel-browser": "2.77.0",
-    "playwright": "1.58.2",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "react-is": "19.2.4",
+    "mixpanel-browser": "2.78.0",
+    "playwright": "1.59.1",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "react-is": "19.2.5",
     "rimraf": "6.1.3",
     "serve": "14.2.6",
-    "storybook": "10.3.3",
-    "styled-components": "6.3.12",
-    "typescript-eslint": "8.57.2",
-    "wait-on": "9.0.4",
+    "storybook": "10.3.5",
+    "styled-components": "6.4.0",
+    "typescript-eslint": "8.58.1",
+    "wait-on": "9.0.5",
     "@camunda/ccma-shared-types": "0.0.4"
   },
   "peerDependencies": {