@payloadcms/ui 3.0.0-canary.d6053cd → 3.0.0-canary.dc8b1fe

package/dist/fields/Upload/index.js

@@ -1,67 +1,164 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useCallback } from 'react';
-import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
+import React from 'react';
 import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/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 collection = collections.find((coll)=>coll.slug === relationTo);
-    const memoizedValidate = useCallback((value, options)=>{
-        if (typeof validate === 'function') {
-            return validate(value, {
-                ...options,
-                required
-            });
-        }
-    }, [
-        validate,
-        required
-    ]);
-    const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps();
-    const { filterOptions, formInitializing, formProcessing, path, 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);
-    }, [
-        setValue
-    ]);
-    if (collection.upload) {
-        return /*#__PURE__*/ _jsx(UploadInput, {
-            CustomDescription: CustomDescription,
-            CustomError: CustomError,
-            CustomLabel: CustomLabel,
-            api: api,
-            className: className,
-            collection: collection,
-            descriptionProps: descriptionProps,
-            errorProps: errorProps,
-            filterOptions: filterOptions,
-            label: label,
-            labelProps: labelProps,
-            onChange: onChange,
-            path: path,
-            readOnly: disabled,
-            relationTo: relationTo,
-            required: required,
-            serverURL: serverURL,
-            showError: showError,
-            style: style,
-            value: value,
-            width: width
+import { UploadInput } from './Input.js';
+export { UploadInput } from './Input.js';
+export const baseClass = 'upload';
+export function UploadComponent(props) {
+  const $ = _c(36);
+  const {
+    field: t0,
+    path: pathFromProps,
+    readOnly,
+    validate
+  } = props;
+  const {
+    name,
+    admin: t1,
+    hasMany,
+    label,
+    localized,
+    maxRows,
+    relationTo,
+    required
+  } = t0;
+  let t2;
+  if ($[0] !== t1) {
+    t2 = t1 === undefined ? {} : t1;
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const {
+    allowCreate,
+    className,
+    description,
+    isSortable,
+    style,
+    width
+  } = t2;
+  const path = pathFromProps ?? name;
+  const {
+    config
+  } = useConfig();
+  let t3;
+  if ($[2] !== validate || $[3] !== required) {
+    t3 = (value, options) => {
+      if (typeof validate === "function") {
+        return validate(value, {
+          ...options,
+          required
         });
-    }
-    return null;
-};
-export const UploadField = withCondition(_Upload);
-
+      }
+    };
+    $[2] = validate;
+    $[3] = required;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const memoizedValidate = t3;
+  let t4;
+  if ($[5] !== path || $[6] !== memoizedValidate) {
+    t4 = {
+      path,
+      validate: memoizedValidate
+    };
+    $[5] = path;
+    $[6] = memoizedValidate;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  const {
+    customComponents: t5,
+    filterOptions,
+    setValue,
+    showError,
+    value: value_0
+  } = useField(t4);
+  let t6;
+  if ($[8] !== t5) {
+    t6 = t5 === undefined ? {} : t5;
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  const {
+    AfterInput,
+    BeforeInput,
+    Description,
+    Error,
+    Label
+  } = t6;
+  const t7 = allowCreate !== false;
+  let t8;
+  if ($[10] !== AfterInput || $[11] !== t7 || $[12] !== config.routes.api || $[13] !== config.serverURL || $[14] !== BeforeInput || $[15] !== className || $[16] !== Description || $[17] !== description || $[18] !== Error || $[19] !== filterOptions || $[20] !== hasMany || $[21] !== isSortable || $[22] !== label || $[23] !== Label || $[24] !== localized || $[25] !== maxRows || $[26] !== setValue || $[27] !== path || $[28] !== readOnly || $[29] !== relationTo || $[30] !== required || $[31] !== showError || $[32] !== style || $[33] !== value_0 || $[34] !== width) {
+    t8 = _jsx(UploadInput, {
+      AfterInput,
+      allowCreate: t7,
+      api: config.routes.api,
+      BeforeInput,
+      className,
+      Description,
+      description,
+      Error,
+      filterOptions,
+      hasMany,
+      isSortable,
+      label,
+      Label,
+      localized,
+      maxRows,
+      onChange: setValue,
+      path,
+      readOnly,
+      relationTo,
+      required,
+      serverURL: config.serverURL,
+      showError,
+      style,
+      value: value_0,
+      width
+    });
+    $[10] = AfterInput;
+    $[11] = t7;
+    $[12] = config.routes.api;
+    $[13] = config.serverURL;
+    $[14] = BeforeInput;
+    $[15] = className;
+    $[16] = Description;
+    $[17] = description;
+    $[18] = Error;
+    $[19] = filterOptions;
+    $[20] = hasMany;
+    $[21] = isSortable;
+    $[22] = label;
+    $[23] = Label;
+    $[24] = localized;
+    $[25] = maxRows;
+    $[26] = setValue;
+    $[27] = path;
+    $[28] = readOnly;
+    $[29] = relationTo;
+    $[30] = required;
+    $[31] = showError;
+    $[32] = style;
+    $[33] = value_0;
+    $[34] = width;
+    $[35] = t8;
+  } else {
+    t8 = $[35];
+  }
+  return t8;
+}
+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'\n\nimport React, { useCallback } from 'react'\n\nimport type { UploadInputProps } from './Input.js'\nimport type { UploadFieldProps } from './types.js'\n\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/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\n  const { filterOptions, formInitializing, formProcessing, path, 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        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={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(_Upload)\n"],"names":["React","useCallback","useFieldProps","useField","withCondition","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","formInitializing","formProcessing","setValue","showError","disabled","onChange","incomingValue","incomingID","id","upload","UploadField"],"mappings":"AAAA;;AAEA,OAAOA,SAASC,WAAW,QAAQ,QAAO;AAK1C,SAASC,aAAa,QAAQ,0CAAyC;AACvE,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,aAAa,QAAQ,qCAAoC;AAClE,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,WAAW,QAAQ,aAAY;AACxC,OAAO,eAAc;AAErB,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,mBAAmBjC,YACvB,CAACkC,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,GAAGpC;IAEjE,MAAM,EAAEqC,aAAa,EAAEC,gBAAgB,EAAEC,cAAc,EAAExB,IAAI,EAAEyB,QAAQ,EAAEC,SAAS,EAAER,KAAK,EAAE,GACzFhC,SAAiB;QACfc,MAAMoB,mBAAmBnB;QACzBM,UAAUU;IACZ;IAEF,MAAMU,WAAWxB,qBAAqBkB,uBAAuBG,kBAAkBD;IAE/E,MAAMK,WAAW5C,YACf,CAAC6C;QACC,MAAMC,aAAaD,eAAeE,MAAMF;QACxCJ,SAASK;IACX,GACA;QAACL;KAAS;IAGZ,IAAIZ,WAAWmB,MAAM,EAAE;QACrB,qBACE,KAAC3C;YACCG,mBAAmBA;YACnBC,aAAaA;YACbC,aAAaA;YACbiB,KAAKA;YACLhB,WAAWA;YACXkB,YAAYA;YACZjB,kBAAkBA;YAClBC,YAAYA;YACZyB,eAAeA;YACfxB,OAAOA;YACPC,YAAYA;YACZ6B,UAAUA;YACV5B,MAAMA;YACNE,UAAUyB;YACVvB,YAAYA;YACZC,UAAUA;YACVO,WAAWA;YACXc,WAAWA;YACXpB,OAAOA;YACPY,OAAOA;YACPV,OAAOA;;IAGb;IAEA,OAAO;AACT;AAEA,OAAO,MAAMyB,cAAc9C,cAAcG,SAAQ"}
+{"version":3,"file":"index.js","names":["c","_c","React","useField","withCondition","useConfig","UploadInput","baseClass","UploadComponent","props","$","field","t0","path","pathFromProps","readOnly","validate","name","admin","t1","hasMany","label","localized","maxRows","relationTo","required","t2","undefined","allowCreate","className","description","isSortable","style","width","config","t3","value","options","memoizedValidate","t4","customComponents","t5","filterOptions","setValue","showError","value_0","t6","AfterInput","BeforeInput","Description","Error","Label","t7","t8","routes","api","serverURL","_jsx","onChange","UploadField"],"sources":["../../../src/fields/Upload/index.tsx"],"sourcesContent":["'use client'\n\nimport type { UploadFieldClientProps } from 'payload'\n\nimport React from 'react'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport './index.scss'\nimport { UploadInput } from './Input.js'\n\nexport { UploadInput } from './Input.js'\nexport type { UploadInputProps } from './Input.js'\n\nexport const baseClass = 'upload'\n\nexport function UploadComponent(props: UploadFieldClientProps) {\n  const {\n    field: {\n      name,\n      admin: { allowCreate, className, description, isSortable, style, width } = {},\n      hasMany,\n      label,\n      localized,\n      maxRows,\n      relationTo,\n      required,\n    },\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n  const path = pathFromProps ?? name\n\n  const { config } = useConfig()\n\n  const memoizedValidate = React.useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    filterOptions,\n    setValue,\n    showError,\n    value,\n  } = useField<string | string[]>({\n    path,\n    validate: memoizedValidate,\n  })\n\n  return (\n    <UploadInput\n      AfterInput={AfterInput}\n      allowCreate={allowCreate !== false}\n      api={config.routes.api}\n      BeforeInput={BeforeInput}\n      className={className}\n      Description={Description}\n      description={description}\n      Error={Error}\n      filterOptions={filterOptions}\n      hasMany={hasMany}\n      isSortable={isSortable}\n      label={label}\n      Label={Label}\n      localized={localized}\n      maxRows={maxRows}\n      onChange={setValue}\n      path={path}\n      readOnly={readOnly}\n      relationTo={relationTo}\n      required={required}\n      serverURL={config.serverURL}\n      showError={showError}\n      style={style}\n      value={value}\n      width={width}\n    />\n  )\n}\n\nexport const UploadField = withCondition(UploadComponent)\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Upload/index.scss

@@ -1,67 +1,63 @@
 @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);
+@layer payload-default {
+  .upload {
+    &__dropzoneAndUpload {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 4);
+    }
 
-    .btn {
-      margin: 0;
+    &__dropzoneContent {
+      display: flex;
+      flex-wrap: wrap;
+      gap: base(0.4);
+      justify-content: space-between;
+      width: 100%;
     }
-  }
 
-  &__toggler {
-    min-width: base(7);
-  }
+    &__dropzoneContent__buttons {
+      display: flex;
+      gap: calc(var(--base) / 2);
+      position: relative;
+      left: -2px;
+
+      .btn .btn__content {
+        gap: calc(var(--base) / 5);
+      }
 
-  @include mid-break {
-    &__wrap {
-      padding: base(0.75);
+      .btn__label {
+        font-weight: 100;
+      }
     }
 
-    &__toggler {
-      width: calc(100% - #{base(0.5)});
+    &__dropzoneContent__orText {
+      color: var(--theme-elevation-500);
+      text-transform: lowercase;
     }
-  }
-}
 
-html[data-theme='light'] {
-  .upload {
-    &.error {
-      .upload__wrap {
-        @include lightInputError;
-      }
+    &__dragAndDropText {
+      flex-shrink: 0;
+      margin: 0;
+      text-transform: lowercase;
+      align-self: center;
+      color: var(--theme-elevation-500);
+    }
 
-      .btn--style-secondary {
-        background-color: var(--theme-error-100);
-        box-shadow: inset 0 0 0 1px var(--theme-error-500);
-      }
+    &__loadingRows {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 4);
     }
-  }
-}
 
-html[data-theme='dark'] {
-  .upload {
-    &.error {
-      .upload__wrap {
-        @include darkInputError;
-      }
+    .shimmer-effect {
+      border-radius: var(--style-radius-s);
+      border: 1px solid var(--theme-border-color);
+    }
 
-      .btn--style-secondary {
-        background-color: var(--theme-error-150);
-        box-shadow: inset 0 0 0 1px var(--theme-error-500);
+    @include small-break {
+      &__dragAndDropText {
+        display: none;
       }
     }
   }

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

@@ -1,10 +1,4 @@
-import type { UploadField } from 'payload';
-import type { FormFieldBase } from '../shared/index.js';
-export type UploadFieldProps = {
-    filterOptions?: UploadField['filterOptions'];
-    name?: string;
-    path?: string;
-    relationTo?: UploadField['relationTo'];
-    width?: string;
-} & FormFieldBase;
+import type { PaginatedDocs } from 'payload';
+export type PopulateDocs = (ids: (number | string)[], relatedCollectionSlug: string) => Promise<null | PaginatedDocs>;
+export type ReloadDoc = (docID: number | string, collectionSlug: string) => Promise<void>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/fields/Upload/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAEvD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,aAAa,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAA;IAC5C,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,GAAG,aAAa,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/fields/Upload/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,MAAM,MAAM,YAAY,GAAG,CACzB,GAAG,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EACxB,qBAAqB,EAAE,MAAM,KAC1B,OAAO,CAAC,IAAI,GAAG,aAAa,CAAC,CAAA;AAElC,MAAM,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,cAAc,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA"}

package/dist/fields/Upload/types.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Upload/types.ts"],"sourcesContent":["import type { UploadField } from 'payload'\n\nimport type { FormFieldBase } from '../shared/index.js'\n\nexport type UploadFieldProps = {\n  filterOptions?: UploadField['filterOptions']\n  name?: string\n  path?: string\n  relationTo?: UploadField['relationTo']\n  width?: string\n} & FormFieldBase\n"],"names":[],"mappings":"AAIA,WAMiB"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/fields/Upload/types.ts"],"sourcesContent":["import type { PaginatedDocs } from 'payload'\n\nexport type PopulateDocs = (\n  ids: (number | string)[],\n  relatedCollectionSlug: string,\n) => Promise<null | PaginatedDocs>\n\nexport type ReloadDoc = (docID: number | string, collectionSlug: string) => Promise<void>\n"],"mappings":"AAOA","ignoreList":[]}

package/dist/fields/index.d.ts

@@ -1,4 +1,15 @@
-import type { FieldTypes } from 'payload';
+import type { ClientFieldBase, FieldTypes, GenericDescriptionProps, GenericErrorProps, GenericLabelProps } 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<ClientFieldBase>;
+};
+export declare const fieldComponents: FieldTypesComponents;
+export type FieldComponentsWithSlots = {
+    Description: React.FC<GenericDescriptionProps>;
+    Error: React.FC<GenericErrorProps>;
+    Label: React.FC<GenericLabelProps>;
+    RowLabel: React.FC;
+} & FieldTypesComponents;
+export declare const allFieldComponents: FieldComponentsWithSlots;
 //# 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,SAAS,CAAA;AA2BzC,cAAc,mBAAmB,CAAA;AAEjC,eAAO,MAAM,eAAe,EAAE,UAyB7B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/fields/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,eAAe,EACf,UAAU,EACV,uBAAuB,EACvB,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgC9B,cAAc,mBAAmB,CAAA;AAEjC,MAAM,MAAM,oBAAoB,GAAG;KAChC,CAAC,IAAI,iBAAiB,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC;CACzF,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,oBA0B7B,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAA;IAC9C,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAA;IAClC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAA;IAClC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAA;CACnB,GAAG,oBAAoB,CAAA;AAExB,eAAO,MAAM,kBAAkB,EAAE,wBAMhC,CAAA"}

package/dist/fields/index.js

@@ -1,3 +1,6 @@
+'use client';
+
+import { RowLabel } from '../forms/RowLabel/index.js';
 import { ArrayField } from './Array/index.js';
 import { BlocksField } from './Blocks/index.js';
 import { CheckboxField } from './Checkbox/index.js';
@@ -6,8 +9,12 @@ 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 { FieldDescription } from './FieldDescription/index.js';
+import { FieldError } from './FieldError/index.js';
+import { FieldLabel } from './FieldLabel/index.js';
 import { GroupField } from './Group/index.js';
 import { HiddenField } from './Hidden/index.js';
+import { JoinField } from './Join/index.js';
 import { JSONField } from './JSON/index.js';
 import { NumberField } from './Number/index.js';
 import { PasswordField } from './Password/index.js';
@@ -24,30 +31,37 @@ import { UIField } from './UI/index.js';
 import { UploadField } from './Upload/index.js';
 export * from './shared/index.js';
 export const fieldComponents = {
-    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
+  array: ArrayField,
+  blocks: BlocksField,
+  checkbox: CheckboxField,
+  code: CodeField,
+  collapsible: CollapsibleField,
+  confirmPassword: ConfirmPasswordField,
+  date: DateTimeField,
+  email: EmailField,
+  group: GroupField,
+  hidden: HiddenField,
+  join: JoinField,
+  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
+};
+export const allFieldComponents = {
+  ...fieldComponents,
+  Description: FieldDescription,
+  Error: FieldError,
+  Label: FieldLabel,
+  RowLabel
 };
-
 //# 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'\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 const fieldComponents: FieldTypes = {\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":"AAEA,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;AAEjC,OAAO,MAAMC,kBAA8B;IACzCC,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"}
+{"version":3,"file":"index.js","names":["RowLabel","ArrayField","BlocksField","CheckboxField","CodeField","CollapsibleField","ConfirmPasswordField","DateTimeField","EmailField","FieldDescription","FieldError","FieldLabel","GroupField","HiddenField","JoinField","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","join","json","number","password","point","radio","relationship","richText","row","select","tabs","text","textarea","ui","upload","allFieldComponents","Description","Error","Label"],"sources":["../../src/fields/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  ClientFieldBase,\n  FieldTypes,\n  GenericDescriptionProps,\n  GenericErrorProps,\n  GenericLabelProps,\n} from 'payload'\nimport type React from 'react'\n\nimport { RowLabel } from '../forms/RowLabel/index.js'\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 { FieldDescription } from './FieldDescription/index.js'\nimport { FieldError } from './FieldError/index.js'\nimport { FieldLabel } from './FieldLabel/index.js'\nimport { GroupField } from './Group/index.js'\nimport { HiddenField } from './Hidden/index.js'\nimport { JoinField } from './Join/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<ClientFieldBase>\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  join: JoinField,\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\nexport type FieldComponentsWithSlots = {\n  Description: React.FC<GenericDescriptionProps>\n  Error: React.FC<GenericErrorProps>\n  Label: React.FC<GenericLabelProps>\n  RowLabel: React.FC\n} & FieldTypesComponents\n\nexport const allFieldComponents: FieldComponentsWithSlots = {\n  ...fieldComponents,\n  Description: FieldDescription,\n  Error: FieldError,\n  Label: FieldLabel,\n  RowLabel,\n}\n"],"mappings":"AAAA;;AAUA,SAASA,QAAQ,QAAQ;AACzB,SAASC,UAAU,QAAQ;AAC3B,SAASC,WAAW,QAAQ;AAC5B,SAASC,aAAa,QAAQ;AAC9B,SAASC,SAAS,QAAQ;AAC1B,SAASC,gBAAgB,QAAQ;AACjC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,aAAa,QAAQ;AAC9B,SAASC,UAAU,QAAQ;AAC3B,SAASC,gBAAgB,QAAQ;AACjC,SAASC,UAAU,QAAQ;AAC3B,SAASC,UAAU,QAAQ;AAC3B,SAASC,UAAU,QAAQ;AAC3B,SAASC,WAAW,QAAQ;AAC5B,SAASC,SAAS,QAAQ;AAC1B,SAASC,SAAS,QAAQ;AAC1B,SAASC,WAAW,QAAQ;AAC5B,SAASC,aAAa,QAAQ;AAC9B,SAASC,UAAU,QAAQ;AAC3B,SAASC,eAAe,QAAQ;AAChC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,aAAa,QAAQ;AAC9B,SAASC,QAAQ,QAAQ;AACzB,SAASC,WAAW,QAAQ;AAC5B,SAASC,SAAS,QAAQ;AAC1B,SAASC,SAAS,QAAQ;AAC1B,SAASC,aAAa,QAAQ;AAC9B,SAASC,OAAO,QAAQ;AACxB,SAASC,WAAW,QAAQ;AAE5B,cAAc;AAMd,OAAO,MAAMC,eAAA,GAAwC;EACnDC,KAAA,EAAO7B,UAAA;EACP8B,MAAA,EAAQ7B,WAAA;EACR8B,QAAA,EAAU7B,aAAA;EACV8B,IAAA,EAAM7B,SAAA;EACN8B,WAAA,EAAa7B,gBAAA;EACb8B,eAAA,EAAiB7B,oBAAA;EACjB8B,IAAA,EAAM7B,aAAA;EACN8B,KAAA,EAAO7B,UAAA;EACP8B,KAAA,EAAO1B,UAAA;EACP2B,MAAA,EAAQ1B,WAAA;EACR2B,IAAA,EAAM1B,SAAA;EACN2B,IAAA,EAAM1B,SAAA;EACN2B,MAAA,EAAQ1B,WAAA;EACR2B,QAAA,EAAU1B,aAAA;EACV2B,KAAA,EAAO1B,UAAA;EACP2B,KAAA,EAAO1B,eAAA;EACP2B,YAAA,EAAc1B,iBAAA;EACd2B,QAAA,EAAU1B,aAAA;EACV2B,GAAA,EAAK1B,QAAA;EACL2B,MAAA,EAAQ1B,WAAA;EACR2B,IAAA,EAAM1B,SAAA;EACN2B,IAAA,EAAM1B,SAAA;EACN2B,QAAA,EAAU1B,aAAA;EACV2B,EAAA,EAAI1B,OAAA;EACJ2B,MAAA,EAAQ1B;AACV;AASA,OAAO,MAAM2B,kBAAA,GAA+C;EAC1D,GAAG1B,eAAe;EAClB2B,WAAA,EAAa/C,gBAAA;EACbgD,KAAA,EAAO/C,UAAA;EACPgD,KAAA,EAAO/C,UAAA;EACPX;AACF","ignoreList":[]}

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

@@ -1,29 +1,5 @@
-import type { DocumentPreferences, ErrorProps, FieldDescriptionProps, LabelProps, Locale, SanitizedLabelProps, SanitizedLocalizationConfig, User, Validate } from 'payload';
+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,EACV,mBAAmB,EACnB,UAAU,EACV,qBAAqB,EACrB,UAAU,EACV,MAAM,EACN,mBAAmB,EACnB,2BAA2B,EAC3B,IAAI,EACJ,QAAQ,EACT,MAAM,SAAS,CAAA;AAEhB,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":"AACA,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

@@ -1,15 +1,24 @@
+'use client';
+
 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.
-    ;
+ */
+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