@camunda/camunda-composite-components 0.1.1 → 0.1.2

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

@@ -1,121 +1,68 @@
-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`
+`;
+const BottomElements = styled.div `
 	align-self: end;
-`
+`;
 const C3NavigationSideBar = (props) => {
-	const { icon, sideBar, children, version, 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,
-			),
-			version,
-			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
+    const { icon, sideBar, children, version, 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),
+            version,
+            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,75 +1,64 @@
-/// <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"
-		version?: string
-		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";
+    version?: string;
+    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,16 +1,13 @@
-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%;
@@ -20,146 +17,95 @@ 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;