@bpmn-io/properties-panel 1.6.2 → 1.8.0

package/assets/properties-panel.css

@@ -457,6 +457,7 @@
   background-color: transparent;
 }
 
+.bio-properties-panel-feelers-editor .cm-editor.cm-focused,
 .bio-properties-panel-feelers-input .cm-editor.cm-focused {
   outline: none;
 }
@@ -1013,10 +1014,6 @@ textarea.bio-properties-panel-input {
   min-height: 28px;
 }
 
-.bio-properties-panel-feel-container .cm-scroller {
-  overflow: hidden !important;
-}
-
 .bio-properties-panel-feel-indicator {
   position: absolute;
   border: 1px solid var(--input-border-color);
@@ -1030,6 +1027,18 @@ textarea.bio-properties-panel-input {
   padding: 2px 6px;
 }
 
+.bio-properties-panel-feel-editor-container .cm-scroller {
+  overflow: hidden !important;
+}
+
+.bio-properties-panel-feelers-editor .cm-editor {
+  background-color: transparent;
+}
+
+.bio-properties-panel-feelers-editor .cm-editor.cm-focused {
+  background-color: transparent;
+}
+
 .bio-properties-panel-feel-editor-container .bio-properties-panel-input {
   resize: vertical;
   overflow: hidden;

package/dist/index.esm.js

@@ -1,12 +1,12 @@
-import { useContext, useRef, useEffect, useMemo, useState, useCallback, useLayoutEffect } from '../preact/hooks';
+import { useContext, useRef, useEffect, useMemo, useCallback, useState, useLayoutEffect } from '../preact/hooks';
 import { isFunction, isArray, get, assign, set, sortBy, find, isNumber, debounce } from 'min-dash';
 import classnames from 'classnames';
 import { forwardRef } from '../preact/compat';
 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';
+import FeelEditor from '@bpmn-io/feel-editor';
 
 var ArrowIcon = function ArrowIcon(props) {
   return jsx("svg", {
@@ -310,15 +310,10 @@ function useLayoutState(path, defaultValue) {
     setLayoutForKey
   } = useContext(LayoutContext);
   const layoutForKey = getLayoutForKey(path, defaultValue);
-  const [value, set] = useState(layoutForKey);
-  const setState = newValue => {
-    // (1) set component state
-    set(newValue);
-
-    // (2) set context
+  const setState = useCallback(newValue => {
     setLayoutForKey(path, newValue);
-  };
-  return [value, setState];
+  }, [setLayoutForKey]);
+  return [layoutForKey, setState];
 }
 
 /**
@@ -634,15 +629,21 @@ function PropertiesPanel(props) {
     headerProvider,
     placeholderProvider,
     groups,
-    layoutConfig = {},
+    layoutConfig,
     layoutChanged,
-    descriptionConfig = {},
+    descriptionConfig,
     descriptionLoaded,
     eventBus
   } = props;
 
   // set-up layout context
   const [layout, setLayout] = useState(createLayout(layoutConfig));
+
+  // react to external changes in the layout config
+  useUpdateEffect(() => {
+    const newLayout = createLayout(layoutConfig);
+    setLayout(newLayout);
+  }, [layoutConfig]);
   useEffect(() => {
     if (typeof layoutChanged === 'function') {
       layoutChanged(layout);
@@ -664,10 +665,12 @@ function PropertiesPanel(props) {
   };
 
   // set-up description context
-  const description = createDescriptionContext(descriptionConfig);
-  if (typeof descriptionLoaded === 'function') {
-    descriptionLoaded(description);
-  }
+  const description = useMemo(() => createDescriptionContext(descriptionConfig), [descriptionConfig]);
+  useEffect(() => {
+    if (typeof descriptionLoaded === 'function') {
+      descriptionLoaded(description);
+    }
+  }, [description, descriptionLoaded]);
   const getDescriptionForId = (id, element) => {
     return description[id] && description[id](element);
   };
@@ -742,19 +745,38 @@ function PropertiesPanel(props) {
 
 // helpers //////////////////
 
-function createLayout(overrides) {
+function createLayout(overrides = {}, defaults = DEFAULT_LAYOUT) {
   return {
-    ...DEFAULT_LAYOUT,
+    ...defaults,
     ...overrides
   };
 }
-function createDescriptionContext(overrides) {
+function createDescriptionContext(overrides = {}) {
   return {
     ...DEFAULT_DESCRIPTION,
     ...overrides
   };
 }
 
+// hooks //////////////////
+
+/**
+ * This hook behaves like useEffect, but does not trigger on the first render.
+ *
+ * @param {Function} effect
+ * @param {Array} deps
+ */
+function useUpdateEffect(effect, deps) {
+  const isMounted = useRef(false);
+  useEffect(() => {
+    if (isMounted.current) {
+      return effect();
+    } else {
+      isMounted.current = true;
+    }
+  }, deps);
+}
+
 function DropdownButton(props) {
   const {
     class: className,
@@ -1289,6 +1311,88 @@ const useBufferedFocus$1 = function (editor, ref) {
   }, [editor, buffer]);
 };
 const CodeEditor$1 = forwardRef((props, ref) => {
+  const {
+    onInput,
+    disabled,
+    tooltipContainer,
+    enableGutters,
+    value,
+    onLint = () => {},
+    contentAttributes = {},
+    hostLanguage = null,
+    singleLine = false
+  } = props;
+  const inputRef = useRef();
+  const [editor, setEditor] = useState();
+  const [localValue, setLocalValue] = useState(value || '');
+  useBufferedFocus$1(editor, ref);
+  const handleInput = useStaticCallback(newValue => {
+    onInput(newValue);
+    setLocalValue(newValue);
+  });
+  useEffect(() => {
+    let editor;
+    editor = new FeelersEditor({
+      container: inputRef.current,
+      onChange: handleInput,
+      value: localValue,
+      onLint,
+      contentAttributes,
+      tooltipContainer,
+      enableGutters,
+      hostLanguage,
+      singleLine
+    });
+    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 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,
@@ -1301,7 +1405,7 @@ const CodeEditor$1 = forwardRef((props, ref) => {
   const inputRef = useRef();
   const [editor, setEditor] = useState();
   const [localValue, setLocalValue] = useState(value || '');
-  useBufferedFocus$1(editor, ref);
+  useBufferedFocus(editor, ref);
   const handleInput = useStaticCallback(newValue => {
     onInput(newValue);
     setLocalValue(newValue);
@@ -1557,7 +1661,7 @@ function FeelTextfield(props) {
         active: feelActive,
         disabled: feel !== 'optional' || disabled,
         onClick: handleFeelToggle
-      }), feelActive ? jsx(CodeEditor$1, {
+      }), feelActive ? jsx(CodeEditor, {
         id: prefixId$6(id),
         name: id,
         onInput: handleLocalInput,
@@ -1574,6 +1678,9 @@ function FeelTextfield(props) {
       }) : jsx(OptionalComponent, {
         ...props,
         onInput: handleLocalInput,
+        contentAttributes: {
+          'id': prefixId$6(id)
+        },
         value: localValue,
         ref: editorRef
       })]
@@ -1694,6 +1801,8 @@ function FeelEntry(props) {
     getValue,
     setValue,
     tooltipContainer,
+    hostLanguage,
+    singleLine,
     validate,
     show = noop$1,
     example,
@@ -1749,6 +1858,8 @@ function FeelEntry(props) {
       onFocus: onFocus,
       onBlur: onBlur,
       example: example,
+      hostLanguage: hostLanguage,
+      singleLine: singleLine,
       show: show,
       value: value,
       variables: variables,
@@ -1784,13 +1895,42 @@ function FeelEntry(props) {
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
  */
-function FeelTextArea(props) {
+function FeelTextAreaEntry(props) {
   return jsx(FeelEntry, {
     class: "bio-properties-panel-feel-textarea",
     OptionalComponent: OptionalFeelTextArea,
     ...props
   });
 }
+
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {String} props.hostLanguage
+ * @param {Boolean} props.singleLine
+ * @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 FeelTemplatingEntry(props) {
+  return jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-templating",
+    OptionalComponent: CodeEditor$1,
+    ...props
+  });
+}
 function isEdited$7(node) {
   return node && (!!node.value || node.classList.contains('edited'));
 }
@@ -1801,86 +1941,6 @@ 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 = () => {};
 
 /**
@@ -1897,7 +1957,7 @@ const noop = () => {};
  * @param {Function} props.validate
  * @param {Function} props.show
  */
-function FeelTemplatingEntry(props) {
+function TemplatingEntry(props) {
   const {
     element,
     id,
@@ -1948,7 +2008,7 @@ function FeelTemplatingEntry(props) {
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
-    children: [jsx(FeelTemplating, {
+    children: [jsx(Templating, {
       debounce: debounce,
       disabled: disabled,
       id: id,
@@ -1968,7 +2028,7 @@ function FeelTemplatingEntry(props) {
     })]
   });
 }
-function FeelTemplating(props) {
+function Templating(props) {
   const {
     debounce,
     id,
@@ -2029,7 +2089,7 @@ function FeelTemplating(props) {
     }), jsx("div", {
       class: "bio-properties-panel-feelers-input",
       ref: containerRef,
-      children: jsx(CodeEditor, {
+      children: jsx(CodeEditor$1, {
         name: id,
         onInput: handleInput,
         contentAttributes: {
@@ -2038,7 +2098,6 @@ function FeelTemplating(props) {
         disabled: disabled,
         onLint: handleLint,
         value: localValue,
-        useGutters: false,
         ref: editorRef,
         tooltipContainer: tooltipContainer
       })
@@ -2682,6 +2741,7 @@ function TextArea(props) {
  * @param {Function} props.onBlur
  * @param {number} props.rows
  * @param {boolean} props.monospace
+ * @param {Function} [props.validate]
  * @param {boolean} [props.disabled]
  */
 function TextAreaEntry(props) {
@@ -2696,12 +2756,38 @@ function TextAreaEntry(props) {
     rows,
     monospace,
     disabled,
+    validate,
     onFocus,
     onBlur,
     autoResize
   } = props;
-  const value = getValue(element);
-  const error = useError(id);
+  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
+  const globalError = useError(id);
+  const [localError, setLocalError] = useState(null);
+  let value = getValue(element);
+  const previousValue = usePrevious(value);
+  useEffect(() => {
+    if (isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setLocalError(newValidationError);
+    }
+  }, [value]);
+  const onInput = newValue => {
+    let newValidationError = null;
+    if (isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
+    if (newValidationError) {
+      setCachedInvalidValue(newValue);
+    } else {
+      setValue(newValue);
+    }
+    setLocalError(newValidationError);
+  };
+  if (previousValue === value && localError) {
+    value = cachedInvalidValue;
+  }
+  const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
@@ -2709,7 +2795,7 @@ function TextAreaEntry(props) {
       id: id,
       label: label,
       value: value,
-      onInput: setValue,
+      onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
       rows: rows,
@@ -2999,5 +3085,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, 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 };
+export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelEntry, FeelOptionalIcon, FeelRequiredIcon, FeelTemplatingEntry, FeelTextAreaEntry, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TemplatingEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, isEdited$8 as isCheckboxEntryEdited, isEdited$7 as isFeelEntryEdited, isEdited$5 as isNumberFieldEntryEdited, isEdited$4 as isSelectEntryEdited, isEdited$3 as isSimpleEntryEdited, isEdited$6 as isTemplatingEntryEdited, 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