@camunda/camunda-composite-components 0.0.41 → 0.0.42

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

@@ -1,64 +1,124 @@
-import { Button, HeaderGlobalAction, HeaderPanel as CarbonHeaderPanel, Stack, SwitcherDivider, } from "@carbon/react";
-import React from "react";
-import { useOnClickOutside } from "../helpers";
-import C3NavigationSidebarElement from "./c3-navigation-sidebar-element";
-import styled from "styled-components";
-import { useSidebarState } from "./c3-sidebar-state-provider";
-const Wrapper = styled.div `
+import {
+	Button,
+	HeaderGlobalAction,
+	HeaderPanel as CarbonHeaderPanel,
+	Stack,
+	SwitcherDivider,
+} from "@carbon/react"
+import React from "react"
+import { useOnClickOutside } from "../helpers"
+import C3NavigationSidebarElement from "./c3-navigation-sidebar-element"
+import styled from "styled-components"
+import { useSidebarState } from "./c3-sidebar-state-provider"
+const Wrapper = styled.div`
 	.cds--popover * {
 		z-index: 9000;
 	}
-`;
-const HeaderPanel = styled(CarbonHeaderPanel) `
+`
+const HeaderPanel = styled(CarbonHeaderPanel)`
 	visibility: ${({ expanded }) => (expanded ? "visible" : "hidden")};
 	display: grid;
 	grid-auto-flow: row;
 	grid-auto-rows: max-content 1fr;
 	overflow-y: auto;
 	overflow-x: hidden;
-`;
+`
+const BottomElements = styled.div`
+	align-self: end;
+
+	button {
+		padding-top: 6px;
+	}
+`
 const C3NavigationSideBar = (props) => {
-    const { icon, sideBar, children, bottomChildren } = props;
-    const { callbacks, onOpen } = sideBar;
-    const { isOpen, setIsOpen: setOpenState } = useSidebarState()[sideBar.type];
-    const setIsOpen = (open) => {
-        if (open) {
-            callbacks?.beforeOpening?.();
-            onOpen?.();
-        }
-        setOpenState(open);
-        if (!open)
-            callbacks?.afterClosing?.();
-    };
-    const itemTabIndex = isOpen ? undefined : -1;
-    const [panelRef, iconRef] = useOnClickOutside(() => setIsOpen(false));
-    const id = `c3-${sideBar.type}-sidebar`;
-    return (React.createElement(Wrapper, null,
-        React.createElement(HeaderGlobalAction, { ref: iconRef, "aria-label": `Open ${sideBar.ariaLabel}`, "aria-expanded": isOpen, "aria-controls": id, onClick: () => {
-                setIsOpen(!isOpen);
-            }, isActive: isOpen, tooltipAlignment: sideBar.type === "user" ? "end" : "center", 
-            /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-            /* @ts-ignore */
-            leaveDelayMs: 100 }, icon),
-        React.createElement(HeaderPanel, { ref: panelRef, expanded: isOpen, id: id },
-            React.createElement(Stack, null,
-                children,
-                sideBar.elements &&
-                    sideBar.elements.length > 0 &&
-                    "customElements" in sideBar &&
-                    sideBar.customElements &&
-                    "activeOrganization" in sideBar.customElements &&
-                    !sideBar.customElements?.activeOrganization && React.createElement(SwitcherDivider, null),
-                sideBar.elements?.map((element, index) => (React.createElement(C3NavigationSidebarElement, { key: element.key, element: element, index: index, sideBar: sideBar, setSideBarOpen: setIsOpen, itemTabIndex: itemTabIndex }))),
-                bottomChildren),
-            sideBar.bottomElements &&
-                sideBar.bottomElements.map((element) => (React.createElement(Button, { kind: element.kind, key: element.key, className: "cds--switcher__item", renderIcon: element.renderIcon, onClick: () => {
-                        if (element.onClick) {
-                            element.onClick();
-                        }
-                        if (sideBar.closeOnClick !== false) {
-                            setIsOpen(false);
-                        }
-                    }, style: { alignSelf: "end" }, tabIndex: itemTabIndex }, element.label))))));
-};
-export default C3NavigationSideBar;
+	const { icon, sideBar, children, bottomChildren } = props
+	const { callbacks, onOpen } = sideBar
+	const { isOpen, setIsOpen: setOpenState } = useSidebarState()[sideBar.type]
+	const setIsOpen = (open) => {
+		if (open) {
+			callbacks?.beforeOpening?.()
+			onOpen?.()
+		}
+		setOpenState(open)
+		if (!open) callbacks?.afterClosing?.()
+	}
+	const itemTabIndex = isOpen ? undefined : -1
+	const [panelRef, iconRef] = useOnClickOutside(() => setIsOpen(false))
+	const id = `c3-${sideBar.type}-sidebar`
+	return React.createElement(
+		Wrapper,
+		null,
+		React.createElement(
+			HeaderGlobalAction,
+			{
+				ref: iconRef,
+				"aria-label": `Open ${sideBar.ariaLabel}`,
+				"aria-expanded": isOpen,
+				"aria-controls": id,
+				onClick: () => {
+					setIsOpen(!isOpen)
+				},
+				isActive: isOpen,
+				tooltipAlignment: sideBar.type === "user" ? "end" : "center",
+				/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+				/* @ts-ignore */
+				leaveDelayMs: 100,
+			},
+			icon,
+		),
+		React.createElement(
+			HeaderPanel,
+			{ ref: panelRef, expanded: isOpen, id: id },
+			React.createElement(
+				Stack,
+				null,
+				children,
+				sideBar.elements &&
+					sideBar.elements.length > 0 &&
+					"customElements" in sideBar &&
+					sideBar.customElements &&
+					"activeOrganization" in sideBar.customElements &&
+					!sideBar.customElements?.activeOrganization &&
+					React.createElement(SwitcherDivider, null),
+				sideBar.elements?.map((element, index) =>
+					React.createElement(C3NavigationSidebarElement, {
+						key: element.key,
+						element: element,
+						index: index,
+						sideBar: sideBar,
+						setSideBarOpen: setIsOpen,
+						itemTabIndex: itemTabIndex,
+					}),
+				),
+				bottomChildren,
+			),
+			React.createElement(
+				BottomElements,
+				null,
+				sideBar.bottomElements &&
+					sideBar.bottomElements.map((element) =>
+						React.createElement(
+							Button,
+							{
+								kind: element.kind,
+								key: element.key,
+								className: "cds--switcher__item",
+								renderIcon: element.renderIcon,
+								onClick: () => {
+									if (element.onClick) {
+										element.onClick()
+									}
+									if (sideBar.closeOnClick !== false) {
+										setIsOpen(false)
+									}
+								},
+								tabIndex: itemTabIndex,
+							},
+							element.label,
+						),
+					),
+			),
+		),
+	)
+}
+export default C3NavigationSideBar

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

@@ -1,64 +1,74 @@
 /// <reference types="react" />
-import { C3NavigationElementProps } from "../c3-navigation.types";
-import { Notification } from "../../../api/notifications";
+import { C3NavigationElementProps } from "../c3-navigation.types"
+import { Notification } from "../../../api/notifications"
 export declare type C3NavigationSideBarBaseProps = {
-    ariaLabel?: string;
-    isOpen?: boolean;
-    onOpen?: () => void;
-    closeOnClick?: boolean;
-    elementClicked?: (key: string) => void;
-    elements?: C3NavigationElementProps[];
-    bottomElements?: C3NavigationElementProps[];
-};
-export declare type C3NavigationOrgSideBarProps = C3NavigationSideBarBaseProps & {
-    type: "org";
-    customElements?: {
-        activeOrganization?: {
-            activeLabel: string;
-            otherLabel: string;
-            orgName: string;
-            action: {
-                label: string;
-                onClick: () => void;
-            };
-        };
-    };
-};
-export declare type C3NavigationInfoSideBarProps = C3NavigationSideBarBaseProps & {
-    type: "info";
-    version?: string;
-};
-export declare type C3NavigationUserSideBarProps = C3NavigationSideBarBaseProps & {
-    type: "user";
-    customElements?: {
-        customSection?: JSX.Element;
-        profile?: {
-            label: string;
-            user: {
-                name: string;
-                email: string;
-            };
-        };
-        themeSelector?: {
-            currentTheme: string;
-            onChange: (newValue: string) => void;
-        };
-        stageToggle?: {
-            prodFeaturesEnabled: boolean;
-            toggle: () => void;
-        };
-    };
-};
-export declare type C3NavigationNotificationsSideBarProps = C3NavigationSideBarBaseProps & {
-    type: "notifications";
-    onLinkClick?: (meta: Notification["meta"]) => void;
-};
+	ariaLabel?: string
+	isOpen?: boolean
+	onOpen?: () => void
+	closeOnClick?: boolean
+	elementClicked?: (key: string) => void
+	elements?: C3NavigationElementProps[]
+	bottomElements?: C3NavigationElementProps[]
+}
+export declare type C3NavigationOrgSideBarProps =
+	C3NavigationSideBarBaseProps & {
+		type: "org"
+		customElements?: {
+			activeOrganization?: {
+				activeLabel: string
+				otherLabel: string
+				orgName: string
+				action: {
+					label: string
+					onClick: () => void
+				}
+			}
+		}
+	}
+export declare type C3NavigationInfoSideBarProps =
+	C3NavigationSideBarBaseProps & {
+		type: "info"
+		version?: string
+	}
+export declare type C3NavigationUserSideBarProps =
+	C3NavigationSideBarBaseProps & {
+		type: "user"
+		customElements?: {
+			customSection?: JSX.Element
+			profile?: {
+				label: string
+				user: {
+					name: string
+					email: string
+				}
+			}
+			themeSelector?: {
+				currentTheme: string
+				onChange: (newValue: string) => void
+			}
+			stageToggle?: {
+				prodFeaturesEnabled: boolean
+				toggle: () => void
+			}
+		}
+	}
+export declare type C3NavigationNotificationsSideBarProps =
+	C3NavigationSideBarBaseProps & {
+		type: "notifications"
+		onLinkClick?: (meta: Notification["meta"]) => void
+	}
 export declare type C3NavigationAppBarProps = C3NavigationSideBarBaseProps & {
-    type: "app";
-};
+	type: "app"
+}
 export declare type C3NavigationSideBarProps = {
-    callbacks?: {
-        beforeOpening?: () => void;
-        afterClosing?: () => void;
-    };
-} & (C3NavigationOrgSideBarProps | C3NavigationInfoSideBarProps | C3NavigationUserSideBarProps | C3NavigationNotificationsSideBarProps | C3NavigationAppBarProps);
+	callbacks?: {
+		beforeOpening?: () => void
+		afterClosing?: () => void
+	}
+} & (
+	| C3NavigationOrgSideBarProps
+	| C3NavigationInfoSideBarProps
+	| C3NavigationUserSideBarProps
+	| C3NavigationNotificationsSideBarProps
+	| C3NavigationAppBarProps
+)

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

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

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

@@ -1,5 +1,5 @@
-import { FC } from "react";
-import { C3NavigationNotificationsSideBarProps } from "./c3-navigation-sidebar.types";
+import { FC } from "react"
+import { C3NavigationNotificationsSideBarProps } from "./c3-navigation-sidebar.types"
 export declare const C3NotificationSidebar: FC<{
-    sideBar: C3NavigationNotificationsSideBarProps;
-}>;
+	sideBar: C3NavigationNotificationsSideBarProps
+}>

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

@@ -1,13 +1,16 @@
-import { Button } from "@carbon/react";
-import { Notification as NotificationIcon } from "@carbon/react/icons";
-import React, { useContext, useEffect, useRef, useState } from "react";
-import styled from "styled-components";
-import { C3BellIcon, C3NotificationsUnreadIcon } from "../../../icons/c3-icons";
-import C3NotificationContainer, { NotificationDescription, NotificationTitle, } from "../c3-notification-provider/c3-notification-container";
-import { C3NotificationContext } from "../c3-notification-provider/c3-notification-provider";
-import C3NavigationSideBar from "./c3-navigation-sidebar";
-import { useNotificationSidebarState } from "./c3-sidebar-state-provider";
-const PanelHeader = styled.div `
+import { Button } from "@carbon/react"
+import { Notification as NotificationIcon } from "@carbon/react/icons"
+import React, { useContext, useEffect, useRef, useState } from "react"
+import styled from "styled-components"
+import { C3BellIcon, C3NotificationsUnreadIcon } from "../../../icons/c3-icons"
+import C3NotificationContainer, {
+	NotificationDescription,
+	NotificationTitle,
+} from "../c3-notification-provider/c3-notification-container"
+import { C3NotificationContext } from "../c3-notification-provider/c3-notification-provider"
+import C3NavigationSideBar from "./c3-navigation-sidebar"
+import { useNotificationSidebarState } from "./c3-sidebar-state-provider"
+const PanelHeader = styled.div`
 	background: var(--cds-layer-01);
 	box-shadow: inset 0px -1px 0px var(--cds-border-subtle-01);
 	width: 100%;
@@ -17,95 +20,146 @@ const PanelHeader = styled.div `
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-`;
-const PanelTitle = styled.span `
+`
+const PanelTitle = styled.span`
 	color: var(--cds-text-primary);
 	font-size: var(--cds-body-01-font-size);
 	font-weight: var(--cds-body-01-font-weight);
 	line-height: var(--cds-body-01-line-height);
 	letter-spacing: var(--cds-body-01-letter-spacing);
-`;
-const DismissAllButton = styled(Button) `
+`
+const DismissAllButton = styled(Button)`
 	font-size: var(--cds-helper-text-01-font-size);
 	font-weight: var(--cds-helper-text-01-font-weight);
 	line-height: var(--cds-helper-text-01-line-height);
 	letter-spacing: var(--cds-helper-text-01-letter-spacing);
-`;
-const EmptyState = styled.div `
+`
+const EmptyState = styled.div`
 	padding: 16px;
-`;
-const EmptyStateTitle = styled(NotificationTitle) `
+`
+const EmptyStateTitle = styled(NotificationTitle)`
 	margin-top: 24px;
-`;
-const EmptyStateDescription = styled(NotificationDescription) `
+`
+const EmptyStateDescription = styled(NotificationDescription)`
 	color: var(--cds-text-secondary);
 	margin-top: 8px;
-`;
+`
 export const C3NotificationSidebar = ({ sideBar }) => {
-    const { onLinkClick } = sideBar;
-    const { notifications, markAsRead, dismiss, markAllAsRead, dismissAll, analytics, enabled, } = useContext(C3NotificationContext);
-    const [unreadNotifications, setUnreadNotifications] = useState([]);
-    const hasUnreadNotifications = notifications.some(({ state }) => state === "new");
-    const { isOpen } = useNotificationSidebarState();
-    const notificationsRef = useRef();
-    notificationsRef.current = notifications;
-    const markAllAsReadSidebar = () => {
-        const newNotifications = notificationsRef.current?.filter((notification) => notification.state === "new");
-        if (newNotifications)
-            markAllAsRead(newNotifications);
-    };
-    const dismissAllSidebar = () => dismissAll(notifications);
-    const beforeOpening = () => {
-        // remember new notifications, so the dots can be displayed
-        if (notificationsRef.current)
-            setUnreadNotifications(notificationsRef.current
-                .filter(({ state }) => state === "new")
-                .map(({ uuid }) => uuid));
-        markAllAsReadSidebar();
-        if (enabled && analytics) {
-            analytics("notification-panel-opened");
-        }
-    };
-    const afterClosing = () => {
-        markAllAsReadSidebar();
-        setUnreadNotifications([]);
-    };
-    const sortNotificationsDescending = (a, b) => {
-        if (new Date(a.timestamp) > new Date(b.timestamp))
-            return -1;
-        return 0;
-    };
-    useEffect(() => {
-        // mark notifications as read on unmount
-        return () => {
-            if (isOpen)
-                markAllAsReadSidebar();
-        };
-    }, []);
-    return (React.createElement(C3NavigationSideBar, { sideBar: {
-            ...sideBar,
-            ariaLabel: sideBar.ariaLabel || "Notification Sidebar",
-            callbacks: { beforeOpening, afterClosing },
-        }, icon: hasUnreadNotifications ? (React.createElement(C3NotificationsUnreadIcon, { size: 20 })) : (React.createElement(NotificationIcon, { size: 20, label: "Notifications" })) },
-        React.createElement(PanelHeader, null,
-            React.createElement(PanelTitle, null, "Notifications"),
-            notifications.length > 0 && (
-            // eslint-disable-next-line
-            // @ts-ignore
-            React.createElement(DismissAllButton, { kind: "ghost", size: "sm", onClick: dismissAllSidebar }, "Dismiss all"))),
-        notifications.length > 0 ? (notifications.sort(sortNotificationsDescending).map((notification) => (React.createElement(C3NotificationContainer, { key: notification.uuid, onRead: () => {
-                if (notification.state === "new") {
-                    markAsRead(notification);
-                }
-            }, onDismiss: () => dismiss(notification), originalOnLinkClick: onLinkClick, onLinkClick: () => {
-                if (enabled && analytics) {
-                    analytics("notification-clicked-cta", notification.meta?.identifier);
-                }
-                if (onLinkClick) {
-                    onLinkClick(notification.meta);
-                }
-            }, unread: unreadNotifications.some((id) => id === notification.uuid), ...notification })))) : (React.createElement(EmptyState, null,
-            React.createElement(C3BellIcon, { size: 56 }),
-            React.createElement(EmptyStateTitle, null, "No notifications"),
-            React.createElement(EmptyStateDescription, null, "New updates regarding your processes, clusters and more will appear here.")))));
-};
+	const { onLinkClick } = sideBar
+	const {
+		notifications,
+		markAsRead,
+		dismiss,
+		markAllAsRead,
+		dismissAll,
+		analytics,
+		enabled,
+	} = useContext(C3NotificationContext)
+	const [unreadNotifications, setUnreadNotifications] = useState([])
+	const hasUnreadNotifications = notifications.some(
+		({ state }) => state === "new",
+	)
+	const { isOpen } = useNotificationSidebarState()
+	const notificationsRef = useRef()
+	notificationsRef.current = notifications
+	const markAllAsReadSidebar = () => {
+		const newNotifications = notificationsRef.current?.filter(
+			(notification) => notification.state === "new",
+		)
+		if (newNotifications) markAllAsRead(newNotifications)
+	}
+	const dismissAllSidebar = () => dismissAll(notifications)
+	const beforeOpening = () => {
+		// remember new notifications, so the dots can be displayed
+		if (notificationsRef.current)
+			setUnreadNotifications(
+				notificationsRef.current
+					.filter(({ state }) => state === "new")
+					.map(({ uuid }) => uuid),
+			)
+		markAllAsReadSidebar()
+		if (enabled && analytics) {
+			analytics("notification-panel-opened")
+		}
+	}
+	const afterClosing = () => {
+		markAllAsReadSidebar()
+		setUnreadNotifications([])
+	}
+	const sortNotificationsDescending = (a, b) => {
+		if (new Date(a.timestamp) > new Date(b.timestamp)) return -1
+		return 0
+	}
+	useEffect(() => {
+		// mark notifications as read on unmount
+		return () => {
+			if (isOpen) markAllAsReadSidebar()
+		}
+	}, [])
+	return React.createElement(
+		C3NavigationSideBar,
+		{
+			sideBar: {
+				...sideBar,
+				ariaLabel: sideBar.ariaLabel || "Notification Sidebar",
+				callbacks: { beforeOpening, afterClosing },
+			},
+			icon: hasUnreadNotifications
+				? React.createElement(C3NotificationsUnreadIcon, { size: 20 })
+				: React.createElement(NotificationIcon, {
+						size: 20,
+						label: "Notifications",
+				  }),
+		},
+		React.createElement(
+			PanelHeader,
+			null,
+			React.createElement(PanelTitle, null, "Notifications"),
+			notifications.length > 0 &&
+				// eslint-disable-next-line
+				// @ts-ignore
+				React.createElement(
+					DismissAllButton,
+					{ kind: "ghost", size: "sm", onClick: dismissAllSidebar },
+					"Dismiss all",
+				),
+		),
+		notifications.length > 0
+			? notifications.sort(sortNotificationsDescending).map((notification) =>
+					React.createElement(C3NotificationContainer, {
+						key: notification.uuid,
+						onRead: () => {
+							if (notification.state === "new") {
+								markAsRead(notification)
+							}
+						},
+						onDismiss: () => dismiss(notification),
+						originalOnLinkClick: onLinkClick,
+						onLinkClick: () => {
+							if (enabled && analytics) {
+								analytics(
+									"notification-clicked-cta",
+									notification.meta?.identifier,
+								)
+							}
+							if (onLinkClick) {
+								onLinkClick(notification.meta)
+							}
+						},
+						unread: unreadNotifications.some((id) => id === notification.uuid),
+						...notification,
+					}),
+			  )
+			: React.createElement(
+					EmptyState,
+					null,
+					React.createElement(C3BellIcon, { size: 56 }),
+					React.createElement(EmptyStateTitle, null, "No notifications"),
+					React.createElement(
+						EmptyStateDescription,
+						null,
+						"New updates regarding your processes, clusters and more will appear here.",
+					),
+			  ),
+	)
+}

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

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