@payloadcms/ui 3.0.0-beta.90 → 3.0.0-beta.91

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

@@ -1,6 +1,5 @@
 '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';
@@ -16,453 +15,224 @@ import { FieldLabel } from '../../FieldLabel/index.js';
 const baseClass = 'upload upload--has-many';
 import './index.scss';
 export const UploadComponentHasMany = props => {
-  const $ = _c(85);
   const {
     canCreate,
     field,
-    field: t0,
-    fieldHookResult: t1,
+    field: {
+      _path,
+      admin: {
+        components: {
+          Label
+        },
+        isSortable
+      },
+      hasMany,
+      label,
+      relationTo
+    },
+    fieldHookResult: {
+      filterOptions: filterOptionsFromProps,
+      setValue,
+      value
+    },
     readOnly
   } = props;
-  const {
-    _path,
-    admin: t2,
-    hasMany,
-    label,
-    relationTo
-  } = t0;
-  const {
-    components: t3,
-    isSortable
-  } = t2;
-  const {
-    Label
-  } = t3;
-  const {
-    filterOptions: filterOptionsFromProps,
-    setValue,
-    value
-  } = t1;
   const {
     i18n,
     t
   } = useTranslation();
   const {
-    config: t4
+    config: {
+      collections,
+      routes: {
+        api
+      },
+      serverURL
+    }
   } = useConfig();
-  const {
-    collections,
-    routes: t5,
-    serverURL
-  } = t4;
-  const {
-    api
-  } = t5;
-  let t6;
-  bb0: {
-    if (typeof relationTo === "string") {
-      let t7;
-      if ($[0] !== filterOptionsFromProps || $[1] !== relationTo) {
-        t7 = filterOptionsFromProps?.[relationTo] || {};
-        $[0] = filterOptionsFromProps;
-        $[1] = relationTo;
-        $[2] = t7;
-      } else {
-        t7 = $[2];
-      }
-      let t8;
-      if ($[3] !== filterOptionsFromProps || $[4] !== relationTo) {
-        t8 = filterOptionsFromProps?.[relationTo]?.id || {};
-        $[3] = filterOptionsFromProps;
-        $[4] = relationTo;
-        $[5] = t8;
-      } else {
-        t8 = $[5];
-      }
-      const t9 = filterOptionsFromProps?.[relationTo]?.id?.not_in || value;
-      let t10;
-      if ($[6] !== t8 || $[7] !== t9) {
-        t10 = {
-          ...t8,
-          not_in: t9
-        };
-        $[6] = t8;
-        $[7] = t9;
-        $[8] = t10;
-      } else {
-        t10 = $[8];
-      }
-      let t11;
-      if ($[9] !== t7 || $[10] !== t10) {
-        t11 = {
-          ...t7,
-          id: t10
-        };
-        $[9] = t7;
-        $[10] = t10;
-        $[11] = t11;
-      } else {
-        t11 = $[11];
-      }
-      let t12;
-      if ($[12] !== filterOptionsFromProps || $[13] !== relationTo || $[14] !== t11) {
-        t12 = {
-          ...filterOptionsFromProps,
-          [relationTo]: t11
-        };
-        $[12] = filterOptionsFromProps;
-        $[13] = relationTo;
-        $[14] = t11;
-        $[15] = t12;
-      } else {
-        t12 = $[15];
-      }
-      t6 = t12;
-      break bb0;
+  const filterOptions = useMemo(() => {
+    if (typeof relationTo === 'string') {
+      return {
+        ...filterOptionsFromProps,
+        [relationTo]: {
+          ...(filterOptionsFromProps?.[relationTo] || {}),
+          id: {
+            ...(filterOptionsFromProps?.[relationTo]?.id || {}),
+            not_in: filterOptionsFromProps?.[relationTo]?.id?.not_in || value
+          }
+        }
+      };
     }
-    t6 = undefined;
-  }
-  const filterOptions = t6;
-  let t7;
-  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = [];
-    $[16] = t7;
-  } else {
-    t7 = $[16];
-  }
-  const [fileDocs, setFileDocs] = useState(t7);
+  }, [value, relationTo, filterOptionsFromProps]);
+  const [fileDocs, setFileDocs] = useState([]);
   const [missingFiles, setMissingFiles] = useState(false);
   const {
     code
   } = useLocale();
-  let t8;
-  if ($[17] !== value || $[18] !== code || $[19] !== serverURL || $[20] !== api || $[21] !== relationTo || $[22] !== i18n.language) {
-    t8 = () => {
-      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([]);
-          }
-        };
-        fetchFile();
-      }
-    };
-    $[17] = value;
-    $[18] = code;
-    $[19] = serverURL;
-    $[20] = api;
-    $[21] = relationTo;
-    $[22] = i18n.language;
-    $[23] = t8;
-  } else {
-    t8 = $[23];
-  }
-  let t9;
-  if ($[24] !== value || $[25] !== relationTo || $[26] !== api || $[27] !== serverURL || $[28] !== i18n || $[29] !== code) {
-    t9 = [value, relationTo, api, serverURL, i18n, code];
-    $[24] = value;
-    $[25] = relationTo;
-    $[26] = api;
-    $[27] = serverURL;
-    $[28] = i18n;
-    $[29] = code;
-    $[30] = t9;
-  } else {
-    t9 = $[30];
-  }
-  useEffect(t8, t9);
-  let t10;
-  if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
-    t10 = function moveItemInArray(array, moveFromIndex, moveToIndex) {
-      const newArray = [...array];
-      const [item] = newArray.splice(moveFromIndex, 1);
-      newArray.splice(moveToIndex, 0, item);
-      return newArray;
-    };
-    $[31] = t10;
-  } else {
-    t10 = $[31];
-  }
-  const moveItemInArray = t10;
-  let t11;
-  if ($[32] !== value || $[33] !== setValue) {
-    t11 = (moveFromIndex_0, moveToIndex_0) => {
-      const updatedArray = moveItemInArray(value, moveFromIndex_0, moveToIndex_0);
-      setValue(updatedArray);
-    };
-    $[32] = value;
-    $[33] = setValue;
-    $[34] = t11;
-  } else {
-    t11 = $[34];
-  }
-  const moveRow = t11;
-  let t12;
-  if ($[35] !== value || $[36] !== setValue) {
-    t12 = index => {
-      const updatedArray_0 = [...value];
-      updatedArray_0.splice(index, 1);
-      setValue(updatedArray_0);
-    };
-    $[35] = value;
-    $[36] = setValue;
-    $[37] = t12;
-  } else {
-    t12 = $[37];
-  }
-  const removeItem = t12;
-  let t13;
-  if ($[38] !== relationTo || $[39] !== collections) {
-    t13 = typeof relationTo === "string" ? [relationTo] : collections.map(_temp);
-    $[38] = relationTo;
-    $[39] = collections;
-    $[40] = t13;
-  } else {
-    t13 = $[40];
-  }
-  let t14;
-  if ($[41] !== t13 || $[42] !== filterOptions) {
-    t14 = {
-      collectionSlugs: t13,
-      filterOptions
-    };
-    $[41] = t13;
-    $[42] = filterOptions;
-    $[43] = t14;
-  } else {
-    t14 = $[43];
-  }
-  const [ListDrawer, ListDrawerToggler] = useListDrawer(t14);
-  let t15;
-  if ($[44] !== relationTo || $[45] !== collections || $[46] !== setValue || $[47] !== value || $[48] !== Label || $[49] !== field || $[50] !== label || $[51] !== missingFiles || $[52] !== t || $[53] !== moveRow || $[54] !== fileDocs || $[55] !== isSortable || $[56] !== removeItem || $[57] !== canCreate || $[58] !== hasMany || $[59] !== _path || $[60] !== readOnly || $[61] !== ListDrawerToggler || $[62] !== ListDrawer) {
-    let t16;
-    if ($[64] !== relationTo) {
-      t16 = coll => coll.slug === relationTo;
-      $[64] = relationTo;
-      $[65] = t16;
-    } else {
-      t16 = $[65];
-    }
-    const collection_0 = collections.find(t16);
-    let t17;
-    if ($[66] !== value || $[67] !== setValue) {
-      t17 = selections => {
-        const selectedIDs = Object.entries(selections).reduce((acc, t18) => {
-          const [key, value_0] = t18;
-          return value_0 ? [...acc, key] : acc;
-        }, []);
-        if (value?.length) {
-          setValue([...value, ...selectedIDs]);
-        } else {
-          setValue(selectedIDs);
+  useEffect(() => {
+    if (value !== null && typeof value !== 'undefined' && value.length !== 0) {
+      const query = {
+        depth: 0,
+        draft: true,
+        locale: code,
+        where: {
+          and: [{
+            id: {
+              in: value
+            }
+          }]
         }
       };
-      $[66] = value;
-      $[67] = setValue;
-      $[68] = t17;
-    } else {
-      t17 = $[68];
-    }
-    const onBulkSelect = t17;
-    let t18;
-    if ($[69] === Symbol.for("react.memo_cache_sentinel")) {
-      t18 = [baseClass];
-      $[69] = t18;
-    } else {
-      t18 = $[69];
-    }
-    let t20;
-    if ($[70] === Symbol.for("react.memo_cache_sentinel")) {
-      t20 = [`${baseClass}__controls`];
-      $[70] = t20;
-    } else {
-      t20 = $[70];
-    }
-    let t21;
-    if ($[71] === Symbol.for("react.memo_cache_sentinel")) {
-      t21 = [`${baseClass}__buttons`];
-      $[71] = t21;
-    } else {
-      t21 = $[71];
-    }
-    let t22;
-    if ($[72] !== canCreate || $[73] !== t || $[74] !== hasMany || $[75] !== _path || $[76] !== relationTo || $[77] !== setValue || $[78] !== value) {
-      t22 = canCreate && _jsx("div", {
-        className: [`${baseClass}__add-new`].join(" "),
-        children: _jsx(AddNewRelation, {
-          Button: _jsx(Button, {
-            buttonStyle: "icon-label",
-            el: "span",
-            icon: "plus",
-            iconPosition: "left",
-            iconStyle: "with-border",
-            children: t("fields:addNew")
-          }),
-          hasMany,
-          path: _path,
-          relationTo,
-          setValue,
-          unstyled: true,
-          value
-        })
-      });
-      $[72] = canCreate;
-      $[73] = t;
-      $[74] = hasMany;
-      $[75] = _path;
-      $[76] = relationTo;
-      $[77] = setValue;
-      $[78] = value;
-      $[79] = t22;
-    } else {
-      t22 = $[79];
-    }
-    let t23;
-    if ($[80] !== setValue) {
-      t23 = () => setValue([]);
-      $[80] = setValue;
-      $[81] = t23;
-    } else {
-      t23 = $[81];
-    }
-    let t24;
-    if ($[82] !== value || $[83] !== setValue) {
-      t24 = selection => {
-        if (value?.length) {
-          setValue([...value, selection.docID]);
+      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 {
-          setValue([selection.docID]);
+          setMissingFiles(true);
+          setFileDocs([]);
         }
       };
-      $[82] = value;
-      $[83] = setValue;
-      $[84] = t24;
-    } else {
-      t24 = $[84];
+      void fetchFile();
     }
-    t15 = _jsxs(Fragment, {
-      children: [_jsxs("div", {
-        className: t18.join(" "),
-        children: [_jsx(FieldLabel, {
-          Label,
-          field,
-          label
-        }), _jsx("div", {
-          children: missingFiles || !value?.length ? _jsx("div", {
-            className: [`${baseClass}__no-data`].join(" "),
-            children: t("version:noRowsFound", {
-              label: relationTo
-            })
-          }) : _jsx(DraggableSortable, {
-            className: `${baseClass}__draggable-rows`,
-            ids: value,
-            onDragEnd: t19 => {
-              const {
-                moveFromIndex: moveFromIndex_1,
-                moveToIndex: moveToIndex_1
-              } = t19;
-              return 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 _jsx(FileDetails, {
-                collectionSlug: relationTo,
-                doc: doc_0,
-                hasMany: true,
-                isSortable,
-                removeItem,
-                rowIndex: index_0,
-                uploadConfig
-              }, id);
-            })
+  }, [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);
+      }
+    });
+    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);
           })
-        }), _jsxs("div", {
-          className: t20.join(" "),
-          children: [_jsxs("div", {
-            className: t21.join(" "),
-            children: [t22, _jsx(ListDrawerToggler, {
-              className: `${baseClass}__toggler`,
-              disabled: readOnly,
-              children: _jsx("div", {
-                children: _jsx(Button, {
-                  buttonStyle: "icon-label",
-                  el: "span",
-                  icon: "plus",
-                  iconPosition: "left",
-                  iconStyle: "with-border",
-                  children: t("fields:chooseFromExisting")
-                })
+        })
+      }), /*#__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')
               })
-            })]
-          }), _jsx("button", {
-            className: `${baseClass}__clear-all`,
-            onClick: t23,
-            type: "button",
-            children: "Clear all"
+            })
           })]
+        }), Boolean(value.length) && /*#__PURE__*/_jsx("button", {
+          className: `${baseClass}__clear-all`,
+          onClick: () => setValue([]),
+          type: "button",
+          children: t('general:clearAll')
         })]
-      }), _jsx(ListDrawer, {
-        enableRowSelections: true,
-        onBulkSelect,
-        onSelect: t24
       })]
-    });
-    $[44] = relationTo;
-    $[45] = collections;
-    $[46] = setValue;
-    $[47] = value;
-    $[48] = Label;
-    $[49] = field;
-    $[50] = label;
-    $[51] = missingFiles;
-    $[52] = t;
-    $[53] = moveRow;
-    $[54] = fileDocs;
-    $[55] = isSortable;
-    $[56] = removeItem;
-    $[57] = canCreate;
-    $[58] = hasMany;
-    $[59] = _path;
-    $[60] = readOnly;
-    $[61] = ListDrawerToggler;
-    $[62] = ListDrawer;
-    $[63] = t15;
-  } else {
-    t15 = $[63];
-  }
-  return t15;
+    }), /*#__PURE__*/_jsx(ListDrawer, {
+      enableRowSelections: true,
+      onBulkSelect: onBulkSelect,
+      onSelect: selection => {
+        if (value?.length) setValue([...value, selection.docID]);else setValue([selection.docID]);
+      }
+    })]
+  });
 };
-function _temp(collection) {
-  return collection.slug;
-}
 //# sourceMappingURL=index.js.map