@akbarsafari00/bonyan-content-manager 5.52.1-fa.2

package/dist/admin/pages/ListView/components/TableCells/CellContent.mjs

@@ -0,0 +1,155 @@
+import { jsx } from 'react/jsx-runtime';
+import { Typography, Tooltip } from '@strapi/design-system';
+import isEmpty from 'lodash/isEmpty';
+import { Link } from 'react-router-dom';
+import { CellValue } from './CellValue.mjs';
+import { RepeatableComponent, SingleComponent } from './Components.mjs';
+import { MediaSingle, MediaMultiple } from './Media.mjs';
+import { RelationSingle, RelationMultiple } from './Relations.mjs';
+
+const CellContent = ({ content, mainField, attribute, rowId, name, linkTo })=>{
+    const isIdColumn = name === 'id';
+    if (!hasContent(content, mainField, attribute)) {
+        return /*#__PURE__*/ jsx(Typography, {
+            textColor: "neutral800",
+            paddingLeft: attribute.type === 'relation' || attribute.type === 'component' ? '1.6rem' : 0,
+            paddingRight: attribute.type === 'relation' || attribute.type === 'component' ? '1.6rem' : 0,
+            children: "-"
+        });
+    }
+    // Primary scalar column: render the value as a link to the entry so it gets
+    // native open-in-new-tab semantics. stopPropagation prevents the row's own
+    // onClick from firing a second navigation; React Router's Link still handles
+    // the click (stopPropagation does not preventDefault).
+    if (linkTo) {
+        const link = /*#__PURE__*/ jsx(Typography, {
+            tag: Link,
+            to: linkTo,
+            onClick: (e)=>e.stopPropagation(),
+            maxWidth: "30rem",
+            ellipsis: true,
+            textColor: "neutral800",
+            children: /*#__PURE__*/ jsx(CellValue, {
+                isIdColumn: isIdColumn,
+                type: attribute.type,
+                value: content
+            })
+        });
+        return attribute.type === 'string' ? /*#__PURE__*/ jsx(Tooltip, {
+            label: content,
+            children: link
+        }) : link;
+    }
+    switch(attribute.type){
+        case 'media':
+            if (!attribute.multiple) {
+                return /*#__PURE__*/ jsx(MediaSingle, {
+                    ...content
+                });
+            }
+            return /*#__PURE__*/ jsx(MediaMultiple, {
+                content: content
+            });
+        case 'relation':
+            {
+                if (isSingleRelation(attribute.relation)) {
+                    return /*#__PURE__*/ jsx(RelationSingle, {
+                        mainField: mainField,
+                        content: content
+                    });
+                }
+                return /*#__PURE__*/ jsx(RelationMultiple, {
+                    rowId: rowId,
+                    mainField: mainField,
+                    content: content,
+                    name: name
+                });
+            }
+        case 'component':
+            if (attribute.repeatable) {
+                return /*#__PURE__*/ jsx(RepeatableComponent, {
+                    mainField: mainField,
+                    content: content
+                });
+            }
+            return /*#__PURE__*/ jsx(SingleComponent, {
+                mainField: mainField,
+                content: content
+            });
+        case 'string':
+            return /*#__PURE__*/ jsx(Tooltip, {
+                label: content,
+                children: /*#__PURE__*/ jsx(Typography, {
+                    maxWidth: "30rem",
+                    ellipsis: true,
+                    textColor: "neutral800",
+                    children: /*#__PURE__*/ jsx(CellValue, {
+                        isIdColumn: isIdColumn,
+                        type: attribute.type,
+                        value: content
+                    })
+                })
+            });
+        default:
+            return /*#__PURE__*/ jsx(Typography, {
+                maxWidth: "30rem",
+                ellipsis: true,
+                textColor: "neutral800",
+                children: /*#__PURE__*/ jsx(CellValue, {
+                    isIdColumn: isIdColumn,
+                    type: attribute.type,
+                    value: content
+                })
+            });
+    }
+};
+const hasContent = (content, mainField, attribute)=>{
+    if (attribute.type === 'component') {
+        // Repeatable fields show the ID as fallback, in case the mainField
+        // doesn't have any content
+        if (attribute.repeatable || !mainField) {
+            return content?.length > 0;
+        }
+        const value = content?.[mainField.name];
+        // relations, media ... show the id as fallback
+        if (mainField.name === 'id' && ![
+            undefined,
+            null
+        ].includes(value)) {
+            return true;
+        }
+        return !isEmpty(value);
+    }
+    if (attribute.type === 'relation') {
+        if (isSingleRelation(attribute.relation)) {
+            return !isEmpty(content);
+        }
+        if (Array.isArray(content)) {
+            return content.length > 0;
+        }
+        return content?.count > 0;
+    }
+    /*
+      Biginteger fields need to be treated as strings, as `isNumber`
+      doesn't deal with them.
+  */ if ([
+        'integer',
+        'decimal',
+        'float',
+        'number'
+    ].includes(attribute.type)) {
+        return typeof content === 'number';
+    }
+    if (attribute.type === 'boolean') {
+        return content !== null;
+    }
+    return !isEmpty(content);
+};
+const isSingleRelation = (type)=>[
+        'oneToOne',
+        'manyToOne',
+        'oneToOneMorph'
+    ].includes(type);
+
+export { CellContent, hasContent };
+//# sourceMappingURL=CellContent.mjs.map

package/dist/admin/pages/ListView/components/TableCells/CellContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellContent.mjs","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/CellContent.tsx"],"sourcesContent":["import type { MouseEvent } from 'react';\r\n\r\nimport { Tooltip, Typography } from '@strapi/design-system';\r\nimport isEmpty from 'lodash/isEmpty';\r\nimport { Link as ReactRouterLink } from 'react-router-dom';\r\n\r\nimport { CellValue } from './CellValue';\r\nimport { SingleComponent, RepeatableComponent } from './Components';\r\nimport { MediaSingle, MediaMultiple } from './Media';\r\nimport { RelationMultiple, RelationSingle } from './Relations';\r\n\r\nimport type { ListFieldLayout } from '../../../../hooks/useDocumentLayout';\r\nimport type { Schema, Data } from '@strapi/types';\r\nimport type { To } from 'react-router-dom';\r\n\r\ninterface CellContentProps extends Omit<ListFieldLayout, 'cellFormatter'> {\r\n  content: Schema.Attribute.Value<Schema.Attribute.AnyAttribute>;\r\n  rowId: Data.ID;\r\n  /**\r\n   * When set, the cell renders its value as a navigational link to the entry.\r\n   * Used for the primary (first scalar) column so users can open an entry in a\r\n   * new tab via right-click / cmd+click / middle-click, while a plain click\r\n   * still navigates within the SPA. Only passed for non-interactive cell types.\r\n   */\r\n  linkTo?: To;\r\n}\r\n\r\nconst CellContent = ({ content, mainField, attribute, rowId, name, linkTo }: CellContentProps) => {\r\n  const isIdColumn = name === 'id';\r\n\r\n  if (!hasContent(content, mainField, attribute)) {\r\n    return (\r\n      <Typography\r\n        textColor=\"neutral800\"\r\n        paddingLeft={attribute.type === 'relation' || attribute.type === 'component' ? '1.6rem' : 0}\r\n        paddingRight={\r\n          attribute.type === 'relation' || attribute.type === 'component' ? '1.6rem' : 0\r\n        }\r\n      >\r\n        -\r\n      </Typography>\r\n    );\r\n  }\r\n\r\n  // Primary scalar column: render the value as a link to the entry so it gets\r\n  // native open-in-new-tab semantics. stopPropagation prevents the row's own\r\n  // onClick from firing a second navigation; React Router's Link still handles\r\n  // the click (stopPropagation does not preventDefault).\r\n  if (linkTo) {\r\n    const link = (\r\n      <Typography\r\n        tag={ReactRouterLink}\r\n        to={linkTo}\r\n        onClick={(e: MouseEvent) => e.stopPropagation()}\r\n        maxWidth=\"30rem\"\r\n        ellipsis\r\n        textColor=\"neutral800\"\r\n      >\r\n        <CellValue isIdColumn={isIdColumn} type={attribute.type} value={content} />\r\n      </Typography>\r\n    );\r\n\r\n    return attribute.type === 'string' ? <Tooltip label={content}>{link}</Tooltip> : link;\r\n  }\r\n\r\n  switch (attribute.type) {\r\n    case 'media':\r\n      if (!attribute.multiple) {\r\n        return <MediaSingle {...content} />;\r\n      }\r\n\r\n      return <MediaMultiple content={content} />;\r\n\r\n    case 'relation': {\r\n      if (isSingleRelation(attribute.relation)) {\r\n        return <RelationSingle mainField={mainField} content={content} />;\r\n      }\r\n\r\n      return <RelationMultiple rowId={rowId} mainField={mainField} content={content} name={name} />;\r\n    }\r\n\r\n    case 'component':\r\n      if (attribute.repeatable) {\r\n        return <RepeatableComponent mainField={mainField} content={content} />;\r\n      }\r\n\r\n      return <SingleComponent mainField={mainField} content={content} />;\r\n\r\n    case 'string':\r\n      return (\r\n        <Tooltip label={content}>\r\n          <Typography maxWidth=\"30rem\" ellipsis textColor=\"neutral800\">\r\n            <CellValue isIdColumn={isIdColumn} type={attribute.type} value={content} />\r\n          </Typography>\r\n        </Tooltip>\r\n      );\r\n\r\n    default:\r\n      return (\r\n        <Typography maxWidth=\"30rem\" ellipsis textColor=\"neutral800\">\r\n          <CellValue isIdColumn={isIdColumn} type={attribute.type} value={content} />\r\n        </Typography>\r\n      );\r\n  }\r\n};\r\n\r\nconst hasContent = (\r\n  content: CellContentProps['content'],\r\n  mainField: CellContentProps['mainField'],\r\n  attribute: CellContentProps['attribute']\r\n) => {\r\n  if (attribute.type === 'component') {\r\n    // Repeatable fields show the ID as fallback, in case the mainField\r\n    // doesn't have any content\r\n    if (attribute.repeatable || !mainField) {\r\n      return content?.length > 0;\r\n    }\r\n\r\n    const value = content?.[mainField.name];\r\n\r\n    // relations, media ... show the id as fallback\r\n    if (mainField.name === 'id' && ![undefined, null].includes(value)) {\r\n      return true;\r\n    }\r\n\r\n    return !isEmpty(value);\r\n  }\r\n\r\n  if (attribute.type === 'relation') {\r\n    if (isSingleRelation(attribute.relation)) {\r\n      return !isEmpty(content);\r\n    }\r\n\r\n    if (Array.isArray(content)) {\r\n      return content.length > 0;\r\n    }\r\n\r\n    return content?.count > 0;\r\n  }\r\n\r\n  /*\r\n      Biginteger fields need to be treated as strings, as `isNumber`\r\n      doesn't deal with them.\r\n  */\r\n  if (['integer', 'decimal', 'float', 'number'].includes(attribute.type)) {\r\n    return typeof content === 'number';\r\n  }\r\n\r\n  if (attribute.type === 'boolean') {\r\n    return content !== null;\r\n  }\r\n\r\n  return !isEmpty(content);\r\n};\r\n\r\nconst isSingleRelation = (\r\n  type: Extract<CellContentProps['attribute'], { type: 'relation' }>['relation']\r\n) => ['oneToOne', 'manyToOne', 'oneToOneMorph'].includes(type);\r\n\r\nexport { CellContent, hasContent };\r\nexport type { CellContentProps };\r\n"],"names":["CellContent","content","mainField","attribute","rowId","name","linkTo","isIdColumn","hasContent","_jsx","Typography","textColor","paddingLeft","type","paddingRight","link","tag","ReactRouterLink","to","onClick","e","stopPropagation","maxWidth","ellipsis","CellValue","value","Tooltip","label","multiple","MediaSingle","MediaMultiple","isSingleRelation","relation","RelationSingle","RelationMultiple","repeatable","RepeatableComponent","SingleComponent","length","undefined","includes","isEmpty","Array","isArray","count"],"mappings":"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"}

package/dist/admin/pages/ListView/components/TableCells/CellValue.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var parseISO = require('date-fns/parseISO');
+var toString = require('lodash/toString');
+var reactIntl = require('react-intl');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var parseISO__default = /*#__PURE__*/_interopDefault(parseISO);
+var toString__default = /*#__PURE__*/_interopDefault(toString);
+
+const CellValue = ({ isIdColumn = false, type, value })=>{
+    const { formatDate, formatTime, formatNumber, formatMessage } = reactIntl.useIntl();
+    let formattedValue = value;
+    if (type === 'date' && typeof value === 'string') {
+        formattedValue = formatDate(parseISO__default.default(value), {
+            dateStyle: 'full'
+        });
+    }
+    if (type === 'datetime') {
+        formattedValue = formatDate(value, {
+            dateStyle: 'full',
+            timeStyle: 'short'
+        });
+    }
+    if (type === 'time' && typeof value === 'string') {
+        const [hour, minute, second] = value.split(':');
+        const date = new Date();
+        date.setHours(Number(hour));
+        date.setMinutes(Number(minute));
+        date.setSeconds(Number(second));
+        formattedValue = formatTime(date, {
+            timeStyle: 'short'
+        });
+    }
+    if ([
+        'float',
+        'decimal'
+    ].includes(type)) {
+        formattedValue = formatNumber(value, {
+            // Should be kept in sync with the corresponding value
+            // in the design-system/NumberInput: https://github.com/strapi/design-system/blob/main/packages/strapi-design-system/src/NumberInput/NumberInput.js#L53
+            maximumFractionDigits: 20
+        });
+    }
+    if (type === 'boolean') {
+        const booleanValue = Boolean(value);
+        formattedValue = formatMessage({
+            id: booleanValue ? 'app.components.ToggleCheckbox.on-label' : 'app.components.ToggleCheckbox.off-label',
+            defaultMessage: booleanValue ? 'true' : 'false'
+        });
+    }
+    if ([
+        'integer',
+        'biginteger'
+    ].includes(type)) {
+        formattedValue = formatNumber(value, {
+            maximumFractionDigits: 0,
+            useGrouping: !isIdColumn
+        });
+    }
+    return toString__default.default(formattedValue);
+};
+
+exports.CellValue = CellValue;
+//# sourceMappingURL=CellValue.js.map

package/dist/admin/pages/ListView/components/TableCells/CellValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellValue.js","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/CellValue.tsx"],"sourcesContent":["import parseISO from 'date-fns/parseISO';\r\nimport toString from 'lodash/toString';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport type { Schema } from '@strapi/types';\r\n\r\ninterface CellValueProps {\r\n  isIdColumn?: boolean;\r\n  type: Schema.Attribute.Kind | 'custom';\r\n  value: unknown;\r\n}\r\n\r\nconst CellValue = ({ isIdColumn = false, type, value }: CellValueProps) => {\r\n  const { formatDate, formatTime, formatNumber, formatMessage } = useIntl();\r\n  let formattedValue = value;\r\n\r\n  if (type === 'date' && typeof value === 'string') {\r\n    formattedValue = formatDate(parseISO(value), { dateStyle: 'full' });\r\n  }\r\n\r\n  if (type === 'datetime') {\r\n    formattedValue = formatDate(value as Parameters<typeof formatDate>[0], {\r\n      dateStyle: 'full',\r\n      timeStyle: 'short',\r\n    });\r\n  }\r\n\r\n  if (type === 'time' && typeof value === 'string') {\r\n    const [hour, minute, second] = value.split(':');\r\n    const date = new Date();\r\n    date.setHours(Number(hour));\r\n    date.setMinutes(Number(minute));\r\n    date.setSeconds(Number(second));\r\n\r\n    formattedValue = formatTime(date, {\r\n      timeStyle: 'short',\r\n    });\r\n  }\r\n\r\n  if (['float', 'decimal'].includes(type)) {\r\n    formattedValue = formatNumber(value as Parameters<typeof formatNumber>[0], {\r\n      // Should be kept in sync with the corresponding value\r\n      // in the design-system/NumberInput: https://github.com/strapi/design-system/blob/main/packages/strapi-design-system/src/NumberInput/NumberInput.js#L53\r\n      maximumFractionDigits: 20,\r\n    });\r\n  }\r\n\r\n  if (type === 'boolean') {\r\n    const booleanValue = Boolean(value);\r\n    formattedValue = formatMessage({\r\n      id: booleanValue\r\n        ? 'app.components.ToggleCheckbox.on-label'\r\n        : 'app.components.ToggleCheckbox.off-label',\r\n      defaultMessage: booleanValue ? 'true' : 'false',\r\n    });\r\n  }\r\n\r\n  if (['integer', 'biginteger'].includes(type)) {\r\n    formattedValue = formatNumber(value as Parameters<typeof formatNumber>[0], {\r\n      maximumFractionDigits: 0,\r\n      useGrouping: !isIdColumn,\r\n    });\r\n  }\r\n\r\n  return toString(formattedValue);\r\n};\r\n\r\nexport { CellValue };\r\nexport type { CellValueProps };\r\n"],"names":["CellValue","isIdColumn","type","value","formatDate","formatTime","formatNumber","formatMessage","useIntl","formattedValue","parseISO","dateStyle","timeStyle","hour","minute","second","split","date","Date","setHours","Number","setMinutes","setSeconds","includes","maximumFractionDigits","booleanValue","Boolean","id","defaultMessage","useGrouping","toString"],"mappings":";;;;;;;;;;;AAYA,MAAMA,SAAAA,GAAY,CAAC,EAAEC,UAAAA,GAAa,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAkB,GAAA;IACpE,MAAM,EAAEC,UAAU,EAAEC,UAAU,EAAEC,YAAY,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAChE,IAAA,IAAIC,cAAAA,GAAiBN,KAAAA;AAErB,IAAA,IAAID,IAAAA,KAAS,MAAA,IAAU,OAAOC,KAAAA,KAAU,QAAA,EAAU;QAChDM,cAAAA,GAAiBL,UAAAA,CAAWM,0BAASP,KAAAA,CAAAA,EAAQ;YAAEQ,SAAAA,EAAW;AAAO,SAAA,CAAA;AACnE,IAAA;AAEA,IAAA,IAAIT,SAAS,UAAA,EAAY;AACvBO,QAAAA,cAAAA,GAAiBL,WAAWD,KAAAA,EAA2C;YACrEQ,SAAAA,EAAW,MAAA;YACXC,SAAAA,EAAW;AACb,SAAA,CAAA;AACF,IAAA;AAEA,IAAA,IAAIV,IAAAA,KAAS,MAAA,IAAU,OAAOC,KAAAA,KAAU,QAAA,EAAU;AAChD,QAAA,MAAM,CAACU,IAAAA,EAAMC,MAAAA,EAAQC,OAAO,GAAGZ,KAAAA,CAAMa,KAAK,CAAC,GAAA,CAAA;AAC3C,QAAA,MAAMC,OAAO,IAAIC,IAAAA,EAAAA;QACjBD,IAAAA,CAAKE,QAAQ,CAACC,MAAAA,CAAOP,IAAAA,CAAAA,CAAAA;QACrBI,IAAAA,CAAKI,UAAU,CAACD,MAAAA,CAAON,MAAAA,CAAAA,CAAAA;QACvBG,IAAAA,CAAKK,UAAU,CAACF,MAAAA,CAAOL,MAAAA,CAAAA,CAAAA;AAEvBN,QAAAA,cAAAA,GAAiBJ,WAAWY,IAAAA,EAAM;YAChCL,SAAAA,EAAW;AACb,SAAA,CAAA;AACF,IAAA;IAEA,IAAI;AAAC,QAAA,OAAA;AAAS,QAAA;KAAU,CAACW,QAAQ,CAACrB,IAAAA,CAAAA,EAAO;AACvCO,QAAAA,cAAAA,GAAiBH,aAAaH,KAAAA,EAA6C;;;YAGzEqB,qBAAAA,EAAuB;AACzB,SAAA,CAAA;AACF,IAAA;AAEA,IAAA,IAAItB,SAAS,SAAA,EAAW;AACtB,QAAA,MAAMuB,eAAeC,OAAAA,CAAQvB,KAAAA,CAAAA;AAC7BM,QAAAA,cAAAA,GAAiBF,aAAAA,CAAc;AAC7BoB,YAAAA,EAAAA,EAAIF,eACA,wCAAA,GACA,yCAAA;AACJG,YAAAA,cAAAA,EAAgBH,eAAe,MAAA,GAAS;AAC1C,SAAA,CAAA;AACF,IAAA;IAEA,IAAI;AAAC,QAAA,SAAA;AAAW,QAAA;KAAa,CAACF,QAAQ,CAACrB,IAAAA,CAAAA,EAAO;AAC5CO,QAAAA,cAAAA,GAAiBH,aAAaH,KAAAA,EAA6C;YACzEqB,qBAAAA,EAAuB,CAAA;AACvBK,YAAAA,WAAAA,EAAa,CAAC5B;AAChB,SAAA,CAAA;AACF,IAAA;AAEA,IAAA,OAAO6B,yBAAAA,CAASrB,cAAAA,CAAAA;AAClB;;;;"}

package/dist/admin/pages/ListView/components/TableCells/CellValue.mjs

@@ -0,0 +1,59 @@
+import parseISO from 'date-fns/parseISO';
+import toString from 'lodash/toString';
+import { useIntl } from 'react-intl';
+
+const CellValue = ({ isIdColumn = false, type, value })=>{
+    const { formatDate, formatTime, formatNumber, formatMessage } = useIntl();
+    let formattedValue = value;
+    if (type === 'date' && typeof value === 'string') {
+        formattedValue = formatDate(parseISO(value), {
+            dateStyle: 'full'
+        });
+    }
+    if (type === 'datetime') {
+        formattedValue = formatDate(value, {
+            dateStyle: 'full',
+            timeStyle: 'short'
+        });
+    }
+    if (type === 'time' && typeof value === 'string') {
+        const [hour, minute, second] = value.split(':');
+        const date = new Date();
+        date.setHours(Number(hour));
+        date.setMinutes(Number(minute));
+        date.setSeconds(Number(second));
+        formattedValue = formatTime(date, {
+            timeStyle: 'short'
+        });
+    }
+    if ([
+        'float',
+        'decimal'
+    ].includes(type)) {
+        formattedValue = formatNumber(value, {
+            // Should be kept in sync with the corresponding value
+            // in the design-system/NumberInput: https://github.com/strapi/design-system/blob/main/packages/strapi-design-system/src/NumberInput/NumberInput.js#L53
+            maximumFractionDigits: 20
+        });
+    }
+    if (type === 'boolean') {
+        const booleanValue = Boolean(value);
+        formattedValue = formatMessage({
+            id: booleanValue ? 'app.components.ToggleCheckbox.on-label' : 'app.components.ToggleCheckbox.off-label',
+            defaultMessage: booleanValue ? 'true' : 'false'
+        });
+    }
+    if ([
+        'integer',
+        'biginteger'
+    ].includes(type)) {
+        formattedValue = formatNumber(value, {
+            maximumFractionDigits: 0,
+            useGrouping: !isIdColumn
+        });
+    }
+    return toString(formattedValue);
+};
+
+export { CellValue };
+//# sourceMappingURL=CellValue.mjs.map

package/dist/admin/pages/ListView/components/TableCells/CellValue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellValue.mjs","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/CellValue.tsx"],"sourcesContent":["import parseISO from 'date-fns/parseISO';\r\nimport toString from 'lodash/toString';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport type { Schema } from '@strapi/types';\r\n\r\ninterface CellValueProps {\r\n  isIdColumn?: boolean;\r\n  type: Schema.Attribute.Kind | 'custom';\r\n  value: unknown;\r\n}\r\n\r\nconst CellValue = ({ isIdColumn = false, type, value }: CellValueProps) => {\r\n  const { formatDate, formatTime, formatNumber, formatMessage } = useIntl();\r\n  let formattedValue = value;\r\n\r\n  if (type === 'date' && typeof value === 'string') {\r\n    formattedValue = formatDate(parseISO(value), { dateStyle: 'full' });\r\n  }\r\n\r\n  if (type === 'datetime') {\r\n    formattedValue = formatDate(value as Parameters<typeof formatDate>[0], {\r\n      dateStyle: 'full',\r\n      timeStyle: 'short',\r\n    });\r\n  }\r\n\r\n  if (type === 'time' && typeof value === 'string') {\r\n    const [hour, minute, second] = value.split(':');\r\n    const date = new Date();\r\n    date.setHours(Number(hour));\r\n    date.setMinutes(Number(minute));\r\n    date.setSeconds(Number(second));\r\n\r\n    formattedValue = formatTime(date, {\r\n      timeStyle: 'short',\r\n    });\r\n  }\r\n\r\n  if (['float', 'decimal'].includes(type)) {\r\n    formattedValue = formatNumber(value as Parameters<typeof formatNumber>[0], {\r\n      // Should be kept in sync with the corresponding value\r\n      // in the design-system/NumberInput: https://github.com/strapi/design-system/blob/main/packages/strapi-design-system/src/NumberInput/NumberInput.js#L53\r\n      maximumFractionDigits: 20,\r\n    });\r\n  }\r\n\r\n  if (type === 'boolean') {\r\n    const booleanValue = Boolean(value);\r\n    formattedValue = formatMessage({\r\n      id: booleanValue\r\n        ? 'app.components.ToggleCheckbox.on-label'\r\n        : 'app.components.ToggleCheckbox.off-label',\r\n      defaultMessage: booleanValue ? 'true' : 'false',\r\n    });\r\n  }\r\n\r\n  if (['integer', 'biginteger'].includes(type)) {\r\n    formattedValue = formatNumber(value as Parameters<typeof formatNumber>[0], {\r\n      maximumFractionDigits: 0,\r\n      useGrouping: !isIdColumn,\r\n    });\r\n  }\r\n\r\n  return toString(formattedValue);\r\n};\r\n\r\nexport { CellValue };\r\nexport type { CellValueProps };\r\n"],"names":["CellValue","isIdColumn","type","value","formatDate","formatTime","formatNumber","formatMessage","useIntl","formattedValue","parseISO","dateStyle","timeStyle","hour","minute","second","split","date","Date","setHours","Number","setMinutes","setSeconds","includes","maximumFractionDigits","booleanValue","Boolean","id","defaultMessage","useGrouping","toString"],"mappings":";;;;AAYA,MAAMA,SAAAA,GAAY,CAAC,EAAEC,UAAAA,GAAa,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAkB,GAAA;IACpE,MAAM,EAAEC,UAAU,EAAEC,UAAU,EAAEC,YAAY,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAChE,IAAA,IAAIC,cAAAA,GAAiBN,KAAAA;AAErB,IAAA,IAAID,IAAAA,KAAS,MAAA,IAAU,OAAOC,KAAAA,KAAU,QAAA,EAAU;QAChDM,cAAAA,GAAiBL,UAAAA,CAAWM,SAASP,KAAAA,CAAAA,EAAQ;YAAEQ,SAAAA,EAAW;AAAO,SAAA,CAAA;AACnE,IAAA;AAEA,IAAA,IAAIT,SAAS,UAAA,EAAY;AACvBO,QAAAA,cAAAA,GAAiBL,WAAWD,KAAAA,EAA2C;YACrEQ,SAAAA,EAAW,MAAA;YACXC,SAAAA,EAAW;AACb,SAAA,CAAA;AACF,IAAA;AAEA,IAAA,IAAIV,IAAAA,KAAS,MAAA,IAAU,OAAOC,KAAAA,KAAU,QAAA,EAAU;AAChD,QAAA,MAAM,CAACU,IAAAA,EAAMC,MAAAA,EAAQC,OAAO,GAAGZ,KAAAA,CAAMa,KAAK,CAAC,GAAA,CAAA;AAC3C,QAAA,MAAMC,OAAO,IAAIC,IAAAA,EAAAA;QACjBD,IAAAA,CAAKE,QAAQ,CAACC,MAAAA,CAAOP,IAAAA,CAAAA,CAAAA;QACrBI,IAAAA,CAAKI,UAAU,CAACD,MAAAA,CAAON,MAAAA,CAAAA,CAAAA;QACvBG,IAAAA,CAAKK,UAAU,CAACF,MAAAA,CAAOL,MAAAA,CAAAA,CAAAA;AAEvBN,QAAAA,cAAAA,GAAiBJ,WAAWY,IAAAA,EAAM;YAChCL,SAAAA,EAAW;AACb,SAAA,CAAA;AACF,IAAA;IAEA,IAAI;AAAC,QAAA,OAAA;AAAS,QAAA;KAAU,CAACW,QAAQ,CAACrB,IAAAA,CAAAA,EAAO;AACvCO,QAAAA,cAAAA,GAAiBH,aAAaH,KAAAA,EAA6C;;;YAGzEqB,qBAAAA,EAAuB;AACzB,SAAA,CAAA;AACF,IAAA;AAEA,IAAA,IAAItB,SAAS,SAAA,EAAW;AACtB,QAAA,MAAMuB,eAAeC,OAAAA,CAAQvB,KAAAA,CAAAA;AAC7BM,QAAAA,cAAAA,GAAiBF,aAAAA,CAAc;AAC7BoB,YAAAA,EAAAA,EAAIF,eACA,wCAAA,GACA,yCAAA;AACJG,YAAAA,cAAAA,EAAgBH,eAAe,MAAA,GAAS;AAC1C,SAAA,CAAA;AACF,IAAA;IAEA,IAAI;AAAC,QAAA,SAAA;AAAW,QAAA;KAAa,CAACF,QAAQ,CAACrB,IAAAA,CAAAA,EAAO;AAC5CO,QAAAA,cAAAA,GAAiBH,aAAaH,KAAAA,EAA6C;YACzEqB,qBAAAA,EAAuB,CAAA;AACvBK,YAAAA,WAAAA,EAAa,CAAC5B;AAChB,SAAA,CAAA;AACF,IAAA;AAEA,IAAA,OAAO6B,QAAAA,CAASrB,cAAAA,CAAAA;AAClB;;;;"}

package/dist/admin/pages/ListView/components/TableCells/Components.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var CellValue = require('./CellValue.js');
+
+const SingleComponent = ({ content, mainField })=>{
+    if (!mainField) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+        label: content[mainField.name],
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+            maxWidth: "25rem",
+            textColor: "neutral800",
+            ellipsis: true,
+            children: /*#__PURE__*/ jsxRuntime.jsx(CellValue.CellValue, {
+                type: mainField.type,
+                value: content[mainField.name]
+            })
+        })
+    });
+};
+const RepeatableComponent = ({ content, mainField })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    if (!mainField) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Trigger, {
+                onClick: (e)=>e.stopPropagation(),
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Badge, {
+                        children: content.length
+                    }),
+                    formatMessage({
+                        id: 'content-manager.containers.list.items',
+                        defaultMessage: '{number, plural, =0 {items} one {item} other {items}}'
+                    }, {
+                        number: content.length
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Content, {
+                children: content.map((item)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        disabled: true,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            maxWidth: "50rem",
+                            ellipsis: true,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(CellValue.CellValue, {
+                                type: mainField.type,
+                                value: item[mainField.name]
+                            })
+                        })
+                    }, item.id))
+            })
+        ]
+    });
+};
+
+exports.RepeatableComponent = RepeatableComponent;
+exports.SingleComponent = SingleComponent;
+//# sourceMappingURL=Components.js.map

package/dist/admin/pages/ListView/components/TableCells/Components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Components.js","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/Components.tsx"],"sourcesContent":["import { Badge, Tooltip, Typography, Menu } from '@strapi/design-system';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport { CellContentProps } from './CellContent';\r\nimport { CellValue } from './CellValue';\r\n\r\nimport type { Schema } from '@strapi/types';\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * SingleComponent\r\n * -----------------------------------------------------------------------------------------------*/\r\n\r\ninterface SingleComponentProps extends Pick<CellContentProps, 'mainField'> {\r\n  content: Schema.Attribute.Value<Schema.Attribute.Component<`${string}.${string}`, false>>;\r\n}\r\n\r\nconst SingleComponent = ({ content, mainField }: SingleComponentProps) => {\r\n  if (!mainField) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <Tooltip label={content[mainField.name]}>\r\n      <Typography maxWidth=\"25rem\" textColor=\"neutral800\" ellipsis>\r\n        <CellValue type={mainField.type} value={content[mainField.name]} />\r\n      </Typography>\r\n    </Tooltip>\r\n  );\r\n};\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * RepeatableComponent\r\n * -----------------------------------------------------------------------------------------------*/\r\n\r\ninterface RepeatableComponentProps extends Pick<CellContentProps, 'mainField'> {\r\n  content: Schema.Attribute.Value<Schema.Attribute.Component<`${string}.${string}`, true>>;\r\n}\r\n\r\nconst RepeatableComponent = ({ content, mainField }: RepeatableComponentProps) => {\r\n  const { formatMessage } = useIntl();\r\n\r\n  if (!mainField) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <Menu.Root>\r\n      <Menu.Trigger onClick={(e) => e.stopPropagation()}>\r\n        <Badge>{content.length}</Badge>\r\n        {formatMessage(\r\n          {\r\n            id: 'content-manager.containers.list.items',\r\n            defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',\r\n          },\r\n          { number: content.length }\r\n        )}\r\n      </Menu.Trigger>\r\n      <Menu.Content>\r\n        {content.map((item) => (\r\n          <Menu.Item key={item.id} disabled>\r\n            <Typography maxWidth=\"50rem\" ellipsis>\r\n              <CellValue type={mainField.type} value={item[mainField.name]} />\r\n            </Typography>\r\n          </Menu.Item>\r\n        ))}\r\n      </Menu.Content>\r\n    </Menu.Root>\r\n  );\r\n};\r\n\r\nexport { SingleComponent, RepeatableComponent };\r\nexport type { SingleComponentProps, RepeatableComponentProps };\r\n"],"names":["SingleComponent","content","mainField","_jsx","Tooltip","label","name","Typography","maxWidth","textColor","ellipsis","CellValue","type","value","RepeatableComponent","formatMessage","useIntl","_jsxs","Menu","Root","Trigger","onClick","e","stopPropagation","Badge","length","id","defaultMessage","number","Content","map","item","Item","disabled"],"mappings":";;;;;;;AAgBA,MAAMA,kBAAkB,CAAC,EAAEC,OAAO,EAAEC,SAAS,EAAwB,GAAA;AACnE,IAAA,IAAI,CAACA,SAAAA,EAAW;QACd,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,qBACEC,cAAA,CAACC,oBAAAA,EAAAA;AAAQC,QAAAA,KAAAA,EAAOJ,OAAO,CAACC,SAAAA,CAAUI,IAAI,CAAC;AACrC,QAAA,QAAA,gBAAAH,cAAA,CAACI,uBAAAA,EAAAA;YAAWC,QAAAA,EAAS,OAAA;YAAQC,SAAAA,EAAU,YAAA;YAAaC,QAAQ,EAAA,IAAA;AAC1D,YAAA,QAAA,gBAAAP,cAAA,CAACQ,mBAAAA,EAAAA;AAAUC,gBAAAA,IAAAA,EAAMV,UAAUU,IAAI;AAAEC,gBAAAA,KAAAA,EAAOZ,OAAO,CAACC,SAAAA,CAAUI,IAAI;;;;AAItE;AAUA,MAAMQ,sBAAsB,CAAC,EAAEb,OAAO,EAAEC,SAAS,EAA4B,GAAA;IAC3E,MAAM,EAAEa,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,IAAI,CAACd,SAAAA,EAAW;QACd,OAAO,IAAA;AACT,IAAA;IAEA,qBACEe,eAAA,CAACC,kBAAKC,IAAI,EAAA;;AACR,0BAAAF,eAAA,CAACC,kBAAKE,OAAO,EAAA;gBAACC,OAAAA,EAAS,CAACC,CAAAA,GAAMA,CAAAA,CAAEC,eAAe,EAAA;;kCAC7CpB,cAAA,CAACqB,kBAAAA,EAAAA;AAAOvB,wBAAAA,QAAAA,EAAAA,OAAAA,CAAQwB;;oBACfV,aAAAA,CACC;wBACEW,EAAAA,EAAI,uCAAA;wBACJC,cAAAA,EAAgB;qBAClB,EACA;AAAEC,wBAAAA,MAAAA,EAAQ3B,QAAQwB;AAAO,qBAAA;;;AAG7B,0BAAAtB,cAAA,CAACe,kBAAKW,OAAO,EAAA;AACV5B,gBAAAA,QAAAA,EAAAA,OAAAA,CAAQ6B,GAAG,CAAC,CAACC,IAAAA,iBACZ5B,cAAA,CAACe,kBAAKc,IAAI,EAAA;wBAAeC,QAAQ,EAAA,IAAA;AAC/B,wBAAA,QAAA,gBAAA9B,cAAA,CAACI,uBAAAA,EAAAA;4BAAWC,QAAAA,EAAS,OAAA;4BAAQE,QAAQ,EAAA,IAAA;AACnC,4BAAA,QAAA,gBAAAP,cAAA,CAACQ,mBAAAA,EAAAA;AAAUC,gCAAAA,IAAAA,EAAMV,UAAUU,IAAI;AAAEC,gCAAAA,KAAAA,EAAOkB,IAAI,CAAC7B,SAAAA,CAAUI,IAAI;;;AAF/CyB,qBAAAA,EAAAA,IAAAA,CAAKL,EAAE,CAAA;;;;AASjC;;;;;"}

package/dist/admin/pages/ListView/components/TableCells/Components.mjs

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Menu, Badge, Typography, Tooltip } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { CellValue } from './CellValue.mjs';
+
+const SingleComponent = ({ content, mainField })=>{
+    if (!mainField) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx(Tooltip, {
+        label: content[mainField.name],
+        children: /*#__PURE__*/ jsx(Typography, {
+            maxWidth: "25rem",
+            textColor: "neutral800",
+            ellipsis: true,
+            children: /*#__PURE__*/ jsx(CellValue, {
+                type: mainField.type,
+                value: content[mainField.name]
+            })
+        })
+    });
+};
+const RepeatableComponent = ({ content, mainField })=>{
+    const { formatMessage } = useIntl();
+    if (!mainField) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxs(Menu.Root, {
+        children: [
+            /*#__PURE__*/ jsxs(Menu.Trigger, {
+                onClick: (e)=>e.stopPropagation(),
+                children: [
+                    /*#__PURE__*/ jsx(Badge, {
+                        children: content.length
+                    }),
+                    formatMessage({
+                        id: 'content-manager.containers.list.items',
+                        defaultMessage: '{number, plural, =0 {items} one {item} other {items}}'
+                    }, {
+                        number: content.length
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Menu.Content, {
+                children: content.map((item)=>/*#__PURE__*/ jsx(Menu.Item, {
+                        disabled: true,
+                        children: /*#__PURE__*/ jsx(Typography, {
+                            maxWidth: "50rem",
+                            ellipsis: true,
+                            children: /*#__PURE__*/ jsx(CellValue, {
+                                type: mainField.type,
+                                value: item[mainField.name]
+                            })
+                        })
+                    }, item.id))
+            })
+        ]
+    });
+};
+
+export { RepeatableComponent, SingleComponent };
+//# sourceMappingURL=Components.mjs.map

package/dist/admin/pages/ListView/components/TableCells/Components.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Components.mjs","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/Components.tsx"],"sourcesContent":["import { Badge, Tooltip, Typography, Menu } from '@strapi/design-system';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport { CellContentProps } from './CellContent';\r\nimport { CellValue } from './CellValue';\r\n\r\nimport type { Schema } from '@strapi/types';\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * SingleComponent\r\n * -----------------------------------------------------------------------------------------------*/\r\n\r\ninterface SingleComponentProps extends Pick<CellContentProps, 'mainField'> {\r\n  content: Schema.Attribute.Value<Schema.Attribute.Component<`${string}.${string}`, false>>;\r\n}\r\n\r\nconst SingleComponent = ({ content, mainField }: SingleComponentProps) => {\r\n  if (!mainField) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <Tooltip label={content[mainField.name]}>\r\n      <Typography maxWidth=\"25rem\" textColor=\"neutral800\" ellipsis>\r\n        <CellValue type={mainField.type} value={content[mainField.name]} />\r\n      </Typography>\r\n    </Tooltip>\r\n  );\r\n};\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * RepeatableComponent\r\n * -----------------------------------------------------------------------------------------------*/\r\n\r\ninterface RepeatableComponentProps extends Pick<CellContentProps, 'mainField'> {\r\n  content: Schema.Attribute.Value<Schema.Attribute.Component<`${string}.${string}`, true>>;\r\n}\r\n\r\nconst RepeatableComponent = ({ content, mainField }: RepeatableComponentProps) => {\r\n  const { formatMessage } = useIntl();\r\n\r\n  if (!mainField) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <Menu.Root>\r\n      <Menu.Trigger onClick={(e) => e.stopPropagation()}>\r\n        <Badge>{content.length}</Badge>\r\n        {formatMessage(\r\n          {\r\n            id: 'content-manager.containers.list.items',\r\n            defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',\r\n          },\r\n          { number: content.length }\r\n        )}\r\n      </Menu.Trigger>\r\n      <Menu.Content>\r\n        {content.map((item) => (\r\n          <Menu.Item key={item.id} disabled>\r\n            <Typography maxWidth=\"50rem\" ellipsis>\r\n              <CellValue type={mainField.type} value={item[mainField.name]} />\r\n            </Typography>\r\n          </Menu.Item>\r\n        ))}\r\n      </Menu.Content>\r\n    </Menu.Root>\r\n  );\r\n};\r\n\r\nexport { SingleComponent, RepeatableComponent };\r\nexport type { SingleComponentProps, RepeatableComponentProps };\r\n"],"names":["SingleComponent","content","mainField","_jsx","Tooltip","label","name","Typography","maxWidth","textColor","ellipsis","CellValue","type","value","RepeatableComponent","formatMessage","useIntl","_jsxs","Menu","Root","Trigger","onClick","e","stopPropagation","Badge","length","id","defaultMessage","number","Content","map","item","Item","disabled"],"mappings":";;;;;AAgBA,MAAMA,kBAAkB,CAAC,EAAEC,OAAO,EAAEC,SAAS,EAAwB,GAAA;AACnE,IAAA,IAAI,CAACA,SAAAA,EAAW;QACd,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,qBACEC,GAAA,CAACC,OAAAA,EAAAA;AAAQC,QAAAA,KAAAA,EAAOJ,OAAO,CAACC,SAAAA,CAAUI,IAAI,CAAC;AACrC,QAAA,QAAA,gBAAAH,GAAA,CAACI,UAAAA,EAAAA;YAAWC,QAAAA,EAAS,OAAA;YAAQC,SAAAA,EAAU,YAAA;YAAaC,QAAQ,EAAA,IAAA;AAC1D,YAAA,QAAA,gBAAAP,GAAA,CAACQ,SAAAA,EAAAA;AAAUC,gBAAAA,IAAAA,EAAMV,UAAUU,IAAI;AAAEC,gBAAAA,KAAAA,EAAOZ,OAAO,CAACC,SAAAA,CAAUI,IAAI;;;;AAItE;AAUA,MAAMQ,sBAAsB,CAAC,EAAEb,OAAO,EAAEC,SAAS,EAA4B,GAAA;IAC3E,MAAM,EAAEa,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,IAAI,CAACd,SAAAA,EAAW;QACd,OAAO,IAAA;AACT,IAAA;IAEA,qBACEe,IAAA,CAACC,KAAKC,IAAI,EAAA;;AACR,0BAAAF,IAAA,CAACC,KAAKE,OAAO,EAAA;gBAACC,OAAAA,EAAS,CAACC,CAAAA,GAAMA,CAAAA,CAAEC,eAAe,EAAA;;kCAC7CpB,GAAA,CAACqB,KAAAA,EAAAA;AAAOvB,wBAAAA,QAAAA,EAAAA,OAAAA,CAAQwB;;oBACfV,aAAAA,CACC;wBACEW,EAAAA,EAAI,uCAAA;wBACJC,cAAAA,EAAgB;qBAClB,EACA;AAAEC,wBAAAA,MAAAA,EAAQ3B,QAAQwB;AAAO,qBAAA;;;AAG7B,0BAAAtB,GAAA,CAACe,KAAKW,OAAO,EAAA;AACV5B,gBAAAA,QAAAA,EAAAA,OAAAA,CAAQ6B,GAAG,CAAC,CAACC,IAAAA,iBACZ5B,GAAA,CAACe,KAAKc,IAAI,EAAA;wBAAeC,QAAQ,EAAA,IAAA;AAC/B,wBAAA,QAAA,gBAAA9B,GAAA,CAACI,UAAAA,EAAAA;4BAAWC,QAAAA,EAAS,OAAA;4BAAQE,QAAQ,EAAA,IAAA;AACnC,4BAAA,QAAA,gBAAAP,GAAA,CAACQ,SAAAA,EAAAA;AAAUC,gCAAAA,IAAAA,EAAMV,UAAUU,IAAI;AAAEC,gCAAAA,KAAAA,EAAOkB,IAAI,CAAC7B,SAAAA,CAAUI,IAAI;;;AAF/CyB,qBAAAA,EAAAA,IAAAA,CAAKL,EAAE,CAAA;;;;AASjC;;;;"}

package/dist/admin/pages/ListView/components/TableCells/Media.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+var styledComponents = require('styled-components');
+var urls = require('../../../../utils/urls.js');
+
+const getFileExtension = (ext)=>ext && ext[0] === '.' ? ext.substring(1) : ext;
+const MediaSingle = ({ url, mime, alternativeText, name, ext, formats })=>{
+    const fileURL = urls.prefixFileUrlWithBackendUrl(url);
+    if (mime?.includes('image')) {
+        const thumbnail = formats?.thumbnail?.url;
+        const mediaURL = urls.prefixFileUrlWithBackendUrl(thumbnail) || fileURL;
+        const mediaLabel = alternativeText || name || undefined;
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Avatar.Item, {
+            src: mediaURL,
+            alt: mediaLabel,
+            fallback: mediaLabel,
+            preview: true
+        });
+    }
+    const fileExtension = getFileExtension(ext);
+    const fileName = name && name.length > 100 ? `${name.substring(0, 100)}...` : name;
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+        label: fileName,
+        children: /*#__PURE__*/ jsxRuntime.jsx("span", {
+            children: /*#__PURE__*/ jsxRuntime.jsx(FileWrapper, {
+                children: fileExtension
+            })
+        })
+    });
+};
+const FileWrapper = ({ children })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+        tag: "span",
+        position: "relative",
+        borderRadius: "50%",
+        width: "26px",
+        height: "26px",
+        borderColor: "neutral200",
+        background: "neutral150",
+        paddingLeft: "1px",
+        justifyContent: "center",
+        alignItems: "center",
+        children: /*#__PURE__*/ jsxRuntime.jsx(FileTypography, {
+            variant: "sigma",
+            textColor: "neutral600",
+            children: children
+        })
+    });
+};
+const FileTypography = styledComponents.styled(designSystem.Typography)`
+  font-size: 0.9rem;
+  line-height: 0.9rem;
+`;
+const MediaMultiple = ({ content })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Avatar.Group, {
+        children: content.map((file, index)=>{
+            const key = `${file.id}${index}`;
+            if (index === 3) {
+                const remainingFiles = `+${content.length - 3}`;
+                return /*#__PURE__*/ jsxRuntime.jsx(FileWrapper, {
+                    children: remainingFiles
+                }, key);
+            }
+            if (index > 3) {
+                return null;
+            }
+            return /*#__PURE__*/ jsxRuntime.jsx(MediaSingle, {
+                ...file
+            }, key);
+        })
+    });
+};
+
+exports.MediaMultiple = MediaMultiple;
+exports.MediaSingle = MediaSingle;
+//# sourceMappingURL=Media.js.map

package/dist/admin/pages/ListView/components/TableCells/Media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Media.js","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/Media.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { Avatar, Flex, Tooltip, Typography, TypographyComponent } from '@strapi/design-system';\r\nimport { styled } from 'styled-components';\r\n\r\nimport { prefixFileUrlWithBackendUrl } from '../../../../utils/urls';\r\n\r\nimport type { Data } from '@strapi/types';\r\n\r\ninterface MediaFile {\r\n  id?: Data.ID;\r\n  alternativeText?: string;\r\n  ext: string;\r\n  formats: {\r\n    thumbnail?: {\r\n      url?: string;\r\n    };\r\n  };\r\n  mime?: string | null;\r\n  name?: string | null;\r\n  url: string;\r\n}\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * Media\r\n * -----------------------------------------------------------------------------------------------*/\r\n\r\ninterface MediaSingleProps extends MediaFile {}\r\n\r\nconst getFileExtension = (ext: string) => (ext && ext[0] === '.' ? ext.substring(1) : ext);\r\n\r\nconst MediaSingle = ({ url, mime, alternativeText, name, ext, formats }: MediaSingleProps) => {\r\n  const fileURL = prefixFileUrlWithBackendUrl(url)!;\r\n\r\n  if (mime?.includes('image')) {\r\n    const thumbnail = formats?.thumbnail?.url;\r\n    const mediaURL = prefixFileUrlWithBackendUrl(thumbnail) || fileURL;\r\n    const mediaLabel = alternativeText || name || undefined;\r\n\r\n    return <Avatar.Item src={mediaURL} alt={mediaLabel} fallback={mediaLabel} preview />;\r\n  }\r\n\r\n  const fileExtension = getFileExtension(ext);\r\n  const fileName = name && name.length > 100 ? `${name.substring(0, 100)}...` : name;\r\n\r\n  return (\r\n    <Tooltip label={fileName}>\r\n      <span>\r\n        <FileWrapper>{fileExtension}</FileWrapper>\r\n      </span>\r\n    </Tooltip>\r\n  );\r\n};\r\n\r\nconst FileWrapper = ({ children }: { children: React.ReactNode }) => {\r\n  return (\r\n    <Flex\r\n      tag=\"span\"\r\n      position=\"relative\"\r\n      borderRadius=\"50%\"\r\n      width=\"26px\"\r\n      height=\"26px\"\r\n      borderColor=\"neutral200\"\r\n      background=\"neutral150\"\r\n      paddingLeft=\"1px\"\r\n      justifyContent=\"center\"\r\n      alignItems=\"center\"\r\n    >\r\n      <FileTypography variant=\"sigma\" textColor=\"neutral600\">\r\n        {children}\r\n      </FileTypography>\r\n    </Flex>\r\n  );\r\n};\r\n\r\nconst FileTypography = styled<TypographyComponent>(Typography)`\r\n  font-size: 0.9rem;\r\n  line-height: 0.9rem;\r\n`;\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * MediaMultiple\r\n * -----------------------------------------------------------------------------------------------*/\r\n\r\ninterface MediaMultipleProps {\r\n  content: MediaFile[];\r\n}\r\n\r\nconst MediaMultiple = ({ content }: MediaMultipleProps) => {\r\n  return (\r\n    <Avatar.Group>\r\n      {content.map((file, index) => {\r\n        const key = `${file.id}${index}`;\r\n\r\n        if (index === 3) {\r\n          const remainingFiles = `+${content.length - 3}`;\r\n\r\n          return <FileWrapper key={key}>{remainingFiles}</FileWrapper>;\r\n        }\r\n\r\n        if (index > 3) {\r\n          return null;\r\n        }\r\n\r\n        return <MediaSingle key={key} {...file} />;\r\n      })}\r\n    </Avatar.Group>\r\n  );\r\n};\r\n\r\nexport { MediaMultiple, MediaSingle };\r\nexport type { MediaMultipleProps, MediaSingleProps };\r\n"],"names":["getFileExtension","ext","substring","MediaSingle","url","mime","alternativeText","name","formats","fileURL","prefixFileUrlWithBackendUrl","includes","thumbnail","mediaURL","mediaLabel","undefined","_jsx","Avatar","Item","src","alt","fallback","preview","fileExtension","fileName","length","Tooltip","label","span","FileWrapper","children","Flex","tag","position","borderRadius","width","height","borderColor","background","paddingLeft","justifyContent","alignItems","FileTypography","variant","textColor","styled","Typography","MediaMultiple","content","Group","map","file","index","key","id","remainingFiles"],"mappings":"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"}