@strapi/admin 4.6.0-alpha.1 → 4.6.0-beta.1

package/admin/src/components/AuthenticatedApp/index.js

@@ -20,7 +20,7 @@ import {
   fetchUserRoles,
 } from './utils/api';
 import checkLatestStrapiVersion from './utils/checkLatestStrapiVersion';
-import { getFullName } from '../../utils';
+import { getFullName, hashAdminUserEmail } from '../../utils';
 
 const strapiVersion = packageJSON.version;
 
@@ -31,6 +31,7 @@ const AuthenticatedApp = () => {
   const userInfo = auth.getUserInfo();
   const userName = get(userInfo, 'username') || getFullName(userInfo.firstname, userInfo.lastname);
   const [userDisplayName, setUserDisplayName] = useState(userName);
+  const [userId, setUserId] = useState(null);
   const { showReleaseNotification } = useConfigurations();
   const [
     { data: appInfos, status },
@@ -71,6 +72,15 @@ const AuthenticatedApp = () => {
     }
   }, [userRoles, appInfos]);
 
+  useEffect(() => {
+    const getUserId = async () => {
+      const userId = await hashAdminUserEmail(userInfo);
+      setUserId(userId);
+    };
+
+    getUserId();
+  }, [userInfo]);
+
   // We don't need to wait for the release query to be fetched before rendering the plugins
   // however, we need the appInfos and the permissions
   const shouldShowNotDependentQueriesLoader =
@@ -81,12 +91,13 @@ const AuthenticatedApp = () => {
   const appInfosValue = useMemo(() => {
     return {
       ...appInfos,
+      userId,
       latestStrapiReleaseTag: tag_name,
       setUserDisplayName,
       shouldUpdateStrapi,
       userDisplayName,
     };
-  }, [appInfos, tag_name, shouldUpdateStrapi, userDisplayName]);
+  }, [appInfos, tag_name, shouldUpdateStrapi, userDisplayName, userId]);
 
   if (shouldShowLoader) {
     return <LoadingIndicatorPage />;

package/admin/src/components/GlobalStyle/index.js

@@ -1,11 +1,6 @@
 import { createGlobalStyle } from 'styled-components';
 
 const loadCss = async () => {
-  await import(/* webpackChunkName: "fontawesome-css" */ 'font-awesome/css/font-awesome.min.css');
-  await import(
-    /* webpackChunkName: "fontawesome-css-all" */ '@fortawesome/fontawesome-free/css/all.css'
-  );
-  await import(/* webpackChunkName: "fontawesome-js" */ '@fortawesome/fontawesome-free/js/all.min');
   await import(/* webpackChunkName: "cropper-css" */ 'cropperjs/dist/cropper.css');
 };
 

package/admin/src/content-manager/components/ComponentIcon/ComponentIcon.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+
+import { Flex } from '@strapi/design-system';
+
+const WIDTH_S = 5;
+const WIDTH_M = 8;
+
+const Wrapper = styled(Flex)`
+  border-radius: ${({ showBackground }) => (showBackground ? `50%` : 0)};
+  color: ${({ theme }) => theme.colors.neutral600};
+  height: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S : WIDTH_M]};
+  width: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S : WIDTH_M]};
+
+  svg {
+    height: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S - 2 : WIDTH_M - 3]};
+    width: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S - 2 : WIDTH_M - 3]};
+  }
+`;
+
+export function ComponentIcon({ showBackground = true, size = 'M' }) {
+  return (
+    <Wrapper
+      alignItems="center"
+      background={showBackground ? 'neutral200' : null}
+      justifyContent="center"
+      size={size}
+      showBackground={showBackground}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+        <path
+          d="M216.3 2c4.8-2.6 10.5-2.6 15.3 0L422.3 106c5.1 2.8 8.3 8.2 8.3 14s-3.2 11.2-8.3 14L231.7 238c-4.8 2.6-10.5 2.6-15.3 0L25.7 134c-5.1-2.8-8.3-8.2-8.3-14s3.2-11.2 8.3-14L216.3 2zM23.7 170l176 96c5.1 2.8 8.3 8.2 8.3 14V496c0 5.6-3 10.9-7.8 13.8s-10.9 3-15.8 .3L8.3 414C3.2 411.2 0 405.9 0 400V184c0-5.6 3-10.9 7.8-13.8s10.9-3 15.8-.3zm400.7 0c5-2.7 11-2.6 15.8 .3s7.8 8.1 7.8 13.8V400c0 5.9-3.2 11.2-8.3 14l-176 96c-5 2.7-11 2.6-15.8-.3s-7.8-8.1-7.8-13.8V280c0-5.9 3.2-11.2 8.3-14l176-96z"
+          fill="currentColor"
+        />
+      </svg>
+    </Wrapper>
+  );
+}
+
+ComponentIcon.defaultProps = {
+  showBackground: true,
+  size: 'M',
+};
+
+ComponentIcon.propTypes = {
+  showBackground: PropTypes.bool,
+  size: PropTypes.string,
+};

package/admin/src/content-manager/components/ComponentIcon/index.js

@@ -0,0 +1 @@
+export * from './ComponentIcon';

package/admin/src/content-manager/components/ComponentInitializer/index.js

@@ -57,13 +57,7 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
       </Box>
       {error?.id && (
         <Typography textColor="danger600" variant="pi">
-          {formatMessage(
-            {
-              id: error.id,
-              defaultMessage: error.id,
-            },
-            { ...error.values }
-          )}
+          {formatMessage(error, { ...error.values })}
         </Typography>
       )}
     </>

package/admin/src/content-manager/components/{RepeatableComponent/DragPreview.js → DragLayer/ComponentDragPreview.js}

@@ -2,13 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { pxToRem } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { IconButton } from '@strapi/design-system/IconButton';
-import Trash from '@strapi/icons/Trash';
-import DragHandle from '@strapi/icons/Drag';
-import CarretDown from '@strapi/icons/CarretDown';
+import { Box, Flex, Typography, IconButton } from '@strapi/design-system';
+import { Trash, Drag, CarretDown } from '@strapi/icons';
 
 const DragPreviewBox = styled(Box)`
   border: 1px solid ${({ theme }) => theme.colors.neutral200};
@@ -57,18 +52,22 @@ const DragPreview = ({ displayedValue }) => {
             <DropdownIconWrapper background="neutral200">
               <CarretDown />
             </DropdownIconWrapper>
-            <Box paddingLeft={6} maxWidth={pxToRem(150)}>
+            <Flex gap={2} paddingLeft={6} maxWidth={pxToRem(150)}>
               <Typography textColor="neutral700" ellipsis>
                 {displayedValue}
               </Typography>
-            </Box>
+            </Flex>
           </Flex>
         </ToggleButton>
         <Box paddingLeft={3}>
           <Flex>
-            <IconButton icon={<Trash />} />
+            <IconButton noBorder>
+              <Trash />
+            </IconButton>
             <Box paddingLeft={2}>
-              <IconButton icon={<DragHandle />} />
+              <IconButton noBorder>
+                <Drag />
+              </IconButton>
             </Box>
           </Flex>
         </Box>

package/admin/src/content-manager/components/DragLayer/RelationDragPreview.js

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Box, Flex, IconButton, Typography, Status, Icon } from '@strapi/design-system';
+import { Drag, Cross } from '@strapi/icons';
+
+import { getTrad } from '../../utils';
+import { PUBLICATION_STATES } from '../RelationInputDataManager/constants';
+import { ChildrenWrapper, StackWrapper } from '../RelationInput/components/RelationItem';
+import { LinkEllipsis, DisconnectButton } from '../RelationInput';
+
+export const RelationDragPreview = ({ status, displayedValue, width }) => {
+  const { formatMessage } = useIntl();
+
+  const stateMessage = {
+    [PUBLICATION_STATES.DRAFT]: formatMessage({
+      id: getTrad('relation.publicationState.draft'),
+      defaultMessage: 'Draft',
+    }),
+
+    [PUBLICATION_STATES.PUBLISHED]: formatMessage({
+      id: getTrad('relation.publicationState.published'),
+      defaultMessage: 'Published',
+    }),
+  };
+
+  const statusColor = status === PUBLICATION_STATES.DRAFT ? 'secondary' : 'success';
+
+  return (
+    <Box style={{ width }}>
+      <Flex
+        paddingTop={2}
+        paddingBottom={2}
+        paddingLeft={2}
+        paddingRight={4}
+        hasRadius
+        borderSize={1}
+        background="neutral0"
+        borderColor="neutral200"
+        justifyContent="space-between"
+      >
+        <StackWrapper spacing={1} horizontal>
+          <IconButton noBorder>
+            <Drag />
+          </IconButton>
+          <ChildrenWrapper justifyContent="space-between">
+            <LinkEllipsis minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
+              <Typography textColor="primary600" ellipsis>
+                {displayedValue}
+              </Typography>
+            </LinkEllipsis>
+            {status && (
+              <Status variant={statusColor} showBullet={false} size="S">
+                <Typography fontWeight="bold" textColor={`${statusColor}700`}>
+                  {stateMessage[status]}
+                </Typography>
+              </Status>
+            )}
+          </ChildrenWrapper>
+        </StackWrapper>
+        <Box paddingLeft={4}>
+          <DisconnectButton type="button">
+            <Icon width="12px" as={Cross} />
+          </DisconnectButton>
+        </Box>
+      </Flex>
+    </Box>
+  );
+};
+
+RelationDragPreview.propTypes = {
+  status: PropTypes.string.isRequired,
+  displayedValue: PropTypes.string.isRequired,
+  width: PropTypes.number.isRequired,
+};

package/admin/src/content-manager/components/DragLayer/index.js

@@ -3,11 +3,10 @@ import { useDragLayer } from 'react-dnd';
 import LayoutDndProvider from '../LayoutDndProvider';
 
 import ItemTypes from '../../utils/ItemTypes';
-import RepeatableComponentPreview from '../RepeatableComponent/DragPreview';
 import CardPreview from '../../pages/ListSettingsView/components/CardPreview';
-// import RelationItem from '../SelectMany/Relation';
-// import { Li } from '../SelectMany/components';
-// import DraggedField from '../DraggedField';
+
+import ComponentPreview from './ComponentDragPreview';
+import { RelationDragPreview } from './RelationDragPreview';
 
 const layerStyles = {
   position: 'fixed',
@@ -50,15 +49,32 @@ const CustomDragLayer = () => {
     return null;
   }
 
+  /**
+   * Because a user may have multiple relations / dynamic zones / repeable fields in the same content type,
+   * we append the fieldName for the item type to make them unique, however, we then want to extract that
+   * first type to apply the correct preview.
+   */
+  const [actualType] = itemType.split('_');
+
   return (
     <LayoutDndProvider>
       <div style={layerStyles}>
         <div style={getItemStyles(initialOffset, currentOffset, mouseOffset)} className="col-md-2">
-          {[ItemTypes.EDIT_RELATION, ItemTypes.EDIT_FIELD, ItemTypes.FIELD].includes(itemType) && (
+          {[ItemTypes.EDIT_FIELD, ItemTypes.FIELD].includes(itemType) && (
             <CardPreview labelField={item.labelField} />
           )}
-          {itemType === ItemTypes.COMPONENT && (
-            <RepeatableComponentPreview displayedValue={item.displayedValue} />
+          {actualType === ItemTypes.COMPONENT && (
+            <ComponentPreview displayedValue={item.displayedValue} />
+          )}
+          {actualType === ItemTypes.DYNAMIC_ZONE && (
+            <ComponentPreview displayedValue={item.displayedValue} />
+          )}
+          {actualType === ItemTypes.RELATION && (
+            <RelationDragPreview
+              displayedValue={item.displayedValue}
+              status={item.status}
+              width={item.width}
+            />
           )}
         </div>
       </div>

package/admin/src/content-manager/components/DynamicZone/components/ComponentCard.js

@@ -7,23 +7,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { Box } from '@strapi/design-system/Box';
 import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import { pxToRem } from '@strapi/helper-plugin';
 
-const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
-  width: ${pxToRem(32)} !important;
-  height: ${pxToRem(32)} !important;
-  padding: ${pxToRem(9)};
-  border-radius: ${pxToRem(64)};
-  background: ${({ theme }) => theme.colors.neutral150};
-  path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
+import { ComponentIcon } from '../../ComponentIcon';
 
 const ComponentBox = styled(Box)`
   flex-shrink: 0;
@@ -35,46 +25,42 @@ const ComponentBox = styled(Box)`
   justify-content: center;
   align-items: center;
 
-  &.active,
+  &:focus,
   &:hover {
     border: 1px solid ${({ theme }) => theme.colors.primary200};
     background: ${({ theme }) => theme.colors.primary100};
 
-    ${StyledFontAwesomeIcon} {
-      background: ${({ theme }) => theme.colors.primary200};
-      path {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
+    ${Typography} {
+      color: ${({ theme }) => theme.colors.primary600};
     }
 
-    ${Typography} {
+    /* > Stack > ComponentIcon */
+    > div > div:first-child {
+      background: ${({ theme }) => theme.colors.primary200};
       color: ${({ theme }) => theme.colors.primary600};
     }
   }
 `;
 
-export default function ComponentCard({ children, icon, onClick }) {
+export default function ComponentCard({ children, onClick }) {
   return (
-    <button type="button" onClick={onClick}>
-      <ComponentBox borderRadius="borderRadius">
-        <Stack spacing={1} style={{ justifyContent: 'center', alignItems: 'center' }}>
-          <StyledFontAwesomeIcon data-testid="component-card-icon" icon={icon} />
-          <Typography variant="pi" fontWeight="bold" textColor="neutral600">
-            {children}
-          </Typography>
-        </Stack>
-      </ComponentBox>
-    </button>
+    <ComponentBox as="button" type="button" onClick={onClick} hasRadius>
+      <Stack spacing={1} alignItems="center" justifyContent="center">
+        <ComponentIcon />
+
+        <Typography variant="pi" fontWeight="bold" textColor="neutral600">
+          {children}
+        </Typography>
+      </Stack>
+    </ComponentBox>
   );
 }
 
 ComponentCard.defaultProps = {
-  icon: 'dice-d6',
   onClick() {},
 };
 
 ComponentCard.propTypes = {
   children: PropTypes.node.isRequired,
-  icon: PropTypes.string,
   onClick: PropTypes.func,
 };

package/admin/src/content-manager/components/DynamicZone/components/ComponentCategory.js

@@ -30,8 +30,8 @@ const ComponentCategory = ({ category, components, variant, isOpen, onAddCompone
       <AccordionContent>
         <Box paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>
           <Grid>
-            {components.map(({ componentUid, info: { displayName, icon } }) => (
-              <ComponentCard key={componentUid} icon={icon} onClick={onAddComponent(componentUid)}>
+            {components.map(({ componentUid, info: { displayName } }) => (
+              <ComponentCard key={componentUid} onClick={onAddComponent(componentUid)}>
                 {formatMessage({ id: displayName, defaultMessage: displayName })}
               </ComponentCard>
             ))}

package/admin/src/content-manager/components/DynamicZone/components/DynamicComponent.js

@@ -1,27 +1,38 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import get from 'lodash/get';
-
-import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Stack } from '@strapi/design-system/Stack';
-
+import { getEmptyImage } from 'react-dnd-html5-backend';
+
+import {
+  Accordion,
+  AccordionToggle,
+  AccordionContent,
+  IconButton,
+  Box,
+  Flex,
+  Stack,
+} from '@strapi/design-system';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { Trash, Drag } from '@strapi/icons';
 
-import Trash from '@strapi/icons/Trash';
-import ArrowDown from '@strapi/icons/ArrowDown';
-import ArrowUp from '@strapi/icons/ArrowUp';
-
-import { useContentTypeLayout } from '../../../hooks';
-import { getTrad } from '../../../utils';
+import { useContentTypeLayout, useDragAndDrop } from '../../../hooks';
+import { composeRefs, getTrad, ItemTypes } from '../../../utils';
 
 import FieldComponent from '../../FieldComponent';
 
+const ActionsStack = styled(Stack)`
+  /* 
+    we need to remove the background from the button but we can't 
+    wrap the element in styled because it breaks the forwardedAs which
+    we need for drag handler to work on firefox
+  */
+  div[role='button'] {
+    background: transparent;
+  }
+`;
+
 const IconButtonCustom = styled(IconButton)`
   background-color: transparent;
 
@@ -46,17 +57,31 @@ const Rectangle = styled(Box)`
   height: ${({ theme }) => theme.spaces[4]};
 `;
 
+const Preview = styled.span`
+  display: block;
+  background-color: ${({ theme }) => theme.colors.primary100};
+  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
+  outline-offset: -1px;
+  padding: ${({ theme }) => theme.spaces[6]};
+`;
+
+const ComponentContainer = styled(Box)`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+`;
+
 const DynamicZoneComponent = ({
   componentUid,
   formErrors,
   index,
   isFieldAllowed,
-  onMoveComponentDownClick,
-  onMoveComponentUpClick,
   name,
   onRemoveComponentClick,
-  showDownIcon,
-  showUpIcon,
+  onMoveComponent,
+  onGrabItem,
+  onDropItem,
+  onCancel,
 }) => {
   const [isOpen, setIsOpen] = useState(true);
   const { formatMessage } = useIntl();
@@ -103,71 +128,89 @@ const DynamicZoneComponent = ({
     setIsOpen((s) => !s);
   };
 
+  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =
+    useDragAndDrop(isFieldAllowed, {
+      type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,
+      index,
+      item: {
+        displayedValue: `${friendlyName}${mainValue}`,
+        icon,
+      },
+      onMoveItem: onMoveComponent,
+      onGrabItem,
+      onDropItem,
+      onCancel,
+    });
+
+  useEffect(() => {
+    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
+  }, [dragPreviewRef, index]);
+
+  const composedBoxRefs = composeRefs(boxRef, dropRef);
+
+  const accordionActions = !isFieldAllowed ? null : (
+    <ActionsStack horizontal spacing={0} expanded={isOpen}>
+      <IconButtonCustom
+        noBorder
+        label={formatMessage(
+          {
+            id: getTrad('components.DynamicZone.delete-label'),
+            defaultMessage: 'Delete {name}',
+          },
+          { name: friendlyName }
+        )}
+        onClick={onRemoveComponentClick}
+      >
+        <Trash />
+      </IconButtonCustom>
+      <IconButton
+        forwardedAs="div"
+        role="button"
+        noBorder
+        tabIndex={0}
+        onClick={(e) => e.stopPropagation()}
+        data-handler-id={handlerId}
+        ref={dragRef}
+        label={formatMessage({
+          id: getTrad('components.DragHandle-label'),
+          defaultMessage: 'Drag',
+        })}
+        onKeyDown={handleKeyDown}
+      >
+        <Drag />
+      </IconButton>
+    </ActionsStack>
+  );
+
   return (
-    <Box>
+    <ComponentContainer as="li">
       <Flex justifyContent="center">
         <Rectangle background="neutral200" />
       </Flex>
-      <StyledBox hasRadius>
-        <Accordion expanded={isOpen} onToggle={handleToggle} size="S" error={errorMessage}>
-          <AccordionToggle
-            startIcon={<FontAwesomeIcon icon={icon} />}
-            action={
-              <Stack horizontal spacing={0} expanded={isOpen}>
-                {showDownIcon && (
-                  <IconButtonCustom
-                    noBorder
-                    label={formatMessage({
-                      id: getTrad('components.DynamicZone.move-down-label'),
-                      defaultMessage: 'Move component down',
-                    })}
-                    onClick={onMoveComponentDownClick}
-                    icon={<ArrowDown />}
-                  />
-                )}
-                {showUpIcon && (
-                  <IconButtonCustom
-                    noBorder
-                    label={formatMessage({
-                      id: getTrad('components.DynamicZone.move-up-label'),
-                      defaultMessage: 'Move component up',
-                    })}
-                    onClick={onMoveComponentUpClick}
-                    icon={<ArrowUp />}
-                  />
-                )}
-                {isFieldAllowed && (
-                  <IconButtonCustom
-                    noBorder
-                    label={formatMessage(
-                      {
-                        id: getTrad('components.DynamicZone.delete-label'),
-                        defaultMessage: 'Delete {name}',
-                      },
-                      { name: friendlyName }
-                    )}
-                    onClick={onRemoveComponentClick}
-                    icon={<Trash />}
-                  />
-                )}
-              </Stack>
-            }
-            title={`${friendlyName}${mainValue}`}
-            togglePosition="left"
-          />
-          <AccordionContent>
-            <AccordionContentRadius background="neutral0">
-              <FieldComponent
-                componentUid={componentUid}
-                icon={icon}
-                name={`${name}.${index}`}
-                isFromDynamicZone
-              />
-            </AccordionContentRadius>
-          </AccordionContent>
-        </Accordion>
+      <StyledBox ref={composedBoxRefs} hasRadius>
+        {isDragging ? (
+          <Preview padding={6} background="primary100" />
+        ) : (
+          <Accordion expanded={isOpen} onToggle={handleToggle} size="S" error={errorMessage}>
+            <AccordionToggle
+              action={accordionActions}
+              title={`${friendlyName}${mainValue}`}
+              togglePosition="left"
+            />
+            <AccordionContent>
+              <AccordionContentRadius background="neutral0">
+                <FieldComponent
+                  componentUid={componentUid}
+                  icon={icon}
+                  name={`${name}.${index}`}
+                  isFromDynamicZone
+                />
+              </AccordionContentRadius>
+            </AccordionContent>
+          </Accordion>
+        )}
       </StyledBox>
-    </Box>
+    </ComponentContainer>
   );
 };
 
@@ -175,8 +218,9 @@ DynamicZoneComponent.defaultProps = {
   formErrors: {},
   index: 0,
   isFieldAllowed: true,
-  showDownIcon: true,
-  showUpIcon: true,
+  onGrabItem: undefined,
+  onDropItem: undefined,
+  onCancel: undefined,
 };
 
 DynamicZoneComponent.propTypes = {
@@ -185,11 +229,11 @@ DynamicZoneComponent.propTypes = {
   index: PropTypes.number,
   isFieldAllowed: PropTypes.bool,
   name: PropTypes.string.isRequired,
-  onMoveComponentDownClick: PropTypes.func.isRequired,
-  onMoveComponentUpClick: PropTypes.func.isRequired,
+  onGrabItem: PropTypes.func,
+  onDropItem: PropTypes.func,
+  onCancel: PropTypes.func,
+  onMoveComponent: PropTypes.func.isRequired,
   onRemoveComponentClick: PropTypes.func.isRequired,
-  showDownIcon: PropTypes.bool,
-  showUpIcon: PropTypes.bool,
 };
 
 export default DynamicZoneComponent;