@wordpress/media-fields 0.13.0 → 0.13.1

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';\n// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.\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\" \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// 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;AAG5B,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-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';\n// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.\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\" \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// 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;AAG5B,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-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;AAIrE;;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.1",
 	"description": "Reusable field definitions for displaying and editing media attachment properties in WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -42,29 +42,32 @@
 		},
 		"./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"
+		"@types/react": "^18.3.27",
+		"@wordpress/base-styles": "^10.0.1",
+		"@wordpress/components": "^35.0.1",
+		"@wordpress/compose": "^8.1.1",
+		"@wordpress/core-data": "^7.48.1",
+		"@wordpress/data": "^10.48.1",
+		"@wordpress/dataviews": "^16.0.1",
+		"@wordpress/date": "^5.48.1",
+		"@wordpress/element": "^8.0.1",
+		"@wordpress/i18n": "^6.21.1",
+		"@wordpress/icons": "^14.0.1",
+		"@wordpress/primitives": "^4.48.1",
+		"@wordpress/ui": "^0.15.1",
+		"@wordpress/url": "^4.48.1",
+		"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": {
@@ -73,5 +76,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
+	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
 }

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,12 @@
 /**
  * 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';
+// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
+import { Tooltip } from '@wordpress/ui';
+
 /**
  * Internal dependencies
  */
@@ -35,16 +37,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>
 	);
 }