@camunda/camunda-composite-components 0.0.31-rc1 → 0.0.31-rc2

package/lib/esm/api/api.d.ts

@@ -0,0 +1,22 @@
+import { Stage } from "./endpoints.const";
+export declare class HttpError extends Error {
+    status: number;
+    constructor(message: string, status: number);
+}
+export interface RequestPayload {
+    base?: "notifications";
+    stage?: Stage;
+    url: string;
+    method: "get" | "post" | "put" | "delete" | "patch";
+    headers?: {
+        [key: string]: string;
+    };
+    type?: "json" | "text" | "none";
+    responseType?: "json" | "text" | "none";
+    camundaAuth?: {
+        token: string;
+        refreshTokenMethod: () => Promise<string>;
+    };
+    body?: any;
+}
+export declare function request(payload: RequestPayload): Promise<any>;

package/lib/esm/api/api.js

@@ -0,0 +1,66 @@
+import { getEndpoint, NOTIFICATIONS } from "./endpoints.const";
+import { JWTUtils } from "./jwt.utils";
+export class HttpError extends Error {
+    status;
+    constructor(message, status) {
+        super(message);
+        this.status = status;
+    }
+}
+export async function request(payload) {
+    const headers = {};
+    if (payload.camundaAuth) {
+        if (JWTUtils.isExpired(payload.camundaAuth.token)) {
+            const newToken = await payload.camundaAuth.refreshTokenMethod();
+            headers.Authorization = `Bearer ${newToken}`;
+        }
+        else {
+            headers.Authorization = `Bearer ${payload.camundaAuth.token}`;
+        }
+    }
+    const type = payload.type ?? "json";
+    if (type) {
+        switch (type) {
+            case "json":
+                headers["Content-Type"] = "application/json";
+                break;
+            case "text":
+                headers["Content-Type"] = "text/plain";
+                break;
+        }
+    }
+    const body = payload.body ? JSON.stringify(payload.body) : undefined;
+    let base;
+    if (payload.base && payload.stage) {
+        switch (payload.base) {
+            case "notifications":
+                base = getEndpoint(payload.stage, NOTIFICATIONS);
+                break;
+        }
+    }
+    const url = base ? `${base}/${payload.url}` : payload.url;
+    const response = await fetch(url, {
+        method: payload.method.toUpperCase(),
+        headers,
+        body,
+    });
+    let success = true;
+    if (response.status >= 400 && response.status < 500) {
+        success = false;
+    }
+    if (response.status >= 500) {
+        success = false;
+    }
+    if (!success) {
+        throw new HttpError(response.statusText, response.status);
+    }
+    const responseType = payload.responseType ?? type;
+    switch (responseType) {
+        case "json":
+            return response.json();
+        case "text":
+            return response.text();
+        default:
+            return response;
+    }
+}

package/lib/esm/api/endpoints.const.d.ts

@@ -0,0 +1,9 @@
+export interface Endpoint {
+    id: string;
+    dev: string;
+    int: string;
+    prod: string;
+}
+export declare const NOTIFICATIONS: Endpoint;
+export declare type Stage = "dev" | "int" | "prod";
+export declare function getEndpoint(stage: Stage, endpoint: Endpoint): string;

package/lib/esm/api/endpoints.const.js

@@ -0,0 +1,18 @@
+export const NOTIFICATIONS = {
+    id: "notifications",
+    dev: "https://notifications.cloud.dev.ultrawombat.com",
+    int: "https://notifications.cloud.ultrawombat.com",
+    prod: "https://notifications.cloud.camunda.io",
+};
+export function getEndpoint(stage, endpoint) {
+    switch (stage) {
+        case "dev":
+            return endpoint.dev;
+        case "int":
+            return endpoint.int;
+        case "prod":
+            return endpoint.prod;
+        default:
+            throw new Error(`Unknown stage: ${stage}`);
+    }
+}

package/lib/esm/api/jwt.utils.d.ts

@@ -0,0 +1,5 @@
+export declare class JWTUtils {
+    static decode(token: string): any;
+    static getExpiration(token: string): number;
+    static isExpired(token: string): boolean;
+}

package/lib/esm/api/jwt.utils.js

@@ -0,0 +1,23 @@
+export class JWTUtils {
+    static decode(token) {
+        const base64Url = token.split(".")[1];
+        const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+        const jsonPayload = decodeURIComponent(window
+            .atob(base64)
+            .split("")
+            .map(function (c) {
+            return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+        })
+            .join(""));
+        return JSON.parse(jsonPayload);
+    }
+    static getExpiration(token) {
+        const decoded = JWTUtils.decode(token);
+        return decoded.exp;
+    }
+    static isExpired(token) {
+        const expiration = JWTUtils.getExpiration(token);
+        const now = new Date().getTime() / 1000;
+        return expiration < now;
+    }
+}

package/lib/esm/api/notifications.d.ts

@@ -0,0 +1,39 @@
+import { C3NotificationsProps } from "../components/c3-navigation/c3-navigation.types";
+export interface Notification {
+    uuid: string;
+    userId?: string;
+    orgId?: string;
+    timestamp: number;
+    source: string;
+    type: string;
+    title: string;
+    description: string;
+    state: string;
+    meta?: {
+        identifier?: string;
+        href?: string;
+        label?: string;
+        entity?: {
+            id: string;
+            type: string;
+        };
+        parentEntity?: {
+            id: string;
+            type: string;
+        };
+    };
+}
+export declare type AnalyticsEvent = "notification-panel-opened" | "notification-clicked-cta";
+export declare class NotificationService {
+    static getNotifications(options: C3NotificationsProps): Promise<Notification[]>;
+    static sendAnalyticsEvent(options: C3NotificationsProps, eventOptions: {
+        event: AnalyticsEvent;
+        id?: string;
+    }): void;
+    static changeState(options: C3NotificationsProps, notificationId: string, operation: "read" | "dismiss"): void;
+    static changeManyStates(options: C3NotificationsProps, notificationIds: string[], operation: "read" | "dismiss"): void;
+    static notificationsStream(options: C3NotificationsProps, handler: (notification: Notification) => void): void;
+    static updateNotifications(allNotifications: Notification[], newNotification: Notification): Notification[];
+    static updateNotificationState(allNotifications: Notification[], notificationId: string, newState: "read" | "dismiss"): Notification[];
+    static updateNotificationStates(allNotifications: Notification[], notificationIds: string[], newState: "read" | "dismiss"): Notification[];
+}

package/lib/esm/api/notifications.js

@@ -0,0 +1,153 @@
+import { EventSourcePolyfill } from "event-source-polyfill";
+import { request } from "./api";
+import { getEndpoint, NOTIFICATIONS } from "./endpoints.const";
+export class NotificationService {
+    static async getNotifications(options) {
+        let notifications = [];
+        try {
+            notifications = await request({
+                method: "get",
+                base: "notifications",
+                stage: options.stage,
+                camundaAuth: {
+                    token: options.userToken,
+                    refreshTokenMethod: options.getNewUserToken,
+                },
+                url: `notifications/orgs/${options.activeOrganizationId}`,
+            });
+            return notifications;
+        }
+        catch (error) {
+            console.error(error);
+        }
+        return notifications;
+    }
+    static sendAnalyticsEvent(options, eventOptions) {
+        request({
+            method: "post",
+            base: "notifications",
+            stage: options.stage,
+            camundaAuth: {
+                token: options.userToken,
+                refreshTokenMethod: options.getNewUserToken,
+            },
+            url: `analytics/${options.activeOrganizationId}/${eventOptions.event}`,
+            body: {
+                id: eventOptions.id,
+            },
+            responseType: "text",
+        })
+            .then(() => {
+            // do nothing
+        })
+            .catch((error) => {
+            console.error(error);
+        });
+    }
+    static changeState(options, notificationId, operation) {
+        request({
+            method: "patch",
+            base: "notifications",
+            stage: options.stage,
+            camundaAuth: {
+                token: options.userToken,
+                refreshTokenMethod: options.getNewUserToken,
+            },
+            url: `notifications/${notificationId}/${operation}`,
+        })
+            .then(() => {
+            // do nothing
+        })
+            .catch((error) => {
+            console.error(error);
+        });
+    }
+    static changeManyStates(options, notificationIds, operation) {
+        if (notificationIds.length === 0) {
+            return;
+        }
+        request({
+            method: "patch",
+            base: "notifications",
+            stage: options.stage,
+            camundaAuth: {
+                token: options.userToken,
+                refreshTokenMethod: options.getNewUserToken,
+            },
+            url: `notifications/batch/state/${operation}`,
+            body: {
+                uuids: notificationIds,
+            },
+        })
+            .then(() => {
+            // do nothing
+        })
+            .catch((error) => {
+            console.error(error);
+        });
+    }
+    static notificationsStream(options, handler) {
+        const source = new EventSourcePolyfill(`${getEndpoint(options.stage, NOTIFICATIONS)}/notifications/events`, {
+            headers: {
+                authorization: `Bearer ${options.userToken}`,
+            },
+            heartbeatTimeout: 1000 * 60 * 60,
+        });
+        source.onmessage = function (event) {
+            try {
+                const notification = JSON.parse(event.data);
+                if (!notification.keepAlive) {
+                    handler(notification);
+                }
+            }
+            catch (error) {
+                console.error(`Failed to handle SSE event`, { error });
+            }
+        };
+    }
+    // updates <allNotifications> with <newNotification>
+    // if <newNotification> is read or new, it will be added to <allNotifications>
+    // if <newNotification> is dismissed, it will be removed from <allNotifications>
+    static updateNotifications(allNotifications, newNotification) {
+        const updatedNotifications = allNotifications
+            .slice()
+            .filter((currentNotification) => currentNotification.uuid !== newNotification.uuid);
+        if (newNotification.state === "read" || newNotification.state === "new") {
+            updatedNotifications.push(newNotification);
+        }
+        updatedNotifications.sort((a, b) => b.timestamp - a.timestamp);
+        return updatedNotifications;
+    }
+    static updateNotificationState(allNotifications, notificationId, newState) {
+        let updatedNotifications = allNotifications.slice();
+        let foundNotification;
+        switch (newState) {
+            case "dismiss":
+                updatedNotifications = updatedNotifications.filter((notification) => notification.uuid !== notificationId);
+                break;
+            case "read":
+                foundNotification = updatedNotifications.find((currentNotification) => currentNotification.uuid === notificationId);
+                if (foundNotification) {
+                    foundNotification.state = newState;
+                }
+                break;
+        }
+        return updatedNotifications;
+    }
+    static updateNotificationStates(allNotifications, notificationIds, newState) {
+        let updatedNotifications = allNotifications.slice();
+        let foundNotifications = [];
+        switch (newState) {
+            case "dismiss":
+                updatedNotifications = updatedNotifications.filter((notification) => !notificationIds.includes(notification.uuid));
+                break;
+            case "read":
+                foundNotifications = updatedNotifications.filter((notification) => notificationIds.includes(notification.uuid));
+                foundNotifications.forEach((foundNotification) => {
+                    foundNotification.state = newState;
+                });
+                break;
+        }
+        return updatedNotifications;
+    }
+}

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

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

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

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { SwitcherDivider } from "@carbon/react";
+import { Help } from "@carbon/react/icons";
+import C3NavigationSideBar from "./c3-navigation-sidebar";
+const C3InfoSidebar = ({ sideBar, }) => {
+    const { version, isOpen, ...sideBarProps } = sideBar;
+    const [isSidebarOpen, setIsSidebarOpen] = useState(isOpen);
+    return (React.createElement(C3NavigationSideBar, { sideBar: {
+            ...sideBarProps,
+            ariaLabel: sideBarProps.ariaLabel || "Info Sidebar",
+            isOpen: isSidebarOpen,
+            setIsOpen: setIsSidebarOpen,
+        }, 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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+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;

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

@@ -0,0 +1,16 @@
+import { Button, SwitcherDivider } from "@carbon/react";
+import React from "react";
+const C3NavigationSidebarElement = (props) => (React.createElement(React.Fragment, null,
+    props.element.preceedingDivider && React.createElement(SwitcherDivider, null),
+    React.createElement(Button, { style: props.index === 0 &&
+            (!("elements" in props.sideBar) || !props.sideBar.elements)
+            ? { marginTop: "1.5rem", whiteSpace: "nowrap" }
+            : { whiteSpace: "nowrap" }, 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 }, props.element.label)));
+export default C3NavigationSidebarElement;

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

@@ -0,0 +1,9 @@
+import { ReactElement, ReactNode } from "react";
+import { C3NavigationSideBarProps } from "./c3-navigation-sidebar.types";
+declare const C3NavigationSideBar: (props: {
+    sideBar: C3NavigationSideBarProps;
+    icon: ReactElement;
+    children?: ReactNode;
+    bottomChildren?: ReactNode;
+}) => JSX.Element;
+export default C3NavigationSideBar;

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

@@ -0,0 +1,38 @@
+import { Button, HeaderGlobalAction, HeaderPanel, Stack, SwitcherDivider, } from "@carbon/react";
+import React from "react";
+import { useOnClickOutside } from "../helpers";
+import C3NavigationSidebarElement from "./c3-navigation-sidebar-element";
+const C3NavigationSideBar = (props) => {
+    const { icon, sideBar, children, bottomChildren } = props;
+    const { isOpen, setIsOpen } = sideBar;
+    const itemTabIndex = isOpen ? undefined : -1;
+    const [panelRef, iconRef] = useOnClickOutside(() => isOpen && setIsOpen(false));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HeaderGlobalAction, { ref: iconRef, "aria-label": `Open ${sideBar.ariaLabel}`, onClick: () => setIsOpen(!isOpen), isActive: isOpen, tooltipAlignment: sideBar.type === "user" ? "end" : "center" }, icon),
+        React.createElement(HeaderPanel, { ref: panelRef, "aria-label": sideBar.ariaLabel, expanded: isOpen, style: {
+                display: "grid",
+                gridAutoFlow: "row",
+                gridAutoRows: "max-content 1fr",
+                overflow: "auto",
+            } },
+            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;

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

@@ -0,0 +1,58 @@
+import { C3NavigationElementProps } from "../c3-navigation.types";
+import { Notification } from "../../../api/notifications";
+export declare type C3NavigationSideBarBaseProps = {
+    ariaLabel?: string;
+    isOpen?: boolean;
+    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?: {
+        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";
+};
+export declare type C3NavigationSideBarProps = {
+    setIsOpen: (isOpen: boolean) => void;
+} & (C3NavigationOrgSideBarProps | C3NavigationInfoSideBarProps | C3NavigationUserSideBarProps | C3NavigationNotificationsSideBarProps | C3NavigationAppBarProps);

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

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

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

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

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

@@ -0,0 +1,110 @@
+import { Button } from "@carbon/react";
+import { Notification as NotificationIcon } from "@carbon/react/icons";
+import React, { useContext, useEffect, 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";
+const PanelHeader = styled.div `
+	background: var(--cds-layer-01);
+	box-shadow: inset 0px -1px 0px var(--cds-border-subtle-01);
+	width: 100%;
+	height: 60px;
+	padding: 24px 16px 13px;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+`;
+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) `
+	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 `
+	padding: 16px;
+`;
+const EmptyStateTitle = styled(NotificationTitle) `
+	margin-top: 24px;
+`;
+const EmptyStateDescription = styled(NotificationDescription) `
+	color: var(--cds-text-secondary);
+	margin-top: 8px;
+`;
+export const C3NotificationSidebar = ({ sideBar }) => {
+    const { isOpen, onLinkClick } = sideBar;
+    const [isSidebarOpen, setIsSidebarOpen] = useState(isOpen);
+    const { notifications, markAsRead, dismiss, markAllAsRead, dismissAll, analytics, enabled, } = useContext(C3NotificationContext);
+    const [unreadNotifications, setUnreadNotifications] = useState([]);
+    const hasUnreadNotifications = notifications.some(({ state }) => state === "new");
+    const markAllAsReadSidebar = () => {
+        const newNotifications = notifications.filter((notification) => notification.state === "new");
+        markAllAsRead(newNotifications);
+    };
+    const dismissAllSidebar = () => dismissAll(notifications);
+    const setIsOpen = (open) => {
+        if (open) {
+            // remember new notifications, so the dots can be displayed
+            setUnreadNotifications(notifications
+                .filter(({ state }) => state === "new")
+                .map(({ uuid }) => uuid));
+            markAllAsReadSidebar();
+            if (enabled && analytics) {
+                analytics("notification-panel-opened");
+            }
+        }
+        setIsSidebarOpen(open);
+        if (!open) {
+            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 (isSidebarOpen)
+                markAllAsReadSidebar();
+        };
+    }, []);
+    return (React.createElement(C3NavigationSideBar, { sideBar: {
+            ...sideBar,
+            ariaLabel: sideBar.ariaLabel || "Notification Sidebar",
+            isOpen: isSidebarOpen,
+            setIsOpen,
+        }, 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), 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

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