@camunda/camunda-composite-components 0.1.1 → 0.1.2

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

@@ -1,106 +1,52 @@
-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,29 +1,27 @@
-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,40 +1,27 @@
-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,159 +1,70 @@
-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 styled from "styled-components"
-import { useUserSidebarState } from "./c3-sidebar-state-provider"
-const VersionWrapper = styled.div`
+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 styled from "styled-components";
+import { useUserSidebarState } from "./c3-sidebar-state-provider";
+const VersionWrapper = styled.div `
 	align-self: end;
 	padding: 0.5rem 1rem;
-`
-const Version = styled.p`
+`;
+const Version = styled.p `
 	color: var(--cds-text-primary);
 	font-size: var(--cds-label-02-font-size);
 	font-weight: var(--cds-label-02-font-weight);
 	line-height: var(--cds-label-02-line-height);
 	letter-spacing: var(--cds-label-02-letter-spacing);
-`
-const Copyright = styled.p`
+`;
+const Copyright = styled.p `
 	color: var(--cds-text-secondary);
 	font-size: var(--cds-label-01-font-size);
 	font-weight: var(--cds-label-01-font-weight);
 	line-height: var(--cds-label-01-line-height);
 	letter-spacing: var(--cds-label-01-letter-spacing);
-`
+`;
 const C3UserSidebar = ({ sideBar }) => {
-	const { customElements, version, ...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 }),
-			version:
-				version &&
-				React.createElement(
-					VersionWrapper,
-					null,
-					React.createElement(Version, null, "Version ", version),
-					React.createElement(
-						Copyright,
-						null,
-						"\u00A9 Camunda Services GmbH ",
-						new Date().getFullYear(),
-					),
-					React.createElement(Copyright, null, "All right reserved."),
-				),
-			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, version, ...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 }), version: version && (React.createElement(VersionWrapper, null,
+            React.createElement(Version, null,
+                "Version ",
+                version),
+            React.createElement(Copyright, null,
+                "\u00A9 Camunda Services GmbH ",
+                new Date().getFullYear()),
+            React.createElement(Copyright, null, "All right reserved."))), 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,8 +1,2 @@
-/// <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
->
+import { SwitcherDivider as CarbonSwitcherDivider } from "@carbon/react";
+export declare const SwitcherDivider: typeof CarbonSwitcherDivider;

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,14 +1,2 @@
-/// <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;