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

package/dist/elements/DocumentFields/RequiredFieldsInfo/index.js

@@ -0,0 +1,88 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
+import React, { useId, useLayoutEffect, useRef, useState } from 'react';
+import { InfoIcon } from '../../../icons/Info/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { Button } from '../../Button/index.js';
+import './index.css';
+export const RequiredFieldsInfo = () => {
+  const {
+    t
+  } = useTranslation();
+  const id = useId();
+  const buttonRef = useRef(null);
+  const popoverRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const explanation = t('general:requiredFields');
+  useLayoutEffect(() => {
+    const button = buttonRef.current;
+    const popover = popoverRef.current;
+    if (!isOpen || !button || !popover) {
+      return;
+    }
+    const dismissOnEscape = event => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        popover.hidePopover();
+      }
+    };
+    // Dismiss this help before Escape reaches a containing drawer.
+    document.addEventListener('keydown', dismissOnEscape, true);
+    const cleanup = autoUpdate(button, popover, () => {
+      void computePosition(button, popover, {
+        middleware: [offset(6), flip(), shift({
+          padding: 8
+        })],
+        placement: 'bottom-end',
+        strategy: 'fixed'
+      }).then(({
+        x,
+        y
+      }) => {
+        Object.assign(popover.style, {
+          left: `${x}px`,
+          top: `${y}px`
+        });
+      });
+    });
+    return () => {
+      cleanup();
+      document.removeEventListener('keydown', dismissOnEscape, true);
+    };
+  }, [isOpen]);
+  const open = () => popoverRef.current?.showPopover();
+  return /*#__PURE__*/_jsxs("div", {
+    className: "required-fields-info",
+    children: [/*#__PURE__*/_jsx(Button, {
+      "aria-controls": id,
+      "aria-expanded": isOpen,
+      "aria-label": explanation,
+      buttonStyle: "ghost",
+      extraButtonProps: {
+        onBlur: () => popoverRef.current?.hidePopover(),
+        onFocus: open,
+        onPointerEnter: open,
+        title: undefined
+      },
+      icon: /*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        children: /*#__PURE__*/_jsx(InfoIcon, {})
+      }),
+      margin: false,
+      onClick: open,
+      ref: buttonRef,
+      type: "button"
+    }), /*#__PURE__*/_jsx("div", {
+      className: "required-fields-info__content",
+      id: id,
+      onToggle: event_0 => setIsOpen(event_0.newState === 'open'),
+      popover: "auto",
+      ref: popoverRef,
+      children: explanation
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/DocumentFields/RequiredFieldsInfo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["autoUpdate","computePosition","flip","offset","shift","React","useId","useLayoutEffect","useRef","useState","InfoIcon","useTranslation","Button","RequiredFieldsInfo","t","id","buttonRef","popoverRef","isOpen","setIsOpen","explanation","button","current","popover","dismissOnEscape","event","key","preventDefault","stopPropagation","hidePopover","document","addEventListener","cleanup","middleware","padding","placement","strategy","then","x","y","Object","assign","style","left","top","removeEventListener","open","showPopover","_jsxs","className","_jsx","buttonStyle","extraButtonProps","onBlur","onFocus","onPointerEnter","title","undefined","icon","margin","onClick","ref","type","onToggle","newState"],"sources":["../../../../src/elements/DocumentFields/RequiredFieldsInfo/index.tsx"],"sourcesContent":["'use client'\n\nimport { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'\nimport React, { useId, useLayoutEffect, useRef, useState } from 'react'\n\nimport { InfoIcon } from '../../../icons/Info/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport './index.css'\n\nexport const RequiredFieldsInfo = () => {\n  const { t } = useTranslation()\n  const id = useId()\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const popoverRef = useRef<HTMLDivElement>(null)\n  const [isOpen, setIsOpen] = useState(false)\n  const explanation = t('general:requiredFields')\n\n  useLayoutEffect(() => {\n    const button = buttonRef.current\n    const popover = popoverRef.current\n\n    if (!isOpen || !button || !popover) {\n      return\n    }\n\n    const dismissOnEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        event.preventDefault()\n        event.stopPropagation()\n        popover.hidePopover()\n      }\n    }\n\n    // Dismiss this help before Escape reaches a containing drawer.\n    document.addEventListener('keydown', dismissOnEscape, true)\n\n    const cleanup = autoUpdate(button, popover, () => {\n      void computePosition(button, popover, {\n        middleware: [offset(6), flip(), shift({ padding: 8 })],\n        placement: 'bottom-end',\n        strategy: 'fixed',\n      }).then(({ x, y }) => {\n        Object.assign(popover.style, { left: `${x}px`, top: `${y}px` })\n      })\n    })\n\n    return () => {\n      cleanup()\n      document.removeEventListener('keydown', dismissOnEscape, true)\n    }\n  }, [isOpen])\n\n  const open = () => popoverRef.current?.showPopover()\n\n  return (\n    <div className=\"required-fields-info\">\n      <Button\n        aria-controls={id}\n        aria-expanded={isOpen}\n        aria-label={explanation}\n        buttonStyle=\"ghost\"\n        extraButtonProps={{\n          onBlur: () => popoverRef.current?.hidePopover(),\n          onFocus: open,\n          onPointerEnter: open,\n          title: undefined,\n        }}\n        icon={\n          <span aria-hidden=\"true\">\n            <InfoIcon />\n          </span>\n        }\n        margin={false}\n        onClick={open}\n        ref={buttonRef}\n        type=\"button\"\n      />\n      <div\n        className=\"required-fields-info__content\"\n        id={id}\n        onToggle={(event) => setIsOpen(event.newState === 'open')}\n        popover=\"auto\"\n        ref={popoverRef}\n      >\n        {explanation}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,SAASA,UAAU,EAAEC,eAAe,EAAEC,IAAI,EAAEC,MAAM,EAAEC,KAAK,QAAQ;AACjE,OAAOC,KAAA,IAASC,KAAK,EAAEC,eAAe,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAEhE,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,OAAO,MAAMC,kBAAA,GAAqBA,CAAA;EAChC,MAAM;IAAEC;EAAC,CAAE,GAAGH,cAAA;EACd,MAAMI,EAAA,GAAKT,KAAA;EACX,MAAMU,SAAA,GAAYR,MAAA,CAA0B;EAC5C,MAAMS,UAAA,GAAaT,MAAA,CAAuB;EAC1C,MAAM,CAACU,MAAA,EAAQC,SAAA,CAAU,GAAGV,QAAA,CAAS;EACrC,MAAMW,WAAA,GAAcN,CAAA,CAAE;EAEtBP,eAAA,CAAgB;IACd,MAAMc,MAAA,GAASL,SAAA,CAAUM,OAAO;IAChC,MAAMC,OAAA,GAAUN,UAAA,CAAWK,OAAO;IAElC,IAAI,CAACJ,MAAA,IAAU,CAACG,MAAA,IAAU,CAACE,OAAA,EAAS;MAClC;IACF;IAEA,MAAMC,eAAA,GAAmBC,KAAA;MACvB,IAAIA,KAAA,CAAMC,GAAG,KAAK,UAAU;QAC1BD,KAAA,CAAME,cAAc;QACpBF,KAAA,CAAMG,eAAe;QACrBL,OAAA,CAAQM,WAAW;MACrB;IACF;IAEA;IACAC,QAAA,CAASC,gBAAgB,CAAC,WAAWP,eAAA,EAAiB;IAEtD,MAAMQ,OAAA,GAAUhC,UAAA,CAAWqB,MAAA,EAAQE,OAAA,EAAS;MAC1C,KAAKtB,eAAA,CAAgBoB,MAAA,EAAQE,OAAA,EAAS;QACpCU,UAAA,EAAY,CAAC9B,MAAA,CAAO,IAAID,IAAA,IAAQE,KAAA,CAAM;UAAE8B,OAAA,EAAS;QAAE,GAAG;QACtDC,SAAA,EAAW;QACXC,QAAA,EAAU;MACZ,GAAGC,IAAI,CAAC,CAAC;QAAEC,CAAC;QAAEC;MAAC,CAAE;QACfC,MAAA,CAAOC,MAAM,CAAClB,OAAA,CAAQmB,KAAK,EAAE;UAAEC,IAAA,EAAM,GAAGL,CAAA,IAAK;UAAEM,GAAA,EAAK,GAAGL,CAAA;QAAM;MAC/D;IACF;IAEA,OAAO;MACLP,OAAA;MACAF,QAAA,CAASe,mBAAmB,CAAC,WAAWrB,eAAA,EAAiB;IAC3D;EACF,GAAG,CAACN,MAAA,CAAO;EAEX,MAAM4B,IAAA,GAAOA,CAAA,KAAM7B,UAAA,CAAWK,OAAO,EAAEyB,WAAA;EAEvC,oBACEC,KAAA,CAAC;IAAIC,SAAA,EAAU;4BACbC,IAAA,CAACtC,MAAA;MACC,iBAAeG,EAAA;MACf,iBAAeG,MAAA;MACf,cAAYE,WAAA;MACZ+B,WAAA,EAAY;MACZC,gBAAA,EAAkB;QAChBC,MAAA,EAAQA,CAAA,KAAMpC,UAAA,CAAWK,OAAO,EAAEO,WAAA;QAClCyB,OAAA,EAASR,IAAA;QACTS,cAAA,EAAgBT,IAAA;QAChBU,KAAA,EAAOC;MACT;MACAC,IAAA,eACER,IAAA,CAAC;QAAK,eAAY;kBAChB,aAAAA,IAAA,CAACxC,QAAA;;MAGLiD,MAAA,EAAQ;MACRC,OAAA,EAASd,IAAA;MACTe,GAAA,EAAK7C,SAAA;MACL8C,IAAA,EAAK;qBAEPZ,IAAA,CAAC;MACCD,SAAA,EAAU;MACVlC,EAAA,EAAIA,EAAA;MACJgD,QAAA,EAAWtC,OAAA,IAAUN,SAAA,CAAUM,OAAA,CAAMuC,QAAQ,KAAK;MAClDzC,OAAA,EAAQ;MACRsC,GAAA,EAAK5C,UAAA;gBAEJG;;;AAIT","ignoreList":[]}

package/dist/elements/DocumentFields/index.css

@@ -0,0 +1,271 @@
+@layer payload-default {
+  .document-fields {
+    width: 100%;
+    display: flex;
+    --doc-sidebar-width: 325px;
+  }
+
+  .document-fields--has-sidebar {
+    --main-width: 66.66%;
+    --main-border: var(--stroke-width-small) solid var(--color-border);
+    --main-field-margin: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
+  }
+
+  .document-fields--has-sidebar:has(
+    .document-fields__sidebar-wrap .document-fields__sidebar-fields > .render-fields:empty
+  ) {
+    --main-width: 100%;
+    --main-border: none;
+    --main-field-margin: initial;
+  }
+
+  .document-fields--has-sidebar .document-fields__main {
+    width: var(--main-width);
+  }
+
+  .document-fields--has-sidebar .document-fields__edit {
+    padding-left: var(--gutter-h);
+    padding-right: var(--gutter-h);
+  }
+
+  [dir='ltr'] .document-fields--has-sidebar .document-fields__edit {
+    top: 0;
+    right: 0;
+    border-right: var(--main-border);
+  }
+
+  [dir='rtl'] .document-fields--has-sidebar .document-fields__edit {
+    top: 0;
+    left: 0;
+    border-left: var(--main-border);
+  }
+
+  .document-fields--has-sidebar .document-fields__fields > .tabs-field {
+    margin-inline-end: var(--main-field-margin);
+  }
+
+  /* Extend group border to the main/sidebar divider */
+  .document-fields--has-sidebar .document-fields__fields > .group-field::before {
+    inset-inline-end: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
+  }
+
+  .document-fields__main {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    flex-grow: 1;
+  }
+
+  .document-fields__edit {
+    padding-top: var(--spacer-4);
+    padding-bottom: var(--spacing-view-bottom);
+    flex-grow: 1;
+  }
+
+  .document-fields__sidebar-wrap {
+    position: var(--sidebar-wrap-position, sticky);
+    top: var(--sidebar-wrap-top, var(--doc-controls-height));
+    width: var(--sidebar-wrap-width, 33.33%);
+    height: var(--sidebar-wrap-height, calc(100dvh - var(--doc-controls-height)));
+    min-width: var(--sidebar-wrap-min-width, var(--doc-sidebar-width));
+    flex-shrink: var(--sidebar-wrap-flex-shrink, 0);
+  }
+
+  .document-fields__sidebar-wrap:has(.document-fields__sidebar-fields > .render-fields:empty) {
+    --sidebar-wrap-width: 0;
+    --sidebar-wrap-min-width: 0;
+    --sidebar-wrap-position: initial;
+    --sidebar-wrap-top: initial;
+    --sidebar-wrap-height: initial;
+    --sidebar-wrap-flex-shrink: initial;
+    display: none;
+  }
+
+  .document-fields__sidebar {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+
+  .document-fields__sidebar-fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-3);
+    padding-top: var(--spacer-4);
+    padding-left: var(--gutter-h);
+    padding-right: var(--gutter-h);
+    padding-bottom: var(--spacing-view-bottom);
+  }
+
+  .document-fields__label {
+    color: var(--color-text-tertiary);
+  }
+
+  .document-fields--force-sidebar-wrap {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-color) transparent;
+    display: block;
+    isolation: isolate;
+    --main-border: none; /* Reset the sidebar divider — the live preview window provides its own border-left */
+  }
+
+  .document-fields--force-sidebar-wrap .document-fields__main {
+    width: 100%;
+    min-height: initial;
+  }
+
+  .document-fields--force-sidebar-wrap .document-fields__sidebar-wrap {
+    position: static;
+    width: 100%;
+    min-width: 0;
+    height: initial;
+    border-left: 0;
+  }
+
+  .document-fields--force-sidebar-wrap .document-fields__sidebar {
+    padding-bottom: calc(2 * var(--spacing-field));
+    overflow: visible;
+  }
+
+  .document-fields--force-sidebar-wrap .document-fields__sidebar-fields {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
+  @media (max-width: 1024px) {
+    .document-fields {
+      display: block;
+    }
+
+    .document-fields--has-sidebar .document-fields__main {
+      width: 100%;
+    }
+
+    [dir='ltr'] .document-fields--has-sidebar .document-fields__edit {
+      border-right: 0;
+    }
+
+    [dir='rtl'] .document-fields--has-sidebar .document-fields__edit {
+      border-left: 0;
+    }
+
+    .document-fields--has-sidebar .document-fields__fields > .tabs-field {
+      margin-inline-end: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
+    }
+
+    .document-fields__main {
+      width: 100%;
+      min-height: initial;
+    }
+
+    .document-fields__sidebar-wrap {
+      position: static;
+      width: 100%;
+      height: initial;
+      border-left: 0;
+    }
+
+    .document-fields__form {
+      display: block;
+    }
+
+    .document-fields__sidebar-fields {
+      padding-top: 0;
+      padding-bottom: 0;
+      gap: var(--spacer-2);
+    }
+
+    .document-fields__sidebar {
+      padding-bottom: calc(var(--spacer-5) * 2);
+      overflow: visible;
+    }
+  }
+
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
+  @media (max-width: 768px) {
+    .document-fields__sidebar-wrap {
+      min-width: initial;
+      width: 100%;
+    }
+
+    .document-fields__edit {
+      padding-top: var(--spacer-2);
+    }
+  }
+
+  /* Inside a drawer, collapse the sidebar based on the drawer container width
+     rather than the viewport. Sidebars show when the drawer is >= 768px wide. */
+  @container drawer (max-width: 768px) {
+    .document-fields--has-sidebar .document-fields__main {
+      width: 100%;
+    }
+
+    [dir='ltr'] .document-fields--has-sidebar .document-fields__edit {
+      border-right: 0;
+    }
+
+    [dir='rtl'] .document-fields--has-sidebar .document-fields__edit {
+      border-left: 0;
+    }
+
+    .document-fields--has-sidebar .document-fields__fields > .tabs-field {
+      margin-inline-end: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
+    }
+
+    .document-fields {
+      display: block;
+    }
+
+    .document-fields__main {
+      width: 100%;
+      min-height: initial;
+    }
+
+    .document-fields__sidebar-wrap {
+      position: static;
+      width: 100%;
+      height: initial;
+      min-width: initial;
+      border-left: 0;
+    }
+
+    .document-fields__form {
+      display: block;
+    }
+
+    .document-fields__sidebar-fields {
+      padding-top: 0;
+      padding-bottom: 0;
+      gap: var(--spacer-2);
+    }
+
+    .document-fields__sidebar {
+      padding-top: var(--gutter-h);
+      padding-bottom: calc(var(--spacer-5) * 2);
+      overflow: visible;
+    }
+  }
+
+  /* When shown inside a drawer (container >= 768px), keep a minimum sidebar width of 320px. */
+  @container drawer (min-width: 768px) {
+    .document-fields--has-sidebar .document-fields__sidebar-wrap {
+      min-width: 320px;
+    }
+  }
+
+  .drawer .document-fields__edit {
+    padding: var(--gutter-h);
+  }
+
+  /* In a drawer the main and sidebar fields stack without the page's vertical
+     divider, so add a top border to the sidebar fields to separate them from
+     the main fields above. */
+  .drawer .document-fields__sidebar-wrap {
+    border-top: var(--stroke-width-small) solid var(--color-border);
+  }
+}

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

@@ -1,10 +1,15 @@
 import type { ClientField, SanitizedDocumentPermissions } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 type Args = {
     readonly AfterFields?: React.ReactNode;
     readonly BeforeFields?: React.ReactNode;
     readonly Description?: React.ReactNode;
+    /**
+     * When true, fields with `admin.position: 'sidebar'` render inline in the main column and no
+     * sidebar is rendered. Used by upload collections, whose layout has no room for a field sidebar.
+     */
+    readonly disableSidebar?: boolean;
     readonly docPermissions: SanitizedDocumentPermissions;
     readonly fields: ClientField[];
     readonly forceSidebarWrap?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentFields/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAA;AAGxE,OAAO,KAAkB,MAAM,OAAO,CAAA;AAKtC,OAAO,cAAc,CAAA;AAIrB,KAAK,IAAI,GAAG;IACV,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,cAAc,EAAE,4BAA4B,CAAA;IACrD,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,kBAAkB,EAAE,MAAM,EAAE,CAAA;CACtC,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CA6EzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentFields/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAA;AAGxE,OAAO,KAAkB,MAAM,OAAO,CAAA;AAKtC,OAAO,aAAa,CAAA;AAIpB,KAAK,IAAI,GAAG;IACV,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC;;;OAGG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,cAAc,EAAE,4BAA4B,CAAA;IACrD,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,kBAAkB,EAAE,MAAM,EAAE,CAAA;CACtC,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAsFzC,CAAA"}

package/dist/elements/DocumentFields/index.js

@@ -6,11 +6,12 @@ import React, { useMemo } from 'react';
 import { RenderFields } from '../../forms/RenderFields/index.js';
 import { Gutter } from '../Gutter/index.js';
 import { TrashBanner } from '../TrashBanner/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'document-fields';
 export const DocumentFields = ({
   AfterFields,
   BeforeFields,
+  disableSidebar = false,
   docPermissions,
   fields,
   forceSidebarWrap,
@@ -23,6 +24,13 @@ export const DocumentFields = ({
     mainFields,
     sidebarFields
   } = useMemo(() => {
+    if (disableSidebar) {
+      return {
+        hasSidebarFields: false,
+        mainFields: fields,
+        sidebarFields: []
+      };
+    }
     return fields.reduce((acc, field) => {
       if (fieldIsSidebar(field)) {
         acc.sidebarFields.push(field);
@@ -38,7 +46,7 @@ export const DocumentFields = ({
       mainFields: [],
       sidebarFields: []
     });
-  }, [fields]);
+  }, [disableSidebar, fields]);
   return /*#__PURE__*/_jsxs("div", {
     className: [baseClass, hasSidebarFields ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`, forceSidebarWrap && `${baseClass}--force-sidebar-wrap`].filter(Boolean).join(' '),
     children: [/*#__PURE__*/_jsx("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["fieldIsSidebar","React","useMemo","RenderFields","Gutter","TrashBanner","baseClass","DocumentFields","AfterFields","BeforeFields","docPermissions","fields","forceSidebarWrap","isTrashed","readOnly","schemaPathSegments","hasSidebarFields","mainFields","sidebarFields","reduce","acc","field","push","_jsxs","className","filter","Boolean","join","_jsx","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions"],"sources":["../../../src/elements/DocumentFields/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, SanitizedDocumentPermissions } from 'payload'\n\nimport { fieldIsSidebar } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport { TrashBanner } from '../TrashBanner/index.js'\nimport './index.scss'\n\nconst baseClass = 'document-fields'\n\ntype Args = {\n  readonly AfterFields?: React.ReactNode\n  readonly BeforeFields?: React.ReactNode\n  readonly Description?: React.ReactNode\n  readonly docPermissions: SanitizedDocumentPermissions\n  readonly fields: ClientField[]\n  readonly forceSidebarWrap?: boolean\n  readonly isTrashed?: boolean\n  readonly readOnly?: boolean\n  readonly schemaPathSegments: string[]\n}\n\nexport const DocumentFields: React.FC<Args> = ({\n  AfterFields,\n  BeforeFields,\n  docPermissions,\n  fields,\n  forceSidebarWrap,\n  isTrashed = false,\n  readOnly,\n  schemaPathSegments,\n}) => {\n  const { hasSidebarFields, mainFields, sidebarFields } = useMemo(() => {\n    return fields.reduce(\n      (acc, field) => {\n        if (fieldIsSidebar(field)) {\n          acc.sidebarFields.push(field)\n          acc.mainFields.push(null)\n          acc.hasSidebarFields = true\n        } else {\n          acc.mainFields.push(field)\n          acc.sidebarFields.push(null)\n        }\n        return acc\n      },\n      {\n        hasSidebarFields: false,\n        mainFields: [] as ClientField[],\n        sidebarFields: [] as ClientField[],\n      },\n    )\n  }, [fields])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        hasSidebarFields ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,\n        forceSidebarWrap && `${baseClass}--force-sidebar-wrap`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={`${baseClass}__main`}>\n        <Gutter className={`${baseClass}__edit`}>\n          {isTrashed && <TrashBanner />}\n          {BeforeFields}\n          <RenderFields\n            className={`${baseClass}__fields`}\n            fields={mainFields}\n            forceRender\n            parentIndexPath=\"\"\n            parentPath=\"\"\n            parentSchemaPath={schemaPathSegments.join('.')}\n            permissions={docPermissions?.fields}\n            readOnly={readOnly}\n          />\n          {AfterFields}\n        </Gutter>\n      </div>\n      {hasSidebarFields ? (\n        <div className={`${baseClass}__sidebar-wrap`}>\n          <div className={`${baseClass}__sidebar`}>\n            <div className={`${baseClass}__sidebar-fields`}>\n              <RenderFields\n                fields={sidebarFields}\n                forceRender\n                parentIndexPath=\"\"\n                parentPath=\"\"\n                parentSchemaPath={schemaPathSegments.join('.')}\n                permissions={docPermissions?.fields}\n                readOnly={readOnly}\n              />\n            </div>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,IAASC,OAAO,QAAQ;AAE/B,SAASC,YAAY,QAAQ;AAC7B,SAASC,MAAM,QAAQ;AACvB,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAclB,OAAO,MAAMC,cAAA,GAAiCA,CAAC;EAC7CC,WAAW;EACXC,YAAY;EACZC,cAAc;EACdC,MAAM;EACNC,gBAAgB;EAChBC,SAAA,GAAY,KAAK;EACjBC,QAAQ;EACRC;AAAkB,CACnB;EACC,MAAM;IAAEC,gBAAgB;IAAEC,UAAU;IAAEC;EAAa,CAAE,GAAGhB,OAAA,CAAQ;IAC9D,OAAOS,MAAA,CAAOQ,MAAM,CAClB,CAACC,GAAA,EAAKC,KAAA;MACJ,IAAIrB,cAAA,CAAeqB,KAAA,GAAQ;QACzBD,GAAA,CAAIF,aAAa,CAACI,IAAI,CAACD,KAAA;QACvBD,GAAA,CAAIH,UAAU,CAACK,IAAI,CAAC;QACpBF,GAAA,CAAIJ,gBAAgB,GAAG;MACzB,OAAO;QACLI,GAAA,CAAIH,UAAU,CAACK,IAAI,CAACD,KAAA;QACpBD,GAAA,CAAIF,aAAa,CAACI,IAAI,CAAC;MACzB;MACA,OAAOF,GAAA;IACT,GACA;MACEJ,gBAAA,EAAkB;MAClBC,UAAA,EAAY,EAAE;MACdC,aAAA,EAAe;IACjB;EAEJ,GAAG,CAACP,MAAA,CAAO;EAEX,oBACEY,KAAA,CAAC;IACCC,SAAA,EAAW,CACTlB,SAAA,EACAU,gBAAA,GAAmB,GAAGV,SAAA,eAAwB,GAAG,GAAGA,SAAA,cAAuB,EAC3EM,gBAAA,IAAoB,GAAGN,SAAA,sBAA+B,CACvD,CACEmB,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;4BAERC,IAAA,CAAC;MAAIJ,SAAA,EAAW,GAAGlB,SAAA,QAAiB;gBAClC,aAAAiB,KAAA,CAACnB,MAAA;QAAOoB,SAAA,EAAW,GAAGlB,SAAA,QAAiB;mBACpCO,SAAA,iBAAae,IAAA,CAACvB,WAAA,OACdI,YAAA,E,aACDmB,IAAA,CAACzB,YAAA;UACCqB,SAAA,EAAW,GAAGlB,SAAA,UAAmB;UACjCK,MAAA,EAAQM,UAAA;UACRY,WAAW;UACXC,eAAA,EAAgB;UAChBC,UAAA,EAAW;UACXC,gBAAA,EAAkBjB,kBAAA,CAAmBY,IAAI,CAAC;UAC1CM,WAAA,EAAavB,cAAA,EAAgBC,MAAA;UAC7BG,QAAA,EAAUA;YAEXN,WAAA;;QAGJQ,gBAAA,gBACCY,IAAA,CAAC;MAAIJ,SAAA,EAAW,GAAGlB,SAAA,gBAAyB;gBAC1C,aAAAsB,IAAA,CAAC;QAAIJ,SAAA,EAAW,GAAGlB,SAAA,WAAoB;kBACrC,aAAAsB,IAAA,CAAC;UAAIJ,SAAA,EAAW,GAAGlB,SAAA,kBAA2B;oBAC5C,aAAAsB,IAAA,CAACzB,YAAA;YACCQ,MAAA,EAAQO,aAAA;YACRW,WAAW;YACXC,eAAA,EAAgB;YAChBC,UAAA,EAAW;YACXC,gBAAA,EAAkBjB,kBAAA,CAAmBY,IAAI,CAAC;YAC1CM,WAAA,EAAavB,cAAA,EAAgBC,MAAA;YAC7BG,QAAA,EAAUA;;;;SAKhB;;AAGV","ignoreList":[]}
+{"version":3,"file":"index.js","names":["fieldIsSidebar","React","useMemo","RenderFields","Gutter","TrashBanner","baseClass","DocumentFields","AfterFields","BeforeFields","disableSidebar","docPermissions","fields","forceSidebarWrap","isTrashed","readOnly","schemaPathSegments","hasSidebarFields","mainFields","sidebarFields","reduce","acc","field","push","_jsxs","className","filter","Boolean","join","_jsx","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions"],"sources":["../../../src/elements/DocumentFields/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, SanitizedDocumentPermissions } from 'payload'\n\nimport { fieldIsSidebar } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport { TrashBanner } from '../TrashBanner/index.js'\nimport './index.css'\n\nconst baseClass = 'document-fields'\n\ntype Args = {\n  readonly AfterFields?: React.ReactNode\n  readonly BeforeFields?: React.ReactNode\n  readonly Description?: React.ReactNode\n  /**\n   * When true, fields with `admin.position: 'sidebar'` render inline in the main column and no\n   * sidebar is rendered. Used by upload collections, whose layout has no room for a field sidebar.\n   */\n  readonly disableSidebar?: boolean\n  readonly docPermissions: SanitizedDocumentPermissions\n  readonly fields: ClientField[]\n  readonly forceSidebarWrap?: boolean\n  readonly isTrashed?: boolean\n  readonly readOnly?: boolean\n  readonly schemaPathSegments: string[]\n}\n\nexport const DocumentFields: React.FC<Args> = ({\n  AfterFields,\n  BeforeFields,\n  disableSidebar = false,\n  docPermissions,\n  fields,\n  forceSidebarWrap,\n  isTrashed = false,\n  readOnly,\n  schemaPathSegments,\n}) => {\n  const { hasSidebarFields, mainFields, sidebarFields } = useMemo(() => {\n    if (disableSidebar) {\n      return {\n        hasSidebarFields: false,\n        mainFields: fields,\n        sidebarFields: [] as ClientField[],\n      }\n    }\n\n    return fields.reduce(\n      (acc, field) => {\n        if (fieldIsSidebar(field)) {\n          acc.sidebarFields.push(field)\n          acc.mainFields.push(null)\n          acc.hasSidebarFields = true\n        } else {\n          acc.mainFields.push(field)\n          acc.sidebarFields.push(null)\n        }\n        return acc\n      },\n      {\n        hasSidebarFields: false,\n        mainFields: [] as ClientField[],\n        sidebarFields: [] as ClientField[],\n      },\n    )\n  }, [disableSidebar, fields])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        hasSidebarFields ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,\n        forceSidebarWrap && `${baseClass}--force-sidebar-wrap`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={`${baseClass}__main`}>\n        <Gutter className={`${baseClass}__edit`}>\n          {isTrashed && <TrashBanner />}\n          {BeforeFields}\n          <RenderFields\n            className={`${baseClass}__fields`}\n            fields={mainFields}\n            forceRender\n            parentIndexPath=\"\"\n            parentPath=\"\"\n            parentSchemaPath={schemaPathSegments.join('.')}\n            permissions={docPermissions?.fields}\n            readOnly={readOnly}\n          />\n          {AfterFields}\n        </Gutter>\n      </div>\n      {hasSidebarFields ? (\n        <div className={`${baseClass}__sidebar-wrap`}>\n          <div className={`${baseClass}__sidebar`}>\n            <div className={`${baseClass}__sidebar-fields`}>\n              <RenderFields\n                fields={sidebarFields}\n                forceRender\n                parentIndexPath=\"\"\n                parentPath=\"\"\n                parentSchemaPath={schemaPathSegments.join('.')}\n                permissions={docPermissions?.fields}\n                readOnly={readOnly}\n              />\n            </div>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,IAASC,OAAO,QAAQ;AAE/B,SAASC,YAAY,QAAQ;AAC7B,SAASC,MAAM,QAAQ;AACvB,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAmBlB,OAAO,MAAMC,cAAA,GAAiCA,CAAC;EAC7CC,WAAW;EACXC,YAAY;EACZC,cAAA,GAAiB,KAAK;EACtBC,cAAc;EACdC,MAAM;EACNC,gBAAgB;EAChBC,SAAA,GAAY,KAAK;EACjBC,QAAQ;EACRC;AAAkB,CACnB;EACC,MAAM;IAAEC,gBAAgB;IAAEC,UAAU;IAAEC;EAAa,CAAE,GAAGjB,OAAA,CAAQ;IAC9D,IAAIQ,cAAA,EAAgB;MAClB,OAAO;QACLO,gBAAA,EAAkB;QAClBC,UAAA,EAAYN,MAAA;QACZO,aAAA,EAAe;MACjB;IACF;IAEA,OAAOP,MAAA,CAAOQ,MAAM,CAClB,CAACC,GAAA,EAAKC,KAAA;MACJ,IAAItB,cAAA,CAAesB,KAAA,GAAQ;QACzBD,GAAA,CAAIF,aAAa,CAACI,IAAI,CAACD,KAAA;QACvBD,GAAA,CAAIH,UAAU,CAACK,IAAI,CAAC;QACpBF,GAAA,CAAIJ,gBAAgB,GAAG;MACzB,OAAO;QACLI,GAAA,CAAIH,UAAU,CAACK,IAAI,CAACD,KAAA;QACpBD,GAAA,CAAIF,aAAa,CAACI,IAAI,CAAC;MACzB;MACA,OAAOF,GAAA;IACT,GACA;MACEJ,gBAAA,EAAkB;MAClBC,UAAA,EAAY,EAAE;MACdC,aAAA,EAAe;IACjB;EAEJ,GAAG,CAACT,cAAA,EAAgBE,MAAA,CAAO;EAE3B,oBACEY,KAAA,CAAC;IACCC,SAAA,EAAW,CACTnB,SAAA,EACAW,gBAAA,GAAmB,GAAGX,SAAA,eAAwB,GAAG,GAAGA,SAAA,cAAuB,EAC3EO,gBAAA,IAAoB,GAAGP,SAAA,sBAA+B,CACvD,CACEoB,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;4BAERC,IAAA,CAAC;MAAIJ,SAAA,EAAW,GAAGnB,SAAA,QAAiB;gBAClC,aAAAkB,KAAA,CAACpB,MAAA;QAAOqB,SAAA,EAAW,GAAGnB,SAAA,QAAiB;mBACpCQ,SAAA,iBAAae,IAAA,CAACxB,WAAA,OACdI,YAAA,E,aACDoB,IAAA,CAAC1B,YAAA;UACCsB,SAAA,EAAW,GAAGnB,SAAA,UAAmB;UACjCM,MAAA,EAAQM,UAAA;UACRY,WAAW;UACXC,eAAA,EAAgB;UAChBC,UAAA,EAAW;UACXC,gBAAA,EAAkBjB,kBAAA,CAAmBY,IAAI,CAAC;UAC1CM,WAAA,EAAavB,cAAA,EAAgBC,MAAA;UAC7BG,QAAA,EAAUA;YAEXP,WAAA;;QAGJS,gBAAA,gBACCY,IAAA,CAAC;MAAIJ,SAAA,EAAW,GAAGnB,SAAA,gBAAyB;gBAC1C,aAAAuB,IAAA,CAAC;QAAIJ,SAAA,EAAW,GAAGnB,SAAA,WAAoB;kBACrC,aAAAuB,IAAA,CAAC;UAAIJ,SAAA,EAAW,GAAGnB,SAAA,kBAA2B;oBAC5C,aAAAuB,IAAA,CAAC1B,YAAA;YACCS,MAAA,EAAQO,aAAA;YACRW,WAAW;YACXC,eAAA,EAAgB;YAChBC,UAAA,EAAW;YACXC,gBAAA,EAAkBjB,kBAAA,CAAmBY,IAAI,CAAC;YAC1CM,WAAA,EAAavB,cAAA,EAAgBC,MAAA;YAC7BG,QAAA,EAAUA;;;;SAKhB;;AAGV","ignoreList":[]}

package/dist/elements/DocumentHeader/DocumentHeaderRoot/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+/**
+ * Client wrapper for the document header that publishes its rendered height as the
+ * `--doc-header-height` CSS variable, mirroring how `AppHeader` and `DocumentControls`
+ * expose their own heights for layout calculations.
+ *
+ * @internal
+ */
+export declare const DocumentHeaderRoot: React.FC<{
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/DocumentHeader/DocumentHeaderRoot/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/DocumentHeader/DocumentHeaderRoot/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiB,MAAM,OAAO,CAAA;AAMrC;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAUtE,CAAA"}

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

@@ -0,0 +1,28 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useRef } from 'react';
+import { useElementHeightVariable } from '../../../hooks/useElementHeightVariable.js';
+const baseClass = 'doc-header';
+/**
+ * Client wrapper for the document header that publishes its rendered height as the
+ * `--doc-header-height` CSS variable, mirroring how `AppHeader` and `DocumentControls`
+ * expose their own heights for layout calculations.
+ *
+ * @internal
+ */
+export const DocumentHeaderRoot = ({
+  children
+}) => {
+  const ref = useRef(null);
+  useElementHeightVariable({
+    cssVar: '--doc-header-height',
+    ref
+  });
+  return /*#__PURE__*/_jsx("div", {
+    className: baseClass,
+    ref: ref,
+    children: children
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useRef","useElementHeightVariable","baseClass","DocumentHeaderRoot","children","ref","cssVar","_jsx","className"],"sources":["../../../../src/elements/DocumentHeader/DocumentHeaderRoot/index.tsx"],"sourcesContent":["'use client'\nimport React, { useRef } from 'react'\n\nimport { useElementHeightVariable } from '../../../hooks/useElementHeightVariable.js'\n\nconst baseClass = 'doc-header'\n\n/**\n * Client wrapper for the document header that publishes its rendered height as the\n * `--doc-header-height` CSS variable, mirroring how `AppHeader` and `DocumentControls`\n * expose their own heights for layout calculations.\n *\n * @internal\n */\nexport const DocumentHeaderRoot: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useElementHeightVariable({ cssVar: '--doc-header-height', ref })\n\n  return (\n    <div className={baseClass} ref={ref}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,MAAM,QAAQ;AAE9B,SAASC,wBAAwB,QAAQ;AAEzC,MAAMC,SAAA,GAAY;AAElB;;;;;;;AAOA,OAAO,MAAMC,kBAAA,GAA8DA,CAAC;EAAEC;AAAQ,CAAE;EACtF,MAAMC,GAAA,GAAML,MAAA,CAAuB;EAEnCC,wBAAA,CAAyB;IAAEK,MAAA,EAAQ;IAAuBD;EAAI;EAE9D,oBACEE,IAAA,CAAC;IAAIC,SAAA,EAAWN,SAAA;IAAWG,GAAA,EAAKA,GAAA;cAC7BD;;AAGP","ignoreList":[]}

package/dist/elements/DocumentHeader/Tabs/ShouldRenderTabs.d.ts

@@ -0,0 +1,5 @@
+import type React from 'react';
+export declare const ShouldRenderTabs: React.FC<{
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=ShouldRenderTabs.d.ts.map

package/dist/elements/DocumentHeader/Tabs/ShouldRenderTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShouldRenderTabs.d.ts","sourceRoot":"","sources":["../../../../src/elements/DocumentHeader/Tabs/ShouldRenderTabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAWA,CAAA"}

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

@@ -0,0 +1,19 @@
+'use client';
+
+import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
+export const ShouldRenderTabs = t0 => {
+  const {
+    children
+  } = t0;
+  const {
+    id: idFromContext,
+    collectionSlug,
+    globalSlug
+  } = useDocumentInfo();
+  const id = idFromContext !== "create" ? idFromContext : null;
+  if (collectionSlug && id || globalSlug) {
+    return children;
+  }
+  return null;
+};
+//# sourceMappingURL=ShouldRenderTabs.js.map

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

@@ -0,0 +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 '../../../providers/DocumentInfo/index.js'\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":[]}

package/dist/elements/DocumentHeader/Tabs/Tab/TabLink.d.ts

@@ -0,0 +1,12 @@
+import type { SanitizedConfig } from 'payload';
+import React from 'react';
+export declare const DocumentTabLink: React.FC<{
+    adminRoute: SanitizedConfig['routes']['admin'];
+    ariaLabel?: string;
+    baseClass: string;
+    children?: React.ReactNode;
+    href: string;
+    isActive?: boolean;
+    newTab?: boolean;
+}>;
+//# sourceMappingURL=TabLink.d.ts.map

package/dist/elements/DocumentHeader/Tabs/Tab/TabLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabLink.d.ts","sourceRoot":"","sources":["../../../../../src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG9C,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,UAAU,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAwDA,CAAA"}

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

@@ -0,0 +1,81 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { formatAdminURL } from 'payload/shared';
+import React from 'react';
+import { useParams, usePathname, useSearchParams } from '../../../../providers/RouterAdapter/index.js';
+import { Button } from '../../../Button/index.js';
+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
+    });
+    $[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}`;
+      }
+    }
+  }
+  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 isActive = href === docPath && pathname === docPath || href !== docPath && pathname.startsWith(href) || isActiveFromProps;
+    t3 = _jsx(Button, {
+      "aria-label": ariaLabel,
+      buttonStyle: isActive ? "pill" : "ghost",
+      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;
+};
+//# sourceMappingURL=TabLink.js.map