@bpmn-io/form-js-viewer 0.10.0 → 0.10.1

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.
Files changed (67) hide show
  1. package/LICENSE +22 -22
  2. package/README.md +165 -165
  3. package/dist/assets/form-js.css +611 -620
  4. package/dist/index.cjs +140 -138
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.es.js +140 -138
  7. package/dist/index.es.js.map +1 -1
  8. package/dist/types/Form.d.ts +144 -144
  9. package/dist/types/core/ConditionChecker.d.ts +57 -57
  10. package/dist/types/core/EventBus.d.ts +1 -1
  11. package/dist/types/core/FormFieldRegistry.d.ts +17 -17
  12. package/dist/types/core/Validator.d.ts +7 -7
  13. package/dist/types/core/index.d.ts +18 -18
  14. package/dist/types/import/Importer.d.ts +43 -43
  15. package/dist/types/import/index.d.ts +5 -5
  16. package/dist/types/index.d.ts +18 -18
  17. package/dist/types/render/FormFields.d.ts +5 -5
  18. package/dist/types/render/Renderer.d.ts +23 -23
  19. package/dist/types/render/components/Description.d.ts +1 -1
  20. package/dist/types/render/components/Errors.d.ts +1 -1
  21. package/dist/types/render/components/FormComponent.d.ts +1 -1
  22. package/dist/types/render/components/FormField.d.ts +1 -1
  23. package/dist/types/render/components/Label.d.ts +1 -1
  24. package/dist/types/render/components/PoweredBy.d.ts +1 -1
  25. package/dist/types/render/components/Sanitizer.d.ts +8 -8
  26. package/dist/types/render/components/Util.d.ts +17 -17
  27. package/dist/types/render/components/form-fields/Button.d.ts +11 -11
  28. package/dist/types/render/components/form-fields/Checkbox.d.ts +13 -13
  29. package/dist/types/render/components/form-fields/Checklist.d.ts +12 -12
  30. package/dist/types/render/components/form-fields/Datetime.d.ts +11 -11
  31. package/dist/types/render/components/form-fields/Default.d.ts +9 -9
  32. package/dist/types/render/components/form-fields/Image.d.ts +8 -8
  33. package/dist/types/render/components/form-fields/Number.d.ts +14 -14
  34. package/dist/types/render/components/form-fields/Radio.d.ts +12 -12
  35. package/dist/types/render/components/form-fields/Select.d.ts +12 -12
  36. package/dist/types/render/components/form-fields/Taglist.d.ts +12 -12
  37. package/dist/types/render/components/form-fields/Text.d.ts +10 -10
  38. package/dist/types/render/components/form-fields/Textarea.d.ts +13 -13
  39. package/dist/types/render/components/form-fields/Textfield.d.ts +13 -13
  40. package/dist/types/render/components/form-fields/parts/Datepicker.d.ts +1 -1
  41. package/dist/types/render/components/form-fields/parts/DropdownList.d.ts +1 -1
  42. package/dist/types/render/components/form-fields/parts/InputAdorner.d.ts +1 -1
  43. package/dist/types/render/components/form-fields/parts/Timepicker.d.ts +1 -1
  44. package/dist/types/render/components/icons/index.d.ts +16 -16
  45. package/dist/types/render/components/index.d.ts +17 -17
  46. package/dist/types/render/components/util/dateTimeUtil.d.ts +12 -12
  47. package/dist/types/render/components/util/numberFieldUtil.d.ts +4 -4
  48. package/dist/types/render/components/util/sanitizerUtil.d.ts +3 -3
  49. package/dist/types/render/context/FormContext.d.ts +12 -12
  50. package/dist/types/render/context/FormRenderContext.d.ts +6 -6
  51. package/dist/types/render/context/index.d.ts +2 -2
  52. package/dist/types/render/hooks/useCondition.d.ts +9 -9
  53. package/dist/types/render/hooks/useEvaluation.d.ts +6 -6
  54. package/dist/types/render/hooks/useExpressionValue.d.ts +5 -5
  55. package/dist/types/render/hooks/useKeyDownAction.d.ts +1 -1
  56. package/dist/types/render/hooks/useService.d.ts +1 -1
  57. package/dist/types/render/hooks/useValuesAsync.d.ts +28 -28
  58. package/dist/types/render/index.d.ts +11 -11
  59. package/dist/types/src/types.d.ts +35 -35
  60. package/dist/types/util/constants/DatetimeConstants.d.ts +24 -24
  61. package/dist/types/util/constants/ValuesSourceConstants.d.ts +15 -15
  62. package/dist/types/util/constants/index.d.ts +2 -2
  63. package/dist/types/util/feel.d.ts +15 -15
  64. package/dist/types/util/form.d.ts +6 -6
  65. package/dist/types/util/index.d.ts +25 -25
  66. package/dist/types/util/injector.d.ts +2 -2
  67. package/package.json +2 -2
package/dist/index.cjs CHANGED
@@ -26,9 +26,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
26
26
  var flatpickr__default = /*#__PURE__*/_interopDefaultLegacy(flatpickr);
27
27
  var Markup__default = /*#__PURE__*/_interopDefaultLegacy(Markup);
28
28
 
29
- /**
30
- * @typedef {object} Condition
31
- * @property {string} [hide]
29
+ /**
30
+ * @typedef {object} Condition
31
+ * @property {string} [hide]
32
32
  */
33
33
 
34
34
  class ConditionChecker {
@@ -37,11 +37,11 @@ class ConditionChecker {
37
37
  this._eventBus = eventBus;
38
38
  }
39
39
 
40
- /**
41
- * For given data, remove properties based on condition.
42
- *
43
- * @param {Object<string, any>} properties
44
- * @param {Object<string, any>} data
40
+ /**
41
+ * For given data, remove properties based on condition.
42
+ *
43
+ * @param {Object<string, any>} properties
44
+ * @param {Object<string, any>} data
45
45
  */
46
46
  applyConditions(properties, data = {}) {
47
47
  const conditions = this._getConditions();
@@ -60,13 +60,13 @@ class ConditionChecker {
60
60
  return newProperties;
61
61
  }
62
62
 
63
- /**
64
- * Check if given condition is met. Returns null for invalid/missing conditions.
65
- *
66
- * @param {string} condition
67
- * @param {import('../types').Data} [data]
68
- *
69
- * @returns {boolean|null}
63
+ /**
64
+ * Check if given condition is met. Returns null for invalid/missing conditions.
65
+ *
66
+ * @param {string} condition
67
+ * @param {import('../types').Data} [data]
68
+ *
69
+ * @returns {boolean|null}
70
70
  */
71
71
  check(condition, data = {}) {
72
72
  if (!condition) {
@@ -87,12 +87,12 @@ class ConditionChecker {
87
87
  }
88
88
  }
89
89
 
90
- /**
91
- * Check if hide condition is met.
92
- *
93
- * @param {Condition} condition
94
- * @param {Object<string, any>} data
95
- * @returns {boolean}
90
+ /**
91
+ * Check if hide condition is met.
92
+ *
93
+ * @param {Condition} condition
94
+ * @param {Object<string, any>} data
95
+ * @returns {boolean}
96
96
  */
97
97
  _checkHideCondition(condition, data) {
98
98
  if (!condition.hide) {
@@ -102,13 +102,13 @@ class ConditionChecker {
102
102
  return result === true;
103
103
  }
104
104
 
105
- /**
106
- * Evaluate an expression.
107
- *
108
- * @param {string} expression
109
- * @param {import('../types').Data} [data]
110
- *
111
- * @returns {any}
105
+ /**
106
+ * Evaluate an expression.
107
+ *
108
+ * @param {string} expression
109
+ * @param {import('../types').Data} [data]
110
+ *
111
+ * @returns {any}
112
112
  */
113
113
  evaluate(expression, data = {}) {
114
114
  if (!expression) {
@@ -717,11 +717,11 @@ class FormFieldRegistry {
717
717
  }
718
718
  FormFieldRegistry.$inject = ['eventBus'];
719
719
 
720
- /**
721
- * Retrieve variable names from given FEEL unary test.
722
- *
723
- * @param {string} unaryTest
724
- * @returns {string[]}
720
+ /**
721
+ * Retrieve variable names from given FEEL unary test.
722
+ *
723
+ * @param {string} unaryTest
724
+ * @returns {string[]}
725
725
  */
726
726
  function getVariableNames(unaryTest) {
727
727
  const tree = feelin.parseUnaryTests(unaryTest);
@@ -736,11 +736,11 @@ function getVariableNames(unaryTest) {
736
736
  return Array.from(variables);
737
737
  }
738
738
 
739
- /**
740
- * Retrieve variable names from given FEEL expression.
741
- *
742
- * @param {string} expression
743
- * @returns {string[]}
739
+ /**
740
+ * Retrieve variable names from given FEEL expression.
741
+ *
742
+ * @param {string} expression
743
+ * @returns {string[]}
744
744
  */
745
745
  function getExpressionVariableNames(expression) {
746
746
  const tree = feelin.parseExpressions(expression);
@@ -826,10 +826,10 @@ function createInjector(bootstrapModules) {
826
826
  return injector;
827
827
  }
828
828
 
829
- /**
830
- * @param {string?} prefix
831
- *
832
- * @returns Element
829
+ /**
830
+ * @param {string?} prefix
831
+ *
832
+ * @returns Element
833
833
  */
834
834
  function createFormContainer(prefix = 'fjs') {
835
835
  const container = document.createElement('div');
@@ -874,22 +874,22 @@ function generateIdForType(type) {
874
874
  return `${type}${generateIndexForType(type)}`;
875
875
  }
876
876
 
877
- /**
878
- * @template T
879
- * @param {T} data
880
- * @param {(this: any, key: string, value: any) => any} [replacer]
881
- * @return {T}
877
+ /**
878
+ * @template T
879
+ * @param {T} data
880
+ * @param {(this: any, key: string, value: any) => any} [replacer]
881
+ * @return {T}
882
882
  */
883
883
  function clone(data, replacer) {
884
884
  return JSON.parse(JSON.stringify(data, replacer));
885
885
  }
886
886
 
887
- /**
888
- * Parse the schema for input variables a form might make use of
889
- *
890
- * @param {any} schema
891
- *
892
- * @return {string[]}
887
+ /**
888
+ * Parse the schema for input variables a form might make use of
889
+ *
890
+ * @param {any} schema
891
+ *
892
+ * @return {string[]}
893
893
  */
894
894
  function getSchemaVariables(schema) {
895
895
  if (!schema.components) {
@@ -938,25 +938,25 @@ function isExpression$1(value) {
938
938
  }
939
939
 
940
940
  class Importer {
941
- /**
942
- * @constructor
943
- * @param { import('../core').FormFieldRegistry } formFieldRegistry
944
- * @param { import('../render/FormFields').default } formFields
941
+ /**
942
+ * @constructor
943
+ * @param { import('../core').FormFieldRegistry } formFieldRegistry
944
+ * @param { import('../render/FormFields').default } formFields
945
945
  */
946
946
  constructor(formFieldRegistry, formFields) {
947
947
  this._formFieldRegistry = formFieldRegistry;
948
948
  this._formFields = formFields;
949
949
  }
950
950
 
951
- /**
952
- * Import schema adding `id`, `_parent` and `_path`
953
- * information to each field and adding it to the
954
- * form field registry.
955
- *
956
- * @param {any} schema
957
- * @param {any} [data]
958
- *
959
- * @return { { warnings: Array<any>, schema: any, data: any } }
951
+ /**
952
+ * Import schema adding `id`, `_parent` and `_path`
953
+ * information to each field and adding it to the
954
+ * form field registry.
955
+ *
956
+ * @param {any} schema
957
+ * @param {any} [data]
958
+ *
959
+ * @return { { warnings: Array<any>, schema: any, data: any } }
960
960
  */
961
961
  importSchema(schema, data = {}) {
962
962
  // TODO: Add warnings - https://github.com/bpmn-io/form-js/issues/289
@@ -975,11 +975,11 @@ class Importer {
975
975
  }
976
976
  }
977
977
 
978
- /**
979
- * @param {any} formField
980
- * @param {string} [parentId]
981
- *
982
- * @return {any} importedField
978
+ /**
979
+ * @param {any} formField
980
+ * @param {string} [parentId]
981
+ *
982
+ * @return {any} importedField
983
983
  */
984
984
  importFormField(formField, parentId) {
985
985
  const {
@@ -1030,10 +1030,10 @@ class Importer {
1030
1030
  });
1031
1031
  }
1032
1032
 
1033
- /**
1034
- * @param {Object} data
1035
- *
1036
- * @return {Object} initializedData
1033
+ /**
1034
+ * @param {Object} data
1035
+ *
1036
+ * @return {Object} initializedData
1037
1037
  */
1038
1038
  initializeFieldValues(data) {
1039
1039
  return this._formFieldRegistry.getAll().reduce((initializedData, formField) => {
@@ -1083,11 +1083,11 @@ const ATTR_WHITESPACE_PATTERN = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u
1083
1083
 
1084
1084
  const FORM_ELEMENT = document.createElement('form');
1085
1085
 
1086
- /**
1087
- * Sanitize a HTML string and return the cleaned, safe version.
1088
- *
1089
- * @param {string} html
1090
- * @return {string}
1086
+ /**
1087
+ * Sanitize a HTML string and return the cleaned, safe version.
1088
+ *
1089
+ * @param {string} html
1090
+ * @return {string}
1091
1091
  */
1092
1092
  function sanitizeHTML(html) {
1093
1093
  const doc = new DOMParser().parseFromString(`<!DOCTYPE html>\n<html><body><div>${html}`, 'text/html');
@@ -1107,15 +1107,15 @@ function sanitizeImageSource(src) {
1107
1107
  return valid ? src : '';
1108
1108
  }
1109
1109
 
1110
- /**
1111
- * Recursively sanitize a HTML node, potentially
1112
- * removing it, its children or attributes.
1113
- *
1114
- * Inspired by https://github.com/developit/snarkdown/issues/70
1115
- * and https://github.com/cure53/DOMPurify. Simplified
1116
- * for our use-case.
1117
- *
1118
- * @param {Element} node
1110
+ /**
1111
+ * Recursively sanitize a HTML node, potentially
1112
+ * removing it, its children or attributes.
1113
+ *
1114
+ * Inspired by https://github.com/developit/snarkdown/issues/70
1115
+ * and https://github.com/cure53/DOMPurify. Simplified
1116
+ * for our use-case.
1117
+ *
1118
+ * @param {Element} node
1119
1119
  */
1120
1120
  function sanitizeNode(node) {
1121
1121
  // allow text nodes
@@ -1159,13 +1159,13 @@ function sanitizeNode(node) {
1159
1159
  }
1160
1160
  }
1161
1161
 
1162
- /**
1163
- * Validates attributes for validity.
1164
- *
1165
- * @param {string} lcTag
1166
- * @param {string} lcName
1167
- * @param {string} value
1168
- * @return {boolean}
1162
+ /**
1163
+ * Validates attributes for validity.
1164
+ *
1165
+ * @param {string} lcTag
1166
+ * @param {string} lcName
1167
+ * @param {string} value
1168
+ * @return {boolean}
1169
1169
  */
1170
1170
  function isValidAttribute(lcTag, lcName, value) {
1171
1171
  // disallow most attributes based on whitelist
@@ -1217,14 +1217,14 @@ function safeMarkdown(markdown) {
1217
1217
  return sanitizeHTML(html);
1218
1218
  }
1219
1219
 
1220
- /**
1221
- * Sanitizes an image source to ensure we only allow for data URI and links
1222
- * that start with http(s).
1223
- *
1224
- * Note: Most browsers anyway do not support script execution in <img> elements.
1225
- *
1226
- * @param {string} src
1227
- * @returns {string}
1220
+ /**
1221
+ * Sanitizes an image source to ensure we only allow for data URI and links
1222
+ * that start with http(s).
1223
+ *
1224
+ * Note: Most browsers anyway do not support script execution in <img> elements.
1225
+ *
1226
+ * @param {string} src
1227
+ * @returns {string}
1228
1228
  */
1229
1229
  function safeImageSource(src) {
1230
1230
  return sanitizeImageSource(src);
@@ -1271,11 +1271,11 @@ const FormRenderContext = preact.createContext({
1271
1271
  }
1272
1272
  });
1273
1273
 
1274
- /**
1275
- * @param {string} type
1276
- * @param {boolean} [strict]
1277
- *
1278
- * @returns {any}
1274
+ /**
1275
+ * @param {string} type
1276
+ * @param {boolean} [strict]
1277
+ *
1278
+ * @returns {any}
1279
1279
  */
1280
1280
  function getService(type, strict) {}
1281
1281
  const FormContext = preact.createContext({
@@ -1404,8 +1404,8 @@ function useService (type, strict) {
1404
1404
  return getService(type, strict);
1405
1405
  }
1406
1406
 
1407
- /**
1408
- * @enum { String }
1407
+ /**
1408
+ * @enum { String }
1409
1409
  */
1410
1410
  const LOAD_STATES = {
1411
1411
  LOADING: 'loading',
@@ -1413,17 +1413,17 @@ const LOAD_STATES = {
1413
1413
  ERROR: 'error'
1414
1414
  };
1415
1415
 
1416
- /**
1417
- * @typedef {Object} ValuesGetter
1418
- * @property {Object[]} values - The values data
1419
- * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
1416
+ /**
1417
+ * @typedef {Object} ValuesGetter
1418
+ * @property {Object[]} values - The values data
1419
+ * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
1420
1420
  */
1421
1421
 
1422
- /**
1423
- * A hook to load values for single and multiselect components.
1424
- *
1425
- * @param {Object} field - The form field to handle values for
1426
- * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
1422
+ /**
1423
+ * A hook to load values for single and multiselect components.
1424
+ *
1425
+ * @param {Object} field - The form field to handle values for
1426
+ * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
1427
1427
  */
1428
1428
  function useValuesAsync (field) {
1429
1429
  const {
@@ -1758,13 +1758,13 @@ Checklist.keyed = true;
1758
1758
  Checklist.emptyValue = [];
1759
1759
  Checklist.sanitizeValue = sanitizeMultiSelectValue;
1760
1760
 
1761
- /**
1762
- * Check if condition is met with given variables.
1763
- *
1764
- * @param {string | undefined} condition
1765
- * @param {import('../../types').Data} data
1766
- *
1767
- * @returns {boolean} true if condition is met or no condition or condition checker exists
1761
+ /**
1762
+ * Check if condition is met with given variables.
1763
+ *
1764
+ * @param {string | undefined} condition
1765
+ * @param {import('../../types').Data} data
1766
+ *
1767
+ * @returns {boolean} true if condition is met or no condition or condition checker exists
1768
1768
  */
1769
1769
  function useCondition(condition, data) {
1770
1770
  const initialData = useService('form')._getState().initialData;
@@ -2516,10 +2516,10 @@ Datetime.keyed = true;
2516
2516
  Datetime.emptyValue = null;
2517
2517
  Datetime.sanitizeValue = sanitizeDateTimePickerValue;
2518
2518
 
2519
- /**
2520
- * This file must not be changed or exchanged.
2521
- *
2522
- * @see http://bpmn.io/license for more information.
2519
+ /**
2520
+ * This file must not be changed or exchanged.
2521
+ *
2522
+ * @see http://bpmn.io/license for more information.
2523
2523
  */
2524
2524
  function Logo() {
2525
2525
  return jsxRuntime.jsxs("svg", {
@@ -2636,10 +2636,10 @@ function FormComponent(props) {
2636
2636
  });
2637
2637
  }
2638
2638
 
2639
- /**
2640
- *
2641
- * @param {string | undefined} expression
2642
- * @param {import('../../types').Data} data
2639
+ /**
2640
+ *
2641
+ * @param {string | undefined} expression
2642
+ * @param {import('../../types').Data} data
2643
2643
  */
2644
2644
  function useEvaluation(expression, data) {
2645
2645
  const initialData = useService('form')._getState().initialData;
@@ -2656,9 +2656,9 @@ function useEvaluation(expression, data) {
2656
2656
  return conditionChecker.evaluate(expression, filteredData);
2657
2657
  }
2658
2658
 
2659
- /**
2660
- *
2661
- * @param {string} value
2659
+ /**
2660
+ *
2661
+ * @param {string} value
2662
2662
  */
2663
2663
  function useExpressionValue(value) {
2664
2664
  const formData = useService('form')._getState().data;
@@ -2912,6 +2912,7 @@ function Numberfield(props) {
2912
2912
  }),
2913
2913
  children: [jsxRuntime.jsx("button", {
2914
2914
  class: "fjs-number-arrow-up",
2915
+ type: "button",
2915
2916
  onClick: () => increment(),
2916
2917
  tabIndex: -1,
2917
2918
  children: "\u02C4"
@@ -2919,6 +2920,7 @@ function Numberfield(props) {
2919
2920
  class: "fjs-number-arrow-separator"
2920
2921
  }), jsxRuntime.jsx("button", {
2921
2922
  class: "fjs-number-arrow-down",
2923
+ type: "button",
2922
2924
  onClick: () => decrement(),
2923
2925
  tabIndex: -1,
2924
2926
  children: "\u02C5"