@bpmn-io/properties-panel 1.6.1 → 1.7.0

package/dist/index.js

@@ -9,8 +9,8 @@ var compat = require('../preact/compat');
 var jsxRuntime = require('../preact/jsx-runtime');
 var minDom = require('min-dom');
 var preact = require('../preact');
-var FeelEditor = require('@bpmn-io/feel-editor');
 var feelers = require('feelers');
+var FeelEditor = require('@bpmn-io/feel-editor');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -319,15 +319,10 @@ function useLayoutState(path, defaultValue) {
     setLayoutForKey
   } = hooks.useContext(LayoutContext);
   const layoutForKey = getLayoutForKey(path, defaultValue);
-  const [value, set] = hooks.useState(layoutForKey);
-  const setState = newValue => {
-    // (1) set component state
-    set(newValue);
-
-    // (2) set context
+  const setState = hooks.useCallback(newValue => {
     setLayoutForKey(path, newValue);
-  };
-  return [value, setState];
+  }, [setLayoutForKey]);
+  return [layoutForKey, setState];
 }
 
 /**
@@ -643,15 +638,21 @@ function PropertiesPanel(props) {
     headerProvider,
     placeholderProvider,
     groups,
-    layoutConfig = {},
+    layoutConfig,
     layoutChanged,
-    descriptionConfig = {},
+    descriptionConfig,
     descriptionLoaded,
     eventBus
   } = props;
 
   // set-up layout context
   const [layout, setLayout] = hooks.useState(createLayout(layoutConfig));
+
+  // react to external changes in the layout config
+  useUpdateEffect(() => {
+    const newLayout = createLayout(layoutConfig);
+    setLayout(newLayout);
+  }, [layoutConfig]);
   hooks.useEffect(() => {
     if (typeof layoutChanged === 'function') {
       layoutChanged(layout);
@@ -673,10 +674,12 @@ function PropertiesPanel(props) {
   };
 
   // set-up description context
-  const description = createDescriptionContext(descriptionConfig);
-  if (typeof descriptionLoaded === 'function') {
-    descriptionLoaded(description);
-  }
+  const description = hooks.useMemo(() => createDescriptionContext(descriptionConfig), [descriptionConfig]);
+  hooks.useEffect(() => {
+    if (typeof descriptionLoaded === 'function') {
+      descriptionLoaded(description);
+    }
+  }, [description, descriptionLoaded]);
   const getDescriptionForId = (id, element) => {
     return description[id] && description[id](element);
   };
@@ -751,19 +754,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 = hooks.useRef(false);
+  hooks.useEffect(() => {
+    if (isMounted.current) {
+      return effect();
+    } else {
+      isMounted.current = true;
+    }
+  }, deps);
+}
+
 function DropdownButton(props) {
   const {
     class: className,
@@ -1298,6 +1320,88 @@ const useBufferedFocus$1 = function (editor, ref) {
   }, [editor, buffer]);
 };
 const CodeEditor$1 = compat.forwardRef((props, ref) => {
+  const {
+    onInput,
+    disabled,
+    tooltipContainer,
+    enableGutters,
+    value,
+    onLint = () => {},
+    contentAttributes = {},
+    hostLanguage = null,
+    singleLine = false
+  } = props;
+  const inputRef = hooks.useRef();
+  const [editor, setEditor] = hooks.useState();
+  const [localValue, setLocalValue] = hooks.useState(value || '');
+  useBufferedFocus$1(editor, ref);
+  const handleInput = useStaticCallback(newValue => {
+    onInput(newValue);
+    setLocalValue(newValue);
+  });
+  hooks.useEffect(() => {
+    let editor;
+    editor = new feelers.FeelersEditor({
+      container: inputRef.current,
+      onChange: handleInput,
+      value: localValue,
+      onLint,
+      contentAttributes,
+      tooltipContainer,
+      enableGutters,
+      hostLanguage,
+      singleLine
+    });
+    setEditor(editor);
+    return () => {
+      onLint([]);
+      inputRef.current.innerHTML = '';
+      setEditor(null);
+    };
+  }, []);
+  hooks.useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    if (value === localValue) {
+      return;
+    }
+    editor.setValue(value);
+    setLocalValue(value);
+  }, [value]);
+  const handleClick = () => {
+    ref.current.focus();
+  };
+  return jsxRuntime.jsx("div", {
+    name: props.name,
+    class: classnames__default["default"]('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] = hooks.useState(undefined);
+  ref.current = hooks.useMemo(() => ({
+    focus: offset => {
+      if (editor) {
+        editor.focus(offset);
+      } else {
+        if (typeof offset === 'undefined') {
+          offset = Infinity;
+        }
+        setBuffer(offset);
+      }
+    }
+  }), [editor]);
+  hooks.useEffect(() => {
+    if (typeof buffer !== 'undefined' && editor) {
+      editor.focus(buffer);
+      setBuffer(false);
+    }
+  }, [editor, buffer]);
+};
+const CodeEditor = compat.forwardRef((props, ref) => {
   const {
     value,
     onInput,
@@ -1310,7 +1414,7 @@ const CodeEditor$1 = compat.forwardRef((props, ref) => {
   const inputRef = hooks.useRef();
   const [editor, setEditor] = hooks.useState();
   const [localValue, setLocalValue] = hooks.useState(value || '');
-  useBufferedFocus$1(editor, ref);
+  useBufferedFocus(editor, ref);
   const handleInput = useStaticCallback(newValue => {
     onInput(newValue);
     setLocalValue(newValue);
@@ -1566,7 +1670,7 @@ function FeelTextfield(props) {
         active: feelActive,
         disabled: feel !== 'optional' || disabled,
         onClick: handleFeelToggle
-      }), feelActive ? jsxRuntime.jsx(CodeEditor$1, {
+      }), feelActive ? jsxRuntime.jsx(CodeEditor, {
         id: prefixId$6(id),
         name: id,
         onInput: handleLocalInput,
@@ -1583,6 +1687,9 @@ function FeelTextfield(props) {
       }) : jsxRuntime.jsx(OptionalComponent, {
         ...props,
         onInput: handleLocalInput,
+        contentAttributes: {
+          'id': prefixId$6(id)
+        },
         value: localValue,
         ref: editorRef
       })]
@@ -1703,6 +1810,8 @@ function FeelEntry(props) {
     getValue,
     setValue,
     tooltipContainer,
+    hostLanguage,
+    singleLine,
     validate,
     show = noop$1,
     example,
@@ -1758,6 +1867,8 @@ function FeelEntry(props) {
       onFocus: onFocus,
       onBlur: onBlur,
       example: example,
+      hostLanguage: hostLanguage,
+      singleLine: singleLine,
       show: show,
       value: value,
       variables: variables,
@@ -1793,13 +1904,42 @@ function FeelEntry(props) {
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
  */
-function FeelTextArea(props) {
+function FeelTextAreaEntry(props) {
   return jsxRuntime.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 jsxRuntime.jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-templating",
+    OptionalComponent: CodeEditor$1,
+    ...props
+  });
+}
 function isEdited$7(node) {
   return node && (!!node.value || node.classList.contains('edited'));
 }
@@ -1810,86 +1950,6 @@ function prefixId$6(id) {
   return `bio-properties-panel-${id}`;
 }
 
-const useBufferedFocus = function (editor, ref) {
-  const [buffer, setBuffer] = hooks.useState(undefined);
-  ref.current = hooks.useMemo(() => ({
-    focus: offset => {
-      if (editor) {
-        editor.focus(offset);
-      } else {
-        if (typeof offset === 'undefined') {
-          offset = Infinity;
-        }
-        setBuffer(offset);
-      }
-    }
-  }), [editor]);
-  hooks.useEffect(() => {
-    if (typeof buffer !== 'undefined' && editor) {
-      editor.focus(buffer);
-      setBuffer(false);
-    }
-  }, [editor, buffer]);
-};
-const CodeEditor = compat.forwardRef((props, ref) => {
-  const {
-    value,
-    onInput,
-    onLint = () => {},
-    contentAttributes = {},
-    disabled,
-    tooltipContainer,
-    useGutters = false,
-    darkMode = false
-  } = props;
-  const inputRef = hooks.useRef();
-  const [editor, setEditor] = hooks.useState();
-  const [localValue, setLocalValue] = hooks.useState(value || '');
-  useBufferedFocus(editor, ref);
-  const handleInput = useStaticCallback(newValue => {
-    onInput(newValue);
-    setLocalValue(newValue);
-  });
-  hooks.useEffect(() => {
-    let editor;
-    editor = new feelers.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);
-    };
-  }, []);
-  hooks.useEffect(() => {
-    if (!editor) {
-      return;
-    }
-    if (value === localValue) {
-      return;
-    }
-    editor.setValue(value);
-    setLocalValue(value);
-  }, [value]);
-  const handleClick = () => {
-    ref.current.focus();
-  };
-  return jsxRuntime.jsx("div", {
-    name: props.name,
-    class: classnames__default["default"]('bio-properties-panel-feelers-editor bio-properties-panel-input', localValue ? 'edited' : null, disabled ? 'disabled' : null),
-    ref: inputRef,
-    onClick: handleClick
-  });
-});
-
 const noop = () => {};
 
 /**
@@ -1906,7 +1966,7 @@ const noop = () => {};
  * @param {Function} props.validate
  * @param {Function} props.show
  */
-function FeelTemplatingEntry(props) {
+function TemplatingEntry(props) {
   const {
     element,
     id,
@@ -1957,7 +2017,7 @@ function FeelTemplatingEntry(props) {
   return jsxRuntime.jsxs("div", {
     class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
-    children: [jsxRuntime.jsx(FeelTemplating, {
+    children: [jsxRuntime.jsx(Templating, {
       debounce: debounce,
       disabled: disabled,
       id: id,
@@ -1977,7 +2037,7 @@ function FeelTemplatingEntry(props) {
     })]
   });
 }
-function FeelTemplating(props) {
+function Templating(props) {
   const {
     debounce,
     id,
@@ -2038,7 +2098,7 @@ function FeelTemplating(props) {
     }), jsxRuntime.jsx("div", {
       class: "bio-properties-panel-feelers-input",
       ref: containerRef,
-      children: jsxRuntime.jsx(CodeEditor, {
+      children: jsxRuntime.jsx(CodeEditor$1, {
         name: id,
         onInput: handleInput,
         contentAttributes: {
@@ -2047,7 +2107,6 @@ function FeelTemplating(props) {
         disabled: disabled,
         onLint: handleLint,
         value: localValue,
-        useGutters: false,
         ref: editorRef,
         tooltipContainer: tooltipContainer
       })
@@ -3024,7 +3083,7 @@ exports.FeelEntry = FeelEntry;
 exports.FeelOptionalIcon = FeelOptionalIcon;
 exports.FeelRequiredIcon = FeelRequiredIcon;
 exports.FeelTemplatingEntry = FeelTemplatingEntry;
-exports.FeelTextAreaEntry = FeelTextArea;
+exports.FeelTextAreaEntry = FeelTextAreaEntry;
 exports.Group = Group;
 exports.Header = Header;
 exports.HeaderButton = HeaderButton;
@@ -3038,15 +3097,16 @@ exports.PropertiesPanel = PropertiesPanel;
 exports.PropertiesPanelContext = LayoutContext;
 exports.SelectEntry = SelectEntry;
 exports.SimpleEntry = Simple;
+exports.TemplatingEntry = TemplatingEntry;
 exports.TextAreaEntry = TextAreaEntry;
 exports.TextFieldEntry = TextfieldEntry;
 exports.ToggleSwitchEntry = ToggleSwitchEntry;
 exports.isCheckboxEntryEdited = isEdited$8;
 exports.isFeelEntryEdited = isEdited$7;
-exports.isFeelTemplatingEntryEdited = isEdited$6;
 exports.isNumberFieldEntryEdited = isEdited$5;
 exports.isSelectEntryEdited = isEdited$4;
 exports.isSimpleEntryEdited = isEdited$3;
+exports.isTemplatingEntryEdited = isEdited$6;
 exports.isTextAreaEntryEdited = isEdited$2;
 exports.isTextFieldEntryEdited = isEdited$1;
 exports.isToggleSwitchEntryEdited = isEdited;