@babylonjs/shared-ui-components 5.28.0 → 5.29.0

package/components/Icon.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-export declare type IconProps = {
-    color?: "dark" | "light";
-    icon: string;
-};
-export declare const Icon: React.FC<IconProps>;
+/// <reference types="react" />
+export declare type IconProps = {
+    color?: "dark" | "light";
+    icon: string;
+};
+export declare const Icon: React.FC<IconProps>;

package/components/Icon.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ClassNames } from "./classNames.js";
-import styles from "./Icon.modules.scss";
-export const Icon = ({ color = "dark", icon }) => {
-    return _jsx("img", { src: icon, style: { width: "30px", height: "30px" }, className: ClassNames({ light: color === "light" }, styles) });
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ClassNames } from "./classNames.js";
+import styles from "./Icon.modules.scss";
+export const Icon = ({ color = "dark", icon }) => {
+    return _jsx("img", { src: icon, style: { width: "30px", height: "30px" }, className: ClassNames({ light: color === "light" }, styles) });
+};
 //# sourceMappingURL=Icon.js.map

package/components/Label.d.ts

@@ -1,7 +1,7 @@
-import type { ReactChild } from "react";
-export declare type LabelProps = {
-    text: string;
-    children?: ReactChild;
-    color?: "dark" | "light";
-};
-export declare const Label: React.FC<LabelProps>;
+import type { ReactChild } from "react";
+export declare type LabelProps = {
+    text: string;
+    children?: ReactChild;
+    color?: "dark" | "light";
+};
+export declare const Label: React.FC<LabelProps>;

package/components/Label.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ClassNames } from "./classNames.js";
-import styles from "./Label.modules.scss";
-export const Label = ({ text, children, color }) => {
-    return (_jsxs("label", { className: ClassNames({ label: true, light: color === "light", dark: color === "dark" }, styles), children: [_jsx("span", { children: text }), children] }));
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ClassNames } from "./classNames.js";
+import styles from "./Label.modules.scss";
+export const Label = ({ text, children, color }) => {
+    return (_jsxs("label", { className: ClassNames({ label: true, light: color === "light", dark: color === "dark" }, styles), children: [_jsx("span", { children: text }), children] }));
+};
 //# sourceMappingURL=Label.js.map

package/components/MessageDialog.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
-export interface MessageDialogProps {
-    message: string;
-    isError: boolean;
-    onClose?: () => void;
-}
-export declare const MessageDialog: React.FC<MessageDialogProps>;
+import * as React from "react";
+export interface MessageDialogProps {
+    message: string;
+    isError: boolean;
+    onClose?: () => void;
+}
+export declare const MessageDialog: React.FC<MessageDialogProps>;

package/components/MessageDialog.js

@@ -1,23 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { ClassNames } from "./classNames.js";
-import styles from "./MessageDialog.modules.scss";
-export const MessageDialog = (props) => {
-    const [message, setMessage] = useState(props.message);
-    const [isError, setIsError] = useState(props.isError);
-    useEffect(() => {
-        setMessage(props.message);
-        setIsError(props.isError);
-    }, [props]);
-    const onClick = () => {
-        setMessage("");
-        if (props.onClose) {
-            props.onClose();
-        }
-    };
-    if (!message) {
-        return null;
-    }
-    return (_jsx("div", { className: styles["dialog-container"], children: _jsxs("div", { className: styles["dialog"], children: [_jsx("div", { className: styles["dialog-message"], children: message }), _jsx("div", { className: styles["dialog-buttons"], children: _jsx("div", { className: ClassNames({ "dialog-button-ok": true, error: isError }, styles), onClick: onClick, children: "OK" }) })] }) }));
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { ClassNames } from "./classNames.js";
+import styles from "./MessageDialog.modules.scss";
+export const MessageDialog = (props) => {
+    const [message, setMessage] = useState(props.message);
+    const [isError, setIsError] = useState(props.isError);
+    useEffect(() => {
+        setMessage(props.message);
+        setIsError(props.isError);
+    }, [props]);
+    const onClick = () => {
+        setMessage("");
+        if (props.onClose) {
+            props.onClose();
+        }
+    };
+    if (!message) {
+        return null;
+    }
+    return (_jsx("div", { className: styles["dialog-container"], children: _jsxs("div", { className: styles["dialog"], children: [_jsx("div", { className: styles["dialog-message"], children: message }), _jsx("div", { className: styles["dialog-buttons"], children: _jsx("div", { className: ClassNames({ "dialog-button-ok": true, error: isError }, styles), onClick: onClick, children: "OK" }) })] }) }));
+};
 //# sourceMappingURL=MessageDialog.js.map

package/components/Toggle.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-export declare type ToggleProps = {
-    toggled: "on" | "mixed" | "off";
-    onToggle?: () => void;
-    padded?: boolean;
-    color?: "dark" | "light";
-};
-export declare const Toggle: React.FC<ToggleProps>;
+/// <reference types="react" />
+export declare type ToggleProps = {
+    toggled: "on" | "mixed" | "off";
+    onToggle?: () => void;
+    padded?: boolean;
+    color?: "dark" | "light";
+};
+export declare const Toggle: React.FC<ToggleProps>;

package/components/Toggle.js

@@ -1,16 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from "./Toggle.modules.scss";
-import { ClassNames } from "./classNames.js";
-import toggleOnIcon_30px from "../imgs/toggleOnIcon_30px.svg";
-import toggleMixedIcon_30px from "../imgs/toggleMixedIcon_30px.svg";
-import toggleOffIcon_30px from "../imgs/toggleOffIcon_30px.svg";
-import { Icon } from "./Icon.js";
-const Icons = {
-    on: toggleOnIcon_30px,
-    mixed: toggleMixedIcon_30px,
-    off: toggleOffIcon_30px,
-};
-export const Toggle = ({ color = "dark", toggled = "off", padded = false, onToggle = () => { } }) => {
-    return (_jsxs("label", { className: ClassNames({ toggle: true, padded }, styles), children: [_jsx("input", { type: "checkbox", style: { display: "none" }, checked: toggled === "on", onChange: () => onToggle() }), _jsx(Icon, { icon: Icons[toggled], color: color })] }));
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "./Toggle.modules.scss";
+import { ClassNames } from "./classNames.js";
+import toggleOnIcon_30px from "../imgs/toggleOnIcon_30px.svg";
+import toggleMixedIcon_30px from "../imgs/toggleMixedIcon_30px.svg";
+import toggleOffIcon_30px from "../imgs/toggleOffIcon_30px.svg";
+import { Icon } from "./Icon.js";
+const Icons = {
+    on: toggleOnIcon_30px,
+    mixed: toggleMixedIcon_30px,
+    off: toggleOffIcon_30px,
+};
+export const Toggle = ({ color = "dark", toggled = "off", padded = false, onToggle = () => { } }) => {
+    return (_jsxs("label", { className: ClassNames({ toggle: true, padded }, styles), children: [_jsx("input", { type: "checkbox", style: { display: "none" }, checked: toggled === "on", onChange: () => onToggle() }), _jsx(Icon, { icon: Icons[toggled], color: color })] }));
+};
 //# sourceMappingURL=Toggle.js.map

package/components/bars/CommandBarComponent.d.ts

@@ -1,16 +1,16 @@
-import type { FC } from "react";
-export interface ICommandBarComponentProps {
-    onSaveButtonClicked?: () => void;
-    onSaveToSnippetButtonClicked?: () => void;
-    onLoadFromSnippetButtonClicked?: () => void;
-    onHelpButtonClicked?: () => void;
-    onGiveFeedbackButtonClicked?: () => void;
-    onSelectButtonClicked?: () => void;
-    onPanButtonClicked?: () => void;
-    onZoomButtonClicked?: () => void;
-    onFitButtonClicked?: () => void;
-    onArtboardColorChanged?: (newColor: string) => void;
-    artboardColor?: string;
-    artboardColorPickerColor?: string;
-}
-export declare const CommandBarComponent: FC<ICommandBarComponentProps>;
+import type { FC } from "react";
+export interface ICommandBarComponentProps {
+    onSaveButtonClicked?: () => void;
+    onSaveToSnippetButtonClicked?: () => void;
+    onLoadFromSnippetButtonClicked?: () => void;
+    onHelpButtonClicked?: () => void;
+    onGiveFeedbackButtonClicked?: () => void;
+    onSelectButtonClicked?: () => void;
+    onPanButtonClicked?: () => void;
+    onZoomButtonClicked?: () => void;
+    onFitButtonClicked?: () => void;
+    onArtboardColorChanged?: (newColor: string) => void;
+    artboardColor?: string;
+    artboardColorPickerColor?: string;
+}
+export declare const CommandBarComponent: FC<ICommandBarComponentProps>;

package/components/bars/CommandBarComponent.js

@@ -1,69 +1,69 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { JoinClassNames } from "../classNames.js";
-import { CommandButtonComponent } from "./CommandButtonComponent.js";
-import { CommandDropdownComponent } from "./CommandDropdownComponent.js";
-import hamburgerIcon from "../../imgs/hamburgerIcon.svg";
-import pointerIcon from "../../imgs/pointerIcon.svg";
-import handIcon from "../../imgs/handIcon.svg";
-import zoomIcon from "../../imgs/zoomIcon.svg";
-import logoIcon from "../../imgs/babylonLogo.svg";
-import canvasFitIcon from "../../imgs/canvasFitIcon.svg";
-import betaFlag from "../../imgs/betaFlag.svg";
-import style from "./CommandBar.modules.scss";
-import { Color3 } from "@babylonjs/core/Maths/math.color.js";
-import { ColorPickerLineComponent } from "../lines/ColorPickerLineComponent.js";
-export const CommandBarComponent = (props) => {
-    return (_jsxs("div", { className: style.commandBar, children: [_jsxs("div", { className: style.commandsLeft, children: [_jsxs("div", { className: style.divider, children: [_jsx("img", { src: logoIcon, color: "white", className: "active", draggable: false }), _jsx(CommandDropdownComponent
-                            //globalState={this.props.globalState}
-                            , { 
-                                //globalState={this.props.globalState}
-                                toRight: true, icon: hamburgerIcon, tooltip: "Options", items: [
-                                    {
-                                        label: "Save",
-                                        onClick: () => {
-                                            props.onSaveButtonClicked && props.onSaveButtonClicked();
-                                        },
-                                    },
-                                    {
-                                        label: "Load",
-                                        fileButton: true,
-                                    },
-                                    {
-                                        label: "Save to snippet",
-                                        onClick: () => {
-                                            props.onSaveToSnippetButtonClicked && props.onSaveToSnippetButtonClicked();
-                                        },
-                                    },
-                                    {
-                                        label: "Load from snippet",
-                                        onClick: () => {
-                                            props.onLoadFromSnippetButtonClicked && props.onLoadFromSnippetButtonClicked();
-                                        },
-                                    },
-                                    {
-                                        label: "Help",
-                                        onClick: () => {
-                                            props.onHelpButtonClicked && props.onHelpButtonClicked();
-                                        },
-                                    },
-                                    {
-                                        label: "Give feedback",
-                                        onClick: () => {
-                                            props.onGiveFeedbackButtonClicked && props.onGiveFeedbackButtonClicked();
-                                        },
-                                    },
-                                ] }), _jsx(CommandButtonComponent, { tooltip: "Select", icon: pointerIcon, shortcut: "S", isActive: false, onClick: () => {
-                                    props.onSelectButtonClicked && props.onSelectButtonClicked();
-                                } }), _jsx(CommandButtonComponent, { tooltip: "Pan", icon: handIcon, shortcut: "P", isActive: false, onClick: () => {
-                                    props.onPanButtonClicked && props.onPanButtonClicked();
-                                } }), _jsx(CommandButtonComponent, { tooltip: "Zoom", shortcut: "Z", icon: zoomIcon, isActive: false, onClick: () => {
-                                    props.onZoomButtonClicked && props.onZoomButtonClicked();
-                                } })] }), _jsx("div", { className: style.divider, children: _jsx(CommandButtonComponent, { tooltip: "Fit to Window", shortcut: "F", icon: canvasFitIcon, isActive: false, onClick: () => {
-                                props.onFitButtonClicked && props.onFitButtonClicked();
-                            } }) }), _jsxs("div", { className: JoinClassNames(style, "divider", "padded"), children: [_jsx("div", { style: { paddingRight: "5px" }, children: "Artboard:" }), props.onArtboardColorChanged && (_jsx(ColorPickerLineComponent, { backgroundColor: props.artboardColorPickerColor || "#888888", value: props.artboardColor ? Color3.FromHexString(props.artboardColor) : new Color3(0, 0, 0), onColorChanged: (newColor) => {
-                                    if (props.onArtboardColorChanged) {
-                                        props.onArtboardColorChanged(newColor);
-                                    }
-                                } }))] })] }), _jsx("div", { className: style.commandsRight, children: _jsx("img", { src: betaFlag, className: style.betaFlag, draggable: false }) })] }));
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JoinClassNames } from "../classNames.js";
+import { CommandButtonComponent } from "./CommandButtonComponent.js";
+import { CommandDropdownComponent } from "./CommandDropdownComponent.js";
+import hamburgerIcon from "../../imgs/hamburgerIcon.svg";
+import pointerIcon from "../../imgs/pointerIcon.svg";
+import handIcon from "../../imgs/handIcon.svg";
+import zoomIcon from "../../imgs/zoomIcon.svg";
+import logoIcon from "../../imgs/babylonLogo.svg";
+import canvasFitIcon from "../../imgs/canvasFitIcon.svg";
+import betaFlag from "../../imgs/betaFlag.svg";
+import style from "./CommandBar.modules.scss";
+import { Color3 } from "@babylonjs/core/Maths/math.color.js";
+import { ColorPickerLineComponent } from "../lines/ColorPickerLineComponent.js";
+export const CommandBarComponent = (props) => {
+    return (_jsxs("div", { className: style.commandBar, children: [_jsxs("div", { className: style.commandsLeft, children: [_jsxs("div", { className: style.divider, children: [_jsx("img", { src: logoIcon, color: "white", className: "active", draggable: false }), _jsx(CommandDropdownComponent
+                            //globalState={this.props.globalState}
+                            , { 
+                                //globalState={this.props.globalState}
+                                toRight: true, icon: hamburgerIcon, tooltip: "Options", items: [
+                                    {
+                                        label: "Save",
+                                        onClick: () => {
+                                            props.onSaveButtonClicked && props.onSaveButtonClicked();
+                                        },
+                                    },
+                                    {
+                                        label: "Load",
+                                        fileButton: true,
+                                    },
+                                    {
+                                        label: "Save to snippet",
+                                        onClick: () => {
+                                            props.onSaveToSnippetButtonClicked && props.onSaveToSnippetButtonClicked();
+                                        },
+                                    },
+                                    {
+                                        label: "Load from snippet",
+                                        onClick: () => {
+                                            props.onLoadFromSnippetButtonClicked && props.onLoadFromSnippetButtonClicked();
+                                        },
+                                    },
+                                    {
+                                        label: "Help",
+                                        onClick: () => {
+                                            props.onHelpButtonClicked && props.onHelpButtonClicked();
+                                        },
+                                    },
+                                    {
+                                        label: "Give feedback",
+                                        onClick: () => {
+                                            props.onGiveFeedbackButtonClicked && props.onGiveFeedbackButtonClicked();
+                                        },
+                                    },
+                                ] }), _jsx(CommandButtonComponent, { tooltip: "Select", icon: pointerIcon, shortcut: "S", isActive: false, onClick: () => {
+                                    props.onSelectButtonClicked && props.onSelectButtonClicked();
+                                } }), _jsx(CommandButtonComponent, { tooltip: "Pan", icon: handIcon, shortcut: "P", isActive: false, onClick: () => {
+                                    props.onPanButtonClicked && props.onPanButtonClicked();
+                                } }), _jsx(CommandButtonComponent, { tooltip: "Zoom", shortcut: "Z", icon: zoomIcon, isActive: false, onClick: () => {
+                                    props.onZoomButtonClicked && props.onZoomButtonClicked();
+                                } })] }), _jsx("div", { className: style.divider, children: _jsx(CommandButtonComponent, { tooltip: "Fit to Window", shortcut: "F", icon: canvasFitIcon, isActive: false, onClick: () => {
+                                props.onFitButtonClicked && props.onFitButtonClicked();
+                            } }) }), _jsxs("div", { className: JoinClassNames(style, "divider", "padded"), children: [_jsx("div", { style: { paddingRight: "5px" }, children: "Artboard:" }), props.onArtboardColorChanged && (_jsx(ColorPickerLineComponent, { backgroundColor: props.artboardColorPickerColor || "#888888", value: props.artboardColor ? Color3.FromHexString(props.artboardColor) : new Color3(0, 0, 0), onColorChanged: (newColor) => {
+                                    if (props.onArtboardColorChanged) {
+                                        props.onArtboardColorChanged(newColor);
+                                    }
+                                } }))] })] }), _jsx("div", { className: style.commandsRight, children: _jsx("img", { src: betaFlag, className: style.betaFlag, draggable: false }) })] }));
+};
 //# sourceMappingURL=CommandBarComponent.js.map

package/components/bars/CommandButtonComponent.d.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
-export interface ICommandButtonComponentProps {
-    tooltip: string;
-    shortcut?: string;
-    icon: string;
-    iconLabel?: string;
-    isActive: boolean;
-    onClick: () => void;
-    disabled?: boolean;
-}
-export declare const CommandButtonComponent: React.FC<ICommandButtonComponentProps>;
+import * as React from "react";
+export interface ICommandButtonComponentProps {
+    tooltip: string;
+    shortcut?: string;
+    icon: string;
+    iconLabel?: string;
+    isActive: boolean;
+    onClick: () => void;
+    disabled?: boolean;
+}
+export declare const CommandButtonComponent: React.FC<ICommandButtonComponentProps>;

package/components/bars/CommandButtonComponent.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ClassNames } from "../classNames.js";
-import style from "./CommandButton.modules.scss";
-export const CommandButtonComponent = (props) => {
-    return (_jsx("div", { className: ClassNames({ commandButton: true, active: props.isActive, disabled: props.disabled }, style), onClick: props.onClick, title: `${props.tooltip} ${props.shortcut ? " (" + props.shortcut + ")" : ""}`, children: _jsx("div", { className: ClassNames({ commandButtonIcon: true }, style), children: _jsx("img", { src: props.icon, title: props.iconLabel, alt: props.iconLabel, draggable: false }) }) }));
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ClassNames } from "../classNames.js";
+import style from "./CommandButton.modules.scss";
+export const CommandButtonComponent = (props) => {
+    return (_jsx("div", { className: ClassNames({ commandButton: true, active: props.isActive, disabled: props.disabled }, style), onClick: props.onClick, title: `${props.tooltip} ${props.shortcut ? " (" + props.shortcut + ")" : ""}`, children: _jsx("div", { className: ClassNames({ commandButtonIcon: true }, style), children: _jsx("img", { src: props.icon, title: props.iconLabel, alt: props.iconLabel, draggable: false }) }) }));
+};
 //# sourceMappingURL=CommandButtonComponent.js.map

package/components/bars/CommandDropdownComponent.d.ts

@@ -1,26 +1,26 @@
-import * as React from "react";
-interface ICommandDropdownComponentProps {
-    icon?: string;
-    tooltip: string;
-    defaultValue?: string;
-    items: {
-        label: string;
-        icon?: string;
-        fileButton?: boolean;
-        onClick?: () => void;
-        onCheck?: (value: boolean) => void;
-        storeKey?: string;
-        isActive?: boolean;
-        defaultValue?: boolean | string;
-        subItems?: string[];
-    }[];
-    toRight?: boolean;
-}
-export declare class CommandDropdownComponent extends React.Component<ICommandDropdownComponentProps, {
-    isExpanded: boolean;
-    activeState: string;
-}> {
-    constructor(props: ICommandDropdownComponentProps);
-    render(): JSX.Element;
-}
-export {};
+import * as React from "react";
+interface ICommandDropdownComponentProps {
+    icon?: string;
+    tooltip: string;
+    defaultValue?: string;
+    items: {
+        label: string;
+        icon?: string;
+        fileButton?: boolean;
+        onClick?: () => void;
+        onCheck?: (value: boolean) => void;
+        storeKey?: string;
+        isActive?: boolean;
+        defaultValue?: boolean | string;
+        subItems?: string[];
+    }[];
+    toRight?: boolean;
+}
+export declare class CommandDropdownComponent extends React.Component<ICommandDropdownComponentProps, {
+    isExpanded: boolean;
+    activeState: string;
+}> {
+    constructor(props: ICommandDropdownComponentProps);
+    render(): JSX.Element;
+}
+export {};

package/components/bars/CommandDropdownComponent.js

@@ -1,49 +1,49 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from "react";
-import { FileButtonLineComponent } from "../lines/FileButtonLineComponent.js";
-import { JoinClassNames } from "../classNames.js";
-import style from "./CommandDropdown.modules.scss";
-export class CommandDropdownComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { isExpanded: false, activeState: "" };
-    }
-    render() {
-        return (_jsxs(_Fragment, { children: [this.state.isExpanded && (_jsx("div", { className: style.commandDropdownBlocker, onClick: () => {
-                        this.setState({ isExpanded: false });
-                    } })), _jsxs("div", { className: style.commandDropdownRoot, children: [_jsxs("div", { className: JoinClassNames(style, "commandDropdown", this.state.isExpanded ? "activated" : ""), title: this.props.tooltip, onClick: () => {
-                                this.setState({ isExpanded: false });
-                                const newState = !this.state.isExpanded;
-                                const pgHost = document.getElementById("embed-host");
-                                if (pgHost) {
-                                    pgHost.style.zIndex = newState ? "0" : "10";
-                                }
-                                this.setState({ isExpanded: newState });
-                            }, children: [this.props.icon && (_jsx("div", { className: style.commandDropdownIcon, children: _jsx("img", { src: this.props.icon }) })), !this.props.icon && _jsx("div", { className: style.commandDropdownActive })] }), this.state.isExpanded && (_jsx("div", { className: JoinClassNames(style, "commandDropdownContent", this.props.toRight ? "toRight" : ""), children: this.props.items.map((m) => {
-                                if (!m.fileButton) {
-                                    return (_jsxs("div", { className: JoinClassNames(style, "commandDropdownLabel", m.isActive ? "active" : ""), onClick: () => {
-                                            if (!m.onClick) {
-                                                this.forceUpdate();
-                                                return;
-                                            }
-                                            if (!m.subItems) {
-                                                m.onClick();
-                                                this.setState({ isExpanded: false, activeState: m.label });
-                                            }
-                                        }, title: m.label, children: [!m.icon && _jsx("div", { className: style.commandDropdownLabelText, children: (m.isActive ? "> " : "") + m.label }), m.icon && (_jsx("div", { className: style.commandDropdownIcon, children: _jsx("img", { src: m.icon }) })), m.onCheck && (_jsx("input", { type: "checkBox", className: style.commandDropdownLabelCheck, onChange: (evt) => {
-                                                    this.forceUpdate();
-                                                    m.onCheck(evt.target.checked);
-                                                }, checked: false })), m.subItems && _jsx("div", { className: style.commandDropdownArrow, children: ">" }), m.subItems && (_jsx("div", { className: style.subItems, children: m.subItems.map((s) => {
-                                                    return (_jsx("div", { className: style.subItem, onClick: () => {
-                                                            m.onClick();
-                                                            this.setState({ isExpanded: false });
-                                                        }, children: _jsx("div", { children: s }) }, s));
-                                                }) }))] }, m.label));
-                                }
-                                else {
-                                    return _jsx(FileButtonLineComponent, { label: "Load", onClick: (file) => console.log("file btn clicked"), accept: ".json" }, m.label);
-                                }
-                            }) }))] })] }));
-    }
-}
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { FileButtonLineComponent } from "../lines/FileButtonLineComponent.js";
+import { JoinClassNames } from "../classNames.js";
+import style from "./CommandDropdown.modules.scss";
+export class CommandDropdownComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { isExpanded: false, activeState: "" };
+    }
+    render() {
+        return (_jsxs(_Fragment, { children: [this.state.isExpanded && (_jsx("div", { className: style.commandDropdownBlocker, onClick: () => {
+                        this.setState({ isExpanded: false });
+                    } })), _jsxs("div", { className: style.commandDropdownRoot, children: [_jsxs("div", { className: JoinClassNames(style, "commandDropdown", this.state.isExpanded ? "activated" : ""), title: this.props.tooltip, onClick: () => {
+                                this.setState({ isExpanded: false });
+                                const newState = !this.state.isExpanded;
+                                const pgHost = document.getElementById("embed-host");
+                                if (pgHost) {
+                                    pgHost.style.zIndex = newState ? "0" : "10";
+                                }
+                                this.setState({ isExpanded: newState });
+                            }, children: [this.props.icon && (_jsx("div", { className: style.commandDropdownIcon, children: _jsx("img", { src: this.props.icon }) })), !this.props.icon && _jsx("div", { className: style.commandDropdownActive })] }), this.state.isExpanded && (_jsx("div", { className: JoinClassNames(style, "commandDropdownContent", this.props.toRight ? "toRight" : ""), children: this.props.items.map((m) => {
+                                if (!m.fileButton) {
+                                    return (_jsxs("div", { className: JoinClassNames(style, "commandDropdownLabel", m.isActive ? "active" : ""), onClick: () => {
+                                            if (!m.onClick) {
+                                                this.forceUpdate();
+                                                return;
+                                            }
+                                            if (!m.subItems) {
+                                                m.onClick();
+                                                this.setState({ isExpanded: false, activeState: m.label });
+                                            }
+                                        }, title: m.label, children: [!m.icon && _jsx("div", { className: style.commandDropdownLabelText, children: (m.isActive ? "> " : "") + m.label }), m.icon && (_jsx("div", { className: style.commandDropdownIcon, children: _jsx("img", { src: m.icon }) })), m.onCheck && (_jsx("input", { type: "checkBox", className: style.commandDropdownLabelCheck, onChange: (evt) => {
+                                                    this.forceUpdate();
+                                                    m.onCheck(evt.target.checked);
+                                                }, checked: false })), m.subItems && _jsx("div", { className: style.commandDropdownArrow, children: ">" }), m.subItems && (_jsx("div", { className: style.subItems, children: m.subItems.map((s) => {
+                                                    return (_jsx("div", { className: style.subItem, onClick: () => {
+                                                            m.onClick();
+                                                            this.setState({ isExpanded: false });
+                                                        }, children: _jsx("div", { children: s }) }, s));
+                                                }) }))] }, m.label));
+                                }
+                                else {
+                                    return _jsx(FileButtonLineComponent, { label: "Load", onClick: (file) => console.log("file btn clicked"), accept: ".json" }, m.label);
+                                }
+                            }) }))] })] }));
+    }
+}
 //# sourceMappingURL=CommandDropdownComponent.js.map

package/components/classNames.d.ts

@@ -1,2 +1,2 @@
-export declare function ClassNames(names: any, styleObject: any): string;
-export declare function JoinClassNames(styleObject: any, ...names: string[]): string;
+export declare function ClassNames(names: any, styleObject: any): string;
+export declare function JoinClassNames(styleObject: any, ...names: string[]): string;

package/components/classNames.js

@@ -1,19 +1,19 @@
-export function ClassNames(names, styleObject) {
-    let string = "";
-    for (const name in names) {
-        if (names[name]) {
-            string += styleObject[name] + " ";
-        }
-    }
-    return string;
-}
-export function JoinClassNames(styleObject, ...names) {
-    let string = "";
-    for (const name of names) {
-        if (name && styleObject[name]) {
-            string += styleObject[name] + " ";
-        }
-    }
-    return string;
-}
+export function ClassNames(names, styleObject) {
+    let string = "";
+    for (const name in names) {
+        if (names[name]) {
+            string += styleObject[name] + " ";
+        }
+    }
+    return string;
+}
+export function JoinClassNames(styleObject, ...names) {
+    let string = "";
+    for (const name of names) {
+        if (name && styleObject[name]) {
+            string += styleObject[name] + " ";
+        }
+    }
+    return string;
+}
 //# sourceMappingURL=classNames.js.map

package/components/colorPicker/ColorComponentEntry.d.ts

@@ -1,18 +1,18 @@
-import * as React from "react";
-import type { LockObject } from "../../tabs/propertyGrids/lockObject";
-export interface IColorComponentEntryProps {
-    value: number;
-    label: string;
-    max?: number;
-    min?: number;
-    onChange: (value: number) => void;
-    disabled?: boolean;
-    lockObject: LockObject;
-}
-export declare class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {
-    constructor(props: IColorComponentEntryProps);
-    updateValue(valueString: string): void;
-    lock(): void;
-    unlock(): void;
-    render(): JSX.Element;
-}
+import * as React from "react";
+import type { LockObject } from "../../tabs/propertyGrids/lockObject";
+export interface IColorComponentEntryProps {
+    value: number;
+    label: string;
+    max?: number;
+    min?: number;
+    onChange: (value: number) => void;
+    disabled?: boolean;
+    lockObject: LockObject;
+}
+export declare class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {
+    constructor(props: IColorComponentEntryProps);
+    updateValue(valueString: string): void;
+    lock(): void;
+    unlock(): void;
+    render(): JSX.Element;
+}