@strapi/content-manager 5.51.1 → 5.52.0

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

@@ -1,17 +1,109 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-require('react');
+var React = require('react');
 var designSystem = require('@strapi/design-system');
 var upperFirst = require('lodash/upperFirst');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
 var ComponentIcon = require('../../../../../components/ComponentIcon.js');
+var previewImage = require('../../../../../utils/previewImage.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
 
+/**
+ * Renders a small preview thumbnail inside the component picker tile and, on hover,
+ * a larger portaled preview so authors can read the component at a glance without picking it.
+ * Uses a controlled Popover anchored to the thumbnail — the content is portaled, so it escapes
+ * the accordion's overflow clipping.
+ */ const ComponentPreviewImage = ({ src, alt, onError })=>{
+    const [open, setOpen] = React__namespace.useState(false);
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Popover.Root, {
+        open: open,
+        onOpenChange: setOpen,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Anchor, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                    tag: "img",
+                    src: src,
+                    alt: alt,
+                    loading: "lazy",
+                    width: "100%",
+                    height: "5.2rem",
+                    hasRadius: true,
+                    style: {
+                        objectFit: 'cover'
+                    },
+                    onMouseEnter: ()=>setOpen(true),
+                    onMouseLeave: ()=>setOpen(false),
+                    onError: onError
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Content, {
+                side: "top",
+                sideOffset: 4,
+                onOpenAutoFocus: (e)=>e.preventDefault(),
+                style: {
+                    pointerEvents: 'none'
+                },
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                    padding: 2,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                        tag: "img",
+                        src: src,
+                        alt: alt,
+                        hasRadius: true,
+                        style: {
+                            display: 'block',
+                            maxWidth: 'min(60rem, 90vw)',
+                            maxHeight: 'min(45rem, 80vh)',
+                            objectFit: 'contain'
+                        }
+                    })
+                })
+            })
+        ]
+    });
+};
+/**
+ * Holds per-tile load-error state: when the preview image fails to load (missing file,
+ * unreachable CDN…), the tile falls back to the component icon instead of a broken image.
+ */ const ComponentTileVisual = ({ previewUrl, icon, displayName })=>{
+    const [hasLoadError, setHasLoadError] = React__namespace.useState(false);
+    if (!previewUrl || hasLoadError) {
+        return /*#__PURE__*/ jsxRuntime.jsx(ComponentIcon.ComponentIcon, {
+            color: "currentColor",
+            background: "primary200",
+            icon: icon
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(ComponentPreviewImage, {
+        src: previewUrl,
+        alt: displayName,
+        onError: ()=>setHasLoadError(true)
+    });
+};
 const ComponentCategory = ({ category, components = [], variant = 'primary', onAddComponent })=>{
     const { formatMessage } = reactIntl.useIntl();
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Accordion.Item, {
@@ -32,7 +124,9 @@ const ComponentCategory = ({ category, components = [], variant = 'primary', onA
                     paddingBottom: 4,
                     paddingLeft: 3,
                     paddingRight: 3,
-                    children: components.map(({ uid, displayName, icon })=>/*#__PURE__*/ jsxRuntime.jsx(ComponentBox, {
+                    children: components.map(({ uid, displayName, icon, preview })=>{
+                        const previewUrl = previewImage.resolvePreviewImageUrl(preview);
+                        return /*#__PURE__*/ jsxRuntime.jsx(ComponentBox, {
                             tag: "button",
                             type: "button",
                             background: "neutral100",
@@ -51,10 +145,10 @@ const ComponentCategory = ({ category, components = [], variant = 'primary', onA
                                 paddingLeft: 2,
                                 paddingRight: 2,
                                 children: [
-                                    /*#__PURE__*/ jsxRuntime.jsx(ComponentIcon.ComponentIcon, {
-                                        color: "currentColor",
-                                        background: "primary200",
-                                        icon: icon
+                                    /*#__PURE__*/ jsxRuntime.jsx(ComponentTileVisual, {
+                                        previewUrl: previewUrl,
+                                        icon: icon,
+                                        displayName: displayName
                                     }),
                                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
                                         label: formatMessage({
@@ -74,7 +168,8 @@ const ComponentCategory = ({ category, components = [], variant = 'primary', onA
                                     })
                                 ]
                             })
-                        }, uid))
+                        }, uid);
+                    })
                 })
             })
         ]

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 { Accordion, Box, Flex, FlexComponent, Tooltip, Typography } 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';\n\ninterface ComponentCategoryProps {\n  category: string;\n  components?: Array<{\n    uid: string;\n    displayName: string;\n    icon?: string;\n  }>;\n  onAddComponent: (\n    componentUid: string\n  ) => React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\n  variant?: Accordion.Variant;\n}\n\nconst ComponentCategory = ({\n  category,\n  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 }) => (\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                <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />\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        </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":["ComponentCategory","category","components","variant","onAddComponent","formatMessage","useIntl","_jsxs","Accordion","Item","value","_jsx","Header","Trigger","id","defaultMessage","upperFirst","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","displayName","icon","ComponentBox","tag","type","background","justifyContent","onClick","hasRadius","height","shrink","borderColor","Flex","direction","gap","alignItems","width","ComponentIcon","color","Tooltip","label","Typography","fontWeight","ellipsis","styled","Content","process","env","NODE_ENV","Box","theme","breakpoints","medium","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600"],"mappings":"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"}
+{"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\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 = [],\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":["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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"}

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

@@ -1,11 +1,84 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
-import { Accordion, Box, Flex, Tooltip, Typography } from '@strapi/design-system';
+import * as React from 'react';
+import { Accordion, Box, Flex, 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';
 
+/**
+ * Renders a small preview thumbnail inside the component picker tile and, on hover,
+ * a larger portaled preview so authors can read the component at a glance without picking it.
+ * Uses a controlled Popover anchored to the thumbnail — the content is portaled, so it escapes
+ * the accordion's overflow clipping.
+ */ const ComponentPreviewImage = ({ src, alt, onError })=>{
+    const [open, setOpen] = React.useState(false);
+    return /*#__PURE__*/ jsxs(Popover.Root, {
+        open: open,
+        onOpenChange: setOpen,
+        children: [
+            /*#__PURE__*/ jsx(Popover.Anchor, {
+                children: /*#__PURE__*/ jsx(Box, {
+                    tag: "img",
+                    src: src,
+                    alt: alt,
+                    loading: "lazy",
+                    width: "100%",
+                    height: "5.2rem",
+                    hasRadius: true,
+                    style: {
+                        objectFit: 'cover'
+                    },
+                    onMouseEnter: ()=>setOpen(true),
+                    onMouseLeave: ()=>setOpen(false),
+                    onError: onError
+                })
+            }),
+            /*#__PURE__*/ jsx(Popover.Content, {
+                side: "top",
+                sideOffset: 4,
+                onOpenAutoFocus: (e)=>e.preventDefault(),
+                style: {
+                    pointerEvents: 'none'
+                },
+                children: /*#__PURE__*/ jsx(Box, {
+                    padding: 2,
+                    children: /*#__PURE__*/ jsx(Box, {
+                        tag: "img",
+                        src: src,
+                        alt: alt,
+                        hasRadius: true,
+                        style: {
+                            display: 'block',
+                            maxWidth: 'min(60rem, 90vw)',
+                            maxHeight: 'min(45rem, 80vh)',
+                            objectFit: 'contain'
+                        }
+                    })
+                })
+            })
+        ]
+    });
+};
+/**
+ * Holds per-tile load-error state: when the preview image fails to load (missing file,
+ * unreachable CDN…), the tile falls back to the component icon instead of a broken image.
+ */ const ComponentTileVisual = ({ previewUrl, icon, displayName })=>{
+    const [hasLoadError, setHasLoadError] = React.useState(false);
+    if (!previewUrl || hasLoadError) {
+        return /*#__PURE__*/ jsx(ComponentIcon, {
+            color: "currentColor",
+            background: "primary200",
+            icon: icon
+        });
+    }
+    return /*#__PURE__*/ jsx(ComponentPreviewImage, {
+        src: previewUrl,
+        alt: displayName,
+        onError: ()=>setHasLoadError(true)
+    });
+};
 const ComponentCategory = ({ category, components = [], variant = 'primary', onAddComponent })=>{
     const { formatMessage } = useIntl();
     return /*#__PURE__*/ jsxs(Accordion.Item, {
@@ -26,7 +99,9 @@ const ComponentCategory = ({ category, components = [], variant = 'primary', onA
                     paddingBottom: 4,
                     paddingLeft: 3,
                     paddingRight: 3,
-                    children: components.map(({ uid, displayName, icon })=>/*#__PURE__*/ jsx(ComponentBox, {
+                    children: components.map(({ uid, displayName, icon, preview })=>{
+                        const previewUrl = resolvePreviewImageUrl(preview);
+                        return /*#__PURE__*/ jsx(ComponentBox, {
                             tag: "button",
                             type: "button",
                             background: "neutral100",
@@ -45,10 +120,10 @@ const ComponentCategory = ({ category, components = [], variant = 'primary', onA
                                 paddingLeft: 2,
                                 paddingRight: 2,
                                 children: [
-                                    /*#__PURE__*/ jsx(ComponentIcon, {
-                                        color: "currentColor",
-                                        background: "primary200",
-                                        icon: icon
+                                    /*#__PURE__*/ jsx(ComponentTileVisual, {
+                                        previewUrl: previewUrl,
+                                        icon: icon,
+                                        displayName: displayName
                                     }),
                                     /*#__PURE__*/ jsx(Tooltip, {
                                         label: formatMessage({
@@ -68,7 +143,8 @@ const ComponentCategory = ({ category, components = [], variant = 'primary', onA
                                     })
                                 ]
                             })
-                        }, uid))
+                        }, uid);
+                    })
                 })
             })
         ]

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 { Accordion, Box, Flex, FlexComponent, Tooltip, Typography } 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';\n\ninterface ComponentCategoryProps {\n  category: string;\n  components?: Array<{\n    uid: string;\n    displayName: string;\n    icon?: string;\n  }>;\n  onAddComponent: (\n    componentUid: string\n  ) => React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\n  variant?: Accordion.Variant;\n}\n\nconst ComponentCategory = ({\n  category,\n  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 }) => (\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                <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />\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        </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":["ComponentCategory","category","components","variant","onAddComponent","formatMessage","useIntl","_jsxs","Accordion","Item","value","_jsx","Header","Trigger","id","defaultMessage","upperFirst","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","displayName","icon","ComponentBox","tag","type","background","justifyContent","onClick","hasRadius","height","shrink","borderColor","Flex","direction","gap","alignItems","width","ComponentIcon","color","Tooltip","label","Typography","fontWeight","ellipsis","styled","Content","process","env","NODE_ENV","Box","theme","breakpoints","medium","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600"],"mappings":";;;;;;;;AAsBA,MAAMA,iBAAAA,GAAoB,CAAC,EACzBC,QAAQ,EACRC,UAAAA,GAAa,EAAE,EACfC,OAAAA,GAAU,SAAS,EACnBC,cAAc,EACS,GAAA;IACvB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAE1B,qBACEC,IAAA,CAACC,UAAUC,IAAI,EAAA;QAACC,KAAAA,EAAOT,QAAAA;;AACrB,0BAAAU,GAAA,CAACH,UAAUI,MAAM,EAAA;gBAACT,OAAAA,EAASA,OAAAA;wCACzBQ,GAAA,CAACH,UAAUK,OAAO,EAAA;8BACfR,aAAAA,CAAc;wBAAES,EAAAA,EAAIb,QAAAA;AAAUc,wBAAAA,cAAAA,EAAgBC,UAAAA,CAAWf,QAAAA;AAAU,qBAAA;;;0BAGxEU,GAAA,CAACM,0BAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAN,GAAA,CAACO,IAAAA,EAAAA;oBAAKC,UAAAA,EAAY,CAAA;oBAAGC,aAAAA,EAAe,CAAA;oBAAGC,WAAAA,EAAa,CAAA;oBAAGC,YAAAA,EAAc,CAAA;8BAClEpB,UAAAA,CAAWqB,GAAG,CAAC,CAAC,EAAEC,GAAG,EAAEC,WAAW,EAAEC,IAAI,EAAE,iBACzCf,GAAA,CAACgB,YAAAA,EAAAA;4BAECC,GAAAA,EAAI,QAAA;4BACJC,IAAAA,EAAK,QAAA;4BACLC,UAAAA,EAAW,YAAA;4BACXC,cAAAA,EAAe,QAAA;AACfC,4BAAAA,OAAAA,EAAS5B,cAAAA,CAAeoB,GAAAA,CAAAA;4BACxBS,SAAS,EAAA,IAAA;4BACTC,MAAAA,EAAO,QAAA;4BACPC,MAAAA,EAAQ,CAAA;4BACRC,WAAAA,EAAY,YAAA;AAEZ,4BAAA,QAAA,gBAAA7B,IAAA,CAAC8B,IAAAA,EAAAA;gCACCC,SAAAA,EAAU,QAAA;gCACVC,GAAAA,EAAK,CAAA;gCACLC,UAAAA,EAAW,QAAA;gCACXT,cAAAA,EAAe,QAAA;gCACfU,KAAAA,EAAM,MAAA;gCACNpB,WAAAA,EAAa,CAAA;gCACbC,YAAAA,EAAc,CAAA;;kDAEdX,GAAA,CAAC+B,aAAAA,EAAAA;wCAAcC,KAAAA,EAAM,cAAA;wCAAeb,UAAAA,EAAW,YAAA;wCAAaJ,IAAAA,EAAMA;;kDAElEf,GAAA,CAACiC,OAAAA,EAAAA;AAAQC,wCAAAA,KAAAA,EAAOxC,aAAAA,CAAc;4CAAES,EAAAA,EAAIU,GAAAA;AAAKT,4CAAAA,cAAAA,EAAgBU,WAAAA,IAAeD;AAAI,yCAAA,CAAA;AAC1E,wCAAA,QAAA,gBAAAb,GAAA,CAACmC,UAAAA,EAAAA;4CAAW3C,OAAAA,EAAQ,IAAA;4CAAK4C,UAAAA,EAAW,MAAA;4CAAOC,QAAQ,EAAA,IAAA;4CAACP,KAAAA,EAAM,MAAA;sDACvDpC,aAAAA,CAAc;gDAAES,EAAAA,EAAIU,GAAAA;AAAKT,gDAAAA,cAAAA,EAAgBU,WAAAA,IAAeD;AAAI,6CAAA;;;;;AAxB9DA,yBAAAA,EAAAA,GAAAA,CAAAA;;;;;AAkCnB;AAEA,MAAMP,0BAAAA,GAA6BgC,MAAAA,CAAOzC,SAAAA,CAAU0C,OAAO,CAAC;;AAE5D,CAAC;AAED;;;;;IAMA,MAAMhC,IAAAA,GACJiC,OAAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,MAAA,GACrBJ,MAAAA,CAAOK,GAAAA,CAAI;;;;;QAKT,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,MAAM,CAAC;;;;MAI5C,CAAC,GACDR,MAAAA,CAAOK,GAAAA,CAAI;;;;;QAKT,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,MAAM,CAAC;;;MAG5C,CAAC;AAEP,MAAM9B,YAAAA,GAAesB,MAAAA,CAAgCZ,IAAAA,CAAK;SACjD,EAAE,CAAC,EAAEkB,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.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\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 = [],\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":["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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"}

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

@@ -97,7 +97,8 @@ const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelActi
             const component = {
                 uid: componentUid,
                 displayName: info.displayName,
-                icon: info.icon
+                icon: info.icon,
+                preview: info.preview
             };
             if (!acc[category]) {
                 acc[category] = [];

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

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/Field.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  createContext,\n  InputProps,\n  useField,\n  useForm,\n  useNotification,\n} from '@strapi/admin/strapi-admin';\nimport { Box, Flex, VisuallyHidden } from '@strapi/design-system';\nimport pipe from 'lodash/fp/pipe';\nimport { useIntl } from 'react-intl';\n\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { type EditFieldLayout } from '../../../../../hooks/useDocumentLayout';\nimport { usePrev } from '../../../../../hooks/usePrev';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { transformDocument } from '../../../utils/data';\nimport { createDefaultForm } from '../../../utils/forms';\nimport { ComponentProvider, useComponent } from '../ComponentContext';\n\nimport { AddComponentButton } from './AddComponentButton';\nimport { ComponentPicker } from './ComponentPicker';\nimport { DynamicComponent, DynamicComponentProps } from './DynamicComponent';\nimport { DynamicZoneLabel, DynamicZoneLabelProps } from './DynamicZoneLabel';\n\nimport type { InputRendererProps } from '../../InputRenderer';\nimport type { Schema } from '@strapi/types';\n\ninterface DynamicZoneContextValue {\n  isInDynamicZone: boolean;\n}\n\nconst [DynamicZoneProvider, useDynamicZone] = createContext<DynamicZoneContextValue>(\n  'DynamicZone',\n  {\n    isInDynamicZone: false,\n  }\n);\n\ninterface DynamicZoneProps\n  extends Omit<Extract<EditFieldLayout, { type: 'dynamiczone' }>, 'size' | 'hint'>,\n    Pick<InputProps, 'hint'>,\n    Pick<DynamicZoneLabelProps, 'labelAction'> {\n  children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicZone = ({\n  attribute,\n  disabled: disabledProp,\n  hint,\n  label,\n  labelAction,\n  name,\n  required = false,\n  children,\n}: DynamicZoneProps) => {\n  // We cannot use the default props here\n  const { max = Infinity, min = -Infinity } = attribute ?? {};\n\n  const [addComponentIsOpen, setAddComponentIsOpen] = React.useState(false);\n  const [liveText, setLiveText] = React.useState('');\n  const [openComponentKey, setOpenComponentKey] = React.useState<string | null>(null);\n\n  const {\n    currentDocument: { components, isLoading },\n  } = useDocumentContext('DynamicZone');\n\n  const disabled = disabledProp || isLoading;\n  const addFieldRow = useForm('DynamicZone', (state) => state.addFieldRow);\n  const removeFieldRow = useForm('DynamicZone', (state) => state.removeFieldRow);\n  const moveFieldRow = useForm('DynamicZone', (state) => state.moveFieldRow);\n\n  type DzWithTempKey =\n    Schema.Attribute.GetDynamicZoneValue<Schema.Attribute.DynamicZone>[number] & {\n      __temp_key__: string;\n    };\n\n  const { value: rawValue, error } = useField<Array<DzWithTempKey>>(name);\n  // `value` can be `null` (for example after closing a relation modal). Match\n  // RepeatableComponent: only accept arrays, otherwise treat as empty. (#26815)\n  const value = React.useMemo(() => (Array.isArray(rawValue) ? rawValue : []), [rawValue]);\n\n  /**\n   * Track the previous value array to detect when a new component is added.\n   * When the array grows, we find the newly added item and force its accordion open.\n   * This mirrors the same pattern used in RepeatableComponent.\n   */\n  const prevValue = usePrev(value);\n\n  React.useEffect(() => {\n    if (prevValue && prevValue.length < value.length) {\n      const prevKeys = new Set(prevValue.map((v) => v.__temp_key__));\n      const newItem = value.find((v) => !prevKeys.has(v.__temp_key__));\n      if (newItem) {\n        setOpenComponentKey(newItem.__temp_key__);\n      }\n    } else if (openComponentKey !== null) {\n      // Component was removed before forceOpen was handled — clear stale key\n      const currentKeys = new Set(value.map((v) => v.__temp_key__));\n      if (!currentKeys.has(openComponentKey)) {\n        setOpenComponentKey(null);\n      }\n    }\n  }, [value, prevValue, openComponentKey]);\n\n  const handleForceOpenHandled = React.useCallback(() => {\n    setOpenComponentKey(null);\n  }, []);\n\n  const dynamicComponentsByCategory = React.useMemo(() => {\n    return attribute.components.reduce<\n      NonNullable<DynamicComponentProps['dynamicComponentsByCategory']>\n    >((acc, componentUid) => {\n      const componentSchema = components[componentUid];\n\n      if (!componentSchema) {\n        return acc;\n      }\n\n      const { category, info } = componentSchema;\n\n      const component = { uid: componentUid, displayName: info.displayName, icon: info.icon };\n\n      if (!acc[category]) {\n        acc[category] = [];\n      }\n\n      acc[category] = [...acc[category], component];\n\n      return acc;\n    }, {});\n  }, [attribute.components, components]);\n\n  const { formatMessage } = useIntl();\n\n  const { toggleNotification } = useNotification();\n\n  const dynamicDisplayedComponentsLength = value.length;\n\n  const handleAddComponent = React.useCallback(\n    (uid: string, position?: number) => {\n      const schema = components[uid];\n\n      if (!schema) {\n        return;\n      }\n\n      setAddComponentIsOpen(false);\n\n      const form = createDefaultForm(schema, components);\n      const transformations = pipe(transformDocument(schema, components), (data) => ({\n        ...data,\n        __component: uid,\n      }));\n\n      const data = transformations(form);\n\n      addFieldRow(name, data, position);\n    },\n    [addFieldRow, components, name]\n  );\n\n  const handleClickOpenPicker = () => {\n    if (dynamicDisplayedComponentsLength < max) {\n      setAddComponentIsOpen((prev) => !prev);\n    } else {\n      toggleNotification({\n        type: 'info',\n        message: formatMessage({\n          id: getTranslation('components.notification.info.maximum-requirement'),\n        }),\n      });\n    }\n  };\n\n  const handleMoveComponent = React.useCallback(\n    (newIndex: number, currentIndex: number) => {\n      setLiveText(\n        formatMessage(\n          {\n            id: getTranslation('dnd.reorder'),\n            defaultMessage: '{item}, moved. New position in list: {position}.',\n          },\n          {\n            item: `${name}.${currentIndex}`,\n            position: `${newIndex + 1} of ${value.length}`,\n          }\n        )\n      );\n\n      moveFieldRow(name, currentIndex, newIndex);\n    },\n    [formatMessage, moveFieldRow, name, value.length]\n  );\n\n  const handleCancel = React.useCallback(\n    (index: number) => {\n      setLiveText(\n        formatMessage(\n          {\n            id: getTranslation('dnd.cancel-item'),\n            defaultMessage: '{item}, dropped. Re-order cancelled.',\n          },\n          {\n            item: `${name}.${index}`,\n          }\n        )\n      );\n    },\n    [formatMessage, name]\n  );\n\n  const handleGrabItem = React.useCallback(\n    (index: number) => {\n      setLiveText(\n        formatMessage(\n          {\n            id: getTranslation('dnd.grab-item'),\n            defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`,\n          },\n          {\n            item: `${name}.${index}`,\n            position: `${index + 1} of ${value.length}`,\n          }\n        )\n      );\n    },\n    [formatMessage, name, value.length]\n  );\n\n  const handleDropItem = React.useCallback(\n    (index: number) => {\n      setLiveText(\n        formatMessage(\n          {\n            id: getTranslation('dnd.drop-item'),\n            defaultMessage: `{item}, dropped. Final position in list: {position}.`,\n          },\n          {\n            item: `${name}.${index}`,\n            position: `${index + 1} of ${value.length}`,\n          }\n        )\n      );\n    },\n    [formatMessage, name, value.length]\n  );\n\n  const handleRemoveComponent = React.useCallback(\n    (currentIndex: number) => {\n      removeFieldRow(name, currentIndex);\n    },\n    [name, removeFieldRow]\n  );\n\n  const hasError = error !== undefined;\n\n  const renderButtonLabel = () => {\n    if (addComponentIsOpen) {\n      return formatMessage({ id: 'app.utils.close-label', defaultMessage: 'Close' });\n    }\n\n    if (hasError && dynamicDisplayedComponentsLength > max) {\n      return formatMessage(\n        {\n          id: getTranslation(`components.DynamicZone.extra-components`),\n          defaultMessage:\n            'There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}',\n        },\n        {\n          number: dynamicDisplayedComponentsLength - max,\n        }\n      );\n    }\n\n    if (hasError && dynamicDisplayedComponentsLength < min) {\n      return formatMessage(\n        {\n          id: getTranslation(`components.DynamicZone.missing-components`),\n          defaultMessage:\n            'There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}',\n        },\n        { number: min - dynamicDisplayedComponentsLength }\n      );\n    }\n\n    return formatMessage(\n      {\n        id: getTranslation('components.DynamicZone.add-component'),\n        defaultMessage: 'Add a component to {componentName}',\n      },\n      { componentName: label || name }\n    );\n  };\n\n  const level = useComponent('DynamicZone', (state) => state.level);\n\n  const ariaDescriptionId = React.useId();\n\n  return (\n    <DynamicZoneProvider isInDynamicZone>\n      <Flex direction=\"column\" alignItems=\"stretch\" gap={{ initial: 4, medium: 6 }}>\n        {dynamicDisplayedComponentsLength > 0 && (\n          <Box>\n            <DynamicZoneLabel\n              hint={hint}\n              label={label}\n              labelAction={labelAction}\n              name={name}\n              numberOfComponents={dynamicDisplayedComponentsLength}\n              required={required}\n            />\n            <VisuallyHidden id={ariaDescriptionId}>\n              {formatMessage({\n                id: getTranslation('dnd.instructions'),\n                defaultMessage: `Press spacebar to grab and re-order`,\n              })}\n            </VisuallyHidden>\n            <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\n            <ol aria-describedby={ariaDescriptionId}>\n              {value.map((field, index) => (\n                <ComponentProvider\n                  key={field.__temp_key__}\n                  level={level + 1}\n                  uid={field.__component}\n                  // id is always a number in a dynamic zone.\n                  id={field.id as number}\n                  type=\"dynamiczone\"\n                >\n                  <DynamicComponent\n                    disabled={disabled}\n                    name={name}\n                    index={index}\n                    componentUid={field.__component}\n                    onMoveComponent={handleMoveComponent}\n                    onRemoveComponentClick={handleRemoveComponent}\n                    onCancel={handleCancel}\n                    onDropItem={handleDropItem}\n                    onGrabItem={handleGrabItem}\n                    onAddComponent={handleAddComponent}\n                    dynamicComponentsByCategory={dynamicComponentsByCategory}\n                    totalLength={dynamicDisplayedComponentsLength}\n                    forceOpen={openComponentKey === field.__temp_key__}\n                    onForceOpenHandled={handleForceOpenHandled}\n                  >\n                    {children}\n                  </DynamicComponent>\n                </ComponentProvider>\n              ))}\n            </ol>\n          </Box>\n        )}\n        <Flex justifyContent=\"center\">\n          <AddComponentButton\n            hasError={hasError}\n            isDisabled={disabled}\n            isOpen={addComponentIsOpen}\n            onClick={handleClickOpenPicker}\n          >\n            {renderButtonLabel()}\n          </AddComponentButton>\n        </Flex>\n        <ComponentPicker\n          dynamicComponentsByCategory={dynamicComponentsByCategory}\n          isOpen={addComponentIsOpen}\n          onClickAddComponent={handleAddComponent}\n        />\n      </Flex>\n    </DynamicZoneProvider>\n  );\n};\n\nexport { DynamicZone, useDynamicZone };\nexport type { DynamicZoneProps };\n"],"names":["DynamicZoneProvider","useDynamicZone","createContext","isInDynamicZone","DynamicZone","attribute","disabled","disabledProp","hint","label","labelAction","name","required","children","max","Infinity","min","addComponentIsOpen","setAddComponentIsOpen","React","useState","liveText","setLiveText","openComponentKey","setOpenComponentKey","currentDocument","components","isLoading","useDocumentContext","addFieldRow","useForm","state","removeFieldRow","moveFieldRow","value","rawValue","error","useField","useMemo","Array","isArray","prevValue","usePrev","useEffect","length","prevKeys","Set","map","v","__temp_key__","newItem","find","has","currentKeys","handleForceOpenHandled","useCallback","dynamicComponentsByCategory","reduce","acc","componentUid","componentSchema","category","info","component","uid","displayName","icon","formatMessage","useIntl","toggleNotification","useNotification","dynamicDisplayedComponentsLength","handleAddComponent","position","schema","form","createDefaultForm","transformations","pipe","transformDocument","data","__component","handleClickOpenPicker","prev","type","message","id","getTranslation","handleMoveComponent","newIndex","currentIndex","defaultMessage","item","handleCancel","index","handleGrabItem","handleDropItem","handleRemoveComponent","hasError","undefined","renderButtonLabel","number","componentName","level","useComponent","ariaDescriptionId","useId","_jsx","_jsxs","Flex","direction","alignItems","gap","initial","medium","Box","DynamicZoneLabel","numberOfComponents","VisuallyHidden","aria-live","ol","aria-describedby","field","ComponentProvider","DynamicComponent","onMoveComponent","onRemoveComponentClick","onCancel","onDropItem","onGrabItem","onAddComponent","totalLength","forceOpen","onForceOpenHandled","justifyContent","AddComponentButton","isDisabled","isOpen","onClick","ComponentPicker","onClickAddComponent"],"mappings":"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"}
+{"version":3,"file":"Field.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/Field.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  createContext,\n  InputProps,\n  useField,\n  useForm,\n  useNotification,\n} from '@strapi/admin/strapi-admin';\nimport { Box, Flex, VisuallyHidden } from '@strapi/design-system';\nimport pipe from 'lodash/fp/pipe';\nimport { useIntl } from 'react-intl';\n\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { type EditFieldLayout } from '../../../../../hooks/useDocumentLayout';\nimport { usePrev } from '../../../../../hooks/usePrev';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { transformDocument } from '../../../utils/data';\nimport { createDefaultForm } from '../../../utils/forms';\nimport { ComponentProvider, useComponent } from '../ComponentContext';\n\nimport { AddComponentButton } from './AddComponentButton';\nimport { ComponentPicker } from './ComponentPicker';\nimport { DynamicComponent, DynamicComponentProps } from './DynamicComponent';\nimport { DynamicZoneLabel, DynamicZoneLabelProps } from './DynamicZoneLabel';\n\nimport type { InputRendererProps } from '../../InputRenderer';\nimport type { Schema } from '@strapi/types';\n\ninterface DynamicZoneContextValue {\n  isInDynamicZone: boolean;\n}\n\nconst [DynamicZoneProvider, useDynamicZone] = createContext<DynamicZoneContextValue>(\n  'DynamicZone',\n  {\n    isInDynamicZone: false,\n  }\n);\n\ninterface DynamicZoneProps\n  extends Omit<Extract<EditFieldLayout, { type: 'dynamiczone' }>, 'size' | 'hint'>,\n    Pick<InputProps, 'hint'>,\n    Pick<DynamicZoneLabelProps, 'labelAction'> {\n  children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicZone = ({\n  attribute,\n  disabled: disabledProp,\n  hint,\n  label,\n  labelAction,\n  name,\n  required = false,\n  children,\n}: DynamicZoneProps) => {\n  // We cannot use the default props here\n  const { max = Infinity, min = -Infinity } = attribute ?? {};\n\n  const [addComponentIsOpen, setAddComponentIsOpen] = React.useState(false);\n  const [liveText, setLiveText] = React.useState('');\n  const [openComponentKey, setOpenComponentKey] = React.useState<string | null>(null);\n\n  const {\n    currentDocument: { components, isLoading },\n  } = useDocumentContext('DynamicZone');\n\n  const disabled = disabledProp || isLoading;\n  const addFieldRow = useForm('DynamicZone', (state) => state.addFieldRow);\n  const removeFieldRow = useForm('DynamicZone', (state) => state.removeFieldRow);\n  const moveFieldRow = useForm('DynamicZone', (state) => state.moveFieldRow);\n\n  type DzWithTempKey =\n    Schema.Attribute.GetDynamicZoneValue<Schema.Attribute.DynamicZone>[number] & {\n      __temp_key__: string;\n    };\n\n  const { value: rawValue, error } = useField<Array<DzWithTempKey>>(name);\n  // `value` can be `null` (for example after closing a relation modal). Match\n  // RepeatableComponent: only accept arrays, otherwise treat as empty. (#26815)\n  const value = React.useMemo(() => (Array.isArray(rawValue) ? rawValue : []), [rawValue]);\n\n  /**\n   * Track the previous value array to detect when a new component is added.\n   * When the array grows, we find the newly added item and force its accordion open.\n   * This mirrors the same pattern used in RepeatableComponent.\n   */\n  const prevValue = usePrev(value);\n\n  React.useEffect(() => {\n    if (prevValue && prevValue.length < value.length) {\n      const prevKeys = new Set(prevValue.map((v) => v.__temp_key__));\n      const newItem = value.find((v) => !prevKeys.has(v.__temp_key__));\n      if (newItem) {\n        setOpenComponentKey(newItem.__temp_key__);\n      }\n    } else if (openComponentKey !== null) {\n      // Component was removed before forceOpen was handled — clear stale key\n      const currentKeys = new Set(value.map((v) => v.__temp_key__));\n      if (!currentKeys.has(openComponentKey)) {\n        setOpenComponentKey(null);\n      }\n    }\n  }, [value, prevValue, openComponentKey]);\n\n  const handleForceOpenHandled = React.useCallback(() => {\n    setOpenComponentKey(null);\n  }, []);\n\n  const dynamicComponentsByCategory = React.useMemo(() => {\n    return attribute.components.reduce<\n      NonNullable<DynamicComponentProps['dynamicComponentsByCategory']>\n    >((acc, componentUid) => {\n      const componentSchema = components[componentUid];\n\n      if (!componentSchema) {\n        return acc;\n      }\n\n      const { category, info } = componentSchema;\n\n      const component = {\n        uid: componentUid,\n        displayName: info.displayName,\n        icon: info.icon,\n        preview: info.preview,\n      };\n\n      if (!acc[category]) {\n        acc[category] = [];\n      }\n\n      acc[category] = [...acc[category], component];\n\n      return acc;\n    }, {});\n  }, [attribute.components, components]);\n\n  const { formatMessage } = useIntl();\n\n  const { toggleNotification } = useNotification();\n\n  const dynamicDisplayedComponentsLength = value.length;\n\n  const handleAddComponent = React.useCallback(\n    (uid: string, position?: number) => {\n      const schema = components[uid];\n\n      if (!schema) {\n        return;\n      }\n\n      setAddComponentIsOpen(false);\n\n      const form = createDefaultForm(schema, components);\n      const transformations = pipe(transformDocument(schema, components), (data) => ({\n        ...data,\n        __component: uid,\n      }));\n\n      const data = transformations(form);\n\n      addFieldRow(name, data, position);\n    },\n    [addFieldRow, components, name]\n  );\n\n  const handleClickOpenPicker = () => {\n    if (dynamicDisplayedComponentsLength < max) {\n      setAddComponentIsOpen((prev) => !prev);\n    } else {\n      toggleNotification({\n        type: 'info',\n        message: formatMessage({\n          id: getTranslation('components.notification.info.maximum-requirement'),\n        }),\n      });\n    }\n  };\n\n  const handleMoveComponent = React.useCallback(\n    (newIndex: number, currentIndex: number) => {\n      setLiveText(\n        formatMessage(\n          {\n            id: getTranslation('dnd.reorder'),\n            defaultMessage: '{item}, moved. New position in list: {position}.',\n          },\n          {\n            item: `${name}.${currentIndex}`,\n            position: `${newIndex + 1} of ${value.length}`,\n          }\n        )\n      );\n\n      moveFieldRow(name, currentIndex, newIndex);\n    },\n    [formatMessage, moveFieldRow, name, value.length]\n  );\n\n  const handleCancel = React.useCallback(\n    (index: number) => {\n      setLiveText(\n        formatMessage(\n          {\n            id: getTranslation('dnd.cancel-item'),\n            defaultMessage: '{item}, dropped. Re-order cancelled.',\n          },\n          {\n            item: `${name}.${index}`,\n          }\n        )\n      );\n    },\n    [formatMessage, name]\n  );\n\n  const handleGrabItem = React.useCallback(\n    (index: number) => {\n      setLiveText(\n        formatMessage(\n          {\n            id: getTranslation('dnd.grab-item'),\n            defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`,\n          },\n          {\n            item: `${name}.${index}`,\n            position: `${index + 1} of ${value.length}`,\n          }\n        )\n      );\n    },\n    [formatMessage, name, value.length]\n  );\n\n  const handleDropItem = React.useCallback(\n    (index: number) => {\n      setLiveText(\n        formatMessage(\n          {\n            id: getTranslation('dnd.drop-item'),\n            defaultMessage: `{item}, dropped. Final position in list: {position}.`,\n          },\n          {\n            item: `${name}.${index}`,\n            position: `${index + 1} of ${value.length}`,\n          }\n        )\n      );\n    },\n    [formatMessage, name, value.length]\n  );\n\n  const handleRemoveComponent = React.useCallback(\n    (currentIndex: number) => {\n      removeFieldRow(name, currentIndex);\n    },\n    [name, removeFieldRow]\n  );\n\n  const hasError = error !== undefined;\n\n  const renderButtonLabel = () => {\n    if (addComponentIsOpen) {\n      return formatMessage({ id: 'app.utils.close-label', defaultMessage: 'Close' });\n    }\n\n    if (hasError && dynamicDisplayedComponentsLength > max) {\n      return formatMessage(\n        {\n          id: getTranslation(`components.DynamicZone.extra-components`),\n          defaultMessage:\n            'There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}',\n        },\n        {\n          number: dynamicDisplayedComponentsLength - max,\n        }\n      );\n    }\n\n    if (hasError && dynamicDisplayedComponentsLength < min) {\n      return formatMessage(\n        {\n          id: getTranslation(`components.DynamicZone.missing-components`),\n          defaultMessage:\n            'There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}',\n        },\n        { number: min - dynamicDisplayedComponentsLength }\n      );\n    }\n\n    return formatMessage(\n      {\n        id: getTranslation('components.DynamicZone.add-component'),\n        defaultMessage: 'Add a component to {componentName}',\n      },\n      { componentName: label || name }\n    );\n  };\n\n  const level = useComponent('DynamicZone', (state) => state.level);\n\n  const ariaDescriptionId = React.useId();\n\n  return (\n    <DynamicZoneProvider isInDynamicZone>\n      <Flex direction=\"column\" alignItems=\"stretch\" gap={{ initial: 4, medium: 6 }}>\n        {dynamicDisplayedComponentsLength > 0 && (\n          <Box>\n            <DynamicZoneLabel\n              hint={hint}\n              label={label}\n              labelAction={labelAction}\n              name={name}\n              numberOfComponents={dynamicDisplayedComponentsLength}\n              required={required}\n            />\n            <VisuallyHidden id={ariaDescriptionId}>\n              {formatMessage({\n                id: getTranslation('dnd.instructions'),\n                defaultMessage: `Press spacebar to grab and re-order`,\n              })}\n            </VisuallyHidden>\n            <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\n            <ol aria-describedby={ariaDescriptionId}>\n              {value.map((field, index) => (\n                <ComponentProvider\n                  key={field.__temp_key__}\n                  level={level + 1}\n                  uid={field.__component}\n                  // id is always a number in a dynamic zone.\n                  id={field.id as number}\n                  type=\"dynamiczone\"\n                >\n                  <DynamicComponent\n                    disabled={disabled}\n                    name={name}\n                    index={index}\n                    componentUid={field.__component}\n                    onMoveComponent={handleMoveComponent}\n                    onRemoveComponentClick={handleRemoveComponent}\n                    onCancel={handleCancel}\n                    onDropItem={handleDropItem}\n                    onGrabItem={handleGrabItem}\n                    onAddComponent={handleAddComponent}\n                    dynamicComponentsByCategory={dynamicComponentsByCategory}\n                    totalLength={dynamicDisplayedComponentsLength}\n                    forceOpen={openComponentKey === field.__temp_key__}\n                    onForceOpenHandled={handleForceOpenHandled}\n                  >\n                    {children}\n                  </DynamicComponent>\n                </ComponentProvider>\n              ))}\n            </ol>\n          </Box>\n        )}\n        <Flex justifyContent=\"center\">\n          <AddComponentButton\n            hasError={hasError}\n            isDisabled={disabled}\n            isOpen={addComponentIsOpen}\n            onClick={handleClickOpenPicker}\n          >\n            {renderButtonLabel()}\n          </AddComponentButton>\n        </Flex>\n        <ComponentPicker\n          dynamicComponentsByCategory={dynamicComponentsByCategory}\n          isOpen={addComponentIsOpen}\n          onClickAddComponent={handleAddComponent}\n        />\n      </Flex>\n    </DynamicZoneProvider>\n  );\n};\n\nexport { DynamicZone, useDynamicZone };\nexport type { DynamicZoneProps };\n"],"names":["DynamicZoneProvider","useDynamicZone","createContext","isInDynamicZone","DynamicZone","attribute","disabled","disabledProp","hint","label","labelAction","name","required","children","max","Infinity","min","addComponentIsOpen","setAddComponentIsOpen","React","useState","liveText","setLiveText","openComponentKey","setOpenComponentKey","currentDocument","components","isLoading","useDocumentContext","addFieldRow","useForm","state","removeFieldRow","moveFieldRow","value","rawValue","error","useField","useMemo","Array","isArray","prevValue","usePrev","useEffect","length","prevKeys","Set","map","v","__temp_key__","newItem","find","has","currentKeys","handleForceOpenHandled","useCallback","dynamicComponentsByCategory","reduce","acc","componentUid","componentSchema","category","info","component","uid","displayName","icon","preview","formatMessage","useIntl","toggleNotification","useNotification","dynamicDisplayedComponentsLength","handleAddComponent","position","schema","form","createDefaultForm","transformations","pipe","transformDocument","data","__component","handleClickOpenPicker","prev","type","message","id","getTranslation","handleMoveComponent","newIndex","currentIndex","defaultMessage","item","handleCancel","index","handleGrabItem","handleDropItem","handleRemoveComponent","hasError","undefined","renderButtonLabel","number","componentName","level","useComponent","ariaDescriptionId","useId","_jsx","_jsxs","Flex","direction","alignItems","gap","initial","medium","Box","DynamicZoneLabel","numberOfComponents","VisuallyHidden","aria-live","ol","aria-describedby","field","ComponentProvider","DynamicComponent","onMoveComponent","onRemoveComponentClick","onCancel","onDropItem","onGrabItem","onAddComponent","totalLength","forceOpen","onForceOpenHandled","justifyContent","AddComponentButton","isDisabled","isOpen","onClick","ComponentPicker","onClickAddComponent"],"mappings":"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"}

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

@@ -72,7 +72,8 @@ const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelActi
             const component = {
                 uid: componentUid,
                 displayName: info.displayName,
-                icon: info.icon
+                icon: info.icon,
+                preview: info.preview
             };
             if (!acc[category]) {
                 acc[category] = [];