@camunda/camunda-composite-components 0.0.41 → 0.0.42

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

@@ -1,107 +1,151 @@
-import React, { useState } from "react";
-import styled from "styled-components";
-import { Button, Link, Tile } from "@carbon/react";
-import { Close } from "@carbon/react/icons";
-const NotificationTile = styled(Tile) `
+import React, { useState } from "react"
+import styled from "styled-components"
+import { Button, Link, Tile } from "@carbon/react"
+import { Close } from "@carbon/react/icons"
+const NotificationTile = styled(Tile)`
 	box-shadow: inset 0px -1px 0px var(--cds-border-subtle-01);
-`;
-const CloseButton = styled(Button) `
+`
+const CloseButton = styled(Button)`
 	margin-right: -1rem;
 	visibility: ${({ $show }) => ($show ? "visible" : "hidden")};
-`;
-const UnreadNotificationHeader = styled.div `
+`
+const UnreadNotificationHeader = styled.div`
 	display: flex;
 	align-items: center;
 	width: 100%;
-`;
-const Dot = styled.div `
+`
+const Dot = styled.div`
 	background: var(--cds-interactive);
 	width: 5px;
 	height: 5px;
 	border-radius: 50%;
 	margin-left: -9px;
 	margin-right: 4px;
-`;
-const Timestamp = styled.p `
+`
+const Timestamp = styled.p`
 	color: var(--cds-text-helper);
 	font-size: var(--cds-label-01-font-size);
 	font-weight: var(--cds-label-01-font-weight);
 	line-height: var(--cds-label-01-line-height);
 	letter-spacing: var(--cds-label-01-letter-spacing);
-`;
-const NotificationHeader = styled.div `
+`
+const NotificationHeader = styled.div`
 	width: 100%;
 	min-height: 2rem;
 	display: flex;
 	align-items: flex-end;
 	justify-content: space-between;
 	margin-top: -1rem;
-`;
-export const NotificationTitle = styled.p `
+`
+export const NotificationTitle = styled.p`
 	color: var(--cds-text-primary);
 	font-size: var(--cds-heading-compact-01-font-size);
 	font-weight: var(--cds-heading-compact-01-font-weight);
 	line-height: var(--cds-heading-compact-01-line-height);
 	letter-spacing: var(--cds-heading-compact-01-letter-spacing);
 	margin-top: var(--cds-spacing-01);
-`;
-export const NotificationDescription = styled.p `
+`
+export const NotificationDescription = styled.p`
 	color: var(--cds-text-primary);
 	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);
 	margin-top: var(--cds-spacing-01);
-`;
-export const LinkContainer = styled.div `
+`
+export const LinkContainer = styled.div`
 	margin-top: 0.5rem;
-`;
+`
 const getReadableTimestamp = (timestamp) => {
-    const date = new Date(timestamp);
-    // eslint-disable-next-line
-    // @ts-ignore
-    const minutesAgo = Math.floor(Math.abs(new Date() - date) / 1000 / 60);
-    if (minutesAgo === 0) {
-        return "New";
-    }
-    if (minutesAgo < 60) {
-        return `${minutesAgo}min ago`;
-    }
-    const hoursAgo = Math.floor(minutesAgo / 60);
-    if (hoursAgo < 24) {
-        return `${hoursAgo}hr ago`;
-    }
-    return date.toDateString();
-};
-const C3NotificationContainer = ({ description, state, timestamp, title, onDismiss, meta, onLinkClick, originalOnLinkClick, unread = false, }) => {
-    const [isHovering, setIsHovering] = useState(false);
-    const dismissNotification = (e) => {
-        e.stopPropagation();
-        onDismiss();
-    };
-    const handleLinkClick = (event) => {
-        if (originalOnLinkClick && onLinkClick) {
-            event.preventDefault();
-            onLinkClick(meta);
-            return false;
-        }
-        return true;
-    };
-    return (React.createElement(NotificationTile, { onMouseEnter: () => {
-            setIsHovering(true);
-        }, onMouseLeave: () => {
-            setIsHovering(false);
-        } },
-        React.createElement(UnreadNotificationHeader, null,
-            (state === "new" || unread) && React.createElement(Dot, null),
-            React.createElement(NotificationHeader, null,
-                React.createElement(Timestamp, null, getReadableTimestamp(timestamp)),
-                // eslint-disable-next-line
-                // @ts-ignore
-                React.createElement(CloseButton, { kind: "ghost", hasIconOnly: true, iconDescription: "Dismiss", align: "bottom-right", renderIcon: Close, onClick: dismissNotification, size: "sm", "$show": isHovering }))),
-        React.createElement(NotificationTitle, null, title),
-        React.createElement(NotificationDescription, null, description),
-        meta && (React.createElement(LinkContainer, null,
-            React.createElement(Link, { href: meta.href, onClick: handleLinkClick, visited: true, style: { fontSize: "var(--cds-helper-text-01-font-size)" } }, meta.label)))));
-};
-export default C3NotificationContainer;
+	const date = new Date(timestamp)
+	// eslint-disable-next-line
+	// @ts-ignore
+	const minutesAgo = Math.floor(Math.abs(new Date() - date) / 1000 / 60)
+	if (minutesAgo === 0) {
+		return "New"
+	}
+	if (minutesAgo < 60) {
+		return `${minutesAgo}min ago`
+	}
+	const hoursAgo = Math.floor(minutesAgo / 60)
+	if (hoursAgo < 24) {
+		return `${hoursAgo}hr ago`
+	}
+	return date.toDateString()
+}
+const C3NotificationContainer = ({
+	description,
+	state,
+	timestamp,
+	title,
+	onDismiss,
+	meta,
+	onLinkClick,
+	originalOnLinkClick,
+	unread = false,
+}) => {
+	const [isHovering, setIsHovering] = useState(false)
+	const dismissNotification = (e) => {
+		e.stopPropagation()
+		onDismiss()
+	}
+	const handleLinkClick = (event) => {
+		if (originalOnLinkClick && onLinkClick) {
+			event.preventDefault()
+			onLinkClick(meta)
+			return false
+		}
+		return true
+	}
+	return React.createElement(
+		NotificationTile,
+		{
+			onMouseEnter: () => {
+				setIsHovering(true)
+			},
+			onMouseLeave: () => {
+				setIsHovering(false)
+			},
+		},
+		React.createElement(
+			UnreadNotificationHeader,
+			null,
+			(state === "new" || unread) && React.createElement(Dot, null),
+			React.createElement(
+				NotificationHeader,
+				null,
+				React.createElement(Timestamp, null, getReadableTimestamp(timestamp)),
+				// eslint-disable-next-line
+				// @ts-ignore
+				React.createElement(CloseButton, {
+					kind: "ghost",
+					hasIconOnly: true,
+					iconDescription: "Dismiss",
+					align: "bottom-right",
+					renderIcon: Close,
+					onClick: dismissNotification,
+					size: "sm",
+					$show: isHovering,
+				}),
+			),
+		),
+		React.createElement(NotificationTitle, null, title),
+		React.createElement(NotificationDescription, null, description),
+		meta &&
+			React.createElement(
+				LinkContainer,
+				null,
+				React.createElement(
+					Link,
+					{
+						href: meta.href,
+						onClick: handleLinkClick,
+						visited: true,
+						style: { fontSize: "var(--cds-helper-text-01-font-size)" },
+					},
+					meta.label,
+				),
+			),
+	)
+}
+export default C3NotificationContainer

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

@@ -1,30 +1,32 @@
-import React, { ComponentType, FC, ReactNode } from "react";
-import { AnalyticsEvent, Notification } from "../../../api/notifications";
+import React, { ComponentType, FC, ReactNode } from "react"
+import { AnalyticsEvent, Notification } from "../../../api/notifications"
 export declare type LinkProps = {
-    label?: string;
-    href?: string;
-    entity?: {
-        id: string;
-        type: string;
-    };
-    parentEntity?: {
-        id: string;
-        type: string;
-    };
-};
+	label?: string
+	href?: string
+	entity?: {
+		id: string
+		type: string
+	}
+	parentEntity?: {
+		id: string
+		type: string
+	}
+}
 export declare type C3NotificationContextValue = {
-    enabled: boolean;
-    notifications: Notification[];
-    markAsRead: (notification: Notification) => void;
-    markAllAsRead: (notifications: Notification[]) => void;
-    dismiss: (notification: Notification) => void;
-    dismissAll: (notifications: Notification[]) => void;
-    analytics: (event: AnalyticsEvent, id?: string) => void;
-};
-export declare const C3NotificationContext: React.Context<C3NotificationContextValue>;
+	enabled: boolean
+	notifications: Notification[]
+	markAsRead: (notification: Notification) => void
+	markAllAsRead: (notifications: Notification[]) => void
+	dismiss: (notification: Notification) => void
+	dismissAll: (notifications: Notification[]) => void
+	analytics: (event: AnalyticsEvent, id?: string) => void
+}
+export declare const C3NotificationContext: React.Context<C3NotificationContextValue>
 export declare type C3NotificationProviderProps = {
-    children?: ReactNode;
-};
-declare const C3NotificationProvider: FC<C3NotificationProviderProps>;
-export declare function withNotifications<P>(Component: ComponentType<P>): ComponentType<P>;
-export default C3NotificationProvider;
+	children?: ReactNode
+}
+declare const C3NotificationProvider: FC<C3NotificationProviderProps>
+export declare function withNotifications<P>(
+	Component: ComponentType<P>,
+): ComponentType<P>
+export default C3NotificationProvider

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

@@ -1,93 +1,121 @@
-import React, { useContext, useEffect, useState, } from "react";
-import { NotificationService, } from "../../../api/notifications";
-import { C3UserConfigurationContext } from "../../c3-user-configuration/c3-user-configuration-provider";
+import React, { useContext, useEffect, useState } from "react"
+import { NotificationService } from "../../../api/notifications"
+import { C3UserConfigurationContext } from "../../c3-user-configuration/c3-user-configuration-provider"
 export const C3NotificationContext = React.createContext({
-    enabled: false,
-    notifications: [],
-    markAsRead: () => undefined,
-    markAllAsRead: () => undefined,
-    dismiss: () => undefined,
-    dismissAll: () => undefined,
-    analytics: () => undefined,
-});
-const C3NotificationProvider = ({ children, }) => {
-    const [notifications, setNotifications] = useState([]);
-    const [isFetched, setFetched] = useState(false);
-    const [activeOrganizationId, setActiveOrganizationId] = useState("");
-    const [isEventStreamAvailable, setEventStreamAvailable] = useState(false);
-    const config = useContext(C3UserConfigurationContext);
-    const enabled = !!config;
-    // if the organization changes, we need to reset the state
-    if (enabled && config.activeOrganizationId !== activeOrganizationId) {
-        setActiveOrganizationId(config.activeOrganizationId);
-        setFetched(false);
-        setNotifications([]);
-    }
-    if (enabled && !isFetched && config.userToken) {
-        NotificationService.getNotifications(config).then((response) => {
-            setNotifications(response);
-            setFetched(true);
-        });
-    }
-    if (enabled && isFetched && !isEventStreamAvailable) {
-        setEventStreamAvailable(true);
-        NotificationService.notificationsStream(config, (notification) => {
-            if (notification.orgId === activeOrganizationId) {
-                setNotifications((allNotifications) => NotificationService.updateNotifications(allNotifications, notification));
-            }
-        });
-    }
-    useEffect(() => {
-        if (enabled && config.userToken) {
-            NotificationService.getNotifications(config).then((response) => {
-                setNotifications(response);
-                setFetched(true);
-            });
-        }
-    }, [config?.userToken]);
-    const changeState = (newState, { uuid, state }) => {
-        if (enabled && state !== newState) {
-            setNotifications((allNotifications) => NotificationService.updateNotificationState(allNotifications, uuid, newState));
-            NotificationService.changeState(config, uuid, newState);
-        }
-    };
-    const changeManyStates = (newState, notifications) => {
-        if (enabled) {
-            const notificationIds = notifications
-                .filter((notification) => notification.state !== newState)
-                .map((notification) => notification.uuid);
-            if (notificationIds.length > 0) {
-                setNotifications((allNotifications) => NotificationService.updateNotificationStates(allNotifications, notificationIds, newState));
-                NotificationService.changeManyStates(config, notificationIds, newState);
-            }
-        }
-    };
-    const markAsRead = (notification) => changeState("read", notification);
-    const markAllAsRead = (notifications) => changeManyStates("read", notifications);
-    const dismiss = (notification) => changeState("dismiss", notification);
-    const dismissAll = (notifications) => changeManyStates("dismiss", notifications);
-    const analytics = (event, id) => {
-        if (enabled && config.userToken) {
-            NotificationService.sendAnalyticsEvent(config, {
-                event,
-                id,
-            });
-        }
-    };
-    return (React.createElement(C3NotificationContext.Provider, { value: {
-            enabled,
-            notifications,
-            markAsRead,
-            markAllAsRead,
-            dismiss,
-            dismissAll,
-            analytics,
-        } }, children));
-};
+	enabled: false,
+	notifications: [],
+	markAsRead: () => undefined,
+	markAllAsRead: () => undefined,
+	dismiss: () => undefined,
+	dismissAll: () => undefined,
+	analytics: () => undefined,
+})
+const C3NotificationProvider = ({ children }) => {
+	const [notifications, setNotifications] = useState([])
+	const [isFetched, setFetched] = useState(false)
+	const [activeOrganizationId, setActiveOrganizationId] = useState("")
+	const [isEventStreamAvailable, setEventStreamAvailable] = useState(false)
+	const config = useContext(C3UserConfigurationContext)
+	const enabled = !!config
+	// if the organization changes, we need to reset the state
+	if (enabled && config.activeOrganizationId !== activeOrganizationId) {
+		setActiveOrganizationId(config.activeOrganizationId)
+		setFetched(false)
+		setNotifications([])
+	}
+	if (enabled && !isFetched && config.userToken) {
+		NotificationService.getNotifications(config).then((response) => {
+			setNotifications(response)
+			setFetched(true)
+		})
+	}
+	if (enabled && isFetched && !isEventStreamAvailable) {
+		setEventStreamAvailable(true)
+		NotificationService.notificationsStream(config, (notification) => {
+			if (notification.orgId === activeOrganizationId) {
+				setNotifications((allNotifications) =>
+					NotificationService.updateNotifications(
+						allNotifications,
+						notification,
+					),
+				)
+			}
+		})
+	}
+	useEffect(() => {
+		if (enabled && config.userToken) {
+			NotificationService.getNotifications(config).then((response) => {
+				setNotifications(response)
+				setFetched(true)
+			})
+		}
+	}, [config?.userToken])
+	const changeState = (newState, { uuid, state }) => {
+		if (enabled && state !== newState) {
+			setNotifications((allNotifications) =>
+				NotificationService.updateNotificationState(
+					allNotifications,
+					uuid,
+					newState,
+				),
+			)
+			NotificationService.changeState(config, uuid, newState)
+		}
+	}
+	const changeManyStates = (newState, notifications) => {
+		if (enabled) {
+			const notificationIds = notifications
+				.filter((notification) => notification.state !== newState)
+				.map((notification) => notification.uuid)
+			if (notificationIds.length > 0) {
+				setNotifications((allNotifications) =>
+					NotificationService.updateNotificationStates(
+						allNotifications,
+						notificationIds,
+						newState,
+					),
+				)
+				NotificationService.changeManyStates(config, notificationIds, newState)
+			}
+		}
+	}
+	const markAsRead = (notification) => changeState("read", notification)
+	const markAllAsRead = (notifications) =>
+		changeManyStates("read", notifications)
+	const dismiss = (notification) => changeState("dismiss", notification)
+	const dismissAll = (notifications) =>
+		changeManyStates("dismiss", notifications)
+	const analytics = (event, id) => {
+		if (enabled && config.userToken) {
+			NotificationService.sendAnalyticsEvent(config, {
+				event,
+				id,
+			})
+		}
+	}
+	return React.createElement(
+		C3NotificationContext.Provider,
+		{
+			value: {
+				enabled,
+				notifications,
+				markAsRead,
+				markAllAsRead,
+				dismiss,
+				dismissAll,
+				analytics,
+			},
+		},
+		children,
+	)
+}
 export function withNotifications(Component) {
-    return function WithNamespace(props) {
-        return (React.createElement(C3NotificationProvider, null,
-            React.createElement(Component, { ...props })));
-    };
+	return function WithNamespace(props) {
+		return React.createElement(
+			C3NotificationProvider,
+			null,
+			React.createElement(Component, { ...props }),
+		)
+	}
 }
-export default C3NotificationProvider;
+export default C3NotificationProvider

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

@@ -1,3 +1,5 @@
-export declare function useOnClickOutside(handler: (e: Event) => void): ((node: unknown) => void)[];
-export declare function executeMediaQuery(mediaQuery: string): MediaQueryList;
-export declare function useMediaQuery(mediaQuery: string): boolean;
+export declare function useOnClickOutside(
+	handler: (e: Event) => void,
+): ((node: unknown) => void)[]
+export declare function executeMediaQuery(mediaQuery: string): MediaQueryList
+export declare function useMediaQuery(mediaQuery: string): boolean

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

@@ -1,55 +1,59 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react"
 export function useOnClickOutside(handler) {
-    const panelRef = useRef(null);
-    const iconRef = useRef(null);
-    const listener = (event) => {
-        if (!panelRef.current ||
-            !iconRef.current ||
-            (event.target instanceof Node &&
-                (panelRef.current.contains(event.target) ||
-                    iconRef.current.contains(event.target)))) {
-            return;
-        }
-        handler(event);
-    };
-    const setListener = () => {
-        document.addEventListener("mousedown", listener);
-        document.addEventListener("touchstart", listener);
-    };
-    useEffect(() => {
-        return () => {
-            document.removeEventListener("mousedown", listener);
-            document.removeEventListener("touchstart", listener);
-        };
-    }, []);
-    const setPanelRef = useCallback((node) => {
-        if (node && node instanceof HTMLElement) {
-            panelRef.current = node;
-            setListener();
-        }
-    }, []);
-    const setIconRef = useCallback((node) => {
-        if (node && node instanceof HTMLElement) {
-            iconRef.current = node;
-            setListener();
-        }
-    }, []);
-    return [setPanelRef, setIconRef];
+	const panelRef = useRef(null)
+	const iconRef = useRef(null)
+	const listener = (event) => {
+		if (
+			!panelRef.current ||
+			!iconRef.current ||
+			(event.target instanceof Node &&
+				(panelRef.current.contains(event.target) ||
+					iconRef.current.contains(event.target)))
+		) {
+			return
+		}
+		handler(event)
+	}
+	const setListener = () => {
+		document.addEventListener("mousedown", listener)
+		document.addEventListener("touchstart", listener)
+	}
+	useEffect(() => {
+		return () => {
+			document.removeEventListener("mousedown", listener)
+			document.removeEventListener("touchstart", listener)
+		}
+	}, [])
+	const setPanelRef = useCallback((node) => {
+		if (node && node instanceof HTMLElement) {
+			panelRef.current = node
+			setListener()
+		}
+	}, [])
+	const setIconRef = useCallback((node) => {
+		if (node && node instanceof HTMLElement) {
+			iconRef.current = node
+			setListener()
+		}
+	}, [])
+	return [setPanelRef, setIconRef]
 }
 export function executeMediaQuery(mediaQuery) {
-    return window.matchMedia(mediaQuery);
+	return window.matchMedia(mediaQuery)
 }
 export function useMediaQuery(mediaQuery) {
-    const [isMatched, setIsMatched] = useState(executeMediaQuery(mediaQuery).matches);
-    useEffect(() => {
-        const query = executeMediaQuery(mediaQuery);
-        const listener = (event) => {
-            setIsMatched(event.matches);
-        };
-        query.addEventListener("change", listener);
-        return () => {
-            query.removeEventListener("change", listener);
-        };
-    }, []);
-    return isMatched;
+	const [isMatched, setIsMatched] = useState(
+		executeMediaQuery(mediaQuery).matches,
+	)
+	useEffect(() => {
+		const query = executeMediaQuery(mediaQuery)
+		const listener = (event) => {
+			setIsMatched(event.matches)
+		}
+		query.addEventListener("change", listener)
+		return () => {
+			query.removeEventListener("change", listener)
+		}
+	}, [])
+	return isMatched
 }

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

@@ -1,3 +1,5 @@
 /// <reference types="react" />
-declare const _default: import("react").ComponentType<import("./c3-navigation.types").C3NavigationProps>;
-export default _default;
+declare const _default: import("react").ComponentType<
+	import("./c3-navigation.types").C3NavigationProps
+>
+export default _default

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

@@ -1,3 +1,3 @@
-import { C3Navigation } from "./c3-navigation";
-import { withNotifications } from "./c3-notification-provider/c3-notification-provider";
-export default withNotifications(C3Navigation);
+import { C3Navigation } from "./c3-navigation"
+import { withNotifications } from "./c3-notification-provider/c3-notification-provider"
+export default withNotifications(C3Navigation)