strapi-plugin-navigation 2.0.7 → 2.0.8

package/admin/src/components/ConfirmationDialog/index.js

@@ -27,7 +27,7 @@ const ConfirmationDialog = ({
 }) => (
 	<Dialog onClose={onCancel} title={header || getMessage('components.confirmation.dialog.header', 'Confirmation')} isOpen={isVisible}>
 		<DialogBody icon={<ExclamationMarkCircle />}>
-			<Stack size={2}>
+			<Stack spacing={2}>
 				<Flex justifyContent="center">
 					<Typography id="dialog-confirm-description">{children || getMessage('components.confirmation.dialog.description')}</Typography>
 				</Flex>

package/admin/src/components/Item/ItemCardHeader/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import { Flex } from '@strapi/design-system/Flex';
 import { IconButton } from '@strapi/design-system/IconButton';
@@ -10,18 +11,41 @@ import Wrapper from './Wrapper';
 import ItemCardBadge from '../ItemCardBadge';
 import { getMessage } from '../../../utils';
 
+const IconWrapper = styled.div`
+display: flex;
+align-items: center;
+justify-content: center;
+height: ${32 / 16}rem;
+width: ${32 / 16}rem;
+
+cursor: pointer;
+  padding: ${({ theme }) => theme.spaces[2]};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background: ${({ theme }) => theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+	
+svg {
+	> g,
+	path {
+		fill: ${({ theme }) => theme.colors.neutral500};
+	}
+}
+`
+
 const ItemCardHeader = ({ title, path, icon, removed, onItemRemove, onItemEdit, onItemRestore, dragRef }) => {
 	return (
 		<Wrapper>
 			<Flex alignItems="center">
-				<IconButton ref={dragRef} label="Drag" icon={<Drag />} />
+				<IconWrapper ref={dragRef}>
+					<Icon as={Drag} />
+				</IconWrapper>
 				<Typography variant="omega" fontWeight="bold">
 					{title}
 				</Typography>
 				<Typography variant="omega" fontWeight="bold" textColor='neutral500'>
 					{path}
 				</Typography>
-				<Icon as={icon}/>
+				<Icon as={icon} />
 			</Flex>
 			<Flex alignItems="center" style={{ zIndex: 2 }}>
 				{removed &&

package/admin/src/components/Item/index.js

@@ -1,10 +1,8 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useDrag, useDrop } from 'react-dnd';
-import { getEmptyImage } from 'react-dnd-html5-backend';
-import { drop, isEmpty, isNumber } from 'lodash';
+import { isEmpty, isNumber } from 'lodash';
 
-import { Box } from '@strapi/design-system/Box';
 import { Card, CardBody } from '@strapi/design-system/Card';
 import { Divider } from '@strapi/design-system/Divider';
 import { Flex } from '@strapi/design-system/Flex';
@@ -91,7 +89,16 @@ const Item = (props) => {
       const isAfter = hoverClientY > hoverMiddleY;
       const newOrder = isAfter ? item.order + 0.5 : item.order - 0.5;
 
+      if (dragIndex < dropIndex && hoverClientY < hoverMiddleY) {
+        return;
+      }
+      // Dragging upwards
+      if (dragIndex > dropIndex && hoverClientY > hoverMiddleY) {
+        return;
+      }
+
       onItemReOrder({ ...hoveringItem }, newOrder);
+      hoveringItem.order = newOrder;
     },
     collect: monitor => ({
       isOverCurrent: monitor.isOver({ shallow: true }),

package/admin/src/pages/SettingsPage/index.js

@@ -145,7 +145,7 @@ const SettingsPage = () => {
                 }
               />
               <ContentLayout>
-                <Stack size={7}>
+                <Stack spacing={7}>
                   {isRestartRequired && (
                     <RestartAlert
                       closeLabel={getMessage('pages.settings.actions.restart.alert.cancel')}
@@ -155,7 +155,7 @@ const SettingsPage = () => {
                       {getMessage('pages.settings.actions.restart.alert.description')}
                     </RestartAlert>)}
                   <Box {...boxDefaultProps} >
-                    <Stack size={4}>
+                    <Stack spacing={4}>
                       <Typography variant="delta" as="h2">
                         {getMessage('pages.settings.general.title')}
                       </Typography>
@@ -197,7 +197,7 @@ const SettingsPage = () => {
                                   <AccordionToggle title={displayName} togglePosition="left" />
                                   <AccordionContent>
                                     <Box padding={6}>
-                                      <Stack size={4}>
+                                      <Stack spacing={4}>
                                         <Select
                                           name={`collectionSettings-${uid}-entryLabel`}
                                           label={getMessage('pages.settings.form.nameField.label')}
@@ -240,7 +240,7 @@ const SettingsPage = () => {
                     </Stack>
                   </Box>
                   <Box {...boxDefaultProps} >
-                    <Stack size={4}>
+                    <Stack spacing={4}>
                       <Typography variant="delta" as="h2">
                         {getMessage('pages.settings.additional.title')}
                       </Typography>
@@ -272,7 +272,7 @@ const SettingsPage = () => {
                     </Stack>
                   </Box>
                   <Box {...boxDefaultProps} >
-                    <Stack size={4}>
+                    <Stack spacing={4}>
                       <Typography variant="delta" as="h2">
                         {getMessage('pages.settings.restoring.title')}
                       </Typography>

package/admin/src/pages/View/components/NavigationHeader/index.js

@@ -22,7 +22,7 @@ const NavigationHeader = ({
   return (
     <HeaderLayout
       primaryAction={
-        <Stack horizontal size={2}>
+        <Stack horizontal spacing={2}>
           <Box width="10vw">
             <Select
               type="select"

package/admin/src/pages/View/components/NavigationItemForm/index.js

@@ -187,7 +187,7 @@ const NavigationItemForm = ({
   const pathSourceName = isExternal ? 'externalPath' : 'path';
 
   const submitDisabled =
-    (form.type === navigationItemType.INTERNAL && isNil(get(form, `${inputsPrefix}related`))) ||
+    (form.type === navigationItemType.INTERNAL && !isSingleSelected && isNil(get(form, `${inputsPrefix}related`))) ||
     (form.type === navigationItemType.WRAPPER && isNil(get(form, `${inputsPrefix}title`)));
 
   const debouncedSearch = useCallback(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-navigation",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "Strapi - Navigation plugin",
   "strapi": {
     "name": "navigation",

package/server/services/utils/functions.js

@@ -7,7 +7,8 @@ const {
   isString,
   get,
   isNil,
-  isArray
+  isArray,
+  first,
 } = require('lodash');
 
 const { type: itemType } = require('../../content-types/navigation-item/lifecycle');