@bpmn-io/properties-panel 0.20.0 → 0.20.1

package/assets/properties-panel.css

@@ -517,7 +517,12 @@ textarea.bio-properties-panel-input {
   background-color: var(--input-error-background-color);
 }
 
-.bio-properties-panel-entry.has-error .bio-properties-panel-input:focus {
+.bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator {
+  border-color: var(--input-error-border-color);
+}
+
+.bio-properties-panel-entry.has-error .bio-properties-panel-input:focus,
+.bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator:focus {
   border-color: var(--input-error-focus-border-color);
 }
 

package/dist/index.esm.js

@@ -10,7 +10,7 @@ var ArrowIcon = function ArrowIcon(props) {
   return jsx("svg", { ...props,
     children: jsx("path", {
       fillRule: "evenodd",
-      d: "m11.657 8-4.95 4.95a1 1 0 0 1-1.414-1.414L8.828 8 5.293 4.464A1 1 0 1 1 6.707 3.05L11.657 8z"
+      d: "m11.657 8-4.95 4.95a1 1 0 0 1-1.414-1.414L8.828 8 5.293 4.464A1 1 0 1 1 6.707 3.05L11.657 8Z"
     })
   });
 };
@@ -25,7 +25,7 @@ var CreateIcon = function CreateIcon(props) {
   return jsx("svg", { ...props,
     children: jsx("path", {
       fillRule: "evenodd",
-      d: "M9 13V9h4a1 1 0 0 0 0-2H9V3a1 1 0 1 0-2 0v4H3a1 1 0 1 0 0 2h4v4a1 1 0 0 0 2 0z"
+      d: "M9 13V9h4a1 1 0 0 0 0-2H9V3a1 1 0 1 0-2 0v4H3a1 1 0 1 0 0 2h4v4a1 1 0 0 0 2 0Z"
     })
   });
 };
@@ -40,7 +40,7 @@ var DeleteIcon = function DeleteIcon(props) {
   return jsx("svg", { ...props,
     children: jsx("path", {
       fillRule: "evenodd",
-      d: "M12 6v7c0 1.1-.4 1.55-1.5 1.55h-5C4.4 14.55 4 14.1 4 13V6h8zm-1.5 1.5h-5v4.3c0 .66.5 1.2 1.111 1.2H9.39c.611 0 1.111-.54 1.111-1.2V7.5zM13 3h-2l-1-1H6L5 3H3v1.5h10V3z"
+      d: "M12 6v7c0 1.1-.4 1.55-1.5 1.55h-5C4.4 14.55 4 14.1 4 13V6h8Zm-1.5 1.5h-5v4.3c0 .66.5 1.2 1.111 1.2H9.39c.611 0 1.111-.54 1.111-1.2V7.5ZM13 3h-2l-1-1H6L5 3H3v1.5h10V3Z"
     })
   });
 };
@@ -56,7 +56,7 @@ var ExternalLinkIcon = function ExternalLinkIcon(props) {
     children: jsx("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
-      d: "M12.637 12.637v-4.72h1.362v4.721c0 .36-.137.676-.411.95-.275.275-.591.412-.95.412H3.362c-.38 0-.703-.132-.967-.396A1.315 1.315 0 0 1 2 12.638V3.362c0-.38.132-.703.396-.967S2.982 2 3.363 2h4.553v1.363H3.363v9.274h9.274zM14 2H9.28l-.001 1.362h2.408L5.065 9.984l.95.95 6.622-6.622v2.409H14V2z",
+      d: "M12.637 12.637v-4.72h1.362v4.721c0 .36-.137.676-.411.95-.275.275-.591.412-.95.412H3.362c-.38 0-.703-.132-.967-.396A1.315 1.315 0 0 1 2 12.638V3.362c0-.38.132-.703.396-.967S2.982 2 3.363 2h4.553v1.363H3.363v9.274h9.274ZM14 2H9.28l-.001 1.362h2.408L5.065 9.984l.95.95 6.622-6.622v2.409H14V2Z",
       fill: "#818798"
     })
   });
@@ -72,15 +72,15 @@ ExternalLinkIcon.defaultProps = {
 var FeelRequiredIcon = function FeelRequiredIcon(props) {
   return jsxs("svg", { ...props,
     children: [jsx("path", {
-      d: "M5.8 7.06V5.95h4.307v1.11H5.8zm0 3.071v-1.11h4.307v1.11H5.8z",
+      d: "M5.8 7.06V5.95h4.307v1.11H5.8Zm0 3.071v-1.11h4.307v1.11H5.8Z",
       fill: "currentColor"
     }), jsx("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
-      d: "M8 3.268A4.732 4.732 0 1 0 12.732 8H14a6 6 0 1 1-6-6v1.268z",
+      d: "M8 3.268A4.732 4.732 0 1 0 12.732 8H14a6 6 0 1 1-6-6v1.268Z",
       fill: "currentColor"
     }), jsx("path", {
-      d: "m11.28 6.072-.832-.56 1.016-1.224L10 3.848l.312-.912 1.392.584L11.632 2h1.032l-.072 1.52 1.392-.584.312.912-1.464.44 1.008 1.224-.832.552-.864-1.296-.864 1.304z",
+      d: "m11.28 6.072-.832-.56 1.016-1.224L10 3.848l.312-.912 1.392.584L11.632 2h1.032l-.072 1.52 1.392-.584.312.912-1.464.44 1.008 1.224-.832.552-.864-1.296-.864 1.304Z",
       fill: "currentColor"
     })]
   });
@@ -95,12 +95,12 @@ FeelRequiredIcon.defaultProps = {
 var FeelOptionalIcon = function FeelOptionalIcon(props) {
   return jsxs("svg", { ...props,
     children: [jsx("path", {
-      d: "M5.845 7.04V5.93h4.307v1.11H5.845zm0 3.07V9h4.307v1.11H5.845z",
+      d: "M5.845 7.04V5.93h4.307v1.11H5.845Zm0 3.07V9h4.307v1.11H5.845Z",
       fill: "currentColor"
     }), jsx("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
-      d: "M3.286 8a4.714 4.714 0 1 0 9.428 0 4.714 4.714 0 0 0-9.428 0zM8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2z",
+      d: "M3.286 8a4.714 4.714 0 1 0 9.428 0 4.714 4.714 0 0 0-9.428 0ZM8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Z",
       fill: "currentColor"
     })]
   });
@@ -4965,6 +4965,7 @@ const CodeEditor = forwardRef((props, ref) => {
     value,
     onInput,
     onFeelToggle,
+    onLint = () => {},
     disabled,
     variables
   } = props;
@@ -5001,11 +5002,13 @@ const CodeEditor = forwardRef((props, ref) => {
       container: inputRef.current,
       onChange: handleInput,
       onKeyDown: onKeyDown,
+      onLint: onLint,
       value: localValue,
       variables: variables
     });
     setEditor(editor);
     return () => {
+      onLint([]);
       inputRef.current.innerHTML = '';
       setEditor(null);
     };
@@ -5022,12 +5025,18 @@ const CodeEditor = forwardRef((props, ref) => {
     editor.setValue(value);
     setLocalValue(value);
   }, [value]);
+
+  const handleClick = () => {
+    ref.current.focus();
+  };
+
   return jsx("div", {
     class: classnames('bio-properties-panel-feel-editor-container', disabled ? 'disabled' : null),
     children: jsx("div", {
       name: props.name,
       class: classnames('bio-properties-panel-input', localValue ? 'edited' : null),
-      ref: inputRef
+      ref: inputRef,
+      onClick: handleClick
     })
   });
 });
@@ -5091,6 +5100,7 @@ function FeelTextfield(props) {
     id,
     label,
     onInput,
+    onError,
     feel,
     value = '',
     disabled = false,
@@ -5156,6 +5166,16 @@ function FeelTextfield(props) {
     }
   };
 
+  const handleLint = useStaticCallback(lint => {
+    if (!(lint && lint.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);
@@ -5236,8 +5256,9 @@ function FeelTextfield(props) {
         disabled: disabled,
         onFeelToggle: () => {
           handleFeelToggle();
-          setFocus();
+          setFocus(true);
         },
+        onLint: handleLint,
         value: feelOnlyValue,
         variables: props.variables,
         ref: editorRef
@@ -5360,6 +5381,7 @@ function FeelEntry(props) {
   } = 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(() => {
@@ -5386,13 +5408,16 @@ function FeelEntry(props) {
 
     setValidationError(newValidationError);
   });
+  const onError = useCallback(err => {
+    setLocalError(err);
+  }, []);
 
   if (previousValue === value && validationError) {
     value = cachedInvalidValue;
   }
 
   const temporaryError = useError(id);
-  const error = temporaryError || validationError;
+  const error = temporaryError || validationError || localError;
   return jsxs("div", {
     class: classnames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
@@ -5403,6 +5428,7 @@ function FeelEntry(props) {
       id: id,
       label: label,
       onInput: onInput,
+      onError: onError,
       example: props.example,
       show: show,
       value: value,