@payloadcms/ui 3.0.0-beta.93 → 3.0.0-beta.94

package/dist/fields/Upload/HasMany/index.d.ts

@@ -1,4 +1,18 @@
-import type { UploadFieldPropsWithContext } from '../HasOne/index.js';
+import type { JsonObject } from 'payload';
+import React from 'react';
 import './index.scss';
-export declare const UploadComponentHasMany: React.FC<UploadFieldPropsWithContext<string[]>>;
+type Props = {
+    readonly className?: string;
+    readonly fileDocs: {
+        relationTo: string;
+        value: JsonObject;
+    }[];
+    readonly isSortable?: boolean;
+    readonly onRemove?: (value: any) => void;
+    readonly onReorder?: (value: any) => void;
+    readonly readonly?: boolean;
+    readonly serverURL: string;
+};
+export declare function UploadComponentHasMany(props: Props): React.JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/Upload/HasMany/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Upload/HasMany/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAA;AAcrE,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAAC,MAAM,EAAE,CAAC,CAyQlF,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Upload/HasMany/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,cAAc,CAAA;AAErB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE;QACjB,UAAU,EAAE,MAAM,CAAA;QAClB,KAAK,EAAE,UAAU,CAAA;KAClB,EAAE,CAAA;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,KAAA,KAAK,IAAI,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,KAAA,KAAK,IAAI,CAAA;IACpC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;CAC3B,CAAA;AACD,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,KAAK,qBAuFlD"}

package/dist/fields/Upload/HasMany/index.js

@@ -1,238 +1,162 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as qs from 'qs-esm';
-import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
-import { AddNewRelation } from '../../../elements/AddNewRelation/index.js';
-import { Button } from '../../../elements/Button/index.js';
+import React from 'react';
+import { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js';
 import { DraggableSortable } from '../../../elements/DraggableSortable/index.js';
-import { FileDetails } from '../../../elements/FileDetails/index.js';
-import { useListDrawer } from '../../../elements/ListDrawer/index.js';
-import { useConfig } from '../../../providers/Config/index.js';
-import { useLocale } from '../../../providers/Locale/index.js';
-import { useTranslation } from '../../../providers/Translation/index.js';
-import { FieldLabel } from '../../FieldLabel/index.js';
+import { DragHandleIcon } from '../../../icons/DragHandle/index.js';
+import { RelationshipContent } from '../RelationshipContent/index.js';
+import { UploadCard } from '../UploadCard/index.js';
 const baseClass = 'upload upload--has-many';
 import './index.scss';
-export const UploadComponentHasMany = props => {
+export function UploadComponentHasMany(props) {
+  const $ = _c(23);
   const {
-    canCreate,
-    field,
-    field: {
-      _path,
-      admin: {
-        components: {
-          Label
-        },
-        isSortable
-      },
-      hasMany,
-      label,
-      relationTo
-    },
-    fieldHookResult: {
-      filterOptions: filterOptionsFromProps,
-      setValue,
-      value
-    },
-    readOnly
+    className,
+    fileDocs,
+    isSortable,
+    onRemove,
+    onReorder,
+    readonly,
+    serverURL
   } = props;
-  const {
-    i18n,
-    t
-  } = useTranslation();
-  const {
-    config: {
-      collections,
-      routes: {
-        api
-      },
-      serverURL
-    }
-  } = useConfig();
-  const filterOptions = useMemo(() => {
-    if (typeof relationTo === 'string') {
-      return {
-        ...filterOptionsFromProps,
-        [relationTo]: {
-          ...(filterOptionsFromProps?.[relationTo] || {}),
-          id: {
-            ...(filterOptionsFromProps?.[relationTo]?.id || {}),
-            not_in: filterOptionsFromProps?.[relationTo]?.id?.not_in || value
-          }
-        }
+  let t0;
+  if ($[0] !== fileDocs || $[1] !== onReorder) {
+    t0 = (moveFromIndex, moveToIndex) => {
+      if (moveFromIndex === moveToIndex) {
+        return;
+      }
+      const updatedArray = [...fileDocs];
+      const [item] = updatedArray.splice(moveFromIndex, 1);
+      updatedArray.splice(moveToIndex, 0, item);
+      onReorder(updatedArray);
+    };
+    $[0] = fileDocs;
+    $[1] = onReorder;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const moveRow = t0;
+  let t1;
+  if ($[3] !== fileDocs || $[4] !== onRemove) {
+    t1 = index => {
+      const updatedArray_0 = [...(fileDocs || [])];
+      updatedArray_0.splice(index, 1);
+      onRemove(updatedArray_0.length === 0 ? [] : updatedArray_0);
+    };
+    $[3] = fileDocs;
+    $[4] = onRemove;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const removeItem = t1;
+  let t2;
+  if ($[6] !== className) {
+    t2 = [baseClass, className].filter(Boolean);
+    $[6] = className;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const t3 = t2.join(" ");
+  let t4;
+  if ($[8] !== fileDocs || $[9] !== moveRow || $[10] !== isSortable || $[11] !== readonly || $[12] !== removeItem || $[13] !== serverURL || $[14] !== t3) {
+    let t5;
+    if ($[16] !== moveRow) {
+      t5 = t6 => {
+        const {
+          moveFromIndex: moveFromIndex_0,
+          moveToIndex: moveToIndex_0
+        } = t6;
+        return moveRow(moveFromIndex_0, moveToIndex_0);
       };
+      $[16] = moveRow;
+      $[17] = t5;
+    } else {
+      t5 = $[17];
     }
-  }, [value, relationTo, filterOptionsFromProps]);
-  const [fileDocs, setFileDocs] = useState([]);
-  const [missingFiles, setMissingFiles] = useState(false);
-  const {
-    code
-  } = useLocale();
-  useEffect(() => {
-    if (value !== null && typeof value !== 'undefined' && value.length !== 0) {
-      const query = {
-        depth: 0,
-        draft: true,
-        locale: code,
-        where: {
-          and: [{
-            id: {
-              in: value
-            }
-          }]
-        }
-      };
-      const fetchFile = async () => {
-        const response = await fetch(`${serverURL}${api}/${relationTo}`, {
-          body: qs.stringify(query),
-          credentials: 'include',
-          headers: {
-            'Accept-Language': i18n.language,
-            'Content-Type': 'application/x-www-form-urlencoded',
-            'X-HTTP-Method-Override': 'GET'
-          },
-          method: 'POST'
-        });
-        if (response.ok) {
-          const json = await response.json();
-          setFileDocs(json.docs);
-        } else {
-          setMissingFiles(true);
-          setFileDocs([]);
-        }
+    let t6;
+    if ($[18] !== isSortable || $[19] !== readonly || $[20] !== removeItem || $[21] !== serverURL) {
+      t6 = (t7, index_0) => {
+        const {
+          relationTo,
+          value: value_0
+        } = t7;
+        const id = String(value_0.id);
+        return _jsx(DraggableSortableItem, {
+          disabled: !isSortable,
+          id,
+          children: draggableSortableItemProps => _jsx("div", {
+            className: [`${baseClass}__dragItem`, draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`].filter(Boolean).join(" "),
+            ref: draggableSortableItemProps.setNodeRef,
+            style: {
+              transform: draggableSortableItemProps.transform,
+              transition: draggableSortableItemProps.transition,
+              zIndex: draggableSortableItemProps.isDragging ? 1 : undefined
+            },
+            children: _jsxs(UploadCard, {
+              size: "small",
+              children: [isSortable && draggableSortableItemProps && _jsx("div", {
+                className: `${baseClass}__drag`,
+                ...draggableSortableItemProps.attributes,
+                ...draggableSortableItemProps.listeners,
+                children: _jsx(DragHandleIcon, {})
+              }), _jsx(RelationshipContent, {
+                allowEdit: !readonly,
+                allowRemove: !readonly,
+                alt: value_0?.alt || value_0?.filename,
+                byteSize: value_0.filesize,
+                collectionSlug: relationTo,
+                filename: value_0.filename,
+                id,
+                mimeType: value_0?.mimeType,
+                onRemove: () => removeItem(index_0),
+                src: `${serverURL}${value_0.url}`,
+                withMeta: false,
+                x: value_0?.width,
+                y: value_0?.height
+              })]
+            })
+          })
+        }, id);
       };
-      void fetchFile();
+      $[18] = isSortable;
+      $[19] = readonly;
+      $[20] = removeItem;
+      $[21] = serverURL;
+      $[22] = t6;
+    } else {
+      t6 = $[22];
     }
-  }, [value, relationTo, api, serverURL, i18n, code]);
-  function moveItemInArray(array, moveFromIndex, moveToIndex) {
-    const newArray = [...array];
-    const [item] = newArray.splice(moveFromIndex, 1);
-    newArray.splice(moveToIndex, 0, item);
-    return newArray;
-  }
-  const moveRow = useCallback((moveFromIndex_0, moveToIndex_0) => {
-    const updatedArray = moveItemInArray(value, moveFromIndex_0, moveToIndex_0);
-    setValue(updatedArray);
-  }, [value, setValue]);
-  const removeItem = useCallback(index => {
-    const updatedArray_0 = [...value];
-    updatedArray_0.splice(index, 1);
-    setValue(updatedArray_0);
-  }, [value, setValue]);
-  const [ListDrawer, ListDrawerToggler] = useListDrawer({
-    collectionSlugs: typeof relationTo === 'string' ? [relationTo] : collections.map(collection => collection.slug),
-    filterOptions
-  });
-  const collection_0 = collections.find(coll => coll.slug === relationTo);
-  // Get the labels of the collections that the relation is to
-  const labels_0 = useMemo(() => {
-    function joinWithCommaAndOr(items) {
-      const or = t('general:or');
-      if (items.length === 0) return '';
-      if (items.length === 1) return items[0];
-      if (items.length === 2) return items.join(` ${or} `);
-      return items.slice(0, -1).join(', ') + ` ${or} ` + items[items.length - 1];
-    }
-    const labels = [];
-    collections.forEach(collection_1 => {
-      if (relationTo.includes(collection_1.slug)) {
-        labels.push(collection_1.labels?.singular || collection_1.slug);
-      }
+    t4 = _jsx("div", {
+      className: t3,
+      children: _jsx(DraggableSortable, {
+        className: `${baseClass}__draggable-rows`,
+        ids: fileDocs?.map(_temp),
+        onDragEnd: t5,
+        children: fileDocs.map(t6)
+      })
     });
-    return joinWithCommaAndOr(labels);
-  }, [collections, relationTo, t]);
-  const onBulkSelect = useCallback(selections => {
-    const selectedIDs = Object.entries(selections).reduce((acc, [key, value_0]) => value_0 ? [...acc, key] : acc, []);
-    if (value?.length) setValue([...value, ...selectedIDs]);else setValue(selectedIDs);
-  }, [setValue, value]);
-  return /*#__PURE__*/_jsxs(Fragment, {
-    children: [/*#__PURE__*/_jsxs("div", {
-      className: [baseClass].join(' '),
-      children: [/*#__PURE__*/_jsx(FieldLabel, {
-        Label: Label,
-        field: field,
-        label: label
-      }), /*#__PURE__*/_jsx("div", {
-        children: missingFiles || !value?.length ? /*#__PURE__*/_jsx("div", {
-          className: [`${baseClass}__no-data`].join(' '),
-          children: t('version:noRowsSelected', {
-            label: labels_0
-          })
-        }) : /*#__PURE__*/_jsx(DraggableSortable, {
-          className: `${baseClass}__draggable-rows`,
-          ids: value,
-          onDragEnd: ({
-            moveFromIndex: moveFromIndex_1,
-            moveToIndex: moveToIndex_1
-          }) => moveRow(moveFromIndex_1, moveToIndex_1),
-          children: Boolean(value.length) && value.map((id, index_0) => {
-            const doc_0 = fileDocs.find(doc => doc.id === id);
-            const uploadConfig = collection_0?.upload;
-            if (!doc_0) {
-              return null;
-            }
-            return /*#__PURE__*/_jsx(FileDetails, {
-              collectionSlug: relationTo,
-              doc: doc_0,
-              hasMany: true,
-              isSortable: isSortable,
-              removeItem: removeItem,
-              rowIndex: index_0,
-              uploadConfig: uploadConfig
-            }, id);
-          })
-        })
-      }), /*#__PURE__*/_jsxs("div", {
-        className: [`${baseClass}__controls`].join(' '),
-        children: [/*#__PURE__*/_jsxs("div", {
-          className: [`${baseClass}__buttons`].join(' '),
-          children: [canCreate && /*#__PURE__*/_jsx("div", {
-            className: [`${baseClass}__add-new`].join(' '),
-            children: /*#__PURE__*/_jsx(AddNewRelation, {
-              Button: /*#__PURE__*/_jsx(Button, {
-                buttonStyle: "icon-label",
-                el: "span",
-                icon: "plus",
-                iconPosition: "left",
-                iconStyle: "with-border",
-                children: t('fields:addNew')
-              }),
-              hasMany: hasMany,
-              path: _path,
-              relationTo: relationTo,
-              setValue: setValue,
-              unstyled: true,
-              value: value
-            })
-          }), /*#__PURE__*/_jsx(ListDrawerToggler, {
-            className: `${baseClass}__toggler`,
-            disabled: readOnly,
-            children: /*#__PURE__*/_jsx("div", {
-              children: /*#__PURE__*/_jsx(Button, {
-                buttonStyle: "icon-label",
-                el: "span",
-                icon: "plus",
-                iconPosition: "left",
-                iconStyle: "with-border",
-                children: t('fields:chooseFromExisting')
-              })
-            })
-          })]
-        }), Boolean(value.length) && /*#__PURE__*/_jsx("button", {
-          className: `${baseClass}__clear-all`,
-          onClick: () => setValue([]),
-          type: "button",
-          children: t('general:clearAll')
-        })]
-      })]
-    }), /*#__PURE__*/_jsx(ListDrawer, {
-      enableRowSelections: true,
-      onBulkSelect: onBulkSelect,
-      onSelect: selection => {
-        if (value?.length) setValue([...value, selection.docID]);else setValue([selection.docID]);
-      }
-    })]
-  });
-};
+    $[8] = fileDocs;
+    $[9] = moveRow;
+    $[10] = isSortable;
+    $[11] = readonly;
+    $[12] = removeItem;
+    $[13] = serverURL;
+    $[14] = t3;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  return t4;
+}
+function _temp(t0) {
+  const {
+    value
+  } = t0;
+  return String(value.id);
+}
 //# sourceMappingURL=index.js.map

package/dist/fields/Upload/HasMany/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["qs","Fragment","useCallback","useEffect","useMemo","useState","AddNewRelation","Button","DraggableSortable","FileDetails","useListDrawer","useConfig","useLocale","useTranslation","FieldLabel","baseClass","UploadComponentHasMany","props","canCreate","field","_path","admin","components","Label","isSortable","hasMany","label","relationTo","fieldHookResult","filterOptions","filterOptionsFromProps","setValue","value","readOnly","i18n","t","config","collections","routes","api","serverURL","id","not_in","fileDocs","setFileDocs","missingFiles","setMissingFiles","code","length","query","depth","draft","locale","where","and","in","fetchFile","response","fetch","body","stringify","credentials","headers","language","method","ok","json","docs","moveItemInArray","array","moveFromIndex","moveToIndex","newArray","item","splice","moveRow","updatedArray","removeItem","index","ListDrawer","ListDrawerToggler","collectionSlugs","map","collection","slug","find","coll","labels","joinWithCommaAndOr","items","or","join","slice","forEach","includes","push","singular","onBulkSelect","selections","selectedIDs","Object","entries","reduce","acc","key","_jsxs","className","_jsx","ids","onDragEnd","Boolean","doc","uploadConfig","upload","collectionSlug","rowIndex","buttonStyle","el","icon","iconPosition","iconStyle","path","unstyled","disabled","onClick","type","enableRowSelections","onSelect","selection","docID"],"sources":["../../../../src/fields/Upload/HasMany/index.tsx"],"sourcesContent":["'use client'\nimport type { FilterOptionsResult, Where } from 'payload'\n\nimport * as qs from 'qs-esm'\nimport { Fragment, useCallback, useEffect, useMemo, useState } from 'react'\n\nimport type { useSelection } from '../../../providers/Selection/index.js'\nimport type { UploadFieldPropsWithContext } from '../HasOne/index.js'\n\nimport { AddNewRelation } from '../../../elements/AddNewRelation/index.js'\nimport { Button } from '../../../elements/Button/index.js'\nimport { DraggableSortable } from '../../../elements/DraggableSortable/index.js'\nimport { FileDetails } from '../../../elements/FileDetails/index.js'\nimport { useListDrawer } from '../../../elements/ListDrawer/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { FieldLabel } from '../../FieldLabel/index.js'\n\nconst baseClass = 'upload upload--has-many'\n\nimport './index.scss'\n\nexport const UploadComponentHasMany: React.FC<UploadFieldPropsWithContext<string[]>> = (props) => {\n  const {\n    canCreate,\n    field,\n    field: {\n      _path,\n      admin: {\n        components: { Label },\n        isSortable,\n      },\n      hasMany,\n      label,\n      relationTo,\n    },\n    fieldHookResult: { filterOptions: filterOptionsFromProps, setValue, value },\n    readOnly,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  const {\n    config: {\n      collections,\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const filterOptions: FilterOptionsResult = useMemo(() => {\n    if (typeof relationTo === 'string') {\n      return {\n        ...filterOptionsFromProps,\n        [relationTo]: {\n          ...((filterOptionsFromProps?.[relationTo] as any) || {}),\n          id: {\n            ...((filterOptionsFromProps?.[relationTo] as any)?.id || {}),\n            not_in: (filterOptionsFromProps?.[relationTo] as any)?.id?.not_in || value,\n          },\n        },\n      }\n    }\n  }, [value, relationTo, filterOptionsFromProps])\n\n  const [fileDocs, setFileDocs] = useState([])\n  const [missingFiles, setMissingFiles] = useState(false)\n\n  const { code } = useLocale()\n\n  useEffect(() => {\n    if (value !== null && typeof value !== 'undefined' && value.length !== 0) {\n      const query: {\n        [key: string]: unknown\n        where: Where\n      } = {\n        depth: 0,\n        draft: true,\n        locale: code,\n        where: {\n          and: [\n            {\n              id: {\n                in: value,\n              },\n            },\n          ],\n        },\n      }\n\n      const fetchFile = async () => {\n        const response = await fetch(`${serverURL}${api}/${relationTo}`, {\n          body: qs.stringify(query),\n          credentials: 'include',\n          headers: {\n            'Accept-Language': i18n.language,\n            'Content-Type': 'application/x-www-form-urlencoded',\n            'X-HTTP-Method-Override': 'GET',\n          },\n          method: 'POST',\n        })\n        if (response.ok) {\n          const json = await response.json()\n          setFileDocs(json.docs)\n        } else {\n          setMissingFiles(true)\n          setFileDocs([])\n        }\n      }\n\n      void fetchFile()\n    }\n  }, [value, relationTo, api, serverURL, i18n, code])\n\n  function moveItemInArray<T>(array: T[], moveFromIndex: number, moveToIndex: number): T[] {\n    const newArray = [...array]\n    const [item] = newArray.splice(moveFromIndex, 1)\n\n    newArray.splice(moveToIndex, 0, item)\n\n    return newArray\n  }\n\n  const moveRow = useCallback(\n    (moveFromIndex: number, moveToIndex: number) => {\n      const updatedArray = moveItemInArray(value, moveFromIndex, moveToIndex)\n      setValue(updatedArray)\n    },\n    [value, setValue],\n  )\n\n  const removeItem = useCallback(\n    (index: number) => {\n      const updatedArray = [...value]\n      updatedArray.splice(index, 1)\n      setValue(updatedArray)\n    },\n    [value, setValue],\n  )\n\n  const [ListDrawer, ListDrawerToggler] = useListDrawer({\n    collectionSlugs:\n      typeof relationTo === 'string'\n        ? [relationTo]\n        : collections.map((collection) => collection.slug),\n    filterOptions,\n  })\n\n  const collection = collections.find((coll) => coll.slug === relationTo)\n\n  // Get the labels of the collections that the relation is to\n  const labels = useMemo(() => {\n    function joinWithCommaAndOr(items: string[]): string {\n      const or = t('general:or')\n\n      if (items.length === 0) return ''\n      if (items.length === 1) return items[0]\n      if (items.length === 2) return items.join(` ${or} `)\n\n      return items.slice(0, -1).join(', ') + ` ${or} ` + items[items.length - 1]\n    }\n\n    const labels = []\n\n    collections.forEach((collection) => {\n      if (relationTo.includes(collection.slug)) {\n        labels.push(collection.labels?.singular || collection.slug)\n      }\n    })\n\n    return joinWithCommaAndOr(labels)\n  }, [collections, relationTo, t])\n\n  const onBulkSelect = useCallback(\n    (selections: ReturnType<typeof useSelection>['selected']) => {\n      const selectedIDs = Object.entries(selections).reduce(\n        (acc, [key, value]) => (value ? [...acc, key] : acc),\n        [] as string[],\n      )\n      if (value?.length) setValue([...value, ...selectedIDs])\n      else setValue(selectedIDs)\n    },\n    [setValue, value],\n  )\n\n  return (\n    <Fragment>\n      <div className={[baseClass].join(' ')}>\n        <FieldLabel Label={Label} field={field} label={label} />\n\n        <div>\n          {missingFiles || !value?.length ? (\n            <div className={[`${baseClass}__no-data`].join(' ')}>\n              {t('version:noRowsSelected', { label: labels })}\n            </div>\n          ) : (\n            <DraggableSortable\n              className={`${baseClass}__draggable-rows`}\n              ids={value}\n              onDragEnd={({ moveFromIndex, moveToIndex }) => moveRow(moveFromIndex, moveToIndex)}\n            >\n              {Boolean(value.length) &&\n                value.map((id, index) => {\n                  const doc = fileDocs.find((doc) => doc.id === id)\n                  const uploadConfig = collection?.upload\n\n                  if (!doc) {\n                    return null\n                  }\n\n                  return (\n                    <FileDetails\n                      collectionSlug={relationTo}\n                      doc={doc}\n                      hasMany={true}\n                      isSortable={isSortable}\n                      key={id}\n                      removeItem={removeItem}\n                      rowIndex={index}\n                      uploadConfig={uploadConfig}\n                    />\n                  )\n                })}\n            </DraggableSortable>\n          )}\n        </div>\n\n        <div className={[`${baseClass}__controls`].join(' ')}>\n          <div className={[`${baseClass}__buttons`].join(' ')}>\n            {canCreate && (\n              <div className={[`${baseClass}__add-new`].join(' ')}>\n                <AddNewRelation\n                  Button={\n                    <Button\n                      buttonStyle=\"icon-label\"\n                      el=\"span\"\n                      icon=\"plus\"\n                      iconPosition=\"left\"\n                      iconStyle=\"with-border\"\n                    >\n                      {t('fields:addNew')}\n                    </Button>\n                  }\n                  hasMany={hasMany}\n                  path={_path}\n                  relationTo={relationTo}\n                  setValue={setValue}\n                  unstyled\n                  value={value}\n                />\n              </div>\n            )}\n            <ListDrawerToggler className={`${baseClass}__toggler`} disabled={readOnly}>\n              <div>\n                <Button\n                  buttonStyle=\"icon-label\"\n                  el=\"span\"\n                  icon=\"plus\"\n                  iconPosition=\"left\"\n                  iconStyle=\"with-border\"\n                >\n                  {t('fields:chooseFromExisting')}\n                </Button>\n              </div>\n            </ListDrawerToggler>\n          </div>\n          {Boolean(value.length) && (\n            <button\n              className={`${baseClass}__clear-all`}\n              onClick={() => setValue([])}\n              type=\"button\"\n            >\n              {t('general:clearAll')}\n            </button>\n          )}\n        </div>\n      </div>\n      <ListDrawer\n        enableRowSelections\n        onBulkSelect={onBulkSelect}\n        onSelect={(selection) => {\n          if (value?.length) setValue([...value, selection.docID])\n          else setValue([selection.docID])\n        }}\n      />\n    </Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","DraggableSortableItem","DraggableSortable","DragHandleIcon","RelationshipContent","UploadCard","baseClass","UploadComponentHasMany","props","$","className","fileDocs","isSortable","onRemove","onReorder","readonly","serverURL","t0","moveFromIndex","moveToIndex","updatedArray","item","splice","moveRow","t1","index","updatedArray_0","length","removeItem","t2","filter","Boolean","t3","join","t4","t5","t6","moveFromIndex_0","moveToIndex_0","t7","index_0","relationTo","value","value_0","id","String","_jsx","disabled","children","draggableSortableItemProps","ref","setNodeRef","style","transform","transition","zIndex","isDragging","undefined","_jsxs","size","attributes","listeners","allowEdit","allowRemove","alt","filename","byteSize","filesize","collectionSlug","mimeType","src","url","withMeta","x","width","y","height","ids","map","_temp","onDragEnd"],"sources":["../../../../src/fields/Upload/HasMany/index.tsx"],"sourcesContent":["'use client'\nimport type { JsonObject } from 'payload'\n\nimport React from 'react'\n\nimport { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js'\nimport { DraggableSortable } from '../../../elements/DraggableSortable/index.js'\nimport { DragHandleIcon } from '../../../icons/DragHandle/index.js'\nimport { RelationshipContent } from '../RelationshipContent/index.js'\nimport { UploadCard } from '../UploadCard/index.js'\n\nconst baseClass = 'upload upload--has-many'\n\nimport './index.scss'\n\ntype Props = {\n  readonly className?: string\n  readonly fileDocs: {\n    relationTo: string\n    value: JsonObject\n  }[]\n  readonly isSortable?: boolean\n  readonly onRemove?: (value) => void\n  readonly onReorder?: (value) => void\n  readonly readonly?: boolean\n  readonly serverURL: string\n}\nexport function UploadComponentHasMany(props: Props) {\n  const { className, fileDocs, isSortable, onRemove, onReorder, readonly, serverURL } = props\n\n  const moveRow = React.useCallback(\n    (moveFromIndex: number, moveToIndex: number) => {\n      if (moveFromIndex === moveToIndex) return\n\n      const updatedArray = [...fileDocs]\n      const [item] = updatedArray.splice(moveFromIndex, 1)\n\n      updatedArray.splice(moveToIndex, 0, item)\n\n      onReorder(updatedArray)\n    },\n    [fileDocs, onReorder],\n  )\n\n  const removeItem = React.useCallback(\n    (index: number) => {\n      const updatedArray = [...(fileDocs || [])]\n      updatedArray.splice(index, 1)\n      onRemove(updatedArray.length === 0 ? [] : updatedArray)\n    },\n    [fileDocs, onRemove],\n  )\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <DraggableSortable\n        className={`${baseClass}__draggable-rows`}\n        ids={fileDocs?.map(({ value }) => String(value.id))}\n        onDragEnd={({ moveFromIndex, moveToIndex }) => moveRow(moveFromIndex, moveToIndex)}\n      >\n        {fileDocs.map(({ relationTo, value }, index) => {\n          const id = String(value.id)\n          return (\n            <DraggableSortableItem disabled={!isSortable} id={id} key={id}>\n              {(draggableSortableItemProps) => (\n                <div\n                  className={[\n                    `${baseClass}__dragItem`,\n                    draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  ref={draggableSortableItemProps.setNodeRef}\n                  style={{\n                    transform: draggableSortableItemProps.transform,\n                    transition: draggableSortableItemProps.transition,\n                    zIndex: draggableSortableItemProps.isDragging ? 1 : undefined,\n                  }}\n                >\n                  <UploadCard size=\"small\">\n                    {isSortable && draggableSortableItemProps && (\n                      <div\n                        className={`${baseClass}__drag`}\n                        {...draggableSortableItemProps.attributes}\n                        {...draggableSortableItemProps.listeners}\n                      >\n                        <DragHandleIcon />\n                      </div>\n                    )}\n\n                    <RelationshipContent\n                      allowEdit={!readonly}\n                      allowRemove={!readonly}\n                      alt={(value?.alt || value?.filename) as string}\n                      byteSize={value.filesize as number}\n                      collectionSlug={relationTo}\n                      filename={value.filename as string}\n                      id={id}\n                      mimeType={value?.mimeType as string}\n                      onRemove={() => removeItem(index)}\n                      src={`${serverURL}${value.url}`}\n                      withMeta={false}\n                      x={value?.width as number}\n                      y={value?.height as number}\n                    />\n                  </UploadCard>\n                </div>\n              )}\n            </DraggableSortableItem>\n          )\n        })}\n      </DraggableSortable>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Upload/HasMany/index.scss

@@ -4,68 +4,24 @@
   position: relative;
   max-width: 100%;
 
-  &__controls {
-    display: flex;
-    flex-wrap: wrap;
-    gap: base(2);
-    margin-top: base(1);
-
-    @include extra-small-break {
-      gap: base(1);
-    }
-  }
-
-  &__buttons {
-    display: flex;
-    flex-wrap: wrap;
-    gap: base(1);
-
-    & .relationship-add-new__add-button {
-      padding: 0;
-    }
-  }
-
-  &__add-new {
-    display: flex;
-    gap: base(0.5);
-  }
-
-  &__clear-all {
-    all: unset;
-    flex-shrink: 0;
-    font-size: inherit;
-    font-family: inherit;
-    color: inherit;
-    cursor: pointer;
-    margin-inline-start: auto;
-    color: var(--theme-elevation-800);
-
-    @include extra-small-break {
-      margin-inline-start: 0;
-    }
-  }
-
   &__draggable-rows {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: calc(var(--base) / 4);
   }
 
-  &__no-data {
-    background: var(--theme-elevation-50);
-    padding: 1rem 0.75rem;
-    border-radius: 3px;
-    color: var(--theme-elevation-700);
-    text-align: center;
-  }
-}
+  &__dragItem {
+    .icon--drag-handle {
+      color: var(--theme-elevation-400);
+    }
 
-html[data-theme='light'] {
-  .upload {
-  }
-}
+    .thumbnail {
+      width: 26px;
+      height: 26px;
+    }
 
-html[data-theme='dark'] {
-  .upload {
+    .uploadDocRelationshipContent__details {
+      line-height: 1.2;
+    }
   }
 }

package/dist/fields/Upload/HasOne/index.d.ts

@@ -1,12 +1,16 @@
-import type { UploadFieldProps } from 'payload';
+import type { JsonObject } from 'payload';
 import React from 'react';
-import type { useField } from '../../../forms/useField/index.js';
 import './index.scss';
-export type UploadFieldPropsWithContext<TValue extends string | string[] = string> = {
-    readonly canCreate: boolean;
-    readonly disabled: boolean;
-    readonly fieldHookResult: ReturnType<typeof useField<TValue>>;
-    readonly onChange: (value: unknown) => void;
-} & UploadFieldProps;
-export declare const UploadComponentHasOne: React.FC<UploadFieldPropsWithContext>;
+type Props = {
+    readonly className?: string;
+    readonly fileDoc: {
+        relationTo: string;
+        value: JsonObject;
+    };
+    readonly onRemove?: () => void;
+    readonly readonly?: boolean;
+    readonly serverURL: string;
+};
+export declare function UploadComponentHasOne(props: Props): React.JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/Upload/HasOne/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Upload/HasOne/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAA;AAIhE,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,2BAA2B,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,IAAI;IACnF,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,eAAe,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAA;IAC7D,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CAC5C,GAAG,gBAAgB,CAAA;AAEpB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAwDvE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Upload/HasOne/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAIrB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,OAAO,EAAE;QAChB,UAAU,EAAE,MAAM,CAAA;QAClB,KAAK,EAAE,UAAU,CAAA;KAClB,CAAA;IACD,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,KAAK,qBAuBjD"}