@strapi/content-manager 5.48.0 → 5.49.0

package/dist/admin/pages/ListConfiguration/components/DraggableCard.js

@@ -13,7 +13,8 @@ var useDragAndDrop = require('../../../hooks/useDragAndDrop.js');
 var translations = require('../../../utils/translations.js');
 var EditFieldForm = require('./EditFieldForm.js');
 
-function _interopNamespaceDefault(e) {
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -30,7 +31,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 const DraggableCard = ({ attribute, index, isDraggingSibling, label, name, onMoveField, onRemoveField, setIsDraggingSibling })=>{
     const [isModalOpen, setIsModalOpen] = React__namespace.useState(false);

package/dist/admin/pages/ListConfiguration/components/DraggableCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableCard.js","sources":["../../../../../admin/src/pages/ListConfiguration/components/DraggableCard.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  BoxComponent,\n  Flex,\n  FlexComponent,\n  Modal,\n  Typography,\n  useComposedRefs,\n} from '@strapi/design-system';\nimport { Cross, Drag, Pencil } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { CardDragPreview } from '../../../components/DragPreviews/CardDragPreview';\nimport { ItemTypes } from '../../../constants/dragAndDrop';\nimport { useDragAndDrop } from '../../../hooks/useDragAndDrop';\nimport { getTranslation } from '../../../utils/translations';\n\nimport { EditFieldForm } from './EditFieldForm';\n\nimport type { ListFieldLayout } from '../../../hooks/useDocumentLayout';\n\ntype DraggableCardProps = Omit<ListFieldLayout, 'label'> & {\n  label: string;\n  index: number;\n  isDraggingSibling: boolean;\n  onMoveField: (dragIndex: number, hoverIndex: number) => void;\n  onRemoveField: () => void;\n  setIsDraggingSibling: (isDragging: boolean) => void;\n};\n\nconst DraggableCard = ({\n  attribute,\n  index,\n  isDraggingSibling,\n  label,\n  name,\n  onMoveField,\n  onRemoveField,\n  setIsDraggingSibling,\n}: DraggableCardProps) => {\n  const [isModalOpen, setIsModalOpen] = React.useState(false);\n  const { formatMessage } = useIntl();\n  const [, forceRerenderAfterDnd] = React.useState(false);\n\n  const [{ isDragging }, objectRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(true, {\n    type: ItemTypes.FIELD,\n    item: { index, label, name },\n    index,\n    onMoveItem: onMoveField,\n    onEnd: () => setIsDraggingSibling(false),\n  });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef]);\n\n  React.useEffect(() => {\n    if (isDragging) {\n      setIsDraggingSibling(true);\n    }\n  }, [isDragging, setIsDraggingSibling]);\n\n  // Effect in order to force a rerender after reordering the components\n  // Since we are removing the Accordion when doing the DnD  we are losing the dragRef, therefore the replaced element cannot be dragged\n  // anymore, this hack forces a rerender in order to apply the dragRef\n  React.useEffect(() => {\n    if (!isDraggingSibling) {\n      forceRerenderAfterDnd((prev) => !prev);\n    }\n  }, [isDraggingSibling]);\n\n  const composedRefs = useComposedRefs<HTMLButtonElement>(\n    dropRef,\n    objectRef as React.RefObject<HTMLButtonElement>\n  );\n\n  return (\n    <FieldWrapper ref={composedRefs}>\n      {isDragging && <CardDragPreview label={label} />}\n      {!isDragging && isDraggingSibling && <CardDragPreview isSibling label={label} />}\n\n      {!isDragging && !isDraggingSibling && (\n        <FieldContainer\n          borderColor=\"neutral150\"\n          background=\"neutral100\"\n          hasRadius\n          justifyContent=\"space-between\"\n          onClick={() => setIsModalOpen(true)}\n        >\n          <Flex gap={3}>\n            <DragButton\n              ref={dragRef}\n              aria-label={formatMessage(\n                {\n                  id: getTranslation('components.DraggableCard.move.field'),\n                  defaultMessage: 'Move {item}',\n                },\n                { item: label }\n              )}\n              onClick={(e) => e.stopPropagation()}\n              type=\"button\"\n            >\n              <Drag />\n            </DragButton>\n            <Typography fontWeight=\"bold\">{label}</Typography>\n          </Flex>\n          <Flex paddingLeft={3} onClick={(e) => e.stopPropagation()}>\n            <Modal.Root open={isModalOpen} onOpenChange={setIsModalOpen}>\n              <Modal.Trigger>\n                <ActionButton\n                  onClick={(e) => {\n                    e.stopPropagation();\n                  }}\n                  aria-label={formatMessage(\n                    {\n                      id: getTranslation('components.DraggableCard.edit.field'),\n                      defaultMessage: 'Edit {item}',\n                    },\n                    { item: label }\n                  )}\n                  type=\"button\"\n                >\n                  <Pencil width=\"1.2rem\" height=\"1.2rem\" />\n                </ActionButton>\n              </Modal.Trigger>\n              <EditFieldForm\n                attribute={attribute}\n                name={`layout.${index}`}\n                onClose={() => {\n                  setIsModalOpen(false);\n                }}\n              />\n            </Modal.Root>\n            <ActionButton\n              onClick={onRemoveField}\n              data-testid={`delete-${name}`}\n              aria-label={formatMessage(\n                {\n                  id: getTranslation('components.DraggableCard.delete.field'),\n                  defaultMessage: 'Delete {item}',\n                },\n                { item: label }\n              )}\n              type=\"button\"\n            >\n              <Cross width=\"1.2rem\" height=\"1.2rem\" />\n            </ActionButton>\n          </Flex>\n        </FieldContainer>\n      )}\n    </FieldWrapper>\n  );\n};\n\nconst ActionButton = styled.button`\n  display: flex;\n  align-items: center;\n  height: ${({ theme }) => theme.spaces[7]};\n  color: ${({ theme }) => theme.colors.neutral600};\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.neutral700};\n  }\n\n  &:last-child {\n    padding: 0 ${({ theme }) => theme.spaces[3]};\n  }\n`;\n\nconst DragButton = styled(ActionButton)`\n  padding: 0 ${({ theme }) => theme.spaces[3]};\n  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n  cursor: all-scroll;\n`;\n\nconst FieldContainer = styled<FlexComponent>(Flex)`\n  max-height: 3.2rem;\n  cursor: pointer;\n`;\n\nconst FieldWrapper = styled<BoxComponent>(Box)`\n  &:last-child {\n    padding-right: ${({ theme }) => theme.spaces[3]};\n  }\n`;\n\nexport { DraggableCard };\nexport type { DraggableCardProps };\n"],"names":["DraggableCard","attribute","index","isDraggingSibling","label","name","onMoveField","onRemoveField","setIsDraggingSibling","isModalOpen","setIsModalOpen","React","useState","formatMessage","useIntl","forceRerenderAfterDnd","isDragging","objectRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","FIELD","item","onMoveItem","onEnd","useEffect","getEmptyImage","captureDraggingState","prev","composedRefs","useComposedRefs","_jsxs","FieldWrapper","ref","_jsx","CardDragPreview","isSibling","FieldContainer","borderColor","background","hasRadius","justifyContent","onClick","Flex","gap","DragButton","aria-label","id","getTranslation","defaultMessage","e","stopPropagation","Drag","Typography","fontWeight","paddingLeft","Modal","Root","open","onOpenChange","Trigger","ActionButton","Pencil","width","height","EditFieldForm","onClose","data-testid","Cross","styled","button","theme","spaces","colors","neutral600","neutral700","neutral150","Box"],"mappings":"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"}
+{"version":3,"file":"DraggableCard.js","sources":["../../../../../admin/src/pages/ListConfiguration/components/DraggableCard.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  BoxComponent,\n  Flex,\n  FlexComponent,\n  Modal,\n  Typography,\n  useComposedRefs,\n} from '@strapi/design-system';\nimport { Cross, Drag, Pencil } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { CardDragPreview } from '../../../components/DragPreviews/CardDragPreview';\nimport { ItemTypes } from '../../../constants/dragAndDrop';\nimport { useDragAndDrop } from '../../../hooks/useDragAndDrop';\nimport { getTranslation } from '../../../utils/translations';\n\nimport { EditFieldForm } from './EditFieldForm';\n\nimport type { ListFieldLayout } from '../../../hooks/useDocumentLayout';\n\ntype DraggableCardProps = Omit<ListFieldLayout, 'label'> & {\n  label: string;\n  index: number;\n  isDraggingSibling: boolean;\n  onMoveField: (dragIndex: number, hoverIndex: number) => void;\n  onRemoveField: () => void;\n  setIsDraggingSibling: (isDragging: boolean) => void;\n};\n\nconst DraggableCard = ({\n  attribute,\n  index,\n  isDraggingSibling,\n  label,\n  name,\n  onMoveField,\n  onRemoveField,\n  setIsDraggingSibling,\n}: DraggableCardProps) => {\n  const [isModalOpen, setIsModalOpen] = React.useState(false);\n  const { formatMessage } = useIntl();\n  const [, forceRerenderAfterDnd] = React.useState(false);\n\n  const [{ isDragging }, objectRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(true, {\n    type: ItemTypes.FIELD,\n    item: { index, label, name },\n    index,\n    onMoveItem: onMoveField,\n    onEnd: () => setIsDraggingSibling(false),\n  });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef]);\n\n  React.useEffect(() => {\n    if (isDragging) {\n      setIsDraggingSibling(true);\n    }\n  }, [isDragging, setIsDraggingSibling]);\n\n  // Effect in order to force a rerender after reordering the components\n  // Since we are removing the Accordion when doing the DnD  we are losing the dragRef, therefore the replaced element cannot be dragged\n  // anymore, this hack forces a rerender in order to apply the dragRef\n  React.useEffect(() => {\n    if (!isDraggingSibling) {\n      forceRerenderAfterDnd((prev) => !prev);\n    }\n  }, [isDraggingSibling]);\n\n  const composedRefs = useComposedRefs<HTMLButtonElement>(\n    dropRef,\n    objectRef as React.RefObject<HTMLButtonElement>\n  );\n\n  return (\n    <FieldWrapper ref={composedRefs}>\n      {isDragging && <CardDragPreview label={label} />}\n      {!isDragging && isDraggingSibling && <CardDragPreview isSibling label={label} />}\n\n      {!isDragging && !isDraggingSibling && (\n        <FieldContainer\n          borderColor=\"neutral150\"\n          background=\"neutral100\"\n          hasRadius\n          justifyContent=\"space-between\"\n          onClick={() => setIsModalOpen(true)}\n        >\n          <Flex gap={3}>\n            <DragButton\n              ref={dragRef}\n              aria-label={formatMessage(\n                {\n                  id: getTranslation('components.DraggableCard.move.field'),\n                  defaultMessage: 'Move {item}',\n                },\n                { item: label }\n              )}\n              onClick={(e) => e.stopPropagation()}\n              type=\"button\"\n            >\n              <Drag />\n            </DragButton>\n            <Typography fontWeight=\"bold\">{label}</Typography>\n          </Flex>\n          <Flex paddingLeft={3} onClick={(e) => e.stopPropagation()}>\n            <Modal.Root open={isModalOpen} onOpenChange={setIsModalOpen}>\n              <Modal.Trigger>\n                <ActionButton\n                  onClick={(e) => {\n                    e.stopPropagation();\n                  }}\n                  aria-label={formatMessage(\n                    {\n                      id: getTranslation('components.DraggableCard.edit.field'),\n                      defaultMessage: 'Edit {item}',\n                    },\n                    { item: label }\n                  )}\n                  type=\"button\"\n                >\n                  <Pencil width=\"1.2rem\" height=\"1.2rem\" />\n                </ActionButton>\n              </Modal.Trigger>\n              <EditFieldForm\n                attribute={attribute}\n                name={`layout.${index}`}\n                onClose={() => {\n                  setIsModalOpen(false);\n                }}\n              />\n            </Modal.Root>\n            <ActionButton\n              onClick={onRemoveField}\n              data-testid={`delete-${name}`}\n              aria-label={formatMessage(\n                {\n                  id: getTranslation('components.DraggableCard.delete.field'),\n                  defaultMessage: 'Delete {item}',\n                },\n                { item: label }\n              )}\n              type=\"button\"\n            >\n              <Cross width=\"1.2rem\" height=\"1.2rem\" />\n            </ActionButton>\n          </Flex>\n        </FieldContainer>\n      )}\n    </FieldWrapper>\n  );\n};\n\nconst ActionButton = styled.button`\n  display: flex;\n  align-items: center;\n  height: ${({ theme }) => theme.spaces[7]};\n  color: ${({ theme }) => theme.colors.neutral600};\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.neutral700};\n  }\n\n  &:last-child {\n    padding: 0 ${({ theme }) => theme.spaces[3]};\n  }\n`;\n\nconst DragButton = styled(ActionButton)`\n  padding: 0 ${({ theme }) => theme.spaces[3]};\n  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n  cursor: all-scroll;\n`;\n\nconst FieldContainer = styled<FlexComponent>(Flex)`\n  max-height: 3.2rem;\n  cursor: pointer;\n`;\n\nconst FieldWrapper = styled<BoxComponent>(Box)`\n  &:last-child {\n    padding-right: ${({ theme }) => theme.spaces[3]};\n  }\n`;\n\nexport { DraggableCard };\nexport type { DraggableCardProps };\n"],"names":["DraggableCard","attribute","index","isDraggingSibling","label","name","onMoveField","onRemoveField","setIsDraggingSibling","isModalOpen","setIsModalOpen","React","useState","formatMessage","useIntl","forceRerenderAfterDnd","isDragging","objectRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","FIELD","item","onMoveItem","onEnd","useEffect","getEmptyImage","captureDraggingState","prev","composedRefs","useComposedRefs","_jsxs","FieldWrapper","ref","_jsx","CardDragPreview","isSibling","FieldContainer","borderColor","background","hasRadius","justifyContent","onClick","Flex","gap","DragButton","aria-label","id","getTranslation","defaultMessage","e","stopPropagation","Drag","Typography","fontWeight","paddingLeft","Modal","Root","open","onOpenChange","Trigger","ActionButton","Pencil","width","height","EditFieldForm","onClose","data-testid","Cross","styled","button","theme","spaces","colors","neutral600","neutral700","neutral150","Box"],"mappings":"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"}

package/dist/admin/pages/ListConfiguration/components/EditFieldForm.js

@@ -10,7 +10,8 @@ var FieldTypeIcon = require('../../../components/FieldTypeIcon.js');
 var strings = require('../../../utils/strings.js');
 var translations = require('../../../utils/translations.js');
 
-function _interopNamespaceDefault(e) {
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -27,7 +28,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var yup__namespace = /*#__PURE__*/_interopNamespaceDefault(yup);
+var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 
 const FIELD_SCHEMA = yup__namespace.object().shape({
     label: yup__namespace.string().required(),

package/dist/admin/pages/ListConfiguration/components/EditFieldForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditFieldForm.js","sources":["../../../../../admin/src/pages/ListConfiguration/components/EditFieldForm.tsx"],"sourcesContent":["import { Form, useField, InputRenderer, useNotification } from '@strapi/admin/strapi-admin';\nimport { Button, Flex, FlexComponent, Grid, Modal } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\nimport * as yup from 'yup';\n\nimport { FieldTypeIcon } from '../../../components/FieldTypeIcon';\nimport { capitalise } from '../../../utils/strings';\nimport { getTranslation } from '../../../utils/translations';\n\nimport type { ListFieldLayout } from '../../../hooks/useDocumentLayout';\nimport type { FormData } from '../ListConfigurationPage';\n\ninterface EditFieldFormProps extends Pick<ListFieldLayout, 'attribute'> {\n  name: string;\n  onClose: () => void;\n}\n\nconst FIELD_SCHEMA = yup.object().shape({\n  label: yup.string().required(),\n  sortable: yup.boolean(),\n});\n\nconst EditFieldForm = ({ attribute, name, onClose }: EditFieldFormProps) => {\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n\n  const { value, onChange } = useField<FormData['layout'][number]>(name);\n\n  if (!value) {\n    // This is very unlikely to happen, but it ensures the form is not opened without a value.\n    console.error(\n      \"You've opened a field to edit without it being part of the form, this is likely a bug with Strapi. Please open an issue.\"\n    );\n\n    toggleNotification({\n      message: formatMessage({\n        id: 'content-manager.containers.list-settings.modal-form.error',\n        defaultMessage: 'An error occurred while trying to open the form.',\n      }),\n      type: 'danger',\n    });\n\n    return null;\n  }\n\n  let shouldDisplaySortToggle = !['media', 'relation'].includes(attribute.type);\n\n  if ('relation' in attribute && ['oneWay', 'oneToOne', 'manyToOne'].includes(attribute.relation)) {\n    shouldDisplaySortToggle = true;\n  }\n\n  return (\n    <Modal.Content>\n      <Form\n        method=\"PUT\"\n        initialValues={value}\n        validationSchema={FIELD_SCHEMA}\n        onSubmit={(data) => {\n          onChange(name, data);\n          onClose();\n        }}\n      >\n        <Modal.Header>\n          <HeaderContainer>\n            {/* @ts-expect-error attribute.type === custom does not work here */}\n            <FieldTypeIcon type={attribute.type} />\n            <Modal.Title>\n              {formatMessage(\n                {\n                  id: getTranslation('containers.list-settings.modal-form.label'),\n                  defaultMessage: 'Edit {fieldName}',\n                },\n                { fieldName: capitalise(value.label) }\n              )}\n            </Modal.Title>\n          </HeaderContainer>\n        </Modal.Header>\n        <Modal.Body>\n          <Grid.Root gap={4}>\n            {[\n              {\n                name: 'label',\n                label: formatMessage({\n                  id: getTranslation('form.Input.label'),\n                  defaultMessage: 'Label',\n                }),\n                hint: formatMessage({\n                  id: getTranslation('form.Input.label.inputDescription'),\n                  defaultMessage: \"This value overrides the label displayed in the table's head\",\n                }),\n                size: 6,\n                type: 'string' as const,\n              },\n              {\n                label: formatMessage({\n                  id: getTranslation('form.Input.sort.field'),\n                  defaultMessage: 'Enable sort on this field',\n                }),\n                name: 'sortable',\n                size: 6,\n                type: 'boolean' as const,\n              },\n            ]\n              .filter(\n                (field) =>\n                  field.name !== 'sortable' ||\n                  (field.name === 'sortable' && shouldDisplaySortToggle)\n              )\n              .map(({ size, ...field }) => (\n                <Grid.Item\n                  key={field.name}\n                  xs={12}\n                  col={size}\n                  direction=\"column\"\n                  alignItems=\"stretch\"\n                >\n                  <InputRenderer {...field} />\n                </Grid.Item>\n              ))}\n          </Grid.Root>\n        </Modal.Body>\n        <Modal.Footer>\n          <Button onClick={onClose} variant=\"tertiary\">\n            {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}\n          </Button>\n          <Button type=\"submit\">\n            {formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}\n          </Button>\n        </Modal.Footer>\n      </Form>\n    </Modal.Content>\n  );\n};\n\nconst HeaderContainer = styled<FlexComponent>(Flex)`\n  svg {\n    width: 3.2rem;\n    margin-right: ${({ theme }) => theme.spaces[3]};\n  }\n`;\n\nexport { EditFieldForm };\nexport type { EditFieldFormProps };\n"],"names":["FIELD_SCHEMA","yup","object","shape","label","string","required","sortable","boolean","EditFieldForm","attribute","name","onClose","formatMessage","useIntl","toggleNotification","useNotification","value","onChange","useField","console","error","message","id","defaultMessage","type","shouldDisplaySortToggle","includes","relation","_jsx","Modal","Content","_jsxs","Form","method","initialValues","validationSchema","onSubmit","data","Header","HeaderContainer","FieldTypeIcon","Title","getTranslation","fieldName","capitalise","Body","Grid","Root","gap","hint","size","filter","field","map","Item","xs","col","direction","alignItems","InputRenderer","Footer","Button","onClick","variant","styled","Flex","theme","spaces"],"mappings":"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"}
+{"version":3,"file":"EditFieldForm.js","sources":["../../../../../admin/src/pages/ListConfiguration/components/EditFieldForm.tsx"],"sourcesContent":["import { Form, useField, InputRenderer, useNotification } from '@strapi/admin/strapi-admin';\nimport { Button, Flex, FlexComponent, Grid, Modal } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\nimport * as yup from 'yup';\n\nimport { FieldTypeIcon } from '../../../components/FieldTypeIcon';\nimport { capitalise } from '../../../utils/strings';\nimport { getTranslation } from '../../../utils/translations';\n\nimport type { ListFieldLayout } from '../../../hooks/useDocumentLayout';\nimport type { FormData } from '../ListConfigurationPage';\n\ninterface EditFieldFormProps extends Pick<ListFieldLayout, 'attribute'> {\n  name: string;\n  onClose: () => void;\n}\n\nconst FIELD_SCHEMA = yup.object().shape({\n  label: yup.string().required(),\n  sortable: yup.boolean(),\n});\n\nconst EditFieldForm = ({ attribute, name, onClose }: EditFieldFormProps) => {\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n\n  const { value, onChange } = useField<FormData['layout'][number]>(name);\n\n  if (!value) {\n    // This is very unlikely to happen, but it ensures the form is not opened without a value.\n    console.error(\n      \"You've opened a field to edit without it being part of the form, this is likely a bug with Strapi. Please open an issue.\"\n    );\n\n    toggleNotification({\n      message: formatMessage({\n        id: 'content-manager.containers.list-settings.modal-form.error',\n        defaultMessage: 'An error occurred while trying to open the form.',\n      }),\n      type: 'danger',\n    });\n\n    return null;\n  }\n\n  let shouldDisplaySortToggle = !['media', 'relation'].includes(attribute.type);\n\n  if ('relation' in attribute && ['oneWay', 'oneToOne', 'manyToOne'].includes(attribute.relation)) {\n    shouldDisplaySortToggle = true;\n  }\n\n  return (\n    <Modal.Content>\n      <Form\n        method=\"PUT\"\n        initialValues={value}\n        validationSchema={FIELD_SCHEMA}\n        onSubmit={(data) => {\n          onChange(name, data);\n          onClose();\n        }}\n      >\n        <Modal.Header>\n          <HeaderContainer>\n            {/* @ts-expect-error attribute.type === custom does not work here */}\n            <FieldTypeIcon type={attribute.type} />\n            <Modal.Title>\n              {formatMessage(\n                {\n                  id: getTranslation('containers.list-settings.modal-form.label'),\n                  defaultMessage: 'Edit {fieldName}',\n                },\n                { fieldName: capitalise(value.label) }\n              )}\n            </Modal.Title>\n          </HeaderContainer>\n        </Modal.Header>\n        <Modal.Body>\n          <Grid.Root gap={4}>\n            {[\n              {\n                name: 'label',\n                label: formatMessage({\n                  id: getTranslation('form.Input.label'),\n                  defaultMessage: 'Label',\n                }),\n                hint: formatMessage({\n                  id: getTranslation('form.Input.label.inputDescription'),\n                  defaultMessage: \"This value overrides the label displayed in the table's head\",\n                }),\n                size: 6,\n                type: 'string' as const,\n              },\n              {\n                label: formatMessage({\n                  id: getTranslation('form.Input.sort.field'),\n                  defaultMessage: 'Enable sort on this field',\n                }),\n                name: 'sortable',\n                size: 6,\n                type: 'boolean' as const,\n              },\n            ]\n              .filter(\n                (field) =>\n                  field.name !== 'sortable' ||\n                  (field.name === 'sortable' && shouldDisplaySortToggle)\n              )\n              .map(({ size, ...field }) => (\n                <Grid.Item\n                  key={field.name}\n                  xs={12}\n                  col={size}\n                  direction=\"column\"\n                  alignItems=\"stretch\"\n                >\n                  <InputRenderer {...field} />\n                </Grid.Item>\n              ))}\n          </Grid.Root>\n        </Modal.Body>\n        <Modal.Footer>\n          <Button onClick={onClose} variant=\"tertiary\">\n            {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}\n          </Button>\n          <Button type=\"submit\">\n            {formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}\n          </Button>\n        </Modal.Footer>\n      </Form>\n    </Modal.Content>\n  );\n};\n\nconst HeaderContainer = styled<FlexComponent>(Flex)`\n  svg {\n    width: 3.2rem;\n    margin-right: ${({ theme }) => theme.spaces[3]};\n  }\n`;\n\nexport { EditFieldForm };\nexport type { EditFieldFormProps };\n"],"names":["FIELD_SCHEMA","yup","object","shape","label","string","required","sortable","boolean","EditFieldForm","attribute","name","onClose","formatMessage","useIntl","toggleNotification","useNotification","value","onChange","useField","console","error","message","id","defaultMessage","type","shouldDisplaySortToggle","includes","relation","_jsx","Modal","Content","_jsxs","Form","method","initialValues","validationSchema","onSubmit","data","Header","HeaderContainer","FieldTypeIcon","Title","getTranslation","fieldName","capitalise","Body","Grid","Root","gap","hint","size","filter","field","map","Item","xs","col","direction","alignItems","InputRenderer","Footer","Button","onClick","variant","styled","Flex","theme","spaces"],"mappings":"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"}

package/dist/admin/pages/ListConfiguration/components/Settings.js

@@ -8,7 +8,8 @@ var reactIntl = require('react-intl');
 var useDocument = require('../../../hooks/useDocument.js');
 var translations = require('../../../utils/translations.js');
 
-function _interopNamespaceDefault(e) {
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -25,7 +26,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 const EXCLUDED_SORT_ATTRIBUTE_TYPES = [
     'media',

package/dist/admin/pages/ListConfiguration/components/Settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"Settings.js","sources":["../../../../../admin/src/pages/ListConfiguration/components/Settings.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, InputRenderer, type InputProps } from '@strapi/admin/strapi-admin';\nimport { Flex, Grid, Typography, useCollator } from '@strapi/design-system';\nimport { type MessageDescriptor, useIntl } from 'react-intl';\n\nimport { useDoc } from '../../../hooks/useDocument';\nimport { type EditFieldLayout } from '../../../hooks/useDocumentLayout';\nimport { getTranslation } from '../../../utils/translations';\nimport { type FormData } from '../ListConfigurationPage';\n\nimport type { DistributiveOmit } from 'react-redux';\n\nexport type InputPropsWithMessageDescriptors = DistributiveOmit<\n  InputProps,\n  'hint' | 'label' | 'placeholder'\n> & {\n  hint?: MessageDescriptor;\n  label: MessageDescriptor;\n  placeholder?: MessageDescriptor;\n};\n\n/**\n * @internal\n * @description Form inputs are always displayed in a grid, so we need\n * to use the size property to determine how many columns the input should\n * take up.\n */\nexport type FormLayoutInputProps = InputPropsWithMessageDescriptors & { size: number };\n\nconst EXCLUDED_SORT_ATTRIBUTE_TYPES = [\n  'media',\n  'richtext',\n  'dynamiczone',\n  'relation',\n  'component',\n  'json',\n  'blocks',\n];\n\ninterface SortOption {\n  value: string;\n  label: string;\n}\n\nconst Settings = () => {\n  const { formatMessage, locale } = useIntl();\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n  const { schema } = useDoc();\n\n  const layout = useForm<FormData['layout']>('Settings', (state) => state.values.layout ?? []);\n  const currentSortBy = useForm<FormData['settings']['defaultSortBy']>(\n    'Settings',\n    (state) => state.values.settings.defaultSortBy\n  );\n  const onChange = useForm('Settings', (state) => state.onChange);\n\n  const sortOptions = React.useMemo(\n    () =>\n      Object.values(layout).reduce<SortOption[]>((acc, field) => {\n        if (schema && !EXCLUDED_SORT_ATTRIBUTE_TYPES.includes(schema.attributes[field.name].type)) {\n          acc.push({\n            value: field.name,\n            label: typeof field.label !== 'string' ? formatMessage(field.label) : field.label,\n          });\n        }\n\n        return acc;\n      }, []),\n    [formatMessage, layout, schema]\n  );\n\n  const sortOptionsSorted = sortOptions.sort((a, b) => formatter.compare(a.label, b.label));\n\n  React.useEffect(() => {\n    if (sortOptionsSorted.findIndex((opt) => opt.value === currentSortBy) === -1) {\n      onChange('settings.defaultSortBy', sortOptionsSorted[0]?.value);\n    }\n  }, [currentSortBy, onChange, sortOptionsSorted]);\n\n  const formLayout = React.useMemo(\n    () =>\n      SETTINGS_FORM_LAYOUT.map((row) =>\n        row.map((field) => {\n          if (field.type === 'enumeration') {\n            return {\n              ...field,\n              hint: field.hint ? formatMessage(field.hint) : undefined,\n              label: formatMessage(field.label),\n              options: field.name === 'settings.defaultSortBy' ? sortOptionsSorted : field.options,\n            };\n          } else {\n            return {\n              ...field,\n              hint: field.hint ? formatMessage(field.hint) : undefined,\n              label: formatMessage(field.label),\n            };\n          }\n        })\n      ) as [top: EditFieldLayout[], bottom: EditFieldLayout[]],\n    [formatMessage, sortOptionsSorted]\n  );\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={4}>\n      <Typography variant=\"delta\" tag=\"h2\">\n        {formatMessage({\n          id: getTranslation('containers.SettingPage.settings'),\n          defaultMessage: 'Settings',\n        })}\n      </Typography>\n      <Grid.Root key=\"bottom\" gap={4}>\n        {formLayout.map((row) =>\n          row.map(({ size, ...field }) => (\n            <Grid.Item key={field.name} xs={12} col={size} direction=\"column\" alignItems=\"stretch\">\n              {/* @ts-expect-error – issue with EnumerationProps conflicting with InputProps */}\n              <InputRenderer {...field} />\n            </Grid.Item>\n          ))\n        )}\n      </Grid.Root>\n    </Flex>\n  );\n};\n\nconst SETTINGS_FORM_LAYOUT: FormLayoutInputProps[][] = [\n  [\n    {\n      label: {\n        id: getTranslation('form.Input.search'),\n        defaultMessage: 'Enable search',\n      },\n      name: 'settings.searchable',\n      size: 4,\n      type: 'boolean' as const,\n    },\n    {\n      label: {\n        id: getTranslation('form.Input.filters'),\n        defaultMessage: 'Enable filters',\n      },\n      name: 'settings.filterable',\n      size: 4,\n      type: 'boolean' as const,\n    },\n    {\n      label: {\n        id: getTranslation('form.Input.bulkActions'),\n        defaultMessage: 'Enable bulk actions',\n      },\n      name: 'settings.bulkable',\n      size: 4,\n      type: 'boolean' as const,\n    },\n  ],\n  [\n    {\n      hint: {\n        id: getTranslation('form.Input.pageEntries.inputDescription'),\n        defaultMessage: 'Note: You can override this value in the Collection Type settings page.',\n      },\n      label: {\n        id: getTranslation('form.Input.pageEntries'),\n        defaultMessage: 'Entries per page',\n      },\n      name: 'settings.pageSize',\n      options: ['10', '20', '50', '100'].map((value) => ({ value, label: value })),\n      size: 6,\n      type: 'enumeration' as const,\n    },\n    {\n      label: {\n        id: getTranslation('form.Input.defaultSort'),\n        defaultMessage: 'Default sort attribute',\n      },\n      name: 'settings.defaultSortBy',\n      options: [],\n      size: 3,\n      type: 'enumeration' as const,\n    },\n    {\n      label: {\n        id: getTranslation('form.Input.sort.order'),\n        defaultMessage: 'Default sort order',\n      },\n      name: 'settings.defaultSortOrder',\n      options: ['ASC', 'DESC'].map((value) => ({ value, label: value })),\n      size: 3,\n      type: 'enumeration' as const,\n    },\n  ],\n];\n\nexport { Settings };\n"],"names":["EXCLUDED_SORT_ATTRIBUTE_TYPES","Settings","formatMessage","locale","useIntl","formatter","useCollator","sensitivity","schema","useDoc","layout","useForm","state","values","currentSortBy","settings","defaultSortBy","onChange","sortOptions","React","useMemo","Object","reduce","acc","field","includes","attributes","name","type","push","value","label","sortOptionsSorted","sort","a","b","compare","useEffect","findIndex","opt","formLayout","SETTINGS_FORM_LAYOUT","map","row","hint","undefined","options","_jsxs","Flex","direction","alignItems","gap","_jsx","Typography","variant","tag","id","getTranslation","defaultMessage","Grid","Root","size","Item","xs","col","InputRenderer"],"mappings":"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"}
+{"version":3,"file":"Settings.js","sources":["../../../../../admin/src/pages/ListConfiguration/components/Settings.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, InputRenderer, type InputProps } from '@strapi/admin/strapi-admin';\nimport { Flex, Grid, Typography, useCollator } from '@strapi/design-system';\nimport { type MessageDescriptor, useIntl } from 'react-intl';\n\nimport { useDoc } from '../../../hooks/useDocument';\nimport { type EditFieldLayout } from '../../../hooks/useDocumentLayout';\nimport { getTranslation } from '../../../utils/translations';\nimport { type FormData } from '../ListConfigurationPage';\n\nimport type { DistributiveOmit } from 'react-redux';\n\nexport type InputPropsWithMessageDescriptors = DistributiveOmit<\n  InputProps,\n  'hint' | 'label' | 'placeholder'\n> & {\n  hint?: MessageDescriptor;\n  label: MessageDescriptor;\n  placeholder?: MessageDescriptor;\n};\n\n/**\n * @internal\n * @description Form inputs are always displayed in a grid, so we need\n * to use the size property to determine how many columns the input should\n * take up.\n */\nexport type FormLayoutInputProps = InputPropsWithMessageDescriptors & { size: number };\n\nconst EXCLUDED_SORT_ATTRIBUTE_TYPES = [\n  'media',\n  'richtext',\n  'dynamiczone',\n  'relation',\n  'component',\n  'json',\n  'blocks',\n];\n\ninterface SortOption {\n  value: string;\n  label: string;\n}\n\nconst Settings = () => {\n  const { formatMessage, locale } = useIntl();\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n  const { schema } = useDoc();\n\n  const layout = useForm<FormData['layout']>('Settings', (state) => state.values.layout ?? []);\n  const currentSortBy = useForm<FormData['settings']['defaultSortBy']>(\n    'Settings',\n    (state) => state.values.settings.defaultSortBy\n  );\n  const onChange = useForm('Settings', (state) => state.onChange);\n\n  const sortOptions = React.useMemo(\n    () =>\n      Object.values(layout).reduce<SortOption[]>((acc, field) => {\n        if (schema && !EXCLUDED_SORT_ATTRIBUTE_TYPES.includes(schema.attributes[field.name].type)) {\n          acc.push({\n            value: field.name,\n            label: typeof field.label !== 'string' ? formatMessage(field.label) : field.label,\n          });\n        }\n\n        return acc;\n      }, []),\n    [formatMessage, layout, schema]\n  );\n\n  const sortOptionsSorted = sortOptions.sort((a, b) => formatter.compare(a.label, b.label));\n\n  React.useEffect(() => {\n    if (sortOptionsSorted.findIndex((opt) => opt.value === currentSortBy) === -1) {\n      onChange('settings.defaultSortBy', sortOptionsSorted[0]?.value);\n    }\n  }, [currentSortBy, onChange, sortOptionsSorted]);\n\n  const formLayout = React.useMemo(\n    () =>\n      SETTINGS_FORM_LAYOUT.map((row) =>\n        row.map((field) => {\n          if (field.type === 'enumeration') {\n            return {\n              ...field,\n              hint: field.hint ? formatMessage(field.hint) : undefined,\n              label: formatMessage(field.label),\n              options: field.name === 'settings.defaultSortBy' ? sortOptionsSorted : field.options,\n            };\n          } else {\n            return {\n              ...field,\n              hint: field.hint ? formatMessage(field.hint) : undefined,\n              label: formatMessage(field.label),\n            };\n          }\n        })\n      ) as [top: EditFieldLayout[], bottom: EditFieldLayout[]],\n    [formatMessage, sortOptionsSorted]\n  );\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={4}>\n      <Typography variant=\"delta\" tag=\"h2\">\n        {formatMessage({\n          id: getTranslation('containers.SettingPage.settings'),\n          defaultMessage: 'Settings',\n        })}\n      </Typography>\n      <Grid.Root key=\"bottom\" gap={4}>\n        {formLayout.map((row) =>\n          row.map(({ size, ...field }) => (\n            <Grid.Item key={field.name} xs={12} col={size} direction=\"column\" alignItems=\"stretch\">\n              {/* @ts-expect-error – issue with EnumerationProps conflicting with InputProps */}\n              <InputRenderer {...field} />\n            </Grid.Item>\n          ))\n        )}\n      </Grid.Root>\n    </Flex>\n  );\n};\n\nconst SETTINGS_FORM_LAYOUT: FormLayoutInputProps[][] = [\n  [\n    {\n      label: {\n        id: getTranslation('form.Input.search'),\n        defaultMessage: 'Enable search',\n      },\n      name: 'settings.searchable',\n      size: 4,\n      type: 'boolean' as const,\n    },\n    {\n      label: {\n        id: getTranslation('form.Input.filters'),\n        defaultMessage: 'Enable filters',\n      },\n      name: 'settings.filterable',\n      size: 4,\n      type: 'boolean' as const,\n    },\n    {\n      label: {\n        id: getTranslation('form.Input.bulkActions'),\n        defaultMessage: 'Enable bulk actions',\n      },\n      name: 'settings.bulkable',\n      size: 4,\n      type: 'boolean' as const,\n    },\n  ],\n  [\n    {\n      hint: {\n        id: getTranslation('form.Input.pageEntries.inputDescription'),\n        defaultMessage: 'Note: You can override this value in the Collection Type settings page.',\n      },\n      label: {\n        id: getTranslation('form.Input.pageEntries'),\n        defaultMessage: 'Entries per page',\n      },\n      name: 'settings.pageSize',\n      options: ['10', '20', '50', '100'].map((value) => ({ value, label: value })),\n      size: 6,\n      type: 'enumeration' as const,\n    },\n    {\n      label: {\n        id: getTranslation('form.Input.defaultSort'),\n        defaultMessage: 'Default sort attribute',\n      },\n      name: 'settings.defaultSortBy',\n      options: [],\n      size: 3,\n      type: 'enumeration' as const,\n    },\n    {\n      label: {\n        id: getTranslation('form.Input.sort.order'),\n        defaultMessage: 'Default sort order',\n      },\n      name: 'settings.defaultSortOrder',\n      options: ['ASC', 'DESC'].map((value) => ({ value, label: value })),\n      size: 3,\n      type: 'enumeration' as const,\n    },\n  ],\n];\n\nexport { Settings };\n"],"names":["EXCLUDED_SORT_ATTRIBUTE_TYPES","Settings","formatMessage","locale","useIntl","formatter","useCollator","sensitivity","schema","useDoc","layout","useForm","state","values","currentSortBy","settings","defaultSortBy","onChange","sortOptions","React","useMemo","Object","reduce","acc","field","includes","attributes","name","type","push","value","label","sortOptionsSorted","sort","a","b","compare","useEffect","findIndex","opt","formLayout","SETTINGS_FORM_LAYOUT","map","row","hint","undefined","options","_jsxs","Flex","direction","alignItems","gap","_jsx","Typography","variant","tag","id","getTranslation","defaultMessage","Grid","Root","size","Item","xs","col","InputRenderer"],"mappings":"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"}

package/dist/admin/pages/ListConfiguration/components/SortDisplayedFields.js

@@ -7,12 +7,12 @@ var designSystem = require('@strapi/design-system');
 var Icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var useDocument = require('../../../hooks/useDocument.js');
-var contentTypes = require('../../../services/contentTypes.js');
 var attributes = require('../../../utils/attributes.js');
 var translations = require('../../../utils/translations.js');
 var DraggableCard = require('./DraggableCard.js');
 
-function _interopNamespaceDefault(e) {
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -29,11 +29,11 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const SortDisplayedFields = ()=>{
+const SortDisplayedFields = ({ metadatas })=>{
     const { formatMessage } = reactIntl.useIntl();
-    const { model, schema } = useDocument.useDoc();
+    const { schema } = useDocument.useDoc();
     const [isDraggingSibling, setIsDraggingSibling] = React__namespace.useState(false);
     const [lastAction, setLastAction] = React__namespace.useState(null);
     const scrollableContainerRef = React__namespace.useRef(null);
@@ -41,11 +41,6 @@ const SortDisplayedFields = ()=>{
     const addFieldRow = strapiAdmin.useForm('SortDisplayedFields', (state)=>state.addFieldRow);
     const removeFieldRow = strapiAdmin.useForm('SortDisplayedFields', (state)=>state.removeFieldRow);
     const moveFieldRow = strapiAdmin.useForm('SortDisplayedFields', (state)=>state.moveFieldRow);
-    const { metadata: allMetadata } = contentTypes.useGetContentTypeConfigurationQuery(model, {
-        selectFromResult: ({ data })=>({
-                metadata: data?.contentType.metadatas ?? {}
-            })
-    });
     /**
    * This is our list of fields that are not displayed in the current layout
    * so we create their default state to be added to the layout.
@@ -56,7 +51,9 @@ const SortDisplayedFields = ()=>{
         const displayedFieldNames = values.map((field)=>field.name);
         return Object.entries(schema.attributes).reduce((acc, [name, attribute])=>{
             if (!displayedFieldNames.includes(name) && attributes.checkIfAttributeIsDisplayable(attribute)) {
-                const { list: metadata } = allMetadata[name];
+                const metadata = metadatas[name] || {
+                    label: name
+                };
                 acc.push({
                     name,
                     label: metadata.label || name,
@@ -66,7 +63,7 @@ const SortDisplayedFields = ()=>{
             return acc;
         }, []);
     }, [
-        allMetadata,
+        metadatas,
         values,
         schema
     ]);

package/dist/admin/pages/ListConfiguration/components/SortDisplayedFields.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortDisplayedFields.js","sources":["../../../../../admin/src/pages/ListConfiguration/components/SortDisplayedFields.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, VisuallyHidden, Typography, Menu } from '@strapi/design-system';\nimport { Plus } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { useDoc } from '../../../hooks/useDocument';\nimport { useGetContentTypeConfigurationQuery } from '../../../services/contentTypes';\nimport { checkIfAttributeIsDisplayable } from '../../../utils/attributes';\nimport { getTranslation } from '../../../utils/translations';\n\nimport { DraggableCard, DraggableCardProps } from './DraggableCard';\n\nimport type { ListLayout } from '../../../hooks/useDocumentLayout';\nimport type { FormData } from '../ListConfigurationPage';\n\ninterface SortDisplayedFieldsProps extends Pick<ListLayout, 'layout'> {}\n\nconst SortDisplayedFields = () => {\n  const { formatMessage } = useIntl();\n  const { model, schema } = useDoc();\n  const [isDraggingSibling, setIsDraggingSibling] = React.useState(false);\n  const [lastAction, setLastAction] = React.useState<string | null>(null);\n  const scrollableContainerRef = React.useRef<HTMLDivElement>(null);\n\n  const values = useForm<FormData['layout']>(\n    'SortDisplayedFields',\n    (state) => state.values.layout ?? []\n  );\n  const addFieldRow = useForm('SortDisplayedFields', (state) => state.addFieldRow);\n  const removeFieldRow = useForm('SortDisplayedFields', (state) => state.removeFieldRow);\n  const moveFieldRow = useForm('SortDisplayedFields', (state) => state.moveFieldRow);\n\n  const { metadata: allMetadata } = useGetContentTypeConfigurationQuery(model, {\n    selectFromResult: ({ data }) => ({ metadata: data?.contentType.metadatas ?? {} }),\n  });\n\n  /**\n   * This is our list of fields that are not displayed in the current layout\n   * so we create their default state to be added to the layout.\n   */\n  const nonDisplayedFields = React.useMemo(() => {\n    if (!schema) {\n      return [];\n    }\n\n    const displayedFieldNames = values.map((field) => field.name);\n\n    return Object.entries(schema.attributes).reduce<Array<FormData['layout'][number]>>(\n      (acc, [name, attribute]) => {\n        if (!displayedFieldNames.includes(name) && checkIfAttributeIsDisplayable(attribute)) {\n          const { list: metadata } = allMetadata[name];\n\n          acc.push({\n            name,\n            label: metadata.label || name,\n            sortable: metadata.sortable,\n          });\n        }\n\n        return acc;\n      },\n      []\n    );\n  }, [allMetadata, values, schema]);\n\n  const handleAddField = (field: FormData['layout'][number]) => {\n    setLastAction('add');\n    addFieldRow('layout', field);\n  };\n\n  const handleRemoveField = (index: number) => {\n    setLastAction('remove');\n    removeFieldRow('layout', index);\n  };\n\n  const handleMoveField: DraggableCardProps['onMoveField'] = (dragIndex, hoverIndex) => {\n    moveFieldRow('layout', dragIndex, hoverIndex);\n  };\n\n  React.useEffect(() => {\n    if (lastAction === 'add' && scrollableContainerRef?.current) {\n      scrollableContainerRef.current.scrollLeft = scrollableContainerRef.current.scrollWidth;\n    }\n  }, [lastAction]);\n\n  return (\n    <Flex alignItems=\"stretch\" direction=\"column\" gap={4}>\n      <Typography variant=\"delta\" tag=\"h2\">\n        {formatMessage({\n          id: getTranslation('containers.SettingPage.view'),\n          defaultMessage: 'View',\n        })}\n      </Typography>\n\n      <Flex padding={4} borderColor=\"neutral300\" borderStyle=\"dashed\" borderWidth=\"1px\" hasRadius>\n        <Box flex=\"1\" overflow=\"auto hidden\" ref={scrollableContainerRef}>\n          <Flex gap={3}>\n            {values.map((field, index) => (\n              <DraggableCard\n                key={field.name}\n                index={index}\n                isDraggingSibling={isDraggingSibling}\n                onMoveField={handleMoveField}\n                onRemoveField={() => handleRemoveField(index)}\n                setIsDraggingSibling={setIsDraggingSibling}\n                {...field}\n                attribute={schema!.attributes[field.name]}\n                label={typeof field.label === 'object' ? formatMessage(field.label) : field.label}\n              />\n            ))}\n          </Flex>\n        </Box>\n\n        <Menu.Root>\n          <Menu.Trigger\n            paddingLeft={2}\n            paddingRight={2}\n            justifyContent=\"center\"\n            endIcon={null}\n            disabled={nonDisplayedFields.length === 0}\n            variant=\"tertiary\"\n          >\n            <VisuallyHidden tag=\"span\">\n              {formatMessage({\n                id: getTranslation('components.FieldSelect.label'),\n                defaultMessage: 'Add a field',\n              })}\n            </VisuallyHidden>\n            <Plus aria-hidden focusable={false} style={{ position: 'relative', top: 2 }} />\n          </Menu.Trigger>\n          <Menu.Content>\n            {nonDisplayedFields.map((field) => (\n              <Menu.Item key={field.name} onSelect={() => handleAddField(field)}>\n                {typeof field.label === 'object' ? formatMessage(field.label) : field.label}\n              </Menu.Item>\n            ))}\n          </Menu.Content>\n        </Menu.Root>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { SortDisplayedFields };\nexport type { SortDisplayedFieldsProps };\n"],"names":["SortDisplayedFields","formatMessage","useIntl","model","schema","useDoc","isDraggingSibling","setIsDraggingSibling","React","useState","lastAction","setLastAction","scrollableContainerRef","useRef","values","useForm","state","layout","addFieldRow","removeFieldRow","moveFieldRow","metadata","allMetadata","useGetContentTypeConfigurationQuery","selectFromResult","data","contentType","metadatas","nonDisplayedFields","useMemo","displayedFieldNames","map","field","name","Object","entries","attributes","reduce","acc","attribute","includes","checkIfAttributeIsDisplayable","list","push","label","sortable","handleAddField","handleRemoveField","index","handleMoveField","dragIndex","hoverIndex","useEffect","current","scrollLeft","scrollWidth","_jsxs","Flex","alignItems","direction","gap","_jsx","Typography","variant","tag","id","getTranslation","defaultMessage","padding","borderColor","borderStyle","borderWidth","hasRadius","Box","flex","overflow","ref","DraggableCard","onMoveField","onRemoveField","Menu","Root","Trigger","paddingLeft","paddingRight","justifyContent","endIcon","disabled","length","VisuallyHidden","Plus","aria-hidden","focusable","style","position","top","Content","Item","onSelect"],"mappings":"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"}
+{"version":3,"file":"SortDisplayedFields.js","sources":["../../../../../admin/src/pages/ListConfiguration/components/SortDisplayedFields.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, VisuallyHidden, Typography, Menu } from '@strapi/design-system';\nimport { Plus } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { useDoc } from '../../../hooks/useDocument';\nimport { checkIfAttributeIsDisplayable } from '../../../utils/attributes';\nimport { getTranslation } from '../../../utils/translations';\n\nimport { DraggableCard, DraggableCardProps } from './DraggableCard';\n\nimport type { ListLayout } from '../../../hooks/useDocumentLayout';\nimport type { FormData } from '../ListConfigurationPage';\n\ninterface SortDisplayedFieldsProps extends Pick<ListLayout, 'metadatas'> {}\n\nconst SortDisplayedFields = ({ metadatas }: SortDisplayedFieldsProps) => {\n  const { formatMessage } = useIntl();\n  const { schema } = useDoc();\n  const [isDraggingSibling, setIsDraggingSibling] = React.useState(false);\n  const [lastAction, setLastAction] = React.useState<string | null>(null);\n  const scrollableContainerRef = React.useRef<HTMLDivElement>(null);\n\n  const values = useForm<FormData['layout']>(\n    'SortDisplayedFields',\n    (state) => state.values.layout ?? []\n  );\n  const addFieldRow = useForm('SortDisplayedFields', (state) => state.addFieldRow);\n  const removeFieldRow = useForm('SortDisplayedFields', (state) => state.removeFieldRow);\n  const moveFieldRow = useForm('SortDisplayedFields', (state) => state.moveFieldRow);\n\n  /**\n   * This is our list of fields that are not displayed in the current layout\n   * so we create their default state to be added to the layout.\n   */\n  const nonDisplayedFields = React.useMemo(() => {\n    if (!schema) {\n      return [];\n    }\n\n    const displayedFieldNames = values.map((field) => field.name);\n\n    return Object.entries(schema.attributes).reduce<Array<FormData['layout'][number]>>(\n      (acc, [name, attribute]) => {\n        if (!displayedFieldNames.includes(name) && checkIfAttributeIsDisplayable(attribute)) {\n          const metadata = metadatas[name] || { label: name };\n\n          acc.push({\n            name,\n            label: metadata.label || name,\n            sortable: metadata.sortable,\n          });\n        }\n\n        return acc;\n      },\n      []\n    );\n  }, [metadatas, values, schema]);\n\n  const handleAddField = (field: FormData['layout'][number]) => {\n    setLastAction('add');\n    addFieldRow('layout', field);\n  };\n\n  const handleRemoveField = (index: number) => {\n    setLastAction('remove');\n    removeFieldRow('layout', index);\n  };\n\n  const handleMoveField: DraggableCardProps['onMoveField'] = (dragIndex, hoverIndex) => {\n    moveFieldRow('layout', dragIndex, hoverIndex);\n  };\n\n  React.useEffect(() => {\n    if (lastAction === 'add' && scrollableContainerRef?.current) {\n      scrollableContainerRef.current.scrollLeft = scrollableContainerRef.current.scrollWidth;\n    }\n  }, [lastAction]);\n\n  return (\n    <Flex alignItems=\"stretch\" direction=\"column\" gap={4}>\n      <Typography variant=\"delta\" tag=\"h2\">\n        {formatMessage({\n          id: getTranslation('containers.SettingPage.view'),\n          defaultMessage: 'View',\n        })}\n      </Typography>\n\n      <Flex padding={4} borderColor=\"neutral300\" borderStyle=\"dashed\" borderWidth=\"1px\" hasRadius>\n        <Box flex=\"1\" overflow=\"auto hidden\" ref={scrollableContainerRef}>\n          <Flex gap={3}>\n            {values.map((field, index) => (\n              <DraggableCard\n                key={field.name}\n                index={index}\n                isDraggingSibling={isDraggingSibling}\n                onMoveField={handleMoveField}\n                onRemoveField={() => handleRemoveField(index)}\n                setIsDraggingSibling={setIsDraggingSibling}\n                {...field}\n                attribute={schema!.attributes[field.name]}\n                label={typeof field.label === 'object' ? formatMessage(field.label) : field.label}\n              />\n            ))}\n          </Flex>\n        </Box>\n\n        <Menu.Root>\n          <Menu.Trigger\n            paddingLeft={2}\n            paddingRight={2}\n            justifyContent=\"center\"\n            endIcon={null}\n            disabled={nonDisplayedFields.length === 0}\n            variant=\"tertiary\"\n          >\n            <VisuallyHidden tag=\"span\">\n              {formatMessage({\n                id: getTranslation('components.FieldSelect.label'),\n                defaultMessage: 'Add a field',\n              })}\n            </VisuallyHidden>\n            <Plus aria-hidden focusable={false} style={{ position: 'relative', top: 2 }} />\n          </Menu.Trigger>\n          <Menu.Content>\n            {nonDisplayedFields.map((field) => (\n              <Menu.Item key={field.name} onSelect={() => handleAddField(field)}>\n                {typeof field.label === 'object' ? formatMessage(field.label) : field.label}\n              </Menu.Item>\n            ))}\n          </Menu.Content>\n        </Menu.Root>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { SortDisplayedFields };\nexport type { SortDisplayedFieldsProps };\n"],"names":["SortDisplayedFields","metadatas","formatMessage","useIntl","schema","useDoc","isDraggingSibling","setIsDraggingSibling","React","useState","lastAction","setLastAction","scrollableContainerRef","useRef","values","useForm","state","layout","addFieldRow","removeFieldRow","moveFieldRow","nonDisplayedFields","useMemo","displayedFieldNames","map","field","name","Object","entries","attributes","reduce","acc","attribute","includes","checkIfAttributeIsDisplayable","metadata","label","push","sortable","handleAddField","handleRemoveField","index","handleMoveField","dragIndex","hoverIndex","useEffect","current","scrollLeft","scrollWidth","_jsxs","Flex","alignItems","direction","gap","_jsx","Typography","variant","tag","id","getTranslation","defaultMessage","padding","borderColor","borderStyle","borderWidth","hasRadius","Box","flex","overflow","ref","DraggableCard","onMoveField","onRemoveField","Menu","Root","Trigger","paddingLeft","paddingRight","justifyContent","endIcon","disabled","length","VisuallyHidden","Plus","aria-hidden","focusable","style","position","top","Content","Item","onSelect"],"mappings":"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"}

package/dist/admin/pages/ListConfiguration/components/SortDisplayedFields.mjs

@@ -5,14 +5,13 @@ import { Flex, Typography, Box, Menu, VisuallyHidden } from '@strapi/design-syst
 import { Plus } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { useDoc } from '../../../hooks/useDocument.mjs';
-import { useGetContentTypeConfigurationQuery } from '../../../services/contentTypes.mjs';
 import { checkIfAttributeIsDisplayable } from '../../../utils/attributes.mjs';
 import { getTranslation } from '../../../utils/translations.mjs';
 import { DraggableCard } from './DraggableCard.mjs';
 
-const SortDisplayedFields = ()=>{
+const SortDisplayedFields = ({ metadatas })=>{
     const { formatMessage } = useIntl();
-    const { model, schema } = useDoc();
+    const { schema } = useDoc();
     const [isDraggingSibling, setIsDraggingSibling] = React.useState(false);
     const [lastAction, setLastAction] = React.useState(null);
     const scrollableContainerRef = React.useRef(null);
@@ -20,11 +19,6 @@ const SortDisplayedFields = ()=>{
     const addFieldRow = useForm('SortDisplayedFields', (state)=>state.addFieldRow);
     const removeFieldRow = useForm('SortDisplayedFields', (state)=>state.removeFieldRow);
     const moveFieldRow = useForm('SortDisplayedFields', (state)=>state.moveFieldRow);
-    const { metadata: allMetadata } = useGetContentTypeConfigurationQuery(model, {
-        selectFromResult: ({ data })=>({
-                metadata: data?.contentType.metadatas ?? {}
-            })
-    });
     /**
    * This is our list of fields that are not displayed in the current layout
    * so we create their default state to be added to the layout.
@@ -35,7 +29,9 @@ const SortDisplayedFields = ()=>{
         const displayedFieldNames = values.map((field)=>field.name);
         return Object.entries(schema.attributes).reduce((acc, [name, attribute])=>{
             if (!displayedFieldNames.includes(name) && checkIfAttributeIsDisplayable(attribute)) {
-                const { list: metadata } = allMetadata[name];
+                const metadata = metadatas[name] || {
+                    label: name
+                };
                 acc.push({
                     name,
                     label: metadata.label || name,
@@ -45,7 +41,7 @@ const SortDisplayedFields = ()=>{
             return acc;
         }, []);
     }, [
-        allMetadata,
+        metadatas,
         values,
         schema
     ]);

package/dist/admin/pages/ListConfiguration/components/SortDisplayedFields.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SortDisplayedFields.mjs","sources":["../../../../../admin/src/pages/ListConfiguration/components/SortDisplayedFields.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, VisuallyHidden, Typography, Menu } from '@strapi/design-system';\nimport { Plus } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { useDoc } from '../../../hooks/useDocument';\nimport { useGetContentTypeConfigurationQuery } from '../../../services/contentTypes';\nimport { checkIfAttributeIsDisplayable } from '../../../utils/attributes';\nimport { getTranslation } from '../../../utils/translations';\n\nimport { DraggableCard, DraggableCardProps } from './DraggableCard';\n\nimport type { ListLayout } from '../../../hooks/useDocumentLayout';\nimport type { FormData } from '../ListConfigurationPage';\n\ninterface SortDisplayedFieldsProps extends Pick<ListLayout, 'layout'> {}\n\nconst SortDisplayedFields = () => {\n  const { formatMessage } = useIntl();\n  const { model, schema } = useDoc();\n  const [isDraggingSibling, setIsDraggingSibling] = React.useState(false);\n  const [lastAction, setLastAction] = React.useState<string | null>(null);\n  const scrollableContainerRef = React.useRef<HTMLDivElement>(null);\n\n  const values = useForm<FormData['layout']>(\n    'SortDisplayedFields',\n    (state) => state.values.layout ?? []\n  );\n  const addFieldRow = useForm('SortDisplayedFields', (state) => state.addFieldRow);\n  const removeFieldRow = useForm('SortDisplayedFields', (state) => state.removeFieldRow);\n  const moveFieldRow = useForm('SortDisplayedFields', (state) => state.moveFieldRow);\n\n  const { metadata: allMetadata } = useGetContentTypeConfigurationQuery(model, {\n    selectFromResult: ({ data }) => ({ metadata: data?.contentType.metadatas ?? {} }),\n  });\n\n  /**\n   * This is our list of fields that are not displayed in the current layout\n   * so we create their default state to be added to the layout.\n   */\n  const nonDisplayedFields = React.useMemo(() => {\n    if (!schema) {\n      return [];\n    }\n\n    const displayedFieldNames = values.map((field) => field.name);\n\n    return Object.entries(schema.attributes).reduce<Array<FormData['layout'][number]>>(\n      (acc, [name, attribute]) => {\n        if (!displayedFieldNames.includes(name) && checkIfAttributeIsDisplayable(attribute)) {\n          const { list: metadata } = allMetadata[name];\n\n          acc.push({\n            name,\n            label: metadata.label || name,\n            sortable: metadata.sortable,\n          });\n        }\n\n        return acc;\n      },\n      []\n    );\n  }, [allMetadata, values, schema]);\n\n  const handleAddField = (field: FormData['layout'][number]) => {\n    setLastAction('add');\n    addFieldRow('layout', field);\n  };\n\n  const handleRemoveField = (index: number) => {\n    setLastAction('remove');\n    removeFieldRow('layout', index);\n  };\n\n  const handleMoveField: DraggableCardProps['onMoveField'] = (dragIndex, hoverIndex) => {\n    moveFieldRow('layout', dragIndex, hoverIndex);\n  };\n\n  React.useEffect(() => {\n    if (lastAction === 'add' && scrollableContainerRef?.current) {\n      scrollableContainerRef.current.scrollLeft = scrollableContainerRef.current.scrollWidth;\n    }\n  }, [lastAction]);\n\n  return (\n    <Flex alignItems=\"stretch\" direction=\"column\" gap={4}>\n      <Typography variant=\"delta\" tag=\"h2\">\n        {formatMessage({\n          id: getTranslation('containers.SettingPage.view'),\n          defaultMessage: 'View',\n        })}\n      </Typography>\n\n      <Flex padding={4} borderColor=\"neutral300\" borderStyle=\"dashed\" borderWidth=\"1px\" hasRadius>\n        <Box flex=\"1\" overflow=\"auto hidden\" ref={scrollableContainerRef}>\n          <Flex gap={3}>\n            {values.map((field, index) => (\n              <DraggableCard\n                key={field.name}\n                index={index}\n                isDraggingSibling={isDraggingSibling}\n                onMoveField={handleMoveField}\n                onRemoveField={() => handleRemoveField(index)}\n                setIsDraggingSibling={setIsDraggingSibling}\n                {...field}\n                attribute={schema!.attributes[field.name]}\n                label={typeof field.label === 'object' ? formatMessage(field.label) : field.label}\n              />\n            ))}\n          </Flex>\n        </Box>\n\n        <Menu.Root>\n          <Menu.Trigger\n            paddingLeft={2}\n            paddingRight={2}\n            justifyContent=\"center\"\n            endIcon={null}\n            disabled={nonDisplayedFields.length === 0}\n            variant=\"tertiary\"\n          >\n            <VisuallyHidden tag=\"span\">\n              {formatMessage({\n                id: getTranslation('components.FieldSelect.label'),\n                defaultMessage: 'Add a field',\n              })}\n            </VisuallyHidden>\n            <Plus aria-hidden focusable={false} style={{ position: 'relative', top: 2 }} />\n          </Menu.Trigger>\n          <Menu.Content>\n            {nonDisplayedFields.map((field) => (\n              <Menu.Item key={field.name} onSelect={() => handleAddField(field)}>\n                {typeof field.label === 'object' ? formatMessage(field.label) : field.label}\n              </Menu.Item>\n            ))}\n          </Menu.Content>\n        </Menu.Root>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { SortDisplayedFields };\nexport type { SortDisplayedFieldsProps };\n"],"names":["SortDisplayedFields","formatMessage","useIntl","model","schema","useDoc","isDraggingSibling","setIsDraggingSibling","React","useState","lastAction","setLastAction","scrollableContainerRef","useRef","values","useForm","state","layout","addFieldRow","removeFieldRow","moveFieldRow","metadata","allMetadata","useGetContentTypeConfigurationQuery","selectFromResult","data","contentType","metadatas","nonDisplayedFields","useMemo","displayedFieldNames","map","field","name","Object","entries","attributes","reduce","acc","attribute","includes","checkIfAttributeIsDisplayable","list","push","label","sortable","handleAddField","handleRemoveField","index","handleMoveField","dragIndex","hoverIndex","useEffect","current","scrollLeft","scrollWidth","_jsxs","Flex","alignItems","direction","gap","_jsx","Typography","variant","tag","id","getTranslation","defaultMessage","padding","borderColor","borderStyle","borderWidth","hasRadius","Box","flex","overflow","ref","DraggableCard","onMoveField","onRemoveField","Menu","Root","Trigger","paddingLeft","paddingRight","justifyContent","endIcon","disabled","length","VisuallyHidden","Plus","aria-hidden","focusable","style","position","top","Content","Item","onSelect"],"mappings":"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"}
+{"version":3,"file":"SortDisplayedFields.mjs","sources":["../../../../../admin/src/pages/ListConfiguration/components/SortDisplayedFields.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, VisuallyHidden, Typography, Menu } from '@strapi/design-system';\nimport { Plus } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { useDoc } from '../../../hooks/useDocument';\nimport { checkIfAttributeIsDisplayable } from '../../../utils/attributes';\nimport { getTranslation } from '../../../utils/translations';\n\nimport { DraggableCard, DraggableCardProps } from './DraggableCard';\n\nimport type { ListLayout } from '../../../hooks/useDocumentLayout';\nimport type { FormData } from '../ListConfigurationPage';\n\ninterface SortDisplayedFieldsProps extends Pick<ListLayout, 'metadatas'> {}\n\nconst SortDisplayedFields = ({ metadatas }: SortDisplayedFieldsProps) => {\n  const { formatMessage } = useIntl();\n  const { schema } = useDoc();\n  const [isDraggingSibling, setIsDraggingSibling] = React.useState(false);\n  const [lastAction, setLastAction] = React.useState<string | null>(null);\n  const scrollableContainerRef = React.useRef<HTMLDivElement>(null);\n\n  const values = useForm<FormData['layout']>(\n    'SortDisplayedFields',\n    (state) => state.values.layout ?? []\n  );\n  const addFieldRow = useForm('SortDisplayedFields', (state) => state.addFieldRow);\n  const removeFieldRow = useForm('SortDisplayedFields', (state) => state.removeFieldRow);\n  const moveFieldRow = useForm('SortDisplayedFields', (state) => state.moveFieldRow);\n\n  /**\n   * This is our list of fields that are not displayed in the current layout\n   * so we create their default state to be added to the layout.\n   */\n  const nonDisplayedFields = React.useMemo(() => {\n    if (!schema) {\n      return [];\n    }\n\n    const displayedFieldNames = values.map((field) => field.name);\n\n    return Object.entries(schema.attributes).reduce<Array<FormData['layout'][number]>>(\n      (acc, [name, attribute]) => {\n        if (!displayedFieldNames.includes(name) && checkIfAttributeIsDisplayable(attribute)) {\n          const metadata = metadatas[name] || { label: name };\n\n          acc.push({\n            name,\n            label: metadata.label || name,\n            sortable: metadata.sortable,\n          });\n        }\n\n        return acc;\n      },\n      []\n    );\n  }, [metadatas, values, schema]);\n\n  const handleAddField = (field: FormData['layout'][number]) => {\n    setLastAction('add');\n    addFieldRow('layout', field);\n  };\n\n  const handleRemoveField = (index: number) => {\n    setLastAction('remove');\n    removeFieldRow('layout', index);\n  };\n\n  const handleMoveField: DraggableCardProps['onMoveField'] = (dragIndex, hoverIndex) => {\n    moveFieldRow('layout', dragIndex, hoverIndex);\n  };\n\n  React.useEffect(() => {\n    if (lastAction === 'add' && scrollableContainerRef?.current) {\n      scrollableContainerRef.current.scrollLeft = scrollableContainerRef.current.scrollWidth;\n    }\n  }, [lastAction]);\n\n  return (\n    <Flex alignItems=\"stretch\" direction=\"column\" gap={4}>\n      <Typography variant=\"delta\" tag=\"h2\">\n        {formatMessage({\n          id: getTranslation('containers.SettingPage.view'),\n          defaultMessage: 'View',\n        })}\n      </Typography>\n\n      <Flex padding={4} borderColor=\"neutral300\" borderStyle=\"dashed\" borderWidth=\"1px\" hasRadius>\n        <Box flex=\"1\" overflow=\"auto hidden\" ref={scrollableContainerRef}>\n          <Flex gap={3}>\n            {values.map((field, index) => (\n              <DraggableCard\n                key={field.name}\n                index={index}\n                isDraggingSibling={isDraggingSibling}\n                onMoveField={handleMoveField}\n                onRemoveField={() => handleRemoveField(index)}\n                setIsDraggingSibling={setIsDraggingSibling}\n                {...field}\n                attribute={schema!.attributes[field.name]}\n                label={typeof field.label === 'object' ? formatMessage(field.label) : field.label}\n              />\n            ))}\n          </Flex>\n        </Box>\n\n        <Menu.Root>\n          <Menu.Trigger\n            paddingLeft={2}\n            paddingRight={2}\n            justifyContent=\"center\"\n            endIcon={null}\n            disabled={nonDisplayedFields.length === 0}\n            variant=\"tertiary\"\n          >\n            <VisuallyHidden tag=\"span\">\n              {formatMessage({\n                id: getTranslation('components.FieldSelect.label'),\n                defaultMessage: 'Add a field',\n              })}\n            </VisuallyHidden>\n            <Plus aria-hidden focusable={false} style={{ position: 'relative', top: 2 }} />\n          </Menu.Trigger>\n          <Menu.Content>\n            {nonDisplayedFields.map((field) => (\n              <Menu.Item key={field.name} onSelect={() => handleAddField(field)}>\n                {typeof field.label === 'object' ? formatMessage(field.label) : field.label}\n              </Menu.Item>\n            ))}\n          </Menu.Content>\n        </Menu.Root>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport { SortDisplayedFields };\nexport type { SortDisplayedFieldsProps };\n"],"names":["SortDisplayedFields","metadatas","formatMessage","useIntl","schema","useDoc","isDraggingSibling","setIsDraggingSibling","React","useState","lastAction","setLastAction","scrollableContainerRef","useRef","values","useForm","state","layout","addFieldRow","removeFieldRow","moveFieldRow","nonDisplayedFields","useMemo","displayedFieldNames","map","field","name","Object","entries","attributes","reduce","acc","attribute","includes","checkIfAttributeIsDisplayable","metadata","label","push","sortable","handleAddField","handleRemoveField","index","handleMoveField","dragIndex","hoverIndex","useEffect","current","scrollLeft","scrollWidth","_jsxs","Flex","alignItems","direction","gap","_jsx","Typography","variant","tag","id","getTranslation","defaultMessage","padding","borderColor","borderStyle","borderWidth","hasRadius","Box","flex","overflow","ref","DraggableCard","onMoveField","onRemoveField","Menu","Root","Trigger","paddingLeft","paddingRight","justifyContent","endIcon","disabled","length","VisuallyHidden","Plus","aria-hidden","focusable","style","position","top","Content","Item","onSelect"],"mappings":"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"}

package/dist/admin/pages/ListView/ListViewPage.js

@@ -29,7 +29,8 @@ var TableActions = require('./components/TableActions.js');
 var CellContent = require('./components/TableCells/CellContent.js');
 var ViewSettingsMenu = require('./components/ViewSettingsMenu.js');
 
-function _interopNamespaceDefault(e) {
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -46,7 +47,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 const { INJECT_COLUMN_IN_TABLE } = hooks.HOOKS;
 /* -------------------------------------------------------------------------------------------------