@payloadcms/ui 3.26.0-canary.bbb3083 → 3.27.0-canary.5adb764

package/dist/elements/TableColumns/index.js

@@ -1,199 +1,84 @@
 'use client';
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useCallback, useContext, useEffect } from 'react';
+import { transformColumnsToSearchParams } from 'payload/shared';
+import React, { startTransition, useCallback } from 'react';
 import { useConfig } from '../../providers/Config/index.js';
-import { usePreferences } from '../../providers/Preferences/index.js';
-import { useServerFunctions } from '../../providers/ServerFunctions/index.js';
-import { abortAndIgnore, handleAbortRef } from '../../utilities/abortAndIgnore.js';
-export const TableColumnContext = /*#__PURE__*/createContext({});
-export const useTableColumns = () => {
-  return useContext(TableColumnContext);
-};
-// strip out Heading, Label, and renderedCells properties, they cannot be sent to the server
-const sanitizeColumns = columns => {
-  return columns.map(({
-    accessor,
-    active
-  }) => ({
-    accessor,
-    active
-  }));
-};
+import { useListQuery } from '../../providers/ListQuery/index.js';
+import { TableColumnContext } from './context.js';
+export { useTableColumns } from './context.js';
 export const TableColumnsProvider = ({
   children,
   collectionSlug,
-  columnState,
-  docs,
-  enableRowSelections,
-  LinkedCellOverride,
-  listPreferences,
-  preferenceKey,
-  renderRowTypes,
-  setTable,
-  sortColumnProps,
-  tableAppearance
+  columnState: columnStateFromProps,
+  LinkedCellOverride
 }) => {
   const {
     getEntityConfig
   } = useConfig();
   const {
-    getTableState
-  } = useServerFunctions();
+    query: currentQuery,
+    refineListData
+  } = useListQuery();
   const {
     admin: {
-      defaultColumns,
-      useAsTitle
-    } = {},
-    fields
+      defaultColumns
+    } = {}
   } = getEntityConfig({
     collectionSlug
   });
-  const prevCollection = React.useRef(Array.isArray(collectionSlug) ? collectionSlug[0] : collectionSlug);
-  const {
-    getPreference
-  } = usePreferences();
-  const [tableColumns, setTableColumns] = React.useState(columnState);
-  const abortTableStateRef = React.useRef(null);
-  const abortToggleColumnRef = React.useRef(null);
-  const moveColumn = useCallback(async args => {
-    const controller = handleAbortRef(abortTableStateRef);
-    const {
-      fromIndex,
-      toIndex
-    } = args;
-    const withMovedColumn = [...tableColumns];
-    const [columnToMove] = withMovedColumn.splice(fromIndex, 1);
-    withMovedColumn.splice(toIndex, 0, columnToMove);
-    setTableColumns(withMovedColumn);
-    const result = await getTableState({
-      collectionSlug,
-      columns: sanitizeColumns(withMovedColumn),
-      docs,
-      enableRowSelections,
-      renderRowTypes,
-      signal: controller.signal,
-      tableAppearance
-    });
-    if (result) {
-      setTableColumns(result.state);
-      setTable(result.Table);
-    }
-    abortTableStateRef.current = null;
-  }, [tableColumns, collectionSlug, docs, getTableState, setTable, enableRowSelections, renderRowTypes, tableAppearance]);
+  const [columnState, setOptimisticColumnState] = React.useOptimistic(columnStateFromProps, (state, action) => action);
   const toggleColumn = useCallback(async column => {
-    const controller_0 = handleAbortRef(abortToggleColumnRef);
-    const {
-      newColumnState,
-      toggledColumns
-    } = tableColumns.reduce((acc, col) => {
+    const newColumnState = (columnState || []).map(col => {
       if (col.accessor === column) {
-        acc.newColumnState.push({
+        return {
           ...col,
-          accessor: col.accessor,
-          active: !col.active
-        });
-        acc.toggledColumns.push({
-          accessor: col.accessor,
           active: !col.active
-        });
-      } else {
-        acc.newColumnState.push(col);
-        acc.toggledColumns.push({
-          accessor: col.accessor,
-          active: col.active
-        });
+        };
       }
-      return acc;
-    }, {
-      newColumnState: [],
-      toggledColumns: []
+      return col;
     });
-    setTableColumns(newColumnState);
-    const result_0 = await getTableState({
-      collectionSlug,
-      columns: toggledColumns,
-      docs,
-      enableRowSelections,
-      renderRowTypes,
-      signal: controller_0.signal,
-      tableAppearance
+    startTransition(() => {
+      setOptimisticColumnState(newColumnState);
     });
-    if (result_0) {
-      setTableColumns(result_0.state);
-      setTable(result_0.Table);
-    }
-    abortToggleColumnRef.current = null;
-  }, [tableColumns, getTableState, setTable, collectionSlug, docs, enableRowSelections, renderRowTypes, tableAppearance]);
-  const setActiveColumns = React.useCallback(async activeColumnAccessors => {
-    const activeColumns = tableColumns.map(col_0 => {
-      return {
-        accessor: col_0.accessor,
-        active: activeColumnAccessors.includes(col_0.accessor)
-      };
-    }).sort((first, second) => {
-      const indexOfFirst = activeColumnAccessors.indexOf(first.accessor);
-      const indexOfSecond = activeColumnAccessors.indexOf(second.accessor);
-      if (indexOfFirst === -1 || indexOfSecond === -1) {
-        return 0;
-      }
-      return indexOfFirst > indexOfSecond ? 1 : -1;
+    await refineListData({
+      columns: transformColumnsToSearchParams(newColumnState)
     });
+  }, [refineListData, columnState, setOptimisticColumnState]);
+  const moveColumn = useCallback(async args => {
     const {
-      state: columnState_0,
-      Table
-    } = await getTableState({
-      collectionSlug,
-      columns: activeColumns,
-      docs,
-      enableRowSelections,
-      renderRowTypes,
-      tableAppearance
+      fromIndex,
+      toIndex
+    } = args;
+    const newColumnState_0 = [...(columnState || [])];
+    const [columnToMove] = newColumnState_0.splice(fromIndex, 1);
+    newColumnState_0.splice(toIndex, 0, columnToMove);
+    startTransition(() => {
+      setOptimisticColumnState(newColumnState_0);
     });
-    setTableColumns(columnState_0);
-    setTable(Table);
-  }, [tableColumns, getTableState, setTable, collectionSlug, docs, enableRowSelections, renderRowTypes, tableAppearance]);
+    await refineListData({
+      columns: transformColumnsToSearchParams(newColumnState_0)
+    });
+  }, [columnState, refineListData, setOptimisticColumnState]);
+  const setActiveColumns = useCallback(async columns => {
+    const newColumnState_1 = currentQuery.columns;
+    columns.forEach(colName => {
+      const colIndex = newColumnState_1.findIndex(c => colName === c);
+      // ensure the name does not begin with a `-` which denotes an inactive column
+      if (colIndex !== undefined && newColumnState_1[colIndex][0] === '-') {
+        newColumnState_1[colIndex] = colName.slice(1);
+      }
+    });
+    await refineListData({
+      columns: newColumnState_1
+    });
+  }, [currentQuery, refineListData]);
   const resetColumnsState = React.useCallback(async () => {
     await setActiveColumns(defaultColumns);
   }, [defaultColumns, setActiveColumns]);
-  // //////////////////////////////////////////////
-  // Get preferences on collection change (drawers)
-  // //////////////////////////////////////////////
-  React.useEffect(() => {
-    const sync = async () => {
-      const defaultCollection = Array.isArray(collectionSlug) ? collectionSlug[0] : collectionSlug;
-      const collectionHasChanged = prevCollection.current !== defaultCollection;
-      if (collectionHasChanged || !listPreferences) {
-        const currentPreferences = await getPreference(preferenceKey);
-        prevCollection.current = defaultCollection;
-        if (currentPreferences?.columns) {
-          // setTableColumns()
-          // buildColumnState({
-          //   beforeRows,
-          //   columnPreferences: currentPreferences?.columns,
-          //   columns: initialColumns,
-          //   enableRowSelections,
-          //   fields,
-          //   sortColumnProps,
-          //   useAsTitle,
-          // }),
-        }
-      }
-    };
-    void sync();
-  }, [preferenceKey, getPreference, collectionSlug, fields, defaultColumns, useAsTitle, listPreferences, enableRowSelections, sortColumnProps]);
-  useEffect(() => {
-    setTableColumns(columnState);
-  }, [columnState]);
-  useEffect(() => {
-    const abortTableState = abortTableStateRef.current;
-    return () => {
-      abortAndIgnore(abortTableState);
-    };
-  }, []);
   return /*#__PURE__*/_jsx(TableColumnContext.Provider, {
     value: {
-      columns: tableColumns,
+      columns: columnState,
       LinkedCellOverride,
       moveColumn,
       resetColumnsState,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","createContext","useCallback","useContext","useEffect","useConfig","usePreferences","useServerFunctions","abortAndIgnore","handleAbortRef","TableColumnContext","useTableColumns","sanitizeColumns","columns","map","accessor","active","TableColumnsProvider","children","collectionSlug","columnState","docs","enableRowSelections","LinkedCellOverride","listPreferences","preferenceKey","renderRowTypes","setTable","sortColumnProps","tableAppearance","getEntityConfig","getTableState","admin","defaultColumns","useAsTitle","fields","prevCollection","useRef","Array","isArray","getPreference","tableColumns","setTableColumns","useState","abortTableStateRef","abortToggleColumnRef","moveColumn","args","controller","fromIndex","toIndex","withMovedColumn","columnToMove","splice","result","signal","state","Table","current","toggleColumn","column","newColumnState","toggledColumns","reduce","acc","col","push","setActiveColumns","activeColumnAccessors","activeColumns","includes","sort","first","second","indexOfFirst","indexOf","indexOfSecond","resetColumnsState","sync","defaultCollection","collectionHasChanged","currentPreferences","abortTableState","_jsx","Provider","value"],"sources":["../../../src/elements/TableColumns/index.tsx"],"sourcesContent":["'use client'\nimport type { Column, ListPreferences, SanitizedCollectionConfig } from 'payload'\n\nimport React, { createContext, useCallback, useContext, useEffect } from 'react'\n\nimport type { SortColumnProps } from '../SortColumn/index.js'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useServerFunctions } from '../../providers/ServerFunctions/index.js'\nimport { abortAndIgnore, handleAbortRef } from '../../utilities/abortAndIgnore.js'\n\nexport interface ITableColumns {\n  columns: Column[]\n  LinkedCellOverride?: React.ReactNode\n  moveColumn: (args: { fromIndex: number; toIndex: number }) => Promise<void>\n  resetColumnsState: () => Promise<void>\n  setActiveColumns: (columns: string[]) => Promise<void>\n  toggleColumn: (column: string) => Promise<void>\n}\n\nexport const TableColumnContext = createContext<ITableColumns>({} as ITableColumns)\n\nexport const useTableColumns = (): ITableColumns => useContext(TableColumnContext)\n\ntype Props = {\n  readonly children: React.ReactNode\n  readonly collectionSlug: string | string[]\n  readonly columnState: Column[]\n  readonly docs: any[]\n  readonly enableRowSelections?: boolean\n  readonly LinkedCellOverride?: React.ReactNode\n  readonly listPreferences?: ListPreferences\n  readonly preferenceKey: string\n  readonly renderRowTypes?: boolean\n  readonly setTable: (Table: React.ReactNode) => void\n  readonly sortColumnProps?: Partial<SortColumnProps>\n  readonly tableAppearance?: 'condensed' | 'default'\n}\n\n// strip out Heading, Label, and renderedCells properties, they cannot be sent to the server\nconst sanitizeColumns = (columns: Column[]) => {\n  return columns.map(({ accessor, active }) => ({\n    accessor,\n    active,\n  }))\n}\n\nexport const TableColumnsProvider: React.FC<Props> = ({\n  children,\n  collectionSlug,\n  columnState,\n  docs,\n  enableRowSelections,\n  LinkedCellOverride,\n  listPreferences,\n  preferenceKey,\n  renderRowTypes,\n  setTable,\n  sortColumnProps,\n  tableAppearance,\n}) => {\n  const { getEntityConfig } = useConfig()\n\n  const { getTableState } = useServerFunctions()\n\n  const { admin: { defaultColumns, useAsTitle } = {}, fields } = getEntityConfig({\n    collectionSlug,\n  })\n\n  const prevCollection = React.useRef<SanitizedCollectionConfig['slug']>(\n    Array.isArray(collectionSlug) ? collectionSlug[0] : collectionSlug,\n  )\n  const { getPreference } = usePreferences()\n\n  const [tableColumns, setTableColumns] = React.useState(columnState)\n  const abortTableStateRef = React.useRef<AbortController>(null)\n  const abortToggleColumnRef = React.useRef<AbortController>(null)\n\n  const moveColumn = useCallback(\n    async (args: { fromIndex: number; toIndex: number }) => {\n      const controller = handleAbortRef(abortTableStateRef)\n\n      const { fromIndex, toIndex } = args\n      const withMovedColumn = [...tableColumns]\n      const [columnToMove] = withMovedColumn.splice(fromIndex, 1)\n      withMovedColumn.splice(toIndex, 0, columnToMove)\n\n      setTableColumns(withMovedColumn)\n\n      const result = await getTableState({\n        collectionSlug,\n        columns: sanitizeColumns(withMovedColumn),\n        docs,\n        enableRowSelections,\n        renderRowTypes,\n        signal: controller.signal,\n        tableAppearance,\n      })\n\n      if (result) {\n        setTableColumns(result.state)\n        setTable(result.Table)\n      }\n\n      abortTableStateRef.current = null\n    },\n    [\n      tableColumns,\n      collectionSlug,\n      docs,\n      getTableState,\n      setTable,\n      enableRowSelections,\n      renderRowTypes,\n      tableAppearance,\n    ],\n  )\n\n  const toggleColumn = useCallback(\n    async (column: string) => {\n      const controller = handleAbortRef(abortToggleColumnRef)\n\n      const { newColumnState, toggledColumns } = tableColumns.reduce<{\n        newColumnState: Column[]\n        toggledColumns: Pick<Column, 'accessor' | 'active'>[]\n      }>(\n        (acc, col) => {\n          if (col.accessor === column) {\n            acc.newColumnState.push({\n              ...col,\n              accessor: col.accessor,\n              active: !col.active,\n            })\n            acc.toggledColumns.push({\n              accessor: col.accessor,\n              active: !col.active,\n            })\n          } else {\n            acc.newColumnState.push(col)\n            acc.toggledColumns.push({\n              accessor: col.accessor,\n              active: col.active,\n            })\n          }\n\n          return acc\n        },\n        { newColumnState: [], toggledColumns: [] },\n      )\n\n      setTableColumns(newColumnState)\n\n      const result = await getTableState({\n        collectionSlug,\n        columns: toggledColumns,\n        docs,\n        enableRowSelections,\n        renderRowTypes,\n        signal: controller.signal,\n        tableAppearance,\n      })\n\n      if (result) {\n        setTableColumns(result.state)\n        setTable(result.Table)\n      }\n\n      abortToggleColumnRef.current = null\n    },\n    [\n      tableColumns,\n      getTableState,\n      setTable,\n      collectionSlug,\n      docs,\n      enableRowSelections,\n      renderRowTypes,\n      tableAppearance,\n    ],\n  )\n\n  const setActiveColumns = React.useCallback(\n    async (activeColumnAccessors: string[]) => {\n      const activeColumns: Pick<Column, 'accessor' | 'active'>[] = tableColumns\n        .map((col) => {\n          return {\n            accessor: col.accessor,\n            active: activeColumnAccessors.includes(col.accessor),\n          }\n        })\n        .sort((first, second) => {\n          const indexOfFirst = activeColumnAccessors.indexOf(first.accessor)\n          const indexOfSecond = activeColumnAccessors.indexOf(second.accessor)\n\n          if (indexOfFirst === -1 || indexOfSecond === -1) {\n            return 0\n          }\n\n          return indexOfFirst > indexOfSecond ? 1 : -1\n        })\n\n      const { state: columnState, Table } = await getTableState({\n        collectionSlug,\n        columns: activeColumns,\n        docs,\n        enableRowSelections,\n        renderRowTypes,\n        tableAppearance,\n      })\n\n      setTableColumns(columnState)\n      setTable(Table)\n    },\n    [\n      tableColumns,\n      getTableState,\n      setTable,\n      collectionSlug,\n      docs,\n      enableRowSelections,\n      renderRowTypes,\n      tableAppearance,\n    ],\n  )\n\n  const resetColumnsState = React.useCallback(async () => {\n    await setActiveColumns(defaultColumns)\n  }, [defaultColumns, setActiveColumns])\n\n  // //////////////////////////////////////////////\n  // Get preferences on collection change (drawers)\n  // //////////////////////////////////////////////\n\n  React.useEffect(() => {\n    const sync = async () => {\n      const defaultCollection = Array.isArray(collectionSlug) ? collectionSlug[0] : collectionSlug\n      const collectionHasChanged = prevCollection.current !== defaultCollection\n\n      if (collectionHasChanged || !listPreferences) {\n        const currentPreferences = await getPreference<{\n          columns: ListPreferences['columns']\n        }>(preferenceKey)\n\n        prevCollection.current = defaultCollection\n\n        if (currentPreferences?.columns) {\n          // setTableColumns()\n          // buildColumnState({\n          //   beforeRows,\n          //   columnPreferences: currentPreferences?.columns,\n          //   columns: initialColumns,\n          //   enableRowSelections,\n          //   fields,\n          //   sortColumnProps,\n          //   useAsTitle,\n          // }),\n        }\n      }\n    }\n\n    void sync()\n  }, [\n    preferenceKey,\n    getPreference,\n    collectionSlug,\n    fields,\n    defaultColumns,\n    useAsTitle,\n    listPreferences,\n    enableRowSelections,\n    sortColumnProps,\n  ])\n\n  useEffect(() => {\n    setTableColumns(columnState)\n  }, [columnState])\n\n  useEffect(() => {\n    const abortTableState = abortTableStateRef.current\n\n    return () => {\n      abortAndIgnore(abortTableState)\n    }\n  }, [])\n\n  return (\n    <TableColumnContext.Provider\n      value={{\n        columns: tableColumns,\n        LinkedCellOverride,\n        moveColumn,\n        resetColumnsState,\n        setActiveColumns,\n        toggleColumn,\n      }}\n    >\n      {children}\n    </TableColumnContext.Provider>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["transformColumnsToSearchParams","React","startTransition","useCallback","useConfig","useListQuery","TableColumnContext","useTableColumns","TableColumnsProvider","children","collectionSlug","columnState","columnStateFromProps","LinkedCellOverride","getEntityConfig","query","currentQuery","refineListData","admin","defaultColumns","setOptimisticColumnState","useOptimistic","state","action","toggleColumn","column","newColumnState","map","col","accessor","active","columns","moveColumn","args","fromIndex","toIndex","columnToMove","splice","setActiveColumns","forEach","colName","colIndex","findIndex","c","undefined","slice","resetColumnsState","_jsx","Provider","value"],"sources":["../../../src/elements/TableColumns/index.tsx"],"sourcesContent":["'use client'\nimport { type Column } from 'payload'\nimport { transformColumnsToSearchParams } from 'payload/shared'\nimport React, { startTransition, useCallback } from 'react'\n\nimport type { TableColumnsProviderProps } from './types.js'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { TableColumnContext } from './context.js'\n\nexport { useTableColumns } from './context.js'\n\nexport const TableColumnsProvider: React.FC<TableColumnsProviderProps> = ({\n  children,\n  collectionSlug,\n  columnState: columnStateFromProps,\n  LinkedCellOverride,\n}) => {\n  const { getEntityConfig } = useConfig()\n  const { query: currentQuery, refineListData } = useListQuery()\n\n  const { admin: { defaultColumns } = {} } = getEntityConfig({\n    collectionSlug,\n  })\n\n  const [columnState, setOptimisticColumnState] = React.useOptimistic(\n    columnStateFromProps,\n    (state, action: Column[]) => action,\n  )\n\n  const toggleColumn = useCallback(\n    async (column: string) => {\n      const newColumnState = (columnState || []).map((col) => {\n        if (col.accessor === column) {\n          return { ...col, active: !col.active }\n        }\n        return col\n      })\n\n      startTransition(() => {\n        setOptimisticColumnState(newColumnState)\n      })\n\n      await refineListData({\n        columns: transformColumnsToSearchParams(newColumnState),\n      })\n    },\n    [refineListData, columnState, setOptimisticColumnState],\n  )\n\n  const moveColumn = useCallback(\n    async (args: { fromIndex: number; toIndex: number }) => {\n      const { fromIndex, toIndex } = args\n      const newColumnState = [...(columnState || [])]\n      const [columnToMove] = newColumnState.splice(fromIndex, 1)\n      newColumnState.splice(toIndex, 0, columnToMove)\n\n      startTransition(() => {\n        setOptimisticColumnState(newColumnState)\n      })\n\n      await refineListData({\n        columns: transformColumnsToSearchParams(newColumnState),\n      })\n    },\n    [columnState, refineListData, setOptimisticColumnState],\n  )\n\n  const setActiveColumns = useCallback(\n    async (columns: string[]) => {\n      const newColumnState = currentQuery.columns\n\n      columns.forEach((colName) => {\n        const colIndex = newColumnState.findIndex((c) => colName === c)\n\n        // ensure the name does not begin with a `-` which denotes an inactive column\n        if (colIndex !== undefined && newColumnState[colIndex][0] === '-') {\n          newColumnState[colIndex] = colName.slice(1)\n        }\n      })\n\n      await refineListData({ columns: newColumnState })\n    },\n    [currentQuery, refineListData],\n  )\n\n  const resetColumnsState = React.useCallback(async () => {\n    await setActiveColumns(defaultColumns)\n  }, [defaultColumns, setActiveColumns])\n\n  return (\n    <TableColumnContext.Provider\n      value={{\n        columns: columnState,\n        LinkedCellOverride,\n        moveColumn,\n        resetColumnsState,\n        setActiveColumns,\n        toggleColumn,\n      }}\n    >\n      {children}\n    </TableColumnContext.Provider>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/TableColumns/types.d.ts

@@ -0,0 +1,52 @@
+import type { Column, ListPreferences } from 'payload';
+import type { SortColumnProps } from '../SortColumn/index.js';
+export interface ITableColumns {
+    columns: Column[];
+    LinkedCellOverride?: React.ReactNode;
+    moveColumn: (args: {
+        fromIndex: number;
+        toIndex: number;
+    }) => Promise<void>;
+    resetColumnsState: () => Promise<void>;
+    setActiveColumns: (columns: string[]) => Promise<void>;
+    toggleColumn: (column: string) => Promise<void>;
+}
+export type TableColumnsProviderProps = {
+    readonly children: React.ReactNode;
+    readonly collectionSlug: string | string[];
+    readonly columnState: Column[];
+    /**
+     * @deprecated
+     */
+    readonly docs?: any[];
+    /**
+     * @deprecated
+     */
+    readonly enableRowSelections?: boolean;
+    readonly LinkedCellOverride?: React.ReactNode;
+    /**
+     * @deprecated
+     */
+    readonly listPreferences?: ListPreferences;
+    /**
+     * @deprecated
+     */
+    readonly preferenceKey?: string;
+    /**
+     * @deprecated
+     */
+    readonly renderRowTypes?: boolean;
+    /**
+     * @deprecated
+     */
+    readonly setTable?: (Table: React.ReactNode) => void;
+    /**
+     * @deprecated
+     */
+    readonly sortColumnProps?: Partial<SortColumnProps>;
+    /**
+     * @deprecated
+     */
+    readonly tableAppearance?: 'condensed' | 'default';
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/elements/TableColumns/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/TableColumns/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAE7D,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACpC,UAAU,EAAE,CAAC,IAAI,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC3E,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC,gBAAgB,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACtD,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CAChD;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC1C,QAAQ,CAAC,WAAW,EAAE,MAAM,EAAE,CAAA;IAC9B;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAA;IACrB;;OAEG;IACH,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7C;;OAEG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,eAAe,CAAA;IAC1C;;OAEG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B;;OAEG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAA;IACpD;;OAEG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;IACnD;;OAEG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;CACnD,CAAA"}

package/dist/elements/TableColumns/types.js

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

package/dist/elements/TableColumns/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/TableColumns/types.ts"],"sourcesContent":["import type { Column, ListPreferences } from 'payload'\n\nimport type { SortColumnProps } from '../SortColumn/index.js'\n\nexport interface ITableColumns {\n  columns: Column[]\n  LinkedCellOverride?: React.ReactNode\n  moveColumn: (args: { fromIndex: number; toIndex: number }) => Promise<void>\n  resetColumnsState: () => Promise<void>\n  setActiveColumns: (columns: string[]) => Promise<void>\n  toggleColumn: (column: string) => Promise<void>\n}\n\nexport type TableColumnsProviderProps = {\n  readonly children: React.ReactNode\n  readonly collectionSlug: string | string[]\n  readonly columnState: Column[]\n  /**\n   * @deprecated\n   */\n  readonly docs?: any[]\n  /**\n   * @deprecated\n   */\n  readonly enableRowSelections?: boolean\n  readonly LinkedCellOverride?: React.ReactNode\n  /**\n   * @deprecated\n   */\n  readonly listPreferences?: ListPreferences\n  /**\n   * @deprecated\n   */\n  readonly preferenceKey?: string\n  /**\n   * @deprecated\n   */\n  readonly renderRowTypes?: boolean\n  /**\n   * @deprecated\n   */\n  readonly setTable?: (Table: React.ReactNode) => void\n  /**\n   * @deprecated\n   */\n  readonly sortColumnProps?: Partial<SortColumnProps>\n  /**\n   * @deprecated\n   */\n  readonly tableAppearance?: 'condensed' | 'default'\n}\n"],"mappings":"AAaA","ignoreList":[]}

package/dist/elements/WhereBuilder/Condition/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { AddCondition, ReducedField, UpdateCondition } from '../types.js';
+import type { AddCondition, ReducedField, RemoveCondition, UpdateCondition } from '../types.js';
 export type Props = {
     readonly addCondition: AddCondition;
     readonly andIndex: number;
@@ -8,10 +8,7 @@ export type Props = {
     readonly operator: Operator;
     readonly orIndex: number;
     readonly reducedFields: ReducedField[];
-    readonly removeCondition: ({ andIndex, orIndex }: {
-        andIndex: number;
-        orIndex: number;
-    }) => void;
+    readonly removeCondition: RemoveCondition;
     readonly RenderedFilter: React.ReactNode;
     readonly updateCondition: UpdateCondition;
     readonly value: string;

package/dist/elements/WhereBuilder/Condition/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/WhereBuilder/Condition/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE9E,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAA;IACnC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,aAAa,EAAE,qBAAqB,CAAA;IAC7C,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAA;IAC3B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,aAAa,EAAE,YAAY,EAAE,CAAA;IACtC,QAAQ,CAAC,eAAe,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAChG,QAAQ,CAAC,cAAc,EAAE,KAAK,CAAC,SAAS,CAAA;IACxC,QAAQ,CAAC,eAAe,EAAE,eAAe,CAAA;IACzC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,OAAO,KAAK,EAAE,QAAQ,EAA2B,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAUvF,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+JrC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/WhereBuilder/Condition/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE/F,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAA;IACnC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,aAAa,EAAE,qBAAqB,CAAA;IAC7C,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAA;IAC3B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,aAAa,EAAE,YAAY,EAAE,CAAA;IACtC,QAAQ,CAAC,eAAe,EAAE,eAAe,CAAA;IACzC,QAAQ,CAAC,cAAc,EAAE,KAAK,CAAC,SAAS,CAAA;IACxC,QAAQ,CAAC,eAAe,EAAE,eAAe,CAAA;IACzC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,OAAO,KAAK,EAAE,QAAQ,EAA2B,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAUvF,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+JrC,CAAA"}

package/dist/elements/WhereBuilder/Condition/index.js

@@ -43,9 +43,9 @@ export const Condition = props => {
   } else if (reducedField?.field && 'options' in reducedField.field) {
     valueOptions = reducedField.field.options;
   }
-  const updateValue = useEffectEvent(debouncedValue_0 => {
+  const updateValue = useEffectEvent(async debouncedValue_0 => {
     if (operator) {
-      updateCondition({
+      await updateCondition({
         andIndex,
         field: reducedField,
         operator,
@@ -55,12 +55,12 @@ export const Condition = props => {
     }
   });
   useEffect(() => {
-    updateValue(debouncedValue);
+    void updateValue(debouncedValue);
   }, [debouncedValue]);
   const disabled = !reducedField?.value && typeof reducedField?.value !== 'number' || reducedField?.field?.admin?.disableListFilter;
-  const handleFieldChange = useCallback(field_0 => {
+  const handleFieldChange = useCallback(async field_0 => {
     setInternalValue(undefined);
-    updateCondition({
+    await updateCondition({
       andIndex,
       field: reducedFields.find(option => option.value === field_0.value),
       operator,
@@ -68,8 +68,8 @@ export const Condition = props => {
       value: undefined
     });
   }, [andIndex, operator, orIndex, reducedFields, updateCondition]);
-  const handleOperatorChange = useCallback(operator_0 => {
-    updateCondition({
+  const handleOperatorChange = useCallback(async operator_0 => {
+    await updateCondition({
       andIndex,
       field: reducedField,
       operator: operator_0.value,

package/dist/elements/WhereBuilder/Condition/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useState","useDebounce","useEffectEvent","useTranslation","Button","ReactSelect","DefaultFilter","baseClass","Condition","props","addCondition","andIndex","fieldName","filterOptions","operator","orIndex","reducedFields","removeCondition","RenderedFilter","updateCondition","value","t","reducedField","find","field","internalValue","setInternalValue","debouncedValue","booleanSelect","includes","type","valueOptions","label","options","updateValue","disabled","admin","disableListFilter","handleFieldChange","undefined","option","handleOperatorChange","_jsx","className","_jsxs","isClearable","onChange","filter","operators","o","internalField","buttonStyle","icon","iconStyle","onClick","round","relation"],"sources":["../../../../src/elements/WhereBuilder/Condition/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { AddCondition, ReducedField, UpdateCondition } from '../types.js'\n\nexport type Props = {\n  readonly addCondition: AddCondition\n  readonly andIndex: number\n  readonly fieldName: string\n  readonly filterOptions: ResolvedFilterOptions\n  readonly operator: Operator\n  readonly orIndex: number\n  readonly reducedFields: ReducedField[]\n  readonly removeCondition: ({ andIndex, orIndex }: { andIndex: number; orIndex: number }) => void\n  readonly RenderedFilter: React.ReactNode\n  readonly updateCondition: UpdateCondition\n  readonly value: string\n}\n\nimport type { Operator, Option as PayloadOption, ResolvedFilterOptions } from 'payload'\n\nimport type { Option } from '../../ReactSelect/index.js'\n\nimport { useDebounce } from '../../../hooks/useDebounce.js'\nimport { useEffectEvent } from '../../../hooks/useEffectEvent.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { ReactSelect } from '../../ReactSelect/index.js'\nimport { DefaultFilter } from './DefaultFilter/index.js'\nimport './index.scss'\n\nconst baseClass = 'condition'\n\nexport const Condition: React.FC<Props> = (props) => {\n  const {\n    addCondition,\n    andIndex,\n    fieldName,\n    filterOptions,\n    operator,\n    orIndex,\n    reducedFields,\n    removeCondition,\n    RenderedFilter,\n    updateCondition,\n    value,\n  } = props\n\n  const { t } = useTranslation()\n\n  const reducedField = reducedFields.find((field) => field.value === fieldName)\n\n  const [internalValue, setInternalValue] = useState<string>(value)\n\n  const debouncedValue = useDebounce(internalValue, 300)\n\n  const booleanSelect = ['exists'].includes(operator) || reducedField?.field?.type === 'checkbox'\n\n  let valueOptions: PayloadOption[] = []\n\n  if (booleanSelect) {\n    valueOptions = [\n      { label: t('general:true'), value: 'true' },\n      { label: t('general:false'), value: 'false' },\n    ]\n  } else if (reducedField?.field && 'options' in reducedField.field) {\n    valueOptions = reducedField.field.options\n  }\n\n  const updateValue = useEffectEvent((debouncedValue) => {\n    if (operator) {\n      updateCondition({\n        andIndex,\n        field: reducedField,\n        operator,\n        orIndex,\n        value: debouncedValue === null ? '' : debouncedValue,\n      })\n    }\n  })\n\n  useEffect(() => {\n    updateValue(debouncedValue)\n  }, [debouncedValue])\n\n  const disabled =\n    (!reducedField?.value && typeof reducedField?.value !== 'number') ||\n    reducedField?.field?.admin?.disableListFilter\n\n  const handleFieldChange = useCallback(\n    (field: Option<string>) => {\n      setInternalValue(undefined)\n      updateCondition({\n        andIndex,\n        field: reducedFields.find((option) => option.value === field.value),\n        operator,\n        orIndex,\n        value: undefined,\n      })\n    },\n    [andIndex, operator, orIndex, reducedFields, updateCondition],\n  )\n\n  const handleOperatorChange = useCallback(\n    (operator: Option<Operator>) => {\n      updateCondition({\n        andIndex,\n        field: reducedField,\n        operator: operator.value,\n        orIndex,\n        value,\n      })\n    },\n    [andIndex, reducedField, orIndex, updateCondition, value],\n  )\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <div className={`${baseClass}__inputs`}>\n          <div className={`${baseClass}__field`}>\n            <ReactSelect\n              disabled={disabled}\n              isClearable={false}\n              onChange={handleFieldChange}\n              options={reducedFields.filter((field) => !field.field.admin.disableListFilter)}\n              value={\n                reducedField || {\n                  value: reducedField?.value,\n                }\n              }\n            />\n          </div>\n          <div className={`${baseClass}__operator`}>\n            <ReactSelect\n              disabled={disabled}\n              isClearable={false}\n              onChange={handleOperatorChange}\n              options={reducedField?.operators}\n              value={reducedField?.operators.find((o) => operator === o.value) || null}\n            />\n          </div>\n          <div className={`${baseClass}__value`}>\n            {RenderedFilter || (\n              <DefaultFilter\n                booleanSelect={booleanSelect}\n                disabled={\n                  !operator || !reducedField || reducedField?.field?.admin?.disableListFilter\n                }\n                filterOptions={filterOptions}\n                internalField={reducedField}\n                onChange={setInternalValue}\n                operator={operator}\n                options={valueOptions}\n                value={internalValue ?? ''}\n              />\n            )}\n          </div>\n        </div>\n        <div className={`${baseClass}__actions`}>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__actions-remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={() =>\n              removeCondition({\n                andIndex,\n                orIndex,\n              })\n            }\n            round\n          />\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__actions-add`}\n            icon=\"plus\"\n            iconStyle=\"with-border\"\n            onClick={() =>\n              addCondition({\n                andIndex: andIndex + 1,\n                field: reducedFields.find((field) => !field.field.admin?.disableListFilter),\n                orIndex,\n                relation: 'and',\n              })\n            }\n            round\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useState","useDebounce","useEffectEvent","useTranslation","Button","ReactSelect","DefaultFilter","baseClass","Condition","props","addCondition","andIndex","fieldName","filterOptions","operator","orIndex","reducedFields","removeCondition","RenderedFilter","updateCondition","value","t","reducedField","find","field","internalValue","setInternalValue","debouncedValue","booleanSelect","includes","type","valueOptions","label","options","updateValue","disabled","admin","disableListFilter","handleFieldChange","undefined","option","handleOperatorChange","_jsx","className","_jsxs","isClearable","onChange","filter","operators","o","internalField","buttonStyle","icon","iconStyle","onClick","round","relation"],"sources":["../../../../src/elements/WhereBuilder/Condition/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { AddCondition, ReducedField, RemoveCondition, UpdateCondition } from '../types.js'\n\nexport type Props = {\n  readonly addCondition: AddCondition\n  readonly andIndex: number\n  readonly fieldName: string\n  readonly filterOptions: ResolvedFilterOptions\n  readonly operator: Operator\n  readonly orIndex: number\n  readonly reducedFields: ReducedField[]\n  readonly removeCondition: RemoveCondition\n  readonly RenderedFilter: React.ReactNode\n  readonly updateCondition: UpdateCondition\n  readonly value: string\n}\n\nimport type { Operator, Option as PayloadOption, ResolvedFilterOptions } from 'payload'\n\nimport type { Option } from '../../ReactSelect/index.js'\n\nimport { useDebounce } from '../../../hooks/useDebounce.js'\nimport { useEffectEvent } from '../../../hooks/useEffectEvent.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { ReactSelect } from '../../ReactSelect/index.js'\nimport { DefaultFilter } from './DefaultFilter/index.js'\nimport './index.scss'\n\nconst baseClass = 'condition'\n\nexport const Condition: React.FC<Props> = (props) => {\n  const {\n    addCondition,\n    andIndex,\n    fieldName,\n    filterOptions,\n    operator,\n    orIndex,\n    reducedFields,\n    removeCondition,\n    RenderedFilter,\n    updateCondition,\n    value,\n  } = props\n\n  const { t } = useTranslation()\n\n  const reducedField = reducedFields.find((field) => field.value === fieldName)\n\n  const [internalValue, setInternalValue] = useState<string>(value)\n\n  const debouncedValue = useDebounce(internalValue, 300)\n\n  const booleanSelect = ['exists'].includes(operator) || reducedField?.field?.type === 'checkbox'\n\n  let valueOptions: PayloadOption[] = []\n\n  if (booleanSelect) {\n    valueOptions = [\n      { label: t('general:true'), value: 'true' },\n      { label: t('general:false'), value: 'false' },\n    ]\n  } else if (reducedField?.field && 'options' in reducedField.field) {\n    valueOptions = reducedField.field.options\n  }\n\n  const updateValue = useEffectEvent(async (debouncedValue) => {\n    if (operator) {\n      await updateCondition({\n        andIndex,\n        field: reducedField,\n        operator,\n        orIndex,\n        value: debouncedValue === null ? '' : debouncedValue,\n      })\n    }\n  })\n\n  useEffect(() => {\n    void updateValue(debouncedValue)\n  }, [debouncedValue])\n\n  const disabled =\n    (!reducedField?.value && typeof reducedField?.value !== 'number') ||\n    reducedField?.field?.admin?.disableListFilter\n\n  const handleFieldChange = useCallback(\n    async (field: Option<string>) => {\n      setInternalValue(undefined)\n      await updateCondition({\n        andIndex,\n        field: reducedFields.find((option) => option.value === field.value),\n        operator,\n        orIndex,\n        value: undefined,\n      })\n    },\n    [andIndex, operator, orIndex, reducedFields, updateCondition],\n  )\n\n  const handleOperatorChange = useCallback(\n    async (operator: Option<Operator>) => {\n      await updateCondition({\n        andIndex,\n        field: reducedField,\n        operator: operator.value,\n        orIndex,\n        value,\n      })\n    },\n    [andIndex, reducedField, orIndex, updateCondition, value],\n  )\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <div className={`${baseClass}__inputs`}>\n          <div className={`${baseClass}__field`}>\n            <ReactSelect\n              disabled={disabled}\n              isClearable={false}\n              onChange={handleFieldChange}\n              options={reducedFields.filter((field) => !field.field.admin.disableListFilter)}\n              value={\n                reducedField || {\n                  value: reducedField?.value,\n                }\n              }\n            />\n          </div>\n          <div className={`${baseClass}__operator`}>\n            <ReactSelect\n              disabled={disabled}\n              isClearable={false}\n              onChange={handleOperatorChange}\n              options={reducedField?.operators}\n              value={reducedField?.operators.find((o) => operator === o.value) || null}\n            />\n          </div>\n          <div className={`${baseClass}__value`}>\n            {RenderedFilter || (\n              <DefaultFilter\n                booleanSelect={booleanSelect}\n                disabled={\n                  !operator || !reducedField || reducedField?.field?.admin?.disableListFilter\n                }\n                filterOptions={filterOptions}\n                internalField={reducedField}\n                onChange={setInternalValue}\n                operator={operator}\n                options={valueOptions}\n                value={internalValue ?? ''}\n              />\n            )}\n          </div>\n        </div>\n        <div className={`${baseClass}__actions`}>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__actions-remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={() =>\n              removeCondition({\n                andIndex,\n                orIndex,\n              })\n            }\n            round\n          />\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__actions-add`}\n            icon=\"plus\"\n            iconStyle=\"with-border\"\n            onClick={() =>\n              addCondition({\n                andIndex: andIndex + 1,\n                field: reducedFields.find((field) => !field.field.admin?.disableListFilter),\n                orIndex,\n                relation: 'and',\n              })\n            }\n            round\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/WhereBuilder/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAiC,iBAAiB,EAAE,MAAM,YAAY,CAAA;AASlF,OAAO,cAAc,CAAA;AAMrB,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAE5B;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6MpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/WhereBuilder/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAkD,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAUnG,OAAO,cAAc,CAAA;AAIrB,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAE5B;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+LpD,CAAA"}

package/dist/elements/WhereBuilder/index.js

@@ -3,16 +3,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React, { useMemo } from 'react';
-import { useEffectEvent } from '../../hooks/useEffectEvent.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
 import { Condition } from './Condition/index.js';
 import fieldTypes from './field-types.js';
 import { reduceFields } from './reduceFields.js';
-import './index.scss';
 import { transformWhereQuery } from './transformWhereQuery.js';
 import validateWhereQuery from './validateWhereQuery.js';
+import './index.scss';
 const baseClass = 'where-builder';
 /**
  * The WhereBuilder component is used to render the filter controls for a collection's list view.
@@ -37,8 +36,7 @@ export const WhereBuilder = props => {
     handleWhereChange,
     query
   } = useListQuery();
-  const [shouldUpdateQuery, setShouldUpdateQuery] = React.useState(false);
-  const [conditions, setConditions] = React.useState(() => {
+  const conditions = useMemo(() => {
     const whereFromSearch = query.where;
     if (whereFromSearch) {
       if (validateWhereQuery(whereFromSearch)) {
@@ -53,8 +51,8 @@ export const WhereBuilder = props => {
       ;
     }
     return [];
-  });
-  const addCondition = React.useCallback(({
+  }, [query.where]);
+  const addCondition = React.useCallback(async ({
     andIndex,
     field,
     orIndex,
@@ -77,9 +75,11 @@ export const WhereBuilder = props => {
         }]
       });
     }
-    setConditions(newConditions);
-  }, [conditions]);
-  const updateCondition = React.useCallback(({
+    await handleWhereChange({
+      or: newConditions
+    });
+  }, [conditions, handleWhereChange]);
+  const updateCondition = React.useCallback(async ({
     andIndex: andIndex_0,
     field: field_0,
     operator: incomingOperator,
@@ -98,11 +98,12 @@ export const WhereBuilder = props => {
       };
       const newConditions_0 = [...conditions];
       newConditions_0[orIndex_0].and[andIndex_0] = newRowCondition;
-      setConditions(newConditions_0);
-      setShouldUpdateQuery(true);
+      await handleWhereChange({
+        or: newConditions_0
+      });
     }
-  }, [conditions]);
-  const removeCondition = React.useCallback(({
+  }, [conditions, handleWhereChange]);
+  const removeCondition = React.useCallback(async ({
     andIndex: andIndex_1,
     orIndex: orIndex_1
   }) => {
@@ -111,20 +112,10 @@ export const WhereBuilder = props => {
     if (newConditions_1[orIndex_1].and.length === 0) {
       newConditions_1.splice(orIndex_1, 1);
     }
-    setConditions(newConditions_1);
-    setShouldUpdateQuery(true);
-  }, [conditions]);
-  const handleChange = useEffectEvent(async conditions_0 => {
-    if (shouldUpdateQuery) {
-      await handleWhereChange({
-        or: conditions_0
-      });
-      setShouldUpdateQuery(false);
-    }
-  });
-  React.useEffect(() => {
-    void handleChange(conditions);
-  }, [conditions]);
+    await handleWhereChange({
+      or: newConditions_1
+    });
+  }, [conditions, handleWhereChange]);
   return /*#__PURE__*/_jsxs("div", {
     className: baseClass,
     children: [conditions.length > 0 && /*#__PURE__*/_jsxs(React.Fragment, {
@@ -176,8 +167,8 @@ export const WhereBuilder = props => {
         icon: "plus",
         iconPosition: "left",
         iconStyle: "with-border",
-        onClick: () => {
-          addCondition({
+        onClick: async () => {
+          await addCondition({
             andIndex: 0,
             field: reducedFields[0],
             orIndex: conditions.length,
@@ -197,9 +188,9 @@ export const WhereBuilder = props => {
         icon: "plus",
         iconPosition: "left",
         iconStyle: "with-border",
-        onClick: () => {
+        onClick: async () => {
           if (reducedFields.length > 0) {
-            addCondition({
+            await addCondition({
               andIndex: 0,
               field: reducedFields.find(field_1 => !field_1.field.admin?.disableListFilter),
               orIndex: conditions.length,