@payloadcms/ui 4.0.0-canary.3 → 4.0.0-canary.4

package/dist/elements/QueryPresets/fields/ColumnsField/index.js

@@ -1,16 +1,19 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useId, useMemo } from 'react';
+import { fieldIsHiddenOrDisabled, fieldIsID, flattenTopLevelFields } from 'payload/shared';
+import React, { useMemo } from 'react';
 import { FieldLabel } from '../../../../fields/FieldLabel/index.js';
 import { useField } from '../../../../forms/useField/index.js';
 import { useAuth } from '../../../../providers/Auth/index.js';
 import { useConfig } from '../../../../providers/Config/index.js';
+import { filterFieldsWithPermissions } from '../../../../providers/TableColumns/buildColumnState/filterFieldsWithPermissions.js';
+import { isColumnActive } from '../../../../providers/TableColumns/buildColumnState/isColumnActive.js';
+import { sortFieldMap } from '../../../../providers/TableColumns/buildColumnState/sortFieldMap.js';
 import { useTranslation } from '../../../../providers/Translation/index.js';
 import { getColumns } from '../../../../utilities/getColumns.js';
-import { reduceFieldsToOptions } from '../../../../utilities/reduceFieldsToOptions.js';
-import { PillSelector } from '../../../PillSelector/index.js';
-import './index.scss';
+import { ColumnSelectionButton } from '../../../ColumnSelection/index.js';
+import '../fields.css';
 export const QueryPresetsColumnField = ({
   field: {
     label,
@@ -36,11 +39,10 @@ export const QueryPresetsColumnField = ({
   const {
     permissions
   } = useAuth();
-  const uuid = useId();
   const collectionConfig = useMemo(() => relatedCollection ? getEntityConfig({
     collectionSlug: relatedCollection
   }) : null, [relatedCollection, getEntityConfig]);
-  const columns = useMemo(() => {
+  const columnPreferences = useMemo(() => {
     if (!relatedCollection || !collectionConfig) {
       return [];
     }
@@ -53,40 +55,74 @@ export const QueryPresetsColumnField = ({
       permissions
     });
   }, [config, collectionConfig, relatedCollection, value, i18n, permissions]);
-  const reducedFields = useMemo(() => {
+  // Build the full column set from every field (active and inactive), mirroring the
+  // list view's `buildColumnState`, so columns absent from the saved preferences still
+  // appear in the selector. No cells are rendered here.
+  const columns = useMemo(() => {
     if (!collectionConfig?.fields) {
       return [];
     }
-    return reduceFieldsToOptions({
-      fieldPermissions: permissions?.collections?.[relatedCollection]?.fields ?? true,
-      fields: collectionConfig.fields,
-      i18n
+    const fieldPermissions = permissions?.collections?.[relatedCollection]?.fields ?? true;
+    let sortedFieldMap = flattenTopLevelFields(filterFieldsWithPermissions({
+      fieldPermissions,
+      fields: collectionConfig.fields
+    }), {
+      i18n,
+      keepPresentationalFields: true,
+      moveSubFieldsToTop: true
     });
-  }, [collectionConfig, i18n, permissions, relatedCollection]);
-  const accessorToLabel = useMemo(() => {
-    const map = {};
-    for (const f of reducedFields) {
-      map[String(f.fieldPath)] = f.label;
+    // Place the `id` field first, then the `useAsTitle` field, matching the list view.
+    const idFieldIndex = sortedFieldMap.findIndex(field => fieldIsID(field));
+    if (idFieldIndex > -1) {
+      sortedFieldMap.unshift(sortedFieldMap.splice(idFieldIndex, 1)[0]);
     }
-    return map;
-  }, [reducedFields]);
-  const pills = useMemo(() => columns.map((col, i) => ({
-    name: col.accessor,
-    key: `${relatedCollection}-${col.accessor}-${i}-${uuid}`,
-    Label: accessorToLabel[col.accessor] ?? col.accessor,
-    selected: col.active
-  })), [accessorToLabel, columns, relatedCollection, uuid]);
-  const currentColumns = value ?? columns;
-  const handleClick = React.useCallback(({
-    pill
-  }) => {
-    const newColumns = currentColumns.map(col_0 => col_0.accessor === pill.name ? {
-      ...col_0,
-      active: !col_0.active
-    } : col_0);
-    setValue(newColumns.length ? newColumns : undefined);
-  }, [currentColumns, setValue]);
-  if (!relatedCollection) {
+    const useAsTitle = collectionConfig.admin?.useAsTitle;
+    const useAsTitleFieldIndex = useAsTitle ? sortedFieldMap.findIndex(field_0 => 'name' in field_0 && field_0.name === useAsTitle) : -1;
+    if (useAsTitleFieldIndex > -1) {
+      sortedFieldMap.unshift(sortedFieldMap.splice(useAsTitleFieldIndex, 1)[0]);
+    }
+    sortedFieldMap = sortFieldMap(sortedFieldMap, columnPreferences);
+    const activeColumnsIndices = [];
+    return sortedFieldMap.reduce((acc, field_1, colIndex) => {
+      if (fieldIsHiddenOrDisabled(field_1) && !fieldIsID(field_1)) {
+        return acc;
+      }
+      // Groups render as their flattened subfields, not as a selectable column.
+      if (field_1.type === 'group') {
+        return acc;
+      }
+      const accessor = 'accessor' in field_1 ? field_1.accessor : 'name' in field_1 ? field_1.name : undefined;
+      if (!accessor) {
+        return acc;
+      }
+      const columnPref = columnPreferences.find(pref => pref.accessor === accessor);
+      const active = isColumnActive({
+        accessor,
+        activeColumnsIndices,
+        column: columnPref,
+        columns: columnPreferences
+      });
+      if (active) {
+        activeColumnsIndices.push(colIndex);
+      }
+      acc.push({
+        accessor,
+        active,
+        field: field_1,
+        Heading: null,
+        renderedCells: []
+      });
+      return acc;
+    }, []);
+  }, [collectionConfig, columnPreferences, i18n, permissions, relatedCollection]);
+  const handleChange = React.useCallback(newColumns => {
+    const preferences = newColumns.map(col => ({
+      accessor: col.accessor,
+      active: col.active
+    }));
+    setValue(preferences.length ? preferences : undefined);
+  }, [setValue]);
+  if (!relatedCollection || !collectionConfig) {
     return /*#__PURE__*/_jsxs("div", {
       className: "field-type query-preset-columns-field",
       children: [/*#__PURE__*/_jsx(FieldLabel, {
@@ -100,20 +136,13 @@ export const QueryPresetsColumnField = ({
       })]
     });
   }
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: "field-type query-preset-columns-field",
-    children: [/*#__PURE__*/_jsx(FieldLabel, {
-      as: "h3",
-      label: label,
-      path: path,
-      required: required
-    }), pills.length > 0 ? /*#__PURE__*/_jsx(PillSelector, {
-      onClick: handleClick,
-      pills: pills
-    }) : /*#__PURE__*/_jsx("p", {
-      className: "query-preset-columns-field__hint",
-      children: "No columns available for this collection."
-    })]
+    children: /*#__PURE__*/_jsx(ColumnSelectionButton, {
+      collectionSlug: relatedCollection,
+      columns: columns,
+      onChange: handleChange
+    })
   });
 };
 //# sourceMappingURL=index.js.map

package/dist/elements/QueryPresets/fields/ColumnsField/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useId","useMemo","FieldLabel","useField","useAuth","useConfig","useTranslation","getColumns","reduceFieldsToOptions","PillSelector","QueryPresetsColumnField","field","label","required","path","setValue","value","relatedCollectionField","relatedCollection","config","getEntityConfig","i18n","permissions","uuid","collectionConfig","collectionSlug","columns","clientConfig","reducedFields","fields","fieldPermissions","collections","accessorToLabel","map","f","String","fieldPath","pills","col","i","name","accessor","key","Label","selected","active","currentColumns","handleClick","useCallback","pill","newColumns","length","undefined","_jsxs","className","_jsx","as","onClick"],"sources":["../../../../../src/elements/QueryPresets/fields/ColumnsField/index.tsx"],"sourcesContent":["'use client'\nimport type { ColumnPreference, JSONFieldClientComponent } from 'payload'\n\nimport React, { useId, useMemo } from 'react'\n\nimport { FieldLabel } from '../../../../fields/FieldLabel/index.js'\nimport { useField } from '../../../../forms/useField/index.js'\nimport { useAuth } from '../../../../providers/Auth/index.js'\nimport { useConfig } from '../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { getColumns } from '../../../../utilities/getColumns.js'\nimport { reduceFieldsToOptions } from '../../../../utilities/reduceFieldsToOptions.js'\nimport { PillSelector, type SelectablePill } from '../../../PillSelector/index.js'\nimport './index.scss'\n\nexport const QueryPresetsColumnField: JSONFieldClientComponent = ({\n  field: { label, required },\n}) => {\n  const { path, setValue, value } = useField<ColumnPreference[]>()\n  const relatedCollectionField = useField({ path: 'relatedCollection' })\n  const relatedCollection = relatedCollectionField.value as string | undefined\n  const { config, getEntityConfig } = useConfig()\n  const { i18n } = useTranslation()\n  const { permissions } = useAuth()\n  const uuid = useId()\n\n  const collectionConfig = useMemo(\n    () => (relatedCollection ? getEntityConfig({ collectionSlug: relatedCollection }) : null),\n    [relatedCollection, getEntityConfig],\n  )\n\n  const columns = useMemo(() => {\n    if (!relatedCollection || !collectionConfig) {\n      return []\n    }\n    return getColumns({\n      clientConfig: config,\n      collectionConfig,\n      collectionSlug: relatedCollection,\n      columns: value ?? [],\n      i18n,\n      permissions,\n    })\n  }, [config, collectionConfig, relatedCollection, value, i18n, permissions])\n\n  const reducedFields = useMemo(() => {\n    if (!collectionConfig?.fields) {\n      return []\n    }\n    return reduceFieldsToOptions({\n      fieldPermissions: permissions?.collections?.[relatedCollection]?.fields ?? true,\n      fields: collectionConfig.fields,\n      i18n,\n    })\n  }, [collectionConfig, i18n, permissions, relatedCollection])\n\n  const accessorToLabel = useMemo(() => {\n    const map: Record<string, React.ReactNode> = {}\n    for (const f of reducedFields) {\n      map[String(f.fieldPath)] = f.label\n    }\n    return map\n  }, [reducedFields])\n\n  const pills: SelectablePill[] = useMemo(\n    () =>\n      columns.map((col, i) => ({\n        name: col.accessor,\n        key: `${relatedCollection}-${col.accessor}-${i}-${uuid}`,\n        Label: accessorToLabel[col.accessor] ?? col.accessor,\n        selected: col.active,\n      })),\n    [accessorToLabel, columns, relatedCollection, uuid],\n  )\n\n  const currentColumns = value ?? columns\n\n  const handleClick = React.useCallback(\n    ({ pill }: { pill: SelectablePill }) => {\n      const newColumns = currentColumns.map((col) =>\n        col.accessor === pill.name ? { ...col, active: !col.active } : col,\n      )\n      setValue(newColumns.length ? newColumns : undefined)\n    },\n    [currentColumns, setValue],\n  )\n\n  if (!relatedCollection) {\n    return (\n      <div className=\"field-type query-preset-columns-field\">\n        <FieldLabel as=\"h3\" label={label} path={path} required={required} />\n        <p className=\"query-preset-columns-field__hint\">\n          Select the related collection to configure columns.\n        </p>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"field-type query-preset-columns-field\">\n      <FieldLabel as=\"h3\" label={label} path={path} required={required} />\n      {pills.length > 0 ? (\n        <PillSelector onClick={handleClick} pills={pills} />\n      ) : (\n        <p className=\"query-preset-columns-field__hint\">\n          No columns available for this collection.\n        </p>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["fieldIsHiddenOrDisabled","fieldIsID","flattenTopLevelFields","React","useMemo","FieldLabel","useField","useAuth","useConfig","filterFieldsWithPermissions","isColumnActive","sortFieldMap","useTranslation","getColumns","ColumnSelectionButton","QueryPresetsColumnField","field","label","required","path","setValue","value","relatedCollectionField","relatedCollection","config","getEntityConfig","i18n","permissions","collectionConfig","collectionSlug","columnPreferences","clientConfig","columns","fields","fieldPermissions","collections","sortedFieldMap","keepPresentationalFields","moveSubFieldsToTop","idFieldIndex","findIndex","unshift","splice","useAsTitle","admin","useAsTitleFieldIndex","name","activeColumnsIndices","reduce","acc","colIndex","type","accessor","undefined","columnPref","find","pref","active","column","push","Heading","renderedCells","handleChange","useCallback","newColumns","preferences","map","col","length","_jsxs","className","_jsx","as","onChange"],"sources":["../../../../../src/elements/QueryPresets/fields/ColumnsField/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, Column, ColumnPreference, JSONFieldClientComponent } from 'payload'\n\nimport { fieldIsHiddenOrDisabled, fieldIsID, flattenTopLevelFields } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { FieldLabel } from '../../../../fields/FieldLabel/index.js'\nimport { useField } from '../../../../forms/useField/index.js'\nimport { useAuth } from '../../../../providers/Auth/index.js'\nimport { useConfig } from '../../../../providers/Config/index.js'\nimport { filterFieldsWithPermissions } from '../../../../providers/TableColumns/buildColumnState/filterFieldsWithPermissions.js'\nimport { isColumnActive } from '../../../../providers/TableColumns/buildColumnState/isColumnActive.js'\nimport { sortFieldMap } from '../../../../providers/TableColumns/buildColumnState/sortFieldMap.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { getColumns } from '../../../../utilities/getColumns.js'\nimport { ColumnSelectionButton } from '../../../ColumnSelection/index.js'\nimport '../fields.css'\n\nexport const QueryPresetsColumnField: JSONFieldClientComponent = ({\n  field: { label, required },\n}) => {\n  const { path, setValue, value } = useField<ColumnPreference[]>()\n  const relatedCollectionField = useField({ path: 'relatedCollection' })\n  const relatedCollection = relatedCollectionField.value as string | undefined\n  const { config, getEntityConfig } = useConfig()\n  const { i18n } = useTranslation()\n  const { permissions } = useAuth()\n\n  const collectionConfig = useMemo(\n    () => (relatedCollection ? getEntityConfig({ collectionSlug: relatedCollection }) : null),\n    [relatedCollection, getEntityConfig],\n  )\n\n  const columnPreferences = useMemo(() => {\n    if (!relatedCollection || !collectionConfig) {\n      return []\n    }\n    return getColumns({\n      clientConfig: config,\n      collectionConfig,\n      collectionSlug: relatedCollection,\n      columns: value ?? [],\n      i18n,\n      permissions,\n    })\n  }, [config, collectionConfig, relatedCollection, value, i18n, permissions])\n\n  // Build the full column set from every field (active and inactive), mirroring the\n  // list view's `buildColumnState`, so columns absent from the saved preferences still\n  // appear in the selector. No cells are rendered here.\n  const columns: Column[] = useMemo(() => {\n    if (!collectionConfig?.fields) {\n      return []\n    }\n\n    const fieldPermissions = permissions?.collections?.[relatedCollection]?.fields ?? true\n\n    let sortedFieldMap = flattenTopLevelFields(\n      filterFieldsWithPermissions({ fieldPermissions, fields: collectionConfig.fields }),\n      {\n        i18n,\n        keepPresentationalFields: true,\n        moveSubFieldsToTop: true,\n      },\n    ) as ClientField[]\n\n    // Place the `id` field first, then the `useAsTitle` field, matching the list view.\n    const idFieldIndex = sortedFieldMap.findIndex((field) => fieldIsID(field))\n    if (idFieldIndex > -1) {\n      sortedFieldMap.unshift(sortedFieldMap.splice(idFieldIndex, 1)[0])\n    }\n\n    const useAsTitle = collectionConfig.admin?.useAsTitle\n    const useAsTitleFieldIndex = useAsTitle\n      ? sortedFieldMap.findIndex((field) => 'name' in field && field.name === useAsTitle)\n      : -1\n    if (useAsTitleFieldIndex > -1) {\n      sortedFieldMap.unshift(sortedFieldMap.splice(useAsTitleFieldIndex, 1)[0])\n    }\n\n    sortedFieldMap = sortFieldMap(sortedFieldMap, columnPreferences)\n\n    const activeColumnsIndices: number[] = []\n\n    return sortedFieldMap.reduce<Column[]>((acc, field, colIndex) => {\n      if (fieldIsHiddenOrDisabled(field) && !fieldIsID(field)) {\n        return acc\n      }\n\n      // Groups render as their flattened subfields, not as a selectable column.\n      if (field.type === 'group') {\n        return acc\n      }\n\n      const accessor =\n        'accessor' in field\n          ? (field as { accessor: string }).accessor\n          : 'name' in field\n            ? field.name\n            : undefined\n\n      if (!accessor) {\n        return acc\n      }\n\n      const columnPref = columnPreferences.find((pref) => pref.accessor === accessor)\n      const active = isColumnActive({\n        accessor,\n        activeColumnsIndices,\n        column: columnPref,\n        columns: columnPreferences,\n      })\n\n      if (active) {\n        activeColumnsIndices.push(colIndex)\n      }\n\n      acc.push({\n        accessor,\n        active,\n        field,\n        Heading: null,\n        renderedCells: [],\n      })\n\n      return acc\n    }, [])\n  }, [collectionConfig, columnPreferences, i18n, permissions, relatedCollection])\n\n  const handleChange = React.useCallback(\n    (newColumns: Column[]) => {\n      const preferences: ColumnPreference[] = newColumns.map((col) => ({\n        accessor: col.accessor,\n        active: col.active,\n      }))\n      setValue(preferences.length ? preferences : undefined)\n    },\n    [setValue],\n  )\n\n  if (!relatedCollection || !collectionConfig) {\n    return (\n      <div className=\"field-type query-preset-columns-field\">\n        <FieldLabel as=\"h3\" label={label} path={path} required={required} />\n        <p className=\"query-preset-columns-field__hint\">\n          Select the related collection to configure columns.\n        </p>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"field-type query-preset-columns-field\">\n      <ColumnSelectionButton\n        collectionSlug={relatedCollection}\n        columns={columns}\n        onChange={handleChange}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/QueryPresets/fields/GroupByField/index.d.ts

@@ -1,4 +1,4 @@
 import type { TextFieldClientComponent } from 'payload';
-import './index.scss';
+import '../fields.css';
 export declare const QueryPresetsGroupByField: TextFieldClientComponent;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/QueryPresets/fields/GroupByField/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/QueryPresets/fields/GroupByField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAQvD,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,wBAAwB,EAAE,wBAuCtC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/QueryPresets/fields/GroupByField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAQvD,OAAO,eAAe,CAAA;AAEtB,eAAO,MAAM,wBAAwB,EAAE,wBAkCtC,CAAA"}

package/dist/elements/QueryPresets/fields/GroupByField/index.js

@@ -5,8 +5,8 @@ import React, { useMemo } from 'react';
 import { FieldLabel } from '../../../../fields/FieldLabel/index.js';
 import { useField } from '../../../../forms/useField/index.js';
 import { useConfig } from '../../../../providers/Config/index.js';
-import { GroupByBuilder } from '../../../GroupByBuilder/index.js';
-import './index.scss';
+import { GroupByButton } from '../../../GroupBy/index.js';
+import '../fields.css';
 export const QueryPresetsGroupByField = ({
   field: {
     label,
@@ -23,16 +23,12 @@ export const QueryPresetsGroupByField = ({
   });
   const relatedCollection = relatedCollectionField.value;
   const {
-    config
+    getEntityConfig
   } = useConfig();
-  const collectionConfig = useMemo(() => {
-    if (!relatedCollection) {
-      return null;
-    }
-    return config.collections?.find(col => col.slug === relatedCollection);
-  }, [relatedCollection, config.collections]);
-  const fields = collectionConfig?.fields ?? [];
-  if (!relatedCollection) {
+  const collectionConfig = useMemo(() => relatedCollection ? getEntityConfig({
+    collectionSlug: relatedCollection
+  }) : null, [relatedCollection, getEntityConfig]);
+  if (!relatedCollection || !collectionConfig) {
     return /*#__PURE__*/_jsxs("div", {
       className: "field-type query-preset-group-by-field",
       children: [/*#__PURE__*/_jsx(FieldLabel, {
@@ -46,19 +42,14 @@ export const QueryPresetsGroupByField = ({
       })]
     });
   }
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: "field-type query-preset-group-by-field",
-    children: [/*#__PURE__*/_jsx(FieldLabel, {
-      as: "h3",
-      label: label,
-      path: path,
-      required: required
-    }), /*#__PURE__*/_jsx(GroupByBuilder, {
+    children: /*#__PURE__*/_jsx(GroupByButton, {
       collectionSlug: relatedCollection,
-      fields: fields,
+      fields: collectionConfig.fields,
       onChange: groupBy => setValue(groupBy || null),
-      value: value ?? undefined
-    })]
+      value: value ?? ''
+    })
   });
 };
 //# sourceMappingURL=index.js.map

package/dist/elements/QueryPresets/fields/GroupByField/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","FieldLabel","useField","useConfig","GroupByBuilder","QueryPresetsGroupByField","field","label","required","path","setValue","value","relatedCollectionField","relatedCollection","config","collectionConfig","collections","find","col","slug","fields","_jsxs","className","_jsx","as","collectionSlug","onChange","groupBy","undefined"],"sources":["../../../../../src/elements/QueryPresets/fields/GroupByField/index.tsx"],"sourcesContent":["'use client'\nimport type { TextFieldClientComponent } from 'payload'\n\nimport React, { useMemo } from 'react'\n\nimport { FieldLabel } from '../../../../fields/FieldLabel/index.js'\nimport { useField } from '../../../../forms/useField/index.js'\nimport { useConfig } from '../../../../providers/Config/index.js'\nimport { GroupByBuilder } from '../../../GroupByBuilder/index.js'\nimport './index.scss'\n\nexport const QueryPresetsGroupByField: TextFieldClientComponent = ({\n  field: { label, required },\n}) => {\n  const { path, setValue, value } = useField<string>()\n  const relatedCollectionField = useField({ path: 'relatedCollection' })\n  const relatedCollection = relatedCollectionField.value as string | undefined\n  const { config } = useConfig()\n\n  const collectionConfig = useMemo(() => {\n    if (!relatedCollection) {\n      return null\n    }\n    return config.collections?.find((col) => col.slug === relatedCollection)\n  }, [relatedCollection, config.collections])\n\n  const fields = collectionConfig?.fields ?? []\n\n  if (!relatedCollection) {\n    return (\n      <div className=\"field-type query-preset-group-by-field\">\n        <FieldLabel as=\"h3\" label={label} path={path} required={required} />\n        <p className=\"query-preset-group-by-field__hint\">\n          Select the related collection to configure group by.\n        </p>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"field-type query-preset-group-by-field\">\n      <FieldLabel as=\"h3\" label={label} path={path} required={required} />\n      <GroupByBuilder\n        collectionSlug={relatedCollection}\n        fields={fields}\n        onChange={(groupBy) => setValue(groupBy || null)}\n        value={value ?? undefined}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,IAASC,OAAO,QAAQ;AAE/B,SAASC,UAAU,QAAQ;AAC3B,SAASC,QAAQ,QAAQ;AACzB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,OAAO,MAAMC,wBAAA,GAAqDA,CAAC;EACjEC,KAAA,EAAO;IAAEC,KAAK;IAAEC;EAAQ;AAAE,CAC3B;EACC,MAAM;IAAEC,IAAI;IAAEC,QAAQ;IAAEC;EAAK,CAAE,GAAGT,QAAA;EAClC,MAAMU,sBAAA,GAAyBV,QAAA,CAAS;IAAEO,IAAA,EAAM;EAAoB;EACpE,MAAMI,iBAAA,GAAoBD,sBAAA,CAAuBD,KAAK;EACtD,MAAM;IAAEG;EAAM,CAAE,GAAGX,SAAA;EAEnB,MAAMY,gBAAA,GAAmBf,OAAA,CAAQ;IAC/B,IAAI,CAACa,iBAAA,EAAmB;MACtB,OAAO;IACT;IACA,OAAOC,MAAA,CAAOE,WAAW,EAAEC,IAAA,CAAMC,GAAA,IAAQA,GAAA,CAAIC,IAAI,KAAKN,iBAAA;EACxD,GAAG,CAACA,iBAAA,EAAmBC,MAAA,CAAOE,WAAW,CAAC;EAE1C,MAAMI,MAAA,GAASL,gBAAA,EAAkBK,MAAA,IAAU,EAAE;EAE7C,IAAI,CAACP,iBAAA,EAAmB;IACtB,oBACEQ,KAAA,CAAC;MAAIC,SAAA,EAAU;8BACbC,IAAA,CAACtB,UAAA;QAAWuB,EAAA,EAAG;QAAKjB,KAAA,EAAOA,KAAA;QAAOE,IAAA,EAAMA,IAAA;QAAMD,QAAA,EAAUA;uBACxDe,IAAA,CAAC;QAAED,SAAA,EAAU;kBAAoC;;;EAKvD;EAEA,oBACED,KAAA,CAAC;IAAIC,SAAA,EAAU;4BACbC,IAAA,CAACtB,UAAA;MAAWuB,EAAA,EAAG;MAAKjB,KAAA,EAAOA,KAAA;MAAOE,IAAA,EAAMA,IAAA;MAAMD,QAAA,EAAUA;qBACxDe,IAAA,CAACnB,cAAA;MACCqB,cAAA,EAAgBZ,iBAAA;MAChBO,MAAA,EAAQA,MAAA;MACRM,QAAA,EAAWC,OAAA,IAAYjB,QAAA,CAASiB,OAAA,IAAW;MAC3ChB,KAAA,EAAOA,KAAA,IAASiB;;;AAIxB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","FieldLabel","useField","useConfig","GroupByButton","QueryPresetsGroupByField","field","label","required","path","setValue","value","relatedCollectionField","relatedCollection","getEntityConfig","collectionConfig","collectionSlug","_jsxs","className","_jsx","as","fields","onChange","groupBy"],"sources":["../../../../../src/elements/QueryPresets/fields/GroupByField/index.tsx"],"sourcesContent":["'use client'\nimport type { TextFieldClientComponent } from 'payload'\n\nimport React, { useMemo } from 'react'\n\nimport { FieldLabel } from '../../../../fields/FieldLabel/index.js'\nimport { useField } from '../../../../forms/useField/index.js'\nimport { useConfig } from '../../../../providers/Config/index.js'\nimport { GroupByButton } from '../../../GroupBy/index.js'\nimport '../fields.css'\n\nexport const QueryPresetsGroupByField: TextFieldClientComponent = ({\n  field: { label, required },\n}) => {\n  const { path, setValue, value } = useField<string>()\n  const relatedCollectionField = useField({ path: 'relatedCollection' })\n  const relatedCollection = relatedCollectionField.value as string | undefined\n  const { getEntityConfig } = useConfig()\n\n  const collectionConfig = useMemo(\n    () => (relatedCollection ? getEntityConfig({ collectionSlug: relatedCollection }) : null),\n    [relatedCollection, getEntityConfig],\n  )\n\n  if (!relatedCollection || !collectionConfig) {\n    return (\n      <div className=\"field-type query-preset-group-by-field\">\n        <FieldLabel as=\"h3\" label={label} path={path} required={required} />\n        <p className=\"query-preset-group-by-field__hint\">\n          Select the related collection to configure group by.\n        </p>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"field-type query-preset-group-by-field\">\n      <GroupByButton\n        collectionSlug={relatedCollection}\n        fields={collectionConfig.fields}\n        onChange={(groupBy) => setValue(groupBy || null)}\n        value={value ?? ''}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,IAASC,OAAO,QAAQ;AAE/B,SAASC,UAAU,QAAQ;AAC3B,SAASC,QAAQ,QAAQ;AACzB,SAASC,SAAS,QAAQ;AAC1B,SAASC,aAAa,QAAQ;AAC9B,OAAO;AAEP,OAAO,MAAMC,wBAAA,GAAqDA,CAAC;EACjEC,KAAA,EAAO;IAAEC,KAAK;IAAEC;EAAQ;AAAE,CAC3B;EACC,MAAM;IAAEC,IAAI;IAAEC,QAAQ;IAAEC;EAAK,CAAE,GAAGT,QAAA;EAClC,MAAMU,sBAAA,GAAyBV,QAAA,CAAS;IAAEO,IAAA,EAAM;EAAoB;EACpE,MAAMI,iBAAA,GAAoBD,sBAAA,CAAuBD,KAAK;EACtD,MAAM;IAAEG;EAAe,CAAE,GAAGX,SAAA;EAE5B,MAAMY,gBAAA,GAAmBf,OAAA,CACvB,MAAOa,iBAAA,GAAoBC,eAAA,CAAgB;IAAEE,cAAA,EAAgBH;EAAkB,KAAK,MACpF,CAACA,iBAAA,EAAmBC,eAAA,CAAgB;EAGtC,IAAI,CAACD,iBAAA,IAAqB,CAACE,gBAAA,EAAkB;IAC3C,oBACEE,KAAA,CAAC;MAAIC,SAAA,EAAU;8BACbC,IAAA,CAAClB,UAAA;QAAWmB,EAAA,EAAG;QAAKb,KAAA,EAAOA,KAAA;QAAOE,IAAA,EAAMA,IAAA;QAAMD,QAAA,EAAUA;uBACxDW,IAAA,CAAC;QAAED,SAAA,EAAU;kBAAoC;;;EAKvD;EAEA,oBACEC,IAAA,CAAC;IAAID,SAAA,EAAU;cACb,aAAAC,IAAA,CAACf,aAAA;MACCY,cAAA,EAAgBH,iBAAA;MAChBQ,MAAA,EAAQN,gBAAA,CAAiBM,MAAM;MAC/BC,QAAA,EAAWC,OAAA,IAAYb,QAAA,CAASa,OAAA,IAAW;MAC3CZ,KAAA,EAAOA,KAAA,IAAS;;;AAIxB","ignoreList":[]}

package/dist/elements/QueryPresets/fields/Heading/index.css

@@ -0,0 +1,52 @@
+@layer payload-default {
+  .query-preset-heading {
+    margin: var(--spacer-4) 0 var(--spacer-2-5);
+    color: var(--color-text);
+    font-family: var(--text-heading-medium-font-family);
+    font-size: var(--text-heading-medium-font-size);
+    font-weight: var(--text-heading-medium-font-weight);
+    line-height: var(--text-heading-medium-line-height);
+  }
+
+  .field-type.row.query-preset-controls-row {
+    /* Match the standalone headings' top spacing so sections stay aligned. */
+    margin-top: var(--spacer-4);
+
+    .row__fields {
+      align-items: center;
+      column-gap: var(--spacer-2);
+      flex-wrap: nowrap;
+
+      /* Size controls to their content and drop Row's inline margins so the last
+         one aligns with the right edge. Matches Row's `:has` selector to win on
+         mobile, where Row's media-query reset has too little specificity. */
+      &:has(> *:nth-child(2)) {
+        margin-inline: 0;
+
+        > * {
+          flex: 0 0 auto;
+          margin-inline: 0;
+          /* Clamp against Row's mobile `width: 100% !important`. */
+          max-width: fit-content;
+        }
+      }
+
+      /* Stay in a row on mobile, where Row otherwise stacks into a column. */
+      @media (max-width: 1024px) {
+        flex-direction: row;
+      }
+    }
+
+    /* The heading absorbs the free space to push the controls to the right edge;
+       the row owns the top spacing, so collapse the heading's own block margins. */
+    .row__fields:has(> *:nth-child(2)) > .query-preset-heading {
+      margin-block: 0;
+      margin-inline-end: auto;
+    }
+  }
+
+  /* The Access heading provides the separation, so hide the group's top border. */
+  .query-preset-access-group.group-field--top-level::before {
+    display: none;
+  }
+}

package/dist/elements/QueryPresets/fields/Heading/index.d.ts

@@ -0,0 +1,7 @@
+import type { ClientTranslationKeys } from '@payloadcms/translations';
+import React from 'react';
+import './index.css';
+export declare const QueryPresetsHeading: React.FC<{
+    i18nKey?: ClientTranslationKeys;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/QueryPresets/fields/Heading/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/QueryPresets/fields/Heading/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA;AAErE,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,OAAO,CAAC,EAAE,qBAAqB,CAAA;CAAE,CAM7E,CAAA"}

package/dist/elements/QueryPresets/fields/Heading/index.js

@@ -0,0 +1,31 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useTranslation } from '../../../../providers/Translation/index.js';
+import './index.css';
+export const QueryPresetsHeading = t0 => {
+  const $ = _c(3);
+  const {
+    i18nKey: t1
+  } = t0;
+  const i18nKey = t1 === undefined ? "general:presets" : t1;
+  const {
+    t
+  } = useTranslation();
+  let t2;
+  if ($[0] !== i18nKey || $[1] !== t) {
+    t2 = _jsx("h3", {
+      className: "query-preset-heading",
+      children: t(i18nKey)
+    });
+    $[0] = i18nKey;
+    $[1] = t;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/QueryPresets/fields/Heading/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","QueryPresetsHeading","t0","$","i18nKey","t1","undefined","t","t2","_jsx","className","children"],"sources":["../../../../../src/elements/QueryPresets/fields/Heading/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientTranslationKeys } from '@payloadcms/translations'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport './index.css'\n\nexport const QueryPresetsHeading: React.FC<{ i18nKey?: ClientTranslationKeys }> = ({\n  i18nKey = 'general:presets',\n}) => {\n  const { t } = useTranslation()\n\n  return <h3 className=\"query-preset-heading\">{t(i18nKey)}</h3>\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,OAAO,MAAMC,mBAAA,GAAqEC,EAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EAAC;IAAAM,OAAA,EAAAC;EAAA,IAAAH,EAElF;EADC,MAAAE,OAAA,GAAAC,EAA2B,KAAAC,SAAA,GAAjB,iBAAiB,GAA3BD,EAA2B;EAE3B;IAAAE;EAAA,IAAcP,cAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAL,CAAA,QAAAC,OAAA,IAAAD,CAAA,QAAAI,CAAA;IAEPC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAa;MAAAC,QAAA,EAAwBJ,CAAA,CAAEH,OAAA;IAAA,C;;;;;;;SAAxCI,E;CACT","ignoreList":[]}

package/dist/elements/QueryPresets/fields/WhereField/index.d.ts

@@ -1,4 +1,4 @@
 import type { JSONFieldClientComponent } from 'payload';
-import './index.scss';
+import '../fields.css';
 export declare const QueryPresetsWhereField: JSONFieldClientComponent;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/QueryPresets/fields/WhereField/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/QueryPresets/fields/WhereField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAS,MAAM,SAAS,CAAA;AAO9D,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,sBAAsB,EAAE,wBA4BpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/QueryPresets/fields/WhereField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAS,MAAM,SAAS,CAAA;AAQ9D,OAAO,eAAe,CAAA;AAEtB,eAAO,MAAM,sBAAsB,EAAE,wBA+BpC,CAAA"}

package/dist/elements/QueryPresets/fields/WhereField/index.js

@@ -5,10 +5,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { FieldLabel } from '../../../../fields/FieldLabel/index.js';
 import { useField } from '../../../../forms/useField/index.js';
+import { useConfig } from '../../../../providers/Config/index.js';
 import { WhereBuilder } from '../../../WhereBuilder/index.js';
-import './index.scss';
+import '../fields.css';
 export const QueryPresetsWhereField = t0 => {
-  const $ = _c(14);
+  const $ = _c(12);
   const {
     field: t1
   } = t0;
@@ -32,6 +33,9 @@ export const QueryPresetsWhereField = t0 => {
   }
   const relatedCollectionField = useField(t2);
   const relatedCollection = relatedCollectionField.value;
+  const {
+    getEntityConfig
+  } = useConfig();
   if (!relatedCollection) {
     let t3;
     if ($[1] !== label || $[2] !== path || $[3] !== required) {
@@ -57,37 +61,34 @@ export const QueryPresetsWhereField = t0 => {
     return t3;
   }
   let t3;
-  if ($[5] !== label || $[6] !== path || $[7] !== relatedCollection || $[8] !== required || $[9] !== setValue || $[10] !== value) {
+  if ($[5] !== getEntityConfig || $[6] !== relatedCollection || $[7] !== setValue || $[8] !== value) {
+    const collectionConfig = getEntityConfig({
+      collectionSlug: relatedCollection
+    });
     let t4;
-    if ($[12] !== setValue) {
+    if ($[10] !== setValue) {
       t4 = where => setValue(where);
-      $[12] = setValue;
-      $[13] = t4;
+      $[10] = setValue;
+      $[11] = t4;
     } else {
-      t4 = $[13];
+      t4 = $[11];
     }
-    t3 = _jsxs("div", {
+    t3 = _jsx("div", {
       className: "field-type query-preset-where-field",
-      children: [_jsx(FieldLabel, {
-        as: "h3",
-        label,
-        path,
-        required
-      }), _jsx(WhereBuilder, {
+      children: _jsx(WhereBuilder, {
         collectionSlug: relatedCollection,
+        fields: collectionConfig?.fields ?? [],
         onChange: t4,
         value: value ?? undefined
-      })]
+      })
     });
-    $[5] = label;
-    $[6] = path;
-    $[7] = relatedCollection;
-    $[8] = required;
-    $[9] = setValue;
-    $[10] = value;
-    $[11] = t3;
+    $[5] = getEntityConfig;
+    $[6] = relatedCollection;
+    $[7] = setValue;
+    $[8] = value;
+    $[9] = t3;
   } else {
-    t3 = $[11];
+    t3 = $[9];
   }
   return t3;
 };

package/dist/elements/QueryPresets/fields/WhereField/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","FieldLabel","useField","WhereBuilder","QueryPresetsWhereField","t0","$","field","t1","label","required","path","setValue","value","t2","Symbol","for","relatedCollectionField","relatedCollection","t3","_jsxs","className","children","_jsx","as","t4","where","collectionSlug","onChange","undefined"],"sources":["../../../../../src/elements/QueryPresets/fields/WhereField/index.tsx"],"sourcesContent":["'use client'\nimport type { JSONFieldClientComponent, Where } from 'payload'\n\nimport React from 'react'\n\nimport { FieldLabel } from '../../../../fields/FieldLabel/index.js'\nimport { useField } from '../../../../forms/useField/index.js'\nimport { WhereBuilder } from '../../../WhereBuilder/index.js'\nimport './index.scss'\n\nexport const QueryPresetsWhereField: JSONFieldClientComponent = ({\n  field: { label, required },\n}) => {\n  const { path, setValue, value } = useField<Where>()\n  const relatedCollectionField = useField({ path: 'relatedCollection' })\n  const relatedCollection = relatedCollectionField.value as string | undefined\n\n  if (!relatedCollection) {\n    return (\n      <div className=\"field-type query-preset-where-field\">\n        <FieldLabel as=\"h3\" label={label} path={path} required={required} />\n        <p className=\"query-preset-where-field__hint\">\n          Select the related collection to configure filters.\n        </p>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"field-type query-preset-where-field\">\n      <FieldLabel as=\"h3\" label={label} path={path} required={required} />\n      <WhereBuilder\n        collectionSlug={relatedCollection}\n        onChange={(where) => setValue(where)}\n        value={value ?? undefined}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,UAAU,QAAQ;AAC3B,SAASC,QAAQ,QAAQ;AACzB,SAASC,YAAY,QAAQ;AAC7B,OAAO;AAEP,OAAO,MAAMC,sBAAA,GAAmDC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,KAAA,EAAAC;EAAA,IAAAH,EAEhE;EADQ;IAAAI,KAAA;IAAAC;EAAA,IAAAF,EAAmB;EAE1B;IAAAG,IAAA;IAAAC,QAAA;IAAAC;EAAA,IAAkCX,QAAA;EAAA,IAAAY,EAAA;EAAA,IAAAR,CAAA,QAAAS,MAAA,CAAAC,GAAA;IACMF,EAAA;MAAAH,IAAA,EAAQ;IAAA;IAAoBL,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAApE,MAAAW,sBAAA,GAA+Bf,QAAA,CAASY,EAA4B;EACpE,MAAAI,iBAAA,GAA0BD,sBAAA,CAAAJ,KAAA;EAA4B,KAEjDK,iBAAA;IAAA,IAAAC,EAAA;IAAA,IAAAb,CAAA,QAAAG,KAAA,IAAAH,CAAA,QAAAK,IAAA,IAAAL,CAAA,QAAAI,QAAA;MAEDS,EAAA,GAAAC,KAAA,CAAC;QAAAC,SAAA,EAAc;QAAAC,QAAA,GACbC,IAAA,CAAAtB,UAAA;UAAAuB,EAAA,EAAe;UAAAf,KAAA;UAAAE,IAAA;UAAAD;QAAA,C,GACfa,IAAA,CAAC;UAAAF,SAAA,EAAY;UAAAC,QAAA,EAAiC;QAAA,C;;;;;;;;;WAFhDH,E;;;;;;MAcYM,EAAA,GAAAC,KAAA,IAAWd,QAAA,CAASc,KAAA;MAAApB,CAAA,OAAAM,QAAA;MAAAN,CAAA,OAAAmB,EAAA;IAAA;MAAAA,EAAA,GAAAnB,CAAA;IAAA;IAJlCa,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAc;MAAAC,QAAA,GACbC,IAAA,CAAAtB,UAAA;QAAAuB,EAAA,EAAe;QAAAf,KAAA;QAAAE,IAAA;QAAAD;MAAA,C,GACfa,IAAA,CAAApB,YAAA;QAAAwB,cAAA,EACkBT,iBAAA;QAAAU,QAAA,EACNH,EAAoB;QAAAZ,KAAA,EACvBA,KAAA,IAAAgB;MAAS,C;;;;;;;;;;;;SALpBV,E;CASJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","FieldLabel","useField","useConfig","WhereBuilder","QueryPresetsWhereField","t0","$","field","t1","label","required","path","setValue","value","t2","Symbol","for","relatedCollectionField","relatedCollection","getEntityConfig","t3","_jsxs","className","children","_jsx","as","collectionConfig","collectionSlug","t4","where","fields","onChange","undefined"],"sources":["../../../../../src/elements/QueryPresets/fields/WhereField/index.tsx"],"sourcesContent":["'use client'\nimport type { JSONFieldClientComponent, Where } from 'payload'\n\nimport React from 'react'\n\nimport { FieldLabel } from '../../../../fields/FieldLabel/index.js'\nimport { useField } from '../../../../forms/useField/index.js'\nimport { useConfig } from '../../../../providers/Config/index.js'\nimport { WhereBuilder } from '../../../WhereBuilder/index.js'\nimport '../fields.css'\n\nexport const QueryPresetsWhereField: JSONFieldClientComponent = ({\n  field: { label, required },\n}) => {\n  const { path, setValue, value } = useField<Where>()\n  const relatedCollectionField = useField({ path: 'relatedCollection' })\n  const relatedCollection = relatedCollectionField.value as string | undefined\n  const { getEntityConfig } = useConfig()\n\n  if (!relatedCollection) {\n    return (\n      <div className=\"field-type query-preset-where-field\">\n        <FieldLabel as=\"h3\" label={label} path={path} required={required} />\n        <p className=\"query-preset-where-field__hint\">\n          Select the related collection to configure filters.\n        </p>\n      </div>\n    )\n  }\n\n  const collectionConfig = getEntityConfig({ collectionSlug: relatedCollection })\n\n  return (\n    <div className=\"field-type query-preset-where-field\">\n      <WhereBuilder\n        collectionSlug={relatedCollection}\n        fields={collectionConfig?.fields ?? []}\n        onChange={(where) => setValue(where)}\n        value={value ?? undefined}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,UAAU,QAAQ;AAC3B,SAASC,QAAQ,QAAQ;AACzB,SAASC,SAAS,QAAQ;AAC1B,SAASC,YAAY,QAAQ;AAC7B,OAAO;AAEP,OAAO,MAAMC,sBAAA,GAAmDC,EAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EAAC;IAAAS,KAAA,EAAAC;EAAA,IAAAH,EAEhE;EADQ;IAAAI,KAAA;IAAAC;EAAA,IAAAF,EAAmB;EAE1B;IAAAG,IAAA;IAAAC,QAAA;IAAAC;EAAA,IAAkCZ,QAAA;EAAA,IAAAa,EAAA;EAAA,IAAAR,CAAA,QAAAS,MAAA,CAAAC,GAAA;IACMF,EAAA;MAAAH,IAAA,EAAQ;IAAA;IAAoBL,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAApE,MAAAW,sBAAA,GAA+BhB,QAAA,CAASa,EAA4B;EACpE,MAAAI,iBAAA,GAA0BD,sBAAA,CAAAJ,KAAA;EAC1B;IAAAM;EAAA,IAA4BjB,SAAA;EAAA,KAEvBgB,iBAAA;IAAA,IAAAE,EAAA;IAAA,IAAAd,CAAA,QAAAG,KAAA,IAAAH,CAAA,QAAAK,IAAA,IAAAL,CAAA,QAAAI,QAAA;MAEDU,EAAA,GAAAC,KAAA,CAAC;QAAAC,SAAA,EAAc;QAAAC,QAAA,GACbC,IAAA,CAAAxB,UAAA;UAAAyB,EAAA,EAAe;UAAAhB,KAAA;UAAAE,IAAA;UAAAD;QAAA,C,GACfc,IAAA,CAAC;UAAAF,SAAA,EAAY;UAAAC,QAAA,EAAiC;QAAA,C;;;;;;;;;WAFhDH,E;;;;IASJ,MAAAM,gBAAA,GAAyBP,eAAA;MAAAQ,cAAA,EAAkCT;IAAA,CAAkB;IAAA,IAAAU,EAAA;IAAA,IAAAtB,CAAA,SAAAM,QAAA;MAO7DgB,EAAA,GAAAC,KAAA,IAAWjB,QAAA,CAASiB,KAAA;MAAAvB,CAAA,OAAAM,QAAA;MAAAN,CAAA,OAAAsB,EAAA;IAAA;MAAAA,EAAA,GAAAtB,CAAA;IAAA;IAJlCc,EAAA,GAAAI,IAAA,CAAC;MAAAF,SAAA,EAAc;MAAAC,QAAA,EACbC,IAAA,CAAArB,YAAA;QAAAwB,cAAA,EACkBT,iBAAA;QAAAY,MAAA,EACRJ,gBAAA,EAAAI,MAAA,MAA8B;QAAAC,QAAA,EAC5BH,EAAoB;QAAAf,KAAA,EACvBA,KAAA,IAAAmB;MAAS,C;;;;;;;;;;SALpBZ,E;CASJ","ignoreList":[]}

package/dist/elements/QueryPresets/fields/fields.css

@@ -0,0 +1,23 @@
+@layer payload-default {
+  .query-preset-columns-field,
+  .query-preset-group-by-field,
+  .query-preset-where-field {
+    .field-label {
+      margin-bottom: var(--spacer-2);
+    }
+  }
+
+  .query-preset-columns-field__hint,
+  .query-preset-group-by-field__hint,
+  .query-preset-where-field__hint {
+    margin: 0;
+    color: var(--color-text-secondary);
+  }
+
+  /* The builder sits inline within the form here, so drop the list-panel chrome
+     (border + gutter padding) it carries in the list view. */
+  .query-preset-where-field .where-builder {
+    padding: 0;
+    border-bottom: none;
+  }
+}

package/dist/elements/ReactSelect/DropdownIndicator/index.css

@@ -12,7 +12,7 @@
 
   .dropdown-indicator__icon {
     .stroke {
-      stroke-width: 1px;
+      stroke-width: var(--stroke-width-small);
     }
   }
 }

package/dist/elements/RelationshipTable/AddNewButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddNewButton.d.ts","sourceRoot":"","sources":["../../../src/elements/RelationshipTable/AddNewButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,KAAK,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAI3E,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAK1E,eAAO,MAAM,YAAY,GAAI,uHAY1B;IACD,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAA;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,sBAAsB,EAAE,CAAA;IACrC,IAAI,EAAE,UAAU,CAAA;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,kBAAkB,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9C,WAAW,EAAE,oBAAoB,CAAA;IACjC,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAC9B,gCA0DA,CAAA"}
+{"version":3,"file":"AddNewButton.d.ts","sourceRoot":"","sources":["../../../src/elements/RelationshipTable/AddNewButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,KAAK,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAI3E,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAK1E,eAAO,MAAM,YAAY,GAAI,uHAY1B;IACD,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAA;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,sBAAsB,EAAE,CAAA;IACrC,IAAI,EAAE,UAAU,CAAA;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,kBAAkB,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9C,WAAW,EAAE,oBAAoB,CAAA;IACjC,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAC9B,gCAyDA,CAAA"}

package/dist/elements/RelationshipTable/AddNewButton.js

@@ -56,8 +56,7 @@ export const AddNewButton = ({
           }
           return null;
         })
-      }),
-      size: "medium"
+      })
     })
   });
 };

package/dist/elements/RelationshipTable/AddNewButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddNewButton.js","names":["getTranslation","Button","Popup","PopupList","AddNewButton","allowCreate","baseClass","buttonStyle","className","collections","i18n","icon","label","onClick","permissions","relationTo","isPolymorphic","Array","isArray","_jsx","filter","Boolean","join","button","buttonType","horizontalAlign","render","close","closePopup","ButtonGroup","map","relatedCollection","create","find","each","slug","labels","singular","size"],"sources":["../../../src/elements/RelationshipTable/AddNewButton.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\nimport type { ClientCollectionConfig, SanitizedPermissions } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\n\nimport type { Props as ButtonProps } from '../../elements/Button/types.js'\n\nimport { Button } from '../../elements/Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\n\nexport const AddNewButton = ({\n  allowCreate,\n  baseClass,\n  buttonStyle,\n  className,\n  collections,\n  i18n,\n  icon,\n  label,\n  onClick,\n  permissions,\n  relationTo,\n}: {\n  allowCreate: boolean\n  baseClass: string\n  buttonStyle?: ButtonProps['buttonStyle']\n  className?: string\n  collections: ClientCollectionConfig[]\n  i18n: I18nClient\n  icon?: ButtonProps['icon']\n  label: string\n  onClick: (selectedCollection?: string) => void\n  permissions: SanitizedPermissions\n  relationTo: string | string[]\n}) => {\n  if (!allowCreate) {\n    return null\n  }\n\n  const isPolymorphic = Array.isArray(relationTo)\n\n  if (!isPolymorphic) {\n    return (\n      <Button\n        buttonStyle={buttonStyle}\n        className={[className, 'doc-drawer__toggler'].filter(Boolean).join(' ')}\n        onClick={() => onClick()}\n      >\n        {label}\n      </Button>\n    )\n  }\n\n  return (\n    <div className={`${baseClass}__add-new-polymorphic-wrapper`}>\n      <Popup\n        button={\n          <Button buttonStyle={buttonStyle} className={className} icon={icon}>\n            {label}\n          </Button>\n        }\n        buttonType=\"custom\"\n        horizontalAlign=\"center\"\n        render={({ close: closePopup }) => (\n          <PopupList.ButtonGroup>\n            {relationTo.map((relatedCollection) => {\n              if (permissions.collections[relatedCollection]?.create) {\n                return (\n                  <PopupList.Button\n                    className={`${baseClass}__relation-button--${relatedCollection}`}\n                    key={relatedCollection}\n                    onClick={() => {\n                      closePopup()\n                      onClick(relatedCollection)\n                    }}\n                  >\n                    {getTranslation(\n                      collections.find((each) => each.slug === relatedCollection).labels.singular,\n                      i18n,\n                    )}\n                  </PopupList.Button>\n                )\n              }\n\n              return null\n            })}\n          </PopupList.ButtonGroup>\n        )}\n        size=\"medium\"\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,SAASA,cAAc,QAAQ;AAI/B,SAASC,MAAM,QAAQ;AACvB,SAASC,KAAK,EAAEC,SAAS,QAAQ;AAEjC,OAAO,MAAMC,YAAA,GAAeA,CAAC;EAC3BC,WAAW;EACXC,SAAS;EACTC,WAAW;EACXC,SAAS;EACTC,WAAW;EACXC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,OAAO;EACPC,WAAW;EACXC;AAAU,CAaX;EACC,IAAI,CAACV,WAAA,EAAa;IAChB,OAAO;EACT;EAEA,MAAMW,aAAA,GAAgBC,KAAA,CAAMC,OAAO,CAACH,UAAA;EAEpC,IAAI,CAACC,aAAA,EAAe;IAClB,oBACEG,IAAA,CAAClB,MAAA;MACCM,WAAA,EAAaA,WAAA;MACbC,SAAA,EAAW,CAACA,SAAA,EAAW,sBAAsB,CAACY,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;MACnET,OAAA,EAASA,CAAA,KAAMA,OAAA;gBAEdD;;EAGP;EAEA,oBACEO,IAAA,CAAC;IAAIX,SAAA,EAAW,GAAGF,SAAA,+BAAwC;cACzD,aAAAa,IAAA,CAACjB,KAAA;MACCqB,MAAA,eACEJ,IAAA,CAAClB,MAAA;QAAOM,WAAA,EAAaA,WAAA;QAAaC,SAAA,EAAWA,SAAA;QAAWG,IAAA,EAAMA,IAAA;kBAC3DC;;MAGLY,UAAA,EAAW;MACXC,eAAA,EAAgB;MAChBC,MAAA,EAAQA,CAAC;QAAEC,KAAA,EAAOC;MAAU,CAAE,kBAC5BT,IAAA,CAAChB,SAAA,CAAU0B,WAAW;kBACnBd,UAAA,CAAWe,GAAG,CAAEC,iBAAA;UACf,IAAIjB,WAAA,CAAYL,WAAW,CAACsB,iBAAA,CAAkB,EAAEC,MAAA,EAAQ;YACtD,oBACEb,IAAA,CAAChB,SAAA,CAAUF,MAAM;cACfO,SAAA,EAAW,GAAGF,SAAA,sBAA+ByB,iBAAA,EAAmB;cAEhElB,OAAA,EAASA,CAAA;gBACPe,UAAA;gBACAf,OAAA,CAAQkB,iBAAA;cACV;wBAEC/B,cAAA,CACCS,WAAA,CAAYwB,IAAI,CAAEC,IAAA,IAASA,IAAA,CAAKC,IAAI,KAAKJ,iBAAA,EAAmBK,MAAM,CAACC,QAAQ,EAC3E3B,IAAA;eARGqB,iBAAA;UAYX;UAEA,OAAO;QACT;;MAGJO,IAAA,EAAK;;;AAIb","ignoreList":[]}
+{"version":3,"file":"AddNewButton.js","names":["getTranslation","Button","Popup","PopupList","AddNewButton","allowCreate","baseClass","buttonStyle","className","collections","i18n","icon","label","onClick","permissions","relationTo","isPolymorphic","Array","isArray","_jsx","filter","Boolean","join","button","buttonType","horizontalAlign","render","close","closePopup","ButtonGroup","map","relatedCollection","create","find","each","slug","labels","singular"],"sources":["../../../src/elements/RelationshipTable/AddNewButton.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\nimport type { ClientCollectionConfig, SanitizedPermissions } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\n\nimport type { Props as ButtonProps } from '../../elements/Button/types.js'\n\nimport { Button } from '../../elements/Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\n\nexport const AddNewButton = ({\n  allowCreate,\n  baseClass,\n  buttonStyle,\n  className,\n  collections,\n  i18n,\n  icon,\n  label,\n  onClick,\n  permissions,\n  relationTo,\n}: {\n  allowCreate: boolean\n  baseClass: string\n  buttonStyle?: ButtonProps['buttonStyle']\n  className?: string\n  collections: ClientCollectionConfig[]\n  i18n: I18nClient\n  icon?: ButtonProps['icon']\n  label: string\n  onClick: (selectedCollection?: string) => void\n  permissions: SanitizedPermissions\n  relationTo: string | string[]\n}) => {\n  if (!allowCreate) {\n    return null\n  }\n\n  const isPolymorphic = Array.isArray(relationTo)\n\n  if (!isPolymorphic) {\n    return (\n      <Button\n        buttonStyle={buttonStyle}\n        className={[className, 'doc-drawer__toggler'].filter(Boolean).join(' ')}\n        onClick={() => onClick()}\n      >\n        {label}\n      </Button>\n    )\n  }\n\n  return (\n    <div className={`${baseClass}__add-new-polymorphic-wrapper`}>\n      <Popup\n        button={\n          <Button buttonStyle={buttonStyle} className={className} icon={icon}>\n            {label}\n          </Button>\n        }\n        buttonType=\"custom\"\n        horizontalAlign=\"center\"\n        render={({ close: closePopup }) => (\n          <PopupList.ButtonGroup>\n            {relationTo.map((relatedCollection) => {\n              if (permissions.collections[relatedCollection]?.create) {\n                return (\n                  <PopupList.Button\n                    className={`${baseClass}__relation-button--${relatedCollection}`}\n                    key={relatedCollection}\n                    onClick={() => {\n                      closePopup()\n                      onClick(relatedCollection)\n                    }}\n                  >\n                    {getTranslation(\n                      collections.find((each) => each.slug === relatedCollection).labels.singular,\n                      i18n,\n                    )}\n                  </PopupList.Button>\n                )\n              }\n\n              return null\n            })}\n          </PopupList.ButtonGroup>\n        )}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,SAASA,cAAc,QAAQ;AAI/B,SAASC,MAAM,QAAQ;AACvB,SAASC,KAAK,EAAEC,SAAS,QAAQ;AAEjC,OAAO,MAAMC,YAAA,GAAeA,CAAC;EAC3BC,WAAW;EACXC,SAAS;EACTC,WAAW;EACXC,SAAS;EACTC,WAAW;EACXC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,OAAO;EACPC,WAAW;EACXC;AAAU,CAaX;EACC,IAAI,CAACV,WAAA,EAAa;IAChB,OAAO;EACT;EAEA,MAAMW,aAAA,GAAgBC,KAAA,CAAMC,OAAO,CAACH,UAAA;EAEpC,IAAI,CAACC,aAAA,EAAe;IAClB,oBACEG,IAAA,CAAClB,MAAA;MACCM,WAAA,EAAaA,WAAA;MACbC,SAAA,EAAW,CAACA,SAAA,EAAW,sBAAsB,CAACY,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;MACnET,OAAA,EAASA,CAAA,KAAMA,OAAA;gBAEdD;;EAGP;EAEA,oBACEO,IAAA,CAAC;IAAIX,SAAA,EAAW,GAAGF,SAAA,+BAAwC;cACzD,aAAAa,IAAA,CAACjB,KAAA;MACCqB,MAAA,eACEJ,IAAA,CAAClB,MAAA;QAAOM,WAAA,EAAaA,WAAA;QAAaC,SAAA,EAAWA,SAAA;QAAWG,IAAA,EAAMA,IAAA;kBAC3DC;;MAGLY,UAAA,EAAW;MACXC,eAAA,EAAgB;MAChBC,MAAA,EAAQA,CAAC;QAAEC,KAAA,EAAOC;MAAU,CAAE,kBAC5BT,IAAA,CAAChB,SAAA,CAAU0B,WAAW;kBACnBd,UAAA,CAAWe,GAAG,CAAEC,iBAAA;UACf,IAAIjB,WAAA,CAAYL,WAAW,CAACsB,iBAAA,CAAkB,EAAEC,MAAA,EAAQ;YACtD,oBACEb,IAAA,CAAChB,SAAA,CAAUF,MAAM;cACfO,SAAA,EAAW,GAAGF,SAAA,sBAA+ByB,iBAAA,EAAmB;cAEhElB,OAAA,EAASA,CAAA;gBACPe,UAAA;gBACAf,OAAA,CAAQkB,iBAAA;cACV;wBAEC/B,cAAA,CACCS,WAAA,CAAYwB,IAAI,CAAEC,IAAA,IAASA,IAAA,CAAKC,IAAI,KAAKJ,iBAAA,EAAmBK,MAAM,CAACC,QAAQ,EAC3E3B,IAAA;eARGqB,iBAAA;UAYX;UAEA,OAAO;QACT;;;;AAMZ","ignoreList":[]}

package/dist/elements/RelationshipTable/index.js

@@ -11,8 +11,8 @@ import { ListQueryProvider } from '../../providers/ListQuery/index.js';
 import { useServerFunctions } from '../../providers/ServerFunctions/index.js';
 import { TableColumnsProvider } from '../../providers/TableColumns/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { ColumnsButton } from '../ColumnsButton/index.js';
 import { useDocumentDrawer } from '../DocumentDrawer/index.js';
+import { ListColumnSelectionButton } from '../ListColumnSelectionButton/index.js';
 import { NoListResults } from '../NoListResults/index.js';
 import { RelationshipProvider } from '../Table/RelationshipProvider/index.js';
 import { AddNewButton } from './AddNewButton.js';
@@ -209,7 +209,7 @@ export const RelationshipTable = props => {
     permissions: permissions,
     relationTo: relationTo
   });
-  const columnsButton = /*#__PURE__*/_jsx(ColumnsButton, {
+  const columnsButton = /*#__PURE__*/_jsx(ListColumnSelectionButton, {
     collectionSlug: collectionConfig?.slug
   });
   return /*#__PURE__*/_jsxs("div", {