@wordpress/media-fields 0.13.0 → 0.13.2-next.v.202606191442.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+## 0.13.1 (2026-06-16)
+
+## 0.13.0 (2026-06-10)
+
+### Code Quality
+
+-   Add missing `@types/react` dependency. [#78882](https://github.com/WordPress/gutenberg/pull/78882).

package/build/date_added/index.cjs

@@ -24,7 +24,6 @@ __export(date_added_exports, {
 });
 module.exports = __toCommonJS(date_added_exports);
 var import_i18n = require("@wordpress/i18n");
-var import_date = require("@wordpress/date");
 var dateAddedField = {
   id: "date",
   type: "datetime",
@@ -32,9 +31,6 @@ var dateAddedField = {
   filterBy: {
     operators: ["before", "after"]
   },
-  format: {
-    datetime: (0, import_date.getSettings)().formats.datetimeAbbreviated
-  },
   readOnly: true
 };
 var date_added_default = dateAddedField;

package/build/date_added/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/date_added/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { getSettings } from '@wordpress/date';\nimport type { Field } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\nimport type { MediaItem } from '../types';\n\nconst dateAddedField: Partial< Field< MediaItem > > = {\n\tid: 'date',\n\ttype: 'datetime',\n\tlabel: __( 'Date added' ),\n\tfilterBy: {\n\t\toperators: [ 'before', 'after' ],\n\t},\n\tformat: {\n\t\tdatetime: getSettings().formats.datetimeAbbreviated,\n\t},\n\treadOnly: true,\n};\n\nexport default dateAddedField;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,kBAA4B;AAQ5B,IAAM,iBAAgD;AAAA,EACrD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,WAAO,gBAAI,YAAa;AAAA,EACxB,UAAU;AAAA,IACT,WAAW,CAAE,UAAU,OAAQ;AAAA,EAChC;AAAA,EACA,QAAQ;AAAA,IACP,cAAU,yBAAY,EAAE,QAAQ;AAAA,EACjC;AAAA,EACA,UAAU;AACX;AAEA,IAAO,qBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport type { Field } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\nimport type { MediaItem } from '../types';\n\nconst dateAddedField: Partial< Field< MediaItem > > = {\n\tid: 'date',\n\ttype: 'datetime',\n\tlabel: __( 'Date added' ),\n\tfilterBy: {\n\t\toperators: [ 'before', 'after' ],\n\t},\n\treadOnly: true,\n};\n\nexport default dateAddedField;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AAQnB,IAAM,iBAAgD;AAAA,EACrD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,WAAO,gBAAI,YAAa;AAAA,EACxB,UAAU;AAAA,IACT,WAAW,CAAE,UAAU,OAAQ;AAAA,EAChC;AAAA,EACA,UAAU;AACX;AAEA,IAAO,qBAAQ;",
   "names": []
 }

package/build/date_modified/index.cjs

@@ -24,7 +24,6 @@ __export(date_modified_exports, {
 });
 module.exports = __toCommonJS(date_modified_exports);
 var import_i18n = require("@wordpress/i18n");
-var import_date = require("@wordpress/date");
 var dateModifiedField = {
   id: "modified",
   type: "datetime",
@@ -32,9 +31,6 @@ var dateModifiedField = {
   filterBy: {
     operators: ["before", "after"]
   },
-  format: {
-    datetime: (0, import_date.getSettings)().formats.datetimeAbbreviated
-  },
   readOnly: true
 };
 var date_modified_default = dateModifiedField;

package/build/date_modified/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/date_modified/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { getSettings } from '@wordpress/date';\nimport type { Field } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\nimport type { MediaItem } from '../types';\n\nconst dateModifiedField: Partial< Field< MediaItem > > = {\n\tid: 'modified',\n\ttype: 'datetime',\n\tlabel: __( 'Date modified' ),\n\tfilterBy: {\n\t\toperators: [ 'before', 'after' ],\n\t},\n\tformat: {\n\t\tdatetime: getSettings().formats.datetimeAbbreviated,\n\t},\n\treadOnly: true,\n};\n\nexport default dateModifiedField;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,kBAA4B;AAQ5B,IAAM,oBAAmD;AAAA,EACxD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,WAAO,gBAAI,eAAgB;AAAA,EAC3B,UAAU;AAAA,IACT,WAAW,CAAE,UAAU,OAAQ;AAAA,EAChC;AAAA,EACA,QAAQ;AAAA,IACP,cAAU,yBAAY,EAAE,QAAQ;AAAA,EACjC;AAAA,EACA,UAAU;AACX;AAEA,IAAO,wBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport type { Field } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\nimport type { MediaItem } from '../types';\n\nconst dateModifiedField: Partial< Field< MediaItem > > = {\n\tid: 'modified',\n\ttype: 'datetime',\n\tlabel: __( 'Date modified' ),\n\tfilterBy: {\n\t\toperators: [ 'before', 'after' ],\n\t},\n\treadOnly: true,\n};\n\nexport default dateModifiedField;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AAQnB,IAAM,oBAAmD;AAAA,EACxD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,WAAO,gBAAI,eAAgB;AAAA,EAC3B,UAAU;AAAA,IACT,WAAW,CAAE,UAAU,OAAQ;AAAA,EAChC;AAAA,EACA,UAAU;AACX;AAEA,IAAO,wBAAQ;",
   "names": []
 }

package/build/filename/view.cjs

@@ -23,9 +23,9 @@ __export(view_exports, {
   default: () => FileNameView
 });
 module.exports = __toCommonJS(view_exports);
-var import_components = require("@wordpress/components");
 var import_element = require("@wordpress/element");
 var import_url = require("@wordpress/url");
+var import_ui = require("@wordpress/ui");
 var import_jsx_runtime = require("react/jsx-runtime");
 var TRUNCATE_LENGTH = 15;
 function FileNameView({
@@ -41,6 +41,14 @@ function FileNameView({
   if (fileName.length <= TRUNCATE_LENGTH) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dataviews-media-field__filename", children: fileName });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Tooltip, { text: fileName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dataviews-media-field__filename", tabIndex: -1, children: fileName }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Tooltip.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui.Tooltip.Trigger,
+      {
+        render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dataviews-media-field__filename", children: fileName })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Tooltip.Popup, { children: fileName })
+  ] });
 }
 //# sourceMappingURL=view.cjs.map

package/build/filename/view.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/filename/view.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Tooltip as WCTooltip } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { getFilename } from '@wordpress/url';\nimport type { DataViewRenderFieldProps } from '@wordpress/dataviews';\n/**\n * Internal dependencies\n */\nimport type { MediaItem } from '../types';\n\n// Proxy threshold for \"long enough that the cell will visually truncate\" \u2014\n// used to decide whether to wrap the filename in a Tooltip showing the full\n// name on hover. Visual truncation itself is handled in CSS.\nconst TRUNCATE_LENGTH = 15;\n\nexport default function FileNameView( {\n\titem,\n}: DataViewRenderFieldProps< MediaItem > ) {\n\tconst fileName = useMemo(\n\t\t() => ( item?.source_url ? getFilename( item.source_url ) : null ),\n\t\t[ item?.source_url ]\n\t);\n\n\tif ( ! fileName ) {\n\t\treturn '';\n\t}\n\n\tif ( fileName.length <= TRUNCATE_LENGTH ) {\n\t\treturn (\n\t\t\t<span className=\"dataviews-media-field__filename\">\n\t\t\t\t{ fileName }\n\t\t\t</span>\n\t\t);\n\t}\n\n\t// `tabIndex={-1}` keeps the Tooltip anchor out of the keyboard tab order:\n\t// Ariakit's `useFocusable` (via TooltipAnchor) preserves an explicit\n\t// `tabIndex` on non-natively-focusable elements rather than defaulting it\n\t// to `0`. Hover-only reveal is intentional \u2014 the full filename text is\n\t// already in the DOM for assistive technology reading the row.\n\treturn (\n\t\t<WCTooltip text={ fileName }>\n\t\t\t<span className=\"dataviews-media-field__filename\" tabIndex={ -1 }>\n\t\t\t\t{ fileName }\n\t\t\t</span>\n\t\t</WCTooltip>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAqC;AACrC,qBAAwB;AACxB,iBAA4B;AA0BzB;AAhBH,IAAM,kBAAkB;AAET,SAAR,aAA+B;AAAA,EACrC;AACD,GAA2C;AAC1C,QAAM,eAAW;AAAA,IAChB,MAAQ,MAAM,iBAAa,wBAAa,KAAK,UAAW,IAAI;AAAA,IAC5D,CAAE,MAAM,UAAW;AAAA,EACpB;AAEA,MAAK,CAAE,UAAW;AACjB,WAAO;AAAA,EACR;AAEA,MAAK,SAAS,UAAU,iBAAkB;AACzC,WACC,4CAAC,UAAK,WAAU,mCACb,oBACH;AAAA,EAEF;AAOA,SACC,4CAAC,kBAAAA,SAAA,EAAU,MAAO,UACjB,sDAAC,UAAK,WAAU,mCAAkC,UAAW,IAC1D,oBACH,GACD;AAEF;",
-  "names": ["WCTooltip"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { getFilename } from '@wordpress/url';\nimport type { DataViewRenderFieldProps } from '@wordpress/dataviews';\nimport { Tooltip } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type { MediaItem } from '../types';\n\n// Proxy threshold for \"long enough that the cell will visually truncate\" —\n// used to decide whether to wrap the filename in a Tooltip showing the full\n// name on hover. Visual truncation itself is handled in CSS.\nconst TRUNCATE_LENGTH = 15;\n\nexport default function FileNameView( {\n\titem,\n}: DataViewRenderFieldProps< MediaItem > ) {\n\tconst fileName = useMemo(\n\t\t() => ( item?.source_url ? getFilename( item.source_url ) : null ),\n\t\t[ item?.source_url ]\n\t);\n\n\tif ( ! fileName ) {\n\t\treturn '';\n\t}\n\n\tif ( fileName.length <= TRUNCATE_LENGTH ) {\n\t\treturn (\n\t\t\t<span className=\"dataviews-media-field__filename\">\n\t\t\t\t{ fileName }\n\t\t\t</span>\n\t\t);\n\t}\n\n\t// The full filename is always in the DOM, so assistive tech gets it\n\t// regardless. The Tooltip aids mouse users where the cell visually clips\n\t// (DataViews layouts); in a non-truncating context like the DataForm the\n\t// name wraps in full, making it redundant but harmless.\n\treturn (\n\t\t<Tooltip.Root>\n\t\t\t<Tooltip.Trigger\n\t\t\t\trender={\n\t\t\t\t\t<span className=\"dataviews-media-field__filename\">\n\t\t\t\t\t\t{ fileName }\n\t\t\t\t\t</span>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Tooltip.Popup>{ fileName }</Tooltip.Popup>\n\t\t</Tooltip.Root>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAwB;AACxB,iBAA4B;AAE5B,gBAAwB;AA0BrB;AAhBH,IAAM,kBAAkB;AAET,SAAR,aAA+B;AAAA,EACrC;AACD,GAA2C;AAC1C,QAAM,eAAW;AAAA,IAChB,MAAQ,MAAM,iBAAa,wBAAa,KAAK,UAAW,IAAI;AAAA,IAC5D,CAAE,MAAM,UAAW;AAAA,EACpB;AAEA,MAAK,CAAE,UAAW;AACjB,WAAO;AAAA,EACR;AAEA,MAAK,SAAS,UAAU,iBAAkB;AACzC,WACC,4CAAC,UAAK,WAAU,mCACb,oBACH;AAAA,EAEF;AAMA,SACC,6CAAC,kBAAQ,MAAR,EACA;AAAA;AAAA,MAAC,kBAAQ;AAAA,MAAR;AAAA,QACA,QACC,4CAAC,UAAK,WAAU,mCACb,oBACH;AAAA;AAAA,IAEF;AAAA,IACA,4CAAC,kBAAQ,OAAR,EAAgB,oBAAU;AAAA,KAC5B;AAEF;",
+  "names": []
 }

package/build/media_dimensions/index.cjs

@@ -30,7 +30,7 @@ var mediaDimensionsField = {
   label: (0, import_i18n.__)("Dimensions"),
   getValue: ({ item }) => item?.media_details?.width && item?.media_details?.height ? (0, import_i18n.sprintf)(
     // translators: 1: Width. 2: Height.
-    (0, import_i18n._x)("%1$s \xD7 %2$s", "image dimensions"),
+    (0, import_i18n._x)("%1$s × %2$s", "image dimensions"),
     item?.media_details?.width?.toString(),
     item?.media_details?.height?.toString()
   ) : "",

package/build/media_dimensions/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/media_dimensions/index.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x, sprintf } from '@wordpress/i18n';\nimport type { Attachment, Updatable } from '@wordpress/core-data';\nimport type { Field } from '@wordpress/dataviews';\n\nconst mediaDimensionsField: Partial< Field< Updatable< Attachment > > > = {\n\tid: 'media_dimensions',\n\ttype: 'text',\n\tlabel: __( 'Dimensions' ),\n\tgetValue: ( { item } ) =>\n\t\titem?.media_details?.width && item?.media_details?.height\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: 1: Width. 2: Height.\n\t\t\t\t\t_x( '%1$s \u00D7 %2$s', 'image dimensions' ),\n\t\t\t\t\titem?.media_details?.width?.toString(),\n\t\t\t\t\titem?.media_details?.height?.toString()\n\t\t\t  )\n\t\t\t: '',\n\tisVisible: ( item ) => {\n\t\treturn !! ( item?.media_details?.width && item?.media_details?.height );\n\t},\n\tenableSorting: false,\n\tfilterBy: false,\n\treadOnly: true,\n};\n\nexport default mediaDimensionsField;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAgC;AAIhC,IAAM,uBAAoE;AAAA,EACzE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,WAAO,gBAAI,YAAa;AAAA,EACxB,UAAU,CAAE,EAAE,KAAK,MAClB,MAAM,eAAe,SAAS,MAAM,eAAe,aAChD;AAAA;AAAA,QAEA,gBAAI,kBAAe,kBAAmB;AAAA,IACtC,MAAM,eAAe,OAAO,SAAS;AAAA,IACrC,MAAM,eAAe,QAAQ,SAAS;AAAA,EACtC,IACA;AAAA,EACJ,WAAW,CAAE,SAAU;AACtB,WAAO,CAAC,EAAI,MAAM,eAAe,SAAS,MAAM,eAAe;AAAA,EAChE;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AACX;AAEA,IAAO,2BAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x, sprintf } from '@wordpress/i18n';\nimport type { Attachment, Updatable } from '@wordpress/core-data';\nimport type { Field } from '@wordpress/dataviews';\n\nconst mediaDimensionsField: Partial< Field< Updatable< Attachment > > > = {\n\tid: 'media_dimensions',\n\ttype: 'text',\n\tlabel: __( 'Dimensions' ),\n\tgetValue: ( { item } ) =>\n\t\titem?.media_details?.width && item?.media_details?.height\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: 1: Width. 2: Height.\n\t\t\t\t\t_x( '%1$s × %2$s', 'image dimensions' ),\n\t\t\t\t\titem?.media_details?.width?.toString(),\n\t\t\t\t\titem?.media_details?.height?.toString()\n\t\t\t  )\n\t\t\t: '',\n\tisVisible: ( item ) => {\n\t\treturn !! ( item?.media_details?.width && item?.media_details?.height );\n\t},\n\tenableSorting: false,\n\tfilterBy: false,\n\treadOnly: true,\n};\n\nexport default mediaDimensionsField;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAgC;AAIhC,IAAM,uBAAoE;AAAA,EACzE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,WAAO,gBAAI,YAAa;AAAA,EACxB,UAAU,CAAE,EAAE,KAAK,MAClB,MAAM,eAAe,SAAS,MAAM,eAAe,aAChD;AAAA;AAAA,QAEA,gBAAI,eAAe,kBAAmB;AAAA,IACtC,MAAM,eAAe,OAAO,SAAS;AAAA,IACrC,MAAM,eAAe,QAAQ,SAAS;AAAA,EACtC,IACA;AAAA,EACJ,WAAW,CAAE,SAAU;AACtB,WAAO,CAAC,EAAI,MAAM,eAAe,SAAS,MAAM,eAAe;AAAA,EAChE;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AACX;AAEA,IAAO,2BAAQ;",
   "names": []
 }

package/build/media_thumbnail/view.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/media_thumbnail/view.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\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 as WCIcon,\n} from '@wordpress/components';\nimport { useState, useRef, useLayoutEffect } 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\n/**\n * Given the available image sizes and a target display width, returns the URL\n * of the smallest size whose width is >= the target. Falls back to the largest\n * available size, or the original source_url.\n *\n * @param featuredMedia The media item with size details.\n * @param configSizes   The target display size string (e.g. '900px').\n */\nexport function getBestImageUrl(\n\tfeaturedMedia: Attachment | MediaItem,\n\tconfigSizes?: string\n): string {\n\tconst sizes = featuredMedia?.media_details?.sizes;\n\tif ( ! sizes ) {\n\t\treturn featuredMedia.source_url;\n\t}\n\n\tconst sizeEntries = Object.values( sizes );\n\n\tif ( ! sizeEntries.length ) {\n\t\treturn featuredMedia.source_url;\n\t}\n\n\t// Parse target width from config.sizes (e.g. '900px' \u2192 900).\n\tconst targetWidth = configSizes ? parseInt( configSizes, 10 ) : NaN;\n\n\tif ( ! Number.isNaN( targetWidth ) ) {\n\t\t// Filter to entries that have a valid numeric width.\n\t\tconst validEntries = sizeEntries.filter(\n\t\t\t( s ) => typeof s.width === 'number' && ! Number.isNaN( s.width )\n\t\t);\n\n\t\tif ( ! validEntries.length ) {\n\t\t\treturn featuredMedia.source_url;\n\t\t}\n\n\t\t// Sort ascending by width.\n\t\tconst sorted = [ ...validEntries ].sort(\n\t\t\t( a, b ) => a.width - b.width\n\t\t);\n\t\t// Pick the smallest size that is >= target width.\n\t\tconst match = sorted.find( ( s ) => s.width >= targetWidth );\n\t\tif ( match ) {\n\t\t\treturn match.source_url;\n\t\t}\n\t\t// No size large enough \u2014 use the largest available.\n\t\treturn sorted[ sorted.length - 1 ].source_url;\n\t}\n\n\t// If we can't parse the target, fall back to source_url.\n\treturn featuredMedia.source_url;\n}\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<WCIcon\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\nfunction ImageView( {\n\titem,\n\tconfigSizes,\n\tonError,\n}: {\n\titem: Attachment | MediaItem;\n\tconfigSizes?: string;\n\tonError: () => void;\n} ) {\n\tconst imageUrl = getBestImageUrl( item, configSizes );\n\n\t/*\n\t * Use three states to avoid fade-in animation for cached images:\n\t * 'instant' = image already cached, 'loading' = waiting, 'loaded' = just finished.\n\t *\n\t * useLayoutEffect runs synchronously after DOM mutations but before paint,\n\t * so we can check img.complete to detect disk-cached images and skip the\n\t * fade-in animation entirely.\n\t */\n\tconst imgRef = useRef< HTMLImageElement >( null );\n\tconst [ loadingState, setLoadingState ] = useState<\n\t\t'instant' | 'loading' | 'loaded'\n\t>( 'loading' );\n\n\tuseLayoutEffect( () => {\n\t\tif ( imgRef.current?.complete ) {\n\t\t\tsetLoadingState( 'instant' );\n\t\t} else {\n\t\t\tsetLoadingState( 'loading' );\n\t\t}\n\t}, [ imageUrl ] );\n\n\tconst handleLoad = () => {\n\t\tif ( loadingState === 'loading' ) {\n\t\t\tsetLoadingState( 'loaded' );\n\t\t}\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( 'dataviews-media-field__media-thumbnail', {\n\t\t\t\t'is-loading': loadingState === 'loading',\n\t\t\t\t'is-loaded': loadingState === 'loaded',\n\t\t\t} ) }\n\t\t>\n\t\t\t<img\n\t\t\t\tref={ imgRef }\n\t\t\t\tclassName=\"dataviews-media-field__media-thumbnail--image\"\n\t\t\t\tsrc={ imageUrl }\n\t\t\t\talt={ item.alt_text || item.title.raw }\n\t\t\t\tonLoad={ handleLoad }\n\t\t\t\tonError={ onError }\n\t\t\t\tloading=\"lazy\"\n\t\t\t/>\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<ImageView\n\t\t\titem={ featuredMedia }\n\t\t\tconfigSizes={ config?.sizes }\n\t\t\tonError={ () => setImageError( true ) }\n\t\t/>\n\t);\n}\n"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\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 as WCIcon,\n} from '@wordpress/components';\nimport { useState, useRef, useLayoutEffect } 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\n/**\n * Given the available image sizes and a target display width, returns the URL\n * of the smallest size whose width is >= the target. Falls back to the largest\n * available size, or the original source_url.\n *\n * @param featuredMedia The media item with size details.\n * @param configSizes   The target display size string (e.g. '900px').\n */\nexport function getBestImageUrl(\n\tfeaturedMedia: Attachment | MediaItem,\n\tconfigSizes?: string\n): string {\n\tconst sizes = featuredMedia?.media_details?.sizes;\n\tif ( ! sizes ) {\n\t\treturn featuredMedia.source_url;\n\t}\n\n\tconst sizeEntries = Object.values( sizes );\n\n\tif ( ! sizeEntries.length ) {\n\t\treturn featuredMedia.source_url;\n\t}\n\n\t// Parse target width from config.sizes (e.g. '900px' → 900).\n\tconst targetWidth = configSizes ? parseInt( configSizes, 10 ) : NaN;\n\n\tif ( ! Number.isNaN( targetWidth ) ) {\n\t\t// Filter to entries that have a valid numeric width.\n\t\tconst validEntries = sizeEntries.filter(\n\t\t\t( s ) => typeof s.width === 'number' && ! Number.isNaN( s.width )\n\t\t);\n\n\t\tif ( ! validEntries.length ) {\n\t\t\treturn featuredMedia.source_url;\n\t\t}\n\n\t\t// Sort ascending by width.\n\t\tconst sorted = [ ...validEntries ].sort(\n\t\t\t( a, b ) => a.width - b.width\n\t\t);\n\t\t// Pick the smallest size that is >= target width.\n\t\tconst match = sorted.find( ( s ) => s.width >= targetWidth );\n\t\tif ( match ) {\n\t\t\treturn match.source_url;\n\t\t}\n\t\t// No size large enough — use the largest available.\n\t\treturn sorted[ sorted.length - 1 ].source_url;\n\t}\n\n\t// If we can't parse the target, fall back to source_url.\n\treturn featuredMedia.source_url;\n}\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<WCIcon\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\nfunction ImageView( {\n\titem,\n\tconfigSizes,\n\tonError,\n}: {\n\titem: Attachment | MediaItem;\n\tconfigSizes?: string;\n\tonError: () => void;\n} ) {\n\tconst imageUrl = getBestImageUrl( item, configSizes );\n\n\t/*\n\t * Use three states to avoid fade-in animation for cached images:\n\t * 'instant' = image already cached, 'loading' = waiting, 'loaded' = just finished.\n\t *\n\t * useLayoutEffect runs synchronously after DOM mutations but before paint,\n\t * so we can check img.complete to detect disk-cached images and skip the\n\t * fade-in animation entirely.\n\t */\n\tconst imgRef = useRef< HTMLImageElement >( null );\n\tconst [ loadingState, setLoadingState ] = useState<\n\t\t'instant' | 'loading' | 'loaded'\n\t>( 'loading' );\n\n\tuseLayoutEffect( () => {\n\t\tif ( imgRef.current?.complete ) {\n\t\t\tsetLoadingState( 'instant' );\n\t\t} else {\n\t\t\tsetLoadingState( 'loading' );\n\t\t}\n\t}, [ imageUrl ] );\n\n\tconst handleLoad = () => {\n\t\tif ( loadingState === 'loading' ) {\n\t\t\tsetLoadingState( 'loaded' );\n\t\t}\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( 'dataviews-media-field__media-thumbnail', {\n\t\t\t\t'is-loading': loadingState === 'loading',\n\t\t\t\t'is-loaded': loadingState === 'loaded',\n\t\t\t} ) }\n\t\t>\n\t\t\t<img\n\t\t\t\tref={ imgRef }\n\t\t\t\tclassName=\"dataviews-media-field__media-thumbnail--image\"\n\t\t\t\tsrc={ imageUrl }\n\t\t\t\talt={ item.alt_text || item.title.raw }\n\t\t\t\tonLoad={ handleLoad }\n\t\t\t\tonError={ onError }\n\t\t\t\tloading=\"lazy\"\n\t\t\t/>\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<ImageView\n\t\t\titem={ featuredMedia }\n\t\t\tconfigSizes={ config?.sizes }\n\t\t\tonError={ () => setImageError( true ) }\n\t\t/>\n\t);\n}\n"],
   "mappings": "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",
   "names": ["VStack", "WCIcon", "Truncate", "clsx", "coreStore"]
 }

package/build-module/date_added/index.mjs

@@ -1,6 +1,5 @@
 // packages/media-fields/src/date_added/index.tsx
 import { __ } from "@wordpress/i18n";
-import { getSettings } from "@wordpress/date";
 var dateAddedField = {
   id: "date",
   type: "datetime",
@@ -8,9 +7,6 @@ var dateAddedField = {
   filterBy: {
     operators: ["before", "after"]
   },
-  format: {
-    datetime: getSettings().formats.datetimeAbbreviated
-  },
   readOnly: true
 };
 var date_added_default = dateAddedField;

package/build-module/date_added/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/date_added/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { getSettings } from '@wordpress/date';\nimport type { Field } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\nimport type { MediaItem } from '../types';\n\nconst dateAddedField: Partial< Field< MediaItem > > = {\n\tid: 'date',\n\ttype: 'datetime',\n\tlabel: __( 'Date added' ),\n\tfilterBy: {\n\t\toperators: [ 'before', 'after' ],\n\t},\n\tformat: {\n\t\tdatetime: getSettings().formats.datetimeAbbreviated,\n\t},\n\treadOnly: true,\n};\n\nexport default dateAddedField;\n"],
-  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAQ5B,IAAM,iBAAgD;AAAA,EACrD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,OAAO,GAAI,YAAa;AAAA,EACxB,UAAU;AAAA,IACT,WAAW,CAAE,UAAU,OAAQ;AAAA,EAChC;AAAA,EACA,QAAQ;AAAA,IACP,UAAU,YAAY,EAAE,QAAQ;AAAA,EACjC;AAAA,EACA,UAAU;AACX;AAEA,IAAO,qBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport type { Field } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\nimport type { MediaItem } from '../types';\n\nconst dateAddedField: Partial< Field< MediaItem > > = {\n\tid: 'date',\n\ttype: 'datetime',\n\tlabel: __( 'Date added' ),\n\tfilterBy: {\n\t\toperators: [ 'before', 'after' ],\n\t},\n\treadOnly: true,\n};\n\nexport default dateAddedField;\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AAQnB,IAAM,iBAAgD;AAAA,EACrD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,OAAO,GAAI,YAAa;AAAA,EACxB,UAAU;AAAA,IACT,WAAW,CAAE,UAAU,OAAQ;AAAA,EAChC;AAAA,EACA,UAAU;AACX;AAEA,IAAO,qBAAQ;",
   "names": []
 }

package/build-module/date_modified/index.mjs

@@ -1,6 +1,5 @@
 // packages/media-fields/src/date_modified/index.tsx
 import { __ } from "@wordpress/i18n";
-import { getSettings } from "@wordpress/date";
 var dateModifiedField = {
   id: "modified",
   type: "datetime",
@@ -8,9 +7,6 @@ var dateModifiedField = {
   filterBy: {
     operators: ["before", "after"]
   },
-  format: {
-    datetime: getSettings().formats.datetimeAbbreviated
-  },
   readOnly: true
 };
 var date_modified_default = dateModifiedField;

package/build-module/date_modified/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/date_modified/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { getSettings } from '@wordpress/date';\nimport type { Field } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\nimport type { MediaItem } from '../types';\n\nconst dateModifiedField: Partial< Field< MediaItem > > = {\n\tid: 'modified',\n\ttype: 'datetime',\n\tlabel: __( 'Date modified' ),\n\tfilterBy: {\n\t\toperators: [ 'before', 'after' ],\n\t},\n\tformat: {\n\t\tdatetime: getSettings().formats.datetimeAbbreviated,\n\t},\n\treadOnly: true,\n};\n\nexport default dateModifiedField;\n"],
-  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAQ5B,IAAM,oBAAmD;AAAA,EACxD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,OAAO,GAAI,eAAgB;AAAA,EAC3B,UAAU;AAAA,IACT,WAAW,CAAE,UAAU,OAAQ;AAAA,EAChC;AAAA,EACA,QAAQ;AAAA,IACP,UAAU,YAAY,EAAE,QAAQ;AAAA,EACjC;AAAA,EACA,UAAU;AACX;AAEA,IAAO,wBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport type { Field } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\nimport type { MediaItem } from '../types';\n\nconst dateModifiedField: Partial< Field< MediaItem > > = {\n\tid: 'modified',\n\ttype: 'datetime',\n\tlabel: __( 'Date modified' ),\n\tfilterBy: {\n\t\toperators: [ 'before', 'after' ],\n\t},\n\treadOnly: true,\n};\n\nexport default dateModifiedField;\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AAQnB,IAAM,oBAAmD;AAAA,EACxD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,OAAO,GAAI,eAAgB;AAAA,EAC3B,UAAU;AAAA,IACT,WAAW,CAAE,UAAU,OAAQ;AAAA,EAChC;AAAA,EACA,UAAU;AACX;AAEA,IAAO,wBAAQ;",
   "names": []
 }

package/build-module/filename/view.mjs

@@ -1,8 +1,8 @@
 // packages/media-fields/src/filename/view.tsx
-import { Tooltip as WCTooltip } from "@wordpress/components";
 import { useMemo } from "@wordpress/element";
 import { getFilename } from "@wordpress/url";
-import { jsx } from "react/jsx-runtime";
+import { Tooltip } from "@wordpress/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
 var TRUNCATE_LENGTH = 15;
 function FileNameView({
   item
@@ -17,7 +17,15 @@ function FileNameView({
   if (fileName.length <= TRUNCATE_LENGTH) {
     return /* @__PURE__ */ jsx("span", { className: "dataviews-media-field__filename", children: fileName });
   }
-  return /* @__PURE__ */ jsx(WCTooltip, { text: fileName, children: /* @__PURE__ */ jsx("span", { className: "dataviews-media-field__filename", tabIndex: -1, children: fileName }) });
+  return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
+    /* @__PURE__ */ jsx(
+      Tooltip.Trigger,
+      {
+        render: /* @__PURE__ */ jsx("span", { className: "dataviews-media-field__filename", children: fileName })
+      }
+    ),
+    /* @__PURE__ */ jsx(Tooltip.Popup, { children: fileName })
+  ] });
 }
 export {
   FileNameView as default

package/build-module/filename/view.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/filename/view.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Tooltip as WCTooltip } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { getFilename } from '@wordpress/url';\nimport type { DataViewRenderFieldProps } from '@wordpress/dataviews';\n/**\n * Internal dependencies\n */\nimport type { MediaItem } from '../types';\n\n// Proxy threshold for \"long enough that the cell will visually truncate\" \u2014\n// used to decide whether to wrap the filename in a Tooltip showing the full\n// name on hover. Visual truncation itself is handled in CSS.\nconst TRUNCATE_LENGTH = 15;\n\nexport default function FileNameView( {\n\titem,\n}: DataViewRenderFieldProps< MediaItem > ) {\n\tconst fileName = useMemo(\n\t\t() => ( item?.source_url ? getFilename( item.source_url ) : null ),\n\t\t[ item?.source_url ]\n\t);\n\n\tif ( ! fileName ) {\n\t\treturn '';\n\t}\n\n\tif ( fileName.length <= TRUNCATE_LENGTH ) {\n\t\treturn (\n\t\t\t<span className=\"dataviews-media-field__filename\">\n\t\t\t\t{ fileName }\n\t\t\t</span>\n\t\t);\n\t}\n\n\t// `tabIndex={-1}` keeps the Tooltip anchor out of the keyboard tab order:\n\t// Ariakit's `useFocusable` (via TooltipAnchor) preserves an explicit\n\t// `tabIndex` on non-natively-focusable elements rather than defaulting it\n\t// to `0`. Hover-only reveal is intentional \u2014 the full filename text is\n\t// already in the DOM for assistive technology reading the row.\n\treturn (\n\t\t<WCTooltip text={ fileName }>\n\t\t\t<span className=\"dataviews-media-field__filename\" tabIndex={ -1 }>\n\t\t\t\t{ fileName }\n\t\t\t</span>\n\t\t</WCTooltip>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,WAAW,iBAAiB;AACrC,SAAS,eAAe;AACxB,SAAS,mBAAmB;AA0BzB;AAhBH,IAAM,kBAAkB;AAET,SAAR,aAA+B;AAAA,EACrC;AACD,GAA2C;AAC1C,QAAM,WAAW;AAAA,IAChB,MAAQ,MAAM,aAAa,YAAa,KAAK,UAAW,IAAI;AAAA,IAC5D,CAAE,MAAM,UAAW;AAAA,EACpB;AAEA,MAAK,CAAE,UAAW;AACjB,WAAO;AAAA,EACR;AAEA,MAAK,SAAS,UAAU,iBAAkB;AACzC,WACC,oBAAC,UAAK,WAAU,mCACb,oBACH;AAAA,EAEF;AAOA,SACC,oBAAC,aAAU,MAAO,UACjB,8BAAC,UAAK,WAAU,mCAAkC,UAAW,IAC1D,oBACH,GACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { getFilename } from '@wordpress/url';\nimport type { DataViewRenderFieldProps } from '@wordpress/dataviews';\nimport { Tooltip } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type { MediaItem } from '../types';\n\n// Proxy threshold for \"long enough that the cell will visually truncate\" —\n// used to decide whether to wrap the filename in a Tooltip showing the full\n// name on hover. Visual truncation itself is handled in CSS.\nconst TRUNCATE_LENGTH = 15;\n\nexport default function FileNameView( {\n\titem,\n}: DataViewRenderFieldProps< MediaItem > ) {\n\tconst fileName = useMemo(\n\t\t() => ( item?.source_url ? getFilename( item.source_url ) : null ),\n\t\t[ item?.source_url ]\n\t);\n\n\tif ( ! fileName ) {\n\t\treturn '';\n\t}\n\n\tif ( fileName.length <= TRUNCATE_LENGTH ) {\n\t\treturn (\n\t\t\t<span className=\"dataviews-media-field__filename\">\n\t\t\t\t{ fileName }\n\t\t\t</span>\n\t\t);\n\t}\n\n\t// The full filename is always in the DOM, so assistive tech gets it\n\t// regardless. The Tooltip aids mouse users where the cell visually clips\n\t// (DataViews layouts); in a non-truncating context like the DataForm the\n\t// name wraps in full, making it redundant but harmless.\n\treturn (\n\t\t<Tooltip.Root>\n\t\t\t<Tooltip.Trigger\n\t\t\t\trender={\n\t\t\t\t\t<span className=\"dataviews-media-field__filename\">\n\t\t\t\t\t\t{ fileName }\n\t\t\t\t\t</span>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Tooltip.Popup>{ fileName }</Tooltip.Popup>\n\t\t</Tooltip.Root>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAE5B,SAAS,eAAe;AA0BrB,cAWD,YAXC;AAhBH,IAAM,kBAAkB;AAET,SAAR,aAA+B;AAAA,EACrC;AACD,GAA2C;AAC1C,QAAM,WAAW;AAAA,IAChB,MAAQ,MAAM,aAAa,YAAa,KAAK,UAAW,IAAI;AAAA,IAC5D,CAAE,MAAM,UAAW;AAAA,EACpB;AAEA,MAAK,CAAE,UAAW;AACjB,WAAO;AAAA,EACR;AAEA,MAAK,SAAS,UAAU,iBAAkB;AACzC,WACC,oBAAC,UAAK,WAAU,mCACb,oBACH;AAAA,EAEF;AAMA,SACC,qBAAC,QAAQ,MAAR,EACA;AAAA;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACA,QACC,oBAAC,UAAK,WAAU,mCACb,oBACH;AAAA;AAAA,IAEF;AAAA,IACA,oBAAC,QAAQ,OAAR,EAAgB,oBAAU;AAAA,KAC5B;AAEF;",
   "names": []
 }

package/build-module/media_dimensions/index.mjs

@@ -6,7 +6,7 @@ var mediaDimensionsField = {
   label: __("Dimensions"),
   getValue: ({ item }) => item?.media_details?.width && item?.media_details?.height ? sprintf(
     // translators: 1: Width. 2: Height.
-    _x("%1$s \xD7 %2$s", "image dimensions"),
+    _x("%1$s × %2$s", "image dimensions"),
     item?.media_details?.width?.toString(),
     item?.media_details?.height?.toString()
   ) : "",

package/build-module/media_dimensions/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/media_dimensions/index.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x, sprintf } from '@wordpress/i18n';\nimport type { Attachment, Updatable } from '@wordpress/core-data';\nimport type { Field } from '@wordpress/dataviews';\n\nconst mediaDimensionsField: Partial< Field< Updatable< Attachment > > > = {\n\tid: 'media_dimensions',\n\ttype: 'text',\n\tlabel: __( 'Dimensions' ),\n\tgetValue: ( { item } ) =>\n\t\titem?.media_details?.width && item?.media_details?.height\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: 1: Width. 2: Height.\n\t\t\t\t\t_x( '%1$s \u00D7 %2$s', 'image dimensions' ),\n\t\t\t\t\titem?.media_details?.width?.toString(),\n\t\t\t\t\titem?.media_details?.height?.toString()\n\t\t\t  )\n\t\t\t: '',\n\tisVisible: ( item ) => {\n\t\treturn !! ( item?.media_details?.width && item?.media_details?.height );\n\t},\n\tenableSorting: false,\n\tfilterBy: false,\n\treadOnly: true,\n};\n\nexport default mediaDimensionsField;\n"],
-  "mappings": ";AAGA,SAAS,IAAI,IAAI,eAAe;AAIhC,IAAM,uBAAoE;AAAA,EACzE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,OAAO,GAAI,YAAa;AAAA,EACxB,UAAU,CAAE,EAAE,KAAK,MAClB,MAAM,eAAe,SAAS,MAAM,eAAe,SAChD;AAAA;AAAA,IAEA,GAAI,kBAAe,kBAAmB;AAAA,IACtC,MAAM,eAAe,OAAO,SAAS;AAAA,IACrC,MAAM,eAAe,QAAQ,SAAS;AAAA,EACtC,IACA;AAAA,EACJ,WAAW,CAAE,SAAU;AACtB,WAAO,CAAC,EAAI,MAAM,eAAe,SAAS,MAAM,eAAe;AAAA,EAChE;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AACX;AAEA,IAAO,2BAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x, sprintf } from '@wordpress/i18n';\nimport type { Attachment, Updatable } from '@wordpress/core-data';\nimport type { Field } from '@wordpress/dataviews';\n\nconst mediaDimensionsField: Partial< Field< Updatable< Attachment > > > = {\n\tid: 'media_dimensions',\n\ttype: 'text',\n\tlabel: __( 'Dimensions' ),\n\tgetValue: ( { item } ) =>\n\t\titem?.media_details?.width && item?.media_details?.height\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: 1: Width. 2: Height.\n\t\t\t\t\t_x( '%1$s × %2$s', 'image dimensions' ),\n\t\t\t\t\titem?.media_details?.width?.toString(),\n\t\t\t\t\titem?.media_details?.height?.toString()\n\t\t\t  )\n\t\t\t: '',\n\tisVisible: ( item ) => {\n\t\treturn !! ( item?.media_details?.width && item?.media_details?.height );\n\t},\n\tenableSorting: false,\n\tfilterBy: false,\n\treadOnly: true,\n};\n\nexport default mediaDimensionsField;\n"],
+  "mappings": ";AAGA,SAAS,IAAI,IAAI,eAAe;AAIhC,IAAM,uBAAoE;AAAA,EACzE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,OAAO,GAAI,YAAa;AAAA,EACxB,UAAU,CAAE,EAAE,KAAK,MAClB,MAAM,eAAe,SAAS,MAAM,eAAe,SAChD;AAAA;AAAA,IAEA,GAAI,eAAe,kBAAmB;AAAA,IACtC,MAAM,eAAe,OAAO,SAAS;AAAA,IACrC,MAAM,eAAe,QAAQ,SAAS;AAAA,EACtC,IACA;AAAA,EACJ,WAAW,CAAE,SAAU;AACtB,WAAO,CAAC,EAAI,MAAM,eAAe,SAAS,MAAM,eAAe;AAAA,EAChE;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AACX;AAEA,IAAO,2BAAQ;",
   "names": []
 }

package/build-module/media_thumbnail/view.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/media_thumbnail/view.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\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 as WCIcon,\n} from '@wordpress/components';\nimport { useState, useRef, useLayoutEffect } 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\n/**\n * Given the available image sizes and a target display width, returns the URL\n * of the smallest size whose width is >= the target. Falls back to the largest\n * available size, or the original source_url.\n *\n * @param featuredMedia The media item with size details.\n * @param configSizes   The target display size string (e.g. '900px').\n */\nexport function getBestImageUrl(\n\tfeaturedMedia: Attachment | MediaItem,\n\tconfigSizes?: string\n): string {\n\tconst sizes = featuredMedia?.media_details?.sizes;\n\tif ( ! sizes ) {\n\t\treturn featuredMedia.source_url;\n\t}\n\n\tconst sizeEntries = Object.values( sizes );\n\n\tif ( ! sizeEntries.length ) {\n\t\treturn featuredMedia.source_url;\n\t}\n\n\t// Parse target width from config.sizes (e.g. '900px' \u2192 900).\n\tconst targetWidth = configSizes ? parseInt( configSizes, 10 ) : NaN;\n\n\tif ( ! Number.isNaN( targetWidth ) ) {\n\t\t// Filter to entries that have a valid numeric width.\n\t\tconst validEntries = sizeEntries.filter(\n\t\t\t( s ) => typeof s.width === 'number' && ! Number.isNaN( s.width )\n\t\t);\n\n\t\tif ( ! validEntries.length ) {\n\t\t\treturn featuredMedia.source_url;\n\t\t}\n\n\t\t// Sort ascending by width.\n\t\tconst sorted = [ ...validEntries ].sort(\n\t\t\t( a, b ) => a.width - b.width\n\t\t);\n\t\t// Pick the smallest size that is >= target width.\n\t\tconst match = sorted.find( ( s ) => s.width >= targetWidth );\n\t\tif ( match ) {\n\t\t\treturn match.source_url;\n\t\t}\n\t\t// No size large enough \u2014 use the largest available.\n\t\treturn sorted[ sorted.length - 1 ].source_url;\n\t}\n\n\t// If we can't parse the target, fall back to source_url.\n\treturn featuredMedia.source_url;\n}\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<WCIcon\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\nfunction ImageView( {\n\titem,\n\tconfigSizes,\n\tonError,\n}: {\n\titem: Attachment | MediaItem;\n\tconfigSizes?: string;\n\tonError: () => void;\n} ) {\n\tconst imageUrl = getBestImageUrl( item, configSizes );\n\n\t/*\n\t * Use three states to avoid fade-in animation for cached images:\n\t * 'instant' = image already cached, 'loading' = waiting, 'loaded' = just finished.\n\t *\n\t * useLayoutEffect runs synchronously after DOM mutations but before paint,\n\t * so we can check img.complete to detect disk-cached images and skip the\n\t * fade-in animation entirely.\n\t */\n\tconst imgRef = useRef< HTMLImageElement >( null );\n\tconst [ loadingState, setLoadingState ] = useState<\n\t\t'instant' | 'loading' | 'loaded'\n\t>( 'loading' );\n\n\tuseLayoutEffect( () => {\n\t\tif ( imgRef.current?.complete ) {\n\t\t\tsetLoadingState( 'instant' );\n\t\t} else {\n\t\t\tsetLoadingState( 'loading' );\n\t\t}\n\t}, [ imageUrl ] );\n\n\tconst handleLoad = () => {\n\t\tif ( loadingState === 'loading' ) {\n\t\t\tsetLoadingState( 'loaded' );\n\t\t}\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( 'dataviews-media-field__media-thumbnail', {\n\t\t\t\t'is-loading': loadingState === 'loading',\n\t\t\t\t'is-loaded': loadingState === 'loaded',\n\t\t\t} ) }\n\t\t>\n\t\t\t<img\n\t\t\t\tref={ imgRef }\n\t\t\t\tclassName=\"dataviews-media-field__media-thumbnail--image\"\n\t\t\t\tsrc={ imageUrl }\n\t\t\t\talt={ item.alt_text || item.title.raw }\n\t\t\t\tonLoad={ handleLoad }\n\t\t\t\tonError={ onError }\n\t\t\t\tloading=\"lazy\"\n\t\t\t/>\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<ImageView\n\t\t\titem={ featuredMedia }\n\t\t\tconfigSizes={ config?.sizes }\n\t\t\tonError={ () => setImageError( true ) }\n\t\t/>\n\t);\n}\n"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\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 as WCIcon,\n} from '@wordpress/components';\nimport { useState, useRef, useLayoutEffect } 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\n/**\n * Given the available image sizes and a target display width, returns the URL\n * of the smallest size whose width is >= the target. Falls back to the largest\n * available size, or the original source_url.\n *\n * @param featuredMedia The media item with size details.\n * @param configSizes   The target display size string (e.g. '900px').\n */\nexport function getBestImageUrl(\n\tfeaturedMedia: Attachment | MediaItem,\n\tconfigSizes?: string\n): string {\n\tconst sizes = featuredMedia?.media_details?.sizes;\n\tif ( ! sizes ) {\n\t\treturn featuredMedia.source_url;\n\t}\n\n\tconst sizeEntries = Object.values( sizes );\n\n\tif ( ! sizeEntries.length ) {\n\t\treturn featuredMedia.source_url;\n\t}\n\n\t// Parse target width from config.sizes (e.g. '900px' → 900).\n\tconst targetWidth = configSizes ? parseInt( configSizes, 10 ) : NaN;\n\n\tif ( ! Number.isNaN( targetWidth ) ) {\n\t\t// Filter to entries that have a valid numeric width.\n\t\tconst validEntries = sizeEntries.filter(\n\t\t\t( s ) => typeof s.width === 'number' && ! Number.isNaN( s.width )\n\t\t);\n\n\t\tif ( ! validEntries.length ) {\n\t\t\treturn featuredMedia.source_url;\n\t\t}\n\n\t\t// Sort ascending by width.\n\t\tconst sorted = [ ...validEntries ].sort(\n\t\t\t( a, b ) => a.width - b.width\n\t\t);\n\t\t// Pick the smallest size that is >= target width.\n\t\tconst match = sorted.find( ( s ) => s.width >= targetWidth );\n\t\tif ( match ) {\n\t\t\treturn match.source_url;\n\t\t}\n\t\t// No size large enough — use the largest available.\n\t\treturn sorted[ sorted.length - 1 ].source_url;\n\t}\n\n\t// If we can't parse the target, fall back to source_url.\n\treturn featuredMedia.source_url;\n}\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<WCIcon\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\nfunction ImageView( {\n\titem,\n\tconfigSizes,\n\tonError,\n}: {\n\titem: Attachment | MediaItem;\n\tconfigSizes?: string;\n\tonError: () => void;\n} ) {\n\tconst imageUrl = getBestImageUrl( item, configSizes );\n\n\t/*\n\t * Use three states to avoid fade-in animation for cached images:\n\t * 'instant' = image already cached, 'loading' = waiting, 'loaded' = just finished.\n\t *\n\t * useLayoutEffect runs synchronously after DOM mutations but before paint,\n\t * so we can check img.complete to detect disk-cached images and skip the\n\t * fade-in animation entirely.\n\t */\n\tconst imgRef = useRef< HTMLImageElement >( null );\n\tconst [ loadingState, setLoadingState ] = useState<\n\t\t'instant' | 'loading' | 'loaded'\n\t>( 'loading' );\n\n\tuseLayoutEffect( () => {\n\t\tif ( imgRef.current?.complete ) {\n\t\t\tsetLoadingState( 'instant' );\n\t\t} else {\n\t\t\tsetLoadingState( 'loading' );\n\t\t}\n\t}, [ imageUrl ] );\n\n\tconst handleLoad = () => {\n\t\tif ( loadingState === 'loading' ) {\n\t\t\tsetLoadingState( 'loaded' );\n\t\t}\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( 'dataviews-media-field__media-thumbnail', {\n\t\t\t\t'is-loading': loadingState === 'loading',\n\t\t\t\t'is-loaded': loadingState === 'loaded',\n\t\t\t} ) }\n\t\t>\n\t\t\t<img\n\t\t\t\tref={ imgRef }\n\t\t\t\tclassName=\"dataviews-media-field__media-thumbnail--image\"\n\t\t\t\tsrc={ imageUrl }\n\t\t\t\talt={ item.alt_text || item.title.raw }\n\t\t\t\tonLoad={ handleLoad }\n\t\t\t\tonError={ onError }\n\t\t\t\tloading=\"lazy\"\n\t\t\t/>\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<ImageView\n\t\t\titem={ featuredMedia }\n\t\t\tconfigSizes={ config?.sizes }\n\t\t\tonError={ () => setImageError( true ) }\n\t\t/>\n\t);\n}\n"],
   "mappings": "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",
   "names": []
 }

package/build-style/style-rtl.css

@@ -99,7 +99,8 @@
 .media-author-field__avatar img {
   width: 16px;
   height: 16px;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
   opacity: 1;
   border-radius: 100%;
 }
@@ -131,7 +132,9 @@
   overflow: hidden;
 }
 
-.dataviews-media-field__filename {
+.dataviews-view-table .dataviews-media-field__filename,
+.dataviews-view-grid .dataviews-media-field__filename,
+.dataviews-view-list .dataviews-media-field__filename {
   display: inline-block;
   max-inline-size: 15ch;
   overflow: hidden;
@@ -162,7 +165,8 @@
   display: block;
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 .dataviews-media-field__media-thumbnail__stack {

package/build-style/style.css

@@ -99,7 +99,8 @@
 .media-author-field__avatar img {
   width: 16px;
   height: 16px;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
   opacity: 1;
   border-radius: 100%;
 }
@@ -131,7 +132,9 @@
   overflow: hidden;
 }
 
-.dataviews-media-field__filename {
+.dataviews-view-table .dataviews-media-field__filename,
+.dataviews-view-grid .dataviews-media-field__filename,
+.dataviews-view-list .dataviews-media-field__filename {
   display: inline-block;
   max-inline-size: 15ch;
   overflow: hidden;
@@ -162,7 +165,8 @@
   display: block;
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 .dataviews-media-field__media-thumbnail__stack {

package/build-types/date_added/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/date_added/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAElD;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,QAAA,MAAM,cAAc,EAAE,OAAO,CAAE,KAAK,CAAE,SAAS,CAAE,CAWhD,CAAC;eAEa,cAAc"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/date_added/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAElD;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,QAAA,MAAM,cAAc,EAAE,OAAO,CAAE,KAAK,CAAE,SAAS,CAAE,CAQhD,CAAC;eAEa,cAAc"}

package/build-types/date_modified/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/date_modified/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAElD;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,QAAA,MAAM,iBAAiB,EAAE,OAAO,CAAE,KAAK,CAAE,SAAS,CAAE,CAWnD,CAAC;eAEa,iBAAiB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/date_modified/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAElD;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,QAAA,MAAM,iBAAiB,EAAE,OAAO,CAAE,KAAK,CAAE,SAAS,CAAE,CAQnD,CAAC;eAEa,iBAAiB"}

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

@@ -1 +1 @@
-{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/filename/view.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AACrE;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAO1C,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,EACrC,IAAI,EACJ,EAAE,wBAAwB,CAAE,SAAS,CAAE,oCA8BvC"}
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/filename/view.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAGrE;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAO1C,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,EACrC,IAAI,EACJ,EAAE,wBAAwB,CAAE,SAAS,CAAE,oCAkCvC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/media-fields",
-	"version": "0.13.0",
+	"version": "0.13.2-next.v.202606191442.0+17fe7db8a",
 	"description": "Reusable field definitions for displaying and editing media attachment properties in WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -42,36 +42,44 @@
 		},
 		"./package.json": "./package.json"
 	},
-	"react-native": "src/index",
 	"types": "build-types",
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss"
 	],
 	"dependencies": {
-		"@wordpress/base-styles": "^9.1.0",
-		"@wordpress/components": "^35.0.0",
-		"@wordpress/compose": "^8.1.0",
-		"@wordpress/core-data": "^7.48.0",
-		"@wordpress/data": "^10.48.0",
-		"@wordpress/dataviews": "^16.0.0",
-		"@wordpress/date": "^5.48.0",
-		"@wordpress/element": "^8.0.0",
-		"@wordpress/i18n": "^6.21.0",
-		"@wordpress/icons": "^13.3.0",
-		"@wordpress/primitives": "^4.48.0",
-		"@wordpress/url": "^4.48.0",
-		"clsx": "2.1.1"
+		"@wordpress/base-styles": "^10.0.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/components": "^35.1.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/compose": "^8.1.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/core-data": "^7.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/data": "^10.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/dataviews": "^17.0.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/date": "^5.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/element": "^8.0.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/i18n": "^6.21.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/icons": "^14.0.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/primitives": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/ui": "^0.16.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/url": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"clsx": "^2.1.1"
 	},
 	"devDependencies": {
+		"@testing-library/dom": "^10.4.1",
 		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/react": "^16.3.2",
 		"@types/jest": "^29.5.14"
 	},
 	"peerDependencies": {
+		"@types/react": "^18.3.27",
 		"react": "^18.0.0"
 	},
+	"peerDependenciesMeta": {
+		"@types/react": {
+			"optional": true
+		}
+	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
+	"gitHead": "1b6a19222df5a88f161880b5789efb3171d8f425"
 }

package/src/date_added/index.tsx

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { getSettings } from '@wordpress/date';
 import type { Field } from '@wordpress/dataviews';
 
 /**
@@ -17,9 +16,6 @@ const dateAddedField: Partial< Field< MediaItem > > = {
 	filterBy: {
 		operators: [ 'before', 'after' ],
 	},
-	format: {
-		datetime: getSettings().formats.datetimeAbbreviated,
-	},
 	readOnly: true,
 };
 

package/src/date_modified/index.tsx

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { getSettings } from '@wordpress/date';
 import type { Field } from '@wordpress/dataviews';
 
 /**
@@ -17,9 +16,6 @@ const dateModifiedField: Partial< Field< MediaItem > > = {
 	filterBy: {
 		operators: [ 'before', 'after' ],
 	},
-	format: {
-		datetime: getSettings().formats.datetimeAbbreviated,
-	},
 	readOnly: true,
 };
 

package/src/filename/style.scss

@@ -1,14 +1,23 @@
-// CSS-based truncation (rather than `__experimentalTruncate`) so the full
-// filename stays in the DOM — keeps it available to assistive technology
-// reading the row, and lets the cell respond to column width changes.
-.dataviews-media-field__filename {
-	display: inline-block;
-	max-inline-size: 15ch;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	// Snap to the top of the line box so the cell aligns correctly in the
-	// DataViews Grid layout — without this the inline-block sits on the
-	// baseline and pushes the row out of alignment.
-	vertical-align: top;
+// Truncation is a DataViews layout concern, so it's scoped to the table/grid/
+// list containers. The same `FileNameView` render is also used in a DataForm
+// (e.g. the media editor modal Details panel) where there's room to show the
+// full name — outside these containers the filename is left to wrap naturally.
+//
+// CSS-based truncation (rather than `__experimentalTruncate`) keeps the full
+// filename in the DOM — available to assistive technology reading the row, and
+// lets the cell respond to column width changes.
+.dataviews-view-table,
+.dataviews-view-grid,
+.dataviews-view-list {
+	.dataviews-media-field__filename {
+		display: inline-block;
+		max-inline-size: 15ch;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		// Snap to the top of the line box so the cell aligns correctly in the
+		// DataViews Grid layout — without this the inline-block sits on the
+		// baseline and pushes the row out of alignment.
+		vertical-align: top;
+	}
 }

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

@@ -17,7 +17,7 @@ import type { MediaItem } from '../../types';
 
 describe( 'FileNameView', () => {
 	describe( 'filename rendering', () => {
-		it( 'renders short filename without a tooltip anchor or tabindex', () => {
+		it( 'renders short filename without a tooltip anchor', () => {
 			const item: Partial< MediaItem > = {
 				source_url: 'https://example.com/uploads/12345678901.jpg', // exactly 15 chars
 			};
@@ -31,7 +31,6 @@ describe( 'FileNameView', () => {
 
 			const rendered = screen.getByText( '12345678901.jpg' );
 			expect( rendered ).toHaveClass( 'dataviews-media-field__filename' );
-			expect( rendered ).not.toHaveAttribute( 'tabindex' );
 		} );
 
 		it( 'renders long filename inside a Tooltip and exposes the full name in the DOM', () => {
@@ -54,26 +53,6 @@ describe( 'FileNameView', () => {
 			const rendered = screen.getByText( longFilename );
 			expect( rendered ).toHaveClass( 'dataviews-media-field__filename' );
 		} );
-
-		it( 'does not add a tab stop for truncated filenames', () => {
-			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 > }
-				/>
-			);
-
-			expect( screen.getByText( longFilename ) ).toHaveAttribute(
-				'tabindex',
-				'-1'
-			);
-		} );
 	} );
 
 	describe( 'edge cases', () => {

package/src/filename/view.tsx

@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { Tooltip as WCTooltip } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 import { getFilename } from '@wordpress/url';
 import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
+import { Tooltip } from '@wordpress/ui';
+
 /**
  * Internal dependencies
  */
@@ -35,16 +36,20 @@ export default function FileNameView( {
 		);
 	}
 
-	// `tabIndex={-1}` keeps the Tooltip anchor out of the keyboard tab order:
-	// Ariakit's `useFocusable` (via TooltipAnchor) preserves an explicit
-	// `tabIndex` on non-natively-focusable elements rather than defaulting it
-	// to `0`. Hover-only reveal is intentional — the full filename text is
-	// already in the DOM for assistive technology reading the row.
+	// The full filename is always in the DOM, so assistive tech gets it
+	// regardless. The Tooltip aids mouse users where the cell visually clips
+	// (DataViews layouts); in a non-truncating context like the DataForm the
+	// name wraps in full, making it redundant but harmless.
 	return (
-		<WCTooltip text={ fileName }>
-			<span className="dataviews-media-field__filename" tabIndex={ -1 }>
-				{ fileName }
-			</span>
-		</WCTooltip>
+		<Tooltip.Root>
+			<Tooltip.Trigger
+				render={
+					<span className="dataviews-media-field__filename">
+						{ fileName }
+					</span>
+				}
+			/>
+			<Tooltip.Popup>{ fileName }</Tooltip.Popup>
+		</Tooltip.Root>
 	);
 }