@wix/patterns-fields 1.116.0 → 1.117.0

package/dist/esm/components/media-control/paste-url-button.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "pasteurlbutton2330833856";
+var _namespace_ = "pasteurlbutton531298721";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "pasteurlbutton2330833856__root", "iconButtonTooltip": "pasteurlbutton2330833856__iconButtonTooltip", "iconButton": "pasteurlbutton2330833856__iconButton" };
+export var classes = { "root": "pasteurlbutton531298721__root", "iconButtonTooltip": "pasteurlbutton531298721__iconButtonTooltip", "iconButton": "pasteurlbutton531298721__iconButton" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/media-control/paste-url-button.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"paste-url-button.st.css.js","sourceRoot":"","sources":["../../../../src/components/media-control/paste-url-button.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,0BAA0B,CAAC;AAC7C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAA2C,OAAO,CAAC;AACnE,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,gCAAgC,EAAC,mBAAmB,EAAC,6CAA6C,EAAC,YAAY,EAAC,sCAAsC,EAAC,CAAC;AACrL,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}
+{"version":3,"file":"paste-url-button.st.css.js","sourceRoot":"","sources":["../../../../src/components/media-control/paste-url-button.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAA2C,OAAO,CAAC;AACnE,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,+BAA+B,EAAC,mBAAmB,EAAC,4CAA4C,EAAC,YAAY,EAAC,qCAAqC,EAAC,CAAC;AAClL,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/media-control/use-cell-media-edit.js

@@ -1,42 +1,54 @@
 import { useCallback, useRef } from 'react';
 import { useCellEditKeyboard } from '../../hooks';
 import { useMediaControl } from './use-media-control';
-import { useMediaHandlers } from './use-media-handlers';
 import { usePasteURLForm } from './use-paste-url-form';
-/**
- * Shared state + handlers for single-value media cell edit components
- * (image / document / audio / video / …). Each consumer renders its own
- * primary/secondary content; this hook owns the wiring to useMediaControl,
- * usePasteURLForm, useCellEditKeyboard, and the standard onCommit/onCancel
- * dance.
- */
-export function useCellMediaEdit({ mediaType, value, onChange, onCommit, onCancel, onStartEdit, inputRef, }) {
+const sameUri = (uri) => uri;
+export function useCellMediaEdit({ mediaType, value, onChange, onCommit, onCancel, onStartEdit, inputRef, fromPick = sameUri, fromUrl = sameUri, commitOnPick = true, }) {
     const containerRef = useRef(null);
-    const onMediaChange = useCallback((uri) => {
-        onChange(uri);
-        onCommit();
-    }, [onChange, onCommit]);
+    // The media manager and the URL form call back after they close, so they
+    // read the value from here rather than from the render that opened them.
+    const latestValue = useRef(value);
+    latestValue.current = value;
+    const applied = useRef(false);
+    const apply = useCallback((next) => {
+        applied.current = true;
+        // The URL form closes right after it saves, before the next render.
+        latestValue.current = next;
+        onChange(next);
+        if (commitOnPick) {
+            onCommit();
+        }
+    }, [onChange, onCommit, commitOnPick]);
+    const onPick = useCallback((uri) => {
+        const next = fromPick(uri, latestValue.current);
+        if (next !== null) {
+            apply(next);
+        }
+    }, [fromPick, apply]);
+    const onUrlSave = useCallback((url) => apply(fromUrl(url, latestValue.current)), [fromUrl, apply]);
     const { callMedia, downloadMedia, loading } = useMediaControl({
         mediaType,
-        value: value ?? undefined,
-        onChange: onMediaChange,
-    });
-    const { handleReplace: handleCallMedia, handleDelete } = useMediaHandlers({
-        value,
-        callMedia,
-        downloadMedia,
-        onChange,
-        onCommit,
-        onStartEdit,
-        onCancel,
-    });
-    const { isOpen, title, onOpen, onClose, onSave } = usePasteURLForm({
-        onChange: onMediaChange,
+        onChange: onPick,
     });
+    const handleCallMedia = useCallback(async () => {
+        onStartEdit?.();
+        applied.current = false;
+        await callMedia();
+        if (!applied.current && (commitOnPick || latestValue.current === null)) {
+            onCancel?.();
+        }
+    }, [onStartEdit, callMedia, commitOnPick, onCancel]);
+    const handleDelete = useCallback(() => {
+        onChange(null);
+        onCommit();
+    }, [onChange, onCommit]);
+    const { isOpen, title, value: pasteUrlValue, onOpen, onClose, onSave, } = usePasteURLForm({ onChange: onUrlSave });
     const handleFormClose = useCallback(() => {
         onClose();
-        onCancel?.();
-    }, [onClose, onCancel]);
+        if (commitOnPick || latestValue.current === null) {
+            onCancel?.();
+        }
+    }, [onClose, commitOnPick, onCancel]);
     const startEditAndOpenPasteUrl = useCallback((params) => () => {
         onStartEdit?.();
         onOpen(params)();
@@ -54,7 +66,13 @@ export function useCellMediaEdit({ mediaType, value, onChange, onCommit, onCance
         handleCallMedia,
         handleDelete,
         startEditAndOpenPasteUrl,
-        pasteUrlForm: { isOpen, title, onSave, handleClose: handleFormClose },
+        pasteUrlForm: {
+            isOpen,
+            title,
+            value: pasteUrlValue,
+            onSave,
+            handleClose: handleFormClose,
+        },
         handleContainerFocus,
         handleContainerBlur,
     };

package/dist/esm/components/media-control/use-cell-media-edit.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-cell-media-edit.js","sourceRoot":"","sources":["../../../../src/components/media-control/use-cell-media-edit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAI5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AA6CvD;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,QAAQ,GACe;IACvB,MAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEzD,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,GAAW,EAAE,EAAE;QACd,QAAQ,CAAC,GAAG,CAAC,CAAC;QACd,QAAQ,EAAE,CAAC;IACb,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,CAAC,CACrB,CAAC;IAEF,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,eAAe,CAAC;QAC5D,SAAS;QACT,KAAK,EAAE,KAAK,IAAI,SAAS;QACzB,QAAQ,EAAE,aAAa;KACxB,CAAC,CAAC;IAEH,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,gBAAgB,CAAC;QACxE,KAAK;QACL,SAAS;QACT,aAAa;QACb,QAAQ;QACR,QAAQ;QACR,WAAW;QACX,QAAQ;KACT,CAAC,CAAC;IAEH,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,eAAe,CAAC;QACjE,QAAQ,EAAE,aAAa;KACxB,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,OAAO,EAAE,CAAC;QACV,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExB,MAAM,wBAAwB,GAAG,WAAW,CAC1C,CAAC,MAAyC,EAAE,EAAE,CAAC,GAAG,EAAE;QAClD,WAAW,EAAE,EAAE,CAAC;QAChB,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;IACnB,CAAC,EACD,CAAC,WAAW,EAAE,MAAM,CAAC,CACtB,CAAC;IAEF,MAAM,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,GAAG,mBAAmB,CAAC;QACxE,YAAY;QACZ,QAAQ;QACR,QAAQ;KACT,CAAC,CAAC;IAEH,OAAO;QACL,YAAY;QACZ,OAAO;QACP,SAAS;QACT,aAAa;QACb,eAAe;QACf,YAAY;QACZ,wBAAwB;QACxB,YAAY,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,eAAe,EAAE;QACrE,oBAAoB;QACpB,mBAAmB;KACpB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"use-cell-media-edit.js","sourceRoot":"","sources":["../../../../src/components/media-control/use-cell-media-edit.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/media-gallery/form-media-gallery-field.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "formmediagalleryfield478233914";
+var _namespace_ = "formmediagalleryfield903826005";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "formmediagalleryfield478233914__root", "container": "formmediagalleryfield478233914__container", "viewBox": "formmediagalleryfield478233914__viewBox", "addItemWrapper": "formmediagalleryfield478233914__addItemWrapper", "addItem": "formmediagalleryfield478233914__addItem", "overlay": "formmediagalleryfield478233914__overlay", "image": "formmediagalleryfield478233914__image", "previewImage": "formmediagalleryfield478233914__previewImage", "previewVideo": "formmediagalleryfield478233914__previewVideo" };
+export var classes = { "root": "formmediagalleryfield903826005__root", "container": "formmediagalleryfield903826005__container", "viewBox": "formmediagalleryfield903826005__viewBox", "addItemWrapper": "formmediagalleryfield903826005__addItemWrapper", "addItem": "formmediagalleryfield903826005__addItem", "overlay": "formmediagalleryfield903826005__overlay", "image": "formmediagalleryfield903826005__image", "previewImage": "formmediagalleryfield903826005__previewImage", "previewVideo": "formmediagalleryfield903826005__previewVideo" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/media-image/media-image.st.css.js

@@ -1,15 +1,15 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "mediaimage815133103";
+var _namespace_ = "mediaimage3328930349";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "mediaimage815133103__root" };
+export var classes = { "root": "mediaimage3328930349__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};
 export var stVars = {};
-export var vars = { "wds-color-red-200": "--wds-color-red-200", "wsr-color-R20": "--wsr-color-R20", "wds-color-black-550": "--wds-color-black-550", "wsr-color-D55": "--wsr-color-D55", "from": "--mediaimage815133103-from", "to": "--mediaimage815133103-to" };
+export var vars = { "wds-color-red-200": "--wds-color-red-200", "wsr-color-R20": "--wsr-color-R20", "wds-color-black-550": "--wds-color-black-550", "wsr-color-D55": "--wsr-color-D55", "from": "--mediaimage3328930349-from", "to": "--mediaimage3328930349-to" };
 //# sourceMappingURL=media-image.st.css.js.map

package/dist/esm/components/media-image/media-image.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-image.st.css.js","sourceRoot":"","sources":["../../../../src/components/media-image/media-image.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,qBAAqB,CAAC;AACxC,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAA2C,OAAO,CAAC;AACnE,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,2BAA2B,EAAC,CAAC;AAC1D,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAC,mBAAmB,EAAC,qBAAqB,EAAC,eAAe,EAAC,iBAAiB,EAAC,qBAAqB,EAAC,uBAAuB,EAAC,eAAe,EAAC,iBAAiB,EAAC,MAAM,EAAC,4BAA4B,EAAC,IAAI,EAAC,0BAA0B,EAAC,CAAC"}
+{"version":3,"file":"media-image.st.css.js","sourceRoot":"","sources":["../../../../src/components/media-image/media-image.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,sBAAsB,CAAC;AACzC,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAA2C,OAAO,CAAC;AACnE,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,4BAA4B,EAAC,CAAC;AAC3D,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAC,mBAAmB,EAAC,qBAAqB,EAAC,eAAe,EAAC,iBAAiB,EAAC,qBAAqB,EAAC,uBAAuB,EAAC,eAAe,EAAC,iBAAiB,EAAC,MAAM,EAAC,6BAA6B,EAAC,IAAI,EAAC,2BAA2B,EAAC,CAAC"}

package/dist/esm/components/media-image/overlays/overlay.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
-var _namespace_ = "overlay538321121";
+var _namespace_ = "overlay3008863944";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "overlay538321121__root", "iconOverlay": "overlay538321121__iconOverlay" };
+export var classes = { "root": "overlay3008863944__root", "iconOverlay": "overlay3008863944__iconOverlay" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/media-image/overlays/overlay.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.st.css.js","sourceRoot":"","sources":["../../../../../src/components/media-image/overlays/overlay.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAIjF,IAAI,WAAW,GAAG,kBAAkB,CAAC;AACrC,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAA2C,OAAO,CAAC;AACnE,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,wBAAwB,EAAC,aAAa,EAAC,+BAA+B,EAAC,CAAC;AACrG,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAC,YAAY,EAAC,8CAA8C,EAAC,CAAC;AAClF,MAAM,CAAC,IAAI,IAAI,GAAG,EAAC,iBAAiB,EAAC,mBAAmB,EAAC,eAAe,EAAC,iBAAiB,EAAC,CAAC"}
+{"version":3,"file":"overlay.st.css.js","sourceRoot":"","sources":["../../../../../src/components/media-image/overlays/overlay.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAIjF,IAAI,WAAW,GAAG,mBAAmB,CAAC;AACtC,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAA2C,OAAO,CAAC;AACnE,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,yBAAyB,EAAC,aAAa,EAAC,gCAAgC,EAAC,CAAC;AACvG,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAC,YAAY,EAAC,8CAA8C,EAAC,CAAC;AAClF,MAAM,CAAC,IAAI,IAAI,GAAG,EAAC,iBAAiB,EAAC,mBAAmB,EAAC,eAAe,EAAC,iBAAiB,EAAC,CAAC"}

package/dist/esm/components/media-image-field/cell-media-image-edit.js

@@ -0,0 +1,159 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Box, FormField, IconButton, Input, Popover, PopoverMenu, Tooltip, } from '@wix/design-system';
+import { Add, Delete, Download, Link, LinkSmall, Maximize, MoreSmall, Replace, } from '@wix/wix-ui-icons-common/lazy';
+import { ThumbnailSize } from '../../auto-field-types';
+import { useTranslations } from '../../hooks';
+import { getImageSource } from '../../utils/get-image-source';
+import { fromImageUrl, fromMediaManagerPick, isExternalMediaImage, replaceImage, toMediaImageValue, withAltText, } from '../../utils/media-image-value';
+import { executeDownloading, MEDIA_TYPES } from '../../utils/media-utils';
+import { CellMediaEditShell, MediaFieldType, useCellMediaEdit, } from '../media-control';
+import { MediaPreviewModal } from '../media-gallery/media-preview-modal';
+import { MediaImage } from '../media-image';
+import { MediaImageView } from './media-image-view';
+import { st, classes } from './cell-media-image-edit.st.css.js';
+const imageFromUrl = (url, current) => replaceImage(current, fromImageUrl(url));
+/** WDS shows the menu's open state only to its trigger, so the trigger
+ *  reports it. */
+const MenuTrigger = ({ isOpen, toggle, buttonRef, onOpenChange, ariaLabel, }) => {
+    useEffect(() => {
+        onOpenChange(isOpen);
+    }, [isOpen, onOpenChange]);
+    return (React.createElement(IconButton, { ref: buttonRef, size: "small", skin: "light", priority: "secondary", dataHook: "media-image-edit-more-button", ariaLabel: ariaLabel, "aria-haspopup": "menu", "aria-expanded": isOpen, onClick: toggle },
+        React.createElement(MoreSmall, null)));
+};
+/**
+ * Edits a `MEDIA_IMAGE` cell. An empty cell shows the add and paste-URL
+ * buttons. A cell with an image opens a popover with the image and its alt
+ * text. Changes go to `onChange` as they happen and are committed once, when
+ * the popover closes.
+ */
+export const CellMediaImageEdit = ({ value, onChange, onCommit, onCancel, onStartEdit, inputRef, dataHook, }) => {
+    const { t } = useTranslations();
+    const image = toMediaImageValue(value);
+    const src = getImageSource(image);
+    // 'none' once committed.
+    const [popoverLayer, setPopoverLayer] = useState('popover');
+    const mediaEdit = useCellMediaEdit({
+        mediaType: MEDIA_TYPES.IMAGE,
+        value: image,
+        onChange,
+        onCommit,
+        onCancel,
+        onStartEdit,
+        inputRef,
+        fromPick: fromMediaManagerPick,
+        fromUrl: imageFromUrl,
+        commitOnPick: false,
+    });
+    const { loading, pasteUrlForm, handleCallMedia, handleDelete, downloadMedia, } = mediaEdit;
+    const closePasteUrl = pasteUrlForm.handleClose;
+    // The media manager and the URL form sit above the popover layers.
+    const openLayer = loading
+        ? 'loading'
+        : pasteUrlForm.isOpen
+            ? 'pasteUrl'
+            : image
+                ? popoverLayer
+                : 'none';
+    const openPasteUrl = mediaEdit.startEditAndOpenPasteUrl({
+        title: t('CMS.image.replaceWithUrl.title'),
+        value: isExternalMediaImage(image) ? image.url : undefined,
+    });
+    const handleDownload = useCallback(() => {
+        // The Media Manager can't make a download link for an external URL.
+        if (isExternalMediaImage(image)) {
+            executeDownloading(image.url);
+        }
+        else if (src) {
+            downloadMedia(src);
+        }
+    }, [src, image, downloadMedia]);
+    const commit = useCallback(() => {
+        setPopoverLayer('none');
+        onCommit();
+    }, [onCommit]);
+    // Picking Preview sets its own layer, which closing the menu must not undo.
+    const handleMenuOpenChange = useCallback((isOpen) => {
+        setPopoverLayer((layer) => {
+            if (isOpen) {
+                return 'menu';
+            }
+            return layer === 'menu' ? 'popover' : layer;
+        });
+    }, []);
+    // Fires on mouseup, before the click that closes a menu or a modal, so
+    // `openLayer` still says what was open.
+    const handleClickOutside = useCallback(() => {
+        if (openLayer === 'popover') {
+            commit();
+        }
+    }, [openLayer, commit]);
+    useEffect(() => {
+        // WDS closes the menu on Escape and stops the event there.
+        if (openLayer === 'none' ||
+            openLayer === 'loading' ||
+            openLayer === 'menu') {
+            return;
+        }
+        // Capture phase, so the table doesn't cancel the edit first.
+        const handleKeyDown = (e) => {
+            if (e.key !== 'Escape') {
+                return;
+            }
+            e.stopPropagation();
+            if (openLayer === 'pasteUrl') {
+                closePasteUrl();
+            }
+            else if (openLayer === 'preview') {
+                setPopoverLayer('popover');
+            }
+            else {
+                commit();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown, true);
+        return () => document.removeEventListener('keydown', handleKeyDown, true);
+    }, [openLayer, closePasteUrl, commit]);
+    const emptyActions = (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { content: t('CMS.image.add'), appendTo: "window" },
+            React.createElement(IconButton, { size: "tiny", priority: "secondary", dataHook: "media-image-edit-add-button", ariaLabel: t('CMS.image.add'), onClick: handleCallMedia },
+                React.createElement(Add, null))),
+        React.createElement(Tooltip, { content: t('CMS.image.replaceWithUrl.button'), appendTo: "window" },
+            React.createElement(IconButton, { size: "tiny", priority: "tertiary", dataHook: "media-image-edit-paste-url-button", ariaLabel: t('CMS.image.replaceWithUrl.button'), onClick: openPasteUrl },
+                React.createElement(LinkSmall, null)))));
+    // One return for both states, so the shell and its container stay mounted
+    // when a pick fills an empty cell.
+    return (React.createElement(React.Fragment, null,
+        React.createElement(CellMediaEditShell, { dataHook: dataHook, mediaEdit: mediaEdit, fieldType: MediaFieldType.image, padding: image ? '0' : undefined }, !image ? (emptyActions) : (React.createElement("div", { className: classes.view },
+            React.createElement(MediaImageView, { value: image }),
+            React.createElement("div", { className: classes.anchor },
+                React.createElement(Popover, { shown: popoverLayer !== 'none', appendTo: "window", placement: "bottom-start", moveBy: { x: 0, y: 4 }, zIndex: 5001, animate: true, flip: true, fixed: false, onClickOutside: handleClickOutside },
+                    React.createElement(Popover.Element, null,
+                        React.createElement("div", { className: classes.anchorBox })),
+                    React.createElement(Popover.Content, null,
+                        React.createElement(Box, { dataHook: "media-image-edit-popover", className: classes.popoverContent, direction: "vertical", gap: "SP3", padding: "SP3" },
+                            React.createElement(FormField, { label: t('CMS.image.thumbnail.label') },
+                                React.createElement("div", { className: classes.image },
+                                    React.createElement(MediaImage, { dataHook: "media-image-edit-image", src: src, alt: "", fit: "cover", transparent: true, size: ThumbnailSize.L, width: "180px", height: "180px", borderRadius: "0" }),
+                                    React.createElement("div", { className: st(classes.imageActions, {
+                                            menuOpen: popoverLayer === 'menu',
+                                        }) },
+                                        React.createElement(Tooltip, { content: t('CMS.image.replace'), appendTo: "window" },
+                                            React.createElement(IconButton, { size: "small", skin: "light", priority: "secondary", dataHook: "media-image-edit-replace-button", ariaLabel: t('CMS.image.replace'), onClick: handleCallMedia },
+                                                React.createElement(Replace, null))),
+                                        React.createElement(PopoverMenu, { textSize: "small", appendTo: "window", zIndex: 5002, triggerElement: ({ isOpen, toggle, ref }) => (React.createElement(MenuTrigger, { isOpen: isOpen, toggle: toggle, buttonRef: ref, onOpenChange: handleMenuOpenChange, ariaLabel: t('auto-patterns.fields.more_actions_tooltip') })) },
+                                            React.createElement(PopoverMenu.MenuItem, { dataHook: "media-image-edit-action-replace-url", text: t('CMS.image.replaceWithUrl.button'), prefixIcon: React.createElement(Link, null), onClick: openPasteUrl }),
+                                            React.createElement(PopoverMenu.MenuItem, { dataHook: "media-image-edit-action-preview", text: t('CMS.mediaGallery.preview'), prefixIcon: React.createElement(Maximize, null), onClick: () => setPopoverLayer('preview') }),
+                                            React.createElement(PopoverMenu.MenuItem, { dataHook: "media-image-edit-action-download", text: t('CMS.image.download'), prefixIcon: React.createElement(Download, null), onClick: handleDownload }),
+                                            React.createElement(PopoverMenu.Divider, null),
+                                            React.createElement(PopoverMenu.MenuItem, { dataHook: "media-image-edit-action-delete", text: t('CMS.image.clear'), skin: "destructive", prefixIcon: React.createElement(Delete, null), onClick: handleDelete }))))),
+                            React.createElement(FormField, { label: t('CMS.image.altText.label') },
+                                React.createElement(Input, { dataHook: "media-image-edit-alt-input", size: "small", value: image.altText ?? '', placeholder: t('CMS.image.altText.inputPlaceholder'), onChange: (e) => onChange(withAltText(image, e.target.value)), onEnterPressed: commit }))))))))),
+        image && (React.createElement(MediaPreviewModal, { isOpen: popoverLayer === 'preview', value: src, onClose: () => setPopoverLayer('popover'), onRequestMedia: handleCallMedia, onClearMedia: handleDelete, onDownloadMedia: handleDownload, textKeys: {
+                replace: 'CMS.image.replace',
+                download: 'CMS.image.download',
+                delete: 'CMS.image.clear',
+            } }))));
+};
+CellMediaImageEdit.displayName = 'CellMediaImageEdit';
+//# sourceMappingURL=cell-media-image-edit.js.map

package/dist/esm/components/media-image-field/cell-media-image-edit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell-media-image-edit.js","sourceRoot":"","sources":["../../../../src/components/media-image-field/cell-media-image-edit.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,63 @@
+@property st-global(--wds-color-fill-transparent-primary);
+@property st-global(--wsr-color-D10);
+@property st-global(--wds-image-border-radius-default);
+@property st-global(--wds-space-100);
+
+.view {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* A zero-height strip along the cell's bottom edge, so the popover opens
+   under the cell. */
+.anchor {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 0;
+}
+
+.anchorBox {
+  width: 100%;
+  height: 0;
+}
+
+.popoverContent {
+  width: 288px;
+  box-sizing: border-box;
+}
+
+.image {
+  position: relative;
+  width: 180px;
+  height: 180px;
+  border-radius: var(--wds-image-border-radius-default, 8px);
+  overflow: hidden;
+  line-height: 0;
+}
+
+/* Shown on hover, and while a button inside has focus, so the actions stay
+   reachable by keyboard. */
+.imageActions {
+  -st-states: menuOpen;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wds-space-100, 6px);
+  opacity: 0;
+  background: var(
+    --wds-color-fill-transparent-primary,
+    color-mix(in srgb, var(--wsr-color-D10, #000624) 66%, transparent)
+  );
+  transition: opacity 0.15s;
+}
+
+.image:hover .imageActions,
+.imageActions:focus-within,
+.imageActions:menuOpen {
+  opacity: 1;
+}

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

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+var _namespace_ = "cellmediaimageedit1735372897";
+var _style_ = classesRuntime.bind(null, _namespace_);
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st = _style_;
+export var namespace = _namespace_;
+export var classes = { "root": "cellmediaimageedit1735372897__root", "view": "cellmediaimageedit1735372897__view", "anchor": "cellmediaimageedit1735372897__anchor", "anchorBox": "cellmediaimageedit1735372897__anchorBox", "popoverContent": "cellmediaimageedit1735372897__popoverContent", "image": "cellmediaimageedit1735372897__image", "imageActions": "cellmediaimageedit1735372897__imageActions" };
+export var keyframes = {};
+export var layers = {};
+export var containers = {};
+export var stVars = {};
+export 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" };
+//# sourceMappingURL=cell-media-image-edit.st.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cell-media-image-edit.st.css.js","sourceRoot":"","sources":["../../../../src/components/media-image-field/cell-media-image-edit.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,8BAA8B,CAAC;AACjD,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAA2C,OAAO,CAAC;AACnE,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,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,4CAA4C,EAAC,CAAC;AAC/X,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAC,oCAAoC,EAAC,sCAAsC,EAAC,eAAe,EAAC,iBAAiB,EAAC,iCAAiC,EAAC,mCAAmC,EAAC,eAAe,EAAC,iBAAiB,EAAC,CAAC"}

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

@@ -0,0 +1,59 @@
+import React, { useCallback, useRef } from 'react';
+import { Box, FormField, ImageViewer, Input } from '@wix/design-system';
+import { useIsMobile, useWixPatternsContainer } from '@wix/bex-core/react';
+import { useMergedRef, useTranslations } from '../../hooks';
+import { getImageSource } from '../../utils/get-image-source';
+import { getImageUrl } from '../../utils/get-image-url';
+import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from '../../utils/media-constants';
+import { fromMediaManagerPick, toMediaImageValue, withAltText, } from '../../utils/media-image-value';
+import { MEDIA_TYPES } from '../../utils/media-utils';
+import { useMediaControl } from '../media-control';
+/**
+ * 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.
+ */
+export const FormMediaImageField = ({ data, onChange, onBlur, readOnly, autoFocus, dataHook, inputRef: forwardedRef, imageFormFieldProps, }) => {
+    const { translate } = useWixPatternsContainer();
+    const { t } = useTranslations();
+    const isMobile = useIsMobile();
+    const image = 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 = useRef(image);
+    imageRef.current = image;
+    const [inputRef, setInputRef] = useMergedRef(forwardedRef);
+    const handlePick = useCallback((uri) => {
+        const next = fromMediaManagerPick(uri, imageRef.current);
+        if (next) {
+            onChange(next);
+        }
+    }, [onChange]);
+    const { callMedia, onMediaLoad } = useMediaControl({
+        mediaType: MEDIA_TYPES.IMAGE,
+        value: getImageSource(image),
+        onChange: handlePick,
+        autoFocus,
+        readOnly,
+        onBlur,
+        inputRef,
+        initialLoading: true,
+    });
+    const canEdit = !isMobile && !readOnly;
+    const handleAltTextChange = (e) => {
+        if (image) {
+            onChange(withAltText(image, e.target.value));
+        }
+    };
+    return (React.createElement(Box, { dataHook: dataHook, gap: "SP4", width: "100%" },
+        React.createElement(Box, { width: "100%", maxWidth: MEDIA_MAX_WIDTH, flexShrink: 0 },
+            React.createElement(FormField, { ...imageFormFieldProps, dataHook: "media-image-field-image" },
+                React.createElement(ImageViewer, { ref: setInputRef, dataHook: "media-image-field-viewer", imageUrl: image ? 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: MEDIA_HEIGHT, width: "100%", fit: "cover", onRemoveImage: () => onChange(null) }))),
+        image && (React.createElement(Box, { direction: "vertical", flexGrow: 1, minWidth: "0" },
+            React.createElement(FormField, { label: t('CMS.image.altText.label') },
+                React.createElement(Input, { dataHook: "media-image-field-alt-input", value: image.altText ?? '', placeholder: t('CMS.image.altText.inputPlaceholder'), onChange: handleAltTextChange, readOnly: readOnly }))))));
+};
+FormMediaImageField.displayName = 'FormMediaImageField';
+export const ControlledMediaImageInput = ({ data, onChange, onBlur, readOnly, autoFocus, dataHook, }) => (React.createElement(FormMediaImageField, { data: data, onChange: onChange, onBlur: onBlur, readOnly: readOnly, autoFocus: autoFocus, dataHook: dataHook }));
+ControlledMediaImageInput.displayName = 'ControlledMediaImageInput';
+//# sourceMappingURL=form-media-image-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-media-image-field.js","sourceRoot":"","sources":["../../../../src/components/media-image-field/form-media-image-field.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,27 @@
+import { FormFieldUniDriver, ImageViewerUniDriver, } from '@wix/design-system/dist/testkit/unidriver';
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+export function FormMediaImageFieldUniDriver(base, body) {
+    const formField = FormFieldUniDriver(base.$('[data-hook="media-image-field-image"]'), body);
+    const imageViewer = ImageViewerUniDriver(base.$('[data-hook="media-image-field-viewer"]'), body);
+    const altInput = base.$('[data-hook="media-image-field-alt-input"] input');
+    return {
+        ...baseUniDriverFactory(base),
+        getLabel: async () => (await formField.getLabel())?.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/esm/components/media-image-field/form-media-image-field.uni.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-media-image-field.uni.driver.js","sourceRoot":"","sources":["../../../../src/components/media-image-field/form-media-image-field.uni.driver.ts"],"names":[],"mappings":"AACA,OAAO,EACL,kBAAkB,EAClB,oBAAoB,GACrB,MAAM,2CAA2C,CAAC;AAEnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,MAAM,UAAU,4BAA4B,CAAC,IAAe,EAAE,IAAe;IAC3E,MAAM,SAAS,GAAG,kBAAkB,CAClC,IAAI,CAAC,CAAC,CAAC,uCAAuC,CAAC,EAC/C,IAAI,CACL,CAAC;IACF,MAAM,WAAW,GAAG,oBAAoB,CACtC,IAAI,CAAC,CAAC,CAAC,wCAAwC,CAAC,EAChD,IAAI,CACL,CAAC;IACF,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,iDAAiD,CAAC,CAAC;IAE3E,OAAO;QACL,GAAG,oBAAoB,CAAC,IAAI,CAAC;QAC7B,QAAQ,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,SAAS,CAAC,QAAQ,EAAE,CAAC,EAAE,WAAW,IAAI,EAAE;QACrE,UAAU,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,UAAU,EAAE;QACxC,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC;QAC5C,eAAe,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,gBAAgB,EAAE;QACnD,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,EAAE;QAC5C,gBAAgB,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,gBAAgB,EAAE;QACtD,QAAQ,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,EAAE;QACtC,YAAY,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,EAAE;QAC7C,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,EAAE;QAC5C,eAAe,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,EAAE;QACxC,UAAU,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE;QAClC,qBAAqB,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC;QACzD,YAAY,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC;QACzD,qEAAqE;QACrE,sDAAsD;QACtD,iBAAiB,EAAE,KAAK,IAAI,EAAE,CAC5B,CACE,MAAM,IAAI,CAAC,CAAC,CAAC,0CAA0C,CAAC,CAAC,SAAS,EAAE,CACrE,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC;KACrC,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useController } from '@wix/bex-core/form';
+import { useFieldRef } from '../../hooks';
+import { isMediaImageEmpty } from '../../utils/media-image-value';
+import { FormMediaImageField } from './form-media-image-field';
+const _FormMediaImageInput = (props) => {
+    const { field, dataHook, formControl, data } = props;
+    const { translate: t } = useWixPatternsContainer();
+    const controller = useController({
+        name: field?.id ?? '',
+        control: formControl,
+        defaultValue: data?.[field?.id ?? ''],
+        rules: {
+            validate: (value) => {
+                // Alt text alone doesn't make the field filled.
+                if (field.validation?.required && isMediaImageEmpty(value)) {
+                    return t('cairo.fieldValidation.requiredField');
+                }
+                return true;
+            },
+        },
+    });
+    const setFieldRef = useFieldRef(controller.field.ref);
+    return (React.createElement(FormMediaImageField
+    // Hands the live button to react-hook-form so shouldFocusError can
+    // reach this field when it blocks save.
+    , { 
+        // 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.validation?.required,
+            status: controller.fieldState.error ? 'error' : undefined,
+            statusMessage: controller.fieldState.error?.message,
+        } }));
+};
+export const FormMediaImageInput = observer(_FormMediaImageInput);
+//# sourceMappingURL=form-media-image-input.js.map