@payloadcms/ui 3.0.0-canary.6de2b29 → 3.0.0-canary.78bbed6

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

@@ -0,0 +1,242 @@
+'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 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 { Actions } from '../ActionsBar/index.js';
+import { AddFilesView } from '../AddFilesView/index.js';
+import { useFormsManager } from '../FormsManager/index.js';
+import './index.scss';
+const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
+const drawerSlug = 'bulk-upload-drawer--add-more-files';
+const baseClass = 'file-selections';
+export function FileSidebar() {
+  const $ = _c(32);
+  const {
+    activeIndex,
+    addFiles,
+    forms,
+    removeFile,
+    setActiveIndex,
+    totalErrorCount
+  } = useFormsManager();
+  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(drawerSlug);
+    };
+    $[2] = addFiles;
+    $[3] = closeModal;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const handleAddFiles = t1;
+  const getFileSize = _temp;
+  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] !== forms || $[12] !== t || $[13] !== openModal || $[14] !== closeModal || $[15] !== handleAddFiles || $[16] !== activeIndex || $[17] !== setActiveIndex || $[18] !== handleRemoveFile || $[19] !== t4) {
+    let t6;
+    if ($[21] !== openModal) {
+      t6 = () => openModal(drawerSlug);
+      $[21] = openModal;
+      $[22] = t6;
+    } else {
+      t6 = $[22];
+    }
+    let t7;
+    if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+      t7 = () => setShowFiles(prev => !prev);
+      $[23] = t7;
+    } else {
+      t7 = $[23];
+    }
+    let t8;
+    if ($[24] !== closeModal) {
+      t8 = () => closeModal(drawerSlug);
+      $[24] = closeModal;
+      $[25] = t8;
+    } else {
+      t8 = $[25];
+    }
+    let t9;
+    if ($[26] !== activeIndex || $[27] !== setActiveIndex || $[28] !== i18n || $[29] !== t || $[30] !== handleRemoveFile) {
+      t9 = (t10, index) => {
+        const {
+          errorCount,
+          formState
+        } = t10;
+        const currentFile = formState.file.value;
+        return _jsxs("div", {
+          className: [`${baseClass}__fileRowContainer`, index === activeIndex && `${baseClass}__fileRowContainer--active`, errorCount && errorCount > 0 && `${baseClass}__fileRowContainer--error`].filter(Boolean).join(" "),
+          children: [_jsxs("button", {
+            className: `${baseClass}__fileRow`,
+            onClick: () => setActiveIndex(index),
+            type: "button",
+            children: [_jsx("img", {
+              alt: currentFile.name,
+              src: URL.createObjectURL(currentFile)
+            }), _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),
+            type: "button",
+            children: _jsx(XIcon, {})
+          })]
+        }, index);
+      };
+      $[26] = activeIndex;
+      $[27] = setActiveIndex;
+      $[28] = i18n;
+      $[29] = t;
+      $[30] = handleRemoveFile;
+      $[31] = t9;
+    } else {
+      t9 = $[31];
+    }
+    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: `${forms.length} ${t(forms.length > 1 ? "upload:filesToUpload" : "upload:fileToUpload")}`,
+                children: [forms.length, " ", t(forms.length > 1 ? "upload:filesToUpload" : "upload:fileToUpload")]
+              })
+            })]
+          }), _jsxs("div", {
+            className: `${baseClass}__header__actions`,
+            children: [_jsx(Pill, {
+              onClick: t6,
+              children: t("upload:addFile")
+            }), _jsx(Button, {
+              buttonStyle: "transparent",
+              className: `${baseClass}__toggler`,
+              onClick: t7,
+              children: _jsx(ChevronIcon, {
+                direction: showFiles ? "down" : "up"
+              })
+            }), _jsx(Drawer, {
+              Header: null,
+              gutter: false,
+              slug: drawerSlug,
+              children: _jsx(AddFilesView, {
+                onCancel: t8,
+                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: _jsx("div", {
+            className: `${baseClass}__filesContainer`,
+            children: forms.map(t9)
+          })
+        })
+      })]
+    });
+    $[7] = breakpoints.m;
+    $[8] = showFiles;
+    $[9] = totalErrorCount;
+    $[10] = i18n;
+    $[11] = forms;
+    $[12] = t;
+    $[13] = openModal;
+    $[14] = closeModal;
+    $[15] = handleAddFiles;
+    $[16] = activeIndex;
+    $[17] = setActiveIndex;
+    $[18] = handleRemoveFile;
+    $[19] = t4;
+    $[20] = t5;
+  } else {
+    t5 = $[20];
+  }
+  return t5;
+}
+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","React","AnimateHeightImport","ChevronIcon","XIcon","useTranslation","Button","Drawer","ErrorPill","Pill","Actions","AddFilesView","useFormsManager","AnimateHeight","default","drawerSlug","baseClass","FileSidebar","$","activeIndex","addFiles","forms","removeFile","setActiveIndex","totalErrorCount","i18n","t","closeModal","openModal","showFiles","setShowFiles","useState","breakpoints","t0","indexToRemove","handleRemoveFile","t1","filelist","handleAddFiles","getFileSize","_temp","t2","t3","filter","Boolean","t4","join","t5","m","t6","t7","Symbol","for","prev","t8","t9","t10","index","errorCount","formState","currentFile","file","value","_jsxs","className","children","onClick","type","_jsx","alt","name","src","URL","createObjectURL","title","count","withMessage","length","buttonStyle","direction","Header","gutter","slug","onCancel","onDrop","duration","height","map","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 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 { Actions } from '../ActionsBar/index.js'\nimport { AddFilesView } from '../AddFilesView/index.js'\nimport { useFormsManager } from '../FormsManager/index.js'\nimport './index.scss'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nconst drawerSlug = 'bulk-upload-drawer--add-more-files'\n\nconst baseClass = 'file-selections'\n\nexport function FileSidebar() {\n  const { activeIndex, addFiles, forms, removeFile, setActiveIndex, totalErrorCount } =\n    useFormsManager()\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      addFiles(filelist)\n      closeModal(drawerSlug)\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  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={`${forms.length} ${t(forms.length > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}`}\n              >\n                {forms.length}{' '}\n                {t(forms.length > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}\n              </strong>\n            </p>\n          </div>\n\n          <div className={`${baseClass}__header__actions`}>\n            <Pill onClick={() => openModal(drawerSlug)}>{t('upload:addFile')}</Pill>\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 Header={null} gutter={false} slug={drawerSlug}>\n              <AddFilesView onCancel={() => closeModal(drawerSlug)} onDrop={handleAddFiles} />\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            {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                    <img alt={currentFile.name} src={URL.createObjectURL(currentFile)} />\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,275 @@
+@import '../../../scss/styles.scss';
+
+.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);
+  }
+  
+  &__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);
+    }
+
+    img {
+      width: 25px;
+      height: 25px;
+      flex-shrink: 0;
+      object-fit: cover;
+      border-radius: var(--style-radius-m);
+    }
+
+    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: .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":[]}

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

@@ -0,0 +1,35 @@
+import type { Data, DocumentPermissions } from 'payload';
+import React from 'react';
+import type { BulkUploadProps } from '../index.js';
+import type { State } from './reducer.js';
+type FormsManagerContext = {
+    readonly activeIndex: State['activeIndex'];
+    readonly addFiles: (filelist: FileList) => void;
+    readonly collectionSlug: string;
+    readonly docPermissions?: DocumentPermissions;
+    readonly forms: State['forms'];
+    getFormDataRef: React.RefObject<() => Data>;
+    readonly hasPublishPermission: boolean;
+    readonly hasSavePermission: boolean;
+    readonly hasSubmitted: boolean;
+    readonly isLoadingFiles: boolean;
+    readonly removeFile: (index: number) => void;
+    readonly saveAllDocs: ({ overrides }?: {
+        overrides?: Record<string, unknown>;
+    }) => Promise<void>;
+    readonly setActiveIndex: (index: number) => void;
+    readonly setFormTotalErrorCount: ({ errorCount, index, }: {
+        errorCount: number;
+        index: number;
+    }) => void;
+    readonly totalErrorCount?: number;
+};
+type Props = {
+    readonly children: React.ReactNode;
+    readonly collectionSlug: string;
+    readonly onSuccess: BulkUploadProps['onSuccess'];
+};
+export declare function FormsManagerProvider({ children, collectionSlug, onSuccess }: Props): React.JSX.Element;
+export declare function useFormsManager(): FormsManagerContext;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/FormsManager/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,mBAAmB,EAAa,MAAM,SAAS,CAAA;AAInE,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAazC,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,aAAa,CAAC,CAAA;IAC1C,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC/C,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,mBAAmB,CAAA;IAC7C,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAA;IAC9B,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,oBAAoB,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,iBAAiB,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,WAAW,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAChG,QAAQ,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,QAAQ,CAAC,sBAAsB,EAAE,CAAC,EAChC,UAAU,EACV,KAAK,GACN,EAAE;QACD,UAAU,EAAE,MAAM,CAAA;QAClB,KAAK,EAAE,MAAM,CAAA;KACd,KAAK,IAAI,CAAA;IACV,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;CAClC,CAAA;AA0BD,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,SAAS,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;CACjD,CAAA;AAED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,KAAK,qBA2RlF;AAED,wBAAgB,eAAe,wBAE9B"}