@strapi/content-manager 5.42.1 → 5.43.0

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicComponent.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, useIsDesktop } from '@strapi/admin/strapi-admin';\nimport {\n  Accordion,\n  Box,\n  Flex,\n  Grid,\n  IconButton,\n  useComposedRefs,\n  Menu,\n  BoxComponent,\n} from '@strapi/design-system';\nimport { Drag, More, Trash, ArrowUp, ArrowDown } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { COMPONENT_ICONS } from '../../../../../components/ComponentIcon';\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { type EditFieldLayout, useDocumentLayout } from '../../../../../hooks/useDocumentLayout';\nimport { type UseDragAndDropOptions, useDragAndDrop } from '../../../../../hooks/useDragAndDrop';\nimport { getIn } from '../../../../../utils/objects';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { InputRenderer, type InputRendererProps } from '../../InputRenderer';\n\nimport type { ComponentPickerProps } from './ComponentPicker';\n\ninterface DynamicComponentProps\n  extends Pick<UseDragAndDropOptions, 'onGrabItem' | 'onDropItem' | 'onCancel'>,\n    Pick<ComponentPickerProps, 'dynamicComponentsByCategory'> {\n  componentUid: string;\n  disabled?: boolean;\n  index: number;\n  name: string;\n  onAddComponent: (componentUid: string, index: number) => void;\n  onRemoveComponentClick: (index: number) => void;\n  onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\n  totalLength: number;\n  children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicComponent = ({\n  componentUid,\n  disabled,\n  index,\n  name,\n  onRemoveComponentClick,\n  onMoveComponent,\n  onGrabItem,\n  onDropItem,\n  onCancel,\n  dynamicComponentsByCategory = {},\n  onAddComponent,\n  totalLength,\n  children,\n}: DynamicComponentProps) => {\n  const { formatMessage } = useIntl();\n  const { currentDocumentMeta } = useDocumentContext('DynamicComponent');\n  const isDesktop = useIsDesktop();\n\n  const {\n    edit: { components },\n  } = useDocumentLayout(currentDocumentMeta.model);\n\n  const { mainField = 'id' } = components[componentUid]?.settings ?? {};\n\n  const mainFieldValue = useForm('DynamicComponent', (state) =>\n    getIn(state.values, `${name}.${index}.${mainField}`)\n  );\n\n  const displayedValue = mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();\n  const displayTitle = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\n\n  const [category] = componentUid.split('.');\n  const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\n    (component) => component.uid === componentUid\n  ) ?? { icon: null, displayName: null };\n\n  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop(!disabled, {\n      type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\n      index,\n      item: {\n        index,\n        displayedValue: `${displayName} ${displayTitle}`,\n        icon,\n      },\n      onMoveItem: onMoveComponent,\n      onDropItem,\n      onGrabItem,\n      onCancel,\n    });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef, index]);\n\n  /**\n   * We don't need the accordion's to communicate with each other,\n   * so a unique value for their state is enough.\n   */\n  const accordionValue = React.useId();\n\n  const componentPath = `${name}.${index}`;\n  const hasValue = useForm(\n    'DynamicComponent',\n    (state) => getIn(state.values, componentPath) != null\n  );\n  const isNewItem = useForm(\n    'DynamicComponent',\n    (state) => getIn(state.values, componentPath)?.id == null\n  );\n  const rawError = useForm('DynamicComponent', (state) => getIn(state.errors, componentPath));\n\n  const [collapseToOpen, setCollapseToOpen] = React.useState<string>(\n    isNewItem ? accordionValue : ''\n  );\n\n  React.useEffect(() => {\n    if (rawError && hasValue) {\n      setCollapseToOpen(accordionValue);\n    }\n  }, [rawError, hasValue, accordionValue]);\n\n  const composedBoxRefs = useComposedRefs(boxRef, dropRef);\n\n  const canMoveUp = index > 0;\n  const canMoveDown = index < totalLength - 1;\n  const handleRemoveCurrentComponent = React.useCallback(() => {\n    onRemoveComponentClick(index);\n  }, [onRemoveComponentClick, index]);\n\n  const accordionActions = disabled ? null : (\n    <>\n      <IconButton\n        variant=\"ghost\"\n        label={formatMessage(\n          {\n            id: getTranslation('components.DynamicZone.delete-label'),\n            defaultMessage: 'Delete {name}',\n          },\n          { name: displayTitle }\n        )}\n        onClick={handleRemoveCurrentComponent}\n      >\n        <Trash />\n      </IconButton>\n      {isDesktop && (\n        <IconButton\n          variant=\"ghost\"\n          onClick={(e) => e.stopPropagation()}\n          data-handler-id={handlerId}\n          ref={dragRef}\n          label={formatMessage({\n            id: getTranslation('components.DragHandle-label'),\n            defaultMessage: 'Drag',\n          })}\n          onKeyDown={handleKeyDown}\n        >\n          <Drag />\n        </IconButton>\n      )}\n      {!isDesktop && (\n        <>\n          {canMoveUp && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onMoveComponent(index - 1, index);\n              }}\n              disabled={!canMoveUp}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-up'),\n                defaultMessage: 'Move up',\n              })}\n            >\n              <ArrowUp />\n            </IconButton>\n          )}\n          {canMoveDown && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onMoveComponent(index + 1, index);\n              }}\n              disabled={!canMoveDown}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-down'),\n                defaultMessage: 'Move down',\n              })}\n            >\n              <ArrowDown />\n            </IconButton>\n          )}\n        </>\n      )}\n      <Menu.Root>\n        <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\n          <IconButton\n            variant=\"ghost\"\n            label={formatMessage({\n              id: getTranslation('components.DynamicZone.more-actions'),\n              defaultMessage: 'More actions',\n            })}\n            tag=\"span\"\n          >\n            <More aria-hidden focusable={false} />\n          </IconButton>\n        </Menu.Trigger>\n        <Menu.Content>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-above'),\n                defaultMessage: 'Add component above',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-below'),\n                defaultMessage: 'Add component below',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index + 1)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n        </Menu.Content>\n      </Menu.Root>\n    </>\n  );\n\n  const accordionTitle = displayTitle ? `${displayName} ${displayTitle}` : displayName;\n\n  return (\n    <ComponentContainer tag=\"li\" width=\"100%\">\n      <Flex justifyContent=\"center\">\n        <Rectangle background=\"neutral200\" />\n      </Flex>\n      <StyledBox ref={composedBoxRefs} hasRadius>\n        {isDragging ? (\n          <Preview />\n        ) : (\n          <Accordion.Root value={collapseToOpen} onValueChange={setCollapseToOpen}>\n            <Accordion.Item value={accordionValue}>\n              <Accordion.Header>\n                <Accordion.Trigger\n                  icon={\n                    icon && COMPONENT_ICONS[icon]\n                      ? COMPONENT_ICONS[icon]\n                      : COMPONENT_ICONS.dashboard\n                  }\n                >\n                  {accordionTitle}\n                </Accordion.Trigger>\n                <Accordion.Actions>{accordionActions}</Accordion.Actions>\n              </Accordion.Header>\n              <Accordion.Content>\n                <AccordionContentRadius background=\"neutral0\">\n                  <DynamicComponentFields\n                    componentUid={componentUid}\n                    index={index}\n                    layout={components[componentUid]?.layout}\n                    name={name}\n                  >\n                    {children}\n                  </DynamicComponentFields>\n                </AccordionContentRadius>\n              </Accordion.Content>\n            </Accordion.Item>\n          </Accordion.Root>\n        )}\n      </StyledBox>\n    </ComponentContainer>\n  );\n};\n\n// TODO: Delete once https://github.com/strapi/design-system/pull/858\n// is merged and released.\nconst StyledBox = styled<BoxComponent>(Box)`\n  > div:first-child {\n    box-shadow: ${({ theme }) => theme.shadows.tableShadow};\n  }\n`;\n\nconst AccordionContentRadius = styled<BoxComponent>(Box)`\n  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};\n`;\n\nconst Rectangle = styled<BoxComponent>(Box)`\n  width: ${({ theme }) => theme.spaces[2]};\n  height: ${({ theme }) => theme.spaces[4]};\n`;\n\nconst Preview = styled.span`\n  display: block;\n  background-color: ${({ theme }) => theme.colors.primary100};\n  outline: 1px dashed ${({ theme }) => theme.colors.primary500};\n  outline-offset: -1px;\n  padding: ${({ theme }) => theme.spaces[6]};\n`;\n\nconst ComponentContainer = styled<BoxComponent<'li'>>(Box)`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n`;\n\ninterface DynamicComponentFieldsProps extends Pick<DynamicComponentProps, 'children'> {\n  componentUid: string;\n  index: number;\n  layout?: EditFieldLayout[][];\n  name: string;\n}\n\nconst DynamicComponentFields = React.memo(\n  ({ children, componentUid, index, layout, name }: DynamicComponentFieldsProps) => {\n    const { formatMessage } = useIntl();\n\n    return (\n      <Box padding={{ initial: 4, medium: 6 }}>\n        <Grid.Root gap={4}>\n          {layout?.map((row, rowInd) => {\n            return (\n              <Grid.Item col={12} key={rowInd} xs={12} direction=\"column\" alignItems=\"stretch\">\n                <ResponsiveGridRoot gap={4}>\n                  {row.map(({ size, ...field }) => {\n                    const fieldName = `${name}.${index}.${field.name}`;\n\n                    const fieldWithTranslatedLabel = {\n                      ...field,\n                      label: formatMessage({\n                        id: `content-manager.components.${componentUid}.${field.name}`,\n                        defaultMessage: field.label,\n                      }),\n                    };\n\n                    return (\n                      <ResponsiveGridItem\n                        col={size}\n                        key={fieldName}\n                        s={12}\n                        xs={12}\n                        direction=\"column\"\n                        alignItems=\"stretch\"\n                      >\n                        {children ? (\n                          children({\n                            ...fieldWithTranslatedLabel,\n                            name: fieldName,\n                          })\n                        ) : (\n                          <InputRenderer {...fieldWithTranslatedLabel} name={fieldName} />\n                        )}\n                      </ResponsiveGridItem>\n                    );\n                  })}\n                </ResponsiveGridRoot>\n              </Grid.Item>\n            );\n          })}\n        </Grid.Root>\n      </Box>\n    );\n  }\n);\n\nDynamicComponentFields.displayName = 'DynamicComponentFields';\n\nconst MemoizedDynamicComponent = React.memo(DynamicComponent);\n\nexport { MemoizedDynamicComponent as DynamicComponent };\nexport type { DynamicComponentProps };\n"],"names":["DynamicComponent","componentUid","disabled","index","name","onRemoveComponentClick","onMoveComponent","onGrabItem","onDropItem","onCancel","dynamicComponentsByCategory","onAddComponent","totalLength","children","formatMessage","useIntl","currentDocumentMeta","useDocumentContext","isDesktop","useIsDesktop","edit","components","useDocumentLayout","model","mainField","settings","mainFieldValue","useForm","state","getIn","values","displayedValue","String","trim","displayTitle","length","category","split","icon","displayName","find","component","uid","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","React","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","componentPath","hasValue","isNewItem","id","rawError","errors","collapseToOpen","setCollapseToOpen","useState","composedBoxRefs","useComposedRefs","canMoveUp","canMoveDown","handleRemoveCurrentComponent","useCallback","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","getTranslation","defaultMessage","onClick","Trash","e","stopPropagation","data-handler-id","ref","onKeyDown","Drag","ArrowUp","ArrowDown","Menu","Root","Trigger","size","endIcon","paddingLeft","paddingRight","tag","More","aria-hidden","focusable","Content","SubRoot","SubTrigger","SubContent","Object","entries","map","Fragment","Label","Item","onSelect","accordionTitle","ComponentContainer","width","Flex","justifyContent","Rectangle","background","StyledBox","hasRadius","Preview","Accordion","value","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","DynamicComponentFields","layout","styled","Box","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500","memo","padding","initial","medium","Grid","gap","row","rowInd","col","xs","direction","alignItems","ResponsiveGridRoot","field","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","s","InputRenderer","MemoizedDynamicComponent"],"mappings":";;;;;;;;;;;;;;;;;;AA4CA,MAAMA,gBAAAA,GAAmB,CAAC,EACxBC,YAAY,EACZC,QAAQ,EACRC,KAAK,EACLC,IAAI,EACJC,sBAAsB,EACtBC,eAAe,EACfC,UAAU,EACVC,UAAU,EACVC,QAAQ,EACRC,2BAAAA,GAA8B,EAAE,EAChCC,cAAc,EACdC,WAAW,EACXC,QAAQ,EACc,GAAA;IACtB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,mBAAmB,EAAE,GAAGC,kBAAAA,CAAmB,kBAAA,CAAA;AACnD,IAAA,MAAMC,SAAAA,GAAYC,YAAAA,EAAAA;IAElB,MAAM,EACJC,MAAM,EAAEC,UAAU,EAAE,EACrB,GAAGC,iBAAAA,CAAkBN,mBAAAA,CAAoBO,KAAK,CAAA;IAE/C,MAAM,EAAEC,SAAAA,GAAY,IAAI,EAAE,GAAGH,UAAU,CAACpB,YAAAA,CAAa,EAAEwB,QAAAA,IAAY,EAAC;AAEpE,IAAA,MAAMC,iBAAiBC,OAAAA,CAAQ,kBAAA,EAAoB,CAACC,KAAAA,GAClDC,MAAMD,KAAAA,CAAME,MAAM,EAAE,CAAA,EAAG1B,KAAK,CAAC,EAAED,KAAAA,CAAM,CAAC,EAAEqB,SAAAA,CAAAA,CAAW,CAAA,CAAA;IAGrD,MAAMO,cAAAA,GAAiBP,cAAc,IAAA,IAAQ,CAACE,iBAAiB,EAAA,GAAKM,MAAAA,CAAON,gBAAgBO,IAAI,EAAA;IAC/F,MAAMC,YAAAA,GAAeH,eAAeI,MAAM,GAAG,IAAI,CAAC,EAAE,EAAEJ,cAAAA,CAAAA,CAAgB,GAAGA,cAAAA;AAEzE,IAAA,MAAM,CAACK,QAAAA,CAAS,GAAGnC,YAAAA,CAAaoC,KAAK,CAAC,GAAA,CAAA;IACtC,MAAM,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAI7B,CAAAA,2BAA2B,CAAC0B,QAAAA,CAAS,IAAI,EAAC,EAAGI,IAAI,CAC9E,CAACC,SAAAA,GAAcA,SAAAA,CAAUC,GAAG,KAAKzC,YAAAA,CAAAA,IAC9B;QAAEqC,IAAAA,EAAM,IAAA;QAAMC,WAAAA,EAAa;AAAK,KAAA;AAErC,IAAA,MAAM,CAAC,EAAEI,SAAS,EAAEC,UAAU,EAAEC,aAAa,EAAE,EAAEC,MAAAA,EAAQC,SAASC,OAAAA,EAASC,cAAAA,CAAe,GACxFC,cAAAA,CAAe,CAAChD,QAAAA,EAAU;AACxBiD,QAAAA,IAAAA,EAAM,GAAGC,SAAAA,CAAUC,YAAY,CAAC,CAAC,EAAEjD,IAAAA,CAAAA,CAAM;AACzCD,QAAAA,KAAAA;QACAmD,IAAAA,EAAM;AACJnD,YAAAA,KAAAA;AACA4B,YAAAA,cAAAA,EAAgB,CAAA,EAAGQ,WAAAA,CAAY,CAAC,EAAEL,YAAAA,CAAAA,CAAc;AAChDI,YAAAA;AACF,SAAA;QACAiB,UAAAA,EAAYjD,eAAAA;AACZE,QAAAA,UAAAA;AACAD,QAAAA,UAAAA;AACAE,QAAAA;AACF,KAAA,CAAA;AAEF+C,IAAAA,KAAAA,CAAMC,SAAS,CAAC,IAAA;AACdR,QAAAA,cAAAA,CAAeS,aAAAA,EAAAA,EAAiB;YAAEC,oBAAAA,EAAsB;AAAM,SAAA,CAAA;IAChE,CAAA,EAAG;AAACV,QAAAA,cAAAA;AAAgB9C,QAAAA;AAAM,KAAA,CAAA;AAE1B;;;MAIA,MAAMyD,cAAAA,GAAiBJ,KAAAA,CAAMK,KAAK,EAAA;AAElC,IAAA,MAAMC,aAAAA,GAAgB,CAAA,EAAG1D,IAAAA,CAAK,CAAC,EAAED,KAAAA,CAAAA,CAAO;IACxC,MAAM4D,QAAAA,GAAWpC,QACf,kBAAA,EACA,CAACC,QAAUC,KAAAA,CAAMD,KAAAA,CAAME,MAAM,EAAEgC,aAAAA,CAAAA,IAAkB,IAAA,CAAA;IAEnD,MAAME,SAAAA,GAAYrC,OAAAA,CAChB,kBAAA,EACA,CAACC,KAAAA,GAAUC,MAAMD,KAAAA,CAAME,MAAM,EAAEgC,aAAAA,CAAAA,EAAgBG,EAAAA,IAAM,IAAA,CAAA;IAEvD,MAAMC,QAAAA,GAAWvC,QAAQ,kBAAA,EAAoB,CAACC,QAAUC,KAAAA,CAAMD,KAAAA,CAAMuC,MAAM,EAAEL,aAAAA,CAAAA,CAAAA;IAE5E,MAAM,CAACM,gBAAgBC,iBAAAA,CAAkB,GAAGb,MAAMc,QAAQ,CACxDN,YAAYJ,cAAAA,GAAiB,EAAA,CAAA;AAG/BJ,IAAAA,KAAAA,CAAMC,SAAS,CAAC,IAAA;AACd,QAAA,IAAIS,YAAYH,QAAAA,EAAU;YACxBM,iBAAAA,CAAkBT,cAAAA,CAAAA;AACpB,QAAA;IACF,CAAA,EAAG;AAACM,QAAAA,QAAAA;AAAUH,QAAAA,QAAAA;AAAUH,QAAAA;AAAe,KAAA,CAAA;IAEvC,MAAMW,eAAAA,GAAkBC,gBAAgB1B,MAAAA,EAAQC,OAAAA,CAAAA;AAEhD,IAAA,MAAM0B,YAAYtE,KAAAA,GAAQ,CAAA;IAC1B,MAAMuE,WAAAA,GAAcvE,QAAQS,WAAAA,GAAc,CAAA;IAC1C,MAAM+D,4BAAAA,GAA+BnB,KAAAA,CAAMoB,WAAW,CAAC,IAAA;QACrDvE,sBAAAA,CAAuBF,KAAAA,CAAAA;IACzB,CAAA,EAAG;AAACE,QAAAA,sBAAAA;AAAwBF,QAAAA;AAAM,KAAA,CAAA;IAElC,MAAM0E,gBAAAA,GAAmB3E,WAAW,IAAA,iBAClC4E,IAAA,CAAAC,QAAA,EAAA;;0BACEC,GAAA,CAACC,UAAAA,EAAAA;gBACCC,OAAAA,EAAQ,OAAA;AACRC,gBAAAA,KAAAA,EAAOrE,aAAAA,CACL;AACEmD,oBAAAA,EAAAA,EAAImB,cAAAA,CAAe,qCAAA,CAAA;oBACnBC,cAAAA,EAAgB;iBAClB,EACA;oBAAEjF,IAAAA,EAAM8B;AAAa,iBAAA,CAAA;gBAEvBoD,OAAAA,EAASX,4BAAAA;AAET,gBAAA,QAAA,gBAAAK,GAAA,CAACO,KAAAA,EAAAA,EAAAA;;AAEFrE,YAAAA,SAAAA,kBACC8D,GAAA,CAACC,UAAAA,EAAAA;gBACCC,OAAAA,EAAQ,OAAA;gBACRI,OAAAA,EAAS,CAACE,CAAAA,GAAMA,CAAAA,CAAEC,eAAe,EAAA;gBACjCC,iBAAAA,EAAiB/C,SAAAA;gBACjBgD,GAAAA,EAAK3C,OAAAA;AACLmC,gBAAAA,KAAAA,EAAOrE,aAAAA,CAAc;AACnBmD,oBAAAA,EAAAA,EAAImB,cAAAA,CAAe,6BAAA,CAAA;oBACnBC,cAAAA,EAAgB;AAClB,iBAAA,CAAA;gBACAO,SAAAA,EAAW/C,aAAAA;AAEX,gBAAA,QAAA,gBAAAmC,GAAA,CAACa,IAAAA,EAAAA,EAAAA;;AAGJ,YAAA,CAAC3E,SAAAA,kBACA4D,IAAA,CAAAC,QAAA,EAAA;;AACGN,oBAAAA,SAAAA,kBACCO,GAAA,CAACC,UAAAA,EAAAA;wBACCC,OAAAA,EAAQ,OAAA;AACRI,wBAAAA,OAAAA,EAAS,CAACE,CAAAA,GAAAA;AACRA,4BAAAA,CAAAA,CAAEC,eAAe,EAAA;AACjBnF,4BAAAA,eAAAA,CAAgBH,QAAQ,CAAA,EAAGA,KAAAA,CAAAA;AAC7B,wBAAA,CAAA;AACAD,wBAAAA,QAAAA,EAAU,CAACuE,SAAAA;AACXU,wBAAAA,KAAAA,EAAOrE,aAAAA,CAAc;AACnBmD,4BAAAA,EAAAA,EAAImB,cAAAA,CAAe,gCAAA,CAAA;4BACnBC,cAAAA,EAAgB;AAClB,yBAAA,CAAA;AAEA,wBAAA,QAAA,gBAAAL,GAAA,CAACc,OAAAA,EAAAA,EAAAA;;AAGJpB,oBAAAA,WAAAA,kBACCM,GAAA,CAACC,UAAAA,EAAAA;wBACCC,OAAAA,EAAQ,OAAA;AACRI,wBAAAA,OAAAA,EAAS,CAACE,CAAAA,GAAAA;AACRA,4BAAAA,CAAAA,CAAEC,eAAe,EAAA;AACjBnF,4BAAAA,eAAAA,CAAgBH,QAAQ,CAAA,EAAGA,KAAAA,CAAAA;AAC7B,wBAAA,CAAA;AACAD,wBAAAA,QAAAA,EAAU,CAACwE,WAAAA;AACXS,wBAAAA,KAAAA,EAAOrE,aAAAA,CAAc;AACnBmD,4BAAAA,EAAAA,EAAImB,cAAAA,CAAe,kCAAA,CAAA;4BACnBC,cAAAA,EAAgB;AAClB,yBAAA,CAAA;AAEA,wBAAA,QAAA,gBAAAL,GAAA,CAACe,SAAAA,EAAAA,EAAAA;;;;AAKT,0BAAAjB,IAAA,CAACkB,KAAKC,IAAI,EAAA;;AACR,kCAAAjB,GAAA,CAACgB,KAAKE,OAAO,EAAA;wBAACC,IAAAA,EAAK,GAAA;wBAAIC,OAAAA,EAAS,IAAA;wBAAMC,WAAAA,EAAa,CAAA;wBAAGC,YAAAA,EAAc,CAAA;AAClE,wBAAA,QAAA,gBAAAtB,GAAA,CAACC,UAAAA,EAAAA;4BACCC,OAAAA,EAAQ,OAAA;AACRC,4BAAAA,KAAAA,EAAOrE,aAAAA,CAAc;AACnBmD,gCAAAA,EAAAA,EAAImB,cAAAA,CAAe,qCAAA,CAAA;gCACnBC,cAAAA,EAAgB;AAClB,6BAAA,CAAA;4BACAkB,GAAAA,EAAI,MAAA;AAEJ,4BAAA,QAAA,gBAAAvB,GAAA,CAACwB,IAAAA,EAAAA;gCAAKC,aAAW,EAAA,IAAA;gCAACC,SAAAA,EAAW;;;;AAGjC,kCAAA5B,IAAA,CAACkB,KAAKW,OAAO,EAAA;;AACX,0CAAA7B,IAAA,CAACkB,KAAKY,OAAO,EAAA;;AACX,kDAAA5B,GAAA,CAACgB,KAAKa,UAAU,EAAA;kDACb/F,aAAAA,CAAc;AACbmD,4CAAAA,EAAAA,EAAImB,cAAAA,CAAe,uCAAA,CAAA;4CACnBC,cAAAA,EAAgB;AAClB,yCAAA;;AAEF,kDAAAL,GAAA,CAACgB,KAAKc,UAAU,EAAA;AACbC,wCAAAA,QAAAA,EAAAA,MAAAA,CAAOC,OAAO,CAACtG,2BAAAA,CAAAA,CAA6BuG,GAAG,CAAC,CAAC,CAAC7E,QAAAA,EAAUf,UAAAA,CAAW,iBACtEyD,IAAA,CAACtB,KAAAA,CAAM0D,QAAQ,EAAA;;AACb,kEAAAlC,GAAA,CAACgB,KAAKmB,KAAK,EAAA;AAAE/E,wDAAAA,QAAAA,EAAAA;;oDACZf,UAAAA,CAAW4F,GAAG,CAAC,CAAC,EAAE1E,WAAW,EAAEG,GAAG,EAAE,iBACnCsC,GAAA,CAACgB,IAAAA,CAAKoB,IAAI,EAAA;4DAAWC,QAAAA,EAAU,IAAM1G,eAAe+B,GAAAA,EAAKvC,KAAAA,CAAAA;AACtDoC,4DAAAA,QAAAA,EAAAA;AADaG,yDAAAA,EAAAA,GAAAA,CAAAA;;AAHCN,6CAAAA,EAAAA,QAAAA,CAAAA;;;;AAW3B,0CAAA0C,IAAA,CAACkB,KAAKY,OAAO,EAAA;;AACX,kDAAA5B,GAAA,CAACgB,KAAKa,UAAU,EAAA;kDACb/F,aAAAA,CAAc;AACbmD,4CAAAA,EAAAA,EAAImB,cAAAA,CAAe,uCAAA,CAAA;4CACnBC,cAAAA,EAAgB;AAClB,yCAAA;;AAEF,kDAAAL,GAAA,CAACgB,KAAKc,UAAU,EAAA;AACbC,wCAAAA,QAAAA,EAAAA,MAAAA,CAAOC,OAAO,CAACtG,2BAAAA,CAAAA,CAA6BuG,GAAG,CAAC,CAAC,CAAC7E,QAAAA,EAAUf,UAAAA,CAAW,iBACtEyD,IAAA,CAACtB,KAAAA,CAAM0D,QAAQ,EAAA;;AACb,kEAAAlC,GAAA,CAACgB,KAAKmB,KAAK,EAAA;AAAE/E,wDAAAA,QAAAA,EAAAA;;oDACZf,UAAAA,CAAW4F,GAAG,CAAC,CAAC,EAAE1E,WAAW,EAAEG,GAAG,EAAE,iBACnCsC,GAAA,CAACgB,IAAAA,CAAKoB,IAAI,EAAA;4DAAWC,QAAAA,EAAU,IAAM1G,cAAAA,CAAe+B,GAAAA,EAAKvC,KAAAA,GAAQ,CAAA,CAAA;AAC9DoC,4DAAAA,QAAAA,EAAAA;AADaG,yDAAAA,EAAAA,GAAAA,CAAAA;;AAHCN,6CAAAA,EAAAA,QAAAA,CAAAA;;;;;;;;;;AAgBnC,IAAA,MAAMkF,iBAAiBpF,YAAAA,GAAe,CAAA,EAAGK,YAAY,CAAC,EAAEL,cAAc,GAAGK,WAAAA;AAEzE,IAAA,qBACEuC,IAAA,CAACyC,kBAAAA,EAAAA;QAAmBhB,GAAAA,EAAI,IAAA;QAAKiB,KAAAA,EAAM,MAAA;;0BACjCxC,GAAA,CAACyC,IAAAA,EAAAA;gBAAKC,cAAAA,EAAe,QAAA;AACnB,gBAAA,QAAA,gBAAA1C,GAAA,CAAC2C,SAAAA,EAAAA;oBAAUC,UAAAA,EAAW;;;0BAExB5C,GAAA,CAAC6C,SAAAA,EAAAA;gBAAUlC,GAAAA,EAAKpB,eAAAA;gBAAiBuD,SAAS,EAAA,IAAA;AACvClF,gBAAAA,QAAAA,EAAAA,UAAAA,iBACCoC,GAAA,CAAC+C,OAAAA,EAAAA,EAAAA,CAAAA,iBAED/C,GAAA,CAACgD,SAAAA,CAAU/B,IAAI,EAAA;oBAACgC,KAAAA,EAAO7D,cAAAA;oBAAgB8D,aAAAA,EAAe7D,iBAAAA;4CACpDS,IAAA,CAACkD,UAAUZ,IAAI,EAAA;wBAACa,KAAAA,EAAOrE,cAAAA;;AACrB,0CAAAkB,IAAA,CAACkD,UAAUG,MAAM,EAAA;;AACf,kDAAAnD,GAAA,CAACgD,UAAU9B,OAAO,EAAA;wCAChB5D,IAAAA,EACEA,IAAAA,IAAQ8F,eAAe,CAAC9F,IAAAA,CAAK,GACzB8F,eAAe,CAAC9F,IAAAA,CAAK,GACrB8F,eAAAA,CAAgBC,SAAS;AAG9Bf,wCAAAA,QAAAA,EAAAA;;AAEH,kDAAAtC,GAAA,CAACgD,UAAUM,OAAO,EAAA;AAAEzD,wCAAAA,QAAAA,EAAAA;;;;AAEtB,0CAAAG,GAAA,CAACgD,UAAUrB,OAAO,EAAA;AAChB,gCAAA,QAAA,gBAAA3B,GAAA,CAACuD,sBAAAA,EAAAA;oCAAuBX,UAAAA,EAAW,UAAA;AACjC,oCAAA,QAAA,gBAAA5C,GAAA,CAACwD,sBAAAA,EAAAA;wCACCvI,YAAAA,EAAcA,YAAAA;wCACdE,KAAAA,EAAOA,KAAAA;wCACPsI,MAAAA,EAAQpH,UAAU,CAACpB,YAAAA,CAAa,EAAEwI,MAAAA;wCAClCrI,IAAAA,EAAMA,IAAAA;AAELS,wCAAAA,QAAAA,EAAAA;;;;;;;;;;AAUrB,CAAA;AAEA;AACA;AACA,MAAMgH,SAAAA,GAAYa,MAAAA,CAAqBC,GAAAA,CAAI;;gBAE3B,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,OAAO,CAACC,WAAW,CAAC;;AAE3D,CAAC;AAED,MAAMP,sBAAAA,GAAyBG,MAAAA,CAAqBC,GAAAA,CAAI;qBACnC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAAC,CAAA,CAAE,CAAC,CAAC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAAC,CAAA,CAAE,CAAC;AACxF,CAAC;AAED,MAAMpB,SAAAA,GAAYe,MAAAA,CAAqBC,GAAAA,CAAI;SAClC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAAC,CAAA,CAAE,CAAC;UAChC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAAC,CAAA,CAAE,CAAC;AAC3C,CAAC;AAED,MAAMhB,OAAAA,GAAUW,MAAAA,CAAOM,IAAI;;oBAEP,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMK,MAAM,CAACC,UAAU,CAAC;sBACvC,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAAA,CAAMK,MAAM,CAACE,UAAU,CAAC;;WAEpD,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAAC,CAAA,CAAE,CAAC;AAC5C,CAAC;AAED,MAAMxB,kBAAAA,GAAqBmB,MAAAA,CAA2BC,GAAAA,CAAI;;;;AAI1D,CAAC;AASD,MAAMH,sBAAAA,iBAAyBhF,KAAAA,CAAM4F,IAAI,CACvC,CAAC,EAAEvI,QAAQ,EAAEZ,YAAY,EAAEE,KAAK,EAAEsI,MAAM,EAAErI,IAAI,EAA+B,GAAA;IAC3E,MAAM,EAAEU,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,qBACEiE,GAAA,CAAC2D,GAAAA,EAAAA;QAAIU,OAAAA,EAAS;YAAEC,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;gCACpCvE,GAAA,CAACwE,KAAKvD,IAAI,EAAA;YAACwD,GAAAA,EAAK,CAAA;sBACbhB,MAAAA,EAAQxB,GAAAA,CAAI,CAACyC,GAAAA,EAAKC,MAAAA,GAAAA;gBACjB,qBACE3E,GAAA,CAACwE,KAAKpC,IAAI,EAAA;oBAACwC,GAAAA,EAAK,EAAA;oBAAiBC,EAAAA,EAAI,EAAA;oBAAIC,SAAAA,EAAU,QAAA;oBAASC,UAAAA,EAAW,SAAA;AACrE,oBAAA,QAAA,gBAAA/E,GAAA,CAACgF,kBAAAA,EAAAA;wBAAmBP,GAAAA,EAAK,CAAA;AACtBC,wBAAAA,QAAAA,EAAAA,GAAAA,CAAIzC,GAAG,CAAC,CAAC,EAAEd,IAAI,EAAE,GAAG8D,KAAAA,EAAO,GAAA;4BAC1B,MAAMC,SAAAA,GAAY,CAAA,EAAG9J,IAAAA,CAAK,CAAC,EAAED,MAAM,CAAC,EAAE8J,KAAAA,CAAM7J,IAAI,CAAA,CAAE;AAElD,4BAAA,MAAM+J,wBAAAA,GAA2B;AAC/B,gCAAA,GAAGF,KAAK;AACR9E,gCAAAA,KAAAA,EAAOrE,aAAAA,CAAc;oCACnBmD,EAAAA,EAAI,CAAC,2BAA2B,EAAEhE,YAAAA,CAAa,CAAC,EAAEgK,KAAAA,CAAM7J,IAAI,CAAA,CAAE;AAC9DiF,oCAAAA,cAAAA,EAAgB4E,MAAM9E;AACxB,iCAAA;AACF,6BAAA;AAEA,4BAAA,qBACEH,GAAA,CAACoF,kBAAAA,EAAAA;gCACCR,GAAAA,EAAKzD,IAAAA;gCAELkE,CAAAA,EAAG,EAAA;gCACHR,EAAAA,EAAI,EAAA;gCACJC,SAAAA,EAAU,QAAA;gCACVC,UAAAA,EAAW,SAAA;AAEVlJ,gCAAAA,QAAAA,EAAAA,QAAAA,GACCA,QAAAA,CAAS;AACP,oCAAA,GAAGsJ,wBAAwB;oCAC3B/J,IAAAA,EAAM8J;AACR,iCAAA,CAAA,iBAEAlF,GAAA,CAACsF,qBAAAA,EAAAA;AAAe,oCAAA,GAAGH,wBAAwB;oCAAE/J,IAAAA,EAAM8J;;AAZhDA,6BAAAA,EAAAA,SAAAA,CAAAA;AAgBX,wBAAA,CAAA;;AAhCqBP,iBAAAA,EAAAA,MAAAA,CAAAA;AAoC7B,YAAA,CAAA;;;AAIR,CAAA,CAAA;AAGFnB,sBAAAA,CAAuBjG,WAAW,GAAG,wBAAA;AAErC,MAAMgI,wBAAAA,iBAA2B/G,KAAAA,CAAM4F,IAAI,CAACpJ,gBAAAA;;;;"}
+{"version":3,"file":"DynamicComponent.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, useIsDesktop } from '@strapi/admin/strapi-admin';\nimport {\n  Accordion,\n  Box,\n  Flex,\n  Grid,\n  IconButton,\n  useComposedRefs,\n  Menu,\n  BoxComponent,\n} from '@strapi/design-system';\nimport { Drag, More, Trash, ArrowUp, ArrowDown } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { COMPONENT_ICONS } from '../../../../../components/ComponentIcon';\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { type EditFieldLayout, useDocumentLayout } from '../../../../../hooks/useDocumentLayout';\nimport { type UseDragAndDropOptions, useDragAndDrop } from '../../../../../hooks/useDragAndDrop';\nimport { getIn } from '../../../../../utils/objects';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { InputRenderer, type InputRendererProps } from '../../InputRenderer';\n\nimport type { ComponentPickerProps } from './ComponentPicker';\n\ninterface DynamicComponentProps\n  extends Pick<UseDragAndDropOptions, 'onGrabItem' | 'onDropItem' | 'onCancel'>,\n    Pick<ComponentPickerProps, 'dynamicComponentsByCategory'> {\n  componentUid: string;\n  disabled?: boolean;\n  index: number;\n  name: string;\n  onAddComponent: (componentUid: string, index: number) => void;\n  onRemoveComponentClick: (index: number) => void;\n  onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\n  totalLength: number;\n  children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicComponent = ({\n  componentUid,\n  disabled,\n  index,\n  name,\n  onRemoveComponentClick,\n  onMoveComponent,\n  onGrabItem,\n  onDropItem,\n  onCancel,\n  dynamicComponentsByCategory = {},\n  onAddComponent,\n  totalLength,\n  children,\n}: DynamicComponentProps) => {\n  const { formatMessage } = useIntl();\n  const { currentDocumentMeta } = useDocumentContext('DynamicComponent');\n  const isDesktop = useIsDesktop();\n\n  const {\n    edit: { components },\n  } = useDocumentLayout(currentDocumentMeta.model);\n\n  const { mainField = 'id' } = components[componentUid]?.settings ?? {};\n\n  const mainFieldValue = useForm('DynamicComponent', (state) =>\n    getIn(state.values, `${name}.${index}.${mainField}`)\n  );\n\n  const displayedValue = mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();\n  const displayTitle = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\n\n  const { icon, displayName } = React.useMemo(() => {\n    const [category] = componentUid.split('.');\n    const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\n      (component) => component.uid === componentUid\n    ) ?? { icon: null, displayName: null };\n\n    return {\n      icon,\n      displayName: formatMessage({\n        id: componentUid,\n        defaultMessage: displayName || componentUid,\n      }),\n    };\n  }, [componentUid, dynamicComponentsByCategory, formatMessage]);\n\n  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop(!disabled, {\n      type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\n      index,\n      item: {\n        index,\n        displayedValue: `${displayName} ${displayTitle}`,\n        icon,\n      },\n      onMoveItem: onMoveComponent,\n      onDropItem,\n      onGrabItem,\n      onCancel,\n    });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef, index]);\n\n  /**\n   * We don't need the accordion's to communicate with each other,\n   * so a unique value for their state is enough.\n   */\n  const accordionValue = React.useId();\n\n  const componentPath = `${name}.${index}`;\n  const hasValue = useForm(\n    'DynamicComponent',\n    (state) => getIn(state.values, componentPath) != null\n  );\n  const isNewItem = useForm(\n    'DynamicComponent',\n    (state) => getIn(state.values, componentPath)?.id == null\n  );\n  const rawError = useForm('DynamicComponent', (state) => getIn(state.errors, componentPath));\n\n  const [collapseToOpen, setCollapseToOpen] = React.useState<string>(\n    isNewItem ? accordionValue : ''\n  );\n\n  React.useEffect(() => {\n    if (rawError && hasValue) {\n      setCollapseToOpen(accordionValue);\n    }\n  }, [rawError, hasValue, accordionValue]);\n\n  const composedBoxRefs = useComposedRefs(boxRef, dropRef);\n\n  const canMoveUp = index > 0;\n  const canMoveDown = index < totalLength - 1;\n  const handleRemoveCurrentComponent = React.useCallback(() => {\n    onRemoveComponentClick(index);\n  }, [onRemoveComponentClick, index]);\n\n  const accordionActions = disabled ? null : (\n    <>\n      <IconButton\n        variant=\"ghost\"\n        label={formatMessage(\n          {\n            id: getTranslation('components.DynamicZone.delete-label'),\n            defaultMessage: 'Delete {name}',\n          },\n          { name: displayTitle }\n        )}\n        onClick={handleRemoveCurrentComponent}\n      >\n        <Trash />\n      </IconButton>\n      {isDesktop && (\n        <IconButton\n          variant=\"ghost\"\n          onClick={(e) => e.stopPropagation()}\n          data-handler-id={handlerId}\n          ref={dragRef}\n          label={formatMessage({\n            id: getTranslation('components.DragHandle-label'),\n            defaultMessage: 'Drag',\n          })}\n          onKeyDown={handleKeyDown}\n        >\n          <Drag />\n        </IconButton>\n      )}\n      {!isDesktop && (\n        <>\n          {canMoveUp && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onMoveComponent(index - 1, index);\n              }}\n              disabled={!canMoveUp}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-up'),\n                defaultMessage: 'Move up',\n              })}\n            >\n              <ArrowUp />\n            </IconButton>\n          )}\n          {canMoveDown && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onMoveComponent(index + 1, index);\n              }}\n              disabled={!canMoveDown}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-down'),\n                defaultMessage: 'Move down',\n              })}\n            >\n              <ArrowDown />\n            </IconButton>\n          )}\n        </>\n      )}\n      <Menu.Root>\n        <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\n          <IconButton\n            variant=\"ghost\"\n            label={formatMessage({\n              id: getTranslation('components.DynamicZone.more-actions'),\n              defaultMessage: 'More actions',\n            })}\n            tag=\"span\"\n          >\n            <More aria-hidden focusable={false} />\n          </IconButton>\n        </Menu.Trigger>\n        <Menu.Content>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-above'),\n                defaultMessage: 'Add component above',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>\n                    {formatMessage({ id: category, defaultMessage: category })}\n                  </Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index)}>\n                      {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-below'),\n                defaultMessage: 'Add component below',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>\n                    {formatMessage({ id: category, defaultMessage: category })}\n                  </Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index + 1)}>\n                      {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n        </Menu.Content>\n      </Menu.Root>\n    </>\n  );\n\n  const accordionTitle = displayTitle ? `${displayName} ${displayTitle}` : displayName;\n\n  return (\n    <ComponentContainer tag=\"li\" width=\"100%\">\n      <Flex justifyContent=\"center\">\n        <Rectangle background=\"neutral200\" />\n      </Flex>\n      <StyledBox ref={composedBoxRefs} hasRadius>\n        {isDragging ? (\n          <Preview />\n        ) : (\n          <Accordion.Root value={collapseToOpen} onValueChange={setCollapseToOpen}>\n            <Accordion.Item value={accordionValue}>\n              <Accordion.Header>\n                <Accordion.Trigger\n                  icon={\n                    icon && COMPONENT_ICONS[icon]\n                      ? COMPONENT_ICONS[icon]\n                      : COMPONENT_ICONS.dashboard\n                  }\n                >\n                  {accordionTitle}\n                </Accordion.Trigger>\n                <Accordion.Actions>{accordionActions}</Accordion.Actions>\n              </Accordion.Header>\n              <Accordion.Content>\n                <AccordionContentRadius background=\"neutral0\">\n                  <DynamicComponentFields\n                    componentUid={componentUid}\n                    index={index}\n                    layout={components[componentUid]?.layout}\n                    name={name}\n                  >\n                    {children}\n                  </DynamicComponentFields>\n                </AccordionContentRadius>\n              </Accordion.Content>\n            </Accordion.Item>\n          </Accordion.Root>\n        )}\n      </StyledBox>\n    </ComponentContainer>\n  );\n};\n\n// TODO: Delete once https://github.com/strapi/design-system/pull/858\n// is merged and released.\nconst StyledBox = styled<BoxComponent>(Box)`\n  > div:first-child {\n    box-shadow: ${({ theme }) => theme.shadows.tableShadow};\n  }\n`;\n\nconst AccordionContentRadius = styled<BoxComponent>(Box)`\n  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};\n`;\n\nconst Rectangle = styled<BoxComponent>(Box)`\n  width: ${({ theme }) => theme.spaces[2]};\n  height: ${({ theme }) => theme.spaces[4]};\n`;\n\nconst Preview = styled.span`\n  display: block;\n  background-color: ${({ theme }) => theme.colors.primary100};\n  outline: 1px dashed ${({ theme }) => theme.colors.primary500};\n  outline-offset: -1px;\n  padding: ${({ theme }) => theme.spaces[6]};\n`;\n\nconst ComponentContainer = styled<BoxComponent<'li'>>(Box)`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n`;\n\ninterface DynamicComponentFieldsProps extends Pick<DynamicComponentProps, 'children'> {\n  componentUid: string;\n  index: number;\n  layout?: EditFieldLayout[][];\n  name: string;\n}\n\nconst DynamicComponentFields = React.memo(\n  ({ children, componentUid, index, layout, name }: DynamicComponentFieldsProps) => {\n    const { formatMessage } = useIntl();\n\n    return (\n      <Box padding={{ initial: 4, medium: 6 }}>\n        <Grid.Root gap={4}>\n          {layout?.map((row, rowInd) => {\n            return (\n              <Grid.Item col={12} key={rowInd} xs={12} direction=\"column\" alignItems=\"stretch\">\n                <ResponsiveGridRoot gap={4}>\n                  {row.map(({ size, ...field }) => {\n                    const fieldName = `${name}.${index}.${field.name}`;\n\n                    const fieldWithTranslatedLabel = {\n                      ...field,\n                      label: formatMessage({\n                        id: `content-manager.components.${componentUid}.${field.name}`,\n                        defaultMessage: field.label,\n                      }),\n                    };\n\n                    return (\n                      <ResponsiveGridItem\n                        col={size}\n                        key={fieldName}\n                        s={12}\n                        xs={12}\n                        direction=\"column\"\n                        alignItems=\"stretch\"\n                      >\n                        {children ? (\n                          children({\n                            ...fieldWithTranslatedLabel,\n                            name: fieldName,\n                          })\n                        ) : (\n                          <InputRenderer {...fieldWithTranslatedLabel} name={fieldName} />\n                        )}\n                      </ResponsiveGridItem>\n                    );\n                  })}\n                </ResponsiveGridRoot>\n              </Grid.Item>\n            );\n          })}\n        </Grid.Root>\n      </Box>\n    );\n  }\n);\n\nDynamicComponentFields.displayName = 'DynamicComponentFields';\n\nconst MemoizedDynamicComponent = React.memo(DynamicComponent);\n\nexport { MemoizedDynamicComponent as DynamicComponent };\nexport type { DynamicComponentProps };\n"],"names":["DynamicComponent","componentUid","disabled","index","name","onRemoveComponentClick","onMoveComponent","onGrabItem","onDropItem","onCancel","dynamicComponentsByCategory","onAddComponent","totalLength","children","formatMessage","useIntl","currentDocumentMeta","useDocumentContext","isDesktop","useIsDesktop","edit","components","useDocumentLayout","model","mainField","settings","mainFieldValue","useForm","state","getIn","values","displayedValue","String","trim","displayTitle","length","icon","displayName","React","useMemo","category","split","find","component","uid","id","defaultMessage","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","componentPath","hasValue","isNewItem","rawError","errors","collapseToOpen","setCollapseToOpen","useState","composedBoxRefs","useComposedRefs","canMoveUp","canMoveDown","handleRemoveCurrentComponent","useCallback","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","getTranslation","onClick","Trash","e","stopPropagation","data-handler-id","ref","onKeyDown","Drag","ArrowUp","ArrowDown","Menu","Root","Trigger","size","endIcon","paddingLeft","paddingRight","tag","More","aria-hidden","focusable","Content","SubRoot","SubTrigger","SubContent","Object","entries","map","Fragment","Label","Item","onSelect","accordionTitle","ComponentContainer","width","Flex","justifyContent","Rectangle","background","StyledBox","hasRadius","Preview","Accordion","value","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","DynamicComponentFields","layout","styled","Box","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500","memo","padding","initial","medium","Grid","gap","row","rowInd","col","xs","direction","alignItems","ResponsiveGridRoot","field","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","s","InputRenderer","MemoizedDynamicComponent"],"mappings":"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"}

package/dist/admin/pages/ListConfiguration/ListConfigurationPage.js

@@ -40,8 +40,14 @@ const ListConfiguration = ()=>{
     const { trackUsage } = strapiAdmin.useTracking();
     const { toggleNotification } = strapiAdmin.useNotification();
     const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
-    const { model, collectionType } = useDocument.useDoc();
+    const { model, collectionType, schema } = useDocument.useDoc();
     const { isLoading: isLoadingLayout, list, edit } = useDocumentLayout.useDocLayout();
+    const [displayedHeaderNames, setDisplayedHeaderNames] = strapiAdmin.useScopedPersistentState(`STRAPI_LIST_VIEW_DISPLAYED_HEADERS:${model}`, null);
+    const { metadata } = contentTypes.useGetContentTypeConfigurationQuery(model, {
+        selectFromResult: ({ data })=>({
+                metadata: data?.contentType.metadatas ?? {}
+            })
+    });
     const [updateContentTypeConfiguration] = contentTypes.useUpdateContentTypeConfigurationMutation();
     const handleSubmit = async (data)=>{
         try {
@@ -77,6 +83,7 @@ const ListConfiguration = ()=>{
                 uid: model
             });
             if ('data' in res) {
+                setDisplayedHeaderNames(layoutData.map((field)=>field.name));
                 trackUsage('didEditListSettings');
                 toggleNotification({
                     type: 'success',
@@ -103,8 +110,15 @@ const ListConfiguration = ()=>{
         }
     };
     const initialValues = React__namespace.useMemo(()=>{
+        const headerNames = displayedHeaderNames && displayedHeaderNames.length > 0 ? displayedHeaderNames : list.layout.map((field)=>field.name);
+        const headerMetadatas = headerNames.reduce((acc, name)=>{
+            acc[name] = metadata[name]?.list ?? list.metadatas[name] ?? {
+                label: name
+            };
+            return acc;
+        }, {});
         return {
-            layout: list.layout.map(({ label, sortable, name })=>({
+            layout: useDocumentLayout.convertListLayoutToFieldLayouts(headerNames, schema?.attributes, headerMetadatas).map(({ label, sortable, name })=>({
                     label: typeof label === 'string' ? label : formatMessage(label),
                     sortable,
                     name
@@ -113,8 +127,10 @@ const ListConfiguration = ()=>{
         };
     }, [
         formatMessage,
-        list.layout,
-        list.settings
+        list,
+        displayedHeaderNames,
+        schema,
+        metadata
     ]);
     if (collectionType === collections.SINGLE_TYPES) {
         return /*#__PURE__*/ jsxRuntime.jsx(reactRouterDom.Navigate, {
@@ -167,10 +183,11 @@ const ListConfiguration = ()=>{
     });
 };
 const ProtectedListConfiguration = ()=>{
+    const { slug = '' } = reactRouterDom.useParams();
     const permissions = hooks.useTypedSelector((state)=>state.admin_app.permissions.contentManager?.collectionTypesConfigurations);
     return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Protect, {
         permissions: permissions,
-        children: /*#__PURE__*/ jsxRuntime.jsx(ListConfiguration, {})
+        children: /*#__PURE__*/ jsxRuntime.jsx(ListConfiguration, {}, slug)
     });
 };
 

package/dist/admin/pages/ListConfiguration/ListConfigurationPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListConfigurationPage.js","sources":["../../../../admin/src/pages/ListConfiguration/ListConfigurationPage.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Form,\n  type FormProps,\n  useNotification,\n  useTracking,\n  useAPIErrorHandler,\n  Page,\n  Layouts,\n} from '@strapi/admin/strapi-admin';\nimport { Divider, Flex, Main } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { Navigate } from 'react-router-dom';\n\nimport { SINGLE_TYPES } from '../../constants/collections';\nimport { useDoc } from '../../hooks/useDocument';\nimport { ListFieldLayout, ListLayout, useDocLayout } from '../../hooks/useDocumentLayout';\nimport { useTypedSelector } from '../../modules/hooks';\nimport { useUpdateContentTypeConfigurationMutation } from '../../services/contentTypes';\nimport { setIn } from '../../utils/objects';\n\nimport { Header } from './components/Header';\nimport { Settings } from './components/Settings';\nimport { SortDisplayedFields } from './components/SortDisplayedFields';\n\nimport type { Metadatas } from '../../../../shared/contracts/content-types';\n\ninterface FormData extends Pick<ListLayout, 'settings'> {\n  layout: Array<Pick<ListFieldLayout, 'sortable' | 'name'> & { label: string }>;\n}\n\nconst ListConfiguration = () => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const { toggleNotification } = useNotification();\n  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();\n\n  const { model, collectionType } = useDoc();\n\n  const { isLoading: isLoadingLayout, list, edit } = useDocLayout();\n\n  const [updateContentTypeConfiguration] = useUpdateContentTypeConfigurationMutation();\n  const handleSubmit: FormProps<FormData>['onSubmit'] = async (data) => {\n    try {\n      trackUsage('willSaveContentTypeLayout');\n      const layoutData = data.layout ?? [];\n      /**\n       * We reconstruct the metadatas object by taking the existing edit metadatas\n       * and re-merging that by attribute name with the current list metadatas, whilst overwriting\n       * the data from the form we've built.\n       */\n      const meta = Object.entries(edit.metadatas).reduce<Metadatas>((acc, [name, editMeta]) => {\n        const { mainField: _mainField, ...listMeta } = list.metadatas[name];\n\n        const { label, sortable } = layoutData.find((field) => field.name === name) ?? {};\n\n        acc[name] = {\n          edit: editMeta,\n          list: {\n            ...listMeta,\n            label: label || listMeta.label,\n            sortable: sortable || listMeta.sortable,\n          },\n        };\n\n        return acc;\n      }, {});\n\n      const res = await updateContentTypeConfiguration({\n        layouts: {\n          edit: edit.layout.flatMap((panel) =>\n            panel.map((row) => row.map(({ name, size }) => ({ name, size })))\n          ),\n          list: layoutData.map((field) => field.name),\n        },\n        settings: setIn(data.settings, 'displayName', undefined),\n        metadatas: meta,\n        uid: model,\n      });\n\n      if ('data' in res) {\n        trackUsage('didEditListSettings');\n        toggleNotification({\n          type: 'success',\n          message: formatMessage({ id: 'notification.success.saved', defaultMessage: 'Saved' }),\n        });\n      } else {\n        toggleNotification({\n          type: 'danger',\n          message: formatAPIError(res.error),\n        });\n      }\n    } catch (err) {\n      console.error(err);\n      toggleNotification({\n        type: 'danger',\n        message: formatMessage({ id: 'notification.error', defaultMessage: 'An error occurred' }),\n      });\n    }\n  };\n\n  const initialValues = React.useMemo(() => {\n    return {\n      layout: list.layout.map(({ label, sortable, name }) => ({\n        label: typeof label === 'string' ? label : formatMessage(label),\n        sortable,\n        name,\n      })),\n      settings: list.settings,\n    } satisfies FormData;\n  }, [formatMessage, list.layout, list.settings]);\n\n  if (collectionType === SINGLE_TYPES) {\n    return <Navigate to={`/single-types/${model}`} />;\n  }\n\n  if (isLoadingLayout) {\n    return <Page.Loading />;\n  }\n\n  return (\n    <Layouts.Root>\n      <Page.Title>{`Configure ${list.settings.displayName} List View`}</Page.Title>\n      <Main>\n        <Form initialValues={initialValues} onSubmit={handleSubmit} method=\"PUT\">\n          <Header\n            collectionType={collectionType}\n            model={model}\n            name={list.settings.displayName ?? ''}\n          />\n          <Layouts.Content>\n            <Flex\n              alignItems=\"stretch\"\n              background=\"neutral0\"\n              direction=\"column\"\n              gap={6}\n              hasRadius\n              shadow=\"tableShadow\"\n              paddingTop={6}\n              paddingBottom={6}\n              paddingLeft={7}\n              paddingRight={7}\n              position=\"relative\"\n            >\n              <Settings />\n              <Divider />\n              <SortDisplayedFields />\n            </Flex>\n          </Layouts.Content>\n        </Form>\n      </Main>\n    </Layouts.Root>\n  );\n};\n\nconst ProtectedListConfiguration = () => {\n  const permissions = useTypedSelector(\n    (state) => state.admin_app.permissions.contentManager?.collectionTypesConfigurations\n  );\n\n  return (\n    <Page.Protect permissions={permissions}>\n      <ListConfiguration />\n    </Page.Protect>\n  );\n};\n\nexport { ProtectedListConfiguration, ListConfiguration };\nexport type { FormData };\n"],"names":["ListConfiguration","formatMessage","useIntl","trackUsage","useTracking","toggleNotification","useNotification","_unstableFormatAPIError","formatAPIError","useAPIErrorHandler","model","collectionType","useDoc","isLoading","isLoadingLayout","list","edit","useDocLayout","updateContentTypeConfiguration","useUpdateContentTypeConfigurationMutation","handleSubmit","data","layoutData","layout","meta","Object","entries","metadatas","reduce","acc","name","editMeta","mainField","_mainField","listMeta","label","sortable","find","field","res","layouts","flatMap","panel","map","row","size","settings","setIn","undefined","uid","type","message","id","defaultMessage","error","err","console","initialValues","React","useMemo","SINGLE_TYPES","_jsx","Navigate","to","Page","Loading","_jsxs","Layouts","Root","Title","displayName","Main","Form","onSubmit","method","Header","Content","Flex","alignItems","background","direction","gap","hasRadius","shadow","paddingTop","paddingBottom","paddingLeft","paddingRight","position","Settings","Divider","SortDisplayedFields","ProtectedListConfiguration","permissions","useTypedSelector","state","admin_app","contentManager","collectionTypesConfigurations","Protect"],"mappings":"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"}
+{"version":3,"file":"ListConfigurationPage.js","sources":["../../../../admin/src/pages/ListConfiguration/ListConfigurationPage.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Form,\n  type FormProps,\n  useNotification,\n  useScopedPersistentState,\n  useTracking,\n  useAPIErrorHandler,\n  Page,\n  Layouts,\n} from '@strapi/admin/strapi-admin';\nimport { Divider, Flex, Main } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { Navigate, useParams } from 'react-router-dom';\n\nimport { SINGLE_TYPES } from '../../constants/collections';\nimport { useDoc } from '../../hooks/useDocument';\nimport {\n  convertListLayoutToFieldLayouts,\n  type ListFieldLayout,\n  type ListLayout,\n  useDocLayout,\n} from '../../hooks/useDocumentLayout';\nimport { useTypedSelector } from '../../modules/hooks';\nimport {\n  useGetContentTypeConfigurationQuery,\n  useUpdateContentTypeConfigurationMutation,\n} from '../../services/contentTypes';\nimport { setIn } from '../../utils/objects';\n\nimport { Header } from './components/Header';\nimport { Settings } from './components/Settings';\nimport { SortDisplayedFields } from './components/SortDisplayedFields';\n\nimport type { Metadatas } from '../../../../shared/contracts/content-types';\n\ninterface FormData extends Pick<ListLayout, 'settings'> {\n  layout: Array<Pick<ListFieldLayout, 'sortable' | 'name'> & { label: string }>;\n}\n\nconst ListConfiguration = () => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const { toggleNotification } = useNotification();\n  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();\n\n  const { model, collectionType, schema } = useDoc();\n\n  const { isLoading: isLoadingLayout, list, edit } = useDocLayout();\n  const [displayedHeaderNames, setDisplayedHeaderNames] = useScopedPersistentState<string[] | null>(\n    `STRAPI_LIST_VIEW_DISPLAYED_HEADERS:${model}`,\n    null\n  );\n\n  const { metadata } = useGetContentTypeConfigurationQuery(model, {\n    selectFromResult: ({ data }) => ({\n      metadata: data?.contentType.metadatas ?? {},\n    }),\n  });\n\n  const [updateContentTypeConfiguration] = useUpdateContentTypeConfigurationMutation();\n  const handleSubmit: FormProps<FormData>['onSubmit'] = async (data) => {\n    try {\n      trackUsage('willSaveContentTypeLayout');\n      const layoutData = data.layout ?? [];\n      /**\n       * We reconstruct the metadatas object by taking the existing edit metadatas\n       * and re-merging that by attribute name with the current list metadatas, whilst overwriting\n       * the data from the form we've built.\n       */\n      const meta = Object.entries(edit.metadatas).reduce<Metadatas>((acc, [name, editMeta]) => {\n        const { mainField: _mainField, ...listMeta } = list.metadatas[name];\n\n        const { label, sortable } = layoutData.find((field) => field.name === name) ?? {};\n\n        acc[name] = {\n          edit: editMeta,\n          list: {\n            ...listMeta,\n            label: label || listMeta.label,\n            sortable: sortable || listMeta.sortable,\n          },\n        };\n\n        return acc;\n      }, {});\n\n      const res = await updateContentTypeConfiguration({\n        layouts: {\n          edit: edit.layout.flatMap((panel) =>\n            panel.map((row) => row.map(({ name, size }) => ({ name, size })))\n          ),\n          list: layoutData.map((field) => field.name),\n        },\n        settings: setIn(data.settings, 'displayName', undefined),\n        metadatas: meta,\n        uid: model,\n      });\n\n      if ('data' in res) {\n        setDisplayedHeaderNames(layoutData.map((field) => field.name));\n        trackUsage('didEditListSettings');\n        toggleNotification({\n          type: 'success',\n          message: formatMessage({ id: 'notification.success.saved', defaultMessage: 'Saved' }),\n        });\n      } else {\n        toggleNotification({\n          type: 'danger',\n          message: formatAPIError(res.error),\n        });\n      }\n    } catch (err) {\n      console.error(err);\n      toggleNotification({\n        type: 'danger',\n        message: formatMessage({ id: 'notification.error', defaultMessage: 'An error occurred' }),\n      });\n    }\n  };\n\n  const initialValues = React.useMemo(() => {\n    const headerNames =\n      displayedHeaderNames && displayedHeaderNames.length > 0\n        ? displayedHeaderNames\n        : list.layout.map((field) => field.name);\n\n    const headerMetadatas = headerNames.reduce<ListLayout['metadatas']>((acc, name) => {\n      acc[name] = metadata[name]?.list ?? list.metadatas[name] ?? { label: name };\n      return acc;\n    }, {});\n\n    return {\n      layout: convertListLayoutToFieldLayouts(headerNames, schema?.attributes, headerMetadatas).map(\n        ({ label, sortable, name }) => ({\n          label: typeof label === 'string' ? label : formatMessage(label),\n          sortable,\n          name,\n        })\n      ),\n      settings: list.settings,\n    } satisfies FormData;\n  }, [formatMessage, list, displayedHeaderNames, schema, metadata]);\n\n  if (collectionType === SINGLE_TYPES) {\n    return <Navigate to={`/single-types/${model}`} />;\n  }\n\n  if (isLoadingLayout) {\n    return <Page.Loading />;\n  }\n\n  return (\n    <Layouts.Root>\n      <Page.Title>{`Configure ${list.settings.displayName} List View`}</Page.Title>\n      <Main>\n        <Form initialValues={initialValues} onSubmit={handleSubmit} method=\"PUT\">\n          <Header\n            collectionType={collectionType}\n            model={model}\n            name={list.settings.displayName ?? ''}\n          />\n          <Layouts.Content>\n            <Flex\n              alignItems=\"stretch\"\n              background=\"neutral0\"\n              direction=\"column\"\n              gap={6}\n              hasRadius\n              shadow=\"tableShadow\"\n              paddingTop={6}\n              paddingBottom={6}\n              paddingLeft={7}\n              paddingRight={7}\n              position=\"relative\"\n            >\n              <Settings />\n              <Divider />\n              <SortDisplayedFields />\n            </Flex>\n          </Layouts.Content>\n        </Form>\n      </Main>\n    </Layouts.Root>\n  );\n};\n\nconst ProtectedListConfiguration = () => {\n  const { slug = '' } = useParams<{\n    slug: string;\n  }>();\n  const permissions = useTypedSelector(\n    (state) => state.admin_app.permissions.contentManager?.collectionTypesConfigurations\n  );\n\n  return (\n    <Page.Protect permissions={permissions}>\n      <ListConfiguration key={slug} />\n    </Page.Protect>\n  );\n};\n\nexport { ProtectedListConfiguration, ListConfiguration };\nexport type { FormData };\n"],"names":["ListConfiguration","formatMessage","useIntl","trackUsage","useTracking","toggleNotification","useNotification","_unstableFormatAPIError","formatAPIError","useAPIErrorHandler","model","collectionType","schema","useDoc","isLoading","isLoadingLayout","list","edit","useDocLayout","displayedHeaderNames","setDisplayedHeaderNames","useScopedPersistentState","metadata","useGetContentTypeConfigurationQuery","selectFromResult","data","contentType","metadatas","updateContentTypeConfiguration","useUpdateContentTypeConfigurationMutation","handleSubmit","layoutData","layout","meta","Object","entries","reduce","acc","name","editMeta","mainField","_mainField","listMeta","label","sortable","find","field","res","layouts","flatMap","panel","map","row","size","settings","setIn","undefined","uid","type","message","id","defaultMessage","error","err","console","initialValues","React","useMemo","headerNames","length","headerMetadatas","convertListLayoutToFieldLayouts","attributes","SINGLE_TYPES","_jsx","Navigate","to","Page","Loading","_jsxs","Layouts","Root","Title","displayName","Main","Form","onSubmit","method","Header","Content","Flex","alignItems","background","direction","gap","hasRadius","shadow","paddingTop","paddingBottom","paddingLeft","paddingRight","position","Settings","Divider","SortDisplayedFields","ProtectedListConfiguration","slug","useParams","permissions","useTypedSelector","state","admin_app","contentManager","collectionTypesConfigurations","Protect"],"mappings":"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"}

package/dist/admin/pages/ListConfiguration/ListConfigurationPage.mjs

@@ -1,14 +1,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Page, useTracking, useNotification, useAPIErrorHandler, Layouts, Form } from '@strapi/admin/strapi-admin';
+import { Page, useTracking, useNotification, useAPIErrorHandler, useScopedPersistentState, Layouts, Form } from '@strapi/admin/strapi-admin';
 import { Main, Flex, Divider } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
-import { Navigate } from 'react-router-dom';
+import { useParams, Navigate } from 'react-router-dom';
 import { SINGLE_TYPES } from '../../constants/collections.mjs';
 import { useDoc } from '../../hooks/useDocument.mjs';
-import { useDocLayout } from '../../hooks/useDocumentLayout.mjs';
+import { useDocLayout, convertListLayoutToFieldLayouts } from '../../hooks/useDocumentLayout.mjs';
 import { useTypedSelector } from '../../modules/hooks.mjs';
-import { useUpdateContentTypeConfigurationMutation } from '../../services/contentTypes.mjs';
+import { useGetContentTypeConfigurationQuery, useUpdateContentTypeConfigurationMutation } from '../../services/contentTypes.mjs';
 import { setIn } from '../../utils/objects.mjs';
 import { Header } from './components/Header.mjs';
 import { Settings } from './components/Settings.mjs';
@@ -19,8 +19,14 @@ const ListConfiguration = ()=>{
     const { trackUsage } = useTracking();
     const { toggleNotification } = useNotification();
     const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
-    const { model, collectionType } = useDoc();
+    const { model, collectionType, schema } = useDoc();
     const { isLoading: isLoadingLayout, list, edit } = useDocLayout();
+    const [displayedHeaderNames, setDisplayedHeaderNames] = useScopedPersistentState(`STRAPI_LIST_VIEW_DISPLAYED_HEADERS:${model}`, null);
+    const { metadata } = useGetContentTypeConfigurationQuery(model, {
+        selectFromResult: ({ data })=>({
+                metadata: data?.contentType.metadatas ?? {}
+            })
+    });
     const [updateContentTypeConfiguration] = useUpdateContentTypeConfigurationMutation();
     const handleSubmit = async (data)=>{
         try {
@@ -56,6 +62,7 @@ const ListConfiguration = ()=>{
                 uid: model
             });
             if ('data' in res) {
+                setDisplayedHeaderNames(layoutData.map((field)=>field.name));
                 trackUsage('didEditListSettings');
                 toggleNotification({
                     type: 'success',
@@ -82,8 +89,15 @@ const ListConfiguration = ()=>{
         }
     };
     const initialValues = React.useMemo(()=>{
+        const headerNames = displayedHeaderNames && displayedHeaderNames.length > 0 ? displayedHeaderNames : list.layout.map((field)=>field.name);
+        const headerMetadatas = headerNames.reduce((acc, name)=>{
+            acc[name] = metadata[name]?.list ?? list.metadatas[name] ?? {
+                label: name
+            };
+            return acc;
+        }, {});
         return {
-            layout: list.layout.map(({ label, sortable, name })=>({
+            layout: convertListLayoutToFieldLayouts(headerNames, schema?.attributes, headerMetadatas).map(({ label, sortable, name })=>({
                     label: typeof label === 'string' ? label : formatMessage(label),
                     sortable,
                     name
@@ -92,8 +106,10 @@ const ListConfiguration = ()=>{
         };
     }, [
         formatMessage,
-        list.layout,
-        list.settings
+        list,
+        displayedHeaderNames,
+        schema,
+        metadata
     ]);
     if (collectionType === SINGLE_TYPES) {
         return /*#__PURE__*/ jsx(Navigate, {
@@ -146,10 +162,11 @@ const ListConfiguration = ()=>{
     });
 };
 const ProtectedListConfiguration = ()=>{
+    const { slug = '' } = useParams();
     const permissions = useTypedSelector((state)=>state.admin_app.permissions.contentManager?.collectionTypesConfigurations);
     return /*#__PURE__*/ jsx(Page.Protect, {
         permissions: permissions,
-        children: /*#__PURE__*/ jsx(ListConfiguration, {})
+        children: /*#__PURE__*/ jsx(ListConfiguration, {}, slug)
     });
 };
 

package/dist/admin/pages/ListConfiguration/ListConfigurationPage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListConfigurationPage.mjs","sources":["../../../../admin/src/pages/ListConfiguration/ListConfigurationPage.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Form,\n  type FormProps,\n  useNotification,\n  useTracking,\n  useAPIErrorHandler,\n  Page,\n  Layouts,\n} from '@strapi/admin/strapi-admin';\nimport { Divider, Flex, Main } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { Navigate } from 'react-router-dom';\n\nimport { SINGLE_TYPES } from '../../constants/collections';\nimport { useDoc } from '../../hooks/useDocument';\nimport { ListFieldLayout, ListLayout, useDocLayout } from '../../hooks/useDocumentLayout';\nimport { useTypedSelector } from '../../modules/hooks';\nimport { useUpdateContentTypeConfigurationMutation } from '../../services/contentTypes';\nimport { setIn } from '../../utils/objects';\n\nimport { Header } from './components/Header';\nimport { Settings } from './components/Settings';\nimport { SortDisplayedFields } from './components/SortDisplayedFields';\n\nimport type { Metadatas } from '../../../../shared/contracts/content-types';\n\ninterface FormData extends Pick<ListLayout, 'settings'> {\n  layout: Array<Pick<ListFieldLayout, 'sortable' | 'name'> & { label: string }>;\n}\n\nconst ListConfiguration = () => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const { toggleNotification } = useNotification();\n  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();\n\n  const { model, collectionType } = useDoc();\n\n  const { isLoading: isLoadingLayout, list, edit } = useDocLayout();\n\n  const [updateContentTypeConfiguration] = useUpdateContentTypeConfigurationMutation();\n  const handleSubmit: FormProps<FormData>['onSubmit'] = async (data) => {\n    try {\n      trackUsage('willSaveContentTypeLayout');\n      const layoutData = data.layout ?? [];\n      /**\n       * We reconstruct the metadatas object by taking the existing edit metadatas\n       * and re-merging that by attribute name with the current list metadatas, whilst overwriting\n       * the data from the form we've built.\n       */\n      const meta = Object.entries(edit.metadatas).reduce<Metadatas>((acc, [name, editMeta]) => {\n        const { mainField: _mainField, ...listMeta } = list.metadatas[name];\n\n        const { label, sortable } = layoutData.find((field) => field.name === name) ?? {};\n\n        acc[name] = {\n          edit: editMeta,\n          list: {\n            ...listMeta,\n            label: label || listMeta.label,\n            sortable: sortable || listMeta.sortable,\n          },\n        };\n\n        return acc;\n      }, {});\n\n      const res = await updateContentTypeConfiguration({\n        layouts: {\n          edit: edit.layout.flatMap((panel) =>\n            panel.map((row) => row.map(({ name, size }) => ({ name, size })))\n          ),\n          list: layoutData.map((field) => field.name),\n        },\n        settings: setIn(data.settings, 'displayName', undefined),\n        metadatas: meta,\n        uid: model,\n      });\n\n      if ('data' in res) {\n        trackUsage('didEditListSettings');\n        toggleNotification({\n          type: 'success',\n          message: formatMessage({ id: 'notification.success.saved', defaultMessage: 'Saved' }),\n        });\n      } else {\n        toggleNotification({\n          type: 'danger',\n          message: formatAPIError(res.error),\n        });\n      }\n    } catch (err) {\n      console.error(err);\n      toggleNotification({\n        type: 'danger',\n        message: formatMessage({ id: 'notification.error', defaultMessage: 'An error occurred' }),\n      });\n    }\n  };\n\n  const initialValues = React.useMemo(() => {\n    return {\n      layout: list.layout.map(({ label, sortable, name }) => ({\n        label: typeof label === 'string' ? label : formatMessage(label),\n        sortable,\n        name,\n      })),\n      settings: list.settings,\n    } satisfies FormData;\n  }, [formatMessage, list.layout, list.settings]);\n\n  if (collectionType === SINGLE_TYPES) {\n    return <Navigate to={`/single-types/${model}`} />;\n  }\n\n  if (isLoadingLayout) {\n    return <Page.Loading />;\n  }\n\n  return (\n    <Layouts.Root>\n      <Page.Title>{`Configure ${list.settings.displayName} List View`}</Page.Title>\n      <Main>\n        <Form initialValues={initialValues} onSubmit={handleSubmit} method=\"PUT\">\n          <Header\n            collectionType={collectionType}\n            model={model}\n            name={list.settings.displayName ?? ''}\n          />\n          <Layouts.Content>\n            <Flex\n              alignItems=\"stretch\"\n              background=\"neutral0\"\n              direction=\"column\"\n              gap={6}\n              hasRadius\n              shadow=\"tableShadow\"\n              paddingTop={6}\n              paddingBottom={6}\n              paddingLeft={7}\n              paddingRight={7}\n              position=\"relative\"\n            >\n              <Settings />\n              <Divider />\n              <SortDisplayedFields />\n            </Flex>\n          </Layouts.Content>\n        </Form>\n      </Main>\n    </Layouts.Root>\n  );\n};\n\nconst ProtectedListConfiguration = () => {\n  const permissions = useTypedSelector(\n    (state) => state.admin_app.permissions.contentManager?.collectionTypesConfigurations\n  );\n\n  return (\n    <Page.Protect permissions={permissions}>\n      <ListConfiguration />\n    </Page.Protect>\n  );\n};\n\nexport { ProtectedListConfiguration, ListConfiguration };\nexport type { FormData };\n"],"names":["ListConfiguration","formatMessage","useIntl","trackUsage","useTracking","toggleNotification","useNotification","_unstableFormatAPIError","formatAPIError","useAPIErrorHandler","model","collectionType","useDoc","isLoading","isLoadingLayout","list","edit","useDocLayout","updateContentTypeConfiguration","useUpdateContentTypeConfigurationMutation","handleSubmit","data","layoutData","layout","meta","Object","entries","metadatas","reduce","acc","name","editMeta","mainField","_mainField","listMeta","label","sortable","find","field","res","layouts","flatMap","panel","map","row","size","settings","setIn","undefined","uid","type","message","id","defaultMessage","error","err","console","initialValues","React","useMemo","SINGLE_TYPES","_jsx","Navigate","to","Page","Loading","_jsxs","Layouts","Root","Title","displayName","Main","Form","onSubmit","method","Header","Content","Flex","alignItems","background","direction","gap","hasRadius","shadow","paddingTop","paddingBottom","paddingLeft","paddingRight","position","Settings","Divider","SortDisplayedFields","ProtectedListConfiguration","permissions","useTypedSelector","state","admin_app","contentManager","collectionTypesConfigurations","Protect"],"mappings":"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"}
+{"version":3,"file":"ListConfigurationPage.mjs","sources":["../../../../admin/src/pages/ListConfiguration/ListConfigurationPage.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Form,\n  type FormProps,\n  useNotification,\n  useScopedPersistentState,\n  useTracking,\n  useAPIErrorHandler,\n  Page,\n  Layouts,\n} from '@strapi/admin/strapi-admin';\nimport { Divider, Flex, Main } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { Navigate, useParams } from 'react-router-dom';\n\nimport { SINGLE_TYPES } from '../../constants/collections';\nimport { useDoc } from '../../hooks/useDocument';\nimport {\n  convertListLayoutToFieldLayouts,\n  type ListFieldLayout,\n  type ListLayout,\n  useDocLayout,\n} from '../../hooks/useDocumentLayout';\nimport { useTypedSelector } from '../../modules/hooks';\nimport {\n  useGetContentTypeConfigurationQuery,\n  useUpdateContentTypeConfigurationMutation,\n} from '../../services/contentTypes';\nimport { setIn } from '../../utils/objects';\n\nimport { Header } from './components/Header';\nimport { Settings } from './components/Settings';\nimport { SortDisplayedFields } from './components/SortDisplayedFields';\n\nimport type { Metadatas } from '../../../../shared/contracts/content-types';\n\ninterface FormData extends Pick<ListLayout, 'settings'> {\n  layout: Array<Pick<ListFieldLayout, 'sortable' | 'name'> & { label: string }>;\n}\n\nconst ListConfiguration = () => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const { toggleNotification } = useNotification();\n  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();\n\n  const { model, collectionType, schema } = useDoc();\n\n  const { isLoading: isLoadingLayout, list, edit } = useDocLayout();\n  const [displayedHeaderNames, setDisplayedHeaderNames] = useScopedPersistentState<string[] | null>(\n    `STRAPI_LIST_VIEW_DISPLAYED_HEADERS:${model}`,\n    null\n  );\n\n  const { metadata } = useGetContentTypeConfigurationQuery(model, {\n    selectFromResult: ({ data }) => ({\n      metadata: data?.contentType.metadatas ?? {},\n    }),\n  });\n\n  const [updateContentTypeConfiguration] = useUpdateContentTypeConfigurationMutation();\n  const handleSubmit: FormProps<FormData>['onSubmit'] = async (data) => {\n    try {\n      trackUsage('willSaveContentTypeLayout');\n      const layoutData = data.layout ?? [];\n      /**\n       * We reconstruct the metadatas object by taking the existing edit metadatas\n       * and re-merging that by attribute name with the current list metadatas, whilst overwriting\n       * the data from the form we've built.\n       */\n      const meta = Object.entries(edit.metadatas).reduce<Metadatas>((acc, [name, editMeta]) => {\n        const { mainField: _mainField, ...listMeta } = list.metadatas[name];\n\n        const { label, sortable } = layoutData.find((field) => field.name === name) ?? {};\n\n        acc[name] = {\n          edit: editMeta,\n          list: {\n            ...listMeta,\n            label: label || listMeta.label,\n            sortable: sortable || listMeta.sortable,\n          },\n        };\n\n        return acc;\n      }, {});\n\n      const res = await updateContentTypeConfiguration({\n        layouts: {\n          edit: edit.layout.flatMap((panel) =>\n            panel.map((row) => row.map(({ name, size }) => ({ name, size })))\n          ),\n          list: layoutData.map((field) => field.name),\n        },\n        settings: setIn(data.settings, 'displayName', undefined),\n        metadatas: meta,\n        uid: model,\n      });\n\n      if ('data' in res) {\n        setDisplayedHeaderNames(layoutData.map((field) => field.name));\n        trackUsage('didEditListSettings');\n        toggleNotification({\n          type: 'success',\n          message: formatMessage({ id: 'notification.success.saved', defaultMessage: 'Saved' }),\n        });\n      } else {\n        toggleNotification({\n          type: 'danger',\n          message: formatAPIError(res.error),\n        });\n      }\n    } catch (err) {\n      console.error(err);\n      toggleNotification({\n        type: 'danger',\n        message: formatMessage({ id: 'notification.error', defaultMessage: 'An error occurred' }),\n      });\n    }\n  };\n\n  const initialValues = React.useMemo(() => {\n    const headerNames =\n      displayedHeaderNames && displayedHeaderNames.length > 0\n        ? displayedHeaderNames\n        : list.layout.map((field) => field.name);\n\n    const headerMetadatas = headerNames.reduce<ListLayout['metadatas']>((acc, name) => {\n      acc[name] = metadata[name]?.list ?? list.metadatas[name] ?? { label: name };\n      return acc;\n    }, {});\n\n    return {\n      layout: convertListLayoutToFieldLayouts(headerNames, schema?.attributes, headerMetadatas).map(\n        ({ label, sortable, name }) => ({\n          label: typeof label === 'string' ? label : formatMessage(label),\n          sortable,\n          name,\n        })\n      ),\n      settings: list.settings,\n    } satisfies FormData;\n  }, [formatMessage, list, displayedHeaderNames, schema, metadata]);\n\n  if (collectionType === SINGLE_TYPES) {\n    return <Navigate to={`/single-types/${model}`} />;\n  }\n\n  if (isLoadingLayout) {\n    return <Page.Loading />;\n  }\n\n  return (\n    <Layouts.Root>\n      <Page.Title>{`Configure ${list.settings.displayName} List View`}</Page.Title>\n      <Main>\n        <Form initialValues={initialValues} onSubmit={handleSubmit} method=\"PUT\">\n          <Header\n            collectionType={collectionType}\n            model={model}\n            name={list.settings.displayName ?? ''}\n          />\n          <Layouts.Content>\n            <Flex\n              alignItems=\"stretch\"\n              background=\"neutral0\"\n              direction=\"column\"\n              gap={6}\n              hasRadius\n              shadow=\"tableShadow\"\n              paddingTop={6}\n              paddingBottom={6}\n              paddingLeft={7}\n              paddingRight={7}\n              position=\"relative\"\n            >\n              <Settings />\n              <Divider />\n              <SortDisplayedFields />\n            </Flex>\n          </Layouts.Content>\n        </Form>\n      </Main>\n    </Layouts.Root>\n  );\n};\n\nconst ProtectedListConfiguration = () => {\n  const { slug = '' } = useParams<{\n    slug: string;\n  }>();\n  const permissions = useTypedSelector(\n    (state) => state.admin_app.permissions.contentManager?.collectionTypesConfigurations\n  );\n\n  return (\n    <Page.Protect permissions={permissions}>\n      <ListConfiguration key={slug} />\n    </Page.Protect>\n  );\n};\n\nexport { ProtectedListConfiguration, ListConfiguration };\nexport type { FormData };\n"],"names":["ListConfiguration","formatMessage","useIntl","trackUsage","useTracking","toggleNotification","useNotification","_unstableFormatAPIError","formatAPIError","useAPIErrorHandler","model","collectionType","schema","useDoc","isLoading","isLoadingLayout","list","edit","useDocLayout","displayedHeaderNames","setDisplayedHeaderNames","useScopedPersistentState","metadata","useGetContentTypeConfigurationQuery","selectFromResult","data","contentType","metadatas","updateContentTypeConfiguration","useUpdateContentTypeConfigurationMutation","handleSubmit","layoutData","layout","meta","Object","entries","reduce","acc","name","editMeta","mainField","_mainField","listMeta","label","sortable","find","field","res","layouts","flatMap","panel","map","row","size","settings","setIn","undefined","uid","type","message","id","defaultMessage","error","err","console","initialValues","React","useMemo","headerNames","length","headerMetadatas","convertListLayoutToFieldLayouts","attributes","SINGLE_TYPES","_jsx","Navigate","to","Page","Loading","_jsxs","Layouts","Root","Title","displayName","Main","Form","onSubmit","method","Header","Content","Flex","alignItems","background","direction","gap","hasRadius","shadow","paddingTop","paddingBottom","paddingLeft","paddingRight","position","Settings","Divider","SortDisplayedFields","ProtectedListConfiguration","slug","useParams","permissions","useTypedSelector","state","admin_app","contentManager","collectionTypesConfigurations","Protect"],"mappings":"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"}

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

@@ -81,16 +81,27 @@ const ListViewPage = ()=>{
         formatMessage,
         toggleNotification
     ]);
-    usePersistentQueryParams.usePersistentPartialQueryParams('STRAPI_LIST_VIEW_SETTINGS:', [
-        'sort',
-        'filters',
-        'pageSize'
-    ]);
-    usePersistentQueryParams.usePersistentPartialQueryParams('STRAPI_LOCALE', [
-        'plugins.i18n.locale'
-    ], false);
     const { collectionType, model, schema } = useDocument.useDoc();
     const { list, listViewConversionContext } = useDocumentLayout.useDocumentLayout(model);
+    const persistentQueryConfigs = React__namespace.useMemo(()=>({
+            [`STRAPI_LIST_VIEW_SETTINGS:${model}`]: {
+                paths: [
+                    'sort',
+                    'filters',
+                    'pageSize'
+                ],
+                scoped: true
+            },
+            STRAPI_LOCALE: {
+                paths: [
+                    'plugins.i18n.locale'
+                ],
+                scoped: false
+            }
+        }), [
+        model
+    ]);
+    usePersistentQueryParams.usePersistentPartialQueryParams(persistentQueryConfigs);
     const [displayedHeaderNames, setDisplayedHeaderNames] = strapiAdmin.useScopedPersistentState(`STRAPI_LIST_VIEW_DISPLAYED_HEADERS:${model}`, null);
     const mapDisplayedHeaders = (headers)=>headers.map((header)=>header.name);
     const displayedHeaders = React__namespace.useMemo(()=>{