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

package/dist/index.es.js

@@ -1060,7 +1060,7 @@ function EditorHtml(props) {
         class: "fjs-form-field-placeholder",
         children: [jsx(Icon, {
           viewBox: "0 0 54 54"
-        }), "Html is empty"]
+        }), "Html view is empty"]
       })
     });
   }
@@ -1071,7 +1071,7 @@ function EditorHtml(props) {
         class: "fjs-form-field-placeholder",
         children: [jsx(Icon, {
           viewBox: "0 0 54 54"
-        }), "Html is populated by an expression"]
+        }), "Html view is populated by an expression"]
       })
     });
   }
@@ -1082,7 +1082,7 @@ function EditorHtml(props) {
         class: "fjs-form-field-placeholder",
         children: [jsx(Icon, {
           viewBox: "0 0 54 54"
-        }), "Html is templated"]
+        }), "Html view is templated"]
       })
     });
   }
@@ -1163,13 +1163,14 @@ function EditorExpressionField(props) {
     field
   } = props;
   const {
-    expression = ''
+    expression = '',
+    key
   } = field;
   const Icon = 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 jsx("div", {
     class: editorFormFieldClasses(type),
@@ -1415,7 +1416,6 @@ const SlotFillRoot = props => {
   return jsx(SlotContext.Provider, {
     value: slotContext,
     children: jsx(FillContext.Provider, {
-      /* @ts-expect-error */
       value: fillContext,
       children: props.children
     })
@@ -6148,6 +6148,7 @@ const useBufferedFocus = function (editor, ref) {
 };
 const CodeEditor = forwardRef((props, ref) => {
   const {
+    contentAttributes,
     enableGutters,
     value,
     onInput,
@@ -6193,7 +6194,8 @@ const CodeEditor = forwardRef((props, ref) => {
       tooltipContainer: tooltipContainer,
       value: localValue,
       variables: variables,
-      extensions: [...(enableGutters ? [lineNumbers()] : []), EditorView.lineWrapping]
+      extensions: [...(enableGutters ? [lineNumbers()] : []), EditorView.lineWrapping],
+      contentAttributes
     });
     setEditor(editor);
     return () => {
@@ -7276,9 +7278,12 @@ function FeelTextfieldComponent(props) {
         disabled: feel !== 'optional' || disabled,
         onClick: handleFeelToggle
       }), feelActive ? jsx(CodeEditor, {
-        id: prefixId$5(id),
         name: id,
         onInput: handleLocalInput,
+        contentAttributes: {
+          'id': prefixId$5(id),
+          'aria-label': label
+        },
         disabled: disabled,
         popupOpen: popuOpen,
         onFeelToggle: () => {
@@ -8976,15 +8981,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));
@@ -9012,8 +9017,8 @@ function hasOptionsGroupsConfigured(formFieldDefinition) {
 }
 
 /**
-  * @param {string} path
-  */
+ * @param {string} path
+ */
 function hasIntegerPathSegment(path) {
   return path.split('.').some(segment => /^\d+$/.test(segment));
 }
@@ -10460,9 +10465,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.';
@@ -10542,7 +10547,7 @@ function getTooltip$1() {
     }), jsx("p", {
       children: "Please make sure that the URL is safe as it might impose security risks."
     }), jsxs("p", {
-      children: ["Not all external sources can be displayed in the iFrame. Read more about it in the ", jsx("a", {
+      children: ["Not all external sources can be displayed in the iFrame. Read more about it in the", ' ', jsx("a", {
         target: "_blank",
         href: "https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options",
         children: "X-FRAME-OPTIONS documentation"
@@ -10552,9 +10557,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;
@@ -10657,7 +10662,7 @@ function Text(props) {
   });
 }
 const description$1 = jsxs(Fragment$1, {
-  children: ["Supports markdown and templating. ", jsx("a", {
+  children: ["Supports markdown and templating.", ' ', jsx("a", {
     href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
     target: "_blank",
     children: "Learn more"
@@ -10713,17 +10718,17 @@ function Content(props) {
 // helpers //////////
 
 const description = jsxs(Fragment$1, {
-  children: ["Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component. ", 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.", ' ', 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 === '') {
@@ -11570,9 +11575,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.';
@@ -12024,9 +12029,9 @@ function Source(props) {
 // helper ////////////////
 
 /**
-   * @param {string|void} value
-   * @returns {string|null}
-   */
+ * @param {string|void} value
+ * @returns {string|null}
+ */
 const validate$3 = value => {
   if (!isString(value) || value.length === 0) {
     return 'Must not be empty.';
@@ -12072,8 +12077,8 @@ function Pagination(props) {
   };
 
   /**
-    * @param {boolean} value
-    */
+   * @param {boolean} value
+   */
   const setValue = value => {
     value ? editField(field, path, defaultRowCount) : editField(field, path, undefined);
   };
@@ -12138,9 +12143,9 @@ function RowCount(props) {
 // helpers //////////
 
 /**
-   * @param {string|void} value
-   * @returns {string|null}
-   */
+ * @param {string|void} value
+ * @returns {string|null}
+ */
 const validate$2 = value => {
   if (isNil(value)) {
     return null;
@@ -12285,10 +12290,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;
@@ -12322,9 +12327,9 @@ function ColumnsExpression(props) {
 // helpers //////////
 
 /**
-   * @param {string|void} value
-   * @returns {string|null}
-   */
+ * @param {string|void} value
+ * @returns {string|null}
+ */
 const validate$1 = value => {
   if (!isString(value) || value.length === 0 || value === '=') {
     return 'Must not be empty.';
@@ -12369,10 +12374,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;
@@ -12402,10 +12407,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;
@@ -12430,9 +12435,9 @@ function Key(props) {
 // helpers //////////////////////
 
 /**
-  * @param {string|void} value
-  * @returns {string|null}
-  */
+ * @param {string|void} value
+ * @returns {string|null}
+ */
 function validate(value) {
   if (!isString(value) || value.length === 0) {
     return 'Must not be empty.';
@@ -13111,7 +13116,7 @@ const Advisory = props => {
 function getTooltip() {
   return jsx(Fragment$1, {
     children: jsxs("p", {
-      children: ["Allow the iframe to access more functionality of your browser, details regarding the various options can be found in the ", jsx("a", {
+      children: ["Allow the iframe to access more functionality of your browser, details regarding the various options can be found in the", ' ', jsx("a", {
         target: "_blank",
         href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe",
         children: "MDN iFrame documentation."
@@ -13149,8 +13154,8 @@ function TableHeaderGroups(field, editField) {
   const areStaticColumnsEnabled = isArray(get(field, ['columns']));
 
   /**
-    * @type {Array<Group>}
-    */
+   * @type {Array<Group>}
+   */
   const groups = [{
     id: `${fieldId}-columnsSource`,
     label: 'Headers source',
@@ -13222,7 +13227,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
@@ -13623,16 +13628,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 {