@babylonjs/shared-ui-components 5.28.0 → 5.30.0

package/lines/colorLineComponent.d.ts

@@ -1,40 +1,40 @@
-import * as React from "react";
-import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import { Color4 } from "@babylonjs/core/Maths/math.color.js";
-import type { PropertyChangedEvent } from "../propertyChangedEvent";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
-export interface IColorLineComponentProps {
-    label: string;
-    target?: any;
-    propertyName: string;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    onChange?: () => void;
-    isLinear?: boolean;
-    icon?: string;
-    iconLabel?: string;
-    disableAlpha?: boolean;
-    lockObject: LockObject;
-}
-interface IColorLineComponentState {
-    isExpanded: boolean;
-    color: Color4;
-}
-export declare class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {
-    constructor(props: IColorLineComponentProps);
-    shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState): boolean;
-    getValue(props?: Readonly<IColorLineComponentProps> & Readonly<{
-        children?: React.ReactNode;
-    }>): Color4;
-    setColorFromString(colorString: string): void;
-    setColor(newColor: Color4): void;
-    switchExpandState(): void;
-    updateStateR(value: number): void;
-    updateStateG(value: number): void;
-    updateStateB(value: number): void;
-    updateStateA(value: number): void;
-    copyToClipboard(): void;
-    private _convertToColor;
-    private _toColor3;
-    render(): JSX.Element;
-}
-export {};
+import * as React from "react";
+import type { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Color4 } from "@babylonjs/core/Maths/math.color.js";
+import type { PropertyChangedEvent } from "../propertyChangedEvent";
+import type { LockObject } from "../tabs/propertyGrids/lockObject";
+export interface IColorLineComponentProps {
+    label: string;
+    target?: any;
+    propertyName: string;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onChange?: () => void;
+    isLinear?: boolean;
+    icon?: string;
+    iconLabel?: string;
+    disableAlpha?: boolean;
+    lockObject: LockObject;
+}
+interface IColorLineComponentState {
+    isExpanded: boolean;
+    color: Color4;
+}
+export declare class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {
+    constructor(props: IColorLineComponentProps);
+    shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState): boolean;
+    getValue(props?: Readonly<IColorLineComponentProps> & Readonly<{
+        children?: React.ReactNode;
+    }>): Color4;
+    setColorFromString(colorString: string): void;
+    setColor(newColor: Color4): void;
+    switchExpandState(): void;
+    updateStateR(value: number): void;
+    updateStateG(value: number): void;
+    updateStateB(value: number): void;
+    updateStateA(value: number): void;
+    copyToClipboard(): void;
+    private _convertToColor;
+    private _toColor3;
+    render(): JSX.Element;
+}
+export {};

package/lines/colorLineComponent.js

@@ -1,145 +1,145 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
-import { NumericInputComponent } from "./numericInputComponent.js";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { ColorPickerLineComponent } from "./colorPickerComponent.js";
-import { conflictingValuesPlaceholder } from "./targetsProxy.js";
-import copyIcon from "./copy.svg";
-const emptyColor = new Color4(0, 0, 0, 0);
-export class ColorLineComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { isExpanded: false, color: this.getValue() };
-        const target = this.props.target;
-        target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate
-    }
-    shouldComponentUpdate(nextProps, nextState) {
-        const stateColor = nextState.color;
-        const propsColor = this.getValue(nextProps);
-        if (stateColor !== this.state.color) {
-            nextState.color = stateColor;
-            return true;
-        }
-        if (propsColor !== this.state.color) {
-            nextState.color = propsColor;
-            return true;
-        }
-        if (nextState.isExpanded !== this.state.isExpanded) {
-            return true;
-        }
-        return false;
-    }
-    getValue(props = this.props) {
-        const target = props.target;
-        const property = target[props.propertyName];
-        if (!property)
-            return emptyColor;
-        if (typeof property === "string") {
-            if (property === conflictingValuesPlaceholder) {
-                return emptyColor;
-            }
-            return this._convertToColor(property);
-        }
-        else {
-            if (props.isLinear) {
-                return property.toGammaSpace();
-            }
-            return property.clone();
-        }
-    }
-    setColorFromString(colorString) {
-        const color = this._convertToColor(colorString);
-        this.setColor(color);
-    }
-    setColor(newColor) {
-        this.setState({ color: newColor.clone() });
-        if (this.props.isLinear) {
-            newColor.toLinearSpaceToRef(newColor);
-        }
-        // whether to set properties to color3 or color4
-        const setColor = this.props.disableAlpha ? this._toColor3(newColor) : newColor;
-        const target = this.props.target;
-        const initialValue = target[this.props.propertyName];
-        const value = typeof target[this.props.propertyName] === "string" ? setColor.toHexString() : setColor;
-        // make the change
-        target[this.props.propertyName] = value;
-        // notify observers
-        if (this.props.onPropertyChangedObservable) {
-            this.props.onPropertyChangedObservable.notifyObservers({
-                object: target,
-                property: this.props.propertyName,
-                value,
-                initialValue,
-            });
-        }
-        if (this.props.onChange) {
-            this.props.onChange();
-        }
-    }
-    switchExpandState() {
-        this.setState({ isExpanded: !this.state.isExpanded });
-    }
-    updateStateR(value) {
-        this.setColor(new Color4(value, this.state.color.g, this.state.color.b, this.state.color.a));
-    }
-    updateStateG(value) {
-        this.setColor(new Color4(this.state.color.r, value, this.state.color.b, this.state.color.a));
-    }
-    updateStateB(value) {
-        this.setColor(new Color4(this.state.color.r, this.state.color.g, value, this.state.color.a));
-    }
-    updateStateA(value) {
-        if (this.props.disableAlpha) {
-            return;
-        }
-        this.setColor(new Color4(this.state.color.r, this.state.color.g, this.state.color.b, value));
-    }
-    copyToClipboard() {
-        const element = document.createElement("div");
-        element.textContent = this.state.color.toHexString();
-        document.body.appendChild(element);
-        if (window.getSelection) {
-            const range = document.createRange();
-            range.selectNode(element);
-            window.getSelection().removeAllRanges();
-            window.getSelection().addRange(range);
-        }
-        document.execCommand("copy");
-        element.remove();
-    }
-    _convertToColor(color) {
-        if (color === "" || color === "transparent") {
-            return emptyColor;
-        }
-        if (color.substring(0, 1) !== "#" || (color.length !== 7 && color.length !== 9)) {
-            const d = document.createElement("div");
-            d.style.color = color;
-            document.body.append(d);
-            const rgb = window.getComputedStyle(d).color;
-            document.body.removeChild(d);
-            const rgbArray = rgb
-                .substring(4, rgb.length - 1)
-                .replace(/ /g, "")
-                .split(",");
-            const alpha = rgbArray.length > 3 ? parseInt(rgbArray[3]) / 255 : 1.0;
-            return new Color4(parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255, alpha);
-        }
-        if (this.props.disableAlpha) {
-            const color3 = Color3.FromHexString(color);
-            return new Color4(color3.r, color3.g, color3.b, 1.0);
-        }
-        return Color4.FromHexString(color);
-    }
-    _toColor3(color) {
-        return new Color3(color.r, color.g, color.b);
-    }
-    render() {
-        const chevron = this.state.isExpanded ? _jsx(FontAwesomeIcon, { icon: faMinus }) : _jsx(FontAwesomeIcon, { icon: faPlus });
-        return (_jsxs("div", { className: "color3Line", children: [_jsxs("div", { className: "firstLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: "label", title: this.props.label, children: this.props.label }), _jsx("div", { className: "color3", children: _jsx(ColorPickerLineComponent, { lockObject: this.props.lockObject, linearHint: this.props.isLinear, value: this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color, onColorChanged: (colorString) => {
-                                    this.setColorFromString(colorString);
-                                } }) }), _jsx("div", { className: "copy hoverIcon", onClick: () => this.copyToClipboard(), title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) }), _jsx("div", { className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand", children: chevron })] }), this.state.isExpanded && (_jsxs("div", { className: "secondLine", children: [_jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "r", value: this.state.color.r, onChange: (value) => this.updateStateR(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "g", value: this.state.color.g, onChange: (value) => this.updateStateG(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "b", value: this.state.color.b, onChange: (value) => this.updateStateB(value) }), this.props.disableAlpha || (_jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "a", value: this.state.color.a, onChange: (value) => this.updateStateA(value) }))] }))] }));
-    }
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
+import { NumericInputComponent } from "./numericInputComponent.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { ColorPickerLineComponent } from "./colorPickerComponent.js";
+import { conflictingValuesPlaceholder } from "./targetsProxy.js";
+import copyIcon from "./copy.svg";
+const emptyColor = new Color4(0, 0, 0, 0);
+export class ColorLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { isExpanded: false, color: this.getValue() };
+        const target = this.props.target;
+        target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        const stateColor = nextState.color;
+        const propsColor = this.getValue(nextProps);
+        if (stateColor !== this.state.color) {
+            nextState.color = stateColor;
+            return true;
+        }
+        if (propsColor !== this.state.color) {
+            nextState.color = propsColor;
+            return true;
+        }
+        if (nextState.isExpanded !== this.state.isExpanded) {
+            return true;
+        }
+        return false;
+    }
+    getValue(props = this.props) {
+        const target = props.target;
+        const property = target[props.propertyName];
+        if (!property)
+            return emptyColor;
+        if (typeof property === "string") {
+            if (property === conflictingValuesPlaceholder) {
+                return emptyColor;
+            }
+            return this._convertToColor(property);
+        }
+        else {
+            if (props.isLinear) {
+                return property.toGammaSpace();
+            }
+            return property.clone();
+        }
+    }
+    setColorFromString(colorString) {
+        const color = this._convertToColor(colorString);
+        this.setColor(color);
+    }
+    setColor(newColor) {
+        this.setState({ color: newColor.clone() });
+        if (this.props.isLinear) {
+            newColor.toLinearSpaceToRef(newColor);
+        }
+        // whether to set properties to color3 or color4
+        const setColor = this.props.disableAlpha ? this._toColor3(newColor) : newColor;
+        const target = this.props.target;
+        const initialValue = target[this.props.propertyName];
+        const value = typeof target[this.props.propertyName] === "string" ? setColor.toHexString() : setColor;
+        // make the change
+        target[this.props.propertyName] = value;
+        // notify observers
+        if (this.props.onPropertyChangedObservable) {
+            this.props.onPropertyChangedObservable.notifyObservers({
+                object: target,
+                property: this.props.propertyName,
+                value,
+                initialValue,
+            });
+        }
+        if (this.props.onChange) {
+            this.props.onChange();
+        }
+    }
+    switchExpandState() {
+        this.setState({ isExpanded: !this.state.isExpanded });
+    }
+    updateStateR(value) {
+        this.setColor(new Color4(value, this.state.color.g, this.state.color.b, this.state.color.a));
+    }
+    updateStateG(value) {
+        this.setColor(new Color4(this.state.color.r, value, this.state.color.b, this.state.color.a));
+    }
+    updateStateB(value) {
+        this.setColor(new Color4(this.state.color.r, this.state.color.g, value, this.state.color.a));
+    }
+    updateStateA(value) {
+        if (this.props.disableAlpha) {
+            return;
+        }
+        this.setColor(new Color4(this.state.color.r, this.state.color.g, this.state.color.b, value));
+    }
+    copyToClipboard() {
+        const element = document.createElement("div");
+        element.textContent = this.state.color.toHexString();
+        document.body.appendChild(element);
+        if (window.getSelection) {
+            const range = document.createRange();
+            range.selectNode(element);
+            window.getSelection().removeAllRanges();
+            window.getSelection().addRange(range);
+        }
+        document.execCommand("copy");
+        element.remove();
+    }
+    _convertToColor(color) {
+        if (color === "" || color === "transparent") {
+            return emptyColor;
+        }
+        if (color.substring(0, 1) !== "#" || (color.length !== 7 && color.length !== 9)) {
+            const d = document.createElement("div");
+            d.style.color = color;
+            document.body.append(d);
+            const rgb = window.getComputedStyle(d).color;
+            document.body.removeChild(d);
+            const rgbArray = rgb
+                .substring(4, rgb.length - 1)
+                .replace(/ /g, "")
+                .split(",");
+            const alpha = rgbArray.length > 3 ? parseInt(rgbArray[3]) / 255 : 1.0;
+            return new Color4(parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255, alpha);
+        }
+        if (this.props.disableAlpha) {
+            const color3 = Color3.FromHexString(color);
+            return new Color4(color3.r, color3.g, color3.b, 1.0);
+        }
+        return Color4.FromHexString(color);
+    }
+    _toColor3(color) {
+        return new Color3(color.r, color.g, color.b);
+    }
+    render() {
+        const chevron = this.state.isExpanded ? _jsx(FontAwesomeIcon, { icon: faMinus }) : _jsx(FontAwesomeIcon, { icon: faPlus });
+        return (_jsxs("div", { className: "color3Line", children: [_jsxs("div", { className: "firstLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: "label", title: this.props.label, children: this.props.label }), _jsx("div", { className: "color3", children: _jsx(ColorPickerLineComponent, { lockObject: this.props.lockObject, linearHint: this.props.isLinear, value: this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color, onColorChanged: (colorString) => {
+                                    this.setColorFromString(colorString);
+                                } }) }), _jsx("div", { className: "copy hoverIcon", onClick: () => this.copyToClipboard(), title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) }), _jsx("div", { className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand", children: chevron })] }), this.state.isExpanded && (_jsxs("div", { className: "secondLine", children: [_jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "r", value: this.state.color.r, onChange: (value) => this.updateStateR(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "g", value: this.state.color.g, onChange: (value) => this.updateStateG(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "b", value: this.state.color.b, onChange: (value) => this.updateStateB(value) }), this.props.disableAlpha || (_jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "a", value: this.state.color.a, onChange: (value) => this.updateStateA(value) }))] }))] }));
+    }
+}
 //# sourceMappingURL=colorLineComponent.js.map

package/lines/colorPickerComponent.d.ts

@@ -1,31 +1,31 @@
-import * as React from "react";
-import type { Color4, Color3 } from "@babylonjs/core/Maths/math.color.js";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
-export interface IColorPickerComponentProps {
-    value: Color4 | Color3;
-    linearHint?: boolean;
-    onColorChanged: (newOne: string) => void;
-    icon?: string;
-    iconLabel?: string;
-    shouldPopRight?: boolean;
-    lockObject?: LockObject;
-}
-interface IColorPickerComponentState {
-    pickerEnabled: boolean;
-    color: Color3 | Color4;
-    hex: string;
-}
-export declare class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
-    private _floatRef;
-    private _floatHostRef;
-    constructor(props: IColorPickerComponentProps);
-    syncPositions(): void;
-    shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
-    getHexString(props?: Readonly<IColorPickerComponentProps> & Readonly<{
-        children?: React.ReactNode;
-    }>): string;
-    componentDidUpdate(): void;
-    componentDidMount(): void;
-    render(): JSX.Element;
-}
-export {};
+import * as React from "react";
+import type { Color4, Color3 } from "@babylonjs/core/Maths/math.color.js";
+import type { LockObject } from "../tabs/propertyGrids/lockObject";
+export interface IColorPickerComponentProps {
+    value: Color4 | Color3;
+    linearHint?: boolean;
+    onColorChanged: (newOne: string) => void;
+    icon?: string;
+    iconLabel?: string;
+    shouldPopRight?: boolean;
+    lockObject?: LockObject;
+}
+interface IColorPickerComponentState {
+    pickerEnabled: boolean;
+    color: Color3 | Color4;
+    hex: string;
+}
+export declare class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
+    private _floatRef;
+    private _floatHostRef;
+    constructor(props: IColorPickerComponentProps);
+    syncPositions(): void;
+    shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
+    getHexString(props?: Readonly<IColorPickerComponentProps> & Readonly<{
+        children?: React.ReactNode;
+    }>): string;
+    componentDidUpdate(): void;
+    componentDidMount(): void;
+    render(): JSX.Element;
+}
+export {};

package/lines/colorPickerComponent.js

@@ -1,61 +1,61 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { ColorPicker } from "../colorPicker/colorPicker.js";
-export class ColorPickerLineComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { pickerEnabled: false, color: this.props.value, hex: this.getHexString(props) };
-        this._floatRef = React.createRef();
-        this._floatHostRef = React.createRef();
-    }
-    syncPositions() {
-        const div = this._floatRef.current;
-        const host = this._floatHostRef.current;
-        if (!div || !host) {
-            return;
-        }
-        let top = host.getBoundingClientRect().top;
-        const height = div.getBoundingClientRect().height;
-        if (top + height + 10 > window.innerHeight) {
-            top = window.innerHeight - height - 10;
-        }
-        div.style.top = top + "px";
-        if (!this.props.shouldPopRight) {
-            div.style.left = host.getBoundingClientRect().left - div.getBoundingClientRect().width + "px";
-        }
-        else {
-            div.style.left = host.getBoundingClientRect().left + "px";
-        }
-    }
-    shouldComponentUpdate(nextProps, nextState) {
-        const diffProps = this.getHexString(nextProps) !== this.getHexString();
-        if (diffProps) {
-            nextState.color = nextProps.value;
-            nextState.hex = this.getHexString(nextProps);
-        }
-        return diffProps || nextState.hex !== this.state.hex || nextState.pickerEnabled !== this.state.pickerEnabled;
-    }
-    getHexString(props = this.props) {
-        return props.value.toHexString();
-    }
-    componentDidUpdate() {
-        this.syncPositions();
-    }
-    componentDidMount() {
-        this.syncPositions();
-    }
-    render() {
-        return (_jsxs("div", { className: "color-picker", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: "color-rect-background", ref: this._floatHostRef, onClick: () => this.setState({ pickerEnabled: true }), children: _jsx("div", { className: "color-rect", style: { background: this.state.hex } }) }), this.state.pickerEnabled && (_jsx(_Fragment, { children: _jsx("div", { className: "color-picker-cover", onClick: (evt) => {
-                            var _a, _b;
-                            if (evt.target !== ((_b = (_a = this._floatRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) === null || _b === void 0 ? void 0 : _b.querySelector(".color-picker-cover"))) {
-                                return;
-                            }
-                            this.setState({ pickerEnabled: false });
-                        }, children: _jsx("div", { className: "color-picker-float", ref: this._floatRef, children: _jsx(ColorPicker, { lockObject: this.props.lockObject || {}, color: this.state.color, linearhint: this.props.linearHint, onColorChanged: (color) => {
-                                    const hex = color.toHexString();
-                                    this.setState({ hex, color });
-                                    this.props.onColorChanged(hex);
-                                } }) }) }) }))] }));
-    }
-}
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ColorPicker } from "../colorPicker/colorPicker.js";
+export class ColorPickerLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { pickerEnabled: false, color: this.props.value, hex: this.getHexString(props) };
+        this._floatRef = React.createRef();
+        this._floatHostRef = React.createRef();
+    }
+    syncPositions() {
+        const div = this._floatRef.current;
+        const host = this._floatHostRef.current;
+        if (!div || !host) {
+            return;
+        }
+        let top = host.getBoundingClientRect().top;
+        const height = div.getBoundingClientRect().height;
+        if (top + height + 10 > window.innerHeight) {
+            top = window.innerHeight - height - 10;
+        }
+        div.style.top = top + "px";
+        if (!this.props.shouldPopRight) {
+            div.style.left = host.getBoundingClientRect().left - div.getBoundingClientRect().width + "px";
+        }
+        else {
+            div.style.left = host.getBoundingClientRect().left + "px";
+        }
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        const diffProps = this.getHexString(nextProps) !== this.getHexString();
+        if (diffProps) {
+            nextState.color = nextProps.value;
+            nextState.hex = this.getHexString(nextProps);
+        }
+        return diffProps || nextState.hex !== this.state.hex || nextState.pickerEnabled !== this.state.pickerEnabled;
+    }
+    getHexString(props = this.props) {
+        return props.value.toHexString();
+    }
+    componentDidUpdate() {
+        this.syncPositions();
+    }
+    componentDidMount() {
+        this.syncPositions();
+    }
+    render() {
+        return (_jsxs("div", { className: "color-picker", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: "color-rect-background", ref: this._floatHostRef, onClick: () => this.setState({ pickerEnabled: true }), children: _jsx("div", { className: "color-rect", style: { background: this.state.hex } }) }), this.state.pickerEnabled && (_jsx(_Fragment, { children: _jsx("div", { className: "color-picker-cover", onClick: (evt) => {
+                            var _a, _b;
+                            if (evt.target !== ((_b = (_a = this._floatRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) === null || _b === void 0 ? void 0 : _b.querySelector(".color-picker-cover"))) {
+                                return;
+                            }
+                            this.setState({ pickerEnabled: false });
+                        }, children: _jsx("div", { className: "color-picker-float", ref: this._floatRef, children: _jsx(ColorPicker, { lockObject: this.props.lockObject || {}, color: this.state.color, linearhint: this.props.linearHint, onColorChanged: (color) => {
+                                    const hex = color.toHexString();
+                                    this.setState({ hex, color });
+                                    this.props.onColorChanged(hex);
+                                } }) }) }) }))] }));
+    }
+}
 //# sourceMappingURL=colorPickerComponent.js.map

package/lines/draggableLineComponent.d.ts

@@ -1,9 +1,9 @@
-import * as React from "react";
-export interface IButtonLineComponentProps {
-    data: string;
-    tooltip: string;
-}
-export declare class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {
-    constructor(props: IButtonLineComponentProps);
-    render(): JSX.Element;
-}
+import * as React from "react";
+export interface IButtonLineComponentProps {
+    data: string;
+    tooltip: string;
+}
+export declare class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {
+    constructor(props: IButtonLineComponentProps);
+    render(): JSX.Element;
+}

package/lines/draggableLineComponent.js

@@ -1,13 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-export class DraggableLineComponent extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        return (_jsx("div", { className: "draggableLine", title: this.props.tooltip, draggable: true, onDragStart: (event) => {
-                event.dataTransfer.setData("babylonjs-gui-node", this.props.data);
-            }, children: this.props.data.replace("Block", "") }));
-    }
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+export class DraggableLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (_jsx("div", { className: "draggableLine", title: this.props.tooltip, draggable: true, onDragStart: (event) => {
+                event.dataTransfer.setData("babylonjs-gui-node", this.props.data);
+            }, children: this.props.data.replace("Block", "") }));
+    }
+}
 //# sourceMappingURL=draggableLineComponent.js.map

package/lines/fileButtonLineComponent.d.ts

@@ -1,17 +1,17 @@
-import * as React from "react";
-interface IFileButtonLineComponentProps {
-    label: string;
-    onClick: (file: File) => void;
-    accept: string;
-    icon?: string;
-    iconLabel?: string;
-}
-export declare class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
-    private static _IDGenerator;
-    private _id;
-    private _uploadInputRef;
-    constructor(props: IFileButtonLineComponentProps);
-    onChange(evt: any): void;
-    render(): JSX.Element;
-}
-export {};
+import * as React from "react";
+interface IFileButtonLineComponentProps {
+    label: string;
+    onClick: (file: File) => void;
+    accept: string;
+    icon?: string;
+    iconLabel?: string;
+}
+export declare class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
+    private static _IDGenerator;
+    private _id;
+    private _uploadInputRef;
+    constructor(props: IFileButtonLineComponentProps);
+    onChange(evt: any): void;
+    render(): JSX.Element;
+}
+export {};