@camunda/camunda-composite-components 0.1.1 → 0.1.2

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

@@ -1,165 +1,76 @@
-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,62 +1,39 @@
-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
-	if (version)
-		console.warn(
-			"The `version` prop in the info sidebar is deprecated and will be removed in a future release. Please set `version` in the `userSideBar` prop instead.",
-		)
-	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;
+    if (version)
+        console.warn("The `version` prop in the info sidebar is deprecated and will be removed in a future release. Please set `version` in the `userSideBar` prop instead.");
+    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,10 @@
-/// <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,57 +1,34 @@
-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,10 +1,10 @@
-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
-	version?: ReactNode
-	bottomChildren?: ReactNode
-}) => JSX.Element
-export default C3NavigationSideBar
+    sideBar: C3NavigationSideBarProps;
+    icon: ReactElement;
+    children?: ReactNode;
+    version?: ReactNode;
+    bottomChildren?: ReactNode;
+}) => JSX.Element;
+export default C3NavigationSideBar;