@payloadcms/ui 3.0.0-canary.e14c80d → 3.0.0-canary.e1fc0e0

package/dist/elements/ErrorPill/index.scss

@@ -1,31 +1,33 @@
 @import '../../scss/styles.scss';
 
-.error-pill {
-  align-self: center;
-  align-items: center;
-  border: 0;
-  padding: 0 base(0.25);
-  flex-shrink: 0;
-  border-radius: var(--style-radius-l);
-  line-height: 18px;
-  font-size: 11px;
-  text-align: center;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--theme-error-300);
-  color: var(--theme-error-950);
+@layer payload-default {
+  .error-pill {
+    align-self: center;
+    align-items: center;
+    border: 0;
+    padding: 0 base(0.25);
+    flex-shrink: 0;
+    border-radius: var(--style-radius-l);
+    line-height: 18px;
+    font-size: 11px;
+    text-align: center;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--theme-error-300);
+    color: var(--theme-error-950);
 
-  &--fixed-width {
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    position: relative;
-  }
+    &--fixed-width {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      position: relative;
+    }
 
-  &__count {
-    letter-spacing: 0.5px;
-    margin-left: 0.5px;
+    &__count {
+      letter-spacing: 0.5px;
+      margin-left: 0.5px;
+    }
   }
 }

package/dist/elements/FieldSelect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAmB,MAAM,SAAS,CAAA;AAG1E,OAAO,KAAK,EAAE,EAAY,KAAK,GAAG,EAAY,MAAM,OAAO,CAAA;AAQ3D,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAA;CACxD,CAAA;AAED,eAAO,MAAM,YAAY,oCAItB;IACD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAA;CAC9B,KAAG,GAAG,CAAC,OA6CP,CAAA;AAqED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgDlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAmB,MAAM,SAAS,CAAA;AAG1E,OAAO,KAAK,EAAE,EAAY,KAAK,GAAG,EAAY,MAAM,OAAO,CAAA;AAQ3D,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAA;CACxD,CAAA;AAED,eAAO,MAAM,YAAY,oCAItB;IACD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAA;CAC9B,KAAG,GAAG,CAAC,OA+CP,CAAA;AAqED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgDlD,CAAA"}

package/dist/elements/FieldSelect/index.js

@@ -1,4 +1,6 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { fieldAffectsData, fieldHasSubFields } from 'payload/shared';
 import React, { Fragment, useState } from 'react';
@@ -10,148 +12,178 @@ import { useTranslation } from '../../providers/Translation/index.js';
 import { ReactSelect } from '../ReactSelect/index.js';
 import './index.scss';
 const baseClass = 'field-select';
-export const combineLabel = ({ customLabel, field, prefix })=>{
-    const CustomLabelToRender = field?.admin?.components && 'Label' in field.admin.components && field?.admin?.components?.Label !== undefined ? field.admin.components.Label : null;
-    const DefaultLabelToRender = field && 'label' in field && field.label ? {
-        type: 'client',
-        Component: FieldLabel,
-        props: {
-            Label: field.admin?.components && 'Label' in field.admin.components ? field.admin?.components?.Label : null,
-            label: field.label
-        }
-    } : null;
-    const LabelToRender = CustomLabelToRender || DefaultLabelToRender || {
-        type: 'client',
-        Component: null,
-        RenderedComponent: customLabel
-    };
-    if (!LabelToRender) return null;
-    return /*#__PURE__*/ _jsxs(Fragment, {
-        children: [
-            prefix && /*#__PURE__*/ _jsxs(Fragment, {
-                children: [
-                    /*#__PURE__*/ _jsx("span", {
-                        style: {
-                            display: 'inline-block'
-                        },
-                        children: prefix
-                    }),
-                    ' > '
-                ]
-            }),
-            /*#__PURE__*/ _jsx("span", {
-                style: {
-                    display: 'inline-block'
-                },
-                children: /*#__PURE__*/ _jsx(RenderComponent, {
-                    mappedComponent: LabelToRender
-                })
-            })
-        ]
-    });
+export const combineLabel = ({
+  customLabel,
+  field,
+  prefix
+}) => {
+  const CustomLabelToRender = field?.admin?.components && 'Label' in field.admin.components && field?.admin?.components?.Label !== undefined ? field.admin.components.Label : null;
+  const DefaultLabelToRender = field && 'label' in field && field.label ? {
+    type: 'client',
+    Component: FieldLabel,
+    props: {
+      Label: field.admin?.components && 'Label' in field.admin.components ? field.admin?.components?.Label : null,
+      label: field.label
+    }
+  } : null;
+  const LabelToRender = CustomLabelToRender || DefaultLabelToRender || {
+    type: 'client',
+    Component: null,
+    RenderedComponent: customLabel
+  };
+  if (!LabelToRender) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [prefix && /*#__PURE__*/_jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsx("span", {
+        style: {
+          display: 'inline-block'
+        },
+        children: prefix
+      }), ' > ']
+    }), /*#__PURE__*/_jsx("span", {
+      style: {
+        display: 'inline-block'
+      },
+      children: /*#__PURE__*/_jsx(RenderComponent, {
+        mappedComponent: LabelToRender
+      })
+    })]
+  });
 };
-const reduceFields = ({ fields, labelPrefix = null, path = '' })=>{
-    if (!fields) {
-        return [];
+const reduceFields = ({
+  fields,
+  labelPrefix = null,
+  path = ''
+}) => {
+  if (!fields) {
+    return [];
+  }
+  return fields?.reduce((fieldsToUse, field) => {
+    // escape for a variety of reasons, include ui fields as they have `name`.
+    if ((fieldAffectsData(field) || field.type === 'ui') && (field.admin.disableBulkEdit || field.unique || field.admin.hidden || 'readOnly' in field && field.readOnly)) {
+      return fieldsToUse;
     }
-    return fields?.reduce((fieldsToUse, field)=>{
-        // escape for a variety of reasons
-        if (fieldAffectsData(field) && (field.admin.disableBulkEdit || field.unique || field.admin.hidden || 'readOnly' in field && field.readOnly)) {
-            return fieldsToUse;
-        }
-        if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {
-            return [
-                ...fieldsToUse,
-                ...reduceFields({
-                    fields: field.fields,
-                    labelPrefix: combineLabel({
-                        field,
-                        prefix: labelPrefix
-                    }),
-                    path: createNestedClientFieldPath(path, field)
-                })
-            ];
-        }
-        if (field.type === 'tabs' && 'tabs' in field) {
-            return [
-                ...fieldsToUse,
-                ...field.tabs.reduce((tabFields, tab)=>{
-                    if ('fields' in tab) {
-                        const isNamedTab = 'name' in tab && tab.name;
-                        return [
-                            ...tabFields,
-                            ...reduceFields({
-                                fields: tab.fields,
-                                labelPrefix,
-                                path: isNamedTab ? createNestedClientFieldPath(path, field) : path
-                            })
-                        ];
-                    }
-                }, [])
-            ];
+    if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {
+      return [...fieldsToUse, ...reduceFields({
+        fields: field.fields,
+        labelPrefix: combineLabel({
+          field,
+          prefix: labelPrefix
+        }),
+        path: createNestedClientFieldPath(path, field)
+      })];
+    }
+    if (field.type === 'tabs' && 'tabs' in field) {
+      return [...fieldsToUse, ...field.tabs.reduce((tabFields, tab) => {
+        if ('fields' in tab) {
+          const isNamedTab = 'name' in tab && tab.name;
+          return [...tabFields, ...reduceFields({
+            fields: tab.fields,
+            labelPrefix,
+            path: isNamedTab ? createNestedClientFieldPath(path, field) : path
+          })];
         }
-        const formattedField = {
-            label: combineLabel({
-                field,
-                prefix: labelPrefix
-            }),
-            value: {
-                ...field,
-                path: createNestedClientFieldPath(path, field)
-            }
-        };
-        return [
-            ...fieldsToUse,
-            formattedField
-        ];
-    }, []);
+      }, [])];
+    }
+    const formattedField = {
+      label: combineLabel({
+        field,
+        prefix: labelPrefix
+      }),
+      value: {
+        ...field,
+        path: createNestedClientFieldPath(path, field)
+      }
+    };
+    return [...fieldsToUse, formattedField];
+  }, []);
 };
-export const FieldSelect = ({ fields, setSelected })=>{
-    const { t } = useTranslation();
-    const [options] = useState(()=>reduceFields({
-            fields
+export const FieldSelect = t0 => {
+  const $ = _c(10);
+  const {
+    fields,
+    setSelected
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== fields) {
+    t1 = () => reduceFields({
+      fields
+    });
+    $[0] = fields;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const [options] = useState(t1);
+  const {
+    dispatchFields,
+    getFields
+  } = useForm();
+  let t2;
+  if ($[2] !== getFields || $[3] !== setSelected || $[4] !== dispatchFields) {
+    t2 = selected => {
+      const activeFields = getFields();
+      if (selected === null) {
+        setSelected([]);
+      } else {
+        setSelected(selected.map(t3 => {
+          const {
+            value
+          } = t3;
+          return value;
         }));
-    const { dispatchFields, getFields } = useForm();
-    const handleChange = (selected)=>{
-        const activeFields = getFields();
-        if (selected === null) {
-            setSelected([]);
-        } else {
-            setSelected(selected.map(({ value })=>value));
-        }
-        // remove deselected values from form state
-        if (selected === null || Object.keys(activeFields || []).length > selected.length) {
-            Object.keys(activeFields).forEach((path)=>{
-                if (selected === null || !selected.find((field)=>{
-                    return field.value.path === path;
-                })) {
-                    dispatchFields({
-                        type: 'REMOVE',
-                        path
-                    });
-                }
+      }
+      if (selected === null || Object.keys(activeFields || []).length > selected.length) {
+        Object.keys(activeFields).forEach(path => {
+          if (selected === null || !selected.find(field => field.value.path === path)) {
+            dispatchFields({
+              type: "REMOVE",
+              path
             });
-        }
+          }
+        });
+      }
     };
-    return /*#__PURE__*/ _jsxs("div", {
-        className: baseClass,
-        children: [
-            /*#__PURE__*/ _jsx(FieldLabel, {
-                label: t('fields:selectFieldsToEdit')
-            }),
-            /*#__PURE__*/ _jsx(ReactSelect, {
-                getOptionValue: (option)=>{
-                    if (typeof option.value === 'object' && 'path' in option.value) {
-                        return String(option.value.path);
-                    }
-                    return String(option.value);
-                },
-                isMulti: true,
-                onChange: handleChange,
-                options: options
-            })
-        ]
+    $[2] = getFields;
+    $[3] = setSelected;
+    $[4] = dispatchFields;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const handleChange = t2;
+  let t3;
+  if ($[6] !== t || $[7] !== handleChange || $[8] !== options) {
+    t3 = _jsxs("div", {
+      className: baseClass,
+      children: [_jsx(FieldLabel, {
+        field: null,
+        label: t("fields:selectFieldsToEdit")
+      }), _jsx(ReactSelect, {
+        getOptionValue: _temp,
+        isMulti: true,
+        onChange: handleChange,
+        options
+      })]
     });
+    $[6] = t;
+    $[7] = handleChange;
+    $[8] = options;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  return t3;
 };
-
+function _temp(option) {
+  if (typeof option.value === "object" && "path" in option.value) {
+    return String(option.value.path);
+  }
+  return String(option.value);
+}
 //# sourceMappingURL=index.js.map

package/dist/elements/FieldSelect/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/FieldSelect/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, FieldWithPath, MappedComponent } from 'payload'\n\nimport { fieldAffectsData, fieldHasSubFields } from 'payload/shared'\nimport React, { Fragment, type JSX, useState } from 'react'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { createNestedClientFieldPath } from '../../forms/Form/createNestedClientFieldPath.js'\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'field-select'\n\nexport type FieldSelectProps = {\n  readonly fields: ClientField[]\n  readonly setSelected: (fields: FieldWithPath[]) => void\n}\n\nexport const combineLabel = ({\n  customLabel,\n  field,\n  prefix,\n}: {\n  customLabel?: string\n  field?: ClientField\n  prefix?: JSX.Element | string\n}): JSX.Element => {\n  const CustomLabelToRender: MappedComponent =\n    field?.admin?.components &&\n    'Label' in field.admin.components &&\n    field?.admin?.components?.Label !== undefined\n      ? field.admin.components.Label\n      : null\n\n  const DefaultLabelToRender: MappedComponent =\n    field && 'label' in field && field.label\n      ? {\n          type: 'client',\n          Component: FieldLabel,\n          props: {\n            Label:\n              field.admin?.components && 'Label' in field.admin.components\n                ? field.admin?.components?.Label\n                : null,\n            label: field.label,\n          },\n        }\n      : null\n\n  const LabelToRender: MappedComponent = CustomLabelToRender ||\n    DefaultLabelToRender || {\n      type: 'client',\n      Component: null,\n      RenderedComponent: customLabel,\n    }\n\n  if (!LabelToRender) return null\n\n  return (\n    <Fragment>\n      {prefix && (\n        <Fragment>\n          <span style={{ display: 'inline-block' }}>{prefix}</span>\n          {' > '}\n        </Fragment>\n      )}\n      <span style={{ display: 'inline-block' }}>\n        <RenderComponent mappedComponent={LabelToRender} />\n      </span>\n    </Fragment>\n  )\n}\n\nconst reduceFields = ({\n  fields,\n  labelPrefix = null,\n  path = '',\n}: {\n  fields: ClientField[]\n  labelPrefix?: JSX.Element | string\n  path?: string\n}): { Label: JSX.Element; value: FieldWithPath }[] => {\n  if (!fields) {\n    return []\n  }\n\n  return fields?.reduce((fieldsToUse, field) => {\n    // escape for a variety of reasons\n    if (\n      fieldAffectsData(field) &&\n      (field.admin.disableBulkEdit ||\n        field.unique ||\n        field.admin.hidden ||\n        ('readOnly' in field && field.readOnly))\n    ) {\n      return fieldsToUse\n    }\n\n    if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {\n      return [\n        ...fieldsToUse,\n        ...reduceFields({\n          fields: field.fields,\n          labelPrefix: combineLabel({ field, prefix: labelPrefix }),\n          path: createNestedClientFieldPath(path, field),\n        }),\n      ]\n    }\n\n    if (field.type === 'tabs' && 'tabs' in field) {\n      return [\n        ...fieldsToUse,\n        ...field.tabs.reduce((tabFields, tab) => {\n          if ('fields' in tab) {\n            const isNamedTab = 'name' in tab && tab.name\n            return [\n              ...tabFields,\n              ...reduceFields({\n                fields: tab.fields,\n                labelPrefix,\n                path: isNamedTab ? createNestedClientFieldPath(path, field) : path,\n              }),\n            ]\n          }\n        }, []),\n      ]\n    }\n\n    const formattedField = {\n      label: combineLabel({ field, prefix: labelPrefix }),\n      value: {\n        ...field,\n        path: createNestedClientFieldPath(path, field),\n      },\n    }\n\n    return [...fieldsToUse, formattedField]\n  }, [])\n}\n\nexport const FieldSelect: React.FC<FieldSelectProps> = ({ fields, setSelected }) => {\n  const { t } = useTranslation()\n  const [options] = useState(() => reduceFields({ fields }))\n\n  const { dispatchFields, getFields } = useForm()\n\n  const handleChange = (selected) => {\n    const activeFields = getFields()\n    if (selected === null) {\n      setSelected([])\n    } else {\n      setSelected(selected.map(({ value }) => value))\n    }\n\n    // remove deselected values from form state\n    if (selected === null || Object.keys(activeFields || []).length > selected.length) {\n      Object.keys(activeFields).forEach((path) => {\n        if (\n          selected === null ||\n          !selected.find((field) => {\n            return field.value.path === path\n          })\n        ) {\n          dispatchFields({\n            type: 'REMOVE',\n            path,\n          })\n        }\n      })\n    }\n  }\n\n  return (\n    <div className={baseClass}>\n      <FieldLabel label={t('fields:selectFieldsToEdit')} />\n      <ReactSelect\n        getOptionValue={(option) => {\n          if (typeof option.value === 'object' && 'path' in option.value) {\n            return String(option.value.path)\n          }\n          return String(option.value)\n        }}\n        isMulti\n        onChange={handleChange}\n        options={options}\n      />\n    </div>\n  )\n}\n"],"names":["fieldAffectsData","fieldHasSubFields","React","Fragment","useState","FieldLabel","useForm","createNestedClientFieldPath","RenderComponent","useTranslation","ReactSelect","baseClass","combineLabel","customLabel","field","prefix","CustomLabelToRender","admin","components","Label","undefined","DefaultLabelToRender","label","type","Component","props","LabelToRender","RenderedComponent","span","style","display","mappedComponent","reduceFields","fields","labelPrefix","path","reduce","fieldsToUse","disableBulkEdit","unique","hidden","readOnly","tabs","tabFields","tab","isNamedTab","name","formattedField","value","FieldSelect","setSelected","t","options","dispatchFields","getFields","handleChange","selected","activeFields","map","Object","keys","length","forEach","find","div","className","getOptionValue","option","String","isMulti","onChange"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","fieldAffectsData","fieldHasSubFields","React","Fragment","useState","FieldLabel","useForm","createNestedClientFieldPath","RenderComponent","useTranslation","ReactSelect","baseClass","combineLabel","customLabel","field","prefix","CustomLabelToRender","admin","components","Label","undefined","DefaultLabelToRender","label","type","Component","props","LabelToRender","RenderedComponent","_jsxs","_jsx","style","display","mappedComponent","reduceFields","fields","labelPrefix","path","reduce","fieldsToUse","disableBulkEdit","unique","hidden","readOnly","tabs","tabFields","tab","isNamedTab","name","formattedField","value","FieldSelect","t0","$","setSelected","t","t1","options","dispatchFields","getFields","t2","selected","activeFields","map","t3","Object","keys","length","forEach","find","handleChange","className","children","getOptionValue","_temp","isMulti","onChange","option","String"],"sources":["../../../src/elements/FieldSelect/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, FieldWithPath, MappedComponent } from 'payload'\n\nimport { fieldAffectsData, fieldHasSubFields } from 'payload/shared'\nimport React, { Fragment, type JSX, useState } from 'react'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { createNestedClientFieldPath } from '../../forms/Form/createNestedClientFieldPath.js'\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'field-select'\n\nexport type FieldSelectProps = {\n  readonly fields: ClientField[]\n  readonly setSelected: (fields: FieldWithPath[]) => void\n}\n\nexport const combineLabel = ({\n  customLabel,\n  field,\n  prefix,\n}: {\n  customLabel?: string\n  field?: ClientField\n  prefix?: JSX.Element | string\n}): JSX.Element => {\n  const CustomLabelToRender: MappedComponent =\n    field?.admin?.components &&\n    'Label' in field.admin.components &&\n    field?.admin?.components?.Label !== undefined\n      ? field.admin.components.Label\n      : null\n\n  const DefaultLabelToRender: MappedComponent =\n    field && 'label' in field && field.label\n      ? {\n          type: 'client',\n          Component: FieldLabel,\n          props: {\n            Label:\n              field.admin?.components && 'Label' in field.admin.components\n                ? field.admin?.components?.Label\n                : null,\n            label: field.label,\n          },\n        }\n      : null\n\n  const LabelToRender: MappedComponent = CustomLabelToRender ||\n    DefaultLabelToRender || {\n      type: 'client',\n      Component: null,\n      RenderedComponent: customLabel,\n    }\n\n  if (!LabelToRender) {\n    return null\n  }\n\n  return (\n    <Fragment>\n      {prefix && (\n        <Fragment>\n          <span style={{ display: 'inline-block' }}>{prefix}</span>\n          {' > '}\n        </Fragment>\n      )}\n      <span style={{ display: 'inline-block' }}>\n        <RenderComponent mappedComponent={LabelToRender} />\n      </span>\n    </Fragment>\n  )\n}\n\nconst reduceFields = ({\n  fields,\n  labelPrefix = null,\n  path = '',\n}: {\n  fields: ClientField[]\n  labelPrefix?: JSX.Element | string\n  path?: string\n}): { Label: JSX.Element; value: FieldWithPath }[] => {\n  if (!fields) {\n    return []\n  }\n\n  return fields?.reduce((fieldsToUse, field) => {\n    // escape for a variety of reasons, include ui fields as they have `name`.\n    if (\n      (fieldAffectsData(field) || field.type === 'ui') &&\n      (field.admin.disableBulkEdit ||\n        field.unique ||\n        field.admin.hidden ||\n        ('readOnly' in field && field.readOnly))\n    ) {\n      return fieldsToUse\n    }\n\n    if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {\n      return [\n        ...fieldsToUse,\n        ...reduceFields({\n          fields: field.fields,\n          labelPrefix: combineLabel({ field, prefix: labelPrefix }),\n          path: createNestedClientFieldPath(path, field),\n        }),\n      ]\n    }\n\n    if (field.type === 'tabs' && 'tabs' in field) {\n      return [\n        ...fieldsToUse,\n        ...field.tabs.reduce((tabFields, tab) => {\n          if ('fields' in tab) {\n            const isNamedTab = 'name' in tab && tab.name\n            return [\n              ...tabFields,\n              ...reduceFields({\n                fields: tab.fields,\n                labelPrefix,\n                path: isNamedTab ? createNestedClientFieldPath(path, field) : path,\n              }),\n            ]\n          }\n        }, []),\n      ]\n    }\n\n    const formattedField = {\n      label: combineLabel({ field, prefix: labelPrefix }),\n      value: {\n        ...field,\n        path: createNestedClientFieldPath(path, field),\n      },\n    }\n\n    return [...fieldsToUse, formattedField]\n  }, [])\n}\n\nexport const FieldSelect: React.FC<FieldSelectProps> = ({ fields, setSelected }) => {\n  const { t } = useTranslation()\n  const [options] = useState(() => reduceFields({ fields }))\n\n  const { dispatchFields, getFields } = useForm()\n\n  const handleChange = (selected) => {\n    const activeFields = getFields()\n    if (selected === null) {\n      setSelected([])\n    } else {\n      setSelected(selected.map(({ value }) => value))\n    }\n\n    // remove deselected values from form state\n    if (selected === null || Object.keys(activeFields || []).length > selected.length) {\n      Object.keys(activeFields).forEach((path) => {\n        if (\n          selected === null ||\n          !selected.find((field) => {\n            return field.value.path === path\n          })\n        ) {\n          dispatchFields({\n            type: 'REMOVE',\n            path,\n          })\n        }\n      })\n    }\n  }\n\n  return (\n    <div className={baseClass}>\n      <FieldLabel field={null} label={t('fields:selectFieldsToEdit')} />\n      <ReactSelect\n        getOptionValue={(option) => {\n          if (typeof option.value === 'object' && 'path' in option.value) {\n            return String(option.value.path)\n          }\n          return String(option.value)\n        }}\n        isMulti\n        onChange={handleChange}\n        options={options}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/FieldSelect/index.scss

@@ -1,5 +1,7 @@
 @import '../../scss/styles.scss';
 
-.field-select {
-  margin-bottom: base(1);
+@layer payload-default {
+  .field-select {
+    margin-bottom: base(1);
+  }
 }

package/dist/elements/FileDetails/DraggableFileDetails/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import './index.scss';
+import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload';
+export type DraggableFileDetailsProps = {
+    collectionSlug: string;
+    customUploadActions?: React.ReactNode[];
+    doc: {
+        sizes?: FileSizes;
+    } & Data;
+    enableAdjustments?: boolean;
+    hasImageSizes?: boolean;
+    hasMany: boolean;
+    imageCacheTag?: string;
+    isSortable?: boolean;
+    removeItem?: (index: number) => void;
+    rowIndex: number;
+    uploadConfig: SanitizedCollectionConfig['upload'];
+};
+export declare const DraggableFileDetails: React.FC<DraggableFileDetailsProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/FileDetails/DraggableFileDetails/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/DraggableFileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAOzE,MAAM,MAAM,yBAAyB,GAAG;IACtC,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAqEpE,CAAA"}

package/dist/elements/FileDetails/DraggableFileDetails/index.js

@@ -0,0 +1,116 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Button } from '../../Button/index.js';
+import { Thumbnail } from '../../Thumbnail/index.js';
+import './index.scss';
+const baseClass = 'file-details-draggable';
+import { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js';
+import { DragHandleIcon } from '../../../icons/DragHandle/index.js';
+import { EditIcon } from '../../../icons/Edit/index.js';
+import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
+export const DraggableFileDetails = props => {
+  const $ = _c(19);
+  const {
+    collectionSlug,
+    doc,
+    imageCacheTag,
+    isSortable,
+    removeItem,
+    rowIndex,
+    uploadConfig
+  } = props;
+  const {
+    id,
+    filename,
+    thumbnailURL,
+    url
+  } = doc;
+  let t0;
+  if ($[0] !== id || $[1] !== collectionSlug) {
+    t0 = {
+      id,
+      collectionSlug
+    };
+    $[0] = id;
+    $[1] = collectionSlug;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer(t0);
+  let t1;
+  if ($[3] !== isSortable || $[4] !== collectionSlug || $[5] !== doc || $[6] !== thumbnailURL || $[7] !== url || $[8] !== imageCacheTag || $[9] !== uploadConfig || $[10] !== filename || $[11] !== DocumentDrawer || $[12] !== DocumentDrawerToggler || $[13] !== removeItem || $[14] !== rowIndex) {
+    t1 = draggableSortableItemProps => _jsxs("div", {
+      className: [baseClass, draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`].filter(Boolean).join(" "),
+      ref: draggableSortableItemProps.setNodeRef,
+      style: {
+        transform: draggableSortableItemProps.transform,
+        transition: draggableSortableItemProps.transition,
+        zIndex: draggableSortableItemProps.isDragging ? 1 : undefined
+      },
+      children: [_jsxs("div", {
+        className: `${baseClass}--drag-wrapper`,
+        children: [isSortable && draggableSortableItemProps && _jsx("div", {
+          className: `${baseClass}__drag`,
+          ...draggableSortableItemProps.attributes,
+          ...draggableSortableItemProps.listeners,
+          children: _jsx(DragHandleIcon, {})
+        }), _jsx(Thumbnail, {
+          className: `${baseClass}__thumbnail`,
+          collectionSlug,
+          doc,
+          fileSrc: thumbnailURL || url,
+          imageCacheTag,
+          uploadConfig
+        })]
+      }), _jsx("div", {
+        className: `${baseClass}__main-detail`,
+        children: filename
+      }), _jsxs("div", {
+        className: `${baseClass}__actions`,
+        children: [_jsx(DocumentDrawer, {}), _jsx(DocumentDrawerToggler, {
+          children: _jsx(EditIcon, {})
+        }), removeItem && _jsx(Button, {
+          buttonStyle: "icon-label",
+          className: `${baseClass}__remove`,
+          icon: "x",
+          iconStyle: "none",
+          onClick: () => removeItem(rowIndex),
+          round: true
+        })]
+      })]
+    });
+    $[3] = isSortable;
+    $[4] = collectionSlug;
+    $[5] = doc;
+    $[6] = thumbnailURL;
+    $[7] = url;
+    $[8] = imageCacheTag;
+    $[9] = uploadConfig;
+    $[10] = filename;
+    $[11] = DocumentDrawer;
+    $[12] = DocumentDrawerToggler;
+    $[13] = removeItem;
+    $[14] = rowIndex;
+    $[15] = t1;
+  } else {
+    t1 = $[15];
+  }
+  let t2;
+  if ($[16] !== id || $[17] !== t1) {
+    t2 = _jsx(DraggableSortableItem, {
+      id,
+      children: t1
+    }, id);
+    $[16] = id;
+    $[17] = t1;
+    $[18] = t2;
+  } else {
+    t2 = $[18];
+  }
+  return t2;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/FileDetails/DraggableFileDetails/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","Button","Thumbnail","baseClass","DraggableSortableItem","DragHandleIcon","EditIcon","useDocumentDrawer","DraggableFileDetails","props","$","collectionSlug","doc","imageCacheTag","isSortable","removeItem","rowIndex","uploadConfig","id","filename","thumbnailURL","url","t0","DocumentDrawer","DocumentDrawerToggler","t1","draggableSortableItemProps","_jsxs","className","filter","Boolean","join","ref","setNodeRef","style","transform","transition","zIndex","isDragging","undefined","children","_jsx","attributes","listeners","fileSrc","buttonStyle","icon","iconStyle","onClick","round","t2"],"sources":["../../../../src/elements/FileDetails/DraggableFileDetails/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../../Button/index.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details-draggable'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nimport { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js'\nimport { DragHandleIcon } from '../../../icons/DragHandle/index.js'\nimport { EditIcon } from '../../../icons/Edit/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\n\nexport type DraggableFileDetailsProps = {\n  collectionSlug: string\n  customUploadActions?: React.ReactNode[]\n  doc: {\n    sizes?: FileSizes\n  } & Data\n  enableAdjustments?: boolean\n  hasImageSizes?: boolean\n  hasMany: boolean\n  imageCacheTag?: string\n  isSortable?: boolean\n  removeItem?: (index: number) => void\n  rowIndex: number\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const DraggableFileDetails: React.FC<DraggableFileDetailsProps> = (props) => {\n  const { collectionSlug, doc, imageCacheTag, isSortable, removeItem, rowIndex, uploadConfig } =\n    props\n\n  const { id, filename, thumbnailURL, url } = doc\n\n  const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({\n    id,\n    collectionSlug,\n  })\n\n  return (\n    <DraggableSortableItem id={id} key={id}>\n      {(draggableSortableItemProps) => (\n        <div\n          className={[\n            baseClass,\n            draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          ref={draggableSortableItemProps.setNodeRef}\n          style={{\n            transform: draggableSortableItemProps.transform,\n            transition: draggableSortableItemProps.transition,\n            zIndex: draggableSortableItemProps.isDragging ? 1 : undefined,\n          }}\n        >\n          <div className={`${baseClass}--drag-wrapper`}>\n            {isSortable && draggableSortableItemProps && (\n              <div\n                className={`${baseClass}__drag`}\n                {...draggableSortableItemProps.attributes}\n                {...draggableSortableItemProps.listeners}\n              >\n                <DragHandleIcon />\n              </div>\n            )}\n            <Thumbnail\n              className={`${baseClass}__thumbnail`}\n              collectionSlug={collectionSlug}\n              doc={doc}\n              fileSrc={thumbnailURL || url}\n              imageCacheTag={imageCacheTag}\n              uploadConfig={uploadConfig}\n            />\n          </div>\n          <div className={`${baseClass}__main-detail`}>{filename}</div>\n\n          <div className={`${baseClass}__actions`}>\n            <DocumentDrawer />\n            <DocumentDrawerToggler>\n              <EditIcon />\n            </DocumentDrawerToggler>\n            {removeItem && (\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__remove`}\n                icon=\"x\"\n                iconStyle=\"none\"\n                onClick={() => removeItem(rowIndex)}\n                round\n              />\n            )}\n          </div>\n        </div>\n      )}\n    </DraggableSortableItem>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/FileDetails/DraggableFileDetails/index.scss

@@ -0,0 +1,35 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .file-details-draggable {
+    display: flex;
+    gap: 0.6rem;
+    //justify-content: space-between;
+    align-items: center;
+    background: var(--theme-elevation-50);
+    border-radius: 3px;
+    padding: 0.7rem 0.8rem;
+
+    &--drag-wrapper {
+      display: flex;
+      gap: 0.6rem;
+      align-items: center;
+    }
+
+    &__thumbnail {
+      max-width: 1.5rem;
+    }
+
+    &__actions {
+      flex-grow: 2;
+      display: flex;
+      gap: 0.6rem;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    &__remove.btn--style-icon-label {
+      margin: 0;
+    }
+  }
+}