@payloadcms/ui 3.91.0-internal.c1569dc → 4.0.0-beta.1

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useModal","React","useCallback","useEffect","useId","useMemo","useState","useRelatedCollections","useEditDepth","useTranslation","Drawer","DrawerToggler","DocumentDrawerContent","documentDrawerBaseClass","formatDocumentDrawerSlug","id","collectionSlug","depth","uuid","DocumentDrawerToggler","t0","$","children","className","disabled","drawerSlug","onClick","operation","rest","t","collectionConfig","t1","label","labels","singular","t2","filter","Boolean","_jsx","join","slug","DocumentDrawer","props","gutter","Header","useDocumentDrawer","overrideEntityVisibility","editDepth","closeModal","modalState","openModal","toggleModal","isOpen","setIsOpen","t3","t4","toggleDrawer","t5","closeDrawer","t6","openDrawer","t7","_createElement","key","MemoizedDrawer","t8","props_0","MemoizedDrawerToggler","t9","drawerDepth","isDrawerOpen","MemoizedDrawerState","t10"],"sources":["../../../src/elements/DocumentDrawer/index.tsx"],"sourcesContent":["'use client'\nimport { useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useEffect, useId, useMemo, useState } from 'react'\n\nimport type {\n  DocumentDrawerProps,\n  DocumentTogglerProps,\n  UseDocumentDrawer,\n  UseDocumentDrawerContext,\n} from './types.js'\n\nimport { useRelatedCollections } from '../../hooks/useRelatedCollections.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Drawer, DrawerToggler } from '../Drawer/index.js'\nimport { DocumentDrawerContent } from './DrawerContent.js'\nimport './index.scss'\n\nexport const documentDrawerBaseClass = 'doc-drawer'\n\nexport const formatDocumentDrawerSlug = ({\n  id,\n  collectionSlug,\n  depth,\n  uuid,\n}: {\n  collectionSlug: string\n  depth: number\n  id?: number | string\n  uuid: string\n}) => `doc-drawer_${collectionSlug}_${depth}${id ? `_${id}` : ''}_${uuid}`\n\nexport const DocumentDrawerToggler: React.FC<DocumentTogglerProps> = ({\n  children,\n  className,\n  collectionSlug,\n  disabled,\n  drawerSlug,\n  onClick,\n  operation,\n  ...rest\n}) => {\n  const { t } = useTranslation()\n  const [collectionConfig] = useRelatedCollections(collectionSlug)\n\n  return (\n    <DrawerToggler\n      aria-label={t(operation === 'create' ? 'fields:addNewLabel' : 'general:editLabel', {\n        label: collectionConfig?.labels.singular,\n      })}\n      className={[className, `${documentDrawerBaseClass}__toggler`].filter(Boolean).join(' ')}\n      disabled={disabled}\n      onClick={onClick}\n      slug={drawerSlug}\n      {...rest}\n    >\n      {children}\n    </DrawerToggler>\n  )\n}\n\nexport const DocumentDrawer: React.FC<DocumentDrawerProps> = (props) => {\n  const { drawerSlug } = props\n\n  return (\n    <Drawer className={documentDrawerBaseClass} gutter={false} Header={null} slug={drawerSlug}>\n      <DocumentDrawerContent {...props} />\n    </Drawer>\n  )\n}\n\n/**\n * A hook to manage documents from a drawer modal.\n * It provides the components and methods needed to open, close, and interact with the drawer.\n * @example\n * const [DocumentDrawer, DocumentDrawerToggler, { openDrawer, closeDrawer }] = useDocumentDrawer({\n *   collectionSlug: 'posts',\n *   id: postId, // optional, if not provided, it will render the \"create new\" view\n * })\n *\n * // ...\n *\n * return (\n *   <div>\n *     <DocumentDrawerToggler collectionSlug=\"posts\" id={postId}>\n *       Edit Post\n *    </DocumentDrawerToggler>\n *    <DocumentDrawer collectionSlug=\"posts\" id={postId} />\n *  </div>\n */\nexport const useDocumentDrawer: UseDocumentDrawer = ({\n  id,\n  collectionSlug,\n  overrideEntityVisibility,\n}) => {\n  const editDepth = useEditDepth()\n  const uuid = useId()\n  const { closeModal, modalState, openModal, toggleModal } = useModal()\n  const [isOpen, setIsOpen] = useState(false)\n\n  const drawerSlug = formatDocumentDrawerSlug({\n    id,\n    collectionSlug,\n    depth: editDepth,\n    uuid,\n  })\n\n  useEffect(() => {\n    setIsOpen(Boolean(modalState[drawerSlug]?.isOpen))\n  }, [modalState, drawerSlug])\n\n  const toggleDrawer = useCallback(() => {\n    toggleModal(drawerSlug)\n  }, [toggleModal, drawerSlug])\n\n  const closeDrawer = useCallback(() => {\n    closeModal(drawerSlug)\n  }, [closeModal, drawerSlug])\n\n  const openDrawer = useCallback(() => {\n    openModal(drawerSlug)\n  }, [openModal, drawerSlug])\n\n  const MemoizedDrawer = useMemo<React.FC<DocumentDrawerProps>>(() => {\n    return (props) => (\n      <DocumentDrawer\n        {...props}\n        collectionSlug={collectionSlug}\n        drawerSlug={drawerSlug}\n        id={id}\n        key={drawerSlug}\n        overrideEntityVisibility={overrideEntityVisibility}\n      />\n    )\n  }, [id, drawerSlug, collectionSlug, overrideEntityVisibility])\n\n  const MemoizedDrawerToggler = useMemo<React.FC<DocumentTogglerProps>>(() => {\n    return (props) => (\n      <DocumentDrawerToggler\n        {...props}\n        collectionSlug={collectionSlug}\n        drawerSlug={drawerSlug}\n        operation={!id ? 'create' : 'update'}\n      />\n    )\n  }, [id, drawerSlug, collectionSlug])\n\n  const MemoizedDrawerState = useMemo<UseDocumentDrawerContext>(\n    () => ({\n      closeDrawer,\n      drawerDepth: editDepth,\n      drawerSlug,\n      isDrawerOpen: isOpen,\n      openDrawer,\n      toggleDrawer,\n    }),\n    [editDepth, drawerSlug, isOpen, toggleDrawer, closeDrawer, openDrawer],\n  )\n\n  return [MemoizedDrawer, MemoizedDrawerToggler, MemoizedDrawerState]\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useModal","React","useCallback","useId","useMemo","useRef","useRelatedCollections","useEditDepth","useTranslation","Drawer","DrawerToggler","DocumentDrawerContent","documentDrawerBaseClass","formatDocumentDrawerSlug","id","collectionSlug","depth","uuid","DocumentDrawerToggler","t0","$","buttonStyle","children","className","disabled","drawerSlug","onClick","operation","rest","t","collectionConfig","t1","label","labels","singular","t2","filter","Boolean","_jsx","join","slug","DocumentDrawer","props","Header","useDocumentDrawer","drawerSlugFromProps","overrideEntityVisibility","editDepth","closeModal","openModal","toggleModal","closeModalRef","openModalRef","toggleModalRef","current","toggleDrawer","closeDrawer","openDrawer","MemoizedDrawer","MemoizedDrawerToggler","MemoizedDrawerState","drawerDepth","isDrawerOpen"],"sources":["../../../src/elements/DocumentDrawer/index.tsx"],"sourcesContent":["'use client'\nimport { useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useId, useMemo, useRef } from 'react'\n\nimport type {\n  DocumentDrawerProps,\n  DocumentTogglerProps,\n  UseDocumentDrawer,\n  UseDocumentDrawerContext,\n} from './types.js'\n\nimport { useRelatedCollections } from '../../hooks/useRelatedCollections.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Drawer, DrawerToggler } from '../Drawer/index.js'\nimport { DocumentDrawerContent } from './DrawerContent.js'\n\nexport const documentDrawerBaseClass = 'doc-drawer'\n\nconst formatDocumentDrawerSlug = ({\n  id,\n  collectionSlug,\n  depth,\n  uuid,\n}: {\n  collectionSlug: string\n  depth: number\n  id?: number | string\n  uuid: string\n}) => `doc-drawer_${collectionSlug}_${depth}${id ? `_${id}` : ''}_${uuid}`\n\nexport const DocumentDrawerToggler: React.FC<DocumentTogglerProps> = ({\n  buttonStyle,\n  children,\n  className,\n  collectionSlug,\n  disabled,\n  drawerSlug,\n  onClick,\n  operation,\n  ...rest\n}) => {\n  const { t } = useTranslation()\n  const [collectionConfig] = useRelatedCollections(collectionSlug)\n\n  return (\n    <DrawerToggler\n      aria-label={t(operation === 'create' ? 'fields:addNewLabel' : 'general:editLabel', {\n        label: collectionConfig?.labels.singular,\n      })}\n      buttonStyle={buttonStyle}\n      className={[className, `${documentDrawerBaseClass}__toggler`].filter(Boolean).join(' ')}\n      disabled={disabled}\n      onClick={onClick}\n      slug={drawerSlug}\n      {...rest}\n    >\n      {children}\n    </DrawerToggler>\n  )\n}\n\nexport const DocumentDrawer: React.FC<DocumentDrawerProps> = (props) => {\n  const { drawerSlug } = props\n\n  return (\n    <Drawer className={documentDrawerBaseClass} Header={null} slug={drawerSlug}>\n      <DocumentDrawerContent {...props} />\n    </Drawer>\n  )\n}\n\n/**\n * A hook to manage documents from a drawer modal.\n * It provides the components and methods needed to open, close, and interact with the drawer.\n * @example\n * const [DocumentDrawer, DocumentDrawerToggler, { openDrawer, closeDrawer }] = useDocumentDrawer({\n *   collectionSlug: 'posts',\n *   id: postId, // optional, if not provided, it will render the \"create new\" view\n * })\n *\n * // ...\n *\n * return (\n *   <div>\n *     <DocumentDrawerToggler collectionSlug=\"posts\" id={postId}>\n *       Edit Post\n *    </DocumentDrawerToggler>\n *    <DocumentDrawer collectionSlug=\"posts\" id={postId} />\n *  </div>\n */\nexport const useDocumentDrawer: UseDocumentDrawer = ({\n  id,\n  collectionSlug,\n  drawerSlug: drawerSlugFromProps,\n  overrideEntityVisibility,\n}) => {\n  const editDepth = useEditDepth()\n  const uuid = useId()\n  const { closeModal, openModal, toggleModal } = useModal()\n\n  // Use provided slug or generate one\n  const drawerSlug =\n    drawerSlugFromProps ||\n    formatDocumentDrawerSlug({\n      id,\n      collectionSlug,\n      depth: editDepth,\n      uuid,\n    })\n\n  // Store modal functions in refs to ensure stable callbacks\n  // This prevents re-renders when other modals change state\n  const closeModalRef = useRef(closeModal)\n  const openModalRef = useRef(openModal)\n  const toggleModalRef = useRef(toggleModal)\n  closeModalRef.current = closeModal\n  openModalRef.current = openModal\n  toggleModalRef.current = toggleModal\n\n  const toggleDrawer = useCallback(() => {\n    toggleModalRef.current(drawerSlug)\n  }, [drawerSlug])\n\n  const closeDrawer = useCallback(() => {\n    closeModalRef.current(drawerSlug)\n  }, [drawerSlug])\n\n  const openDrawer = useCallback(() => {\n    openModalRef.current(drawerSlug)\n  }, [drawerSlug])\n\n  const MemoizedDrawer = useMemo<React.FC<DocumentDrawerProps>>(() => {\n    return (props) => (\n      <DocumentDrawer\n        key={drawerSlug}\n        {...props}\n        collectionSlug={collectionSlug}\n        drawerSlug={drawerSlug}\n        id={id}\n        overrideEntityVisibility={overrideEntityVisibility}\n      />\n    )\n  }, [id, drawerSlug, collectionSlug, overrideEntityVisibility])\n\n  const MemoizedDrawerToggler = useMemo<React.FC<DocumentTogglerProps>>(() => {\n    return (props) => (\n      <DocumentDrawerToggler\n        {...props}\n        collectionSlug={collectionSlug}\n        drawerSlug={drawerSlug}\n        operation={!id ? 'create' : 'update'}\n      />\n    )\n  }, [id, drawerSlug, collectionSlug])\n\n  const MemoizedDrawerState = useMemo<UseDocumentDrawerContext>(\n    () => ({\n      closeDrawer,\n      drawerDepth: editDepth,\n      drawerSlug,\n      // Note: Not tracking isDrawerOpen to prevent re-renders when modals change state\n      isDrawerOpen: false,\n      openDrawer,\n      toggleDrawer,\n    }),\n    [editDepth, drawerSlug, toggleDrawer, closeDrawer, openDrawer],\n  )\n\n  return [MemoizedDrawer, MemoizedDrawerToggler, MemoizedDrawerState]\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,QAAQ,QAAQ;AACzB,OAAOC,KAAA,IAASC,WAAW,EAAEC,KAAK,EAAEC,OAAO,EAAEC,MAAM,QAAQ;AAS3D,SAASC,qBAAqB,QAAQ;AACtC,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,EAAEC,aAAa,QAAQ;AACtC,SAASC,qBAAqB,QAAQ;AAEtC,OAAO,MAAMC,uBAAA,GAA0B;AAEvC,MAAMC,wBAAA,GAA2BA,CAAC;EAChCC,EAAE;EACFC,cAAc;EACdC,KAAK;EACLC;AAAI,CAML,KAAK,cAAcF,cAAA,IAAkBC,KAAA,GAAQF,EAAA,GAAK,IAAIA,EAAA,EAAI,GAAG,MAAMG,IAAA,EAAM;AAE1E,OAAO,MAAMC,qBAAA,GAAwDC,EAAA;EAAA,MAAAC,CAAA,GAAArB,EAAA;EAAC;IAAAsB,WAAA;IAAAC,QAAA;IAAAC,SAAA;IAAAR,cAAA;IAAAS,QAAA;IAAAC,UAAA;IAAAC,OAAA;IAAAC,SAAA;IAAA,GAAAC;EAAA,IAAAT,EAUrE;EACC;IAAAU;EAAA,IAAcrB,cAAA;EACd,OAAAsB,gBAAA,IAA2BxB,qBAAA,CAAsBS,cAAA;EAIjC,MAAAgB,EAAA,GAAAF,CAAA,CAAEF,SAAA,KAAc,WAAW,uBAAuB;IAAAK,KAAA,EACrDF,gBAAA,EAAAG,MAAA,CAAAC;EAAA,CACT;EAAA,IAAAC,EAAA;EAAA,IAAAf,CAAA,QAAAG,SAAA;IAEWY,EAAA,IAACZ,SAAA,EAAW,GAAAX,uBAAA,WAAqC,EAAAwB,MAAA,CAAAC,OAAS;IAAAjB,CAAA,MAAAG,SAAA;IAAAH,CAAA,MAAAe,EAAA;EAAA;IAAAA,EAAA,GAAAf,CAAA;EAAA;EAAA,OALvEkB,IAAA,CAAA5B,aAAA;IAAA,cACcqB,EAEZ;IAAAV,WAAA;IAAAE,SAAA,EAEWY,EAA0D,CAAAI,IAAA,CAAc;IAAAf,QAAA;IAAAE,OAAA;IAAAc,IAAA,EAG7Ef,UAAA;IAAA,GACFG,IAAI;IAAAN;EAAA,C;CAKd;AAEA,OAAO,MAAMmB,cAAA,GAAiDC,KAAA;EAC5D,MAAM;IAAEjB;EAAU,CAAE,GAAGiB,KAAA;EAEvB,oBACEJ,IAAA,CAAC7B,MAAA;IAAOc,SAAA,EAAWX,uBAAA;IAAyB+B,MAAA,EAAQ;IAAMH,IAAA,EAAMf,UAAA;cAC9D,aAAAa,IAAA,CAAC3B,qBAAA;MAAuB,GAAG+B;;;AAGjC;AAEA;;;;;;;;;;;;;;;;;;;AAmBA,OAAO,MAAME,iBAAA,GAAuCA,CAAC;EACnD9B,EAAE;EACFC,cAAc;EACdU,UAAA,EAAYoB,mBAAmB;EAC/BC;AAAwB,CACzB;EACC,MAAMC,SAAA,GAAYxC,YAAA;EAClB,MAAMU,IAAA,GAAOd,KAAA;EACb,MAAM;IAAE6C,UAAU;IAAEC,SAAS;IAAEC;EAAW,CAAE,GAAGlD,QAAA;EAE/C;EACA,MAAMyB,UAAA,GACJoB,mBAAA,IACAhC,wBAAA,CAAyB;IACvBC,EAAA;IACAC,cAAA;IACAC,KAAA,EAAO+B,SAAA;IACP9B;EACF;EAEF;EACA;EACA,MAAMkC,aAAA,GAAgB9C,MAAA,CAAO2C,UAAA;EAC7B,MAAMI,YAAA,GAAe/C,MAAA,CAAO4C,SAAA;EAC5B,MAAMI,cAAA,GAAiBhD,MAAA,CAAO6C,WAAA;EAC9BC,aAAA,CAAcG,OAAO,GAAGN,UAAA;EACxBI,YAAA,CAAaE,OAAO,GAAGL,SAAA;EACvBI,cAAA,CAAeC,OAAO,GAAGJ,WAAA;EAEzB,MAAMK,YAAA,GAAerD,WAAA,CAAY;IAC/BmD,cAAA,CAAeC,OAAO,CAAC7B,UAAA;EACzB,GAAG,CAACA,UAAA,CAAW;EAEf,MAAM+B,WAAA,GAActD,WAAA,CAAY;IAC9BiD,aAAA,CAAcG,OAAO,CAAC7B,UAAA;EACxB,GAAG,CAACA,UAAA,CAAW;EAEf,MAAMgC,UAAA,GAAavD,WAAA,CAAY;IAC7BkD,YAAA,CAAaE,OAAO,CAAC7B,UAAA;EACvB,GAAG,CAACA,UAAA,CAAW;EAEf,MAAMiC,cAAA,GAAiBtD,OAAA,CAAuC;IAC5D,OAAQsC,KAAA,iBACNJ,IAAA,CAACG,cAAA;MAEE,GAAGC,KAAK;MACT3B,cAAA,EAAgBA,cAAA;MAChBU,UAAA,EAAYA,UAAA;MACZX,EAAA,EAAIA,EAAA;MACJgC,wBAAA,EAA0BA;OALrBrB,UAAA;EAQX,GAAG,CAACX,EAAA,EAAIW,UAAA,EAAYV,cAAA,EAAgB+B,wBAAA,CAAyB;EAE7D,MAAMa,qBAAA,GAAwBvD,OAAA,CAAwC;IACpE,OAAQsC,OAAA,iBACNJ,IAAA,CAACpB,qBAAA;MACE,GAAGwB,OAAK;MACT3B,cAAA,EAAgBA,cAAA;MAChBU,UAAA,EAAYA,UAAA;MACZE,SAAA,EAAW,CAACb,EAAA,GAAK,WAAW;;EAGlC,GAAG,CAACA,EAAA,EAAIW,UAAA,EAAYV,cAAA,CAAe;EAEnC,MAAM6C,mBAAA,GAAsBxD,OAAA,CAC1B,OAAO;IACLoD,WAAA;IACAK,WAAA,EAAad,SAAA;IACbtB,UAAA;IACA;IACAqC,YAAA,EAAc;IACdL,UAAA;IACAF;EACF,IACA,CAACR,SAAA,EAAWtB,UAAA,EAAY8B,YAAA,EAAcC,WAAA,EAAaC,UAAA,CAAW;EAGhE,OAAO,CAACC,cAAA,EAAgBC,qBAAA,EAAuBC,mBAAA,CAAoB;AACrE","ignoreList":[]}

package/dist/elements/DocumentDrawer/types.d.ts

@@ -1,4 +1,4 @@
-import type { Data, DefaultDocumentIDType, FormState, Operation } from 'payload';
+import type { Data, DefaultDocumentIDType, Operation } from 'payload';
 import type React from 'react';
 import type { HTMLAttributes } from 'react';
 import type { Props as DrawerProps } from '../Drawer/types.js';
@@ -18,10 +18,6 @@ export type DocumentDrawerProps = {
      */
     readonly id?: DefaultDocumentIDType | null;
     readonly initialData?: Data;
-    /**
-     * @deprecated
-     */
-    readonly initialState?: FormState;
     readonly overrideEntityVisibility?: boolean;
     readonly redirectAfterCreate?: boolean;
     readonly redirectAfterDelete?: boolean;
@@ -29,13 +25,16 @@ export type DocumentDrawerProps = {
     readonly redirectAfterRestore?: boolean;
 } & Pick<DocumentDrawerContextProps, 'onDelete' | 'onDuplicate' | 'onSave'> & Pick<DrawerProps, 'Header'>;
 export type DocumentTogglerProps = {
+    readonly buttonStyle?: 'dashed' | 'destructive' | 'ghost' | 'link' | 'pill' | 'primary' | 'secondary';
     readonly children?: React.ReactNode;
     readonly className?: string;
     readonly collectionSlug: string;
     readonly disabled?: boolean;
     readonly drawerSlug?: string;
+    readonly extraButtonProps?: Record<string, any>;
     readonly onClick?: () => void;
     readonly operation: Operation;
+    readonly tooltip?: string;
 } & Readonly<HTMLAttributes<HTMLButtonElement>>;
 export type UseDocumentDrawerContext = {
     closeDrawer: () => void;
@@ -45,7 +44,13 @@ export type UseDocumentDrawerContext = {
     openDrawer: () => void;
     toggleDrawer: () => void;
 };
-export type UseDocumentDrawer = (args: Pick<DocumentDrawerProps, 'collectionSlug' | 'id' | 'overrideEntityVisibility'>) => [
+export type UseDocumentDrawer = (args: {
+    /**
+     * Optional custom drawer slug. If provided, this will be used instead of auto-generating one.
+     * Useful for ensuring stable slugs in contexts where component remounting can cause issues.
+     */
+    drawerSlug?: string;
+} & Pick<DocumentDrawerProps, 'collectionSlug' | 'id' | 'overrideEntityVisibility'>) => [
     React.FC<{
         children?: React.ReactNode;
     } & Omit<DocumentDrawerProps, 'collectionSlug' | 'operation'>>,

package/dist/elements/DocumentDrawer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,qBAAqB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAChF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAC9D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AAE/D,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC;;OAEG;IACH,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAA;IAC1C,QAAQ,CAAC,WAAW,CAAC,EAAE,IAAI,CAAA;IAC3B;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAA;IACjC,QAAQ,CAAC,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAC3C,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,OAAO,CAAA;IACzC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAA;CACxC,GAAG,IAAI,CAAC,0BAA0B,EAAE,UAAU,GAAG,aAAa,GAAG,QAAQ,CAAC,GACzE,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAE7B,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAA;CAC9B,GAAG,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAE/C,MAAM,MAAM,wBAAwB,GAAG;IACrC,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;IACrB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,YAAY,EAAE,MAAM,IAAI,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,CAC9B,IAAI,EAAE,IAAI,CAAC,mBAAmB,EAAE,gBAAgB,GAAG,IAAI,GAAG,0BAA0B,CAAC,KAClF;IAEH,KAAK,CAAC,EAAE,CACN;QACE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;KAC3B,GAAG,IAAI,CAAC,mBAAmB,EAAE,gBAAgB,GAAG,WAAW,CAAC,CAC9D;IAED,KAAK,CAAC,EAAE,CACN;QACE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;KAC3B,GAAG,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,GAAG,WAAW,CAAC,CAC/D;IAED,wBAAwB;CACzB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACrE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAC9D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AAE/D,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC;;OAEG;IACH,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAA;IAC1C,QAAQ,CAAC,WAAW,CAAC,EAAE,IAAI,CAAA;IAC3B,QAAQ,CAAC,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAC3C,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,OAAO,CAAA;IACzC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAA;CACxC,GAAG,IAAI,CAAC,0BAA0B,EAAE,UAAU,GAAG,aAAa,GAAG,QAAQ,CAAC,GACzE,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAE7B,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,WAAW,CAAC,EACjB,QAAQ,GACR,aAAa,GACb,OAAO,GACP,MAAM,GACN,MAAM,GACN,SAAS,GACT,WAAW,CAAA;IACf,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC/C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAA;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAC1B,GAAG,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAE/C,MAAM,MAAM,wBAAwB,GAAG;IACrC,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;IACrB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,YAAY,EAAE,MAAM,IAAI,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,CAC9B,IAAI,EAAE;IACJ;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,GAAG,IAAI,CAAC,mBAAmB,EAAE,gBAAgB,GAAG,IAAI,GAAG,0BAA0B,CAAC,KAChF;IAEH,KAAK,CAAC,EAAE,CACN;QACE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;KAC3B,GAAG,IAAI,CAAC,mBAAmB,EAAE,gBAAgB,GAAG,WAAW,CAAC,CAC9D;IAED,KAAK,CAAC,EAAE,CACN;QACE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;KAC3B,GAAG,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,GAAG,WAAW,CAAC,CAC/D;IAED,wBAAwB;CACzB,CAAA"}

package/dist/elements/DocumentDrawer/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/DocumentDrawer/types.ts"],"sourcesContent":["import type { Data, DefaultDocumentIDType, FormState, Operation } from 'payload'\nimport type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nimport type { Props as DrawerProps } from '../Drawer/types.js'\nimport type { DocumentDrawerContextProps } from './Provider.js'\n\nexport type DocumentDrawerProps = {\n  readonly AfterFields?: React.ReactNode\n  /**\n   * The slug of the collection to which the document belongs.\n   */\n  readonly collectionSlug: string\n  readonly disableActions?: boolean\n  readonly drawerSlug?: string\n  /**\n   * The ID of the document to be edited.\n   * When provided, will be fetched and displayed in the drawer.\n   * If omitted, will render the \"create new\" view for the given collection.\n   */\n  readonly id?: DefaultDocumentIDType | null\n  readonly initialData?: Data\n  /**\n   * @deprecated\n   */\n  readonly initialState?: FormState\n  readonly overrideEntityVisibility?: boolean\n  readonly redirectAfterCreate?: boolean\n  readonly redirectAfterDelete?: boolean\n  readonly redirectAfterDuplicate?: boolean\n  readonly redirectAfterRestore?: boolean\n} & Pick<DocumentDrawerContextProps, 'onDelete' | 'onDuplicate' | 'onSave'> &\n  Pick<DrawerProps, 'Header'>\n\nexport type DocumentTogglerProps = {\n  readonly children?: React.ReactNode\n  readonly className?: string\n  readonly collectionSlug: string\n  readonly disabled?: boolean\n  readonly drawerSlug?: string\n  readonly onClick?: () => void\n  readonly operation: Operation\n} & Readonly<HTMLAttributes<HTMLButtonElement>>\n\nexport type UseDocumentDrawerContext = {\n  closeDrawer: () => void\n  drawerDepth: number\n  drawerSlug: string\n  isDrawerOpen: boolean\n  openDrawer: () => void\n  toggleDrawer: () => void\n}\n\nexport type UseDocumentDrawer = (\n  args: Pick<DocumentDrawerProps, 'collectionSlug' | 'id' | 'overrideEntityVisibility'>,\n) => [\n  // drawer\n  React.FC<\n    {\n      children?: React.ReactNode\n    } & Omit<DocumentDrawerProps, 'collectionSlug' | 'operation'>\n  >,\n  // toggler\n  React.FC<\n    {\n      children?: React.ReactNode\n    } & Omit<DocumentTogglerProps, 'collectionSlug' | 'operation'>\n  >,\n  // context\n  UseDocumentDrawerContext,\n]\n"],"mappings":"AAqDA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/DocumentDrawer/types.ts"],"sourcesContent":["import type { Data, DefaultDocumentIDType, Operation } from 'payload'\nimport type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nimport type { Props as DrawerProps } from '../Drawer/types.js'\nimport type { DocumentDrawerContextProps } from './Provider.js'\n\nexport type DocumentDrawerProps = {\n  readonly AfterFields?: React.ReactNode\n  /**\n   * The slug of the collection to which the document belongs.\n   */\n  readonly collectionSlug: string\n  readonly disableActions?: boolean\n  readonly drawerSlug?: string\n  /**\n   * The ID of the document to be edited.\n   * When provided, will be fetched and displayed in the drawer.\n   * If omitted, will render the \"create new\" view for the given collection.\n   */\n  readonly id?: DefaultDocumentIDType | null\n  readonly initialData?: Data\n  readonly overrideEntityVisibility?: boolean\n  readonly redirectAfterCreate?: boolean\n  readonly redirectAfterDelete?: boolean\n  readonly redirectAfterDuplicate?: boolean\n  readonly redirectAfterRestore?: boolean\n} & Pick<DocumentDrawerContextProps, 'onDelete' | 'onDuplicate' | 'onSave'> &\n  Pick<DrawerProps, 'Header'>\n\nexport type DocumentTogglerProps = {\n  readonly buttonStyle?:\n    | 'dashed'\n    | 'destructive'\n    | 'ghost'\n    | 'link'\n    | 'pill'\n    | 'primary'\n    | 'secondary'\n  readonly children?: React.ReactNode\n  readonly className?: string\n  readonly collectionSlug: string\n  readonly disabled?: boolean\n  readonly drawerSlug?: string\n  readonly extraButtonProps?: Record<string, any>\n  readonly onClick?: () => void\n  readonly operation: Operation\n  readonly tooltip?: string\n} & Readonly<HTMLAttributes<HTMLButtonElement>>\n\nexport type UseDocumentDrawerContext = {\n  closeDrawer: () => void\n  drawerDepth: number\n  drawerSlug: string\n  isDrawerOpen: boolean\n  openDrawer: () => void\n  toggleDrawer: () => void\n}\n\nexport type UseDocumentDrawer = (\n  args: {\n    /**\n     * Optional custom drawer slug. If provided, this will be used instead of auto-generating one.\n     * Useful for ensuring stable slugs in contexts where component remounting can cause issues.\n     */\n    drawerSlug?: string\n  } & Pick<DocumentDrawerProps, 'collectionSlug' | 'id' | 'overrideEntityVisibility'>,\n) => [\n  // drawer\n  React.FC<\n    {\n      children?: React.ReactNode\n    } & Omit<DocumentDrawerProps, 'collectionSlug' | 'operation'>\n  >,\n  // toggler\n  React.FC<\n    {\n      children?: React.ReactNode\n    } & Omit<DocumentTogglerProps, 'collectionSlug' | 'operation'>\n  >,\n  // context\n  UseDocumentDrawerContext,\n]\n"],"mappings":"AA2DA","ignoreList":[]}

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

@@ -0,0 +1,40 @@
+@layer payload-default {
+  .document-fields .document-fields__edit:has(> .required-fields-info) {
+    position: relative;
+  }
+
+  .required-fields-info {
+    position: absolute;
+    inset-block-start: var(--spacer-2);
+    inset-inline-end: var(--gutter-h);
+    width: fit-content;
+  }
+
+  .document-fields__edit:has(> .required-fields-info):dir(ltr)
+    > .document-fields__fields
+    > .field-type:first-child
+    .field-error.tooltip--caret-right {
+    translate: max(calc(-1 * var(--spacer-5)), calc(var(--spacer-1) - var(--tooltip-x))) 0;
+  }
+
+  .document-fields__edit:has(> .required-fields-info):dir(rtl)
+    > .document-fields__fields
+    > .field-type:first-child
+    .field-error.tooltip--caret-left {
+    translate: min(var(--spacer-5), calc(100vw - var(--tooltip-x) - 100% - var(--spacer-1))) 0;
+  }
+
+  .required-fields-info__content {
+    position: fixed;
+    inset: auto;
+    margin: var(--spacer-0);
+    padding: var(--spacer-2-5);
+    max-inline-size: min(calc(var(--spacer-6) * 8), calc(100vw - var(--spacer-4)));
+    color: var(--color-text);
+    background: var(--color-bg);
+    border: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--radius-medium);
+    box-shadow: var(--elevation-300-tooltip);
+    font: inherit;
+  }
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.css';
+export declare const RequiredFieldsInfo: () => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/DocumentFields/RequiredFieldsInfo/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAKvE,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,kBAAkB,yBA+E9B,CAAA"}

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":[]}