sequential-workflow-designer-react 0.13.2 → 0.13.3

package/lib/cjs/index.cjs

@@ -2,7 +2,7 @@
 
 var ReactDOM = require('react-dom/client');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var react = require('react');
 var sequentialWorkflowDesigner = require('sequential-workflow-designer');
 
 var Presenter = /** @class */ (function () {
@@ -53,18 +53,18 @@ var __assign = function() {
 };
 
 if (!window.sqdGlobalEditorContext) {
-    window.sqdGlobalEditorContext = React.createContext(null);
+    window.sqdGlobalEditorContext = react.createContext(null);
 }
 var globalEditorContext = window.sqdGlobalEditorContext;
 function useGlobalEditor() {
-    var wrapper = React.useContext(globalEditorContext);
+    var wrapper = react.useContext(globalEditorContext);
     if (!wrapper) {
         throw new Error('Cannot find global editor context');
     }
     return wrapper;
 }
 function GlobalEditorWrapperContext(props) {
-    var _a = React.useState(function () { return createWrapper(); }), wrapper = _a[0], setWrapper = _a[1];
+    var _a = react.useState(function () { return createWrapper(); }), wrapper = _a[0], setWrapper = _a[1];
     function createWrapper() {
         return {
             properties: props.definition.properties,
@@ -83,18 +83,18 @@ function GlobalEditorWrapperContext(props) {
 }
 
 if (!window.sqdStepEditorContext) {
-    window.sqdStepEditorContext = React.createContext(null);
+    window.sqdStepEditorContext = react.createContext(null);
 }
 var stepEditorContext = window.sqdStepEditorContext;
 function useStepEditor() {
-    var wrapper = React.useContext(stepEditorContext);
+    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];
+    var _a = react.useState(function () { return createWrapper(); }), wrapper = _a[0], setWrapper = _a[1];
     function createWrapper() {
         return {
             id: props.step.id,
@@ -144,15 +144,17 @@ function wrapDefinition(value, isValid) {
 
 var externalEditorClassName = 'sqd-editor-react';
 function SequentialWorkflowDesigner(props) {
-    var _a = React.useState(null), placeholder = _a[0], setPlaceholder = _a[1];
-    var onDefinitionChangeRef = React.useRef(props.onDefinitionChange);
-    var onSelectedStepIdChangedRef = React.useRef(props.onSelectedStepIdChanged);
-    var globalEditorRef = React.useRef(props.globalEditor);
-    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 _a = react.useState(null), placeholder = _a[0], setPlaceholder = _a[1];
+    var onDefinitionChangeRef = react.useRef(props.onDefinitionChange);
+    var onSelectedStepIdChangedRef = react.useRef(props.onSelectedStepIdChanged);
+    var onIsEditorCollapsedChangedRef = react.useRef(props.onIsEditorCollapsedChanged);
+    var onIsToolboxCollapsedChangedRef = react.useRef(props.onIsToolboxCollapsedChanged);
+    var globalEditorRef = react.useRef(props.globalEditor);
+    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;
@@ -161,6 +163,8 @@ function SequentialWorkflowDesigner(props) {
     var steps = props.stepsConfiguration;
     var validator = props.validatorConfiguration;
     var toolbox = props.toolboxConfiguration;
+    var isEditorCollapsed = props.isEditorCollapsed;
+    var isToolboxCollapsed = props.isToolboxCollapsed;
     var controlBar = props.controlBar;
     var extensions = props.extensions;
     if (props.controlBar === undefined) {
@@ -176,7 +180,7 @@ function SequentialWorkflowDesigner(props) {
         if (!globalEditorRef.current) {
             throw new Error('Global editor is not provided');
         }
-        if (React.isValidElement(globalEditorRef.current)) {
+        if (react.isValidElement(globalEditorRef.current)) {
             return Presenter.render(externalEditorClassName, editorRootRef, jsxRuntime.jsx(GlobalEditorWrapperContext, __assign({ definition: def, context: context }, { children: globalEditorRef.current })));
         }
         return globalEditorRef.current(def, context);
@@ -185,7 +189,7 @@ function SequentialWorkflowDesigner(props) {
         if (!stepEditorRef.current) {
             throw new Error('Step editor is not provided');
         }
-        if (React.isValidElement(stepEditorRef.current)) {
+        if (react.isValidElement(stepEditorRef.current)) {
             return Presenter.render(externalEditorClassName, editorRootRef, jsxRuntime.jsx(StepEditorWrapperContext, __assign({ step: step, context: context }, { children: stepEditorRef.current })));
         }
         return stepEditorRef.current(step, context);
@@ -206,22 +210,28 @@ function SequentialWorkflowDesigner(props) {
             // console.log('sqd: designer destroyed');
         }
     }
-    React.useEffect(function () {
+    react.useEffect(function () {
         onDefinitionChangeRef.current = props.onDefinitionChange;
     }, [props.onDefinitionChange]);
-    React.useEffect(function () {
+    react.useEffect(function () {
         onSelectedStepIdChangedRef.current = props.onSelectedStepIdChanged;
     }, [props.onSelectedStepIdChanged]);
-    React.useEffect(function () {
+    react.useEffect(function () {
+        onIsEditorCollapsedChangedRef.current = props.onIsEditorCollapsedChanged;
+    }, [props.onIsEditorCollapsedChanged]);
+    react.useEffect(function () {
+        onIsToolboxCollapsedChangedRef.current = props.onIsToolboxCollapsedChanged;
+    }, [props.onIsToolboxCollapsedChanged]);
+    react.useEffect(function () {
         globalEditorRef.current = props.globalEditor;
     }, [props.globalEditor]);
-    React.useEffect(function () {
+    react.useEffect(function () {
         stepEditorRef.current = props.stepEditor;
     }, [props.stepEditor]);
-    React.useEffect(function () {
+    react.useEffect(function () {
         customActionHandlerRef.current = props.customActionHandler;
     }, [props.customActionHandler]);
-    React.useEffect(function () {
+    react.useEffect(function () {
         if (!placeholder) {
             return;
         }
@@ -239,7 +249,15 @@ function SequentialWorkflowDesigner(props) {
                 }
                 if (isReadonly !== undefined && isReadonly !== designerRef.current.isReadonly()) {
                     designerRef.current.setIsReadonly(isReadonly);
-                    // console.log('sqd: readonly updated');
+                    // 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;
             }
@@ -248,12 +266,14 @@ function SequentialWorkflowDesigner(props) {
         var designer = sequentialWorkflowDesigner.Designer.create(placeholder, definition.value, {
             theme: theme,
             undoStackSize: undoStackSize,
-            toolbox: toolbox,
+            toolbox: toolbox
+                ? __assign(__assign({}, toolbox), { isCollapsed: isToolboxCollapsed }) : false,
             steps: steps,
             validator: validator,
             controlBar: controlBar,
             editors: globalEditorRef.current && stepEditorRef.current
                 ? {
+                    isCollapsed: isEditorCollapsed,
                     globalEditorProvider: globalEditorProvider,
                     stepEditorProvider: stepEditorProvider
                 }
@@ -278,9 +298,33 @@ function SequentialWorkflowDesigner(props) {
                 onSelectedStepIdChangedRef.current(stepId);
             }
         });
+        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;
-    }, [placeholder, definition, selectedStepId, isReadonly, theme, undoStackSize, toolbox, controlBar, steps, validator, extensions]);
-    React.useEffect(function () {
+    }, [
+        placeholder,
+        definition,
+        selectedStepId,
+        isReadonly,
+        theme,
+        undoStackSize,
+        toolbox,
+        isToolboxCollapsed,
+        isEditorCollapsed,
+        controlBar,
+        steps,
+        validator,
+        extensions
+    ]);
+    react.useEffect(function () {
         return tryDestroy;
     }, []);
     return jsxRuntime.jsx("div", { ref: setPlaceholder, "data-testid": "designer", className: "sqd-designer-react" });
@@ -334,7 +378,7 @@ var SequentialWorkflowDesignerController = /** @class */ (function () {
     return SequentialWorkflowDesignerController;
 }());
 function useSequentialWorkflowDesignerController(deps) {
-    return React.useMemo(function () { return SequentialWorkflowDesignerController.create(); }, deps || []);
+    return react.useMemo(function () { return SequentialWorkflowDesignerController.create(); }, deps || []);
 }
 
 exports.GlobalEditorWrapperContext = GlobalEditorWrapperContext;

package/lib/esm/index.js

@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import { jsx } from 'react/jsx-runtime';
-import React, { createContext, useContext, useState, useRef, useEffect, useMemo } from 'react';
+import { createContext, useContext, useState, useRef, useEffect, isValidElement, useMemo } from 'react';
 import { Designer } from 'sequential-workflow-designer';
 
 var Presenter = /** @class */ (function () {
@@ -145,6 +145,8 @@ function SequentialWorkflowDesigner(props) {
     var _a = useState(null), placeholder = _a[0], setPlaceholder = _a[1];
     var onDefinitionChangeRef = useRef(props.onDefinitionChange);
     var onSelectedStepIdChangedRef = useRef(props.onSelectedStepIdChanged);
+    var onIsEditorCollapsedChangedRef = useRef(props.onIsEditorCollapsedChanged);
+    var onIsToolboxCollapsedChangedRef = useRef(props.onIsToolboxCollapsedChanged);
     var globalEditorRef = useRef(props.globalEditor);
     var stepEditorRef = useRef(props.stepEditor);
     var controllerRef = useRef(props.controller);
@@ -159,6 +161,8 @@ function SequentialWorkflowDesigner(props) {
     var steps = props.stepsConfiguration;
     var validator = props.validatorConfiguration;
     var toolbox = props.toolboxConfiguration;
+    var isEditorCollapsed = props.isEditorCollapsed;
+    var isToolboxCollapsed = props.isToolboxCollapsed;
     var controlBar = props.controlBar;
     var extensions = props.extensions;
     if (props.controlBar === undefined) {
@@ -174,7 +178,7 @@ function SequentialWorkflowDesigner(props) {
         if (!globalEditorRef.current) {
             throw new Error('Global editor is not provided');
         }
-        if (React.isValidElement(globalEditorRef.current)) {
+        if (isValidElement(globalEditorRef.current)) {
             return Presenter.render(externalEditorClassName, editorRootRef, jsx(GlobalEditorWrapperContext, __assign({ definition: def, context: context }, { children: globalEditorRef.current })));
         }
         return globalEditorRef.current(def, context);
@@ -183,7 +187,7 @@ function SequentialWorkflowDesigner(props) {
         if (!stepEditorRef.current) {
             throw new Error('Step editor is not provided');
         }
-        if (React.isValidElement(stepEditorRef.current)) {
+        if (isValidElement(stepEditorRef.current)) {
             return Presenter.render(externalEditorClassName, editorRootRef, jsx(StepEditorWrapperContext, __assign({ step: step, context: context }, { children: stepEditorRef.current })));
         }
         return stepEditorRef.current(step, context);
@@ -210,6 +214,12 @@ function SequentialWorkflowDesigner(props) {
     useEffect(function () {
         onSelectedStepIdChangedRef.current = props.onSelectedStepIdChanged;
     }, [props.onSelectedStepIdChanged]);
+    useEffect(function () {
+        onIsEditorCollapsedChangedRef.current = props.onIsEditorCollapsedChanged;
+    }, [props.onIsEditorCollapsedChanged]);
+    useEffect(function () {
+        onIsToolboxCollapsedChangedRef.current = props.onIsToolboxCollapsedChanged;
+    }, [props.onIsToolboxCollapsedChanged]);
     useEffect(function () {
         globalEditorRef.current = props.globalEditor;
     }, [props.globalEditor]);
@@ -237,7 +247,15 @@ function SequentialWorkflowDesigner(props) {
                 }
                 if (isReadonly !== undefined && isReadonly !== designerRef.current.isReadonly()) {
                     designerRef.current.setIsReadonly(isReadonly);
-                    // console.log('sqd: readonly updated');
+                    // 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;
             }
@@ -246,12 +264,14 @@ function SequentialWorkflowDesigner(props) {
         var designer = Designer.create(placeholder, definition.value, {
             theme: theme,
             undoStackSize: undoStackSize,
-            toolbox: toolbox,
+            toolbox: toolbox
+                ? __assign(__assign({}, toolbox), { isCollapsed: isToolboxCollapsed }) : false,
             steps: steps,
             validator: validator,
             controlBar: controlBar,
             editors: globalEditorRef.current && stepEditorRef.current
                 ? {
+                    isCollapsed: isEditorCollapsed,
                     globalEditorProvider: globalEditorProvider,
                     stepEditorProvider: stepEditorProvider
                 }
@@ -276,8 +296,32 @@ function SequentialWorkflowDesigner(props) {
                 onSelectedStepIdChangedRef.current(stepId);
             }
         });
+        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;
-    }, [placeholder, definition, selectedStepId, isReadonly, theme, undoStackSize, toolbox, controlBar, steps, validator, extensions]);
+    }, [
+        placeholder,
+        definition,
+        selectedStepId,
+        isReadonly,
+        theme,
+        undoStackSize,
+        toolbox,
+        isToolboxCollapsed,
+        isEditorCollapsed,
+        controlBar,
+        steps,
+        validator,
+        extensions
+    ]);
     useEffect(function () {
         return tryDestroy;
     }, []);

package/lib/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { MutableRefObject, Context, DependencyList } from 'react';
 import ReactDOM from 'react-dom/client';
-import { Definition, GlobalEditorContext, Designer, GlobalEditorProvider, StepEditorProvider, StepsConfiguration, ValidatorConfiguration, ToolboxConfiguration, CustomActionHandler, DesignerExtension, Step, StepEditorContext } from 'sequential-workflow-designer';
+import { Definition, GlobalEditorContext, Designer, ToolboxConfiguration, GlobalEditorProvider, StepEditorProvider, StepsConfiguration, ValidatorConfiguration, CustomActionHandler, DesignerExtension, Step, StepEditorContext } from 'sequential-workflow-designer';
 
 declare class Presenter {
     static render(className: string, rootRef: MutableRefObject<ReactDOM.Root | null>, element: JSX.Element): HTMLElement;
@@ -55,6 +55,7 @@ declare class SequentialWorkflowDesignerController {
 }
 declare function useSequentialWorkflowDesignerController(deps?: DependencyList): SequentialWorkflowDesignerController;
 
+type ReactToolboxConfiguration = Omit<ToolboxConfiguration, 'isCollapsed'>;
 interface SequentialWorkflowDesignerProps<TDefinition extends Definition> {
     definition: WrappedDefinition<TDefinition>;
     onDefinitionChange: (state: WrappedDefinition<TDefinition>) => void;
@@ -63,11 +64,15 @@ interface SequentialWorkflowDesignerProps<TDefinition extends Definition> {
     isReadonly?: boolean;
     globalEditor: false | JSX.Element | GlobalEditorProvider;
     stepEditor: false | JSX.Element | StepEditorProvider;
+    isEditorCollapsed?: boolean;
+    onIsEditorCollapsedChanged?: (isCollapsed: boolean) => void;
     theme?: string;
     undoStackSize?: number;
     stepsConfiguration: StepsConfiguration;
     validatorConfiguration?: ValidatorConfiguration;
-    toolboxConfiguration: false | ToolboxConfiguration;
+    toolboxConfiguration: false | ReactToolboxConfiguration;
+    isToolboxCollapsed?: boolean;
+    onIsToolboxCollapsedChanged?: (isCollapsed: boolean) => void;
     /**
      * @description If true, the control bar will be displayed.
      */
@@ -102,4 +107,4 @@ declare function StepEditorWrapperContext(props: {
     context: StepEditorContext;
 }): JSX.Element;
 
-export { GlobalEditorWrapper, GlobalEditorWrapperContext, Presenter, SequentialWorkflowDesigner, SequentialWorkflowDesignerController, SequentialWorkflowDesignerProps, StepEditorWrapper, StepEditorWrapperContext, WrappedDefinition, useGlobalEditor, useSequentialWorkflowDesignerController, useStepEditor, wrapDefinition };
+export { GlobalEditorWrapper, GlobalEditorWrapperContext, Presenter, ReactToolboxConfiguration, SequentialWorkflowDesigner, SequentialWorkflowDesignerController, SequentialWorkflowDesignerProps, StepEditorWrapper, StepEditorWrapperContext, WrappedDefinition, useGlobalEditor, useSequentialWorkflowDesignerController, useStepEditor, wrapDefinition };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-react",
 	"description": "React wrapper for Sequential Workflow Designer component.",
-	"version": "0.13.2",
+	"version": "0.13.3",
 	"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.13.2"
+		"sequential-workflow-designer": "^0.13.3"
 	},
 	"devDependencies": {
 		"@rollup/plugin-node-resolve": "^15.0.1",
@@ -63,7 +63,7 @@
 		"prettier": "^2.8.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.13.2",
+		"sequential-workflow-designer": "^0.13.3",
 		"rollup": "^3.18.0",
 		"rollup-plugin-dts": "^5.2.0",
 		"rollup-plugin-typescript2": "^0.34.1",