@wix/patterns-fields 1.116.0 → 1.118.0

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_ = "pasteurlbutton2330833856";
+var _namespace_ = "pasteurlbutton3407064295";
 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":"pasteurlbutton2330833856__root","iconButtonTooltip":"pasteurlbutton2330833856__iconButtonTooltip","iconButton":"pasteurlbutton2330833856__iconButton"};
+export var classes = {"root":"pasteurlbutton3407064295__root","iconButtonTooltip":"pasteurlbutton3407064295__iconButtonTooltip","iconButton":"pasteurlbutton3407064295__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_ = "formmediagalleryfield478233914";
+var _namespace_ = "formmediagalleryfield2708325978";
 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":"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":"formmediagalleryfield2708325978__root","container":"formmediagalleryfield2708325978__container","viewBox":"formmediagalleryfield2708325978__viewBox","addItemWrapper":"formmediagalleryfield2708325978__addItemWrapper","addItem":"formmediagalleryfield2708325978__addItem","overlay":"formmediagalleryfield2708325978__overlay","image":"formmediagalleryfield2708325978__image","previewImage":"formmediagalleryfield2708325978__previewImage","previewVideo":"formmediagalleryfield2708325978__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_ = "mediaimage815133103";
+var _namespace_ = "mediaimage2609312527";
 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":"mediaimage815133103__root"};
+export var classes = {"root":"mediaimage2609312527__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":"--mediaimage2609312527-from","to":"--mediaimage2609312527-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_ = "overlay538321121";
+var _namespace_ = "overlay2799147747";
 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":"overlay538321121__root","iconOverlay":"overlay538321121__iconOverlay"};
+export var classes = {"root":"overlay2799147747__root","iconOverlay":"overlay2799147747__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_ = "cellmediaimageedit4241529426";
+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":"cellmediaimageedit4241529426__root","view":"cellmediaimageedit4241529426__view","anchor":"cellmediaimageedit4241529426__anchor","anchorBox":"cellmediaimageedit4241529426__anchorBox","popoverContent":"cellmediaimageedit4241529426__popoverContent","image":"cellmediaimageedit4241529426__image","imageActions":"cellmediaimageedit4241529426__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"}; 
+
+
+
+