@payloadcms/ui 4.0.0-internal.5b1e7cd → 4.0.0-internal.c2b57ce

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useCallback","Gutter","useModal","RenderTitle","useFormModified","XIcon","useDocumentInfo","useDocumentTitle","useTranslation","IDLabel","LeaveWithoutSavingModal","documentDrawerBaseClass","leaveWithoutSavingModalSlug","DocumentDrawerHeader","t0","$","AfterHeader","drawerSlug","showDocumentID","t1","undefined","closeModal","openModal","t","isModified","t2","handleOnClose","t3","t4","_jsxs","className","children","_jsx","element","onClick","type","DocumentID","modalSlug","onConfirm","id","title","toString"],"sources":["../../../../src/elements/DocumentDrawer/DrawerHeader/index.tsx"],"sourcesContent":["'use client'\n\nimport { useCallback } from 'react'\n\nimport { Gutter } from '../../../elements/Gutter/index.js'\nimport { useModal } from '../../../elements/Modal/index.js'\nimport { RenderTitle } from '../../../elements/RenderTitle/index.js'\nimport { useFormModified } from '../../../forms/Form/index.js'\nimport { XIcon } from '../../../icons/X/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useDocumentTitle } from '../../../providers/DocumentTitle/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { IDLabel } from '../../IDLabel/index.js'\nimport { LeaveWithoutSavingModal } from '../../LeaveWithoutSaving/index.js'\nimport { documentDrawerBaseClass } from '../index.js'\nimport './index.scss'\n\nconst leaveWithoutSavingModalSlug = 'leave-without-saving-doc-drawer'\n\nexport const DocumentDrawerHeader: React.FC<{\n  AfterHeader?: React.ReactNode\n  drawerSlug: string\n  showDocumentID?: boolean\n}> = ({ AfterHeader, drawerSlug, showDocumentID = true }) => {\n  const { closeModal, openModal } = useModal()\n  const { t } = useTranslation()\n  const isModified = useFormModified()\n\n  const handleOnClose = useCallback(() => {\n    if (isModified) {\n      openModal(leaveWithoutSavingModalSlug)\n    } else {\n      closeModal(drawerSlug)\n    }\n  }, [isModified, openModal, closeModal, drawerSlug])\n\n  return (\n    <Gutter className={`${documentDrawerBaseClass}__header`}>\n      <div className={`${documentDrawerBaseClass}__header-content`}>\n        <h2 className={`${documentDrawerBaseClass}__header-text`}>\n          {<RenderTitle element=\"span\" />}\n        </h2>\n        <button\n          aria-label={t('general:close')}\n          className={`${documentDrawerBaseClass}__header-close`}\n          onClick={handleOnClose}\n          type=\"button\"\n        >\n          <XIcon />\n        </button>\n      </div>\n      {showDocumentID && <DocumentID />}\n      {AfterHeader ? (\n        <div className={`${documentDrawerBaseClass}__after-header`}>{AfterHeader}</div>\n      ) : null}\n\n      <LeaveWithoutSavingModal\n        modalSlug={leaveWithoutSavingModalSlug}\n        onConfirm={() => closeModal(drawerSlug)}\n      />\n    </Gutter>\n  )\n}\n\nconst DocumentID: React.FC = () => {\n  const { id } = useDocumentInfo()\n  const { title } = useDocumentTitle()\n  return id && id !== title ? <IDLabel id={id.toString()} /> : null\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useCallback","useModal","RenderTitle","useFormModified","ChevronIcon","useDocumentInfo","useDocumentTitle","useTranslation","Button","IDLabel","LeaveWithoutSavingModal","documentDrawerBaseClass","leaveWithoutSavingModalSlug","DocumentDrawerHeader","t0","$","AfterHeader","drawerSlug","showDocumentID","t1","undefined","closeModal","openModal","t","isModified","t2","handleOnClose","t3","t4","_jsxs","className","children","_jsx","buttonStyle","icon","direction","size","element","DocumentID","modalSlug","onConfirm","id","title","toString"],"sources":["../../../../src/elements/DocumentDrawer/DrawerHeader/index.tsx"],"sourcesContent":["'use client'\n\nimport { useCallback } from 'react'\n\nimport { useModal } from '../../../elements/Modal/index.js'\nimport { RenderTitle } from '../../../elements/RenderTitle/index.js'\nimport { useFormModified } from '../../../forms/Form/index.js'\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useDocumentTitle } from '../../../providers/DocumentTitle/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { IDLabel } from '../../IDLabel/index.js'\nimport { LeaveWithoutSavingModal } from '../../LeaveWithoutSaving/index.js'\nimport { documentDrawerBaseClass } from '../index.js'\nimport './index.css'\n\nconst leaveWithoutSavingModalSlug = 'leave-without-saving-doc-drawer'\n\nexport const DocumentDrawerHeader: React.FC<{\n  AfterHeader?: React.ReactNode\n  drawerSlug: string\n  showDocumentID?: boolean\n}> = ({ AfterHeader, drawerSlug, showDocumentID = true }) => {\n  const { closeModal, openModal } = useModal()\n  const { t } = useTranslation()\n  const isModified = useFormModified()\n\n  const handleOnClose = useCallback(() => {\n    if (isModified) {\n      openModal(leaveWithoutSavingModalSlug)\n    } else {\n      closeModal(drawerSlug)\n    }\n  }, [isModified, openModal, closeModal, drawerSlug])\n\n  return (\n    <div className={`${documentDrawerBaseClass}__header`}>\n      <div className={`${documentDrawerBaseClass}__header-content`}>\n        <Button\n          aria-label={t('general:close')}\n          buttonStyle=\"ghost\"\n          className={`${documentDrawerBaseClass}__header-close`}\n          icon={<ChevronIcon direction=\"left\" size={24} />}\n          onClick={handleOnClose}\n        />\n        <h2 className={`${documentDrawerBaseClass}__header-text`}>\n          {<RenderTitle element=\"span\" />}\n        </h2>\n      </div>\n      {showDocumentID && <DocumentID />}\n      {AfterHeader ? (\n        <div className={`${documentDrawerBaseClass}__after-header`}>{AfterHeader}</div>\n      ) : null}\n\n      <LeaveWithoutSavingModal\n        modalSlug={leaveWithoutSavingModalSlug}\n        onConfirm={() => closeModal(drawerSlug)}\n      />\n    </div>\n  )\n}\n\nconst DocumentID: React.FC = () => {\n  const { id } = useDocumentInfo()\n  const { title } = useDocumentTitle()\n  return id && id !== title ? <IDLabel id={id.toString()} /> : null\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import type { DocumentDrawerProps, DocumentTogglerProps, UseDocumentDrawer } from './types.js';
-import './index.scss';
 export declare const documentDrawerBaseClass = "doc-drawer";
 export declare const DocumentDrawerToggler: React.FC<DocumentTogglerProps>;
 export declare const DocumentDrawer: React.FC<DocumentDrawerProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2D,MAAM,OAAO,CAAA;AAE/E,OAAO,KAAK,EACV,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EAElB,MAAM,YAAY,CAAA;AAOnB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,uBAAuB,eAAe,CAAA;AAcnD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2BhE,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAQxD,CAAA;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,iBAAiB,EAAE,iBAsE/B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAElE,OAAO,KAAK,EACV,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EAElB,MAAM,YAAY,CAAA;AAQnB,eAAO,MAAM,uBAAuB,eAAe,CAAA;AAcnD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6BhE,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAQxD,CAAA;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,iBAAiB,EAAE,iBA+E/B,CAAA"}

package/dist/elements/DocumentDrawer/index.js

@@ -4,13 +4,12 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { useModal } from '@faceless-ui/modal';
-import React, { useCallback, useEffect, useId, useMemo, useState } from 'react';
+import React, { useCallback, useId, useMemo, useRef } from 'react';
 import { useRelatedCollections } from '../../hooks/useRelatedCollections.js';
 import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Drawer, DrawerToggler } from '../Drawer/index.js';
 import { DocumentDrawerContent } from './DrawerContent.js';
-import './index.scss';
 export const documentDrawerBaseClass = 'doc-drawer';
 const formatDocumentDrawerSlug = ({
   id,
@@ -21,6 +20,7 @@ const formatDocumentDrawerSlug = ({
 export const DocumentDrawerToggler = t0 => {
   const $ = _c(2);
   const {
+    buttonStyle,
     children,
     className,
     collectionSlug,
@@ -47,6 +47,7 @@ export const DocumentDrawerToggler = t0 => {
   }
   return _jsx(DrawerToggler, {
     "aria-label": t1,
+    buttonStyle,
     className: t2.join(" "),
     disabled,
     onClick,
@@ -61,7 +62,6 @@ export const DocumentDrawer = props => {
   } = props;
   return /*#__PURE__*/_jsx(Drawer, {
     className: documentDrawerBaseClass,
-    gutter: false,
     Header: null,
     slug: drawerSlug,
     children: /*#__PURE__*/_jsx(DocumentDrawerContent, {
@@ -88,157 +88,70 @@ export const DocumentDrawer = props => {
  *    <DocumentDrawer collectionSlug="posts" id={postId} />
  *  </div>
  */
-export const useDocumentDrawer = t0 => {
-  const $ = _c(38);
-  const {
-    id,
-    collectionSlug,
-    overrideEntityVisibility
-  } = t0;
+export const useDocumentDrawer = ({
+  id,
+  collectionSlug,
+  drawerSlug: drawerSlugFromProps,
+  overrideEntityVisibility
+}) => {
   const editDepth = useEditDepth();
   const uuid = useId();
   const {
     closeModal,
-    modalState,
     openModal,
     toggleModal
   } = useModal();
-  const [isOpen, setIsOpen] = useState(false);
-  let t1;
-  if ($[0] !== collectionSlug || $[1] !== editDepth || $[2] !== id || $[3] !== uuid) {
-    t1 = formatDocumentDrawerSlug({
-      id,
-      collectionSlug,
-      depth: editDepth,
-      uuid
-    });
-    $[0] = collectionSlug;
-    $[1] = editDepth;
-    $[2] = id;
-    $[3] = uuid;
-    $[4] = t1;
-  } else {
-    t1 = $[4];
-  }
-  const drawerSlug = t1;
-  let t2;
-  let t3;
-  if ($[5] !== drawerSlug || $[6] !== modalState) {
-    t2 = () => {
-      setIsOpen(Boolean(modalState[drawerSlug]?.isOpen));
-    };
-    t3 = [modalState, drawerSlug];
-    $[5] = drawerSlug;
-    $[6] = modalState;
-    $[7] = t2;
-    $[8] = t3;
-  } else {
-    t2 = $[7];
-    t3 = $[8];
-  }
-  useEffect(t2, t3);
-  let t4;
-  if ($[9] !== drawerSlug || $[10] !== toggleModal) {
-    t4 = () => {
-      toggleModal(drawerSlug);
-    };
-    $[9] = drawerSlug;
-    $[10] = toggleModal;
-    $[11] = t4;
-  } else {
-    t4 = $[11];
-  }
-  const toggleDrawer = t4;
-  let t5;
-  if ($[12] !== closeModal || $[13] !== drawerSlug) {
-    t5 = () => {
-      closeModal(drawerSlug);
-    };
-    $[12] = closeModal;
-    $[13] = drawerSlug;
-    $[14] = t5;
-  } else {
-    t5 = $[14];
-  }
-  const closeDrawer = t5;
-  let t6;
-  if ($[15] !== drawerSlug || $[16] !== openModal) {
-    t6 = () => {
-      openModal(drawerSlug);
-    };
-    $[15] = drawerSlug;
-    $[16] = openModal;
-    $[17] = t6;
-  } else {
-    t6 = $[17];
-  }
-  const openDrawer = t6;
-  let t7;
-  if ($[18] !== collectionSlug || $[19] !== drawerSlug || $[20] !== id || $[21] !== overrideEntityVisibility) {
-    t7 = props => _createElement(DocumentDrawer, {
+  // Use provided slug or generate one
+  const drawerSlug = drawerSlugFromProps || formatDocumentDrawerSlug({
+    id,
+    collectionSlug,
+    depth: editDepth,
+    uuid
+  });
+  // Store modal functions in refs to ensure stable callbacks
+  // This prevents re-renders when other modals change state
+  const closeModalRef = useRef(closeModal);
+  const openModalRef = useRef(openModal);
+  const toggleModalRef = useRef(toggleModal);
+  closeModalRef.current = closeModal;
+  openModalRef.current = openModal;
+  toggleModalRef.current = toggleModal;
+  const toggleDrawer = useCallback(() => {
+    toggleModalRef.current(drawerSlug);
+  }, [drawerSlug]);
+  const closeDrawer = useCallback(() => {
+    closeModalRef.current(drawerSlug);
+  }, [drawerSlug]);
+  const openDrawer = useCallback(() => {
+    openModalRef.current(drawerSlug);
+  }, [drawerSlug]);
+  const MemoizedDrawer = useMemo(() => {
+    return props => /*#__PURE__*/_createElement(DocumentDrawer, {
       ...props,
-      collectionSlug,
-      drawerSlug,
-      id,
+      collectionSlug: collectionSlug,
+      drawerSlug: drawerSlug,
+      id: id,
       key: drawerSlug,
-      overrideEntityVisibility
+      overrideEntityVisibility: overrideEntityVisibility
     });
-    $[18] = collectionSlug;
-    $[19] = drawerSlug;
-    $[20] = id;
-    $[21] = overrideEntityVisibility;
-    $[22] = t7;
-  } else {
-    t7 = $[22];
-  }
-  const MemoizedDrawer = t7;
-  let t8;
-  if ($[23] !== collectionSlug || $[24] !== drawerSlug || $[25] !== id) {
-    t8 = props_0 => _jsx(DocumentDrawerToggler, {
+  }, [id, drawerSlug, collectionSlug, overrideEntityVisibility]);
+  const MemoizedDrawerToggler = useMemo(() => {
+    return props_0 => /*#__PURE__*/_jsx(DocumentDrawerToggler, {
       ...props_0,
-      collectionSlug,
-      drawerSlug,
-      operation: !id ? "create" : "update"
+      collectionSlug: collectionSlug,
+      drawerSlug: drawerSlug,
+      operation: !id ? 'create' : 'update'
     });
-    $[23] = collectionSlug;
-    $[24] = drawerSlug;
-    $[25] = id;
-    $[26] = t8;
-  } else {
-    t8 = $[26];
-  }
-  const MemoizedDrawerToggler = t8;
-  let t9;
-  if ($[27] !== closeDrawer || $[28] !== drawerSlug || $[29] !== editDepth || $[30] !== isOpen || $[31] !== openDrawer || $[32] !== toggleDrawer) {
-    t9 = {
-      closeDrawer,
-      drawerDepth: editDepth,
-      drawerSlug,
-      isDrawerOpen: isOpen,
-      openDrawer,
-      toggleDrawer
-    };
-    $[27] = closeDrawer;
-    $[28] = drawerSlug;
-    $[29] = editDepth;
-    $[30] = isOpen;
-    $[31] = openDrawer;
-    $[32] = toggleDrawer;
-    $[33] = t9;
-  } else {
-    t9 = $[33];
-  }
-  const MemoizedDrawerState = t9;
-  let t10;
-  if ($[34] !== MemoizedDrawer || $[35] !== MemoizedDrawerState || $[36] !== MemoizedDrawerToggler) {
-    t10 = [MemoizedDrawer, MemoizedDrawerToggler, MemoizedDrawerState];
-    $[34] = MemoizedDrawer;
-    $[35] = MemoizedDrawerState;
-    $[36] = MemoizedDrawerToggler;
-    $[37] = t10;
-  } else {
-    t10 = $[37];
-  }
-  return t10;
+  }, [id, drawerSlug, collectionSlug]);
+  const MemoizedDrawerState = useMemo(() => ({
+    closeDrawer,
+    drawerDepth: editDepth,
+    drawerSlug,
+    // Note: Not tracking isDrawerOpen to prevent re-renders when modals change state
+    isDrawerOpen: false,
+    openDrawer,
+    toggleDrawer
+  }), [editDepth, drawerSlug, toggleDrawer, closeDrawer, openDrawer]);
+  return [MemoizedDrawer, MemoizedDrawerToggler, MemoizedDrawerState];
 };
 //# sourceMappingURL=index.js.map

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\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  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","_createElement","key","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        {...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      // 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":"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","ignoreList":[]}

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

@@ -29,6 +29,7 @@ export type DocumentDrawerProps = {
     readonly redirectAfterRestore?: boolean;
 } & Pick<DocumentDrawerContextProps, 'onDelete' | 'onDuplicate' | 'onSave'> & Pick<DrawerProps, 'Header'>;
 export type DocumentTogglerProps = {
+    readonly buttonStyle?: 'dashed' | 'destructive' | 'ghost' | 'pill' | 'primary' | 'secondary';
     readonly children?: React.ReactNode;
     readonly className?: string;
     readonly collectionSlug: string;
@@ -45,7 +46,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":"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"}

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, 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 buttonStyle?: 'dashed' | 'destructive' | 'ghost' | 'pill' | 'primary' | 'secondary'\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: {\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":"AAsDA","ignoreList":[]}

package/dist/elements/DocumentFields/index.css

@@ -0,0 +1,197 @@
+@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);
+  }
+
+  .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-right: var(--main-field-margin);
+  }
+
+  /* Extend group border to the main/sidebar divider */
+  .document-fields--has-sidebar .document-fields__fields > .group-field::before {
+    right: calc(var(--gutter-h) * -1);
+  }
+
+  .document-fields__main {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    flex-grow: 1;
+  }
+
+  .document-fields__edit {
+    padding-top: var(--spacer-5);
+    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(100vh - 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;
+  }
+
+  .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-5);
+    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 {
+    display: block;
+    isolation: isolate;
+  }
+
+  .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%;
+    height: initial;
+    border-left: 0;
+  }
+
+  .document-fields--force-sidebar-wrap .document-fields__sidebar {
+    padding-bottom: calc(var(--spacer-5) * 2);
+    overflow: visible;
+  }
+
+  .document-fields--force-sidebar-wrap .document-fields__sidebar-fields {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  @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-right: calc(var(--gutter-h) * -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;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .document-fields__sidebar-wrap {
+      min-width: initial;
+      width: 100%;
+    }
+
+    .document-fields__edit {
+      padding-top: var(--spacer-2);
+    }
+  }
+
+  .drawer .document-fields__edit {
+    padding: var(--spacer-2-5);
+  }
+}

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

@@ -1,6 +1,6 @@
 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;

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,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"}

package/dist/elements/DocumentFields/index.js

@@ -6,7 +6,7 @@ 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,