@fluxo-dev/shell-workflow 25.1.3 → 25.1.5

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { forwardRef, createElement as createElement$1, useState, useEffect, useContext, useCallback, createContext, useMemo, Children } from 'react';
+import React__default, { forwardRef, createElement as createElement$1, useState, useEffect, useContext, useCallback, createContext, useMemo, Children, useRef } from 'react';
 import { Group, Box, ScrollArea, NavLink, Badge, Menu, ActionIcon, Modal, Stack, Text, TextInput, Popover, Flex, Button } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { FluxoClientSys, WorkflowActionInputType, EmbeddedModule } from '@fluxo-dev/api-client-base';
@@ -573,9 +573,6 @@ var createMethod$2 = function (IS_INCLUDES) {
 };
 
 var arrayIncludes = {
-  // `Array.prototype.includes` method
-  // https://tc39.es/ecma262/#sec-array.prototype.includes
-  includes: createMethod$2(true),
   // `Array.prototype.indexOf` method
   // https://tc39.es/ecma262/#sec-array.prototype.indexof
   indexOf: createMethod$2(false)
@@ -920,7 +917,6 @@ var PROPER = EXISTS && (function something() { /* empty */ }).name === 'somethin
 var CONFIGURABLE = EXISTS && (!DESCRIPTORS$7 || (DESCRIPTORS$7 && getDescriptor(FunctionPrototype$1, 'name').configurable));
 
 var functionName = {
-  EXISTS: EXISTS,
   PROPER: PROPER,
   CONFIGURABLE: CONFIGURABLE
 };
@@ -1562,7 +1558,7 @@ var UNSUPPORTED_Y$1 = fails$a(function () {
 
 // UC Browser bug
 // https://github.com/zloirock/core-js/issues/1008
-var MISSED_STICKY = UNSUPPORTED_Y$1 || fails$a(function () {
+UNSUPPORTED_Y$1 || fails$a(function () {
   return !$RegExp$2('a', 'y').sticky;
 });
 
@@ -1574,10 +1570,7 @@ var BROKEN_CARET = UNSUPPORTED_Y$1 || fails$a(function () {
 });
 
 var regexpStickyHelpers = {
-  BROKEN_CARET: BROKEN_CARET,
-  MISSED_STICKY: MISSED_STICKY,
-  UNSUPPORTED_Y: UNSUPPORTED_Y$1
-};
+  BROKEN_CARET: BROKEN_CARET};
 
 var fails$9 = fails$l;
 var global$6 = global$h;
@@ -1868,12 +1861,6 @@ var createMethod$1 = function (TYPE) {
 };
 
 var stringTrim = {
-  // `String.prototype.{ trimLeft, trimStart }` methods
-  // https://tc39.es/ecma262/#sec-string.prototype.trimstart
-  start: createMethod$1(1),
-  // `String.prototype.{ trimRight, trimEnd }` methods
-  // https://tc39.es/ecma262/#sec-string.prototype.trimend
-  end: createMethod$1(2),
   // `String.prototype.trim` method
   // https://tc39.es/ecma262/#sec-string.prototype.trim
   trim: createMethod$1(3)
@@ -2027,9 +2014,6 @@ var createMethod = function (CONVERT_TO_STRING) {
 };
 
 var stringMultibyte = {
-  // `String.prototype.codePointAt` method
-  // https://tc39.es/ecma262/#sec-string.prototype.codepointat
-  codeAt: createMethod(false),
   // `String.prototype.at` method
   // https://github.com/mathiasbynens/String.prototype.at
   charAt: createMethod(true)
@@ -4843,6 +4827,13 @@ class WorkflowDesignerManager {
       value: value
     };
   }
+  getActionInput(actionId, inputPropertyName) {
+    const action = this.findActionById(actionId);
+    if (!action) {
+      return undefined;
+    }
+    return action.inputs[inputPropertyName];
+  }
   // **************//
   // Private Area  //
   // **************//
@@ -5080,6 +5071,9 @@ function WorkflowDesignerProvider(props) {
     //const wf = Object.assign({}, workflowManager.workflowDefinition);
     //setWorkflowDefinition(wf);
   };
+  const getActionInput = (actionId, inputPropertyName) => {
+    return workflowManager.getActionInput(actionId, inputPropertyName);
+  };
   return jsx(WorkflowDesignerCtx.Provider, {
     value: {
       workflowDefinition,
@@ -5100,7 +5094,8 @@ function WorkflowDesignerProvider(props) {
       createEmptyWorkflow,
       findActionById,
       removeAction,
-      findParentAction
+      findParentAction,
+      getActionInput
     },
     children: props.children
   });
@@ -5195,7 +5190,7 @@ function ActionButton(props) {
       description: action.name,
       type: action.id,
       nextActions: {},
-      outcomes: ['done', ...action.outcomes] || ['done'],
+      outcomes: action.outcomes ? ['done', ...action.outcomes] : ['done'],
       parallelActions: [],
       inputs: generateWorkflowActionInputsFromDefinition(action)
     };
@@ -5412,6 +5407,10 @@ function OutputsPicker(props) {
     if (!workflowContext) return [];
     return workflowContext === null || workflowContext === void 0 ? void 0 : workflowContext.findParentActions(action);
   };
+  const pickValue = (actionId, outputName, displayValue) => {
+    props.onValuePicked(`@{outputs('${actionId}.${outputName}')?('${displayValue}')}`);
+    console.log(`@{outputs('${actionId}.${outputName}')?('${displayValue}')}`);
+  };
   return jsxs(Stack, {
     gap: 0,
     children: [jsx(Box, {
@@ -5453,7 +5452,10 @@ function OutputsPicker(props) {
               }), action.outputs.map(output => {
                 return jsx(NavLink, {
                   label: output.name,
-                  description: output.name
+                  description: output.name,
+                  onClick: () => {
+                    pickValue(action.actionId, output.name, output.name);
+                  }
                 });
               })]
             });
@@ -5741,7 +5743,7 @@ function toPrimitive(t, r) {
   if ("object" != _typeof(t) || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
-    var i = e.call(t, r || "default");
+    var i = e.call(t, r);
     if ("object" != _typeof(i)) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
@@ -5756,9 +5758,9 @@ function toPropertyKey(t) {
 function _defineProperty(e, r, t) {
   return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
+    enumerable: true,
+    configurable: true,
+    writable: true
   }) : e[r] = t, e;
 }
 
@@ -6718,7 +6720,7 @@ var _excluded = ["style", "className", "classNames"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function createDefaultStyle(defaultStyle, getModifiers) {
   var enhance = function enhance(ComponentToWrap) {
@@ -7184,7 +7186,7 @@ var SuggestionsOverlay$1 = styled$2(SuggestionsOverlay);
 
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -7553,7 +7555,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
 
         case KEY.DOWN:
           {
-            _this.shiftFocus(+1);
+            _this.shiftFocus(1);
 
             return;
           }
@@ -8239,6 +8241,7 @@ function ActionInputs(props) {
   const workflowContext = useContext(WorkflowDesignerCtx);
   const InputWrapper = props => {
     const [opened, setOpened] = useState(false);
+    const [changedValue, setChangedValue] = useState(undefined);
     return jsxs(Popover, {
       width: 388,
       closeOnClickOutside: true,
@@ -8262,6 +8265,7 @@ function ActionInputs(props) {
             width: 'calc(100% - 30px)',
             input: props.input,
             action: props.action,
+            value: changedValue,
             onValueChanged: value => workflowContext === null || workflowContext === void 0 ? void 0 : workflowContext.setActionInput(props.action.id, props.input.name, WorkflowActionInputType.manual, value)
           }), jsx(ActionIcon, {
             onClick: () => setOpened(!opened),
@@ -8283,18 +8287,41 @@ function ActionInputs(props) {
       }), jsx(Popover.Dropdown, {
         p: 0,
         children: jsx(OutputsPicker, {
-          action: props.action
+          action: props.action,
+          onValuePicked: value => {
+            var _a;
+            workflowContext === null || workflowContext === void 0 ? void 0 : workflowContext.setActionInput(props.action.id, props.input.name, WorkflowActionInputType.manual, value);
+            setChangedValue((_a = workflowContext === null || workflowContext === void 0 ? void 0 : workflowContext.getActionInput(props.action.id, props.input.name)) === null || _a === void 0 ? void 0 : _a.value);
+          }
         })
       })]
     });
   };
   const ActionInputComponent = props => {
     var _a;
-    useContext(WorkflowDesignerCtx);
+    const workflowCtx = useContext(WorkflowDesignerCtx);
     const [val, setVal] = useState((_a = props.action.inputs[props.input.name].value) !== null && _a !== void 0 ? _a : '');
+    const inputRef = useRef(null);
+    const [cursorPosition, setCursorPosition] = useState(0);
+    const handleCursorChange = () => {
+      if (inputRef.current) {
+        setCursorPosition(inputRef.current.selectionStart || 0);
+      }
+    };
     useEffect(() => {
       props.onValueChanged(val);
     }, [val]);
+    useEffect(() => {
+      // newVal is val with props.value in cursor position
+      const firstValPart = val.substring(0, cursorPosition);
+      const secondPart = val.substring(cursorPosition);
+      const newVal = firstValPart + props.value + secondPart;
+      setVal(newVal !== null && newVal !== void 0 ? newVal : '');
+    }, [props.value]);
+    useEffect(() => {
+      var _a, _b;
+      setVal((_b = (_a = workflowCtx === null || workflowCtx === void 0 ? void 0 : workflowCtx.getActionInput(props.action.id, props.input.name)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '');
+    }, [props.action.id, props.input.name, workflowCtx, workflowCtx === null || workflowCtx === void 0 ? void 0 : workflowCtx.workflowDefinition]);
     const onChange = (event, newValue, newPlainTextValue, mentions) => {
       setVal(newValue);
     };
@@ -8313,6 +8340,10 @@ function ActionInputs(props) {
     };
     if (props.input.type !== 'string') {
       return jsx(MentionsInput$1, {
+        inputRef: inputRef,
+        onClick: handleCursorChange,
+        onKeyUp: handleCursorChange,
+        onSelect: handleCursorChange,
         style: {
           control: {
             backgroundColor: '#fff',
@@ -8376,9 +8407,15 @@ function ActionInputs(props) {
           style: {
             backgroundColor: "#cee4e5"
           },
-          renderSuggestion: (a, b, c, e, m) => {
-            return jsxs("div", {
-              children: [a.display, " - ", b, " - ", e, " - ", m]
+          renderSuggestion: (suggestionDataItem, search, highlightedDisplay, index, focused) => {
+            return jsx("div", {
+              style: {
+                padding: '4px 8px',
+                fontSize: '14px',
+                color: focused ? '#fff' : '#333',
+                backgroundColor: focused ? '#06f' : 'transparent'
+              },
+              children: suggestionDataItem.display
             });
           }
         })
@@ -8936,7 +8973,7 @@ function WorkflowDesigner(props) {
 function WorkflowDesignerInner() {
   //const [workflowTree, setWorkflowTree] = React.useState<TreeNode>();
   //const workflowContext = useContext(WorkflowDesignerCtx);
-  React__default.useState(false);
+  const [added, setAdded] = React__default.useState(false);
   //const [wfDefinition, setWfDefinition] = React.useState<Workflow | undefined>(undefined);
   const wfCtx = useContext(WorkflowDesignerCtx);
   const [lastAction, setLastAction] = React__default.useState(undefined);

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@fluxo-dev/shell-workflow",
-  "version": "25.1.3",
+  "version": "25.1.5",
   "peerDependencies": {
     "react": "^18.3.1",
     "@mantine/core": "^7.12.2",
     "react-router-dom": "^6.11.2",
     "react-redux": "^8.0.5",
     "@reduxjs/toolkit": "^1.9.1",
-    "@fluxo-dev/api-client-base": "^25.1.3",
-    "@fluxo-dev/state": "^25.1.3",
-    "@fluxo-dev/ui-components": "^25.1.3"
+    "@fluxo-dev/api-client-base": "^25.1.5",
+    "@fluxo-dev/state": "^25.1.5",
+    "@fluxo-dev/ui-components": "^25.1.5"
   },
   "module": "./index.esm.js",
   "type": "module",

package/src/lib/designer/components/action/outputs-picker.d.ts

@@ -1,5 +1,6 @@
 import { WorkflowAction } from "@fluxo-dev/api-client-base";
 export interface OutputsPickerProps {
     action: WorkflowAction;
+    onValuePicked: (value: string) => void;
 }
 export declare function OutputsPicker(props: OutputsPickerProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/designer/provider/workflow-designer-provider.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { TriggerCategoryDefinition, TriggerDefinition, Workflow, WorkflowAction, WorkflowActionInputType } from "@fluxo-dev/api-client-base";
+import { TriggerCategoryDefinition, TriggerDefinition, Workflow, WorkflowAction, WorkflowActionInput, WorkflowActionInputType } from '@fluxo-dev/api-client-base';
 import { IWorkflowDesignerManager } from "../services/workflow-manager-interface";
 import { ActionCategoryDefinition, ActionDefinition, ActionOutputDefinition } from "@fluxo-dev/api-client-base";
 export interface WorkflowDesignerContextState extends IWorkflowDesignerManager {
@@ -15,6 +15,7 @@ export interface WorkflowDesignerContextState extends IWorkflowDesignerManager {
         outputs: ActionOutputDefinition[];
     }[];
     setActionInput: (actionId: string, inputPropertyName: string, inputType: WorkflowActionInputType, value: string) => void;
+    getActionInput: (actionId: string, getActionInput: string) => WorkflowActionInput | undefined;
     getTriggerDefinition: () => TriggerDefinition | undefined;
 }
 interface WorkflowDesignerContextProps {

package/src/lib/designer/services/workflow-manager.d.ts

@@ -1,5 +1,5 @@
 import { IWorkflowDesignerManager } from "./workflow-manager-interface";
-import { Workflow, WorkflowAction, WorkflowActionInputType, WorkflowTrigger } from "@fluxo-dev/api-client-base";
+import { Workflow, WorkflowAction, WorkflowActionInput, WorkflowActionInputType, WorkflowTrigger } from '@fluxo-dev/api-client-base';
 export declare class WorkflowDesignerManager implements IWorkflowDesignerManager {
     private _workflowDefinition;
     private _mode;
@@ -65,6 +65,7 @@ export declare class WorkflowDesignerManager implements IWorkflowDesignerManager
      */
     findParentAction(childActionId: string): WorkflowAction | undefined;
     setActionInput(actionId: string, inputPropertyName: string, inputType: WorkflowActionInputType, value: string): void;
+    getActionInput(actionId: string, inputPropertyName: string): WorkflowActionInput | undefined;
     private findActionRecursive;
     private removeSimpleAction;
     private removeCustomOutcomeAction;