@wix/auto-patterns 1.45.0 → 1.47.0

package/dist/esm/components/fields/Address.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormField","FormAddressInput","useEntityPageContext","useWixPatternsContainer","useController","Address","props","_pageState$entity","_field$validation2","_controller$fieldStat","field","dataHook","translate","pt","pageState","controller","name","id","control","form","defaultValue","entity","rules","validate","value","_field$validation","validation","required","undefined","createElement","label","displayName","status","fieldState","error","statusMessage","message","autoFocus","data","onChange"],"sources":["../../../../src/components/fields/Address.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField } from '@wix/design-system';\nimport { BaseInputProps } from './types';\nimport { Address as AddressType, FormAddressInput } from '../../cms-fields';\nimport { useEntityPageContext, useWixPatternsContainer } from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\n\nexport interface AddressProps extends BaseInputProps<AddressType> {}\n\nexport const Address = (props: AddressProps) => {\n  const { field, dataHook } = props;\n\n  const { translate: pt } = useWixPatternsContainer();\n\n  const pageState = useEntityPageContext();\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: pageState.form.control,\n    defaultValue: (pageState.entity as any)?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (\n          field.validation?.required &&\n          (value === null || value === undefined || value === '')\n        ) {\n          return pt('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <FormAddressInput\n        autoFocus={false}\n        data={controller.field.value}\n        onChange={(value) => controller.field.onChange?.(value)}\n        dataHook={`address-${field.id}`}\n        field={field.id}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,oBAAoB;AAE9C,SAAiCC,gBAAgB,QAAQ,kBAAkB;AAC3E,SAASC,oBAAoB,EAAEC,uBAAuB,QAAQ,eAAe;AAC7E,SAASC,aAAa,QAAQ,oBAAoB;AAIlD,OAAO,MAAMC,OAAO,GAAIC,KAAmB,IAAK;EAAA,IAAAC,iBAAA,EAAAC,kBAAA,EAAAC,qBAAA;EAC9C,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAC,GAAGL,KAAK;EAEjC,MAAM;IAAEM,SAAS,EAAEC;EAAG,CAAC,GAAGV,uBAAuB,CAAC,CAAC;EAEnD,MAAMW,SAAS,GAAGZ,oBAAoB,CAAC,CAAC;EAExC,MAAMa,UAAU,GAAGX,aAAa,CAAC;IAC/BY,IAAI,EAAE,CAAAN,KAAK,oBAALA,KAAK,CAAEO,EAAE,KAAI,EAAE;IACrBC,OAAO,EAAEJ,SAAS,CAACK,IAAI,CAACD,OAAO;IAC/BE,YAAY,GAAAb,iBAAA,GAAGO,SAAS,CAACO,MAAM,qBAAjBd,iBAAA,CAA4B,CAAAG,KAAK,oBAALA,KAAK,CAAEO,EAAE,KAAI,EAAE,CAAC;IAC1DK,KAAK,EAAE;MACLC,QAAQ,EAAGC,KAAK,IAAK;QAAA,IAAAC,iBAAA;QACnB,IACE,CAAAA,iBAAA,GAAAf,KAAK,CAACgB,UAAU,aAAhBD,iBAAA,CAAkBE,QAAQ,KACzBH,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAKI,SAAS,IAAIJ,KAAK,KAAK,EAAE,CAAC,EACvD;UACA,OAAOX,EAAE,CAAC,qCAAqC,CAAC;QAClD;QAEA,OAAO,IAAI;MACb;IACF;EACF,CAAC,CAAC;EAEF,oBACEd,KAAA,CAAA8B,aAAA,CAAC7B,SAAS;IACR8B,KAAK,EAAEpB,KAAK,CAACqB,WAAY;IACzBJ,QAAQ,GAAAnB,kBAAA,GAAEE,KAAK,CAACgB,UAAU,qBAAhBlB,kBAAA,CAAkBmB,QAAS;IACrCK,MAAM,EAAEjB,UAAU,CAACkB,UAAU,CAACC,KAAK,GAAG,OAAO,GAAGN,SAAU;IAC1DO,aAAa,GAAA1B,qBAAA,GAAEM,UAAU,CAACkB,UAAU,CAACC,KAAK,qBAA3BzB,qBAAA,CAA6B2B,OAAQ;IACpDzB,QAAQ,EAAEA;EAAS,gBAEnBZ,KAAA,CAAA8B,aAAA,CAAC5B,gBAAgB;IACfoC,SAAS,EAAE,KAAM;IACjBC,IAAI,EAAEvB,UAAU,CAACL,KAAK,CAACc,KAAM;IAC7Be,QAAQ,EAAGf,KAAK,IAAKT,UAAU,CAACL,KAAK,CAAC6B,QAAQ,oBAAzBxB,UAAU,CAACL,KAAK,CAAC6B,QAAQ,CAAGf,KAAK,CAAE;IACxDb,QAAQ,EAAE,WAAWD,KAAK,CAACO,EAAE,EAAG;IAChCP,KAAK,EAAEA,KAAK,CAACO;EAAG,CACjB,CACQ,CAAC;AAEhB,CAAC","ignoreList":[]}

package/dist/esm/components/fields/Audio.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { FormField } from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
+import { FormAudioField } from '../../cms-fields/components/audio/audio-field/form-audio-field';
+export const Audio = props => {
+  var _field$validation2, _controller$fieldStat;
+  const {
+    field,
+    dataHook,
+    formControl,
+    data
+  } = props;
+  const {
+    translate: t
+  } = useWixPatternsContainer();
+  const controller = useController({
+    name: (field == null ? void 0 : field.id) ?? '',
+    control: formControl,
+    defaultValue: data == null ? void 0 : data[(field == null ? void 0 : field.id) ?? ''],
+    rules: {
+      validate: value => {
+        var _field$validation;
+        if ((_field$validation = field.validation) != null && _field$validation.required && (value === null || value === undefined || value === '')) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(FormField, {
+    label: field.displayName,
+    required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
+    status: controller.fieldState.error ? 'error' : undefined,
+    statusMessage: (_controller$fieldStat = controller.fieldState.error) == null ? void 0 : _controller$fieldStat.message,
+    dataHook: dataHook
+  }, /*#__PURE__*/React.createElement(FormAudioField, {
+    data: controller.field.value,
+    onChange: value => controller.field.onChange(value),
+    onClear: () => controller.field.onChange(null),
+    dataHook: `audio-${field.id}`
+  }));
+};
+//# sourceMappingURL=Audio.js.map

package/dist/esm/components/fields/Audio.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormField","useWixPatternsContainer","useController","FormAudioField","Audio","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","t","controller","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","undefined","createElement","label","displayName","status","fieldState","error","statusMessage","message","onChange","onClear"],"sources":["../../../../src/components/fields/Audio.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField } from '@wix/design-system';\nimport { useWixPatternsContainer } from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\n\nimport { FormAudioField } from '../../cms-fields/components/audio/audio-field/form-audio-field';\nimport { BaseInputProps } from './types';\n\nexport interface AudioProps extends BaseInputProps<string> {}\n\nexport const Audio = (props: AudioProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: t } = useWixPatternsContainer();\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (\n          field.validation?.required &&\n          (value === null || value === undefined || value === '')\n        ) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <FormAudioField\n        data={controller.field.value}\n        onChange={(value) => controller.field.onChange(value)}\n        onClear={() => controller.field.onChange(null)}\n        dataHook={`audio-${field.id}`}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,uBAAuB,QAAQ,eAAe;AACvD,SAASC,aAAa,QAAQ,oBAAoB;AAElD,SAASC,cAAc,QAAQ,gEAAgE;AAK/F,OAAO,MAAMC,KAAK,GAAIC,KAAiB,IAAK;EAAA,IAAAC,kBAAA,EAAAC,qBAAA;EAC1C,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAK,CAAC,GAAGN,KAAK;EAEpD,MAAM;IAAEO,SAAS,EAAEC;EAAE,CAAC,GAAGZ,uBAAuB,CAAC,CAAC;EAElD,MAAMa,UAAU,GAAGZ,aAAa,CAAC;IAC/Ba,IAAI,EAAE,CAAAP,KAAK,oBAALA,KAAK,CAAEQ,EAAE,KAAI,EAAE;IACrBC,OAAO,EAAEP,WAAW;IACpBQ,YAAY,EAAEP,IAAI,oBAAJA,IAAI,CAAG,CAAAH,KAAK,oBAALA,KAAK,CAAEQ,EAAE,KAAI,EAAE,CAAC;IACrCG,KAAK,EAAE;MACLC,QAAQ,EAAGC,KAAK,IAAK;QAAA,IAAAC,iBAAA;QACnB,IACE,CAAAA,iBAAA,GAAAd,KAAK,CAACe,UAAU,aAAhBD,iBAAA,CAAkBE,QAAQ,KACzBH,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAKI,SAAS,IAAIJ,KAAK,KAAK,EAAE,CAAC,EACvD;UACA,OAAOR,CAAC,CAAC,qCAAqC,CAAC;QACjD;QAEA,OAAO,IAAI;MACb;IACF;EACF,CAAC,CAAC;EAEF,oBACEd,KAAA,CAAA2B,aAAA,CAAC1B,SAAS;IACR2B,KAAK,EAAEnB,KAAK,CAACoB,WAAY;IACzBJ,QAAQ,GAAAlB,kBAAA,GAAEE,KAAK,CAACe,UAAU,qBAAhBjB,kBAAA,CAAkBkB,QAAS;IACrCK,MAAM,EAAEf,UAAU,CAACgB,UAAU,CAACC,KAAK,GAAG,OAAO,GAAGN,SAAU;IAC1DO,aAAa,GAAAzB,qBAAA,GAAEO,UAAU,CAACgB,UAAU,CAACC,KAAK,qBAA3BxB,qBAAA,CAA6B0B,OAAQ;IACpDxB,QAAQ,EAAEA;EAAS,gBAEnBV,KAAA,CAAA2B,aAAA,CAACvB,cAAc;IACbQ,IAAI,EAAEG,UAAU,CAACN,KAAK,CAACa,KAAM;IAC7Ba,QAAQ,EAAGb,KAAK,IAAKP,UAAU,CAACN,KAAK,CAAC0B,QAAQ,CAACb,KAAK,CAAE;IACtDc,OAAO,EAAEA,CAAA,KAAMrB,UAAU,CAACN,KAAK,CAAC0B,QAAQ,CAAC,IAAI,CAAE;IAC/CzB,QAAQ,EAAE,SAASD,KAAK,CAACQ,EAAE;EAAG,CAC/B,CACQ,CAAC;AAEhB,CAAC","ignoreList":[]}

package/dist/esm/components/fields/Document.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { FormField } from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
+import { FormDocumentField } from '../../cms-fields/components/document/form-document-field';
+export const Document = props => {
+  var _field$validation2, _controller$fieldStat;
+  const {
+    field,
+    dataHook,
+    formControl,
+    data
+  } = props;
+  const {
+    translate: t
+  } = useWixPatternsContainer();
+  const controller = useController({
+    name: (field == null ? void 0 : field.id) ?? '',
+    control: formControl,
+    defaultValue: data == null ? void 0 : data[(field == null ? void 0 : field.id) ?? ''],
+    rules: {
+      validate: value => {
+        var _field$validation;
+        if ((_field$validation = field.validation) != null && _field$validation.required && (value === null || value === undefined || value === '')) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(FormField, {
+    label: field.displayName,
+    required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
+    status: controller.fieldState.error ? 'error' : undefined,
+    statusMessage: (_controller$fieldStat = controller.fieldState.error) == null ? void 0 : _controller$fieldStat.message,
+    dataHook: dataHook
+  }, /*#__PURE__*/React.createElement(FormDocumentField, {
+    data: controller.field.value,
+    onChange: value => controller.field.onChange(value),
+    onClear: () => controller.field.onChange(null),
+    dataHook: `document-${field.id}`
+  }));
+};
+//# sourceMappingURL=Document.js.map

package/dist/esm/components/fields/Document.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormField","useWixPatternsContainer","useController","FormDocumentField","Document","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","t","controller","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","undefined","createElement","label","displayName","status","fieldState","error","statusMessage","message","onChange","onClear"],"sources":["../../../../src/components/fields/Document.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField } from '@wix/design-system';\nimport { useWixPatternsContainer } from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { BaseInputProps } from './types';\nimport { FormDocumentField } from '../../cms-fields/components/document/form-document-field';\n\nexport interface DocumentProps extends BaseInputProps<string> {}\n\nexport const Document = (props: DocumentProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: t } = useWixPatternsContainer();\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (\n          field.validation?.required &&\n          (value === null || value === undefined || value === '')\n        ) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <FormDocumentField\n        data={controller.field.value}\n        onChange={(value) => controller.field.onChange(value)}\n        onClear={() => controller.field.onChange(null)}\n        dataHook={`document-${field.id}`}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,uBAAuB,QAAQ,eAAe;AACvD,SAASC,aAAa,QAAQ,oBAAoB;AAElD,SAASC,iBAAiB,QAAQ,0DAA0D;AAI5F,OAAO,MAAMC,QAAQ,GAAIC,KAAoB,IAAK;EAAA,IAAAC,kBAAA,EAAAC,qBAAA;EAChD,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAK,CAAC,GAAGN,KAAK;EAEpD,MAAM;IAAEO,SAAS,EAAEC;EAAE,CAAC,GAAGZ,uBAAuB,CAAC,CAAC;EAElD,MAAMa,UAAU,GAAGZ,aAAa,CAAC;IAC/Ba,IAAI,EAAE,CAAAP,KAAK,oBAALA,KAAK,CAAEQ,EAAE,KAAI,EAAE;IACrBC,OAAO,EAAEP,WAAW;IACpBQ,YAAY,EAAEP,IAAI,oBAAJA,IAAI,CAAG,CAAAH,KAAK,oBAALA,KAAK,CAAEQ,EAAE,KAAI,EAAE,CAAC;IACrCG,KAAK,EAAE;MACLC,QAAQ,EAAGC,KAAK,IAAK;QAAA,IAAAC,iBAAA;QACnB,IACE,CAAAA,iBAAA,GAAAd,KAAK,CAACe,UAAU,aAAhBD,iBAAA,CAAkBE,QAAQ,KACzBH,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAKI,SAAS,IAAIJ,KAAK,KAAK,EAAE,CAAC,EACvD;UACA,OAAOR,CAAC,CAAC,qCAAqC,CAAC;QACjD;QAEA,OAAO,IAAI;MACb;IACF;EACF,CAAC,CAAC;EAEF,oBACEd,KAAA,CAAA2B,aAAA,CAAC1B,SAAS;IACR2B,KAAK,EAAEnB,KAAK,CAACoB,WAAY;IACzBJ,QAAQ,GAAAlB,kBAAA,GAAEE,KAAK,CAACe,UAAU,qBAAhBjB,kBAAA,CAAkBkB,QAAS;IACrCK,MAAM,EAAEf,UAAU,CAACgB,UAAU,CAACC,KAAK,GAAG,OAAO,GAAGN,SAAU;IAC1DO,aAAa,GAAAzB,qBAAA,GAAEO,UAAU,CAACgB,UAAU,CAACC,KAAK,qBAA3BxB,qBAAA,CAA6B0B,OAAQ;IACpDxB,QAAQ,EAAEA;EAAS,gBAEnBV,KAAA,CAAA2B,aAAA,CAACvB,iBAAiB;IAChBQ,IAAI,EAAEG,UAAU,CAACN,KAAK,CAACa,KAAM;IAC7Ba,QAAQ,EAAGb,KAAK,IAAKP,UAAU,CAACN,KAAK,CAAC0B,QAAQ,CAACb,KAAK,CAAE;IACtDc,OAAO,EAAEA,CAAA,KAAMrB,UAAU,CAACN,KAAK,CAAC0B,QAAQ,CAAC,IAAI,CAAE;IAC/CzB,QAAQ,EAAE,YAAYD,KAAK,CAACQ,EAAE;EAAG,CAClC,CACQ,CAAC;AAEhB,CAAC","ignoreList":[]}

package/dist/esm/components/fields/Email.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { FormField, Input } from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
+import { useAutoPatternsAppContainer } from '../AutoPatternsApp/AutoPatternsAppContainerProvider';
+import * as emailValidation from '../../cms-fields/validations/email';
+export const Email = props => {
+  var _field$validation2, _controller$fieldStat;
+  const {
+    field,
+    dataHook,
+    formControl,
+    data
+  } = props;
+  const {
+    translate: pt
+  } = useWixPatternsContainer();
+  const {
+    translate: t
+  } = useAutoPatternsAppContainer();
+  const controller = useController({
+    name: (field == null ? void 0 : field.id) ?? '',
+    control: formControl,
+    defaultValue: data == null ? void 0 : data[(field == null ? void 0 : field.id) ?? ''],
+    rules: {
+      validate: value => {
+        var _field$validation;
+        if ((_field$validation = field.validation) != null && _field$validation.required && (value === null || value === undefined || value === '')) {
+          return pt('cairo.fieldValidation.requiredField');
+        } else if (value) {
+          if (!emailValidation.isValid(value)) {
+            return t('auto-patterns.fields.email_input_error');
+          }
+        }
+        return true;
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(FormField, {
+    label: field.displayName,
+    required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
+    dataHook: dataHook,
+    status: controller.fieldState.error && controller.formState.isSubmitted ? 'error' : undefined,
+    statusMessage: controller.formState.isSubmitted ? (_controller$fieldStat = controller.fieldState.error) == null ? void 0 : _controller$fieldStat.message : undefined
+  }, /*#__PURE__*/React.createElement(Input, {
+    dataHook: `email-${field.id}`,
+    value: controller.field.value,
+    onChange: e => controller.field.onChange == null ? void 0 : controller.field.onChange(e.target.value),
+    onBlur: controller.field.onBlur,
+    ref: controller.field.ref
+  }));
+};
+//# sourceMappingURL=Email.js.map

package/dist/esm/components/fields/Email.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormField","Input","useWixPatternsContainer","useController","useAutoPatternsAppContainer","emailValidation","Email","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","pt","t","controller","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","undefined","isValid","createElement","label","displayName","status","fieldState","error","formState","isSubmitted","statusMessage","message","onChange","e","target","onBlur","ref"],"sources":["../../../../src/components/fields/Email.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, Input } from '@wix/design-system';\nimport { BaseInputProps } from './types';\nimport { useWixPatternsContainer } from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { useAutoPatternsAppContainer } from '../AutoPatternsApp/AutoPatternsAppContainerProvider';\nimport * as emailValidation from '../../cms-fields/validations/email';\n\nexport interface EmailProps extends BaseInputProps<string> {}\n\nexport const Email = (props: EmailProps) => {\n  const { field, dataHook, formControl, data } = props;\n  const { translate: pt } = useWixPatternsContainer();\n  const { translate: t } = useAutoPatternsAppContainer();\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (value: string | null | undefined) => {\n        if (\n          field.validation?.required &&\n          (value === null || value === undefined || value === '')\n        ) {\n          return pt('cairo.fieldValidation.requiredField');\n        } else if (value) {\n          if (!emailValidation.isValid(value)) {\n            return t('auto-patterns.fields.email_input_error');\n          }\n        }\n        return true;\n      },\n    },\n  });\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      dataHook={dataHook}\n      status={\n        controller.fieldState.error && controller.formState.isSubmitted\n          ? 'error'\n          : undefined\n      }\n      statusMessage={\n        controller.formState.isSubmitted\n          ? controller.fieldState.error?.message\n          : undefined\n      }\n    >\n      <Input\n        dataHook={`email-${field.id}`}\n        value={controller.field.value}\n        onChange={(e) => controller.field.onChange?.(e.target.value)}\n        onBlur={controller.field.onBlur}\n        ref={controller.field.ref}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,KAAK,QAAQ,oBAAoB;AAErD,SAASC,uBAAuB,QAAQ,eAAe;AACvD,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,2BAA2B,QAAQ,qDAAqD;AACjG,OAAO,KAAKC,eAAe,MAAM,oCAAoC;AAIrE,OAAO,MAAMC,KAAK,GAAIC,KAAiB,IAAK;EAAA,IAAAC,kBAAA,EAAAC,qBAAA;EAC1C,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAK,CAAC,GAAGN,KAAK;EACpD,MAAM;IAAEO,SAAS,EAAEC;EAAG,CAAC,GAAGb,uBAAuB,CAAC,CAAC;EACnD,MAAM;IAAEY,SAAS,EAAEE;EAAE,CAAC,GAAGZ,2BAA2B,CAAC,CAAC;EAEtD,MAAMa,UAAU,GAAGd,aAAa,CAAC;IAC/Be,IAAI,EAAE,CAAAR,KAAK,oBAALA,KAAK,CAAES,EAAE,KAAI,EAAE;IACrBC,OAAO,EAAER,WAAW;IACpBS,YAAY,EAAER,IAAI,oBAAJA,IAAI,CAAG,CAAAH,KAAK,oBAALA,KAAK,CAAES,EAAE,KAAI,EAAE,CAAC;IACrCG,KAAK,EAAE;MACLC,QAAQ,EAAGC,KAAgC,IAAK;QAAA,IAAAC,iBAAA;QAC9C,IACE,CAAAA,iBAAA,GAAAf,KAAK,CAACgB,UAAU,aAAhBD,iBAAA,CAAkBE,QAAQ,KACzBH,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAKI,SAAS,IAAIJ,KAAK,KAAK,EAAE,CAAC,EACvD;UACA,OAAOT,EAAE,CAAC,qCAAqC,CAAC;QAClD,CAAC,MAAM,IAAIS,KAAK,EAAE;UAChB,IAAI,CAACnB,eAAe,CAACwB,OAAO,CAACL,KAAK,CAAC,EAAE;YACnC,OAAOR,CAAC,CAAC,wCAAwC,CAAC;UACpD;QACF;QACA,OAAO,IAAI;MACb;IACF;EACF,CAAC,CAAC;EAEF,oBACEjB,KAAA,CAAA+B,aAAA,CAAC9B,SAAS;IACR+B,KAAK,EAAErB,KAAK,CAACsB,WAAY;IACzBL,QAAQ,GAAAnB,kBAAA,GAAEE,KAAK,CAACgB,UAAU,qBAAhBlB,kBAAA,CAAkBmB,QAAS;IACrChB,QAAQ,EAAEA,QAAS;IACnBsB,MAAM,EACJhB,UAAU,CAACiB,UAAU,CAACC,KAAK,IAAIlB,UAAU,CAACmB,SAAS,CAACC,WAAW,GAC3D,OAAO,GACPT,SACL;IACDU,aAAa,EACXrB,UAAU,CAACmB,SAAS,CAACC,WAAW,IAAA5B,qBAAA,GAC5BQ,UAAU,CAACiB,UAAU,CAACC,KAAK,qBAA3B1B,qBAAA,CAA6B8B,OAAO,GACpCX;EACL,gBAED7B,KAAA,CAAA+B,aAAA,CAAC7B,KAAK;IACJU,QAAQ,EAAE,SAASD,KAAK,CAACS,EAAE,EAAG;IAC9BK,KAAK,EAAEP,UAAU,CAACP,KAAK,CAACc,KAAM;IAC9BgB,QAAQ,EAAGC,CAAC,IAAKxB,UAAU,CAACP,KAAK,CAAC8B,QAAQ,oBAAzBvB,UAAU,CAACP,KAAK,CAAC8B,QAAQ,CAAGC,CAAC,CAACC,MAAM,CAAClB,KAAK,CAAE;IAC7DmB,MAAM,EAAE1B,UAAU,CAACP,KAAK,CAACiC,MAAO;IAChCC,GAAG,EAAE3B,UAAU,CAACP,KAAK,CAACkC;EAAI,CAC3B,CACQ,CAAC;AAEhB,CAAC","ignoreList":[]}

package/dist/esm/components/fields/MultiDocument.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { FormField } from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
+import { FormMultiDocumentField } from '../../cms-fields/components';
+export const MultiDocument = props => {
+  var _field$validation2, _controller$fieldStat;
+  const {
+    field,
+    dataHook,
+    formControl,
+    data
+  } = props;
+  const {
+    translate: t
+  } = useWixPatternsContainer();
+  const controller = useController({
+    name: (field == null ? void 0 : field.id) ?? '',
+    control: formControl,
+    defaultValue: data == null ? void 0 : data[(field == null ? void 0 : field.id) ?? ''],
+    rules: {
+      validate: value => {
+        var _field$validation;
+        if ((_field$validation = field.validation) != null && _field$validation.required && (!value || Array.isArray(value) && value.length === 0)) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(FormField, {
+    label: field.displayName,
+    required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
+    status: controller.fieldState.error ? 'error' : undefined,
+    statusMessage: (_controller$fieldStat = controller.fieldState.error) == null ? void 0 : _controller$fieldStat.message,
+    dataHook: dataHook
+  }, /*#__PURE__*/React.createElement(FormMultiDocumentField, {
+    data: controller.field.value,
+    onChange: value => controller.field.onChange(value),
+    dataHook: `multi-document-${field.id}`
+  }));
+};
+//# sourceMappingURL=MultiDocument.js.map

package/dist/esm/components/fields/MultiDocument.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormField","useWixPatternsContainer","useController","FormMultiDocumentField","MultiDocument","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","t","controller","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","Array","isArray","length","createElement","label","displayName","status","fieldState","error","undefined","statusMessage","message","onChange"],"sources":["../../../../src/components/fields/MultiDocument.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField } from '@wix/design-system';\nimport { useWixPatternsContainer } from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { BaseInputProps } from './types';\nimport { FormMultiDocumentField } from '../../cms-fields/components';\n\nexport interface MultiDocumentProps extends BaseInputProps<string[]> {}\n\nexport const MultiDocument = (props: MultiDocumentProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: t } = useWixPatternsContainer();\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (\n          field.validation?.required &&\n          (!value || (Array.isArray(value) && value.length === 0))\n        ) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <FormMultiDocumentField\n        data={controller.field.value}\n        onChange={(value) => controller.field.onChange(value)}\n        dataHook={`multi-document-${field.id}`}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,uBAAuB,QAAQ,eAAe;AACvD,SAASC,aAAa,QAAQ,oBAAoB;AAElD,SAASC,sBAAsB,QAAQ,6BAA6B;AAIpE,OAAO,MAAMC,aAAa,GAAIC,KAAyB,IAAK;EAAA,IAAAC,kBAAA,EAAAC,qBAAA;EAC1D,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAK,CAAC,GAAGN,KAAK;EAEpD,MAAM;IAAEO,SAAS,EAAEC;EAAE,CAAC,GAAGZ,uBAAuB,CAAC,CAAC;EAElD,MAAMa,UAAU,GAAGZ,aAAa,CAAC;IAC/Ba,IAAI,EAAE,CAAAP,KAAK,oBAALA,KAAK,CAAEQ,EAAE,KAAI,EAAE;IACrBC,OAAO,EAAEP,WAAW;IACpBQ,YAAY,EAAEP,IAAI,oBAAJA,IAAI,CAAG,CAAAH,KAAK,oBAALA,KAAK,CAAEQ,EAAE,KAAI,EAAE,CAAC;IACrCG,KAAK,EAAE;MACLC,QAAQ,EAAGC,KAAK,IAAK;QAAA,IAAAC,iBAAA;QACnB,IACE,CAAAA,iBAAA,GAAAd,KAAK,CAACe,UAAU,aAAhBD,iBAAA,CAAkBE,QAAQ,KACzB,CAACH,KAAK,IAAKI,KAAK,CAACC,OAAO,CAACL,KAAK,CAAC,IAAIA,KAAK,CAACM,MAAM,KAAK,CAAE,CAAC,EACxD;UACA,OAAOd,CAAC,CAAC,qCAAqC,CAAC;QACjD;QAEA,OAAO,IAAI;MACb;IACF;EACF,CAAC,CAAC;EAEF,oBACEd,KAAA,CAAA6B,aAAA,CAAC5B,SAAS;IACR6B,KAAK,EAAErB,KAAK,CAACsB,WAAY;IACzBN,QAAQ,GAAAlB,kBAAA,GAAEE,KAAK,CAACe,UAAU,qBAAhBjB,kBAAA,CAAkBkB,QAAS;IACrCO,MAAM,EAAEjB,UAAU,CAACkB,UAAU,CAACC,KAAK,GAAG,OAAO,GAAGC,SAAU;IAC1DC,aAAa,GAAA5B,qBAAA,GAAEO,UAAU,CAACkB,UAAU,CAACC,KAAK,qBAA3B1B,qBAAA,CAA6B6B,OAAQ;IACpD3B,QAAQ,EAAEA;EAAS,gBAEnBV,KAAA,CAAA6B,aAAA,CAACzB,sBAAsB;IACrBQ,IAAI,EAAEG,UAAU,CAACN,KAAK,CAACa,KAAM;IAC7BgB,QAAQ,EAAGhB,KAAK,IAAKP,UAAU,CAACN,KAAK,CAAC6B,QAAQ,CAAChB,KAAK,CAAE;IACtDZ,QAAQ,EAAE,kBAAkBD,KAAK,CAACQ,EAAE;EAAG,CACxC,CACQ,CAAC;AAEhB,CAAC","ignoreList":[]}

package/dist/esm/components/fields/MultiReference.js

@@ -0,0 +1,133 @@
+import React, { useCallback, useMemo } from 'react';
+import { FormField, MultiSelect, Box } from '@wix/design-system';
+import { useController } from '@wix/patterns/form';
+import { useReferenceField } from '../../hooks';
+import { useWixPatternsContainer } from '@wix/patterns';
+import { ReferenceAvatar } from '../ReferenceAvatar';
+import { ReferenceFooter } from '../ReferenceFooter/ReferenceFooter';
+import { getImageFieldId } from '../../utils/schema';
+export const MultiReference = props => {
+  var _field$validation2, _controller$fieldStat, _field$validation3;
+  const {
+    field,
+    dataHook,
+    formControl,
+    data
+  } = props;
+  const {
+    collection,
+    referencedSchema,
+    idField,
+    displayField,
+    keyedItems,
+    showInitialLoader,
+    fetchedLastPage,
+    searchValue,
+    options,
+    placeholder
+  } = useReferenceField({
+    field
+  });
+  const {
+    translate: t
+  } = useWixPatternsContainer();
+  const controller = useController({
+    name: field.id,
+    control: formControl,
+    defaultValue: data[field.id],
+    rules: {
+      validate: value => {
+        var _field$validation;
+        const arr = value;
+        if ((_field$validation = field.validation) != null && _field$validation.required && (!arr || !arr.length)) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      }
+    }
+  });
+  const selectedValues = useMemo(() => controller.field.value || [], [controller.field.value]);
+  const tags = useMemo(() => {
+    const imageFieldId = referencedSchema ? getImageFieldId(referencedSchema.fields) : undefined;
+    return selectedValues.map(item => {
+      const selectedId = item[idField];
+      const selectedDisplayValue = item[displayField];
+      const image = imageFieldId ? item[imageFieldId] : undefined;
+      return {
+        id: selectedId,
+        label: selectedDisplayValue,
+        removable: true,
+        size: 'medium',
+        thumb: /*#__PURE__*/React.createElement(Box, {
+          align: "center",
+          verticalAlign: "middle",
+          position: "absolute",
+          top: "calc(50% - 12px)",
+          left: "calc(50% - 12px)"
+        }, /*#__PURE__*/React.createElement(ReferenceAvatar, {
+          name: selectedDisplayValue,
+          image: image
+        })),
+        dataHook: `multi-reference-tag-${field.id}-${selectedId}`
+      };
+    });
+  }, [selectedValues, idField, displayField, keyedItems, referencedSchema, field.id]);
+  const handleSelect = useCallback(option => {
+    const selectedId = String(option.id);
+    if (selectedValues.some(item => item[idField] === selectedId)) {
+      collection.clearSearch();
+      return;
+    }
+    const selectedItem = keyedItems.find(ki => ki.key === selectedId);
+    const newItem = {
+      [idField]: selectedId,
+      [displayField]: (selectedItem == null ? void 0 : selectedItem.item.name) || ''
+    };
+    controller.field.onChange([...selectedValues, newItem]);
+    collection.clearSearch();
+  }, [idField, displayField, controller.field, collection, keyedItems, selectedValues]);
+  const handleRemoveTag = useCallback(tagId => {
+    controller.field.onChange(selectedValues.filter(item => item[idField] !== tagId));
+  }, [controller.field, selectedValues, idField]);
+  const handleChange = useCallback(e => {
+    collection.search(e.target.value);
+  }, [collection]);
+  const handleClear = useCallback(() => {
+    controller.field.onChange([]);
+    collection.clearSearch();
+  }, [controller.field, collection]);
+  const handleBlur = useCallback(() => {
+    collection.clearSearch();
+  }, [collection]);
+  if (!referencedSchema) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FormField, {
+    label: field.displayName,
+    required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
+    status: controller.fieldState.error ? 'error' : undefined,
+    statusMessage: (_controller$fieldStat = controller.fieldState.error) == null ? void 0 : _controller$fieldStat.message,
+    dataHook: dataHook
+  }, /*#__PURE__*/React.createElement(MultiSelect, {
+    placeholder: placeholder,
+    options: options,
+    value: searchValue,
+    size: "large",
+    tags: tags,
+    clearOnBlur: false,
+    onChange: handleChange,
+    onSelect: handleSelect,
+    onRemoveTag: handleRemoveTag,
+    onClear: handleClear,
+    onBlur: handleBlur,
+    clearButton: !((_field$validation3 = field.validation) != null && _field$validation3.required),
+    infiniteScroll: true,
+    hasMore: !showInitialLoader && !fetchedLastPage,
+    loadMore: collection.fetchNextPageIfNeeded,
+    fixedFooter: /*#__PURE__*/React.createElement(ReferenceFooter, {
+      collection: collection
+    }),
+    dataHook: `multi-reference-input-${field.id}`
+  }));
+};
+//# sourceMappingURL=MultiReference.js.map

package/dist/esm/components/fields/MultiReference.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","FormField","MultiSelect","Box","useController","useReferenceField","useWixPatternsContainer","ReferenceAvatar","ReferenceFooter","getImageFieldId","MultiReference","props","_field$validation2","_controller$fieldStat","_field$validation3","field","dataHook","formControl","data","collection","referencedSchema","idField","displayField","keyedItems","showInitialLoader","fetchedLastPage","searchValue","options","placeholder","translate","t","controller","name","id","control","defaultValue","rules","validate","value","_field$validation","arr","validation","required","length","selectedValues","tags","imageFieldId","fields","undefined","map","item","selectedId","selectedDisplayValue","image","label","removable","size","thumb","createElement","align","verticalAlign","position","top","left","handleSelect","option","String","some","clearSearch","selectedItem","find","ki","key","newItem","onChange","handleRemoveTag","tagId","filter","handleChange","e","search","target","handleClear","handleBlur","displayName","status","fieldState","error","statusMessage","message","clearOnBlur","onSelect","onRemoveTag","onClear","onBlur","clearButton","infiniteScroll","hasMore","loadMore","fetchNextPageIfNeeded","fixedFooter"],"sources":["../../../../src/components/fields/MultiReference.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport {\n  FormField,\n  DropdownLayoutValueOption,\n  MultiSelect,\n  Box,\n  type MultiSelectTag,\n} from '@wix/design-system';\nimport { BaseInputProps } from './types';\nimport { useController } from '@wix/patterns/form';\nimport { MultiReferenceField } from '../../types';\nimport { useReferenceField } from '../../hooks';\nimport { useWixPatternsContainer } from '@wix/patterns';\nimport { ReferenceAvatar } from '../ReferenceAvatar';\nimport { ReferenceFooter } from '../ReferenceFooter/ReferenceFooter';\nimport { getImageFieldId } from '../../utils/schema';\n\ntype ReferenceValue = Record<string, unknown>;\n\nexport interface MultiReferenceInputProps\n  extends BaseInputProps<ReferenceValue[] | null> {\n  field: MultiReferenceField;\n}\n\nexport const MultiReference = (props: MultiReferenceInputProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const {\n    collection,\n    referencedSchema,\n    idField,\n    displayField,\n    keyedItems,\n    showInitialLoader,\n    fetchedLastPage,\n    searchValue,\n    options,\n    placeholder,\n  } = useReferenceField({ field });\n  const { translate: t } = useWixPatternsContainer();\n\n  const controller = useController({\n    name: field.id,\n    control: formControl,\n    defaultValue: data[field.id],\n    rules: {\n      validate: (value) => {\n        const arr = value as ReferenceValue[] | null;\n        if (field.validation?.required && (!arr || !arr.length)) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n        return true;\n      },\n    },\n  });\n\n  const selectedValues = useMemo(\n    () => (controller.field.value as ReferenceValue[]) || [],\n    [controller.field.value],\n  );\n\n  const tags = useMemo((): MultiSelectTag[] => {\n    const imageFieldId = referencedSchema\n      ? getImageFieldId(referencedSchema.fields)\n      : undefined;\n\n    return selectedValues.map((item) => {\n      const selectedId = item[idField] as string;\n      const selectedDisplayValue = item[displayField] as string;\n      const image = imageFieldId\n        ? (item[imageFieldId] as string | undefined)\n        : undefined;\n\n      return {\n        id: selectedId,\n        label: selectedDisplayValue,\n        removable: true,\n        size: 'medium',\n        thumb: (\n          <Box\n            align=\"center\"\n            verticalAlign=\"middle\"\n            position=\"absolute\"\n            top=\"calc(50% - 12px)\"\n            left=\"calc(50% - 12px)\"\n          >\n            <ReferenceAvatar name={selectedDisplayValue} image={image} />\n          </Box>\n        ),\n        dataHook: `multi-reference-tag-${field.id}-${selectedId}`,\n      };\n    });\n  }, [\n    selectedValues,\n    idField,\n    displayField,\n    keyedItems,\n    referencedSchema,\n    field.id,\n  ]);\n\n  const handleSelect = useCallback(\n    (option: DropdownLayoutValueOption) => {\n      const selectedId = String(option.id);\n      if (selectedValues.some((item) => item[idField] === selectedId)) {\n        collection.clearSearch();\n        return;\n      }\n\n      const selectedItem = keyedItems.find((ki) => ki.key === selectedId);\n      const newItem: ReferenceValue = {\n        [idField]: selectedId,\n        [displayField]: selectedItem?.item.name || '',\n      };\n\n      controller.field.onChange([...selectedValues, newItem]);\n      collection.clearSearch();\n    },\n    [\n      idField,\n      displayField,\n      controller.field,\n      collection,\n      keyedItems,\n      selectedValues,\n    ],\n  );\n\n  const handleRemoveTag = useCallback(\n    (tagId: string) => {\n      controller.field.onChange(\n        selectedValues.filter((item) => item[idField] !== tagId),\n      );\n    },\n    [controller.field, selectedValues, idField],\n  );\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      collection.search(e.target.value);\n    },\n    [collection],\n  );\n\n  const handleClear = useCallback(() => {\n    controller.field.onChange([]);\n    collection.clearSearch();\n  }, [controller.field, collection]);\n\n  const handleBlur = useCallback(() => {\n    collection.clearSearch();\n  }, [collection]);\n\n  if (!referencedSchema) {\n    return null;\n  }\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <MultiSelect\n        placeholder={placeholder}\n        options={options}\n        value={searchValue}\n        size=\"large\"\n        tags={tags}\n        clearOnBlur={false}\n        onChange={handleChange}\n        onSelect={handleSelect}\n        onRemoveTag={handleRemoveTag}\n        onClear={handleClear}\n        onBlur={handleBlur}\n        clearButton={!field.validation?.required}\n        infiniteScroll\n        hasMore={!showInitialLoader && !fetchedLastPage}\n        loadMore={collection.fetchNextPageIfNeeded}\n        fixedFooter={<ReferenceFooter collection={collection} />}\n        dataHook={`multi-reference-input-${field.id}`}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/fields/Object.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { FormField } from '@wix/design-system';
+import { useEntityPageContext, useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
+import { useAutoPatternsAppContainer } from '../AutoPatternsApp/AutoPatternsAppContainerProvider';
+import { isDataValidOrNotSet } from '../../cms-fields/validations/validations';
+import { FormJsonInput, TypeMismatchExclamation } from '../../cms-fields';
+import * as objectValidation from '../../cms-fields/validations/object';
+export const Object = props => {
+  var _pageState$entity, _field$validation2, _controller$fieldStat;
+  const {
+    field,
+    dataHook
+  } = props;
+  const {
+    translate: t
+  } = useAutoPatternsAppContainer();
+  const {
+    translate: pt
+  } = useWixPatternsContainer();
+  const pageState = useEntityPageContext();
+  const controller = useController({
+    name: (field == null ? void 0 : field.id) ?? '',
+    control: pageState.form.control,
+    defaultValue: (_pageState$entity = pageState.entity) == null ? void 0 : _pageState$entity[(field == null ? void 0 : field.id) ?? ''],
+    rules: {
+      validate: value => {
+        var _field$validation;
+        if ((_field$validation = field.validation) != null && _field$validation.required && (value === null || value === undefined || value === '')) {
+          return pt('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(FormField, {
+    label: field.displayName,
+    required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
+    status: controller.fieldState.error ? 'error' : undefined,
+    statusMessage: (_controller$fieldStat = controller.fieldState.error) == null ? void 0 : _controller$fieldStat.message,
+    dataHook: dataHook,
+    suffix: isDataValidOrNotSet(controller.field.value, objectValidation) ? undefined : /*#__PURE__*/React.createElement(TypeMismatchExclamation, {
+      typeName: t('auto-patterns.fields.field_type_object_title'),
+      clearButtonText: t('auto-patterns.fields.type_mismatch_clear'),
+      convertButtonText: t('auto-patterns.fields.type_mismatch_convert'),
+      onClear: () => controller.field.onChange(undefined),
+      onChange: value => controller.field.onChange(value),
+      convertDisabledText: t('auto-patterns.fields.type_mismatch_convert_disabled'),
+      fieldName: field.displayName,
+      isConverted: false,
+      isConverting: false,
+      convertedValue: {},
+      tooltipText: t('auto-patterns.fields.type_mismatch_tip', {
+        typeName: 'Object'
+      })
+    })
+  }, /*#__PURE__*/React.createElement(FormJsonInput, {
+    autoFocus: false,
+    data: controller.field.value,
+    onChange: value => controller.field.onChange == null ? void 0 : controller.field.onChange(value),
+    onBlur: controller.field.onBlur,
+    ref: controller.field.ref,
+    dataHook: `object-${field.id}`,
+    field: field.id
+  }));
+};
+//# sourceMappingURL=Object.js.map

package/dist/esm/components/fields/Object.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormField","useEntityPageContext","useWixPatternsContainer","useController","useAutoPatternsAppContainer","isDataValidOrNotSet","FormJsonInput","TypeMismatchExclamation","objectValidation","Object","props","_pageState$entity","_field$validation2","_controller$fieldStat","field","dataHook","translate","t","pt","pageState","controller","name","id","control","form","defaultValue","entity","rules","validate","value","_field$validation","validation","required","undefined","createElement","label","displayName","status","fieldState","error","statusMessage","message","suffix","typeName","clearButtonText","convertButtonText","onClear","onChange","convertDisabledText","fieldName","isConverted","isConverting","convertedValue","tooltipText","autoFocus","data","onBlur","ref"],"sources":["../../../../src/components/fields/Object.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField } from '@wix/design-system';\nimport { BaseInputProps } from './types';\nimport { useEntityPageContext, useWixPatternsContainer } from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { useAutoPatternsAppContainer } from '../AutoPatternsApp/AutoPatternsAppContainerProvider';\nimport { isDataValidOrNotSet } from '../../cms-fields/validations/validations';\nimport { FormJsonInput, TypeMismatchExclamation } from '../../cms-fields';\nimport * as objectValidation from '../../cms-fields/validations/object';\n\nexport interface ObjectProps extends BaseInputProps<string> {}\n\nexport const Object = (props: ObjectProps) => {\n  const { field, dataHook } = props;\n\n  const { translate: t } = useAutoPatternsAppContainer();\n  const { translate: pt } = useWixPatternsContainer();\n\n  const pageState = useEntityPageContext();\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: pageState.form.control,\n    defaultValue: (pageState.entity as any)?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (\n          field.validation?.required &&\n          (value === null || value === undefined || value === '')\n        ) {\n          return pt('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n      suffix={\n        isDataValidOrNotSet(\n          controller.field.value,\n          objectValidation,\n        ) ? undefined : (\n          <TypeMismatchExclamation\n            typeName={t('auto-patterns.fields.field_type_object_title')}\n            clearButtonText={t('auto-patterns.fields.type_mismatch_clear')}\n            convertButtonText={t('auto-patterns.fields.type_mismatch_convert')}\n            onClear={() => controller.field.onChange(undefined)}\n            onChange={(value) => controller.field.onChange(value)}\n            convertDisabledText={t(\n              'auto-patterns.fields.type_mismatch_convert_disabled',\n            )}\n            fieldName={field.displayName}\n            isConverted={false}\n            isConverting={false}\n            convertedValue={{}}\n            tooltipText={t('auto-patterns.fields.type_mismatch_tip', {\n              typeName: 'Object',\n            })}\n          />\n        )\n      }\n    >\n      <FormJsonInput\n        autoFocus={false}\n        data={controller.field.value}\n        onChange={(value) => controller.field.onChange?.(value)}\n        onBlur={controller.field.onBlur}\n        ref={controller.field.ref}\n        dataHook={`object-${field.id}`}\n        field={field.id}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/fields/Reference.js

@@ -0,0 +1,122 @@
+import React, { useCallback, useMemo } from 'react';
+import { FormField, AutoComplete, Input } from '@wix/design-system';
+import { useController } from '@wix/patterns/form';
+import { useReferenceField } from '../../hooks';
+import { useWixPatternsContainer } from '@wix/patterns';
+import { ReferenceAvatar } from '../ReferenceAvatar';
+import { getImageFieldId } from '../../utils/schema';
+import { ReferenceFooter } from '../ReferenceFooter/ReferenceFooter';
+export const Reference = props => {
+  var _controller$field$val, _field$validation2, _controller$fieldStat, _field$validation3;
+  const {
+    field,
+    dataHook,
+    formControl,
+    data
+  } = props;
+  const {
+    collection,
+    referencedSchema,
+    idField,
+    displayField,
+    keyedItems,
+    showInitialLoader,
+    fetchedLastPage,
+    searchValue,
+    options,
+    placeholder
+  } = useReferenceField({
+    field
+  });
+  const {
+    translate: t
+  } = useWixPatternsContainer();
+  const controller = useController({
+    name: field.id,
+    control: formControl,
+    defaultValue: data[field.id],
+    rules: {
+      validate: value => {
+        var _field$validation;
+        if ((_field$validation = field.validation) != null && _field$validation.required && !value) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      }
+    }
+  });
+  const selectedDisplayValue = ((_controller$field$val = controller.field.value) == null ? void 0 : _controller$field$val[displayField]) || '';
+  const displayValue = searchValue || selectedDisplayValue;
+  const selectedImage = useMemo(() => {
+    var _controller$field$val2;
+    const selectedId = (_controller$field$val2 = controller.field.value) == null ? void 0 : _controller$field$val2[idField];
+    if (!selectedId) {
+      return undefined;
+    }
+    const foundItem = keyedItems.find(ki => ki.key === selectedId);
+    if (foundItem != null && foundItem.item.image) {
+      return foundItem.item.image;
+    }
+    if (referencedSchema) {
+      const imageFieldId = getImageFieldId(referencedSchema.fields);
+      if (imageFieldId) {
+        var _controller$field$val3;
+        return (_controller$field$val3 = controller.field.value) == null ? void 0 : _controller$field$val3[imageFieldId];
+      }
+    }
+    return undefined;
+  }, [controller.field.value, idField, keyedItems, referencedSchema]);
+  const selectedPrefix = selectedDisplayValue && !searchValue ? /*#__PURE__*/React.createElement(Input.Affix, null, /*#__PURE__*/React.createElement(ReferenceAvatar, {
+    name: selectedDisplayValue,
+    image: selectedImage
+  })) : undefined;
+  const handleSelect = useCallback(option => {
+    const selectedItem = keyedItems.find(ki => ki.key === option.id);
+    controller.field.onChange({
+      [idField]: String(option.id),
+      [displayField]: (selectedItem == null ? void 0 : selectedItem.item.name) || ''
+    });
+    collection.clearSearch();
+  }, [idField, displayField, controller.field, collection, keyedItems]);
+  const handleChange = useCallback(e => {
+    collection.search(e.target.value);
+    if (!e.target.value) {
+      controller.field.onChange(null);
+    }
+  }, [collection, controller.field]);
+  const handleClear = useCallback(() => {
+    controller.field.onChange(null);
+    collection.clearSearch();
+  }, [controller.field, collection]);
+  const handleBlur = useCallback(() => {
+    collection.clearSearch();
+  }, [collection]);
+  if (!referencedSchema) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FormField, {
+    label: field.displayName,
+    required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
+    status: controller.fieldState.error ? 'error' : undefined,
+    statusMessage: (_controller$fieldStat = controller.fieldState.error) == null ? void 0 : _controller$fieldStat.message,
+    dataHook: dataHook
+  }, /*#__PURE__*/React.createElement(AutoComplete, {
+    placeholder: placeholder,
+    options: options,
+    value: displayValue,
+    prefix: selectedPrefix,
+    onChange: handleChange,
+    onSelect: handleSelect,
+    onClear: handleClear,
+    onBlur: handleBlur,
+    clearButton: !((_field$validation3 = field.validation) != null && _field$validation3.required),
+    infiniteScroll: true,
+    hasMore: !showInitialLoader && !fetchedLastPage,
+    loadMore: collection.fetchNextPageIfNeeded,
+    fixedFooter: /*#__PURE__*/React.createElement(ReferenceFooter, {
+      collection: collection
+    }),
+    dataHook: `reference-input-${field.id}`
+  }));
+};
+//# sourceMappingURL=Reference.js.map

package/dist/esm/components/fields/Reference.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","FormField","AutoComplete","Input","useController","useReferenceField","useWixPatternsContainer","ReferenceAvatar","getImageFieldId","ReferenceFooter","Reference","props","_controller$field$val","_field$validation2","_controller$fieldStat","_field$validation3","field","dataHook","formControl","data","collection","referencedSchema","idField","displayField","keyedItems","showInitialLoader","fetchedLastPage","searchValue","options","placeholder","translate","t","controller","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","selectedDisplayValue","displayValue","selectedImage","_controller$field$val2","selectedId","undefined","foundItem","find","ki","key","item","image","imageFieldId","fields","_controller$field$val3","selectedPrefix","createElement","Affix","handleSelect","option","selectedItem","onChange","String","clearSearch","handleChange","e","search","target","handleClear","handleBlur","label","displayName","status","fieldState","error","statusMessage","message","prefix","onSelect","onClear","onBlur","clearButton","infiniteScroll","hasMore","loadMore","fetchNextPageIfNeeded","fixedFooter"],"sources":["../../../../src/components/fields/Reference.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport {\n  FormField,\n  DropdownLayoutValueOption,\n  AutoComplete,\n  Input,\n} from '@wix/design-system';\nimport { BaseInputProps } from './types';\nimport { useController } from '@wix/patterns/form';\nimport { ReferenceField } from '../../types';\nimport { useReferenceField } from '../../hooks';\nimport { useWixPatternsContainer } from '@wix/patterns';\nimport { ReferenceAvatar } from '../ReferenceAvatar';\nimport { getImageFieldId } from '../../utils/schema';\nimport { ReferenceFooter } from '../ReferenceFooter/ReferenceFooter';\n\ntype ReferenceValue = Record<string, unknown>;\n\nexport interface ReferenceProps extends BaseInputProps<ReferenceValue | null> {\n  field: ReferenceField;\n}\n\nexport const Reference = (props: ReferenceProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const {\n    collection,\n    referencedSchema,\n    idField,\n    displayField,\n    keyedItems,\n    showInitialLoader,\n    fetchedLastPage,\n    searchValue,\n    options,\n    placeholder,\n  } = useReferenceField({ field });\n  const { translate: t } = useWixPatternsContainer();\n\n  const controller = useController({\n    name: field.id,\n    control: formControl,\n    defaultValue: data[field.id],\n    rules: {\n      validate: (value) => {\n        if (field.validation?.required && !value) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n        return true;\n      },\n    },\n  });\n\n  const selectedDisplayValue = controller.field.value?.[displayField] || '';\n  const displayValue = searchValue || selectedDisplayValue;\n\n  const selectedImage = useMemo(() => {\n    const selectedId = controller.field.value?.[idField];\n    if (!selectedId) {\n      return undefined;\n    }\n\n    const foundItem = keyedItems.find((ki) => ki.key === selectedId);\n    if (foundItem?.item.image) {\n      return foundItem.item.image;\n    }\n\n    if (referencedSchema) {\n      const imageFieldId = getImageFieldId(referencedSchema.fields);\n      if (imageFieldId) {\n        return controller.field.value?.[imageFieldId];\n      }\n    }\n    return undefined;\n  }, [controller.field.value, idField, keyedItems, referencedSchema]);\n\n  const selectedPrefix =\n    selectedDisplayValue && !searchValue ? (\n      <Input.Affix>\n        <ReferenceAvatar name={selectedDisplayValue} image={selectedImage} />\n      </Input.Affix>\n    ) : undefined;\n\n  const handleSelect = useCallback(\n    (option: DropdownLayoutValueOption) => {\n      const selectedItem = keyedItems.find((ki) => ki.key === option.id);\n      controller.field.onChange({\n        [idField]: String(option.id),\n        [displayField]: selectedItem?.item.name || '',\n      });\n      collection.clearSearch();\n    },\n    [idField, displayField, controller.field, collection, keyedItems],\n  );\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      collection.search(e.target.value);\n      if (!e.target.value) {\n        controller.field.onChange(null);\n      }\n    },\n    [collection, controller.field],\n  );\n\n  const handleClear = useCallback(() => {\n    controller.field.onChange(null);\n    collection.clearSearch();\n  }, [controller.field, collection]);\n\n  const handleBlur = useCallback(() => {\n    collection.clearSearch();\n  }, [collection]);\n\n  if (!referencedSchema) {\n    return null;\n  }\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <AutoComplete\n        placeholder={placeholder}\n        options={options}\n        value={displayValue}\n        prefix={selectedPrefix}\n        onChange={handleChange}\n        onSelect={handleSelect}\n        onClear={handleClear}\n        onBlur={handleBlur}\n        clearButton={!field.validation?.required}\n        infiniteScroll\n        hasMore={!showInitialLoader && !fetchedLastPage}\n        loadMore={collection.fetchNextPageIfNeeded}\n        fixedFooter={<ReferenceFooter collection={collection} />}\n        dataHook={`reference-input-${field.id}`}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}