@payloadcms/ui 4.0.0-internal.d28e9fb → 4.0.0-internal.d7d662c

package/dist/elements/WhereBuilder/conditionValue.js

@@ -0,0 +1,32 @@
+/**
+ * A row that holds no value yet. Empty arrives as `''` from the URL, `null` from a cleared
+ * select, or `undefined` from a row that was added but never filled in.
+ */export const isEmptyConditionValue = ({
+  value
+}) => value === undefined || value === null || value === '';
+/**
+ * The value a row renders with. Only a missing value becomes `undefined`. `0` and `false` are
+ * real filter values, so they must survive.
+ */
+export const getDisplayedConditionValue = ({
+  value
+}) => value ?? undefined;
+/**
+ * Whether an edit leaves the row unchanged, and so must not be committed.
+ *
+ * An empty row renders blank and reports `undefined` back up as soon as it mounts. Committing
+ * that stores `{ [operator]: undefined }`, which `qs.stringify` drops when the query is written
+ * to the URL — so the row is gone on the next parse.
+ *
+ * Field and operator edits change the row even while it holds no value, so they always commit.
+ */
+export const isNoOpConditionValueUpdate = ({
+  type,
+  incomingValue,
+  storedValue
+}) => type === 'value' && isEmptyConditionValue({
+  value: storedValue
+}) && isEmptyConditionValue({
+  value: incomingValue
+});
+//# sourceMappingURL=conditionValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"conditionValue.js","names":["isEmptyConditionValue","value","undefined","getDisplayedConditionValue","isNoOpConditionValueUpdate","type","incomingValue","storedValue"],"sources":["../../../src/elements/WhereBuilder/conditionValue.ts"],"sourcesContent":["import type { UpdateCondition } from './types.js'\n\ntype UpdateType = Parameters<UpdateCondition>[0]['type']\n\n/**\n * A row that holds no value yet. Empty arrives as `''` from the URL, `null` from a cleared\n * select, or `undefined` from a row that was added but never filled in.\n */\nexport const isEmptyConditionValue = ({ value }: { value: unknown }): boolean =>\n  value === undefined || value === null || value === ''\n\n/**\n * The value a row renders with. Only a missing value becomes `undefined`. `0` and `false` are\n * real filter values, so they must survive.\n */\nexport const getDisplayedConditionValue = <T>({ value }: { value: T }): T | undefined =>\n  value ?? undefined\n\n/**\n * Whether an edit leaves the row unchanged, and so must not be committed.\n *\n * An empty row renders blank and reports `undefined` back up as soon as it mounts. Committing\n * that stores `{ [operator]: undefined }`, which `qs.stringify` drops when the query is written\n * to the URL — so the row is gone on the next parse.\n *\n * Field and operator edits change the row even while it holds no value, so they always commit.\n */\nexport const isNoOpConditionValueUpdate = ({\n  type,\n  incomingValue,\n  storedValue,\n}: {\n  incomingValue: unknown\n  storedValue: unknown\n  type: UpdateType\n}): boolean =>\n  type === 'value' &&\n  isEmptyConditionValue({ value: storedValue }) &&\n  isEmptyConditionValue({ value: incomingValue })\n"],"mappings":"AAIA;;;GAIA,OAAO,MAAMA,qBAAA,GAAwBA,CAAC;EAAEC;AAAK,CAAsB,KACjEA,KAAA,KAAUC,SAAA,IAAaD,KAAA,KAAU,QAAQA,KAAA,KAAU;AAErD;;;;AAIA,OAAO,MAAME,0BAAA,GAA6BA,CAAI;EAAEF;AAAK,CAAgB,KACnEA,KAAA,IAASC,SAAA;AAEX;;;;;;;;;AASA,OAAO,MAAME,0BAAA,GAA6BA,CAAC;EACzCC,IAAI;EACJC,aAAa;EACbC;AAAW,CAKZ,KACCF,IAAA,KAAS,WACTL,qBAAA,CAAsB;EAAEC,KAAA,EAAOM;AAAY,MAC3CP,qBAAA,CAAsB;EAAEC,KAAA,EAAOK;AAAc","ignoreList":[]}

package/dist/elements/WhereBuilder/index.css

@@ -0,0 +1,76 @@
+@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;
+  }
+
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
+  @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;
+    }
+  }
+
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
+  @media (max-width: 768px) {
+    .where-builder {
+      padding-top: var(--spacer-2);
+    }
+  }
+}

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

@@ -1,11 +1,12 @@
 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
- * or in a form (e.g. Query Presets). When `value` and `onChange` are provided, it is controlled
- * by the form; otherwise it uses list query state from {@link useListQuery}.
+ * Presentational filter builder. It renders the conditions described by `value` and
+ * reports edits through `onChange`. It is unaware of where its value is stored — the
+ * list view wires it to list query state via {@link ListWhereBuilder}, and the Query
+ * Presets drawer wires it to form state.
  */
 export declare const WhereBuilder: React.FC<WhereBuilderProps>;
 //# sourceMappingURL=index.d.ts.map

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;AAanB,OAAO,aAAa,CAAA;AAKpB,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAE5B;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6RpD,CAAA"}

package/dist/elements/WhereBuilder/index.js

@@ -1,34 +1,34 @@
 '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';
 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 { getDisplayedConditionValue, isEmptyConditionValue, isNoOpConditionValueUpdate } from './conditionValue.js';
+import './index.css';
 import { fieldTypeConditions, getValidFieldOperators } from './field-types.js';
 const baseClass = 'where-builder';
 /**
- * The WhereBuilder component is used to render the filter controls for a collection's list view
- * or in a form (e.g. Query Presets). When `value` and `onChange` are provided, it is controlled
- * by the form; otherwise it uses list query state from {@link useListQuery}.
+ * Presentational filter builder. It renders the conditions described by `value` and
+ * reports edits through `onChange`. It is unaware of where its value is stored — the
+ * list view wires it to list query state via {@link ListWhereBuilder}, and the Query
+ * Presets drawer wires it to form state.
  */
 export const WhereBuilder = props => {
   const {
-    collectionPluralLabel: collectionPluralLabelProp,
     collectionSlug,
-    fields: fieldsProp,
-    onChange,
+    fields,
+    onChange: handleWhereChange,
+    onEmptyRemove,
     renderedFilters = undefined,
     resolvedFilterOptions = undefined,
-    value: valueProp
+    value
   } = props;
   const {
     i18n,
@@ -37,202 +37,266 @@ export const WhereBuilder = props => {
   const {
     permissions
   } = useAuth();
-  const {
-    getEntityConfig
-  } = useConfig();
-  const listQuery = useListQuery();
-  const isFormMode = typeof onChange === 'function';
-  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) {
-      if (validateWhereQuery(whereFromSearch)) {
-        return whereFromSearch.or ?? [];
+    if (value) {
+      if (validateWhereQuery(value)) {
+        return value.or ?? [];
       }
-      const transformedWhere = transformWhereQuery(whereFromSearch);
+      const transformedWhere = transformWhereQuery(value);
       if (validateWhereQuery(transformedWhere)) {
         return transformedWhere.or ?? [];
       }
-      if (!isFormMode) {
-        console.warn(`Invalid where query in URL: ${JSON.stringify(whereFromSearch)}`); // eslint-disable-line no-console
-      }
     }
     return [];
-  }, [isFormMode, valueProp, listQuery.query?.where]);
-  const handleWhereChange = isFormMode ? where => {
-    onChange?.(where);
-  } : listQuery.handleWhereChange;
-  const addCondition = React.useCallback(async ({
+  }, [value]);
+  const addCondition = React.useCallback(({
     andIndex,
     field,
     orIndex,
     relation
   }) => {
-    const newConditions = [...conditions];
+    const newConditions = structuredClone(conditions);
     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
           }
         }]
       });
     }
-    await handleWhereChange({
+    void handleWhereChange({
       or: newConditions
     });
   }, [conditions, handleWhereChange]);
-  const updateCondition = React.useCallback(async ({
+  const updateCondition = React.useCallback(({
+    type,
     andIndex: andIndex_0,
     field: field_0,
     operator: incomingOperator,
     orIndex: orIndex_0,
-    value
+    value: value_0
   }) => {
-    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) {
+      // Field and operator picks carry empty values too, but must fall through to build the row.
+      if (type === 'value' && isEmptyConditionValue({
+        value: value_0
+      })) {
+        return;
+      }
       const {
         validOperator
       } = getValidFieldOperators({
         field: field_0.field,
         operator: incomingOperator
       });
+      void handleWhereChange({
+        or: [{
+          and: [{
+            [String(field_0.fieldPath)]: {
+              [validOperator]: value_0
+            }
+          }]
+        }]
+      });
+      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];
-      if (typeof existingValue !== 'undefined' && existingValue === value) {
+      const existingValue = existingCondition[String(field_0.fieldPath)]?.[validOperator_0];
+      if (typeof existingValue !== 'undefined' && existingValue === value_0) {
+        return;
+      }
+      if (isNoOpConditionValueUpdate({
+        type,
+        incomingValue: value_0,
+        storedValue: existingValue
+      })) {
         return;
       }
       const newRowCondition = {
-        [String(field_0.value)]: {
-          [validOperator]: value
+        [String(field_0.fieldPath)]: {
+          [validOperator_0]: value_0
         }
       };
       if (dequal(existingCondition, newRowCondition)) {
         return;
       }
-      const newConditions_0 = [...conditions];
+      const newConditions_0 = structuredClone(conditions);
       newConditions_0[orIndex_0].and[andIndex_0] = newRowCondition;
-      await handleWhereChange({
+      void handleWhereChange({
         or: newConditions_0
       });
     }
   }, [conditions, handleWhereChange]);
-  const removeCondition = React.useCallback(async ({
+  const removeCondition = React.useCallback(({
     andIndex: andIndex_1,
     orIndex: orIndex_1
   }) => {
-    const newConditions_1 = [...conditions];
+    // Virtual first row: removing it just closes the panel
+    if (conditions.length === 0) {
+      onEmptyRemove?.();
+      return;
+    }
+    const newConditions_1 = structuredClone(conditions);
     newConditions_1[orIndex_1].and.splice(andIndex_1, 1);
     if (newConditions_1[orIndex_1].and.length === 0) {
       newConditions_1.splice(orIndex_1, 1);
     }
-    await handleWhereChange({
+    void handleWhereChange({
       or: newConditions_1
     });
+    // Removing the last remaining condition closes the filters panel.
+    if (newConditions_1.length === 0) {
+      onEmptyRemove?.();
+    }
+  }, [conditions, handleWhereChange, onEmptyRemove]);
+  const updateJoin = React.useCallback(({
+    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);
+      }
+    });
+    void handleWhereChange({
+      or: newConditions_2
+    });
   }, [conditions, handleWhereChange]);
-  return /*#__PURE__*/_jsxs("div", {
+  const addFirstFilter = React.useCallback(() => {
+    if (!firstField) {
+      return;
+    }
+    // With no committed conditions, only the virtual placeholder row is shown. Commit it
+    // and append a new row so a second row appears on the first click.
+    if (conditions.length === 0) {
+      const defaultOperator_0 = firstField.operators[0].value;
+      const makeRow = () => ({
+        and: [{
+          [String(firstField.fieldPath)]: {
+            [defaultOperator_0]: undefined
+          }
+        }]
+      });
+      void handleWhereChange({
+        or: [makeRow(), makeRow()]
+      });
+      return;
+    }
+    void addCondition({
+      andIndex: 0,
+      field: firstField,
+      orIndex: conditions.length,
+      relation: 'or'
+    });
+  }, [addCondition, conditions.length, firstField, handleWhereChange]);
+  // When conditions is empty, show a virtual first row so the panel never opens blank.
+  const displayConditions = conditions.length === 0 && firstField ? [{
+    and: [{
+      [firstField.fieldPath]: {
+        [firstField.operators[0].value]: undefined
+      }
+    }]
+  }] : conditions;
+  // Disable the remove button only when there are no committed conditions and this host
+  // doesn't provide an empty-state removal handler.
+  const disableRemoveButton = conditions.length === 0 && !onEmptyRemove;
+  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)
-        })
-      }), /*#__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: /*#__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_1 = getDisplayedConditionValue({
+              value: condition?.[fieldPath]?.[operator]
             });
-          }
-        },
-        children: t('general:addFilter')
+            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,
+              disableRemoveButton: disableRemoveButton,
+              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_1
+            }, 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')
+        })
       })]
-    })]
+    })
   });
 };
 //# sourceMappingURL=index.js.map