@payloadcms/ui 4.0.0-internal.40de3ec → 4.0.0-internal.4804abd

package/dist/css/colors.css

@@ -35,6 +35,9 @@
     /* Modal */
     --color-modalbackdrop: rgba(0, 0, 0, 0.5);
 
+    /* Focal point */
+    --color-focal-point-backdrop: var(--ramp-black-500);
+
     /* ——————————————————————————————————————————————
        Light Theme (default)
 
@@ -315,6 +318,9 @@
     --color-bg-component-tertiary: var(--ramp-pale-purple-800);
     --color-bg-component-tertiary-hover: var(--ramp-pale-purple-700);
 
+    --color-bg-danger: var(--ramp-dark-red-500);
+    --color-bg-danger-hover: var(--ramp-dark-red-600);
+    --color-bg-danger-pressed: var(--ramp-dark-red-700);
     --color-bg-danger-tertiary: var(--ramp-pale-red-800);
     --color-bg-danger-tertiary-hover: var(--ramp-pale-red-700);
     --color-bg-danger-tertiary-pressed: var(--ramp-pale-red-600);

package/dist/css/design-tokens.css

@@ -88,6 +88,11 @@
     --ramp-red-900: #771208;
     --ramp-red-1000: #660e0b;
 
+    /* Dark Red */
+    --ramp-dark-red-500: #e03e1a;
+    --ramp-dark-red-600: #c4381c;
+    --ramp-dark-red-700: #963323;
+
     /* Pale Red */
     --ramp-pale-red-600: #a55440;
     --ramp-pale-red-700: #864537;

package/dist/css/elevations.css

@@ -2,6 +2,8 @@
   :root {
     /* Light mode elevations */
 
+    --elevation-100-canvas: 0 0 0.5px 0 rgba(0, 0, 0, 0.3);
+
     --elevation-300-tooltip:
       0 0 0.5px 0 rgba(0, 0, 0, 0.15), 0 5px 12px 0 rgba(0, 0, 0, 0.13),
       0 1px 3px 0 rgba(0, 0, 0, 0.1);
@@ -18,6 +20,8 @@
   [data-theme='dark'] {
     /* Dark mode elevations */
 
+    --elevation-100-canvas: 0 0 0.5px 0 rgba(0, 0, 0, 0.5);
+
     --elevation-300-tooltip:
       0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset, 0 5px 12px 0 rgba(0, 0, 0, 0.35),
       0 0 0.5px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 3px 0 rgba(0, 0, 0, 0.5);

package/dist/css/forms.css

@@ -1,7 +1,7 @@
 @layer payload-default {
   .form-input {
     width: 100%;
-    min-height: var(--field-min-height);
+    min-height: var(--field-min-height-large);
     background: var(--field-color-bg);
     border: var(--stroke-width-small) solid var(--field-color-border);
     border-radius: var(--field-border-radius);
@@ -69,7 +69,7 @@
     background: var(--field-color-bg);
     border: var(--stroke-width-small) solid var(--field-color-border);
     border-radius: var(--field-border-radius);
-    min-height: var(--field-min-height);
+    min-height: var(--field-min-height-large);
     transition-property: box-shadow, background-color;
     transition-duration: 100ms;
     transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
@@ -91,7 +91,6 @@
 
     input.form-input {
       flex: 1 1 0%;
-      width: 0;
       min-width: 0;
       background: transparent;
       border: none;
@@ -112,4 +111,8 @@
       border-color: var(--field-color-border-focus);
     }
   }
+
+  .field-type[data-size='medium'] {
+    --field-min-height-large: var(--field-min-height-medium);
+  }
 }

package/dist/css/radius.css

@@ -2,11 +2,9 @@
   :root {
     --radius-none: 0;
     --radius-small: 0.125rem;
+    --radius-chip: 0.1875rem;
     --radius-medium: 0.3125rem;
     --radius-large: 0.8125rem;
     --radius-full: 9999px;
-
-    --stroke-width-small: 1px;
-    --stroke-width-medium: 2px;
   }
 }

package/dist/css/theme.css

@@ -10,7 +10,8 @@
 @layer payload-default {
   :root {
     /* Fields — controls text inputs, selects, date pickers, code editors, etc. */
-    --field-min-height: var(--spacer-5);
+    --field-min-height-large: var(--spacer-5);
+    --field-min-height-medium: var(--spacer-4);
     --field-padding-inline: var(--spacer-2);
     --field-border-radius: var(--radius-medium);
 
@@ -24,5 +25,9 @@
     /* Popup menus */
     --popup-radius: var(--radius-large);
     --popup-item-radius: var(--button-radius);
+
+    /* Stroke widths */
+    --stroke-width-small: 1px;
+    --stroke-width-medium: 2px;
   }
 }

package/dist/css/utilities.css

@@ -1,8 +1,9 @@
 @layer payload-default {
   :root {
     --accessibility-focus-color: var(--color-border-selected);
-    --accessibility-outline: 1px solid var(--accessibility-focus-color);
+    --accessibility-outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
     --accessibility-outline-offset: 1px;
+    --scrollbar-color: var(--color-bg-secondary-pressed);
   }
 
   /* Screen reader only */
@@ -18,6 +19,11 @@
     border-width: 0;
   }
 
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-color) transparent;
+  }
+
   /* Global focus ring */
   :focus-visible {
     outline: var(--accessibility-outline);

package/dist/elements/APIKeyInput/index.css

@@ -0,0 +1,92 @@
+@layer payload-default {
+  .api-key-input {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    width: 100%;
+  }
+
+  .api-key-input__control {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    gap: var(--spacer-2);
+    min-width: 0;
+    min-height: var(--spacer-5);
+    padding: 0 var(--spacer-2);
+    background: var(--color-bg-secondary);
+    border: var(--stroke-width-small) solid transparent;
+    border-radius: var(--radius-medium);
+  }
+
+  .api-key-input__icon {
+    flex-shrink: 0;
+    width: var(--spacer-4);
+    height: var(--spacer-4);
+    color: var(--color-icon-secondary);
+  }
+
+  .api-key-input__field {
+    flex-grow: 1;
+    min-width: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    outline: none;
+    color: var(--color-text);
+    font-family: var(--font-family-mono);
+    font-size: var(--text-body-large-font-size);
+    line-height: var(--text-body-large-line-height);
+  }
+
+  .api-key-input__field:focus,
+  .api-key-input__field:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .api-key-input__field[type='password'] {
+    font-family: var(--font-family-sans);
+    font-size: var(--text-body-large-font-size);
+    font-weight: var(--text-body-large-strong-font-weight);
+    letter-spacing: 0.025rem;
+  }
+
+  .api-key-input__toggle {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    appearance: none;
+    width: var(--spacer-4);
+    height: var(--spacer-4);
+    padding: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--color-icon-secondary);
+  }
+
+  .api-key-input__toggle:hover {
+    color: var(--color-icon);
+  }
+
+  .api-key-input .copy-to-clipboard {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacer-5);
+    min-height: var(--spacer-5);
+    padding: 0;
+    color: var(--color-icon-secondary);
+    background: var(--color-bg-secondary);
+    border: var(--stroke-width-small) solid transparent;
+    border-radius: var(--radius-medium);
+  }
+
+  .api-key-input .copy-to-clipboard:hover {
+    color: var(--color-icon);
+    background: var(--color-bg-hover);
+  }
+}

package/dist/elements/APIKeyInput/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './index.css';
+export type APIKeyInputProps = {
+    readonly 'aria-label'?: string;
+    readonly highlighted?: boolean;
+    readonly id?: string;
+    readonly value: null | string | undefined;
+};
+/**
+ * Read-only masked API key field: key icon, value, show/hide toggle, and copy
+ * control. Shared by the core auth API-key field and the MCP API-keys collection.
+ */
+export declare const APIKeyInput: React.FC<APIKeyInputProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/APIKeyInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/APIKeyInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;CAC1C,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmClD,CAAA"}

package/dist/elements/APIKeyInput/index.js

@@ -0,0 +1,86 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { EyeIcon } from '../../icons/Eye/index.js';
+import { KeyIcon } from '../../icons/Key/index.js';
+import { CopyToClipboard } from '../CopyToClipboard/index.js';
+import './index.css';
+const baseClass = 'api-key-input';
+/**
+ * Read-only masked API key field: key icon, value, show/hide toggle, and copy
+ * control. Shared by the core auth API-key field and the MCP API-keys collection.
+ */
+export const APIKeyInput = t0 => {
+  const $ = _c(9);
+  const {
+    id,
+    "aria-label": t1,
+    highlighted,
+    value
+  } = t0;
+  const ariaLabel = t1 === undefined ? "API Key" : t1;
+  const [showKey, setShowKey] = useState(false);
+  const keyValue = value ?? "";
+  const t2 = highlighted && "highlight";
+  let t3;
+  if ($[0] !== t2) {
+    t3 = [`${baseClass}__control`, t2].filter(Boolean);
+    $[0] = t2;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const t4 = t3.join(" ");
+  let t5;
+  if ($[2] !== ariaLabel || $[3] !== id || $[4] !== keyValue || $[5] !== showKey || $[6] !== t4) {
+    let t6;
+    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = () => setShowKey(_temp);
+      $[8] = t6;
+    } else {
+      t6 = $[8];
+    }
+    t5 = _jsxs("div", {
+      className: baseClass,
+      children: [_jsxs("div", {
+        className: t4,
+        children: [_jsx(KeyIcon, {
+          className: `${baseClass}__icon`
+        }), _jsx("input", {
+          "aria-label": ariaLabel,
+          className: `${baseClass}__field`,
+          id,
+          readOnly: true,
+          type: showKey ? "text" : "password",
+          value: keyValue
+        }), _jsx("button", {
+          "aria-label": showKey ? "Hide API key" : "Show API key",
+          className: `${baseClass}__toggle`,
+          onClick: t6,
+          type: "button",
+          children: _jsx(EyeIcon, {
+            active: showKey,
+            size: 24
+          })
+        })]
+      }), _jsx(CopyToClipboard, {
+        value: keyValue
+      })]
+    });
+    $[2] = ariaLabel;
+    $[3] = id;
+    $[4] = keyValue;
+    $[5] = showKey;
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  return t5;
+};
+function _temp(prev) {
+  return !prev;
+}
+//# sourceMappingURL=index.js.map

package/dist/elements/APIKeyInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useState","EyeIcon","KeyIcon","CopyToClipboard","baseClass","APIKeyInput","t0","$","id","t1","highlighted","value","ariaLabel","undefined","showKey","setShowKey","keyValue","t2","t3","filter","Boolean","t4","join","t5","t6","Symbol","for","_temp","_jsxs","className","children","_jsx","readOnly","type","onClick","active","size","prev"],"sources":["../../../src/elements/APIKeyInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\n\nimport { EyeIcon } from '../../icons/Eye/index.js'\nimport { KeyIcon } from '../../icons/Key/index.js'\nimport { CopyToClipboard } from '../CopyToClipboard/index.js'\nimport './index.css'\n\nconst baseClass = 'api-key-input'\n\nexport type APIKeyInputProps = {\n  readonly 'aria-label'?: string\n  readonly highlighted?: boolean\n  readonly id?: string\n  readonly value: null | string | undefined\n}\n\n/**\n * Read-only masked API key field: key icon, value, show/hide toggle, and copy\n * control. Shared by the core auth API-key field and the MCP API-keys collection.\n */\nexport const APIKeyInput: React.FC<APIKeyInputProps> = ({\n  id,\n  'aria-label': ariaLabel = 'API Key',\n  highlighted,\n  value,\n}) => {\n  const [showKey, setShowKey] = useState(false)\n  const keyValue = value ?? ''\n\n  return (\n    <div className={baseClass}>\n      <div\n        className={[`${baseClass}__control`, highlighted && 'highlight'].filter(Boolean).join(' ')}\n      >\n        <KeyIcon className={`${baseClass}__icon`} />\n        <input\n          aria-label={ariaLabel}\n          className={`${baseClass}__field`}\n          id={id}\n          readOnly\n          type={showKey ? 'text' : 'password'}\n          value={keyValue}\n        />\n        <button\n          aria-label={showKey ? 'Hide API key' : 'Show API key'}\n          className={`${baseClass}__toggle`}\n          onClick={() => setShowKey((prev) => !prev)}\n          type=\"button\"\n        >\n          <EyeIcon active={showKey} size={24} />\n        </button>\n      </div>\n      <CopyToClipboard value={keyValue} />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,OAAO,QAAQ;AACxB,SAASC,OAAO,QAAQ;AACxB,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AASlB;;;;AAIA,OAAO,MAAMC,WAAA,GAA0CC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,EAAA;IAAA,cAAAC,EAAA;IAAAC,WAAA;IAAAC;EAAA,IAAAL,EAKvD;EAHe,MAAAM,SAAA,GAAAH,EAAqB,KAAAI,SAAA,GAAT,SAAS,GAArBJ,EAAqB;EAInC,OAAAK,OAAA,EAAAC,UAAA,IAA8Bf,QAAA,MAAS;EACvC,MAAAgB,QAAA,GAAiBL,KAAA,IAAS;EAKiB,MAAAM,EAAA,GAAAP,WAAA,IAAe;EAAA,IAAAQ,EAAA;EAAA,IAAAX,CAAA,QAAAU,EAAA;IAAzCC,EAAA,IAAC,GAAAd,SAAA,WAAuB,EAAEa,EAAe,EAAAE,MAAA,CAAAC,OAAoB;IAAAb,CAAA,MAAAU,EAAA;IAAAV,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAA7D,MAAAc,EAAA,GAAAH,EAA6D,CAAAI,IAAA,CAAc;EAAA,IAAAC,EAAA;EAAA,IAAAhB,CAAA,QAAAK,SAAA,IAAAL,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAS,QAAA,IAAAT,CAAA,QAAAO,OAAA,IAAAP,CAAA,QAAAc,EAAA;IAAA,IAAAG,EAAA;IAAA,IAAAjB,CAAA,QAAAkB,MAAA,CAAAC,GAAA;MAc3EF,EAAA,GAAAA,CAAA,KAAMT,UAAA,CAAAY,KAAsB;MAAApB,CAAA,MAAAiB,EAAA;IAAA;MAAAA,EAAA,GAAAjB,CAAA;IAAA;IAhB3CgB,EAAA,GAAAK,KAAA,CAAC;MAAAC,SAAA,EAAAzB,SAAA;MAAA0B,QAAA,GACCF,KAAA,CAAC;QAAAC,SAAA,EACYR,EAA2E;QAAAS,QAAA,GAEtFC,IAAA,CAAA7B,OAAA;UAAA2B,SAAA,EAAoB,GAAAzB,SAAA;QAAoB,C,GACxC2B,IAAA,CAAC;UAAA,cACanB,SAAA;UAAAiB,SAAA,EACD,GAAAzB,SAAA,SAAqB;UAAAI,EAAA;UAAAwB,QAAA;UAAAC,IAAA,EAG1BnB,OAAA,GAAU,SAAS;UAAAH,KAAA,EAClBK;QAAA,C,GAETe,IAAA,CAAC;UAAA,cACajB,OAAA,GAAU,iBAAiB;UAAAe,SAAA,EAC5B,GAAAzB,SAAA,UAAsB;UAAA8B,OAAA,EACxBV,EAA4B;UAAAS,IAAA,EAChC;UAAAH,QAAA,EAELC,IAAA,CAAA9B,OAAA;YAAAkC,MAAA,EAAiBrB,OAAA;YAAAsB,IAAA;UAAA,C;;UAGrBL,IAAA,CAAA5B,eAAA;QAAAQ,KAAA,EAAwBK;MAAA,C;;;;;;;;;;;SAtB1BO,E;CAyBJ;AAnCuD,SAAAI,MAAAU,IAAA;EAAA,QA0BRA,IAAA;AAAA","ignoreList":[]}

package/dist/elements/AddNewRelation/index.css

@@ -16,7 +16,7 @@
     align-items: center;
     justify-content: center;
     padding-inline: var(--spacer-1);
-    height: var(--field-min-height);
+    height: var(--field-min-height-large);
     margin: 0;
     background: var(--color-bg-secondary);
     border: none;

package/dist/elements/AddNewRelation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AddNewRelation/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqD,MAAM,OAAO,CAAA;AAGzE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAUvC,OAAO,aAAa,CAAA;AAKpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkM1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AddNewRelation/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqD,MAAM,OAAO,CAAA;AAGzE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAUvC,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqL1C,CAAA"}

package/dist/elements/AddNewRelation/index.js

@@ -14,10 +14,9 @@ import { useDocumentDrawer } from '../DocumentDrawer/index.js';
 import { Popup } from '../Popup/index.js';
 import * as PopupList from '../Popup/PopupButtonList/index.js';
 import './index.css';
-import { Tooltip } from '../Tooltip/index.js';
 const baseClass = 'relationship-add-new';
 export const AddNewRelation = t0 => {
-  const $ = _c(45);
+  const $ = _c(44);
   const {
     Button: ButtonFromProps,
     hasMany,
@@ -44,12 +43,11 @@ export const AddNewRelation = t0 => {
     t1 = $[2];
   }
   const [collectionConfig, setCollectionConfig] = useState(t1);
-  const [, setPopupOpen] = useState(false);
+  const [popupOpen, setPopupOpen] = useState(false);
   const {
     i18n,
     t
   } = useTranslation();
-  const [showTooltip, setShowTooltip] = useState(false);
   const t2 = collectionConfig?.slug;
   let t3;
   if ($[3] !== t2) {
@@ -106,19 +104,9 @@ export const AddNewRelation = t0 => {
   }
   const onSave = t5;
   let t6;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = state => {
-      setPopupOpen(state);
-    };
-    $[10] = t6;
-  } else {
-    t6 = $[10];
-  }
-  const onPopupToggle = t6;
   let t7;
-  let t8;
-  if ($[11] !== permissions || $[12] !== relatedCollections) {
-    t7 = () => {
+  if ($[10] !== permissions || $[11] !== relatedCollections) {
+    t6 = () => {
       if (permissions) {
         if (relatedCollections.length === 1) {
           setShow(permissions.collections[relatedCollections[0]?.slug]?.create);
@@ -127,102 +115,95 @@ export const AddNewRelation = t0 => {
         }
       }
     };
-    t8 = [permissions, relatedCollections];
-    $[11] = permissions;
-    $[12] = relatedCollections;
+    t7 = [permissions, relatedCollections];
+    $[10] = permissions;
+    $[11] = relatedCollections;
+    $[12] = t6;
     $[13] = t7;
-    $[14] = t8;
   } else {
+    t6 = $[12];
     t7 = $[13];
-    t8 = $[14];
   }
-  useEffect(t7, t8);
-  let t10;
+  useEffect(t6, t7);
+  let t8;
   let t9;
-  if ($[15] !== relatedCollections || $[16] !== relatedToMany || $[17] !== selectedCollection) {
-    t9 = () => {
+  if ($[14] !== relatedCollections || $[15] !== relatedToMany || $[16] !== selectedCollection) {
+    t8 = () => {
       if (relatedToMany && selectedCollection) {
         setCollectionConfig(relatedCollections.find(collection_0 => collection_0?.slug === selectedCollection));
       }
     };
-    t10 = [selectedCollection, relatedToMany, relatedCollections];
-    $[15] = relatedCollections;
-    $[16] = relatedToMany;
-    $[17] = selectedCollection;
-    $[18] = t10;
-    $[19] = t9;
+    t9 = [selectedCollection, relatedToMany, relatedCollections];
+    $[14] = relatedCollections;
+    $[15] = relatedToMany;
+    $[16] = selectedCollection;
+    $[17] = t8;
+    $[18] = t9;
   } else {
-    t10 = $[18];
-    t9 = $[19];
+    t8 = $[17];
+    t9 = $[18];
   }
-  useEffect(t9, t10);
+  useEffect(t8, t9);
+  let t10;
   let t11;
-  let t12;
-  if ($[20] !== collectionConfig || $[21] !== relatedToMany || $[22] !== toggleDrawer) {
-    t11 = () => {
+  if ($[19] !== collectionConfig || $[20] !== relatedToMany || $[21] !== toggleDrawer) {
+    t10 = () => {
       if (relatedToMany && collectionConfig) {
         toggleDrawer();
         setSelectedCollection(undefined);
       }
     };
-    t12 = [toggleDrawer, relatedToMany, collectionConfig];
-    $[20] = collectionConfig;
-    $[21] = relatedToMany;
-    $[22] = toggleDrawer;
+    t11 = [toggleDrawer, relatedToMany, collectionConfig];
+    $[19] = collectionConfig;
+    $[20] = relatedToMany;
+    $[21] = toggleDrawer;
+    $[22] = t10;
     $[23] = t11;
-    $[24] = t12;
   } else {
+    t10 = $[22];
     t11 = $[23];
-    t12 = $[24];
   }
-  useEffect(t11, t12);
+  useEffect(t10, t11);
+  let t12;
   let t13;
-  let t14;
-  if ($[25] !== isDrawerOpen || $[26] !== relatedToMany) {
-    t13 = () => {
+  if ($[24] !== isDrawerOpen || $[25] !== relatedToMany) {
+    t12 = () => {
       if (relatedToMany && !isDrawerOpen) {
         setCollectionConfig(undefined);
       }
     };
-    t14 = [isDrawerOpen, relatedToMany];
-    $[25] = isDrawerOpen;
-    $[26] = relatedToMany;
+    t13 = [isDrawerOpen, relatedToMany];
+    $[24] = isDrawerOpen;
+    $[25] = relatedToMany;
+    $[26] = t12;
     $[27] = t13;
-    $[28] = t14;
   } else {
+    t12 = $[26];
     t13 = $[27];
-    t14 = $[28];
   }
-  useEffect(t13, t14);
-  const t15 = relatedCollections[0]?.labels.singular;
+  useEffect(t12, t13);
+  const t14 = relatedCollections[0]?.labels.singular;
+  let t15;
   let t16;
-  let t17;
-  if ($[29] !== ButtonFromProps || $[30] !== DocumentDrawer || $[31] !== DocumentDrawerToggler || $[32] !== collectionConfig || $[33] !== i18n || $[34] !== onSave || $[35] !== path || $[36] !== permissions || $[37] !== relatedCollections || $[38] !== show || $[39] !== showTooltip || $[40] !== t || $[41] !== t15 || $[42] !== unstyled) {
-    t17 = Symbol.for("react.early_return_sentinel");
+  if ($[28] !== ButtonFromProps || $[29] !== DocumentDrawer || $[30] !== DocumentDrawerToggler || $[31] !== collectionConfig || $[32] !== i18n || $[33] !== onSave || $[34] !== path || $[35] !== permissions || $[36] !== popupOpen || $[37] !== relatedCollections || $[38] !== show || $[39] !== t || $[40] !== t14 || $[41] !== unstyled) {
+    t16 = Symbol.for("react.early_return_sentinel");
     bb0: {
       const label = t("fields:addNewLabel", {
-        label: getTranslation(t15, i18n)
+        label: getTranslation(t14, i18n)
       });
       if (!show) {
-        t17 = null;
+        t16 = null;
         break bb0;
       }
-      t16 = _jsxs("div", {
+      t15 = _jsxs("div", {
         className: baseClass,
         id: `${path}-add-new`,
         children: [relatedCollections.length === 1 && _jsxs(Fragment, {
           children: [_jsx(DocumentDrawerToggler, {
             buttonStyle: "pill",
             className: [`${baseClass}__add-button`, unstyled && `${baseClass}__add-button--unstyled`].filter(Boolean).join(" "),
-            onMouseEnter: () => setShowTooltip(true),
-            onMouseLeave: () => setShowTooltip(false),
-            children: ButtonFromProps ? ButtonFromProps : _jsxs(Fragment, {
-              children: [_jsx(Tooltip, {
-                className: `${baseClass}__tooltip`,
-                show: showTooltip,
-                children: label
-              }), _jsx(PlusIcon, {})]
-            })
+            tooltip: ButtonFromProps ? undefined : label,
+            children: ButtonFromProps ? ButtonFromProps : _jsx(PlusIcon, {})
           }), _jsx(DocumentDrawer, {
             onSave
           })]
@@ -230,11 +211,12 @@ export const AddNewRelation = t0 => {
           children: [_jsx(Popup, {
             buttonType: "custom",
             horizontalAlign: "right",
-            onToggleOpen: onPopupToggle,
-            render: t18 => {
+            onToggleClose: () => setPopupOpen(false),
+            onToggleOpen: () => setPopupOpen(true),
+            render: t17 => {
               const {
                 close: closePopup
-              } = t18;
+              } = t17;
               return _jsx(PopupList.ButtonGroup, {
                 children: relatedCollections.map(relatedCollection => {
                   if (permissions.collections[relatedCollection?.slug]?.create) {
@@ -251,49 +233,49 @@ export const AddNewRelation = t0 => {
                 })
               });
             },
-            renderButton: _temp
+            renderButton: t18 => {
+              const {
+                active,
+                ...buttonProps
+              } = t18;
+              return _jsx(Button, {
+                className: `${baseClass}__add-button`,
+                ...buttonProps,
+                buttonStyle: "pill",
+                selected: active,
+                tooltip: popupOpen ? "" : t("fields:addNew"),
+                children: _jsx(PlusIcon, {})
+              });
+            }
           }), collectionConfig && permissions.collections[collectionConfig?.slug]?.create && _jsx(DocumentDrawer, {
             onSave
           })]
         })]
       });
     }
-    $[29] = ButtonFromProps;
-    $[30] = DocumentDrawer;
-    $[31] = DocumentDrawerToggler;
-    $[32] = collectionConfig;
-    $[33] = i18n;
-    $[34] = onSave;
-    $[35] = path;
-    $[36] = permissions;
+    $[28] = ButtonFromProps;
+    $[29] = DocumentDrawer;
+    $[30] = DocumentDrawerToggler;
+    $[31] = collectionConfig;
+    $[32] = i18n;
+    $[33] = onSave;
+    $[34] = path;
+    $[35] = permissions;
+    $[36] = popupOpen;
     $[37] = relatedCollections;
     $[38] = show;
-    $[39] = showTooltip;
-    $[40] = t;
-    $[41] = t15;
-    $[42] = unstyled;
+    $[39] = t;
+    $[40] = t14;
+    $[41] = unstyled;
+    $[42] = t15;
     $[43] = t16;
-    $[44] = t17;
   } else {
+    t15 = $[42];
     t16 = $[43];
-    t17 = $[44];
   }
-  if (t17 !== Symbol.for("react.early_return_sentinel")) {
-    return t17;
+  if (t16 !== Symbol.for("react.early_return_sentinel")) {
+    return t16;
   }
-  return t16;
+  return t15;
 };
-function _temp(t0) {
-  const {
-    active,
-    ...buttonProps
-  } = t0;
-  return _jsx(Button, {
-    className: `${baseClass}__add-button`,
-    ...buttonProps,
-    buttonStyle: "pill",
-    selected: active,
-    children: _jsx(PlusIcon, {})
-  });
-}
 //# sourceMappingURL=index.js.map