@camunda/camunda-composite-components 0.0.33-rc1 → 0.0.33

package/lib/esm/components/c3-empty-state/c3-empty-state.js

@@ -13,4 +13,5 @@ export const C3EmptyState = ({ icon, heading, description, button, link, }) => (
                 React.createElement("p", { style: { maxWidth: "400px" } }, description),
                 React.createElement(Stack, { gap: 5 },
                     button && (React.createElement(Button, { id: button.id, size: "md", onClick: button.onClick, renderIcon: button.icon, disabled: button.disabled }, button.label)),
-                    link && (React.createElement(Link, { target: "_blank", href: link.href, onClick: link.onClick }, link.label))))))));
+                    link && (React.createElement("div", null,
+                        React.createElement(Link, { target: "_blank", href: link.href, onClick: link.onClick }, link.label)))))))));

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { C3NavigationProps } from "./c3-navigation.types";
+export declare const C3NavigationAppBar: React.FC<C3NavigationProps>;

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

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import { Close } from "@carbon/react/icons";
+import { useOnClickOutside } from "./helpers";
+import { HeaderGlobalAction, HeaderMenuItem, HeaderSideNavItems, SideNav, SideNavItems, SideNavLink, SideNavMenu, SideNavMenuItem, } from "@carbon/react";
+import { C3AppMenuIcon } from "../../icons/c3-icons";
+const C3NavigationExternalLink = ({ label }) => React.createElement(React.Fragment, null, label);
+export const C3NavigationAppBar = ({ appBar, forwardRef, navbar, }) => {
+    const [appBarOpen, setAppBarOpen] = useState(appBar.isOpen);
+    const [panelRef, iconRef] = useOnClickOutside(() => setAppBarOpen(false));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HeaderGlobalAction, { ref: iconRef, "aria-label": "App Switcher", isActive: appBarOpen, onClick: () => {
+                setAppBarOpen(!appBarOpen);
+            }, tooltipAlignment: "start" }, appBarOpen ? React.createElement(Close, { size: 20 }) : React.createElement(C3AppMenuIcon, { size: 20 })),
+        React.createElement(SideNav, { ref: panelRef, "aria-label": appBar.ariaLabel || "Side Navigation", expanded: appBarOpen, isPersistent: false, style: {
+                display: "grid",
+                gridAutoFlow: "row",
+                gridAutoRows: "max-content 1fr",
+                borderRight: appBarOpen
+                    ? "1px solid var(--cds-border-subtle)"
+                    : undefined,
+                overflowY: "auto",
+            } },
+            React.createElement(SideNavItems, null,
+                navbar.elements.length > 0 && (React.createElement(HeaderSideNavItems, { hasDivider: true }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, element: forwardRef, isCurrentPage: element.isCurrentPage, ...element.routeProps, onClick: () => {
+                        if (appBar.closeOnClick !== false) {
+                            setAppBarOpen(false);
+                        }
+                    } }, element.label))))),
+                appBar.elements &&
+                    appBar.elements.map((element) => {
+                        if (element.subElements && element.subElements.length > 0) {
+                            return (React.createElement(SideNavMenu, { large: true, title: element.label, key: element.key }, element.subElements.map((subElement) => (React.createElement(SideNavMenuItem, { key: subElement.key, href: subElement.href, target: subElement.href ? subElement.target : undefined, onClick: () => {
+                                    if (subElement.onClick) {
+                                        subElement.onClick();
+                                    }
+                                    if (appBar.closeOnClick !== false) {
+                                        setAppBarOpen(false);
+                                    }
+                                    if (appBar.elementClicked) {
+                                        appBar.elementClicked(subElement.key);
+                                    }
+                                } },
+                                React.createElement(C3NavigationExternalLink, { label: subElement.label }))))));
+                        }
+                        else {
+                            return element.routeProps ? (React.createElement(SideNavLink, { element: forwardRef, key: element.key, large: true, isActive: element.active, ...element.routeProps, onClick: () => {
+                                    if (element.onClick) {
+                                        element.onClick();
+                                    }
+                                    if (appBar.closeOnClick !== false) {
+                                        setAppBarOpen(false);
+                                    }
+                                    if (appBar.elementClicked) {
+                                        appBar.elementClicked(element.key);
+                                    }
+                                } }, element.label)) : (React.createElement(SideNavLink, { key: element.key, large: true, onClick: () => {
+                                    if (element.onClick) {
+                                        element.onClick();
+                                    }
+                                    if (appBar.closeOnClick !== false) {
+                                        setAppBarOpen(false);
+                                    }
+                                    if (appBar.elementClicked) {
+                                        appBar.elementClicked(element.key);
+                                    }
+                                }, href: element.href, target: element.href ? element.target : undefined }, element.label));
+                        }
+                    })))));
+};

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

@@ -1,16 +1,33 @@
 import { Button, SwitcherDivider } from "@carbon/react";
-import React from "react";
-const C3NavigationSidebarElement = (props) => (React.createElement(React.Fragment, null,
-    props.element.preceedingDivider && React.createElement(SwitcherDivider, null),
-    React.createElement(Button, { style: props.index === 0 &&
-            (!("elements" in props.sideBar) || !props.sideBar.elements)
-            ? { marginTop: "1.5rem", whiteSpace: "nowrap" }
-            : { whiteSpace: "nowrap" }, size: "sm", kind: props.element.kind ?? "ghost", className: "cds--switcher__item", onClick: () => {
-            if (props.element.onClick) {
-                props.element.onClick();
-            }
-            if (props.sideBar.closeOnClick !== false) {
-                props.setSideBarOpen(false);
-            }
-        }, tabIndex: props.itemTabIndex, renderIcon: props.element.renderIcon }, props.element.label)));
+import React, { useEffect, useRef, useState } from "react";
+const C3NavigationSidebarElement = (props) => {
+    const sideBarElementRef = useRef(null);
+    const [isOverflown, setIsOverflown] = useState(false);
+    useEffect(() => {
+        const element = sideBarElementRef.current;
+        setIsOverflown(element ? element.offsetWidth < element.scrollWidth : false);
+    }, [JSON.stringify(props.element)]);
+    return (React.createElement(React.Fragment, null,
+        props.element.preceedingDivider && React.createElement(SwitcherDivider, null),
+        React.createElement(Button, { style: {
+                width: "16rem",
+                ...(props.index === 0 &&
+                    (!("elements" in props.sideBar) || !props.sideBar.elements)
+                    ? { marginTop: "1.5rem" }
+                    : {}),
+            }, size: "sm", kind: props.element.kind ?? "ghost", className: "cds--switcher__item", onClick: () => {
+                if (props.element.onClick) {
+                    props.element.onClick();
+                }
+                if (props.sideBar.closeOnClick !== false) {
+                    props.setSideBarOpen(false);
+                }
+            }, tabIndex: props.itemTabIndex, renderIcon: props.element.renderIcon },
+            React.createElement("span", { ref: (el) => (sideBarElementRef.current = el), title: isOverflown ? props.element.label : "", style: {
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    width: "100%",
+                } }, props.element.label))));
+};
 export default C3NavigationSidebarElement;

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

@@ -1,82 +1,30 @@
-import { Header, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderSideNavItems, SideNav, SideNavItems, SideNavLink, SideNavMenu, SideNavMenuItem, SkipToContent, Tag, Toggletip, ToggletipButton, ToggletipContent, } from "@carbon/react";
-import { Close } from "@carbon/react/icons";
-import React, { useState } from "react";
-import { C3AppMenuIcon } from "../../icons/c3-icons";
+import { Header, HeaderContainer, HeaderGlobalBar, HeaderMenuItem, HeaderName, HeaderNavigation, SkipToContent, Tag, Toggletip, ToggletipButton, ToggletipContent, } from "@carbon/react";
+import React from "react";
 import C3InfoSidebar from "./c3-navigation-sidebar/c3-info-sidebar";
 import { C3NotificationSidebar } from "./c3-navigation-sidebar/c3-notification-sidebar";
 import C3OrgSidebar from "./c3-navigation-sidebar/c3-org-sidebar";
 import C3UserSidebar from "./c3-navigation-sidebar/c3-user-sidebar";
-import { useInverseThemeClassName, useMediaQuery, useOnClickOutside, } from "./helpers";
+import { useMediaQuery } from "./helpers";
+import { C3NavigationAppBar } from "./c3-navigation-appbar";
+import styled from "styled-components";
+/**
+ * UI SHELL
+ * Docs: https://react.carbondesignsystem.com/?path=/story/components-ui-shell--fixed-side-nav
+ */
 const BREAKPOINT_LG_WIDTH = "66rem"; // This is Carbon's breakpoint (lg) width https://github.com/carbon-design-system/carbon/blob/main/packages/layout/src/index.js#L56
-const C3NavigationExternalLink = ({ label }) => React.createElement(React.Fragment, null, label);
-const C3NavigationAppBar = ({ appBar, forwardRef, navbar, }) => {
-    const [appBarOpen, setAppBarOpen] = useState(appBar.isOpen);
-    const [panelRef, iconRef] = useOnClickOutside(() => setAppBarOpen(false));
-    return (React.createElement(React.Fragment, null,
-        React.createElement(HeaderGlobalAction, { ref: iconRef, "aria-label": "App Switcher", isActive: appBarOpen, onClick: () => {
-                setAppBarOpen(!appBarOpen);
-            }, tooltipAlignment: "start" }, appBarOpen ? React.createElement(Close, { size: 20 }) : React.createElement(C3AppMenuIcon, { size: 20 })),
-        React.createElement(SideNav, { ref: panelRef, "aria-label": appBar.ariaLabel || "Side Navigation", expanded: appBarOpen, isPersistent: false, style: {
-                display: "grid",
-                gridAutoFlow: "row",
-                gridAutoRows: "max-content 1fr",
-                borderRight: appBarOpen
-                    ? "1px solid var(--cds-border-subtle)"
-                    : undefined,
-                overflowY: "auto",
-            } },
-            React.createElement(SideNavItems, null,
-                navbar.elements.length > 0 && (React.createElement(HeaderSideNavItems, { hasDivider: true }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, element: forwardRef, isCurrentPage: element.isCurrentPage, ...element.routeProps, onClick: () => {
-                        if (appBar.closeOnClick !== false) {
-                            setAppBarOpen(false);
-                        }
-                    } }, element.label))))),
-                appBar.elements &&
-                    appBar.elements.map((element) => {
-                        if (element.subElements && element.subElements.length > 0) {
-                            return (React.createElement(SideNavMenu, { large: true, title: element.label, key: element.key }, element.subElements.map((subElement) => (React.createElement(SideNavMenuItem, { key: subElement.key, href: subElement.href, target: subElement.href ? subElement.target : undefined, onClick: () => {
-                                    if (subElement.onClick) {
-                                        subElement.onClick();
-                                    }
-                                    if (appBar.closeOnClick !== false) {
-                                        setAppBarOpen(false);
-                                    }
-                                    if (appBar.elementClicked) {
-                                        appBar.elementClicked(subElement.key);
-                                    }
-                                } },
-                                React.createElement(C3NavigationExternalLink, { label: subElement.label }))))));
-                        }
-                        else {
-                            return element.routeProps ? (React.createElement(SideNavLink, { element: forwardRef, key: element.key, large: true, isActive: element.active, ...element.routeProps, onClick: () => {
-                                    if (element.onClick) {
-                                        element.onClick();
-                                    }
-                                    if (appBar.closeOnClick !== false) {
-                                        setAppBarOpen(false);
-                                    }
-                                    if (appBar.elementClicked) {
-                                        appBar.elementClicked(element.key);
-                                    }
-                                } }, element.label)) : (React.createElement(SideNavLink, { key: element.key, large: true, onClick: () => {
-                                    if (element.onClick) {
-                                        element.onClick();
-                                    }
-                                    if (appBar.closeOnClick !== false) {
-                                        setAppBarOpen(false);
-                                    }
-                                    if (appBar.elementClicked) {
-                                        appBar.elementClicked(element.key);
-                                    }
-                                }, href: element.href, target: element.href ? element.target : undefined }, element.label));
-                        }
-                    })))));
-};
+const StyledToggletipContent = styled(ToggletipContent) `
+	.cds--link:visited {
+		color: var(--cds-link-text-color);
+	}
+
+	.cds--link:visited:hover {
+		color: var(--cds-link-hover-text-color);
+	}
+`;
 export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, userSideBar, notificationSideBar, }) => {
     const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`);
     const appBarElementsLength = appBar.elements?.length ?? 0;
     const displayAppBar = appBarElementsLength > 0 || (!isLargeScreen && navbar.elements.length > 0);
-    const inverseThemeClassName = useInverseThemeClassName();
     return (React.createElement(HeaderContainer, { render: () => {
             return (React.createElement(Header, { "aria-label": app.ariaLabel },
                 React.createElement(SkipToContent, null),
@@ -109,7 +57,7 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                                                         marginLeft: 0,
                                                         cursor: "pointer",
                                                     } }, tag.label)),
-                                            React.createElement(ToggletipContent, { className: inverseThemeClassName }, content))));
+                                            React.createElement(StyledToggletipContent, null, content))));
                                 }
                                 return (React.createElement(Tag, { key: tag.key, style: {
                                         height: "1.5rem",

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

@@ -57,4 +57,13 @@ export interface C3NavigationProps {
     navbar: C3NavigationNavBarProps;
     forwardRef?: React.ForwardRefExoticComponent<any>;
 }
+export declare type LinkProps = {
+    element?: React.ElementType;
+    isSideNavExpanded?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    isActive?: boolean;
+    large?: boolean;
+    renderIcon?: (() => React.ReactNode) | object;
+};
 export {};

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

@@ -1,4 +1,3 @@
 export declare function useOnClickOutside(handler: (e: Event) => void): ((node: unknown) => void)[];
 export declare function executeMediaQuery(mediaQuery: string): MediaQueryList;
 export declare function useMediaQuery(mediaQuery: string): boolean;
-export declare function useInverseThemeClassName(): string;

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

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { usePrefix, useTheme } from "@carbon/react";
 export function useOnClickOutside(handler) {
     const panelRef = useRef(null);
     const iconRef = useRef(null);
@@ -52,11 +51,3 @@ export function useMediaQuery(mediaQuery) {
     }, []);
     return isMatched;
 }
-export function useInverseThemeClassName() {
-    const { theme } = useTheme();
-    const prefix = usePrefix();
-    if (!["g10", "g100"].includes(theme)) {
-        return "";
-    }
-    return theme === "g10" ? `${prefix}--g100` : `${prefix}--g10`;
-}

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "@carbon/react";
 import { ArrowRight } from "@carbon/react/icons";
 export function createAppProps() {
     return {
@@ -79,7 +80,10 @@ export function createNavBarBarProps(options = {}) {
                 label: "I am a tooltip pill",
                 color: "cool-gray",
                 tooltip: {
-                    content: React.createElement("p", null, "tooltip popover"),
+                    content: (React.createElement("p", null,
+                        "tooltip popover with a",
+                        " ",
+                        React.createElement(Link, { href: "http://camunda.com/" }, "link"))),
                     buttonLabel: "open the tooltip",
                 },
             },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@camunda/camunda-composite-components",
-	"version": "0.0.33-rc1",
+	"version": "0.0.33",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"copy-css-files": "copyfiles -u 1 src/components/**/*.css lib/esm",