@synerise/ds-filter 1.2.40 → 1.2.42

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.42](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@1.2.41...@synerise/ds-filter@1.2.42) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-filter
+
+## [1.2.41](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@1.2.40...@synerise/ds-filter@1.2.41) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-filter
+
 ## [1.2.40](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@1.2.39...@synerise/ds-filter@1.2.40) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-filter

package/README.md

@@ -20,7 +20,7 @@ import Filter from '@synerise/ds-filter'
 
 <Filter
   expressions={[]}
-  onAdd={() => {}}
+  addFilterComponent={({ isLimitExceeded }) => <button disabled={isLimitExceeded}>Add filter</button>}
   onChangeLogic={(stepId, logicValue) => {}}
   onChangeOrder={(expressions) => {}}
   onChangeStepMatching={(stepId, matchingValue) => {}}
@@ -59,37 +59,46 @@ import Filter from '@synerise/ds-filter'
 
 ## API
 
-| Property                  | Description                                                 | Type                                                       | Default |
-| ------------------------- | ----------------------------------------------------------- | ---------------------------------------------------------- | ------- |
-| expressions               | Array of expressions                                        | Expression[]                                               | -       |
-| matching                  | Main matching configuration                                 | : MatchingProps                                            | -       |
-| onChangeOrder             | Function called when user change order of StepCards         | (newOrder: Expression[]) => void                           | -       |
-| onChangeLogic             | Function called when user change value of Logic             | (id: string, logic: LogicOperatorValue) => void            | -       |
-| onChangeStepMatching      | Function called when user change value of StepCard matching | (id: string, matching: boolean) => void                    | -       |
-| onChangeStepName          | Function called when user change name of StepCard           | (id: string, name: string) => void                         | -       |
-| onDeleteStep              | Function called when user click on delete StepCard icon     | (id: string) => void                                       | -       |
-| onDuplicateStep           | Function called when user click on duplicate StepCard icon  | (id: string) => void                                       | -       |
-| renderHeaderRightSide     | Renders filter header right side slot                       | (expressions: Expression[]) => React.ReactNode;            | -       |
-| renderStepFooter          | Function which renders footer of StepCard                   | (expression: Expression) => React.ReactNode                | -       |
-| renderStepContent         | Function which render content of StepCard                   | (expression: Expression) => React.ReactNode                | -       |
-| renderStepHeaderRightSide | Function which renders right side slot in StepCard header   | (expression: Expression, index: number) => React.ReactNode | -       |
-| onAdd                     | Function called when user click on AddFilter button         | () => void                                                 | -       |
-| texts                     | Object with translations                                    | FilterTexts                                                | -       |
+| Property                  | Description                                                                                             | Type                                                                                            | Default                             |
+| ------------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------------------------------- |
+| expressions               | Array of expressions                                                                                    | Expression[]                                                                                    | -                                   |
+| matching                  | Main matching configuration                                                                             | MatchingProps                                                                                   | -                                   |
+| onChangeOrder             | Called when user changes order; also enables drag mode when 2+ expressions                              | (newOrder: Expression[]) => void                                                                | -                                   |
+| onChangeLogic             | Called when user changes value of Logic                                                                 | (id: string, logic: LogicOperatorValue) => void                                                 | -                                   |
+| onChangeStepMatching      | Called when user changes value of StepCard matching                                                     | (id: string, matching: boolean) => void                                                         | -                                   |
+| onChangeStepName          | Called when user changes name of StepCard                                                               | (id: string, name: string) => void                                                              | -                                   |
+| onDeleteStep              | Called when user clicks delete StepCard icon                                                            | (id: string) => void                                                                            | -                                   |
+| onDuplicateStep           | Called when user clicks duplicate; hidden when maxConditionsLimit exceeded                              | (id: string) => void                                                                            | -                                   |
+| addFilterComponent        | Add filter button area; hidden in readOnly; function form receives { isLimitExceeded }                  | ReactNode or ((arg: { isLimitExceeded: boolean }) => ReactNode)                                 | -                                   |
+| renderHeaderRightSide     | Renders filter header right side slot                                                                   | (expressions: Expression[]) => React.ReactNode                                                  | -                                   |
+| renderStepFooter          | Renders footer of each StepCard                                                                         | (expression: Expression) => React.ReactNode                                                     | -                                   |
+| renderStepContent         | Renders content of each StepCard; hoverDisabled is true when another step is active                     | (expression: Expression, hoverDisabled?: boolean) => React.ReactNode                            | -                                   |
+| renderStepHeaderRightSide | Renders right side slot in each StepCard header                                                         | (expression: Expression, index: number, options?: { placeholder?: boolean }) => React.ReactNode | -                                   |
+| logicOptions              | Available logic operator choices                                                                        | LogicOperator[]                                                                                 | -                                   |
+| maxConditionsLimit        | Shows count/limit in header; disables duplicate when reached                                            | number                                                                                          | -                                   |
+| readOnly                  | Disables all editing interactions                                                                       | boolean                                                                                         | false                               |
+| singleStepCondition       | Passes single-condition variant flag to StepCard                                                        | boolean                                                                                         | false                               |
+| visibilityConfig          | Controls StepCard header visibility                                                                     | { isStepCardHeaderVisible?: boolean }                                                           | { isStepCardHeaderVisible: true }   |
+| getMoveByLabel            | Returns accessible aria label for keyboard-move buttons                                                 | (moveByOffset: number) => string                                                                | -                                   |
+| texts                     | Object with translations (deep partial — any subset can be overridden)                                  | DeepPartial<FilterTexts>                                                                        | -                                   |
 
 ### Expression
 
-| Property | Description                                         | Type                                             | Default |
-| -------- | --------------------------------------------------- | ------------------------------------------------ | ------- |
-| type     | Type of expression: `STEP` or `LOGIC`               | `STEP` \ `LOGIC`                                 | -       |
-| id       | Id of expression                                    | string                                           | -       |
-| data     | Object with props of expression, base of type value | `Partial<StepCardProps>` \ `Partial<LogicProps>` | -       |
-| logic    | Logic component related to Step expression          | `Expression`                                     | -       |
+| Property       | Description                                            | Type                                              | Default |
+| -------------- | ------------------------------------------------------ | ------------------------------------------------- | ------- |
+| type           | Type of expression: STEP or LOGIC                      | 'STEP' or 'LOGIC'                                 | -       |
+| id             | Id of expression                                       | string                                            | -       |
+| data           | Object with props of expression, based on type         | Partial<StepCardProps> or Partial<LogicProps>      | -       |
+| logic          | Logic operator before this step (STEP only)            | LogicType                                         | -       |
+| expressionType | Controls matching text variant (STEP only)             | 'attribute' or 'event'                            | -       |
 
 ### FilterTexts
 
-| Property   | Description                                     | Type          | Default        |
-| ---------- | ----------------------------------------------- | ------------- | -------------- |
-| matching   | Object with translations for Matching component | MatchingTexts | -              |
-| step       | Object with translations for StepCard component | StepCardTexts | -              |
-| addFilter  | Label of AddFilter button                       | string        | 'Add filter'   |
-| dropMeHere | Label of drop area                              | string        | 'Drop me here' |
+| Property    | Description                                     | Type          | Default        |
+| ----------- | ----------------------------------------------- | ------------- | -------------- |
+| matching    | Object with translations for Matching component | MatchingTexts | -              |
+| step        | Object with translations for StepCard component | object        | -              |
+| addFilter   | Label of AddFilter button                       | string        | 'Add filter'   |
+| dropMeHere  | Label of drop area                              | string        | 'Drop me here' |
+| placeholder | Object with placeholder translations            | object        | -              |
+| overwritten | Object for header overrides (filterTitle)       | object        | -              |

package/dist/Filter.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type FilterProps } from './Filter.types';
+import { default as React } from 'react';
+import { FilterProps } from './Filter.types';
 declare const Filter: ({ maxConditionsLimit, expressions, matching, onChangeOrder, onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepFooter, renderStepContent, renderStepHeaderRightSide, addFilterComponent, texts, logicOptions, renderHeaderRightSide, visibilityConfig, readOnly, singleStepCondition, getMoveByLabel, }: FilterProps) => React.JSX.Element;
 export default Filter;

package/dist/Filter.js

@@ -1,331 +1,321 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useIntl } from 'react-intl';
-import { Matching, Placeholder } from '@synerise/ds-logic';
-import Sortable from '@synerise/ds-sortable';
-import { NOOP, usePrevious } from '@synerise/ds-utils';
-import * as S from './Filter.styles';
-import { DraggableExpressionItem, ExpressionItem } from './components/ExpressionItem';
-import { isStepType } from './utils';
-var TRANSITION_DURATION = 0.5;
-var TRANSITION_DURATION_MAX = 1.5;
-var TOP_TRANSITION_ZINDEX = '1003';
-var BOTTOM_TRANSITION_ZINDEX = '1002';
-var rearrangeItems = function rearrangeItems(sourceArray, oldIndex, newIndex) {
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { useIntl } from "react-intl";
+import { Matching, Placeholder } from "@synerise/ds-logic";
+import Sortable from "@synerise/ds-sortable";
+import { usePrevious, NOOP } from "@synerise/ds-utils";
+import { placeholderCss, FilterWrapper, FilterHeader, FilterTitle, MatchingAndConditionsWrapper, MatchingWrapper, ConditionsLimit, ConditionsLimitResults, FilterHeaderRightSide, AddButtonWrapper } from "./Filter.styles.js";
+import { DraggableExpressionItem } from "./components/ExpressionItem/DraggableExpressionItem.js";
+import { ExpressionItem } from "./components/ExpressionItem/ExpressionItem.js";
+import { isStepType } from "./utils.js";
+const TRANSITION_DURATION = 0.5;
+const TRANSITION_DURATION_MAX = 1.5;
+const TOP_TRANSITION_ZINDEX = "1003";
+const BOTTOM_TRANSITION_ZINDEX = "1002";
+const rearrangeItems = (sourceArray, oldIndex, newIndex) => {
   sourceArray.splice(newIndex, 0, sourceArray.splice(oldIndex, 1)[0]);
-  return [].concat(sourceArray);
+  return [...sourceArray];
 };
-var Filter = function Filter(_ref) {
-  var _texts$overwritten;
-  var maxConditionsLimit = _ref.maxConditionsLimit,
-    expressions = _ref.expressions,
-    matching = _ref.matching,
-    onChangeOrder = _ref.onChangeOrder,
-    onChangeLogic = _ref.onChangeLogic,
-    onChangeStepMatching = _ref.onChangeStepMatching,
-    onChangeStepName = _ref.onChangeStepName,
-    onDeleteStep = _ref.onDeleteStep,
-    onDuplicateStep = _ref.onDuplicateStep,
-    renderStepFooter = _ref.renderStepFooter,
-    renderStepContent = _ref.renderStepContent,
-    renderStepHeaderRightSide = _ref.renderStepHeaderRightSide,
-    addFilterComponent = _ref.addFilterComponent,
-    texts = _ref.texts,
-    logicOptions = _ref.logicOptions,
-    renderHeaderRightSide = _ref.renderHeaderRightSide,
-    _ref$visibilityConfig = _ref.visibilityConfig,
-    visibilityConfig = _ref$visibilityConfig === void 0 ? {
-      isStepCardHeaderVisible: true
-    } : _ref$visibilityConfig,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    _ref$singleStepCondit = _ref.singleStepCondition,
-    singleStepCondition = _ref$singleStepCondit === void 0 ? false : _ref$singleStepCondit,
-    getMoveByLabel = _ref.getMoveByLabel;
-  var previousExpressions = usePrevious(expressions);
-  var _useState = useState(null),
-    activeExpressionId = _useState[0],
-    setActiveExpressionId = _useState[1];
-  var expressionRefs = useRef({});
-  var movedExpressionId = useRef(null);
-  useEffect(function () {
-    if (movedExpressionId.current && previousExpressions != null && previousExpressions.length) {
-      var oldIndex = previousExpressions == null ? void 0 : previousExpressions.findIndex(function (expression) {
+const Filter = ({
+  maxConditionsLimit,
+  expressions,
+  matching,
+  onChangeOrder,
+  onChangeLogic,
+  onChangeStepMatching,
+  onChangeStepName,
+  onDeleteStep,
+  onDuplicateStep,
+  renderStepFooter,
+  renderStepContent,
+  renderStepHeaderRightSide,
+  addFilterComponent,
+  texts,
+  logicOptions,
+  renderHeaderRightSide,
+  visibilityConfig = {
+    isStepCardHeaderVisible: true
+  },
+  readOnly = false,
+  singleStepCondition = false,
+  getMoveByLabel
+}) => {
+  const previousExpressions = usePrevious(expressions);
+  const [activeExpressionId, setActiveExpressionId] = useState(null);
+  const expressionRefs = useRef({});
+  const movedExpressionId = useRef(null);
+  useEffect(() => {
+    if (movedExpressionId.current && previousExpressions?.length) {
+      const oldIndex = previousExpressions?.findIndex((expression) => {
         return expression.id === movedExpressionId.current;
       });
-      var newIndex = expressions == null ? void 0 : expressions.findIndex(function (expression) {
+      const newIndex = expressions?.findIndex((expression) => {
         return expression.id === movedExpressionId.current;
       });
-      if (oldIndex !== undefined && oldIndex !== newIndex) {
-        var sign = oldIndex < newIndex ? 1 : -1;
-        var low = Math.min(oldIndex, newIndex);
-        var high = Math.max(oldIndex, newIndex);
-        var movedExpressionHeight = sign * expressionRefs.current[movedExpressionId.current].getBoundingClientRect().height;
-        var expressionOffset = 0;
-        var movedCardTransformDuration = Math.min((high - low) * TRANSITION_DURATION, TRANSITION_DURATION_MAX);
-        expressions.forEach(function (expression, index) {
+      if (oldIndex !== void 0 && oldIndex !== newIndex) {
+        const sign = oldIndex < newIndex ? 1 : -1;
+        const low = Math.min(oldIndex, newIndex);
+        const high = Math.max(oldIndex, newIndex);
+        const movedExpressionHeight = sign * expressionRefs.current[movedExpressionId.current].getBoundingClientRect().height;
+        let expressionOffset = 0;
+        const movedCardTransformDuration = Math.min((high - low) * TRANSITION_DURATION, TRANSITION_DURATION_MAX);
+        expressions.forEach((expression, index) => {
           if (expression.id !== movedExpressionId.current && index >= low && index <= high) {
             expressionOffset += expressionRefs.current[expression.id].getBoundingClientRect().height;
-            expressionRefs.current[expression.id].style.transition = '';
+            expressionRefs.current[expression.id].style.transition = "";
             expressionRefs.current[expression.id].style.zIndex = BOTTOM_TRANSITION_ZINDEX;
-            expressionRefs.current[expression.id].style.transform = "translateY(" + movedExpressionHeight + "px)";
+            expressionRefs.current[expression.id].style.transform = `translateY(${movedExpressionHeight}px)`;
           }
         });
-        expressionRefs.current[movedExpressionId.current].style.transition = '';
+        expressionRefs.current[movedExpressionId.current].style.transition = "";
         expressionRefs.current[movedExpressionId.current].style.zIndex = TOP_TRANSITION_ZINDEX;
-        expressionRefs.current[movedExpressionId.current].style.transform = "translateY(" + -sign * expressionOffset + "px)";
-        requestAnimationFrame(function () {
-          expressions.forEach(function (expression) {
-            expressionRefs.current[expression.id].style.transition = "transform " + (expression.id === movedExpressionId.current ? movedCardTransformDuration : TRANSITION_DURATION) + "s";
-            expressionRefs.current[expression.id].style.transform = '';
+        expressionRefs.current[movedExpressionId.current].style.transform = `translateY(${-sign * expressionOffset}px)`;
+        requestAnimationFrame(() => {
+          expressions.forEach((expression) => {
+            expressionRefs.current[expression.id].style.transition = `transform ${expression.id === movedExpressionId.current ? movedCardTransformDuration : TRANSITION_DURATION}s`;
+            expressionRefs.current[expression.id].style.transform = "";
           });
           movedExpressionId.current = null;
         });
       }
     }
   });
-  useEffect(function () {
+  useEffect(() => {
     if (previousExpressions && expressions.length > previousExpressions.length) {
       setActiveExpressionId(expressions[expressions.length - 1].id);
     }
   }, [expressions, previousExpressions]);
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  var text = useMemo(function () {
-    return _extends({
-      addFilter: formatMessage({
-        id: 'DS.FILTER.ADD-FILTER',
-        defaultMessage: 'Add filter'
+  const {
+    formatMessage
+  } = useIntl();
+  const text = useMemo(() => ({
+    addFilter: formatMessage({
+      id: "DS.FILTER.ADD-FILTER",
+      defaultMessage: "Add filter"
+    }),
+    dropMeHere: formatMessage({
+      id: "DS.FILTER.DROP-ME-HERE",
+      defaultMessage: "Drop me here"
+    }),
+    conditionsLimit: formatMessage({
+      id: "DS.FILTER.CONDITIONS-LIMIT",
+      defaultMessage: ""
+    }),
+    ...texts,
+    matching: {
+      matching: formatMessage({
+        id: "DS.MATCHING.MATCHING",
+        defaultMessage: "Matching"
       }),
-      dropMeHere: formatMessage({
-        id: 'DS.FILTER.DROP-ME-HERE',
-        defaultMessage: 'Drop me here'
+      notMatching: formatMessage({
+        id: "DS.MATCHING.NOT-MATCHING",
+        defaultMessage: "Not matching"
       }),
-      conditionsLimit: formatMessage({
-        id: 'DS.FILTER.CONDITIONS-LIMIT',
-        defaultMessage: ''
-      })
-    }, texts, {
-      matching: _extends({
-        matching: formatMessage({
-          id: 'DS.MATCHING.MATCHING',
-          defaultMessage: 'Matching'
-        }),
-        notMatching: formatMessage({
-          id: 'DS.MATCHING.NOT-MATCHING',
-          defaultMessage: 'Not matching'
-        })
-      }, texts == null ? void 0 : texts.matching),
-      step: _extends({
-        matching: formatMessage({
-          id: 'DS.MATCHING.MATCHING',
-          defaultMessage: 'Matching'
-        }),
-        notMatching: formatMessage({
-          id: 'DS.MATCHING.NOT-MATCHING',
-          defaultMessage: 'Not matching'
-        }),
-        have: formatMessage({
-          id: 'DS.MATCHING.HAVE',
-          defaultMessage: 'Have'
-        }),
-        performed: formatMessage({
-          id: 'DS.MATCHING.PERFORMED',
-          defaultMessage: 'Performed'
-        }),
-        notHave: formatMessage({
-          id: 'DS.MATCHING.NOT-HAVE',
-          defaultMessage: 'Does not have'
-        }),
-        notPerformed: formatMessage({
-          id: 'DS.MATCHING.NOT-PERFORMED',
-          defaultMessage: 'Have not performed'
-        }),
-        attribute: formatMessage({
-          id: 'DS.MATCHING.EXPRESSION-TYPE.ATTRIBUTE',
-          defaultMessage: 'attribute'
-        }),
-        event: formatMessage({
-          id: 'DS.MATCHING.EXPRESSION-TYPE.EVENT',
-          defaultMessage: 'event'
-        }),
-        notAttribute: formatMessage({
-          id: 'DS.MATCHING.EXPRESSION-TYPE.NOT_ATTRIBUTE',
-          defaultMessage: 'attribute'
-        }),
-        notEvent: formatMessage({
-          id: 'DS.MATCHING.EXPRESSION-TYPE.NOT_EVENT',
-          defaultMessage: 'event'
-        }),
-        namePlaceholder: formatMessage({
-          id: 'DS.STEP-CARD.NAME-PLACEHOLDER'
-        }),
-        moveTooltip: formatMessage({
-          id: 'DS.STEP-CARD.MOVE',
-          defaultMessage: 'Move'
-        }),
-        moveUpTooltip: formatMessage({
-          id: 'DS.STEP-CARD.MOVE-UP',
-          defaultMessage: 'Move up'
-        }),
-        moveDownTooltip: formatMessage({
-          id: 'DS.STEP-CARD.MOVE-DOWN',
-          defaultMessage: 'Move down'
-        }),
-        deleteTooltip: formatMessage({
-          id: 'DS.STEP-CARD.DELETE',
-          defaultMessage: 'Delete'
-        }),
-        duplicateTooltip: formatMessage({
-          id: 'DS.STEP-CARD.DUPLICATE',
-          defaultMessage: 'Duplicate'
-        })
-      }, texts == null ? void 0 : texts.step),
-      placeholder: _extends({
-        chooseCondition: formatMessage({
-          id: 'DS.PLACEHOLDER.CHOOSE-CONDITION'
-        })
-      }, texts == null ? void 0 : texts.placeholder)
-    });
-  }, [formatMessage, texts]);
-  var getContextTypeTexts = useCallback(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function (expression) {
-    var contextType = expression.expressionType;
-    return {
-      matching: contextType === 'attribute' ? text.step.have : text.step.performed,
-      notMatching: contextType === 'attribute' ? text.step.notHave : text.step.notPerformed,
-      conditionType: contextType === 'attribute' ? text.step.attribute : text.step.event,
-      notConditionType: contextType === 'attribute' ? text.step.notAttribute : text.step.notEvent
-    };
-  }, [text]);
-  var isActive = useCallback(function (expression) {
+      ...texts?.matching
+    },
+    step: {
+      matching: formatMessage({
+        id: "DS.MATCHING.MATCHING",
+        defaultMessage: "Matching"
+      }),
+      notMatching: formatMessage({
+        id: "DS.MATCHING.NOT-MATCHING",
+        defaultMessage: "Not matching"
+      }),
+      have: formatMessage({
+        id: "DS.MATCHING.HAVE",
+        defaultMessage: "Have"
+      }),
+      performed: formatMessage({
+        id: "DS.MATCHING.PERFORMED",
+        defaultMessage: "Performed"
+      }),
+      notHave: formatMessage({
+        id: "DS.MATCHING.NOT-HAVE",
+        defaultMessage: "Does not have"
+      }),
+      notPerformed: formatMessage({
+        id: "DS.MATCHING.NOT-PERFORMED",
+        defaultMessage: "Have not performed"
+      }),
+      attribute: formatMessage({
+        id: "DS.MATCHING.EXPRESSION-TYPE.ATTRIBUTE",
+        defaultMessage: "attribute"
+      }),
+      event: formatMessage({
+        id: "DS.MATCHING.EXPRESSION-TYPE.EVENT",
+        defaultMessage: "event"
+      }),
+      notAttribute: formatMessage({
+        id: "DS.MATCHING.EXPRESSION-TYPE.NOT_ATTRIBUTE",
+        defaultMessage: "attribute"
+      }),
+      notEvent: formatMessage({
+        id: "DS.MATCHING.EXPRESSION-TYPE.NOT_EVENT",
+        defaultMessage: "event"
+      }),
+      namePlaceholder: formatMessage({
+        id: "DS.STEP-CARD.NAME-PLACEHOLDER"
+      }),
+      moveTooltip: formatMessage({
+        id: "DS.STEP-CARD.MOVE",
+        defaultMessage: "Move"
+      }),
+      moveUpTooltip: formatMessage({
+        id: "DS.STEP-CARD.MOVE-UP",
+        defaultMessage: "Move up"
+      }),
+      moveDownTooltip: formatMessage({
+        id: "DS.STEP-CARD.MOVE-DOWN",
+        defaultMessage: "Move down"
+      }),
+      deleteTooltip: formatMessage({
+        id: "DS.STEP-CARD.DELETE",
+        defaultMessage: "Delete"
+      }),
+      duplicateTooltip: formatMessage({
+        id: "DS.STEP-CARD.DUPLICATE",
+        defaultMessage: "Duplicate"
+      }),
+      ...texts?.step
+    },
+    placeholder: {
+      chooseCondition: formatMessage({
+        id: "DS.PLACEHOLDER.CHOOSE-CONDITION"
+      }),
+      ...texts?.placeholder
+    }
+  }), [formatMessage, texts]);
+  const getContextTypeTexts = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (expression) => {
+      const contextType = expression.expressionType;
+      return {
+        matching: contextType === "attribute" ? text.step.have : text.step.performed,
+        notMatching: contextType === "attribute" ? text.step.notHave : text.step.notPerformed,
+        conditionType: contextType === "attribute" ? text.step.attribute : text.step.event,
+        notConditionType: contextType === "attribute" ? text.step.notAttribute : text.step.notEvent
+      };
+    },
+    [text]
+  );
+  const isActive = useCallback((expression) => {
     return expression.id === activeExpressionId;
   }, [activeExpressionId]);
-  var isLimitExceeded = useMemo(function () {
-    return maxConditionsLimit ? expressions.length >= maxConditionsLimit : false;
-  }, [expressions, maxConditionsLimit]);
-  var stepExpressionCount = useMemo(function () {
-    return expressions.filter(function (expression) {
-      return expression.type === 'STEP';
-    }).length;
+  const isLimitExceeded = useMemo(() => maxConditionsLimit ? expressions.length >= maxConditionsLimit : false, [expressions, maxConditionsLimit]);
+  const stepExpressionCount = useMemo(() => {
+    return expressions.filter((expression) => expression.type === "STEP").length;
   }, [expressions]);
-  var handleTransitionEnd = useCallback(function (event) {
+  const handleTransitionEnd = useCallback((event) => {
     if (event.currentTarget && event.currentTarget instanceof HTMLElement) {
-      event.currentTarget.style.removeProperty('z-index');
+      event.currentTarget.style.removeProperty("z-index");
     }
   }, []);
-  var handleMove = useCallback(function (index, offset) {
-    var newIndex = index + offset;
-    var newOrder = rearrangeItems([].concat(expressions), index, newIndex);
+  const handleMove = useCallback((index, offset) => {
+    const newIndex = index + offset;
+    const newOrder = rearrangeItems([...expressions], index, newIndex);
     movedExpressionId.current = newOrder[newIndex].id;
-    onChangeOrder == null || onChangeOrder(newOrder);
+    onChangeOrder?.(newOrder);
   }, [expressions, onChangeOrder]);
-  var isDraggable = Boolean(onChangeOrder && expressions.length > 1);
-  var getStepProps = useCallback(function (expression, index) {
-    var contextTypeTexts = getContextTypeTexts(expression);
-    var reorderProps = {
+  const isDraggable = Boolean(onChangeOrder && expressions.length > 1);
+  const getStepProps = useCallback((expression, index) => {
+    const contextTypeTexts = getContextTypeTexts(expression);
+    const reorderProps = {
       expressionIndex: index,
       expressionMoved: movedExpressionId.current === expression.id,
       expressionCount: stepExpressionCount,
       onMove: handleMove
     };
-    return _extends({}, reorderProps, {
-      onChangeMatching: onChangeStepMatching ? function (value) {
-        return onChangeStepMatching(expression.id, value);
-      } : undefined,
-      onChangeName: onChangeStepName ? function (value) {
-        return onChangeStepName(expression.id, value);
-      } : undefined,
-      onDelete: onDeleteStep ? function () {
-        return onDeleteStep(expression.id);
-      } : undefined,
-      onDuplicate: onDuplicateStep && !isLimitExceeded ? function () {
-        return onDuplicateStep(expression.id);
-      } : undefined,
+    return {
+      ...reorderProps,
+      onChangeMatching: onChangeStepMatching ? (value) => onChangeStepMatching(expression.id, value) : void 0,
+      onChangeName: onChangeStepName ? (value) => onChangeStepName(expression.id, value) : void 0,
+      onDelete: onDeleteStep ? () => onDeleteStep(expression.id) : void 0,
+      onDuplicate: onDuplicateStep && !isLimitExceeded ? () => onDuplicateStep(expression.id) : void 0,
       footer: renderStepFooter && renderStepFooter(expression),
       children: renderStepContent && renderStepContent(expression, !!activeExpressionId && !isActive(expression)),
       isHeaderVisible: visibilityConfig.isStepCardHeaderVisible,
-      renderHeaderRightSide: renderStepHeaderRightSide ? function (itemIndex, options) {
-        return renderStepHeaderRightSide(expression, itemIndex, options);
-      } : undefined,
-      isDraggable: isDraggable,
+      renderHeaderRightSide: renderStepHeaderRightSide ? (itemIndex, options) => renderStepHeaderRightSide(expression, itemIndex, options) : void 0,
+      isDraggable,
       singleStepCondition: Boolean(singleStepCondition),
       additionalFields: expression.data.additionalFields,
-      getMoveByLabel: getMoveByLabel,
+      getMoveByLabel,
       dropLabel: text.dropMeHere,
-      texts: _extends({}, text.step, contextTypeTexts)
-    });
+      texts: {
+        ...text.step,
+        ...contextTypeTexts
+      }
+    };
   }, [getContextTypeTexts, stepExpressionCount, handleMove, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, isLimitExceeded, renderStepFooter, renderStepContent, activeExpressionId, isActive, visibilityConfig.isStepCardHeaderVisible, renderStepHeaderRightSide, isDraggable, singleStepCondition, getMoveByLabel, text.dropMeHere, text.step]);
-  var getLogicProps = useCallback(function (expression) {
+  const getLogicProps = useCallback((expression) => {
     return {
-      value: '',
-      onChange: onChangeLogic ? function (value) {
-        return onChangeLogic(expression.id, value);
-      } : NOOP,
+      value: "",
+      onChange: onChangeLogic ? (value) => onChangeLogic(expression.id, value) : NOOP,
       options: logicOptions
     };
   }, [onChangeLogic, logicOptions]);
-  var expressionData = useMemo(function () {
-    var expressionsOrder = expressions.map(function (expression) {
-      return expression.id;
-    });
-    return expressions.map(function (expression, index) {
-      var logicProps = isStepType(expression) && expression.logic ? getLogicProps(expression.logic) : {
-        value: '',
+  const expressionData = useMemo(() => {
+    const expressionsOrder = expressions.map((expression) => expression.id);
+    return expressions.map((expression, index) => {
+      const logicProps = isStepType(expression) && expression.logic ? getLogicProps(expression.logic) : {
+        value: "",
         onChange: NOOP
       };
-      var stepProps = isStepType(expression) ? getStepProps(expression, index) : {};
+      const stepProps = isStepType(expression) ? getStepProps(expression, index) : {};
       return {
-        wrapperRef: function wrapperRef(element) {
-          return expressionRefs.current[expression.id] = element;
-        },
+        wrapperRef: (element) => expressionRefs.current[expression.id] = element,
         dropLabel: text.dropMeHere,
-        logicProps: logicProps,
-        stepProps: stepProps,
-        handleMouseDown: function handleMouseDown() {
-          return setActiveExpressionId(expression.id);
-        },
-        handleTransitionEnd: handleTransitionEnd,
-        expression: expression,
-        expressionsOrder: expressionsOrder,
+        logicProps,
+        stepProps,
+        handleMouseDown: () => setActiveExpressionId(expression.id),
+        handleTransitionEnd,
+        expression,
+        expressionsOrder,
         id: expression.id,
         expressionIndex: index,
-        readOnly: readOnly,
+        readOnly,
         isLast: index === expressions.length - 1
       };
     });
   }, [expressions, readOnly, handleTransitionEnd, setActiveExpressionId, getStepProps, getLogicProps, text.dropMeHere]);
-  var handleChangeOrder = useCallback(function (newOrder) {
+  const handleChangeOrder = useCallback((newOrder) => {
     if (onChangeOrder) {
-      var idOrder = newOrder.map(function (item) {
-        return item.id;
-      });
-      var updatedExpressions = [].concat(expressions).sort(function (a, b) {
-        return idOrder.indexOf(a.id) - idOrder.indexOf(b.id);
-      });
+      const idOrder = newOrder.map((item) => item.id);
+      const updatedExpressions = [...expressions].sort((a, b) => idOrder.indexOf(a.id) - idOrder.indexOf(b.id));
       onChangeOrder(updatedExpressions);
     }
   }, [onChangeOrder, expressions]);
-  var renderExpressions = useCallback(function () {
+  const renderExpressions = useCallback(() => {
     if (isDraggable) {
-      return /*#__PURE__*/React.createElement(Sortable, {
-        placeholderCss: S.placeholderCss,
-        axis: "y",
-        items: expressionData,
-        ItemComponent: DraggableExpressionItem,
-        onOrderChange: handleChangeOrder
-      });
+      return /* @__PURE__ */ jsx(Sortable, { placeholderCss, axis: "y", items: expressionData, ItemComponent: DraggableExpressionItem, onOrderChange: handleChangeOrder });
     }
     return expressionData.map(ExpressionItem);
   }, [expressionData, handleChangeOrder, isDraggable]);
-  return /*#__PURE__*/React.createElement(S.FilterWrapper, null, /*#__PURE__*/React.createElement(S.FilterHeader, null, texts != null && (_texts$overwritten = texts.overwritten) != null && _texts$overwritten.filterTitle ? /*#__PURE__*/React.createElement(S.FilterTitle, null, texts.overwritten.filterTitle) : /*#__PURE__*/React.createElement(S.MatchingAndConditionsWrapper, null, /*#__PURE__*/React.createElement(S.MatchingWrapper, null, matching && /*#__PURE__*/React.createElement(Matching, _extends({}, matching, {
-    texts: text.matching,
-    readOnly: readOnly
-  }))), !!maxConditionsLimit && /*#__PURE__*/React.createElement(S.ConditionsLimit, null, text.conditionsLimit, ":", ' ', /*#__PURE__*/React.createElement(S.ConditionsLimitResults, null, expressions.length, "/", maxConditionsLimit))), renderHeaderRightSide && /*#__PURE__*/React.createElement(S.FilterHeaderRightSide, null, renderHeaderRightSide(expressions))), /*#__PURE__*/React.createElement(React.Fragment, null, expressions.length > 0 ? renderExpressions() : /*#__PURE__*/React.createElement(Placeholder, {
-    text: text.placeholder.chooseCondition
-  }), addFilterComponent && !readOnly && /*#__PURE__*/React.createElement(S.AddButtonWrapper, null, typeof addFilterComponent === 'function' ? addFilterComponent({
-    isLimitExceeded: isLimitExceeded
-  }) : addFilterComponent)));
+  return /* @__PURE__ */ jsxs(FilterWrapper, { children: [
+    /* @__PURE__ */ jsxs(FilterHeader, { children: [
+      texts?.overwritten?.filterTitle ? /* @__PURE__ */ jsx(FilterTitle, { children: texts.overwritten.filterTitle }) : /* @__PURE__ */ jsxs(MatchingAndConditionsWrapper, { children: [
+        /* @__PURE__ */ jsx(MatchingWrapper, { children: matching && /* @__PURE__ */ jsx(Matching, { ...matching, texts: text.matching, readOnly }) }),
+        !!maxConditionsLimit && /* @__PURE__ */ jsxs(ConditionsLimit, { children: [
+          text.conditionsLimit,
+          ":",
+          " ",
+          /* @__PURE__ */ jsxs(ConditionsLimitResults, { children: [
+            expressions.length,
+            "/",
+            maxConditionsLimit
+          ] })
+        ] })
+      ] }),
+      renderHeaderRightSide && /* @__PURE__ */ jsx(FilterHeaderRightSide, { children: renderHeaderRightSide(expressions) })
+    ] }),
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      expressions.length > 0 ? renderExpressions() : /* @__PURE__ */ jsx(Placeholder, { text: text.placeholder.chooseCondition }),
+      addFilterComponent && !readOnly && /* @__PURE__ */ jsx(AddButtonWrapper, { children: typeof addFilterComponent === "function" ? addFilterComponent({
+        isLimitExceeded
+      }) : addFilterComponent })
+    ] })
+  ] });
+};
+export {
+  Filter as default
 };
-export default Filter;

package/dist/Filter.styles.d.ts

@@ -1,15 +1,15 @@
-export declare const placeholderCss: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-export declare const FilterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FilterHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FilterHeaderRightSide: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MatchingAndConditionsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MatchingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ConditionsLimit: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ConditionsLimitResults: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const LogicWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ExpressionWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const placeholderCss: import('styled-components').FlattenInterpolation<import('styled-components').ThemeProps<any>>;
+export declare const FilterWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const FilterHeader: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const FilterHeaderRightSide: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const MatchingAndConditionsWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const MatchingWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ConditionsLimit: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ConditionsLimitResults: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const LogicWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ExpressionWrapper: import('styled-components').StyledComponent<"div", any, {
     index?: number;
     isDragged?: boolean;
 }, never>;
-export declare const AddButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FilterTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AddButtonWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const FilterTitle: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Filter.styles.js

@@ -1,55 +1,65 @@
-import styled, { css } from 'styled-components';
-import { SortableItemContent } from '@synerise/ds-sortable/dist/Sortable.styles';
-export var placeholderCss = css(["height:calc(100% - 24px);background-color:", ";border:0;border-left:2px solid ", ";border-radius:3px;"], function (props) {
-  return props.theme.palette['blue-050'];
-}, function (props) {
-  return props.theme.palette['blue-600'];
-});
-export var FilterWrapper = styled.div.withConfig({
+import styled, { css } from "styled-components";
+import { SortableItemContent } from "@synerise/ds-sortable/dist/Sortable.styles";
+const placeholderCss = /* @__PURE__ */ css(["height:calc(100% - 24px);background-color:", ";border:0;border-left:2px solid ", ";border-radius:3px;"], (props) => props.theme.palette["blue-050"], (props) => props.theme.palette["blue-600"]);
+const FilterWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Filterstyles__FilterWrapper",
   componentId: "sc-w5f27p-0"
 })(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;", "{visibility:visible;opacity:1;}"], SortableItemContent);
-export var FilterHeader = styled.div.withConfig({
+const FilterHeader = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Filterstyles__FilterHeader",
   componentId: "sc-w5f27p-1"
 })(["width:100%;display:flex;margin-bottom:24px;flex-direction:row;align-items:center;justify-content:space-between;"]);
-export var FilterHeaderRightSide = styled.div.withConfig({
+const FilterHeaderRightSide = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Filterstyles__FilterHeaderRightSide",
   componentId: "sc-w5f27p-2"
 })(["flex:1;overflow-x:hidden;"]);
-export var MatchingAndConditionsWrapper = styled.div.withConfig({
+const MatchingAndConditionsWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Filterstyles__MatchingAndConditionsWrapper",
   componentId: "sc-w5f27p-3"
 })(["flex:0 0 auto;margin-right:24px;display:flex;align-items:baseline;"]);
-export var MatchingWrapper = styled.div.withConfig({
+const MatchingWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Filterstyles__MatchingWrapper",
   componentId: "sc-w5f27p-4"
 })(["text-wrap:nowrap;"]);
-export var ConditionsLimit = styled.div.withConfig({
+const ConditionsLimit = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Filterstyles__ConditionsLimit",
   componentId: "sc-w5f27p-5"
 })(["margin-left:16px;"]);
-export var ConditionsLimitResults = styled.span.withConfig({
+const ConditionsLimitResults = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Filterstyles__ConditionsLimitResults",
   componentId: "sc-w5f27p-6"
 })(["font-weight:500;"]);
-export var LogicWrapper = styled.div.withConfig({
+const LogicWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Filterstyles__LogicWrapper",
   componentId: "sc-w5f27p-7"
 })(["margin:22px 0;"]);
-export var ExpressionWrapper = styled.div.withConfig({
+const ExpressionWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Filterstyles__ExpressionWrapper",
   componentId: "sc-w5f27p-8"
-})(["width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;", ""], function (props) {
-  return (props.isDragged || props.index === -1) && "\n    " + LogicWrapper + " {\n      display: none;\n    }\n    ";
-});
-export var AddButtonWrapper = styled.div.withConfig({
+})(["width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;", ""], (props) => (props.isDragged || props.index === -1) && `
+    ${LogicWrapper} {
+      display: none;
+    }
+    `);
+const AddButtonWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Filterstyles__AddButtonWrapper",
   componentId: "sc-w5f27p-9"
 })(["display:flex;align-items:flex-start;justify-content:flex-start;margin:24px 0 0;width:100%;position:relative;"]);
-export var FilterTitle = styled.div.withConfig({
+const FilterTitle = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Filterstyles__FilterTitle",
   componentId: "sc-w5f27p-10"
-})(["font-size:16px;font-weight:500;line-height:1.25;color:", ";text-align:left;user-select:none;flex:0 0 auto;&:first-letter{text-transform:uppercase;}"], function (props) {
-  return props.theme.palette['grey-800'];
-});
+})(["font-size:16px;font-weight:500;line-height:1.25;color:", ";text-align:left;user-select:none;flex:0 0 auto;&:first-letter{text-transform:uppercase;}"], (props) => props.theme.palette["grey-800"]);
+export {
+  AddButtonWrapper,
+  ConditionsLimit,
+  ConditionsLimitResults,
+  ExpressionWrapper,
+  FilterHeader,
+  FilterHeaderRightSide,
+  FilterTitle,
+  FilterWrapper,
+  LogicWrapper,
+  MatchingAndConditionsWrapper,
+  MatchingWrapper,
+  placeholderCss
+};

package/dist/Filter.types.d.ts

@@ -1,7 +1,7 @@
-import type { ReactNode } from 'react';
-import type { LogicOperator, LogicOperatorValue, LogicProps, MatchingProps, MatchingTexts } from '@synerise/ds-logic';
-import type { StepCardProps } from '@synerise/ds-step-card';
-import type { DeepPartial } from '@synerise/ds-utils';
+import { ReactNode } from 'react';
+import { LogicOperator, LogicOperatorValue, LogicProps, MatchingProps, MatchingTexts } from '@synerise/ds-logic';
+import { StepCardProps } from '@synerise/ds-step-card';
+import { DeepPartial } from '@synerise/ds-utils';
 export type LogicType = {
     type: 'LOGIC';
     id: string;

package/dist/Filter.types.js

@@ -1 +1 @@
-export {};
+

package/dist/components/ExpressionItem/DraggableExpressionItem.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { ExpressionItemProps } from './ExpressionItem.types';
+import { default as React } from 'react';
+import { ExpressionItemProps } from './ExpressionItem.types';
 export declare const DraggableExpressionItem: ({ expressionsOrder, expression, index: sortableIndex, ...rest }: ExpressionItemProps & {
     index?: number;
 }) => React.JSX.Element;

package/dist/components/ExpressionItem/DraggableExpressionItem.js

@@ -1,34 +1,27 @@
-var _excluded = ["expressionsOrder", "expression", "index"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useEffect, useState } from 'react';
-import { arrayMove, useDndMonitor } from '@synerise/ds-sortable';
-import { ExpressionItem } from './ExpressionItem';
-export var DraggableExpressionItem = function DraggableExpressionItem(_ref) {
-  var expressionsOrder = _ref.expressionsOrder,
-    expression = _ref.expression,
-    sortableIndex = _ref.index,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useState = useState(expressionsOrder.indexOf(expression.id)),
-    dragIndex = _useState[0],
-    setDragIndex = _useState[1];
-  useEffect(function () {
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useDndMonitor, arrayMove } from "@synerise/ds-sortable";
+import { ExpressionItem } from "./ExpressionItem.js";
+const DraggableExpressionItem = ({
+  expressionsOrder,
+  expression,
+  index: sortableIndex,
+  ...rest
+}) => {
+  const [dragIndex, setDragIndex] = useState(expressionsOrder.indexOf(expression.id));
+  useEffect(() => {
     setDragIndex(expressionsOrder.indexOf(expression.id));
   }, [expressionsOrder, expression.id]);
   useDndMonitor({
-    onDragMove: function onDragMove(event) {
-      var _event$over;
-      if (((_event$over = event.over) == null || (_event$over = _event$over.data.current) == null || (_event$over = _event$over.sortable) == null ? void 0 : _event$over.index) !== undefined) {
-        var _event$active$data$cu, _event$over2;
-        var tempOrder = arrayMove(expressionsOrder, (_event$active$data$cu = event.active.data.current) == null || (_event$active$data$cu = _event$active$data$cu.sortable) == null ? void 0 : _event$active$data$cu.index, (_event$over2 = event.over) == null || (_event$over2 = _event$over2.data.current) == null || (_event$over2 = _event$over2.sortable) == null ? void 0 : _event$over2.index);
+    onDragMove: (event) => {
+      if (event.over?.data.current?.sortable?.index !== void 0) {
+        const tempOrder = arrayMove(expressionsOrder, event.active.data.current?.sortable?.index, event.over?.data.current?.sortable?.index);
         setDragIndex(tempOrder.indexOf(expression.id));
       }
     }
   });
-  return /*#__PURE__*/React.createElement(ExpressionItem, _extends({
-    isDragOverlay: sortableIndex === -1,
-    dragIndex: dragIndex,
-    expression: expression,
-    expressionsOrder: expressionsOrder
-  }, rest));
-};
+  return /* @__PURE__ */ jsx(ExpressionItem, { isDragOverlay: sortableIndex === -1, dragIndex, expression, expressionsOrder, ...rest });
+};
+export {
+  DraggableExpressionItem
+};

package/dist/components/ExpressionItem/ExpressionItem.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-import type { ExpressionItemProps } from './ExpressionItem.types';
+import { default as React } from 'react';
+import { ExpressionItemProps } from './ExpressionItem.types';
 export declare const ExpressionItem: ({ handleTransitionEnd, dragHandleProps, isDragged, isDragOverlay, expression, readOnly, handleMouseDown, isLast, stepProps, logicProps, wrapperRef, expressionIndex, dragIndex, expressionsOrder, }: ExpressionItemProps) => React.JSX.Element;

package/dist/components/ExpressionItem/ExpressionItem.js

@@ -1,46 +1,34 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
-import Logic from '@synerise/ds-logic';
-import StepCard from '@synerise/ds-step-card';
-import * as S from '../../Filter.styles';
-import { isStepType } from '../../utils';
-export var ExpressionItem = function ExpressionItem(_ref) {
-  var _expression$logic;
-  var handleTransitionEnd = _ref.handleTransitionEnd,
-    dragHandleProps = _ref.dragHandleProps,
-    isDragged = _ref.isDragged,
-    isDragOverlay = _ref.isDragOverlay,
-    expression = _ref.expression,
-    readOnly = _ref.readOnly,
-    handleMouseDown = _ref.handleMouseDown,
-    isLast = _ref.isLast,
-    stepProps = _ref.stepProps,
-    logicProps = _ref.logicProps,
-    wrapperRef = _ref.wrapperRef,
-    expressionIndex = _ref.expressionIndex,
-    dragIndex = _ref.dragIndex,
-    expressionsOrder = _ref.expressionsOrder;
-  var data = expression.data,
-    id = expression.id;
-  var shouldRenderLogic = isStepType(expression) && expression.logic && !isLast && !isDragged && !isDragOverlay && expressionIndex !== -1;
-  return /*#__PURE__*/React.createElement(S.ExpressionWrapper, {
-    "data-testid": "condition-step",
-    onTransitionEnd: handleTransitionEnd,
-    ref: wrapperRef,
-    key: id,
-    onMouseDown: handleMouseDown
-  }, /*#__PURE__*/React.createElement(StepCard, _extends({
-    expressionIndex: expressionIndex,
-    expressionCount: expressionsOrder.length
-  }, data, stepProps, {
-    readOnly: readOnly,
-    dragHandleProps: dragHandleProps,
-    isDragged: isDragged,
-    isDragOverlay: isDragOverlay,
-    dragIndex: dragIndex
-  })), shouldRenderLogic && /*#__PURE__*/React.createElement(S.LogicWrapper, {
-    "data-testid": "condition-logic"
-  }, /*#__PURE__*/React.createElement(Logic, _extends({}, logicProps, (_expression$logic = expression.logic) == null ? void 0 : _expression$logic.data, {
-    readOnly: readOnly
-  }))));
-};
+import { jsxs, jsx } from "react/jsx-runtime";
+import Logic from "@synerise/ds-logic";
+import StepCard from "@synerise/ds-step-card";
+import { ExpressionWrapper, LogicWrapper } from "../../Filter.styles.js";
+import { isStepType } from "../../utils.js";
+const ExpressionItem = ({
+  handleTransitionEnd,
+  dragHandleProps,
+  isDragged,
+  isDragOverlay,
+  expression,
+  readOnly,
+  handleMouseDown,
+  isLast,
+  stepProps,
+  logicProps,
+  wrapperRef,
+  expressionIndex,
+  dragIndex,
+  expressionsOrder
+}) => {
+  const {
+    data,
+    id
+  } = expression;
+  const shouldRenderLogic = isStepType(expression) && expression.logic && !isLast && !isDragged && !isDragOverlay && expressionIndex !== -1;
+  return /* @__PURE__ */ jsxs(ExpressionWrapper, { "data-testid": "condition-step", onTransitionEnd: handleTransitionEnd, ref: wrapperRef, onMouseDown: handleMouseDown, children: [
+    /* @__PURE__ */ jsx(StepCard, { expressionIndex, expressionCount: expressionsOrder.length, ...data, ...stepProps, readOnly, dragHandleProps, isDragged, isDragOverlay, dragIndex }),
+    shouldRenderLogic && /* @__PURE__ */ jsx(LogicWrapper, { "data-testid": "condition-logic", children: /* @__PURE__ */ jsx(Logic, { ...logicProps, ...expression.logic?.data, readOnly }) })
+  ] }, id);
+};
+export {
+  ExpressionItem
+};

package/dist/components/ExpressionItem/ExpressionItem.types.d.ts

@@ -1,8 +1,8 @@
-import type { MouseEventHandler, ReactNode, TransitionEventHandler } from 'react';
-import type { LogicProps } from '@synerise/ds-logic';
-import type { DragHandlePropType } from '@synerise/ds-sortable';
-import type { StepCardProps } from '@synerise/ds-step-card';
-import type { Expression } from '../../Filter.types';
+import { MouseEventHandler, ReactNode, TransitionEventHandler } from 'react';
+import { LogicProps } from '@synerise/ds-logic';
+import { DragHandlePropType } from '@synerise/ds-sortable';
+import { StepCardProps } from '@synerise/ds-step-card';
+import { Expression } from '../../Filter.types';
 export type ExpressionItemProps = {
     handleTransitionEnd: TransitionEventHandler;
     id: string | number;

package/dist/components/ExpressionItem/ExpressionItem.types.js

@@ -1 +1 @@
-export {};
+

package/dist/components/ExpressionItem/index.js

@@ -1,2 +1,6 @@
-export { DraggableExpressionItem } from './DraggableExpressionItem';
-export { ExpressionItem } from './ExpressionItem';
+import { DraggableExpressionItem } from "./DraggableExpressionItem.js";
+import { ExpressionItem } from "./ExpressionItem.js";
+export {
+  DraggableExpressionItem,
+  ExpressionItem
+};

package/dist/index.js

@@ -1 +1,4 @@
-export { default } from './Filter';
+import { default as default2 } from "./Filter.js";
+export {
+  default2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/dist/utils.d.ts

@@ -1,2 +1,2 @@
-import type { Expression, StepType } from './Filter.types';
+import { Expression, StepType } from './Filter.types';
 export declare const isStepType: (expression: Expression) => expression is StepType;

package/dist/utils.js

@@ -1,3 +1,6 @@
-export var isStepType = function isStepType(expression) {
-  return expression.type === 'STEP';
-};
+const isStepType = (expression) => {
+  return expression.type === "STEP";
+};
+export {
+  isStepType
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-filter",
-  "version": "1.2.40",
+  "version": "1.2.42",
   "description": "Filter UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,11 +35,11 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.16",
-    "@synerise/ds-logic": "^1.1.30",
-    "@synerise/ds-sortable": "^1.3.12",
-    "@synerise/ds-step-card": "^1.2.38",
-    "@synerise/ds-utils": "^1.6.0"
+    "@synerise/ds-button": "^1.5.18",
+    "@synerise/ds-logic": "^1.1.32",
+    "@synerise/ds-sortable": "^1.3.14",
+    "@synerise/ds-step-card": "^1.2.40",
+    "@synerise/ds-utils": "^1.7.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -47,5 +47,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }