Merge branch 'feature/relations-main-view' into feature/relations-main-view-reducer

packages/core/admin/admin/src/content-manager/components/EditViewDataManagerProvider/index.js

@@ -404,15 +404,6 @@ const EditViewDataManagerProvider = ({
     });
   }, []);
 
-  const moveRelation = useCallback((dragIndex, overIndex, name) => {
-    dispatch({
-      type: 'MOVE_FIELD',
-      dragIndex,
-      overIndex,
-      keys: name.split('.'),
-    });
-  }, []);
-
   const removeRelation = useCallback(({ target: { name, value } }) => {
     dispatch({
       type: 'REMOVE_RELATION',
@@ -488,7 +479,6 @@ const EditViewDataManagerProvider = ({
         moveComponentDown,
         moveComponentField,
         moveComponentUp,
-        moveRelation,
         onChange: handleChange,
         onPublish: handlePublish,
         onUnpublish,

packages/core/admin/admin/src/content-manager/components/SelectWrapper/index.js

@@ -64,13 +64,8 @@ function SelectWrapper({
   const [{ query }] = useQueryParams();
   // Disable the input in case of a polymorphic relation
   const isMorph = useMemo(() => relationType.toLowerCase().includes('morph'), [relationType]);
-  const {
+
-    addRelation,
+  const { addRelation, modifiedData, onChange, removeRelation } = useCMEditViewDataManager();
-    modifiedData,
-    moveRelation,
-    onChange,
-    removeRelation,
-  } = useCMEditViewDataManager();
   const { pathname } = useLocation();
 
   const value = get(modifiedData, name, null);
@@ -295,7 +290,6 @@ function SelectWrapper({
         isLoading={isLoading}
         isClearable
         mainField={mainField}
-        move={moveRelation}
         name={name}
         options={filteredOptions}
         onChange={handleChange}

packages/core/helper-plugin/lib/src/components/ReactSelect/Async/Async.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import SelectAsync from 'react-select/async';
+import { useTheme } from 'styled-components';
+
+import ClearIndicator from '../components/ClearIndicator';
+import DropdownIndicator from '../components/DropdownIndicator';
+import IndicatorSeparator from '../components/IndicatorSeparator';
+
+import getSelectStyles from '../utils/getSelectStyles';
+
+const ReactSelectAsync = ({ components, styles, error, ariaErrorMessage, ...props }) => {
+  const theme = useTheme();
+  const customStyles = getSelectStyles(theme, error);
+
+  return (
+    <SelectAsync
+      {...props}
+      components={{ ClearIndicator, DropdownIndicator, IndicatorSeparator, ...components }}
+      aria-errormessage={error && ariaErrorMessage}
+      aria-invalid={!!error}
+      styles={{ ...customStyles, ...styles }}
+    />
+  );
+};
+
+export default ReactSelectAsync;
+
+ReactSelectAsync.defaultProps = {
+  ariaErrorMessage: undefined,
+  components: undefined,
+  error: undefined,
+  styles: undefined,
+};
+
+ReactSelectAsync.propTypes = {
+  ariaErrorMessage: PropTypes.string,
+  components: PropTypes.object,
+  error: PropTypes.string,
+  styles: PropTypes.object,
+};

packages/core/helper-plugin/lib/src/components/ReactSelect/Async/index.js

@@ -0,0 +1 @@
+export default from './Async';

packages/core/helper-plugin/lib/src/components/ReactSelect/index.js

@@ -1,3 +1 @@
-import ReactSelect from './ReactSelect';
+export default from './ReactSelect';
-
-export default ReactSelect;

packages/core/helper-plugin/lib/src/components/ReactSelect/utils/getSelectStyles.js

@@ -7,16 +7,16 @@ const getSelectStyles = (theme, error) => {
       lineHeight: 'normal',
     }),
     control: (base, state) => {
-      let border = `1px solid ${theme.colors.neutral200} !important`;
+      let borderColor = theme.colors.neutral200;
-      let boxShadow = 0;
+      let boxShadowColor;
       let backgroundColor;
 
       if (state.isFocused) {
-        border = `1px solid ${theme.colors.primary600} !important`;
+        borderColor = theme.colors.primary600;
-        boxShadow = `${theme.colors.primary600} 0px 0px 0px 2px`;
+        boxShadowColor = theme.colors.primary600;
       } else if (error) {
-        border = `1px solid ${theme.colors.danger600} !important`;
+        borderColor = theme.colors.danger600;
-        boxShadow = `${theme.colors.danger600} 0px 0px 0px 2px`;
+        boxShadowColor = theme.colors.danger600;
       }
 
       if (state.isDisabled) {
@@ -27,7 +27,7 @@ const getSelectStyles = (theme, error) => {
         ...base,
         fontSize: 14,
         height: 40,
-        border,
+        border: `1px solid ${borderColor} !important`,
         outline: 0,
         borderRadius: '2px !important',
         backgroundColor,
@@ -35,7 +35,7 @@ const getSelectStyles = (theme, error) => {
         borderTopRightRadius: '4px !important',
         borderBottomLeftRadius: '4px !important',
         borderBottomRightRadius: '4px !important',
-        boxShadow,
+        boxShadow: boxShadowColor ? `${boxShadowColor} 0px 0px 0px 2px` : 0,
       };
     },
     indicatorContainer: base => ({ ...base, padding: 0, paddingRight: theme.spaces[3] }),

packages/core/helper-plugin/lib/src/content-manager/hooks/useCMEditViewDataManager/useCMEditViewDataManager.stories.mdx

@@ -41,7 +41,6 @@ const MyCompo = () => {
     moveComponentDown: () => {},
     moveComponentField: () => {},
     moveComponentUp: () => {},
-    moveRelation: () => {},
     onChange: () => {},
     onRemoveRelation: () => {},
     removeComponentFromDynamicZone: () => {},

packages/core/helper-plugin/lib/src/index.js

@@ -64,6 +64,7 @@ export { default as PageSizeURLQuery } from './components/PageSizeURLQuery';
 export { default as RelativeTime } from './components/RelativeTime';
 export { default as DateTimePicker } from './components/DateTimePicker';
 export { default as ReactSelect } from './components/ReactSelect';
+export { default as ReactSelectAsync } from './components/ReactSelect/Async';
 export { default as Link } from './components/Link';
 export { default as LinkButton } from './components/LinkButton';