@wix/auto-patterns 1.54.0 → 1.56.0

package/dist/cjs/components/fields/Array.js

@@ -0,0 +1,111 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Array = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _patterns = require("@wix/patterns");
+var _form = require("@wix/patterns/form");
+var _AutoPatternsAppContainerProvider = require("../AutoPatternsApp/AutoPatternsAppContainerProvider");
+var _validations = require("../../cms-fields/validations/validations");
+var _cmsFields = require("../../cms-fields");
+var arrayValidation = _interopRequireWildcard(require("../../cms-fields/validations/array"));
+var _jsxFileName = "/home/builduser/work/8f3ab5a55e62623a/packages/auto-patterns/dist/cjs/components/fields/Array.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Array = props => {
+  var _pageState$entity, _field$validation2, _controller$fieldStat;
+  const {
+    field,
+    dataHook
+  } = props;
+  const {
+    translate: t
+  } = (0, _AutoPatternsAppContainerProvider.useAutoPatternsAppContainer)();
+  const {
+    translate: pt
+  } = (0, _patterns.useWixPatternsContainer)();
+  const pageState = (0, _patterns.useEntityPageContext)();
+  const controller = (0, _form.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;
+      }
+    }
+  });
+  const {
+    isConverted,
+    convertedValue
+  } = (0, _react.useMemo)(() => {
+    try {
+      return {
+        isConverted: true,
+        convertedValue: arrayValidation.hardConvert(controller.field.value)
+      };
+    } catch {
+      return {
+        isConverted: false,
+        convertedValue: null
+      };
+    }
+  }, [controller.field.value]);
+  const typeName = t('auto-patterns.fields.field_type_array_title');
+  return /*#__PURE__*/_react.default.createElement(_designSystem.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: (0, _validations.isDataValidOrNotSet)(controller.field.value, arrayValidation) ? undefined : /*#__PURE__*/_react.default.createElement(_cmsFields.TypeMismatchExclamation, {
+      typeName: typeName,
+      clearButtonText: t('auto-patterns.fields.type_mismatch_clear'),
+      convertButtonText: t('auto-patterns.fields.type_mismatch_convert', {
+        typeName: typeName.toLocaleLowerCase()
+      }),
+      onClear: () => controller.field.onChange(undefined),
+      onChange: value => controller.field.onChange(value),
+      convertDisabledText: t('auto-patterns.fields.type_mismatch_convert_disabled'),
+      fieldName: field.displayName,
+      isConverted: isConverted,
+      isConverting: false,
+      convertedValue: convertedValue,
+      tooltipText: t('auto-patterns.fields.type_mismatch_tip', {
+        typeName
+      }),
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 64,
+        columnNumber: 11
+      }
+    }),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 53,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_cmsFields.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: `array-${field.id}`,
+    field: field.id,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 86,
+      columnNumber: 7
+    }
+  }));
+};
+exports.Array = Array;
+//# sourceMappingURL=Array.js.map

package/dist/cjs/components/fields/Array.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_patterns","_form","_AutoPatternsAppContainerProvider","_validations","_cmsFields","arrayValidation","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Array","props","_pageState$entity","_field$validation2","_controller$fieldStat","field","dataHook","translate","useAutoPatternsAppContainer","pt","useWixPatternsContainer","pageState","useEntityPageContext","controller","useController","name","id","control","form","defaultValue","entity","rules","validate","value","_field$validation","validation","required","undefined","isConverted","convertedValue","useMemo","hardConvert","typeName","createElement","FormField","label","displayName","status","fieldState","error","statusMessage","message","suffix","isDataValidOrNotSet","TypeMismatchExclamation","clearButtonText","convertButtonText","toLocaleLowerCase","onClear","onChange","convertDisabledText","fieldName","isConverting","tooltipText","__self","__source","fileName","lineNumber","columnNumber","FormJsonInput","autoFocus","data","onBlur","ref","exports"],"sources":["../../../../src/components/fields/Array.tsx"],"sourcesContent":["import React, { useMemo } 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 arrayValidation from '../../cms-fields/validations/array';\n\nexport interface ArrayProps extends BaseInputProps<string> {}\n\nexport const Array = (props: ArrayProps) => {\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  const { isConverted, convertedValue } = useMemo(() => {\n    try {\n      return {\n        isConverted: true,\n        convertedValue: arrayValidation.hardConvert(controller.field.value),\n      };\n    } catch {\n      return { isConverted: false, convertedValue: null };\n    }\n  }, [controller.field.value]);\n\n  const typeName = t('auto-patterns.fields.field_type_array_title');\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          arrayValidation,\n        ) ? undefined : (\n          <TypeMismatchExclamation\n            typeName={typeName}\n            clearButtonText={t('auto-patterns.fields.type_mismatch_clear')}\n            convertButtonText={t('auto-patterns.fields.type_mismatch_convert', {\n              typeName: typeName.toLocaleLowerCase(),\n            })}\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={isConverted}\n            isConverting={false}\n            convertedValue={convertedValue}\n            tooltipText={t('auto-patterns.fields.type_mismatch_tip', {\n              typeName,\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={`array-${field.id}`}\n        field={field.id}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/fields/DateInput.js

@@ -55,6 +55,7 @@ const DateInput = props => {
   return /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
     label: field.displayName,
     required: (_field$validation = field.validation) == null ? void 0 : _field$validation.required,
+    statusMessage: errorMessage,
     dataHook: dataHook,
     __self: void 0,
     __source: {
@@ -101,7 +102,7 @@ const DateInput = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 70,
+      lineNumber: 71,
       columnNumber: 7
     }
   }));

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_dates","_patterns","_form","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","validateDateField","value","validation","format","validationType","required","undefined","dateFormat","DateInput","props","_field$validation","field","dataHook","inputRef","formControl","data","translate","container","useWixPatternsContainer","useSelector","initTask","status","controller","useController","name","id","control","defaultValue","rules","validate","error","date","setDate","useState","getDateWithoutTimezone","getISODateStringWithFixedTimezone","ref","useRef","errorMessage","setErrorMessage","createElement","FormField","label","displayName","__self","__source","fileName","lineNumber","columnNumber","DatePicker","internalRef","current","focus","_internalRef$state","state","width","onChange","newValue","formattedDate","split","onValidate","invalid","statusMessage","exports"],"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":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_dates","_patterns","_form","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","validateDateField","value","validation","format","validationType","required","undefined","dateFormat","DateInput","props","_field$validation","field","dataHook","inputRef","formControl","data","translate","container","useWixPatternsContainer","useSelector","initTask","status","controller","useController","name","id","control","defaultValue","rules","validate","error","date","setDate","useState","getDateWithoutTimezone","getISODateStringWithFixedTimezone","ref","useRef","errorMessage","setErrorMessage","createElement","FormField","label","displayName","statusMessage","__self","__source","fileName","lineNumber","columnNumber","DatePicker","internalRef","current","focus","_internalRef$state","state","width","onChange","newValue","formattedDate","split","onValidate","invalid","exports"],"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      statusMessage={errorMessage}\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/cjs/components/fields/ImageInput.js

@@ -9,6 +9,7 @@ var _dashboard = require("@wix/dashboard");
 var _patterns = require("@wix/patterns");
 var _form = require("@wix/patterns/form");
 var _getImageUrl = require("../../utils/media/getImageUrl");
+var _mediaConstants = require("./mediaConstants");
 var _jsxFileName = "/home/builduser/work/8f3ab5a55e62623a/packages/auto-patterns/dist/cjs/components/fields/ImageInput.tsx";
 const ImageInput = props => {
   var _field$validation2, _controller$fieldStat;
@@ -61,9 +62,18 @@ const ImageInput = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 59,
+      lineNumber: 60,
       columnNumber: 5
     }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    width: "100%",
+    maxWidth: _mediaConstants.MEDIA_MAX_WIDTH,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 67,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.ImageViewer, {
     imageUrl: imageUrl,
     dataHook: `image-${field.id}`,
@@ -72,17 +82,17 @@ const ImageInput = props => {
     updateImageInfo: t('cairo.replace-image.tooltip'),
     removeImageInfo: t('cairo.remove-image.tooltip'),
     addImageInfo: t('cairo.add-image.tooltip'),
-    height: "120px",
-    width: "25%",
+    height: _mediaConstants.MEDIA_HEIGHT,
+    width: "100%",
     fit: "cover",
     onRemoveImage: () => controller.field.onChange(null),
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 66,
-      columnNumber: 7
+      lineNumber: 68,
+      columnNumber: 9
     }
-  }));
+  })));
 };
 exports.ImageInput = ImageInput;
 //# sourceMappingURL=ImageInput.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_dashboard","_patterns","_form","_getImageUrl","_jsxFileName","ImageInput","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","t","container","useWixPatternsContainer","useSelector","initTask","status","isMobile","useIsMobile","openMedia","_chosenMediaItems$ite","chosenMediaItems","dashboard","openMediaManager","multiSelect","category","newImage","items","media","image","controller","onChange","error","console","useController","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","undefined","imageUrl","getImageUrl","default","createElement","FormField","label","displayName","fieldState","statusMessage","message","__self","__source","fileName","lineNumber","columnNumber","ImageViewer","onAddImage","onUpdateImage","updateImageInfo","removeImageInfo","addImageInfo","height","width","fit","onRemoveImage","exports"],"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":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_dashboard","_patterns","_form","_getImageUrl","_mediaConstants","_jsxFileName","ImageInput","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","t","container","useWixPatternsContainer","useSelector","initTask","status","isMobile","useIsMobile","openMedia","_chosenMediaItems$ite","chosenMediaItems","dashboard","openMediaManager","multiSelect","category","newImage","items","media","image","controller","onChange","error","console","useController","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","undefined","imageUrl","getImageUrl","default","createElement","FormField","label","displayName","fieldState","statusMessage","message","__self","__source","fileName","lineNumber","columnNumber","Box","width","maxWidth","MEDIA_MAX_WIDTH","ImageViewer","onAddImage","onUpdateImage","updateImageInfo","removeImageInfo","addImageInfo","height","MEDIA_HEIGHT","fit","onRemoveImage","exports"],"sources":["../../../../src/components/fields/ImageInput.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, 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';\nimport { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from './mediaConstants';\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      <Box width=\"100%\" maxWidth={MEDIA_MAX_WIDTH}>\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={MEDIA_HEIGHT}\n          width=\"100%\"\n          fit=\"cover\"\n          onRemoveImage={() => controller.field.onChange(null)}\n        />\n      </Box>\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/fields/ImageViewField.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.ImageViewField = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _designSystem = require("@wix/design-system");
+var _getImageUrl = require("../../utils/media/getImageUrl");
+var _mediaConstants = require("./mediaConstants");
+var _jsxFileName = "/home/builduser/work/8f3ab5a55e62623a/packages/auto-patterns/dist/cjs/components/fields/ImageViewField.tsx";
+const ImageViewField = ({
+  value,
+  displayName,
+  id
+}) => {
+  const imageValue = typeof value === 'string' ? value : undefined;
+  const imageUrl = (0, _getImageUrl.getImageUrl)(imageValue);
+  if (!imageUrl) {
+    return /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 25,
+        columnNumber: 12
+      }
+    }, "-");
+  }
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    height: _mediaConstants.MEDIA_HEIGHT,
+    width: "100%",
+    maxWidth: _mediaConstants.MEDIA_MAX_WIDTH,
+    borderRadius: _mediaConstants.MEDIA_BORDER_RADIUS,
+    overflow: "hidden",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 29,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: imageUrl,
+    alt: displayName || id,
+    style: {
+      height: '100%',
+      width: '100%',
+      objectFit: 'cover',
+      display: 'block'
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 36,
+      columnNumber: 7
+    }
+  }));
+};
+exports.ImageViewField = ImageViewField;
+//# sourceMappingURL=ImageViewField.js.map

package/dist/cjs/components/fields/ImageViewField.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_getImageUrl","_mediaConstants","_jsxFileName","ImageViewField","value","displayName","id","imageValue","undefined","imageUrl","getImageUrl","default","createElement","Text","__self","__source","fileName","lineNumber","columnNumber","Box","height","MEDIA_HEIGHT","width","maxWidth","MEDIA_MAX_WIDTH","borderRadius","MEDIA_BORDER_RADIUS","overflow","src","alt","style","objectFit","display","exports"],"sources":["../../../../src/components/fields/ImageViewField.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Text } from '@wix/design-system';\nimport { getImageUrl } from '../../utils/media/getImageUrl';\nimport {\n  MEDIA_HEIGHT,\n  MEDIA_MAX_WIDTH,\n  MEDIA_BORDER_RADIUS,\n} from './mediaConstants';\n\nexport interface ImageViewFieldProps {\n  value: unknown;\n  displayName: string;\n  id: string;\n}\n\nexport const ImageViewField: React.FC<ImageViewFieldProps> = ({\n  value,\n  displayName,\n  id,\n}) => {\n  const imageValue = typeof value === 'string' ? value : undefined;\n  const imageUrl = getImageUrl(imageValue);\n\n  if (!imageUrl) {\n    return <Text>-</Text>;\n  }\n\n  return (\n    <Box\n      height={MEDIA_HEIGHT}\n      width=\"100%\"\n      maxWidth={MEDIA_MAX_WIDTH}\n      borderRadius={MEDIA_BORDER_RADIUS}\n      overflow=\"hidden\"\n    >\n      <img\n        src={imageUrl}\n        alt={displayName || id}\n        style={{\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n          display: 'block',\n        }}\n      />\n    </Box>\n  );\n};\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AAI0B,IAAAI,YAAA;AAQnB,MAAMC,cAA6C,GAAGA,CAAC;EAC5DC,KAAK;EACLC,WAAW;EACXC;AACF,CAAC,KAAK;EACJ,MAAMC,UAAU,GAAG,OAAOH,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGI,SAAS;EAChE,MAAMC,QAAQ,GAAG,IAAAC,wBAAW,EAACH,UAAU,CAAC;EAExC,IAAI,CAACE,QAAQ,EAAE;IACb,oBAAOb,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,aAAA,CAAAc,IAAI;MAAAC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAd,YAAA;QAAAe,UAAA;QAAAC,YAAA;MAAA;IAAA,GAAC,GAAO,CAAC;EACvB;EAEA,oBACEtB,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,aAAA,CAAAoB,GAAG;IACFC,MAAM,EAAEC,4BAAa;IACrBC,KAAK,EAAC,MAAM;IACZC,QAAQ,EAAEC,+BAAgB;IAC1BC,YAAY,EAAEC,mCAAoB;IAClCC,QAAQ,EAAC,QAAQ;IAAAb,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAd,YAAA;MAAAe,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEjBtB,MAAA,CAAAe,OAAA,CAAAC,aAAA;IACEgB,GAAG,EAAEnB,QAAS;IACdoB,GAAG,EAAExB,WAAW,IAAIC,EAAG;IACvBwB,KAAK,EAAE;MACLV,MAAM,EAAE,MAAM;MACdE,KAAK,EAAE,MAAM;MACbS,SAAS,EAAE,OAAO;MAClBC,OAAO,EAAE;IACX,CAAE;IAAAlB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAd,YAAA;MAAAe,UAAA;MAAAC,YAAA;IAAA;EAAA,CACH,CACE,CAAC;AAEV,CAAC;AAACe,OAAA,CAAA9B,cAAA,GAAAA,cAAA","ignoreList":[]}