@bpmn-io/properties-panel 1.1.1 → 1.3.0

package/assets/properties-panel.css

@@ -455,6 +455,10 @@ textarea.bio-properties-panel-input,
   width: 100%;
 }
 
+textarea.bio-properties-panel-input.auto-resize {
+  min-height: 28px;
+}
+
 .bio-properties-panel-input:focus,
 .bio-properties-panel-input:focus-within {
   outline: none;

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { useContext, useRef, useEffect, useMemo, useState, useCallback } from '../preact/hooks';
+import { useContext, useRef, useEffect, useMemo, useState, useCallback, 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';
@@ -2033,6 +2033,7 @@ function NumberField(props) {
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
  * @param {String} props.step
+ * @param {Function} props.validate
  */
 function NumberFieldEntry(props) {
   const {
@@ -2048,25 +2049,55 @@ function NumberFieldEntry(props) {
     setValue,
     step,
     onFocus,
-    onBlur
+    onBlur,
+    validate
   } = props;
-  const value = getValue(element);
+  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: "bio-properties-panel-entry",
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
     children: [jsx(NumberField, {
       debounce: debounce,
       disabled: disabled,
       id: id,
       label: label,
-      onInput: setValue,
       onFocus: onFocus,
       onBlur: onBlur,
+      onInput: onInput,
       max: max,
       min: min,
       step: step,
       value: value
-    }, element), jsx(Description, {
+    }, element), error && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsx(Description, {
       forId: id,
       element: element,
       value: description
@@ -2255,6 +2286,10 @@ function prefixId$3(id) {
   return `bio-properties-panel-${id}`;
 }
 
+function resizeToContents(element) {
+  element.style.height = 'auto';
+  element.style.height = Math.min(element.scrollHeight + 2, 150) + 'px';
+}
 function TextArea(props) {
   const {
     id,
@@ -2266,7 +2301,8 @@ function TextArea(props) {
     disabled,
     monospace,
     onFocus,
-    onBlur
+    onBlur,
+    autoResize
   } = props;
   const [localValue, setLocalValue] = useState(value);
   const ref = useShowEntryEvent(id);
@@ -2277,8 +2313,12 @@ function TextArea(props) {
   }, [onInput, debounce]);
   const handleInput = e => {
     handleInputCallback(e);
+    autoResize && resizeToContents(e.target);
     setLocalValue(e.target.value);
   };
+  useLayoutEffect(() => {
+    autoResize && resizeToContents(ref.current);
+  }, []);
   useEffect(() => {
     if (value === localValue) {
       return;
@@ -2296,7 +2336,7 @@ function TextArea(props) {
       id: prefixId$2(id),
       name: id,
       spellCheck: "false",
-      class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : ''),
+      class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
       onInput: handleInput,
       onFocus: onFocus,
       onBlur: onBlur,
@@ -2336,7 +2376,8 @@ function TextAreaEntry(props) {
     monospace,
     disabled,
     onFocus,
-    onBlur
+    onBlur,
+    autoResize
   } = props;
   const value = getValue(element);
   const error = useError(id);
@@ -2353,7 +2394,8 @@ function TextAreaEntry(props) {
       rows: rows,
       debounce: debounce,
       monospace: monospace,
-      disabled: disabled
+      disabled: disabled,
+      autoResize: autoResize
     }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error