@payloadcms/next 3.70.0 → 3.71.0-internal-debug.80dab4c

package/dist/elements/DocumentHeader/Tabs/ShouldRenderTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShouldRenderTabs.js","names":["useDocumentInfo","ShouldRenderTabs","t0","children","id","idFromContext","collectionSlug","globalSlug"],"sources":["../../../../src/elements/DocumentHeader/Tabs/ShouldRenderTabs.tsx"],"sourcesContent":["'use client'\nimport type React from 'react'\n\nimport { useDocumentInfo } from '@payloadcms/ui'\n\nexport const ShouldRenderTabs: React.FC<{\n  children: React.ReactNode\n}> = ({ children }) => {\n  const { id: idFromContext, collectionSlug, globalSlug } = useDocumentInfo()\n\n  const id = idFromContext !== 'create' ? idFromContext : null\n\n  // Don't show tabs when creating new documents\n  if ((collectionSlug && id) || globalSlug) {\n    return children\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAGA,SAASA,eAAe,QAAQ;AAEhC,OAAO,MAAMC,gBAAA,GAERC,EAAA;EAAC;IAAAC;EAAA,IAAAD,EAAY;EAChB;IAAAE,EAAA,EAAAC,aAAA;IAAAC,cAAA;IAAAC;EAAA,IAA0DP,eAAA;EAE1D,MAAAI,EAAA,GAAWC,aAAA,KAAkB,WAAWA,aAAA,OAAgB;EAAA,IAGpDC,cAAC,IAAkBF,EAAA,IAAOG,UAAA;IAAA,OACrBJ,QAAA;EAAA;EAAA;AAAA,CAIX","ignoreList":[]}
+{"version":3,"sources":["../../../../src/elements/DocumentHeader/Tabs/ShouldRenderTabs.tsx"],"sourcesContent":["'use client'\nimport type React from 'react'\n\nimport { useDocumentInfo } from '@payloadcms/ui'\n\nexport const ShouldRenderTabs: React.FC<{\n  children: React.ReactNode\n}> = ({ children }) => {\n  const { id: idFromContext, collectionSlug, globalSlug } = useDocumentInfo()\n\n  const id = idFromContext !== 'create' ? idFromContext : null\n\n  // Don't show tabs when creating new documents\n  if ((collectionSlug && id) || globalSlug) {\n    return children\n  }\n\n  return null\n}\n"],"names":["useDocumentInfo","ShouldRenderTabs","children","id","idFromContext","collectionSlug","globalSlug"],"mappings":"AAAA;AAGA,SAASA,eAAe,QAAQ,iBAAgB;AAEhD,OAAO,MAAMC,mBAER,CAAC,EAAEC,QAAQ,EAAE;IAChB,MAAM,EAAEC,IAAIC,aAAa,EAAEC,cAAc,EAAEC,UAAU,EAAE,GAAGN;IAE1D,MAAMG,KAAKC,kBAAkB,WAAWA,gBAAgB;IAExD,8CAA8C;IAC9C,IAAI,AAACC,kBAAkBF,MAAOG,YAAY;QACxC,OAAOJ;IACT;IAEA,OAAO;AACT,EAAC"}

package/dist/elements/DocumentHeader/Tabs/Tab/TabLink.js

@@ -1,81 +1,50 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { Button } from '@payloadcms/ui';
 import { useParams, usePathname, useSearchParams } from 'next/navigation.js';
 import { formatAdminURL } from 'payload/shared';
 import React from 'react';
-export const DocumentTabLink = t0 => {
-  const $ = _c(13);
-  const {
-    adminRoute,
-    ariaLabel,
-    baseClass,
-    children,
-    href: hrefFromProps,
-    isActive: isActiveFromProps,
-    newTab
-  } = t0;
-  const pathname = usePathname();
-  const params = useParams();
-  const searchParams = useSearchParams();
-  const locale = searchParams.get("locale");
-  const [entityType, entitySlug, segmentThree, segmentFour] = params.segments || [];
-  const isCollection = entityType === "collections";
-  const t1 = `/${isCollection ? "collections" : "globals"}/${entitySlug}`;
-  let t2;
-  if ($[0] !== adminRoute || $[1] !== t1) {
-    t2 = formatAdminURL({
-      adminRoute,
-      path: t1
+export const DocumentTabLink = ({ adminRoute, ariaLabel, baseClass, children, href: hrefFromProps, isActive: isActiveFromProps, newTab })=>{
+    const pathname = usePathname();
+    const params = useParams();
+    const searchParams = useSearchParams();
+    const locale = searchParams.get('locale');
+    const [entityType, entitySlug, segmentThree, segmentFour, ...rest] = params.segments || [];
+    const isCollection = entityType === 'collections';
+    let docPath = formatAdminURL({
+        adminRoute,
+        path: `/${isCollection ? 'collections' : 'globals'}/${entitySlug}`
     });
-    $[0] = adminRoute;
-    $[1] = t1;
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  let docPath = t2;
-  if (isCollection) {
-    if (segmentThree === "trash" && segmentFour) {
-      docPath = docPath + `/trash/${segmentFour}`;
-    } else {
-      if (segmentThree) {
-        docPath = docPath + `/${segmentThree}`;
-      }
+    if (isCollection) {
+        if (segmentThree === 'trash' && segmentFour) {
+            docPath += `/trash/${segmentFour}`;
+        } else if (segmentThree) {
+            docPath += `/${segmentThree}`;
+        }
     }
-  }
-  const href = `${docPath}${hrefFromProps}`;
-  const hrefWithLocale = `${href}${locale ? `?locale=${locale}` : ""}`;
-  let t3;
-  if ($[3] !== ariaLabel || $[4] !== baseClass || $[5] !== children || $[6] !== docPath || $[7] !== href || $[8] !== hrefWithLocale || $[9] !== isActiveFromProps || $[10] !== newTab || $[11] !== pathname) {
+    const href = `${docPath}${hrefFromProps}`;
+    // separated the two so it doesn't break checks against pathname
+    const hrefWithLocale = `${href}${locale ? `?locale=${locale}` : ''}`;
     const isActive = href === docPath && pathname === docPath || href !== docPath && pathname.startsWith(href) || isActiveFromProps;
-    t3 = _jsx(Button, {
-      "aria-label": ariaLabel,
-      buttonStyle: "tab",
-      className: [baseClass, isActive && `${baseClass}--active`].filter(Boolean).join(" "),
-      disabled: isActive,
-      el: !isActive || href !== pathname ? "link" : "div",
-      margin: false,
-      newTab,
-      size: "medium",
-      to: !isActive || href !== pathname ? hrefWithLocale : undefined,
-      children
-    });
-    $[3] = ariaLabel;
-    $[4] = baseClass;
-    $[5] = children;
-    $[6] = docPath;
-    $[7] = href;
-    $[8] = hrefWithLocale;
-    $[9] = isActiveFromProps;
-    $[10] = newTab;
-    $[11] = pathname;
-    $[12] = t3;
-  } else {
-    t3 = $[12];
-  }
-  return t3;
+    return /*#__PURE__*/ _jsxDEV(Button, {
+        "aria-label": ariaLabel,
+        buttonStyle: "tab",
+        className: [
+            baseClass,
+            isActive && `${baseClass}--active`
+        ].filter(Boolean).join(' '),
+        disabled: isActive,
+        el: !isActive || href !== pathname ? 'link' : 'div',
+        margin: false,
+        newTab: newTab,
+        size: "medium",
+        to: !isActive || href !== pathname ? hrefWithLocale : undefined,
+        children: children
+    }, void 0, false, {
+        fileName: "src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx",
+        lineNumber: 59,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=TabLink.js.map

package/dist/elements/DocumentHeader/Tabs/Tab/TabLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLink.js","names":["c","_c","Button","useParams","usePathname","useSearchParams","formatAdminURL","React","DocumentTabLink","t0","$","adminRoute","ariaLabel","baseClass","children","href","hrefFromProps","isActive","isActiveFromProps","newTab","pathname","params","searchParams","locale","get","entityType","entitySlug","segmentThree","segmentFour","segments","isCollection","t1","t2","path","docPath","hrefWithLocale","t3","startsWith","_jsx","buttonStyle","className","filter","Boolean","join","disabled","el","margin","size","to","undefined"],"sources":["../../../../../src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedConfig } from 'payload'\n\nimport { Button } from '@payloadcms/ui'\nimport { useParams, usePathname, useSearchParams } from 'next/navigation.js'\nimport { formatAdminURL } from 'payload/shared'\nimport React from 'react'\n\nexport const DocumentTabLink: React.FC<{\n  adminRoute: SanitizedConfig['routes']['admin']\n  ariaLabel?: string\n  baseClass: string\n  children?: React.ReactNode\n  href: string\n  isActive?: boolean\n  newTab?: boolean\n}> = ({\n  adminRoute,\n  ariaLabel,\n  baseClass,\n  children,\n  href: hrefFromProps,\n  isActive: isActiveFromProps,\n  newTab,\n}) => {\n  const pathname = usePathname()\n  const params = useParams()\n\n  const searchParams = useSearchParams()\n\n  const locale = searchParams.get('locale')\n\n  const [entityType, entitySlug, segmentThree, segmentFour, ...rest] = params.segments || []\n  const isCollection = entityType === 'collections'\n\n  let docPath = formatAdminURL({\n    adminRoute,\n    path: `/${isCollection ? 'collections' : 'globals'}/${entitySlug}`,\n  })\n\n  if (isCollection) {\n    if (segmentThree === 'trash' && segmentFour) {\n      docPath += `/trash/${segmentFour}`\n    } else if (segmentThree) {\n      docPath += `/${segmentThree}`\n    }\n  }\n\n  const href = `${docPath}${hrefFromProps}`\n  // separated the two so it doesn't break checks against pathname\n  const hrefWithLocale = `${href}${locale ? `?locale=${locale}` : ''}`\n\n  const isActive =\n    (href === docPath && pathname === docPath) ||\n    (href !== docPath && pathname.startsWith(href)) ||\n    isActiveFromProps\n\n  return (\n    <Button\n      aria-label={ariaLabel}\n      buttonStyle=\"tab\"\n      className={[baseClass, isActive && `${baseClass}--active`].filter(Boolean).join(' ')}\n      disabled={isActive}\n      el={!isActive || href !== pathname ? 'link' : 'div'}\n      margin={false}\n      newTab={newTab}\n      size=\"medium\"\n      to={!isActive || href !== pathname ? hrefWithLocale : undefined}\n    >\n      {children}\n    </Button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,MAAM,QAAQ;AACvB,SAASC,SAAS,EAAEC,WAAW,EAAEC,eAAe,QAAQ;AACxD,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,OAAO,MAAMC,eAAA,GAQRC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,UAAA;IAAAC,SAAA;IAAAC,SAAA;IAAAC,QAAA;IAAAC,IAAA,EAAAC,aAAA;IAAAC,QAAA,EAAAC,iBAAA;IAAAC;EAAA,IAAAV,EAQL;EACC,MAAAW,QAAA,GAAiBhB,WAAA;EACjB,MAAAiB,MAAA,GAAelB,SAAA;EAEf,MAAAmB,YAAA,GAAqBjB,eAAA;EAErB,MAAAkB,MAAA,GAAeD,YAAA,CAAAE,GAAA,CAAiB;EAEhC,OAAAC,UAAA,EAAAC,UAAA,EAAAC,YAAA,EAAAC,WAAA,IAAqEP,MAAA,CAAAQ,QAAA,MAAqB;EAC1F,MAAAC,YAAA,GAAqBL,UAAA,KAAe;EAI5B,MAAAM,EAAA,OAAID,YAAA,GAAe,gBAAgB,aAAaJ,UAAA,EAAY;EAAA,IAAAM,EAAA;EAAA,IAAAtB,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAqB,EAAA;IAFtDC,EAAA,GAAA1B,cAAA;MAAAK,UAAA;MAAAsB,IAAA,EAENF;IAA4D,CACpE;IAAArB,CAAA,MAAAC,UAAA;IAAAD,CAAA,MAAAqB,EAAA;IAAArB,CAAA,MAAAsB,EAAA;EAAA;IAAAA,EAAA,GAAAtB,CAAA;EAAA;EAHA,IAAAwB,OAAA,GAAcF,EAGd;EAAA,IAEIF,YAAA;IAAA,IACEH,YAAA,KAAiB,WAAWC,WAAA;MAC9BM,OAAA,GAAAA,OAAA,GAAW,UAAUN,WAAA,EAAa;IAAA;MAAA,IACzBD,YAAA;QACTO,OAAA,GAAAA,OAAA,GAAW,IAAIP,YAAA,EAAc;MAAA;IAAA;EAAA;EAIjC,MAAAZ,IAAA,GAAa,GAAGmB,OAAA,GAAUlB,aAAA,EAAe;EAEzC,MAAAmB,cAAA,GAAuB,GAAGpB,IAAA,GAAOQ,MAAA,GAAS,WAAWA,MAAA,EAAQ,GAAG,IAAI;EAAA,IAAAa,EAAA;EAAA,IAAA1B,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAG,SAAA,IAAAH,CAAA,QAAAI,QAAA,IAAAJ,CAAA,QAAAwB,OAAA,IAAAxB,CAAA,QAAAK,IAAA,IAAAL,CAAA,QAAAyB,cAAA,IAAAzB,CAAA,QAAAQ,iBAAA,IAAAR,CAAA,SAAAS,MAAA,IAAAT,CAAA,SAAAU,QAAA;IAEpE,MAAAH,QAAA,GACEF,IAAC,KAASmB,OAAA,IAAWd,QAAA,KAAac,OAAA,IACjCnB,IAAA,KAASmB,OAAA,IAAWd,QAAA,CAAAiB,UAAA,CAAoBtB,IAAA,KACzCG,iBAAA;IAGAkB,EAAA,GAAAE,IAAA,CAAApC,MAAA;MAAA,cACcU,SAAA;MAAA2B,WAAA,EACA;MAAAC,SAAA,EACD,CAAC3B,SAAA,EAAWI,QAAA,IAAY,GAAGJ,SAAA,UAAmB,EAAA4B,MAAA,CAAAC,OAAS,EAAAC,IAAA,CAAc;MAAAC,QAAA,EACtE3B,QAAA;MAAA4B,EAAA,EACN,CAAC5B,QAAA,IAAYF,IAAA,KAASK,QAAA,GAAW,SAAS;MAAA0B,MAAA;MAAA3B,MAAA;MAAA4B,IAAA,EAGzC;MAAAC,EAAA,EACD,CAAC/B,QAAA,IAAYF,IAAA,KAASK,QAAA,GAAWe,cAAA,GAAAc,SAAiB;MAAAnC;IAAA,C;;;;;;;;;;;;;;SATxDsB,E;CAcJ","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedConfig } from 'payload'\n\nimport { Button } from '@payloadcms/ui'\nimport { useParams, usePathname, useSearchParams } from 'next/navigation.js'\nimport { formatAdminURL } from 'payload/shared'\nimport React from 'react'\n\nexport const DocumentTabLink: React.FC<{\n  adminRoute: SanitizedConfig['routes']['admin']\n  ariaLabel?: string\n  baseClass: string\n  children?: React.ReactNode\n  href: string\n  isActive?: boolean\n  newTab?: boolean\n}> = ({\n  adminRoute,\n  ariaLabel,\n  baseClass,\n  children,\n  href: hrefFromProps,\n  isActive: isActiveFromProps,\n  newTab,\n}) => {\n  const pathname = usePathname()\n  const params = useParams()\n\n  const searchParams = useSearchParams()\n\n  const locale = searchParams.get('locale')\n\n  const [entityType, entitySlug, segmentThree, segmentFour, ...rest] = params.segments || []\n  const isCollection = entityType === 'collections'\n\n  let docPath = formatAdminURL({\n    adminRoute,\n    path: `/${isCollection ? 'collections' : 'globals'}/${entitySlug}`,\n  })\n\n  if (isCollection) {\n    if (segmentThree === 'trash' && segmentFour) {\n      docPath += `/trash/${segmentFour}`\n    } else if (segmentThree) {\n      docPath += `/${segmentThree}`\n    }\n  }\n\n  const href = `${docPath}${hrefFromProps}`\n  // separated the two so it doesn't break checks against pathname\n  const hrefWithLocale = `${href}${locale ? `?locale=${locale}` : ''}`\n\n  const isActive =\n    (href === docPath && pathname === docPath) ||\n    (href !== docPath && pathname.startsWith(href)) ||\n    isActiveFromProps\n\n  return (\n    <Button\n      aria-label={ariaLabel}\n      buttonStyle=\"tab\"\n      className={[baseClass, isActive && `${baseClass}--active`].filter(Boolean).join(' ')}\n      disabled={isActive}\n      el={!isActive || href !== pathname ? 'link' : 'div'}\n      margin={false}\n      newTab={newTab}\n      size=\"medium\"\n      to={!isActive || href !== pathname ? hrefWithLocale : undefined}\n    >\n      {children}\n    </Button>\n  )\n}\n"],"names":["Button","useParams","usePathname","useSearchParams","formatAdminURL","React","DocumentTabLink","adminRoute","ariaLabel","baseClass","children","href","hrefFromProps","isActive","isActiveFromProps","newTab","pathname","params","searchParams","locale","get","entityType","entitySlug","segmentThree","segmentFour","rest","segments","isCollection","docPath","path","hrefWithLocale","startsWith","aria-label","buttonStyle","className","filter","Boolean","join","disabled","el","margin","size","to","undefined"],"mappings":"AAAA;;AAGA,SAASA,MAAM,QAAQ,iBAAgB;AACvC,SAASC,SAAS,EAAEC,WAAW,EAAEC,eAAe,QAAQ,qBAAoB;AAC5E,SAASC,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,WAAW,QAAO;AAEzB,OAAO,MAAMC,kBAQR,CAAC,EACJC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,MAAMC,aAAa,EACnBC,UAAUC,iBAAiB,EAC3BC,MAAM,EACP;IACC,MAAMC,WAAWd;IACjB,MAAMe,SAAShB;IAEf,MAAMiB,eAAef;IAErB,MAAMgB,SAASD,aAAaE,GAAG,CAAC;IAEhC,MAAM,CAACC,YAAYC,YAAYC,cAAcC,aAAa,GAAGC,KAAK,GAAGR,OAAOS,QAAQ,IAAI,EAAE;IAC1F,MAAMC,eAAeN,eAAe;IAEpC,IAAIO,UAAUxB,eAAe;QAC3BG;QACAsB,MAAM,CAAC,CAAC,EAAEF,eAAe,gBAAgB,UAAU,CAAC,EAAEL,YAAY;IACpE;IAEA,IAAIK,cAAc;QAChB,IAAIJ,iBAAiB,WAAWC,aAAa;YAC3CI,WAAW,CAAC,OAAO,EAAEJ,aAAa;QACpC,OAAO,IAAID,cAAc;YACvBK,WAAW,CAAC,CAAC,EAAEL,cAAc;QAC/B;IACF;IAEA,MAAMZ,OAAO,GAAGiB,UAAUhB,eAAe;IACzC,gEAAgE;IAChE,MAAMkB,iBAAiB,GAAGnB,OAAOQ,SAAS,CAAC,QAAQ,EAAEA,QAAQ,GAAG,IAAI;IAEpE,MAAMN,WACJ,AAACF,SAASiB,WAAWZ,aAAaY,WACjCjB,SAASiB,WAAWZ,SAASe,UAAU,CAACpB,SACzCG;IAEF,qBACE,QAACd;QACCgC,cAAYxB;QACZyB,aAAY;QACZC,WAAW;YAACzB;YAAWI,YAAY,GAAGJ,UAAU,QAAQ,CAAC;SAAC,CAAC0B,MAAM,CAACC,SAASC,IAAI,CAAC;QAChFC,UAAUzB;QACV0B,IAAI,CAAC1B,YAAYF,SAASK,WAAW,SAAS;QAC9CwB,QAAQ;QACRzB,QAAQA;QACR0B,MAAK;QACLC,IAAI,CAAC7B,YAAYF,SAASK,WAAWc,iBAAiBa;kBAErDjC;;;;;;AAGP,EAAC"}

package/dist/elements/DocumentHeader/Tabs/Tab/index.js

@@ -1,66 +1,72 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent';
 import { Fragment } from 'react';
 import { DocumentTabLink } from './TabLink.js';
+import './index.scss';
 export const baseClass = 'doc-tab';
-export const DefaultDocumentTab = props => {
-  const {
-    apiURL,
-    collectionConfig,
-    globalConfig,
-    permissions,
-    req,
-    tabConfig: {
-      href: tabHref,
-      isActive: tabIsActive,
-      label,
-      newTab,
-      Pill,
-      Pill_Component
+export const DefaultDocumentTab = (props)=>{
+    const { apiURL, collectionConfig, globalConfig, permissions, req, tabConfig: { href: tabHref, isActive: tabIsActive, label, newTab, Pill, Pill_Component } } = props;
+    let href = typeof tabHref === 'string' ? tabHref : '';
+    let isActive = typeof tabIsActive === 'boolean' ? tabIsActive : false;
+    if (typeof tabHref === 'function') {
+        href = tabHref({
+            apiURL,
+            collection: collectionConfig,
+            global: globalConfig,
+            routes: req.payload.config.routes
+        });
     }
-  } = props;
-  let href = typeof tabHref === 'string' ? tabHref : '';
-  let isActive = typeof tabIsActive === 'boolean' ? tabIsActive : false;
-  if (typeof tabHref === 'function') {
-    href = tabHref({
-      apiURL,
-      collection: collectionConfig,
-      global: globalConfig,
-      routes: req.payload.config.routes
-    });
-  }
-  if (typeof tabIsActive === 'function') {
-    isActive = tabIsActive({
-      href
-    });
-  }
-  const labelToRender = typeof label === 'function' ? label({
-    t: req.i18n.t
-  }) : label;
-  return /*#__PURE__*/_jsx(DocumentTabLink, {
-    adminRoute: req.payload.config.routes.admin,
-    ariaLabel: labelToRender,
-    baseClass: baseClass,
-    href: href,
-    isActive: isActive,
-    newTab: newTab,
-    children: /*#__PURE__*/_jsxs("span", {
-      className: `${baseClass}__label`,
-      children: [labelToRender, Pill || Pill_Component ? /*#__PURE__*/_jsxs(Fragment, {
-        children: [" ", RenderServerComponent({
-          Component: Pill,
-          Fallback: Pill_Component,
-          importMap: req.payload.importMap,
-          serverProps: {
-            i18n: req.i18n,
-            payload: req.payload,
-            permissions,
-            req,
-            user: req.user
-          }
-        })]
-      }) : null]
-    })
-  });
+    if (typeof tabIsActive === 'function') {
+        isActive = tabIsActive({
+            href
+        });
+    }
+    const labelToRender = typeof label === 'function' ? label({
+        t: req.i18n.t
+    }) : label;
+    return /*#__PURE__*/ _jsxDEV(DocumentTabLink, {
+        adminRoute: req.payload.config.routes.admin,
+        ariaLabel: labelToRender,
+        baseClass: baseClass,
+        href: href,
+        isActive: isActive,
+        newTab: newTab,
+        children: /*#__PURE__*/ _jsxDEV("span", {
+            className: `${baseClass}__label`,
+            children: [
+                labelToRender,
+                Pill || Pill_Component ? /*#__PURE__*/ _jsxDEV(Fragment, {
+                    children: [
+                        " ",
+                        RenderServerComponent({
+                            Component: Pill,
+                            Fallback: Pill_Component,
+                            importMap: req.payload.importMap,
+                            serverProps: {
+                                i18n: req.i18n,
+                                payload: req.payload,
+                                permissions,
+                                req,
+                                user: req.user
+                            }
+                        })
+                    ]
+                }, void 0, true, {
+                    fileName: "src/elements/DocumentHeader/Tabs/Tab/index.tsx",
+                    lineNumber: 74,
+                    columnNumber: 11
+                }, this) : null
+            ]
+        }, void 0, true, {
+            fileName: "src/elements/DocumentHeader/Tabs/Tab/index.tsx",
+            lineNumber: 71,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/elements/DocumentHeader/Tabs/Tab/index.tsx",
+        lineNumber: 63,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map

package/dist/elements/DocumentHeader/Tabs/Tab/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["RenderServerComponent","Fragment","DocumentTabLink","baseClass","DefaultDocumentTab","props","apiURL","collectionConfig","globalConfig","permissions","req","tabConfig","href","tabHref","isActive","tabIsActive","label","newTab","Pill","Pill_Component","collection","global","routes","payload","config","labelToRender","t","i18n","_jsx","adminRoute","admin","ariaLabel","_jsxs","className","Component","Fallback","importMap","serverProps","user"],"sources":["../../../../../src/elements/DocumentHeader/Tabs/Tab/index.tsx"],"sourcesContent":["import type {\n  DocumentTabConfig,\n  DocumentTabServerPropsOnly,\n  PayloadRequest,\n  SanitizedCollectionConfig,\n  SanitizedGlobalConfig,\n  SanitizedPermissions,\n} from 'payload'\nimport type React from 'react'\n\nimport { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'\nimport { Fragment } from 'react'\n\nimport { DocumentTabLink } from './TabLink.js'\nimport './index.scss'\n\nexport const baseClass = 'doc-tab'\n\nexport const DefaultDocumentTab: React.FC<{\n  apiURL?: string\n  collectionConfig?: SanitizedCollectionConfig\n  globalConfig?: SanitizedGlobalConfig\n  path?: string\n  permissions?: SanitizedPermissions\n  req: PayloadRequest\n  tabConfig: { readonly Pill_Component?: React.FC } & DocumentTabConfig\n}> = (props) => {\n  const {\n    apiURL,\n    collectionConfig,\n    globalConfig,\n    permissions,\n    req,\n    tabConfig: { href: tabHref, isActive: tabIsActive, label, newTab, Pill, Pill_Component },\n  } = props\n\n  let href = typeof tabHref === 'string' ? tabHref : ''\n  let isActive = typeof tabIsActive === 'boolean' ? tabIsActive : false\n\n  if (typeof tabHref === 'function') {\n    href = tabHref({\n      apiURL,\n      collection: collectionConfig,\n      global: globalConfig,\n      routes: req.payload.config.routes,\n    })\n  }\n\n  if (typeof tabIsActive === 'function') {\n    isActive = tabIsActive({\n      href,\n    })\n  }\n\n  const labelToRender =\n    typeof label === 'function'\n      ? label({\n          t: req.i18n.t,\n        })\n      : label\n\n  return (\n    <DocumentTabLink\n      adminRoute={req.payload.config.routes.admin}\n      ariaLabel={labelToRender}\n      baseClass={baseClass}\n      href={href}\n      isActive={isActive}\n      newTab={newTab}\n    >\n      <span className={`${baseClass}__label`}>\n        {labelToRender}\n        {Pill || Pill_Component ? (\n          <Fragment>\n            &nbsp;\n            {RenderServerComponent({\n              Component: Pill,\n              Fallback: Pill_Component,\n              importMap: req.payload.importMap,\n              serverProps: {\n                i18n: req.i18n,\n                payload: req.payload,\n                permissions,\n                req,\n                user: req.user,\n              } satisfies DocumentTabServerPropsOnly,\n            })}\n          </Fragment>\n        ) : null}\n      </span>\n    </DocumentTabLink>\n  )\n}\n"],"mappings":";AAUA,SAASA,qBAAqB,QAAQ;AACtC,SAASC,QAAQ,QAAQ;AAEzB,SAASC,eAAe,QAAQ;AAGhC,OAAO,MAAMC,SAAA,GAAY;AAEzB,OAAO,MAAMC,kBAAA,GAQPC,KAAA;EACJ,MAAM;IACJC,MAAM;IACNC,gBAAgB;IAChBC,YAAY;IACZC,WAAW;IACXC,GAAG;IACHC,SAAA,EAAW;MAAEC,IAAA,EAAMC,OAAO;MAAEC,QAAA,EAAUC,WAAW;MAAEC,KAAK;MAAEC,MAAM;MAAEC,IAAI;MAAEC;IAAc;EAAE,CACzF,GAAGd,KAAA;EAEJ,IAAIO,IAAA,GAAO,OAAOC,OAAA,KAAY,WAAWA,OAAA,GAAU;EACnD,IAAIC,QAAA,GAAW,OAAOC,WAAA,KAAgB,YAAYA,WAAA,GAAc;EAEhE,IAAI,OAAOF,OAAA,KAAY,YAAY;IACjCD,IAAA,GAAOC,OAAA,CAAQ;MACbP,MAAA;MACAc,UAAA,EAAYb,gBAAA;MACZc,MAAA,EAAQb,YAAA;MACRc,MAAA,EAAQZ,GAAA,CAAIa,OAAO,CAACC,MAAM,CAACF;IAC7B;EACF;EAEA,IAAI,OAAOP,WAAA,KAAgB,YAAY;IACrCD,QAAA,GAAWC,WAAA,CAAY;MACrBH;IACF;EACF;EAEA,MAAMa,aAAA,GACJ,OAAOT,KAAA,KAAU,aACbA,KAAA,CAAM;IACJU,CAAA,EAAGhB,GAAA,CAAIiB,IAAI,CAACD;EACd,KACAV,KAAA;EAEN,oBACEY,IAAA,CAAC1B,eAAA;IACC2B,UAAA,EAAYnB,GAAA,CAAIa,OAAO,CAACC,MAAM,CAACF,MAAM,CAACQ,KAAK;IAC3CC,SAAA,EAAWN,aAAA;IACXtB,SAAA,EAAWA,SAAA;IACXS,IAAA,EAAMA,IAAA;IACNE,QAAA,EAAUA,QAAA;IACVG,MAAA,EAAQA,MAAA;cAER,aAAAe,KAAA,CAAC;MAAKC,SAAA,EAAW,GAAG9B,SAAA,SAAkB;iBACnCsB,aAAA,EACAP,IAAA,IAAQC,cAAA,gBACPa,KAAA,CAAC/B,QAAA;mBAAS,KAEPD,qBAAA,CAAsB;UACrBkC,SAAA,EAAWhB,IAAA;UACXiB,QAAA,EAAUhB,cAAA;UACViB,SAAA,EAAW1B,GAAA,CAAIa,OAAO,CAACa,SAAS;UAChCC,WAAA,EAAa;YACXV,IAAA,EAAMjB,GAAA,CAAIiB,IAAI;YACdJ,OAAA,EAASb,GAAA,CAAIa,OAAO;YACpBd,WAAA;YACAC,GAAA;YACA4B,IAAA,EAAM5B,GAAA,CAAI4B;UACZ;QACF;WAEA;;;AAIZ","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/elements/DocumentHeader/Tabs/Tab/index.tsx"],"sourcesContent":["import type {\n  DocumentTabConfig,\n  DocumentTabServerPropsOnly,\n  PayloadRequest,\n  SanitizedCollectionConfig,\n  SanitizedGlobalConfig,\n  SanitizedPermissions,\n} from 'payload'\nimport type React from 'react'\n\nimport { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'\nimport { Fragment } from 'react'\n\nimport { DocumentTabLink } from './TabLink.js'\nimport './index.scss'\n\nexport const baseClass = 'doc-tab'\n\nexport const DefaultDocumentTab: React.FC<{\n  apiURL?: string\n  collectionConfig?: SanitizedCollectionConfig\n  globalConfig?: SanitizedGlobalConfig\n  path?: string\n  permissions?: SanitizedPermissions\n  req: PayloadRequest\n  tabConfig: { readonly Pill_Component?: React.FC } & DocumentTabConfig\n}> = (props) => {\n  const {\n    apiURL,\n    collectionConfig,\n    globalConfig,\n    permissions,\n    req,\n    tabConfig: { href: tabHref, isActive: tabIsActive, label, newTab, Pill, Pill_Component },\n  } = props\n\n  let href = typeof tabHref === 'string' ? tabHref : ''\n  let isActive = typeof tabIsActive === 'boolean' ? tabIsActive : false\n\n  if (typeof tabHref === 'function') {\n    href = tabHref({\n      apiURL,\n      collection: collectionConfig,\n      global: globalConfig,\n      routes: req.payload.config.routes,\n    })\n  }\n\n  if (typeof tabIsActive === 'function') {\n    isActive = tabIsActive({\n      href,\n    })\n  }\n\n  const labelToRender =\n    typeof label === 'function'\n      ? label({\n          t: req.i18n.t,\n        })\n      : label\n\n  return (\n    <DocumentTabLink\n      adminRoute={req.payload.config.routes.admin}\n      ariaLabel={labelToRender}\n      baseClass={baseClass}\n      href={href}\n      isActive={isActive}\n      newTab={newTab}\n    >\n      <span className={`${baseClass}__label`}>\n        {labelToRender}\n        {Pill || Pill_Component ? (\n          <Fragment>\n            &nbsp;\n            {RenderServerComponent({\n              Component: Pill,\n              Fallback: Pill_Component,\n              importMap: req.payload.importMap,\n              serverProps: {\n                i18n: req.i18n,\n                payload: req.payload,\n                permissions,\n                req,\n                user: req.user,\n              } satisfies DocumentTabServerPropsOnly,\n            })}\n          </Fragment>\n        ) : null}\n      </span>\n    </DocumentTabLink>\n  )\n}\n"],"names":["RenderServerComponent","Fragment","DocumentTabLink","baseClass","DefaultDocumentTab","props","apiURL","collectionConfig","globalConfig","permissions","req","tabConfig","href","tabHref","isActive","tabIsActive","label","newTab","Pill","Pill_Component","collection","global","routes","payload","config","labelToRender","t","i18n","adminRoute","admin","ariaLabel","span","className","Component","Fallback","importMap","serverProps","user"],"mappings":";AAUA,SAASA,qBAAqB,QAAQ,gDAA+C;AACrF,SAASC,QAAQ,QAAQ,QAAO;AAEhC,SAASC,eAAe,QAAQ,eAAc;AAC9C,OAAO,eAAc;AAErB,OAAO,MAAMC,YAAY,UAAS;AAElC,OAAO,MAAMC,qBAQR,CAACC;IACJ,MAAM,EACJC,MAAM,EACNC,gBAAgB,EAChBC,YAAY,EACZC,WAAW,EACXC,GAAG,EACHC,WAAW,EAAEC,MAAMC,OAAO,EAAEC,UAAUC,WAAW,EAAEC,KAAK,EAAEC,MAAM,EAAEC,IAAI,EAAEC,cAAc,EAAE,EACzF,GAAGd;IAEJ,IAAIO,OAAO,OAAOC,YAAY,WAAWA,UAAU;IACnD,IAAIC,WAAW,OAAOC,gBAAgB,YAAYA,cAAc;IAEhE,IAAI,OAAOF,YAAY,YAAY;QACjCD,OAAOC,QAAQ;YACbP;YACAc,YAAYb;YACZc,QAAQb;YACRc,QAAQZ,IAAIa,OAAO,CAACC,MAAM,CAACF,MAAM;QACnC;IACF;IAEA,IAAI,OAAOP,gBAAgB,YAAY;QACrCD,WAAWC,YAAY;YACrBH;QACF;IACF;IAEA,MAAMa,gBACJ,OAAOT,UAAU,aACbA,MAAM;QACJU,GAAGhB,IAAIiB,IAAI,CAACD,CAAC;IACf,KACAV;IAEN,qBACE,QAACd;QACC0B,YAAYlB,IAAIa,OAAO,CAACC,MAAM,CAACF,MAAM,CAACO,KAAK;QAC3CC,WAAWL;QACXtB,WAAWA;QACXS,MAAMA;QACNE,UAAUA;QACVG,QAAQA;kBAER,cAAA,QAACc;YAAKC,WAAW,GAAG7B,UAAU,OAAO,CAAC;;gBACnCsB;gBACAP,QAAQC,+BACP,QAAClB;;wBAAS;wBAEPD,sBAAsB;4BACrBiC,WAAWf;4BACXgB,UAAUf;4BACVgB,WAAWzB,IAAIa,OAAO,CAACY,SAAS;4BAChCC,aAAa;gCACXT,MAAMjB,IAAIiB,IAAI;gCACdJ,SAASb,IAAIa,OAAO;gCACpBd;gCACAC;gCACA2B,MAAM3B,IAAI2B,IAAI;4BAChB;wBACF;;;;;;2BAEA;;;;;;;;;;;;AAIZ,EAAC"}

package/dist/elements/DocumentHeader/Tabs/Tab/index.scss

@@ -0,0 +1,38 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .doc-tab {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+
+    &:hover {
+      .pill-version-count {
+        background-color: var(--theme-elevation-150);
+      }
+    }
+
+    &--active {
+      .pill-version-count {
+        background-color: var(--theme-elevation-250);
+      }
+
+      &:hover {
+        .pill-version-count {
+          background-color: var(--theme-elevation-250);
+        }
+      }
+    }
+
+    &__label {
+      display: flex;
+      position: relative;
+      align-items: center;
+      gap: 4px;
+      width: 100%;
+      height: 100%;
+      line-height: calc(var(--base) * 1.2);
+    }
+  }
+}

package/dist/elements/DocumentHeader/Tabs/index.js

@@ -1,78 +1,88 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent';
 import React from 'react';
 import { ShouldRenderTabs } from './ShouldRenderTabs.js';
 import { DefaultDocumentTab } from './Tab/index.js';
 import { getTabs } from './tabs/index.js';
+import './index.scss';
 const baseClass = 'doc-tabs';
-export const DocumentTabs = ({
-  collectionConfig,
-  globalConfig,
-  permissions,
-  req
-}) => {
-  const {
-    config
-  } = req.payload;
-  const tabs = getTabs({
-    collectionConfig,
-    globalConfig
-  });
-  return /*#__PURE__*/_jsx(ShouldRenderTabs, {
-    children: /*#__PURE__*/_jsx("div", {
-      className: baseClass,
-      children: /*#__PURE__*/_jsx("div", {
-        className: `${baseClass}__tabs-container`,
-        children: /*#__PURE__*/_jsx("ul", {
-          className: `${baseClass}__tabs`,
-          children: tabs?.map(({
-            tab: tabConfig,
-            viewPath
-          }, index) => {
-            const {
-              condition
-            } = tabConfig || {};
-            const meetsCondition = !condition || condition({
-              collectionConfig,
-              config,
-              globalConfig,
-              permissions,
-              req
-            });
-            if (!meetsCondition) {
-              return null;
-            }
-            if (tabConfig?.Component) {
-              return RenderServerComponent({
-                clientProps: {
-                  path: viewPath
-                },
-                Component: tabConfig.Component,
-                importMap: req.payload.importMap,
-                key: `tab-${index}`,
-                serverProps: {
-                  collectionConfig,
-                  globalConfig,
-                  i18n: req.i18n,
-                  payload: req.payload,
-                  permissions,
-                  req,
-                  user: req.user
-                }
-              });
-            }
-            return /*#__PURE__*/_jsx(DefaultDocumentTab, {
-              collectionConfig: collectionConfig,
-              globalConfig: globalConfig,
-              path: viewPath,
-              permissions: permissions,
-              req: req,
-              tabConfig: tabConfig
-            }, `tab-${index}`);
-          })
-        })
-      })
-    })
-  });
+export const DocumentTabs = ({ collectionConfig, globalConfig, permissions, req })=>{
+    const { config } = req.payload;
+    const tabs = getTabs({
+        collectionConfig,
+        globalConfig
+    });
+    return /*#__PURE__*/ _jsxDEV(ShouldRenderTabs, {
+        children: /*#__PURE__*/ _jsxDEV("div", {
+            className: baseClass,
+            children: /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__tabs-container`,
+                children: /*#__PURE__*/ _jsxDEV("ul", {
+                    className: `${baseClass}__tabs`,
+                    children: tabs?.map(({ tab: tabConfig, viewPath }, index)=>{
+                        const { condition } = tabConfig || {};
+                        const meetsCondition = !condition || condition({
+                            collectionConfig,
+                            config,
+                            globalConfig,
+                            permissions,
+                            req
+                        });
+                        if (!meetsCondition) {
+                            return null;
+                        }
+                        if (tabConfig?.Component) {
+                            return RenderServerComponent({
+                                clientProps: {
+                                    path: viewPath
+                                },
+                                Component: tabConfig.Component,
+                                importMap: req.payload.importMap,
+                                key: `tab-${index}`,
+                                serverProps: {
+                                    collectionConfig,
+                                    globalConfig,
+                                    i18n: req.i18n,
+                                    payload: req.payload,
+                                    permissions,
+                                    req,
+                                    user: req.user
+                                }
+                            });
+                        }
+                        return /*#__PURE__*/ _jsxDEV(DefaultDocumentTab, {
+                            collectionConfig: collectionConfig,
+                            globalConfig: globalConfig,
+                            path: viewPath,
+                            permissions: permissions,
+                            req: req,
+                            tabConfig: tabConfig
+                        }, `tab-${index}`, false, {
+                            fileName: "src/elements/DocumentHeader/Tabs/index.tsx",
+                            lineNumber: 70,
+                            columnNumber: 17
+                        }, this);
+                    })
+                }, void 0, false, {
+                    fileName: "src/elements/DocumentHeader/Tabs/index.tsx",
+                    lineNumber: 37,
+                    columnNumber: 11
+                }, this)
+            }, void 0, false, {
+                fileName: "src/elements/DocumentHeader/Tabs/index.tsx",
+                lineNumber: 36,
+                columnNumber: 9
+            }, this)
+        }, void 0, false, {
+            fileName: "src/elements/DocumentHeader/Tabs/index.tsx",
+            lineNumber: 35,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/elements/DocumentHeader/Tabs/index.tsx",
+        lineNumber: 34,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map

package/dist/elements/DocumentHeader/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["RenderServerComponent","React","ShouldRenderTabs","DefaultDocumentTab","getTabs","baseClass","DocumentTabs","collectionConfig","globalConfig","permissions","req","config","payload","tabs","_jsx","className","map","tab","tabConfig","viewPath","index","condition","meetsCondition","Component","clientProps","path","importMap","key","serverProps","i18n","user"],"sources":["../../../../src/elements/DocumentHeader/Tabs/index.tsx"],"sourcesContent":["import type {\n  DocumentTabClientProps,\n  DocumentTabServerPropsOnly,\n  PayloadRequest,\n  SanitizedCollectionConfig,\n  SanitizedGlobalConfig,\n  SanitizedPermissions,\n} from 'payload'\n\nimport { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'\nimport React from 'react'\n\nimport { ShouldRenderTabs } from './ShouldRenderTabs.js'\nimport { DefaultDocumentTab } from './Tab/index.js'\nimport { getTabs } from './tabs/index.js'\nimport './index.scss'\n\nconst baseClass = 'doc-tabs'\n\nexport const DocumentTabs: React.FC<{\n  collectionConfig: SanitizedCollectionConfig\n  globalConfig: SanitizedGlobalConfig\n  permissions: SanitizedPermissions\n  req: PayloadRequest\n}> = ({ collectionConfig, globalConfig, permissions, req }) => {\n  const { config } = req.payload\n\n  const tabs = getTabs({\n    collectionConfig,\n    globalConfig,\n  })\n\n  return (\n    <ShouldRenderTabs>\n      <div className={baseClass}>\n        <div className={`${baseClass}__tabs-container`}>\n          <ul className={`${baseClass}__tabs`}>\n            {tabs?.map(({ tab: tabConfig, viewPath }, index) => {\n              const { condition } = tabConfig || {}\n\n              const meetsCondition =\n                !condition ||\n                condition({ collectionConfig, config, globalConfig, permissions, req })\n\n              if (!meetsCondition) {\n                return null\n              }\n\n              if (tabConfig?.Component) {\n                return RenderServerComponent({\n                  clientProps: {\n                    path: viewPath,\n                  } satisfies DocumentTabClientProps,\n                  Component: tabConfig.Component,\n                  importMap: req.payload.importMap,\n                  key: `tab-${index}`,\n                  serverProps: {\n                    collectionConfig,\n                    globalConfig,\n                    i18n: req.i18n,\n                    payload: req.payload,\n                    permissions,\n                    req,\n                    user: req.user,\n                  } satisfies DocumentTabServerPropsOnly,\n                })\n              }\n\n              return (\n                <DefaultDocumentTab\n                  collectionConfig={collectionConfig}\n                  globalConfig={globalConfig}\n                  key={`tab-${index}`}\n                  path={viewPath}\n                  permissions={permissions}\n                  req={req}\n                  tabConfig={tabConfig}\n                />\n              )\n            })}\n          </ul>\n        </div>\n      </div>\n    </ShouldRenderTabs>\n  )\n}\n"],"mappings":";AASA,SAASA,qBAAqB,QAAQ;AACtC,OAAOC,KAAA,MAAW;AAElB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,kBAAkB,QAAQ;AACnC,SAASC,OAAO,QAAQ;AAGxB,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,YAAA,GAKRA,CAAC;EAAEC,gBAAgB;EAAEC,YAAY;EAAEC,WAAW;EAAEC;AAAG,CAAE;EACxD,MAAM;IAAEC;EAAM,CAAE,GAAGD,GAAA,CAAIE,OAAO;EAE9B,MAAMC,IAAA,GAAOT,OAAA,CAAQ;IACnBG,gBAAA;IACAC;EACF;EAEA,oBACEM,IAAA,CAACZ,gBAAA;cACC,aAAAY,IAAA,CAAC;MAAIC,SAAA,EAAWV,SAAA;gBACd,aAAAS,IAAA,CAAC;QAAIC,SAAA,EAAW,GAAGV,SAAA,kBAA2B;kBAC5C,aAAAS,IAAA,CAAC;UAAGC,SAAA,EAAW,GAAGV,SAAA,QAAiB;oBAChCQ,IAAA,EAAMG,GAAA,CAAI,CAAC;YAAEC,GAAA,EAAKC,SAAS;YAAEC;UAAQ,CAAE,EAAEC,KAAA;YACxC,MAAM;cAAEC;YAAS,CAAE,GAAGH,SAAA,IAAa,CAAC;YAEpC,MAAMI,cAAA,GACJ,CAACD,SAAA,IACDA,SAAA,CAAU;cAAEd,gBAAA;cAAkBI,MAAA;cAAQH,YAAA;cAAcC,WAAA;cAAaC;YAAI;YAEvE,IAAI,CAACY,cAAA,EAAgB;cACnB,OAAO;YACT;YAEA,IAAIJ,SAAA,EAAWK,SAAA,EAAW;cACxB,OAAOvB,qBAAA,CAAsB;gBAC3BwB,WAAA,EAAa;kBACXC,IAAA,EAAMN;gBACR;gBACAI,SAAA,EAAWL,SAAA,CAAUK,SAAS;gBAC9BG,SAAA,EAAWhB,GAAA,CAAIE,OAAO,CAACc,SAAS;gBAChCC,GAAA,EAAK,OAAOP,KAAA,EAAO;gBACnBQ,WAAA,EAAa;kBACXrB,gBAAA;kBACAC,YAAA;kBACAqB,IAAA,EAAMnB,GAAA,CAAImB,IAAI;kBACdjB,OAAA,EAASF,GAAA,CAAIE,OAAO;kBACpBH,WAAA;kBACAC,GAAA;kBACAoB,IAAA,EAAMpB,GAAA,CAAIoB;gBACZ;cACF;YACF;YAEA,oBACEhB,IAAA,CAACX,kBAAA;cACCI,gBAAA,EAAkBA,gBAAA;cAClBC,YAAA,EAAcA,YAAA;cAEdiB,IAAA,EAAMN,QAAA;cACNV,WAAA,EAAaA,WAAA;cACbC,GAAA,EAAKA,GAAA;cACLQ,SAAA,EAAWA;eAJN,OAAOE,KAAA,EAAO;UAOzB;;;;;AAMZ","ignoreList":[]}
+{"version":3,"sources":["../../../../src/elements/DocumentHeader/Tabs/index.tsx"],"sourcesContent":["import type {\n  DocumentTabClientProps,\n  DocumentTabServerPropsOnly,\n  PayloadRequest,\n  SanitizedCollectionConfig,\n  SanitizedGlobalConfig,\n  SanitizedPermissions,\n} from 'payload'\n\nimport { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'\nimport React from 'react'\n\nimport { ShouldRenderTabs } from './ShouldRenderTabs.js'\nimport { DefaultDocumentTab } from './Tab/index.js'\nimport { getTabs } from './tabs/index.js'\nimport './index.scss'\n\nconst baseClass = 'doc-tabs'\n\nexport const DocumentTabs: React.FC<{\n  collectionConfig: SanitizedCollectionConfig\n  globalConfig: SanitizedGlobalConfig\n  permissions: SanitizedPermissions\n  req: PayloadRequest\n}> = ({ collectionConfig, globalConfig, permissions, req }) => {\n  const { config } = req.payload\n\n  const tabs = getTabs({\n    collectionConfig,\n    globalConfig,\n  })\n\n  return (\n    <ShouldRenderTabs>\n      <div className={baseClass}>\n        <div className={`${baseClass}__tabs-container`}>\n          <ul className={`${baseClass}__tabs`}>\n            {tabs?.map(({ tab: tabConfig, viewPath }, index) => {\n              const { condition } = tabConfig || {}\n\n              const meetsCondition =\n                !condition ||\n                condition({ collectionConfig, config, globalConfig, permissions, req })\n\n              if (!meetsCondition) {\n                return null\n              }\n\n              if (tabConfig?.Component) {\n                return RenderServerComponent({\n                  clientProps: {\n                    path: viewPath,\n                  } satisfies DocumentTabClientProps,\n                  Component: tabConfig.Component,\n                  importMap: req.payload.importMap,\n                  key: `tab-${index}`,\n                  serverProps: {\n                    collectionConfig,\n                    globalConfig,\n                    i18n: req.i18n,\n                    payload: req.payload,\n                    permissions,\n                    req,\n                    user: req.user,\n                  } satisfies DocumentTabServerPropsOnly,\n                })\n              }\n\n              return (\n                <DefaultDocumentTab\n                  collectionConfig={collectionConfig}\n                  globalConfig={globalConfig}\n                  key={`tab-${index}`}\n                  path={viewPath}\n                  permissions={permissions}\n                  req={req}\n                  tabConfig={tabConfig}\n                />\n              )\n            })}\n          </ul>\n        </div>\n      </div>\n    </ShouldRenderTabs>\n  )\n}\n"],"names":["RenderServerComponent","React","ShouldRenderTabs","DefaultDocumentTab","getTabs","baseClass","DocumentTabs","collectionConfig","globalConfig","permissions","req","config","payload","tabs","div","className","ul","map","tab","tabConfig","viewPath","index","condition","meetsCondition","Component","clientProps","path","importMap","key","serverProps","i18n","user"],"mappings":";AASA,SAASA,qBAAqB,QAAQ,gDAA+C;AACrF,OAAOC,WAAW,QAAO;AAEzB,SAASC,gBAAgB,QAAQ,wBAAuB;AACxD,SAASC,kBAAkB,QAAQ,iBAAgB;AACnD,SAASC,OAAO,QAAQ,kBAAiB;AACzC,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,eAKR,CAAC,EAAEC,gBAAgB,EAAEC,YAAY,EAAEC,WAAW,EAAEC,GAAG,EAAE;IACxD,MAAM,EAAEC,MAAM,EAAE,GAAGD,IAAIE,OAAO;IAE9B,MAAMC,OAAOT,QAAQ;QACnBG;QACAC;IACF;IAEA,qBACE,QAACN;kBACC,cAAA,QAACY;YAAIC,WAAWV;sBACd,cAAA,QAACS;gBAAIC,WAAW,GAAGV,UAAU,gBAAgB,CAAC;0BAC5C,cAAA,QAACW;oBAAGD,WAAW,GAAGV,UAAU,MAAM,CAAC;8BAChCQ,MAAMI,IAAI,CAAC,EAAEC,KAAKC,SAAS,EAAEC,QAAQ,EAAE,EAAEC;wBACxC,MAAM,EAAEC,SAAS,EAAE,GAAGH,aAAa,CAAC;wBAEpC,MAAMI,iBACJ,CAACD,aACDA,UAAU;4BAAEf;4BAAkBI;4BAAQH;4BAAcC;4BAAaC;wBAAI;wBAEvE,IAAI,CAACa,gBAAgB;4BACnB,OAAO;wBACT;wBAEA,IAAIJ,WAAWK,WAAW;4BACxB,OAAOxB,sBAAsB;gCAC3ByB,aAAa;oCACXC,MAAMN;gCACR;gCACAI,WAAWL,UAAUK,SAAS;gCAC9BG,WAAWjB,IAAIE,OAAO,CAACe,SAAS;gCAChCC,KAAK,CAAC,IAAI,EAAEP,OAAO;gCACnBQ,aAAa;oCACXtB;oCACAC;oCACAsB,MAAMpB,IAAIoB,IAAI;oCACdlB,SAASF,IAAIE,OAAO;oCACpBH;oCACAC;oCACAqB,MAAMrB,IAAIqB,IAAI;gCAChB;4BACF;wBACF;wBAEA,qBACE,QAAC5B;4BACCI,kBAAkBA;4BAClBC,cAAcA;4BAEdkB,MAAMN;4BACNX,aAAaA;4BACbC,KAAKA;4BACLS,WAAWA;2BAJN,CAAC,IAAI,EAAEE,OAAO;;;;;oBAOzB;;;;;;;;;;;;;;;;;;;;;AAMZ,EAAC"}

package/dist/elements/DocumentHeader/Tabs/index.scss

@@ -0,0 +1,54 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .doc-tabs {
+    display: flex;
+
+    &__tabs {
+      display: flex;
+      gap: calc(var(--base) / 2);
+      list-style: none;
+      align-items: center;
+      margin: 0;
+      padding-left: 0;
+    }
+
+    @include mid-break {
+      width: 100%;
+      padding: 0;
+      overflow: auto;
+
+      // this container has a gradient overlay as visual indication of `overflow: scroll`
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      &::after {
+        content: '';
+        display: block;
+        position: sticky;
+        right: 0;
+        width: calc(var(--base) * 2);
+        height: calc(var(--base) * 2);
+        background: linear-gradient(to right, transparent, var(--theme-bg));
+        flex-shrink: 0;
+        z-index: 1111;
+        pointer-events: none;
+      }
+
+      &__tabs {
+        padding: 0;
+      }
+    }
+
+    @include small-break {
+      &__tabs-container {
+        margin-right: var(--gutter-h);
+      }
+
+      &__tabs {
+        gap: var(--gutter-h);
+      }
+    }
+  }
+}