@babylonjs/shared-ui-components 9.0.0 → 9.1.0

package/components/reactGraphSystem/NodeRenderer.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentType, PropsWithChildren } from "react";
-import type { Nullable } from "@babylonjs/core/types.js";
+import { type ComponentType, type PropsWithChildren } from "react";
+import { type Nullable } from "@babylonjs/core/types.js";
 export type IVisualRecordsType = Record<string, {
     x: number;
     y: number;

package/components/reactGraphSystem/NodeRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"NodeRenderer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/NodeRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentType, PropsWithChildren } from \"react\";\r\nimport { useState, useEffect, useMemo } from \"react\";\r\nimport { GraphContainer } from \"./GraphContainer\";\r\nimport { GraphLine } from \"./GraphLine\";\r\nimport { SingleGraphNode } from \"./GraphNode\";\r\nimport { GraphNodesContainer } from \"./GraphNodesContainer\";\r\nimport { GraphLinesContainer } from \"./GraphLinesContainer\";\r\nimport { GraphContextManager } from \"./GraphContextManager\";\r\nimport type { Nullable } from \"core/types\";\r\n\r\nconst FullscreenStyle = { width: \"100%\", height: \"100%\" };\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport type IVisualRecordsType = Record<string, { x: number; y: number }>;\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport type IConnectionType = { id: string; sourceId: string; targetId: string };\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport type ICustomDataType = { type: string; value: any };\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport type INodeType = { id: string; label: string; customData?: ICustomDataType };\r\n\r\n/**\r\n * props for the node renderer\r\n */\r\nexport interface INodeRendererProps {\r\n    /**\r\n     * array of connections between nodes\r\n     */\r\n    connections: IConnectionType[];\r\n    /**\r\n     * function called when a new connection is created\r\n     */\r\n    updateConnections: (sourceId: string, targetId: string) => void;\r\n    /**\r\n     * function called when a connection is deleted\r\n     */\r\n    deleteLine: (lineId: string) => void;\r\n    /**\r\n     * function called when a node is deleted\r\n     */\r\n    deleteNode: (nodeId: string) => void;\r\n    /**\r\n     * array of all nodes\r\n     */\r\n    nodes: INodeType[];\r\n    /**\r\n     * id of the node to highlight\r\n     */\r\n    highlightedNode?: Nullable<string>;\r\n    /**\r\n     * function to be called if a node is selected\r\n     */\r\n    selectNode?: (nodeId: Nullable<string>) => void;\r\n    /**\r\n     * id of this renderer\r\n     */\r\n    id: string;\r\n    /**\r\n     * optional list of custom components to be rendered inside nodes of\r\n     * a certain type\r\n     */\r\n    customComponents?: Record<string, ComponentType<any>>;\r\n}\r\n\r\n/**\r\n * This component is a bridge between the app logic related to the graph, and the actual rendering\r\n * of it. It manages the nodes' positions and selection states.\r\n * @param props\r\n * @returns\r\n */\r\nexport const NodeRenderer = (props: PropsWithChildren<INodeRendererProps>) => {\r\n    const { nodes, connections, updateConnections, highlightedNode } = props;\r\n    // Store the nodes positions\r\n    const [pos, setPos] = useState<IVisualRecordsType>({});\r\n    const [selectedLine, setSelectedLine] = useState<string | null>(null);\r\n    const [selectedNode, setSelectedNode] = useState<string | null>(null);\r\n\r\n    const updatePos = (id: string, x: number, y: number) => {\r\n        setPos((currentPos) => {\r\n            const currPos = currentPos[id] || { x: 0, y: 0 };\r\n            currentPos[id] = { x: currPos.x + x, y: currPos.y + y };\r\n            return { ...currentPos };\r\n        });\r\n    };\r\n\r\n    const onNodesConnected = (sourceId: string, targetId: string) => {\r\n        updateConnections(sourceId, targetId);\r\n    };\r\n\r\n    const onLineSelected = (lineId: string) => {\r\n        setSelectedLine(lineId);\r\n        setSelectedNode(null);\r\n    };\r\n\r\n    const onNodeSelected = (nodeId: string) => {\r\n        setSelectedNode(nodeId);\r\n        setSelectedLine(null);\r\n    };\r\n\r\n    useEffect(() => {\r\n        props.selectNode && props.selectNode(selectedNode);\r\n    }, [selectedNode]);\r\n\r\n    const onKeyDown = (evt: KeyboardEvent) => {\r\n        if (evt.key === \"Delete\") {\r\n            if (selectedLine) {\r\n                props.deleteLine(selectedLine);\r\n            } else if (selectedNode) {\r\n                props.deleteNode(selectedNode);\r\n            }\r\n        }\r\n    };\r\n\r\n    useEffect(() => {\r\n        document.addEventListener(\"keydown\", onKeyDown);\r\n        return () => {\r\n            document.removeEventListener(\"keydown\", onKeyDown);\r\n        };\r\n    }, [selectedLine, selectedNode]);\r\n\r\n    const graphContext = useMemo(() => ({ updatePos, onNodesConnected, onLineSelected, onNodeSelected }), []);\r\n    return (\r\n        <div style={FullscreenStyle}>\r\n            <GraphContextManager.Provider value={graphContext}>\r\n                <GraphContainer>\r\n                    <GraphNodesContainer id={props.id} onNodeMoved={updatePos}>\r\n                        {nodes.map(({ id, label, customData }) => {\r\n                            const posInRecord = pos[id] || { x: 0, y: 0 };\r\n                            // eslint-disable-next-line @typescript-eslint/naming-convention\r\n                            const CustomComponent = customData && customData.type && props.customComponents && props.customComponents[customData.type];\r\n                            return (\r\n                                <SingleGraphNode\r\n                                    parentContainerId={props.id}\r\n                                    key={id}\r\n                                    id={id}\r\n                                    name={label}\r\n                                    x={posInRecord.x}\r\n                                    y={posInRecord.y}\r\n                                    selected={id === selectedNode}\r\n                                    highlighted={id === highlightedNode}\r\n                                >\r\n                                    {CustomComponent && <CustomComponent {...customData.value} />}\r\n                                </SingleGraphNode>\r\n                            );\r\n                        })}\r\n                    </GraphNodesContainer>\r\n                    <GraphLinesContainer id={props.id}>\r\n                        {connections.map(({ id, sourceId, targetId }) => {\r\n                            const sourcePos = pos[sourceId] || { x: 0, y: 0 };\r\n                            const targetPos = pos[targetId] || { x: 0, y: 0 };\r\n                            return <GraphLine key={id} id={id} x1={sourcePos.x} y1={sourcePos.y} x2={targetPos.x} y2={targetPos.y} selected={id === selectedLine} />;\r\n                        })}\r\n                    </GraphLinesContainer>\r\n                </GraphContainer>\r\n            </GraphContextManager.Provider>\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"NodeRenderer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/NodeRenderer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA8C,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACjG,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5D,MAAM,eAAe,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAsD1D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAA4C,EAAE,EAAE;IACzE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;IACzE,4BAA4B;IAC5B,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAqB,EAAE,CAAC,CAAC;IACvD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACtE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAEtE,MAAM,SAAS,GAAG,CAAC,EAAU,EAAE,CAAS,EAAE,CAAS,EAAE,EAAE;QACnD,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE;YAClB,MAAM,OAAO,GAAG,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;YACjD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;YACxD,OAAO,EAAE,GAAG,UAAU,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,CAAC,QAAgB,EAAE,QAAgB,EAAE,EAAE;QAC5D,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,EAAE;QACtC,eAAe,CAAC,MAAM,CAAC,CAAC;QACxB,eAAe,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,EAAE;QACtC,eAAe,CAAC,MAAM,CAAC,CAAC;QACxB,eAAe,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,SAAS,GAAG,CAAC,GAAkB,EAAE,EAAE;QACrC,IAAI,GAAG,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YACvB,IAAI,YAAY,EAAE,CAAC;gBACf,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;YACnC,CAAC;iBAAM,IAAI,YAAY,EAAE,CAAC;gBACtB,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;YACnC,CAAC;QACL,CAAC;IACL,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACvD,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjC,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,cAAc,EAAE,cAAc,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAC1G,OAAO,CACH,cAAK,KAAK,EAAE,eAAe,YACvB,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC7C,MAAC,cAAc,eACX,KAAC,mBAAmB,IAAC,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,WAAW,EAAE,SAAS,YACpD,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE;4BACrC,MAAM,WAAW,GAAG,GAAG,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;4BAC9C,gEAAgE;4BAChE,MAAM,eAAe,GAAG,UAAU,IAAI,UAAU,CAAC,IAAI,IAAI,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,gBAAgB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;4BAC3H,OAAO,CACH,KAAC,eAAe,IACZ,iBAAiB,EAAE,KAAK,CAAC,EAAE,EAE3B,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,KAAK,EACX,CAAC,EAAE,WAAW,CAAC,CAAC,EAChB,CAAC,EAAE,WAAW,CAAC,CAAC,EAChB,QAAQ,EAAE,EAAE,KAAK,YAAY,EAC7B,WAAW,EAAE,EAAE,KAAK,eAAe,YAElC,eAAe,IAAI,KAAC,eAAe,OAAK,UAAU,CAAC,KAAK,GAAI,IARxD,EAAE,CASO,CACrB,CAAC;wBACN,CAAC,CAAC,GACgB,EACtB,KAAC,mBAAmB,IAAC,EAAE,EAAE,KAAK,CAAC,EAAE,YAC5B,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;4BAC5C,MAAM,SAAS,GAAG,GAAG,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;4BAClD,MAAM,SAAS,GAAG,GAAG,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;4BAClD,OAAO,KAAC,SAAS,IAAU,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,SAAS,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,YAAY,IAA7G,EAAE,CAA+G,CAAC;wBAC7I,CAAC,CAAC,GACgB,IACT,GACU,GAC7B,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { type ComponentType, type PropsWithChildren, useState, useEffect, useMemo } from \"react\";\r\nimport { GraphContainer } from \"./GraphContainer\";\r\nimport { GraphLine } from \"./GraphLine\";\r\nimport { SingleGraphNode } from \"./GraphNode\";\r\nimport { GraphNodesContainer } from \"./GraphNodesContainer\";\r\nimport { GraphLinesContainer } from \"./GraphLinesContainer\";\r\nimport { GraphContextManager } from \"./GraphContextManager\";\r\nimport { type Nullable } from \"core/types\";\r\n\r\nconst FullscreenStyle = { width: \"100%\", height: \"100%\" };\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport type IVisualRecordsType = Record<string, { x: number; y: number }>;\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport type IConnectionType = { id: string; sourceId: string; targetId: string };\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport type ICustomDataType = { type: string; value: any };\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport type INodeType = { id: string; label: string; customData?: ICustomDataType };\r\n\r\n/**\r\n * props for the node renderer\r\n */\r\nexport interface INodeRendererProps {\r\n    /**\r\n     * array of connections between nodes\r\n     */\r\n    connections: IConnectionType[];\r\n    /**\r\n     * function called when a new connection is created\r\n     */\r\n    updateConnections: (sourceId: string, targetId: string) => void;\r\n    /**\r\n     * function called when a connection is deleted\r\n     */\r\n    deleteLine: (lineId: string) => void;\r\n    /**\r\n     * function called when a node is deleted\r\n     */\r\n    deleteNode: (nodeId: string) => void;\r\n    /**\r\n     * array of all nodes\r\n     */\r\n    nodes: INodeType[];\r\n    /**\r\n     * id of the node to highlight\r\n     */\r\n    highlightedNode?: Nullable<string>;\r\n    /**\r\n     * function to be called if a node is selected\r\n     */\r\n    selectNode?: (nodeId: Nullable<string>) => void;\r\n    /**\r\n     * id of this renderer\r\n     */\r\n    id: string;\r\n    /**\r\n     * optional list of custom components to be rendered inside nodes of\r\n     * a certain type\r\n     */\r\n    customComponents?: Record<string, ComponentType<any>>;\r\n}\r\n\r\n/**\r\n * This component is a bridge between the app logic related to the graph, and the actual rendering\r\n * of it. It manages the nodes' positions and selection states.\r\n * @param props\r\n * @returns\r\n */\r\nexport const NodeRenderer = (props: PropsWithChildren<INodeRendererProps>) => {\r\n    const { nodes, connections, updateConnections, highlightedNode } = props;\r\n    // Store the nodes positions\r\n    const [pos, setPos] = useState<IVisualRecordsType>({});\r\n    const [selectedLine, setSelectedLine] = useState<string | null>(null);\r\n    const [selectedNode, setSelectedNode] = useState<string | null>(null);\r\n\r\n    const updatePos = (id: string, x: number, y: number) => {\r\n        setPos((currentPos) => {\r\n            const currPos = currentPos[id] || { x: 0, y: 0 };\r\n            currentPos[id] = { x: currPos.x + x, y: currPos.y + y };\r\n            return { ...currentPos };\r\n        });\r\n    };\r\n\r\n    const onNodesConnected = (sourceId: string, targetId: string) => {\r\n        updateConnections(sourceId, targetId);\r\n    };\r\n\r\n    const onLineSelected = (lineId: string) => {\r\n        setSelectedLine(lineId);\r\n        setSelectedNode(null);\r\n    };\r\n\r\n    const onNodeSelected = (nodeId: string) => {\r\n        setSelectedNode(nodeId);\r\n        setSelectedLine(null);\r\n    };\r\n\r\n    useEffect(() => {\r\n        props.selectNode && props.selectNode(selectedNode);\r\n    }, [selectedNode]);\r\n\r\n    const onKeyDown = (evt: KeyboardEvent) => {\r\n        if (evt.key === \"Delete\") {\r\n            if (selectedLine) {\r\n                props.deleteLine(selectedLine);\r\n            } else if (selectedNode) {\r\n                props.deleteNode(selectedNode);\r\n            }\r\n        }\r\n    };\r\n\r\n    useEffect(() => {\r\n        document.addEventListener(\"keydown\", onKeyDown);\r\n        return () => {\r\n            document.removeEventListener(\"keydown\", onKeyDown);\r\n        };\r\n    }, [selectedLine, selectedNode]);\r\n\r\n    const graphContext = useMemo(() => ({ updatePos, onNodesConnected, onLineSelected, onNodeSelected }), []);\r\n    return (\r\n        <div style={FullscreenStyle}>\r\n            <GraphContextManager.Provider value={graphContext}>\r\n                <GraphContainer>\r\n                    <GraphNodesContainer id={props.id} onNodeMoved={updatePos}>\r\n                        {nodes.map(({ id, label, customData }) => {\r\n                            const posInRecord = pos[id] || { x: 0, y: 0 };\r\n                            // eslint-disable-next-line @typescript-eslint/naming-convention\r\n                            const CustomComponent = customData && customData.type && props.customComponents && props.customComponents[customData.type];\r\n                            return (\r\n                                <SingleGraphNode\r\n                                    parentContainerId={props.id}\r\n                                    key={id}\r\n                                    id={id}\r\n                                    name={label}\r\n                                    x={posInRecord.x}\r\n                                    y={posInRecord.y}\r\n                                    selected={id === selectedNode}\r\n                                    highlighted={id === highlightedNode}\r\n                                >\r\n                                    {CustomComponent && <CustomComponent {...customData.value} />}\r\n                                </SingleGraphNode>\r\n                            );\r\n                        })}\r\n                    </GraphNodesContainer>\r\n                    <GraphLinesContainer id={props.id}>\r\n                        {connections.map(({ id, sourceId, targetId }) => {\r\n                            const sourcePos = pos[sourceId] || { x: 0, y: 0 };\r\n                            const targetPos = pos[targetId] || { x: 0, y: 0 };\r\n                            return <GraphLine key={id} id={id} x1={sourcePos.x} y1={sourcePos.y} x2={targetPos.x} y2={targetPos.y} selected={id === selectedLine} />;\r\n                        })}\r\n                    </GraphLinesContainer>\r\n                </GraphContainer>\r\n            </GraphContextManager.Provider>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/constToOptionsMaps.js.map

@@ -1 +1 @@
-{"version":3,"file":"constToOptionsMaps.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/constToOptionsMaps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,6CAA+B;AACnD,OAAO,EAAE,cAAc,EAAE,oDAAsC;AAE/D;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE;IACxD,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,mBAAmB,EAAE;IACjE,EAAE,KAAK,EAAE,4BAA4B,EAAE,KAAK,EAAE,SAAS,CAAC,8BAA8B,EAAE;IACxF,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,CAAC,gBAAgB,EAAE;IAC3D,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,CAAC,mBAAmB,EAAE;IAChE,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,kBAAkB,EAAE;IAChE,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,SAAS,CAAC,qBAAqB,EAAE;IACtE,EAAE,KAAK,EAAE,iCAAiC,EAAE,KAAK,EAAE,SAAS,CAAC,6BAA6B,EAAE;IAC5F,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,oBAAoB,EAAE;IAClE,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE;IACxD,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,SAAS,CAAC,sBAAsB,EAAE;CACzE,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,CAAC,aAAa,EAAE;IACrD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;IAC/D,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,CAAC,qBAAqB,EAAE;IACtE,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,CAAC,gBAAgB,EAAE;IAC5D,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;IAC/D,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;CAClE,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAE3B;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,aAAa,EAAE;IACpD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,YAAY,EAAE;IACnD,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,CAAC,SAAS,EAAE;IAC5C,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,CAAC,cAAc,EAAE;IACtD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,CAAC,cAAc,EAAE;CACzD,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAE3B;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG;IACxC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,CAAC,iBAAiB,EAAE;IACzD,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,cAAc,CAAC,eAAe,EAAE;IACrD,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,uBAAuB,EAAE;IACrE,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,cAAc,CAAC,6BAA6B,EAAE;CACpF,CAAC","sourcesContent":["import { Constants } from \"core/Engines/constants\";\r\nimport { ParticleSystem } from \"core/Particles/particleSystem\";\r\n\r\n/**\r\n * Used by both particleSystem and alphaBlendModes\r\n */\r\nexport const CommonBlendModes = [\r\n    { label: \"Maximized\", value: Constants.ALPHA_MAXIMIZED },\r\n    { label: \"Pre-multiplied\", value: Constants.ALPHA_PREMULTIPLIED },\r\n    { label: \"Pre-multiplied Porter Duff\", value: Constants.ALPHA_PREMULTIPLIED_PORTERDUFF },\r\n    { label: \"Screen Mode\", value: Constants.ALPHA_SCREENMODE },\r\n    { label: \"OneOne OneOne\", value: Constants.ALPHA_ONEONE_ONEONE },\r\n    { label: \"Alpha to Color\", value: Constants.ALPHA_ALPHATOCOLOR },\r\n    { label: \"Reverse One Minus\", value: Constants.ALPHA_REVERSEONEMINUS },\r\n    { label: \"Source+Dest * (1 - SourceAlpha)\", value: Constants.ALPHA_SRC_DSTONEMINUSSRCALPHA },\r\n    { label: \"OneOne OneZero\", value: Constants.ALPHA_ONEONE_ONEZERO },\r\n    { label: \"Exclusion\", value: Constants.ALPHA_EXCLUSION },\r\n    { label: \"Layer Accumulate\", value: Constants.ALPHA_LAYER_ACCUMULATE },\r\n];\r\n\r\n/**\r\n * Used to populated the blendMode dropdown in our various tools (Node Editor, Inspector, etc.)\r\n * The below ParticleSystem consts were defined before new Engine alpha blend modes were added, so we have to reference\r\n * the ParticleSystem.FOO consts explicitly (as the underlying const values are different - they get mapped to engine consts within baseParticleSystem.ts)\r\n */\r\nexport const BlendModeOptions = [\r\n    { label: \"Add\", value: ParticleSystem.BLENDMODE_ADD },\r\n    { label: \"Multiply\", value: ParticleSystem.BLENDMODE_MULTIPLY },\r\n    { label: \"Multiply Add\", value: ParticleSystem.BLENDMODE_MULTIPLYADD },\r\n    { label: \"One One\", value: ParticleSystem.BLENDMODE_ONEONE },\r\n    { label: \"Standard\", value: ParticleSystem.BLENDMODE_STANDARD },\r\n    { label: \"Subtract\", value: ParticleSystem.BLENDMODE_SUBTRACT },\r\n].concat(CommonBlendModes);\r\n\r\n/**\r\n * Used to populated the alphaMode dropdown in our various tools (Node Editor, Inspector, etc.)\r\n */\r\nexport const AlphaModeOptions = [\r\n    { label: \"Combine\", value: Constants.ALPHA_COMBINE },\r\n    { label: \"One One\", value: Constants.ALPHA_ONEONE },\r\n    { label: \"Add\", value: Constants.ALPHA_ADD },\r\n    { label: \"Subtract\", value: Constants.ALPHA_SUBTRACT },\r\n    { label: \"Multiply\", value: Constants.ALPHA_MULTIPLY },\r\n].concat(CommonBlendModes);\r\n\r\n/**\r\n * Used to populate the billboardMode dropdown for particle systems.\r\n */\r\nexport const ParticleBillboardModeOptions = [\r\n    { label: \"All\", value: ParticleSystem.BILLBOARDMODE_ALL },\r\n    { label: \"Y\", value: ParticleSystem.BILLBOARDMODE_Y },\r\n    { label: \"Stretched\", value: ParticleSystem.BILLBOARDMODE_STRETCHED },\r\n    { label: \"Stretched Local\", value: ParticleSystem.BILLBOARDMODE_STRETCHED_LOCAL },\r\n];\r\n"]}
+{"version":3,"file":"constToOptionsMaps.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/constToOptionsMaps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE;IACxD,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,mBAAmB,EAAE;IACjE,EAAE,KAAK,EAAE,4BAA4B,EAAE,KAAK,EAAE,SAAS,CAAC,8BAA8B,EAAE;IACxF,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,CAAC,gBAAgB,EAAE;IAC3D,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,CAAC,mBAAmB,EAAE;IAChE,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,kBAAkB,EAAE;IAChE,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,SAAS,CAAC,qBAAqB,EAAE;IACtE,EAAE,KAAK,EAAE,iCAAiC,EAAE,KAAK,EAAE,SAAS,CAAC,6BAA6B,EAAE;IAC5F,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,oBAAoB,EAAE;IAClE,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE;IACxD,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,SAAS,CAAC,sBAAsB,EAAE;CACzE,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,CAAC,aAAa,EAAE;IACrD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;IAC/D,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,CAAC,qBAAqB,EAAE;IACtE,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,CAAC,gBAAgB,EAAE;IAC5D,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;IAC/D,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;CAClE,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAE3B;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,aAAa,EAAE;IACpD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,YAAY,EAAE;IACnD,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,CAAC,SAAS,EAAE;IAC5C,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,CAAC,cAAc,EAAE;IACtD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,CAAC,cAAc,EAAE;CACzD,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAE3B;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG;IACxC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,CAAC,iBAAiB,EAAE;IACzD,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,cAAc,CAAC,eAAe,EAAE;IACrD,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,uBAAuB,EAAE;IACrE,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,cAAc,CAAC,6BAA6B,EAAE;CACpF,CAAC","sourcesContent":["import { Constants } from \"core/Engines/constants\";\r\nimport { ParticleSystem } from \"core/Particles/particleSystem\";\r\n\r\n/**\r\n * Used by both particleSystem and alphaBlendModes\r\n */\r\nexport const CommonBlendModes = [\r\n    { label: \"Maximized\", value: Constants.ALPHA_MAXIMIZED },\r\n    { label: \"Pre-multiplied\", value: Constants.ALPHA_PREMULTIPLIED },\r\n    { label: \"Pre-multiplied Porter Duff\", value: Constants.ALPHA_PREMULTIPLIED_PORTERDUFF },\r\n    { label: \"Screen Mode\", value: Constants.ALPHA_SCREENMODE },\r\n    { label: \"OneOne OneOne\", value: Constants.ALPHA_ONEONE_ONEONE },\r\n    { label: \"Alpha to Color\", value: Constants.ALPHA_ALPHATOCOLOR },\r\n    { label: \"Reverse One Minus\", value: Constants.ALPHA_REVERSEONEMINUS },\r\n    { label: \"Source+Dest * (1 - SourceAlpha)\", value: Constants.ALPHA_SRC_DSTONEMINUSSRCALPHA },\r\n    { label: \"OneOne OneZero\", value: Constants.ALPHA_ONEONE_ONEZERO },\r\n    { label: \"Exclusion\", value: Constants.ALPHA_EXCLUSION },\r\n    { label: \"Layer Accumulate\", value: Constants.ALPHA_LAYER_ACCUMULATE },\r\n];\r\n\r\n/**\r\n * Used to populated the blendMode dropdown in our various tools (Node Editor, Inspector, etc.)\r\n * The below ParticleSystem consts were defined before new Engine alpha blend modes were added, so we have to reference\r\n * the ParticleSystem.FOO consts explicitly (as the underlying const values are different - they get mapped to engine consts within baseParticleSystem.ts)\r\n */\r\nexport const BlendModeOptions = [\r\n    { label: \"Add\", value: ParticleSystem.BLENDMODE_ADD },\r\n    { label: \"Multiply\", value: ParticleSystem.BLENDMODE_MULTIPLY },\r\n    { label: \"Multiply Add\", value: ParticleSystem.BLENDMODE_MULTIPLYADD },\r\n    { label: \"One One\", value: ParticleSystem.BLENDMODE_ONEONE },\r\n    { label: \"Standard\", value: ParticleSystem.BLENDMODE_STANDARD },\r\n    { label: \"Subtract\", value: ParticleSystem.BLENDMODE_SUBTRACT },\r\n].concat(CommonBlendModes);\r\n\r\n/**\r\n * Used to populated the alphaMode dropdown in our various tools (Node Editor, Inspector, etc.)\r\n */\r\nexport const AlphaModeOptions = [\r\n    { label: \"Combine\", value: Constants.ALPHA_COMBINE },\r\n    { label: \"One One\", value: Constants.ALPHA_ONEONE },\r\n    { label: \"Add\", value: Constants.ALPHA_ADD },\r\n    { label: \"Subtract\", value: Constants.ALPHA_SUBTRACT },\r\n    { label: \"Multiply\", value: Constants.ALPHA_MULTIPLY },\r\n].concat(CommonBlendModes);\r\n\r\n/**\r\n * Used to populate the billboardMode dropdown for particle systems.\r\n */\r\nexport const ParticleBillboardModeOptions = [\r\n    { label: \"All\", value: ParticleSystem.BILLBOARDMODE_ALL },\r\n    { label: \"Y\", value: ParticleSystem.BILLBOARDMODE_Y },\r\n    { label: \"Stretched\", value: ParticleSystem.BILLBOARDMODE_STRETCHED },\r\n    { label: \"Stretched Local\", value: ParticleSystem.BILLBOARDMODE_STRETCHED_LOCAL },\r\n];\r\n"]}

package/copyCommandToClipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"copyCommandToClipboard.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/copyCommandToClipboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,0CAA4B;AAEnD,oCAAoC;AACpC,IAAI,gBAAgB,GAAG,EAAE,CAAC;AAC1B,MAAM,YAAY,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;AACjH,IAAI,OAAO,YAAY,KAAK,WAAW,EAAE,CAAC;IACtC,IAAI,OAAa,YAAa,CAAC,OAAO,KAAK,WAAW,EAAE,CAAC;QACrD,gBAAgB,GAAG,UAAU,CAAC;IAClC,CAAC;AACL,CAAC;AAED,2EAA2E;AAC3E,iCAAiC;AACjC,gEAAgE;AAChE,MAAM,UAAU,sBAAsB,CAAC,UAAkB;IACrD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,WAAW,GAAG,UAAU,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEnC,IAAI,MAAM,CAAC,YAAY,EAAE,CAAC;QACtB,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;QACrC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC1B,MAAM,CAAC,YAAY,EAAG,CAAC,eAAe,EAAE,CAAC;QACzC,MAAM,CAAC,YAAY,EAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,MAAM,EAAE,CAAC;AACrB,CAAC;AAED,iDAAiD;AACjD,oDAAoD;AACpD,gEAAgE;AAChE,MAAM,UAAU,yBAAyB,CAAC,GAAQ;IAC9C,IAAI,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC,IAAI,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;QACjC,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC;IACD,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;AAC7D,CAAC","sourcesContent":["import { GetClassName } from \"core/Misc/typeStore\";\r\n\r\n// Check if BABYLON namespace exists\r\nlet BabylonNamespace = \"\";\r\nconst GlobalObject = typeof global !== \"undefined\" ? global : typeof window !== \"undefined\" ? window : undefined;\r\nif (typeof GlobalObject !== \"undefined\") {\r\n    if (typeof (<any>GlobalObject).BABYLON !== \"undefined\") {\r\n        BabylonNamespace = \"BABYLON.\";\r\n    }\r\n}\r\n\r\n// Inspired by previous copyToClipboard() function which was copying Color3\r\n// Copies strCommand to clipboard\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport function copyCommandToClipboard(strCommand: string) {\r\n    const element = document.createElement(\"div\");\r\n    element.textContent = strCommand;\r\n    document.body.appendChild(element);\r\n\r\n    if (window.getSelection) {\r\n        const range = document.createRange();\r\n        range.selectNode(element);\r\n        window.getSelection()!.removeAllRanges();\r\n        window.getSelection()!.addRange(range);\r\n    }\r\n\r\n    document.execCommand(\"copy\");\r\n    element.remove();\r\n}\r\n\r\n// Return the class name of the considered target\r\n// babylonNamespace is either \"\" (ES6) or \"BABYLON.\"\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport function getClassNameWithNamespace(obj: any): { className: string; babylonNamespace: string } {\r\n    let className = GetClassName(obj);\r\n    if (className.includes(\"BABYLON.\")) {\r\n        className = className.split(\"BABYLON.\")[1];\r\n    }\r\n    return { className, babylonNamespace: BabylonNamespace };\r\n}\r\n"]}
+{"version":3,"file":"copyCommandToClipboard.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/copyCommandToClipboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,oCAAoC;AACpC,IAAI,gBAAgB,GAAG,EAAE,CAAC;AAC1B,MAAM,YAAY,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;AACjH,IAAI,OAAO,YAAY,KAAK,WAAW,EAAE,CAAC;IACtC,IAAI,OAAa,YAAa,CAAC,OAAO,KAAK,WAAW,EAAE,CAAC;QACrD,gBAAgB,GAAG,UAAU,CAAC;IAClC,CAAC;AACL,CAAC;AAED,2EAA2E;AAC3E,iCAAiC;AACjC,gEAAgE;AAChE,MAAM,UAAU,sBAAsB,CAAC,UAAkB;IACrD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,WAAW,GAAG,UAAU,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEnC,IAAI,MAAM,CAAC,YAAY,EAAE,CAAC;QACtB,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;QACrC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC1B,MAAM,CAAC,YAAY,EAAG,CAAC,eAAe,EAAE,CAAC;QACzC,MAAM,CAAC,YAAY,EAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,MAAM,EAAE,CAAC;AACrB,CAAC;AAED,iDAAiD;AACjD,oDAAoD;AACpD,gEAAgE;AAChE,MAAM,UAAU,yBAAyB,CAAC,GAAQ;IAC9C,IAAI,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC,IAAI,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;QACjC,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC;IACD,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;AAC7D,CAAC","sourcesContent":["import { GetClassName } from \"core/Misc/typeStore\";\r\n\r\n// Check if BABYLON namespace exists\r\nlet BabylonNamespace = \"\";\r\nconst GlobalObject = typeof global !== \"undefined\" ? global : typeof window !== \"undefined\" ? window : undefined;\r\nif (typeof GlobalObject !== \"undefined\") {\r\n    if (typeof (<any>GlobalObject).BABYLON !== \"undefined\") {\r\n        BabylonNamespace = \"BABYLON.\";\r\n    }\r\n}\r\n\r\n// Inspired by previous copyToClipboard() function which was copying Color3\r\n// Copies strCommand to clipboard\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport function copyCommandToClipboard(strCommand: string) {\r\n    const element = document.createElement(\"div\");\r\n    element.textContent = strCommand;\r\n    document.body.appendChild(element);\r\n\r\n    if (window.getSelection) {\r\n        const range = document.createRange();\r\n        range.selectNode(element);\r\n        window.getSelection()!.removeAllRanges();\r\n        window.getSelection()!.addRange(range);\r\n    }\r\n\r\n    document.execCommand(\"copy\");\r\n    element.remove();\r\n}\r\n\r\n// Return the class name of the considered target\r\n// babylonNamespace is either \"\" (ES6) or \"BABYLON.\"\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport function getClassNameWithNamespace(obj: any): { className: string; babylonNamespace: string } {\r\n    let className = GetClassName(obj);\r\n    if (className.includes(\"BABYLON.\")) {\r\n        className = className.split(\"BABYLON.\")[1];\r\n    }\r\n    return { className, babylonNamespace: BabylonNamespace };\r\n}\r\n"]}

package/fluent/hoc/buttonLine.d.ts

@@ -1,5 +1,5 @@
-import type { FunctionComponent } from "react";
-import type { ButtonProps } from "../primitives/button.js";
+import { type FunctionComponent } from "react";
+import { type ButtonProps } from "../primitives/button.js";
 type ButtonLineProps = Omit<ButtonProps, "label"> & {
     label: string;
     uniqueId?: string;

package/fluent/hoc/buttonLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/buttonLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAQ9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,KAAK,EAAE,EAAE;IACpE,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;IAEtC,OAAO,CACH,KAAC,aAAa,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,YAClD,KAAC,MAAM,OAAK,KAAK,GAAI,GACT,CACnB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { LineContainer } from \"./propertyLines/propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Button } from \"../primitives/button\";\r\nimport type { ButtonProps } from \"../primitives/button\";\r\n\r\ntype ButtonLineProps = Omit<ButtonProps, \"label\"> & {\r\n    label: string; // Require a label when button is the entire line (by default, label is optional on a button)\r\n    uniqueId?: string; // The ID of the property line to be used when the label cannot be used as a persistent ID.\r\n};\r\n\r\n/**\r\n * Wraps a button with a label in a line container\r\n * @param props Button props plus a label\r\n * @returns A button inside a line\r\n */\r\nexport const ButtonLine: FunctionComponent<ButtonLineProps> = (props) => {\r\n    ButtonLine.displayName = \"ButtonLine\";\r\n\r\n    return (\r\n        <LineContainer uniqueId={props.uniqueId ?? props.label}>\r\n            <Button {...props} />\r\n        </LineContainer>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"buttonLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/buttonLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,OAAO,EAAE,MAAM,EAAoB,MAAM,sBAAsB,CAAC;AAOhE;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,KAAK,EAAE,EAAE;IACpE,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;IAEtC,OAAO,CACH,KAAC,aAAa,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,YAClD,KAAC,MAAM,OAAK,KAAK,GAAI,GACT,CACnB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { LineContainer } from \"./propertyLines/propertyLine\";\r\nimport { type FunctionComponent } from \"react\";\r\nimport { Button, type ButtonProps } from \"../primitives/button\";\r\n\r\ntype ButtonLineProps = Omit<ButtonProps, \"label\"> & {\r\n    label: string; // Require a label when button is the entire line (by default, label is optional on a button)\r\n    uniqueId?: string; // The ID of the property line to be used when the label cannot be used as a persistent ID.\r\n};\r\n\r\n/**\r\n * Wraps a button with a label in a line container\r\n * @param props Button props plus a label\r\n * @returns A button inside a line\r\n */\r\nexport const ButtonLine: FunctionComponent<ButtonLineProps> = (props) => {\r\n    ButtonLine.displayName = \"ButtonLine\";\r\n\r\n    return (\r\n        <LineContainer uniqueId={props.uniqueId ?? props.label}>\r\n            <Button {...props} />\r\n        </LineContainer>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/childWindow.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, PropsWithChildren, Ref } from "react";
+import { type FunctionComponent, type PropsWithChildren, type Ref } from "react";
 export type ChildWindowOptions = {
     /**
      * The default width of the child window in pixels.

package/fluent/hoc/childWindow.js

@@ -146,9 +146,7 @@ export const ChildWindow = (props) => {
         return null;
     }
     const { mountNode, renderer } = windowState;
-    return (
-    // Portal targets the body of the child window.
-    _jsx(Portal, { mountNode: mountNode, children: _jsx(RendererProvider, { renderer: renderer, targetDocument: mountNode.ownerDocument, children: _jsx(FluentProvider, { style: {
+    return (_jsx(Portal, { mountNode: mountNode, children: _jsx(RendererProvider, { renderer: renderer, targetDocument: mountNode.ownerDocument, children: _jsx(FluentProvider, { style: {
                     display: "flex",
                     flexGrow: 1,
                     flexDirection: "column",

package/fluent/hoc/childWindow.js.map

@@ -1 +1 @@
-{"version":3,"file":"childWindow.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/childWindow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { GriffelRenderer } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent, PropsWithChildren, Ref } from \"react\";\r\n\r\nimport { createDOMRenderer, FluentProvider, Portal, RendererProvider } from \"@fluentui/react-components\";\r\nimport { useCallback, useEffect, useImperativeHandle, useState } from \"react\";\r\n\r\nimport { Logger } from \"core/Misc/logger\";\r\nimport { ToastProvider } from \"../primitives/toast\";\r\n\r\nfunction ToFeaturesString(options: ChildWindowOptions) {\r\n    const { defaultWidth, defaultHeight, defaultLeft, defaultTop } = options;\r\n\r\n    const features: { key: string; value: string }[] = [];\r\n\r\n    if (defaultWidth !== undefined) {\r\n        features.push({ key: \"width\", value: defaultWidth.toString() });\r\n    }\r\n    if (defaultHeight !== undefined) {\r\n        features.push({ key: \"height\", value: defaultHeight.toString() });\r\n    }\r\n    if (defaultLeft !== undefined) {\r\n        features.push({ key: \"left\", value: defaultLeft.toString() });\r\n    }\r\n    if (defaultTop !== undefined) {\r\n        features.push({ key: \"top\", value: defaultTop.toString() });\r\n    }\r\n    features.push({ key: \"location\", value: \"no\" });\r\n\r\n    return features.map((feature) => `${feature.key}=${feature.value}`).join(\",\");\r\n}\r\n\r\nexport type ChildWindowOptions = {\r\n    /**\r\n     * The default width of the child window in pixels.\r\n     * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved.\r\n     */\r\n    defaultWidth?: number;\r\n\r\n    /**\r\n     * The default height of the child window in pixels.\r\n     * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved.\r\n     */\r\n    defaultHeight?: number;\r\n\r\n    /**\r\n     * The default left position of the child window in pixels.\r\n     * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved.\r\n     */\r\n    defaultLeft?: number;\r\n\r\n    /**\r\n     * The default top position of the child window in pixels.\r\n     * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved.\r\n     */\r\n    defaultTop?: number;\r\n\r\n    /**\r\n     * The title of the child window.\r\n     * @remarks If not provided, the id will be used instead (if any).\r\n     */\r\n    title?: string;\r\n};\r\n\r\nexport type ChildWindow = {\r\n    /**\r\n     * Opens the child window.\r\n     * @param options Options for opening the child window.\r\n     */\r\n    open: (options?: ChildWindowOptions) => void;\r\n\r\n    /**\r\n     * Closes the child window.\r\n     */\r\n    close: () => void;\r\n};\r\n\r\nexport type ChildWindowProps = {\r\n    /**\r\n     * An optional unique identity for the child window.\r\n     * @remarks If provided, the child window's bounds will be saved/restored using this identity.\r\n     */\r\n    id?: string;\r\n\r\n    /**\r\n     * Called when the open state of the child window changes.\r\n     * @param isOpen Whether the child window is open.\r\n     */\r\n    onOpenChange?: (isOpen: boolean) => void;\r\n\r\n    /**\r\n     * A ref that exposes the ChildWindow imperative API.\r\n     */\r\n    imperativeRef?: Ref<ChildWindow>;\r\n};\r\n\r\n/**\r\n * Allows displaying a child window that can contain child components.\r\n * @param props Props for the child window.\r\n * @returns The child window component.\r\n */\r\nexport const ChildWindow: FunctionComponent<PropsWithChildren<ChildWindowProps>> = (props) => {\r\n    const { id, children, onOpenChange, imperativeRef: imperativeRef } = props;\r\n\r\n    const [windowState, setWindowState] = useState<{ mountNode: HTMLElement; renderer: GriffelRenderer }>();\r\n    const [childWindow, setChildWindow] = useState<Window>();\r\n\r\n    const storageKey = id ? `Babylon/Settings/ChildWindow/${id}/Bounds` : null;\r\n\r\n    // This function is just for creating the child window itself. It is a function because\r\n    // it must be called synchronously in response to a user interaction (e.g. button click),\r\n    // otherwise the browser will block it as a scripted popup.\r\n    const createWindow = useCallback(\r\n        (options: ChildWindowOptions = {}) => {\r\n            if (storageKey) {\r\n                // If we are persisting window bounds, but the window is already open, just use the existing bounds.\r\n                // Otherwise, try to load bounds from storage.\r\n                if (childWindow) {\r\n                    options.defaultLeft = childWindow.screenX;\r\n                    options.defaultTop = childWindow.screenY;\r\n                    options.defaultWidth = childWindow.innerWidth;\r\n                    options.defaultHeight = childWindow.innerHeight;\r\n                } else {\r\n                    const savedBounds = localStorage.getItem(storageKey);\r\n                    if (savedBounds) {\r\n                        try {\r\n                            const bounds = JSON.parse(savedBounds);\r\n                            options.defaultLeft = bounds.left;\r\n                            options.defaultTop = bounds.top;\r\n                            options.defaultWidth = bounds.width;\r\n                            options.defaultHeight = bounds.height;\r\n                        } catch {\r\n                            Logger.Warn(`Could not parse saved bounds for child window with key ${storageKey}`);\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n\r\n            // Half width by default.\r\n            if (!options.defaultWidth) {\r\n                options.defaultWidth = window.innerWidth * (2 / 3);\r\n            }\r\n            // Half height by default.\r\n            if (!options.defaultHeight) {\r\n                options.defaultHeight = window.innerHeight * (2 / 3);\r\n            }\r\n            // Horizontally centered by default.\r\n            if (!options.defaultLeft) {\r\n                options.defaultLeft = window.screenX + (window.innerWidth - options.defaultWidth) * (2 / 3);\r\n            }\r\n            // Vertically centered by default.\r\n            if (!options.defaultTop) {\r\n                options.defaultTop = window.screenY + (window.innerHeight - options.defaultHeight) * (2 / 3);\r\n            }\r\n\r\n            // Try to create the child window (can be null if popups are blocked).\r\n            const newChildWindow = window.open(\"\", \"\", ToFeaturesString(options));\r\n            if (newChildWindow) {\r\n                // Set the title if provided.\r\n                newChildWindow.document.title = options.title ?? id ?? \"\";\r\n\r\n                // Set the child window state.\r\n                setChildWindow((current) => {\r\n                    // But first close any existing child window.\r\n                    current?.close();\r\n                    return newChildWindow;\r\n                });\r\n            }\r\n        },\r\n        [childWindow, storageKey]\r\n    );\r\n\r\n    useImperativeHandle(imperativeRef, () => {\r\n        return {\r\n            open: createWindow,\r\n            close: () => setChildWindow(undefined),\r\n        };\r\n    }, [createWindow]);\r\n\r\n    // This side effect runs any time the child window instance changes. It does the rest of the child window\r\n    // setup work, including creating resources and state needed to properly render the content of the child window.\r\n    useEffect(() => {\r\n        const disposeActions: (() => void)[] = [];\r\n\r\n        if (childWindow) {\r\n            const body = childWindow.document.body;\r\n            body.style.width = \"100%\";\r\n            body.style.height = \"100%\";\r\n            body.style.margin = \"0\";\r\n            body.style.padding = \"0\";\r\n            body.style.display = \"flex\";\r\n            body.style.overflow = \"hidden\";\r\n\r\n            // Setup the window state, including creating a Fluent/Griffel \"renderer\" for managing runtime styles/classes in the child window.\r\n            setWindowState({ mountNode: body, renderer: createDOMRenderer(childWindow.document) });\r\n            onOpenChange?.(true);\r\n\r\n            // When the child window is closed for any reason, transition back to a closed state.\r\n            const onChildWindowUnload = () => {\r\n                setWindowState(undefined);\r\n                setChildWindow(undefined);\r\n                onOpenChange?.(false);\r\n            };\r\n            childWindow.addEventListener(\"unload\", onChildWindowUnload, { once: true });\r\n            disposeActions.push(() => childWindow.removeEventListener(\"unload\", onChildWindowUnload));\r\n\r\n            // If the main window closes, close any open child windows as well (don't leave them orphaned).\r\n            const onParentWindowUnload = () => {\r\n                childWindow.close();\r\n            };\r\n            window.addEventListener(\"unload\", onParentWindowUnload, { once: true });\r\n            disposeActions.push(() => window.removeEventListener(\"unload\", onParentWindowUnload));\r\n\r\n            // On dispose, close the child window.\r\n            disposeActions.push(() => childWindow.close());\r\n\r\n            // On dispose, save the window bounds.\r\n            disposeActions.push(() => {\r\n                if (storageKey) {\r\n                    localStorage.setItem(\r\n                        storageKey,\r\n                        JSON.stringify({\r\n                            left: childWindow.screenX,\r\n                            top: childWindow.screenY,\r\n                            width: childWindow.innerWidth,\r\n                            height: childWindow.innerHeight,\r\n                        })\r\n                    );\r\n                }\r\n            });\r\n        }\r\n\r\n        return () => {\r\n            disposeActions.reverse().forEach((dispose) => dispose());\r\n        };\r\n    }, [childWindow]);\r\n\r\n    if (!windowState) {\r\n        return null;\r\n    }\r\n\r\n    const { mountNode, renderer } = windowState;\r\n\r\n    return (\r\n        // Portal targets the body of the child window.\r\n        <Portal mountNode={mountNode}>\r\n            {/* RenderProvider manages Fluent style/class state. */}\r\n            <RendererProvider renderer={renderer} targetDocument={mountNode.ownerDocument}>\r\n                {/* Fluent Provider is needed for managing other Fluent state and applying the current theme mode. */}\r\n                <FluentProvider\r\n                    style={{\r\n                        display: \"flex\",\r\n                        flexGrow: 1,\r\n                        flexDirection: \"column\",\r\n                        overflow: \"hidden\",\r\n                    }}\r\n                    applyStylesToPortals={false}\r\n                    targetDocument={mountNode.ownerDocument}\r\n                >\r\n                    <ToastProvider>{children}</ToastProvider>\r\n                </FluentProvider>\r\n            </RendererProvider>\r\n        </Portal>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"childWindow.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/childWindow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type GriffelRenderer, createDOMRenderer, FluentProvider, Portal, RendererProvider } from \"@fluentui/react-components\";\r\nimport { type FunctionComponent, type PropsWithChildren, type Ref, useCallback, useEffect, useImperativeHandle, useState } from \"react\";\r\n\r\nimport { Logger } from \"core/Misc/logger\";\r\nimport { ToastProvider } from \"../primitives/toast\";\r\n\r\nfunction ToFeaturesString(options: ChildWindowOptions) {\r\n    const { defaultWidth, defaultHeight, defaultLeft, defaultTop } = options;\r\n\r\n    const features: { key: string; value: string }[] = [];\r\n\r\n    if (defaultWidth !== undefined) {\r\n        features.push({ key: \"width\", value: defaultWidth.toString() });\r\n    }\r\n    if (defaultHeight !== undefined) {\r\n        features.push({ key: \"height\", value: defaultHeight.toString() });\r\n    }\r\n    if (defaultLeft !== undefined) {\r\n        features.push({ key: \"left\", value: defaultLeft.toString() });\r\n    }\r\n    if (defaultTop !== undefined) {\r\n        features.push({ key: \"top\", value: defaultTop.toString() });\r\n    }\r\n    features.push({ key: \"location\", value: \"no\" });\r\n\r\n    return features.map((feature) => `${feature.key}=${feature.value}`).join(\",\");\r\n}\r\n\r\nexport type ChildWindowOptions = {\r\n    /**\r\n     * The default width of the child window in pixels.\r\n     * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved.\r\n     */\r\n    defaultWidth?: number;\r\n\r\n    /**\r\n     * The default height of the child window in pixels.\r\n     * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved.\r\n     */\r\n    defaultHeight?: number;\r\n\r\n    /**\r\n     * The default left position of the child window in pixels.\r\n     * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved.\r\n     */\r\n    defaultLeft?: number;\r\n\r\n    /**\r\n     * The default top position of the child window in pixels.\r\n     * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved.\r\n     */\r\n    defaultTop?: number;\r\n\r\n    /**\r\n     * The title of the child window.\r\n     * @remarks If not provided, the id will be used instead (if any).\r\n     */\r\n    title?: string;\r\n};\r\n\r\nexport type ChildWindow = {\r\n    /**\r\n     * Opens the child window.\r\n     * @param options Options for opening the child window.\r\n     */\r\n    open: (options?: ChildWindowOptions) => void;\r\n\r\n    /**\r\n     * Closes the child window.\r\n     */\r\n    close: () => void;\r\n};\r\n\r\nexport type ChildWindowProps = {\r\n    /**\r\n     * An optional unique identity for the child window.\r\n     * @remarks If provided, the child window's bounds will be saved/restored using this identity.\r\n     */\r\n    id?: string;\r\n\r\n    /**\r\n     * Called when the open state of the child window changes.\r\n     * @param isOpen Whether the child window is open.\r\n     */\r\n    onOpenChange?: (isOpen: boolean) => void;\r\n\r\n    /**\r\n     * A ref that exposes the ChildWindow imperative API.\r\n     */\r\n    imperativeRef?: Ref<ChildWindow>;\r\n};\r\n\r\n/**\r\n * Allows displaying a child window that can contain child components.\r\n * @param props Props for the child window.\r\n * @returns The child window component.\r\n */\r\nexport const ChildWindow: FunctionComponent<PropsWithChildren<ChildWindowProps>> = (props) => {\r\n    const { id, children, onOpenChange, imperativeRef: imperativeRef } = props;\r\n\r\n    const [windowState, setWindowState] = useState<{ mountNode: HTMLElement; renderer: GriffelRenderer }>();\r\n    const [childWindow, setChildWindow] = useState<Window>();\r\n\r\n    const storageKey = id ? `Babylon/Settings/ChildWindow/${id}/Bounds` : null;\r\n\r\n    // This function is just for creating the child window itself. It is a function because\r\n    // it must be called synchronously in response to a user interaction (e.g. button click),\r\n    // otherwise the browser will block it as a scripted popup.\r\n    const createWindow = useCallback(\r\n        (options: ChildWindowOptions = {}) => {\r\n            if (storageKey) {\r\n                // If we are persisting window bounds, but the window is already open, just use the existing bounds.\r\n                // Otherwise, try to load bounds from storage.\r\n                if (childWindow) {\r\n                    options.defaultLeft = childWindow.screenX;\r\n                    options.defaultTop = childWindow.screenY;\r\n                    options.defaultWidth = childWindow.innerWidth;\r\n                    options.defaultHeight = childWindow.innerHeight;\r\n                } else {\r\n                    const savedBounds = localStorage.getItem(storageKey);\r\n                    if (savedBounds) {\r\n                        try {\r\n                            const bounds = JSON.parse(savedBounds);\r\n                            options.defaultLeft = bounds.left;\r\n                            options.defaultTop = bounds.top;\r\n                            options.defaultWidth = bounds.width;\r\n                            options.defaultHeight = bounds.height;\r\n                        } catch {\r\n                            Logger.Warn(`Could not parse saved bounds for child window with key ${storageKey}`);\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n\r\n            // Half width by default.\r\n            if (!options.defaultWidth) {\r\n                options.defaultWidth = window.innerWidth * (2 / 3);\r\n            }\r\n            // Half height by default.\r\n            if (!options.defaultHeight) {\r\n                options.defaultHeight = window.innerHeight * (2 / 3);\r\n            }\r\n            // Horizontally centered by default.\r\n            if (!options.defaultLeft) {\r\n                options.defaultLeft = window.screenX + (window.innerWidth - options.defaultWidth) * (2 / 3);\r\n            }\r\n            // Vertically centered by default.\r\n            if (!options.defaultTop) {\r\n                options.defaultTop = window.screenY + (window.innerHeight - options.defaultHeight) * (2 / 3);\r\n            }\r\n\r\n            // Try to create the child window (can be null if popups are blocked).\r\n            const newChildWindow = window.open(\"\", \"\", ToFeaturesString(options));\r\n            if (newChildWindow) {\r\n                // Set the title if provided.\r\n                newChildWindow.document.title = options.title ?? id ?? \"\";\r\n\r\n                // Set the child window state.\r\n                setChildWindow((current) => {\r\n                    // But first close any existing child window.\r\n                    current?.close();\r\n                    return newChildWindow;\r\n                });\r\n            }\r\n        },\r\n        [childWindow, storageKey]\r\n    );\r\n\r\n    useImperativeHandle(imperativeRef, () => {\r\n        return {\r\n            open: createWindow,\r\n            close: () => setChildWindow(undefined),\r\n        };\r\n    }, [createWindow]);\r\n\r\n    // This side effect runs any time the child window instance changes. It does the rest of the child window\r\n    // setup work, including creating resources and state needed to properly render the content of the child window.\r\n    useEffect(() => {\r\n        const disposeActions: (() => void)[] = [];\r\n\r\n        if (childWindow) {\r\n            const body = childWindow.document.body;\r\n            body.style.width = \"100%\";\r\n            body.style.height = \"100%\";\r\n            body.style.margin = \"0\";\r\n            body.style.padding = \"0\";\r\n            body.style.display = \"flex\";\r\n            body.style.overflow = \"hidden\";\r\n\r\n            // Setup the window state, including creating a Fluent/Griffel \"renderer\" for managing runtime styles/classes in the child window.\r\n            setWindowState({ mountNode: body, renderer: createDOMRenderer(childWindow.document) });\r\n            onOpenChange?.(true);\r\n\r\n            // When the child window is closed for any reason, transition back to a closed state.\r\n            const onChildWindowUnload = () => {\r\n                setWindowState(undefined);\r\n                setChildWindow(undefined);\r\n                onOpenChange?.(false);\r\n            };\r\n            childWindow.addEventListener(\"unload\", onChildWindowUnload, { once: true });\r\n            disposeActions.push(() => childWindow.removeEventListener(\"unload\", onChildWindowUnload));\r\n\r\n            // If the main window closes, close any open child windows as well (don't leave them orphaned).\r\n            const onParentWindowUnload = () => {\r\n                childWindow.close();\r\n            };\r\n            window.addEventListener(\"unload\", onParentWindowUnload, { once: true });\r\n            disposeActions.push(() => window.removeEventListener(\"unload\", onParentWindowUnload));\r\n\r\n            // On dispose, close the child window.\r\n            disposeActions.push(() => childWindow.close());\r\n\r\n            // On dispose, save the window bounds.\r\n            disposeActions.push(() => {\r\n                if (storageKey) {\r\n                    localStorage.setItem(\r\n                        storageKey,\r\n                        JSON.stringify({\r\n                            left: childWindow.screenX,\r\n                            top: childWindow.screenY,\r\n                            width: childWindow.innerWidth,\r\n                            height: childWindow.innerHeight,\r\n                        })\r\n                    );\r\n                }\r\n            });\r\n        }\r\n\r\n        return () => {\r\n            disposeActions.reverse().forEach((dispose) => dispose());\r\n        };\r\n    }, [childWindow]);\r\n\r\n    if (!windowState) {\r\n        return null;\r\n    }\r\n\r\n    const { mountNode, renderer } = windowState;\r\n\r\n    return (\r\n        // Portal targets the body of the child window.\r\n        <Portal mountNode={mountNode}>\r\n            {/* RenderProvider manages Fluent style/class state. */}\r\n            <RendererProvider renderer={renderer} targetDocument={mountNode.ownerDocument}>\r\n                {/* Fluent Provider is needed for managing other Fluent state and applying the current theme mode. */}\r\n                <FluentProvider\r\n                    style={{\r\n                        display: \"flex\",\r\n                        flexGrow: 1,\r\n                        flexDirection: \"column\",\r\n                        overflow: \"hidden\",\r\n                    }}\r\n                    applyStylesToPortals={false}\r\n                    targetDocument={mountNode.ownerDocument}\r\n                >\r\n                    <ToastProvider>{children}</ToastProvider>\r\n                </FluentProvider>\r\n            </RendererProvider>\r\n        </Portal>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/fileUploadLine.d.ts

@@ -1,5 +1,5 @@
-import type { FunctionComponent } from "react";
-import type { ButtonProps } from "../primitives/button.js";
+import { type FunctionComponent } from "react";
+import { type ButtonProps } from "../primitives/button.js";
 type FileUploadLineProps = Omit<ButtonProps, "onClick" | "label"> & {
     onClick: (files: FileList) => void;
     label: string;

package/fluent/hoc/fileUploadLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"fileUploadLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/fileUploadLine.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAS1D;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAA2C,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,EAAE,EAAE;IACjH,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;IAE9C,OAAO,CACH,KAAC,aAAa,IAAC,QAAQ,EAAE,GAAG,KAAK,SAAS,EAAE,KAAK,EAAE,KAAK,YACpD,KAAC,YAAY,IAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAM,WAAW,GAAI,GACtE,CACnB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport { LineContainer } from \"./propertyLines/propertyLine\";\r\nimport { UploadButton } from \"../primitives/uploadButton\";\r\nimport type { ButtonProps } from \"../primitives/button\";\r\n\r\ntype FileUploadLineProps = Omit<ButtonProps, \"onClick\" | \"label\"> & {\r\n    onClick: (files: FileList) => void;\r\n    label: string; // Require a label when button is the entire line (by default, label is optional on an UploadButton\r\n    accept: string;\r\n};\r\n\r\n/**\r\n * A full-width line with an upload button.\r\n * For just the button without the line wrapper, use UploadButton directly.\r\n * @returns An UploadButton wrapped in a LineContainer\r\n */\r\nexport const FileUploadLine: FunctionComponent<FileUploadLineProps> = ({ onClick, label, accept, ...buttonProps }) => {\r\n    FileUploadLine.displayName = \"FileUploadLine\";\r\n\r\n    return (\r\n        <LineContainer uniqueId={`${label}_upload`} label={label}>\r\n            <UploadButton onUpload={onClick} accept={accept} label={label} {...buttonProps} />\r\n        </LineContainer>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"fileUploadLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/fileUploadLine.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAS1D;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAA2C,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,EAAE,EAAE;IACjH,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;IAE9C,OAAO,CACH,KAAC,aAAa,IAAC,QAAQ,EAAE,GAAG,KAAK,SAAS,EAAE,KAAK,EAAE,KAAK,YACpD,KAAC,YAAY,IAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAM,WAAW,GAAI,GACtE,CACnB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { type FunctionComponent } from \"react\";\r\nimport { LineContainer } from \"./propertyLines/propertyLine\";\r\nimport { UploadButton } from \"../primitives/uploadButton\";\r\nimport { type ButtonProps } from \"../primitives/button\";\r\n\r\ntype FileUploadLineProps = Omit<ButtonProps, \"onClick\" | \"label\"> & {\r\n    onClick: (files: FileList) => void;\r\n    label: string; // Require a label when button is the entire line (by default, label is optional on an UploadButton\r\n    accept: string;\r\n};\r\n\r\n/**\r\n * A full-width line with an upload button.\r\n * For just the button without the line wrapper, use UploadButton directly.\r\n * @returns An UploadButton wrapped in a LineContainer\r\n */\r\nexport const FileUploadLine: FunctionComponent<FileUploadLineProps> = ({ onClick, label, accept, ...buttonProps }) => {\r\n    FileUploadLine.displayName = \"FileUploadLine\";\r\n\r\n    return (\r\n        <LineContainer uniqueId={`${label}_upload`} label={label}>\r\n            <UploadButton onUpload={onClick} accept={accept} label={label} {...buttonProps} />\r\n        </LineContainer>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/fluentToolWrapper.d.ts

@@ -1,5 +1,5 @@
-import type { PropsWithChildren, FunctionComponent } from "react";
-import type { Theme } from "@fluentui/react-components";
+import { type PropsWithChildren, type FunctionComponent } from "react";
+import { type Theme } from "@fluentui/react-components";
 export type UiSize = "small" | "medium";
 export type ToolHostProps = {
     /**

package/fluent/hoc/fluentToolWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"fluentToolWrapper.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/fluentToolWrapper.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AA8B1E,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,EAAE,SAAS,EAAE,KAAgB,EAAE,WAAW,EAAE,KAAgB,EAAE,QAAQ,EAAE,EAAY,EAAE,IAAI,EAAE,SAA+B,EAAW,CAAC,CAAC;AAEjL;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAwD,CAAC,KAAK,EAAE,EAAE;IAC5F,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,gBAAgB,GAAG,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACrF,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,gBAAgB,CAAC;IACtD,MAAM,YAAY,GAAG;QACjB,SAAS;QACT,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,WAAW;QAChC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,IAAI,EAAE,KAAK,CAAC,IAAI;KACnB,CAAC;IACF,OAAO,SAAS,CAAC,CAAC,CAAC,CACf,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,CAAC,WAAW,IAAI,YAAY,YACpD,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAAG,KAAK,CAAC,QAAQ,GAAwB,GACrE,CACpB,CAAC,CAAC,CAAC,CACA,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAAG,KAAK,CAAC,QAAQ,GAAwB,CACrF,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { PropsWithChildren, FunctionComponent } from \"react\";\r\nimport { createContext } from \"react\";\r\nimport type { Theme } from \"@fluentui/react-components\";\r\nimport { FluentProvider, webDarkTheme } from \"@fluentui/react-components\";\r\n\r\nexport type UiSize = \"small\" | \"medium\";\r\nexport type ToolHostProps = {\r\n    /**\r\n     * Will ensure all of the controls within the tool are of the same scale\r\n     */\r\n    size?: UiSize;\r\n\r\n    /**\r\n     * Allows host to pass in a theme\r\n     */\r\n    customTheme?: Theme;\r\n\r\n    /**\r\n     * Can be set to true to disable the copy button in the tool's property lines. Default is false (copy enabled)\r\n     */\r\n    disableCopy?: boolean;\r\n\r\n    /**\r\n     * Name of the tool displayed in the UX\r\n     */\r\n    toolName: string;\r\n\r\n    /**\r\n     * Override the qsp detection for fluent\r\n     */\r\n    useFluent?: boolean;\r\n};\r\n\r\nexport const ToolContext = createContext({ useFluent: false as boolean, disableCopy: false as boolean, toolName: \"\" as string, size: undefined as UiSize | undefined } as const);\r\n\r\n/**\r\n * For tools which are ready to move over the fluent, wrap the root of the tool (or the panel which you want fluentized) with this component\r\n * Today we will only enable fluent if the URL has the `newUX` query parameter is truthy\r\n * @param props\r\n * @returns\r\n */\r\nexport const FluentToolWrapper: FunctionComponent<PropsWithChildren<ToolHostProps>> = (props) => {\r\n    const url = new URL(window.location.href);\r\n    const useFluentFromUrl = url.searchParams.has(\"newUX\") || url.hash.includes(\"newUX\");\r\n    const useFluent = props.useFluent ?? useFluentFromUrl;\r\n    const contextValue = {\r\n        useFluent,\r\n        disableCopy: !!props.disableCopy,\r\n        toolName: props.toolName,\r\n        size: props.size,\r\n    };\r\n    return useFluent ? (\r\n        <FluentProvider theme={props.customTheme || webDarkTheme}>\r\n            <ToolContext.Provider value={contextValue}>{props.children}</ToolContext.Provider>\r\n        </FluentProvider>\r\n    ) : (\r\n        <ToolContext.Provider value={contextValue}>{props.children}</ToolContext.Provider>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"fluentToolWrapper.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/fluentToolWrapper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkD,aAAa,EAAE,MAAM,OAAO,CAAC;AACtF,OAAO,EAAc,cAAc,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AA8BtF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,EAAE,SAAS,EAAE,KAAgB,EAAE,WAAW,EAAE,KAAgB,EAAE,QAAQ,EAAE,EAAY,EAAE,IAAI,EAAE,SAA+B,EAAW,CAAC,CAAC;AAEjL;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAwD,CAAC,KAAK,EAAE,EAAE;IAC5F,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,gBAAgB,GAAG,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACrF,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,gBAAgB,CAAC;IACtD,MAAM,YAAY,GAAG;QACjB,SAAS;QACT,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,WAAW;QAChC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,IAAI,EAAE,KAAK,CAAC,IAAI;KACnB,CAAC;IACF,OAAO,SAAS,CAAC,CAAC,CAAC,CACf,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,CAAC,WAAW,IAAI,YAAY,YACpD,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAAG,KAAK,CAAC,QAAQ,GAAwB,GACrE,CACpB,CAAC,CAAC,CAAC,CACA,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAAG,KAAK,CAAC,QAAQ,GAAwB,CACrF,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { type PropsWithChildren, type FunctionComponent, createContext } from \"react\";\r\nimport { type Theme, FluentProvider, webDarkTheme } from \"@fluentui/react-components\";\r\n\r\nexport type UiSize = \"small\" | \"medium\";\r\nexport type ToolHostProps = {\r\n    /**\r\n     * Will ensure all of the controls within the tool are of the same scale\r\n     */\r\n    size?: UiSize;\r\n\r\n    /**\r\n     * Allows host to pass in a theme\r\n     */\r\n    customTheme?: Theme;\r\n\r\n    /**\r\n     * Can be set to true to disable the copy button in the tool's property lines. Default is false (copy enabled)\r\n     */\r\n    disableCopy?: boolean;\r\n\r\n    /**\r\n     * Name of the tool displayed in the UX\r\n     */\r\n    toolName: string;\r\n\r\n    /**\r\n     * Override the qsp detection for fluent\r\n     */\r\n    useFluent?: boolean;\r\n};\r\n\r\nexport const ToolContext = createContext({ useFluent: false as boolean, disableCopy: false as boolean, toolName: \"\" as string, size: undefined as UiSize | undefined } as const);\r\n\r\n/**\r\n * For tools which are ready to move over the fluent, wrap the root of the tool (or the panel which you want fluentized) with this component\r\n * Today we will only enable fluent if the URL has the `newUX` query parameter is truthy\r\n * @param props\r\n * @returns\r\n */\r\nexport const FluentToolWrapper: FunctionComponent<PropsWithChildren<ToolHostProps>> = (props) => {\r\n    const url = new URL(window.location.href);\r\n    const useFluentFromUrl = url.searchParams.has(\"newUX\") || url.hash.includes(\"newUX\");\r\n    const useFluent = props.useFluent ?? useFluentFromUrl;\r\n    const contextValue = {\r\n        useFluent,\r\n        disableCopy: !!props.disableCopy,\r\n        toolName: props.toolName,\r\n        size: props.size,\r\n    };\r\n    return useFluent ? (\r\n        <FluentProvider theme={props.customTheme || webDarkTheme}>\r\n            <ToolContext.Provider value={contextValue}>{props.children}</ToolContext.Provider>\r\n        </FluentProvider>\r\n    ) : (\r\n        <ToolContext.Provider value={contextValue}>{props.children}</ToolContext.Provider>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/gradientList.d.ts

@@ -1,6 +1,6 @@
-import type { FunctionComponent } from "react";
+import { type FunctionComponent } from "react";
 import { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from "@babylonjs/core/Misc/gradients.js";
-import type { Nullable } from "@babylonjs/core/types.js";
+import { type Nullable } from "@babylonjs/core/types.js";
 type GradientListProps<T extends FactorGradient | Color3Gradient | Color4Gradient> = {
     label: string;
     gradients: Nullable<Array<T>>;

package/fluent/hoc/gradientList.js.map

@@ -1 +1 @@
-{"version":3,"file":"gradientList.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/gradientList.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from \"react\";\r\n\r\nimport { useMemo } from \"react\";\r\n\r\nimport { List } from \"../primitives/list\";\r\nimport { Color3GradientComponent, Color4GradientComponent, FactorGradientComponent } from \"../primitives/gradient\";\r\nimport { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from \"core/Misc/gradients\";\r\nimport type { IValueGradient } from \"core/Misc/gradients\";\r\nimport type { Nullable } from \"core/types\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\n\r\ntype GradientListProps<T extends FactorGradient | Color3Gradient | Color4Gradient> = {\r\n    label: string;\r\n    gradients: Nullable<Array<T>>;\r\n    addGradient: (step?: T) => void;\r\n    removeGradient: (step: T, index: number) => void;\r\n    onChange: (newGradient: T, index: number) => void;\r\n};\r\n\r\n// Convert gradients to LineList items and sort by gradient value\r\nfunction GradientsToListItems<T extends IValueGradient>(gradients: Nullable<Array<T>>) {\r\n    return (\r\n        gradients?.map((gradient, index) => ({\r\n            id: index,\r\n            data: gradient,\r\n            sortBy: gradient.gradient,\r\n        })) ?? []\r\n    );\r\n}\r\nexport const FactorGradientList: FunctionComponent<GradientListProps<FactorGradient>> = (props) => {\r\n    FactorGradientList.displayName = \"FactorGradientList\";\r\n    const { gradients } = props;\r\n    const items = useMemo(() => GradientsToListItems<FactorGradient>(gradients), [gradients]);\r\n    return (\r\n        <List\r\n            key=\"Factor\"\r\n            addButtonLabel={items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`}\r\n            items={items}\r\n            onDelete={(item, index) => props.removeGradient(item.data, index)}\r\n            onAdd={() => {\r\n                if (items.length === 0) {\r\n                    props.addGradient(); // Default\r\n                } else {\r\n                    props.addGradient(new FactorGradient(1, 1, 1));\r\n                }\r\n            }}\r\n            renderItem={(item, index) => {\r\n                return (\r\n                    <FactorGradientComponent\r\n                        value={item.data}\r\n                        onChange={(newGradient: FactorGradient) => {\r\n                            item.data.gradient = newGradient.gradient;\r\n                            item.data.factor1 = newGradient.factor1;\r\n                            item.data.factor2 = newGradient.factor2;\r\n                            props.onChange(newGradient, index);\r\n                        }}\r\n                    />\r\n                );\r\n            }}\r\n        />\r\n    );\r\n};\r\n\r\nexport const Color3GradientList: FunctionComponent<GradientListProps<Color3Gradient>> = (props) => {\r\n    Color3GradientList.displayName = \"Color3GradientList\";\r\n    const { gradients } = props;\r\n    const items = useMemo(() => GradientsToListItems<Color3Gradient>(gradients), [gradients]);\r\n    return (\r\n        <List\r\n            key=\"Color3\"\r\n            addButtonLabel={items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`}\r\n            items={items}\r\n            onDelete={(item, index) => props.removeGradient(item.data, index)}\r\n            onAdd={() => {\r\n                if (items.length === 0) {\r\n                    props.addGradient(); // Default\r\n                } else {\r\n                    props.addGradient(new Color3Gradient(1, Color3.White()));\r\n                }\r\n            }}\r\n            renderItem={(item, index) => {\r\n                return (\r\n                    <Color3GradientComponent\r\n                        value={item.data}\r\n                        onChange={(newGradient: Color3Gradient) => {\r\n                            item.data.gradient = newGradient.gradient;\r\n                            item.data.color = newGradient.color;\r\n                            props.onChange(newGradient, index);\r\n                        }}\r\n                    />\r\n                );\r\n            }}\r\n        />\r\n    );\r\n};\r\n\r\nexport const Color4GradientList: FunctionComponent<GradientListProps<Color4Gradient>> = (props) => {\r\n    Color4GradientList.displayName = \"Color4GradientList\";\r\n    const { gradients } = props;\r\n    const items = useMemo(() => GradientsToListItems<Color4Gradient>(gradients), [gradients]);\r\n    return (\r\n        <List\r\n            key=\"Color4\"\r\n            addButtonLabel={items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`}\r\n            items={items}\r\n            onDelete={(item, index) => props.removeGradient(item.data, index)}\r\n            onAdd={() => {\r\n                if (items.length === 0) {\r\n                    props.addGradient(); // Default\r\n                } else {\r\n                    props.addGradient(new Color4Gradient(1, new Color4(1, 1, 1, 1), new Color4(1, 1, 1, 1)));\r\n                }\r\n            }}\r\n            renderItem={(item, index) => {\r\n                return (\r\n                    <Color4GradientComponent\r\n                        value={item.data}\r\n                        onChange={(newGradient: Color4Gradient) => {\r\n                            item.data.gradient = newGradient.gradient;\r\n                            item.data.color1 = newGradient.color1;\r\n                            item.data.color2 = newGradient.color2;\r\n                            props.onChange(newGradient, index);\r\n                        }}\r\n                    />\r\n                );\r\n            }}\r\n        />\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"gradientList.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/gradientList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type FunctionComponent, useMemo } from \"react\";\r\n\r\nimport { List } from \"../primitives/list\";\r\nimport { Color3GradientComponent, Color4GradientComponent, FactorGradientComponent } from \"../primitives/gradient\";\r\nimport { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient, type IValueGradient } from \"core/Misc/gradients\";\r\nimport { type Nullable } from \"core/types\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\n\r\ntype GradientListProps<T extends FactorGradient | Color3Gradient | Color4Gradient> = {\r\n    label: string;\r\n    gradients: Nullable<Array<T>>;\r\n    addGradient: (step?: T) => void;\r\n    removeGradient: (step: T, index: number) => void;\r\n    onChange: (newGradient: T, index: number) => void;\r\n};\r\n\r\n// Convert gradients to LineList items and sort by gradient value\r\nfunction GradientsToListItems<T extends IValueGradient>(gradients: Nullable<Array<T>>) {\r\n    return (\r\n        gradients?.map((gradient, index) => ({\r\n            id: index,\r\n            data: gradient,\r\n            sortBy: gradient.gradient,\r\n        })) ?? []\r\n    );\r\n}\r\nexport const FactorGradientList: FunctionComponent<GradientListProps<FactorGradient>> = (props) => {\r\n    FactorGradientList.displayName = \"FactorGradientList\";\r\n    const { gradients } = props;\r\n    const items = useMemo(() => GradientsToListItems<FactorGradient>(gradients), [gradients]);\r\n    return (\r\n        <List\r\n            key=\"Factor\"\r\n            addButtonLabel={items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`}\r\n            items={items}\r\n            onDelete={(item, index) => props.removeGradient(item.data, index)}\r\n            onAdd={() => {\r\n                if (items.length === 0) {\r\n                    props.addGradient(); // Default\r\n                } else {\r\n                    props.addGradient(new FactorGradient(1, 1, 1));\r\n                }\r\n            }}\r\n            renderItem={(item, index) => {\r\n                return (\r\n                    <FactorGradientComponent\r\n                        value={item.data}\r\n                        onChange={(newGradient: FactorGradient) => {\r\n                            item.data.gradient = newGradient.gradient;\r\n                            item.data.factor1 = newGradient.factor1;\r\n                            item.data.factor2 = newGradient.factor2;\r\n                            props.onChange(newGradient, index);\r\n                        }}\r\n                    />\r\n                );\r\n            }}\r\n        />\r\n    );\r\n};\r\n\r\nexport const Color3GradientList: FunctionComponent<GradientListProps<Color3Gradient>> = (props) => {\r\n    Color3GradientList.displayName = \"Color3GradientList\";\r\n    const { gradients } = props;\r\n    const items = useMemo(() => GradientsToListItems<Color3Gradient>(gradients), [gradients]);\r\n    return (\r\n        <List\r\n            key=\"Color3\"\r\n            addButtonLabel={items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`}\r\n            items={items}\r\n            onDelete={(item, index) => props.removeGradient(item.data, index)}\r\n            onAdd={() => {\r\n                if (items.length === 0) {\r\n                    props.addGradient(); // Default\r\n                } else {\r\n                    props.addGradient(new Color3Gradient(1, Color3.White()));\r\n                }\r\n            }}\r\n            renderItem={(item, index) => {\r\n                return (\r\n                    <Color3GradientComponent\r\n                        value={item.data}\r\n                        onChange={(newGradient: Color3Gradient) => {\r\n                            item.data.gradient = newGradient.gradient;\r\n                            item.data.color = newGradient.color;\r\n                            props.onChange(newGradient, index);\r\n                        }}\r\n                    />\r\n                );\r\n            }}\r\n        />\r\n    );\r\n};\r\n\r\nexport const Color4GradientList: FunctionComponent<GradientListProps<Color4Gradient>> = (props) => {\r\n    Color4GradientList.displayName = \"Color4GradientList\";\r\n    const { gradients } = props;\r\n    const items = useMemo(() => GradientsToListItems<Color4Gradient>(gradients), [gradients]);\r\n    return (\r\n        <List\r\n            key=\"Color4\"\r\n            addButtonLabel={items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`}\r\n            items={items}\r\n            onDelete={(item, index) => props.removeGradient(item.data, index)}\r\n            onAdd={() => {\r\n                if (items.length === 0) {\r\n                    props.addGradient(); // Default\r\n                } else {\r\n                    props.addGradient(new Color4Gradient(1, new Color4(1, 1, 1, 1), new Color4(1, 1, 1, 1)));\r\n                }\r\n            }}\r\n            renderItem={(item, index) => {\r\n                return (\r\n                    <Color4GradientComponent\r\n                        value={item.data}\r\n                        onChange={(newGradient: Color4Gradient) => {\r\n                            item.data.gradient = newGradient.gradient;\r\n                            item.data.color1 = newGradient.color1;\r\n                            item.data.color2 = newGradient.color2;\r\n                            props.onChange(newGradient, index);\r\n                        }}\r\n                    />\r\n                );\r\n            }}\r\n        />\r\n    );\r\n};\r\n"]}

package/fluent/hoc/pane.d.ts

@@ -1,5 +1,5 @@
-import type { FluentIcon } from "@fluentui/react-icons";
-import type { FunctionComponent, PropsWithChildren } from "react";
+import { type FluentIcon } from "@fluentui/react-icons";
+import { type FunctionComponent, type PropsWithChildren } from "react";
 export type PaneProps = {
     title: string;
     icon?: FluentIcon;

package/fluent/hoc/pane.js.map

@@ -1 +1 @@
-{"version":3,"file":"pane.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/pane.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAI7E,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,OAAO,EAAE;QACL,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;KAC1B;IACD,IAAI,EAAE;QACF,KAAK,EAAE,MAAM,CAAC,eAAe;QAC7B,MAAM,EAAE,MAAM,CAAC,eAAe;QAC9B,aAAa,EAAE,QAAQ;KAC1B;IACD,MAAM,EAAE;QACJ,MAAM,EAAE,MAAM,CAAC,eAAe;QAC9B,QAAQ,EAAE,MAAM,CAAC,eAAe;QAChC,SAAS,EAAE,QAAQ;QACnB,aAAa,EAAE,QAAQ;KAC1B;CACJ,CAAC,CAAC;AAMH,MAAM,CAAC,MAAM,IAAI,GAAoD,CAAC,KAAK,EAAE,EAAE;IAC3E,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,OAAO,CACH,eAAK,SAAS,EAAE,OAAO,CAAC,OAAO,aAC3B,eAAK,SAAS,EAAE,OAAO,CAAC,MAAM,aACzB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACV,KAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,GAAI,CAC1C,CAAC,CAAC,CAAC,CACA,cAAK,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,EAAC,MAAM,EAAC,GAAG,EAAC,oEAAoE,GAAG,CACtH,EACD,KAAC,WAAW,IAAC,EAAE,EAAC,OAAO,YAAE,KAAK,CAAC,KAAK,GAAe,IACjD,EACL,KAAK,CAAC,QAAQ,IACb,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Body1Strong, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport type { FluentIcon } from \"@fluentui/react-icons\";\r\nimport type { FunctionComponent, PropsWithChildren } from \"react\";\r\n\r\nconst useStyles = makeStyles({\r\n    rootDiv: {\r\n        flex: 1,\r\n        overflow: \"hidden\",\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n    },\r\n    icon: {\r\n        width: tokens.fontSizeBase400,\r\n        height: tokens.fontSizeBase400,\r\n        verticalAlign: \"middle\",\r\n    },\r\n    header: {\r\n        height: tokens.fontSizeBase400,\r\n        fontSize: tokens.fontSizeBase400,\r\n        textAlign: \"center\",\r\n        verticalAlign: \"middle\",\r\n    },\r\n});\r\n\r\nexport type PaneProps = {\r\n    title: string;\r\n    icon?: FluentIcon;\r\n};\r\nexport const Pane: FunctionComponent<PropsWithChildren<PaneProps>> = (props) => {\r\n    const classes = useStyles();\r\n    return (\r\n        <div className={classes.rootDiv}>\r\n            <div className={classes.header}>\r\n                {props.icon ? (\r\n                    <props.icon className={classes.icon} />\r\n                ) : (\r\n                    <img className={classes.icon} id=\"logo\" src=\"https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png\" />\r\n                )}\r\n                <Body1Strong id=\"title\">{props.title}</Body1Strong>\r\n            </div>\r\n            {props.children}\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"pane.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/pane.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAI7E,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,OAAO,EAAE;QACL,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;KAC1B;IACD,IAAI,EAAE;QACF,KAAK,EAAE,MAAM,CAAC,eAAe;QAC7B,MAAM,EAAE,MAAM,CAAC,eAAe;QAC9B,aAAa,EAAE,QAAQ;KAC1B;IACD,MAAM,EAAE;QACJ,MAAM,EAAE,MAAM,CAAC,eAAe;QAC9B,QAAQ,EAAE,MAAM,CAAC,eAAe;QAChC,SAAS,EAAE,QAAQ;QACnB,aAAa,EAAE,QAAQ;KAC1B;CACJ,CAAC,CAAC;AAMH,MAAM,CAAC,MAAM,IAAI,GAAoD,CAAC,KAAK,EAAE,EAAE;IAC3E,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,OAAO,CACH,eAAK,SAAS,EAAE,OAAO,CAAC,OAAO,aAC3B,eAAK,SAAS,EAAE,OAAO,CAAC,MAAM,aACzB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACV,KAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,GAAI,CAC1C,CAAC,CAAC,CAAC,CACA,cAAK,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,EAAC,MAAM,EAAC,GAAG,EAAC,oEAAoE,GAAG,CACtH,EACD,KAAC,WAAW,IAAC,EAAE,EAAC,OAAO,YAAE,KAAK,CAAC,KAAK,GAAe,IACjD,EACL,KAAK,CAAC,QAAQ,IACb,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Body1Strong, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { type FluentIcon } from \"@fluentui/react-icons\";\r\nimport { type FunctionComponent, type PropsWithChildren } from \"react\";\r\n\r\nconst useStyles = makeStyles({\r\n    rootDiv: {\r\n        flex: 1,\r\n        overflow: \"hidden\",\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n    },\r\n    icon: {\r\n        width: tokens.fontSizeBase400,\r\n        height: tokens.fontSizeBase400,\r\n        verticalAlign: \"middle\",\r\n    },\r\n    header: {\r\n        height: tokens.fontSizeBase400,\r\n        fontSize: tokens.fontSizeBase400,\r\n        textAlign: \"center\",\r\n        verticalAlign: \"middle\",\r\n    },\r\n});\r\n\r\nexport type PaneProps = {\r\n    title: string;\r\n    icon?: FluentIcon;\r\n};\r\nexport const Pane: FunctionComponent<PropsWithChildren<PaneProps>> = (props) => {\r\n    const classes = useStyles();\r\n    return (\r\n        <div className={classes.rootDiv}>\r\n            <div className={classes.header}>\r\n                {props.icon ? (\r\n                    <props.icon className={classes.icon} />\r\n                ) : (\r\n                    <img className={classes.icon} id=\"logo\" src=\"https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png\" />\r\n                )}\r\n                <Body1Strong id=\"title\">{props.title}</Body1Strong>\r\n            </div>\r\n            {props.children}\r\n        </div>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/propertyLines/booleanBadgePropertyLine.d.ts

@@ -1,6 +1,6 @@
-import type { FunctionComponent } from "react";
-import type { ImmutablePrimitiveProps } from "../../primitives/primitive.js";
-import type { PropertyLineProps } from "./propertyLine.js";
+import { type FunctionComponent } from "react";
+import { type PropertyLineProps } from "./propertyLine.js";
+import { type ImmutablePrimitiveProps } from "../../primitives/primitive.js";
 /**
  * Displays an icon indicating enabled (green check) or disabled (red cross) state
  * @param props - The properties for the PropertyLine, including the boolean value to display.

package/fluent/hoc/propertyLines/booleanBadgePropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"booleanBadgePropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/booleanBadgePropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAqF,CAAC,KAAK,EAAE,EAAE;IAChI,wBAAwB,CAAC,WAAW,GAAG,0BAA0B,CAAC;IAClE,uIAAuI;IACvI,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,EAAE,MAAM,EAAE,SAAS,YACtC,KAAC,aAAa,IAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,EAAE,WAAW,EAAE,IAAI,GAAI,GAC/E,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { PresenceBadge } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { ImmutablePrimitiveProps } from \"../../primitives/primitive\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\n/**\r\n * Displays an icon indicating enabled (green check) or disabled (red cross) state\r\n * @param props - The properties for the PropertyLine, including the boolean value to display.\r\n * @returns A PropertyLine component with a PresenceBadge indicating the boolean state.\r\n */\r\nexport const BooleanBadgePropertyLine: FunctionComponent<PropertyLineProps<boolean> & ImmutablePrimitiveProps<boolean>> = (props) => {\r\n    BooleanBadgePropertyLine.displayName = \"BooleanBadgePropertyLine\";\r\n    // For now assume BooleanBadge is used for readonly properties and disable copy. In future we could enable with a different copy string\r\n    return (\r\n        <PropertyLine {...props} onCopy={undefined}>\r\n            <PresenceBadge status={props.value ? \"available\" : \"do-not-disturb\"} outOfOffice={true} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"booleanBadgePropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/booleanBadgePropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AAEtE;;;;GAIG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAqF,CAAC,KAAK,EAAE,EAAE;IAChI,wBAAwB,CAAC,WAAW,GAAG,0BAA0B,CAAC;IAClE,uIAAuI;IACvI,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,EAAE,MAAM,EAAE,SAAS,YACtC,KAAC,aAAa,IAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,EAAE,WAAW,EAAE,IAAI,GAAI,GAC/E,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { PresenceBadge } from \"@fluentui/react-components\";\r\nimport { type FunctionComponent } from \"react\";\r\nimport { PropertyLine, type PropertyLineProps } from \"./propertyLine\";\r\nimport { type ImmutablePrimitiveProps } from \"../../primitives/primitive\";\r\n/**\r\n * Displays an icon indicating enabled (green check) or disabled (red cross) state\r\n * @param props - The properties for the PropertyLine, including the boolean value to display.\r\n * @returns A PropertyLine component with a PresenceBadge indicating the boolean state.\r\n */\r\nexport const BooleanBadgePropertyLine: FunctionComponent<PropertyLineProps<boolean> & ImmutablePrimitiveProps<boolean>> = (props) => {\r\n    BooleanBadgePropertyLine.displayName = \"BooleanBadgePropertyLine\";\r\n    // For now assume BooleanBadge is used for readonly properties and disable copy. In future we could enable with a different copy string\r\n    return (\r\n        <PropertyLine {...props} onCopy={undefined}>\r\n            <PresenceBadge status={props.value ? \"available\" : \"do-not-disturb\"} outOfOffice={true} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/propertyLines/checkboxPropertyLine.d.ts

@@ -1,6 +1,6 @@
-import type { PrimitiveProps } from "../../primitives/primitive.js";
-import type { PropertyLineProps } from "./propertyLine.js";
-import type { FunctionComponent } from "react";
+import { type PropertyLineProps } from "./propertyLine.js";
+import { type PrimitiveProps } from "../../primitives/primitive.js";
+import { type FunctionComponent } from "react";
 /**
  * Wraps a checkbox in a property line
  * @param props - PropertyLineProps and CheckboxProps

package/fluent/hoc/propertyLines/checkboxPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/checkboxPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI9C,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAA4E,CAAC,KAAK,EAAE,EAAE;IACnH,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC;IAC1D,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport type { PrimitiveProps } from \"../../primitives/primitive\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { Checkbox } from \"../../primitives/checkbox\";\r\n\r\n/**\r\n * Wraps a checkbox in a property line\r\n * @param props - PropertyLineProps and CheckboxProps\r\n * @returns property-line wrapped checkbox\r\n */\r\nexport const CheckboxPropertyLine: FunctionComponent<PropertyLineProps<boolean> & PrimitiveProps<boolean>> = (props) => {\r\n    CheckboxPropertyLine.displayName = \"CheckboxPropertyLine\";\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Checkbox {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"checkboxPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/checkboxPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AAGtE,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAA4E,CAAC,KAAK,EAAE,EAAE;IACnH,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC;IAC1D,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { PropertyLine, type PropertyLineProps } from \"./propertyLine\";\r\nimport { type PrimitiveProps } from \"../../primitives/primitive\";\r\nimport { type FunctionComponent } from \"react\";\r\nimport { Checkbox } from \"../../primitives/checkbox\";\r\n\r\n/**\r\n * Wraps a checkbox in a property line\r\n * @param props - PropertyLineProps and CheckboxProps\r\n * @returns property-line wrapped checkbox\r\n */\r\nexport const CheckboxPropertyLine: FunctionComponent<PropertyLineProps<boolean> & PrimitiveProps<boolean>> = (props) => {\r\n    CheckboxPropertyLine.displayName = \"CheckboxPropertyLine\";\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <Checkbox {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/propertyLines/colorPropertyLine.d.ts

@@ -1,8 +1,7 @@
-import type { FunctionComponent } from "react";
-import type { PropertyLineProps } from "./propertyLine.js";
-import type { Color3 } from "@babylonjs/core/Maths/math.color.js";
-import { Color4 } from "@babylonjs/core/Maths/math.color.js";
-import type { ColorPickerProps } from "../../primitives/colorPicker.js";
+import { type FunctionComponent } from "react";
+import { type PropertyLineProps } from "./propertyLine.js";
+import { type Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
+import { type ColorPickerProps } from "../../primitives/colorPicker.js";
 export type ColorPropertyLineProps = ColorPickerProps<Color3 | Color4> & PropertyLineProps<Color3 | Color4>;
 export declare const Color3PropertyLine: FunctionComponent<ColorPickerProps<Color3> & PropertyLineProps<Color3>>;
 export declare const Color4PropertyLine: FunctionComponent<ColorPickerProps<Color4> & PropertyLineProps<Color4>>;

package/fluent/hoc/propertyLines/colorPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"colorPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/colorPropertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport { forwardRef, useEffect, useState } from \"react\";\r\n\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport { SyncedSliderPropertyLine } from \"./syncedSliderPropertyLine\";\r\n\r\nimport type { Color3 } from \"core/Maths/math.color\";\r\nimport { Color4 } from \"core/Maths/math.color\";\r\nimport { ColorPickerPopup } from \"../../primitives/colorPicker\";\r\nimport type { ColorPickerProps } from \"../../primitives/colorPicker\";\r\n\r\nexport type ColorPropertyLineProps = ColorPickerProps<Color3 | Color4> & PropertyLineProps<Color3 | Color4>;\r\n\r\n/**\r\n * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values\r\n * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly\r\n * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color\r\n * @returns Component wrapping a colorPicker component with a property line\r\n */\r\nconst ColorPropertyLine = forwardRef<HTMLDivElement, ColorPropertyLineProps>((props, ref) => {\r\n    ColorPropertyLine.displayName = \"ColorPropertyLine\";\r\n    const [color, setColor] = useState(props.value);\r\n\r\n    useEffect(() => {\r\n        setColor(props.value);\r\n    }, [props.value]);\r\n\r\n    const onSliderChange = (value: number, key: \"r\" | \"g\" | \"b\" | \"a\") => {\r\n        let newColor: Color3 | Color4;\r\n        if (key === \"a\") {\r\n            newColor = Color4.FromColor3(color, value);\r\n        } else {\r\n            newColor = color.clone();\r\n            newColor[key] = value / 255;\r\n        }\r\n\r\n        setColor(newColor); // Create a new object to trigger re-render\r\n        props.onChange(newColor);\r\n    };\r\n\r\n    const onColorPickerChange = (newColor: Color3 | Color4) => {\r\n        setColor(newColor);\r\n        props.onChange(newColor);\r\n    };\r\n\r\n    return (\r\n        <PropertyLine ref={ref} {...props} expandedContent={color ? <ColorSliders color={color} onSliderChange={onSliderChange} /> : undefined}>\r\n            <ColorPickerPopup {...props} onChange={onColorPickerChange} value={color} />\r\n        </PropertyLine>\r\n    );\r\n});\r\n\r\ntype ColorSlidersProps = {\r\n    color: Color3 | Color4;\r\n    onSliderChange: (value: number, key: \"r\" | \"g\" | \"b\" | \"a\") => void;\r\n};\r\n\r\nconst ColorSliders: FunctionComponent<ColorSlidersProps> = ({ color, onSliderChange }) => (\r\n    <>\r\n        <SyncedSliderPropertyLine label=\"R\" value={color.r * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"r\")} />\r\n        <SyncedSliderPropertyLine label=\"G\" value={color.g * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"g\")} />\r\n        <SyncedSliderPropertyLine label=\"B\" value={color.b * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"b\")} />\r\n        {color instanceof Color4 && <SyncedSliderPropertyLine label=\"A\" value={color.a} min={0} max={1} step={0.01} onChange={(value) => onSliderChange(value, \"a\")} />}\r\n    </>\r\n);\r\n\r\nexport const Color3PropertyLine = ColorPropertyLine as FunctionComponent<ColorPickerProps<Color3> & PropertyLineProps<Color3>>;\r\nexport const Color4PropertyLine = ColorPropertyLine as FunctionComponent<ColorPickerProps<Color4> & PropertyLineProps<Color4>>;\r\n"]}
+{"version":3,"file":"colorPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/colorPropertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type FunctionComponent, forwardRef, useEffect, useState } from \"react\";\r\n\r\nimport { type PropertyLineProps, PropertyLine } from \"./propertyLine\";\r\nimport { SyncedSliderPropertyLine } from \"./syncedSliderPropertyLine\";\r\n\r\nimport { type Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { ColorPickerPopup, type ColorPickerProps } from \"../../primitives/colorPicker\";\r\n\r\nexport type ColorPropertyLineProps = ColorPickerProps<Color3 | Color4> & PropertyLineProps<Color3 | Color4>;\r\n\r\n/**\r\n * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values\r\n * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly\r\n * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color\r\n * @returns Component wrapping a colorPicker component with a property line\r\n */\r\nconst ColorPropertyLine = forwardRef<HTMLDivElement, ColorPropertyLineProps>((props, ref) => {\r\n    ColorPropertyLine.displayName = \"ColorPropertyLine\";\r\n    const [color, setColor] = useState(props.value);\r\n\r\n    useEffect(() => {\r\n        setColor(props.value);\r\n    }, [props.value]);\r\n\r\n    const onSliderChange = (value: number, key: \"r\" | \"g\" | \"b\" | \"a\") => {\r\n        let newColor: Color3 | Color4;\r\n        if (key === \"a\") {\r\n            newColor = Color4.FromColor3(color, value);\r\n        } else {\r\n            newColor = color.clone();\r\n            newColor[key] = value / 255;\r\n        }\r\n\r\n        setColor(newColor); // Create a new object to trigger re-render\r\n        props.onChange(newColor);\r\n    };\r\n\r\n    const onColorPickerChange = (newColor: Color3 | Color4) => {\r\n        setColor(newColor);\r\n        props.onChange(newColor);\r\n    };\r\n\r\n    return (\r\n        <PropertyLine ref={ref} {...props} expandedContent={color ? <ColorSliders color={color} onSliderChange={onSliderChange} /> : undefined}>\r\n            <ColorPickerPopup {...props} onChange={onColorPickerChange} value={color} />\r\n        </PropertyLine>\r\n    );\r\n});\r\n\r\ntype ColorSlidersProps = {\r\n    color: Color3 | Color4;\r\n    onSliderChange: (value: number, key: \"r\" | \"g\" | \"b\" | \"a\") => void;\r\n};\r\n\r\nconst ColorSliders: FunctionComponent<ColorSlidersProps> = ({ color, onSliderChange }) => (\r\n    <>\r\n        <SyncedSliderPropertyLine label=\"R\" value={color.r * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"r\")} />\r\n        <SyncedSliderPropertyLine label=\"G\" value={color.g * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"g\")} />\r\n        <SyncedSliderPropertyLine label=\"B\" value={color.b * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"b\")} />\r\n        {color instanceof Color4 && <SyncedSliderPropertyLine label=\"A\" value={color.a} min={0} max={1} step={0.01} onChange={(value) => onSliderChange(value, \"a\")} />}\r\n    </>\r\n);\r\n\r\nexport const Color3PropertyLine = ColorPropertyLine as FunctionComponent<ColorPickerProps<Color3> & PropertyLineProps<Color3>>;\r\nexport const Color4PropertyLine = ColorPropertyLine as FunctionComponent<ColorPickerProps<Color4> & PropertyLineProps<Color4>>;\r\n"]}

package/fluent/hoc/propertyLines/comboBoxPropertyLine.d.ts

@@ -1,6 +1,6 @@
-import type { FunctionComponent } from "react";
-import type { PropertyLineProps } from "./propertyLine.js";
-import type { ComboBoxProps } from "../../primitives/comboBox.js";
+import { type FunctionComponent } from "react";
+import { type PropertyLineProps } from "./propertyLine.js";
+import { type ComboBoxProps } from "../../primitives/comboBox.js";
 type ComboBoxPropertyLineProps = ComboBoxProps & PropertyLineProps<string>;
 /**
  * A property line with a filterable ComboBox

package/fluent/hoc/propertyLines/comboBoxPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"comboBoxPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/comboBoxPropertyLine.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAIrD;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAiD,CAAC,KAAK,EAAE,EAAE;IACxF,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC;IAE1D,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport type { ComboBoxProps } from \"../../primitives/comboBox\";\r\n\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport { ComboBox } from \"../../primitives/comboBox\";\r\n\r\ntype ComboBoxPropertyLineProps = ComboBoxProps & PropertyLineProps<string>;\r\n\r\n/**\r\n * A property line with a filterable ComboBox\r\n * @param props - ComboBoxProps & PropertyLineProps\r\n * @returns property-line wrapped ComboBox component\r\n */\r\nexport const ComboBoxPropertyLine: FunctionComponent<ComboBoxPropertyLineProps> = (props) => {\r\n    ComboBoxPropertyLine.displayName = \"ComboBoxPropertyLine\";\r\n\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <ComboBox {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"comboBoxPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/comboBoxPropertyLine.tsx"],"names":[],"mappings":";AACA,OAAO,EAA0B,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAsB,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAIzE;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAiD,CAAC,KAAK,EAAE,EAAE;IACxF,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC;IAE1D,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,YACnB,KAAC,QAAQ,OAAK,KAAK,GAAI,GACZ,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { type FunctionComponent } from \"react\";\r\nimport { type PropertyLineProps, PropertyLine } from \"./propertyLine\";\r\nimport { type ComboBoxProps, ComboBox } from \"../../primitives/comboBox\";\r\n\r\ntype ComboBoxPropertyLineProps = ComboBoxProps & PropertyLineProps<string>;\r\n\r\n/**\r\n * A property line with a filterable ComboBox\r\n * @param props - ComboBoxProps & PropertyLineProps\r\n * @returns property-line wrapped ComboBox component\r\n */\r\nexport const ComboBoxPropertyLine: FunctionComponent<ComboBoxPropertyLineProps> = (props) => {\r\n    ComboBoxPropertyLine.displayName = \"ComboBoxPropertyLine\";\r\n\r\n    return (\r\n        <PropertyLine {...props}>\r\n            <ComboBox {...props} />\r\n        </PropertyLine>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/propertyLines/dropdownPropertyLine.d.ts

@@ -1,6 +1,6 @@
-import type { AcceptedDropdownValue, DropdownProps } from "../../primitives/dropdown.js";
-import type { PropertyLineProps } from "./propertyLine.js";
-import type { FunctionComponent } from "react";
+import { type AcceptedDropdownValue, type DropdownProps } from "../../primitives/dropdown.js";
+import { type PropertyLineProps } from "./propertyLine.js";
+import { type FunctionComponent } from "react";
 type DropdownPropertyLineProps<V extends AcceptedDropdownValue> = DropdownProps<V> & PropertyLineProps<V>;
 /**
  * Wraps a dropdown in a property line

package/fluent/hoc/propertyLines/dropdownPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdownPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/dropdownPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,QAAQ,EAAE;QACN,GAAG,mBAAmB;KACzB;CACJ,CAAC,CAAC;AAIH;;;;GAIG;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,UAAU,CAAmE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC5H,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC;IAC1D,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,YAC7B,KAAC,QAAQ,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,QAAQ,GAAI,GACzC,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAA4E,CAAC;AACvH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAA4E,CAAC","sourcesContent":["import { makeStyles } from \"@fluentui/react-components\";\r\nimport { Dropdown } from \"../../primitives/dropdown\";\r\nimport type { AcceptedDropdownValue, DropdownProps } from \"../../primitives/dropdown\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\nimport { forwardRef } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport { UniformWidthStyling } from \"../../primitives/utils\";\r\n\r\nconst useStyles = makeStyles({\r\n    dropdown: {\r\n        ...UniformWidthStyling,\r\n    },\r\n});\r\n\r\ntype DropdownPropertyLineProps<V extends AcceptedDropdownValue> = DropdownProps<V> & PropertyLineProps<V>;\r\n\r\n/**\r\n * Wraps a dropdown in a property line\r\n * @param props - PropertyLineProps and DropdownProps\r\n * @returns property-line wrapped dropdown\r\n */\r\n\r\nexport const DropdownPropertyLine = forwardRef<HTMLDivElement, DropdownPropertyLineProps<AcceptedDropdownValue>>((props, ref) => {\r\n    DropdownPropertyLine.displayName = \"DropdownPropertyLine\";\r\n    const classes = useStyles();\r\n    return (\r\n        <PropertyLine {...props} ref={ref}>\r\n            <Dropdown {...props} className={classes.dropdown} />\r\n        </PropertyLine>\r\n    );\r\n});\r\n\r\n/**\r\n * Dropdown component for number values.\r\n */\r\nexport const NumberDropdownPropertyLine = DropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<number>>;\r\n/**\r\n * Dropdown component for string values\r\n */\r\nexport const StringDropdownPropertyLine = DropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<string>>;\r\n"]}
+{"version":3,"file":"dropdownPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/dropdownPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAkD,MAAM,2BAA2B,CAAC;AACrG,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,UAAU,EAA0B,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,QAAQ,EAAE;QACN,GAAG,mBAAmB;KACzB;CACJ,CAAC,CAAC;AAIH;;;;GAIG;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,UAAU,CAAmE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC5H,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC;IAC1D,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,OAAO,CACH,KAAC,YAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,YAC7B,KAAC,QAAQ,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,QAAQ,GAAI,GACzC,CAClB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAA4E,CAAC;AACvH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAA4E,CAAC","sourcesContent":["import { makeStyles } from \"@fluentui/react-components\";\r\nimport { Dropdown, type AcceptedDropdownValue, type DropdownProps } from \"../../primitives/dropdown\";\r\nimport { PropertyLine, type PropertyLineProps } from \"./propertyLine\";\r\nimport { forwardRef, type FunctionComponent } from \"react\";\r\nimport { UniformWidthStyling } from \"../../primitives/utils\";\r\n\r\nconst useStyles = makeStyles({\r\n    dropdown: {\r\n        ...UniformWidthStyling,\r\n    },\r\n});\r\n\r\ntype DropdownPropertyLineProps<V extends AcceptedDropdownValue> = DropdownProps<V> & PropertyLineProps<V>;\r\n\r\n/**\r\n * Wraps a dropdown in a property line\r\n * @param props - PropertyLineProps and DropdownProps\r\n * @returns property-line wrapped dropdown\r\n */\r\n\r\nexport const DropdownPropertyLine = forwardRef<HTMLDivElement, DropdownPropertyLineProps<AcceptedDropdownValue>>((props, ref) => {\r\n    DropdownPropertyLine.displayName = \"DropdownPropertyLine\";\r\n    const classes = useStyles();\r\n    return (\r\n        <PropertyLine {...props} ref={ref}>\r\n            <Dropdown {...props} className={classes.dropdown} />\r\n        </PropertyLine>\r\n    );\r\n});\r\n\r\n/**\r\n * Dropdown component for number values.\r\n */\r\nexport const NumberDropdownPropertyLine = DropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<number>>;\r\n/**\r\n * Dropdown component for string values\r\n */\r\nexport const StringDropdownPropertyLine = DropdownPropertyLine as FunctionComponent<DropdownPropertyLineProps<string>>;\r\n"]}

package/fluent/hoc/propertyLines/entitySelectorPropertyLine.d.ts

@@ -1,15 +1,15 @@
-import type { Skeleton } from "@babylonjs/core/Bones/skeleton.js";
-import type { ClusteredLightContainer } from "@babylonjs/core/Lights/Clustered/clusteredLightContainer.js";
-import type { Material } from "@babylonjs/core/Materials/material.js";
-import type { BaseTexture } from "@babylonjs/core/Materials/Textures/baseTexture.js";
-import type { Node } from "@babylonjs/core/node.js";
-import type { Nullable } from "@babylonjs/core/types.js";
-import type { ClusteredLightContainerSelectorProps } from "../../primitives/clusteredLightContainerSelector.js";
-import type { MaterialSelectorProps } from "../../primitives/materialSelector.js";
-import type { NodeSelectorProps } from "../../primitives/nodeSelector.js";
-import type { SkeletonSelectorProps } from "../../primitives/skeletonSelector.js";
-import type { TextureSelectorProps } from "../../primitives/textureSelector.js";
-import type { PropertyLineProps } from "./propertyLine.js";
+import { type Skeleton } from "@babylonjs/core/Bones/skeleton.js";
+import { type ClusteredLightContainer } from "@babylonjs/core/Lights/Clustered/clusteredLightContainer.js";
+import { type Material } from "@babylonjs/core/Materials/material.js";
+import { type BaseTexture } from "@babylonjs/core/Materials/Textures/baseTexture.js";
+import { type Node } from "@babylonjs/core/node.js";
+import { type Nullable } from "@babylonjs/core/types.js";
+import { type ClusteredLightContainerSelectorProps } from "../../primitives/clusteredLightContainerSelector.js";
+import { type MaterialSelectorProps } from "../../primitives/materialSelector.js";
+import { type NodeSelectorProps } from "../../primitives/nodeSelector.js";
+import { type SkeletonSelectorProps } from "../../primitives/skeletonSelector.js";
+import { type TextureSelectorProps } from "../../primitives/textureSelector.js";
+import { type PropertyLineProps } from "./propertyLine.js";
 type NodeSelectorPropertyLineProps = PropertyLineProps<Nullable<Node>> & NodeSelectorProps;
 type MaterialSelectorPropertyLineProps = PropertyLineProps<Nullable<Material>> & MaterialSelectorProps;
 type TextureSelectorPropertyLineProps = PropertyLineProps<Nullable<BaseTexture>> & TextureSelectorProps;