@camunda/camunda-composite-components 0.2.10 → 0.2.11-rc.1

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

@@ -0,0 +1,10 @@
+import React, { ComponentType, 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 function withHelpCenter<P>(Component: ComponentType<P>): ComponentType<P>;
+export declare const useC3HelpCenter: () => C3HelpCenterContextValue;

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

@@ -0,0 +1,25 @@
+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 function withHelpCenter(Component) {
+    return function WithNamespace(props) {
+        return (React.createElement(C3HelpCenterProvider, null,
+            React.createElement(Component, { ...props })));
+    };
+}
+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, { 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,12 +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(false);
     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 },
@@ -108,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,7 +59,7 @@ export interface C3NavigationProps {
     infoButton?: {
         onClick: () => void;
     };
-    helpCenter?: Omit<C3HelpCenterProps, "isOpen">;
+    helpCenter?: C3HelpCenterProps;
     actionButtons?: C3ActionButtonsProps;
     userSideBar?: WithoutType<C3NavigationUserSideBarProps>;
     notificationSideBar?: WithoutType<C3NavigationNotificationsSideBarProps>;

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

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

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.10",
+	"version": "0.2.11-rc.1",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"build": "yarn clean && tsc",
@@ -33,16 +33,16 @@
 		"@carbon/react": "1.37.0",
 		"@mdx-js/react": "2.3.0",
 		"@playwright/test": "1.37.1",
-		"@storybook/addon-a11y": "7.4.3",
-		"@storybook/addon-actions": "7.4.3",
-		"@storybook/addon-docs": "7.4.3",
-		"@storybook/addon-essentials": "7.4.3",
-		"@storybook/addon-interactions": "7.4.3",
-		"@storybook/addon-links": "7.4.3",
-		"@storybook/blocks": "7.4.3",
+		"@storybook/addon-a11y": "7.4.5",
+		"@storybook/addon-actions": "7.4.5",
+		"@storybook/addon-docs": "7.4.5",
+		"@storybook/addon-essentials": "7.4.5",
+		"@storybook/addon-interactions": "7.4.5",
+		"@storybook/addon-links": "7.4.5",
+		"@storybook/blocks": "7.4.5",
 		"@storybook/preset-scss": "1.0.3",
-		"@storybook/react": "7.4.3",
-		"@storybook/react-webpack5": "7.4.3",
+		"@storybook/react": "7.4.5",
+		"@storybook/react-webpack5": "7.4.5",
 		"@storybook/test-runner": "0.13.0",
 		"@storybook/testing-library": "0.2.1",
 		"@types/carbon-components-react": "7.55.3",
@@ -76,7 +76,7 @@
 		"sass": "1.66.1",
 		"sass-loader": "13.3.2",
 		"serve": "14.2.1",
-		"storybook": "7.4.3",
+		"storybook": "7.4.5",
 		"style-loader": "3.3.3",
 		"styled-components": "6.0.7",
 		"typescript": "5.2.2",