@payloadcms/ui 3.86.0-internal.ac46214 → 4.0.0-internal.1f9ae9a

package/dist/elements/Hierarchy/Tree/useChildren.js

@@ -0,0 +1,233 @@
+import { combineWhereConstraints, formatAdminURL } from 'payload/shared';
+import * as qs from 'qs-esm';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useConfig } from '../../../providers/Config/index.js';
+import { isSuperset } from '../../../utilities/isSuperset.js';
+export const useChildren = ({
+  allPossibleTypeValues,
+  baseFilter,
+  cache,
+  cacheKey: cacheKeyProp,
+  collectionSlug,
+  enabled = true,
+  filterByCollections,
+  initialData,
+  limit = 2,
+  parentFieldName,
+  parentId,
+  typeFieldName,
+  useAsTitle
+}) => {
+  const filterKey = filterByCollections?.length ? filterByCollections.slice().sort().join(',') : '';
+  const baseFilterKey = baseFilter ? JSON.stringify(baseFilter) : '';
+  // Use provided cacheKey for consistency with cache population, or compute if not provided
+  const cacheKey = cacheKeyProp ?? `${collectionSlug}-${String(parentId)}-${filterKey}-${baseFilterKey}`;
+  const cachedData = cache?.current.get(cacheKey);
+  // Check if we have initial data for this specific parent
+  const parentKey = parentId === 'null' ? 'null' : String(parentId);
+  const parentMeta = initialData?.loadedParents?.[parentKey];
+  const hasInitialData = !!parentMeta;
+  // Extract docs for this parent from initialData if available
+  // Apply same superset filter as fetchPage for consistency
+  const initialDocsForParent = hasInitialData ? initialData.docs.filter(doc => {
+    const docParent = doc[parentFieldName] || 'null';
+    if (String(docParent) !== parentKey) {
+      return false;
+    }
+    if (filterByCollections?.length && typeFieldName) {
+      return isSuperset(doc[typeFieldName], filterByCollections);
+    }
+    return true;
+  }) : null;
+  const [children, setChildren] = useState(initialDocsForParent || cachedData?.children || null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [page, setPage] = useState(cachedData?.page || 1);
+  const [totalDocs, setTotalDocs] = useState(parentMeta?.totalDocs || cachedData?.totalDocs || 0);
+  const [hasMore, setHasMore] = useState(parentMeta?.hasMore || cachedData?.hasMore || false);
+  const initializedRef = useRef(!!hasInitialData);
+  // Refs for stable access inside load() without adding state to its dep array
+  const childrenRef = useRef(children);
+  childrenRef.current = children;
+  const isLoadingRef = useRef(isLoading);
+  isLoadingRef.current = isLoading;
+  const {
+    config: {
+      routes: {
+        api
+      },
+      serverURL
+    }
+  } = useConfig();
+  const fetchPage = useCallback(async (pageToFetch, currentChildren) => {
+    setIsLoading(true);
+    try {
+      const parentCondition = parentId === 'null' || parentId === null ? {
+        or: [{
+          [parentFieldName]: {
+            exists: false
+          }
+        }, {
+          [parentFieldName]: {
+            equals: null
+          }
+        }]
+      } : {
+        [parentFieldName]: {
+          equals: parentId
+        }
+      };
+      // Build filter condition for collection type filtering
+      // Matches items that:
+      // - allow ANY of the selected collections, OR
+      // - are unrestricted (type field doesn't exist), OR
+      // - have empty allowedTypes array (unrestricted)
+      const filterCondition = filterByCollections?.length && typeFieldName ? {
+        or: [{
+          [typeFieldName]: {
+            in: filterByCollections
+          }
+        }, {
+          [typeFieldName]: {
+            exists: false
+          }
+        },
+        // Using not_in with all possible values matches empty arrays in both MongoDB and Postgres
+        ...(allPossibleTypeValues?.length ? [{
+          [typeFieldName]: {
+            not_in: allPossibleTypeValues
+          }
+        }] : [])]
+      } : undefined;
+      // Combine conditions: parent + filter + baseFilter
+      const where = combineWhereConstraints([parentCondition, filterCondition, baseFilter]);
+      const queryParams = {
+        limit,
+        page: pageToFetch,
+        sort: useAsTitle ?? 'id',
+        where
+      };
+      const queryString = qs.stringify(queryParams, {
+        addQueryPrefix: true
+      });
+      const url = formatAdminURL({
+        apiRoute: api,
+        path: `/${collectionSlug}${queryString}`,
+        serverURL
+      });
+      const response = await fetch(url, {
+        credentials: 'include'
+      });
+      if (!response.ok) {
+        throw new Error('Failed to fetch children');
+      }
+      const data = await response.json();
+      const allDocs = data.docs || [];
+      // Client-side filter: only show items that are a superset of required collections
+      // Server query uses ANY (due to PG limitations), but we want ALL (superset)
+      const newDocs = filterByCollections?.length && typeFieldName ? allDocs.filter(doc => isSuperset(doc[typeFieldName], filterByCollections)) : allDocs;
+      const newChildren = pageToFetch === 1 ? newDocs : [...(currentChildren || []), ...newDocs];
+      setChildren(newChildren);
+      setTotalDocs(data.totalDocs || 0);
+      setHasMore(data.hasNextPage || false);
+      setPage(pageToFetch);
+      if (cache) {
+        cache.current.set(cacheKey, {
+          children: newChildren,
+          hasMore: data.hasNextPage || false,
+          page: pageToFetch,
+          totalDocs: data.totalDocs || 0
+        });
+      }
+      return newDocs;
+    } catch {
+      if (pageToFetch === 1) {
+        const emptyChildren = [];
+        setChildren(emptyChildren);
+        setHasMore(false);
+        if (cache) {
+          cache.current.set(cacheKey, {
+            children: emptyChildren,
+            hasMore: false,
+            page: 1,
+            totalDocs: 0
+          });
+        }
+      }
+      return [];
+    } finally {
+      setIsLoading(false);
+    }
+  }, [allPossibleTypeValues, baseFilter, parentId, parentFieldName, filterByCollections, typeFieldName, limit, useAsTitle, api, collectionSlug, serverURL, cache, cacheKey]);
+  // Reset state and reload when filter changes
+  const prevFilterKeyRef = useRef(filterKey);
+  useEffect(() => {
+    if (prevFilterKeyRef.current !== filterKey) {
+      prevFilterKeyRef.current = filterKey;
+      setChildren(null);
+      setPage(1);
+      setTotalDocs(0);
+      setHasMore(false);
+      // If the node is currently expanded, immediately reload with the new filter
+      if (enabled) {
+        void fetchPage(1, null);
+      }
+    }
+  }, [filterKey, enabled, fetchPage]);
+  // Load children explicitly. Safe to call multiple times — no-ops if already loaded or loading.
+  const load = useCallback(async () => {
+    // Consume initialData on first call without re-fetching
+    if (initializedRef.current && childrenRef.current !== null) {
+      initializedRef.current = false;
+      return childrenRef.current;
+    }
+    // Already loaded
+    if (childrenRef.current !== null) {
+      return childrenRef.current;
+    }
+    // Guard against concurrent calls
+    if (isLoadingRef.current) {
+      return [];
+    }
+    // Restore from cache when available (e.g., after a filter reset)
+    const currentCachedData = cache?.current.get(cacheKey);
+    if (currentCachedData) {
+      setChildren(currentCachedData.children);
+      setPage(currentCachedData.page);
+      setTotalDocs(currentCachedData.totalDocs);
+      setHasMore(currentCachedData.hasMore);
+      return currentCachedData.children;
+    }
+    return fetchPage(1, null);
+  }, [cache, cacheKey, fetchPage]);
+  const loadMore = useCallback(async () => {
+    if (isLoading || !hasMore) {
+      return [];
+    }
+    // If we have fewer items than our limit, the cached data was fetched with a smaller limit
+    // We need to re-fetch page 1 with our limit to get the full first page
+    const shouldRefetchPage1 = children && children.length < limit;
+    return fetchPage(shouldRefetchPage1 ? 1 : page + 1, children);
+  }, [isLoading, hasMore, page, children, fetchPage, limit]);
+  const refresh = useCallback(async () => {
+    if (cache) {
+      cache.current.delete(cacheKey);
+    }
+    setChildren(null);
+    setPage(1);
+    return fetchPage(1, null);
+  }, [cache, cacheKey, fetchPage]);
+  // If state hasn't been loaded yet, read directly from cache as a synchronous fallback.
+  // Tree's useMemo pre-populates the cache before child TreeNodes render, so this eliminates
+  // the brief null-children flash that occurs when a node becomes expanded after context updates.
+  const effectiveChildren = children ?? cache?.current.get(cacheKey)?.children ?? null;
+  return {
+    children: effectiveChildren,
+    hasMore,
+    isLoading,
+    load,
+    loadMore,
+    refresh,
+    totalDocs
+  };
+};
+//# sourceMappingURL=useChildren.js.map

package/dist/elements/Hierarchy/Tree/useChildren.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChildren.js","names":["combineWhereConstraints","formatAdminURL","qs","useCallback","useEffect","useRef","useState","useConfig","isSuperset","useChildren","allPossibleTypeValues","baseFilter","cache","cacheKey","cacheKeyProp","collectionSlug","enabled","filterByCollections","initialData","limit","parentFieldName","parentId","typeFieldName","useAsTitle","filterKey","length","slice","sort","join","baseFilterKey","JSON","stringify","String","cachedData","current","get","parentKey","parentMeta","loadedParents","hasInitialData","initialDocsForParent","docs","filter","doc","docParent","children","setChildren","isLoading","setIsLoading","page","setPage","totalDocs","setTotalDocs","hasMore","setHasMore","initializedRef","childrenRef","isLoadingRef","config","routes","api","serverURL","fetchPage","pageToFetch","currentChildren","parentCondition","or","exists","equals","filterCondition","in","not_in","undefined","where","queryParams","queryString","addQueryPrefix","url","apiRoute","path","response","fetch","credentials","ok","Error","data","json","allDocs","newDocs","newChildren","hasNextPage","set","emptyChildren","prevFilterKeyRef","load","currentCachedData","loadMore","shouldRefetchPage1","refresh","delete","effectiveChildren"],"sources":["../../../../src/elements/Hierarchy/Tree/useChildren.tsx"],"sourcesContent":["import type { Where } from 'payload'\n\nimport { combineWhereConstraints, formatAdminURL } from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type { TreeCache, TreeDocument, TreeInitialData } from './types.js'\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { isSuperset } from '../../../utilities/isSuperset.js'\n\ntype UseChildrenArgs = {\n  allPossibleTypeValues?: string[]\n  /** Base filter to apply to all queries (e.g., tenant filter) */\n  baseFilter?: null | Where\n  cache?: TreeCache\n  /** Pre-computed cache key to ensure consistency with cache population */\n  cacheKey?: string\n  collectionSlug: string\n  enabled?: boolean\n  filterByCollections?: string[]\n  initialData?: null | TreeInitialData\n  limit?: number\n  parentFieldName: string\n  parentId: number | string\n  typeFieldName?: null | string\n  useAsTitle?: string\n}\n\ntype UseChildrenReturn = {\n  children: null | TreeDocument[]\n  hasMore: boolean\n  isLoading: boolean\n  /** Explicitly load children. Safe to call multiple times — no-ops if already loaded. */\n  load: () => Promise<TreeDocument[]>\n  loadMore: () => Promise<TreeDocument[]>\n  refresh: () => Promise<TreeDocument[]>\n  totalDocs: number\n}\n\nexport const useChildren = ({\n  allPossibleTypeValues,\n  baseFilter,\n  cache,\n  cacheKey: cacheKeyProp,\n  collectionSlug,\n  enabled = true,\n  filterByCollections,\n  initialData,\n  limit = 2,\n  parentFieldName,\n  parentId,\n  typeFieldName,\n  useAsTitle,\n}: UseChildrenArgs): UseChildrenReturn => {\n  const filterKey = filterByCollections?.length ? filterByCollections.slice().sort().join(',') : ''\n  const baseFilterKey = baseFilter ? JSON.stringify(baseFilter) : ''\n  // Use provided cacheKey for consistency with cache population, or compute if not provided\n  const cacheKey =\n    cacheKeyProp ?? `${collectionSlug}-${String(parentId)}-${filterKey}-${baseFilterKey}`\n  const cachedData = cache?.current.get(cacheKey)\n\n  // Check if we have initial data for this specific parent\n  const parentKey = parentId === 'null' ? 'null' : String(parentId)\n  const parentMeta = initialData?.loadedParents?.[parentKey]\n  const hasInitialData = !!parentMeta\n\n  // Extract docs for this parent from initialData if available\n  // Apply same superset filter as fetchPage for consistency\n  const initialDocsForParent = hasInitialData\n    ? initialData.docs.filter((doc) => {\n        const docParent = doc[parentFieldName] || 'null'\n        if (String(docParent) !== parentKey) {\n          return false\n        }\n        if (filterByCollections?.length && typeFieldName) {\n          return isSuperset(doc[typeFieldName] as string[] | undefined, filterByCollections)\n        }\n        return true\n      })\n    : null\n\n  const [children, setChildren] = useState<null | TreeDocument[]>(\n    initialDocsForParent || cachedData?.children || null,\n  )\n  const [isLoading, setIsLoading] = useState(false)\n  const [page, setPage] = useState(cachedData?.page || 1)\n  const [totalDocs, setTotalDocs] = useState(parentMeta?.totalDocs || cachedData?.totalDocs || 0)\n  const [hasMore, setHasMore] = useState(parentMeta?.hasMore || cachedData?.hasMore || false)\n  const initializedRef = useRef(!!hasInitialData)\n  // Refs for stable access inside load() without adding state to its dep array\n  const childrenRef = useRef(children)\n  childrenRef.current = children\n  const isLoadingRef = useRef(isLoading)\n  isLoadingRef.current = isLoading\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const fetchPage = useCallback(\n    async (\n      pageToFetch: number,\n      currentChildren: null | TreeDocument[],\n    ): Promise<TreeDocument[]> => {\n      setIsLoading(true)\n\n      try {\n        const parentCondition =\n          parentId === 'null' || parentId === null\n            ? {\n                or: [\n                  { [parentFieldName]: { exists: false } },\n                  { [parentFieldName]: { equals: null } },\n                ],\n              }\n            : { [parentFieldName]: { equals: parentId } }\n\n        // Build filter condition for collection type filtering\n        // Matches items that:\n        // - allow ANY of the selected collections, OR\n        // - are unrestricted (type field doesn't exist), OR\n        // - have empty allowedTypes array (unrestricted)\n        const filterCondition: undefined | Where =\n          filterByCollections?.length && typeFieldName\n            ? {\n                or: [\n                  { [typeFieldName]: { in: filterByCollections } },\n                  { [typeFieldName]: { exists: false } },\n                  // Using not_in with all possible values matches empty arrays in both MongoDB and Postgres\n                  ...(allPossibleTypeValues?.length\n                    ? [{ [typeFieldName]: { not_in: allPossibleTypeValues } }]\n                    : []),\n                ],\n              }\n            : undefined\n\n        // Combine conditions: parent + filter + baseFilter\n        const where = combineWhereConstraints([parentCondition, filterCondition, baseFilter])\n\n        const queryParams: Record<string, unknown> = {\n          limit,\n          page: pageToFetch,\n          sort: useAsTitle ?? 'id',\n          where,\n        }\n\n        const queryString = qs.stringify(queryParams, { addQueryPrefix: true })\n        const url = formatAdminURL({\n          apiRoute: api,\n          path: `/${collectionSlug}${queryString}`,\n          serverURL,\n        })\n        const response = await fetch(url, {\n          credentials: 'include',\n        })\n\n        if (!response.ok) {\n          throw new Error('Failed to fetch children')\n        }\n\n        const data = await response.json()\n        const allDocs: TreeDocument[] = data.docs || []\n\n        // Client-side filter: only show items that are a superset of required collections\n        // Server query uses ANY (due to PG limitations), but we want ALL (superset)\n        const newDocs =\n          filterByCollections?.length && typeFieldName\n            ? allDocs.filter((doc) =>\n                isSuperset(doc[typeFieldName] as string[] | undefined, filterByCollections),\n              )\n            : allDocs\n\n        const newChildren = pageToFetch === 1 ? newDocs : [...(currentChildren || []), ...newDocs]\n\n        setChildren(newChildren)\n        setTotalDocs(data.totalDocs || 0)\n        setHasMore(data.hasNextPage || false)\n        setPage(pageToFetch)\n\n        if (cache) {\n          cache.current.set(cacheKey, {\n            children: newChildren,\n            hasMore: data.hasNextPage || false,\n            page: pageToFetch,\n            totalDocs: data.totalDocs || 0,\n          })\n        }\n\n        return newDocs\n      } catch {\n        if (pageToFetch === 1) {\n          const emptyChildren: TreeDocument[] = []\n          setChildren(emptyChildren)\n          setHasMore(false)\n\n          if (cache) {\n            cache.current.set(cacheKey, {\n              children: emptyChildren,\n              hasMore: false,\n              page: 1,\n              totalDocs: 0,\n            })\n          }\n        }\n\n        return []\n      } finally {\n        setIsLoading(false)\n      }\n    },\n    [\n      allPossibleTypeValues,\n      baseFilter,\n      parentId,\n      parentFieldName,\n      filterByCollections,\n      typeFieldName,\n      limit,\n      useAsTitle,\n      api,\n      collectionSlug,\n      serverURL,\n      cache,\n      cacheKey,\n    ],\n  )\n\n  // Reset state and reload when filter changes\n  const prevFilterKeyRef = useRef(filterKey)\n  useEffect(() => {\n    if (prevFilterKeyRef.current !== filterKey) {\n      prevFilterKeyRef.current = filterKey\n      setChildren(null)\n      setPage(1)\n      setTotalDocs(0)\n      setHasMore(false)\n      // If the node is currently expanded, immediately reload with the new filter\n      if (enabled) {\n        void fetchPage(1, null)\n      }\n    }\n  }, [filterKey, enabled, fetchPage])\n\n  // Load children explicitly. Safe to call multiple times — no-ops if already loaded or loading.\n  const load = useCallback(async (): Promise<TreeDocument[]> => {\n    // Consume initialData on first call without re-fetching\n    if (initializedRef.current && childrenRef.current !== null) {\n      initializedRef.current = false\n      return childrenRef.current\n    }\n\n    // Already loaded\n    if (childrenRef.current !== null) {\n      return childrenRef.current\n    }\n\n    // Guard against concurrent calls\n    if (isLoadingRef.current) {\n      return []\n    }\n\n    // Restore from cache when available (e.g., after a filter reset)\n    const currentCachedData = cache?.current.get(cacheKey)\n    if (currentCachedData) {\n      setChildren(currentCachedData.children)\n      setPage(currentCachedData.page)\n      setTotalDocs(currentCachedData.totalDocs)\n      setHasMore(currentCachedData.hasMore)\n      return currentCachedData.children\n    }\n\n    return fetchPage(1, null)\n  }, [cache, cacheKey, fetchPage])\n\n  const loadMore = useCallback(async (): Promise<TreeDocument[]> => {\n    if (isLoading || !hasMore) {\n      return []\n    }\n\n    // If we have fewer items than our limit, the cached data was fetched with a smaller limit\n    // We need to re-fetch page 1 with our limit to get the full first page\n    const shouldRefetchPage1 = children && children.length < limit\n\n    return fetchPage(shouldRefetchPage1 ? 1 : page + 1, children)\n  }, [isLoading, hasMore, page, children, fetchPage, limit])\n\n  const refresh = useCallback(async (): Promise<TreeDocument[]> => {\n    if (cache) {\n      cache.current.delete(cacheKey)\n    }\n    setChildren(null)\n    setPage(1)\n    return fetchPage(1, null)\n  }, [cache, cacheKey, fetchPage])\n  // If state hasn't been loaded yet, read directly from cache as a synchronous fallback.\n  // Tree's useMemo pre-populates the cache before child TreeNodes render, so this eliminates\n  // the brief null-children flash that occurs when a node becomes expanded after context updates.\n  const effectiveChildren = children ?? cache?.current.get(cacheKey)?.children ?? null\n\n  return { children: effectiveChildren, hasMore, isLoading, load, loadMore, refresh, totalDocs }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/HierarchyTypeField/index.d.ts

@@ -0,0 +1,9 @@
+import type { Option, SelectFieldClientProps } from 'payload';
+import React from 'react';
+type HierarchyTypeFieldProps = {
+    options: Option[];
+    parentFieldName: string;
+} & SelectFieldClientProps;
+export declare const HierarchyTypeField: React.FC<HierarchyTypeFieldProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/HierarchyTypeField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/HierarchyTypeField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAgB,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAE3E,OAAO,KAA+B,MAAM,OAAO,CAAA;AASnD,KAAK,uBAAuB,GAAG;IAC7B,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,eAAe,EAAE,MAAM,CAAA;CACxB,GAAG,sBAAsB,CAAA;AAE1B,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAyHhE,CAAA"}

package/dist/elements/HierarchyTypeField/index.js

@@ -0,0 +1,117 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from 'react';
+import { mergeFieldStyles } from '../../fields/mergeFieldStyles.js';
+import { formatOptions, SelectInput } from '../../fields/Select/index.js';
+import { useField } from '../../forms/useField/index.js';
+import { useHierarchy } from '../../providers/Hierarchy/index.js';
+export const HierarchyTypeField = ({
+  options: allSelectOptions,
+  parentFieldName,
+  ...props
+}) => {
+  const {
+    field,
+    field: {
+      name,
+      admin: {
+        className,
+        isClearable = true,
+        isSortable = true,
+        placeholder
+      } = {},
+      hasMany = false,
+      label,
+      localized,
+      required
+    },
+    onChange: onChangeFromProps,
+    path: pathFromProps,
+    readOnly,
+    validate
+  } = props;
+  const {
+    allowedCollections
+  } = useHierarchy();
+  const options = useMemo(() => {
+    if (!allowedCollections || allowedCollections.length === 0) {
+      return formatOptions(allSelectOptions);
+    }
+    return formatOptions(allSelectOptions.filter(option => {
+      if (typeof option === 'object' && 'value' in option && option.value) {
+        return allowedCollections.some(c => c.slug === option.value);
+      }
+      return true;
+    }));
+  }, [allSelectOptions, allowedCollections]);
+  const {
+    customComponents: {
+      AfterInput,
+      BeforeInput,
+      Description,
+      Error,
+      Label
+    } = {},
+    disabled,
+    path,
+    selectFilterOptions,
+    setValue,
+    showError,
+    value
+  } = useField({
+    potentiallyStalePath: pathFromProps,
+    validate
+  });
+  const onChange = useCallback(selectedOption => {
+    if (readOnly || disabled) {
+      return;
+    }
+    let newValue = null;
+    if (selectedOption && hasMany) {
+      if (Array.isArray(selectedOption)) {
+        newValue = selectedOption.map(option_0 => option_0.value);
+      } else {
+        newValue = [];
+      }
+    } else if (selectedOption && !Array.isArray(selectedOption)) {
+      newValue = selectedOption.value;
+    }
+    if (typeof onChangeFromProps === 'function') {
+      onChangeFromProps(newValue);
+    }
+    setValue(newValue);
+  }, [readOnly, disabled, hasMany, setValue, onChangeFromProps]);
+  const styles = useMemo(() => mergeFieldStyles(field), [field]);
+  const isRequired = required || Array.isArray(allowedCollections) && allowedCollections.length > 0;
+  return /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(SelectInput, {
+      AfterInput: AfterInput,
+      BeforeInput: BeforeInput,
+      className: className,
+      Description: Description,
+      description: "Select the collection types this item can contain",
+      Error: Error,
+      filterOption: selectFilterOptions ? ({
+        value: optionValue
+      }) => selectFilterOptions?.some(option_1 => (typeof option_1 === 'string' ? option_1 : option_1.value) === optionValue) : undefined,
+      hasMany: hasMany,
+      isClearable: isClearable,
+      isSortable: isSortable,
+      Label: Label,
+      label: label,
+      localized: localized,
+      name: name,
+      onChange: onChange,
+      options: options,
+      path: path,
+      placeholder: placeholder,
+      readOnly: readOnly || disabled,
+      required: isRequired,
+      showError: showError,
+      style: styles,
+      value: value
+    })
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/HierarchyTypeField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","useMemo","mergeFieldStyles","formatOptions","SelectInput","useField","useHierarchy","HierarchyTypeField","options","allSelectOptions","parentFieldName","props","field","name","admin","className","isClearable","isSortable","placeholder","hasMany","label","localized","required","onChange","onChangeFromProps","path","pathFromProps","readOnly","validate","allowedCollections","length","filter","option","value","some","c","slug","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","selectFilterOptions","setValue","showError","potentiallyStalePath","selectedOption","newValue","Array","isArray","map","styles","isRequired","_jsx","description","filterOption","optionValue","undefined","style"],"sources":["../../../src/elements/HierarchyTypeField/index.tsx"],"sourcesContent":["'use client'\nimport type { Option, OptionObject, SelectFieldClientProps } from 'payload'\n\nimport React, { useCallback, useMemo } from 'react'\n\nimport type { ReactSelectAdapterProps } from '../ReactSelect/types.js'\n\nimport { mergeFieldStyles } from '../../fields/mergeFieldStyles.js'\nimport { formatOptions, SelectInput } from '../../fields/Select/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { useHierarchy } from '../../providers/Hierarchy/index.js'\n\ntype HierarchyTypeFieldProps = {\n  options: Option[]\n  parentFieldName: string\n} & SelectFieldClientProps\n\nexport const HierarchyTypeField: React.FC<HierarchyTypeFieldProps> = ({\n  options: allSelectOptions,\n  parentFieldName,\n  ...props\n}) => {\n  const {\n    field,\n    field: {\n      name,\n      admin: { className, isClearable = true, isSortable = true, placeholder } = {} as NonNullable<\n        SelectFieldClientProps['field']['admin']\n      >,\n      hasMany = false,\n      label,\n      localized,\n      required,\n    },\n    onChange: onChangeFromProps,\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const { allowedCollections } = useHierarchy()\n\n  const options = useMemo(() => {\n    if (!allowedCollections || allowedCollections.length === 0) {\n      return formatOptions(allSelectOptions)\n    }\n\n    return formatOptions(\n      allSelectOptions.filter((option) => {\n        if (typeof option === 'object' && 'value' in option && option.value) {\n          return allowedCollections.some((c) => c.slug === option.value)\n        }\n        return true\n      }),\n    )\n  }, [allSelectOptions, allowedCollections])\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    selectFilterOptions,\n    setValue,\n    showError,\n    value,\n  } = useField({\n    potentiallyStalePath: pathFromProps,\n    validate,\n  })\n\n  const onChange: ReactSelectAdapterProps['onChange'] = useCallback(\n    (selectedOption: OptionObject | OptionObject[]) => {\n      if (readOnly || disabled) {\n        return\n      }\n\n      let newValue: null | string | string[] = null\n\n      if (selectedOption && hasMany) {\n        if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => option.value)\n        } else {\n          newValue = []\n        }\n      } else if (selectedOption && !Array.isArray(selectedOption)) {\n        newValue = selectedOption.value\n      }\n\n      if (typeof onChangeFromProps === 'function') {\n        onChangeFromProps(newValue)\n      }\n\n      setValue(newValue)\n    },\n    [readOnly, disabled, hasMany, setValue, onChangeFromProps],\n  )\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  const isRequired =\n    required || (Array.isArray(allowedCollections) && allowedCollections.length > 0)\n\n  return (\n    <div>\n      <SelectInput\n        AfterInput={AfterInput}\n        BeforeInput={BeforeInput}\n        className={className}\n        Description={Description}\n        description=\"Select the collection types this item can contain\"\n        Error={Error}\n        filterOption={\n          selectFilterOptions\n            ? ({ value: optionValue }) =>\n                selectFilterOptions?.some(\n                  (option) => (typeof option === 'string' ? option : option.value) === optionValue,\n                )\n            : undefined\n        }\n        hasMany={hasMany}\n        isClearable={isClearable}\n        isSortable={isSortable}\n        Label={Label}\n        label={label}\n        localized={localized}\n        name={name}\n        onChange={onChange}\n        options={options}\n        path={path}\n        placeholder={placeholder}\n        readOnly={readOnly || disabled}\n        required={isRequired}\n        showError={showError}\n        style={styles}\n        value={value as string | string[]}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/HierarchyTypeField/index.server.d.ts

@@ -0,0 +1,9 @@
+import type { Option, SelectFieldServerProps } from 'payload';
+import React from 'react';
+type HierarchyTypeFieldServerProps = {
+    collectionOptions: Option[];
+    parentFieldName: string;
+} & SelectFieldServerProps;
+export declare const HierarchyTypeFieldServer: React.FC<HierarchyTypeFieldServerProps>;
+export {};
+//# sourceMappingURL=index.server.d.ts.map

package/dist/elements/HierarchyTypeField/index.server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.server.d.ts","sourceRoot":"","sources":["../../../src/elements/HierarchyTypeField/index.server.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAG7D,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,KAAK,6BAA6B,GAAG;IACnC,iBAAiB,EAAE,MAAM,EAAE,CAAA;IAC3B,eAAe,EAAE,MAAM,CAAA;CACxB,GAAG,sBAAsB,CAAA;AAE1B,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA6B5E,CAAA"}

package/dist/elements/HierarchyTypeField/index.server.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import React from 'react';
+// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary
+import { HierarchyTypeField } from '../../exports/client/index.js';
+export const HierarchyTypeFieldServer = ({
+  clientField,
+  collectionOptions,
+  i18n,
+  parentFieldName,
+  path,
+  permissions,
+  readOnly
+}) => {
+  const translatedOptions = collectionOptions.map(option => {
+    if (typeof option === 'object' && 'label' in option) {
+      return {
+        ...option,
+        label: getTranslation(option.label, i18n)
+      };
+    }
+    return option;
+  });
+  return /*#__PURE__*/_jsx(HierarchyTypeField, {
+    field: clientField,
+    options: translatedOptions,
+    parentFieldName: parentFieldName,
+    path: path,
+    permissions: permissions,
+    readOnly: readOnly
+  });
+};
+//# sourceMappingURL=index.server.js.map

package/dist/elements/HierarchyTypeField/index.server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.server.js","names":["getTranslation","React","HierarchyTypeField","HierarchyTypeFieldServer","clientField","collectionOptions","i18n","parentFieldName","path","permissions","readOnly","translatedOptions","map","option","label","_jsx","field","options"],"sources":["../../../src/elements/HierarchyTypeField/index.server.tsx"],"sourcesContent":["import type { Option, SelectFieldServerProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\n// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary\nimport { HierarchyTypeField } from '../../exports/client/index.js'\n\ntype HierarchyTypeFieldServerProps = {\n  collectionOptions: Option[]\n  parentFieldName: string\n} & SelectFieldServerProps\n\nexport const HierarchyTypeFieldServer: React.FC<HierarchyTypeFieldServerProps> = ({\n  clientField,\n  collectionOptions,\n  i18n,\n  parentFieldName,\n  path,\n  permissions,\n  readOnly,\n}) => {\n  const translatedOptions: Option[] = collectionOptions.map((option) => {\n    if (typeof option === 'object' && 'label' in option) {\n      return {\n        ...option,\n        label: getTranslation(option.label, i18n),\n      }\n    }\n    return option\n  })\n\n  return (\n    <HierarchyTypeField\n      field={clientField}\n      options={translatedOptions}\n      parentFieldName={parentFieldName}\n      path={path}\n      permissions={permissions}\n      readOnly={readOnly}\n    />\n  )\n}\n"],"mappings":";AAEA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB;AACA,SAASC,kBAAkB,QAAQ;AAOnC,OAAO,MAAMC,wBAAA,GAAoEA,CAAC;EAChFC,WAAW;EACXC,iBAAiB;EACjBC,IAAI;EACJC,eAAe;EACfC,IAAI;EACJC,WAAW;EACXC;AAAQ,CACT;EACC,MAAMC,iBAAA,GAA8BN,iBAAA,CAAkBO,GAAG,CAAEC,MAAA;IACzD,IAAI,OAAOA,MAAA,KAAW,YAAY,WAAWA,MAAA,EAAQ;MACnD,OAAO;QACL,GAAGA,MAAM;QACTC,KAAA,EAAOd,cAAA,CAAea,MAAA,CAAOC,KAAK,EAAER,IAAA;MACtC;IACF;IACA,OAAOO,MAAA;EACT;EAEA,oBACEE,IAAA,CAACb,kBAAA;IACCc,KAAA,EAAOZ,WAAA;IACPa,OAAA,EAASN,iBAAA;IACTJ,eAAA,EAAiBA,eAAA;IACjBC,IAAA,EAAMA,IAAA;IACNC,WAAA,EAAaA,WAAA;IACbC,QAAA,EAAUA;;AAGhB","ignoreList":[]}

package/dist/elements/IDLabel/index.css

@@ -0,0 +1,36 @@
+@layer payload-default {
+  .id-label {
+    --id-label-letter-spacing: -0.032px;
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    height: var(--spacer-4);
+    padding: var(--spacer-1) var(--spacer-2);
+    background: var(--color-bg-secondary);
+    border-radius: var(--radius-medium);
+    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-medium-line-height);
+    letter-spacing: var(--id-label-letter-spacing);
+    width: fit-content;
+    white-space: nowrap;
+  }
+
+  .id-label__prefix {
+    color: var(--color-text-secondary);
+  }
+
+  .id-label__value {
+    color: var(--color-text);
+  }
+
+  .id-label__link {
+    color: var(--color-text);
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

package/dist/elements/IDLabel/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const IDLabel: React.FC<{
     className?: string;
     id: string;

package/dist/elements/IDLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/IDLabel/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAUrB,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CA0BjF,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/IDLabel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAyCjF,CAAA"}

package/dist/elements/IDLabel/index.js

@@ -2,23 +2,23 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatAdminURL } from 'payload/shared';
 import React from 'react';
-import './index.scss';
 import { Link } from '../../elements/Link/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
-import { formatAdminURL } from '../../utilities/formatAdminURL.js';
 import { sanitizeID } from '../../utilities/sanitizeID.js';
 import { useDrawerDepth } from '../Drawer/index.js';
+import './index.css';
 const baseClass = 'id-label';
 export const IDLabel = t0 => {
-  const $ = _c(9);
+  const $ = _c(13);
   const {
     id,
     className,
     prefix: t1
   } = t0;
-  const prefix = t1 === undefined ? "ID:" : t1;
+  const prefix = t1 === undefined ? "ID" : t1;
   const {
     config: t2
   } = useConfig();
@@ -33,39 +33,76 @@ export const IDLabel = t0 => {
     globalSlug
   } = useDocumentInfo();
   const drawerDepth = useDrawerDepth();
-  const t4 = `/${collectionSlug ? `collections/${collectionSlug}` : `globals/${globalSlug}`}/${id}`;
+  let t4;
   let t5;
-  if ($[0] !== adminRoute || $[1] !== className || $[2] !== drawerDepth || $[3] !== id || $[4] !== prefix || $[5] !== t4) {
-    const docPath = formatAdminURL({
-      adminRoute,
-      path: t4
-    });
-    let t6;
-    if ($[7] !== className) {
-      t6 = [baseClass, className].filter(Boolean);
-      $[7] = className;
-      $[8] = t6;
-    } else {
-      t6 = $[8];
+  if ($[0] !== adminRoute || $[1] !== className || $[2] !== collectionSlug || $[3] !== drawerDepth || $[4] !== globalSlug || $[5] !== id || $[6] !== prefix) {
+    t5 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const sanitizedID = sanitizeID(id);
+      const shouldRenderLink = drawerDepth > 0 && (collectionSlug || globalSlug);
+      if (shouldRenderLink) {
+        const docPath = formatAdminURL({
+          adminRoute,
+          path: `/${collectionSlug ? `collections/${collectionSlug}` : `globals/${globalSlug}`}/${id}`
+        });
+        let t6;
+        if ($[9] !== className) {
+          t6 = [baseClass, className].filter(Boolean);
+          $[9] = className;
+          $[10] = t6;
+        } else {
+          t6 = $[10];
+        }
+        t5 = _jsxs("div", {
+          className: t6.join(" "),
+          title: id,
+          children: [_jsx("span", {
+            className: `${baseClass}__prefix`,
+            children: prefix
+          }), _jsx(Link, {
+            className: `${baseClass}__link`,
+            href: docPath,
+            children: sanitizedID
+          })]
+        });
+        break bb0;
+      }
+      let t6;
+      if ($[11] !== className) {
+        t6 = [baseClass, className].filter(Boolean);
+        $[11] = className;
+        $[12] = t6;
+      } else {
+        t6 = $[12];
+      }
+      t4 = _jsxs("div", {
+        className: t6.join(" "),
+        title: id,
+        children: [_jsx("span", {
+          className: `${baseClass}__prefix`,
+          children: prefix
+        }), _jsx("span", {
+          className: `${baseClass}__value`,
+          children: sanitizedID
+        })]
+      });
     }
-    t5 = _jsxs("div", {
-      className: t6.join(" "),
-      title: id,
-      children: [prefix, "\xA0", drawerDepth > 1 ? _jsx(Link, {
-        href: docPath,
-        children: sanitizeID(id)
-      }) : sanitizeID(id)]
-    });
     $[0] = adminRoute;
     $[1] = className;
-    $[2] = drawerDepth;
-    $[3] = id;
-    $[4] = prefix;
-    $[5] = t4;
-    $[6] = t5;
+    $[2] = collectionSlug;
+    $[3] = drawerDepth;
+    $[4] = globalSlug;
+    $[5] = id;
+    $[6] = prefix;
+    $[7] = t4;
+    $[8] = t5;
   } else {
-    t5 = $[6];
+    t4 = $[7];
+    t5 = $[8];
   }
-  return t5;
+  if (t5 !== Symbol.for("react.early_return_sentinel")) {
+    return t5;
+  }
+  return t4;
 };
 //# sourceMappingURL=index.js.map