sequential-workflow-designer-react 0.29.2 → 0.30.0

package/lib/cjs/index.cjs

@@ -155,7 +155,7 @@ function wrapDefinition(value, isValid) {
 
 var externalEditorClassName = 'sqd-editor-react';
 function SequentialWorkflowDesigner(props) {
-    var _a = react.useState(null), placeholder = _a[0], setPlaceholder = _a[1];
+    var _a = react.useState(null), root = _a[0], setRoot = _a[1];
     var onDefinitionChangeRef = react.useRef(props.onDefinitionChange);
     var onSelectedStepIdChangedRef = react.useRef(props.onSelectedStepIdChanged);
     var onIsEditorCollapsedChangedRef = react.useRef(props.onIsEditorCollapsedChanged);
@@ -173,6 +173,7 @@ function SequentialWorkflowDesigner(props) {
     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;
@@ -244,7 +245,7 @@ function SequentialWorkflowDesigner(props) {
         customActionHandlerRef.current = props.customActionHandler;
     }, [props.customActionHandler]);
     react.useEffect(function () {
-        if (!placeholder) {
+        if (!root) {
             return;
         }
         if (designerRef.current) {
@@ -275,13 +276,14 @@ function SequentialWorkflowDesigner(props) {
             }
             tryDestroy();
         }
-        var designer = sequentialWorkflowDesigner.Designer.create(placeholder, definition.value, {
+        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,
@@ -324,7 +326,7 @@ function SequentialWorkflowDesigner(props) {
         });
         designerRef.current = designer;
     }, [
-        placeholder,
+        root,
         definition,
         selectedStepId,
         isReadonly,
@@ -339,13 +341,14 @@ function SequentialWorkflowDesigner(props) {
         controlBar,
         steps,
         validator,
+        placeholder,
         extensions,
         i18n
     ]);
     react.useEffect(function () {
         return tryDestroy;
     }, []);
-    return jsxRuntime.jsx("div", { ref: setPlaceholder, "data-testid": "designer", className: "sqd-designer-react" });
+    return jsxRuntime.jsx("div", { ref: setRoot, "data-testid": "designer", className: "sqd-designer-react" });
 }
 
 var SequentialWorkflowDesignerController = /** @class */ (function () {

package/lib/esm/index.js

@@ -153,7 +153,7 @@ function wrapDefinition(value, isValid) {
 
 var externalEditorClassName = 'sqd-editor-react';
 function SequentialWorkflowDesigner(props) {
-    var _a = useState(null), placeholder = _a[0], setPlaceholder = _a[1];
+    var _a = useState(null), root = _a[0], setRoot = _a[1];
     var onDefinitionChangeRef = useRef(props.onDefinitionChange);
     var onSelectedStepIdChangedRef = useRef(props.onSelectedStepIdChanged);
     var onIsEditorCollapsedChangedRef = useRef(props.onIsEditorCollapsedChanged);
@@ -171,6 +171,7 @@ function SequentialWorkflowDesigner(props) {
     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;
@@ -242,7 +243,7 @@ function SequentialWorkflowDesigner(props) {
         customActionHandlerRef.current = props.customActionHandler;
     }, [props.customActionHandler]);
     useEffect(function () {
-        if (!placeholder) {
+        if (!root) {
             return;
         }
         if (designerRef.current) {
@@ -273,13 +274,14 @@ function SequentialWorkflowDesigner(props) {
             }
             tryDestroy();
         }
-        var designer = Designer.create(placeholder, definition.value, {
+        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,
@@ -322,7 +324,7 @@ function SequentialWorkflowDesigner(props) {
         });
         designerRef.current = designer;
     }, [
-        placeholder,
+        root,
         definition,
         selectedStepId,
         isReadonly,
@@ -337,13 +339,14 @@ function SequentialWorkflowDesigner(props) {
         controlBar,
         steps,
         validator,
+        placeholder,
         extensions,
         i18n
     ]);
     useEffect(function () {
         return tryDestroy;
     }, []);
-    return jsx("div", { ref: setPlaceholder, "data-testid": "designer", className: "sqd-designer-react" });
+    return jsx("div", { ref: setRoot, "data-testid": "designer", className: "sqd-designer-react" });
 }
 
 var SequentialWorkflowDesignerController = /** @class */ (function () {

package/lib/index.d.ts

@@ -1,7 +1,7 @@
 /// <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, KeyboardConfiguration, PreferenceStorage, CustomActionHandler, DesignerExtension, I18n, Step, StepEditorContext } from 'sequential-workflow-designer';
+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;
@@ -87,6 +87,7 @@ interface SequentialWorkflowDesignerProps<TDefinition extends Definition> {
     undoStackSize?: number;
     stepsConfiguration: StepsConfiguration;
     validatorConfiguration?: ValidatorConfiguration;
+    placeholderConfiguration?: PlaceholderConfiguration;
     toolboxConfiguration: false | ReactToolboxConfiguration;
     isToolboxCollapsed?: boolean;
     onIsToolboxCollapsedChanged?: (isCollapsed: boolean) => void;

package/package.json

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