@payloadcms/ui 3.0.0-canary.ff8c8fd → 3.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useEffect","useMemo","useState","FileMeta","baseClass","sortSizes","sizes","imageSizes","length","orderedSizes","forEach","name","PreviewSizeCard","active","meta","onClick","previewSrc","_jsxs","className","filter","Boolean","join","undefined","onKeyDown","e","key","role","tabIndex","_jsx","alt","filename","src","PreviewSizes","doc","imageCacheTag","uploadConfig","setOrderedSizes","selectedSize","setSelectedSize","generateImageUrl","url","mainPreviewSrc","originalImage","filesize","height","mimeType","width","originalFilename","Object","entries","map","val","selected"],"sources":["../../../src/elements/PreviewSizes/index.tsx"],"sourcesContent":["'use client'\nimport type { Data, FileSize, SanitizedCollectionConfig, SanitizedUploadConfig } from 'payload'\n\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport { FileMeta } from '../FileDetails/FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'preview-sizes'\n\ntype FileInfo = {\n  url: string\n} & FileSize\ntype FilesSizesWithUrl = {\n  [key: string]: FileInfo\n}\n\nconst sortSizes = (sizes: FilesSizesWithUrl, imageSizes: SanitizedUploadConfig['imageSizes']) => {\n  if (!imageSizes || imageSizes.length === 0) return sizes\n\n  const orderedSizes: FilesSizesWithUrl = {}\n\n  imageSizes.forEach(({ name }) => {\n    if (sizes[name]) {\n      orderedSizes[name] = sizes[name]\n    }\n  })\n\n  return orderedSizes\n}\n\ntype PreviewSizeCardProps = {\n  active: boolean\n  meta: FileInfo\n  name: string\n  onClick?: () => void\n  previewSrc: string\n}\nconst PreviewSizeCard: React.FC<PreviewSizeCardProps> = ({\n  name,\n  active,\n  meta,\n  onClick,\n  previewSrc,\n}) => {\n  return (\n    <div\n      className={[`${baseClass}__sizeOption`, active && `${baseClass}--selected`]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={typeof onClick === 'function' ? onClick : undefined}\n      onKeyDown={(e) => {\n        if (typeof onClick !== 'function') return\n        if (e.key === 'Enter') onClick()\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <div className={`${baseClass}__image`}>\n        <img alt={meta.filename} src={previewSrc} />\n      </div>\n      <div className={`${baseClass}__sizeMeta`}>\n        <div className={`${baseClass}__sizeName`}>{name}</div>\n        <FileMeta {...meta} />\n      </div>\n    </div>\n  )\n}\n\nexport type PreviewSizesProps = {\n  doc: {\n    sizes?: FilesSizesWithUrl\n  } & Data\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const PreviewSizes: React.FC<PreviewSizesProps> = ({ doc, imageCacheTag, uploadConfig }) => {\n  const { imageSizes } = uploadConfig\n  const { sizes } = doc\n\n  const [orderedSizes, setOrderedSizes] = useState<FilesSizesWithUrl>(() =>\n    sortSizes(sizes, imageSizes),\n  )\n  const [selectedSize, setSelectedSize] = useState<null | string>(null)\n\n  const generateImageUrl = (doc) => {\n    if (!doc.filename) return null\n    if (doc.url) return `${doc.url}${imageCacheTag ? `?${imageCacheTag}` : ''}`\n  }\n  useEffect(() => {\n    setOrderedSizes(sortSizes(sizes, imageSizes))\n  }, [sizes, imageSizes, imageCacheTag])\n\n  const mainPreviewSrc = selectedSize\n    ? generateImageUrl(doc.sizes[selectedSize])\n    : generateImageUrl(doc)\n\n  const originalImage = useMemo(\n    (): FileInfo => ({\n      filename: doc.filename,\n      filesize: doc.filesize,\n      height: doc.height,\n      mimeType: doc.mimeType,\n      url: doc.url,\n      width: doc.width,\n    }),\n    [doc],\n  )\n  const originalFilename = 'Original'\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__imageWrap`}>\n        <div className={`${baseClass}__meta`}>\n          <div className={`${baseClass}__sizeName`}>{selectedSize || originalFilename}</div>\n          <FileMeta {...(selectedSize ? orderedSizes[selectedSize] : originalImage)} />\n        </div>\n        <img alt={doc.filename} className={`${baseClass}__preview`} src={mainPreviewSrc} />\n      </div>\n      <div className={`${baseClass}__listWrap`}>\n        <div className={`${baseClass}__list`}>\n          <PreviewSizeCard\n            active={!selectedSize}\n            meta={originalImage}\n            name={originalFilename}\n            onClick={() => setSelectedSize(null)}\n            previewSrc={generateImageUrl(doc)}\n          />\n\n          {Object.entries(orderedSizes).map(([key, val]) => {\n            const selected = selectedSize === key\n            const previewSrc = generateImageUrl(val)\n\n            if (previewSrc) {\n              return (\n                <PreviewSizeCard\n                  active={selected}\n                  key={key}\n                  meta={val}\n                  name={key}\n                  onClick={() => setSelectedSize(key)}\n                  previewSrc={previewSrc}\n                />\n              )\n            }\n\n            return null\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useEffect","useMemo","useState","FileMeta","baseClass","sortSizes","sizes","imageSizes","length","orderedSizes","forEach","name","PreviewSizeCard","active","meta","onClick","previewSrc","_jsxs","className","filter","Boolean","join","undefined","onKeyDown","e","key","role","tabIndex","_jsx","alt","filename","src","PreviewSizes","doc","imageCacheTag","uploadConfig","setOrderedSizes","selectedSize","setSelectedSize","generateImageUrl","url","mainPreviewSrc","originalImage","filesize","height","mimeType","width","originalFilename","Object","entries","map","val","selected"],"sources":["../../../src/elements/PreviewSizes/index.tsx"],"sourcesContent":["'use client'\nimport type { Data, FileSize, SanitizedCollectionConfig, SanitizedUploadConfig } from 'payload'\n\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport { FileMeta } from '../FileDetails/FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'preview-sizes'\n\ntype FileInfo = {\n  url: string\n} & FileSize\ntype FilesSizesWithUrl = {\n  [key: string]: FileInfo\n}\n\nconst sortSizes = (sizes: FilesSizesWithUrl, imageSizes: SanitizedUploadConfig['imageSizes']) => {\n  if (!imageSizes || imageSizes.length === 0) {\n    return sizes\n  }\n\n  const orderedSizes: FilesSizesWithUrl = {}\n\n  imageSizes.forEach(({ name }) => {\n    if (sizes[name]) {\n      orderedSizes[name] = sizes[name]\n    }\n  })\n\n  return orderedSizes\n}\n\ntype PreviewSizeCardProps = {\n  active: boolean\n  meta: FileInfo\n  name: string\n  onClick?: () => void\n  previewSrc: string\n}\nconst PreviewSizeCard: React.FC<PreviewSizeCardProps> = ({\n  name,\n  active,\n  meta,\n  onClick,\n  previewSrc,\n}) => {\n  return (\n    <div\n      className={[`${baseClass}__sizeOption`, active && `${baseClass}--selected`]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={typeof onClick === 'function' ? onClick : undefined}\n      onKeyDown={(e) => {\n        if (typeof onClick !== 'function') {\n          return\n        }\n        if (e.key === 'Enter') {\n          onClick()\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <div className={`${baseClass}__image`}>\n        <img alt={meta.filename} src={previewSrc} />\n      </div>\n      <div className={`${baseClass}__sizeMeta`}>\n        <div className={`${baseClass}__sizeName`}>{name}</div>\n        <FileMeta {...meta} />\n      </div>\n    </div>\n  )\n}\n\nexport type PreviewSizesProps = {\n  doc: {\n    sizes?: FilesSizesWithUrl\n  } & Data\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const PreviewSizes: React.FC<PreviewSizesProps> = ({ doc, imageCacheTag, uploadConfig }) => {\n  const { imageSizes } = uploadConfig\n  const { sizes } = doc\n\n  const [orderedSizes, setOrderedSizes] = useState<FilesSizesWithUrl>(() =>\n    sortSizes(sizes, imageSizes),\n  )\n  const [selectedSize, setSelectedSize] = useState<null | string>(null)\n\n  const generateImageUrl = (doc) => {\n    if (!doc.filename) {\n      return null\n    }\n    if (doc.url) {\n      return `${doc.url}${imageCacheTag ? `?${imageCacheTag}` : ''}`\n    }\n  }\n  useEffect(() => {\n    setOrderedSizes(sortSizes(sizes, imageSizes))\n  }, [sizes, imageSizes, imageCacheTag])\n\n  const mainPreviewSrc = selectedSize\n    ? generateImageUrl(doc.sizes[selectedSize])\n    : generateImageUrl(doc)\n\n  const originalImage = useMemo(\n    (): FileInfo => ({\n      filename: doc.filename,\n      filesize: doc.filesize,\n      height: doc.height,\n      mimeType: doc.mimeType,\n      url: doc.url,\n      width: doc.width,\n    }),\n    [doc],\n  )\n  const originalFilename = 'Original'\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__imageWrap`}>\n        <div className={`${baseClass}__meta`}>\n          <div className={`${baseClass}__sizeName`}>{selectedSize || originalFilename}</div>\n          <FileMeta {...(selectedSize ? orderedSizes[selectedSize] : originalImage)} />\n        </div>\n        <img alt={doc.filename} className={`${baseClass}__preview`} src={mainPreviewSrc} />\n      </div>\n      <div className={`${baseClass}__listWrap`}>\n        <div className={`${baseClass}__list`}>\n          <PreviewSizeCard\n            active={!selectedSize}\n            meta={originalImage}\n            name={originalFilename}\n            onClick={() => setSelectedSize(null)}\n            previewSrc={generateImageUrl(doc)}\n          />\n\n          {Object.entries(orderedSizes).map(([key, val]) => {\n            const selected = selectedSize === key\n            const previewSrc = generateImageUrl(val)\n\n            if (previewSrc) {\n              return (\n                <PreviewSizeCard\n                  active={selected}\n                  key={key}\n                  meta={val}\n                  name={key}\n                  onClick={() => setSelectedSize(key)}\n                  previewSrc={previewSrc}\n                />\n              )\n            }\n\n            return null\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/PreviewSizes/index.scss

@@ -1,145 +1,147 @@
 @import '../../scss/styles.scss';
 
-.preview-sizes {
-  margin: base(2) calc(var(--gutter-h) * -1) 0 calc(var(--gutter-h) * -1);
-  border-top: 1px solid var(--theme-elevation-150);
-  max-height: calc(100vh - base(6));
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-
-  &__imageWrap {
-    min-width: 60%;
-    border-right: 1px solid var(--theme-elevation-150);
-  }
+@layer payload-default {
+  .preview-sizes {
+    margin: base(2) calc(var(--gutter-h) * -1) 0 calc(var(--gutter-h) * -1);
+    border-top: 1px solid var(--theme-elevation-150);
+    max-height: calc(100vh - base(6));
+    height: 100%;
+    display: flex;
+    flex-direction: row;
 
-  &__preview {
-    max-height: calc(100% - base(6));
-    padding: base(1.5) base(1.5) base(1.5) var(--gutter-h);
-    object-fit: contain;
-  }
+    &__imageWrap {
+      min-width: 60%;
+      border-right: 1px solid var(--theme-elevation-150);
+    }
 
-  &__meta {
-    border-bottom: 1px solid var(--theme-elevation-150);
-    padding: base(1) var(--gutter-h);
-    display: flex;
-    flex-wrap: wrap;
-    column-gap: base(1);
+    &__preview {
+      max-height: calc(100% - base(6));
+      padding: base(1.5) base(1.5) base(1.5) var(--gutter-h);
+      object-fit: contain;
+    }
 
-    .file-meta {
+    &__meta {
+      border-bottom: 1px solid var(--theme-elevation-150);
+      padding: base(1) var(--gutter-h);
       display: flex;
       flex-wrap: wrap;
       column-gap: base(1);
-      text-wrap: wrap;
-      width: 100%;
-    }
 
-    .file-meta__url {
-      width: 100%;
+      .file-meta {
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: base(1);
+        text-wrap: wrap;
+        width: 100%;
+      }
+
+      .file-meta__url {
+        width: 100%;
+      }
     }
-  }
 
-  &__sizeName,
-  .file-meta__size-type {
-    color: var(--theme-elevation-600);
-  }
-
-  &__listWrap {
-    padding-right: var(--gutter-h);
-    overflow-y: scroll;
+    &__sizeName,
+    .file-meta__size-type {
+      color: var(--theme-elevation-600);
+    }
 
-    &::-webkit-scrollbar {
-      width: 0;
+    &__listWrap {
+      padding-right: var(--gutter-h);
+      overflow-y: scroll;
+
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+
+      &::after {
+        content: '';
+        display: block;
+        position: sticky;
+        bottom: 0;
+        left: 0;
+        height: base(4);
+        width: 100%;
+        background: linear-gradient(180deg, transparent 0, var(--theme-bg) 100%);
+        pointer-events: none;
+      }
     }
 
-    &::after {
-      content: '';
-      display: block;
-      position: sticky;
-      bottom: 0;
-      left: 0;
-      height: base(4);
-      width: 100%;
-      background: linear-gradient(180deg, transparent 0, var(--theme-bg) 100%);
-      pointer-events: none;
+    &__list {
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: base(0.5);
+      margin: 0;
+      padding: base(1.5) 0 base(1.5) base(1.5);
     }
-  }
 
-  &__list {
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    gap: base(0.5);
-    margin: 0;
-    padding: base(1.5) 0 base(1.5) base(1.5);
-  }
+    &__sizeOption {
+      padding: base(0.5);
+      display: flex;
+      gap: base(1);
+      cursor: pointer;
+      transition: background-color 0.2s ease-in-out;
 
-  &__sizeOption {
-    padding: base(0.5);
-    display: flex;
-    gap: base(1);
-    cursor: pointer;
-    transition: background-color 0.2s ease-in-out;
+      &:hover {
+        background-color: var(--theme-elevation-100);
+      }
+    }
 
-    &:hover {
+    &--selected {
       background-color: var(--theme-elevation-100);
     }
-  }
-
-  &--selected {
-    background-color: var(--theme-elevation-100);
-  }
-
-  &__image {
-    display: flex;
-    width: 30%;
-    min-width: 30%;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__sizeMeta {
-    padding: base(0.5) 0;
-  }
-
-  &__sizeName,
-  &__sizeMeta {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  @include mid-break {
-    margin-top: base(1);
-    max-height: calc(100vh - base(4));
-  }
 
-  @include small-break {
-    margin-top: 0;
-    max-height: calc(100vh - base(3.5));
-    flex-direction: column;
-    justify-content: space-between;
-
-    &__imageWrap {
-      height: 60%;
-      border: none;
+    &__image {
+      display: flex;
+      width: 30%;
+      min-width: 30%;
+      align-items: center;
+      justify-content: center;
     }
 
-    &__list,
-    &__preview {
-      padding: calc(var(--gutter-h) * 2) var(--gutter-h);
+    &__sizeMeta {
+      padding: base(0.5) 0;
     }
 
-    &__preview {
-      max-height: calc(100% - base(4));
+    &__sizeName,
+    &__sizeMeta {
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
-    &__sizeOption {
-      padding: base(0.25);
+    @include mid-break {
+      margin-top: base(1);
+      max-height: calc(100vh - base(4));
     }
 
-    &__listWrap {
-      border-top: 1px solid var(--theme-elevation-150);
-      height: 40%;
+    @include small-break {
+      margin-top: 0;
+      max-height: calc(100vh - base(3.5));
+      flex-direction: column;
+      justify-content: space-between;
+
+      &__imageWrap {
+        height: 60%;
+        border: none;
+      }
+
+      &__list,
+      &__preview {
+        padding: calc(var(--gutter-h) * 2) var(--gutter-h);
+      }
+
+      &__preview {
+        max-height: calc(100% - base(4));
+      }
+
+      &__sizeOption {
+        padding: base(0.25);
+      }
+
+      &__listWrap {
+        border-top: 1px solid var(--theme-elevation-150);
+        height: 40%;
+      }
     }
   }
 }

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

@@ -1,11 +1,5 @@
-import type { MappedComponent } from 'payload';
 import React from 'react';
-export declare const DefaultPublishButton: React.FC<{
+export declare const PublishButton: React.FC<{
     label?: string;
 }>;
-type Props = {
-    CustomComponent?: MappedComponent;
-};
-export declare const PublishButton: React.FC<Props>;
-export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PublishButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,OAAO,KAAsB,MAAM,OAAO,CAAA;AAU1C,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CA2C7D,CAAA;AAED,KAAK,KAAK,GAAG;IACX,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAGzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PublishButton/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAa1C,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAmJtD,CAAA"}

package/dist/elements/PublishButton/index.js

@@ -2,122 +2,248 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as qs from 'qs-esm';
 import React, { useCallback } from 'react';
 import { useForm, useFormModified } from '../../forms/Form/context.js';
 import { FormSubmit } from '../../forms/Submit/index.js';
 import { useHotkey } from '../../hooks/useHotkey.js';
-import { RenderComponent } from '../../providers/Config/RenderComponent.js';
+import { useConfig } from '../../providers/Config/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { useEditDepth } from '../../providers/EditDepth/index.js';
+import { useLocale } from '../../providers/Locale/index.js';
+import { useOperation } from '../../providers/Operation/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-export const DefaultPublishButton = t0 => {
-  const $ = _c(14);
+import { PopupList } from '../Popup/index.js';
+export const PublishButton = t0 => {
+  const $ = _c(41);
   const {
     label: labelProp
   } = t0;
   const {
+    id,
+    collectionSlug,
+    docConfig,
+    globalSlug,
+    hasPublishedDoc,
     hasPublishPermission,
-    publishedDoc,
-    unpublishedVersions
+    setHasPublishedDoc,
+    setUnpublishedVersionCount,
+    unpublishedVersionCount
   } = useDocumentInfo();
+  const {
+    config
+  } = useConfig();
   const {
     submit
   } = useForm();
   const modified = useFormModified();
   const editDepth = useEditDepth();
   const {
+    code: locale
+  } = useLocale();
+  const {
+    localization,
+    routes: t1,
+    serverURL
+  } = config;
+  const {
+    api
+  } = t1;
+  const {
+    i18n,
     t
   } = useTranslation();
-  let t1;
+  const {
+    code
+  } = useLocale();
+  let t2;
   if ($[0] !== labelProp || $[1] !== t) {
-    t1 = labelProp || t("version:publishChanges");
+    t2 = labelProp || t("version:publishChanges");
     $[0] = labelProp;
     $[1] = t;
-    $[2] = t1;
+    $[2] = t2;
   } else {
-    t1 = $[2];
+    t2 = $[2];
   }
-  const label = t1;
-  const hasNewerVersions = unpublishedVersions?.totalDocs > 0;
-  const canPublish = hasPublishPermission && (modified || hasNewerVersions || !publishedDoc);
-  let t2;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = ["s"];
-    $[3] = t2;
+  const label = t2;
+  const hasNewerVersions = unpublishedVersionCount > 0;
+  const canPublish = hasPublishPermission && (modified || hasNewerVersions || !hasPublishedDoc);
+  const operation = useOperation();
+  const forceDisable = operation === "update" && !modified;
+  let t3;
+  if ($[3] !== forceDisable || $[4] !== locale || $[5] !== collectionSlug || $[6] !== serverURL || $[7] !== api || $[8] !== id || $[9] !== globalSlug || $[10] !== submit) {
+    t3 = async () => {
+      if (forceDisable) {
+        return;
+      }
+      const search = `?locale=${locale}&depth=0&fallback-locale=null&draft=true`;
+      let action;
+      let method = "POST";
+      if (collectionSlug) {
+        action = `${serverURL}${api}/${collectionSlug}${id ? `/${id}` : ""}${search}`;
+        if (id) {
+          method = "PATCH";
+        }
+      }
+      if (globalSlug) {
+        action = `${serverURL}${api}/globals/${globalSlug}${search}`;
+      }
+      await submit({
+        action,
+        method,
+        overrides: {
+          _status: "draft"
+        },
+        skipValidation: true
+      });
+    };
+    $[3] = forceDisable;
+    $[4] = locale;
+    $[5] = collectionSlug;
+    $[6] = serverURL;
+    $[7] = api;
+    $[8] = id;
+    $[9] = globalSlug;
+    $[10] = submit;
+    $[11] = t3;
   } else {
-    t2 = $[3];
+    t3 = $[11];
   }
-  let t3;
-  if ($[4] !== editDepth) {
-    t3 = {
+  const saveDraft = t3;
+  let t4;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = ["s"];
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  let t5;
+  if ($[13] !== editDepth) {
+    t5 = {
       cmdCtrlKey: true,
       editDepth,
-      keyCodes: t2
+      keyCodes: t4
     };
-    $[4] = editDepth;
-    $[5] = t3;
+    $[13] = editDepth;
+    $[14] = t5;
   } else {
-    t3 = $[5];
+    t5 = $[14];
   }
-  let t4;
-  if ($[6] !== submit) {
-    t4 = e => {
+  let t6;
+  if ($[15] !== saveDraft || $[16] !== docConfig.versions) {
+    t6 = e => {
       e.preventDefault();
       e.stopPropagation();
-      if (submit) {
-        submit();
+      if (saveDraft && docConfig.versions?.drafts && docConfig.versions?.drafts?.autosave) {
+        saveDraft();
       }
     };
-    $[6] = submit;
-    $[7] = t4;
+    $[15] = saveDraft;
+    $[16] = docConfig.versions;
+    $[17] = t6;
   } else {
-    t4 = $[7];
+    t6 = $[17];
   }
-  useHotkey(t3, t4);
-  let t5;
-  if ($[8] !== submit) {
-    t5 = () => {
+  useHotkey(t5, t6);
+  let t7;
+  if ($[18] !== submit || $[19] !== setUnpublishedVersionCount || $[20] !== setHasPublishedDoc) {
+    t7 = () => {
       submit({
         overrides: {
           _status: "published"
         }
       });
+      setUnpublishedVersionCount(0);
+      setHasPublishedDoc(true);
     };
-    $[8] = submit;
-    $[9] = t5;
+    $[18] = submit;
+    $[19] = setUnpublishedVersionCount;
+    $[20] = setHasPublishedDoc;
+    $[21] = t7;
   } else {
-    t5 = $[9];
+    t7 = $[21];
   }
-  const publish = t5;
+  const publish = t7;
+  let t8;
+  if ($[22] !== serverURL || $[23] !== api || $[24] !== globalSlug || $[25] !== collectionSlug || $[26] !== id || $[27] !== submit || $[28] !== setHasPublishedDoc) {
+    t8 = locale_0 => {
+      const params = qs.stringify({
+        publishSpecificLocale: locale_0
+      });
+      const action_0 = `${serverURL}${api}${globalSlug ? `/globals/${globalSlug}` : `/${collectionSlug}/${id ? `${"/" + id}` : ""}`}${params ? "?" + params : ""}`;
+      submit({
+        action: action_0,
+        overrides: {
+          _status: "published"
+        }
+      });
+      setHasPublishedDoc(true);
+    };
+    $[22] = serverURL;
+    $[23] = api;
+    $[24] = globalSlug;
+    $[25] = collectionSlug;
+    $[26] = id;
+    $[27] = submit;
+    $[28] = setHasPublishedDoc;
+    $[29] = t8;
+  } else {
+    t8 = $[29];
+  }
+  const publishSpecificLocale = t8;
   if (!hasPublishPermission) {
     return null;
   }
-  const t6 = !canPublish;
-  let t7;
-  if ($[10] !== t6 || $[11] !== publish || $[12] !== label) {
-    t7 = _jsx(FormSubmit, {
+  const t9 = !canPublish;
+  let t10;
+  if ($[30] !== localization || $[31] !== i18n || $[32] !== code || $[33] !== publishSpecificLocale || $[34] !== t) {
+    t10 = localization ? t11 => {
+      const {
+        close
+      } = t11;
+      return localization.locales.map(locale_1 => {
+        const formattedLabel = typeof locale_1.label === "string" ? locale_1.label : locale_1.label && locale_1.label[i18n?.language];
+        const isActive = typeof locale_1 === "string" ? locale_1 === code : locale_1.code === code;
+        if (isActive) {
+          return _jsx(PopupList.ButtonGroup, {
+            children: _jsx(PopupList.Button, {
+              onClick: () => [publishSpecificLocale(locale_1.code), close()],
+              children: t("version:publishIn", {
+                locale: formattedLabel || locale_1.code
+              })
+            })
+          }, locale_1.code);
+        }
+      });
+    } : undefined;
+    $[30] = localization;
+    $[31] = i18n;
+    $[32] = code;
+    $[33] = publishSpecificLocale;
+    $[34] = t;
+    $[35] = t10;
+  } else {
+    t10 = $[35];
+  }
+  let t11;
+  if ($[36] !== t9 || $[37] !== publish || $[38] !== t10 || $[39] !== label) {
+    t11 = _jsx(FormSubmit, {
       buttonId: "action-save",
-      disabled: t6,
+      disabled: t9,
       onClick: publish,
       size: "medium",
+      SubMenuPopupContent: t10,
       type: "button",
       children: label
     });
-    $[10] = t6;
-    $[11] = publish;
-    $[12] = label;
-    $[13] = t7;
+    $[36] = t9;
+    $[37] = publish;
+    $[38] = t10;
+    $[39] = label;
+    $[40] = t11;
   } else {
-    t7 = $[13];
+    t11 = $[40];
   }
-  return t7;
-};
-export const PublishButton = ({
-  CustomComponent
-}) => {
-  if (CustomComponent) return /*#__PURE__*/_jsx(RenderComponent, {
-    mappedComponent: CustomComponent
-  });
-  return /*#__PURE__*/_jsx(DefaultPublishButton, {});
+  return t11;
 };
 //# sourceMappingURL=index.js.map