@bpmn-io/properties-panel 1.1.1 → 1.3.0

package/dist/index.js

@@ -2042,6 +2042,7 @@ function NumberField(props) {
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
  * @param {String} props.step
+ * @param {Function} props.validate
  */
 function NumberFieldEntry(props) {
   const {
@@ -2057,25 +2058,55 @@ function NumberFieldEntry(props) {
     setValue,
     step,
     onFocus,
-    onBlur
+    onBlur,
+    validate
   } = props;
-  const value = getValue(element);
+  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
+  const globalError = useError(id);
+  const [localError, setLocalError] = hooks.useState(null);
+  let value = getValue(element);
+  const previousValue = usePrevious(value);
+  hooks.useEffect(() => {
+    if (minDash.isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setLocalError(newValidationError);
+    }
+  }, [value]);
+  const onInput = newValue => {
+    let newValidationError = null;
+    if (minDash.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 jsxRuntime.jsxs("div", {
-    class: "bio-properties-panel-entry",
+    class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
     children: [jsxRuntime.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), jsxRuntime.jsx(Description, {
+    }, element), error && jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsxRuntime.jsx(Description, {
       forId: id,
       element: element,
       value: description
@@ -2264,6 +2295,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,
@@ -2275,7 +2310,8 @@ function TextArea(props) {
     disabled,
     monospace,
     onFocus,
-    onBlur
+    onBlur,
+    autoResize
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value);
   const ref = useShowEntryEvent(id);
@@ -2286,8 +2322,12 @@ function TextArea(props) {
   }, [onInput, debounce]);
   const handleInput = e => {
     handleInputCallback(e);
+    autoResize && resizeToContents(e.target);
     setLocalValue(e.target.value);
   };
+  hooks.useLayoutEffect(() => {
+    autoResize && resizeToContents(ref.current);
+  }, []);
   hooks.useEffect(() => {
     if (value === localValue) {
       return;
@@ -2305,7 +2345,7 @@ function TextArea(props) {
       id: prefixId$2(id),
       name: id,
       spellCheck: "false",
-      class: classnames__default["default"]('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : ''),
+      class: classnames__default["default"]('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
       onInput: handleInput,
       onFocus: onFocus,
       onBlur: onBlur,
@@ -2345,7 +2385,8 @@ function TextAreaEntry(props) {
     monospace,
     disabled,
     onFocus,
-    onBlur
+    onBlur,
+    autoResize
   } = props;
   const value = getValue(element);
   const error = useError(id);
@@ -2362,7 +2403,8 @@ function TextAreaEntry(props) {
       rows: rows,
       debounce: debounce,
       monospace: monospace,
-      disabled: disabled
+      disabled: disabled,
+      autoResize: autoResize
     }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error