@payloadcms/ui 3.0.0-canary.518fabe → 3.0.0-canary.51be7be

package/dist/elements/SortComplex/index.scss

@@ -1,36 +1,38 @@
 @import '../../scss/styles.scss';
 
-.sort-complex {
-  background: var(--theme-elevation-100);
-  padding: base(0.5);
-  display: flex;
-
-  &__wrap {
-    width: 100%;
+@layer payload-default {
+  .sort-complex {
+    background: var(--theme-elevation-100);
+    padding: base(0.5);
     display: flex;
-    align-items: center;
-  }
-
-  &__select {
-    width: 50%;
-    margin-bottom: base(0.5);
-    padding: 0 base(0.5);
-    flex-grow: 1;
-  }
 
-  &__label {
-    color: var(--theme-elevation-400);
-    margin: base(0.5) 0;
-  }
-
-  @include mid-break {
     &__wrap {
-      display: block;
+      width: 100%;
+      display: flex;
+      align-items: center;
     }
 
     &__select {
-      margin: 0 0 base(0.5);
-      width: 100%;
+      width: 50%;
+      margin-bottom: base(0.5);
+      padding: 0 base(0.5);
+      flex-grow: 1;
+    }
+
+    &__label {
+      color: var(--theme-elevation-400);
+      margin: base(0.5) 0;
+    }
+
+    @include mid-break {
+      &__wrap {
+        display: block;
+      }
+
+      &__select {
+        margin: 0 0 base(0.5);
+        width: 100%;
+      }
     }
   }
 }

package/dist/elements/Status/index.js

@@ -58,7 +58,7 @@ export const Status = () => {
     if (!publishedDoc) {
       statusToRender = "draft";
     } else {
-      if (publishedDoc && unpublishedVersions?.docs?.length <= 1) {
+      if (publishedDoc && unpublishedVersions?.docs?.length <= 0) {
         statusToRender = "published";
       }
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","Modal","useModal","React","useCallback","useState","toast","useForm","useConfig","useDocumentInfo","useLocale","useTranslation","requests","Button","baseClass","Status","$","id","collectionSlug","docPermissions","getVersions","globalSlug","publishedDoc","unpublishedVersions","toggleModal","config","t0","routes","t1","serverURL","api","processing","setProcessing","reset","resetForm","code","locale","i18n","t","unPublishModalSlug","revertModalSlug","statusToRender","docs","length","t2","language","action","url","method","body","res","JSON","stringify","headers","status","data","json","result","doc","success","message","error","performAction","canUpdate","update","permission","t3","t4","t5","_jsxs","Fragment","children","_jsx","buttonStyle","className","onClick","slug","undefined","size","type","t6","title"],"sources":["../../../src/elements/Status/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { useForm } from '../../forms/Form/context.js'\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'\nimport { requests } from '../../utilities/api.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'status'\n\nexport const Status: React.FC = () => {\n  const {\n    id,\n    collectionSlug,\n    docPermissions,\n    getVersions,\n    globalSlug,\n    publishedDoc,\n    unpublishedVersions,\n  } = useDocumentInfo()\n  const { toggleModal } = useModal()\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n  const [processing, setProcessing] = useState(false)\n  const { reset: resetForm } = useForm()\n  const { code: locale } = useLocale()\n  const { i18n, t } = useTranslation()\n\n  const unPublishModalSlug = `confirm-un-publish-${id}`\n  const revertModalSlug = `confirm-revert-${id}`\n\n  let statusToRender: 'changed' | 'draft' | 'published'\n\n  if (unpublishedVersions?.docs?.length > 0 && publishedDoc) {\n    statusToRender = 'changed'\n  } else if (!publishedDoc) {\n    statusToRender = 'draft'\n  } else if (publishedDoc && unpublishedVersions?.docs?.length <= 1) {\n    statusToRender = 'published'\n  }\n\n  const performAction = useCallback(\n    async (action: 'revert' | 'unpublish') => {\n      let url\n      let method\n      let body\n\n      setProcessing(true)\n\n      if (action === 'unpublish') {\n        body = {\n          _status: 'draft',\n        }\n      }\n\n      if (action === 'revert') {\n        body = publishedDoc\n      }\n\n      if (collectionSlug) {\n        url = `${serverURL}${api}/${collectionSlug}/${id}?locale=${locale}&fallback-locale=null`\n        method = 'patch'\n      }\n      if (globalSlug) {\n        url = `${serverURL}${api}/globals/${globalSlug}?locale=${locale}&fallback-locale=null`\n        method = 'post'\n      }\n\n      const res = await requests[method](url, {\n        body: JSON.stringify(body),\n        headers: {\n          'Accept-Language': i18n.language,\n          'Content-Type': 'application/json',\n        },\n      })\n\n      if (res.status === 200) {\n        let data\n        const json = await res.json()\n\n        if (globalSlug) {\n          data = json.result\n        } else if (collectionSlug) {\n          data = json.doc\n        }\n\n        // eslint-disable-next-line @typescript-eslint/no-floating-promises\n        resetForm(data)\n        toast.success(json.message)\n        // eslint-disable-next-line @typescript-eslint/no-floating-promises\n        getVersions()\n      } else {\n        toast.error(t('error:unPublishingDocument'))\n      }\n\n      setProcessing(false)\n      if (action === 'revert') {\n        toggleModal(revertModalSlug)\n      }\n\n      if (action === 'unpublish') {\n        toggleModal(unPublishModalSlug)\n      }\n    },\n    [\n      api,\n      collectionSlug,\n      getVersions,\n      globalSlug,\n      i18n.language,\n      id,\n      locale,\n      publishedDoc,\n      resetForm,\n      revertModalSlug,\n      serverURL,\n      t,\n      toggleModal,\n      unPublishModalSlug,\n    ],\n  )\n\n  const canUpdate = docPermissions?.update?.permission\n\n  if (statusToRender) {\n    return (\n      <div\n        className={baseClass}\n        title={`${t('version:status')}: ${t(`version:${statusToRender}`)}`}\n      >\n        <div className={`${baseClass}__value-wrap`}>\n          <span className={`${baseClass}__label`}>{t('version:status')}:&nbsp;</span>\n          <span className={`${baseClass}__value`}>{t(`version:${statusToRender}`)}</span>\n          {canUpdate && statusToRender === 'published' && (\n            <React.Fragment>\n              &nbsp;&mdash;&nbsp;\n              <Button\n                buttonStyle=\"none\"\n                className={`${baseClass}__action`}\n                onClick={() => toggleModal(unPublishModalSlug)}\n              >\n                {t('version:unpublish')}\n              </Button>\n              <Modal className={`${baseClass}__modal`} slug={unPublishModalSlug}>\n                <div className={`${baseClass}__wrapper`}>\n                  <div className={`${baseClass}__content`}>\n                    <h1>{t('version:confirmUnpublish')}</h1>\n                    <p>{t('version:aboutToUnpublish')}</p>\n                  </div>\n                  <div className={`${baseClass}__controls`}>\n                    <Button\n                      buttonStyle=\"secondary\"\n                      onClick={processing ? undefined : () => toggleModal(unPublishModalSlug)}\n                      size=\"large\"\n                      type=\"button\"\n                    >\n                      {t('general:cancel')}\n                    </Button>\n                    <Button\n                      onClick={processing ? undefined : () => performAction('unpublish')}\n                      size=\"large\"\n                    >\n                      {t(processing ? 'version:unpublishing' : 'general:confirm')}\n                    </Button>\n                  </div>\n                </div>\n              </Modal>\n            </React.Fragment>\n          )}\n          {canUpdate && statusToRender === 'changed' && (\n            <React.Fragment>\n              &nbsp;&mdash;&nbsp;\n              <Button\n                buttonStyle=\"none\"\n                className={`${baseClass}__action`}\n                id=\"action-revert-to-published\"\n                onClick={() => toggleModal(revertModalSlug)}\n              >\n                {t('version:revertToPublished')}\n              </Button>\n              <Modal className={`${baseClass}__modal`} slug={revertModalSlug}>\n                <div className={`${baseClass}__wrapper`}>\n                  <div className={`${baseClass}__content`}>\n                    <h1>{t('version:confirmRevertToSaved')}</h1>\n                    <p>{t('version:aboutToRevertToPublished')}</p>\n                  </div>\n                  <div className={`${baseClass}__controls`}>\n                    <Button\n                      buttonStyle=\"secondary\"\n                      onClick={processing ? undefined : () => toggleModal(revertModalSlug)}\n                      size=\"large\"\n                      type=\"button\"\n                    >\n                      {t('general:cancel')}\n                    </Button>\n                    <Button\n                      id=\"action-revert-to-published-confirm\"\n                      onClick={processing ? undefined : () => performAction('revert')}\n                      size=\"large\"\n                    >\n                      {t(processing ? 'version:reverting' : 'general:confirm')}\n                    </Button>\n                  </div>\n                </div>\n              </Modal>\n            </React.Fragment>\n          )}\n        </div>\n      </div>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,KAAK,EAAEC,QAAQ,QAAQ;AAChC,OAAOC,KAAA,IAASC,WAAW,EAAEC,QAAQ,QAAQ;AAC7C,SAASC,KAAK,QAAQ;AAEtB,SAASC,OAAO,QAAQ;AACxB,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,QAAQ,QAAQ;AACzB,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,GAAmBA,CAAA;EAAA,MAAAC,CAAA,GAAAhB,EAAA;EAC9B;IAAAiB,EAAA;IAAAC,cAAA;IAAAC,cAAA;IAAAC,WAAA;IAAAC,UAAA;IAAAC,YAAA;IAAAC;EAAA,IAQId,eAAA;EACJ;IAAAe;EAAA,IAAwBtB,QAAA;EACxB;IAAAuB,MAAA,EAAAC;EAAA,IAKIlB,SAAA;EAJM;IAAAmB,MAAA,EAAAC,EAAA;IAAAC;EAAA,IAAAH,EAGP;EAFS;IAAAI;EAAA,IAAAF,EAAO;EAInB,OAAAG,UAAA,EAAAC,aAAA,IAAoC3B,QAAA,MAAS;EAC7C;IAAA4B,KAAA,EAAAC;EAAA,IAA6B3B,OAAA;EAC7B;IAAA4B,IAAA,EAAAC;EAAA,IAAyB1B,SAAA;EACzB;IAAA2B,IAAA;IAAAC;EAAA,IAAoB3B,cAAA;EAEpB,MAAA4B,kBAAA,GAA2B,sBAAsBtB,EAAA,EAAI;EACrD,MAAAuB,eAAA,GAAwB,kBAAkBvB,EAAA,EAAI;EAE1CwB,GAAA,CAAAA,cAAA;EAAA,IAEAlB,mBAAA,EAAAmB,IAAA,EAAAC,MAAA,IAAoC,IAAKrB,YAAA;IAC3CmB,cAAA,CAAAA,CAAA,CAAiBA,SAAA;EAAjB;IAAA,KACUnB,YAAA;MACVmB,cAAA,CAAAA,CAAA,CAAiBA,OAAA;IAAjB;MAAA,IACSnB,YAAA,IAAgBC,mBAAA,EAAAmB,IAAA,EAAAC,MAAA,KAAqC;QAC9DF,cAAA,CAAAA,CAAA,CAAiBA,WAAA;MAAjB;IAAA;EAAA;EAAA,IAAAG,EAAA;EAAA,IAAA5B,CAAA,QAAAM,YAAA,IAAAN,CAAA,QAAAE,cAAA,IAAAF,CAAA,QAAAa,SAAA,IAAAb,CAAA,QAAAc,GAAA,IAAAd,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAoB,MAAA,IAAApB,CAAA,QAAAK,UAAA,IAAAL,CAAA,QAAAqB,IAAA,CAAAQ,QAAA,IAAA7B,CAAA,QAAAkB,SAAA,IAAAlB,CAAA,QAAAI,WAAA,IAAAJ,CAAA,SAAAsB,CAAA,IAAAtB,CAAA,SAAAQ,WAAA,IAAAR,CAAA,SAAAwB,eAAA,IAAAxB,CAAA,SAAAuB,kBAAA;IAIAK,EAAA,SAAAE,MAAA;MACMC,GAAA,CAAAA,GAAA;MACAC,GAAA,CAAAA,MAAA;MACAC,GAAA,CAAAA,IAAA;MAEJjB,aAAA,KAAc;MAAA,IAEVc,MAAA,KAAW;QACbG,IAAA,CAAAA,CAAA,CAAAA;UAAAA,QAAA,CACWA;QAAAA,CAAA;MADX;MAAA,IAKEH,MAAA,KAAW;QACbG,IAAA,CAAAA,CAAA,CAAO3B,YAAA;MAAP;MAAA,IAGEJ,cAAA;QACF6B,GAAA,CAAAA,CAAA,CAAMA,GAAGlB,SAAA,GAAYC,GAAA,IAAOZ,cAAA,IAAkBD,EAAA,WAAamB,MAAA,uBAA6B;QACxFY,MAAA,CAAAA,CAAA,CAASA,OAAA;MAAT;MAAA,IAEE3B,UAAA;QACF0B,GAAA,CAAAA,CAAA,CAAMA,GAAGlB,SAAA,GAAYC,GAAA,YAAeT,UAAA,WAAqBe,MAAA,uBAA6B;QACtFY,MAAA,CAAAA,CAAA,CAASA,MAAA;MAAT;MAGF,MAAAE,GAAA,SAAkBtC,QAAA,CAASoC,MAAA,EAAQD,GAAA;QAAAE,IAAA,EAC3BE,IAAA,CAAAC,SAAA,CAAeH,IAAA;QAAAI,OAAA;UAAA,mBAEAhB,IAAA,CAAAQ,QAAA;UAAA,gBACH;QAAA;MAAA,CAEpB;MAAA,IAEIK,GAAA,CAAAI,MAAA,QAAe;QACbC,GAAA,CAAAA,IAAA;QACJ,MAAAC,IAAA,SAAmBN,GAAA,CAAAM,IAAA,CAAQ;QAAA,IAEvBnC,UAAA;UACFkC,IAAA,CAAAA,CAAA,CAAOC,IAAA,CAAAC,MAAA;QAAP;UAAA,IACSvC,cAAA;YACTqC,IAAA,CAAAA,CAAA,CAAOC,IAAA,CAAAE,GAAA;UAAP;QAAA;QAIFxB,SAAA,CAAUqB,IAAA;QACVjD,KAAA,CAAAqD,OAAA,CAAcH,IAAA,CAAAI,OAAY;QAE1BxC,WAAA;MAAA;QAEAd,KAAA,CAAAuD,KAAA,CAAYvB,CAAA,CAAE;MAAA;MAGhBN,aAAA,MAAc;MAAA,IACVc,MAAA,KAAW;QACbtB,WAAA,CAAYgB,eAAA;MAAA;MAAA,IAGVM,MAAA,KAAW;QACbtB,WAAA,CAAYe,kBAAA;MAAA;IAAA;IAEhBvB,CAAA,MAAAM,YAAA;IAAAN,CAAA,MAAAE,cAAA;IAAAF,CAAA,MAAAa,SAAA;IAAAb,CAAA,MAAAc,GAAA;IAAAd,CAAA,MAAAC,EAAA;IAAAD,CAAA,MAAAoB,MAAA;IAAApB,CAAA,MAAAK,UAAA;IAAAL,CAAA,MAAAqB,IAAA,CAAAQ,QAAA;IAAA7B,CAAA,MAAAkB,SAAA;IAAAlB,CAAA,MAAAI,WAAA;IAAAJ,CAAA,OAAAsB,CAAA;IAAAtB,CAAA,OAAAQ,WAAA;IAAAR,CAAA,OAAAwB,eAAA;IAAAxB,CAAA,OAAAuB,kBAAA;IAAAvB,CAAA,OAAA4B,EAAA;EAAA;IAAAA,EAAA,GAAA5B,CAAA;EAAA;EA9DF,MAAA8C,aAAA,GAAsBlB,EA8EnB;EAGH,MAAAmB,SAAA,GAAkB5C,cAAA,EAAA6C,MAAA,EAAAC,UAAA;EAAwB,IAEtCxB,cAAA;IAIS,MAAAyB,EAAA,MAAG5B,CAAA,CAAE,sBAAsBA,CAAA,CAAE,WAAWG,cAAA,EAAgB,GAAG;IAAA,IAAA0B,EAAA;IAAA,IAAAnD,CAAA,SAAAsB,CAAA,IAAAtB,CAAA,SAAAyB,cAAA,IAAAzB,CAAA,SAAA+C,SAAA,IAAA/C,CAAA,SAAAQ,WAAA,IAAAR,CAAA,SAAAuB,kBAAA,IAAAvB,CAAA,SAAAe,UAAA,IAAAf,CAAA,SAAA8C,aAAA,IAAA9C,CAAA,SAAAwB,eAAA,IAAAxB,CAAA,SAAAkD,EAAA;MAAA,IAAAE,EAAA;MAAA,IAAApD,CAAA,SAAA+C,SAAA,IAAA/C,CAAA,SAAAyB,cAAA,IAAAzB,CAAA,SAAAQ,WAAA,IAAAR,CAAA,SAAAuB,kBAAA,IAAAvB,CAAA,SAAAsB,CAAA,IAAAtB,CAAA,SAAAe,UAAA,IAAAf,CAAA,SAAA8C,aAAA;QAK/DM,EAAA,GAAAL,SAAA,IAAatB,cAAA,KAAmB,eAC/B4B,KAAA,CAAAlE,KAAA,CAAAmE,QAAA;UAAAC,QAAA,GAAgB,kBAEdC,IAAA,CAAA3D,MAAA;YAAA4D,WAAA,EACc;YAAAC,SAAA,EACD,GAAA5D,SAAA,UAAsB;YAAA6D,OAAA,EAAAA,CAAA,KAClBnD,WAAA,CAAYe,kBAAA;YAAAgC,QAAA,EAE1BjC,CAAA,CAAE;UAAA,C,GAELkC,IAAA,CAAAvE,KAAA;YAAAyE,SAAA,EAAkB,GAAA5D,SAAA,SAAqB;YAAA8D,IAAA,EAAQrC,kBAAA;YAAAgC,QAAA,EAC7CF,KAAA,CAAC;cAAAK,SAAA,EAAe,GAAA5D,SAAA,WAAuB;cAAAyD,QAAA,GACrCF,KAAA,CAAC;gBAAAK,SAAA,EAAe,GAAA5D,SAAA,WAAuB;gBAAAyD,QAAA,GACrCC,IAAA,CAAC;kBAAAD,QAAA,EAAIjC,CAAA,CAAE;gBAAA,C,GACPkC,IAAA,CAAC;kBAAAD,QAAA,EAAGjC,CAAA,CAAE;gBAAA,C;kBAER+B,KAAA,CAAC;gBAAAK,SAAA,EAAe,GAAA5D,SAAA,YAAwB;gBAAAyD,QAAA,GACtCC,IAAA,CAAA3D,MAAA;kBAAA4D,WAAA,EACc;kBAAAE,OAAA,EACH5C,UAAA,GAAA8C,SAAA,SAA+BrD,WAAA,CAAYe,kBAAA;kBAAAuC,IAAA,EAC/C;kBAAAC,IAAA,EACA;kBAAAR,QAAA,EAEJjC,CAAA,CAAE;gBAAA,C,GAELkC,IAAA,CAAA3D,MAAA;kBAAA8D,OAAA,EACW5C,UAAA,GAAA8C,SAAA,SAA+Bf,aAAA,CAAc;kBAAAgB,IAAA,EACjD;kBAAAP,QAAA,EAEJjC,CAAA,CAAEP,UAAA,GAAa,yBAAyB;gBAAA,C;;;;;;;;;;;;;;;;;;QAOpDiD,EAAA,GAAAjB,SAAA,IAAatB,cAAA,KAAmB,aAC/B4B,KAAA,CAAAlE,KAAA,CAAAmE,QAAA;UAAAC,QAAA,GAAgB,kBAEdC,IAAA,CAAA3D,MAAA;YAAA4D,WAAA,EACc;YAAAC,SAAA,EACD,GAAA5D,SAAA,UAAsB;YAAAG,EAAA,EAC9B;YAAA0D,OAAA,EAAAA,CAAA,KACYnD,WAAA,CAAYgB,eAAA;YAAA+B,QAAA,EAE1BjC,CAAA,CAAE;UAAA,C,GAELkC,IAAA,CAAAvE,KAAA;YAAAyE,SAAA,EAAkB,GAAA5D,SAAA,SAAqB;YAAA8D,IAAA,EAAQpC,eAAA;YAAA+B,QAAA,EAC7CF,KAAA,CAAC;cAAAK,SAAA,EAAe,GAAA5D,SAAA,WAAuB;cAAAyD,QAAA,GACrCF,KAAA,CAAC;gBAAAK,SAAA,EAAe,GAAA5D,SAAA,WAAuB;gBAAAyD,QAAA,GACrCC,IAAA,CAAC;kBAAAD,QAAA,EAAIjC,CAAA,CAAE;gBAAA,C,GACPkC,IAAA,CAAC;kBAAAD,QAAA,EAAGjC,CAAA,CAAE;gBAAA,C;kBAER+B,KAAA,CAAC;gBAAAK,SAAA,EAAe,GAAA5D,SAAA,YAAwB;gBAAAyD,QAAA,GACtCC,IAAA,CAAA3D,MAAA;kBAAA4D,WAAA,EACc;kBAAAE,OAAA,EACH5C,UAAA,GAAA8C,SAAA,SAA+BrD,WAAA,CAAYgB,eAAA;kBAAAsC,IAAA,EAC/C;kBAAAC,IAAA,EACA;kBAAAR,QAAA,EAEJjC,CAAA,CAAE;gBAAA,C,GAELkC,IAAA,CAAA3D,MAAA;kBAAAI,EAAA,EACK;kBAAA0D,OAAA,EACM5C,UAAA,GAAA8C,SAAA,SAA+Bf,aAAA,CAAc;kBAAAgB,IAAA,EACjD;kBAAAP,QAAA,EAEJjC,CAAA,CAAEP,UAAA,GAAa,sBAAsB;gBAAA,C;;;;;;;;;;;;;;;;MA1EtDoC,EAAA,GAAAK,IAAA,CAAC;QAAAE,SAAA,EAAA5D,SAAA;QAAAmE,KAAA,EAEQf,EAA2D;QAAAK,QAAA,EAElEF,KAAA,CAAC;UAAAK,SAAA,EAAe,GAAA5D,SAAA,cAA0B;UAAAyD,QAAA,GACxCF,KAAA,CAAC;YAAAK,SAAA,EAAgB,GAAA5D,SAAA,SAAqB;YAAAyD,QAAA,GAAGjC,CAAA,CAAE,mBAAkB;UAAA,C,GAC7DkC,IAAA,CAAC;YAAAE,SAAA,EAAgB,GAAA5D,SAAA,SAAqB;YAAAyD,QAAA,EAAGjC,CAAA,CAAE,WAAWG,cAAA,EAAgB;UAAA,C,GACrE2B,E,EAoCAY,E;;;;;;;;;;;;;;;;WA3CLb,E;;;CAuFN","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","Modal","useModal","React","useCallback","useState","toast","useForm","useConfig","useDocumentInfo","useLocale","useTranslation","requests","Button","baseClass","Status","$","id","collectionSlug","docPermissions","getVersions","globalSlug","publishedDoc","unpublishedVersions","toggleModal","config","t0","routes","t1","serverURL","api","processing","setProcessing","reset","resetForm","code","locale","i18n","t","unPublishModalSlug","revertModalSlug","statusToRender","docs","length","t2","language","action","url","method","body","res","JSON","stringify","headers","status","data","json","result","doc","success","message","error","performAction","canUpdate","update","permission","t3","t4","t5","_jsxs","Fragment","children","_jsx","buttonStyle","className","onClick","slug","undefined","size","type","t6","title"],"sources":["../../../src/elements/Status/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { useForm } from '../../forms/Form/context.js'\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'\nimport { requests } from '../../utilities/api.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'status'\n\nexport const Status: React.FC = () => {\n  const {\n    id,\n    collectionSlug,\n    docPermissions,\n    getVersions,\n    globalSlug,\n    publishedDoc,\n    unpublishedVersions,\n  } = useDocumentInfo()\n  const { toggleModal } = useModal()\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n  const [processing, setProcessing] = useState(false)\n  const { reset: resetForm } = useForm()\n  const { code: locale } = useLocale()\n  const { i18n, t } = useTranslation()\n\n  const unPublishModalSlug = `confirm-un-publish-${id}`\n  const revertModalSlug = `confirm-revert-${id}`\n\n  let statusToRender: 'changed' | 'draft' | 'published'\n\n  if (unpublishedVersions?.docs?.length > 0 && publishedDoc) {\n    statusToRender = 'changed'\n  } else if (!publishedDoc) {\n    statusToRender = 'draft'\n  } else if (publishedDoc && unpublishedVersions?.docs?.length <= 0) {\n    statusToRender = 'published'\n  }\n\n  const performAction = useCallback(\n    async (action: 'revert' | 'unpublish') => {\n      let url\n      let method\n      let body\n\n      setProcessing(true)\n\n      if (action === 'unpublish') {\n        body = {\n          _status: 'draft',\n        }\n      }\n\n      if (action === 'revert') {\n        body = publishedDoc\n      }\n\n      if (collectionSlug) {\n        url = `${serverURL}${api}/${collectionSlug}/${id}?locale=${locale}&fallback-locale=null`\n        method = 'patch'\n      }\n      if (globalSlug) {\n        url = `${serverURL}${api}/globals/${globalSlug}?locale=${locale}&fallback-locale=null`\n        method = 'post'\n      }\n\n      const res = await requests[method](url, {\n        body: JSON.stringify(body),\n        headers: {\n          'Accept-Language': i18n.language,\n          'Content-Type': 'application/json',\n        },\n      })\n\n      if (res.status === 200) {\n        let data\n        const json = await res.json()\n\n        if (globalSlug) {\n          data = json.result\n        } else if (collectionSlug) {\n          data = json.doc\n        }\n\n        // eslint-disable-next-line @typescript-eslint/no-floating-promises\n        resetForm(data)\n        toast.success(json.message)\n        // eslint-disable-next-line @typescript-eslint/no-floating-promises\n        getVersions()\n      } else {\n        toast.error(t('error:unPublishingDocument'))\n      }\n\n      setProcessing(false)\n      if (action === 'revert') {\n        toggleModal(revertModalSlug)\n      }\n\n      if (action === 'unpublish') {\n        toggleModal(unPublishModalSlug)\n      }\n    },\n    [\n      api,\n      collectionSlug,\n      getVersions,\n      globalSlug,\n      i18n.language,\n      id,\n      locale,\n      publishedDoc,\n      resetForm,\n      revertModalSlug,\n      serverURL,\n      t,\n      toggleModal,\n      unPublishModalSlug,\n    ],\n  )\n\n  const canUpdate = docPermissions?.update?.permission\n\n  if (statusToRender) {\n    return (\n      <div\n        className={baseClass}\n        title={`${t('version:status')}: ${t(`version:${statusToRender}`)}`}\n      >\n        <div className={`${baseClass}__value-wrap`}>\n          <span className={`${baseClass}__label`}>{t('version:status')}:&nbsp;</span>\n          <span className={`${baseClass}__value`}>{t(`version:${statusToRender}`)}</span>\n          {canUpdate && statusToRender === 'published' && (\n            <React.Fragment>\n              &nbsp;&mdash;&nbsp;\n              <Button\n                buttonStyle=\"none\"\n                className={`${baseClass}__action`}\n                onClick={() => toggleModal(unPublishModalSlug)}\n              >\n                {t('version:unpublish')}\n              </Button>\n              <Modal className={`${baseClass}__modal`} slug={unPublishModalSlug}>\n                <div className={`${baseClass}__wrapper`}>\n                  <div className={`${baseClass}__content`}>\n                    <h1>{t('version:confirmUnpublish')}</h1>\n                    <p>{t('version:aboutToUnpublish')}</p>\n                  </div>\n                  <div className={`${baseClass}__controls`}>\n                    <Button\n                      buttonStyle=\"secondary\"\n                      onClick={processing ? undefined : () => toggleModal(unPublishModalSlug)}\n                      size=\"large\"\n                      type=\"button\"\n                    >\n                      {t('general:cancel')}\n                    </Button>\n                    <Button\n                      onClick={processing ? undefined : () => performAction('unpublish')}\n                      size=\"large\"\n                    >\n                      {t(processing ? 'version:unpublishing' : 'general:confirm')}\n                    </Button>\n                  </div>\n                </div>\n              </Modal>\n            </React.Fragment>\n          )}\n          {canUpdate && statusToRender === 'changed' && (\n            <React.Fragment>\n              &nbsp;&mdash;&nbsp;\n              <Button\n                buttonStyle=\"none\"\n                className={`${baseClass}__action`}\n                id=\"action-revert-to-published\"\n                onClick={() => toggleModal(revertModalSlug)}\n              >\n                {t('version:revertToPublished')}\n              </Button>\n              <Modal className={`${baseClass}__modal`} slug={revertModalSlug}>\n                <div className={`${baseClass}__wrapper`}>\n                  <div className={`${baseClass}__content`}>\n                    <h1>{t('version:confirmRevertToSaved')}</h1>\n                    <p>{t('version:aboutToRevertToPublished')}</p>\n                  </div>\n                  <div className={`${baseClass}__controls`}>\n                    <Button\n                      buttonStyle=\"secondary\"\n                      onClick={processing ? undefined : () => toggleModal(revertModalSlug)}\n                      size=\"large\"\n                      type=\"button\"\n                    >\n                      {t('general:cancel')}\n                    </Button>\n                    <Button\n                      id=\"action-revert-to-published-confirm\"\n                      onClick={processing ? undefined : () => performAction('revert')}\n                      size=\"large\"\n                    >\n                      {t(processing ? 'version:reverting' : 'general:confirm')}\n                    </Button>\n                  </div>\n                </div>\n              </Modal>\n            </React.Fragment>\n          )}\n        </div>\n      </div>\n    )\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Status/index.scss

@@ -1,60 +1,62 @@
 @import '../../scss/styles.scss';
 
-.status {
-  &__label {
-    color: var(--theme-elevation-500);
-  }
+@layer payload-default {
+  .status {
+    &__label {
+      color: var(--theme-elevation-500);
+    }
 
-  &__value {
-    font-weight: 600;
-  }
+    &__value {
+      font-weight: 600;
+    }
 
-  &__value-wrap {
-    white-space: nowrap;
-  }
+    &__value-wrap {
+      white-space: nowrap;
+    }
 
-  &__action {
-    text-decoration: underline;
-  }
+    &__action {
+      text-decoration: underline;
+    }
 
-  &__modal {
-    @include blur-bg;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
+    &__modal {
+      @include blur-bg;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
 
-    &__toggle {
-      @extend %btn-reset;
+      &__toggle {
+        @extend %btn-reset;
+      }
     }
-  }
 
-  &__wrapper {
-    z-index: 1;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: base(0.8);
-    padding: base(2);
-    max-width: base(36);
-  }
+    &__wrapper {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: base(0.8);
+      padding: base(2);
+      max-width: base(36);
+    }
 
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: base(0.4);
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: base(0.4);
 
-    > * {
-      margin: 0;
+      > * {
+        margin: 0;
+      }
     }
-  }
 
-  &__controls {
-    display: flex;
-    gap: base(0.4);
+    &__controls {
+      display: flex;
+      gap: base(0.4);
 
-    .btn {
-      margin: 0;
+      .btn {
+        margin: 0;
+      }
     }
   }
 }

package/dist/elements/StayLoggedIn/index.scss

@@ -1,37 +1,39 @@
 @import '../../scss/styles.scss';
 
-.stay-logged-in {
-  @include blur-bg;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-
-  &__wrapper {
-    z-index: 1;
-    position: relative;
+@layer payload-default {
+  .stay-logged-in {
+    @include blur-bg;
     display: flex;
-    flex-direction: column;
-    gap: var(--base);
-    padding: base(2);
-  }
+    align-items: center;
+    justify-content: center;
+    height: 100%;
 
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--base);
+    &__wrapper {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: var(--base);
+      padding: base(2);
+    }
 
-    > * {
-      margin: 0;
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--base);
+
+      > * {
+        margin: 0;
+      }
     }
-  }
 
-  &__controls {
-    display: flex;
-    gap: var(--base);
+    &__controls {
+      display: flex;
+      gap: var(--base);
 
-    .btn {
-      margin: 0;
+      .btn {
+        margin: 0;
+      }
     }
   }
 }

package/dist/elements/StepNav/index.scss

@@ -1,80 +1,81 @@
 @import '../../scss/styles.scss';
+@layer payload-default {
+  .step-nav {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) / 2);
 
-.step-nav {
-  display: flex;
-  align-items: center;
-  gap: calc(var(--base) / 2);
-
-  &::after {
-    content: ' ';
-    position: sticky;
-    top: 0;
-    right: 0;
-    width: var(--base);
-    background: linear-gradient(to right, transparent, var(--theme-bg));
-  }
+    &::after {
+      content: ' ';
+      position: sticky;
+      top: 0;
+      right: 0;
+      width: var(--base);
+      background: linear-gradient(to right, transparent, var(--theme-bg));
+    }
 
-  // Use a pseudo element for the accessability so that it doesn't take up DOM space
-  // Also because the parent element has `overflow: hidden` which would clip an outline
-  &__home {
-    width: 18px;
-    height: 18px;
-    position: relative;
+    // Use a pseudo element for the accessability so that it doesn't take up DOM space
+    // Also because the parent element has `overflow: hidden` which would clip an outline
+    &__home {
+      width: 18px;
+      height: 18px;
+      position: relative;
 
-    &:focus-visible {
-      outline: none;
+      &:focus-visible {
+        outline: none;
 
-      &::after {
-        content: '';
-        border: var(--accessibility-outline);
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        pointer-events: none;
+        &::after {
+          content: '';
+          border: var(--accessibility-outline);
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          pointer-events: none;
+        }
       }
     }
-  }
 
-  * {
-    display: block;
-  }
+    * {
+      display: block;
+    }
 
-  a {
-    border: 0;
-    display: flex;
-    align-items: center;
-    font-weight: 600;
-    text-decoration: none;
+    a {
+      border: 0;
+      display: flex;
+      align-items: center;
+      font-weight: 600;
+      text-decoration: none;
 
-    label {
-      cursor: pointer;
-    }
+      label {
+        cursor: pointer;
+      }
 
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
     }
-  }
 
-  span {
-    max-width: base(8);
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
+    span {
+      max-width: base(8);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
 
-  @include mid-break {
-    .step-nav {
-      &__home {
-        width: 16px;
-        height: 16px;
+    @include mid-break {
+      .step-nav {
+        &__home {
+          width: 16px;
+          height: 16px;
+        }
       }
     }
-  }
 
-  @include small-break {
-    gap: base(0.4);
+    @include small-break {
+      gap: base(0.4);
+    }
   }
 }

package/dist/elements/Table/DefaultCell/fields/Checkbox/index.scss

@@ -1,22 +1,24 @@
 @import '../../../../../scss/styles.scss';
 
-.bool-cell {
-  font-size: 1rem;
-  line-height: base(1);
-  border: 0;
-  display: inline-flex;
-  vertical-align: middle;
-  background: var(--theme-elevation-150);
-  color: var(--theme-elevation-800);
-  border-radius: $style-radius-s;
-  padding: 0 base(0.25);
-  [dir='ltr'] & {
-    padding-left: base(0.0875 + 0.25);
-  }
-  [dir='rtl'] & {
-    padding-right: base(0.0875 + 0.25);
-  }
+@layer payload-default {
+  .bool-cell {
+    font-size: 1rem;
+    line-height: base(1);
+    border: 0;
+    display: inline-flex;
+    vertical-align: middle;
+    background: var(--theme-elevation-150);
+    color: var(--theme-elevation-800);
+    border-radius: $style-radius-s;
+    padding: 0 base(0.25);
+    [dir='ltr'] & {
+      padding-left: base(0.0875 + 0.25);
+    }
+    [dir='rtl'] & {
+      padding-right: base(0.0875 + 0.25);
+    }
 
-  background: var(--theme-elevation-100);
-  color: var(--theme-elevation-800);
+    background: var(--theme-elevation-100);
+    color: var(--theme-elevation-800);
+  }
 }

package/dist/elements/Table/DefaultCell/fields/Code/index.scss

@@ -1,27 +1,29 @@
 @import '../../../../../scss/styles.scss';
 
-.code-cell {
-  font-size: 1rem;
-  line-height: base(1);
-  border: 0;
-  display: inline-flex;
-  vertical-align: middle;
-  background: var(--theme-elevation-150);
-  color: var(--theme-elevation-800);
-  border-radius: $style-radius-m;
-  padding: 0 base(0.25);
-  background: var(--theme-elevation-100);
-  color: var(--theme-elevation-800);
+@layer payload-default {
+  .code-cell {
+    font-size: 1rem;
+    line-height: base(1);
+    border: 0;
+    display: inline-flex;
+    vertical-align: middle;
+    background: var(--theme-elevation-150);
+    color: var(--theme-elevation-800);
+    border-radius: $style-radius-m;
+    padding: 0 base(0.25);
+    background: var(--theme-elevation-100);
+    color: var(--theme-elevation-800);
 
-  [dir='ltr'] & {
-    padding-left: base(0.0875 + 0.25);
-  }
+    [dir='ltr'] & {
+      padding-left: base(0.0875 + 0.25);
+    }
 
-  [dir='rtl'] & {
-    padding-right: base(0.0875 + 0.25);
-  }
+    [dir='rtl'] & {
+      padding-right: base(0.0875 + 0.25);
+    }
 
-  &:hover {
-    text-decoration: inherit;
+    &:hover {
+      text-decoration: inherit;
+    }
   }
 }

package/dist/elements/Table/DefaultCell/fields/File/index.scss

@@ -1,23 +1,25 @@
 @import '../../../../../scss/styles.scss';
 
-.file {
-  display: flex;
-  flex-wrap: nowrap;
+@layer payload-default {
+  .file {
+    display: flex;
+    flex-wrap: nowrap;
 
-  &__thumbnail {
-    display: inline-block;
-    max-width: calc(var(--base) * 2);
-    height: calc(var(--base) * 2);
-    border-radius: var(--style-radius-s);
-  }
-
-  &__filename {
-    align-self: center;
-    [dir='ltr'] & {
-      margin-left: var(--base);
+    &__thumbnail {
+      display: inline-block;
+      max-width: calc(var(--base) * 2);
+      height: calc(var(--base) * 2);
+      border-radius: var(--style-radius-s);
     }
-    [dir='rtl'] & {
-      margin-right: var(--base);
+
+    &__filename {
+      align-self: center;
+      [dir='ltr'] & {
+        margin-left: var(--base);
+      }
+      [dir='rtl'] & {
+        margin-right: var(--base);
+      }
     }
   }
 }

package/dist/elements/Table/DefaultCell/fields/JSON/index.scss

@@ -1,22 +1,24 @@
 @import '../../../../../scss/styles.scss';
 
-.json-cell {
-  font-size: 1rem;
-  line-height: base(1);
-  border: 0;
-  display: inline-flex;
-  vertical-align: middle;
-  background: var(--theme-elevation-150);
-  color: var(--theme-elevation-800);
-  border-radius: $style-radius-m;
-  padding: 0 base(0.25);
-  [dir='ltr'] & {
-    padding-left: base(0.0875 + 0.25);
-  }
-  [dir='rtl'] & {
-    padding-right: base(0.0875 + 0.25);
-  }
+@layer payload-default {
+  .json-cell {
+    font-size: 1rem;
+    line-height: base(1);
+    border: 0;
+    display: inline-flex;
+    vertical-align: middle;
+    background: var(--theme-elevation-150);
+    color: var(--theme-elevation-800);
+    border-radius: $style-radius-m;
+    padding: 0 base(0.25);
+    [dir='ltr'] & {
+      padding-left: base(0.0875 + 0.25);
+    }
+    [dir='rtl'] & {
+      padding-right: base(0.0875 + 0.25);
+    }
 
-  background: var(--theme-elevation-100);
-  color: var(--theme-elevation-800);
+    background: var(--theme-elevation-100);
+    color: var(--theme-elevation-800);
+  }
 }

package/dist/elements/Table/DefaultCell/fields/Relationship/index.d.ts

@@ -1,7 +1,6 @@
-import type { DefaultCellComponentProps, RelationshipFieldClient, UploadFieldClient } from 'payload';
+import type { DefaultCellComponentProps, JoinFieldClient, RelationshipFieldClient, UploadFieldClient } from 'payload';
 import React from 'react';
 import './index.scss';
-export interface RelationshipCellProps extends DefaultCellComponentProps<any, RelationshipFieldClient | UploadFieldClient> {
-}
+export type RelationshipCellProps = DefaultCellComponentProps<any, JoinFieldClient | RelationshipFieldClient | UploadFieldClient>;
 export declare const RelationshipCell: React.FC<RelationshipCellProps>;
 //# sourceMappingURL=index.d.ts.map