@wix/patterns-fields 1.115.0 → 1.117.0

package/src/components/image/image-thumbnail.tsx

@@ -20,6 +20,9 @@ export interface ImageThumbnailProps {
   dataHook?: string;
   showVideoIndicator?: boolean;
   size?: number;
+  width?: string;
+  height?: string;
+  borderRadius?: string;
 }
 
 export const ImageThumbnail: React.FC<ImageThumbnailProps> = ({
@@ -31,20 +34,22 @@ export const ImageThumbnail: React.FC<ImageThumbnailProps> = ({
   dataHook,
   showVideoIndicator = true,
   size = 36,
+  width = `${size}px`,
+  height = `${size}px`,
+  borderRadius = '3px',
 }) => {
   const value = getImageSource(imageValue);
   const src = value ? mediaURItoImageURL(value, ThumbnailSize.S) : undefined;
   const overlaySize = size <= 24 ? 'tiny' : 'small';
-  const px = `${size}px`;
 
   return (
     <div
       data-hook={dataHook}
       data-empty={!value || undefined}
       style={{
-        width: px,
-        height: px,
-        borderRadius: '3px',
+        width,
+        height,
+        borderRadius,
         flexShrink: 0,
         position: 'relative',
       }}
@@ -53,11 +58,11 @@ export const ImageThumbnail: React.FC<ImageThumbnailProps> = ({
         src={src}
         alt=""
         suspended
-        borderRadius="3px"
+        borderRadius={borderRadius}
         transparent
         size={ThumbnailSize.S}
-        width={px}
-        height={px}
+        width={width}
+        height={height}
         onLoad={onLoad}
         onError={onError}
         onMouseEnter={onMouseEnter}

package/src/components/image/image-view.tsx

@@ -1,8 +1,7 @@
 import React, { useState, useCallback } from 'react';
-import { Box, Popover } from '@wix/design-system';
-import { mediaURItoImageURL, ThumbnailSize } from '../../auto-field-types';
+import { Box } from '@wix/design-system';
 import { getImageSource, type ImageSource } from '../../utils/get-image-source';
-import { MediaImage } from '../media-image';
+import { ImagePreviewPopover } from './image-preview-popover';
 import { ImageThumbnail } from './image-thumbnail';
 
 export interface ImageViewProps {
@@ -32,46 +31,21 @@ export const ImageView: React.FC<ImageViewProps> = ({
     >
       <Box minWidth="0" style={{ flex: 1 }}>
         {value ? (
-          <Popover
-            showArrow={false}
-            shown={isPreviewShown}
-            appendTo="viewport"
-            placement="bottom-start"
-            showDelay={300}
-            moveBy={{ y: 4, x: 0 }}
-            zIndex={9999}
-            fluid
-          >
-            <Popover.Element>
-              <ImageThumbnail
-                value={value}
-                size={size}
-                dataHook="image-thumbnail"
-                onMouseEnter={showPreview}
-                onMouseLeave={hidePreview}
-              />
-            </Popover.Element>
-            <Popover.Content>
-              <Box
-                width="204px"
-                style={{
-                  borderRadius: '3px',
-                  overflow: 'hidden',
-                  lineHeight: 0,
-                }}
-              >
-                <MediaImage
-                  src={mediaURItoImageURL(value, ThumbnailSize.L)}
-                  alt=""
-                  fit="contain"
-                  transparent
-                  size={ThumbnailSize.L}
-                />
-              </Box>
-            </Popover.Content>
-          </Popover>
+          <ImagePreviewPopover src={value} shown={isPreviewShown} fluid>
+            <ImageThumbnail
+              value={value}
+              size={size}
+              dataHook="image-thumbnail"
+              onMouseEnter={showPreview}
+              onMouseLeave={hidePreview}
+            />
+          </ImagePreviewPopover>
         ) : (
-          <ImageThumbnail value={value} size={size} dataHook="image-thumbnail" />
+          <ImageThumbnail
+            value={value}
+            size={size}
+            dataHook="image-thumbnail"
+          />
         )}
       </Box>
     </Box>

package/src/components/image/thumbnail-replace-overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay1352123798";
+var _namespace_ = "thumbnailreplaceoverlay1763365333";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"thumbnailreplaceoverlay1352123798__root","icon":"thumbnailreplaceoverlay1352123798__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay1763365333__root","icon":"thumbnailreplaceoverlay1763365333__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/index.ts

@@ -23,5 +23,6 @@ export * from './boolean';
 export * from './number-input';
 export * from './url';
 export * from './image';
+export * from './media-image-field';
 export * from './reference';
 export * from './field-validation-settings';

package/src/components/media-control/cell-media-edit-shell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmediaeditshell2355752670";
+var _namespace_ = "cellmediaeditshell4153330898";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"cellmediaeditshell2355752670__root"};
+export var classes = {"root":"cellmediaeditshell4153330898__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/cell-media-edit-shell.tsx

@@ -20,12 +20,11 @@ export interface CellMediaEditShellProps {
     | 'handleContainerBlur'
     | 'pasteUrlForm'
   >;
-  /** Current cell value — forwarded to PasteURLForm as the pre-filled value. */
-  value: string | null;
   /** Which validator/placeholder strings the PasteURLForm should use. */
   fieldType: MediaFieldType;
   /** Optional gap between the primary slot and the secondary actions. */
   gap?: BoxCssSizingProperty;
+  padding?: BoxCssSizingProperty;
   /** Inner content — typically two slots: primary cell content + secondary actions. */
   children: React.ReactNode;
 }
@@ -40,9 +39,9 @@ export interface CellMediaEditShellProps {
 export const CellMediaEditShell: React.FC<CellMediaEditShellProps> = ({
   dataHook,
   mediaEdit,
-  value,
   fieldType,
   gap,
+  padding = '0 8px',
   children,
 }) => {
   const {
@@ -53,20 +52,8 @@ export const CellMediaEditShell: React.FC<CellMediaEditShellProps> = ({
     pasteUrlForm,
   } = mediaEdit;
 
-  if (loading) {
-    return (
-      <Box
-        dataHook={dataHook}
-        verticalAlign="middle"
-        width="100%"
-        height="100%"
-        padding="0 8px"
-      >
-        <Loader dataHook="loader" size="tiny" />
-      </Box>
-    );
-  }
-
+  // The loader renders inside the container: `useCellEditKeyboard` attaches
+  // its key listener to the container element once.
   return (
     <div
       ref={containerRef}
@@ -79,16 +66,16 @@ export const CellMediaEditShell: React.FC<CellMediaEditShellProps> = ({
         align="space-between"
         verticalAlign="middle"
         height="100%"
-        padding="0 8px"
+        padding={loading ? '0 8px' : padding}
         gap={gap}
         style={{ boxSizing: 'border-box' }}
       >
-        {children}
+        {loading ? <Loader dataHook="loader" size="tiny" /> : children}
       </Box>
 
       <PasteURLForm
         title={pasteUrlForm.title}
-        value={value ?? undefined}
+        value={pasteUrlForm.value}
         show={pasteUrlForm.isOpen}
         closeModal={pasteUrlForm.handleClose}
         onSave={pasteUrlForm.onSave}

package/src/components/media-control/paste-url-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "pasteurlbutton3327095583";
+var _namespace_ = "pasteurlbutton531298721";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"pasteurlbutton3327095583__root","iconButtonTooltip":"pasteurlbutton3327095583__iconButtonTooltip","iconButton":"pasteurlbutton3327095583__iconButton"};
+export var classes = {"root":"pasteurlbutton531298721__root","iconButtonTooltip":"pasteurlbutton531298721__iconButtonTooltip","iconButton":"pasteurlbutton531298721__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/use-cell-media-edit.ts

@@ -1,17 +1,15 @@
-import { useCallback, useRef } from 'react';
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 
 import { MEDIA_TYPES } from '../../utils/media-utils';
 import { useCellEditKeyboard } from '../../hooks';
 
 import { useMediaControl } from './use-media-control';
-import { useMediaHandlers } from './use-media-handlers';
 import { usePasteURLForm } from './use-paste-url-form';
 
-export interface UseCellMediaEditParams {
+export interface UseCellMediaEditParams<V = string> {
   mediaType: MEDIA_TYPES;
-  value: string | null;
-  onChange: (value: string | null) => void;
+  value: V | null;
+  onChange: (value: V | null) => void;
   onCommit: () => void;
   onCancel?: () => void;
   /**
@@ -22,6 +20,20 @@ export interface UseCellMediaEditParams {
   inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;
 }
 
+/** For a cell whose value is not the picked URI itself. */
+export interface CellMediaValueOptions<V> {
+  /** The value for a media manager pick. `null` ignores the pick. */
+  fromPick: (uri: string, current: V | null) => V | null;
+  /** The value for a URL saved in the paste-URL form. */
+  fromUrl: (url: string, current: V | null) => V;
+  /**
+   * When `false`, a pick only changes the value and the cell commits later.
+   * Closing the media manager or the URL form without a value then cancels
+   * the edit only if the cell is still empty.
+   */
+  commitOnPick?: boolean;
+}
+
 export interface UseCellMediaEditResult {
   containerRef: React.MutableRefObject<HTMLDivElement | null>;
   loading: boolean;
@@ -43,6 +55,8 @@ export interface UseCellMediaEditResult {
   pasteUrlForm: {
     isOpen: boolean;
     title: string;
+    /** The URL the form opens with. */
+    value?: string;
     onSave: (value: string) => void;
     /** onClose composed with onCancel — call from PasteURLForm.closeModal. */
     handleClose: () => void;
@@ -51,6 +65,8 @@ export interface UseCellMediaEditResult {
   handleContainerBlur: (e: React.FocusEvent) => void;
 }
 
+const sameUri = (uri: string) => uri;
+
 /**
  * Shared state + handlers for single-value media cell edit components
  * (image / document / audio / video / …). Each consumer renders its own
@@ -58,6 +74,15 @@ export interface UseCellMediaEditResult {
  * usePasteURLForm, useCellEditKeyboard, and the standard onCommit/onCancel
  * dance.
  */
+// Generic only so TS accepts it against the `unknown` implementation below.
+export function useCellMediaEdit<V extends string>(
+  params: UseCellMediaEditParams<V>,
+): UseCellMediaEditResult;
+
+export function useCellMediaEdit<V>(
+  params: UseCellMediaEditParams<V> & CellMediaValueOptions<V>,
+): UseCellMediaEditResult;
+
 export function useCellMediaEdit({
   mediaType,
   value,
@@ -66,41 +91,80 @@ export function useCellMediaEdit({
   onCancel,
   onStartEdit,
   inputRef,
-}: UseCellMediaEditParams): UseCellMediaEditResult {
+  fromPick = sameUri,
+  fromUrl = sameUri,
+  commitOnPick = true,
+}: UseCellMediaEditParams<unknown> &
+  Partial<CellMediaValueOptions<unknown>>): UseCellMediaEditResult {
   const containerRef = useRef<HTMLDivElement | null>(null);
+  // 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: unknown) => {
+      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 onMediaChange = useCallback(
+  const onPick = useCallback(
     (uri: string) => {
-      onChange(uri);
-      onCommit();
+      const next = fromPick(uri, latestValue.current);
+      if (next !== null) {
+        apply(next);
+      }
     },
-    [onChange, onCommit],
+    [fromPick, apply],
+  );
+
+  const onUrlSave = useCallback(
+    (url: string) => apply(fromUrl(url, latestValue.current)),
+    [fromUrl, apply],
   );
 
   const { callMedia, downloadMedia, loading } = useMediaControl({
     mediaType,
-    value: value ?? undefined,
-    onChange: onMediaChange,
+    onChange: onPick,
   });
 
-  const { handleReplace: handleCallMedia, handleDelete } = useMediaHandlers({
-    value,
-    callMedia,
-    downloadMedia,
-    onChange,
-    onCommit,
-    onStartEdit,
-    onCancel,
-  });
+  const handleCallMedia = useCallback(async () => {
+    onStartEdit?.();
+    applied.current = false;
+    await callMedia();
+    if (!applied.current && (commitOnPick || latestValue.current === null)) {
+      onCancel?.();
+    }
+  }, [onStartEdit, callMedia, commitOnPick, onCancel]);
 
-  const { isOpen, title, onOpen, onClose, onSave } = usePasteURLForm({
-    onChange: onMediaChange,
-  });
+  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: { title: string; value?: string }) => () => {
@@ -124,7 +188,13 @@ export function useCellMediaEdit({
     handleCallMedia,
     handleDelete,
     startEditAndOpenPasteUrl,
-    pasteUrlForm: { isOpen, title, onSave, handleClose: handleFormClose },
+    pasteUrlForm: {
+      isOpen,
+      title,
+      value: pasteUrlValue,
+      onSave,
+      handleClose: handleFormClose,
+    },
     handleContainerFocus,
     handleContainerBlur,
   };

package/src/components/media-gallery/form-media-gallery-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formmediagalleryfield1913190078";
+var _namespace_ = "formmediagalleryfield903826005";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formmediagalleryfield1913190078__root","container":"formmediagalleryfield1913190078__container","viewBox":"formmediagalleryfield1913190078__viewBox","addItemWrapper":"formmediagalleryfield1913190078__addItemWrapper","addItem":"formmediagalleryfield1913190078__addItem","overlay":"formmediagalleryfield1913190078__overlay","image":"formmediagalleryfield1913190078__image","previewImage":"formmediagalleryfield1913190078__previewImage","previewVideo":"formmediagalleryfield1913190078__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/src/components/media-image/media-image.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage3055775166";
+var _namespace_ = "mediaimage3328930349";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediaimage3055775166__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":"--mediaimage3055775166-from","to":"--mediaimage3055775166-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"}; 
 
 
 

package/src/components/media-image/overlays/overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "overlay3480378917";
+var _namespace_ = "overlay3008863944";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"overlay3480378917__root","iconOverlay":"overlay3480378917__iconOverlay"};
+export var classes = {"root":"overlay3008863944__root","iconOverlay":"overlay3008863944__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/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/src/components/media-image-field/cell-media-image-edit.st.css.ts

@@ -0,0 +1,25 @@
+// @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: import("@stylable/runtime").STFunction = _style_;
+export var st: import("@stylable/runtime").STFunction = _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"}; 
+
+
+
+