sequential-workflow-designer-react 0.33.1 → 0.34.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-react",
 	"description": "React wrapper for Sequential Workflow Designer component.",
-	"version": "0.33.1",
+	"version": "0.34.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.33.1"
+		"sequential-workflow-designer": "^0.34.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.33.1",
+		"sequential-workflow-designer": "^0.34.0",
 		"rollup": "^4.40.0",
 		"rollup-plugin-dts": "^6.2.1",
 		"rollup-plugin-typescript2": "^0.36.0",

package/lib/cjs/index.cjs

@@ -1,440 +0,0 @@
-'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

@@ -1,430 +0,0 @@
-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

@@ -1,139 +0,0 @@
-/// <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 };