@bpmn-io/properties-panel 1.4.0 → 1.5.1

package/assets/properties-panel.css

@@ -446,6 +446,21 @@
   text-decoration: underline;
 }
 
+.bio-properties-panel-feelers-editor.bio-properties-panel-input {
+  padding: 0;
+}
+
+.bio-properties-panel-feelers-input .cm-editor
+{
+  min-height: 32px;
+  max-height: 215px;
+  background-color: transparent;
+}
+
+.bio-properties-panel-feelers-input .cm-editor.cm-focused {
+  outline: none;
+}
+
 .bio-properties-panel-input {
   padding: 3px 6px 2px;
   border: 1px solid var(--input-border-color);

package/dist/index.esm.js

@@ -6,6 +6,7 @@ import { jsx, jsxs } from '../preact/jsx-runtime';
 import { query } from 'min-dom';
 import { createContext, createElement } from '../preact';
 import FeelEditor from '@bpmn-io/feel-editor';
+import { FeelersEditor } from 'feelers';
 
 var ArrowIcon = function ArrowIcon(props) {
   return jsx("svg", {
@@ -952,7 +953,7 @@ function ListItem(props) {
   });
 }
 
-const noop$2 = () => {};
+const noop$3 = () => {};
 
 /**
  * @param {import('../PropertiesPanel').ListGroupDefinition} props
@@ -1061,7 +1062,7 @@ function ListGroup(props) {
     ref: groupRef,
     children: [jsxs("div", {
       class: classnames('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
-      onClick: hasItems ? toggleOpen : noop$2,
+      onClick: hasItems ? toggleOpen : noop$3,
       children: [jsx("div", {
         title: label,
         class: "bio-properties-panel-group-header-title",
@@ -1242,7 +1243,7 @@ function CheckboxEntry(props) {
     })]
   });
 }
-function isEdited$7(node) {
+function isEdited$8(node) {
   return node && !!node.checked;
 }
 
@@ -1252,7 +1253,7 @@ function prefixId$7(id) {
   return `bio-properties-panel-${id}`;
 }
 
-const useBufferedFocus = function (editor, ref) {
+const useBufferedFocus$1 = function (editor, ref) {
   const [buffer, setBuffer] = useState(undefined);
   ref.current = useMemo(() => ({
     focus: offset => {
@@ -1273,7 +1274,7 @@ const useBufferedFocus = function (editor, ref) {
     }
   }, [editor, buffer]);
 };
-const CodeEditor = forwardRef((props, ref) => {
+const CodeEditor$1 = forwardRef((props, ref) => {
   const {
     value,
     onInput,
@@ -1286,7 +1287,7 @@ const CodeEditor = forwardRef((props, ref) => {
   const inputRef = useRef();
   const [editor, setEditor] = useState();
   const [localValue, setLocalValue] = useState(value || '');
-  useBufferedFocus(editor, ref);
+  useBufferedFocus$1(editor, ref);
   const handleInput = useStaticCallback(newValue => {
     onInput(newValue);
     setLocalValue(newValue);
@@ -1368,7 +1369,7 @@ function FeelIndicator(props) {
   });
 }
 
-const noop$1 = () => {};
+const noop$2 = () => {};
 
 /**
  * @param {Object} props
@@ -1381,7 +1382,7 @@ function FeelIcon(props) {
     feel = false,
     active,
     disabled = false,
-    onClick = noop$1
+    onClick = noop$2
   } = props;
   const feelRequiredLabel = ' must be a FEEL expression';
   const feelOptionalLabel = ' can optionally be a FEEL expression';
@@ -1402,7 +1403,7 @@ function FeelIcon(props) {
   });
 }
 
-const noop = () => {};
+const noop$1 = () => {};
 function FeelTextfield(props) {
   const {
     debounce,
@@ -1542,7 +1543,7 @@ function FeelTextfield(props) {
         active: feelActive,
         disabled: feel !== 'optional' || disabled,
         onClick: handleFeelToggle
-      }), feelActive ? jsx(CodeEditor, {
+      }), feelActive ? jsx(CodeEditor$1, {
         id: prefixId$6(id),
         name: id,
         onInput: handleLocalInput,
@@ -1655,10 +1656,17 @@ const OptionalFeelTextArea = forwardRef((props, ref) => {
  * @param {String} props.description
  * @param {Boolean} props.debounce
  * @param {Boolean} props.disabled
+ * @param {Boolean} props.feel
  * @param {String} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
  * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  */
 function FeelEntry(props) {
   const {
@@ -1673,7 +1681,7 @@ function FeelEntry(props) {
     setValue,
     tooltipContainer,
     validate,
-    show = noop,
+    show = noop$1,
     example,
     variables,
     onFocus,
@@ -1750,12 +1758,17 @@ function FeelEntry(props) {
  * @param {String} props.description
  * @param {Boolean} props.debounce
  * @param {Boolean} props.disabled
+ * @param {Boolean} props.feel
  * @param {String} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
- * @param {Function} props.validate
  */
 function FeelTextArea(props) {
   return jsx(FeelEntry, {
@@ -1764,7 +1777,7 @@ function FeelTextArea(props) {
     ...props
   });
 }
-function isEdited$6(node) {
+function isEdited$7(node) {
   return node && (!!node.value || node.classList.contains('edited'));
 }
 
@@ -1774,6 +1787,260 @@ function prefixId$6(id) {
   return `bio-properties-panel-${id}`;
 }
 
+const useBufferedFocus = function (editor, ref) {
+  const [buffer, setBuffer] = useState(undefined);
+  ref.current = useMemo(() => ({
+    focus: offset => {
+      if (editor) {
+        editor.focus(offset);
+      } else {
+        if (typeof offset === 'undefined') {
+          offset = Infinity;
+        }
+        setBuffer(offset);
+      }
+    }
+  }), [editor]);
+  useEffect(() => {
+    if (typeof buffer !== 'undefined' && editor) {
+      editor.focus(buffer);
+      setBuffer(false);
+    }
+  }, [editor, buffer]);
+};
+const CodeEditor = forwardRef((props, ref) => {
+  const {
+    value,
+    onInput,
+    onLint = () => {},
+    contentAttributes = {},
+    disabled,
+    tooltipContainer,
+    useGutters = false,
+    darkMode = false
+  } = props;
+  const inputRef = useRef();
+  const [editor, setEditor] = useState();
+  const [localValue, setLocalValue] = useState(value || '');
+  useBufferedFocus(editor, ref);
+  const handleInput = useStaticCallback(newValue => {
+    onInput(newValue);
+    setLocalValue(newValue);
+  });
+  useEffect(() => {
+    let editor;
+    editor = new FeelersEditor({
+      container: inputRef.current,
+      onChange: handleInput,
+      onLint: onLint,
+      contentAttributes: contentAttributes,
+      tooltipContainer: tooltipContainer,
+      value: localValue,
+      darkMode: darkMode,
+      enableGutters: useGutters
+    });
+    setEditor(editor);
+    return () => {
+      onLint([]);
+      inputRef.current.innerHTML = '';
+      setEditor(null);
+    };
+  }, []);
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    if (value === localValue) {
+      return;
+    }
+    editor.setValue(value);
+    setLocalValue(value);
+  }, [value]);
+  const handleClick = () => {
+    ref.current.focus();
+  };
+  return jsx("div", {
+    name: props.name,
+    class: classnames('bio-properties-panel-feelers-editor bio-properties-panel-input', localValue ? 'edited' : null, disabled ? 'disabled' : null),
+    ref: inputRef,
+    onClick: handleClick
+  });
+});
+
+const noop = () => {};
+
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ */
+function FeelTemplatingEntry(props) {
+  const {
+    element,
+    id,
+    description,
+    debounce,
+    disabled,
+    label,
+    getValue,
+    setValue,
+    tooltipContainer,
+    validate,
+    show = noop
+  } = props;
+  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
+  const [validationError, setValidationError] = useState(null);
+  const [localError, setLocalError] = useState(null);
+  let value = getValue(element);
+  const previousValue = usePrevious(value);
+  useEffect(() => {
+    if (isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setValidationError(newValidationError);
+    }
+  }, [value]);
+  const onInput = useStaticCallback(newValue => {
+    let newValidationError = null;
+    if (isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
+    if (newValidationError) {
+      setCachedInvalidValue(newValue);
+    } else {
+      // don't create multiple commandStack entries for the same value
+      if (newValue !== value) {
+        setValue(newValue);
+      }
+    }
+    setValidationError(newValidationError);
+  });
+  const onError = useCallback(err => {
+    setLocalError(err);
+  }, []);
+  if (previousValue === value && validationError) {
+    value = cachedInvalidValue;
+  }
+  const temporaryError = useError(id);
+  const error = localError || temporaryError || validationError;
+  return jsxs("div", {
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
+    "data-entry-id": id,
+    children: [jsx(FeelTemplating, {
+      debounce: debounce,
+      disabled: disabled,
+      id: id,
+      label: label,
+      onInput: onInput,
+      onError: onError,
+      show: show,
+      value: value,
+      tooltipContainer: tooltipContainer
+    }, element), error && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsx(Description, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+function FeelTemplating(props) {
+  const {
+    debounce,
+    id,
+    label,
+    onInput,
+    onError,
+    value = '',
+    disabled = false,
+    tooltipContainer
+  } = props;
+  const [localValue, setLocalValue] = useState(value);
+  const editorRef = useShowEntryEvent(id);
+  const containerRef = useRef();
+  const [focus, _setFocus] = useState(undefined);
+  const setFocus = (offset = 0) => {
+    const hasFocus = containerRef.current.contains(document.activeElement);
+
+    // Keep caret position if it is already focused, otherwise focus at the end
+    const position = hasFocus ? document.activeElement.selectionStart : Infinity;
+    _setFocus(position + offset);
+  };
+  const handleInputCallback = useMemo(() => {
+    return debounce(newValue => onInput(newValue.length ? newValue : undefined));
+  }, [onInput, debounce]);
+  const handleInput = newValue => {
+    handleInputCallback(newValue);
+    setLocalValue(newValue);
+  };
+  const handleLint = useStaticCallback(lint => {
+    const errors = lint && lint.length && lint.filter(e => e.severity === 'error') || [];
+    if (!errors.length) {
+      onError(undefined);
+      return;
+    }
+    const error = lint[0];
+    const message = `${error.source}: ${error.message}`;
+    onError(message);
+  });
+  useEffect(() => {
+    if (typeof focus !== 'undefined') {
+      editorRef.current.focus(focus);
+      _setFocus(undefined);
+    }
+  }, [focus]);
+  useEffect(() => {
+    if (value === localValue) {
+      return;
+    }
+    setLocalValue(value ? value : '');
+  }, [value]);
+  return jsxs("div", {
+    class: "bio-properties-panel-feelers",
+    children: [jsx("label", {
+      id: prefixIdLabel(id),
+      class: "bio-properties-panel-label",
+      onClick: () => setFocus(),
+      children: label
+    }), jsx("div", {
+      class: "bio-properties-panel-feelers-input",
+      ref: containerRef,
+      children: jsx(CodeEditor, {
+        name: id,
+        onInput: handleInput,
+        contentAttributes: {
+          'aria-labelledby': prefixIdLabel(id)
+        },
+        disabled: disabled,
+        onLint: handleLint,
+        value: localValue,
+        useGutters: false,
+        ref: editorRef,
+        tooltipContainer: tooltipContainer
+      })
+    })]
+  });
+}
+function isEdited$6(node) {
+  return node && (!!node.value || node.classList.contains('edited'));
+}
+
+// helpers /////////////////
+
+function prefixIdLabel(id) {
+  return `bio-properties-panel-feelers-${id}-label`;
+}
+
 function List(props) {
   const {
     id,
@@ -2691,5 +2958,5 @@ var index = {
   debounceInput: ['factory', debounceInput]
 };
 
-export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelEntry, FeelOptionalIcon, FeelRequiredIcon, FeelTextArea as FeelTextAreaEntry, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, isEdited$7 as isCheckboxEntryEdited, isEdited$6 as isFeelEntryEdited, isEdited$5 as isNumberFieldEntryEdited, isEdited$4 as isSelectEntryEdited, isEdited$3 as isSimpleEntryEdited, isEdited$2 as isTextAreaEntryEdited, isEdited$1 as isTextFieldEntryEdited, isEdited as isToggleSwitchEntryEdited, useDescriptionContext, useError, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver };
+export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelEntry, FeelOptionalIcon, FeelRequiredIcon, FeelTemplatingEntry, FeelTextArea as FeelTextAreaEntry, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, isEdited$8 as isCheckboxEntryEdited, isEdited$7 as isFeelEntryEdited, isEdited$6 as isFeelTemplatingEntryEdited, isEdited$5 as isNumberFieldEntryEdited, isEdited$4 as isSelectEntryEdited, isEdited$3 as isSimpleEntryEdited, isEdited$2 as isTextAreaEntryEdited, isEdited$1 as isTextFieldEntryEdited, isEdited as isToggleSwitchEntryEdited, useDescriptionContext, useError, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver };
 //# sourceMappingURL=index.esm.js.map