@payloadcms/ui 4.0.0-canary.0 → 4.0.0-canary.1

package/dist/elements/DocumentTakeOver/index.js

@@ -1,16 +1,16 @@
 'use client';
 
 import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { useRouteCache } from '../../providers/RouteCache/index.js';
 import { useRouteTransition } from '../../providers/RouteTransition/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { Button } from '../Button/index.js';
-import { AlertModal, useModal } from '../Modal/index.js';
+import { DialogBody, DialogCancel, DialogConfirm, DialogFooter, DialogHeader, DialogModal } from '../Dialog/index.js';
+import { useModal } from '../Modal/index.js';
 const modalSlug = 'document-take-over';
 export const DocumentTakeOver = t0 => {
-  const $ = _c(18);
+  const $ = _c(17);
   const {
     handleBackToDashboard,
     isActive,
@@ -51,62 +51,56 @@ export const DocumentTakeOver = t0 => {
   }
   useEffect(t1, t2);
   let t3;
-  if ($[5] !== handleBackToDashboard || $[6] !== startRouteTransition) {
-    t3 = () => {
-      startRouteTransition(() => handleBackToDashboard());
-    };
-    $[5] = handleBackToDashboard;
-    $[6] = startRouteTransition;
-    $[7] = t3;
-  } else {
-    t3 = $[7];
-  }
-  let t4;
-  if ($[8] !== clearRouteCache || $[9] !== closeModal || $[10] !== onReadOnly || $[11] !== t || $[12] !== t3) {
-    let t5;
-    if ($[14] !== clearRouteCache || $[15] !== closeModal || $[16] !== onReadOnly) {
-      t5 = () => {
+  if ($[5] !== clearRouteCache || $[6] !== handleBackToDashboard || $[7] !== onReadOnly || $[8] !== startRouteTransition || $[9] !== t) {
+    let t4;
+    if ($[11] !== clearRouteCache || $[12] !== onReadOnly) {
+      t4 = () => {
         onReadOnly();
-        closeModal(modalSlug);
         clearRouteCache();
       };
-      $[14] = clearRouteCache;
-      $[15] = closeModal;
-      $[16] = onReadOnly;
-      $[17] = t5;
+      $[11] = clearRouteCache;
+      $[12] = onReadOnly;
+      $[13] = t4;
     } else {
-      t5 = $[17];
+      t4 = $[13];
     }
-    t4 = _jsx(AlertModal, {
-      actions: _jsxs(_Fragment, {
-        children: [_jsx(Button, {
-          buttonStyle: "primary",
-          id: `${modalSlug}-back-to-dashboard`,
-          onClick: t3,
-          children: t("general:backToDashboard")
-        }), _jsx(Button, {
-          buttonStyle: "secondary",
-          id: `${modalSlug}-view-read-only`,
-          onClick: t5,
-          children: t("general:viewReadOnly")
-        })]
-      }),
-      compact: true,
+    let t5;
+    if ($[14] !== handleBackToDashboard || $[15] !== startRouteTransition) {
+      t5 = () => startRouteTransition(() => handleBackToDashboard());
+      $[14] = handleBackToDashboard;
+      $[15] = startRouteTransition;
+      $[16] = t5;
+    } else {
+      t5 = $[16];
+    }
+    t3 = _jsxs(DialogModal, {
+      closeOnEsc: false,
       slug: modalSlug,
-      title: t("general:editingTakenOver"),
-      children: _jsx("p", {
-        children: t("general:anotherUserTakenOver")
-      })
+      children: [_jsx(DialogHeader, {
+        title: t("general:editingTakenOver")
+      }), _jsx(DialogBody, {
+        children: _jsx("p", {
+          children: t("general:anotherUserTakenOver")
+        })
+      }), _jsxs(DialogFooter, {
+        children: [_jsx(DialogCancel, {
+          label: t("general:viewReadOnly"),
+          onClick: t4
+        }), _jsx(DialogConfirm, {
+          label: t("general:backToDashboard"),
+          onClick: t5
+        })]
+      })]
     });
-    $[8] = clearRouteCache;
-    $[9] = closeModal;
-    $[10] = onReadOnly;
-    $[11] = t;
-    $[12] = t3;
-    $[13] = t4;
+    $[5] = clearRouteCache;
+    $[6] = handleBackToDashboard;
+    $[7] = onReadOnly;
+    $[8] = startRouteTransition;
+    $[9] = t;
+    $[10] = t3;
   } else {
-    t4 = $[13];
+    t3 = $[10];
   }
-  return t4;
+  return t3;
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useRouteCache","useRouteTransition","useTranslation","Button","AlertModal","useModal","modalSlug","DocumentTakeOver","t0","$","handleBackToDashboard","isActive","onReadOnly","closeModal","openModal","t","startRouteTransition","clearRouteCache","t1","t2","t3","t4","t5","_jsx","actions","_jsxs","_Fragment","children","buttonStyle","id","onClick"],"sources":["../../../src/elements/DocumentTakeOver/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useRouteCache } from '../../providers/RouteCache/index.js'\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { AlertModal, useModal } from '../Modal/index.js'\n\nconst modalSlug = 'document-take-over'\n\nexport const DocumentTakeOver: React.FC<{\n  handleBackToDashboard: () => void\n  isActive: boolean\n  onReadOnly: () => void\n}> = ({ handleBackToDashboard, isActive, onReadOnly }) => {\n  const { closeModal, openModal } = useModal()\n  const { t } = useTranslation()\n  const { startRouteTransition } = useRouteTransition()\n  const { clearRouteCache } = useRouteCache()\n\n  useEffect(() => {\n    if (isActive) {\n      openModal(modalSlug)\n    } else {\n      closeModal(modalSlug)\n    }\n  }, [isActive, openModal, closeModal])\n\n  return (\n    <AlertModal\n      actions={\n        <>\n          <Button\n            buttonStyle=\"primary\"\n            id={`${modalSlug}-back-to-dashboard`}\n            onClick={() => {\n              startRouteTransition(() => handleBackToDashboard())\n            }}\n          >\n            {t('general:backToDashboard')}\n          </Button>\n          <Button\n            buttonStyle=\"secondary\"\n            id={`${modalSlug}-view-read-only`}\n            onClick={() => {\n              onReadOnly()\n              closeModal(modalSlug)\n              clearRouteCache()\n            }}\n          >\n            {t('general:viewReadOnly')}\n          </Button>\n        </>\n      }\n      compact\n      slug={modalSlug}\n      title={t('general:editingTakenOver')}\n    >\n      <p>{t('general:anotherUserTakenOver')}</p>\n    </AlertModal>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,SAAS,QAAQ;AAEjC,SAASC,aAAa,QAAQ;AAC9B,SAASC,kBAAkB,QAAQ;AACnC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,UAAU,EAAEC,QAAQ,QAAQ;AAErC,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,gBAAA,GAIRC,EAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EAAC;IAAAa,qBAAA;IAAAC,QAAA;IAAAC;EAAA,IAAAJ,EAA+C;EACnD;IAAAK,UAAA;IAAAC;EAAA,IAAkCT,QAAA;EAClC;IAAAU;EAAA,IAAcb,cAAA;EACd;IAAAc;EAAA,IAAiCf,kBAAA;EACjC;IAAAgB;EAAA,IAA4BjB,aAAA;EAAA,IAAAkB,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAV,CAAA,QAAAI,UAAA,IAAAJ,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAK,SAAA;IAElBI,EAAA,GAAAA,CAAA;MAAA,IACJP,QAAA;QACFG,SAAA,CAAAR,SAAU;MAAA;QAEVO,UAAA,CAAAP,SAAW;MAAA;IAAA;IAEZa,EAAA,IAACR,QAAA,EAAUG,SAAA,EAAWD,UAAA;IAAWJ,CAAA,MAAAI,UAAA;IAAAJ,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAK,SAAA;IAAAL,CAAA,MAAAS,EAAA;IAAAT,CAAA,MAAAU,EAAA;EAAA;IAAAD,EAAA,GAAAT,CAAA;IAAAU,EAAA,GAAAV,CAAA;EAAA;EANpCV,SAAA,CAAUmB,EAMV,EAAGC,EAAiC;EAAA,IAAAC,EAAA;EAAA,IAAAX,CAAA,QAAAC,qBAAA,IAAAD,CAAA,QAAAO,oBAAA;IASjBI,EAAA,GAAAA,CAAA;MACPJ,oBAAA,OAA2BN,qBAAA;IAAA;IAC7BD,CAAA,MAAAC,qBAAA;IAAAD,CAAA,MAAAO,oBAAA;IAAAP,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAAA,IAAAY,EAAA;EAAA,IAAAZ,CAAA,QAAAQ,eAAA,IAAAR,CAAA,QAAAI,UAAA,IAAAJ,CAAA,SAAAG,UAAA,IAAAH,CAAA,SAAAM,CAAA,IAAAN,CAAA,SAAAW,EAAA;IAAA,IAAAE,EAAA;IAAA,IAAAb,CAAA,SAAAQ,eAAA,IAAAR,CAAA,SAAAI,UAAA,IAAAJ,CAAA,SAAAG,UAAA;MAOSU,EAAA,GAAAA,CAAA;QACPV,UAAA;QACAC,UAAA,CAAAP,SAAW;QACXW,eAAA;MAAA;MACFR,CAAA,OAAAQ,eAAA;MAAAR,CAAA,OAAAI,UAAA;MAAAJ,CAAA,OAAAG,UAAA;MAAAH,CAAA,OAAAa,EAAA;IAAA;MAAAA,EAAA,GAAAb,CAAA;IAAA;IAnBRY,EAAA,GAAAE,IAAA,CAAAnB,UAAA;MAAAoB,OAAA,EAEIC,KAAA,CAAAC,SAAA;QAAAC,QAAA,GACEJ,IAAA,CAAApB,MAAA;UAAAyB,WAAA,EACc;UAAAC,EAAA,EACR,GAAAvB,SAAA,oBAAgC;UAAAwB,OAAA,EAC3BV,EAET;UAAAO,QAAA,EAECZ,CAAA,CAAE;QAAA,C,GAELQ,IAAA,CAAApB,MAAA;UAAAyB,WAAA,EACc;UAAAC,EAAA,EACR,GAAAvB,SAAA,iBAA6B;UAAAwB,OAAA,EACxBR,EAIT;UAAAK,QAAA,EAECZ,CAAA,CAAE;QAAA,C;;;;aAMFA,CAAA,CAAE;MAAAY,QAAA,EAETJ,IAAA,CAAC;QAAAI,QAAA,EAAGZ,CAAA,CAAE;MAAA,C;;;;;;;;;;;SA7BRM,E;CAgCJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useRouteCache","useRouteTransition","useTranslation","DialogBody","DialogCancel","DialogConfirm","DialogFooter","DialogHeader","DialogModal","useModal","modalSlug","DocumentTakeOver","t0","$","handleBackToDashboard","isActive","onReadOnly","closeModal","openModal","t","startRouteTransition","clearRouteCache","t1","t2","t3","t4","t5","_jsxs","closeOnEsc","slug","children","_jsx","title","label","onClick"],"sources":["../../../src/elements/DocumentTakeOver/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useRouteCache } from '../../providers/RouteCache/index.js'\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport {\n  DialogBody,\n  DialogCancel,\n  DialogConfirm,\n  DialogFooter,\n  DialogHeader,\n  DialogModal,\n} from '../Dialog/index.js'\nimport { useModal } from '../Modal/index.js'\n\nconst modalSlug = 'document-take-over'\n\nexport const DocumentTakeOver: React.FC<{\n  handleBackToDashboard: () => void\n  isActive: boolean\n  onReadOnly: () => void\n}> = ({ handleBackToDashboard, isActive, onReadOnly }) => {\n  const { closeModal, openModal } = useModal()\n  const { t } = useTranslation()\n  const { startRouteTransition } = useRouteTransition()\n  const { clearRouteCache } = useRouteCache()\n\n  useEffect(() => {\n    if (isActive) {\n      openModal(modalSlug)\n    } else {\n      closeModal(modalSlug)\n    }\n  }, [isActive, openModal, closeModal])\n\n  return (\n    <DialogModal closeOnEsc={false} slug={modalSlug}>\n      <DialogHeader title={t('general:editingTakenOver')} />\n      <DialogBody>\n        <p>{t('general:anotherUserTakenOver')}</p>\n      </DialogBody>\n      <DialogFooter>\n        <DialogCancel\n          label={t('general:viewReadOnly')}\n          onClick={() => {\n            onReadOnly()\n            clearRouteCache()\n          }}\n        />\n        <DialogConfirm\n          label={t('general:backToDashboard')}\n          onClick={() => startRouteTransition(() => handleBackToDashboard())}\n        />\n      </DialogFooter>\n    </DialogModal>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,SAAS,QAAQ;AAEjC,SAASC,aAAa,QAAQ;AAC9B,SAASC,kBAAkB,QAAQ;AACnC,SAASC,cAAc,QAAQ;AAC/B,SACEC,UAAU,EACVC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,YAAY,EACZC,WAAW,QACN;AACP,SAASC,QAAQ,QAAQ;AAEzB,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,gBAAA,GAIRC,EAAA;EAAA,MAAAC,CAAA,GAAAhB,EAAA;EAAC;IAAAiB,qBAAA;IAAAC,QAAA;IAAAC;EAAA,IAAAJ,EAA+C;EACnD;IAAAK,UAAA;IAAAC;EAAA,IAAkCT,QAAA;EAClC;IAAAU;EAAA,IAAcjB,cAAA;EACd;IAAAkB;EAAA,IAAiCnB,kBAAA;EACjC;IAAAoB;EAAA,IAA4BrB,aAAA;EAAA,IAAAsB,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAV,CAAA,QAAAI,UAAA,IAAAJ,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAK,SAAA;IAElBI,EAAA,GAAAA,CAAA;MAAA,IACJP,QAAA;QACFG,SAAA,CAAAR,SAAU;MAAA;QAEVO,UAAA,CAAAP,SAAW;MAAA;IAAA;IAEZa,EAAA,IAACR,QAAA,EAAUG,SAAA,EAAWD,UAAA;IAAWJ,CAAA,MAAAI,UAAA;IAAAJ,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAK,SAAA;IAAAL,CAAA,MAAAS,EAAA;IAAAT,CAAA,MAAAU,EAAA;EAAA;IAAAD,EAAA,GAAAT,CAAA;IAAAU,EAAA,GAAAV,CAAA;EAAA;EANpCd,SAAA,CAAUuB,EAMV,EAAGC,EAAiC;EAAA,IAAAC,EAAA;EAAA,IAAAX,CAAA,QAAAQ,eAAA,IAAAR,CAAA,QAAAC,qBAAA,IAAAD,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAO,oBAAA,IAAAP,CAAA,QAAAM,CAAA;IAAA,IAAAM,EAAA;IAAA,IAAAZ,CAAA,SAAAQ,eAAA,IAAAR,CAAA,SAAAG,UAAA;MAWnBS,EAAA,GAAAA,CAAA;QACPT,UAAA;QACAK,eAAA;MAAA;MACFR,CAAA,OAAAQ,eAAA;MAAAR,CAAA,OAAAG,UAAA;MAAAH,CAAA,OAAAY,EAAA;IAAA;MAAAA,EAAA,GAAAZ,CAAA;IAAA;IAAA,IAAAa,EAAA;IAAA,IAAAb,CAAA,SAAAC,qBAAA,IAAAD,CAAA,SAAAO,oBAAA;MAISM,EAAA,GAAAA,CAAA,KAAMN,oBAAA,OAA2BN,qBAAA;MAAAD,CAAA,OAAAC,qBAAA;MAAAD,CAAA,OAAAO,oBAAA;MAAAP,CAAA,OAAAa,EAAA;IAAA;MAAAA,EAAA,GAAAb,CAAA;IAAA;IAfhDW,EAAA,GAAAG,KAAA,CAAAnB,WAAA;MAAAoB,UAAA;MAAAC,IAAA,EAAAnB,SAAA;MAAAoB,QAAA,GACEC,IAAA,CAAAxB,YAAA;QAAAyB,KAAA,EAAqBb,CAAA,CAAE;MAAA,C,GACvBY,IAAA,CAAA5B,UAAA;QAAA2B,QAAA,EACEC,IAAA,CAAC;UAAAD,QAAA,EAAGX,CAAA,CAAE;QAAA,C;UAERQ,KAAA,CAAArB,YAAA;QAAAwB,QAAA,GACEC,IAAA,CAAA3B,YAAA;UAAA6B,KAAA,EACSd,CAAA,CAAE;UAAAe,OAAA,EACAT;QAGT,C,GAEFM,IAAA,CAAA1B,aAAA;UAAA4B,KAAA,EACSd,CAAA,CAAE;UAAAe,OAAA,EACAR;QAAiC,C;;;;;;;;;;;;SAfhDF,E;CAoBJ","ignoreList":[]}

package/dist/elements/Drawer/index.css

@@ -6,8 +6,18 @@
     position: fixed;
     inset: 0;
 
-    --gutter-h: var(--spacer-2-5);
-    --gutter-v: var(--spacer-2-5);
+    --gutter-h: var(--spacer-4);
+    --gutter-v: var(--spacer-4);
+  }
+
+  @media (max-width: 768px) {
+    .drawer {
+      --gutter-h: var(--spacer-3);
+    }
+  }
+
+  .drawer.drawer--is-open {
+    visibility: visible;
   }
 
   .drawer__blur-bg {
@@ -15,7 +25,6 @@
     z-index: 1;
     inset: 0;
     opacity: 0;
-    transition: opacity 200ms linear;
     background: var(--color-drawer-backdrop);
   }
 
@@ -23,47 +32,69 @@
     opacity: 0;
     position: relative;
     z-index: 2;
-    width: 600px;
-    overflow: hidden;
-    transition: all 200ms linear;
+    width: clamp(600px, 40vw, 1080px);
+    max-width: 100vw;
     background-color: var(--color-bg);
     box-shadow: var(--elevation-400-menu-panel);
+    container: drawer / inline-size;
+    /* Animate the leftward shift when a nested drawer stacks on top. */
+    transition: transform 100ms ease-out;
   }
 
   .drawer__content-children {
     position: relative;
     z-index: 1;
-    overflow: auto;
+    overflow-x: clip;
+    overflow-y: auto;
     height: 100%;
     display: flex;
     flex-direction: column;
   }
 
+  /*
+   * Content fades in on first render so the drawer body appears gracefully
+   * instead of snapping in. Quick + soft, never blocky.
+   */
+  .drawer__fade-in {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 auto;
+    animation: drawer-content-fade-in 200ms ease-out both;
+  }
+
+  @keyframes drawer-content-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .drawer__fade-in {
+      animation: none;
+    }
+  }
+
   .drawer--is-open .drawer__content,
   .drawer--is-open .drawer__blur-bg {
     opacity: 1;
   }
 
-  .drawer--is-open .drawer__close {
-    opacity: 0.1;
-    transition: opacity 200ms linear;
-    transition-delay: 100ms;
-  }
-
+  /* Offset each ancestor drawer 16px left per drawer stacked on top of it. */
   .drawer--is-open .drawer__content {
-    transform: translateX(0);
+    transform: translateX(calc(-1 * var(--drawer-layer-offset, 0px)));
   }
 
   .drawer__close {
     position: relative;
-    z-index: 2;
+    z-index: 1;
     flex-shrink: 0;
     cursor: pointer;
-    opacity: 0;
-    transition: none;
-    transition-delay: 0ms;
     flex-grow: 1;
-    background: var(--color-drawer-backdrop);
+    background: transparent;
     border: 0;
 
     &:active,
@@ -75,10 +106,10 @@
   .drawer__header {
     display: flex;
     align-items: center;
-    padding: var(--spacer-2-5);
+    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-2-5) var(--spacer-2);
     border-bottom: var(--stroke-width-small) solid var(--color-border);
     background: var(--color-bg);
-    gap: var(--spacer-2);
+    gap: var(--spacer-1);
   }
 
   .drawer__header__title {
@@ -89,11 +120,11 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     color: var(--color-text);
-    font-family: var(--text-body-large-strong-font-family);
-    font-size: var(--text-body-large-strong-font-size);
-    font-weight: var(--text-body-large-strong-font-weight);
-    line-height: var(--text-body-large-strong-line-height);
-    letter-spacing: var(--text-body-large-strong-letter-spacing);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    letter-spacing: var(--text-body-medium-strong-letter-spacing);
   }
 
   .drawer__header__close {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqE,MAAM,OAAO,CAAA;AAEzF,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAKrD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,WAAW,MAAM,CAAA;AAE9B,eAAO,MAAM,gBAAgB,GAAI,iBAAiB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,KAAG,MACzD,CAAA;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAElD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAwChD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAIlC,CAAA;AAkGD,eAAO,MAAM,kBAAkB,uBAAmB,CAAA;AAElD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAKvE,CAAA;AAED,eAAO,MAAM,cAAc,QAAO,MAAiC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqE,MAAM,OAAO,CAAA;AAEzF,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAKrD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,WAAW,MAAM,CAAA;AAO9B,eAAO,MAAM,gBAAgB,GAAI,iBAAiB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,KAAG,MACzD,CAAA;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAElD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAwChD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAIlC,CAAA;AAwGD,eAAO,MAAM,kBAAkB,uBAAmB,CAAA;AAElD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAKvE,CAAA;AAED,eAAO,MAAM,cAAc,QAAO,MAAiC,CAAA"}

package/dist/elements/Drawer/index.js

@@ -10,6 +10,10 @@ import { Button } from '../Button/index.js';
 import './index.css';
 const baseClass = 'drawer';
 export const drawerZBase = 100;
+// Slug prefixes for every real drawer variant (base, document, list). Used to
+// count stacked drawers without matching confirmation modals like
+// `leave-without-saving-...`.
+const drawerSlugPrefixes = ['drawer_', 'doc-drawer_', 'list-drawer_'];
 export const formatDrawerSlug = ({
   slug,
   depth
@@ -70,7 +74,7 @@ export const Drawer = props => /*#__PURE__*/_jsx(DrawerDepthProvider, {
   })
 });
 const DrawerInner = t0 => {
-  const $ = _c(23);
+  const $ = _c(21);
   const {
     slug,
     children,
@@ -89,6 +93,8 @@ const DrawerInner = t0 => {
   } = useModal();
   const drawerDepth = useDrawerDepth();
   const isOpen = !!modalState[slug]?.isOpen;
+  const openDrawerCount = Object.entries(modalState).filter(_temp).length;
+  const layersFromTop = Math.max(openDrawerCount - drawerDepth, 0);
   const [animateIn, setAnimateIn] = useState(isOpen);
   let t1;
   let t2;
@@ -107,46 +113,44 @@ const DrawerInner = t0 => {
   useLayoutEffect(t1, t2);
   if (isOpen) {
     const t3 = animateIn && `${baseClass}--is-open`;
-    const t4 = drawerDepth > 1 && `${baseClass}--nested`;
-    let t5;
-    if ($[3] !== className || $[4] !== t3 || $[5] !== t4) {
-      t5 = [className, baseClass, t3, t4].filter(Boolean);
+    let t4;
+    if ($[3] !== className || $[4] !== t3) {
+      t4 = [className, baseClass, t3].filter(Boolean);
       $[3] = className;
       $[4] = t3;
       $[5] = t4;
-      $[6] = t5;
     } else {
-      t5 = $[6];
+      t4 = $[5];
     }
-    const t6 = t5.join(" ");
-    const t7 = drawerDepth > 1 ? `calc(${drawerDepth - 1} * var(--spacer-3))` : undefined;
-    const t8 = drawerZBase + drawerDepth;
-    let t9;
-    if ($[7] !== Header || $[8] !== children || $[9] !== closeModal || $[10] !== drawerDepth || $[11] !== headerActions || $[12] !== hoverTitle || $[13] !== slug || $[14] !== t || $[15] !== t6 || $[16] !== t7 || $[17] !== t8 || $[18] !== title) {
-      let t10;
-      if ($[20] !== closeModal || $[21] !== slug) {
-        t10 = () => closeModal(slug);
-        $[20] = closeModal;
-        $[21] = slug;
-        $[22] = t10;
+    const t5 = t4.join(" ");
+    const t6 = `calc(${layersFromTop} * var(--spacer-3))`;
+    const t7 = drawerZBase + drawerDepth;
+    let t8;
+    if ($[6] !== Header || $[7] !== children || $[8] !== closeModal || $[9] !== headerActions || $[10] !== hoverTitle || $[11] !== slug || $[12] !== t || $[13] !== t5 || $[14] !== t6 || $[15] !== t7 || $[16] !== title) {
+      let t9;
+      if ($[18] !== closeModal || $[19] !== slug) {
+        t9 = () => closeModal(slug);
+        $[18] = closeModal;
+        $[19] = slug;
+        $[20] = t9;
       } else {
-        t10 = $[22];
+        t9 = $[20];
       }
-      t9 = _jsxs(Modal, {
-        className: t6,
+      t8 = _jsxs(Modal, {
+        className: t5,
         closeOnBlur: false,
         slug,
         style: {
-          paddingRight: t7,
-          zIndex: t8
+          "--drawer-layer-offset": t6,
+          zIndex: t7
         },
-        children: [drawerDepth === 1 && _jsx("div", {
+        children: [_jsx("div", {
           className: `${baseClass}__blur-bg`
         }), _jsx("button", {
           "aria-label": t("general:close"),
           className: `${baseClass}__close`,
           id: `close-drawer__${slug}`,
-          onClick: t10,
+          onClick: t9,
           type: "button"
         }), _jsxs("div", {
           className: `${baseClass}__content`,
@@ -171,29 +175,28 @@ const DrawerInner = t0 => {
                 children: title
               }), headerActions && headerActions.length > 0 && _jsx("div", {
                 className: `${baseClass}__header__actions`,
-                children: headerActions.map(_temp)
+                children: headerActions.map(_temp2)
               })]
             }), children]
           })]
         })]
       });
-      $[7] = Header;
-      $[8] = children;
-      $[9] = closeModal;
-      $[10] = drawerDepth;
-      $[11] = headerActions;
-      $[12] = hoverTitle;
-      $[13] = slug;
-      $[14] = t;
-      $[15] = t6;
-      $[16] = t7;
+      $[6] = Header;
+      $[7] = children;
+      $[8] = closeModal;
+      $[9] = headerActions;
+      $[10] = hoverTitle;
+      $[11] = slug;
+      $[12] = t;
+      $[13] = t5;
+      $[14] = t6;
+      $[15] = t7;
+      $[16] = title;
       $[17] = t8;
-      $[18] = title;
-      $[19] = t9;
     } else {
-      t9 = $[19];
+      t8 = $[17];
     }
-    return t9;
+    return t8;
   }
   return null;
 };
@@ -220,7 +223,11 @@ export const DrawerDepthProvider = t0 => {
   return t1;
 };
 export const useDrawerDepth = () => use(DrawerDepthContext);
-function _temp(action, i) {
+function _temp(t0) {
+  const [modalSlug, state] = t0;
+  return state?.isOpen && drawerSlugPrefixes.some(p => modalSlug.startsWith(p));
+}
+function _temp2(action, i) {
   return _jsx(Button, {
     buttonStyle: action.style || "secondary",
     disabled: action.disabled,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","Modal","useModal","React","createContext","use","useCallback","useLayoutEffect","useState","ChevronIcon","useTranslation","Button","baseClass","drawerZBase","formatDrawerSlug","slug","depth","useDrawerSlug","DrawerToggler","t0","$","buttonStyle","children","className","disabled","onClick","rest","openModal","t1","e","handleClick","_jsx","type","Drawer","props","DrawerDepthProvider","DrawerInner","Header","headerActions","hoverTitle","title","t","closeModal","modalState","drawerDepth","useDrawerDepth","isOpen","animateIn","setAnimateIn","t2","t3","t4","t5","filter","Boolean","t6","join","t7","undefined","t8","t9","t10","_jsxs","closeOnBlur","style","paddingRight","zIndex","id","icon","direction","size","length","map","_temp","DrawerDepthContext","parentDepth","value","action","i","margin","label"],"sources":["../../../src/elements/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, { createContext, use, useCallback, useLayoutEffect, useState } from 'react'\n\nimport type { Props, TogglerProps } from './types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.css'\n\nconst baseClass = 'drawer'\n\nexport const drawerZBase = 100\n\nexport const formatDrawerSlug = ({ slug, depth }: { depth: number; slug: string }): string =>\n  `drawer_${depth}_${slug}`\n\nexport { useDrawerSlug } from './useDrawerSlug.js'\n\nexport const DrawerToggler: React.FC<TogglerProps> = ({\n  slug,\n  buttonStyle,\n  children,\n  className,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const { openModal } = useModal()\n\n  const handleClick = useCallback(\n    (e) => {\n      openModal(slug)\n      if (typeof onClick === 'function') {\n        onClick(e)\n      }\n    },\n    [openModal, slug, onClick],\n  )\n\n  if (buttonStyle) {\n    return (\n      <Button\n        buttonStyle={buttonStyle}\n        className={className}\n        disabled={disabled}\n        onClick={handleClick}\n        {...rest}\n      >\n        {children}\n      </Button>\n    )\n  }\n\n  return (\n    <button className={className} disabled={disabled} onClick={handleClick} type=\"button\" {...rest}>\n      {children}\n    </button>\n  )\n}\n\nexport const Drawer: React.FC<Props> = (props) => (\n  <DrawerDepthProvider>\n    <DrawerInner {...props} />\n  </DrawerDepthProvider>\n)\n\nconst DrawerInner: React.FC<Props> = ({\n  slug,\n  children,\n  className,\n  Header,\n  headerActions,\n  hoverTitle,\n  title,\n}) => {\n  const { t } = useTranslation()\n  const { closeModal, modalState } = useModal()\n  const drawerDepth = useDrawerDepth()\n\n  const isOpen = !!modalState[slug]?.isOpen\n\n  const [animateIn, setAnimateIn] = useState(isOpen)\n\n  useLayoutEffect(() => {\n    setAnimateIn(isOpen)\n  }, [isOpen])\n\n  if (isOpen) {\n    // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers\n    return (\n      <Modal\n        className={[\n          className,\n          baseClass,\n          animateIn && `${baseClass}--is-open`,\n          drawerDepth > 1 && `${baseClass}--nested`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        // Fixes https://github.com/payloadcms/payload/issues/13778\n        closeOnBlur={false}\n        slug={slug}\n        style={{\n          paddingRight: drawerDepth > 1 ? `calc(${drawerDepth - 1} * var(--spacer-3))` : undefined,\n          zIndex: drawerZBase + drawerDepth,\n        }}\n      >\n        {drawerDepth === 1 && <div className={`${baseClass}__blur-bg`} />}\n        <button\n          aria-label={t('general:close')}\n          className={`${baseClass}__close`}\n          id={`close-drawer__${slug}`}\n          onClick={() => closeModal(slug)}\n          type=\"button\"\n        />\n        <div className={`${baseClass}__content`}>\n          <div className={`${baseClass}__blur-bg-content`} />\n          <div className={`${baseClass}__content-children`}>\n            {Header}\n            {Header === undefined && (\n              <div className={`${baseClass}__header`}>\n                {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n                  i.e. changing to a `div` element will fix the animation issue but will break accessibility\n                */}\n                <Button\n                  aria-label={t('general:close')}\n                  buttonStyle=\"ghost\"\n                  className={`${baseClass}__header__close`}\n                  icon={<ChevronIcon direction=\"left\" size={24} />}\n                  onClick={() => closeModal(slug)}\n                />\n                <h2 className={`${baseClass}__header__title`} title={hoverTitle ? title : null}>\n                  {title}\n                </h2>\n                {headerActions && headerActions.length > 0 && (\n                  <div className={`${baseClass}__header__actions`}>\n                    {headerActions.map((action, i) => (\n                      <Button\n                        buttonStyle={action.style || 'secondary'}\n                        disabled={action.disabled}\n                        key={i}\n                        margin={false}\n                        onClick={action.onClick}\n                        size=\"medium\"\n                      >\n                        {action.label}\n                      </Button>\n                    ))}\n                  </div>\n                )}\n              </div>\n            )}\n            {children}\n          </div>\n        </div>\n      </Modal>\n    )\n  }\n\n  return null\n}\n\nexport const DrawerDepthContext = createContext(0)\n\nexport const DrawerDepthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const parentDepth = useDrawerDepth()\n  const depth = parentDepth + 1\n\n  return <DrawerDepthContext value={depth}>{children}</DrawerDepthContext>\n}\n\nexport const useDrawerDepth = (): number => use(DrawerDepthContext)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","Modal","useModal","React","createContext","use","useCallback","useLayoutEffect","useState","ChevronIcon","useTranslation","Button","baseClass","drawerZBase","drawerSlugPrefixes","formatDrawerSlug","slug","depth","useDrawerSlug","DrawerToggler","t0","$","buttonStyle","children","className","disabled","onClick","rest","openModal","t1","e","handleClick","_jsx","type","Drawer","props","DrawerDepthProvider","DrawerInner","Header","headerActions","hoverTitle","title","t","closeModal","modalState","drawerDepth","useDrawerDepth","isOpen","openDrawerCount","Object","entries","filter","_temp","length","layersFromTop","Math","max","animateIn","setAnimateIn","t2","t3","t4","Boolean","t5","join","t6","t7","t8","t9","_jsxs","closeOnBlur","style","zIndex","id","undefined","icon","direction","size","map","_temp2","DrawerDepthContext","parentDepth","value","modalSlug","state","some","p","startsWith","action","i","margin","label"],"sources":["../../../src/elements/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, { createContext, use, useCallback, useLayoutEffect, useState } from 'react'\n\nimport type { Props, TogglerProps } from './types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.css'\n\nconst baseClass = 'drawer'\n\nexport const drawerZBase = 100\n\n// Slug prefixes for every real drawer variant (base, document, list). Used to\n// count stacked drawers without matching confirmation modals like\n// `leave-without-saving-...`.\nconst drawerSlugPrefixes = ['drawer_', 'doc-drawer_', 'list-drawer_']\n\nexport const formatDrawerSlug = ({ slug, depth }: { depth: number; slug: string }): string =>\n  `drawer_${depth}_${slug}`\n\nexport { useDrawerSlug } from './useDrawerSlug.js'\n\nexport const DrawerToggler: React.FC<TogglerProps> = ({\n  slug,\n  buttonStyle,\n  children,\n  className,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const { openModal } = useModal()\n\n  const handleClick = useCallback(\n    (e) => {\n      openModal(slug)\n      if (typeof onClick === 'function') {\n        onClick(e)\n      }\n    },\n    [openModal, slug, onClick],\n  )\n\n  if (buttonStyle) {\n    return (\n      <Button\n        buttonStyle={buttonStyle}\n        className={className}\n        disabled={disabled}\n        onClick={handleClick}\n        {...rest}\n      >\n        {children}\n      </Button>\n    )\n  }\n\n  return (\n    <button className={className} disabled={disabled} onClick={handleClick} type=\"button\" {...rest}>\n      {children}\n    </button>\n  )\n}\n\nexport const Drawer: React.FC<Props> = (props) => (\n  <DrawerDepthProvider>\n    <DrawerInner {...props} />\n  </DrawerDepthProvider>\n)\n\nconst DrawerInner: React.FC<Props> = ({\n  slug,\n  children,\n  className,\n  Header,\n  headerActions,\n  hoverTitle,\n  title,\n}) => {\n  const { t } = useTranslation()\n  const { closeModal, modalState } = useModal()\n  const drawerDepth = useDrawerDepth()\n\n  const isOpen = !!modalState[slug]?.isOpen\n\n  // Nested drawers stack as real layers: each ancestor stays visible and is\n  // pushed 16px left per drawer on top of it. Every drawer paints its own\n  // backdrop scrim, so deeper layers stack more scrims and appear darker.\n  const openDrawerCount = Object.entries(modalState).filter(\n    ([modalSlug, state]) =>\n      state?.isOpen && drawerSlugPrefixes.some((p) => modalSlug.startsWith(p)),\n  ).length\n  const layersFromTop = Math.max(openDrawerCount - drawerDepth, 0)\n\n  const [animateIn, setAnimateIn] = useState(isOpen)\n\n  useLayoutEffect(() => {\n    setAnimateIn(isOpen)\n  }, [isOpen])\n\n  if (isOpen) {\n    // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers\n    return (\n      <Modal\n        className={[className, baseClass, animateIn && `${baseClass}--is-open`]\n          .filter(Boolean)\n          .join(' ')}\n        // Fixes https://github.com/payloadcms/payload/issues/13778\n        closeOnBlur={false}\n        slug={slug}\n        style={\n          {\n            '--drawer-layer-offset': `calc(${layersFromTop} * var(--spacer-3))`,\n            zIndex: drawerZBase + drawerDepth,\n          } as React.CSSProperties\n        }\n      >\n        <div className={`${baseClass}__blur-bg`} />\n        <button\n          aria-label={t('general:close')}\n          className={`${baseClass}__close`}\n          id={`close-drawer__${slug}`}\n          onClick={() => closeModal(slug)}\n          type=\"button\"\n        />\n        <div className={`${baseClass}__content`}>\n          <div className={`${baseClass}__blur-bg-content`} />\n          <div className={`${baseClass}__content-children`}>\n            {Header}\n            {Header === undefined && (\n              <div className={`${baseClass}__header`}>\n                {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n                  i.e. changing to a `div` element will fix the animation issue but will break accessibility\n                */}\n                <Button\n                  aria-label={t('general:close')}\n                  buttonStyle=\"ghost\"\n                  className={`${baseClass}__header__close`}\n                  icon={<ChevronIcon direction=\"left\" size={24} />}\n                  onClick={() => closeModal(slug)}\n                />\n                <h2 className={`${baseClass}__header__title`} title={hoverTitle ? title : null}>\n                  {title}\n                </h2>\n                {headerActions && headerActions.length > 0 && (\n                  <div className={`${baseClass}__header__actions`}>\n                    {headerActions.map((action, i) => (\n                      <Button\n                        buttonStyle={action.style || 'secondary'}\n                        disabled={action.disabled}\n                        key={i}\n                        margin={false}\n                        onClick={action.onClick}\n                        size=\"medium\"\n                      >\n                        {action.label}\n                      </Button>\n                    ))}\n                  </div>\n                )}\n              </div>\n            )}\n            {children}\n          </div>\n        </div>\n      </Modal>\n    )\n  }\n\n  return null\n}\n\nexport const DrawerDepthContext = createContext(0)\n\nexport const DrawerDepthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const parentDepth = useDrawerDepth()\n  const depth = parentDepth + 1\n\n  return <DrawerDepthContext value={depth}>{children}</DrawerDepthContext>\n}\n\nexport const useDrawerDepth = (): number => use(DrawerDepthContext)\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,KAAK,EAAEC,QAAQ,QAAQ;AAChC,OAAOC,KAAA,IAASC,aAAa,EAAEC,GAAG,EAAEC,WAAW,EAAEC,eAAe,EAAEC,QAAQ,QAAQ;AAIlF,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAAc;AAE3B;AACA;AACA;AACA,MAAMC,kBAAA,GAAqB,CAAC,WAAW,eAAe,eAAe;AAErE,OAAO,MAAMC,gBAAA,GAAmBA,CAAC;EAAEC,IAAI;EAAEC;AAAK,CAAmC,KAC/E,UAAUA,KAAA,IAASD,IAAA,EAAM;AAE3B,SAASE,aAAa,QAAQ;AAE9B,OAAO,MAAMC,aAAA,GAAwCC,EAAA;EAAA,MAAAC,CAAA,GAAArB,EAAA;EAAC;IAAAgB,IAAA;IAAAM,WAAA;IAAAC,QAAA;IAAAC,SAAA;IAAAC,QAAA;IAAAC,OAAA;IAAA,GAAAC;EAAA,IAAAP,EAQrD;EACC;IAAAQ;EAAA,IAAsB1B,QAAA;EAAA,IAAA2B,EAAA;EAAA,IAAAR,CAAA,QAAAK,OAAA,IAAAL,CAAA,QAAAO,SAAA,IAAAP,CAAA,QAAAL,IAAA;IAGpBa,EAAA,GAAAC,CAAA;MACEF,SAAA,CAAUZ,IAAA;MAAA,IACN,OAAOU,OAAA,KAAY;QACrBA,OAAA,CAAQI,CAAA;MAAA;IAAA;IAEZT,CAAA,MAAAK,OAAA;IAAAL,CAAA,MAAAO,SAAA;IAAAP,CAAA,MAAAL,IAAA;IAAAK,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EANF,MAAAU,WAAA,GAAoBF,EAOQ;EAAA,IAGxBP,WAAA;IAAA,OAEAU,IAAA,CAAArB,MAAA;MAAAW,WAAA;MAAAE,SAAA;MAAAC,QAAA;MAAAC,OAAA,EAIWK,WAAA;MAAA,GACLJ,IAAI;MAAAJ;IAAA,C;;SAQZS,IAAA,CAAC;IAAAR,SAAA;IAAAC,QAAA;IAAAC,OAAA,EAA0DK,WAAA;IAAAE,IAAA,EAAkB;IAAA,GAAaN,IAAI;IAAAJ;EAAA,C;CAIlG;AAEA,OAAO,MAAMW,MAAA,GAA2BC,KAAA,iBACtCH,IAAA,CAACI,mBAAA;YACC,aAAAJ,IAAA,CAACK,WAAA;IAAa,GAAGF;;;AAIrB,MAAME,WAAA,GAA+BjB,EAAA;EAAA,MAAAC,CAAA,GAAArB,EAAA;EAAC;IAAAgB,IAAA;IAAAO,QAAA;IAAAC,SAAA;IAAAc,MAAA;IAAAC,aAAA;IAAAC,UAAA;IAAAC;EAAA,IAAArB,EAQrC;EACC;IAAAsB;EAAA,IAAchC,cAAA;EACd;IAAAiC,UAAA;IAAAC;EAAA,IAAmC1C,QAAA;EACnC,MAAA2C,WAAA,GAAoBC,cAAA;EAEpB,MAAAC,MAAA,KAAiBH,UAAU,CAAC5B,IAAA,GAAA+B,MAAA;EAK5B,MAAAC,eAAA,GAAwBC,MAAA,CAAAC,OAAA,CAAeN,UAAA,EAAAO,MAAA,CAAAC,KAEkC,EAAAC,MAAA;EAEzE,MAAAC,aAAA,GAAsBC,IAAA,CAAAC,GAAA,CAASR,eAAA,GAAkBH,WAAA,GAAa;EAE9D,OAAAY,SAAA,EAAAC,YAAA,IAAkClD,QAAA,CAASuC,MAAA;EAAA,IAAAlB,EAAA;EAAA,IAAA8B,EAAA;EAAA,IAAAtC,CAAA,QAAA0B,MAAA;IAE3BlB,EAAA,GAAAA,CAAA;MACd6B,YAAA,CAAaX,MAAA;IAAA;IACZY,EAAA,IAACZ,MAAA;IAAO1B,CAAA,MAAA0B,MAAA;IAAA1B,CAAA,MAAAQ,EAAA;IAAAR,CAAA,MAAAsC,EAAA;EAAA;IAAA9B,EAAA,GAAAR,CAAA;IAAAsC,EAAA,GAAAtC,CAAA;EAAA;EAFXd,eAAA,CAAgBsB,EAEhB,EAAG8B,EAAQ;EAAA,IAEPZ,MAAA;IAIoC,MAAAa,EAAA,GAAAH,SAAA,IAAa,GAAA7C,SAAA,WAAuB;IAAA,IAAAiD,EAAA;IAAA,IAAAxC,CAAA,QAAAG,SAAA,IAAAH,CAAA,QAAAuC,EAAA;MAA3DC,EAAA,IAACrC,SAAA,EAAAZ,SAAA,EAAsBgD,EAAoC,EAAAT,MAAA,CAAAW,OAC5D;MAAAzC,CAAA,MAAAG,SAAA;MAAAH,CAAA,MAAAuC,EAAA;MAAAvC,CAAA,MAAAwC,EAAA;IAAA;MAAAA,EAAA,GAAAxC,CAAA;IAAA;IADC,MAAA0C,EAAA,GAAAF,EACD,CAAAG,IAAA,CACF;IAMqB,MAAAC,EAAA,WAAQX,aAAA,qBAAkC;IAC3D,MAAAY,EAAA,GAAArD,WAAA,GAAcgC,WAAA;IAAA,IAAAsB,EAAA;IAAA,IAAA9C,CAAA,QAAAiB,MAAA,IAAAjB,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAsB,UAAA,IAAAtB,CAAA,QAAAkB,aAAA,IAAAlB,CAAA,SAAAmB,UAAA,IAAAnB,CAAA,SAAAL,IAAA,IAAAK,CAAA,SAAAqB,CAAA,IAAArB,CAAA,SAAA0C,EAAA,IAAA1C,CAAA,SAAA4C,EAAA,IAAA5C,CAAA,SAAA6C,EAAA,IAAA7C,CAAA,SAAAoB,KAAA;MAAA,IAAA2B,EAAA;MAAA,IAAA/C,CAAA,SAAAsB,UAAA,IAAAtB,CAAA,SAAAL,IAAA;QASfoD,EAAA,GAAAA,CAAA,KAAMzB,UAAA,CAAW3B,IAAA;QAAAK,CAAA,OAAAsB,UAAA;QAAAtB,CAAA,OAAAL,IAAA;QAAAK,CAAA,OAAA+C,EAAA;MAAA;QAAAA,EAAA,GAAA/C,CAAA;MAAA;MAnB9B8C,EAAA,GAAAE,KAAA,CAAApE,KAAA;QAAAuB,SAAA,EACauC,EAEH;QAAAO,WAAA;QAAAtD,IAAA;QAAAuD,KAAA;UAAA,yBAMqBN,EAA0C;UAAAO,MAAA,EAC3DN;QAAc;QAAA3C,QAAA,GAI1BS,IAAA,CAAC;UAAAR,SAAA,EAAe,GAAAZ,SAAA;QAAuB,C,GACvCoB,IAAA,CAAC;UAAA,cACaU,CAAA,CAAE;UAAAlB,SAAA,EACH,GAAAZ,SAAA,SAAqB;UAAA6D,EAAA,EAC5B,iBAAiBzD,IAAA,EAAM;UAAAU,OAAA,EAClB0C,EAAiB;UAAAnC,IAAA,EACrB;QAAA,C,GAEPoC,KAAA,CAAC;UAAA7C,SAAA,EAAe,GAAAZ,SAAA,WAAuB;UAAAW,QAAA,GACrCS,IAAA,CAAC;YAAAR,SAAA,EAAe,GAAAZ,SAAA;UAA+B,C,GAC/CyD,KAAA,CAAC;YAAA7C,SAAA,EAAe,GAAAZ,SAAA,oBAAgC;YAAAW,QAAA,GAC7Ce,MAAA,EACAA,MAAA,KAAAoC,SAAW,IACVL,KAAA,CAAC;cAAA7C,SAAA,EAAe,GAAAZ,SAAA,UAAsB;cAAAW,QAAA,GAIpCS,IAAA,CAAArB,MAAA;gBAAA,cACc+B,CAAA,CAAE;gBAAApB,WAAA,EACF;gBAAAE,SAAA,EACD,GAAAZ,SAAA,iBAA6B;gBAAA+D,IAAA,EAClC3C,IAAA,CAAAvB,WAAA;kBAAAmE,SAAA,EAAuB;kBAAAC,IAAA;gBAAA,C;+BACdlC,UAAA,CAAW3B,IAAA;cAAA,C,GAE5BgB,IAAA,CAAC;gBAAAR,SAAA,EAAc,GAAAZ,SAAA,iBAA6B;gBAAA6B,KAAA,EAASD,UAAA,GAAaC,KAAA,OAAQ;gBAAAlB,QAAA,EACvEkB;cAAA,C,GAEFF,aAAA,IAAiBA,aAAA,CAAAc,MAAA,IAAuB,IACvCrB,IAAA,CAAC;gBAAAR,SAAA,EAAe,GAAAZ,SAAA,mBAA+B;gBAAAW,QAAA,EAC5CgB,aAAA,CAAAuC,GAAA,CAAAC,MAIQ;cAAA,C;gBAYhBxD,QAAA;UAAA,C;;;;;;;;;;;;;;;;;;WA3DP4C,E;;;CAmEN;AAEA,OAAO,MAAMa,kBAAA,gBAAqB5E,aAAA,CAAc;AAEhD,OAAO,MAAMgC,mBAAA,GAA+DhB,EAAA;EAAA,MAAAC,CAAA,GAAArB,EAAA;EAAC;IAAAuB;EAAA,IAAAH,EAAY;EACvF,MAAA6D,WAAA,GAAoBnC,cAAA;EACpB,MAAA7B,KAAA,GAAcgE,WAAA,IAAc;EAAA,IAAApD,EAAA;EAAA,IAAAR,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAJ,KAAA;IAErBY,EAAA,GAAAG,IAAA,CAAAgD,kBAAA;MAAAE,KAAA,EAA2BjE,KAAA;MAAAM;IAAA,C;;;;;;;SAA3BM,E;CACT;AAEA,OAAO,MAAMiB,cAAA,GAAiBA,CAAA,KAAczC,GAAA,CAAI2E,kBAAA;AA/GX,SAAA5B,MAAAhC,EAAA;EAmBhC,OAAA+D,SAAA,EAAAC,KAAA,IAAAhE,EAAkB;EAAA,OACjBgE,KAAA,EAAArC,MAAA,IAAiBjC,kBAAA,CAAAuE,IAAA,CAAAC,CAAA,IAA+BH,SAAA,CAAAI,UAAA,CAAqBD,CAAA;AAAA;AApBtC,SAAAP,OAAAS,MAAA,EAAAC,CAAA;EAAA,OA6EfzD,IAAA,CAAArB,MAAA;IAAAW,WAAA,EACekE,MAAA,CAAAjB,KAAA,IAAgB;IAAA9C,QAAA,EACnB+D,MAAA,CAAA/D,QAAA;IAAAiE,MAAA;IAAAhE,OAAA,EAGD8D,MAAA,CAAA9D,OAAA;IAAAmD,IAAA,EACJ;IAAAtD,QAAA,EAEJiE,MAAA,CAAAG;EAAA,GALIF,CAAA;AAAA","ignoreList":[]}

package/dist/elements/Drawer/types.d.ts

@@ -21,5 +21,6 @@ export type TogglerProps = {
     disabled?: boolean;
     extraButtonProps?: Record<string, any>;
     slug: string;
+    tooltip?: string;
 } & HTMLAttributes<HTMLButtonElement>;
 //# sourceMappingURL=types.d.ts.map

package/dist/elements/Drawer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAA;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,QAAQ,GAAG,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,CAAA;CACvF,CAAA;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,QAAQ,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAA;IAC1D,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,CAAC,EAAE,QAAQ,GAAG,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,CAAA;IACnF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACtC,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAA;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,QAAQ,GAAG,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,CAAA;CACvF,CAAA;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,QAAQ,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAA;IAC1D,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,CAAC,EAAE,QAAQ,GAAG,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,CAAA;IACnF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACtC,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAA"}

package/dist/elements/Drawer/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Drawer/types.ts"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nexport type DrawerHeaderAction = {\n  readonly disabled?: boolean\n  readonly label: string\n  readonly onClick: () => void\n  readonly style?: 'dashed' | 'destructive' | 'ghost' | 'pill' | 'primary' | 'secondary'\n}\n\nexport type Props = {\n  readonly children: React.ReactNode\n  readonly className?: string\n  readonly Header?: React.ReactNode\n  readonly headerActions?: ReadonlyArray<DrawerHeaderAction>\n  readonly hoverTitle?: boolean\n  readonly slug: string\n  readonly title?: string\n}\n\nexport type TogglerProps = {\n  buttonStyle?: 'dashed' | 'destructive' | 'ghost' | 'pill' | 'primary' | 'secondary'\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  extraButtonProps?: Record<string, any>\n  slug: string\n} & HTMLAttributes<HTMLButtonElement>\n"],"mappings":"AAmBA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Drawer/types.ts"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nexport type DrawerHeaderAction = {\n  readonly disabled?: boolean\n  readonly label: string\n  readonly onClick: () => void\n  readonly style?: 'dashed' | 'destructive' | 'ghost' | 'pill' | 'primary' | 'secondary'\n}\n\nexport type Props = {\n  readonly children: React.ReactNode\n  readonly className?: string\n  readonly Header?: React.ReactNode\n  readonly headerActions?: ReadonlyArray<DrawerHeaderAction>\n  readonly hoverTitle?: boolean\n  readonly slug: string\n  readonly title?: string\n}\n\nexport type TogglerProps = {\n  buttonStyle?: 'dashed' | 'destructive' | 'ghost' | 'pill' | 'primary' | 'secondary'\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  extraButtonProps?: Record<string, any>\n  slug: string\n  tooltip?: string\n} & HTMLAttributes<HTMLButtonElement>\n"],"mappings":"AAmBA","ignoreList":[]}

package/dist/elements/EditMany/DrawerContent.d.ts

@@ -2,7 +2,7 @@ import type { Where } from 'payload';
 import React from 'react';
 import type { FieldOption } from '../FieldSelect/reduceFieldOptions.js';
 import type { EditManyProps } from './index.js';
-import './index.scss';
+import './index.css';
 import '../../forms/RenderFields/index.css';
 type EditManyDrawerContentProps = {
     /**

package/dist/elements/EditMany/DrawerContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/EditMany/DrawerContent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAc,KAAK,EAAE,MAAM,SAAS,CAAA;AAWhD,OAAO,KAAoD,MAAM,OAAO,CAAA;AAIxE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAA;AACvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAmB/C,OAAO,cAAc,CAAA;AACrB,OAAO,oCAAoC,CAAA;AA+E3C,KAAK,0BAA0B,GAAG;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,UAAU,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,cAAc,EAAE,WAAW,EAAE,CAAA;IAC7B;;OAEG;IACH,iBAAiB,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,IAAI,CAAA;IAClD,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,GAAG,aAAa,CAAA;AAEjB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAiRtE,CAAA"}
+{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/EditMany/DrawerContent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAc,KAAK,EAAE,MAAM,SAAS,CAAA;AAWhD,OAAO,KAAoD,MAAM,OAAO,CAAA;AAIxE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAA;AACvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAoB/C,OAAO,aAAa,CAAA;AACpB,OAAO,oCAAoC,CAAA;AAqF3C,KAAK,0BAA0B,GAAG;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,UAAU,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,cAAc,EAAE,WAAW,EAAE,CAAA;IAC7B;;OAEG;IACH,iBAAiB,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,IAAI,CAAA;IAClD,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,GAAG,aAAa,CAAA;AAEjB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA+QtE,CAAA"}