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

package/dist/elements/Hierarchy/Modal/types.d.ts

@@ -0,0 +1,76 @@
+import type { Where } from 'payload';
+import type React from 'react';
+import type { HTMLAttributes } from 'react';
+export type SelectionWithPath = {
+    id: number | string;
+    path: Array<{
+        id: number | string;
+        title: string;
+    }>;
+};
+export type UseHierarchyModalArgs = {
+    /** IDs that should be disabled (e.g., items being moved can't be selected as destination) */
+    disabledIds?: Set<number | string>;
+    /**
+     * When provided, filters hierarchy items to only show those that accept these collections.
+     * Used with collectionSpecific hierarchy config.
+     */
+    filterByCollection?: string[];
+    hierarchyCollectionSlug: string;
+    Icon?: React.ReactNode;
+};
+export type HierarchyModalProps = {
+    readonly confirmLabel?: string;
+    readonly hasMany?: boolean;
+    readonly initialSelections?: (number | string)[];
+    /** Disables the confirm and move to root actions while a save is running */
+    readonly isBusy?: boolean;
+    readonly onMoveToRoot?: () => void;
+    readonly onSave: (params: {
+        closeModal: () => void;
+        selections: Map<number | string, SelectionWithPath>;
+    }) => void;
+    readonly showMoveToRoot?: boolean;
+    readonly title?: string;
+};
+export type HierarchyModalInternalProps = {
+    /** Base filter constraint (e.g., tenant filter) to apply to all queries */
+    readonly baseFilter?: null | Where;
+    readonly closeModal: () => void;
+    /** IDs that should be disabled (e.g., items being moved can't be selected as destination) */
+    readonly disabledIds?: Set<number | string>;
+    /**
+     * When provided, filters hierarchy items to only show those that accept these collections.
+     * Used with collectionSpecific hierarchy config.
+     */
+    readonly filterByCollection?: string[];
+    readonly hierarchyCollectionSlug: string;
+    readonly Icon?: React.ReactNode;
+    readonly modalSlug: string;
+    readonly parentFieldName: string;
+    readonly reopenCount?: number;
+    readonly useAsTitle?: string;
+} & HierarchyModalProps;
+export type HierarchyModalTogglerProps = {
+    children?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    modalSlug?: string;
+} & HTMLAttributes<HTMLButtonElement>;
+export type UseHierarchyModal = (args: UseHierarchyModalArgs) => [
+    React.FC<HierarchyModalProps>,
+    React.FC<Omit<HierarchyModalTogglerProps, 'modalSlug'>>,
+    {
+        closeModal: () => void;
+        isModalOpen: boolean;
+        modalDepth: number;
+        modalSlug: string;
+        openModal: () => void;
+        toggleModal: () => void;
+    }
+];
+export type HierarchyDrawerProps = HierarchyModalProps;
+export type HierarchyDrawerInternalProps = HierarchyModalInternalProps;
+export type HierarchyDrawerTogglerProps = HierarchyModalTogglerProps;
+export type { ColumnItemData } from '../ColumnBrowser/types.js';
+//# sourceMappingURL=types.d.ts.map

package/dist/elements/Hierarchy/Modal/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Modal/types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/elements/Hierarchy/Modal/types.ts"],"sourcesContent":["import type { Where } from 'payload'\nimport type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nexport type SelectionWithPath = {\n  id: number | string\n  path: Array<{ id: number | string; title: string }>\n}\n\nexport type UseHierarchyModalArgs = {\n  /** IDs that should be disabled (e.g., items being moved can't be selected as destination) */\n  disabledIds?: Set<number | string>\n  /**\n   * When provided, filters hierarchy items to only show those that accept these collections.\n   * Used with collectionSpecific hierarchy config.\n   */\n  filterByCollection?: string[]\n  hierarchyCollectionSlug: string\n  Icon?: React.ReactNode\n}\n\nexport type HierarchyModalProps = {\n  readonly confirmLabel?: string\n  readonly hasMany?: boolean\n  readonly initialSelections?: (number | string)[]\n  /** Disables the confirm and move to root actions while a save is running */\n  readonly isBusy?: boolean\n  readonly onMoveToRoot?: () => void\n  readonly onSave: (params: {\n    closeModal: () => void\n    selections: Map<number | string, SelectionWithPath>\n  }) => void\n  readonly showMoveToRoot?: boolean\n  readonly title?: string\n}\n\nexport type HierarchyModalInternalProps = {\n  /** Base filter constraint (e.g., tenant filter) to apply to all queries */\n  readonly baseFilter?: null | Where\n  readonly closeModal: () => void\n  /** IDs that should be disabled (e.g., items being moved can't be selected as destination) */\n  readonly disabledIds?: Set<number | string>\n  /**\n   * When provided, filters hierarchy items to only show those that accept these collections.\n   * Used with collectionSpecific hierarchy config.\n   */\n  readonly filterByCollection?: string[]\n  readonly hierarchyCollectionSlug: string\n  readonly Icon?: React.ReactNode\n  readonly modalSlug: string\n  readonly parentFieldName: string\n  readonly reopenCount?: number\n  readonly useAsTitle?: string\n} & HierarchyModalProps\n\nexport type HierarchyModalTogglerProps = {\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  modalSlug?: string\n} & HTMLAttributes<HTMLButtonElement>\n\nexport type UseHierarchyModal = (args: UseHierarchyModalArgs) => [\n  React.FC<HierarchyModalProps>,\n  React.FC<Omit<HierarchyModalTogglerProps, 'modalSlug'>>,\n  {\n    closeModal: () => void\n    isModalOpen: boolean\n    modalDepth: number\n    modalSlug: string\n    openModal: () => void\n    toggleModal: () => void\n  },\n]\n\n// Backward-compatible aliases\nexport type HierarchyDrawerProps = HierarchyModalProps\nexport type HierarchyDrawerInternalProps = HierarchyModalInternalProps\nexport type HierarchyDrawerTogglerProps = HierarchyModalTogglerProps\n\n// Re-export column browser types for backwards compatibility\nexport type { ColumnItemData } from '../ColumnBrowser/types.js'\n"],"mappings":"AAgFA;AACA","ignoreList":[]}

package/dist/elements/Hierarchy/Modal/useHierarchyModal.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { HierarchyModalTogglerProps, UseHierarchyModal } from './types.js';
+export * from './types.js';
+export declare const formatHierarchyModalSlug: ({ depth, uuid, }: {
+    depth: number;
+    uuid: string;
+}) => string;
+export declare const HierarchyModalToggler: React.FC<HierarchyModalTogglerProps>;
+/**
+ * Hook for using a hierarchy modal for selecting hierarchy items.
+ *
+ * @example
+ * ```tsx
+ * const [HierarchyModal, HierarchyModalToggler, { closeModal, openModal }] = useHierarchyModal({
+ *   collectionSlug: 'categories',
+ * })
+ *
+ * return (
+ *   <>
+ *     <HierarchyModal
+ *       onSave={(selections) => console.log(selections)}
+ *       hasMany={true}
+ *     />
+ *     <HierarchyModalToggler>Select Categories</HierarchyModalToggler>
+ *   </>
+ * )
+ * ```
+ */
+export declare const useHierarchyModal: UseHierarchyModal;
+//# sourceMappingURL=useHierarchyModal.d.ts.map

package/dist/elements/Hierarchy/Modal/useHierarchyModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHierarchyModal.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Modal/useHierarchyModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwD,MAAM,OAAO,CAAA;AAE5E,OAAO,KAAK,EAAuB,0BAA0B,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAEpG,cAAc,YAAY,CAAA;AAQ1B,eAAO,MAAM,wBAAwB,qBAGlC;IACD,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,KAAG,MAA4C,CAAA;AAEhD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAmBtE,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,iBAAiB,EAAE,iBAsH/B,CAAA"}

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

@@ -0,0 +1,149 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useModal } from '@faceless-ui/modal';
+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 as ModalToggler } from '../../Drawer/index.js';
+import { baseClass, HierarchyModal } from './index.js';
+export const formatHierarchyModalSlug = ({
+  depth,
+  uuid
+}) => `hierarchy-modal_${depth}_${uuid}`;
+export const HierarchyModalToggler = ({
+  children,
+  className,
+  disabled,
+  modalSlug,
+  onClick,
+  ...rest
+}) => {
+  return /*#__PURE__*/_jsx(ModalToggler, {
+    className: [className, `${baseClass}__toggler`].filter(Boolean).join(' '),
+    disabled: disabled,
+    onClick: onClick,
+    slug: modalSlug,
+    ...rest,
+    children: children
+  });
+};
+/**
+ * Hook for using a hierarchy modal for selecting hierarchy items.
+ *
+ * @example
+ * ```tsx
+ * const [HierarchyModal, HierarchyModalToggler, { closeModal, openModal }] = useHierarchyModal({
+ *   collectionSlug: 'categories',
+ * })
+ *
+ * return (
+ *   <>
+ *     <HierarchyModal
+ *       onSave={(selections) => console.log(selections)}
+ *       hasMany={true}
+ *     />
+ *     <HierarchyModalToggler>Select Categories</HierarchyModalToggler>
+ *   </>
+ * )
+ * ```
+ */
+export const useHierarchyModal = ({
+  disabledIds,
+  filterByCollection: filterByCollectionProp,
+  hierarchyCollectionSlug,
+  Icon
+}) => {
+  const {
+    getEntityConfig
+  } = useConfig();
+  const {
+    allowedCollections,
+    baseFilter
+  } = useHierarchy();
+  const collectionConfig = getEntityConfig({
+    collectionSlug: hierarchyCollectionSlug
+  });
+  const useAsTitle = collectionConfig?.admin?.useAsTitle;
+  const hierarchyConfig = collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object' ? collectionConfig.hierarchy : undefined;
+  const parentFieldName = hierarchyConfig?.parentFieldName;
+  // Use explicit prop if provided, otherwise fall back to allowedCollections from context
+  // - allowedCollections is null/undefined: no filtering (undefined)
+  // - allowedCollections is []: no collection requirements ([])
+  // - allowedCollections has values: show folders accepting those types
+  // Memoize to prevent new array references on every render
+  const filterByCollection = useMemo(() => {
+    if (filterByCollectionProp !== undefined) {
+      return filterByCollectionProp;
+    }
+    return allowedCollections !== null ? allowedCollections.map(c => c.slug) : undefined;
+  }, [filterByCollectionProp, allowedCollections]);
+  const modalDepth = useEditDepth();
+  const uuid = useId();
+  const {
+    closeModal,
+    openModal,
+    toggleModal
+  } = useModal();
+  const [reopenCount, setReopenCount] = useState(0);
+  const modalSlug = formatHierarchyModalSlug({
+    depth: modalDepth,
+    uuid
+  });
+  // Store modal functions in refs to ensure stable callbacks
+  // This prevents re-renders when other modals (like DocumentDrawer) change state
+  const closeModalRef = useRef(closeModal);
+  const openModalRef = useRef(openModal);
+  const toggleModalRef = useRef(toggleModal);
+  closeModalRef.current = closeModal;
+  openModalRef.current = openModal;
+  toggleModalRef.current = toggleModal;
+  // Stable callbacks using refs - these will NEVER change
+  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,
+      closeModal: closeHierarchyModal,
+      disabledIds: disabledIds,
+      filterByCollection: filterByCollection,
+      hierarchyCollectionSlug: hierarchyCollectionSlug,
+      Icon: Icon,
+      modalSlug: modalSlug,
+      parentFieldName: parentFieldName,
+      reopenCount: reopenCount,
+      useAsTitle: useAsTitle
+    }, 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,
+      modalSlug: modalSlug
+    });
+    return TogglerComponent;
+  }, [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
+    isModalOpen: false,
+    openModal: openHierarchyModal,
+    toggleModal: toggleHierarchyModal
+  }), [closeHierarchyModal, modalDepth, modalSlug, openHierarchyModal, toggleHierarchyModal]);
+  return [MemoizedModal, MemoizedModalToggler, MemoizedModalState];
+};
+//# 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\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 []: no collection requirements ([])\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":"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","ignoreList":[]}

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

@@ -1,22 +1,21 @@
 import React from 'react';
-import './index.scss';
 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 required by the selected documents at the destination. */
+    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: requiredCollectionsProp, 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;AAc7D,OAAO,cAAc,CAAA;AAErB,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":"AAMA,OAAO,KAAiD,MAAM,OAAO,CAAA;AAkBrE,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,8EAA8E;IAC9E,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,EAAE,uBAAuB,EAC5C,UAAU,GACX,EAAE,aAAa,qBAkQf"}

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

@@ -1,22 +1,20 @@
 '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 React, { useCallback, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
 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 { getEffectiveHierarchyCollections, getHierarchyCollectionRestrictions } from '../../../utilities/hierarchyCollectionRestrictions.js';
 import { ListSelectionButton } from '../../ListSelection/index.js';
-import { Translation } from '../../Translation/index.js';
-import { useHierarchyDrawer } from '../Drawer/useHierarchyDrawer.js';
-import './index.scss';
+import { HierarchyActionsMenu } from '../ActionsMenu/index.js';
+import { useHierarchyModal } from '../Modal/useHierarchyModal.js';
 export const baseClass = 'move-many';
 /**
  * Gets the parent field name from the hierarchy config.
@@ -29,20 +27,16 @@ export function MoveMany({
   currentParentID,
   hierarchySlug,
   Icon,
-  modalPrefix,
   onSuccess,
+  requiredCollections: requiredCollectionsProp,
   selections
 }) {
   const {
     i18n,
     t
   } = useTranslation();
-  const {
-    code: locale
-  } = useLocale();
-  const {
-    openModal
-  } = useModal();
+  const currentLocale = useLocale();
+  const locale = currentLocale?.code;
   const {
     config: {
       collections,
@@ -54,12 +48,16 @@ export function MoveMany({
   const {
     getSelectionsWithMetadata
   } = useDocumentSelection();
-  const [destination, setDestination] = useState(null);
-  const confirmMoveDrawerSlug = `${modalPrefix ? `${modalPrefix}-` : ''}confirm-move-many`;
+  const hierarchyCollectionConfig = collections.find(c => c.slug === hierarchySlug);
+  const {
+    relatedCollectionSlugs
+  } = useMemo(() => getHierarchyCollectionRestrictions({
+    collectionConfig: hierarchyCollectionConfig
+  }), [hierarchyCollectionConfig]);
   // Compute required collections from selection metadata
   // For related items: add their collection slug
   // For folders: add their allowedCollections values
-  const requiredCollections = useMemo(() => {
+  const inferredRequiredCollections = useMemo(() => {
     const selectionsWithMeta = getSelectionsWithMetadata();
     const required = new Set();
     for (const [collectionSlug, {
@@ -70,10 +68,11 @@ export function MoveMany({
         for (const {
           metadata
         } of items) {
-          if (metadata.allowedCollections) {
-            for (const slug of metadata.allowedCollections) {
-              required.add(slug);
-            }
+          for (const slug of getEffectiveHierarchyCollections({
+            allowedCollections: metadata.allowedCollections,
+            relatedCollectionSlugs
+          })) {
+            required.add(slug);
           }
         }
       } else {
@@ -82,16 +81,17 @@ export function MoveMany({
       }
     }
     return required.size > 0 ? Array.from(required) : undefined;
-  }, [getSelectionsWithMetadata, hierarchySlug]);
+  }, [getSelectionsWithMetadata, hierarchySlug, relatedCollectionSlugs]);
+  const requiredCollections = requiredCollectionsProp ?? inferredRequiredCollections;
   // 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,
@@ -100,14 +100,15 @@ export function MoveMany({
   // Calculate total count and label
   const {
     count,
-    label
+    label,
+    modalTitleLabel
   } = useMemo(() => {
     let totalCount = 0;
     const labels = [];
     for (const [collectionSlug_0, {
       ids
     }] of Object.entries(selections)) {
-      const config = collections.find(c => c.slug === collectionSlug_0);
+      const config = collections.find(c_0 => c_0.slug === collectionSlug_0);
       if (config && ids.length > 0) {
         totalCount += ids.length;
         const collectionLabel = getTranslation(ids.length > 1 ? config.labels.plural : config.labels.singular, i18n);
@@ -116,39 +117,23 @@ export function MoveMany({
     }
     return {
       count: totalCount,
-      label: labels.join(', ')
+      label: labels.join(', '),
+      modalTitleLabel: labels.length === 1 ? labels[0] : t(totalCount === 1 ? 'general:document' : 'general:documents')
     };
-  }, [selections, collections, i18n]);
-  const hierarchyCollectionConfig = collections.find(c_0 => c_0.slug === hierarchySlug);
+  }, [selections, collections, i18n, t]);
   const parentFieldName = getParentFieldName(hierarchyCollectionConfig);
   // Check if hierarchy has a valid parentFieldName
   const canMove = parentFieldName !== undefined;
-  const handleDrawerSave = useCallback(({
-    selections: selectionsMap
-  }) => {
-    if (selectionsMap.size === 0) {
-      return;
-    }
-    const firstSelection = selectionsMap.values().next().value;
-    const destinationId = firstSelection?.id;
-    const destinationTitle = firstSelection?.path?.[firstSelection.path.length - 1]?.title || String(destinationId);
-    setDestination({
-      id: destinationId,
-      title: destinationTitle
-    });
-    openModal(confirmMoveDrawerSlug);
-  }, [openModal, confirmMoveDrawerSlug]);
-  const handleMoveToRoot = useCallback(() => {
-    setDestination({
-      id: null,
-      title: t('hierarchy:noParent')
-    });
-    openModal(confirmMoveDrawerSlug);
-  }, [openModal, confirmMoveDrawerSlug, t]);
-  const handleConfirmMove = useCallback(async () => {
-    if (destination === null) {
+  const hierarchyLabel = getTranslation(hierarchyCollectionConfig?.labels?.singular || hierarchySlug, i18n) || hierarchySlug;
+  const isMovingRef = useRef(false);
+  const [isMoving, setIsMoving] = useState(false);
+  const moveDocuments = useCallback(async destination => {
+    // A ref, not state, so a second click in the same frame still sees the first move
+    if (isMovingRef.current) {
       return;
     }
+    isMovingRef.current = true;
+    setIsMoving(true);
     let totalMoved = 0;
     let hasErrors = false;
     try {
@@ -211,67 +196,67 @@ export function MoveMany({
         }));
       }
       if (!hasErrors || totalMoved > 0) {
-        closeDrawer();
+        closeModal();
         onSuccess?.();
       }
     } catch (_err) {
       toast.error(t('error:unknown'));
     } finally {
-      setDestination(null);
+      isMovingRef.current = false;
+      setIsMoving(false);
     }
-  }, [closeDrawer, destination, selections, parentFieldName, locale, api, i18n, t, label, onSuccess]);
+  }, [closeModal, selections, parentFieldName, locale, api, i18n, t, label, onSuccess]);
+  const handleModalSave = useCallback(({
+    selections: selectionsMap
+  }) => {
+    const firstSelection = selectionsMap.values().next().value;
+    if (!firstSelection) {
+      return;
+    }
+    const destinationTitle = firstSelection.path[firstSelection.path.length - 1]?.title || String(firstSelection.id);
+    void moveDocuments({
+      id: firstSelection.id,
+      title: destinationTitle
+    });
+  }, [moveDocuments]);
+  const handleMoveToRoot = useCallback(() => {
+    void moveDocuments({
+      id: null,
+      title: t('hierarchy:noParent')
+    });
+  }, [moveDocuments, t]);
+  const canRemoveFromHierarchy = currentParentID !== null && currentParentID !== undefined;
+  const initialSelections = currentParentID === null || currentParentID === undefined ? undefined : [currentParentID];
   if (count === 0 || !canMove) {
     return null;
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(ListSelectionButton, {
-      "aria-label": t('general:move'),
-      className: `${baseClass}__toggle`,
-      onClick: openDrawer,
-      children: t('general:move')
-    }), /*#__PURE__*/_jsx(HierarchyDrawer, {
+    children: [/*#__PURE__*/_jsx(HierarchyActionsMenu, {
+      hasActions: canRemoveFromHierarchy,
+      hierarchyLabel: hierarchyLabel,
+      onMove: openHierarchyModal,
+      onRemove: handleMoveToRoot,
+      renderTrigger: triggerProps => /*#__PURE__*/_jsx(ListSelectionButton, {
+        "aria-label": t('general:move'),
+        className: `${baseClass}__toggle`,
+        extraButtonProps: triggerProps?.extraButtonProps,
+        onClick: triggerProps?.onClick ?? openHierarchyModal,
+        selected: triggerProps?.selected,
+        children: t('general:move')
+      }),
+      showActionIcons: true
+    }), /*#__PURE__*/_jsx(HierarchyModal, {
+      confirmLabel: t('general:confirm'),
       hasMany: false,
-      initialSelections: currentParentID ? [currentParentID] : null,
+      initialSelections: initialSelections,
+      isBusy: isMoving,
       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
+      onSave: handleModalSave,
+      showMoveToRoot: true,
+      title: t('general:moveCount', {
+        count,
+        label: modalTitleLabel
+      })
     })]
   });
 }