@payloadcms/ui 3.71.0-internal-debug.80dab4c → 3.71.0-internal.727c7a4

package/dist/elements/DocumentDrawer/index.js

@@ -1,5 +1,7 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+
+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';
@@ -10,48 +12,62 @@ import { Drawer, DrawerToggler } from '../Drawer/index.js';
 import { DocumentDrawerContent } from './DrawerContent.js';
 import './index.scss';
 export const documentDrawerBaseClass = 'doc-drawer';
-const formatDocumentDrawerSlug = ({ id, collectionSlug, depth, uuid })=>`doc-drawer_${collectionSlug}_${depth}${id ? `_${id}` : ''}_${uuid}`;
-export const DocumentDrawerToggler = ({ children, className, collectionSlug, disabled, drawerSlug, onClick, operation, ...rest })=>{
-    const { t } = useTranslation();
-    const [collectionConfig] = useRelatedCollections(collectionSlug);
-    return /*#__PURE__*/ _jsxDEV(DrawerToggler, {
-        "aria-label": t(operation === 'create' ? 'fields:addNewLabel' : 'general:editLabel', {
-            label: collectionConfig?.labels.singular
-        }),
-        className: [
-            className,
-            `${documentDrawerBaseClass}__toggler`
-        ].filter(Boolean).join(' '),
-        disabled: disabled,
-        onClick: onClick,
-        slug: drawerSlug,
-        ...rest,
-        children: children
-    }, void 0, false, {
-        fileName: "src/elements/DocumentDrawer/index.tsx",
-        lineNumber: 47,
-        columnNumber: 5
-    }, this);
+const formatDocumentDrawerSlug = ({
+  id,
+  collectionSlug,
+  depth,
+  uuid
+}) => `doc-drawer_${collectionSlug}_${depth}${id ? `_${id}` : ''}_${uuid}`;
+export const DocumentDrawerToggler = t0 => {
+  const $ = _c(2);
+  const {
+    children,
+    className,
+    collectionSlug,
+    disabled,
+    drawerSlug,
+    onClick,
+    operation,
+    ...rest
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  const [collectionConfig] = useRelatedCollections(collectionSlug);
+  const t1 = t(operation === "create" ? "fields:addNewLabel" : "general:editLabel", {
+    label: collectionConfig?.labels.singular
+  });
+  let t2;
+  if ($[0] !== className) {
+    t2 = [className, `${documentDrawerBaseClass}__toggler`].filter(Boolean);
+    $[0] = className;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  return _jsx(DrawerToggler, {
+    "aria-label": t1,
+    className: t2.join(" "),
+    disabled,
+    onClick,
+    slug: drawerSlug,
+    ...rest,
+    children
+  });
 };
-export const DocumentDrawer = (props)=>{
-    const { drawerSlug } = props;
-    return /*#__PURE__*/ _jsxDEV(Drawer, {
-        className: documentDrawerBaseClass,
-        gutter: false,
-        Header: null,
-        slug: drawerSlug,
-        children: /*#__PURE__*/ _jsxDEV(DocumentDrawerContent, {
-            ...props
-        }, void 0, false, {
-            fileName: "src/elements/DocumentDrawer/index.tsx",
-            lineNumber: 67,
-            columnNumber: 7
-        }, this)
-    }, void 0, false, {
-        fileName: "src/elements/DocumentDrawer/index.tsx",
-        lineNumber: 66,
-        columnNumber: 5
-    }, this);
+export const DocumentDrawer = props => {
+  const {
+    drawerSlug
+  } = props;
+  return /*#__PURE__*/_jsx(Drawer, {
+    className: documentDrawerBaseClass,
+    gutter: false,
+    Header: null,
+    slug: drawerSlug,
+    children: /*#__PURE__*/_jsx(DocumentDrawerContent, {
+      ...props
+    })
+  });
 };
 /**
  * A hook to manage documents from a drawer modal.
@@ -71,98 +87,158 @@ export const DocumentDrawer = (props)=>{
  *    </DocumentDrawerToggler>
  *    <DocumentDrawer collectionSlug="posts" id={postId} />
  *  </div>
- */ export const useDocumentDrawer = ({ id, collectionSlug, overrideEntityVisibility })=>{
-    const editDepth = useEditDepth();
-    const uuid = useId();
-    const { closeModal, modalState, openModal, toggleModal } = useModal();
-    const [isOpen, setIsOpen] = useState(false);
-    const drawerSlug = formatDocumentDrawerSlug({
-        id,
-        collectionSlug,
-        depth: editDepth,
-        uuid
+ */
+export const useDocumentDrawer = t0 => {
+  const $ = _c(38);
+  const {
+    id,
+    collectionSlug,
+    overrideEntityVisibility
+  } = t0;
+  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, {
+      ...props,
+      collectionSlug,
+      drawerSlug,
+      id,
+      key: drawerSlug,
+      overrideEntityVisibility
     });
-    useEffect(()=>{
-        setIsOpen(Boolean(modalState[drawerSlug]?.isOpen));
-    }, [
-        modalState,
-        drawerSlug
-    ]);
-    const toggleDrawer = useCallback(()=>{
-        toggleModal(drawerSlug);
-    }, [
-        toggleModal,
-        drawerSlug
-    ]);
-    const closeDrawer = useCallback(()=>{
-        closeModal(drawerSlug);
-    }, [
-        closeModal,
-        drawerSlug
-    ]);
-    const openDrawer = useCallback(()=>{
-        openModal(drawerSlug);
-    }, [
-        openModal,
-        drawerSlug
-    ]);
-    const MemoizedDrawer = useMemo(()=>{
-        return (props)=>/*#__PURE__*/ _createElement(DocumentDrawer, {
-                ...props,
-                collectionSlug: collectionSlug,
-                drawerSlug: drawerSlug,
-                id: id,
-                key: drawerSlug,
-                overrideEntityVisibility: overrideEntityVisibility,
-                __source: {
-                    fileName: "src/elements/DocumentDrawer/index.tsx",
-                    lineNumber: 126,
-                    columnNumber: 7
-                },
-                __self: this
-            });
-    }, [
-        id,
-        drawerSlug,
-        collectionSlug,
-        overrideEntityVisibility
-    ]);
-    const MemoizedDrawerToggler = useMemo(()=>{
-        return (props)=>/*#__PURE__*/ _jsxDEV(DocumentDrawerToggler, {
-                ...props,
-                collectionSlug: collectionSlug,
-                drawerSlug: drawerSlug,
-                operation: !id ? 'create' : 'update'
-            }, void 0, false, {
-                fileName: "src/elements/DocumentDrawer/index.tsx",
-                lineNumber: 139,
-                columnNumber: 7
-            }, this);
-    }, [
-        id,
-        drawerSlug,
-        collectionSlug
-    ]);
-    const MemoizedDrawerState = useMemo(()=>({
-            closeDrawer,
-            drawerDepth: editDepth,
-            drawerSlug,
-            isDrawerOpen: isOpen,
-            openDrawer,
-            toggleDrawer
-        }), [
-        editDepth,
-        drawerSlug,
-        isOpen,
-        toggleDrawer,
-        closeDrawer,
-        openDrawer
-    ]);
-    return [
-        MemoizedDrawer,
-        MemoizedDrawerToggler,
-        MemoizedDrawerState
-    ];
+    $[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, {
+      ...props_0,
+      collectionSlug,
+      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;
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"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"],"names":["useModal","React","useCallback","useEffect","useId","useMemo","useState","useRelatedCollections","useEditDepth","useTranslation","Drawer","DrawerToggler","DocumentDrawerContent","documentDrawerBaseClass","formatDocumentDrawerSlug","id","collectionSlug","depth","uuid","DocumentDrawerToggler","children","className","disabled","drawerSlug","onClick","operation","rest","t","collectionConfig","aria-label","label","labels","singular","filter","Boolean","join","slug","DocumentDrawer","props","gutter","Header","useDocumentDrawer","overrideEntityVisibility","editDepth","closeModal","modalState","openModal","toggleModal","isOpen","setIsOpen","toggleDrawer","closeDrawer","openDrawer","MemoizedDrawer","key","MemoizedDrawerToggler","MemoizedDrawerState","drawerDepth","isDrawerOpen"],"mappings":"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"}
+{"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":[]}

package/dist/elements/DocumentDrawer/types.js

@@ -1,13 +1,2 @@
-/**
-   * The slug of the collection to which the document belongs.
-   */ /**
-   * The ID of the document to be edited.
-   * When provided, will be fetched and displayed in the drawer.
-   * If omitted, will render the "create new" view for the given collection.
-   */ /**
-   * @deprecated
-   */ export { }; // drawer
- // toggler
- // context
-
+export {};
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"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"],"names":[],"mappings":"AASE;;GAEC,GAID;;;;GAIC,GAGD;;GAEC,GA6BH,WAiBC,CAdC,SAAS;CAMT,UAAU;CAMV,UAAU"}
+{"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":[]}

package/dist/elements/DocumentFields/index.js

@@ -1,5 +1,6 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { fieldIsSidebar } from 'payload/shared';
 import React, { useMemo } from 'react';
 import { RenderFields } from '../../forms/RenderFields/index.js';
@@ -7,110 +8,72 @@ import { Gutter } from '../Gutter/index.js';
 import { TrashBanner } from '../TrashBanner/index.js';
 import './index.scss';
 const baseClass = 'document-fields';
-export const DocumentFields = ({ AfterFields, BeforeFields, docPermissions, fields, forceSidebarWrap, isTrashed = false, readOnly, schemaPathSegments })=>{
-    const { hasSidebarFields, mainFields, sidebarFields } = useMemo(()=>{
-        return fields.reduce((acc, field)=>{
-            if (fieldIsSidebar(field)) {
-                acc.sidebarFields.push(field);
-                acc.mainFields.push(null);
-                acc.hasSidebarFields = true;
-            } else {
-                acc.mainFields.push(field);
-                acc.sidebarFields.push(null);
-            }
-            return acc;
-        }, {
-            hasSidebarFields: false,
-            mainFields: [],
-            sidebarFields: []
-        });
-    }, [
-        fields
-    ]);
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: [
-            baseClass,
-            hasSidebarFields ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,
-            forceSidebarWrap && `${baseClass}--force-sidebar-wrap`
-        ].filter(Boolean).join(' '),
-        children: [
-            /*#__PURE__*/ _jsxDEV("div", {
-                className: `${baseClass}__main`,
-                children: /*#__PURE__*/ _jsxDEV(Gutter, {
-                    className: `${baseClass}__edit`,
-                    children: [
-                        isTrashed && /*#__PURE__*/ _jsxDEV(TrashBanner, {}, void 0, false, {
-                            fileName: "src/elements/DocumentFields/index.tsx",
-                            lineNumber: 69,
-                            columnNumber: 25
-                        }, this),
-                        BeforeFields,
-                        /*#__PURE__*/ _jsxDEV(RenderFields, {
-                            className: `${baseClass}__fields`,
-                            fields: mainFields,
-                            forceRender: true,
-                            parentIndexPath: "",
-                            parentPath: "",
-                            parentSchemaPath: schemaPathSegments.join('.'),
-                            permissions: docPermissions?.fields,
-                            readOnly: readOnly
-                        }, void 0, false, {
-                            fileName: "src/elements/DocumentFields/index.tsx",
-                            lineNumber: 71,
-                            columnNumber: 11
-                        }, this),
-                        AfterFields
-                    ]
-                }, void 0, true, {
-                    fileName: "src/elements/DocumentFields/index.tsx",
-                    lineNumber: 68,
-                    columnNumber: 9
-                }, this)
-            }, void 0, false, {
-                fileName: "src/elements/DocumentFields/index.tsx",
-                lineNumber: 67,
-                columnNumber: 7
-            }, this),
-            hasSidebarFields ? /*#__PURE__*/ _jsxDEV("div", {
-                className: `${baseClass}__sidebar-wrap`,
-                children: /*#__PURE__*/ _jsxDEV("div", {
-                    className: `${baseClass}__sidebar`,
-                    children: /*#__PURE__*/ _jsxDEV("div", {
-                        className: `${baseClass}__sidebar-fields`,
-                        children: /*#__PURE__*/ _jsxDEV(RenderFields, {
-                            fields: sidebarFields,
-                            forceRender: true,
-                            parentIndexPath: "",
-                            parentPath: "",
-                            parentSchemaPath: schemaPathSegments.join('.'),
-                            permissions: docPermissions?.fields,
-                            readOnly: readOnly
-                        }, void 0, false, {
-                            fileName: "src/elements/DocumentFields/index.tsx",
-                            lineNumber: 88,
-                            columnNumber: 15
-                        }, this)
-                    }, void 0, false, {
-                        fileName: "src/elements/DocumentFields/index.tsx",
-                        lineNumber: 87,
-                        columnNumber: 13
-                    }, this)
-                }, void 0, false, {
-                    fileName: "src/elements/DocumentFields/index.tsx",
-                    lineNumber: 86,
-                    columnNumber: 11
-                }, this)
-            }, void 0, false, {
-                fileName: "src/elements/DocumentFields/index.tsx",
-                lineNumber: 85,
-                columnNumber: 9
-            }, this) : null
-        ]
-    }, void 0, true, {
-        fileName: "src/elements/DocumentFields/index.tsx",
-        lineNumber: 58,
-        columnNumber: 5
-    }, this);
+export const DocumentFields = ({
+  AfterFields,
+  BeforeFields,
+  docPermissions,
+  fields,
+  forceSidebarWrap,
+  isTrashed = false,
+  readOnly,
+  schemaPathSegments
+}) => {
+  const {
+    hasSidebarFields,
+    mainFields,
+    sidebarFields
+  } = useMemo(() => {
+    return fields.reduce((acc, field) => {
+      if (fieldIsSidebar(field)) {
+        acc.sidebarFields.push(field);
+        acc.mainFields.push(null);
+        acc.hasSidebarFields = true;
+      } else {
+        acc.mainFields.push(field);
+        acc.sidebarFields.push(null);
+      }
+      return acc;
+    }, {
+      hasSidebarFields: false,
+      mainFields: [],
+      sidebarFields: []
+    });
+  }, [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", {
+      className: `${baseClass}__main`,
+      children: /*#__PURE__*/_jsxs(Gutter, {
+        className: `${baseClass}__edit`,
+        children: [isTrashed && /*#__PURE__*/_jsx(TrashBanner, {}), BeforeFields, /*#__PURE__*/_jsx(RenderFields, {
+          className: `${baseClass}__fields`,
+          fields: mainFields,
+          forceRender: true,
+          parentIndexPath: "",
+          parentPath: "",
+          parentSchemaPath: schemaPathSegments.join('.'),
+          permissions: docPermissions?.fields,
+          readOnly: readOnly
+        }), AfterFields]
+      })
+    }), hasSidebarFields ? /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__sidebar-wrap`,
+      children: /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__sidebar`,
+        children: /*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__sidebar-fields`,
+          children: /*#__PURE__*/_jsx(RenderFields, {
+            fields: sidebarFields,
+            forceRender: true,
+            parentIndexPath: "",
+            parentPath: "",
+            parentSchemaPath: schemaPathSegments.join('.'),
+            permissions: docPermissions?.fields,
+            readOnly: readOnly
+          })
+        })
+      })
+    }) : null]
+  });
 };
-
 //# sourceMappingURL=index.js.map