@wix/auto-patterns 1.44.0 → 1.46.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","useRef","FormField","DatePicker","getDateWithoutTimezone","getISODateStringWithFixedTimezone","useSelector","useWixPatternsContainer","useController","validateDateField","value","validation","t","format","validationType","required","undefined","dateFormat","DateInput","props","_field$validation","field","dataHook","inputRef","formControl","data","translate","container","initTask","status","controller","name","id","control","defaultValue","rules","validate","error","date","setDate","ref","errorMessage","setErrorMessage","createElement","label","displayName","internalRef","current","focus","_internalRef$state","state","width","onChange","newValue","formattedDate","split","onValidate","_ref","invalid","statusMessage"],"sources":["../../../../src/components/fields/DateInput.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\nimport { FormField, DatePicker } from '@wix/design-system';\nimport {\n  getDateWithoutTimezone,\n  getISODateStringWithFixedTimezone,\n} from './utils/dates';\nimport { BaseInputProps, BaseInputRef } from './types';\nimport { useSelector, useWixPatternsContainer } from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { Translate } from '@wix/patterns/core';\n\nexport interface DateProps extends BaseInputProps<string | null> {}\n\nfunction validateDateField(\n  value: string | null | undefined,\n  validation: DateProps['field']['validation'],\n  t: Translate,\n  format?: string,\n  validationType?: 'outOfBoundsError' | 'formatError' | 'valid',\n) {\n  if (\n    validation?.required &&\n    (value === null || value === undefined || value === '')\n  ) {\n    return t('cairo.fieldValidation.requiredField');\n  } else if (validationType === 'formatError' && format) {\n    return t('cairo.customFields.fieldType.date.invalid.value', {\n      dateFormat: format,\n    });\n  }\n\n  return '';\n}\n\nexport const DateInput = (props: DateProps) => {\n  const { field, dataHook, inputRef, formControl, data } = props;\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        const error = validateDateField(value, field.validation, t);\n        return error || true;\n      },\n    },\n  });\n\n  const [date, setDate] = useState<Date | undefined>(() => {\n    if (controller.field.value) {\n      return getDateWithoutTimezone(\n        getISODateStringWithFixedTimezone(controller.field.value),\n      );\n    }\n    return undefined;\n  });\n\n  const ref = useRef<BaseInputRef>({});\n  const [errorMessage, setErrorMessage] = useState<string>('');\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      dataHook={dataHook}\n    >\n      <DatePicker\n        ref={(internalRef) => {\n          inputRef?.(ref.current);\n          // @ts-expect-error: WSR internal API hack for focusing\n          ref.current.focus = () => internalRef?.state?.inputRef?.focus?.();\n        }}\n        dataHook={`date-${field.id}`}\n        width=\"100%\"\n        value={date}\n        onChange={(newValue: Date) => {\n          setDate(newValue);\n          if (newValue) {\n            const formattedDate = getISODateStringWithFixedTimezone(newValue);\n            controller.field.onChange(formattedDate.split('T')[0]);\n          } else {\n            controller.field.onChange(null);\n          }\n        }}\n        onValidate={({ validationType, value: newValue, format }) => {\n          const error = validateDateField(\n            newValue,\n            field.validation,\n            t,\n            format,\n            validationType,\n          );\n          setErrorMessage(error);\n          ref.current.invalid = !!error;\n\n          if (validationType === 'formatError' && newValue === '') {\n            setDate(undefined);\n            controller.field.onChange(null);\n          }\n        }}\n        status={errorMessage ? 'error' : undefined}\n        statusMessage={errorMessage}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,168 @@
+import React, { useRef, useMemo, useState, useEffect } from 'react';
+import { Cell, DatePicker, FormField, Layout, TimeInput } from '@wix/design-system';
+import { useWixPatternsContainer, useSelector } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
+export const DateTime = props => {
+  var _field$validation2;
+  const {
+    field,
+    dataHook,
+    inputRef,
+    formControl,
+    data
+  } = props;
+  const {
+    translate: t,
+    ...container
+  } = useWixPatternsContainer();
+  useSelector(() => container.initTask.status);
+  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: v => {
+        var _field$validation;
+        if (field != null && (_field$validation = field.validation) != null && _field$validation.required && (v === null || v === undefined || v === '')) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      }
+    }
+  });
+  const date = useMemo(() => {
+    if (!controller.field.value) {
+      return undefined;
+    }
+    const d = new Date(controller.field.value);
+    return isNaN(d.getTime()) ? undefined : d;
+  }, [controller.field.value]);
+  const [dateStatusMessage, setDateStatusMessage] = useState('');
+  const [timeStatusMessage, setTimeStatusMessage] = useState('');
+  const ref = useRef({});
+  const dateRef = useRef({});
+  const timeRef = useRef({});
+  const [dateValue, setDateValue] = useState(date == null ? void 0 : date.getDate());
+  const [timeValue, setTimeValue] = useState(date == null ? void 0 : date.getTime());
+  useEffect(() => {
+    ref.current.focus = () => {
+      if (dateRef.current.invalid) {
+        return dateRef.current.focus == null ? void 0 : dateRef.current.focus();
+      }
+      return timeRef.current.focus == null ? void 0 : timeRef.current.focus();
+    };
+    inputRef == null || inputRef(ref.current);
+  }, [inputRef]);
+  return /*#__PURE__*/React.createElement(FormField, {
+    label: field.displayName,
+    required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
+    dataHook: dataHook
+  }, /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Cell, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(DatePicker, {
+    ref: internalRef => {
+      dateRef.current.focus = () => {
+        var _internalRef$state;
+        return (// TODO: PR to WSR needed to expose as public API
+          // @ts-expect-error
+          internalRef == null || (_internalRef$state = internalRef.state) == null || (_internalRef$state = _internalRef$state.inputRef) == null || _internalRef$state.focus == null ? void 0 : _internalRef$state.focus()
+        );
+      };
+    },
+    width: "100%",
+    value: date
+    // onChange is triggered only when you have valid, non-empty value. and onValidate is triggered on every change so we use onValidate
+    ,
+    onChange: () => {},
+    onValidate: _ref => {
+      let {
+        validationType,
+        value: newValue,
+        format
+      } = _ref;
+      if (validationType === 'valid') {
+        const dateWithNewDate = date ? new Date(date) : new Date(newValue);
+        const _value = new Date(newValue);
+        dateWithNewDate.setFullYear(_value.getFullYear());
+        dateWithNewDate.setMonth(_value.getMonth());
+        dateWithNewDate.setDate(_value.getDate());
+        controller.field.onChange(dateWithNewDate.toISOString());
+        setDateValue(new Date(newValue).getDate());
+        setDateStatusMessage('');
+        dateRef.current.invalid = false;
+      } else if (validationType === 'formatError' && newValue === '') {
+        var _field$validation3;
+        if ((_field$validation3 = field.validation) != null && _field$validation3.required) {
+          setDateStatusMessage(t('cairo.fieldValidation.requiredField'));
+          dateRef.current.invalid = true;
+        } else {
+          setDateStatusMessage('');
+          dateRef.current.invalid = false;
+        }
+        setDateValue(newValue);
+        if (!timeValue) {
+          controller.field.onChange(null);
+        }
+      } else {
+        setDateStatusMessage(t('cairo.customFields.fieldType.date.invalid.value', {
+          dateFormat: format ?? ''
+        }));
+        dateRef.current.invalid = true;
+      }
+      ref.current.invalid = dateRef.current.invalid || timeRef.current.invalid;
+    },
+    status: controller.fieldState.error || dateStatusMessage ? 'error' : undefined,
+    statusMessage: controller.fieldState.error || dateStatusMessage,
+    dataHook: `datetime-date-${field.id}`
+  })), /*#__PURE__*/React.createElement(Cell, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(TimeInput, {
+    ref: internalRef => {
+      timeRef.current.focus = () => internalRef == null ? void 0 : internalRef.focus();
+    },
+    dataHook: `datetime-time-${field.id}`,
+    value: date ?? null,
+    status: controller.fieldState.error || timeStatusMessage ? 'error' : undefined,
+    statusMessage: controller.fieldState.error || timeStatusMessage,
+    onInvalid: () => {
+      timeRef.current.invalid = true;
+      setTimeStatusMessage(t('cairo.customFields.fieldType.dateAndTime.invalid.value'));
+      ref.current.invalid = dateRef.current.invalid || timeRef.current.invalid;
+    },
+    onChange: _ref2 => {
+      let {
+        date: newValue
+      } = _ref2;
+      timeRef.current.invalid = false;
+      ref.current.invalid = dateRef.current.invalid || timeRef.current.invalid;
+      if (newValue) {
+        const dateWithNewTime = date ? new Date(date) : newValue;
+        dateWithNewTime.setHours(newValue.getHours());
+        dateWithNewTime.setMinutes(newValue.getMinutes());
+        dateWithNewTime.setSeconds(newValue.getSeconds());
+        dateWithNewTime.setMilliseconds(newValue.getMilliseconds());
+        controller.field.onChange(dateWithNewTime.toISOString());
+        setTimeStatusMessage('');
+        setDateStatusMessage('');
+      } else {
+        if (!newValue) {
+          var _field$validation4;
+          setTimeValue('');
+          if ((_field$validation4 = field.validation) != null && _field$validation4.required) {
+            setTimeStatusMessage(t('cairo.fieldValidation.requiredField'));
+            timeRef.current.invalid = true;
+          } else {
+            setTimeStatusMessage('');
+            timeRef.current.invalid = false;
+          }
+          if (!ref.current.invalid) {
+            if (!dateValue) {
+              controller.field.onChange(null);
+            }
+          }
+        }
+      }
+    }
+  }))));
+};
+//# sourceMappingURL=DateTime.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useRef","useMemo","useState","useEffect","Cell","DatePicker","FormField","Layout","TimeInput","useWixPatternsContainer","useSelector","useController","DateTime","props","_field$validation2","field","dataHook","inputRef","formControl","data","translate","t","container","initTask","status","controller","name","id","control","defaultValue","rules","validate","v","_field$validation","validation","required","undefined","date","value","d","Date","isNaN","getTime","dateStatusMessage","setDateStatusMessage","timeStatusMessage","setTimeStatusMessage","ref","dateRef","timeRef","dateValue","setDateValue","getDate","timeValue","setTimeValue","current","focus","invalid","createElement","label","displayName","span","internalRef","_internalRef$state","state","width","onChange","onValidate","_ref","validationType","newValue","format","dateWithNewDate","_value","setFullYear","getFullYear","setMonth","getMonth","setDate","toISOString","_field$validation3","dateFormat","fieldState","error","statusMessage","onInvalid","_ref2","dateWithNewTime","setHours","getHours","setMinutes","getMinutes","setSeconds","getSeconds","setMilliseconds","getMilliseconds","_field$validation4"],"sources":["../../../../src/components/fields/DateTime.tsx"],"sourcesContent":["import React, { useRef, useMemo, useState, useEffect } from 'react';\nimport {\n  Cell,\n  DatePicker,\n  FormField,\n  Layout,\n  TimeInput,\n} from '@wix/design-system';\nimport { BaseInputProps, BaseInputRef } from './types';\nimport { useWixPatternsContainer, useSelector } from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\n\nexport interface DateTimeProps extends BaseInputProps<string | null> {}\n\nexport const DateTime = (props: DateTimeProps) => {\n  const { field, dataHook, inputRef, formControl, data } = props;\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (v) => {\n        if (\n          field?.validation?.required &&\n          (v === null || v === undefined || v === '')\n        ) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n        return true;\n      },\n    },\n  });\n\n  const date = useMemo(() => {\n    if (!controller.field.value) {\n      return undefined;\n    }\n    const d = new Date(controller.field.value);\n    return isNaN(d.getTime()) ? undefined : d;\n  }, [controller.field.value]);\n\n  const [dateStatusMessage, setDateStatusMessage] = useState('');\n  const [timeStatusMessage, setTimeStatusMessage] = useState('');\n\n  const ref = useRef<BaseInputRef>({});\n  const dateRef = useRef<BaseInputRef>({});\n  const timeRef = useRef<BaseInputRef>({});\n  const [dateValue, setDateValue] = useState<number | string | undefined>(\n    date?.getDate(),\n  );\n  const [timeValue, setTimeValue] = useState<number | string | undefined>(\n    date?.getTime(),\n  );\n\n  useEffect(() => {\n    ref.current.focus = () => {\n      if (dateRef.current.invalid) {\n        return dateRef.current.focus?.();\n      }\n\n      return timeRef.current.focus?.();\n    };\n\n    inputRef?.(ref.current);\n  }, [inputRef]);\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      dataHook={dataHook}\n    >\n      <Layout>\n        <Cell span={6}>\n          <DatePicker\n            ref={(internalRef) => {\n              dateRef.current.focus = () =>\n                // TODO: PR to WSR needed to expose as public API\n                // @ts-expect-error\n                internalRef?.state?.inputRef?.focus?.();\n            }}\n            width=\"100%\"\n            value={date}\n            // onChange is triggered only when you have valid, non-empty value. and onValidate is triggered on every change so we use onValidate\n            onChange={() => {}}\n            onValidate={({ validationType, value: newValue, format }) => {\n              if (validationType === 'valid') {\n                const dateWithNewDate = date\n                  ? new Date(date)\n                  : new Date(newValue);\n                const _value = new Date(newValue);\n                dateWithNewDate.setFullYear(_value.getFullYear());\n                dateWithNewDate.setMonth(_value.getMonth());\n                dateWithNewDate.setDate(_value.getDate());\n                controller.field.onChange(dateWithNewDate.toISOString());\n                setDateValue(new Date(newValue).getDate());\n                setDateStatusMessage('');\n                dateRef.current.invalid = false;\n              } else if (validationType === 'formatError' && newValue === '') {\n                if (field.validation?.required) {\n                  setDateStatusMessage(\n                    t('cairo.fieldValidation.requiredField'),\n                  );\n                  dateRef.current.invalid = true;\n                } else {\n                  setDateStatusMessage('');\n                  dateRef.current.invalid = false;\n                }\n                setDateValue(newValue);\n                if (!timeValue) {\n                  controller.field.onChange(null);\n                }\n              } else {\n                setDateStatusMessage(\n                  t('cairo.customFields.fieldType.date.invalid.value', {\n                    dateFormat: format ?? '',\n                  }),\n                );\n                dateRef.current.invalid = true;\n              }\n\n              ref.current.invalid =\n                dateRef.current.invalid || timeRef.current.invalid;\n            }}\n            status={\n              controller.fieldState.error || dateStatusMessage\n                ? 'error'\n                : undefined\n            }\n            statusMessage={controller.fieldState.error || dateStatusMessage}\n            dataHook={`datetime-date-${field.id}`}\n          />\n        </Cell>\n        <Cell span={6}>\n          <TimeInput\n            ref={(internalRef) => {\n              timeRef.current.focus = () => internalRef?.focus();\n            }}\n            dataHook={`datetime-time-${field.id}`}\n            value={date ?? null}\n            status={\n              controller.fieldState.error || timeStatusMessage\n                ? 'error'\n                : undefined\n            }\n            statusMessage={controller.fieldState.error || timeStatusMessage}\n            onInvalid={() => {\n              timeRef.current.invalid = true;\n              setTimeStatusMessage(\n                t('cairo.customFields.fieldType.dateAndTime.invalid.value'),\n              );\n              ref.current.invalid =\n                dateRef.current.invalid || timeRef.current.invalid;\n            }}\n            onChange={({ date: newValue }) => {\n              timeRef.current.invalid = false;\n              ref.current.invalid =\n                dateRef.current.invalid || timeRef.current.invalid;\n\n              if (newValue) {\n                const dateWithNewTime = date ? new Date(date) : newValue;\n                dateWithNewTime.setHours(newValue.getHours());\n                dateWithNewTime.setMinutes(newValue.getMinutes());\n                dateWithNewTime.setSeconds(newValue.getSeconds());\n                dateWithNewTime.setMilliseconds(newValue.getMilliseconds());\n                controller.field.onChange(dateWithNewTime.toISOString());\n                setTimeStatusMessage('');\n                setDateStatusMessage('');\n              } else {\n                if (!newValue) {\n                  setTimeValue('');\n                  if (field.validation?.required) {\n                    setTimeStatusMessage(\n                      t('cairo.fieldValidation.requiredField'),\n                    );\n                    timeRef.current.invalid = true;\n                  } else {\n                    setTimeStatusMessage('');\n                    timeRef.current.invalid = false;\n                  }\n                  if (!ref.current.invalid) {\n                    if (!dateValue) {\n                      controller.field.onChange(null);\n                    }\n                  }\n                }\n              }\n            }}\n          />\n        </Cell>\n      </Layout>\n    </FormField>\n  );\n};\n"],"mappings":"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","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/ImageInput.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { FormField, ImageViewer } from '@wix/design-system';
+import { dashboard } from '@wix/dashboard';
+import { useIsMobile, useSelector, useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
+import { getImageUrl } from '../../utils/media/getImageUrl';
+export const ImageInput = props => {
+  var _field$validation2, _controller$fieldStat;
+  const {
+    field,
+    dataHook,
+    formControl,
+    data
+  } = props;
+  const {
+    translate: t,
+    ...container
+  } = useWixPatternsContainer();
+  useSelector(() => container.initTask.status);
+  const isMobile = useIsMobile();
+  async function openMedia() {
+    try {
+      var _chosenMediaItems$ite;
+      const chosenMediaItems = await dashboard.openMediaManager({
+        multiSelect: false,
+        category: 'IMAGE'
+      });
+      const newImage = chosenMediaItems == null || (_chosenMediaItems$ite = chosenMediaItems.items[0]) == null || (_chosenMediaItems$ite = _chosenMediaItems$ite.media) == null || (_chosenMediaItems$ite = _chosenMediaItems$ite.image) == null ? void 0 : _chosenMediaItems$ite.image;
+      controller.field.onChange(newImage);
+    } catch (error) {
+      console.error('Error opening Media Manager or no files selected:', error);
+    }
+  }
+  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;
+      }
+    }
+  });
+  const imageUrl = controller.field.value && getImageUrl(controller.field.value);
+  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(ImageViewer, {
+    imageUrl: imageUrl,
+    dataHook: `image-${field.id}`,
+    onAddImage: isMobile ? undefined : () => openMedia(),
+    onUpdateImage: isMobile ? undefined : () => openMedia(),
+    updateImageInfo: t('cairo.replace-image.tooltip'),
+    removeImageInfo: t('cairo.remove-image.tooltip'),
+    addImageInfo: t('cairo.add-image.tooltip'),
+    height: "120px",
+    width: "25%",
+    fit: "cover",
+    onRemoveImage: () => controller.field.onChange(null)
+  }));
+};
+//# sourceMappingURL=ImageInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormField","ImageViewer","dashboard","useIsMobile","useSelector","useWixPatternsContainer","useController","getImageUrl","ImageInput","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","t","container","initTask","status","isMobile","openMedia","_chosenMediaItems$ite","chosenMediaItems","openMediaManager","multiSelect","category","newImage","items","media","image","controller","onChange","error","console","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","undefined","imageUrl","createElement","label","displayName","fieldState","statusMessage","message","onAddImage","onUpdateImage","updateImageInfo","removeImageInfo","addImageInfo","height","width","fit","onRemoveImage"],"sources":["../../../../src/components/fields/ImageInput.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, ImageViewer } from '@wix/design-system';\nimport { dashboard } from '@wix/dashboard';\nimport {\n  useIsMobile,\n  useSelector,\n  useWixPatternsContainer,\n} from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { getImageUrl } from '../../utils/media/getImageUrl';\nimport { BaseInputProps } from './types';\n\nexport interface ImageInputProps extends BaseInputProps<string> {}\n\nexport const ImageInput = (props: ImageInputProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n  const isMobile = useIsMobile();\n\n  async function openMedia() {\n    try {\n      const chosenMediaItems = await dashboard.openMediaManager({\n        multiSelect: false,\n        category: 'IMAGE',\n      });\n\n      const newImage = chosenMediaItems?.items[0]?.media?.image?.image;\n\n      controller.field.onChange(newImage);\n    } catch (error) {\n      console.error('Error opening Media Manager or no files selected:', error);\n    }\n  }\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  const imageUrl =\n    controller.field.value && getImageUrl(controller.field.value);\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      <ImageViewer\n        imageUrl={imageUrl}\n        dataHook={`image-${field.id}`}\n        onAddImage={isMobile ? undefined : () => openMedia()}\n        onUpdateImage={isMobile ? undefined : () => openMedia()}\n        updateImageInfo={t('cairo.replace-image.tooltip')}\n        removeImageInfo={t('cairo.remove-image.tooltip')}\n        addImageInfo={t('cairo.add-image.tooltip')}\n        height=\"120px\"\n        width=\"25%\"\n        fit=\"cover\"\n        onRemoveImage={() => controller.field.onChange(null)}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { FormField, InputArea } from '@wix/design-system';
+import { useSelector, useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
+export const LongText = props => {
+  var _field$validation2, _controller$fieldStat;
+  const {
+    field,
+    dataHook,
+    formControl,
+    data
+  } = props;
+  const {
+    translate: t,
+    ...container
+  } = useWixPatternsContainer();
+  useSelector(() => container.initTask.status);
+  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(InputArea, {
+    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,
+    dataHook: `long-text-${field.id}`
+  }));
+};
+//# sourceMappingURL=LongText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormField","InputArea","useSelector","useWixPatternsContainer","useController","LongText","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","t","container","initTask","status","controller","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","undefined","createElement","label","displayName","fieldState","error","statusMessage","message","onChange","e","target","onBlur","ref"],"sources":["../../../../src/components/fields/LongText.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, InputArea } from '@wix/design-system';\nimport { BaseInputProps } from './types';\nimport { useSelector, useWixPatternsContainer } from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\n\nexport interface LongTextProps extends BaseInputProps<string> {}\n\nexport const LongText = (props: LongTextProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\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      <InputArea\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        dataHook={`long-text-${field.id}`}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,SAAS,QAAQ,oBAAoB;AAEzD,SAASC,WAAW,EAAEC,uBAAuB,QAAQ,eAAe;AACpE,SAASC,aAAa,QAAQ,oBAAoB;AAIlD,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,CAAC;IAAE,GAAGC;EAAU,CAAC,GAAGZ,uBAAuB,CAAC,CAAC;EAChED,WAAW,CAAC,MAAMa,SAAS,CAACC,QAAQ,CAACC,MAAM,CAAC;EAE5C,MAAMC,UAAU,GAAGd,aAAa,CAAC;IAC/Be,IAAI,EAAE,CAAAV,KAAK,oBAALA,KAAK,CAAEW,EAAE,KAAI,EAAE;IACrBC,OAAO,EAAEV,WAAW;IACpBW,YAAY,EAAEV,IAAI,oBAAJA,IAAI,CAAG,CAAAH,KAAK,oBAALA,KAAK,CAAEW,EAAE,KAAI,EAAE,CAAC;IACrCG,KAAK,EAAE;MACLC,QAAQ,EAAGC,KAAK,IAAK;QAAA,IAAAC,iBAAA;QACnB,IACE,CAAAA,iBAAA,GAAAjB,KAAK,CAACkB,UAAU,aAAhBD,iBAAA,CAAkBE,QAAQ,KACzBH,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAKI,SAAS,IAAIJ,KAAK,KAAK,EAAE,CAAC,EACvD;UACA,OAAOX,CAAC,CAAC,qCAAqC,CAAC;QACjD;QAEA,OAAO,IAAI;MACb;IACF;EACF,CAAC,CAAC;EAEF,oBACEf,KAAA,CAAA+B,aAAA,CAAC9B,SAAS;IACR+B,KAAK,EAAEtB,KAAK,CAACuB,WAAY;IACzBJ,QAAQ,GAAArB,kBAAA,GAAEE,KAAK,CAACkB,UAAU,qBAAhBpB,kBAAA,CAAkBqB,QAAS;IACrCX,MAAM,EAAEC,UAAU,CAACe,UAAU,CAACC,KAAK,GAAG,OAAO,GAAGL,SAAU;IAC1DM,aAAa,GAAA3B,qBAAA,GAAEU,UAAU,CAACe,UAAU,CAACC,KAAK,qBAA3B1B,qBAAA,CAA6B4B,OAAQ;IACpD1B,QAAQ,EAAEA;EAAS,gBAEnBX,KAAA,CAAA+B,aAAA,CAAC7B,SAAS;IACRwB,KAAK,EAAEP,UAAU,CAACT,KAAK,CAACgB,KAAM;IAC9BY,QAAQ,EAAGC,CAAC,IAAKpB,UAAU,CAACT,KAAK,CAAC4B,QAAQ,oBAAzBnB,UAAU,CAACT,KAAK,CAAC4B,QAAQ,CAAGC,CAAC,CAACC,MAAM,CAACd,KAAK,CAAE;IAC7De,MAAM,EAAEtB,UAAU,CAACT,KAAK,CAAC+B,MAAO;IAChCC,GAAG,EAAEvB,UAAU,CAACT,KAAK,CAACgC,GAAI;IAC1B/B,QAAQ,EAAE,aAAaD,KAAK,CAACW,EAAE;EAAG,CACnC,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":[]}