sequential-workflow-designer-react 0.34.0 → 0.35.0

package/lib/cjs/index.cjs

@@ -0,0 +1,440 @@
+'use strict';
+
+var ReactDOM = require('react-dom/client');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var sequentialWorkflowDesigner = require('sequential-workflow-designer');
+
+var Presenter = /** @class */ (function () {
+    function Presenter() {
+    }
+    Presenter.render = function (className, rootRef, element) {
+        Presenter.tryDestroy(rootRef);
+        var container = document.createElement('div');
+        container.className = className;
+        rootRef.current = ReactDOM.createRoot(container);
+        rootRef.current.render(element);
+        return container;
+    };
+    Presenter.tryDestroy = function (rootRef) {
+        if (rootRef.current) {
+            var oldRoot_1 = rootRef.current;
+            rootRef.current = null;
+            setTimeout(function () { return oldRoot_1.unmount(); });
+        }
+    };
+    return Presenter;
+}());
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+if (!window.sqdRootEditorContext) {
+    window.sqdRootEditorContext = react.createContext(null);
+}
+var rootEditorContext = window.sqdRootEditorContext;
+function useRootEditor() {
+    var wrapper = react.useContext(rootEditorContext);
+    if (!wrapper) {
+        throw new Error('Cannot find root editor context');
+    }
+    return wrapper;
+}
+function RootEditorWrapperContext(props) {
+    var _a = react.useState(function () { return createWrapper(); }), wrapper = _a[0], setWrapper = _a[1];
+    function createWrapper() {
+        return {
+            properties: props.definition.properties,
+            definition: props.definition,
+            isReadonly: props.isReadonly,
+            setProperty: setProperty
+        };
+    }
+    function forward() {
+        setWrapper(createWrapper());
+    }
+    function setProperty(name, value) {
+        props.definition.properties[name] = value;
+        props.context.notifyPropertiesChanged();
+        forward();
+    }
+    return jsxRuntime.jsx(rootEditorContext.Provider, __assign({ value: wrapper }, { children: props.children }));
+}
+
+if (!window.sqdStepEditorContext) {
+    window.sqdStepEditorContext = react.createContext(null);
+}
+var stepEditorContext = window.sqdStepEditorContext;
+function useStepEditor() {
+    var wrapper = react.useContext(stepEditorContext);
+    if (!wrapper) {
+        throw new Error('Cannot find step editor context');
+    }
+    return wrapper;
+}
+function StepEditorWrapperContext(props) {
+    var _a = react.useState(function () { return createWrapper(); }), wrapper = _a[0], setWrapper = _a[1];
+    function createWrapper() {
+        return {
+            id: props.step.id,
+            type: props.step.type,
+            componentType: props.step.componentType,
+            name: props.step.name,
+            properties: props.step.properties,
+            step: props.step,
+            definition: props.definition,
+            isReadonly: props.isReadonly,
+            setName: setName,
+            setProperty: setProperty,
+            notifyPropertiesChanged: notifyPropertiesChanged,
+            notifyChildrenChanged: notifyChildrenChanged
+        };
+    }
+    function forward() {
+        setWrapper(createWrapper());
+    }
+    function setName(name) {
+        props.step.name = name;
+        notifyNameChanged();
+    }
+    function setProperty(name, value) {
+        props.step.properties[name] = value;
+        notifyPropertiesChanged();
+    }
+    function notifyNameChanged() {
+        props.context.notifyNameChanged();
+        forward();
+    }
+    function notifyPropertiesChanged() {
+        props.context.notifyPropertiesChanged();
+        forward();
+    }
+    function notifyChildrenChanged() {
+        props.context.notifyChildrenChanged();
+        forward();
+    }
+    return jsxRuntime.jsx(stepEditorContext.Provider, __assign({ value: wrapper }, { children: props.children }));
+}
+
+function wrapDefinition(value, isValid) {
+    return {
+        value: value,
+        isValid: isValid
+    };
+}
+
+var externalEditorClassName = 'sqd-editor-react';
+function SequentialWorkflowDesigner(props) {
+    var _a = react.useState(null), root = _a[0], setRoot = _a[1];
+    var onDefinitionChangeRef = react.useRef(props.onDefinitionChange);
+    var onSelectedStepIdChangedRef = react.useRef(props.onSelectedStepIdChanged);
+    var onStepUnselectionBlockedRef = react.useRef(props.onStepUnselectionBlocked);
+    var onIsEditorCollapsedChangedRef = react.useRef(props.onIsEditorCollapsedChanged);
+    var onIsToolboxCollapsedChangedRef = react.useRef(props.onIsToolboxCollapsedChanged);
+    var rootEditorRef = react.useRef(props.rootEditor);
+    var stepEditorRef = react.useRef(props.stepEditor);
+    var controllerRef = react.useRef(props.controller);
+    var customActionHandlerRef = react.useRef(props.customActionHandler);
+    var designerRef = react.useRef(null);
+    var editorRootRef = react.useRef(null);
+    var definition = props.definition;
+    var selectedStepId = props.selectedStepId;
+    var isReadonly = props.isReadonly;
+    var theme = props.theme;
+    var undoStackSize = props.undoStackSize;
+    var steps = props.stepsConfiguration;
+    var validator = props.validatorConfiguration;
+    var placeholder = props.placeholderConfiguration;
+    var toolbox = props.toolboxConfiguration;
+    var isEditorCollapsed = props.isEditorCollapsed;
+    var isToolboxCollapsed = props.isToolboxCollapsed;
+    var controlBar = props.controlBar;
+    var contextMenu = props.contextMenu;
+    var keyboard = props.keyboard;
+    var preferenceStorage = props.preferenceStorage;
+    var extensions = props.extensions;
+    var i18n = props.i18n;
+    function forwardDefinition() {
+        if (designerRef.current) {
+            var wd = wrapDefinition(designerRef.current.getDefinition(), designerRef.current.isValid());
+            onDefinitionChangeRef.current(wd);
+        }
+    }
+    function rootEditorProvider(def, context, isReadonly) {
+        if (!rootEditorRef.current) {
+            throw new Error('Root editor is not provided');
+        }
+        if (react.isValidElement(rootEditorRef.current)) {
+            return Presenter.render(externalEditorClassName, editorRootRef, jsxRuntime.jsx(RootEditorWrapperContext, __assign({ definition: def, context: context, isReadonly: isReadonly }, { children: rootEditorRef.current })));
+        }
+        return rootEditorRef.current(def, context, isReadonly);
+    }
+    function stepEditorProvider(step, context, def, isReadonly) {
+        if (!stepEditorRef.current) {
+            throw new Error('Step editor is not provided');
+        }
+        if (react.isValidElement(stepEditorRef.current)) {
+            return Presenter.render(externalEditorClassName, editorRootRef, jsxRuntime.jsx(StepEditorWrapperContext, __assign({ step: step, definition: def, context: context, isReadonly: isReadonly }, { children: stepEditorRef.current })));
+        }
+        return stepEditorRef.current(step, context, def, isReadonly);
+    }
+    function customActionHandler(action, step, sequence, context) {
+        if (customActionHandlerRef.current) {
+            customActionHandlerRef.current(action, step, sequence, context);
+        }
+    }
+    function tryDestroy() {
+        Presenter.tryDestroy(editorRootRef);
+        if (controllerRef.current) {
+            controllerRef.current.setDesigner(null);
+        }
+        if (designerRef.current) {
+            designerRef.current.destroy();
+            designerRef.current = null;
+            // console.log('sqd: designer destroyed');
+        }
+    }
+    react.useEffect(function () {
+        onDefinitionChangeRef.current = props.onDefinitionChange;
+    }, [props.onDefinitionChange]);
+    react.useEffect(function () {
+        onSelectedStepIdChangedRef.current = props.onSelectedStepIdChanged;
+    }, [props.onSelectedStepIdChanged]);
+    react.useEffect(function () {
+        onStepUnselectionBlockedRef.current = props.onStepUnselectionBlocked;
+    }, [props.onStepUnselectionBlocked]);
+    react.useEffect(function () {
+        onIsEditorCollapsedChangedRef.current = props.onIsEditorCollapsedChanged;
+    }, [props.onIsEditorCollapsedChanged]);
+    react.useEffect(function () {
+        onIsToolboxCollapsedChangedRef.current = props.onIsToolboxCollapsedChanged;
+    }, [props.onIsToolboxCollapsedChanged]);
+    react.useEffect(function () {
+        rootEditorRef.current = props.rootEditor;
+    }, [props.rootEditor]);
+    react.useEffect(function () {
+        stepEditorRef.current = props.stepEditor;
+    }, [props.stepEditor]);
+    react.useEffect(function () {
+        customActionHandlerRef.current = props.customActionHandler;
+    }, [props.customActionHandler]);
+    react.useEffect(function () {
+        if (!root) {
+            return;
+        }
+        if (designerRef.current) {
+            var isNotChanged = definition.value === designerRef.current.getDefinition();
+            if (isNotChanged) {
+                if (selectedStepId !== undefined && selectedStepId !== designerRef.current.getSelectedStepId()) {
+                    if (selectedStepId) {
+                        designerRef.current.selectStepById(selectedStepId);
+                    }
+                    else {
+                        designerRef.current.clearSelectedStep();
+                    }
+                    // console.log('sqd: selected step updated');
+                }
+                if (isReadonly !== undefined && isReadonly !== designerRef.current.isReadonly()) {
+                    designerRef.current.setIsReadonly(isReadonly);
+                    // console.log('sqd: isReadonly updated');
+                }
+                if (isToolboxCollapsed !== undefined && isToolboxCollapsed !== designerRef.current.isToolboxCollapsed()) {
+                    designerRef.current.setIsToolboxCollapsed(isToolboxCollapsed);
+                    // console.log('sqd: isToolboxCollapsed updated');
+                }
+                if (isEditorCollapsed !== undefined && isEditorCollapsed !== designerRef.current.isEditorCollapsed()) {
+                    designerRef.current.setIsEditorCollapsed(isEditorCollapsed);
+                    // console.log('sqd: isEditorCollapsed updated');
+                }
+                return;
+            }
+            tryDestroy();
+        }
+        var designer = sequentialWorkflowDesigner.Designer.create(root, definition.value, {
+            theme: theme,
+            undoStackSize: undoStackSize,
+            toolbox: toolbox
+                ? __assign(__assign({}, toolbox), { isCollapsed: isToolboxCollapsed }) : false,
+            steps: steps,
+            validator: validator,
+            placeholder: placeholder,
+            controlBar: controlBar,
+            contextMenu: contextMenu,
+            keyboard: keyboard,
+            preferenceStorage: preferenceStorage,
+            editors: rootEditorRef.current && stepEditorRef.current
+                ? {
+                    isCollapsed: isEditorCollapsed,
+                    rootEditorProvider: rootEditorProvider,
+                    stepEditorProvider: stepEditorProvider
+                }
+                : false,
+            customActionHandler: customActionHandlerRef.current && customActionHandler,
+            extensions: extensions,
+            i18n: i18n,
+            isReadonly: isReadonly
+        });
+        if (controllerRef.current) {
+            controllerRef.current.setDesigner(designer);
+        }
+        if (selectedStepId) {
+            designer.selectStepById(selectedStepId);
+        }
+        // console.log('sqd: designer rendered');
+        designer.onReady.subscribe(forwardDefinition);
+        designer.onDefinitionChanged.subscribe(forwardDefinition);
+        designer.onSelectedStepIdChanged.subscribe(function (stepId) {
+            if (onSelectedStepIdChangedRef.current) {
+                onSelectedStepIdChangedRef.current(stepId);
+            }
+        });
+        designer.onStepUnselectionBlocked.subscribe(function (targetStepId) {
+            if (onStepUnselectionBlockedRef.current) {
+                onStepUnselectionBlockedRef.current(targetStepId);
+            }
+        });
+        designer.onIsToolboxCollapsedChanged.subscribe(function (isCollapsed) {
+            if (onIsToolboxCollapsedChangedRef.current) {
+                onIsToolboxCollapsedChangedRef.current(isCollapsed);
+            }
+        });
+        designer.onIsEditorCollapsedChanged.subscribe(function (isCollapsed) {
+            if (onIsEditorCollapsedChangedRef.current) {
+                onIsEditorCollapsedChangedRef.current(isCollapsed);
+            }
+        });
+        designerRef.current = designer;
+    }, [
+        root,
+        definition,
+        selectedStepId,
+        isReadonly,
+        theme,
+        undoStackSize,
+        toolbox,
+        isToolboxCollapsed,
+        isEditorCollapsed,
+        contextMenu,
+        keyboard,
+        preferenceStorage,
+        controlBar,
+        steps,
+        validator,
+        placeholder,
+        extensions,
+        i18n
+    ]);
+    react.useEffect(function () {
+        return tryDestroy;
+    }, []);
+    return jsxRuntime.jsx("div", { ref: setRoot, "data-testid": "designer", className: "sqd-designer-react" });
+}
+
+var SequentialWorkflowDesignerController = /** @class */ (function () {
+    function SequentialWorkflowDesignerController() {
+        var _this = this;
+        /**
+         * @description Event that is raised when the controller is ready to be used.
+         */
+        this.onIsReadyChanged = new sequentialWorkflowDesigner.SimpleEvent();
+        this.designer = null;
+        /**
+         * @description Moves the viewport to the step with the animation.
+         */
+        this.moveViewportToStep = function (stepId) {
+            _this.getDesigner().moveViewportToStep(stepId);
+        };
+        /**
+         * @description Updates all badges.
+         */
+        this.updateBadges = function () {
+            _this.getDesigner().updateBadges();
+        };
+        /**
+         * @description Rerender the root component and all its children.
+         */
+        this.updateRootComponent = function () {
+            _this.getDesigner().updateRootComponent();
+        };
+        /**
+         * @description Updates the layout of the designer.
+         */
+        this.updateLayout = function () {
+            _this.getDesigner().updateLayout();
+        };
+        /**
+         * Replaces the current definition with a new one and adds the previous definition to the undo stack.
+         * @param definition A new definition.
+         */
+        this.replaceDefinition = function (definition) {
+            return _this.getDesigner().replaceDefinition(definition);
+        };
+        // Nothing...
+    }
+    SequentialWorkflowDesignerController.create = function () {
+        return new SequentialWorkflowDesignerController();
+    };
+    /**
+     * @returns `true` if the controller is ready to be used, `false` otherwise.
+     */
+    SequentialWorkflowDesignerController.prototype.isReady = function () {
+        return Boolean(this.designer);
+    };
+    SequentialWorkflowDesignerController.prototype.setDesigner = function (designer) {
+        if (designer && this.designer) {
+            throw new Error('Designer is already set');
+        }
+        this.designer = designer;
+        this.onIsReadyChanged.forward();
+    };
+    SequentialWorkflowDesignerController.prototype.getDesigner = function () {
+        if (!this.designer) {
+            throw new Error('Designer is not ready yet');
+        }
+        return this.designer;
+    };
+    return SequentialWorkflowDesignerController;
+}());
+function useSequentialWorkflowDesignerController(deps) {
+    return react.useMemo(function () { return SequentialWorkflowDesignerController.create(); }, deps || []);
+}
+
+exports.Presenter = Presenter;
+exports.RootEditorWrapperContext = RootEditorWrapperContext;
+exports.SequentialWorkflowDesigner = SequentialWorkflowDesigner;
+exports.SequentialWorkflowDesignerController = SequentialWorkflowDesignerController;
+exports.StepEditorWrapperContext = StepEditorWrapperContext;
+exports.useRootEditor = useRootEditor;
+exports.useSequentialWorkflowDesignerController = useSequentialWorkflowDesignerController;
+exports.useStepEditor = useStepEditor;
+exports.wrapDefinition = wrapDefinition;

package/lib/esm/index.js

@@ -0,0 +1,430 @@
+import ReactDOM from 'react-dom/client';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useRef, useEffect, isValidElement, useMemo } from 'react';
+import { Designer, SimpleEvent } from 'sequential-workflow-designer';
+
+var Presenter = /** @class */ (function () {
+    function Presenter() {
+    }
+    Presenter.render = function (className, rootRef, element) {
+        Presenter.tryDestroy(rootRef);
+        var container = document.createElement('div');
+        container.className = className;
+        rootRef.current = ReactDOM.createRoot(container);
+        rootRef.current.render(element);
+        return container;
+    };
+    Presenter.tryDestroy = function (rootRef) {
+        if (rootRef.current) {
+            var oldRoot_1 = rootRef.current;
+            rootRef.current = null;
+            setTimeout(function () { return oldRoot_1.unmount(); });
+        }
+    };
+    return Presenter;
+}());
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+if (!window.sqdRootEditorContext) {
+    window.sqdRootEditorContext = createContext(null);
+}
+var rootEditorContext = window.sqdRootEditorContext;
+function useRootEditor() {
+    var wrapper = useContext(rootEditorContext);
+    if (!wrapper) {
+        throw new Error('Cannot find root editor context');
+    }
+    return wrapper;
+}
+function RootEditorWrapperContext(props) {
+    var _a = useState(function () { return createWrapper(); }), wrapper = _a[0], setWrapper = _a[1];
+    function createWrapper() {
+        return {
+            properties: props.definition.properties,
+            definition: props.definition,
+            isReadonly: props.isReadonly,
+            setProperty: setProperty
+        };
+    }
+    function forward() {
+        setWrapper(createWrapper());
+    }
+    function setProperty(name, value) {
+        props.definition.properties[name] = value;
+        props.context.notifyPropertiesChanged();
+        forward();
+    }
+    return jsx(rootEditorContext.Provider, __assign({ value: wrapper }, { children: props.children }));
+}
+
+if (!window.sqdStepEditorContext) {
+    window.sqdStepEditorContext = createContext(null);
+}
+var stepEditorContext = window.sqdStepEditorContext;
+function useStepEditor() {
+    var wrapper = useContext(stepEditorContext);
+    if (!wrapper) {
+        throw new Error('Cannot find step editor context');
+    }
+    return wrapper;
+}
+function StepEditorWrapperContext(props) {
+    var _a = useState(function () { return createWrapper(); }), wrapper = _a[0], setWrapper = _a[1];
+    function createWrapper() {
+        return {
+            id: props.step.id,
+            type: props.step.type,
+            componentType: props.step.componentType,
+            name: props.step.name,
+            properties: props.step.properties,
+            step: props.step,
+            definition: props.definition,
+            isReadonly: props.isReadonly,
+            setName: setName,
+            setProperty: setProperty,
+            notifyPropertiesChanged: notifyPropertiesChanged,
+            notifyChildrenChanged: notifyChildrenChanged
+        };
+    }
+    function forward() {
+        setWrapper(createWrapper());
+    }
+    function setName(name) {
+        props.step.name = name;
+        notifyNameChanged();
+    }
+    function setProperty(name, value) {
+        props.step.properties[name] = value;
+        notifyPropertiesChanged();
+    }
+    function notifyNameChanged() {
+        props.context.notifyNameChanged();
+        forward();
+    }
+    function notifyPropertiesChanged() {
+        props.context.notifyPropertiesChanged();
+        forward();
+    }
+    function notifyChildrenChanged() {
+        props.context.notifyChildrenChanged();
+        forward();
+    }
+    return jsx(stepEditorContext.Provider, __assign({ value: wrapper }, { children: props.children }));
+}
+
+function wrapDefinition(value, isValid) {
+    return {
+        value: value,
+        isValid: isValid
+    };
+}
+
+var externalEditorClassName = 'sqd-editor-react';
+function SequentialWorkflowDesigner(props) {
+    var _a = useState(null), root = _a[0], setRoot = _a[1];
+    var onDefinitionChangeRef = useRef(props.onDefinitionChange);
+    var onSelectedStepIdChangedRef = useRef(props.onSelectedStepIdChanged);
+    var onStepUnselectionBlockedRef = useRef(props.onStepUnselectionBlocked);
+    var onIsEditorCollapsedChangedRef = useRef(props.onIsEditorCollapsedChanged);
+    var onIsToolboxCollapsedChangedRef = useRef(props.onIsToolboxCollapsedChanged);
+    var rootEditorRef = useRef(props.rootEditor);
+    var stepEditorRef = useRef(props.stepEditor);
+    var controllerRef = useRef(props.controller);
+    var customActionHandlerRef = useRef(props.customActionHandler);
+    var designerRef = useRef(null);
+    var editorRootRef = useRef(null);
+    var definition = props.definition;
+    var selectedStepId = props.selectedStepId;
+    var isReadonly = props.isReadonly;
+    var theme = props.theme;
+    var undoStackSize = props.undoStackSize;
+    var steps = props.stepsConfiguration;
+    var validator = props.validatorConfiguration;
+    var placeholder = props.placeholderConfiguration;
+    var toolbox = props.toolboxConfiguration;
+    var isEditorCollapsed = props.isEditorCollapsed;
+    var isToolboxCollapsed = props.isToolboxCollapsed;
+    var controlBar = props.controlBar;
+    var contextMenu = props.contextMenu;
+    var keyboard = props.keyboard;
+    var preferenceStorage = props.preferenceStorage;
+    var extensions = props.extensions;
+    var i18n = props.i18n;
+    function forwardDefinition() {
+        if (designerRef.current) {
+            var wd = wrapDefinition(designerRef.current.getDefinition(), designerRef.current.isValid());
+            onDefinitionChangeRef.current(wd);
+        }
+    }
+    function rootEditorProvider(def, context, isReadonly) {
+        if (!rootEditorRef.current) {
+            throw new Error('Root editor is not provided');
+        }
+        if (isValidElement(rootEditorRef.current)) {
+            return Presenter.render(externalEditorClassName, editorRootRef, jsx(RootEditorWrapperContext, __assign({ definition: def, context: context, isReadonly: isReadonly }, { children: rootEditorRef.current })));
+        }
+        return rootEditorRef.current(def, context, isReadonly);
+    }
+    function stepEditorProvider(step, context, def, isReadonly) {
+        if (!stepEditorRef.current) {
+            throw new Error('Step editor is not provided');
+        }
+        if (isValidElement(stepEditorRef.current)) {
+            return Presenter.render(externalEditorClassName, editorRootRef, jsx(StepEditorWrapperContext, __assign({ step: step, definition: def, context: context, isReadonly: isReadonly }, { children: stepEditorRef.current })));
+        }
+        return stepEditorRef.current(step, context, def, isReadonly);
+    }
+    function customActionHandler(action, step, sequence, context) {
+        if (customActionHandlerRef.current) {
+            customActionHandlerRef.current(action, step, sequence, context);
+        }
+    }
+    function tryDestroy() {
+        Presenter.tryDestroy(editorRootRef);
+        if (controllerRef.current) {
+            controllerRef.current.setDesigner(null);
+        }
+        if (designerRef.current) {
+            designerRef.current.destroy();
+            designerRef.current = null;
+            // console.log('sqd: designer destroyed');
+        }
+    }
+    useEffect(function () {
+        onDefinitionChangeRef.current = props.onDefinitionChange;
+    }, [props.onDefinitionChange]);
+    useEffect(function () {
+        onSelectedStepIdChangedRef.current = props.onSelectedStepIdChanged;
+    }, [props.onSelectedStepIdChanged]);
+    useEffect(function () {
+        onStepUnselectionBlockedRef.current = props.onStepUnselectionBlocked;
+    }, [props.onStepUnselectionBlocked]);
+    useEffect(function () {
+        onIsEditorCollapsedChangedRef.current = props.onIsEditorCollapsedChanged;
+    }, [props.onIsEditorCollapsedChanged]);
+    useEffect(function () {
+        onIsToolboxCollapsedChangedRef.current = props.onIsToolboxCollapsedChanged;
+    }, [props.onIsToolboxCollapsedChanged]);
+    useEffect(function () {
+        rootEditorRef.current = props.rootEditor;
+    }, [props.rootEditor]);
+    useEffect(function () {
+        stepEditorRef.current = props.stepEditor;
+    }, [props.stepEditor]);
+    useEffect(function () {
+        customActionHandlerRef.current = props.customActionHandler;
+    }, [props.customActionHandler]);
+    useEffect(function () {
+        if (!root) {
+            return;
+        }
+        if (designerRef.current) {
+            var isNotChanged = definition.value === designerRef.current.getDefinition();
+            if (isNotChanged) {
+                if (selectedStepId !== undefined && selectedStepId !== designerRef.current.getSelectedStepId()) {
+                    if (selectedStepId) {
+                        designerRef.current.selectStepById(selectedStepId);
+                    }
+                    else {
+                        designerRef.current.clearSelectedStep();
+                    }
+                    // console.log('sqd: selected step updated');
+                }
+                if (isReadonly !== undefined && isReadonly !== designerRef.current.isReadonly()) {
+                    designerRef.current.setIsReadonly(isReadonly);
+                    // console.log('sqd: isReadonly updated');
+                }
+                if (isToolboxCollapsed !== undefined && isToolboxCollapsed !== designerRef.current.isToolboxCollapsed()) {
+                    designerRef.current.setIsToolboxCollapsed(isToolboxCollapsed);
+                    // console.log('sqd: isToolboxCollapsed updated');
+                }
+                if (isEditorCollapsed !== undefined && isEditorCollapsed !== designerRef.current.isEditorCollapsed()) {
+                    designerRef.current.setIsEditorCollapsed(isEditorCollapsed);
+                    // console.log('sqd: isEditorCollapsed updated');
+                }
+                return;
+            }
+            tryDestroy();
+        }
+        var designer = Designer.create(root, definition.value, {
+            theme: theme,
+            undoStackSize: undoStackSize,
+            toolbox: toolbox
+                ? __assign(__assign({}, toolbox), { isCollapsed: isToolboxCollapsed }) : false,
+            steps: steps,
+            validator: validator,
+            placeholder: placeholder,
+            controlBar: controlBar,
+            contextMenu: contextMenu,
+            keyboard: keyboard,
+            preferenceStorage: preferenceStorage,
+            editors: rootEditorRef.current && stepEditorRef.current
+                ? {
+                    isCollapsed: isEditorCollapsed,
+                    rootEditorProvider: rootEditorProvider,
+                    stepEditorProvider: stepEditorProvider
+                }
+                : false,
+            customActionHandler: customActionHandlerRef.current && customActionHandler,
+            extensions: extensions,
+            i18n: i18n,
+            isReadonly: isReadonly
+        });
+        if (controllerRef.current) {
+            controllerRef.current.setDesigner(designer);
+        }
+        if (selectedStepId) {
+            designer.selectStepById(selectedStepId);
+        }
+        // console.log('sqd: designer rendered');
+        designer.onReady.subscribe(forwardDefinition);
+        designer.onDefinitionChanged.subscribe(forwardDefinition);
+        designer.onSelectedStepIdChanged.subscribe(function (stepId) {
+            if (onSelectedStepIdChangedRef.current) {
+                onSelectedStepIdChangedRef.current(stepId);
+            }
+        });
+        designer.onStepUnselectionBlocked.subscribe(function (targetStepId) {
+            if (onStepUnselectionBlockedRef.current) {
+                onStepUnselectionBlockedRef.current(targetStepId);
+            }
+        });
+        designer.onIsToolboxCollapsedChanged.subscribe(function (isCollapsed) {
+            if (onIsToolboxCollapsedChangedRef.current) {
+                onIsToolboxCollapsedChangedRef.current(isCollapsed);
+            }
+        });
+        designer.onIsEditorCollapsedChanged.subscribe(function (isCollapsed) {
+            if (onIsEditorCollapsedChangedRef.current) {
+                onIsEditorCollapsedChangedRef.current(isCollapsed);
+            }
+        });
+        designerRef.current = designer;
+    }, [
+        root,
+        definition,
+        selectedStepId,
+        isReadonly,
+        theme,
+        undoStackSize,
+        toolbox,
+        isToolboxCollapsed,
+        isEditorCollapsed,
+        contextMenu,
+        keyboard,
+        preferenceStorage,
+        controlBar,
+        steps,
+        validator,
+        placeholder,
+        extensions,
+        i18n
+    ]);
+    useEffect(function () {
+        return tryDestroy;
+    }, []);
+    return jsx("div", { ref: setRoot, "data-testid": "designer", className: "sqd-designer-react" });
+}
+
+var SequentialWorkflowDesignerController = /** @class */ (function () {
+    function SequentialWorkflowDesignerController() {
+        var _this = this;
+        /**
+         * @description Event that is raised when the controller is ready to be used.
+         */
+        this.onIsReadyChanged = new SimpleEvent();
+        this.designer = null;
+        /**
+         * @description Moves the viewport to the step with the animation.
+         */
+        this.moveViewportToStep = function (stepId) {
+            _this.getDesigner().moveViewportToStep(stepId);
+        };
+        /**
+         * @description Updates all badges.
+         */
+        this.updateBadges = function () {
+            _this.getDesigner().updateBadges();
+        };
+        /**
+         * @description Rerender the root component and all its children.
+         */
+        this.updateRootComponent = function () {
+            _this.getDesigner().updateRootComponent();
+        };
+        /**
+         * @description Updates the layout of the designer.
+         */
+        this.updateLayout = function () {
+            _this.getDesigner().updateLayout();
+        };
+        /**
+         * Replaces the current definition with a new one and adds the previous definition to the undo stack.
+         * @param definition A new definition.
+         */
+        this.replaceDefinition = function (definition) {
+            return _this.getDesigner().replaceDefinition(definition);
+        };
+        // Nothing...
+    }
+    SequentialWorkflowDesignerController.create = function () {
+        return new SequentialWorkflowDesignerController();
+    };
+    /**
+     * @returns `true` if the controller is ready to be used, `false` otherwise.
+     */
+    SequentialWorkflowDesignerController.prototype.isReady = function () {
+        return Boolean(this.designer);
+    };
+    SequentialWorkflowDesignerController.prototype.setDesigner = function (designer) {
+        if (designer && this.designer) {
+            throw new Error('Designer is already set');
+        }
+        this.designer = designer;
+        this.onIsReadyChanged.forward();
+    };
+    SequentialWorkflowDesignerController.prototype.getDesigner = function () {
+        if (!this.designer) {
+            throw new Error('Designer is not ready yet');
+        }
+        return this.designer;
+    };
+    return SequentialWorkflowDesignerController;
+}());
+function useSequentialWorkflowDesignerController(deps) {
+    return useMemo(function () { return SequentialWorkflowDesignerController.create(); }, deps || []);
+}
+
+export { Presenter, RootEditorWrapperContext, SequentialWorkflowDesigner, SequentialWorkflowDesignerController, StepEditorWrapperContext, useRootEditor, useSequentialWorkflowDesignerController, useStepEditor, wrapDefinition };

package/lib/index.d.ts

@@ -0,0 +1,139 @@
+/// <reference types="react" />
+import { MutableRefObject, Context, ReactNode, DependencyList } from 'react';
+import ReactDOM from 'react-dom/client';
+import { Definition, RootEditorContext, SimpleEvent, Designer, ToolboxConfiguration, RootEditorProvider, StepEditorProvider, StepsConfiguration, ValidatorConfiguration, PlaceholderConfiguration, KeyboardConfiguration, PreferenceStorage, CustomActionHandler, DesignerExtension, I18n, Step, StepEditorContext } from 'sequential-workflow-designer';
+
+declare class Presenter {
+    static render(className: string, rootRef: MutableRefObject<ReactDOM.Root | null>, element: JSX.Element): HTMLElement;
+    static tryDestroy(rootRef: MutableRefObject<ReactDOM.Root | null>): void;
+}
+
+declare global {
+    interface Window {
+        sqdRootEditorContext?: Context<RootEditorWrapper<Definition> | null>;
+    }
+}
+interface RootEditorWrapper<TDefinition extends Definition> {
+    readonly properties: TDefinition['properties'];
+    readonly definition: TDefinition;
+    readonly isReadonly: boolean;
+    setProperty(name: keyof TDefinition['properties'], value: TDefinition['properties'][typeof name]): void;
+}
+declare function useRootEditor<TDefinition extends Definition = Definition>(): RootEditorWrapper<TDefinition>;
+interface RootEditorWrapperContextProps {
+    children: ReactNode;
+    definition: Definition;
+    context: RootEditorContext;
+    isReadonly: boolean;
+}
+declare function RootEditorWrapperContext(props: RootEditorWrapperContextProps): JSX.Element;
+
+interface WrappedDefinition<TDefinition extends Definition = Definition> {
+    readonly value: TDefinition;
+    readonly isValid: boolean | undefined;
+}
+declare function wrapDefinition<TDefinition extends Definition = Definition>(value: TDefinition, isValid?: boolean): WrappedDefinition<TDefinition>;
+
+declare class SequentialWorkflowDesignerController {
+    static create(): SequentialWorkflowDesignerController;
+    /**
+     * @description Event that is raised when the controller is ready to be used.
+     */
+    readonly onIsReadyChanged: SimpleEvent<void>;
+    private designer;
+    private constructor();
+    /**
+     * @description Moves the viewport to the step with the animation.
+     */
+    readonly moveViewportToStep: (stepId: string) => void;
+    /**
+     * @description Updates all badges.
+     */
+    readonly updateBadges: () => void;
+    /**
+     * @description Rerender the root component and all its children.
+     */
+    readonly updateRootComponent: () => void;
+    /**
+     * @description Updates the layout of the designer.
+     */
+    readonly updateLayout: () => void;
+    /**
+     * Replaces the current definition with a new one and adds the previous definition to the undo stack.
+     * @param definition A new definition.
+     */
+    readonly replaceDefinition: (definition: Definition) => Promise<void>;
+    /**
+     * @returns `true` if the controller is ready to be used, `false` otherwise.
+     */
+    isReady(): boolean;
+    setDesigner(designer: Designer | null): void;
+    private getDesigner;
+}
+declare function useSequentialWorkflowDesignerController(deps?: DependencyList): SequentialWorkflowDesignerController;
+
+type ReactToolboxConfiguration = Omit<ToolboxConfiguration, 'isCollapsed'>;
+interface SequentialWorkflowDesignerProps<TDefinition extends Definition> {
+    definition: WrappedDefinition<TDefinition>;
+    onDefinitionChange: (state: WrappedDefinition<TDefinition>) => void;
+    selectedStepId?: string | null;
+    onSelectedStepIdChanged?: (stepId: string | null) => void;
+    onStepUnselectionBlocked?: (targetStepId: string | null) => void;
+    isReadonly?: boolean;
+    rootEditor: false | JSX.Element | RootEditorProvider;
+    stepEditor: false | JSX.Element | StepEditorProvider;
+    isEditorCollapsed?: boolean;
+    onIsEditorCollapsedChanged?: (isCollapsed: boolean) => void;
+    theme?: string;
+    undoStackSize?: number;
+    stepsConfiguration: StepsConfiguration;
+    validatorConfiguration?: ValidatorConfiguration;
+    placeholderConfiguration?: PlaceholderConfiguration;
+    toolboxConfiguration: false | ReactToolboxConfiguration;
+    isToolboxCollapsed?: boolean;
+    onIsToolboxCollapsedChanged?: (isCollapsed: boolean) => void;
+    /**
+     * @description If true, the control bar will be displayed.
+     */
+    controlBar: boolean;
+    contextMenu?: boolean;
+    keyboard?: boolean | KeyboardConfiguration;
+    preferenceStorage?: PreferenceStorage;
+    controller?: SequentialWorkflowDesignerController;
+    customActionHandler?: CustomActionHandler;
+    extensions?: DesignerExtension[];
+    i18n?: I18n;
+}
+declare function SequentialWorkflowDesigner<TDefinition extends Definition>(props: SequentialWorkflowDesignerProps<TDefinition>): JSX.Element;
+
+declare global {
+    interface Window {
+        sqdStepEditorContext?: Context<StepEditorWrapper | null>;
+    }
+}
+interface StepEditorWrapper<TStep extends Step = Step, TDefinition extends Definition = Definition> {
+    readonly id: string;
+    readonly type: TStep['type'];
+    readonly componentType: TStep['componentType'];
+    readonly name: string;
+    readonly properties: TStep['properties'];
+    readonly step: TStep;
+    readonly definition: TDefinition;
+    readonly isReadonly: boolean;
+    setName(name: string): void;
+    setProperty(name: keyof TStep['properties'], value: TStep['properties'][typeof name]): void;
+    notifyPropertiesChanged(): void;
+    notifyChildrenChanged(): void;
+}
+declare function useStepEditor<TStep extends Step = Step, TDefinition extends Definition = Definition>(): StepEditorWrapper<TStep, TDefinition>;
+interface StepEditorWrapperContextProps {
+    children: ReactNode;
+    step: Step;
+    definition: Definition;
+    context: StepEditorContext;
+    isReadonly: boolean;
+}
+declare function StepEditorWrapperContext(props: StepEditorWrapperContextProps): JSX.Element;
+
+export { Presenter, RootEditorWrapperContext, SequentialWorkflowDesigner, SequentialWorkflowDesignerController, StepEditorWrapperContext, useRootEditor, useSequentialWorkflowDesignerController, useStepEditor, wrapDefinition };
+export type { ReactToolboxConfiguration, RootEditorWrapper, RootEditorWrapperContextProps, SequentialWorkflowDesignerProps, StepEditorWrapper, StepEditorWrapperContextProps, WrappedDefinition };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-react",
 	"description": "React wrapper for Sequential Workflow Designer component.",
-	"version": "0.34.0",
+	"version": "0.35.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
@@ -47,7 +47,7 @@
 	"peerDependencies": {
 		"react": ">=18.2.0",
 		"react-dom": ">=18.2.0",
-		"sequential-workflow-designer": "^0.34.0"
+		"sequential-workflow-designer": "^0.35.0"
 	},
 	"devDependencies": {
 		"@rollup/plugin-node-resolve": "^16.0.1",
@@ -63,7 +63,7 @@
 		"prettier": "^3.2.5",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.34.0",
+		"sequential-workflow-designer": "^0.35.0",
 		"rollup": "^4.40.0",
 		"rollup-plugin-dts": "^6.2.1",
 		"rollup-plugin-typescript2": "^0.36.0",