chore: bump [email protected]

package.json

@@ -63,7 +63,7 @@
     "@babel/core": "^7.18.10",
     "@babel/plugin-transform-react-jsx": "^7.14.5",
     "@babel/plugin-transform-react-jsx-source": "^7.14.5",
-    "@bpmn-io/properties-panel": "^3.13.0",
+    "@bpmn-io/properties-panel": "^3.18.0",
     "@carbon/react": "^1.42.1",
     "@carbon/styles": "^1.42.1",
     "@playwright/test": "^1.40.1",

packages/form-js-editor/package.json

@@ -48,7 +48,7 @@
   "dependencies": {
     "@bpmn-io/draggle": "^4.0.0",
     "@bpmn-io/form-js-viewer": "^1.6.4",
-    "@bpmn-io/properties-panel": "^3.13.0",
+    "@bpmn-io/properties-panel": "^3.18.0",
     "array-move": "^3.0.1",
     "big.js": "^6.2.1",
     "ids": "^1.0.0",

packages/form-js-editor/src/features/properties-panel/Util.js

@@ -27,6 +27,11 @@ export function countDecimals(number) {
   return num.toFixed().split('.')[1].length || 0;
 }
 
+/**
+ *
+ * @param {unknown} value
+ * @returns {boolean}
+ */
 export function isValidNumber(value) {
   return (typeof value === 'number' || typeof value === 'string') && value !== '' && !isNaN(Number(value));
 }

packages/form-js-editor/src/features/properties-panel/entries/ColumnEntry.js

@@ -17,8 +17,7 @@ export function ColumnEntry(props) {
     editField,
     field,
     idPrefix,
-    index,
-    validateFactory
+    index
   } = props;
 
   const entries = [
@@ -28,17 +27,15 @@ export function ColumnEntry(props) {
       field,
       id: idPrefix + '-label',
       idPrefix,
-      index,
-      validateFactory
+      index
     },
     {
       component: Key,
       editField,
       field,
       id: idPrefix + '-key',
       idPrefix,
-      index,
-      validateFactory
+      index
     }
   ];
 

packages/form-js-editor/src/features/properties-panel/entries/ColumnsEntry.js

@@ -8,6 +8,7 @@ import {
 } from '@bpmn-io/properties-panel';
 
 import { MIN_COLUMNS } from '../../../core/FormLayoutValidator';
+import { useCallback } from 'preact/hooks';
 
 
 export const AUTO_OPTION_VALUE = '';
@@ -41,9 +42,9 @@ function Columns(props) {
   const debounce = useService('debounce');
   const formLayoutValidator = useService('formLayoutValidator');
 
-  const validate = (value) => {
+  const validate = useCallback((value) => {
     return formLayoutValidator.validateField(field, value ? parseInt(value) : null);
-  };
+  }, [ field, formLayoutValidator ]);
 
   const setValue = (value, error) => {
 

packages/form-js-editor/src/features/properties-panel/entries/ColumnsExpressionEntry.js

@@ -54,19 +54,6 @@ function ColumnsExpression(props) {
     editField(field, PATH, value);
   };
 
-  /**
-   * @param {string|void} value
-   * @returns {string|null}
-   */
-  const validate = (value) => {
-
-    if (!isString(value) || value.length === 0 || value === '=') {
-      return 'Must not be empty.';
-    }
-
-    return null;
-  };
-
   const schema = '[\n  {\n    "key": "column_1",\n    "label": "Column 1"\n  }\n]';
 
   const tooltip = <div>
@@ -90,3 +77,19 @@ function ColumnsExpression(props) {
     validate,
   });
 }
+
+
+// helpers //////////
+
+/**
+   * @param {string|void} value
+   * @returns {string|null}
+   */
+const validate = (value) => {
+
+  if (!isString(value) || value.length === 0 || value === '=') {
+    return 'Must not be empty.';
+  }
+
+  return null;
+};

packages/form-js-editor/src/features/properties-panel/entries/CustomValueEntry.js

@@ -3,6 +3,7 @@ import { get } from 'min-dash';
 import { useService } from '../hooks';
 
 import { TextFieldEntry } from '@bpmn-io/properties-panel';
+import { useCallback } from 'preact/hooks';
 
 
 export function CustomValueEntry(props) {
@@ -63,14 +64,20 @@ function Key(props) {
     return Object.keys(get(field, [ 'properties' ]))[ index ];
   };
 
+  const validate = useCallback(
+    () => validateFactory(Object.keys(get(field, [ 'properties' ]))[index]),
+    [ validateFactory, field, index ],
+  );
+
+
   return TextFieldEntry({
     debounce,
     element: field,
     getValue,
     id,
     label: 'Key',
     setValue,
-    validate: validateFactory(getValue())
+    validate
   });
 }
 

packages/form-js-editor/src/features/properties-panel/entries/DefaultValueEntry.js

@@ -14,6 +14,7 @@ import Big from 'big.js';
 import { useService } from '../hooks';
 
 import { countDecimals, INPUTS, isValidNumber, OPTIONS_INPUTS } from '../Util';
+import { useCallback } from 'preact/hooks';
 
 export const EMPTY_OPTION = null;
 
@@ -178,18 +179,30 @@ function DefaultValueNumber(props) {
 
   const decimalDigitsSet = decimalDigits || decimalDigits === 0;
 
+  const validate = useCallback(
+    (value) => {
+      if (value === undefined || value === null) {
+        return;
+      }
+
+      if (!isValidNumber(value)) {
+        return 'Should be a valid number';
+      }
+      if (decimalDigitsSet && countDecimals(value) > decimalDigits) {
+        return `Should not contain more than ${decimalDigits} decimal digits`;
+      }
+    },
+    [ decimalDigitsSet, decimalDigits ],
+  );
+
   return TextFieldEntry({
     debounce,
     label,
     element: field,
     getValue,
     id,
     setValue,
-    validate: (value) => {
-      if (value === undefined || value === null) return;
-      if (!isValidNumber(value)) return 'Should be a valid number';
-      if (decimalDigitsSet && countDecimals(value) > decimalDigits) return `Should not contain more than ${decimalDigits} decimal digits`;
-    }
+    validate
   });
 }
 

packages/form-js-editor/src/features/properties-panel/entries/HeightEntry.js

@@ -65,10 +65,27 @@ function Height(props) {
     id,
     getValue,
     setValue,
-    validate: (value) => {
-      if (value === undefined || value === null) return;
-      if (value < 1) return 'Should be greater than zero.';
-      if (!Number.isInteger(value)) return 'Should be an integer.';
-    }
+    validate
   });
 }
+
+// helpers //////////
+
+/**
+  * @param {number|void} value
+  * @returns {string|null}
+  */
+const validate = (value) => {
+  if (typeof value !== 'number') {
+    return null;
+  }
+
+  if (!Number.isInteger(value)) {
+    return 'Should be an integer.';
+  }
+
+  if (value < 1) {
+    return 'Should be greater than zero.';
+  }
+};
+

packages/form-js-editor/src/features/properties-panel/entries/HtmlEntry.js

@@ -45,15 +45,7 @@ function Content(props) {
     return editField(field, path, value || '');
   };
 
-  const validate = (value) => {
 
-    // allow empty state
-    if (value === undefined || value === null || value === '') { return null; }
-
-    // allow expressions
-    if (value.startsWith('=')) { return null; }
-
-  };
 
   return FeelTemplatingEntry({
     debounce,
@@ -69,4 +61,22 @@ function Content(props) {
   });
 }
 
-const description = <>Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component. <a href="https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/" target="_blank">Learn more</a></>;
+// helpers //////////
+
+const description = <>Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component. <a href="https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/" target="_blank">Learn more</a></>;
+
+/**
+  * @param {string|void} value
+  * @returns {string|null}
+  */
+const validate = (value) => {
+
+  // allow empty state
+  if (typeof value !== 'string' || value === '') {
+    return null;
+  }
+
+  // allow expressions
+  if (value.startsWith('=')) { return null; }
+
+};

packages/form-js-editor/src/features/properties-panel/entries/IFrameUrlEntry.js

@@ -47,16 +47,6 @@ function Url(props) {
     return editField(field, path, value);
   };
 
-  const validate = (value) => {
-    if (!value || value.startsWith('=')) {
-      return;
-    }
-
-    if (!HTTPS_PATTERN.test(value)) {
-      return 'For security reasons the URL must start with "https".';
-    }
-  };
-
   return FeelTemplatingEntry({
     debounce,
     element: field,
@@ -88,4 +78,18 @@ function getTooltip() {
       </p>
     </>
   );
-}
+}
+
+/**
+  * @param {string|void} value
+  * @returns {string|null}
+  */
+const validate = (value) => {
+  if (!value || value.startsWith('=')) {
+    return;
+  }
+
+  if (!HTTPS_PATTERN.test(value)) {
+    return 'For security reasons the URL must start with "https".';
+  }
+};