@synerise/ds-condition 0.9.1 → 0.11.0

package/CHANGELOG.md

@@ -3,6 +3,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.11.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.10.2...@synerise/ds-condition@0.11.0) (2021-11-04)
+
+
+### Features
+
+* **condition:** add custom factor component ([d1205bc](https://github.com/Synerise/synerise-design/commit/d1205bce20f4154e7596bcd33ad127557bc0ad99))
+
+
+
+
+
+## [0.10.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.10.0...@synerise/ds-condition@0.10.2) (2021-10-26)
+
+
+### Bug Fixes
+
+* **condition:** fixes add condition button ([2a06856](https://github.com/Synerise/synerise-design/commit/2a06856cf8759db1459467f95fcd4dd12af53e1c))
+
+
+
+
+
+## [0.10.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.10.0...@synerise/ds-condition@0.10.1) (2021-10-19)
+
+
+### Bug Fixes
+
+* **condition:** fixes add condition button ([2a06856](https://github.com/Synerise/synerise-design/commit/2a06856cf8759db1459467f95fcd4dd12af53e1c))
+
+
+
+
+
+# [0.10.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.9.1...@synerise/ds-condition@0.10.0) (2021-10-19)
+
+
+### Bug Fixes
+
+* **condition:** performance improvements ([c3f54cf](https://github.com/Synerise/synerise-design/commit/c3f54cffcf2cfcb58da8686b88800fffed5e26ce))
+
+
+### Features
+
+* **condition:** performance improvements ([128f4e3](https://github.com/Synerise/synerise-design/commit/128f4e3f608fe8b7d3429ca73da3a338285f9e7f))
+* **condition:** uses current stepId for autofocus ([739d271](https://github.com/Synerise/synerise-design/commit/739d271b616c779c8877574ad239416a0739c621))
+* **context-selector:** optimization improvements ([28feae6](https://github.com/Synerise/synerise-design/commit/28feae6ebc0e07c37c6c83f5197e80ea7c59347f))
+
+
+
+
+
 ## [0.9.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.9.0...@synerise/ds-condition@0.9.1) (2021-10-05)
 
 **Note:** Version bump only for package @synerise/ds-condition

package/README.md

@@ -25,12 +25,19 @@ import Condition from '@synerise/ds-condition'
     addCondition={() => {}}
     removeCondition={(stepId, conditionId) => {}}
     updateStepName={(stepId, name) => {}}
+    minConditionsLength={1}
+    maxConditionsLength={1}
+    onChangeContext={(stepId, contextItem) => {}}
+    onChangeSubject={(stepId, subjectItem) => {}}
+    onChangeParameter={(stepId, conditionId, value) => {}}
+    onChangeOperator={(stepId, conditionId, operator) => {}}
+    onChangeFactorValue={(stepId, conditionId, factorValue) => {}
+    onChangeFactorType={(stepId, conditionId, factorType) => {}
     steps={
       [{
         id: 1,
         stepName: 'Step #1',
         subject: {
-          onSelectItem: (item) => setStepSubject(step.id, item),
           type: 'event',
           placeholder: 'Choose event',
           showPreview: false,
@@ -41,7 +48,6 @@ import Condition from '@synerise/ds-condition'
         },
         context: {
           texts: CONTEXT_TEXTS,
-          onSelectItem: item => setStepSubject(step.id, item),
           selectedItem: step.subject.selectedItem,
           items: CONTEXT_ITEMS,
           groups: CONTEXT_GROUPS,
@@ -53,7 +59,6 @@ import Condition from '@synerise/ds-condition'
             selectedFactorType: 'parameter',
             defaultFactorType: 'parameter',
             setSelectedFactorType: () => {},
-            onChangeValue: (value) => {},
             value: undefined,
             parameters: {
               buttonLabel: 'Parameter',
@@ -65,7 +70,6 @@ import Condition from '@synerise/ds-condition'
             texts: FACTORS_TEXTS,
           },
           operator: {
-            onChange: (value) => {},
             value: value,
             items: OPERATORS_ITEMS,
             groups: OPERATORS_GROUPS,
@@ -74,8 +78,6 @@ import Condition from '@synerise/ds-condition'
           factor: {
             selectedFactorType: 'text',
             defaultFactorType: 'text',
-            setSelectedFactorType: (factorType) => {},
-            onChangeValue: (value) => {},
             textType: 'default',
             value: condition.factor.value,
             formulaEditor: <div>Formula editor</div>,
@@ -99,18 +101,27 @@ import Condition from '@synerise/ds-condition'
 
 ## API
 
-| Property           | Description                                                         | Type                                                               | Default |
-| ---                | ---                                                                 | ---                                                                | ---     |
-| addCondition       | Callback called when user adds new row of conditions                | (stepId: React.ReactText) => void                                  | -       |
-| 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                                                         | -       |
-| 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                                   | -       |
-| autoClearCondition | Automatically fires clearing values of dependent elements           | Boolean                                                            | false   |
+| Property            | Description                                                   | Type                                                                                              | Default |
+| ---                 | ---                                                           | ---                                                                                               | ---     |
+| addCondition        | Callback called when user adds new row of conditions          | (stepId: React.ReactText) => void                                                                 | -       |
+| 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                                                                                        | -       |
+| 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                                                                  | -       |
+| autoClearCondition  | Automatically fires clearing values of dependent elements     | Boolean                                                                                           | false   |
+| minConditionsLength | Minimal length of conditions in step                          | number                                                                                            | -       |
+| maxConditionsLength | Maximal length of conditions in step                          | number \ undefined                                                                                | -       |
+| onChangeContext     | Callback called when user change value of step context        | (stepId: React.ReactText, value: ContextItem \ ContextGroup \ undefined) => void                  | -       |
+| onChangeSubject     | Callback called when user change value of step subject        | (stepId: React.ReactText, value: SubjectItem \ undefined) => void                                 | -       |
+| onChangeParameter   | Callback called when user change value of condition parameter | (stepId: React.ReactText, conditionId: React.ReactText, value: ParameterValue)                    | -       |
+| onChangeOperator    | Callback called when user change value of condition operator  | (stepId: React.ReactText, conditionId: React.ReactText, value: OperatorsItem \ undefined) => void | -       |
+| onChangeFactorValue | Callback called when user change value of condition factor    | (stepId: React.ReactText, conditionId: React.ReactText, value: OperatorsType \ undefined) => void | -       |
+| onChangeFactorType  | Callback called when user change type of condition factor     | (stepId: React.ReactText, conditionId: React.ReactText, value: FactorType \ undefined) => void    | -       |
+| onUpdateStepName    | Callback called when user change the name of step condition   | (stepId: React.ReactText, value: string) => void                                                  | -       |
 
 ### ConditionStep
 

package/dist/Condition.d.ts

@@ -1,4 +1,7 @@
 import * as React from 'react';
-import { ConditionProps } from './Condition.types';
-declare const Condition: React.FC<ConditionProps>;
+import * as T from './Condition.types';
+export declare const OPERATOR = "operator";
+export declare const PARAMETER = "parameter";
+export declare const FACTOR = "factor";
+declare const Condition: React.FC<T.ConditionProps>;
 export default Condition;

package/dist/Condition.js

@@ -21,25 +21,19 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import * as React from 'react';
 import { useIntl } from 'react-intl';
 import { ReactSortable } from 'react-sortablejs';
-import InlineEdit from '@synerise/ds-inline-edit';
-import { Add2M, Add3M, CloseS, DragHandleM } from '@synerise/ds-icon/dist/icons';
+import { Add3M } from '@synerise/ds-icon/dist/icons';
 import Icon from '@synerise/ds-icon';
 import Button from '@synerise/ds-button';
-import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
-import Tooltip from '@synerise/ds-tooltip';
 import { NOOP } from '@synerise/ds-utils';
-import Subject from '@synerise/ds-subject';
-import Factors from '@synerise/ds-factors';
-import Operators from '@synerise/ds-operators';
-import ContextSelector from '@synerise/ds-context-selector';
-import Cruds from '@synerise/ds-cruds';
 import usePrevious from '@synerise/ds-utils/dist/usePrevious/usePrevious';
+import { ConditionStep } from './ConditionStep';
 import * as S from './Condition.style';
 var DEFAULT_FIELD = '';
 var DEFAULT_CONDITION = '';
-var OPERATOR = 'operator';
-var PARAMETER = 'parameter';
-var FACTOR = 'factor';
+var DEFAULT_STEP = '';
+export var OPERATOR = 'operator';
+export var PARAMETER = 'parameter';
+export var FACTOR = 'factor';
 var SORTABLE_CONFIG = {
   ghostClass: 'steps-list-ghost-element',
   className: 'steps-list',
@@ -48,60 +42,35 @@ var SORTABLE_CONFIG = {
   forceFallback: true
 };
 
-var Condition = function Condition(_ref) {
-  var steps = _ref.steps,
-      addCondition = _ref.addCondition,
-      removeCondition = _ref.removeCondition,
-      updateStepName = _ref.updateStepName,
-      texts = _ref.texts,
-      duplicateStep = _ref.duplicateStep,
-      removeStep = _ref.removeStep,
-      addStep = _ref.addStep,
-      onChangeOrder = _ref.onChangeOrder,
-      _ref$minConditionsLen = _ref.minConditionsLength,
-      minConditionsLength = _ref$minConditionsLen === void 0 ? 1 : _ref$minConditionsLen,
-      autoClearCondition = _ref.autoClearCondition;
+var Condition = function Condition(props) {
+  var steps = props.steps,
+      addCondition = props.addCondition,
+      removeCondition = props.removeCondition,
+      texts = props.texts,
+      duplicateStep = props.duplicateStep,
+      removeStep = props.removeStep,
+      addStep = props.addStep,
+      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;
 
   var _useIntl = useIntl(),
       formatMessage = _useIntl.formatMessage;
 
   var text = React.useMemo(function () {
     return _objectSpread({
-      stepNamePlaceholder: formatMessage({
-        id: 'DS.CONDITION.STEP_NAME-PLACEHOLDER',
-        defaultMessage: 'Step name'
-      }),
-      removeConditionRowTooltip: formatMessage({
-        id: 'DS.CONDITION.REMOVE-CONDITION-ROW-TOOLTIP',
-        defaultMessage: 'Delete'
-      }),
-      addConditionRowButton: formatMessage({
-        id: 'DS.CONDITION.ADD-CONDITION-ROW-BUTTON',
-        defaultMessage: 'Add condition'
-      }),
-      addFirstConditionRowButton: formatMessage({
-        id: 'DS.CONDITION.ADD-FIRST-CONDITION-ROW-BUTTON',
-        defaultMessage: 'Add condition'
-      }),
       addStep: formatMessage({
         id: 'DS.CONDITION.ADD-STEP',
         defaultMessage: 'Add step'
-      }),
-      dropLabel: formatMessage({
-        id: 'DS.CONDITION.DROP-LABEL',
-        defaultMessage: 'Drop me here'
-      }),
-      moveTooltip: formatMessage({
-        id: 'DS.CONDITION.MOVE-TOOLTIP',
-        defaultMessage: 'Move'
-      }),
-      duplicateTooltip: formatMessage({
-        id: 'DS.CONDITION.DUPLICATE-TOOLTIP',
-        defaultMessage: 'Duplicate'
-      }),
-      removeTooltip: formatMessage({
-        id: 'DS.CONDITION.REMOVE-TOOLTIP',
-        defaultMessage: 'Delete'
       })
     }, texts);
   }, [texts, formatMessage]);
@@ -111,10 +80,15 @@ var Condition = function Condition(_ref) {
       currentConditionId = _React$useState2[0],
       setCurrentConditionId = _React$useState2[1];
 
-  var _React$useState3 = React.useState(DEFAULT_FIELD),
+  var _React$useState3 = React.useState(DEFAULT_STEP),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      currentField = _React$useState4[0],
-      setCurrentField = _React$useState4[1];
+      currentStepId = _React$useState4[0],
+      setCurrentStepId = _React$useState4[1];
+
+  var _React$useState5 = React.useState(DEFAULT_FIELD),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      currentField = _React$useState6[0],
+      setCurrentField = _React$useState6[1];
 
   var prevSteps = usePrevious(steps);
   React.useEffect(function () {
@@ -151,11 +125,13 @@ var Condition = function Condition(_ref) {
 
     if (newConditionId && newConditionId !== currentConditionId) {
       setCurrentConditionId(newConditionId);
-      setCurrentField(PARAMETER);
     }
   }, [currentConditionId, currentField, prevSteps, steps]);
-  var clearConditionRow = React.useCallback(function (step) {
-    if (step.conditions.length === 0) return;
+  var clearConditionRow = React.useCallback(function (stepId) {
+    var step = steps.find(function (s) {
+      return s.id === stepId;
+    });
+    if (step === undefined || step.conditions.length === 0) return;
 
     if (removeCondition && addCondition) {
       step.conditions.forEach(function (condition, index) {
@@ -166,158 +142,100 @@ var Condition = function Condition(_ref) {
     }
 
     autoClearCondition && step.conditions.forEach(function (condition) {
-      condition.factor && condition.factor.onChangeValue(undefined);
-      condition.operator && condition.operator.onChange(undefined);
-      condition.parameter && condition.parameter.onChangeValue(undefined);
+      onChangeFactorValue && onChangeFactorValue(step.id, condition.id, undefined);
+      onChangeOperator && onChangeOperator(step.id, condition.id, undefined);
+      onChangeParameter && onChangeParameter(step.id, condition.id, undefined);
     });
     setCurrentConditionId(step.conditions[0].id);
+    setCurrentStepId(step.id);
 
     if (step.conditions[0].parameter) {
       setCurrentField(PARAMETER);
     } else if (step.conditions[0].operator) {
       setCurrentField(OPERATOR);
     }
-  }, [removeCondition, addCondition, autoClearCondition]);
-  var selectSubject = React.useCallback(function (value, step) {
-    clearConditionRow(step);
-    step.subject && step.subject.onSelectItem(value);
-  }, [clearConditionRow]);
-  var selectContext = React.useCallback(function (value, step) {
-    clearConditionRow(step);
-    step.context && step.context.onSelectItem(value);
-  }, [clearConditionRow]);
-  var selectParameter = React.useCallback(function (condition, value) {
-    if (condition.id && condition.parameter) {
-      autoClearCondition && condition.operator && condition.operator.onChange(undefined);
-      autoClearCondition && condition.factor && condition.factor.onChangeValue(undefined);
-      condition.parameter.onChangeValue(value);
-      setCurrentConditionId(condition.id);
+  }, [steps, removeCondition, addCondition, autoClearCondition, onChangeFactorValue, onChangeOperator, onChangeParameter]);
+  var selectSubject = React.useCallback(function (value, stepId) {
+    clearConditionRow(stepId);
+    setCurrentStepId(stepId);
+    onChangeSubject && onChangeSubject(stepId, value);
+  }, [clearConditionRow, onChangeSubject]);
+  var selectContext = React.useCallback(function (value, stepId) {
+    clearConditionRow(stepId);
+    setCurrentStepId(stepId);
+    onChangeContext && onChangeContext(stepId, value);
+  }, [clearConditionRow, onChangeContext]);
+  var selectParameter = React.useCallback(function (stepId, conditionId, value) {
+    if (conditionId && onChangeParameter) {
+      autoClearCondition && onChangeOperator && onChangeOperator(stepId, conditionId, undefined);
+      autoClearCondition && onChangeFactorValue && onChangeFactorValue(stepId, conditionId, undefined);
+      onChangeParameter(stepId, conditionId, value);
+      setCurrentConditionId(conditionId);
+      setCurrentStepId(stepId);
       setCurrentField(OPERATOR);
     }
-  }, [autoClearCondition]);
-  var selectOperator = React.useCallback(function (condition, value) {
-    if (condition.id && condition.operator) {
-      autoClearCondition && condition.factor && condition.factor.onChangeValue(undefined);
-      condition.operator.onChange(value);
-      setCurrentConditionId(condition.id);
+  }, [autoClearCondition, onChangeFactorValue, onChangeOperator, onChangeParameter]);
+  var selectOperator = React.useCallback(function (stepId, conditionId, value) {
+    if (conditionId && onChangeOperator) {
+      autoClearCondition && onChangeFactorValue && onChangeFactorValue(stepId, conditionId, undefined);
+      onChangeOperator(stepId, conditionId, value);
+      setCurrentConditionId(conditionId);
+      setCurrentStepId(stepId);
       setCurrentField(FACTOR);
     }
-  }, [autoClearCondition]);
-  var setStepConditionFactorType = React.useCallback(function (step, condition, factorType) {
-    setCurrentConditionId(condition.id);
+  }, [autoClearCondition, onChangeFactorValue, onChangeOperator]);
+  var setStepConditionFactorType = React.useCallback(function (stepId, conditionId, factorType) {
+    setCurrentConditionId(conditionId);
+    setCurrentStepId(stepId);
     setCurrentField(FACTOR);
-    condition.factor && condition.factor.setSelectedFactorType(factorType);
-  }, []);
-  var setStepConditionFactorValue = React.useCallback(function (step, condition, value) {
+    onChangeFactorType && onChangeFactorType(stepId, conditionId, factorType);
+  }, [onChangeFactorType]);
+  var setStepConditionFactorValue = React.useCallback(function (stepId, conditionId, value) {
     setCurrentField(DEFAULT_FIELD);
-    condition.factor && condition.factor.onChangeValue(value);
-  }, []);
+    setCurrentStepId(stepId);
+    onChangeFactorValue && onChangeFactorValue(stepId, conditionId, value);
+  }, [onChangeFactorValue]);
   var draggableEnabled = React.useMemo(function () {
     return onChangeOrder && steps.length > 1;
   }, [steps, onChangeOrder]);
-  return React.createElement(S.Condition, {
-    className: "ds-conditions"
-  }, React.createElement(ReactSortable, _extends({}, SORTABLE_CONFIG, {
-    list: steps,
-    setList: onChangeOrder || NOOP
-  }), steps.map(function (step, index) {
-    var _step$subject, _step$context;
-
-    return React.createElement(S.Step, {
-      key: step.id,
-      withStepName: step.stepName !== undefined,
-      "data-dropLabel": text.dropLabel
-    }, React.createElement(S.StepHeader, null, step.stepName !== undefined && React.createElement(S.StepName, null, "".concat(index + 1, "."), ' ', React.createElement(InlineEdit, {
-      size: "small",
-      input: {
-        value: step.stepName,
-        name: "condition-step-name-".concat(step.id),
-        placeholder: text.stepNamePlaceholder,
-        onChange: function onChange(event) {
-          return updateStepName && updateStepName(step.id, event.target.value);
-        }
-      }
-    })), React.createElement(S.StepCruds, null, draggableEnabled && React.createElement(Cruds.CustomAction, {
-      icon: React.createElement(DragHandleM, null),
-      title: text.moveTooltip,
-      onClick: NOOP,
-      className: "step-drag-handler"
-    }), React.createElement(Cruds, {
-      onDuplicate: duplicateStep ? function () {
-        return duplicateStep(step.id);
-      } : undefined,
-      onDelete: removeStep ? function () {
-        return removeStep(step.id);
-      } : undefined,
-      duplicateTooltip: text.duplicateTooltip,
-      deleteTooltip: text.removeTooltip
-    }))), React.createElement(S.StepConditions, null, React.createElement(S.Subject, null, step.subject && React.createElement(Subject, _extends({}, step.subject, {
-      onSelectItem: function onSelectItem(value) {
-        return selectSubject(value, step);
-      }
-    })), step.context && React.createElement(ContextSelector, _extends({}, step.context, {
-      onSelectItem: function onSelectItem(value) {
-        return selectContext(value, step);
-      }
-    }))), React.createElement(S.ConditionRows, null, step.conditions.length > 0 && step.conditions.map(function (condition, conditionIndex) {
-      var _condition$parameter2, _condition$operator;
-
-      return React.createElement(S.ConditionRow, {
-        key: "condition-row-".concat(condition.id)
-      }, React.createElement(S.ConditionConnections, {
-        first: conditionIndex === 0,
-        last: conditionIndex + 1 === step.conditions.length && !addCondition
-      }), React.createElement(S.ConditionWrapper, null, condition.parameter && React.createElement(Factors, _extends({}, condition.parameter, {
-        onChangeValue: function onChangeValue(value) {
-          return selectParameter(condition, value);
-        },
-        opened: condition.id === currentConditionId && currentField === PARAMETER
-      }))), (!(condition === null || condition === void 0 ? void 0 : condition.parameter) || (condition === null || condition === void 0 ? void 0 : (_condition$parameter2 = condition.parameter) === null || _condition$parameter2 === void 0 ? void 0 : _condition$parameter2.value)) && condition.operator && React.createElement(S.ConditionWrapper, null, React.createElement(Operators, _extends({}, condition.operator, {
-        onChange: function onChange(value) {
-          return selectOperator(condition, value);
-        },
-        opened: condition.id === currentConditionId && currentField === OPERATOR
-      }))), (condition === null || condition === void 0 ? void 0 : (_condition$operator = condition.operator) === null || _condition$operator === void 0 ? void 0 : _condition$operator.value) && React.createElement(S.ConditionWrapper, null, condition.factor && React.createElement(Factors, _extends({}, condition.factor, {
-        setSelectedFactorType: function setSelectedFactorType(factorType) {
-          return setStepConditionFactorType(step, condition, factorType);
-        },
-        onChangeValue: function onChangeValue(value) {
-          return setStepConditionFactorValue(step, condition, value);
-        },
-        factorKey: condition.id,
-        opened: condition.id === currentConditionId && currentField === FACTOR
-      }))), removeCondition && step.conditions.length > minConditionsLength && React.createElement(S.RemoveIconWrapper, {
-        onClick: function onClick() {
-          return removeCondition(step.id, condition.id);
-        },
-        className: "ds-conditions-remove-row"
-      }, React.createElement(Tooltip, {
-        title: text.removeConditionRowTooltip,
-        trigger: ['hover']
-      }, React.createElement(Icon, {
-        component: React.createElement(CloseS, null),
-        color: theme.palette['red-600']
-      }))));
-    }), addCondition && React.createElement(S.AddConditionRow, null, React.createElement(S.ConditionConnections, {
-      last: true,
-      first: step.conditions.length === 0
-    }), React.createElement(Button, {
-      type: "ghost",
+  return React.useMemo(function () {
+    return React.createElement(S.Condition, {
+      className: "ds-conditions"
+    }, React.createElement(ReactSortable, _extends({}, SORTABLE_CONFIG, {
+      list: steps,
+      setList: onChangeOrder || NOOP
+    }), steps.map(function (step, index) {
+      return React.createElement(ConditionStep, {
+        key: "step-id-".concat(step.id),
+        step: step,
+        texts: texts,
+        index: index,
+        draggableEnabled: draggableEnabled,
+        selectOperator: selectOperator,
+        selectParameter: selectParameter,
+        selectContext: selectContext,
+        selectSubject: selectSubject,
+        updateStepName: onUpdateStepName,
+        duplicateStep: duplicateStep,
+        removeStep: removeStep,
+        minConditionsLength: minConditionsLength,
+        maxConditionsLength: maxConditionsLength,
+        setStepConditionFactorType: setStepConditionFactorType,
+        setStepConditionFactorValue: setStepConditionFactorValue,
+        currentConditionId: currentConditionId,
+        currentStepId: currentStepId,
+        currentField: currentField,
+        removeCondition: removeCondition,
+        addCondition: addCondition
+      });
+    })), addStep && React.createElement(Button, {
+      type: "ghost-primary",
       mode: "icon-label",
-      onClick: function onClick() {
-        addCondition(step.id);
-      },
-      disabled: !(Boolean((_step$subject = step.subject) === null || _step$subject === void 0 ? void 0 : _step$subject.selectedItem) || Boolean((_step$context = step.context) === null || _step$context === void 0 ? void 0 : _step$context.selectedItem))
+      onClick: addStep
     }, React.createElement(Icon, {
-      component: React.createElement(Add2M, null)
-    }), step.conditions.length > 0 ? text.addConditionRowButton : text.addFirstConditionRowButton)))));
-  })), addStep && React.createElement(Button, {
-    type: "ghost-primary",
-    mode: "icon-label",
-    onClick: addStep
-  }, React.createElement(Icon, {
-    component: React.createElement(Add3M, null)
-  }), text.addStep));
+      component: React.createElement(Add3M, null)
+    }), text.addStep));
+  }, [steps, onChangeOrder, addStep, text.addStep, texts, draggableEnabled, selectOperator, selectParameter, selectContext, selectSubject, onUpdateStepName, duplicateStep, removeStep, minConditionsLength, maxConditionsLength, setStepConditionFactorType, setStepConditionFactorValue, currentConditionId, currentStepId, currentField, removeCondition, addCondition]);
 };
 
 export default Condition;

package/dist/Condition.style.d.ts

@@ -1,16 +1,18 @@
-export declare const StepConditions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StepConditions: import("styled-components").StyledComponent<"div", any, {
+    withoutStepName: boolean;
+}, never>;
 export declare const StepName: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Condition: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StepCruds: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StepHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Step: import("styled-components").StyledComponent<"div", any, {
-    withStepName: boolean;
-}, never>;
+export declare const Step: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ConditionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Subject: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const RemoveIconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const ConditionRows: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ConditionRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ConditionRow: import("styled-components").StyledComponent<"div", any, {
+    index: number;
+}, never>;
 export declare const AddConditionRow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ConditionConnections: import("styled-components").StyledComponent<"span", any, {
     first?: boolean | undefined;

package/dist/Condition.style.js

@@ -3,7 +3,9 @@ import { IconWrapper } from '@synerise/ds-inline-edit/dist/InlineEdit.styles';
 export var StepConditions = styled.div.withConfig({
   displayName: "Conditionstyle__StepConditions",
   componentId: "sc-1lk06p3-0"
-})(["display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;"]);
+})(["display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;margin-top:", ";"], function (props) {
+  return props.withoutStepName ? '22px' : '0';
+});
 export var StepName = styled.div.withConfig({
   displayName: "Conditionstyle__StepName",
   componentId: "sc-1lk06p3-1"
@@ -25,9 +27,7 @@ export var StepHeader = styled.div.withConfig({
 export var Step = styled.div.withConfig({
   displayName: "Conditionstyle__Step",
   componentId: "sc-1lk06p3-5"
-})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:", ";border-top:1px dotted ", ";&:first-of-type{border-top:0;&.steps-list-ghost-element{&:after{display:none;}}}&:hover{", "{opacity:1;visibility:visible;}}&.sortable-chosen{cursor:grabbing;width:100%;opacity:1 !important;height:50px;background-color:", ";display:flex;align-items:center;justify-content:center;padding:0 20px;box-shadow:0 16px 32px 0 #23293619;", "{align-items:center;}", "{margin:0;", "{display:none;}}", "{display:none;}}&.steps-list-ghost-element{cursor:grabbing;width:100%;background-color:", ";border:1px dashed ", ";border-radius:3px;display:flex;align-items:center;justify-content:center;padding:0;height:50px;box-shadow:none;position:relative;margin:24px 0;&:after{content:'';position:absolute;top:-24px;left:0;width:100%;height:1px;border-bottom:1px dotted ", ";}&:before{content:attr(data-dropLabel);text-align:center;position:relative;color:", ";}*{display:none;}}}"], function (props) {
-  return props.withStepName ? '0 0 36px' : '0 0 24px 0';
-}, function (props) {
+})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:0 0 24px 0;border-top:1px dotted ", ";position:relative;&:first-of-type{border-top:0;&.steps-list-ghost-element{&:after{display:none;}}}&:hover{", "{opacity:1;visibility:visible;}}&.sortable-chosen{cursor:grabbing;width:100%;opacity:1 !important;height:50px;background-color:", ";display:flex;align-items:center;justify-content:center;padding:0 20px;box-shadow:0 16px 32px 0 #23293619;", "{align-items:center;}", "{margin:0;", "{display:none;}}", "{display:none;}}&.steps-list-ghost-element{cursor:grabbing;width:100%;background-color:", ";border:1px dashed ", ";border-radius:3px;display:flex;align-items:center;justify-content:center;padding:0;height:50px;box-shadow:none;position:relative;margin:24px 0;&:after{content:'';position:absolute;top:-24px;left:0;width:100%;height:1px;border-bottom:1px dotted ", ";}&:before{content:attr(data-dropLabel);text-align:center;position:relative;color:", ";}*{display:none;}}}"], function (props) {
   return props.theme.palette['grey-300'];
 }, StepCruds, function (props) {
   return props.theme.palette.white;
@@ -59,7 +59,9 @@ export var ConditionRows = styled.div.withConfig({
 export var ConditionRow = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionRow",
   componentId: "sc-1lk06p3-10"
-})(["display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;padding-bottom:16px;min-width:780px;", "{margin-right:8px;&:last-of-type{margin-right:0;}}&:hover{", "{opacity:1;visibility:visible;pointer-events:all;cursor:pointer;}}"], ConditionWrapper, RemoveIconWrapper);
+})(["display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;padding-bottom:16px;min-width:780px;z-index:", ";", "{margin-right:8px;&:last-of-type{margin-right:0;}}&:hover{", "{opacity:1;visibility:visible;pointer-events:all;cursor:pointer;}}"], function (props) {
+  return 10000 - props.index;
+}, ConditionWrapper, RemoveIconWrapper);
 export var AddConditionRow = styled.div.withConfig({
   displayName: "Conditionstyle__AddConditionRow",
   componentId: "sc-1lk06p3-11"

package/dist/Condition.types.d.ts

@@ -1,18 +1,18 @@
 import * as React from 'react';
-import { SubjectProps } from '@synerise/ds-subject/dist/Subject.types';
-import { FactorsProps } from '@synerise/ds-factors/dist/Factors.types';
-import { OperatorsProps } from '@synerise/ds-operators/dist/Operator.types';
-import { ContextProps } from '@synerise/ds-context-selector/dist/ContextSelector.types';
+import { SubjectItem, SubjectProps } from '@synerise/ds-subject/dist/Subject.types';
+import { FactorsProps, FactorType, FactorValueType } from '@synerise/ds-factors/dist/Factors.types';
+import { OperatorsItem, OperatorsProps } from '@synerise/ds-operators/dist/Operator.types';
+import { ContextGroup, ContextItem, ContextProps } from '@synerise/ds-context-selector/dist/ContextSelector.types';
 export declare type StepConditions = {
     id: React.ReactText;
-    parameter?: FactorsProps;
-    operator?: OperatorsProps;
-    factor?: FactorsProps;
+    parameter?: Omit<FactorsProps, 'onChangeValue'>;
+    operator?: Omit<OperatorsProps, 'onChange'>;
+    factor?: Omit<FactorsProps, 'onChangeValue' | 'setSelectedFactorType'>;
 };
 export declare type ConditionStep = {
     id: React.ReactText;
-    subject?: SubjectProps;
-    context?: ContextProps;
+    subject?: Omit<SubjectProps, 'onSelectItem'>;
+    context?: Omit<ContextProps, 'onSelectItem'>;
     stepName?: string;
     conditions: StepConditions[];
 };
@@ -31,12 +31,19 @@ export declare type ConditionProps = {
     steps: ConditionStep[];
     addCondition?: (stepId: React.ReactText) => void;
     removeCondition?: (stepId: React.ReactText, conditionRowId: React.ReactText) => void;
-    updateStepName?: (stepId: React.ReactText, value: string) => void;
     removeStep?: (stepId: React.ReactText) => void;
     duplicateStep?: (stepId: React.ReactText) => void;
     addStep?: () => void;
     onChangeOrder?: (newOrder: ConditionStep[]) => void;
     texts?: Partial<ConditionTexts>;
-    minConditionsLength?: number;
+    minConditionsLength: number;
+    maxConditionsLength?: number | undefined;
     autoClearCondition?: boolean;
+    onChangeContext: (stepId: React.ReactText, value: ContextItem | ContextGroup | undefined) => void;
+    onChangeSubject: (stepId: React.ReactText, value: SubjectItem | undefined) => void;
+    onChangeParameter: (stepId: React.ReactText, conditionId: React.ReactText, value: FactorValueType | undefined) => void;
+    onChangeOperator: (stepId: React.ReactText, conditionId: React.ReactText, value: OperatorsItem | undefined) => void;
+    onChangeFactorValue: (stepId: React.ReactText, conditionId: React.ReactText, value: FactorValueType | undefined) => void;
+    onChangeFactorType: (stepId: React.ReactText, conditionId: React.ReactText, value: FactorType | undefined) => void;
+    onUpdateStepName?: (stepId: React.ReactText, value: string) => void;
 };

package/dist/ConditionStep/AddCondition/AddCondition.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import * as T from './AddCondition.types';
+export declare const AddCondition: React.FC<T.AddConditionProps>;

package/dist/ConditionStep/AddCondition/AddCondition.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Button from '@synerise/ds-button';
+import Icon from '@synerise/ds-icon';
+import { Add2M } from '@synerise/ds-icon/dist/icons';
+import * as S from '../../Condition.style';
+// eslint-disable-next-line import/prefer-default-export
+export var AddCondition = function AddCondition(_ref) {
+  var addCondition = _ref.addCondition,
+      stepId = _ref.stepId,
+      conditionsNumber = _ref.conditionsNumber,
+      texts = _ref.texts,
+      selectedSubject = _ref.selectedSubject,
+      selectedContext = _ref.selectedContext;
+  return React.createElement(S.AddConditionRow, null, React.createElement(S.ConditionConnections, {
+    last: true,
+    first: conditionsNumber === 0
+  }), React.createElement(Button, {
+    type: "ghost",
+    mode: "icon-label",
+    onClick: function onClick() {
+      addCondition && addCondition(stepId);
+    },
+    disabled: !(selectedSubject || selectedContext)
+  }, React.createElement(Icon, {
+    component: React.createElement(Add2M, null)
+  }), conditionsNumber > 0 ? texts.addConditionRowButton : texts.addFirstConditionRowButton));
+};

package/dist/ConditionStep/AddCondition/AddCondition.types.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ConditionProps, ConditionTexts } from '../../Condition.types';
+export declare type AddConditionProps = {
+    addCondition: ConditionProps['addCondition'];
+    stepId: React.ReactText;
+    conditionsNumber: number;
+    texts: Partial<ConditionTexts>;
+    selectedSubject: boolean;
+    selectedContext: boolean;
+};

package/dist/ConditionStep/AddCondition/index.d.ts

@@ -0,0 +1 @@
+export * from './AddCondition';

package/dist/ConditionStep/AddCondition/index.js

@@ -0,0 +1 @@
+export * from './AddCondition';

package/dist/ConditionStep/ConditionRow/ConditionRow.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import * as T from './ConditionRow.types';
+export declare const ConditionRow: React.FC<T.ConditionRowProps>;

package/dist/ConditionStep/ConditionRow/ConditionRow.js

@@ -0,0 +1,70 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import Factors from '@synerise/ds-factors';
+import Operators from '@synerise/ds-operators';
+import Tooltip from '@synerise/ds-tooltip';
+import Icon from '@synerise/ds-icon';
+import { CloseS } from '@synerise/ds-icon/dist/icons';
+import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
+import * as React from 'react';
+import { FACTOR, OPERATOR, PARAMETER } from '../../Condition';
+import * as S from '../../Condition.style';
+// eslint-disable-next-line import/prefer-default-export
+export var ConditionRow = function ConditionRow(_ref) {
+  var index = _ref.index,
+      conditionId = _ref.conditionId,
+      conditionParameter = _ref.conditionParameter,
+      conditionOperator = _ref.conditionOperator,
+      conditionFactor = _ref.conditionFactor,
+      removeCondition = _ref.removeCondition,
+      addCondition = _ref.addCondition,
+      minConditionLength = _ref.minConditionLength,
+      maxConditionLength = _ref.maxConditionLength,
+      conditionsNumber = _ref.conditionsNumber,
+      stepId = _ref.stepId,
+      currentStepId = _ref.currentStepId,
+      currentConditionId = _ref.currentConditionId,
+      currentField = _ref.currentField,
+      selectParameter = _ref.selectParameter,
+      selectOperator = _ref.selectOperator,
+      setStepConditionFactorType = _ref.setStepConditionFactorType,
+      setStepConditionFactorValue = _ref.setStepConditionFactorValue,
+      texts = _ref.texts;
+  return React.createElement(S.ConditionRow, {
+    key: "condition-row-".concat(conditionId),
+    index: index
+  }, React.createElement(S.ConditionConnections, {
+    first: index === 0,
+    last: Boolean(addCondition && index + 1 === conditionsNumber && maxConditionLength !== undefined && conditionsNumber === maxConditionLength)
+  }), React.createElement(S.ConditionWrapper, null, conditionParameter && React.createElement(Factors, _extends({}, conditionParameter, {
+    onChangeValue: function onChangeValue(value) {
+      return selectParameter(stepId, conditionId, value);
+    },
+    opened: stepId === currentStepId && conditionId === currentConditionId && currentField === PARAMETER
+  }))), (!conditionParameter || (conditionParameter === null || conditionParameter === void 0 ? void 0 : conditionParameter.value)) && conditionOperator && React.createElement(S.ConditionWrapper, null, React.createElement(Operators, _extends({}, conditionOperator, {
+    onChange: function onChange(value) {
+      return selectOperator(stepId, conditionId, value);
+    },
+    opened: stepId === currentStepId && conditionId === currentConditionId && currentField === OPERATOR
+  }))), (conditionOperator === null || conditionOperator === void 0 ? void 0 : conditionOperator.value) && React.createElement(S.ConditionWrapper, null, React.createElement(React.Fragment, null, (conditionFactor === null || conditionFactor === void 0 ? void 0 : conditionFactor.withCustomFactor) || React.createElement(Factors, _extends({}, conditionFactor, {
+    setSelectedFactorType: function setSelectedFactorType(factorType) {
+      return setStepConditionFactorType(stepId, conditionId, factorType);
+    },
+    onChangeValue: function onChangeValue(value) {
+      return setStepConditionFactorValue(stepId, conditionId, value);
+    },
+    factorKey: conditionId,
+    opened: stepId === currentStepId && conditionId === currentConditionId && currentField === FACTOR
+  })))), removeCondition && conditionsNumber > minConditionLength && React.createElement(S.RemoveIconWrapper, {
+    onClick: function onClick() {
+      return removeCondition(stepId, conditionId);
+    },
+    className: "ds-conditions-remove-row"
+  }, React.createElement(Tooltip, {
+    title: texts.removeConditionRowTooltip,
+    trigger: ['hover']
+  }, React.createElement(Icon, {
+    component: React.createElement(CloseS, null),
+    color: theme.palette['red-600']
+  }))));
+};

package/dist/ConditionStep/ConditionRow/ConditionRow.types.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { FactorsProps } from '@synerise/ds-factors/dist/Factors.types';
+import { OperatorsProps } from '@synerise/ds-operators/dist/Operator.types';
+import { ConditionProps, ConditionTexts } from '../../Condition.types';
+export declare type ConditionRowProps = {
+    index: number;
+    conditionId: React.ReactText;
+    addCondition: ConditionProps['addCondition'];
+    conditionParameter: FactorsProps;
+    conditionOperator: OperatorsProps;
+    conditionFactor: FactorsProps;
+    removeCondition: ConditionProps['removeCondition'];
+    minConditionLength: ConditionProps['minConditionsLength'];
+    maxConditionLength: ConditionProps['maxConditionsLength'];
+    conditionsNumber: number;
+    stepId: React.ReactText;
+    currentStepId: React.ReactText;
+    currentConditionId: React.ReactText;
+    currentField: React.ReactText;
+    selectParameter: ConditionProps['onChangeParameter'];
+    selectOperator: ConditionProps['onChangeOperator'];
+    setStepConditionFactorType: ConditionProps['onChangeFactorType'];
+    setStepConditionFactorValue: ConditionProps['onChangeFactorValue'];
+    texts: Partial<ConditionTexts>;
+    stepType: 'event' | 'attribute' | 'default' | undefined;
+};

package/dist/ConditionStep/ConditionRow/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ConditionRow.types';
+export * from './ConditionRow';

package/dist/ConditionStep/ConditionRow/index.js

@@ -0,0 +1,2 @@
+export * from './ConditionRow.types';
+export * from './ConditionRow';

package/dist/ConditionStep/ConditionStep.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import * as T from './ConditionStep.types';
+export declare const ConditionStep: React.FC<T.ConditionStepProps>;

package/dist/ConditionStep/ConditionStep.js

@@ -0,0 +1,149 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import * as React from 'react';
+import Subject from '@synerise/ds-subject';
+import ContextSelector from '@synerise/ds-context-selector';
+import { useIntl } from 'react-intl';
+import * as S from '../Condition.style';
+import { StepHeader } from './StepHeader';
+import { AddCondition } from './AddCondition';
+import { ConditionRow } from './ConditionRow'; // eslint-disable-next-line import/prefer-default-export
+
+export var ConditionStep = function ConditionStep(_ref) {
+  var step = _ref.step,
+      texts = _ref.texts,
+      index = _ref.index,
+      addCondition = _ref.addCondition,
+      removeCondition = _ref.removeCondition,
+      updateStepName = _ref.updateStepName,
+      removeStep = _ref.removeStep,
+      duplicateStep = _ref.duplicateStep,
+      _ref$minConditionsLen = _ref.minConditionsLength,
+      minConditionsLength = _ref$minConditionsLen === void 0 ? 1 : _ref$minConditionsLen,
+      maxConditionsLength = _ref.maxConditionsLength,
+      draggableEnabled = _ref.draggableEnabled,
+      selectSubject = _ref.selectSubject,
+      selectContext = _ref.selectContext,
+      selectOperator = _ref.selectOperator,
+      selectParameter = _ref.selectParameter,
+      setStepConditionFactorType = _ref.setStepConditionFactorType,
+      setStepConditionFactorValue = _ref.setStepConditionFactorValue,
+      currentStepId = _ref.currentStepId,
+      currentConditionId = _ref.currentConditionId,
+      currentField = _ref.currentField;
+
+  var _useIntl = useIntl(),
+      formatMessage = _useIntl.formatMessage;
+
+  var text = React.useMemo(function () {
+    return _objectSpread({
+      stepNamePlaceholder: formatMessage({
+        id: 'DS.CONDITION.STEP_NAME-PLACEHOLDER',
+        defaultMessage: 'Step name'
+      }),
+      removeConditionRowTooltip: formatMessage({
+        id: 'DS.CONDITION.REMOVE-CONDITION-ROW-TOOLTIP',
+        defaultMessage: 'Delete'
+      }),
+      addConditionRowButton: formatMessage({
+        id: 'DS.CONDITION.ADD-CONDITION-ROW-BUTTON',
+        defaultMessage: 'Add condition'
+      }),
+      addFirstConditionRowButton: formatMessage({
+        id: 'DS.CONDITION.ADD-FIRST-CONDITION-ROW-BUTTON',
+        defaultMessage: 'Add condition'
+      }),
+      dropLabel: formatMessage({
+        id: 'DS.CONDITION.DROP-LABEL',
+        defaultMessage: 'Drop me here'
+      }),
+      moveTooltip: formatMessage({
+        id: 'DS.CONDITION.MOVE-TOOLTIP',
+        defaultMessage: 'Move'
+      }),
+      duplicateTooltip: formatMessage({
+        id: 'DS.CONDITION.DUPLICATE-TOOLTIP',
+        defaultMessage: 'Duplicate'
+      }),
+      removeTooltip: formatMessage({
+        id: 'DS.CONDITION.REMOVE-TOOLTIP',
+        defaultMessage: 'Delete'
+      }),
+      addStep: formatMessage({
+        id: 'DS.CONDITION.ADD-STEP',
+        defaultMessage: 'Add step'
+      })
+    }, texts);
+  }, [texts, formatMessage]);
+  var stepHeader = React.useMemo(function () {
+    return React.createElement(StepHeader, {
+      index: index,
+      stepId: step.id,
+      stepName: step.stepName || '',
+      texts: text,
+      updateStepName: updateStepName,
+      removeStep: removeStep,
+      duplicateStep: duplicateStep,
+      draggableEnabled: Boolean(draggableEnabled)
+    });
+  }, [draggableEnabled, duplicateStep, index, removeStep, step.id, step.stepName, text, updateStepName]);
+  var addConditionButton = React.useMemo(function () {
+    var _step$subject, _step$context;
+
+    return addCondition && (maxConditionsLength === undefined || step.conditions.length < maxConditionsLength) && React.createElement(AddCondition, {
+      texts: text,
+      stepId: step.id,
+      addCondition: addCondition,
+      conditionsNumber: step.conditions.length,
+      selectedSubject: Boolean((_step$subject = step.subject) === null || _step$subject === void 0 ? void 0 : _step$subject.selectedItem),
+      selectedContext: Boolean((_step$context = step.context) === null || _step$context === void 0 ? void 0 : _step$context.selectedItem)
+    });
+  }, [addCondition, maxConditionsLength, step.conditions.length, step.context, step.id, step.subject, text]);
+  var renderConditionRow = React.useCallback(function (condition, conditionIndex) {
+    var _step$context2;
+
+    return React.createElement(ConditionRow, {
+      key: "step-".concat(step.id, "-condition-").concat(condition.id),
+      index: conditionIndex,
+      conditionId: condition.id,
+      addCondition: addCondition,
+      conditionParameter: condition.parameter,
+      conditionOperator: condition.operator,
+      conditionFactor: condition.factor,
+      removeCondition: removeCondition,
+      minConditionLength: minConditionsLength,
+      maxConditionLength: maxConditionsLength,
+      conditionsNumber: step.conditions.length,
+      stepId: step.id,
+      currentStepId: currentStepId,
+      currentConditionId: currentConditionId,
+      currentField: currentField,
+      selectParameter: selectParameter,
+      selectOperator: selectOperator,
+      setStepConditionFactorType: setStepConditionFactorType,
+      setStepConditionFactorValue: setStepConditionFactorValue,
+      texts: text,
+      stepType: (_step$context2 = step.context) === null || _step$context2 === void 0 ? void 0 : _step$context2.type
+    });
+  }, [addCondition, currentConditionId, currentField, currentStepId, maxConditionsLength, minConditionsLength, removeCondition, selectOperator, selectParameter, setStepConditionFactorType, setStepConditionFactorValue, step.conditions.length, step.context, step.id, text]);
+  return React.createElement(S.Step, {
+    key: step.id,
+    "data-dropLabel": text.dropLabel
+  }, updateStepName && stepHeader, React.createElement(S.StepConditions, {
+    withoutStepName: updateStepName === undefined
+  }, React.createElement(S.Subject, null, step.subject && React.createElement(Subject, _extends({}, step.subject, {
+    onSelectItem: function onSelectItem(value) {
+      return selectSubject(value, step.id);
+    }
+  })), step.context && React.createElement(ContextSelector, _extends({}, step.context, {
+    onSelectItem: function onSelectItem(value) {
+      return selectContext(value, step.id);
+    }
+  }))), React.createElement(S.ConditionRows, null, step.conditions.length > 0 && step.conditions.map(renderConditionRow), addConditionButton)));
+};

package/dist/ConditionStep/ConditionStep.types.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { FactorType, FactorValueType } from '@synerise/ds-factors/dist/Factors.types';
+import { ContextGroup, ContextItem } from '@synerise/ds-context-selector/dist/ContextSelector.types';
+import { SubjectItem } from '@synerise/ds-subject/dist/Subject.types';
+import { OperatorsGroup, OperatorsItem } from '@synerise/ds-operators/dist/Operator.types';
+import { ConditionStep, ConditionTexts } from '../Condition.types';
+export declare type ConditionStepProps = {
+    index: number;
+    step: ConditionStep;
+    addCondition?: (stepId: React.ReactText) => void;
+    removeCondition?: (stepId: React.ReactText, conditionRowId: React.ReactText) => void;
+    updateStepName?: (stepId: React.ReactText, value: string) => void;
+    removeStep?: (stepId: React.ReactText) => void;
+    duplicateStep?: (stepId: React.ReactText) => void;
+    texts?: Partial<ConditionTexts>;
+    minConditionsLength: number;
+    maxConditionsLength: number | undefined;
+    draggableEnabled?: boolean;
+    selectSubject: (value: SubjectItem, stepId: React.ReactText) => void;
+    selectContext: (value: ContextItem | ContextGroup | undefined, stepId: React.ReactText) => void;
+    selectParameter: (stepId: React.ReactText, condition: React.ReactText, value: FactorValueType | undefined) => void;
+    selectOperator: (stepId: React.ReactText, condition: React.ReactText, value: OperatorsItem | OperatorsGroup | undefined) => void;
+    setStepConditionFactorType: (stepId: React.ReactText, condition: React.ReactText, factorType: FactorType | undefined) => void;
+    setStepConditionFactorValue: (stepId: React.ReactText, condition: React.ReactText, value: FactorValueType) => void;
+    currentStepId: React.ReactText;
+    currentConditionId: React.ReactText;
+    currentField: React.ReactText;
+};

package/dist/ConditionStep/StepHeader/StepHeader.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import * as T from './StepHeader.types';
+export declare const StepHeader: React.FC<T.StepHeaderProps>;

package/dist/ConditionStep/StepHeader/StepHeader.js

@@ -0,0 +1,68 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import InlineEdit from '@synerise/ds-inline-edit';
+import * as React from 'react';
+import Cruds from '@synerise/ds-cruds';
+import { DragHandleM } from '@synerise/ds-icon/dist/icons';
+import { NOOP } from '@synerise/ds-utils';
+import { debounce } from 'lodash';
+import * as S from '../../Condition.style';
+// eslint-disable-next-line import/prefer-default-export
+export var StepHeader = function StepHeader(_ref) {
+  var stepName = _ref.stepName,
+      stepId = _ref.stepId,
+      texts = _ref.texts,
+      _ref$updateStepName = _ref.updateStepName,
+      updateStepName = _ref$updateStepName === void 0 ? NOOP : _ref$updateStepName,
+      duplicateStep = _ref.duplicateStep,
+      removeStep = _ref.removeStep,
+      index = _ref.index,
+      draggableEnabled = _ref.draggableEnabled;
+  var onChangeNameDebounce = React.useCallback(debounce(updateStepName, 300), [updateStepName]);
+
+  var _React$useState = React.useState(stepName),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      localName = _React$useState2[0],
+      setLocalName = _React$useState2[1];
+
+  React.useEffect(function () {
+    setLocalName(stepName);
+  }, [stepName]);
+  var handleChangeName = React.useCallback(function (event) {
+    setLocalName(event.target.value);
+    onChangeNameDebounce(stepId, event.target.value);
+  }, [onChangeNameDebounce, stepId]);
+  return React.createElement(S.StepHeader, null, updateStepName && React.createElement(S.StepName, null, "".concat(index + 1, "."), ' ', React.createElement(InlineEdit, {
+    size: "small",
+    input: {
+      value: localName,
+      name: "condition-step-name-".concat(stepId),
+      placeholder: texts.stepNamePlaceholder,
+      onChange: handleChangeName
+    }
+  })), React.createElement(S.StepCruds, null, draggableEnabled && React.createElement(Cruds.CustomAction, {
+    icon: React.createElement(DragHandleM, null),
+    title: texts.moveTooltip,
+    onClick: NOOP,
+    className: "step-drag-handler"
+  }), React.createElement(Cruds, {
+    onDuplicate: duplicateStep ? function () {
+      return duplicateStep(stepId);
+    } : undefined,
+    onDelete: removeStep ? function () {
+      return removeStep(stepId);
+    } : undefined,
+    duplicateTooltip: texts.duplicateTooltip,
+    deleteTooltip: texts.removeTooltip
+  })));
+};

package/dist/ConditionStep/StepHeader/StepHeader.types.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ConditionProps, ConditionTexts } from '../../Condition.types';
+export declare type StepHeaderProps = {
+    index: number;
+    texts: Partial<ConditionTexts>;
+    stepName: string;
+    stepId: React.ReactText;
+    removeStep: ConditionProps['removeStep'];
+    duplicateStep: ConditionProps['duplicateStep'];
+    updateStepName: ConditionProps['onUpdateStepName'];
+    draggableEnabled: boolean;
+};

package/dist/ConditionStep/StepHeader/index.d.ts

@@ -0,0 +1,2 @@
+export * from './StepHeader.types';
+export * from './StepHeader';

package/dist/ConditionStep/StepHeader/index.js

@@ -0,0 +1,2 @@
+export * from './StepHeader.types';
+export * from './StepHeader';

package/dist/ConditionStep/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ConditionStep.types';
+export * from './ConditionStep';

package/dist/ConditionStep/index.js

@@ -0,0 +1,2 @@
+export * from './ConditionStep.types';
+export * from './ConditionStep';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-condition",
-  "version": "0.9.1",
+  "version": "0.11.0",
   "description": "Condition UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,22 +32,22 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.13.66",
-    "@synerise/ds-context-selector": "^0.6.4",
+    "@synerise/ds-button": "^0.15.0",
+    "@synerise/ds-context-selector": "^0.7.2",
     "@synerise/ds-core": "^0.30.14",
-    "@synerise/ds-cruds": "^0.2.46",
-    "@synerise/ds-factors": "^0.7.36",
+    "@synerise/ds-cruds": "^0.2.49",
+    "@synerise/ds-factors": "^0.9.0",
     "@synerise/ds-icon": "^0.36.0",
-    "@synerise/ds-inline-edit": "^0.4.35",
-    "@synerise/ds-operators": "^0.4.29",
-    "@synerise/ds-subject": "^0.5.48",
-    "@synerise/ds-tooltip": "^0.10.52",
-    "@synerise/ds-utils": "^0.18.1",
+    "@synerise/ds-inline-edit": "^0.4.38",
+    "@synerise/ds-operators": "^0.5.2",
+    "@synerise/ds-subject": "^0.5.51",
+    "@synerise/ds-tooltip": "^0.10.55",
+    "@synerise/ds-utils": "^0.19.0",
     "react-sortablejs": "^6.0.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "78685caf9c9b72daabe890e18cb666eb17c8b724"
+  "gitHead": "1c362e630aa782b5a781724f0cb4f32a4a2b55bf"
 }