@payloadcms/ui 4.0.0-canary.1 → 4.0.0-canary.11

package/dist/elements/Table/DefaultCell/fields/Hierarchy/index.js

@@ -10,7 +10,7 @@ import { useTranslation } from '../../../../../providers/Translation/index.js';
 import { canUseDOM } from '../../../../../utilities/canUseDOM.js';
 import { formatDocTitle } from '../../../../../utilities/formatDocTitle/index.js';
 import { Button } from '../../../../Button/index.js';
-import { useHierarchyDrawer } from '../../../../Hierarchy/Drawer/useHierarchyDrawer.js';
+import { useHierarchyModal } from '../../../../Hierarchy/Modal/useHierarchyModal.js';
 import { useListRelationships } from '../../../RelationshipProvider/index.js';
 import './index.css';
 const baseClass = 'hierarchy-cell';
@@ -60,17 +60,36 @@ export const HierarchyCell = ({
     const IconComponent = hierarchyConfig?.allowHasMany === false ? FolderIcon : TagIcon;
     return /*#__PURE__*/_jsx(IconComponent, {});
   }, [hierarchyConfig, preRenderedIcon]);
-  // Full icon for drawer subheader
+  // Full icon for modal subheader
   const drawerIcon = preRenderedIcon || fallbackIcon;
   // Small icon for compact display (pill button)
   const displayIcon = preRenderedSmallIcon ?? drawerIcon;
-  // Set up the hierarchy drawer
-  const [HierarchyDrawer,, {
-    openDrawer
-  }] = useHierarchyDrawer({
+  // Set up the hierarchy modal
+  const [HierarchyModal,, {
+    openModal
+  }] = useHierarchyModal({
     hierarchyCollectionSlug: hierarchyCollectionSlug || '',
     Icon: drawerIcon
   });
+  // Lazy-mount the modal so its column browser doesn't eagerly fetch root items
+  // for every cell in the list view. Only mount once the user opens it.
+  const [hasMountedModal, setHasMountedModal] = useState(false);
+  const shouldOpenAfterMountRef = useRef(false);
+  const handleOpenModal = useCallback(() => {
+    if (hasMountedModal) {
+      openModal();
+      return;
+    }
+    shouldOpenAfterMountRef.current = true;
+    setHasMountedModal(true);
+  }, [hasMountedModal, openModal]);
+  // Open the modal once it has mounted (state update from handleOpenModal).
+  useEffect(() => {
+    if (hasMountedModal && shouldOpenAfterMountRef.current) {
+      shouldOpenAfterMountRef.current = false;
+      openModal();
+    }
+  }, [hasMountedModal, openModal]);
   // Fetch relationship data when visible
   useEffect(() => {
     // Reset tracking if data changed
@@ -97,7 +116,7 @@ export const HierarchyCell = ({
       setValues(formattedValues);
     }
   }, [cellDataFromProps, relationTo, isAboveViewport, getRelationships]);
-  // Get current selection IDs for the drawer
+  // Get current selection IDs for the modal
   const initialSelections = useMemo(() => {
     if (!cellDataFromProps) {
       return [];
@@ -110,9 +129,9 @@ export const HierarchyCell = ({
       return item;
     });
   }, [cellDataFromProps]);
-  // Handle save from drawer
+  // Handle save from modal
   const handleSave = useCallback(async ({
-    closeDrawer,
+    closeModal,
     selections
   }) => {
     // Get selected IDs
@@ -143,9 +162,9 @@ export const HierarchyCell = ({
         }
       }
     } catch (_error) {
-      // swallow error and close drawer anyway, user can try again
+      // swallow error and close modal anyway, user can try again
     }
-    closeDrawer();
+    closeModal();
   }, [collectionSlug, config, field.name, hasMany, rowData, relationTo, getRelationships]);
   // Build display labels
   const labels = useMemo(() => {
@@ -180,10 +199,10 @@ export const HierarchyCell = ({
       icon: displayIcon,
       iconPosition: "left",
       margin: false,
-      onClick: openDrawer,
+      onClick: handleOpenModal,
       size: "medium",
       children: isLoading ? `${t('general:loading')}...` : displayText
-    }), hierarchyCollectionSlug && /*#__PURE__*/_jsx(HierarchyDrawer, {
+    }), hierarchyCollectionSlug && hasMountedModal && /*#__PURE__*/_jsx(HierarchyModal, {
       hasMany: hasMany,
       initialSelections: initialSelections,
       onSave: handleSave

package/dist/elements/Table/DefaultCell/fields/Hierarchy/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","useIntersect","FolderIcon","TagIcon","useConfig","useTranslation","canUseDOM","formatDocTitle","Button","useHierarchyDrawer","useListRelationships","baseClass","HierarchyCell","cellData","cellDataFromProps","collectionSlug","customCellProps","field","rowData","relationTo","undefined","hasMany","config","getEntityConfig","intersectionRef","entry","values","setValues","documents","getRelationships","hasRequestedRef","prevCellDataRef","i18n","t","isAboveViewport","boundingClientRect","top","window","innerHeight","hierarchyCollectionSlug","hierarchyCollectionConfig","hierarchyConfig","hierarchy","preRenderedIcon","hierarchyIcon","preRenderedSmallIcon","hierarchySmallIcon","fallbackIcon","IconComponent","allowHasMany","_jsx","drawerIcon","displayIcon","HierarchyDrawer","openDrawer","Icon","current","formattedValues","arrayCellData","Array","isArray","forEach","cell","push","value","initialSelections","data","map","item","handleSave","closeDrawer","selections","selectedIds","from","keys","newValue","response","fetch","serverURL","routes","api","id","body","JSON","stringify","name","credentials","headers","method","ok","newValues","length","_error","labels","rel","document","relatedCollection","collectionConfig","dateFormat","admin","fallback","displayText","join","isLoading","some","_jsxs","className","ref","buttonStyle","icon","iconPosition","margin","onClick","size","onSave"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Hierarchy/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps, RelationshipFieldClient } from 'payload'\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { SelectionWithPath } from '../../../../Hierarchy/Drawer/types.js'\n\nimport { useIntersect } from '../../../../../hooks/useIntersect.js'\nimport { FolderIcon } from '../../../../../icons/Folder/index.js'\nimport { TagIcon } from '../../../../../icons/Tag/index.js'\nimport { useConfig } from '../../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\nimport { canUseDOM } from '../../../../../utilities/canUseDOM.js'\nimport { formatDocTitle } from '../../../../../utilities/formatDocTitle/index.js'\nimport { Button } from '../../../../Button/index.js'\nimport { useHierarchyDrawer } from '../../../../Hierarchy/Drawer/useHierarchyDrawer.js'\nimport { useListRelationships } from '../../../RelationshipProvider/index.js'\nimport './index.css'\n\ntype Value = { relationTo: string; value: number | string }\nconst baseClass = 'hierarchy-cell'\n\nexport type HierarchyCellProps = DefaultCellComponentProps<RelationshipFieldClient>\n\nexport const HierarchyCell: React.FC<HierarchyCellProps> = ({\n  cellData: cellDataFromProps,\n  collectionSlug,\n  customCellProps,\n  field,\n  rowData,\n}) => {\n  const relationTo = 'relationTo' in field ? field.relationTo : undefined\n  const hasMany = field.hasMany ?? false\n\n  const { config, getEntityConfig } = useConfig()\n  const [intersectionRef, entry] = useIntersect()\n  const [values, setValues] = useState<Value[]>([])\n  const { documents, getRelationships } = useListRelationships()\n  const hasRequestedRef = useRef(false)\n  const prevCellDataRef = useRef<typeof cellDataFromProps>(undefined)\n  const { i18n, t } = useTranslation()\n\n  const isAboveViewport = canUseDOM ? entry?.boundingClientRect?.top < window.innerHeight : false\n\n  // Get the hierarchy collection config\n  const hierarchyCollectionSlug = typeof relationTo === 'string' ? relationTo : undefined\n  const hierarchyCollectionConfig = hierarchyCollectionSlug\n    ? getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n    : undefined\n\n  // Use pre-rendered icon from server if available, otherwise determine on client\n  const hierarchyConfig =\n    hierarchyCollectionConfig?.hierarchy && typeof hierarchyCollectionConfig.hierarchy === 'object'\n      ? hierarchyCollectionConfig.hierarchy\n      : undefined\n\n  // Pre-rendered icons from server (supports custom icons)\n  const preRenderedIcon = customCellProps?.hierarchyIcon as React.ReactNode | undefined\n  const preRenderedSmallIcon = customCellProps?.hierarchySmallIcon as React.ReactNode | undefined\n\n  // Fallback icon for client-side rendering\n  const fallbackIcon = useMemo(() => {\n    if (preRenderedIcon) {\n      return null // Don't need fallback if we have pre-rendered icon\n    }\n    // Default based on allowHasMany: false = folder-like, true = tag-like\n    const IconComponent = hierarchyConfig?.allowHasMany === false ? FolderIcon : TagIcon\n    return <IconComponent />\n  }, [hierarchyConfig, preRenderedIcon])\n\n  // Full icon for drawer subheader\n  const drawerIcon = preRenderedIcon || fallbackIcon\n  // Small icon for compact display (pill button)\n  const displayIcon = preRenderedSmallIcon ?? drawerIcon\n\n  // Set up the hierarchy drawer\n  const [HierarchyDrawer, , { openDrawer }] = useHierarchyDrawer({\n    hierarchyCollectionSlug: hierarchyCollectionSlug || '',\n    Icon: drawerIcon,\n  })\n\n  // Fetch relationship data when visible\n  useEffect(() => {\n    // Reset tracking if data changed\n    if (prevCellDataRef.current !== cellDataFromProps) {\n      prevCellDataRef.current = cellDataFromProps\n      hasRequestedRef.current = false\n    }\n\n    if (\n      (cellDataFromProps || typeof cellDataFromProps === 'number') &&\n      isAboveViewport &&\n      !hasRequestedRef.current &&\n      typeof relationTo === 'string'\n    ) {\n      const formattedValues: Value[] = []\n      const arrayCellData = Array.isArray(cellDataFromProps)\n        ? cellDataFromProps\n        : [cellDataFromProps]\n\n      arrayCellData.forEach((cell) => {\n        if (typeof cell === 'object' && 'relationTo' in cell && 'value' in cell) {\n          formattedValues.push(cell)\n        }\n        if (typeof cell === 'number' || typeof cell === 'string') {\n          formattedValues.push({\n            relationTo,\n            value: cell,\n          })\n        }\n      })\n\n      getRelationships(formattedValues)\n      hasRequestedRef.current = true\n      setValues(formattedValues)\n    }\n  }, [cellDataFromProps, relationTo, isAboveViewport, getRelationships])\n\n  // Get current selection IDs for the drawer\n  const initialSelections = useMemo(() => {\n    if (!cellDataFromProps) {\n      return []\n    }\n    const data = Array.isArray(cellDataFromProps) ? cellDataFromProps : [cellDataFromProps]\n    return data.map((item) => {\n      if (typeof item === 'object' && 'value' in item) {\n        return item.value\n      }\n      return item\n    }) as (number | string)[]\n  }, [cellDataFromProps])\n\n  // Handle save from drawer\n  const handleSave = useCallback(\n    async ({\n      closeDrawer,\n      selections,\n    }: {\n      closeDrawer: () => void\n      selections: Map<number | string, SelectionWithPath>\n    }) => {\n      // Get selected IDs\n      const selectedIds = Array.from(selections.keys())\n      const newValue = hasMany ? selectedIds : (selectedIds[0] ?? null)\n\n      // Update the document via API\n      try {\n        const response = await fetch(\n          `${config.serverURL}${config.routes.api}/${collectionSlug}/${rowData.id}`,\n          {\n            body: JSON.stringify({\n              [field.name]: newValue,\n            }),\n            credentials: 'include',\n            headers: {\n              'Content-Type': 'application/json',\n            },\n            method: 'PATCH',\n          },\n        )\n\n        if (response.ok && typeof relationTo === 'string') {\n          // Update local state with new selection to avoid page reload\n          const newValues: Value[] = selectedIds.map((id) => ({\n            relationTo,\n            value: id,\n          }))\n          setValues(newValues)\n\n          // Request the new relationship docs to update the display\n          if (newValues.length > 0) {\n            getRelationships(newValues)\n          }\n        }\n      } catch (_error) {\n        // swallow error and close drawer anyway, user can try again\n      }\n\n      closeDrawer()\n    },\n    [collectionSlug, config, field.name, hasMany, rowData, relationTo, getRelationships],\n  )\n\n  // Build display labels\n  const labels = useMemo(() => {\n    return values.map(({ relationTo: rel, value }) => {\n      const document = documents[rel]?.[value]\n      const relatedCollection = getEntityConfig({ collectionSlug: rel })\n\n      return formatDocTitle({\n        collectionConfig: relatedCollection,\n        data: document || null,\n        dateFormat: config.admin.dateFormat,\n        fallback: `${t('general:untitled')} - ID: ${value}`,\n        i18n,\n      })\n    })\n  }, [values, documents, getEntityConfig, config.admin.dateFormat, t, i18n])\n\n  const displayText = labels.length > 0 ? labels.join(', ') : t('general:none')\n  const isLoading =\n    values.length > 0 &&\n    values.some(({ relationTo: rel, value }) => documents[rel]?.[value] === null)\n\n  return (\n    <div className={baseClass} ref={intersectionRef}>\n      <Button\n        buttonStyle=\"pill\"\n        className={`${baseClass}__pill`}\n        icon={displayIcon}\n        iconPosition=\"left\"\n        margin={false}\n        onClick={openDrawer}\n        size=\"medium\"\n      >\n        {isLoading ? `${t('general:loading')}...` : displayText}\n      </Button>\n      {hierarchyCollectionSlug && (\n        <HierarchyDrawer\n          hasMany={hasMany}\n          initialSelections={initialSelections}\n          onSave={handleSave}\n        />\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","useIntersect","FolderIcon","TagIcon","useConfig","useTranslation","canUseDOM","formatDocTitle","Button","useHierarchyModal","useListRelationships","baseClass","HierarchyCell","cellData","cellDataFromProps","collectionSlug","customCellProps","field","rowData","relationTo","undefined","hasMany","config","getEntityConfig","intersectionRef","entry","values","setValues","documents","getRelationships","hasRequestedRef","prevCellDataRef","i18n","t","isAboveViewport","boundingClientRect","top","window","innerHeight","hierarchyCollectionSlug","hierarchyCollectionConfig","hierarchyConfig","hierarchy","preRenderedIcon","hierarchyIcon","preRenderedSmallIcon","hierarchySmallIcon","fallbackIcon","IconComponent","allowHasMany","_jsx","drawerIcon","displayIcon","HierarchyModal","openModal","Icon","hasMountedModal","setHasMountedModal","shouldOpenAfterMountRef","handleOpenModal","current","formattedValues","arrayCellData","Array","isArray","forEach","cell","push","value","initialSelections","data","map","item","handleSave","closeModal","selections","selectedIds","from","keys","newValue","response","fetch","serverURL","routes","api","id","body","JSON","stringify","name","credentials","headers","method","ok","newValues","length","_error","labels","rel","document","relatedCollection","collectionConfig","dateFormat","admin","fallback","displayText","join","isLoading","some","_jsxs","className","ref","buttonStyle","icon","iconPosition","margin","onClick","size","onSave"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Hierarchy/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps, RelationshipFieldClient } from 'payload'\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { SelectionWithPath } from '../../../../Hierarchy/Modal/types.js'\n\nimport { useIntersect } from '../../../../../hooks/useIntersect.js'\nimport { FolderIcon } from '../../../../../icons/Folder/index.js'\nimport { TagIcon } from '../../../../../icons/Tag/index.js'\nimport { useConfig } from '../../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\nimport { canUseDOM } from '../../../../../utilities/canUseDOM.js'\nimport { formatDocTitle } from '../../../../../utilities/formatDocTitle/index.js'\nimport { Button } from '../../../../Button/index.js'\nimport { useHierarchyModal } from '../../../../Hierarchy/Modal/useHierarchyModal.js'\nimport { useListRelationships } from '../../../RelationshipProvider/index.js'\nimport './index.css'\n\ntype Value = { relationTo: string; value: number | string }\nconst baseClass = 'hierarchy-cell'\n\nexport type HierarchyCellProps = DefaultCellComponentProps<RelationshipFieldClient>\n\nexport const HierarchyCell: React.FC<HierarchyCellProps> = ({\n  cellData: cellDataFromProps,\n  collectionSlug,\n  customCellProps,\n  field,\n  rowData,\n}) => {\n  const relationTo = 'relationTo' in field ? field.relationTo : undefined\n  const hasMany = field.hasMany ?? false\n\n  const { config, getEntityConfig } = useConfig()\n  const [intersectionRef, entry] = useIntersect()\n  const [values, setValues] = useState<Value[]>([])\n  const { documents, getRelationships } = useListRelationships()\n  const hasRequestedRef = useRef(false)\n  const prevCellDataRef = useRef<typeof cellDataFromProps>(undefined)\n  const { i18n, t } = useTranslation()\n\n  const isAboveViewport = canUseDOM ? entry?.boundingClientRect?.top < window.innerHeight : false\n\n  // Get the hierarchy collection config\n  const hierarchyCollectionSlug = typeof relationTo === 'string' ? relationTo : undefined\n  const hierarchyCollectionConfig = hierarchyCollectionSlug\n    ? getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n    : undefined\n\n  // Use pre-rendered icon from server if available, otherwise determine on client\n  const hierarchyConfig =\n    hierarchyCollectionConfig?.hierarchy && typeof hierarchyCollectionConfig.hierarchy === 'object'\n      ? hierarchyCollectionConfig.hierarchy\n      : undefined\n\n  // Pre-rendered icons from server (supports custom icons)\n  const preRenderedIcon = customCellProps?.hierarchyIcon as React.ReactNode | undefined\n  const preRenderedSmallIcon = customCellProps?.hierarchySmallIcon as React.ReactNode | undefined\n\n  // Fallback icon for client-side rendering\n  const fallbackIcon = useMemo(() => {\n    if (preRenderedIcon) {\n      return null // Don't need fallback if we have pre-rendered icon\n    }\n    // Default based on allowHasMany: false = folder-like, true = tag-like\n    const IconComponent = hierarchyConfig?.allowHasMany === false ? FolderIcon : TagIcon\n    return <IconComponent />\n  }, [hierarchyConfig, preRenderedIcon])\n\n  // Full icon for modal subheader\n  const drawerIcon = preRenderedIcon || fallbackIcon\n  // Small icon for compact display (pill button)\n  const displayIcon = preRenderedSmallIcon ?? drawerIcon\n\n  // Set up the hierarchy modal\n  const [HierarchyModal, , { openModal }] = useHierarchyModal({\n    hierarchyCollectionSlug: hierarchyCollectionSlug || '',\n    Icon: drawerIcon,\n  })\n\n  // Lazy-mount the modal so its column browser doesn't eagerly fetch root items\n  // for every cell in the list view. Only mount once the user opens it.\n  const [hasMountedModal, setHasMountedModal] = useState(false)\n  const shouldOpenAfterMountRef = useRef(false)\n\n  const handleOpenModal = useCallback(() => {\n    if (hasMountedModal) {\n      openModal()\n      return\n    }\n    shouldOpenAfterMountRef.current = true\n    setHasMountedModal(true)\n  }, [hasMountedModal, openModal])\n\n  // Open the modal once it has mounted (state update from handleOpenModal).\n  useEffect(() => {\n    if (hasMountedModal && shouldOpenAfterMountRef.current) {\n      shouldOpenAfterMountRef.current = false\n      openModal()\n    }\n  }, [hasMountedModal, openModal])\n\n  // Fetch relationship data when visible\n  useEffect(() => {\n    // Reset tracking if data changed\n    if (prevCellDataRef.current !== cellDataFromProps) {\n      prevCellDataRef.current = cellDataFromProps\n      hasRequestedRef.current = false\n    }\n\n    if (\n      (cellDataFromProps || typeof cellDataFromProps === 'number') &&\n      isAboveViewport &&\n      !hasRequestedRef.current &&\n      typeof relationTo === 'string'\n    ) {\n      const formattedValues: Value[] = []\n      const arrayCellData = Array.isArray(cellDataFromProps)\n        ? cellDataFromProps\n        : [cellDataFromProps]\n\n      arrayCellData.forEach((cell) => {\n        if (typeof cell === 'object' && 'relationTo' in cell && 'value' in cell) {\n          formattedValues.push(cell)\n        }\n        if (typeof cell === 'number' || typeof cell === 'string') {\n          formattedValues.push({\n            relationTo,\n            value: cell,\n          })\n        }\n      })\n\n      getRelationships(formattedValues)\n      hasRequestedRef.current = true\n      setValues(formattedValues)\n    }\n  }, [cellDataFromProps, relationTo, isAboveViewport, getRelationships])\n\n  // Get current selection IDs for the modal\n  const initialSelections = useMemo(() => {\n    if (!cellDataFromProps) {\n      return []\n    }\n    const data = Array.isArray(cellDataFromProps) ? cellDataFromProps : [cellDataFromProps]\n    return data.map((item) => {\n      if (typeof item === 'object' && 'value' in item) {\n        return item.value\n      }\n      return item\n    }) as (number | string)[]\n  }, [cellDataFromProps])\n\n  // Handle save from modal\n  const handleSave = useCallback(\n    async ({\n      closeModal,\n      selections,\n    }: {\n      closeModal: () => void\n      selections: Map<number | string, SelectionWithPath>\n    }) => {\n      // Get selected IDs\n      const selectedIds = Array.from(selections.keys())\n      const newValue = hasMany ? selectedIds : (selectedIds[0] ?? null)\n\n      // Update the document via API\n      try {\n        const response = await fetch(\n          `${config.serverURL}${config.routes.api}/${collectionSlug}/${rowData.id}`,\n          {\n            body: JSON.stringify({\n              [field.name]: newValue,\n            }),\n            credentials: 'include',\n            headers: {\n              'Content-Type': 'application/json',\n            },\n            method: 'PATCH',\n          },\n        )\n\n        if (response.ok && typeof relationTo === 'string') {\n          // Update local state with new selection to avoid page reload\n          const newValues: Value[] = selectedIds.map((id) => ({\n            relationTo,\n            value: id,\n          }))\n          setValues(newValues)\n\n          // Request the new relationship docs to update the display\n          if (newValues.length > 0) {\n            getRelationships(newValues)\n          }\n        }\n      } catch (_error) {\n        // swallow error and close modal anyway, user can try again\n      }\n\n      closeModal()\n    },\n    [collectionSlug, config, field.name, hasMany, rowData, relationTo, getRelationships],\n  )\n\n  // Build display labels\n  const labels = useMemo(() => {\n    return values.map(({ relationTo: rel, value }) => {\n      const document = documents[rel]?.[value]\n      const relatedCollection = getEntityConfig({ collectionSlug: rel })\n\n      return formatDocTitle({\n        collectionConfig: relatedCollection,\n        data: document || null,\n        dateFormat: config.admin.dateFormat,\n        fallback: `${t('general:untitled')} - ID: ${value}`,\n        i18n,\n      })\n    })\n  }, [values, documents, getEntityConfig, config.admin.dateFormat, t, i18n])\n\n  const displayText = labels.length > 0 ? labels.join(', ') : t('general:none')\n  const isLoading =\n    values.length > 0 &&\n    values.some(({ relationTo: rel, value }) => documents[rel]?.[value] === null)\n\n  return (\n    <div className={baseClass} ref={intersectionRef}>\n      <Button\n        buttonStyle=\"pill\"\n        className={`${baseClass}__pill`}\n        icon={displayIcon}\n        iconPosition=\"left\"\n        margin={false}\n        onClick={handleOpenModal}\n        size=\"medium\"\n      >\n        {isLoading ? `${t('general:loading')}...` : displayText}\n      </Button>\n      {hierarchyCollectionSlug && hasMountedModal && (\n        <HierarchyModal\n          hasMany={hasMany}\n          initialSelections={initialSelections}\n          onSave={handleSave}\n        />\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Table/DefaultCell/fields/index.d.ts

@@ -6,7 +6,7 @@ export declare const cellComponents: {
     date: import("react").FC<import("payload").DefaultCellComponentProps<{
         accessor?: string;
     } & {
-        admin?: import("payload").AdminClient & Pick<import("payload").DateField["admin"], "date" | "placeholder">;
+        admin?: import("payload").AdminClient & Pick<import("payload").DateField['admin'], 'date' | 'placeholder'>;
         timezone?: ({
             required?: boolean;
             supportedTimezones?: import("payload").Timezone[];

package/dist/elements/Table/DefaultCell/fields/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Table/DefaultCell/fields/index.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;CAe1B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Table/DefaultCell/fields/index.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,cAAc;IACzB,KAAK;IACL,MAAM;IACN,QAAQ;IACR,IAAI;IACJ,IAAI;;;;;;;;;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,KAAK;IACL,YAAY;IACZ,MAAM;IACN,MAAM;IACN,QAAQ;IACR,MAAM;CACP,CAAA"}

package/dist/elements/Table/OrderableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrderableRow.d.ts","sourceRoot":"","sources":["../../../src/elements/Table/OrderableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhD,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAA;IAC1B,QAAQ,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IACjD,QAAQ,CAAC,aAAa,CAAC,EAAE,2BAA2B,CAAA;IACpD,QAAQ,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAA;IACvC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAChC,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAAA;AAEvC,eAAO,MAAM,YAAY,GAAI,qEAO1B,KAAK,gCA+BP,CAAA"}
+{"version":3,"file":"OrderableRow.d.ts","sourceRoot":"","sources":["../../../src/elements/Table/OrderableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhD,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAA;IAC1B,QAAQ,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IACjD,QAAQ,CAAC,aAAa,CAAC,EAAE,2BAA2B,CAAA;IACpD,QAAQ,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAA;IACvC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAChC,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAAA;AAEvC,eAAO,MAAM,YAAY,wEAOtB,KAAK,gCA+BP,CAAA"}

package/dist/elements/Table/OrderableRowDragPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrderableRowDragPreview.d.ts","sourceRoot":"","sources":["../../../src/elements/Table/OrderableRowDragPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,uBAAuB,GAAI,gCAAgC,KAAK,gCAO1E,CAAA"}
+{"version":3,"file":"OrderableRowDragPreview.d.ts","sourceRoot":"","sources":["../../../src/elements/Table/OrderableRowDragPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,uBAAuB,mCAAoC,KAAK,gCAO1E,CAAA"}

package/dist/elements/Table/index.css

@@ -48,18 +48,33 @@
       padding-inline-end: var(--spacer-3);
     }
 
-    /* Linked cells: move padding to the anchor for full-cell clickability */
-    .cell--linked {
+    /* Linked cells: move padding to the anchor/button for full-cell clickability */
+    td.cell--linked {
       padding: 0;
 
-      > a {
+      &:first-child,
+      &:last-child {
+        padding: 0;
+      }
+
+      > :is(a, button) {
         display: flex;
         align-items: center;
+        width: 100%;
         padding: var(--spacer-2) var(--spacer-2-5);
         min-height: calc(var(--spacer-4) * 2);
+        cursor: pointer;
+      }
+
+      &:first-child > :is(a, button) {
+        padding-inline-start: var(--gutter-h);
       }
     }
 
+    .drawer & td.cell--linked:first-child > :is(a, button) {
+      padding-inline-start: var(--spacer-3);
+    }
+
     #heading-_select,
     .cell-_select {
       width: var(--spacer-5);
@@ -69,6 +84,18 @@
       text-align: center;
     }
 
+    /* Size the locked-row lock icon to the checkbox's 16px box (keeping the column
+     * width stable) and center it like the checkbox; the larger icon overflows. */
+    .cell-_select .locked {
+      display: flex;
+      height: var(--spacer-3);
+      width: var(--spacer-3);
+
+      svg {
+        flex-shrink: 0;
+      }
+    }
+
     #heading-_dragHandle {
       display: flex;
       align-items: center;
@@ -84,6 +111,12 @@
       vertical-align: middle;
     }
 
+    .cell-_dragHandle > div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
     tbody tr {
       position: relative;
       border-top: var(--stroke-width-small) solid var(--color-border);
@@ -116,6 +149,8 @@
   /* Condensed appearance */
   .table--appearance-condensed {
     border-radius: var(--radius-medium);
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-color) transparent;
 
     table {
       border-collapse: collapse;
@@ -176,16 +211,28 @@
       }
     }
 
-    /* Linked cells: move padding to the anchor for full-cell clickability */
-    .cell--linked {
+    /* Linked cells: move padding to the anchor/button for full-cell clickability */
+    td.cell--linked {
       padding: 0;
 
-      > a {
+      &:first-child,
+      &:last-child {
+        padding: 0;
+      }
+
+      > :is(a, button, .drawer-link) {
+        display: flex;
+        align-items: center;
+        width: 100%;
         padding: 0 var(--spacer-2-5);
         min-height: var(--spacer-5);
       }
 
-      &:first-child > a {
+      > :is(a, button) {
+        cursor: pointer;
+      }
+
+      &:first-child > :is(a, button, .drawer-link) {
         padding-inline-start: var(--spacer-2-5);
       }
     }

package/dist/elements/Tabs/index.css

@@ -0,0 +1,100 @@
+@layer payload-default {
+  .tabs__tabs-wrap {
+    overflow-x: auto;
+    overflow-y: hidden;
+    margin-bottom: var(--spacer-2);
+    position: relative;
+    padding-bottom: 2px;
+  }
+
+  .tabs__tabs {
+    display: inline-flex;
+    min-width: 100%;
+    vertical-align: bottom;
+    position: relative;
+    z-index: 1;
+    box-shadow: inset 0px -1px var(--color-border);
+  }
+
+  .tabs__tab-button {
+    appearance: none;
+    background: none;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacer-1);
+    padding: var(--spacer-1) var(--spacer-2);
+    margin: 0;
+    margin-bottom: var(--spacer-2);
+    cursor: pointer;
+    position: relative;
+    white-space: nowrap;
+    flex-shrink: 0;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-letter-spacing);
+    color: var(--color-text-secondary);
+  }
+
+  .tabs__tab-button:after {
+    content: '';
+    position: absolute;
+    left: var(--spacer-2);
+    right: var(--spacer-2);
+    bottom: calc(-1 * var(--spacer-2) - 1px);
+    height: 3px;
+    background: var(--color-icon-brand);
+    border-radius: var(--radius-full);
+    opacity: 0;
+    z-index: 1;
+  }
+
+  .tabs__tab-button:hover:after {
+    background: var(--color-bg-tertiary);
+    opacity: 1;
+  }
+
+  .tabs__tab-button:focus-visible {
+    outline-offset: -1px;
+  }
+
+  .tabs__tab-button--hidden {
+    display: none;
+  }
+
+  .tabs__tab-button--active {
+    font-weight: var(--text-body-medium-strong-font-weight);
+    color: var(--color-text);
+  }
+
+  .tabs__tab-button--active:after {
+    background: var(--color-icon-brand);
+    opacity: 1;
+  }
+
+  .tabs__tab-button--active:hover:after {
+    background: var(--color-icon-brand);
+  }
+
+  .tabs__tab-button--has-error {
+    color: var(--color-text-danger);
+  }
+
+  .tabs__tab-button--has-error:after {
+    background: var(--field-color-border-error);
+    opacity: 1;
+  }
+
+  .tabs__tab-button--has-error:hover:after {
+    background: var(--field-color-border-error);
+  }
+
+  @media (max-width: 768px) {
+    .tabs__tab-button {
+      padding-bottom: var(--spacer-2);
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import './index.css';
+export type TabsTab<TValue extends string = string> = {
+    disabled?: boolean;
+    hidden?: boolean;
+    label: React.ReactNode;
+    value: TValue;
+};
+export type TabsProps<TValue extends string = string> = {
+    className?: string;
+    onChange: (value: TValue) => void;
+    tabs: TabsTab<TValue>[];
+    value: TValue;
+};
+export declare const Tabs: <TValue extends string = string>({ className, onChange, tabs, value, }: TabsProps<TValue>) => React.JSX.Element;
+export declare const TabsList: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+    tabsClassName?: string;
+    tabsWrapClassName?: string;
+}>;
+export declare const TabButton: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+    hidden?: boolean;
+    isActive?: boolean;
+    modifierClassName?: string;
+    onClick: () => void;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tabs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,OAAO,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,IAAI;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,SAAS,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,IAAI;IACtD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,CAAA;IACvB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,IAAI,GAAI,MAAM,SAAS,MAAM,GAAG,MAAM,yCAKhD,SAAS,CAAC,MAAM,CAAC,sBAgBnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAaA,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAiCA,CAAA"}

package/dist/elements/Tabs/index.js

@@ -0,0 +1,62 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import './index.css';
+const baseClass = 'tabs';
+export const Tabs = ({
+  className,
+  onChange,
+  tabs,
+  value
+}) => {
+  return /*#__PURE__*/_jsx(TabsList, {
+    className: className,
+    children: tabs.map(tab => /*#__PURE__*/_jsx(TabButton, {
+      disabled: tab.disabled,
+      hidden: tab.hidden,
+      isActive: tab.value === value,
+      onClick: () => onChange(tab.value),
+      children: tab.label
+    }, tab.value))
+  });
+};
+export const TabsList = ({
+  children,
+  className,
+  tabsClassName,
+  tabsWrapClassName
+}) => {
+  return /*#__PURE__*/_jsx("div", {
+    className: [baseClass, className].filter(Boolean).join(' '),
+    children: /*#__PURE__*/_jsx("div", {
+      className: [`${baseClass}__tabs-wrap`, tabsWrapClassName].filter(Boolean).join(' '),
+      children: /*#__PURE__*/_jsx("div", {
+        className: [`${baseClass}__tabs`, tabsClassName].filter(Boolean).join(' '),
+        role: "tablist",
+        children: children
+      })
+    })
+  });
+};
+export const TabButton = ({
+  children,
+  className,
+  disabled,
+  hasError,
+  hidden,
+  isActive,
+  modifierClassName,
+  onClick
+}) => {
+  return /*#__PURE__*/_jsx("button", {
+    "aria-selected": isActive,
+    className: [`${baseClass}__tab-button`, className, hasError && `${baseClass}__tab-button--has-error`, hasError && modifierClassName && `${modifierClassName}--has-error`, isActive && `${baseClass}__tab-button--active`, isActive && modifierClassName && `${modifierClassName}--active`, hidden && `${baseClass}__tab-button--hidden`, hidden && modifierClassName && `${modifierClassName}--hidden`].filter(Boolean).join(' '),
+    disabled: disabled,
+    onClick: onClick,
+    role: "tab",
+    type: "button",
+    children: children
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","Tabs","className","onChange","tabs","value","_jsx","TabsList","map","tab","TabButton","disabled","hidden","isActive","onClick","label","children","tabsClassName","tabsWrapClassName","filter","Boolean","join","role","hasError","modifierClassName","type"],"sources":["../../../src/elements/Tabs/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'tabs'\n\nexport type TabsTab<TValue extends string = string> = {\n  disabled?: boolean\n  hidden?: boolean\n  label: React.ReactNode\n  value: TValue\n}\n\nexport type TabsProps<TValue extends string = string> = {\n  className?: string\n  onChange: (value: TValue) => void\n  tabs: TabsTab<TValue>[]\n  value: TValue\n}\n\nexport const Tabs = <TValue extends string = string>({\n  className,\n  onChange,\n  tabs,\n  value,\n}: TabsProps<TValue>) => {\n  return (\n    <TabsList className={className}>\n      {tabs.map((tab) => (\n        <TabButton\n          disabled={tab.disabled}\n          hidden={tab.hidden}\n          isActive={tab.value === value}\n          key={tab.value}\n          onClick={() => onChange(tab.value)}\n        >\n          {tab.label}\n        </TabButton>\n      ))}\n    </TabsList>\n  )\n}\n\nexport const TabsList: React.FC<{\n  children: React.ReactNode\n  className?: string\n  tabsClassName?: string\n  tabsWrapClassName?: string\n}> = ({ children, className, tabsClassName, tabsWrapClassName }) => {\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <div className={[`${baseClass}__tabs-wrap`, tabsWrapClassName].filter(Boolean).join(' ')}>\n        <div\n          className={[`${baseClass}__tabs`, tabsClassName].filter(Boolean).join(' ')}\n          role=\"tablist\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport const TabButton: React.FC<{\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  hasError?: boolean\n  hidden?: boolean\n  isActive?: boolean\n  modifierClassName?: string\n  onClick: () => void\n}> = ({\n  children,\n  className,\n  disabled,\n  hasError,\n  hidden,\n  isActive,\n  modifierClassName,\n  onClick,\n}) => {\n  return (\n    <button\n      aria-selected={isActive}\n      className={[\n        `${baseClass}__tab-button`,\n        className,\n        hasError && `${baseClass}__tab-button--has-error`,\n        hasError && modifierClassName && `${modifierClassName}--has-error`,\n        isActive && `${baseClass}__tab-button--active`,\n        isActive && modifierClassName && `${modifierClassName}--active`,\n        hidden && `${baseClass}__tab-button--hidden`,\n        hidden && modifierClassName && `${modifierClassName}--hidden`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      disabled={disabled}\n      onClick={onClick}\n      role=\"tab\"\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAgBlB,OAAO,MAAMC,IAAA,GAAOA,CAAiC;EACnDC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC;AAAK,CACa;EAClB,oBACEC,IAAA,CAACC,QAAA;IAASL,SAAA,EAAWA,SAAA;cAClBE,IAAA,CAAKI,GAAG,CAAEC,GAAA,iBACTH,IAAA,CAACI,SAAA;MACCC,QAAA,EAAUF,GAAA,CAAIE,QAAQ;MACtBC,MAAA,EAAQH,GAAA,CAAIG,MAAM;MAClBC,QAAA,EAAUJ,GAAA,CAAIJ,KAAK,KAAKA,KAAA;MAExBS,OAAA,EAASA,CAAA,KAAMX,QAAA,CAASM,GAAA,CAAIJ,KAAK;gBAEhCI,GAAA,CAAIM;OAHAN,GAAA,CAAIJ,KAAK;;AAQxB;AAEA,OAAO,MAAME,QAAA,GAKRA,CAAC;EAAES,QAAQ;EAAEd,SAAS;EAAEe,aAAa;EAAEC;AAAiB,CAAE;EAC7D,oBACEZ,IAAA,CAAC;IAAIJ,SAAA,EAAW,CAACF,SAAA,EAAWE,SAAA,CAAU,CAACiB,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cAC1D,aAAAf,IAAA,CAAC;MAAIJ,SAAA,EAAW,CAAC,GAAGF,SAAA,aAAsB,EAAEkB,iBAAA,CAAkB,CAACC,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;gBAClF,aAAAf,IAAA,CAAC;QACCJ,SAAA,EAAW,CAAC,GAAGF,SAAA,QAAiB,EAAEiB,aAAA,CAAc,CAACE,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;QACtEC,IAAA,EAAK;kBAEJN;;;;AAKX;AAEA,OAAO,MAAMN,SAAA,GASRA,CAAC;EACJM,QAAQ;EACRd,SAAS;EACTS,QAAQ;EACRY,QAAQ;EACRX,MAAM;EACNC,QAAQ;EACRW,iBAAiB;EACjBV;AAAO,CACR;EACC,oBACER,IAAA,CAAC;IACC,iBAAeO,QAAA;IACfX,SAAA,EAAW,CACT,GAAGF,SAAA,cAAuB,EAC1BE,SAAA,EACAqB,QAAA,IAAY,GAAGvB,SAAA,yBAAkC,EACjDuB,QAAA,IAAYC,iBAAA,IAAqB,GAAGA,iBAAA,aAA8B,EAClEX,QAAA,IAAY,GAAGb,SAAA,sBAA+B,EAC9Ca,QAAA,IAAYW,iBAAA,IAAqB,GAAGA,iBAAA,UAA2B,EAC/DZ,MAAA,IAAU,GAAGZ,SAAA,sBAA+B,EAC5CY,MAAA,IAAUY,iBAAA,IAAqB,GAAGA,iBAAA,UAA2B,CAC9D,CACEL,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRV,QAAA,EAAUA,QAAA;IACVG,OAAA,EAASA,OAAA;IACTQ,IAAA,EAAK;IACLG,IAAA,EAAK;cAEJT;;AAGP","ignoreList":[]}

package/dist/elements/Thumbnail/createThumbnail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createThumbnail.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/createThumbnail.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,MAAM,IAAI,KAAG,OAAO,CAAC,MAAM,CAoD1D,CAAA"}
+{"version":3,"file":"createThumbnail.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/createThumbnail.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,eAAe,SAAU,IAAI,KAAG,OAAO,CAAC,MAAM,CAoD1D,CAAA"}

package/dist/elements/Thumbnail/index.css

@@ -0,0 +1,41 @@
+@layer payload-default {
+  .thumbnail:not(.thumbnail--size-none) {
+    min-height: 100%;
+    flex-shrink: 0;
+    align-self: stretch;
+    overflow: hidden;
+  }
+
+  .thumbnail:not(.thumbnail--size-none) img,
+  .thumbnail:not(.thumbnail--size-none) svg {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .thumbnail--size-expand {
+    max-height: 100%;
+    width: 100%;
+  }
+
+  .thumbnail--size-large {
+    max-height: calc(var(--spacer-6) * 4.5);
+    width: calc(var(--spacer-6) * 4.5);
+  }
+
+  .thumbnail--size-medium {
+    max-height: calc(var(--spacer-6) * 3.5);
+    width: calc(var(--spacer-6) * 3.5);
+  }
+
+  .thumbnail--size-small {
+    max-height: calc(var(--spacer-6) * 2.5);
+    width: calc(var(--spacer-6) * 2.5);
+  }
+
+  @media (max-width: 1440px) {
+    .thumbnail .thumbnail {
+      width: calc(var(--spacer-6) * 2.5);
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 import type { SanitizedCollectionConfig } from 'payload';
 export type ThumbnailProps = {
     className?: string;
@@ -7,7 +7,7 @@ export type ThumbnailProps = {
     doc?: Record<string, unknown>;
     fileSrc?: string;
     height?: number;
-    imageCacheTag?: string;
+    imageCacheTag?: false | string;
     size?: 'expand' | 'large' | 'medium' | 'none' | 'small';
     uploadConfig?: SanitizedCollectionConfig['upload'];
     width?: number;
@@ -18,7 +18,7 @@ type ThumbnailComponentProps = {
     readonly className?: string;
     readonly filename: string;
     readonly fileSrc: string;
-    readonly imageCacheTag?: string;
+    readonly imageCacheTag?: false | string;
     readonly size?: 'expand' | 'large' | 'medium' | 'none' | 'small';
 };
 export declare function ThumbnailComponent(props: ThumbnailComponentProps): React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAMxD,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACvD,YAAY,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2C9C,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;CACjE,CAAA;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAmChE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAMxD,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IAC9B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACvD,YAAY,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2C9C,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IACvC,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;CACjE,CAAA;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAmChE"}

package/dist/elements/Thumbnail/index.js

@@ -2,7 +2,7 @@
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import './index.scss';
+import './index.css';
 const baseClass = 'thumbnail';
 import { File } from '../../graphics/File/index.js';
 import { appendCacheTag } from '../../utilities/appendCacheTag.js';