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

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

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import { Button, FormLabel, SwitcherDivider } from "@carbon/react";
+import { Enterprise } from "@carbon/react/icons";
+import C3NavigationSideBar from "./c3-navigation-sidebar";
+const C3OrgSidebar = ({ sideBar }) => {
+    const { customElements, isOpen, ...sideBarProps } = sideBar;
+    const activeOrganization = sideBar.customElements?.activeOrganization;
+    const [isSidebarOpen, setIsSidebarOpen] = useState(isOpen);
+    const itemTabIndex = isSidebarOpen ? undefined : -1;
+    return (React.createElement(C3NavigationSideBar, { sideBar: {
+            ...sideBarProps,
+            ariaLabel: sideBarProps.ariaLabel || "Organization Sidebars",
+            isOpen: isSidebarOpen,
+            setIsOpen: setIsSidebarOpen,
+        }, icon: React.createElement(Enterprise, { size: 20 }) }, activeOrganization && (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: {
+                padding: "1rem",
+                paddingTop: "1.5rem",
+                paddingBottom: ".5rem",
+                display: "grid",
+                gridAutoFlow: "column",
+                gap: ".25rem",
+            } },
+            React.createElement("div", { style: {
+                    overflow: "hidden",
+                    display: "grid",
+                    gap: "4px",
+                } },
+                React.createElement(FormLabel, null, activeOrganization.activeLabel),
+                React.createElement("div", { className: "textPrimary", style: {
+                        height: "20px",
+                        lineHeight: "20px",
+                        fontSize: "14px",
+                        textOverflow: "ellipsis",
+                        overflow: "hidden",
+                        whiteSpace: "nowrap",
+                    }, title: activeOrganization.orgName }, activeOrganization.orgName)),
+            React.createElement(Button, { size: "md", kind: "ghost", key: "org-management", onClick: () => {
+                    activeOrganization.action.onClick();
+                    if (sideBar.closeOnClick !== false) {
+                        setIsSidebarOpen(false);
+                    }
+                }, tabIndex: itemTabIndex }, activeOrganization.action.label)),
+        sideBar.elements && sideBar.elements.length > 0 && (React.createElement(React.Fragment, null,
+            React.createElement(SwitcherDivider, null),
+            React.createElement(FormLabel, { style: {
+                    paddingTop: ".5rem",
+                    paddingLeft: "1rem",
+                    paddingBottom: ".25rem",
+                } }, activeOrganization.otherLabel)))))));
+};
+export default C3OrgSidebar;

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

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

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

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import C3NavigationSideBar from "./c3-navigation-sidebar";
+import { FormLabel, RadioButton, RadioButtonGroup, Stack, SwitcherDivider, Toggle, } from "@carbon/react";
+import { UserAvatar } from "@carbon/react/icons";
+const C3UserSidebar = ({ sideBar }) => {
+    const { customElements, isOpen, ...sideBarProps } = sideBar;
+    const profile = sideBar.customElements?.profile;
+    const themeSelector = sideBar.customElements?.themeSelector;
+    const stageToggle = sideBar.customElements?.stageToggle;
+    const [isSidebarOpen, setIsSidebarOpen] = useState(isOpen);
+    const itemTabIndex = isSidebarOpen ? undefined : -1;
+    return (React.createElement(C3NavigationSideBar, { sideBar: {
+            ...sideBarProps,
+            ariaLabel: sideBarProps.ariaLabel || "User Sidebar",
+            isOpen: isSidebarOpen,
+            setIsOpen: setIsSidebarOpen,
+        }, icon: React.createElement(UserAvatar, { size: 20 }) },
+        profile && (React.createElement("div", { style: {
+                padding: "1rem",
+                paddingTop: "1.5rem",
+                paddingBottom: ".5rem",
+            } },
+            React.createElement(Stack, { gap: 2 },
+                React.createElement(FormLabel, null, profile.label),
+                React.createElement(Stack, null,
+                    React.createElement("div", { className: "textPrimary", style: { fontSize: "14px" } }, profile.user.name),
+                    React.createElement("div", { className: "textPrimary", style: { fontSize: "12px" } }, profile.user.email))))),
+        themeSelector && (React.createElement(React.Fragment, null,
+            React.createElement(SwitcherDivider, null),
+            React.createElement("div", { style: {
+                    padding: ".5rem 1rem",
+                } },
+                React.createElement(RadioButtonGroup, { name: "theme-radio-group", defaultSelected: themeSelector.currentTheme, legendText: "Theme", orientation: "vertical", onChange: (newValue) => {
+                        themeSelector.onChange(newValue);
+                    } },
+                    React.createElement(RadioButton, { id: "light", labelText: "Light", value: "light", tabIndex: itemTabIndex }),
+                    React.createElement(RadioButton, { id: "system", labelText: "System", value: "system", tabIndex: itemTabIndex }),
+                    React.createElement(RadioButton, { id: "dark", labelText: "Dark", value: "dark", tabIndex: itemTabIndex }))))),
+        stageToggle && (React.createElement(React.Fragment, null,
+            React.createElement(SwitcherDivider, null),
+            React.createElement("div", { style: { padding: ".5rem 1rem" } },
+                React.createElement(Toggle, { size: "sm", id: "toggle-productionfeatures", defaultToggled: stageToggle.prodFeaturesEnabled, onClick: stageToggle.toggle, labelText: "Simulate Production Features", tabIndex: itemTabIndex }))))));
+};
+export default C3UserSidebar;

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { C3NavigationProps } from "./c3-navigation.types";
-export declare const C3Navigation: ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, userSideBar, }: C3NavigationProps) => JSX.Element;
+export declare const C3Navigation: ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, userSideBar, notificationSideBar, }: C3NavigationProps) => JSX.Element;

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

@@ -1,19 +1,22 @@
-import { Button, FormLabel, Header, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderPanel, HeaderSideNavItems, RadioButton, RadioButtonGroup, SideNav, SideNavItems, SideNavLink, SideNavMenu, SideNavMenuItem, SkipToContent, Stack, SwitcherDivider, Tag, Toggle, Toggletip, ToggletipButton, ToggletipContent, usePrefix, useTheme, } from "@carbon/react";
-import { Close, Enterprise, Help, UserAvatar } from "@carbon/react/icons";
-import React, { useEffect, useState, } from "react";
+import { Header, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderSideNavItems, SideNav, SideNavItems, SideNavLink, SideNavMenu, SideNavMenuItem, SkipToContent, Tag, Toggletip, ToggletipButton, ToggletipContent, } from "@carbon/react";
+import { Close } from "@carbon/react/icons";
+import React, { useState } from "react";
 import { C3AppMenuIcon } from "../../icons/c3-icons";
+import C3InfoSidebar from "./c3-navigation-sidebar/c3-info-sidebar";
+import { C3NotificationSidebar } from "./c3-navigation-sidebar/c3-notification-sidebar";
+import C3OrgSidebar from "./c3-navigation-sidebar/c3-org-sidebar";
+import C3UserSidebar from "./c3-navigation-sidebar/c3-user-sidebar";
+import { useInverseThemeClassName, useMediaQuery, useOnClickOutside, } from "./helpers";
 const BREAKPOINT_LG_WIDTH = "66rem"; // This is Carbon's breakpoint (lg) width https://github.com/carbon-design-system/carbon/blob/main/packages/layout/src/index.js#L56
 const C3NavigationExternalLink = ({ label }) => React.createElement(React.Fragment, null, label);
 const C3NavigationAppBar = ({ appBar, forwardRef, navbar, }) => {
     const [appBarOpen, setAppBarOpen] = useState(appBar.isOpen);
-    const refPanel = React.createRef();
-    const refIcon = React.createRef();
-    useOnClickOutside(refPanel, refIcon, () => setAppBarOpen(false));
+    const [panelRef, iconRef] = useOnClickOutside(() => setAppBarOpen(false));
     return (React.createElement(React.Fragment, null,
-        React.createElement(HeaderGlobalAction, { ref: refIcon, "aria-label": "App Switcher", isActive: appBarOpen, onClick: () => {
+        React.createElement(HeaderGlobalAction, { ref: iconRef, "aria-label": "App Switcher", isActive: appBarOpen, onClick: () => {
                 setAppBarOpen(!appBarOpen);
             }, tooltipAlignment: "start" }, appBarOpen ? React.createElement(Close, { size: 20 }) : React.createElement(C3AppMenuIcon, { size: 20 })),
-        React.createElement(SideNav, { ref: refPanel, "aria-label": appBar.ariaLabel || "Side Navigation", expanded: appBarOpen, isPersistent: false, style: {
+        React.createElement(SideNav, { ref: panelRef, "aria-label": appBar.ariaLabel || "Side Navigation", expanded: appBarOpen, isPersistent: false, style: {
                 display: "grid",
                 gridAutoFlow: "row",
                 gridAutoRows: "max-content 1fr",
@@ -32,201 +35,59 @@ const C3NavigationAppBar = ({ appBar, forwardRef, navbar, }) => {
                     appBar.elements.map((element) => {
                         if (element.subElements && element.subElements.length > 0) {
                             return (React.createElement(SideNavMenu, { large: true, title: element.label, key: element.key }, element.subElements.map((subElement) => (React.createElement(SideNavMenuItem, { key: subElement.key, href: subElement.href, target: subElement.href ? subElement.target : undefined, onClick: () => {
+                                    let handlerAvailable = false;
                                     if (subElement.onClick) {
+                                        handlerAvailable = true;
                                         subElement.onClick();
                                     }
                                     if (appBar.closeOnClick !== false) {
+                                        handlerAvailable = true;
                                         setAppBarOpen(false);
                                     }
                                     if (appBar.elementClicked) {
+                                        handlerAvailable = true;
                                         appBar.elementClicked(subElement.key);
                                     }
+                                    return handlerAvailable;
                                 } },
                                 React.createElement(C3NavigationExternalLink, { label: subElement.label }))))));
                         }
                         else {
                             return element.routeProps ? (React.createElement(SideNavLink, { element: forwardRef, key: element.key, large: true, isActive: element.active, ...element.routeProps, onClick: () => {
+                                    let handlerAvailable = false;
                                     if (element.onClick) {
+                                        handlerAvailable = true;
                                         element.onClick();
                                     }
                                     if (appBar.closeOnClick !== false) {
+                                        handlerAvailable = true;
                                         setAppBarOpen(false);
                                     }
                                     if (appBar.elementClicked) {
+                                        handlerAvailable = true;
                                         appBar.elementClicked(element.key);
                                     }
+                                    return handlerAvailable;
                                 } }, element.label)) : (React.createElement(SideNavLink, { key: element.key, large: true, onClick: () => {
+                                    let handlerAvailable = false;
                                     if (element.onClick) {
+                                        handlerAvailable = true;
                                         element.onClick();
                                     }
                                     if (appBar.closeOnClick !== false) {
+                                        handlerAvailable = true;
                                         setAppBarOpen(false);
                                     }
                                     if (appBar.elementClicked) {
+                                        handlerAvailable = true;
                                         appBar.elementClicked(element.key);
                                     }
+                                    return handlerAvailable;
                                 }, href: element.href, target: element.href ? element.target : undefined }, element.label));
                         }
                     })))));
 };
-const C3NavigationSideBar = (props) => {
-    const { sideBar } = props;
-    if (sideBar) {
-        const activeOrganization = sideBar.customElements?.activeOrganization;
-        const profile = sideBar.customElements?.profile;
-        const themeSelector = sideBar.customElements?.themeSelector;
-        const stageToggle = sideBar.customElements?.stageToggle;
-        let icon;
-        let ariaLabel;
-        switch (sideBar.type) {
-            case "org":
-                icon = React.createElement(Enterprise, { size: 20 });
-                ariaLabel = "Organization Sidebar";
-                break;
-            case "info":
-                icon = React.createElement(Help, { size: 20 });
-                ariaLabel = "Info Sidebar";
-                break;
-            case "user":
-                icon = React.createElement(UserAvatar, { size: 20 });
-                ariaLabel = "User Sidebar";
-                break;
-        }
-        const [sideBarOpen, setSideBarOpen] = useState(sideBar.isOpen);
-        const refPanel = React.createRef();
-        const refIcon = React.createRef();
-        useOnClickOutside(refPanel, refIcon, () => setSideBarOpen(false));
-        const itemTabIndex = sideBarOpen ? undefined : -1;
-        return (React.createElement(React.Fragment, null,
-            React.createElement(HeaderGlobalAction, { ref: refIcon, "aria-label": sideBar.ariaLabel || `Open ${ariaLabel}`, onClick: () => {
-                    setSideBarOpen(!sideBarOpen);
-                }, isActive: sideBarOpen, tooltipAlignment: sideBar.type === "user" ? "end" : "center" }, icon),
-            React.createElement(HeaderPanel, { ref: refPanel, "aria-label": sideBar.ariaLabel || ariaLabel, expanded: sideBarOpen, style: {
-                    display: "grid",
-                    gridAutoFlow: "row",
-                    gridAutoRows: "max-content 1fr",
-                } },
-                React.createElement(Stack, null,
-                    profile && (React.createElement("div", { style: {
-                            padding: "1rem",
-                            paddingTop: "1.5rem",
-                            paddingBottom: ".5rem",
-                        } },
-                        React.createElement(Stack, { gap: 2 },
-                            React.createElement(FormLabel, null, profile.label),
-                            React.createElement(Stack, null,
-                                React.createElement("div", { className: "textPrimary", style: { fontSize: "14px" } }, profile.user.name),
-                                React.createElement("div", { className: "textPrimary", style: { fontSize: "12px" } }, profile.user.email))))),
-                    themeSelector && (React.createElement(React.Fragment, null,
-                        React.createElement(SwitcherDivider, null),
-                        React.createElement("div", { style: {
-                                padding: ".5rem 1rem",
-                            } },
-                            React.createElement(RadioButtonGroup, { name: "theme-radio-group", defaultSelected: themeSelector.currentTheme, legendText: "Theme", orientation: "vertical", onChange: (newValue) => {
-                                    themeSelector.onChange(newValue);
-                                } },
-                                React.createElement(RadioButton, { id: "light", labelText: "Light", value: "light", tabIndex: itemTabIndex }),
-                                React.createElement(RadioButton, { id: "system", labelText: "System", value: "system", tabIndex: itemTabIndex }),
-                                React.createElement(RadioButton, { id: "dark", labelText: "Dark", value: "dark", tabIndex: itemTabIndex }))))),
-                    stageToggle && (React.createElement(React.Fragment, null,
-                        React.createElement(SwitcherDivider, null),
-                        React.createElement("div", { style: { padding: ".5rem 1rem" } },
-                            React.createElement(Toggle, { size: "sm", id: "toggle-productionfeatures", defaultToggled: stageToggle.prodFeaturesEnabled, onClick: stageToggle.toggle, labelText: "Simulate Production Features", tabIndex: itemTabIndex })))),
-                    activeOrganization && (React.createElement(React.Fragment, null,
-                        React.createElement("div", { style: {
-                                padding: "1rem",
-                                paddingTop: "1.5rem",
-                                paddingBottom: ".5rem",
-                                display: "grid",
-                                gridAutoFlow: "column",
-                                gap: ".25rem",
-                            } },
-                            React.createElement("div", { style: {
-                                    overflow: "hidden",
-                                    display: "grid",
-                                    gap: "4px",
-                                } },
-                                React.createElement(FormLabel, null, activeOrganization.activeLabel),
-                                React.createElement("div", { className: "textPrimary", style: {
-                                        height: "20px",
-                                        lineHeight: "20px",
-                                        fontSize: "14px",
-                                        textOverflow: "ellipsis",
-                                        overflow: "hidden",
-                                        whiteSpace: "nowrap",
-                                    }, title: activeOrganization.orgName }, activeOrganization.orgName)),
-                            React.createElement(Button, { size: "md", kind: "ghost", key: "org-management", onClick: () => {
-                                    activeOrganization.action.onClick();
-                                    if (sideBar.closeOnClick !== false) {
-                                        setSideBarOpen(false);
-                                    }
-                                }, tabIndex: itemTabIndex }, activeOrganization.action.label)),
-                        sideBar.elements && sideBar.elements.length > 0 && (React.createElement(React.Fragment, null,
-                            React.createElement(SwitcherDivider, null),
-                            React.createElement(FormLabel, { style: {
-                                    paddingTop: ".5rem",
-                                    paddingLeft: "1rem",
-                                    paddingBottom: ".25rem",
-                                } }, activeOrganization.otherLabel))))),
-                    sideBar.elements &&
-                        sideBar.elements.length > 0 &&
-                        sideBar.customElements &&
-                        !sideBar.customElements?.activeOrganization && (React.createElement(SwitcherDivider, null)),
-                    sideBar.elements &&
-                        sideBar.elements.map((element, index) => (React.createElement(C3NavigationSideBarElement, { key: element.key, element: element, index: index, sideBar: sideBar, setSideBarOpen: setSideBarOpen, itemTabIndex: itemTabIndex }))),
-                    sideBar.type === "info" && sideBar.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 ",
-                            sideBar.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.")))),
-                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) {
-                                setSideBarOpen(false);
-                            }
-                        }, style: { alignSelf: "end" }, tabIndex: itemTabIndex }, element.label))))));
-    }
-    return null;
-};
-const C3NavigationSideBarElement = (props) => {
-    return (React.createElement(React.Fragment, null,
-        props.element.preceedingDivider && React.createElement(SwitcherDivider, null),
-        React.createElement(Button, { style: props.index === 0 && !props.sideBar.customElements
-                ? { 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 const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, userSideBar, }) => {
+export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, userSideBar, notificationSideBar, }) => {
     const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`);
     const appBarElementsLength = appBar.elements?.length ?? 0;
     const displayAppBar = appBarElementsLength > 0 || (!isLargeScreen && navbar.elements.length > 0);
@@ -279,53 +140,9 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                                 overflow: "hidden",
                                 maxWidth: "150px",
                             } }, navbar.orgName))),
-                    React.createElement(C3NavigationSideBar, { sideBar: orgSideBar }),
-                    React.createElement(C3NavigationSideBar, { sideBar: infoSideBar }),
-                    React.createElement(C3NavigationSideBar, { sideBar: userSideBar }))));
+                    notificationSideBar && (React.createElement(C3NotificationSidebar, { sideBar: { ...notificationSideBar, type: "notifications" } })),
+                    orgSideBar && (React.createElement(C3OrgSidebar, { sideBar: { ...orgSideBar, type: "org" } })),
+                    infoSideBar && (React.createElement(C3InfoSidebar, { sideBar: { ...infoSideBar, type: "info" } })),
+                    userSideBar && (React.createElement(C3UserSidebar, { sideBar: { ...userSideBar, type: "user" } })))));
         } }));
 };
-function useOnClickOutside(refPanel, refIcon, handler) {
-    useEffect(() => {
-        const listener = (event) => {
-            if (!refPanel.current ||
-                !refIcon.current ||
-                (event.target instanceof HTMLElement &&
-                    (refPanel.current.contains(event.target) ||
-                        refIcon.current.contains(event.target)))) {
-                return;
-            }
-            handler(event);
-        };
-        document.addEventListener("mousedown", listener);
-        document.addEventListener("touchstart", listener);
-        return () => {
-            document.removeEventListener("mousedown", listener);
-            document.removeEventListener("touchstart", listener);
-        };
-    }, [refPanel, handler]);
-}
-function executeMediaQuery(mediaQuery) {
-    return window.matchMedia(mediaQuery);
-}
-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;
-}
-function useInverseThemeClassName() {
-    const { theme } = useTheme();
-    const prefix = usePrefix();
-    if (!["g10", "g100"].includes(theme)) {
-        return "";
-    }
-    return theme === "g10" ? `${prefix}--g100` : `${prefix}--g10`;
-}

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { Tag } from "@carbon/react";
+import { Stage } from "../../api/endpoints.const";
+import { C3NavigationAppBarProps, C3NavigationInfoSideBarProps, C3NavigationNotificationsSideBarProps, C3NavigationOrgSideBarProps, C3NavigationUserSideBarProps } from "./c3-navigation-sidebar/c3-navigation-sidebar.types";
 export interface C3NavigationAppProps {
     prefix: string;
     name: string;
@@ -20,42 +22,6 @@ export interface C3NavigationElementProps {
     subElements?: C3NavigationElementProps[];
     preceedingDivider?: boolean;
 }
-export interface C3NavigationSideBarBaseProps {
-    ariaLabel?: string;
-    isOpen?: boolean;
-    type: "org" | "info" | "user" | "app";
-    closeOnClick?: boolean;
-    elementClicked?: (key: string) => void;
-    customElements?: {
-        activeOrganization?: {
-            activeLabel: string;
-            otherLabel: string;
-            orgName: string;
-            action: {
-                label: string;
-                onClick: () => void;
-            };
-        };
-        profile?: {
-            label: string;
-            user: {
-                name: string;
-                email: string;
-            };
-        };
-        themeSelector?: {
-            currentTheme: string;
-            onChange: (newValue: string) => void;
-        };
-        stageToggle?: {
-            prodFeaturesEnabled: boolean;
-            toggle: () => void;
-        };
-    };
-    elements?: C3NavigationElementProps[];
-    bottomElements?: C3NavigationElementProps[];
-    version?: string;
-}
 export interface C3NavigationNavBarProps {
     elements: Array<{
         label: string;
@@ -74,12 +40,21 @@ export interface C3NavigationNavBarProps {
     }>;
     orgName?: string;
 }
+export interface C3NotificationsProps {
+    stage: Stage;
+    activeOrganizationId: string;
+    userToken: string;
+    getNewUserToken: () => Promise<string>;
+}
+declare type WithoutType<P> = Omit<P, "type">;
 export interface C3NavigationProps {
     app: C3NavigationAppProps;
-    appBar: C3NavigationSideBarBaseProps;
-    orgSideBar?: C3NavigationSideBarBaseProps;
-    infoSideBar?: C3NavigationSideBarBaseProps;
-    userSideBar?: C3NavigationSideBarBaseProps;
+    appBar: WithoutType<C3NavigationAppBarProps>;
+    orgSideBar?: WithoutType<C3NavigationOrgSideBarProps>;
+    infoSideBar?: WithoutType<C3NavigationInfoSideBarProps>;
+    userSideBar?: WithoutType<C3NavigationUserSideBarProps>;
+    notificationSideBar?: WithoutType<C3NavigationNotificationsSideBarProps>;
     navbar: C3NavigationNavBarProps;
     forwardRef?: React.ForwardRefExoticComponent<any>;
 }
+export {};

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

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

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

@@ -0,0 +1,106 @@
+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) `
+	margin-right: -1rem;
+	visibility: ${({ $show }) => ($show ? "visible" : "hidden")};
+`;
+const UnreadNotificationHeader = styled.div `
+	display: flex;
+	align-items: center;
+	width: 100%;
+`;
+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 `
+	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 `
+	width: 100%;
+	min-height: 2rem;
+	display: flex;
+	align-items: flex-end;
+	justify-content: space-between;
+	margin-top: -1rem;
+`;
+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 `
+	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 `
+	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, unread = false, }) => {
+    const [isHovering, setIsHovering] = useState(false);
+    const dismissNotification = (e) => {
+        e.stopPropagation();
+        onDismiss();
+    };
+    const handleLinkClick = () => {
+        if (onLinkClick) {
+            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

@@ -0,0 +1,30 @@
+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;
+    };
+};
+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>;
+export declare type C3NotificationProviderProps = {
+    children?: ReactNode;
+};
+declare const C3NotificationProvider: FC<C3NotificationProviderProps>;
+export declare function withNotifications<P>(Component: ComponentType<P>): ComponentType<P>;
+export default C3NotificationProvider;