@camunda/camunda-composite-components 0.0.41 → 0.0.42

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

@@ -1,76 +1,165 @@
-import React, { useState } from "react";
-import { Close } from "@carbon/react/icons";
-import { useOnClickOutside } from "./helpers";
-import { HeaderGlobalAction, HeaderMenuItem, HeaderSideNavItems, SideNav as CarbonSideNav, SideNavItems, SideNavLink, SideNavMenu, SideNavMenuItem, } from "@carbon/react";
-import { C3AppMenuIcon } from "../../icons/c3-icons";
-import styled from "styled-components";
-const NavWrapper = styled.div `
+import React, { useState } from "react"
+import { Close } from "@carbon/react/icons"
+import { useOnClickOutside } from "./helpers"
+import {
+	HeaderGlobalAction,
+	HeaderMenuItem,
+	HeaderSideNavItems,
+	SideNav as CarbonSideNav,
+	SideNavItems,
+	SideNavLink,
+	SideNavMenu,
+	SideNavMenuItem,
+} from "@carbon/react"
+import { C3AppMenuIcon } from "../../icons/c3-icons"
+import styled from "styled-components"
+const NavWrapper = styled.div`
 	.cds--side-nav__overlay {
 		display: none;
 	}
-`;
-const SideNav = styled(CarbonSideNav) `
+`
+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};
+	border-right: ${({ expanded }) =>
+		expanded ? "1px solid var(--cds-border-subtle)" : undefined};
 	overflow-y: auto;
-`;
-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": "Camunda apps", isActive: appBarOpen, onClick: () => {
-                setAppBarOpen(!appBarOpen);
-            }, tooltipAlignment: "start", 
-            /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-            /* @ts-ignore */
-            leaveDelayMs: 100 }, appBarOpen ? React.createElement(Close, { size: 20 }) : React.createElement(C3AppMenuIcon, { size: 20 })),
-        React.createElement(NavWrapper, null,
-            React.createElement(SideNav, { ref: panelRef, "aria-label": appBar.ariaLabel || "Side Navigation", expanded: appBarOpen, isPersistent: false },
-                React.createElement(SideNavItems, null,
-                    React.createElement("li", null, navbar.elements.length > 0 && (React.createElement(HeaderSideNavItems, { hasDivider: true }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, element: element.routeProps && forwardRef, isActive: element.isCurrentPage, ...element.routeProps, onClick: () => {
-                            if (element.routeProps.onClick) {
-                                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, { element: subElement.routeProps && forwardRef, key: subElement.key, href: subElement.href, target: subElement.href ? subElement.target : undefined, ...subElement.routeProps, onClick: () => {
-                                        if (subElement.onClick) {
-                                            subElement.onClick();
-                                        }
-                                        if (subElement.routeProps.onClick) {
-                                            subElement.routeProps.onClick();
-                                        }
-                                        if (appBar.closeOnClick !== false) {
-                                            setAppBarOpen(false);
-                                        }
-                                        if (appBar.elementClicked) {
-                                            appBar.elementClicked(subElement.key);
-                                        }
-                                    } }, subElement.label)))));
-                            }
-                            else {
-                                return (React.createElement(SideNavLink, { element: element.routeProps && forwardRef, key: element.key, large: true, isActive: element.active, ...element.routeProps, onClick: () => {
-                                        if (element.onClick) {
-                                            element.onClick();
-                                        }
-                                        if (element.routeProps.onClick) {
-                                            element.routeProps.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));
-                            }
-                        }))))));
-};
+`
+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": "Camunda apps",
+				isActive: appBarOpen,
+				onClick: () => {
+					setAppBarOpen(!appBarOpen)
+				},
+				tooltipAlignment: "start",
+				/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+				/* @ts-ignore */
+				leaveDelayMs: 100,
+			},
+			appBarOpen
+				? React.createElement(Close, { size: 20 })
+				: React.createElement(C3AppMenuIcon, { size: 20 }),
+		),
+		React.createElement(
+			NavWrapper,
+			null,
+			React.createElement(
+				SideNav,
+				{
+					ref: panelRef,
+					"aria-label": appBar.ariaLabel || "Side Navigation",
+					expanded: appBarOpen,
+					isPersistent: false,
+				},
+				React.createElement(
+					SideNavItems,
+					null,
+					React.createElement(
+						"li",
+						null,
+						navbar.elements.length > 0 &&
+							React.createElement(
+								HeaderSideNavItems,
+								{ hasDivider: true },
+								navbar.elements.map((element) =>
+									React.createElement(
+										HeaderMenuItem,
+										{
+											key: element.key,
+											element: element.routeProps && forwardRef,
+											isActive: element.isCurrentPage,
+											...element.routeProps,
+											onClick: () => {
+												if (element.routeProps.onClick) {
+													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,
+											{
+												element: subElement.routeProps && forwardRef,
+												key: subElement.key,
+												href: subElement.href,
+												target: subElement.href ? subElement.target : undefined,
+												...subElement.routeProps,
+												onClick: () => {
+													if (subElement.onClick) {
+														subElement.onClick()
+													}
+													if (subElement.routeProps.onClick) {
+														subElement.routeProps.onClick()
+													}
+													if (appBar.closeOnClick !== false) {
+														setAppBarOpen(false)
+													}
+													if (appBar.elementClicked) {
+														appBar.elementClicked(subElement.key)
+													}
+												},
+											},
+											subElement.label,
+										),
+									),
+								)
+							} else {
+								return React.createElement(
+									SideNavLink,
+									{
+										element: element.routeProps && forwardRef,
+										key: element.key,
+										large: true,
+										isActive: element.active,
+										...element.routeProps,
+										onClick: () => {
+											if (element.onClick) {
+												element.onClick()
+											}
+											if (element.routeProps.onClick) {
+												element.routeProps.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-info-sidebar.d.ts

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

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

@@ -1,37 +1,58 @@
-import React from "react";
-import { SwitcherDivider } from "./components";
-import { Help } from "@carbon/react/icons";
-import C3NavigationSideBar from "./c3-navigation-sidebar";
-const C3InfoSidebar = ({ sideBar, }) => {
-    const { version, ...sideBarProps } = sideBar;
-    return (React.createElement(C3NavigationSideBar, { sideBar: {
-            ...sideBarProps,
-            ariaLabel: sideBarProps.ariaLabel || "Info Sidebar",
-        }, icon: React.createElement(Help, { size: 20 }), bottomChildren: version !== undefined && (React.createElement(React.Fragment, null,
-            React.createElement(SwitcherDivider, null),
-            React.createElement("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)",
-                } },
-                "Version ",
-                version),
-            React.createElement("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)",
-                } },
-                `© Camunda Services GmbH ${new Date().getFullYear()}`,
-                React.createElement("br", null),
-                " All rights reserved."))) }));
-};
-export default C3InfoSidebar;
+import React from "react"
+import { SwitcherDivider } from "./components"
+import { Help } from "@carbon/react/icons"
+import C3NavigationSideBar from "./c3-navigation-sidebar"
+const C3InfoSidebar = ({ sideBar }) => {
+	const { version, ...sideBarProps } = sideBar
+	return React.createElement(C3NavigationSideBar, {
+		sideBar: {
+			...sideBarProps,
+			ariaLabel: sideBarProps.ariaLabel || "Info Sidebar",
+		},
+		icon: React.createElement(Help, { size: 20 }),
+		bottomChildren:
+			version !== undefined &&
+			React.createElement(
+				React.Fragment,
+				null,
+				React.createElement(SwitcherDivider, null),
+				React.createElement(
+					"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)",
+						},
+					},
+					"Version ",
+					version,
+				),
+				React.createElement(
+					"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)",
+						},
+					},
+					`© Camunda Services GmbH ${new Date().getFullYear()}`,
+					React.createElement("br", null),
+					" All rights reserved.",
+				),
+			),
+	})
+}
+export default C3InfoSidebar

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

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-import { C3NavigationElementProps } from "../c3-navigation.types";
-import { C3NavigationSideBarProps } from "./c3-navigation-sidebar.types";
+import { C3NavigationElementProps } from "../c3-navigation.types"
+import { C3NavigationSideBarProps } from "./c3-navigation-sidebar.types"
 declare const C3NavigationSidebarElement: (props: {
-    element: C3NavigationElementProps;
-    index: number;
-    itemTabIndex?: number | undefined;
-    sideBar: C3NavigationSideBarProps;
-    setSideBarOpen: (open: boolean) => void;
-}) => JSX.Element;
-export default C3NavigationSidebarElement;
+	element: C3NavigationElementProps
+	index: number
+	itemTabIndex?: number | undefined
+	sideBar: C3NavigationSideBarProps
+	setSideBarOpen: (open: boolean) => void
+}) => JSX.Element
+export default C3NavigationSidebarElement

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

@@ -1,34 +1,57 @@
-import { Button } from "@carbon/react";
-import React, { useEffect, useRef, useState } from "react";
-import { SwitcherDivider } from "./components";
+import { Button } from "@carbon/react"
+import React, { useEffect, useRef, useState } from "react"
+import { SwitcherDivider } from "./components"
 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: "calc(16rem - 2px)",
-                ...(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;
+	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: "calc(16rem - 2px)",
+					...(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-sidebar/c3-navigation-sidebar.d.ts

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