@payloadcms/ui 3.0.0-canary.6041f49 → 3.0.0-canary.690108d

package/dist/fields/Upload/Input.js

@@ -1,18 +1,20 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription';
-import { FieldError } from '@payloadcms/ui/forms/FieldError';
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Button } from '../../elements/Button/index.js';
 import { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js';
 import { FileDetails } from '../../elements/FileDetails/index.js';
 import { useListDrawer } from '../../elements/ListDrawer/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 './index.scss';
 const baseClass = 'upload';
 export const UploadInput = (props)=>{
-    const { CustomDescription, CustomError, CustomLabel, api = '/api', className, collection, descriptionProps, errorProps, filterOptions, label, labelProps, onChange, readOnly, relationTo, required, serverURL, showError, style, value, width } = props;
+    const { Description, Error, Label, allowNewUpload, api = '/api', className, collection, customUploadActions, descriptionProps, errorProps, field, filterOptions, label, labelProps, onChange, readOnly, relationTo, required, serverURL, showError, style, value, width } = props;
     const { i18n, t } = useTranslation();
     const [fileDoc, setFileDoc] = useState(undefined);
     const [missingFile, setMissingFile] = useState(false);
@@ -73,7 +75,7 @@ export const UploadInput = (props)=>{
         closeListDrawer
     ]);
     if (collection.upload) {
-        return /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ _jsxs("div", {
             className: [
                 fieldBaseClass,
                 baseClass,
@@ -84,47 +86,81 @@ export const UploadInput = (props)=>{
             style: {
                 ...style,
                 width
-            }
-        }, /*#__PURE__*/ React.createElement(FieldError, {
-            CustomError: CustomError,
-            ...errorProps || {}
-        }), /*#__PURE__*/ React.createElement(FieldLabel, {
-            CustomLabel: CustomLabel,
-            label: label,
-            required: required,
-            ...labelProps || {}
-        }), collection?.upload && /*#__PURE__*/ React.createElement(React.Fragment, null, fileDoc && !missingFile && /*#__PURE__*/ React.createElement(FileDetails, {
-            collectionSlug: relationTo,
-            doc: fileDoc,
-            handleRemove: readOnly ? undefined : ()=>{
-                onChange(null);
             },
-            uploadConfig: collection.upload
-        }), (!fileDoc || missingFile) && /*#__PURE__*/ React.createElement("div", {
-            className: `${baseClass}__wrap`
-        }, /*#__PURE__*/ React.createElement("div", {
-            className: `${baseClass}__buttons`
-        }, /*#__PURE__*/ React.createElement(DocumentDrawerToggler, {
-            className: `${baseClass}__toggler`,
-            disabled: readOnly
-        }, /*#__PURE__*/ React.createElement(Button, {
-            buttonStyle: "secondary",
-            disabled: readOnly,
-            el: "div"
-        }, t('fields:uploadNewLabel', {
-            label: getTranslation(collection.labels.singular, i18n)
-        }))), /*#__PURE__*/ React.createElement(ListDrawerToggler, {
-            className: `${baseClass}__toggler`,
-            disabled: readOnly
-        }, /*#__PURE__*/ React.createElement(Button, {
-            buttonStyle: "secondary",
-            disabled: readOnly,
-            el: "div"
-        }, t('fields:chooseFromExisting'))))), CustomDescription !== undefined ? CustomDescription : /*#__PURE__*/ React.createElement(FieldDescription, descriptionProps || {})), !readOnly && /*#__PURE__*/ React.createElement(DocumentDrawer, {
-            onSave: onSave
-        }), !readOnly && /*#__PURE__*/ React.createElement(ListDrawer, {
-            onSelect: onSelect
-        }));
+            children: [
+                /*#__PURE__*/ _jsx(FieldLabel, {
+                    Label: Label,
+                    field: field,
+                    label: label,
+                    required: required,
+                    ...labelProps || {}
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: `${fieldBaseClass}__wrap`,
+                    children: [
+                        /*#__PURE__*/ _jsx(FieldError, {
+                            CustomError: Error,
+                            field: field,
+                            ...errorProps || {}
+                        }),
+                        collection?.upload && /*#__PURE__*/ _jsxs(React.Fragment, {
+                            children: [
+                                fileDoc && !missingFile && /*#__PURE__*/ _jsx(FileDetails, {
+                                    collectionSlug: relationTo,
+                                    customUploadActions: customUploadActions,
+                                    doc: fileDoc,
+                                    handleRemove: readOnly ? undefined : ()=>{
+                                        onChange(null);
+                                    },
+                                    uploadConfig: collection.upload
+                                }),
+                                (!fileDoc || missingFile) && /*#__PURE__*/ _jsx("div", {
+                                    className: `${baseClass}__wrap`,
+                                    children: /*#__PURE__*/ _jsxs("div", {
+                                        className: `${baseClass}__buttons`,
+                                        children: [
+                                            allowNewUpload && /*#__PURE__*/ _jsx(DocumentDrawerToggler, {
+                                                className: `${baseClass}__toggler`,
+                                                disabled: readOnly,
+                                                children: /*#__PURE__*/ _jsx(Button, {
+                                                    buttonStyle: "secondary",
+                                                    disabled: readOnly,
+                                                    el: "div",
+                                                    children: t('fields:uploadNewLabel', {
+                                                        label: getTranslation(collection.labels.singular, i18n)
+                                                    })
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(ListDrawerToggler, {
+                                                className: `${baseClass}__toggler`,
+                                                disabled: readOnly,
+                                                children: /*#__PURE__*/ _jsx(Button, {
+                                                    buttonStyle: "secondary",
+                                                    disabled: readOnly,
+                                                    el: "div",
+                                                    children: t('fields:chooseFromExisting')
+                                                })
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(FieldDescription, {
+                                    Description: Description,
+                                    field: field,
+                                    ...descriptionProps || {}
+                                })
+                            ]
+                        }),
+                        !readOnly && /*#__PURE__*/ _jsx(DocumentDrawer, {
+                            onSave: onSave
+                        }),
+                        !readOnly && /*#__PURE__*/ _jsx(ListDrawer, {
+                            onSelect: onSelect
+                        })
+                    ]
+                })
+            ]
+        });
     }
     return null;
 };

package/dist/fields/Upload/Input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Upload/Input.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, FilterOptionsResult, UploadField } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { DocumentDrawerProps } from '../../elements/DocumentDrawer/types.js'\nimport type { ListDrawerProps } from '../../elements/ListDrawer/types.js'\nimport type { UploadFieldProps } from './types.js'\n\nimport { Button } from '../../elements/Button/index.js'\nimport { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js'\nimport { FileDetails } from '../../elements/FileDetails/index.js'\nimport { useListDrawer } from '../../elements/ListDrawer/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nconst baseClass = 'upload'\n\nexport type UploadInputProps = Omit<UploadFieldProps, 'filterOptions'> & {\n  api?: string\n  collection?: ClientCollectionConfig\n  filterOptions?: FilterOptionsResult\n  onChange?: (e) => void\n  relationTo?: UploadField['relationTo']\n  serverURL?: string\n  showError?: boolean\n  value?: string\n}\n\nexport const UploadInput: React.FC<UploadInputProps> = (props) => {\n  const {\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    api = '/api',\n    className,\n    collection,\n    descriptionProps,\n    errorProps,\n    filterOptions,\n    label,\n    labelProps,\n    onChange,\n    readOnly,\n    relationTo,\n    required,\n    serverURL,\n    showError,\n    style,\n    value,\n    width,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  const [fileDoc, setFileDoc] = useState(undefined)\n  const [missingFile, setMissingFile] = useState(false)\n  const [collectionSlugs] = useState([collection?.slug])\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    collectionSlug: collectionSlugs[0],\n  })\n\n  const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer }] = useListDrawer({\n    collectionSlugs,\n    filterOptions,\n  })\n\n  useEffect(() => {\n    if (value !== null && typeof value !== 'undefined' && value !== '') {\n      const fetchFile = async () => {\n        const response = await fetch(`${serverURL}${api}/${relationTo}/${value}`, {\n          credentials: 'include',\n          headers: {\n            'Accept-Language': i18n.language,\n          },\n        })\n        if (response.ok) {\n          const json = await response.json()\n          setFileDoc(json)\n        } else {\n          setMissingFile(true)\n          setFileDoc(undefined)\n        }\n      }\n\n      void fetchFile()\n    } else {\n      setFileDoc(undefined)\n    }\n  }, [value, relationTo, api, serverURL, i18n])\n\n  const onSave = useCallback<DocumentDrawerProps['onSave']>(\n    (args) => {\n      setMissingFile(false)\n      onChange(args.doc)\n      closeDrawer()\n    },\n    [onChange, closeDrawer],\n  )\n\n  const onSelect = useCallback<ListDrawerProps['onSelect']>(\n    (args) => {\n      setMissingFile(false)\n      onChange({\n        id: args.docID,\n      })\n      closeListDrawer()\n    },\n    [onChange, closeListDrawer],\n  )\n\n  if (collection.upload) {\n    return (\n      <div\n        className={[\n          fieldBaseClass,\n          baseClass,\n          className,\n          showError && 'error',\n          readOnly && 'read-only',\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        style={{\n          ...style,\n          width,\n        }}\n      >\n        <FieldError CustomError={CustomError} {...(errorProps || {})} />\n        <FieldLabel\n          CustomLabel={CustomLabel}\n          label={label}\n          required={required}\n          {...(labelProps || {})}\n        />\n        {collection?.upload && (\n          <React.Fragment>\n            {fileDoc && !missingFile && (\n              <FileDetails\n                collectionSlug={relationTo}\n                doc={fileDoc}\n                handleRemove={\n                  readOnly\n                    ? undefined\n                    : () => {\n                        onChange(null)\n                      }\n                }\n                uploadConfig={collection.upload}\n              />\n            )}\n            {(!fileDoc || missingFile) && (\n              <div className={`${baseClass}__wrap`}>\n                <div className={`${baseClass}__buttons`}>\n                  <DocumentDrawerToggler className={`${baseClass}__toggler`} disabled={readOnly}>\n                    <Button buttonStyle=\"secondary\" disabled={readOnly} el=\"div\">\n                      {t('fields:uploadNewLabel', {\n                        label: getTranslation(collection.labels.singular, i18n),\n                      })}\n                    </Button>\n                  </DocumentDrawerToggler>\n                  <ListDrawerToggler className={`${baseClass}__toggler`} disabled={readOnly}>\n                    <Button buttonStyle=\"secondary\" disabled={readOnly} el=\"div\">\n                      {t('fields:chooseFromExisting')}\n                    </Button>\n                  </ListDrawerToggler>\n                </div>\n              </div>\n            )}\n            {CustomDescription !== undefined ? (\n              CustomDescription\n            ) : (\n              <FieldDescription {...(descriptionProps || {})} />\n            )}\n          </React.Fragment>\n        )}\n        {!readOnly && <DocumentDrawer onSave={onSave} />}\n        {!readOnly && <ListDrawer onSelect={onSelect} />}\n      </div>\n    )\n  }\n\n  return null\n}\n"],"names":["getTranslation","FieldDescription","FieldError","FieldLabel","React","useCallback","useEffect","useState","Button","useDocumentDrawer","FileDetails","useListDrawer","useTranslation","fieldBaseClass","baseClass","UploadInput","props","CustomDescription","CustomError","CustomLabel","api","className","collection","descriptionProps","errorProps","filterOptions","label","labelProps","onChange","readOnly","relationTo","required","serverURL","showError","style","value","width","i18n","t","fileDoc","setFileDoc","undefined","missingFile","setMissingFile","collectionSlugs","slug","DocumentDrawer","DocumentDrawerToggler","closeDrawer","collectionSlug","ListDrawer","ListDrawerToggler","closeListDrawer","fetchFile","response","fetch","credentials","headers","language","ok","json","onSave","args","doc","onSelect","id","docID","upload","div","filter","Boolean","join","Fragment","handleRemove","uploadConfig","disabled","buttonStyle","el","labels","singular"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/fields/Upload/Input.tsx"],"sourcesContent":["'use client'\n\nimport type {\n  ClientCollectionConfig,\n  FieldDescriptionClientProps,\n  FieldErrorClientProps,\n  FieldLabelClientProps,\n  FilterOptionsResult,\n  MappedComponent,\n  StaticDescription,\n  StaticLabel,\n  UploadField,\n  UploadFieldClient,\n} from 'payload'\nimport type { MarkOptional } from 'ts-essentials'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { DocumentDrawerProps } from '../../elements/DocumentDrawer/types.js'\nimport type { ListDrawerProps } from '../../elements/ListDrawer/types.js'\n\nimport { Button } from '../../elements/Button/index.js'\nimport { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js'\nimport { FileDetails } from '../../elements/FileDetails/index.js'\nimport { useListDrawer } from '../../elements/ListDrawer/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nconst baseClass = 'upload'\n\nexport type UploadInputProps = {\n  readonly Description?: MappedComponent\n  readonly Error?: MappedComponent\n  readonly Label?: MappedComponent\n  /**\n   * Controls the visibility of the \"Create new collection\" button\n   */\n  readonly allowNewUpload?: boolean\n  readonly api?: string\n  readonly className?: string\n  readonly collection?: ClientCollectionConfig\n  readonly customUploadActions?: React.ReactNode[]\n  readonly description?: StaticDescription\n  readonly descriptionProps?: FieldDescriptionClientProps<MarkOptional<UploadFieldClient, 'type'>>\n  readonly errorProps?: FieldErrorClientProps<MarkOptional<UploadFieldClient, 'type'>>\n  readonly field?: MarkOptional<UploadFieldClient, 'type'>\n  readonly filterOptions?: FilterOptionsResult\n  readonly label: StaticLabel\n  readonly labelProps?: FieldLabelClientProps<MarkOptional<UploadFieldClient, 'type'>>\n  readonly onChange?: (e) => void\n  readonly readOnly?: boolean\n  readonly relationTo?: UploadField['relationTo']\n  readonly required?: boolean\n  readonly serverURL?: string\n  readonly showError?: boolean\n  readonly style?: React.CSSProperties\n  readonly value?: string\n  readonly width?: string\n}\n\nexport const UploadInput: React.FC<UploadInputProps> = (props) => {\n  const {\n    Description,\n    Error,\n    Label,\n    allowNewUpload,\n    api = '/api',\n    className,\n    collection,\n    customUploadActions,\n    descriptionProps,\n    errorProps,\n    field,\n    filterOptions,\n    label,\n    labelProps,\n    onChange,\n    readOnly,\n    relationTo,\n    required,\n    serverURL,\n    showError,\n    style,\n    value,\n    width,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  const [fileDoc, setFileDoc] = useState(undefined)\n  const [missingFile, setMissingFile] = useState(false)\n  const [collectionSlugs] = useState([collection?.slug])\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    collectionSlug: collectionSlugs[0],\n  })\n\n  const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer }] = useListDrawer({\n    collectionSlugs,\n    filterOptions,\n  })\n\n  useEffect(() => {\n    if (value !== null && typeof value !== 'undefined' && value !== '') {\n      const fetchFile = async () => {\n        const response = await fetch(`${serverURL}${api}/${relationTo}/${value}`, {\n          credentials: 'include',\n          headers: {\n            'Accept-Language': i18n.language,\n          },\n        })\n        if (response.ok) {\n          const json = await response.json()\n          setFileDoc(json)\n        } else {\n          setMissingFile(true)\n          setFileDoc(undefined)\n        }\n      }\n\n      void fetchFile()\n    } else {\n      setFileDoc(undefined)\n    }\n  }, [value, relationTo, api, serverURL, i18n])\n\n  const onSave = useCallback<DocumentDrawerProps['onSave']>(\n    (args) => {\n      setMissingFile(false)\n      onChange(args.doc)\n      closeDrawer()\n    },\n    [onChange, closeDrawer],\n  )\n\n  const onSelect = useCallback<ListDrawerProps['onSelect']>(\n    (args) => {\n      setMissingFile(false)\n      onChange({\n        id: args.docID,\n      })\n      closeListDrawer()\n    },\n    [onChange, closeListDrawer],\n  )\n\n  if (collection.upload) {\n    return (\n      <div\n        className={[\n          fieldBaseClass,\n          baseClass,\n          className,\n          showError && 'error',\n          readOnly && 'read-only',\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        style={{\n          ...style,\n          width,\n        }}\n      >\n        <FieldLabel\n          Label={Label}\n          field={field}\n          label={label}\n          required={required}\n          {...(labelProps || {})}\n        />\n        <div className={`${fieldBaseClass}__wrap`}>\n          <FieldError CustomError={Error} field={field} {...(errorProps || {})} />\n          {collection?.upload && (\n            <React.Fragment>\n              {fileDoc && !missingFile && (\n                <FileDetails\n                  collectionSlug={relationTo}\n                  customUploadActions={customUploadActions}\n                  doc={fileDoc}\n                  handleRemove={\n                    readOnly\n                      ? undefined\n                      : () => {\n                          onChange(null)\n                        }\n                  }\n                  uploadConfig={collection.upload}\n                />\n              )}\n              {(!fileDoc || missingFile) && (\n                <div className={`${baseClass}__wrap`}>\n                  <div className={`${baseClass}__buttons`}>\n                    {allowNewUpload && (\n                      <DocumentDrawerToggler\n                        className={`${baseClass}__toggler`}\n                        disabled={readOnly}\n                      >\n                        <Button buttonStyle=\"secondary\" disabled={readOnly} el=\"div\">\n                          {t('fields:uploadNewLabel', {\n                            label: getTranslation(collection.labels.singular, i18n),\n                          })}\n                        </Button>\n                      </DocumentDrawerToggler>\n                    )}\n                    <ListDrawerToggler className={`${baseClass}__toggler`} disabled={readOnly}>\n                      <Button buttonStyle=\"secondary\" disabled={readOnly} el=\"div\">\n                        {t('fields:chooseFromExisting')}\n                      </Button>\n                    </ListDrawerToggler>\n                  </div>\n                </div>\n              )}\n              <FieldDescription\n                Description={Description}\n                field={field}\n                {...(descriptionProps || {})}\n              />\n            </React.Fragment>\n          )}\n          {!readOnly && <DocumentDrawer onSave={onSave} />}\n          {!readOnly && <ListDrawer onSelect={onSelect} />}\n        </div>\n      </div>\n    )\n  }\n\n  return null\n}\n"],"names":["getTranslation","React","useCallback","useEffect","useState","Button","useDocumentDrawer","FileDetails","useListDrawer","useTranslation","FieldDescription","FieldError","FieldLabel","fieldBaseClass","baseClass","UploadInput","props","Description","Error","Label","allowNewUpload","api","className","collection","customUploadActions","descriptionProps","errorProps","field","filterOptions","label","labelProps","onChange","readOnly","relationTo","required","serverURL","showError","style","value","width","i18n","t","fileDoc","setFileDoc","undefined","missingFile","setMissingFile","collectionSlugs","slug","DocumentDrawer","DocumentDrawerToggler","closeDrawer","collectionSlug","ListDrawer","ListDrawerToggler","closeListDrawer","fetchFile","response","fetch","credentials","headers","language","ok","json","onSave","args","doc","onSelect","id","docID","upload","div","filter","Boolean","join","CustomError","Fragment","handleRemove","uploadConfig","disabled","buttonStyle","el","labels","singular"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
+import type { UploadFieldProps } from 'payload';
 import React from 'react';
 import type { UploadInputProps } from './Input.js';
-import type { UploadFieldProps } from './types.js';
 import { UploadInput } from './Input.js';
 import './index.scss';
 export { UploadFieldProps, UploadInput };
 export type { UploadInputProps };
-export declare const Upload: React.FC<UploadFieldProps>;
+export declare const UploadField: React.FC<UploadFieldProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Upload/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAIlD,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AACxC,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,CAAA;AAqFhC,eAAO,MAAM,MAAM,4BAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Upload/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C,OAAO,KAA+B,MAAM,OAAO,CAAA;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAOlD,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AACxC,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,CAAA;AAsGhC,eAAO,MAAM,WAAW,4BAAiC,CAAA"}

package/dist/fields/Upload/index.js

@@ -1,14 +1,19 @@
 'use client';
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
-import { withCondition } from '@payloadcms/ui/forms/withCondition';
-import React, { useCallback } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from 'react';
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
 import { useField } from '../../forms/useField/index.js';
+import { withCondition } from '../../forms/withCondition/index.js';
+import { useAuth } from '../../providers/Auth/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { UploadInput } from './Input.js';
+import './index.scss';
 export { UploadInput };
-const _Upload = (props)=>{
-    const { CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, label, labelProps, path: pathFromProps, readOnly: readOnlyFromProps, relationTo, required, style, validate, width } = props;
-    const { collections, routes: { api }, serverURL } = useConfig();
+const UploadComponent = (props)=>{
+    const { descriptionProps, errorProps, field, field: { _path: pathFromProps, admin: { className, readOnly: readOnlyFromAdmin, style, width } = {}, label, relationTo, required }, labelProps, readOnly: readOnlyFromTopLevelProps, validate } = props;
+    const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
+    const { config: { collections, routes: { api: apiRoute }, serverURL } } = useConfig();
+    const { permissions } = useAuth();
     const collection = collections.find((coll)=>coll.slug === relationTo);
     const memoizedValidate = useCallback((value, options)=>{
         if (typeof validate === 'function') {
@@ -22,11 +27,23 @@ const _Upload = (props)=>{
         required
     ]);
     const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps();
-    const readOnly = readOnlyFromProps || readOnlyFromContext;
-    const { filterOptions, path, setValue, showError, value } = useField({
-        path: pathFromContext || pathFromProps,
+    // Checks if the user has permissions to create a new document in the related collection
+    const canCreate = useMemo(()=>{
+        if (permissions?.collections && permissions.collections?.[relationTo]?.create) {
+            if (permissions.collections[relationTo].create?.permission === true) {
+                return true;
+            }
+        }
+        return false;
+    }, [
+        relationTo,
+        permissions
+    ]);
+    const { filterOptions, formInitializing, formProcessing, setValue, showError, value } = useField({
+        path: pathFromContext ?? pathFromProps,
         validate: memoizedValidate
     });
+    const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing;
     const onChange = useCallback((incomingValue)=>{
         const incomingID = incomingValue?.id || incomingValue;
         setValue(incomingID);
@@ -34,11 +51,12 @@ const _Upload = (props)=>{
         setValue
     ]);
     if (collection.upload) {
-        return /*#__PURE__*/ React.createElement(UploadInput, {
-            CustomDescription: CustomDescription,
-            CustomError: CustomError,
-            CustomLabel: CustomLabel,
-            api: api,
+        return /*#__PURE__*/ _jsx(UploadInput, {
+            Description: field?.admin?.components?.Description,
+            Error: field?.admin?.components?.Error,
+            Label: field?.admin?.components?.Label,
+            allowNewUpload: canCreate,
+            api: apiRoute,
             className: className,
             collection: collection,
             descriptionProps: descriptionProps,
@@ -47,8 +65,7 @@ const _Upload = (props)=>{
             label: label,
             labelProps: labelProps,
             onChange: onChange,
-            path: path,
-            readOnly: readOnly,
+            readOnly: disabled,
             relationTo: relationTo,
             required: required,
             serverURL: serverURL,
@@ -60,6 +77,6 @@ const _Upload = (props)=>{
     }
     return null;
 };
-export const Upload = withCondition(_Upload);
+export const UploadField = withCondition(UploadComponent);
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Upload/index.tsx"],"sourcesContent":["'use client'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { withCondition } from '@payloadcms/ui/forms/withCondition'\nimport React, { useCallback } from 'react'\n\nimport type { UploadInputProps } from './Input.js'\nimport type { UploadFieldProps } from './types.js'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { UploadInput } from './Input.js'\nimport './index.scss'\n\nexport { UploadFieldProps, UploadInput }\nexport type { UploadInputProps }\n\nconst _Upload: React.FC<UploadFieldProps> = (props) => {\n  const {\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    errorProps,\n    label,\n    labelProps,\n    path: pathFromProps,\n    readOnly: readOnlyFromProps,\n    relationTo,\n    required,\n    style,\n    validate,\n    width,\n  } = props\n\n  const {\n    collections,\n    routes: { api },\n    serverURL,\n  } = useConfig()\n\n  const collection = collections.find((coll) => coll.slug === relationTo)\n\n  const memoizedValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps()\n  const readOnly = readOnlyFromProps || readOnlyFromContext\n\n  const { filterOptions, path, setValue, showError, value } = useField<string>({\n    path: pathFromContext || pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const onChange = useCallback(\n    (incomingValue) => {\n      const incomingID = incomingValue?.id || incomingValue\n      setValue(incomingID)\n    },\n    [setValue],\n  )\n\n  if (collection.upload) {\n    return (\n      <UploadInput\n        CustomDescription={CustomDescription}\n        CustomError={CustomError}\n        CustomLabel={CustomLabel}\n        api={api}\n        className={className}\n        collection={collection}\n        descriptionProps={descriptionProps}\n        errorProps={errorProps}\n        filterOptions={filterOptions}\n        label={label}\n        labelProps={labelProps}\n        onChange={onChange}\n        path={path}\n        readOnly={readOnly}\n        relationTo={relationTo}\n        required={required}\n        serverURL={serverURL}\n        showError={showError}\n        style={style}\n        value={value}\n        width={width}\n      />\n    )\n  }\n\n  return null\n}\n\nexport const Upload = withCondition(_Upload)\n"],"names":["useFieldProps","withCondition","React","useCallback","useField","useConfig","UploadInput","_Upload","props","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","label","labelProps","path","pathFromProps","readOnly","readOnlyFromProps","relationTo","required","style","validate","width","collections","routes","api","serverURL","collection","find","coll","slug","memoizedValidate","value","options","pathFromContext","readOnlyFromContext","filterOptions","setValue","showError","onChange","incomingValue","incomingID","id","upload","Upload"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,aAAa,QAAQ,0CAAyC;AACvE,SAASC,aAAa,QAAQ,qCAAoC;AAClE,OAAOC,SAASC,WAAW,QAAQ,QAAO;AAK1C,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,WAAW,QAAQ,aAAY;AAGxC,SAA2BA,WAAW,GAAE;AAGxC,MAAMC,UAAsC,CAACC;IAC3C,MAAM,EACJC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,KAAK,EACLC,UAAU,EACVC,MAAMC,aAAa,EACnBC,UAAUC,iBAAiB,EAC3BC,UAAU,EACVC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACN,GAAGjB;IAEJ,MAAM,EACJkB,WAAW,EACXC,QAAQ,EAAEC,GAAG,EAAE,EACfC,SAAS,EACV,GAAGxB;IAEJ,MAAMyB,aAAaJ,YAAYK,IAAI,CAAC,CAACC,OAASA,KAAKC,IAAI,KAAKZ;IAE5D,MAAMa,mBAAmB/B,YACvB,CAACgC,OAAOC;QACN,IAAI,OAAOZ,aAAa,YAAY;YAClC,OAAOA,SAASW,OAAO;gBAAE,GAAGC,OAAO;gBAAEd;YAAS;QAChD;IACF,GACA;QAACE;QAAUF;KAAS;IAGtB,MAAM,EAAEL,MAAMoB,eAAe,EAAElB,UAAUmB,mBAAmB,EAAE,GAAGtC;IACjE,MAAMmB,WAAWC,qBAAqBkB;IAEtC,MAAM,EAAEC,aAAa,EAAEtB,IAAI,EAAEuB,QAAQ,EAAEC,SAAS,EAAEN,KAAK,EAAE,GAAG/B,SAAiB;QAC3Ea,MAAMoB,mBAAmBnB;QACzBM,UAAUU;IACZ;IAEA,MAAMQ,WAAWvC,YACf,CAACwC;QACC,MAAMC,aAAaD,eAAeE,MAAMF;QACxCH,SAASI;IACX,GACA;QAACJ;KAAS;IAGZ,IAAIV,WAAWgB,MAAM,EAAE;QACrB,qBACE,oBAACxC;YACCG,mBAAmBA;YACnBC,aAAaA;YACbC,aAAaA;YACbiB,KAAKA;YACLhB,WAAWA;YACXkB,YAAYA;YACZjB,kBAAkBA;YAClBC,YAAYA;YACZyB,eAAeA;YACfxB,OAAOA;YACPC,YAAYA;YACZ0B,UAAUA;YACVzB,MAAMA;YACNE,UAAUA;YACVE,YAAYA;YACZC,UAAUA;YACVO,WAAWA;YACXY,WAAWA;YACXlB,OAAOA;YACPY,OAAOA;YACPV,OAAOA;;IAGb;IAEA,OAAO;AACT;AAEA,OAAO,MAAMsB,SAAS9C,cAAcM,SAAQ"}
+{"version":3,"sources":["../../../src/fields/Upload/index.tsx"],"sourcesContent":["'use client'\n\nimport type { UploadFieldProps } from 'payload'\n\nimport React, { useCallback, useMemo } from 'react'\n\nimport type { UploadInputProps } from './Input.js'\n\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { UploadInput } from './Input.js'\nimport './index.scss'\n\nexport { UploadFieldProps, UploadInput }\nexport type { UploadInputProps }\n\nconst UploadComponent: React.FC<UploadFieldProps> = (props) => {\n  const {\n    descriptionProps,\n    errorProps,\n    field,\n    field: {\n      _path: pathFromProps,\n      admin: { className, readOnly: readOnlyFromAdmin, style, width } = {},\n      label,\n      relationTo,\n      required,\n    },\n    labelProps,\n    readOnly: readOnlyFromTopLevelProps,\n    validate,\n  } = props\n\n  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin\n\n  const {\n    config: {\n      collections,\n      routes: { api: apiRoute },\n      serverURL,\n    },\n  } = useConfig()\n\n  const { permissions } = useAuth()\n\n  const collection = collections.find((coll) => coll.slug === relationTo)\n\n  const memoizedValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps()\n\n  // Checks if the user has permissions to create a new document in the related collection\n  const canCreate = useMemo(() => {\n    if (permissions?.collections && permissions.collections?.[relationTo]?.create) {\n      if (permissions.collections[relationTo].create?.permission === true) {\n        return true\n      }\n    }\n\n    return false\n  }, [relationTo, permissions])\n\n  const { filterOptions, formInitializing, formProcessing, setValue, showError, value } =\n    useField<string>({\n      path: pathFromContext ?? pathFromProps,\n      validate: memoizedValidate,\n    })\n\n  const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing\n\n  const onChange = useCallback(\n    (incomingValue) => {\n      const incomingID = incomingValue?.id || incomingValue\n      setValue(incomingID)\n    },\n    [setValue],\n  )\n\n  if (collection.upload) {\n    return (\n      <UploadInput\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={filterOptions}\n        label={label}\n        labelProps={labelProps}\n        onChange={onChange}\n        readOnly={disabled}\n        relationTo={relationTo}\n        required={required}\n        serverURL={serverURL}\n        showError={showError}\n        style={style}\n        value={value}\n        width={width}\n      />\n    )\n  }\n\n  return null\n}\n\nexport const UploadField = withCondition(UploadComponent)\n"],"names":["React","useCallback","useMemo","useFieldProps","useField","withCondition","useAuth","useConfig","UploadInput","UploadComponent","props","descriptionProps","errorProps","field","_path","pathFromProps","admin","className","readOnly","readOnlyFromAdmin","style","width","label","relationTo","required","labelProps","readOnlyFromTopLevelProps","validate","readOnlyFromProps","config","collections","routes","api","apiRoute","serverURL","permissions","collection","find","coll","slug","memoizedValidate","value","options","path","pathFromContext","readOnlyFromContext","canCreate","create","permission","filterOptions","formInitializing","formProcessing","setValue","showError","disabled","onChange","incomingValue","incomingID","id","upload","Description","components","Error","Label","allowNewUpload","UploadField"],"mappings":"AAAA;;AAIA,OAAOA,SAASC,WAAW,EAAEC,OAAO,QAAQ,QAAO;AAInD,SAASC,aAAa,QAAQ,0CAAyC;AACvE,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,aAAa,QAAQ,qCAAoC;AAClE,SAASC,OAAO,QAAQ,gCAA+B;AACvD,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,WAAW,QAAQ,aAAY;AACxC,OAAO,eAAc;AAErB,SAA2BA,WAAW,GAAE;AAGxC,MAAMC,kBAA8C,CAACC;IACnD,MAAM,EACJC,gBAAgB,EAChBC,UAAU,EACVC,KAAK,EACLA,OAAO,EACLC,OAAOC,aAAa,EACpBC,OAAO,EAAEC,SAAS,EAAEC,UAAUC,iBAAiB,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAG,CAAC,CAAC,EACpEC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACT,EACDC,UAAU,EACVP,UAAUQ,yBAAyB,EACnCC,QAAQ,EACT,GAAGjB;IAEJ,MAAMkB,oBAAoBF,6BAA6BP;IAEvD,MAAM,EACJU,QAAQ,EACNC,WAAW,EACXC,QAAQ,EAAEC,KAAKC,QAAQ,EAAE,EACzBC,SAAS,EACV,EACF,GAAG3B;IAEJ,MAAM,EAAE4B,WAAW,EAAE,GAAG7B;IAExB,MAAM8B,aAAaN,YAAYO,IAAI,CAAC,CAACC,OAASA,KAAKC,IAAI,KAAKhB;IAE5D,MAAMiB,mBAAmBvC,YACvB,CAACwC,OAAOC;QACN,IAAI,OAAOf,aAAa,YAAY;YAClC,OAAOA,SAASc,OAAO;gBAAE,GAAGC,OAAO;gBAAElB;YAAS;QAChD;IACF,GACA;QAACG;QAAUH;KAAS;IAGtB,MAAM,EAAEmB,MAAMC,eAAe,EAAE1B,UAAU2B,mBAAmB,EAAE,GAAG1C;IAEjE,wFAAwF;IACxF,MAAM2C,YAAY5C,QAAQ;QACxB,IAAIiC,aAAaL,eAAeK,YAAYL,WAAW,EAAE,CAACP,WAAW,EAAEwB,QAAQ;YAC7E,IAAIZ,YAAYL,WAAW,CAACP,WAAW,CAACwB,MAAM,EAAEC,eAAe,MAAM;gBACnE,OAAO;YACT;QACF;QAEA,OAAO;IACT,GAAG;QAACzB;QAAYY;KAAY;IAE5B,MAAM,EAAEc,aAAa,EAAEC,gBAAgB,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,SAAS,EAAEZ,KAAK,EAAE,GACnFrC,SAAiB;QACfuC,MAAMC,mBAAmB7B;QACzBY,UAAUa;IACZ;IAEF,MAAMc,WAAW1B,qBAAqBiB,uBAAuBM,kBAAkBD;IAE/E,MAAMK,WAAWtD,YACf,CAACuD;QACC,MAAMC,aAAaD,eAAeE,MAAMF;QACxCJ,SAASK;IACX,GACA;QAACL;KAAS;IAGZ,IAAIhB,WAAWuB,MAAM,EAAE;QACrB,qBACE,KAACnD;YACCoD,aAAa/C,OAAOG,OAAO6C,YAAYD;YACvCE,OAAOjD,OAAOG,OAAO6C,YAAYC;YACjCC,OAAOlD,OAAOG,OAAO6C,YAAYE;YACjCC,gBAAgBlB;YAChBd,KAAKC;YACLhB,WAAWA;YACXmB,YAAYA;YACZzB,kBAAkBA;YAClBC,YAAYA;YACZqC,eAAeA;YACf3B,OAAOA;YACPG,YAAYA;YACZ8B,UAAUA;YACVrC,UAAUoC;YACV/B,YAAYA;YACZC,UAAUA;YACVU,WAAWA;YACXmB,WAAWA;YACXjC,OAAOA;YACPqB,OAAOA;YACPpB,OAAOA;;IAGb;IAEA,OAAO;AACT;AAEA,OAAO,MAAM4C,cAAc5D,cAAcI,iBAAgB"}

package/dist/fields/Upload/index.scss

@@ -6,16 +6,16 @@
 
   &__wrap {
     background: var(--theme-elevation-50);
-    padding: base(1);
+    padding: base(1.6);
+    border-radius: $style-radius-s;
   }
 
   &__buttons {
-    margin: base(-0.25);
     width: calc(100% + #{base(0.5)});
     flex-wrap: wrap;
     display: flex;
     align-items: center;
-    gap: base(0.25);
+    gap: base(0.4);
 
     .btn {
       margin: 0;
@@ -35,6 +35,13 @@
       width: calc(100% - #{base(0.5)});
     }
   }
+
+  &.read-only {
+    .file-details {
+      @include readOnly;
+      color: var(--theme-elevation-600);
+    }
+  }
 }
 
 html[data-theme='light'] {

package/dist/fields/index.d.ts

@@ -1,4 +1,8 @@
-import type { FieldTypes } from 'payload/config';
+import type { FieldTypes } from 'payload';
+import type React from 'react';
 export * from './shared/index.js';
-export declare const fieldComponents: FieldTypes;
+export type FieldTypesComponents = {
+    [K in 'confirmPassword' | 'hidden' | 'password' | FieldTypes]: React.FC;
+};
+export declare const fieldComponents: FieldTypesComponents;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/fields/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AA2BhD,cAAc,mBAAmB,CAAA;AAEjC,eAAO,MAAM,eAAe,EAAE,UAyB7B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/fields/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA2B9B,cAAc,mBAAmB,CAAA;AAEjC,MAAM,MAAM,oBAAoB,GAAG;KAChC,CAAC,IAAI,iBAAiB,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,KAAK,CAAC,EAAE;CACxE,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,oBAyB7B,CAAA"}

package/dist/fields/index.js

@@ -1,53 +1,53 @@
-import { ArrayField as array } from './Array/index.js';
-import { BlocksField as blocks } from './Blocks/index.js';
-import { Checkbox as checkbox } from './Checkbox/index.js';
-import { Code as code } from './Code/index.js';
-import { Collapsible as collapsible } from './Collapsible/index.js';
-import { ConfirmPassword as confirmPassword } from './ConfirmPassword/index.js';
-import { DateTime as date } from './DateTime/index.js';
-import { Email as email } from './Email/index.js';
-import { Group as group } from './Group/index.js';
-import { HiddenInput as hidden } from './HiddenInput/index.js';
-import { JSONField as json } from './JSON/index.js';
-import { NumberField as number } from './Number/index.js';
-import { Password as password } from './Password/index.js';
-import { Point as point } from './Point/index.js';
-import { RadioGroup as radio } from './RadioGroup/index.js';
-import { Relationship as relationship } from './Relationship/index.js';
-import { RichText as richText } from './RichText/index.js';
-import { Row as row } from './Row/index.js';
-import { Select as select } from './Select/index.js';
-import { Tabs as tabs } from './Tabs/index.js';
-import { Text as text } from './Text/index.js';
-import { Textarea as textarea } from './Textarea/index.js';
-import { UI as ui } from './UI/index.js';
-import { Upload as upload } from './Upload/index.js';
+import { ArrayField } from './Array/index.js';
+import { BlocksField } from './Blocks/index.js';
+import { CheckboxField } from './Checkbox/index.js';
+import { CodeField } from './Code/index.js';
+import { CollapsibleField } from './Collapsible/index.js';
+import { ConfirmPasswordField } from './ConfirmPassword/index.js';
+import { DateTimeField } from './DateTime/index.js';
+import { EmailField } from './Email/index.js';
+import { GroupField } from './Group/index.js';
+import { HiddenField } from './Hidden/index.js';
+import { JSONField } from './JSON/index.js';
+import { NumberField } from './Number/index.js';
+import { PasswordField } from './Password/index.js';
+import { PointField } from './Point/index.js';
+import { RadioGroupField } from './RadioGroup/index.js';
+import { RelationshipField } from './Relationship/index.js';
+import { RichTextField } from './RichText/index.js';
+import { RowField } from './Row/index.js';
+import { SelectField } from './Select/index.js';
+import { TabsField } from './Tabs/index.js';
+import { TextField } from './Text/index.js';
+import { TextareaField } from './Textarea/index.js';
+import { UIField } from './UI/index.js';
+import { UploadField } from './Upload/index.js';
 export * from './shared/index.js';
 export const fieldComponents = {
-    array,
-    blocks,
-    checkbox,
-    code,
-    collapsible,
-    confirmPassword,
-    date,
-    email,
-    group,
-    hidden,
-    json,
-    number,
-    password,
-    point,
-    radio,
-    relationship,
-    richText,
-    row,
-    select,
-    tabs,
-    text,
-    textarea,
-    ui,
-    upload
+    array: ArrayField,
+    blocks: BlocksField,
+    checkbox: CheckboxField,
+    code: CodeField,
+    collapsible: CollapsibleField,
+    confirmPassword: ConfirmPasswordField,
+    date: DateTimeField,
+    email: EmailField,
+    group: GroupField,
+    hidden: HiddenField,
+    json: JSONField,
+    number: NumberField,
+    password: PasswordField,
+    point: PointField,
+    radio: RadioGroupField,
+    relationship: RelationshipField,
+    richText: RichTextField,
+    row: RowField,
+    select: SelectField,
+    tabs: TabsField,
+    text: TextField,
+    textarea: TextareaField,
+    ui: UIField,
+    upload: UploadField
 };
 
 //# sourceMappingURL=index.js.map

package/dist/fields/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/index.tsx"],"sourcesContent":["import type { FieldTypes } from 'payload/config'\n\nimport { ArrayField as array } from './Array/index.js'\nimport { BlocksField as blocks } from './Blocks/index.js'\nimport { Checkbox as checkbox } from './Checkbox/index.js'\nimport { Code as code } from './Code/index.js'\nimport { Collapsible as collapsible } from './Collapsible/index.js'\nimport { ConfirmPassword as confirmPassword } from './ConfirmPassword/index.js'\nimport { DateTime as date } from './DateTime/index.js'\nimport { Email as email } from './Email/index.js'\nimport { Group as group } from './Group/index.js'\nimport { HiddenInput as hidden } from './HiddenInput/index.js'\nimport { JSONField as json } from './JSON/index.js'\nimport { NumberField as number } from './Number/index.js'\nimport { Password as password } from './Password/index.js'\nimport { Point as point } from './Point/index.js'\nimport { RadioGroup as radio } from './RadioGroup/index.js'\nimport { Relationship as relationship } from './Relationship/index.js'\nimport { RichText as richText } from './RichText/index.js'\nimport { Row as row } from './Row/index.js'\nimport { Select as select } from './Select/index.js'\nimport { Tabs as tabs } from './Tabs/index.js'\nimport { Text as text } from './Text/index.js'\nimport { Textarea as textarea } from './Textarea/index.js'\nimport { UI as ui } from './UI/index.js'\nimport { Upload as upload } from './Upload/index.js'\n\nexport * from './shared/index.js'\n\nexport const fieldComponents: FieldTypes = {\n  array,\n  blocks,\n  checkbox,\n  code,\n  collapsible,\n  confirmPassword,\n  date,\n  email,\n  group,\n  hidden,\n  json,\n  number,\n  password,\n  point,\n  radio,\n  relationship,\n  richText,\n  row,\n  select,\n  tabs,\n  text,\n  textarea,\n  ui,\n  upload,\n}\n"],"names":["ArrayField","array","BlocksField","blocks","Checkbox","checkbox","Code","code","Collapsible","collapsible","ConfirmPassword","confirmPassword","DateTime","date","Email","email","Group","group","HiddenInput","hidden","JSONField","json","NumberField","number","Password","password","Point","point","RadioGroup","radio","Relationship","relationship","RichText","richText","Row","row","Select","select","Tabs","tabs","Text","text","Textarea","textarea","UI","ui","Upload","upload","fieldComponents"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,SAASA,cAAcC,KAAK,QAAQ,mBAAkB;AACtD,SAASC,eAAeC,MAAM,QAAQ,oBAAmB;AACzD,SAASC,YAAYC,QAAQ,QAAQ,sBAAqB;AAC1D,SAASC,QAAQC,IAAI,QAAQ,kBAAiB;AAC9C,SAASC,eAAeC,WAAW,QAAQ,yBAAwB;AACnE,SAASC,mBAAmBC,eAAe,QAAQ,6BAA4B;AAC/E,SAASC,YAAYC,IAAI,QAAQ,sBAAqB;AACtD,SAASC,SAASC,KAAK,QAAQ,mBAAkB;AACjD,SAASC,SAASC,KAAK,QAAQ,mBAAkB;AACjD,SAASC,eAAeC,MAAM,QAAQ,yBAAwB;AAC9D,SAASC,aAAaC,IAAI,QAAQ,kBAAiB;AACnD,SAASC,eAAeC,MAAM,QAAQ,oBAAmB;AACzD,SAASC,YAAYC,QAAQ,QAAQ,sBAAqB;AAC1D,SAASC,SAASC,KAAK,QAAQ,mBAAkB;AACjD,SAASC,cAAcC,KAAK,QAAQ,wBAAuB;AAC3D,SAASC,gBAAgBC,YAAY,QAAQ,0BAAyB;AACtE,SAASC,YAAYC,QAAQ,QAAQ,sBAAqB;AAC1D,SAASC,OAAOC,GAAG,QAAQ,iBAAgB;AAC3C,SAASC,UAAUC,MAAM,QAAQ,oBAAmB;AACpD,SAASC,QAAQC,IAAI,QAAQ,kBAAiB;AAC9C,SAASC,QAAQC,IAAI,QAAQ,kBAAiB;AAC9C,SAASC,YAAYC,QAAQ,QAAQ,sBAAqB;AAC1D,SAASC,MAAMC,EAAE,QAAQ,gBAAe;AACxC,SAASC,UAAUC,MAAM,QAAQ,oBAAmB;AAEpD,cAAc,oBAAmB;AAEjC,OAAO,MAAMC,kBAA8B;IACzC/C;IACAE;IACAE;IACAE;IACAE;IACAE;IACAE;IACAE;IACAE;IACAE;IACAE;IACAE;IACAE;IACAE;IACAE;IACAE;IACAE;IACAE;IACAE;IACAE;IACAE;IACAE;IACAE;IACAE;AACF,EAAC"}
+{"version":3,"sources":["../../src/fields/index.tsx"],"sourcesContent":["import type { FieldTypes } from 'payload'\nimport type React from 'react'\n\nimport { ArrayField } from './Array/index.js'\nimport { BlocksField } from './Blocks/index.js'\nimport { CheckboxField } from './Checkbox/index.js'\nimport { CodeField } from './Code/index.js'\nimport { CollapsibleField } from './Collapsible/index.js'\nimport { ConfirmPasswordField } from './ConfirmPassword/index.js'\nimport { DateTimeField } from './DateTime/index.js'\nimport { EmailField } from './Email/index.js'\nimport { GroupField } from './Group/index.js'\nimport { HiddenField } from './Hidden/index.js'\nimport { JSONField } from './JSON/index.js'\nimport { NumberField } from './Number/index.js'\nimport { PasswordField } from './Password/index.js'\nimport { PointField } from './Point/index.js'\nimport { RadioGroupField } from './RadioGroup/index.js'\nimport { RelationshipField } from './Relationship/index.js'\nimport { RichTextField } from './RichText/index.js'\nimport { RowField } from './Row/index.js'\nimport { SelectField } from './Select/index.js'\nimport { TabsField } from './Tabs/index.js'\nimport { TextField } from './Text/index.js'\nimport { TextareaField } from './Textarea/index.js'\nimport { UIField } from './UI/index.js'\nimport { UploadField } from './Upload/index.js'\n\nexport * from './shared/index.js'\n\nexport type FieldTypesComponents = {\n  [K in 'confirmPassword' | 'hidden' | 'password' | FieldTypes]: React.FC\n}\n\nexport const fieldComponents: FieldTypesComponents = {\n  array: ArrayField,\n  blocks: BlocksField,\n  checkbox: CheckboxField,\n  code: CodeField,\n  collapsible: CollapsibleField,\n  confirmPassword: ConfirmPasswordField,\n  date: DateTimeField,\n  email: EmailField,\n  group: GroupField,\n  hidden: HiddenField,\n  json: JSONField,\n  number: NumberField,\n  password: PasswordField,\n  point: PointField,\n  radio: RadioGroupField,\n  relationship: RelationshipField,\n  richText: RichTextField,\n  row: RowField,\n  select: SelectField,\n  tabs: TabsField,\n  text: TextField,\n  textarea: TextareaField,\n  ui: UIField,\n  upload: UploadField,\n}\n"],"names":["ArrayField","BlocksField","CheckboxField","CodeField","CollapsibleField","ConfirmPasswordField","DateTimeField","EmailField","GroupField","HiddenField","JSONField","NumberField","PasswordField","PointField","RadioGroupField","RelationshipField","RichTextField","RowField","SelectField","TabsField","TextField","TextareaField","UIField","UploadField","fieldComponents","array","blocks","checkbox","code","collapsible","confirmPassword","date","email","group","hidden","json","number","password","point","radio","relationship","richText","row","select","tabs","text","textarea","ui","upload"],"mappings":"AAGA,SAASA,UAAU,QAAQ,mBAAkB;AAC7C,SAASC,WAAW,QAAQ,oBAAmB;AAC/C,SAASC,aAAa,QAAQ,sBAAqB;AACnD,SAASC,SAAS,QAAQ,kBAAiB;AAC3C,SAASC,gBAAgB,QAAQ,yBAAwB;AACzD,SAASC,oBAAoB,QAAQ,6BAA4B;AACjE,SAASC,aAAa,QAAQ,sBAAqB;AACnD,SAASC,UAAU,QAAQ,mBAAkB;AAC7C,SAASC,UAAU,QAAQ,mBAAkB;AAC7C,SAASC,WAAW,QAAQ,oBAAmB;AAC/C,SAASC,SAAS,QAAQ,kBAAiB;AAC3C,SAASC,WAAW,QAAQ,oBAAmB;AAC/C,SAASC,aAAa,QAAQ,sBAAqB;AACnD,SAASC,UAAU,QAAQ,mBAAkB;AAC7C,SAASC,eAAe,QAAQ,wBAAuB;AACvD,SAASC,iBAAiB,QAAQ,0BAAyB;AAC3D,SAASC,aAAa,QAAQ,sBAAqB;AACnD,SAASC,QAAQ,QAAQ,iBAAgB;AACzC,SAASC,WAAW,QAAQ,oBAAmB;AAC/C,SAASC,SAAS,QAAQ,kBAAiB;AAC3C,SAASC,SAAS,QAAQ,kBAAiB;AAC3C,SAASC,aAAa,QAAQ,sBAAqB;AACnD,SAASC,OAAO,QAAQ,gBAAe;AACvC,SAASC,WAAW,QAAQ,oBAAmB;AAE/C,cAAc,oBAAmB;AAMjC,OAAO,MAAMC,kBAAwC;IACnDC,OAAOzB;IACP0B,QAAQzB;IACR0B,UAAUzB;IACV0B,MAAMzB;IACN0B,aAAazB;IACb0B,iBAAiBzB;IACjB0B,MAAMzB;IACN0B,OAAOzB;IACP0B,OAAOzB;IACP0B,QAAQzB;IACR0B,MAAMzB;IACN0B,QAAQzB;IACR0B,UAAUzB;IACV0B,OAAOzB;IACP0B,OAAOzB;IACP0B,cAAczB;IACd0B,UAAUzB;IACV0B,KAAKzB;IACL0B,QAAQzB;IACR0B,MAAMzB;IACN0B,MAAMzB;IACN0B,UAAUzB;IACV0B,IAAIzB;IACJ0B,QAAQzB;AACV,EAAC"}

package/dist/fields/shared/index.d.ts

@@ -1,32 +1,5 @@
-/// <reference types="react" resolution-mode="require"/>
-import type { User } from 'payload/auth';
-import type { Locale, SanitizedLocalizationConfig } from 'payload/config';
-import type { DocumentPreferences, ErrorProps, FieldDescriptionProps, LabelProps, SanitizedLabelProps, Validate } from 'payload/types';
+import type { Locale, SanitizedLocalizationConfig } from 'payload';
 export declare const fieldBaseClass = "field-type";
-export type FormFieldBase = {
-    AfterInput?: React.ReactNode;
-    BeforeInput?: React.ReactNode;
-    CustomDescription?: React.ReactNode;
-    CustomError?: React.ReactNode;
-    CustomLabel?: React.ReactNode;
-    className?: string;
-    custom?: Record<string, any>;
-    descriptionProps?: FieldDescriptionProps;
-    disabled?: boolean;
-    docPreferences?: DocumentPreferences;
-    errorProps?: ErrorProps;
-    label?: LabelProps['label'];
-    labelProps?: SanitizedLabelProps;
-    locale?: Locale;
-    localized?: boolean;
-    path?: string;
-    readOnly?: boolean;
-    required?: boolean;
-    rtl?: boolean;
-    style?: React.CSSProperties;
-    user?: User;
-    validate?: Validate;
-};
 /**
  * Determines whether a field should be displayed as right-to-left (RTL) based on its configuration, payload's localization configuration and the adming user's currently enabled locale.
 

package/dist/fields/shared/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/shared/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,KAAK,EAAE,MAAM,EAAE,2BAA2B,EAAE,MAAM,gBAAgB,CAAA;AACzE,OAAO,KAAK,EACV,mBAAmB,EACnB,UAAU,EACV,qBAAqB,EACrB,UAAU,EACV,mBAAmB,EACnB,QAAQ,EACT,MAAM,eAAe,CAAA;AAEtB,eAAO,MAAM,cAAc,eAAe,CAAA;AAE1C,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5B,gBAAgB,CAAC,EAAE,qBAAqB,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,mBAAmB,CAAA;IACpC,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAA;IAC3B,UAAU,CAAC,EAAE,mBAAmB,CAAA;IAChC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,QAAQ,CAAC,EAAE,QAAQ,CAAA;CACpB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,cAAc,EACd,QAAQ,EACR,MAAM,EACN,kBAAkB,GACnB,EAAE;IACD,cAAc,EAAE,OAAO,CAAA;IACvB,QAAQ,EAAE,OAAO,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,kBAAkB,CAAC,EAAE,2BAA2B,CAAA;CACjD,WAiBA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/shared/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAA;AAElE,eAAO,MAAM,cAAc,eAAe,CAAA;AAE1C;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,cAAc,EACd,QAAQ,EACR,MAAM,EACN,kBAAkB,GACnB,EAAE;IACD,cAAc,EAAE,OAAO,CAAA;IACvB,QAAQ,EAAE,OAAO,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,kBAAkB,CAAC,EAAE,2BAA2B,CAAA;CACjD,WAiBA"}

package/dist/fields/shared/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/shared/index.tsx"],"sourcesContent":["import type { User } from 'payload/auth'\nimport type { Locale, SanitizedLocalizationConfig } from 'payload/config'\nimport type {\n  DocumentPreferences,\n  ErrorProps,\n  FieldDescriptionProps,\n  LabelProps,\n  SanitizedLabelProps,\n  Validate,\n} from 'payload/types'\n\nexport const fieldBaseClass = 'field-type'\n\nexport type FormFieldBase = {\n  AfterInput?: React.ReactNode\n  BeforeInput?: React.ReactNode\n  CustomDescription?: React.ReactNode\n  CustomError?: React.ReactNode\n  CustomLabel?: React.ReactNode\n  className?: string\n  custom?: Record<string, any>\n  descriptionProps?: FieldDescriptionProps\n  disabled?: boolean\n  docPreferences?: DocumentPreferences\n  errorProps?: ErrorProps\n  label?: LabelProps['label']\n  labelProps?: SanitizedLabelProps\n  locale?: Locale\n  localized?: boolean\n  path?: string\n  readOnly?: boolean\n  required?: boolean\n  rtl?: boolean\n  style?: React.CSSProperties\n  user?: User\n  validate?: Validate\n}\n\n/**\n * Determines whether a field should be displayed as right-to-left (RTL) based on its configuration, payload's localization configuration and the adming user's currently enabled locale.\n\n * @returns Whether the field should be displayed as RTL.\n */\nexport function isFieldRTL({\n  fieldLocalized,\n  fieldRTL,\n  locale,\n  localizationConfig,\n}: {\n  fieldLocalized: boolean\n  fieldRTL: boolean\n  locale: Locale\n  localizationConfig?: SanitizedLocalizationConfig\n}) {\n  const hasMultipleLocales =\n    locale &&\n    localizationConfig &&\n    localizationConfig.locales &&\n    localizationConfig.locales.length > 1\n\n  const isCurrentLocaleDefaultLocale = locale?.code === localizationConfig?.defaultLocale\n\n  return (\n    (fieldRTL !== false &&\n      locale?.rtl === true &&\n      (fieldLocalized ||\n        (!fieldLocalized && !hasMultipleLocales) || // If there is only one locale which is also rtl, that field is rtl too\n        (!fieldLocalized && isCurrentLocaleDefaultLocale))) || // If the current locale is the default locale, but the field is not localized, that field is rtl too\n    fieldRTL === true\n  ) // If fieldRTL is true. This should be useful for when no localization is set at all in the payload config, but you still want fields to be rtl.\n}\n"],"names":["fieldBaseClass","isFieldRTL","fieldLocalized","fieldRTL","locale","localizationConfig","hasMultipleLocales","locales","length","isCurrentLocaleDefaultLocale","code","defaultLocale","rtl"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAWA,OAAO,MAAMA,iBAAiB,aAAY;AA2B1C;;;;CAIC,GACD,OAAO,SAASC,WAAW,EACzBC,cAAc,EACdC,QAAQ,EACRC,MAAM,EACNC,kBAAkB,EAMnB;IACC,MAAMC,qBACJF,UACAC,sBACAA,mBAAmBE,OAAO,IAC1BF,mBAAmBE,OAAO,CAACC,MAAM,GAAG;IAEtC,MAAMC,+BAA+BL,QAAQM,SAASL,oBAAoBM;IAE1E,OACE,AAACR,aAAa,SACZC,QAAQQ,QAAQ,QACfV,CAAAA,kBACE,CAACA,kBAAkB,CAACI,sBAAuB,uEAAuE;IAClH,CAACJ,kBAAkBO,4BAA4B,KAAO,qGAAqG;IAChKN,aAAa,KACb,gJAAgJ;;AACpJ"}
+{"version":3,"sources":["../../../src/fields/shared/index.tsx"],"sourcesContent":["import type { Locale, SanitizedLocalizationConfig } from 'payload'\n\nexport const fieldBaseClass = 'field-type'\n\n/**\n * Determines whether a field should be displayed as right-to-left (RTL) based on its configuration, payload's localization configuration and the adming user's currently enabled locale.\n\n * @returns Whether the field should be displayed as RTL.\n */\nexport function isFieldRTL({\n  fieldLocalized,\n  fieldRTL,\n  locale,\n  localizationConfig,\n}: {\n  fieldLocalized: boolean\n  fieldRTL: boolean\n  locale: Locale\n  localizationConfig?: SanitizedLocalizationConfig\n}) {\n  const hasMultipleLocales =\n    locale &&\n    localizationConfig &&\n    localizationConfig.locales &&\n    localizationConfig.locales.length > 1\n\n  const isCurrentLocaleDefaultLocale = locale?.code === localizationConfig?.defaultLocale\n\n  return (\n    (fieldRTL !== false &&\n      locale?.rtl === true &&\n      (fieldLocalized ||\n        (!fieldLocalized && !hasMultipleLocales) || // If there is only one locale which is also rtl, that field is rtl too\n        (!fieldLocalized && isCurrentLocaleDefaultLocale))) || // If the current locale is the default locale, but the field is not localized, that field is rtl too\n    fieldRTL === true\n  ) // If fieldRTL is true. This should be useful for when no localization is set at all in the payload config, but you still want fields to be rtl.\n}\n"],"names":["fieldBaseClass","isFieldRTL","fieldLocalized","fieldRTL","locale","localizationConfig","hasMultipleLocales","locales","length","isCurrentLocaleDefaultLocale","code","defaultLocale","rtl"],"mappings":"AAEA,OAAO,MAAMA,iBAAiB,aAAY;AAE1C;;;;CAIC,GACD,OAAO,SAASC,WAAW,EACzBC,cAAc,EACdC,QAAQ,EACRC,MAAM,EACNC,kBAAkB,EAMnB;IACC,MAAMC,qBACJF,UACAC,sBACAA,mBAAmBE,OAAO,IAC1BF,mBAAmBE,OAAO,CAACC,MAAM,GAAG;IAEtC,MAAMC,+BAA+BL,QAAQM,SAASL,oBAAoBM;IAE1E,OACE,AAACR,aAAa,SACZC,QAAQQ,QAAQ,QACfV,CAAAA,kBACE,CAACA,kBAAkB,CAACI,sBAAuB,uEAAuE;IAClH,CAACJ,kBAAkBO,4BAA4B,KAAO,qGAAqG;IAChKN,aAAa,KACb,gJAAgJ;;AACpJ"}