@camunda/camunda-composite-components 0.2.11-rc.0 → 0.2.11-rc.2

package/lib/esm/components/c3-help-center/c3-help-center-provider.d.ts

@@ -0,0 +1,9 @@
+import React, { FC, PropsWithChildren } from "react";
+export type C3HelpCenterContextValue = {
+    openHelpCenter: () => void;
+    setIsHelpCenterOpen: (isOpen: boolean) => void;
+    isHelpCenterOpen: boolean;
+};
+export declare const C3HelpCenterContext: React.Context<C3HelpCenterContextValue>;
+export declare const C3HelpCenterProvider: FC<PropsWithChildren>;
+export declare const useC3HelpCenter: () => C3HelpCenterContextValue;

package/lib/esm/components/c3-help-center/c3-help-center-provider.js

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+export const C3HelpCenterContext = React.createContext({
+    openHelpCenter: () => undefined,
+    setIsHelpCenterOpen: () => undefined,
+    isHelpCenterOpen: false,
+});
+export const C3HelpCenterProvider = ({ children }) => {
+    const [isHelpCenterOpen, setIsHelpCenterOpen] = useState(false);
+    const openHelpCenter = () => {
+        if (!isHelpCenterOpen)
+            setIsHelpCenterOpen(true);
+    };
+    return (React.createElement(C3HelpCenterContext.Provider, { value: {
+            openHelpCenter,
+            setIsHelpCenterOpen,
+            isHelpCenterOpen,
+        } }, children));
+};
+export const useC3HelpCenter = () => React.useContext(C3HelpCenterContext);

package/lib/esm/components/c3-help-center/c3-help-center.d.ts

@@ -3,7 +3,6 @@ import { Persona } from "./c3-help-center.types";
 import { Dict } from "mixpanel-browser";
 import { Theme } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 export interface C3HelpCenterProps {
-    isOpen: boolean;
     origin: "console" | "webmodeler" | "operate" | "tasklist" | "optimize";
     theme?: Theme;
     flags?: string[];

package/lib/esm/components/c3-help-center/c3-help-center.js

@@ -7,7 +7,9 @@ import { getClusters, getConfig, getOrg, updatePersona, } from "../../api/help-c
 import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
 import { defaultTheme, useC3Profile, } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 import { resolveTheme, } from "../c3-user-configuration/c3-profile-provider/carbon-theme-provider";
-export const C3HelpCenter = ({ autoStartSurvey, origin, flags, isOpen, onRequestClose, mixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
+import { useC3HelpCenter } from "./c3-help-center-provider";
+export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, mixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
+    const { isHelpCenterOpen: isOpen, setIsHelpCenterOpen } = useC3HelpCenter();
     const { userToken, decodedToken, activeOrganizationId, handleTheme } = useC3UserConfiguration() || {};
     const { theme: themeConfig, isEnabled } = useC3Profile();
     const themeHandlingEnabled = isEnabled && !!handleTheme && !!themeConfig;
@@ -160,6 +162,7 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, isOpen, onRequest
                 userId,
             });
         }
+        setIsHelpCenterOpen(false);
         onRequestClose?.();
     };
     return (React.createElement(Layer, null,

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

@@ -1,5 +1,5 @@
 import { Header, HeaderContainer, HeaderGlobalBar, HeaderMenuItem, HeaderName, HeaderNavigation, SkipToContent, Tag, Toggletip, ToggletipButton, ToggletipContent, Stack as CarbonStack, } from "@carbon/react";
-import React, { useEffect, useState } from "react";
+import React from "react";
 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";
@@ -13,6 +13,7 @@ import { InfoButton } from "./c3-info-button";
 import { C3SidebarStateProvider } from "./c3-navigation-sidebar/c3-sidebar-state-provider";
 import { C3HelpCenter } from "../c3-help-center/c3-help-center";
 import { C3ClusterTag } from "../c3-cluster-tag/c3-cluster-tag";
+import { useC3HelpCenter } from "../c3-help-center/c3-help-center-provider";
 /**
  * UI SHELL
  * Docs: https://react.carbondesignsystem.com/?path=/story/components-ui-shell--fixed-side-nav
@@ -38,17 +39,12 @@ const ClusterTagWrapper = styled.div `
 	}
 `;
 export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, infoButton, helpCenter, actionButtons, userSideBar, notificationSideBar, clusterUuid, options, }) => {
+    const { setIsHelpCenterOpen, isHelpCenterOpen } = useC3HelpCenter();
     const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`);
     const appBarElementsLength = appBar.elements?.length ?? 0;
     const displayAppBar = appBarElementsLength > 0 || (!isLargeScreen && navbar.elements.length > 0);
     if (app.prefix)
         console.warn("The `prefix` prop is deprecated and will be removed in a future release. It has been replaced with a Camunda icon.");
-    const [isHelpCenterOpen, setIsHelpCenterOpen] = useState(helpCenter?.isOpen ?? false);
-    useEffect(() => {
-        if (helpCenter?.isOpen) {
-            setIsHelpCenterOpen(true);
-        }
-    }, [helpCenter?.isOpen]);
     return (React.createElement(C3SidebarStateProvider, { isNotificationSidebarOpen: notificationSideBar?.isOpen, isOrgSidebarOpen: orgSideBar?.isOpen, isInfoSidebarOpen: infoSideBar?.isOpen, isUserSidebarOpen: userSideBar?.isOpen },
         React.createElement(HeaderContainer, { render: () => {
                 return (React.createElement(Header, { "aria-label": app.ariaLabel },
@@ -113,14 +109,11 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                             } })),
                         infoButton || helpCenter ? (React.createElement(InfoButton, { onClick: infoButton
                                 ? infoButton.onClick
-                                : () => setIsHelpCenterOpen((isOpen) => !isOpen) })) : (infoSideBar && (React.createElement(C3InfoSidebar, { sideBar: { ...infoSideBar, type: "info" } }))),
+                                : () => setIsHelpCenterOpen(!isHelpCenterOpen) })) : (infoSideBar && (React.createElement(C3InfoSidebar, { sideBar: { ...infoSideBar, type: "info" } }))),
                         userSideBar && (React.createElement(C3UserSidebar, { sideBar: {
                                 ...userSideBar,
                                 type: "user",
                             } })))));
             } }),
-        helpCenter && (React.createElement(C3HelpCenter, { ...helpCenter, isOpen: isHelpCenterOpen, onRequestClose: () => {
-                setIsHelpCenterOpen(false);
-                helpCenter.onRequestClose;
-            }, autoStartSurvey: true }))));
+        helpCenter && React.createElement(C3HelpCenter, { ...helpCenter, autoStartSurvey: true })));
 };

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

@@ -59,9 +59,7 @@ export interface C3NavigationProps {
     infoButton?: {
         onClick: () => void;
     };
-    helpCenter?: Omit<C3HelpCenterProps, "isOpen"> & {
-        isOpen?: boolean;
-    };
+    helpCenter?: C3HelpCenterProps;
     actionButtons?: C3ActionButtonsProps;
     userSideBar?: WithoutType<C3NavigationUserSideBarProps>;
     notificationSideBar?: WithoutType<C3NavigationNotificationsSideBarProps>;

package/lib/esm/components/c3-user-configuration/c3-user-configuration-provider.js

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useState } from "react";
 import { C3ProfileProvider } from "./c3-profile-provider/c3-profile-provider";
 import { decodeJWT } from "./authToken";
+import { C3HelpCenterProvider } from "../c3-help-center/c3-help-center-provider";
 export const C3UserConfigurationContext = React.createContext({
     stage: "dev",
     activeOrganizationId: "",
@@ -15,7 +16,8 @@ const C3UserConfigurationProvider = ({ children, ...config }) => {
             setDecodedToken(decodeJWT(config.userToken));
     }, [config.userToken]);
     return (React.createElement(C3UserConfigurationContext.Provider, { value: { ...config, decodedToken } },
-        React.createElement(C3ProfileProvider, null, children)));
+        React.createElement(C3ProfileProvider, null,
+            React.createElement(C3HelpCenterProvider, null, children))));
 };
 export const useC3UserConfiguration = () => useContext(C3UserConfigurationContext);
 export default C3UserConfigurationProvider;

package/lib/esm/index.d.ts

@@ -9,3 +9,4 @@ export { useC3Profile } from "./components/c3-user-configuration/c3-profile-prov
 export { C3UserConfiguration, default as C3UserConfigurationProvider, } from "./components/c3-user-configuration/c3-user-configuration-provider";
 export { C3AppMenuIcon } from "./icons/c3-icons";
 export { C3IconProps } from "./icons/c3-icons.types";
+export { useC3HelpCenter } from "./components/c3-help-center/c3-help-center-provider";

package/lib/esm/index.js

@@ -5,3 +5,4 @@ export { default as C3Navigation } from "./components/c3-navigation";
 export { useC3Profile } from "./components/c3-user-configuration/c3-profile-provider/c3-profile-provider";
 export { default as C3UserConfigurationProvider, } from "./components/c3-user-configuration/c3-user-configuration-provider";
 export { C3AppMenuIcon } from "./icons/c3-icons";
+export { useC3HelpCenter } from "./components/c3-help-center/c3-help-center-provider";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@camunda/camunda-composite-components",
-	"version": "0.2.11-rc.0",
+	"version": "0.2.11-rc.2",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"build": "yarn clean && tsc",