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

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","Fragment","useCallback","useMemo","mergeFieldStyles","RelationshipInput","useField","TagIcon","useConfig","useDocumentInfo","useTranslation","Button","useHierarchyModal","baseClass","flattenOptionGroups","groups","map","group","options","flat","HierarchyFieldClient","props","field","admin","className","description","isSortable","placeholder","hasMany","label","localized","relationTo","relationToProp","required","Icon","path","pathFromProps","readOnly","validate","hierarchySlug","Array","isArray","getEntityConfig","collectionSlug","documentCollectionSlug","i18n","t","collectionConfig","hierarchyConfig","hierarchy","undefined","titlePathFieldName","memoizedValidate","value","validationOptions","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","filterOptions","initialValue","setValue","showError","potentiallyStalePath","useState","styles","toRelationValues","ids","id","memoizedValue","memoizedInitialValue","handleChangeHasMany","newValue","relation","isUnchanged","length","every","index","handleChangeSingle","selectOptionFields","formatOptionLabel","context","defaultLabel","doc","titlePath","split","segment","trim","join","filterByCollection","HierarchyModal","openModal","hierarchyCollectionSlug","initialSelections","handleModalSave","closeModal","selections","from","keys","hierarchyLabel","labels","plural","singular","selectLabel","BrowseButton","_jsx","buttonStyle","icon","margin","onClick","size","tooltip","_jsxs","onSave","allowEdit","filter","Boolean","CreateButton","formatDisplayedOptions","maxResultsPerRequest","style","onChange"],"sources":["../../../../src/elements/Hierarchy/Field/index.client.tsx"],"sourcesContent":["'use client'\nimport type { RelationshipFieldClientProps, ValueWithRelation } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { Fragment, useCallback, useMemo } from 'react'\n\nimport type { Option, OptionGroup } from '../../../fields/Relationship/types.js'\nimport type { SelectionWithPath } from '../Modal/types.js'\n\nimport { mergeFieldStyles } from '../../../fields/mergeFieldStyles.js'\nimport { RelationshipInput } from '../../../fields/Relationship/Input.js'\nimport { useField } from '../../../forms/useField/index.js'\nimport { TagIcon } from '../../../icons/Tag/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 { useHierarchyModal } from '../Modal/useHierarchyModal.js'\nimport './index.css'\n\nconst baseClass = 'hierarchy-field'\n\ntype Value = (number | string)[] | null | (number | string)\n\n/** The hierarchy is monomorphic, so the grouped options can be flattened into a single list */\nconst flattenOptionGroups = (groups: OptionGroup[]): Option[] =>\n  groups.map((group) => group.options).flat()\n\nexport type HierarchyFieldClientProps = {\n  Icon?: React.ReactNode\n} & RelationshipFieldClientProps\n\n/**\n * Renders a hierarchy relationship (e.g. tags) as a standard relationship input, swapping the\n * \"create new document\" button for one that opens the hierarchy column browser. Options are\n * labelled with their full ancestor path while browsing so same-named items stay distinguishable.\n */\nexport const HierarchyFieldClient: React.FC<HierarchyFieldClientProps> = (props) => {\n  const {\n    field,\n    field: {\n      admin: { className, description, isSortable = true, placeholder } = {},\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  const hierarchyConfig =\n    collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object'\n      ? collectionConfig.hierarchy\n      : undefined\n  const titlePathFieldName = hierarchyConfig?.titlePathFieldName\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    filterOptions,\n    initialValue,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<Value>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const [relationTo] = React.useState(() => [hierarchySlug])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  const toRelationValues = useCallback(\n    (ids: Value): null | ValueWithRelation | ValueWithRelation[] => {\n      if (hasMany) {\n        return Array.isArray(ids)\n          ? ids.map((id) => ({ relationTo: hierarchySlug, value: id }))\n          : null\n      }\n\n      return ids ? { relationTo: hierarchySlug, value: ids as number | string } : null\n    },\n    [hasMany, hierarchySlug],\n  )\n\n  const memoizedValue = useMemo(() => toRelationValues(value), [toRelationValues, value])\n\n  const memoizedInitialValue = useMemo(\n    () => toRelationValues(initialValue),\n    [initialValue, toRelationValues],\n  )\n\n  const handleChangeHasMany = useCallback(\n    (newValue: ValueWithRelation[]) => {\n      const ids = Array.isArray(newValue) ? newValue.map((relation) => relation.value) : []\n\n      const isUnchanged =\n        Array.isArray(value) &&\n        value.length === ids.length &&\n        value.every((id, index) => id === ids[index])\n\n      setValue(ids, isUnchanged)\n    },\n    [setValue, value],\n  )\n\n  const handleChangeSingle = useCallback(\n    (newValue: ValueWithRelation) => {\n      const id = newValue?.value ?? null\n      setValue(id, value === id)\n    },\n    [setValue, value],\n  )\n\n  // Selecting the virtual path field is what triggers the server to compute it\n  const selectOptionFields = useMemo(\n    () => (titlePathFieldName ? { [titlePathFieldName]: true } : undefined),\n    [titlePathFieldName],\n  )\n\n  const formatOptionLabel = useCallback(\n    ({\n      context,\n      defaultLabel,\n      doc,\n    }: {\n      context: 'menu' | 'value'\n      defaultLabel: string\n      doc?: Record<string, unknown>\n    }) => {\n      if (context !== 'menu' || !titlePathFieldName) {\n        return defaultLabel\n      }\n\n      const titlePath = doc?.[titlePathFieldName]\n\n      if (typeof titlePath !== 'string' || !titlePath) {\n        return defaultLabel\n      }\n\n      return titlePath\n        .split('/')\n        .map((segment) => segment.trim())\n        .join(' / ')\n    },\n    [titlePathFieldName],\n  )\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  // Pass the current value so the browser opens expanded to what is already selected\n  const initialSelections = useMemo((): (number | string)[] => {\n    if (!value) {\n      return []\n    }\n\n    return Array.isArray(value) ? value : [value]\n  }, [value])\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      setValue(hasMany ? ids : (ids[0] ?? null))\n      closeModal()\n    },\n    [hasMany, setValue],\n  )\n\n  const hierarchyLabel =\n    getTranslation(\n      hasMany ? collectionConfig?.labels?.plural : collectionConfig?.labels?.singular,\n      i18n,\n    ) || hierarchySlug\n\n  const selectLabel = t('general:selectLabel', { label: hierarchyLabel })\n\n  const BrowseButton = useMemo(\n    () => (\n      <Button\n        aria-label={selectLabel}\n        buttonStyle=\"secondary\"\n        className={`${baseClass}__browse-button`}\n        disabled={disabled}\n        icon={Icon ?? <TagIcon />}\n        margin={false}\n        onClick={openModal}\n        size=\"large\"\n        tooltip={selectLabel}\n      />\n    ),\n    [disabled, Icon, openModal, selectLabel],\n  )\n\n  return (\n    <RelationshipInput\n      AfterInput={\n        <Fragment>\n          {AfterInput}\n          <HierarchyModal\n            hasMany={hasMany}\n            initialSelections={initialSelections}\n            onSave={handleModalSave}\n          />\n        </Fragment>\n      }\n      allowEdit={false}\n      BeforeInput={BeforeInput}\n      className={[baseClass, className].filter(Boolean).join(' ')}\n      CreateButton={BrowseButton}\n      Description={Description}\n      description={description}\n      Error={Error}\n      filterOptions={filterOptions}\n      formatDisplayedOptions={flattenOptionGroups}\n      formatOptionLabel={formatOptionLabel}\n      isSortable={isSortable}\n      Label={Label}\n      label={label}\n      localized={localized}\n      maxResultsPerRequest={10}\n      path={path}\n      placeholder={placeholder}\n      readOnly={readOnly || disabled}\n      relationTo={relationTo}\n      required={required}\n      selectOptionFields={selectOptionFields}\n      showError={showError}\n      style={styles}\n      {...(hasMany === true\n        ? {\n            hasMany: true,\n            initialValue: memoizedInitialValue as ValueWithRelation[],\n            onChange: handleChangeHasMany,\n            value: memoizedValue as ValueWithRelation[],\n          }\n        : {\n            hasMany: false,\n            initialValue: memoizedInitialValue as ValueWithRelation,\n            onChange: handleChangeSingle,\n            value: memoizedValue as ValueWithRelation,\n          })}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,37 +1,6 @@
 @layer payload-default {
-  .hierarchy-field .field-type__wrap {
-    gap: var(--spacer-2);
-    flex-direction: column;
-    display: flex;
-  }
-
-  .hierarchy-field .field-label {
-    display: flex;
-    font-family: var(--text-body-large-font-family);
-    font-size: var(--text-body-large-font-size);
-    font-weight: var(--text-body-large-font-weight);
-    line-height: var(--text-body-large-line-height);
-    letter-spacing: var(--text-body-large-letter-spacing);
-    margin: unset;
-  }
-
-  .hierarchy-field__label {
-    display: flex;
-    align-items: center;
-    gap: var(--spacer-1);
-  }
-
-  .hierarchy-field__content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacer-2-5);
-  }
-
-  .hierarchy-field__manage-button {
-    align-self: flex-start;
-  }
-
-  .hierarchy-field--read-only .hierarchy-field__content {
-    opacity: 0.75;
+  /* Matches the icon weight of the default relationship "add new" button this stands in for */
+  .hierarchy-field__browse-button {
+    color: var(--color-icon);
   }
 }

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

@@ -0,0 +1,45 @@
+@layer payload-default {
+  .hierarchy-modal-footer__lead {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .hierarchy-modal-footer__trail {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    flex-shrink: 0;
+  }
+
+  .hierarchy-modal-footer__placeholder {
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+  }
+
+  .hierarchy-modal-footer__arrow {
+    display: flex;
+    flex-shrink: 0;
+    color: var(--color-text-secondary);
+  }
+
+  .hierarchy-modal-footer__chip {
+    max-width: 280px;
+  }
+
+  /* Lets the breadcrumb ellipsize instead of forcing the chip past its max-width */
+  .hierarchy-modal-footer__chip .chip__label {
+    min-width: 0;
+  }
+
+  .hierarchy-modal-footer__chip-separator,
+  .hierarchy-modal-footer__chip-ellipsis {
+    color: var(--color-text-secondary);
+  }
+
+  .hierarchy-modal-footer__chip-separator {
+    padding-inline: calc(var(--spacer-1) / 2);
+  }
+}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { PathSegment } from '../../ColumnBrowser/types.js';
+import './index.css';
+export type HierarchyModalFooterProps = {
+    /** Label for the primary action, e.g. "Move" or "Confirm" */
+    readonly confirmLabel: string;
+    /** Path of the item the user has picked in this session, root first */
+    readonly destinationPath?: PathSegment[];
+    /** Leading icon for the breadcrumb chips - falls back to a folder */
+    readonly Icon?: React.ReactNode;
+    readonly isConfirmDisabled: boolean;
+    readonly isMultiSelect: boolean;
+    readonly onClear: () => void;
+    readonly onConfirm: () => void;
+    readonly onMoveToRoot?: () => void;
+    /** Called with a chip's path to expand the browser down to that item and focus it */
+    readonly onRevealPath: (path: PathSegment[]) => void;
+    /** Shown when nothing has been picked yet, e.g. "Select Folder" */
+    readonly placeholderLabel: string;
+    /** Path the item lived in before the modal was opened, root first */
+    readonly previousPath?: PathSegment[];
+    readonly selectionCount: number;
+    /** Shown in multi-select mode once something is checked, e.g. "3 Tags selected" */
+    readonly selectionCountLabel: string;
+    readonly showMoveToRoot?: boolean;
+};
+export declare const HierarchyModalFooter: React.FC<HierarchyModalFooterProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Hierarchy/Modal/Footer/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAQ/D,OAAO,aAAa,CAAA;AAOpB,MAAM,MAAM,yBAAyB,GAAG;IACtC,6DAA6D;IAC7D,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAA;IAC7B,uEAAuE;IACvE,QAAQ,CAAC,eAAe,CAAC,EAAE,WAAW,EAAE,CAAA;IACxC,qEAAqE;IACrE,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,QAAQ,CAAC,iBAAiB,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAA;IAC/B,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAA;IAC5B,QAAQ,CAAC,SAAS,EAAE,MAAM,IAAI,CAAA;IAC9B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IAClC,qFAAqF;IACrF,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,IAAI,CAAA;IACpD,mEAAmE;IACnE,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAA;IACjC,qEAAqE;IACrE,QAAQ,CAAC,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;IACrC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,mFAAmF;IACnF,QAAQ,CAAC,mBAAmB,EAAE,MAAM,CAAA;IACpC,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;CAClC,CAAA;AAsCD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAqFpE,CAAA"}

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

@@ -0,0 +1,166 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { FolderIcon } from '../../../../icons/Folder/index.js';
+import { ReplaceIcon } from '../../../../icons/Replace/index.js';
+import { useTranslation } from '../../../../providers/Translation/index.js';
+import { Button } from '../../../Button/index.js';
+import { Chip } from '../../../Chip/index.js';
+import { DialogFooter } from '../../../Dialog/index.js';
+import './index.css';
+const baseClass = 'hierarchy-modal-footer';
+// TODO: replace with a translation key once the hierarchy strings are finalized
+const moveToLabel = 'Move to';
+/** Deeper paths collapse to a leading ellipsis so the chip stays scannable, e.g. "… / Parent / Child" */
+const MAX_VISIBLE_SEGMENTS = 2;
+const Separator = () => /*#__PURE__*/_jsx("span", {
+  className: `${baseClass}__chip-separator`,
+  children: "/"
+});
+const HierarchyPathChip = ({
+  Icon,
+  onClick,
+  path
+}) => {
+  const isTruncated = path.length > MAX_VISIBLE_SEGMENTS;
+  const visibleSegments = isTruncated ? path.slice(-MAX_VISIBLE_SEGMENTS) : path;
+  return /*#__PURE__*/_jsxs(Chip, {
+    "aria-label": path.map(segment => segment.title).join(' / '),
+    className: `${baseClass}__chip`,
+    icon: Icon ?? /*#__PURE__*/_jsx(FolderIcon, {}),
+    onClick: onClick,
+    children: [isTruncated ? /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__chip-ellipsis`,
+        children: "…"
+      }), /*#__PURE__*/_jsx(Separator, {})]
+    }) : null, visibleSegments.map((segment, index) => /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [index > 0 && /*#__PURE__*/_jsx(Separator, {}), segment.title]
+    }, segment.id))]
+  });
+};
+export const HierarchyModalFooter = t0 => {
+  const $ = _c(23);
+  const {
+    confirmLabel,
+    destinationPath,
+    Icon,
+    isConfirmDisabled,
+    isMultiSelect,
+    onClear,
+    onConfirm,
+    onMoveToRoot,
+    onRevealPath,
+    placeholderLabel,
+    previousPath,
+    selectionCount,
+    selectionCountLabel,
+    showMoveToRoot
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== onRevealPath || $[1] !== previousPath) {
+    t1 = () => onRevealPath(previousPath ?? []);
+    $[0] = onRevealPath;
+    $[1] = previousPath;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const revealPrevious = t1;
+  let t2;
+  if ($[3] !== destinationPath || $[4] !== onRevealPath) {
+    t2 = () => onRevealPath(destinationPath ?? []);
+    $[3] = destinationPath;
+    $[4] = onRevealPath;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const revealDestination = t2;
+  let t3;
+  if ($[6] !== Icon || $[7] !== confirmLabel || $[8] !== destinationPath || $[9] !== isConfirmDisabled || $[10] !== isMultiSelect || $[11] !== onClear || $[12] !== onConfirm || $[13] !== onMoveToRoot || $[14] !== placeholderLabel || $[15] !== previousPath || $[16] !== revealDestination || $[17] !== revealPrevious || $[18] !== selectionCount || $[19] !== selectionCountLabel || $[20] !== showMoveToRoot || $[21] !== t) {
+    const placeholder = _jsx("span", {
+      className: `${baseClass}__placeholder`,
+      children: placeholderLabel
+    });
+    t3 = _jsxs(DialogFooter, {
+      children: [_jsx("div", {
+        className: `${baseClass}__lead`,
+        children: isMultiSelect ? selectionCount > 0 ? _jsxs(React.Fragment, {
+          children: [_jsx("span", {
+            className: `${baseClass}__placeholder`,
+            children: selectionCountLabel
+          }), _jsx(Button, {
+            buttonStyle: "link",
+            className: `${baseClass}__clear`,
+            margin: false,
+            onClick: onClear,
+            size: "medium",
+            children: t("general:clear")
+          })]
+        }) : placeholder : _jsxs(React.Fragment, {
+          children: [previousPath?.length ? _jsxs(React.Fragment, {
+            children: [_jsx(HierarchyPathChip, {
+              Icon,
+              onClick: revealPrevious,
+              path: previousPath
+            }), _jsx("span", {
+              className: `${baseClass}__arrow`,
+              children: _jsx(ReplaceIcon, {})
+            })]
+          }) : null, destinationPath?.length ? _jsxs(React.Fragment, {
+            children: [!previousPath?.length && _jsx("span", {
+              className: `${baseClass}__placeholder`,
+              children: moveToLabel
+            }), _jsx(HierarchyPathChip, {
+              Icon,
+              onClick: revealDestination,
+              path: destinationPath
+            })]
+          }) : placeholder]
+        })
+      }), _jsxs("div", {
+        className: `${baseClass}__trail`,
+        children: [showMoveToRoot && onMoveToRoot ? _jsx(Button, {
+          buttonStyle: "secondary",
+          margin: false,
+          onClick: onMoveToRoot,
+          size: "medium",
+          children: t("hierarchy:moveToRoot")
+        }) : null, _jsx(Button, {
+          disabled: isConfirmDisabled,
+          margin: false,
+          onClick: onConfirm,
+          size: "medium",
+          children: confirmLabel
+        })]
+      })]
+    });
+    $[6] = Icon;
+    $[7] = confirmLabel;
+    $[8] = destinationPath;
+    $[9] = isConfirmDisabled;
+    $[10] = isMultiSelect;
+    $[11] = onClear;
+    $[12] = onConfirm;
+    $[13] = onMoveToRoot;
+    $[14] = placeholderLabel;
+    $[15] = previousPath;
+    $[16] = revealDestination;
+    $[17] = revealPrevious;
+    $[18] = selectionCount;
+    $[19] = selectionCountLabel;
+    $[20] = showMoveToRoot;
+    $[21] = t;
+    $[22] = t3;
+  } else {
+    t3 = $[22];
+  }
+  return t3;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","FolderIcon","ReplaceIcon","useTranslation","Button","Chip","DialogFooter","baseClass","moveToLabel","MAX_VISIBLE_SEGMENTS","Separator","_jsx","className","HierarchyPathChip","Icon","onClick","path","isTruncated","length","visibleSegments","slice","_jsxs","map","segment","title","join","icon","Fragment","index","id","HierarchyModalFooter","t0","$","confirmLabel","destinationPath","isConfirmDisabled","isMultiSelect","onClear","onConfirm","onMoveToRoot","onRevealPath","placeholderLabel","previousPath","selectionCount","selectionCountLabel","showMoveToRoot","t","t1","revealPrevious","t2","revealDestination","t3","placeholder","children","buttonStyle","margin","size","disabled"],"sources":["../../../../../src/elements/Hierarchy/Modal/Footer/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback } from 'react'\n\nimport type { PathSegment } from '../../ColumnBrowser/types.js'\n\nimport { FolderIcon } from '../../../../icons/Folder/index.js'\nimport { ReplaceIcon } from '../../../../icons/Replace/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { Button } from '../../../Button/index.js'\nimport { Chip } from '../../../Chip/index.js'\nimport { DialogFooter } from '../../../Dialog/index.js'\nimport './index.css'\n\nconst baseClass = 'hierarchy-modal-footer'\n\n// TODO: replace with a translation key once the hierarchy strings are finalized\nconst moveToLabel = 'Move to'\n\nexport type HierarchyModalFooterProps = {\n  /** Label for the primary action, e.g. \"Move\" or \"Confirm\" */\n  readonly confirmLabel: string\n  /** Path of the item the user has picked in this session, root first */\n  readonly destinationPath?: PathSegment[]\n  /** Leading icon for the breadcrumb chips - falls back to a folder */\n  readonly Icon?: React.ReactNode\n  readonly isConfirmDisabled: boolean\n  readonly isMultiSelect: boolean\n  readonly onClear: () => void\n  readonly onConfirm: () => void\n  readonly onMoveToRoot?: () => void\n  /** Called with a chip's path to expand the browser down to that item and focus it */\n  readonly onRevealPath: (path: PathSegment[]) => void\n  /** Shown when nothing has been picked yet, e.g. \"Select Folder\" */\n  readonly placeholderLabel: string\n  /** Path the item lived in before the modal was opened, root first */\n  readonly previousPath?: PathSegment[]\n  readonly selectionCount: number\n  /** Shown in multi-select mode once something is checked, e.g. \"3 Tags selected\" */\n  readonly selectionCountLabel: string\n  readonly showMoveToRoot?: boolean\n}\n\n/** Deeper paths collapse to a leading ellipsis so the chip stays scannable, e.g. \"… / Parent / Child\" */\nconst MAX_VISIBLE_SEGMENTS = 2\n\nconst Separator: React.FC = () => <span className={`${baseClass}__chip-separator`}>/</span>\n\nconst HierarchyPathChip: React.FC<{\n  readonly Icon?: React.ReactNode\n  readonly onClick: () => void\n  readonly path: PathSegment[]\n}> = ({ Icon, onClick, path }) => {\n  const isTruncated = path.length > MAX_VISIBLE_SEGMENTS\n  const visibleSegments = isTruncated ? path.slice(-MAX_VISIBLE_SEGMENTS) : path\n\n  return (\n    <Chip\n      aria-label={path.map((segment) => segment.title).join(' / ')}\n      className={`${baseClass}__chip`}\n      icon={Icon ?? <FolderIcon />}\n      onClick={onClick}\n    >\n      {isTruncated ? (\n        <React.Fragment>\n          <span className={`${baseClass}__chip-ellipsis`}>&hellip;</span>\n          <Separator />\n        </React.Fragment>\n      ) : null}\n      {visibleSegments.map((segment, index) => (\n        <React.Fragment key={segment.id}>\n          {index > 0 && <Separator />}\n          {segment.title}\n        </React.Fragment>\n      ))}\n    </Chip>\n  )\n}\n\nexport const HierarchyModalFooter: React.FC<HierarchyModalFooterProps> = ({\n  confirmLabel,\n  destinationPath,\n  Icon,\n  isConfirmDisabled,\n  isMultiSelect,\n  onClear,\n  onConfirm,\n  onMoveToRoot,\n  onRevealPath,\n  placeholderLabel,\n  previousPath,\n  selectionCount,\n  selectionCountLabel,\n  showMoveToRoot,\n}) => {\n  const { t } = useTranslation()\n\n  const revealPrevious = useCallback(\n    () => onRevealPath(previousPath ?? []),\n    [onRevealPath, previousPath],\n  )\n\n  const revealDestination = useCallback(\n    () => onRevealPath(destinationPath ?? []),\n    [destinationPath, onRevealPath],\n  )\n\n  const placeholder = <span className={`${baseClass}__placeholder`}>{placeholderLabel}</span>\n\n  return (\n    <DialogFooter>\n      <div className={`${baseClass}__lead`}>\n        {isMultiSelect ? (\n          selectionCount > 0 ? (\n            <React.Fragment>\n              <span className={`${baseClass}__placeholder`}>{selectionCountLabel}</span>\n              <Button\n                buttonStyle=\"link\"\n                className={`${baseClass}__clear`}\n                margin={false}\n                onClick={onClear}\n                size=\"medium\"\n              >\n                {t('general:clear')}\n              </Button>\n            </React.Fragment>\n          ) : (\n            placeholder\n          )\n        ) : (\n          <React.Fragment>\n            {previousPath?.length ? (\n              <React.Fragment>\n                <HierarchyPathChip Icon={Icon} onClick={revealPrevious} path={previousPath} />\n                <span className={`${baseClass}__arrow`}>\n                  <ReplaceIcon />\n                </span>\n              </React.Fragment>\n            ) : null}\n            {destinationPath?.length ? (\n              <React.Fragment>\n                {!previousPath?.length && (\n                  <span className={`${baseClass}__placeholder`}>{moveToLabel}</span>\n                )}\n                <HierarchyPathChip Icon={Icon} onClick={revealDestination} path={destinationPath} />\n              </React.Fragment>\n            ) : (\n              placeholder\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={`${baseClass}__trail`}>\n        {showMoveToRoot && onMoveToRoot ? (\n          <Button buttonStyle=\"secondary\" margin={false} onClick={onMoveToRoot} size=\"medium\">\n            {t('hierarchy:moveToRoot')}\n          </Button>\n        ) : null}\n        <Button disabled={isConfirmDisabled} margin={false} onClick={onConfirm} size=\"medium\">\n          {confirmLabel}\n        </Button>\n      </div>\n    </DialogFooter>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,29 @@
+import type { PathSegment } from '../ColumnBrowser/types.js';
+type FetchAncestorPathArgs = {
+    api: string;
+    collectionSlug: string;
+    itemId: number | string;
+    parentFieldName: string;
+    serverURL: string;
+    useAsTitle: string;
+};
+type FetchAncestorPathsArgs = {
+    itemIds: (number | string)[];
+} & Omit<FetchAncestorPathArgs, 'itemId'>;
+export type AncestorPathResult = {
+    /** Ancestor IDs from root down to the item's immediate parent, excluding the item itself */
+    ancestorIds: (number | string)[];
+    /** Full path from root down to the item itself, with titles */
+    path: PathSegment[];
+};
+/**
+ * Fetches the ancestor paths for several items in a single API call with depth.
+ * Each populated parent chain is walked to build a titled breadcrumb from root to the item.
+ */
+export declare function fetchAncestorPaths({ api, collectionSlug, itemIds, parentFieldName, serverURL, useAsTitle, }: FetchAncestorPathsArgs): Promise<Map<number | string, AncestorPathResult>>;
+/**
+ * Fetches the ancestor path for a single item. See {@link fetchAncestorPaths}.
+ */
+export declare function fetchAncestorPath({ itemId, ...rest }: FetchAncestorPathArgs): Promise<AncestorPathResult>;
+export {};
+//# sourceMappingURL=fetchAncestorPath.d.ts.map

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,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAE5D,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;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,KAAK,sBAAsB,GAAG;IAC5B,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;CAC7B,GAAG,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAA;AAEzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,4FAA4F;IAC5F,WAAW,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IAChC,+DAA+D;IAC/D,IAAI,EAAE,WAAW,EAAE,CAAA;CACpB,CAAA;AAMD;;;GAGG;AACH,wBAAsB,kBAAkB,CAAC,EACvC,GAAG,EACH,cAAc,EACd,OAAO,EACP,eAAe,EACf,SAAS,EACT,UAAU,GACX,EAAE,sBAAsB,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,GAAG,MAAM,EAAE,kBAAkB,CAAC,CAAC,CA0C5E;AAED;;GAEG;AACH,wBAAsB,iBAAiB,CAAC,EACtC,MAAM,EACN,GAAG,IAAI,EACR,EAAE,qBAAqB,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAIrD"}

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

@@ -0,0 +1,124 @@
+import { formatAdminURL } from 'payload/shared';
+import * as qs from 'qs-esm';
+const MAX_HIERARCHY_DEPTH = 20;
+const EMPTY_RESULT = {
+  ancestorIds: [],
+  path: []
+};
+/**
+ * Fetches the ancestor paths for several items in a single API call with depth.
+ * Each populated parent chain is walked to build a titled breadcrumb from root to the item.
+ */
+export async function fetchAncestorPaths({
+  api,
+  collectionSlug,
+  itemIds,
+  parentFieldName,
+  serverURL,
+  useAsTitle
+}) {
+  const results = new Map();
+  if (itemIds.length === 0) {
+    return results;
+  }
+  const queryString = qs.stringify({
+    depth: MAX_HIERARCHY_DEPTH,
+    limit: itemIds.length,
+    select: {
+      [parentFieldName]: true,
+      [useAsTitle]: true
+    },
+    where: {
+      id: {
+        in: itemIds
+      }
+    }
+  }, {
+    addQueryPrefix: true
+  });
+  const url = formatAdminURL({
+    apiRoute: api,
+    path: `/${collectionSlug}${queryString}`,
+    serverURL
+  });
+  const response = await fetch(url, {
+    credentials: 'include'
+  });
+  if (!response.ok) {
+    return results;
+  }
+  const data = await response.json();
+  for (const doc of data.docs || []) {
+    const id = doc.id;
+    if (id === null || id === undefined) {
+      continue;
+    }
+    results.set(id, buildAncestorPath({
+      id,
+      doc,
+      parentFieldName,
+      useAsTitle
+    }));
+  }
+  return results;
+}
+/**
+ * Fetches the ancestor path for a single item. See {@link fetchAncestorPaths}.
+ */
+export async function fetchAncestorPath({
+  itemId,
+  ...rest
+}) {
+  const results = await fetchAncestorPaths({
+    ...rest,
+    itemIds: [itemId]
+  });
+  return results.get(itemId) ?? EMPTY_RESULT;
+}
+function buildAncestorPath({
+  id,
+  doc,
+  parentFieldName,
+  useAsTitle
+}) {
+  const toTitle = (value, segmentID) => {
+    const rawTitle = value?.[useAsTitle];
+    return typeof rawTitle === 'string' || typeof rawTitle === 'number' ? String(rawTitle) : String(segmentID);
+  };
+  const path = [{
+    id,
+    title: toTitle(doc, id)
+  }];
+  let current = doc;
+  for (let depth = 0; depth < MAX_HIERARCHY_DEPTH; depth++) {
+    const parent = current?.[parentFieldName];
+    if (parent === null || parent === undefined) {
+      break;
+    }
+    // Parent is either a populated document or a bare ID once the depth limit is hit
+    if (typeof parent === 'object') {
+      const parentDoc = parent;
+      const parentID = parentDoc.id;
+      if (parentID === null || parentID === undefined) {
+        break;
+      }
+      path.unshift({
+        id: parentID,
+        title: toTitle(parentDoc, parentID)
+      });
+      current = parentDoc;
+    } else {
+      const parentID = parent;
+      path.unshift({
+        id: parentID,
+        title: String(parentID)
+      });
+      break;
+    }
+  }
+  return {
+    ancestorIds: path.slice(0, -1).map(segment => segment.id),
+    path
+  };
+}
+//# sourceMappingURL=fetchAncestorPath.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fetchAncestorPath.js","names":["formatAdminURL","qs","MAX_HIERARCHY_DEPTH","EMPTY_RESULT","ancestorIds","path","fetchAncestorPaths","api","collectionSlug","itemIds","parentFieldName","serverURL","useAsTitle","results","Map","length","queryString","stringify","depth","limit","select","where","id","in","addQueryPrefix","url","apiRoute","response","fetch","credentials","ok","data","json","doc","docs","undefined","set","buildAncestorPath","fetchAncestorPath","itemId","rest","get","toTitle","value","segmentID","rawTitle","String","title","current","parent","parentDoc","parentID","unshift","slice","map","segment"],"sources":["../../../../src/elements/Hierarchy/Modal/fetchAncestorPath.ts"],"sourcesContent":["import { formatAdminURL } from 'payload/shared'\nimport * as qs from 'qs-esm'\n\nimport type { PathSegment } from '../ColumnBrowser/types.js'\n\ntype FetchAncestorPathArgs = {\n  api: string\n  collectionSlug: string\n  itemId: number | string\n  parentFieldName: string\n  serverURL: string\n  useAsTitle: string\n}\n\ntype FetchAncestorPathsArgs = {\n  itemIds: (number | string)[]\n} & Omit<FetchAncestorPathArgs, 'itemId'>\n\nexport type AncestorPathResult = {\n  /** Ancestor IDs from root down to the item's immediate parent, excluding the item itself */\n  ancestorIds: (number | string)[]\n  /** Full path from root down to the item itself, with titles */\n  path: PathSegment[]\n}\n\nconst MAX_HIERARCHY_DEPTH = 20\n\nconst EMPTY_RESULT: AncestorPathResult = { ancestorIds: [], path: [] }\n\n/**\n * Fetches the ancestor paths for several items in a single API call with depth.\n * Each populated parent chain is walked to build a titled breadcrumb from root to the item.\n */\nexport async function fetchAncestorPaths({\n  api,\n  collectionSlug,\n  itemIds,\n  parentFieldName,\n  serverURL,\n  useAsTitle,\n}: FetchAncestorPathsArgs): Promise<Map<number | string, AncestorPathResult>> {\n  const results = new Map<number | string, AncestorPathResult>()\n\n  if (itemIds.length === 0) {\n    return results\n  }\n\n  const queryString = qs.stringify(\n    {\n      depth: MAX_HIERARCHY_DEPTH,\n      limit: itemIds.length,\n      select: { [parentFieldName]: true, [useAsTitle]: true },\n      where: { id: { in: itemIds } },\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 results\n  }\n\n  const data = await response.json()\n\n  for (const doc of (data.docs || []) as Record<string, unknown>[]) {\n    const id = doc.id as number | string\n\n    if (id === null || id === undefined) {\n      continue\n    }\n\n    results.set(id, buildAncestorPath({ id, doc, parentFieldName, useAsTitle }))\n  }\n\n  return results\n}\n\n/**\n * Fetches the ancestor path for a single item. See {@link fetchAncestorPaths}.\n */\nexport async function fetchAncestorPath({\n  itemId,\n  ...rest\n}: FetchAncestorPathArgs): Promise<AncestorPathResult> {\n  const results = await fetchAncestorPaths({ ...rest, itemIds: [itemId] })\n\n  return results.get(itemId) ?? EMPTY_RESULT\n}\n\nfunction buildAncestorPath({\n  id,\n  doc,\n  parentFieldName,\n  useAsTitle,\n}: {\n  doc: Record<string, unknown>\n  id: number | string\n  parentFieldName: string\n  useAsTitle: string\n}): AncestorPathResult {\n  const toTitle = (\n    value: Record<string, unknown> | undefined,\n    segmentID: number | string,\n  ): string => {\n    const rawTitle = value?.[useAsTitle]\n    return typeof rawTitle === 'string' || typeof rawTitle === 'number'\n      ? String(rawTitle)\n      : String(segmentID)\n  }\n\n  const path: PathSegment[] = [{ id, title: toTitle(doc, id) }]\n\n  let current: Record<string, unknown> | undefined = doc\n\n  for (let depth = 0; depth < MAX_HIERARCHY_DEPTH; depth++) {\n    const parent = current?.[parentFieldName]\n\n    if (parent === null || parent === undefined) {\n      break\n    }\n\n    // Parent is either a populated document or a bare ID once the depth limit is hit\n    if (typeof parent === 'object') {\n      const parentDoc = parent as Record<string, unknown>\n      const parentID = parentDoc.id as number | string\n\n      if (parentID === null || parentID === undefined) {\n        break\n      }\n\n      path.unshift({ id: parentID, title: toTitle(parentDoc, parentID) })\n      current = parentDoc\n    } else {\n      const parentID = parent as number | string\n      path.unshift({ id: parentID, title: String(parentID) })\n      break\n    }\n  }\n\n  return {\n    ancestorIds: path.slice(0, -1).map((segment) => segment.id),\n    path,\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,39 @@
+@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;
+  }
+
+  /* Beats the `:has(.dialog__header)` / `:has(.dialog__footer)` padding rules in Dialog/index.css */
+  .dialog.hierarchy-modal .hierarchy-modal__content .dialog__body {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .dialog.hierarchy-modal .dialog__footer {
+    justify-content: space-between;
+    align-items: center;
+    border-top: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .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,23 @@
+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: (params: {
+        id: number | string;
+        title?: string;
+    }) => void;
+};
+export declare const HierarchyModalContent: ({ baseFilter, closeModal, columnBrowserRef, confirmLabel, disabledIds, filterByCollection, hasMany, hierarchyCollectionSlug, Icon, initialSelections, onCreateNew, onMoveToRoot, onSave, parentFieldName, ref, showMoveToRoot, title, 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;AAE1E,OAAO,KAAK,EAAE,2BAA2B,EAAqB,MAAM,YAAY,CAAA;AAYhF,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,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CACtE,CAAA;AAED,eAAO,MAAM,qBAAqB,wPAmB/B;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,wBAAwB,GAAG,IAAI,CAAC,CAAA;CAAE,GAAG,0BAA0B,sBA+PzF,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAoGhE,CAAA"}