@camunda/camunda-composite-components 0.25.2 → 0.25.3

package/lib/esm/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@camunda/camunda-composite-components",
-    "version": "0.25.2",
+    "version": "0.25.3",
     "description": "Camunda Composite Components",
     "bugs": {
         "url": "https://github.com/camunda/camunda-cloud-management-apps/issues"
@@ -70,7 +70,7 @@
         "@vitest/browser": "4.1.9",
         "@vitest/browser-playwright": "4.1.9",
         "vitest": "4.1.9",
-        "conventional-changelog-conventionalcommits": "9.3.1",
+        "conventional-changelog-conventionalcommits": "10.2.0",
         "eslint-import-resolver-typescript": "4.4.5",
         "eslint-plugin-react": "7.37.5",
         "eslint-plugin-react-hooks": "7.1.1",

package/lib/esm/src/components/c3-data-table/c3-data-table.js

@@ -327,7 +327,8 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
                                     multiItemElement.multiOnClick(inputData.filter((row) => selectedItems.includes(row.id)));
                                 }, renderIcon: multiItemElement.icon, disabled: (multiItemElement.disabled &&
                                     multiItemElement.disabled(inputData.filter((row) => selectedItems.includes(row.id)))) ||
-                                    selectedItems.length === 0, kind: multiItemElement.kind, children: multiItemElement.label }, multiItemElement.id));
+                                    (selectedItems.length === 0 &&
+                                        !multiItemElement.allowWithoutSelection), kind: multiItemElement.kind, children: multiItemElement.label }, multiItemElement.id));
                         }
                         else if (toolbarElement.type === 'multiSelect') {
                             const multiSelectElement = toolbarElement;

package/lib/esm/src/components/c3-data-table/c3-data-table.types.d.ts

@@ -54,6 +54,15 @@ export interface C3DataTableToolbarMultiItemButtonProps<T extends RowBaseProps>
     multiOnClick: (selectedItems: T[]) => void;
     disabled?: (selectedItems: T[]) => boolean;
     kind?: any;
+    /**
+     * By default a `multiItemButton` is disabled whenever no rows are
+     * selected. Set this to `true` to keep the button enabled even with an
+     * empty selection (e.g. when the action can also be triggered without
+     * pre-selecting rows, such as opening a dialog that lets the user type
+     * or paste values in directly). The `disabled` callback above still
+     * applies on top of this.
+     */
+    allowWithoutSelection?: boolean;
 }
 export interface C3DataTableToolbarMenuButtonItemProps extends C3DataTableCommonToolbarProps {
     type: 'menuButton';

package/lib/esm/src/components/c3-navigation-v2/c3-breadcrumb-bar.js

@@ -9,6 +9,7 @@ import { Checkmark, ChevronDown, OverflowMenuVertical, } from '@carbon/react/ico
 import { useCallback, useEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
 import styled from 'styled-components';
+import { resolveLinkAs } from './resolve-link-as.js';
 // `display: contents` so nested flex doesn't trap min-content; label
 // shrinkage propagates to the breadcrumb row directly.
 const SegmentWrapper = styled.div `
@@ -172,11 +173,7 @@ const Separator = styled.span `
 `;
 const DropdownEntry = ({ item, onSelect, linkComponent, }) => {
     const Icon = item.icon;
-    return (_jsxs(DropdownItem, { as: item.linkProps?.href !== undefined
-            ? 'a'
-            : item.linkProps
-                ? linkComponent
-                : undefined, ...(item.linkProps ?? {}), "$isSelected": !!item.isSelected, onClick: () => onSelect(item), role: 'option', tabIndex: -1, "aria-selected": !!item.isSelected, children: [Icon && (_jsx(Icon, { size: 16, style: { color: 'var(--cds-icon-secondary)', flexShrink: 0 } })), _jsx(DropdownItemLabel, { children: item.label }), item.trailingElement, item.isSelected && (_jsx(Checkmark, { size: 16, style: { color: 'var(--cds-icon-primary)', flexShrink: 0 } }))] }));
+    return (_jsxs(DropdownItem, { as: resolveLinkAs(item.linkProps, linkComponent), ...(item.linkProps ?? {}), "$isSelected": !!item.isSelected, onClick: () => onSelect(item), role: 'option', tabIndex: -1, "aria-selected": !!item.isSelected, children: [Icon && (_jsx(Icon, { size: 16, style: { color: 'var(--cds-icon-secondary)', flexShrink: 0 } })), _jsx(DropdownItemLabel, { children: item.label }), item.trailingElement, item.isSelected && (_jsx(Checkmark, { size: 16, style: { color: 'var(--cds-icon-primary)', flexShrink: 0 } }))] }));
 };
 const DropdownTitle = styled.div `
   padding: var(--cds-spacing-04) var(--cds-spacing-05) var(--cds-spacing-03);
@@ -344,11 +341,7 @@ const BreadcrumbSegmentComponent = ({ segment, isLast, linkComponent, }) => {
         close();
     }, [close]);
     const handleDropdownKeyDown = usePanelKeyboard(dropdownPanelRef, close, chevronRef, isOpen, '[role="option"]');
-    return (_jsxs(_Fragment, { children: [_jsxs(SegmentWrapper, { ref: wrapperRef, children: [_jsxs(SegmentButton, { ref: segmentButtonRef, as: segment.linkProps?.href !== undefined
-                            ? 'a'
-                            : segment.linkProps
-                                ? linkComponent
-                                : undefined, ...(segment.linkProps ?? {}), "$isInteractive": !!(segment.onClick || segment.linkProps), "$isLast": isLast, onClick: segment.onClick, "aria-label": segment.label, title: segment.label, children: [Icon && _jsx(Icon, { size: 16, style: { flexShrink: 0 } }), _jsx(SegmentLabel, { children: segment.label }), segment.trailingElement] }), segment.menuElement, segment.actions && segment.actions.length > 0 && (_jsx(ActionsMenu, { actions: segment.actions, ariaLabel: `${segment.label} actions` })), hasDropdown && (_jsx(ChevronButton, { ref: chevronRef, "$isOpen": isOpen, onClick: toggle, onKeyDown: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(SegmentWrapper, { ref: wrapperRef, children: [_jsxs(SegmentButton, { ref: segmentButtonRef, as: resolveLinkAs(segment.linkProps, linkComponent), ...(segment.linkProps ?? {}), "$isInteractive": !!(segment.onClick || segment.linkProps), "$isLast": isLast, onClick: segment.onClick, "aria-label": segment.label, title: segment.label, children: [Icon && _jsx(Icon, { size: 16, style: { flexShrink: 0 } }), _jsx(SegmentLabel, { children: segment.label }), segment.trailingElement] }), segment.menuElement, segment.actions && segment.actions.length > 0 && (_jsx(ActionsMenu, { actions: segment.actions, ariaLabel: `${segment.label} actions` })), hasDropdown && (_jsx(ChevronButton, { ref: chevronRef, "$isOpen": isOpen, onClick: toggle, onKeyDown: (e) => {
                             if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
                                 if (!isOpen) {
                                     e.preventDefault();

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

@@ -15,7 +15,7 @@ const StyledHeader = styled(Header) `
   background-color: var(--cds-layer-01) !important;
   border-bottom: 1px solid var(--cds-border-subtle) !important;
   box-shadow: none !important;
-  z-index: 8001 !important;
+  z-index: calc(var(--c3-nav-z-index, 8000) + 1) !important;
 
   // Carbon defaults the tools area to flex: 1, which splits the row
   // 50/50 with breadcrumbs. Make it intrinsic and pin it to the right

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

@@ -23,11 +23,15 @@ export interface LinkProps {
     href?: string;
     [key: string]: unknown;
 }
-type IconComponent = React.ComponentType<{
+export type IconProps = {
     size?: number;
     style?: React.CSSProperties;
+};
+export type IconComponent = React.ComponentType<IconProps> | React.ForwardRefExoticComponent<{
+    size?: number | string;
+    style?: React.CSSProperties;
 }>;
-export type LinkComponent = React.ComponentType<LinkProps & React.RefAttributes<HTMLAnchorElement>> | string;
+export type LinkComponent = React.ElementType;
 export interface BreadcrumbDropdownItem {
     key: string;
     label: string;
@@ -82,9 +86,7 @@ export interface GlobalActionButton {
      * Required when `element` is omitted. Ignored when `element` is supplied
      * (the custom element renders instead of the default icon button).
      */
-    icon?: React.ComponentType<{
-        size?: number;
-    }>;
+    icon?: IconComponent;
     onClick?: () => void;
     element?: ReactNode;
 }
@@ -199,4 +201,3 @@ export interface C3NavigationV2Props {
     /** Called when the active tool panel changes (including close via outside click). */
     onActiveToolChange?: (key: string | null) => void;
 }
-export {};

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

@@ -8,6 +8,7 @@ import { Popover, PopoverContent } from '@carbon/react';
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, } from '@carbon/react/icons/index.esm.js';
 import { createContext, useContext, useEffect, useRef, useState, } from 'react';
 import styled, { css } from 'styled-components';
+import { resolveLinkAs } from './resolve-link-as.js';
 const SidebarLabelsContext = createContext({
     groupToggleAria: ({ label, isExpanded }) => isExpanded ? `Collapse ${label}` : `Expand ${label}`,
 });
@@ -23,7 +24,7 @@ const SidebarNav = styled.nav `
   display: flex;
   flex-direction: column;
   transition: width 0.15s ease-out;
-  z-index: 8000;
+  z-index: var(--c3-nav-z-index, 8000);
 `;
 const ScrollArea = styled.div `
   flex: 1;
@@ -263,13 +264,6 @@ const CollapseButton = styled.button `
     outline-offset: -2px;
   }
 `;
-const resolveLinkAs = (linkProps, linkComponent) => {
-    if (!linkProps)
-        return undefined;
-    if ('href' in linkProps)
-        return 'a';
-    return linkComponent;
-};
 const pruneNode = (node) => {
     if (node.type === 'item') {
         if (!node.onClick && !node.linkProps)

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

@@ -17,7 +17,7 @@ const ToolsPanel = styled.div `
   background: var(--cds-layer-01);
   border-left: 1px solid var(--cds-border-subtle);
   overflow-y: auto;
-  z-index: 8000;
+  z-index: var(--c3-nav-z-index, 8000);
   display: flex;
   flex-direction: column;
 

package/lib/esm/src/components/c3-navigation-v2/resolve-link-as.d.ts

@@ -0,0 +1,16 @@
+import type { LinkComponent } from './c3-navigation-v2.types';
+/**
+ * Decide which element a clickable nav surface renders as based on the
+ * caller's `linkProps`.
+ *
+ * Preference, in order:
+ *  1. If `to` is set and the consumer has wired a `linkComponent`, render
+ *     through the consumer wrapper so client-side routing stays in effect.
+ *  2. If `href` is set, render a plain `<a>` so cross-origin / no-router
+ *     callers reload as expected and a router-aware Link does not try to
+ *     SPA-route to another domain.
+ *  3. Otherwise (a `to`-only call with no `linkComponent`, or a bare
+ *     onClick), defer to the consumer's `linkComponent` or fall back to
+ *     the underlying element default.
+ */
+export declare const resolveLinkAs: (linkProps: Record<string, unknown> | undefined, linkComponent?: LinkComponent) => LinkComponent | undefined;

package/lib/esm/src/components/c3-navigation-v2/resolve-link-as.js

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+/**
+ * Decide which element a clickable nav surface renders as based on the
+ * caller's `linkProps`.
+ *
+ * Preference, in order:
+ *  1. If `to` is set and the consumer has wired a `linkComponent`, render
+ *     through the consumer wrapper so client-side routing stays in effect.
+ *  2. If `href` is set, render a plain `<a>` so cross-origin / no-router
+ *     callers reload as expected and a router-aware Link does not try to
+ *     SPA-route to another domain.
+ *  3. Otherwise (a `to`-only call with no `linkComponent`, or a bare
+ *     onClick), defer to the consumer's `linkComponent` or fall back to
+ *     the underlying element default.
+ */
+export const resolveLinkAs = (linkProps, linkComponent) => {
+    if (!linkProps)
+        return undefined;
+    if (linkProps.to !== undefined && linkComponent)
+        return linkComponent;
+    if (linkProps.href !== undefined)
+        return 'a';
+    return linkComponent;
+};

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

@@ -1,13 +1,10 @@
-import type { BreadcrumbAction, C3NavigationV2Props, GlobalActionButton, LinkComponent, LinkProps, SidebarLabels, ToolDescriptor } from './c3-navigation-v2.types';
+import type { BreadcrumbAction, C3NavigationV2Props, GlobalActionButton, IconComponent, LinkComponent, LinkProps, SidebarLabels, ToolDescriptor } from './c3-navigation-v2.types';
 type ActiveMatcher = boolean | string | ((activeItemKey: string) => boolean);
 export interface ItemDescriptor {
     type: 'item';
     key: string;
     label: string;
-    icon: React.ComponentType<{
-        size?: number;
-        style?: React.CSSProperties;
-    }>;
+    icon: IconComponent;
     linkProps?: LinkProps;
     onClick?: () => void;
     isActive?: ActiveMatcher;
@@ -17,10 +14,7 @@ export interface GroupItemDescriptor {
     type: 'group-item';
     key: string;
     label: string;
-    icon: React.ComponentType<{
-        size?: number;
-        style?: React.CSSProperties;
-    }>;
+    icon: IconComponent;
     linkProps?: LinkProps;
     onClick?: () => void;
     trailingElement?: React.ReactNode;
@@ -32,10 +26,7 @@ export interface GroupDescriptor {
     type: 'group';
     key: string;
     label: string;
-    icon: React.ComponentType<{
-        size?: number;
-        style?: React.CSSProperties;
-    }>;
+    icon: IconComponent;
     trailingElement?: React.ReactNode;
     defaultExpanded?: boolean;
     children: SidebarNodeDescriptor[];
@@ -51,10 +42,7 @@ export type SidebarNodeDescriptor = ItemDescriptor | GroupItemDescriptor | Group
 export interface BreadcrumbDropdownItemDescriptor {
     key: string;
     label: string;
-    icon?: React.ComponentType<{
-        size?: number;
-        style?: React.CSSProperties;
-    }>;
+    icon?: IconComponent;
     isSelected?: ActiveMatcher;
     onClick?: () => void;
     linkProps?: LinkProps;
@@ -63,10 +51,7 @@ export interface BreadcrumbDropdownItemDescriptor {
 export interface BreadcrumbDescriptor {
     key: string;
     label: string | ((activeItemKey: string) => string);
-    icon?: React.ComponentType<{
-        size?: number;
-        style?: React.CSSProperties;
-    }>;
+    icon?: IconComponent;
     onClick?: () => void;
     linkProps?: LinkProps;
     trailingElement?: React.ReactNode;
@@ -84,8 +69,12 @@ export interface UseC3NavigationV2Options {
     sidebarAriaLabel?: string;
     /** Forwarded to `C3Sidebar` `labels`. */
     sidebarLabels?: SidebarLabels;
-    /** Used to resolve `isActive` on sidebar items and `isSelected` on breadcrumb dropdown items. */
-    activeItemKey: string;
+    /**
+     * Resolves `isActive` on sidebar items and `isSelected` on breadcrumb
+     * dropdown items by key-match. Optional: items that set their own `isActive`
+     * (boolean/function) don't need it. Defaults to `''`.
+     */
+    activeItemKey?: string;
     sidebarChildren?: SidebarNodeDescriptor[];
     breadcrumbs?: BreadcrumbDescriptor[];
     tools?: ToolDescriptor[];

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

@@ -30,7 +30,7 @@ function collectDefaultExpanded(nodes, out) {
  * descriptors (isActive, label functions) into concrete props.
  */
 export function useC3NavigationV2(options) {
-    const { app, skipToContentTargetId, skipToContentLabel, headerAriaLabel, sidebarAriaLabel = 'Main navigation', sidebarLabels, activeItemKey, sidebarChildren = [], breadcrumbs = [], tools, globalActions, sidebarExpandedWidth, sidebarCollapsedWidth, defaultSidebarExpanded = true, onSidebarToggle, linkComponent, headerTrailingContent, } = options;
+    const { app, skipToContentTargetId, skipToContentLabel, headerAriaLabel, sidebarAriaLabel = 'Main navigation', sidebarLabels, activeItemKey = '', sidebarChildren = [], breadcrumbs = [], tools, globalActions, sidebarExpandedWidth, sidebarCollapsedWidth, defaultSidebarExpanded = true, onSidebarToggle, linkComponent, headerTrailingContent, } = options;
     const [isSidebarExpanded, setIsSidebarExpanded] = useState(defaultSidebarExpanded);
     const setSidebarExpanded = useCallback((expanded) => {
         setIsSidebarExpanded(expanded);

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

@@ -217,6 +217,7 @@ export function useClusterWebappBreadcrumbs(options) {
             key: 'app',
             label: appLabel,
             icon: appIcon,
+            linkProps: { to: '/', href: '/' },
             ...(dropdownItems
                 ? {
                     dropdownTitle: 'Switch application',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camunda/camunda-composite-components",
-  "version": "0.25.2",
+  "version": "0.25.3",
   "description": "Camunda Composite Components",
   "bugs": {
     "url": "https://github.com/camunda/camunda-cloud-management-apps/issues"
@@ -43,7 +43,7 @@
     "@vitest/browser": "4.1.9",
     "@vitest/browser-playwright": "4.1.9",
     "vitest": "4.1.9",
-    "conventional-changelog-conventionalcommits": "9.3.1",
+    "conventional-changelog-conventionalcommits": "10.2.0",
     "eslint-import-resolver-typescript": "4.4.5",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "7.1.1",
@@ -60,7 +60,7 @@
     "styled-components": "6.4.2",
     "typescript-eslint": "8.61.1",
     "wait-on": "9.0.10",
-    "@camunda/ccma-shared-types": "0.2.0"
+    "@camunda/ccma-shared-types": "0.4.0"
   },
   "peerDependencies": {
     "@carbon/react": "1.x",