@payloadcms/ui 4.0.0-internal.ccea85d → 4.0.0-internal.cd47d20

package/dist/elements/SortHeader/index.js

@@ -2,31 +2,31 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { SortDownIcon } from '../../icons/Sort/index.js';
+import React, { useRef } from 'react';
+import { SortDownIcon, SortUpIcon } from '../../icons/Sort/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { useAriaSort } from '../Table/useAriaSort.js';
 import './index.css';
 const baseClass = 'sort-header';
 function useSort() {
-  const $ = _c(7);
+  const $ = _c(8);
   const {
     handleSortChange,
     orderableFieldName,
     query
   } = useListQuery();
   const querySort = Array.isArray(query.sort) ? query.sort[0] : query.sort;
-  const isActive = querySort === orderableFieldName;
+  const isAscending = querySort === orderableFieldName;
+  const isDescending = querySort === `-${orderableFieldName}`;
+  const isActive = isAscending || isDescending;
   let t0;
-  if ($[0] !== handleSortChange || $[1] !== isActive || $[2] !== orderableFieldName) {
+  if ($[0] !== handleSortChange || $[1] !== isAscending || $[2] !== orderableFieldName) {
     t0 = () => {
-      if (isActive) {
-        return;
-      }
-      handleSortChange(orderableFieldName);
+      handleSortChange(isAscending ? `-${orderableFieldName}` : orderableFieldName);
     };
     $[0] = handleSortChange;
-    $[1] = isActive;
+    $[1] = isAscending;
     $[2] = orderableFieldName;
     $[3] = t0;
   } else {
@@ -34,63 +34,48 @@ function useSort() {
   }
   const handleSortPress = t0;
   let t1;
-  if ($[4] !== handleSortPress || $[5] !== isActive) {
+  if ($[4] !== handleSortPress || $[5] !== isActive || $[6] !== isAscending) {
     t1 = {
       handleSortPress,
-      isActive
+      isActive,
+      isAscending
     };
     $[4] = handleSortPress;
     $[5] = isActive;
-    $[6] = t1;
+    $[6] = isAscending;
+    $[7] = t1;
   } else {
-    t1 = $[6];
+    t1 = $[7];
   }
   return t1;
 }
 export const SortHeader = props => {
-  const $ = _c(8);
   const {
     appearance
   } = props;
   const {
     handleSortPress,
-    isActive
+    isActive,
+    isAscending
   } = useSort();
   const {
     t
   } = useTranslation();
-  let t0;
-  if ($[0] !== appearance || $[1] !== handleSortPress || $[2] !== isActive || $[3] !== t) {
-    const t1 = t("general:sortByLabelDirection", {
-      direction: t("general:ascending"),
-      label: "Order"
-    });
-    const t2 = appearance && `${baseClass}--appearance-${appearance}`;
-    const t3 = isActive && `${baseClass}--active`;
-    let t4;
-    if ($[5] !== t2 || $[6] !== t3) {
-      t4 = [baseClass, t2, t3].filter(Boolean);
-      $[5] = t2;
-      $[6] = t3;
-      $[7] = t4;
-    } else {
-      t4 = $[7];
-    }
-    t0 = _jsx("button", {
-      "aria-label": t1,
-      className: t4.join(" "),
-      onClick: handleSortPress,
-      type: "button",
-      children: _jsx(SortDownIcon, {})
-    });
-    $[0] = appearance;
-    $[1] = handleSortPress;
-    $[2] = isActive;
-    $[3] = t;
-    $[4] = t0;
-  } else {
-    t0 = $[4];
-  }
-  return t0;
+  const buttonRef = useRef(null);
+  useAriaSort({
+    ref: buttonRef,
+    value: isActive ? isAscending ? 'ascending' : 'descending' : undefined
+  });
+  return /*#__PURE__*/_jsx("button", {
+    "aria-label": t('general:sortByLabelDirection', {
+      direction: isAscending ? t('general:descending') : t('general:ascending'),
+      label: 'Order'
+    }),
+    className: [baseClass, appearance && `${baseClass}--appearance-${appearance}`, isActive && `${baseClass}--active`].filter(Boolean).join(' '),
+    onClick: handleSortPress,
+    ref: buttonRef,
+    type: "button",
+    children: isAscending ? /*#__PURE__*/_jsx(SortUpIcon, {}) : /*#__PURE__*/_jsx(SortDownIcon, {})
+  });
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","SortDownIcon","useListQuery","useTranslation","baseClass","useSort","$","handleSortChange","orderableFieldName","query","querySort","Array","isArray","sort","isActive","t0","handleSortPress","t1","SortHeader","props","appearance","t","direction","label","t2","t3","t4","filter","Boolean","_jsx","className","join","onClick","type","children"],"sources":["../../../src/elements/SortHeader/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { SortDownIcon } from '../../icons/Sort/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nexport type SortHeaderProps = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly disable?: boolean\n}\n\nconst baseClass = 'sort-header'\n\nfunction useSort() {\n  const { handleSortChange, orderableFieldName, query } = useListQuery()\n  const querySort = Array.isArray(query.sort) ? query.sort[0] : query.sort\n  const isActive = querySort === orderableFieldName\n\n  const handleSortPress = () => {\n    // If it's already sorted by the \"_order\" field, do nothing\n    if (isActive) {\n      return\n    }\n    // If NOT sorted by the \"_order\" field, sort by that field.\n    void handleSortChange(orderableFieldName)\n  }\n\n  return { handleSortPress, isActive }\n}\n\nexport const SortHeader: React.FC<SortHeaderProps> = (props) => {\n  const { appearance } = props\n  const { handleSortPress, isActive } = useSort()\n  const { t } = useTranslation()\n\n  return (\n    <button\n      aria-label={t('general:sortByLabelDirection', {\n        direction: t('general:ascending'),\n        label: 'Order',\n      })}\n      className={[\n        baseClass,\n        appearance && `${baseClass}--appearance-${appearance}`,\n        isActive && `${baseClass}--active`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={handleSortPress}\n      type=\"button\"\n    >\n      <SortDownIcon />\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAC7B,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAOP,MAAMC,SAAA,GAAY;AAElB,SAAAC,QAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACE;IAAAQ,gBAAA;IAAAC,kBAAA;IAAAC;EAAA,IAAwDP,YAAA;EACxD,MAAAQ,SAAA,GAAkBC,KAAA,CAAAC,OAAA,CAAcH,KAAA,CAAAI,IAAU,IAAIJ,KAAA,CAAAI,IAAA,MAAgBJ,KAAA,CAAAI,IAAU;EACxE,MAAAC,QAAA,GAAiBJ,SAAA,KAAcF,kBAAA;EAAA,IAAAO,EAAA;EAAA,IAAAT,CAAA,QAAAC,gBAAA,IAAAD,CAAA,QAAAQ,QAAA,IAAAR,CAAA,QAAAE,kBAAA;IAEPO,EAAA,GAAAA,CAAA;MAAA,IAElBD,QAAA;QAAA;MAAA;MAICP,gBAAA,CAAiBC,kBAAA;IAAA;IACxBF,CAAA,MAAAC,gBAAA;IAAAD,CAAA,MAAAQ,QAAA;IAAAR,CAAA,MAAAE,kBAAA;IAAAF,CAAA,MAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EAPA,MAAAU,eAAA,GAAwBD,EAOxB;EAAA,IAAAE,EAAA;EAAA,IAAAX,CAAA,QAAAU,eAAA,IAAAV,CAAA,QAAAQ,QAAA;IAEOG,EAAA;MAAAD,eAAA;MAAAF;IAAA;IAA4BR,CAAA,MAAAU,eAAA;IAAAV,CAAA,MAAAQ,QAAA;IAAAR,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAAA,OAA5BW,EAA4B;AAAA;AAGrC,OAAO,MAAMC,UAAA,GAAwCC,KAAA;EAAA,MAAAb,CAAA,GAAAP,EAAA;EACnD;IAAAqB;EAAA,IAAuBD,KAAA;EACvB;IAAAH,eAAA;IAAAF;EAAA,IAAsCT,OAAA;EACtC;IAAAgB;EAAA,IAAclB,cAAA;EAAA,IAAAY,EAAA;EAAA,IAAAT,CAAA,QAAAc,UAAA,IAAAd,CAAA,QAAAU,eAAA,IAAAV,CAAA,QAAAQ,QAAA,IAAAR,CAAA,QAAAe,CAAA;IAIE,MAAAJ,EAAA,GAAAI,CAAA,CAAE;MAAAC,SAAA,EACDD,CAAA,CAAE;MAAAE,KAAA,EACN;IAAA,CACT;IAGE,MAAAC,EAAA,GAAAJ,UAAA,IAAc,GAAAhB,SAAA,gBAA4BgB,UAAA,EAAY;IACtD,MAAAK,EAAA,GAAAX,QAAA,IAAY,GAAAV,SAAA,UAAsB;IAAA,IAAAsB,EAAA;IAAA,IAAApB,CAAA,QAAAkB,EAAA,IAAAlB,CAAA,QAAAmB,EAAA;MAHzBC,EAAA,IAAAtB,SAAA,EAEToB,EAAsD,EACtDC,EAAkC,EAAAE,MAAA,CAAAC,OAE1B;MAAAtB,CAAA,MAAAkB,EAAA;MAAAlB,CAAA,MAAAmB,EAAA;MAAAnB,CAAA,MAAAoB,EAAA;IAAA;MAAAA,EAAA,GAAApB,CAAA;IAAA;IAVZS,EAAA,GAAAc,IAAA,CAAC;MAAA,cACaZ,EAGZ;MAAAa,SAAA,EACWJ,EAKD,CAAAK,IAAA,CACF;MAAAC,OAAA,EACChB,eAAA;MAAAiB,IAAA,EACJ;MAAAC,QAAA,EAELL,IAAA,CAAA5B,YAAA,IAAC;IAAA,C;;;;;;;;;SAfHc,E;CAkBJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useRef","SortDownIcon","SortUpIcon","useListQuery","useTranslation","useAriaSort","baseClass","useSort","$","handleSortChange","orderableFieldName","query","querySort","Array","isArray","sort","isAscending","isDescending","isActive","t0","handleSortPress","t1","SortHeader","props","appearance","t","buttonRef","ref","value","undefined","_jsx","direction","label","className","filter","Boolean","join","onClick","type"],"sources":["../../../src/elements/SortHeader/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useRef } from 'react'\n\nimport { SortDownIcon, SortUpIcon } from '../../icons/Sort/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { useAriaSort } from '../Table/useAriaSort.js'\nimport './index.css'\n\nexport type SortHeaderProps = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly disable?: boolean\n}\n\nconst baseClass = 'sort-header'\n\nfunction useSort() {\n  const { handleSortChange, orderableFieldName, query } = useListQuery()\n  const querySort = Array.isArray(query.sort) ? query.sort[0] : query.sort\n  const isAscending = querySort === orderableFieldName\n  const isDescending = querySort === `-${orderableFieldName}`\n  const isActive = isAscending || isDescending\n\n  const handleSortPress = () => {\n    void handleSortChange(isAscending ? `-${orderableFieldName}` : orderableFieldName)\n  }\n\n  return { handleSortPress, isActive, isAscending }\n}\n\nexport const SortHeader: React.FC<SortHeaderProps> = (props) => {\n  const { appearance } = props\n  const { handleSortPress, isActive, isAscending } = useSort()\n  const { t } = useTranslation()\n  const buttonRef = useRef<HTMLButtonElement>(null)\n\n  useAriaSort({\n    ref: buttonRef,\n    value: isActive ? (isAscending ? 'ascending' : 'descending') : undefined,\n  })\n\n  return (\n    <button\n      aria-label={t('general:sortByLabelDirection', {\n        direction: isAscending ? t('general:descending') : t('general:ascending'),\n        label: 'Order',\n      })}\n      className={[\n        baseClass,\n        appearance && `${baseClass}--appearance-${appearance}`,\n        isActive && `${baseClass}--active`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={handleSortPress}\n      ref={buttonRef}\n      type=\"button\"\n    >\n      {isAscending ? <SortUpIcon /> : <SortDownIcon />}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,IAASC,MAAM,QAAQ;AAE9B,SAASC,YAAY,EAAEC,UAAU,QAAQ;AACzC,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAOP,MAAMC,SAAA,GAAY;AAElB,SAAAC,QAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EACE;IAAAW,gBAAA;IAAAC,kBAAA;IAAAC;EAAA,IAAwDR,YAAA;EACxD,MAAAS,SAAA,GAAkBC,KAAA,CAAAC,OAAA,CAAcH,KAAA,CAAAI,IAAU,IAAIJ,KAAA,CAAAI,IAAA,MAAgBJ,KAAA,CAAAI,IAAU;EACxE,MAAAC,WAAA,GAAoBJ,SAAA,KAAcF,kBAAA;EAClC,MAAAO,YAAA,GAAqBL,SAAA,KAAc,IAAIF,kBAAA,EAAoB;EAC3D,MAAAQ,QAAA,GAAiBF,WAAA,IAAeC,YAAA;EAAA,IAAAE,EAAA;EAAA,IAAAX,CAAA,QAAAC,gBAAA,IAAAD,CAAA,QAAAQ,WAAA,IAAAR,CAAA,QAAAE,kBAAA;IAERS,EAAA,GAAAA,CAAA;MACjBV,gBAAA,CAAiBO,WAAA,GAAc,IAAIN,kBAAA,EAAoB,GAAGA,kBAAA;IAAA;IACjEF,CAAA,MAAAC,gBAAA;IAAAD,CAAA,MAAAQ,WAAA;IAAAR,CAAA,MAAAE,kBAAA;IAAAF,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAFA,MAAAY,eAAA,GAAwBD,EAExB;EAAA,IAAAE,EAAA;EAAA,IAAAb,CAAA,QAAAY,eAAA,IAAAZ,CAAA,QAAAU,QAAA,IAAAV,CAAA,QAAAQ,WAAA;IAEOK,EAAA;MAAAD,eAAA;MAAAF,QAAA;MAAAF;IAAA;IAAyCR,CAAA,MAAAY,eAAA;IAAAZ,CAAA,MAAAU,QAAA;IAAAV,CAAA,MAAAQ,WAAA;IAAAR,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EAAA,OAAzCa,EAAyC;AAAA;AAGlD,OAAO,MAAMC,UAAA,GAAyCC,KAAA;EACpD,MAAM;IAAEC;EAAU,CAAE,GAAGD,KAAA;EACvB,MAAM;IAAEH,eAAe;IAAEF,QAAQ;IAAEF;EAAW,CAAE,GAAGT,OAAA;EACnD,MAAM;IAAEkB;EAAC,CAAE,GAAGrB,cAAA;EACd,MAAMsB,SAAA,GAAY1B,MAAA,CAA0B;EAE5CK,WAAA,CAAY;IACVsB,GAAA,EAAKD,SAAA;IACLE,KAAA,EAAOV,QAAA,GAAYF,WAAA,GAAc,cAAc,eAAgBa;EACjE;EAEA,oBACEC,IAAA,CAAC;IACC,cAAYL,CAAA,CAAE,gCAAgC;MAC5CM,SAAA,EAAWf,WAAA,GAAcS,CAAA,CAAE,wBAAwBA,CAAA,CAAE;MACrDO,KAAA,EAAO;IACT;IACAC,SAAA,EAAW,CACT3B,SAAA,EACAkB,UAAA,IAAc,GAAGlB,SAAA,gBAAyBkB,UAAA,EAAY,EACtDN,QAAA,IAAY,GAAGZ,SAAA,UAAmB,CACnC,CACE4B,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRC,OAAA,EAASjB,eAAA;IACTO,GAAA,EAAKD,SAAA;IACLY,IAAA,EAAK;cAEJtB,WAAA,gBAAcc,IAAA,CAAC5B,UAAA,qBAAgB4B,IAAA,CAAC7B,YAAA;;AAGvC","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Status/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAW1C,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAsK1B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Status/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAW1C,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAuK1B,CAAA"}

package/dist/elements/Status/index.js

@@ -41,9 +41,8 @@ export const Status = () => {
   const {
     reset: resetForm
   } = useForm();
-  const {
-    code: locale
-  } = useLocale();
+  const currentLocale = useLocale();
+  const locale = currentLocale?.code;
   const {
     i18n,
     t

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useModal","formatAdminURL","React","useCallback","toast","useForm","useConfig","useDocumentInfo","useLocale","useTranslation","requests","Button","ConfirmationModal","baseClass","Status","id","collectionSlug","docPermissions","globalSlug","hasPublishedDoc","incrementVersionCount","isTrashed","setMostRecentVersionIsAutosaved","setUnpublishedVersionCount","unpublishedVersionCount","toggleModal","config","routes","api","reset","resetForm","code","locale","i18n","t","revertModalSlug","statusToRender","displayStatusKey","performAction","url","method","apiRoute","path","publishedDoc","get","headers","language","then","res","json","body","JSON","stringify","status","data","result","doc","success","message","errors","error","err","canUpdate","update","_jsx","className","title","_jsxs","Fragment","buttonStyle","onClick","confirmingLabel","heading","modalSlug","onConfirm"],"sources":["../../../src/elements/Status/index.tsx"],"sourcesContent":["'use client'\nimport { useModal } from '@faceless-ui/modal'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback } 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 { ConfirmationModal } from '../ConfirmationModal/index.js'\nimport './index.css'\n\nconst baseClass = 'status'\n\nexport const Status: React.FC = () => {\n  const {\n    id,\n    collectionSlug,\n    docPermissions,\n    globalSlug,\n    hasPublishedDoc,\n    incrementVersionCount,\n    isTrashed,\n    setMostRecentVersionIsAutosaved,\n    setUnpublishedVersionCount,\n    unpublishedVersionCount,\n  } = useDocumentInfo()\n\n  const { toggleModal } = useModal()\n\n  const {\n    config: {\n      routes: { api },\n    },\n  } = useConfig()\n\n  const { reset: resetForm } = useForm()\n  const { code: locale } = useLocale()\n  const { i18n, t } = useTranslation()\n\n  const revertModalSlug = `confirm-revert-${id}`\n\n  let statusToRender: 'changed' | 'draft' | 'published'\n\n  if (unpublishedVersionCount > 0 && hasPublishedDoc) {\n    statusToRender = 'changed'\n  } else if (!hasPublishedDoc) {\n    statusToRender = 'draft'\n  } else if (hasPublishedDoc && unpublishedVersionCount <= 0) {\n    statusToRender = 'published'\n  }\n\n  const displayStatusKey = isTrashed\n    ? hasPublishedDoc\n      ? 'previouslyPublished'\n      : 'previouslyDraft'\n    : statusToRender\n\n  const performAction = useCallback(async () => {\n    let url\n    let method\n\n    if (collectionSlug) {\n      url = formatAdminURL({\n        apiRoute: api,\n        path: `/${collectionSlug}/${id}?locale=${locale}&fallback-locale=null&depth=0`,\n      })\n      method = 'patch'\n    }\n\n    if (globalSlug) {\n      url = formatAdminURL({\n        apiRoute: api,\n        path: `/globals/${globalSlug}?locale=${locale}&fallback-locale=null&depth=0`,\n      })\n      method = 'post'\n    }\n\n    const publishedDoc = await requests\n      .get(url, {\n        headers: {\n          'Accept-Language': i18n.language,\n          'Content-Type': 'application/json',\n        },\n      })\n      .then((res) => res.json())\n\n    const body = publishedDoc\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      incrementVersionCount()\n      setMostRecentVersionIsAutosaved(false)\n\n      setUnpublishedVersionCount(0)\n    } else {\n      try {\n        const json = await res.json()\n        if (json.errors?.[0]?.message) {\n          toast.error(json.errors[0].message)\n        } else if (json.error) {\n          toast.error(json.error)\n        } else {\n          toast.error(t('error:revertingDocument'))\n        }\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      } catch (err) {\n        toast.error(t('error:revertingDocument'))\n      }\n    }\n  }, [\n    api,\n    collectionSlug,\n    globalSlug,\n    id,\n    i18n.language,\n    incrementVersionCount,\n    locale,\n    resetForm,\n    setUnpublishedVersionCount,\n    setMostRecentVersionIsAutosaved,\n    t,\n  ])\n\n  const canUpdate = docPermissions?.update\n\n  if (statusToRender) {\n    return (\n      <div\n        className={baseClass}\n        title={`${t('version:status')}: ${t(`version:${displayStatusKey}`)}`}\n      >\n        <div className={`${baseClass}__value-wrap`}>\n          <span className={`${baseClass}__value`}>{t(`version:${displayStatusKey}`)}</span>\n\n          {!isTrashed && canUpdate && hasPublishedDoc && statusToRender === 'changed' && (\n            <React.Fragment>\n              &nbsp;&mdash;&nbsp;\n              <Button\n                buttonStyle=\"ghost\"\n                className={`${baseClass}__action`}\n                id=\"action-revert-to-published\"\n                onClick={() => toggleModal(revertModalSlug)}\n              >\n                {t('version:revertToPublished')}\n              </Button>\n              <ConfirmationModal\n                body={t('version:aboutToRevertToPublished')}\n                confirmingLabel={t('version:reverting')}\n                heading={t('version:confirmRevertToSaved')}\n                modalSlug={revertModalSlug}\n                onConfirm={() => performAction()}\n              />\n            </React.Fragment>\n          )}\n        </div>\n      </div>\n    )\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useModal","formatAdminURL","React","useCallback","toast","useForm","useConfig","useDocumentInfo","useLocale","useTranslation","requests","Button","ConfirmationModal","baseClass","Status","id","collectionSlug","docPermissions","globalSlug","hasPublishedDoc","incrementVersionCount","isTrashed","setMostRecentVersionIsAutosaved","setUnpublishedVersionCount","unpublishedVersionCount","toggleModal","config","routes","api","reset","resetForm","currentLocale","locale","code","i18n","t","revertModalSlug","statusToRender","displayStatusKey","performAction","url","method","apiRoute","path","publishedDoc","get","headers","language","then","res","json","body","JSON","stringify","status","data","result","doc","success","message","errors","error","err","canUpdate","update","_jsx","className","title","_jsxs","Fragment","buttonStyle","onClick","confirmingLabel","heading","modalSlug","onConfirm"],"sources":["../../../src/elements/Status/index.tsx"],"sourcesContent":["'use client'\nimport { useModal } from '@faceless-ui/modal'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback } 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 { ConfirmationModal } from '../ConfirmationModal/index.js'\nimport './index.css'\n\nconst baseClass = 'status'\n\nexport const Status: React.FC = () => {\n  const {\n    id,\n    collectionSlug,\n    docPermissions,\n    globalSlug,\n    hasPublishedDoc,\n    incrementVersionCount,\n    isTrashed,\n    setMostRecentVersionIsAutosaved,\n    setUnpublishedVersionCount,\n    unpublishedVersionCount,\n  } = useDocumentInfo()\n\n  const { toggleModal } = useModal()\n\n  const {\n    config: {\n      routes: { api },\n    },\n  } = useConfig()\n\n  const { reset: resetForm } = useForm()\n  const currentLocale = useLocale()\n  const locale = currentLocale?.code\n  const { i18n, t } = useTranslation()\n\n  const revertModalSlug = `confirm-revert-${id}`\n\n  let statusToRender: 'changed' | 'draft' | 'published'\n\n  if (unpublishedVersionCount > 0 && hasPublishedDoc) {\n    statusToRender = 'changed'\n  } else if (!hasPublishedDoc) {\n    statusToRender = 'draft'\n  } else if (hasPublishedDoc && unpublishedVersionCount <= 0) {\n    statusToRender = 'published'\n  }\n\n  const displayStatusKey = isTrashed\n    ? hasPublishedDoc\n      ? 'previouslyPublished'\n      : 'previouslyDraft'\n    : statusToRender\n\n  const performAction = useCallback(async () => {\n    let url\n    let method\n\n    if (collectionSlug) {\n      url = formatAdminURL({\n        apiRoute: api,\n        path: `/${collectionSlug}/${id}?locale=${locale}&fallback-locale=null&depth=0`,\n      })\n      method = 'patch'\n    }\n\n    if (globalSlug) {\n      url = formatAdminURL({\n        apiRoute: api,\n        path: `/globals/${globalSlug}?locale=${locale}&fallback-locale=null&depth=0`,\n      })\n      method = 'post'\n    }\n\n    const publishedDoc = await requests\n      .get(url, {\n        headers: {\n          'Accept-Language': i18n.language,\n          'Content-Type': 'application/json',\n        },\n      })\n      .then((res) => res.json())\n\n    const body = publishedDoc\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      incrementVersionCount()\n      setMostRecentVersionIsAutosaved(false)\n\n      setUnpublishedVersionCount(0)\n    } else {\n      try {\n        const json = await res.json()\n        if (json.errors?.[0]?.message) {\n          toast.error(json.errors[0].message)\n        } else if (json.error) {\n          toast.error(json.error)\n        } else {\n          toast.error(t('error:revertingDocument'))\n        }\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      } catch (err) {\n        toast.error(t('error:revertingDocument'))\n      }\n    }\n  }, [\n    api,\n    collectionSlug,\n    globalSlug,\n    id,\n    i18n.language,\n    incrementVersionCount,\n    locale,\n    resetForm,\n    setUnpublishedVersionCount,\n    setMostRecentVersionIsAutosaved,\n    t,\n  ])\n\n  const canUpdate = docPermissions?.update\n\n  if (statusToRender) {\n    return (\n      <div\n        className={baseClass}\n        title={`${t('version:status')}: ${t(`version:${displayStatusKey}`)}`}\n      >\n        <div className={`${baseClass}__value-wrap`}>\n          <span className={`${baseClass}__value`}>{t(`version:${displayStatusKey}`)}</span>\n\n          {!isTrashed && canUpdate && hasPublishedDoc && statusToRender === 'changed' && (\n            <React.Fragment>\n              &nbsp;&mdash;&nbsp;\n              <Button\n                buttonStyle=\"ghost\"\n                className={`${baseClass}__action`}\n                id=\"action-revert-to-published\"\n                onClick={() => toggleModal(revertModalSlug)}\n              >\n                {t('version:revertToPublished')}\n              </Button>\n              <ConfirmationModal\n                body={t('version:aboutToRevertToPublished')}\n                confirmingLabel={t('version:reverting')}\n                heading={t('version:confirmRevertToSaved')}\n                modalSlug={revertModalSlug}\n                onConfirm={() => performAction()}\n              />\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/StepNav/index.css

@@ -2,15 +2,19 @@
   .step-nav {
     display: flex;
     align-items: center;
+    min-width: 0;
     font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
     letter-spacing: var(--text-body-medium-letter-spacing);
     color: var(--color-text);
+    -webkit-user-select: none;
+    user-select: none;
 
     &::after {
       content: ' ';
+      flex-shrink: 0;
       position: sticky;
       top: 0;
       right: 0;
@@ -21,6 +25,7 @@
     a {
       display: flex;
       align-items: center;
+      min-width: 0;
       text-decoration: none;
       border-radius: var(--button-radius);
 
@@ -28,33 +33,78 @@
         cursor: pointer;
       }
     }
+  }
 
-    span {
-      max-width: calc(var(--spacer-6) * 4);
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
+  .step-nav__item {
+    max-width: calc(var(--spacer-6) * 4);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
 
-      &:has(.dashboard-breadcrumb-dropdown, .dashboard-breadcrumb-dropdown__editing) {
-        max-width: none;
-        overflow: visible;
-        white-space: normal;
-      }
+  .step-nav__item .btn__content {
+    min-width: 0;
+  }
+
+  .step-nav__item .btn__label {
+    min-width: 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .step-nav__item:not(.step-nav__last) {
+    flex-shrink: 0;
+  }
+
+  .step-nav__last {
+    min-width: var(--spacer-5);
+    max-width: none;
+    color: var(--color-text-secondary);
+  }
+
+  .step-nav__item:has(.dashboard-breadcrumb-dropdown, .dashboard-breadcrumb-dropdown__editing) {
+    max-width: none;
+    overflow: visible;
+    white-space: normal;
+  }
+
+  .step-nav__collapsed {
+    flex-shrink: 0;
+  }
+
+  .step-nav__collapsed-toggle {
+    padding: 0 var(--spacer-1);
+    color: var(--color-text);
+  }
+
+  .step-nav__measurer-clip {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
+
+  .step-nav__measurer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-flex;
+    padding-right: var(--spacer-3);
+
+    .step-nav__item {
+      max-width: none;
     }
   }
 
   .step-nav__separator {
     color: var(--color-text-tertiary);
     width: var(--spacer-2);
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
-  .step-nav__last {
-    color: var(--color-text-secondary);
-  }
-
   .step-nav__item:not(.btn),
   .step-nav__item:has(.btn) {
     margin-left: var(--spacer-2);

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/StepNav/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAK7C,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAI5C,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CA2EA,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/StepNav/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAM7C,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAM5C,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CA8KA,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,CAAA"}

package/dist/elements/StepNav/index.js

@@ -1,21 +1,20 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
-import React, { Fragment } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { useConfig } from '../../providers/Config/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
+import { Popup, PopupList } from '../Popup/index.js';
 import { StepNavProvider, useStepNav } from './context.js';
 import './index.css';
 export { SetStepNav } from './SetStepNav.js';
 const baseClass = 'step-nav';
-const StepNav = t0 => {
-  const $ = _c(11);
-  const {
-    className
-  } = t0;
+const minItemsToCollapse = 4;
+const StepNav = ({
+  className
+}) => {
   const {
     i18n
   } = useTranslation();
@@ -23,75 +22,151 @@ const StepNav = t0 => {
     stepNav
   } = useStepNav();
   const {
-    config: t1
+    config: {
+      routes: {
+        admin
+      }
+    }
   } = useConfig();
-  const {
-    routes: t2
-  } = t1;
-  const {
-    admin
-  } = t2;
   const {
     t
   } = useTranslation();
+  const navRef = useRef(null);
+  const measurerRef = useRef(null);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  // Check if first item is a dashboard dropdown (React element with no URL)
+  // In that case, it replaces the home element entirely
   const firstItem = stepNav[0];
-  let t3;
-  if ($[0] !== firstItem) {
-    t3 = firstItem && !firstItem.url && typeof firstItem.label !== "string" && React.isValidElement(firstItem.label);
-    $[0] = firstItem;
-    $[1] = t3;
-  } else {
-    t3 = $[1];
-  }
-  const hasDashboardDropdown = t3;
-  let t4;
-  if ($[2] !== admin || $[3] !== className || $[4] !== hasDashboardDropdown || $[5] !== i18n || $[6] !== stepNav || $[7] !== t) {
-    const stepNavItems = hasDashboardDropdown ? stepNav : [{
-      label: t("general:dashboard"),
-      url: admin
-    }, ...stepNav];
-    let t5;
-    if ($[9] !== className) {
-      t5 = [baseClass, className].filter(Boolean);
-      $[9] = className;
-      $[10] = t5;
-    } else {
-      t5 = $[10];
+  const hasDashboardDropdown = firstItem && !firstItem.url && typeof firstItem.label !== 'string' && /*#__PURE__*/React.isValidElement(firstItem.label);
+  const stepNavItems = hasDashboardDropdown ? stepNav : [{
+    label: t('general:dashboard'),
+    url: admin
+  }, ...stepNav];
+  const canCollapse = !hasDashboardDropdown && stepNavItems.length >= minItemsToCollapse;
+  // Collapse only when the expanded breadcrumbs (measured via the hidden
+  // measurer) can't fit the available width.
+  useEffect(() => {
+    if (!canCollapse) {
+      setIsCollapsed(false);
+      return;
     }
-    t4 = _jsx("nav", {
-      className: t5.join(" "),
-      children: stepNavItems.map((item, i) => {
-        const StepLabel = getTranslation(item.label, i18n);
-        const isLast = stepNavItems.length === i + 1;
-        const isFirst = i === 0;
-        return _jsxs(Fragment, {
-          children: [item.url ? _jsx(Button, {
-            buttonStyle: "ghost",
-            className: [`${baseClass}__item`, isLast ? `${baseClass}__last` : undefined, isFirst ? `${baseClass}__first` : undefined].filter(Boolean).join(" "),
-            el: "link",
-            url: item.url,
-            children: StepLabel
-          }) : _jsx("span", {
-            className: [`${baseClass}__item`, isLast ? `${baseClass}__last` : undefined, isFirst ? `${baseClass}__first` : undefined].filter(Boolean).join(" "),
-            children: StepLabel
-          }), !isLast && _jsx("span", {
-            className: `${baseClass}__separator`,
-            children: "/"
-          })]
-        }, i);
-      })
+    const nav = navRef.current;
+    const measurer = measurerRef.current;
+    const container = nav?.parentElement;
+    if (!nav || !measurer || !container) {
+      return;
+    }
+    const measure = () => {
+      const available = container.clientWidth;
+      const needed = measurer.getBoundingClientRect().width;
+      setIsCollapsed(needed - available > 1);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(container);
+    // A web font finishing loading can change the measured width without the
+    // container resizing, so the ResizeObserver alone won't catch it.
+    let isEffectActive = true;
+    void document.fonts?.ready.then(() => {
+      if (isEffectActive) {
+        measure();
+      }
+    });
+    return () => {
+      isEffectActive = false;
+      observer.disconnect();
+    };
+  }, [canCollapse, stepNav, i18n, admin, t]);
+  const renderItem = (item, {
+    isFirst,
+    isLast
+  }) => {
+    const StepLabel = getTranslation(item.label, i18n);
+    const itemClassName = [`${baseClass}__item`, isLast ? `${baseClass}__last` : undefined, isFirst ? `${baseClass}__first` : undefined].filter(Boolean).join(' ');
+    if (item.url) {
+      return /*#__PURE__*/_jsx(Button, {
+        buttonStyle: "ghost",
+        className: itemClassName,
+        el: "link",
+        url: item.url,
+        children: StepLabel
+      });
+    }
+    return /*#__PURE__*/_jsx("span", {
+      className: itemClassName,
+      children: StepLabel
     });
-    $[2] = admin;
-    $[3] = className;
-    $[4] = hasDashboardDropdown;
-    $[5] = i18n;
-    $[6] = stepNav;
-    $[7] = t;
-    $[8] = t4;
-  } else {
-    t4 = $[8];
-  }
-  return t4;
+  };
+  const separator = /*#__PURE__*/_jsx("span", {
+    className: `${baseClass}__separator`,
+    children: "/"
+  });
+  const shouldCollapse = canCollapse && isCollapsed;
+  const collapsedItems = shouldCollapse ? stepNavItems.slice(1, -1) : [];
+  const lastItem = stepNavItems[stepNavItems.length - 1];
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx("nav", {
+      className: [baseClass, className].filter(Boolean).join(' '),
+      ref: navRef,
+      children: shouldCollapse ? /*#__PURE__*/_jsxs(Fragment, {
+        children: [renderItem(stepNavItems[0], {
+          isFirst: true,
+          isLast: false
+        }), separator, /*#__PURE__*/_jsx(Popup, {
+          button: "…",
+          buttonAriaLabel: t('general:moreOptions'),
+          buttonClassName: `${baseClass}__collapsed-toggle`,
+          buttonType: "custom",
+          className: `${baseClass}__collapsed`,
+          horizontalAlign: "left",
+          noBackground: true,
+          popupType: "menu",
+          render: ({
+            close
+          }) => /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
+            className: `${baseClass}__collapsed-list`,
+            children: collapsedItems.map((item_0, i) => /*#__PURE__*/_jsx(PopupList.Button, {
+              href: item_0.url,
+              onClick: close,
+              children: getTranslation(item_0.label, i18n)
+            }, i))
+          }),
+          size: "fit-content",
+          verticalAlign: "bottom"
+        }), separator, renderItem(lastItem, {
+          isFirst: false,
+          isLast: true
+        })]
+      }) : stepNavItems.map((item_1, i_0) => {
+        const isLast_0 = stepNavItems.length === i_0 + 1;
+        const isFirst_0 = i_0 === 0;
+        return /*#__PURE__*/_jsxs(Fragment, {
+          children: [renderItem(item_1, {
+            isFirst: isFirst_0,
+            isLast: isLast_0
+          }), !isLast_0 && separator]
+        }, i_0);
+      })
+    }), canCollapse ? /*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      className: `${baseClass}__measurer-clip`,
+      inert: true,
+      children: /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__measurer`,
+        ref: measurerRef,
+        children: stepNavItems.map((item_2, i_1) => {
+          const isLast_1 = stepNavItems.length === i_1 + 1;
+          const isFirst_1 = i_1 === 0;
+          return /*#__PURE__*/_jsxs(Fragment, {
+            children: [renderItem(item_2, {
+              isFirst: isFirst_1,
+              isLast: isLast_1
+            }), !isLast_1 && separator]
+          }, i_1);
+        })
+      })
+    }) : null]
+  });
 };
 export { StepNav, StepNavProvider, useStepNav };
 //# sourceMappingURL=index.js.map