@wix/form-public 0.54.0 → 0.55.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,9 +1,9 @@
1
- import React14, { createContext, useState, useMemo, useEffect, useRef, useCallback, useImperativeHandle, useContext } from 'react';
1
+ import React14, { createContext, useContext, useState, useMemo, useEffect, useRef, useCallback, useImperativeHandle } from 'react';
2
2
  import camelCase from 'lodash.camelcase';
3
3
  import mapKeys from 'lodash.mapkeys';
4
- import { jsx } from 'react/jsx-runtime';
5
4
  import i18next from 'i18next';
6
5
  import { initReactI18next } from 'react-i18next';
6
+ import { jsx } from 'react/jsx-runtime';
7
7
 
8
8
  var __create = Object.create;
9
9
  var __defProp = Object.defineProperty;
@@ -16666,6 +16666,386 @@ var useError = (_ref2) => {
16666
16666
  errorMessage
16667
16667
  };
16668
16668
  };
16669
+ var FieldPropsContext = /* @__PURE__ */ createContext(null);
16670
+ function useFieldProps() {
16671
+ const context = useContext(FieldPropsContext);
16672
+ if (context === null) {
16673
+ throw new Error("useFieldProps must be used within a FieldPropsProvider");
16674
+ }
16675
+ return context;
16676
+ }
16677
+
16678
+ // ../form-fields/dist/esm/mappers/public-props-map.js
16679
+ init_esm();
16680
+ var allCallingCountryCodes = Object.keys(CALLING_COUNTRY_CODES);
16681
+ var MinMaxLengthMapper = (validation) => {
16682
+ var _validation$string, _validation$string2;
16683
+ return {
16684
+ maxLength: validation == null || (_validation$string = validation.string) == null ? void 0 : _validation$string.maxLength,
16685
+ minLength: validation == null || (_validation$string2 = validation.string) == null ? void 0 : _validation$string2.minLength
16686
+ };
16687
+ };
16688
+ var MinMaxItemsMapper = (validation) => {
16689
+ var _validation$array, _validation$array2;
16690
+ return {
16691
+ minItems: validation == null || (_validation$array = validation.array) == null ? void 0 : _validation$array.minItems,
16692
+ maxItems: validation == null || (_validation$array2 = validation.array) == null ? void 0 : _validation$array2.maxItems
16693
+ };
16694
+ };
16695
+ var MinMaxValuesMapper = (validation) => {
16696
+ var _validation$predefine, _validation$predefine2;
16697
+ return {
16698
+ minValue: validation == null || (_validation$predefine = validation.predefined) == null || (_validation$predefine = _validation$predefine.paymentOptions) == null || (_validation$predefine = _validation$predefine.products) == null || (_validation$predefine = _validation$predefine[0]) == null ? void 0 : _validation$predefine.dynamicPriceOptions.minPrice,
16699
+ maxValue: validation == null || (_validation$predefine2 = validation.predefined) == null || (_validation$predefine2 = _validation$predefine2.paymentOptions) == null || (_validation$predefine2 = _validation$predefine2.products) == null || (_validation$predefine2 = _validation$predefine2[0]) == null ? void 0 : _validation$predefine2.dynamicPriceOptions.maxPrice
16700
+ };
16701
+ };
16702
+ var AcceptedDatesMapper = (validation) => {
16703
+ var _validation$string3, _validation$string4;
16704
+ return {
16705
+ acceptedDates: (validation == null || (_validation$string3 = validation.string) == null || (_validation$string3 = _validation$string3.dateOptions) == null ? void 0 : _validation$string3.minimum) === "$now" ? "future" : (validation == null || (_validation$string4 = validation.string) == null || (_validation$string4 = _validation$string4.dateOptions) == null ? void 0 : _validation$string4.maximum) === "$now" ? "past" : "all"
16706
+ };
16707
+ };
16708
+ var CustomOptionMapper = (props) => {
16709
+ const {
16710
+ addOther,
16711
+ addOtherLabel,
16712
+ addOtherPlaceholder
16713
+ } = props;
16714
+ return {
16715
+ customOption: addOther ? {
16716
+ label: addOtherLabel,
16717
+ placeholder: addOtherPlaceholder
16718
+ } : void 0
16719
+ };
16720
+ };
16721
+ var ErrorMapper = (error) => {
16722
+ if (!error) {
16723
+ return void 0;
16724
+ }
16725
+ return error.errorMessage || "Validation error";
16726
+ };
16727
+ var BaseMapper = (props) => {
16728
+ const {
16729
+ hideLabel,
16730
+ error,
16731
+ showLabel,
16732
+ ...rest
16733
+ } = props;
16734
+ return {
16735
+ ...rest,
16736
+ showLabel: hideLabel === void 0 ? true : !hideLabel,
16737
+ error: ErrorMapper(error)
16738
+ };
16739
+ };
16740
+ var TextFieldMapper = (props) => ({
16741
+ ...props,
16742
+ ...MinMaxLengthMapper(props == null ? void 0 : props.validation),
16743
+ ...BaseMapper(props)
16744
+ });
16745
+ var TextAreaMapper = (props) => ({
16746
+ ...props,
16747
+ ...MinMaxLengthMapper(props == null ? void 0 : props.validation),
16748
+ ...BaseMapper(props)
16749
+ });
16750
+ var PhoneInputMapper = (props) => {
16751
+ var _validation$string5;
16752
+ const {
16753
+ defaultCountry,
16754
+ defaultCountryCode,
16755
+ validation
16756
+ } = props;
16757
+ const allowedCountryCodes = validation == null || (_validation$string5 = validation.string) == null || (_validation$string5 = _validation$string5.phoneOptions) == null ? void 0 : _validation$string5.allowedCountryCodes;
16758
+ return {
16759
+ ...props,
16760
+ ...BaseMapper(props),
16761
+ defaultCountryCode: defaultCountry ?? defaultCountryCode,
16762
+ countryCodes: allowedCountryCodes && allowedCountryCodes.length > 0 ? allowedCountryCodes : allCallingCountryCodes
16763
+ };
16764
+ };
16765
+ var MultilineAddressMapper = (props) => {
16766
+ var _view$fieldSettings, _validation$predefine3;
16767
+ const {
16768
+ view,
16769
+ validation
16770
+ } = props;
16771
+ return {
16772
+ ...props,
16773
+ ...BaseMapper(props),
16774
+ showAddressLine2: view == null || (_view$fieldSettings = view.fieldSettings) == null || (_view$fieldSettings = _view$fieldSettings.addressLine2) == null ? void 0 : _view$fieldSettings.show,
16775
+ addressLine2Required: validation == null || (_validation$predefine3 = validation.predefined) == null || (_validation$predefine3 = _validation$predefine3.multilineAddressOptions) == null || (_validation$predefine3 = _validation$predefine3.fields) == null || (_validation$predefine3 = _validation$predefine3.addressLine2) == null ? void 0 : _validation$predefine3.required
16776
+ };
16777
+ };
16778
+ var DateInputMapper = (props) => {
16779
+ const {
16780
+ hidePlaceholder,
16781
+ validation
16782
+ } = props;
16783
+ return {
16784
+ ...props,
16785
+ ...BaseMapper(props),
16786
+ ...AcceptedDatesMapper(validation),
16787
+ showPlaceholder: hidePlaceholder === void 0 ? true : !hidePlaceholder
16788
+ };
16789
+ };
16790
+ var DatePickerMapper = (props) => {
16791
+ const {
16792
+ validation
16793
+ } = props;
16794
+ return {
16795
+ ...props,
16796
+ ...BaseMapper(props),
16797
+ ...AcceptedDatesMapper(validation)
16798
+ };
16799
+ };
16800
+ var DateTimeInputMapper = (props) => {
16801
+ const {
16802
+ hidePlaceholder,
16803
+ validation
16804
+ } = props;
16805
+ return {
16806
+ ...props,
16807
+ ...BaseMapper(props),
16808
+ ...AcceptedDatesMapper(validation),
16809
+ showPlaceholder: hidePlaceholder === void 0 ? true : !hidePlaceholder
16810
+ };
16811
+ };
16812
+ var FileUploadMapper = (props) => {
16813
+ const {
16814
+ valueSliderLimit,
16815
+ uploadFileFormats
16816
+ } = props;
16817
+ return {
16818
+ ...props,
16819
+ ...BaseMapper(props),
16820
+ maxFiles: valueSliderLimit,
16821
+ allowedFileFormats: uploadFileFormats
16822
+ };
16823
+ };
16824
+ var NumberInputMapper = (props) => BaseMapper(props);
16825
+ var CheckboxMapper = (props) => {
16826
+ const {
16827
+ error,
16828
+ ...rest
16829
+ } = props;
16830
+ return {
16831
+ ...rest,
16832
+ error: ErrorMapper(error)
16833
+ };
16834
+ };
16835
+ var SignatureMapper = (props) => {
16836
+ const {
16837
+ uploadEnabled
16838
+ } = props;
16839
+ return {
16840
+ ...props,
16841
+ ...BaseMapper(props),
16842
+ imageUploadEnabled: uploadEnabled
16843
+ };
16844
+ };
16845
+ var RatingInputMapper = (props) => BaseMapper(props);
16846
+ var RadioGroupMapper = (props) => {
16847
+ return {
16848
+ ...props,
16849
+ ...BaseMapper(props),
16850
+ ...CustomOptionMapper(props)
16851
+ };
16852
+ };
16853
+ var CheckboxGroupMapper = (props) => {
16854
+ const {
16855
+ validation
16856
+ } = props;
16857
+ return {
16858
+ ...props,
16859
+ ...BaseMapper(props),
16860
+ ...CustomOptionMapper(props),
16861
+ ...MinMaxItemsMapper(validation)
16862
+ };
16863
+ };
16864
+ var DropdownMapper = (props) => BaseMapper(props);
16865
+ var TagsMapper = (props) => {
16866
+ const {
16867
+ validation
16868
+ } = props;
16869
+ return {
16870
+ ...props,
16871
+ ...BaseMapper(props),
16872
+ ...CustomOptionMapper(props),
16873
+ ...MinMaxItemsMapper(validation)
16874
+ };
16875
+ };
16876
+ var TimeInputMapper = (props) => {
16877
+ const {
16878
+ hidePlaceholder
16879
+ } = props;
16880
+ return {
16881
+ ...props,
16882
+ ...BaseMapper(props),
16883
+ showPlaceholder: hidePlaceholder === void 0 ? true : !hidePlaceholder
16884
+ };
16885
+ };
16886
+ var TextMapper = (props) => props;
16887
+ var SubmitButtonMapper = (props) => {
16888
+ return {
16889
+ ...props
16890
+ };
16891
+ };
16892
+ var ProductListMapper = (props) => {
16893
+ return {
16894
+ ...props,
16895
+ ...BaseMapper(props),
16896
+ ...MinMaxItemsMapper(props == null ? void 0 : props.validation)
16897
+ };
16898
+ };
16899
+ var FixedPaymentMapper = (props) => {
16900
+ var _validation$predefine4, _paymentValidation$fi;
16901
+ const {
16902
+ validation,
16903
+ hideLabel,
16904
+ showLabel,
16905
+ ...rest
16906
+ } = props;
16907
+ const paymentValidation = validation == null || (_validation$predefine4 = validation.predefined) == null || (_validation$predefine4 = _validation$predefine4.paymentOptions) == null || (_validation$predefine4 = _validation$predefine4.products) == null ? void 0 : _validation$predefine4[0];
16908
+ const fixedPaymentValue = paymentValidation == null || (_paymentValidation$fi = paymentValidation.fixedPriceOptions) == null ? void 0 : _paymentValidation$fi.price;
16909
+ return {
16910
+ ...rest,
16911
+ validation,
16912
+ showLabel: hideLabel === void 0 ? true : !hideLabel,
16913
+ amount: fixedPaymentValue
16914
+ };
16915
+ };
16916
+ var PaymentInputMapper = (props) => {
16917
+ const {
16918
+ validation
16919
+ } = props;
16920
+ return {
16921
+ ...props,
16922
+ ...BaseMapper(props),
16923
+ ...MinMaxValuesMapper(validation)
16924
+ };
16925
+ };
16926
+ var DonationMapper = (props) => {
16927
+ return {
16928
+ ...props,
16929
+ ...BaseMapper(props),
16930
+ ...CustomOptionMapper(props)
16931
+ };
16932
+ };
16933
+ var AppointmentMapper = (props) => BaseMapper(props);
16934
+ var ImageChoiceMapper = (props) => {
16935
+ const {
16936
+ isMultipleAnswers,
16937
+ choiceImageResize
16938
+ } = props;
16939
+ return {
16940
+ ...props,
16941
+ ...BaseMapper(props),
16942
+ multiple: isMultipleAnswers,
16943
+ imageAspectRatio: choiceImageResize
16944
+ };
16945
+ };
16946
+ var DefaultMapper = (props) => {
16947
+ const {
16948
+ error,
16949
+ ...rest
16950
+ } = props;
16951
+ return {
16952
+ ...rest,
16953
+ error: ErrorMapper(error)
16954
+ };
16955
+ };
16956
+ var FIELD_PROPS_MAPPERS = {
16957
+ TEXT_INPUT: TextFieldMapper,
16958
+ TEXT_AREA: TextAreaMapper,
16959
+ NUMBER_INPUT: NumberInputMapper,
16960
+ URL_INPUT: TextFieldMapper,
16961
+ DATE_INPUT: DateInputMapper,
16962
+ DATE_PICKER: DatePickerMapper,
16963
+ DATE_TIME_INPUT: DateTimeInputMapper,
16964
+ TIME_INPUT: TimeInputMapper,
16965
+ CONTACTS_COMPANY: TextFieldMapper,
16966
+ CONTACTS_POSITION: TextFieldMapper,
16967
+ CONTACTS_TAX_ID: TextFieldMapper,
16968
+ CONTACTS_FIRST_NAME: TextFieldMapper,
16969
+ CONTACTS_LAST_NAME: TextFieldMapper,
16970
+ CONTACTS_EMAIL: TextFieldMapper,
16971
+ CONTACTS_BIRTHDATE: DateInputMapper,
16972
+ CONTACTS_PHONE: PhoneInputMapper,
16973
+ CONTACTS_ADDRESS: TextFieldMapper,
16974
+ CONTACTS_SUBSCRIBE: CheckboxMapper,
16975
+ RADIO_GROUP: RadioGroupMapper,
16976
+ CHECKBOX: CheckboxMapper,
16977
+ CHECKBOX_GROUP: CheckboxGroupMapper,
16978
+ DROPDOWN: DropdownMapper,
16979
+ TAGS: TagsMapper,
16980
+ QUIZ_IMAGE_CHOICE: ImageChoiceMapper,
16981
+ QUIZ_MULTI_CHOICE: CheckboxGroupMapper,
16982
+ QUIZ_SINGLE_CHOICE: RadioGroupMapper,
16983
+ QUIZ_SHORT_TEXT: TextFieldMapper,
16984
+ QUIZ_LONG_TEXT: TextAreaMapper,
16985
+ QUIZ_NUMBER: NumberInputMapper,
16986
+ QUIZ_FILE_UPLOAD: FileUploadMapper,
16987
+ DEXT_TEXT_INPUT: TextFieldMapper,
16988
+ DEXT_TEXT_AREA: TextAreaMapper,
16989
+ DEXT_DROPDOWN: DropdownMapper,
16990
+ DEXT_URL_INPUT: TextFieldMapper,
16991
+ DEXT_RADIO_GROUP: RadioGroupMapper,
16992
+ DEXT_NUMBER_INPUT: NumberInputMapper,
16993
+ DEXT_CHECKBOX: CheckboxMapper,
16994
+ DEXT_CHECKBOX_GROUP: CheckboxGroupMapper,
16995
+ DEXT_EMAIL: TextFieldMapper,
16996
+ DEXT_PHONE: PhoneInputMapper,
16997
+ DEXT_RATING_INPUT: RatingInputMapper,
16998
+ DEXT_DATE_PICKER: DatePickerMapper,
16999
+ DEXT_TAGS: TagsMapper,
17000
+ MULTILINE_ADDRESS: MultilineAddressMapper,
17001
+ MLA_COUNTRY: DropdownMapper,
17002
+ MLA_CITY: TextFieldMapper,
17003
+ MLA_ADDRESS_LINE: TextFieldMapper,
17004
+ MLA_ADDRESS_LINE_2: TextFieldMapper,
17005
+ MLA_POSTAL_CODE: TextFieldMapper,
17006
+ MLA_SUBDIVISION: DropdownMapper,
17007
+ MLA_STREET_NAME: TextFieldMapper,
17008
+ MLA_STREET_NUMBER: TextFieldMapper,
17009
+ MLA_APARTMENT: TextFieldMapper,
17010
+ FULL_NAME: TextFieldMapper,
17011
+ FULL_NAME_FIRST_NAME: TextFieldMapper,
17012
+ FULL_NAME_LAST_NAME: TextFieldMapper,
17013
+ ECOM_ADDITIONAL_INFO: TextAreaMapper,
17014
+ ECOM_ADDRESS: TextFieldMapper,
17015
+ ECOM_FULL_NAME: TextFieldMapper,
17016
+ ECOM_PHONE: PhoneInputMapper,
17017
+ ECOM_COMPANY_NAME: TextFieldMapper,
17018
+ ECOM_EMAIL: TextFieldMapper,
17019
+ ECOM_SUBSCRIPTION: CheckboxMapper,
17020
+ ECOM_CONTACT_DETAILS: TextMapper,
17021
+ ECOM_SHIPPING_DETAILS: TextMapper,
17022
+ BOOKINGS_FIRST_NAME: TextFieldMapper,
17023
+ BOOKINGS_LAST_NAME: TextFieldMapper,
17024
+ BOOKINGS_EMAIL: TextFieldMapper,
17025
+ BOOKINGS_PHONE: PhoneInputMapper,
17026
+ BOOKINGS_ADDRESS: TextFieldMapper,
17027
+ BOOKINGS_HEADER: TextMapper,
17028
+ BOOKINGS_RICH_TEXT: TextMapper,
17029
+ BOOKINGS_LOGIN_BAR: DefaultMapper,
17030
+ APPOINTMENT: AppointmentMapper,
17031
+ SERVICES_DROPDOWN: DropdownMapper,
17032
+ SERVICES_MULTI_CHOICE: CheckboxGroupMapper,
17033
+ PRODUCT_LIST: ProductListMapper,
17034
+ FIXED_PAYMENT: FixedPaymentMapper,
17035
+ PAYMENT_INPUT: PaymentInputMapper,
17036
+ DONATION: DonationMapper,
17037
+ EVENTS_RSVP: RadioGroupMapper,
17038
+ EVENTS_REPEATER: TextMapper,
17039
+ FILE_UPLOAD: FileUploadMapper,
17040
+ SIGNATURE: SignatureMapper,
17041
+ RATING_INPUT: RatingInputMapper,
17042
+ VAT_ID: TextFieldMapper,
17043
+ NESTED_FORM: DefaultMapper,
17044
+ HEADER: TextMapper,
17045
+ RICH_TEXT: TextMapper,
17046
+ SUBMIT_BUTTON: SubmitButtonMapper,
17047
+ IDENTITY_PASSWORD: DefaultMapper
17048
+ };
16669
17049
 
16670
17050
  // ../form-fields/dist/esm/ui/form/components/form/input-field.js
16671
17051
  var InputField = (_ref) => {
@@ -16692,6 +17072,7 @@ var InputField = (_ref) => {
16692
17072
  requiredIndicator,
16693
17073
  requiredIndicatorPlacement
16694
17074
  } = form.requiredIndicatorProperties || {};
17075
+ const propsMapper = FIELD_PROPS_MAPPERS[field.fieldType];
16695
17076
  const _onBlur = () => {
16696
17077
  bi == null || bi.report(formFieldFocus({
16697
17078
  action_type: "blur",
@@ -16738,7 +17119,28 @@ var InputField = (_ref) => {
16738
17119
  if (!FieldComponent) {
16739
17120
  return null;
16740
17121
  }
16741
- return /* @__PURE__ */ React14.createElement(FieldComponent, (0, import_extends.default)({}, field.properties, {
17122
+ return /* @__PURE__ */ React14.createElement(FieldPropsContext.Provider, {
17123
+ value: {
17124
+ ...propsMapper({
17125
+ ...field.properties,
17126
+ id: field.id,
17127
+ target: field.target,
17128
+ path: field.path,
17129
+ error: fieldError,
17130
+ errors: fieldErrors,
17131
+ value: fieldValue,
17132
+ externalData,
17133
+ fieldType: field.fieldType,
17134
+ requiredIndicatorType: requiredIndicator,
17135
+ requiredIndicatorPlacement
17136
+ }),
17137
+ onChange: handleChange,
17138
+ onBlur: _onBlur,
17139
+ onFocus: _onFocus,
17140
+ hasError,
17141
+ errorMessage
17142
+ }
17143
+ }, /* @__PURE__ */ React14.createElement(FieldComponent, (0, import_extends.default)({}, field.properties, {
16742
17144
  onChange: handleChange,
16743
17145
  onBlur: _onBlur,
16744
17146
  onFocus: _onFocus,
@@ -16755,7 +17157,7 @@ var InputField = (_ref) => {
16755
17157
  FieldLayout,
16756
17158
  requiredIndicatorType: requiredIndicator,
16757
17159
  requiredIndicatorPlacement
16758
- }));
17160
+ })));
16759
17161
  };
16760
17162
 
16761
17163
  // ../form-fields/dist/esm/ui/form/components/form/read-only-field.js
@@ -16772,18 +17174,30 @@ var ReadOnlyField = (_ref) => {
16772
17174
  requiredIndicator,
16773
17175
  requiredIndicatorPlacement
16774
17176
  } = form.requiredIndicatorProperties || {};
17177
+ const propsMapper = FIELD_PROPS_MAPPERS[field.fieldType];
16775
17178
  const FieldComponent = componentsById[field.fieldType];
16776
17179
  if (!FieldComponent) {
16777
17180
  return null;
16778
17181
  }
16779
- return /* @__PURE__ */ React14.createElement(FieldComponent, (0, import_extends2.default)({}, field.properties, {
17182
+ return /* @__PURE__ */ React14.createElement(FieldPropsContext.Provider, {
17183
+ value: {
17184
+ ...propsMapper({
17185
+ ...field.properties,
17186
+ id: field.id,
17187
+ externalData,
17188
+ fieldType: field.fieldType,
17189
+ requiredIndicatorType: requiredIndicator,
17190
+ requiredIndicatorPlacement
17191
+ })
17192
+ }
17193
+ }, /* @__PURE__ */ React14.createElement(FieldComponent, (0, import_extends2.default)({}, field.properties, {
16780
17194
  id: field.id,
16781
17195
  externalData,
16782
17196
  fieldType: field.fieldType,
16783
17197
  FieldLayout,
16784
17198
  requiredIndicatorType: requiredIndicator,
16785
17199
  requiredIndicatorPlacement
16786
- }));
17200
+ })));
16787
17201
  };
16788
17202
 
16789
17203
  // ../form-fields/dist/esm/ui/form/components/form/nested-form-field.js
@@ -16808,6 +17222,7 @@ var NestedFormField = (_ref) => {
16808
17222
  requiredIndicator,
16809
17223
  requiredIndicatorPlacement
16810
17224
  } = form.requiredIndicatorProperties || {};
17225
+ const propsMapper = FIELD_PROPS_MAPPERS[field.fieldType];
16811
17226
  const handleChange = useCallback((value) => {
16812
17227
  if (!value) {
16813
17228
  value = null;
@@ -16818,7 +17233,24 @@ var NestedFormField = (_ref) => {
16818
17233
  if (!FieldComponent) {
16819
17234
  return null;
16820
17235
  }
16821
- return /* @__PURE__ */ React14.createElement(FieldComponent, (0, import_extends3.default)({}, field.properties, {
17236
+ return /* @__PURE__ */ React14.createElement(FieldPropsContext.Provider, {
17237
+ value: {
17238
+ ...propsMapper({
17239
+ ...field.properties,
17240
+ id: field.id,
17241
+ target: field.target,
17242
+ path: field.path,
17243
+ error: fieldError,
17244
+ errors: fieldErrors,
17245
+ value: fieldValue,
17246
+ externalData,
17247
+ fieldType: field.fieldType,
17248
+ requiredIndicatorType: requiredIndicator,
17249
+ requiredIndicatorPlacement
17250
+ }),
17251
+ onChange: handleChange
17252
+ }
17253
+ }, /* @__PURE__ */ React14.createElement(FieldComponent, (0, import_extends3.default)({}, field.properties, {
16822
17254
  onChange: handleChange,
16823
17255
  error: fieldError,
16824
17256
  errors: fieldErrors,
@@ -16831,7 +17263,7 @@ var NestedFormField = (_ref) => {
16831
17263
  FieldLayout,
16832
17264
  requiredIndicatorType: requiredIndicator,
16833
17265
  requiredIndicatorPlacement
16834
- }));
17266
+ })));
16835
17267
  };
16836
17268
 
16837
17269
  // ../form-fields/dist/esm/ui/form/components/form/submit-button-field.js
@@ -16938,11 +17370,33 @@ var SubmitButtonField = (_ref) => {
16938
17370
  const submitButtonText = submitText || text || "";
16939
17371
  const previousButtonText = previousText || "";
16940
17372
  const nextButtonText = nextText || "";
17373
+ const propsMapper = FIELD_PROPS_MAPPERS[field.fieldType];
16941
17374
  const FieldComponent = componentsById[field.fieldType];
16942
17375
  if (!FieldComponent) {
16943
17376
  return null;
16944
17377
  }
16945
- return /* @__PURE__ */ React14.createElement(FieldComponent, (0, import_extends4.default)({}, field.properties, {
17378
+ return /* @__PURE__ */ React14.createElement(FieldPropsContext.Provider, {
17379
+ value: {
17380
+ ...propsMapper({
17381
+ ...field.properties,
17382
+ id: field.id,
17383
+ externalData,
17384
+ fieldType: field.fieldType,
17385
+ hasSteps,
17386
+ isDisabled,
17387
+ isInProgress,
17388
+ showPreviousButton,
17389
+ showNextButton,
17390
+ showSubmitButton,
17391
+ submitText: submitButtonText,
17392
+ previousText: previousButtonText,
17393
+ nextText: nextButtonText,
17394
+ onSubmitClick: handleSubmitClick,
17395
+ onPreviousClick: () => actions == null ? void 0 : actions.setPreviousStep(),
17396
+ onNextClick: () => actions == null ? void 0 : actions.setNextStep()
17397
+ })
17398
+ }
17399
+ }, /* @__PURE__ */ React14.createElement(FieldComponent, (0, import_extends4.default)({}, field.properties, {
16946
17400
  id: field.id,
16947
17401
  externalData,
16948
17402
  fieldType: field.fieldType,
@@ -16959,7 +17413,7 @@ var SubmitButtonField = (_ref) => {
16959
17413
  onSubmitClick: handleSubmitClick,
16960
17414
  onPreviousClick: () => actions == null ? void 0 : actions.setPreviousStep(),
16961
17415
  onNextClick: () => actions == null ? void 0 : actions.setNextStep()
16962
- }));
17416
+ })));
16963
17417
  };
16964
17418
 
16965
17419
  // ../form-fields/dist/esm/services/multiline-address.js
@@ -21860,232 +22314,6 @@ function normalizeSchema(obj) {
21860
22314
  return obj;
21861
22315
  }
21862
22316
 
21863
- // src/mappers/props-map.ts
21864
- var MinMaxLengthMapper = (validation) => ({
21865
- maxLength: validation?.string?.maxLength,
21866
- minLength: validation?.string?.minLength
21867
- });
21868
- var MinMaxItemsMapper = (validation) => ({
21869
- minItems: validation?.array?.minItems,
21870
- maxItems: validation?.array?.maxItems
21871
- });
21872
- var MinMaxValuesMapper = (validation) => ({
21873
- minValue: validation.predefined.paymentOptions.products[0].dynamicPriceOptions.minPrice,
21874
- maxValue: validation.predefined.paymentOptions.products[0].dynamicPriceOptions.maxPrice
21875
- });
21876
- var AcceptedDatesMapper = (validation) => ({
21877
- acceptedDates: validation?.string?.dateOptions?.minimum === "$now" ? "future" : validation?.string?.dateOptions?.maximum === "$now" ? "past" : "all"
21878
- });
21879
- var CustomOptionMapper = (props) => {
21880
- const { addOther, addOtherLabel, addOtherPlaceholder } = props;
21881
- return {
21882
- customOption: addOther ? {
21883
- label: addOtherLabel,
21884
- placeholder: addOtherPlaceholder
21885
- } : void 0
21886
- };
21887
- };
21888
- var ErrorMapper = (props) => {
21889
- return {
21890
- ...props,
21891
- // TODO
21892
- error: ""
21893
- };
21894
- };
21895
- var BaseMapper = (props) => {
21896
- const { hideLabel } = props;
21897
- return {
21898
- ...props,
21899
- showLabel: hideLabel === void 0 ? true : !hideLabel,
21900
- ...ErrorMapper(props)
21901
- };
21902
- };
21903
- var TextFieldMapper = (props) => ({
21904
- ...props,
21905
- ...MinMaxLengthMapper(props?.validation),
21906
- ...BaseMapper(props)
21907
- });
21908
- var TextAreaMapper = (props) => ({
21909
- ...props,
21910
- ...MinMaxLengthMapper(props?.validation),
21911
- ...BaseMapper(props)
21912
- });
21913
- var PhoneInputMapper = (props) => {
21914
- const { defaultCountry, defaultCountryCode, validation } = props;
21915
- return {
21916
- ...props,
21917
- ...BaseMapper(props),
21918
- defaultCountryCode: defaultCountry ?? defaultCountryCode,
21919
- allowedCountryCodes: validation?.string?.phoneOptions?.allowedCountryCodes
21920
- };
21921
- };
21922
- var MultilineAddressMapper = (props) => {
21923
- const { view, validation } = props;
21924
- return {
21925
- ...props,
21926
- ...BaseMapper(props),
21927
- showAddressLine2: view?.fieldSettings?.addressLine2?.show,
21928
- addressLine2Required: validation?.predefined?.multilineAddressOptions?.fields?.addressLine2?.required
21929
- };
21930
- };
21931
- var DateInputMapper = (props) => {
21932
- const { hidePlaceholder, validation } = props;
21933
- return {
21934
- ...props,
21935
- ...BaseMapper(props),
21936
- ...AcceptedDatesMapper(validation),
21937
- showPlaceholder: hidePlaceholder === void 0 ? true : !hidePlaceholder
21938
- };
21939
- };
21940
- var DatePickerMapper = (props) => {
21941
- const { validation } = props;
21942
- return {
21943
- ...props,
21944
- ...BaseMapper(props),
21945
- ...AcceptedDatesMapper(validation)
21946
- };
21947
- };
21948
- var DateTimeInputMapper = (props) => {
21949
- const { hidePlaceholder, validation } = props;
21950
- return {
21951
- ...props,
21952
- ...BaseMapper(props),
21953
- ...AcceptedDatesMapper(validation),
21954
- showPlaceholder: hidePlaceholder === void 0 ? true : !hidePlaceholder
21955
- };
21956
- };
21957
- var FileUploadMapper = (props) => {
21958
- const { valueSliderLimit, uploadFileFormats } = props;
21959
- return {
21960
- ...props,
21961
- ...BaseMapper(props),
21962
- maxFiles: valueSliderLimit,
21963
- allowedFileFormats: uploadFileFormats
21964
- };
21965
- };
21966
- var NumberInputMapper = (props) => BaseMapper(props);
21967
- var CheckboxMapper = (props) => ErrorMapper(props);
21968
- var SignatureMapper = (props) => {
21969
- const { uploadEnabled } = props;
21970
- return {
21971
- ...props,
21972
- ...BaseMapper(props),
21973
- imageUploadEnabled: uploadEnabled
21974
- };
21975
- };
21976
- var RatingInputMapper = (props) => BaseMapper(props);
21977
- var RadioGroupMapper = (props) => {
21978
- return {
21979
- ...props,
21980
- ...BaseMapper(props),
21981
- ...CustomOptionMapper(props)
21982
- };
21983
- };
21984
- var CheckboxGroupMapper = (props) => {
21985
- const { validation } = props;
21986
- return {
21987
- ...props,
21988
- ...BaseMapper(props),
21989
- ...CustomOptionMapper(props),
21990
- ...MinMaxItemsMapper(validation)
21991
- };
21992
- };
21993
- var DropdownMapper = (props) => BaseMapper(props);
21994
- var TagsMapper = (props) => {
21995
- const { validation } = props;
21996
- return {
21997
- ...props,
21998
- ...BaseMapper(props),
21999
- ...CustomOptionMapper(props),
22000
- ...MinMaxItemsMapper(validation)
22001
- };
22002
- };
22003
- var TimeInputMapper = (props) => {
22004
- const { hidePlaceholder } = props;
22005
- return {
22006
- ...props,
22007
- ...BaseMapper(props),
22008
- showPlaceholder: hidePlaceholder === void 0 ? true : !hidePlaceholder
22009
- };
22010
- };
22011
- var TextMapper = (props) => props;
22012
- var SubmitButtonMapper = (props) => {
22013
- return {
22014
- ...props
22015
- };
22016
- };
22017
- var ProductListMapper = (props) => {
22018
- return {
22019
- ...props,
22020
- ...BaseMapper(props),
22021
- ...MinMaxItemsMapper(props?.validation)
22022
- };
22023
- };
22024
- var FixedPaymentMapper = (props) => {
22025
- const { validation, hideLabel } = props;
22026
- const paymentValidation = validation?.predefined?.paymentOptions?.products?.[0];
22027
- const fixedPaymentValue = paymentValidation?.fixedPriceOptions?.price;
22028
- return {
22029
- ...props,
22030
- showLabel: hideLabel === void 0 ? true : !hideLabel,
22031
- amount: fixedPaymentValue
22032
- };
22033
- };
22034
- var PaymentInputMapper = (props) => {
22035
- const { validation } = props;
22036
- return {
22037
- ...props,
22038
- ...BaseMapper(props),
22039
- ...MinMaxValuesMapper(validation)
22040
- };
22041
- };
22042
- var DonationMapper = (props) => {
22043
- return {
22044
- ...props,
22045
- ...BaseMapper(props),
22046
- ...CustomOptionMapper(props)
22047
- };
22048
- };
22049
- var AppointmentMapper = (props) => BaseMapper(props);
22050
- var ImageChoiceMapper = (props) => {
22051
- const { isMultipleAnswers, choiceImageResize } = props;
22052
- return {
22053
- ...props,
22054
- ...BaseMapper(props),
22055
- multiple: isMultipleAnswers,
22056
- imageAspectRatio: choiceImageResize
22057
- };
22058
- };
22059
- var FIELD_PROP_MAP = {
22060
- TEXT_INPUT: TextFieldMapper,
22061
- TEXT_AREA: TextAreaMapper,
22062
- PHONE_INPUT: PhoneInputMapper,
22063
- MULTILINE_ADDRESS: MultilineAddressMapper,
22064
- DATE_INPUT: DateInputMapper,
22065
- DATE_PICKER: DatePickerMapper,
22066
- DATE_TIME_INPUT: DateTimeInputMapper,
22067
- FILE_UPLOAD: FileUploadMapper,
22068
- NUMBER_INPUT: NumberInputMapper,
22069
- CHECKBOX: CheckboxMapper,
22070
- SIGNATURE: SignatureMapper,
22071
- RATING_INPUT: RatingInputMapper,
22072
- RADIO_GROUP: RadioGroupMapper,
22073
- CHECKBOX_GROUP: CheckboxGroupMapper,
22074
- DROPDOWN: DropdownMapper,
22075
- TAGS: TagsMapper,
22076
- TIME_INPUT: TimeInputMapper,
22077
- TEXT: TextMapper,
22078
- SUBMIT_BUTTON: SubmitButtonMapper,
22079
- PRODUCT_LIST: ProductListMapper,
22080
- FIXED_PAYMENT: FixedPaymentMapper,
22081
- PAYMENT_INPUT: PaymentInputMapper,
22082
- DONATION: DonationMapper,
22083
- APPOINTMENT: AppointmentMapper,
22084
- IMAGE_CHOICE: ImageChoiceMapper,
22085
- // fields that have not been implemented
22086
- "": () => ({})
22087
- };
22088
-
22089
22317
  // src/mappers/field-type-map.ts
22090
22318
  var FIELD_TYPE_MAP = {
22091
22319
  // CONTACTS_FIELD_TYPES
@@ -22186,21 +22414,12 @@ var FIELD_TYPE_MAP = {
22186
22414
  SUBMIT_BUTTON: "SUBMIT_BUTTON",
22187
22415
  SERVICES_MULTI_CHOICE: "CHECKBOX_GROUP",
22188
22416
  // fields that have not been implemented
22189
- NESTED_FORM: "",
22190
- IDENTITY_PASSWORD: "",
22191
- BOOKINGS_LOGIN_BAR: ""
22417
+ NESTED_FORM: "TEXT_INPUT",
22418
+ IDENTITY_PASSWORD: "TEXT_INPUT",
22419
+ BOOKINGS_LOGIN_BAR: "TEXT_INPUT"
22192
22420
  };
22193
- var mapFieldProps = (fields, mappers) => Object.fromEntries(
22194
- Object.entries(fields).map(([fieldType, Component]) => [
22195
- fieldType,
22196
- mappers[fieldType] ? (props) => /* @__PURE__ */ jsx(
22197
- Component,
22198
- {
22199
- ...mappers[fieldType](props)
22200
- }
22201
- ) : Component
22202
- ])
22203
- );
22421
+
22422
+ // src/utils/mappers.tsx
22204
22423
  var mapFieldTypes = (fields, typeMap) => ({
22205
22424
  ...fields,
22206
22425
  ...Object.fromEntries(
@@ -22226,13 +22445,9 @@ var useForm3 = ({
22226
22445
  console.log("upload file not implemented");
22227
22446
  }
22228
22447
  };
22229
- const mappedFieldProps = useMemo(
22230
- () => mapFieldProps(fields, FIELD_PROP_MAP),
22231
- [fields]
22232
- );
22233
22448
  const mappedFieldTypes = useMemo(
22234
- () => mapFieldTypes(mappedFieldProps, FIELD_TYPE_MAP),
22235
- [mappedFieldProps]
22449
+ () => mapFieldTypes(fields, FIELD_TYPE_MAP),
22450
+ [fields]
22236
22451
  );
22237
22452
  const { currentView, formFields } = useForm2({
22238
22453
  form,
@@ -22393,6 +22608,6 @@ var FormProvider = ({
22393
22608
  \******************************)
22394
22609
  */
22395
22610
 
22396
- export { FormProvider, useForm3 as useForm };
22611
+ export { FormProvider, useFieldProps, useForm3 as useForm };
22397
22612
  //# sourceMappingURL=index.js.map
22398
22613
  //# sourceMappingURL=index.js.map