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

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,32 +39,31 @@ 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),
     [componentUid, getComponentLayout]
   );
 
-  const nextTempKey = useMemo(() => {
-    return getMaxTempKey(componentValue || []) + 1;
-  }, [componentValue]);
+  const nextTempKey = useMemo(() => getMaxTempKey(componentValue || []) + 1, [componentValue]);
 
   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 +78,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 +171,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 +184,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 +230,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 +239,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/components/SingleTypeFormWrapper/index.js

@@ -103,7 +103,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       setIsCreatingEntry(true);
 
       try {
-        const { data } = await axiosInstance(getRequestUrl(`${slug}${searchToSend}`), {
+        const { data } = await axiosInstance.get(getRequestUrl(`${slug}${searchToSend}`), {
           cancelToken: source.token,
         });
 

package/admin/src/content-manager/components/Wysiwyg/Editor.js

@@ -43,7 +43,7 @@ const Editor = ({
   }, [editorRef, textareaRef, name, placeholder]);
 
   useEffect(() => {
-    if (value && !editorRef.current.state.focused) {
+    if (value && !editorRef.current.hasFocus()) {
       editorRef.current.setValue(value);
     }
   }, [editorRef, value]);

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,134 @@
+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,
+ *  dropSensitivity?: 'regular' | 'immediate'
+ * } & 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,
+    dropSensitivity = 'regular',
+  }
+) => {
+  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;
+      }
+
+      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 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,
+    /**
+     * 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(),
+    }),
+  });
+
+  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/hooks/useLazyComponents/index.js

@@ -1,44 +1,69 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useCustomFields } from '@strapi/helper-plugin';
 
+const componentStore = new Map();
+
 /**
  * @description
  * A hook to lazy load custom field components
  * @param {Array.<string>} componentUids - The uids to look up components
  * @returns object
  */
-const useLazyComponents = (componentUids) => {
-  const [lazyComponentStore, setLazyComponentStore] = useState({});
-  const [loading, setLoading] = useState(true);
+const useLazyComponents = (componentUids = []) => {
+  const [lazyComponentStore, setLazyComponentStore] = useState(Object.fromEntries(componentStore));
+  const [loading, setLoading] = useState(() => {
+    if (componentStore.size === 0 && componentUids.length > 0) {
+      return true;
+    }
+
+    return false;
+  });
   const customFieldsRegistry = useCustomFields();
 
   useEffect(() => {
+    const setStore = (store) => {
+      setLazyComponentStore(store);
+      setLoading(false);
+    };
+
     const lazyLoadComponents = async (uids, components) => {
       const modules = await Promise.all(components);
 
       uids.forEach((uid, index) => {
-        if (!Object.keys(lazyComponentStore).includes(uid)) {
-          setLazyComponentStore({ ...lazyComponentStore, [uid]: modules[index].default });
-        }
+        componentStore.set(uid, modules[index].default);
       });
+
+      setStore(Object.fromEntries(componentStore));
     };
 
-    if (componentUids.length) {
-      const componentPromises = componentUids.map((uid) => {
+    if (componentUids.length && loading) {
+      /**
+       * These uids are not in the component store therefore we need to get the components
+       */
+      const newUids = componentUids.filter((uid) => !componentStore.get(uid));
+
+      const componentPromises = newUids.map((uid) => {
         const customField = customFieldsRegistry.get(uid);
 
         return customField.components.Input();
       });
 
-      lazyLoadComponents(componentUids, componentPromises);
+      if (componentPromises.length > 0) {
+        lazyLoadComponents(newUids, componentPromises);
+      }
     }
+  }, [componentUids, customFieldsRegistry, loading]);
 
-    if (componentUids.length === Object.keys(lazyComponentStore).length) {
-      setLoading(false);
-    }
-  }, [componentUids, customFieldsRegistry, loading, lazyComponentStore]);
+  /**
+   * Wrap this in a callback so it can be used in
+   * effects to cleanup the cached store if required
+   */
+  const cleanup = useCallback(() => {
+    componentStore.clear();
+    setLazyComponentStore({});
+  }, []);
 
-  return { isLazyLoading: loading, lazyComponentStore };
+  return { isLazyLoading: loading, lazyComponentStore, cleanup };
 };
 
 export default useLazyComponents;