@payloadcms/ui 3.68.0-internal-debug.e9b66ee → 3.68.0-internal.35482da

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

@@ -1,55 +1,132 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 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 { disabled, field: { hasMany }, onChange, operator, value } = props;
-    const { t } = useTranslation();
-    const isMulti = [
-        'in',
-        'not_in'
-    ].includes(operator) || hasMany;
-    const [valueToRender, setValueToRender] = React.useState([]);
-    const onSelect = React.useCallback((selectedOption)=>{
-        let newValue;
-        if (!selectedOption) {
-            newValue = [];
-        } else if (isMulti) {
-            if (Array.isArray(selectedOption)) {
-                newValue = selectedOption.map((option)=>option.value?.value || option.value);
-            } else {
-                newValue = [
-                    selectedOption.value?.value || selectedOption.value
-                ];
-            }
-        }
-        onChange(newValue);
-    }, [
-        isMulti,
-        onChange
-    ]);
-    React.useEffect(()=>{
-        if (Array.isArray(value)) {
-            setValueToRender(value.map((val, index)=>{
-                return {
-                    id: `${val}${index}`,
-                    // append index to avoid duplicate keys but allow duplicate numbers
-                    label: `${val}`,
-                    value: {
-                        toString: ()=>`${val}${index}`,
-                        value: val?.value || val
-                    }
-                };
-            }));
-        } else {
-            setValueToRender([]);
+export const Text = props => {
+  const $ = _c(18);
+  const {
+    disabled,
+    field: t0,
+    onChange,
+    operator,
+    value
+  } = props;
+  const {
+    hasMany
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== hasMany || $[1] !== operator) {
+    t1 = ["in", "not_in"].includes(operator) || hasMany;
+    $[0] = hasMany;
+    $[1] = operator;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const isMulti = t1;
+  let t2;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = [];
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const [valueToRender, setValueToRender] = React.useState(t2);
+  let t3;
+  if ($[4] !== isMulti || $[5] !== onChange) {
+    t3 = selectedOption => {
+      let newValue;
+      if (!selectedOption) {
+        newValue = [];
+      } else {
+        if (isMulti) {
+          if (Array.isArray(selectedOption)) {
+            newValue = selectedOption.map(_temp);
+          } else {
+            newValue = [selectedOption.value?.value || selectedOption.value];
+          }
         }
-    }, [
-        value
-    ]);
-    return isMulti ? <ReactSelect disabled={disabled} isClearable isCreatable isMulti={isMulti} isSortable onChange={onSelect} options={[]} placeholder={t('general:enterAValue')} value={valueToRender || []}/> : <input className={baseClass} disabled={disabled} onChange={(e)=>onChange(e.target.value)} placeholder={t('general:enterAValue')} type="text" value={value || ''}/>;
+      }
+      onChange(newValue);
+    };
+    $[4] = isMulti;
+    $[5] = onChange;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const onSelect = t3;
+  let t4;
+  let t5;
+  if ($[7] !== value) {
+    t4 = () => {
+      if (Array.isArray(value)) {
+        setValueToRender(value.map(_temp2));
+      } else {
+        setValueToRender([]);
+      }
+    };
+    t5 = [value];
+    $[7] = value;
+    $[8] = t4;
+    $[9] = t5;
+  } else {
+    t4 = $[8];
+    t5 = $[9];
+  }
+  React.useEffect(t4, t5);
+  let t6;
+  if ($[10] !== disabled || $[11] !== isMulti || $[12] !== onChange || $[13] !== onSelect || $[14] !== t || $[15] !== value || $[16] !== valueToRender) {
+    t6 = 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] = t6;
+  } else {
+    t6 = $[17];
+  }
+  return t6;
 };
-
+function _temp(option) {
+  return option.value?.value || option.value;
+}
+function _temp2(val, index) {
+  return {
+    id: `${val}${index}`,
+    label: `${val}`,
+    value: {
+      toString: () => `${val}${index}`,
+      value: val?.value || val
+    }
+  };
+}
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"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 {\n    disabled,\n    field: { hasMany },\n    onChange,\n    operator,\n    value,\n  } = props\n  const { 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: 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"],"names":["React","useTranslation","ReactSelect","baseClass","Text","props","disabled","field","hasMany","onChange","operator","value","t","isMulti","includes","valueToRender","setValueToRender","useState","onSelect","useCallback","selectedOption","newValue","Array","isArray","map","option","useEffect","val","index","id","label","toString","isClearable","isCreatable","isSortable","options","placeholder","input","className","e","target","type"],"mappings":"AAAA;AACA,OAAOA,WAAW,QAAO;AAIzB,SAASC,cAAc,QAAQ,6CAA4C;AAC3E,SAASC,WAAW,QAAQ,gCAA+B;AAC3D,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,OAAwB,CAACC;IACpC,MAAM,EACJC,QAAQ,EACRC,OAAO,EAAEC,OAAO,EAAE,EAClBC,QAAQ,EACRC,QAAQ,EACRC,KAAK,EACN,GAAGN;IACJ,MAAM,EAAEO,CAAC,EAAE,GAAGX;IAEd,MAAMY,UAAU;QAAC;QAAM;KAAS,CAACC,QAAQ,CAACJ,aAAaF;IAEvD,MAAM,CAACO,eAAeC,iBAAiB,GAAGhB,MAAMiB,QAAQ,CAEtD,EAAE;IAEJ,MAAMC,WAAWlB,MAAMmB,WAAW,CAChC,CAACC;QACC,IAAIC;QACJ,IAAI,CAACD,gBAAgB;YACnBC,WAAW,EAAE;QACf,OAAO,IAAIR,SAAS;YAClB,IAAIS,MAAMC,OAAO,CAACH,iBAAiB;gBACjCC,WAAWD,eAAeI,GAAG,CAAC,CAACC,SAAWA,OAAOd,KAAK,EAAEA,SAASc,OAAOd,KAAK;YAC/E,OAAO;gBACLU,WAAW;oBAACD,eAAeT,KAAK,EAAEA,SAASS,eAAeT,KAAK;iBAAC;YAClE;QACF;QAEAF,SAASY;IACX,GACA;QAACR;QAASJ;KAAS;IAGrBT,MAAM0B,SAAS,CAAC;QACd,IAAIJ,MAAMC,OAAO,CAACZ,QAAQ;YACxBK,iBACEL,MAAMa,GAAG,CAAC,CAACG,KAAKC;gBACd,OAAO;oBACLC,IAAI,GAAGF,MAAMC,OAAO;oBAAE,mEAAmE;oBACzFE,OAAO,GAAGH,KAAK;oBACfhB,OAAO;wBACLoB,UAAU,IAAM,GAAGJ,MAAMC,OAAO;wBAChCjB,OAAO,AAACgB,KAAahB,SAASgB;oBAChC;gBACF;YACF;QAEJ,OAAO;YACLX,iBAAiB,EAAE;QACrB;IACF,GAAG;QAACL;KAAM;IAEV,OAAOE,WACJX,YACCI,UAAUA,UACV0B,YACAC,YACApB,SAASA,SACTqB,WACAzB,UAAUS,UACViB,SAAS,EAAE,EACXC,aAAaxB,EAAE,wBACfD,OAAOI,iBAAiB,EAAE,OAG3BsB,MACCC,WAAWnC,WACXG,UAAUA,UACVG,UAAU,CAAC8B,IAAM9B,SAAS8B,EAAEC,MAAM,CAAC7B,KAAK,GACxCyB,aAAaxB,EAAE,wBACf6B,KAAK,OACL9B,OAAOA,SAAS;AAGtB,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","ReactSelect","baseClass","Text","props","$","disabled","field","t0","onChange","operator","value","hasMany","t","t1","includes","isMulti","t2","Symbol","for","valueToRender","setValueToRender","useState","t3","selectedOption","newValue","Array","isArray","map","_temp","onSelect","t4","t5","_temp2","useEffect","t6","_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 {\n    disabled,\n    field: { hasMany },\n    onChange,\n    operator,\n    value,\n  } = props\n  const { 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: 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":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/WhereBuilder/Condition/Text/types.ts"],"sourcesContent":["import type { TextFieldClient } from 'payload'\n\nimport type { DefaultFilterProps } from '../types.js'\n\nexport type TextFilterProps = {\n  readonly field: TextFieldClient\n  readonly onChange: (val: string) => void\n  readonly value: string | string[]\n} & DefaultFilterProps\n"],"names":[],"mappings":"AAIA,WAIsB"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/elements/WhereBuilder/Condition/Text/types.ts"],"sourcesContent":["import type { TextFieldClient } from 'payload'\n\nimport type { DefaultFilterProps } from '../types.js'\n\nexport type TextFilterProps = {\n  readonly field: TextFieldClient\n  readonly onChange: (val: string) => void\n  readonly value: string | string[]\n} & DefaultFilterProps\n"],"mappings":"AAIA","ignoreList":[]}

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

@@ -1,5 +1,7 @@
 'use client';
-import { useCallback, useEffect, useState } from 'react';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useState } from 'react';
 import { useDebounce } from '../../../hooks/useDebounce.js';
 import { useEffectEvent } from '../../../hooks/useEffectEvent.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
@@ -9,118 +11,151 @@ import { DefaultFilter } from './DefaultFilter/index.js';
 import { getOperatorValueTypes } from './validOperators.js';
 import './index.scss';
 const baseClass = 'condition';
-export const Condition = (props)=>{
-    const { addCondition, andIndex, fieldPath, filterOptions, operator, orIndex, reducedFields, removeCondition, RenderedFilter, updateCondition, value } = props;
-    const { t } = useTranslation();
-    const reducedField = reducedFields.find((field)=>field.value === fieldPath);
-    const [internalValue, setInternalValue] = useState(value);
-    const debouncedValue = useDebounce(internalValue, 300);
-    const booleanSelect = [
-        'exists'
-    ].includes(operator) || reducedField?.field?.type === 'checkbox';
-    let valueOptions = [];
-    if (booleanSelect) {
-        valueOptions = [
-            {
-                label: t('general:true'),
-                value: 'true'
-            },
-            {
-                label: t('general:false'),
-                value: 'false'
-            }
-        ];
-    } else if (reducedField?.field && 'options' in reducedField.field) {
-        valueOptions = reducedField.field.options;
-    }
-    const updateValue = useEffectEvent(async (debouncedValue)=>{
-        if (operator) {
-            await updateCondition({
-                type: 'value',
-                andIndex,
-                field: reducedField,
-                operator,
-                orIndex,
-                value: debouncedValue === null || debouncedValue === '' ? undefined : debouncedValue
-            });
-        }
-    });
-    useEffect(()=>{
-        void updateValue(debouncedValue);
-    }, [
-        debouncedValue
-    ]);
-    const disabled = !reducedField?.value && typeof reducedField?.value !== 'number' || reducedField?.field?.admin?.disableListFilter;
-    const handleFieldChange = useCallback(async (field)=>{
-        setInternalValue(undefined);
-        await updateCondition({
-            type: 'field',
-            andIndex,
-            field: reducedFields.find((option)=>option.value === field.value),
-            operator,
-            orIndex,
-            value: undefined
-        });
-    }, [
+export const Condition = props => {
+  const {
+    addCondition,
+    andIndex,
+    fieldPath,
+    filterOptions,
+    operator,
+    orIndex,
+    reducedFields,
+    removeCondition,
+    RenderedFilter,
+    updateCondition,
+    value
+  } = props;
+  const {
+    t
+  } = useTranslation();
+  const reducedField = reducedFields.find(field => field.value === fieldPath);
+  const [internalValue, setInternalValue] = useState(value);
+  const debouncedValue = useDebounce(internalValue, 300);
+  const booleanSelect = ['exists'].includes(operator) || reducedField?.field?.type === 'checkbox';
+  let valueOptions = [];
+  if (booleanSelect) {
+    valueOptions = [{
+      label: t('general:true'),
+      value: 'true'
+    }, {
+      label: t('general:false'),
+      value: 'false'
+    }];
+  } else if (reducedField?.field && 'options' in reducedField.field) {
+    valueOptions = reducedField.field.options;
+  }
+  const updateValue = useEffectEvent(async debouncedValue_0 => {
+    if (operator) {
+      await updateCondition({
+        type: 'value',
         andIndex,
+        field: reducedField,
         operator,
         orIndex,
-        reducedFields,
-        updateCondition
-    ]);
-    const handleOperatorChange = useCallback(async (operator)=>{
-        const operatorValueTypes = getOperatorValueTypes(reducedField.field.type);
-        const validOperatorValue = operatorValueTypes[operator.value] || 'any';
-        const isValidValue = validOperatorValue === 'any' || typeof value === validOperatorValue || validOperatorValue === 'boolean' && (value === 'true' || value === 'false');
-        if (!isValidValue) {
-            // if the current value is not valid for the new operator
-            // reset the value before passing it to updateCondition
-            setInternalValue(undefined);
-        }
-        await updateCondition({
-            type: 'operator',
-            andIndex,
-            field: reducedField,
-            operator: operator.value,
-            orIndex,
-            value: isValidValue ? value : undefined
-        });
-    }, [
-        andIndex,
-        reducedField,
-        orIndex,
-        updateCondition,
-        value
-    ]);
-    return <div className={baseClass}>
-      <div className={`${baseClass}__wrap`}>
-        <div className={`${baseClass}__inputs`}>
-          <div className={`${baseClass}__field`}>
-            <ReactSelect disabled={disabled} filterOption={(option, inputValue)=>(option?.data?.plainTextLabel || option.label).toLowerCase().includes(inputValue.toLowerCase())} isClearable={false} onChange={handleFieldChange} options={reducedFields.filter((field)=>!field.field.admin.disableListFilter)} value={reducedField || {
-        value: reducedField?.value
-    }}/>
-          </div>
-          <div className={`${baseClass}__operator`}>
-            <ReactSelect disabled={disabled} isClearable={false} onChange={handleOperatorChange} options={reducedField?.operators} value={reducedField?.operators.find((o)=>operator === o.value) || null}/>
-          </div>
-          <div className={`${baseClass}__value`}>
-            {RenderedFilter || <DefaultFilter booleanSelect={booleanSelect} disabled={!operator || !reducedField || reducedField?.field?.admin?.disableListFilter} filterOptions={filterOptions} internalField={reducedField} onChange={setInternalValue} operator={operator} options={valueOptions} value={internalValue ?? ''}/>}
-          </div>
-        </div>
-        <div className={`${baseClass}__actions`}>
-          <Button buttonStyle="icon-label" className={`${baseClass}__actions-remove`} icon="x" iconStyle="with-border" onClick={()=>removeCondition({
+        value: debouncedValue_0 === null || debouncedValue_0 === '' ? undefined : debouncedValue_0
+      });
+    }
+  });
+  useEffect(() => {
+    void updateValue(debouncedValue);
+  }, [debouncedValue]);
+  const disabled = !reducedField?.value && typeof reducedField?.value !== 'number' || reducedField?.field?.admin?.disableListFilter;
+  const handleFieldChange = useCallback(async field_0 => {
+    setInternalValue(undefined);
+    await updateCondition({
+      type: 'field',
+      andIndex,
+      field: reducedFields.find(option => option.value === field_0.value),
+      operator,
+      orIndex,
+      value: undefined
+    });
+  }, [andIndex, operator, orIndex, reducedFields, updateCondition]);
+  const handleOperatorChange = useCallback(async operator_0 => {
+    const operatorValueTypes = getOperatorValueTypes(reducedField.field.type);
+    const validOperatorValue = operatorValueTypes[operator_0.value] || 'any';
+    const isValidValue = validOperatorValue === 'any' || typeof value === validOperatorValue || validOperatorValue === 'boolean' && (value === 'true' || value === 'false');
+    if (!isValidValue) {
+      // if the current value is not valid for the new operator
+      // reset the value before passing it to updateCondition
+      setInternalValue(undefined);
+    }
+    await updateCondition({
+      type: 'operator',
+      andIndex,
+      field: reducedField,
+      operator: operator_0.value,
+      orIndex,
+      value: isValidValue ? value : undefined
+    });
+  }, [andIndex, reducedField, orIndex, updateCondition, value]);
+  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, {
+            disabled: disabled,
+            filterOption: (option_0, inputValue) => (option_0?.data?.plainTextLabel || option_0.label).toLowerCase().includes(inputValue.toLowerCase()),
+            isClearable: false,
+            onChange: handleFieldChange,
+            options: reducedFields.filter(field_1 => !field_1.field.admin.disableListFilter),
+            value: reducedField || {
+              value: reducedField?.value
+            }
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__operator`,
+          children: /*#__PURE__*/_jsx(ReactSelect, {
+            disabled: disabled,
+            isClearable: false,
+            onChange: handleOperatorChange,
+            options: reducedField?.operators,
+            value: reducedField?.operators.find(o => operator === o.value) || null
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__value`,
+          children: RenderedFilter || /*#__PURE__*/_jsx(DefaultFilter, {
+            booleanSelect: booleanSelect,
+            disabled: !operator || !reducedField || reducedField?.field?.admin?.disableListFilter,
+            filterOptions: filterOptions,
+            internalField: reducedField,
+            onChange: setInternalValue,
+            operator: operator,
+            options: valueOptions,
+            value: internalValue ?? ''
+          })
+        })]
+      }), /*#__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/>
-          <Button buttonStyle="icon-label" className={`${baseClass}__actions-add`} icon="plus" iconStyle="with-border" onClick={()=>addCondition({
+          }),
+          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)=>!field.field.admin?.disableListFilter),
+            field: reducedFields.find(field_2 => !field_2.field.admin?.disableListFilter),
             orIndex,
             relation: 'and'
-        })} round/>
-        </div>
-      </div>
-    </div>;
+          }),
+          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":["'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 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    reducedField?.field?.admin?.disableListFilter\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) => !field.field.admin.disableListFilter)}\n              value={\n                reducedField || {\n                  value: reducedField?.value,\n                }\n              }\n            />\n          </div>\n          <div className={`${baseClass}__operator`}>\n            <ReactSelect\n              disabled={disabled}\n              isClearable={false}\n              onChange={handleOperatorChange}\n              options={reducedField?.operators}\n              value={reducedField?.operators.find((o) => operator === o.value) || null}\n            />\n          </div>\n          <div className={`${baseClass}__value`}>\n            {RenderedFilter || (\n              <DefaultFilter\n                booleanSelect={booleanSelect}\n                disabled={\n                  !operator || !reducedField || reducedField?.field?.admin?.disableListFilter\n                }\n                filterOptions={filterOptions}\n                internalField={reducedField}\n                onChange={setInternalValue}\n                operator={operator}\n                options={valueOptions}\n                value={internalValue ?? ''}\n              />\n            )}\n          </div>\n        </div>\n        <div className={`${baseClass}__actions`}>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__actions-remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={() =>\n              removeCondition({\n                andIndex,\n                orIndex,\n              })\n            }\n            round\n          />\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__actions-add`}\n            icon=\"plus\"\n            iconStyle=\"with-border\"\n            onClick={() =>\n              addCondition({\n                andIndex: andIndex + 1,\n                field: reducedFields.find((field) => !field.field.admin?.disableListFilter),\n                orIndex,\n                relation: 'and',\n              })\n            }\n            round\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["useCallback","useEffect","useState","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","admin","disableListFilter","handleFieldChange","option","handleOperatorChange","operatorValueTypes","validOperatorValue","isValidValue","div","className","filterOption","inputValue","data","plainTextLabel","toLowerCase","isClearable","onChange","filter","operators","o","internalField","buttonStyle","icon","iconStyle","onClick","round","relation"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useState","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","admin","disableListFilter","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 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    reducedField?.field?.admin?.disableListFilter\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) => !field.field.admin.disableListFilter)}\n              value={\n                reducedField || {\n                  value: reducedField?.value,\n                }\n              }\n            />\n          </div>\n          <div className={`${baseClass}__operator`}>\n            <ReactSelect\n              disabled={disabled}\n              isClearable={false}\n              onChange={handleOperatorChange}\n              options={reducedField?.operators}\n              value={reducedField?.operators.find((o) => operator === o.value) || null}\n            />\n          </div>\n          <div className={`${baseClass}__value`}>\n            {RenderedFilter || (\n              <DefaultFilter\n                booleanSelect={booleanSelect}\n                disabled={\n                  !operator || !reducedField || reducedField?.field?.admin?.disableListFilter\n                }\n                filterOptions={filterOptions}\n                internalField={reducedField}\n                onChange={setInternalValue}\n                operator={operator}\n                options={valueOptions}\n                value={internalValue ?? ''}\n              />\n            )}\n          </div>\n        </div>\n        <div className={`${baseClass}__actions`}>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__actions-remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={() =>\n              removeCondition({\n                andIndex,\n                orIndex,\n              })\n            }\n            round\n          />\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__actions-add`}\n            icon=\"plus\"\n            iconStyle=\"with-border\"\n            onClick={() =>\n              addCondition({\n                andIndex: andIndex + 1,\n                field: reducedFields.find((field) => !field.field.admin?.disableListFilter),\n                orIndex,\n                relation: 'and',\n              })\n            }\n            round\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/WhereBuilder/Condition/types.ts"],"sourcesContent":["import type { Operator, Where } from 'payload'\n\nimport type { Action, ReducedField } from '../types.js'\n\nexport type Props = {\n  andIndex: number\n  dispatch: (action: Action) => void\n  fields: ReducedField[]\n  orIndex: number\n  value: Where\n}\n\nexport type DefaultFilterProps = {\n  readonly disabled: boolean\n  readonly onChange: (val: any) => void\n  readonly operator: Operator\n  readonly value: unknown\n}\n"],"names":[],"mappings":"AAYA,WAKC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/elements/WhereBuilder/Condition/types.ts"],"sourcesContent":["import type { Operator, Where } from 'payload'\n\nimport type { Action, ReducedField } from '../types.js'\n\nexport type Props = {\n  andIndex: number\n  dispatch: (action: Action) => void\n  fields: ReducedField[]\n  orIndex: number\n  value: Where\n}\n\nexport type DefaultFilterProps = {\n  readonly disabled: boolean\n  readonly onChange: (val: any) => void\n  readonly operator: Operator\n  readonly value: unknown\n}\n"],"mappings":"AAYA","ignoreList":[]}