@wix/patterns-fields 1.115.0 → 1.117.0

package/dist/cjs/components/media-image-field/cell-media-image-edit.st.css.js

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+exports.vars = exports.style = exports.stVars = exports.st = exports.namespace = exports.layers = exports.keyframes = exports.cssStates = exports.containers = exports.classes = void 0;
+var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
+// @ts-nocheck
+
+var _namespace_ = "cellmediaimageedit1735372897";
+var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
+var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
+var style = exports.style = _style_;
+var st = exports.st = _style_;
+var namespace = exports.namespace = _namespace_;
+var classes = exports.classes = {
+  "root": "cellmediaimageedit1735372897__root",
+  "view": "cellmediaimageedit1735372897__view",
+  "anchor": "cellmediaimageedit1735372897__anchor",
+  "anchorBox": "cellmediaimageedit1735372897__anchorBox",
+  "popoverContent": "cellmediaimageedit1735372897__popoverContent",
+  "image": "cellmediaimageedit1735372897__image",
+  "imageActions": "cellmediaimageedit1735372897__imageActions"
+};
+var keyframes = exports.keyframes = {};
+var layers = exports.layers = {};
+var containers = exports.containers = {};
+var stVars = exports.stVars = {};
+var vars = exports.vars = {
+  "wds-color-fill-transparent-primary": "--wds-color-fill-transparent-primary",
+  "wsr-color-D10": "--wsr-color-D10",
+  "wds-image-border-radius-default": "--wds-image-border-radius-default",
+  "wds-space-100": "--wds-space-100"
+};
+//# sourceMappingURL=cell-media-image-edit.st.css.js.map

package/dist/cjs/components/media-image-field/cell-media-image-edit.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/media-image-field/cell-media-image-edit.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"cellmediaimageedit1735372897\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"cellmediaimageedit1735372897__root\",\"view\":\"cellmediaimageedit1735372897__view\",\"anchor\":\"cellmediaimageedit1735372897__anchor\",\"anchorBox\":\"cellmediaimageedit1735372897__anchorBox\",\"popoverContent\":\"cellmediaimageedit1735372897__popoverContent\",\"image\":\"cellmediaimageedit1735372897__image\",\"imageActions\":\"cellmediaimageedit1735372897__imageActions\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-fill-transparent-primary\":\"--wds-color-fill-transparent-primary\",\"wsr-color-D10\":\"--wsr-color-D10\",\"wds-image-border-radius-default\":\"--wds-image-border-radius-default\",\"wds-space-100\":\"--wds-space-100\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,8BAA8B;AAChD,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,oCAAoC;EAAC,MAAM,EAAC,oCAAoC;EAAC,QAAQ,EAAC,sCAAsC;EAAC,WAAW,EAAC,yCAAyC;EAAC,gBAAgB,EAAC,8CAA8C;EAAC,OAAO,EAAC,qCAAqC;EAAC,cAAc,EAAC;AAA4C,CAAC;AACvX,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,oCAAoC,EAAC,sCAAsC;EAAC,eAAe,EAAC,iBAAiB;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}

package/dist/cjs/components/media-image-field/form-media-image-field.js

@@ -0,0 +1,180 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.FormMediaImageField = exports.ControlledMediaImageInput = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _react2 = require("@wix/bex-core/react");
+var _hooks = require("../../hooks");
+var _getImageSource = require("../../utils/get-image-source");
+var _getImageUrl = require("../../utils/get-image-url");
+var _mediaConstants = require("../../utils/media-constants");
+var _mediaImageValue = require("../../utils/media-image-value");
+var _mediaUtils = require("../../utils/media-utils");
+var _mediaControl = require("../media-control");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/media-image-field/form-media-image-field.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); }
+/**
+ * The entity page input of a `MEDIA_IMAGE` field: the image, and an alt text
+ * input to its right once there is an image. A pick fills an empty alt text
+ * from the file name; a replace keeps the current one.
+ */
+const FormMediaImageField = ({
+  data,
+  onChange,
+  onBlur,
+  readOnly,
+  autoFocus,
+  dataHook,
+  inputRef: forwardedRef,
+  imageFormFieldProps
+}) => {
+  const {
+    translate
+  } = (0, _react2.useWixPatternsContainer)();
+  const {
+    t
+  } = (0, _hooks.useTranslations)();
+  const isMobile = (0, _react2.useIsMobile)();
+  const image = (0, _mediaImageValue.toMediaImageValue)(data);
+  // The media manager calls back after it closes, so it reads the value from
+  // here rather than from the render that opened it.
+  const imageRef = (0, _react.useRef)(image);
+  imageRef.current = image;
+  const [inputRef, setInputRef] = (0, _hooks.useMergedRef)(forwardedRef);
+  const handlePick = (0, _react.useCallback)(uri => {
+    const next = (0, _mediaImageValue.fromMediaManagerPick)(uri, imageRef.current);
+    if (next) {
+      onChange(next);
+    }
+  }, [onChange]);
+  const {
+    callMedia,
+    onMediaLoad
+  } = (0, _mediaControl.useMediaControl)({
+    mediaType: _mediaUtils.MEDIA_TYPES.IMAGE,
+    value: (0, _getImageSource.getImageSource)(image),
+    onChange: handlePick,
+    autoFocus,
+    readOnly,
+    onBlur,
+    inputRef,
+    initialLoading: true
+  });
+  const canEdit = !isMobile && !readOnly;
+  const handleAltTextChange = e => {
+    if (image) {
+      onChange((0, _mediaImageValue.withAltText)(image, e.target.value));
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    dataHook: dataHook,
+    gap: "SP4",
+    width: "100%",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 100,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    width: "100%",
+    maxWidth: _mediaConstants.MEDIA_MAX_WIDTH,
+    flexShrink: 0,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 101,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.FormField, (0, _extends2.default)({}, imageFormFieldProps, {
+    dataHook: "media-image-field-image",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 102,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.ImageViewer, {
+    ref: setInputRef,
+    dataHook: "media-image-field-viewer",
+    imageUrl: image ? (0, _getImageUrl.getImageUrl)(image) : undefined,
+    onImageLoad: onMediaLoad,
+    onAddImage: canEdit ? callMedia : undefined,
+    onUpdateImage: canEdit ? callMedia : undefined,
+    disabled: image ? Boolean(readOnly) : !canEdit,
+    showUpdateButton: canEdit,
+    showRemoveButton: !readOnly,
+    updateImageInfo: translate('cairo.replace-image.tooltip'),
+    removeImageInfo: translate('cairo.remove-image.tooltip'),
+    addImageInfo: translate('cairo.add-image.tooltip'),
+    height: _mediaConstants.MEDIA_HEIGHT,
+    width: "100%",
+    fit: "cover",
+    onRemoveImage: () => onChange(null),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 103,
+      columnNumber: 11
+    }
+  }))), image && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    direction: "vertical",
+    flexGrow: 1,
+    minWidth: "0",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 124,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
+    label: t('CMS.image.altText.label'),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 125,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Input, {
+    dataHook: "media-image-field-alt-input",
+    value: image.altText ?? '',
+    placeholder: t('CMS.image.altText.inputPlaceholder'),
+    onChange: handleAltTextChange,
+    readOnly: readOnly,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 126,
+      columnNumber: 13
+    }
+  }))));
+};
+exports.FormMediaImageField = FormMediaImageField;
+FormMediaImageField.displayName = 'FormMediaImageField';
+const ControlledMediaImageInput = ({
+  data,
+  onChange,
+  onBlur,
+  readOnly,
+  autoFocus,
+  dataHook
+}) => /*#__PURE__*/_react.default.createElement(FormMediaImageField, {
+  data: data,
+  onChange: onChange,
+  onBlur: onBlur,
+  readOnly: readOnly,
+  autoFocus: autoFocus,
+  dataHook: dataHook,
+  __self: void 0,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 155,
+    columnNumber: 3
+  }
+});
+exports.ControlledMediaImageInput = ControlledMediaImageInput;
+ControlledMediaImageInput.displayName = 'ControlledMediaImageInput';
+//# sourceMappingURL=form-media-image-field.js.map

package/dist/cjs/components/media-image-field/form-media-image-field.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_react2","_hooks","_getImageSource","_getImageUrl","_mediaConstants","_mediaImageValue","_mediaUtils","_mediaControl","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FormMediaImageField","data","onChange","onBlur","readOnly","autoFocus","dataHook","inputRef","forwardedRef","imageFormFieldProps","translate","useWixPatternsContainer","useTranslations","isMobile","useIsMobile","image","toMediaImageValue","imageRef","useRef","current","setInputRef","useMergedRef","handlePick","useCallback","uri","next","fromMediaManagerPick","callMedia","onMediaLoad","useMediaControl","mediaType","MEDIA_TYPES","IMAGE","value","getImageSource","initialLoading","canEdit","handleAltTextChange","withAltText","target","createElement","Box","gap","width","__self","__source","fileName","lineNumber","columnNumber","maxWidth","MEDIA_MAX_WIDTH","flexShrink","FormField","_extends2","ImageViewer","ref","imageUrl","getImageUrl","undefined","onImageLoad","onAddImage","onUpdateImage","disabled","Boolean","showUpdateButton","showRemoveButton","updateImageInfo","removeImageInfo","addImageInfo","height","MEDIA_HEIGHT","fit","onRemoveImage","direction","flexGrow","minWidth","label","Input","altText","placeholder","exports","displayName","ControlledMediaImageInput"],"sources":["../../../../src/components/media-image-field/form-media-image-field.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React, { useCallback, useRef } from 'react';\nimport type { FormFieldProps } from '@wix/design-system';\nimport { Box, FormField, ImageViewer, Input } from '@wix/design-system';\nimport { useIsMobile, useWixPatternsContainer } from '@wix/bex-core/react';\n\nimport type { ControlledInputProps } from '../../types/controlled-input';\nimport type { MediaImageValue } from '../../types/media-image';\nimport { useMergedRef, useTranslations } from '../../hooks';\nimport { getImageSource } from '../../utils/get-image-source';\nimport { getImageUrl } from '../../utils/get-image-url';\nimport { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from '../../utils/media-constants';\nimport {\n  fromMediaManagerPick,\n  toMediaImageValue,\n  withAltText,\n} from '../../utils/media-image-value';\nimport { MEDIA_TYPES } from '../../utils/media-utils';\nimport { useMediaControl } from '../media-control';\n\ninterface ImageViewerActions {\n  focus: () => void;\n}\n\nexport interface FormMediaImageFieldProps {\n  /** A `MEDIA_IMAGE` value. */\n  data?: unknown;\n  onChange: (value: MediaImageValue | null) => void;\n  /** Fires when the media manager closes, whether or not a file was picked. */\n  onBlur?: () => void;\n  readOnly?: boolean;\n  autoFocus?: boolean;\n  dataHook?: string;\n  inputRef?: React.Ref<ImageViewerActions>;\n  /** The FormField around the image, e.g. the field's label and its error.\n   *  ImageViewer takes its error styling from it. */\n  imageFormFieldProps?: Pick<\n    FormFieldProps,\n    'label' | 'required' | 'status' | 'statusMessage'\n  >;\n}\n\n/**\n * The entity page input of a `MEDIA_IMAGE` field: the image, and an alt text\n * input to its right once there is an image. A pick fills an empty alt text\n * from the file name; a replace keeps the current one.\n */\nexport const FormMediaImageField: FC<FormMediaImageFieldProps> = ({\n  data,\n  onChange,\n  onBlur,\n  readOnly,\n  autoFocus,\n  dataHook,\n  inputRef: forwardedRef,\n  imageFormFieldProps,\n}) => {\n  const { translate } = useWixPatternsContainer();\n  const { t } = useTranslations();\n  const isMobile = useIsMobile();\n  const image = toMediaImageValue(data);\n  // The media manager calls back after it closes, so it reads the value from\n  // here rather than from the render that opened it.\n  const imageRef = useRef(image);\n  imageRef.current = image;\n\n  const [inputRef, setInputRef] =\n    useMergedRef<ImageViewerActions>(forwardedRef);\n\n  const handlePick = useCallback(\n    (uri: string) => {\n      const next = fromMediaManagerPick(uri, imageRef.current);\n      if (next) {\n        onChange(next);\n      }\n    },\n    [onChange],\n  );\n\n  const { callMedia, onMediaLoad } = useMediaControl({\n    mediaType: MEDIA_TYPES.IMAGE,\n    value: getImageSource(image),\n    onChange: handlePick,\n    autoFocus,\n    readOnly,\n    onBlur,\n    inputRef,\n    initialLoading: true,\n  });\n\n  const canEdit = !isMobile && !readOnly;\n\n  const handleAltTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (image) {\n      onChange(withAltText(image, e.target.value));\n    }\n  };\n\n  return (\n    <Box dataHook={dataHook} gap=\"SP4\" width=\"100%\">\n      <Box width=\"100%\" maxWidth={MEDIA_MAX_WIDTH} flexShrink={0}>\n        <FormField {...imageFormFieldProps} dataHook=\"media-image-field-image\">\n          <ImageViewer\n            ref={setInputRef}\n            dataHook=\"media-image-field-viewer\"\n            imageUrl={image ? getImageUrl(image) : undefined}\n            onImageLoad={onMediaLoad}\n            onAddImage={canEdit ? callMedia : undefined}\n            onUpdateImage={canEdit ? callMedia : undefined}\n            disabled={image ? Boolean(readOnly) : !canEdit}\n            showUpdateButton={canEdit}\n            showRemoveButton={!readOnly}\n            updateImageInfo={translate('cairo.replace-image.tooltip')}\n            removeImageInfo={translate('cairo.remove-image.tooltip')}\n            addImageInfo={translate('cairo.add-image.tooltip')}\n            height={MEDIA_HEIGHT}\n            width=\"100%\"\n            fit=\"cover\"\n            onRemoveImage={() => onChange(null)}\n          />\n        </FormField>\n      </Box>\n      {image && (\n        <Box direction=\"vertical\" flexGrow={1} minWidth=\"0\">\n          <FormField label={t('CMS.image.altText.label')}>\n            <Input\n              dataHook=\"media-image-field-alt-input\"\n              value={image.altText ?? ''}\n              placeholder={t('CMS.image.altText.inputPlaceholder')}\n              onChange={handleAltTextChange}\n              readOnly={readOnly}\n            />\n          </FormField>\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nFormMediaImageField.displayName = 'FormMediaImageField';\n\nexport type ControlledMediaImageInputProps = Omit<\n  ControlledInputProps<MediaImageValue | null>,\n  'invalid'\n>;\n\nexport const ControlledMediaImageInput: FC<ControlledMediaImageInputProps> = ({\n  data,\n  onChange,\n  onBlur,\n  readOnly,\n  autoFocus,\n  dataHook,\n}) => (\n  <FormMediaImageField\n    data={data}\n    onChange={onChange}\n    onBlur={onBlur}\n    readOnly={readOnly}\n    autoFocus={autoFocus}\n    dataHook={dataHook}\n  />\n);\n\nControlledMediaImageInput.displayName = 'ControlledMediaImageInput';\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/media-image-field/form-media-image-field.uni.driver.js

@@ -0,0 +1,34 @@
+"use strict";
+
+exports.__esModule = true;
+exports.FormMediaImageFieldUniDriver = FormMediaImageFieldUniDriver;
+var _unidriver = require("@wix/design-system/dist/testkit/unidriver");
+var _baseDriver = require("../../testkit/base-driver");
+function FormMediaImageFieldUniDriver(base, body) {
+  const formField = (0, _unidriver.FormFieldUniDriver)(base.$('[data-hook="media-image-field-image"]'), body);
+  const imageViewer = (0, _unidriver.ImageViewerUniDriver)(base.$('[data-hook="media-image-field-viewer"]'), body);
+  const altInput = base.$('[data-hook="media-image-field-alt-input"] input');
+  return {
+    ...(0, _baseDriver.baseUniDriverFactory)(base),
+    getLabel: async () => {
+      var _await$formField$getL;
+      return ((_await$formField$getL = await formField.getLabel()) == null ? void 0 : _await$formField$getL.textContent) ?? '';
+    },
+    isRequired: () => formField.isRequired(),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+    getImageUrl: () => imageViewer.getImageUrl(),
+    isAddItemVisible: () => imageViewer.isAddItemVisible(),
+    clickAdd: () => imageViewer.clickAdd(),
+    clickReplace: () => imageViewer.clickUpdate(),
+    clickRemove: () => imageViewer.clickRemove(),
+    hasAltTextInput: () => altInput.exists(),
+    getAltText: () => altInput.value(),
+    getAltTextPlaceholder: () => altInput.attr('placeholder'),
+    enterAltText: text => altInput.enterValue(text),
+    // ImageViewer hides its edit buttons behind a loader until the image
+    // loads, and jsdom never fires that event on its own.
+    simulateImageLoad: async () => (await base.$('[data-hook="image-viewer-current-image"]').getNative()).dispatchEvent(new Event('load'))
+  };
+}
+//# sourceMappingURL=form-media-image-field.uni.driver.js.map

package/dist/cjs/components/media-image-field/form-media-image-field.uni.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_unidriver","require","_baseDriver","FormMediaImageFieldUniDriver","base","body","formField","FormFieldUniDriver","$","imageViewer","ImageViewerUniDriver","altInput","baseUniDriverFactory","getLabel","_await$formField$getL","textContent","isRequired","hasError","hasStatus","getErrorMessage","getStatusMessage","getImageUrl","isAddItemVisible","clickAdd","clickReplace","clickUpdate","clickRemove","hasAltTextInput","exists","getAltText","value","getAltTextPlaceholder","attr","enterAltText","text","enterValue","simulateImageLoad","getNative","dispatchEvent","Event"],"sources":["../../../../src/components/media-image-field/form-media-image-field.uni.driver.ts"],"sourcesContent":["import type { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport {\n  FormFieldUniDriver,\n  ImageViewerUniDriver,\n} from '@wix/design-system/dist/testkit/unidriver';\n\nimport { baseUniDriverFactory } from '../../testkit/base-driver';\n\nexport function FormMediaImageFieldUniDriver(base: UniDriver, body: UniDriver) {\n  const formField = FormFieldUniDriver(\n    base.$('[data-hook=\"media-image-field-image\"]'),\n    body,\n  );\n  const imageViewer = ImageViewerUniDriver(\n    base.$('[data-hook=\"media-image-field-viewer\"]'),\n    body,\n  );\n  const altInput = base.$('[data-hook=\"media-image-field-alt-input\"] input');\n\n  return {\n    ...baseUniDriverFactory(base),\n    getLabel: async () => (await formField.getLabel())?.textContent ?? '',\n    isRequired: () => formField.isRequired(),\n    hasError: () => formField.hasStatus('error'),\n    getErrorMessage: () => formField.getStatusMessage(),\n    getImageUrl: () => imageViewer.getImageUrl(),\n    isAddItemVisible: () => imageViewer.isAddItemVisible(),\n    clickAdd: () => imageViewer.clickAdd(),\n    clickReplace: () => imageViewer.clickUpdate(),\n    clickRemove: () => imageViewer.clickRemove(),\n    hasAltTextInput: () => altInput.exists(),\n    getAltText: () => altInput.value(),\n    getAltTextPlaceholder: () => altInput.attr('placeholder'),\n    enterAltText: (text: string) => altInput.enterValue(text),\n    // ImageViewer hides its edit buttons behind a loader until the image\n    // loads, and jsdom never fires that event on its own.\n    simulateImageLoad: async () =>\n      (\n        await base.$('[data-hook=\"image-viewer-current-image\"]').getNative()\n      ).dispatchEvent(new Event('load')),\n  };\n}\n"],"mappings":";;;;AACA,IAAAA,UAAA,GAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AAEO,SAASE,4BAA4BA,CAACC,IAAe,EAAEC,IAAe,EAAE;EAC7E,MAAMC,SAAS,GAAG,IAAAC,6BAAkB,EAClCH,IAAI,CAACI,CAAC,CAAC,uCAAuC,CAAC,EAC/CH,IACF,CAAC;EACD,MAAMI,WAAW,GAAG,IAAAC,+BAAoB,EACtCN,IAAI,CAACI,CAAC,CAAC,wCAAwC,CAAC,EAChDH,IACF,CAAC;EACD,MAAMM,QAAQ,GAAGP,IAAI,CAACI,CAAC,CAAC,iDAAiD,CAAC;EAE1E,OAAO;IACL,GAAG,IAAAI,gCAAoB,EAACR,IAAI,CAAC;IAC7BS,QAAQ,EAAE,MAAAA,CAAA;MAAA,IAAAC,qBAAA;MAAA,OAAY,EAAAA,qBAAA,GAAC,MAAMR,SAAS,CAACO,QAAQ,CAAC,CAAC,qBAA3BC,qBAAA,CAA8BC,WAAW,KAAI,EAAE;IAAA;IACrEC,UAAU,EAAEA,CAAA,KAAMV,SAAS,CAACU,UAAU,CAAC,CAAC;IACxCC,QAAQ,EAAEA,CAAA,KAAMX,SAAS,CAACY,SAAS,CAAC,OAAO,CAAC;IAC5CC,eAAe,EAAEA,CAAA,KAAMb,SAAS,CAACc,gBAAgB,CAAC,CAAC;IACnDC,WAAW,EAAEA,CAAA,KAAMZ,WAAW,CAACY,WAAW,CAAC,CAAC;IAC5CC,gBAAgB,EAAEA,CAAA,KAAMb,WAAW,CAACa,gBAAgB,CAAC,CAAC;IACtDC,QAAQ,EAAEA,CAAA,KAAMd,WAAW,CAACc,QAAQ,CAAC,CAAC;IACtCC,YAAY,EAAEA,CAAA,KAAMf,WAAW,CAACgB,WAAW,CAAC,CAAC;IAC7CC,WAAW,EAAEA,CAAA,KAAMjB,WAAW,CAACiB,WAAW,CAAC,CAAC;IAC5CC,eAAe,EAAEA,CAAA,KAAMhB,QAAQ,CAACiB,MAAM,CAAC,CAAC;IACxCC,UAAU,EAAEA,CAAA,KAAMlB,QAAQ,CAACmB,KAAK,CAAC,CAAC;IAClCC,qBAAqB,EAAEA,CAAA,KAAMpB,QAAQ,CAACqB,IAAI,CAAC,aAAa,CAAC;IACzDC,YAAY,EAAGC,IAAY,IAAKvB,QAAQ,CAACwB,UAAU,CAACD,IAAI,CAAC;IACzD;IACA;IACAE,iBAAiB,EAAE,MAAAA,CAAA,KACjB,CACE,MAAMhC,IAAI,CAACI,CAAC,CAAC,0CAA0C,CAAC,CAAC6B,SAAS,CAAC,CAAC,EACpEC,aAAa,CAAC,IAAIC,KAAK,CAAC,MAAM,CAAC;EACrC,CAAC;AACH","ignoreList":[]}

package/dist/cjs/components/media-image-field/form-media-image-input.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.FormMediaImageInput = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _mobxReactLite = require("mobx-react-lite");
+var _react2 = require("@wix/bex-core/react");
+var _form = require("@wix/bex-core/form");
+var _hooks = require("../../hooks");
+var _mediaImageValue = require("../../utils/media-image-value");
+var _formMediaImageField = require("./form-media-image-field");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/media-image-field/form-media-image-input.tsx";
+const _FormMediaImageInput = props => {
+  var _field$validation2, _controller$fieldStat;
+  const {
+    field,
+    dataHook,
+    formControl,
+    data
+  } = props;
+  const {
+    translate: t
+  } = (0, _react2.useWixPatternsContainer)();
+  const controller = (0, _form.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;
+        // Alt text alone doesn't make the field filled.
+        if ((_field$validation = field.validation) != null && _field$validation.required && (0, _mediaImageValue.isMediaImageEmpty)(value)) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      }
+    }
+  });
+  const setFieldRef = (0, _hooks.useFieldRef)(controller.field.ref);
+  return /*#__PURE__*/_react.default.createElement(_formMediaImageField.FormMediaImageField
+  // Hands the live button to react-hook-form so shouldFocusError can
+  // reach this field when it blocks save.
+  , {
+    inputRef: setFieldRef,
+    data: controller.field.value,
+    onChange: value => controller.field.onChange(value),
+    dataHook: dataHook,
+    imageFormFieldProps: {
+      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
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 39,
+      columnNumber: 5
+    }
+  });
+};
+const FormMediaImageInput = exports.FormMediaImageInput = (0, _mobxReactLite.observer)(_FormMediaImageInput);
+//# sourceMappingURL=form-media-image-input.js.map

package/dist/cjs/components/media-image-field/form-media-image-input.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_react2","_form","_hooks","_mediaImageValue","_formMediaImageField","_jsxFileName","_FormMediaImageInput","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","t","useWixPatternsContainer","controller","useController","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","isMediaImageEmpty","setFieldRef","useFieldRef","ref","default","createElement","FormMediaImageField","inputRef","onChange","imageFormFieldProps","label","displayName","status","fieldState","error","undefined","statusMessage","message","__self","__source","fileName","lineNumber","columnNumber","FormMediaImageInput","exports","observer"],"sources":["../../../../src/components/media-image-field/form-media-image-input.tsx"],"sourcesContent":["import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { useController } from '@wix/bex-core/form';\n\nimport type { BaseInputProps } from '../../types/base-input';\nimport type { MediaImageValue } from '../../types/media-image';\nimport { useFieldRef } from '../../hooks';\nimport { isMediaImageEmpty } from '../../utils/media-image-value';\nimport { FormMediaImageField } from './form-media-image-field';\n\nexport interface FormMediaImageInputProps\n  extends BaseInputProps<MediaImageValue | null> {}\n\nconst _FormMediaImageInput = (props: FormMediaImageInputProps) => {\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        // Alt text alone doesn't make the field filled.\n        if (field.validation?.required && isMediaImageEmpty(value)) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  const setFieldRef = useFieldRef(controller.field.ref);\n\n  return (\n    <FormMediaImageField\n      // Hands the live button to react-hook-form so shouldFocusError can\n      // reach this field when it blocks save.\n      inputRef={setFieldRef}\n      data={controller.field.value}\n      onChange={(value) => controller.field.onChange(value)}\n      dataHook={dataHook}\n      imageFormFieldProps={{\n        label: field.displayName,\n        required: field.validation?.required,\n        status: controller.fieldState.error ? 'error' : undefined,\n        statusMessage: controller.fieldState.error?.message,\n      }}\n    />\n  );\n};\n\nexport const FormMediaImageInput = observer(_FormMediaImageInput);\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAIA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;AACA,IAAAM,oBAAA,GAAAN,OAAA;AAA+D,IAAAO,YAAA;AAK/D,MAAMC,oBAAoB,GAAIC,KAA+B,IAAK;EAAA,IAAAC,kBAAA,EAAAC,qBAAA;EAChE,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAK,CAAC,GAAGN,KAAK;EAEpD,MAAM;IAAEO,SAAS,EAAEC;EAAE,CAAC,GAAG,IAAAC,+BAAuB,EAAC,CAAC;EAElD,MAAMC,UAAU,GAAG,IAAAC,mBAAa,EAAC;IAC/BC,IAAI,EAAE,CAAAT,KAAK,oBAALA,KAAK,CAAEU,EAAE,KAAI,EAAE;IACrBC,OAAO,EAAET,WAAW;IACpBU,YAAY,EAAET,IAAI,oBAAJA,IAAI,CAAG,CAAAH,KAAK,oBAALA,KAAK,CAAEU,EAAE,KAAI,EAAE,CAAC;IACrCG,KAAK,EAAE;MACLC,QAAQ,EAAGC,KAAK,IAAK;QAAA,IAAAC,iBAAA;QACnB;QACA,IAAI,CAAAA,iBAAA,GAAAhB,KAAK,CAACiB,UAAU,aAAhBD,iBAAA,CAAkBE,QAAQ,IAAI,IAAAC,kCAAiB,EAACJ,KAAK,CAAC,EAAE;UAC1D,OAAOV,CAAC,CAAC,qCAAqC,CAAC;QACjD;QAEA,OAAO,IAAI;MACb;IACF;EACF,CAAC,CAAC;EAEF,MAAMe,WAAW,GAAG,IAAAC,kBAAW,EAACd,UAAU,CAACP,KAAK,CAACsB,GAAG,CAAC;EAErD,oBACEpC,MAAA,CAAAqC,OAAA,CAAAC,aAAA,CAAC9B,oBAAA,CAAA+B;EACC;EACA;EAAA;IACAC,QAAQ,EAAEN,WAAY;IACtBjB,IAAI,EAAEI,UAAU,CAACP,KAAK,CAACe,KAAM;IAC7BY,QAAQ,EAAGZ,KAAK,IAAKR,UAAU,CAACP,KAAK,CAAC2B,QAAQ,CAACZ,KAAK,CAAE;IACtDd,QAAQ,EAAEA,QAAS;IACnB2B,mBAAmB,EAAE;MACnBC,KAAK,EAAE7B,KAAK,CAAC8B,WAAW;MACxBZ,QAAQ,GAAApB,kBAAA,GAAEE,KAAK,CAACiB,UAAU,qBAAhBnB,kBAAA,CAAkBoB,QAAQ;MACpCa,MAAM,EAAExB,UAAU,CAACyB,UAAU,CAACC,KAAK,GAAG,OAAO,GAAGC,SAAS;MACzDC,aAAa,GAAApC,qBAAA,GAAEQ,UAAU,CAACyB,UAAU,CAACC,KAAK,qBAA3BlC,qBAAA,CAA6BqC;IAC9C,CAAE;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA5C,YAAA;MAAA6C,UAAA;MAAAC,YAAA;IAAA;EAAA,CACH,CAAC;AAEN,CAAC;AAEM,MAAMC,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,IAAAE,uBAAQ,EAAChD,oBAAoB,CAAC","ignoreList":[]}

package/dist/cjs/components/media-image-field/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+exports.__esModule = true;
+var _mediaImageView = require("./media-image-view");
+Object.keys(_mediaImageView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _mediaImageView[key]) return;
+  exports[key] = _mediaImageView[key];
+});
+var _cellMediaImageEdit = require("./cell-media-image-edit");
+Object.keys(_cellMediaImageEdit).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _cellMediaImageEdit[key]) return;
+  exports[key] = _cellMediaImageEdit[key];
+});
+var _formMediaImageField = require("./form-media-image-field");
+Object.keys(_formMediaImageField).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _formMediaImageField[key]) return;
+  exports[key] = _formMediaImageField[key];
+});
+var _formMediaImageInput = require("./form-media-image-input");
+Object.keys(_formMediaImageInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _formMediaImageInput[key]) return;
+  exports[key] = _formMediaImageInput[key];
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/media-image-field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mediaImageView","require","Object","keys","forEach","key","exports","_cellMediaImageEdit","_formMediaImageField","_formMediaImageInput"],"sources":["../../../../src/components/media-image-field/index.ts"],"sourcesContent":["export * from './media-image-view';\nexport * from './cell-media-image-edit';\nexport * from './form-media-image-field';\nexport * from './form-media-image-input';\n"],"mappings":";;;AAAA,IAAAA,eAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,eAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,eAAA,CAAAK,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAL,eAAA,CAAAK,GAAA;AAAA;AACA,IAAAE,mBAAA,GAAAN,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAI,mBAAA,EAAAH,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAE,mBAAA,CAAAF,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAE,mBAAA,CAAAF,GAAA;AAAA;AACA,IAAAG,oBAAA,GAAAP,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAK,oBAAA,EAAAJ,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAG,oBAAA,CAAAH,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAG,oBAAA,CAAAH,GAAA;AAAA;AACA,IAAAI,oBAAA,GAAAR,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAM,oBAAA,EAAAL,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAI,oBAAA,CAAAJ,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAI,oBAAA,CAAAJ,GAAA;AAAA","ignoreList":[]}

package/dist/cjs/components/media-image-field/media-image-view.js

@@ -0,0 +1,114 @@
+"use strict";
+
+exports.__esModule = true;
+exports.MediaImageView = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _mobxReactLite = require("mobx-react-lite");
+var _PatternsFieldsContainerProvider = require("../../providers/PatternsFieldsContainerProvider");
+var _getImageSource = require("../../utils/get-image-source");
+var _tooltip = require("../../utils/tooltip");
+var _imagePreviewPopover = require("../image/image-preview-popover");
+var _imageThumbnail = require("../image/image-thumbnail");
+var _mediaImageViewStCss = require("./media-image-view.st.css.js");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/media-image-field/media-image-view.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); }
+function _MediaImageView({
+  value: image,
+  dataHook
+}) {
+  var _usePatternsCmsFields;
+  // Tables render this cell even with no fields container above them, which
+  // legacy image cells never needed. Without one there is nothing to translate
+  // the placeholder with, so it is left out instead of breaking the cell.
+  const translate = (_usePatternsCmsFields = (0, _PatternsFieldsContainerProvider.usePatternsCmsFieldsContainer)()) == null ? void 0 : _usePatternsCmsFields.translate;
+  const src = (0, _getImageSource.getImageSource)(image);
+  const altText = image == null ? void 0 : image.altText;
+  const placeholder = altText ? undefined : translate == null ? void 0 : translate('CMS.image.altText.cellPlaceholder');
+  const [isPreviewShown, setIsPreviewShown] = (0, _react.useState)(false);
+  const showPreview = (0, _react.useCallback)(() => setIsPreviewShown(true), []);
+  const hidePreview = (0, _react.useCallback)(() => setIsPreviewShown(false), []);
+
+  // With no src, the thumbnail renders the empty-image placeholder.
+  const thumbnail = /*#__PURE__*/_react.default.createElement(_imageThumbnail.ImageThumbnail, {
+    value: image,
+    dataHook: "media-image-view-thumbnail",
+    width: "36px",
+    height: "24px",
+    borderRadius: "0",
+    onMouseEnter: src ? showPreview : undefined,
+    onMouseLeave: src ? hidePreview : undefined,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 35,
+      columnNumber: 5
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    dataHook: dataHook,
+    className: _mediaImageViewStCss.classes.root,
+    verticalAlign: "middle",
+    gap: "8px",
+    padding: "0 8px",
+    height: "100%",
+    width: "100%",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 47,
+      columnNumber: 5
+    }
+  }, src ? /*#__PURE__*/_react.default.createElement(_imagePreviewPopover.ImagePreviewPopover, {
+    src: src,
+    shown: isPreviewShown,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 57,
+      columnNumber: 9
+    }
+  }, thumbnail) : thumbnail, src && (altText || placeholder) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    height: "16px",
+    flexShrink: 0,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 65,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
+    direction: "vertical",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 66,
+      columnNumber: 13
+    }
+  })), altText ? /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    size: "tiny",
+    ellipsis: true,
+    tooltipProps: _tooltip.smallTooltipCommonProps,
+    dataHook: "media-image-view-alt-text",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 69,
+      columnNumber: 13
+    }
+  }, altText) : /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    size: "tiny",
+    ellipsis: true,
+    className: _mediaImageViewStCss.classes.altTextPlaceholder,
+    dataHook: "media-image-view-alt-text-placeholder",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 78,
+      columnNumber: 13
+    }
+  }, placeholder)));
+}
+const MediaImageView = exports.MediaImageView = (0, _mobxReactLite.observer)(_MediaImageView);
+MediaImageView.displayName = 'MediaImageView';
+//# sourceMappingURL=media-image-view.js.map

package/dist/cjs/components/media-image-field/media-image-view.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_mobxReactLite","_PatternsFieldsContainerProvider","_getImageSource","_tooltip","_imagePreviewPopover","_imageThumbnail","_mediaImageViewStCss","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_MediaImageView","value","image","dataHook","_usePatternsCmsFields","translate","usePatternsCmsFieldsContainer","src","getImageSource","altText","placeholder","undefined","isPreviewShown","setIsPreviewShown","useState","showPreview","useCallback","hidePreview","thumbnail","createElement","ImageThumbnail","width","height","borderRadius","onMouseEnter","onMouseLeave","__self","__source","fileName","lineNumber","columnNumber","Box","className","classes","root","verticalAlign","gap","padding","ImagePreviewPopover","shown","Fragment","flexShrink","Divider","direction","Text","size","ellipsis","tooltipProps","smallTooltipCommonProps","altTextPlaceholder","MediaImageView","exports","observer","displayName"],"sources":["../../../../src/components/media-image-field/media-image-view.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Box, Divider, Text } from '@wix/design-system';\nimport { observer } from 'mobx-react-lite';\nimport type { MediaImageValue } from '../../types/media-image';\nimport { usePatternsCmsFieldsContainer } from '../../providers/PatternsFieldsContainerProvider';\nimport { getImageSource } from '../../utils/get-image-source';\nimport { smallTooltipCommonProps } from '../../utils/tooltip';\nimport { ImagePreviewPopover } from '../image/image-preview-popover';\nimport { ImageThumbnail } from '../image/image-thumbnail';\nimport { classes } from './media-image-view.st.css.js';\n\nexport interface MediaImageViewProps {\n  /** A value read with `toMediaImageValue`. */\n  value: MediaImageValue | null;\n  dataHook?: string;\n}\n\nfunction _MediaImageView({ value: image, dataHook }: MediaImageViewProps) {\n  // Tables render this cell even with no fields container above them, which\n  // legacy image cells never needed. Without one there is nothing to translate\n  // the placeholder with, so it is left out instead of breaking the cell.\n  const translate = usePatternsCmsFieldsContainer()?.translate;\n  const src = getImageSource(image);\n  const altText = image?.altText;\n  const placeholder = altText\n    ? undefined\n    : translate?.('CMS.image.altText.cellPlaceholder');\n  const [isPreviewShown, setIsPreviewShown] = useState(false);\n\n  const showPreview = useCallback(() => setIsPreviewShown(true), []);\n  const hidePreview = useCallback(() => setIsPreviewShown(false), []);\n\n  // With no src, the thumbnail renders the empty-image placeholder.\n  const thumbnail = (\n    <ImageThumbnail\n      value={image}\n      dataHook=\"media-image-view-thumbnail\"\n      width=\"36px\"\n      height=\"24px\"\n      borderRadius=\"0\"\n      onMouseEnter={src ? showPreview : undefined}\n      onMouseLeave={src ? hidePreview : undefined}\n    />\n  );\n\n  return (\n    <Box\n      dataHook={dataHook}\n      className={classes.root}\n      verticalAlign=\"middle\"\n      gap=\"8px\"\n      padding=\"0 8px\"\n      height=\"100%\"\n      width=\"100%\"\n    >\n      {src ? (\n        <ImagePreviewPopover src={src} shown={isPreviewShown}>\n          {thumbnail}\n        </ImagePreviewPopover>\n      ) : (\n        thumbnail\n      )}\n      {src && (altText || placeholder) && (\n        <>\n          <Box height=\"16px\" flexShrink={0}>\n            <Divider direction=\"vertical\" />\n          </Box>\n          {altText ? (\n            <Text\n              size=\"tiny\"\n              ellipsis\n              tooltipProps={smallTooltipCommonProps}\n              dataHook=\"media-image-view-alt-text\"\n            >\n              {altText}\n            </Text>\n          ) : (\n            <Text\n              size=\"tiny\"\n              ellipsis\n              className={classes.altTextPlaceholder}\n              dataHook=\"media-image-view-alt-text-placeholder\"\n            >\n              {placeholder}\n            </Text>\n          )}\n        </>\n      )}\n    </Box>\n  );\n}\n\nexport const MediaImageView = observer(_MediaImageView);\n\nMediaImageView.displayName = 'MediaImageView';\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/media-image-field/media-image-view.st.css

@@ -0,0 +1,16 @@
+@property st-global(--wds-color-text-standard-primary);
+@property st-global(--wds-color-text-placeholder);
+@property st-global(--wsr-color-D40);
+
+.root {
+  box-sizing: border-box;
+}
+
+/* WDS <Text> reads its colour from the primary text token, so the placeholder
+   colour goes through it. */
+.altTextPlaceholder {
+  --wds-color-text-standard-primary: var(
+    --wds-color-text-placeholder,
+    var(--wsr-color-D40, #868AA5)
+  );
+}

package/dist/cjs/components/media-image-field/media-image-view.st.css.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.vars = exports.style = exports.stVars = exports.st = exports.namespace = exports.layers = exports.keyframes = exports.cssStates = exports.containers = exports.classes = void 0;
+var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
+// @ts-nocheck
+
+var _namespace_ = "mediaimageview4152861386";
+var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
+var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
+var style = exports.style = _style_;
+var st = exports.st = _style_;
+var namespace = exports.namespace = _namespace_;
+var classes = exports.classes = {
+  "root": "mediaimageview4152861386__root",
+  "altTextPlaceholder": "mediaimageview4152861386__altTextPlaceholder"
+};
+var keyframes = exports.keyframes = {};
+var layers = exports.layers = {};
+var containers = exports.containers = {};
+var stVars = exports.stVars = {};
+var vars = exports.vars = {
+  "wds-color-text-standard-primary": "--wds-color-text-standard-primary",
+  "wds-color-text-placeholder": "--wds-color-text-placeholder",
+  "wsr-color-D40": "--wsr-color-D40"
+};
+//# sourceMappingURL=media-image-view.st.css.js.map

package/dist/cjs/components/media-image-field/media-image-view.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/media-image-field/media-image-view.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"mediaimageview4152861386\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"mediaimageview4152861386__root\",\"altTextPlaceholder\":\"mediaimageview4152861386__altTextPlaceholder\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-text-standard-primary\":\"--wds-color-text-standard-primary\",\"wds-color-text-placeholder\":\"--wds-color-text-placeholder\",\"wsr-color-D40\":\"--wsr-color-D40\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,gCAAgC;EAAC,oBAAoB,EAAC;AAA8C,CAAC;AAC3H,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,4BAA4B,EAAC,8BAA8B;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}

package/dist/cjs/components/media-image-field/media-image-view.uni.driver.js

@@ -0,0 +1,18 @@
+"use strict";
+
+exports.__esModule = true;
+exports.MediaImageViewUniDriver = MediaImageViewUniDriver;
+var _baseDriver = require("../../testkit/base-driver");
+function MediaImageViewUniDriver(base, _body) {
+  const thumbnail = base.$('[data-hook="media-image-view-thumbnail"]');
+  const altText = base.$('[data-hook="media-image-view-alt-text"]');
+  const altTextPlaceholder = base.$('[data-hook="media-image-view-alt-text-placeholder"]');
+  return {
+    ...(0, _baseDriver.baseUniDriverFactory)(base),
+    hasThumbnail: () => thumbnail.exists(),
+    isEmpty: async () => (await thumbnail.attr('data-empty')) === 'true',
+    getAltText: async () => (await altText.exists()) ? altText.text() : undefined,
+    hasAltTextPlaceholder: () => altTextPlaceholder.exists()
+  };
+}
+//# sourceMappingURL=media-image-view.uni.driver.js.map

package/dist/cjs/components/media-image-field/media-image-view.uni.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_baseDriver","require","MediaImageViewUniDriver","base","_body","thumbnail","$","altText","altTextPlaceholder","baseUniDriverFactory","hasThumbnail","exists","isEmpty","attr","getAltText","text","undefined","hasAltTextPlaceholder"],"sources":["../../../../src/components/media-image-field/media-image-view.uni.driver.ts"],"sourcesContent":["import type { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport { baseUniDriverFactory } from '../../testkit/base-driver';\n\nexport function MediaImageViewUniDriver(base: UniDriver, _body: UniDriver) {\n  const thumbnail = base.$('[data-hook=\"media-image-view-thumbnail\"]');\n  const altText = base.$('[data-hook=\"media-image-view-alt-text\"]');\n  const altTextPlaceholder = base.$(\n    '[data-hook=\"media-image-view-alt-text-placeholder\"]',\n  );\n  return {\n    ...baseUniDriverFactory(base),\n    hasThumbnail: () => thumbnail.exists(),\n    isEmpty: async () => (await thumbnail.attr('data-empty')) === 'true',\n    getAltText: async () =>\n      (await altText.exists()) ? altText.text() : undefined,\n    hasAltTextPlaceholder: () => altTextPlaceholder.exists(),\n  };\n}\n"],"mappings":";;;;AACA,IAAAA,WAAA,GAAAC,OAAA;AAEO,SAASC,uBAAuBA,CAACC,IAAe,EAAEC,KAAgB,EAAE;EACzE,MAAMC,SAAS,GAAGF,IAAI,CAACG,CAAC,CAAC,0CAA0C,CAAC;EACpE,MAAMC,OAAO,GAAGJ,IAAI,CAACG,CAAC,CAAC,yCAAyC,CAAC;EACjE,MAAME,kBAAkB,GAAGL,IAAI,CAACG,CAAC,CAC/B,qDACF,CAAC;EACD,OAAO;IACL,GAAG,IAAAG,gCAAoB,EAACN,IAAI,CAAC;IAC7BO,YAAY,EAAEA,CAAA,KAAML,SAAS,CAACM,MAAM,CAAC,CAAC;IACtCC,OAAO,EAAE,MAAAA,CAAA,KAAY,CAAC,MAAMP,SAAS,CAACQ,IAAI,CAAC,YAAY,CAAC,MAAM,MAAM;IACpEC,UAAU,EAAE,MAAAA,CAAA,KACV,CAAC,MAAMP,OAAO,CAACI,MAAM,CAAC,CAAC,IAAIJ,OAAO,CAACQ,IAAI,CAAC,CAAC,GAAGC,SAAS;IACvDC,qBAAqB,EAAEA,CAAA,KAAMT,kBAAkB,CAACG,MAAM,CAAC;EACzD,CAAC;AACH","ignoreList":[]}