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

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

@@ -1,131 +1,40 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { useConfig } from '../../../providers/Config/index.js';
-import { UploadInputHasOne } from './Input.js';
+import { RelationshipContent } from '../RelationshipContent/index.js';
+import { UploadCard } from '../UploadCard/index.js';
 import './index.scss';
-export const UploadComponentHasOne = props => {
-  const $ = _c(23);
-  const {
-    canCreate,
-    descriptionProps,
-    disabled,
-    errorProps,
-    field,
-    field: t0,
-    fieldHookResult,
-    labelProps,
-    onChange
-  } = props;
-  const {
-    admin: t1,
-    label,
-    relationTo,
-    required
-  } = t0;
-  let t2;
-  if ($[0] !== t1) {
-    t2 = t1 === undefined ? {} : t1;
-    $[0] = t1;
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
+const baseClass = 'upload upload--has-one';
+export function UploadComponentHasOne(props) {
   const {
     className,
-    style,
-    width
-  } = t2;
-  const {
-    config: t3
-  } = useConfig();
-  const {
-    collections,
-    routes: t4,
+    fileDoc,
+    onRemove,
+    readonly,
     serverURL
-  } = t3;
+  } = props;
   const {
-    api: apiRoute
-  } = t4;
-  if (typeof relationTo === "string") {
-    let t5;
-    if ($[2] !== relationTo || $[3] !== collections || $[4] !== field || $[5] !== canCreate || $[6] !== apiRoute || $[7] !== className || $[8] !== descriptionProps || $[9] !== errorProps || $[10] !== fieldHookResult || $[11] !== label || $[12] !== labelProps || $[13] !== onChange || $[14] !== disabled || $[15] !== required || $[16] !== serverURL || $[17] !== style || $[18] !== width) {
-      t5 = Symbol.for("react.early_return_sentinel");
-      bb0: {
-        let t6;
-        if ($[20] !== relationTo) {
-          t6 = coll => coll.slug === relationTo;
-          $[20] = relationTo;
-          $[21] = t6;
-        } else {
-          t6 = $[21];
-        }
-        const collection = collections.find(t6);
-        if (collection.upload) {
-          t5 = _jsx(UploadInputHasOne, {
-            Description: field?.admin?.components?.Description,
-            Error: field?.admin?.components?.Error,
-            Label: field?.admin?.components?.Label,
-            allowNewUpload: canCreate,
-            api: apiRoute,
-            className,
-            collection,
-            descriptionProps,
-            errorProps,
-            filterOptions: fieldHookResult.filterOptions,
-            label,
-            labelProps,
-            onChange,
-            readOnly: disabled,
-            relationTo,
-            required,
-            serverURL,
-            showError: fieldHookResult.showError,
-            style,
-            value: fieldHookResult.value,
-            width
-          });
-          break bb0;
-        }
-      }
-      $[2] = relationTo;
-      $[3] = collections;
-      $[4] = field;
-      $[5] = canCreate;
-      $[6] = apiRoute;
-      $[7] = className;
-      $[8] = descriptionProps;
-      $[9] = errorProps;
-      $[10] = fieldHookResult;
-      $[11] = label;
-      $[12] = labelProps;
-      $[13] = onChange;
-      $[14] = disabled;
-      $[15] = required;
-      $[16] = serverURL;
-      $[17] = style;
-      $[18] = width;
-      $[19] = t5;
-    } else {
-      t5 = $[19];
-    }
-    if (t5 !== Symbol.for("react.early_return_sentinel")) {
-      return t5;
-    }
-  } else {
-    let t5;
-    if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
-      t5 = _jsx("div", {
-        children: "Polymorphic Has One Uploads Go Here"
-      });
-      $[22] = t5;
-    } else {
-      t5 = $[22];
-    }
-    return t5;
-  }
-  return null;
-};
+    relationTo,
+    value
+  } = fileDoc;
+  const id = String(value.id);
+  return /*#__PURE__*/_jsx(UploadCard, {
+    className: [baseClass, className].filter(Boolean).join(' '),
+    children: /*#__PURE__*/_jsx(RelationshipContent, {
+      allowEdit: !readonly,
+      allowRemove: !readonly,
+      alt: value?.alt || value?.filename,
+      byteSize: value.filesize,
+      collectionSlug: relationTo,
+      filename: value.filename,
+      id: id,
+      mimeType: value?.mimeType,
+      onRemove: onRemove,
+      src: `${serverURL}${value.url}`,
+      x: value?.width,
+      y: value?.height
+    })
+  });
+}
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useConfig","UploadInputHasOne","UploadComponentHasOne","props","$","canCreate","descriptionProps","disabled","errorProps","field","t0","fieldHookResult","labelProps","onChange","admin","t1","label","relationTo","required","t2","undefined","className","style","width","config","t3","collections","routes","t4","serverURL","api","apiRoute","t5","Symbol","for","t6","coll","slug","collection","find","upload","_jsx","Description","components","Error","Label","allowNewUpload","filterOptions","readOnly","showError","value","children"],"sources":["../../../../src/fields/Upload/HasOne/index.tsx"],"sourcesContent":["'use client'\n\nimport type { UploadFieldProps } from 'payload'\n\nimport React from 'react'\n\nimport type { useField } from '../../../forms/useField/index.js'\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { UploadInputHasOne } from './Input.js'\nimport './index.scss'\n\nexport type UploadFieldPropsWithContext<TValue extends string | string[] = string> = {\n  readonly canCreate: boolean\n  readonly disabled: boolean\n  readonly fieldHookResult: ReturnType<typeof useField<TValue>>\n  readonly onChange: (value: unknown) => void\n} & UploadFieldProps\n\nexport const UploadComponentHasOne: React.FC<UploadFieldPropsWithContext> = (props) => {\n  const {\n    canCreate,\n    descriptionProps,\n    disabled,\n    errorProps,\n    field,\n    field: { admin: { className, style, width } = {}, label, relationTo, required },\n    fieldHookResult,\n    labelProps,\n    onChange,\n  } = props\n\n  const {\n    config: {\n      collections,\n      routes: { api: apiRoute },\n      serverURL,\n    },\n  } = useConfig()\n\n  if (typeof relationTo === 'string') {\n    const collection = collections.find((coll) => coll.slug === relationTo)\n\n    if (collection.upload) {\n      return (\n        <UploadInputHasOne\n          Description={field?.admin?.components?.Description}\n          Error={field?.admin?.components?.Error}\n          Label={field?.admin?.components?.Label}\n          allowNewUpload={canCreate}\n          api={apiRoute}\n          className={className}\n          collection={collection}\n          descriptionProps={descriptionProps}\n          errorProps={errorProps}\n          filterOptions={fieldHookResult.filterOptions}\n          label={label}\n          labelProps={labelProps}\n          onChange={onChange}\n          readOnly={disabled}\n          relationTo={relationTo}\n          required={required}\n          serverURL={serverURL}\n          showError={fieldHookResult.showError}\n          style={style}\n          value={fieldHookResult.value}\n          width={width}\n        />\n      )\n    }\n  } else {\n    return <div>Polymorphic Has One Uploads Go Here</div>\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","RelationshipContent","UploadCard","baseClass","UploadComponentHasOne","props","className","fileDoc","onRemove","readonly","serverURL","relationTo","value","id","String","_jsx","filter","Boolean","join","allowEdit","allowRemove","alt","filename","byteSize","filesize","collectionSlug","mimeType","src","url","x","width","y","height"],"sources":["../../../../src/fields/Upload/HasOne/index.tsx"],"sourcesContent":["'use client'\n\nimport type { JsonObject } from 'payload'\n\nimport React from 'react'\n\nimport { RelationshipContent } from '../RelationshipContent/index.js'\nimport { UploadCard } from '../UploadCard/index.js'\nimport './index.scss'\n\nconst baseClass = 'upload upload--has-one'\n\ntype Props = {\n  readonly className?: string\n  readonly fileDoc: {\n    relationTo: string\n    value: JsonObject\n  }\n  readonly onRemove?: () => void\n  readonly readonly?: boolean\n  readonly serverURL: string\n}\n\nexport function UploadComponentHasOne(props: Props) {\n  const { className, fileDoc, onRemove, readonly, serverURL } = props\n  const { relationTo, value } = fileDoc\n  const id = String(value.id)\n\n  return (\n    <UploadCard className={[baseClass, className].filter(Boolean).join(' ')}>\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={onRemove}\n        src={`${serverURL}${value.url}`}\n        x={value?.width as number}\n        y={value?.height as number}\n      />\n    </UploadCard>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,OAAOA,KAAA,MAAW;AAElB,SAASC,mBAAmB,QAAQ;AACpC,SAASC,UAAU,QAAQ;AAC3B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAalB,OAAO,SAASC,sBAAsBC,KAAY;EAChD,MAAM;IAAEC,SAAS;IAAEC,OAAO;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC;EAAS,CAAE,GAAGL,KAAA;EAC9D,MAAM;IAAEM,UAAU;IAAEC;EAAK,CAAE,GAAGL,OAAA;EAC9B,MAAMM,EAAA,GAAKC,MAAA,CAAOF,KAAA,CAAMC,EAAE;EAE1B,oBACEE,IAAA,CAACb,UAAA;IAAWI,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,CAAU,CAACU,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cACjE,aAAAH,IAAA,CAACd,mBAAA;MACCkB,SAAA,EAAW,CAACV,QAAA;MACZW,WAAA,EAAa,CAACX,QAAA;MACdY,GAAA,EAAMT,KAAA,EAAOS,GAAA,IAAOT,KAAA,EAAOU,QAAA;MAC3BC,QAAA,EAAUX,KAAA,CAAMY,QAAQ;MACxBC,cAAA,EAAgBd,UAAA;MAChBW,QAAA,EAAUV,KAAA,CAAMU,QAAQ;MACxBT,EAAA,EAAIA,EAAA;MACJa,QAAA,EAAUd,KAAA,EAAOc,QAAA;MACjBlB,QAAA,EAAUA,QAAA;MACVmB,GAAA,EAAK,GAAGjB,SAAA,GAAYE,KAAA,CAAMgB,GAAG,EAAE;MAC/BC,CAAA,EAAGjB,KAAA,EAAOkB,KAAA;MACVC,CAAA,EAAGnB,KAAA,EAAOoB;;;AAIlB","ignoreList":[]}

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

@@ -3,73 +3,5 @@
 .upload {
   position: relative;
   max-width: 100%;
-
-  &__wrap {
-    background: var(--theme-elevation-50);
-    padding: base(1.6);
-    border-radius: $style-radius-s;
-  }
-
-  &__buttons {
-    width: calc(100% + #{base(0.5)});
-    flex-wrap: wrap;
-    display: flex;
-    align-items: center;
-    gap: base(0.4);
-
-    .btn {
-      margin: 0;
-    }
-  }
-
-  &__toggler {
-    min-width: base(7);
-  }
-
-  @include mid-break {
-    &__wrap {
-      padding: base(0.75);
-    }
-
-    &__toggler {
-      width: calc(100% - #{base(0.5)});
-    }
-  }
-
-  &.read-only {
-    .file-details {
-      @include readOnly;
-      color: var(--theme-elevation-600);
-    }
-  }
-}
-
-html[data-theme='light'] {
-  .upload {
-    &.error {
-      .upload__wrap {
-        @include lightInputError;
-      }
-
-      .btn--style-secondary {
-        background-color: var(--theme-error-100);
-        box-shadow: inset 0 0 0 1px var(--theme-error-500);
-      }
-    }
-  }
 }
 
-html[data-theme='dark'] {
-  .upload {
-    &.error {
-      .upload__wrap {
-        @include darkInputError;
-      }
-
-      .btn--style-secondary {
-        background-color: var(--theme-error-150);
-        box-shadow: inset 0 0 0 1px var(--theme-error-500);
-      }
-    }
-  }
-}

package/dist/fields/Upload/{HasOne/Input.d.ts → Input.d.ts}

@@ -1,7 +1,8 @@
-import type { ClientCollectionConfig, FieldDescriptionClientProps, FieldErrorClientProps, FieldLabelClientProps, FilterOptionsResult, MappedComponent, StaticDescription, StaticLabel, UploadField, UploadFieldClient } from 'payload';
+import type { ClientCollectionConfig, FieldDescriptionClientProps, FieldErrorClientProps, FieldLabelClientProps, FilterOptionsResult, MappedComponent, StaticDescription, StaticLabel, UploadFieldClient, UploadField as UploadFieldType } from 'payload';
 import type { MarkOptional } from 'ts-essentials';
 import React from 'react';
 import './index.scss';
+export declare const baseClass = "upload";
 export type UploadInputProps = {
     readonly Description?: MappedComponent;
     readonly Error?: MappedComponent;
@@ -19,17 +20,21 @@ export type UploadInputProps = {
     readonly errorProps?: FieldErrorClientProps<MarkOptional<UploadFieldClient, 'type'>>;
     readonly field?: MarkOptional<UploadFieldClient, 'type'>;
     readonly filterOptions?: FilterOptionsResult;
+    readonly hasMany?: boolean;
+    readonly isSortable?: boolean;
     readonly label: StaticLabel;
     readonly labelProps?: FieldLabelClientProps<MarkOptional<UploadFieldClient, 'type'>>;
+    readonly maxRows?: number;
     readonly onChange?: (e: any) => void;
+    readonly path: string;
     readonly readOnly?: boolean;
-    readonly relationTo?: UploadField['relationTo'];
+    readonly relationTo: UploadFieldType['relationTo'];
     readonly required?: boolean;
     readonly serverURL?: string;
     readonly showError?: boolean;
     readonly style?: React.CSSProperties;
-    readonly value?: string;
+    readonly value?: (number | string)[] | (number | string);
     readonly width?: string;
 };
-export declare const UploadInputHasOne: React.FC<UploadInputProps>;
+export declare function UploadInput(props: UploadInputProps): React.JSX.Element;
 //# sourceMappingURL=Input.d.ts.map

package/dist/fields/Upload/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/fields/Upload/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,sBAAsB,EACtB,2BAA2B,EAC3B,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EAEnB,eAAe,EAEf,iBAAiB,EACjB,WAAW,EACX,iBAAiB,EACjB,WAAW,IAAI,eAAe,EAE/B,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAIjD,OAAO,KAA0C,MAAM,OAAO,CAAA;AAkB9D,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,SAAS,WAAW,CAAA;AAIjC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,WAAW,CAAC,EAAE,eAAe,CAAA;IACtC,QAAQ,CAAC,KAAK,CAAC,EAAE,eAAe,CAAA;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,eAAe,CAAA;IAChC;;OAEG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,sBAAsB,CAAA;IAC5C,QAAQ,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAChD,QAAQ,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAA;IACxC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,2BAA2B,CAAC,YAAY,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAA;IAChG,QAAQ,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC,YAAY,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAA;IACpF,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAA;IACxD,QAAQ,CAAC,aAAa,CAAC,EAAE,mBAAmB,CAAA;IAC5C,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAA;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC,YAAY,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAA;IACpF,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAA;IAC/B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IACxD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAwblD"}

package/dist/fields/Upload/Input.js

@@ -0,0 +1,366 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useModal } from '@faceless-ui/modal';
+import * as qs from 'qs-esm';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useBulkUpload } from '../../elements/BulkUpload/index.js';
+import { Button } from '../../elements/Button/index.js';
+import { Dropzone } from '../../elements/Dropzone/index.js';
+import { useListDrawer } from '../../elements/ListDrawer/index.js';
+import { ShimmerEffect } from '../../elements/ShimmerEffect/index.js';
+import { useAuth } from '../../providers/Auth/index.js';
+import { useLocale } from '../../providers/Locale/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { FieldDescription } from '../FieldDescription/index.js';
+import { FieldError } from '../FieldError/index.js';
+import { FieldLabel } from '../FieldLabel/index.js';
+import { fieldBaseClass } from '../shared/index.js';
+import { UploadComponentHasMany } from './HasMany/index.js';
+import { UploadComponentHasOne } from './HasOne/index.js';
+import './index.scss';
+export const baseClass = 'upload';
+export function UploadInput(props) {
+  const {
+    Description,
+    Error,
+    Label,
+    allowNewUpload,
+    api,
+    className,
+    description,
+    descriptionProps,
+    errorProps,
+    field,
+    filterOptions: filterOptionsFromProps,
+    hasMany,
+    isSortable,
+    label,
+    labelProps,
+    maxRows,
+    onChange: onChangeFromProps,
+    path,
+    readOnly,
+    relationTo,
+    required,
+    serverURL,
+    showError,
+    style,
+    value,
+    width
+  } = props;
+  const [populatedDocs, setPopulatedDocs] = React.useState();
+  const [activeRelationTo, setActiveRelationTo] = React.useState(Array.isArray(relationTo) ? relationTo[0] : relationTo);
+  const {
+    openModal
+  } = useModal();
+  const {
+    drawerSlug,
+    setCollectionSlug,
+    setInitialFiles,
+    setMaxFiles,
+    setOnSuccess
+  } = useBulkUpload();
+  const {
+    permissions
+  } = useAuth();
+  const {
+    code
+  } = useLocale();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const filterOptions = useMemo(() => {
+    return {
+      ...filterOptionsFromProps,
+      [activeRelationTo]: {
+        ...(filterOptionsFromProps?.[activeRelationTo] || {}),
+        id: {
+          ...(filterOptionsFromProps?.[activeRelationTo]?.id || {}),
+          not_in: (filterOptionsFromProps?.[activeRelationTo]?.id?.not_in || []).concat(...((Array.isArray(value) || value ? [value] : []) || []))
+        }
+      }
+    };
+  }, [value, activeRelationTo, filterOptionsFromProps]);
+  const [ListDrawer, ListDrawerToggler, {
+    closeDrawer: closeListDrawer
+  }] = useListDrawer({
+    collectionSlugs: typeof relationTo === 'string' ? [relationTo] : relationTo,
+    filterOptions
+  });
+  const inputRef = React.useRef(null);
+  const loadedValueDocsRef = React.useRef(false);
+  const canCreate = useMemo(() => {
+    if (typeof activeRelationTo === 'string') {
+      if (permissions?.collections && permissions.collections?.[activeRelationTo]?.create) {
+        if (permissions.collections[activeRelationTo].create?.permission === true) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }, [activeRelationTo, permissions]);
+  const onChange = React.useCallback(newValue => {
+    if (typeof onChangeFromProps === 'function') {
+      onChangeFromProps(newValue);
+    }
+  }, [onChangeFromProps]);
+  const populateDocs = React.useCallback(async (ids, relatedCollectionSlug) => {
+    const query = {
+      depth: 0,
+      draft: true,
+      limit: ids.length,
+      locale: code,
+      where: {
+        and: [{
+          id: {
+            in: ids
+          }
+        }]
+      }
+    };
+    const response = await fetch(`${serverURL}${api}/${relatedCollectionSlug}`, {
+      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();
+      const sortedDocs = ids.map(id => json.docs.find(doc => doc.id === id));
+      return {
+        ...json,
+        docs: sortedDocs
+      };
+    }
+    return null;
+  }, [code, serverURL, api, i18n.language]);
+  const onUploadSuccess = useCallback(newDocs => {
+    if (hasMany) {
+      const mergedValue = [...(Array.isArray(value) ? value : []), ...newDocs.map(doc_0 => doc_0.id)];
+      onChange(mergedValue);
+      setPopulatedDocs(currentDocs => [...(currentDocs || []), ...newDocs.map(doc_1 => ({
+        relationTo: activeRelationTo,
+        value: doc_1
+      }))]);
+    } else {
+      const firstDoc = newDocs[0];
+      onChange(firstDoc.id);
+      setPopulatedDocs([{
+        relationTo: activeRelationTo,
+        value: firstDoc
+      }]);
+    }
+  }, [value, onChange, activeRelationTo, hasMany]);
+  const onFileSelection = React.useCallback(fileList => {
+    let fileListToUse = fileList;
+    if (!hasMany && fileList && fileList.length > 1) {
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(fileList[0]);
+      fileListToUse = dataTransfer.files;
+    }
+    if (fileListToUse) setInitialFiles(fileListToUse);
+    setCollectionSlug(relationTo);
+    setOnSuccess(onUploadSuccess);
+    if (typeof maxRows === 'number') setMaxFiles(maxRows);
+    openModal(drawerSlug);
+  }, [drawerSlug, hasMany, onUploadSuccess, openModal, relationTo, setCollectionSlug, setInitialFiles, setOnSuccess, maxRows, setMaxFiles]);
+  // only hasMany can bulk select
+  const onListBulkSelect = React.useCallback(async docs => {
+    const selectedDocIDs = Object.entries(docs).reduce((acc, [docID, isSelected]) => {
+      if (isSelected) {
+        acc.push(docID);
+      }
+      return acc;
+    }, []);
+    const loadedDocs = await populateDocs(selectedDocIDs, activeRelationTo);
+    if (loadedDocs) {
+      setPopulatedDocs(currentDocs_0 => [...(currentDocs_0 || []), ...loadedDocs.docs.map(doc_2 => ({
+        relationTo: activeRelationTo,
+        value: doc_2
+      }))]);
+    }
+    onChange([...(Array.isArray(value) ? value : []), ...selectedDocIDs]);
+    closeListDrawer();
+  }, [activeRelationTo, closeListDrawer, onChange, populateDocs, value]);
+  const onListSelect = React.useCallback(async ({
+    collectionSlug,
+    docID: docID_0
+  }) => {
+    const loadedDocs_0 = await populateDocs([docID_0], collectionSlug);
+    const selectedDoc = loadedDocs_0 ? loadedDocs_0.docs?.[0] : null;
+    setPopulatedDocs(currentDocs_1 => {
+      if (selectedDoc) {
+        if (hasMany) {
+          return [...(currentDocs_1 || []), {
+            relationTo: activeRelationTo,
+            value: selectedDoc
+          }];
+        }
+        return [{
+          relationTo: activeRelationTo,
+          value: selectedDoc
+        }];
+      }
+      return currentDocs_1;
+    });
+    if (hasMany) {
+      onChange([...(Array.isArray(value) ? value : []), docID_0]);
+    } else {
+      onChange(docID_0);
+    }
+    closeListDrawer();
+  }, [closeListDrawer, hasMany, populateDocs, onChange, value, activeRelationTo]);
+  // only hasMany can reorder
+  const onReorder = React.useCallback(newValue_0 => {
+    const newValueIDs = newValue_0.map(({
+      value: value_0
+    }) => value_0.id);
+    onChange(newValueIDs);
+    setPopulatedDocs(newValue_0);
+  }, [onChange]);
+  const onRemove = React.useCallback(newValue_1 => {
+    const newValueIDs_0 = newValue_1 ? newValue_1.map(({
+      value: value_1
+    }) => value_1.id) : null;
+    onChange(hasMany ? newValueIDs_0 : newValueIDs_0 ? newValueIDs_0[0] : null);
+    setPopulatedDocs(newValue_1 ? newValue_1 : []);
+  }, [onChange, hasMany]);
+  useEffect(() => {
+    async function loadInitialDocs() {
+      if (value) {
+        const loadedDocs_1 = await populateDocs(Array.isArray(value) ? value : [value], activeRelationTo);
+        if (loadedDocs_1) {
+          setPopulatedDocs(loadedDocs_1.docs.map(doc_3 => ({
+            relationTo: activeRelationTo,
+            value: doc_3
+          })));
+        }
+      }
+      loadedValueDocsRef.current = true;
+    }
+    if (!loadedValueDocsRef.current) {
+      void loadInitialDocs();
+    }
+  }, [populateDocs, activeRelationTo, value]);
+  const showDropzone = !readOnly && (!value || hasMany && Array.isArray(value) && (typeof maxRows !== 'number' || value.length < maxRows));
+  return /*#__PURE__*/_jsxs("div", {
+    className: [fieldBaseClass, baseClass, className, showError && 'error', readOnly && 'read-only'].filter(Boolean).join(' '),
+    style: {
+      ...style,
+      width
+    },
+    children: [/*#__PURE__*/_jsx(FieldLabel, {
+      Label: Label,
+      label: label,
+      required: required,
+      ...(labelProps || {}),
+      field: field
+    }), /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__wrap`,
+      children: /*#__PURE__*/_jsx(FieldError, {
+        CustomError: Error,
+        path: path,
+        ...(errorProps || {}),
+        field: field
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__dropzoneAndUpload`,
+      children: [hasMany && Array.isArray(value) && value.length > 0 ? /*#__PURE__*/_jsx(_Fragment, {
+        children: populatedDocs && populatedDocs?.length > 0 ? /*#__PURE__*/_jsx(UploadComponentHasMany, {
+          fileDocs: populatedDocs,
+          isSortable: isSortable && !readOnly,
+          onRemove: onRemove,
+          onReorder: onReorder,
+          readonly: readOnly,
+          serverURL: serverURL
+        }) : /*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__loadingRows`,
+          children: value.map(id_0 => /*#__PURE__*/_jsx(ShimmerEffect, {
+            height: "40px"
+          }, id_0))
+        })
+      }) : null, !hasMany && value ? /*#__PURE__*/_jsx(_Fragment, {
+        children: populatedDocs && populatedDocs?.length > 0 ? /*#__PURE__*/_jsx(UploadComponentHasOne, {
+          fileDoc: populatedDocs[0],
+          onRemove: onRemove,
+          readonly: readOnly,
+          serverURL: serverURL
+        }) : /*#__PURE__*/_jsx(ShimmerEffect, {
+          height: "62px"
+        })
+      }) : null, showDropzone ? /*#__PURE__*/_jsx(Dropzone, {
+        multipleFiles: hasMany,
+        onChange: onFileSelection,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__dropzoneContent`,
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__dropzoneContent__buttons`,
+            children: [/*#__PURE__*/_jsx(Button, {
+              buttonStyle: "icon-label",
+              disabled: readOnly || !canCreate,
+              icon: "plus",
+              iconPosition: "left",
+              onClick: () => {
+                if (!readOnly) {
+                  if (hasMany) {
+                    onFileSelection();
+                  } else if (inputRef.current) {
+                    inputRef.current.click();
+                  }
+                }
+              },
+              size: "small",
+              children: t('general:createNew')
+            }), /*#__PURE__*/_jsx("input", {
+              "aria-hidden": "true",
+              className: `${baseClass}__hidden-input`,
+              disabled: readOnly,
+              hidden: true,
+              multiple: hasMany,
+              onChange: e => {
+                if (e.target.files && e.target.files.length > 0) {
+                  onFileSelection(e.target.files);
+                }
+              },
+              ref: inputRef,
+              type: "file"
+            }), /*#__PURE__*/_jsx(ListDrawerToggler, {
+              className: `${baseClass}__toggler`,
+              disabled: readOnly,
+              children: /*#__PURE__*/_jsx(Button, {
+                buttonStyle: "icon-label",
+                el: "span",
+                icon: "plus",
+                iconPosition: "left",
+                children: t('fields:chooseFromExisting')
+              })
+            }), /*#__PURE__*/_jsx(ListDrawer, {
+              enableRowSelections: hasMany,
+              onBulkSelect: onListBulkSelect,
+              onSelect: onListSelect
+            })]
+          }), /*#__PURE__*/_jsxs("p", {
+            className: `${baseClass}__dragAndDropText`,
+            children: [t('general:or'), " ", t('upload:dragAndDrop')]
+          })]
+        })
+      }) : /*#__PURE__*/_jsx(_Fragment, {
+        children: !readOnly && !populatedDocs && (!value || typeof maxRows !== 'number' || Array.isArray(value) && value.length < maxRows) ? /*#__PURE__*/_jsx(ShimmerEffect, {
+          height: "40px"
+        }) : null
+      })]
+    }), /*#__PURE__*/_jsx(FieldDescription, {
+      Description: Description,
+      description: description,
+      ...(descriptionProps || {}),
+      field: field
+    })]
+  });
+}
+//# sourceMappingURL=Input.js.map