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

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

@@ -1,8 +1,9 @@
 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>;

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

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