@payloadcms/ui 3.0.0-beta.9 → 3.0.0-canary.0017c67

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

@@ -11,7 +11,7 @@ export type Props = {
     fieldName: string;
     fields: FieldCondition[];
     initialValue: string;
-    operator: string;
+    operator: Operator;
     orIndex: number;
     removeCondition: ({ andIndex, orIndex }: {
         andIndex: number;
@@ -25,6 +25,7 @@ export type Props = {
         value: string;
     }) => void;
 };
+import type { Operator } from 'payload';
 import './index.scss';
 export declare const Condition: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

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":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAEjD,MAAM,MAAM,KAAK,GAAG;IAClB,YAAY,EAAE,CAAC,EACb,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,GACT,EAAE;QACD,QAAQ,EAAE,MAAM,CAAA;QAChB,SAAS,EAAE,MAAM,CAAA;QACjB,OAAO,EAAE,MAAM,CAAA;QACf,QAAQ,EAAE,KAAK,GAAG,IAAI,CAAA;KACvB,KAAK,IAAI,CAAA;IACV,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,YAAY,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,eAAe,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACvF,eAAe,EAAE,CAAC,EAChB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,KAAK,GACN,EAAE;QACD,QAAQ,EAAE,MAAM,CAAA;QAChB,SAAS,EAAE,MAAM,CAAA;QACjB,QAAQ,EAAE,MAAM,CAAA;QAChB,OAAO,EAAE,MAAM,CAAA;QACf,KAAK,EAAE,MAAM,CAAA;KACd,KAAK,IAAI,CAAA;CACX,CAAA;AAaD,OAAO,cAAc,CAAA;AAarB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgJrC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/WhereBuilder/Condition/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAEjD,MAAM,MAAM,KAAK,GAAG;IAClB,YAAY,EAAE,CAAC,EACb,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,GACT,EAAE;QACD,QAAQ,EAAE,MAAM,CAAA;QAChB,SAAS,EAAE,MAAM,CAAA;QACjB,OAAO,EAAE,MAAM,CAAA;QACf,QAAQ,EAAE,KAAK,GAAG,IAAI,CAAA;KACvB,KAAK,IAAI,CAAA;IACV,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,YAAY,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,QAAQ,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,eAAe,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACvF,eAAe,EAAE,CAAC,EAChB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,KAAK,GACN,EAAE;QACD,QAAQ,EAAE,MAAM,CAAA;QAChB,SAAS,EAAE,MAAM,CAAA;QACjB,QAAQ,EAAE,MAAM,CAAA;QAChB,OAAO,EAAE,MAAM,CAAA;QACf,KAAK,EAAE,MAAM,CAAA;KACd,KAAK,IAAI,CAAA;CACX,CAAA;AAED,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAavC,OAAO,cAAc,CAAA;AAarB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgJrC,CAAA"}

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

@@ -1,5 +1,7 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
-import { RenderCustomComponent } from '../../../elements/RenderCustomComponent/index.js';
+import { RenderCustomClientComponent } from '../../../elements/RenderCustomClientComponent/index.js';
 import { useDebounce } from '../../../hooks/useDebounce.js';
 import { Button } from '../../Button/index.js';
 import { ReactSelect } from '../../ReactSelect/index.js';
@@ -8,6 +10,7 @@ import { NumberField } from './Number/index.js';
 import { RelationshipField } from './Relationship/index.js';
 import { Select } from './Select/index.js';
 import Text from './Text/index.js';
+import './index.scss';
 const valueFields = {
     Date: DateField,
     Number: NumberField,
@@ -24,7 +27,7 @@ export const Condition = (props)=>{
     const debouncedValue = useDebounce(internalQueryValue, 300);
     useEffect(()=>{
         // This is to trigger changes when the debounced value changes
-        if (internalField.value && internalOperatorOption && ![
+        if ((internalField?.value || typeof internalField?.value === 'number') && internalOperatorOption && ![
             null,
             undefined
         ].includes(debouncedValue)) {
@@ -58,72 +61,89 @@ export const Condition = (props)=>{
     } else if (internalField?.props && 'options' in internalField.props) {
         valueOptions = internalField.props.options;
     }
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__wrap`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__inputs`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__field`
-    }, /*#__PURE__*/ React.createElement(ReactSelect, {
-        isClearable: false,
-        onChange: (field)=>{
-            setInternalField(fields.find((f)=>f.value === field.value));
-            setInternalOperatorOption(undefined);
-            setInternalQueryValue(undefined);
-        },
-        options: fields,
-        value: fields.find((field)=>internalField.value === field.value) || fields[0]
-    })), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__operator`
-    }, /*#__PURE__*/ React.createElement(ReactSelect, {
-        disabled: !internalField.value,
-        isClearable: false,
-        onChange: (operator)=>{
-            setInternalOperatorOption(operator.value);
-        },
-        options: internalField?.operators,
-        value: internalField?.operators.find((operator)=>internalOperatorOption === operator.value) || null
-    })), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__value`
-    }, /*#__PURE__*/ React.createElement(RenderCustomComponent, {
-        CustomComponent: internalField?.props?.admin?.components?.Filter,
-        DefaultComponent: ValueComponent,
-        componentProps: {
-            ...internalField?.props,
-            disabled: !internalOperatorOption,
-            onChange: setInternalQueryValue,
-            operator: internalOperatorOption,
-            options: valueOptions,
-            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`
-    }, /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        className: `${baseClass}__actions-remove`,
-        icon: "x",
-        iconStyle: "with-border",
-        onClick: ()=>removeCondition({
-                andIndex,
-                orIndex
-            }),
-        round: true
-    }), /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        className: `${baseClass}__actions-add`,
-        icon: "plus",
-        iconStyle: "with-border",
-        onClick: ()=>addCondition({
-                andIndex,
-                fieldName,
-                orIndex,
-                relation: 'and'
-            }),
-        round: true
-    }))));
+    return /*#__PURE__*/ _jsx("div", {
+        className: baseClass,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: `${baseClass}__wrap`,
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: `${baseClass}__inputs`,
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: `${baseClass}__field`,
+                            children: /*#__PURE__*/ _jsx(ReactSelect, {
+                                isClearable: false,
+                                onChange: (field)=>{
+                                    setInternalField(fields.find((f)=>f.value === field.value));
+                                    setInternalOperatorOption(undefined);
+                                    setInternalQueryValue(undefined);
+                                },
+                                options: fields,
+                                value: fields.find((field)=>internalField?.value === field.value) || fields[0]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: `${baseClass}__operator`,
+                            children: /*#__PURE__*/ _jsx(ReactSelect, {
+                                disabled: !internalField?.value && typeof internalField?.value !== 'number',
+                                isClearable: false,
+                                onChange: (operator)=>{
+                                    setInternalOperatorOption(operator.value);
+                                },
+                                options: internalField?.operators,
+                                value: internalField?.operators.find((operator)=>internalOperatorOption === operator.value) || null
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: `${baseClass}__value`,
+                            children: /*#__PURE__*/ _jsx(RenderCustomClientComponent, {
+                                CustomComponent: internalField?.props?.admin?.components?.Filter,
+                                DefaultComponent: ValueComponent,
+                                componentProps: {
+                                    ...internalField?.props,
+                                    disabled: !internalOperatorOption,
+                                    onChange: setInternalQueryValue,
+                                    operator: internalOperatorOption,
+                                    options: valueOptions,
+                                    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__*/ _jsxs("div", {
+                    className: `${baseClass}__actions`,
+                    children: [
+                        /*#__PURE__*/ _jsx(Button, {
+                            buttonStyle: "icon-label",
+                            className: `${baseClass}__actions-remove`,
+                            icon: "x",
+                            iconStyle: "with-border",
+                            onClick: ()=>removeCondition({
+                                    andIndex,
+                                    orIndex
+                                }),
+                            round: true
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            buttonStyle: "icon-label",
+                            className: `${baseClass}__actions-add`,
+                            icon: "plus",
+                            iconStyle: "with-border",
+                            onClick: ()=>addCondition({
+                                    andIndex: andIndex + 1,
+                                    fieldName: fields[0].value,
+                                    orIndex,
+                                    relation: 'and'
+                                }),
+                            round: true
+                        })
+                    ]
+                })
+            ]
+        })
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/elements/WhereBuilder/Condition/index.tsx"],"sourcesContent":["'use client'\nimport 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: Operator\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 { Operator } from 'payload'\n\nimport type { Option } from '../../ReactSelect/index.js'\n\nimport { RenderCustomClientComponent } from '../../../elements/RenderCustomClientComponent/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>(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 || typeof internalField?.value === 'number') &&\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: Option) => {\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 && typeof internalField?.value !== 'number'}\n              isClearable={false}\n              onChange={(operator: Option<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            <RenderCustomClientComponent\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: andIndex + 1,\n                fieldName: 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","RenderCustomClientComponent","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/types.d.ts

@@ -1,4 +1,4 @@
-import type { Where } from 'payload/types';
+import type { Where } from 'payload';
 import type { Action, FieldCondition } from '../types.js';
 export type Props = {
     andIndex: number;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/WhereBuilder/Condition/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAE1C,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAEzD,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,KAAK,CAAA;CACb,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/WhereBuilder/Condition/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAEzD,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,KAAK,CAAA;CACb,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/WhereBuilder/Condition/types.ts"],"sourcesContent":["import type { Where } from 'payload/types'\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"],"names":[],"rangeMappings":"","mappings":"AAIA,WAMC"}
+{"version":3,"sources":["../../../../src/elements/WhereBuilder/Condition/types.ts"],"sourcesContent":["import type { Where } from 'payload'\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"],"names":[],"mappings":"AAIA,WAMC"}

package/dist/elements/WhereBuilder/field-types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/WhereBuilder/field-types.tsx"],"sourcesContent":["const boolean = [\n  {\n    label: 'equals',\n    value: 'equals',\n  },\n  {\n    label: 'isNotEqualTo',\n    value: 'not_equals',\n  },\n]\n\nconst base = [\n  ...boolean,\n  {\n    label: 'isIn',\n    value: 'in',\n  },\n  {\n    label: 'isNotIn',\n    value: 'not_in',\n  },\n  {\n    label: 'exists',\n    value: 'exists',\n  },\n]\n\nconst numeric = [\n  ...base,\n  {\n    label: 'isGreaterThan',\n    value: 'greater_than',\n  },\n  {\n    label: 'isLessThan',\n    value: 'less_than',\n  },\n  {\n    label: 'isLessThanOrEqualTo',\n    value: 'less_than_equal',\n  },\n  {\n    label: 'isGreaterThanOrEqualTo',\n    value: 'greater_than_equal',\n  },\n]\n\nconst geo = [\n  ...boolean,\n  {\n    label: 'exists',\n    value: 'exists',\n  },\n  {\n    label: 'near',\n    value: 'near',\n  },\n]\n\nconst within = {\n  label: 'within',\n  value: 'within',\n}\n\nconst intersects = {\n  label: 'intersects',\n  value: 'intersects',\n}\n\nconst like = {\n  label: 'isLike',\n  value: 'like',\n}\n\nconst contains = {\n  label: 'contains',\n  value: 'contains',\n}\n\nconst fieldTypeConditions = {\n  checkbox: {\n    component: 'Text',\n    operators: boolean,\n  },\n  code: {\n    component: 'Text',\n    operators: [...base, like, contains],\n  },\n  date: {\n    component: 'Date',\n    operators: [...base, ...numeric],\n  },\n  email: {\n    component: 'Text',\n    operators: [...base, contains],\n  },\n  json: {\n    component: 'Text',\n    operators: [...base, like, contains, within, intersects],\n  },\n  number: {\n    component: 'Number',\n    operators: [...base, ...numeric],\n  },\n  point: {\n    component: 'Point',\n    operators: [...geo, within, intersects],\n  },\n  radio: {\n    component: 'Select',\n    operators: [...base],\n  },\n  relationship: {\n    component: 'Relationship',\n    operators: [...base],\n  },\n  richText: {\n    component: 'Text',\n    operators: [...base, like, contains],\n  },\n  select: {\n    component: 'Select',\n    operators: [...base],\n  },\n  text: {\n    component: 'Text',\n    operators: [...base, like, contains],\n  },\n  textarea: {\n    component: 'Text',\n    operators: [...base, like, contains],\n  },\n  upload: {\n    component: 'Text',\n    operators: [...base],\n  },\n}\n\nexport default fieldTypeConditions\n"],"names":["boolean","label","value","base","numeric","geo","within","intersects","like","contains","fieldTypeConditions","checkbox","component","operators","code","date","email","json","number","point","radio","relationship","richText","select","text","textarea","upload"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,MAAMA,UAAU;IACd;QACEC,OAAO;QACPC,OAAO;IACT;IACA;QACED,OAAO;QACPC,OAAO;IACT;CACD;AAED,MAAMC,OAAO;OACRH;IACH;QACEC,OAAO;QACPC,OAAO;IACT;IACA;QACED,OAAO;QACPC,OAAO;IACT;IACA;QACED,OAAO;QACPC,OAAO;IACT;CACD;AAED,MAAME,UAAU;OACXD;IACH;QACEF,OAAO;QACPC,OAAO;IACT;IACA;QACED,OAAO;QACPC,OAAO;IACT;IACA;QACED,OAAO;QACPC,OAAO;IACT;IACA;QACED,OAAO;QACPC,OAAO;IACT;CACD;AAED,MAAMG,MAAM;OACPL;IACH;QACEC,OAAO;QACPC,OAAO;IACT;IACA;QACED,OAAO;QACPC,OAAO;IACT;CACD;AAED,MAAMI,SAAS;IACbL,OAAO;IACPC,OAAO;AACT;AAEA,MAAMK,aAAa;IACjBN,OAAO;IACPC,OAAO;AACT;AAEA,MAAMM,OAAO;IACXP,OAAO;IACPC,OAAO;AACT;AAEA,MAAMO,WAAW;IACfR,OAAO;IACPC,OAAO;AACT;AAEA,MAAMQ,sBAAsB;IAC1BC,UAAU;QACRC,WAAW;QACXC,WAAWb;IACb;IACAc,MAAM;QACJF,WAAW;QACXC,WAAW;eAAIV;YAAMK;YAAMC;SAAS;IACtC;IACAM,MAAM;QACJH,WAAW;QACXC,WAAW;eAAIV;eAASC;SAAQ;IAClC;IACAY,OAAO;QACLJ,WAAW;QACXC,WAAW;eAAIV;YAAMM;SAAS;IAChC;IACAQ,MAAM;QACJL,WAAW;QACXC,WAAW;eAAIV;YAAMK;YAAMC;YAAUH;YAAQC;SAAW;IAC1D;IACAW,QAAQ;QACNN,WAAW;QACXC,WAAW;eAAIV;eAASC;SAAQ;IAClC;IACAe,OAAO;QACLP,WAAW;QACXC,WAAW;eAAIR;YAAKC;YAAQC;SAAW;IACzC;IACAa,OAAO;QACLR,WAAW;QACXC,WAAW;eAAIV;SAAK;IACtB;IACAkB,cAAc;QACZT,WAAW;QACXC,WAAW;eAAIV;SAAK;IACtB;IACAmB,UAAU;QACRV,WAAW;QACXC,WAAW;eAAIV;YAAMK;YAAMC;SAAS;IACtC;IACAc,QAAQ;QACNX,WAAW;QACXC,WAAW;eAAIV;SAAK;IACtB;IACAqB,MAAM;QACJZ,WAAW;QACXC,WAAW;eAAIV;YAAMK;YAAMC;SAAS;IACtC;IACAgB,UAAU;QACRb,WAAW;QACXC,WAAW;eAAIV;YAAMK;YAAMC;SAAS;IACtC;IACAiB,QAAQ;QACNd,WAAW;QACXC,WAAW;eAAIV;SAAK;IACtB;AACF;AAEA,eAAeO,oBAAmB"}
+{"version":3,"sources":["../../../src/elements/WhereBuilder/field-types.tsx"],"sourcesContent":["const boolean = [\n  {\n    label: 'equals',\n    value: 'equals',\n  },\n  {\n    label: 'isNotEqualTo',\n    value: 'not_equals',\n  },\n]\n\nconst base = [\n  ...boolean,\n  {\n    label: 'isIn',\n    value: 'in',\n  },\n  {\n    label: 'isNotIn',\n    value: 'not_in',\n  },\n  {\n    label: 'exists',\n    value: 'exists',\n  },\n]\n\nconst numeric = [\n  ...base,\n  {\n    label: 'isGreaterThan',\n    value: 'greater_than',\n  },\n  {\n    label: 'isLessThan',\n    value: 'less_than',\n  },\n  {\n    label: 'isLessThanOrEqualTo',\n    value: 'less_than_equal',\n  },\n  {\n    label: 'isGreaterThanOrEqualTo',\n    value: 'greater_than_equal',\n  },\n]\n\nconst geo = [\n  ...boolean,\n  {\n    label: 'exists',\n    value: 'exists',\n  },\n  {\n    label: 'near',\n    value: 'near',\n  },\n]\n\nconst within = {\n  label: 'within',\n  value: 'within',\n}\n\nconst intersects = {\n  label: 'intersects',\n  value: 'intersects',\n}\n\nconst like = {\n  label: 'isLike',\n  value: 'like',\n}\n\nconst contains = {\n  label: 'contains',\n  value: 'contains',\n}\n\nconst fieldTypeConditions = {\n  checkbox: {\n    component: 'Text',\n    operators: boolean,\n  },\n  code: {\n    component: 'Text',\n    operators: [...base, like, contains],\n  },\n  date: {\n    component: 'Date',\n    operators: [...base, ...numeric],\n  },\n  email: {\n    component: 'Text',\n    operators: [...base, contains],\n  },\n  json: {\n    component: 'Text',\n    operators: [...base, like, contains, within, intersects],\n  },\n  number: {\n    component: 'Number',\n    operators: [...base, ...numeric],\n  },\n  point: {\n    component: 'Point',\n    operators: [...geo, within, intersects],\n  },\n  radio: {\n    component: 'Select',\n    operators: [...base],\n  },\n  relationship: {\n    component: 'Relationship',\n    operators: [...base],\n  },\n  richText: {\n    component: 'Text',\n    operators: [...base, like, contains],\n  },\n  select: {\n    component: 'Select',\n    operators: [...base],\n  },\n  text: {\n    component: 'Text',\n    operators: [...base, like, contains],\n  },\n  textarea: {\n    component: 'Text',\n    operators: [...base, like, contains],\n  },\n  upload: {\n    component: 'Text',\n    operators: [...base],\n  },\n}\n\nexport default fieldTypeConditions\n"],"names":["boolean","label","value","base","numeric","geo","within","intersects","like","contains","fieldTypeConditions","checkbox","component","operators","code","date","email","json","number","point","radio","relationship","richText","select","text","textarea","upload"],"mappings":"AAAA,MAAMA,UAAU;IACd;QACEC,OAAO;QACPC,OAAO;IACT;IACA;QACED,OAAO;QACPC,OAAO;IACT;CACD;AAED,MAAMC,OAAO;OACRH;IACH;QACEC,OAAO;QACPC,OAAO;IACT;IACA;QACED,OAAO;QACPC,OAAO;IACT;IACA;QACED,OAAO;QACPC,OAAO;IACT;CACD;AAED,MAAME,UAAU;OACXD;IACH;QACEF,OAAO;QACPC,OAAO;IACT;IACA;QACED,OAAO;QACPC,OAAO;IACT;IACA;QACED,OAAO;QACPC,OAAO;IACT;IACA;QACED,OAAO;QACPC,OAAO;IACT;CACD;AAED,MAAMG,MAAM;OACPL;IACH;QACEC,OAAO;QACPC,OAAO;IACT;IACA;QACED,OAAO;QACPC,OAAO;IACT;CACD;AAED,MAAMI,SAAS;IACbL,OAAO;IACPC,OAAO;AACT;AAEA,MAAMK,aAAa;IACjBN,OAAO;IACPC,OAAO;AACT;AAEA,MAAMM,OAAO;IACXP,OAAO;IACPC,OAAO;AACT;AAEA,MAAMO,WAAW;IACfR,OAAO;IACPC,OAAO;AACT;AAEA,MAAMQ,sBAAsB;IAC1BC,UAAU;QACRC,WAAW;QACXC,WAAWb;IACb;IACAc,MAAM;QACJF,WAAW;QACXC,WAAW;eAAIV;YAAMK;YAAMC;SAAS;IACtC;IACAM,MAAM;QACJH,WAAW;QACXC,WAAW;eAAIV;eAASC;SAAQ;IAClC;IACAY,OAAO;QACLJ,WAAW;QACXC,WAAW;eAAIV;YAAMM;SAAS;IAChC;IACAQ,MAAM;QACJL,WAAW;QACXC,WAAW;eAAIV;YAAMK;YAAMC;YAAUH;YAAQC;SAAW;IAC1D;IACAW,QAAQ;QACNN,WAAW;QACXC,WAAW;eAAIV;eAASC;SAAQ;IAClC;IACAe,OAAO;QACLP,WAAW;QACXC,WAAW;eAAIR;YAAKC;YAAQC;SAAW;IACzC;IACAa,OAAO;QACLR,WAAW;QACXC,WAAW;eAAIV;SAAK;IACtB;IACAkB,cAAc;QACZT,WAAW;QACXC,WAAW;eAAIV;SAAK;IACtB;IACAmB,UAAU;QACRV,WAAW;QACXC,WAAW;eAAIV;YAAMK;YAAMC;SAAS;IACtC;IACAc,QAAQ;QACNX,WAAW;QACXC,WAAW;eAAIV;SAAK;IACtB;IACAqB,MAAM;QACJZ,WAAW;QACXC,WAAW;eAAIV;YAAMK;YAAMC;SAAS;IACtC;IACAgB,UAAU;QACRb,WAAW;QACXC,WAAW;eAAIV;YAAMK;YAAMC;SAAS;IACtC;IACAiB,QAAQ;QACNd,WAAW;QACXC,WAAW;eAAIV;SAAK;IACtB;AACF;AAEA,eAAeO,oBAAmB"}

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":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/WhereBuilder/index.tsx"],"names":[],"mappings":"AAIA,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,CA4NpD,CAAA"}

package/dist/elements/WhereBuilder/index.js

@@ -1,3 +1,5 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React, { useEffect, useState } from 'react';
 import { useListQuery } from '../../providers/ListQuery/index.js';
@@ -6,6 +8,7 @@ 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 './index.scss';
 import { reduceFieldMap } from './reduceFieldMap.js';
 import { transformWhereQuery } from './transformWhereQuery.js';
 import validateWhereQuery from './validateWhereQuery.js';
@@ -69,63 +72,63 @@ const baseClass = 'where-builder';
         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 && ![
+        const newConditions = [
+            ...conditions
+        ];
+        if (relation === 'and') {
+            newConditions[orIndex].and.splice(andIndex, 0, {
+                [fieldName]: {}
+            });
+        } else {
+            newConditions.push({
+                and: [
+                    {
+                        [fieldName]: {}
+                    }
+                ]
+            });
+        }
+        setConditions(newConditions);
+    }, [
+        conditions
+    ]);
+    const updateCondition = React.useCallback(({ andIndex, fieldName, operator, orIndex, value: valueArg })=>{
+        const existingRowCondition = conditions[orIndex].and[andIndex];
+        if (typeof existingRowCondition === 'object' && fieldName && operator) {
+            const value = valueArg ?? (operator ? existingRowCondition[operator] : '');
+            const newRowCondition = {
+                [fieldName]: operator ? {
+                    [operator]: value
+                } : {}
+            };
+            if (JSON.stringify(existingRowCondition) !== JSON.stringify(newRowCondition)) {
+                conditions[orIndex].and[andIndex] = newRowCondition;
+                setConditions(conditions);
+                if (![
                     null,
                     undefined
                 ].includes(value)) {
-                    newConditions[orIndex].and[andIndex] = {
-                        [fieldName]: operator ? {
-                            [operator]: value
-                        } : {}
-                    };
+                    // only update query when field/operator/value are filled out
                     setShouldUpdateQuery(true);
                 }
             }
-            return newConditions;
-        });
-    }, []);
+        }
+    }, [
+        conditions
+    ]);
     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;
-        });
+        const newConditions = [
+            ...conditions
+        ];
+        newConditions[orIndex].and.splice(andIndex, 1);
+        if (newConditions[orIndex].and.length === 0) {
+            newConditions.splice(orIndex, 1);
+        }
+        setConditions(newConditions);
         setShouldUpdateQuery(true);
-    }, []);
+    }, [
+        conditions
+    ]);
     React.useEffect(()=>{
         if (shouldUpdateQuery) {
             handleWhereChange({
@@ -138,75 +141,105 @@ const baseClass = 'where-builder';
         handleWhereChange,
         shouldUpdateQuery
     ]);
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, conditions.length > 0 && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__label`
-    }, t('general:filterWhere', {
-        label: getTranslation(collectionPluralLabel, i18n)
-    })), /*#__PURE__*/ React.createElement("ul", {
-        className: `${baseClass}__or-filters`
-    }, conditions.map((or, orIndex)=>/*#__PURE__*/ React.createElement("li", {
-            key: orIndex
-        }, orIndex !== 0 && /*#__PURE__*/ React.createElement("div", {
-            className: `${baseClass}__label`
-        }, t('general:or')), /*#__PURE__*/ React.createElement("ul", {
-            className: `${baseClass}__and-filters`
-        }, 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,
-                fieldName: initialFieldName,
-                fields: reducedFields,
-                initialValue: initialValue,
-                key: andIndex,
-                operator: initialOperator,
-                orIndex: orIndex,
-                removeCondition: removeCondition,
-                updateCondition: updateCondition
-            }));
-        }))))), /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        className: `${baseClass}__add-or`,
-        icon: "plus",
-        iconPosition: "left",
-        iconStyle: "with-border",
-        onClick: ()=>{
-            addCondition({
-                andIndex: 0,
-                fieldName: reducedFields[0].value,
-                orIndex: conditions.length,
-                relation: 'or'
-            });
-        }
-    }, t('general:or'))), conditions.length === 0 && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__no-filters`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__label`
-    }, t('general:noFiltersSet')), /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        className: `${baseClass}__add-first-filter`,
-        icon: "plus",
-        iconPosition: "left",
-        iconStyle: "with-border",
-        onClick: ()=>{
-            if (reducedFields.length > 0) {
-                addCondition({
-                    andIndex: 0,
-                    fieldName: reducedFields[0].value,
-                    orIndex: conditions.length,
-                    relation: 'or'
-                });
-            }
-        }
-    }, t('general:addFilter'))));
+    return /*#__PURE__*/ _jsxs("div", {
+        className: baseClass,
+        children: [
+            conditions.length > 0 && /*#__PURE__*/ _jsxs(React.Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__label`,
+                        children: t('general:filterWhere', {
+                            label: getTranslation(collectionPluralLabel, i18n)
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("ul", {
+                        className: `${baseClass}__or-filters`,
+                        children: conditions.map((or, orIndex)=>{
+                            const compoundOrKey = `${orIndex}_${Array.isArray(or?.and) ? or.and.length : ''}`;
+                            return /*#__PURE__*/ _jsxs("li", {
+                                children: [
+                                    orIndex !== 0 && /*#__PURE__*/ _jsx("div", {
+                                        className: `${baseClass}__label`,
+                                        children: t('general:or')
+                                    }),
+                                    /*#__PURE__*/ _jsx("ul", {
+                                        className: `${baseClass}__and-filters`,
+                                        children: 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__*/ _jsxs("li", {
+                                                children: [
+                                                    andIndex !== 0 && /*#__PURE__*/ _jsx("div", {
+                                                        className: `${baseClass}__label`,
+                                                        children: t('general:and')
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Condition, {
+                                                        addCondition: addCondition,
+                                                        andIndex: andIndex,
+                                                        fieldName: initialFieldName,
+                                                        fields: reducedFields,
+                                                        initialValue: initialValue,
+                                                        operator: initialOperator,
+                                                        orIndex: orIndex,
+                                                        removeCondition: removeCondition,
+                                                        updateCondition: updateCondition
+                                                    })
+                                                ]
+                                            }, andIndex);
+                                        })
+                                    })
+                                ]
+                            }, compoundOrKey);
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        buttonStyle: "icon-label",
+                        className: `${baseClass}__add-or`,
+                        icon: "plus",
+                        iconPosition: "left",
+                        iconStyle: "with-border",
+                        onClick: ()=>{
+                            addCondition({
+                                andIndex: 0,
+                                fieldName: reducedFields[0].value,
+                                orIndex: conditions.length,
+                                relation: 'or'
+                            });
+                        },
+                        children: t('general:or')
+                    })
+                ]
+            }),
+            conditions.length === 0 && /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__no-filters`,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__label`,
+                        children: t('general:noFiltersSet')
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        buttonStyle: "icon-label",
+                        className: `${baseClass}__add-first-filter`,
+                        icon: "plus",
+                        iconPosition: "left",
+                        iconStyle: "with-border",
+                        onClick: ()=>{
+                            if (reducedFields.length > 0) {
+                                addCondition({
+                                    andIndex: 0,
+                                    fieldName: reducedFields[0].value,
+                                    orIndex: conditions.length,
+                                    relation: 'or'
+                                });
+                            }
+                        },
+                        children: t('general:addFilter')
+                    })
+                ]
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map