added dnd

packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/DragHandleWrapper.js

@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-import { IconButton } from '@strapi/design-system/IconButton';
-
-const DragHandleWrapper = styled(IconButton)`
-  cursor: move;
-`;
-
-export default DragHandleWrapper;

packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/IconButtonCustoms.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { IconButton } from '@strapi/design-system/IconButton';
+
+export const CustomIconButton = styled(IconButton)`
+  background-color: transparent;
+
+  svg {
+    path {
+      fill: ${({ theme, expanded }) =>
+        expanded ? theme.colors.primary600 : theme.colors.neutral600};
+    }
+  }
+
+  &:hover {
+    svg {
+      path {
+        fill: ${({ theme }) => theme.colors.primary600};
+      }
+    }
+  }
+`;
+
+export const DragHandleWrapper = styled(CustomIconButton)`
+  cursor: move;
+`;

packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/Preview.js

@@ -1,20 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
 
 const StyledBox = styled(Box)`
-  border: 1px dashed ${({ theme }) => theme.colors.primary500};
+  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
+  outline-offset: -1px;
 `;
 
 const Preview = () => {
-  return (
+  return <StyledBox padding={6} background="primary100" />;
-    <StyledBox padding={8} background="primary100">
-      <Box>
-        <Flex />
-      </Box>
-    </StyledBox>
-  );
 };
 
 export default Preview;

packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js

@@ -5,9 +5,7 @@ import { useDrag, useDrop } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { useIntl } from 'react-intl';
 import toString from 'lodash/toString';
-import styled from 'styled-components';
 import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
-import { IconButton } from '@strapi/design-system/IconButton';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Stack } from '@strapi/design-system/Stack';
 import { Box } from '@strapi/design-system/Box';
@@ -18,30 +16,9 @@ import getTrad from '../../../utils/getTrad';
 import Inputs from '../../Inputs';
 import FieldComponent from '../../FieldComponent';
 import Preview from './Preview';
+import { CustomIconButton, DragHandleWrapper } from './IconButtonCustoms';
 import { connect, select } from './utils';
 
-// FIXME
-// Temporary workaround to remove the overflow until we migrate the react-select for the relations
-// to the DS one
-
-const CustomIconButton = styled(IconButton)`
-  background-color: transparent;
-
-  svg {
-    path {
-      fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600}
-    }
-  }
-
-  &:hover {
-    svg {
-      path {
-        fill: ${({ theme }) => theme.colors.primary600}
-      }
-    }
-  }
-`;
-
 /* eslint-disable react/no-array-index-key */
 
 // Issues:
@@ -165,18 +142,13 @@ const DraggedItem = ({
   };
 
   return (
-    <Box data-strapi-acc>
+    <Box ref={refs ? refs.dropRef : null} data-strapi-is-dragging={isDragging}>
       {isDragging && <Preview />}
-      {!isDragging &&
+      {!isDragging && (
-        <Accordion 
+        <Accordion expanded={isOpen} toggle={onClickToggle} id={componentFieldName} size="S">
-          expanded={isOpen} 
-          toggle={onClickToggle} 
-          id={componentFieldName}
-          size="S"
-        >
           <AccordionToggle
             action={
-              isReadOnly ? null : 
+              isReadOnly ? null : (
                 <Stack horizontal size={0}>
                   <CustomIconButton
                     expanded={isOpen}
@@ -191,22 +163,24 @@ const DraggedItem = ({
                     })}
                     icon={<Trash />}
                   />
-                <CustomIconButton
+                  <DragHandleWrapper
                     expanded={isOpen}
-                  noBorder 
+                    icon={<Drag />}
                     label={formatMessage({
                       id: getTrad('components.DragHandle-label'),
                       defaultMessage: 'Drag',
                     })}
-                  icon={<Drag />} 
+                    noBorder
+                    ref={refs.dragRef}
                   />
                 </Stack>
+              )
             }
             title={toString(displayedValue)}
             togglePosition="left"
           />
           <AccordionContent>
-            <Stack background='neutral100' padding={6} size={6}>
+            <Stack background="neutral100" padding={6} size={6}>
               {fields.map((fieldRow, key) => {
                 return (
                   <Grid gap={4} key={key}>
@@ -253,7 +227,8 @@ const DraggedItem = ({
               })}
             </Stack>
           </AccordionContent>
-        </Accordion>}
+        </Accordion>
+      )}
     </Box>
     //   <StyledBox ref={refs ? refs.dropRef : null}>
     //     {isDragging && <Preview />}

packages/core/admin/admin/src/content-manager/components/RepeatableComponent/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
 /* eslint-disable import/no-cycle */
-// import { useDrop } from 'react-dnd';
+import { useDrop } from 'react-dnd';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
@@ -15,7 +15,7 @@ import Plus from '@strapi/icons/Plus';
 // import { ErrorMessage } from '@buffetjs/styles';
 import { getMaxTempKey, getTrad } from '../../utils';
 import { useContentTypeLayout } from '../../hooks';
-// import ItemTypes from '../../utils/ItemTypes';
+import ItemTypes from '../../utils/ItemTypes';
 import ComponentInitializer from '../ComponentInitializer';
 import connect from './utils/connect';
 import select from './utils/select';
@@ -49,7 +49,7 @@ const RepeatableComponent = ({
   const toggleNotification = useNotification();
   const { formatMessage } = useIntl();
   const [collapseToOpen, setCollapseToOpen] = useState('');
-  // const [, drop] = useDrop({ accept: ItemTypes.COMPONENT });
+  const [, drop] = useDrop({ accept: ItemTypes.COMPONENT });
   const { getComponentLayout } = useContentTypeLayout();
   const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [
     componentUid,
@@ -112,11 +112,7 @@ const RepeatableComponent = ({
   }
 
   return (
-    <Box
+    <Box hasRadius background="neutral0" shadow="tableShadow" ref={drop}>
-      hasRadius 
-      background='neutral0' 
-      shadow='tableShadow'
-    >
       <AccordionGroupCustom
         footer={
           <Flex justifyContent="center" height="48px" background="neutral0" hasRadius>