@plurid/plurid-ui-components-react 0.0.0-21 → 0.0.0-22

package/distribution/components/pluridal/containers/DashboardsRenderer/components/RenderArea/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Theme } from '@plurid/plurid-themes';
+import { Dashboard } from '../../data';
+export interface RenderAreaProperties {
+    dashboards: Dashboard[];
+    selectedDashboard: string;
+    renderView: string;
+    fullRenderArea: boolean;
+    theme: Theme;
+    setSelectedDashboard: React.Dispatch<string>;
+    setRenderView: React.Dispatch<string>;
+    setFullRenderArea: React.Dispatch<boolean>;
+}
+declare const RenderArea: React.FC<RenderAreaProperties>;
+export default RenderArea;

package/distribution/components/pluridal/containers/DashboardsRenderer/components/RenderArea/styled.d.ts

@@ -0,0 +1,5 @@
+import { Theme } from '@plurid/plurid-themes';
+export interface IStyledRenderArea {
+    theme: Theme;
+}
+export declare const StyledRenderArea: import("styled-components").StyledComponent<"div", any, IStyledRenderArea, never>;

package/distribution/components/pluridal/containers/DashboardsRenderer/components/Sidebar/components/Selector/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Theme } from '@plurid/plurid-themes';
+import { Dashboard } from '../../../../data';
+export interface SelectorProperties {
+    data: Dashboard;
+    compactSelectors: boolean;
+    theme: Theme;
+    selectedDashboard: string;
+    setSelectedDashboard: React.Dispatch<string>;
+    rendererID?: string;
+}
+declare const Selector: React.FC<SelectorProperties>;
+export default Selector;

package/distribution/components/pluridal/containers/DashboardsRenderer/components/Sidebar/components/Selector/styled.d.ts

@@ -0,0 +1,11 @@
+import { Theme } from '@plurid/plurid-themes';
+export interface IStyledSelector {
+    theme: Theme;
+    selected: boolean;
+    compactSelectors: boolean;
+}
+export declare const StyledSelector: import("styled-components").StyledComponent<"li", any, IStyledSelector, never>;
+export interface IStyledSelectorRelativeLabel {
+    theme: Theme;
+}
+export declare const StyledSelectorRelativeLabel: import("styled-components").StyledComponent<"div", any, IStyledSelectorRelativeLabel, never>;

package/distribution/components/pluridal/containers/DashboardsRenderer/components/Sidebar/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Theme } from '@plurid/plurid-themes';
+import { Dashboard } from '../../data';
+export interface SidebarProperties {
+    dashboards: Dashboard[];
+    theme: Theme;
+    compactSelectors: boolean;
+    setCompactSelectors: React.Dispatch<boolean>;
+    selectedDashboard: string;
+    setSelectedDashboard: React.Dispatch<string>;
+    rendererID?: string;
+    identonym?: string;
+    usageType?: string;
+    brandingName?: string;
+    brandingNameStyle?: React.CSSProperties;
+    brandingLogo?: string;
+    openManual?: () => void;
+    logout?: () => void;
+}
+declare const Sidebar: React.FC<SidebarProperties>;
+export default Sidebar;

package/distribution/components/pluridal/containers/DashboardsRenderer/components/Sidebar/styled.d.ts

@@ -0,0 +1,20 @@
+import { Theme } from '@plurid/plurid-themes';
+export interface IStyledSidebar {
+    theme: Theme;
+}
+export declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, IStyledSidebar, never>;
+export interface IStyledSelectors {
+    theme: Theme;
+    compactSelectors: boolean;
+    helpItemsCount: number;
+}
+export declare const StyledSelectors: import("styled-components").StyledComponent<"div", any, IStyledSelectors, never>;
+export interface IStyledBranding {
+    compactSelectors: boolean;
+}
+export declare const StyledBranding: import("styled-components").StyledComponent<"div", any, IStyledBranding, never>;
+export declare const StyledHelp: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface IStyledHelpItem {
+    compactSelectors: boolean;
+}
+export declare const StyledHelpItem: import("styled-components").StyledComponent<"li", any, IStyledHelpItem, never>;

package/distribution/components/pluridal/containers/DashboardsRenderer/data.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Theme } from '@plurid/plurid-themes';
+export interface DashboardRenderProperties {
+    theme: Theme;
+    selectedDashboard: string;
+    setSelectedDashboard: React.Dispatch<string>;
+    renderView: string;
+    setRenderView: React.Dispatch<string>;
+    fullRenderArea: boolean;
+    setFullRenderArea: React.Dispatch<boolean>;
+}
+export interface Dashboard {
+    id: string;
+    icon?: React.FC<any> | JSX.Element;
+    label: string;
+    defaultRender?: string;
+    renderers: Record<string, React.FC<any> | undefined | any>;
+}

package/distribution/components/pluridal/containers/DashboardsRenderer/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Theme } from '@plurid/plurid-themes';
+import { Dashboard } from './data';
+export interface DashboardsRendererProperties {
+    dashboards: Dashboard[];
+    theme: Theme;
+    rendererID?: string;
+    identonym?: string;
+    usageType?: string;
+    brandingName?: string;
+    brandingNameStyle?: React.CSSProperties;
+    brandingLogo?: string;
+    activeDashboard?: string;
+    activeRender?: string;
+    compactSelectors?: boolean;
+    fullRenderArea?: boolean;
+    noDashboardRender?: JSX.Element;
+    openManual?: () => void;
+    atDashboardChange?: (newDashboard: string) => void;
+    atUIChange?: (type: string, value: any) => void;
+    logout?: () => void;
+}
+declare const DashboardsRenderer: React.FC<DashboardsRendererProperties>;
+export default DashboardsRenderer;

package/distribution/components/pluridal/containers/DashboardsRenderer/styled.d.ts

@@ -0,0 +1,8 @@
+import { Theme } from '@plurid/plurid-themes';
+export interface IStyledDashboardsRenderer {
+    theme: Theme;
+    compactSelectors: boolean;
+    fullRenderArea: boolean;
+}
+export declare const StyledDashboardsRenderer: import("styled-components").StyledComponent<"div", any, IStyledDashboardsRenderer, never>;
+export declare const StyledNoDashboardRender: import("styled-components").StyledComponent<"div", any, {}, never>;

package/distribution/components/pluridal/containers/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 declare const containers: {
+    DashboardsRenderer: import("react").FC<import("./DashboardsRenderer").DashboardsRendererProperties>;
     EntityView: import("react").ForwardRefExoticComponent<import("./EntityView").EntityViewType>;
 };
 export default containers;

package/distribution/components/pluridal/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 declare const pluridal: {
     containers: {
+        DashboardsRenderer: import("react").FC<import("./containers/DashboardsRenderer").DashboardsRendererProperties>;
         EntityView: import("react").ForwardRefExoticComponent<import("./containers/EntityView").EntityViewType>;
     };
     head: {

package/distribution/index.d.ts

@@ -43,6 +43,7 @@ declare const _default: {
         children?: import("react").ReactNode;
         store?: import("@reduxjs/toolkit").Store<any, import("@reduxjs/toolkit").AnyAction> | undefined;
     }>;
+    DashboardsRenderer: import("react").FC<import("./components/pluridal/containers/DashboardsRenderer").DashboardsRendererProperties>;
     EntityView: import("react").ForwardRefExoticComponent<import("./components/pluridal/containers/EntityView").EntityViewType>;
     CopyableLine: import("react").FC<import("./components/universal/varia/CopyableLine").CopyableLineProperties>;
     NewPageLink: import("react").FC<import("./components/universal/varia/NewPageLink").NewPageLinkProperties>;
@@ -78,7 +79,7 @@ declare const _default: {
 };
 export default _default;
 declare const LinkButton: import("react").FC<import("./components/universal/buttons/LinkButton").LinkButtonProperties>, PureButton: import("react").FC<import("./components/universal/buttons/PureButton").PureButtonProperties>, RefreshButton: import("react").FC<import("./components/universal/buttons/RefreshButton").RefreshButtonProperties>, FormLeftRight: import("react").FC<import("./components/universal/form/FormLeftRight").FormLeftRightProperties>, FormObliterate: import("react").FC<import("./components/universal/form/FormObliterate").FormObliterateProperties>, Formbutton: import("react").FC<import("./components/universal/form/Formbutton").FormbuttonProperties>, Formitem: import("react").FC<import("./components/universal/form/Formitem").FormitemProperties>, Formline: import("react").FC<import("./components/universal/form/Formline").FormlineProperties>, GlobalStyles: import("styled-components").GlobalStyleComponent<import("./components/universal/general/GlobalStyles").IGlobalStyles, import("styled-components").DefaultTheme>, Dropdown: import("react").FC<import("./components/universal/inputs/Dropdown").DropdownProperties>, EntityPill: import("react").FC<import("./components/universal/inputs/EntityPill").EntityPillProperties>, EntityPillGroup: import("react").FC<import("./components/universal/inputs/EntityPillGroup").EntityPillGroupProperties>, InputBox: import("react").FC<import("./components/universal/inputs/InputBox").InputBoxProperties>, InputDescriptor: import("react").FC<import("./components/universal/inputs/InputDescriptor").InputDescriptorProperties>, InputLine: import("react").FC<import("./components/universal/inputs/InputLine").InputLineProperties>, InputSwitch: import("react").FC<import("./components/universal/inputs/InputSwitch").InputSwitchProperties>, Itemsline: import("react").FC<import("./components/universal/inputs/Itemsline").ItemslineProperties>, Select: import("react").FC<import("./components/universal/inputs/Select").PluridSelectProperties>, Slider: import("react").FC<import("./components/universal/inputs/Slider").SliderProperties>, Switch: import("react").FC<import("./components/universal/inputs/Switch").SwitchProperties>, Textline: import("react").ForwardRefExoticComponent<import("./components/universal/inputs/Textline").TextlineType>, HR: import("react").FC<import("./components/universal/markers/HR").HRProperties>, ProgressCircle: import("react").FC<import("./components/universal/markers/ProgressCircle").ProgressCircleProperties>, Spinner: import("react").FC<import("./components/universal/markers/Spinner").SpinnerProperties>, Tooltip: import("react").FC<import("./components/universal/markers/Tooltip").TooltipProperties>, Heading: import("react").FC<import("react").PropsWithChildren<import("./components/universal/typography/Heading").HeadingProperties>>, Paragraph: import("react").FC<import("react").PropsWithChildren<import("./components/universal/typography/Paragraph").ParagraphProperties>>, CopyableLine: import("react").FC<import("./components/universal/varia/CopyableLine").CopyableLineProperties>, NewPageLink: import("react").FC<import("./components/universal/varia/NewPageLink").NewPageLinkProperties>, ScrollableLine: import("react").FC<import("./components/universal/varia/ScrollableLine").ScrollableLineProperties>, TextItem: import("react").FC<import("./components/universal/varia/TextItem").TextItemProperties>;
-declare const EntityView: import("react").ForwardRefExoticComponent<import("./components/pluridal/containers/EntityView").EntityViewType>, Head: import("react-redux").ConnectedComponent<import("react").FC<import("./components/pluridal/head/Head").HeadProperties>, {
+declare const DashboardsRenderer: import("react").FC<import("./components/pluridal/containers/DashboardsRenderer").DashboardsRendererProperties>, EntityView: import("react").ForwardRefExoticComponent<import("./components/pluridal/containers/EntityView").EntityViewType>, Head: import("react-redux").ConnectedComponent<import("react").FC<import("./components/pluridal/head/Head").HeadProperties>, {
     context: import("react").Context<any>;
     Helmet: any;
     defaults?: (Partial<import("@plurid/plurid-ui-state-react/distribution/modules/head").HeadState> & import("./components/pluridal/head/Head").HeadDefaults) | undefined;
@@ -109,4 +110,4 @@ declare const EntityView: import("react").ForwardRefExoticComponent<import("./co
 }>, ToolbarSpecific: import("react-redux").ConnectedComponent<import("react").FC<import("./components/pluridal/toolbars/ToolbarSpecific").ToolbarSpecificProperties>, {
     [x: string]: any;
 }>, VerticalToolbarButton: import("react").FC<import("./components/pluridal/toolbars/VerticalToolbarButton").VerticalToolbarButtonOwnProperties>;
-export { universal, pluridal, LinkButton, PureButton, RefreshButton, FormLeftRight, FormObliterate, Formbutton, Formitem, Formline, GlobalStyles, Dropdown, EntityPill, EntityPillGroup, InputBox, InputDescriptor, InputLine, InputSwitch, Itemsline, Select, Slider, Switch, Textline, HR, ProgressCircle, Spinner, Tooltip, Heading, Paragraph, CopyableLine, NewPageLink, ScrollableLine, TextItem, EntityView, Head, Notification, Notifications, SittingTray, HorizontalToolbarButton, ToolbarControls, ToolbarGeneral, ToolbarSpecific, VerticalToolbarButton, };
+export { universal, pluridal, LinkButton, PureButton, RefreshButton, FormLeftRight, FormObliterate, Formbutton, Formitem, Formline, GlobalStyles, Dropdown, EntityPill, EntityPillGroup, InputBox, InputDescriptor, InputLine, InputSwitch, Itemsline, Select, Slider, Switch, Textline, HR, ProgressCircle, Spinner, Tooltip, Heading, Paragraph, CopyableLine, NewPageLink, ScrollableLine, TextItem, DashboardsRenderer, EntityView, Head, Notification, Notifications, SittingTray, HorizontalToolbarButton, ToolbarControls, ToolbarGeneral, ToolbarSpecific, VerticalToolbarButton, };

package/distribution/index.es.js

@@ -4,7 +4,7 @@ import themes, { plurid } from "@plurid/plurid-themes";
 
 import styled, { createGlobalStyle, css, keyframes } from "styled-components";
 
-import { PluridIconReset, PluridIconObliterate, PluridIconDelete, PluridIconCopy, PluridIconInfo, PluridIconPlay, PluridIconBranch, PluridIconNewStateline, PluridIconStateShareImage, PluridIconCopyCurrentState, PluridIconCopyStateHistory, PluridIconSittings, PluridIconSpeak } from "@plurid/plurid-icons-react";
+import { PluridIconReset, PluridIconObliterate, PluridIconDelete, PluridIconCopy, PluridIconInfo, PluridIconSpace, PluridIconArrowRight, PluridIconDocuments, PluridIconExternalLink, PluridIconExit, PluridIconPlay, PluridIconBranch, PluridIconNewStateline, PluridIconStateShareImage, PluridIconCopyCurrentState, PluridIconCopyStateHistory, PluridIconSittings, PluridIconSpeak } from "@plurid/plurid-icons-react";
 
 import { mergeReferences, useMounted, useFalseAfterTimedTrue, useThrottledCallback, createMarkup } from "@plurid/plurid-functions-react";
 
@@ -2567,6 +2567,306 @@ const universal = {
     varia: varia
 };
 
+const StyledDashboardsRenderer = styled.div`
+    display: grid;
+    grid-template-columns: ${({fullRenderArea: fullRenderArea, compactSelectors: compactSelectors}) => {
+    if (fullRenderArea) {
+        return "1fr";
+    }
+    return compactSelectors ? "60px auto" : "1fr 4fr";
+}};
+    min-height: 700px;
+`;
+
+const StyledNoDashboardRender = styled.div`
+    display: grid;
+    place-content: center;
+`;
+
+const StyledSidebar = styled.div`
+`;
+
+const StyledSelectors = styled.div`
+    height: 100%;
+    display: grid;
+    justify-content: space-between;
+    grid-template-columns: 1fr;
+    grid-template-rows: ${({helpItemsCount: helpItemsCount}) => `120px auto ${45 * helpItemsCount}px`};
+
+    background-color: ${({theme: theme}) => theme.backgroundColorTertiary};
+    box-shadow: inset -3px 0px 3px 0px ${({theme: theme}) => theme.boxShadowUmbraColor};
+
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    li {
+        cursor: pointer;
+        padding: 0.7rem 1.4rem;
+        user-select: none;
+    }
+`;
+
+const StyledBranding = styled.div`
+    display: grid;
+    place-content: center;
+    grid-gap: 0.5rem;
+    height: 100%;
+    font-size: 0.9rem;
+    text-align: center;
+    user-select: none;
+
+    img {
+        cursor: pointer;
+    }
+`;
+
+const StyledHelp = styled.div`
+    li {
+        font-size: 0.9rem;
+    }
+`;
+
+const StyledHelpItem = styled.li`
+    display: grid;
+    align-items: center;
+    grid-gap: 0.5rem;
+    grid-template-columns: ${({compactSelectors: compactSelectors}) => compactSelectors ? "16px" : "16px auto 16px"};
+    min-height: 45px;
+`;
+
+const StyledSelector = styled.li`
+    background-color: ${({theme: theme, selected: selected}) => selected ? theme.backgroundColorPrimary : "initial"};
+
+    :hover {
+        background-color: ${({theme: theme}) => theme.backgroundColorPrimary};
+    }
+
+    display: grid;
+    grid-template-columns: ${({compactSelectors: compactSelectors}) => compactSelectors ? "16px" : "16px auto"};
+    grid-gap: 0.7rem;
+    min-height: 45px;
+    align-items: center;
+    position: relative;
+`;
+
+const StyledSelectorRelativeLabel = styled.div`
+    position: absolute;
+    left: 50px;
+    z-index: 9999;
+    min-height: 45px;
+    display: grid;
+    align-items: center;
+    padding-right: 0.5rem;
+    background-color: ${({theme: theme}) => theme.backgroundColorPrimaryAlpha};
+`;
+
+const Selector = properties => {
+    const {data: data, selectedDashboard: selectedDashboard, compactSelectors: compactSelectors, theme: theme, setSelectedDashboard: setSelectedDashboard, rendererID: rendererID} = properties;
+    const {id: id, icon: icon, label: label} = data;
+    const Icon = icon;
+    const selected = id === selectedDashboard;
+    const [mouseOver, setMouseOver] = useState(false);
+    useEffect((() => {
+        let mounted = true;
+        if (mouseOver) {
+            setTimeout((() => {
+                if (!mounted) {
+                    return;
+                }
+                setMouseOver(false);
+            }), 2e3);
+        }
+        return () => {
+            mounted = false;
+        };
+    }), [ mouseOver ]);
+    const selectorIcon = !icon ? React.createElement(PluridIconSpace, {
+        theme: theme
+    }) : typeof icon === "function" ? React.createElement(Icon, {
+        theme: theme
+    }) : React.createElement(React.Fragment, null, icon);
+    return React.createElement(StyledSelector, {
+        key: (rendererID || "") + id,
+        onClick: () => setSelectedDashboard(id),
+        onMouseEnter: () => setMouseOver(true),
+        onMouseLeave: () => setMouseOver(false),
+        theme: theme,
+        selected: selected,
+        compactSelectors: compactSelectors
+    }, selectorIcon, !compactSelectors && React.createElement("div", null, label), compactSelectors && mouseOver && React.createElement(StyledSelectorRelativeLabel, {
+        theme: theme
+    }, label));
+};
+
+const Sidebar = properties => {
+    const {dashboards: dashboards, theme: theme, compactSelectors: compactSelectors, setCompactSelectors: setCompactSelectors, selectedDashboard: selectedDashboard, setSelectedDashboard: setSelectedDashboard, identonym: identonym, usageType: usageType, openManual: openManual, logout: logout, rendererID: rendererID, brandingName: brandingName, brandingNameStyle: brandingNameStyle, brandingLogo: brandingLogo} = properties;
+    const openManualCount = openManual ? 1 : 0;
+    const usageTypeCount = usageType === "PRIVATE_USAGE" ? 1 : 0;
+    const helpItemsCount = openManualCount + usageTypeCount;
+    const [mouseOverSelectors, setMouseOverSelectors] = useState(false);
+    const branding = React.createElement(StyledBranding, {
+        compactSelectors: compactSelectors
+    }, !compactSelectors && React.createElement(React.Fragment, null, React.createElement("div", null, brandingLogo && React.createElement("img", {
+        src: brandingLogo,
+        alt: "icon",
+        height: 40,
+        onClick: () => {
+            setCompactSelectors(true);
+            setMouseOverSelectors(false);
+        }
+    })), brandingName && React.createElement("div", {
+        style: brandingNameStyle
+    }, brandingName)), compactSelectors && mouseOverSelectors && React.createElement(React.Fragment, null, React.createElement(PluridIconArrowRight, {
+        atClick: () => setCompactSelectors(false)
+    }), React.createElement("div", null, "ㅤ")));
+    const selectors = React.createElement("ul", null, dashboards.map((dashboard => React.createElement(Selector, {
+        key: dashboard.id,
+        data: dashboard,
+        compactSelectors: compactSelectors,
+        theme: theme,
+        selectedDashboard: selectedDashboard,
+        setSelectedDashboard: setSelectedDashboard,
+        rendererID: rendererID
+    }))));
+    const help = React.createElement(StyledHelp, null, mouseOverSelectors && React.createElement("ul", null, openManual && React.createElement(StyledHelpItem, {
+        onClick: () => openManual(),
+        compactSelectors: compactSelectors
+    }, React.createElement(PluridIconDocuments, null), !compactSelectors && React.createElement(React.Fragment, null, React.createElement("div", null, "manual"), React.createElement(PluridIconExternalLink, null))), usageType === "PRIVATE_USAGE" && logout && React.createElement(StyledHelpItem, {
+        onClick: () => logout(),
+        compactSelectors: compactSelectors
+    }, React.createElement(PluridIconExit, null), !compactSelectors && React.createElement(React.Fragment, null, React.createElement("div", null, "logout (", identonym, ")"), React.createElement("div", null)))));
+    return React.createElement(StyledSidebar, {
+        theme: theme
+    }, React.createElement(StyledSelectors, {
+        onMouseEnter: () => setMouseOverSelectors(true),
+        onMouseLeave: () => setMouseOverSelectors(false),
+        theme: theme,
+        compactSelectors: compactSelectors,
+        helpItemsCount: helpItemsCount
+    }, branding, selectors, help));
+};
+
+const StyledRenderArea = styled.div`
+`;
+
+const RenderArea = properties => {
+    const {dashboards: dashboards, selectedDashboard: selectedDashboard, renderView: renderView, fullRenderArea: fullRenderArea, theme: theme, setSelectedDashboard: setSelectedDashboard, setRenderView: setRenderView, setFullRenderArea: setFullRenderArea} = properties;
+    const dashboard = dashboards.find((dashboard => dashboard.id === selectedDashboard));
+    if (!dashboard) {
+        return React.createElement(React.Fragment, null);
+    }
+    const resolveView = () => {
+        const dashboard = dashboards.find((dashboard => dashboard.id === selectedDashboard));
+        if (!dashboard) {
+            return;
+        }
+        const renderViewInDashboard = dashboard.renderers[renderView];
+        if (renderViewInDashboard) {
+            return renderView;
+        }
+        if (dashboard.defaultRender) {
+            return dashboard.defaultRender;
+        }
+        return Object.keys(dashboard.renderers)[0];
+    };
+    const renderID = resolveView();
+    useEffect((() => {
+        if (renderID && renderID !== renderView) {
+            setRenderView(renderID);
+        }
+    }), [ renderID ]);
+    if (!renderID) {
+        return React.createElement(React.Fragment, null);
+    }
+    const DashboardRender = dashboard.renderers[renderID];
+    if (!DashboardRender) {
+        return React.createElement(React.Fragment, null);
+    }
+    return React.createElement(StyledRenderArea, {
+        theme: theme
+    }, React.createElement(DashboardRender, {
+        theme: theme,
+        selectedDashboard: selectedDashboard,
+        setSelectedDashboard: setSelectedDashboard,
+        renderView: renderView,
+        setRenderView: setRenderView,
+        fullRenderArea: fullRenderArea,
+        setFullRenderArea: setFullRenderArea
+    }));
+};
+
+const DashboardsRenderer$1 = properties => {
+    const {dashboards: dashboards, theme: theme, rendererID: rendererID, identonym: identonym, usageType: usageType, brandingName: brandingName, brandingNameStyle: brandingNameStyle, brandingLogo: brandingLogo, activeDashboard: activeDashboard, activeRender: activeRender, compactSelectors: compactSelectorsProperty, fullRenderArea: fullRenderAreaProperty, noDashboardRender: noDashboardRender, atDashboardChange: atDashboardChange, atUIChange: atUIChange, openManual: openManual, logout: logout} = properties;
+    const [compactSelectors, setCompactSelectors] = useState(compactSelectorsProperty !== null && compactSelectorsProperty !== void 0 ? compactSelectorsProperty : false);
+    const [fullRenderArea, setFullRenderArea] = useState(fullRenderAreaProperty !== null && fullRenderAreaProperty !== void 0 ? fullRenderAreaProperty : false);
+    const [selectedDashboard, setSelectedDashboard] = useState(activeDashboard || "");
+    const [renderView, setRenderView] = useState(activeRender || "");
+    useEffect((() => {
+        if (!activeDashboard) {
+            return;
+        }
+        if (selectedDashboard === activeDashboard) {
+            return;
+        }
+        setSelectedDashboard(activeDashboard);
+    }), [ activeDashboard ]);
+    useEffect((() => {
+        if (atDashboardChange) {
+            atDashboardChange(renderView);
+        }
+    }), [ renderView ]);
+    useEffect((() => {
+        if (typeof compactSelectorsProperty === "boolean") {
+            setCompactSelectors(compactSelectorsProperty);
+        }
+        if (typeof fullRenderAreaProperty === "boolean") {
+            setFullRenderArea(fullRenderAreaProperty);
+        }
+    }), [ compactSelectorsProperty, fullRenderAreaProperty ]);
+    useEffect((() => {
+        if (atUIChange) {
+            atUIChange("compactSelectors", compactSelectors);
+        }
+    }), [ compactSelectors ]);
+    useEffect((() => {
+        if (atUIChange) {
+            atUIChange("fullRenderArea", fullRenderArea);
+        }
+    }), [ fullRenderArea ]);
+    return React.createElement(StyledDashboardsRenderer, {
+        theme: theme,
+        compactSelectors: compactSelectors,
+        fullRenderArea: fullRenderArea
+    }, !fullRenderArea && React.createElement(Sidebar, {
+        dashboards: dashboards,
+        theme: theme,
+        compactSelectors: compactSelectors,
+        setCompactSelectors: setCompactSelectors,
+        selectedDashboard: selectedDashboard,
+        setSelectedDashboard: setSelectedDashboard,
+        identonym: identonym,
+        usageType: usageType,
+        openManual: openManual,
+        logout: logout,
+        rendererID: rendererID,
+        brandingName: brandingName,
+        brandingNameStyle: brandingNameStyle,
+        brandingLogo: brandingLogo
+    }), selectedDashboard && React.createElement(RenderArea, {
+        dashboards: dashboards,
+        selectedDashboard: selectedDashboard,
+        setSelectedDashboard: setSelectedDashboard,
+        renderView: renderView,
+        setRenderView: setRenderView,
+        fullRenderArea: fullRenderArea,
+        setFullRenderArea: setFullRenderArea,
+        theme: theme
+    }), !selectedDashboard && noDashboardRender && React.createElement(StyledNoDashboardRender, null, noDashboardRender));
+};
+
 const StyledEntityView = styled.div`
     position: relative;
     height: 100%;
@@ -2814,6 +3114,7 @@ const EntityView$1 = forwardRef(((properties, reference) => {
 }));
 
 const containers = {
+    DashboardsRenderer: DashboardsRenderer$1,
     EntityView: EntityView$1
 };
 
@@ -3962,7 +4263,7 @@ var index = Object.assign(Object.assign(Object.assign(Object.assign(Object.assig
 
 const {buttons: {LinkButton: LinkButton, PureButton: PureButton, RefreshButton: RefreshButton}, form: {FormLeftRight: FormLeftRight, FormObliterate: FormObliterate, Formbutton: Formbutton, Formitem: Formitem, Formline: Formline}, general: {GlobalStyles: GlobalStyles}, inputs: {Dropdown: Dropdown, EntityPill: EntityPill, EntityPillGroup: EntityPillGroup, InputBox: InputBox, InputDescriptor: InputDescriptor, InputLine: InputLine, InputSwitch: InputSwitch, Itemsline: Itemsline, Select: Select, Slider: Slider, Switch: Switch, Textline: Textline}, markers: {HR: HR, ProgressCircle: ProgressCircle, Spinner: Spinner, Tooltip: Tooltip}, typography: {Heading: Heading, Paragraph: Paragraph}, varia: {CopyableLine: CopyableLine, NewPageLink: NewPageLink, ScrollableLine: ScrollableLine, TextItem: TextItem}} = universal;
 
-const {containers: {EntityView: EntityView}, head: {Head: Head}, notifications: {Notification: Notification, Notifications: Notifications}, sitting: {SittingTray: SittingTray}, toolbars: {HorizontalToolbarButton: HorizontalToolbarButton, ToolbarControls: ToolbarControls, ToolbarGeneral: ToolbarGeneral, ToolbarSpecific: ToolbarSpecific, VerticalToolbarButton: VerticalToolbarButton}} = pluridal;
+const {containers: {DashboardsRenderer: DashboardsRenderer, EntityView: EntityView}, head: {Head: Head}, notifications: {Notification: Notification, Notifications: Notifications}, sitting: {SittingTray: SittingTray}, toolbars: {HorizontalToolbarButton: HorizontalToolbarButton, ToolbarControls: ToolbarControls, ToolbarGeneral: ToolbarGeneral, ToolbarSpecific: ToolbarSpecific, VerticalToolbarButton: VerticalToolbarButton}} = pluridal;
 
-export { CopyableLine, Dropdown, EntityPill, EntityPillGroup, EntityView, FormLeftRight, FormObliterate, Formbutton, Formitem, Formline, GlobalStyles, HR, Head, Heading, HorizontalPositions, HorizontalToolbarButton, InputBox, InputDescriptor, InputLine, InputSwitch, Itemsline, LinkButton, NewPageLink, Notification, Notifications, Paragraph, ProgressCircle, PureButton, RefreshButton, ScrollableLine, Select, SittingTray, SizeTypes, Slider, Spinner, Switch, TextItem, Textline, ToolbarControls, ToolbarGeneral, ToolbarSpecific, Tooltip, VerticalPositions, VerticalToolbarButton, index as default, pluridal, universal };
+export { CopyableLine, DashboardsRenderer, Dropdown, EntityPill, EntityPillGroup, EntityView, FormLeftRight, FormObliterate, Formbutton, Formitem, Formline, GlobalStyles, HR, Head, Heading, HorizontalPositions, HorizontalToolbarButton, InputBox, InputDescriptor, InputLine, InputSwitch, Itemsline, LinkButton, NewPageLink, Notification, Notifications, Paragraph, ProgressCircle, PureButton, RefreshButton, ScrollableLine, Select, SittingTray, SizeTypes, Slider, Spinner, Switch, TextItem, Textline, ToolbarControls, ToolbarGeneral, ToolbarSpecific, Tooltip, VerticalPositions, VerticalToolbarButton, index as default, pluridal, universal };
 //# sourceMappingURL=index.es.js.map