@strapi/admin 4.5.4 → 4.6.0-beta.0

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

@@ -1,24 +1,22 @@
-import React, { memo, useCallback, useMemo, useState } from 'react';
 /* eslint-disable import/no-cycle */
-import { useDrop } from 'react-dnd';
+import React, { memo, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import { useNotification } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { TextButton } from '@strapi/design-system/TextButton';
-import Plus from '@strapi/icons/Plus';
+
+import { useNotification, useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { Box, Flex, TextButton, VisuallyHidden } from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
+
 import { getMaxTempKey, getTrad } from '../../utils';
 import { useContentTypeLayout } from '../../hooks';
-import ItemTypes from '../../utils/ItemTypes';
+
 import ComponentInitializer from '../ComponentInitializer';
-import connect from './utils/connect';
-import select from './utils/select';
+import Component from './components/Component';
+import * as Accordion from './components/Accordion';
+
 import getComponentErrorKeys from './utils/getComponentErrorKeys';
-import DraggedItem from './DraggedItem';
-import AccordionGroupCustom from './AccordionGroupCustom';
 
 const TextButtonCustom = styled(TextButton)`
   height: 100%;
@@ -33,8 +31,6 @@ const TextButtonCustom = styled(TextButton)`
 `;
 
 const RepeatableComponent = ({
-  addRepeatableComponentToField,
-  formErrors,
   componentUid,
   componentValue,
   componentValueLength,
@@ -43,11 +39,12 @@ const RepeatableComponent = ({
   min,
   name,
 }) => {
+  const { addRepeatableComponentToField, formErrors, moveComponentField } =
+    useCMEditViewDataManager();
   const toggleNotification = useNotification();
   const { formatMessage } = useIntl();
   const [collapseToOpen, setCollapseToOpen] = useState('');
-  const [isDraggingSibling, setIsDraggingSibling] = useState(false);
-  const [, drop] = useDrop({ accept: ItemTypes.COMPONENT });
+  const [liveText, setLiveText] = useState('');
   const { getComponentLayout, components } = useContentTypeLayout();
   const componentLayoutData = useMemo(
     () => getComponentLayout(componentUid),
@@ -60,15 +57,15 @@ const RepeatableComponent = ({
 
   const componentErrorKeys = getComponentErrorKeys(name, formErrors);
 
-  const toggleCollapses = () => {
-    setCollapseToOpen('');
-  };
-
   const missingComponentsValue = min - componentValueLength;
 
   const hasMinError = get(formErrors, name, { id: '' }).id.includes('min');
 
-  const handleClick = useCallback(() => {
+  const toggleCollapses = () => {
+    setCollapseToOpen('');
+  };
+
+  const handleClick = () => {
     if (!isReadOnly) {
       if (componentValueLength < max) {
         const shouldCheckErrors = hasMinError;
@@ -83,18 +80,89 @@ const RepeatableComponent = ({
         });
       }
     }
-  }, [
-    components,
-    addRepeatableComponentToField,
-    componentLayoutData,
-    componentValueLength,
-    hasMinError,
-    isReadOnly,
-    max,
-    name,
-    nextTempKey,
-    toggleNotification,
-  ]);
+  };
+
+  const handleMoveComponentField = (newIndex, currentIndex) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('dnd.reorder'),
+          defaultMessage: '{item}, moved. New position in list: {position}.',
+        },
+        {
+          item: `${name}.${currentIndex}`,
+          position: getItemPos(newIndex),
+        }
+      )
+    );
+
+    moveComponentField({
+      name,
+      newIndex,
+      currentIndex,
+    });
+  };
+
+  const mainField = get(componentLayoutData, ['settings', 'mainField'], 'id');
+
+  const handleToggle = (key) => () => {
+    if (collapseToOpen === key) {
+      setCollapseToOpen('');
+    } else {
+      setCollapseToOpen(key);
+    }
+  };
+
+  /**
+   *
+   * @param {number} index
+   * @returns {string}
+   */
+  const getItemPos = (index) => `${index + 1} of ${componentValueLength}`;
+
+  const handleCancel = (index) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('dnd.cancel-item'),
+          defaultMessage: '{item}, dropped. Re-order cancelled.',
+        },
+        {
+          item: `${name}.${index}`,
+        }
+      )
+    );
+  };
+
+  const handleGrabItem = (index) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('dnd.grab-item'),
+          defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`,
+        },
+        {
+          item: `${name}.${index}`,
+          position: getItemPos(index),
+        }
+      )
+    );
+  };
+
+  const handleDropItem = (index) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('dnd.drop-item'),
+          defaultMessage: `{item}, dropped. Final position in list: {position}.`,
+        },
+        {
+          item: `${name}.${index}`,
+          position: getItemPos(index),
+        }
+      )
+    );
+  };
 
   let errorMessage = formErrors[name];
 
@@ -105,6 +173,11 @@ const RepeatableComponent = ({
         'There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}',
       values: { number: missingComponentsValue },
     };
+  } else if (componentErrorKeys.some((error) => error.split('.').length > 1) && !hasMinError) {
+    errorMessage = {
+      id: getTrad('components.RepeatableComponent.error-message'),
+      defaultMessage: 'The component(s) contain error(s)',
+    };
   }
 
   if (componentValueLength === 0) {
@@ -113,22 +186,44 @@ const RepeatableComponent = ({
     );
   }
 
-  const doesRepComponentHasChildError = componentErrorKeys.some(
-    (error) => error.split('.').length > 1
-  );
-
-  if (doesRepComponentHasChildError && !hasMinError) {
-    errorMessage = {
-      id: getTrad('components.RepeatableComponent.error-message'),
-      defaultMessage: 'The component(s) contain error(s)',
-    };
-  }
+  const ariaDescriptionId = `${name}-item-instructions`;
 
   return (
-    <Box hasRadius ref={drop}>
-      <AccordionGroupCustom
-        error={errorMessage}
-        footer={
+    <Box hasRadius>
+      <VisuallyHidden id={ariaDescriptionId}>
+        {formatMessage({
+          id: getTrad('dnd.instructions'),
+          defaultMessage: `Press spacebar to grab and re-order`,
+        })}
+      </VisuallyHidden>
+      <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>
+      <Accordion.Group error={errorMessage} ariaDescribedBy={ariaDescriptionId}>
+        <Accordion.Content aria-describedby={ariaDescriptionId}>
+          {componentValue.map((data, index) => {
+            const key = data.__temp_key__;
+            const componentFieldName = `${name}.${index}`;
+
+            return (
+              <Component
+                componentFieldName={componentFieldName}
+                componentUid={componentUid}
+                fields={componentLayoutData.layouts.edit}
+                key={key}
+                index={index}
+                isOpen={collapseToOpen === key}
+                isReadOnly={isReadOnly}
+                mainField={mainField}
+                moveComponentField={handleMoveComponentField}
+                onClickToggle={handleToggle(key)}
+                toggleCollapses={toggleCollapses}
+                onCancel={handleCancel}
+                onDropItem={handleDropItem}
+                onGrabItem={handleGrabItem}
+              />
+            );
+          })}
+        </Accordion.Content>
+        <Accordion.Footer>
           <Flex justifyContent="center" height="48px" background="neutral0">
             <TextButtonCustom disabled={isReadOnly} onClick={handleClick} startIcon={<Plus />}>
               {formatMessage({
@@ -137,39 +232,8 @@ const RepeatableComponent = ({
               })}
             </TextButtonCustom>
           </Flex>
-        }
-      >
-        {componentValue.map((data, index) => {
-          const key = data.__temp_key__;
-          const isOpen = collapseToOpen === key;
-          const componentFieldName = `${name}.${index}`;
-          const hasErrors = componentErrorKeys.includes(componentFieldName);
-
-          return (
-            <DraggedItem
-              componentFieldName={componentFieldName}
-              componentUid={componentUid}
-              hasErrors={hasErrors}
-              hasMinError={hasMinError}
-              isDraggingSibling={isDraggingSibling}
-              isOpen={isOpen}
-              isReadOnly={isReadOnly}
-              key={key}
-              onClickToggle={() => {
-                if (isOpen) {
-                  setCollapseToOpen('');
-                } else {
-                  setCollapseToOpen(key);
-                }
-              }}
-              parentName={name}
-              schema={componentLayoutData}
-              setIsDraggingSibling={setIsDraggingSibling}
-              toggleCollapses={toggleCollapses}
-            />
-          );
-        })}
-      </AccordionGroupCustom>
+        </Accordion.Footer>
+      </Accordion.Group>
     </Box>
   );
 };
@@ -177,25 +241,21 @@ const RepeatableComponent = ({
 RepeatableComponent.defaultProps = {
   componentValue: null,
   componentValueLength: 0,
-  formErrors: {},
+  isReadOnly: false,
   max: Infinity,
   min: 0,
 };
 
 RepeatableComponent.propTypes = {
-  addRepeatableComponentToField: PropTypes.func.isRequired,
   componentUid: PropTypes.string.isRequired,
   componentValue: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   componentValueLength: PropTypes.number,
-  formErrors: PropTypes.object,
-  isReadOnly: PropTypes.bool.isRequired,
+  isReadOnly: PropTypes.bool,
   max: PropTypes.number,
   min: PropTypes.number,
   name: PropTypes.string.isRequired,
 };
 
-const Memoized = memo(RepeatableComponent);
-
-export default connect(Memoized, select);
+export default memo(RepeatableComponent);
 
 export { RepeatableComponent };

package/admin/src/content-manager/components/RepeatableComponent/utils/getComponentErrorKeys.js

@@ -1,4 +1,4 @@
-export default function getComponentErrorKeys(name, formErrors) {
+export default function getComponentErrorKeys(name, formErrors = {}) {
   return Object.keys(formErrors)
     .filter((errorKey) => errorKey.startsWith(name))
     .map((errorKey) =>

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

@@ -6,3 +6,5 @@ export { default as usePluginsQueryParams } from './usePluginsQueryParams';
 export { default as useSyncRbac } from './useSyncRbac';
 export { default as useWysiwyg } from './useWysiwyg';
 export { usePrev } from './usePrev';
+export { useDragAndDrop } from './useDragAndDrop';
+export { useKeyboardDragAndDrop } from './useKeyboardDragAndDrop';

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

@@ -0,0 +1,120 @@
+import { useRef } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+
+import { useKeyboardDragAndDrop } from './useKeyboardDragAndDrop';
+
+/**
+ * @typedef UseDragAndDropOptions
+ *
+ * @type {{
+ *  type?: string,
+ *  index: number,
+ *  item?: object,
+ *  onStart?: () => void,
+ *  onEnd?: () => void,
+ * } & import('./useKeyboardDragAndDrop').UseKeyboardDragAndDropCallbacks}
+ */
+
+/**
+ * @typedef UseDragAndDropReturn
+ *
+ * @type {[props: {handlerId: import('dnd-core').Identifier, isDragging: boolean, handleKeyDown: (event: import('react').KeyboardEvent<HTMLButtonElement>) => void}, objectRef: React.RefObject<HTMLElement>, dropRef: import('react-dnd').ConnectDropTarget, dragRef: import('react-dnd').ConnectDragSource, dragPreviewRef: import('react-dnd').ConnectDragPreview]}
+ */
+
+/**
+ * A utility hook abstracting the general drag and drop hooks from react-dnd.
+ * Centralising the same behaviours and by default offering keyboard support.
+ *
+ * @type {(active: boolean, options: UseDragAndDropOptions) => UseDragAndDropReturn}
+ */
+export const useDragAndDrop = (
+  active,
+  {
+    type = 'STRAPI_DND',
+    index,
+    item = {},
+    onStart,
+    onEnd,
+    onGrabItem,
+    onDropItem,
+    onCancel,
+    onMoveItem,
+  }
+) => {
+  const objectRef = useRef(null);
+
+  const [{ handlerId }, dropRef] = useDrop({
+    accept: type,
+    collect(monitor) {
+      return {
+        handlerId: monitor.getHandlerId(),
+      };
+    },
+    hover(item, monitor) {
+      if (!objectRef.current) {
+        return;
+      }
+      const dragIndex = item.index;
+      const newInd = index;
+
+      // Don't replace items with themselves
+      if (dragIndex === newInd) {
+        return;
+      }
+
+      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 upwards
+      if (dragIndex > newInd && hoverClientY > hoverMiddleY) {
+        return;
+      }
+
+      // Time to actually perform the action
+      onMoveItem(newInd, dragIndex);
+      item.index = newInd;
+    },
+  });
+
+  const [{ isDragging }, dragRef, dragPreviewRef] = useDrag({
+    type,
+    item() {
+      if (onStart) {
+        onStart();
+      }
+
+      /**
+       * This will be attached and it helps define the preview sizes
+       * when a component is flexy e.g. Relations
+       */
+      const { width } = objectRef.current?.getBoundingClientRect() ?? {};
+
+      return { index, width, ...item };
+    },
+    end() {
+      if (onEnd) {
+        onEnd();
+      }
+    },
+    canDrag: active,
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  const handleKeyDown = useKeyboardDragAndDrop(index, {
+    onGrabItem,
+    onDropItem,
+    onCancel,
+    onMoveItem,
+  });
+
+  return [{ handlerId, isDragging, handleKeyDown }, objectRef, dropRef, dragRef, dragPreviewRef];
+};

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

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+
+/**
+ * @typedef UseKeyboardDragAndDropCallbacks
+ *
+ * @type {{
+ *  onCancel?: (index: number) => void,
+ *  onDropItem?: (index: number) => void,
+ *  onGrabItem?: (index: number) => void,
+ *  onMoveItem: (newIndex: number, currentIndex: number) => void,
+ * }}
+ */
+
+/**
+ * Utility hook designed to implement keyboard accessibile drag and drop by
+ * returning an onKeyDown handler to be passed to the drag icon button.
+ *
+ * @internal - You should use `useDragAndDrop` instead.
+ *
+ * @type {(index: number, callbacks: UseKeyboardDragAndDropCallbacks) => (event: React.KeyboardEvent<HTMLButtonElement>) => void}
+ */
+export const useKeyboardDragAndDrop = (index, { onCancel, onDropItem, onGrabItem, onMoveItem }) => {
+  const [isSelected, setIsSelected] = useState(false);
+  /**
+   * @type {(movement: 'UP' | 'DOWN') => void})}
+   */
+  const handleMove = (movement) => {
+    if (!isSelected) {
+      return;
+    }
+
+    if (movement === 'UP') {
+      onMoveItem(index - 1, index);
+    } else if (movement === 'DOWN') {
+      onMoveItem(index + 1, index);
+    }
+  };
+
+  const handleDragClick = () => {
+    if (isSelected) {
+      if (onDropItem) {
+        onDropItem(index);
+      }
+      setIsSelected(false);
+    } else {
+      if (onGrabItem) {
+        onGrabItem(index);
+      }
+      setIsSelected(true);
+    }
+  };
+
+  const handleCancel = () => {
+    if (isSelected) {
+      setIsSelected(false);
+
+      if (onCancel) {
+        onCancel(index);
+      }
+    }
+  };
+
+  /**
+   * @type {React.KeyboardEventHandler<HTMLButtonElement>}
+   */
+  const handleKeyDown = (e) => {
+    if (e.key === 'Tab' && !isSelected) {
+      return;
+    }
+
+    e.preventDefault();
+
+    switch (e.key) {
+      case ' ':
+      case 'Enter':
+        handleDragClick();
+        break;
+
+      case 'Escape':
+        handleCancel();
+        break;
+
+      case 'ArrowDown':
+      case 'ArrowRight':
+        handleMove('DOWN');
+        break;
+
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        handleMove('UP');
+        break;
+
+      default:
+    }
+  };
+
+  return handleKeyDown;
+};

package/admin/src/content-manager/utils/ItemTypes.js

@@ -1,7 +1,7 @@
 export default {
   COMPONENT: 'component',
   EDIT_FIELD: 'editField',
-  EDIT_RELATION: 'editRelation',
   FIELD: 'field',
+  DYNAMIC_ZONE: 'dynamicZone',
   RELATION: 'relation',
 };

package/admin/src/content-manager/utils/composeRefs.js

@@ -0,0 +1,28 @@
+/**
+ * @typedef PossibleRef<T>
+ * @type {React.Ref<T> | undefined;}
+ *
+ * @typedef setRef
+ * @type {<T>(ref: PossibleRef<T>, value: T) => React.RefCallback<T>}
+ */
+
+/**
+ * @type {setRef}
+ */
+const setRef = (ref, value) => {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref !== null && ref !== undefined) {
+    ref.current = value;
+  }
+};
+
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ *
+ * @type {<T>(...refs: PossibleRef<T>[]) => (node: T) => void}
+ */
+export const composeRefs = (...refs) => {
+  return (node) => refs.forEach((ref) => setRef(ref, node));
+};

package/admin/src/content-manager/utils/getMaxTempKey.js

@@ -5,7 +5,7 @@ const getMaxTempKey = (arr) => {
 
   return Math.max.apply(
     Math,
-    arr.map((o) => o.__temp_key__)
+    arr.map((o) => o.__temp_key__ ?? o.id)
   );
 };
 

package/admin/src/content-manager/utils/index.js

@@ -1,13 +1,20 @@
 export { default as arrayMoveItem } from './arrayMoveItem';
+
 export { default as checkIfAttributeIsDisplayable } from './checkIfAttributeIsDisplayable';
+export { composeRefs } from './composeRefs';
 export { default as createDefaultForm } from './createDefaultForm';
+
 export { default as formatLayoutToApi } from './formatLayoutToApi';
+
 export { default as generatePermissionsObject } from './generatePermissionsObject';
 export { default as getFieldName } from './getFieldName';
 export { default as getMaxTempKey } from './getMaxTempKey';
 export { default as getRequestUrl } from './getRequestUrl';
 export { default as getTrad } from './getTrad';
+
 export { default as ItemTypes } from './ItemTypes';
+
 export { default as mergeMetasWithSchema } from './mergeMetasWithSchema';
+
 export { default as removeKeyInObject } from './removeKeyInObject';
 export { default as removePasswordFieldsFromData } from './removePasswordFieldsFromData';