@strapi/content-manager 5.61.0 → 5.62.0

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentCategory.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Accordion,\n  Box,\n  Flex,\n  FlexComponent,\n  Popover,\n  Tooltip,\n  Typography,\n} from '@strapi/design-system';\nimport upperFirst from 'lodash/upperFirst';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { ComponentIcon } from '../../../../../components/ComponentIcon';\nimport { resolvePreviewImageUrl } from '../../../../../utils/previewImage';\n\nimport type { Struct } from '@strapi/types';\n\nconst EMPTY_COMPONENTS: NonNullable<ComponentCategoryProps['components']> = [];\n\ninterface ComponentCategoryProps {\n  category: string;\n  components?: Array<{\n    uid: string;\n    displayName: string;\n    icon?: string;\n    preview?: Struct.PreviewImageValue;\n  }>;\n  onAddComponent: (\n    componentUid: string\n  ) => React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\n  variant?: Accordion.Variant;\n}\n\ninterface ComponentPreviewImageProps {\n  src: string;\n  alt: string;\n  onError?: React.ReactEventHandler<HTMLImageElement>;\n}\n\n/**\n * Renders a small preview thumbnail inside the component picker tile and, on hover,\n * a larger portaled preview so authors can read the component at a glance without picking it.\n * Uses a controlled Popover anchored to the thumbnail — the content is portaled, so it escapes\n * the accordion's overflow clipping.\n */\nconst ComponentPreviewImage = ({ src, alt, onError }: ComponentPreviewImageProps) => {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <Popover.Root open={open} onOpenChange={setOpen}>\n      <Popover.Anchor>\n        <Box\n          tag=\"img\"\n          src={src}\n          alt={alt}\n          loading=\"lazy\"\n          width=\"100%\"\n          height=\"5.2rem\"\n          hasRadius\n          style={{ objectFit: 'cover' }}\n          onMouseEnter={() => setOpen(true)}\n          onMouseLeave={() => setOpen(false)}\n          onError={onError}\n        />\n      </Popover.Anchor>\n      <Popover.Content\n        side=\"top\"\n        sideOffset={4}\n        onOpenAutoFocus={(e) => e.preventDefault()}\n        style={{ pointerEvents: 'none' }}\n      >\n        <Box padding={2}>\n          <Box\n            tag=\"img\"\n            src={src}\n            alt={alt}\n            hasRadius\n            style={{\n              display: 'block',\n              maxWidth: 'min(60rem, 90vw)',\n              maxHeight: 'min(45rem, 80vh)',\n              objectFit: 'contain',\n            }}\n          />\n        </Box>\n      </Popover.Content>\n    </Popover.Root>\n  );\n};\n\ninterface ComponentTileVisualProps {\n  previewUrl?: string;\n  icon?: string;\n  displayName: string;\n}\n\n/**\n * Holds per-tile load-error state: when the preview image fails to load (missing file,\n * unreachable CDN…), the tile falls back to the component icon instead of a broken image.\n */\nconst ComponentTileVisual = ({ previewUrl, icon, displayName }: ComponentTileVisualProps) => {\n  const [hasLoadError, setHasLoadError] = React.useState(false);\n\n  if (!previewUrl || hasLoadError) {\n    return <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />;\n  }\n\n  return (\n    <ComponentPreviewImage\n      src={previewUrl}\n      alt={displayName}\n      onError={() => setHasLoadError(true)}\n    />\n  );\n};\n\nconst ComponentCategory = ({\n  category,\n  components = EMPTY_COMPONENTS,\n  variant = 'primary',\n  onAddComponent,\n}: ComponentCategoryProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Accordion.Item value={category}>\n      <Accordion.Header variant={variant}>\n        <Accordion.Trigger>\n          {formatMessage({ id: category, defaultMessage: upperFirst(category) })}\n        </Accordion.Trigger>\n      </Accordion.Header>\n      <ResponsiveAccordionContent>\n        <Grid paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>\n          {components.map(({ uid, displayName, icon, preview }) => {\n            const previewUrl = resolvePreviewImageUrl(preview);\n\n            return (\n              <ComponentBox\n                key={uid}\n                tag=\"button\"\n                type=\"button\"\n                background=\"neutral100\"\n                justifyContent=\"center\"\n                onClick={onAddComponent(uid)}\n                hasRadius\n                height=\"8.4rem\"\n                shrink={0}\n                borderColor=\"neutral200\"\n              >\n                <Flex\n                  direction=\"column\"\n                  gap={1}\n                  alignItems=\"center\"\n                  justifyContent=\"center\"\n                  width=\"100%\"\n                  paddingLeft={2}\n                  paddingRight={2}\n                >\n                  <ComponentTileVisual\n                    previewUrl={previewUrl}\n                    icon={icon}\n                    displayName={displayName}\n                  />\n\n                  <Tooltip label={formatMessage({ id: uid, defaultMessage: displayName ?? uid })}>\n                    <Typography variant=\"pi\" fontWeight=\"bold\" ellipsis width=\"100%\">\n                      {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\n                    </Typography>\n                  </Tooltip>\n                </Flex>\n              </ComponentBox>\n            );\n          })}\n        </Grid>\n      </ResponsiveAccordionContent>\n    </Accordion.Item>\n  );\n};\n\nconst ResponsiveAccordionContent = styled(Accordion.Content)`\n  container-type: inline-size;\n`;\n\n/**\n * TODO:\n * JSDOM cannot handle container queries.\n * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n * for failing to parse the stylesheet.\n */\nconst Grid =\n  process.env.NODE_ENV !== 'test'\n    ? styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-template-columns: repeat(auto-fill, 14rem);\n          grid-gap: 4px;\n        }\n      `\n    : styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-gap: 4px;\n        }\n      `;\n\nconst ComponentBox = styled<FlexComponent<'button'>>(Flex)`\n  color: ${({ theme }) => theme.colors.neutral600};\n  cursor: pointer;\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\n  }\n\n  &:focus,\n  &:hover {\n    border: 1px solid ${({ theme }) => theme.colors.primary200};\n    background: ${({ theme }) => theme.colors.primary100};\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\nexport { ComponentCategory };\nexport type { ComponentCategoryProps };\n"],"names":["EMPTY_COMPONENTS","ComponentPreviewImage","src","alt","onError","open","setOpen","React","useState","_jsxs","Popover","Root","onOpenChange","_jsx","Anchor","Box","tag","loading","width","height","hasRadius","style","objectFit","onMouseEnter","onMouseLeave","Content","side","sideOffset","onOpenAutoFocus","e","preventDefault","pointerEvents","padding","display","maxWidth","maxHeight","ComponentTileVisual","previewUrl","icon","displayName","hasLoadError","setHasLoadError","ComponentIcon","color","background","ComponentCategory","category","components","variant","onAddComponent","formatMessage","useIntl","Accordion","Item","value","Header","Trigger","id","defaultMessage","upperFirst","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","preview","resolvePreviewImageUrl","ComponentBox","type","justifyContent","onClick","shrink","borderColor","Flex","direction","gap","alignItems","Tooltip","label","Typography","fontWeight","ellipsis","styled","process","env","NODE_ENV","theme","breakpoints","medium","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAMA,mBAAsE,EAAE;AAsB9E;;;;;IAMA,MAAMC,wBAAwB,CAAC,EAAEC,GAAG,EAAEC,GAAG,EAAEC,OAAO,EAA8B,GAAA;AAC9E,IAAA,MAAM,CAACC,IAAAA,EAAMC,OAAAA,CAAQ,GAAGC,gBAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;IAEvC,qBACEC,eAAA,CAACC,qBAAQC,IAAI,EAAA;QAACN,IAAAA,EAAMA,IAAAA;QAAMO,YAAAA,EAAcN,OAAAA;;AACtC,0BAAAO,cAAA,CAACH,qBAAQI,MAAM,EAAA;AACb,gBAAA,QAAA,gBAAAD,cAAA,CAACE,gBAAAA,EAAAA;oBACCC,GAAAA,EAAI,KAAA;oBACJd,GAAAA,EAAKA,GAAAA;oBACLC,GAAAA,EAAKA,GAAAA;oBACLc,OAAAA,EAAQ,MAAA;oBACRC,KAAAA,EAAM,MAAA;oBACNC,MAAAA,EAAO,QAAA;oBACPC,SAAS,EAAA,IAAA;oBACTC,KAAAA,EAAO;wBAAEC,SAAAA,EAAW;AAAQ,qBAAA;AAC5BC,oBAAAA,YAAAA,EAAc,IAAMjB,OAAAA,CAAQ,IAAA,CAAA;AAC5BkB,oBAAAA,YAAAA,EAAc,IAAMlB,OAAAA,CAAQ,KAAA,CAAA;oBAC5BF,OAAAA,EAASA;;;AAGb,0BAAAS,cAAA,CAACH,qBAAQe,OAAO,EAAA;gBACdC,IAAAA,EAAK,KAAA;gBACLC,UAAAA,EAAY,CAAA;gBACZC,eAAAA,EAAiB,CAACC,CAAAA,GAAMA,CAAAA,CAAEC,cAAc,EAAA;gBACxCT,KAAAA,EAAO;oBAAEU,aAAAA,EAAe;AAAO,iBAAA;AAE/B,gBAAA,QAAA,gBAAAlB,cAAA,CAACE,gBAAAA,EAAAA;oBAAIiB,OAAAA,EAAS,CAAA;AACZ,oBAAA,QAAA,gBAAAnB,cAAA,CAACE,gBAAAA,EAAAA;wBACCC,GAAAA,EAAI,KAAA;wBACJd,GAAAA,EAAKA,GAAAA;wBACLC,GAAAA,EAAKA,GAAAA;wBACLiB,SAAS,EAAA,IAAA;wBACTC,KAAAA,EAAO;4BACLY,OAAAA,EAAS,OAAA;4BACTC,QAAAA,EAAU,kBAAA;4BACVC,SAAAA,EAAW,kBAAA;4BACXb,SAAAA,EAAW;AACb;;;;;;AAMZ,CAAA;AAQA;;;IAIA,MAAMc,sBAAsB,CAAC,EAAEC,UAAU,EAAEC,IAAI,EAAEC,WAAW,EAA4B,GAAA;AACtF,IAAA,MAAM,CAACC,YAAAA,EAAcC,eAAAA,CAAgB,GAAGlC,gBAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;IAEvD,IAAI,CAAC6B,cAAcG,YAAAA,EAAc;AAC/B,QAAA,qBAAO3B,cAAA,CAAC6B,2BAAAA,EAAAA;YAAcC,KAAAA,EAAM,cAAA;YAAeC,UAAAA,EAAW,YAAA;YAAaN,IAAAA,EAAMA;;AAC3E,IAAA;AAEA,IAAA,qBACEzB,cAAA,CAACZ,qBAAAA,EAAAA;QACCC,GAAAA,EAAKmC,UAAAA;QACLlC,GAAAA,EAAKoC,WAAAA;AACLnC,QAAAA,OAAAA,EAAS,IAAMqC,eAAAA,CAAgB,IAAA;;AAGrC,CAAA;AAEA,MAAMI,iBAAAA,GAAoB,CAAC,EACzBC,QAAQ,EACRC,UAAAA,GAAa/C,gBAAgB,EAC7BgD,OAAAA,GAAU,SAAS,EACnBC,cAAc,EACS,GAAA;IACvB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAE1B,qBACE1C,eAAA,CAAC2C,uBAAUC,IAAI,EAAA;QAACC,KAAAA,EAAOR,QAAAA;;AACrB,0BAAAjC,cAAA,CAACuC,uBAAUG,MAAM,EAAA;gBAACP,OAAAA,EAASA,OAAAA;wCACzBnC,cAAA,CAACuC,uBAAUI,OAAO,EAAA;8BACfN,aAAAA,CAAc;wBAAEO,EAAAA,EAAIX,QAAAA;AAAUY,wBAAAA,cAAAA,EAAgBC,2BAAAA,CAAWb,QAAAA;AAAU,qBAAA;;;0BAGxEjC,cAAA,CAAC+C,0BAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAA/C,cAAA,CAACgD,IAAAA,EAAAA;oBAAKC,UAAAA,EAAY,CAAA;oBAAGC,aAAAA,EAAe,CAAA;oBAAGC,WAAAA,EAAa,CAAA;oBAAGC,YAAAA,EAAc,CAAA;8BAClElB,UAAAA,CAAWmB,GAAG,CAAC,CAAC,EAAEC,GAAG,EAAE5B,WAAW,EAAED,IAAI,EAAE8B,OAAO,EAAE,GAAA;AAClD,wBAAA,MAAM/B,aAAagC,mCAAAA,CAAuBD,OAAAA,CAAAA;AAE1C,wBAAA,qBACEvD,cAAA,CAACyD,YAAAA,EAAAA;4BAECtD,GAAAA,EAAI,QAAA;4BACJuD,IAAAA,EAAK,QAAA;4BACL3B,UAAAA,EAAW,YAAA;4BACX4B,cAAAA,EAAe,QAAA;AACfC,4BAAAA,OAAAA,EAASxB,cAAAA,CAAekB,GAAAA,CAAAA;4BACxB/C,SAAS,EAAA,IAAA;4BACTD,MAAAA,EAAO,QAAA;4BACPuD,MAAAA,EAAQ,CAAA;4BACRC,WAAAA,EAAY,YAAA;AAEZ,4BAAA,QAAA,gBAAAlE,eAAA,CAACmE,iBAAAA,EAAAA;gCACCC,SAAAA,EAAU,QAAA;gCACVC,GAAAA,EAAK,CAAA;gCACLC,UAAAA,EAAW,QAAA;gCACXP,cAAAA,EAAe,QAAA;gCACftD,KAAAA,EAAM,MAAA;gCACN8C,WAAAA,EAAa,CAAA;gCACbC,YAAAA,EAAc,CAAA;;kDAEdpD,cAAA,CAACuB,mBAAAA,EAAAA;wCACCC,UAAAA,EAAYA,UAAAA;wCACZC,IAAAA,EAAMA,IAAAA;wCACNC,WAAAA,EAAaA;;kDAGf1B,cAAA,CAACmE,oBAAAA,EAAAA;AAAQC,wCAAAA,KAAAA,EAAO/B,aAAAA,CAAc;4CAAEO,EAAAA,EAAIU,GAAAA;AAAKT,4CAAAA,cAAAA,EAAgBnB,WAAAA,IAAe4B;AAAI,yCAAA,CAAA;AAC1E,wCAAA,QAAA,gBAAAtD,cAAA,CAACqE,uBAAAA,EAAAA;4CAAWlC,OAAAA,EAAQ,IAAA;4CAAKmC,UAAAA,EAAW,MAAA;4CAAOC,QAAQ,EAAA,IAAA;4CAAClE,KAAAA,EAAM,MAAA;sDACvDgC,aAAAA,CAAc;gDAAEO,EAAAA,EAAIU,GAAAA;AAAKT,gDAAAA,cAAAA,EAAgBnB,WAAAA,IAAe4B;AAAI,6CAAA;;;;;AA5B9DA,yBAAAA,EAAAA,GAAAA,CAAAA;AAkCX,oBAAA,CAAA;;;;;AAKV;AAEA,MAAMP,0BAAAA,GAA6ByB,uBAAAA,CAAOjC,sBAAAA,CAAU3B,OAAO,CAAC;;AAE5D,CAAC;AAED;;;;;IAMA,MAAMoC,IAAAA,GACJyB,OAAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,MAAA,GACrBH,uBAAAA,CAAOtE,gBAAAA,CAAI;;;;;QAKT,EAAE,CAAC,EAAE0E,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,MAAM,CAAC;;;;MAI5C,CAAC,GACDN,uBAAAA,CAAOtE,gBAAAA,CAAI;;;;;QAKT,EAAE,CAAC,EAAE0E,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,MAAM,CAAC;;;MAG5C,CAAC;AAEP,MAAMrB,YAAAA,GAAee,uBAAAA,CAAgCT,iBAAAA,CAAK;SACjD,EAAE,CAAC,EAAEa,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAACC,UAAU,CAAC;;;;4BAItB,EAAE,CAACC,KAAAA,GAAUA,KAAAA,CAAML,KAAK,CAACM,MAAM,CAACC,OAAO,CAACC,WAAW,CAAC;;;;;sBAK1D,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAACM,UAAU,CAAC;gBAC/C,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAACO,UAAU,CAAC;WAC9C,EAAE,CAAC,EAAEV,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAACQ,UAAU,CAAC;;AAEpD,CAAC;;;;"}
+{"version":3,"file":"ComponentCategory.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Accordion,\n  Box,\n  Flex,\n  FlexComponent,\n  Menu,\n  Popover,\n  Tooltip,\n  Typography,\n} from '@strapi/design-system';\nimport upperFirst from 'lodash/upperFirst';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { ComponentIcon } from '../../../../../components/ComponentIcon';\nimport { resolvePreviewImageUrl } from '../../../../../utils/previewImage';\nimport { AddComponentMenuContent } from '../Component/AddComponentMenu';\n\nimport type { Struct } from '@strapi/types';\n\nconst EMPTY_COMPONENTS: NonNullable<ComponentCategoryProps['components']> = [];\n\ninterface ComponentCategoryProps {\n  category: string;\n  components?: Array<{\n    uid: string;\n    displayName: string;\n    icon?: string;\n    preview?: Struct.PreviewImageValue;\n  }>;\n  onAddComponent: (componentUid: string) => () => void;\n  /**\n   * When set, picking a component offers to add it empty or to copy it from another entry.\n   */\n  onCopyComponent?: (componentUid: string) => () => void;\n  variant?: Accordion.Variant;\n}\n\ninterface ComponentPreviewImageProps {\n  src: string;\n  alt: string;\n  onError?: React.ReactEventHandler<HTMLImageElement>;\n}\n\n/**\n * Renders a small preview thumbnail inside the component picker tile and, on hover,\n * a larger portaled preview so authors can read the component at a glance without picking it.\n * Uses a controlled Popover anchored to the thumbnail — the content is portaled, so it escapes\n * the accordion's overflow clipping.\n */\nconst ComponentPreviewImage = ({ src, alt, onError }: ComponentPreviewImageProps) => {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <Popover.Root open={open} onOpenChange={setOpen}>\n      <Popover.Anchor>\n        <Box\n          tag=\"img\"\n          src={src}\n          alt={alt}\n          loading=\"lazy\"\n          width=\"100%\"\n          height=\"5.2rem\"\n          hasRadius\n          style={{ objectFit: 'cover' }}\n          onMouseEnter={() => setOpen(true)}\n          onMouseLeave={() => setOpen(false)}\n          onError={onError}\n        />\n      </Popover.Anchor>\n      <Popover.Content\n        side=\"top\"\n        sideOffset={4}\n        onOpenAutoFocus={(e) => e.preventDefault()}\n        style={{ pointerEvents: 'none' }}\n      >\n        <Box padding={2}>\n          <Box\n            tag=\"img\"\n            src={src}\n            alt={alt}\n            hasRadius\n            style={{\n              display: 'block',\n              maxWidth: 'min(60rem, 90vw)',\n              maxHeight: 'min(45rem, 80vh)',\n              objectFit: 'contain',\n            }}\n          />\n        </Box>\n      </Popover.Content>\n    </Popover.Root>\n  );\n};\n\ninterface ComponentTileVisualProps {\n  previewUrl?: string;\n  icon?: string;\n  displayName: string;\n}\n\n/**\n * Holds per-tile load-error state: when the preview image fails to load (missing file,\n * unreachable CDN…), the tile falls back to the component icon instead of a broken image.\n */\nconst ComponentTileVisual = ({ previewUrl, icon, displayName }: ComponentTileVisualProps) => {\n  const [hasLoadError, setHasLoadError] = React.useState(false);\n\n  if (!previewUrl || hasLoadError) {\n    return <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />;\n  }\n\n  return (\n    <ComponentPreviewImage\n      src={previewUrl}\n      alt={displayName}\n      onError={() => setHasLoadError(true)}\n    />\n  );\n};\n\nconst ComponentCategory = ({\n  category,\n  components = EMPTY_COMPONENTS,\n  variant = 'primary',\n  onAddComponent,\n  onCopyComponent,\n}: ComponentCategoryProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Accordion.Item value={category}>\n      <Accordion.Header variant={variant}>\n        <Accordion.Trigger>\n          {formatMessage({ id: category, defaultMessage: upperFirst(category) })}\n        </Accordion.Trigger>\n      </Accordion.Header>\n      <ResponsiveAccordionContent>\n        <Grid paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>\n          {components.map(({ uid, displayName, icon, preview }) => {\n            const previewUrl = resolvePreviewImageUrl(preview);\n            const name = formatMessage({ id: uid, defaultMessage: displayName ?? uid });\n\n            const tile = (\n              <Flex\n                tag=\"span\"\n                direction=\"column\"\n                gap={1}\n                alignItems=\"center\"\n                justifyContent=\"center\"\n                width=\"100%\"\n                paddingLeft={2}\n                paddingRight={2}\n              >\n                <ComponentTileVisual\n                  previewUrl={previewUrl}\n                  icon={icon}\n                  displayName={displayName}\n                />\n\n                <Tooltip label={name}>\n                  <Typography tag=\"span\" variant=\"pi\" fontWeight=\"bold\" ellipsis width=\"100%\">\n                    {name}\n                  </Typography>\n                </Tooltip>\n              </Flex>\n            );\n\n            if (onCopyComponent) {\n              return (\n                <Menu.Root key={uid}>\n                  <ComponentMenuTrigger endIcon={null}>{tile}</ComponentMenuTrigger>\n                  <AddComponentMenuContent\n                    kind=\"component\"\n                    onAddEmpty={onAddComponent(uid)}\n                    onCopy={onCopyComponent(uid)}\n                  />\n                </Menu.Root>\n              );\n            }\n\n            return (\n              <ComponentBox\n                key={uid}\n                tag=\"button\"\n                type=\"button\"\n                background=\"neutral100\"\n                justifyContent=\"center\"\n                onClick={onAddComponent(uid)}\n                hasRadius\n                height=\"8.4rem\"\n                shrink={0}\n                borderColor=\"neutral200\"\n              >\n                {tile}\n              </ComponentBox>\n            );\n          })}\n        </Grid>\n      </ResponsiveAccordionContent>\n    </Accordion.Item>\n  );\n};\n\nconst ResponsiveAccordionContent = styled(Accordion.Content)`\n  container-type: inline-size;\n`;\n\n/**\n * TODO:\n * JSDOM cannot handle container queries.\n * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n * for failing to parse the stylesheet.\n */\nconst Grid =\n  process.env.NODE_ENV !== 'test'\n    ? styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-template-columns: repeat(auto-fill, 14rem);\n          grid-gap: 4px;\n        }\n      `\n    : styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-gap: 4px;\n        }\n      `;\n\nconst ComponentBox = styled<FlexComponent<'button'>>(Flex)`\n  color: ${({ theme }) => theme.colors.neutral600};\n  cursor: pointer;\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\n  }\n\n  &:focus,\n  &:hover {\n    border: 1px solid ${({ theme }) => theme.colors.primary200};\n    background: ${({ theme }) => theme.colors.primary100};\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\n/**\n * Same tile as `ComponentBox`, as the trigger of the menu offering to add the component empty or\n * to copy it from another entry. The trigger is a button of the design system, hence the\n * overrides.\n */\nconst ComponentMenuTrigger = styled(Menu.Trigger)`\n  && {\n    width: 100%;\n    height: 8.4rem;\n    padding: 0;\n    justify-content: center;\n    border: 1px solid ${({ theme }) => theme.colors.neutral200};\n    border-radius: ${({ theme }) => theme.borderRadius};\n    background: ${({ theme }) => theme.colors.neutral100};\n    color: ${({ theme }) => theme.colors.neutral600};\n  }\n\n  /* the wrapper of the tile content */\n  && > span {\n    flex: 1;\n    min-width: 0;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\n  }\n\n  &&:focus,\n  &&:hover,\n  &&[data-state='open'] {\n    border-color: ${({ theme }) => theme.colors.primary200};\n    background: ${({ theme }) => theme.colors.primary100};\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\nexport { ComponentCategory };\nexport type { ComponentCategoryProps };\n"],"names":["EMPTY_COMPONENTS","ComponentPreviewImage","src","alt","onError","open","setOpen","React","useState","_jsxs","Popover","Root","onOpenChange","_jsx","Anchor","Box","tag","loading","width","height","hasRadius","style","objectFit","onMouseEnter","onMouseLeave","Content","side","sideOffset","onOpenAutoFocus","e","preventDefault","pointerEvents","padding","display","maxWidth","maxHeight","ComponentTileVisual","previewUrl","icon","displayName","hasLoadError","setHasLoadError","ComponentIcon","color","background","ComponentCategory","category","components","variant","onAddComponent","onCopyComponent","formatMessage","useIntl","Accordion","Item","value","Header","Trigger","id","defaultMessage","upperFirst","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","preview","resolvePreviewImageUrl","name","tile","Flex","direction","gap","alignItems","justifyContent","Tooltip","label","Typography","fontWeight","ellipsis","Menu","ComponentMenuTrigger","endIcon","AddComponentMenuContent","kind","onAddEmpty","onCopy","ComponentBox","type","onClick","shrink","borderColor","styled","process","env","NODE_ENV","theme","breakpoints","medium","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600","neutral200","borderRadius","neutral100"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.mjs

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Accordion, Box, Flex, Tooltip, Typography, Popover } from '@strapi/design-system';
+import { Accordion, Box, Flex, Menu, Tooltip, Typography, Popover } from '@strapi/design-system';
 import upperFirst from 'lodash/upperFirst';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
 import { ComponentIcon } from '../../../../../components/ComponentIcon.mjs';
 import { resolvePreviewImageUrl } from '../../../../../utils/previewImage.mjs';
+import { AddComponentMenuContent } from '../Component/AddComponentMenu.mjs';
 
 const EMPTY_COMPONENTS = [];
 /**
@@ -80,7 +81,7 @@ const EMPTY_COMPONENTS = [];
         onError: ()=>setHasLoadError(true)
     });
 };
-const ComponentCategory = ({ category, components = EMPTY_COMPONENTS, variant = 'primary', onAddComponent })=>{
+const ComponentCategory = ({ category, components = EMPTY_COMPONENTS, variant = 'primary', onAddComponent, onCopyComponent })=>{
     const { formatMessage } = useIntl();
     return /*#__PURE__*/ jsxs(Accordion.Item, {
         value: category,
@@ -102,6 +103,53 @@ const ComponentCategory = ({ category, components = EMPTY_COMPONENTS, variant =
                     paddingRight: 3,
                     children: components.map(({ uid, displayName, icon, preview })=>{
                         const previewUrl = resolvePreviewImageUrl(preview);
+                        const name = formatMessage({
+                            id: uid,
+                            defaultMessage: displayName ?? uid
+                        });
+                        const tile = /*#__PURE__*/ jsxs(Flex, {
+                            tag: "span",
+                            direction: "column",
+                            gap: 1,
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: "100%",
+                            paddingLeft: 2,
+                            paddingRight: 2,
+                            children: [
+                                /*#__PURE__*/ jsx(ComponentTileVisual, {
+                                    previewUrl: previewUrl,
+                                    icon: icon,
+                                    displayName: displayName
+                                }),
+                                /*#__PURE__*/ jsx(Tooltip, {
+                                    label: name,
+                                    children: /*#__PURE__*/ jsx(Typography, {
+                                        tag: "span",
+                                        variant: "pi",
+                                        fontWeight: "bold",
+                                        ellipsis: true,
+                                        width: "100%",
+                                        children: name
+                                    })
+                                })
+                            ]
+                        });
+                        if (onCopyComponent) {
+                            return /*#__PURE__*/ jsxs(Menu.Root, {
+                                children: [
+                                    /*#__PURE__*/ jsx(ComponentMenuTrigger, {
+                                        endIcon: null,
+                                        children: tile
+                                    }),
+                                    /*#__PURE__*/ jsx(AddComponentMenuContent, {
+                                        kind: "component",
+                                        onAddEmpty: onAddComponent(uid),
+                                        onCopy: onCopyComponent(uid)
+                                    })
+                                ]
+                            }, uid);
+                        }
                         return /*#__PURE__*/ jsx(ComponentBox, {
                             tag: "button",
                             type: "button",
@@ -112,38 +160,7 @@ const ComponentCategory = ({ category, components = EMPTY_COMPONENTS, variant =
                             height: "8.4rem",
                             shrink: 0,
                             borderColor: "neutral200",
-                            children: /*#__PURE__*/ jsxs(Flex, {
-                                direction: "column",
-                                gap: 1,
-                                alignItems: "center",
-                                justifyContent: "center",
-                                width: "100%",
-                                paddingLeft: 2,
-                                paddingRight: 2,
-                                children: [
-                                    /*#__PURE__*/ jsx(ComponentTileVisual, {
-                                        previewUrl: previewUrl,
-                                        icon: icon,
-                                        displayName: displayName
-                                    }),
-                                    /*#__PURE__*/ jsx(Tooltip, {
-                                        label: formatMessage({
-                                            id: uid,
-                                            defaultMessage: displayName ?? uid
-                                        }),
-                                        children: /*#__PURE__*/ jsx(Typography, {
-                                            variant: "pi",
-                                            fontWeight: "bold",
-                                            ellipsis: true,
-                                            width: "100%",
-                                            children: formatMessage({
-                                                id: uid,
-                                                defaultMessage: displayName ?? uid
-                                            })
-                                        })
-                                    })
-                                ]
-                            })
+                            children: tile
                         }, uid);
                     })
                 })
@@ -192,6 +209,40 @@ const ComponentBox = styled(Flex)`
     color: ${({ theme })=>theme.colors.primary600};
   }
 `;
+/**
+ * Same tile as `ComponentBox`, as the trigger of the menu offering to add the component empty or
+ * to copy it from another entry. The trigger is a button of the design system, hence the
+ * overrides.
+ */ const ComponentMenuTrigger = styled(Menu.Trigger)`
+  && {
+    width: 100%;
+    height: 8.4rem;
+    padding: 0;
+    justify-content: center;
+    border: 1px solid ${({ theme })=>theme.colors.neutral200};
+    border-radius: ${({ theme })=>theme.borderRadius};
+    background: ${({ theme })=>theme.colors.neutral100};
+    color: ${({ theme })=>theme.colors.neutral600};
+  }
+
+  /* the wrapper of the tile content */
+  && > span {
+    flex: 1;
+    min-width: 0;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: color 120ms ${(props)=>props.theme.motion.easings.easeOutQuad};
+  }
+
+  &&:focus,
+  &&:hover,
+  &&[data-state='open'] {
+    border-color: ${({ theme })=>theme.colors.primary200};
+    background: ${({ theme })=>theme.colors.primary100};
+    color: ${({ theme })=>theme.colors.primary600};
+  }
+`;
 
 export { ComponentCategory };
 //# sourceMappingURL=ComponentCategory.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ComponentCategory.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Accordion,\n  Box,\n  Flex,\n  FlexComponent,\n  Popover,\n  Tooltip,\n  Typography,\n} from '@strapi/design-system';\nimport upperFirst from 'lodash/upperFirst';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { ComponentIcon } from '../../../../../components/ComponentIcon';\nimport { resolvePreviewImageUrl } from '../../../../../utils/previewImage';\n\nimport type { Struct } from '@strapi/types';\n\nconst EMPTY_COMPONENTS: NonNullable<ComponentCategoryProps['components']> = [];\n\ninterface ComponentCategoryProps {\n  category: string;\n  components?: Array<{\n    uid: string;\n    displayName: string;\n    icon?: string;\n    preview?: Struct.PreviewImageValue;\n  }>;\n  onAddComponent: (\n    componentUid: string\n  ) => React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\n  variant?: Accordion.Variant;\n}\n\ninterface ComponentPreviewImageProps {\n  src: string;\n  alt: string;\n  onError?: React.ReactEventHandler<HTMLImageElement>;\n}\n\n/**\n * Renders a small preview thumbnail inside the component picker tile and, on hover,\n * a larger portaled preview so authors can read the component at a glance without picking it.\n * Uses a controlled Popover anchored to the thumbnail — the content is portaled, so it escapes\n * the accordion's overflow clipping.\n */\nconst ComponentPreviewImage = ({ src, alt, onError }: ComponentPreviewImageProps) => {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <Popover.Root open={open} onOpenChange={setOpen}>\n      <Popover.Anchor>\n        <Box\n          tag=\"img\"\n          src={src}\n          alt={alt}\n          loading=\"lazy\"\n          width=\"100%\"\n          height=\"5.2rem\"\n          hasRadius\n          style={{ objectFit: 'cover' }}\n          onMouseEnter={() => setOpen(true)}\n          onMouseLeave={() => setOpen(false)}\n          onError={onError}\n        />\n      </Popover.Anchor>\n      <Popover.Content\n        side=\"top\"\n        sideOffset={4}\n        onOpenAutoFocus={(e) => e.preventDefault()}\n        style={{ pointerEvents: 'none' }}\n      >\n        <Box padding={2}>\n          <Box\n            tag=\"img\"\n            src={src}\n            alt={alt}\n            hasRadius\n            style={{\n              display: 'block',\n              maxWidth: 'min(60rem, 90vw)',\n              maxHeight: 'min(45rem, 80vh)',\n              objectFit: 'contain',\n            }}\n          />\n        </Box>\n      </Popover.Content>\n    </Popover.Root>\n  );\n};\n\ninterface ComponentTileVisualProps {\n  previewUrl?: string;\n  icon?: string;\n  displayName: string;\n}\n\n/**\n * Holds per-tile load-error state: when the preview image fails to load (missing file,\n * unreachable CDN…), the tile falls back to the component icon instead of a broken image.\n */\nconst ComponentTileVisual = ({ previewUrl, icon, displayName }: ComponentTileVisualProps) => {\n  const [hasLoadError, setHasLoadError] = React.useState(false);\n\n  if (!previewUrl || hasLoadError) {\n    return <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />;\n  }\n\n  return (\n    <ComponentPreviewImage\n      src={previewUrl}\n      alt={displayName}\n      onError={() => setHasLoadError(true)}\n    />\n  );\n};\n\nconst ComponentCategory = ({\n  category,\n  components = EMPTY_COMPONENTS,\n  variant = 'primary',\n  onAddComponent,\n}: ComponentCategoryProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Accordion.Item value={category}>\n      <Accordion.Header variant={variant}>\n        <Accordion.Trigger>\n          {formatMessage({ id: category, defaultMessage: upperFirst(category) })}\n        </Accordion.Trigger>\n      </Accordion.Header>\n      <ResponsiveAccordionContent>\n        <Grid paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>\n          {components.map(({ uid, displayName, icon, preview }) => {\n            const previewUrl = resolvePreviewImageUrl(preview);\n\n            return (\n              <ComponentBox\n                key={uid}\n                tag=\"button\"\n                type=\"button\"\n                background=\"neutral100\"\n                justifyContent=\"center\"\n                onClick={onAddComponent(uid)}\n                hasRadius\n                height=\"8.4rem\"\n                shrink={0}\n                borderColor=\"neutral200\"\n              >\n                <Flex\n                  direction=\"column\"\n                  gap={1}\n                  alignItems=\"center\"\n                  justifyContent=\"center\"\n                  width=\"100%\"\n                  paddingLeft={2}\n                  paddingRight={2}\n                >\n                  <ComponentTileVisual\n                    previewUrl={previewUrl}\n                    icon={icon}\n                    displayName={displayName}\n                  />\n\n                  <Tooltip label={formatMessage({ id: uid, defaultMessage: displayName ?? uid })}>\n                    <Typography variant=\"pi\" fontWeight=\"bold\" ellipsis width=\"100%\">\n                      {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\n                    </Typography>\n                  </Tooltip>\n                </Flex>\n              </ComponentBox>\n            );\n          })}\n        </Grid>\n      </ResponsiveAccordionContent>\n    </Accordion.Item>\n  );\n};\n\nconst ResponsiveAccordionContent = styled(Accordion.Content)`\n  container-type: inline-size;\n`;\n\n/**\n * TODO:\n * JSDOM cannot handle container queries.\n * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n * for failing to parse the stylesheet.\n */\nconst Grid =\n  process.env.NODE_ENV !== 'test'\n    ? styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-template-columns: repeat(auto-fill, 14rem);\n          grid-gap: 4px;\n        }\n      `\n    : styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-gap: 4px;\n        }\n      `;\n\nconst ComponentBox = styled<FlexComponent<'button'>>(Flex)`\n  color: ${({ theme }) => theme.colors.neutral600};\n  cursor: pointer;\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\n  }\n\n  &:focus,\n  &:hover {\n    border: 1px solid ${({ theme }) => theme.colors.primary200};\n    background: ${({ theme }) => theme.colors.primary100};\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\nexport { ComponentCategory };\nexport type { ComponentCategoryProps };\n"],"names":["EMPTY_COMPONENTS","ComponentPreviewImage","src","alt","onError","open","setOpen","React","useState","_jsxs","Popover","Root","onOpenChange","_jsx","Anchor","Box","tag","loading","width","height","hasRadius","style","objectFit","onMouseEnter","onMouseLeave","Content","side","sideOffset","onOpenAutoFocus","e","preventDefault","pointerEvents","padding","display","maxWidth","maxHeight","ComponentTileVisual","previewUrl","icon","displayName","hasLoadError","setHasLoadError","ComponentIcon","color","background","ComponentCategory","category","components","variant","onAddComponent","formatMessage","useIntl","Accordion","Item","value","Header","Trigger","id","defaultMessage","upperFirst","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","preview","resolvePreviewImageUrl","ComponentBox","type","justifyContent","onClick","shrink","borderColor","Flex","direction","gap","alignItems","Tooltip","label","Typography","fontWeight","ellipsis","styled","process","env","NODE_ENV","theme","breakpoints","medium","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600"],"mappings":"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"}
+{"version":3,"file":"ComponentCategory.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Accordion,\n  Box,\n  Flex,\n  FlexComponent,\n  Menu,\n  Popover,\n  Tooltip,\n  Typography,\n} from '@strapi/design-system';\nimport upperFirst from 'lodash/upperFirst';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { ComponentIcon } from '../../../../../components/ComponentIcon';\nimport { resolvePreviewImageUrl } from '../../../../../utils/previewImage';\nimport { AddComponentMenuContent } from '../Component/AddComponentMenu';\n\nimport type { Struct } from '@strapi/types';\n\nconst EMPTY_COMPONENTS: NonNullable<ComponentCategoryProps['components']> = [];\n\ninterface ComponentCategoryProps {\n  category: string;\n  components?: Array<{\n    uid: string;\n    displayName: string;\n    icon?: string;\n    preview?: Struct.PreviewImageValue;\n  }>;\n  onAddComponent: (componentUid: string) => () => void;\n  /**\n   * When set, picking a component offers to add it empty or to copy it from another entry.\n   */\n  onCopyComponent?: (componentUid: string) => () => void;\n  variant?: Accordion.Variant;\n}\n\ninterface ComponentPreviewImageProps {\n  src: string;\n  alt: string;\n  onError?: React.ReactEventHandler<HTMLImageElement>;\n}\n\n/**\n * Renders a small preview thumbnail inside the component picker tile and, on hover,\n * a larger portaled preview so authors can read the component at a glance without picking it.\n * Uses a controlled Popover anchored to the thumbnail — the content is portaled, so it escapes\n * the accordion's overflow clipping.\n */\nconst ComponentPreviewImage = ({ src, alt, onError }: ComponentPreviewImageProps) => {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <Popover.Root open={open} onOpenChange={setOpen}>\n      <Popover.Anchor>\n        <Box\n          tag=\"img\"\n          src={src}\n          alt={alt}\n          loading=\"lazy\"\n          width=\"100%\"\n          height=\"5.2rem\"\n          hasRadius\n          style={{ objectFit: 'cover' }}\n          onMouseEnter={() => setOpen(true)}\n          onMouseLeave={() => setOpen(false)}\n          onError={onError}\n        />\n      </Popover.Anchor>\n      <Popover.Content\n        side=\"top\"\n        sideOffset={4}\n        onOpenAutoFocus={(e) => e.preventDefault()}\n        style={{ pointerEvents: 'none' }}\n      >\n        <Box padding={2}>\n          <Box\n            tag=\"img\"\n            src={src}\n            alt={alt}\n            hasRadius\n            style={{\n              display: 'block',\n              maxWidth: 'min(60rem, 90vw)',\n              maxHeight: 'min(45rem, 80vh)',\n              objectFit: 'contain',\n            }}\n          />\n        </Box>\n      </Popover.Content>\n    </Popover.Root>\n  );\n};\n\ninterface ComponentTileVisualProps {\n  previewUrl?: string;\n  icon?: string;\n  displayName: string;\n}\n\n/**\n * Holds per-tile load-error state: when the preview image fails to load (missing file,\n * unreachable CDN…), the tile falls back to the component icon instead of a broken image.\n */\nconst ComponentTileVisual = ({ previewUrl, icon, displayName }: ComponentTileVisualProps) => {\n  const [hasLoadError, setHasLoadError] = React.useState(false);\n\n  if (!previewUrl || hasLoadError) {\n    return <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />;\n  }\n\n  return (\n    <ComponentPreviewImage\n      src={previewUrl}\n      alt={displayName}\n      onError={() => setHasLoadError(true)}\n    />\n  );\n};\n\nconst ComponentCategory = ({\n  category,\n  components = EMPTY_COMPONENTS,\n  variant = 'primary',\n  onAddComponent,\n  onCopyComponent,\n}: ComponentCategoryProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Accordion.Item value={category}>\n      <Accordion.Header variant={variant}>\n        <Accordion.Trigger>\n          {formatMessage({ id: category, defaultMessage: upperFirst(category) })}\n        </Accordion.Trigger>\n      </Accordion.Header>\n      <ResponsiveAccordionContent>\n        <Grid paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>\n          {components.map(({ uid, displayName, icon, preview }) => {\n            const previewUrl = resolvePreviewImageUrl(preview);\n            const name = formatMessage({ id: uid, defaultMessage: displayName ?? uid });\n\n            const tile = (\n              <Flex\n                tag=\"span\"\n                direction=\"column\"\n                gap={1}\n                alignItems=\"center\"\n                justifyContent=\"center\"\n                width=\"100%\"\n                paddingLeft={2}\n                paddingRight={2}\n              >\n                <ComponentTileVisual\n                  previewUrl={previewUrl}\n                  icon={icon}\n                  displayName={displayName}\n                />\n\n                <Tooltip label={name}>\n                  <Typography tag=\"span\" variant=\"pi\" fontWeight=\"bold\" ellipsis width=\"100%\">\n                    {name}\n                  </Typography>\n                </Tooltip>\n              </Flex>\n            );\n\n            if (onCopyComponent) {\n              return (\n                <Menu.Root key={uid}>\n                  <ComponentMenuTrigger endIcon={null}>{tile}</ComponentMenuTrigger>\n                  <AddComponentMenuContent\n                    kind=\"component\"\n                    onAddEmpty={onAddComponent(uid)}\n                    onCopy={onCopyComponent(uid)}\n                  />\n                </Menu.Root>\n              );\n            }\n\n            return (\n              <ComponentBox\n                key={uid}\n                tag=\"button\"\n                type=\"button\"\n                background=\"neutral100\"\n                justifyContent=\"center\"\n                onClick={onAddComponent(uid)}\n                hasRadius\n                height=\"8.4rem\"\n                shrink={0}\n                borderColor=\"neutral200\"\n              >\n                {tile}\n              </ComponentBox>\n            );\n          })}\n        </Grid>\n      </ResponsiveAccordionContent>\n    </Accordion.Item>\n  );\n};\n\nconst ResponsiveAccordionContent = styled(Accordion.Content)`\n  container-type: inline-size;\n`;\n\n/**\n * TODO:\n * JSDOM cannot handle container queries.\n * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n * for failing to parse the stylesheet.\n */\nconst Grid =\n  process.env.NODE_ENV !== 'test'\n    ? styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-template-columns: repeat(auto-fill, 14rem);\n          grid-gap: 4px;\n        }\n      `\n    : styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-gap: 4px;\n        }\n      `;\n\nconst ComponentBox = styled<FlexComponent<'button'>>(Flex)`\n  color: ${({ theme }) => theme.colors.neutral600};\n  cursor: pointer;\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\n  }\n\n  &:focus,\n  &:hover {\n    border: 1px solid ${({ theme }) => theme.colors.primary200};\n    background: ${({ theme }) => theme.colors.primary100};\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\n/**\n * Same tile as `ComponentBox`, as the trigger of the menu offering to add the component empty or\n * to copy it from another entry. The trigger is a button of the design system, hence the\n * overrides.\n */\nconst ComponentMenuTrigger = styled(Menu.Trigger)`\n  && {\n    width: 100%;\n    height: 8.4rem;\n    padding: 0;\n    justify-content: center;\n    border: 1px solid ${({ theme }) => theme.colors.neutral200};\n    border-radius: ${({ theme }) => theme.borderRadius};\n    background: ${({ theme }) => theme.colors.neutral100};\n    color: ${({ theme }) => theme.colors.neutral600};\n  }\n\n  /* the wrapper of the tile content */\n  && > span {\n    flex: 1;\n    min-width: 0;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\n  }\n\n  &&:focus,\n  &&:hover,\n  &&[data-state='open'] {\n    border-color: ${({ theme }) => theme.colors.primary200};\n    background: ${({ theme }) => theme.colors.primary100};\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\nexport { ComponentCategory };\nexport type { ComponentCategoryProps };\n"],"names":["EMPTY_COMPONENTS","ComponentPreviewImage","src","alt","onError","open","setOpen","React","useState","_jsxs","Popover","Root","onOpenChange","_jsx","Anchor","Box","tag","loading","width","height","hasRadius","style","objectFit","onMouseEnter","onMouseLeave","Content","side","sideOffset","onOpenAutoFocus","e","preventDefault","pointerEvents","padding","display","maxWidth","maxHeight","ComponentTileVisual","previewUrl","icon","displayName","hasLoadError","setHasLoadError","ComponentIcon","color","background","ComponentCategory","category","components","variant","onAddComponent","onCopyComponent","formatMessage","useIntl","Accordion","Item","value","Header","Trigger","id","defaultMessage","upperFirst","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","preview","resolvePreviewImageUrl","name","tile","Flex","direction","gap","alignItems","justifyContent","Tooltip","label","Typography","fontWeight","ellipsis","Menu","ComponentMenuTrigger","endIcon","AddComponentMenuContent","kind","onAddEmpty","onCopy","ComponentBox","type","onClick","shrink","borderColor","styled","process","env","NODE_ENV","theme","breakpoints","medium","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600","neutral200","borderRadius","neutral100"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentPicker.js

@@ -8,12 +8,15 @@ var translations = require('../../../../../utils/translations.js');
 var ComponentCategory = require('./ComponentCategory.js');
 
 const EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY = {};
-const ComponentPicker = ({ dynamicComponentsByCategory = EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY, isOpen, onClickAddComponent })=>{
+const ComponentPicker = ({ dynamicComponentsByCategory = EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY, isOpen, onClickAddComponent, onClickCopyComponent })=>{
     const { formatMessage } = reactIntl.useIntl();
     const isMobile = strapiAdmin.useIsMobile();
     const handleAddComponentToDz = (componentUid)=>()=>{
             onClickAddComponent(componentUid);
         };
+    const handleCopyComponentToDz = (componentUid)=>()=>{
+            onClickCopyComponent?.(componentUid);
+        };
     if (!isOpen) {
         return null;
     }
@@ -64,6 +67,7 @@ const ComponentPicker = ({ dynamicComponentsByCategory = EMPTY_DYNAMIC_COMPONENT
                             category: category,
                             components: components,
                             onAddComponent: handleAddComponentToDz,
+                            onCopyComponent: onClickCopyComponent ? handleCopyComponentToDz : undefined,
                             variant: index % 2 === 1 ? 'primary' : 'secondary'
                         }, category))
                 })

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentPicker.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentPicker.tsx"],"sourcesContent":["import { useIsMobile } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, Accordion, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { ComponentCategory, ComponentCategoryProps } from './ComponentCategory';\n\nconst EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY: NonNullable<\n  ComponentPickerProps['dynamicComponentsByCategory']\n> = {};\n\ninterface ComponentPickerProps {\n  dynamicComponentsByCategory?: Record<string, NonNullable<ComponentCategoryProps['components']>>;\n  isOpen?: boolean;\n  onClickAddComponent: (componentUid: string) => void;\n}\n\nconst ComponentPicker = ({\n  dynamicComponentsByCategory = EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY,\n  isOpen,\n  onClickAddComponent,\n}: ComponentPickerProps) => {\n  const { formatMessage } = useIntl();\n  const isMobile = useIsMobile();\n\n  const handleAddComponentToDz = (componentUid: string) => () => {\n    onClickAddComponent(componentUid);\n  };\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <Flex\n      paddingTop={{ initial: 0, medium: 6 }}\n      paddingBottom={{ initial: 0, medium: 6 }}\n      paddingLeft={{ initial: 0, medium: 5 }}\n      paddingRight={{ initial: 0, medium: 5 }}\n      background={isMobile ? 'transparent' : 'neutral0'}\n      shadow={isMobile ? 'none' : 'tableShadow'}\n      borderColor={isMobile ? 'transparent' : 'neutral150'}\n      hasRadius={!isMobile}\n      gap={{ initial: 4, medium: 2 }}\n      direction=\"column\"\n      alignItems=\"stretch\"\n    >\n      <Flex justifyContent=\"center\">\n        <Typography fontWeight=\"bold\" textColor=\"neutral600\" fontSize={1}>\n          {formatMessage({\n            id: getTranslation('components.DynamicZone.ComponentPicker-label'),\n            defaultMessage: 'Pick one component',\n          })}\n        </Typography>\n      </Flex>\n      <Box>\n        <Accordion.Root defaultValue={Object.keys(dynamicComponentsByCategory)[0]}>\n          {Object.entries(dynamicComponentsByCategory).map(([category, components], index) => (\n            <ComponentCategory\n              key={category}\n              category={category}\n              components={components}\n              onAddComponent={handleAddComponentToDz}\n              variant={index % 2 === 1 ? 'primary' : 'secondary'}\n            />\n          ))}\n        </Accordion.Root>\n      </Box>\n    </Flex>\n  );\n};\n\nexport { ComponentPicker };\nexport type { ComponentPickerProps };\n"],"names":["EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY","ComponentPicker","dynamicComponentsByCategory","isOpen","onClickAddComponent","formatMessage","useIntl","isMobile","useIsMobile","handleAddComponentToDz","componentUid","_jsxs","Flex","paddingTop","initial","medium","paddingBottom","paddingLeft","paddingRight","background","shadow","borderColor","hasRadius","gap","direction","alignItems","_jsx","justifyContent","Typography","fontWeight","textColor","fontSize","id","getTranslation","defaultMessage","Box","Accordion","Root","defaultValue","Object","keys","entries","map","category","components","index","ComponentCategory","onAddComponent","variant"],"mappings":";;;;;;;;;AAQA,MAAMA,uCAEF,EAAC;AAQL,MAAMC,eAAAA,GAAkB,CAAC,EACvBC,2BAAAA,GAA8BF,oCAAoC,EAClEG,MAAM,EACNC,mBAAmB,EACE,GAAA;IACrB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAAA,GAAWC,uBAAAA,EAAAA;IAEjB,MAAMC,sBAAAA,GAAyB,CAACC,YAAAA,GAAyB,IAAA;YACvDN,mBAAAA,CAAoBM,YAAAA,CAAAA;AACtB,QAAA,CAAA;AAEA,IAAA,IAAI,CAACP,MAAAA,EAAQ;QACX,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,qBACEQ,eAAA,CAACC,iBAAAA,EAAAA;QACCC,UAAAA,EAAY;YAAEC,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;QACpCC,aAAAA,EAAe;YAAEF,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;QACvCE,WAAAA,EAAa;YAAEH,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;QACrCG,YAAAA,EAAc;YAAEJ,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;AACtCI,QAAAA,UAAAA,EAAYZ,WAAW,aAAA,GAAgB,UAAA;AACvCa,QAAAA,MAAAA,EAAQb,WAAW,MAAA,GAAS,aAAA;AAC5Bc,QAAAA,WAAAA,EAAad,WAAW,aAAA,GAAgB,YAAA;AACxCe,QAAAA,SAAAA,EAAW,CAACf,QAAAA;QACZgB,GAAAA,EAAK;YAAET,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;QAC7BS,SAAAA,EAAU,QAAA;QACVC,UAAAA,EAAW,SAAA;;0BAEXC,cAAA,CAACd,iBAAAA,EAAAA;gBAAKe,cAAAA,EAAe,QAAA;AACnB,gBAAA,QAAA,gBAAAD,cAAA,CAACE,uBAAAA,EAAAA;oBAAWC,UAAAA,EAAW,MAAA;oBAAOC,SAAAA,EAAU,YAAA;oBAAaC,QAAAA,EAAU,CAAA;8BAC5D1B,aAAAA,CAAc;AACb2B,wBAAAA,EAAAA,EAAIC,2BAAAA,CAAe,8CAAA,CAAA;wBACnBC,cAAAA,EAAgB;AAClB,qBAAA;;;0BAGJR,cAAA,CAACS,gBAAAA,EAAAA;wCACCT,cAAA,CAACU,uBAAUC,IAAI,EAAA;AAACC,oBAAAA,YAAAA,EAAcC,MAAAA,CAAOC,IAAI,CAACtC,2BAAAA,CAA4B,CAAC,CAAA,CAAE;8BACtEqC,MAAAA,CAAOE,OAAO,CAACvC,2BAAAA,CAAAA,CAA6BwC,GAAG,CAAC,CAAC,CAACC,QAAAA,EAAUC,UAAAA,CAAW,EAAEC,KAAAA,iBACxEnB,cAAA,CAACoB,mCAAAA,EAAAA;4BAECH,QAAAA,EAAUA,QAAAA;4BACVC,UAAAA,EAAYA,UAAAA;4BACZG,cAAAA,EAAgBtC,sBAAAA;4BAChBuC,OAAAA,EAASH,KAAAA,GAAQ,CAAA,KAAM,CAAA,GAAI,SAAA,GAAY;AAJlCF,yBAAAA,EAAAA,QAAAA,CAAAA;;;;;AAWnB;;;;"}
+{"version":3,"file":"ComponentPicker.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentPicker.tsx"],"sourcesContent":["import { useIsMobile } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, Accordion, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { ComponentCategory, ComponentCategoryProps } from './ComponentCategory';\n\nconst EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY: NonNullable<\n  ComponentPickerProps['dynamicComponentsByCategory']\n> = {};\n\ninterface ComponentPickerProps {\n  dynamicComponentsByCategory?: Record<string, NonNullable<ComponentCategoryProps['components']>>;\n  isOpen?: boolean;\n  onClickAddComponent: (componentUid: string) => void;\n  onClickCopyComponent?: (componentUid: string) => void;\n}\n\nconst ComponentPicker = ({\n  dynamicComponentsByCategory = EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY,\n  isOpen,\n  onClickAddComponent,\n  onClickCopyComponent,\n}: ComponentPickerProps) => {\n  const { formatMessage } = useIntl();\n  const isMobile = useIsMobile();\n\n  const handleAddComponentToDz = (componentUid: string) => () => {\n    onClickAddComponent(componentUid);\n  };\n\n  const handleCopyComponentToDz = (componentUid: string) => () => {\n    onClickCopyComponent?.(componentUid);\n  };\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <Flex\n      paddingTop={{ initial: 0, medium: 6 }}\n      paddingBottom={{ initial: 0, medium: 6 }}\n      paddingLeft={{ initial: 0, medium: 5 }}\n      paddingRight={{ initial: 0, medium: 5 }}\n      background={isMobile ? 'transparent' : 'neutral0'}\n      shadow={isMobile ? 'none' : 'tableShadow'}\n      borderColor={isMobile ? 'transparent' : 'neutral150'}\n      hasRadius={!isMobile}\n      gap={{ initial: 4, medium: 2 }}\n      direction=\"column\"\n      alignItems=\"stretch\"\n    >\n      <Flex justifyContent=\"center\">\n        <Typography fontWeight=\"bold\" textColor=\"neutral600\" fontSize={1}>\n          {formatMessage({\n            id: getTranslation('components.DynamicZone.ComponentPicker-label'),\n            defaultMessage: 'Pick one component',\n          })}\n        </Typography>\n      </Flex>\n      <Box>\n        <Accordion.Root defaultValue={Object.keys(dynamicComponentsByCategory)[0]}>\n          {Object.entries(dynamicComponentsByCategory).map(([category, components], index) => (\n            <ComponentCategory\n              key={category}\n              category={category}\n              components={components}\n              onAddComponent={handleAddComponentToDz}\n              onCopyComponent={onClickCopyComponent ? handleCopyComponentToDz : undefined}\n              variant={index % 2 === 1 ? 'primary' : 'secondary'}\n            />\n          ))}\n        </Accordion.Root>\n      </Box>\n    </Flex>\n  );\n};\n\nexport { ComponentPicker };\nexport type { ComponentPickerProps };\n"],"names":["EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY","ComponentPicker","dynamicComponentsByCategory","isOpen","onClickAddComponent","onClickCopyComponent","formatMessage","useIntl","isMobile","useIsMobile","handleAddComponentToDz","componentUid","handleCopyComponentToDz","_jsxs","Flex","paddingTop","initial","medium","paddingBottom","paddingLeft","paddingRight","background","shadow","borderColor","hasRadius","gap","direction","alignItems","_jsx","justifyContent","Typography","fontWeight","textColor","fontSize","id","getTranslation","defaultMessage","Box","Accordion","Root","defaultValue","Object","keys","entries","map","category","components","index","ComponentCategory","onAddComponent","onCopyComponent","undefined","variant"],"mappings":";;;;;;;;;AAQA,MAAMA,uCAEF,EAAC;AASL,MAAMC,eAAAA,GAAkB,CAAC,EACvBC,2BAAAA,GAA8BF,oCAAoC,EAClEG,MAAM,EACNC,mBAAmB,EACnBC,oBAAoB,EACC,GAAA;IACrB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAAA,GAAWC,uBAAAA,EAAAA;IAEjB,MAAMC,sBAAAA,GAAyB,CAACC,YAAAA,GAAyB,IAAA;YACvDP,mBAAAA,CAAoBO,YAAAA,CAAAA;AACtB,QAAA,CAAA;IAEA,MAAMC,uBAAAA,GAA0B,CAACD,YAAAA,GAAyB,IAAA;YACxDN,oBAAAA,GAAuBM,YAAAA,CAAAA;AACzB,QAAA,CAAA;AAEA,IAAA,IAAI,CAACR,MAAAA,EAAQ;QACX,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,qBACEU,eAAA,CAACC,iBAAAA,EAAAA;QACCC,UAAAA,EAAY;YAAEC,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;QACpCC,aAAAA,EAAe;YAAEF,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;QACvCE,WAAAA,EAAa;YAAEH,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;QACrCG,YAAAA,EAAc;YAAEJ,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;AACtCI,QAAAA,UAAAA,EAAYb,WAAW,aAAA,GAAgB,UAAA;AACvCc,QAAAA,MAAAA,EAAQd,WAAW,MAAA,GAAS,aAAA;AAC5Be,QAAAA,WAAAA,EAAaf,WAAW,aAAA,GAAgB,YAAA;AACxCgB,QAAAA,SAAAA,EAAW,CAAChB,QAAAA;QACZiB,GAAAA,EAAK;YAAET,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;QAC7BS,SAAAA,EAAU,QAAA;QACVC,UAAAA,EAAW,SAAA;;0BAEXC,cAAA,CAACd,iBAAAA,EAAAA;gBAAKe,cAAAA,EAAe,QAAA;AACnB,gBAAA,QAAA,gBAAAD,cAAA,CAACE,uBAAAA,EAAAA;oBAAWC,UAAAA,EAAW,MAAA;oBAAOC,SAAAA,EAAU,YAAA;oBAAaC,QAAAA,EAAU,CAAA;8BAC5D3B,aAAAA,CAAc;AACb4B,wBAAAA,EAAAA,EAAIC,2BAAAA,CAAe,8CAAA,CAAA;wBACnBC,cAAAA,EAAgB;AAClB,qBAAA;;;0BAGJR,cAAA,CAACS,gBAAAA,EAAAA;wCACCT,cAAA,CAACU,uBAAUC,IAAI,EAAA;AAACC,oBAAAA,YAAAA,EAAcC,MAAAA,CAAOC,IAAI,CAACxC,2BAAAA,CAA4B,CAAC,CAAA,CAAE;8BACtEuC,MAAAA,CAAOE,OAAO,CAACzC,2BAAAA,CAAAA,CAA6B0C,GAAG,CAAC,CAAC,CAACC,QAAAA,EAAUC,UAAAA,CAAW,EAAEC,KAAAA,iBACxEnB,cAAA,CAACoB,mCAAAA,EAAAA;4BAECH,QAAAA,EAAUA,QAAAA;4BACVC,UAAAA,EAAYA,UAAAA;4BACZG,cAAAA,EAAgBvC,sBAAAA;AAChBwC,4BAAAA,eAAAA,EAAiB7C,uBAAuBO,uBAAAA,GAA0BuC,SAAAA;4BAClEC,OAAAA,EAASL,KAAAA,GAAQ,CAAA,KAAM,CAAA,GAAI,SAAA,GAAY;AALlCF,yBAAAA,EAAAA,QAAAA,CAAAA;;;;;AAYnB;;;;"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentPicker.mjs

@@ -6,12 +6,15 @@ import { getTranslation } from '../../../../../utils/translations.mjs';
 import { ComponentCategory } from './ComponentCategory.mjs';
 
 const EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY = {};
-const ComponentPicker = ({ dynamicComponentsByCategory = EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY, isOpen, onClickAddComponent })=>{
+const ComponentPicker = ({ dynamicComponentsByCategory = EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY, isOpen, onClickAddComponent, onClickCopyComponent })=>{
     const { formatMessage } = useIntl();
     const isMobile = useIsMobile();
     const handleAddComponentToDz = (componentUid)=>()=>{
             onClickAddComponent(componentUid);
         };
+    const handleCopyComponentToDz = (componentUid)=>()=>{
+            onClickCopyComponent?.(componentUid);
+        };
     if (!isOpen) {
         return null;
     }
@@ -62,6 +65,7 @@ const ComponentPicker = ({ dynamicComponentsByCategory = EMPTY_DYNAMIC_COMPONENT
                             category: category,
                             components: components,
                             onAddComponent: handleAddComponentToDz,
+                            onCopyComponent: onClickCopyComponent ? handleCopyComponentToDz : undefined,
                             variant: index % 2 === 1 ? 'primary' : 'secondary'
                         }, category))
                 })

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

@@ -1 +1 @@
-{"version":3,"file":"ComponentPicker.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentPicker.tsx"],"sourcesContent":["import { useIsMobile } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, Accordion, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { ComponentCategory, ComponentCategoryProps } from './ComponentCategory';\n\nconst EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY: NonNullable<\n  ComponentPickerProps['dynamicComponentsByCategory']\n> = {};\n\ninterface ComponentPickerProps {\n  dynamicComponentsByCategory?: Record<string, NonNullable<ComponentCategoryProps['components']>>;\n  isOpen?: boolean;\n  onClickAddComponent: (componentUid: string) => void;\n}\n\nconst ComponentPicker = ({\n  dynamicComponentsByCategory = EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY,\n  isOpen,\n  onClickAddComponent,\n}: ComponentPickerProps) => {\n  const { formatMessage } = useIntl();\n  const isMobile = useIsMobile();\n\n  const handleAddComponentToDz = (componentUid: string) => () => {\n    onClickAddComponent(componentUid);\n  };\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <Flex\n      paddingTop={{ initial: 0, medium: 6 }}\n      paddingBottom={{ initial: 0, medium: 6 }}\n      paddingLeft={{ initial: 0, medium: 5 }}\n      paddingRight={{ initial: 0, medium: 5 }}\n      background={isMobile ? 'transparent' : 'neutral0'}\n      shadow={isMobile ? 'none' : 'tableShadow'}\n      borderColor={isMobile ? 'transparent' : 'neutral150'}\n      hasRadius={!isMobile}\n      gap={{ initial: 4, medium: 2 }}\n      direction=\"column\"\n      alignItems=\"stretch\"\n    >\n      <Flex justifyContent=\"center\">\n        <Typography fontWeight=\"bold\" textColor=\"neutral600\" fontSize={1}>\n          {formatMessage({\n            id: getTranslation('components.DynamicZone.ComponentPicker-label'),\n            defaultMessage: 'Pick one component',\n          })}\n        </Typography>\n      </Flex>\n      <Box>\n        <Accordion.Root defaultValue={Object.keys(dynamicComponentsByCategory)[0]}>\n          {Object.entries(dynamicComponentsByCategory).map(([category, components], index) => (\n            <ComponentCategory\n              key={category}\n              category={category}\n              components={components}\n              onAddComponent={handleAddComponentToDz}\n              variant={index % 2 === 1 ? 'primary' : 'secondary'}\n            />\n          ))}\n        </Accordion.Root>\n      </Box>\n    </Flex>\n  );\n};\n\nexport { ComponentPicker };\nexport type { ComponentPickerProps };\n"],"names":["EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY","ComponentPicker","dynamicComponentsByCategory","isOpen","onClickAddComponent","formatMessage","useIntl","isMobile","useIsMobile","handleAddComponentToDz","componentUid","_jsxs","Flex","paddingTop","initial","medium","paddingBottom","paddingLeft","paddingRight","background","shadow","borderColor","hasRadius","gap","direction","alignItems","_jsx","justifyContent","Typography","fontWeight","textColor","fontSize","id","getTranslation","defaultMessage","Box","Accordion","Root","defaultValue","Object","keys","entries","map","category","components","index","ComponentCategory","onAddComponent","variant"],"mappings":";;;;;;;AAQA,MAAMA,uCAEF,EAAC;AAQL,MAAMC,eAAAA,GAAkB,CAAC,EACvBC,2BAAAA,GAA8BF,oCAAoC,EAClEG,MAAM,EACNC,mBAAmB,EACE,GAAA;IACrB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAAA,GAAWC,WAAAA,EAAAA;IAEjB,MAAMC,sBAAAA,GAAyB,CAACC,YAAAA,GAAyB,IAAA;YACvDN,mBAAAA,CAAoBM,YAAAA,CAAAA;AACtB,QAAA,CAAA;AAEA,IAAA,IAAI,CAACP,MAAAA,EAAQ;QACX,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,qBACEQ,IAAA,CAACC,IAAAA,EAAAA;QACCC,UAAAA,EAAY;YAAEC,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;QACpCC,aAAAA,EAAe;YAAEF,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;QACvCE,WAAAA,EAAa;YAAEH,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;QACrCG,YAAAA,EAAc;YAAEJ,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;AACtCI,QAAAA,UAAAA,EAAYZ,WAAW,aAAA,GAAgB,UAAA;AACvCa,QAAAA,MAAAA,EAAQb,WAAW,MAAA,GAAS,aAAA;AAC5Bc,QAAAA,WAAAA,EAAad,WAAW,aAAA,GAAgB,YAAA;AACxCe,QAAAA,SAAAA,EAAW,CAACf,QAAAA;QACZgB,GAAAA,EAAK;YAAET,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;QAC7BS,SAAAA,EAAU,QAAA;QACVC,UAAAA,EAAW,SAAA;;0BAEXC,GAAA,CAACd,IAAAA,EAAAA;gBAAKe,cAAAA,EAAe,QAAA;AACnB,gBAAA,QAAA,gBAAAD,GAAA,CAACE,UAAAA,EAAAA;oBAAWC,UAAAA,EAAW,MAAA;oBAAOC,SAAAA,EAAU,YAAA;oBAAaC,QAAAA,EAAU,CAAA;8BAC5D1B,aAAAA,CAAc;AACb2B,wBAAAA,EAAAA,EAAIC,cAAAA,CAAe,8CAAA,CAAA;wBACnBC,cAAAA,EAAgB;AAClB,qBAAA;;;0BAGJR,GAAA,CAACS,GAAAA,EAAAA;wCACCT,GAAA,CAACU,UAAUC,IAAI,EAAA;AAACC,oBAAAA,YAAAA,EAAcC,MAAAA,CAAOC,IAAI,CAACtC,2BAAAA,CAA4B,CAAC,CAAA,CAAE;8BACtEqC,MAAAA,CAAOE,OAAO,CAACvC,2BAAAA,CAAAA,CAA6BwC,GAAG,CAAC,CAAC,CAACC,QAAAA,EAAUC,UAAAA,CAAW,EAAEC,KAAAA,iBACxEnB,GAAA,CAACoB,iBAAAA,EAAAA;4BAECH,QAAAA,EAAUA,QAAAA;4BACVC,UAAAA,EAAYA,UAAAA;4BACZG,cAAAA,EAAgBtC,sBAAAA;4BAChBuC,OAAAA,EAASH,KAAAA,GAAQ,CAAA,KAAM,CAAA,GAAI,SAAA,GAAY;AAJlCF,yBAAAA,EAAAA,QAAAA,CAAAA;;;;;AAWnB;;;;"}
+{"version":3,"file":"ComponentPicker.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentPicker.tsx"],"sourcesContent":["import { useIsMobile } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, Accordion, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { ComponentCategory, ComponentCategoryProps } from './ComponentCategory';\n\nconst EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY: NonNullable<\n  ComponentPickerProps['dynamicComponentsByCategory']\n> = {};\n\ninterface ComponentPickerProps {\n  dynamicComponentsByCategory?: Record<string, NonNullable<ComponentCategoryProps['components']>>;\n  isOpen?: boolean;\n  onClickAddComponent: (componentUid: string) => void;\n  onClickCopyComponent?: (componentUid: string) => void;\n}\n\nconst ComponentPicker = ({\n  dynamicComponentsByCategory = EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY,\n  isOpen,\n  onClickAddComponent,\n  onClickCopyComponent,\n}: ComponentPickerProps) => {\n  const { formatMessage } = useIntl();\n  const isMobile = useIsMobile();\n\n  const handleAddComponentToDz = (componentUid: string) => () => {\n    onClickAddComponent(componentUid);\n  };\n\n  const handleCopyComponentToDz = (componentUid: string) => () => {\n    onClickCopyComponent?.(componentUid);\n  };\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <Flex\n      paddingTop={{ initial: 0, medium: 6 }}\n      paddingBottom={{ initial: 0, medium: 6 }}\n      paddingLeft={{ initial: 0, medium: 5 }}\n      paddingRight={{ initial: 0, medium: 5 }}\n      background={isMobile ? 'transparent' : 'neutral0'}\n      shadow={isMobile ? 'none' : 'tableShadow'}\n      borderColor={isMobile ? 'transparent' : 'neutral150'}\n      hasRadius={!isMobile}\n      gap={{ initial: 4, medium: 2 }}\n      direction=\"column\"\n      alignItems=\"stretch\"\n    >\n      <Flex justifyContent=\"center\">\n        <Typography fontWeight=\"bold\" textColor=\"neutral600\" fontSize={1}>\n          {formatMessage({\n            id: getTranslation('components.DynamicZone.ComponentPicker-label'),\n            defaultMessage: 'Pick one component',\n          })}\n        </Typography>\n      </Flex>\n      <Box>\n        <Accordion.Root defaultValue={Object.keys(dynamicComponentsByCategory)[0]}>\n          {Object.entries(dynamicComponentsByCategory).map(([category, components], index) => (\n            <ComponentCategory\n              key={category}\n              category={category}\n              components={components}\n              onAddComponent={handleAddComponentToDz}\n              onCopyComponent={onClickCopyComponent ? handleCopyComponentToDz : undefined}\n              variant={index % 2 === 1 ? 'primary' : 'secondary'}\n            />\n          ))}\n        </Accordion.Root>\n      </Box>\n    </Flex>\n  );\n};\n\nexport { ComponentPicker };\nexport type { ComponentPickerProps };\n"],"names":["EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY","ComponentPicker","dynamicComponentsByCategory","isOpen","onClickAddComponent","onClickCopyComponent","formatMessage","useIntl","isMobile","useIsMobile","handleAddComponentToDz","componentUid","handleCopyComponentToDz","_jsxs","Flex","paddingTop","initial","medium","paddingBottom","paddingLeft","paddingRight","background","shadow","borderColor","hasRadius","gap","direction","alignItems","_jsx","justifyContent","Typography","fontWeight","textColor","fontSize","id","getTranslation","defaultMessage","Box","Accordion","Root","defaultValue","Object","keys","entries","map","category","components","index","ComponentCategory","onAddComponent","onCopyComponent","undefined","variant"],"mappings":";;;;;;;AAQA,MAAMA,uCAEF,EAAC;AASL,MAAMC,eAAAA,GAAkB,CAAC,EACvBC,2BAAAA,GAA8BF,oCAAoC,EAClEG,MAAM,EACNC,mBAAmB,EACnBC,oBAAoB,EACC,GAAA;IACrB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAAA,GAAWC,WAAAA,EAAAA;IAEjB,MAAMC,sBAAAA,GAAyB,CAACC,YAAAA,GAAyB,IAAA;YACvDP,mBAAAA,CAAoBO,YAAAA,CAAAA;AACtB,QAAA,CAAA;IAEA,MAAMC,uBAAAA,GAA0B,CAACD,YAAAA,GAAyB,IAAA;YACxDN,oBAAAA,GAAuBM,YAAAA,CAAAA;AACzB,QAAA,CAAA;AAEA,IAAA,IAAI,CAACR,MAAAA,EAAQ;QACX,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,qBACEU,IAAA,CAACC,IAAAA,EAAAA;QACCC,UAAAA,EAAY;YAAEC,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;QACpCC,aAAAA,EAAe;YAAEF,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;QACvCE,WAAAA,EAAa;YAAEH,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;QACrCG,YAAAA,EAAc;YAAEJ,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;AACtCI,QAAAA,UAAAA,EAAYb,WAAW,aAAA,GAAgB,UAAA;AACvCc,QAAAA,MAAAA,EAAQd,WAAW,MAAA,GAAS,aAAA;AAC5Be,QAAAA,WAAAA,EAAaf,WAAW,aAAA,GAAgB,YAAA;AACxCgB,QAAAA,SAAAA,EAAW,CAAChB,QAAAA;QACZiB,GAAAA,EAAK;YAAET,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;QAC7BS,SAAAA,EAAU,QAAA;QACVC,UAAAA,EAAW,SAAA;;0BAEXC,GAAA,CAACd,IAAAA,EAAAA;gBAAKe,cAAAA,EAAe,QAAA;AACnB,gBAAA,QAAA,gBAAAD,GAAA,CAACE,UAAAA,EAAAA;oBAAWC,UAAAA,EAAW,MAAA;oBAAOC,SAAAA,EAAU,YAAA;oBAAaC,QAAAA,EAAU,CAAA;8BAC5D3B,aAAAA,CAAc;AACb4B,wBAAAA,EAAAA,EAAIC,cAAAA,CAAe,8CAAA,CAAA;wBACnBC,cAAAA,EAAgB;AAClB,qBAAA;;;0BAGJR,GAAA,CAACS,GAAAA,EAAAA;wCACCT,GAAA,CAACU,UAAUC,IAAI,EAAA;AAACC,oBAAAA,YAAAA,EAAcC,MAAAA,CAAOC,IAAI,CAACxC,2BAAAA,CAA4B,CAAC,CAAA,CAAE;8BACtEuC,MAAAA,CAAOE,OAAO,CAACzC,2BAAAA,CAAAA,CAA6B0C,GAAG,CAAC,CAAC,CAACC,QAAAA,EAAUC,UAAAA,CAAW,EAAEC,KAAAA,iBACxEnB,GAAA,CAACoB,iBAAAA,EAAAA;4BAECH,QAAAA,EAAUA,QAAAA;4BACVC,UAAAA,EAAYA,UAAAA;4BACZG,cAAAA,EAAgBvC,sBAAAA;AAChBwC,4BAAAA,eAAAA,EAAiB7C,uBAAuBO,uBAAAA,GAA0BuC,SAAAA;4BAClEC,OAAAA,EAASL,KAAAA,GAAQ,CAAA,KAAM,CAAA,GAAI,SAAA,GAAY;AALlCF,yBAAAA,EAAAA,QAAAA,CAAAA;;;;;AAYnB;;;;"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.js

@@ -43,7 +43,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
 
 const EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY = {};
-const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveComponentClick, onMoveComponent, onGrabItem, onDropItem, onCancel, dynamicComponentsByCategory = EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY, onAddComponent, totalLength, children, forceOpen, onForceOpenHandled })=>{
+const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveComponentClick, onMoveComponent, onGrabItem, onDropItem, onCancel, dynamicComponentsByCategory = EMPTY_DYNAMIC_COMPONENTS_BY_CATEGORY, onAddComponent, totalLength, children, forceOpen, onForceOpenHandled, isCopied })=>{
     const { formatMessage } = reactIntl.useIntl();
     const { currentDocumentMeta } = useDocumentContext.useDocumentContext('DynamicComponent');
     const isDesktop = strapiAdmin.useIsDesktop();
@@ -318,8 +318,18 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                         icon: icon && ComponentIcon.COMPONENT_ICONS[icon] ? ComponentIcon.COMPONENT_ICONS[icon] : ComponentIcon.COMPONENT_ICONS.dashboard,
                                         children: accordionTitle
                                     }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Accordion.Actions, {
-                                        children: accordionActions
+                                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Accordion.Actions, {
+                                        children: [
+                                            isCopied && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Badge, {
+                                                variant: "success",
+                                                size: "S",
+                                                children: formatMessage({
+                                                    id: translations.getTranslation('components.Component.copied'),
+                                                    defaultMessage: 'Copied'
+                                                })
+                                            }),
+                                            accordionActions
+                                        ]
                                     })
                                 ]
                             }),
@@ -331,6 +341,7 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                         index: index,
                                         layout: componentUid ? components[componentUid]?.layout : undefined,
                                         name: name,
+                                        disabled: disabled,
                                         children: children
                                     })
                                 })
@@ -368,7 +379,7 @@ const ComponentContainer = styledComponents.styled(designSystem.Box)`
   padding: 0;
   margin: 0;
 `;
-const DynamicComponentFields = /*#__PURE__*/ React__namespace.memo(({ children, componentUid, index, layout, name })=>{
+const DynamicComponentFields = /*#__PURE__*/ React__namespace.memo(({ children, componentUid, index, layout, name, disabled })=>{
     const { formatMessage } = reactIntl.useIntl();
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
         padding: {
@@ -389,6 +400,8 @@ const DynamicComponentFields = /*#__PURE__*/ React__namespace.memo(({ children,
                             const fieldName = `${name}.${index}.${field.name}`;
                             const fieldWithTranslatedLabel = {
                                 ...field,
+                                // Inherit parent disable (e.g. locked non-localized DZ on a secondary locale)
+                                disabled: field.disabled || disabled,
                                 label: formatMessage({
                                     id: `content-manager.components.${componentUid}.${field.name}`,
                                     defaultMessage: field.label