@camunda/camunda-composite-components 0.0.41 → 0.0.42

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

@@ -1,52 +1,106 @@
-import React from "react";
-import { Button, FormLabel } from "@carbon/react";
-import { Enterprise } from "@carbon/react/icons";
-import C3NavigationSideBar from "./c3-navigation-sidebar";
-import { SwitcherDivider } from "./components";
-import { useOrgSidebarState } from "./c3-sidebar-state-provider";
+import React from "react"
+import { Button, FormLabel } from "@carbon/react"
+import { Enterprise } from "@carbon/react/icons"
+import C3NavigationSideBar from "./c3-navigation-sidebar"
+import { SwitcherDivider } from "./components"
+import { useOrgSidebarState } from "./c3-sidebar-state-provider"
 const C3OrgSidebar = ({ sideBar }) => {
-    const { customElements, ...sideBarProps } = sideBar;
-    const activeOrganization = customElements?.activeOrganization;
-    const { isOpen, setIsOpen } = useOrgSidebarState();
-    const itemTabIndex = isOpen ? undefined : -1;
-    return (React.createElement(C3NavigationSideBar, { sideBar: {
-            ...sideBarProps,
-            ariaLabel: sideBarProps.ariaLabel || "Organization Sidebars",
-        }, 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) {
-                        setIsOpen(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;
+	const { customElements, ...sideBarProps } = sideBar
+	const activeOrganization = customElements?.activeOrganization
+	const { isOpen, setIsOpen } = useOrgSidebarState()
+	const itemTabIndex = isOpen ? undefined : -1
+	return React.createElement(
+		C3NavigationSideBar,
+		{
+			sideBar: {
+				...sideBarProps,
+				ariaLabel: sideBarProps.ariaLabel || "Organization Sidebars",
+			},
+			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) {
+									setIsOpen(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-sidebar-state-provider.d.ts

@@ -1,27 +1,29 @@
-import React, { FC } from "react";
+import React, { FC } from "react"
 declare type DefaultValues = {
-    isNotificationSidebarOpen?: boolean;
-    isOrgSidebarOpen?: boolean;
-    isInfoSidebarOpen?: boolean;
-    isUserSidebarOpen?: boolean;
-};
+	isNotificationSidebarOpen?: boolean
+	isOrgSidebarOpen?: boolean
+	isInfoSidebarOpen?: boolean
+	isUserSidebarOpen?: boolean
+}
 declare type SideBarState = {
-    isOpen: boolean;
-    setIsOpen: (isOpen: boolean) => void;
-};
+	isOpen: boolean
+	setIsOpen: (isOpen: boolean) => void
+}
 declare type C3SidebarsState = {
-    notifications: SideBarState;
-    org: SideBarState;
-    info: SideBarState;
-    user: SideBarState;
-};
-export declare const C3SidebarStateContext: React.Context<C3SidebarsState | null>;
-export declare const C3SidebarStateProvider: FC<DefaultValues & {
-    children?: React.ReactNode;
-}>;
-export declare const useSidebarState: () => C3SidebarsState;
-export declare const useNotificationSidebarState: () => SideBarState;
-export declare const useOrgSidebarState: () => SideBarState;
-export declare const useInfoSidebarState: () => SideBarState;
-export declare const useUserSidebarState: () => SideBarState;
-export {};
+	notifications: SideBarState
+	org: SideBarState
+	info: SideBarState
+	user: SideBarState
+}
+export declare const C3SidebarStateContext: React.Context<C3SidebarsState | null>
+export declare const C3SidebarStateProvider: FC<
+	DefaultValues & {
+		children?: React.ReactNode
+	}
+>
+export declare const useSidebarState: () => C3SidebarsState
+export declare const useNotificationSidebarState: () => SideBarState
+export declare const useOrgSidebarState: () => SideBarState
+export declare const useInfoSidebarState: () => SideBarState
+export declare const useUserSidebarState: () => SideBarState
+export {}

package/lib/esm/components/c3-navigation/c3-navigation-sidebar/c3-sidebar-state-provider.js

@@ -1,27 +1,40 @@
-import React, { useContext, useState } from "react";
-export const C3SidebarStateContext = React.createContext(null);
+import React, { useContext, useState } from "react"
+export const C3SidebarStateContext = React.createContext(null)
 export const C3SidebarStateProvider = ({ children, ...value }) => {
-    const [isNotificationSidebarOpen, setIsNotificationSidebarOpen] = useState(value.isNotificationSidebarOpen || false);
-    const [isOrgSidebarOpen, setIsOrgSidebarOpen] = useState(value.isOrgSidebarOpen || false);
-    const [isInfoSidebarOpen, setIsInfoSidebarOpen] = useState(value.isInfoSidebarOpen || false);
-    const [isUserSidebarOpen, setIsUserSidebarOpen] = useState(value.isUserSidebarOpen || false);
-    return (React.createElement(C3SidebarStateContext.Provider, { value: {
-            notifications: {
-                isOpen: isNotificationSidebarOpen,
-                setIsOpen: setIsNotificationSidebarOpen,
-            },
-            org: { isOpen: isOrgSidebarOpen, setIsOpen: setIsOrgSidebarOpen },
-            info: { isOpen: isInfoSidebarOpen, setIsOpen: setIsInfoSidebarOpen },
-            user: { isOpen: isUserSidebarOpen, setIsOpen: setIsUserSidebarOpen },
-        } }, children));
-};
+	const [isNotificationSidebarOpen, setIsNotificationSidebarOpen] = useState(
+		value.isNotificationSidebarOpen || false,
+	)
+	const [isOrgSidebarOpen, setIsOrgSidebarOpen] = useState(
+		value.isOrgSidebarOpen || false,
+	)
+	const [isInfoSidebarOpen, setIsInfoSidebarOpen] = useState(
+		value.isInfoSidebarOpen || false,
+	)
+	const [isUserSidebarOpen, setIsUserSidebarOpen] = useState(
+		value.isUserSidebarOpen || false,
+	)
+	return React.createElement(
+		C3SidebarStateContext.Provider,
+		{
+			value: {
+				notifications: {
+					isOpen: isNotificationSidebarOpen,
+					setIsOpen: setIsNotificationSidebarOpen,
+				},
+				org: { isOpen: isOrgSidebarOpen, setIsOpen: setIsOrgSidebarOpen },
+				info: { isOpen: isInfoSidebarOpen, setIsOpen: setIsInfoSidebarOpen },
+				user: { isOpen: isUserSidebarOpen, setIsOpen: setIsUserSidebarOpen },
+			},
+		},
+		children,
+	)
+}
 export const useSidebarState = () => {
-    const value = useContext(C3SidebarStateContext);
-    if (!value)
-        throw new Error("No C3SidebarStateContextProvider found.");
-    return value;
-};
-export const useNotificationSidebarState = () => useSidebarState().notifications;
-export const useOrgSidebarState = () => useSidebarState().org;
-export const useInfoSidebarState = () => useSidebarState().info;
-export const useUserSidebarState = () => useSidebarState().user;
+	const value = useContext(C3SidebarStateContext)
+	if (!value) throw new Error("No C3SidebarStateContextProvider found.")
+	return value
+}
+export const useNotificationSidebarState = () => useSidebarState().notifications
+export const useOrgSidebarState = () => useSidebarState().org
+export const useInfoSidebarState = () => useSidebarState().info
+export const useUserSidebarState = () => useSidebarState().user

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

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

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

@@ -1,44 +1,126 @@
-import React from "react";
-import C3NavigationSideBar from "./c3-navigation-sidebar";
-import { FormLabel, RadioButton, RadioButtonGroup, Stack, SwitcherDivider, Toggle, } from "@carbon/react";
-import { UserAvatar } from "@carbon/react/icons";
-import { useUserSidebarState } from "./c3-sidebar-state-provider";
+import React from "react"
+import C3NavigationSideBar from "./c3-navigation-sidebar"
+import {
+	FormLabel,
+	RadioButton,
+	RadioButtonGroup,
+	Stack,
+	SwitcherDivider,
+	Toggle,
+} from "@carbon/react"
+import { UserAvatar } from "@carbon/react/icons"
+import { useUserSidebarState } from "./c3-sidebar-state-provider"
 const C3UserSidebar = ({ sideBar }) => {
-    const { customElements, ...sideBarProps } = sideBar;
-    const profile = customElements?.profile;
-    const themeSelector = customElements?.themeSelector;
-    const stageToggle = customElements?.stageToggle;
-    const customSection = customElements?.customSection;
-    const { isOpen } = useUserSidebarState();
-    const itemTabIndex = isOpen ? undefined : -1;
-    return (React.createElement(C3NavigationSideBar, { sideBar: {
-            ...sideBarProps,
-            ariaLabel: sideBarProps.ariaLabel || "User Sidebar",
-        }, icon: React.createElement(UserAvatar, { size: 20 }), bottomChildren: customSection },
-        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, "aria-label": "Simulate Production Features" }))))));
-};
-export default C3UserSidebar;
+	const { customElements, ...sideBarProps } = sideBar
+	const profile = customElements?.profile
+	const themeSelector = customElements?.themeSelector
+	const stageToggle = customElements?.stageToggle
+	const customSection = customElements?.customSection
+	const { isOpen } = useUserSidebarState()
+	const itemTabIndex = isOpen ? undefined : -1
+	return React.createElement(
+		C3NavigationSideBar,
+		{
+			sideBar: {
+				...sideBarProps,
+				ariaLabel: sideBarProps.ariaLabel || "User Sidebar",
+			},
+			icon: React.createElement(UserAvatar, { size: 20 }),
+			bottomChildren: customSection,
+		},
+		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,
+						"aria-label": "Simulate Production Features",
+					}),
+				),
+			),
+	)
+}
+export default C3UserSidebar

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

@@ -1,3 +1,8 @@
 /// <reference path="../../../../../src/carbon.d.ts" />
 /// <reference types="react" />
-export declare const SwitcherDivider: import("styled-components").StyledComponent<import("react").FC<import("@carbon/react").SwitcherDividerProps>, any, {}, never>;
+export declare const SwitcherDivider: import("styled-components").StyledComponent<
+	import("react").FC<import("@carbon/react").SwitcherDividerProps>,
+	any,
+	{},
+	never
+>

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

@@ -1,5 +1,5 @@
-import { SwitcherDivider as CarbonSwitcherDivider } from "@carbon/react";
-import styled from "styled-components";
-export const SwitcherDivider = styled(CarbonSwitcherDivider) `
+import { SwitcherDivider as CarbonSwitcherDivider } from "@carbon/react"
+import styled from "styled-components"
+export const SwitcherDivider = styled(CarbonSwitcherDivider)`
 	margin: auto;
-`;
+`

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

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