@payloadcms/ui 3.0.0-beta.12 → 3.0.0-beta.120

package/dist/elements/BulkUpload/EditForm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["useRouter","useSearchParams","React","useCallback","Form","useForm","WatchChildErrors","useConfig","RenderComponent","useDocumentEvents","useDocumentInfo","useEditDepth","OperationProvider","useUploadEdits","formatAdminURL","getFormState","DocumentFields","Upload","useFormsManager","BulkUploadProvider","baseClass","EditForm","submitted","action","AfterDocument","AfterFields","BeforeDocument","BeforeFields","collectionSlug","docSlug","docPermissions","getDocPreferences","getVersions","hasSavePermission","initialState","isEditing","isInitializing","onSave","onSaveFromContext","config","routes","admin","adminRoute","api","apiRoute","serverURL","getEntityConfig","router","depth","params","reportUpdate","resetUploadEdits","locale","get","collectionConfig","slug","schemaPath","useState","json","entitySlug","updatedAt","result","Date","toISOString","operation","redirectRoute","path","doc","id","push","onChange","formState","prevFormState","docPreferences","state","newFormState","body","_jsx","_jsxs","className","disabled","undefined","method","onSuccess","Fragment","components","edit","mappedComponent","uploadConfig","upload","fields","readOnly","ReportAllErrors","GetFieldProxy","getFields","getFormDataRef","useEffect","current","docConfig","activeIndex","setFormTotalErrorCount","errorCountRef","useRef","reportFormErrorCount","errorCount","index","setErrorCount"],"sources":["../../../../src/elements/BulkUpload/EditForm/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, DocumentPermissions } from 'payload'\n\nimport { useRouter, useSearchParams } from 'next/navigation.js'\nimport React, { useCallback } from 'react'\n\nimport type { EditFormProps } from './types.js'\n\nimport { Form, useForm } from '../../../forms/Form/index.js'\nimport { type FormProps } from '../../../forms/Form/types.js'\nimport { WatchChildErrors } from '../../../forms/WatchChildErrors/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { RenderComponent } from '../../../providers/Config/RenderComponent.js'\nimport { useDocumentEvents } from '../../../providers/DocumentEvents/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useEditDepth } from '../../../providers/EditDepth/index.js'\nimport { OperationProvider } from '../../../providers/Operation/index.js'\nimport { useUploadEdits } from '../../../providers/UploadEdits/index.js'\nimport { formatAdminURL } from '../../../utilities/formatAdminURL.js'\nimport { getFormState } from '../../../utilities/getFormState.js'\nimport { DocumentFields } from '../../DocumentFields/index.js'\nimport { Upload } from '../../Upload/index.js'\nimport { useFormsManager } from '../FormsManager/index.js'\nimport { BulkUploadProvider } from '../index.js'\nimport './index.scss'\n\nconst baseClass = 'collection-edit'\n\n// This component receives props only on _pages_\n// When rendered within a drawer, props are empty\n// This is solely to support custom edit views which get server-rendered\n\nexport function EditForm({ submitted }: EditFormProps) {\n  const {\n    action,\n    AfterDocument,\n    AfterFields,\n    BeforeDocument,\n    BeforeFields,\n    collectionSlug: docSlug,\n    docPermissions,\n    getDocPreferences,\n    getVersions,\n    hasSavePermission,\n    initialState,\n    isEditing,\n    isInitializing,\n    onSave: onSaveFromContext,\n  } = useDocumentInfo()\n\n  const {\n    config: {\n      routes: { admin: adminRoute, api: apiRoute },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const router = useRouter()\n  const depth = useEditDepth()\n  const params = useSearchParams()\n  const { reportUpdate } = useDocumentEvents()\n  const { resetUploadEdits } = useUploadEdits()\n\n  const locale = params.get('locale')\n\n  const collectionConfig = getEntityConfig({ collectionSlug: docSlug }) as ClientCollectionConfig\n  const collectionSlug = collectionConfig.slug\n\n  const [schemaPath] = React.useState(collectionSlug)\n\n  const onSave = useCallback(\n    (json) => {\n      reportUpdate({\n        entitySlug: collectionSlug,\n        updatedAt: json?.result?.updatedAt || new Date().toISOString(),\n      })\n\n      void getVersions()\n\n      if (typeof onSaveFromContext === 'function') {\n        void onSaveFromContext({\n          ...json,\n          operation: 'create',\n        })\n      }\n\n      if (!isEditing && depth < 2) {\n        // Redirect to the same locale if it's been set\n        const redirectRoute = formatAdminURL({\n          adminRoute,\n          path: `/collections/${collectionSlug}/${json?.doc?.id}${locale ? `?locale=${locale}` : ''}`,\n        })\n        router.push(redirectRoute)\n      } else {\n        resetUploadEdits()\n      }\n    },\n    [\n      adminRoute,\n      collectionSlug,\n      depth,\n      getVersions,\n      isEditing,\n      locale,\n      onSaveFromContext,\n      reportUpdate,\n      resetUploadEdits,\n      router,\n    ],\n  )\n\n  const onChange: NonNullable<FormProps['onChange']>[0] = useCallback(\n    async ({ formState: prevFormState }) => {\n      const docPreferences = await getDocPreferences()\n      const { state: newFormState } = await getFormState({\n        apiRoute,\n        body: {\n          collectionSlug,\n          docPreferences,\n          formState: prevFormState,\n          operation: 'create',\n          schemaPath,\n        },\n        serverURL,\n      })\n\n      return newFormState\n    },\n    [apiRoute, collectionSlug, schemaPath, getDocPreferences, serverURL],\n  )\n\n  return (\n    <OperationProvider operation=\"create\">\n      <BulkUploadProvider>\n        {BeforeDocument}\n        <Form\n          action={action}\n          className={`${baseClass}__form`}\n          disabled={isInitializing || !hasSavePermission}\n          initialState={isInitializing ? undefined : initialState}\n          isInitializing={isInitializing}\n          method=\"POST\"\n          onChange={[onChange]}\n          onSuccess={onSave}\n          submitted={submitted}\n        >\n          <DocumentFields\n            AfterFields={AfterFields}\n            BeforeFields={\n              BeforeFields || (\n                <React.Fragment>\n                  {collectionConfig?.admin?.components?.edit?.Upload ? (\n                    <RenderComponent\n                      mappedComponent={collectionConfig.admin.components.edit.Upload}\n                    />\n                  ) : (\n                    <Upload\n                      collectionSlug={collectionConfig.slug}\n                      initialState={initialState}\n                      uploadConfig={collectionConfig.upload}\n                    />\n                  )}\n                </React.Fragment>\n              )\n            }\n            docPermissions={docPermissions || ({} as DocumentPermissions)}\n            fields={collectionConfig.fields}\n            readOnly={!hasSavePermission}\n            schemaPath={schemaPath}\n          />\n          <ReportAllErrors />\n          <GetFieldProxy />\n        </Form>\n        {AfterDocument}\n      </BulkUploadProvider>\n    </OperationProvider>\n  )\n}\n\nfunction GetFieldProxy() {\n  const { getFields } = useForm()\n  const { getFormDataRef } = useFormsManager()\n\n  React.useEffect(() => {\n    getFormDataRef.current = getFields\n  }, [getFields, getFormDataRef])\n\n  return null\n}\n\nfunction ReportAllErrors() {\n  const { docConfig } = useDocumentInfo()\n  const { activeIndex, setFormTotalErrorCount } = useFormsManager()\n  const errorCountRef = React.useRef(0)\n\n  const reportFormErrorCount = React.useCallback(\n    (errorCount) => {\n      if (errorCount === errorCountRef.current) {\n        return\n      }\n      setFormTotalErrorCount({ errorCount, index: activeIndex })\n      errorCountRef.current = errorCount\n    },\n    [activeIndex, setFormTotalErrorCount],\n  )\n\n  if (!docConfig) {\n    return null\n  }\n\n  return <WatchChildErrors fields={docConfig.fields} path=\"\" setErrorCount={reportFormErrorCount} />\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/BulkUpload/EditForm/index.scss

@@ -0,0 +1,11 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .collection-edit {
+    width: 100%;
+
+    &__form {
+      height: auto;
+    }
+  }
+}

package/dist/elements/BulkUpload/EditForm/types.d.ts

@@ -0,0 +1,4 @@
+export type EditFormProps = {
+    readonly submitted?: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/elements/BulkUpload/EditForm/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/EditForm/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA"}

package/dist/elements/BulkUpload/EditForm/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/elements/BulkUpload/EditForm/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/elements/BulkUpload/EditForm/types.ts"],"sourcesContent":["export type EditFormProps = {\n  readonly submitted?: boolean\n}\n"],"mappings":"AAAA","ignoreList":[]}

package/dist/elements/BulkUpload/FileSidebar/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.scss';
+export declare function FileSidebar(): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/BulkUpload/FileSidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/FileSidebar/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAgBzB,OAAO,cAAc,CAAA;AASrB,wBAAgB,WAAW,sBA+J1B"}

package/dist/elements/BulkUpload/FileSidebar/index.js

@@ -0,0 +1,254 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useModal } from '@faceless-ui/modal';
+import { useWindowInfo } from '@faceless-ui/window-info';
+import { isImage } from 'payload/shared';
+import React from 'react';
+import AnimateHeightImport from 'react-animate-height';
+import { ChevronIcon } from '../../../icons/Chevron/index.js';
+import { XIcon } from '../../../icons/X/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { Button } from '../../Button/index.js';
+import { Drawer } from '../../Drawer/index.js';
+import { ErrorPill } from '../../ErrorPill/index.js';
+import { Pill } from '../../Pill/index.js';
+import { ShimmerEffect } from '../../ShimmerEffect/index.js';
+import { Thumbnail } from '../../Thumbnail/index.js';
+import { Actions } from '../ActionsBar/index.js';
+import { AddFilesView } from '../AddFilesView/index.js';
+import { useFormsManager } from '../FormsManager/index.js';
+import { useBulkUpload } from '../index.js';
+import './index.scss';
+const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
+const addMoreFilesDrawerSlug = 'bulk-upload-drawer--add-more-files';
+const baseClass = 'file-selections';
+export function FileSidebar() {
+  const $ = _c(34);
+  const {
+    activeIndex,
+    addFiles,
+    forms,
+    isInitializing,
+    removeFile,
+    setActiveIndex,
+    totalErrorCount
+  } = useFormsManager();
+  const {
+    initialFiles,
+    maxFiles
+  } = useBulkUpload();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    closeModal,
+    openModal
+  } = useModal();
+  const [showFiles, setShowFiles] = React.useState(false);
+  const {
+    breakpoints
+  } = useWindowInfo();
+  let t0;
+  if ($[0] !== removeFile) {
+    t0 = indexToRemove => {
+      removeFile(indexToRemove);
+    };
+    $[0] = removeFile;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const handleRemoveFile = t0;
+  let t1;
+  if ($[2] !== addFiles || $[3] !== closeModal) {
+    t1 = filelist => {
+      addFiles(filelist);
+      closeModal(addMoreFilesDrawerSlug);
+    };
+    $[2] = addFiles;
+    $[3] = closeModal;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const handleAddFiles = t1;
+  const getFileSize = _temp;
+  const totalFileCount = isInitializing ? initialFiles.length : forms.length;
+  const t2 = showFiles && `${baseClass}__showingFiles`;
+  let t3;
+  if ($[5] !== t2) {
+    t3 = [baseClass, t2].filter(Boolean);
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const t4 = t3.join(" ");
+  let t5;
+  if ($[7] !== breakpoints.m || $[8] !== showFiles || $[9] !== totalErrorCount || $[10] !== i18n || $[11] !== totalFileCount || $[12] !== t || $[13] !== maxFiles || $[14] !== openModal || $[15] !== closeModal || $[16] !== handleAddFiles || $[17] !== isInitializing || $[18] !== forms || $[19] !== initialFiles || $[20] !== activeIndex || $[21] !== setActiveIndex || $[22] !== handleRemoveFile || $[23] !== t4) {
+    let t6;
+    if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = () => setShowFiles(prev => !prev);
+      $[25] = t6;
+    } else {
+      t6 = $[25];
+    }
+    let t7;
+    if ($[26] !== closeModal) {
+      t7 = () => closeModal(addMoreFilesDrawerSlug);
+      $[26] = closeModal;
+      $[27] = t7;
+    } else {
+      t7 = $[27];
+    }
+    let t8;
+    if ($[28] !== activeIndex || $[29] !== setActiveIndex || $[30] !== i18n || $[31] !== t || $[32] !== handleRemoveFile) {
+      t8 = (t9, index_0) => {
+        const {
+          errorCount,
+          formState
+        } = t9;
+        const currentFile = formState.file.value;
+        return _jsxs("div", {
+          className: [`${baseClass}__fileRowContainer`, index_0 === activeIndex && `${baseClass}__fileRowContainer--active`, errorCount && errorCount > 0 && `${baseClass}__fileRowContainer--error`].filter(Boolean).join(" "),
+          children: [_jsxs("button", {
+            className: `${baseClass}__fileRow`,
+            onClick: () => setActiveIndex(index_0),
+            type: "button",
+            children: [_jsx(Thumbnail, {
+              className: `${baseClass}__thumbnail`,
+              fileSrc: isImage(currentFile.type) ? URL.createObjectURL(currentFile) : undefined
+            }), _jsx("div", {
+              className: `${baseClass}__fileDetails`,
+              children: _jsx("p", {
+                className: `${baseClass}__fileName`,
+                title: currentFile.name,
+                children: currentFile.name
+              })
+            }), _jsx("p", {
+              className: `${baseClass}__fileSize`,
+              children: getFileSize(currentFile)
+            }), _jsx("div", {
+              className: `${baseClass}__remove ${baseClass}__remove--underlay`,
+              children: _jsx(XIcon, {})
+            }), errorCount ? _jsx(ErrorPill, {
+              className: `${baseClass}__errorCount`,
+              count: errorCount,
+              i18n
+            }) : null]
+          }), _jsx("button", {
+            "aria-label": t("general:remove"),
+            className: `${baseClass}__remove ${baseClass}__remove--overlay`,
+            onClick: () => handleRemoveFile(index_0),
+            type: "button",
+            children: _jsx(XIcon, {})
+          })]
+        }, index_0);
+      };
+      $[28] = activeIndex;
+      $[29] = setActiveIndex;
+      $[30] = i18n;
+      $[31] = t;
+      $[32] = handleRemoveFile;
+      $[33] = t8;
+    } else {
+      t8 = $[33];
+    }
+    t5 = _jsxs("div", {
+      className: t4,
+      children: [breakpoints.m && showFiles ? _jsx("div", {
+        className: `${baseClass}__mobileBlur`
+      }) : null, _jsxs("div", {
+        className: `${baseClass}__header`,
+        children: [_jsxs("div", {
+          className: `${baseClass}__headerTopRow`,
+          children: [_jsxs("div", {
+            className: `${baseClass}__header__text`,
+            children: [_jsx(ErrorPill, {
+              count: totalErrorCount,
+              i18n,
+              withMessage: true
+            }), _jsx("p", {
+              children: _jsxs("strong", {
+                title: `${totalFileCount} ${t(totalFileCount > 1 ? "upload:filesToUpload" : "upload:fileToUpload")}`,
+                children: [totalFileCount, " ", t(totalFileCount > 1 ? "upload:filesToUpload" : "upload:fileToUpload")]
+              })
+            })]
+          }), _jsxs("div", {
+            className: `${baseClass}__header__actions`,
+            children: [typeof maxFiles === "number" && totalFileCount < maxFiles ? _jsx(Pill, {
+              onClick: () => openModal(addMoreFilesDrawerSlug),
+              children: t("upload:addFile")
+            }) : null, _jsx(Button, {
+              buttonStyle: "transparent",
+              className: `${baseClass}__toggler`,
+              onClick: t6,
+              children: _jsx(ChevronIcon, {
+                direction: showFiles ? "down" : "up"
+              })
+            }), _jsx(Drawer, {
+              gutter: false,
+              Header: null,
+              slug: addMoreFilesDrawerSlug,
+              children: _jsx(AddFilesView, {
+                onCancel: t7,
+                onDrop: handleAddFiles
+              })
+            })]
+          })]
+        }), _jsx("div", {
+          className: `${baseClass}__header__mobileDocActions`,
+          children: _jsx(Actions, {})
+        })]
+      }), _jsx("div", {
+        className: `${baseClass}__animateWrapper`,
+        children: _jsx(AnimateHeight, {
+          duration: 200,
+          height: !breakpoints.m || showFiles ? "auto" : 0,
+          children: _jsxs("div", {
+            className: `${baseClass}__filesContainer`,
+            children: [isInitializing && forms.length === 0 && initialFiles.length > 0 ? Array.from(initialFiles).map(_temp2) : null, forms.map(t8)]
+          })
+        })
+      })]
+    });
+    $[7] = breakpoints.m;
+    $[8] = showFiles;
+    $[9] = totalErrorCount;
+    $[10] = i18n;
+    $[11] = totalFileCount;
+    $[12] = t;
+    $[13] = maxFiles;
+    $[14] = openModal;
+    $[15] = closeModal;
+    $[16] = handleAddFiles;
+    $[17] = isInitializing;
+    $[18] = forms;
+    $[19] = initialFiles;
+    $[20] = activeIndex;
+    $[21] = setActiveIndex;
+    $[22] = handleRemoveFile;
+    $[23] = t4;
+    $[24] = t5;
+  } else {
+    t5 = $[24];
+  }
+  return t5;
+}
+function _temp2(file_0, index) {
+  return _jsx(ShimmerEffect, {
+    animationDelay: `calc(${index} * ${60}ms)`,
+    height: "35px"
+  }, index);
+}
+function _temp(file) {
+  const size = file.size;
+  const i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
+  const decimals = i > 1 ? 1 : 0;
+  const formattedSize = (size / Math.pow(1024, i)).toFixed(decimals) + " " + ["B", "kB", "MB", "GB", "TB"][i];
+  return formattedSize;
+}
+//# sourceMappingURL=index.js.map

package/dist/elements/BulkUpload/FileSidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","useModal","useWindowInfo","isImage","React","AnimateHeightImport","ChevronIcon","XIcon","useTranslation","Button","Drawer","ErrorPill","Pill","ShimmerEffect","Thumbnail","Actions","AddFilesView","useFormsManager","useBulkUpload","AnimateHeight","default","addMoreFilesDrawerSlug","baseClass","FileSidebar","$","activeIndex","addFiles","forms","isInitializing","removeFile","setActiveIndex","totalErrorCount","initialFiles","maxFiles","i18n","t","closeModal","openModal","showFiles","setShowFiles","useState","breakpoints","t0","indexToRemove","handleRemoveFile","t1","filelist","handleAddFiles","getFileSize","_temp","totalFileCount","length","t2","t3","filter","Boolean","t4","join","t5","m","t6","Symbol","for","prev","t7","t8","t9","index_0","errorCount","formState","currentFile","file","value","_jsxs","className","index","children","onClick","type","_jsx","fileSrc","URL","createObjectURL","undefined","title","name","count","withMessage","buttonStyle","direction","gutter","Header","slug","onCancel","onDrop","duration","height","Array","from","map","_temp2","file_0","animationDelay","size","i","Math","floor","log","decimals","formattedSize","pow","toFixed"],"sources":["../../../../src/elements/BulkUpload/FileSidebar/index.tsx"],"sourcesContent":["'use client'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { isImage } from 'payload/shared'\nimport React from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { XIcon } from '../../../icons/X/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { Drawer } from '../../Drawer/index.js'\nimport { ErrorPill } from '../../ErrorPill/index.js'\nimport { Pill } from '../../Pill/index.js'\nimport { ShimmerEffect } from '../../ShimmerEffect/index.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport { Actions } from '../ActionsBar/index.js'\nimport { AddFilesView } from '../AddFilesView/index.js'\nimport { useFormsManager } from '../FormsManager/index.js'\nimport { useBulkUpload } from '../index.js'\nimport './index.scss'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nconst addMoreFilesDrawerSlug = 'bulk-upload-drawer--add-more-files'\n\nconst baseClass = 'file-selections'\n\nexport function FileSidebar() {\n  const {\n    activeIndex,\n    addFiles,\n    forms,\n    isInitializing,\n    removeFile,\n    setActiveIndex,\n    totalErrorCount,\n  } = useFormsManager()\n  const { initialFiles, maxFiles } = useBulkUpload()\n  const { i18n, t } = useTranslation()\n  const { closeModal, openModal } = useModal()\n  const [showFiles, setShowFiles] = React.useState(false)\n  const { breakpoints } = useWindowInfo()\n\n  const handleRemoveFile = React.useCallback(\n    (indexToRemove: number) => {\n      removeFile(indexToRemove)\n    },\n    [removeFile],\n  )\n\n  const handleAddFiles = React.useCallback(\n    (filelist: FileList) => {\n      void addFiles(filelist)\n      closeModal(addMoreFilesDrawerSlug)\n    },\n    [addFiles, closeModal],\n  )\n\n  const getFileSize = React.useCallback((file: File) => {\n    const size = file.size\n    const i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024))\n    const decimals = i > 1 ? 1 : 0\n    const formattedSize =\n      (size / Math.pow(1024, i)).toFixed(decimals) + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]\n    return formattedSize\n  }, [])\n\n  const totalFileCount = isInitializing ? initialFiles.length : forms.length\n\n  return (\n    <div\n      className={[baseClass, showFiles && `${baseClass}__showingFiles`].filter(Boolean).join(' ')}\n    >\n      {breakpoints.m && showFiles ? <div className={`${baseClass}__mobileBlur`} /> : null}\n      <div className={`${baseClass}__header`}>\n        <div className={`${baseClass}__headerTopRow`}>\n          <div className={`${baseClass}__header__text`}>\n            <ErrorPill count={totalErrorCount} i18n={i18n} withMessage />\n            <p>\n              <strong\n                title={`${totalFileCount} ${t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}`}\n              >\n                {totalFileCount}{' '}\n                {t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}\n              </strong>\n            </p>\n          </div>\n\n          <div className={`${baseClass}__header__actions`}>\n            {typeof maxFiles === 'number' && totalFileCount < maxFiles ? (\n              <Pill onClick={() => openModal(addMoreFilesDrawerSlug)}>{t('upload:addFile')}</Pill>\n            ) : null}\n            <Button\n              buttonStyle=\"transparent\"\n              className={`${baseClass}__toggler`}\n              onClick={() => setShowFiles((prev) => !prev)}\n            >\n              <ChevronIcon direction={showFiles ? 'down' : 'up'} />\n            </Button>\n\n            <Drawer gutter={false} Header={null} slug={addMoreFilesDrawerSlug}>\n              <AddFilesView\n                onCancel={() => closeModal(addMoreFilesDrawerSlug)}\n                onDrop={handleAddFiles}\n              />\n            </Drawer>\n          </div>\n        </div>\n\n        <div className={`${baseClass}__header__mobileDocActions`}>\n          <Actions />\n        </div>\n      </div>\n\n      <div className={`${baseClass}__animateWrapper`}>\n        <AnimateHeight duration={200} height={!breakpoints.m || showFiles ? 'auto' : 0}>\n          <div className={`${baseClass}__filesContainer`}>\n            {isInitializing && forms.length === 0 && initialFiles.length > 0\n              ? Array.from(initialFiles).map((file, index) => (\n                  <ShimmerEffect\n                    animationDelay={`calc(${index} * ${60}ms)`}\n                    height=\"35px\"\n                    key={index}\n                  />\n                ))\n              : null}\n            {forms.map(({ errorCount, formState }, index) => {\n              const currentFile = formState.file.value as File\n\n              return (\n                <div\n                  className={[\n                    `${baseClass}__fileRowContainer`,\n                    index === activeIndex && `${baseClass}__fileRowContainer--active`,\n                    errorCount && errorCount > 0 && `${baseClass}__fileRowContainer--error`,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  key={index}\n                >\n                  <button\n                    className={`${baseClass}__fileRow`}\n                    onClick={() => setActiveIndex(index)}\n                    type=\"button\"\n                  >\n                    <Thumbnail\n                      className={`${baseClass}__thumbnail`}\n                      fileSrc={\n                        isImage(currentFile.type) ? URL.createObjectURL(currentFile) : undefined\n                      }\n                    />\n                    <div className={`${baseClass}__fileDetails`}>\n                      <p className={`${baseClass}__fileName`} title={currentFile.name}>\n                        {currentFile.name}\n                      </p>\n                    </div>\n                    <p className={`${baseClass}__fileSize`}>{getFileSize(currentFile)}</p>\n                    <div className={`${baseClass}__remove ${baseClass}__remove--underlay`}>\n                      <XIcon />\n                    </div>\n\n                    {errorCount ? (\n                      <ErrorPill\n                        className={`${baseClass}__errorCount`}\n                        count={errorCount}\n                        i18n={i18n}\n                      />\n                    ) : null}\n                  </button>\n\n                  <button\n                    aria-label={t('general:remove')}\n                    className={`${baseClass}__remove ${baseClass}__remove--overlay`}\n                    onClick={() => handleRemoveFile(index)}\n                    type=\"button\"\n                  >\n                    <XIcon />\n                  </button>\n                </div>\n              )\n            })}\n          </div>\n        </AnimateHeight>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/BulkUpload/FileSidebar/index.scss

@@ -0,0 +1,279 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .file-selections {
+    --file-gutter-h: calc(var(--gutter-h) / 4);
+    border-right: 1px solid var(--theme-border-color);
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    width: 300px;
+    overflow: auto;
+    max-height: 100%;
+
+    &__header {
+      position: sticky;
+      top: 0;
+      margin-top: var(--base);
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      background: var(--theme-bg);
+      flex-wrap: wrap;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    &__headerTopRow {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--base);
+      width: 100%;
+      padding-block: var(--base);
+      padding-inline: var(--file-gutter-h);
+    }
+
+    &__header__text {
+      display: flex;
+      flex-direction: column;
+
+      .error-pill {
+        align-self: flex-start;
+      }
+    }
+
+    &__filesContainer {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 4);
+      margin-top: calc(var(--base) / 2);
+      width: 100%;
+      padding-inline: var(--file-gutter-h);
+
+      .shimmer-effect {
+        border-radius: var(--style-radius-m);
+      }
+    }
+
+    &__fileRowContainer {
+      --rowPadding: calc(var(--base) / 4);
+      position: relative;
+      &:last-child {
+        margin-bottom: calc(var(--base) / 4);
+      }
+    }
+
+    &__fileRow {
+      @include btn-reset;
+      display: flex;
+      padding: var(--rowPadding);
+      align-items: center;
+      gap: calc(var(--base) / 2);
+      border-radius: var(--style-radius-m);
+      max-width: 100%;
+      cursor: pointer;
+      width: 100%;
+
+      &:hover {
+        background-color: var(--theme-elevation-100);
+      }
+
+      .thumbnail {
+        width: base(1.2);
+        height: base(1.2);
+        flex-shrink: 0;
+        object-fit: cover;
+        border-radius: var(--style-radius-s);
+      }
+
+      p {
+        margin: 0;
+      }
+    }
+
+    &__fileDetails {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    &__fileRowContainer--active {
+      .file-selections__fileRow {
+        background-color: var(--theme-elevation-100);
+      }
+
+      .file-selections__remove {
+        .icon--x {
+          opacity: 1;
+        }
+      }
+    }
+
+    &__fileRowContainer--error {
+      .file-selections__fileRow {
+        background-color: var(--theme-error-100);
+      }
+
+      &.file-selections__fileRowContainer--active .file-selections__fileRow,
+      .file-selections__fileRow:hover {
+        background-color: var(--theme-error-200);
+      }
+
+      .file-selections__remove--overlay:hover {
+        background-color: var(--theme-error-50);
+
+        .icon--x {
+          opacity: 1;
+        }
+      }
+    }
+
+    &__errorCount {
+      margin-left: auto;
+      position: absolute;
+      transform: translate(50%, -50%);
+      top: 0;
+      right: 0;
+    }
+
+    &__fileName {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &__fileSize {
+      font-size: calc(var(--base) / 2);
+      color: var(--theme-elvation-400);
+      flex-shrink: 0;
+    }
+
+    &__remove {
+      @include btn-reset;
+      margin: 0;
+      margin-left: auto;
+
+      .icon--x {
+        opacity: 0.75;
+      }
+    }
+
+    &__remove--underlay {
+      pointer-events: none;
+      opacity: 0;
+    }
+
+    &__remove--overlay {
+      position: absolute;
+      transform: translateY(-50%);
+      top: 50%;
+      bottom: 50%;
+      right: var(--rowPadding);
+      height: 20px;
+      border-radius: var(--style-radius-m);
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--theme-elevation-200);
+      }
+    }
+
+    &__header__actions {
+      display: flex;
+      gap: var(--base);
+    }
+
+    &__toggler {
+      display: none;
+      margin: 0;
+      padding-block: 0;
+    }
+
+    &__header__mobileDocActions {
+      display: none;
+    }
+
+    &__animateWrapper {
+      overflow: auto;
+    }
+
+    &__mobileBlur {
+      @include blur-bg;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      transition: opacity 100ms cubic-bezier(0, 0.2, 0.2, 1);
+    }
+
+    &__showingFiles {
+      .file-selections__mobileBlur {
+        opacity: 1;
+      }
+    }
+
+    @include mid-break {
+      --file-gutter-h: var(--gutter-h);
+      flex-direction: column-reverse;
+      width: 100%;
+      position: sticky;
+      bottom: 0;
+      flex-shrink: 0;
+
+      &__showingFiles {
+        z-index: 2;
+      }
+
+      &__filesContainer {
+        @include blur-bg;
+      }
+
+      &__fileRowContainer {
+        z-index: 1;
+      }
+
+      &__header {
+        margin-top: 0;
+      }
+
+      &__headerTopRow {
+        border-top: 1px solid var(--theme-border-color);
+        padding-block: calc(var(--base) * 0.8);
+      }
+
+      &__header__mobileDocActions {
+        position: relative;
+        display: flex;
+        width: 100%;
+        padding-block: calc(var(--base) * 0.8);
+        padding-inline: var(--file-gutter-h);
+        border-top: 1px solid var(--theme-border-color);
+
+        > div {
+          display: flex;
+          justify-content: flex-end;
+          width: 100%;
+          button {
+            flex: 0.5;
+          }
+        }
+      }
+
+      &__toggler {
+        padding-right: 0;
+        display: block;
+      }
+
+      .btn {
+        margin: 0;
+      }
+    }
+  }
+}

package/dist/elements/BulkUpload/FormsManager/createFormData.d.ts

@@ -0,0 +1,3 @@
+import type { FormState } from 'payload';
+export declare function createFormData(formState?: FormState, overrides?: Record<string, any>): FormData;
+//# sourceMappingURL=createFormData.d.ts.map

package/dist/elements/BulkUpload/FormsManager/createFormData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFormData.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/FormsManager/createFormData.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAKxC,wBAAgB,cAAc,CAAC,SAAS,GAAE,SAAc,EAAE,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,YAmB5F"}

package/dist/elements/BulkUpload/FormsManager/createFormData.js

@@ -0,0 +1,22 @@
+import { serialize } from 'object-to-formdata';
+import { reduceFieldsToValues } from 'payload/shared';
+export function createFormData(formState = {}, overrides = {}) {
+  const data = reduceFieldsToValues(formState, true);
+  const file = data?.file;
+  if (file) {
+    delete data.file;
+  }
+  const dataWithOverrides = {
+    ...data,
+    ...overrides
+  };
+  const dataToSerialize = {
+    _payload: JSON.stringify(dataWithOverrides),
+    file
+  };
+  return serialize(dataToSerialize, {
+    indices: true,
+    nullsAsUndefineds: false
+  });
+}
+//# sourceMappingURL=createFormData.js.map

package/dist/elements/BulkUpload/FormsManager/createFormData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFormData.js","names":["serialize","reduceFieldsToValues","createFormData","formState","overrides","data","file","dataWithOverrides","dataToSerialize","_payload","JSON","stringify","indices","nullsAsUndefineds"],"sources":["../../../../src/elements/BulkUpload/FormsManager/createFormData.ts"],"sourcesContent":["import type { FormState } from 'payload'\n\nimport { serialize } from 'object-to-formdata'\nimport { reduceFieldsToValues } from 'payload/shared'\n\nexport function createFormData(formState: FormState = {}, overrides: Record<string, any> = {}) {\n  const data = reduceFieldsToValues(formState, true)\n  const file = data?.file\n\n  if (file) {\n    delete data.file\n  }\n\n  const dataWithOverrides = {\n    ...data,\n    ...overrides,\n  }\n\n  const dataToSerialize = {\n    _payload: JSON.stringify(dataWithOverrides),\n    file,\n  }\n\n  return serialize(dataToSerialize, { indices: true, nullsAsUndefineds: false })\n}\n"],"mappings":"AAEA,SAASA,SAAS,QAAQ;AAC1B,SAASC,oBAAoB,QAAQ;AAErC,OAAO,SAASC,eAAeC,SAAA,GAAuB,CAAC,CAAC,EAAEC,SAAA,GAAiC,CAAC,CAAC;EAC3F,MAAMC,IAAA,GAAOJ,oBAAA,CAAqBE,SAAA,EAAW;EAC7C,MAAMG,IAAA,GAAOD,IAAA,EAAMC,IAAA;EAEnB,IAAIA,IAAA,EAAM;IACR,OAAOD,IAAA,CAAKC,IAAI;EAClB;EAEA,MAAMC,iBAAA,GAAoB;IACxB,GAAGF,IAAI;IACP,GAAGD;EACL;EAEA,MAAMI,eAAA,GAAkB;IACtBC,QAAA,EAAUC,IAAA,CAAKC,SAAS,CAACJ,iBAAA;IACzBD;EACF;EAEA,OAAON,SAAA,CAAUQ,eAAA,EAAiB;IAAEI,OAAA,EAAS;IAAMC,iBAAA,EAAmB;EAAM;AAC9E","ignoreList":[]}