@payloadcms/ui 4.0.0-internal.011fd46 → 4.0.0-internal.016994f

package/dist/elements/Hierarchy/{Drawer/useHierarchyDrawer.js → Modal/useHierarchyModal.js}

@@ -1,57 +1,56 @@
 'use client';
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
 import { useModal } from '@faceless-ui/modal';
-import React, { useCallback, useId, useMemo, useRef } from 'react';
+import React, { useCallback, useId, useMemo, useRef, useState } from 'react';
 export * from './types.js';
 import { useConfig } from '../../../providers/Config/index.js';
 import { useEditDepth } from '../../../providers/EditDepth/index.js';
 import { useHierarchy } from '../../../providers/Hierarchy/index.js';
-import { DrawerToggler } from '../../Drawer/index.js';
-import { baseClass, HierarchyDrawer } from './index.js';
-export const formatHierarchyDrawerSlug = ({
+import { DrawerToggler as ModalToggler } from '../../Drawer/index.js';
+import { baseClass, HierarchyModal } from './index.js';
+export const formatHierarchyModalSlug = ({
   depth,
   uuid
-}) => `hierarchy-drawer_${depth}_${uuid}`;
-export const HierarchyDrawerToggler = ({
+}) => `hierarchy-modal_${depth}_${uuid}`;
+export const HierarchyModalToggler = ({
   children,
   className,
   disabled,
-  drawerSlug,
+  modalSlug,
   onClick,
   ...rest
 }) => {
-  return /*#__PURE__*/_jsx(DrawerToggler, {
+  return /*#__PURE__*/_jsx(ModalToggler, {
     className: [className, `${baseClass}__toggler`].filter(Boolean).join(' '),
     disabled: disabled,
     onClick: onClick,
-    slug: drawerSlug,
+    slug: modalSlug,
     ...rest,
     children: children
   });
 };
 /**
- * Hook for using a hierarchy drawer for selecting hierarchy items.
+ * Hook for using a hierarchy modal for selecting hierarchy items.
  *
  * @example
  * ```tsx
- * const [HierarchyDrawer, HierarchyDrawerToggler, { closeDrawer, openDrawer }] = useHierarchyDrawer({
+ * const [HierarchyModal, HierarchyModalToggler, { closeModal, openModal }] = useHierarchyModal({
  *   collectionSlug: 'categories',
  * })
  *
  * return (
  *   <>
- *     <HierarchyDrawer
+ *     <HierarchyModal
  *       onSave={(selections) => console.log(selections)}
  *       hasMany={true}
  *     />
- *     <HierarchyDrawerToggler>Select Categories</HierarchyDrawerToggler>
+ *     <HierarchyModalToggler>Select Categories</HierarchyModalToggler>
  *   </>
  * )
  * ```
  */
-export const useHierarchyDrawer = ({
+export const useHierarchyModal = ({
   disabledIds,
   filterByCollection: filterByCollectionProp,
   hierarchyCollectionSlug,
@@ -81,15 +80,16 @@ export const useHierarchyDrawer = ({
     }
     return allowedCollections !== null ? allowedCollections.map(c => c.slug) : undefined;
   }, [filterByCollectionProp, allowedCollections]);
-  const drawerDepth = useEditDepth();
+  const modalDepth = useEditDepth();
   const uuid = useId();
   const {
     closeModal,
     openModal,
     toggleModal
   } = useModal();
-  const drawerSlug = formatHierarchyDrawerSlug({
-    depth: drawerDepth,
+  const [reopenCount, setReopenCount] = useState(0);
+  const modalSlug = formatHierarchyModalSlug({
+    depth: modalDepth,
     uuid
   });
   // Store modal functions in refs to ensure stable callbacks
@@ -101,48 +101,49 @@ export const useHierarchyDrawer = ({
   openModalRef.current = openModal;
   toggleModalRef.current = toggleModal;
   // Stable callbacks using refs - these will NEVER change
-  const toggleDrawer = useCallback(() => {
-    toggleModalRef.current(drawerSlug);
-  }, [drawerSlug]);
-  const closeDrawer = useCallback(() => {
-    closeModalRef.current(drawerSlug);
-  }, [drawerSlug]);
-  const openDrawer = useCallback(() => {
-    openModalRef.current(drawerSlug);
-  }, [drawerSlug]);
-  const MemoizedDrawer = useMemo(() => {
-    const DrawerComponent = props => /*#__PURE__*/_createElement(HierarchyDrawer, {
+  const toggleHierarchyModal = useCallback(() => {
+    toggleModalRef.current(modalSlug);
+  }, [modalSlug]);
+  const closeHierarchyModal = useCallback(() => {
+    closeModalRef.current(modalSlug);
+  }, [modalSlug]);
+  const openHierarchyModal = useCallback(() => {
+    setReopenCount(count => count + 1);
+    openModalRef.current(modalSlug);
+  }, [modalSlug]);
+  const MemoizedModal = useMemo(() => {
+    const ModalComponent = props => /*#__PURE__*/_jsx(HierarchyModal, {
       ...props,
       baseFilter: baseFilter,
-      closeDrawer: closeDrawer,
+      closeModal: closeHierarchyModal,
       disabledIds: disabledIds,
-      drawerSlug: drawerSlug,
       filterByCollection: filterByCollection,
       hierarchyCollectionSlug: hierarchyCollectionSlug,
       Icon: Icon,
-      key: drawerSlug,
+      modalSlug: modalSlug,
       parentFieldName: parentFieldName,
+      reopenCount: reopenCount,
       useAsTitle: useAsTitle
-    });
-    return DrawerComponent;
-  }, [baseFilter, drawerSlug, closeDrawer, disabledIds, filterByCollection, Icon, parentFieldName, hierarchyCollectionSlug, useAsTitle]);
-  const MemoizedDrawerToggler = useMemo(() => {
-    const TogglerComponent = props_0 => /*#__PURE__*/_jsx(HierarchyDrawerToggler, {
+    }, modalSlug);
+    return ModalComponent;
+  }, [baseFilter, closeHierarchyModal, disabledIds, filterByCollection, Icon, modalSlug, parentFieldName, reopenCount, hierarchyCollectionSlug, useAsTitle]);
+  const MemoizedModalToggler = useMemo(() => {
+    const TogglerComponent = props_0 => /*#__PURE__*/_jsx(HierarchyModalToggler, {
       ...props_0,
-      drawerSlug: drawerSlug
+      modalSlug: modalSlug
     });
     return TogglerComponent;
-  }, [drawerSlug]);
-  const MemoizedDrawerState = useMemo(() => ({
-    closeDrawer,
-    drawerDepth,
-    drawerSlug,
-    // Note: Not tracking isDrawerOpen to prevent re-renders when other modals change state
+  }, [modalSlug]);
+  const MemoizedModalState = useMemo(() => ({
+    closeModal: closeHierarchyModal,
+    modalDepth,
+    modalSlug,
+    // Note: Not tracking isModalOpen to prevent re-renders when other modals change state
     // Consumers needing this can use useModal() directly
-    isDrawerOpen: false,
-    openDrawer,
-    toggleDrawer
-  }), [drawerDepth, drawerSlug, toggleDrawer, closeDrawer, openDrawer]);
-  return [MemoizedDrawer, MemoizedDrawerToggler, MemoizedDrawerState];
+    isModalOpen: false,
+    openModal: openHierarchyModal,
+    toggleModal: toggleHierarchyModal
+  }), [closeHierarchyModal, modalDepth, modalSlug, openHierarchyModal, toggleHierarchyModal]);
+  return [MemoizedModal, MemoizedModalToggler, MemoizedModalState];
 };
-//# sourceMappingURL=useHierarchyDrawer.js.map
+//# sourceMappingURL=useHierarchyModal.js.map

package/dist/elements/Hierarchy/Modal/useHierarchyModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHierarchyModal.js","names":["useModal","React","useCallback","useId","useMemo","useRef","useState","useConfig","useEditDepth","useHierarchy","DrawerToggler","ModalToggler","baseClass","HierarchyModal","formatHierarchyModalSlug","depth","uuid","HierarchyModalToggler","children","className","disabled","modalSlug","onClick","rest","_jsx","filter","Boolean","join","slug","useHierarchyModal","disabledIds","filterByCollection","filterByCollectionProp","hierarchyCollectionSlug","Icon","getEntityConfig","allowedCollections","baseFilter","collectionConfig","collectionSlug","useAsTitle","admin","hierarchyConfig","hierarchy","undefined","parentFieldName","map","c","modalDepth","closeModal","openModal","toggleModal","reopenCount","setReopenCount","closeModalRef","openModalRef","toggleModalRef","current","toggleHierarchyModal","closeHierarchyModal","openHierarchyModal","count","MemoizedModal","ModalComponent","props","MemoizedModalToggler","TogglerComponent","MemoizedModalState","isModalOpen"],"sources":["../../../../src/elements/Hierarchy/Modal/useHierarchyModal.tsx"],"sourcesContent":["'use client'\nimport { useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useId, useMemo, useRef, useState } from 'react'\n\nimport type { HierarchyModalProps, HierarchyModalTogglerProps, UseHierarchyModal } from './types.js'\n\nexport * from './types.js'\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useEditDepth } from '../../../providers/EditDepth/index.js'\nimport { useHierarchy } from '../../../providers/Hierarchy/index.js'\nimport { DrawerToggler as ModalToggler } from '../../Drawer/index.js'\nimport { baseClass, HierarchyModal } from './index.js'\n\nexport const formatHierarchyModalSlug = ({\n  depth,\n  uuid,\n}: {\n  depth: number\n  uuid: string\n}): string => `hierarchy-modal_${depth}_${uuid}`\n\nexport const HierarchyModalToggler: React.FC<HierarchyModalTogglerProps> = ({\n  children,\n  className,\n  disabled,\n  modalSlug,\n  onClick,\n  ...rest\n}) => {\n  return (\n    <ModalToggler\n      className={[className, `${baseClass}__toggler`].filter(Boolean).join(' ')}\n      disabled={disabled}\n      onClick={onClick}\n      slug={modalSlug}\n      {...rest}\n    >\n      {children}\n    </ModalToggler>\n  )\n}\n\n/**\n * Hook for using a hierarchy modal for selecting hierarchy items.\n *\n * @example\n * ```tsx\n * const [HierarchyModal, HierarchyModalToggler, { closeModal, openModal }] = useHierarchyModal({\n *   collectionSlug: 'categories',\n * })\n *\n * return (\n *   <>\n *     <HierarchyModal\n *       onSave={(selections) => console.log(selections)}\n *       hasMany={true}\n *     />\n *     <HierarchyModalToggler>Select Categories</HierarchyModalToggler>\n *   </>\n * )\n * ```\n */\nexport const useHierarchyModal: UseHierarchyModal = ({\n  disabledIds,\n  filterByCollection: filterByCollectionProp,\n  hierarchyCollectionSlug,\n  Icon,\n}) => {\n  const { getEntityConfig } = useConfig()\n  const { allowedCollections, baseFilter } = useHierarchy()\n  const collectionConfig = getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n\n  const useAsTitle = collectionConfig?.admin?.useAsTitle\n  const hierarchyConfig =\n    collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object'\n      ? collectionConfig.hierarchy\n      : undefined\n  const parentFieldName = hierarchyConfig?.parentFieldName\n\n  // Use explicit prop if provided, otherwise fall back to allowedCollections from context\n  // - allowedCollections is null/undefined: no filtering (undefined)\n  // - allowedCollections is []: folder accepts everything, show only unrestricted destinations ([])\n  // - allowedCollections has values: show folders accepting those types\n  // Memoize to prevent new array references on every render\n  const filterByCollection = useMemo(() => {\n    if (filterByCollectionProp !== undefined) {\n      return filterByCollectionProp\n    }\n    return allowedCollections !== null ? allowedCollections.map((c) => c.slug) : undefined\n  }, [filterByCollectionProp, allowedCollections])\n\n  const modalDepth = useEditDepth()\n  const uuid = useId()\n  const { closeModal, openModal, toggleModal } = useModal()\n  const [reopenCount, setReopenCount] = useState(0)\n\n  const modalSlug = formatHierarchyModalSlug({\n    depth: modalDepth,\n    uuid,\n  })\n\n  // Store modal functions in refs to ensure stable callbacks\n  // This prevents re-renders when other modals (like DocumentDrawer) 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  // Stable callbacks using refs - these will NEVER change\n  const toggleHierarchyModal = useCallback(() => {\n    toggleModalRef.current(modalSlug)\n  }, [modalSlug])\n\n  const closeHierarchyModal = useCallback(() => {\n    closeModalRef.current(modalSlug)\n  }, [modalSlug])\n\n  const openHierarchyModal = useCallback(() => {\n    setReopenCount((count) => count + 1)\n    openModalRef.current(modalSlug)\n  }, [modalSlug])\n\n  const MemoizedModal = useMemo(() => {\n    const ModalComponent: React.FC<HierarchyModalProps> = (props) => (\n      <HierarchyModal\n        key={modalSlug}\n        {...props}\n        baseFilter={baseFilter}\n        closeModal={closeHierarchyModal}\n        disabledIds={disabledIds}\n        filterByCollection={filterByCollection}\n        hierarchyCollectionSlug={hierarchyCollectionSlug}\n        Icon={Icon}\n        modalSlug={modalSlug}\n        parentFieldName={parentFieldName}\n        reopenCount={reopenCount}\n        useAsTitle={useAsTitle}\n      />\n    )\n\n    return ModalComponent\n  }, [\n    baseFilter,\n    closeHierarchyModal,\n    disabledIds,\n    filterByCollection,\n    Icon,\n    modalSlug,\n    parentFieldName,\n    reopenCount,\n    hierarchyCollectionSlug,\n    useAsTitle,\n  ])\n\n  const MemoizedModalToggler = useMemo(() => {\n    const TogglerComponent: React.FC<Omit<HierarchyModalTogglerProps, 'modalSlug'>> = (props) => (\n      <HierarchyModalToggler {...props} modalSlug={modalSlug} />\n    )\n\n    return TogglerComponent\n  }, [modalSlug])\n\n  const MemoizedModalState = useMemo(\n    () => ({\n      closeModal: closeHierarchyModal,\n      modalDepth,\n      modalSlug,\n      // Note: Not tracking isModalOpen to prevent re-renders when other modals change state\n      // Consumers needing this can use useModal() directly\n      isModalOpen: false,\n      openModal: openHierarchyModal,\n      toggleModal: toggleHierarchyModal,\n    }),\n    [closeHierarchyModal, modalDepth, modalSlug, openHierarchyModal, toggleHierarchyModal],\n  )\n\n  return [MemoizedModal, MemoizedModalToggler, MemoizedModalState]\n}\n"],"mappings":"AAAA;;;AACA,SAASA,QAAQ,QAAQ;AACzB,OAAOC,KAAA,IAASC,WAAW,EAAEC,KAAK,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAIrE,cAAc;AAEd,SAASC,SAAS,QAAQ;AAC1B,SAASC,YAAY,QAAQ;AAC7B,SAASC,YAAY,QAAQ;AAC7B,SAASC,aAAA,IAAiBC,YAAY,QAAQ;AAC9C,SAASC,SAAS,EAAEC,cAAc,QAAQ;AAE1C,OAAO,MAAMC,wBAAA,GAA2BA,CAAC;EACvCC,KAAK;EACLC;AAAI,CAIL,KAAa,mBAAmBD,KAAA,IAASC,IAAA,EAAM;AAEhD,OAAO,MAAMC,qBAAA,GAA8DA,CAAC;EAC1EC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACP,GAAGC;AAAA,CACJ;EACC,oBACEC,IAAA,CAACb,YAAA;IACCQ,SAAA,EAAW,CAACA,SAAA,EAAW,GAAGP,SAAA,WAAoB,CAAC,CAACa,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;IACrEP,QAAA,EAAUA,QAAA;IACVE,OAAA,EAASA,OAAA;IACTM,IAAA,EAAMP,SAAA;IACL,GAAGE,IAAI;cAEPL;;AAGP;AAEA;;;;;;;;;;;;;;;;;;;;AAoBA,OAAO,MAAMW,iBAAA,GAAuCA,CAAC;EACnDC,WAAW;EACXC,kBAAA,EAAoBC,sBAAsB;EAC1CC,uBAAuB;EACvBC;AAAI,CACL;EACC,MAAM;IAAEC;EAAe,CAAE,GAAG5B,SAAA;EAC5B,MAAM;IAAE6B,kBAAkB;IAAEC;EAAU,CAAE,GAAG5B,YAAA;EAC3C,MAAM6B,gBAAA,GAAmBH,eAAA,CAAgB;IAAEI,cAAA,EAAgBN;EAAwB;EAEnF,MAAMO,UAAA,GAAaF,gBAAA,EAAkBG,KAAA,EAAOD,UAAA;EAC5C,MAAME,eAAA,GACJJ,gBAAA,EAAkBK,SAAA,IAAa,OAAOL,gBAAA,CAAiBK,SAAS,KAAK,WACjEL,gBAAA,CAAiBK,SAAS,GAC1BC,SAAA;EACN,MAAMC,eAAA,GAAkBH,eAAA,EAAiBG,eAAA;EAEzC;EACA;EACA;EACA;EACA;EACA,MAAMd,kBAAA,GAAqB3B,OAAA,CAAQ;IACjC,IAAI4B,sBAAA,KAA2BY,SAAA,EAAW;MACxC,OAAOZ,sBAAA;IACT;IACA,OAAOI,kBAAA,KAAuB,OAAOA,kBAAA,CAAmBU,GAAG,CAAEC,CAAA,IAAMA,CAAA,CAAEnB,IAAI,IAAIgB,SAAA;EAC/E,GAAG,CAACZ,sBAAA,EAAwBI,kBAAA,CAAmB;EAE/C,MAAMY,UAAA,GAAaxC,YAAA;EACnB,MAAMQ,IAAA,GAAOb,KAAA;EACb,MAAM;IAAE8C,UAAU;IAAEC,SAAS;IAAEC;EAAW,CAAE,GAAGnD,QAAA;EAC/C,MAAM,CAACoD,WAAA,EAAaC,cAAA,CAAe,GAAG/C,QAAA,CAAS;EAE/C,MAAMe,SAAA,GAAYP,wBAAA,CAAyB;IACzCC,KAAA,EAAOiC,UAAA;IACPhC;EACF;EAEA;EACA;EACA,MAAMsC,aAAA,GAAgBjD,MAAA,CAAO4C,UAAA;EAC7B,MAAMM,YAAA,GAAelD,MAAA,CAAO6C,SAAA;EAC5B,MAAMM,cAAA,GAAiBnD,MAAA,CAAO8C,WAAA;EAC9BG,aAAA,CAAcG,OAAO,GAAGR,UAAA;EACxBM,YAAA,CAAaE,OAAO,GAAGP,SAAA;EACvBM,cAAA,CAAeC,OAAO,GAAGN,WAAA;EAEzB;EACA,MAAMO,oBAAA,GAAuBxD,WAAA,CAAY;IACvCsD,cAAA,CAAeC,OAAO,CAACpC,SAAA;EACzB,GAAG,CAACA,SAAA,CAAU;EAEd,MAAMsC,mBAAA,GAAsBzD,WAAA,CAAY;IACtCoD,aAAA,CAAcG,OAAO,CAACpC,SAAA;EACxB,GAAG,CAACA,SAAA,CAAU;EAEd,MAAMuC,kBAAA,GAAqB1D,WAAA,CAAY;IACrCmD,cAAA,CAAgBQ,KAAA,IAAUA,KAAA,GAAQ;IAClCN,YAAA,CAAaE,OAAO,CAACpC,SAAA;EACvB,GAAG,CAACA,SAAA,CAAU;EAEd,MAAMyC,aAAA,GAAgB1D,OAAA,CAAQ;IAC5B,MAAM2D,cAAA,GAAiDC,KAAA,iBACrDxC,IAAA,CAACX,cAAA;MAEE,GAAGmD,KAAK;MACT3B,UAAA,EAAYA,UAAA;MACZY,UAAA,EAAYU,mBAAA;MACZ7B,WAAA,EAAaA,WAAA;MACbC,kBAAA,EAAoBA,kBAAA;MACpBE,uBAAA,EAAyBA,uBAAA;MACzBC,IAAA,EAAMA,IAAA;MACNb,SAAA,EAAWA,SAAA;MACXwB,eAAA,EAAiBA,eAAA;MACjBO,WAAA,EAAaA,WAAA;MACbZ,UAAA,EAAYA;OAXPnB,SAAA;IAeT,OAAO0C,cAAA;EACT,GAAG,CACD1B,UAAA,EACAsB,mBAAA,EACA7B,WAAA,EACAC,kBAAA,EACAG,IAAA,EACAb,SAAA,EACAwB,eAAA,EACAO,WAAA,EACAnB,uBAAA,EACAO,UAAA,CACD;EAED,MAAMyB,oBAAA,GAAuB7D,OAAA,CAAQ;IACnC,MAAM8D,gBAAA,GAA6EF,OAAA,iBACjFxC,IAAA,CAACP,qBAAA;MAAuB,GAAG+C,OAAK;MAAE3C,SAAA,EAAWA;;IAG/C,OAAO6C,gBAAA;EACT,GAAG,CAAC7C,SAAA,CAAU;EAEd,MAAM8C,kBAAA,GAAqB/D,OAAA,CACzB,OAAO;IACL6C,UAAA,EAAYU,mBAAA;IACZX,UAAA;IACA3B,SAAA;IACA;IACA;IACA+C,WAAA,EAAa;IACblB,SAAA,EAAWU,kBAAA;IACXT,WAAA,EAAaO;EACf,IACA,CAACC,mBAAA,EAAqBX,UAAA,EAAY3B,SAAA,EAAWuC,kBAAA,EAAoBF,oBAAA,CAAqB;EAGxF,OAAO,CAACI,aAAA,EAAeG,oBAAA,EAAsBE,kBAAA,CAAmB;AAClE","ignoreList":[]}

package/dist/elements/Hierarchy/MoveMany/index.css

@@ -0,0 +1,6 @@
+@layer payload-default {
+  /* Dividers span the full menu width rather than sitting inside the list's inline padding. */
+  .move-many__popup-content .popup-divider {
+    margin-inline: calc(var(--spacer-2) * -1);
+  }
+}

package/dist/elements/Hierarchy/MoveMany/index.d.ts

@@ -1,21 +1,26 @@
 import React from 'react';
+import './index.css';
 export declare const baseClass = "move-many";
 type MoveManyProps = {
-    /** Current parent ID - drawer will open expanded to this location */
+    /** Current parent ID - modal will open expanded to this location */
     currentParentID?: null | number | string;
     /** The hierarchy collection slug (e.g., 'folders') */
     hierarchySlug: string;
-    /** Icon to display in the hierarchy drawer */
+    /** Icon to display in the hierarchy modal */
     Icon?: React.ReactNode;
-    /** When multiple MoveMany components are rendered on the page, this will differentiate them */
-    modalPrefix?: string;
     /** Callback after successful move */
     onSuccess?: () => void;
+    /**
+     * Collection slugs the destination folder must accept (via its `allowedCollections` config).
+     * Pass the selected items' own collection slugs, plus any `allowedCollections` of selected
+     * folders, so the picker only shows folders that can hold every selected item.
+     */
+    requiredCollections?: string[];
     /** Selections grouped by collection slug */
     selections: Record<string, {
         ids: (number | string)[];
     }>;
 };
-export declare function MoveMany({ currentParentID, hierarchySlug, Icon, modalPrefix, onSuccess, selections, }: MoveManyProps): React.JSX.Element;
+export declare function MoveMany({ currentParentID, hierarchySlug, Icon, onSuccess, requiredCollections, selections, }: MoveManyProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Hierarchy/MoveMany/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/MoveMany/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAe7D,eAAO,MAAM,SAAS,cAAc,CAAA;AAEpC,KAAK,aAAa,GAAG;IACnB,qEAAqE;IACrE,eAAe,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IACxC,sDAAsD;IACtD,aAAa,EAAE,MAAM,CAAA;IACrB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,+FAA+F;IAC/F,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;KAAE,CAAC,CAAA;CACzD,CAAA;AAeD,wBAAgB,QAAQ,CAAC,EACvB,eAAe,EACf,aAAa,EACb,IAAI,EACJ,WAAW,EACX,SAAS,EACT,UAAU,GACX,EAAE,aAAa,qBA4Qf"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/MoveMany/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAanD,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,SAAS,cAAc,CAAA;AAEpC,KAAK,aAAa,GAAG;IACnB,oEAAoE;IACpE,eAAe,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IACxC,sDAAsD;IACtD,aAAa,EAAE,MAAM,CAAA;IACrB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC9B,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;KAAE,CAAC,CAAA;CACzD,CAAA;AAeD,wBAAgB,QAAQ,CAAC,EACvB,eAAe,EACf,aAAa,EACb,IAAI,EACJ,SAAS,EACT,mBAAmB,EACnB,UAAU,GACX,EAAE,aAAa,qBAuLf"}

package/dist/elements/Hierarchy/MoveMany/index.js

@@ -1,21 +1,18 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useModal } from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
-import { formatAdminURL } from 'payload/shared';
-import * as qs from 'qs-esm';
-import React, { useCallback, useMemo, useState } from 'react';
-import { toast } from 'sonner';
+import React, { useCallback, useMemo } from 'react';
+import { ArrowIcon } from '../../../icons/Arrow/index.js';
+import { XIcon } from '../../../icons/X/index.js';
 import { useConfig } from '../../../providers/Config/index.js';
-import { useDocumentSelection } from '../../../providers/DocumentSelection/index.js';
 import { useLocale } from '../../../providers/Locale/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
-import { requests } from '../../../utilities/api.js';
-import { ConfirmationModal } from '../../ConfirmationModal/index.js';
 import { ListSelectionButton } from '../../ListSelection/index.js';
-import { Translation } from '../../Translation/index.js';
-import { useHierarchyDrawer } from '../Drawer/useHierarchyDrawer.js';
+import { Popup, PopupList } from '../../Popup/index.js';
+import { useHierarchyModal } from '../Modal/useHierarchyModal.js';
+import { moveDocuments } from '../move/moveDocuments.js';
+import './index.css';
 export const baseClass = 'move-many';
 /**
  * Gets the parent field name from the hierarchy config.
@@ -28,8 +25,8 @@ export function MoveMany({
   currentParentID,
   hierarchySlug,
   Icon,
-  modalPrefix,
   onSuccess,
+  requiredCollections,
   selections
 }) {
   const {
@@ -39,9 +36,6 @@ export function MoveMany({
   const {
     code: locale
   } = useLocale();
-  const {
-    openModal
-  } = useModal();
   const {
     config: {
       collections,
@@ -50,47 +44,15 @@ export function MoveMany({
       }
     }
   } = useConfig();
-  const {
-    getSelectionsWithMetadata
-  } = useDocumentSelection();
-  const [destination, setDestination] = useState(null);
-  const confirmMoveDrawerSlug = `${modalPrefix ? `${modalPrefix}-` : ''}confirm-move-many`;
-  // Compute required collections from selection metadata
-  // For related items: add their collection slug
-  // For folders: add their allowedCollections values
-  const requiredCollections = useMemo(() => {
-    const selectionsWithMeta = getSelectionsWithMetadata();
-    const required = new Set();
-    for (const [collectionSlug, {
-      selections: items
-    }] of Object.entries(selectionsWithMeta)) {
-      if (collectionSlug === hierarchySlug) {
-        // For folders, add their allowedCollections to required set
-        for (const {
-          metadata
-        } of items) {
-          if (metadata.allowedCollections) {
-            for (const slug of metadata.allowedCollections) {
-              required.add(slug);
-            }
-          }
-        }
-      } else {
-        // For related items, add their collection slug
-        required.add(collectionSlug);
-      }
-    }
-    return required.size > 0 ? Array.from(required) : undefined;
-  }, [getSelectionsWithMetadata, hierarchySlug]);
   // Folders being moved cannot be selected as destination (can't move into themselves)
   const disabledIds = useMemo(() => {
     const parentIds = selections[hierarchySlug]?.ids;
     return parentIds?.length ? new Set(parentIds) : undefined;
   }, [selections, hierarchySlug]);
-  const [HierarchyDrawer,, {
-    closeDrawer,
-    openDrawer
-  }] = useHierarchyDrawer({
+  const [HierarchyModal,, {
+    closeModal,
+    openModal: openHierarchyModal
+  }] = useHierarchyModal({
     disabledIds,
     filterByCollection: requiredCollections,
     hierarchyCollectionSlug: hierarchySlug,
@@ -99,14 +61,15 @@ export function MoveMany({
   // Calculate total count and label
   const {
     count,
-    label
+    label,
+    modalTitleLabel
   } = useMemo(() => {
     let totalCount = 0;
     const labels = [];
-    for (const [collectionSlug_0, {
+    for (const [collectionSlug, {
       ids
     }] of Object.entries(selections)) {
-      const config = collections.find(c => c.slug === collectionSlug_0);
+      const config = collections.find(c => c.slug === collectionSlug);
       if (config && ids.length > 0) {
         totalCount += ids.length;
         const collectionLabel = getTranslation(ids.length > 1 ? config.labels.plural : config.labels.singular, i18n);
@@ -115,13 +78,37 @@ export function MoveMany({
     }
     return {
       count: totalCount,
-      label: labels.join(', ')
+      label: labels.join(', '),
+      // Mixed selections read better as "Move 3 Documents" than "Move 3 Posts, Pages"
+      modalTitleLabel: labels.length === 1 ? labels[0] : t(totalCount === 1 ? 'general:document' : 'general:documents')
     };
-  }, [selections, collections, i18n]);
+  }, [selections, collections, i18n, t]);
   const hierarchyCollectionConfig = collections.find(c_0 => c_0.slug === hierarchySlug);
   const parentFieldName = getParentFieldName(hierarchyCollectionConfig);
+  // e.g. "Folder" / "Tag" - the hierarchy collection the selected documents are filed under.
+  const hierarchyLabel = getTranslation(hierarchyCollectionConfig?.labels?.singular, i18n);
   // Check if hierarchy has a valid parentFieldName
   const canMove = parentFieldName !== undefined;
+  // Performs the move immediately - there is no separate confirmation step, so the browse
+  // modal is closed as soon as a destination is chosen rather than staying open behind one.
+  const performMove = useCallback(async destination => {
+    const {
+      hasErrors,
+      totalMoved
+    } = await moveDocuments({
+      apiRoute: api,
+      destination,
+      i18n,
+      label,
+      locale,
+      parentFieldName,
+      selections,
+      t
+    });
+    if (!hasErrors || totalMoved > 0) {
+      onSuccess?.();
+    }
+  }, [selections, parentFieldName, locale, api, i18n, t, label, onSuccess]);
   const handleDrawerSave = useCallback(({
     selections: selectionsMap
   }) => {
@@ -129,148 +116,93 @@ export function MoveMany({
       return;
     }
     const firstSelection = selectionsMap.values().next().value;
-    const destinationId = firstSelection?.id;
+    const destinationId = firstSelection?.id ?? null;
     const destinationTitle = firstSelection?.path?.[firstSelection.path.length - 1]?.title || String(destinationId);
-    setDestination({
+    closeModal();
+    void performMove({
       id: destinationId,
       title: destinationTitle
     });
-    openModal(confirmMoveDrawerSlug);
-  }, [openModal, confirmMoveDrawerSlug]);
+  }, [closeModal, performMove]);
   const handleMoveToRoot = useCallback(() => {
-    setDestination({
+    closeModal();
+    void performMove({
       id: null,
       title: t('hierarchy:noParent')
     });
-    openModal(confirmMoveDrawerSlug);
-  }, [openModal, confirmMoveDrawerSlug, t]);
-  const handleConfirmMove = useCallback(async () => {
-    if (destination === null) {
-      return;
-    }
-    let totalMoved = 0;
-    let hasErrors = false;
-    try {
-      for (const [collectionSlug_1, {
-        ids: ids_0
-      }] of Object.entries(selections)) {
-        if (ids_0.length === 0) {
-          continue;
-        }
-        const queryString = qs.stringify({
-          locale,
-          where: {
-            id: {
-              in: ids_0
-            }
-          }
-        }, {
-          addQueryPrefix: true
-        });
-        const url = formatAdminURL({
-          apiRoute: api,
-          path: `/${collectionSlug_1}${queryString}`
-        });
-        const response = await requests.patch(url, {
-          body: JSON.stringify({
-            [parentFieldName]: destination.id
-          }),
-          headers: {
-            'Accept-Language': i18n.language,
-            'Content-Type': 'application/json',
-            credentials: 'include'
-          }
-        });
-        const json = await response.json();
-        if (response.status >= 400) {
-          hasErrors = true;
-          if (json?.errors?.length > 0) {
-            toast.error(json.message || t('error:unknown'), {
-              description: json.errors.map(error => error.message).join('\n')
-            });
-          } else {
-            toast.error(json?.message || t('error:unknown'));
-          }
-          continue;
-        }
-        const movedCount = json?.docs?.length || 0;
-        totalMoved += movedCount;
-        if (json?.errors?.length > 0) {
-          hasErrors = true;
-          toast.error(json.message, {
-            description: json.errors.map(error_0 => error_0.message).join('\n')
-          });
-        }
-      }
-      if (totalMoved > 0) {
-        const successKey = destination.id === null ? 'hierarchy:itemsMovedToRoot' : 'hierarchy:itemsMovedTo';
-        toast.success(t(successKey, {
-          destination: destination.title,
-          title: label
-        }));
-      }
-      if (!hasErrors || totalMoved > 0) {
-        closeDrawer();
-        onSuccess?.();
-      }
-    } catch (_err) {
-      toast.error(t('error:unknown'));
-    } finally {
-      setDestination(null);
-    }
-  }, [closeDrawer, destination, selections, parentFieldName, locale, api, i18n, t, label, onSuccess]);
+  }, [closeModal, performMove, t]);
+  // Every document in a folder-scoped listing shares that folder, so a known parent is what makes
+  // "Remove from Folder" safe to offer for the whole selection.
+  const canRemoveFromFolder = currentParentID !== null && currentParentID !== undefined && canMove;
+  const handleRemoveFromFolder = useCallback(async () => {
+    await performMove({
+      id: null,
+      title: t('hierarchy:noParent')
+    });
+  }, [performMove, t]);
   if (count === 0 || !canMove) {
     return null;
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(ListSelectionButton, {
+    children: [canRemoveFromFolder ? /*#__PURE__*/_jsx(Popup, {
+      caret: false,
+      className: `${baseClass}__popup`,
+      horizontalAlign: "left",
+      portalClassName: `${baseClass}__popup-content`,
+      render: ({
+        close
+      }) => /*#__PURE__*/_jsxs(PopupList.MenuItem, {
+        children: [/*#__PURE__*/_jsx(PopupList.Button, {
+          icon: /*#__PURE__*/_jsx(ArrowIcon, {
+            direction: "right"
+          }),
+          onClick: () => {
+            close();
+            openHierarchyModal();
+          },
+          children: "Move to..."
+        }), /*#__PURE__*/_jsx(PopupList.Button, {
+          icon: /*#__PURE__*/_jsx(XIcon, {}),
+          onClick: () => {
+            close();
+            void handleRemoveFromFolder();
+          },
+          children: `Remove from ${hierarchyLabel}`
+        })]
+      }),
+      renderButton: ({
+        active,
+        onClick,
+        onKeyDown
+      }) => /*#__PURE__*/_jsx(ListSelectionButton, {
+        "aria-label": t('general:move'),
+        className: `${baseClass}__toggle`,
+        extraButtonProps: {
+          'aria-expanded': active,
+          'aria-haspopup': 'menu',
+          onKeyDown
+        },
+        onClick: onClick,
+        selected: active,
+        children: t('general:move')
+      }),
+      size: "fit-content",
+      verticalAlign: "bottom"
+    }) : /*#__PURE__*/_jsx(ListSelectionButton, {
       "aria-label": t('general:move'),
       className: `${baseClass}__toggle`,
-      onClick: openDrawer,
+      onClick: openHierarchyModal,
       children: t('general:move')
-    }), /*#__PURE__*/_jsx(HierarchyDrawer, {
+    }), /*#__PURE__*/_jsx(HierarchyModal, {
       hasMany: false,
       initialSelections: currentParentID ? [currentParentID] : null,
       onMoveToRoot: handleMoveToRoot,
       onSave: handleDrawerSave,
-      showMoveToRoot: true
-    }), /*#__PURE__*/_jsx(ConfirmationModal, {
-      body: /*#__PURE__*/_jsx("p", {
-        children: destination?.id === null ? /*#__PURE__*/_jsx(Translation, {
-          elements: {
-            '1': ({
-              children
-            }) => /*#__PURE__*/_jsx("strong", {
-              children: children
-            })
-          },
-          i18nKey: "hierarchy:moveItemsToRootConfirmation",
-          t: t,
-          variables: {
-            count,
-            label
-          }
-        }) : /*#__PURE__*/_jsx(Translation, {
-          elements: {
-            '1': ({
-              children: children_0
-            }) => /*#__PURE__*/_jsx("strong", {
-              children: children_0
-            })
-          },
-          i18nKey: "general:moveConfirm",
-          t: t,
-          variables: {
-            count,
-            destination: destination?.title || '',
-            label
-          }
-        })
-      }),
-      confirmingLabel: t('general:moving'),
-      heading: t('general:confirmMove'),
-      modalSlug: confirmMoveDrawerSlug,
-      onConfirm: handleConfirmMove
+      showMoveToRoot: true,
+      title: t('general:moveCount', {
+        count,
+        label: modalTitleLabel
+      })
     })]
   });
 }