@payloadcms/ui 4.0.0-internal.c3ac604 → 4.0.0-internal.cb69780

package/dist/elements/ListControlsBar/index.css

@@ -10,6 +10,7 @@
     border-bottom: var(--stroke-width-small) solid var(--color-border);
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 768px) {
     .list-controls-bar {
       padding: var(--spacer-2-5) var(--spacer-3);

package/dist/elements/ListHeader/TitleActions/ListBulkUploadButton.d.ts

@@ -1,15 +1,9 @@
 import type { CollectionSlug } from 'payload';
 import React from 'react';
-export declare function ListBulkUploadButton({ collectionSlug, hasCreatePermission, isBulkUploadEnabled, onBulkUploadSuccess, openBulkUpload: openBulkUploadFromProps, }: {
+export declare function ListBulkUploadButton({ collectionSlug, hasCreatePermission, isBulkUploadEnabled, onBulkUploadSuccess, }: {
     collectionSlug: CollectionSlug;
     hasCreatePermission: boolean;
     isBulkUploadEnabled: boolean;
     onBulkUploadSuccess?: () => void;
-    /**
-     * @deprecated This prop will be removed in the next major version.
-     *
-     * Prefer using `onBulkUploadSuccess`
-     */
-    openBulkUpload?: () => void;
 }): React.JSX.Element;
 //# sourceMappingURL=ListBulkUploadButton.d.ts.map

package/dist/elements/ListHeader/TitleActions/ListBulkUploadButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListBulkUploadButton.d.ts","sourceRoot":"","sources":["../../../../src/elements/ListHeader/TitleActions/ListBulkUploadButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAG7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,wBAAgB,oBAAoB,CAAC,EACnC,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EAAE,uBAAuB,GACxC,EAAE;IACD,cAAc,EAAE,cAAc,CAAA;IAC9B,mBAAmB,EAAE,OAAO,CAAA;IAC5B,mBAAmB,EAAE,OAAO,CAAA;IAC5B,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAA;IAChC;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;CAC5B,qBAuDA"}
+{"version":3,"file":"ListBulkUploadButton.d.ts","sourceRoot":"","sources":["../../../../src/elements/ListHeader/TitleActions/ListBulkUploadButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAG7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,wBAAgB,oBAAoB,CAAC,EACnC,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,GACpB,EAAE;IACD,cAAc,EAAE,cAAc,CAAA;IAC9B,mBAAmB,EAAE,OAAO,CAAA;IAC5B,mBAAmB,EAAE,OAAO,CAAA;IAC5B,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAA;CACjC,qBAkDA"}

package/dist/elements/ListHeader/TitleActions/ListBulkUploadButton.js

@@ -10,13 +10,12 @@ import { useRouter } from '../../../providers/RouterAdapter/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import { Button } from '../../Button/index.js';
 export function ListBulkUploadButton(t0) {
-  const $ = _c(14);
+  const $ = _c(13);
   const {
     collectionSlug,
     hasCreatePermission,
     isBulkUploadEnabled,
-    onBulkUploadSuccess,
-    openBulkUpload: openBulkUploadFromProps
+    onBulkUploadSuccess
   } = t0;
   const {
     modalSlug: bulkUploadModalSlug,
@@ -35,43 +34,38 @@ export function ListBulkUploadButton(t0) {
   } = useModal();
   const router = useRouter();
   let t1;
-  if ($[0] !== bulkUploadModalSlug || $[1] !== collectionSlug || $[2] !== onBulkUploadSuccess || $[3] !== openBulkUploadFromProps || $[4] !== openModal || $[5] !== parent?.id || $[6] !== router || $[7] !== setCollectionSlug || $[8] !== setOnSuccess || $[9] !== setParentID) {
+  if ($[0] !== bulkUploadModalSlug || $[1] !== collectionSlug || $[2] !== onBulkUploadSuccess || $[3] !== openModal || $[4] !== parent?.id || $[5] !== router || $[6] !== setCollectionSlug || $[7] !== setOnSuccess || $[8] !== setParentID) {
     t1 = () => {
-      if (typeof openBulkUploadFromProps === "function") {
-        openBulkUploadFromProps();
-      } else {
-        setCollectionSlug(collectionSlug);
-        setParentID(parent?.id);
-        openModal(bulkUploadModalSlug);
-        setOnSuccess(() => {
-          if (typeof onBulkUploadSuccess === "function") {
-            onBulkUploadSuccess();
-          } else {
-            router.refresh();
-          }
-        });
-      }
+      setCollectionSlug(collectionSlug);
+      setParentID(parent?.id);
+      openModal(bulkUploadModalSlug);
+      setOnSuccess(() => {
+        if (typeof onBulkUploadSuccess === "function") {
+          onBulkUploadSuccess();
+        } else {
+          router.refresh();
+        }
+      });
     };
     $[0] = bulkUploadModalSlug;
     $[1] = collectionSlug;
     $[2] = onBulkUploadSuccess;
-    $[3] = openBulkUploadFromProps;
-    $[4] = openModal;
-    $[5] = parent?.id;
-    $[6] = router;
-    $[7] = setCollectionSlug;
-    $[8] = setOnSuccess;
-    $[9] = setParentID;
-    $[10] = t1;
+    $[3] = openModal;
+    $[4] = parent?.id;
+    $[5] = router;
+    $[6] = setCollectionSlug;
+    $[7] = setOnSuccess;
+    $[8] = setParentID;
+    $[9] = t1;
   } else {
-    t1 = $[10];
+    t1 = $[9];
   }
   const openBulkUpload = t1;
   if (!hasCreatePermission || !isBulkUploadEnabled) {
     return null;
   }
   let t2;
-  if ($[11] !== openBulkUpload || $[12] !== t) {
+  if ($[10] !== openBulkUpload || $[11] !== t) {
     t2 = _jsx(Button, {
       "aria-label": t("upload:bulkUpload"),
       buttonStyle: "pill",
@@ -79,11 +73,11 @@ export function ListBulkUploadButton(t0) {
       size: "medium",
       children: t("upload:bulkUpload")
     }, "bulk-upload-button");
-    $[11] = openBulkUpload;
-    $[12] = t;
-    $[13] = t2;
+    $[10] = openBulkUpload;
+    $[11] = t;
+    $[12] = t2;
   } else {
-    t2 = $[13];
+    t2 = $[12];
   }
   return t2;
 }

package/dist/elements/ListHeader/TitleActions/ListBulkUploadButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBulkUploadButton.js","names":["c","_c","useModal","React","useBulkUpload","useHierarchy","useRouter","useTranslation","Button","ListBulkUploadButton","t0","$","collectionSlug","hasCreatePermission","isBulkUploadEnabled","onBulkUploadSuccess","openBulkUpload","openBulkUploadFromProps","modalSlug","bulkUploadModalSlug","setCollectionSlug","setOnSuccess","setParentID","parent","t","openModal","router","t1","id","refresh","t2","_jsx","buttonStyle","onClick","size","children"],"sources":["../../../../src/elements/ListHeader/TitleActions/ListBulkUploadButton.tsx"],"sourcesContent":["'use client'\nimport type { CollectionSlug } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React from 'react'\n\nimport { useBulkUpload } from '../../../elements/BulkUpload/index.js'\nimport { useHierarchy } from '../../../providers/Hierarchy/index.js'\nimport { useRouter } from '../../../providers/RouterAdapter/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\n\nexport function ListBulkUploadButton({\n  collectionSlug,\n  hasCreatePermission,\n  isBulkUploadEnabled,\n  onBulkUploadSuccess,\n  openBulkUpload: openBulkUploadFromProps,\n}: {\n  collectionSlug: CollectionSlug\n  hasCreatePermission: boolean\n  isBulkUploadEnabled: boolean\n  onBulkUploadSuccess?: () => void\n  /**\n   * @deprecated This prop will be removed in the next major version.\n   *\n   * Prefer using `onBulkUploadSuccess`\n   */\n  openBulkUpload?: () => void\n}) {\n  const {\n    modalSlug: bulkUploadModalSlug,\n    setCollectionSlug,\n    setOnSuccess,\n    setParentID,\n  } = useBulkUpload()\n  const { parent } = useHierarchy()\n  const { t } = useTranslation()\n  const { openModal } = useModal()\n  const router = useRouter()\n\n  const openBulkUpload = React.useCallback(() => {\n    if (typeof openBulkUploadFromProps === 'function') {\n      openBulkUploadFromProps()\n    } else {\n      setCollectionSlug(collectionSlug)\n      setParentID(parent?.id)\n      openModal(bulkUploadModalSlug)\n      setOnSuccess(() => {\n        if (typeof onBulkUploadSuccess === 'function') {\n          onBulkUploadSuccess()\n        } else {\n          router.refresh()\n        }\n      })\n    }\n  }, [\n    router,\n    collectionSlug,\n    bulkUploadModalSlug,\n    parent,\n    openModal,\n    setCollectionSlug,\n    setParentID,\n    setOnSuccess,\n    onBulkUploadSuccess,\n    openBulkUploadFromProps,\n  ])\n\n  if (!hasCreatePermission || !isBulkUploadEnabled) {\n    return null\n  }\n\n  return (\n    <Button\n      aria-label={t('upload:bulkUpload')}\n      buttonStyle=\"pill\"\n      key=\"bulk-upload-button\"\n      onClick={openBulkUpload}\n      size=\"medium\"\n    >\n      {t('upload:bulkUpload')}\n    </Button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,QAAQ,QAAQ;AACzB,OAAOC,KAAA,MAAW;AAElB,SAASC,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAC7B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AAEvB,OAAO,SAAAC,qBAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAA8B;IAAAW,cAAA;IAAAC,mBAAA;IAAAC,mBAAA;IAAAC,mBAAA;IAAAC,cAAA,EAAAC;EAAA,IAAAP,EAiBpC;EACC;IAAAQ,SAAA,EAAAC,mBAAA;IAAAC,iBAAA;IAAAC,YAAA;IAAAC;EAAA,IAKIlB,aAAA;EACJ;IAAAmB;EAAA,IAAmBlB,YAAA;EACnB;IAAAmB;EAAA,IAAcjB,cAAA;EACd;IAAAkB;EAAA,IAAsBvB,QAAA;EACtB,MAAAwB,MAAA,GAAepB,SAAA;EAAA,IAAAqB,EAAA;EAAA,IAAAhB,CAAA,QAAAQ,mBAAA,IAAAR,CAAA,QAAAC,cAAA,IAAAD,CAAA,QAAAI,mBAAA,IAAAJ,CAAA,QAAAM,uBAAA,IAAAN,CAAA,QAAAc,SAAA,IAAAd,CAAA,QAAAY,MAAA,EAAAK,EAAA,IAAAjB,CAAA,QAAAe,MAAA,IAAAf,CAAA,QAAAS,iBAAA,IAAAT,CAAA,QAAAU,YAAA,IAAAV,CAAA,QAAAW,WAAA;IAE0BK,EAAA,GAAAA,CAAA;MAAA,IACnC,OAAOV,uBAAA,KAA4B;QACrCA,uBAAA;MAAA;QAEAG,iBAAA,CAAkBR,cAAA;QAClBU,WAAA,CAAYC,MAAA,EAAAK,EAAQ;QACpBH,SAAA,CAAUN,mBAAA;QACVE,YAAA;UAAA,IACM,OAAON,mBAAA,KAAwB;YACjCA,mBAAA;UAAA;YAEAW,MAAA,CAAAG,OAAA,CAAc;UAAA;QAAA,CAElB;MAAA;IAAA;IAEJlB,CAAA,MAAAQ,mBAAA;IAAAR,CAAA,MAAAC,cAAA;IAAAD,CAAA,MAAAI,mBAAA;IAAAJ,CAAA,MAAAM,uBAAA;IAAAN,CAAA,MAAAc,SAAA;IAAAd,CAAA,MAAAY,MAAA,EAAAK,EAAA;IAAAjB,CAAA,MAAAe,MAAA;IAAAf,CAAA,MAAAS,iBAAA;IAAAT,CAAA,MAAAU,YAAA;IAAAV,CAAA,MAAAW,WAAA;IAAAX,CAAA,OAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAfA,MAAAK,cAAA,GAAuBW,EA0BtB;EAAA,IAEG,CAACd,mBAAA,KAAwBC,mBAAA;IAAA;EAAA;EAAA,IAAAgB,EAAA;EAAA,IAAAnB,CAAA,SAAAK,cAAA,IAAAL,CAAA,SAAAa,CAAA;IAK3BM,EAAA,GAAAC,IAAA,CAAAvB,MAAA;MAAA,cACcgB,CAAA,CAAE;MAAAQ,WAAA,EACF;MAAAC,OAAA,EAEHjB,cAAA;MAAAkB,IAAA,EACJ;MAAAC,QAAA,EAEJX,CAAA,CAAE;IAAA,GAJC;IAAAb,CAAA,OAAAK,cAAA;IAAAL,CAAA,OAAAa,CAAA;IAAAb,CAAA,OAAAmB,EAAA;EAAA;IAAAA,EAAA,GAAAnB,CAAA;EAAA;EAAA,OAHNmB,EAGM;AAAA","ignoreList":[]}
+{"version":3,"file":"ListBulkUploadButton.js","names":["c","_c","useModal","React","useBulkUpload","useHierarchy","useRouter","useTranslation","Button","ListBulkUploadButton","t0","$","collectionSlug","hasCreatePermission","isBulkUploadEnabled","onBulkUploadSuccess","modalSlug","bulkUploadModalSlug","setCollectionSlug","setOnSuccess","setParentID","parent","t","openModal","router","t1","id","refresh","openBulkUpload","t2","_jsx","buttonStyle","onClick","size","children"],"sources":["../../../../src/elements/ListHeader/TitleActions/ListBulkUploadButton.tsx"],"sourcesContent":["'use client'\nimport type { CollectionSlug } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React from 'react'\n\nimport { useBulkUpload } from '../../../elements/BulkUpload/index.js'\nimport { useHierarchy } from '../../../providers/Hierarchy/index.js'\nimport { useRouter } from '../../../providers/RouterAdapter/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\n\nexport function ListBulkUploadButton({\n  collectionSlug,\n  hasCreatePermission,\n  isBulkUploadEnabled,\n  onBulkUploadSuccess,\n}: {\n  collectionSlug: CollectionSlug\n  hasCreatePermission: boolean\n  isBulkUploadEnabled: boolean\n  onBulkUploadSuccess?: () => void\n}) {\n  const {\n    modalSlug: bulkUploadModalSlug,\n    setCollectionSlug,\n    setOnSuccess,\n    setParentID,\n  } = useBulkUpload()\n  const { parent } = useHierarchy()\n  const { t } = useTranslation()\n  const { openModal } = useModal()\n  const router = useRouter()\n\n  const openBulkUpload = React.useCallback(() => {\n    setCollectionSlug(collectionSlug)\n    setParentID(parent?.id)\n    openModal(bulkUploadModalSlug)\n    setOnSuccess(() => {\n      if (typeof onBulkUploadSuccess === 'function') {\n        onBulkUploadSuccess()\n      } else {\n        router.refresh()\n      }\n    })\n  }, [\n    router,\n    collectionSlug,\n    bulkUploadModalSlug,\n    parent,\n    openModal,\n    setCollectionSlug,\n    setParentID,\n    setOnSuccess,\n    onBulkUploadSuccess,\n  ])\n\n  if (!hasCreatePermission || !isBulkUploadEnabled) {\n    return null\n  }\n\n  return (\n    <Button\n      aria-label={t('upload:bulkUpload')}\n      buttonStyle=\"pill\"\n      key=\"bulk-upload-button\"\n      onClick={openBulkUpload}\n      size=\"medium\"\n    >\n      {t('upload:bulkUpload')}\n    </Button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,QAAQ,QAAQ;AACzB,OAAOC,KAAA,MAAW;AAElB,SAASC,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAC7B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AAEvB,OAAO,SAAAC,qBAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAA8B;IAAAW,cAAA;IAAAC,mBAAA;IAAAC,mBAAA;IAAAC;EAAA,IAAAL,EAUpC;EACC;IAAAM,SAAA,EAAAC,mBAAA;IAAAC,iBAAA;IAAAC,YAAA;IAAAC;EAAA,IAKIhB,aAAA;EACJ;IAAAiB;EAAA,IAAmBhB,YAAA;EACnB;IAAAiB;EAAA,IAAcf,cAAA;EACd;IAAAgB;EAAA,IAAsBrB,QAAA;EACtB,MAAAsB,MAAA,GAAelB,SAAA;EAAA,IAAAmB,EAAA;EAAA,IAAAd,CAAA,QAAAM,mBAAA,IAAAN,CAAA,QAAAC,cAAA,IAAAD,CAAA,QAAAI,mBAAA,IAAAJ,CAAA,QAAAY,SAAA,IAAAZ,CAAA,QAAAU,MAAA,EAAAK,EAAA,IAAAf,CAAA,QAAAa,MAAA,IAAAb,CAAA,QAAAO,iBAAA,IAAAP,CAAA,QAAAQ,YAAA,IAAAR,CAAA,QAAAS,WAAA;IAE0BK,EAAA,GAAAA,CAAA;MACvCP,iBAAA,CAAkBN,cAAA;MAClBQ,WAAA,CAAYC,MAAA,EAAAK,EAAQ;MACpBH,SAAA,CAAUN,mBAAA;MACVE,YAAA;QAAA,IACM,OAAOJ,mBAAA,KAAwB;UACjCA,mBAAA;QAAA;UAEAS,MAAA,CAAAG,OAAA,CAAc;QAAA;MAAA,CAElB;IAAA;IACFhB,CAAA,MAAAM,mBAAA;IAAAN,CAAA,MAAAC,cAAA;IAAAD,CAAA,MAAAI,mBAAA;IAAAJ,CAAA,MAAAY,SAAA;IAAAZ,CAAA,MAAAU,MAAA,EAAAK,EAAA;IAAAf,CAAA,MAAAa,MAAA;IAAAb,CAAA,MAAAO,iBAAA;IAAAP,CAAA,MAAAQ,YAAA;IAAAR,CAAA,MAAAS,WAAA;IAAAT,CAAA,MAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EAXA,MAAAiB,cAAA,GAAuBH,EAqBtB;EAAA,IAEG,CAACZ,mBAAA,KAAwBC,mBAAA;IAAA;EAAA;EAAA,IAAAe,EAAA;EAAA,IAAAlB,CAAA,SAAAiB,cAAA,IAAAjB,CAAA,SAAAW,CAAA;IAK3BO,EAAA,GAAAC,IAAA,CAAAtB,MAAA;MAAA,cACcc,CAAA,CAAE;MAAAS,WAAA,EACF;MAAAC,OAAA,EAEHJ,cAAA;MAAAK,IAAA,EACJ;MAAAC,QAAA,EAEJZ,CAAA,CAAE;IAAA,GAJC;IAAAX,CAAA,OAAAiB,cAAA;IAAAjB,CAAA,OAAAW,CAAA;IAAAX,CAAA,OAAAkB,EAAA;EAAA;IAAAA,EAAA,GAAAlB,CAAA;EAAA;EAAA,OAHNkB,EAGM;AAAA","ignoreList":[]}

package/dist/elements/ListHeader/TitleActions/ListEmptyTrashButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListEmptyTrashButton.d.ts","sourceRoot":"","sources":["../../../../src/elements/ListHeader/TitleActions/ListEmptyTrashButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAMrD,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,wBAAgB,oBAAoB,CAAC,EACnC,gBAAgB,EAChB,mBAAmB,GACpB,EAAE;IACD,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,mBAAmB,EAAE,OAAO,CAAA;CAC7B,qBA+KA"}
+{"version":3,"file":"ListEmptyTrashButton.d.ts","sourceRoot":"","sources":["../../../../src/elements/ListHeader/TitleActions/ListEmptyTrashButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAMrD,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,wBAAgB,oBAAoB,CAAC,EACnC,gBAAgB,EAChB,mBAAmB,GACpB,EAAE;IACD,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,mBAAmB,EAAE,OAAO,CAAA;CAC7B,qBAgLA"}

package/dist/elements/ListHeader/TitleActions/ListEmptyTrashButton.js

@@ -25,9 +25,8 @@ export function ListEmptyTrashButton({
     i18n,
     t
   } = useTranslation();
-  const {
-    code: locale
-  } = useLocale();
+  const currentLocale = useLocale();
+  const locale = currentLocale?.code;
   const {
     config
   } = useConfig();
@@ -132,7 +131,7 @@ export function ListEmptyTrashButton({
       "aria-label": t('general:emptyTrashLabel', {
         label: getTranslation(collectionConfig?.labels?.plural, i18n)
       }),
-      buttonStyle: "pill",
+      buttonStyle: "secondary",
       disabled: trashCount === 0,
       id: "empty-trash-button",
       onClick: () => {

package/dist/elements/ListHeader/TitleActions/ListEmptyTrashButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListEmptyTrashButton.js","names":["useModal","getTranslation","formatAdminURL","qs","React","toast","useConfig","useLocale","useRouteCache","useRouter","useSearchParams","useTranslation","requests","Button","ConfirmationModal","Translation","confirmEmptyTrashSlug","ListEmptyTrashButton","collectionConfig","hasDeletePermission","i18n","t","code","locale","config","openModal","router","searchParams","clearRouteCache","trashCount","setTrashCount","useState","useEffect","fetchTrashCount","queryString","stringify","depth","limit","trash","where","deletedAt","exists","addQueryPrefix","res","get","apiRoute","routes","api","path","slug","headers","language","json","totalDocs","handleEmptyTrash","useCallback","labels","delete","deletedCount","docs","length","status","success","count","label","plural","errors","error","message","description","map","err","join","replace","Object","fromEntries","entries","page","_jsxs","Fragment","_jsx","buttonStyle","disabled","id","onClick","size","body","elements","0","children","1","i18nKey","variables","singular","confirmingLabel","heading","modalSlug","onConfirm"],"sources":["../../../../src/elements/ListHeader/TitleActions/ListEmptyTrashButton.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { formatAdminURL } from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport React from 'react'\nimport { toast } from 'sonner'\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { useRouteCache } from '../../../providers/RouteCache/index.js'\nimport { useRouter, useSearchParams } from '../../../providers/RouterAdapter/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { requests } from '../../../utilities/api.js'\nimport { Button } from '../../Button/index.js'\nimport { ConfirmationModal } from '../../ConfirmationModal/index.js'\nimport { Translation } from '../../Translation/index.js'\n\nconst confirmEmptyTrashSlug = 'confirm-empty-trash'\n\nexport function ListEmptyTrashButton({\n  collectionConfig,\n  hasDeletePermission,\n}: {\n  collectionConfig: ClientCollectionConfig\n  hasDeletePermission: boolean\n}) {\n  const { i18n, t } = useTranslation()\n  const { code: locale } = useLocale()\n  const { config } = useConfig()\n  const { openModal } = useModal()\n  const router = useRouter()\n  const searchParams = useSearchParams()\n  const { clearRouteCache } = useRouteCache()\n\n  const [trashCount, setTrashCount] = React.useState<null | number>(null)\n\n  React.useEffect(() => {\n    const fetchTrashCount = async () => {\n      const queryString = qs.stringify(\n        {\n          depth: 0,\n          limit: 0,\n          locale,\n          trash: true,\n          where: {\n            deletedAt: {\n              exists: true,\n            },\n          },\n        },\n        { addQueryPrefix: true },\n      )\n\n      try {\n        const res = await requests.get(\n          formatAdminURL({\n            apiRoute: config.routes.api,\n            path: `/${collectionConfig.slug}${queryString}`,\n          }),\n          {\n            headers: {\n              'Accept-Language': i18n.language,\n              'Content-Type': 'application/json',\n            },\n          },\n        )\n\n        const json = await res.json()\n        setTrashCount(json?.totalDocs ?? 0)\n      } catch {\n        setTrashCount(0)\n      }\n    }\n\n    void fetchTrashCount()\n  }, [collectionConfig.slug, config, i18n.language, locale])\n\n  const handleEmptyTrash = React.useCallback(async () => {\n    if (!hasDeletePermission) {\n      return\n    }\n\n    const { slug, labels } = collectionConfig\n\n    const queryString = qs.stringify(\n      {\n        limit: 0,\n        locale,\n        trash: true,\n        where: {\n          deletedAt: {\n            exists: true,\n          },\n        },\n      },\n      { addQueryPrefix: true },\n    )\n\n    const res = await requests.delete(\n      formatAdminURL({\n        apiRoute: config.routes.api,\n        path: `/${slug}${queryString}`,\n      }),\n      {\n        headers: {\n          'Accept-Language': i18n.language,\n          'Content-Type': 'application/json',\n        },\n      },\n    )\n\n    try {\n      const json = await res.json()\n      const deletedCount = json?.docs?.length || 0\n\n      if (res.status < 400) {\n        toast.success(\n          t('general:permanentlyDeletedCountSuccessfully', {\n            count: deletedCount,\n            label: getTranslation(labels?.plural, i18n),\n          }),\n        )\n      }\n\n      if (json?.errors?.length > 0) {\n        toast.error(json.message, {\n          description: json.errors.map((err) => err.message).join('\\n'),\n        })\n      }\n\n      router.replace(\n        qs.stringify(\n          {\n            ...Object.fromEntries(searchParams.entries()),\n            page: '1',\n          },\n          { addQueryPrefix: true },\n        ),\n      )\n\n      clearRouteCache()\n    } catch {\n      toast.error(t('error:unknown'))\n    }\n  }, [\n    collectionConfig,\n    config,\n    hasDeletePermission,\n    i18n,\n    t,\n    locale,\n    searchParams,\n    router,\n    clearRouteCache,\n  ])\n\n  return (\n    <React.Fragment>\n      <Button\n        aria-label={t('general:emptyTrashLabel', {\n          label: getTranslation(collectionConfig?.labels?.plural, i18n),\n        })}\n        buttonStyle=\"pill\"\n        disabled={trashCount === 0}\n        id=\"empty-trash-button\"\n        key=\"empty-trash-button\"\n        onClick={() => {\n          openModal(confirmEmptyTrashSlug)\n        }}\n        size=\"medium\"\n      >\n        {t('general:emptyTrash')}\n      </Button>\n      <ConfirmationModal\n        body={\n          <Translation\n            elements={{\n              '0': ({ children }) => <strong>{children}</strong>,\n              '1': ({ children }) => <strong>{children}</strong>,\n            }}\n            i18nKey=\"general:aboutToPermanentlyDeleteTrash\"\n            t={t}\n            variables={{\n              count: trashCount ?? 0,\n              label: getTranslation(\n                trashCount === 1\n                  ? collectionConfig.labels?.singular\n                  : collectionConfig.labels?.plural,\n                i18n,\n              ),\n            }}\n          />\n        }\n        confirmingLabel={t('general:deleting')}\n        heading={t('general:confirmDeletion')}\n        modalSlug={confirmEmptyTrashSlug}\n        onConfirm={handleEmptyTrash}\n      />\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListEmptyTrashButton.js","names":["useModal","getTranslation","formatAdminURL","qs","React","toast","useConfig","useLocale","useRouteCache","useRouter","useSearchParams","useTranslation","requests","Button","ConfirmationModal","Translation","confirmEmptyTrashSlug","ListEmptyTrashButton","collectionConfig","hasDeletePermission","i18n","t","currentLocale","locale","code","config","openModal","router","searchParams","clearRouteCache","trashCount","setTrashCount","useState","useEffect","fetchTrashCount","queryString","stringify","depth","limit","trash","where","deletedAt","exists","addQueryPrefix","res","get","apiRoute","routes","api","path","slug","headers","language","json","totalDocs","handleEmptyTrash","useCallback","labels","delete","deletedCount","docs","length","status","success","count","label","plural","errors","error","message","description","map","err","join","replace","Object","fromEntries","entries","page","_jsxs","Fragment","_jsx","buttonStyle","disabled","id","onClick","size","body","elements","0","children","1","i18nKey","variables","singular","confirmingLabel","heading","modalSlug","onConfirm"],"sources":["../../../../src/elements/ListHeader/TitleActions/ListEmptyTrashButton.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { formatAdminURL } from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport React from 'react'\nimport { toast } from 'sonner'\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { useRouteCache } from '../../../providers/RouteCache/index.js'\nimport { useRouter, useSearchParams } from '../../../providers/RouterAdapter/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { requests } from '../../../utilities/api.js'\nimport { Button } from '../../Button/index.js'\nimport { ConfirmationModal } from '../../ConfirmationModal/index.js'\nimport { Translation } from '../../Translation/index.js'\n\nconst confirmEmptyTrashSlug = 'confirm-empty-trash'\n\nexport function ListEmptyTrashButton({\n  collectionConfig,\n  hasDeletePermission,\n}: {\n  collectionConfig: ClientCollectionConfig\n  hasDeletePermission: boolean\n}) {\n  const { i18n, t } = useTranslation()\n  const currentLocale = useLocale()\n  const locale = currentLocale?.code\n  const { config } = useConfig()\n  const { openModal } = useModal()\n  const router = useRouter()\n  const searchParams = useSearchParams()\n  const { clearRouteCache } = useRouteCache()\n\n  const [trashCount, setTrashCount] = React.useState<null | number>(null)\n\n  React.useEffect(() => {\n    const fetchTrashCount = async () => {\n      const queryString = qs.stringify(\n        {\n          depth: 0,\n          limit: 0,\n          locale,\n          trash: true,\n          where: {\n            deletedAt: {\n              exists: true,\n            },\n          },\n        },\n        { addQueryPrefix: true },\n      )\n\n      try {\n        const res = await requests.get(\n          formatAdminURL({\n            apiRoute: config.routes.api,\n            path: `/${collectionConfig.slug}${queryString}`,\n          }),\n          {\n            headers: {\n              'Accept-Language': i18n.language,\n              'Content-Type': 'application/json',\n            },\n          },\n        )\n\n        const json = await res.json()\n        setTrashCount(json?.totalDocs ?? 0)\n      } catch {\n        setTrashCount(0)\n      }\n    }\n\n    void fetchTrashCount()\n  }, [collectionConfig.slug, config, i18n.language, locale])\n\n  const handleEmptyTrash = React.useCallback(async () => {\n    if (!hasDeletePermission) {\n      return\n    }\n\n    const { slug, labels } = collectionConfig\n\n    const queryString = qs.stringify(\n      {\n        limit: 0,\n        locale,\n        trash: true,\n        where: {\n          deletedAt: {\n            exists: true,\n          },\n        },\n      },\n      { addQueryPrefix: true },\n    )\n\n    const res = await requests.delete(\n      formatAdminURL({\n        apiRoute: config.routes.api,\n        path: `/${slug}${queryString}`,\n      }),\n      {\n        headers: {\n          'Accept-Language': i18n.language,\n          'Content-Type': 'application/json',\n        },\n      },\n    )\n\n    try {\n      const json = await res.json()\n      const deletedCount = json?.docs?.length || 0\n\n      if (res.status < 400) {\n        toast.success(\n          t('general:permanentlyDeletedCountSuccessfully', {\n            count: deletedCount,\n            label: getTranslation(labels?.plural, i18n),\n          }),\n        )\n      }\n\n      if (json?.errors?.length > 0) {\n        toast.error(json.message, {\n          description: json.errors.map((err) => err.message).join('\\n'),\n        })\n      }\n\n      router.replace(\n        qs.stringify(\n          {\n            ...Object.fromEntries(searchParams.entries()),\n            page: '1',\n          },\n          { addQueryPrefix: true },\n        ),\n      )\n\n      clearRouteCache()\n    } catch {\n      toast.error(t('error:unknown'))\n    }\n  }, [\n    collectionConfig,\n    config,\n    hasDeletePermission,\n    i18n,\n    t,\n    locale,\n    searchParams,\n    router,\n    clearRouteCache,\n  ])\n\n  return (\n    <React.Fragment>\n      <Button\n        aria-label={t('general:emptyTrashLabel', {\n          label: getTranslation(collectionConfig?.labels?.plural, i18n),\n        })}\n        buttonStyle=\"secondary\"\n        disabled={trashCount === 0}\n        id=\"empty-trash-button\"\n        key=\"empty-trash-button\"\n        onClick={() => {\n          openModal(confirmEmptyTrashSlug)\n        }}\n        size=\"medium\"\n      >\n        {t('general:emptyTrash')}\n      </Button>\n      <ConfirmationModal\n        body={\n          <Translation\n            elements={{\n              '0': ({ children }) => <strong>{children}</strong>,\n              '1': ({ children }) => <strong>{children}</strong>,\n            }}\n            i18nKey=\"general:aboutToPermanentlyDeleteTrash\"\n            t={t}\n            variables={{\n              count: trashCount ?? 0,\n              label: getTranslation(\n                trashCount === 1\n                  ? collectionConfig.labels?.singular\n                  : collectionConfig.labels?.plural,\n                i18n,\n              ),\n            }}\n          />\n        }\n        confirmingLabel={t('general:deleting')}\n        heading={t('general:confirmDeletion')}\n        modalSlug={confirmEmptyTrashSlug}\n        onConfirm={handleEmptyTrash}\n      />\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,SAASA,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,YAAYC,EAAA,MAAQ;AACpB,OAAOC,KAAA,MAAW;AAClB,SAASC,KAAK,QAAQ;AAEtB,SAASC,SAAS,QAAQ;AAC1B,SAASC,SAAS,QAAQ;AAC1B,SAASC,aAAa,QAAQ;AAC9B,SAASC,SAAS,EAAEC,eAAe,QAAQ;AAC3C,SAASC,cAAc,QAAQ;AAC/B,SAASC,QAAQ,QAAQ;AACzB,SAASC,MAAM,QAAQ;AACvB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,WAAW,QAAQ;AAE5B,MAAMC,qBAAA,GAAwB;AAE9B,OAAO,SAASC,qBAAqB;EACnCC,gBAAgB;EAChBC;AAAmB,CAIpB;EACC,MAAM;IAAEC,IAAI;IAAEC;EAAC,CAAE,GAAGV,cAAA;EACpB,MAAMW,aAAA,GAAgBf,SAAA;EACtB,MAAMgB,MAAA,GAASD,aAAA,EAAeE,IAAA;EAC9B,MAAM;IAAEC;EAAM,CAAE,GAAGnB,SAAA;EACnB,MAAM;IAAEoB;EAAS,CAAE,GAAG1B,QAAA;EACtB,MAAM2B,MAAA,GAASlB,SAAA;EACf,MAAMmB,YAAA,GAAelB,eAAA;EACrB,MAAM;IAAEmB;EAAe,CAAE,GAAGrB,aAAA;EAE5B,MAAM,CAACsB,UAAA,EAAYC,aAAA,CAAc,GAAG3B,KAAA,CAAM4B,QAAQ,CAAgB;EAElE5B,KAAA,CAAM6B,SAAS,CAAC;IACd,MAAMC,eAAA,GAAkB,MAAAA,CAAA;MACtB,MAAMC,WAAA,GAAchC,EAAA,CAAGiC,SAAS,CAC9B;QACEC,KAAA,EAAO;QACPC,KAAA,EAAO;QACPf,MAAA;QACAgB,KAAA,EAAO;QACPC,KAAA,EAAO;UACLC,SAAA,EAAW;YACTC,MAAA,EAAQ;UACV;QACF;MACF,GACA;QAAEC,cAAA,EAAgB;MAAK;MAGzB,IAAI;QACF,MAAMC,GAAA,GAAM,MAAMhC,QAAA,CAASiC,GAAG,CAC5B3C,cAAA,CAAe;UACb4C,QAAA,EAAUrB,MAAA,CAAOsB,MAAM,CAACC,GAAG;UAC3BC,IAAA,EAAM,IAAI/B,gBAAA,CAAiBgC,IAAI,GAAGf,WAAA;QACpC,IACA;UACEgB,OAAA,EAAS;YACP,mBAAmB/B,IAAA,CAAKgC,QAAQ;YAChC,gBAAgB;UAClB;QACF;QAGF,MAAMC,IAAA,GAAO,MAAMT,GAAA,CAAIS,IAAI;QAC3BtB,aAAA,CAAcsB,IAAA,EAAMC,SAAA,IAAa;MACnC,EAAE,MAAM;QACNvB,aAAA,CAAc;MAChB;IACF;IAEA,KAAKG,eAAA;EACP,GAAG,CAAChB,gBAAA,CAAiBgC,IAAI,EAAEzB,MAAA,EAAQL,IAAA,CAAKgC,QAAQ,EAAE7B,MAAA,CAAO;EAEzD,MAAMgC,gBAAA,GAAmBnD,KAAA,CAAMoD,WAAW,CAAC;IACzC,IAAI,CAACrC,mBAAA,EAAqB;MACxB;IACF;IAEA,MAAM;MAAE+B,IAAI;MAAEO;IAAM,CAAE,GAAGvC,gBAAA;IAEzB,MAAMiB,aAAA,GAAchC,EAAA,CAAGiC,SAAS,CAC9B;MACEE,KAAA,EAAO;MACPf,MAAA;MACAgB,KAAA,EAAO;MACPC,KAAA,EAAO;QACLC,SAAA,EAAW;UACTC,MAAA,EAAQ;QACV;MACF;IACF,GACA;MAAEC,cAAA,EAAgB;IAAK;IAGzB,MAAMC,KAAA,GAAM,MAAMhC,QAAA,CAAS8C,MAAM,CAC/BxD,cAAA,CAAe;MACb4C,QAAA,EAAUrB,MAAA,CAAOsB,MAAM,CAACC,GAAG;MAC3BC,IAAA,EAAM,IAAIC,IAAA,GAAOf,aAAA;IACnB,IACA;MACEgB,OAAA,EAAS;QACP,mBAAmB/B,IAAA,CAAKgC,QAAQ;QAChC,gBAAgB;MAClB;IACF;IAGF,IAAI;MACF,MAAMC,MAAA,GAAO,MAAMT,KAAA,CAAIS,IAAI;MAC3B,MAAMM,YAAA,GAAeN,MAAA,EAAMO,IAAA,EAAMC,MAAA,IAAU;MAE3C,IAAIjB,KAAA,CAAIkB,MAAM,GAAG,KAAK;QACpBzD,KAAA,CAAM0D,OAAO,CACX1C,CAAA,CAAE,+CAA+C;UAC/C2C,KAAA,EAAOL,YAAA;UACPM,KAAA,EAAOhE,cAAA,CAAewD,MAAA,EAAQS,MAAA,EAAQ9C,IAAA;QACxC;MAEJ;MAEA,IAAIiC,MAAA,EAAMc,MAAA,EAAQN,MAAA,GAAS,GAAG;QAC5BxD,KAAA,CAAM+D,KAAK,CAACf,MAAA,CAAKgB,OAAO,EAAE;UACxBC,WAAA,EAAajB,MAAA,CAAKc,MAAM,CAACI,GAAG,CAAEC,GAAA,IAAQA,GAAA,CAAIH,OAAO,EAAEI,IAAI,CAAC;QAC1D;MACF;MAEA9C,MAAA,CAAO+C,OAAO,CACZvE,EAAA,CAAGiC,SAAS,CACV;QACE,GAAGuC,MAAA,CAAOC,WAAW,CAAChD,YAAA,CAAaiD,OAAO,GAAG;QAC7CC,IAAA,EAAM;MACR,GACA;QAAEnC,cAAA,EAAgB;MAAK;MAI3Bd,eAAA;IACF,EAAE,MAAM;MACNxB,KAAA,CAAM+D,KAAK,CAAC/C,CAAA,CAAE;IAChB;EACF,GAAG,CACDH,gBAAA,EACAO,MAAA,EACAN,mBAAA,EACAC,IAAA,EACAC,CAAA,EACAE,MAAA,EACAK,YAAA,EACAD,MAAA,EACAE,eAAA,CACD;EAED,oBACEkD,KAAA,CAAC3E,KAAA,CAAM4E,QAAQ;4BACbC,IAAA,CAACpE,MAAA;MACC,cAAYQ,CAAA,CAAE,2BAA2B;QACvC4C,KAAA,EAAOhE,cAAA,CAAeiB,gBAAA,EAAkBuC,MAAA,EAAQS,MAAA,EAAQ9C,IAAA;MAC1D;MACA8D,WAAA,EAAY;MACZC,QAAA,EAAUrD,UAAA,KAAe;MACzBsD,EAAA,EAAG;MAEHC,OAAA,EAASA,CAAA;QACP3D,SAAA,CAAUV,qBAAA;MACZ;MACAsE,IAAA,EAAK;gBAEJjE,CAAA,CAAE;OANC,uB,aAQN4D,IAAA,CAACnE,iBAAA;MACCyE,IAAA,eACEN,IAAA,CAAClE,WAAA;QACCyE,QAAA,EAAU;UACR,KAAKC,CAAC;YAAEC;UAAQ,CAAE,kBAAKT,IAAA,CAAC;sBAAQS;;UAChC,KAAKC,CAAC;YAAED,QAAQ,EAARA;UAAQ,CAAE,kBAAKT,IAAA,CAAC;sBAAQS;;QAClC;QACAE,OAAA,EAAQ;QACRvE,CAAA,EAAGA,CAAA;QACHwE,SAAA,EAAW;UACT7B,KAAA,EAAOlC,UAAA,IAAc;UACrBmC,KAAA,EAAOhE,cAAA,CACL6B,UAAA,KAAe,IACXZ,gBAAA,CAAiBuC,MAAM,EAAEqC,QAAA,GACzB5E,gBAAA,CAAiBuC,MAAM,EAAES,MAAA,EAC7B9C,IAAA;QAEJ;;MAGJ2E,eAAA,EAAiB1E,CAAA,CAAE;MACnB2E,OAAA,EAAS3E,CAAA,CAAE;MACX4E,SAAA,EAAWjF,qBAAA;MACXkF,SAAA,EAAW3C;;;AAInB","ignoreList":[]}

package/dist/elements/LivePreview/Toolbar/Controls/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/LivePreview/Toolbar/Controls/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,OAAO,aAAa,CAAA;AAKpB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgInD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/LivePreview/Toolbar/Controls/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,OAAO,aAAa,CAAA;AAKpB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuInD,CAAA"}

package/dist/elements/LivePreview/Toolbar/Controls/index.js

@@ -69,6 +69,7 @@ export const ToolbarControls = () => {
     if ($[14] !== zoom) {
       t3 = buttonProps_0 => _jsxs(Button, {
         ...buttonProps_0,
+        "aria-label": `Zoom ${zoom * 100}%`,
         buttonStyle: "pill",
         icon: _jsx(ChevronIcon, {
           size: 16
@@ -110,6 +111,7 @@ export const ToolbarControls = () => {
       children: [breakpoints?.length > 0 && _jsx(Popup, {
         className: `${baseClass}__breakpoint`,
         horizontalAlign: "right",
+        popupType: "menu",
         render: t1 => {
           const {
             close
@@ -156,6 +158,7 @@ export const ToolbarControls = () => {
         }), _jsx(Popup, {
           className: `${baseClass}__zoom`,
           horizontalAlign: "right",
+          popupType: "menu",
           render: t2,
           renderButton: t3,
           showScrollbar: true,

package/dist/elements/LivePreview/Toolbar/Controls/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","CollapseIcon","ExpandIcon","NewTabIcon","useLivePreviewContext","useTranslation","Button","Popup","PopupList","PreviewFrameSizeInput","baseClass","zoomOptions","ToolbarControls","$","breakpoint","breakpoints","isExpanded","openPopupWindow","setBreakpoint","setIsExpanded","setIsLivePreviewing","setZoom","zoom","t","t0","customOption","label","value","t2","t3","close","close_0","_jsx","RadioGroup","children","Fragment","map","zoomValue","isActive_0","_jsxs","RadioGroupItem","active","isActive","onClick","buttonProps_0","buttonProps","buttonStyle","icon","size","className","t4","t5","e","preventDefault","length","horizontalAlign","render","t1","bp","name","find","bp_0","axis","tooltip"],"sources":["../../../../../src/elements/LivePreview/Toolbar/Controls/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { CollapseIcon } from '../../../../icons/Collapse/index.js'\nimport { ExpandIcon } from '../../../../icons/Expand/index.js'\nimport { NewTabIcon } from '../../../../icons/NewTab/index.js'\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { Button } from '../../../Button/index.js'\nimport { Popup, PopupList } from '../../../Popup/index.js'\nimport { PreviewFrameSizeInput } from '../SizeInput/index.js'\nimport './index.css'\n\nconst baseClass = 'live-preview-toolbar-controls'\nconst zoomOptions = [50, 75, 100, 125, 150, 200]\n\nexport const ToolbarControls: React.FC<EditViewProps> = () => {\n  const {\n    breakpoint,\n    breakpoints,\n    isExpanded,\n    openPopupWindow,\n    setBreakpoint,\n    setIsExpanded,\n    setIsLivePreviewing,\n    setZoom,\n    zoom,\n  } = useLivePreviewContext()\n\n  const { t } = useTranslation()\n\n  const customOption = {\n    label: t('general:custom'),\n    value: 'custom',\n  }\n\n  return (\n    <div className={baseClass}>\n      {breakpoints?.length > 0 && (\n        <Popup\n          className={`${baseClass}__breakpoint`}\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.RadioGroup>\n              <React.Fragment>\n                {breakpoints.map((bp) => {\n                  const isActive = bp.name == breakpoint\n                  return (\n                    <PopupList.RadioGroupItem\n                      active={isActive}\n                      key={bp.name}\n                      onClick={() => {\n                        setBreakpoint(bp.name)\n                        close()\n                      }}\n                    >\n                      {bp.label}\n                    </PopupList.RadioGroupItem>\n                  )\n                })}\n                {/* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */}\n                {breakpoint === 'custom' && (\n                  <PopupList.RadioGroupItem\n                    active={breakpoint == customOption.value}\n                    onClick={() => {\n                      setBreakpoint(customOption.value)\n                      close()\n                    }}\n                  >\n                    {customOption.label}\n                  </PopupList.RadioGroupItem>\n                )}\n              </React.Fragment>\n            </PopupList.RadioGroup>\n          )}\n          renderButton={(buttonProps) => (\n            <Button {...buttonProps} buttonStyle=\"secondary\" icon={<ChevronIcon size={16} />}>\n              {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}\n            </Button>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      )}\n      <div className={`${baseClass}__center`}>\n        <PreviewFrameSizeInput axis=\"x\" />\n        <PreviewFrameSizeInput axis=\"y\" />\n        <Popup\n          className={`${baseClass}__zoom`}\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.RadioGroup>\n              <React.Fragment>\n                {zoomOptions.map((zoomValue) => {\n                  const isActive = zoom * 100 == zoomValue\n                  return (\n                    <PopupList.RadioGroupItem\n                      active={isActive}\n                      key={zoomValue}\n                      onClick={() => {\n                        setZoom(zoomValue / 100)\n                        close()\n                      }}\n                    >\n                      {zoomValue}%\n                    </PopupList.RadioGroupItem>\n                  )\n                })}\n              </React.Fragment>\n            </PopupList.RadioGroup>\n          )}\n          renderButton={(buttonProps) => (\n            <Button {...buttonProps} buttonStyle=\"pill\" icon={<ChevronIcon size={16} />}>\n              <span className={`${baseClass}__zoom-percentage`}>%</span>\n              {zoom * 100}\n            </Button>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      </div>\n      <div className={`${baseClass}__end`}>\n        <Button\n          aria-label={isExpanded ? t('general:collapse') : t('general:expand')}\n          buttonStyle=\"ghost\"\n          icon={isExpanded ? <CollapseIcon size={16} /> : <ExpandIcon size={16} />}\n          onClick={() => setIsExpanded(!isExpanded)}\n          tooltip={isExpanded ? t('general:collapse') : t('general:expand')}\n        />\n        <Button\n          aria-label={t('general:openInNewWindow')}\n          buttonStyle=\"ghost\"\n          className={`${baseClass}__external`}\n          icon={<NewTabIcon size={16} />}\n          onClick={(e) => {\n            e.preventDefault()\n            openPopupWindow()\n            setIsLivePreviewing(false)\n          }}\n          tooltip={t('general:openInNewWindow')}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","CollapseIcon","ExpandIcon","NewTabIcon","useLivePreviewContext","useTranslation","Button","Popup","PopupList","PreviewFrameSizeInput","baseClass","zoomOptions","ToolbarControls","$","breakpoint","breakpoints","isExpanded","openPopupWindow","setBreakpoint","setIsExpanded","setIsLivePreviewing","setZoom","zoom","t","t0","customOption","label","value","t2","t3","close","close_0","_jsx","RadioGroup","children","Fragment","map","zoomValue","isActive_0","_jsxs","RadioGroupItem","active","isActive","onClick","buttonProps_0","buttonProps","buttonStyle","icon","size","className","t4","t5","e","preventDefault","length","horizontalAlign","popupType","render","t1","bp","name","find","bp_0","axis","tooltip"],"sources":["../../../../../src/elements/LivePreview/Toolbar/Controls/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { CollapseIcon } from '../../../../icons/Collapse/index.js'\nimport { ExpandIcon } from '../../../../icons/Expand/index.js'\nimport { NewTabIcon } from '../../../../icons/NewTab/index.js'\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { Button } from '../../../Button/index.js'\nimport { Popup, PopupList } from '../../../Popup/index.js'\nimport { PreviewFrameSizeInput } from '../SizeInput/index.js'\nimport './index.css'\n\nconst baseClass = 'live-preview-toolbar-controls'\nconst zoomOptions = [50, 75, 100, 125, 150, 200]\n\nexport const ToolbarControls: React.FC<EditViewProps> = () => {\n  const {\n    breakpoint,\n    breakpoints,\n    isExpanded,\n    openPopupWindow,\n    setBreakpoint,\n    setIsExpanded,\n    setIsLivePreviewing,\n    setZoom,\n    zoom,\n  } = useLivePreviewContext()\n\n  const { t } = useTranslation()\n\n  const customOption = {\n    label: t('general:custom'),\n    value: 'custom',\n  }\n\n  return (\n    <div className={baseClass}>\n      {breakpoints?.length > 0 && (\n        <Popup\n          className={`${baseClass}__breakpoint`}\n          horizontalAlign=\"right\"\n          popupType=\"menu\"\n          render={({ close }) => (\n            <PopupList.RadioGroup>\n              <React.Fragment>\n                {breakpoints.map((bp) => {\n                  const isActive = bp.name == breakpoint\n                  return (\n                    <PopupList.RadioGroupItem\n                      active={isActive}\n                      key={bp.name}\n                      onClick={() => {\n                        setBreakpoint(bp.name)\n                        close()\n                      }}\n                    >\n                      {bp.label}\n                    </PopupList.RadioGroupItem>\n                  )\n                })}\n                {/* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */}\n                {breakpoint === 'custom' && (\n                  <PopupList.RadioGroupItem\n                    active={breakpoint == customOption.value}\n                    onClick={() => {\n                      setBreakpoint(customOption.value)\n                      close()\n                    }}\n                  >\n                    {customOption.label}\n                  </PopupList.RadioGroupItem>\n                )}\n              </React.Fragment>\n            </PopupList.RadioGroup>\n          )}\n          renderButton={(buttonProps) => (\n            <Button {...buttonProps} buttonStyle=\"secondary\" icon={<ChevronIcon size={16} />}>\n              {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}\n            </Button>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      )}\n      <div className={`${baseClass}__center`}>\n        <PreviewFrameSizeInput axis=\"x\" />\n        <PreviewFrameSizeInput axis=\"y\" />\n        <Popup\n          className={`${baseClass}__zoom`}\n          horizontalAlign=\"right\"\n          popupType=\"menu\"\n          render={({ close }) => (\n            <PopupList.RadioGroup>\n              <React.Fragment>\n                {zoomOptions.map((zoomValue) => {\n                  const isActive = zoom * 100 == zoomValue\n                  return (\n                    <PopupList.RadioGroupItem\n                      active={isActive}\n                      key={zoomValue}\n                      onClick={() => {\n                        setZoom(zoomValue / 100)\n                        close()\n                      }}\n                    >\n                      {zoomValue}%\n                    </PopupList.RadioGroupItem>\n                  )\n                })}\n              </React.Fragment>\n            </PopupList.RadioGroup>\n          )}\n          renderButton={(buttonProps) => (\n            <Button\n              {...buttonProps}\n              aria-label={`Zoom ${zoom * 100}%`}\n              buttonStyle=\"pill\"\n              icon={<ChevronIcon size={16} />}\n            >\n              <span className={`${baseClass}__zoom-percentage`}>%</span>\n              {zoom * 100}\n            </Button>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      </div>\n      <div className={`${baseClass}__end`}>\n        <Button\n          aria-label={isExpanded ? t('general:collapse') : t('general:expand')}\n          buttonStyle=\"ghost\"\n          icon={isExpanded ? <CollapseIcon size={16} /> : <ExpandIcon size={16} />}\n          onClick={() => setIsExpanded(!isExpanded)}\n          tooltip={isExpanded ? t('general:collapse') : t('general:expand')}\n        />\n        <Button\n          aria-label={t('general:openInNewWindow')}\n          buttonStyle=\"ghost\"\n          className={`${baseClass}__external`}\n          icon={<NewTabIcon size={16} />}\n          onClick={(e) => {\n            e.preventDefault()\n            openPopupWindow()\n            setIsLivePreviewing(false)\n          }}\n          tooltip={t('general:openInNewWindow')}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/LivePreview/Window/index.css

@@ -48,6 +48,7 @@
     padding: var(--spacer-3);
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 1024px) {
     .live-preview-window {
       width: 100%;

package/dist/elements/LivePreview/Window/index.js

@@ -67,7 +67,7 @@ export const LivePreviewWindow = props => {
       data: values,
       externallyUpdatedRelationship: mostRecentUpdate,
       globalSlug,
-      locale: locale.code
+      locale: locale?.code
     });
   }, [formState, collectionSlug, globalSlug, id, appIsReady, mostRecentUpdate, locale, hasActiveTarget, loadedURL, lastReadyAt, postMessageToTargets]);
   /**

package/dist/elements/LivePreview/Window/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["reduceFieldsToValues","React","useCallback","useEffect","useAllFormFields","useDocumentEvents","useDocumentInfo","useLivePreviewContext","useLocale","IframeLoader","DeviceContainer","LivePreviewToolbar","baseClass","LivePreviewWindow","props","appIsReady","breakpoint","iframeRef","isExpanded","isLivePreviewing","lastReadyAt","loadedURL","popupRef","setLoadedURL","shouldRenderIframe","url","zoom","locale","mostRecentUpdate","formState","id","collectionSlug","globalSlug","postMessageToTargets","message","current","closed","postMessage","contentWindow","hasActiveTarget","values","type","data","externallyUpdatedRelationship","code","_jsx","className","filter","Boolean","join","_jsxs","onLoad","ref","src","style","transform","undefined"],"sources":["../../../../src/elements/LivePreview/Window/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { reduceFieldsToValues } from 'payload/shared'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useAllFormFields } from '../../../forms/Form/context.js'\nimport { useDocumentEvents } from '../../../providers/DocumentEvents/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { IframeLoader } from '../../IframeLoader/index.js'\nimport { DeviceContainer } from '../Device/index.js'\nimport { LivePreviewToolbar } from '../Toolbar/index.js'\nimport './index.css'\n\nconst baseClass = 'live-preview-window'\n\nexport const LivePreviewWindow: React.FC<EditViewProps> = (props) => {\n  const {\n    appIsReady,\n    breakpoint,\n    iframeRef,\n    isExpanded,\n    isLivePreviewing,\n    lastReadyAt,\n    loadedURL,\n    popupRef,\n    setLoadedURL,\n    shouldRenderIframe,\n    url,\n    zoom,\n  } = useLivePreviewContext()\n\n  const locale = useLocale()\n\n  const { mostRecentUpdate } = useDocumentEvents()\n\n  const [formState] = useAllFormFields()\n  const { id, collectionSlug, globalSlug } = useDocumentInfo()\n\n  const postMessageToTargets = useCallback(\n    (message: object) => {\n      if (popupRef.current && !popupRef.current.closed) {\n        popupRef.current.postMessage(message, url)\n      }\n\n      if (iframeRef.current) {\n        iframeRef.current.contentWindow?.postMessage(message, url)\n      }\n    },\n    [iframeRef, popupRef, url],\n  )\n\n  const hasActiveTarget = isLivePreviewing || (popupRef.current && !popupRef.current.closed)\n\n  /**\n   * For client-side apps, send data through `window.postMessage`\n   * The preview could either be an iframe embedded on the page\n   * Or it could be a separate popup window\n   * Also fires when a preview signals ready (lastReadyAt) to sync initial state\n   */\n  useEffect(() => {\n    if (!hasActiveTarget || !appIsReady || !formState) {\n      return\n    }\n\n    const values = reduceFieldsToValues(formState, true)\n\n    if (!values.id) {\n      values.id = id\n    }\n\n    postMessageToTargets({\n      type: 'payload-live-preview',\n      collectionSlug,\n      data: values,\n      externallyUpdatedRelationship: mostRecentUpdate,\n      globalSlug,\n      locale: locale.code,\n    })\n  }, [\n    formState,\n    collectionSlug,\n    globalSlug,\n    id,\n    appIsReady,\n    mostRecentUpdate,\n    locale,\n    hasActiveTarget,\n    loadedURL,\n    lastReadyAt,\n    postMessageToTargets,\n  ])\n\n  /**\n   * To support SSR, we transmit a `window.postMessage` event without a payload\n   * This is because the event will ultimately trigger a server-side roundtrip\n   * i.e., save, save draft, autosave, etc. will fire `router.refresh()`\n   */\n  useEffect(() => {\n    if (!hasActiveTarget || !appIsReady) {\n      return\n    }\n\n    postMessageToTargets({ type: 'payload-document-event' })\n  }, [mostRecentUpdate, hasActiveTarget, appIsReady, postMessageToTargets])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        isLivePreviewing && `${baseClass}--is-live-previewing`,\n        isExpanded && `${baseClass}--is-expanded`,\n        breakpoint &&\n          breakpoint !== 'responsive' &&\n          breakpoint !== 'custom' &&\n          `${baseClass}--has-breakpoint`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={`${baseClass}__wrapper`}>\n        <LivePreviewToolbar {...props} />\n        <div className={`${baseClass}__main`}>\n          <DeviceContainer>\n            {shouldRenderIframe && (\n              <IframeLoader\n                className=\"live-preview-iframe\"\n                id=\"live-preview-iframe\"\n                onLoad={() => {\n                  setLoadedURL(url)\n                }}\n                ref={iframeRef}\n                src={url}\n                style={{\n                  transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined,\n                }}\n              />\n            )}\n          </DeviceContainer>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,SAASA,oBAAoB,QAAQ;AACrC,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,QAAQ;AAE9C,SAASC,gBAAgB,QAAQ;AACjC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,eAAe,QAAQ;AAChC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,SAAS,QAAQ;AAC1B,SAASC,YAAY,QAAQ;AAC7B,SAASC,eAAe,QAAQ;AAChC,SAASC,kBAAkB,QAAQ;AACnC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,iBAAA,GAA8CC,KAAA;EACzD,MAAM;IACJC,UAAU;IACVC,UAAU;IACVC,SAAS;IACTC,UAAU;IACVC,gBAAgB;IAChBC,WAAW;IACXC,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,kBAAkB;IAClBC,GAAG;IACHC;EAAI,CACL,GAAGnB,qBAAA;EAEJ,MAAMoB,MAAA,GAASnB,SAAA;EAEf,MAAM;IAAEoB;EAAgB,CAAE,GAAGvB,iBAAA;EAE7B,MAAM,CAACwB,SAAA,CAAU,GAAGzB,gBAAA;EACpB,MAAM;IAAE0B,EAAE;IAAEC,cAAc;IAAEC;EAAU,CAAE,GAAG1B,eAAA;EAE3C,MAAM2B,oBAAA,GAAuB/B,WAAA,CAC1BgC,OAAA;IACC,IAAIZ,QAAA,CAASa,OAAO,IAAI,CAACb,QAAA,CAASa,OAAO,CAACC,MAAM,EAAE;MAChDd,QAAA,CAASa,OAAO,CAACE,WAAW,CAACH,OAAA,EAAST,GAAA;IACxC;IAEA,IAAIR,SAAA,CAAUkB,OAAO,EAAE;MACrBlB,SAAA,CAAUkB,OAAO,CAACG,aAAa,EAAED,WAAA,CAAYH,OAAA,EAAST,GAAA;IACxD;EACF,GACA,CAACR,SAAA,EAAWK,QAAA,EAAUG,GAAA,CAAI;EAG5B,MAAMc,eAAA,GAAkBpB,gBAAA,IAAqBG,QAAA,CAASa,OAAO,IAAI,CAACb,QAAA,CAASa,OAAO,CAACC,MAAM;EAEzF;;;;;;EAMAjC,SAAA,CAAU;IACR,IAAI,CAACoC,eAAA,IAAmB,CAACxB,UAAA,IAAc,CAACc,SAAA,EAAW;MACjD;IACF;IAEA,MAAMW,MAAA,GAASxC,oBAAA,CAAqB6B,SAAA,EAAW;IAE/C,IAAI,CAACW,MAAA,CAAOV,EAAE,EAAE;MACdU,MAAA,CAAOV,EAAE,GAAGA,EAAA;IACd;IAEAG,oBAAA,CAAqB;MACnBQ,IAAA,EAAM;MACNV,cAAA;MACAW,IAAA,EAAMF,MAAA;MACNG,6BAAA,EAA+Bf,gBAAA;MAC/BI,UAAA;MACAL,MAAA,EAAQA,MAAA,CAAOiB;IACjB;EACF,GAAG,CACDf,SAAA,EACAE,cAAA,EACAC,UAAA,EACAF,EAAA,EACAf,UAAA,EACAa,gBAAA,EACAD,MAAA,EACAY,eAAA,EACAlB,SAAA,EACAD,WAAA,EACAa,oBAAA,CACD;EAED;;;;;EAKA9B,SAAA,CAAU;IACR,IAAI,CAACoC,eAAA,IAAmB,CAACxB,UAAA,EAAY;MACnC;IACF;IAEAkB,oBAAA,CAAqB;MAAEQ,IAAA,EAAM;IAAyB;EACxD,GAAG,CAACb,gBAAA,EAAkBW,eAAA,EAAiBxB,UAAA,EAAYkB,oBAAA,CAAqB;EAExE,oBACEY,IAAA,CAAC;IACCC,SAAA,EAAW,CACTlC,SAAA,EACAO,gBAAA,IAAoB,GAAGP,SAAA,sBAA+B,EACtDM,UAAA,IAAc,GAAGN,SAAA,eAAwB,EACzCI,UAAA,IACEA,UAAA,KAAe,gBACfA,UAAA,KAAe,YACf,GAAGJ,SAAA,kBAA2B,CACjC,CACEmC,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;cAER,aAAAC,KAAA,CAAC;MAAIJ,SAAA,EAAW,GAAGlC,SAAA,WAAoB;8BACrCiC,IAAA,CAAClC,kBAAA;QAAoB,GAAGG;uBACxB+B,IAAA,CAAC;QAAIC,SAAA,EAAW,GAAGlC,SAAA,QAAiB;kBAClC,aAAAiC,IAAA,CAACnC,eAAA;oBACEc,kBAAA,iBACCqB,IAAA,CAACpC,YAAA;YACCqC,SAAA,EAAU;YACVhB,EAAA,EAAG;YACHqB,MAAA,EAAQA,CAAA;cACN5B,YAAA,CAAaE,GAAA;YACf;YACA2B,GAAA,EAAKnC,SAAA;YACLoC,GAAA,EAAK5B,GAAA;YACL6B,KAAA,EAAO;cACLC,SAAA,EAAW,OAAO7B,IAAA,KAAS,WAAW,SAASA,IAAA,IAAQ,GAAG8B;YAC5D;;;;;;AAQhB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["reduceFieldsToValues","React","useCallback","useEffect","useAllFormFields","useDocumentEvents","useDocumentInfo","useLivePreviewContext","useLocale","IframeLoader","DeviceContainer","LivePreviewToolbar","baseClass","LivePreviewWindow","props","appIsReady","breakpoint","iframeRef","isExpanded","isLivePreviewing","lastReadyAt","loadedURL","popupRef","setLoadedURL","shouldRenderIframe","url","zoom","locale","mostRecentUpdate","formState","id","collectionSlug","globalSlug","postMessageToTargets","message","current","closed","postMessage","contentWindow","hasActiveTarget","values","type","data","externallyUpdatedRelationship","code","_jsx","className","filter","Boolean","join","_jsxs","onLoad","ref","src","style","transform","undefined"],"sources":["../../../../src/elements/LivePreview/Window/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { reduceFieldsToValues } from 'payload/shared'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useAllFormFields } from '../../../forms/Form/context.js'\nimport { useDocumentEvents } from '../../../providers/DocumentEvents/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { IframeLoader } from '../../IframeLoader/index.js'\nimport { DeviceContainer } from '../Device/index.js'\nimport { LivePreviewToolbar } from '../Toolbar/index.js'\nimport './index.css'\n\nconst baseClass = 'live-preview-window'\n\nexport const LivePreviewWindow: React.FC<EditViewProps> = (props) => {\n  const {\n    appIsReady,\n    breakpoint,\n    iframeRef,\n    isExpanded,\n    isLivePreviewing,\n    lastReadyAt,\n    loadedURL,\n    popupRef,\n    setLoadedURL,\n    shouldRenderIframe,\n    url,\n    zoom,\n  } = useLivePreviewContext()\n\n  const locale = useLocale()\n\n  const { mostRecentUpdate } = useDocumentEvents()\n\n  const [formState] = useAllFormFields()\n  const { id, collectionSlug, globalSlug } = useDocumentInfo()\n\n  const postMessageToTargets = useCallback(\n    (message: object) => {\n      if (popupRef.current && !popupRef.current.closed) {\n        popupRef.current.postMessage(message, url)\n      }\n\n      if (iframeRef.current) {\n        iframeRef.current.contentWindow?.postMessage(message, url)\n      }\n    },\n    [iframeRef, popupRef, url],\n  )\n\n  const hasActiveTarget = isLivePreviewing || (popupRef.current && !popupRef.current.closed)\n\n  /**\n   * For client-side apps, send data through `window.postMessage`\n   * The preview could either be an iframe embedded on the page\n   * Or it could be a separate popup window\n   * Also fires when a preview signals ready (lastReadyAt) to sync initial state\n   */\n  useEffect(() => {\n    if (!hasActiveTarget || !appIsReady || !formState) {\n      return\n    }\n\n    const values = reduceFieldsToValues(formState, true)\n\n    if (!values.id) {\n      values.id = id\n    }\n\n    postMessageToTargets({\n      type: 'payload-live-preview',\n      collectionSlug,\n      data: values,\n      externallyUpdatedRelationship: mostRecentUpdate,\n      globalSlug,\n      locale: locale?.code,\n    })\n  }, [\n    formState,\n    collectionSlug,\n    globalSlug,\n    id,\n    appIsReady,\n    mostRecentUpdate,\n    locale,\n    hasActiveTarget,\n    loadedURL,\n    lastReadyAt,\n    postMessageToTargets,\n  ])\n\n  /**\n   * To support SSR, we transmit a `window.postMessage` event without a payload\n   * This is because the event will ultimately trigger a server-side roundtrip\n   * i.e., save, save draft, autosave, etc. will fire `router.refresh()`\n   */\n  useEffect(() => {\n    if (!hasActiveTarget || !appIsReady) {\n      return\n    }\n\n    postMessageToTargets({ type: 'payload-document-event' })\n  }, [mostRecentUpdate, hasActiveTarget, appIsReady, postMessageToTargets])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        isLivePreviewing && `${baseClass}--is-live-previewing`,\n        isExpanded && `${baseClass}--is-expanded`,\n        breakpoint &&\n          breakpoint !== 'responsive' &&\n          breakpoint !== 'custom' &&\n          `${baseClass}--has-breakpoint`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={`${baseClass}__wrapper`}>\n        <LivePreviewToolbar {...props} />\n        <div className={`${baseClass}__main`}>\n          <DeviceContainer>\n            {shouldRenderIframe && (\n              <IframeLoader\n                className=\"live-preview-iframe\"\n                id=\"live-preview-iframe\"\n                onLoad={() => {\n                  setLoadedURL(url)\n                }}\n                ref={iframeRef}\n                src={url}\n                style={{\n                  transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined,\n                }}\n              />\n            )}\n          </DeviceContainer>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Loading/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAA;AAMjF,OAAO,aAAa,CAAA;AAIpB,KAAK,mBAAmB,GAAG;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqBxD,CAAA;AAED,MAAM,MAAM,4BAA4B,GAAG;IACzC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,OAAO,CAAA;IACb,IAAI,CAAC,EAAE,mBAAmB,CAAA;CAC3B,CAAA;AACD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CA0BvE,CAAA;AAED,MAAM,MAAM,6BAA6B,GAAG;IAC1C,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;IACvC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,mBAAmB,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA0B5E,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Loading/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAA;AAMjF,OAAO,aAAa,CAAA;AAIpB,KAAK,mBAAmB,GAAG;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsBxD,CAAA;AAED,MAAM,MAAM,4BAA4B,GAAG;IACzC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,OAAO,CAAA;IACb,IAAI,CAAC,EAAE,mBAAmB,CAAA;CAC3B,CAAA;AACD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CA0BvE,CAAA;AAED,MAAM,MAAM,6BAA6B,GAAG;IAC1C,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;IACvC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,mBAAmB,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA0B5E,CAAA"}

package/dist/elements/Loading/index.js

@@ -16,6 +16,7 @@ export const LoadingOverlay = ({
   show = true
 }) => {
   return /*#__PURE__*/_jsx("div", {
+    "aria-hidden": !show,
     className: [baseClass, show ? `${baseClass}--entering` : `${baseClass}--exiting`, overlayType ? `${baseClass}--${overlayType}` : ''].filter(Boolean).join(' '),
     style: {
       animationDuration: animationDuration || '500ms'

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useLoadingOverlay","Spinner","useFormProcessing","useTranslation","baseClass","LoadingOverlay","animationDuration","overlayType","show","_jsx","className","filter","Boolean","join","style","size","LoadingOverlayToggle","t0","$","name","key","type","t1","loadingText","undefined","toggleLoadingOverlay","t2","t3","isLoading","useEffect","FormLoadingOverlayToggle","action","formIsLoading","loadingSuffix","isProcessing","i18n","t","labels","create","loading","update","t4","trim"],"sources":["../../../src/elements/Loading/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { LoadingOverlayTypes } from '../../elements/LoadingOverlay/types.js'\n\nimport { useLoadingOverlay } from '../../elements/LoadingOverlay/index.js'\nimport { Spinner } from '../../elements/Spinner/index.js'\nimport { useFormProcessing } from '../../forms/Form/context.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'loading-overlay'\n\ntype LoadingOverlayProps = {\n  animationDuration?: string\n  loadingText?: string\n  overlayType?: string\n  show?: boolean\n}\n\nexport const LoadingOverlay: React.FC<LoadingOverlayProps> = ({\n  animationDuration,\n  overlayType,\n  show = true,\n}) => {\n  return (\n    <div\n      className={[\n        baseClass,\n        show ? `${baseClass}--entering` : `${baseClass}--exiting`,\n        overlayType ? `${baseClass}--${overlayType}` : '',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        animationDuration: animationDuration || '500ms',\n      }}\n    >\n      <Spinner size=\"lg\" />\n    </div>\n  )\n}\n\nexport type UseLoadingOverlayToggleProps = {\n  loadingText?: string\n  name: string\n  show: boolean\n  type?: LoadingOverlayTypes\n}\nexport const LoadingOverlayToggle: React.FC<UseLoadingOverlayToggleProps> = ({\n  name: key,\n  type = 'fullscreen',\n  loadingText,\n  show,\n}) => {\n  const { toggleLoadingOverlay } = useLoadingOverlay()\n\n  React.useEffect(() => {\n    toggleLoadingOverlay({\n      type,\n      isLoading: show,\n      key,\n      loadingText: loadingText || undefined,\n    })\n\n    return () => {\n      toggleLoadingOverlay({\n        type,\n        isLoading: false,\n        key,\n      })\n    }\n  }, [show, toggleLoadingOverlay, key, type, loadingText])\n\n  return null\n}\n\nexport type FormLoadingOverlayToggleProps = {\n  action: 'create' | 'loading' | 'update'\n  formIsLoading?: boolean\n  loadingSuffix?: string\n  name: string\n  type?: LoadingOverlayTypes\n}\n\nexport const FormLoadingOverlayToggle: React.FC<FormLoadingOverlayToggleProps> = ({\n  name,\n  type = 'fullscreen',\n  action,\n  formIsLoading = false,\n  loadingSuffix,\n}) => {\n  const isProcessing = useFormProcessing()\n  const { i18n, t } = useTranslation()\n\n  const labels = {\n    create: t('general:creating'),\n    loading: t('general:loading'),\n    update: t('general:updating'),\n  }\n\n  return (\n    <LoadingOverlayToggle\n      loadingText={`${labels[action]} ${\n        loadingSuffix ? getTranslation(loadingSuffix, i18n) : ''\n      }`.trim()}\n      name={name}\n      show={formIsLoading || isProcessing}\n      type={type}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useLoadingOverlay","Spinner","useFormProcessing","useTranslation","baseClass","LoadingOverlay","animationDuration","overlayType","show","_jsx","className","filter","Boolean","join","style","size","LoadingOverlayToggle","t0","$","name","key","type","t1","loadingText","undefined","toggleLoadingOverlay","t2","t3","isLoading","useEffect","FormLoadingOverlayToggle","action","formIsLoading","loadingSuffix","isProcessing","i18n","t","labels","create","loading","update","t4","trim"],"sources":["../../../src/elements/Loading/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { LoadingOverlayTypes } from '../../elements/LoadingOverlay/types.js'\n\nimport { useLoadingOverlay } from '../../elements/LoadingOverlay/index.js'\nimport { Spinner } from '../../elements/Spinner/index.js'\nimport { useFormProcessing } from '../../forms/Form/context.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'loading-overlay'\n\ntype LoadingOverlayProps = {\n  animationDuration?: string\n  loadingText?: string\n  overlayType?: string\n  show?: boolean\n}\n\nexport const LoadingOverlay: React.FC<LoadingOverlayProps> = ({\n  animationDuration,\n  overlayType,\n  show = true,\n}) => {\n  return (\n    <div\n      aria-hidden={!show}\n      className={[\n        baseClass,\n        show ? `${baseClass}--entering` : `${baseClass}--exiting`,\n        overlayType ? `${baseClass}--${overlayType}` : '',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        animationDuration: animationDuration || '500ms',\n      }}\n    >\n      <Spinner size=\"lg\" />\n    </div>\n  )\n}\n\nexport type UseLoadingOverlayToggleProps = {\n  loadingText?: string\n  name: string\n  show: boolean\n  type?: LoadingOverlayTypes\n}\nexport const LoadingOverlayToggle: React.FC<UseLoadingOverlayToggleProps> = ({\n  name: key,\n  type = 'fullscreen',\n  loadingText,\n  show,\n}) => {\n  const { toggleLoadingOverlay } = useLoadingOverlay()\n\n  React.useEffect(() => {\n    toggleLoadingOverlay({\n      type,\n      isLoading: show,\n      key,\n      loadingText: loadingText || undefined,\n    })\n\n    return () => {\n      toggleLoadingOverlay({\n        type,\n        isLoading: false,\n        key,\n      })\n    }\n  }, [show, toggleLoadingOverlay, key, type, loadingText])\n\n  return null\n}\n\nexport type FormLoadingOverlayToggleProps = {\n  action: 'create' | 'loading' | 'update'\n  formIsLoading?: boolean\n  loadingSuffix?: string\n  name: string\n  type?: LoadingOverlayTypes\n}\n\nexport const FormLoadingOverlayToggle: React.FC<FormLoadingOverlayToggleProps> = ({\n  name,\n  type = 'fullscreen',\n  action,\n  formIsLoading = false,\n  loadingSuffix,\n}) => {\n  const isProcessing = useFormProcessing()\n  const { i18n, t } = useTranslation()\n\n  const labels = {\n    create: t('general:creating'),\n    loading: t('general:loading'),\n    update: t('general:updating'),\n  }\n\n  return (\n    <LoadingOverlayToggle\n      loadingText={`${labels[action]} ${\n        loadingSuffix ? getTranslation(loadingSuffix, i18n) : ''\n      }`.trim()}\n      name={name}\n      show={formIsLoading || isProcessing}\n      type={type}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,13 +1,10 @@
 import React from 'react';
+import type { PopupButtonRenderProps } from '../Popup/PopupTrigger/index.js';
 import './index.css';
 export declare const Localizer: React.FC<{
     className?: string;
     renderButton?: (props: {
-        active: boolean;
-        'aria-expanded': boolean;
-        'aria-haspopup': true;
-        onClick: React.MouseEventHandler;
-        onKeyDown: React.KeyboardEventHandler;
-    }) => React.ReactNode;
+        'aria-label': string;
+    } & PopupButtonRenderProps) => React.ReactNode;
 }>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Localizer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAWvC,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,MAAM,EAAE,OAAO,CAAA;QACf,eAAe,EAAE,OAAO,CAAA;QACxB,eAAe,EAAE,IAAI,CAAA;QACrB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;QAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;KACtC,KAAK,KAAK,CAAC,SAAS,CAAA;CACtB,CAqGA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Localizer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAW5E,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,GAAG,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAA;CAC7F,CAmHA,CAAA"}

package/dist/elements/Localizer/index.js

@@ -40,10 +40,12 @@ export const Localizer = props => {
     t
   } = useTranslation();
   const locale = useLocale();
-  if (localization) {
+  if (localization && locale) {
     const {
       locales
     } = localization;
+    const localeLabel = getTranslation(locale.label, i18n);
+    const localeAccessibleName = localeLabel === locale.code ? `${t("general:locale")}: ${locale.code}` : `${t("general:locale")}: ${localeLabel} (${locale.code})`;
     let t1;
     if ($[0] !== className) {
       t1 = [baseClass, className].filter(Boolean);
@@ -54,7 +56,7 @@ export const Localizer = props => {
     }
     const t2 = t1.join(" ");
     let t3;
-    if ($[2] !== i18n || $[3] !== locale || $[4] !== locales || $[5] !== router || $[6] !== setLocaleIsLoading || $[7] !== startRouteTransition) {
+    if ($[2] !== i18n || $[3] !== locale.code || $[4] !== locales || $[5] !== router || $[6] !== setLocaleIsLoading || $[7] !== startRouteTransition) {
       t3 = t4 => {
         const {
           close
@@ -64,7 +66,6 @@ export const Localizer = props => {
             const localeOptionLabel = getTranslation(localeOption.label, i18n);
             return _jsx(PopupList.RadioGroupItem, {
               active: locale.code === localeOption.code,
-              disabled: locale.code === localeOption.code,
               onClick: () => {
                 setLocaleIsLoading(true);
                 close();
@@ -98,7 +99,7 @@ export const Localizer = props => {
         });
       };
       $[2] = i18n;
-      $[3] = locale;
+      $[3] = locale.code;
       $[4] = locales;
       $[5] = router;
       $[6] = setLocaleIsLoading;
@@ -108,16 +109,22 @@ export const Localizer = props => {
       t3 = $[8];
     }
     let t4;
-    if ($[9] !== locale || $[10] !== renderButton || $[11] !== t) {
-      t4 = renderButton ?? (t5 => {
+    if ($[9] !== locale.code || $[10] !== localeAccessibleName || $[11] !== renderButton) {
+      t4 = buttonProps => {
+        const labeledButtonProps = {
+          ...buttonProps,
+          "aria-label": localeAccessibleName
+        };
+        if (renderButton) {
+          return renderButton(labeledButtonProps);
+        }
         const {
           active: _active,
           onClick,
           onKeyDown,
           ...ariaProps
-        } = t5;
+        } = labeledButtonProps;
         return _jsx(Button, {
-          "aria-label": t("general:locale"),
           buttonStyle: "secondary",
           extraButtonProps: {
             onKeyDown
@@ -135,10 +142,10 @@ export const Localizer = props => {
             })]
           })
         });
-      });
-      $[9] = locale;
-      $[10] = renderButton;
-      $[11] = t;
+      };
+      $[9] = locale.code;
+      $[10] = localeAccessibleName;
+      $[11] = renderButton;
       $[12] = t4;
     } else {
       t4 = $[12];
@@ -149,6 +156,7 @@ export const Localizer = props => {
         className: t2,
         children: _jsx(Popup, {
           horizontalAlign: "right",
+          popupType: "menu",
           render: t3,
           renderButton: t4,
           showScrollbar: true