@bpmn-io/form-js-editor 1.8.2 → 1.8.4

package/dist/assets/form-js-editor.css

@@ -10,10 +10,7 @@
   --color-dragula-background: var(--cds-highlight, var(--color-blue-205-100-95));
   --color-dragula-border: var(--cds-border-interactive, var(--color-blue-205-100-45));
   --color-dragula-mirror-background: var(--cds-background, var(--color-white));
-  --color-dragula-mirror-border: var(
-    --cds-border-strong,
-    var(--cds-border-strong-01, var(--color-grey-225-10-90))
-  );
+  --color-dragula-mirror-border: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-90)));
   --color-dragula-error-background: var(--color-red-360-100-92);
   --color-dragula-error-border: var(--cds-text-error, var(--color-red-360-100-45));
 }
@@ -21,43 +18,22 @@
 .fjs-palette-container {
   --color-palette-text: var(--cds-text-primary, var(--color-grey-225-10-15));
   --color-palette-container-background: var(--cds-background, var(--color-grey-225-10-95));
-  --color-palette-container-border: var(
-    --cds-border-strong,
-    var(--cds-border-strong-01, var(--color-grey-225-10-80))
-  );
+  --color-palette-container-border: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-80)));
   --color-palette-header: var(--cds-text-primary, var(--color-text));
   --color-palette-header-background: var(--cds-background, var(--color-grey-225-10-95));
-  --color-palette-header-border: var(
-    --cds-border-strong,
-    var(--cds-border-strong-01, var(--color-grey-225-10-85))
-  );
+  --color-palette-header-border: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-85)));
   --color-palette-search: var(--color-palette-text);
   --color-palette-search-icon: var(--cds-icon-secondary, var(--color-grey-225-10-35));
   --color-palette-search-icon-hover: var(--cds-icon-primary, var(--color-grey-225-10-15));
-  --color-palette-search-background: var(
-    --cds-field,
-    var(--cds-field-01, var(--color-white))
-  );
-  --color-palette-search-border: var(
-    --cds-border-strong,
-    var(--cds-border-strong-01, var(--color-grey-225-10-75))
-  );
-  --color-palette-search-focus-background: var(
-    --cds-field,
-    var(--cds-field-01, var(--color-blue-205-100-95))
-  );
+  --color-palette-search-background: var(--cds-field, var(--cds-field-01, var(--color-white)));
+  --color-palette-search-border: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-75)));
+  --color-palette-search-focus-background: var(--cds-field, var(--cds-field-01, var(--color-blue-205-100-95)));
   --color-palette-search-focus-border: var(--cds-focus, var(--color-blue-205-100-50));
   --color-palette-search-clear-focus-border: var(--cds-focus, var(--color-grey-225-10-50));
   --color-palette-group-title: var(--color-palette-text);
   --color-palette-field: var(--color-palette-text);
-  --color-palette-field-background: var(
-    --cds-layer,
-    var(--cds-layer-01, var(--color-white))
-  );
-  --color-palette-field-border: var(
-    --cds-border-subtle,
-    var(--cds-border-subtle-01, var(--color-grey-225-10-93))
-  );
+  --color-palette-field-background: var(--cds-layer, var(--cds-layer-01, var(--color-white)));
+  --color-palette-field-border: var(--cds-border-subtle, var(--cds-border-subtle-01, var(--color-grey-225-10-93)));
   --color-palette-field-focus: var(--cds-border-interactive, var(--color-blue-205-100-45));
   --color-palette-field-hover-background: var(--cds-background-hover, var(--color-grey-225-10-90));
   --color-palette-field-hover-border: var(
@@ -85,35 +61,17 @@
   --text-error-color: var(--cds-text-color, var(--color-red-360-100-45));
   --link-color: var(--cds-text-primary, var(--color-blue-205-100-50));
   --description-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
-  --description-code-background-color: var(
-    --cds-layer,
-    var(--cds-layer-01, var(--color-grey-225-10-97))
-  );
-  --description-code-border-color: var(
-    --cds-border-strong,
-    var(--cds-border-strong-01, var(--color-grey-225-10-85))
-  );
+  --description-code-background-color: var(--cds-layer, var(--cds-layer-01, var(--color-grey-225-10-97)));
+  --description-code-border-color: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-85)));
   --description-list-item-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
   --placeholder-color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
-  --placeholder-background-color: var(
-    --cds-layer,
-    var(--cds-layer-01, var(--color-grey-225-10-95))
-  );
-  --header-background-color: var(
-    --cds-layer,
-    var(--cds-layer-01, var(--color-grey-225-10-95))
-  );
+  --placeholder-background-color: var(--cds-layer, var(--cds-layer-01, var(--color-grey-225-10-95)));
+  --header-background-color: var(--cds-layer, var(--cds-layer-01, var(--color-grey-225-10-95)));
   --header-icon-fill-color: var(--cds-icon-primary, var(--color-grey-225-10-15));
   --header-bottom-border-color: var(--color-grey-225-10-75);
   --group-background-color: var(--cds-background, var(--color-white));
-  --group-bottom-border-color: var(
-    --cds-border-strong,
-    var(--cds-border-strong-01, var(--color-grey-225-10-75))
-  );
-  --sticky-group-background-color: var(
-    --cds-layer,
-    var(--cds-layer-01, var(--color-grey-225-10-95))
-  );
+  --group-bottom-border-color: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-75)));
+  --sticky-group-background-color: var(--cds-layer, var(--cds-layer-01, var(--color-grey-225-10-95)));
   --sticky-group-bottom-border-color: var(
     --cds-border-strong,
     var(--cds-border-strong-01, var(--color-grey-225-10-75))
@@ -125,37 +83,19 @@
   --remove-entry-fill-color: var(--color-red-360-100-45);
   --remove-entry-hover-background-color: var(--color-red-360-100-92);
   --arrow-fill-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
-  --arrow-hover-background-color: var(
-    --cds-layer,
-    var(--cds-layer-01, var(--color-grey-225-10-95))
-  );
+  --arrow-hover-background-color: var(--cds-layer, var(--cds-layer-01, var(--color-grey-225-10-95)));
   --dot-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
   --list-badge-color: var(--cds-text-inverse, var(--color-white));
   --list-badge-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
-  --input-background-color: var(
-    --cds-field,
-    var(--cds-field-01, var(--color-grey-225-10-97))
-  );
-  --input-border-color: var(
-    --cds-border-strong,
-    var(--cds-border-strong-01, var(--color-grey-225-10-75))
-  );
-  --input-focus-background-color: var(
-    --cds-field,
-    var(--cds-field-01, var(--color-blue-205-100-95))
-  );
+  --input-background-color: var(--cds-field, var(--cds-field-01, var(--color-grey-225-10-97)));
+  --input-border-color: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-75)));
+  --input-focus-background-color: var(--cds-field, var(--cds-field-01, var(--color-blue-205-100-95)));
   --input-focus-border-color: var(--cds-focus, var(--color-blue-205-100-50));
-  --input-error-background-color: var(
-    --cds-field,
-    var(--cds-field-01, var(--color-red-360-100-97))
-  );
+  --input-error-background-color: var(--cds-field, var(--cds-field-01, var(--color-red-360-100-97)));
   --input-error-border-color: var(--cds-text-error, var(--color-red-360-100-45));
   --input-error-focus-border-color: var(--cds-text-error, var(--color-red-360-100-45));
   --input-disabled-color: var(--cds-text-disabled, var(--color-grey-225-10-55));
-  --input-disabled-background-color: var(
-    --cds-field,
-    var(--cds-field-01, var(--color-grey-225-10-97))
-  );
+  --input-disabled-background-color: var(--cds-field, var(--cds-field-01, var(--color-grey-225-10-97)));
   --input-disabled-border-color: var(--cds-border-disabled, var(--color-grey-225-10-90));
   --toggle-switch-on-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
   --toggle-switch-off-background-color: var(--cds-toggle-off, var(--color-grey-225-10-75));

package/dist/index.cjs

@@ -1080,7 +1080,7 @@ function EditorHtml(props) {
         class: "fjs-form-field-placeholder",
         children: [jsxRuntime.jsx(Icon, {
           viewBox: "0 0 54 54"
-        }), "Html is empty"]
+        }), "Html view is empty"]
       })
     });
   }
@@ -1091,7 +1091,7 @@ function EditorHtml(props) {
         class: "fjs-form-field-placeholder",
         children: [jsxRuntime.jsx(Icon, {
           viewBox: "0 0 54 54"
-        }), "Html is populated by an expression"]
+        }), "Html view is populated by an expression"]
       })
     });
   }
@@ -1102,7 +1102,7 @@ function EditorHtml(props) {
         class: "fjs-form-field-placeholder",
         children: [jsxRuntime.jsx(Icon, {
           viewBox: "0 0 54 54"
-        }), "Html is templated"]
+        }), "Html view is templated"]
       })
     });
   }
@@ -1183,13 +1183,14 @@ function EditorExpressionField(props) {
     field
   } = props;
   const {
-    expression = ''
+    expression = '',
+    key
   } = field;
   const Icon = formJsViewer.iconsByType('expression');
   const expressionLanguage = useService$1('expressionLanguage');
   let placeholderContent = 'Expression is empty';
   if (expression.trim() && expressionLanguage.isExpression(expression)) {
-    placeholderContent = 'Expression';
+    placeholderContent = `Expression for '${key}'`;
   }
   return jsxRuntime.jsx("div", {
     class: editorFormFieldClasses(type),
@@ -1435,7 +1436,6 @@ const SlotFillRoot = props => {
   return jsxRuntime.jsx(SlotContext.Provider, {
     value: slotContext,
     children: jsxRuntime.jsx(FillContext.Provider, {
-      /* @ts-expect-error */
       value: fillContext,
       children: props.children
     })
@@ -6168,6 +6168,7 @@ const useBufferedFocus = function (editor, ref) {
 };
 const CodeEditor = React.forwardRef((props, ref) => {
   const {
+    contentAttributes,
     enableGutters,
     value,
     onInput,
@@ -6213,7 +6214,8 @@ const CodeEditor = React.forwardRef((props, ref) => {
       tooltipContainer: tooltipContainer,
       value: localValue,
       variables: variables,
-      extensions: [...(enableGutters ? [view.lineNumbers()] : []), view.EditorView.lineWrapping]
+      extensions: [...(enableGutters ? [view.lineNumbers()] : []), view.EditorView.lineWrapping],
+      contentAttributes
     });
     setEditor(editor);
     return () => {
@@ -7296,9 +7298,12 @@ function FeelTextfieldComponent(props) {
         disabled: feel !== 'optional' || disabled,
         onClick: handleFeelToggle
       }), feelActive ? jsxRuntime.jsx(CodeEditor, {
-        id: prefixId$5(id),
         name: id,
         onInput: handleLocalInput,
+        contentAttributes: {
+          'id': prefixId$5(id),
+          'aria-label': label
+        },
         disabled: disabled,
         popupOpen: popuOpen,
         onFeelToggle: () => {
@@ -8996,15 +9001,15 @@ function textToLabel(text) {
 }
 
 /**
-  * @param {string} path
-  */
+ * @param {string} path
+ */
 function isValidDotPath(path) {
   return /^\w+(\.\w+)*$/.test(path);
 }
 
 /**
-  * @param {string} path
-  */
+ * @param {string} path
+ */
 function isProhibitedPath(path) {
   const prohibitedSegments = ['__proto__', 'prototype', 'constructor'];
   return path.split('.').some(segment => prohibitedSegments.includes(segment));
@@ -9032,8 +9037,8 @@ function hasOptionsGroupsConfigured(formFieldDefinition) {
 }
 
 /**
-  * @param {string} path
-  */
+ * @param {string} path
+ */
 function hasIntegerPathSegment(path) {
   return path.split('.').some(segment => /^\d+$/.test(segment));
 }
@@ -10480,9 +10485,9 @@ function Height(props) {
 // helpers //////////
 
 /**
-  * @param {number|void} value
-  * @returns {string|null}
-  */
+ * @param {number|void} value
+ * @returns {string|null}
+ */
 const validate$7 = value => {
   if (typeof value !== 'number') {
     return 'A number is required.';
@@ -10562,7 +10567,7 @@ function getTooltip$1() {
     }), jsxRuntime.jsx("p", {
       children: "Please make sure that the URL is safe as it might impose security risks."
     }), jsxRuntime.jsxs("p", {
-      children: ["Not all external sources can be displayed in the iFrame. Read more about it in the ", jsxRuntime.jsx("a", {
+      children: ["Not all external sources can be displayed in the iFrame. Read more about it in the", ' ', jsxRuntime.jsx("a", {
         target: "_blank",
         href: "https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options",
         children: "X-FRAME-OPTIONS documentation"
@@ -10572,9 +10577,9 @@ function getTooltip$1() {
 }
 
 /**
-  * @param {string|void} value
-  * @returns {string|null}
-  */
+ * @param {string|void} value
+ * @returns {string|null}
+ */
 const validate$6 = value => {
   if (!value || value.startsWith('=')) {
     return;
@@ -10677,7 +10682,7 @@ function Text(props) {
   });
 }
 const description$1 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
-  children: ["Supports markdown and templating. ", jsxRuntime.jsx("a", {
+  children: ["Supports markdown and templating.", ' ', jsxRuntime.jsx("a", {
     href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
     target: "_blank",
     children: "Learn more"
@@ -10733,17 +10738,17 @@ function Content(props) {
 // helpers //////////
 
 const description = jsxRuntime.jsxs(jsxRuntime.Fragment, {
-  children: ["Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component. ", jsxRuntime.jsx("a", {
-    href: "https://docs.camunda.io/docs/next/components/modeler/forms/form-element-library/forms-element-library-html/",
+  children: ["Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component.", ' ', jsxRuntime.jsx("a", {
+    href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/",
     target: "_blank",
     children: "Learn more"
   })]
 });
 
 /**
-  * @param {string|void} value
-  * @returns {string|null}
-  */
+ * @param {string|void} value
+ * @returns {string|null}
+ */
 const validate$5 = value => {
   // allow empty state
   if (typeof value !== 'string' || value === '') {
@@ -11590,9 +11595,9 @@ function InputValuesKey(props) {
 // helpers //////////
 
 /**
-  * @param {string|void} value
-  * @returns {string|null}
-  */
+ * @param {string|void} value
+ * @returns {string|null}
+ */
 const validate$4 = value => {
   if (typeof value !== 'string' || value.length === 0) {
     return 'Must not be empty.';
@@ -12044,9 +12049,9 @@ function Source(props) {
 // helper ////////////////
 
 /**
-   * @param {string|void} value
-   * @returns {string|null}
-   */
+ * @param {string|void} value
+ * @returns {string|null}
+ */
 const validate$3 = value => {
   if (!minDash.isString(value) || value.length === 0) {
     return 'Must not be empty.';
@@ -12092,8 +12097,8 @@ function Pagination(props) {
   };
 
   /**
-    * @param {boolean} value
-    */
+   * @param {boolean} value
+   */
   const setValue = value => {
     value ? editField(field, path, defaultRowCount) : editField(field, path, undefined);
   };
@@ -12158,9 +12163,9 @@ function RowCount(props) {
 // helpers //////////
 
 /**
-   * @param {string|void} value
-   * @returns {string|null}
-   */
+ * @param {string|void} value
+ * @returns {string|null}
+ */
 const validate$2 = value => {
   if (minDash.isNil(value)) {
     return null;
@@ -12305,10 +12310,10 @@ function ColumnsExpression(props) {
   };
 
   /**
-    * @param {string|void} value
-    * @param {string|void} error
-    * @returns {void}
-    */
+   * @param {string|void} value
+   * @param {string|void} error
+   * @returns {void}
+   */
   const setValue = (value, error) => {
     if (error) {
       return;
@@ -12342,9 +12347,9 @@ function ColumnsExpression(props) {
 // helpers //////////
 
 /**
-   * @param {string|void} value
-   * @returns {string|null}
-   */
+ * @param {string|void} value
+ * @returns {string|null}
+ */
 const validate$1 = value => {
   if (!minDash.isString(value) || value.length === 0 || value === '=') {
     return 'Must not be empty.';
@@ -12389,10 +12394,10 @@ function Label(props) {
   const debounce = useService('debounce');
 
   /**
-    * @param {string|void} value
-    * @param {string|void} error
-    * @returns {void}
-    */
+   * @param {string|void} value
+   * @param {string|void} error
+   * @returns {void}
+   */
   const setValue = (value, error) => {
     if (error) {
       return;
@@ -12422,10 +12427,10 @@ function Key(props) {
   const debounce = useService('debounce');
 
   /**
-    * @param {string|void} value
-    * @param {string|void} error
-    * @returns {void}
-    */
+   * @param {string|void} value
+   * @param {string|void} error
+   * @returns {void}
+   */
   const setValue = (value, error) => {
     if (error) {
       return;
@@ -12450,9 +12455,9 @@ function Key(props) {
 // helpers //////////////////////
 
 /**
-  * @param {string|void} value
-  * @returns {string|null}
-  */
+ * @param {string|void} value
+ * @returns {string|null}
+ */
 function validate(value) {
   if (!minDash.isString(value) || value.length === 0) {
     return 'Must not be empty.';
@@ -13131,7 +13136,7 @@ const Advisory = props => {
 function getTooltip() {
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: jsxRuntime.jsxs("p", {
-      children: ["Allow the iframe to access more functionality of your browser, details regarding the various options can be found in the ", jsxRuntime.jsx("a", {
+      children: ["Allow the iframe to access more functionality of your browser, details regarding the various options can be found in the", ' ', jsxRuntime.jsx("a", {
         target: "_blank",
         href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe",
         children: "MDN iFrame documentation."
@@ -13169,8 +13174,8 @@ function TableHeaderGroups(field, editField) {
   const areStaticColumnsEnabled = minDash.isArray(minDash.get(field, ['columns']));
 
   /**
-    * @type {Array<Group>}
-    */
+   * @type {Array<Group>}
+   */
   const groups = [{
     id: `${fieldId}-columnsSource`,
     label: 'Headers source',
@@ -13242,7 +13247,7 @@ class PropertiesProvider {
         return groups;
       }
       const getService = (type, strict = true) => this._injector.get(type, strict);
-      groups = [...groups, GeneralGroup(field, editField, getService), ...TableHeaderGroups(field, editField), SecurityAttributesGroup(field, editField), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ...OptionsGroups(field, editField, getService), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomPropertiesGroup(field, editField)].filter(group => group != null);
+      groups = [...groups, GeneralGroup(field, editField, getService), ...OptionsGroups(field, editField, getService), ...TableHeaderGroups(field, editField), SecurityAttributesGroup(field, editField), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomPropertiesGroup(field, editField)].filter(group => group != null);
       this._filterVisibleEntries(groups, field, getService);
 
       // contract: if a group has no entries or items, it should not be displayed at all
@@ -13643,16 +13648,16 @@ function exportSchema(schema, exporter, schemaVersion) {
   };
 }
 
-/**
- * @typedef { import('./types').CreateFormEditorOptions } CreateFormEditorOptions
+/**
+ * @typedef { import('./types').CreateFormEditorOptions } CreateFormEditorOptions
  */
 
-/**
- * Create a form editor.
- *
- * @param {CreateFormEditorOptions} options
- *
- * @return {Promise<FormEditor>}
+/**
+ * Create a form editor.
+ *
+ * @param {CreateFormEditorOptions} options
+ *
+ * @return {Promise<FormEditor>}
  */
 function createFormEditor(options) {
   const {