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

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

@@ -1,10 +1,10 @@
-import React, { ComponentType, FC, PropsWithChildren } from "react";
+import React, { FC, PropsWithChildren } from "react";
 export type C3HelpCenterContextValue = {
-    openHelpCenter: () => void;
+    openHelpCenter: (showTabId?: string) => void;
     setIsHelpCenterOpen: (isOpen: boolean) => void;
     isHelpCenterOpen: boolean;
+    showTabId?: string | null;
 };
 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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 export const C3HelpCenterContext = React.createContext({
     openHelpCenter: () => undefined,
     setIsHelpCenterOpen: () => undefined,
@@ -6,20 +6,23 @@ export const C3HelpCenterContext = React.createContext({
 });
 export const C3HelpCenterProvider = ({ children }) => {
     const [isHelpCenterOpen, setIsHelpCenterOpen] = useState(false);
-    const openHelpCenter = () => {
-        if (!isHelpCenterOpen)
+    const [activeTabId, setActiveTabId] = useState(null);
+    const openHelpCenter = (showTabId) => {
+        if (!isHelpCenterOpen) {
             setIsHelpCenterOpen(true);
+        }
+        if (showTabId)
+            setActiveTabId(showTabId);
     };
+    useEffect(() => {
+        if (!isHelpCenterOpen)
+            setActiveTabId(null);
+    }, [isHelpCenterOpen]);
     return (React.createElement(C3HelpCenterContext.Provider, { value: {
             openHelpCenter,
             setIsHelpCenterOpen,
             isHelpCenterOpen,
+            showTabId: activeTabId,
         } }, 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/help-center.js

@@ -1,12 +1,13 @@
 import { Button, Link, Loading, ModalBody, ModalFooter, ModalHeader, SideNav, SideNavItems, SideNavMenuItem, Stack, } from "@carbon/react";
 import { Undo } from "@carbon/react/icons";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Feedback } from "./tabs/feedback";
 import { TabContent } from "./tabs/tabContent";
 import { getTiles } from "../../api/help-center";
 import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
 import { body01, headings } from "../styles";
 import styled from "styled-components";
+import { useC3HelpCenter } from "./c3-help-center-provider";
 export const StyledModalHeader = styled(ModalHeader) `
 	${headings}
 `;
@@ -23,6 +24,7 @@ export const HelpCenter = ({ configuration, organization, persona, email, audien
     const { tabs } = configuration;
     const firstTab = tabs[0].id;
     const { userToken: token } = useC3UserConfiguration() || {};
+    const { showTabId } = useC3HelpCenter();
     const [activeTab, setActiveTab] = useState(firstTab);
     const [tabTiles, setTabTiles] = useState({});
     const [isLoadingTiles, setIsLoadingTiles] = useState(false);
@@ -52,9 +54,14 @@ export const HelpCenter = ({ configuration, organization, persona, email, audien
             setIsLoadingTiles(false);
         })();
     }, [token, persona, audience, organization, clusters, tabs]);
-    React.useEffect(() => {
+    useEffect(() => {
         setActiveTab(initialTab ?? firstTab);
     }, [initialTab]);
+    useEffect(() => {
+        if (showTabId) {
+            setActiveTab(showTabId);
+        }
+    }, [showTabId]);
     if (activeTab === "feedback") {
         header = "Share your feedback";
         content = (React.createElement(Feedback, { audience: audience, theme: theme, mixpanelTrack: mixpanelTrack, setHeader: (head) => {

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

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

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/package.json

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