@payloadcms/ui 3.0.0-alpha.47 → 3.0.0-alpha.49

package/dist/fields/Upload/Input.js

@@ -0,0 +1,130 @@
+'use client';
+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 { fieldBaseClass } from '../shared/index.js';
+const baseClass = 'upload';
+export const UploadInput = (props)=>{
+    const { CustomDescription, CustomError, CustomLabel, api = '/api', className, collection, descriptionProps, errorProps, filterOptions, labelProps, onChange, readOnly, relationTo, serverURL, showError, style, value, width } = props;
+    const { i18n, t } = useTranslation();
+    const [file, setFile] = useState(undefined);
+    const [missingFile, setMissingFile] = useState(false);
+    const [collectionSlugs] = useState([
+        collection?.slug
+    ]);
+    const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({
+        collectionSlug: collectionSlugs[0]
+    });
+    const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer }] = useListDrawer({
+        collectionSlugs,
+        filterOptions
+    });
+    useEffect(()=>{
+        if (value !== null && typeof value !== 'undefined' && value !== '') {
+            const fetchFile = async ()=>{
+                const response = await fetch(`${serverURL}${api}/${relationTo}/${value}`, {
+                    credentials: 'include',
+                    headers: {
+                        'Accept-Language': i18n.language
+                    }
+                });
+                if (response.ok) {
+                    const json = await response.json();
+                    setFile(json);
+                } else {
+                    setMissingFile(true);
+                    setFile(undefined);
+                }
+            };
+            void fetchFile();
+        } else {
+            setFile(undefined);
+        }
+    }, [
+        value,
+        relationTo,
+        api,
+        serverURL,
+        i18n
+    ]);
+    const onSave = useCallback((args)=>{
+        setMissingFile(false);
+        onChange(args.doc);
+        closeDrawer();
+    }, [
+        onChange,
+        closeDrawer
+    ]);
+    const onSelect = useCallback((args)=>{
+        setMissingFile(false);
+        onChange({
+            id: args.docID
+        });
+        closeListDrawer();
+    }, [
+        onChange,
+        closeListDrawer
+    ]);
+    if (collection.upload) {
+        return /*#__PURE__*/ React.createElement("div", {
+            className: [
+                fieldBaseClass,
+                baseClass,
+                className,
+                showError && 'error',
+                readOnly && 'read-only'
+            ].filter(Boolean).join(' '),
+            style: {
+                ...style,
+                width
+            }
+        }, /*#__PURE__*/ React.createElement(FieldError, {
+            CustomError: CustomError,
+            ...errorProps || {}
+        }), /*#__PURE__*/ React.createElement(FieldLabel, {
+            CustomLabel: CustomLabel,
+            ...labelProps || {}
+        }), collection?.upload && /*#__PURE__*/ React.createElement(React.Fragment, null, file && !missingFile && /*#__PURE__*/ React.createElement(FileDetails, {
+            collectionSlug: relationTo,
+            doc: file,
+            handleRemove: readOnly ? undefined : ()=>{
+                onChange(null);
+            },
+            uploadConfig: collection.upload
+        }), (!file || 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
+        }));
+    }
+    return null;
+};
+
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +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    labelProps,\n    onChange,\n    readOnly,\n    relationTo,\n    serverURL,\n    showError,\n    style,\n    value,\n    width,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  const [file, setFile] = 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          setFile(json)\n        } else {\n          setMissingFile(true)\n          setFile(undefined)\n        }\n      }\n\n      void fetchFile()\n    } else {\n      setFile(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 CustomLabel={CustomLabel} {...(labelProps || {})} />\n        {collection?.upload && (\n          <React.Fragment>\n            {file && !missingFile && (\n              <FileDetails\n                collectionSlug={relationTo}\n                doc={file}\n                handleRemove={\n                  readOnly\n                    ? undefined\n                    : () => {\n                        onChange(null)\n                      }\n                }\n                uploadConfig={collection.upload}\n              />\n            )}\n            {(!file || 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","labelProps","onChange","readOnly","relationTo","serverURL","showError","style","value","width","i18n","t","file","setFile","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","label","labels","singular"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+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>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Upload/index.tsx"],"names":[],"mappings":"AACA,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;AAEhC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6E7C,CAAA"}

package/dist/fields/Upload/index.js

@@ -0,0 +1,59 @@
+'use client';
+import React, { useCallback } from 'react';
+import { useField } from '../../forms/useField/index.js';
+import { useConfig } from '../../providers/Config/index.js';
+import { UploadInput } from './Input.js';
+export { UploadInput };
+export const Upload = (props)=>{
+    const { CustomDescription, CustomError, CustomLabel, className, descriptionProps, errorProps, label, labelProps, path: pathFromProps, readOnly, relationTo, required, style, validate, width } = props;
+    const { collections, routes: { api }, serverURL } = useConfig();
+    const collection = collections.find((coll)=>coll.slug === relationTo);
+    const memoizedValidate = useCallback((value, options)=>{
+        if (typeof validate === 'function') {
+            return validate(value, {
+                ...options,
+                required
+            });
+        }
+    }, [
+        validate,
+        required
+    ]);
+    const { filterOptions, path, setValue, showError, value } = useField({
+        path: pathFromProps,
+        validate: memoizedValidate
+    });
+    const onChange = useCallback((incomingValue)=>{
+        const incomingID = incomingValue?.id || incomingValue;
+        setValue(incomingID);
+    }, [
+        setValue
+    ]);
+    if (collection.upload) {
+        return /*#__PURE__*/ React.createElement(UploadInput, {
+            CustomDescription: CustomDescription,
+            CustomError: CustomError,
+            CustomLabel: CustomLabel,
+            api: api,
+            className: className,
+            collection: collection,
+            descriptionProps: descriptionProps,
+            errorProps: errorProps,
+            filterOptions: filterOptions,
+            labelProps: labelProps,
+            onChange: onChange,
+            path: path,
+            readOnly: readOnly,
+            relationTo: relationTo,
+            required: required,
+            serverURL: serverURL,
+            showError: showError,
+            style: style,
+            value: value,
+            width: width
+        });
+    }
+    return null;
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Upload/index.tsx"],"sourcesContent":["'use client'\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\nexport const 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,\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 { filterOptions, path, setValue, showError, value } = useField<string>({\n    path: 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        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"],"names":["React","useCallback","useField","useConfig","UploadInput","Upload","props","CustomDescription","CustomError","CustomLabel","className","descriptionProps","errorProps","label","labelProps","path","pathFromProps","readOnly","relationTo","required","style","validate","width","collections","routes","api","serverURL","collection","find","coll","slug","memoizedValidate","value","options","filterOptions","setValue","showError","onChange","incomingValue","incomingID","id","upload"],"mappings":"AAAA;AACA,OAAOA,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,OAAO,MAAMC,SAAqC,CAACC;IACjD,MAAM,EACJC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,KAAK,EACLC,UAAU,EACVC,MAAMC,aAAa,EACnBC,QAAQ,EACRC,UAAU,EACVC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACN,GAAGhB;IAEJ,MAAM,EACJiB,WAAW,EACXC,QAAQ,EAAEC,GAAG,EAAE,EACfC,SAAS,EACV,GAAGvB;IAEJ,MAAMwB,aAAaJ,YAAYK,IAAI,CAAC,CAACC,OAASA,KAAKC,IAAI,KAAKZ;IAE5D,MAAMa,mBAAmB9B,YACvB,CAAC+B,OAAOC;QACN,IAAI,OAAOZ,aAAa,YAAY;YAClC,OAAOA,SAASW,OAAO;gBAAE,GAAGC,OAAO;gBAAEd;YAAS;QAChD;IACF,GACA;QAACE;QAAUF;KAAS;IAGtB,MAAM,EAAEe,aAAa,EAAEnB,IAAI,EAAEoB,QAAQ,EAAEC,SAAS,EAAEJ,KAAK,EAAE,GAAG9B,SAAiB;QAC3Ea,MAAMC;QACNK,UAAUU;IACZ;IAEA,MAAMM,WAAWpC,YACf,CAACqC;QACC,MAAMC,aAAaD,eAAeE,MAAMF;QACxCH,SAASI;IACX,GACA;QAACJ;KAAS;IAGZ,IAAIR,WAAWc,MAAM,EAAE;QACrB,qBACE,oBAACrC;YACCG,mBAAmBA;YACnBC,aAAaA;YACbC,aAAaA;YACbgB,KAAKA;YACLf,WAAWA;YACXiB,YAAYA;YACZhB,kBAAkBA;YAClBC,YAAYA;YACZsB,eAAeA;YACfpB,YAAYA;YACZuB,UAAUA;YACVtB,MAAMA;YACNE,UAAUA;YACVC,YAAYA;YACZC,UAAUA;YACVO,WAAWA;YACXU,WAAWA;YACXhB,OAAOA;YACPY,OAAOA;YACPV,OAAOA;;IAGb;IAEA,OAAO;AACT,EAAC"}

package/dist/fields/Upload/index.scss

@@ -0,0 +1,68 @@
+@import '../../scss/styles.scss';
+
+.upload {
+  position: relative;
+  max-width: 100%;
+
+  &__wrap {
+    background: var(--theme-elevation-50);
+    padding: base(1);
+  }
+
+  &__buttons {
+    margin: base(-0.25);
+    width: calc(100% + #{base(0.5)});
+    flex-wrap: wrap;
+    display: flex;
+    align-items: center;
+    gap: base(0.25);
+
+    .btn {
+      margin: 0;
+    }
+  }
+
+  &__toggler {
+    min-width: base(7);
+  }
+
+  @include mid-break {
+    &__wrap {
+      padding: base(0.75);
+    }
+
+    &__toggler {
+      width: calc(100% - #{base(0.5)});
+    }
+  }
+}
+
+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/types.d.ts

@@ -0,0 +1,11 @@
+import type { UploadField } from 'payload/types';
+import type { FormFieldBase } from '../shared/index.js';
+export type UploadFieldProps = FormFieldBase & {
+    filterOptions?: UploadField['filterOptions'];
+    label?: UploadField['label'];
+    name?: string;
+    path?: string;
+    relationTo?: UploadField['relationTo'];
+    width?: string;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/fields/Upload/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAEvD,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG;IAC7C,aAAa,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAA;IAC5C,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,CAAA;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/Upload/types.ts"],"sourcesContent":["import type { UploadField } from 'payload/types'\n\nimport type { FormFieldBase } from '../shared/index.js'\n\nexport type UploadFieldProps = FormFieldBase & {\n  filterOptions?: UploadField['filterOptions']\n  label?: UploadField['label']\n  name?: string\n  path?: string\n  relationTo?: UploadField['relationTo']\n  width?: string\n}\n"],"names":[],"mappings":"AAIA,WAOC"}

package/dist/fields/index.d.ts

@@ -0,0 +1,4 @@
+import type { FieldTypes } from 'payload/config';
+export * from './shared/index.js';
+export declare const fieldComponents: FieldTypes;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/fields/index.js

@@ -0,0 +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';
+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
+};
+
+//# sourceMappingURL=index.js.map

package/dist/fields/index.js.map

@@ -0,0 +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"],"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"}

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

@@ -0,0 +1,40 @@
+/// <reference types="react" resolution-mode="require"/>
+import type { User } from 'payload/auth';
+import type { Locale, SanitizedLocalizationConfig } from 'payload/config';
+import type { DocumentPreferences, ErrorProps, LabelProps, Validate } from 'payload/types';
+import type { FieldDescriptionProps } from '../../forms/FieldDescription/types.js';
+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;
+    descriptionProps?: FieldDescriptionProps;
+    disabled?: boolean;
+    docPreferences?: DocumentPreferences;
+    errorProps?: ErrorProps;
+    labelProps?: LabelProps;
+    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.
+
+ * @returns Whether the field should be displayed as RTL.
+ */
+export declare function isFieldRTL({ fieldLocalized, fieldRTL, locale, localizationConfig, }: {
+    fieldLocalized: boolean;
+    fieldRTL: boolean;
+    locale: Locale;
+    localizationConfig?: SanitizedLocalizationConfig;
+}): boolean;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,EAAE,mBAAmB,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAE1F,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAA;AAElF,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,gBAAgB,CAAC,EAAE,qBAAqB,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,mBAAmB,CAAA;IACpC,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,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"}

package/dist/fields/shared/index.js

@@ -0,0 +1,15 @@
+export const fieldBaseClass = 'field-type';
+/**
+ * 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.
+
+ * @returns Whether the field should be displayed as RTL.
+ */ export function isFieldRTL({ fieldLocalized, fieldRTL, locale, localizationConfig }) {
+    const hasMultipleLocales = locale && localizationConfig && localizationConfig.locales && localizationConfig.locales.length > 1;
+    const isCurrentLocaleDefaultLocale = locale?.code === localizationConfig?.defaultLocale;
+    return fieldRTL !== false && locale?.rtl === true && (fieldLocalized || !fieldLocalized && !hasMultipleLocales || // If there is only one locale which is also rtl, that field is rtl too
+    !fieldLocalized && isCurrentLocaleDefaultLocale) || // If the current locale is the default locale, but the field is not localized, that field is rtl too
+    fieldRTL === true // 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.
+    ;
+}
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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 { DocumentPreferences, ErrorProps, LabelProps, Validate } from 'payload/types'\n\nimport type { FieldDescriptionProps } from '../../forms/FieldDescription/types.js'\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  descriptionProps?: FieldDescriptionProps\n  disabled?: boolean\n  docPreferences?: DocumentPreferences\n  errorProps?: ErrorProps\n  labelProps?: LabelProps\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"],"mappings":"AAMA,OAAO,MAAMA,iBAAiB,aAAY;AAyB1C;;;;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"}

package/dist/forms/FieldDescription/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { Props } from './types.js';
+import type { FieldDescriptionProps } from './types.js';
 import './index.scss';
-declare const FieldDescription: React.FC<Props>;
-export default FieldDescription;
+export { FieldDescriptionProps };
+export declare const FieldDescription: React.FC<FieldDescriptionProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/forms/FieldDescription/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/FieldDescription/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAGvC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsBrC,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/FieldDescription/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAA;AAIvD,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,qBAAqB,EAAE,CAAA;AA+BhC,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAQ5D,CAAA"}

package/dist/forms/FieldDescription/index.js

@@ -2,21 +2,30 @@
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { useFieldProps } from '../FieldPropsProvider/index.js';
 const baseClass = 'field-description';
-const FieldDescription = (props)=>{
+const DefaultFieldDescription = (props)=>{
     const { className, description, marginPlacement } = props;
+    const { path } = useFieldProps();
     const { i18n } = useTranslation();
     if (description) {
         return /*#__PURE__*/ React.createElement("div", {
             className: [
                 baseClass,
                 className,
+                `field-description-${path.replace(/\./g, '__')}`,
                 marginPlacement && `${baseClass}--margin-${marginPlacement}`
             ].filter(Boolean).join(' ')
         }, getTranslation(description, i18n));
     }
     return null;
 };
-export default FieldDescription;
+export const FieldDescription = (props)=>{
+    const { CustomDescription } = props;
+    if (CustomDescription !== undefined) {
+        return CustomDescription;
+    }
+    return /*#__PURE__*/ React.createElement(DefaultFieldDescription, props);
+};
 
 //# sourceMappingURL=index.js.map

package/dist/forms/FieldDescription/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/forms/FieldDescription/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { Props } from './types.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'field-description'\n\nconst FieldDescription: React.FC<Props> = (props) => {\n  const { className, description, marginPlacement } = props\n\n  const { i18n } = useTranslation()\n\n  if (description) {\n    return (\n      <div\n        className={[\n          baseClass,\n          className,\n          marginPlacement && `${baseClass}--margin-${marginPlacement}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {getTranslation(description, i18n)}\n      </div>\n    )\n  }\n\n  return null\n}\n\nexport default FieldDescription\n"],"names":["getTranslation","React","useTranslation","baseClass","FieldDescription","props","className","description","marginPlacement","i18n","div","filter","Boolean","join"],"mappings":"AAAA;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAIzB,SAASC,cAAc,QAAQ,uCAAsC;AAGrE,MAAMC,YAAY;AAElB,MAAMC,mBAAoC,CAACC;IACzC,MAAM,EAAEC,SAAS,EAAEC,WAAW,EAAEC,eAAe,EAAE,GAAGH;IAEpD,MAAM,EAAEI,IAAI,EAAE,GAAGP;IAEjB,IAAIK,aAAa;QACf,qBACE,oBAACG;YACCJ,WAAW;gBACTH;gBACAG;gBACAE,mBAAmB,CAAC,EAAEL,UAAU,SAAS,EAAEK,gBAAgB,CAAC;aAC7D,CACEG,MAAM,CAACC,SACPC,IAAI,CAAC;WAEPb,eAAeO,aAAaE;IAGnC;IAEA,OAAO;AACT;AAEA,eAAeL,iBAAgB"}
+{"version":3,"sources":["../../../src/forms/FieldDescription/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { FieldDescriptionProps } from './types.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { useFieldProps } from '../FieldPropsProvider/index.js'\nimport './index.scss'\n\nexport { FieldDescriptionProps }\n\nconst baseClass = 'field-description'\n\nconst DefaultFieldDescription: React.FC<FieldDescriptionProps> = (props) => {\n  const { className, description, marginPlacement } = props\n\n  const { path } = useFieldProps()\n\n  const { i18n } = useTranslation()\n\n  if (description) {\n    return (\n      <div\n        className={[\n          baseClass,\n          className,\n          `field-description-${path.replace(/\\./g, '__')}`,\n          marginPlacement && `${baseClass}--margin-${marginPlacement}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {getTranslation(description, i18n)}\n      </div>\n    )\n  }\n\n  return null\n}\n\nexport const FieldDescription: React.FC<FieldDescriptionProps> = (props) => {\n  const { CustomDescription } = props\n\n  if (CustomDescription !== undefined) {\n    return CustomDescription\n  }\n\n  return <DefaultFieldDescription {...props} />\n}\n"],"names":["getTranslation","React","useTranslation","useFieldProps","baseClass","DefaultFieldDescription","props","className","description","marginPlacement","path","i18n","div","replace","filter","Boolean","join","FieldDescription","CustomDescription","undefined"],"mappings":"AAAA;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAIzB,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,aAAa,QAAQ,iCAAgC;AAK9D,MAAMC,YAAY;AAElB,MAAMC,0BAA2D,CAACC;IAChE,MAAM,EAAEC,SAAS,EAAEC,WAAW,EAAEC,eAAe,EAAE,GAAGH;IAEpD,MAAM,EAAEI,IAAI,EAAE,GAAGP;IAEjB,MAAM,EAAEQ,IAAI,EAAE,GAAGT;IAEjB,IAAIM,aAAa;QACf,qBACE,oBAACI;YACCL,WAAW;gBACTH;gBACAG;gBACA,CAAC,kBAAkB,EAAEG,KAAKG,OAAO,CAAC,OAAO,MAAM,CAAC;gBAChDJ,mBAAmB,CAAC,EAAEL,UAAU,SAAS,EAAEK,gBAAgB,CAAC;aAC7D,CACEK,MAAM,CAACC,SACPC,IAAI,CAAC;WAEPhB,eAAeQ,aAAaG;IAGnC;IAEA,OAAO;AACT;AAEA,OAAO,MAAMM,mBAAoD,CAACX;IAChE,MAAM,EAAEY,iBAAiB,EAAE,GAAGZ;IAE9B,IAAIY,sBAAsBC,WAAW;QACnC,OAAOD;IACT;IAEA,qBAAO,oBAACb,yBAA4BC;AACtC,EAAC"}

package/dist/forms/FieldDescription/types.d.ts

@@ -1,6 +1,8 @@
-export type Props = {
+/// <reference types="react" resolution-mode="require"/>
+export type FieldDescriptionProps = {
+    CustomDescription?: React.ReactNode;
     className?: string;
-    description?: string;
+    description?: Record<string, string> | string;
     marginPlacement?: 'bottom' | 'top';
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/forms/FieldDescription/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/forms/FieldDescription/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACnC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/forms/FieldDescription/types.ts"],"names":[],"mappings":";AAAA,MAAM,MAAM,qBAAqB,GAAG;IAClC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC7C,eAAe,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACnC,CAAA"}

package/dist/forms/FieldDescription/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/forms/FieldDescription/types.ts"],"sourcesContent":["export type Props = {\n  className?: string\n  description?: string\n  marginPlacement?: 'bottom' | 'top'\n}\n"],"names":[],"mappings":"AAAA,WAIC"}
+{"version":3,"sources":["../../../src/forms/FieldDescription/types.ts"],"sourcesContent":["export type FieldDescriptionProps = {\n  CustomDescription?: React.ReactNode\n  className?: string\n  description?: Record<string, string> | string\n  marginPlacement?: 'bottom' | 'top'\n}\n"],"names":[],"mappings":"AAAA,WAKC"}

package/dist/forms/FieldError/index.d.ts

@@ -0,0 +1,5 @@
+import type { ErrorProps } from 'payload/types';
+import React from 'react';
+import './index.scss';
+export declare const FieldError: React.FC<ErrorProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/forms/FieldError/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/FieldError/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAkCrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAQ3C,CAAA"}

package/dist/forms/FieldError/index.js

@@ -0,0 +1,33 @@
+'use client';
+import React from 'react';
+import { Tooltip } from '../../elements/Tooltip/index.js';
+import { useFieldProps } from '../FieldPropsProvider/index.js';
+import { useFormFields, useFormSubmitted } from '../Form/context.js';
+const baseClass = 'field-error';
+const DefaultFieldError = (props)=>{
+    const { alignCaret = 'right', message: messageFromProps, path: pathFromProps, showError: showErrorFromProps } = props;
+    const { path: pathFromContext } = useFieldProps();
+    const path = pathFromContext || pathFromProps;
+    const hasSubmitted = useFormSubmitted();
+    const field = useFormFields(([fields])=>fields && fields?.[path] || null);
+    const { errorMessage, valid } = field || {};
+    const message = messageFromProps || errorMessage;
+    const showMessage = showErrorFromProps || hasSubmitted && !valid;
+    if (showMessage) {
+        return /*#__PURE__*/ React.createElement(Tooltip, {
+            alignCaret: alignCaret,
+            className: baseClass,
+            delay: 0
+        }, message);
+    }
+    return null;
+};
+export const FieldError = (props)=>{
+    const { CustomError } = props;
+    if (CustomError !== undefined) {
+        return CustomError;
+    }
+    return /*#__PURE__*/ React.createElement(DefaultFieldError, props);
+};
+
+//# sourceMappingURL=index.js.map

package/dist/forms/FieldError/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/forms/FieldError/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ErrorProps } from 'payload/types'\n\nimport React from 'react'\n\nimport { Tooltip } from '../../elements/Tooltip/index.js'\nimport { useFieldProps } from '../FieldPropsProvider/index.js'\nimport { useFormFields, useFormSubmitted } from '../Form/context.js'\nimport './index.scss'\n\nconst baseClass = 'field-error'\n\nconst DefaultFieldError: React.FC<ErrorProps> = (props) => {\n  const {\n    alignCaret = 'right',\n    message: messageFromProps,\n    path: pathFromProps,\n    showError: showErrorFromProps,\n  } = props\n\n  const { path: pathFromContext } = useFieldProps()\n  const path = pathFromContext || pathFromProps\n\n  const hasSubmitted = useFormSubmitted()\n  const field = useFormFields(([fields]) => (fields && fields?.[path]) || null)\n\n  const { errorMessage, valid } = field || {}\n\n  const message = messageFromProps || errorMessage\n  const showMessage = showErrorFromProps || (hasSubmitted && !valid)\n\n  if (showMessage) {\n    return (\n      <Tooltip alignCaret={alignCaret} className={baseClass} delay={0}>\n        {message}\n      </Tooltip>\n    )\n  }\n\n  return null\n}\n\nexport const FieldError: React.FC<ErrorProps> = (props) => {\n  const { CustomError } = props\n\n  if (CustomError !== undefined) {\n    return CustomError\n  }\n\n  return <DefaultFieldError {...props} />\n}\n"],"names":["React","Tooltip","useFieldProps","useFormFields","useFormSubmitted","baseClass","DefaultFieldError","props","alignCaret","message","messageFromProps","path","pathFromProps","showError","showErrorFromProps","pathFromContext","hasSubmitted","field","fields","errorMessage","valid","showMessage","className","delay","FieldError","CustomError","undefined"],"mappings":"AAAA;AAIA,OAAOA,WAAW,QAAO;AAEzB,SAASC,OAAO,QAAQ,kCAAiC;AACzD,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,aAAa,EAAEC,gBAAgB,QAAQ,qBAAoB;AAGpE,MAAMC,YAAY;AAElB,MAAMC,oBAA0C,CAACC;IAC/C,MAAM,EACJC,aAAa,OAAO,EACpBC,SAASC,gBAAgB,EACzBC,MAAMC,aAAa,EACnBC,WAAWC,kBAAkB,EAC9B,GAAGP;IAEJ,MAAM,EAAEI,MAAMI,eAAe,EAAE,GAAGb;IAClC,MAAMS,OAAOI,mBAAmBH;IAEhC,MAAMI,eAAeZ;IACrB,MAAMa,QAAQd,cAAc,CAAC,CAACe,OAAO,GAAK,AAACA,UAAUA,QAAQ,CAACP,KAAK,IAAK;IAExE,MAAM,EAAEQ,YAAY,EAAEC,KAAK,EAAE,GAAGH,SAAS,CAAC;IAE1C,MAAMR,UAAUC,oBAAoBS;IACpC,MAAME,cAAcP,sBAAuBE,gBAAgB,CAACI;IAE5D,IAAIC,aAAa;QACf,qBACE,oBAACpB;YAAQO,YAAYA;YAAYc,WAAWjB;YAAWkB,OAAO;WAC3Dd;IAGP;IAEA,OAAO;AACT;AAEA,OAAO,MAAMe,aAAmC,CAACjB;IAC/C,MAAM,EAAEkB,WAAW,EAAE,GAAGlB;IAExB,IAAIkB,gBAAgBC,WAAW;QAC7B,OAAOD;IACT;IAEA,qBAAO,oBAACnB,mBAAsBC;AAChC,EAAC"}

package/dist/forms/FieldLabel/index.d.ts

@@ -0,0 +1,5 @@
+import type { LabelProps } from 'payload/types';
+import React from 'react';
+import './index.scss';
+export declare const FieldLabel: React.FC<LabelProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/forms/FieldLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/FieldLabel/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG/C,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAuBrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAQ3C,CAAA"}