@bpmn-io/form-js-viewer 1.7.2 → 1.7.3

package/LICENSE

@@ -1,23 +1,23 @@
-Copyright (c) 2021-present Camunda Services GmbH
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in the
-Software without restriction, including without limitation the rights to use, copy,
-modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
-and to permit persons to whom the Software is furnished to do so, subject to the
-following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-The source code responsible for displaying the bpmn.io project watermark that
-links back to https://bpmn.io as part of rendered diagrams MUST NOT be
-removed or changed. When this software is being used in a website or application,
-the watermark must stay fully visible and not visually overlapped by other elements.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
-INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
-PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+Copyright (c) 2021-present Camunda Services GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in the
+Software without restriction, including without limitation the rights to use, copy,
+modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+and to permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+The source code responsible for displaying the bpmn.io project watermark that
+links back to https://bpmn.io as part of rendered diagrams MUST NOT be
+removed or changed. When this software is being used in a website or application,
+the watermark must stay fully visible and not visually overlapped by other elements.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
 OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,189 +1,189 @@
-# @bpmn-io/form-js-viewer
-
-This library exports a form viewer for viewing and submitting forms. Use [our editor](../form-js-editor) to create and edit forms.
-
-
-## Installation
-
-```
-npm install @bpmn-io/form-js-viewer
-```
-
-
-## Usage
-
-```javascript
-import { Form } from '@bpmn-io/form-js-viewer';
-
-const schema = {
-  components: [
-    {
-      key: 'creditor',
-      label: 'Creditor',
-      type: 'textfield',
-      validate: {
-        required: true
-      }
-    }
-  ]
-};
-
-const data = {
-  creditor: 'John Doe Company'
-};
-
-const form = new Form({
-  container: document.querySelector('#form')
-});
-
-await form.importSchema(schema, data);
-
-// add event listeners
-form.on('submit', event => {
-  console.log('Form <submit>', event);
-});
-
-// provide a priority to event listeners
-form.on('changed', 500, event => {
-  console.log('Form <changed>', event);
-});
-```
-
-Check out [a full example](https://github.com/bpmn-io/form-js-examples).
-
-
-## Styling
-
-For proper styling include the `form-js.css` stylesheet and font used:
-
-```html
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
-
-<link href="https://unpkg.com/@bpmn-io/form-js/dist/assets/form-js.css" rel="stylesheet">
-```
-
-
-## API
-
-### `Form`
-
-Create a new form with options `{ container?: HTMLElement }`.
-
-```javascript
-import { Form } from '@bpmn-io/form-js-viewer';
-
-const form = new Form({
-  container: document.querySelector('#form')
-});
-```
-
-
-### `Form#importSchema(schema: Schema, data?: Data) => Promise<Result, Error>`
-
-Display a form represented via a form schema and the optional data.
-
-```javascript
-try {
-  await form.importSchema(schema);
-} catch (err) {
-  console.log('importing form failed', err);
-}
-```
-
-
-### `Form#submit() => { data: Data, errors: Errors }`
-
-Submit a form programatically.
-
-```javascript
-const {
-  data,
-  errors
-} = form.submit();
-
-if (Object.keys(errors).length) {
-  console.error('Form submitted with errors', errors);
-}
-```
-
-
-### `Form#validate() => Errors`
-
-Validate a form programatically.
-
-```javascript
-const errors = form.validate();
-
-if (Object.keys(errors).length) {
-  console.error('Form has errors', errors);
-}
-```
-
-
-### `Form#reset() => void`
-
-Reset a form programatically.
-
-
-### `Form#setProperty(key, value) => void`
-
-Set a form property such as `readOnly`.
-
-
-### `Form#attachTo(parentNode: HTMLElement) => void`
-
-
-Attach the form to a parent node.
-
-
-### `Form#detach() => void`
-
-
-Detach the form from its parent node.
-
-
-### `Form#on(event, fn) => void`
-
-Subscribe to an [event](#events).
-
-
-### `Form#destroy() => void`
-
-Remove form from the document.
-
-
-## Events
-
-### `changed :: { data, errors }`
-Fired off every time there is a form state change.
-
-### `submit :: { data, errors }`
-Fired off on form submission.
-
-### `import.done :: { error, warnings }`
-Fired whenever a schema has finished importing, whether it succeeds or fails.
-
-### Layouting events
-- `form.layoutCleared`
-- `form.layoutCalculated :: { rows }`
-
-### Lifecycle Events
-- `detach`
-- `attach`
-- `form.init`
-- `form.clear`
-- `form.destroy`
-- `diagram.clear`
-- `diagram.destroy`
-
-### Formfield events
-- `formField.add :: { formField }` 
-- `formField.remove :: { formField }` 
-- `formField.focus :: { formField }` 
-- `formField.blur :: { formField }`
-- `formField.search :: { formField, value }`
-
-
-## License
-
-Use under the terms of the [bpmn.io license](http://bpmn.io/license).
+# @bpmn-io/form-js-viewer
+
+This library exports a form viewer for viewing and submitting forms. Use [our editor](../form-js-editor) to create and edit forms.
+
+
+## Installation
+
+```
+npm install @bpmn-io/form-js-viewer
+```
+
+
+## Usage
+
+```javascript
+import { Form } from '@bpmn-io/form-js-viewer';
+
+const schema = {
+  components: [
+    {
+      key: 'creditor',
+      label: 'Creditor',
+      type: 'textfield',
+      validate: {
+        required: true
+      }
+    }
+  ]
+};
+
+const data = {
+  creditor: 'John Doe Company'
+};
+
+const form = new Form({
+  container: document.querySelector('#form')
+});
+
+await form.importSchema(schema, data);
+
+// add event listeners
+form.on('submit', event => {
+  console.log('Form <submit>', event);
+});
+
+// provide a priority to event listeners
+form.on('changed', 500, event => {
+  console.log('Form <changed>', event);
+});
+```
+
+Check out [a full example](https://github.com/bpmn-io/form-js-examples).
+
+
+## Styling
+
+For proper styling include the `form-js.css` stylesheet and font used:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
+
+<link href="https://unpkg.com/@bpmn-io/form-js/dist/assets/form-js.css" rel="stylesheet">
+```
+
+
+## API
+
+### `Form`
+
+Create a new form with options `{ container?: HTMLElement }`.
+
+```javascript
+import { Form } from '@bpmn-io/form-js-viewer';
+
+const form = new Form({
+  container: document.querySelector('#form')
+});
+```
+
+
+### `Form#importSchema(schema: Schema, data?: Data) => Promise<Result, Error>`
+
+Display a form represented via a form schema and the optional data.
+
+```javascript
+try {
+  await form.importSchema(schema);
+} catch (err) {
+  console.log('importing form failed', err);
+}
+```
+
+
+### `Form#submit() => { data: Data, errors: Errors }`
+
+Submit a form programatically.
+
+```javascript
+const {
+  data,
+  errors
+} = form.submit();
+
+if (Object.keys(errors).length) {
+  console.error('Form submitted with errors', errors);
+}
+```
+
+
+### `Form#validate() => Errors`
+
+Validate a form programatically.
+
+```javascript
+const errors = form.validate();
+
+if (Object.keys(errors).length) {
+  console.error('Form has errors', errors);
+}
+```
+
+
+### `Form#reset() => void`
+
+Reset a form programatically.
+
+
+### `Form#setProperty(key, value) => void`
+
+Set a form property such as `readOnly`.
+
+
+### `Form#attachTo(parentNode: HTMLElement) => void`
+
+
+Attach the form to a parent node.
+
+
+### `Form#detach() => void`
+
+
+Detach the form from its parent node.
+
+
+### `Form#on(event, fn) => void`
+
+Subscribe to an [event](#events).
+
+
+### `Form#destroy() => void`
+
+Remove form from the document.
+
+
+## Events
+
+### `changed :: { data, errors }`
+Fired off every time there is a form state change.
+
+### `submit :: { data, errors }`
+Fired off on form submission.
+
+### `import.done :: { error, warnings }`
+Fired whenever a schema has finished importing, whether it succeeds or fails.
+
+### Layouting events
+- `form.layoutCleared`
+- `form.layoutCalculated :: { rows }`
+
+### Lifecycle Events
+- `detach`
+- `attach`
+- `form.init`
+- `form.clear`
+- `form.destroy`
+- `diagram.clear`
+- `diagram.destroy`
+
+### Formfield events
+- `formField.add :: { formField }` 
+- `formField.remove :: { formField }` 
+- `formField.focus :: { formField }` 
+- `formField.blur :: { formField }`
+- `formField.search :: { formField, value }`
+
+
+## License
+
+Use under the terms of the [bpmn.io license](http://bpmn.io/license).

package/dist/index.cjs

@@ -6644,9 +6644,9 @@ class RepeatRenderManager {
     };
     const parentExpressionContextInfo = hooks.useContext(LocalExpressionContext);
     return jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: displayValues.map((value, index) => jsxRuntime.jsx(RepetitionScaffold, {
-        index: index,
-        value: value,
+      children: displayValues.map((itemValue, itemIndex) => jsxRuntime.jsx(RepetitionScaffold, {
+        itemIndex: itemIndex,
+        itemValue: itemValue,
         parentExpressionContextInfo: parentExpressionContextInfo,
         repeaterField: repeaterField,
         RowsRenderer: RowsRenderer,
@@ -6654,7 +6654,7 @@ class RepeatRenderManager {
         onDeleteItem: onDeleteItem,
         showRemove: showRemove,
         ...restProps
-      }, index))
+      }, itemIndex))
     });
   }
   RepeatFooter(props) {
@@ -6751,8 +6751,8 @@ class RepeatRenderManager {
  * Individual repetition of a repeated field and context scaffolding.
  *
  * @param {Object} props
- * @param {number} props.index
- * @param {Object} props.value
+ * @param {number} props.itemIndex
+ * @param {Object} props.itemValue
  * @param {Object} props.parentExpressionContextInfo
  * @param {Object} props.repeaterField
  * @param {Function} props.RowsRenderer
@@ -6763,8 +6763,8 @@ class RepeatRenderManager {
 
 const RepetitionScaffold = props => {
   const {
-    index,
-    value,
+    itemIndex,
+    itemValue,
     parentExpressionContextInfo,
     repeaterField,
     RowsRenderer,
@@ -6777,15 +6777,15 @@ const RepetitionScaffold = props => {
     ...restProps,
     indexes: {
       ...(indexes || {}),
-      [repeaterField.id]: index
+      [repeaterField.id]: itemIndex
     }
-  }), [index, indexes, repeaterField.id, restProps]);
+  }), [itemIndex, indexes, repeaterField.id, restProps]);
   const localExpressionContextInfo = hooks.useMemo(() => ({
     data: parentExpressionContextInfo.data,
-    this: value,
+    this: itemValue,
     parent: buildExpressionContext(parentExpressionContextInfo),
-    i: [...parentExpressionContextInfo.i, index + 1]
-  }), [index, parentExpressionContextInfo, value]);
+    i: [...parentExpressionContextInfo.i, itemIndex + 1]
+  }), [itemIndex, parentExpressionContextInfo, itemValue]);
   return !showRemove ? jsxRuntime.jsx(LocalExpressionContext.Provider, {
     value: localExpressionContextInfo,
     children: jsxRuntime.jsx(RowsRenderer, {
@@ -6804,8 +6804,8 @@ const RepetitionScaffold = props => {
     }), jsxRuntime.jsx("button", {
       type: "button",
       class: "fjs-repeat-row-remove",
-      "aria-label": `Remove list item ${index + 1}`,
-      onClick: () => onDeleteItem(index),
+      "aria-label": `Remove list item ${itemIndex + 1}`,
+      onClick: () => onDeleteItem(itemIndex),
       children: jsxRuntime.jsx("div", {
         class: "fjs-repeat-row-remove-icon-container",
         children: jsxRuntime.jsx(DeleteSvg, {})