@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.40de3ec

package/dist/elements/QueryPresets/QueryPresetBar/index.css

@@ -0,0 +1,22 @@
+@layer payload-default {
+  .query-preset-bar {
+    display: flex;
+    align-items: center;
+  }
+
+  .query-preset-bar__popup .popup-button-list__button {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+  }
+}
+
+/* Destructive delete button - targets the portal content */
+.query-preset-bar__popup-content .popup-button-list__button.query-preset-bar__delete {
+  color: var(--color-text-danger);
+}
+
+.query-preset-bar__popup-content .popup-button-list__button.query-preset-bar__delete:hover {
+  color: var(--color-text-danger);
+  background-color: var(--color-bg-danger-tertiary);
+}

package/dist/elements/QueryPresets/QueryPresetBar/index.d.ts

@@ -1,6 +1,6 @@
 import type { QueryPreset, SanitizedCollectionPermission } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const QueryPresetBar: React.FC<{
     activePreset: QueryPreset;
     collectionSlug?: string;

package/dist/elements/QueryPresets/QueryPresetBar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/QueryPresets/QueryPresetBar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,6BAA6B,EAAE,MAAM,SAAS,CAAA;AASzE,OAAO,KAAyC,MAAM,OAAO,CAAA;AAc7D,OAAO,cAAc,CAAA;AAQrB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,YAAY,EAAE,WAAW,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,sBAAsB,EAAE,6BAA6B,CAAA;CACtD,CA6SA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/QueryPresets/QueryPresetBar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,6BAA6B,EAAE,MAAM,SAAS,CAAA;AASzE,OAAO,KAA8D,MAAM,OAAO,CAAA;AAkBlF,OAAO,aAAa,CAAA;AAQpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,YAAY,EAAE,WAAW,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,sBAAsB,EAAE,6BAA6B,CAAA;CACtD,CA+aA,CAAA"}

package/dist/elements/QueryPresets/QueryPresetBar/index.js

@@ -1,22 +1,28 @@
+'use client';
+
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useModal } from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
 import { formatAdminURL, transformColumnsToPreferences, transformColumnsToSearchParams } from 'payload/shared';
-import React, { Fragment, useCallback, useMemo } from 'react';
-import { toast } from 'sonner';
+import * as qs from 'qs-esm';
+import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { CheckIcon } from '../../../icons/Check/index.js';
+import { EditIcon } from '../../../icons/Edit/index.js';
+import { GearIcon } from '../../../icons/Gear/index.js';
 import { PlusIcon } from '../../../icons/Plus/index.js';
+import { RefreshIcon } from '../../../icons/Refresh/index.js';
+import { TrashIcon } from '../../../icons/Trash/index.js';
 import { useConfig } from '../../../providers/Config/index.js';
 import { useListQuery } from '../../../providers/ListQuery/context.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import { ConfirmationModal } from '../../ConfirmationModal/index.js';
 import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
+import { FilterTrigger } from '../../FilterTrigger/index.js';
 import { useListDrawer } from '../../ListDrawer/index.js';
-import { ListSelectionButton } from '../../ListSelection/index.js';
-import { Pill } from '../../Pill/index.js';
+import { useModal } from '../../Modal/index.js';
+import { Popup, PopupList } from '../../Popup/index.js';
 import { Translation } from '../../Translation/index.js';
-import { QueryPresetToggler } from '../QueryPresetToggler/index.js';
-import './index.scss';
-const confirmDeletePresetModalSlug = 'confirm-delete-preset';
+import './index.css';
+const deletePresetModalSlug = 'delete-preset-confirmation';
 const queryPresetsSlug = 'payload-query-presets';
 const baseClass = 'query-preset-bar';
 export const QueryPresetBar = ({
@@ -30,18 +36,20 @@ export const QueryPresetBar = ({
     refineListData,
     setModified: setQueryModified
   } = useListQuery();
+  const {
+    openModal
+  } = useModal();
+  const [presets, setPresets] = useState([]);
   const {
     i18n,
     t
   } = useTranslation();
-  const {
-    openModal
-  } = useModal();
   const {
     config: {
       routes: {
         api: apiRoute
-      }
+      },
+      serverURL
     },
     getEntityConfig
   } = useConfig();
@@ -49,7 +57,7 @@ export const QueryPresetBar = ({
     collectionSlug: queryPresetsSlug
   });
   const [PresetDocumentDrawer,, {
-    openDrawer: openDocumentDrawer
+    openDrawer: openPresetDrawer
   }] = useDocumentDrawer({
     id: activePreset?.id,
     collectionSlug: queryPresetsSlug
@@ -71,13 +79,51 @@ export const QueryPresetBar = ({
     }
   }), [collectionSlug]);
   const [ListDrawer,, {
-    closeDrawer: closeListDrawer,
     openDrawer: openListDrawer
   }] = useListDrawer({
     collectionSlugs: [queryPresetsSlug],
     filterOptions,
     selectedCollection: queryPresetsSlug
   });
+  // Fetch presets for the popup
+  const fetchPresets = useCallback(async () => {
+    try {
+      const where = {
+        and: [{
+          isTemp: {
+            not_equals: true
+          }
+        }, {
+          relatedCollection: {
+            equals: collectionSlug
+          }
+        }]
+      };
+      const queryString = qs.stringify({
+        limit: 50,
+        where
+      }, {
+        addQueryPrefix: true
+      });
+      const url = formatAdminURL({
+        apiRoute,
+        path: `/${queryPresetsSlug}${queryString}`,
+        serverURL
+      });
+      const response = await fetch(url, {
+        credentials: 'include'
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setPresets(data.docs || []);
+      }
+    } catch (_error) {
+      // Silently fail - presets will remain empty
+    }
+  }, [apiRoute, collectionSlug, serverURL]);
+  useEffect(() => {
+    void fetchPresets();
+  }, [fetchPresets]);
   const handlePresetChange = useCallback(async preset => {
     await refineListData({
       columns: preset.columns ? transformColumnsToSearchParams(preset.columns) : undefined,
@@ -86,57 +132,69 @@ export const QueryPresetBar = ({
       where: preset.where
     }, false);
   }, [refineListData]);
-  const resetQueryPreset = useCallback(async () => {
+  const buttonLabel = activePreset?.title || t('general:selectLabel', {
+    label: getTranslation(presetConfig?.labels?.singular, i18n)
+  });
+  const handleClearPreset = useCallback(async e => {
+    e.stopPropagation();
     await refineListData({
-      columns: [],
+      columns: undefined,
       groupBy: '',
       preset: '',
-      where: {}
+      where: undefined
     }, false);
   }, [refineListData]);
   const handleDeletePreset = useCallback(async () => {
+    if (!activePreset?.id) {
+      return;
+    }
     try {
-      await fetch(formatAdminURL({
+      const url_0 = formatAdminURL({
         apiRoute,
-        path: `/${queryPresetsSlug}/${activePreset.id}`
-      }), {
+        path: `/${queryPresetsSlug}/${activePreset.id}`,
+        serverURL
+      });
+      const response_0 = await fetch(url_0, {
+        credentials: 'include',
         method: 'DELETE'
-      }).then(async res => {
-        try {
-          const json = await res.json();
-          if (res.status < 400) {
-            toast.success(t('general:titleDeleted', {
-              label: getTranslation(presetConfig?.labels?.singular, i18n),
-              title: activePreset.title
-            }));
-            await resetQueryPreset();
-          } else {
-            if (json.errors) {
-              json.errors.forEach(error => toast.error(error.message));
-            } else {
-              toast.error(t('error:deletingTitle', {
-                title: activePreset.title
-              }));
-            }
-          }
-        } catch (_err) {
-          toast.error(t('error:deletingTitle', {
-            title: activePreset.title
-          }));
-        }
       });
-    } catch (_err) {
-      toast.error(t('error:deletingTitle', {
-        title: activePreset.title
-      }));
+      if (response_0.ok) {
+        // Clear the active preset and refresh the list
+        await refineListData({
+          columns: undefined,
+          groupBy: '',
+          preset: '',
+          where: undefined
+        }, false);
+        void fetchPresets();
+      }
+    } catch (_error_0) {
+      // Silently fail
     }
-  }, [apiRoute, activePreset?.id, activePreset?.title, t, presetConfig, i18n, resetQueryPreset]);
+  }, [activePreset?.id, apiRoute, fetchPresets, refineListData, serverURL]);
+  const handleResetPreset = useCallback(async () => {
+    if (!activePreset) {
+      return;
+    }
+    // Use the same pattern as handlePresetChange for consistency
+    await refineListData({
+      columns: activePreset.columns ? transformColumnsToSearchParams(activePreset.columns) : [],
+      groupBy: activePreset.groupBy || '',
+      preset: activePreset.id,
+      where: activePreset.where
+    }, false);
+  }, [activePreset, refineListData]);
   const saveCurrentChanges = useCallback(async () => {
+    if (!activePreset?.id) {
+      return;
+    }
     try {
-      await fetch(formatAdminURL({
+      const url_1 = formatAdminURL({
         apiRoute,
-        path: `/${queryPresetsSlug}/${activePreset.id}`
-      }), {
+        path: `/${queryPresetsSlug}/${activePreset.id}`,
+        serverURL
+      });
+      const response_1 = await fetch(url_1, {
         body: JSON.stringify({
           columns: transformColumnsToPreferences(query.columns),
           groupBy: query.groupBy,
@@ -147,91 +205,159 @@ export const QueryPresetBar = ({
           'Content-Type': 'application/json'
         },
         method: 'PATCH'
-      }).then(async res => {
-        try {
-          const json = await res.json();
-          if (res.status < 400) {
-            toast.success(t('general:updatedLabelSuccessfully', {
-              label: getTranslation(presetConfig?.labels?.singular, i18n)
-            }));
-            setQueryModified(false);
-          } else {
-            if (json.errors) {
-              json.errors.forEach(error => toast.error(error.message));
-            } else {
-              toast.error(t('error:unknown'));
-            }
-          }
-        } catch (_err) {
-          toast.error(t('error:unknown'));
-        }
       });
-    } catch (_err) {
-      toast.error(t('error:unknown'));
+      if (response_1.ok) {
+        setQueryModified(false);
+        void fetchPresets();
+      }
+    } catch (_error_1) {
+      // Silently fail
+    }
+  }, [activePreset?.id, apiRoute, fetchPresets, query.columns, query.groupBy, query.where, serverURL, setQueryModified]);
+  // Detect if current query differs from preset on initial load
+  useEffect(() => {
+    if (!activePreset) {
+      return;
     }
-  }, [apiRoute, activePreset?.id, query.columns, query.groupBy, query.where, t, presetConfig?.labels?.singular, i18n, setQueryModified]);
+    const presetColumns = activePreset.columns ? transformColumnsToSearchParams(activePreset.columns) : [];
+    const presetWhere = activePreset.where;
+    const presetGroupBy = activePreset.groupBy || '';
+    // Normalize query.columns - it may be a JSON string from URL or an array
+    let queryColumns = query.columns || [];
+    if (typeof queryColumns === 'string') {
+      try {
+        queryColumns = JSON.parse(queryColumns);
+      } catch {
+        queryColumns = [];
+      }
+    }
+    // Compare current query with preset values
+    const columnsMatch = JSON.stringify(queryColumns) === JSON.stringify(presetColumns);
+    const whereMatch = JSON.stringify(query.where) === JSON.stringify(presetWhere);
+    const groupByMatch = (query.groupBy || '') === presetGroupBy;
+    const isModified = !columnsMatch || !whereMatch || !groupByMatch;
+    setQueryModified(isModified);
+  }, [activePreset, query.columns, query.where, query.groupBy, setQueryModified]);
   const hasModifiedPreset = activePreset && modified;
   return /*#__PURE__*/_jsxs(Fragment, {
-    children: [/*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx("div", {
       className: baseClass,
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__menu`,
-        children: [/*#__PURE__*/_jsx(QueryPresetToggler, {
-          activePreset: activePreset,
-          openPresetListDrawer: openListDrawer,
-          resetPreset: resetQueryPreset
-        }), /*#__PURE__*/_jsx(Pill, {
-          "aria-label": t('general:newLabel', {
-            label: presetConfig?.labels?.singular
-          }),
-          className: `${baseClass}__create-new-preset`,
-          icon: /*#__PURE__*/_jsx(PlusIcon, {}),
-          id: "create-new-preset",
-          onClick: () => {
-            openCreateNewDrawer();
-          },
-          size: "small"
-        })]
-      }), /*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__menu-items`,
-        children: [hasModifiedPreset && /*#__PURE__*/_jsx(ListSelectionButton, {
-          id: "reset-preset",
-          onClick: async () => {
-            await refineListData({
-              columns: transformColumnsToSearchParams(activePreset.columns),
-              groupBy: activePreset.groupBy || '',
-              where: activePreset.where
-            }, false);
-          },
-          type: "button",
-          children: t('general:reset')
-        }, "reset"), hasModifiedPreset && queryPresetPermissions.update && /*#__PURE__*/_jsx(ListSelectionButton, {
-          id: "save-preset",
-          onClick: async () => {
-            await saveCurrentChanges();
-          },
-          type: "button",
-          children: activePreset?.isShared ? t('general:updateForEveryone') : t('fields:saveChanges')
-        }, "save"), activePreset && queryPresetPermissions?.delete && /*#__PURE__*/_jsxs(Fragment, {
-          children: [/*#__PURE__*/_jsx(ListSelectionButton, {
-            id: "delete-preset",
-            onClick: () => openModal(confirmDeletePresetModalSlug),
-            type: "button",
-            children: t('general:deleteLabel', {
-              label: presetConfig?.labels?.singular
-            })
-          }), /*#__PURE__*/_jsx(ListSelectionButton, {
-            id: "edit-preset",
-            onClick: () => {
-              openDocumentDrawer();
-            },
-            type: "button",
-            children: t('general:editLabel', {
-              label: presetConfig?.labels?.singular
+      children: /*#__PURE__*/_jsx(Popup, {
+        className: `${baseClass}__popup`,
+        horizontalAlign: "left",
+        portalClassName: `${baseClass}__popup-content`,
+        render: ({
+          close
+        }) => /*#__PURE__*/_jsxs(Fragment, {
+          children: [/*#__PURE__*/_jsx(PopupList.RadioGroup, {
+            children: presets.map(preset_0 => {
+              const isActive = activePreset?.id === preset_0.id;
+              return /*#__PURE__*/_jsx(PopupList.RadioGroupItem, {
+                active: isActive,
+                onClick: async () => {
+                  close();
+                  await handlePresetChange(preset_0);
+                },
+                children: preset_0.title
+              }, preset_0.id);
             })
+          }), activePreset && /*#__PURE__*/_jsxs(Fragment, {
+            children: [/*#__PURE__*/_jsx(PopupList.Divider, {}), /*#__PURE__*/_jsxs(PopupList.MenuItem, {
+              size: "small",
+              children: [hasModifiedPreset && /*#__PURE__*/_jsx(PopupList.Button, {
+                icon: /*#__PURE__*/_jsx(RefreshIcon, {
+                  size: 16
+                }),
+                id: "reset-preset",
+                onClick: async () => {
+                  close();
+                  await handleResetPreset();
+                },
+                children: t('general:reset')
+              }), hasModifiedPreset && queryPresetPermissions?.update && /*#__PURE__*/_jsx(PopupList.Button, {
+                icon: /*#__PURE__*/_jsx(CheckIcon, {
+                  size: 16
+                }),
+                id: "save-preset",
+                onClick: async () => {
+                  close();
+                  await saveCurrentChanges();
+                },
+                children: activePreset?.isShared ? t('general:updateForEveryone') : t('fields:saveChanges')
+              }), queryPresetPermissions?.update && /*#__PURE__*/_jsx(PopupList.Button, {
+                icon: /*#__PURE__*/_jsx(EditIcon, {
+                  size: 16
+                }),
+                id: "edit-preset",
+                onClick: () => {
+                  close();
+                  openPresetDrawer();
+                },
+                children: t('general:editLabel', {
+                  label: getTranslation(presetConfig?.labels?.singular, i18n)
+                })
+              }), queryPresetPermissions?.delete && /*#__PURE__*/_jsx(PopupList.Button, {
+                className: `${baseClass}__delete`,
+                icon: /*#__PURE__*/_jsx(TrashIcon, {
+                  size: 16
+                }),
+                id: "delete-preset",
+                onClick: () => {
+                  close();
+                  openModal(deletePresetModalSlug);
+                },
+                children: t('general:deleteLabel', {
+                  label: getTranslation(presetConfig?.labels?.singular, i18n)
+                })
+              })]
+            })]
+          }), (presets.length > 0 || activePreset) && /*#__PURE__*/_jsx(PopupList.Divider, {}), /*#__PURE__*/_jsxs(PopupList.MenuItem, {
+            size: "small",
+            children: [queryPresetPermissions?.create && /*#__PURE__*/_jsx(PopupList.Button, {
+              icon: /*#__PURE__*/_jsx(PlusIcon, {
+                size: 16
+              }),
+              id: "create-new-preset",
+              onClick: () => {
+                close();
+                openCreateNewDrawer();
+              },
+              children: t('general:createNewLabel', {
+                label: getTranslation(presetConfig?.labels?.singular, i18n)
+              })
+            }), /*#__PURE__*/_jsx(PopupList.Button, {
+              icon: /*#__PURE__*/_jsx(GearIcon, {
+                size: 16
+              }),
+              id: "manage-presets",
+              onClick: () => {
+                close();
+                openListDrawer();
+              },
+              children: t('general:manageLabel', {
+                label: getTranslation(presetConfig?.labels?.plural, i18n)
+              })
+            })]
           })]
-        })]
-      })]
+        }),
+        renderButton: ({
+          active,
+          onClick,
+          onKeyDown
+        }) => /*#__PURE__*/_jsx(FilterTrigger, {
+          className: `${baseClass}__trigger`,
+          id: "select-preset",
+          isActive: Boolean(activePreset),
+          onClear: handleClearPreset,
+          onClick: onClick,
+          onKeyDown: onKeyDown,
+          popupActive: active,
+          showBadge: hasModifiedPreset,
+          children: buttonLabel
+        }),
+        size: "large",
+        verticalAlign: "bottom"
+      })
     }), /*#__PURE__*/_jsx(CreateNewPresetDrawer, {
       initialData: {
         columns: transformColumnsToPreferences(query.columns),
@@ -244,8 +370,33 @@ export const QueryPresetBar = ({
       }) => {
         closeCreateNewDrawer();
         await handlePresetChange(doc);
+        void fetchPresets();
       },
       redirectAfterCreate: false
+    }), /*#__PURE__*/_jsx(PresetDocumentDrawer, {
+      onDelete: () => {
+        void fetchPresets();
+      },
+      onDuplicate: async ({
+        doc: doc_0
+      }) => {
+        await handlePresetChange(doc_0);
+        void fetchPresets();
+      },
+      onSave: async ({
+        doc: doc_1
+      }) => {
+        await handlePresetChange(doc_1);
+        void fetchPresets();
+      }
+    }), /*#__PURE__*/_jsx(ListDrawer, {
+      allowCreate: false,
+      disableQueryPresets: true,
+      onSelect: async ({
+        doc: doc_2
+      }) => {
+        await handlePresetChange(doc_2);
+      }
     }), /*#__PURE__*/_jsx(ConfirmationModal, {
       body: /*#__PURE__*/_jsx(Translation, {
         elements: {
@@ -258,37 +409,14 @@ export const QueryPresetBar = ({
         i18nKey: "general:aboutToDelete",
         t: t,
         variables: {
-          label: presetConfig?.labels?.singular,
+          label: getTranslation(presetConfig?.labels?.singular, i18n),
           title: activePreset?.title
         }
       }),
-      confirmingLabel: t('general:deleting'),
+      confirmLabel: t('general:delete'),
       heading: t('general:confirmDeletion'),
-      modalSlug: confirmDeletePresetModalSlug,
+      modalSlug: deletePresetModalSlug,
       onConfirm: handleDeletePreset
-    }), /*#__PURE__*/_jsx(PresetDocumentDrawer, {
-      onDelete: () => {
-        // setSelectedPreset(undefined)
-      },
-      onDuplicate: async ({
-        doc
-      }) => {
-        await handlePresetChange(doc);
-      },
-      onSave: async ({
-        doc
-      }) => {
-        await handlePresetChange(doc);
-      }
-    }), /*#__PURE__*/_jsx(ListDrawer, {
-      allowCreate: false,
-      disableQueryPresets: true,
-      onSelect: async ({
-        doc
-      }) => {
-        closeListDrawer();
-        await handlePresetChange(doc);
-      }
     })]
   });
 };