@bpmn-io/form-js-editor 1.3.1 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.es.js CHANGED
@@ -517,10 +517,10 @@ function invokeFunction(fn, args) {
517
517
  return fn.apply(null, args);
518
518
  }
519
519
 
520
- /**
521
- * A factory to create a configurable debouncer.
522
- *
523
- * @param {number|boolean} [config=true]
520
+ /**
521
+ * A factory to create a configurable debouncer.
522
+ *
523
+ * @param {number|boolean} [config=true]
524
524
  */
525
525
  function DebounceFactory(config = true) {
526
526
  const timeout = typeof config === 'number' ? config : config ? 300 : 0;
@@ -533,11 +533,11 @@ function DebounceFactory(config = true) {
533
533
  DebounceFactory.$inject = ['config.debounce'];
534
534
 
535
535
  class FormFieldRegistry extends FormFieldRegistry$1 {
536
- /**
537
- * Updates a form fields id.
538
- *
539
- * @param {Object} formField
540
- * @param {string} newId
536
+ /**
537
+ * Updates a form fields id.
538
+ *
539
+ * @param {Object} formField
540
+ * @param {string} newId
541
541
  */
542
542
  updateId(formField, newId) {
543
543
  this._validateId(newId);
@@ -558,13 +558,13 @@ class FormFieldRegistry extends FormFieldRegistry$1 {
558
558
  }
559
559
  }
560
560
 
561
- /**
562
- * Validate the suitability of the given id and signals a problem
563
- * with an exception.
564
- *
565
- * @param {string} id
566
- *
567
- * @throws {Error} if id is empty or already assigned
561
+ /**
562
+ * Validate the suitability of the given id and signals a problem
563
+ * with an exception.
564
+ *
565
+ * @param {string} id
566
+ *
567
+ * @throws {Error} if id is empty or already assigned
568
568
  */
569
569
  _validateId(id) {
570
570
  if (!id) {
@@ -581,11 +581,11 @@ const MAX_COLUMNS = 16;
581
581
  const MIN_COLUMNS = 2;
582
582
  const MAX_FIELDS_PER_ROW = 4;
583
583
  class FormLayoutValidator {
584
- /**
585
- * @constructor
586
- *
587
- * @param { import('./FormLayouter').default } formLayouter
588
- * @param { import('./FormFieldRegistry').default } formFieldRegistry
584
+ /**
585
+ * @constructor
586
+ *
587
+ * @param { import('./FormLayouter').default } formLayouter
588
+ * @param { import('./FormFieldRegistry').default } formFieldRegistry
589
589
  */
590
590
  constructor(formLayouter, formFieldRegistry) {
591
591
  this._formLayouter = formLayouter;
@@ -656,21 +656,21 @@ function editorFormFieldClasses(type, {
656
656
  });
657
657
  }
658
658
 
659
- /**
660
- * Add a dragger that calls back the passed function with
661
- * { event, delta } on drag.
662
- *
663
- * @example
664
- *
665
- * function dragMove(event, delta) {
666
- * // we are dragging (!!)
667
- * }
668
- *
669
- * domElement.addEventListener('dragstart', dragger(dragMove));
670
- *
671
- * @param {Function} fn
672
- *
673
- * @return {Function} drag start callback function
659
+ /**
660
+ * Add a dragger that calls back the passed function with
661
+ * { event, delta } on drag.
662
+ *
663
+ * @example
664
+ *
665
+ * function dragMove(event, delta) {
666
+ * // we are dragging (!!)
667
+ * }
668
+ *
669
+ * domElement.addEventListener('dragstart', dragger(dragMove));
670
+ *
671
+ * @param {Function} fn
672
+ *
673
+ * @return {Function} drag start callback function
674
674
  */
675
675
  function createDragger$1(fn) {
676
676
  let self;
@@ -711,12 +711,12 @@ function createDragger$1(fn) {
711
711
  return onDragStart;
712
712
  }
713
713
 
714
- /**
715
- * Throttle function call according UI update cycle.
716
- *
717
- * @param {Function} fn
718
- *
719
- * @return {Function} throttled fn
714
+ /**
715
+ * Throttle function call according UI update cycle.
716
+ *
717
+ * @param {Function} fn
718
+ *
719
+ * @return {Function} throttled fn
720
720
  */
721
721
  function throttle(fn) {
722
722
  let active = false;
@@ -750,11 +750,11 @@ const DragAndDropContext = createContext({
750
750
  });
751
751
  var DragAndDropContext$1 = DragAndDropContext;
752
752
 
753
- /**
754
- * @param {string} type
755
- * @param {boolean} [strict]
756
- *
757
- * @returns {any}
753
+ /**
754
+ * @param {string} type
755
+ * @param {boolean} [strict]
756
+ *
757
+ * @returns {any}
758
758
  */
759
759
  function getService$1(type, strict) {}
760
760
  const FormEditorContext = createContext({
@@ -1104,23 +1104,23 @@ var Slot = (props => {
1104
1104
  return fillsAndSeparators;
1105
1105
  });
1106
1106
 
1107
- /**
1108
- * Creates a Fragment for a fill.
1109
- *
1110
- * @param {Object} fill Fill to be rendered
1111
- * @returns {Object} Preact Fragment containing fill's children
1107
+ /**
1108
+ * Creates a Fragment for a fill.
1109
+ *
1110
+ * @param {Object} fill Fill to be rendered
1111
+ * @returns {Object} Preact Fragment containing fill's children
1112
1112
  */
1113
1113
  const FillFragment = fill => jsx(Fragment, {
1114
1114
  children: fill.children
1115
1115
  }, fill.id);
1116
1116
 
1117
- /**
1118
- * Creates an array of fills, with separators inserted between groups.
1119
- *
1120
- * @param {Array} groups Groups of fills
1121
- * @param {Function} fillRenderer Function to create a fill
1122
- * @param {Function} separatorRenderer Function to create a separator
1123
- * @returns {Array} Array of fills and separators
1117
+ /**
1118
+ * Creates an array of fills, with separators inserted between groups.
1119
+ *
1120
+ * @param {Array} groups Groups of fills
1121
+ * @param {Function} fillRenderer Function to create a fill
1122
+ * @param {Function} separatorRenderer Function to create a separator
1123
+ * @returns {Array} Array of fills and separators
1124
1124
  */
1125
1125
  const buildFills = (groups, fillRenderer, separatorRenderer) => {
1126
1126
  const result = [];
@@ -1138,8 +1138,8 @@ const buildFills = (groups, fillRenderer, separatorRenderer) => {
1138
1138
  return result;
1139
1139
  };
1140
1140
 
1141
- /**
1142
- * Groups fills by group name property.
1141
+ /**
1142
+ * Groups fills by group name property.
1143
1143
  */
1144
1144
  const _groupByGroupName = fills => {
1145
1145
  const groups = [];
@@ -1159,8 +1159,8 @@ const _groupByGroupName = fills => {
1159
1159
  return Object.keys(groupsById).sort().map(id => groupsById[id]);
1160
1160
  };
1161
1161
 
1162
- /**
1163
- * Compares fills by priority.
1162
+ /**
1163
+ * Compares fills by priority.
1164
1164
  */
1165
1165
  const _comparePriority = (a, b) => {
1166
1166
  return (b.priority || 0) - (a.priority || 0);
@@ -1388,20 +1388,20 @@ const DRAG_NO_DROP_CLS = 'fjs-no-drop';
1388
1388
  const DRAG_NO_MOVE_CLS = 'fjs-no-move';
1389
1389
  const ERROR_DROP_CLS = 'fjs-error-drop';
1390
1390
 
1391
- /**
1392
- * @typedef { { id: String, components: Array<any> } } FormRow
1391
+ /**
1392
+ * @typedef { { id: String, components: Array<any> } } FormRow
1393
1393
  */
1394
1394
 
1395
1395
  class Dragging {
1396
- /**
1397
- * @constructor
1398
- *
1399
- * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
1400
- * @param { import('../../core/FormLayouter').default } formLayouter
1401
- * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
1402
- * @param { import('../../core/EventBus').default } eventBus
1403
- * @param { import('../modeling/Modeling').default } modeling
1404
- * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
1396
+ /**
1397
+ * @constructor
1398
+ *
1399
+ * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
1400
+ * @param { import('../../core/FormLayouter').default } formLayouter
1401
+ * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
1402
+ * @param { import('../../core/EventBus').default } eventBus
1403
+ * @param { import('../modeling/Modeling').default } modeling
1404
+ * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
1405
1405
  */
1406
1406
  constructor(formFieldRegistry, formLayouter, formLayoutValidator, eventBus, modeling, pathRegistry) {
1407
1407
  this._formFieldRegistry = formFieldRegistry;
@@ -1412,13 +1412,13 @@ class Dragging {
1412
1412
  this._pathRegistry = pathRegistry;
1413
1413
  }
1414
1414
 
1415
- /**
1416
- * Calculcates position in form schema given the dropped place.
1417
- *
1418
- * @param { FormRow } targetRow
1419
- * @param { any } targetFormField
1420
- * @param { HTMLElement } sibling
1421
- * @returns { number }
1415
+ /**
1416
+ * Calculcates position in form schema given the dropped place.
1417
+ *
1418
+ * @param { FormRow } targetRow
1419
+ * @param { any } targetFormField
1420
+ * @param { HTMLElement } sibling
1421
+ * @returns { number }
1422
1422
  */
1423
1423
  getTargetIndex(targetRow, targetFormField, sibling) {
1424
1424
  /** @type HTMLElement */
@@ -1559,8 +1559,8 @@ class Dragging {
1559
1559
  }
1560
1560
  }
1561
1561
 
1562
- /**
1563
- * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
1562
+ /**
1563
+ * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
1564
1564
  */
1565
1565
  createDragulaInstance(options) {
1566
1566
  const {
@@ -1974,7 +1974,7 @@ function DebugColumns(props) {
1974
1974
  return null;
1975
1975
  }
1976
1976
  return jsx("div", {
1977
- style: "width: fit-content; padding: 2px 6px; height: 16px; background: var(--color-blue-205-100-95); display: flex; justify-content: center; align-items: center; position: absolute; bottom: -2px; z-index: 2; font-size: 10px; right: 3px;",
1977
+ style: "width: fit-content;\r padding: 2px 6px;\r height: 16px;\r background: var(--color-blue-205-100-95);\r display: flex;\r justify-content: center;\r align-items: center;\r position: absolute;\r bottom: -2px;\r z-index: 2;\r font-size: 10px;\r right: 3px;",
1978
1978
  class: "fjs-debug-columns",
1979
1979
  children: (field.layout || {}).columns || 'auto'
1980
1980
  });
@@ -3045,10 +3045,10 @@ function updateRow(formField, rowId) {
3045
3045
  }
3046
3046
 
3047
3047
  class AddFormFieldHandler {
3048
- /**
3049
- * @constructor
3050
- * @param { import('../../../FormEditor').default } formEditor
3051
- * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
3048
+ /**
3049
+ * @constructor
3050
+ * @param { import('../../../FormEditor').default } formEditor
3051
+ * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
3052
3052
  */
3053
3053
  constructor(formEditor, formFieldRegistry) {
3054
3054
  this._formEditor = formEditor;
@@ -3109,10 +3109,10 @@ class AddFormFieldHandler {
3109
3109
  AddFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
3110
3110
 
3111
3111
  class EditFormFieldHandler {
3112
- /**
3113
- * @constructor
3114
- * @param { import('../../../FormEditor').default } formEditor
3115
- * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
3112
+ /**
3113
+ * @constructor
3114
+ * @param { import('../../../FormEditor').default } formEditor
3115
+ * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
3116
3116
  */
3117
3117
  constructor(formEditor, formFieldRegistry) {
3118
3118
  this._formEditor = formEditor;
@@ -3175,11 +3175,11 @@ class EditFormFieldHandler {
3175
3175
  EditFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
3176
3176
 
3177
3177
  class MoveFormFieldHandler {
3178
- /**
3179
- * @constructor
3180
- * @param { import('../../../FormEditor').default } formEditor
3181
- * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
3182
- * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
3178
+ /**
3179
+ * @constructor
3180
+ * @param { import('../../../FormEditor').default } formEditor
3181
+ * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
3182
+ * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
3183
3183
  */
3184
3184
  constructor(formEditor, formFieldRegistry, pathRegistry) {
3185
3185
  this._formEditor = formEditor;
@@ -3284,10 +3284,10 @@ class MoveFormFieldHandler {
3284
3284
  MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry', 'pathRegistry'];
3285
3285
 
3286
3286
  class RemoveFormFieldHandler {
3287
- /**
3288
- * @constructor
3289
- * @param { import('../../../FormEditor').default } formEditor
3290
- * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
3287
+ /**
3288
+ * @constructor
3289
+ * @param { import('../../../FormEditor').default } formEditor
3290
+ * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
3291
3291
  */
3292
3292
  constructor(formEditor, formFieldRegistry) {
3293
3293
  this._formEditor = formEditor;
@@ -3347,9 +3347,9 @@ class RemoveFormFieldHandler {
3347
3347
  RemoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
3348
3348
 
3349
3349
  class UpdateIdClaimHandler {
3350
- /**
3351
- * @constructor
3352
- * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
3350
+ /**
3351
+ * @constructor
3352
+ * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
3353
3353
  */
3354
3354
  constructor(formFieldRegistry) {
3355
3355
  this._formFieldRegistry = formFieldRegistry;
@@ -3382,9 +3382,9 @@ class UpdateIdClaimHandler {
3382
3382
  UpdateIdClaimHandler.$inject = ['formFieldRegistry'];
3383
3383
 
3384
3384
  class UpdateKeyClaimHandler {
3385
- /**
3386
- * @constructor
3387
- * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
3385
+ /**
3386
+ * @constructor
3387
+ * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
3388
3388
  */
3389
3389
  constructor(pathRegistry) {
3390
3390
  this._pathRegistry = pathRegistry;
@@ -3425,9 +3425,9 @@ class UpdateKeyClaimHandler {
3425
3425
  UpdateKeyClaimHandler.$inject = ['pathRegistry'];
3426
3426
 
3427
3427
  class UpdatePathClaimHandler {
3428
- /**
3429
- * @constructor
3430
- * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
3428
+ /**
3429
+ * @constructor
3430
+ * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
3431
3431
  */
3432
3432
  constructor(pathRegistry) {
3433
3433
  this._pathRegistry = pathRegistry;
@@ -3989,8 +3989,8 @@ class ValidateBehavior extends CommandInterceptor {
3989
3989
  constructor(eventBus) {
3990
3990
  super(eventBus);
3991
3991
 
3992
- /**
3993
- * Remove custom validation if <validationType> is about to be added.
3992
+ /**
3993
+ * Remove custom validation if <validationType> is about to be added.
3994
3994
  */
3995
3995
  this.preExecute('formField.edit', function (context) {
3996
3996
  const {
@@ -4570,22 +4570,22 @@ var SelectionModule = {
4570
4570
  selectionBehavior: ['type', SelectionBehavior]
4571
4571
  };
4572
4572
 
4573
- /**
4574
- * Base class for sectionable UI modules.
4575
- *
4576
- * @property {EventBus} _eventBus - EventBus instance used for event handling.
4577
- * @property {string} managerType - Type of the render manager. Used to form event names.
4578
- *
4579
- * @class SectionModuleBase
4573
+ /**
4574
+ * Base class for sectionable UI modules.
4575
+ *
4576
+ * @property {EventBus} _eventBus - EventBus instance used for event handling.
4577
+ * @property {string} managerType - Type of the render manager. Used to form event names.
4578
+ *
4579
+ * @class SectionModuleBase
4580
4580
  */
4581
4581
  class SectionModuleBase {
4582
- /**
4583
- * Create a SectionModuleBase instance.
4584
- *
4585
- * @param {any} eventBus - The EventBus instance used for event handling.
4586
- * @param {string} sectionKey - The type of render manager. Used to form event names.
4587
- *
4588
- * @constructor
4582
+ /**
4583
+ * Create a SectionModuleBase instance.
4584
+ *
4585
+ * @param {any} eventBus - The EventBus instance used for event handling.
4586
+ * @param {string} sectionKey - The type of render manager. Used to form event names.
4587
+ *
4588
+ * @constructor
4589
4589
  */
4590
4590
  constructor(eventBus, sectionKey) {
4591
4591
  this._eventBus = eventBus;
@@ -4598,10 +4598,10 @@ class SectionModuleBase {
4598
4598
  });
4599
4599
  }
4600
4600
 
4601
- /**
4602
- * Attach the managed section to a parent node.
4603
- *
4604
- * @param {HTMLElement} container - The parent node to attach to.
4601
+ /**
4602
+ * Attach the managed section to a parent node.
4603
+ *
4604
+ * @param {HTMLElement} container - The parent node to attach to.
4605
4605
  */
4606
4606
  attachTo(container) {
4607
4607
  this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.attach`, {
@@ -4609,22 +4609,22 @@ class SectionModuleBase {
4609
4609
  }));
4610
4610
  }
4611
4611
 
4612
- /**
4613
- * Detach the managed section from its parent node.
4612
+ /**
4613
+ * Detach the managed section from its parent node.
4614
4614
  */
4615
4615
  detach() {
4616
4616
  this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.detach`));
4617
4617
  }
4618
4618
 
4619
- /**
4620
- * Reset the managed section to its initial state.
4619
+ /**
4620
+ * Reset the managed section to its initial state.
4621
4621
  */
4622
4622
  reset() {
4623
4623
  this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.reset`));
4624
4624
  }
4625
4625
 
4626
- /**
4627
- * Circumvents timing issues.
4626
+ /**
4627
+ * Circumvents timing issues.
4628
4628
  */
4629
4629
  _onceSectionRendered(callback) {
4630
4630
  if (this.isSectionRendered) {
@@ -8246,11 +8246,11 @@ var index = {
8246
8246
  feelPopup: ['type', FeelPopupModule]
8247
8247
  };
8248
8248
 
8249
- /**
8250
- * @param {string} type
8251
- * @param {boolean} [strict]
8252
- *
8253
- * @returns {any}
8249
+ /**
8250
+ * @param {string} type
8251
+ * @param {boolean} [strict]
8252
+ *
8253
+ * @returns {any}
8254
8254
  */
8255
8255
  function getService(type, strict) {}
8256
8256
  const PropertiesPanelContext = createContext({
@@ -8347,8 +8347,8 @@ const PropertiesPanelHeaderProvider = {
8347
8347
  }
8348
8348
  };
8349
8349
 
8350
- /**
8351
- * Provide placeholders for empty and multiple state.
8350
+ /**
8351
+ * Provide placeholders for empty and multiple state.
8352
8352
  */
8353
8353
  const PropertiesPanelPlaceholderProvider = {
8354
8354
  getEmpty: () => {
@@ -8420,10 +8420,10 @@ function useService (type, strict) {
8420
8420
  return getService(type, strict);
8421
8421
  }
8422
8422
 
8423
- /**
8424
- * Retrieve list of variables from the form schema.
8425
- *
8426
- * @returns { string[] } list of variables used in form schema
8423
+ /**
8424
+ * Retrieve list of variables from the form schema.
8425
+ *
8426
+ * @returns { string[] } list of variables used in form schema
8427
8427
  */
8428
8428
  function useVariables() {
8429
8429
  const form = useService('formEditor');
@@ -10074,14 +10074,14 @@ function Value(props) {
10074
10074
 
10075
10075
  // helpers //////////
10076
10076
 
10077
- /**
10078
- * Returns copy of object with updated value.
10079
- *
10080
- * @param {Object} properties
10081
- * @param {string} key
10082
- * @param {string} value
10083
- *
10084
- * @returns {Object}
10077
+ /**
10078
+ * Returns copy of object with updated value.
10079
+ *
10080
+ * @param {Object} properties
10081
+ * @param {string} key
10082
+ * @param {string} value
10083
+ *
10084
+ * @returns {Object}
10085
10085
  */
10086
10086
  function updateValue(properties, key, value) {
10087
10087
  return {
@@ -10090,14 +10090,14 @@ function updateValue(properties, key, value) {
10090
10090
  };
10091
10091
  }
10092
10092
 
10093
- /**
10094
- * Returns copy of object with updated key.
10095
- *
10096
- * @param {Object} properties
10097
- * @param {string} oldKey
10098
- * @param {string} newKey
10099
- *
10100
- * @returns {Object}
10093
+ /**
10094
+ * Returns copy of object with updated key.
10095
+ *
10096
+ * @param {Object} properties
10097
+ * @param {string} oldKey
10098
+ * @param {string} newKey
10099
+ *
10100
+ * @returns {Object}
10101
10101
  */
10102
10102
  function updateKey(properties, oldKey, newKey) {
10103
10103
  return Object.entries(properties).reduce((newProperties, entry) => {
@@ -10206,19 +10206,9 @@ function InputKeyValuesSourceEntry(props) {
10206
10206
  field,
10207
10207
  id
10208
10208
  } = props;
10209
- const schema = '[\n {\n "label": "dollar",\n "value": "$"\n }\n]';
10210
- const description = jsxs("div", {
10211
- children: ["Define which input property to populate the values from.", jsx("br", {}), jsx("br", {}), "The input property may be an array of simple values or alternatively follow this schema:", jsx("pre", {
10212
- children: jsx("code", {
10213
- children: schema
10214
- })
10215
- })]
10216
- });
10217
10209
  return [{
10218
10210
  id: id + '-key',
10219
10211
  component: InputValuesKey,
10220
- label: 'Input values key',
10221
- description,
10222
10212
  isEdited: isEdited,
10223
10213
  editField,
10224
10214
  field
@@ -10228,12 +10218,18 @@ function InputValuesKey(props) {
10228
10218
  const {
10229
10219
  editField,
10230
10220
  field,
10231
- id,
10232
- label,
10233
- description
10221
+ id
10234
10222
  } = props;
10235
10223
  const debounce = useService('debounce');
10236
10224
  const path = VALUES_SOURCES_PATHS[VALUES_SOURCES.INPUT];
10225
+ const schema = '[\n {\n "label": "dollar",\n "value": "$"\n }\n]';
10226
+ const tooltip = jsxs("div", {
10227
+ children: ["The input property may be an array of simple values or alternatively follow this schema:", jsx("pre", {
10228
+ children: jsx("code", {
10229
+ children: schema
10230
+ })
10231
+ })]
10232
+ });
10237
10233
  const getValue = () => get(field, path, '');
10238
10234
  const setValue = (value, error) => {
10239
10235
  if (error) {
@@ -10252,11 +10248,12 @@ function InputValuesKey(props) {
10252
10248
  };
10253
10249
  return TextfieldEntry({
10254
10250
  debounce,
10255
- description,
10251
+ description: 'Define which input property to populate the values from',
10252
+ tooltip,
10256
10253
  element: field,
10257
10254
  getValue,
10258
10255
  id,
10259
- label,
10256
+ label: 'Input values key',
10260
10257
  setValue,
10261
10258
  validate
10262
10259
  });
@@ -10532,7 +10529,6 @@ function ValuesExpressionEntry(props) {
10532
10529
  return [{
10533
10530
  id: id + '-expression',
10534
10531
  component: ValuesExpression,
10535
- label: 'Values expression',
10536
10532
  isEdited: isEdited$6,
10537
10533
  editField,
10538
10534
  field
@@ -10550,8 +10546,8 @@ function ValuesExpression(props) {
10550
10546
  }));
10551
10547
  const path = VALUES_SOURCES_PATHS[VALUES_SOURCES.EXPRESSION];
10552
10548
  const schema = '[\n {\n "label": "dollar",\n "value": "$"\n }\n]';
10553
- const description = jsxs("div", {
10554
- children: ["Define an expression to populate the options from.", jsx("br", {}), jsx("br", {}), "The expression may result in an array of simple values or alternatively follow this schema:", jsx("pre", {
10549
+ const tooltip = jsxs("div", {
10550
+ children: ["The expression may result in an array of simple values or alternatively follow this schema:", jsx("pre", {
10555
10551
  children: jsx("code", {
10556
10552
  children: schema
10557
10553
  })
@@ -10561,7 +10557,8 @@ function ValuesExpression(props) {
10561
10557
  const setValue = value => editField(field, path, value || '');
10562
10558
  return FeelEntry({
10563
10559
  debounce,
10564
- description,
10560
+ description: 'Define an expression to populate the options from.',
10561
+ tooltip,
10565
10562
  element: field,
10566
10563
  feel: 'required',
10567
10564
  getValue,
@@ -10930,8 +10927,8 @@ function ValuesGroups(field, editField) {
10930
10927
  };
10931
10928
  const valuesSourceId = `${fieldId}-valuesSource`;
10932
10929
 
10933
- /**
10934
- * @type {Array<Group|ListGroup>}
10930
+ /**
10931
+ * @type {Array<Group|ListGroup>}
10935
10932
  */
10936
10933
  const groups = [{
10937
10934
  id: valuesSourceId,
@@ -11052,13 +11049,13 @@ function CustomPropertiesGroup(field, editField) {
11052
11049
 
11053
11050
  // helpers //////////
11054
11051
 
11055
- /**
11056
- * Returns copy of object without key.
11057
- *
11058
- * @param {Object} properties
11059
- * @param {string} oldKey
11060
- *
11061
- * @returns {Object}
11052
+ /**
11053
+ * Returns copy of object without key.
11054
+ *
11055
+ * @param {Object} properties
11056
+ * @param {string} oldKey
11057
+ *
11058
+ * @returns {Object}
11062
11059
  */
11063
11060
  function removeKey(properties, oldKey) {
11064
11061
  return Object.entries(properties).reduce((newProperties, entry) => {
@@ -11165,9 +11162,9 @@ function FormPropertiesPanel(props) {
11165
11162
  });
11166
11163
  }, [eventBus, formEditor, selectionModule]);
11167
11164
  useLayoutEffect(() => {
11168
- /**
11169
- * TODO(pinussilvestrus): update with actual updated element,
11170
- * once we have a proper updater/change support
11165
+ /**
11166
+ * TODO(pinussilvestrus): update with actual updated element,
11167
+ * once we have a proper updater/change support
11171
11168
  */
11172
11169
  eventBus.on('changed', refresh);
11173
11170
  eventBus.on('import.done', refresh);
@@ -11220,10 +11217,10 @@ class PropertiesPanelRenderer {
11220
11217
  });
11221
11218
  }
11222
11219
 
11223
- /**
11224
- * Attach the properties panel to a parent node.
11225
- *
11226
- * @param {HTMLElement} container
11220
+ /**
11221
+ * Attach the properties panel to a parent node.
11222
+ *
11223
+ * @param {HTMLElement} container
11227
11224
  */
11228
11225
  attachTo(container) {
11229
11226
  if (!container) {
@@ -11243,8 +11240,8 @@ class PropertiesPanelRenderer {
11243
11240
  this._eventBus.fire('propertiesPanel.attach');
11244
11241
  }
11245
11242
 
11246
- /**
11247
- * Detach the properties panel from its parent node.
11243
+ /**
11244
+ * Detach the properties panel from its parent node.
11248
11245
  */
11249
11246
  detach() {
11250
11247
  const parentNode = this._container.parentNode;
@@ -11275,10 +11272,10 @@ var PropertiesPanelModule = {
11275
11272
  propertiesPanel: ['type', PropertiesPanelRenderer]
11276
11273
  };
11277
11274
 
11278
- /**
11279
- * Manages the rendering of visual plugins.
11280
- * @constructor
11281
- * @param {Object} eventBus - Event bus for the application.
11275
+ /**
11276
+ * Manages the rendering of visual plugins.
11277
+ * @constructor
11278
+ * @param {Object} eventBus - Event bus for the application.
11282
11279
  */
11283
11280
  class RenderInjector extends SectionModuleBase {
11284
11281
  constructor(eventBus) {
@@ -11287,10 +11284,10 @@ class RenderInjector extends SectionModuleBase {
11287
11284
  this.registeredRenderers = [];
11288
11285
  }
11289
11286
 
11290
- /**
11291
- * Inject a new renderer into the injector.
11292
- * @param {string} identifier - Identifier for the renderer.
11293
- * @param {Function} Renderer - The renderer function.
11287
+ /**
11288
+ * Inject a new renderer into the injector.
11289
+ * @param {string} identifier - Identifier for the renderer.
11290
+ * @param {Function} Renderer - The renderer function.
11294
11291
  */
11295
11292
  attachRenderer(identifier, Renderer) {
11296
11293
  this.registeredRenderers = [...this.registeredRenderers, {
@@ -11299,17 +11296,17 @@ class RenderInjector extends SectionModuleBase {
11299
11296
  }];
11300
11297
  }
11301
11298
 
11302
- /**
11303
- * Detach a renderer from the by key injector.
11304
- * @param {string} identifier - Identifier for the renderer.
11299
+ /**
11300
+ * Detach a renderer from the by key injector.
11301
+ * @param {string} identifier - Identifier for the renderer.
11305
11302
  */
11306
11303
  detachRenderer(identifier) {
11307
11304
  this.registeredRenderers = this.registeredRenderers.filter(r => r.identifier !== identifier);
11308
11305
  }
11309
11306
 
11310
- /**
11311
- * Returns the registered renderers.
11312
- * @returns {Array} Array of registered renderers.
11307
+ /**
11308
+ * Returns the registered renderers.
11309
+ * @returns {Array} Array of registered renderers.
11313
11310
  */
11314
11311
  fetchRenderers() {
11315
11312
  return this.registeredRenderers;
@@ -11343,48 +11340,48 @@ var ExpressionLanguageModule = {
11343
11340
 
11344
11341
  const ids = new Ids([32, 36, 1]);
11345
11342
 
11346
- /**
11347
- * @typedef { import('./types').Injector } Injector
11348
- * @typedef { import('./types').Module } Module
11349
- * @typedef { import('./types').Schema } Schema
11350
- *
11351
- * @typedef { import('./types').FormEditorOptions } FormEditorOptions
11352
- * @typedef { import('./types').FormEditorProperties } FormEditorProperties
11353
- *
11354
- * @typedef { {
11355
- * properties: FormEditorProperties,
11356
- * schema: Schema
11357
- * } } State
11358
- *
11359
- * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
11360
- * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
11361
- * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
11343
+ /**
11344
+ * @typedef { import('./types').Injector } Injector
11345
+ * @typedef { import('./types').Module } Module
11346
+ * @typedef { import('./types').Schema } Schema
11347
+ *
11348
+ * @typedef { import('./types').FormEditorOptions } FormEditorOptions
11349
+ * @typedef { import('./types').FormEditorProperties } FormEditorProperties
11350
+ *
11351
+ * @typedef { {
11352
+ * properties: FormEditorProperties,
11353
+ * schema: Schema
11354
+ * } } State
11355
+ *
11356
+ * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
11357
+ * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
11358
+ * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
11362
11359
  */
11363
11360
 
11364
- /**
11365
- * The form editor.
11361
+ /**
11362
+ * The form editor.
11366
11363
  */
11367
11364
  class FormEditor {
11368
- /**
11369
- * @constructor
11370
- * @param {FormEditorOptions} options
11365
+ /**
11366
+ * @constructor
11367
+ * @param {FormEditorOptions} options
11371
11368
  */
11372
11369
  constructor(options = {}) {
11373
- /**
11374
- * @public
11375
- * @type {OnEventType}
11370
+ /**
11371
+ * @public
11372
+ * @type {OnEventType}
11376
11373
  */
11377
11374
  this.on = this._onEvent;
11378
11375
 
11379
- /**
11380
- * @public
11381
- * @type {String}
11376
+ /**
11377
+ * @public
11378
+ * @type {String}
11382
11379
  */
11383
11380
  this._id = ids.next();
11384
11381
 
11385
- /**
11386
- * @private
11387
- * @type {Element}
11382
+ /**
11383
+ * @private
11384
+ * @type {Element}
11388
11385
  */
11389
11386
  this._container = createFormContainer();
11390
11387
  this._container.setAttribute('input-handle-modified-keys', 'z,y');
@@ -11395,15 +11392,15 @@ class FormEditor {
11395
11392
  properties = {}
11396
11393
  } = options;
11397
11394
 
11398
- /**
11399
- * @private
11400
- * @type {any}
11395
+ /**
11396
+ * @private
11397
+ * @type {any}
11401
11398
  */
11402
11399
  this.exporter = exporter;
11403
11400
 
11404
- /**
11405
- * @private
11406
- * @type {State}
11401
+ /**
11402
+ * @private
11403
+ * @type {State}
11407
11404
  */
11408
11405
  this._state = {
11409
11406
  properties,
@@ -11432,10 +11429,10 @@ class FormEditor {
11432
11429
  this._detach(false);
11433
11430
  }
11434
11431
 
11435
- /**
11436
- * @param {Schema} schema
11437
- *
11438
- * @return {Promise<{ warnings: Array<any> }>}
11432
+ /**
11433
+ * @param {Schema} schema
11434
+ *
11435
+ * @return {Promise<{ warnings: Array<any> }>}
11439
11436
  */
11440
11437
  importSchema(schema) {
11441
11438
  return new Promise((resolve, reject) => {
@@ -11464,15 +11461,15 @@ class FormEditor {
11464
11461
  });
11465
11462
  }
11466
11463
 
11467
- /**
11468
- * @returns {Schema}
11464
+ /**
11465
+ * @returns {Schema}
11469
11466
  */
11470
11467
  saveSchema() {
11471
11468
  return this.getSchema();
11472
11469
  }
11473
11470
 
11474
- /**
11475
- * @returns {Schema}
11471
+ /**
11472
+ * @returns {Schema}
11476
11473
  */
11477
11474
  getSchema() {
11478
11475
  const {
@@ -11481,8 +11478,8 @@ class FormEditor {
11481
11478
  return exportSchema(schema, this.exporter, schemaVersion);
11482
11479
  }
11483
11480
 
11484
- /**
11485
- * @param {Element|string} parentNode
11481
+ /**
11482
+ * @param {Element|string} parentNode
11486
11483
  */
11487
11484
  attachTo(parentNode) {
11488
11485
  if (!parentNode) {
@@ -11500,10 +11497,10 @@ class FormEditor {
11500
11497
  this._detach();
11501
11498
  }
11502
11499
 
11503
- /**
11504
- * @internal
11505
- *
11506
- * @param {boolean} [emit]
11500
+ /**
11501
+ * @internal
11502
+ *
11503
+ * @param {boolean} [emit]
11507
11504
  */
11508
11505
  _detach(emit = true) {
11509
11506
  const container = this._container,
@@ -11517,9 +11514,9 @@ class FormEditor {
11517
11514
  parentNode.removeChild(container);
11518
11515
  }
11519
11516
 
11520
- /**
11521
- * @param {any} property
11522
- * @param {any} value
11517
+ /**
11518
+ * @param {any} property
11519
+ * @param {any} value
11523
11520
  */
11524
11521
  setProperty(property, value) {
11525
11522
  const properties = set$1(this._getState().properties, [property], value);
@@ -11528,21 +11525,21 @@ class FormEditor {
11528
11525
  });
11529
11526
  }
11530
11527
 
11531
- /**
11532
- * @param {string} type
11533
- * @param {Function} handler
11528
+ /**
11529
+ * @param {string} type
11530
+ * @param {Function} handler
11534
11531
  */
11535
11532
  off(type, handler) {
11536
11533
  this.get('eventBus').off(type, handler);
11537
11534
  }
11538
11535
 
11539
- /**
11540
- * @internal
11541
- *
11542
- * @param {FormEditorOptions} options
11543
- * @param {Element} container
11544
- *
11545
- * @returns {Injector}
11536
+ /**
11537
+ * @internal
11538
+ *
11539
+ * @param {FormEditorOptions} options
11540
+ * @param {Element} container
11541
+ *
11542
+ * @returns {Injector}
11546
11543
  */
11547
11544
  _createInjector(options, container) {
11548
11545
  const {
@@ -11564,22 +11561,22 @@ class FormEditor {
11564
11561
  }, core, ...modules, ...additionalModules]);
11565
11562
  }
11566
11563
 
11567
- /**
11568
- * @internal
11564
+ /**
11565
+ * @internal
11569
11566
  */
11570
11567
  _emit(type, data) {
11571
11568
  this.get('eventBus').fire(type, data);
11572
11569
  }
11573
11570
 
11574
- /**
11575
- * @internal
11571
+ /**
11572
+ * @internal
11576
11573
  */
11577
11574
  _getState() {
11578
11575
  return this._state;
11579
11576
  }
11580
11577
 
11581
- /**
11582
- * @internal
11578
+ /**
11579
+ * @internal
11583
11580
  */
11584
11581
  _setState(state) {
11585
11582
  this._state = {
@@ -11589,15 +11586,15 @@ class FormEditor {
11589
11586
  this._emit('changed', this._getState());
11590
11587
  }
11591
11588
 
11592
- /**
11593
- * @internal
11589
+ /**
11590
+ * @internal
11594
11591
  */
11595
11592
  _getModules() {
11596
11593
  return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, MarkdownModule, PropertiesPanelModule, RenderInjectionModule];
11597
11594
  }
11598
11595
 
11599
- /**
11600
- * @internal
11596
+ /**
11597
+ * @internal
11601
11598
  */
11602
11599
  _onEvent(type, priority, handler) {
11603
11600
  this.get('eventBus').on(type, priority, handler);