@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.5d5a2b2

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

@@ -5,31 +5,34 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { isFieldDisabled } from 'payload/shared';
 import { useDebounce } from '../../../hooks/useDebounce.js';
 import { useEffectEvent } from '../../../hooks/useEffectEvent.js';
+import { LineIcon } from '../../../icons/Line/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import { Button } from '../../Button/index.js';
 import { ReactSelect } from '../../ReactSelect/index.js';
 import { DefaultFilter } from './DefaultFilter/index.js';
 import { getOperatorValueTypes } from './validOperators.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'condition';
 export const Condition = props => {
   const {
-    addCondition,
     andIndex,
     fieldPath,
     filterOptions,
+    isFirstCondition,
+    join,
     operator,
     orIndex,
     reducedFields,
     removeCondition,
     RenderedFilter,
     updateCondition,
+    updateJoin,
     value
   } = props;
   const {
     t
   } = useTranslation();
-  const reducedField = reducedFields.find(field => field.value === fieldPath);
+  const reducedField = reducedFields.find(field => field.fieldPath === fieldPath);
   const [internalValue, setInternalValue] = useState(value);
   const debouncedValue = useDebounce(internalValue, 300);
   const booleanSelect = ['exists'].includes(operator) || reducedField?.field?.type === 'checkbox';
@@ -60,13 +63,13 @@ export const Condition = props => {
   useEffect(() => {
     void updateValue(debouncedValue);
   }, [debouncedValue]);
-  const disabled = !reducedField?.value && typeof reducedField?.value !== 'number' || isFieldDisabled(reducedField?.field, 'filter');
+  const disabled = !reducedField?.fieldPath || isFieldDisabled(reducedField?.field, 'filter');
   const handleFieldChange = useCallback(async field_0 => {
     setInternalValue(undefined);
     await updateCondition({
       type: 'field',
       andIndex,
-      field: reducedFields.find(option => option.value === field_0.value),
+      field: reducedFields.find(option => option.fieldPath === field_0.value),
       operator,
       orIndex,
       value: undefined
@@ -94,19 +97,47 @@ export const Condition = props => {
     className: baseClass,
     children: /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__wrap`,
-      children: [/*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__join`,
+        children: isFirstCondition ? /*#__PURE__*/_jsx("span", {
+          className: `${baseClass}__join-label`,
+          children: t('general:where')
+        }) : /*#__PURE__*/_jsx(ReactSelect, {
+          isClearable: false,
+          onChange: option_0 => updateJoin({
+            andIndex,
+            join: option_0.value,
+            orIndex
+          }),
+          options: [{
+            label: t('general:and'),
+            value: 'and'
+          }, {
+            label: t('general:or'),
+            value: 'or'
+          }],
+          value: {
+            label: join === 'and' ? t('general:and') : t('general:or'),
+            value: join
+          }
+        })
+      }), /*#__PURE__*/_jsxs("div", {
         className: `${baseClass}__inputs`,
         children: [/*#__PURE__*/_jsx("div", {
           className: `${baseClass}__field`,
           children: /*#__PURE__*/_jsx(ReactSelect, {
             disabled: disabled,
-            filterOption: (option_0, inputValue) => (option_0?.data?.plainTextLabel || option_0.label).toLowerCase().includes(inputValue.toLowerCase()),
+            filterOption: (option_1, inputValue) => (option_1?.data?.plainTextLabel || option_1.label).toLowerCase().includes(inputValue.toLowerCase()),
             isClearable: false,
             onChange: handleFieldChange,
-            options: reducedFields.filter(field_1 => !isFieldDisabled(field_1.field, 'filter')),
-            value: reducedField || {
-              value: reducedField?.value
-            }
+            options: reducedFields.filter(field_1 => !isFieldDisabled(field_1.field, 'filter')).map(f => ({
+              ...f,
+              value: f.fieldPath
+            })),
+            value: reducedField ? {
+              ...reducedField,
+              value: reducedField.fieldPath
+            } : undefined
           })
         }), /*#__PURE__*/_jsx("div", {
           className: `${baseClass}__operator`,
@@ -130,31 +161,19 @@ export const Condition = props => {
             value: internalValue ?? ''
           })
         })]
-      }), /*#__PURE__*/_jsxs("div", {
+      }), /*#__PURE__*/_jsx("div", {
         className: `${baseClass}__actions`,
-        children: [/*#__PURE__*/_jsx(Button, {
-          buttonStyle: "icon-label",
+        children: /*#__PURE__*/_jsx(Button, {
+          buttonStyle: "ghost",
           className: `${baseClass}__actions-remove`,
-          icon: "x",
-          iconStyle: "with-border",
+          icon: /*#__PURE__*/_jsx(LineIcon, {
+            size: 24
+          }),
           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,
-            field: reducedFields.find(field_2 => !isFieldDisabled(field_2.field, 'filter')),
-            orIndex,
-            relation: 'and'
-          }),
-          round: true
-        })]
+          })
+        })
       })]
     })
   });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useState","isFieldDisabled","useDebounce","useEffectEvent","useTranslation","Button","ReactSelect","DefaultFilter","getOperatorValueTypes","baseClass","Condition","props","addCondition","andIndex","fieldPath","filterOptions","operator","orIndex","reducedFields","removeCondition","RenderedFilter","updateCondition","value","t","reducedField","find","field","internalValue","setInternalValue","debouncedValue","booleanSelect","includes","type","valueOptions","label","options","updateValue","undefined","disabled","handleFieldChange","option","handleOperatorChange","operatorValueTypes","validOperatorValue","isValidValue","_jsx","className","_jsxs","filterOption","inputValue","data","plainTextLabel","toLowerCase","isClearable","onChange","filter","operators","o","internalField","buttonStyle","icon","iconStyle","onClick","round","relation"],"sources":["../../../../src/elements/WhereBuilder/Condition/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type {\n  AddCondition,\n  ReducedField,\n  RemoveCondition,\n  UpdateCondition,\n  Value,\n} from '../types.js'\n\nexport type Props = {\n  readonly addCondition: AddCondition\n  readonly andIndex: number\n  readonly fieldPath: string\n  readonly filterOptions?: ResolvedFilterOptions\n  readonly operator: Operator\n  readonly orIndex: number\n  readonly reducedFields: ReducedField[]\n  readonly removeCondition: RemoveCondition\n  readonly RenderedFilter?: React.ReactNode\n  readonly updateCondition: UpdateCondition\n  readonly value: Value\n}\n\nimport type { Operator, Option as PayloadOption, ResolvedFilterOptions } from 'payload'\n\nimport { isFieldDisabled } from 'payload/shared'\n\nimport type { Option } from '../../ReactSelect/index.js'\n\nimport { useDebounce } from '../../../hooks/useDebounce.js'\nimport { useEffectEvent } from '../../../hooks/useEffectEvent.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { ReactSelect } from '../../ReactSelect/index.js'\nimport { DefaultFilter } from './DefaultFilter/index.js'\nimport { getOperatorValueTypes } from './validOperators.js'\nimport './index.scss'\n\nconst baseClass = 'condition'\n\nexport const Condition: React.FC<Props> = (props) => {\n  const {\n    addCondition,\n    andIndex,\n    fieldPath,\n    filterOptions,\n    operator,\n    orIndex,\n    reducedFields,\n    removeCondition,\n    RenderedFilter,\n    updateCondition,\n    value,\n  } = props\n\n  const { t } = useTranslation()\n\n  const reducedField = reducedFields.find((field) => field.value === fieldPath)\n\n  const [internalValue, setInternalValue] = useState<Value>(value)\n\n  const debouncedValue = useDebounce(internalValue, 300)\n\n  const booleanSelect = ['exists'].includes(operator) || reducedField?.field?.type === 'checkbox'\n\n  let valueOptions: PayloadOption[] = []\n\n  if (booleanSelect) {\n    valueOptions = [\n      { label: t('general:true'), value: 'true' },\n      { label: t('general:false'), value: 'false' },\n    ]\n  } else if (reducedField?.field && 'options' in reducedField.field) {\n    valueOptions = reducedField.field.options\n  }\n\n  const updateValue = useEffectEvent(async (debouncedValue: Value) => {\n    if (operator) {\n      await updateCondition({\n        type: 'value',\n        andIndex,\n        field: reducedField,\n        operator,\n        orIndex,\n        value: debouncedValue === null || debouncedValue === '' ? undefined : debouncedValue,\n      })\n    }\n  })\n\n  useEffect(() => {\n    void updateValue(debouncedValue)\n  }, [debouncedValue])\n\n  const disabled =\n    (!reducedField?.value && typeof reducedField?.value !== 'number') ||\n    isFieldDisabled(reducedField?.field, 'filter')\n\n  const handleFieldChange = useCallback(\n    async (field: Option<string>) => {\n      setInternalValue(undefined)\n      await updateCondition({\n        type: 'field',\n        andIndex,\n        field: reducedFields.find((option) => option.value === field.value),\n        operator,\n        orIndex,\n        value: undefined,\n      })\n    },\n    [andIndex, operator, orIndex, reducedFields, updateCondition],\n  )\n\n  const handleOperatorChange = useCallback(\n    async (operator: Option<Operator>) => {\n      const operatorValueTypes = getOperatorValueTypes(reducedField.field.type)\n      const validOperatorValue = operatorValueTypes[operator.value] || 'any'\n      const isValidValue =\n        validOperatorValue === 'any' ||\n        typeof value === validOperatorValue ||\n        (validOperatorValue === 'boolean' && (value === 'true' || value === 'false'))\n\n      if (!isValidValue) {\n        // if the current value is not valid for the new operator\n        // reset the value before passing it to updateCondition\n        setInternalValue(undefined)\n      }\n\n      await updateCondition({\n        type: 'operator',\n        andIndex,\n        field: reducedField,\n        operator: operator.value,\n        orIndex,\n        value: isValidValue ? value : undefined,\n      })\n    },\n    [andIndex, reducedField, orIndex, updateCondition, value],\n  )\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <div className={`${baseClass}__inputs`}>\n          <div className={`${baseClass}__field`}>\n            <ReactSelect\n              disabled={disabled}\n              filterOption={(option, inputValue) =>\n                ((option?.data?.plainTextLabel as string) || option.label)\n                  .toLowerCase()\n                  .includes(inputValue.toLowerCase())\n              }\n              isClearable={false}\n              onChange={handleFieldChange}\n              options={reducedFields.filter((field) => !isFieldDisabled(field.field, 'filter'))}\n              value={\n                reducedField || {\n                  value: reducedField?.value,\n                }\n              }\n            />\n          </div>\n          <div className={`${baseClass}__operator`}>\n            <ReactSelect\n              disabled={disabled}\n              isClearable={false}\n              onChange={handleOperatorChange}\n              options={reducedField?.operators}\n              value={reducedField?.operators.find((o) => operator === o.value) || null}\n            />\n          </div>\n          <div className={`${baseClass}__value`}>\n            {RenderedFilter || (\n              <DefaultFilter\n                booleanSelect={booleanSelect}\n                disabled={\n                  !operator || !reducedField || isFieldDisabled(reducedField?.field, 'filter')\n                }\n                filterOptions={filterOptions}\n                internalField={reducedField}\n                onChange={setInternalValue}\n                operator={operator}\n                options={valueOptions}\n                value={internalValue ?? ''}\n              />\n            )}\n          </div>\n        </div>\n        <div className={`${baseClass}__actions`}>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__actions-remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={() =>\n              removeCondition({\n                andIndex,\n                orIndex,\n              })\n            }\n            round\n          />\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__actions-add`}\n            icon=\"plus\"\n            iconStyle=\"with-border\"\n            onClick={() =>\n              addCondition({\n                andIndex: andIndex + 1,\n                field: reducedFields.find((field) => !isFieldDisabled(field.field, 'filter')),\n                orIndex,\n                relation: 'and',\n              })\n            }\n            round\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useState","isFieldDisabled","useDebounce","useEffectEvent","LineIcon","useTranslation","Button","ReactSelect","DefaultFilter","getOperatorValueTypes","baseClass","Condition","props","andIndex","fieldPath","filterOptions","isFirstCondition","join","operator","orIndex","reducedFields","removeCondition","RenderedFilter","updateCondition","updateJoin","value","t","reducedField","find","field","internalValue","setInternalValue","debouncedValue","booleanSelect","includes","type","valueOptions","label","options","updateValue","undefined","disabled","handleFieldChange","option","handleOperatorChange","operatorValueTypes","validOperatorValue","isValidValue","_jsx","className","_jsxs","isClearable","onChange","filterOption","inputValue","data","plainTextLabel","toLowerCase","filter","map","f","operators","o","internalField","buttonStyle","icon","size","onClick"],"sources":["../../../../src/elements/WhereBuilder/Condition/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type {\n  AddCondition,\n  ReducedField,\n  RemoveCondition,\n  UpdateCondition,\n  UpdateJoin,\n  Value,\n} from '../types.js'\n\nexport type Props = {\n  readonly addCondition: AddCondition\n  readonly andIndex: number\n  readonly fieldPath: string\n  readonly filterOptions?: ResolvedFilterOptions\n  readonly isFirstCondition: boolean\n  readonly join: 'and' | 'or'\n  readonly operator: Operator\n  readonly orIndex: number\n  readonly reducedFields: ReducedField[]\n  readonly removeCondition: RemoveCondition\n  readonly RenderedFilter?: React.ReactNode\n  readonly updateCondition: UpdateCondition\n  readonly updateJoin: UpdateJoin\n  readonly value: Value\n}\n\nimport type { Operator, Option as PayloadOption, ResolvedFilterOptions } from 'payload'\n\nimport { isFieldDisabled } from 'payload/shared'\n\nimport type { Option } from '../../ReactSelect/index.js'\n\nimport { useDebounce } from '../../../hooks/useDebounce.js'\nimport { useEffectEvent } from '../../../hooks/useEffectEvent.js'\nimport { LineIcon } from '../../../icons/Line/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { ReactSelect } from '../../ReactSelect/index.js'\nimport { DefaultFilter } from './DefaultFilter/index.js'\nimport { getOperatorValueTypes } from './validOperators.js'\nimport './index.css'\n\nconst baseClass = 'condition'\n\nexport const Condition: React.FC<Props> = (props) => {\n  const {\n    andIndex,\n    fieldPath,\n    filterOptions,\n    isFirstCondition,\n    join,\n    operator,\n    orIndex,\n    reducedFields,\n    removeCondition,\n    RenderedFilter,\n    updateCondition,\n    updateJoin,\n    value,\n  } = props\n\n  const { t } = useTranslation()\n\n  const reducedField = reducedFields.find((field) => field.fieldPath === fieldPath)\n\n  const [internalValue, setInternalValue] = useState<Value>(value)\n\n  const debouncedValue = useDebounce(internalValue, 300)\n\n  const booleanSelect = ['exists'].includes(operator) || reducedField?.field?.type === 'checkbox'\n\n  let valueOptions: PayloadOption[] = []\n\n  if (booleanSelect) {\n    valueOptions = [\n      { label: t('general:true'), value: 'true' },\n      { label: t('general:false'), value: 'false' },\n    ]\n  } else if (reducedField?.field && 'options' in reducedField.field) {\n    valueOptions = reducedField.field.options\n  }\n\n  const updateValue = useEffectEvent(async (debouncedValue: Value) => {\n    if (operator) {\n      await updateCondition({\n        type: 'value',\n        andIndex,\n        field: reducedField,\n        operator,\n        orIndex,\n        value: debouncedValue === null || debouncedValue === '' ? undefined : debouncedValue,\n      })\n    }\n  })\n\n  useEffect(() => {\n    void updateValue(debouncedValue)\n  }, [debouncedValue])\n\n  const disabled = !reducedField?.fieldPath || isFieldDisabled(reducedField?.field, 'filter')\n\n  const handleFieldChange = useCallback(\n    async (field: Option<string>) => {\n      setInternalValue(undefined)\n      await updateCondition({\n        type: 'field',\n        andIndex,\n        field: reducedFields.find((option) => option.fieldPath === field.value),\n        operator,\n        orIndex,\n        value: undefined,\n      })\n    },\n    [andIndex, operator, orIndex, reducedFields, updateCondition],\n  )\n\n  const handleOperatorChange = useCallback(\n    async (operator: Option<Operator>) => {\n      const operatorValueTypes = getOperatorValueTypes(reducedField.field.type)\n      const validOperatorValue = operatorValueTypes[operator.value] || 'any'\n      const isValidValue =\n        validOperatorValue === 'any' ||\n        typeof value === validOperatorValue ||\n        (validOperatorValue === 'boolean' && (value === 'true' || value === 'false'))\n\n      if (!isValidValue) {\n        // if the current value is not valid for the new operator\n        // reset the value before passing it to updateCondition\n        setInternalValue(undefined)\n      }\n\n      await updateCondition({\n        type: 'operator',\n        andIndex,\n        field: reducedField,\n        operator: operator.value,\n        orIndex,\n        value: isValidValue ? value : undefined,\n      })\n    },\n    [andIndex, reducedField, orIndex, updateCondition, value],\n  )\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <div className={`${baseClass}__join`}>\n          {isFirstCondition ? (\n            <span className={`${baseClass}__join-label`}>{t('general:where')}</span>\n          ) : (\n            <ReactSelect\n              isClearable={false}\n              onChange={(option: Option<'and' | 'or'>) =>\n                updateJoin({ andIndex, join: option.value, orIndex })\n              }\n              options={[\n                { label: t('general:and'), value: 'and' },\n                { label: t('general:or'), value: 'or' },\n              ]}\n              value={{ label: join === 'and' ? t('general:and') : t('general:or'), value: join }}\n            />\n          )}\n        </div>\n        <div className={`${baseClass}__inputs`}>\n          <div className={`${baseClass}__field`}>\n            <ReactSelect\n              disabled={disabled}\n              filterOption={(option, inputValue) =>\n                ((option?.data?.plainTextLabel as string) || option.label)\n                  .toLowerCase()\n                  .includes(inputValue.toLowerCase())\n              }\n              isClearable={false}\n              onChange={handleFieldChange}\n              options={reducedFields\n                .filter((field) => !isFieldDisabled(field.field, 'filter'))\n                .map((f) => ({ ...f, value: f.fieldPath }))}\n              value={reducedField ? { ...reducedField, value: reducedField.fieldPath } : undefined}\n            />\n          </div>\n          <div className={`${baseClass}__operator`}>\n            <ReactSelect\n              disabled={disabled}\n              isClearable={false}\n              onChange={handleOperatorChange}\n              options={reducedField?.operators}\n              value={reducedField?.operators.find((o) => operator === o.value) || null}\n            />\n          </div>\n          <div className={`${baseClass}__value`}>\n            {RenderedFilter || (\n              <DefaultFilter\n                booleanSelect={booleanSelect}\n                disabled={\n                  !operator || !reducedField || isFieldDisabled(reducedField?.field, 'filter')\n                }\n                filterOptions={filterOptions}\n                internalField={reducedField}\n                onChange={setInternalValue}\n                operator={operator}\n                options={valueOptions}\n                value={internalValue ?? ''}\n              />\n            )}\n          </div>\n        </div>\n        <div className={`${baseClass}__actions`}>\n          <Button\n            buttonStyle=\"ghost\"\n            className={`${baseClass}__actions-remove`}\n            icon={<LineIcon size={24} />}\n            onClick={() =>\n              removeCondition({\n                andIndex,\n                orIndex,\n              })\n            }\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"validOperators.d.ts","sourceRoot":"","sources":["../../../../src/elements/WhereBuilder/Condition/validOperators.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;CAiCjC,CAAA"}
+{"version":3,"file":"validOperators.d.ts","sourceRoot":"","sources":["../../../../src/elements/WhereBuilder/Condition/validOperators.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,GAAI,cAAS;;;;;;;;;;;;;;;;;CAiC9C,CAAA"}

package/dist/elements/WhereBuilder/field-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-types.d.ts","sourceRoot":"","sources":["../../../src/elements/WhereBuilder/field-types.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAa1C,eAAO,MAAM,cAAc;;;GAS1B,CAAA;AA8DD,eAAO,MAAM,mBAAmB,EAAE;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,SAAS,EAAE,MAAM,CAAA;QACjB,SAAS,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,EAAE,CAAA;KAC9C,CAAA;CA0DF,CAAA;AAED,eAAO,MAAM,sBAAsB,yBAGhC;IACD,KAAK,EAAE,WAAW,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,KAAG;IACF,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,EAAE;QACd,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,MAAM,CAAA;KACd,EAAE,CAAA;CAqBJ,CAAA"}
+{"version":3,"file":"field-types.d.ts","sourceRoot":"","sources":["../../../src/elements/WhereBuilder/field-types.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAa1C,eAAO,MAAM,cAAc;;;GAS1B,CAAA;AA8DD,eAAO,MAAM,mBAAmB,EAAE;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,SAAS,EAAE,MAAM,CAAA;QACjB,SAAS,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,EAAE,CAAA;KAC9C,CAAA;CA0DF,CAAA;AAED,eAAO,MAAM,sBAAsB,GAAI,sBAGpC;IACD,KAAK,EAAE,WAAW,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,KAAG;IACF,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,EAAE;QACd,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,MAAM,CAAA;KACd,EAAE,CAAA;CAqBJ,CAAA"}

package/dist/elements/WhereBuilder/index.css

@@ -0,0 +1,74 @@
+@layer payload-default {
+  .where-builder {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+    padding-block: var(--spacer-3);
+    padding-inline: var(--gutter-h);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+
+    .btn {
+      margin: 0;
+      align-self: flex-start;
+    }
+  }
+
+  .where-builder__label {
+    margin: 0;
+    color: var(--color-text);
+  }
+
+  .where-builder__add-or.btn {
+    color: var(--color-text-secondary);
+
+    .icon--circle-plus {
+      width: var(--spacer-4);
+      height: var(--spacer-4);
+    }
+  }
+
+  /* All condition rows share these column tracks so join/field/operator/value/actions stay aligned. */
+  .where-builder__or-filters {
+    margin: 0;
+    padding: 0;
+    display: grid;
+    grid-template-columns: minmax(calc(var(--spacer-4) * 2), max-content) 1fr 1fr 1fr auto;
+    column-gap: var(--spacer-2);
+    row-gap: var(--spacer-2);
+    align-items: center;
+  }
+
+  /* Flatten the condition wrappers so each cell is a direct grid item. */
+  .where-builder__and-filters {
+    display: contents;
+  }
+
+  /* Add Filter button sits in column 2 onward, aligned with the field input. */
+  .where-builder__add-or-row {
+    grid-column: 2 / -1;
+  }
+
+  @media (max-width: 768px) {
+    .where-builder__or-filters {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacer-2);
+    }
+
+    .where-builder__and-filters {
+      display: revert;
+      width: 100%;
+    }
+
+    .where-builder__add-or-row {
+      grid-column: revert;
+      align-self: flex-start;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .where-builder {
+      padding-top: var(--spacer-2);
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { WhereBuilderProps } from './types.js';
-import './index.scss';
+import './index.css';
 export { WhereBuilderProps };
 /**
  * The WhereBuilder component is used to render the filter controls for a collection's list view

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":"AAMA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAkD,iBAAiB,EAAE,MAAM,YAAY,CAAA;AASnG,OAAO,cAAc,CAAA;AAKrB,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAE5B;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8OpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/WhereBuilder/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAKV,iBAAiB,EAClB,MAAM,YAAY,CAAA;AAUnB,OAAO,aAAa,CAAA;AAKpB,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAE5B;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwRpD,CAAA"}

package/dist/elements/WhereBuilder/index.js

@@ -1,10 +1,10 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getTranslation } from '@payloadcms/translations';
 import { dequal } from 'dequal/lite';
 import { isFieldDisabled, transformWhereQuery, validateWhereQuery } from 'payload/shared';
 import React, { useMemo } from 'react';
+import { CirclePlusIcon } from '../../icons/CirclePlus/index.js';
 import { useAuth } from '../../providers/Auth/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
@@ -12,7 +12,7 @@ import { useTranslation } from '../../providers/Translation/index.js';
 import { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js';
 import { Button } from '../Button/index.js';
 import { Condition } from './Condition/index.js';
-import './index.scss';
+import './index.css';
 import { fieldTypeConditions, getValidFieldOperators } from './field-types.js';
 const baseClass = 'where-builder';
 /**
@@ -22,10 +22,10 @@ const baseClass = 'where-builder';
  */
 export const WhereBuilder = props => {
   const {
-    collectionPluralLabel: collectionPluralLabelProp,
     collectionSlug,
     fields: fieldsProp,
     onChange,
+    onClose,
     renderedFilters = undefined,
     resolvedFilterOptions = undefined,
     value: valueProp
@@ -45,15 +45,14 @@ export const WhereBuilder = props => {
   const collectionConfig = useMemo(() => isFormMode ? getEntityConfig({
     collectionSlug
   }) : null, [isFormMode, collectionSlug, getEntityConfig]);
-  const collectionPluralLabel = isFormMode ? collectionConfig?.labels?.plural ?? collectionSlug : collectionPluralLabelProp ?? collectionSlug;
   const fields = isFormMode ? collectionConfig?.fields : fieldsProp;
-  const fieldsSafe = fields ?? [];
   const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields;
   const reducedFields = useMemo(() => reduceFieldsToOptions({
     fieldPermissions,
-    fields: fieldsSafe,
+    fields: fields ?? [],
     i18n
-  }), [fieldPermissions, fieldsSafe, i18n]);
+  }), [fieldPermissions, fields, i18n]);
+  const firstField = useMemo(() => reducedFields.find(f => !isFieldDisabled(f.field, 'filter')), [reducedFields]);
   const conditions = useMemo(() => {
     const whereFromSearch = isFormMode ? valueProp : listQuery.query?.where;
     if (whereFromSearch) {
@@ -70,9 +69,9 @@ export const WhereBuilder = props => {
     }
     return [];
   }, [isFormMode, valueProp, listQuery.query?.where]);
-  const handleWhereChange = isFormMode ? where => {
+  const handleWhereChange = useMemo(() => isFormMode ? where => {
     onChange?.(where);
-  } : listQuery.handleWhereChange;
+  } : listQuery.handleWhereChange, [isFormMode, onChange, listQuery.handleWhereChange]);
   const addCondition = React.useCallback(async ({
     andIndex,
     field,
@@ -83,14 +82,14 @@ export const WhereBuilder = props => {
     const defaultOperator = fieldTypeConditions[field.field.type].operators[0].value;
     if (relation === 'and') {
       newConditions[orIndex].and.splice(andIndex, 0, {
-        [String(field.value)]: {
+        [String(field.fieldPath)]: {
           [defaultOperator]: undefined
         }
       });
     } else {
       newConditions.push({
         and: [{
-          [String(field.value)]: {
+          [String(field.fieldPath)]: {
             [defaultOperator]: undefined
           }
         }]
@@ -107,22 +106,41 @@ export const WhereBuilder = props => {
     orIndex: orIndex_0,
     value
   }) => {
-    const existingCondition = conditions[orIndex_0].and[andIndex_0];
-    if (typeof existingCondition === 'object' && field_0.value) {
+    // Virtual first row: conditions not yet committed, build from scratch
+    if (conditions.length === 0) {
       const {
         validOperator
       } = getValidFieldOperators({
         field: field_0.field,
         operator: incomingOperator
       });
+      await handleWhereChange({
+        or: [{
+          and: [{
+            [String(field_0.fieldPath)]: {
+              [validOperator]: value
+            }
+          }]
+        }]
+      });
+      return;
+    }
+    const existingCondition = conditions[orIndex_0].and[andIndex_0];
+    if (typeof existingCondition === 'object' && field_0?.fieldPath) {
+      const {
+        validOperator: validOperator_0
+      } = getValidFieldOperators({
+        field: field_0.field,
+        operator: incomingOperator
+      });
       // Skip if nothing changed
-      const existingValue = existingCondition[String(field_0.value)]?.[validOperator];
+      const existingValue = existingCondition[String(field_0.fieldPath)]?.[validOperator_0];
       if (typeof existingValue !== 'undefined' && existingValue === value) {
         return;
       }
       const newRowCondition = {
-        [String(field_0.value)]: {
-          [validOperator]: value
+        [String(field_0.fieldPath)]: {
+          [validOperator_0]: value
         }
       };
       if (dequal(existingCondition, newRowCondition)) {
@@ -139,6 +157,11 @@ export const WhereBuilder = props => {
     andIndex: andIndex_1,
     orIndex: orIndex_1
   }) => {
+    // Virtual first row: removing it just closes the panel
+    if (conditions.length === 0) {
+      onClose?.();
+      return;
+    }
     const newConditions_1 = [...conditions];
     newConditions_1[orIndex_1].and.splice(andIndex_1, 1);
     if (newConditions_1[orIndex_1].and.length === 0) {
@@ -147,92 +170,113 @@ export const WhereBuilder = props => {
     await handleWhereChange({
       or: newConditions_1
     });
+    // Removing the last remaining condition closes the filters panel.
+    if (newConditions_1.length === 0) {
+      onClose?.();
+    }
+  }, [conditions, handleWhereChange, onClose]);
+  const updateJoin = React.useCallback(async ({
+    andIndex: andIndex_2,
+    join,
+    orIndex: orIndex_2
+  }) => {
+    // Flatten the nested or/and structure into a single ordered list, tracking
+    // the join relation that connects each condition to the previous one.
+    const flattened = [];
+    conditions.forEach((orGroup, oIdx) => {
+      orGroup.and.forEach((cond, aIdx) => {
+        const isTarget = oIdx === orIndex_2 && aIdx === andIndex_2;
+        const currentJoin = flattened.length === 0 ? null : aIdx === 0 ? 'or' : 'and';
+        flattened.push({
+          cond,
+          join: isTarget ? join : currentJoin
+        });
+      });
+    });
+    // Rebuild the or/and structure from the flattened list using the join relations.
+    const newConditions_2 = [];
+    flattened.forEach(({
+      cond: cond_0,
+      join: itemJoin
+    }, index) => {
+      if (index === 0 || itemJoin === 'or') {
+        newConditions_2.push({
+          and: [cond_0]
+        });
+      } else {
+        newConditions_2[newConditions_2.length - 1].and.push(cond_0);
+      }
+    });
+    await handleWhereChange({
+      or: newConditions_2
+    });
   }, [conditions, handleWhereChange]);
-  return /*#__PURE__*/_jsxs("div", {
+  const addFirstFilter = React.useCallback(async () => {
+    if (firstField) {
+      await addCondition({
+        andIndex: 0,
+        field: firstField,
+        orIndex: conditions.length,
+        relation: 'or'
+      });
+    }
+  }, [addCondition, conditions.length, firstField]);
+  // When conditions is empty in list mode, show a virtual first row immediately
+  // (derived from the first available field) so the panel never opens blank.
+  const displayConditions = !isFormMode && conditions.length === 0 && firstField ? [{
+    and: [{
+      [firstField.fieldPath]: {
+        [firstField.operators[0].value]: undefined
+      }
+    }]
+  }] : conditions;
+  return /*#__PURE__*/_jsx("div", {
     className: baseClass,
-    children: [conditions.length > 0 && /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [/*#__PURE__*/_jsx("p", {
-        className: `${baseClass}__label`,
-        children: t('general:filterWhere', {
-          label: getTranslation(collectionPluralLabel, i18n)
+    children: /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__or-filters`,
+      children: [displayConditions.map((or, orIndex_3) => {
+        const compoundOrKey = `${orIndex_3}_${Array.isArray(or?.and) ? or.and.length : ''}`;
+        return /*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__and-filters`,
+          children: Array.isArray(or?.and) && or.and.map((_, andIndex_3) => {
+            const condition = displayConditions[orIndex_3].and[andIndex_3];
+            const fieldPath = Object.keys(condition)[0];
+            const operator = Object.keys(condition?.[fieldPath] || {})?.[0] || undefined;
+            const value_0 = condition?.[fieldPath]?.[operator] || undefined;
+            const isFirstCondition = orIndex_3 === 0 && andIndex_3 === 0;
+            const join_0 = andIndex_3 === 0 ? 'or' : 'and';
+            return /*#__PURE__*/_jsx(Condition, {
+              addCondition: addCondition,
+              andIndex: andIndex_3,
+              fieldPath: fieldPath,
+              filterOptions: resolvedFilterOptions?.get(fieldPath),
+              isFirstCondition: isFirstCondition,
+              join: join_0,
+              operator: operator,
+              orIndex: orIndex_3,
+              reducedFields: reducedFields,
+              removeCondition: removeCondition,
+              RenderedFilter: renderedFilters?.get(fieldPath),
+              updateCondition: updateCondition,
+              updateJoin: updateJoin,
+              value: value_0
+            }, andIndex_3);
+          })
+        }, compoundOrKey);
+      }), /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__add-or-row`,
+        children: /*#__PURE__*/_jsx(Button, {
+          buttonStyle: "ghost",
+          className: `${baseClass}__add-or`,
+          icon: /*#__PURE__*/_jsx(CirclePlusIcon, {
+            size: 24
+          }),
+          iconPosition: "left",
+          onClick: addFirstFilter,
+          children: t('general:addFilter')
         })
-      }), /*#__PURE__*/_jsx("ul", {
-        className: `${baseClass}__or-filters`,
-        children: conditions.map((or, orIndex_2) => {
-          const compoundOrKey = `${orIndex_2}_${Array.isArray(or?.and) ? or.and.length : ''}`;
-          return /*#__PURE__*/_jsxs("li", {
-            children: [orIndex_2 !== 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_2) => {
-                const condition = conditions[orIndex_2].and[andIndex_2];
-                const fieldPath = Object.keys(condition)[0];
-                const operator = Object.keys(condition?.[fieldPath] || {})?.[0] || undefined;
-                const value_0 = condition?.[fieldPath]?.[operator] || undefined;
-                return /*#__PURE__*/_jsxs("li", {
-                  children: [andIndex_2 !== 0 && /*#__PURE__*/_jsx("div", {
-                    className: `${baseClass}__label`,
-                    children: t('general:and')
-                  }), /*#__PURE__*/_jsx(Condition, {
-                    addCondition: addCondition,
-                    andIndex: andIndex_2,
-                    fieldPath: fieldPath,
-                    filterOptions: resolvedFilterOptions?.get(fieldPath),
-                    operator: operator,
-                    orIndex: orIndex_2,
-                    reducedFields: reducedFields,
-                    removeCondition: removeCondition,
-                    RenderedFilter: renderedFilters?.get(fieldPath),
-                    updateCondition: updateCondition,
-                    value: value_0
-                  })]
-                }, andIndex_2);
-              })
-            })]
-          }, compoundOrKey);
-        })
-      }), /*#__PURE__*/_jsx(Button, {
-        buttonStyle: "icon-label",
-        className: `${baseClass}__add-or`,
-        icon: "plus",
-        iconPosition: "left",
-        iconStyle: "with-border",
-        onClick: async () => {
-          await addCondition({
-            andIndex: 0,
-            field: reducedFields.find(field_1 => !isFieldDisabled(field_1.field, 'filter')),
-            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: async () => {
-          if (reducedFields.length > 0) {
-            await addCondition({
-              andIndex: 0,
-              field: reducedFields.find(field_2 => !isFieldDisabled(field_2.field, 'filter')),
-              orIndex: conditions.length,
-              relation: 'or'
-            });
-          }
-        },
-        children: t('general:addFilter')
       })]
-    })]
+    })
   });
 };
 //# sourceMappingURL=index.js.map