@payloadcms/ui 3.0.0-canary.ff8c8fd → 3.0.0

package/dist/elements/Popup/index.scss

@@ -1,231 +1,250 @@
 @import '../../scss/styles.scss';
 
-.popup {
-  --popup-button-highlight: var(--theme-elevation-200);
-  --popup-bg: var(--theme-input-bg);
-  --popup-text: var(--theme-text);
-  --popup-caret-size: 10px;
-  --popup-x-padding: calc(var(--base) * 0.33);
-  --popup-padding: calc(var(--base) * 0.5);
-  position: relative;
-
-  &__trigger-wrap {
-    display: flex;
-    align-items: stretch;
-    height: 100%;
-  }
-
-  &__content {
-    position: absolute;
-    background: var(--popup-bg);
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    z-index: var(--z-popup);
-    max-width: calc(100vw - #{$baseline});
-    color: var(--popup-text);
-    border-radius: 4px;
-    padding-left: var(--popup-padding);
-    padding-right: var(--popup-padding);
-    min-width: var(--popup-width, auto);
-  }
-
-  &__hide-scrollbar {
-    overflow: hidden;
-  }
-
-  &__scroll-container {
-    overflow-y: auto;
-    white-space: nowrap;
-    width: calc(100% + var(--scrollbar-width));
-    padding-top: var(--popup-padding);
-    padding-bottom: var(--popup-padding);
-  }
-
-  &__scroll-content {
-    width: calc(100% - var(--scrollbar-width));
-  }
-
-  &--show-scrollbar {
-    .popup__scroll-container,
-    .popup__scroll-content {
-      width: 100%;
+@layer payload-default {
+  .popup {
+    --popup-button-highlight: var(--theme-elevation-200);
+    --popup-bg: var(--theme-input-bg);
+    --popup-text: var(--theme-text);
+    --popup-caret-size: 10px;
+    --popup-x-padding: calc(var(--base) * 0.33);
+    --popup-padding: calc(var(--base) * 0.5);
+    --button-size-offset: -8px;
+    position: relative;
+
+    &__trigger-wrap {
+      display: flex;
+      align-items: stretch;
+      height: 100%;
+    }
+
+    &__content {
+      position: absolute;
+      background: var(--popup-bg);
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      z-index: var(--z-popup);
+      max-width: calc(100vw - #{$baseline});
+      color: var(--popup-text);
+      border-radius: 4px;
+      padding-left: var(--popup-padding);
+      padding-right: var(--popup-padding);
+      min-width: var(--popup-width, auto);
+    }
+
+    &__hide-scrollbar {
+      overflow: hidden;
+    }
+
+    &__scroll-container {
+      overflow-y: auto;
+      white-space: nowrap;
+      width: calc(100% + var(--scrollbar-width));
+      padding-top: var(--popup-padding);
+      padding-bottom: var(--popup-padding);
+    }
+
+    &__scroll-content {
+      width: calc(100% - var(--scrollbar-width));
+    }
+
+    &--show-scrollbar {
+      .popup__scroll-container,
+      .popup__scroll-content {
+        width: 100%;
+      }
     }
-  }
 
-  &:focus,
-  &:active {
-    outline: none;
-  }
+    &:focus,
+    &:active {
+      outline: none;
+    }
 
-  ////////////////////////////////
-  // SIZE
-  ////////////////////////////////
+    ////////////////////////////////
+    // SIZE
+    ////////////////////////////////
 
-  &--size-small {
-    --popup-width: 100px;
-    .popup__content {
-      @include shadow-m;
+    &--size-small {
+      --popup-width: 100px;
+      .popup__content {
+        @include shadow-m;
+      }
     }
-  }
 
-  &--size-medium {
-    --popup-width: 150px;
-    .popup__content {
-      @include shadow-lg;
+    &--size-medium {
+      --popup-width: 150px;
+      .popup__content {
+        @include shadow-lg;
+      }
     }
-  }
 
-  &--size-large {
-    --popup-width: 200px;
-    .popup__content {
-      @include shadow-lg;
+    &--size-large {
+      --popup-width: 200px;
+      .popup__content {
+        @include shadow-lg;
+      }
     }
-  }
 
-  ////////////////////////////////
-  // HORIZONTAL ALIGNMENT
-  ////////////////////////////////
-  [dir='rtl'] &--h-align-left {
-    .popup__caret {
-      right: var(--popup-padding);
-      left: unset;
-    }
-  }
-  &--h-align-left {
-    .popup__caret {
-      left: var(--popup-padding);
-    }
-  }
-  &--h-align-center {
-    .popup__content {
-      left: 50%;
-      transform: translateX(-50%);
-    }
+    ////////////////////////////////
+    /// BUTTON SIZE
+    ////////////////////////////////
 
-    .popup__caret {
-      left: 50%;
-      transform: translateX(-50%);
+    &--button-size-small {
+      --button-size-offset: -8px;
     }
-  }
 
-  [dir='rtl'] &--h-align-right {
-    .popup__content {
-      right: unset;
-      left: 0;
+    &--button-size-medium {
+      --button-size-offset: -4px;
     }
 
-    .popup__caret {
-      right: unset;
-      left: var(--popup-padding);
+    &--button-size-large {
+      --button-size-offset: 0px;
     }
-  }
 
-  &--h-align-right {
-    .popup__content {
-      right: 0;
+    ////////////////////////////////
+    // HORIZONTAL ALIGNMENT
+    ////////////////////////////////
+    [dir='rtl'] &--h-align-left {
+      .popup__caret {
+        right: var(--popup-padding);
+        left: unset;
+      }
     }
-
-    .popup__caret {
-      right: var(--popup-padding);
+    &--h-align-left {
+      .popup__caret {
+        left: var(--popup-padding);
+      }
     }
-  }
-
-  ////////////////////////////////
-  // VERTICAL ALIGNMENT
-  ////////////////////////////////
-
-  &__caret {
-    position: absolute;
-    border: var(--popup-caret-size) solid transparent;
-  }
+    &--h-align-center {
+      .popup__content {
+        left: 50%;
+        transform: translateX(-50%);
+      }
 
-  &--v-align-top {
-    .popup__content {
-      @include shadow-lg;
-      bottom: calc(100% + var(--popup-caret-size));
+      .popup__caret {
+        left: 50%;
+        transform: translateX(-50%);
+      }
     }
 
-    .popup__caret {
-      top: calc(100% - 1px);
-      border-top-color: var(--popup-bg);
-    }
-  }
+    [dir='rtl'] &--h-align-right {
+      .popup__content {
+        right: unset;
+        left: 0;
+      }
 
-  &--v-align-bottom {
-    .popup__content {
-      @include shadow-lg-top;
-      top: calc(100% + var(--popup-caret-size));
+      .popup__caret {
+        right: unset;
+        left: var(--popup-padding);
+      }
     }
 
-    .popup__caret {
-      bottom: calc(100% - 1px);
-      border-bottom-color: var(--popup-bg);
+    &--h-align-right {
+      .popup__content {
+        right: var(--button-size-offset);
+      }
+
+      .popup__caret {
+        right: var(--popup-padding);
+      }
     }
-  }
 
-  ////////////////////////////////
-  // ACTIVE
-  ////////////////////////////////
+    ////////////////////////////////
+    // VERTICAL ALIGNMENT
+    ////////////////////////////////
 
-  &--active {
-    .popup__content {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: all;
+    &__caret {
+      position: absolute;
+      border: var(--popup-caret-size) solid transparent;
     }
-  }
-
-  @include mid-break {
-    --popup-padding: calc(var(--base) * 0.25);
 
-    &--h-align-center {
+    &--v-align-top {
       .popup__content {
-        left: 50%;
-        transform: translateX(-0%);
+        @include shadow-lg;
+        bottom: calc(100% + var(--popup-caret-size));
       }
 
       .popup__caret {
-        left: 50%;
-        transform: translateX(-0%);
+        top: calc(100% - 1px);
+        border-top-color: var(--popup-bg);
       }
     }
 
-    &--h-align-right {
+    &--v-align-bottom {
       .popup__content {
-        right: 0;
+        @include shadow-lg-top;
+        top: calc(100% + var(--popup-caret-size));
       }
 
       .popup__caret {
-        right: var(--popup-padding);
+        bottom: calc(100% - 1px);
+        border-bottom-color: var(--popup-bg);
       }
     }
 
-    &--force-h-align-left {
+    ////////////////////////////////
+    // ACTIVE
+    ////////////////////////////////
+
+    &--active {
       .popup__content {
-        left: 0;
-        right: unset;
-        transform: unset;
+        opacity: 1;
+        visibility: visible;
+        pointer-events: all;
       }
+    }
 
-      .popup__caret {
-        left: var(--popup-padding);
-        right: unset;
-        transform: unset;
+    @include mid-break {
+      --popup-padding: calc(var(--base) * 0.25);
+
+      &--h-align-center {
+        .popup__content {
+          left: 50%;
+          transform: translateX(-0%);
+        }
+
+        .popup__caret {
+          left: 50%;
+          transform: translateX(-0%);
+        }
       }
-    }
 
-    &--force-h-align-right {
-      .popup__content {
-        right: 0;
-        left: unset;
-        transform: unset;
+      &--h-align-right {
+        .popup__content {
+          right: 0;
+        }
+
+        .popup__caret {
+          right: var(--popup-padding);
+        }
       }
 
-      .popup__caret {
-        right: var(--popup-padding);
-        left: unset;
-        transform: unset;
+      &--force-h-align-left {
+        .popup__content {
+          left: 0;
+          right: unset;
+          transform: unset;
+        }
+
+        .popup__caret {
+          left: var(--popup-padding);
+          right: unset;
+          transform: unset;
+        }
+      }
+
+      &--force-h-align-right {
+        .popup__content {
+          right: 0;
+          left: unset;
+          transform: unset;
+        }
+
+        .popup__caret {
+          right: var(--popup-padding);
+          left: unset;
+          transform: unset;
+        }
       }
     }
   }

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

@@ -1,8 +1,3 @@
-import type { MappedComponent } from 'payload';
 import React from 'react';
-type Props = {
-    CustomComponent?: MappedComponent;
-};
-export declare const PreviewButton: React.FC<Props>;
-export {};
+export declare const PreviewButton: React.FC;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,OAAO,KAAK,MAAM,OAAO,CAAA;AA8BzB,KAAK,KAAK,GAAG;IACX,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAMzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAoBjC,CAAA"}

package/dist/elements/PreviewButton/index.js

@@ -3,11 +3,10 @@
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 import { Button } from '../Button/index.js';
 import { usePreviewURL } from './usePreviewURL.js';
 const baseClass = 'preview-btn';
-const DefaultPreviewButton = () => {
+export const PreviewButton = () => {
   const $ = _c(5);
   const {
     generatePreviewURL,
@@ -42,14 +41,4 @@ const DefaultPreviewButton = () => {
   }
   return t1;
 };
-export const PreviewButton = ({
-  CustomComponent
-}) => {
-  if (CustomComponent) {
-    return /*#__PURE__*/_jsx(RenderComponent, {
-      mappedComponent: CustomComponent
-    });
-  }
-  return /*#__PURE__*/_jsx(DefaultPreviewButton, {});
-};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","RenderComponent","Button","usePreviewURL","baseClass","DefaultPreviewButton","$","generatePreviewURL","label","t0","openPreviewWindow","t1","_jsx","buttonStyle","className","icon","iconPosition","onClick","size","children","PreviewButton","CustomComponent","mappedComponent"],"sources":["../../../src/elements/PreviewButton/index.tsx"],"sourcesContent":["'use client'\nimport type { MappedComponent } from 'payload'\n\nimport React from 'react'\n\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport { Button } from '../Button/index.js'\nimport { usePreviewURL } from './usePreviewURL.js'\n\nconst baseClass = 'preview-btn'\n\nconst DefaultPreviewButton: React.FC = () => {\n  const { generatePreviewURL, label } = usePreviewURL()\n\n  return (\n    <Button\n      buttonStyle=\"secondary\"\n      className={baseClass}\n      icon={'link'}\n      iconPosition=\"left\"\n      // disabled={disabled}\n      onClick={() =>\n        generatePreviewURL({\n          openPreviewWindow: true,\n        })\n      }\n      size=\"medium\"\n    >\n      {label}\n    </Button>\n  )\n}\n\ntype Props = {\n  CustomComponent?: MappedComponent\n}\n\nexport const PreviewButton: React.FC<Props> = ({ CustomComponent }) => {\n  if (CustomComponent) {\n    return <RenderComponent mappedComponent={CustomComponent} />\n  }\n\n  return <DefaultPreviewButton />\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,eAAe,QAAQ;AAChC,SAASC,MAAM,QAAQ;AACvB,SAASC,aAAa,QAAQ;AAE9B,MAAMC,SAAA,GAAY;AAElB,MAAMC,oBAAA,GAAiCA,CAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACrC;IAAAQ,kBAAA;IAAAC;EAAA,IAAsCL,aAAA;EAAA,IAAAM,EAAA;EAAA,IAAAH,CAAA,QAAAC,kBAAA;IASzBE,EAAA,GAAAA,CAAA,KACPF,kBAAA;MAAAG,iBAAA;IAAA,CAEA;IAAAJ,CAAA,MAAAC,kBAAA;IAAAD,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAAA,IAAAK,EAAA;EAAA,IAAAL,CAAA,QAAAG,EAAA,IAAAH,CAAA,QAAAE,KAAA;IATJG,EAAA,GAAAC,IAAA,CAAAV,MAAA;MAAAW,WAAA,EACc;MAAAC,SAAA,EAAAV,SAAA;MAAAW,IAAA,EAEN;MAAAC,YAAA,EACO;MAAAC,OAAA,EAEJR,EAGP;MAAAS,IAAA,EAEG;MAAAC,QAAA,EAEJX;IAAA,C;;;;;;;SAbHG,E;CAgBJ;AAMA,OAAO,MAAMS,aAAA,GAAiCA,CAAC;EAAEC;AAAe,CAAE;EAChE,IAAIA,eAAA,EAAiB;IACnB,oBAAOT,IAAA,CAACX,eAAA;MAAgBqB,eAAA,EAAiBD;;EAC3C;EAEA,oBAAOT,IAAA,CAACP,oBAAA;AACV","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","Button","usePreviewURL","baseClass","PreviewButton","$","generatePreviewURL","label","t0","openPreviewWindow","t1","_jsx","buttonStyle","className","icon","iconPosition","onClick","size","children"],"sources":["../../../src/elements/PreviewButton/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../Button/index.js'\nimport { usePreviewURL } from './usePreviewURL.js'\n\nconst baseClass = 'preview-btn'\n\nexport const PreviewButton: React.FC = () => {\n  const { generatePreviewURL, label } = usePreviewURL()\n\n  return (\n    <Button\n      buttonStyle=\"secondary\"\n      className={baseClass}\n      icon={'link'}\n      iconPosition=\"left\"\n      // disabled={disabled}\n      onClick={() =>\n        generatePreviewURL({\n          openPreviewWindow: true,\n        })\n      }\n      size=\"medium\"\n    >\n      {label}\n    </Button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,MAAM,QAAQ;AACvB,SAASC,aAAa,QAAQ;AAE9B,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAA0BA,CAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACrC;IAAAO,kBAAA;IAAAC;EAAA,IAAsCL,aAAA;EAAA,IAAAM,EAAA;EAAA,IAAAH,CAAA,QAAAC,kBAAA;IASzBE,EAAA,GAAAA,CAAA,KACPF,kBAAA;MAAAG,iBAAA;IAAA,CAEA;IAAAJ,CAAA,MAAAC,kBAAA;IAAAD,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAAA,IAAAK,EAAA;EAAA,IAAAL,CAAA,QAAAG,EAAA,IAAAH,CAAA,QAAAE,KAAA;IATJG,EAAA,GAAAC,IAAA,CAAAV,MAAA;MAAAW,WAAA,EACc;MAAAC,SAAA,EAAAV,SAAA;MAAAW,IAAA,EAEN;MAAAC,YAAA,EACO;MAAAC,OAAA,EAEJR,EAGP;MAAAS,IAAA,EAEG;MAAAC,QAAA,EAEJX;IAAA,C;;;;;;;SAbHG,E;CAgBJ","ignoreList":[]}

package/dist/elements/PreviewButton/usePreviewURL.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePreviewURL.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,aAAa,QAAO;IAC/B,kBAAkB,EAAE,CAAC,EAAE,iBAAiB,EAAE,EAAE;QAAE,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACpF,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;CA0DnB,CAAA"}
+{"version":3,"file":"usePreviewURL.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,aAAa,QAAO;IAC/B,kBAAkB,EAAE,CAAC,EAAE,iBAAiB,EAAE,EAAE;QAAE,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACpF,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;CA8EnB,CAAA"}

package/dist/elements/PreviewButton/usePreviewURL.js

@@ -1,5 +1,6 @@
 'use client';
 
+import * as qs from 'qs-esm';
 import { useCallback, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { useConfig } from '../../providers/Config/index.js';
@@ -10,13 +11,15 @@ export const usePreviewURL = () => {
   const {
     id,
     collectionSlug,
-    globalSlug
+    globalSlug,
+    versionCount
   } = useDocumentInfo();
   const [isLoading, setIsLoading] = useState(false);
   const [previewURL, setPreviewURL] = useState('');
   const {
     code: locale
   } = useLocale();
+  const hasVersions = versionCount > 0;
   const {
     config: {
       routes: {
@@ -35,28 +38,45 @@ export const usePreviewURL = () => {
   const generatePreviewURL = useCallback(async ({
     openPreviewWindow = false
   }) => {
-    if (isGeneratingPreviewURL.current) return;
+    if (isGeneratingPreviewURL.current) {
+      return;
+    }
     isGeneratingPreviewURL.current = true;
     try {
       setIsLoading(true);
       let url = `${serverURL}${api}`;
-      if (collectionSlug) url = `${url}/${collectionSlug}/${id}/preview`;
-      if (globalSlug) url = `${url}/globals/${globalSlug}/preview`;
-      const res = await fetch(`${url}${locale ? `?locale=${locale}` : ''}`);
-      if (!res.ok) throw new Error();
+      if (collectionSlug) {
+        url = `${url}/${collectionSlug}/${id}/preview`;
+      }
+      if (globalSlug) {
+        url = `${url}/globals/${globalSlug}/preview`;
+      }
+      const params = {
+        draft: hasVersions ? 'true' : 'false',
+        locale: locale || undefined
+      };
+      const res = await fetch(`${url}?${qs.stringify(params)}`);
+      if (!res.ok) {
+        throw new Error();
+      }
       const newPreviewURL = await res.json();
-      if (!newPreviewURL) throw new Error();
+      if (!newPreviewURL) {
+        throw new Error();
+      }
       setPreviewURL(newPreviewURL);
       setIsLoading(false);
       isGeneratingPreviewURL.current = false;
-      if (openPreviewWindow) window.open(newPreviewURL, '_blank');
+      if (openPreviewWindow) {
+        window.open(newPreviewURL, '_blank');
+      }
     } catch (err) {
       setIsLoading(false);
       isGeneratingPreviewURL.current = false;
       toast.error(t('error:previewing'));
     }
-  }, [serverURL, api, collectionSlug, globalSlug, id, locale, t]);
+  }, [serverURL, api, collectionSlug, globalSlug, hasVersions, locale, id, t]);
   return {
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
     generatePreviewURL,
     isLoading,
     label: isLoading ? t('general:loading') : t('version:preview'),

package/dist/elements/PreviewButton/usePreviewURL.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePreviewURL.js","names":["useCallback","useRef","useState","toast","useConfig","useDocumentInfo","useLocale","useTranslation","usePreviewURL","id","collectionSlug","globalSlug","isLoading","setIsLoading","previewURL","setPreviewURL","code","locale","config","routes","api","serverURL","t","isGeneratingPreviewURL","generatePreviewURL","openPreviewWindow","current","url","res","fetch","ok","Error","newPreviewURL","json","window","open","err","error","label"],"sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"sourcesContent":["'use client'\nimport { useCallback, useRef, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport const usePreviewURL = (): {\n  generatePreviewURL: ({ openPreviewWindow }: { openPreviewWindow?: boolean }) => void\n  isLoading: boolean\n  label: string\n  previewURL: string\n} => {\n  const { id, collectionSlug, globalSlug } = useDocumentInfo()\n\n  const [isLoading, setIsLoading] = useState(false)\n  const [previewURL, setPreviewURL] = useState('')\n  const { code: locale } = useLocale()\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const { t } = useTranslation()\n\n  const isGeneratingPreviewURL = useRef(false)\n\n  // we need to regenerate the preview URL every time the button is clicked\n  // to do this we need to fetch the document data fresh from the API\n  // this will ensure the latest data is used when generating the preview URL\n  const generatePreviewURL = useCallback(\n    async ({ openPreviewWindow = false }) => {\n      if (isGeneratingPreviewURL.current) return\n      isGeneratingPreviewURL.current = true\n\n      try {\n        setIsLoading(true)\n\n        let url = `${serverURL}${api}`\n        if (collectionSlug) url = `${url}/${collectionSlug}/${id}/preview`\n        if (globalSlug) url = `${url}/globals/${globalSlug}/preview`\n\n        const res = await fetch(`${url}${locale ? `?locale=${locale}` : ''}`)\n\n        if (!res.ok) throw new Error()\n        const newPreviewURL = await res.json()\n        if (!newPreviewURL) throw new Error()\n        setPreviewURL(newPreviewURL)\n        setIsLoading(false)\n        isGeneratingPreviewURL.current = false\n        if (openPreviewWindow) window.open(newPreviewURL, '_blank')\n      } catch (err) {\n        setIsLoading(false)\n        isGeneratingPreviewURL.current = false\n        toast.error(t('error:previewing'))\n      }\n    },\n    [serverURL, api, collectionSlug, globalSlug, id, locale, t],\n  )\n\n  return {\n    generatePreviewURL,\n    isLoading,\n    label: isLoading ? t('general:loading') : t('version:preview'),\n    previewURL,\n  }\n}\n"],"mappings":"AAAA;;AACA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAC9C,SAASC,KAAK,QAAQ;AAEtB,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAE/B,OAAO,MAAMC,aAAA,GAAgBA,CAAA;EAM3B,MAAM;IAAEC,EAAE;IAAEC,cAAc;IAAEC;EAAU,CAAE,GAAGN,eAAA;EAE3C,MAAM,CAACO,SAAA,EAAWC,YAAA,CAAa,GAAGX,QAAA,CAAS;EAC3C,MAAM,CAACY,UAAA,EAAYC,aAAA,CAAc,GAAGb,QAAA,CAAS;EAC7C,MAAM;IAAEc,IAAA,EAAMC;EAAM,CAAE,GAAGX,SAAA;EAEzB,MAAM;IACJY,MAAA,EAAQ;MACNC,MAAA,EAAQ;QAAEC;MAAG,CAAE;MACfC;IAAS;EACV,CACF,GAAGjB,SAAA;EAEJ,MAAM;IAAEkB;EAAC,CAAE,GAAGf,cAAA;EAEd,MAAMgB,sBAAA,GAAyBtB,MAAA,CAAO;EAEtC;EACA;EACA;EACA,MAAMuB,kBAAA,GAAqBxB,WAAA,CACzB,OAAO;IAAEyB,iBAAA,GAAoB;EAAK,CAAE;IAClC,IAAIF,sBAAA,CAAuBG,OAAO,EAAE;IACpCH,sBAAA,CAAuBG,OAAO,GAAG;IAEjC,IAAI;MACFb,YAAA,CAAa;MAEb,IAAIc,GAAA,GAAM,GAAGN,SAAA,GAAYD,GAAA,EAAK;MAC9B,IAAIV,cAAA,EAAgBiB,GAAA,GAAM,GAAGA,GAAA,IAAOjB,cAAA,IAAkBD,EAAA,UAAY;MAClE,IAAIE,UAAA,EAAYgB,GAAA,GAAM,GAAGA,GAAA,YAAehB,UAAA,UAAoB;MAE5D,MAAMiB,GAAA,GAAM,MAAMC,KAAA,CAAM,GAAGF,GAAA,GAAMV,MAAA,GAAS,WAAWA,MAAA,EAAQ,GAAG,IAAI;MAEpE,IAAI,CAACW,GAAA,CAAIE,EAAE,EAAE,MAAM,IAAIC,KAAA;MACvB,MAAMC,aAAA,GAAgB,MAAMJ,GAAA,CAAIK,IAAI;MACpC,IAAI,CAACD,aAAA,EAAe,MAAM,IAAID,KAAA;MAC9BhB,aAAA,CAAciB,aAAA;MACdnB,YAAA,CAAa;MACbU,sBAAA,CAAuBG,OAAO,GAAG;MACjC,IAAID,iBAAA,EAAmBS,MAAA,CAAOC,IAAI,CAACH,aAAA,EAAe;IACpD,EAAE,OAAOI,GAAA,EAAK;MACZvB,YAAA,CAAa;MACbU,sBAAA,CAAuBG,OAAO,GAAG;MACjCvB,KAAA,CAAMkC,KAAK,CAACf,CAAA,CAAE;IAChB;EACF,GACA,CAACD,SAAA,EAAWD,GAAA,EAAKV,cAAA,EAAgBC,UAAA,EAAYF,EAAA,EAAIQ,MAAA,EAAQK,CAAA,CAAE;EAG7D,OAAO;IACLE,kBAAA;IACAZ,SAAA;IACA0B,KAAA,EAAO1B,SAAA,GAAYU,CAAA,CAAE,qBAAqBA,CAAA,CAAE;IAC5CR;EACF;AACF","ignoreList":[]}
+{"version":3,"file":"usePreviewURL.js","names":["qs","useCallback","useRef","useState","toast","useConfig","useDocumentInfo","useLocale","useTranslation","usePreviewURL","id","collectionSlug","globalSlug","versionCount","isLoading","setIsLoading","previewURL","setPreviewURL","code","locale","hasVersions","config","routes","api","serverURL","t","isGeneratingPreviewURL","generatePreviewURL","openPreviewWindow","current","url","params","draft","undefined","res","fetch","stringify","ok","Error","newPreviewURL","json","window","open","err","error","label"],"sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"sourcesContent":["'use client'\nimport * as qs from 'qs-esm'\nimport { useCallback, useRef, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport const usePreviewURL = (): {\n  generatePreviewURL: ({ openPreviewWindow }: { openPreviewWindow?: boolean }) => void\n  isLoading: boolean\n  label: string\n  previewURL: string\n} => {\n  const { id, collectionSlug, globalSlug, versionCount } = useDocumentInfo()\n\n  const [isLoading, setIsLoading] = useState(false)\n  const [previewURL, setPreviewURL] = useState('')\n  const { code: locale } = useLocale()\n\n  const hasVersions = versionCount > 0\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const { t } = useTranslation()\n\n  const isGeneratingPreviewURL = useRef(false)\n\n  // we need to regenerate the preview URL every time the button is clicked\n  // to do this we need to fetch the document data fresh from the API\n  // this will ensure the latest data is used when generating the preview URL\n  const generatePreviewURL = useCallback(\n    async ({ openPreviewWindow = false }) => {\n      if (isGeneratingPreviewURL.current) {\n        return\n      }\n      isGeneratingPreviewURL.current = true\n\n      try {\n        setIsLoading(true)\n\n        let url = `${serverURL}${api}`\n        if (collectionSlug) {\n          url = `${url}/${collectionSlug}/${id}/preview`\n        }\n        if (globalSlug) {\n          url = `${url}/globals/${globalSlug}/preview`\n        }\n\n        const params = {\n          draft: hasVersions ? 'true' : 'false',\n          locale: locale || undefined,\n        }\n\n        const res = await fetch(`${url}?${qs.stringify(params)}`)\n\n        if (!res.ok) {\n          throw new Error()\n        }\n        const newPreviewURL = await res.json()\n        if (!newPreviewURL) {\n          throw new Error()\n        }\n        setPreviewURL(newPreviewURL)\n        setIsLoading(false)\n        isGeneratingPreviewURL.current = false\n        if (openPreviewWindow) {\n          window.open(newPreviewURL, '_blank')\n        }\n      } catch (err) {\n        setIsLoading(false)\n        isGeneratingPreviewURL.current = false\n        toast.error(t('error:previewing'))\n      }\n    },\n    [serverURL, api, collectionSlug, globalSlug, hasVersions, locale, id, t],\n  )\n\n  return {\n    // eslint-disable-next-line @typescript-eslint/no-misused-promises\n    generatePreviewURL,\n    isLoading,\n    label: isLoading ? t('general:loading') : t('version:preview'),\n    previewURL,\n  }\n}\n"],"mappings":"AAAA;;AACA,YAAYA,EAAA,MAAQ;AACpB,SAASC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAC9C,SAASC,KAAK,QAAQ;AAEtB,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAE/B,OAAO,MAAMC,aAAA,GAAgBA,CAAA;EAM3B,MAAM;IAAEC,EAAE;IAAEC,cAAc;IAAEC,UAAU;IAAEC;EAAY,CAAE,GAAGP,eAAA;EAEzD,MAAM,CAACQ,SAAA,EAAWC,YAAA,CAAa,GAAGZ,QAAA,CAAS;EAC3C,MAAM,CAACa,UAAA,EAAYC,aAAA,CAAc,GAAGd,QAAA,CAAS;EAC7C,MAAM;IAAEe,IAAA,EAAMC;EAAM,CAAE,GAAGZ,SAAA;EAEzB,MAAMa,WAAA,GAAcP,YAAA,GAAe;EAEnC,MAAM;IACJQ,MAAA,EAAQ;MACNC,MAAA,EAAQ;QAAEC;MAAG,CAAE;MACfC;IAAS;EACV,CACF,GAAGnB,SAAA;EAEJ,MAAM;IAAEoB;EAAC,CAAE,GAAGjB,cAAA;EAEd,MAAMkB,sBAAA,GAAyBxB,MAAA,CAAO;EAEtC;EACA;EACA;EACA,MAAMyB,kBAAA,GAAqB1B,WAAA,CACzB,OAAO;IAAE2B,iBAAA,GAAoB;EAAK,CAAE;IAClC,IAAIF,sBAAA,CAAuBG,OAAO,EAAE;MAClC;IACF;IACAH,sBAAA,CAAuBG,OAAO,GAAG;IAEjC,IAAI;MACFd,YAAA,CAAa;MAEb,IAAIe,GAAA,GAAM,GAAGN,SAAA,GAAYD,GAAA,EAAK;MAC9B,IAAIZ,cAAA,EAAgB;QAClBmB,GAAA,GAAM,GAAGA,GAAA,IAAOnB,cAAA,IAAkBD,EAAA,UAAY;MAChD;MACA,IAAIE,UAAA,EAAY;QACdkB,GAAA,GAAM,GAAGA,GAAA,YAAelB,UAAA,UAAoB;MAC9C;MAEA,MAAMmB,MAAA,GAAS;QACbC,KAAA,EAAOZ,WAAA,GAAc,SAAS;QAC9BD,MAAA,EAAQA,MAAA,IAAUc;MACpB;MAEA,MAAMC,GAAA,GAAM,MAAMC,KAAA,CAAM,GAAGL,GAAA,IAAO9B,EAAA,CAAGoC,SAAS,CAACL,MAAA,GAAS;MAExD,IAAI,CAACG,GAAA,CAAIG,EAAE,EAAE;QACX,MAAM,IAAIC,KAAA;MACZ;MACA,MAAMC,aAAA,GAAgB,MAAML,GAAA,CAAIM,IAAI;MACpC,IAAI,CAACD,aAAA,EAAe;QAClB,MAAM,IAAID,KAAA;MACZ;MACArB,aAAA,CAAcsB,aAAA;MACdxB,YAAA,CAAa;MACbW,sBAAA,CAAuBG,OAAO,GAAG;MACjC,IAAID,iBAAA,EAAmB;QACrBa,MAAA,CAAOC,IAAI,CAACH,aAAA,EAAe;MAC7B;IACF,EAAE,OAAOI,GAAA,EAAK;MACZ5B,YAAA,CAAa;MACbW,sBAAA,CAAuBG,OAAO,GAAG;MACjCzB,KAAA,CAAMwC,KAAK,CAACnB,CAAA,CAAE;IAChB;EACF,GACA,CAACD,SAAA,EAAWD,GAAA,EAAKZ,cAAA,EAAgBC,UAAA,EAAYQ,WAAA,EAAaD,MAAA,EAAQT,EAAA,EAAIe,CAAA,CAAE;EAG1E,OAAO;IACL;IACAE,kBAAA;IACAb,SAAA;IACA+B,KAAA,EAAO/B,SAAA,GAAYW,CAAA,CAAE,qBAAqBA,CAAA,CAAE;IAC5CT;EACF;AACF","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewSizes/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,yBAAyB,EAAyB,MAAM,SAAS,CAAA;AAE/F,OAAO,KAAuC,MAAM,OAAO,CAAA;AAG3D,OAAO,cAAc,CAAA;AAIrB,KAAK,QAAQ,GAAG;IACd,GAAG,EAAE,MAAM,CAAA;CACZ,GAAG,QAAQ,CAAA;AACZ,KAAK,iBAAiB,GAAG;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAA;CACxB,CAAA;AAsDD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,iBAAiB,CAAA;KAC1B,GAAG,IAAI,CAAA;IACR,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4EpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewSizes/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,yBAAyB,EAAyB,MAAM,SAAS,CAAA;AAE/F,OAAO,KAAuC,MAAM,OAAO,CAAA;AAG3D,OAAO,cAAc,CAAA;AAIrB,KAAK,QAAQ,GAAG;IACd,GAAG,EAAE,MAAM,CAAA;CACZ,GAAG,QAAQ,CAAA;AACZ,KAAK,iBAAiB,GAAG;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAA;CACxB,CAAA;AA4DD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,iBAAiB,CAAA;KAC1B,GAAG,IAAI,CAAA;IACR,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgFpD,CAAA"}

package/dist/elements/PreviewSizes/index.js

@@ -6,7 +6,9 @@ import { FileMeta } from '../FileDetails/FileMeta/index.js';
 import './index.scss';
 const baseClass = 'preview-sizes';
 const sortSizes = (sizes, imageSizes) => {
-  if (!imageSizes || imageSizes.length === 0) return sizes;
+  if (!imageSizes || imageSizes.length === 0) {
+    return sizes;
+  }
   const orderedSizes = {};
   imageSizes.forEach(({
     name
@@ -28,8 +30,12 @@ const PreviewSizeCard = ({
     className: [`${baseClass}__sizeOption`, active && `${baseClass}--selected`].filter(Boolean).join(' '),
     onClick: typeof onClick === 'function' ? onClick : undefined,
     onKeyDown: e => {
-      if (typeof onClick !== 'function') return;
-      if (e.key === 'Enter') onClick();
+      if (typeof onClick !== 'function') {
+        return;
+      }
+      if (e.key === 'Enter') {
+        onClick();
+      }
     },
     role: "button",
     tabIndex: 0,
@@ -64,8 +70,12 @@ export const PreviewSizes = ({
   const [orderedSizes, setOrderedSizes] = useState(() => sortSizes(sizes, imageSizes));
   const [selectedSize, setSelectedSize] = useState(null);
   const generateImageUrl = doc_0 => {
-    if (!doc_0.filename) return null;
-    if (doc_0.url) return `${doc_0.url}${imageCacheTag ? `?${imageCacheTag}` : ''}`;
+    if (!doc_0.filename) {
+      return null;
+    }
+    if (doc_0.url) {
+      return `${doc_0.url}${imageCacheTag ? `?${imageCacheTag}` : ''}`;
+    }
   };
   useEffect(() => {
     setOrderedSizes(sortSizes(sizes, imageSizes));