Merge branch 'master' of https://github.com/payloadcms/payload into fix/select-field-clear-value

Author: PatrikKozak

package.json

@@ -91,6 +91,8 @@
     "@babel/preset-typescript": "^7.12.1",
     "@babel/register": "^7.11.5",
     "@date-io/date-fns": "^2.10.6",
+    "@dnd-kit/core": "^6.0.5",
+    "@dnd-kit/sortable": "^7.0.1",
     "@faceless-ui/modal": "^2.0.1",
     "@faceless-ui/scroll-info": "^1.2.3",
     "@faceless-ui/window-info": "^2.0.2",
@@ -155,7 +157,7 @@
     "passport-local-mongoose": "^7.0.0",
     "path-browserify": "^1.0.1",
     "pino": "^6.4.1",
-    "pino-pretty": "^4.3.0",
+    "pino-pretty": "^9.1.1",
     "pluralize": "^8.0.0",
     "postcss": "^8.4.6",
     "postcss-loader": "^6.2.1",
@@ -177,7 +179,6 @@
     "react-router-navigation-prompt": "^1.9.6",
     "react-select": "^3.0.8",
     "react-simple-code-editor": "^0.11.0",
-    "react-sortable-hoc": "^2.0.0",
     "react-toastify": "^8.2.0",
     "sanitize-filename": "^1.6.3",
     "sass": "^1.55.0",

src/admin/components/elements/Button/index.scss

@@ -22,22 +22,6 @@
 
   &--has-tooltip {
     position: relative;
-
-  }
-
-  .btn__tooltip {
-    opacity: 0;
-    visibility: hidden;
-    transform: translate(-50%, -10px);
-  }
-
-  .btn__content {
-    &:hover {
-      .btn__tooltip {
-        opacity: 1;
-        visibility: visible;
-      }
-    }
   }
 
   &--icon-style-without-border {

src/admin/components/elements/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, { isValidElement } from 'react';
+import React, { Fragment, isValidElement } from 'react';
 import { Link } from 'react-router-dom';
 import { Props } from './types';
 
@@ -21,30 +21,31 @@ const icons = {
 
 const baseClass = 'btn';
 
-const ButtonContents = ({ children, icon, tooltip }) => {
+const ButtonContents = ({ children, icon, tooltip, showTooltip }) => {
   const BuiltInIcon = icons[icon];
 
   return (
-    <span
-      className={`${baseClass}__content`}
-    >
-      {tooltip && (
-        <Tooltip className={`${baseClass}__tooltip`}>
-          {tooltip}
-        </Tooltip>
-      )}
-      {children && (
-        <span className={`${baseClass}__label`}>
-          {children}
-        </span>
-      )}
-      {icon && (
-        <span className={`${baseClass}__icon`}>
-          {isValidElement(icon) && icon}
-          {BuiltInIcon && <BuiltInIcon />}
-        </span>
-      )}
-    </span>
+    <Fragment>
+      <Tooltip
+        className={`${baseClass}__tooltip`}
+        show={showTooltip}
+      >
+        {tooltip}
+      </Tooltip>
+      <span className={`${baseClass}__content`}>
+        {children && (
+          <span className={`${baseClass}__label`}>
+            {children}
+          </span>
+        )}
+        {icon && (
+          <span className={`${baseClass}__icon`}>
+            {isValidElement(icon) && icon}
+            {BuiltInIcon && <BuiltInIcon />}
+          </span>
+        )}
+      </span>
+    </Fragment>
   );
 };
 
@@ -53,7 +54,7 @@ const Button: React.FC<Props> = (props) => {
     className,
     id,
     type = 'button',
-    el,
+    el = 'button',
     to,
     url,
     children,
@@ -69,6 +70,8 @@ const Button: React.FC<Props> = (props) => {
     tooltip,
   } = props;
 
+  const [showTooltip, setShowTooltip] = React.useState(false);
+
   const classes = [
     baseClass,
     className && className,
@@ -84,6 +87,7 @@ const Button: React.FC<Props> = (props) => {
   ].filter(Boolean).join(' ');
 
   function handleClick(event) {
+    setShowTooltip(false);
     if (type !== 'submit' && onClick) event.preventDefault();
     if (onClick) onClick(event);
   }
@@ -93,6 +97,8 @@ const Button: React.FC<Props> = (props) => {
     type,
     className: classes,
     disabled,
+    onMouseEnter: tooltip ? () => setShowTooltip(true) : undefined,
+    onMouseLeave: tooltip ? () => setShowTooltip(false) : undefined,
     onClick: !disabled ? handleClick : undefined,
     rel: newTab ? 'noopener noreferrer' : undefined,
     target: newTab ? '_blank' : undefined,
@@ -108,6 +114,7 @@ const Button: React.FC<Props> = (props) => {
           <ButtonContents
             icon={icon}
             tooltip={tooltip}
+            showTooltip={showTooltip}
           >
             {children}
           </ButtonContents>
@@ -123,25 +130,29 @@ const Button: React.FC<Props> = (props) => {
           <ButtonContents
             icon={icon}
             tooltip={tooltip}
+            showTooltip={showTooltip}
           >
             {children}
           </ButtonContents>
         </a>
       );
 
     default:
+      const Tag = el; // eslint-disable-line no-case-declarations
+
       return (
-        <button
+        <Tag
           type="submit"
           {...buttonProps}
         >
           <ButtonContents
             icon={icon}
             tooltip={tooltip}
+            showTooltip={showTooltip}
           >
             {children}
           </ButtonContents>
-        </button>
+        </Tag>
       );
   }
 };

src/admin/components/elements/Button/types.ts

@@ -1,10 +1,10 @@
-import React, { MouseEvent } from 'react';
+import React, { ElementType, MouseEvent } from 'react';
 
 export type Props = {
   className?: string,
   id?: string,
   type?: 'submit' | 'button',
-  el?: 'link' | 'anchor' | undefined,
+  el?: 'link' | 'anchor' | ElementType,
   to?: string,
   url?: string,
   children?: React.ReactNode,

src/admin/components/elements/CopyToClipboard/index.scss

@@ -14,22 +14,8 @@
     width: 0px;
   }
 
-  .tooltip {
-    pointer-events: none;
-    opacity: 0;
-    visibility: hidden;
-  }
-
   &:focus,
   &:active {
     outline: none;
   }
-
-  &:hover {
-    .tooltip {
-      opacity: 1;
-      visibility: visible;
-
-    }
-  }
 }

src/admin/components/elements/CopyToClipboard/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import Copy from '../../icons/Copy';
 import Tooltip from '../Tooltip';
@@ -18,14 +18,6 @@ const CopyToClipboard: React.FC<Props> = ({
   const [hovered, setHovered] = useState(false);
   const { t } = useTranslation('general');
 
-  useEffect(() => {
-    if (copied && !hovered) {
-      setTimeout(() => {
-        setCopied(false);
-      }, 1500);
-    }
-  }, [copied, hovered]);
-
   if (value) {
     return (
       <button
@@ -44,13 +36,15 @@ const CopyToClipboard: React.FC<Props> = ({
             ref.current.select();
             ref.current.setSelectionRange(0, value.length + 1);
             document.execCommand('copy');
-
             setCopied(true);
           }
         }}
       >
         <Copy />
-        <Tooltip>
+        <Tooltip
+          show={hovered || copied}
+          delay={copied ? 0 : undefined}
+        >
           {copied && (successMessage ?? t('copied'))}
           {!copied && (defaultMessage ?? t('copy'))}
         </Tooltip>

src/admin/components/elements/DeleteDocument/index.tsx

@@ -102,7 +102,7 @@ const DeleteDocument: React.FC<Props> = (props) => {
             <p>
               <Trans
                 i18nKey="aboutToDelete"
-                values={{ label: singular, title: titleToRender }}
+                values={{ label: getTranslation(singular, i18n), title: titleToRender }}
                 t={t}
               >
                 aboutToDelete

src/admin/components/elements/DocumentDrawer/index.scss

@@ -0,0 +1,36 @@
+@import '../../../scss/styles.scss';
+
+.doc-drawer {
+  &__header {
+    margin-bottom: base(1);
+  }
+
+  &__header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-top: base(2.5);
+  }
+
+  &__header-close {
+    svg {
+      width: base(2.5);
+      height: base(2.5);
+      position: relative;
+      top: base(-.5);
+      right: base(-.75);
+
+      .stroke {
+        stroke-width: .5px;
+      }
+    }
+  }
+
+  @include mid-break {
+    &__header-close {
+      svg {
+        top: base(-.75);
+      }
+    }
+  }
+}