@payloadcms/ui 4.0.0-internal.5f0cd13 → 4.0.0-internal.a0ef1b8

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

@@ -6,10 +6,8 @@ import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { useTranslation } from '../../../../providers/Translation/index.js';
 import { ReactSelect } from '../../../ReactSelect/index.js';
-import './index.scss';
-const baseClass = 'condition-value-number';
 export const NumberFilter = props => {
-  const $ = _c(20);
+  const $ = _c(10);
   const {
     disabled,
     field: t0,
@@ -19,12 +17,14 @@ export const NumberFilter = props => {
   } = props;
   const {
     admin,
-    hasMany
+    hasMany,
+    label
   } = t0;
   const {
     i18n,
     t
   } = useTranslation();
+  const ariaLabel = label ? getTranslation(label, i18n) : t("general:enterAValue");
   let t1;
   if ($[0] !== hasMany || $[1] !== operator) {
     t1 = ["in", "not_in"].includes(operator) || hasMany;
@@ -86,42 +86,28 @@ export const NumberFilter = props => {
     t5 = $[9];
   }
   React.useEffect(t4, t5);
-  let t6;
-  if ($[10] !== admin?.placeholder || $[11] !== disabled || $[12] !== i18n || $[13] !== isMulti || $[14] !== onChange || $[15] !== onSelect || $[16] !== t || $[17] !== value || $[18] !== valueToRender) {
-    const placeholder = getTranslation(admin?.placeholder, i18n) || t("general:enterAValue");
-    t6 = isMulti ? _jsx(ReactSelect, {
-      disabled,
-      isClearable: true,
-      isCreatable: true,
-      isMulti,
-      isSortable: true,
-      numberOnly: true,
-      onChange: onSelect,
-      options: [],
-      placeholder,
-      value: valueToRender || []
-    }) : _jsx("input", {
-      className: baseClass,
-      disabled,
-      onChange: e => onChange(e.target.value),
-      placeholder,
-      type: "number",
-      value
-    });
-    $[10] = admin?.placeholder;
-    $[11] = disabled;
-    $[12] = i18n;
-    $[13] = isMulti;
-    $[14] = onChange;
-    $[15] = onSelect;
-    $[16] = t;
-    $[17] = value;
-    $[18] = valueToRender;
-    $[19] = t6;
-  } else {
-    t6 = $[19];
-  }
-  return t6;
+  const placeholder = getTranslation(admin?.placeholder, i18n) || t("general:enterAValue");
+  return isMulti ? _jsx(ReactSelect, {
+    "aria-label": ariaLabel,
+    disabled,
+    isClearable: true,
+    isCreatable: true,
+    isMulti,
+    isSortable: true,
+    numberOnly: true,
+    onChange: onSelect,
+    options: [],
+    placeholder,
+    value: valueToRender || []
+  }) : _jsx("input", {
+    "aria-label": ariaLabel,
+    className: "form-input",
+    disabled,
+    onChange: e => onChange(e.target.value),
+    placeholder,
+    type: "number",
+    value
+  });
 };
 function _temp(option) {
   return Number(option.value?.value || option.value);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","ReactSelect","baseClass","NumberFilter","props","$","disabled","field","t0","onChange","operator","value","admin","hasMany","i18n","t","t1","includes","isMulti","t2","Symbol","for","valueToRender","setValueToRender","useState","t3","selectedOption","newValue","Array","isArray","map","_temp","onSelect","t4","t5","_temp2","useEffect","t6","placeholder","_jsx","isClearable","isCreatable","isSortable","numberOnly","options","className","e","target","type","option","Number","val","index","id","label","toString"],"sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { NumberFilterProps as Props } from './types.js'\n\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { ReactSelect } from '../../../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'condition-value-number'\n\nexport const NumberFilter: React.FC<Props> = (props) => {\n  const {\n    disabled,\n    field: { admin, hasMany },\n    onChange,\n    operator,\n    value,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  const isMulti = ['in', 'not_in'].includes(operator) || hasMany\n\n  const [valueToRender, setValueToRender] = React.useState<\n    { id: string; label: string; value: { value: number } }[]\n  >([])\n\n  const onSelect = React.useCallback(\n    (selectedOption) => {\n      let newValue\n      if (!selectedOption) {\n        newValue = []\n      } else if (isMulti) {\n        if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => Number(option.value?.value || option.value))\n        } else {\n          newValue = [Number(selectedOption.value?.value || selectedOption.value)]\n        }\n      }\n\n      onChange(newValue)\n    },\n    [isMulti, onChange],\n  )\n\n  React.useEffect(() => {\n    if (Array.isArray(value)) {\n      setValueToRender(\n        value.map((val, index) => {\n          return {\n            id: `${val}${index}`, // append index to avoid duplicate keys but allow duplicate numbers\n            label: `${val}`,\n            value: {\n              toString: () => `${val}${index}`,\n              value: (val as any)?.value || val,\n            },\n          }\n        }),\n      )\n    } else {\n      setValueToRender([])\n    }\n  }, [value])\n\n  const placeholder = getTranslation(admin?.placeholder, i18n) || t('general:enterAValue')\n\n  return isMulti ? (\n    <ReactSelect\n      disabled={disabled}\n      isClearable\n      isCreatable\n      isMulti={isMulti}\n      isSortable\n      numberOnly\n      onChange={onSelect}\n      options={[]}\n      placeholder={placeholder}\n      value={valueToRender || []}\n    />\n  ) : (\n    <input\n      className={baseClass}\n      disabled={disabled}\n      onChange={(e) => onChange(e.target.value)}\n      placeholder={placeholder}\n      type=\"number\"\n      value={value as number}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","ReactSelect","NumberFilter","props","$","disabled","field","t0","onChange","operator","value","admin","hasMany","label","i18n","t","ariaLabel","t1","includes","isMulti","t2","Symbol","for","valueToRender","setValueToRender","useState","t3","selectedOption","newValue","Array","isArray","map","_temp","onSelect","t4","t5","_temp2","useEffect","placeholder","_jsx","isClearable","isCreatable","isSortable","numberOnly","options","className","e","target","type","option","Number","val","index","id","toString"],"sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { NumberFilterProps as Props } from './types.js'\n\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { ReactSelect } from '../../../ReactSelect/index.js'\n\nexport const NumberFilter: React.FC<Props> = (props) => {\n  const {\n    disabled,\n    field: { admin, hasMany, label },\n    onChange,\n    operator,\n    value,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  const ariaLabel = label ? getTranslation(label, i18n) : t('general:enterAValue')\n\n  const isMulti = ['in', 'not_in'].includes(operator) || hasMany\n\n  const [valueToRender, setValueToRender] = React.useState<\n    { id: string; label: string; value: { value: number } }[]\n  >([])\n\n  const onSelect = React.useCallback(\n    (selectedOption) => {\n      let newValue\n      if (!selectedOption) {\n        newValue = []\n      } else if (isMulti) {\n        if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => Number(option.value?.value || option.value))\n        } else {\n          newValue = [Number(selectedOption.value?.value || selectedOption.value)]\n        }\n      }\n\n      onChange(newValue)\n    },\n    [isMulti, onChange],\n  )\n\n  React.useEffect(() => {\n    if (Array.isArray(value)) {\n      setValueToRender(\n        value.map((val, index) => {\n          return {\n            id: `${val}${index}`, // append index to avoid duplicate keys but allow duplicate numbers\n            label: `${val}`,\n            value: {\n              toString: () => `${val}${index}`,\n              value: (val as any)?.value || val,\n            },\n          }\n        }),\n      )\n    } else {\n      setValueToRender([])\n    }\n  }, [value])\n\n  const placeholder = getTranslation(admin?.placeholder, i18n) || t('general:enterAValue')\n\n  return isMulti ? (\n    <ReactSelect\n      aria-label={ariaLabel}\n      disabled={disabled}\n      isClearable\n      isCreatable\n      isMulti={isMulti}\n      isSortable\n      numberOnly\n      onChange={onSelect}\n      options={[]}\n      placeholder={placeholder}\n      value={valueToRender || []}\n    />\n  ) : (\n    <input\n      aria-label={ariaLabel}\n      className=\"form-input\"\n      disabled={disabled}\n      onChange={(e) => onChange(e.target.value)}\n      placeholder={placeholder}\n      type=\"number\"\n      value={value as number}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/WhereBuilder/Condition/Relationship/index.css

@@ -1,8 +1,8 @@
 @layer payload-default {
   .condition-value-relationship__error-loading {
     border: var(--stroke-width-small) solid var(--color-border-danger);
-    min-height: base(2);
-    padding: base(0.5) base(0.75);
+    min-height: var(--spacer-6);
+    padding: var(--spacer-2) var(--spacer-3);
     background-color: var(--color-bg-danger);
     color: var(--color-text);
   }

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

@@ -1,5 +1,4 @@
 import React from 'react';
 import type { TextFilterProps as Props } from './types.js';
-import './index.scss';
 export declare const Text: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Text/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,eAAe,IAAI,KAAK,EAAE,MAAM,YAAY,CAAA;AAI1D,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsEhC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Text/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,eAAe,IAAI,KAAK,EAAE,MAAM,YAAY,CAAA;AAK1D,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0EhC,CAAA"}

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

@@ -2,13 +2,12 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { useTranslation } from '../../../../providers/Translation/index.js';
 import { ReactSelect } from '../../../ReactSelect/index.js';
-import './index.scss';
-const baseClass = 'condition-value-text';
 export const Text = props => {
-  const $ = _c(18);
+  const $ = _c(10);
   const {
     disabled,
     field,
@@ -17,8 +16,10 @@ export const Text = props => {
     value
   } = props;
   const {
+    i18n,
     t
   } = useTranslation();
+  const ariaLabel = field?.label ? getTranslation(field.label, i18n) : t("general:enterAValue");
   const hasMany = field?.hasMany ?? false;
   let t0;
   if ($[0] !== hasMany || $[1] !== operator) {
@@ -81,38 +82,26 @@ export const Text = props => {
     t4 = $[9];
   }
   React.useEffect(t3, t4);
-  let t5;
-  if ($[10] !== disabled || $[11] !== isMulti || $[12] !== onChange || $[13] !== onSelect || $[14] !== t || $[15] !== value || $[16] !== valueToRender) {
-    t5 = isMulti ? _jsx(ReactSelect, {
-      disabled,
-      isClearable: true,
-      isCreatable: true,
-      isMulti,
-      isSortable: true,
-      onChange: onSelect,
-      options: [],
-      placeholder: t("general:enterAValue"),
-      value: valueToRender || []
-    }) : _jsx("input", {
-      className: baseClass,
-      disabled,
-      onChange: e => onChange(e.target.value),
-      placeholder: t("general:enterAValue"),
-      type: "text",
-      value: value || ""
-    });
-    $[10] = disabled;
-    $[11] = isMulti;
-    $[12] = onChange;
-    $[13] = onSelect;
-    $[14] = t;
-    $[15] = value;
-    $[16] = valueToRender;
-    $[17] = t5;
-  } else {
-    t5 = $[17];
-  }
-  return t5;
+  return isMulti ? _jsx(ReactSelect, {
+    "aria-label": ariaLabel,
+    disabled,
+    isClearable: true,
+    isCreatable: true,
+    isMulti,
+    isSortable: true,
+    onChange: onSelect,
+    options: [],
+    placeholder: t("general:enterAValue"),
+    value: valueToRender || []
+  }) : _jsx("input", {
+    "aria-label": ariaLabel,
+    className: "form-input",
+    disabled,
+    onChange: e => onChange(e.target.value),
+    placeholder: t("general:enterAValue"),
+    type: "text",
+    value: value || ""
+  });
 };
 function _temp(option) {
   return option.value?.value || option.value;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","ReactSelect","baseClass","Text","props","$","disabled","field","onChange","operator","value","t","hasMany","t0","includes","isMulti","t1","Symbol","for","valueToRender","setValueToRender","useState","t2","selectedOption","newValue","Array","isArray","map","_temp","onSelect","t3","t4","_temp2","useEffect","t5","_jsx","isClearable","isCreatable","isSortable","options","placeholder","className","e","target","type","option","val","index","id","label","toString"],"sources":["../../../../../src/elements/WhereBuilder/Condition/Text/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { TextFilterProps as Props } from './types.js'\n\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { ReactSelect } from '../../../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'condition-value-text'\n\nexport const Text: React.FC<Props> = (props) => {\n  const { disabled, field, onChange, operator, value } = props\n  const { t } = useTranslation()\n\n  const hasMany = field?.hasMany ?? false\n  const isMulti = ['in', 'not_in'].includes(operator) || hasMany\n\n  const [valueToRender, setValueToRender] = React.useState<\n    { id: string; label: string; value: { value: string } }[]\n  >([])\n\n  const onSelect = React.useCallback(\n    (selectedOption) => {\n      let newValue\n      if (!selectedOption) {\n        newValue = []\n      } else if (isMulti) {\n        if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => option.value?.value || option.value)\n        } else {\n          newValue = [selectedOption.value?.value || selectedOption.value]\n        }\n      }\n\n      onChange(newValue)\n    },\n    [isMulti, onChange],\n  )\n\n  React.useEffect(() => {\n    if (Array.isArray(value)) {\n      setValueToRender(\n        value.map((val, index) => {\n          return {\n            id: `${val}${index}`, // append index to avoid duplicate keys but allow duplicate numbers\n            label: `${val}`,\n            value: {\n              toString: () => `${val}${index}`,\n              value: (val as any)?.value || val,\n            },\n          }\n        }),\n      )\n    } else {\n      setValueToRender([])\n    }\n  }, [value])\n\n  return isMulti ? (\n    <ReactSelect\n      disabled={disabled}\n      isClearable\n      isCreatable\n      isMulti={isMulti}\n      isSortable\n      onChange={onSelect}\n      options={[]}\n      placeholder={t('general:enterAValue')}\n      value={valueToRender || []}\n    />\n  ) : (\n    <input\n      className={baseClass}\n      disabled={disabled}\n      onChange={(e) => onChange(e.target.value)}\n      placeholder={t('general:enterAValue')}\n      type=\"text\"\n      value={value || ''}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","ReactSelect","Text","props","$","disabled","field","onChange","operator","value","i18n","t","ariaLabel","label","hasMany","t0","includes","isMulti","t1","Symbol","for","valueToRender","setValueToRender","useState","t2","selectedOption","newValue","Array","isArray","map","_temp","onSelect","t3","t4","_temp2","useEffect","_jsx","isClearable","isCreatable","isSortable","options","placeholder","className","e","target","type","option","val","index","id","toString"],"sources":["../../../../../src/elements/WhereBuilder/Condition/Text/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { TextFilterProps as Props } from './types.js'\n\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { ReactSelect } from '../../../ReactSelect/index.js'\n\nexport const Text: React.FC<Props> = (props) => {\n  const { disabled, field, onChange, operator, value } = props\n  const { i18n, t } = useTranslation()\n\n  const ariaLabel = field?.label ? getTranslation(field.label, i18n) : t('general:enterAValue')\n\n  const hasMany = field?.hasMany ?? false\n  const isMulti = ['in', 'not_in'].includes(operator) || hasMany\n\n  const [valueToRender, setValueToRender] = React.useState<\n    { id: string; label: string; value: { value: string } }[]\n  >([])\n\n  const onSelect = React.useCallback(\n    (selectedOption) => {\n      let newValue\n      if (!selectedOption) {\n        newValue = []\n      } else if (isMulti) {\n        if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => option.value?.value || option.value)\n        } else {\n          newValue = [selectedOption.value?.value || selectedOption.value]\n        }\n      }\n\n      onChange(newValue)\n    },\n    [isMulti, onChange],\n  )\n\n  React.useEffect(() => {\n    if (Array.isArray(value)) {\n      setValueToRender(\n        value.map((val, index) => {\n          return {\n            id: `${val}${index}`, // append index to avoid duplicate keys but allow duplicate numbers\n            label: `${val}`,\n            value: {\n              toString: () => `${val}${index}`,\n              value: (val as any)?.value || val,\n            },\n          }\n        }),\n      )\n    } else {\n      setValueToRender([])\n    }\n  }, [value])\n\n  return isMulti ? (\n    <ReactSelect\n      aria-label={ariaLabel}\n      disabled={disabled}\n      isClearable\n      isCreatable\n      isMulti={isMulti}\n      isSortable\n      onChange={onSelect}\n      options={[]}\n      placeholder={t('general:enterAValue')}\n      value={valueToRender || []}\n    />\n  ) : (\n    <input\n      aria-label={ariaLabel}\n      className=\"form-input\"\n      disabled={disabled}\n      onChange={(e) => onChange(e.target.value)}\n      placeholder={t('general:enterAValue')}\n      type=\"text\"\n      value={value || ''}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,111 @@
+@layer payload-default {
+  .condition {
+    display: contents;
+
+    .btn {
+      vertical-align: middle;
+      margin: 0;
+    }
+  }
+
+  /* Flatten wrap and inputs — all 5 cells (__join, __field, __operator, __value, __actions)
+     become direct items of the parent or-filters grid, no subgrid needed. */
+  .condition__wrap,
+  .condition__inputs {
+    display: contents;
+  }
+
+  .condition__join-label {
+    display: block;
+    color: var(--color-text);
+  }
+
+  /* The and/or join dropdown is compact (24px tall) per the design. */
+  .condition__join .rs__control {
+    min-height: var(--spacer-4);
+    padding-block: 0;
+    padding-inline: calc(var(--spacer-1) * 1.5) var(--spacer-4);
+    text-transform: lowercase;
+  }
+
+  .condition__join .rs__menu {
+    text-transform: lowercase;
+  }
+
+  /* Center the indicators within the compact control. The base styles
+     absolutely position them with a fixed 32px height tuned for the default
+     control, so pin to the control interior and center instead. */
+  .condition__join .rs__indicators {
+    inset-block: 0;
+    min-height: 0;
+    align-items: center;
+  }
+
+  /* display:contents makes the three input divs participate directly in the parent grid */
+  .condition__inputs > div {
+    min-width: 0;
+  }
+
+  .condition__field .field-label {
+    padding-bottom: 0;
+  }
+
+  .condition__actions {
+    display: flex;
+    gap: var(--spacer-2);
+  }
+
+  @media (max-width: 768px) {
+    .condition {
+      display: block;
+    }
+
+    .condition__wrap {
+      margin-top: var(--spacer-3);
+      display: grid;
+      grid-template-columns: 1fr auto;
+      grid-template-areas:
+        'join actions'
+        'field field'
+        'operator operator'
+        'value value';
+      gap: var(--spacer-2);
+      align-items: start;
+    }
+
+    .condition__inputs {
+      display: contents;
+    }
+
+    .condition__join {
+      grid-area: join;
+    }
+
+    .condition__join .rs__control {
+      min-width: calc(var(--spacer-4) * 3);
+      /* width: fit-content; */
+    }
+
+    .condition__field {
+      grid-area: field;
+    }
+
+    .condition__operator {
+      grid-area: operator;
+    }
+
+    .condition__value {
+      grid-area: value;
+    }
+
+    .condition__inputs > div {
+      flex-basis: auto;
+      width: 100%;
+    }
+
+    .condition__actions {
+      grid-area: actions;
+      align-self: center;
+    }
+  }
+}

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

@@ -1,19 +1,22 @@
 import React from 'react';
-import type { AddCondition, ReducedField, RemoveCondition, UpdateCondition, Value } from '../types.js';
+import type { AddCondition, ReducedField, RemoveCondition, UpdateCondition, UpdateJoin, Value } from '../types.js';
 export type Props = {
     readonly addCondition: AddCondition;
     readonly andIndex: number;
     readonly fieldPath: string;
     readonly filterOptions?: ResolvedFilterOptions;
+    readonly isFirstCondition: boolean;
+    readonly join: 'and' | 'or';
     readonly operator: Operator;
     readonly orIndex: number;
     readonly reducedFields: ReducedField[];
     readonly removeCondition: RemoveCondition;
     readonly RenderedFilter?: React.ReactNode;
     readonly updateCondition: UpdateCondition;
+    readonly updateJoin: UpdateJoin;
     readonly value: Value;
 };
 import type { Operator, ResolvedFilterOptions } from 'payload';
-import './index.scss';
+import './index.css';
 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":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EACV,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,eAAe,EACf,KAAK,EACN,MAAM,aAAa,CAAA;AAEpB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAA;IACnC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,aAAa,CAAC,EAAE,qBAAqB,CAAA;IAC9C,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAA;IAC3B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,aAAa,EAAE,YAAY,EAAE,CAAA;IACtC,QAAQ,CAAC,eAAe,EAAE,eAAe,CAAA;IACzC,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzC,QAAQ,CAAC,eAAe,EAAE,eAAe,CAAA;IACzC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAA;CACtB,CAAA;AAED,OAAO,KAAK,EAAE,QAAQ,EAA2B,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAavF,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8KrC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/WhereBuilder/Condition/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EACV,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,eAAe,EACf,UAAU,EACV,KAAK,EACN,MAAM,aAAa,CAAA;AAEpB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAA;IACnC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,aAAa,CAAC,EAAE,qBAAqB,CAAA;IAC9C,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAA;IAClC,QAAQ,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAA;IAC3B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,aAAa,EAAE,YAAY,EAAE,CAAA;IACtC,QAAQ,CAAC,eAAe,EAAE,eAAe,CAAA;IACzC,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzC,QAAQ,CAAC,eAAe,EAAE,eAAe,CAAA;IACzC,QAAQ,CAAC,UAAU,EAAE,UAAU,CAAA;IAC/B,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAA;CACtB,CAAA;AAED,OAAO,KAAK,EAAE,QAAQ,EAA2B,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAcvF,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkLrC,CAAA"}

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

@@ -5,25 +5,28 @@ 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 {
@@ -94,13 +97,37 @@ 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')).map(f => ({
@@ -134,29 +161,19 @@ export const Condition = props => {
             value: internalValue ?? ''
           })
         })]
-      }), /*#__PURE__*/_jsxs("div", {
+      }), /*#__PURE__*/_jsx("div", {
         className: `${baseClass}__actions`,
-        children: [/*#__PURE__*/_jsx(Button, {
+        children: /*#__PURE__*/_jsx(Button, {
           buttonStyle: "ghost",
           className: `${baseClass}__actions-remove`,
-          icon: "x",
+          icon: /*#__PURE__*/_jsx(LineIcon, {
+            size: 24
+          }),
           onClick: () => removeCondition({
             andIndex,
             orIndex
-          }),
-          round: true
-        }), /*#__PURE__*/_jsx(Button, {
-          buttonStyle: "ghost",
-          className: `${baseClass}__actions-add`,
-          icon: "plus",
-          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","map","f","operators","o","internalField","buttonStyle","icon","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.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}__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=\"x\"\n            onClick={() =>\n              removeCondition({\n                andIndex,\n                orIndex,\n              })\n            }\n            round\n          />\n          <Button\n            buttonStyle=\"ghost\"\n            className={`${baseClass}__actions-add`}\n            icon=\"plus\"\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":"AAAA;;;AACA,OAAOA,KAAA,IAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ;AA0BxD,SAASC,eAAe,QAAQ;AAIhC,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,WAAW,QAAQ;AAC5B,SAASC,aAAa,QAAQ;AAC9B,SAASC,qBAAqB,QAAQ;AACtC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,SAAA,GAA8BC,KAAA;EACzC,MAAM;IACJC,YAAY;IACZC,QAAQ;IACRC,SAAS;IACTC,aAAa;IACbC,QAAQ;IACRC,OAAO;IACPC,aAAa;IACbC,eAAe;IACfC,cAAc;IACdC,eAAe;IACfC;EAAK,CACN,GAAGX,KAAA;EAEJ,MAAM;IAAEY;EAAC,CAAE,GAAGnB,cAAA;EAEd,MAAMoB,YAAA,GAAeN,aAAA,CAAcO,IAAI,CAAEC,KAAA,IAAUA,KAAA,CAAMZ,SAAS,KAAKA,SAAA;EAEvE,MAAM,CAACa,aAAA,EAAeC,gBAAA,CAAiB,GAAG5B,QAAA,CAAgBsB,KAAA;EAE1D,MAAMO,cAAA,GAAiB3B,WAAA,CAAYyB,aAAA,EAAe;EAElD,MAAMG,aAAA,GAAgB,CAAC,SAAS,CAACC,QAAQ,CAACf,QAAA,KAAaQ,YAAA,EAAcE,KAAA,EAAOM,IAAA,KAAS;EAErF,IAAIC,YAAA,GAAgC,EAAE;EAEtC,IAAIH,aAAA,EAAe;IACjBG,YAAA,GAAe,CACb;MAAEC,KAAA,EAAOX,CAAA,CAAE;MAAiBD,KAAA,EAAO;IAAO,GAC1C;MAAEY,KAAA,EAAOX,CAAA,CAAE;MAAkBD,KAAA,EAAO;IAAQ,EAC7C;EACH,OAAO,IAAIE,YAAA,EAAcE,KAAA,IAAS,aAAaF,YAAA,CAAaE,KAAK,EAAE;IACjEO,YAAA,GAAeT,YAAA,CAAaE,KAAK,CAACS,OAAO;EAC3C;EAEA,MAAMC,WAAA,GAAcjC,cAAA,CAAe,MAAO0B,gBAAA;IACxC,IAAIb,QAAA,EAAU;MACZ,MAAMK,eAAA,CAAgB;QACpBW,IAAA,EAAM;QACNnB,QAAA;QACAa,KAAA,EAAOF,YAAA;QACPR,QAAA;QACAC,OAAA;QACAK,KAAA,EAAOO,gBAAA,KAAmB,QAAQA,gBAAA,KAAmB,KAAKQ,SAAA,GAAYR;MACxE;IACF;EACF;EAEA9B,SAAA,CAAU;IACR,KAAKqC,WAAA,CAAYP,cAAA;EACnB,GAAG,CAACA,cAAA,CAAe;EAEnB,MAAMS,QAAA,GAAW,CAACd,YAAA,EAAcV,SAAA,IAAab,eAAA,CAAgBuB,YAAA,EAAcE,KAAA,EAAO;EAElF,MAAMa,iBAAA,GAAoBzC,WAAA,CACxB,MAAO4B,OAAA;IACLE,gBAAA,CAAiBS,SAAA;IACjB,MAAMhB,eAAA,CAAgB;MACpBW,IAAA,EAAM;MACNnB,QAAA;MACAa,KAAA,EAAOR,aAAA,CAAcO,IAAI,CAAEe,MAAA,IAAWA,MAAA,CAAO1B,SAAS,KAAKY,OAAA,CAAMJ,KAAK;MACtEN,QAAA;MACAC,OAAA;MACAK,KAAA,EAAOe;IACT;EACF,GACA,CAACxB,QAAA,EAAUG,QAAA,EAAUC,OAAA,EAASC,aAAA,EAAeG,eAAA,CAAgB;EAG/D,MAAMoB,oBAAA,GAAuB3C,WAAA,CAC3B,MAAOkB,UAAA;IACL,MAAM0B,kBAAA,GAAqBlC,qBAAA,CAAsBgB,YAAA,CAAaE,KAAK,CAACM,IAAI;IACxE,MAAMW,kBAAA,GAAqBD,kBAAkB,CAAC1B,UAAA,CAASM,KAAK,CAAC,IAAI;IACjE,MAAMsB,YAAA,GACJD,kBAAA,KAAuB,SACvB,OAAOrB,KAAA,KAAUqB,kBAAA,IAChBA,kBAAA,KAAuB,cAAcrB,KAAA,KAAU,UAAUA,KAAA,KAAU,OAAM;IAE5E,IAAI,CAACsB,YAAA,EAAc;MACjB;MACA;MACAhB,gBAAA,CAAiBS,SAAA;IACnB;IAEA,MAAMhB,eAAA,CAAgB;MACpBW,IAAA,EAAM;MACNnB,QAAA;MACAa,KAAA,EAAOF,YAAA;MACPR,QAAA,EAAUA,UAAA,CAASM,KAAK;MACxBL,OAAA;MACAK,KAAA,EAAOsB,YAAA,GAAetB,KAAA,GAAQe;IAChC;EACF,GACA,CAACxB,QAAA,EAAUW,YAAA,EAAcP,OAAA,EAASI,eAAA,EAAiBC,KAAA,CAAM;EAG3D,oBACEuB,IAAA,CAAC;IAAIC,SAAA,EAAWrC,SAAA;cACd,aAAAsC,KAAA,CAAC;MAAID,SAAA,EAAW,GAAGrC,SAAA,QAAiB;8BAClCsC,KAAA,CAAC;QAAID,SAAA,EAAW,GAAGrC,SAAA,UAAmB;gCACpCoC,IAAA,CAAC;UAAIC,SAAA,EAAW,GAAGrC,SAAA,SAAkB;oBACnC,aAAAoC,IAAA,CAACvC,WAAA;YACCgC,QAAA,EAAUA,QAAA;YACVU,YAAA,EAAcA,CAACR,QAAA,EAAQS,UAAA,KACrB,CAACT,QAAC,EAAQU,IAAA,EAAMC,cAAA,IAA6BX,QAAA,CAAON,KAAK,EACtDkB,WAAW,GACXrB,QAAQ,CAACkB,UAAA,CAAWG,WAAW;YAEpCC,WAAA,EAAa;YACbC,QAAA,EAAUf,iBAAA;YACVJ,OAAA,EAASjB,aAAA,CACNqC,MAAM,CAAE7B,OAAA,IAAU,CAACzB,eAAA,CAAgByB,OAAA,CAAMA,KAAK,EAAE,WAChD8B,GAAG,CAAEC,CAAA,KAAO;cAAE,GAAGA,CAAC;cAAEnC,KAAA,EAAOmC,CAAA,CAAE3C;YAAU;YAC1CQ,KAAA,EAAOE,YAAA,GAAe;cAAE,GAAGA,YAAY;cAAEF,KAAA,EAAOE,YAAA,CAAaV;YAAU,IAAIuB;;yBAG/EQ,IAAA,CAAC;UAAIC,SAAA,EAAW,GAAGrC,SAAA,YAAqB;oBACtC,aAAAoC,IAAA,CAACvC,WAAA;YACCgC,QAAA,EAAUA,QAAA;YACVe,WAAA,EAAa;YACbC,QAAA,EAAUb,oBAAA;YACVN,OAAA,EAASX,YAAA,EAAckC,SAAA;YACvBpC,KAAA,EAAOE,YAAA,EAAckC,SAAA,CAAUjC,IAAA,CAAMkC,CAAA,IAAM3C,QAAA,KAAa2C,CAAA,CAAErC,KAAK,KAAK;;yBAGxEuB,IAAA,CAAC;UAAIC,SAAA,EAAW,GAAGrC,SAAA,SAAkB;oBAClCW,cAAA,iBACCyB,IAAA,CAACtC,aAAA;YACCuB,aAAA,EAAeA,aAAA;YACfQ,QAAA,EACE,CAACtB,QAAA,IAAY,CAACQ,YAAA,IAAgBvB,eAAA,CAAgBuB,YAAA,EAAcE,KAAA,EAAO;YAErEX,aAAA,EAAeA,aAAA;YACf6C,aAAA,EAAepC,YAAA;YACf8B,QAAA,EAAU1B,gBAAA;YACVZ,QAAA,EAAUA,QAAA;YACVmB,OAAA,EAASF,YAAA;YACTX,KAAA,EAAOK,aAAA,IAAiB;;;uBAKhCoB,KAAA,CAAC;QAAID,SAAA,EAAW,GAAGrC,SAAA,WAAoB;gCACrCoC,IAAA,CAACxC,MAAA;UACCwD,WAAA,EAAY;UACZf,SAAA,EAAW,GAAGrC,SAAA,kBAA2B;UACzCqD,IAAA,EAAK;UACLC,OAAA,EAASA,CAAA,KACP5C,eAAA,CAAgB;YACdN,QAAA;YACAI;UACF;UAEF+C,KAAK;yBAEPnB,IAAA,CAACxC,MAAA;UACCwD,WAAA,EAAY;UACZf,SAAA,EAAW,GAAGrC,SAAA,eAAwB;UACtCqD,IAAA,EAAK;UACLC,OAAA,EAASA,CAAA,KACPnD,YAAA,CAAa;YACXC,QAAA,EAAUA,QAAA,GAAW;YACrBa,KAAA,EAAOR,aAAA,CAAcO,IAAI,CAAEC,OAAA,IAAU,CAACzB,eAAA,CAAgByB,OAAA,CAAMA,KAAK,EAAE;YACnET,OAAA;YACAgD,QAAA,EAAU;UACZ;UAEFD,KAAK;;;;;AAMjB","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":[]}