@payloadcms/ui 3.0.0-beta.133 → 3.0.0-beta.135

package/dist/fields/RadioGroup/index.js

@@ -1,9 +1,8 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { optionIsObject } from 'payload/shared';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
 import { FieldDescription } from '../../fields/FieldDescription/index.js';
 import { FieldError } from '../../fields/FieldError/index.js';
@@ -11,236 +10,121 @@ import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { useForm } from '../../forms/Form/context.js';
 import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/index.js';
-import { fieldBaseClass } from '../shared/index.js';
+import { mergeFieldStyles } from '../mergeFieldStyles.js';
 import './index.scss';
+import { fieldBaseClass } from '../shared/index.js';
 import { Radio } from './Radio/index.js';
 const baseClass = 'radio-group';
 const RadioGroupFieldComponent = props => {
-  const $ = _c(48);
   const {
     disableModifyingForm: disableModifyingFormFromProps,
-    field: t0,
+    field,
+    field: {
+      admin: {
+        className,
+        description,
+        layout = 'horizontal'
+      } = {},
+      label,
+      localized,
+      options = [],
+      required
+    } = {},
     onChange: onChangeFromProps,
     path,
     readOnly,
     validate,
     value: valueFromProps
   } = props;
-  let t1;
-  if ($[0] !== t0) {
-    t1 = t0 === undefined ? {} : t0;
-    $[0] = t0;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  const {
-    admin: t2,
-    label,
-    localized,
-    options: t3,
-    required
-  } = t1;
-  let t4;
-  if ($[2] !== t2) {
-    t4 = t2 === undefined ? {} : t2;
-    $[2] = t2;
-    $[3] = t4;
-  } else {
-    t4 = $[3];
-  }
-  const {
-    className,
-    description,
-    layout: t5,
-    style,
-    width
-  } = t4;
-  const layout = t5 === undefined ? "horizontal" : t5;
-  let t6;
-  if ($[4] !== t3) {
-    t6 = t3 === undefined ? [] : t3;
-    $[4] = t3;
-    $[5] = t6;
-  } else {
-    t6 = $[5];
-  }
-  const options = t6;
   const {
     uuid
   } = useForm();
-  let t7;
-  if ($[6] !== validate || $[7] !== options || $[8] !== required) {
-    t7 = (value, validationOptions) => {
-      if (typeof validate === "function") {
-        return validate(value, {
-          ...validationOptions,
-          options,
-          required
-        });
-      }
-    };
-    $[6] = validate;
-    $[7] = options;
-    $[8] = required;
-    $[9] = t7;
-  } else {
-    t7 = $[9];
-  }
-  const memoizedValidate = t7;
-  let t8;
-  if ($[10] !== path || $[11] !== memoizedValidate) {
-    t8 = {
-      path,
-      validate: memoizedValidate
-    };
-    $[10] = path;
-    $[11] = memoizedValidate;
-    $[12] = t8;
-  } else {
-    t8 = $[12];
-  }
+  const memoizedValidate = useCallback((value, validationOptions) => {
+    if (typeof validate === 'function') {
+      return validate(value, {
+        ...validationOptions,
+        options,
+        required
+      });
+    }
+  }, [validate, options, required]);
   const {
-    customComponents: t9,
+    customComponents: {
+      Description,
+      Error,
+      Label
+    } = {},
     setValue,
     showError,
     value: valueFromContext
-  } = useField(t8);
-  let t10;
-  if ($[13] !== t9) {
-    t10 = t9 === undefined ? {} : t9;
-    $[13] = t9;
-    $[14] = t10;
-  } else {
-    t10 = $[14];
-  }
-  const {
-    Description,
-    Error,
-    Label
-  } = t10;
+  } = useField({
+    path,
+    validate: memoizedValidate
+  });
   const value_0 = valueFromContext || valueFromProps;
-  const t11 = `${baseClass}--layout-${layout}`;
-  const t12 = showError && "error";
-  const t13 = readOnly && `${baseClass}--read-only`;
-  let t14;
-  if ($[15] !== className || $[16] !== t11 || $[17] !== t12 || $[18] !== t13) {
-    t14 = [fieldBaseClass, baseClass, className, t11, t12, t13].filter(Boolean);
-    $[15] = className;
-    $[16] = t11;
-    $[17] = t12;
-    $[18] = t13;
-    $[19] = t14;
-  } else {
-    t14 = $[19];
-  }
-  const t15 = t14.join(" ");
-  let t16;
-  if ($[20] !== style || $[21] !== width || $[22] !== path || $[23] !== showError || $[24] !== Error || $[25] !== label || $[26] !== localized || $[27] !== required || $[28] !== Label || $[29] !== value_0 || $[30] !== uuid || $[31] !== onChangeFromProps || $[32] !== readOnly || $[33] !== setValue || $[34] !== disableModifyingFormFromProps || $[35] !== options || $[36] !== description || $[37] !== Description || $[38] !== t15) {
-    let t17;
-    if ($[40] !== value_0 || $[41] !== path || $[42] !== uuid || $[43] !== onChangeFromProps || $[44] !== readOnly || $[45] !== setValue || $[46] !== disableModifyingFormFromProps) {
-      t17 = option => {
-        let optionValue;
-        optionValue = "";
-        if (optionIsObject(option)) {
-          optionValue = option.value;
-        } else {
-          optionValue = option;
-        }
-        const isSelected = String(optionValue) === String(value_0);
-        const id = `field-${path}-${optionValue}${uuid ? `-${uuid}` : ""}`;
-        return _jsx("li", {
-          children: _jsx(Radio, {
-            id,
-            isSelected,
-            onChange: () => {
-              if (typeof onChangeFromProps === "function") {
-                onChangeFromProps(optionValue);
-              }
-              if (!readOnly) {
-                setValue(optionValue, !!disableModifyingFormFromProps);
-              }
-            },
-            option: optionIsObject(option) ? option : {
-              label: option,
-              value: option
-            },
-            path,
-            readOnly,
-            uuid
-          })
-        }, `${path} - ${optionValue}`);
-      };
-      $[40] = value_0;
-      $[41] = path;
-      $[42] = uuid;
-      $[43] = onChangeFromProps;
-      $[44] = readOnly;
-      $[45] = setValue;
-      $[46] = disableModifyingFormFromProps;
-      $[47] = t17;
-    } else {
-      t17 = $[47];
-    }
-    t16 = _jsxs("div", {
-      className: t15,
-      style: {
-        ...style,
-        width
-      },
-      children: [_jsx(RenderCustomComponent, {
-        CustomComponent: Error,
-        Fallback: _jsx(FieldError, {
-          path,
-          showError
+  const styles = useMemo(() => mergeFieldStyles(field), [field]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: [fieldBaseClass, baseClass, className, `${baseClass}--layout-${layout}`, showError && 'error', readOnly && `${baseClass}--read-only`].filter(Boolean).join(' '),
+    style: styles,
+    children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Error,
+      Fallback: /*#__PURE__*/_jsx(FieldError, {
+        path: path,
+        showError: showError
+      })
+    }), /*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Label,
+      Fallback: /*#__PURE__*/_jsx(FieldLabel, {
+        label: label,
+        localized: localized,
+        path: path,
+        required: required
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${fieldBaseClass}__wrap`,
+      children: [/*#__PURE__*/_jsx("ul", {
+        className: `${baseClass}--group`,
+        id: `field-${path.replace(/\./g, '__')}`,
+        children: options.map(option => {
+          let optionValue = '';
+          if (optionIsObject(option)) {
+            optionValue = option.value;
+          } else {
+            optionValue = option;
+          }
+          const isSelected = String(optionValue) === String(value_0);
+          const id = `field-${path}-${optionValue}${uuid ? `-${uuid}` : ''}`;
+          return /*#__PURE__*/_jsx("li", {
+            children: /*#__PURE__*/_jsx(Radio, {
+              id: id,
+              isSelected: isSelected,
+              onChange: () => {
+                if (typeof onChangeFromProps === 'function') {
+                  onChangeFromProps(optionValue);
+                }
+                if (!readOnly) {
+                  setValue(optionValue, !!disableModifyingFormFromProps);
+                }
+              },
+              option: optionIsObject(option) ? option : {
+                label: option,
+                value: option
+              },
+              path: path,
+              readOnly: readOnly,
+              uuid: uuid
+            })
+          }, `${path} - ${optionValue}`);
         })
-      }), _jsx(RenderCustomComponent, {
-        CustomComponent: Label,
-        Fallback: _jsx(FieldLabel, {
-          label,
-          localized,
-          path,
-          required
+      }), /*#__PURE__*/_jsx(RenderCustomComponent, {
+        CustomComponent: Description,
+        Fallback: /*#__PURE__*/_jsx(FieldDescription, {
+          description: description,
+          path: path
         })
-      }), _jsxs("div", {
-        className: `${fieldBaseClass}__wrap`,
-        children: [_jsx("ul", {
-          className: `${baseClass}--group`,
-          id: `field-${path.replace(/\./g, "__")}`,
-          children: options.map(t17)
-        }), _jsx(RenderCustomComponent, {
-          CustomComponent: Description,
-          Fallback: _jsx(FieldDescription, {
-            description,
-            path
-          })
-        })]
       })]
-    });
-    $[20] = style;
-    $[21] = width;
-    $[22] = path;
-    $[23] = showError;
-    $[24] = Error;
-    $[25] = label;
-    $[26] = localized;
-    $[27] = required;
-    $[28] = Label;
-    $[29] = value_0;
-    $[30] = uuid;
-    $[31] = onChangeFromProps;
-    $[32] = readOnly;
-    $[33] = setValue;
-    $[34] = disableModifyingFormFromProps;
-    $[35] = options;
-    $[36] = description;
-    $[37] = Description;
-    $[38] = t15;
-    $[39] = t16;
-  } else {
-    t16 = $[39];
-  }
-  return t16;
+    })]
+  });
 };
 export const RadioGroupField = withCondition(RadioGroupFieldComponent);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","optionIsObject","React","useCallback","RenderCustomComponent","FieldDescription","FieldError","FieldLabel","useForm","useField","withCondition","fieldBaseClass","Radio","baseClass","RadioGroupFieldComponent","props","$","disableModifyingForm","disableModifyingFormFromProps","field","t0","onChange","onChangeFromProps","path","readOnly","validate","value","valueFromProps","t1","undefined","admin","t2","label","localized","options","t3","required","t4","className","description","layout","t5","style","width","t6","uuid","t7","validationOptions","memoizedValidate","t8","customComponents","t9","setValue","showError","valueFromContext","t10","Description","Error","Label","value_0","t11","t12","t13","t14","filter","Boolean","t15","join","t16","t17","option","optionValue","isSelected","String","id","_jsx","children","_jsxs","CustomComponent","Fallback","replace","map","RadioGroupField"],"sources":["../../../src/fields/RadioGroup/index.tsx"],"sourcesContent":["'use client'\nimport type { RadioFieldClientComponent, RadioFieldClientProps } from 'payload'\n\nimport { optionIsObject } from 'payload/shared'\nimport React, { useCallback } from 'react'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\nimport { Radio } from './Radio/index.js'\n\nconst baseClass = 'radio-group'\n\nconst RadioGroupFieldComponent: RadioFieldClientComponent = (props) => {\n  const {\n    disableModifyingForm: disableModifyingFormFromProps,\n    field: {\n      admin: {\n        className,\n        description,\n        layout = 'horizontal',\n        style,\n        width,\n      } = {} as RadioFieldClientProps['field']['admin'],\n      label,\n      localized,\n      options = [],\n      required,\n    } = {} as RadioFieldClientProps['field'],\n    onChange: onChangeFromProps,\n    path,\n    readOnly,\n    validate,\n    value: valueFromProps,\n  } = props\n\n  const { uuid } = useForm()\n\n  const memoizedValidate = useCallback(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...validationOptions, options, required })\n      }\n    },\n    [validate, options, required],\n  )\n\n  const {\n    customComponents: { Description, Error, Label } = {},\n    setValue,\n    showError,\n    value: valueFromContext,\n  } = useField<string>({\n    path,\n    validate: memoizedValidate,\n  })\n\n  const value = valueFromContext || valueFromProps\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        `${baseClass}--layout-${layout}`,\n        showError && 'error',\n        readOnly && `${baseClass}--read-only`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <RenderCustomComponent\n        CustomComponent={Error}\n        Fallback={<FieldError path={path} showError={showError} />}\n      />\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel label={label} localized={localized} path={path} required={required} />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <ul className={`${baseClass}--group`} id={`field-${path.replace(/\\./g, '__')}`}>\n          {options.map((option) => {\n            let optionValue = ''\n\n            if (optionIsObject(option)) {\n              optionValue = option.value\n            } else {\n              optionValue = option\n            }\n\n            const isSelected = String(optionValue) === String(value)\n\n            const id = `field-${path}-${optionValue}${uuid ? `-${uuid}` : ''}`\n\n            return (\n              <li key={`${path} - ${optionValue}`}>\n                <Radio\n                  id={id}\n                  isSelected={isSelected}\n                  onChange={() => {\n                    if (typeof onChangeFromProps === 'function') {\n                      onChangeFromProps(optionValue)\n                    }\n\n                    if (!readOnly) {\n                      setValue(optionValue, !!disableModifyingFormFromProps)\n                    }\n                  }}\n                  option={optionIsObject(option) ? option : { label: option, value: option }}\n                  path={path}\n                  readOnly={readOnly}\n                  uuid={uuid}\n                />\n              </li>\n            )\n          })}\n        </ul>\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport const RadioGroupField = withCondition(RadioGroupFieldComponent)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["optionIsObject","React","useCallback","useMemo","RenderCustomComponent","FieldDescription","FieldError","FieldLabel","useForm","useField","withCondition","mergeFieldStyles","fieldBaseClass","Radio","baseClass","RadioGroupFieldComponent","props","disableModifyingForm","disableModifyingFormFromProps","field","admin","className","description","layout","label","localized","options","required","onChange","onChangeFromProps","path","readOnly","validate","value","valueFromProps","uuid","memoizedValidate","validationOptions","customComponents","Description","Error","Label","setValue","showError","valueFromContext","styles","_jsxs","filter","Boolean","join","style","_jsx","CustomComponent","Fallback","id","replace","map","option","optionValue","isSelected","String","RadioGroupField"],"sources":["../../../src/fields/RadioGroup/index.tsx"],"sourcesContent":["'use client'\nimport type { RadioFieldClientComponent, RadioFieldClientProps } from 'payload'\n\nimport { optionIsObject } from 'payload/shared'\nimport React, { useCallback, useMemo } from 'react'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport './index.scss'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { Radio } from './Radio/index.js'\n\nconst baseClass = 'radio-group'\n\nconst RadioGroupFieldComponent: RadioFieldClientComponent = (props) => {\n  const {\n    disableModifyingForm: disableModifyingFormFromProps,\n    field,\n    field: {\n      admin: {\n        className,\n        description,\n        layout = 'horizontal',\n      } = {} as RadioFieldClientProps['field']['admin'],\n      label,\n      localized,\n      options = [],\n      required,\n    } = {} as RadioFieldClientProps['field'],\n    onChange: onChangeFromProps,\n    path,\n    readOnly,\n    validate,\n    value: valueFromProps,\n  } = props\n\n  const { uuid } = useForm()\n\n  const memoizedValidate = useCallback(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...validationOptions, options, required })\n      }\n    },\n    [validate, options, required],\n  )\n\n  const {\n    customComponents: { Description, Error, Label } = {},\n    setValue,\n    showError,\n    value: valueFromContext,\n  } = useField<string>({\n    path,\n    validate: memoizedValidate,\n  })\n\n  const value = valueFromContext || valueFromProps\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        `${baseClass}--layout-${layout}`,\n        showError && 'error',\n        readOnly && `${baseClass}--read-only`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Error}\n        Fallback={<FieldError path={path} showError={showError} />}\n      />\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel label={label} localized={localized} path={path} required={required} />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <ul className={`${baseClass}--group`} id={`field-${path.replace(/\\./g, '__')}`}>\n          {options.map((option) => {\n            let optionValue = ''\n\n            if (optionIsObject(option)) {\n              optionValue = option.value\n            } else {\n              optionValue = option\n            }\n\n            const isSelected = String(optionValue) === String(value)\n\n            const id = `field-${path}-${optionValue}${uuid ? `-${uuid}` : ''}`\n\n            return (\n              <li key={`${path} - ${optionValue}`}>\n                <Radio\n                  id={id}\n                  isSelected={isSelected}\n                  onChange={() => {\n                    if (typeof onChangeFromProps === 'function') {\n                      onChangeFromProps(optionValue)\n                    }\n\n                    if (!readOnly) {\n                      setValue(optionValue, !!disableModifyingFormFromProps)\n                    }\n                  }}\n                  option={optionIsObject(option) ? option : { label: option, value: option }}\n                  path={path}\n                  readOnly={readOnly}\n                  uuid={uuid}\n                />\n              </li>\n            )\n          })}\n        </ul>\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport const RadioGroupField = withCondition(RadioGroupFieldComponent)\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Relationship/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA+D,MAAM,OAAO,CAAA;AAwBnF,OAAO,cAAc,CAAA;AAsrBrB,eAAO,MAAM,iBAAiB;;;;;+EAA4C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Relationship/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAwE,MAAM,OAAO,CAAA;AAwB5F,OAAO,cAAc,CAAA;AAorBrB,eAAO,MAAM,iBAAiB;;;;;+EAA4C,CAAA"}

package/dist/fields/Relationship/index.js

@@ -3,7 +3,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { wordBoundariesRegex } from 'payload/shared';
 import * as qs from 'qs-esm';
-import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { AddNewRelation } from '../../elements/AddNewRelation/index.js';
 import { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js';
 import { ReactSelect } from '../../elements/ReactSelect/index.js';
@@ -19,10 +19,11 @@ import { useAuth } from '../../providers/Auth/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { mergeFieldStyles } from '../mergeFieldStyles.js';
 import { fieldBaseClass } from '../shared/index.js';
 import { createRelationMap } from './createRelationMap.js';
-import { findOptionsByValue } from './findOptionsByValue.js';
 import './index.scss';
+import { findOptionsByValue } from './findOptionsByValue.js';
 import { optionsReducer } from './optionsReducer.js';
 import { MultiValueLabel } from './select-components/MultiValueLabel/index.js';
 import { SingleValue } from './select-components/SingleValue/index.js';
@@ -30,17 +31,15 @@ const maxResultsPerRequest = 10;
 const baseClass = 'relationship';
 const RelationshipFieldComponent = props => {
   const {
+    field,
     field: {
-      name,
       admin: {
         allowCreate = true,
         allowEdit = true,
         className,
         description,
         isSortable = true,
-        sortOptions,
-        style,
-        width
+        sortOptions
       } = {},
       hasMany,
       label,
@@ -459,13 +458,11 @@ const RelationshipFieldComponent = props => {
   if (!Array.isArray(valueToRender) && valueToRender?.value === 'null') {
     valueToRender.value = null;
   }
+  const styles = useMemo(() => mergeFieldStyles(field), [field]);
   return /*#__PURE__*/_jsxs("div", {
     className: [fieldBaseClass, baseClass, className, showError && 'error', errorLoading && 'error-loading', readOnly && `${baseClass}--read-only`, !readOnly && allowCreate && `${baseClass}--allow-create`].filter(Boolean).join(' '),
     id: `field-${path.replace(/\./g, '__')}`,
-    style: {
-      ...style,
-      width
-    },
+    style: styles,
     children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
       CustomComponent: Label,
       Fallback: /*#__PURE__*/_jsx(FieldLabel, {