@wordpress/media-fields 0.1.1-next.738bb1424.0 → 0.2.0

package/build/media_thumbnail/view.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/media_thumbnail/view.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport {\n\t__experimentalTruncate as Truncate,\n\t__experimentalVStack as VStack,\n\tIcon,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport type { Attachment } from '@wordpress/core-data';\nimport { getFilename } from '@wordpress/url';\nimport type { DataViewRenderFieldProps } from '@wordpress/dataviews';\n/**\n * Internal dependencies\n */\nimport { getMediaTypeFromMimeType } from '../utils/get-media-type-from-mime-type';\nimport type { MediaItem } from '../types';\n\nfunction FallbackView( {\n\titem,\n\tfilename,\n}: {\n\titem: MediaItem;\n\tfilename: string;\n} ) {\n\treturn (\n\t\t<div className=\"dataviews-media-field__media-thumbnail\">\n\t\t\t<VStack\n\t\t\t\tjustify=\"center\"\n\t\t\t\talignment=\"center\"\n\t\t\t\tclassName=\"dataviews-media-field__media-thumbnail__stack\"\n\t\t\t\tspacing={ 0 }\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\tclassName=\"dataviews-media-field__media-thumbnail--icon\"\n\t\t\t\t\ticon={ getMediaTypeFromMimeType( item.mime_type ).icon }\n\t\t\t\t\tsize={ 24 }\n\t\t\t\t/>\n\t\t\t\t{ !! filename && (\n\t\t\t\t\t<div className=\"dataviews-media-field__media-thumbnail__filename\">\n\t\t\t\t\t\t<Truncate className=\"dataviews-media-field__media-thumbnail__filename__truncate\">\n\t\t\t\t\t\t\t{ filename }\n\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default function MediaThumbnailView( {\n\titem,\n\tconfig,\n}: DataViewRenderFieldProps< MediaItem > ) {\n\tconst [ imageError, setImageError ] = useState( false );\n\n\tconst _featuredMedia = useSelect(\n\t\t( select ) => {\n\t\t\t// Avoid the network request if it's not needed. `featured_media` is\n\t\t\t// 0 for images and media without featured media.\n\t\t\tif ( ! item.featured_media ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\treturn select( coreStore ).getEntityRecord< Attachment >(\n\t\t\t\t'postType',\n\t\t\t\t'attachment',\n\t\t\t\titem.featured_media\n\t\t\t);\n\t\t},\n\t\t[ item.featured_media ]\n\t);\n\tconst featuredMedia = item.featured_media ? _featuredMedia : item;\n\n\t// Fetching.\n\tif ( ! featuredMedia ) {\n\t\treturn null;\n\t}\n\n\tconst filename = getFilename( featuredMedia.source_url || '' );\n\n\t// Show fallback if image failed to load or if not an image type.\n\tif (\n\t\timageError ||\n\t\tgetMediaTypeFromMimeType( featuredMedia.mime_type ).type !== 'image'\n\t) {\n\t\treturn (\n\t\t\t<FallbackView item={ featuredMedia } filename={ filename || '' } />\n\t\t);\n\t}\n\n\treturn (\n\t\t<div className=\"dataviews-media-field__media-thumbnail\">\n\t\t\t<img\n\t\t\t\tclassName=\"dataviews-media-field__media-thumbnail--image\"\n\t\t\t\tsrc={ featuredMedia.source_url }\n\t\t\t\tsrcSet={\n\t\t\t\t\tfeaturedMedia?.media_details?.sizes\n\t\t\t\t\t\t? (\n\t\t\t\t\t\t\t\tObject.values(\n\t\t\t\t\t\t\t\t\tfeaturedMedia.media_details.sizes\n\t\t\t\t\t\t\t\t) as Array< {\n\t\t\t\t\t\t\t\t\tsource_url: string;\n\t\t\t\t\t\t\t\t\twidth: number;\n\t\t\t\t\t\t\t\t} >\n\t\t\t\t\t\t   )\n\t\t\t\t\t\t\t\t.map(\n\t\t\t\t\t\t\t\t\t( size ) =>\n\t\t\t\t\t\t\t\t\t\t`${ size.source_url } ${ size.width }w`\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t.join( ', ' )\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tsizes={ config?.sizes || '100vw' }\n\t\t\t\talt={ featuredMedia.alt_text || featuredMedia.title.raw }\n\t\t\t\tonError={ () => setImageError( true ) }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAA0B;AAC1B,uBAAmC;AACnC,wBAIO;AACP,qBAAyB;AAEzB,iBAA4B;AAK5B,2CAAyC;AAYtC;AATH,SAAS,aAAc;AAAA,EACtB;AAAA,EACA;AACD,GAGI;AACH,SACC,4CAAC,SAAI,WAAU,0CACd;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,WAAU;AAAA,MACV,SAAU;AAAA,MAEV;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,UAAO,+DAA0B,KAAK,SAAU,EAAE;AAAA,YAClD,MAAO;AAAA;AAAA,QACR;AAAA,QACE,CAAC,CAAE,YACJ,4CAAC,SAAI,WAAU,oDACd,sDAAC,kBAAAC,wBAAA,EAAS,WAAU,8DACjB,oBACH,GACD;AAAA;AAAA;AAAA,EAEF,GACD;AAEF;AAEe,SAAR,mBAAqC;AAAA,EAC3C;AAAA,EACA;AACD,GAA2C;AAC1C,QAAM,CAAE,YAAY,aAAc,QAAI,yBAAU,KAAM;AAEtD,QAAM,qBAAiB;AAAA,IACtB,CAAE,WAAY;AAGb,UAAK,CAAE,KAAK,gBAAiB;AAC5B;AAAA,MACD;AACA,aAAO,OAAQ,iBAAAC,KAAU,EAAE;AAAA,QAC1B;AAAA,QACA;AAAA,QACA,KAAK;AAAA,MACN;AAAA,IACD;AAAA,IACA,CAAE,KAAK,cAAe;AAAA,EACvB;AACA,QAAM,gBAAgB,KAAK,iBAAiB,iBAAiB;AAG7D,MAAK,CAAE,eAAgB;AACtB,WAAO;AAAA,EACR;AAEA,QAAM,eAAW,wBAAa,cAAc,cAAc,EAAG;AAG7D,MACC,kBACA,+DAA0B,cAAc,SAAU,EAAE,SAAS,SAC5D;AACD,WACC,4CAAC,gBAAa,MAAO,eAAgB,UAAW,YAAY,IAAK;AAAA,EAEnE;AAEA,SACC,4CAAC,SAAI,WAAU,0CACd;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,KAAM,cAAc;AAAA,MACpB,QACC,eAAe,eAAe,QAE3B,OAAO;AAAA,QACN,cAAc,cAAc;AAAA,MAC7B,EAKC;AAAA,QACA,CAAE,SACD,GAAI,KAAK,UAAW,IAAK,KAAK,KAAM;AAAA,MACtC,EACC,KAAM,IAAK,IACZ;AAAA,MAEJ,OAAQ,QAAQ,SAAS;AAAA,MACzB,KAAM,cAAc,YAAY,cAAc,MAAM;AAAA,MACpD,SAAU,MAAM,cAAe,IAAK;AAAA;AAAA,EACrC,GACD;AAEF;",
-  "names": ["VStack", "Truncate", "coreStore"]
-}

package/build-types/filename/test/index.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=index.test.d.ts.map

package/build-types/filename/test/index.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/filename/test/index.test.ts"],"names":[],"mappings":""}

package/build-types/filename/test/view.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=view.test.d.ts.map

package/build-types/filename/test/view.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"view.test.d.ts","sourceRoot":"","sources":["../../../src/filename/test/view.test.tsx"],"names":[],"mappings":""}

package/build-types/filesize/test/index.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=index.test.d.ts.map

package/build-types/filesize/test/index.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/filesize/test/index.test.tsx"],"names":[],"mappings":""}

package/build-types/media_dimensions/test/index.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=index.test.d.ts.map

package/build-types/media_dimensions/test/index.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/media_dimensions/test/index.test.ts"],"names":[],"mappings":""}

package/src/filename/test/index.test.ts

@@ -1,59 +0,0 @@
-/**
- * Internal dependencies
- */
-import filenameField from '../index';
-import type { MediaItem } from '../../types';
-
-describe( 'filenameField', () => {
-	it( 'has correct field configuration', () => {
-		expect( filenameField ).toMatchObject( {
-			id: 'filename',
-			type: 'text',
-			label: 'File name',
-			enableSorting: false,
-			filterBy: false,
-			readOnly: true,
-		} );
-	} );
-
-	describe( 'getValue', () => {
-		it( 'extracts filename from source_url', () => {
-			const item: Partial< MediaItem > = {
-				source_url:
-					'https://example.com/wp-content/uploads/2024/image.jpg',
-			};
-
-			const result = filenameField.getValue?.( {
-				item: item as MediaItem,
-			} );
-
-			expect( result ).toBe( 'image.jpg' );
-		} );
-
-		it( 'returns undefined when source_url is undefined', () => {
-			const item: Partial< MediaItem > = {};
-
-			const result = filenameField.getValue?.( {
-				item: item as MediaItem,
-			} );
-
-			expect( result ).toBeUndefined();
-		} );
-
-		it( 'returns undefined when source_url is empty string', () => {
-			const item: Partial< MediaItem > = {
-				source_url: '',
-			};
-
-			const result = filenameField.getValue?.( {
-				item: item as MediaItem,
-			} );
-
-			expect( result ).toBeUndefined();
-		} );
-	} );
-
-	it( 'has a render function', () => {
-		expect( filenameField.render ).toBeDefined();
-	} );
-} );

package/src/filename/test/view.test.tsx

@@ -1,87 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import type { NormalizedField } from '@wordpress/dataviews';
-
-/**
- * Internal dependencies
- */
-import FileNameView from '../view';
-import filenameField from '../index';
-import type { MediaItem } from '../../types';
-
-describe( 'FileNameView', () => {
-	describe( 'filename rendering', () => {
-		it( 'renders short filename (15 characters or less)', () => {
-			const item: Partial< MediaItem > = {
-				source_url: 'https://example.com/uploads/12345678901.jpg', // exactly 15 chars
-			};
-
-			render(
-				<FileNameView
-					item={ item as MediaItem }
-					field={ filenameField as NormalizedField< MediaItem > }
-				/>
-			);
-
-			// Verify the filename is visible to users
-			expect( screen.getByText( '12345678901.jpg' ) ).toBeInTheDocument();
-		} );
-
-		it( 'renders long filename (more than 15 characters)', () => {
-			const longFilename =
-				'very-long-filename-that-exceeds-fifteen-characters.jpg';
-			const item: Partial< MediaItem > = {
-				source_url: `https://example.com/uploads/${ longFilename }`,
-			};
-
-			render(
-				<FileNameView
-					item={ item as MediaItem }
-					field={ filenameField as NormalizedField< MediaItem > }
-				/>
-			);
-
-			// Verify the full filename text is accessible to users
-			// (the component handles truncation via Truncate/Tooltip, but the text is still present)
-			expect( screen.getByText( longFilename ) ).toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'edge cases', () => {
-		it( 'renders nothing when source_url is missing', () => {
-			const item: Partial< MediaItem > = {};
-
-			const { container } = render(
-				<FileNameView
-					item={ item as MediaItem }
-					field={ filenameField as NormalizedField< MediaItem > }
-				/>
-			);
-
-			// When there's no source_url, component should render nothing
-			expect( container ).toBeEmptyDOMElement();
-		} );
-
-		it( 'renders nothing when source_url is empty', () => {
-			const item: Partial< MediaItem > = {
-				source_url: '',
-			};
-
-			const { container } = render(
-				<FileNameView
-					item={ item as MediaItem }
-					field={ filenameField as NormalizedField< MediaItem > }
-				/>
-			);
-
-			// When source_url is empty, component should render nothing
-			expect( container ).toBeEmptyDOMElement();
-		} );
-	} );
-} );

package/src/filesize/test/index.test.tsx

@@ -1,107 +0,0 @@
-/**
- * Internal dependencies
- */
-import filesizeField from '../index';
-import type { MediaItem } from '../../types';
-
-describe( 'filesizeField', () => {
-	it( 'has correct field configuration', () => {
-		expect( filesizeField ).toMatchObject( {
-			id: 'filesize',
-			type: 'text',
-			label: 'File size',
-			enableSorting: false,
-			filterBy: false,
-			readOnly: true,
-		} );
-	} );
-
-	describe( 'getValue - byte formatting logic', () => {
-		it( 'returns empty string for 0 bytes due to truthy check', () => {
-			const item = {
-				media_details: {
-					filesize: 0,
-					sizes: {},
-				},
-			} as MediaItem;
-
-			const result = filesizeField.getValue?.( {
-				item,
-			} );
-
-			expect( result ).toBe( '' );
-		} );
-
-		it.each( [
-			[ 512, /^512\s+B$/, 'bytes (less than 1 KB)' ],
-			[ 1024 * 50, /^50\s+KB$/, '50 kilobytes' ],
-			[ 1024 * 1024 * 5, /^5\s+MB$/, '5 megabytes' ],
-			[ 1024 * 1024 * 1024 * 2.5, /^2\.5\s+GB$/, '2.5 gigabytes' ],
-			[ 1024 * 1024 * 1024 * 1024 * 1.5, /^1\.5\s+TB$/, '1.5 terabytes' ],
-			[
-				1024 * 1024 * 3.14159,
-				/^3\.14\s+MB$/,
-				'fractional sizes with proper decimals',
-			],
-			[ 1024, /^1\s+KB$/, 'boundary value (exactly 1 KB)' ],
-		] )(
-			'formats %s bytes correctly: %s',
-			( filesize, expected, description ) => {
-				const item = {
-					media_details: {
-						filesize,
-						sizes: {},
-					},
-				} as MediaItem;
-
-				const result = filesizeField.getValue?.( {
-					item,
-				} );
-
-				try {
-					expect( result ).toMatch( expected );
-				} catch ( error ) {
-					const message =
-						error instanceof Error
-							? error.message
-							: String( error );
-					throw new Error(
-						`Failed to format filesize (${ description }): ${ message }`
-					);
-				}
-			}
-		);
-
-		it.each( [
-			[ { media_details: { sizes: {} } }, 'when filesize is missing' ],
-			[ {}, 'when media_details is missing' ],
-		] )( 'returns empty string %s', ( item, description ) => {
-			const result = filesizeField.getValue?.( {
-				item: item as MediaItem,
-			} );
-
-			try {
-				expect( result ).toBe( '' );
-			} catch ( error ) {
-				const message =
-					error instanceof Error ? error.message : String( error );
-				throw new Error(
-					`Failed getValue test (${ description }): ${ message }`
-				);
-			}
-		} );
-	} );
-
-	describe( 'isVisible', () => {
-		it.each( [
-			[ { media_details: { filesize: 1024, sizes: {} } }, true ],
-			[ { media_details: { filesize: 0, sizes: {} } }, false ],
-			[ { media_details: { sizes: {} } }, false ],
-			[ {}, false ],
-		] )( 'returns %s for item %#', ( item, expected ) => {
-			const result = filesizeField.isVisible?.( item as MediaItem );
-
-			expect( result ).toBe( expected );
-		} );
-	} );
-} );

package/src/media_dimensions/test/index.test.ts

@@ -1,132 +0,0 @@
-/**
- * WordPress dependencies
- */
-import type { Attachment, Updatable } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import mediaDimensionsField from '../index';
-
-describe( 'mediaDimensionsField', () => {
-	it( 'has correct field configuration', () => {
-		expect( mediaDimensionsField ).toMatchObject( {
-			id: 'media_dimensions',
-			type: 'text',
-			label: 'Dimensions',
-			enableSorting: false,
-			filterBy: false,
-			readOnly: true,
-		} );
-	} );
-
-	describe( 'getValue - dimension formatting', () => {
-		it( 'formats dimensions with × separator', () => {
-			const item = {
-				media_details: { width: 1920, height: 1080, sizes: {} },
-			} as Updatable< Attachment >;
-
-			const result = mediaDimensionsField.getValue?.( {
-				item,
-			} );
-
-			expect( result ).toMatch( /1920\s*×\s*1080/ );
-		} );
-
-		it.each( [
-			[
-				{ media_details: { height: 1080, sizes: {} } },
-				'when width is missing',
-			],
-			[
-				{ media_details: { width: 1920, sizes: {} } },
-				'when height is missing',
-			],
-			[
-				{ media_details: { sizes: {} } },
-				'when both dimensions are missing',
-			],
-			[ {}, 'when media_details is missing' ],
-			[
-				{ media_details: { width: 0, height: 1080, sizes: {} } },
-				'when width is 0',
-			],
-			[
-				{ media_details: { width: 1920, height: 0, sizes: {} } },
-				'when height is 0',
-			],
-			[
-				{ media_details: { width: 0, height: 0, sizes: {} } },
-				'when both width and height are 0',
-			],
-		] )( 'returns empty string %s', ( item, description ) => {
-			const result = mediaDimensionsField.getValue?.( {
-				item: item as Updatable< Attachment >,
-			} );
-
-			try {
-				expect( result ).toBe( '' );
-			} catch ( error ) {
-				const message =
-					error instanceof Error ? error.message : String( error );
-				throw new Error(
-					`Failed getValue test (${ description }): ${ message }`
-				);
-			}
-		} );
-	} );
-
-	describe( 'isVisible', () => {
-		it.each( [
-			[
-				{ media_details: { width: 1920, height: 1080, sizes: {} } },
-				true,
-				'when both dimensions exist',
-			],
-			[
-				{ media_details: { height: 1080, sizes: {} } },
-				false,
-				'when width is missing',
-			],
-			[
-				{ media_details: { width: 1920, sizes: {} } },
-				false,
-				'when height is missing',
-			],
-			[
-				{ media_details: { sizes: {} } },
-				false,
-				'when both dimensions are missing',
-			],
-			[
-				{ media_details: { width: 0, height: 1080, sizes: {} } },
-				false,
-				'when width is 0 (due to truthy check)',
-			],
-			[
-				{ media_details: { width: 1920, height: 0, sizes: {} } },
-				false,
-				'when height is 0 (due to truthy check)',
-			],
-			[
-				{ media_details: { width: 0, height: 0, sizes: {} } },
-				false,
-				'when both width and height are 0',
-			],
-		] )( 'returns %s %s', ( item, expected, description ) => {
-			const result = mediaDimensionsField.isVisible?.(
-				item as Updatable< Attachment >
-			);
-
-			try {
-				expect( result ).toBe( expected );
-			} catch ( error ) {
-				const message =
-					error instanceof Error ? error.message : String( error );
-				throw new Error(
-					`Failed isVisible test (${ description }): ${ message }`
-				);
-			}
-		} );
-	} );
-} );