@bolttech/form-engine 3.1.2-beta.1 → 3.1.2-beta.3

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 (4) hide show
  1. package/README.md +190 -54
  2. package/index.esm.js +317 -101
  3. package/package.json +2 -2
  4. package/src/components/index.d.ts +1 -0
package/README.md CHANGED
@@ -17,7 +17,7 @@ This is an adapter to be used with the bolttech form engine. Compatible with Nex
17
17
  6. [schema components](#schema-components)
18
18
 
19
19
  - 6.1 [formatters](#formatters)
20
- - 6.2 [masks] (#masks)
20
+ - 6.2 [masks](#masks)
21
21
  - 6.3 [nameToSubmit](#nametosubmit)
22
22
  - 6.4 [props](#props)
23
23
  - 6.5 [validations](#validations)
@@ -37,6 +37,7 @@ This is an adapter to be used with the bolttech form engine. Compatible with Nex
37
37
 
38
38
  9. [AsFormField](#asformfield)
39
39
  10. [AsFormFieldBuilder](#asformfieldbuilder)
40
+ 11. [AsFormFieldRepeater](#asformfieldrepeater)
40
41
 
41
42
  <a id="sample"></a>
42
43
 
@@ -124,7 +125,7 @@ Mappers are the configuration that needs to be provided in order to use componen
124
125
  The mapper configuration goes as it follows:
125
126
 
126
127
  | Prop | Type | Description |
127
- |------------------|------------------------|--------------------------------------------------------------------------------------------------------------------------|
128
+ | ---------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------ |
128
129
  | componentName | string | name to be used onto schema to identify the component to be rendered on a field |
129
130
  | events | TComponentPropsMapping | events mapping that will reference the component prop with the respective form-engine prop that will handle it's content |
130
131
  | valueChangeEvent | TValueChangeEvent | component handle function to define how the value is extracted from the 'onChange' event of the component |
@@ -134,7 +135,7 @@ The mapper configuration goes as it follows:
134
135
  `events` are optional and will reference component props that will provide it's dynamic behaviour:
135
136
 
136
137
  | Prop | Type | Description |
137
- |-----------------|--------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
138
+ | --------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
138
139
  | getValue | string | component property that will contain the value |
139
140
  | setValue | string | component property that handles onChange events triggered by the component |
140
141
  | onBlur | string | component property that handles onBlur events triggered by the component |
@@ -523,15 +524,15 @@ have a `Form` component and event callback functions needs to be setted
523
524
 
524
525
  Schema is the structure of the form, it will contain the logic to be rendered and configurations of the fields to apply dynamic logic
525
526
 
526
- | Prop | Type | Description |
527
- | -------------- | ----------------------- | ----------------------------------------------------------------------- |
528
- | index | string | unique form id to handle multiple form on form group |
529
- | action? | string | WIP: HTML form native action property to handle native form submissions |
530
- | method? | string | WIP: HTML form native method property to handle native form submissions |
531
- | config? | TSchemaFormConfig | Optional configuration object to set api and events debounce time |
532
- | initialValues? | Record<string, unknown> | initial values to be loaded on the form |
533
- | iVars? | Record<string, unknown> | dynamic values that can be changed externally to be used onto the form |
534
- | components? | IComponentSchema[] | components to be rendered defined on the mappers |
527
+ | Prop | Type | Description |
528
+ | ----------------------------------------------------------------------------------------------------------- | ----------------------- | ----------------------------------------------------------------------- |
529
+ | [index](../../docs/form-engine-core/src/interfaces/schema/interfaces/IFormSchema.md#index) | string | unique form id to handle multiple form on form group |
530
+ | [action](../../docs/form-engine-core/src/interfaces/schema/interfaces/IFormSchema.md#action)? | string | WIP: HTML form native action property to handle native form submissions |
531
+ | [method](../../docs/form-engine-core/src/interfaces/schema/interfaces/IFormSchema.md#method)? | string | WIP: HTML form native method property to handle native form submissions |
532
+ | [config](../../docs/form-engine-core/src/interfaces/schema/interfaces/IFormSchema.md#config)? | TSchemaFormConfig | Optional configuration object to set api and events debounce time |
533
+ | [initialValues](../../docs/form-engine-core/src/interfaces/schema/interfaces/IFormSchema.md#initialvalues)? | Record<string, unknown> | initial values to be loaded on the form |
534
+ | [iVars](../../docs/form-engine-core/src/interfaces/schema/interfaces/IFormSchema.md#ivars)? | Record<string, unknown> | dynamic values that can be changed externally to be used onto the form |
535
+ | [components](../../docs/form-engine-core/src/interfaces/schema/interfaces/IFormSchema.md#components)? | IComponentSchema[] | components to be rendered defined on the mappers |
535
536
 
536
537
  this root configuration can be defined onto the `Form` component except the `components`
537
538
 
@@ -565,19 +566,19 @@ const schema: IFormSchema = {
565
566
 
566
567
  Schema components contains the information of the component that will be rendered and the configurations he will exectute
567
568
 
568
- | Prop | Type | Description |
569
- | --------------------- | -------------------- | ------------------------------------------------------------------------------------------- |
570
- | component | string | component name defined on schema to render the correspondent component |
571
- | props? | TProps | props of the component ex: label |
572
- | name | string | unique id to identify the field onto form-engine |
573
- | nameToSubmit? | string | dot notation to submit a custom path to the component value ex: 'person.profile.firstName' |
574
- | validations? | TValidations | validations configuration described below |
575
- | api? | TApiEvent | api configuration described below |
576
- | visibilityConditions? | TVisibility[] | visibilityConditions configuration described below |
577
- | resetValues? | TResetValueMethods[] | resetValues configuration described below |
578
- | formatters? | TFormatters | formatters configuration described below |
579
- | masks? | TMasks | masks configuration described below |
580
- | children? | IComponentSchema[] | nested components to be rendered (if the current parent component accepts child components) |
569
+ | Prop | Type | Description |
570
+ | ------------------------------------------------------------------------------------------------------------------------------ | -------------------- | ------------------------------------------------------------------------------------------- |
571
+ | [component](../../docs/form-engine-core/src/interfaces/schema/interfaces/IComponentSchema.md#component) | string | component name defined on schema to render the correspondent component |
572
+ | [props](../../docs/form-engine-core/src/interfaces/schema/interfaces/IComponentSchema.md#props)? | TProps | props of the component ex: label |
573
+ | [name](../../docs/form-engine-core/src/interfaces/schema/interfaces/IComponentSchema.md#name) | string | unique id to identify the field onto form-engine |
574
+ | [nameToSubmit](../../docs/form-engine-core/src/interfaces/schema/interfaces/IComponentSchema.md#nametosubmit)? | string | dot notation to submit a custom path to the component value ex: 'person.profile.firstName' |
575
+ | [validations](../../docs/form-engine-core/src/interfaces/schema/interfaces/IComponentSchema.md#validations)? | TValidations | validations configuration described below |
576
+ | [api](../../docs/form-engine-core/src/interfaces/schema/interfaces/IComponentSchema.md#api)? | TApiEvent | api configuration described below |
577
+ | [visibilityConditions](../../docs/form-engine-core/src/interfaces/schema/interfaces/IComponentSchema.md#visibilityconditions)? | TVisibility[] | visibilityConditions configuration described below |
578
+ | [resetValues](../../docs/form-engine-core/src/interfaces/schema/interfaces/IComponentSchema.md#resetvalues)? | TResetValueMethods[] | resetValues configuration described below |
579
+ | [formatters](../../docs/form-engine-core/src/interfaces/schema/interfaces/IComponentSchema.md#formatters)? | TFormatters | formatters configuration described below |
580
+ | [masks](../../docs/form-engine-core/src/interfaces/schema/interfaces/IComponentSchema.md#masks)? | TMasks | masks configuration described below |
581
+ | [children](../../docs/form-engine-core/src/interfaces/schema/interfaces/IComponentSchema.md#children)? | IComponentSchema[] | nested components to be rendered (if the current parent component accepts child components) |
581
582
 
582
583
  ### Example
583
584
 
@@ -630,25 +631,54 @@ Schema components contains the information of the component that will be rendere
630
631
  }
631
632
  ```
632
633
 
634
+ Check the [TSDocs](../../docs/form-engine-core/src/interfaces/schema/interfaces/IComponentSchema.md) from `IComponentSchema` on form-engine-core
635
+
633
636
  <a id="formatters"></a>
634
637
 
635
638
  ## **formatters**
636
639
 
637
- formatters are methods that will format the input inserted on any field, they will format a value, regardless the event type,
640
+ formatters are methods that will format the input inserted on any field, they will format a value, regardless the event type.
641
+
642
+ | Prop | Type | Description |
643
+ | ------------------------------------------------------------------------------------------------------------ | ------------------------- | ---------------------------------------------------------------------------------------------------------------- |
644
+ | [callback](../../docs/form-engine-core/src/types/schema/type-aliases/TFormatters.md#callback)? | (value) => void | Custom formatter callback function |
645
+ | [capitalize](../../docs/form-engine-core/src/types/schema/type-aliases/TFormatters.md#capitalize)? | boolean | Capitalize the value |
646
+ | [dotEvery3chars](../../docs/form-engine-core/src/types/schema/type-aliases/TFormatters.md#dotevery3chars)? | boolean | Add a dot every 3 characters |
647
+ | [gapsCreditCard](../../docs/form-engine-core/src/types/schema/type-aliases/TFormatters.md#gapscreditcard) | string[] | Gaps to insert in credit card numbers |
648
+ | [maxLength](../../docs/form-engine-core/src/types/schema/type-aliases/TFormatters.md#maxlength)? | number | Truncates the input value to a specified maximum length if necessary |
649
+ | [onlyFloatNumber](../../docs/form-engine-core/src/types/schema/type-aliases/TFormatters.md#onlyfloatnumber)? | TCurrencyMask | Allow only float numbers with specific precision and decimal |
650
+ | [onlyLetters](../../docs/form-engine-core/src/types/schema/type-aliases/TFormatters.md#onlyletters)? | boolean | Allow only letters |
651
+ | [onlyNumbers](../../docs/form-engine-core/src/types/schema/type-aliases/TFormatters.md#onlynumbers)? | boolean | Allow only numbers |
652
+ | [regex](../../docs/form-engine-core/src/types/schema/type-aliases/TFormatters.md#regex)? | string | Regular expression for formatting |
653
+ | [splitter](../../docs/form-engine-core/src/types/schema/type-aliases/TFormatters.md#splitter)? | TSplitterFormatterValue[] | Splitter values for formatting |
654
+ | [trim](../../docs/form-engine-core/src/types/schema/type-aliases/TFormatters.md#trim)? | boolean | Removes whitespace from both ends of this string and returns a new string, without modifying the original string |
655
+ | [uppercase](../../docs/form-engine-core/src/types/schema/type-aliases/TFormatters.md#uppercase)? | boolean | Convert the value to uppercase |
638
656
 
639
657
  ### Avaliable formatters
640
658
 
641
- Check the TSDocs from `TFormatters` on form-engine-core
659
+ Check the [TSDocs](../../docs/form-engine-core/src/types/schema/type-aliases/TFormatters.md) from `TFormatters` on form-engine-core
642
660
 
643
661
  <a id="masks"></a>
644
662
 
645
663
  ## **masks**
646
664
 
647
- masks are methods that will format the input inserted on any field, they will show to the user a formatted value, but the submission value will be the original input of the user
665
+ masks are methods that will format the input inserted on any field, they will show to the user a formatted value, but the submission value will be the original input of the user.
666
+
667
+ | Prop | Type | Description |
668
+ | --------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------ |
669
+ | [card](../../docs/form-engine-core/src/types/schema/type-aliases/TMasks.md#card)? | boolean | Mask for card values |
670
+ | [cardDate](../../docs/form-engine-core/src/types/schema/type-aliases/TMasks.md#carddate)? | boolean | Mask for card date values |
671
+ | [currency](../../docs/form-engine-core/src/types/schema/type-aliases/TMasks.md#currency)? | TCurrencyMask | Mask for currency values |
672
+ | [custom](../../docs/form-engine-core/src/types/schema/type-aliases/TMasks.md#custom) | string | Custom mask pattern |
673
+ | [fein](../../docs/form-engine-core/src/types/schema/type-aliases/TMasks.md#fein)? | boolean | Mask for FEIN (Federal Employer Identification Number) |
674
+ | [generic](../../docs/form-engine-core/src/types/schema/type-aliases/TMasks.md#generic)? | TMaskGeneric[] | Array of generic masks |
675
+ | [replaceAll](../../docs/form-engine-core/src/types/schema/type-aliases/TMasks.md#replaceall)? | string | Value to replace all matches |
676
+ | [secureCreditCard](../../docs/form-engine-core/src/types/schema/type-aliases/TMasks.md#securecreditcard)? | boolean | Mask for securing credit card values |
677
+ | [callback](../../docs/form-engine-core/src/types/schema/type-aliases/TMasks.md#callback)? | (value, masks) => void | Custom mask callback function |
648
678
 
649
679
  ### Avaliable masks
650
680
 
651
- Check the TSDocs from `TMasks` on form-engine-core
681
+ Check the [TSDocs](../../docs/form-engine-core/src/types/schema/type-aliases/TMasks.md) from `TMasks` on form-engine-core
652
682
 
653
683
  ### From v2 to v3
654
684
 
@@ -731,7 +761,7 @@ validations let you set rules in order to validate a field, then show errorMessa
731
761
 
732
762
  ### Avaliable validations
733
763
 
734
- Check the TSDocs from `TValidationMethods` on form-engine-core
764
+ Check the [TSDocs](../../docs/form-engine-core/src/types/schema/type-aliases/TValidationMethods.md) from `TValidationMethods` on form-engine-core
735
765
 
736
766
  ### From v2 to v3
737
767
 
@@ -818,18 +848,18 @@ The configuration is as it follows:
818
848
 
819
849
  Each config you opt to use, needs to be filled with an API configuration, the configuration is as it follows:
820
850
 
821
- | Prop | Type | Description |
822
- | ------------------------ | --------------------------------- | ------------------------------------------------------------------------------------- |
823
- | method | 'GET' or 'POST' | HTTP method (only GET or POST) |
824
- | url | string | Request url ex: http://mockapi.org |
825
- | body? | Record<string, unknown> | Request body (only POST requests) |
826
- | headers? | OutgoingHttpHeaders | Avaliable HTTP headers |
827
- | queryParams? | Record<string,string> | url query params (to be appended to the already existing ones) |
828
- | resultPath? | string | response dot notation path to the value needed from the response |
829
- | fallbackValue? | unknown | default value to return if the API returns error |
830
- | preConditions? | TSchemaValidation | validations to occur before the request is made (check validations section) |
831
- | blockRequestWhenInvalid? | boolean | flag to only request the api config if the field is valid |
832
- | transform? | { callback:(payload) => unknown } | custom function to be passed as callback to transform the request in any other format |
851
+ | Prop | Type | Description |
852
+ | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------------------------------------------------------------------------------------- |
853
+ | [method](../../docs/form-engine-core/src/types/schema/type-aliases/TApiConfig.md#method) | 'GET' or 'POST' | HTTP method (only GET or POST) |
854
+ | [url](../../docs/form-engine-core/src/types/schema/type-aliases/TApiConfig.md#url) | string | Request url ex: http://mockapi.org |
855
+ | [body](../../docs/form-engine-core/src/types/schema/type-aliases/TApiConfig.md#body)? | Record<string, unknown> | Request body (only POST requests) |
856
+ | [headers](../../docs/form-engine-core/src/types/schema/type-aliases/TApiConfig.md#headers)? | OutgoingHttpHeaders | Avaliable HTTP headers |
857
+ | [queryParams](../../docs/form-engine-core/src/types/schema/type-aliases/TApiConfig.md#queryparams)? | Record<string,string> | url query params (to be appended to the already existing ones) |
858
+ | [resultPath](../../docs/form-engine-core/src/types/schema/type-aliases/TApiConfig.md#resultpath)? | string | response dot notation path to the value needed from the response |
859
+ | [fallbackValue](../../docs/form-engine-core/src/types/schema/type-aliases/TApiConfig.md#fallbackvalue)? | unknown | default value to return if the API returns error |
860
+ | [preConditions](../../docs/form-engine-core/src/types/schema/type-aliases/TApiConfig.md#preconditions)? | TSchemaValidation | validations to occur before the request is made (check validations section) |
861
+ | [blockRequestWhenInvalid](../../docs/form-engine-core/src/types/schema/type-aliases/TApiConfig.md#blockrequestwheninvalid)? | boolean | flag to only request the api config if the field is valid |
862
+ | [transform](../../docs/form-engine-core/src/types/schema/type-aliases/TApiConfig.md#transform)? | { callback:(payload) => unknown } | custom function to be passed as callback to transform the request in any other format |
833
863
 
834
864
  ### From v2 to v3
835
865
 
@@ -869,7 +899,7 @@ const api = {
869
899
  };
870
900
  ```
871
901
 
872
- the API result is commonly used with `templating`, check [templating](#markdown-templating) section
902
+ the API result is commonly used with `templating`, check [templating](#templating) section
873
903
 
874
904
  <a id="resetvalues"></a>
875
905
 
@@ -877,14 +907,14 @@ the API result is commonly used with `templating`, check [templating](#markdown-
877
907
 
878
908
  resetValues lets you change input values with the same rules as validations
879
909
 
880
- | Prop | Type | Description |
881
- | -------------- | -------------------- | ---------------------------------------------------------------------------------- |
882
- | validations | TSchemaValidation | validations rules to be validated to reset the value to the configuration provided |
883
- | fields | string[] or string | field or fields that will recieve the resettled value |
884
- | events | Partial<TEvents>[] | events that will trigger the validation |
885
- | resettledValue | unknown[] or unknown | value or values to be set on the specified fields |
910
+ | Prop | Type | Description |
911
+ | --------------------------------------------------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------- |
912
+ | [validations](../../docs/form-engine-core/src/types/schema/type-aliases/TSchemaValidation.md) | TSchemaValidation | validations rules to be validated to reset the value to the configuration provided |
913
+ | fields | string[] or string | field or fields that will recieve the resettled value |
914
+ | events | Partial<TEvents>[] | events that will trigger the validation |
915
+ | resettledValue | unknown[] or unknown | value or values to be set on the specified fields |
886
916
 
887
- if the event occurs and all the validations returns `true` the resettled value will trigger and the `fields` specified will be filled with the `resettledValue` values
917
+ If the event occurs and all the validations returns `true` the resettled value will trigger and the `fields` specified will be filled with the `resettledValue` values
888
918
 
889
919
  ### from v2 to v3
890
920
 
@@ -1002,16 +1032,16 @@ resetPropertyValues: [
1002
1032
  bool: false,
1003
1033
  },
1004
1034
  },
1005
- ],
1035
+ ];
1006
1036
  ```
1007
1037
 
1008
- <a id="visibility">
1038
+ <a id="visibility"></a>
1009
1039
 
1010
1040
  ## **visibility**
1011
1041
 
1012
1042
  visibility prop is used to initiate the component with an initial visibility flag, before visibilityConditions take place, used on SSR
1013
1043
 
1014
- <a id="persistValue">
1044
+ <a id="persistValue"></a>
1015
1045
 
1016
1046
  ## **persistValue**
1017
1047
 
@@ -1123,7 +1153,7 @@ useFormGroup({ ids: ['form1', 'form2'], onData: (payload) => console.log(payload
1123
1153
  As `useForm`, `useFormGroup` serves the same purpose, but the difference is that it handles multiple forms and has limited callback functions to set:
1124
1154
 
1125
1155
  | method | payload | description |
1126
- |----------|-----------------------------------|-------------------------------------------------------------|
1156
+ | -------- | --------------------------------- | ----------------------------------------------------------- |
1127
1157
  | onData | TFormGroupOnDataEventPayload<T> | event occurring when a value is changing via input or logic |
1128
1158
  | onValid | TFormGroupOnValidEventPayload | event occurring when validation status changes on the form |
1129
1159
  | onSubmit | TFormGroupOnSubmitEventPayload<T> | event occurring when form submission is trigger |
@@ -1187,3 +1217,109 @@ Other than schema component properties like `validations`, `api`, etc.., it has
1187
1217
  | name | string | field name to be identified on the form |
1188
1218
  | formIndex | string | index of the form to be identified on the formGroup |
1189
1219
  | component | string | if mappers is provided from the formgroup context, you can assign the mapper by it's name instead of whole mapper config |
1220
+
1221
+ <a id="asformfieldrepeater"></a>
1222
+
1223
+ ## **AsFormFieldRepeater**
1224
+
1225
+ Component adapter to aid managing multiple forms that shares the same inputs
1226
+
1227
+ Props:
1228
+
1229
+ | Attr | Type | Description |
1230
+ | ----------------- | --------------------------------------------------------- | -------------------------------------------------------------------------- |
1231
+ | RepeaterComponent | ElementType<{ formIndex: string }> | Component with form schema or AsFormFieldBuilder elements |
1232
+ | addFieldName | string | name of the button in the RepeaterComponent to add forms |
1233
+ | removeFieldName | string | name of the button in the RepeaterComponent to remove forms |
1234
+ | existingElements | Record<string, unknown>[] | existing values emmitted from stateUpdater to restore previous used values |
1235
+ | stateUpdater | (payload: TFormGroupOnDataEventPayload<unknown>) => void; | callback function that reacts to RepeaterComponet values changes |
1236
+ | formPrefix | string | prefix for form names ex, prefix: foo, forms: ["foo1","foo2","foo3"] |
1237
+ | RepeaterFooter | ElementType<{ formIndex: string }> | Component with a button to add forms on the last position |
1238
+
1239
+ Common use case for this Adapter is to manage multiple forms that collects the same data ex: multiple person personal data
1240
+
1241
+ # Example
1242
+
1243
+ ## RepeaterComponent
1244
+
1245
+ ```javascript
1246
+ const FormElement = ({ formIndex }: { formIndex: string }) => {
1247
+ return (
1248
+ <>
1249
+ <AsFormFieldBuilder formIndex={formIndex} name="foo" component="input" props={{ label: 'foo' }} />
1250
+ <AsFormFieldBuilder formIndex={formIndex} name="bar" component="input" props={{ label: 'bar' }} />
1251
+ <AsFormFieldBuilder
1252
+ formIndex={formIndex}
1253
+ name="addForm"
1254
+ component="button"
1255
+ props={{
1256
+ text: 'add element',
1257
+ }}
1258
+ />
1259
+ <AsFormFieldBuilder
1260
+ formIndex={formIndex}
1261
+ name="removeForm"
1262
+ component="button"
1263
+ props={{
1264
+ text: 'remove element',
1265
+ }}
1266
+ />
1267
+ </>
1268
+ );
1269
+ };
1270
+ ```
1271
+
1272
+ Important notes when developing this component is that it needs to receive an object with a key **formIndex**
1273
+
1274
+ Optionally, but to add form management functionality, add two buttons with **ON_FIELD_CLICK** event capture (can't be of type submit)
1275
+ both that Field button names will be needed on the next step
1276
+
1277
+ ## RepeaterFooter
1278
+
1279
+ Optionally, you can develop a footer component with a button that will be added the bottom of the repeated forms
1280
+ and when you press that button will add a form at the bottom of the list
1281
+
1282
+ It's props needs to be an objet with a **formIndex** key, the button needs to have **ON_FIELD_CLICK** event capture (can't be of type submit)
1283
+ Note: the button name needs to be different from the names you gave to the buttons you are passing on the RepeaterComponent
1284
+
1285
+ ```javascript
1286
+ const FormElementFooter = ({ formIndex }: { formIndex: string }) => {
1287
+ return (
1288
+ <AsFormFieldBuilder
1289
+ formIndex={formIndex}
1290
+ name="addFormBelow"
1291
+ component="button"
1292
+ props={{
1293
+ text: 'add element below',
1294
+ }}
1295
+ />
1296
+ );
1297
+ };
1298
+ ```
1299
+
1300
+ ## AsFormFieldRepeater
1301
+
1302
+ Set the AsFormFieldRepeater adapter with the element you created above and the names that you gave to the button fields
1303
+
1304
+ ```javascript
1305
+ <AsFormFieldRepeater
1306
+ RepeaterComponent={FormElement}
1307
+ RepeaterFooter={FormElementFooter}
1308
+ addFieldName="addForm"
1309
+ removeFieldName="removeForm"
1310
+ formPrefix="insured"
1311
+ stateUpdater={(payload) => {
1312
+ console.log(payload);
1313
+ }}
1314
+ />
1315
+ ```
1316
+
1317
+ **RepeaterComponent** and **RepeaterFooter** you set the elements created above
1318
+
1319
+ **addFieldName** you set the name to the button that will add a form on the position it's being clicked
1320
+
1321
+ **removeFieldName** you set the name to the button that will remove a form on the position it's being clicked
1322
+
1323
+ **formPrefix** the prefix for the forms emmited on **stateUpdater** enumerated
1324
+
1325
+ **stateUpdater** callback function that will receive the form values (similar to onData)
package/index.esm.js CHANGED
@@ -44,7 +44,7 @@ var classofRaw$1 = function (it) {
44
44
 
45
45
  var uncurryThis$b = functionUncurryThis;
46
46
  var fails$c = fails$e;
47
- var classof$2 = classofRaw$1;
47
+ var classof$3 = classofRaw$1;
48
48
 
49
49
  var $Object$4 = Object;
50
50
  var split = uncurryThis$b(''.split);
@@ -55,7 +55,7 @@ var indexedObject = fails$c(function () {
55
55
  // eslint-disable-next-line no-prototype-builtins -- safe
56
56
  return !$Object$4('z').propertyIsEnumerable(0);
57
57
  }) ? function (it) {
58
- return classof$2(it) === 'String' ? split(it, '') : $Object$4(it);
58
+ return classof$3(it) === 'String' ? split(it, '') : $Object$4(it);
59
59
  } : $Object$4;
60
60
 
61
61
  // we can't use just `it == null` since of `document.all` special case
@@ -66,21 +66,21 @@ var isNullOrUndefined$2 = function (it) {
66
66
 
67
67
  var isNullOrUndefined$1 = isNullOrUndefined$2;
68
68
 
69
- var $TypeError$7 = TypeError;
69
+ var $TypeError$8 = TypeError;
70
70
 
71
71
  // `RequireObjectCoercible` abstract operation
72
72
  // https://tc39.es/ecma262/#sec-requireobjectcoercible
73
73
  var requireObjectCoercible$3 = function (it) {
74
- if (isNullOrUndefined$1(it)) throw new $TypeError$7("Can't call method on " + it);
74
+ if (isNullOrUndefined$1(it)) throw new $TypeError$8("Can't call method on " + it);
75
75
  return it;
76
76
  };
77
77
 
78
78
  // toObject with fallback for non-array-like ES3 strings
79
- var IndexedObject$1 = indexedObject;
79
+ var IndexedObject$2 = indexedObject;
80
80
  var requireObjectCoercible$2 = requireObjectCoercible$3;
81
81
 
82
82
  var toIndexedObject$5 = function (it) {
83
- return IndexedObject$1(requireObjectCoercible$2(it));
83
+ return IndexedObject$2(requireObjectCoercible$2(it));
84
84
  };
85
85
 
86
86
  var check = function (it) {
@@ -101,24 +101,24 @@ var globalThis_1 =
101
101
 
102
102
  var sharedStore = {exports: {}};
103
103
 
104
- var globalThis$c = globalThis_1;
104
+ var globalThis$d = globalThis_1;
105
105
 
106
106
  // eslint-disable-next-line es/no-object-defineproperty -- safe
107
107
  var defineProperty$5 = Object.defineProperty;
108
108
 
109
109
  var defineGlobalProperty$3 = function (key, value) {
110
110
  try {
111
- defineProperty$5(globalThis$c, key, { value: value, configurable: true, writable: true });
111
+ defineProperty$5(globalThis$d, key, { value: value, configurable: true, writable: true });
112
112
  } catch (error) {
113
- globalThis$c[key] = value;
113
+ globalThis$d[key] = value;
114
114
  } return value;
115
115
  };
116
116
 
117
- var globalThis$b = globalThis_1;
117
+ var globalThis$c = globalThis_1;
118
118
  var defineGlobalProperty$2 = defineGlobalProperty$3;
119
119
 
120
120
  var SHARED = '__core-js_shared__';
121
- var store$3 = sharedStore.exports = globalThis$b[SHARED] || defineGlobalProperty$2(SHARED, {});
121
+ var store$3 = sharedStore.exports = globalThis$c[SHARED] || defineGlobalProperty$2(SHARED, {});
122
122
 
123
123
  (store$3.versions || (store$3.versions = [])).push({
124
124
  version: '3.39.0',
@@ -140,12 +140,12 @@ var $Object$3 = Object;
140
140
 
141
141
  // `ToObject` abstract operation
142
142
  // https://tc39.es/ecma262/#sec-toobject
143
- var toObject$4 = function (argument) {
143
+ var toObject$5 = function (argument) {
144
144
  return $Object$3(requireObjectCoercible$1(argument));
145
145
  };
146
146
 
147
147
  var uncurryThis$a = functionUncurryThis;
148
- var toObject$3 = toObject$4;
148
+ var toObject$4 = toObject$5;
149
149
 
150
150
  var hasOwnProperty = uncurryThis$a({}.hasOwnProperty);
151
151
 
@@ -153,7 +153,7 @@ var hasOwnProperty = uncurryThis$a({}.hasOwnProperty);
153
153
  // https://tc39.es/ecma262/#sec-hasownproperty
154
154
  // eslint-disable-next-line es/no-object-hasown -- safe
155
155
  var hasOwnProperty_1 = Object.hasOwn || function hasOwn(it, key) {
156
- return hasOwnProperty(toObject$3(it), key);
156
+ return hasOwnProperty(toObject$4(it), key);
157
157
  };
158
158
 
159
159
  var uncurryThis$9 = functionUncurryThis;
@@ -166,19 +166,19 @@ var uid$2 = function (key) {
166
166
  return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$2(++id + postfix, 36);
167
167
  };
168
168
 
169
- var globalThis$a = globalThis_1;
169
+ var globalThis$b = globalThis_1;
170
170
 
171
- var navigator = globalThis$a.navigator;
172
- var userAgent$3 = navigator && navigator.userAgent;
171
+ var navigator = globalThis$b.navigator;
172
+ var userAgent$4 = navigator && navigator.userAgent;
173
173
 
174
- var environmentUserAgent = userAgent$3 ? String(userAgent$3) : '';
174
+ var environmentUserAgent = userAgent$4 ? String(userAgent$4) : '';
175
175
 
176
- var globalThis$9 = globalThis_1;
177
- var userAgent$2 = environmentUserAgent;
176
+ var globalThis$a = globalThis_1;
177
+ var userAgent$3 = environmentUserAgent;
178
178
 
179
- var process = globalThis$9.process;
180
- var Deno = globalThis$9.Deno;
181
- var versions = process && process.versions || Deno && Deno.version;
179
+ var process = globalThis$a.process;
180
+ var Deno$1 = globalThis$a.Deno;
181
+ var versions = process && process.versions || Deno$1 && Deno$1.version;
182
182
  var v8 = versions && versions.v8;
183
183
  var match, version;
184
184
 
@@ -191,10 +191,10 @@ if (v8) {
191
191
 
192
192
  // BrowserFS NodeJS `process` polyfill incorrectly set `.v8` to `0.0`
193
193
  // so check `userAgent` even if `.v8` exists, but 0
194
- if (!version && userAgent$2) {
195
- match = userAgent$2.match(/Edge\/(\d+)/);
194
+ if (!version && userAgent$3) {
195
+ match = userAgent$3.match(/Edge\/(\d+)/);
196
196
  if (!match || match[1] >= 74) {
197
- match = userAgent$2.match(/Chrome\/(\d+)/);
197
+ match = userAgent$3.match(/Chrome\/(\d+)/);
198
198
  if (match) version = +match[1];
199
199
  }
200
200
  }
@@ -204,9 +204,9 @@ var environmentV8Version = version;
204
204
  /* eslint-disable es/no-symbol -- required for testing */
205
205
  var V8_VERSION = environmentV8Version;
206
206
  var fails$b = fails$e;
207
- var globalThis$8 = globalThis_1;
207
+ var globalThis$9 = globalThis_1;
208
208
 
209
- var $String$5 = globalThis$8.String;
209
+ var $String$5 = globalThis$9.String;
210
210
 
211
211
  // eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing
212
212
  var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$b(function () {
@@ -227,14 +227,14 @@ var useSymbolAsUid = NATIVE_SYMBOL$1 &&
227
227
  !Symbol.sham &&
228
228
  typeof Symbol.iterator == 'symbol';
229
229
 
230
- var globalThis$7 = globalThis_1;
230
+ var globalThis$8 = globalThis_1;
231
231
  var shared$2 = shared$3;
232
232
  var hasOwn$9 = hasOwnProperty_1;
233
233
  var uid$1 = uid$2;
234
234
  var NATIVE_SYMBOL = symbolConstructorDetection;
235
235
  var USE_SYMBOL_AS_UID$1 = useSymbolAsUid;
236
236
 
237
- var Symbol$1 = globalThis$7.Symbol;
237
+ var Symbol$1 = globalThis$8.Symbol;
238
238
  var WellKnownSymbolsStore = shared$2('wks');
239
239
  var createWellKnownSymbol = USE_SYMBOL_AS_UID$1 ? Symbol$1['for'] || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || uid$1;
240
240
 
@@ -267,12 +267,12 @@ var isObject$8 = function (it) {
267
267
  var isObject$7 = isObject$8;
268
268
 
269
269
  var $String$4 = String;
270
- var $TypeError$6 = TypeError;
270
+ var $TypeError$7 = TypeError;
271
271
 
272
272
  // `Assert: Type(argument) is Object`
273
273
  var anObject$6 = function (argument) {
274
274
  if (isObject$7(argument)) return argument;
275
- throw new $TypeError$6($String$4(argument) + ' is not an object');
275
+ throw new $TypeError$7($String$4(argument) + ' is not an object');
276
276
  };
277
277
 
278
278
  var objectDefineProperties = {};
@@ -300,10 +300,10 @@ var v8PrototypeDefineBug = DESCRIPTORS$9 && fails$9(function () {
300
300
 
301
301
  var objectDefineProperty = {};
302
302
 
303
- var globalThis$6 = globalThis_1;
303
+ var globalThis$7 = globalThis_1;
304
304
  var isObject$6 = isObject$8;
305
305
 
306
- var document$1 = globalThis$6.document;
306
+ var document$1 = globalThis$7.document;
307
307
  // typeof document.createElement is 'object' in old IE
308
308
  var EXISTS$1 = isObject$6(document$1) && isObject$6(document$1.createElement);
309
309
 
@@ -331,7 +331,7 @@ var functionCall = NATIVE_BIND ? call$6.bind(call$6) : function () {
331
331
  return call$6.apply(call$6, arguments);
332
332
  };
333
333
 
334
- var globalThis$5 = globalThis_1;
334
+ var globalThis$6 = globalThis_1;
335
335
  var isCallable$c = isCallable$e;
336
336
 
337
337
  var aFunction = function (argument) {
@@ -339,7 +339,7 @@ var aFunction = function (argument) {
339
339
  };
340
340
 
341
341
  var getBuiltIn$3 = function (namespace, method) {
342
- return arguments.length < 2 ? aFunction(globalThis$5[namespace]) : globalThis$5[namespace] && globalThis$5[namespace][method];
342
+ return arguments.length < 2 ? aFunction(globalThis$6[namespace]) : globalThis$6[namespace] && globalThis$6[namespace][method];
343
343
  };
344
344
 
345
345
  var uncurryThis$8 = functionUncurryThis;
@@ -373,29 +373,29 @@ var tryToString$2 = function (argument) {
373
373
  var isCallable$a = isCallable$e;
374
374
  var tryToString$1 = tryToString$2;
375
375
 
376
- var $TypeError$5 = TypeError;
376
+ var $TypeError$6 = TypeError;
377
377
 
378
378
  // `Assert: IsCallable(argument) is true`
379
- var aCallable$3 = function (argument) {
379
+ var aCallable$4 = function (argument) {
380
380
  if (isCallable$a(argument)) return argument;
381
- throw new $TypeError$5(tryToString$1(argument) + ' is not a function');
381
+ throw new $TypeError$6(tryToString$1(argument) + ' is not a function');
382
382
  };
383
383
 
384
- var aCallable$2 = aCallable$3;
384
+ var aCallable$3 = aCallable$4;
385
385
  var isNullOrUndefined = isNullOrUndefined$2;
386
386
 
387
387
  // `GetMethod` abstract operation
388
388
  // https://tc39.es/ecma262/#sec-getmethod
389
389
  var getMethod$1 = function (V, P) {
390
390
  var func = V[P];
391
- return isNullOrUndefined(func) ? undefined : aCallable$2(func);
391
+ return isNullOrUndefined(func) ? undefined : aCallable$3(func);
392
392
  };
393
393
 
394
394
  var call$5 = functionCall;
395
395
  var isCallable$9 = isCallable$e;
396
396
  var isObject$5 = isObject$8;
397
397
 
398
- var $TypeError$4 = TypeError;
398
+ var $TypeError$5 = TypeError;
399
399
 
400
400
  // `OrdinaryToPrimitive` abstract operation
401
401
  // https://tc39.es/ecma262/#sec-ordinarytoprimitive
@@ -404,7 +404,7 @@ var ordinaryToPrimitive$1 = function (input, pref) {
404
404
  if (pref === 'string' && isCallable$9(fn = input.toString) && !isObject$5(val = call$5(fn, input))) return val;
405
405
  if (isCallable$9(fn = input.valueOf) && !isObject$5(val = call$5(fn, input))) return val;
406
406
  if (pref !== 'string' && isCallable$9(fn = input.toString) && !isObject$5(val = call$5(fn, input))) return val;
407
- throw new $TypeError$4("Can't convert object to primitive value");
407
+ throw new $TypeError$5("Can't convert object to primitive value");
408
408
  };
409
409
 
410
410
  var call$4 = functionCall;
@@ -414,7 +414,7 @@ var getMethod = getMethod$1;
414
414
  var ordinaryToPrimitive = ordinaryToPrimitive$1;
415
415
  var wellKnownSymbol$7 = wellKnownSymbol$8;
416
416
 
417
- var $TypeError$3 = TypeError;
417
+ var $TypeError$4 = TypeError;
418
418
  var TO_PRIMITIVE = wellKnownSymbol$7('toPrimitive');
419
419
 
420
420
  // `ToPrimitive` abstract operation
@@ -427,7 +427,7 @@ var toPrimitive$1 = function (input, pref) {
427
427
  if (pref === undefined) pref = 'default';
428
428
  result = call$4(exoticToPrim, input, pref);
429
429
  if (!isObject$4(result) || isSymbol$1(result)) return result;
430
- throw new $TypeError$3("Can't convert object to primitive value");
430
+ throw new $TypeError$4("Can't convert object to primitive value");
431
431
  }
432
432
  if (pref === undefined) pref = 'number';
433
433
  return ordinaryToPrimitive(input, pref);
@@ -449,7 +449,7 @@ var V8_PROTOTYPE_DEFINE_BUG$1 = v8PrototypeDefineBug;
449
449
  var anObject$5 = anObject$6;
450
450
  var toPropertyKey$1 = toPropertyKey$2;
451
451
 
452
- var $TypeError$2 = TypeError;
452
+ var $TypeError$3 = TypeError;
453
453
  // eslint-disable-next-line es/no-object-defineproperty -- safe
454
454
  var $defineProperty = Object.defineProperty;
455
455
  // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
@@ -482,7 +482,7 @@ objectDefineProperty.f = DESCRIPTORS$7 ? V8_PROTOTYPE_DEFINE_BUG$1 ? function de
482
482
  if (IE8_DOM_DEFINE$1) try {
483
483
  return $defineProperty(O, P, Attributes);
484
484
  } catch (error) { /* empty */ }
485
- if ('get' in Attributes || 'set' in Attributes) throw new $TypeError$2('Accessors not supported');
485
+ if ('get' in Attributes || 'set' in Attributes) throw new $TypeError$3('Accessors not supported');
486
486
  if ('value' in Attributes) O[P] = Attributes.value;
487
487
  return O;
488
488
  };
@@ -536,19 +536,19 @@ var toLength = toLength$1;
536
536
 
537
537
  // `LengthOfArrayLike` abstract operation
538
538
  // https://tc39.es/ecma262/#sec-lengthofarraylike
539
- var lengthOfArrayLike$2 = function (obj) {
539
+ var lengthOfArrayLike$3 = function (obj) {
540
540
  return toLength(obj.length);
541
541
  };
542
542
 
543
543
  var toIndexedObject$4 = toIndexedObject$5;
544
544
  var toAbsoluteIndex = toAbsoluteIndex$1;
545
- var lengthOfArrayLike$1 = lengthOfArrayLike$2;
545
+ var lengthOfArrayLike$2 = lengthOfArrayLike$3;
546
546
 
547
547
  // `Array.prototype.{ indexOf, includes }` methods implementation
548
- var createMethod = function (IS_INCLUDES) {
548
+ var createMethod$1 = function (IS_INCLUDES) {
549
549
  return function ($this, el, fromIndex) {
550
550
  var O = toIndexedObject$4($this);
551
- var length = lengthOfArrayLike$1(O);
551
+ var length = lengthOfArrayLike$2(O);
552
552
  if (length === 0) return !IS_INCLUDES && -1;
553
553
  var index = toAbsoluteIndex(fromIndex, length);
554
554
  var value;
@@ -568,10 +568,10 @@ var createMethod = function (IS_INCLUDES) {
568
568
  var arrayIncludes = {
569
569
  // `Array.prototype.includes` method
570
570
  // https://tc39.es/ecma262/#sec-array.prototype.includes
571
- includes: createMethod(true),
571
+ includes: createMethod$1(true),
572
572
  // `Array.prototype.indexOf` method
573
573
  // https://tc39.es/ecma262/#sec-array.prototype.indexof
574
- indexOf: createMethod(false)
574
+ indexOf: createMethod$1(false)
575
575
  };
576
576
 
577
577
  var hiddenKeys$4 = {};
@@ -760,10 +760,10 @@ var addToUnscopables$1 = function (key) {
760
760
 
761
761
  var iterators = {};
762
762
 
763
- var globalThis$4 = globalThis_1;
763
+ var globalThis$5 = globalThis_1;
764
764
  var isCallable$8 = isCallable$e;
765
765
 
766
- var WeakMap$1 = globalThis$4.WeakMap;
766
+ var WeakMap$1 = globalThis$5.WeakMap;
767
767
 
768
768
  var weakMapBasicDetection = isCallable$8(WeakMap$1) && /native code/.test(String(WeakMap$1));
769
769
 
@@ -788,7 +788,7 @@ var createNonEnumerableProperty$4 = DESCRIPTORS$5 ? function (object, key, value
788
788
  };
789
789
 
790
790
  var NATIVE_WEAK_MAP = weakMapBasicDetection;
791
- var globalThis$3 = globalThis_1;
791
+ var globalThis$4 = globalThis_1;
792
792
  var isObject$3 = isObject$8;
793
793
  var createNonEnumerableProperty$3 = createNonEnumerableProperty$4;
794
794
  var hasOwn$7 = hasOwnProperty_1;
@@ -797,8 +797,8 @@ var sharedKey$1 = sharedKey$3;
797
797
  var hiddenKeys$1 = hiddenKeys$4;
798
798
 
799
799
  var OBJECT_ALREADY_INITIALIZED = 'Object already initialized';
800
- var TypeError$1 = globalThis$3.TypeError;
801
- var WeakMap = globalThis$3.WeakMap;
800
+ var TypeError$1 = globalThis$4.TypeError;
801
+ var WeakMap = globalThis$4.WeakMap;
802
802
  var set, get, has;
803
803
 
804
804
  var enforce = function (it) {
@@ -1091,7 +1091,7 @@ var POLYFILL = isForced$1.POLYFILL = 'P';
1091
1091
 
1092
1092
  var isForced_1 = isForced$1;
1093
1093
 
1094
- var globalThis$2 = globalThis_1;
1094
+ var globalThis$3 = globalThis_1;
1095
1095
  var getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f;
1096
1096
  var createNonEnumerableProperty$2 = createNonEnumerableProperty$4;
1097
1097
  var defineBuiltIn$3 = defineBuiltIn$4;
@@ -1120,11 +1120,11 @@ var _export = function (options, source) {
1120
1120
  var STATIC = options.stat;
1121
1121
  var FORCED, target, key, targetProperty, sourceProperty, descriptor;
1122
1122
  if (GLOBAL) {
1123
- target = globalThis$2;
1123
+ target = globalThis$3;
1124
1124
  } else if (STATIC) {
1125
- target = globalThis$2[TARGET] || defineGlobalProperty(TARGET, {});
1125
+ target = globalThis$3[TARGET] || defineGlobalProperty(TARGET, {});
1126
1126
  } else {
1127
- target = globalThis$2[TARGET] && globalThis$2[TARGET].prototype;
1127
+ target = globalThis$3[TARGET] && globalThis$3[TARGET].prototype;
1128
1128
  }
1129
1129
  if (target) for (key in source) {
1130
1130
  sourceProperty = source[key];
@@ -1157,7 +1157,7 @@ var correctPrototypeGetter = !fails$5(function () {
1157
1157
 
1158
1158
  var hasOwn$2 = hasOwnProperty_1;
1159
1159
  var isCallable$3 = isCallable$e;
1160
- var toObject$2 = toObject$4;
1160
+ var toObject$3 = toObject$5;
1161
1161
  var sharedKey = sharedKey$3;
1162
1162
  var CORRECT_PROTOTYPE_GETTER = correctPrototypeGetter;
1163
1163
 
@@ -1169,7 +1169,7 @@ var ObjectPrototype = $Object$1.prototype;
1169
1169
  // https://tc39.es/ecma262/#sec-object.getprototypeof
1170
1170
  // eslint-disable-next-line es/no-object-getprototypeof -- safe
1171
1171
  var objectGetPrototypeOf = CORRECT_PROTOTYPE_GETTER ? $Object$1.getPrototypeOf : function (O) {
1172
- var object = toObject$2(O);
1172
+ var object = toObject$3(O);
1173
1173
  if (hasOwn$2(object, IE_PROTO)) return object[IE_PROTO];
1174
1174
  var constructor = object.constructor;
1175
1175
  if (isCallable$3(constructor) && object instanceof constructor) {
@@ -1253,12 +1253,12 @@ var iteratorCreateConstructor = function (IteratorConstructor, NAME, next, ENUME
1253
1253
  };
1254
1254
 
1255
1255
  var uncurryThis$3 = functionUncurryThis;
1256
- var aCallable$1 = aCallable$3;
1256
+ var aCallable$2 = aCallable$4;
1257
1257
 
1258
1258
  var functionUncurryThisAccessor = function (object, key, method) {
1259
1259
  try {
1260
1260
  // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
1261
- return uncurryThis$3(aCallable$1(Object.getOwnPropertyDescriptor(object, key)[method]));
1261
+ return uncurryThis$3(aCallable$2(Object.getOwnPropertyDescriptor(object, key)[method]));
1262
1262
  } catch (error) { /* empty */ }
1263
1263
  };
1264
1264
 
@@ -1271,11 +1271,11 @@ var isPossiblePrototype$1 = function (argument) {
1271
1271
  var isPossiblePrototype = isPossiblePrototype$1;
1272
1272
 
1273
1273
  var $String$1 = String;
1274
- var $TypeError$1 = TypeError;
1274
+ var $TypeError$2 = TypeError;
1275
1275
 
1276
1276
  var aPossiblePrototype$1 = function (argument) {
1277
1277
  if (isPossiblePrototype(argument)) return argument;
1278
- throw new $TypeError$1("Can't set " + $String$1(argument) + ' as a prototype');
1278
+ throw new $TypeError$2("Can't set " + $String$1(argument) + ' as a prototype');
1279
1279
  };
1280
1280
 
1281
1281
  /* eslint-disable no-proto -- safe */
@@ -1307,7 +1307,7 @@ var objectSetPrototypeOf = Object.setPrototypeOf || ('__proto__' in {} ? functio
1307
1307
  };
1308
1308
  }() : undefined);
1309
1309
 
1310
- var $$2 = _export;
1310
+ var $$3 = _export;
1311
1311
  var call$2 = functionCall;
1312
1312
  var FunctionName = functionName;
1313
1313
  var isCallable$1 = isCallable$e;
@@ -1395,7 +1395,7 @@ var iteratorDefine = function (Iterable, NAME, IteratorConstructor, next, DEFAUL
1395
1395
  if (BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME || !(KEY in IterablePrototype)) {
1396
1396
  defineBuiltIn$1(IterablePrototype, KEY, methods[KEY]);
1397
1397
  }
1398
- } else $$2({ target: NAME, proto: true, forced: BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME }, methods);
1398
+ } else $$3({ target: NAME, proto: true, forced: BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME }, methods);
1399
1399
  }
1400
1400
 
1401
1401
  // define iterator
@@ -1518,7 +1518,7 @@ var DOMTokenListPrototype$1 = classList && classList.constructor && classList.co
1518
1518
 
1519
1519
  var domTokenListPrototype = DOMTokenListPrototype$1 === Object.prototype ? undefined : DOMTokenListPrototype$1;
1520
1520
 
1521
- var globalThis$1 = globalThis_1;
1521
+ var globalThis$2 = globalThis_1;
1522
1522
  var DOMIterables = domIterables;
1523
1523
  var DOMTokenListPrototype = domTokenListPrototype;
1524
1524
  var ArrayIteratorMethods = es_array_iterator;
@@ -1550,7 +1550,7 @@ var handlePrototype = function (CollectionPrototype, COLLECTION_NAME) {
1550
1550
  };
1551
1551
 
1552
1552
  for (var COLLECTION_NAME in DOMIterables) {
1553
- handlePrototype(globalThis$1[COLLECTION_NAME] && globalThis$1[COLLECTION_NAME].prototype, COLLECTION_NAME);
1553
+ handlePrototype(globalThis$2[COLLECTION_NAME] && globalThis$2[COLLECTION_NAME].prototype, COLLECTION_NAME);
1554
1554
  }
1555
1555
 
1556
1556
  handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
@@ -1562,8 +1562,8 @@ var fails$3 = fails$e;
1562
1562
  var objectKeys = objectKeys$2;
1563
1563
  var getOwnPropertySymbolsModule = objectGetOwnPropertySymbols;
1564
1564
  var propertyIsEnumerableModule = objectPropertyIsEnumerable;
1565
- var toObject$1 = toObject$4;
1566
- var IndexedObject = indexedObject;
1565
+ var toObject$2 = toObject$5;
1566
+ var IndexedObject$1 = indexedObject;
1567
1567
 
1568
1568
  // eslint-disable-next-line es/no-object-assign -- safe
1569
1569
  var $assign = Object.assign;
@@ -1594,13 +1594,13 @@ var objectAssign = !$assign || fails$3(function () {
1594
1594
  alphabet.split('').forEach(function (chr) { B[chr] = chr; });
1595
1595
  return $assign({}, A)[symbol] !== 7 || objectKeys($assign({}, B)).join('') !== alphabet;
1596
1596
  }) ? function assign(target, source) { // eslint-disable-line no-unused-vars -- required for `.length`
1597
- var T = toObject$1(target);
1597
+ var T = toObject$2(target);
1598
1598
  var argumentsLength = arguments.length;
1599
1599
  var index = 1;
1600
1600
  var getOwnPropertySymbols = getOwnPropertySymbolsModule.f;
1601
1601
  var propertyIsEnumerable = propertyIsEnumerableModule.f;
1602
1602
  while (argumentsLength > index) {
1603
- var S = IndexedObject(arguments[index++]);
1603
+ var S = IndexedObject$1(arguments[index++]);
1604
1604
  var keys = getOwnPropertySymbols ? concat(objectKeys(S), getOwnPropertySymbols(S)) : objectKeys(S);
1605
1605
  var length = keys.length;
1606
1606
  var j = 0;
@@ -1612,13 +1612,13 @@ var objectAssign = !$assign || fails$3(function () {
1612
1612
  } return T;
1613
1613
  } : $assign;
1614
1614
 
1615
- var $$1 = _export;
1615
+ var $$2 = _export;
1616
1616
  var assign = objectAssign;
1617
1617
 
1618
1618
  // `Object.assign` method
1619
1619
  // https://tc39.es/ecma262/#sec-object.assign
1620
1620
  // eslint-disable-next-line es/no-object-assign -- required for testing
1621
- $$1({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }, {
1621
+ $$2({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }, {
1622
1622
  assign: assign
1623
1623
  });
1624
1624
 
@@ -1809,10 +1809,10 @@ const useFormGroupContext = props => {
1809
1809
 
1810
1810
  var tryToString = tryToString$2;
1811
1811
 
1812
- var $TypeError = TypeError;
1812
+ var $TypeError$1 = TypeError;
1813
1813
 
1814
1814
  var deletePropertyOrThrow$1 = function (O, P) {
1815
- if (!delete O[P]) throw new $TypeError('Cannot delete property ' + tryToString(P) + ' of ' + tryToString(O));
1815
+ if (!delete O[P]) throw new $TypeError$1('Cannot delete property ' + tryToString(P) + ' of ' + tryToString(O));
1816
1816
  };
1817
1817
 
1818
1818
  var wellKnownSymbol$1 = wellKnownSymbol$8;
@@ -1843,7 +1843,7 @@ var tryGet = function (it, key) {
1843
1843
  };
1844
1844
 
1845
1845
  // getting tag from ES6+ `Object.prototype.toString`
1846
- var classof$1 = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) {
1846
+ var classof$2 = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) {
1847
1847
  var O, tag, result;
1848
1848
  return it === undefined ? 'Undefined' : it === null ? 'Null'
1849
1849
  // @@toStringTag case
@@ -1854,12 +1854,12 @@ var classof$1 = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) {
1854
1854
  : (result = classofRaw(O)) === 'Object' && isCallable(O.callee) ? 'Arguments' : result;
1855
1855
  };
1856
1856
 
1857
- var classof = classof$1;
1857
+ var classof$1 = classof$2;
1858
1858
 
1859
1859
  var $String = String;
1860
1860
 
1861
1861
  var toString$1 = function (argument) {
1862
- if (classof(argument) === 'Symbol') throw new TypeError('Cannot convert a Symbol value to a string');
1862
+ if (classof$1(argument) === 'Symbol') throw new TypeError('Cannot convert a Symbol value to a string');
1863
1863
  return $String(argument);
1864
1864
  };
1865
1865
 
@@ -1911,7 +1911,7 @@ var arraySort = sort;
1911
1911
 
1912
1912
  var fails$2 = fails$e;
1913
1913
 
1914
- var arrayMethodIsStrict$1 = function (METHOD_NAME, argument) {
1914
+ var arrayMethodIsStrict$2 = function (METHOD_NAME, argument) {
1915
1915
  var method = [][METHOD_NAME];
1916
1916
  return !!method && fails$2(function () {
1917
1917
  // eslint-disable-next-line no-useless-call -- required for testing
@@ -1919,9 +1919,9 @@ var arrayMethodIsStrict$1 = function (METHOD_NAME, argument) {
1919
1919
  });
1920
1920
  };
1921
1921
 
1922
- var userAgent$1 = environmentUserAgent;
1922
+ var userAgent$2 = environmentUserAgent;
1923
1923
 
1924
- var firefox = userAgent$1.match(/firefox\/(\d+)/i);
1924
+ var firefox = userAgent$2.match(/firefox\/(\d+)/i);
1925
1925
 
1926
1926
  var environmentFfVersion = !!firefox && +firefox[1];
1927
1927
 
@@ -1929,22 +1929,22 @@ var UA = environmentUserAgent;
1929
1929
 
1930
1930
  var environmentIsIeOrEdge = /MSIE|Trident/.test(UA);
1931
1931
 
1932
- var userAgent = environmentUserAgent;
1932
+ var userAgent$1 = environmentUserAgent;
1933
1933
 
1934
- var webkit = userAgent.match(/AppleWebKit\/(\d+)\./);
1934
+ var webkit = userAgent$1.match(/AppleWebKit\/(\d+)\./);
1935
1935
 
1936
1936
  var environmentWebkitVersion = !!webkit && +webkit[1];
1937
1937
 
1938
- var $ = _export;
1938
+ var $$1 = _export;
1939
1939
  var uncurryThis = functionUncurryThis;
1940
- var aCallable = aCallable$3;
1941
- var toObject = toObject$4;
1942
- var lengthOfArrayLike = lengthOfArrayLike$2;
1940
+ var aCallable$1 = aCallable$4;
1941
+ var toObject$1 = toObject$5;
1942
+ var lengthOfArrayLike$1 = lengthOfArrayLike$3;
1943
1943
  var deletePropertyOrThrow = deletePropertyOrThrow$1;
1944
1944
  var toString = toString$1;
1945
1945
  var fails$1 = fails$e;
1946
1946
  var internalSort = arraySort;
1947
- var arrayMethodIsStrict = arrayMethodIsStrict$1;
1947
+ var arrayMethodIsStrict$1 = arrayMethodIsStrict$2;
1948
1948
  var FF = environmentFfVersion;
1949
1949
  var IE_OR_EDGE = environmentIsIeOrEdge;
1950
1950
  var V8 = environmentV8Version;
@@ -1963,7 +1963,7 @@ var FAILS_ON_NULL = fails$1(function () {
1963
1963
  test.sort(null);
1964
1964
  });
1965
1965
  // Old WebKit
1966
- var STRICT_METHOD = arrayMethodIsStrict('sort');
1966
+ var STRICT_METHOD = arrayMethodIsStrict$1('sort');
1967
1967
 
1968
1968
  var STABLE_SORT = !fails$1(function () {
1969
1969
  // feature detection can be too slow, so check engines versions
@@ -2000,7 +2000,7 @@ var STABLE_SORT = !fails$1(function () {
2000
2000
  return result !== 'DGBEFHACIJK';
2001
2001
  });
2002
2002
 
2003
- var FORCED = FAILS_ON_UNDEFINED || !FAILS_ON_NULL || !STRICT_METHOD || !STABLE_SORT;
2003
+ var FORCED$1 = FAILS_ON_UNDEFINED || !FAILS_ON_NULL || !STRICT_METHOD || !STABLE_SORT;
2004
2004
 
2005
2005
  var getSortCompare = function (comparefn) {
2006
2006
  return function (x, y) {
@@ -2013,16 +2013,16 @@ var getSortCompare = function (comparefn) {
2013
2013
 
2014
2014
  // `Array.prototype.sort` method
2015
2015
  // https://tc39.es/ecma262/#sec-array.prototype.sort
2016
- $({ target: 'Array', proto: true, forced: FORCED }, {
2016
+ $$1({ target: 'Array', proto: true, forced: FORCED$1 }, {
2017
2017
  sort: function sort(comparefn) {
2018
- if (comparefn !== undefined) aCallable(comparefn);
2018
+ if (comparefn !== undefined) aCallable$1(comparefn);
2019
2019
 
2020
- var array = toObject(this);
2020
+ var array = toObject$1(this);
2021
2021
 
2022
2022
  if (STABLE_SORT) return comparefn === undefined ? nativeSort(array) : nativeSort(array, comparefn);
2023
2023
 
2024
2024
  var items = [];
2025
- var arrayLength = lengthOfArrayLike(array);
2025
+ var arrayLength = lengthOfArrayLike$1(array);
2026
2026
  var itemsLength, index;
2027
2027
 
2028
2028
  for (index = 0; index < arrayLength; index++) {
@@ -2031,7 +2031,7 @@ $({ target: 'Array', proto: true, forced: FORCED }, {
2031
2031
 
2032
2032
  internalSort(items, getSortCompare(comparefn));
2033
2033
 
2034
- itemsLength = lengthOfArrayLike(items);
2034
+ itemsLength = lengthOfArrayLike$1(items);
2035
2035
  index = 0;
2036
2036
 
2037
2037
  while (index < itemsLength) array[index] = items[index++];
@@ -2113,6 +2113,15 @@ const eventsMapping = {
2113
2113
  ON_FIELD_CLICK: 'onClick',
2114
2114
  ON_FIELD_CLEARED: 'onFieldCleared'
2115
2115
  };
2116
+ const uniqueIdGen = () => {
2117
+ const timestamp = +new Date();
2118
+ const rand = Math.random() * 1e5;
2119
+ const finalNumb = timestamp * rand;
2120
+ const string = (Math.random() + 1).toString(36).substring(7);
2121
+ const mixedID = finalNumb + string + '-';
2122
+ const shuffle = str => [...str].sort(() => Math.random() - 0.5).join('');
2123
+ return shuffle(mixedID);
2124
+ };
2116
2125
 
2117
2126
  /**
2118
2127
  * Hook to register events callback functions
@@ -2648,6 +2657,97 @@ const AsFormFieldBuilder = props => {
2648
2657
  });
2649
2658
  };
2650
2659
 
2660
+ var aCallable = aCallable$4;
2661
+ var toObject = toObject$5;
2662
+ var IndexedObject = indexedObject;
2663
+ var lengthOfArrayLike = lengthOfArrayLike$3;
2664
+
2665
+ var $TypeError = TypeError;
2666
+
2667
+ var REDUCE_EMPTY = 'Reduce of empty array with no initial value';
2668
+
2669
+ // `Array.prototype.{ reduce, reduceRight }` methods implementation
2670
+ var createMethod = function (IS_RIGHT) {
2671
+ return function (that, callbackfn, argumentsLength, memo) {
2672
+ var O = toObject(that);
2673
+ var self = IndexedObject(O);
2674
+ var length = lengthOfArrayLike(O);
2675
+ aCallable(callbackfn);
2676
+ if (length === 0 && argumentsLength < 2) throw new $TypeError(REDUCE_EMPTY);
2677
+ var index = IS_RIGHT ? length - 1 : 0;
2678
+ var i = IS_RIGHT ? -1 : 1;
2679
+ if (argumentsLength < 2) while (true) {
2680
+ if (index in self) {
2681
+ memo = self[index];
2682
+ index += i;
2683
+ break;
2684
+ }
2685
+ index += i;
2686
+ if (IS_RIGHT ? index < 0 : length <= index) {
2687
+ throw new $TypeError(REDUCE_EMPTY);
2688
+ }
2689
+ }
2690
+ for (;IS_RIGHT ? index >= 0 : length > index; index += i) if (index in self) {
2691
+ memo = callbackfn(memo, self[index], index, O);
2692
+ }
2693
+ return memo;
2694
+ };
2695
+ };
2696
+
2697
+ var arrayReduce = {
2698
+ // `Array.prototype.reduce` method
2699
+ // https://tc39.es/ecma262/#sec-array.prototype.reduce
2700
+ left: createMethod(false),
2701
+ // `Array.prototype.reduceRight` method
2702
+ // https://tc39.es/ecma262/#sec-array.prototype.reduceright
2703
+ right: createMethod(true)
2704
+ };
2705
+
2706
+ /* global Bun, Deno -- detection */
2707
+ var globalThis$1 = globalThis_1;
2708
+ var userAgent = environmentUserAgent;
2709
+ var classof = classofRaw$1;
2710
+
2711
+ var userAgentStartsWith = function (string) {
2712
+ return userAgent.slice(0, string.length) === string;
2713
+ };
2714
+
2715
+ var environment = (function () {
2716
+ if (userAgentStartsWith('Bun/')) return 'BUN';
2717
+ if (userAgentStartsWith('Cloudflare-Workers')) return 'CLOUDFLARE';
2718
+ if (userAgentStartsWith('Deno/')) return 'DENO';
2719
+ if (userAgentStartsWith('Node.js/')) return 'NODE';
2720
+ if (globalThis$1.Bun && typeof Bun.version == 'string') return 'BUN';
2721
+ if (globalThis$1.Deno && typeof Deno.version == 'object') return 'DENO';
2722
+ if (classof(globalThis$1.process) === 'process') return 'NODE';
2723
+ if (globalThis$1.window && globalThis$1.document) return 'BROWSER';
2724
+ return 'REST';
2725
+ })();
2726
+
2727
+ var ENVIRONMENT = environment;
2728
+
2729
+ var environmentIsNode = ENVIRONMENT === 'NODE';
2730
+
2731
+ var $ = _export;
2732
+ var $reduce = arrayReduce.left;
2733
+ var arrayMethodIsStrict = arrayMethodIsStrict$2;
2734
+ var CHROME_VERSION = environmentV8Version;
2735
+ var IS_NODE = environmentIsNode;
2736
+
2737
+ // Chrome 80-82 has a critical bug
2738
+ // https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
2739
+ var CHROME_BUG = !IS_NODE && CHROME_VERSION > 79 && CHROME_VERSION < 83;
2740
+ var FORCED = CHROME_BUG || !arrayMethodIsStrict('reduce');
2741
+
2742
+ // `Array.prototype.reduce` method
2743
+ // https://tc39.es/ecma262/#sec-array.prototype.reduce
2744
+ $({ target: 'Array', proto: true, forced: FORCED }, {
2745
+ reduce: function reduce(callbackfn /* , initialValue */) {
2746
+ var length = arguments.length;
2747
+ return $reduce(this, callbackfn, length, length > 1 ? arguments[1] : undefined);
2748
+ }
2749
+ });
2750
+
2651
2751
  function useFormGroup({
2652
2752
  ids,
2653
2753
  onData,
@@ -2708,6 +2808,122 @@ function useFormGroup({
2708
2808
  return;
2709
2809
  }
2710
2810
 
2811
+ const REPEATER_FOOTER_ID = 'repeaterFooter';
2812
+ /**
2813
+ * Component Wrapper to render form fields without the Form component, gets additional formId and mapper since
2814
+ * it won't rely on them and needs to be manually declared
2815
+ *
2816
+ * @param {TAsFormFieldBuilderProps} props JSON schema props along with FieldWrapper props and mapper props
2817
+ * @returns {ReactElement}
2818
+ */
2819
+ const AsFormFieldRepeater = ({
2820
+ RepeaterComponent,
2821
+ addFieldName,
2822
+ removeFieldName,
2823
+ existingElements,
2824
+ stateUpdater,
2825
+ formPrefix,
2826
+ RepeaterFooter
2827
+ }) => {
2828
+ const {
2829
+ getForm,
2830
+ formGroupInstance
2831
+ } = useFormGroupContext();
2832
+ const [elements, setElements] = useState(existingElements ? Object.keys(existingElements).map(() => uniqueIdGen()) : [uniqueIdGen()]);
2833
+ const mountedRef = useRef(false);
2834
+ const prevElements = useRef(0);
2835
+ const listeningElements = useMemo(() => {
2836
+ return [...elements, REPEATER_FOOTER_ID];
2837
+ }, [elements]);
2838
+ useFormGroup({
2839
+ ids: listeningElements,
2840
+ onData: payload => {
2841
+ if (stateUpdater) {
2842
+ if (formPrefix) {
2843
+ stateUpdater(elements.reduce((acc, curr, index) => {
2844
+ const value = payload[curr];
2845
+ acc[`${formPrefix}${index + 1}`] = value;
2846
+ return acc;
2847
+ }, {}));
2848
+ return;
2849
+ }
2850
+ stateUpdater(payload);
2851
+ }
2852
+ }
2853
+ }, [listeningElements]);
2854
+ useEffect(() => {
2855
+ // @TODO: refactor, quick workarount to emit data when removing a form from the list
2856
+ if (prevElements.current > elements.length) {
2857
+ formGroupInstance.dataSubject$.next({
2858
+ event: 'ON_FIELD_UNMOUNT',
2859
+ fieldIndex: 'unmounted_repeater_form',
2860
+ formIndex: elements[0]
2861
+ });
2862
+ }
2863
+ if (!mountedRef.current) {
2864
+ elements.forEach((key, index) => {
2865
+ const form = getForm({
2866
+ key
2867
+ });
2868
+ if (form && (existingElements === null || existingElements === void 0 ? void 0 : existingElements[index])) {
2869
+ form.initialValues = existingElements[index];
2870
+ }
2871
+ });
2872
+ }
2873
+ const subs = listeningElements.map(key => {
2874
+ var _a;
2875
+ return (_a = getForm({
2876
+ key
2877
+ })) === null || _a === void 0 ? void 0 : _a.subscribeFieldEvent({
2878
+ callback({
2879
+ event,
2880
+ fieldName,
2881
+ fieldInstance
2882
+ }) {
2883
+ if (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.formIndex) {
2884
+ if (event === 'ON_FIELD_CLICK' && fieldName === addFieldName) {
2885
+ setElements(prev => {
2886
+ const index = prev.indexOf(fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.formIndex);
2887
+ prev.splice(index + 1, 0, uniqueIdGen());
2888
+ return [...prev];
2889
+ });
2890
+ }
2891
+ if (event === 'ON_FIELD_CLICK' && fieldName === removeFieldName) {
2892
+ if ((fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.formIndex) && elements.length > 1) setElements(prev => {
2893
+ const index = prev.indexOf(fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.formIndex);
2894
+ prev.splice(index, 1);
2895
+ return [...prev];
2896
+ });
2897
+ }
2898
+ if (event === 'ON_FIELD_CLICK' && fieldInstance.formIndex === REPEATER_FOOTER_ID) {
2899
+ setElements(prev => {
2900
+ prev.push(uniqueIdGen());
2901
+ return [...prev];
2902
+ });
2903
+ }
2904
+ }
2905
+ }
2906
+ });
2907
+ });
2908
+ mountedRef.current = true;
2909
+ prevElements.current = elements.length;
2910
+ return () => {
2911
+ subs.map(sub => sub === null || sub === void 0 ? void 0 : sub.unsubscribe());
2912
+ };
2913
+ }, [elements]);
2914
+ return jsxs("div", {
2915
+ style: {
2916
+ display: 'flex',
2917
+ flexDirection: 'column'
2918
+ },
2919
+ children: [elements.map(el => jsx(RepeaterComponent, {
2920
+ formIndex: el
2921
+ }, el)), RepeaterFooter && jsx(RepeaterFooter, {
2922
+ formIndex: REPEATER_FOOTER_ID
2923
+ })]
2924
+ });
2925
+ };
2926
+
2711
2927
  const defaultChangeEvent = event => {
2712
2928
  return event.currentTarget.value;
2713
2929
  };
@@ -2750,4 +2966,4 @@ const dropdownChangeEvent = (event, opts) => {
2750
2966
  }
2751
2967
  };
2752
2968
 
2753
- export { AsFormField, AsFormFieldBuilder, Form, FormGroupContext, FormGroupContextProvider, checkedChangeEvent, datepickerChangeEvent, defaultChangeEvent, dropdownChangeEvent, numberInputChangeEvent, useForm, useFormGroup, useFormGroupContext, valueChangeEvent };
2969
+ export { AsFormField, AsFormFieldBuilder, AsFormFieldRepeater, Form, FormGroupContext, FormGroupContextProvider, checkedChangeEvent, datepickerChangeEvent, defaultChangeEvent, dropdownChangeEvent, numberInputChangeEvent, useForm, useFormGroup, useFormGroupContext, valueChangeEvent };
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@bolttech/form-engine",
3
- "version": "3.1.2-beta.1",
3
+ "version": "3.1.2-beta.3",
4
4
  "description": "A react adapter for bolttech form engine",
5
5
  "module": "./index.esm.js",
6
6
  "type": "module",
7
7
  "main": "./index.esm.js",
8
8
  "dependencies": {
9
- "@bolttech/form-engine-core": "1.0.2-beta.1",
9
+ "@bolttech/form-engine-core": "1.0.2-beta.2",
10
10
  "react": "18.2.0"
11
11
  },
12
12
  "peerDependencies": {}
package/src/components/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export { default as Form } from './Form/Form';
2
2
  export { default as AsFormField } from './AsFormField/AsFormField';
3
3
  export { default as AsFormFieldBuilder } from './AsFormFieldBuilder/AsFormFieldBuilder';
4
+ export { default as AsFormFieldRepeater } from './AsFormFieldRepeater/AsFormFieldRepeater';