@wix/patterns-fields 1.28.0 → 1.30.0

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

@@ -0,0 +1,196 @@
+import React from 'react';
+import { Box, IconButton, PopoverMenu, Tag, Tooltip } from '@wix/design-system';
+import {
+  Add,
+  Delete,
+  DocumentSmall,
+  Download,
+  ExternalLink,
+  Link,
+  LinkSmall,
+  MoreSmall,
+  Replace,
+} from '@wix/wix-ui-icons-common';
+import { getMediaTitle, MEDIA_TYPES } from '../../utils/media-utils';
+import { getMediaURL } from '../../auto-field-types';
+import { useTranslations } from '../../hooks';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import {
+  useCellMediaEdit,
+  CellMediaEditShell,
+  MediaFieldType,
+} from '../media-control';
+import { openDocument } from './utils';
+
+export interface CellDocumentEditProps {
+  value: string | null;
+  onChange: (value: string | null) => void;
+  onCommit: () => void;
+  onCancel?: () => void;
+  /**
+   * Called before opening external UI (media manager / paste-URL form) so the
+   * table can set isEditing=true and protect cell focus while the modal is open.
+   */
+  onStartEdit?: () => void;
+  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;
+  dataHook?: string;
+  /**
+   * Stable DOM id for the Tag. WDS Tag requires `id` to be present; callers are
+   * responsible for ensuring uniqueness (e.g., derive from columnId).
+   */
+  fieldId: string;
+}
+
+export const CellDocumentEdit: React.FC<CellDocumentEditProps> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  onStartEdit,
+  inputRef,
+  dataHook,
+  fieldId,
+}) => {
+  const { t } = useTranslations();
+  const msid = useWixPatternsContainer()?.environment?.msid;
+
+  const mediaEdit = useCellMediaEdit({
+    mediaType: MEDIA_TYPES.ALL_MEDIA,
+    value,
+    onChange,
+    onCommit,
+    onCancel,
+    onStartEdit,
+    inputRef,
+  });
+
+  const pasteUrlTitle = value
+    ? t('CMS.document.replaceWithUrl.title')
+    : t('CMS.document.pasteUrl.title');
+
+  const openPasteUrl = mediaEdit.startEditAndOpenPasteUrl({
+    title: pasteUrlTitle,
+    value: value ?? undefined,
+  });
+
+  const handleOpenDocument = () => {
+    if (!value) {
+      return;
+    }
+    openDocument(getMediaURL(value, msid));
+  };
+
+  const handleDownload = () => {
+    if (!value) {
+      return;
+    }
+    mediaEdit.downloadMedia(value);
+  };
+
+  return (
+    <CellMediaEditShell
+      dataHook={dataHook}
+      mediaEdit={mediaEdit}
+      value={value}
+      fieldType={MediaFieldType.document}
+      gap="SP1"
+    >
+      {value ? (
+        <Box minWidth="0" style={{ flex: '1 1 auto' }}>
+          <Tag
+            id={fieldId}
+            dataHook="document-edit-tag"
+            removable={false}
+            thumb={<DocumentSmall />}
+            size="small"
+            maxWidth="100%"
+          >
+            {getMediaTitle(value)}
+          </Tag>
+        </Box>
+      ) : (
+        <Tooltip content={t('CMS.document.add.button.text')} appendTo="window">
+          <IconButton
+            size="tiny"
+            priority="secondary"
+            dataHook="document-edit-add-button"
+            ariaLabel={t('CMS.document.add.button.text')}
+            onClick={mediaEdit.handleCallMedia}
+          >
+            <Add />
+          </IconButton>
+        </Tooltip>
+      )}
+
+      {value ? (
+        <PopoverMenu
+          textSize="small"
+          appendTo="window"
+          triggerElement={
+            <Tooltip
+              content={t('auto-patterns.fields.more_actions_tooltip')}
+              appendTo="window"
+            >
+              <IconButton
+                size="tiny"
+                priority="tertiary"
+                dataHook="document-edit-more-button"
+                ariaLabel={t('auto-patterns.fields.more_actions_tooltip')}
+              >
+                <MoreSmall />
+              </IconButton>
+            </Tooltip>
+          }
+        >
+          <PopoverMenu.MenuItem
+            dataHook="document-edit-action-replace"
+            text={t('CMS.document.action.replace')}
+            prefixIcon={<Replace />}
+            onClick={mediaEdit.handleCallMedia}
+          />
+          <PopoverMenu.MenuItem
+            dataHook="document-edit-action-replace-url"
+            text={t('CMS.document.action.replaceWithUrl')}
+            prefixIcon={<Link />}
+            onClick={openPasteUrl}
+          />
+          <PopoverMenu.Divider />
+          <PopoverMenu.MenuItem
+            dataHook="document-edit-action-open"
+            text={t('CMS.document.action.open')}
+            prefixIcon={<ExternalLink />}
+            onClick={handleOpenDocument}
+          />
+          <PopoverMenu.MenuItem
+            dataHook="document-edit-action-download"
+            text={t('CMS.document.action.download')}
+            prefixIcon={<Download />}
+            onClick={handleDownload}
+          />
+          <PopoverMenu.Divider />
+          <PopoverMenu.MenuItem
+            dataHook="document-edit-action-delete"
+            text={t('CMS.document.action.delete')}
+            skin="destructive"
+            prefixIcon={<Delete />}
+            onClick={mediaEdit.handleDelete}
+          />
+        </PopoverMenu>
+      ) : (
+        <Tooltip content={t('CMS.document.pasteUrl.button')} appendTo="window">
+          <IconButton
+            size="tiny"
+            priority="tertiary"
+            dataHook="document-edit-paste-url-button"
+            ariaLabel={t('CMS.document.pasteUrl.button')}
+            onClick={openPasteUrl}
+          >
+            <LinkSmall />
+          </IconButton>
+        </Tooltip>
+      )}
+    </CellMediaEditShell>
+  );
+};
+
+CellDocumentEdit.displayName = 'CellDocumentEdit';

package/src/components/document/cell-document-view.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Box, Tag } from '@wix/design-system';
+import { DocumentSmall } from '@wix/wix-ui-icons-common';
+
+import { getMediaTitle } from '../../utils/media-utils';
+
+export interface CellDocumentViewProps {
+  value: string | null | undefined;
+  dataHook?: string;
+  /**
+   * Stable DOM id for the Tag. WDS Tag requires `id` to be present; callers are
+   * responsible for ensuring uniqueness (e.g., derive from columnId + rowKey).
+   */
+  fieldId: string;
+}
+
+export const CellDocumentView: React.FC<CellDocumentViewProps> = ({
+  value,
+  dataHook,
+  fieldId,
+}) => {
+  if (!value) {
+    return null;
+  }
+
+  return (
+    <Box
+      dataHook={dataHook}
+      verticalAlign="middle"
+      padding="0 8px"
+      height="100%"
+      width="100%"
+      minWidth="0"
+    >
+      <Tag
+        id={fieldId}
+        dataHook="cell-document-tag"
+        removable={false}
+        thumb={<DocumentSmall />}
+        size="small"
+        maxWidth="100%"
+      >
+        {getMediaTitle(value)}
+      </Tag>
+    </Box>
+  );
+};
+
+CellDocumentView.displayName = 'CellDocumentView';

package/src/components/document/form-document-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield2704345605";
+var _namespace_ = "formdocumentfield3905880661";
 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":"formdocumentfield2704345605__root","viewWrapper":"formdocumentfield2704345605__viewWrapper","textWidth":"formdocumentfield2704345605__textWidth","documentLoader":"formdocumentfield2704345605__documentLoader","addDocument":"formdocumentfield2704345605__addDocument","addItemWrapper":"formdocumentfield2704345605__addItemWrapper"};
+export var classes = {"root":"formdocumentfield3905880661__root","viewWrapper":"formdocumentfield3905880661__viewWrapper","textWidth":"formdocumentfield3905880661__textWidth","documentLoader":"formdocumentfield3905880661__documentLoader","addDocument":"formdocumentfield3905880661__addDocument","addItemWrapper":"formdocumentfield3905880661__addItemWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "exclamation3211065829";
+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":"exclamation3211065829__root","exclamation":"exclamation3211065829__exclamation","actions":"exclamation3211065829__actions","action":"exclamation3211065829__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_ = "highlightedtext1118078999";
+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":"highlightedtext1118078999__root","substring":"highlightedtext1118078999__substring"};
-export var keyframes = {"highlighted":"highlightedtext1118078999__highlighted","highlighted-match":"highlightedtext1118078999__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_ = "thumbnailreplaceoverlay2563000771";
+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":"thumbnailreplaceoverlay2563000771__root","icon":"thumbnailreplaceoverlay2563000771__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay4132621481__root","icon":"thumbnailreplaceoverlay4132621481__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};