@payloadcms/ui 4.0.0-internal.d28e9fb → 4.0.0-internal.d3909a9

package/dist/elements/PreviewSizes/index.js

@@ -4,14 +4,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useState } from 'react';
 import { appendCacheTag } from '../../utilities/appendCacheTag.js';
 import { FileMeta } from '../FileDetails/FileMeta/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'preview-sizes';
-const sortSizes = (sizes, imageSizes) => {
-  if (!imageSizes || imageSizes.length === 0) {
+const sortSizes = (sizes, variants) => {
+  if (!variants || variants.length === 0) {
     return sizes;
   }
   const orderedSizes = {};
-  imageSizes.forEach(({
+  variants.forEach(({
     name
   }) => {
     if (sizes[name]) {
@@ -64,13 +64,13 @@ export const PreviewSizes = ({
   uploadConfig
 }) => {
   const {
-    imageSizes
+    variants
   } = uploadConfig;
   const {
-    sizes
+    variants: sizes
   } = doc;
   const alt = doc?.alt || doc.filename || '';
-  const [orderedSizes, setOrderedSizes] = useState(() => sortSizes(sizes, imageSizes));
+  const [orderedSizes, setOrderedSizes] = useState(() => sortSizes(sizes, variants));
   const [selectedSize, setSelectedSize] = useState(null);
   const generateImageUrl = doc_0 => {
     if (!doc_0.filename) {
@@ -81,9 +81,9 @@ export const PreviewSizes = ({
     }
   };
   useEffect(() => {
-    setOrderedSizes(sortSizes(sizes, imageSizes));
-  }, [sizes, imageSizes, imageCacheTag]);
-  const mainPreviewSrc = selectedSize ? generateImageUrl(doc.sizes[selectedSize]) : generateImageUrl(doc);
+    setOrderedSizes(sortSizes(sizes, variants));
+  }, [sizes, variants, imageCacheTag]);
+  const mainPreviewSrc = selectedSize ? generateImageUrl(doc.variants[selectedSize]) : generateImageUrl(doc);
   const originalImage = useMemo(() => ({
     filename: doc.filename,
     filesize: doc.filesize,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useEffect","useMemo","useState","appendCacheTag","FileMeta","baseClass","sortSizes","sizes","imageSizes","length","orderedSizes","forEach","name","PreviewSizeCard","active","alt","meta","onClick","previewSrc","_jsxs","className","filter","Boolean","join","undefined","onKeyDown","e","key","role","tabIndex","_jsx","src","PreviewSizes","doc","imageCacheTag","uploadConfig","filename","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 { appendCacheTag } from '../../utilities/appendCacheTag.js'\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  alt: string\n  meta: FileInfo\n  name: string\n  onClick?: () => void\n  previewSrc: string\n}\nconst PreviewSizeCard: React.FC<PreviewSizeCardProps> = ({\n  name,\n  active,\n  alt,\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={alt} 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 alt = (doc as { alt?: string })?.alt || doc.filename || ''\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 appendCacheTag(doc.url, 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={alt} className={`${baseClass}__preview`} src={mainPreviewSrc} />\n      </div>\n      <div className={`${baseClass}__listWrap`}>\n        <div className={`${baseClass}__list`}>\n          <PreviewSizeCard\n            active={!selectedSize}\n            alt={alt}\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                  alt={alt}\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","appendCacheTag","FileMeta","baseClass","sortSizes","sizes","variants","length","orderedSizes","forEach","name","PreviewSizeCard","active","alt","meta","onClick","previewSrc","_jsxs","className","filter","Boolean","join","undefined","onKeyDown","e","key","role","tabIndex","_jsx","src","PreviewSizes","doc","imageCacheTag","uploadConfig","filename","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 { appendCacheTag } from '../../utilities/appendCacheTag.js'\nimport { FileMeta } from '../FileDetails/FileMeta/index.js'\nimport './index.css'\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, variants: SanitizedUploadConfig['variants']) => {\n  if (!variants || variants.length === 0) {\n    return sizes\n  }\n\n  const orderedSizes: FilesSizesWithUrl = {}\n\n  variants.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  alt: string\n  meta: FileInfo\n  name: string\n  onClick?: () => void\n  previewSrc: string\n}\nconst PreviewSizeCard: React.FC<PreviewSizeCardProps> = ({\n  name,\n  active,\n  alt,\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={alt} 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    variants?: FilesSizesWithUrl\n  } & Data\n  imageCacheTag?: false | string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const PreviewSizes: React.FC<PreviewSizesProps> = ({ doc, imageCacheTag, uploadConfig }) => {\n  const { variants } = uploadConfig\n  const { variants: sizes } = doc\n\n  const alt = (doc as { alt?: string })?.alt || doc.filename || ''\n\n  const [orderedSizes, setOrderedSizes] = useState<FilesSizesWithUrl>(() =>\n    sortSizes(sizes, variants),\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 appendCacheTag(doc.url, imageCacheTag)\n    }\n  }\n  useEffect(() => {\n    setOrderedSizes(sortSizes(sizes, variants))\n  }, [sizes, variants, imageCacheTag])\n\n  const mainPreviewSrc = selectedSize\n    ? generateImageUrl(doc.variants[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={alt} className={`${baseClass}__preview`} src={mainPreviewSrc} />\n      </div>\n      <div className={`${baseClass}__listWrap`}>\n        <div className={`${baseClass}__list`}>\n          <PreviewSizeCard\n            active={!selectedSize}\n            alt={alt}\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                  alt={alt}\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/PublishButton/ScheduleDrawer/buildUpcomingColumns.js

@@ -104,7 +104,7 @@ export const buildUpcomingColumns = ({
       children: t('general:delete')
     }),
     renderedCells: docs.map(doc => /*#__PURE__*/_jsx(Button, {
-      buttonStyle: "icon-label",
+      buttonStyle: "ghost",
       className: "schedule-publish__delete",
       icon: "x",
       onClick: e => {

package/dist/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.js.map

@@ -1 +1 @@
-{"version":3,"file":"buildUpcomingColumns.js","names":["getTranslation","React","formatDate","Button","Pill","buildUpcomingColumns","dateFormat","deleteHandler","docs","i18n","localization","supportedTimezones","t","columns","accessor","active","field","name","type","Heading","_jsx","renderedCells","map","doc","input","_jsxs","pillStyle","size","id","date","waitUntil","pattern","timezone","matchedTimezone","find","value","label","push","locale","matchedLocale","locales","code","buttonStyle","className","icon","onClick","e","preventDefault","tooltip"],"sources":["../../../../src/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.tsx"],"sourcesContent":["import type { ClientConfig, Column } from 'payload'\n\nimport { getTranslation, type I18nClient, type TFunction } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { UpcomingEvent } from './types.js'\n\nimport { formatDate } from '../../../utilities/formatDocTitle/formatDateTitle.js'\nimport { Button } from '../../Button/index.js'\nimport { Pill } from '../../Pill/index.js'\n\ntype Args = {\n  dateFormat: string\n  deleteHandler: (id: number | string) => void\n  docs: UpcomingEvent[]\n  i18n: I18nClient\n  localization: ClientConfig['localization']\n  supportedTimezones: ClientConfig['admin']['timezones']['supportedTimezones']\n  t: TFunction\n}\n\nexport const buildUpcomingColumns = ({\n  dateFormat,\n  deleteHandler,\n  docs,\n  i18n,\n  localization,\n  supportedTimezones,\n  t,\n}: Args): Column[] => {\n  const columns: Column[] = [\n    {\n      accessor: 'input.type',\n      active: true,\n      field: {\n        name: '',\n        type: 'text',\n      },\n      Heading: <span>{t('version:type')}</span>,\n      renderedCells: docs.map((doc) => {\n        const type = doc.input?.type\n\n        return (\n          <Pill key={doc.id} pillStyle={type === 'publish' ? 'success' : 'warning'} size=\"small\">\n            {type === 'publish' && t('version:publish')}\n            {type === 'unpublish' && t('version:unpublish')}\n          </Pill>\n        )\n      }),\n    },\n    {\n      accessor: 'waitUntil',\n      active: true,\n      field: {\n        name: '',\n        type: 'date',\n      },\n      Heading: <span>{t('general:time')}</span>,\n      renderedCells: docs.map((doc) => (\n        <span key={doc.id}>\n          {formatDate({\n            date: doc.waitUntil,\n            i18n,\n            pattern: dateFormat,\n            timezone: doc.input.timezone,\n          })}\n        </span>\n      )),\n    },\n    {\n      accessor: 'input.timezone',\n      active: true,\n      field: {\n        name: '',\n        type: 'text',\n      },\n      Heading: <span>{t('general:timezone')}</span>,\n      renderedCells: docs.map((doc) => {\n        const matchedTimezone = supportedTimezones.find(\n          (timezone) => timezone.value === doc.input.timezone,\n        )\n\n        const timezone = matchedTimezone?.label || doc.input.timezone\n\n        return <span key={doc.id}>{timezone || t('general:noValue')}</span>\n      }),\n    },\n  ]\n\n  if (localization) {\n    columns.push({\n      accessor: 'input.locale',\n      active: true,\n      field: {\n        name: '',\n        type: 'text',\n      },\n      Heading: <span>{t('general:locale')}</span>,\n      renderedCells: docs.map((doc) => {\n        if (doc.input.locale) {\n          const matchedLocale = localization.locales.find(\n            (locale) => locale.code === doc.input.locale,\n          )\n          if (matchedLocale) {\n            return <span key={doc.id}>{getTranslation(matchedLocale.label, i18n)}</span>\n          }\n        }\n\n        return <span key={doc.id}>{t('general:all')}</span>\n      }),\n    })\n  }\n\n  columns.push({\n    accessor: 'delete',\n    active: true,\n    field: {\n      name: 'delete',\n      type: 'text',\n    },\n    Heading: <span>{t('general:delete')}</span>,\n    renderedCells: docs.map((doc) => (\n      <Button\n        buttonStyle=\"icon-label\"\n        className=\"schedule-publish__delete\"\n        icon=\"x\"\n        key={doc.id}\n        onClick={(e) => {\n          e.preventDefault()\n          deleteHandler(doc.id)\n        }}\n        tooltip={t('general:delete')}\n      />\n    )),\n  })\n\n  return columns\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"buildUpcomingColumns.js","names":["getTranslation","React","formatDate","Button","Pill","buildUpcomingColumns","dateFormat","deleteHandler","docs","i18n","localization","supportedTimezones","t","columns","accessor","active","field","name","type","Heading","_jsx","renderedCells","map","doc","input","_jsxs","pillStyle","size","id","date","waitUntil","pattern","timezone","matchedTimezone","find","value","label","push","locale","matchedLocale","locales","code","buttonStyle","className","icon","onClick","e","preventDefault","tooltip"],"sources":["../../../../src/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.tsx"],"sourcesContent":["import type { ClientConfig, Column } from 'payload'\n\nimport { getTranslation, type I18nClient, type TFunction } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { UpcomingEvent } from './types.js'\n\nimport { formatDate } from '../../../utilities/formatDocTitle/formatDateTitle.js'\nimport { Button } from '../../Button/index.js'\nimport { Pill } from '../../Pill/index.js'\n\ntype Args = {\n  dateFormat: string\n  deleteHandler: (id: number | string) => void\n  docs: UpcomingEvent[]\n  i18n: I18nClient\n  localization: ClientConfig['localization']\n  supportedTimezones: ClientConfig['admin']['timezones']['supportedTimezones']\n  t: TFunction\n}\n\nexport const buildUpcomingColumns = ({\n  dateFormat,\n  deleteHandler,\n  docs,\n  i18n,\n  localization,\n  supportedTimezones,\n  t,\n}: Args): Column[] => {\n  const columns: Column[] = [\n    {\n      accessor: 'input.type',\n      active: true,\n      field: {\n        name: '',\n        type: 'text',\n      },\n      Heading: <span>{t('version:type')}</span>,\n      renderedCells: docs.map((doc) => {\n        const type = doc.input?.type\n\n        return (\n          <Pill key={doc.id} pillStyle={type === 'publish' ? 'success' : 'warning'} size=\"small\">\n            {type === 'publish' && t('version:publish')}\n            {type === 'unpublish' && t('version:unpublish')}\n          </Pill>\n        )\n      }),\n    },\n    {\n      accessor: 'waitUntil',\n      active: true,\n      field: {\n        name: '',\n        type: 'date',\n      },\n      Heading: <span>{t('general:time')}</span>,\n      renderedCells: docs.map((doc) => (\n        <span key={doc.id}>\n          {formatDate({\n            date: doc.waitUntil,\n            i18n,\n            pattern: dateFormat,\n            timezone: doc.input.timezone,\n          })}\n        </span>\n      )),\n    },\n    {\n      accessor: 'input.timezone',\n      active: true,\n      field: {\n        name: '',\n        type: 'text',\n      },\n      Heading: <span>{t('general:timezone')}</span>,\n      renderedCells: docs.map((doc) => {\n        const matchedTimezone = supportedTimezones.find(\n          (timezone) => timezone.value === doc.input.timezone,\n        )\n\n        const timezone = matchedTimezone?.label || doc.input.timezone\n\n        return <span key={doc.id}>{timezone || t('general:noValue')}</span>\n      }),\n    },\n  ]\n\n  if (localization) {\n    columns.push({\n      accessor: 'input.locale',\n      active: true,\n      field: {\n        name: '',\n        type: 'text',\n      },\n      Heading: <span>{t('general:locale')}</span>,\n      renderedCells: docs.map((doc) => {\n        if (doc.input.locale) {\n          const matchedLocale = localization.locales.find(\n            (locale) => locale.code === doc.input.locale,\n          )\n          if (matchedLocale) {\n            return <span key={doc.id}>{getTranslation(matchedLocale.label, i18n)}</span>\n          }\n        }\n\n        return <span key={doc.id}>{t('general:all')}</span>\n      }),\n    })\n  }\n\n  columns.push({\n    accessor: 'delete',\n    active: true,\n    field: {\n      name: 'delete',\n      type: 'text',\n    },\n    Heading: <span>{t('general:delete')}</span>,\n    renderedCells: docs.map((doc) => (\n      <Button\n        buttonStyle=\"ghost\"\n        className=\"schedule-publish__delete\"\n        icon=\"x\"\n        key={doc.id}\n        onClick={(e) => {\n          e.preventDefault()\n          deleteHandler(doc.id)\n        }}\n        tooltip={t('general:delete')}\n      />\n    )),\n  })\n\n  return columns\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/PublishButton/ScheduleDrawer/buildUpcomingScheduleWhere.d.ts

@@ -0,0 +1,13 @@
+import type { Where } from 'payload';
+type Args = {
+    collectionSlug?: string;
+    globalSlug?: string;
+    id?: number | string;
+};
+/**
+ * Builds the `where` query used to find upcoming scheduled
+ * publish/unpublish jobs for a given document or global.
+ */
+export declare const buildUpcomingScheduleWhere: ({ id, collectionSlug, globalSlug }: Args) => Where;
+export {};
+//# sourceMappingURL=buildUpcomingScheduleWhere.d.ts.map

package/dist/elements/PublishButton/ScheduleDrawer/buildUpcomingScheduleWhere.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildUpcomingScheduleWhere.d.ts","sourceRoot":"","sources":["../../../../src/elements/PublishButton/ScheduleDrawer/buildUpcomingScheduleWhere.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,KAAK,IAAI,GAAG;IACV,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACrB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,0BAA0B,uCAAwC,IAAI,KAAG,KAsCrF,CAAA"}

package/dist/elements/PublishButton/ScheduleDrawer/buildUpcomingScheduleWhere.js

@@ -0,0 +1,41 @@
+/**
+ * Builds the `where` query used to find upcoming scheduled
+ * publish/unpublish jobs for a given document or global.
+ */export const buildUpcomingScheduleWhere = ({
+  id,
+  collectionSlug,
+  globalSlug
+}) => {
+  const where = {
+    and: [{
+      taskSlug: {
+        equals: 'schedulePublish'
+      }
+    }, {
+      waitUntil: {
+        greater_than: new Date()
+      }
+    }]
+  };
+  if (collectionSlug) {
+    where.and.push({
+      'input.doc.value': {
+        equals: String(id)
+      }
+    });
+    where.and.push({
+      'input.doc.relationTo': {
+        equals: collectionSlug
+      }
+    });
+  }
+  if (globalSlug) {
+    where.and.push({
+      'input.global': {
+        equals: globalSlug
+      }
+    });
+  }
+  return where;
+};
+//# sourceMappingURL=buildUpcomingScheduleWhere.js.map

package/dist/elements/PublishButton/ScheduleDrawer/buildUpcomingScheduleWhere.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildUpcomingScheduleWhere.js","names":["buildUpcomingScheduleWhere","id","collectionSlug","globalSlug","where","and","taskSlug","equals","waitUntil","greater_than","Date","push","String"],"sources":["../../../../src/elements/PublishButton/ScheduleDrawer/buildUpcomingScheduleWhere.ts"],"sourcesContent":["import type { Where } from 'payload'\n\ntype Args = {\n  collectionSlug?: string\n  globalSlug?: string\n  id?: number | string\n}\n\n/**\n * Builds the `where` query used to find upcoming scheduled\n * publish/unpublish jobs for a given document or global.\n */\nexport const buildUpcomingScheduleWhere = ({ id, collectionSlug, globalSlug }: Args): Where => {\n  const where: Where = {\n    and: [\n      {\n        taskSlug: {\n          equals: 'schedulePublish',\n        },\n      },\n      {\n        waitUntil: {\n          greater_than: new Date(),\n        },\n      },\n    ],\n  }\n\n  if (collectionSlug) {\n    where.and.push({\n      'input.doc.value': {\n        equals: String(id),\n      },\n    })\n    where.and.push({\n      'input.doc.relationTo': {\n        equals: collectionSlug,\n      },\n    })\n  }\n\n  if (globalSlug) {\n    where.and.push({\n      'input.global': {\n        equals: globalSlug,\n      },\n    })\n  }\n\n  return where\n}\n"],"mappings":"AAQA;;;GAIA,OAAO,MAAMA,0BAAA,GAA6BA,CAAC;EAAEC,EAAE;EAAEC,cAAc;EAAEC;AAAU,CAAQ;EACjF,MAAMC,KAAA,GAAe;IACnBC,GAAA,EAAK,CACH;MACEC,QAAA,EAAU;QACRC,MAAA,EAAQ;MACV;IACF,GACA;MACEC,SAAA,EAAW;QACTC,YAAA,EAAc,IAAIC,IAAA;MACpB;IACF;EAEJ;EAEA,IAAIR,cAAA,EAAgB;IAClBE,KAAA,CAAMC,GAAG,CAACM,IAAI,CAAC;MACb,mBAAmB;QACjBJ,MAAA,EAAQK,MAAA,CAAOX,EAAA;MACjB;IACF;IACAG,KAAA,CAAMC,GAAG,CAACM,IAAI,CAAC;MACb,wBAAwB;QACtBJ,MAAA,EAAQL;MACV;IACF;EACF;EAEA,IAAIC,UAAA,EAAY;IACdC,KAAA,CAAMC,GAAG,CAACM,IAAI,CAAC;MACb,gBAAgB;QACdJ,MAAA,EAAQJ;MACV;IACF;EACF;EAEA,OAAOC,KAAA;AACT","ignoreList":[]}

package/dist/elements/PublishButton/ScheduleDrawer/index.css

@@ -0,0 +1,35 @@
+@layer payload-default {
+  .schedule-publish__scheduler {
+    display: flex;
+    flex-direction: column;
+    padding: var(--spacer-2-5);
+    gap: var(--spacer-2-5);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .schedule-publish__section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+  }
+
+  .schedule-publish__type {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    gap: var(--spacer-2-5);
+  }
+
+  .schedule-publish__upcoming {
+    padding: var(--spacer-2-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2-5);
+  }
+
+  .schedule-publish__delete {
+    margin: 0;
+    padding: 0;
+  }
+}

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

@@ -1,9 +1,10 @@
 import type { SchedulePublish } from 'payload';
 import React from 'react';
 import type { PublishType } from './types.js';
-import './index.scss';
+import './index.css';
 type Props = {
     defaultType?: PublishType;
+    onUpcomingChange?: (hasUpcoming: boolean) => void;
     schedulePublishConfig?: SchedulePublish;
     slug: string;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/PublishButton/ScheduleDrawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAU,eAAe,EAAS,MAAM,SAAS,CAAA;AAS7D,OAAO,KAA+B,MAAM,OAAO,CAAA;AAGnD,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,YAAY,CAAA;AAgB5D,OAAO,cAAc,CAAA;AASrB,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,qBAAqB,CAAC,EAAE,eAAe,CAAA;IACvC,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAOD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8U1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/PublishButton/ScheduleDrawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAU,eAAe,EAAE,MAAM,SAAS,CAAA;AAMtD,OAAO,KAA+B,MAAM,OAAO,CAAA;AAGnD,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,YAAY,CAAA;AAc5D,OAAO,aAAa,CAAA;AASpB,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAA;IACjD,qBAAqB,CAAC,EAAE,eAAe,CAAA;IACvC,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAOD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkS1C,CAAA"}

package/dist/elements/PublishButton/ScheduleDrawer/index.js

@@ -2,12 +2,9 @@
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TZDateMini as TZDate } from '@date-fns/tz/date/mini';
-import { useModal } from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
 import { endOfToday, isToday, startOfDay } from 'date-fns';
 import { transpose } from 'date-fns/transpose';
-import { formatAdminURL } from 'payload/shared';
-import * as qs from 'qs-esm';
 import React, { useCallback, useMemo } from 'react';
 import { toast } from 'sonner';
 import { FieldLabel } from '../../../fields/FieldLabel/index.js';
@@ -17,14 +14,12 @@ import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
 import { useDocumentTitle } from '../../../providers/DocumentTitle/index.js';
 import { useServerFunctions } from '../../../providers/ServerFunctions/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
-import { requests } from '../../../utilities/api.js';
 import { Banner } from '../../Banner/index.js';
-import { DrawerCloseButton } from '../../BulkUpload/DrawerCloseButton/index.js';
 import { Button } from '../../Button/index.js';
 import { DatePickerField } from '../../DatePicker/index.js';
 import { Drawer } from '../../Drawer/index.js';
 import { Gutter } from '../../Gutter/index.js';
-import './index.scss';
+import './index.css';
 import { ReactSelect } from '../../ReactSelect/index.js';
 import { ShimmerEffect } from '../../ShimmerEffect/index.js';
 import { Table } from '../../Table/index.js';
@@ -38,11 +33,9 @@ const defaultLocaleOption = {
 export const ScheduleDrawer = ({
   slug,
   defaultType,
+  onUpcomingChange,
   schedulePublishConfig
 }) => {
-  const {
-    toggleModal
-  } = useModal();
   const {
     config: {
       admin: {
@@ -52,10 +45,7 @@ export const ScheduleDrawer = ({
           supportedTimezones
         }
       },
-      localization,
-      routes: {
-        api
-      }
+      localization
     }
   } = useConfig();
   const {
@@ -71,6 +61,7 @@ export const ScheduleDrawer = ({
     t
   } = useTranslation();
   const {
+    getUpcomingScheduledPublish,
     schedulePublish
   } = useServerFunctions();
   const [type, setType] = React.useState(defaultType || 'publish');
@@ -101,52 +92,11 @@ export const ScheduleDrawer = ({
     return [];
   }, [localization, i18n]);
   const fetchUpcoming = React.useCallback(async () => {
-    const query = {
-      sort: 'waitUntil',
-      where: {
-        and: [{
-          taskSlug: {
-            equals: 'schedulePublish'
-          }
-        }, {
-          waitUntil: {
-            greater_than: new Date()
-          }
-        }]
-      }
-    };
-    if (collectionSlug) {
-      query.where.and.push({
-        'input.doc.value': {
-          equals: String(id)
-        }
-      });
-      query.where.and.push({
-        'input.doc.relationTo': {
-          equals: collectionSlug
-        }
-      });
-    }
-    if (globalSlug) {
-      query.where.and.push({
-        'input.global': {
-          equals: globalSlug
-        }
-      });
-    }
-    const {
-      docs
-    } = await requests.post(formatAdminURL({
-      apiRoute: api,
-      path: `/payload-jobs`
-    }), {
-      body: qs.stringify(query),
-      headers: {
-        'Accept-Language': i18n.language,
-        'Content-Type': 'application/x-www-form-urlencoded',
-        'X-Payload-HTTP-Method-Override': 'GET'
-      }
-    }).then(res => res.json());
+    const docs = await getUpcomingScheduledPublish({
+      id,
+      collectionSlug,
+      globalSlug
+    });
     setUpcomingColumns(buildUpcomingColumns({
       dateFormat,
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
@@ -158,7 +108,8 @@ export const ScheduleDrawer = ({
       t
     }));
     setUpcoming(docs);
-  }, [collectionSlug, globalSlug, api, i18n, dateFormat, localization, supportedTimezones, t, id]);
+    onUpcomingChange?.(docs.length > 0);
+  }, [collectionSlug, globalSlug, getUpcomingScheduledPublish, i18n, dateFormat, localization, supportedTimezones, t, id, onUpcomingChange]);
   const deleteHandler = React.useCallback(async id_0 => {
     try {
       await schedulePublish({
@@ -241,84 +192,82 @@ export const ScheduleDrawer = ({
     }
   }, [upcoming, fetchUpcoming]);
   const minTime = useMemo(() => {
-    if (date && isToday(date)) {
+    if (!date || isToday(date)) {
       return new Date();
     }
     return startOfDay(new Date());
   }, [date]);
   return /*#__PURE__*/_jsxs(Drawer, {
     className: baseClass,
-    gutter: false,
-    Header: /*#__PURE__*/_jsxs("div", {
-      className: `${baseClass}__drawer-header`,
-      children: [/*#__PURE__*/_jsx("h2", {
-        title: modalTitle,
-        children: modalTitle
-      }), /*#__PURE__*/_jsx(DrawerCloseButton, {
-        onClick: () => toggleModal(slug)
-      })]
-    }),
     slug: slug,
+    title: modalTitle,
     children: [/*#__PURE__*/_jsxs(Gutter, {
       className: `${baseClass}__scheduler`,
-      children: [/*#__PURE__*/_jsx(FieldLabel, {
-        label: t('version:type'),
-        required: true
-      }), /*#__PURE__*/_jsxs("ul", {
-        className: `${baseClass}__type`,
-        children: [/*#__PURE__*/_jsx("li", {
-          children: /*#__PURE__*/_jsx(Radio, {
-            id: `${slug}-type`,
-            isSelected: type === 'publish',
-            onChange: () => setType('publish'),
-            option: {
-              label: t('version:publish'),
-              value: 'publish'
-            },
-            path: `${slug}-type`,
-            readOnly: processing
-          })
-        }), /*#__PURE__*/_jsx("li", {
-          children: /*#__PURE__*/_jsx(Radio, {
-            id: `${slug}-type`,
-            isSelected: type === 'unpublish',
-            onChange: () => setType('unpublish'),
-            option: {
-              label: t('version:unpublish'),
-              value: 'unpublish'
-            },
-            path: `${slug}-type`,
-            readOnly: processing
-          })
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__section`,
+        children: [/*#__PURE__*/_jsx(FieldLabel, {
+          label: t('version:type'),
+          required: true
+        }), /*#__PURE__*/_jsxs("ul", {
+          className: `${baseClass}__type`,
+          children: [/*#__PURE__*/_jsx("li", {
+            children: /*#__PURE__*/_jsx(Radio, {
+              id: `${slug}-type`,
+              isSelected: type === 'publish',
+              onChange: () => setType('publish'),
+              option: {
+                label: t('version:publish'),
+                value: 'publish'
+              },
+              path: `${slug}-type`,
+              readOnly: processing
+            })
+          }), /*#__PURE__*/_jsx("li", {
+            children: /*#__PURE__*/_jsx(Radio, {
+              id: `${slug}-type`,
+              isSelected: type === 'unpublish',
+              onChange: () => setType('unpublish'),
+              option: {
+                label: t('version:unpublish'),
+                value: 'unpublish'
+              },
+              path: `${slug}-type`,
+              readOnly: processing
+            })
+          })]
         })]
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx(FieldLabel, {
-        label: t('general:time'),
-        path: 'time',
-        required: true
-      }), /*#__PURE__*/_jsx(DatePickerField, {
-        id: "time",
-        maxTime: endOfToday(),
-        minDate: new Date(),
-        minTime: minTime,
-        onChange: e => onChangeDate(e),
-        pickerAppearance: "dayAndTime",
-        readOnly: processing,
-        timeFormat: schedulePublishConfig?.timeFormat,
-        timeIntervals: schedulePublishConfig?.timeIntervals ?? 5,
-        value: displayedValue
-      }), supportedTimezones.length > 0 && /*#__PURE__*/_jsx(TimezonePicker, {
-        id: `timezone-picker`,
-        onChange: setTimezone,
-        options: supportedTimezones,
-        selectedTimezone: timezone
-      }), /*#__PURE__*/_jsx("br", {}), localeOptions.length > 0 && type === 'publish' && /*#__PURE__*/_jsxs(React.Fragment, {
+      }), /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__section`,
+        children: [/*#__PURE__*/_jsx(FieldLabel, {
+          label: t('general:time'),
+          path: 'time',
+          required: true
+        }), /*#__PURE__*/_jsx(DatePickerField, {
+          id: "time",
+          maxTime: endOfToday(),
+          minDate: new Date(),
+          minTime: minTime,
+          onChange: e => onChangeDate(e),
+          pickerAppearance: "dayAndTime",
+          readOnly: processing,
+          timeFormat: schedulePublishConfig?.timeFormat,
+          timeIntervals: schedulePublishConfig?.timeIntervals ?? 5,
+          value: displayedValue
+        }), supportedTimezones.length > 0 && /*#__PURE__*/_jsx(TimezonePicker, {
+          id: `timezone-picker`,
+          onChange: setTimezone,
+          options: supportedTimezones,
+          selectedTimezone: timezone
+        })]
+      }), localeOptions.length > 0 && type === 'publish' && /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__section`,
         children: [/*#__PURE__*/_jsx(FieldLabel, {
           label: t('localization:localeToPublish')
         }), /*#__PURE__*/_jsx(ReactSelect, {
           onChange: e_0 => setLocale(e_0),
           options: localeOptions,
           value: locale
-        }), /*#__PURE__*/_jsx("br", {})]
+        })]
       }), /*#__PURE__*/_jsxs("div", {
         className: `${baseClass}__actions`,
         children: [/*#__PURE__*/_jsx(Button, {
@@ -337,7 +286,6 @@ export const ScheduleDrawer = ({
       children: [/*#__PURE__*/_jsx("h4", {
         children: t('general:upcomingEvents')
       }), !upcoming && /*#__PURE__*/_jsx(ShimmerEffect, {}), upcoming?.length === 0 && /*#__PURE__*/_jsx(Banner, {
-        type: "info",
         children: t('general:noUpcomingEventsScheduled')
       }), upcoming?.length > 0 && /*#__PURE__*/_jsx(Table, {
         appearance: "condensed",