@wix/patterns-fields 1.58.0 → 1.60.0

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

@@ -1 +1 @@
-{"version":3,"file":"rich-text-editor.st.css.d.ts","sourceRoot":"","sources":["../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.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;;;;CAA8I,CAAC;AACjK,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;;;;;;;;;;CAAsb,CAAC"}
+{"version":3,"file":"rich-text-editor.st.css.d.ts","sourceRoot":"","sources":["../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.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;;;;CAA2I,CAAC;AAC9J,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;;;;;;;;;;CAAsb,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.st.css.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/toolbar/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;;;;;;;;;;;;;;;;;;CAA46B,CAAC;AAC/7B,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;;;;;;;;;;;;CAA0e,CAAC"}
+{"version":3,"file":"toolbar.st.css.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/toolbar/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;;;;;;;;;;;;;;;;;;CAA67B,CAAC;AACh9B,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;;;;;;;;;;;;CAA0e,CAAC"}

package/dist/types/utils/get-image-url.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-image-url.d.ts","sourceRoot":"","sources":["../../../src/utils/get-image-url.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,UAAW,MAAM,GAAG,SAAS,GAAG,IAAI,uBAU3D,CAAC;AAEF,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAOlD"}
+{"version":3,"file":"get-image-url.d.ts","sourceRoot":"","sources":["../../../src/utils/get-image-url.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,UAAW,MAAM,GAAG,SAAS,GAAG,IAAI,uBA0B3D,CAAC;AAUF,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAOlD"}

package/dist/types/utils/media-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media-utils.d.ts","sourceRoot":"","sources":["../../../src/utils/media-utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA+BH,eAAO,MAAM,gBAAgB,QAAS,MAAM,KAAG,OAK9C,CAAC;AAEF,eAAO,MAAM,aAAa,QAAS,MAAM,KAAG,OAK3C,CAAC;AAEF,eAAO,MAAM,aAAa,QAAS,MAAM,KAAG,OAK3C,CAAC;AAEF,eAAO,MAAM,aAAa,QAAS,MAAM,KAAG,OAK3C,CAAC;AAEF,eAAO,MAAM,cAAc,QAAS,MAAM,KAAG,OAK5C,CAAC;AAiBF;;;GAGG;AACH,eAAO,MAAM,aAAa,QAAS,MAAM,KAAG,MAsC3C,CAAC;AAEF,eAAO,MAAM,kBAAkB,QAAS,MAAM,SAc7C,CAAC;AAGF,oBAAY,WAAW;IACrB,SAAS,cAAc;IACvB,KAAK,cAAc;IACnB,KAAK,mBAAmB;IACxB,KAAK,UAAU;IACf,OAAO,gBAAgB;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,SACxB,MAAM,GAAG,SAAS,QAClB,UAAU,GAAG,OAAO,KACzB,OAeF,CAAC"}
+{"version":3,"file":"media-utils.d.ts","sourceRoot":"","sources":["../../../src/utils/media-utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA+BH,eAAO,MAAM,gBAAgB,QAAS,MAAM,KAAG,OAK9C,CAAC;AAEF,eAAO,MAAM,aAAa,QAAS,MAAM,KAAG,OAK3C,CAAC;AAEF,eAAO,MAAM,aAAa,QAAS,MAAM,KAAG,OAK3C,CAAC;AAEF,eAAO,MAAM,aAAa,QAAS,MAAM,KAAG,OAK3C,CAAC;AAEF,eAAO,MAAM,cAAc,QAAS,MAAM,KAAG,OAK5C,CAAC;AAiBF;;;GAGG;AACH,eAAO,MAAM,aAAa,QAAS,MAAM,KAAG,MAyC3C,CAAC;AAEF,eAAO,MAAM,kBAAkB,QAAS,MAAM,SAc7C,CAAC;AAGF,oBAAY,WAAW;IACrB,SAAS,cAAc;IACvB,KAAK,cAAc;IACnB,KAAK,mBAAmB;IACxB,KAAK,UAAU;IACf,OAAO,gBAAgB;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,SACxB,MAAM,GAAG,SAAS,QAClB,UAAU,GAAG,OAAO,KACzB,OAeF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns-fields",
-  "version": "1.58.0",
+  "version": "1.60.0",
   "license": "UNLICENSED",
   "author": {
     "name": "Kobi",
@@ -113,11 +113,11 @@
     "@wix/atlas": "^1.0.35",
     "@wix/data": "^1.0.323",
     "@wix/media": "^1.0.231",
-    "@wix/patterns-fields-utils": "1.39.0",
+    "@wix/patterns-fields-utils": "1.41.0",
     "@wix/rich-content": "1.0.37",
     "@wix/ricos": "^11.2.0",
     "@wix/sdk": "^1.17.2",
-    "@wix/wix-ui-icons-common": "^3.100.0",
+    "@wix/wix-ui-icons-common": "^3.187.0",
     "color": "^2.0.1",
     "draft-js": "^0.11.7",
     "draft-js-export-html": "^1.4.1",
@@ -142,8 +142,8 @@
     "@types/lodash": "^4.17.20",
     "@types/react": "^16.14.68",
     "@wix/babel-cli": "^1.11.0",
-    "@wix/bex-core": "2.336.0",
-    "@wix/design-system": "^1.285.0",
+    "@wix/bex-core": "2.338.0",
+    "@wix/design-system": "^1.307.0",
     "@wix/eslint-config-yoshi": "^6.74.0",
     "@wix/jest-yoshi-preset": "^6.74.0",
     "@wix/wix-data-items-common": "^1.0.270",
@@ -157,7 +157,7 @@
   },
   "peerDependencies": {
     "@wix/bex-core": "^2.284.0",
-    "@wix/design-system": "^1.204.0",
+    "@wix/design-system": "^1.307.0",
     "mobx": "^6.1.8",
     "react": "^16.8.0 || ^18.0.0"
   },
@@ -195,5 +195,5 @@
       "type": "yoshi-flow-library"
     }
   },
-  "falconPackageHash": "58245af016a10110e5a49403f6ed9963454d84acd0b51d33ca6a5416"
+  "falconPackageHash": "c17451e9af4e15006dffafbde2c0ad643055c44b38699b466e43dabe"
 }

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { CellAudioView } from '../../../components/audio/cell-audio-view';
+import { PatternsFieldsTestProvider } from '../../../testkit/patterns-fields-test-provider';
+
+const AUDIO_URI = 'wix:audio://v1/abc123~mv2.mp3/my%20song.mp3#duration=180';
+
+describe('CellAudioView', () => {
+  it('renders the media title in a Tag', () => {
+    render(<CellAudioView value={AUDIO_URI} dataHook="audio-view" />, {
+      wrapper: PatternsFieldsTestProvider,
+    });
+
+    expect(screen.getByTestId('audio-cell-tag')).toHaveTextContent(
+      'my song.mp3',
+    );
+  });
+
+  it('renders nothing when value is null', () => {
+    render(<CellAudioView value={null} dataHook="audio-view" />, {
+      wrapper: PatternsFieldsTestProvider,
+    });
+
+    expect(screen.queryByTestId('audio-cell-tag')).not.toBeInTheDocument();
+  });
+
+  /**
+   * A table column whose stored value isn't a media URI used to throw
+   * `Objects are not valid as a React child` from the Tag — during render, so it
+   * took down the whole table rather than the one cell.
+   */
+  it.each([
+    ['a Date', new Date('2026-03-04T00:00:00.000Z')],
+    ['an object', { uri: AUDIO_URI }],
+  ])('renders an empty Tag rather than throwing for %s', (_label, value) => {
+    expect(() =>
+      render(
+        <CellAudioView
+          value={value as unknown as string}
+          dataHook="audio-view"
+        />,
+        { wrapper: PatternsFieldsTestProvider },
+      ),
+    ).not.toThrow();
+
+    expect(screen.getByTestId('audio-cell-tag')).toHaveTextContent('');
+  });
+});

package/src/__tests__/components/date-input/form-date-input.spec.tsx

@@ -34,6 +34,14 @@ describe('FormDateInput field', () => {
     expect(await driver.tk.datePickerExists()).toBe(true);
   });
 
+  // Building the picker's initial value goes through toISOString, which throws
+  // on an unparsable date — during render, so it takes the page down.
+  it('renders an empty picker for a stored value that is not a date', async () => {
+    const driver = setup({ initialValue: 'not a date' });
+
+    expect(await driver.tk.datePickerExists()).toBe(true);
+  });
+
   it('marks the field as required when validation.required is true', async () => {
     const driver = setup({
       field: makeField({ type: 'DATE', validation: { required: true } }),

package/src/__tests__/components/image/form-image-input.spec.tsx

@@ -42,6 +42,16 @@ describe('FormImageInput field', () => {
     );
   });
 
+  it('renders the image when the value is a bare media id', async () => {
+    const driver = setup({
+      initialValue: 'dafa67_9aa1f03ed7274a7795d2f2e18a245ac7~mv2.jpg',
+    });
+
+    expect(await driver.tk.getImageUrl()).toContain(
+      'dafa67_9aa1f03ed7274a7795d2f2e18a245ac7~mv2.jpg',
+    );
+  });
+
   it('marks the field as required when validation.required is true', async () => {
     const driver = setup({
       field: makeField({ type: 'IMAGE', validation: { required: true } }),

package/src/__tests__/components/reference/form-multi-reference.spec.tsx

@@ -30,6 +30,8 @@ interface HarnessProps {
   items?: FormReferenceItem[];
   searchValue?: string;
   onSearch?: (q: string) => void;
+  fixedFooter?: React.ReactNode;
+  onOpenCollection?: () => void;
 }
 
 const Harness = ({
@@ -38,6 +40,8 @@ const Harness = ({
   items = ITEMS,
   searchValue,
   onSearch = () => {},
+  fixedFooter,
+  onOpenCollection,
 }: HarnessProps) => {
   const Inner = () => {
     const methods = useForm<FieldValues>({
@@ -61,6 +65,8 @@ const Harness = ({
           displayField="name"
           searchValue={searchValue}
           onSearch={onSearch}
+          fixedFooter={fixedFooter}
+          onOpenCollection={onOpenCollection}
         />
         <span data-hook="error-out">{error ?? ''}</span>
         <button type="submit" data-hook="submit" />
@@ -121,6 +127,19 @@ describe('FormMultiReference', () => {
     ).toBeTruthy();
   });
 
+  // The label is written when the reference is picked, from the referenced
+  // item's display field. An empty one must not render an empty tag.
+  it('falls back to the untitled label for a reference with no display value', () => {
+    const r = renderField({
+      initialValue: [{ _id: 'p1', name: '' }],
+    });
+    const tag = r.baseElement.querySelector(
+      `[data-hook="multi-reference-tag-${FIELD.id}-p1"]`,
+    );
+
+    expect(tag?.textContent).toBeTruthy();
+  });
+
   it('reports typing to the caller via onSearch', () => {
     const onSearch = jest.fn();
     const r = renderField({ onSearch });
@@ -150,4 +169,86 @@ describe('FormMultiReference', () => {
     await submit(r);
     expect(errorText(r)).toBe('');
   });
+
+  describe('dropdown options', () => {
+    const openDropdown = (r: RenderResult) => {
+      fireEvent.focus(input(r));
+      fireEvent.change(input(r), { target: { value: 'A' } });
+    };
+
+    const optionTitles = () =>
+      Array.from(
+        document.body.querySelectorAll('[data-hook="list-item-select-title"]'),
+      ).map((el) => el.textContent);
+
+    // MultiSelect hides options that already have a tag, so a picked reference
+    // stops being offered. Pinned because picking it again would be a no-op.
+    it('leaves out references that are already selected', () => {
+      const r = renderField({
+        initialValue: [{ _id: 'p1', name: 'Ada Lovelace' }],
+      });
+      openDropdown(r);
+
+      expect(optionTitles()).toEqual(['Alan Turing']);
+    });
+
+    it('offers every reference when none is selected', () => {
+      const r = renderField();
+      openDropdown(r);
+
+      expect(optionTitles()).toEqual(['Ada Lovelace', 'Alan Turing']);
+    });
+
+    it('adds a tag for the picked reference', () => {
+      const r = renderField();
+      openDropdown(r);
+
+      fireEvent.click(
+        document.body.querySelectorAll('[data-hook="list-item-select"]')[0],
+      );
+
+      expect(
+        r.baseElement.querySelector(
+          `[data-hook="multi-reference-tag-${FIELD.id}-p1"]`,
+        ),
+      ).toBeTruthy();
+    });
+  });
+
+  describe('dropdown footer', () => {
+    // The footer is portal-mounted with the dropdown, so open it before asserting.
+    const openDropdown = (r: RenderResult) => {
+      fireEvent.focus(input(r));
+      fireEvent.change(input(r), { target: { value: 'A' } });
+    };
+
+    const openCollectionAction = (r: RenderResult) =>
+      r.baseElement.querySelector(
+        '[data-hook="reference-open-collection"]',
+      ) as HTMLElement | null;
+
+    it('renders no open-collection action without an onOpenCollection', () => {
+      const r = renderField();
+      openDropdown(r);
+      expect(openCollectionAction(r)).toBeNull();
+    });
+
+    it('renders the open-collection action and calls it on click', () => {
+      const onOpenCollection = jest.fn();
+      const r = renderField({ onOpenCollection });
+      openDropdown(r);
+      fireEvent.click(openCollectionAction(r)!);
+      expect(onOpenCollection).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders the caller fixedFooter', () => {
+      const r = renderField({
+        fixedFooter: <span data-hook="custom-footer">loading</span>,
+      });
+      openDropdown(r);
+      expect(
+        r.baseElement.querySelector('[data-hook="custom-footer"]'),
+      ).toBeTruthy();
+    });
+  });
 });

package/src/__tests__/components/reference/form-reference.spec.tsx

@@ -33,6 +33,8 @@ interface HarnessProps {
   items?: FormReferenceItem[];
   searchValue?: string;
   onSearch?: (q: string) => void;
+  fixedFooter?: React.ReactNode;
+  onOpenCollection?: () => void;
 }
 
 const Harness = ({
@@ -41,6 +43,8 @@ const Harness = ({
   items = ITEMS,
   searchValue,
   onSearch = () => {},
+  fixedFooter,
+  onOpenCollection,
 }: HarnessProps) => {
   const Inner = () => {
     const methods = useForm<FieldValues>({
@@ -64,6 +68,8 @@ const Harness = ({
           displayField="name"
           searchValue={searchValue}
           onSearch={onSearch}
+          fixedFooter={fixedFooter}
+          onOpenCollection={onOpenCollection}
         />
         <span data-hook="error-out">{error ?? ''}</span>
         <button type="submit" data-hook="submit" />
@@ -112,6 +118,14 @@ describe('FormReference', () => {
     expect(input(r).value).toBe('Ada Lovelace');
   });
 
+  // The label is written when the reference is picked, from the referenced
+  // item's display field. If that field is empty the input must still read as
+  // picked rather than blank.
+  it('falls back to the untitled label when the selected reference has none', () => {
+    const r = renderField({ initialValue: { _id: 'p1', name: '' } });
+    expect(input(r).value).toBeTruthy();
+  });
+
   it('prefers the caller search value over the selected label', () => {
     const r = renderField({
       initialValue: { _id: 'p1', name: 'Ada Lovelace' },
@@ -127,6 +141,42 @@ describe('FormReference', () => {
     expect(onSearch).toHaveBeenCalledWith('Al');
   });
 
+  describe('dropdown options', () => {
+    const openDropdown = (r: RenderResult) => {
+      fireEvent.focus(input(r));
+      fireEvent.click(input(r));
+    };
+
+    const selectedOptionTitle = () =>
+      document.body
+        .querySelector('[data-hook="list-item-select"][data-selected="true"]')
+        ?.querySelector('[data-hook="list-item-select-title"]')?.textContent;
+
+    // The dropdown tracks its own picks only, so the selection has to be handed
+    // to it — otherwise a value loaded from the entity shows no selected row.
+    it('marks the option held by the form value as selected', () => {
+      const r = renderField({
+        initialValue: { _id: 'p2', name: 'Alan Turing' },
+      });
+      openDropdown(r);
+
+      expect(selectedOptionTitle()).toBe('Alan Turing');
+    });
+
+    it('marks the picked option as selected', () => {
+      const r = renderField();
+      openDropdown(r);
+
+      fireEvent.click(
+        document.body.querySelectorAll('[data-hook="list-item-select"]')[0],
+      );
+      openDropdown(r);
+
+      expect(input(r).value).toBe('Ada Lovelace');
+      expect(selectedOptionTitle()).toBe('Ada Lovelace');
+    });
+  });
+
   it('marks the field required when validation.required is set', () => {
     const r = renderField({ field: requiredField() });
     const asterisk = r.baseElement.querySelector(
@@ -155,4 +205,41 @@ describe('FormReference', () => {
     await submit(r);
     expect(isActiveElement(input(r))).toBe(true);
   });
+
+  describe('dropdown footer', () => {
+    // The footer is portal-mounted with the dropdown, so open it before asserting.
+    const openDropdown = (r: RenderResult) => {
+      fireEvent.focus(input(r));
+      fireEvent.change(input(r), { target: { value: 'A' } });
+    };
+
+    const openCollectionAction = (r: RenderResult) =>
+      r.baseElement.querySelector(
+        '[data-hook="reference-open-collection"]',
+      ) as HTMLElement | null;
+
+    it('renders no open-collection action without an onOpenCollection', () => {
+      const r = renderField();
+      openDropdown(r);
+      expect(openCollectionAction(r)).toBeNull();
+    });
+
+    it('renders the open-collection action and calls it on click', () => {
+      const onOpenCollection = jest.fn();
+      const r = renderField({ onOpenCollection });
+      openDropdown(r);
+      fireEvent.click(openCollectionAction(r)!);
+      expect(onOpenCollection).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders the caller fixedFooter', () => {
+      const r = renderField({
+        fixedFooter: <span data-hook="custom-footer">loading</span>,
+      });
+      openDropdown(r);
+      expect(
+        r.baseElement.querySelector('[data-hook="custom-footer"]'),
+      ).toBeTruthy();
+    });
+  });
 });

package/src/__tests__/utils/get-image-url.spec.ts

@@ -0,0 +1,48 @@
+import { getImageUrl } from '../../utils/get-image-url';
+
+const MEDIA_ID = 'dafa67_9aa1f03ed7274a7795d2f2e18a245ac7~mv2.jpg';
+const WIX_STATIC = `https://static.wixstatic.com/media/${MEDIA_ID}`;
+
+describe('getImageUrl', () => {
+  it('returns undefined for empty values', () => {
+    expect(getImageUrl(undefined)).toBeUndefined();
+    expect(getImageUrl(null)).toBeUndefined();
+    expect(getImageUrl('')).toBeUndefined();
+  });
+
+  it('resolves a wix media URI', () => {
+    expect(
+      getImageUrl(
+        `wix:image://v1/${MEDIA_ID}/cute%20cat.jpg#originWidth=1024&originHeight=1024`,
+      ),
+    ).toBe(WIX_STATIC);
+  });
+
+  it('resolves a legacy media URI (no wix: prefix)', () => {
+    expect(getImageUrl(`image://v1/${MEDIA_ID}/cute%20cat.jpg`)).toBe(
+      WIX_STATIC,
+    );
+  });
+
+  it('resolves a bare media id', () => {
+    expect(getImageUrl(MEDIA_ID)).toBe(WIX_STATIC);
+  });
+
+  it('returns http(s), data and blob urls as-is', () => {
+    const httpUrl = `${WIX_STATIC}/v1/fill/w_100,h_100/cat.jpg`;
+    const dataUrl = 'data:image/png;base64,iVBORw0KGgo=';
+    const blobUrl = 'blob:http://localhost:3000/abc-123';
+
+    expect(getImageUrl(httpUrl)).toBe(httpUrl);
+    expect(getImageUrl(dataUrl)).toBe(dataUrl);
+    expect(getImageUrl(blobUrl)).toBe(blobUrl);
+  });
+
+  it('returns undefined for blank values', () => {
+    expect(getImageUrl('   ')).toBeUndefined();
+  });
+
+  it('does not throw on values that are not media', () => {
+    expect(() => getImageUrl('not an image')).not.toThrow();
+  });
+});

package/src/__tests__/utils/media-utils.spec.ts

@@ -0,0 +1,33 @@
+import { getMediaTitle } from '../../utils/media-utils';
+
+const AUDIO_URI = 'wix:audio://v1/abc123~mv2.mp3/my%20song.mp3#duration=180';
+
+describe('getMediaTitle', () => {
+  it('extracts the filename from a wix media URI', () => {
+    expect(getMediaTitle(AUDIO_URI)).toBe('my song.mp3');
+  });
+
+  it('returns the value as-is for a plain string', () => {
+    expect(getMediaTitle('some-title')).toBe('some-title');
+  });
+
+  it('returns an empty string for empty values', () => {
+    expect(getMediaTitle('')).toBe('');
+    expect(getMediaTitle(null as unknown as string)).toBe('');
+    expect(getMediaTitle(undefined as unknown as string)).toBe('');
+  });
+
+  /**
+   * The media views render this result as a React child. Returning a non-string
+   * threw `Objects are not valid as a React child` out of render — one
+   * out-of-contract stored value took the whole page down.
+   */
+  it.each([
+    ['a Date', new Date('2026-03-04T00:00:00.000Z')],
+    ['an object', { uri: AUDIO_URI }],
+    ['an array', [AUDIO_URI]],
+    ['a number', 42],
+  ])('returns an empty string for %s', (_label, value) => {
+    expect(getMediaTitle(value as unknown as string)).toBe('');
+  });
+});

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput3833852092";
+var _namespace_ = "addressinput1795213691";
 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":"addressinput3833852092__root","tableAddressInput":"addressinput3833852092__tableAddressInput"};
+export var classes = {"root":"addressinput1795213691__root","tableAddressInput":"addressinput1795213691__tableAddressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box } from '@wix/design-system';
-import { LocationSmall } from '@wix/wix-ui-icons-common';
+import { LocationSmall } from '@wix/wix-ui-icons-common/lazy';
 import type { Address } from '../../../types/address';
 import { AddressView } from './address-view';
 

package/src/components/audio/actions/actions-button/actions-button.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 
 import type { IconButtonProps } from '@wix/design-system';
 import { IconButton } from '@wix/design-system';
-import { More as MoreIcon } from '@wix/wix-ui-icons-common';
+import { More as MoreIcon } from '@wix/wix-ui-icons-common/lazy';
 
 import type { ActionsMenuProps } from '../actions-menu';
 import { ActionsMenu } from '../actions-menu';

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_ = "actionsmenu1323400524";
+var _namespace_ = "actionsmenu1674420474";
 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":"actionsmenu1323400524__root","action":"actionsmenu1323400524__action"};
+export var classes = {"root":"actionsmenu1674420474__root","action":"actionsmenu1674420474__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/actions/audio-actions.tsx

@@ -4,7 +4,7 @@ import {
   Download,
   ExternalLink,
   Replace,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 
 import { ACTIONS_MENU_DIVIDER, type ActionsMenuItem } from './actions-menu';
 

package/src/components/audio/audio-field/audio-view.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { MusicSmall as MusicSmallIcon } from '@wix/wix-ui-icons-common';
+import { MusicSmall as MusicSmallIcon } from '@wix/wix-ui-icons-common/lazy';
 
 import { getSchemaType, getMediaTitle } from '../../../utils';
 import { smallTooltipCommonProps } from '../../../utils/tooltip';

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_ = "formaudiofield3116593580";
+var _namespace_ = "formaudiofield1412917675";
 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":"formaudiofield3116593580__root","addItem":"formaudiofield3116593580__addItem","mediaTitle":"formaudiofield3116593580__mediaTitle"};
+export var classes = {"root":"formaudiofield1412917675__root","addItem":"formaudiofield1412917675__addItem","mediaTitle":"formaudiofield1412917675__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_ = "audioplayer4190226408";
+var _namespace_ = "audioplayer564550236";
 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":"audioplayer4190226408__root"};
+export var classes = {"root":"audioplayer564550236__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { Box, IconButton, Tag, Tooltip } from '@wix/design-system';
-import { Add, MoreSmall, MusicSmall } from '@wix/wix-ui-icons-common';
+import { Add, MoreSmall, MusicSmall } from '@wix/wix-ui-icons-common/lazy';
 
 import { MEDIA_TYPES, getMediaTitle } from '../../utils';
 import { useTranslations } from '../../hooks';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Tag } from '@wix/design-system';
-import { MusicSmall } from '@wix/wix-ui-icons-common';
+import { MusicSmall } from '@wix/wix-ui-icons-common/lazy';
 import { getMediaTitle } from '../../utils';
 
 export interface CellAudioViewProps {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellcolorview3170761269";
+var _namespace_ = "cellcolorview2277716910";
 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":"cellcolorview3170761269__root","hashPrefix":"cellcolorview3170761269__hashPrefix"};
+export var classes = {"root":"cellcolorview2277716910__root","hashPrefix":"cellcolorview2277716910__hashPrefix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};