@strapi/admin 4.5.4 → 4.6.0-beta.0

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

@@ -12,6 +12,7 @@ import { FieldLabel, FieldError, FieldHint, Field } from '@strapi/design-system/
 import { TextButton } from '@strapi/design-system/TextButton';
 import { Typography } from '@strapi/design-system/Typography';
 import { Tooltip } from '@strapi/design-system/Tooltip';
+import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
 
 import Cross from '@strapi/icons/Cross';
 import Refresh from '@strapi/icons/Refresh';
@@ -20,21 +21,27 @@ import { Relation } from './components/Relation';
 import { RelationItem } from './components/RelationItem';
 import { RelationList } from './components/RelationList';
 import { Option } from './components/Option';
-import { RELATION_ITEM_HEIGHT } from './constants';
+import { RELATION_GUTTER, RELATION_ITEM_HEIGHT } from './constants';
+
 import { usePrev } from '../../hooks';
 
 const LinkEllipsis = styled(Link)`
-  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inherit;
+`;
 
+export const BoxEllipsis = styled(Box)`
   > span {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: block;
+    display: inherit;
   }
 `;
 
-const DisconnectButton = styled.button`
+export const DisconnectButton = styled.button`
   svg path {
     fill: ${({ theme }) => theme.colors.neutral500};
   }
@@ -46,9 +53,11 @@ const DisconnectButton = styled.button`
 `;
 
 const RelationInput = ({
+  canReorder,
   description,
   disabled,
   error,
+  iconButtonAriaLabel,
   id,
   name,
   numberOfRelationsToDisplay,
@@ -56,11 +65,17 @@ const RelationInput = ({
   labelAction,
   labelLoadMore,
   labelDisconnectRelation,
+  listAriaDescription,
+  liveText,
   loadingMessage,
+  onCancel,
+  onDropItem,
+  onGrabItem,
   noRelationsMessage,
   onRelationConnect,
   onRelationLoadMore,
   onRelationDisconnect,
+  onRelationReorder,
   onSearchNextPage,
   onSearch,
   placeholder,
@@ -71,9 +86,10 @@ const RelationInput = ({
   size,
 }) => {
   const [value, setValue] = useState(null);
+  const [overflow, setOverflow] = useState('');
+
   const listRef = useRef();
   const outerListRef = useRef();
-  const [overflow, setOverflow] = useState('');
 
   const { data } = searchResults;
 
@@ -83,9 +99,11 @@ const RelationInput = ({
   const dynamicListHeight = useMemo(
     () =>
       totalNumberOfRelations > numberOfRelationsToDisplay
-        ? Math.min(totalNumberOfRelations, numberOfRelationsToDisplay) * RELATION_ITEM_HEIGHT +
+        ? Math.min(totalNumberOfRelations, numberOfRelationsToDisplay) *
+            (RELATION_ITEM_HEIGHT + RELATION_GUTTER) +
           RELATION_ITEM_HEIGHT / 2
-        : Math.min(totalNumberOfRelations, numberOfRelationsToDisplay) * RELATION_ITEM_HEIGHT,
+        : Math.min(totalNumberOfRelations, numberOfRelationsToDisplay) *
+          (RELATION_ITEM_HEIGHT + RELATION_GUTTER),
     [totalNumberOfRelations, numberOfRelationsToDisplay]
   );
 
@@ -139,6 +157,9 @@ const RelationInput = ({
     };
   }, [paginatedRelations, relations, numberOfRelationsToDisplay, totalNumberOfRelations]);
 
+  /**
+   * --- ReactSelect Workaround START ---
+   */
   /**
    * This code is being isolated because it's a hack to fix a placement bug in
    * `react-select` where when the options prop is updated the position of the
@@ -194,12 +215,28 @@ const RelationInput = ({
   const handleMenuClose = () => {
     setIsMenuOpen(false);
   };
+  /**
+   * --- ReactSelect Workaround END ---
+   */
 
   const handleMenuOpen = () => {
     setIsMenuOpen(true);
     onSearch();
   };
 
+  /**
+   *
+   * @param {number} newIndex
+   * @param {number} currentIndex
+   *
+   * @returns {void}
+   */
+  const handleUpdatePositionOfRelation = (newIndex, currentIndex) => {
+    if (onRelationReorder && newIndex >= 0 && newIndex < relations.length) {
+      onRelationReorder(currentIndex, newIndex);
+    }
+  };
+
   const previewRelationsLength = usePrev(relations.length);
   /**
    * @type {React.MutableRefObject<'onChange' | 'loadMore'>}
@@ -223,8 +260,12 @@ const RelationInput = ({
     ) {
       listRef.current.scrollToItem(0, 'start');
     }
+
+    updatedRelationsWith.current = undefined;
   }, [previewRelationsLength, relations]);
 
+  const ariaDescriptionId = `${name}-item-instructions`;
+
   return (
     <Field error={error} name={name} hint={description} id={id}>
       <Relation
@@ -286,63 +327,40 @@ const RelationInput = ({
           )
         }
       >
-        <RelationList overflow={overflow}>
-          <List
-            height={dynamicListHeight}
-            ref={listRef}
-            outerRef={outerListRef}
-            itemCount={totalNumberOfRelations}
-            itemSize={RELATION_ITEM_HEIGHT}
-            itemData={relations}
-            innerElementType="ol"
-          >
-            {({ data, index, style }) => {
-              const { publicationState, href, mainField, id } = data[index];
-              const statusColor = publicationState === 'draft' ? 'secondary' : 'success';
-
-              return (
-                <RelationItem
-                  disabled={disabled}
-                  key={`relation-${name}-${id}`}
-                  endAction={
-                    <DisconnectButton
-                      data-testid={`remove-relation-${id}`}
-                      disabled={disabled}
-                      type="button"
-                      onClick={() => onRelationDisconnect(data[index])}
-                      aria-label={labelDisconnectRelation}
-                    >
-                      <Icon width="12px" as={Cross} />
-                    </DisconnectButton>
-                  }
-                  style={style}
-                >
-                  <Box minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
-                    <Tooltip description={mainField ?? `${id}`}>
-                      {href ? (
-                        <LinkEllipsis to={href} disabled={disabled}>
-                          {mainField ?? id}
-                        </LinkEllipsis>
-                      ) : (
-                        <Typography textColor={disabled ? 'neutral600' : 'primary600'} ellipsis>
-                          {mainField ?? id}
-                        </Typography>
-                      )}
-                    </Tooltip>
-                  </Box>
-
-                  {publicationState && (
-                    <Status variant={statusColor} showBullet={false} size="S">
-                      <Typography fontWeight="bold" textColor={`${statusColor}700`}>
-                        {publicationStateTranslations[publicationState]}
-                      </Typography>
-                    </Status>
-                  )}
-                </RelationItem>
-              );
-            }}
-          </List>
-        </RelationList>
+        {relations.length > 0 && (
+          <RelationList overflow={overflow}>
+            <VisuallyHidden id={ariaDescriptionId}>{listAriaDescription}</VisuallyHidden>
+            <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>
+            <List
+              height={dynamicListHeight}
+              ref={listRef}
+              outerRef={outerListRef}
+              itemCount={totalNumberOfRelations}
+              itemSize={RELATION_ITEM_HEIGHT + RELATION_GUTTER}
+              itemData={{
+                name,
+                ariaDescribedBy: ariaDescriptionId,
+                canDrag: canReorder,
+                disabled,
+                handleCancel: onCancel,
+                handleDropItem: onDropItem,
+                handleGrabItem: onGrabItem,
+                iconButtonAriaLabel,
+                labelDisconnectRelation,
+                onRelationDisconnect,
+                publicationStateTranslations,
+                relations,
+                updatePositionOfRelation: handleUpdatePositionOfRelation,
+              }}
+              itemKey={(index, { relations: relationsItems }) =>
+                `${relationsItems[index].mainField}_${relationsItems[index].id}`
+              }
+              innerElementType="ol"
+            >
+              {ListItem}
+            </List>
+          </RelationList>
+        )}
         {(description || error) && (
           <Box paddingTop={2}>
             <FieldHint />
@@ -384,11 +402,16 @@ const SearchResults = PropTypes.shape({
 });
 
 RelationInput.defaultProps = {
+  canReorder: false,
   description: undefined,
   disabled: false,
   error: undefined,
   labelAction: null,
   labelLoadMore: null,
+  liveText: undefined,
+  onCancel: undefined,
+  onDropItem: undefined,
+  onGrabItem: undefined,
   required: false,
   relations: { data: [] },
   searchResults: { data: [] },
@@ -396,20 +419,28 @@ RelationInput.defaultProps = {
 
 RelationInput.propTypes = {
   error: PropTypes.string,
+  canReorder: PropTypes.bool,
   description: PropTypes.string,
   disabled: PropTypes.bool,
+  iconButtonAriaLabel: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   labelAction: PropTypes.element,
   labelLoadMore: PropTypes.string,
   labelDisconnectRelation: PropTypes.string.isRequired,
+  listAriaDescription: PropTypes.string.isRequired,
+  liveText: PropTypes.string,
   loadingMessage: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   noRelationsMessage: PropTypes.string.isRequired,
   numberOfRelationsToDisplay: PropTypes.number.isRequired,
+  onCancel: PropTypes.func,
+  onDropItem: PropTypes.func,
+  onGrabItem: PropTypes.func,
   onRelationConnect: PropTypes.func.isRequired,
   onRelationDisconnect: PropTypes.func.isRequired,
   onRelationLoadMore: PropTypes.func.isRequired,
+  onRelationReorder: PropTypes.func.isRequired,
   onSearch: PropTypes.func.isRequired,
   onSearchNextPage: PropTypes.func.isRequired,
   placeholder: PropTypes.string.isRequired,
@@ -423,4 +454,118 @@ RelationInput.propTypes = {
   relations: RelationsResult,
 };
 
+/**
+ * This is in a seperate component to enforce passing all the props the component requires to react-window
+ * to ensure drag & drop correctly works.
+ */
+const ListItem = ({ data, index, style }) => {
+  const {
+    ariaDescribedBy,
+    canDrag,
+    disabled,
+    handleCancel,
+    handleDropItem,
+    handleGrabItem,
+    iconButtonAriaLabel,
+    name,
+    labelDisconnectRelation,
+    onRelationDisconnect,
+    publicationStateTranslations,
+    relations,
+    updatePositionOfRelation,
+  } = data;
+  const { publicationState, href, mainField, id } = relations[index];
+  const statusColor = publicationState === 'draft' ? 'secondary' : 'success';
+
+  return (
+    <RelationItem
+      ariaDescribedBy={ariaDescribedBy}
+      canDrag={canDrag}
+      disabled={disabled}
+      displayValue={mainField ?? id}
+      iconButtonAriaLabel={iconButtonAriaLabel}
+      id={id}
+      index={index}
+      name={name}
+      endAction={
+        <DisconnectButton
+          data-testid={`remove-relation-${id}`}
+          disabled={disabled}
+          type="button"
+          onClick={() => onRelationDisconnect(relations[index])}
+          aria-label={labelDisconnectRelation}
+        >
+          <Icon width="12px" as={Cross} />
+        </DisconnectButton>
+      }
+      onCancel={handleCancel}
+      onDropItem={handleDropItem}
+      onGrabItem={handleGrabItem}
+      status={publicationState || undefined}
+      style={{
+        ...style,
+        bottom: style.bottom ?? 0 + RELATION_GUTTER,
+        height: style.height ?? 0 - RELATION_GUTTER,
+      }}
+      updatePositionOfRelation={updatePositionOfRelation}
+    >
+      <BoxEllipsis minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
+        <Tooltip description={mainField ?? `${id}`}>
+          {href ? (
+            <LinkEllipsis to={href} disabled={disabled}>
+              {mainField ?? id}
+            </LinkEllipsis>
+          ) : (
+            <Typography textColor={disabled ? 'neutral600' : 'primary600'} ellipsis>
+              {mainField ?? id}
+            </Typography>
+          )}
+        </Tooltip>
+      </BoxEllipsis>
+
+      {publicationState && (
+        <Status variant={statusColor} showBullet={false} size="S">
+          <Typography fontWeight="bold" textColor={`${statusColor}700`}>
+            {publicationStateTranslations[publicationState]}
+          </Typography>
+        </Status>
+      )}
+    </RelationItem>
+  );
+};
+
+ListItem.defaultProps = {
+  data: {},
+};
+
+ListItem.propTypes = {
+  data: PropTypes.shape({
+    ariaDescribedBy: PropTypes.string.isRequired,
+    canDrag: PropTypes.bool.isRequired,
+    disabled: PropTypes.bool.isRequired,
+    handleCancel: PropTypes.func,
+    handleDropItem: PropTypes.func,
+    handleGrabItem: PropTypes.func,
+    iconButtonAriaLabel: PropTypes.string.isRequired,
+    labelDisconnectRelation: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    onRelationDisconnect: PropTypes.func.isRequired,
+    publicationStateTranslations: PropTypes.shape({
+      draft: PropTypes.string.isRequired,
+      published: PropTypes.string.isRequired,
+    }).isRequired,
+    relations: PropTypes.arrayOf(
+      PropTypes.shape({
+        href: PropTypes.string,
+        id: PropTypes.number.isRequired,
+        publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+        mainField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      })
+    ),
+    updatePositionOfRelation: PropTypes.func.isRequired,
+  }),
+  index: PropTypes.number.isRequired,
+  style: PropTypes.object.isRequired,
+};
+
 export default RelationInput;

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

@@ -1,47 +1,159 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
+import { getEmptyImage } from 'react-dnd-html5-backend';
 
-const ChildrenWrapper = styled(Flex)`
+import { Box, Flex, Stack, IconButton } from '@strapi/design-system';
+import { Drag } from '@strapi/icons';
+
+import { useDragAndDrop } from '../../../hooks/useDragAndDrop';
+
+import { composeRefs, ItemTypes } from '../../../utils';
+
+import { RELATION_GUTTER } from '../constants';
+
+export const StackWrapper = styled(Stack)`
   width: 100%;
   /* Used to prevent endAction to be pushed out of container */
   min-width: 0;
 `;
 
-export const RelationItem = ({ children, disabled, endAction, style, ...props }) => {
+export const ChildrenWrapper = styled(Flex)`
+  width: 100%;
+  /* Used to prevent endAction to be pushed out of container */
+  min-width: 0;
+`;
+
+export const RelationItem = ({
+  ariaDescribedBy,
+  children,
+  displayValue,
+  canDrag,
+  disabled,
+  endAction,
+  iconButtonAriaLabel,
+  style,
+  id,
+  index,
+  name,
+  onCancel,
+  onDropItem,
+  onGrabItem,
+  status,
+  updatePositionOfRelation,
+  ...props
+}) => {
+  const [{ handlerId, isDragging, handleKeyDown }, relationRef, dropRef, dragRef, dragPreviewRef] =
+    useDragAndDrop(canDrag && !disabled, {
+      type: `${ItemTypes.RELATION}_${name}`,
+      index,
+      item: {
+        displayedValue: displayValue,
+        status,
+      },
+      onGrabItem,
+      onDropItem,
+      onCancel,
+      onMoveItem: updatePositionOfRelation,
+    });
+
+  const composedRefs = composeRefs(relationRef, dragRef);
+
+  useEffect(() => {
+    dragPreviewRef(getEmptyImage());
+  }, [dragPreviewRef]);
+
   return (
-    <Box style={style} as="li">
-      <Flex
-        paddingTop={2}
-        paddingBottom={2}
-        paddingLeft={4}
-        paddingRight={4}
-        hasRadius
-        borderSize={1}
-        background={disabled ? 'neutral150' : 'neutral0'}
-        borderColor="neutral200"
-        justifyContent="space-between"
-        {...props}
-      >
-        <ChildrenWrapper justifyContent="space-between">{children}</ChildrenWrapper>
-        {endAction && <Box paddingLeft={4}>{endAction}</Box>}
-      </Flex>
+    <Box
+      style={style}
+      as="li"
+      ref={dropRef}
+      aria-describedby={ariaDescribedBy}
+      cursor={canDrag ? 'all-scroll' : 'default'}
+    >
+      {isDragging ? (
+        <RelationItemPlaceholder />
+      ) : (
+        <Flex
+          paddingTop={2}
+          paddingBottom={2}
+          paddingLeft={canDrag ? 2 : 4}
+          paddingRight={4}
+          hasRadius
+          borderSize={1}
+          background={disabled ? 'neutral150' : 'neutral0'}
+          borderColor="neutral200"
+          justifyContent="space-between"
+          ref={canDrag ? composedRefs : undefined}
+          data-handler-id={handlerId}
+          {...props}
+        >
+          <StackWrapper spacing={1} horizontal>
+            {canDrag ? (
+              <IconButton
+                forwardedAs="div"
+                role="button"
+                tabIndex={0}
+                aria-label={iconButtonAriaLabel}
+                noBorder
+                onKeyDown={handleKeyDown}
+              >
+                <Drag />
+              </IconButton>
+            ) : null}
+            <ChildrenWrapper justifyContent="space-between">{children}</ChildrenWrapper>
+          </StackWrapper>
+          {endAction && <Box paddingLeft={4}>{endAction}</Box>}
+        </Flex>
+      )}
     </Box>
   );
 };
 
+const RelationItemPlaceholder = () => (
+  <Box
+    paddingTop={2}
+    paddingBottom={2}
+    paddingLeft={4}
+    paddingRight={4}
+    hasRadius
+    borderStyle="dashed"
+    borderColor="primary600"
+    borderWidth="1px"
+    background="primary100"
+    height={`calc(100% - ${RELATION_GUTTER}px)`}
+  />
+);
+
 RelationItem.defaultProps = {
+  ariaDescribedBy: '',
+  canDrag: false,
+  displayValue: '',
   disabled: false,
   endAction: undefined,
+  onCancel: undefined,
+  onDropItem: undefined,
+  onGrabItem: undefined,
   style: undefined,
+  status: undefined,
+  updatePositionOfRelation: undefined,
 };
 
 RelationItem.propTypes = {
+  ariaDescribedBy: PropTypes.string,
+  canDrag: PropTypes.bool,
   children: PropTypes.node.isRequired,
+  displayValue: PropTypes.string,
   disabled: PropTypes.bool,
   endAction: PropTypes.node,
+  iconButtonAriaLabel: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired,
+  index: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  onCancel: PropTypes.func,
+  onDropItem: PropTypes.func,
+  onGrabItem: PropTypes.func,
+  status: PropTypes.string,
   style: PropTypes.shape({
     height: PropTypes.number,
     left: PropTypes.number,
@@ -49,4 +161,5 @@ RelationItem.propTypes = {
     right: PropTypes.number,
     width: PropTypes.string,
   }),
+  updatePositionOfRelation: PropTypes.func,
 };

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

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
 
 const ShadowBox = styled(Box)`
   position: relative;
@@ -37,7 +36,7 @@ const ShadowBox = styled(Box)`
 export const RelationList = ({ children, overflow, ...props }) => {
   return (
     <ShadowBox overflowDirection={overflow} {...props}>
-      <Stack spacing={1}>{children}</Stack>
+      {children}
     </ShadowBox>
   );
 };

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

@@ -1 +1,2 @@
 export const RELATION_ITEM_HEIGHT = 50;
+export const RELATION_GUTTER = 4;