@payloadcms/ui 4.0.0-internal.40de3ec → 4.0.0-internal.4804abd

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

@@ -8,16 +8,17 @@ import { TagIcon } from '../../../icons/Tag/index.js';
 import { useConfig } from '../../../providers/Config/index.js';
 import { useHierarchy } from '../../../providers/Hierarchy/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
+import { Button } from '../../Button/index.js';
+import { DialogBody, DialogHeader, DialogModal } from '../../Dialog/index.js';
 import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
-import { Drawer, DrawerDepthProvider } from '../../Drawer/index.js';
-import { DrawerActionHeader } from '../../DrawerActionHeader/index.js';
+import { DrawerDepthProvider } from '../../Drawer/index.js';
 import { HierarchyColumnBrowser } from '../ColumnBrowser/index.js';
 import { fetchAncestorPath } from './fetchAncestorPath.js';
 import './index.css';
-export const baseClass = 'hierarchy-drawer';
-export const HierarchyDrawerContent = function HierarchyDrawerContent({
+export const baseClass = 'hierarchy-modal';
+export const HierarchyModalContent = function HierarchyModalContent({
   baseFilter,
-  closeDrawer,
+  closeModal,
   columnBrowserRef,
   disabledIds,
   filterByCollection,
@@ -38,7 +39,7 @@ export const HierarchyDrawerContent = function HierarchyDrawerContent({
     t
   } = useTranslation();
   // NOTE: Do NOT use useModal() here - it causes re-renders when any modal state changes
-  // Use closeDrawer prop instead which already handles closing the modal
+  // Use closeModal prop instead which already handles closing the modal
   const {
     config: {
       routes: {
@@ -57,6 +58,18 @@ export const HierarchyDrawerContent = function HierarchyDrawerContent({
   const [isLoadingPath, setIsLoadingPath] = useState(Boolean(initialSelections?.length));
   const hasLoadedPathRef = React.useRef(false);
   const firstSelection = initialSelections?.[0];
+  const mapSelections = useCallback(ids => {
+    const map = new Map();
+    if (ids) {
+      for (const id of ids) {
+        map.set(id, {
+          id,
+          path: []
+        });
+      }
+    }
+    return map;
+  }, []);
   const loadAncestorPath = useEffectEvent(async itemId => {
     if (!itemId) {
       setIsLoadingPath(false);
@@ -85,30 +98,16 @@ export const HierarchyDrawerContent = function HierarchyDrawerContent({
     hasLoadedPathRef.current = true;
     void loadAncestorPath(firstSelection);
   }, [firstSelection]);
-  const [selections, setSelections] = useState(() => {
-    const map = new Map();
-    if (initialSelections) {
-      for (const id of initialSelections) {
-        map.set(id, {
-          id,
-          path: []
-        });
-      }
-    }
-    return map;
-  });
+  const [selections, setSelections] = useState(() => mapSelections(initialSelections));
   const selectedIds = useMemo(() => new Set(selections.keys()), [selections]);
   // For now, ancestorsWithSelections is empty - will be computed when we have path tracking
   const ancestorsWithSelections = useMemo(() => new Set(), []);
-  const handleCancel = useCallback(() => {
-    closeDrawer();
-  }, [closeDrawer]);
   const handleSave = useCallback(() => {
     onSave({
-      closeDrawer,
+      closeModal,
       selections
     });
-  }, [onSave, selections, closeDrawer]);
+  }, [onSave, selections, closeModal]);
   const handleSelect = useCallback(({
     id: id_0,
     path: path_0
@@ -133,6 +132,10 @@ export const HierarchyDrawerContent = function HierarchyDrawerContent({
   const handleClearAll = useCallback(() => {
     setSelections(new Map());
   }, []);
+  const handleCancel = useCallback(() => {
+    setSelections(mapSelections(initialSelections));
+    closeModal();
+  }, [closeModal, initialSelections, mapSelections]);
   // Expose selectItem for programmatic selection (e.g., after creating a new item)
   useImperativeHandle(ref, () => ({
     selectItem: id_1 => {
@@ -153,66 +156,88 @@ export const HierarchyDrawerContent = function HierarchyDrawerContent({
   const selectionCount = selections.size;
   return /*#__PURE__*/_jsxs("div", {
     className: `${baseClass}__content`,
-    children: [/*#__PURE__*/_jsx(DrawerActionHeader, {
-      onCancel: handleCancel,
-      onSave: handleSave,
-      saveLabel: t('general:select'),
+    children: [/*#__PURE__*/_jsx(DialogHeader, {
       title: t('general:selectValue', {
         label: collectionLabel
+      }),
+      children: /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__header-actions`,
+        children: [/*#__PURE__*/_jsx(Button, {
+          buttonStyle: "secondary",
+          margin: false,
+          onClick: handleCancel,
+          size: "medium",
+          children: t('general:cancel')
+        }), /*#__PURE__*/_jsx(Button, {
+          margin: false,
+          onClick: handleSave,
+          size: "medium",
+          children: t('general:select')
+        })]
       })
-    }), /*#__PURE__*/_jsxs("div", {
-      className: `${baseClass}__subheader`,
+    }), /*#__PURE__*/_jsxs(DialogBody, {
       children: [/*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__subheader-left`,
-        children: [Icon || /*#__PURE__*/_jsx(TagIcon, {}), /*#__PURE__*/_jsx("h4", {
-          children: collectionLabel
-        })]
-      }), /*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__subheader-right`,
-        children: [showMoveToRoot && onMoveToRoot && /*#__PURE__*/_jsx("button", {
-          className: `${baseClass}__move-to-root`,
-          onClick: onMoveToRoot,
-          type: "button",
-          children: t('hierarchy:moveToRoot')
-        }), selectionCount > 0 && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsxs("span", {
-            className: `${baseClass}__selection-info`,
-            children: [selectionCount, " selected"]
-          }), /*#__PURE__*/_jsx("span", {
-            children: "—"
-          }), /*#__PURE__*/_jsx("button", {
-            className: `${baseClass}__clear-all`,
-            onClick: handleClearAll,
-            type: "button",
-            children: t('general:clearAll')
+        className: `${baseClass}__subheader`,
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__subheader-left`,
+          children: [Icon || /*#__PURE__*/_jsx(TagIcon, {}), /*#__PURE__*/_jsx("h4", {
+            children: collectionLabel
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__subheader-right`,
+          children: [showMoveToRoot && onMoveToRoot && /*#__PURE__*/_jsx(Button, {
+            buttonStyle: "ghost",
+            className: `${baseClass}__move-to-root`,
+            margin: false,
+            onClick: onMoveToRoot,
+            size: "medium",
+            children: t('hierarchy:moveToRoot')
+          }), Boolean(selectionCount) && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx("span", {
+              className: `${baseClass}__selection-info`,
+              children: t('general:selectedCount', {
+                count: selectionCount,
+                label: ''
+              })
+            }), /*#__PURE__*/_jsx("span", {
+              children: "—"
+            }), /*#__PURE__*/_jsx(Button, {
+              buttonStyle: "ghost",
+              className: `${baseClass}__clear-all`,
+              margin: false,
+              onClick: handleClearAll,
+              size: "medium",
+              children: t('general:clear')
+            })]
           })]
         })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__columns`,
+        children: /*#__PURE__*/_jsx(HierarchyColumnBrowser, {
+          ancestorsWithSelections: ancestorsWithSelections,
+          baseFilter: baseFilter,
+          disabledIds: disabledIds,
+          filterByCollection: filterByCollection,
+          hierarchyCollectionSlug: hierarchyCollectionSlug,
+          initialExpandedPath: initialExpandedPath,
+          isLoadingPath: isLoadingPath,
+          onCreateNew: onCreateNew,
+          onSelect: handleSelect,
+          parentFieldName: parentFieldName,
+          ref: columnBrowserRef,
+          selectedIds: selectedIds,
+          useAsTitle: useAsTitle
+        })
       })]
-    }), /*#__PURE__*/_jsx("div", {
-      className: `${baseClass}__columns`,
-      children: /*#__PURE__*/_jsx(HierarchyColumnBrowser, {
-        ancestorsWithSelections: ancestorsWithSelections,
-        baseFilter: baseFilter,
-        disabledIds: disabledIds,
-        filterByCollection: filterByCollection,
-        hierarchyCollectionSlug: hierarchyCollectionSlug,
-        initialExpandedPath: initialExpandedPath,
-        isLoadingPath: isLoadingPath,
-        onCreateNew: onCreateNew,
-        onSelect: handleSelect,
-        parentFieldName: parentFieldName,
-        ref: columnBrowserRef,
-        selectedIds: selectedIds,
-        useAsTitle: useAsTitle
-      })
     })]
   });
 };
-export const HierarchyDrawer = props => {
+export const HierarchyModal = props => {
   const {
-    drawerSlug,
     hierarchyCollectionSlug,
-    parentFieldName
+    modalSlug,
+    parentFieldName,
+    reopenCount
   } = props;
   const {
     refreshTree
@@ -230,12 +255,12 @@ export const HierarchyDrawer = props => {
   // Ref to access column browser's refresh function
   const columnBrowserRef = useRef(null);
   // Ref to access drawer content's selectItem function
-  const drawerContentRef = useRef(null);
+  const modalContentRef = useRef(null);
   // Key for DocumentDrawer to force remount when parentId changes
   const [documentDrawerKey, setDocumentDrawerKey] = useState(0);
   // Stable drawer slug for the document drawer - must not change on remount
-  const documentDrawerSlug = `${drawerSlug}-create-doc`;
-  // Document drawer for creating new items - rendered OUTSIDE the Drawer to avoid nested modal issues
+  const documentDrawerSlug = `${modalSlug}-create-doc`;
+  // Document drawer for creating new items - rendered OUTSIDE the modal to avoid nested modal issues
   const [DocumentDrawer,, {
     closeDrawer: closeDocumentDrawer,
     openDrawer: openDocumentDrawer
@@ -261,25 +286,26 @@ export const HierarchyDrawer = props => {
     if (columnBrowserRef.current && createParentId !== undefined) {
       void columnBrowserRef.current.refreshColumn(createParentId);
     }
-    if (drawerContentRef.current && doc?.id) {
-      drawerContentRef.current.selectItem(doc.id);
+    if (modalContentRef.current && doc?.id) {
+      modalContentRef.current.selectItem(doc.id);
     }
     refreshTree(hierarchyCollectionSlug);
     closeDocumentDrawer();
   }, [closeDocumentDrawer, createParentId, hierarchyCollectionSlug, refreshTree]);
   // Memoize the content - only depends on stable values
-  const drawerContent = useMemo(() => /*#__PURE__*/_jsx(HierarchyDrawerContent, {
+  const modalContent = useMemo(() => /*#__PURE__*/_jsx(HierarchyModalContent, {
     ...props,
     columnBrowserRef: columnBrowserRef,
     onCreateNew: handleCreateNew,
-    ref: drawerContentRef
-  }), [handleCreateNew, props]);
+    ref: modalContentRef
+  }, reopenCount), [handleCreateNew, props, reopenCount]);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Drawer, {
+    children: [/*#__PURE__*/_jsx(DialogModal, {
       className: baseClass,
-      Header: null,
-      slug: drawerSlug,
-      children: drawerContent
+      closeOnBlur: true,
+      size: "large",
+      slug: modalSlug,
+      children: modalContent
     }), /*#__PURE__*/_jsx(DrawerDepthProvider, {
       children: /*#__PURE__*/_jsx(DocumentDrawer, {
         initialData: createParentId !== null ? {

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["getTranslation","React","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","useEffectEvent","TagIcon","useConfig","useHierarchy","useTranslation","Button","DialogBody","DialogHeader","DialogModal","useDocumentDrawer","DrawerDepthProvider","HierarchyColumnBrowser","fetchAncestorPath","baseClass","HierarchyModalContent","baseFilter","closeModal","columnBrowserRef","disabledIds","filterByCollection","hasMany","hierarchyCollectionSlug","Icon","initialSelections","onCreateNew","onMoveToRoot","onSave","parentFieldName","ref","showMoveToRoot","useAsTitle","i18n","t","config","routes","api","serverURL","getEntityConfig","collectionConfig","collectionSlug","collectionLabel","labels","plural","parentFieldName_internal","hierarchy","initialExpandedPath","setInitialExpandedPath","isLoadingPath","setIsLoadingPath","Boolean","length","hasLoadedPathRef","firstSelection","mapSelections","ids","map","Map","id","set","path","loadAncestorPath","itemId","current","selections","setSelections","selectedIds","Set","keys","ancestorsWithSelections","handleSave","handleSelect","prev","next","has","delete","clear","handleClearAll","handleCancel","selectItem","selectionCount","size","_jsxs","className","_jsx","title","label","buttonStyle","margin","onClick","_Fragment","count","onSelect","HierarchyModal","props","modalSlug","reopenCount","refreshTree","createParentId","setCreateParentId","modalContentRef","documentDrawerKey","setDocumentDrawerKey","documentDrawerSlug","DocumentDrawer","closeDrawer","closeDocumentDrawer","openDrawer","openDocumentDrawer","drawerSlug","handleCreateNew","parentId","setTimeout","handleDocumentSave","doc","undefined","refreshColumn","modalContent","closeOnBlur","slug","initialData"],"sources":["../../../../src/elements/Hierarchy/Modal/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport type { HierarchyColumnBrowserRef } from '../ColumnBrowser/index.js'\nimport type { HierarchyModalInternalProps, SelectionWithPath } from './types.js'\n\nimport { useEffectEvent } from '../../../hooks/useEffectEvent.js'\nimport { TagIcon } from '../../../icons/Tag/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useHierarchy } from '../../../providers/Hierarchy/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { DialogBody, DialogHeader, DialogModal } from '../../Dialog/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\nimport { DrawerDepthProvider } from '../../Drawer/index.js'\nimport { HierarchyColumnBrowser } from '../ColumnBrowser/index.js'\nimport { fetchAncestorPath } from './fetchAncestorPath.js'\nimport './index.css'\n\nexport const baseClass = 'hierarchy-modal'\n\ntype HierarchyModalContentProps = {\n  columnBrowserRef?: React.RefObject<HierarchyColumnBrowserRef | null>\n  onCreateNew?: (params: { parentId: null | number | string }) => void\n} & HierarchyModalInternalProps\n\nexport type HierarchyModalContentRef = {\n  selectItem: (id: number | string) => void\n}\n\nexport const HierarchyModalContent = function HierarchyModalContent({\n  baseFilter,\n  closeModal,\n  columnBrowserRef,\n  disabledIds,\n  filterByCollection,\n  hasMany = false,\n  hierarchyCollectionSlug,\n  Icon,\n  initialSelections,\n  onCreateNew,\n  onMoveToRoot,\n  onSave,\n  parentFieldName,\n  ref,\n  showMoveToRoot,\n  useAsTitle,\n}: { ref?: React.RefObject<HierarchyModalContentRef | null> } & HierarchyModalContentProps) {\n  const { i18n, t } = useTranslation()\n  // NOTE: Do NOT use useModal() here - it causes re-renders when any modal state changes\n  // Use closeModal prop instead which already handles closing the modal\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n  const collectionLabel = collectionConfig\n    ? getTranslation(collectionConfig.labels?.plural || hierarchyCollectionSlug, i18n)\n    : hierarchyCollectionSlug\n\n  const parentFieldName_internal =\n    collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object'\n      ? collectionConfig.hierarchy.parentFieldName\n      : parentFieldName\n\n  const [initialExpandedPath, setInitialExpandedPath] = useState<(number | string)[] | undefined>()\n  const [isLoadingPath, setIsLoadingPath] = useState(Boolean(initialSelections?.length))\n  const hasLoadedPathRef = React.useRef(false)\n  const firstSelection = initialSelections?.[0]\n\n  const mapSelections = useCallback((ids?: (number | string)[]) => {\n    const map = new Map<number | string, SelectionWithPath>()\n\n    if (ids) {\n      for (const id of ids) {\n        map.set(id, { id, path: [] })\n      }\n    }\n\n    return map\n  }, [])\n\n  const loadAncestorPath = useEffectEvent(async (itemId?: number | string) => {\n    if (!itemId) {\n      setIsLoadingPath(false)\n      return\n    }\n\n    try {\n      const path = await fetchAncestorPath({\n        api,\n        collectionSlug: hierarchyCollectionSlug,\n        itemId,\n        parentFieldName: parentFieldName_internal,\n        serverURL,\n      })\n      setInitialExpandedPath(path)\n    } catch {\n      // Silently handle fetch errors - will just start at root\n    } finally {\n      setIsLoadingPath(false)\n    }\n  })\n\n  // Load ancestor path on mount\n  useEffect(() => {\n    if (hasLoadedPathRef.current) {\n      return\n    }\n    hasLoadedPathRef.current = true\n    void loadAncestorPath(firstSelection)\n  }, [firstSelection])\n\n  const [selections, setSelections] = useState<Map<number | string, SelectionWithPath>>(() =>\n    mapSelections(initialSelections),\n  )\n\n  const selectedIds = useMemo(() => new Set(selections.keys()), [selections])\n\n  // For now, ancestorsWithSelections is empty - will be computed when we have path tracking\n  const ancestorsWithSelections = useMemo(() => new Set<number | string>(), [])\n\n  const handleSave = useCallback(() => {\n    onSave({ closeModal, selections })\n  }, [onSave, selections, closeModal])\n\n  const handleSelect = useCallback(\n    ({\n      id,\n      path,\n    }: {\n      id: number | string\n      path: Array<{ id: number | string; title: string }>\n    }) => {\n      setSelections((prev) => {\n        const next = new Map(prev)\n\n        if (next.has(id)) {\n          next.delete(id)\n        } else {\n          if (!hasMany) {\n            // Single select: clear previous selections\n            next.clear()\n          }\n          next.set(id, { id, path })\n        }\n\n        return next\n      })\n    },\n    [hasMany],\n  )\n\n  const handleClearAll = useCallback(() => {\n    setSelections(new Map())\n  }, [])\n\n  const handleCancel = useCallback(() => {\n    setSelections(mapSelections(initialSelections))\n    closeModal()\n  }, [closeModal, initialSelections, mapSelections])\n\n  // Expose selectItem for programmatic selection (e.g., after creating a new item)\n  useImperativeHandle(\n    ref,\n    () => ({\n      selectItem: (id: number | string) => {\n        setSelections((prev) => {\n          const next = new Map(prev)\n          if (!hasMany) {\n            next.clear()\n          }\n          // Path will be empty for newly created items - could be enhanced later\n          next.set(id, { id, path: [] })\n          return next\n        })\n      },\n    }),\n    [hasMany],\n  )\n\n  const selectionCount = selections.size\n\n  return (\n    <div className={`${baseClass}__content`}>\n      <DialogHeader title={t('general:selectValue', { label: collectionLabel })}>\n        <div className={`${baseClass}__header-actions`}>\n          <Button buttonStyle=\"secondary\" margin={false} onClick={handleCancel} size=\"medium\">\n            {t('general:cancel')}\n          </Button>\n          <Button margin={false} onClick={handleSave} size=\"medium\">\n            {t('general:select')}\n          </Button>\n        </div>\n      </DialogHeader>\n      <DialogBody>\n        <div className={`${baseClass}__subheader`}>\n          <div className={`${baseClass}__subheader-left`}>\n            {Icon || <TagIcon />}\n            <h4>{collectionLabel}</h4>\n          </div>\n          <div className={`${baseClass}__subheader-right`}>\n            {showMoveToRoot && onMoveToRoot && (\n              <Button\n                buttonStyle=\"ghost\"\n                className={`${baseClass}__move-to-root`}\n                margin={false}\n                onClick={onMoveToRoot}\n                size=\"medium\"\n              >\n                {t('hierarchy:moveToRoot')}\n              </Button>\n            )}\n            {Boolean(selectionCount) && (\n              <>\n                {\n                  <span className={`${baseClass}__selection-info`}>\n                    {t('general:selectedCount', { count: selectionCount, label: '' })}\n                  </span>\n                }\n                <span>—</span>\n                <Button\n                  buttonStyle=\"ghost\"\n                  className={`${baseClass}__clear-all`}\n                  margin={false}\n                  onClick={handleClearAll}\n                  size=\"medium\"\n                >\n                  {t('general:clear')}\n                </Button>\n              </>\n            )}\n          </div>\n        </div>\n        <div className={`${baseClass}__columns`}>\n          <HierarchyColumnBrowser\n            ancestorsWithSelections={ancestorsWithSelections}\n            baseFilter={baseFilter}\n            disabledIds={disabledIds}\n            filterByCollection={filterByCollection}\n            hierarchyCollectionSlug={hierarchyCollectionSlug}\n            initialExpandedPath={initialExpandedPath}\n            isLoadingPath={isLoadingPath}\n            onCreateNew={onCreateNew}\n            onSelect={handleSelect}\n            parentFieldName={parentFieldName}\n            ref={columnBrowserRef}\n            selectedIds={selectedIds}\n            useAsTitle={useAsTitle}\n          />\n        </div>\n      </DialogBody>\n    </div>\n  )\n}\n\nexport const HierarchyModal: React.FC<HierarchyModalInternalProps> = (props) => {\n  const { hierarchyCollectionSlug, modalSlug, parentFieldName, reopenCount } = props\n\n  const { refreshTree } = useHierarchy()\n\n  // Get parentFieldName from hierarchy config\n  const { getEntityConfig } = useConfig()\n  const collectionConfig = getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n  const parentFieldName_internal =\n    collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object'\n      ? collectionConfig.hierarchy.parentFieldName\n      : parentFieldName\n\n  // Track which parentId is being used for the document drawer - use state to trigger re-render\n  const [createParentId, setCreateParentId] = useState<null | number | string>(null)\n\n  // Ref to access column browser's refresh function\n  const columnBrowserRef = useRef<HierarchyColumnBrowserRef | null>(null)\n\n  // Ref to access drawer content's selectItem function\n  const modalContentRef = useRef<HierarchyModalContentRef | null>(null)\n\n  // Key for DocumentDrawer to force remount when parentId changes\n  const [documentDrawerKey, setDocumentDrawerKey] = useState(0)\n\n  // Stable drawer slug for the document drawer - must not change on remount\n  const documentDrawerSlug = `${modalSlug}-create-doc`\n\n  // Document drawer for creating new items - rendered OUTSIDE the modal to avoid nested modal issues\n  const [DocumentDrawer, , { closeDrawer: closeDocumentDrawer, openDrawer: openDocumentDrawer }] =\n    useDocumentDrawer({\n      collectionSlug: hierarchyCollectionSlug,\n      drawerSlug: documentDrawerSlug,\n    })\n\n  const handleCreateNew = useCallback(\n    ({ parentId }: { parentId: null | number | string }) => {\n      // Increment key to force DocumentDrawer remount with new initialData\n      setDocumentDrawerKey((prev) => prev + 1)\n      setCreateParentId(parentId)\n      // Use setTimeout to ensure state update triggers re-render before opening drawer\n      setTimeout(() => {\n        openDocumentDrawer()\n      }, 0)\n    },\n    [openDocumentDrawer],\n  )\n\n  // Refresh the column, select the new item, and close the document drawer after creation\n  const handleDocumentSave = useCallback<\n    NonNullable<React.ComponentProps<typeof DocumentDrawer>['onSave']>\n  >(\n    ({ doc }) => {\n      if (columnBrowserRef.current && createParentId !== undefined) {\n        void columnBrowserRef.current.refreshColumn(createParentId)\n      }\n      if (modalContentRef.current && doc?.id) {\n        modalContentRef.current.selectItem(doc.id)\n      }\n      refreshTree(hierarchyCollectionSlug)\n      closeDocumentDrawer()\n    },\n    [closeDocumentDrawer, createParentId, hierarchyCollectionSlug, refreshTree],\n  )\n\n  // Memoize the content - only depends on stable values\n  const modalContent = useMemo(\n    () => (\n      <HierarchyModalContent\n        key={reopenCount}\n        {...props}\n        columnBrowserRef={columnBrowserRef}\n        onCreateNew={handleCreateNew}\n        ref={modalContentRef}\n      />\n    ),\n    [handleCreateNew, props, reopenCount],\n  )\n\n  return (\n    <>\n      <DialogModal className={baseClass} closeOnBlur size=\"large\" slug={modalSlug}>\n        {modalContent}\n      </DialogModal>\n      <DrawerDepthProvider>\n        <DocumentDrawer\n          initialData={\n            createParentId !== null ? { [parentFieldName_internal]: createParentId } : undefined\n          }\n          key={documentDrawerKey}\n          onSave={handleDocumentSave}\n        />\n      </DrawerDepthProvider>\n    </>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Hierarchy/{Drawer → Modal}/types.d.ts

@@ -8,7 +8,7 @@ export type SelectionWithPath = {
         title: string;
     }>;
 };
-export type UseHierarchyDrawerArgs = {
+export type UseHierarchyModalArgs = {
     /** IDs that should be disabled (e.g., items being moved can't be selected as destination) */
     disabledIds?: Set<number | string>;
     /**
@@ -19,23 +19,22 @@ export type UseHierarchyDrawerArgs = {
     hierarchyCollectionSlug: string;
     Icon?: React.ReactNode;
 };
-export type HierarchyDrawerProps = {
+export type HierarchyModalProps = {
     readonly hasMany?: boolean;
     readonly initialSelections?: (number | string)[];
     readonly onMoveToRoot?: () => void;
     readonly onSave: (params: {
-        closeDrawer: () => void;
+        closeModal: () => void;
         selections: Map<number | string, SelectionWithPath>;
     }) => void;
     readonly showMoveToRoot?: boolean;
 };
-export type HierarchyDrawerInternalProps = {
+export type HierarchyModalInternalProps = {
     /** Base filter constraint (e.g., tenant filter) to apply to all queries */
     readonly baseFilter?: null | Where;
-    readonly closeDrawer: () => void;
+    readonly closeModal: () => void;
     /** IDs that should be disabled (e.g., items being moved can't be selected as destination) */
     readonly disabledIds?: Set<number | string>;
-    readonly drawerSlug: string;
     /**
      * When provided, filters hierarchy items to only show those that accept these collections.
      * Used with collectionSpecific hierarchy config.
@@ -43,26 +42,31 @@ export type HierarchyDrawerInternalProps = {
     readonly filterByCollection?: string[];
     readonly hierarchyCollectionSlug: string;
     readonly Icon?: React.ReactNode;
+    readonly modalSlug: string;
     readonly parentFieldName: string;
+    readonly reopenCount?: number;
     readonly useAsTitle?: string;
-} & HierarchyDrawerProps;
-export type HierarchyDrawerTogglerProps = {
+} & HierarchyModalProps;
+export type HierarchyModalTogglerProps = {
     children?: React.ReactNode;
     className?: string;
     disabled?: boolean;
-    drawerSlug?: string;
+    modalSlug?: string;
 } & HTMLAttributes<HTMLButtonElement>;
-export type UseHierarchyDrawer = (args: UseHierarchyDrawerArgs) => [
-    React.FC<HierarchyDrawerProps>,
-    React.FC<Omit<HierarchyDrawerTogglerProps, 'drawerSlug'>>,
+export type UseHierarchyModal = (args: UseHierarchyModalArgs) => [
+    React.FC<HierarchyModalProps>,
+    React.FC<Omit<HierarchyModalTogglerProps, 'modalSlug'>>,
     {
-        closeDrawer: () => void;
-        drawerDepth: number;
-        drawerSlug: string;
-        isDrawerOpen: boolean;
-        openDrawer: () => void;
-        toggleDrawer: () => void;
+        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 hasMany?: boolean\n  readonly initialSelections?: (number | string)[]\n  readonly onMoveToRoot?: () => void\n  readonly onSave: (params: {\n    closeModal: () => void\n    selections: Map<number | string, SelectionWithPath>\n  }) => void\n  readonly showMoveToRoot?: boolean\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":"AA4EA;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,GAAI,kBAGtC;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,iBAqH/B,CAAA"}

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