@strapi/admin 4.5.3 → 4.5.5

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,16 +1,5 @@
 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');
-};
-
-loadCss();
-
 const GlobalStyle = createGlobalStyle`
   body {
     background: ${({ theme }) => theme.colors.neutral100};

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/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, { 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';
@@ -20,6 +19,7 @@ import ArrowUp from '@strapi/icons/ArrowUp';
 import { useContentTypeLayout } from '../../../hooks';
 import { getTrad } from '../../../utils';
 
+import { ComponentIcon } from '../../ComponentIcon';
 import FieldComponent from '../../FieldComponent';
 
 const IconButtonCustom = styled(IconButton)`
@@ -73,7 +73,7 @@ const DynamicZoneComponent = ({
 
     const mainField = get(modifiedData, [name, index, mainFieldKey]) ?? '';
 
-    const displayedValue = mainFieldKey === 'id' ? '' : mainField.trim();
+    const displayedValue = mainFieldKey === 'id' ? '' : String(mainField).trim();
 
     const mainValue = displayedValue.length > 0 ? ` - ${displayedValue}` : displayedValue;
 
@@ -111,7 +111,7 @@ const DynamicZoneComponent = ({
       <StyledBox hasRadius>
         <Accordion expanded={isOpen} onToggle={handleToggle} size="S" error={errorMessage}>
           <AccordionToggle
-            startIcon={<FontAwesomeIcon icon={icon} />}
+            startIcon={<ComponentIcon showBackground={false} size="S" />}
             action={
               <Stack horizontal spacing={0} expanded={isOpen}>
                 {showDownIcon && (

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

@@ -8,7 +8,9 @@ import set from 'lodash/set';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Prompt, Redirect } from 'react-router-dom';
-import { Main } from '@strapi/design-system/Main';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Main } from '@strapi/design-system';
 import {
   LoadingIndicatorPage,
   ContentManagerEditViewDataManagerContext,
@@ -20,8 +22,13 @@ import {
 } from '@strapi/helper-plugin';
 
 import { getTrad, removeKeyInObject } from '../../utils';
+
+import selectCrudReducer from '../../sharedReducers/crudReducer/selectors';
+
 import reducer, { initialState } from './reducer';
 import { cleanData, createYupSchema, recursivelyFindPathsBasedOnCondition } from './utils';
+import { clearSetModifiedDataOnly } from '../../sharedReducers/crudReducer/actions';
+import { usePrev } from '../../hooks';
 
 const EditViewDataManagerProvider = ({
   allLayoutData,
@@ -61,6 +68,9 @@ const EditViewDataManagerProvider = ({
     publishConfirmation,
   } = reducerState;
 
+  const { setModifiedDataOnly } = useSelector(selectCrudReducer);
+  const reduxDispatch = useDispatch();
+
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
 
@@ -144,8 +154,18 @@ const EditViewDataManagerProvider = ({
 
   const { components } = allLayoutData;
 
+  const previousInitialValues = usePrev(initialValues);
+
   useEffect(() => {
-    if (initialValues && currentContentTypeLayout?.attributes) {
+    /**
+     * Only fire this effect if the initialValues are different
+     * otherwise it's a fruitless effort no matter what happens.
+     */
+    if (
+      initialValues &&
+      currentContentTypeLayout?.attributes &&
+      !isEqual(previousInitialValues, initialValues)
+    ) {
       /**
        * This will return an array of paths:
        * ['many_to_one', 'one_to_many', 'one_to_one']
@@ -179,9 +199,25 @@ const EditViewDataManagerProvider = ({
         componentPaths,
         repeatableComponentPaths,
         dynamicZonePaths,
+        setModifiedDataOnly,
       });
+
+      /**
+       * TODO: This should be moved to a side-effect e.g. thunks
+       * something to consider for V5
+       */
+      if (setModifiedDataOnly) {
+        reduxDispatch(clearSetModifiedDataOnly());
+      }
     }
-  }, [initialValues, currentContentTypeLayout, components]);
+  }, [
+    initialValues,
+    currentContentTypeLayout,
+    components,
+    setModifiedDataOnly,
+    reduxDispatch,
+    previousInitialValues,
+  ]);
 
   const dispatchAddComponent = useCallback(
     (type) =>

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

@@ -104,6 +104,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('.');
 
@@ -112,8 +117,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, []);
           }
 
@@ -128,7 +146,6 @@ const reducer = (state, action) =>
 
         break;
       }
-
       case 'LOAD_RELATION': {
         const initialDataPath = ['initialData', ...action.keys];
         const modifiedDataPath = ['modifiedData', ...action.keys];
@@ -192,6 +209,7 @@ const reducer = (state, action) =>
           componentPaths = [],
           repeatableComponentPaths = [],
           dynamicZonePaths = [],
+          setModifiedDataOnly,
         } = action;
 
         /**
@@ -243,7 +261,10 @@ const reducer = (state, action) =>
             return acc;
           }, data);
 
-        draftState.initialData = mergeDataWithPreparedRelations;
+        if (!setModifiedDataOnly) {
+          draftState.initialData = mergeDataWithPreparedRelations;
+        }
+
         draftState.modifiedData = mergeDataWithPreparedRelations;
 
         draftState.formErrors = {};

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/findLeafByPathAndReplace.js

@@ -24,7 +24,8 @@ export const findLeafByPathAndReplace = (endpath, replaceWith) => {
      * and the current path is not undefined in the accumulator
      * then we assume it's a leaf and we can replace it.
      */
-    if (endpath === curr && acc[curr] !== undefined) {
+
+    if (ind === currentArr.length - 1 && endpath === curr && acc[curr] !== undefined) {
       set(acc, curr, replaceWith);
 
       return acc;

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/recursivelyFindPathsBasedOnCondition.js

@@ -55,8 +55,15 @@ const recursivelyFindPathsBasedOnConditionSetup = (components, predicate = () =>
                *
                * NOTE: we don't need to know the path to the `array` because it's about data shape not about the actual data
                */
-            }).map((path) => path.split(`${componentName}.`)[1]);
+            }).map((path) => {
+              return path.split(`${componentName}.`)[1];
+            });
           })
+          /**
+           * We filter because this will give you `dynamiczone.undefined` because the dynamic_zone component
+           * is not required to be returned in this circumstance.
+           */
+          .filter((path) => Boolean(path))
           .map((path) => `${key}.${path}`);
 
         acc = [...acc, attributesInDynamicComponents];

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/NonRepeatableComponent/index.js

@@ -9,6 +9,7 @@ import { Stack } from '@strapi/design-system/Stack';
 import { useContentTypeLayout } from '../../hooks';
 import FieldComponent from '../FieldComponent';
 import Inputs from '../Inputs';
+import useLazyComponents from '../../hooks/useLazyComponents';
 
 const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, name }) => {
   const { getComponentLayout } = useContentTypeLayout();
@@ -18,6 +19,8 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
   );
   const fields = componentLayoutData.layouts.edit;
 
+  const { lazyComponentStore } = useLazyComponents();
+
   return (
     <Box
       background={isFromDynamicZone ? '' : 'neutral100'}
@@ -67,6 +70,7 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
                       metadatas={metadatas}
                       queryInfos={queryInfos}
                       size={size}
+                      customFieldInputs={lazyComponentStore}
                     />
                   </GridItem>
                 );

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

@@ -24,18 +24,13 @@ import { RELATION_ITEM_HEIGHT } from './constants';
 import { usePrev } from '../../hooks';
 
 const LinkEllipsis = styled(Link)`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: inherit;
-`;
+  display: block;
 
-const BoxEllipsis = styled(Box)`
   > span {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: inherit;
+    display: block;
   }
 `;
 
@@ -231,15 +226,13 @@ const RelationInput = ({
   }, [previewRelationsLength, relations]);
 
   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
@@ -322,7 +315,7 @@ const RelationInput = ({
                   }
                   style={style}
                 >
-                  <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}>
@@ -334,7 +327,7 @@ const RelationInput = ({
                         </Typography>
                       )}
                     </Tooltip>
-                  </BoxEllipsis>
+                  </Box>
 
                   {publicationState && (
                     <Status variant={statusColor} showBullet={false} size="S">

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

@@ -40,7 +40,7 @@ export const RelationInputDataManager = ({
   const { connectRelation, disconnectRelation, loadRelation, modifiedData, slug, initialData } =
     useCMEditViewDataManager();
 
-  const relationsFromModifiedData = get(modifiedData, name) ?? [];
+  const relationsFromModifiedData = get(modifiedData, name, []);
 
   const currentLastPage = Math.ceil(get(initialData, name, []).length / RELATIONS_TO_DISPLAY);
 

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

@@ -8,7 +8,6 @@ import { Flex } from '@strapi/design-system/Flex';
 import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
 
 const AccordionFooter = styled(Box)`
-  overflow: hidden;
   border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
   border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
   border-left: 1px solid ${({ theme }) => theme.colors.neutral200};

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

@@ -21,6 +21,7 @@ import Preview from './Preview';
 import DraggingSibling from './DraggingSibling';
 import { CustomIconButton } from './IconButtonCustoms';
 import { connect, select } from './utils';
+import useLazyComponents from '../../../hooks/useLazyComponents';
 
 const DragButton = styled.span`
   display: flex;
@@ -177,6 +178,8 @@ const DraggedItem = ({
   const accordionTitle = toString(displayedValue);
   const accordionHasError = hasErrors ? 'error' : undefined;
 
+  const { lazyComponentStore } = useLazyComponents();
+
   return (
     <Box ref={refs ? refs.dropRef : null}>
       {isDragging && <Preview />}
@@ -273,6 +276,7 @@ const DraggedItem = ({
                             // onBlur={hasErrors ? checkFormErrors : null}
                             queryInfos={queryInfos}
                             size={size}
+                            customFieldInputs={lazyComponentStore}
                           />
                         </GridItem>
                       );

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

@@ -54,9 +54,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);