@payloadcms/ui 4.0.0-internal.688c4d0 → 4.0.0-internal.697830c

package/dist/elements/Hierarchy/Field/index.client.js

@@ -15,7 +15,7 @@ import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import { Button } from '../../Button/index.js';
 import { RenderCustomComponent } from '../../RenderCustomComponent/index.js';
-import { useHierarchyDrawer } from '../Drawer/useHierarchyDrawer.js';
+import { useHierarchyModal } from '../Modal/useHierarchyModal.js';
 import { SelectedHierarchies } from './SelectedHierarchies.js';
 import './index.css';
 const baseClass = 'hierarchy-field';
@@ -88,7 +88,7 @@ export const HierarchyFieldClient = props => {
     }
     return [value_0];
   }, [value_0]);
-  // Initialize selections for the drawer - use current value so drawer expands to current selection
+  // Initialize selections for the modal - use current value so modal expands to current selection
   const initialSelections = useMemo(() => {
     if (!value_0) {
       return [];
@@ -100,21 +100,21 @@ export const HierarchyFieldClient = props => {
   }, [value_0]);
   // Memoize to prevent new array references on every render
   const filterByCollection = useMemo(() => documentCollectionSlug ? [documentCollectionSlug] : undefined, [documentCollectionSlug]);
-  const [HierarchyDrawer,, {
-    openDrawer
-  }] = useHierarchyDrawer({
+  const [HierarchyModal,, {
+    openModal
+  }] = useHierarchyModal({
     filterByCollection,
     hierarchyCollectionSlug: hierarchySlug,
     Icon
   });
-  const handleDrawerSave = useCallback(({
-    closeDrawer,
+  const handleModalSave = useCallback(({
+    closeModal,
     selections
   }) => {
     const ids = Array.from(selections.keys());
     const newValue = hasMany ? ids : ids[0] ?? null;
     setValue(newValue);
-    closeDrawer();
+    closeModal();
   }, [hasMany, setValue]);
   const handleRemove = useCallback(({
     id: idToRemove
@@ -126,9 +126,9 @@ export const HierarchyFieldClient = props => {
       setValue(null);
     }
   }, [hasMany, selectedIds, setValue]);
-  const handleOpenDrawer = useCallback(() => {
-    openDrawer();
-  }, [openDrawer]);
+  const handleOpenModal = useCallback(() => {
+    openModal();
+  }, [openModal]);
   const hierarchyLabel = getTranslation(hasMany ? collectionConfig?.labels?.plural : collectionConfig?.labels?.singular, i18n) || hierarchySlug;
   return /*#__PURE__*/_jsxs("div", {
     className: [fieldBaseClass, baseClass, className, showError && 'error', readOnly && `${baseClass}--read-only`].filter(Boolean).join(' '),
@@ -166,7 +166,7 @@ export const HierarchyFieldClient = props => {
           }),
           iconPosition: "left",
           margin: false,
-          onClick: handleOpenDrawer,
+          onClick: handleOpenModal,
           size: "medium",
           children: t('general:selectLabel', {
             label: hierarchyLabel
@@ -179,10 +179,10 @@ export const HierarchyFieldClient = props => {
           path: path
         })
       })]
-    }), /*#__PURE__*/_jsx(HierarchyDrawer, {
+    }), /*#__PURE__*/_jsx(HierarchyModal, {
       hasMany: hasMany,
       initialSelections: initialSelections,
-      onSave: handleDrawerSave
+      onSave: handleModalSave
     })]
   });
 };

package/dist/elements/Hierarchy/Field/index.client.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.client.js","names":["getTranslation","React","useCallback","useMemo","FieldDescription","FieldError","FieldLabel","mergeFieldStyles","fieldBaseClass","useField","CirclePlusIcon","useConfig","useDocumentInfo","useTranslation","Button","RenderCustomComponent","useHierarchyDrawer","SelectedHierarchies","baseClass","HierarchyFieldClient","props","field","admin","className","description","hasMany","label","localized","relationTo","relationToProp","required","Icon","path","pathFromProps","readOnly","validate","hierarchySlug","Array","isArray","getEntityConfig","collectionSlug","documentCollectionSlug","i18n","t","collectionConfig","memoizedValidate","value","validationOptions","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","setValue","showError","potentiallyStalePath","styles","selectedIds","initialSelections","filterByCollection","undefined","HierarchyDrawer","openDrawer","hierarchyCollectionSlug","handleDrawerSave","closeDrawer","selections","ids","from","keys","newValue","handleRemove","id","idToRemove","newIds","filter","length","handleOpenDrawer","hierarchyLabel","labels","plural","singular","_jsxs","Boolean","join","replace","style","_jsx","CustomComponent","Fallback","onRemove","buttonStyle","icon","size","iconPosition","margin","onClick","onSave"],"sources":["../../../../src/elements/Hierarchy/Field/index.client.tsx"],"sourcesContent":["'use client'\nimport type { RelationshipFieldClientProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useCallback, useMemo } from 'react'\n\nimport type { SelectionWithPath } from '../Drawer/types.js'\n\nimport { FieldDescription } from '../../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../../fields/FieldLabel/index.js'\nimport { mergeFieldStyles } from '../../../fields/mergeFieldStyles.js'\nimport { fieldBaseClass } from '../../../fields/shared/index.js'\nimport { useField } from '../../../forms/useField/index.js'\nimport { CirclePlusIcon } from '../../../icons/CirclePlus/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { RenderCustomComponent } from '../../RenderCustomComponent/index.js'\nimport { useHierarchyDrawer } from '../Drawer/useHierarchyDrawer.js'\nimport { SelectedHierarchies } from './SelectedHierarchies.js'\nimport './index.css'\n\nconst baseClass = 'hierarchy-field'\n\ntype Value = (number | string)[] | null | (number | string)\n\nexport type HierarchyFieldClientProps = {\n  Icon?: React.ReactNode\n} & RelationshipFieldClientProps\n\nexport const HierarchyFieldClient: React.FC<HierarchyFieldClientProps> = (props) => {\n  const {\n    field,\n    field: {\n      admin: { className, description } = {},\n      hasMany,\n      label,\n      localized,\n      relationTo: relationToProp,\n      required,\n    },\n    Icon,\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const hierarchySlug = Array.isArray(relationToProp) ? relationToProp[0] : relationToProp\n\n  const { getEntityConfig } = useConfig()\n  const { collectionSlug: documentCollectionSlug } = useDocumentInfo()\n  const { i18n, t } = useTranslation()\n\n  const collectionConfig = getEntityConfig({ collectionSlug: hierarchySlug })\n\n  const memoizedValidate = useCallback(\n    (value: Value, validationOptions: Parameters<typeof validate>[1]) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...validationOptions, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<Value>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  // Normalize value to array of IDs for display\n  const selectedIds = useMemo((): (number | string)[] => {\n    if (!value) {\n      return []\n    }\n\n    if (Array.isArray(value)) {\n      return value\n    }\n\n    return [value]\n  }, [value])\n\n  // Initialize selections for the drawer - use current value so drawer expands to current selection\n  const initialSelections = useMemo(() => {\n    if (!value) {\n      return []\n    }\n\n    if (Array.isArray(value)) {\n      return value\n    }\n\n    return [value] as (number | string)[]\n  }, [value])\n\n  // Memoize to prevent new array references on every render\n  const filterByCollection = useMemo(\n    () => (documentCollectionSlug ? [documentCollectionSlug] : undefined),\n    [documentCollectionSlug],\n  )\n\n  const [HierarchyDrawer, , { openDrawer }] = useHierarchyDrawer({\n    filterByCollection,\n    hierarchyCollectionSlug: hierarchySlug,\n    Icon,\n  })\n\n  const handleDrawerSave = useCallback(\n    ({\n      closeDrawer,\n      selections,\n    }: {\n      closeDrawer: () => void\n      selections: Map<number | string, SelectionWithPath>\n    }) => {\n      const ids = Array.from(selections.keys())\n      const newValue = hasMany ? ids : (ids[0] ?? null)\n      setValue(newValue)\n      closeDrawer()\n    },\n    [hasMany, setValue],\n  )\n\n  const handleRemove = useCallback(\n    ({ id: idToRemove }: { id: number | string }) => {\n      if (hasMany) {\n        const newIds = selectedIds.filter((id) => id !== idToRemove)\n        setValue(newIds.length > 0 ? newIds : null)\n      } else {\n        setValue(null)\n      }\n    },\n    [hasMany, selectedIds, setValue],\n  )\n\n  const handleOpenDrawer = useCallback(() => {\n    openDrawer()\n  }, [openDrawer])\n\n  const hierarchyLabel =\n    getTranslation(\n      hasMany ? collectionConfig?.labels?.plural : collectionConfig?.labels?.singular,\n      i18n,\n    ) || hierarchySlug\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        showError && 'error',\n        readOnly && `${baseClass}--read-only`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={`field-${path?.replace(/\\./g, '__')}`}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel label={label} localized={localized} path={path} required={required} />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        <div className={`${baseClass}__content`}>\n          {selectedIds.length > 0 && (\n            <SelectedHierarchies\n              hierarchySlug={hierarchySlug}\n              onRemove={handleRemove}\n              readOnly={readOnly || disabled}\n              selectedIds={selectedIds}\n            />\n          )}\n          {!readOnly && (hasMany || selectedIds.length === 0) && (\n            <Button\n              buttonStyle=\"dashed\"\n              className={`${baseClass}__manage-button`}\n              disabled={disabled}\n              icon={<CirclePlusIcon size={24} />}\n              iconPosition=\"left\"\n              margin={false}\n              onClick={handleOpenDrawer}\n              size=\"medium\"\n            >\n              {t('general:selectLabel', { label: hierarchyLabel })}\n            </Button>\n          )}\n        </div>\n        {AfterInput}\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n      <HierarchyDrawer\n        hasMany={hasMany}\n        initialSelections={initialSelections}\n        onSave={handleDrawerSave}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.client.js","names":["getTranslation","React","useCallback","useMemo","FieldDescription","FieldError","FieldLabel","mergeFieldStyles","fieldBaseClass","useField","CirclePlusIcon","useConfig","useDocumentInfo","useTranslation","Button","RenderCustomComponent","useHierarchyModal","SelectedHierarchies","baseClass","HierarchyFieldClient","props","field","admin","className","description","hasMany","label","localized","relationTo","relationToProp","required","Icon","path","pathFromProps","readOnly","validate","hierarchySlug","Array","isArray","getEntityConfig","collectionSlug","documentCollectionSlug","i18n","t","collectionConfig","memoizedValidate","value","validationOptions","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","setValue","showError","potentiallyStalePath","styles","selectedIds","initialSelections","filterByCollection","undefined","HierarchyModal","openModal","hierarchyCollectionSlug","handleModalSave","closeModal","selections","ids","from","keys","newValue","handleRemove","id","idToRemove","newIds","filter","length","handleOpenModal","hierarchyLabel","labels","plural","singular","_jsxs","Boolean","join","replace","style","_jsx","CustomComponent","Fallback","onRemove","buttonStyle","icon","size","iconPosition","margin","onClick","onSave"],"sources":["../../../../src/elements/Hierarchy/Field/index.client.tsx"],"sourcesContent":["'use client'\nimport type { RelationshipFieldClientProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useCallback, useMemo } from 'react'\n\nimport type { SelectionWithPath } from '../Modal/types.js'\n\nimport { FieldDescription } from '../../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../../fields/FieldLabel/index.js'\nimport { mergeFieldStyles } from '../../../fields/mergeFieldStyles.js'\nimport { fieldBaseClass } from '../../../fields/shared/index.js'\nimport { useField } from '../../../forms/useField/index.js'\nimport { CirclePlusIcon } from '../../../icons/CirclePlus/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { RenderCustomComponent } from '../../RenderCustomComponent/index.js'\nimport { useHierarchyModal } from '../Modal/useHierarchyModal.js'\nimport { SelectedHierarchies } from './SelectedHierarchies.js'\nimport './index.css'\n\nconst baseClass = 'hierarchy-field'\n\ntype Value = (number | string)[] | null | (number | string)\n\nexport type HierarchyFieldClientProps = {\n  Icon?: React.ReactNode\n} & RelationshipFieldClientProps\n\nexport const HierarchyFieldClient: React.FC<HierarchyFieldClientProps> = (props) => {\n  const {\n    field,\n    field: {\n      admin: { className, description } = {},\n      hasMany,\n      label,\n      localized,\n      relationTo: relationToProp,\n      required,\n    },\n    Icon,\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const hierarchySlug = Array.isArray(relationToProp) ? relationToProp[0] : relationToProp\n\n  const { getEntityConfig } = useConfig()\n  const { collectionSlug: documentCollectionSlug } = useDocumentInfo()\n  const { i18n, t } = useTranslation()\n\n  const collectionConfig = getEntityConfig({ collectionSlug: hierarchySlug })\n\n  const memoizedValidate = useCallback(\n    (value: Value, validationOptions: Parameters<typeof validate>[1]) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...validationOptions, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<Value>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  // Normalize value to array of IDs for display\n  const selectedIds = useMemo((): (number | string)[] => {\n    if (!value) {\n      return []\n    }\n\n    if (Array.isArray(value)) {\n      return value\n    }\n\n    return [value]\n  }, [value])\n\n  // Initialize selections for the modal - use current value so modal expands to current selection\n  const initialSelections = useMemo(() => {\n    if (!value) {\n      return []\n    }\n\n    if (Array.isArray(value)) {\n      return value\n    }\n\n    return [value] as (number | string)[]\n  }, [value])\n\n  // Memoize to prevent new array references on every render\n  const filterByCollection = useMemo(\n    () => (documentCollectionSlug ? [documentCollectionSlug] : undefined),\n    [documentCollectionSlug],\n  )\n\n  const [HierarchyModal, , { openModal }] = useHierarchyModal({\n    filterByCollection,\n    hierarchyCollectionSlug: hierarchySlug,\n    Icon,\n  })\n\n  const handleModalSave = useCallback(\n    ({\n      closeModal,\n      selections,\n    }: {\n      closeModal: () => void\n      selections: Map<number | string, SelectionWithPath>\n    }) => {\n      const ids = Array.from(selections.keys())\n      const newValue = hasMany ? ids : (ids[0] ?? null)\n      setValue(newValue)\n      closeModal()\n    },\n    [hasMany, setValue],\n  )\n\n  const handleRemove = useCallback(\n    ({ id: idToRemove }: { id: number | string }) => {\n      if (hasMany) {\n        const newIds = selectedIds.filter((id) => id !== idToRemove)\n        setValue(newIds.length > 0 ? newIds : null)\n      } else {\n        setValue(null)\n      }\n    },\n    [hasMany, selectedIds, setValue],\n  )\n\n  const handleOpenModal = useCallback(() => {\n    openModal()\n  }, [openModal])\n\n  const hierarchyLabel =\n    getTranslation(\n      hasMany ? collectionConfig?.labels?.plural : collectionConfig?.labels?.singular,\n      i18n,\n    ) || hierarchySlug\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        showError && 'error',\n        readOnly && `${baseClass}--read-only`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      id={`field-${path?.replace(/\\./g, '__')}`}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel label={label} localized={localized} path={path} required={required} />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        <div className={`${baseClass}__content`}>\n          {selectedIds.length > 0 && (\n            <SelectedHierarchies\n              hierarchySlug={hierarchySlug}\n              onRemove={handleRemove}\n              readOnly={readOnly || disabled}\n              selectedIds={selectedIds}\n            />\n          )}\n          {!readOnly && (hasMany || selectedIds.length === 0) && (\n            <Button\n              buttonStyle=\"dashed\"\n              className={`${baseClass}__manage-button`}\n              disabled={disabled}\n              icon={<CirclePlusIcon size={24} />}\n              iconPosition=\"left\"\n              margin={false}\n              onClick={handleOpenModal}\n              size=\"medium\"\n            >\n              {t('general:selectLabel', { label: hierarchyLabel })}\n            </Button>\n          )}\n        </div>\n        {AfterInput}\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n      <HierarchyModal\n        hasMany={hasMany}\n        initialSelections={initialSelections}\n        onSave={handleModalSave}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"fetchAncestorPath.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Modal/fetchAncestorPath.ts"],"names":[],"mappings":"AAGA,KAAK,qBAAqB,GAAG;IAC3B,GAAG,EAAE,MAAM,CAAA;IACX,cAAc,EAAE,MAAM,CAAA;IACtB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAID;;;;GAIG;AACH,wBAAsB,iBAAiB,CAAC,EACtC,GAAG,EACH,cAAc,EACd,MAAM,EACN,eAAe,EACf,SAAS,GACV,EAAE,qBAAqB,GAAG,OAAO,CAAC,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC,CA+CtD"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"fetchAncestorPath.js","names":["formatAdminURL","qs","MAX_HIERARCHY_DEPTH","fetchAncestorPath","api","collectionSlug","itemId","parentFieldName","serverURL","queryString","stringify","depth","limit","select","where","id","equals","addQueryPrefix","url","apiRoute","path","response","fetch","credentials","ok","data","json","doc","docs","current","undefined","parentId","unshift"],"sources":["../../../../src/elements/Hierarchy/Modal/fetchAncestorPath.ts"],"sourcesContent":["import { formatAdminURL } from 'payload/shared'\nimport * as qs from 'qs-esm'\n\ntype FetchAncestorPathArgs = {\n  api: string\n  collectionSlug: string\n  itemId: number | string\n  parentFieldName: string\n  serverURL: string\n}\n\nconst MAX_HIERARCHY_DEPTH = 20\n\n/**\n * Fetches the ancestor path for an item using a single API call with depth.\n * Returns array of ancestor IDs from root to item's parent.\n * Example: item at level 3 returns [grandparentId, parentId]\n */\nexport async function fetchAncestorPath({\n  api,\n  collectionSlug,\n  itemId,\n  parentFieldName,\n  serverURL,\n}: FetchAncestorPathArgs): Promise<(number | string)[]> {\n  const queryString = qs.stringify(\n    {\n      depth: MAX_HIERARCHY_DEPTH,\n      limit: 1,\n      select: { [parentFieldName]: true },\n      where: { id: { equals: itemId } },\n    },\n    { addQueryPrefix: true },\n  )\n\n  const url = formatAdminURL({\n    apiRoute: api,\n    path: `/${collectionSlug}${queryString}`,\n    serverURL,\n  })\n\n  const response = await fetch(url, { credentials: 'include' })\n\n  if (!response.ok) {\n    return []\n  }\n\n  const data = await response.json()\n  const doc = data.docs?.[0]\n\n  if (!doc) {\n    return []\n  }\n\n  // Walk the nested parent chain to build path from root to immediate parent\n  const path: (number | string)[] = []\n  let current = doc[parentFieldName]\n\n  while (current !== null && current !== undefined) {\n    // Parent could be an ID (number/string) or a populated object\n    const parentId = typeof current === 'object' ? current.id : current\n\n    if (parentId !== null && parentId !== undefined) {\n      path.unshift(parentId)\n    }\n\n    // Move to next parent (only if current is populated object)\n    current = typeof current === 'object' ? current[parentFieldName] : null\n  }\n\n  return path\n}\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ;AAC/B,YAAYC,EAAA,MAAQ;AAUpB,MAAMC,mBAAA,GAAsB;AAE5B;;;;;AAKA,OAAO,eAAeC,kBAAkB;EACtCC,GAAG;EACHC,cAAc;EACdC,MAAM;EACNC,eAAe;EACfC;AAAS,CACa;EACtB,MAAMC,WAAA,GAAcR,EAAA,CAAGS,SAAS,CAC9B;IACEC,KAAA,EAAOT,mBAAA;IACPU,KAAA,EAAO;IACPC,MAAA,EAAQ;MAAE,CAACN,eAAA,GAAkB;IAAK;IAClCO,KAAA,EAAO;MAAEC,EAAA,EAAI;QAAEC,MAAA,EAAQV;MAAO;IAAE;EAClC,GACA;IAAEW,cAAA,EAAgB;EAAK;EAGzB,MAAMC,GAAA,GAAMlB,cAAA,CAAe;IACzBmB,QAAA,EAAUf,GAAA;IACVgB,IAAA,EAAM,IAAIf,cAAA,GAAiBI,WAAA,EAAa;IACxCD;EACF;EAEA,MAAMa,QAAA,GAAW,MAAMC,KAAA,CAAMJ,GAAA,EAAK;IAAEK,WAAA,EAAa;EAAU;EAE3D,IAAI,CAACF,QAAA,CAASG,EAAE,EAAE;IAChB,OAAO,EAAE;EACX;EAEA,MAAMC,IAAA,GAAO,MAAMJ,QAAA,CAASK,IAAI;EAChC,MAAMC,GAAA,GAAMF,IAAA,CAAKG,IAAI,GAAG,EAAE;EAE1B,IAAI,CAACD,GAAA,EAAK;IACR,OAAO,EAAE;EACX;EAEA;EACA,MAAMP,IAAA,GAA4B,EAAE;EACpC,IAAIS,OAAA,GAAUF,GAAG,CAACpB,eAAA,CAAgB;EAElC,OAAOsB,OAAA,KAAY,QAAQA,OAAA,KAAYC,SAAA,EAAW;IAChD;IACA,MAAMC,QAAA,GAAW,OAAOF,OAAA,KAAY,WAAWA,OAAA,CAAQd,EAAE,GAAGc,OAAA;IAE5D,IAAIE,QAAA,KAAa,QAAQA,QAAA,KAAaD,SAAA,EAAW;MAC/CV,IAAA,CAAKY,OAAO,CAACD,QAAA;IACf;IAEA;IACAF,OAAA,GAAU,OAAOA,OAAA,KAAY,WAAWA,OAAO,CAACtB,eAAA,CAAgB,GAAG;EACrE;EAEA,OAAOa,IAAA;AACT","ignoreList":[]}

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

@@ -0,0 +1,88 @@
+@layer payload-default {
+  .dialog.hierarchy-modal {
+    width: min(900px, calc(100vw - var(--spacer-6)));
+    height: min(700px, calc(100vh - var(--spacer-6)));
+    max-width: calc(100vw - var(--spacer-6));
+  }
+
+  .hierarchy-modal__content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--color-bg);
+    border-radius: var(--radius-large);
+    overflow: clip;
+  }
+
+  .hierarchy-modal__header-actions {
+    display: flex;
+    gap: var(--spacer-2);
+  }
+
+  .dialog.hierarchy-modal .dialog__body {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .hierarchy-modal__subheader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--spacer-1) var(--spacer-3);
+    padding-inline-start: var(--spacer-2-5);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+    flex-shrink: 0;
+  }
+
+  .hierarchy-modal__subheader-left {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    font-weight: 500;
+    color: var(--color-text);
+  }
+
+  .hierarchy-modal__subheader-right {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+  }
+
+  .hierarchy-modal__selection-info {
+    color: var(--color-text-secondary);
+  }
+
+  .hierarchy-modal__move-to-root,
+  .hierarchy-modal__clear-all {
+    height: auto;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    color: var(--color-text-secondary);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .hierarchy-modal__move-to-root:hover:not(.btn--disabled),
+  .hierarchy-modal__clear-all:hover:not(.btn--disabled) {
+    background: transparent;
+    color: var(--color-text);
+  }
+
+  .hierarchy-modal__move-to-root:active:not(.btn--disabled),
+  .hierarchy-modal__clear-all:active:not(.btn--disabled) {
+    background: transparent;
+  }
+
+  .hierarchy-modal__columns {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+  }
+
+  .hierarchy-modal__toggler {
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { HierarchyColumnBrowserRef } from '../ColumnBrowser/index.js';
+import type { HierarchyModalInternalProps } from './types.js';
+import './index.css';
+export declare const baseClass = "hierarchy-modal";
+type HierarchyModalContentProps = {
+    columnBrowserRef?: React.RefObject<HierarchyColumnBrowserRef | null>;
+    onCreateNew?: (params: {
+        parentId: null | number | string;
+    }) => void;
+} & HierarchyModalInternalProps;
+export type HierarchyModalContentRef = {
+    selectItem: (id: number | string) => void;
+};
+export declare const HierarchyModalContent: ({ baseFilter, closeModal, columnBrowserRef, disabledIds, filterByCollection, hasMany, hierarchyCollectionSlug, Icon, initialSelections, onCreateNew, onMoveToRoot, onSave, parentFieldName, ref, showMoveToRoot, useAsTitle, }: {
+    ref?: React.RefObject<HierarchyModalContentRef | null>;
+} & HierarchyModalContentProps) => React.JSX.Element;
+export declare const HierarchyModal: React.FC<HierarchyModalInternalProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Modal/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,KAAK,EAAE,2BAA2B,EAAqB,MAAM,YAAY,CAAA;AAahF,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,SAAS,oBAAoB,CAAA;AAE1C,KAAK,0BAA0B,GAAG;IAChC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,yBAAyB,GAAG,IAAI,CAAC,CAAA;IACpE,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CACrE,GAAG,2BAA2B,CAAA;AAE/B,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;CAC1C,CAAA;AAED,eAAO,MAAM,qBAAqB,GAAkC,gOAiBjE;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,wBAAwB,GAAG,IAAI,CAAC,CAAA;CAAE,GAAG,0BAA0B,sBAmNzF,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA+FhE,CAAA"}

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

@@ -8,17 +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 { DialogModal } from '../../Dialog/index.js';
+import { Button } from '../../Button/index.js';
+import { DialogBody, DialogHeader, DialogModal } from '../../Dialog/index.js';
 import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
 import { DrawerDepthProvider } from '../../Drawer/index.js';
-import { DrawerActionHeader } from '../../DrawerActionHeader/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,
@@ -39,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: {
@@ -58,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);
@@ -86,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
@@ -134,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 => {
@@ -154,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
@@ -231,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
@@ -262,26 +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(DialogModal, {
       className: baseClass,
       closeOnBlur: true,
       size: "large",
-      slug: drawerSlug,
-      children: drawerContent
+      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":[]}