@wix/patterns-fields 1.29.0 → 1.30.0

package/dist/types/components/media-control/use-cell-media-edit.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import { MEDIA_TYPES } from '../../utils/media-utils';
+export interface UseCellMediaEditParams {
+    mediaType: MEDIA_TYPES;
+    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>;
+}
+export interface UseCellMediaEditResult {
+    containerRef: React.MutableRefObject<HTMLDivElement | null>;
+    loading: boolean;
+    callMedia: () => Promise<boolean>;
+    downloadMedia: (uri: string) => void;
+    /** Opens the media manager. If the user cancels, propagates onCancel. */
+    handleCallMedia: () => Promise<void>;
+    /** Clears the cell and commits. */
+    handleDelete: () => void;
+    /**
+     * Curried opener: pass the modal's `title` / preset `value`, get back the
+     * click handler. Also signals onStartEdit so the cell keeps focus while the
+     * modal is up.
+     */
+    startEditAndOpenPasteUrl: (params: {
+        title: string;
+        value?: string;
+    }) => () => void;
+    pasteUrlForm: {
+        isOpen: boolean;
+        title: string;
+        onSave: (value: string) => void;
+        /** onClose composed with onCancel — call from PasteURLForm.closeModal. */
+        handleClose: () => void;
+    };
+    handleContainerFocus: () => void;
+    handleContainerBlur: (e: React.FocusEvent) => void;
+}
+/**
+ * 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 declare function useCellMediaEdit({ mediaType, value, onChange, onCommit, onCancel, onStartEdit, inputRef, }: UseCellMediaEditParams): UseCellMediaEditResult;
+//# sourceMappingURL=use-cell-media-edit.d.ts.map

package/dist/types/components/media-control/use-cell-media-edit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-cell-media-edit.d.ts","sourceRoot":"","sources":["../../../../src/components/media-control/use-cell-media-edit.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAMtD,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,WAAW,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CAC7E;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5D,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;IAClC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,yEAAyE;IACzE,eAAe,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,mCAAmC;IACnC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB;;;;OAIG;IACH,wBAAwB,EAAE,CAAC,MAAM,EAAE;QACjC,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,KAAK,MAAM,IAAI,CAAC;IACjB,YAAY,EAAE;QACZ,MAAM,EAAE,OAAO,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAChC,0EAA0E;QAC1E,WAAW,EAAE,MAAM,IAAI,CAAC;KACzB,CAAC;IACF,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,mBAAmB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACpD;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,QAAQ,GACT,EAAE,sBAAsB,GAAG,sBAAsB,CAkEjD"}

package/dist/types/components/media-tag/web-media-tag/media-tag.st.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media-tag.st.css.d.ts","sourceRoot":"","sources":["../../../../../src/components/media-tag/web-media-tag/media-tag.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;CAAqC,CAAC;AACxD,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI;;;CAAkF,CAAC"}
+{"version":3,"file":"media-tag.st.css.d.ts","sourceRoot":"","sources":["../../../../../src/components/media-tag/web-media-tag/media-tag.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;CAAsC,CAAC;AACzD,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI;;;CAAkF,CAAC"}

package/dist/types/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rich-content-form-input.st.css.d.ts","sourceRoot":"","sources":["../../../../../../src/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;CAAkG,CAAC;AACrH,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI;;;;;;;CAAsW,CAAC"}
+{"version":3,"file":"rich-content-form-input.st.css.d.ts","sourceRoot":"","sources":["../../../../../../src/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;CAAoG,CAAC;AACvH,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI;;;;;;;CAAwW,CAAC"}

package/dist/types/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rich-content-toolbar.st.css.d.ts","sourceRoot":"","sources":["../../../../../../src/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;;CAAgK,CAAC;AACnL,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI,IAAK,CAAC"}
+{"version":3,"file":"rich-content-toolbar.st.css.d.ts","sourceRoot":"","sources":["../../../../../../src/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;;CAA6J,CAAC;AAChL,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI,IAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns-fields",
-  "version": "1.29.0",
+  "version": "1.30.0",
   "license": "UNLICENSED",
   "author": {
     "name": "Kobi",
@@ -191,5 +191,5 @@
       "type": "yoshi-flow-library"
     }
   },
-  "falconPackageHash": "a1f197a2e7877031e44bcfe68e8d0bc3baa200a1bfffcf794f160cdc"
+  "falconPackageHash": "8ef43854b6e8475a461f6c5eec1b31e1891da97c1efa52a4149ee71a"
 }

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { CellDocumentEdit } from '../../../components/document/cell-document-edit';
+import { PatternsFieldsTestProvider } from '../../../testkit/patterns-fields-test-provider';
+
+jest.mock('@wix/bex-core/react', () => ({
+  ...jest.requireActual('@wix/bex-core/react'),
+  useWixPatternsContainer: () => ({
+    environment: { msid: 'test-meta-site-id' },
+  }),
+}));
+
+const mockCallMedia = jest.fn();
+const mockDownloadMedia = jest.fn();
+const mockOnOpen = jest.fn(() => jest.fn());
+let mockLoading = false;
+
+jest.mock('../../../components/media-control/use-media-control', () => ({
+  useMediaControl: () => ({
+    callMedia: mockCallMedia,
+    downloadMedia: mockDownloadMedia,
+    loading: mockLoading,
+  }),
+}));
+
+jest.mock('../../../components/media-control/use-paste-url-form', () => ({
+  usePasteURLForm: () => ({
+    isOpen: false,
+    title: '',
+    onOpen: mockOnOpen,
+    onClose: jest.fn(),
+    onSave: jest.fn(),
+  }),
+}));
+
+const DOC_URI =
+  'wix:document://v1/ugd/fefc9f_d8295aad65e0419fb9301388ef94369c.pdf/wix-pdf.pdf';
+
+describe('CellDocumentEdit', () => {
+  beforeEach(() => {
+    mockLoading = false;
+  });
+
+  const setup = (
+    value: string | null,
+    fieldId = 'document-edit-test-col',
+  ) =>
+    render(
+      <CellDocumentEdit
+        value={value}
+        onChange={jest.fn()}
+        onCommit={jest.fn()}
+        onCancel={jest.fn()}
+        dataHook="edit"
+        fieldId={fieldId}
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+
+  it('renders the Tag with the caller-provided fieldId', () => {
+    setup(DOC_URI, 'document-edit-col-1');
+    expect(screen.getByTestId('document-edit-tag').id).toBe(
+      'document-edit-col-1',
+    );
+  });
+
+  it('renders add button when value is null', () => {
+    setup(null);
+    expect(
+      screen.getByTestId('document-edit-add-button'),
+    ).toBeInTheDocument();
+    expect(screen.queryByTestId('document-edit-tag')).not.toBeInTheDocument();
+  });
+
+  it('exposes the Loader via data-hook="loader" inside the edit container while loading (Edit.uni.driver isLoading() contract)', () => {
+    mockLoading = true;
+    setup(DOC_URI);
+
+    const container = screen.getByTestId('edit');
+    expect(container.querySelector('[data-hook="loader"]')).not.toBeNull();
+  });
+
+  it('icon-only buttons have an accessible name (aria-label) in both empty and populated states', () => {
+    setup(null);
+    expect(
+      screen.getByTestId('document-edit-add-button').getAttribute('aria-label'),
+    ).toBeTruthy();
+    expect(
+      screen
+        .getByTestId('document-edit-paste-url-button')
+        .getAttribute('aria-label'),
+    ).toBeTruthy();
+
+    setup(DOC_URI);
+    expect(
+      screen
+        .getByTestId('document-edit-more-button')
+        .getAttribute('aria-label'),
+    ).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { CellDocumentView } from '../../../components/document/cell-document-view';
+import { PatternsFieldsTestProvider } from '../../../testkit/patterns-fields-test-provider';
+
+const DOC_URI =
+  'wix:document://v1/ugd/fefc9f_d8295aad65e0419fb9301388ef94369c.pdf/wix-pdf.pdf';
+
+describe('CellDocumentView', () => {
+  it('renders the Tag with the caller-provided fieldId', () => {
+    render(
+      <PatternsFieldsTestProvider>
+        <CellDocumentView
+          value={DOC_URI}
+          dataHook="a"
+          fieldId="col-1-row-1"
+        />
+        <CellDocumentView
+          value={DOC_URI}
+          dataHook="b"
+          fieldId="col-1-row-2"
+        />
+      </PatternsFieldsTestProvider>,
+    );
+    const ids = screen
+      .getAllByTestId('cell-document-tag')
+      .map((t) => t.id);
+    expect(ids).toEqual(['col-1-row-1', 'col-1-row-2']);
+  });
+
+  it('renders nothing when value is null', () => {
+    render(
+      <CellDocumentView value={null} dataHook="view" fieldId="any" />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    expect(screen.queryByTestId('view')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('cell-document-tag')).not.toBeInTheDocument();
+  });
+});

package/src/__tests__/components/document/utils.spec.ts

@@ -0,0 +1,28 @@
+import { openDocument } from '../../../components/document/utils';
+
+describe('openDocument', () => {
+  it('opens with rel="noopener noreferrer" to prevent tabnabbing', () => {
+    const created: HTMLAnchorElement[] = [];
+    const realCreateElement = document.createElement.bind(document);
+    const spy = jest
+      .spyOn(document, 'createElement')
+      .mockImplementation((tag: string) => {
+        const el = realCreateElement(tag);
+        if (tag === 'a') {
+          created.push(el as HTMLAnchorElement);
+          (el as HTMLAnchorElement).click = jest.fn();
+        }
+        return el;
+      });
+
+    openDocument('https://example.com/file.pdf');
+
+    expect(created).toHaveLength(1);
+    const link = created[0];
+    expect(link.rel).toBe('noopener noreferrer');
+    expect(link.target).toBe('_blank');
+    expect(link.click).toHaveBeenCalled();
+
+    spy.mockRestore();
+  });
+});

package/src/assets/locale/messages_en.json

@@ -1,14 +1,14 @@
 {
-  "CMS.document.add.button.text": "Add Document",
-  "CMS.document.addMore.button.text": "Add Document",
-  "CMS.document.action.open": "Open",
-  "CMS.document.action.download": "Download",
-  "CMS.document.action.replace": "Replace",
+  "CMS.document.add.button.text": "Add file",
+  "CMS.document.addMore.button.text": "Add file",
+  "CMS.document.action.open": "Open file",
+  "CMS.document.action.download": "Download file",
+  "CMS.document.action.replace": "Choose file",
   "CMS.document.action.replaceWithUrl": "Replace with URL",
-  "CMS.document.action.delete": "Delete",
-  "CMS.document.pasteUrl.button": "Paste URL",
-  "CMS.document.pasteUrl.title": "Paste document URL",
-  "CMS.document.replaceWithUrl.title": "Replace with URL",
+  "CMS.document.action.delete": "Delete file",
+  "CMS.document.pasteUrl.button": "Add file link (URL)",
+  "CMS.document.pasteUrl.title": "Add file link (URL)",
+  "CMS.document.replaceWithUrl.title": "Add file link (URL)",
   "CMS.document.delete.title": "Delete \"{filename}\"?",
   "CMS.document.delete.confirm": "Delete",
   "CMS.document.delete.cancel": "Cancel",

package/src/components/address/input/address-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput4170739501";
+var _namespace_ = "addressinput1106002573";
 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":"addressinput4170739501__root","tableAddressInput":"addressinput4170739501__tableAddressInput"};
+export var classes = {"root":"addressinput1106002573__root","tableAddressInput":"addressinput1106002573__tableAddressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/actions/actions-menu/actions-menu.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "actionsmenu2215267763";
+var _namespace_ = "actionsmenu2271857068";
 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":"actionsmenu2215267763__root","action":"actionsmenu2215267763__action"};
+export var classes = {"root":"actionsmenu2271857068__root","action":"actionsmenu2271857068__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formaudiofield16737968";
+var _namespace_ = "formaudiofield1284110851";
 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":"formaudiofield16737968__root","addItem":"formaudiofield16737968__addItem","mediaTitle":"formaudiofield16737968__mediaTitle"};
+export var classes = {"root":"formaudiofield1284110851__root","addItem":"formaudiofield1284110851__addItem","mediaTitle":"formaudiofield1284110851__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-player/audio-player.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "audioplayer1690888432";
+var _namespace_ = "audioplayer3613609519";
 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":"audioplayer1690888432__root"};
+export var classes = {"root":"audioplayer3613609519__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/color-view/color-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview592337046";
+var _namespace_ = "colorview1018072753";
 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":"colorview592337046__root","view":"colorview592337046__view","fillPreview":"colorview592337046__fillPreview"};
+export var classes = {"root":"colorview1018072753__root","view":"colorview1018072753__view","fillPreview":"colorview1018072753__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/delete-dialog/delete-dialog.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog3203528919";
+var _namespace_ = "deletedialog2116833939";
 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":"deletedialog3203528919__root","layout":"deletedialog3203528919__layout"};
+export var classes = {"root":"deletedialog2116833939__root","layout":"deletedialog2116833939__layout"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "formdocumentfield2858188729";
+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":"formdocumentfield2858188729__root","viewWrapper":"formdocumentfield2858188729__viewWrapper","textWidth":"formdocumentfield2858188729__textWidth","documentLoader":"formdocumentfield2858188729__documentLoader","addDocument":"formdocumentfield2858188729__addDocument","addItemWrapper":"formdocumentfield2858188729__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 = {};