@camunda/camunda-composite-components 0.0.41 → 0.0.42

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

@@ -1,27 +1,39 @@
-import { Header, HeaderContainer, HeaderGlobalBar, HeaderMenuItem, HeaderName as CarbonHeaderName, 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 { useMediaQuery } from "./helpers";
-import { C3NavigationAppBar } from "./c3-navigation-appbar";
-import styled from "styled-components";
-import C3ActionButtons from "./c3-navigation-actions/c3-action-buttons";
-import { CamundaLogo } from "../../icons/c3-icons";
-import { InfoButton } from "./c3-info-button";
-import { C3SidebarStateProvider } from "./c3-navigation-sidebar/c3-sidebar-state-provider";
+import {
+	Header,
+	HeaderContainer,
+	HeaderGlobalBar,
+	HeaderMenuItem,
+	HeaderName as CarbonHeaderName,
+	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 { useMediaQuery } from "./helpers"
+import { C3NavigationAppBar } from "./c3-navigation-appbar"
+import styled from "styled-components"
+import C3ActionButtons from "./c3-navigation-actions/c3-action-buttons"
+import { CamundaLogo } from "../../icons/c3-icons"
+import { InfoButton } from "./c3-info-button"
+import { C3SidebarStateProvider } from "./c3-navigation-sidebar/c3-sidebar-state-provider"
 /**
  * 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 HeaderName = styled(CarbonHeaderName) `
+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 HeaderName = styled(CarbonHeaderName)`
 	display: grid;
 	grid-auto-flow: column;
 	gap: 0.5rem;
-`;
-const StyledToggletipContent = styled(ToggletipContent) `
+`
+const StyledToggletipContent = styled(ToggletipContent)`
 	.cds--link:visited {
 		color: var(--cds-link-text-color);
 	}
@@ -29,74 +41,184 @@ const StyledToggletipContent = styled(ToggletipContent) `
 	.cds--link:visited:hover {
 		color: var(--cds-link-hover-text-color);
 	}
-`;
-export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, infoButton, actionButtons, 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);
-    return (React.createElement(C3SidebarStateProvider, { isNotificationSidebarOpen: notificationSideBar?.isOpen, isOrgSidebarOpen: orgSideBar?.isOpen, isInfoSidebarOpen: infoSideBar?.isOpen, isUserSidebarOpen: userSideBar?.isOpen },
-        React.createElement(HeaderContainer, { render: () => {
-                return (React.createElement(Header, { "aria-label": app.ariaLabel },
-                    React.createElement(SkipToContent, null),
-                    displayAppBar && (React.createElement(C3NavigationAppBar, { app: app, appBar: appBar, forwardRef: forwardRef, navbar: navbar })),
-                    React.createElement(HeaderName, { element: forwardRef, prefix: "", ...app.routeProps },
-                        React.createElement(CamundaLogo, { "aria-label": "Camunda" }),
-                        React.createElement("span", null, app.name)),
-                    React.createElement(HeaderNavigation, { "aria-label": app.ariaLabel }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, element: element.routeProps && forwardRef, isActive: element.isCurrentPage, ...element.routeProps },
-                        React.createElement("span", null, element.label))))),
-                    React.createElement(HeaderGlobalBar, null,
-                        React.createElement("div", { style: {
-                                display: "grid",
-                                gridAutoFlow: "column",
-                                gap: ".5rem",
-                                paddingRight: ".5rem",
-                            } },
-                            navbar.tags &&
-                                navbar.tags.length > 0 &&
-                                navbar.tags.map((tag) => {
-                                    if (tag?.tooltip !== undefined) {
-                                        const { content, buttonLabel } = tag.tooltip;
-                                        return (React.createElement("div", { key: tag.key, style: {
-                                                height: "1.5rem",
-                                                marginTop: "0.50rem",
-                                            } },
-                                            React.createElement(Toggletip, null,
-                                                React.createElement(ToggletipButton, { label: buttonLabel },
-                                                    React.createElement(Tag, { type: tag.color, style: {
-                                                            padding: "0 1rem",
-                                                            marginRight: 0,
-                                                            marginLeft: 0,
-                                                            cursor: "pointer",
-                                                        } }, tag.label)),
-                                                React.createElement(StyledToggletipContent, null, content))));
-                                    }
-                                    return (React.createElement(Tag, { key: tag.key, style: {
-                                            height: "1.5rem",
-                                            marginTop: "0.75rem",
-                                            padding: "0 1rem",
-                                        }, type: tag.color }, tag.label));
-                                }),
-                            navbar.orgName && (React.createElement("div", { className: "bodyText", style: {
-                                    fontSize: "14px",
-                                    lineHeight: "3rem",
-                                    textOverflow: "ellipsis",
-                                    whiteSpace: "nowrap",
-                                    overflow: "hidden",
-                                    maxWidth: "150px",
-                                } }, navbar.orgName))),
-                        actionButtons && React.createElement(C3ActionButtons, { elements: actionButtons }),
-                        notificationSideBar && (React.createElement(C3NotificationSidebar, { sideBar: {
-                                ...notificationSideBar,
-                                type: "notifications",
-                            } })),
-                        orgSideBar && (React.createElement(C3OrgSidebar, { sideBar: {
-                                ...orgSideBar,
-                                type: "org",
-                            } })),
-                        infoButton ? (React.createElement(InfoButton, { onClick: infoButton.onClick })) : (infoSideBar && (React.createElement(C3InfoSidebar, { sideBar: { ...infoSideBar, type: "info" } }))),
-                        userSideBar && (React.createElement(C3UserSidebar, { sideBar: {
-                                ...userSideBar,
-                                type: "user",
-                            } })))));
-            } })));
-};
+`
+export const C3Navigation = ({
+	app,
+	appBar,
+	forwardRef,
+	navbar,
+	orgSideBar,
+	infoSideBar,
+	infoButton,
+	actionButtons,
+	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)
+	return React.createElement(
+		C3SidebarStateProvider,
+		{
+			isNotificationSidebarOpen: notificationSideBar?.isOpen,
+			isOrgSidebarOpen: orgSideBar?.isOpen,
+			isInfoSidebarOpen: infoSideBar?.isOpen,
+			isUserSidebarOpen: userSideBar?.isOpen,
+		},
+		React.createElement(HeaderContainer, {
+			render: () => {
+				return React.createElement(
+					Header,
+					{ "aria-label": app.ariaLabel },
+					React.createElement(SkipToContent, null),
+					displayAppBar &&
+						React.createElement(C3NavigationAppBar, {
+							app: app,
+							appBar: appBar,
+							forwardRef: forwardRef,
+							navbar: navbar,
+						}),
+					React.createElement(
+						HeaderName,
+						{ element: forwardRef, prefix: "", ...app.routeProps },
+						React.createElement(CamundaLogo, { "aria-label": "Camunda" }),
+						React.createElement("span", null, app.name),
+					),
+					React.createElement(
+						HeaderNavigation,
+						{ "aria-label": app.ariaLabel },
+						navbar.elements.map((element) =>
+							React.createElement(
+								HeaderMenuItem,
+								{
+									key: element.key,
+									element: element.routeProps && forwardRef,
+									isActive: element.isCurrentPage,
+									...element.routeProps,
+								},
+								React.createElement("span", null, element.label),
+							),
+						),
+					),
+					React.createElement(
+						HeaderGlobalBar,
+						null,
+						React.createElement(
+							"div",
+							{
+								style: {
+									display: "grid",
+									gridAutoFlow: "column",
+									gap: ".5rem",
+									paddingRight: ".5rem",
+								},
+							},
+							navbar.tags &&
+								navbar.tags.length > 0 &&
+								navbar.tags.map((tag) => {
+									if (tag?.tooltip !== undefined) {
+										const { content, buttonLabel } = tag.tooltip
+										return React.createElement(
+											"div",
+											{
+												key: tag.key,
+												style: {
+													height: "1.5rem",
+													marginTop: "0.50rem",
+												},
+											},
+											React.createElement(
+												Toggletip,
+												null,
+												React.createElement(
+													ToggletipButton,
+													{ label: buttonLabel },
+													React.createElement(
+														Tag,
+														{
+															type: tag.color,
+															style: {
+																padding: "0 1rem",
+																marginRight: 0,
+																marginLeft: 0,
+																cursor: "pointer",
+															},
+														},
+														tag.label,
+													),
+												),
+												React.createElement(
+													StyledToggletipContent,
+													null,
+													content,
+												),
+											),
+										)
+									}
+									return React.createElement(
+										Tag,
+										{
+											key: tag.key,
+											style: {
+												height: "1.5rem",
+												marginTop: "0.75rem",
+												padding: "0 1rem",
+											},
+											type: tag.color,
+										},
+										tag.label,
+									)
+								}),
+							navbar.orgName &&
+								React.createElement(
+									"div",
+									{
+										className: "bodyText",
+										style: {
+											fontSize: "14px",
+											lineHeight: "3rem",
+											textOverflow: "ellipsis",
+											whiteSpace: "nowrap",
+											overflow: "hidden",
+											maxWidth: "150px",
+										},
+									},
+									navbar.orgName,
+								),
+						),
+						actionButtons &&
+							React.createElement(C3ActionButtons, { elements: actionButtons }),
+						notificationSideBar &&
+							React.createElement(C3NotificationSidebar, {
+								sideBar: {
+									...notificationSideBar,
+									type: "notifications",
+								},
+							}),
+						orgSideBar &&
+							React.createElement(C3OrgSidebar, {
+								sideBar: {
+									...orgSideBar,
+									type: "org",
+								},
+							}),
+						infoButton
+							? React.createElement(InfoButton, { onClick: infoButton.onClick })
+							: infoSideBar &&
+									React.createElement(C3InfoSidebar, {
+										sideBar: { ...infoSideBar, type: "info" },
+									}),
+						userSideBar &&
+							React.createElement(C3UserSidebar, {
+								sideBar: {
+									...userSideBar,
+									type: "user",
+								},
+							}),
+					),
+				)
+			},
+		}),
+	)
+}

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

@@ -1,75 +1,81 @@
 /// <reference types="react" />
-import { Tag } from "@carbon/react";
-import { Endpoints, Stage } from "../../api/endpoints.const";
-import { C3NavigationAppBarProps, C3NavigationInfoSideBarProps, C3NavigationNotificationsSideBarProps, C3NavigationOrgSideBarProps, C3NavigationUserSideBarProps } from "./c3-navigation-sidebar/c3-navigation-sidebar.types";
-import { C3ActionButtonsProps } from "./c3-navigation-actions/c3-action-buttons.types";
+import { Tag } from "@carbon/react"
+import { Endpoints, Stage } from "../../api/endpoints.const"
+import {
+	C3NavigationAppBarProps,
+	C3NavigationInfoSideBarProps,
+	C3NavigationNotificationsSideBarProps,
+	C3NavigationOrgSideBarProps,
+	C3NavigationUserSideBarProps,
+} from "./c3-navigation-sidebar/c3-navigation-sidebar.types"
+import { C3ActionButtonsProps } from "./c3-navigation-actions/c3-action-buttons.types"
 export interface C3NavigationAppProps {
-    prefix?: string;
-    name: string;
-    ariaLabel: string;
-    routeProps: any;
+	prefix?: string
+	name: string
+	ariaLabel: string
+	routeProps: any
 }
 export interface C3NavigationElementProps {
-    ariaLabel?: string;
-    key: string;
-    label: string;
-    kind?: "ghost" | "danger--ghost";
-    active?: boolean;
-    renderIcon?: any;
-    routeProps?: any;
-    href?: string;
-    target?: "_blank" | "_self" | "_parent" | "_top";
-    onClick?: () => void;
-    subElements?: C3NavigationElementProps[];
-    preceedingDivider?: boolean;
+	ariaLabel?: string
+	key: string
+	label: string
+	kind?: "ghost" | "danger--ghost"
+	active?: boolean
+	renderIcon?: any
+	routeProps?: any
+	href?: string
+	target?: "_blank" | "_self" | "_parent" | "_top"
+	onClick?: () => void
+	subElements?: C3NavigationElementProps[]
+	preceedingDivider?: boolean
 }
 export interface C3NavigationNavBarProps {
-    elements: Array<{
-        label: string;
-        key: string;
-        routeProps: any;
-        isCurrentPage: boolean;
-    }>;
-    tags?: Array<{
-        label: string;
-        key: string;
-        color?: React.ComponentProps<typeof Tag>["type"];
-        tooltip?: {
-            content: React.ReactNode;
-            buttonLabel: string;
-        };
-    }>;
-    orgName?: string;
+	elements: Array<{
+		label: string
+		key: string
+		routeProps: any
+		isCurrentPage: boolean
+	}>
+	tags?: Array<{
+		label: string
+		key: string
+		color?: React.ComponentProps<typeof Tag>["type"]
+		tooltip?: {
+			content: React.ReactNode
+			buttonLabel: string
+		}
+	}>
+	orgName?: string
 }
 export interface C3NotificationsProps {
-    stage?: Stage;
-    endpoints?: Endpoints;
-    activeOrganizationId: string;
-    userToken: string;
-    getNewUserToken: () => Promise<string>;
+	stage?: Stage
+	endpoints?: Endpoints
+	activeOrganizationId: string
+	userToken: string
+	getNewUserToken: () => Promise<string>
 }
-declare type WithoutType<P> = Omit<P, "type">;
+declare type WithoutType<P> = Omit<P, "type">
 export interface C3NavigationProps {
-    app: C3NavigationAppProps;
-    appBar: WithoutType<C3NavigationAppBarProps>;
-    orgSideBar?: WithoutType<C3NavigationOrgSideBarProps>;
-    infoSideBar?: WithoutType<C3NavigationInfoSideBarProps>;
-    infoButton?: {
-        onClick: () => void;
-    };
-    actionButtons?: C3ActionButtonsProps;
-    userSideBar?: WithoutType<C3NavigationUserSideBarProps>;
-    notificationSideBar?: WithoutType<C3NavigationNotificationsSideBarProps>;
-    navbar: C3NavigationNavBarProps;
-    forwardRef?: React.ForwardRefExoticComponent<any>;
+	app: C3NavigationAppProps
+	appBar: WithoutType<C3NavigationAppBarProps>
+	orgSideBar?: WithoutType<C3NavigationOrgSideBarProps>
+	infoSideBar?: WithoutType<C3NavigationInfoSideBarProps>
+	infoButton?: {
+		onClick: () => void
+	}
+	actionButtons?: C3ActionButtonsProps
+	userSideBar?: WithoutType<C3NavigationUserSideBarProps>
+	notificationSideBar?: WithoutType<C3NavigationNotificationsSideBarProps>
+	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 {};
+	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/c3-navigation.types.js

@@ -1 +1 @@
-export {};
+export {}

package/lib/esm/components/c3-navigation/c3-notification-provider/c3-notification-container.d.ts

@@ -1,13 +1,30 @@
-import { FC } from "react";
-import { Notification as NotificationProps } from "../../../api/notifications";
-export declare const NotificationTitle: import("styled-components").StyledComponent<"p", any, {}, never>;
-export declare const NotificationDescription: import("styled-components").StyledComponent<"p", any, {}, never>;
-export declare const LinkContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const C3NotificationContainer: FC<NotificationProps & {
-    onRead: () => void;
-    onDismiss: () => void;
-    onLinkClick?: (meta: NotificationProps["meta"]) => void;
-    originalOnLinkClick?: (meta: NotificationProps["meta"]) => void;
-    unread?: boolean;
-}>;
-export default C3NotificationContainer;
+import { FC } from "react"
+import { Notification as NotificationProps } from "../../../api/notifications"
+export declare const NotificationTitle: import("styled-components").StyledComponent<
+	"p",
+	any,
+	{},
+	never
+>
+export declare const NotificationDescription: import("styled-components").StyledComponent<
+	"p",
+	any,
+	{},
+	never
+>
+export declare const LinkContainer: import("styled-components").StyledComponent<
+	"div",
+	any,
+	{},
+	never
+>
+declare const C3NotificationContainer: FC<
+	NotificationProps & {
+		onRead: () => void
+		onDismiss: () => void
+		onLinkClick?: (meta: NotificationProps["meta"]) => void
+		originalOnLinkClick?: (meta: NotificationProps["meta"]) => void
+		unread?: boolean
+	}
+>
+export default C3NotificationContainer