@wix/patterns-fields 1.29.0 → 1.30.0

package/src/components/document/index.ts

@@ -1,4 +1,6 @@
 export * from './document-view';
+export * from './cell-document-view';
+export * from './cell-document-edit';
 
 // NOTE: Heavy exports (FormDocumentField, DocumentControl, etc.) have been moved to './form' to prevent bundle bloat.
 // Import them explicitly: import { FormDocumentField } from '../fields/components/document/form';

package/src/components/document/utils.ts

@@ -2,6 +2,7 @@ export const openDocument = (url: string) => {
   const link = document.createElement('a');
   link.href = url;
   link.target = '_blank';
+  link.rel = 'noopener noreferrer';
   document.body.appendChild(link);
 
   link.click();

package/src/components/exclamation/exclamation.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "exclamation2676330691";
+var _namespace_ = "exclamation3539476362";
 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":"exclamation2676330691__root","exclamation":"exclamation2676330691__exclamation","actions":"exclamation2676330691__actions","action":"exclamation2676330691__action"};
+export var classes = {"root":"exclamation3539476362__root","exclamation":"exclamation3539476362__exclamation","actions":"exclamation3539476362__actions","action":"exclamation3539476362__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/highlighted-text/highlighted-text.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext2637065310";
+var _namespace_ = "highlightedtext3677604336";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"highlightedtext2637065310__root","substring":"highlightedtext2637065310__substring"};
-export var keyframes = {"highlighted":"highlightedtext2637065310__highlighted","highlighted-match":"highlightedtext2637065310__highlighted-match"}; 
+export var classes = {"root":"highlightedtext3677604336__root","substring":"highlightedtext3677604336__substring"};
+export var keyframes = {"highlighted":"highlightedtext3677604336__highlighted","highlighted-match":"highlightedtext3677604336__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/image/cell-image-edit.tsx

@@ -1,32 +1,25 @@
-import React, { useCallback, useRef } from 'react';
-import {
-  Box,
-  IconButton,
-  Loader,
-  PopoverMenu,
-  Tooltip,
-} from '@wix/design-system';
+import React from 'react';
+import { Box, IconButton, PopoverMenu, Tooltip } from '@wix/design-system';
 import {
   Add,
+  Delete,
+  Link,
   LinkSmall,
   MoreSmall,
   Replace,
-  Link,
-  Delete,
 } from '@wix/wix-ui-icons-common';
 import { MEDIA_TYPES } from '../../utils/media-utils';
-import { useTranslations, useCellEditKeyboard } from '../../hooks';
+import { useTranslations } from '../../hooks';
 import {
-  useMediaControl,
-  usePasteURLForm,
-  PasteURLForm,
+  useCellMediaEdit,
+  CellMediaEditShell,
   MediaFieldType,
 } from '../media-control';
 import { ImageThumbnail } from './image-thumbnail';
 import { ThumbnailReplaceOverlay } from './thumbnail-replace-overlay';
 
 export interface CellImageEditProps {
-  value: string | null | undefined;
+  value: string | null;
   onChange: (value: string | null) => void;
   onCommit: () => void;
   onCancel?: () => void;
@@ -49,200 +42,123 @@ export const CellImageEdit: React.FC<CellImageEditProps> = ({
   dataHook,
 }) => {
   const { t } = useTranslations();
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
-  const onMediaChange = useCallback(
-    (uri: string) => {
-      onChange(uri);
-      onCommit();
-    },
-    [onChange, onCommit],
-  );
 
-  const { callMedia, loading } = useMediaControl({
+  const mediaEdit = useCellMediaEdit({
     mediaType: MEDIA_TYPES.IMAGE,
-    value: value ?? undefined,
-    onChange: onMediaChange,
-  });
-
-  const handleCallMedia = useCallback(async () => {
-    onStartEdit?.();
-    const committed = await callMedia();
-    if (!committed) {
-      onCancel?.();
-    }
-  }, [onStartEdit, callMedia, onCancel]);
-
-  const pasteUrlTitle = t('CMS.image.replaceWithUrl.title');
-  const { isOpen, title, onOpen, onClose, onSave } = usePasteURLForm({
-    onChange: onMediaChange,
-  });
-
-  // When the paste-URL form is dismissed without saving, cancel the in-progress
-  // edit so isEditing returns to false and useClearFocusOnBlur works normally.
-  const handleFormClose = useCallback(() => {
-    onClose();
-    onCancel?.();
-  }, [onClose, onCancel]);
-
-  const handleOpenPasteUrl = useCallback(
-    (params: { title: string; value?: string }) => () => {
-      onStartEdit?.();
-      onOpen(params)();
-    },
-    [onStartEdit, onOpen],
-  );
-
-  const handleDelete = useCallback(() => {
-    onChange(null);
-    onCommit();
-  }, [onChange, onCommit]);
-
-  const { handleContainerFocus, handleContainerBlur } = useCellEditKeyboard({
-    containerRef,
+    value,
+    onChange,
+    onCommit,
     onCancel,
+    onStartEdit,
     inputRef,
   });
 
-  if (loading) {
-    return (
-      <Box
-        dataHook={dataHook}
-        verticalAlign="middle"
-        width="100%"
-        height="100%"
-        padding="0 8px"
-      >
-        <Loader size="tiny" />
-      </Box>
-    );
-  }
+  const openPasteUrl = mediaEdit.startEditAndOpenPasteUrl({
+    title: t('CMS.image.replaceWithUrl.title'),
+    value: value ?? undefined,
+  });
 
   return (
-    <div
-      ref={containerRef}
-      data-hook={dataHook}
-      style={{ width: '100%', height: '100%' }}
-      onFocus={handleContainerFocus}
-      onBlur={handleContainerBlur}
+    <CellMediaEditShell
+      dataHook={dataHook}
+      mediaEdit={mediaEdit}
+      value={value}
+      fieldType={MediaFieldType.image}
     >
-      <Box
-        align="space-between"
-        verticalAlign="middle"
-        height="100%"
-        padding="0 8px"
-        style={{ boxSizing: 'border-box' }}
-      >
-        {value ? (
-          /* Has value: clickable thumbnail button with replace overlay */
-          <Tooltip content={t('CMS.image.replace')} appendTo="window">
-            <Box>
-              <button
-                type="button"
-                data-hook="image-edit-thumbnail"
-                onClick={handleCallMedia}
-                style={{
-                  cursor: 'pointer',
-                  lineHeight: 0,
-                  position: 'relative',
-                  background: 'none',
-                  border: 'none',
-                  padding: 0,
-                }}
-              >
-                <ImageThumbnail value={value} />
-                <ThumbnailReplaceOverlay />
-              </button>
-            </Box>
-          </Tooltip>
-        ) : (
-          /* Empty: icon button opens media manager */
-          <Tooltip content={t('CMS.image.add')} appendTo="window">
-            <IconButton
-              size="tiny"
-              priority="secondary"
-              dataHook="image-edit-add-button"
-              onClick={handleCallMedia}
+      {value ? (
+        /* Has value: clickable thumbnail button with replace overlay */
+        <Tooltip content={t('CMS.image.replace')} appendTo="window">
+          <Box>
+            <button
+              type="button"
+              data-hook="image-edit-thumbnail"
+              onClick={mediaEdit.handleCallMedia}
+              style={{
+                cursor: 'pointer',
+                lineHeight: 0,
+                position: 'relative',
+                background: 'none',
+                border: 'none',
+                padding: 0,
+              }}
             >
-              <Add />
-            </IconButton>
-          </Tooltip>
-        )}
+              <ImageThumbnail value={value} />
+              <ThumbnailReplaceOverlay />
+            </button>
+          </Box>
+        </Tooltip>
+      ) : (
+        /* Empty: icon button opens media manager */
+        <Tooltip content={t('CMS.image.add')} appendTo="window">
+          <IconButton
+            size="tiny"
+            priority="secondary"
+            dataHook="image-edit-add-button"
+            onClick={mediaEdit.handleCallMedia}
+          >
+            <Add />
+          </IconButton>
+        </Tooltip>
+      )}
 
-        {value ? (
-          /* Has value: "..." menu with Replace / Replace with URL / Delete */
-          <PopoverMenu
-            textSize="small"
-            appendTo="window"
-            triggerElement={
-              <Tooltip
-                content={t('auto-patterns.fields.more_actions_tooltip')}
-                appendTo="window"
+      {value ? (
+        /* Has value: "..." menu with Replace / Replace with URL / Delete */
+        <PopoverMenu
+          textSize="small"
+          appendTo="window"
+          triggerElement={
+            <Tooltip
+              content={t('auto-patterns.fields.more_actions_tooltip')}
+              appendTo="window"
+            >
+              <IconButton
+                size="tiny"
+                priority="tertiary"
+                dataHook="image-edit-more-button"
               >
-                <IconButton
-                  size="tiny"
-                  priority="tertiary"
-                  dataHook="image-edit-more-button"
-                >
-                  <MoreSmall />
-                </IconButton>
-              </Tooltip>
-            }
+                <MoreSmall />
+              </IconButton>
+            </Tooltip>
+          }
+        >
+          <PopoverMenu.MenuItem
+            dataHook="image-edit-action-replace"
+            text={t('CMS.image.replace')}
+            prefixIcon={<Replace />}
+            onClick={mediaEdit.handleCallMedia}
+          />
+          <PopoverMenu.MenuItem
+            dataHook="image-edit-action-replace-url"
+            text={t('CMS.image.replaceWithUrl.button')}
+            prefixIcon={<Link />}
+            onClick={openPasteUrl}
+          />
+          <PopoverMenu.Divider />
+          <PopoverMenu.MenuItem
+            dataHook="image-edit-action-delete"
+            text={t('CMS.image.clear')}
+            skin="destructive"
+            prefixIcon={<Delete />}
+            onClick={mediaEdit.handleDelete}
+          />
+        </PopoverMenu>
+      ) : (
+        /* Empty: icon button opens paste-URL form */
+        <Tooltip
+          content={t('CMS.image.replaceWithUrl.button')}
+          appendTo="window"
+        >
+          <IconButton
+            size="tiny"
+            priority="tertiary"
+            dataHook="image-edit-paste-url-button"
+            onClick={openPasteUrl}
           >
-            <PopoverMenu.MenuItem
-              dataHook="image-edit-action-replace"
-              text={t('CMS.image.replace')}
-              prefixIcon={<Replace />}
-              onClick={handleCallMedia}
-            />
-            <PopoverMenu.MenuItem
-              dataHook="image-edit-action-replace-url"
-              text={t('CMS.image.replaceWithUrl.button')}
-              prefixIcon={<Link />}
-              onClick={handleOpenPasteUrl({
-                title: pasteUrlTitle,
-                value: value ?? undefined,
-              })}
-            />
-            <PopoverMenu.Divider />
-            <PopoverMenu.MenuItem
-              dataHook="image-edit-action-delete"
-              text={t('CMS.image.clear')}
-              skin="destructive"
-              prefixIcon={<Delete />}
-              onClick={handleDelete}
-            />
-          </PopoverMenu>
-        ) : (
-          /* Empty: icon button opens paste-URL form */
-          <Tooltip
-            content={t('CMS.image.replaceWithUrl.button')}
-            appendTo="window"
-          >
-            <IconButton
-              size="tiny"
-              priority="tertiary"
-              dataHook="image-edit-paste-url-button"
-              onClick={handleOpenPasteUrl({
-                title: pasteUrlTitle,
-                value: value ?? undefined,
-              })}
-            >
-              <LinkSmall />
-            </IconButton>
-          </Tooltip>
-        )}
-      </Box>
-
-      <PasteURLForm
-        title={title}
-        value={value ?? undefined}
-        show={isOpen}
-        closeModal={handleFormClose}
-        onSave={onSave}
-        fieldType={MediaFieldType.image}
-      />
-    </div>
+            <LinkSmall />
+          </IconButton>
+        </Tooltip>
+      )}
+    </CellMediaEditShell>
   );
 };
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay3386389409";
+var _namespace_ = "thumbnailreplaceoverlay4132621481";
 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":"thumbnailreplaceoverlay3386389409__root","icon":"thumbnailreplaceoverlay3386389409__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay4132621481__root","icon":"thumbnailreplaceoverlay4132621481__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -0,0 +1,4 @@
+.root {
+    width: 100%;
+    height: 100%;
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "cellmediaeditshell3249443726";
+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":"cellmediaeditshell3249443726__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Box, Loader } from '@wix/design-system';
+import type { BoxCssSizingProperty } from '@wix/design-system/dist/types/Box/Box.types';
+
+import { PasteURLForm, MediaFieldType } from './paste-url-form';
+import { classes } from './cell-media-edit-shell.st.css.js';
+import type { UseCellMediaEditResult } from './use-cell-media-edit';
+
+export interface CellMediaEditShellProps {
+  dataHook?: string;
+  /**
+   * The result of `useCellMediaEdit`; the shell reads containerRef, loading,
+   * the focus/blur handlers, and the pasteUrlForm props from it.
+   */
+  mediaEdit: Pick<
+    UseCellMediaEditResult,
+    | 'containerRef'
+    | 'loading'
+    | 'handleContainerFocus'
+    | '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;
+  /** Inner content — typically two slots: primary cell content + secondary actions. */
+  children: React.ReactNode;
+}
+
+/**
+ * Outer scaffolding shared by single-value media cell edit components.
+ *
+ * Renders the loading state, the focus-managed container (wired for
+ * `useCellEditKeyboard`), the inner flex Box, and the PasteURLForm modal at the
+ * end. Consumers supply only the inner primary/secondary controls via children.
+ */
+export const CellMediaEditShell: React.FC<CellMediaEditShellProps> = ({
+  dataHook,
+  mediaEdit,
+  value,
+  fieldType,
+  gap,
+  children,
+}) => {
+  const {
+    containerRef,
+    loading,
+    handleContainerFocus,
+    handleContainerBlur,
+    pasteUrlForm,
+  } = mediaEdit;
+
+  if (loading) {
+    return (
+      <Box
+        dataHook={dataHook}
+        verticalAlign="middle"
+        width="100%"
+        height="100%"
+        padding="0 8px"
+      >
+        <Loader dataHook="loader" size="tiny" />
+      </Box>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      data-hook={dataHook}
+      className={classes.root}
+      onFocus={handleContainerFocus}
+      onBlur={handleContainerBlur}
+    >
+      <Box
+        align="space-between"
+        verticalAlign="middle"
+        height="100%"
+        padding="0 8px"
+        gap={gap}
+        style={{ boxSizing: 'border-box' }}
+      >
+        {children}
+      </Box>
+
+      <PasteURLForm
+        title={pasteUrlForm.title}
+        value={value ?? undefined}
+        show={pasteUrlForm.isOpen}
+        closeModal={pasteUrlForm.handleClose}
+        onSave={pasteUrlForm.onSave}
+        fieldType={fieldType}
+      />
+    </div>
+  );
+};
+
+CellMediaEditShell.displayName = 'CellMediaEditShell';

package/src/components/media-control/index.ts

@@ -4,3 +4,5 @@ export * from './use-paste-url-form';
 export * from './use-document-delete';
 export * from './paste-url-button';
 export * from './paste-url-form';
+export * from './use-cell-media-edit';
+export * from './cell-media-edit-shell';

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_ = "pasteurlbutton564548303";
+var _namespace_ = "pasteurlbutton625213010";
 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":"pasteurlbutton564548303__root","iconButtonTooltip":"pasteurlbutton564548303__iconButtonTooltip","iconButton":"pasteurlbutton564548303__iconButton"};
+export var classes = {"root":"pasteurlbutton625213010__root","iconButtonTooltip":"pasteurlbutton625213010__iconButtonTooltip","iconButton":"pasteurlbutton625213010__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};