@strapi/content-manager 0.0.0-next.929f36e7cd2888f97e66b5159baa15234a283fca → 0.0.0-next.92e60e369ae0e382a5d486de347f6d286ab22987

package/dist/admin/pages/ListView/components/TableActions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableActions.mjs","sources":["../../../../../admin/src/pages/ListView/components/TableActions.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  DescriptionComponentRenderer,\n  useNotification,\n  useStrapiApp,\n  useQueryParams,\n} from '@strapi/admin/strapi-admin';\nimport { Button, LinkButton, Modal } from '@strapi/design-system';\nimport { Duplicate, Pencil } from '@strapi/icons';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { NavLink, useNavigate } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useDocumentRBAC } from '../../../features/DocumentRBAC';\nimport { Document, useDoc } from '../../../hooks/useDocument';\nimport { useDocumentActions } from '../../../hooks/useDocumentActions';\nimport { isBaseQueryError } from '../../../utils/api';\nimport { DocumentActionsMenu } from '../../EditView/components/DocumentActions';\n\nimport { AutoCloneFailureModalBody } from './AutoCloneFailureModal';\n\nimport type { ProhibitedCloningField } from '../../../../../shared/contracts/collection-types';\nimport type {\n  ContentManagerPlugin,\n  DocumentActionComponent,\n  DocumentActionProps,\n} from '../../../content-manager';\n\n/* -------------------------------------------------------------------------------------------------\n * TableActions\n * -----------------------------------------------------------------------------------------------*/\n\ninterface TableActionsProps {\n  document: Document;\n}\n\nconst TableActions = ({ document }: TableActionsProps) => {\n  const { formatMessage } = useIntl();\n  const { model, collectionType } = useDoc();\n  const plugins = useStrapiApp('TableActions', (state) => state.plugins);\n\n  const props: DocumentActionProps = {\n    activeTab: null,\n    model,\n    documentId: document.documentId,\n    collectionType,\n    document,\n  };\n\n  return (\n    <DescriptionComponentRenderer\n      props={props}\n      descriptions={(plugins['content-manager'].apis as ContentManagerPlugin['config']['apis'])\n        .getDocumentActions('table-row')\n        // We explicitly remove the PublishAction from description so we never render it and we don't make unnecessary requests.\n        .filter((action) => action.name !== 'PublishAction')}\n    >\n      {(actions) => {\n        const tableRowActions = actions.filter((action) => {\n          const positions = Array.isArray(action.position) ? action.position : [action.position];\n          return positions.includes('table-row');\n        });\n\n        return (\n          <DocumentActionsMenu\n            actions={tableRowActions}\n            label={formatMessage({\n              id: 'content-manager.containers.list.table.row-actions',\n              defaultMessage: 'Row actions',\n            })}\n            variant=\"ghost\"\n          />\n        );\n      }}\n    </DescriptionComponentRenderer>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * TableActionComponents\n * -----------------------------------------------------------------------------------------------*/\n\nconst EditAction: DocumentActionComponent = ({ documentId }) => {\n  const navigate = useNavigate();\n  const { formatMessage } = useIntl();\n  const { canRead } = useDocumentRBAC('EditAction', ({ canRead }) => ({ canRead }));\n  const { toggleNotification } = useNotification();\n  const [{ query }] = useQueryParams<{ plugins?: object }>();\n\n  return {\n    disabled: !canRead,\n    icon: <StyledPencil />,\n    label: formatMessage({\n      id: 'content-manager.actions.edit.label',\n      defaultMessage: 'Edit',\n    }),\n    position: 'table-row',\n    onClick: async () => {\n      if (!documentId) {\n        console.error(\n          \"You're trying to edit a document without an id, this is likely a bug with Strapi. Please open an issue.\"\n        );\n\n        toggleNotification({\n          message: formatMessage({\n            id: 'content-manager.actions.edit.error',\n            defaultMessage: 'An error occurred while trying to edit the document.',\n          }),\n          type: 'danger',\n        });\n\n        return;\n      }\n\n      navigate({\n        pathname: documentId,\n        search: stringify({\n          plugins: query.plugins,\n        }),\n      });\n    },\n  };\n};\n\nEditAction.type = 'edit';\nEditAction.position = 'table-row';\n\n/**\n * Because the icon system is completely broken, we have to do\n * this to remove the fill from the cog.\n */\nconst StyledPencil = styled(Pencil)`\n  path {\n    fill: currentColor;\n  }\n`;\n\nconst CloneAction: DocumentActionComponent = ({ model, documentId }) => {\n  const navigate = useNavigate();\n  const { formatMessage } = useIntl();\n  const { canCreate } = useDocumentRBAC('CloneAction', ({ canCreate }) => ({ canCreate }));\n  const { toggleNotification } = useNotification();\n  const { autoClone } = useDocumentActions();\n  const [prohibitedFields, setProhibitedFields] = React.useState<ProhibitedCloningField[]>([]);\n\n  return {\n    disabled: !canCreate,\n    icon: <StyledDuplicate />,\n    label: formatMessage({\n      id: 'content-manager.actions.clone.label',\n      defaultMessage: 'Duplicate',\n    }),\n    position: 'table-row',\n    onClick: async () => {\n      if (!documentId) {\n        console.error(\n          \"You're trying to clone a document in the table without an id, this is likely a bug with Strapi. Please open an issue.\"\n        );\n\n        toggleNotification({\n          message: formatMessage({\n            id: 'content-manager.actions.clone.error',\n            defaultMessage: 'An error occurred while trying to clone the document.',\n          }),\n          type: 'danger',\n        });\n\n        return;\n      }\n\n      const res = await autoClone({ model, sourceId: documentId });\n\n      if ('data' in res) {\n        navigate(res.data.documentId);\n\n        /**\n         * We return true because we don't need to show a modal anymore.\n         */\n        return true;\n      }\n\n      if (\n        isBaseQueryError(res.error) &&\n        res.error.details &&\n        typeof res.error.details === 'object' &&\n        'prohibitedFields' in res.error.details &&\n        Array.isArray(res.error.details.prohibitedFields)\n      ) {\n        const prohibitedFields = res.error.details.prohibitedFields as ProhibitedCloningField[];\n\n        setProhibitedFields(prohibitedFields);\n      }\n    },\n    dialog: {\n      type: 'modal',\n      title: formatMessage({\n        id: 'content-manager.containers.list.autoCloneModal.header',\n        defaultMessage: 'Duplicate',\n      }),\n      content: <AutoCloneFailureModalBody prohibitedFields={prohibitedFields} />,\n      footer: ({ onClose }) => {\n        return (\n          <Modal.Footer>\n            <Button onClick={onClose} variant=\"tertiary\">\n              {formatMessage({\n                id: 'cancel',\n                defaultMessage: 'Cancel',\n              })}\n            </Button>\n            <LinkButton\n              tag={NavLink}\n              to={{\n                pathname: `clone/${documentId}`,\n              }}\n            >\n              {formatMessage({\n                id: 'content-manager.containers.list.autoCloneModal.create',\n                defaultMessage: 'Create',\n              })}\n            </LinkButton>\n          </Modal.Footer>\n        );\n      },\n    },\n  };\n};\n\nCloneAction.type = 'clone';\nCloneAction.position = 'table-row';\n\n/**\n * Because the icon system is completely broken, we have to do\n * this to remove the fill from the cog.\n */\nconst StyledDuplicate = styled(Duplicate)`\n  path {\n    fill: currentColor;\n  }\n`;\n\nconst DEFAULT_TABLE_ROW_ACTIONS = [EditAction, CloneAction];\n\nexport { TableActions, DEFAULT_TABLE_ROW_ACTIONS };\n"],"names":["TableActions","document","formatMessage","useIntl","model","collectionType","useDoc","plugins","useStrapiApp","state","props","activeTab","documentId","_jsx","DescriptionComponentRenderer","descriptions","apis","getDocumentActions","filter","action","name","actions","tableRowActions","positions","Array","isArray","position","includes","DocumentActionsMenu","label","id","defaultMessage","variant","EditAction","navigate","useNavigate","canRead","useDocumentRBAC","toggleNotification","useNotification","query","useQueryParams","disabled","icon","StyledPencil","onClick","console","error","message","type","pathname","search","stringify","styled","Pencil","CloneAction","canCreate","autoClone","useDocumentActions","prohibitedFields","setProhibitedFields","React","useState","StyledDuplicate","res","sourceId","data","isBaseQueryError","details","dialog","title","content","AutoCloneFailureModalBody","footer","onClose","_jsxs","Modal","Footer","Button","LinkButton","tag","NavLink","to","Duplicate","DEFAULT_TABLE_ROW_ACTIONS"],"mappings":"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"}
+{"version":3,"file":"TableActions.mjs","sources":["../../../../../admin/src/pages/ListView/components/TableActions.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  DescriptionComponentRenderer,\n  useNotification,\n  useStrapiApp,\n  useQueryParams,\n} from '@strapi/admin/strapi-admin';\nimport { Button, LinkButton, Modal } from '@strapi/design-system';\nimport { Duplicate, Pencil } from '@strapi/icons';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { NavLink, useNavigate } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useDocumentRBAC } from '../../../features/DocumentRBAC';\nimport { Document, useDoc } from '../../../hooks/useDocument';\nimport { useDocumentActions } from '../../../hooks/useDocumentActions';\nimport { isBaseQueryError } from '../../../utils/api';\nimport { DocumentActionsMenu } from '../../EditView/components/DocumentActions';\n\nimport { AutoCloneFailureModalBody } from './AutoCloneFailureModal';\n\nimport type { ProhibitedCloningField } from '../../../../../shared/contracts/collection-types';\nimport type {\n  ContentManagerPlugin,\n  DocumentActionComponent,\n  DocumentActionProps,\n} from '../../../content-manager';\n\n/* -------------------------------------------------------------------------------------------------\n * TableActions\n * -----------------------------------------------------------------------------------------------*/\n\ninterface TableActionsProps {\n  document: Document;\n}\n\nconst TableActions = ({ document }: TableActionsProps) => {\n  const { formatMessage } = useIntl();\n  const { model, collectionType } = useDoc();\n  const plugins = useStrapiApp('TableActions', (state) => state.plugins);\n\n  const props: DocumentActionProps = {\n    activeTab: null,\n    model,\n    documentId: document.documentId,\n    collectionType,\n    document,\n  };\n\n  return (\n    <DescriptionComponentRenderer\n      props={props}\n      descriptions={(plugins['content-manager'].apis as ContentManagerPlugin['config']['apis'])\n        .getDocumentActions('table-row')\n        // We explicitly remove the PublishAction from description so we never render it and we don't make unnecessary requests.\n        .filter((action) => action.name !== 'PublishAction')}\n    >\n      {(actions) => {\n        const tableRowActions = actions.filter((action) => {\n          const positions = Array.isArray(action.position) ? action.position : [action.position];\n          return positions.includes('table-row');\n        });\n\n        return (\n          <DocumentActionsMenu\n            actions={tableRowActions}\n            label={formatMessage({\n              id: 'content-manager.containers.list.table.row-actions',\n              defaultMessage: 'Row actions',\n            })}\n            variant=\"ghost\"\n          />\n        );\n      }}\n    </DescriptionComponentRenderer>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * TableActionComponents\n * -----------------------------------------------------------------------------------------------*/\n\nconst EditAction: DocumentActionComponent = ({ documentId }) => {\n  const navigate = useNavigate();\n  const { formatMessage } = useIntl();\n  const { canRead } = useDocumentRBAC('EditAction', ({ canRead }) => ({ canRead }));\n  const { toggleNotification } = useNotification();\n  const [{ query }] = useQueryParams<{ plugins?: object }>();\n\n  return {\n    disabled: !canRead,\n    icon: <StyledPencil />,\n    label: formatMessage({\n      id: 'content-manager.actions.edit.label',\n      defaultMessage: 'Edit',\n    }),\n    position: 'table-row',\n    onClick: async () => {\n      if (!documentId) {\n        console.error(\n          \"You're trying to edit a document without an id, this is likely a bug with Strapi. Please open an issue.\"\n        );\n\n        toggleNotification({\n          message: formatMessage({\n            id: 'content-manager.actions.edit.error',\n            defaultMessage: 'An error occurred while trying to edit the document.',\n          }),\n          type: 'danger',\n        });\n\n        return;\n      }\n\n      navigate({\n        pathname: documentId,\n        search: stringify({\n          plugins: query.plugins,\n        }),\n      });\n    },\n  };\n};\n\nEditAction.type = 'edit';\nEditAction.position = 'table-row';\n\n/**\n * Because the icon system is completely broken, we have to do\n * this to remove the fill from the cog.\n */\nconst StyledPencil = styled(Pencil)`\n  path {\n    fill: currentColor;\n  }\n`;\n\nconst CloneAction: DocumentActionComponent = ({ model, documentId }) => {\n  const navigate = useNavigate();\n  const { formatMessage } = useIntl();\n  const { canCreate } = useDocumentRBAC('CloneAction', ({ canCreate }) => ({ canCreate }));\n  const { toggleNotification } = useNotification();\n  const { autoClone } = useDocumentActions();\n  const [prohibitedFields, setProhibitedFields] = React.useState<ProhibitedCloningField[]>([]);\n  const [{ query }] = useQueryParams<{ plugins?: Record<string, any> }>();\n\n  return {\n    disabled: !canCreate,\n    icon: <StyledDuplicate />,\n    label: formatMessage({\n      id: 'content-manager.actions.clone.label',\n      defaultMessage: 'Duplicate',\n    }),\n    position: 'table-row',\n    onClick: async () => {\n      if (!documentId) {\n        console.error(\n          \"You're trying to clone a document in the table without an id, this is likely a bug with Strapi. Please open an issue.\"\n        );\n\n        toggleNotification({\n          message: formatMessage({\n            id: 'content-manager.actions.clone.error',\n            defaultMessage: 'An error occurred while trying to clone the document.',\n          }),\n          type: 'danger',\n        });\n\n        return;\n      }\n\n      const res = await autoClone({\n        model,\n        sourceId: documentId,\n        locale: query.plugins?.i18n?.locale,\n      });\n\n      if ('data' in res) {\n        navigate({\n          pathname: res.data.documentId,\n          search: stringify({\n            plugins: query.plugins,\n          }),\n        });\n\n        /**\n         * We return true because we don't need to show a modal anymore.\n         */\n        return true;\n      }\n\n      if (\n        isBaseQueryError(res.error) &&\n        res.error.details &&\n        typeof res.error.details === 'object' &&\n        'prohibitedFields' in res.error.details &&\n        Array.isArray(res.error.details.prohibitedFields)\n      ) {\n        const prohibitedFields = res.error.details.prohibitedFields as ProhibitedCloningField[];\n\n        setProhibitedFields(prohibitedFields);\n      }\n    },\n    dialog: {\n      type: 'modal',\n      title: formatMessage({\n        id: 'content-manager.containers.list.autoCloneModal.header',\n        defaultMessage: 'Duplicate',\n      }),\n      content: <AutoCloneFailureModalBody prohibitedFields={prohibitedFields} />,\n      footer: ({ onClose }) => {\n        return (\n          <Modal.Footer>\n            <Button onClick={onClose} variant=\"tertiary\">\n              {formatMessage({\n                id: 'cancel',\n                defaultMessage: 'Cancel',\n              })}\n            </Button>\n            <LinkButton\n              tag={NavLink}\n              to={{\n                pathname: `clone/${documentId}`,\n                search: stringify({\n                  plugins: query.plugins,\n                }),\n              }}\n            >\n              {formatMessage({\n                id: 'content-manager.containers.list.autoCloneModal.create',\n                defaultMessage: 'Create',\n              })}\n            </LinkButton>\n          </Modal.Footer>\n        );\n      },\n    },\n  };\n};\n\nCloneAction.type = 'clone';\nCloneAction.position = 'table-row';\n\n/**\n * Because the icon system is completely broken, we have to do\n * this to remove the fill from the cog.\n */\nconst StyledDuplicate = styled(Duplicate)`\n  path {\n    fill: currentColor;\n  }\n`;\n\nconst DEFAULT_TABLE_ROW_ACTIONS = [EditAction, CloneAction];\n\nexport { TableActions, DEFAULT_TABLE_ROW_ACTIONS };\n"],"names":["TableActions","document","formatMessage","useIntl","model","collectionType","useDoc","plugins","useStrapiApp","state","props","activeTab","documentId","_jsx","DescriptionComponentRenderer","descriptions","apis","getDocumentActions","filter","action","name","actions","tableRowActions","positions","Array","isArray","position","includes","DocumentActionsMenu","label","id","defaultMessage","variant","EditAction","navigate","useNavigate","canRead","useDocumentRBAC","toggleNotification","useNotification","query","useQueryParams","disabled","icon","StyledPencil","onClick","console","error","message","type","pathname","search","stringify","styled","Pencil","CloneAction","canCreate","autoClone","useDocumentActions","prohibitedFields","setProhibitedFields","React","useState","StyledDuplicate","res","sourceId","locale","i18n","data","isBaseQueryError","details","dialog","title","content","AutoCloneFailureModalBody","footer","onClose","_jsxs","Modal","Footer","Button","LinkButton","tag","NavLink","to","Duplicate","DEFAULT_TABLE_ROW_ACTIONS"],"mappings":"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"}

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

@@ -55,7 +55,7 @@ const CellContent = ({ content, mainField, attribute, rowId, name })=>{
             });
         case 'string':
             return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
-                description: content,
+                label: content,
                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
                     maxWidth: "30rem",
                     ellipsis: true,

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

@@ -1 +1 @@
-{"version":3,"file":"CellContent.js","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/CellContent.tsx"],"sourcesContent":["import { Tooltip, Typography } from '@strapi/design-system';\nimport isEmpty from 'lodash/isEmpty';\n\nimport { CellValue } from './CellValue';\nimport { SingleComponent, RepeatableComponent } from './Components';\nimport { MediaSingle, MediaMultiple } from './Media';\nimport { RelationMultiple, RelationSingle } from './Relations';\n\nimport type { ListFieldLayout } from '../../../../hooks/useDocumentLayout';\nimport type { Schema, Data } from '@strapi/types';\n\ninterface CellContentProps extends Omit<ListFieldLayout, 'cellFormatter'> {\n  content: Schema.Attribute.Value<Schema.Attribute.AnyAttribute>;\n  rowId: Data.ID;\n}\n\nconst CellContent = ({ content, mainField, attribute, rowId, name }: CellContentProps) => {\n  if (!hasContent(content, mainField, attribute)) {\n    return (\n      <Typography\n        textColor=\"neutral800\"\n        paddingLeft={attribute.type === ('relation' || 'component') ? '1.6rem' : 0}\n        paddingRight={attribute.type === ('relation' || 'component') ? '1.6rem' : 0}\n      >\n        -\n      </Typography>\n    );\n  }\n\n  switch (attribute.type) {\n    case 'media':\n      if (!attribute.multiple) {\n        return <MediaSingle {...content} />;\n      }\n\n      return <MediaMultiple content={content} />;\n\n    case 'relation': {\n      if (isSingleRelation(attribute.relation)) {\n        return <RelationSingle mainField={mainField} content={content} />;\n      }\n\n      return <RelationMultiple rowId={rowId} mainField={mainField} content={content} name={name} />;\n    }\n\n    case 'component':\n      if (attribute.repeatable) {\n        return <RepeatableComponent mainField={mainField} content={content} />;\n      }\n\n      return <SingleComponent mainField={mainField} content={content} />;\n\n    case 'string':\n      return (\n        <Tooltip description={content}>\n          <Typography maxWidth=\"30rem\" ellipsis textColor=\"neutral800\">\n            <CellValue type={attribute.type} value={content} />\n          </Typography>\n        </Tooltip>\n      );\n\n    default:\n      return (\n        <Typography maxWidth=\"30rem\" ellipsis textColor=\"neutral800\">\n          <CellValue type={attribute.type} value={content} />\n        </Typography>\n      );\n  }\n};\n\nconst hasContent = (\n  content: CellContentProps['content'],\n  mainField: CellContentProps['mainField'],\n  attribute: CellContentProps['attribute']\n) => {\n  if (attribute.type === 'component') {\n    // Repeatable fields show the ID as fallback, in case the mainField\n    // doesn't have any content\n    if (attribute.repeatable || !mainField) {\n      return content?.length > 0;\n    }\n\n    const value = content?.[mainField.name];\n\n    // relations, media ... show the id as fallback\n    if (mainField.name === 'id' && ![undefined, null].includes(value)) {\n      return true;\n    }\n\n    return !isEmpty(value);\n  }\n\n  if (attribute.type === 'relation') {\n    if (isSingleRelation(attribute.relation)) {\n      return !isEmpty(content);\n    }\n\n    if (Array.isArray(content)) {\n      return content.length > 0;\n    }\n\n    return content?.count > 0;\n  }\n\n  /*\n      Biginteger fields need to be treated as strings, as `isNumber`\n      doesn't deal with them.\n  */\n  if (['integer', 'decimal', 'float', 'number'].includes(attribute.type)) {\n    return typeof content === 'number';\n  }\n\n  if (attribute.type === 'boolean') {\n    return content !== null;\n  }\n\n  return !isEmpty(content);\n};\n\nconst isSingleRelation = (\n  type: Extract<CellContentProps['attribute'], { type: 'relation' }>['relation']\n) => ['oneToOne', 'manyToOne', 'oneToOneMorph'].includes(type);\n\nexport { CellContent };\nexport type { CellContentProps };\n"],"names":["CellContent","content","mainField","attribute","rowId","name","hasContent","_jsx","Typography","textColor","paddingLeft","type","paddingRight","multiple","MediaSingle","MediaMultiple","isSingleRelation","relation","RelationSingle","RelationMultiple","repeatable","RepeatableComponent","SingleComponent","Tooltip","description","maxWidth","ellipsis","CellValue","value","length","undefined","includes","isEmpty","Array","isArray","count"],"mappings":"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"}
+{"version":3,"file":"CellContent.js","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/CellContent.tsx"],"sourcesContent":["import { Tooltip, Typography } from '@strapi/design-system';\nimport isEmpty from 'lodash/isEmpty';\n\nimport { CellValue } from './CellValue';\nimport { SingleComponent, RepeatableComponent } from './Components';\nimport { MediaSingle, MediaMultiple } from './Media';\nimport { RelationMultiple, RelationSingle } from './Relations';\n\nimport type { ListFieldLayout } from '../../../../hooks/useDocumentLayout';\nimport type { Schema, Data } from '@strapi/types';\n\ninterface CellContentProps extends Omit<ListFieldLayout, 'cellFormatter'> {\n  content: Schema.Attribute.Value<Schema.Attribute.AnyAttribute>;\n  rowId: Data.ID;\n}\n\nconst CellContent = ({ content, mainField, attribute, rowId, name }: CellContentProps) => {\n  if (!hasContent(content, mainField, attribute)) {\n    return (\n      <Typography\n        textColor=\"neutral800\"\n        paddingLeft={attribute.type === ('relation' || 'component') ? '1.6rem' : 0}\n        paddingRight={attribute.type === ('relation' || 'component') ? '1.6rem' : 0}\n      >\n        -\n      </Typography>\n    );\n  }\n\n  switch (attribute.type) {\n    case 'media':\n      if (!attribute.multiple) {\n        return <MediaSingle {...content} />;\n      }\n\n      return <MediaMultiple content={content} />;\n\n    case 'relation': {\n      if (isSingleRelation(attribute.relation)) {\n        return <RelationSingle mainField={mainField} content={content} />;\n      }\n\n      return <RelationMultiple rowId={rowId} mainField={mainField} content={content} name={name} />;\n    }\n\n    case 'component':\n      if (attribute.repeatable) {\n        return <RepeatableComponent mainField={mainField} content={content} />;\n      }\n\n      return <SingleComponent mainField={mainField} content={content} />;\n\n    case 'string':\n      return (\n        <Tooltip label={content}>\n          <Typography maxWidth=\"30rem\" ellipsis textColor=\"neutral800\">\n            <CellValue type={attribute.type} value={content} />\n          </Typography>\n        </Tooltip>\n      );\n\n    default:\n      return (\n        <Typography maxWidth=\"30rem\" ellipsis textColor=\"neutral800\">\n          <CellValue type={attribute.type} value={content} />\n        </Typography>\n      );\n  }\n};\n\nconst hasContent = (\n  content: CellContentProps['content'],\n  mainField: CellContentProps['mainField'],\n  attribute: CellContentProps['attribute']\n) => {\n  if (attribute.type === 'component') {\n    // Repeatable fields show the ID as fallback, in case the mainField\n    // doesn't have any content\n    if (attribute.repeatable || !mainField) {\n      return content?.length > 0;\n    }\n\n    const value = content?.[mainField.name];\n\n    // relations, media ... show the id as fallback\n    if (mainField.name === 'id' && ![undefined, null].includes(value)) {\n      return true;\n    }\n\n    return !isEmpty(value);\n  }\n\n  if (attribute.type === 'relation') {\n    if (isSingleRelation(attribute.relation)) {\n      return !isEmpty(content);\n    }\n\n    if (Array.isArray(content)) {\n      return content.length > 0;\n    }\n\n    return content?.count > 0;\n  }\n\n  /*\n      Biginteger fields need to be treated as strings, as `isNumber`\n      doesn't deal with them.\n  */\n  if (['integer', 'decimal', 'float', 'number'].includes(attribute.type)) {\n    return typeof content === 'number';\n  }\n\n  if (attribute.type === 'boolean') {\n    return content !== null;\n  }\n\n  return !isEmpty(content);\n};\n\nconst isSingleRelation = (\n  type: Extract<CellContentProps['attribute'], { type: 'relation' }>['relation']\n) => ['oneToOne', 'manyToOne', 'oneToOneMorph'].includes(type);\n\nexport { CellContent };\nexport type { CellContentProps };\n"],"names":["CellContent","content","mainField","attribute","rowId","name","hasContent","_jsx","Typography","textColor","paddingLeft","type","paddingRight","multiple","MediaSingle","MediaMultiple","isSingleRelation","relation","RelationSingle","RelationMultiple","repeatable","RepeatableComponent","SingleComponent","Tooltip","label","maxWidth","ellipsis","CellValue","value","length","undefined","includes","isEmpty","Array","isArray","count"],"mappings":"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"}

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

@@ -53,7 +53,7 @@ const CellContent = ({ content, mainField, attribute, rowId, name })=>{
             });
         case 'string':
             return /*#__PURE__*/ jsx(Tooltip, {
-                description: content,
+                label: content,
                 children: /*#__PURE__*/ jsx(Typography, {
                     maxWidth: "30rem",
                     ellipsis: true,

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

@@ -1 +1 @@
-{"version":3,"file":"CellContent.mjs","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/CellContent.tsx"],"sourcesContent":["import { Tooltip, Typography } from '@strapi/design-system';\nimport isEmpty from 'lodash/isEmpty';\n\nimport { CellValue } from './CellValue';\nimport { SingleComponent, RepeatableComponent } from './Components';\nimport { MediaSingle, MediaMultiple } from './Media';\nimport { RelationMultiple, RelationSingle } from './Relations';\n\nimport type { ListFieldLayout } from '../../../../hooks/useDocumentLayout';\nimport type { Schema, Data } from '@strapi/types';\n\ninterface CellContentProps extends Omit<ListFieldLayout, 'cellFormatter'> {\n  content: Schema.Attribute.Value<Schema.Attribute.AnyAttribute>;\n  rowId: Data.ID;\n}\n\nconst CellContent = ({ content, mainField, attribute, rowId, name }: CellContentProps) => {\n  if (!hasContent(content, mainField, attribute)) {\n    return (\n      <Typography\n        textColor=\"neutral800\"\n        paddingLeft={attribute.type === ('relation' || 'component') ? '1.6rem' : 0}\n        paddingRight={attribute.type === ('relation' || 'component') ? '1.6rem' : 0}\n      >\n        -\n      </Typography>\n    );\n  }\n\n  switch (attribute.type) {\n    case 'media':\n      if (!attribute.multiple) {\n        return <MediaSingle {...content} />;\n      }\n\n      return <MediaMultiple content={content} />;\n\n    case 'relation': {\n      if (isSingleRelation(attribute.relation)) {\n        return <RelationSingle mainField={mainField} content={content} />;\n      }\n\n      return <RelationMultiple rowId={rowId} mainField={mainField} content={content} name={name} />;\n    }\n\n    case 'component':\n      if (attribute.repeatable) {\n        return <RepeatableComponent mainField={mainField} content={content} />;\n      }\n\n      return <SingleComponent mainField={mainField} content={content} />;\n\n    case 'string':\n      return (\n        <Tooltip description={content}>\n          <Typography maxWidth=\"30rem\" ellipsis textColor=\"neutral800\">\n            <CellValue type={attribute.type} value={content} />\n          </Typography>\n        </Tooltip>\n      );\n\n    default:\n      return (\n        <Typography maxWidth=\"30rem\" ellipsis textColor=\"neutral800\">\n          <CellValue type={attribute.type} value={content} />\n        </Typography>\n      );\n  }\n};\n\nconst hasContent = (\n  content: CellContentProps['content'],\n  mainField: CellContentProps['mainField'],\n  attribute: CellContentProps['attribute']\n) => {\n  if (attribute.type === 'component') {\n    // Repeatable fields show the ID as fallback, in case the mainField\n    // doesn't have any content\n    if (attribute.repeatable || !mainField) {\n      return content?.length > 0;\n    }\n\n    const value = content?.[mainField.name];\n\n    // relations, media ... show the id as fallback\n    if (mainField.name === 'id' && ![undefined, null].includes(value)) {\n      return true;\n    }\n\n    return !isEmpty(value);\n  }\n\n  if (attribute.type === 'relation') {\n    if (isSingleRelation(attribute.relation)) {\n      return !isEmpty(content);\n    }\n\n    if (Array.isArray(content)) {\n      return content.length > 0;\n    }\n\n    return content?.count > 0;\n  }\n\n  /*\n      Biginteger fields need to be treated as strings, as `isNumber`\n      doesn't deal with them.\n  */\n  if (['integer', 'decimal', 'float', 'number'].includes(attribute.type)) {\n    return typeof content === 'number';\n  }\n\n  if (attribute.type === 'boolean') {\n    return content !== null;\n  }\n\n  return !isEmpty(content);\n};\n\nconst isSingleRelation = (\n  type: Extract<CellContentProps['attribute'], { type: 'relation' }>['relation']\n) => ['oneToOne', 'manyToOne', 'oneToOneMorph'].includes(type);\n\nexport { CellContent };\nexport type { CellContentProps };\n"],"names":["CellContent","content","mainField","attribute","rowId","name","hasContent","_jsx","Typography","textColor","paddingLeft","type","paddingRight","multiple","MediaSingle","MediaMultiple","isSingleRelation","relation","RelationSingle","RelationMultiple","repeatable","RepeatableComponent","SingleComponent","Tooltip","description","maxWidth","ellipsis","CellValue","value","length","undefined","includes","isEmpty","Array","isArray","count"],"mappings":"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"}
+{"version":3,"file":"CellContent.mjs","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/CellContent.tsx"],"sourcesContent":["import { Tooltip, Typography } from '@strapi/design-system';\nimport isEmpty from 'lodash/isEmpty';\n\nimport { CellValue } from './CellValue';\nimport { SingleComponent, RepeatableComponent } from './Components';\nimport { MediaSingle, MediaMultiple } from './Media';\nimport { RelationMultiple, RelationSingle } from './Relations';\n\nimport type { ListFieldLayout } from '../../../../hooks/useDocumentLayout';\nimport type { Schema, Data } from '@strapi/types';\n\ninterface CellContentProps extends Omit<ListFieldLayout, 'cellFormatter'> {\n  content: Schema.Attribute.Value<Schema.Attribute.AnyAttribute>;\n  rowId: Data.ID;\n}\n\nconst CellContent = ({ content, mainField, attribute, rowId, name }: CellContentProps) => {\n  if (!hasContent(content, mainField, attribute)) {\n    return (\n      <Typography\n        textColor=\"neutral800\"\n        paddingLeft={attribute.type === ('relation' || 'component') ? '1.6rem' : 0}\n        paddingRight={attribute.type === ('relation' || 'component') ? '1.6rem' : 0}\n      >\n        -\n      </Typography>\n    );\n  }\n\n  switch (attribute.type) {\n    case 'media':\n      if (!attribute.multiple) {\n        return <MediaSingle {...content} />;\n      }\n\n      return <MediaMultiple content={content} />;\n\n    case 'relation': {\n      if (isSingleRelation(attribute.relation)) {\n        return <RelationSingle mainField={mainField} content={content} />;\n      }\n\n      return <RelationMultiple rowId={rowId} mainField={mainField} content={content} name={name} />;\n    }\n\n    case 'component':\n      if (attribute.repeatable) {\n        return <RepeatableComponent mainField={mainField} content={content} />;\n      }\n\n      return <SingleComponent mainField={mainField} content={content} />;\n\n    case 'string':\n      return (\n        <Tooltip label={content}>\n          <Typography maxWidth=\"30rem\" ellipsis textColor=\"neutral800\">\n            <CellValue type={attribute.type} value={content} />\n          </Typography>\n        </Tooltip>\n      );\n\n    default:\n      return (\n        <Typography maxWidth=\"30rem\" ellipsis textColor=\"neutral800\">\n          <CellValue type={attribute.type} value={content} />\n        </Typography>\n      );\n  }\n};\n\nconst hasContent = (\n  content: CellContentProps['content'],\n  mainField: CellContentProps['mainField'],\n  attribute: CellContentProps['attribute']\n) => {\n  if (attribute.type === 'component') {\n    // Repeatable fields show the ID as fallback, in case the mainField\n    // doesn't have any content\n    if (attribute.repeatable || !mainField) {\n      return content?.length > 0;\n    }\n\n    const value = content?.[mainField.name];\n\n    // relations, media ... show the id as fallback\n    if (mainField.name === 'id' && ![undefined, null].includes(value)) {\n      return true;\n    }\n\n    return !isEmpty(value);\n  }\n\n  if (attribute.type === 'relation') {\n    if (isSingleRelation(attribute.relation)) {\n      return !isEmpty(content);\n    }\n\n    if (Array.isArray(content)) {\n      return content.length > 0;\n    }\n\n    return content?.count > 0;\n  }\n\n  /*\n      Biginteger fields need to be treated as strings, as `isNumber`\n      doesn't deal with them.\n  */\n  if (['integer', 'decimal', 'float', 'number'].includes(attribute.type)) {\n    return typeof content === 'number';\n  }\n\n  if (attribute.type === 'boolean') {\n    return content !== null;\n  }\n\n  return !isEmpty(content);\n};\n\nconst isSingleRelation = (\n  type: Extract<CellContentProps['attribute'], { type: 'relation' }>['relation']\n) => ['oneToOne', 'manyToOne', 'oneToOneMorph'].includes(type);\n\nexport { CellContent };\nexport type { CellContentProps };\n"],"names":["CellContent","content","mainField","attribute","rowId","name","hasContent","_jsx","Typography","textColor","paddingLeft","type","paddingRight","multiple","MediaSingle","MediaMultiple","isSingleRelation","relation","RelationSingle","RelationMultiple","repeatable","RepeatableComponent","SingleComponent","Tooltip","label","maxWidth","ellipsis","CellValue","value","length","undefined","includes","isEmpty","Array","isArray","count"],"mappings":"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"}

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

@@ -22,7 +22,7 @@ const MediaSingle = ({ url, mime, alternativeText, name, ext, formats })=>{
     const fileExtension = getFileExtension(ext);
     const fileName = name.length > 100 ? `${name.substring(0, 100)}...` : name;
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
-        description: fileName,
+        label: fileName,
         children: /*#__PURE__*/ jsxRuntime.jsx(FileWrapper, {
             children: fileExtension
         })

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

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

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

@@ -20,7 +20,7 @@ const MediaSingle = ({ url, mime, alternativeText, name, ext, formats })=>{
     const fileExtension = getFileExtension(ext);
     const fileName = name.length > 100 ? `${name.substring(0, 100)}...` : name;
     return /*#__PURE__*/ jsx(Tooltip, {
-        description: fileName,
+        label: fileName,
         children: /*#__PURE__*/ jsx(FileWrapper, {
             children: fileExtension
         })

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

@@ -1 +1 @@
-{"version":3,"file":"Media.mjs","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/Media.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Avatar, Flex, Tooltip, Typography, TypographyComponent } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { prefixFileUrlWithBackendUrl } from '../../../../utils/urls';\n\nimport type { Data } from '@strapi/types';\n\ninterface MediaFile {\n  id?: Data.ID;\n  alternativeText?: string;\n  ext: string;\n  formats: {\n    thumbnail?: {\n      url?: string;\n    };\n  };\n  mime: string;\n  name: string;\n  url: string;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Media\n * -----------------------------------------------------------------------------------------------*/\n\ninterface MediaSingleProps extends MediaFile {}\n\nconst getFileExtension = (ext: string) => (ext && ext[0] === '.' ? ext.substring(1) : ext);\n\nconst MediaSingle = ({ url, mime, alternativeText, name, ext, formats }: MediaSingleProps) => {\n  const fileURL = prefixFileUrlWithBackendUrl(url)!;\n\n  if (mime.includes('image')) {\n    const thumbnail = formats?.thumbnail?.url;\n    const mediaURL = prefixFileUrlWithBackendUrl(thumbnail) || fileURL;\n\n    return (\n      <Avatar.Item\n        src={mediaURL}\n        alt={alternativeText || name}\n        fallback={alternativeText || name}\n        preview\n      />\n    );\n  }\n\n  const fileExtension = getFileExtension(ext);\n  const fileName = name.length > 100 ? `${name.substring(0, 100)}...` : name;\n\n  return (\n    <Tooltip description={fileName}>\n      <FileWrapper>{fileExtension}</FileWrapper>\n    </Tooltip>\n  );\n};\n\nconst FileWrapper = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <Flex\n      tag=\"span\"\n      position=\"relative\"\n      borderRadius=\"50%\"\n      width=\"26px\"\n      height=\"26px\"\n      borderColor=\"neutral200\"\n      background=\"neutral150\"\n      paddingLeft=\"1px\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n    >\n      <FileTypography variant=\"sigma\" textColor=\"neutral600\">\n        {children}\n      </FileTypography>\n    </Flex>\n  );\n};\n\nconst FileTypography = styled<TypographyComponent>(Typography)`\n  font-size: 0.9rem;\n  line-height: 0.9rem;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * MediaMultiple\n * -----------------------------------------------------------------------------------------------*/\n\ninterface MediaMultipleProps {\n  content: MediaFile[];\n}\n\nconst MediaMultiple = ({ content }: MediaMultipleProps) => {\n  return (\n    <Avatar.Group>\n      {content.map((file, index) => {\n        const key = `${file.id}${index}`;\n\n        if (index === 3) {\n          const remainingFiles = `+${content.length - 3}`;\n\n          return <FileWrapper key={key}>{remainingFiles}</FileWrapper>;\n        }\n\n        if (index > 3) {\n          return null;\n        }\n\n        return <MediaSingle key={key} {...file} />;\n      })}\n    </Avatar.Group>\n  );\n};\n\nexport { MediaMultiple, MediaSingle };\nexport type { MediaMultipleProps, MediaSingleProps };\n"],"names":["getFileExtension","ext","substring","MediaSingle","url","mime","alternativeText","name","formats","fileURL","prefixFileUrlWithBackendUrl","includes","thumbnail","mediaURL","_jsx","Avatar","Item","src","alt","fallback","preview","fileExtension","fileName","length","Tooltip","description","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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"}
+{"version":3,"file":"Media.mjs","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/Media.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Avatar, Flex, Tooltip, Typography, TypographyComponent } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { prefixFileUrlWithBackendUrl } from '../../../../utils/urls';\n\nimport type { Data } from '@strapi/types';\n\ninterface MediaFile {\n  id?: Data.ID;\n  alternativeText?: string;\n  ext: string;\n  formats: {\n    thumbnail?: {\n      url?: string;\n    };\n  };\n  mime: string;\n  name: string;\n  url: string;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Media\n * -----------------------------------------------------------------------------------------------*/\n\ninterface MediaSingleProps extends MediaFile {}\n\nconst getFileExtension = (ext: string) => (ext && ext[0] === '.' ? ext.substring(1) : ext);\n\nconst MediaSingle = ({ url, mime, alternativeText, name, ext, formats }: MediaSingleProps) => {\n  const fileURL = prefixFileUrlWithBackendUrl(url)!;\n\n  if (mime.includes('image')) {\n    const thumbnail = formats?.thumbnail?.url;\n    const mediaURL = prefixFileUrlWithBackendUrl(thumbnail) || fileURL;\n\n    return (\n      <Avatar.Item\n        src={mediaURL}\n        alt={alternativeText || name}\n        fallback={alternativeText || name}\n        preview\n      />\n    );\n  }\n\n  const fileExtension = getFileExtension(ext);\n  const fileName = name.length > 100 ? `${name.substring(0, 100)}...` : name;\n\n  return (\n    <Tooltip label={fileName}>\n      <FileWrapper>{fileExtension}</FileWrapper>\n    </Tooltip>\n  );\n};\n\nconst FileWrapper = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <Flex\n      tag=\"span\"\n      position=\"relative\"\n      borderRadius=\"50%\"\n      width=\"26px\"\n      height=\"26px\"\n      borderColor=\"neutral200\"\n      background=\"neutral150\"\n      paddingLeft=\"1px\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n    >\n      <FileTypography variant=\"sigma\" textColor=\"neutral600\">\n        {children}\n      </FileTypography>\n    </Flex>\n  );\n};\n\nconst FileTypography = styled<TypographyComponent>(Typography)`\n  font-size: 0.9rem;\n  line-height: 0.9rem;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * MediaMultiple\n * -----------------------------------------------------------------------------------------------*/\n\ninterface MediaMultipleProps {\n  content: MediaFile[];\n}\n\nconst MediaMultiple = ({ content }: MediaMultipleProps) => {\n  return (\n    <Avatar.Group>\n      {content.map((file, index) => {\n        const key = `${file.id}${index}`;\n\n        if (index === 3) {\n          const remainingFiles = `+${content.length - 3}`;\n\n          return <FileWrapper key={key}>{remainingFiles}</FileWrapper>;\n        }\n\n        if (index > 3) {\n          return null;\n        }\n\n        return <MediaSingle key={key} {...file} />;\n      })}\n    </Avatar.Group>\n  );\n};\n\nexport { MediaMultiple, MediaSingle };\nexport type { MediaMultipleProps, MediaSingleProps };\n"],"names":["getFileExtension","ext","substring","MediaSingle","url","mime","alternativeText","name","formats","fileURL","prefixFileUrlWithBackendUrl","includes","thumbnail","mediaURL","_jsx","Avatar","Item","src","alt","fallback","preview","fileExtension","fileName","length","Tooltip","label","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":";;;;;;AA6BA,MAAMA,gBAAmB,GAAA,CAACC,GAAiBA,GAAAA,GAAAA,IAAOA,GAAG,CAAC,CAAE,CAAA,KAAK,GAAMA,GAAAA,GAAAA,CAAIC,SAAS,CAAC,CAAKD,CAAAA,GAAAA,GAAAA;AAEtF,MAAME,WAAc,GAAA,CAAC,EAAEC,GAAG,EAAEC,IAAI,EAAEC,eAAe,EAAEC,IAAI,EAAEN,GAAG,EAAEO,OAAO,EAAoB,GAAA;AACvF,IAAA,MAAMC,UAAUC,2BAA4BN,CAAAA,GAAAA,CAAAA;IAE5C,IAAIC,IAAAA,CAAKM,QAAQ,CAAC,OAAU,CAAA,EAAA;QAC1B,MAAMC,SAAAA,GAAYJ,SAASI,SAAWR,EAAAA,GAAAA;QACtC,MAAMS,QAAAA,GAAWH,4BAA4BE,SAAcH,CAAAA,IAAAA,OAAAA;QAE3D,qBACEK,GAAA,CAACC,OAAOC,IAAI,EAAA;YACVC,GAAKJ,EAAAA,QAAAA;AACLK,YAAAA,GAAAA,EAAKZ,eAAmBC,IAAAA,IAAAA;AACxBY,YAAAA,QAAAA,EAAUb,eAAmBC,IAAAA,IAAAA;YAC7Ba,OAAO,EAAA;;AAGb;AAEA,IAAA,MAAMC,gBAAgBrB,gBAAiBC,CAAAA,GAAAA,CAAAA;AACvC,IAAA,MAAMqB,QAAWf,GAAAA,IAAAA,CAAKgB,MAAM,GAAG,GAAM,GAAA,CAAA,EAAGhB,IAAKL,CAAAA,SAAS,CAAC,CAAA,EAAG,GAAK,CAAA,CAAA,GAAG,CAAC,GAAGK,IAAAA;AAEtE,IAAA,qBACEO,GAACU,CAAAA,OAAAA,EAAAA;QAAQC,KAAOH,EAAAA,QAAAA;AACd,QAAA,QAAA,gBAAAR,GAACY,CAAAA,WAAAA,EAAAA;AAAaL,YAAAA,QAAAA,EAAAA;;;AAGpB;AAEA,MAAMK,WAAc,GAAA,CAAC,EAAEC,QAAQ,EAAiC,GAAA;AAC9D,IAAA,qBACEb,GAACc,CAAAA,IAAAA,EAAAA;QACCC,GAAI,EAAA,MAAA;QACJC,QAAS,EAAA,UAAA;QACTC,YAAa,EAAA,KAAA;QACbC,KAAM,EAAA,MAAA;QACNC,MAAO,EAAA,MAAA;QACPC,WAAY,EAAA,YAAA;QACZC,UAAW,EAAA,YAAA;QACXC,WAAY,EAAA,KAAA;QACZC,cAAe,EAAA,QAAA;QACfC,UAAW,EAAA,QAAA;AAEX,QAAA,QAAA,gBAAAxB,GAACyB,CAAAA,cAAAA,EAAAA;YAAeC,OAAQ,EAAA,OAAA;YAAQC,SAAU,EAAA,YAAA;AACvCd,YAAAA,QAAAA,EAAAA;;;AAIT,CAAA;AAEA,MAAMY,cAAAA,GAAiBG,MAA4BC,CAAAA,UAAAA,CAAW;;;AAG9D,CAAC;AAUD,MAAMC,aAAgB,GAAA,CAAC,EAAEC,OAAO,EAAsB,GAAA;IACpD,qBACE/B,GAAA,CAACC,OAAO+B,KAAK,EAAA;kBACVD,OAAQE,CAAAA,GAAG,CAAC,CAACC,IAAMC,EAAAA,KAAAA,GAAAA;AAClB,YAAA,MAAMC,GAAM,GAAA,CAAA,EAAGF,IAAKG,CAAAA,EAAE,GAAGF,KAAO,CAAA,CAAA;AAEhC,YAAA,IAAIA,UAAU,CAAG,EAAA;AACf,gBAAA,MAAMG,iBAAiB,CAAC,CAAC,EAAEP,OAAQtB,CAAAA,MAAM,GAAG,CAAG,CAAA,CAAA;AAE/C,gBAAA,qBAAOT,GAACY,CAAAA,WAAAA,EAAAA;AAAuB0B,oBAAAA,QAAAA,EAAAA;AAANF,iBAAAA,EAAAA,GAAAA,CAAAA;AAC3B;AAEA,YAAA,IAAID,QAAQ,CAAG,EAAA;gBACb,OAAO,IAAA;AACT;AAEA,YAAA,qBAAOnC,GAACX,CAAAA,WAAAA,EAAAA;AAAuB,gBAAA,GAAG6C;AAATE,aAAAA,EAAAA,GAAAA,CAAAA;AAC3B,SAAA;;AAGN;;;;"}

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

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
 var reactIntl = require('react-intl');
 var useDocument = require('../../../../hooks/useDocument.js');
@@ -36,18 +37,21 @@ const RelationSingle = ({ mainField, content })=>{
         children: relations.getRelationLabel(content, mainField)
     });
 };
-/**
- * TODO: fix this component – tracking issue https://strapi-inc.atlassian.net/browse/CONTENT-2184
- */ const RelationMultiple = ({ mainField, content, rowId, name })=>{
+const RelationMultiple = ({ mainField, content, rowId, name })=>{
     const { model } = useDocument.useDoc();
     const { formatMessage } = reactIntl.useIntl();
     const { notifyStatus } = designSystem.useNotifyAT();
     const [isOpen, setIsOpen] = React__namespace.useState(false);
+    const [{ query }] = strapiAdmin.useQueryParams();
+    const locale = query.plugins?.i18n?.locale;
     const [targetField] = name.split('.');
     const { data, isLoading } = relations$1.useGetRelationsQuery({
         model,
         id: rowId,
-        targetField
+        targetField,
+        params: {
+            locale
+        }
     }, {
         skip: !isOpen,
         refetchOnMountOrArgChange: true

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

@@ -1 +1 @@
-{"version":3,"file":"Relations.js","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/Relations.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Typography, Loader, useNotifyAT, Menu } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDoc } from '../../../../hooks/useDocument';\nimport { useGetRelationsQuery } from '../../../../services/relations';\nimport { getRelationLabel } from '../../../../utils/relations';\nimport { getTranslation } from '../../../../utils/translations';\n\nimport type { CellContentProps } from './CellContent';\n\n/* -------------------------------------------------------------------------------------------------\n * RelationSingle\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RelationSingleProps extends Pick<CellContentProps, 'mainField' | 'content'> {}\n\nconst RelationSingle = ({ mainField, content }: RelationSingleProps) => {\n  return (\n    <Typography maxWidth=\"50rem\" textColor=\"neutral800\" ellipsis>\n      {getRelationLabel(content, mainField)}\n    </Typography>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * RelationMultiple\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RelationMultipleProps\n  extends Pick<CellContentProps, 'mainField' | 'content' | 'name' | 'rowId'> {}\n\n/**\n * TODO: fix this component – tracking issue https://strapi-inc.atlassian.net/browse/CONTENT-2184\n */\nconst RelationMultiple = ({ mainField, content, rowId, name }: RelationMultipleProps) => {\n  const { model } = useDoc();\n  const { formatMessage } = useIntl();\n  const { notifyStatus } = useNotifyAT();\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  const [targetField] = name.split('.');\n\n  const { data, isLoading } = useGetRelationsQuery(\n    {\n      model,\n      id: rowId,\n      targetField,\n    },\n    {\n      skip: !isOpen,\n      refetchOnMountOrArgChange: true,\n    }\n  );\n\n  const contentCount = Array.isArray(content) ? content.length : content.count;\n\n  React.useEffect(() => {\n    if (data) {\n      notifyStatus(\n        formatMessage({\n          id: getTranslation('DynamicTable.relation-loaded'),\n          defaultMessage: 'Relations have been loaded',\n        })\n      );\n    }\n  }, [data, formatMessage, notifyStatus]);\n\n  return (\n    <Menu.Root onOpenChange={(isOpen) => setIsOpen(isOpen)}>\n      <Menu.Trigger onClick={(e) => e.stopPropagation()}>\n        <Typography style={{ cursor: 'pointer' }} textColor=\"neutral800\" fontWeight=\"regular\">\n          {contentCount > 0\n            ? formatMessage(\n                {\n                  id: 'content-manager.containers.list.items',\n                  defaultMessage: '{number} {number, plural, =0 {items} one {item} other {items}}',\n                },\n                { number: contentCount }\n              )\n            : '-'}\n        </Typography>\n      </Menu.Trigger>\n      <Menu.Content>\n        {isLoading && (\n          <Menu.Item disabled>\n            <Loader small>\n              {formatMessage({\n                id: getTranslation('ListViewTable.relation-loading'),\n                defaultMessage: 'Relations are loading',\n              })}\n            </Loader>\n          </Menu.Item>\n        )}\n        {data?.results && (\n          <>\n            {data.results.map((entry) => (\n              <Menu.Item key={entry.documentId}>\n                <Typography maxWidth=\"50rem\" ellipsis>\n                  {getRelationLabel(entry, mainField)}\n                </Typography>\n              </Menu.Item>\n            ))}\n\n            {data?.pagination && data?.pagination.total > 10 && (\n              <Menu.Item\n                aria-disabled\n                aria-label={formatMessage({\n                  id: getTranslation('ListViewTable.relation-more'),\n                  defaultMessage: 'This relation contains more entities than displayed',\n                })}\n              >\n                <Typography>…</Typography>\n              </Menu.Item>\n            )}\n          </>\n        )}\n      </Menu.Content>\n    </Menu.Root>\n  );\n};\n\nexport { RelationSingle, RelationMultiple };\nexport type { RelationSingleProps, RelationMultipleProps };\n"],"names":["RelationSingle","mainField","content","_jsx","Typography","maxWidth","textColor","ellipsis","getRelationLabel","RelationMultiple","rowId","name","model","useDoc","formatMessage","useIntl","notifyStatus","useNotifyAT","isOpen","setIsOpen","React","useState","targetField","split","data","isLoading","useGetRelationsQuery","id","skip","refetchOnMountOrArgChange","contentCount","Array","isArray","length","count","useEffect","getTranslation","defaultMessage","_jsxs","Menu","Root","onOpenChange","Trigger","onClick","e","stopPropagation","style","cursor","fontWeight","number","Content","Item","disabled","Loader","small","results","_Fragment","map","entry","documentId","pagination","total","aria-disabled","aria-label"],"mappings":"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"}
+{"version":3,"file":"Relations.js","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/Relations.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams } from '@strapi/admin/strapi-admin';\nimport { Typography, Loader, useNotifyAT, Menu } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDoc } from '../../../../hooks/useDocument';\nimport { useGetRelationsQuery } from '../../../../services/relations';\nimport { getRelationLabel } from '../../../../utils/relations';\nimport { getTranslation } from '../../../../utils/translations';\n\nimport type { CellContentProps } from './CellContent';\n\n/* -------------------------------------------------------------------------------------------------\n * RelationSingle\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RelationSingleProps extends Pick<CellContentProps, 'mainField' | 'content'> {}\n\nconst RelationSingle = ({ mainField, content }: RelationSingleProps) => {\n  return (\n    <Typography maxWidth=\"50rem\" textColor=\"neutral800\" ellipsis>\n      {getRelationLabel(content, mainField)}\n    </Typography>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * RelationMultiple\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RelationMultipleProps\n  extends Pick<CellContentProps, 'mainField' | 'content' | 'name' | 'rowId'> {}\n\nconst RelationMultiple = ({ mainField, content, rowId, name }: RelationMultipleProps) => {\n  const { model } = useDoc();\n  const { formatMessage } = useIntl();\n  const { notifyStatus } = useNotifyAT();\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [{ query }] = useQueryParams<{ plugins?: { i18n?: { locale?: string } } }>();\n  const locale = query.plugins?.i18n?.locale;\n\n  const [targetField] = name.split('.');\n\n  const { data, isLoading } = useGetRelationsQuery(\n    {\n      model,\n      id: rowId,\n      targetField,\n      params: { locale },\n    },\n    {\n      skip: !isOpen,\n      refetchOnMountOrArgChange: true,\n    }\n  );\n\n  const contentCount = Array.isArray(content) ? content.length : content.count;\n\n  React.useEffect(() => {\n    if (data) {\n      notifyStatus(\n        formatMessage({\n          id: getTranslation('DynamicTable.relation-loaded'),\n          defaultMessage: 'Relations have been loaded',\n        })\n      );\n    }\n  }, [data, formatMessage, notifyStatus]);\n\n  return (\n    <Menu.Root onOpenChange={(isOpen) => setIsOpen(isOpen)}>\n      <Menu.Trigger onClick={(e) => e.stopPropagation()}>\n        <Typography style={{ cursor: 'pointer' }} textColor=\"neutral800\" fontWeight=\"regular\">\n          {contentCount > 0\n            ? formatMessage(\n                {\n                  id: 'content-manager.containers.list.items',\n                  defaultMessage: '{number} {number, plural, =0 {items} one {item} other {items}}',\n                },\n                { number: contentCount }\n              )\n            : '-'}\n        </Typography>\n      </Menu.Trigger>\n      <Menu.Content>\n        {isLoading && (\n          <Menu.Item disabled>\n            <Loader small>\n              {formatMessage({\n                id: getTranslation('ListViewTable.relation-loading'),\n                defaultMessage: 'Relations are loading',\n              })}\n            </Loader>\n          </Menu.Item>\n        )}\n        {data?.results && (\n          <>\n            {data.results.map((entry) => (\n              <Menu.Item key={entry.documentId}>\n                <Typography maxWidth=\"50rem\" ellipsis>\n                  {getRelationLabel(entry, mainField)}\n                </Typography>\n              </Menu.Item>\n            ))}\n\n            {data?.pagination && data?.pagination.total > 10 && (\n              <Menu.Item\n                aria-disabled\n                aria-label={formatMessage({\n                  id: getTranslation('ListViewTable.relation-more'),\n                  defaultMessage: 'This relation contains more entities than displayed',\n                })}\n              >\n                <Typography>…</Typography>\n              </Menu.Item>\n            )}\n          </>\n        )}\n      </Menu.Content>\n    </Menu.Root>\n  );\n};\n\nexport { RelationSingle, RelationMultiple };\nexport type { RelationSingleProps, RelationMultipleProps };\n"],"names":["RelationSingle","mainField","content","_jsx","Typography","maxWidth","textColor","ellipsis","getRelationLabel","RelationMultiple","rowId","name","model","useDoc","formatMessage","useIntl","notifyStatus","useNotifyAT","isOpen","setIsOpen","React","useState","query","useQueryParams","locale","plugins","i18n","targetField","split","data","isLoading","useGetRelationsQuery","id","params","skip","refetchOnMountOrArgChange","contentCount","Array","isArray","length","count","useEffect","getTranslation","defaultMessage","_jsxs","Menu","Root","onOpenChange","Trigger","onClick","e","stopPropagation","style","cursor","fontWeight","number","Content","Item","disabled","Loader","small","results","_Fragment","map","entry","documentId","pagination","total","aria-disabled","aria-label"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
+import { useQueryParams } from '@strapi/admin/strapi-admin';
 import { Typography, useNotifyAT, Menu, Loader } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { useDoc } from '../../../../hooks/useDocument.mjs';
@@ -15,18 +16,21 @@ const RelationSingle = ({ mainField, content })=>{
         children: getRelationLabel(content, mainField)
     });
 };
-/**
- * TODO: fix this component – tracking issue https://strapi-inc.atlassian.net/browse/CONTENT-2184
- */ const RelationMultiple = ({ mainField, content, rowId, name })=>{
+const RelationMultiple = ({ mainField, content, rowId, name })=>{
     const { model } = useDoc();
     const { formatMessage } = useIntl();
     const { notifyStatus } = useNotifyAT();
     const [isOpen, setIsOpen] = React.useState(false);
+    const [{ query }] = useQueryParams();
+    const locale = query.plugins?.i18n?.locale;
     const [targetField] = name.split('.');
     const { data, isLoading } = useGetRelationsQuery({
         model,
         id: rowId,
-        targetField
+        targetField,
+        params: {
+            locale
+        }
     }, {
         skip: !isOpen,
         refetchOnMountOrArgChange: true

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

@@ -1 +1 @@
-{"version":3,"file":"Relations.mjs","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/Relations.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Typography, Loader, useNotifyAT, Menu } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDoc } from '../../../../hooks/useDocument';\nimport { useGetRelationsQuery } from '../../../../services/relations';\nimport { getRelationLabel } from '../../../../utils/relations';\nimport { getTranslation } from '../../../../utils/translations';\n\nimport type { CellContentProps } from './CellContent';\n\n/* -------------------------------------------------------------------------------------------------\n * RelationSingle\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RelationSingleProps extends Pick<CellContentProps, 'mainField' | 'content'> {}\n\nconst RelationSingle = ({ mainField, content }: RelationSingleProps) => {\n  return (\n    <Typography maxWidth=\"50rem\" textColor=\"neutral800\" ellipsis>\n      {getRelationLabel(content, mainField)}\n    </Typography>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * RelationMultiple\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RelationMultipleProps\n  extends Pick<CellContentProps, 'mainField' | 'content' | 'name' | 'rowId'> {}\n\n/**\n * TODO: fix this component – tracking issue https://strapi-inc.atlassian.net/browse/CONTENT-2184\n */\nconst RelationMultiple = ({ mainField, content, rowId, name }: RelationMultipleProps) => {\n  const { model } = useDoc();\n  const { formatMessage } = useIntl();\n  const { notifyStatus } = useNotifyAT();\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  const [targetField] = name.split('.');\n\n  const { data, isLoading } = useGetRelationsQuery(\n    {\n      model,\n      id: rowId,\n      targetField,\n    },\n    {\n      skip: !isOpen,\n      refetchOnMountOrArgChange: true,\n    }\n  );\n\n  const contentCount = Array.isArray(content) ? content.length : content.count;\n\n  React.useEffect(() => {\n    if (data) {\n      notifyStatus(\n        formatMessage({\n          id: getTranslation('DynamicTable.relation-loaded'),\n          defaultMessage: 'Relations have been loaded',\n        })\n      );\n    }\n  }, [data, formatMessage, notifyStatus]);\n\n  return (\n    <Menu.Root onOpenChange={(isOpen) => setIsOpen(isOpen)}>\n      <Menu.Trigger onClick={(e) => e.stopPropagation()}>\n        <Typography style={{ cursor: 'pointer' }} textColor=\"neutral800\" fontWeight=\"regular\">\n          {contentCount > 0\n            ? formatMessage(\n                {\n                  id: 'content-manager.containers.list.items',\n                  defaultMessage: '{number} {number, plural, =0 {items} one {item} other {items}}',\n                },\n                { number: contentCount }\n              )\n            : '-'}\n        </Typography>\n      </Menu.Trigger>\n      <Menu.Content>\n        {isLoading && (\n          <Menu.Item disabled>\n            <Loader small>\n              {formatMessage({\n                id: getTranslation('ListViewTable.relation-loading'),\n                defaultMessage: 'Relations are loading',\n              })}\n            </Loader>\n          </Menu.Item>\n        )}\n        {data?.results && (\n          <>\n            {data.results.map((entry) => (\n              <Menu.Item key={entry.documentId}>\n                <Typography maxWidth=\"50rem\" ellipsis>\n                  {getRelationLabel(entry, mainField)}\n                </Typography>\n              </Menu.Item>\n            ))}\n\n            {data?.pagination && data?.pagination.total > 10 && (\n              <Menu.Item\n                aria-disabled\n                aria-label={formatMessage({\n                  id: getTranslation('ListViewTable.relation-more'),\n                  defaultMessage: 'This relation contains more entities than displayed',\n                })}\n              >\n                <Typography>…</Typography>\n              </Menu.Item>\n            )}\n          </>\n        )}\n      </Menu.Content>\n    </Menu.Root>\n  );\n};\n\nexport { RelationSingle, RelationMultiple };\nexport type { RelationSingleProps, RelationMultipleProps };\n"],"names":["RelationSingle","mainField","content","_jsx","Typography","maxWidth","textColor","ellipsis","getRelationLabel","RelationMultiple","rowId","name","model","useDoc","formatMessage","useIntl","notifyStatus","useNotifyAT","isOpen","setIsOpen","React","useState","targetField","split","data","isLoading","useGetRelationsQuery","id","skip","refetchOnMountOrArgChange","contentCount","Array","isArray","length","count","useEffect","getTranslation","defaultMessage","_jsxs","Menu","Root","onOpenChange","Trigger","onClick","e","stopPropagation","style","cursor","fontWeight","number","Content","Item","disabled","Loader","small","results","_Fragment","map","entry","documentId","pagination","total","aria-disabled","aria-label"],"mappings":"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"}
+{"version":3,"file":"Relations.mjs","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/Relations.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams } from '@strapi/admin/strapi-admin';\nimport { Typography, Loader, useNotifyAT, Menu } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDoc } from '../../../../hooks/useDocument';\nimport { useGetRelationsQuery } from '../../../../services/relations';\nimport { getRelationLabel } from '../../../../utils/relations';\nimport { getTranslation } from '../../../../utils/translations';\n\nimport type { CellContentProps } from './CellContent';\n\n/* -------------------------------------------------------------------------------------------------\n * RelationSingle\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RelationSingleProps extends Pick<CellContentProps, 'mainField' | 'content'> {}\n\nconst RelationSingle = ({ mainField, content }: RelationSingleProps) => {\n  return (\n    <Typography maxWidth=\"50rem\" textColor=\"neutral800\" ellipsis>\n      {getRelationLabel(content, mainField)}\n    </Typography>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * RelationMultiple\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RelationMultipleProps\n  extends Pick<CellContentProps, 'mainField' | 'content' | 'name' | 'rowId'> {}\n\nconst RelationMultiple = ({ mainField, content, rowId, name }: RelationMultipleProps) => {\n  const { model } = useDoc();\n  const { formatMessage } = useIntl();\n  const { notifyStatus } = useNotifyAT();\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [{ query }] = useQueryParams<{ plugins?: { i18n?: { locale?: string } } }>();\n  const locale = query.plugins?.i18n?.locale;\n\n  const [targetField] = name.split('.');\n\n  const { data, isLoading } = useGetRelationsQuery(\n    {\n      model,\n      id: rowId,\n      targetField,\n      params: { locale },\n    },\n    {\n      skip: !isOpen,\n      refetchOnMountOrArgChange: true,\n    }\n  );\n\n  const contentCount = Array.isArray(content) ? content.length : content.count;\n\n  React.useEffect(() => {\n    if (data) {\n      notifyStatus(\n        formatMessage({\n          id: getTranslation('DynamicTable.relation-loaded'),\n          defaultMessage: 'Relations have been loaded',\n        })\n      );\n    }\n  }, [data, formatMessage, notifyStatus]);\n\n  return (\n    <Menu.Root onOpenChange={(isOpen) => setIsOpen(isOpen)}>\n      <Menu.Trigger onClick={(e) => e.stopPropagation()}>\n        <Typography style={{ cursor: 'pointer' }} textColor=\"neutral800\" fontWeight=\"regular\">\n          {contentCount > 0\n            ? formatMessage(\n                {\n                  id: 'content-manager.containers.list.items',\n                  defaultMessage: '{number} {number, plural, =0 {items} one {item} other {items}}',\n                },\n                { number: contentCount }\n              )\n            : '-'}\n        </Typography>\n      </Menu.Trigger>\n      <Menu.Content>\n        {isLoading && (\n          <Menu.Item disabled>\n            <Loader small>\n              {formatMessage({\n                id: getTranslation('ListViewTable.relation-loading'),\n                defaultMessage: 'Relations are loading',\n              })}\n            </Loader>\n          </Menu.Item>\n        )}\n        {data?.results && (\n          <>\n            {data.results.map((entry) => (\n              <Menu.Item key={entry.documentId}>\n                <Typography maxWidth=\"50rem\" ellipsis>\n                  {getRelationLabel(entry, mainField)}\n                </Typography>\n              </Menu.Item>\n            ))}\n\n            {data?.pagination && data?.pagination.total > 10 && (\n              <Menu.Item\n                aria-disabled\n                aria-label={formatMessage({\n                  id: getTranslation('ListViewTable.relation-more'),\n                  defaultMessage: 'This relation contains more entities than displayed',\n                })}\n              >\n                <Typography>…</Typography>\n              </Menu.Item>\n            )}\n          </>\n        )}\n      </Menu.Content>\n    </Menu.Root>\n  );\n};\n\nexport { RelationSingle, RelationMultiple };\nexport type { RelationSingleProps, RelationMultipleProps };\n"],"names":["RelationSingle","mainField","content","_jsx","Typography","maxWidth","textColor","ellipsis","getRelationLabel","RelationMultiple","rowId","name","model","useDoc","formatMessage","useIntl","notifyStatus","useNotifyAT","isOpen","setIsOpen","React","useState","query","useQueryParams","locale","plugins","i18n","targetField","split","data","isLoading","useGetRelationsQuery","id","params","skip","refetchOnMountOrArgChange","contentCount","Array","isArray","length","count","useEffect","getTranslation","defaultMessage","_jsxs","Menu","Root","onOpenChange","Trigger","onClick","e","stopPropagation","style","cursor","fontWeight","number","Content","Item","disabled","Loader","small","results","_Fragment","map","entry","documentId","pagination","total","aria-disabled","aria-label"],"mappings":"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"}

package/dist/admin/pages/ListView/components/ViewSettingsMenu.js

@@ -97,13 +97,15 @@ const FieldPicker = ({ headers = [], resetHeaders, setHeaders })=>{
         tag: "fieldset",
         direction: "column",
         alignItems: "stretch",
-        gap: 3,
+        gap: 1,
         borderWidth: 0,
         maxHeight: '240px',
-        overflow: 'scroll',
+        padding: 1,
+        overflow: 'auto',
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                 justifyContent: "space-between",
+                gap: 2,
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
                         tag: "legend",
@@ -134,6 +136,7 @@ const FieldPicker = ({ headers = [], resetHeaders, setHeaders })=>{
                         background: isActive ? 'primary100' : 'transparent',
                         hasRadius: true,
                         padding: 2,
+                        marginBottom: 1,
                         children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Checkbox, {
                             onCheckedChange: ()=>handleChange(header.name),
                             checked: isActive,

package/dist/admin/pages/ListView/components/ViewSettingsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewSettingsMenu.js","sources":["../../../../../admin/src/pages/ListView/components/ViewSettingsMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTracking, useRBAC, useQueryParams } from '@strapi/admin/strapi-admin';\nimport {\n  Flex,\n  IconButton,\n  Popover,\n  Checkbox,\n  TextButton,\n  Typography,\n  useCollator,\n  LinkButton,\n} from '@strapi/design-system';\nimport { Cog, ListPlus } from '@strapi/icons';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { NavLink } from 'react-router-dom';\n\nimport { useDoc } from '../../../hooks/useDocument';\nimport { useDocumentLayout } from '../../../hooks/useDocumentLayout';\nimport { useTypedSelector } from '../../../modules/hooks';\nimport { checkIfAttributeIsDisplayable } from '../../../utils/attributes';\n\ninterface ViewSettingsMenuProps extends FieldPickerProps {}\n\nconst ViewSettingsMenu = (props: ViewSettingsMenuProps) => {\n  const permissions = useTypedSelector(\n    (state) => state.admin_app.permissions.contentManager?.collectionTypesConfigurations ?? []\n  );\n  const [{ query }] = useQueryParams<{ plugins?: Record<string, unknown> }>();\n  const { formatMessage } = useIntl();\n  const {\n    allowedActions: { canConfigureView },\n  } = useRBAC(permissions);\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger>\n        <IconButton\n          label={formatMessage({\n            id: 'components.ViewSettings.tooltip',\n            defaultMessage: 'View Settings',\n          })}\n        >\n          <Cog />\n        </IconButton>\n      </Popover.Trigger>\n      <Popover.Content side=\"bottom\" align=\"end\" sideOffset={4}>\n        <Flex alignItems=\"stretch\" direction=\"column\" padding={3} gap={3}>\n          {canConfigureView ? (\n            <LinkButton\n              size=\"S\"\n              startIcon={<ListPlus />}\n              variant=\"secondary\"\n              tag={NavLink}\n              to={{\n                pathname: 'configurations/list',\n                search: query.plugins\n                  ? stringify({ plugins: query.plugins }, { encode: false })\n                  : '',\n              }}\n            >\n              {formatMessage({\n                id: 'app.links.configure-view',\n                defaultMessage: 'Configure the view',\n              })}\n            </LinkButton>\n          ) : null}\n          <FieldPicker {...props} />\n        </Flex>\n      </Popover.Content>\n    </Popover.Root>\n  );\n};\n\ninterface FieldPickerProps {\n  headers?: string[];\n  setHeaders: (headers: string[]) => void;\n  resetHeaders: () => void;\n}\n\nconst FieldPicker = ({ headers = [], resetHeaders, setHeaders }: FieldPickerProps) => {\n  const { trackUsage } = useTracking();\n  const { formatMessage, locale } = useIntl();\n\n  const { schema, model } = useDoc();\n  const { list } = useDocumentLayout(model);\n\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n\n  const attributes = schema?.attributes ?? {};\n\n  const columns = Object.keys(attributes)\n    .filter((name) => checkIfAttributeIsDisplayable(attributes[name]))\n    .map((name) => ({\n      name,\n      label: list.metadatas[name]?.label ?? '',\n    }))\n    .sort((a, b) => formatter.compare(a.label, b.label));\n\n  const handleChange = (name: string) => {\n    trackUsage('didChangeDisplayedFields');\n\n    /**\n     * create an array of the new headers, if the new name exists it should be removed,\n     * otherwise it should be added\n     */\n    const newHeaders = headers.includes(name)\n      ? headers.filter((header) => header !== name)\n      : [...headers, name];\n\n    setHeaders(newHeaders);\n  };\n\n  const handleReset = () => {\n    resetHeaders();\n  };\n\n  return (\n    <Flex\n      tag=\"fieldset\"\n      direction=\"column\"\n      alignItems=\"stretch\"\n      gap={3}\n      borderWidth={0}\n      maxHeight={'240px'}\n      overflow={'scroll'}\n    >\n      <Flex justifyContent=\"space-between\">\n        <Typography tag=\"legend\" variant=\"pi\" fontWeight=\"bold\">\n          {formatMessage({\n            id: 'containers.list.displayedFields',\n            defaultMessage: 'Displayed fields',\n          })}\n        </Typography>\n\n        <TextButton onClick={handleReset}>\n          {formatMessage({\n            id: 'app.components.Button.reset',\n            defaultMessage: 'Reset',\n          })}\n        </TextButton>\n      </Flex>\n\n      <Flex direction=\"column\" alignItems=\"stretch\">\n        {columns.map((header) => {\n          const isActive = headers.includes(header.name);\n\n          return (\n            <Flex\n              wrap=\"wrap\"\n              gap={2}\n              background={isActive ? 'primary100' : 'transparent'}\n              hasRadius\n              padding={2}\n              key={header.name}\n            >\n              <Checkbox\n                onCheckedChange={() => handleChange(header.name)}\n                checked={isActive}\n                name={header.name}\n              >\n                <Typography fontSize={1}>{header.label}</Typography>\n              </Checkbox>\n            </Flex>\n          );\n        })}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ViewSettingsMenu };\nexport type { ViewSettingsMenuProps, FieldPickerProps };\n"],"names":["ViewSettingsMenu","props","permissions","useTypedSelector","state","admin_app","contentManager","collectionTypesConfigurations","query","useQueryParams","formatMessage","useIntl","allowedActions","canConfigureView","useRBAC","_jsxs","Popover","Root","_jsx","Trigger","IconButton","label","id","defaultMessage","Cog","Content","side","align","sideOffset","Flex","alignItems","direction","padding","gap","LinkButton","size","startIcon","ListPlus","variant","tag","NavLink","to","pathname","search","plugins","stringify","encode","FieldPicker","headers","resetHeaders","setHeaders","trackUsage","useTracking","locale","schema","model","useDoc","list","useDocumentLayout","formatter","useCollator","sensitivity","attributes","columns","Object","keys","filter","name","checkIfAttributeIsDisplayable","map","metadatas","sort","a","b","compare","handleChange","newHeaders","includes","header","handleReset","borderWidth","maxHeight","overflow","justifyContent","Typography","fontWeight","TextButton","onClick","isActive","wrap","background","hasRadius","Checkbox","onCheckedChange","checked","fontSize"],"mappings":"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"}
+{"version":3,"file":"ViewSettingsMenu.js","sources":["../../../../../admin/src/pages/ListView/components/ViewSettingsMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTracking, useRBAC, useQueryParams } from '@strapi/admin/strapi-admin';\nimport {\n  Flex,\n  IconButton,\n  Popover,\n  Checkbox,\n  TextButton,\n  Typography,\n  useCollator,\n  LinkButton,\n} from '@strapi/design-system';\nimport { Cog, ListPlus } from '@strapi/icons';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { NavLink } from 'react-router-dom';\n\nimport { useDoc } from '../../../hooks/useDocument';\nimport { useDocumentLayout } from '../../../hooks/useDocumentLayout';\nimport { useTypedSelector } from '../../../modules/hooks';\nimport { checkIfAttributeIsDisplayable } from '../../../utils/attributes';\n\ninterface ViewSettingsMenuProps extends FieldPickerProps {}\n\nconst ViewSettingsMenu = (props: ViewSettingsMenuProps) => {\n  const permissions = useTypedSelector(\n    (state) => state.admin_app.permissions.contentManager?.collectionTypesConfigurations ?? []\n  );\n  const [{ query }] = useQueryParams<{ plugins?: Record<string, unknown> }>();\n  const { formatMessage } = useIntl();\n  const {\n    allowedActions: { canConfigureView },\n  } = useRBAC(permissions);\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger>\n        <IconButton\n          label={formatMessage({\n            id: 'components.ViewSettings.tooltip',\n            defaultMessage: 'View Settings',\n          })}\n        >\n          <Cog />\n        </IconButton>\n      </Popover.Trigger>\n      <Popover.Content side=\"bottom\" align=\"end\" sideOffset={4}>\n        <Flex alignItems=\"stretch\" direction=\"column\" padding={3} gap={3}>\n          {canConfigureView ? (\n            <LinkButton\n              size=\"S\"\n              startIcon={<ListPlus />}\n              variant=\"secondary\"\n              tag={NavLink}\n              to={{\n                pathname: 'configurations/list',\n                search: query.plugins\n                  ? stringify({ plugins: query.plugins }, { encode: false })\n                  : '',\n              }}\n            >\n              {formatMessage({\n                id: 'app.links.configure-view',\n                defaultMessage: 'Configure the view',\n              })}\n            </LinkButton>\n          ) : null}\n          <FieldPicker {...props} />\n        </Flex>\n      </Popover.Content>\n    </Popover.Root>\n  );\n};\n\ninterface FieldPickerProps {\n  headers?: string[];\n  setHeaders: (headers: string[]) => void;\n  resetHeaders: () => void;\n}\n\nconst FieldPicker = ({ headers = [], resetHeaders, setHeaders }: FieldPickerProps) => {\n  const { trackUsage } = useTracking();\n  const { formatMessage, locale } = useIntl();\n\n  const { schema, model } = useDoc();\n  const { list } = useDocumentLayout(model);\n\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n\n  const attributes = schema?.attributes ?? {};\n\n  const columns = Object.keys(attributes)\n    .filter((name) => checkIfAttributeIsDisplayable(attributes[name]))\n    .map((name) => ({\n      name,\n      label: list.metadatas[name]?.label ?? '',\n    }))\n    .sort((a, b) => formatter.compare(a.label, b.label));\n\n  const handleChange = (name: string) => {\n    trackUsage('didChangeDisplayedFields');\n\n    /**\n     * create an array of the new headers, if the new name exists it should be removed,\n     * otherwise it should be added\n     */\n    const newHeaders = headers.includes(name)\n      ? headers.filter((header) => header !== name)\n      : [...headers, name];\n\n    setHeaders(newHeaders);\n  };\n\n  const handleReset = () => {\n    resetHeaders();\n  };\n\n  return (\n    <Flex\n      tag=\"fieldset\"\n      direction=\"column\"\n      alignItems=\"stretch\"\n      gap={1}\n      borderWidth={0}\n      maxHeight={'240px'}\n      padding={1}\n      overflow={'auto'}\n    >\n      <Flex justifyContent=\"space-between\" gap={2}>\n        <Typography tag=\"legend\" variant=\"pi\" fontWeight=\"bold\">\n          {formatMessage({\n            id: 'containers.list.displayedFields',\n            defaultMessage: 'Displayed fields',\n          })}\n        </Typography>\n\n        <TextButton onClick={handleReset}>\n          {formatMessage({\n            id: 'app.components.Button.reset',\n            defaultMessage: 'Reset',\n          })}\n        </TextButton>\n      </Flex>\n\n      <Flex direction=\"column\" alignItems=\"stretch\">\n        {columns.map((header) => {\n          const isActive = headers.includes(header.name);\n\n          return (\n            <Flex\n              wrap=\"wrap\"\n              gap={2}\n              background={isActive ? 'primary100' : 'transparent'}\n              hasRadius\n              padding={2}\n              marginBottom={1}\n              key={header.name}\n            >\n              <Checkbox\n                onCheckedChange={() => handleChange(header.name)}\n                checked={isActive}\n                name={header.name}\n              >\n                <Typography fontSize={1}>{header.label}</Typography>\n              </Checkbox>\n            </Flex>\n          );\n        })}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { ViewSettingsMenu };\nexport type { ViewSettingsMenuProps, FieldPickerProps };\n"],"names":["ViewSettingsMenu","props","permissions","useTypedSelector","state","admin_app","contentManager","collectionTypesConfigurations","query","useQueryParams","formatMessage","useIntl","allowedActions","canConfigureView","useRBAC","_jsxs","Popover","Root","_jsx","Trigger","IconButton","label","id","defaultMessage","Cog","Content","side","align","sideOffset","Flex","alignItems","direction","padding","gap","LinkButton","size","startIcon","ListPlus","variant","tag","NavLink","to","pathname","search","plugins","stringify","encode","FieldPicker","headers","resetHeaders","setHeaders","trackUsage","useTracking","locale","schema","model","useDoc","list","useDocumentLayout","formatter","useCollator","sensitivity","attributes","columns","Object","keys","filter","name","checkIfAttributeIsDisplayable","map","metadatas","sort","a","b","compare","handleChange","newHeaders","includes","header","handleReset","borderWidth","maxHeight","overflow","justifyContent","Typography","fontWeight","TextButton","onClick","isActive","wrap","background","hasRadius","marginBottom","Checkbox","onCheckedChange","checked","fontSize"],"mappings":"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"}

package/dist/admin/pages/ListView/components/ViewSettingsMenu.mjs

@@ -95,13 +95,15 @@ const FieldPicker = ({ headers = [], resetHeaders, setHeaders })=>{
         tag: "fieldset",
         direction: "column",
         alignItems: "stretch",
-        gap: 3,
+        gap: 1,
         borderWidth: 0,
         maxHeight: '240px',
-        overflow: 'scroll',
+        padding: 1,
+        overflow: 'auto',
         children: [
             /*#__PURE__*/ jsxs(Flex, {
                 justifyContent: "space-between",
+                gap: 2,
                 children: [
                     /*#__PURE__*/ jsx(Typography, {
                         tag: "legend",
@@ -132,6 +134,7 @@ const FieldPicker = ({ headers = [], resetHeaders, setHeaders })=>{
                         background: isActive ? 'primary100' : 'transparent',
                         hasRadius: true,
                         padding: 2,
+                        marginBottom: 1,
                         children: /*#__PURE__*/ jsx(Checkbox, {
                             onCheckedChange: ()=>handleChange(header.name),
                             checked: isActive,