@synerise/ds-condition 1.6.15 → 1.6.17

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.6.17](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@1.6.16...@synerise/ds-condition@1.6.17) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-condition
+
+## [1.6.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@1.6.15...@synerise/ds-condition@1.6.16) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-condition
+
 ## [1.6.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@1.6.14...@synerise/ds-condition@1.6.15) (2026-03-09)
 
 ### Bug Fixes

package/README.md

@@ -11,6 +11,8 @@ Condition UI Component
 npm i @synerise/ds-condition
 or
 yarn add @synerise/ds-condition
+or
+pnpm add @synerise/ds-condition
 ```
 
 ## Usage
@@ -109,8 +111,8 @@ import Condition from '@synerise/ds-condition'
 | removeCondition           | Callback called when user clicks on remove row of condtions   | (stepId: React.ReactText, conditionRowId: React.ReactText) => void                                | -                     |
 | steps                     | Array contains all steps of condition                         | ConditionStep[]                                                                                   | -                     |
 | texts                     | Translations object                                           | Texts                                                                                             | -                     |
-| updateStepName            | Callback called when user change the name of step             | (stepId: React.ReactText, value: string) => void                                                  | -                     |
-| addStep                   | Callback called when user clicks on add step button           | () => void                                                                                        | -                     |
+| onUpdateStepName          | Callback called when user change the name of step             | (stepId: React.ReactText, value: string) => void                                                  | -                     |
+| addStep                   | Callback called when user clicks on add step button           | () => ReactText \| void                                                                           | -                     |
 | duplicateStep             | Callback called when user clicks on duplicate step button     | (stepId: React.ReactText) => void                                                                 | -                     |
 | removeStep                | Callback called when user clicks on remove step button        | (stepId: React.ReactText) => void                                                                 | -                     |
 | onChangeOrder             | Callback called when user change order of steps               | (order: ConditionStep[]) => void                                                                  | -                     |
@@ -126,8 +128,21 @@ import Condition from '@synerise/ds-condition'
 | onUpdateStepName          | Callback called when user change the name of step condition   | (stepId: React.ReactText, value: string) => void                                                  | -                     |
 | onDeactivate              | Callback called when user blur on of the condition inputs     | (stepId: React.ReactText, conditionId: string) => void                                            | -                     |
 | getPopupContainerOverride | Popup container function for child tooltips and dropdowns     | (trigger: HTMLElement                                                                             | null) => HTMLElement; | -   |
-| defaultOpenedComponent    | Component which should be opened after render                 | 'subject' \ 'operator' \ 'factor' \ 'parameter' \ 'context'                                       | -                     |
+| autoOpenedComponent       | Component which should be opened after render                 | 'subject' \| 'operator' \| 'factor' \| 'parameter' \| 'context'                                  | -                     |
 | inputProps                | group of props from ds-factors types                          | InputProps                                                                                        | -                     |
+| readOnly                  | Disables all editing and hides add/remove/duplicate controls  | boolean                                                                                           | false                 |
+| singleStepCondition       | Hides step CRUD and drag handle                               | boolean                                                                                           | -                     |
+| showActionAttribute       | Renders action-attribute selector after subject/context       | boolean                                                                                           | -                     |
+| showEmptyConditionPlaceholder | Shows placeholder when no subject/context chosen          | boolean                                                                                           | false                 |
+| showSuffix                | Renders suffix text ("and") between condition rows            | boolean                                                                                           | -                     |
+| hoverDisabled             | Disables hover highlight on steps                             | boolean                                                                                           | -                     |
+| renderAddStep             | Replaces the default add step button with custom content      | () => ReactNode                                                                                   | -                     |
+| contextSelectorComponent  | Replaces default context selector                             | ComponentType\<CustomContextSelectorProps\>                                                       | -                     |
+| parameterSelectorComponent | Replaces default parameter value component                   | ComponentType\<FactorValueComponentProps\>                                                        | -                     |
+| factorParameterSelectorComponent | Replaces default factor parameter selector             | ComponentType\<FactorValueComponentProps\>                                                        | -                     |
+| actionAttributeParameterSelectorComponent | Replaces default action-attribute parameter selector | ComponentType\<FactorValueComponentProps\>                                              | -                     |
+| onChangeActionAttribute   | Callback when action attribute value changes                  | (stepId: React.ReactText, value: FactorValueType \| undefined) => void                            | -                     |
+| factorValueExtraProps     | Extra props forwarded to all factor value components          | FactorsProps['factorValueExtraProps']                                                             | -                     |
 
 ### ConditionStep
 
@@ -138,7 +153,8 @@ import Condition from '@synerise/ds-condition'
 | stepName                  | The name of step                                          | string                                                    | -                     |
 | subject                   | Subject options                                           | [SubjectProps](/docs/components/subject)                  | -                     |
 | context                   | ContextSelector options                                   | [ContextSelectorProps](/docs/components/context-selector) | -                     |
-| getPopupContainerOverride | Popup container function for child tooltips and dropdowns | (trigger: HTMLElement                                     | null) => HTMLElement; | -   |
+| actionAttribute           | Action-attribute selector options                         | Omit\<FactorsProps, 'onChangeValue' \| 'selectedFactorType' \| 'defaultFactorType'\> | - |
+| addConditionErrorText     | Error displayed below the "Add condition" button          | ReactNode                                                 | -                     |
 
 ### StepConditions
 
@@ -170,3 +186,7 @@ See [Condition.spec.tsx](./src/__specs__/Condition.spec.tsx) for code examples
 | moveTooltip               | Tooltip on move step button             | string | -       |
 | removeTooltip             | Tooltip on remove step button           | string | -       |
 | dropLabel                 | Label on drop zone                      | string | -       |
+| addFirstConditionRowButton | Label for the first "Add condition" button | string | -    |
+| conditionSuffix           | Text between condition rows ("and")     | string | -       |
+| stepNamePrefix            | Prefix before step index ("Step")       | string | -       |
+| emptyConditionLabel       | Placeholder label before event selected | string | -       |

package/dist/Condition.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import type { ConditionProps } from './Condition.types';
+import { default as React } from 'react';
+import { ConditionProps } from './Condition.types';
 declare const Condition: (props: ConditionProps) => React.JSX.Element;
 export default Condition;

package/dist/Condition.js

@@ -1,126 +1,102 @@
-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, useState } from 'react';
-import Button from '@synerise/ds-button';
-import Icon, { Add3M, DragHandleM } from '@synerise/ds-icon';
-import { DragOverlay, SortableContainer } from '@synerise/ds-sortable';
-import { usePrevious } from '@synerise/ds-utils';
-import * as S from './Condition.style';
-import { ConditionStep } from './ConditionStep';
-import { StepName } from './ConditionStep/StepName/StepName';
-import { ACTION_ATTRIBUTE, DEFAULT_CONDITION, DEFAULT_FIELD, DEFAULT_INPUT_PROPS, DEFAULT_STEP, FACTOR, OPERATOR, PARAMETER, SUBJECT } from './constants';
-import { useTranslations } from './hooks/useTranslations';
-var Condition = function Condition(props) {
-  var _draggedStep$context;
-  var steps = props.steps,
-    addCondition = props.addCondition,
-    removeCondition = props.removeCondition,
-    texts = props.texts,
-    duplicateStep = props.duplicateStep,
-    removeStep = props.removeStep,
-    addStep = props.addStep,
-    renderAddStep = props.renderAddStep,
-    onChangeOrder = props.onChangeOrder,
-    _props$minConditionsL = props.minConditionsLength,
-    minConditionsLength = _props$minConditionsL === void 0 ? 1 : _props$minConditionsL,
-    maxConditionsLength = props.maxConditionsLength,
-    autoClearCondition = props.autoClearCondition,
-    onChangeContext = props.onChangeContext,
-    onChangeSubject = props.onChangeSubject,
-    onChangeParameter = props.onChangeParameter,
-    onChangeOperator = props.onChangeOperator,
-    onChangeFactorType = props.onChangeFactorType,
-    onChangeFactorValue = props.onChangeFactorValue,
-    onUpdateStepName = props.onUpdateStepName,
-    getPopupContainerOverride = props.getPopupContainerOverride,
-    showSuffix = props.showSuffix,
-    hoverDisabled = props.hoverDisabled,
-    _props$autoOpenedComp = props.autoOpenedComponent,
-    autoOpenedComponent = _props$autoOpenedComp === void 0 ? DEFAULT_FIELD : _props$autoOpenedComp,
-    inputProps = props.inputProps,
-    onDeactivate = props.onDeactivate,
-    _props$readOnly = props.readOnly,
-    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
-    singleStepCondition = props.singleStepCondition,
-    showActionAttribute = props.showActionAttribute,
-    onChangeActionAttribute = props.onChangeActionAttribute,
-    contextSelectorComponent = props.contextSelectorComponent,
-    parameterSelectorComponent = props.parameterSelectorComponent,
-    factorParameterSelectorComponent = props.factorParameterSelectorComponent,
-    actionAttributeParameterSelectorComponent = props.actionAttributeParameterSelectorComponent,
-    _props$showEmptyCondi = props.showEmptyConditionPlaceholder,
-    showEmptyConditionPlaceholder = _props$showEmptyCondi === void 0 ? false : _props$showEmptyCondi,
-    factorValueExtraProps = props.factorValueExtraProps;
-  var allTexts = useTranslations(texts);
-  var _useState = useState(),
-    draggedStep = _useState[0],
-    setDraggedStep = _useState[1];
-  var _useState2 = useState(DEFAULT_CONDITION),
-    currentConditionId = _useState2[0],
-    setCurrentConditionId = _useState2[1];
-  var _useState3 = useState(DEFAULT_STEP),
-    currentStepId = _useState3[0],
-    setCurrentStepId = _useState3[1];
-  var _useState4 = useState(autoOpenedComponent),
-    currentField = _useState4[0],
-    setCurrentField = _useState4[1];
-  var prevSteps = usePrevious(steps);
-  useEffect(function () {
-    if (autoOpenedComponent && steps.length && steps[0].conditions[0].operator && steps[0].conditions[0].operator.value === undefined) {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useMemo } from "react";
+import Button from "@synerise/ds-button";
+import Icon, { DragHandleM, Add3M } from "@synerise/ds-icon";
+import { SortableContainer, DragOverlay } from "@synerise/ds-sortable";
+import { usePrevious } from "@synerise/ds-utils";
+import { Condition as Condition$1, StepWrapper, DragLabel, DragLabelPart, AddStepButton } from "./Condition.style.js";
+import { ConditionStep } from "./ConditionStep/ConditionStep.js";
+import { StepName } from "./ConditionStep/StepName/StepName.js";
+import { DEFAULT_FIELD, DEFAULT_CONDITION, DEFAULT_STEP, PARAMETER, OPERATOR, ACTION_ATTRIBUTE, FACTOR, SUBJECT, DEFAULT_INPUT_PROPS } from "./constants.js";
+import { useTranslations } from "./hooks/useTranslations.js";
+const Condition = (props) => {
+  const {
+    steps,
+    addCondition,
+    removeCondition,
+    texts,
+    duplicateStep,
+    removeStep,
+    addStep,
+    renderAddStep,
+    onChangeOrder,
+    minConditionsLength = 1,
+    maxConditionsLength,
+    autoClearCondition,
+    onChangeContext,
+    onChangeSubject,
+    onChangeParameter,
+    onChangeOperator,
+    onChangeFactorType,
+    onChangeFactorValue,
+    onUpdateStepName,
+    getPopupContainerOverride,
+    showSuffix,
+    hoverDisabled,
+    autoOpenedComponent = DEFAULT_FIELD,
+    inputProps,
+    onDeactivate,
+    readOnly = false,
+    singleStepCondition,
+    showActionAttribute,
+    onChangeActionAttribute,
+    contextSelectorComponent,
+    parameterSelectorComponent,
+    factorParameterSelectorComponent,
+    actionAttributeParameterSelectorComponent,
+    showEmptyConditionPlaceholder = false,
+    factorValueExtraProps
+  } = props;
+  const allTexts = useTranslations(texts);
+  const [draggedStep, setDraggedStep] = useState();
+  const [currentConditionId, setCurrentConditionId] = useState(DEFAULT_CONDITION);
+  const [currentStepId, setCurrentStepId] = useState(DEFAULT_STEP);
+  const [currentField, setCurrentField] = useState(autoOpenedComponent);
+  const prevSteps = usePrevious(steps);
+  useEffect(() => {
+    if (autoOpenedComponent && steps.length && steps[0].conditions[0].operator && steps[0].conditions[0].operator.value === void 0) {
       setCurrentStepId(steps[0].id);
       setCurrentConditionId(steps[0].conditions[0].id);
       setCurrentField(autoOpenedComponent);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  useEffect(function () {
-    var newConditionId = prevSteps && steps && steps.reduce(function (id, step) {
-      var result = id;
-      var conditions = step.conditions.map(function (condition) {
-        var _condition$parameter;
-        return {
-          id: condition.id,
-          value: (_condition$parameter = condition.parameter) == null ? void 0 : _condition$parameter.value
-        };
-      });
-      var oldStep = prevSteps.find(function (prevStep) {
-        return prevStep.id === step.id;
-      });
+  useEffect(() => {
+    const newConditionId = prevSteps && steps && steps.reduce((id, step) => {
+      let result = id;
+      const conditions = step.conditions.map((condition) => ({
+        id: condition.id,
+        value: condition.parameter?.value
+      }));
+      const oldStep = prevSteps.find((prevStep) => prevStep.id === step.id);
       if (oldStep) {
-        var oldConditions = oldStep.conditions.map(function (condition) {
-          return condition.id;
-        });
-        var newCondition = conditions.find(function (condition) {
-          return oldConditions.indexOf(condition.id) === -1;
-        });
+        const oldConditions = oldStep.conditions.map((condition) => condition.id);
+        const newCondition = conditions.find((condition) => oldConditions.indexOf(condition.id) === -1);
         result = newCondition && !newCondition.value ? newCondition.id : result;
       } else {
-        var _step$conditions$;
-        result = (_step$conditions$ = step.conditions[0]) == null ? void 0 : _step$conditions$.id;
+        result = step.conditions[0]?.id;
       }
       return result;
-    }, undefined);
+    }, void 0);
     if (newConditionId && newConditionId !== currentConditionId) {
       setCurrentConditionId(newConditionId);
     }
   }, [currentConditionId, currentField, prevSteps, steps]);
-  var clearConditionRow = useCallback(function (stepId) {
-    var step = steps.find(function (s) {
-      return s.id === stepId;
-    });
-    if (step === undefined || step.conditions.length === 0) {
+  const clearConditionRow = useCallback((stepId) => {
+    const step = steps.find((s) => s.id === stepId);
+    if (step === void 0 || step.conditions.length === 0) {
       return;
     }
     if (removeCondition && addCondition) {
-      step.conditions.forEach(function (condition, index) {
+      step.conditions.forEach((condition, index) => {
         if (index > 0) {
           removeCondition(step.id, condition.id);
         }
       });
     }
-    autoClearCondition && step.conditions.forEach(function (condition) {
-      onChangeFactorValue && onChangeFactorValue(step.id, condition.id, undefined);
-      onChangeOperator && onChangeOperator(step.id, condition.id, undefined);
-      onChangeParameter && onChangeParameter(step.id, condition.id, undefined);
+    autoClearCondition && step.conditions.forEach((condition) => {
+      onChangeFactorValue && onChangeFactorValue(step.id, condition.id, void 0);
+      onChangeOperator && onChangeOperator(step.id, condition.id, void 0);
+      onChangeParameter && onChangeParameter(step.id, condition.id, void 0);
     });
     setCurrentConditionId(step.conditions[0].id);
     setCurrentStepId(step.id);
@@ -130,7 +106,7 @@ var Condition = function Condition(props) {
       setCurrentField(OPERATOR);
     }
   }, [steps, removeCondition, addCondition, autoClearCondition, onChangeFactorValue, onChangeOperator, onChangeParameter]);
-  var selectSubject = useCallback(function (value, stepId) {
+  const selectSubject = useCallback((value, stepId) => {
     clearConditionRow(stepId);
     setCurrentStepId(stepId);
     if (showActionAttribute) {
@@ -140,7 +116,7 @@ var Condition = function Condition(props) {
     }
     onChangeSubject && onChangeSubject(stepId, value);
   }, [clearConditionRow, onChangeSubject, showActionAttribute]);
-  var selectContext = useCallback(function (value, stepId) {
+  const selectContext = useCallback((value, stepId) => {
     clearConditionRow(stepId);
     setCurrentStepId(stepId);
     if (showActionAttribute) {
@@ -150,58 +126,56 @@ var Condition = function Condition(props) {
     }
     onChangeContext && onChangeContext(stepId, value);
   }, [clearConditionRow, onChangeContext, showActionAttribute]);
-  var selectActionAttribute = useCallback(function (value, stepId) {
+  const selectActionAttribute = useCallback((value, stepId) => {
     clearConditionRow(stepId);
     setCurrentStepId(stepId);
     setCurrentField(PARAMETER);
     onChangeActionAttribute && onChangeActionAttribute(stepId, value);
   }, [onChangeActionAttribute, clearConditionRow]);
-  var selectParameter = useCallback(function (stepId, conditionId, value) {
+  const selectParameter = useCallback((stepId, conditionId, value) => {
     if (conditionId && onChangeParameter) {
-      autoClearCondition && onChangeOperator && onChangeOperator(stepId, conditionId, undefined);
-      autoClearCondition && onChangeFactorValue && onChangeFactorValue(stepId, conditionId, undefined);
+      autoClearCondition && onChangeOperator && onChangeOperator(stepId, conditionId, void 0);
+      autoClearCondition && onChangeFactorValue && onChangeFactorValue(stepId, conditionId, void 0);
       onChangeParameter(stepId, conditionId, value);
       setCurrentConditionId(conditionId);
       setCurrentStepId(stepId);
       setCurrentField(OPERATOR);
     }
   }, [autoClearCondition, onChangeFactorValue, onChangeOperator, onChangeParameter]);
-  var selectOperator = useCallback(function (stepId, conditionId, value) {
-    if (conditionId && onChangeOperator && value && 'groupId' in value) {
-      autoClearCondition && onChangeFactorValue && onChangeFactorValue(stepId, conditionId, undefined);
+  const selectOperator = useCallback((stepId, conditionId, value) => {
+    if (conditionId && onChangeOperator && value && "groupId" in value) {
+      autoClearCondition && onChangeFactorValue && onChangeFactorValue(stepId, conditionId, void 0);
       onChangeOperator(stepId, conditionId, value);
       setCurrentConditionId(conditionId);
       setCurrentStepId(stepId);
       setCurrentField(FACTOR);
     }
   }, [autoClearCondition, onChangeFactorValue, onChangeOperator]);
-  var setStepConditionFactorType = useCallback(function (stepId, conditionId, factorType) {
+  const setStepConditionFactorType = useCallback((stepId, conditionId, factorType) => {
     setCurrentConditionId(conditionId);
     setCurrentStepId(stepId);
     setCurrentField(FACTOR);
     onChangeFactorType && onChangeFactorType(stepId, conditionId, factorType);
   }, [onChangeFactorType]);
-  var setStepConditionFactorValue = useCallback(function (stepId, conditionId, value) {
+  const setStepConditionFactorValue = useCallback((stepId, conditionId, value) => {
     setCurrentField(DEFAULT_FIELD);
     setCurrentStepId(stepId);
     onChangeFactorValue && onChangeFactorValue(stepId, conditionId, value);
   }, [onChangeFactorValue]);
-  var draggableEnabled = useMemo(function () {
-    return onChangeOrder && steps.length > 1;
-  }, [steps, onChangeOrder]);
-  var handleAddStep = useCallback(function () {
-    var newStepId = addStep ? addStep() : undefined;
+  const draggableEnabled = useMemo(() => onChangeOrder && steps.length > 1, [steps, onChangeOrder]);
+  const handleAddStep = useCallback(() => {
+    const newStepId = addStep ? addStep() : void 0;
     if (newStepId) {
       setCurrentStepId(newStepId);
       setCurrentField(SUBJECT);
     }
   }, [addStep]);
-  var handleAddCondition = useMemo(function () {
+  const handleAddCondition = useMemo(() => {
     if (!addCondition) {
-      return undefined;
+      return void 0;
     }
-    return function (stepId) {
-      var newConditionId = addCondition ? addCondition(stepId) : undefined;
+    return (stepId) => {
+      const newConditionId = addCondition ? addCondition(stepId) : void 0;
       if (newConditionId) {
         setCurrentConditionId(newConditionId);
         setCurrentStepId(stepId);
@@ -209,96 +183,43 @@ var Condition = function Condition(props) {
       }
     };
   }, [addCondition]);
-  var handleClearActiveCondition = useCallback(function () {
+  const handleClearActiveCondition = useCallback(() => {
     onDeactivate && onDeactivate(currentStepId, currentConditionId);
     setCurrentConditionId(DEFAULT_CONDITION);
     setCurrentStepId(DEFAULT_STEP);
     setCurrentField(DEFAULT_FIELD);
   }, [currentConditionId, currentStepId, onDeactivate]);
-  return /*#__PURE__*/React.createElement(S.Condition, {
-    className: "ds-conditions",
-    "data-popup-container": true
-  }, /*#__PURE__*/React.createElement(SortableContainer, {
-    items: steps,
-    axis: "y",
-    onDragStart: function onDragStart(_ref) {
-      var active = _ref.active;
-      var stepIndex = steps.findIndex(function (item) {
-        return item.id === active.id;
-      });
-      setDraggedStep(_extends({}, steps[stepIndex], {
+  return /* @__PURE__ */ jsxs(Condition$1, { className: "ds-conditions", "data-popup-container": true, children: [
+    /* @__PURE__ */ jsxs(SortableContainer, { items: steps, axis: "y", onDragStart: ({
+      active
+    }) => {
+      const stepIndex = steps.findIndex((item) => item.id === active.id);
+      setDraggedStep({
+        ...steps[stepIndex],
         index: stepIndex
-      }));
-    },
-    onDragEnd: function onDragEnd() {
-      setDraggedStep(undefined);
-    },
-    onDragCancel: function onDragCancel() {
-      return setDraggedStep(undefined);
-    },
-    onOrderChange: onChangeOrder
-  }, steps.map(function (step, index) {
-    return /*#__PURE__*/React.createElement(ConditionStep, {
-      key: "step-id-" + step.id,
-      step: step,
-      isDragged: draggedStep && (draggedStep == null ? void 0 : draggedStep.id) === step.id,
-      isLast: index === steps.length - 1,
-      texts: allTexts,
-      index: index,
-      contextSelectorComponent: contextSelectorComponent,
-      parameterSelectorComponent: parameterSelectorComponent,
-      factorParameterSelectorComponent: factorParameterSelectorComponent,
-      actionAttributeParameterSelectorComponent: actionAttributeParameterSelectorComponent,
-      hasPriority: step.id === currentStepId,
-      getPopupContainerOverride: getPopupContainerOverride,
-      draggableEnabled: draggableEnabled,
-      selectOperator: selectOperator,
-      selectParameter: selectParameter,
-      selectContext: selectContext,
-      selectSubject: selectSubject,
-      selectActionAttribute: selectActionAttribute,
-      updateStepName: onUpdateStepName,
-      duplicateStep: duplicateStep,
-      removeStep: removeStep,
-      minConditionsLength: minConditionsLength,
-      maxConditionsLength: maxConditionsLength,
-      setStepConditionFactorType: setStepConditionFactorType,
-      setStepConditionFactorValue: setStepConditionFactorValue,
-      currentConditionId: currentConditionId,
-      currentStepId: currentStepId,
-      currentField: currentField,
-      removeCondition: removeCondition,
-      addCondition: handleAddCondition,
-      setCurrentField: setCurrentField,
-      setCurrentCondition: setCurrentConditionId,
-      setCurrentStep: setCurrentStepId,
-      onDeactivate: handleClearActiveCondition,
-      showSuffix: showSuffix,
-      hoverDisabled: hoverDisabled || currentStepId !== step.id && currentStepId !== undefined,
-      inputProps: _extends({}, DEFAULT_INPUT_PROPS, inputProps),
-      readOnly: readOnly,
-      singleStepCondition: singleStepCondition,
-      showActionAttribute: showActionAttribute,
-      showEmptyConditionPlaceholder: showEmptyConditionPlaceholder,
-      factorValueExtraProps: factorValueExtraProps
-    });
-  }), /*#__PURE__*/React.createElement(DragOverlay, {
-    dropAnimation: null
-  }, draggedStep && /*#__PURE__*/React.createElement(S.StepWrapper, {
-    isDragOverlay: true,
-    key: "dragOverlay"
-  }, /*#__PURE__*/React.createElement(S.DragLabel, null, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(DragHandleM, null)
-  }), onUpdateStepName && /*#__PURE__*/React.createElement(StepName, {
-    name: draggedStep.stepName,
-    index: draggedStep.index,
-    texts: allTexts
-  }), ((_draggedStep$context = draggedStep.context) == null ? void 0 : _draggedStep$context.selectedItem) && /*#__PURE__*/React.createElement(S.DragLabelPart, null, draggedStep.context.selectedItem.name))))), addStep && /*#__PURE__*/React.createElement(S.AddStepButton, null, /*#__PURE__*/React.createElement(Button, {
-    type: "ghost",
-    mode: "icon-label",
-    onClick: handleAddStep
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(Add3M, null)
-  }), allTexts.addStep)), !readOnly && renderAddStep && /*#__PURE__*/React.createElement(S.AddStepButton, null, renderAddStep()));
+      });
+    }, onDragEnd: () => {
+      setDraggedStep(void 0);
+    }, onDragCancel: () => setDraggedStep(void 0), onOrderChange: onChangeOrder, children: [
+      steps.map((step, index) => {
+        return /* @__PURE__ */ jsx(ConditionStep, { step, isDragged: draggedStep && draggedStep?.id === step.id, isLast: index === steps.length - 1, texts: allTexts, index, contextSelectorComponent, parameterSelectorComponent, factorParameterSelectorComponent, actionAttributeParameterSelectorComponent, hasPriority: step.id === currentStepId, getPopupContainerOverride, draggableEnabled, selectOperator, selectParameter, selectContext, selectSubject, selectActionAttribute, updateStepName: onUpdateStepName, duplicateStep, removeStep, minConditionsLength, maxConditionsLength, setStepConditionFactorType, setStepConditionFactorValue, currentConditionId, currentStepId, currentField, removeCondition, addCondition: handleAddCondition, setCurrentField, setCurrentCondition: setCurrentConditionId, setCurrentStep: setCurrentStepId, onDeactivate: handleClearActiveCondition, showSuffix, hoverDisabled: hoverDisabled || currentStepId !== step.id && currentStepId !== void 0, inputProps: {
+          ...DEFAULT_INPUT_PROPS,
+          ...inputProps
+        }, readOnly, singleStepCondition, showActionAttribute, showEmptyConditionPlaceholder, factorValueExtraProps }, `step-id-${step.id}`);
+      }),
+      /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: draggedStep && /* @__PURE__ */ jsx(StepWrapper, { isDragOverlay: true, children: /* @__PURE__ */ jsxs(DragLabel, { children: [
+        /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(DragHandleM, {}) }),
+        onUpdateStepName && /* @__PURE__ */ jsx(StepName, { name: draggedStep.stepName, index: draggedStep.index, texts: allTexts }),
+        draggedStep.context?.selectedItem && /* @__PURE__ */ jsx(DragLabelPart, { children: draggedStep.context.selectedItem.name })
+      ] }) }, "dragOverlay") })
+    ] }),
+    addStep && /* @__PURE__ */ jsx(AddStepButton, { children: /* @__PURE__ */ jsxs(Button, { type: "ghost", mode: "icon-label", onClick: handleAddStep, children: [
+      /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Add3M, {}) }),
+      allTexts.addStep
+    ] }) }),
+    !readOnly && renderAddStep && /* @__PURE__ */ jsx(AddStepButton, { children: renderAddStep() })
+  ] });
+};
+export {
+  Condition as default
 };
-export default Condition;

package/dist/Condition.style.d.ts

@@ -1,61 +1,61 @@
-export declare const ErrorWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DragIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@synerise/ds-icon").BaseIconProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("@synerise/ds-icon").BaseIconProps> & import("@synerise/ds-utils").DataAttributes & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const StepConditionCruds: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-cruds/dist/Cruds.types").CrudsProps> & import("@synerise/ds-cruds/dist/Cruds.types").CrudsSubComponents, any, {}, never>;
-export declare const StepConditions: import("styled-components").StyledComponent<"div", any, {
+export declare const ErrorWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DragIcon: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<import('@synerise/ds-icon').BaseIconProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, keyof import('@synerise/ds-icon').BaseIconProps> & import('@synerise/ds-utils').DataAttributes & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StepConditionCruds: import('styled-components').StyledComponent<import('react').FC<import('@synerise/ds-cruds/dist/Cruds.types').CrudsProps> & import('@synerise/ds-cruds/dist/Cruds.types').CrudsSubComponents, any, {}, never>;
+export declare const StepConditions: import('styled-components').StyledComponent<"div", any, {
     withCruds?: boolean;
 }, never>;
-export declare const StepName: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StepIndexWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Condition: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ConditionStepWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const And: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StepCruds: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LeftSide: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StepHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DraggedLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Step: import("styled-components").StyledComponent<"div", any, {
+export declare const StepName: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const StepIndexWrapper: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const Condition: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ConditionStepWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const And: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const StepCruds: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const LeftSide: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const StepHeader: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DraggedLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const Step: import('styled-components').StyledComponent<"div", any, {
     active: boolean;
     showSuffix?: boolean;
     hoverDisabled?: boolean;
     singleStepCondition?: boolean;
 }, never>;
-export declare const DropLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DragLabelPart: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DragLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StepWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const DropLabel: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DragLabelPart: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DragLabel: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const StepWrapper: import('styled-components').StyledComponent<"div", any, {
     isDragOverlay?: boolean;
     isDragged?: boolean;
 }, never>;
-export declare const Subject: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const RemoveIconWrapper: import("styled-components").StyledComponent<"span", any, {
+export declare const Subject: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const RemoveIconWrapper: import('styled-components').StyledComponent<"span", any, {
     'data-testid': string;
 }, "data-testid">;
-export declare const ConditionWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const ConditionWrapper: import('styled-components').StyledComponent<"div", any, {
     withRemoveTrigger?: boolean;
 }, never>;
-export declare const ConditionParameterWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const ConditionParameterWrapper: import('styled-components').StyledComponent<"div", any, {
     withRemoveTrigger?: boolean;
 }, never>;
-export declare const ConditionOperatorWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const ConditionOperatorWrapper: import('styled-components').StyledComponent<"div", any, {
     withRemoveTrigger?: boolean;
 }, never>;
-export declare const ConditionFactorWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const ConditionFactorWrapper: import('styled-components').StyledComponent<"div", any, {
     withRemoveTrigger?: boolean;
 }, never>;
-export declare const ConditionRows: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ConditionRowDefinition: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ConditionRowLine: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AddConditionRow: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ConditionConnections: import("styled-components").StyledComponent<"span", any, {
+export declare const ConditionRows: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ConditionRowDefinition: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ConditionRowLine: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const AddConditionRow: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ConditionConnections: import('styled-components').StyledComponent<"span", any, {
     first?: boolean;
     last?: boolean;
     readOnly?: boolean;
 }, never>;
-export declare const ConditionRow: import("styled-components").StyledComponent<"div", any, {
+export declare const ConditionRow: import('styled-components').StyledComponent<"div", any, {
     withError: boolean;
     index: number;
     onlyChild?: boolean;
     last?: boolean;
 }, never>;
-export declare const AddStepButton: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ActionAttribute: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AddStepButton: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ActionAttribute: import('styled-components').StyledComponent<"div", any, {}, never>;