@strapi/admin 4.6.0-beta.0 → 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/DragLayer/ComponentDragPreview.js

@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import { pxToRem } from '@strapi/helper-plugin';
 import { Box, Flex, Typography, IconButton } from '@strapi/design-system';
 import { Trash, Drag, CarretDown } from '@strapi/icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const DragPreviewBox = styled(Box)`
   border: 1px solid ${({ theme }) => theme.colors.neutral200};
@@ -27,13 +26,6 @@ const DropdownIconWrapper = styled(Box)`
   }
 `;
 
-const Icon = styled(FontAwesomeIcon)`
-  width: ${pxToRem(12)};
-  height: ${pxToRem(12)};
-
-  color: ${({ theme }) => theme.colors.neutral600};
-`;
-
 const ToggleButton = styled.button`
   border: none;
   background: transparent;
@@ -43,7 +35,7 @@ const ToggleButton = styled.button`
   padding: 0;
 `;
 
-const DragPreview = ({ displayedValue, icon }) => {
+const DragPreview = ({ displayedValue }) => {
   return (
     <DragPreviewBox
       paddingLeft={3}
@@ -60,8 +52,7 @@ const DragPreview = ({ displayedValue, icon }) => {
             <DropdownIconWrapper background="neutral200">
               <CarretDown />
             </DropdownIconWrapper>
-            <Flex gap={2} paddingLeft={icon ? 3 : 6} maxWidth={pxToRem(150)}>
-              {icon ? <Icon icon={icon} /> : null}
+            <Flex gap={2} paddingLeft={6} maxWidth={pxToRem(150)}>
               <Typography textColor="neutral700" ellipsis>
                 {displayedValue}
               </Typography>
@@ -85,13 +76,8 @@ const DragPreview = ({ displayedValue, icon }) => {
   );
 };
 
-DragPreview.defaultProps = {
-  icon: undefined,
-};
-
 DragPreview.propTypes = {
   displayedValue: PropTypes.string.isRequired,
-  icon: PropTypes.string,
 };
 
 export default DragPreview;

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

@@ -7,7 +7,7 @@ import { Drag, Cross } from '@strapi/icons';
 import { getTrad } from '../../utils';
 import { PUBLICATION_STATES } from '../RelationInputDataManager/constants';
 import { ChildrenWrapper, StackWrapper } from '../RelationInput/components/RelationItem';
-import { BoxEllipsis, DisconnectButton } from '../RelationInput/RelationInput';
+import { LinkEllipsis, DisconnectButton } from '../RelationInput';
 
 export const RelationDragPreview = ({ status, displayedValue, width }) => {
   const { formatMessage } = useIntl();
@@ -44,11 +44,11 @@ export const RelationDragPreview = ({ status, displayedValue, width }) => {
             <Drag />
           </IconButton>
           <ChildrenWrapper justifyContent="space-between">
-            <BoxEllipsis minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
+            <LinkEllipsis minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
               <Typography textColor="primary600" ellipsis>
                 {displayedValue}
               </Typography>
-            </BoxEllipsis>
+            </LinkEllipsis>
             {status && (
               <Status variant={statusColor} showBullet={false} size="S">
                 <Typography fontWeight="bold" textColor={`${statusColor}700`}>

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

@@ -67,7 +67,7 @@ const CustomDragLayer = () => {
             <ComponentPreview displayedValue={item.displayedValue} />
           )}
           {actualType === ItemTypes.DYNAMIC_ZONE && (
-            <ComponentPreview icon={item.icon} displayedValue={item.displayedValue} />
+            <ComponentPreview displayedValue={item.displayedValue} />
           )}
           {actualType === ItemTypes.RELATION && (
             <RelationDragPreview

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

@@ -2,7 +2,6 @@ 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 { getEmptyImage } from 'react-dnd-html5-backend';
 
@@ -194,7 +193,6 @@ const DynamicZoneComponent = ({
         ) : (
           <Accordion expanded={isOpen} onToggle={handleToggle} size="S" error={errorMessage}>
             <AccordionToggle
-              startIcon={icon && <FontAwesomeIcon icon={icon} />}
               action={accordionActions}
               title={`${friendlyName}${mainValue}`}
               togglePosition="left"

package/admin/src/content-manager/components/EditViewDataManagerProvider/reducer.js

@@ -105,6 +105,11 @@ const reducer = (state, action) =>
           (value) => value.type === 'component' && value.repeatable
         )(componentLayoutData.attributes);
 
+        const nonRepeatableComponentPaths = recursivelyFindPathsBasedOnCondition(
+          allComponents,
+          (value) => value.type === 'component' && !value.repeatable
+        )(componentLayoutData.attributes);
+
         const componentDataStructure = relationPaths.reduce((acc, current) => {
           const [componentName] = current.split('.');
 
@@ -113,8 +118,21 @@ const reducer = (state, action) =>
            * has another repeatable component inside of it we
            * don't need to attach the array at this point because that will be
            * done again deeper in the nest.
+           *
+           * We also need to handle cases with single components nested within
+           * repeatables by checking that the relation path does not match a
+           * non-repeatable component path. This accounts for component
+           * structures such as:
+           * - outer_single_compo
+           *    - level_one_repeatable
+           *        - level_two_single_component
+           *            - level_three_repeatable
            */
-          if (!repeatableFields.includes(componentName)) {
+
+          if (
+            !repeatableFields.includes(componentName) &&
+            !nonRepeatableComponentPaths.includes(componentName)
+          ) {
             set(acc, current, []);
           }
 
@@ -129,7 +147,6 @@ const reducer = (state, action) =>
 
         break;
       }
-
       case 'LOAD_RELATION': {
         const initialDataPath = ['initialData', ...action.keys];
         const modifiedDataPath = ['modifiedData', ...action.keys];

package/admin/src/content-manager/components/InputJSON/FieldWrapper.js

@@ -3,12 +3,18 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Field } from '@strapi/design-system/Field';
 
-const FieldWrapper = ({ name, hint, error, children }) => {
+const FieldWrapper = ({ name, hint, error, children, required }) => {
   const { formatMessage } = useIntl();
   const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
 
   return (
-    <Field name={name} hint={hint && formatMessage(hint)} error={errorMessage} id={name}>
+    <Field
+      name={name}
+      hint={hint && formatMessage(hint)}
+      error={errorMessage}
+      id={name}
+      required={required}
+    >
       {children}
     </Field>
   );
@@ -17,6 +23,7 @@ const FieldWrapper = ({ name, hint, error, children }) => {
 FieldWrapper.defaultProps = {
   hint: undefined,
   error: '',
+  required: false,
 };
 
 FieldWrapper.propTypes = {
@@ -27,6 +34,7 @@ FieldWrapper.propTypes = {
   }),
   error: PropTypes.string,
   children: PropTypes.node.isRequired,
+  required: PropTypes.bool,
 };
 
 export default FieldWrapper;

package/admin/src/content-manager/components/InputJSON/Label.js

@@ -1,18 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { FieldLabel } from '@strapi/design-system/Field';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
 
-const LabelAction = styled(Box)`
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
-
-const Label = ({ intlLabel, labelAction, name, required }) => {
+const Label = ({ intlLabel, labelAction, name }) => {
   const { formatMessage } = useIntl();
   const label = intlLabel?.id
     ? formatMessage(
@@ -21,19 +12,13 @@ const Label = ({ intlLabel, labelAction, name, required }) => {
       )
     : name;
 
-  return (
-    <Flex>
-      <FieldLabel required={required}>{label}</FieldLabel>
-      {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
-    </Flex>
-  );
+  return <FieldLabel action={labelAction}>{label}</FieldLabel>;
 };
 
 Label.defaultProps = {
   id: undefined,
   intlLabel: undefined,
   labelAction: undefined,
-  required: false,
 };
 
 Label.propTypes = {
@@ -45,7 +30,6 @@ Label.propTypes = {
   }),
   labelAction: PropTypes.element,
   name: PropTypes.string.isRequired,
-  required: PropTypes.bool,
 };
 
 export default Label;

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

@@ -157,13 +157,17 @@ class InputJSON extends React.Component {
     }
 
     return (
-      <FieldWrapper name={this.props.name} hint={this.props.description} error={this.props.error}>
+      <FieldWrapper
+        name={this.props.name}
+        hint={this.props.description}
+        error={this.props.error}
+        required={this.props.required}
+      >
         <Stack spacing={1}>
           <Label
             intlLabel={this.props.intlLabel}
-            labelAction={this.props.labelAction}
             name={this.props.name}
-            required={this.props.required}
+            labelAction={this.props.labelAction}
           />
           <StyledBox error={this.props.error}>
             <EditorWrapper disabled={this.props.disabled}>

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

@@ -25,19 +25,14 @@ import { RELATION_GUTTER, RELATION_ITEM_HEIGHT } from './constants';
 
 import { usePrev } from '../../hooks';
 
-const LinkEllipsis = styled(Link)`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: inherit;
-`;
+export const LinkEllipsis = styled(Link)`
+  display: block;
 
-export const BoxEllipsis = styled(Box)`
   > span {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: inherit;
+    display: block;
   }
 `;
 
@@ -267,15 +262,13 @@ const RelationInput = ({
   const ariaDescriptionId = `${name}-item-instructions`;
 
   return (
-    <Field error={error} name={name} hint={description} id={id}>
+    <Field error={error} name={name} hint={description} id={id} required={required}>
       <Relation
         totalNumberOfRelations={totalNumberOfRelations}
         size={size}
         search={
           <>
-            <FieldLabel action={labelAction} required={required}>
-              {label}
-            </FieldLabel>
+            <FieldLabel action={labelAction}>{label}</FieldLabel>
             <ReactSelect
               // position fixed doesn't update position on scroll
               // react select doesn't update menu position on options change
@@ -352,9 +345,7 @@ const RelationInput = ({
                 relations,
                 updatePositionOfRelation: handleUpdatePositionOfRelation,
               }}
-              itemKey={(index, { relations: relationsItems }) =>
-                `${relationsItems[index].mainField}_${relationsItems[index].id}`
-              }
+              itemKey={(index) => `${relations[index].mainField}_${relations[index].id}`}
               innerElementType="ol"
             >
               {ListItem}
@@ -509,7 +500,7 @@ const ListItem = ({ data, index, style }) => {
       }}
       updatePositionOfRelation={updatePositionOfRelation}
     >
-      <BoxEllipsis minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
+      <Box minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
         <Tooltip description={mainField ?? `${id}`}>
           {href ? (
             <LinkEllipsis to={href} disabled={disabled}>
@@ -521,7 +512,7 @@ const ListItem = ({ data, index, style }) => {
             </Typography>
           )}
         </Tooltip>
-      </BoxEllipsis>
+      </Box>
 
       {publicationState && (
         <Status variant={statusColor} showBullet={false} size="S">

package/admin/src/content-manager/components/RelationInput/components/RelationItem.js

@@ -50,11 +50,13 @@ export const RelationItem = ({
       item: {
         displayedValue: displayValue,
         status,
+        id,
       },
       onGrabItem,
       onDropItem,
       onCancel,
       onMoveItem: updatePositionOfRelation,
+      dropSensitivity: 'immediate',
     });
 
   const composedRefs = composeRefs(relationRef, dragRef);

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

@@ -1 +1,2 @@
 export { default as RelationInput } from './RelationInput';
+export * from './RelationInput';

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

@@ -51,9 +51,7 @@ const RepeatableComponent = ({
     [componentUid, getComponentLayout]
   );
 
-  const nextTempKey = useMemo(() => {
-    return getMaxTempKey(componentValue || []) + 1;
-  }, [componentValue]);
+  const nextTempKey = useMemo(() => getMaxTempKey(componentValue || []) + 1, [componentValue]);
 
   const componentErrorKeys = getComponentErrorKeys(name, formErrors);
 

package/admin/src/content-manager/hooks/useDragAndDrop.js

@@ -12,6 +12,7 @@ import { useKeyboardDragAndDrop } from './useKeyboardDragAndDrop';
  *  item?: object,
  *  onStart?: () => void,
  *  onEnd?: () => void,
+ *  dropSensitivity?: 'regular' | 'immediate'
  * } & import('./useKeyboardDragAndDrop').UseKeyboardDragAndDropCallbacks}
  */
 
@@ -39,6 +40,7 @@ export const useDragAndDrop = (
     onDropItem,
     onCancel,
     onMoveItem,
+    dropSensitivity = 'regular',
   }
 ) => {
   const objectRef = useRef(null);
@@ -62,19 +64,21 @@ export const useDragAndDrop = (
         return;
       }
 
-      const hoverBoundingRect = objectRef.current.getBoundingClientRect();
-      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-      const clientOffset = monitor.getClientOffset();
-      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+      if (dropSensitivity === 'regular') {
+        const hoverBoundingRect = objectRef.current.getBoundingClientRect();
+        const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+        const clientOffset = monitor.getClientOffset();
+        const hoverClientY = clientOffset.y - hoverBoundingRect.top;
 
-      // Dragging downwards
-      if (dragIndex < newInd && hoverClientY < hoverMiddleY) {
-        return;
-      }
+        // Dragging downwards
+        if (dragIndex < newInd && hoverClientY < hoverMiddleY) {
+          return;
+        }
 
-      // Dragging upwards
-      if (dragIndex > newInd && hoverClientY > hoverMiddleY) {
-        return;
+        // Dragging upwards
+        if (dragIndex > newInd && hoverClientY > hoverMiddleY) {
+          return;
+        }
       }
 
       // Time to actually perform the action
@@ -104,6 +108,16 @@ export const useDragAndDrop = (
       }
     },
     canDrag: active,
+    /**
+     * This is for useful when the item is in a virtualized list.
+     * However, if we don't have an ID then we want the libraries
+     * defaults to take care of this.
+     */
+    isDragging: item.id
+      ? (monitor) => {
+          return item.id === monitor.getItem().id;
+        }
+      : undefined,
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),