@payloadcms/ui 3.0.0-alpha.49 → 3.0.0-alpha.50

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

@@ -17,52 +17,46 @@ const valueFields = {
 };
 const baseClass = 'condition';
 export const Condition = (props)=>{
-    const { andIndex, dispatch, fields, orIndex, value } = props;
-    const fieldName = Object.keys(value)[0];
-    const [activeField, setActiveField] = useState(()=>fields.find((field)=>fieldName === field.value));
-    const operatorAndValue = value?.[fieldName] ? Object.entries(value[fieldName])[0] : undefined;
-    const queryValue = operatorAndValue?.[1];
-    const operatorValue = operatorAndValue?.[0];
-    const [internalValue, setInternalValue] = useState(queryValue);
-    const [internalOperatorField, setInternalOperatorField] = useState(operatorValue);
-    const debouncedValue = useDebounce(internalValue, 300);
+    const { addCondition, andIndex, fieldName, fields, initialValue, operator, orIndex, removeCondition, updateCondition } = props;
+    const [internalField, setInternalField] = useState(()=>fields.find((field)=>fieldName === field.value));
+    const [internalOperatorOption, setInternalOperatorOption] = useState(operator);
+    const [internalQueryValue, setInternalQueryValue] = useState(initialValue);
+    const debouncedValue = useDebounce(internalQueryValue, 300);
     useEffect(()=>{
-        const newActiveField = fields.find(({ value: name })=>name === fieldName);
-        if (newActiveField && newActiveField !== activeField) {
-            setActiveField(newActiveField);
-            setInternalOperatorField(null);
-            setInternalValue('');
+        // This is to trigger changes when the debounced value changes
+        if (internalField.value && internalOperatorOption && ![
+            null,
+            undefined
+        ].includes(debouncedValue)) {
+            updateCondition({
+                andIndex,
+                fieldName: internalField.value,
+                operator: internalOperatorOption,
+                orIndex,
+                value: debouncedValue
+            });
         }
-    }, [
-        fieldName,
-        fields,
-        activeField
-    ]);
-    useEffect(()=>{
-        dispatch({
-            type: 'update',
-            andIndex,
-            orIndex,
-            value: debouncedValue || ''
-        });
     }, [
         debouncedValue,
-        dispatch,
+        andIndex,
+        internalField?.value,
+        internalOperatorOption,
         orIndex,
-        andIndex
+        updateCondition,
+        operator
     ]);
     const booleanSelect = [
         'exists'
-    ].includes(operatorValue) || activeField?.props?.type === 'checkbox';
-    const ValueComponent = booleanSelect ? Select : valueFields[activeField?.component] || valueFields.Text;
+    ].includes(internalOperatorOption) || internalField?.props?.type === 'checkbox';
+    const ValueComponent = booleanSelect ? Select : valueFields[internalField?.component] || valueFields.Text;
     let valueOptions;
     if (booleanSelect) {
         valueOptions = [
             'true',
             'false'
         ];
-    } else if (activeField?.props && 'options' in activeField.props) {
-        valueOptions = activeField.props.options;
+    } else if (internalField?.props && 'options' in internalField.props) {
+        valueOptions = internalField.props.options;
     }
     return /*#__PURE__*/ React.createElement("div", {
         className: baseClass
@@ -75,43 +69,35 @@ export const Condition = (props)=>{
     }, /*#__PURE__*/ React.createElement(ReactSelect, {
         isClearable: false,
         onChange: (field)=>{
-            dispatch({
-                type: 'update',
-                andIndex,
-                field: field?.value,
-                orIndex
-            });
+            setInternalField(fields.find((f)=>f.value === field.value));
+            setInternalOperatorOption(undefined);
+            setInternalQueryValue(undefined);
         },
         options: fields,
-        value: fields.find((field)=>fieldName === field.value)
+        value: fields.find((field)=>internalField.value === field.value) || fields[0]
     })), /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__operator`
     }, /*#__PURE__*/ React.createElement(ReactSelect, {
-        disabled: !fieldName,
+        disabled: !internalField.value,
         isClearable: false,
         onChange: (operator)=>{
-            dispatch({
-                type: 'update',
-                andIndex,
-                operator: operator.value,
-                orIndex
-            });
-            setInternalOperatorField(operator.value);
+            setInternalOperatorOption(operator.value);
         },
-        options: activeField?.operators,
-        value: activeField?.operators.find((operator)=>internalOperatorField === operator.value) || null
+        options: internalField?.operators,
+        value: internalField?.operators.find((operator)=>internalOperatorOption === operator.value) || null
     })), /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__value`
     }, /*#__PURE__*/ React.createElement(RenderCustomComponent, {
-        CustomComponent: activeField?.props?.admin?.components?.Filter,
+        CustomComponent: internalField?.props?.admin?.components?.Filter,
         DefaultComponent: ValueComponent,
         componentProps: {
-            ...activeField?.props,
-            disabled: !operatorValue,
-            onChange: setInternalValue,
-            operator: operatorValue,
+            ...internalField?.props,
+            disabled: !internalOperatorOption,
+            onChange: setInternalQueryValue,
+            operator: internalOperatorOption,
             options: valueOptions,
-            value: internalValue
+            relationTo: internalField?.props?.type === 'relationship' && 'cellProps' in internalField.props && typeof internalField.props.cellProps === 'object' && 'relationTo' in internalField.props.cellProps ? internalField.props.cellProps?.relationTo : undefined,
+            value: internalQueryValue ?? ''
         }
     }))), /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__actions`
@@ -120,8 +106,7 @@ export const Condition = (props)=>{
         className: `${baseClass}__actions-remove`,
         icon: "x",
         iconStyle: "with-border",
-        onClick: ()=>dispatch({
-                type: 'remove',
+        onClick: ()=>removeCondition({
                 andIndex,
                 orIndex
             }),
@@ -131,10 +116,9 @@ export const Condition = (props)=>{
         className: `${baseClass}__actions-add`,
         icon: "plus",
         iconStyle: "with-border",
-        onClick: ()=>dispatch({
-                type: 'add',
-                andIndex: andIndex + 1,
-                field: fields[0].value,
+        onClick: ()=>addCondition({
+                andIndex,
+                fieldName,
                 orIndex,
                 relation: 'and'
             }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/WhereBuilder/Condition/index.tsx"],"sourcesContent":["import type { Where } from 'payload/types'\n\nimport React, { useEffect, useState } from 'react'\n\nimport type { Action, FieldCondition } from '../types.js'\n\nexport type Props = {\n  andIndex: number\n  dispatch: (action: Action) => void\n  fields: FieldCondition[]\n  orIndex: number\n  value: Where\n}\n\nimport { RenderCustomComponent } from '../../../elements/RenderCustomComponent/index.js'\nimport { useDebounce } from '../../../hooks/useDebounce.js'\nimport { Button } from '../../Button/index.js'\nimport { ReactSelect } from '../../ReactSelect/index.js'\nimport { DateField } from './Date/index.js'\nimport { NumberField } from './Number/index.js'\nimport { RelationshipField } from './Relationship/index.js'\nimport { Select } from './Select/index.js'\nimport Text from './Text/index.js'\nimport './index.scss'\n\ntype ComponentType = 'Date' | 'Number' | 'Relationship' | 'Select' | 'Text'\nconst valueFields: Record<ComponentType, React.FC> = {\n  Date: DateField,\n  Number: NumberField,\n  Relationship: RelationshipField,\n  Select,\n  Text,\n}\n\nconst baseClass = 'condition'\n\nexport const Condition: React.FC<Props> = (props) => {\n  const { andIndex, dispatch, fields, orIndex, value } = props\n  const fieldName = Object.keys(value)[0]\n  const [activeField, setActiveField] = useState<FieldCondition>(() =>\n    fields.find((field) => fieldName === field.value),\n  )\n\n  const operatorAndValue = value?.[fieldName] ? Object.entries(value[fieldName])[0] : undefined\n  const queryValue = operatorAndValue?.[1]\n  const operatorValue = operatorAndValue?.[0]\n\n  const [internalValue, setInternalValue] = useState(queryValue)\n  const [internalOperatorField, setInternalOperatorField] = useState(operatorValue)\n\n  const debouncedValue = useDebounce(internalValue, 300)\n\n  useEffect(() => {\n    const newActiveField = fields.find(({ value: name }) => name === fieldName)\n\n    if (newActiveField && newActiveField !== activeField) {\n      setActiveField(newActiveField)\n      setInternalOperatorField(null)\n      setInternalValue('')\n    }\n  }, [fieldName, fields, activeField])\n\n  useEffect(() => {\n    dispatch({\n      type: 'update',\n      andIndex,\n      orIndex,\n      value: debouncedValue || '',\n    })\n  }, [debouncedValue, dispatch, orIndex, andIndex])\n\n  const booleanSelect =\n    ['exists'].includes(operatorValue) || activeField?.props?.type === 'checkbox'\n  const ValueComponent = booleanSelect\n    ? Select\n    : valueFields[activeField?.component] || valueFields.Text\n\n  let valueOptions\n  if (booleanSelect) {\n    valueOptions = ['true', 'false']\n  } else if (activeField?.props && 'options' in activeField.props) {\n    valueOptions = activeField.props.options\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              isClearable={false}\n              onChange={(field) => {\n                dispatch({\n                  type: 'update',\n                  andIndex,\n                  field: field?.value,\n                  orIndex,\n                })\n              }}\n              options={fields}\n              value={fields.find((field) => fieldName === field.value)}\n            />\n          </div>\n          <div className={`${baseClass}__operator`}>\n            <ReactSelect\n              disabled={!fieldName}\n              isClearable={false}\n              onChange={(operator) => {\n                dispatch({\n                  type: 'update',\n                  andIndex,\n                  operator: operator.value,\n                  orIndex,\n                })\n                setInternalOperatorField(operator.value)\n              }}\n              options={activeField?.operators}\n              value={\n                activeField?.operators.find(\n                  (operator) => internalOperatorField === operator.value,\n                ) || null\n              }\n            />\n          </div>\n          <div className={`${baseClass}__value`}>\n            <RenderCustomComponent\n              CustomComponent={activeField?.props?.admin?.components?.Filter}\n              DefaultComponent={ValueComponent}\n              componentProps={{\n                ...activeField?.props,\n                disabled: !operatorValue,\n                onChange: setInternalValue,\n                operator: operatorValue,\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              dispatch({\n                type: 'remove',\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              dispatch({\n                type: 'add',\n                andIndex: andIndex + 1,\n                field: fields[0].value,\n                orIndex,\n                relation: 'and',\n              })\n            }\n            round\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["React","useEffect","useState","RenderCustomComponent","useDebounce","Button","ReactSelect","DateField","NumberField","RelationshipField","Select","Text","valueFields","Date","Number","Relationship","baseClass","Condition","props","andIndex","dispatch","fields","orIndex","value","fieldName","Object","keys","activeField","setActiveField","find","field","operatorAndValue","entries","undefined","queryValue","operatorValue","internalValue","setInternalValue","internalOperatorField","setInternalOperatorField","debouncedValue","newActiveField","name","type","booleanSelect","includes","ValueComponent","component","valueOptions","options","div","className","isClearable","onChange","disabled","operator","operators","CustomComponent","admin","components","Filter","DefaultComponent","componentProps","buttonStyle","icon","iconStyle","onClick","round","relation"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/elements/WhereBuilder/Condition/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\n\nimport type { FieldCondition } from '../types.js'\n\nexport type Props = {\n  addCondition: ({\n    andIndex,\n    fieldName,\n    orIndex,\n    relation,\n  }: {\n    andIndex: number\n    fieldName: string\n    orIndex: number\n    relation: 'and' | 'or'\n  }) => void\n  andIndex: number\n  fieldName: string\n  fields: FieldCondition[]\n  initialValue: string\n  operator: string\n  orIndex: number\n  removeCondition: ({ andIndex, orIndex }: { andIndex: number; orIndex: number }) => void\n  updateCondition: ({\n    andIndex,\n    fieldName,\n    operator,\n    orIndex,\n    value,\n  }: {\n    andIndex: number\n    fieldName: string\n    operator: string\n    orIndex: number\n    value: string\n  }) => void\n}\n\nimport type { RelationshipFieldProps } from '@payloadcms/ui/fields/Relationship'\n\nimport { RenderCustomComponent } from '../../../elements/RenderCustomComponent/index.js'\nimport { useDebounce } from '../../../hooks/useDebounce.js'\nimport { Button } from '../../Button/index.js'\nimport { ReactSelect } from '../../ReactSelect/index.js'\nimport { DateField } from './Date/index.js'\nimport { NumberField } from './Number/index.js'\nimport { RelationshipField } from './Relationship/index.js'\nimport { Select } from './Select/index.js'\nimport Text from './Text/index.js'\nimport './index.scss'\n\ntype ComponentType = 'Date' | 'Number' | 'Relationship' | 'Select' | 'Text'\nconst valueFields: Record<ComponentType, React.FC> = {\n  Date: DateField,\n  Number: NumberField,\n  Relationship: RelationshipField,\n  Select,\n  Text,\n}\n\nconst baseClass = 'condition'\n\nexport const Condition: React.FC<Props> = (props) => {\n  const {\n    addCondition,\n    andIndex,\n    fieldName,\n    fields,\n    initialValue,\n    operator,\n    orIndex,\n    removeCondition,\n    updateCondition,\n  } = props\n  const [internalField, setInternalField] = useState<FieldCondition>(() =>\n    fields.find((field) => fieldName === field.value),\n  )\n  const [internalOperatorOption, setInternalOperatorOption] = useState(operator)\n  const [internalQueryValue, setInternalQueryValue] = useState<string>(initialValue)\n\n  const debouncedValue = useDebounce(internalQueryValue, 300)\n\n  useEffect(() => {\n    // This is to trigger changes when the debounced value changes\n    if (\n      internalField.value &&\n      internalOperatorOption &&\n      ![null, undefined].includes(debouncedValue)\n    ) {\n      updateCondition({\n        andIndex,\n        fieldName: internalField.value,\n        operator: internalOperatorOption,\n        orIndex,\n        value: debouncedValue,\n      })\n    }\n  }, [\n    debouncedValue,\n    andIndex,\n    internalField?.value,\n    internalOperatorOption,\n    orIndex,\n    updateCondition,\n    operator,\n  ])\n\n  const booleanSelect =\n    ['exists'].includes(internalOperatorOption) || internalField?.props?.type === 'checkbox'\n  const ValueComponent = booleanSelect\n    ? Select\n    : valueFields[internalField?.component] || valueFields.Text\n\n  let valueOptions\n  if (booleanSelect) {\n    valueOptions = ['true', 'false']\n  } else if (internalField?.props && 'options' in internalField.props) {\n    valueOptions = internalField.props.options\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              isClearable={false}\n              onChange={(field) => {\n                setInternalField(fields.find((f) => f.value === field.value))\n                setInternalOperatorOption(undefined)\n                setInternalQueryValue(undefined)\n              }}\n              options={fields}\n              value={fields.find((field) => internalField.value === field.value) || fields[0]}\n            />\n          </div>\n          <div className={`${baseClass}__operator`}>\n            <ReactSelect\n              disabled={!internalField.value}\n              isClearable={false}\n              onChange={(operator) => {\n                setInternalOperatorOption(operator.value)\n              }}\n              options={internalField?.operators}\n              value={\n                internalField?.operators.find(\n                  (operator) => internalOperatorOption === operator.value,\n                ) || null\n              }\n            />\n          </div>\n          <div className={`${baseClass}__value`}>\n            <RenderCustomComponent\n              CustomComponent={internalField?.props?.admin?.components?.Filter}\n              DefaultComponent={ValueComponent}\n              componentProps={{\n                ...internalField?.props,\n                disabled: !internalOperatorOption,\n                onChange: setInternalQueryValue,\n                operator: internalOperatorOption,\n                options: valueOptions,\n                relationTo:\n                  internalField?.props?.type === 'relationship' &&\n                  'cellProps' in internalField.props &&\n                  typeof internalField.props.cellProps === 'object' &&\n                  'relationTo' in internalField.props.cellProps\n                    ? internalField.props.cellProps?.relationTo\n                    : undefined,\n                value: internalQueryValue ?? '',\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,\n                fieldName,\n                orIndex,\n                relation: 'and',\n              })\n            }\n            round\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["React","useEffect","useState","RenderCustomComponent","useDebounce","Button","ReactSelect","DateField","NumberField","RelationshipField","Select","Text","valueFields","Date","Number","Relationship","baseClass","Condition","props","addCondition","andIndex","fieldName","fields","initialValue","operator","orIndex","removeCondition","updateCondition","internalField","setInternalField","find","field","value","internalOperatorOption","setInternalOperatorOption","internalQueryValue","setInternalQueryValue","debouncedValue","undefined","includes","booleanSelect","type","ValueComponent","component","valueOptions","options","div","className","isClearable","onChange","f","disabled","operators","CustomComponent","admin","components","Filter","DefaultComponent","componentProps","relationTo","cellProps","buttonStyle","icon","iconStyle","onClick","round","relation"],"mappings":"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"}

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

@@ -18,6 +18,12 @@
     }
   }
 
+  &__field {
+    .field-label {
+      padding-bottom: 0;
+    }
+  }
+
   &__actions {
     flex-shrink: 0;
     display: flex;

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,KAA+B,MAAM,OAAO,CAAA;AAEnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AASnD,OAAO,cAAc,CAAA;AAyCrB,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAE5B;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuGpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/WhereBuilder/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAQnD,OAAO,cAAc,CAAA;AAOrB,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAE5B;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0NpD,CAAA"}

package/dist/elements/WhereBuilder/index.js

@@ -1,66 +1,60 @@
 import { getTranslation } from '@payloadcms/translations';
-import { flattenTopLevelFields } from 'payload/utilities';
-import React, { useReducer, useState } from 'react';
-import { useConfig } from '../../providers/Config/index.js';
+import React, { useEffect, useState } from 'react';
 import { useListQuery } from '../../providers/ListQuery/index.js';
 import { useSearchParams } from '../../providers/SearchParams/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
+import { useTableColumns } from '../TableColumns/index.js';
 import { Condition } from './Condition/index.js';
-import fieldTypes from './field-types.js';
-import reducer from './reducer.js';
+import { reduceFieldMap } from './reduceFieldMap.js';
 import { transformWhereQuery } from './transformWhereQuery.js';
 import validateWhereQuery from './validateWhereQuery.js';
 const baseClass = 'where-builder';
-const reduceFields = (fields, i18n)=>flattenTopLevelFields(fields).reduce((reduced, field)=>{
-        if (typeof fieldTypes[field.type] === 'object') {
-            const operatorKeys = new Set();
-            const operators = fieldTypes[field.type].operators.reduce((acc, operator)=>{
-                if (!operatorKeys.has(operator.value)) {
-                    operatorKeys.add(operator.value);
-                    return [
-                        ...acc,
-                        {
-                            ...operator,
-                            label: i18n.t(`operators:${operator.label}`)
-                        }
-                    ];
-                }
-                return acc;
-            }, []);
-            const formattedField = {
-                label: getTranslation(field.label || field.name, i18n),
-                value: field.name,
-                ...fieldTypes[field.type],
-                operators,
-                props: {
-                    ...field
-                }
-            };
-            return [
-                ...reduced,
-                formattedField
-            ];
-        }
-        return reduced;
-    }, []);
 /**
  * The WhereBuilder component is used to render the filter controls for a collection's list view.
  * It is part of the {@link ListControls} component which is used to render the controls (search, filter, where).
  */ export const WhereBuilder = (props)=>{
-    const { collectionPluralLabel, collectionSlug } = props;
+    const { collectionPluralLabel } = props;
     const { i18n, t } = useTranslation();
-    const config = useConfig();
-    const collection = config.collections.find((c)=>c.slug === collectionSlug);
-    const [reducedFields] = useState(()=>reduceFields(collection.fields, i18n));
+    const { columns } = useTableColumns();
+    const [reducedFields, setReducedColumns] = useState(()=>reduceFieldMap(columns, i18n));
+    useEffect(()=>{
+        setReducedColumns(reduceFieldMap(columns, i18n));
+    }, [
+        columns,
+        i18n
+    ]);
     const { searchParams } = useSearchParams();
     const { handleWhereChange } = useListQuery();
+    const [shouldUpdateQuery, setShouldUpdateQuery] = React.useState(false);
     // This handles initializing the where conditions from the search query (URL). That way, if you pass in
     // query params to the URL, the where conditions will be initialized from those and displayed in the UI.
     // Example: /admin/collections/posts?where[or][0][and][0][text][equals]=example%20post
-    const [conditions, dispatchConditions] = useReducer(reducer((state)=>handleWhereChange({
-            or: state
-        })), searchParams.where, (whereFromSearch)=>{
+    /*
+    stored conditions look like this:
+    [
+      _or_ & _and_ queries have the same shape:
+      {
+        and: [{
+          category: {
+            equals: 'category-a'
+          }
+        }]
+      },
+
+      {
+        and:[{
+          category: {
+            equals: 'category-b'
+          },
+          text: {
+            not_equals: 'oranges'
+          },
+        }]
+      }
+    ]
+  */ const [conditions, setConditions] = React.useState(()=>{
+        const whereFromSearch = searchParams.where;
         if (whereFromSearch) {
             if (validateWhereQuery(whereFromSearch)) {
                 return whereFromSearch.or;
@@ -74,6 +68,76 @@ const reduceFields = (fields, i18n)=>flattenTopLevelFields(fields).reduce((reduc
         }
         return [];
     });
+    const addCondition = React.useCallback(({ andIndex, fieldName, orIndex, relation })=>{
+        setConditions((prevConditions)=>{
+            const newConditions = [
+                ...prevConditions
+            ];
+            if (relation === 'and') {
+                newConditions[orIndex].and.splice(andIndex, 0, {
+                    [fieldName]: {}
+                });
+            } else {
+                newConditions.push({
+                    and: [
+                        {
+                            [fieldName]: {}
+                        }
+                    ]
+                });
+            }
+            return newConditions;
+        });
+    }, []);
+    const updateCondition = React.useCallback(({ andIndex, fieldName: fieldNameArg, operator: operatorArg, orIndex, value: valueArg })=>{
+        setConditions((prevConditions)=>{
+            const newConditions = [
+                ...prevConditions
+            ];
+            if (typeof newConditions[orIndex].and[andIndex] === 'object') {
+                const fieldName = fieldNameArg;
+                const operator = operatorArg;
+                const value = valueArg ?? (operator ? newConditions[orIndex].and[andIndex][operator] : '');
+                if (fieldName && operator && ![
+                    null,
+                    undefined
+                ].includes(value)) {
+                    newConditions[orIndex].and[andIndex] = {
+                        [fieldName]: operator ? {
+                            [operator]: value
+                        } : {}
+                    };
+                    setShouldUpdateQuery(true);
+                }
+            }
+            return newConditions;
+        });
+    }, []);
+    const removeCondition = React.useCallback(({ andIndex, orIndex })=>{
+        setConditions((prevConditions)=>{
+            const newConditions = [
+                ...prevConditions
+            ];
+            newConditions[orIndex].and.splice(andIndex, 1);
+            if (newConditions[orIndex].and.length === 0) {
+                newConditions.splice(orIndex, 1);
+            }
+            return newConditions;
+        });
+        setShouldUpdateQuery(true);
+    }, []);
+    React.useEffect(()=>{
+        if (shouldUpdateQuery) {
+            handleWhereChange({
+                or: conditions
+            });
+            setShouldUpdateQuery(false);
+        }
+    }, [
+        conditions,
+        handleWhereChange,
+        shouldUpdateQuery
+    ]);
     return /*#__PURE__*/ React.createElement("div", {
         className: baseClass
     }, conditions.length > 0 && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
@@ -88,27 +152,38 @@ const reduceFields = (fields, i18n)=>flattenTopLevelFields(fields).reduce((reduc
             className: `${baseClass}__label`
         }, t('general:or')), /*#__PURE__*/ React.createElement("ul", {
             className: `${baseClass}__and-filters`
-        }, Array.isArray(or?.and) && or.and.map((_, andIndex)=>/*#__PURE__*/ React.createElement("li", {
+        }, Array.isArray(or?.and) && or.and.map((_, andIndex)=>{
+            const initialFieldName = Object.keys(conditions[orIndex].and[andIndex])[0];
+            const initialOperator = Object.keys(conditions[orIndex].and[andIndex]?.[initialFieldName] || {})?.[0] || undefined;
+            const initialValue = conditions[orIndex].and[andIndex]?.[initialFieldName]?.[initialOperator] || '';
+            return /*#__PURE__*/ React.createElement("li", {
                 key: andIndex
             }, andIndex !== 0 && /*#__PURE__*/ React.createElement("div", {
                 className: `${baseClass}__label`
             }, t('general:and')), /*#__PURE__*/ React.createElement(Condition, {
+                addCondition: addCondition,
                 andIndex: andIndex,
-                dispatch: dispatchConditions,
+                fieldName: initialFieldName,
                 fields: reducedFields,
+                initialValue: initialValue,
                 key: andIndex,
+                operator: initialOperator,
                 orIndex: orIndex,
-                value: conditions[orIndex].and[andIndex]
-            }))))))), /*#__PURE__*/ React.createElement(Button, {
+                removeCondition: removeCondition,
+                updateCondition: updateCondition
+            }));
+        }))))), /*#__PURE__*/ React.createElement(Button, {
         buttonStyle: "icon-label",
         className: `${baseClass}__add-or`,
         icon: "plus",
         iconPosition: "left",
         iconStyle: "with-border",
         onClick: ()=>{
-            if (reducedFields.length > 0) dispatchConditions({
-                type: 'add',
-                field: reducedFields[0].value
+            addCondition({
+                andIndex: 0,
+                fieldName: reducedFields[0].value,
+                orIndex: conditions.length,
+                relation: 'or'
             });
         }
     }, t('general:or'))), conditions.length === 0 && /*#__PURE__*/ React.createElement("div", {
@@ -122,10 +197,14 @@ const reduceFields = (fields, i18n)=>flattenTopLevelFields(fields).reduce((reduc
         iconPosition: "left",
         iconStyle: "with-border",
         onClick: ()=>{
-            if (reducedFields.length > 0) dispatchConditions({
-                type: 'add',
-                field: reducedFields[0].value
-            });
+            if (reducedFields.length > 0) {
+                addCondition({
+                    andIndex: 0,
+                    fieldName: reducedFields[0].value,
+                    orIndex: conditions.length,
+                    relation: 'or'
+                });
+            }
         }
     }, t('general:addFilter'))));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/WhereBuilder/index.tsx"],"sourcesContent":["import type { Where } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { flattenTopLevelFields } from 'payload/utilities'\nimport React, { useReducer, useState } from 'react'\n\nimport type { WhereBuilderProps } from './types.js'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Condition } from './Condition/index.js'\nimport fieldTypes from './field-types.js'\nimport './index.scss'\nimport reducer from './reducer.js'\nimport { transformWhereQuery } from './transformWhereQuery.js'\nimport validateWhereQuery from './validateWhereQuery.js'\n\nconst baseClass = 'where-builder'\n\nconst reduceFields = (fields, i18n) =>\n  flattenTopLevelFields(fields).reduce((reduced, field) => {\n    if (typeof fieldTypes[field.type] === 'object') {\n      const operatorKeys = new Set()\n      const operators = fieldTypes[field.type].operators.reduce((acc, operator) => {\n        if (!operatorKeys.has(operator.value)) {\n          operatorKeys.add(operator.value)\n          return [\n            ...acc,\n            {\n              ...operator,\n              label: i18n.t(`operators:${operator.label}`),\n            },\n          ]\n        }\n        return acc\n      }, [])\n\n      const formattedField = {\n        label: getTranslation(field.label || field.name, i18n),\n        value: field.name,\n        ...fieldTypes[field.type],\n        operators,\n        props: {\n          ...field,\n        },\n      }\n\n      return [...reduced, formattedField]\n    }\n\n    return reduced\n  }, [])\n\nexport { WhereBuilderProps }\n\n/**\n * The WhereBuilder component is used to render the filter controls for a collection's list view.\n * It is part of the {@link ListControls} component which is used to render the controls (search, filter, where).\n */\nexport const WhereBuilder: React.FC<WhereBuilderProps> = (props) => {\n  const { collectionPluralLabel, collectionSlug } = props\n  const { i18n, t } = useTranslation()\n\n  const config = useConfig()\n  const collection = config.collections.find((c) => c.slug === collectionSlug)\n  const [reducedFields] = useState(() => reduceFields(collection.fields, i18n))\n\n  const { searchParams } = useSearchParams()\n  const { handleWhereChange } = useListQuery()\n\n  // This handles initializing the where conditions from the search query (URL). That way, if you pass in\n  // query params to the URL, the where conditions will be initialized from those and displayed in the UI.\n  // Example: /admin/collections/posts?where[or][0][and][0][text][equals]=example%20post\n  const [conditions, dispatchConditions] = useReducer(\n    reducer((state) => handleWhereChange({ or: state })),\n    searchParams.where as Where,\n    (whereFromSearch: Where) => {\n      if (whereFromSearch) {\n        if (validateWhereQuery(whereFromSearch)) {\n          return whereFromSearch.or\n        }\n\n        // Transform the where query to be in the right format. This will transform something simple like [text][equals]=example%20post to the right format\n        const transformedWhere = transformWhereQuery(whereFromSearch)\n\n        if (validateWhereQuery(transformedWhere)) {\n          return transformedWhere.or\n        }\n\n        console.warn(`Invalid where query in URL: ${JSON.stringify(whereFromSearch)}`)\n      }\n      return []\n    },\n  )\n\n  return (\n    <div className={baseClass}>\n      {conditions.length > 0 && (\n        <React.Fragment>\n          <div className={`${baseClass}__label`}>\n            {t('general:filterWhere', { label: getTranslation(collectionPluralLabel, i18n) })}\n          </div>\n          <ul className={`${baseClass}__or-filters`}>\n            {conditions.map((or, orIndex) => (\n              <li key={orIndex}>\n                {orIndex !== 0 && <div className={`${baseClass}__label`}>{t('general:or')}</div>}\n                <ul className={`${baseClass}__and-filters`}>\n                  {Array.isArray(or?.and) &&\n                    or.and.map((_, andIndex) => (\n                      <li key={andIndex}>\n                        {andIndex !== 0 && (\n                          <div className={`${baseClass}__label`}>{t('general:and')}</div>\n                        )}\n                        <Condition\n                          andIndex={andIndex}\n                          dispatch={dispatchConditions}\n                          fields={reducedFields}\n                          key={andIndex}\n                          orIndex={orIndex}\n                          value={conditions[orIndex].and[andIndex]}\n                        />\n                      </li>\n                    ))}\n                </ul>\n              </li>\n            ))}\n          </ul>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__add-or`}\n            icon=\"plus\"\n            iconPosition=\"left\"\n            iconStyle=\"with-border\"\n            onClick={() => {\n              if (reducedFields.length > 0)\n                dispatchConditions({ type: 'add', field: reducedFields[0].value })\n            }}\n          >\n            {t('general:or')}\n          </Button>\n        </React.Fragment>\n      )}\n      {conditions.length === 0 && (\n        <div className={`${baseClass}__no-filters`}>\n          <div className={`${baseClass}__label`}>{t('general:noFiltersSet')}</div>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__add-first-filter`}\n            icon=\"plus\"\n            iconPosition=\"left\"\n            iconStyle=\"with-border\"\n            onClick={() => {\n              if (reducedFields.length > 0)\n                dispatchConditions({ type: 'add', field: reducedFields[0].value })\n            }}\n          >\n            {t('general:addFilter')}\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["getTranslation","flattenTopLevelFields","React","useReducer","useState","useConfig","useListQuery","useSearchParams","useTranslation","Button","Condition","fieldTypes","reducer","transformWhereQuery","validateWhereQuery","baseClass","reduceFields","fields","i18n","reduce","reduced","field","type","operatorKeys","Set","operators","acc","operator","has","value","add","label","t","formattedField","name","props","WhereBuilder","collectionPluralLabel","collectionSlug","config","collection","collections","find","c","slug","reducedFields","searchParams","handleWhereChange","conditions","dispatchConditions","state","or","where","whereFromSearch","transformedWhere","console","warn","JSON","stringify","div","className","length","Fragment","ul","map","orIndex","li","key","Array","isArray","and","_","andIndex","dispatch","buttonStyle","icon","iconPosition","iconStyle","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/WhereBuilder/index.tsx"],"sourcesContent":["import { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useState } from 'react'\n\nimport type { WhereBuilderProps } from './types.js'\n\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { useTableColumns } from '../TableColumns/index.js'\nimport { Condition } from './Condition/index.js'\nimport './index.scss'\nimport { reduceFieldMap } from './reduceFieldMap.js'\nimport { transformWhereQuery } from './transformWhereQuery.js'\nimport validateWhereQuery from './validateWhereQuery.js'\n\nconst baseClass = 'where-builder'\n\nexport { WhereBuilderProps }\n\n/**\n * The WhereBuilder component is used to render the filter controls for a collection's list view.\n * It is part of the {@link ListControls} component which is used to render the controls (search, filter, where).\n */\nexport const WhereBuilder: React.FC<WhereBuilderProps> = (props) => {\n  const { collectionPluralLabel } = props\n  const { i18n, t } = useTranslation()\n  const { columns } = useTableColumns()\n\n  const [reducedFields, setReducedColumns] = useState(() => reduceFieldMap(columns, i18n))\n\n  useEffect(() => {\n    setReducedColumns(reduceFieldMap(columns, i18n))\n  }, [columns, i18n])\n\n  const { searchParams } = useSearchParams()\n  const { handleWhereChange } = useListQuery()\n  const [shouldUpdateQuery, setShouldUpdateQuery] = React.useState(false)\n\n  // This handles initializing the where conditions from the search query (URL). That way, if you pass in\n  // query params to the URL, the where conditions will be initialized from those and displayed in the UI.\n  // Example: /admin/collections/posts?where[or][0][and][0][text][equals]=example%20post\n  /*\n    stored conditions look like this:\n    [\n      _or_ & _and_ queries have the same shape:\n      {\n        and: [{\n          category: {\n            equals: 'category-a'\n          }\n        }]\n      },\n\n      {\n        and:[{\n          category: {\n            equals: 'category-b'\n          },\n          text: {\n            not_equals: 'oranges'\n          },\n        }]\n      }\n    ]\n  */\n\n  const [conditions, setConditions] = React.useState(() => {\n    const whereFromSearch = searchParams.where\n    if (whereFromSearch) {\n      if (validateWhereQuery(whereFromSearch)) {\n        return whereFromSearch.or\n      }\n\n      // Transform the where query to be in the right format. This will transform something simple like [text][equals]=example%20post to the right format\n      const transformedWhere = transformWhereQuery(whereFromSearch)\n\n      if (validateWhereQuery(transformedWhere)) {\n        return transformedWhere.or\n      }\n\n      console.warn(`Invalid where query in URL: ${JSON.stringify(whereFromSearch)}`)\n    }\n\n    return []\n  })\n\n  const addCondition = React.useCallback(({ andIndex, fieldName, orIndex, relation }) => {\n    setConditions((prevConditions) => {\n      const newConditions = [...prevConditions]\n      if (relation === 'and') {\n        newConditions[orIndex].and.splice(andIndex, 0, { [fieldName]: {} })\n      } else {\n        newConditions.push({\n          and: [\n            {\n              [fieldName]: {},\n            },\n          ],\n        })\n      }\n\n      return newConditions\n    })\n  }, [])\n\n  const updateCondition = React.useCallback(\n    ({ andIndex, fieldName: fieldNameArg, operator: operatorArg, orIndex, value: valueArg }) => {\n      setConditions((prevConditions) => {\n        const newConditions = [...prevConditions]\n        if (typeof newConditions[orIndex].and[andIndex] === 'object') {\n          const fieldName = fieldNameArg\n          const operator = operatorArg\n          const value = valueArg ?? (operator ? newConditions[orIndex].and[andIndex][operator] : '')\n\n          if (fieldName && operator && ![null, undefined].includes(value)) {\n            newConditions[orIndex].and[andIndex] = {\n              [fieldName]: operator ? { [operator]: value } : {},\n            }\n            setShouldUpdateQuery(true)\n          }\n        }\n\n        return newConditions\n      })\n    },\n    [],\n  )\n\n  const removeCondition = React.useCallback(({ andIndex, orIndex }) => {\n    setConditions((prevConditions) => {\n      const newConditions = [...prevConditions]\n      newConditions[orIndex].and.splice(andIndex, 1)\n\n      if (newConditions[orIndex].and.length === 0) {\n        newConditions.splice(orIndex, 1)\n      }\n\n      return newConditions\n    })\n    setShouldUpdateQuery(true)\n  }, [])\n\n  React.useEffect(() => {\n    if (shouldUpdateQuery) {\n      handleWhereChange({ or: conditions })\n      setShouldUpdateQuery(false)\n    }\n  }, [conditions, handleWhereChange, shouldUpdateQuery])\n\n  return (\n    <div className={baseClass}>\n      {conditions.length > 0 && (\n        <React.Fragment>\n          <div className={`${baseClass}__label`}>\n            {t('general:filterWhere', { label: getTranslation(collectionPluralLabel, i18n) })}\n          </div>\n          <ul className={`${baseClass}__or-filters`}>\n            {conditions.map((or, orIndex) => (\n              <li key={orIndex}>\n                {orIndex !== 0 && <div className={`${baseClass}__label`}>{t('general:or')}</div>}\n                <ul className={`${baseClass}__and-filters`}>\n                  {Array.isArray(or?.and) &&\n                    or.and.map((_, andIndex) => {\n                      const initialFieldName = Object.keys(conditions[orIndex].and[andIndex])[0]\n                      const initialOperator =\n                        Object.keys(\n                          conditions[orIndex].and[andIndex]?.[initialFieldName] || {},\n                        )?.[0] || undefined\n                      const initialValue =\n                        conditions[orIndex].and[andIndex]?.[initialFieldName]?.[initialOperator] ||\n                        ''\n\n                      return (\n                        <li key={andIndex}>\n                          {andIndex !== 0 && (\n                            <div className={`${baseClass}__label`}>{t('general:and')}</div>\n                          )}\n                          <Condition\n                            addCondition={addCondition}\n                            andIndex={andIndex}\n                            fieldName={initialFieldName}\n                            fields={reducedFields}\n                            initialValue={initialValue}\n                            key={andIndex}\n                            operator={initialOperator}\n                            orIndex={orIndex}\n                            removeCondition={removeCondition}\n                            updateCondition={updateCondition}\n                          />\n                        </li>\n                      )\n                    })}\n                </ul>\n              </li>\n            ))}\n          </ul>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__add-or`}\n            icon=\"plus\"\n            iconPosition=\"left\"\n            iconStyle=\"with-border\"\n            onClick={() => {\n              addCondition({\n                andIndex: 0,\n                fieldName: reducedFields[0].value,\n                orIndex: conditions.length,\n                relation: 'or',\n              })\n            }}\n          >\n            {t('general:or')}\n          </Button>\n        </React.Fragment>\n      )}\n      {conditions.length === 0 && (\n        <div className={`${baseClass}__no-filters`}>\n          <div className={`${baseClass}__label`}>{t('general:noFiltersSet')}</div>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__add-first-filter`}\n            icon=\"plus\"\n            iconPosition=\"left\"\n            iconStyle=\"with-border\"\n            onClick={() => {\n              if (reducedFields.length > 0) {\n                addCondition({\n                  andIndex: 0,\n                  fieldName: reducedFields[0].value,\n                  orIndex: conditions.length,\n                  relation: 'or',\n                })\n              }\n            }}\n          >\n            {t('general:addFilter')}\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["getTranslation","React","useEffect","useState","useListQuery","useSearchParams","useTranslation","Button","useTableColumns","Condition","reduceFieldMap","transformWhereQuery","validateWhereQuery","baseClass","WhereBuilder","props","collectionPluralLabel","i18n","t","columns","reducedFields","setReducedColumns","searchParams","handleWhereChange","shouldUpdateQuery","setShouldUpdateQuery","conditions","setConditions","whereFromSearch","where","or","transformedWhere","console","warn","JSON","stringify","addCondition","useCallback","andIndex","fieldName","orIndex","relation","prevConditions","newConditions","and","splice","push","updateCondition","fieldNameArg","operator","operatorArg","value","valueArg","undefined","includes","removeCondition","length","div","className","Fragment","label","ul","map","li","key","Array","isArray","_","initialFieldName","Object","keys","initialOperator","initialValue","fields","buttonStyle","icon","iconPosition","iconStyle","onClick"],"mappings":"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"}

package/dist/elements/WhereBuilder/reduceFieldMap.d.ts

@@ -0,0 +1,3 @@
+import type { Column } from '../Table/index.js';
+export declare const reduceFieldMap: (fieldMap: Column[], i18n: any) => any[];
+//# sourceMappingURL=reduceFieldMap.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"reduceFieldMap.d.ts","sourceRoot":"","sources":["../../../src/elements/WhereBuilder/reduceFieldMap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAI/C,eAAO,MAAM,cAAc,aAAc,MAAM,EAAE,qBAkCzC,CAAA"}

package/dist/elements/WhereBuilder/reduceFieldMap.js

@@ -0,0 +1,36 @@
+import fieldTypes from './field-types.js';
+export const reduceFieldMap = (fieldMap, i18n)=>fieldMap.reduce((reduced, field)=>{
+        if (typeof fieldTypes[field.type] === 'object') {
+            const operatorKeys = new Set();
+            const operators = fieldTypes[field.type].operators.reduce((acc, operator)=>{
+                if (!operatorKeys.has(operator.value)) {
+                    operatorKeys.add(operator.value);
+                    return [
+                        ...acc,
+                        {
+                            ...operator,
+                            label: i18n.t(`operators:${operator.label}`)
+                        }
+                    ];
+                }
+                return acc;
+            }, []);
+            const formattedField = {
+                label: field.Label,
+                value: field.name,
+                ...fieldTypes[field.type],
+                operators,
+                props: {
+                    ...field,
+                    ...field?.cellProps || {}
+                }
+            };
+            return [
+                ...reduced,
+                formattedField
+            ];
+        }
+        return reduced;
+    }, []);
+
+//# sourceMappingURL=reduceFieldMap.js.map

package/dist/elements/WhereBuilder/reduceFieldMap.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/WhereBuilder/reduceFieldMap.tsx"],"sourcesContent":["import type { Column } from '../Table/index.js'\n\nimport fieldTypes from './field-types.js'\n\nexport const reduceFieldMap = (fieldMap: Column[], i18n) =>\n  fieldMap.reduce((reduced, field) => {\n    if (typeof fieldTypes[field.type] === 'object') {\n      const operatorKeys = new Set()\n\n      const operators = fieldTypes[field.type].operators.reduce((acc, operator) => {\n        if (!operatorKeys.has(operator.value)) {\n          operatorKeys.add(operator.value)\n          return [\n            ...acc,\n            {\n              ...operator,\n              label: i18n.t(`operators:${operator.label}`),\n            },\n          ]\n        }\n        return acc\n      }, [])\n\n      const formattedField = {\n        label: field.Label,\n        value: field.name,\n        ...fieldTypes[field.type],\n        operators,\n        props: {\n          ...field,\n          ...(field?.cellProps || {}),\n        },\n      }\n\n      return [...reduced, formattedField]\n    }\n\n    return reduced\n  }, [])\n"],"names":["fieldTypes","reduceFieldMap","fieldMap","i18n","reduce","reduced","field","type","operatorKeys","Set","operators","acc","operator","has","value","add","label","t","formattedField","Label","name","props","cellProps"],"mappings":"AAEA,OAAOA,gBAAgB,mBAAkB;AAEzC,OAAO,MAAMC,iBAAiB,CAACC,UAAoBC,OACjDD,SAASE,MAAM,CAAC,CAACC,SAASC;QACxB,IAAI,OAAON,UAAU,CAACM,MAAMC,IAAI,CAAC,KAAK,UAAU;YAC9C,MAAMC,eAAe,IAAIC;YAEzB,MAAMC,YAAYV,UAAU,CAACM,MAAMC,IAAI,CAAC,CAACG,SAAS,CAACN,MAAM,CAAC,CAACO,KAAKC;gBAC9D,IAAI,CAACJ,aAAaK,GAAG,CAACD,SAASE,KAAK,GAAG;oBACrCN,aAAaO,GAAG,CAACH,SAASE,KAAK;oBAC/B,OAAO;2BACFH;wBACH;4BACE,GAAGC,QAAQ;4BACXI,OAAOb,KAAKc,CAAC,CAAC,CAAC,UAAU,EAAEL,SAASI,KAAK,CAAC,CAAC;wBAC7C;qBACD;gBACH;gBACA,OAAOL;YACT,GAAG,EAAE;YAEL,MAAMO,iBAAiB;gBACrBF,OAAOV,MAAMa,KAAK;gBAClBL,OAAOR,MAAMc,IAAI;gBACjB,GAAGpB,UAAU,CAACM,MAAMC,IAAI,CAAC;gBACzBG;gBACAW,OAAO;oBACL,GAAGf,KAAK;oBACR,GAAIA,OAAOgB,aAAa,CAAC,CAAC;gBAC5B;YACF;YAEA,OAAO;mBAAIjB;gBAASa;aAAe;QACrC;QAEA,OAAOb;IACT,GAAG,EAAE,EAAC"}

package/dist/elements/withMergedProps/index.js

@@ -20,7 +20,7 @@ import React from 'react';
  */ export function withMergedProps({ Component, toMergeIntoProps }) {
     // A wrapper around the args.Component to inject the args.toMergeArgs as props, which are merged with the passed props
     const MergedPropsComponent = (passedProps)=>{
-        const mergedProps = deepMerge(toMergeIntoProps, passedProps);
+        const mergedProps = deepMerge(passedProps, toMergeIntoProps);
         return /*#__PURE__*/ React.createElement(Component, mergedProps);
     };
     return MergedPropsComponent;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/withMergedProps/index.tsx"],"sourcesContent":["import { deepMerge } from 'payload/utilities'\nimport React from 'react'\n\n/**\n * Creates a higher-order component (HOC) that merges predefined properties (`toMergeIntoProps`)\n * with any properties passed to the resulting component.\n *\n * Use this when you want to pre-specify some props for a component, while also allowing users to\n * pass in their own props. The HOC ensures the passed props and predefined props are combined before\n * rendering the original component.\n *\n * @example\n * const PredefinedComponent = getMergedPropsComponent({\n *   Component: OriginalComponent,\n *   toMergeIntoProps: { someExtraValue: 5 }\n * });\n * // Using <PredefinedComponent customProp=\"value\" /> will result in\n * // <OriginalComponent customProp=\"value\" someExtraValue={5} />\n *\n * @returns A higher-order component with combined properties.\n */\nexport function withMergedProps<ToMergeIntoProps, CompleteReturnProps>({\n  Component,\n  toMergeIntoProps,\n}: {\n  Component: React.FC<CompleteReturnProps>\n  toMergeIntoProps: ToMergeIntoProps\n}): React.FC<CompleteReturnProps> {\n  // A wrapper around the args.Component to inject the args.toMergeArgs as props, which are merged with the passed props\n  const MergedPropsComponent: React.FC<CompleteReturnProps> = (passedProps) => {\n    const mergedProps = deepMerge(toMergeIntoProps, passedProps)\n    return <Component {...mergedProps} />\n  }\n\n  return MergedPropsComponent\n}\n"],"names":["deepMerge","React","withMergedProps","Component","toMergeIntoProps","MergedPropsComponent","passedProps","mergedProps"],"mappings":"AAAA,SAASA,SAAS,QAAQ,oBAAmB;AAC7C,OAAOC,WAAW,QAAO;AAEzB;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,SAASC,gBAAuD,EACrEC,SAAS,EACTC,gBAAgB,EAIjB;IACC,sHAAsH;IACtH,MAAMC,uBAAsD,CAACC;QAC3D,MAAMC,cAAcP,UAAUI,kBAAkBE;QAChD,qBAAO,oBAACH,WAAcI;IACxB;IAEA,OAAOF;AACT"}
+{"version":3,"sources":["../../../src/elements/withMergedProps/index.tsx"],"sourcesContent":["import { deepMerge } from 'payload/utilities'\nimport React from 'react'\n\n/**\n * Creates a higher-order component (HOC) that merges predefined properties (`toMergeIntoProps`)\n * with any properties passed to the resulting component.\n *\n * Use this when you want to pre-specify some props for a component, while also allowing users to\n * pass in their own props. The HOC ensures the passed props and predefined props are combined before\n * rendering the original component.\n *\n * @example\n * const PredefinedComponent = getMergedPropsComponent({\n *   Component: OriginalComponent,\n *   toMergeIntoProps: { someExtraValue: 5 }\n * });\n * // Using <PredefinedComponent customProp=\"value\" /> will result in\n * // <OriginalComponent customProp=\"value\" someExtraValue={5} />\n *\n * @returns A higher-order component with combined properties.\n */\nexport function withMergedProps<ToMergeIntoProps, CompleteReturnProps>({\n  Component,\n  toMergeIntoProps,\n}: {\n  Component: React.FC<CompleteReturnProps>\n  toMergeIntoProps: ToMergeIntoProps\n}): React.FC<CompleteReturnProps> {\n  // A wrapper around the args.Component to inject the args.toMergeArgs as props, which are merged with the passed props\n  const MergedPropsComponent: React.FC<CompleteReturnProps> = (passedProps) => {\n    const mergedProps = deepMerge(passedProps, toMergeIntoProps)\n    return <Component {...mergedProps} />\n  }\n\n  return MergedPropsComponent\n}\n"],"names":["deepMerge","React","withMergedProps","Component","toMergeIntoProps","MergedPropsComponent","passedProps","mergedProps"],"mappings":"AAAA,SAASA,SAAS,QAAQ,oBAAmB;AAC7C,OAAOC,WAAW,QAAO;AAEzB;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,SAASC,gBAAuD,EACrEC,SAAS,EACTC,gBAAgB,EAIjB;IACC,sHAAsH;IACtH,MAAMC,uBAAsD,CAACC;QAC3D,MAAMC,cAAcP,UAAUM,aAAaF;QAC3C,qBAAO,oBAACD,WAAcI;IACxB;IAEA,OAAOF;AACT"}

package/dist/fields/Array/ArrayRow.d.ts

@@ -8,6 +8,7 @@ type ArrayRowProps = UseDraggableSortableReturn & {
     CustomRowLabel?: React.ReactNode;
     addRow: (rowIndex: number) => void;
     duplicateRow: (rowIndex: number) => void;
+    errorCount: number;
     fieldMap: FieldMap;
     forceRender?: boolean;
     hasMaxRows?: boolean;
@@ -21,6 +22,7 @@ type ArrayRowProps = UseDraggableSortableReturn & {
     row: Row;
     rowCount: number;
     rowIndex: number;
+    schemaPath: string;
     setCollapse: (rowID: string, collapsed: boolean) => void;
 };
 export declare const ArrayRow: React.FC<ArrayRowProps>;