@payloadcms/ui 3.0.0-canary.c696728 → 3.0.0-canary.c96fa61

package/dist/elements/Popup/index.scss

@@ -1,216 +1,147 @@
 @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);
-  --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));
-  }
+@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;
 
-  &--show-scrollbar {
-    .popup__scroll-container,
-    .popup__scroll-content {
-      width: 100%;
+    &__trigger-wrap {
+      display: flex;
+      align-items: stretch;
+      height: 100%;
     }
-  }
-
-  &:focus,
-  &:active {
-    outline: none;
-  }
-
-  ////////////////////////////////
-  // SIZE
-  ////////////////////////////////
 
-  &--size-small {
-    --popup-width: 100px;
-    .popup__content {
-      @include shadow-m;
+    &__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);
     }
-  }
 
-  &--size-medium {
-    --popup-width: 150px;
-    .popup__content {
-      @include shadow-lg;
+    &__hide-scrollbar {
+      overflow: hidden;
     }
-  }
 
-  &--size-large {
-    --popup-width: 200px;
-    .popup__content {
-      @include shadow-lg;
+    &__scroll-container {
+      overflow-y: auto;
+      white-space: nowrap;
+      width: calc(100% + var(--scrollbar-width));
+      padding-top: var(--popup-padding);
+      padding-bottom: var(--popup-padding);
     }
-  }
-
-  ////////////////////////////////
-  /// BUTTON SIZE
-  ////////////////////////////////
 
-  &--button-size-small {
-    --button-size-offset: -8px;
-  }
-
-  &--button-size-medium {
-    --button-size-offset: -4px;
-  }
-
-  &--button-size-large {
-    --button-size-offset: 0px;
-  }
-
-  ////////////////////////////////
-  // 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%);
+    &__scroll-content {
+      width: calc(100% - var(--scrollbar-width));
     }
 
-    .popup__caret {
-      left: 50%;
-      transform: translateX(-50%);
+    &--show-scrollbar {
+      .popup__scroll-container,
+      .popup__scroll-content {
+        width: 100%;
+      }
     }
-  }
 
-  [dir='rtl'] &--h-align-right {
-    .popup__content {
-      right: unset;
-      left: 0;
+    &:focus,
+    &:active {
+      outline: none;
     }
 
-    .popup__caret {
-      right: unset;
-      left: var(--popup-padding);
-    }
-  }
+    ////////////////////////////////
+    // SIZE
+    ////////////////////////////////
 
-  &--h-align-right {
-    .popup__content {
-      right: var(--button-size-offset);
+    &--size-small {
+      --popup-width: 100px;
+      .popup__content {
+        @include shadow-m;
+      }
     }
 
-    .popup__caret {
-      right: var(--popup-padding);
+    &--size-medium {
+      --popup-width: 150px;
+      .popup__content {
+        @include shadow-lg;
+      }
     }
-  }
 
-  ////////////////////////////////
-  // VERTICAL ALIGNMENT
-  ////////////////////////////////
+    &--size-large {
+      --popup-width: 200px;
+      .popup__content {
+        @include shadow-lg;
+      }
+    }
 
-  &__caret {
-    position: absolute;
-    border: var(--popup-caret-size) solid transparent;
-  }
+    ////////////////////////////////
+    /// BUTTON SIZE
+    ////////////////////////////////
 
-  &--v-align-top {
-    .popup__content {
-      @include shadow-lg;
-      bottom: calc(100% + var(--popup-caret-size));
+    &--button-size-small {
+      --button-size-offset: -8px;
     }
 
-    .popup__caret {
-      top: calc(100% - 1px);
-      border-top-color: var(--popup-bg);
+    &--button-size-medium {
+      --button-size-offset: -4px;
     }
-  }
 
-  &--v-align-bottom {
-    .popup__content {
-      @include shadow-lg-top;
-      top: calc(100% + var(--popup-caret-size));
+    &--button-size-large {
+      --button-size-offset: 0px;
     }
 
-    .popup__caret {
-      bottom: calc(100% - 1px);
-      border-bottom-color: var(--popup-bg);
+    ////////////////////////////////
+    // HORIZONTAL ALIGNMENT
+    ////////////////////////////////
+    [dir='rtl'] &--h-align-left {
+      .popup__caret {
+        right: var(--popup-padding);
+        left: unset;
+      }
     }
-  }
-
-  ////////////////////////////////
-  // ACTIVE
-  ////////////////////////////////
-
-  &--active {
-    .popup__content {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: all;
+    &--h-align-left {
+      .popup__caret {
+        left: var(--popup-padding);
+      }
     }
-  }
-
-  @include mid-break {
-    --popup-padding: calc(var(--base) * 0.25);
-
     &--h-align-center {
       .popup__content {
         left: 50%;
-        transform: translateX(-0%);
+        transform: translateX(-50%);
       }
 
       .popup__caret {
         left: 50%;
-        transform: translateX(-0%);
+        transform: translateX(-50%);
+      }
+    }
+
+    [dir='rtl'] &--h-align-right {
+      .popup__content {
+        right: unset;
+        left: 0;
+      }
+
+      .popup__caret {
+        right: unset;
+        left: var(--popup-padding);
       }
     }
 
     &--h-align-right {
       .popup__content {
-        right: 0;
+        right: var(--button-size-offset);
       }
 
       .popup__caret {
@@ -218,31 +149,102 @@
       }
     }
 
-    &--force-h-align-left {
+    ////////////////////////////////
+    // VERTICAL ALIGNMENT
+    ////////////////////////////////
+
+    &__caret {
+      position: absolute;
+      border: var(--popup-caret-size) solid transparent;
+    }
+
+    &--v-align-top {
       .popup__content {
-        left: 0;
-        right: unset;
-        transform: unset;
+        @include shadow-lg;
+        bottom: calc(100% + var(--popup-caret-size));
       }
 
       .popup__caret {
-        left: var(--popup-padding);
-        right: unset;
-        transform: unset;
+        top: calc(100% - 1px);
+        border-top-color: var(--popup-bg);
       }
     }
 
-    &--force-h-align-right {
+    &--v-align-bottom {
       .popup__content {
-        right: 0;
-        left: unset;
-        transform: unset;
+        @include shadow-lg-top;
+        top: calc(100% + var(--popup-caret-size));
       }
 
       .popup__caret {
-        right: var(--popup-padding);
-        left: unset;
-        transform: unset;
+        bottom: calc(100% - 1px);
+        border-bottom-color: var(--popup-bg);
+      }
+    }
+
+    ////////////////////////////////
+    // ACTIVE
+    ////////////////////////////////
+
+    &--active {
+      .popup__content {
+        opacity: 1;
+        visibility: visible;
+        pointer-events: all;
+      }
+    }
+
+    @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%);
+        }
+      }
+
+      &--h-align-right {
+        .popup__content {
+          right: 0;
+        }
+
+        .popup__caret {
+          right: var(--popup-padding);
+        }
+      }
+
+      &--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.js

@@ -12,14 +12,14 @@ export const usePreviewURL = () => {
     id,
     collectionSlug,
     globalSlug,
-    versions
+    versionCount
   } = useDocumentInfo();
   const [isLoading, setIsLoading] = useState(false);
   const [previewURL, setPreviewURL] = useState('');
   const {
     code: locale
   } = useLocale();
-  const hasVersions = versions?.totalDocs > 0;
+  const hasVersions = versionCount > 0;
   const {
     config: {
       routes: {

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

@@ -1 +1 @@
-{"version":3,"file":"usePreviewURL.js","names":["qs","useCallback","useRef","useState","toast","useConfig","useDocumentInfo","useLocale","useTranslation","usePreviewURL","id","collectionSlug","globalSlug","versions","isLoading","setIsLoading","previewURL","setPreviewURL","code","locale","hasVersions","totalDocs","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, versions } = useDocumentInfo()\n\n  const [isLoading, setIsLoading] = useState(false)\n  const [previewURL, setPreviewURL] = useState('')\n  const { code: locale } = useLocale()\n\n  const hasVersions = versions?.totalDocs > 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;EAAQ,CAAE,GAAGP,eAAA;EAErD,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,QAAA,EAAUQ,SAAA,GAAY;EAE1C,MAAM;IACJC,MAAA,EAAQ;MACNC,MAAA,EAAQ;QAAEC;MAAG,CAAE;MACfC;IAAS;EACV,CACF,GAAGpB,SAAA;EAEJ,MAAM;IAAEqB;EAAC,CAAE,GAAGlB,cAAA;EAEd,MAAMmB,sBAAA,GAAyBzB,MAAA,CAAO;EAEtC;EACA;EACA;EACA,MAAM0B,kBAAA,GAAqB3B,WAAA,CACzB,OAAO;IAAE4B,iBAAA,GAAoB;EAAK,CAAE;IAClC,IAAIF,sBAAA,CAAuBG,OAAO,EAAE;MAClC;IACF;IACAH,sBAAA,CAAuBG,OAAO,GAAG;IAEjC,IAAI;MACFf,YAAA,CAAa;MAEb,IAAIgB,GAAA,GAAM,GAAGN,SAAA,GAAYD,GAAA,EAAK;MAC9B,IAAIb,cAAA,EAAgB;QAClBoB,GAAA,GAAM,GAAGA,GAAA,IAAOpB,cAAA,IAAkBD,EAAA,UAAY;MAChD;MACA,IAAIE,UAAA,EAAY;QACdmB,GAAA,GAAM,GAAGA,GAAA,YAAenB,UAAA,UAAoB;MAC9C;MAEA,MAAMoB,MAAA,GAAS;QACbC,KAAA,EAAOb,WAAA,GAAc,SAAS;QAC9BD,MAAA,EAAQA,MAAA,IAAUe;MACpB;MAEA,MAAMC,GAAA,GAAM,MAAMC,KAAA,CAAM,GAAGL,GAAA,IAAO/B,EAAA,CAAGqC,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;MACAtB,aAAA,CAAcuB,aAAA;MACdzB,YAAA,CAAa;MACbY,sBAAA,CAAuBG,OAAO,GAAG;MACjC,IAAID,iBAAA,EAAmB;QACrBa,MAAA,CAAOC,IAAI,CAACH,aAAA,EAAe;MAC7B;IACF,EAAE,OAAOI,GAAA,EAAK;MACZ7B,YAAA,CAAa;MACbY,sBAAA,CAAuBG,OAAO,GAAG;MACjC1B,KAAA,CAAMyC,KAAK,CAACnB,CAAA,CAAE;IAChB;EACF,GACA,CAACD,SAAA,EAAWD,GAAA,EAAKb,cAAA,EAAgBC,UAAA,EAAYQ,WAAA,EAAaD,MAAA,EAAQT,EAAA,EAAIgB,CAAA,CAAE;EAG1E,OAAO;IACL;IACAE,kBAAA;IACAd,SAAA;IACAgC,KAAA,EAAOhC,SAAA,GAAYY,CAAA,CAAE,qBAAqBA,CAAA,CAAE;IAC5CV;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":[]}