@strapi/content-type-builder 5.13.1 → 5.15.0

package/dist/admin/components/ComponentCard/ComponentCard.js

@@ -5,7 +5,7 @@ var designSystem = require('@strapi/design-system');
 var Icons = require('@strapi/icons');
 var get = require('lodash/get');
 var styledComponents = require('styled-components');
-var useDataManager = require('../../hooks/useDataManager.js');
+var useDataManager = require('../DataManager/useDataManager.js');
 var ComponentIcon = require('./ComponentIcon/ComponentIcon.js');
 
 const CloseButton = styledComponents.styled(designSystem.Box)`
@@ -56,17 +56,18 @@ const ComponentBox = styledComponents.styled(designSystem.Flex)`
     }
   }
 `;
-const ComponentCard = ({ component, dzName, index, isActive = false, isInDevelopmentMode = false, onClick })=>{
-    const { modifiedData, removeComponentFromDynamicZone } = useDataManager.useDataManager();
-    const { schema: { icon, displayName } } = get(modifiedData, [
-        'components',
-        component
-    ], {
-        schema: {}
-    });
+const ComponentCard = ({ component, dzName, index, isActive = false, isInDevelopmentMode = false, onClick, forTarget, targetUid, disabled })=>{
+    const { components, removeComponentFromDynamicZone } = useDataManager.useDataManager();
+    const type = get(components, component);
+    const { icon, displayName } = type?.info || {};
     const onClose = (e)=>{
         e.stopPropagation();
-        removeComponentFromDynamicZone(dzName, index);
+        removeComponentFromDynamicZone({
+            forTarget,
+            targetUid,
+            dzName,
+            componentToRemoveIndex: index
+        });
     };
     return /*#__PURE__*/ jsxRuntime.jsxs(ComponentBox, {
         alignItems: "center",
@@ -99,7 +100,8 @@ const ComponentCard = ({ component, dzName, index, isActive = false, isInDevelop
                     children: displayName
                 })
             }),
-            isInDevelopmentMode && /*#__PURE__*/ jsxRuntime.jsx(CloseButton, {
+            isInDevelopmentMode && !disabled && /*#__PURE__*/ jsxRuntime.jsx(CloseButton, {
+                cursor: "pointer",
                 tag: "button",
                 onClick: onClose,
                 children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Cross, {})

package/dist/admin/components/ComponentCard/ComponentCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentCard.js","sources":["../../../../admin/src/components/ComponentCard/ComponentCard.tsx"],"sourcesContent":["import { Box, Flex, Typography } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport get from 'lodash/get';\nimport { styled } from 'styled-components';\n\nimport { useDataManager } from '../../hooks/useDataManager';\n\nimport { ComponentIcon } from './ComponentIcon';\n\ninterface ComponentCardProps {\n  component: string;\n  dzName: string;\n  index: number;\n  isActive?: boolean;\n  isInDevelopmentMode?: boolean;\n  onClick?: () => void;\n}\n\nconst CloseButton = styled(Box)`\n  position: absolute;\n  display: none;\n  top: 5px;\n  right: 0.8rem;\n\n  svg {\n    width: 1rem;\n    height: 1rem;\n\n    path {\n      fill: ${({ theme }) => theme.colors.primary600};\n    }\n  }\n`;\n\nconst ComponentBox = styled(Flex)`\n  width: 14rem;\n  height: 8rem;\n  position: relative;\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  background: ${({ theme }) => theme.colors.neutral100};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  max-width: 100%;\n\n  &.active,\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    ${CloseButton} {\n      display: block;\n    }\n\n    /* > ComponentIcon */\n    > div:first-child {\n      background: ${({ theme }) => theme.colors.primary200};\n      color: ${({ theme }) => theme.colors.primary600};\n\n      svg {\n        path {\n          fill: ${({ theme }) => theme.colors.primary600};\n        }\n      }\n    }\n  }\n`;\n\nexport const ComponentCard = ({\n  component,\n  dzName,\n  index,\n  isActive = false,\n  isInDevelopmentMode = false,\n  onClick,\n}: ComponentCardProps) => {\n  const { modifiedData, removeComponentFromDynamicZone } = useDataManager();\n  const {\n    schema: { icon, displayName },\n  } = get(modifiedData, ['components', component], { schema: {} });\n\n  const onClose = (e: any) => {\n    e.stopPropagation();\n    removeComponentFromDynamicZone(dzName, index);\n  };\n\n  return (\n    <ComponentBox\n      alignItems=\"center\"\n      direction=\"column\"\n      className={isActive ? 'active' : ''}\n      borderRadius=\"borderRadius\"\n      justifyContent=\"center\"\n      paddingLeft={4}\n      paddingRight={4}\n      shrink={0}\n      onClick={onClick}\n      role=\"tab\"\n      tabIndex={isActive ? 0 : -1}\n      cursor=\"pointer\"\n      aria-selected={isActive}\n      aria-controls={`dz-${dzName}-panel-${index}`}\n      id={`dz-${dzName}-tab-${index}`}\n    >\n      <ComponentIcon icon={icon} isActive={isActive} />\n\n      <Box marginTop={1} maxWidth=\"100%\">\n        <Typography variant=\"pi\" fontWeight=\"bold\" ellipsis>\n          {displayName}\n        </Typography>\n      </Box>\n\n      {isInDevelopmentMode && (\n        <CloseButton tag=\"button\" onClick={onClose}>\n          <Cross />\n        </CloseButton>\n      )}\n    </ComponentBox>\n  );\n};\n"],"names":["CloseButton","styled","Box","theme","colors","primary600","ComponentBox","Flex","neutral200","neutral100","borderRadius","primary200","primary100","ComponentCard","component","dzName","index","isActive","isInDevelopmentMode","onClick","modifiedData","removeComponentFromDynamicZone","useDataManager","schema","icon","displayName","get","onClose","e","stopPropagation","_jsxs","alignItems","direction","className","justifyContent","paddingLeft","paddingRight","shrink","role","tabIndex","cursor","aria-selected","aria-controls","id","_jsx","ComponentIcon","marginTop","maxWidth","Typography","variant","fontWeight","ellipsis","tag","Cross"],"mappings":"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"}
+{"version":3,"file":"ComponentCard.js","sources":["../../../../admin/src/components/ComponentCard/ComponentCard.tsx"],"sourcesContent":["import { Box, Flex, Typography } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport get from 'lodash/get';\nimport { styled } from 'styled-components';\n\nimport { useDataManager } from '../DataManager/useDataManager';\n\nimport { ComponentIcon } from './ComponentIcon';\n\nimport type { Internal, Struct } from '@strapi/types';\n\ninterface ComponentCardProps {\n  component: string;\n  dzName: string;\n  index: number;\n  isActive?: boolean;\n  isInDevelopmentMode?: boolean;\n  onClick?: () => void;\n  forTarget: Struct.ModelType;\n  targetUid: Internal.UID.Schema;\n  disabled?: boolean;\n}\n\nconst CloseButton = styled(Box)`\n  position: absolute;\n  display: none;\n  top: 5px;\n  right: 0.8rem;\n\n  svg {\n    width: 1rem;\n    height: 1rem;\n\n    path {\n      fill: ${({ theme }) => theme.colors.primary600};\n    }\n  }\n`;\n\nconst ComponentBox = styled(Flex)`\n  width: 14rem;\n  height: 8rem;\n  position: relative;\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  background: ${({ theme }) => theme.colors.neutral100};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  max-width: 100%;\n\n  &.active,\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    ${CloseButton} {\n      display: block;\n    }\n\n    /* > ComponentIcon */\n    > div:first-child {\n      background: ${({ theme }) => theme.colors.primary200};\n      color: ${({ theme }) => theme.colors.primary600};\n\n      svg {\n        path {\n          fill: ${({ theme }) => theme.colors.primary600};\n        }\n      }\n    }\n  }\n`;\n\nexport const ComponentCard = ({\n  component,\n  dzName,\n  index,\n  isActive = false,\n  isInDevelopmentMode = false,\n  onClick,\n  forTarget,\n  targetUid,\n  disabled,\n}: ComponentCardProps) => {\n  const { components, removeComponentFromDynamicZone } = useDataManager();\n  const type = get(components, component);\n  const { icon, displayName } = type?.info || {};\n\n  const onClose = (e: any) => {\n    e.stopPropagation();\n    removeComponentFromDynamicZone({\n      forTarget,\n      targetUid,\n      dzName,\n      componentToRemoveIndex: index,\n    });\n  };\n\n  return (\n    <ComponentBox\n      alignItems=\"center\"\n      direction=\"column\"\n      className={isActive ? 'active' : ''}\n      borderRadius=\"borderRadius\"\n      justifyContent=\"center\"\n      paddingLeft={4}\n      paddingRight={4}\n      shrink={0}\n      onClick={onClick}\n      role=\"tab\"\n      tabIndex={isActive ? 0 : -1}\n      cursor=\"pointer\"\n      aria-selected={isActive}\n      aria-controls={`dz-${dzName}-panel-${index}`}\n      id={`dz-${dzName}-tab-${index}`}\n    >\n      <ComponentIcon icon={icon} isActive={isActive} />\n\n      <Box marginTop={1} maxWidth=\"100%\">\n        <Typography variant=\"pi\" fontWeight=\"bold\" ellipsis>\n          {displayName}\n        </Typography>\n      </Box>\n\n      {isInDevelopmentMode && !disabled && (\n        <CloseButton cursor=\"pointer\" tag=\"button\" onClick={onClose}>\n          <Cross />\n        </CloseButton>\n      )}\n    </ComponentBox>\n  );\n};\n"],"names":["CloseButton","styled","Box","theme","colors","primary600","ComponentBox","Flex","neutral200","neutral100","borderRadius","primary200","primary100","ComponentCard","component","dzName","index","isActive","isInDevelopmentMode","onClick","forTarget","targetUid","disabled","components","removeComponentFromDynamicZone","useDataManager","type","get","icon","displayName","info","onClose","e","stopPropagation","componentToRemoveIndex","_jsxs","alignItems","direction","className","justifyContent","paddingLeft","paddingRight","shrink","role","tabIndex","cursor","aria-selected","aria-controls","id","_jsx","ComponentIcon","marginTop","maxWidth","Typography","variant","fontWeight","ellipsis","tag","Cross"],"mappings":"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"}

package/dist/admin/components/ComponentCard/ComponentCard.mjs

@@ -3,7 +3,7 @@ import { Box, Flex, Typography } from '@strapi/design-system';
 import { Cross } from '@strapi/icons';
 import get from 'lodash/get';
 import { styled } from 'styled-components';
-import { useDataManager } from '../../hooks/useDataManager.mjs';
+import { useDataManager } from '../DataManager/useDataManager.mjs';
 import { ComponentIcon } from './ComponentIcon/ComponentIcon.mjs';
 
 const CloseButton = styled(Box)`
@@ -54,17 +54,18 @@ const ComponentBox = styled(Flex)`
     }
   }
 `;
-const ComponentCard = ({ component, dzName, index, isActive = false, isInDevelopmentMode = false, onClick })=>{
-    const { modifiedData, removeComponentFromDynamicZone } = useDataManager();
-    const { schema: { icon, displayName } } = get(modifiedData, [
-        'components',
-        component
-    ], {
-        schema: {}
-    });
+const ComponentCard = ({ component, dzName, index, isActive = false, isInDevelopmentMode = false, onClick, forTarget, targetUid, disabled })=>{
+    const { components, removeComponentFromDynamicZone } = useDataManager();
+    const type = get(components, component);
+    const { icon, displayName } = type?.info || {};
     const onClose = (e)=>{
         e.stopPropagation();
-        removeComponentFromDynamicZone(dzName, index);
+        removeComponentFromDynamicZone({
+            forTarget,
+            targetUid,
+            dzName,
+            componentToRemoveIndex: index
+        });
     };
     return /*#__PURE__*/ jsxs(ComponentBox, {
         alignItems: "center",
@@ -97,7 +98,8 @@ const ComponentCard = ({ component, dzName, index, isActive = false, isInDevelop
                     children: displayName
                 })
             }),
-            isInDevelopmentMode && /*#__PURE__*/ jsx(CloseButton, {
+            isInDevelopmentMode && !disabled && /*#__PURE__*/ jsx(CloseButton, {
+                cursor: "pointer",
                 tag: "button",
                 onClick: onClose,
                 children: /*#__PURE__*/ jsx(Cross, {})

package/dist/admin/components/ComponentCard/ComponentCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentCard.mjs","sources":["../../../../admin/src/components/ComponentCard/ComponentCard.tsx"],"sourcesContent":["import { Box, Flex, Typography } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport get from 'lodash/get';\nimport { styled } from 'styled-components';\n\nimport { useDataManager } from '../../hooks/useDataManager';\n\nimport { ComponentIcon } from './ComponentIcon';\n\ninterface ComponentCardProps {\n  component: string;\n  dzName: string;\n  index: number;\n  isActive?: boolean;\n  isInDevelopmentMode?: boolean;\n  onClick?: () => void;\n}\n\nconst CloseButton = styled(Box)`\n  position: absolute;\n  display: none;\n  top: 5px;\n  right: 0.8rem;\n\n  svg {\n    width: 1rem;\n    height: 1rem;\n\n    path {\n      fill: ${({ theme }) => theme.colors.primary600};\n    }\n  }\n`;\n\nconst ComponentBox = styled(Flex)`\n  width: 14rem;\n  height: 8rem;\n  position: relative;\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  background: ${({ theme }) => theme.colors.neutral100};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  max-width: 100%;\n\n  &.active,\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    ${CloseButton} {\n      display: block;\n    }\n\n    /* > ComponentIcon */\n    > div:first-child {\n      background: ${({ theme }) => theme.colors.primary200};\n      color: ${({ theme }) => theme.colors.primary600};\n\n      svg {\n        path {\n          fill: ${({ theme }) => theme.colors.primary600};\n        }\n      }\n    }\n  }\n`;\n\nexport const ComponentCard = ({\n  component,\n  dzName,\n  index,\n  isActive = false,\n  isInDevelopmentMode = false,\n  onClick,\n}: ComponentCardProps) => {\n  const { modifiedData, removeComponentFromDynamicZone } = useDataManager();\n  const {\n    schema: { icon, displayName },\n  } = get(modifiedData, ['components', component], { schema: {} });\n\n  const onClose = (e: any) => {\n    e.stopPropagation();\n    removeComponentFromDynamicZone(dzName, index);\n  };\n\n  return (\n    <ComponentBox\n      alignItems=\"center\"\n      direction=\"column\"\n      className={isActive ? 'active' : ''}\n      borderRadius=\"borderRadius\"\n      justifyContent=\"center\"\n      paddingLeft={4}\n      paddingRight={4}\n      shrink={0}\n      onClick={onClick}\n      role=\"tab\"\n      tabIndex={isActive ? 0 : -1}\n      cursor=\"pointer\"\n      aria-selected={isActive}\n      aria-controls={`dz-${dzName}-panel-${index}`}\n      id={`dz-${dzName}-tab-${index}`}\n    >\n      <ComponentIcon icon={icon} isActive={isActive} />\n\n      <Box marginTop={1} maxWidth=\"100%\">\n        <Typography variant=\"pi\" fontWeight=\"bold\" ellipsis>\n          {displayName}\n        </Typography>\n      </Box>\n\n      {isInDevelopmentMode && (\n        <CloseButton tag=\"button\" onClick={onClose}>\n          <Cross />\n        </CloseButton>\n      )}\n    </ComponentBox>\n  );\n};\n"],"names":["CloseButton","styled","Box","theme","colors","primary600","ComponentBox","Flex","neutral200","neutral100","borderRadius","primary200","primary100","ComponentCard","component","dzName","index","isActive","isInDevelopmentMode","onClick","modifiedData","removeComponentFromDynamicZone","useDataManager","schema","icon","displayName","get","onClose","e","stopPropagation","_jsxs","alignItems","direction","className","justifyContent","paddingLeft","paddingRight","shrink","role","tabIndex","cursor","aria-selected","aria-controls","id","_jsx","ComponentIcon","marginTop","maxWidth","Typography","variant","fontWeight","ellipsis","tag","Cross"],"mappings":"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"}
+{"version":3,"file":"ComponentCard.mjs","sources":["../../../../admin/src/components/ComponentCard/ComponentCard.tsx"],"sourcesContent":["import { Box, Flex, Typography } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport get from 'lodash/get';\nimport { styled } from 'styled-components';\n\nimport { useDataManager } from '../DataManager/useDataManager';\n\nimport { ComponentIcon } from './ComponentIcon';\n\nimport type { Internal, Struct } from '@strapi/types';\n\ninterface ComponentCardProps {\n  component: string;\n  dzName: string;\n  index: number;\n  isActive?: boolean;\n  isInDevelopmentMode?: boolean;\n  onClick?: () => void;\n  forTarget: Struct.ModelType;\n  targetUid: Internal.UID.Schema;\n  disabled?: boolean;\n}\n\nconst CloseButton = styled(Box)`\n  position: absolute;\n  display: none;\n  top: 5px;\n  right: 0.8rem;\n\n  svg {\n    width: 1rem;\n    height: 1rem;\n\n    path {\n      fill: ${({ theme }) => theme.colors.primary600};\n    }\n  }\n`;\n\nconst ComponentBox = styled(Flex)`\n  width: 14rem;\n  height: 8rem;\n  position: relative;\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  background: ${({ theme }) => theme.colors.neutral100};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  max-width: 100%;\n\n  &.active,\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    ${CloseButton} {\n      display: block;\n    }\n\n    /* > ComponentIcon */\n    > div:first-child {\n      background: ${({ theme }) => theme.colors.primary200};\n      color: ${({ theme }) => theme.colors.primary600};\n\n      svg {\n        path {\n          fill: ${({ theme }) => theme.colors.primary600};\n        }\n      }\n    }\n  }\n`;\n\nexport const ComponentCard = ({\n  component,\n  dzName,\n  index,\n  isActive = false,\n  isInDevelopmentMode = false,\n  onClick,\n  forTarget,\n  targetUid,\n  disabled,\n}: ComponentCardProps) => {\n  const { components, removeComponentFromDynamicZone } = useDataManager();\n  const type = get(components, component);\n  const { icon, displayName } = type?.info || {};\n\n  const onClose = (e: any) => {\n    e.stopPropagation();\n    removeComponentFromDynamicZone({\n      forTarget,\n      targetUid,\n      dzName,\n      componentToRemoveIndex: index,\n    });\n  };\n\n  return (\n    <ComponentBox\n      alignItems=\"center\"\n      direction=\"column\"\n      className={isActive ? 'active' : ''}\n      borderRadius=\"borderRadius\"\n      justifyContent=\"center\"\n      paddingLeft={4}\n      paddingRight={4}\n      shrink={0}\n      onClick={onClick}\n      role=\"tab\"\n      tabIndex={isActive ? 0 : -1}\n      cursor=\"pointer\"\n      aria-selected={isActive}\n      aria-controls={`dz-${dzName}-panel-${index}`}\n      id={`dz-${dzName}-tab-${index}`}\n    >\n      <ComponentIcon icon={icon} isActive={isActive} />\n\n      <Box marginTop={1} maxWidth=\"100%\">\n        <Typography variant=\"pi\" fontWeight=\"bold\" ellipsis>\n          {displayName}\n        </Typography>\n      </Box>\n\n      {isInDevelopmentMode && !disabled && (\n        <CloseButton cursor=\"pointer\" tag=\"button\" onClick={onClose}>\n          <Cross />\n        </CloseButton>\n      )}\n    </ComponentBox>\n  );\n};\n"],"names":["CloseButton","styled","Box","theme","colors","primary600","ComponentBox","Flex","neutral200","neutral100","borderRadius","primary200","primary100","ComponentCard","component","dzName","index","isActive","isInDevelopmentMode","onClick","forTarget","targetUid","disabled","components","removeComponentFromDynamicZone","useDataManager","type","get","icon","displayName","info","onClose","e","stopPropagation","componentToRemoveIndex","_jsxs","alignItems","direction","className","justifyContent","paddingLeft","paddingRight","shrink","role","tabIndex","cursor","aria-selected","aria-controls","id","_jsx","ComponentIcon","marginTop","maxWidth","Typography","variant","fontWeight","ellipsis","tag","Cross"],"mappings":"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"}

package/dist/admin/components/ComponentList.js

@@ -2,36 +2,22 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var get = require('lodash/get');
-var useDataManager = require('../hooks/useDataManager.js');
+var ComponentRow = require('./ComponentRow.js');
+var useDataManager = require('./DataManager/useDataManager.js');
 var List = require('./List.js');
-var Tr = require('./Tr.js');
 
-const ComponentList = ({ customRowComponent, component, isFromDynamicZone = false, isNestedInDZComponent = false, firstLoopComponentUid })=>{
-    const { modifiedData } = useDataManager.useDataManager();
-    const { schema: { attributes } } = get(modifiedData, [
-        'components',
-        component
-    ], {
-        schema: {
-            attributes: []
-        }
-    });
-    return /*#__PURE__*/ jsxRuntime.jsx(Tr.Tr, {
+const ComponentList = ({ component, isFromDynamicZone = false, firstLoopComponentUid })=>{
+    const { components } = useDataManager.useDataManager();
+    const type = get(components, component);
+    return /*#__PURE__*/ jsxRuntime.jsx(ComponentRow.ComponentRow, {
         $isChildOfDynamicZone: isFromDynamicZone,
         className: "component-row",
-        children: /*#__PURE__*/ jsxRuntime.jsx("td", {
-            colSpan: 12,
-            children: /*#__PURE__*/ jsxRuntime.jsx(List.List, {
-                customRowComponent: customRowComponent,
-                items: attributes,
-                targetUid: component,
-                firstLoopComponentUid: firstLoopComponentUid || component,
-                editTarget: "components",
-                isFromDynamicZone: isFromDynamicZone,
-                isNestedInDZComponent: isNestedInDZComponent,
-                isSub: true,
-                secondLoopComponentUid: firstLoopComponentUid ? component : null
-            })
+        children: /*#__PURE__*/ jsxRuntime.jsx(List.List, {
+            type: type,
+            firstLoopComponentUid: firstLoopComponentUid || component,
+            isFromDynamicZone: isFromDynamicZone,
+            isSub: true,
+            secondLoopComponentUid: firstLoopComponentUid ? component : null
         })
     });
 };

package/dist/admin/components/ComponentList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentList.js","sources":["../../../admin/src/components/ComponentList.tsx"],"sourcesContent":["import get from 'lodash/get';\n\nimport { useDataManager } from '../hooks/useDataManager';\n\nimport { List } from './List';\nimport { Tr } from './Tr';\n\nimport type { Internal } from '@strapi/types';\n\ninterface ComponentListProps {\n  component: Internal.UID.Component;\n  customRowComponent: any;\n  firstLoopComponentUid?: string;\n  isFromDynamicZone?: boolean;\n  isNestedInDZComponent?: boolean;\n}\n\nexport const ComponentList = ({\n  customRowComponent,\n  component,\n  isFromDynamicZone = false,\n  isNestedInDZComponent = false,\n  firstLoopComponentUid,\n}: ComponentListProps) => {\n  const { modifiedData } = useDataManager();\n  const {\n    schema: { attributes },\n  } = get(modifiedData, ['components', component], {\n    schema: { attributes: [] },\n  });\n\n  return (\n    <Tr $isChildOfDynamicZone={isFromDynamicZone} className=\"component-row\">\n      <td colSpan={12}>\n        <List\n          customRowComponent={customRowComponent}\n          items={attributes}\n          targetUid={component}\n          firstLoopComponentUid={firstLoopComponentUid || component}\n          editTarget=\"components\"\n          isFromDynamicZone={isFromDynamicZone}\n          isNestedInDZComponent={isNestedInDZComponent}\n          isSub\n          secondLoopComponentUid={firstLoopComponentUid ? component : null}\n        />\n      </td>\n    </Tr>\n  );\n};\n"],"names":["ComponentList","customRowComponent","component","isFromDynamicZone","isNestedInDZComponent","firstLoopComponentUid","modifiedData","useDataManager","schema","attributes","get","_jsx","Tr","$isChildOfDynamicZone","className","td","colSpan","List","items","targetUid","editTarget","isSub","secondLoopComponentUid"],"mappings":";;;;;;;;AAiBaA,MAAAA,aAAAA,GAAgB,CAAC,EAC5BC,kBAAkB,EAClBC,SAAS,EACTC,iBAAAA,GAAoB,KAAK,EACzBC,qBAAAA,GAAwB,KAAK,EAC7BC,qBAAqB,EACF,GAAA;IACnB,MAAM,EAAEC,YAAY,EAAE,GAAGC,6BAAAA,EAAAA;IACzB,MAAM,EACJC,QAAQ,EAAEC,UAAU,EAAE,EACvB,GAAGC,IAAIJ,YAAc,EAAA;AAAC,QAAA,YAAA;AAAcJ,QAAAA;KAAU,EAAE;QAC/CM,MAAQ,EAAA;AAAEC,YAAAA,UAAAA,EAAY;AAAG;AAC3B,KAAA,CAAA;AAEA,IAAA,qBACEE,cAACC,CAAAA,KAAAA,EAAAA;QAAGC,qBAAuBV,EAAAA,iBAAAA;QAAmBW,SAAU,EAAA,eAAA;AACtD,QAAA,QAAA,gBAAAH,cAACI,CAAAA,IAAAA,EAAAA;YAAGC,OAAS,EAAA,EAAA;AACX,YAAA,QAAA,gBAAAL,cAACM,CAAAA,SAAAA,EAAAA;gBACChB,kBAAoBA,EAAAA,kBAAAA;gBACpBiB,KAAOT,EAAAA,UAAAA;gBACPU,SAAWjB,EAAAA,SAAAA;AACXG,gBAAAA,qBAAAA,EAAuBA,qBAAyBH,IAAAA,SAAAA;gBAChDkB,UAAW,EAAA,YAAA;gBACXjB,iBAAmBA,EAAAA,iBAAAA;gBACnBC,qBAAuBA,EAAAA,qBAAAA;gBACvBiB,KAAK,EAAA,IAAA;AACLC,gBAAAA,sBAAAA,EAAwBjB,wBAAwBH,SAAY,GAAA;;;;AAKtE;;;;"}
+{"version":3,"file":"ComponentList.js","sources":["../../../admin/src/components/ComponentList.tsx"],"sourcesContent":["import { Box } from '@strapi/design-system';\nimport get from 'lodash/get';\n\nimport { ComponentRow } from './ComponentRow';\nimport { useDataManager } from './DataManager/useDataManager';\nimport { List } from './List';\n\nimport type { UID } from '@strapi/types';\n\ninterface ComponentListProps {\n  component: UID.Component;\n  firstLoopComponentUid?: UID.Component | null;\n  isFromDynamicZone?: boolean;\n}\n\nexport const ComponentList = ({\n  component,\n  isFromDynamicZone = false,\n  firstLoopComponentUid,\n}: ComponentListProps) => {\n  const { components } = useDataManager();\n  const type = get(components, component);\n\n  return (\n    <ComponentRow $isChildOfDynamicZone={isFromDynamicZone} className=\"component-row\">\n      <List\n        type={type}\n        firstLoopComponentUid={firstLoopComponentUid || component}\n        isFromDynamicZone={isFromDynamicZone}\n        isSub\n        secondLoopComponentUid={firstLoopComponentUid ? component : null}\n      />\n    </ComponentRow>\n  );\n};\n"],"names":["ComponentList","component","isFromDynamicZone","firstLoopComponentUid","components","useDataManager","type","get","_jsx","ComponentRow","$isChildOfDynamicZone","className","List","isSub","secondLoopComponentUid"],"mappings":";;;;;;;;AAeO,MAAMA,aAAgB,GAAA,CAAC,EAC5BC,SAAS,EACTC,iBAAoB,GAAA,KAAK,EACzBC,qBAAqB,EACF,GAAA;IACnB,MAAM,EAAEC,UAAU,EAAE,GAAGC,6BAAAA,EAAAA;IACvB,MAAMC,IAAAA,GAAOC,IAAIH,UAAYH,EAAAA,SAAAA,CAAAA;AAE7B,IAAA,qBACEO,cAACC,CAAAA,yBAAAA,EAAAA;QAAaC,qBAAuBR,EAAAA,iBAAAA;QAAmBS,SAAU,EAAA,eAAA;AAChE,QAAA,QAAA,gBAAAH,cAACI,CAAAA,SAAAA,EAAAA;YACCN,IAAMA,EAAAA,IAAAA;AACNH,YAAAA,qBAAAA,EAAuBA,qBAAyBF,IAAAA,SAAAA;YAChDC,iBAAmBA,EAAAA,iBAAAA;YACnBW,KAAK,EAAA,IAAA;AACLC,YAAAA,sBAAAA,EAAwBX,wBAAwBF,SAAY,GAAA;;;AAIpE;;;;"}

package/dist/admin/components/ComponentList.mjs

@@ -1,35 +1,21 @@
 import { jsx } from 'react/jsx-runtime';
 import get from 'lodash/get';
-import { useDataManager } from '../hooks/useDataManager.mjs';
+import { ComponentRow } from './ComponentRow.mjs';
+import { useDataManager } from './DataManager/useDataManager.mjs';
 import { List } from './List.mjs';
-import { Tr } from './Tr.mjs';
 
-const ComponentList = ({ customRowComponent, component, isFromDynamicZone = false, isNestedInDZComponent = false, firstLoopComponentUid })=>{
-    const { modifiedData } = useDataManager();
-    const { schema: { attributes } } = get(modifiedData, [
-        'components',
-        component
-    ], {
-        schema: {
-            attributes: []
-        }
-    });
-    return /*#__PURE__*/ jsx(Tr, {
+const ComponentList = ({ component, isFromDynamicZone = false, firstLoopComponentUid })=>{
+    const { components } = useDataManager();
+    const type = get(components, component);
+    return /*#__PURE__*/ jsx(ComponentRow, {
         $isChildOfDynamicZone: isFromDynamicZone,
         className: "component-row",
-        children: /*#__PURE__*/ jsx("td", {
-            colSpan: 12,
-            children: /*#__PURE__*/ jsx(List, {
-                customRowComponent: customRowComponent,
-                items: attributes,
-                targetUid: component,
-                firstLoopComponentUid: firstLoopComponentUid || component,
-                editTarget: "components",
-                isFromDynamicZone: isFromDynamicZone,
-                isNestedInDZComponent: isNestedInDZComponent,
-                isSub: true,
-                secondLoopComponentUid: firstLoopComponentUid ? component : null
-            })
+        children: /*#__PURE__*/ jsx(List, {
+            type: type,
+            firstLoopComponentUid: firstLoopComponentUid || component,
+            isFromDynamicZone: isFromDynamicZone,
+            isSub: true,
+            secondLoopComponentUid: firstLoopComponentUid ? component : null
         })
     });
 };

package/dist/admin/components/ComponentList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentList.mjs","sources":["../../../admin/src/components/ComponentList.tsx"],"sourcesContent":["import get from 'lodash/get';\n\nimport { useDataManager } from '../hooks/useDataManager';\n\nimport { List } from './List';\nimport { Tr } from './Tr';\n\nimport type { Internal } from '@strapi/types';\n\ninterface ComponentListProps {\n  component: Internal.UID.Component;\n  customRowComponent: any;\n  firstLoopComponentUid?: string;\n  isFromDynamicZone?: boolean;\n  isNestedInDZComponent?: boolean;\n}\n\nexport const ComponentList = ({\n  customRowComponent,\n  component,\n  isFromDynamicZone = false,\n  isNestedInDZComponent = false,\n  firstLoopComponentUid,\n}: ComponentListProps) => {\n  const { modifiedData } = useDataManager();\n  const {\n    schema: { attributes },\n  } = get(modifiedData, ['components', component], {\n    schema: { attributes: [] },\n  });\n\n  return (\n    <Tr $isChildOfDynamicZone={isFromDynamicZone} className=\"component-row\">\n      <td colSpan={12}>\n        <List\n          customRowComponent={customRowComponent}\n          items={attributes}\n          targetUid={component}\n          firstLoopComponentUid={firstLoopComponentUid || component}\n          editTarget=\"components\"\n          isFromDynamicZone={isFromDynamicZone}\n          isNestedInDZComponent={isNestedInDZComponent}\n          isSub\n          secondLoopComponentUid={firstLoopComponentUid ? component : null}\n        />\n      </td>\n    </Tr>\n  );\n};\n"],"names":["ComponentList","customRowComponent","component","isFromDynamicZone","isNestedInDZComponent","firstLoopComponentUid","modifiedData","useDataManager","schema","attributes","get","_jsx","Tr","$isChildOfDynamicZone","className","td","colSpan","List","items","targetUid","editTarget","isSub","secondLoopComponentUid"],"mappings":";;;;;;AAiBaA,MAAAA,aAAAA,GAAgB,CAAC,EAC5BC,kBAAkB,EAClBC,SAAS,EACTC,iBAAAA,GAAoB,KAAK,EACzBC,qBAAAA,GAAwB,KAAK,EAC7BC,qBAAqB,EACF,GAAA;IACnB,MAAM,EAAEC,YAAY,EAAE,GAAGC,cAAAA,EAAAA;IACzB,MAAM,EACJC,QAAQ,EAAEC,UAAU,EAAE,EACvB,GAAGC,IAAIJ,YAAc,EAAA;AAAC,QAAA,YAAA;AAAcJ,QAAAA;KAAU,EAAE;QAC/CM,MAAQ,EAAA;AAAEC,YAAAA,UAAAA,EAAY;AAAG;AAC3B,KAAA,CAAA;AAEA,IAAA,qBACEE,GAACC,CAAAA,EAAAA,EAAAA;QAAGC,qBAAuBV,EAAAA,iBAAAA;QAAmBW,SAAU,EAAA,eAAA;AACtD,QAAA,QAAA,gBAAAH,GAACI,CAAAA,IAAAA,EAAAA;YAAGC,OAAS,EAAA,EAAA;AACX,YAAA,QAAA,gBAAAL,GAACM,CAAAA,IAAAA,EAAAA;gBACChB,kBAAoBA,EAAAA,kBAAAA;gBACpBiB,KAAOT,EAAAA,UAAAA;gBACPU,SAAWjB,EAAAA,SAAAA;AACXG,gBAAAA,qBAAAA,EAAuBA,qBAAyBH,IAAAA,SAAAA;gBAChDkB,UAAW,EAAA,YAAA;gBACXjB,iBAAmBA,EAAAA,iBAAAA;gBACnBC,qBAAuBA,EAAAA,qBAAAA;gBACvBiB,KAAK,EAAA,IAAA;AACLC,gBAAAA,sBAAAA,EAAwBjB,wBAAwBH,SAAY,GAAA;;;;AAKtE;;;;"}
+{"version":3,"file":"ComponentList.mjs","sources":["../../../admin/src/components/ComponentList.tsx"],"sourcesContent":["import { Box } from '@strapi/design-system';\nimport get from 'lodash/get';\n\nimport { ComponentRow } from './ComponentRow';\nimport { useDataManager } from './DataManager/useDataManager';\nimport { List } from './List';\n\nimport type { UID } from '@strapi/types';\n\ninterface ComponentListProps {\n  component: UID.Component;\n  firstLoopComponentUid?: UID.Component | null;\n  isFromDynamicZone?: boolean;\n}\n\nexport const ComponentList = ({\n  component,\n  isFromDynamicZone = false,\n  firstLoopComponentUid,\n}: ComponentListProps) => {\n  const { components } = useDataManager();\n  const type = get(components, component);\n\n  return (\n    <ComponentRow $isChildOfDynamicZone={isFromDynamicZone} className=\"component-row\">\n      <List\n        type={type}\n        firstLoopComponentUid={firstLoopComponentUid || component}\n        isFromDynamicZone={isFromDynamicZone}\n        isSub\n        secondLoopComponentUid={firstLoopComponentUid ? component : null}\n      />\n    </ComponentRow>\n  );\n};\n"],"names":["ComponentList","component","isFromDynamicZone","firstLoopComponentUid","components","useDataManager","type","get","_jsx","ComponentRow","$isChildOfDynamicZone","className","List","isSub","secondLoopComponentUid"],"mappings":";;;;;;AAeO,MAAMA,aAAgB,GAAA,CAAC,EAC5BC,SAAS,EACTC,iBAAoB,GAAA,KAAK,EACzBC,qBAAqB,EACF,GAAA;IACnB,MAAM,EAAEC,UAAU,EAAE,GAAGC,cAAAA,EAAAA;IACvB,MAAMC,IAAAA,GAAOC,IAAIH,UAAYH,EAAAA,SAAAA,CAAAA;AAE7B,IAAA,qBACEO,GAACC,CAAAA,YAAAA,EAAAA;QAAaC,qBAAuBR,EAAAA,iBAAAA;QAAmBS,SAAU,EAAA,eAAA;AAChE,QAAA,QAAA,gBAAAH,GAACI,CAAAA,IAAAA,EAAAA;YACCN,IAAMA,EAAAA,IAAAA;AACNH,YAAAA,qBAAAA,EAAuBA,qBAAyBF,IAAAA,SAAAA;YAChDC,iBAAmBA,EAAAA,iBAAAA;YACnBW,KAAK,EAAA,IAAA;AACLC,YAAAA,sBAAAA,EAAwBX,wBAAwBF,SAAY,GAAA;;;AAIpE;;;;"}

package/dist/admin/components/{Tr.js → ComponentRow.js}

@@ -1,29 +1,23 @@
 'use strict';
 
+var designSystem = require('@strapi/design-system');
 var styledComponents = require('styled-components');
 
-// Keep component-row for css specificity
-const Tr = styledComponents.styled.tr`
+const ComponentRow = styledComponents.styled(designSystem.Box)`
   &.component-row,
   &.dynamiczone-row {
     position: relative;
-    border-top: none !important;
 
-    table tr:first-child {
-      border-top: none;
-    }
-
-    > td:first-of-type {
-      padding: 0 0 0 2rem;
+    > ul:first-of-type {
+      padding: 0 0 0 104px;
       position: relative;
 
       &::before {
         content: '';
         width: 0.4rem;
-        height: calc(100% - 40px);
+        height: ${({ $isFromDynamicZone })=>$isFromDynamicZone ? 'calc(100% - 65px)' : 'calc(100%)'};
         position: absolute;
-        top: -7px;
-        left: 2.6rem;
+        left: 7rem;
         border-radius: 4px;
 
         ${({ $isFromDynamicZone, $isChildOfDynamicZone, theme })=>{
@@ -39,10 +33,10 @@ const Tr = styledComponents.styled.tr`
     }
   }
 
-  &.dynamiczone-row > td:first-of-type {
+  &.dynamiczone-row > ul:first-of-type {
     padding: 0;
   }
 `;
 
-exports.Tr = Tr;
-//# sourceMappingURL=Tr.js.map
+exports.ComponentRow = ComponentRow;
+//# sourceMappingURL=ComponentRow.js.map

package/dist/admin/components/ComponentRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentRow.js","sources":["../../../admin/src/components/ComponentRow.tsx"],"sourcesContent":["import { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nexport const ComponentRow = styled(Box)<{\n  $isFromDynamicZone?: boolean;\n  $isChildOfDynamicZone?: boolean;\n}>`\n  &.component-row,\n  &.dynamiczone-row {\n    position: relative;\n\n    > ul:first-of-type {\n      padding: 0 0 0 104px;\n      position: relative;\n\n      &::before {\n        content: '';\n        width: 0.4rem;\n        height: ${({ $isFromDynamicZone }) =>\n          $isFromDynamicZone ? 'calc(100% - 65px)' : 'calc(100%)'};\n        position: absolute;\n        left: 7rem;\n        border-radius: 4px;\n\n        ${({ $isFromDynamicZone, $isChildOfDynamicZone, theme }) => {\n          if ($isChildOfDynamicZone) {\n            return `background-color: ${theme.colors.primary200};`;\n          }\n\n          if ($isFromDynamicZone) {\n            return `background-color: ${theme.colors.primary200};`;\n          }\n\n          return `background: ${theme.colors.neutral150};`;\n        }}\n      }\n    }\n  }\n\n  &.dynamiczone-row > ul:first-of-type {\n    padding: 0;\n  }\n`;\n"],"names":["ComponentRow","styled","Box","$isFromDynamicZone","$isChildOfDynamicZone","theme","colors","primary200","neutral150"],"mappings":";;;;;AAGaA,MAAAA,YAAAA,GAAeC,uBAAOC,CAAAA,gBAAAA,CAGjC;;;;;;;;;;;;AAYc,gBAAA,EAAE,CAAC,EAAEC,kBAAkB,EAAE,GAC/BA,kBAAAA,GAAqB,sBAAsB,YAAa,CAAA;;;;;AAK1D,QAAA,EAAE,CAAC,EAAEA,kBAAkB,EAAEC,qBAAqB,EAAEC,KAAK,EAAE,GAAA;AACrD,IAAA,IAAID,qBAAuB,EAAA;QACzB,OAAO,CAAC,kBAAkB,EAAEC,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC,CAAC,CAAC;AACxD;AAEA,IAAA,IAAIJ,kBAAoB,EAAA;QACtB,OAAO,CAAC,kBAAkB,EAAEE,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC,CAAC,CAAC;AACxD;IAEA,OAAO,CAAC,YAAY,EAAEF,KAAAA,CAAMC,MAAM,CAACE,UAAU,CAAC,CAAC,CAAC;AAClD,CAAE;;;;;;;;AAQV;;;;"}

package/dist/admin/components/{Tr.mjs → ComponentRow.mjs}

@@ -1,27 +1,21 @@
+import { Box } from '@strapi/design-system';
 import { styled } from 'styled-components';
 
-// Keep component-row for css specificity
-const Tr = styled.tr`
+const ComponentRow = styled(Box)`
   &.component-row,
   &.dynamiczone-row {
     position: relative;
-    border-top: none !important;
 
-    table tr:first-child {
-      border-top: none;
-    }
-
-    > td:first-of-type {
-      padding: 0 0 0 2rem;
+    > ul:first-of-type {
+      padding: 0 0 0 104px;
       position: relative;
 
       &::before {
         content: '';
         width: 0.4rem;
-        height: calc(100% - 40px);
+        height: ${({ $isFromDynamicZone })=>$isFromDynamicZone ? 'calc(100% - 65px)' : 'calc(100%)'};
         position: absolute;
-        top: -7px;
-        left: 2.6rem;
+        left: 7rem;
         border-radius: 4px;
 
         ${({ $isFromDynamicZone, $isChildOfDynamicZone, theme })=>{
@@ -37,10 +31,10 @@ const Tr = styled.tr`
     }
   }
 
-  &.dynamiczone-row > td:first-of-type {
+  &.dynamiczone-row > ul:first-of-type {
     padding: 0;
   }
 `;
 
-export { Tr };
-//# sourceMappingURL=Tr.mjs.map
+export { ComponentRow };
+//# sourceMappingURL=ComponentRow.mjs.map

package/dist/admin/components/ComponentRow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentRow.mjs","sources":["../../../admin/src/components/ComponentRow.tsx"],"sourcesContent":["import { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nexport const ComponentRow = styled(Box)<{\n  $isFromDynamicZone?: boolean;\n  $isChildOfDynamicZone?: boolean;\n}>`\n  &.component-row,\n  &.dynamiczone-row {\n    position: relative;\n\n    > ul:first-of-type {\n      padding: 0 0 0 104px;\n      position: relative;\n\n      &::before {\n        content: '';\n        width: 0.4rem;\n        height: ${({ $isFromDynamicZone }) =>\n          $isFromDynamicZone ? 'calc(100% - 65px)' : 'calc(100%)'};\n        position: absolute;\n        left: 7rem;\n        border-radius: 4px;\n\n        ${({ $isFromDynamicZone, $isChildOfDynamicZone, theme }) => {\n          if ($isChildOfDynamicZone) {\n            return `background-color: ${theme.colors.primary200};`;\n          }\n\n          if ($isFromDynamicZone) {\n            return `background-color: ${theme.colors.primary200};`;\n          }\n\n          return `background: ${theme.colors.neutral150};`;\n        }}\n      }\n    }\n  }\n\n  &.dynamiczone-row > ul:first-of-type {\n    padding: 0;\n  }\n`;\n"],"names":["ComponentRow","styled","Box","$isFromDynamicZone","$isChildOfDynamicZone","theme","colors","primary200","neutral150"],"mappings":";;;AAGaA,MAAAA,YAAAA,GAAeC,MAAOC,CAAAA,GAAAA,CAGjC;;;;;;;;;;;;AAYc,gBAAA,EAAE,CAAC,EAAEC,kBAAkB,EAAE,GAC/BA,kBAAAA,GAAqB,sBAAsB,YAAa,CAAA;;;;;AAK1D,QAAA,EAAE,CAAC,EAAEA,kBAAkB,EAAEC,qBAAqB,EAAEC,KAAK,EAAE,GAAA;AACrD,IAAA,IAAID,qBAAuB,EAAA;QACzB,OAAO,CAAC,kBAAkB,EAAEC,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC,CAAC,CAAC;AACxD;AAEA,IAAA,IAAIJ,kBAAoB,EAAA;QACtB,OAAO,CAAC,kBAAkB,EAAEE,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC,CAAC,CAAC;AACxD;IAEA,OAAO,CAAC,YAAY,EAAEF,KAAAA,CAAMC,MAAM,CAACE,UAAU,CAAC,CAAC,CAAC;AAClD,CAAE;;;;;;;;AAQV;;;;"}