@synerise/ds-condition 1.2.2 → 1.3.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@1.3.0...@synerise/ds-condition@1.3.1) (2025-06-26)
+
+**Note:** Version bump only for package @synerise/ds-condition
+
+
+
+
+
+# [1.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@1.2.2...@synerise/ds-condition@1.3.0) (2025-06-24)
+
+
+### Features
+
+* **condition:** sortable lib ([8cbc3f5](https://github.com/Synerise/synerise-design/commit/8cbc3f5956ce9138f1a6b0a5eb0e7cd85bb7f4e7))
+
+
+
+
+
 ## [1.2.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@1.2.1...@synerise/ds-condition@1.2.2) (2025-06-12)
 
 **Note:** Version bump only for package @synerise/ds-condition

package/dist/Condition.d.ts

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

package/dist/Condition.js

@@ -1,14 +1,16 @@
 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, { useEffect, useState, useCallback, useMemo } from 'react';
-import { useIntl } from 'react-intl';
-import { ReactSortable } from 'react-sortablejs';
-import Icon, { Add3M } from '@synerise/ds-icon';
+import { SortableContainer, DragOverlay } from '@synerise/ds-sortable';
+import Icon, { Add3M, DragHandleM } from '@synerise/ds-icon';
 import Button from '@synerise/ds-button';
-import { NOOP, usePrevious } from '@synerise/ds-utils';
+import { usePrevious } from '@synerise/ds-utils';
 import { ConditionStep } from './ConditionStep';
 import * as S from './Condition.style';
-import { SORTABLE_CONFIG, DEFAULT_CONDITION, DEFAULT_FIELD, DEFAULT_STEP, OPERATOR, FACTOR, PARAMETER, SUBJECT, DEFAULT_INPUT_PROPS, ACTION_ATTRIBUTE } from './constants';
+import { DEFAULT_CONDITION, DEFAULT_FIELD, DEFAULT_STEP, OPERATOR, FACTOR, PARAMETER, SUBJECT, DEFAULT_INPUT_PROPS, ACTION_ATTRIBUTE } from './constants';
+import { StepName } from './ConditionStep/StepName/StepName';
+import { useTranslations } from './hooks/useTranslations';
 var Condition = function Condition(props) {
+  var _draggedStep$context;
   var steps = props.steps,
     addCondition = props.addCondition,
     removeCondition = props.removeCondition,
@@ -47,33 +49,19 @@ var Condition = function Condition(props) {
     actionAttributeParameterSelectorComponent = props.actionAttributeParameterSelectorComponent,
     _props$showEmptyCondi = props.showEmptyConditionPlaceholder,
     showEmptyConditionPlaceholder = _props$showEmptyCondi === void 0 ? false : _props$showEmptyCondi;
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  var text = useMemo(function () {
-    return _extends({
-      addStep: formatMessage({
-        id: 'DS.CONDITION.ADD-STEP',
-        defaultMessage: 'and then...'
-      }),
-      conditionSuffix: formatMessage({
-        id: 'DS.CONDITION.SUFFIX',
-        defaultMessage: 'and'
-      }),
-      stepNamePrefix: formatMessage({
-        id: 'DS.CONDITION.STEP_NAME-PREFIX',
-        defaultMessage: 'Step'
-      })
-    }, texts);
-  }, [texts, formatMessage]);
-  var _useState = useState(DEFAULT_CONDITION),
-    currentConditionId = _useState[0],
-    setCurrentConditionId = _useState[1];
-  var _useState2 = useState(DEFAULT_STEP),
-    currentStepId = _useState2[0],
-    setCurrentStepId = _useState2[1];
-  var _useState3 = useState(autoOpenedComponent),
-    currentField = _useState3[0],
-    setCurrentField = _useState3[1];
+  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) {
@@ -224,62 +212,89 @@ var Condition = function Condition(props) {
     setCurrentStepId(DEFAULT_STEP);
     setCurrentField(DEFAULT_FIELD);
   }, [currentConditionId, currentStepId, onDeactivate]);
-  return useMemo(function () {
-    return /*#__PURE__*/React.createElement(S.Condition, {
-      className: "ds-conditions",
-      "data-popup-container": true
-    }, /*#__PURE__*/React.createElement(ReactSortable, _extends({}, SORTABLE_CONFIG, {
-      list: steps,
-      setList: onChangeOrder || NOOP
-    }), steps.map(function (step, index) {
-      return /*#__PURE__*/React.createElement(ConditionStep, {
-        key: "step-id-" + step.id,
-        step: step,
-        texts: text,
-        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
+  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;
       });
-    })), 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)
-    }), text.addStep)), !readOnly && renderAddStep && /*#__PURE__*/React.createElement(S.AddStepButton, null, renderAddStep()));
-  }, [steps, onChangeOrder, addStep, handleAddStep, text, readOnly, renderAddStep, contextSelectorComponent, parameterSelectorComponent, factorParameterSelectorComponent, actionAttributeParameterSelectorComponent, currentStepId, getPopupContainerOverride, draggableEnabled, selectOperator, selectParameter, selectContext, selectSubject, selectActionAttribute, onUpdateStepName, duplicateStep, removeStep, minConditionsLength, maxConditionsLength, setStepConditionFactorType, setStepConditionFactorValue, currentConditionId, currentField, removeCondition, handleAddCondition, handleClearActiveCondition, showSuffix, hoverDisabled, inputProps, singleStepCondition, showActionAttribute, showEmptyConditionPlaceholder]);
+      setDraggedStep(_extends({}, 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 == 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
+    });
+  }), /*#__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()));
 };
 export default Condition;

package/dist/Condition.style.d.ts

@@ -16,10 +16,17 @@ export declare const StepHeader: import("styled-components").StyledComponent<"di
 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 | undefined;
+    showSuffix?: boolean | undefined;
     hoverDisabled?: boolean | undefined;
     singleStepCondition?: boolean | undefined;
 }, 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, {
+    isDragOverlay?: boolean | undefined;
+    isDragged?: boolean | undefined;
+}, never>;
 export declare const Subject: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const RemoveIconWrapper: import("styled-components").StyledComponent<"span", any, {
     'data-testid': string;

package/dist/Condition.style.js

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import { IconWrapper } from '@synerise/ds-inline-edit/dist/InlineEdit.styles';
 import Icon from '@synerise/ds-icon';
 import Cruds from '@synerise/ds-cruds';
 import { InputGroupItem } from '@synerise/ds-input/dist/InputGroup.styles';
@@ -26,13 +25,13 @@ export var StepConditions = styled.div.withConfig({
 export var StepName = styled.div.withConfig({
   displayName: "Conditionstyle__StepName",
   componentId: "sc-1lk06p3-4"
-})(["font-size:13px;line-height:1.84;color:", ";display:flex;flex-direction:row;align-items:center;justify-content:flex-start;white-space:pre-wrap;&&& input{margin-top:2px;cursor:default;}"], function (props) {
+})(["font-size:13px;line-height:1.84;color:", ";display:flex;flex-direction:row;align-items:center;justify-content:flex-start;white-space:pre-wrap;gap:8px;&&& input{margin-top:2px;cursor:default;}"], function (props) {
   return props.theme.palette['grey-800'];
 });
 export var StepIndexWrapper = styled.span.withConfig({
   displayName: "Conditionstyle__StepIndexWrapper",
   componentId: "sc-1lk06p3-5"
-})(["font-size:13px;font-weight:500;margin-right:8px;"]);
+})(["font-size:13px;font-weight:500;"]);
 export var Condition = styled.div.withConfig({
   displayName: "Conditionstyle__Condition",
   componentId: "sc-1lk06p3-6"
@@ -66,59 +65,71 @@ export var DraggedLabel = styled.span.withConfig({
 export var Step = styled.div.withConfig({
   displayName: "Conditionstyle__Step",
   componentId: "sc-1lk06p3-13"
-})(["padding:", ";position:relative;", " &:first-of-type{&.steps-list-ghost-element{&:after{display:none;}}}background-color:", ";&:hover{", ";", "{opacity:1;visibility:visible;}", "{opacity:1;visibility:visible;}", "{opacity:1;visibility:visible;}}&.sortable-chosen,&.sortable-drag{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;&:after{display:none;}", "{align-items:center;}", "{margin:0;", "{display:none;}}", "{display:none;}", "{display:flex;}}&.steps-list-ghost-element{cursor:grabbing;width:100%;background-color:", ";border-left:2px solid ", ";border-radius:0;display:flex;align-items:center;justify-content:center;padding:0;height:50px;box-shadow:none;position:relative;&:before{content:attr(data-dropLabel);text-align:center;position:relative;color:", ";}", "{display:none;}*{display:none;}&:after{display:none;content:'';}}}"], function (_ref) {
+})(["padding:", ";position:relative;", " background-color:", ";&:hover{", ";", "{opacity:1;visibility:visible;}", "{opacity:1;visibility:visible;}", "{opacity:1;visibility:visible;}}"], function (_ref) {
   var singleStepCondition = _ref.singleStepCondition;
   return singleStepCondition ? '24px 0' : '12px 0';
 }, function (props) {
-  return Boolean(props.showSuffix) && css(["&:after{display:none;width:100%;padding:18px 0 18px 24px;bottom:-18px;content:attr(data-conditionSuffix);background-color:", ";position:relative;font-size:16px;font-weight:500;color:#3f4c5b;}&:first-child:not(:last-child){&:after{display:flex;}}&:not(:last-child){&:after{display:flex;}}"], props.theme.palette.white);
+  return props.showSuffix && css(["&:after{display:flex;width:100%;padding:18px 0 18px 24px;bottom:-18px;content:attr(data-conditionSuffix);background-color:", ";position:relative;font-size:16px;font-weight:500;color:#3f4c5b;}"], props.theme.palette.white);
 }, function (props) {
   return props.active && !props.singleStepCondition ? props.theme.palette['grey-050'] : 'transparent';
 }, function (props) {
   return !props.hoverDisabled && "background-color: " + props.theme.palette['grey-050'];
-}, StepCruds, StepConditionCruds, DragIcon, function (props) {
-  return props.theme.palette.white;
-}, StepHeader, StepName, IconWrapper, StepConditions, DraggedLabel, function (props) {
-  return props.theme.palette['blue-050'];
-}, function (props) {
-  return props.theme.palette['blue-600'];
+}, StepCruds, StepConditionCruds, DragIcon);
+export var DropLabel = styled.div.withConfig({
+  displayName: "Conditionstyle__DropLabel",
+  componentId: "sc-1lk06p3-14"
+})(["display:none;"]);
+export var DragLabelPart = styled.div.withConfig({
+  displayName: "Conditionstyle__DragLabelPart",
+  componentId: "sc-1lk06p3-15"
+})([""]);
+export var DragLabel = styled.div.withConfig({
+  displayName: "Conditionstyle__DragLabel",
+  componentId: "sc-1lk06p3-16"
+})(["display:none;align-items:center;gap:8px;"]);
+export var StepWrapper = styled.div.withConfig({
+  displayName: "Conditionstyle__StepWrapper",
+  componentId: "sc-1lk06p3-17"
+})(["", " ", ""], function (props) {
+  return props.isDragOverlay && css(["", "{display:none;}height:50px;overflow:hidden;cursor:grabbing;background:", ";box-shadow:0 16px 32px 0 #23293619;display:flex;align-items:center;", "{display:flex;}"], Step, props.theme.palette.white, DragLabel);
 }, function (props) {
-  return props.theme.palette['blue-600'];
-}, DraggedLabel);
+  return props.isDragged && css(["", "{display:none;}", "{display:block;}height:50px;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:", ";color:", ";border-left:2px solid ", ";"], Step, DropLabel, props.theme.palette['blue-050'], props.theme.palette['blue-600'], props.theme.palette['blue-600']);
+});
 export var Subject = styled.div.withConfig({
   displayName: "Conditionstyle__Subject",
-  componentId: "sc-1lk06p3-14"
+  componentId: "sc-1lk06p3-18"
 })([""]);
 export var RemoveIconWrapper = styled.span.attrs({
   'data-testid': 'ds-conditions-remove-row'
 }).withConfig({
   displayName: "Conditionstyle__RemoveIconWrapper",
-  componentId: "sc-1lk06p3-15"
+  componentId: "sc-1lk06p3-19"
 })(["visibility:hidden;pointer-events:none;opacity:0;transition:all 0.3s ease;width:24px;height:32px;display:flex;align-items:center;justify-content:center;margin-left:8px;"]);
 export var ConditionWrapper = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionWrapper",
-  componentId: "sc-1lk06p3-16"
+  componentId: "sc-1lk06p3-20"
 })(["", ";", "{min-width:0;}"], function (props) {
   return Boolean(props.withRemoveTrigger) && css(["&{display:flex;> *{min-width:0;}}", "{flex:0 0 24px;}"], RemoveIconWrapper);
 }, InputGroupItem);
 export var ConditionRows = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionRows",
-  componentId: "sc-1lk06p3-17"
+  componentId: "sc-1lk06p3-21"
 })(["flex-grow:1;min-width:0;"]);
 export var ConditionRowDefinition = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionRowDefinition",
-  componentId: "sc-1lk06p3-18"
+  componentId: "sc-1lk06p3-22"
 })(["display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;"]);
 export var ConditionRowLine = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionRowLine",
-  componentId: "sc-1lk06p3-19"
+  componentId: "sc-1lk06p3-23"
 })(["flex-grow:1;min-width:0;"]);
 export var AddConditionRow = styled.div.withConfig({
   displayName: "Conditionstyle__AddConditionRow",
-  componentId: "sc-1lk06p3-20"
+  componentId: "sc-1lk06p3-24"
 })(["display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:row;"]);
 export var ConditionConnections = styled.span.withConfig({
   displayName: "Conditionstyle__ConditionConnections",
-  componentId: "sc-1lk06p3-21"
+  componentId: "sc-1lk06p3-25"
 })(["display:flex;width:32px;min-width:32px;margin:0 12px;position:relative;height:32px;&:before{position:absolute;content:'';width:", ";height:1px;top:16px;left:", ";background-color:", ";}&:after{display:", ";position:absolute;content:'';width:1px;left:50%;height:auto;top:", ";bottom:", ";background-color:", ";}"], function (props) {
   return props.first ? '100%' : '16px';
 }, function (props) {
@@ -136,7 +147,7 @@ export var ConditionConnections = styled.span.withConfig({
 });
 export var ConditionRow = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionRow",
-  componentId: "sc-1lk06p3-22"
+  componentId: "sc-1lk06p3-26"
 })(["padding-bottom:", ";display:flex;flex-grow:1;", "{height:", ";", "}}", "{margin-right:8px;&:last-of-type{margin-right:0;flex-grow:1;min-width:0;}&:only-of-type{flex-grow:0;}}&:hover{", "{opacity:1;visibility:visible;pointer-events:all;cursor:pointer;}}"], function (props) {
   return props.onlyChild ? '0' : '16px';
 }, ConditionConnections, function (props) {
@@ -148,9 +159,9 @@ export var ConditionRow = styled.div.withConfig({
 }, ConditionWrapper, RemoveIconWrapper);
 export var AddStepButton = styled.div.withConfig({
   displayName: "Conditionstyle__AddStepButton",
-  componentId: "sc-1lk06p3-23"
+  componentId: "sc-1lk06p3-27"
 })(["margin:12px 24px 0;"]);
 export var ActionAttribute = styled.div.withConfig({
   displayName: "Conditionstyle__ActionAttribute",
-  componentId: "sc-1lk06p3-24"
+  componentId: "sc-1lk06p3-28"
 })(["margin-left:8px;display:flex;"]);

package/dist/ConditionStep/ConditionStep.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import * as T from './ConditionStep.types';
-export declare const ConditionStep: ({ step, texts, index, addCondition, removeCondition, updateStepName, removeStep, duplicateStep, minConditionsLength, maxConditionsLength, draggableEnabled, selectSubject, selectContext, selectActionAttribute, selectOperator, selectParameter, setStepConditionFactorType, setStepConditionFactorValue, getPopupContainerOverride, hasPriority, currentStepId, currentConditionId, currentField, setCurrentField, setCurrentCondition, setCurrentStep, onDeactivate, showSuffix, inputProps, readOnly, singleStepCondition, showActionAttribute, contextSelectorComponent: CustomContextSelectorComponent, actionAttributeParameterSelectorComponent, parameterSelectorComponent, factorParameterSelectorComponent, showEmptyConditionPlaceholder, }: T.ConditionStepProps) => React.JSX.Element;
+export declare const ConditionStep: ({ step, texts, index, isLast, isDragged, addCondition, removeCondition, updateStepName, removeStep, duplicateStep, minConditionsLength, maxConditionsLength, draggableEnabled, selectSubject, selectContext, selectActionAttribute, selectOperator, selectParameter, setStepConditionFactorType, setStepConditionFactorValue, getPopupContainerOverride, hasPriority, currentStepId, currentConditionId, currentField, setCurrentField, setCurrentCondition, setCurrentStep, onDeactivate, showSuffix, inputProps, readOnly, singleStepCondition, showActionAttribute, contextSelectorComponent: CustomContextSelectorComponent, actionAttributeParameterSelectorComponent, parameterSelectorComponent, factorParameterSelectorComponent, showEmptyConditionPlaceholder, }: T.ConditionStepProps) => React.JSX.Element;

package/dist/ConditionStep/ConditionStep.js

@@ -1,6 +1,6 @@
 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, useMemo } from 'react';
-import { useIntl } from 'react-intl';
+import { useSortable, CSS } from '@synerise/ds-sortable';
 import Subject from '@synerise/ds-subject';
 import ContextSelector from '@synerise/ds-context-selector';
 import { DragHandleM } from '@synerise/ds-icon';
@@ -11,11 +11,14 @@ import { AddCondition } from './AddCondition';
 import { ConditionRow } from './ConditionRow';
 import { ACTION_ATTRIBUTE, SUBJECT } from '../constants';
 import { EmptyCondition } from './EmptyCondition';
+import { useTranslations } from '../hooks/useTranslations';
 export var ConditionStep = function ConditionStep(_ref) {
   var _step$actionAttribute2, _step$subject3, _step$context4, _step$actionAttribute4, _step$context6, _step$subject4, _step$context7, _step$actionAttribute5, _step$actionAttribute6;
   var step = _ref.step,
     texts = _ref.texts,
     index = _ref.index,
+    isLast = _ref.isLast,
+    isDragged = _ref.isDragged,
     addCondition = _ref.addCondition,
     removeCondition = _ref.removeCondition,
     updateStepName = _ref.updateStepName,
@@ -54,52 +57,22 @@ export var ConditionStep = function ConditionStep(_ref) {
     factorParameterSelectorComponent = _ref.factorParameterSelectorComponent,
     _ref$showEmptyConditi = _ref.showEmptyConditionPlaceholder,
     showEmptyConditionPlaceholder = _ref$showEmptyConditi === void 0 ? false : _ref$showEmptyConditi;
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  var text = useMemo(function () {
-    return _extends({
-      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'
-      }),
-      conditionSuffix: formatMessage({
-        id: 'DS.CONDITION.SUFFIX',
-        defaultMessage: 'and'
-      })
-    }, texts);
-  }, [texts, formatMessage]);
+  var _useSortable = useSortable({
+      id: step.id
+    }),
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition;
+  var zIndexStyle = hasPriority ? {
+    zIndex: 1001
+  } : {};
+  var style = _extends({}, zIndexStyle, {
+    transform: CSS.Transform.toString(transform),
+    transition: transition
+  });
+  var allTexts = useTranslations(texts);
   var withCruds = !readOnly && (duplicateStep || removeStep);
   var _onActivate = useCallback(function () {
     return setCurrentStep ? function () {
@@ -115,14 +88,15 @@ export var ConditionStep = function ConditionStep(_ref) {
       index: index,
       stepId: step.id,
       stepName: step.stepName || '',
-      texts: text,
+      texts: allTexts,
       updateStepName: updateStepName,
       removeStep: removeStep,
       duplicateStep: duplicateStep,
       draggableEnabled: Boolean(draggableEnabled),
-      readOnly: readOnly
+      readOnly: readOnly,
+      dragHandleProps: _extends({}, attributes, listeners)
     });
-  }, [draggableEnabled, duplicateStep, index, removeStep, step.id, step.stepName, text, updateStepName, readOnly]);
+  }, [draggableEnabled, attributes, listeners, duplicateStep, index, removeStep, step.id, step.stepName, allTexts, updateStepName, readOnly]);
   var renderContextSelector = useCallback(function (contextData) {
     var commonProps = _extends({}, contextData, {
       onActivate: _onActivate,
@@ -145,14 +119,14 @@ export var ConditionStep = function ConditionStep(_ref) {
     var _step$subject, _step$context, _step$actionAttribute;
     return !readOnly && addCondition && (maxConditionsLength === undefined || step.conditions.length < maxConditionsLength) && /*#__PURE__*/React.createElement(AddCondition, {
       errorText: step.addConditionErrorText,
-      texts: text,
+      texts: allTexts,
       stepId: step.id,
       "data-testid": "ds-add-condition-button",
       addCondition: onAddCondition,
       conditionsNumber: step.conditions.length,
       isDisabled: !((_step$subject = step.subject) != null && _step$subject.selectedItem) && !((_step$context = step.context) != null && _step$context.selectedItem) || showActionAttribute && !((_step$actionAttribute = step.actionAttribute) != null && _step$actionAttribute.value)
     });
-  }, [addCondition, onAddCondition, maxConditionsLength, step.conditions.length, step.context, step.id, step.subject, text, readOnly, step.addConditionErrorText, showActionAttribute, (_step$actionAttribute2 = step.actionAttribute) == null ? void 0 : _step$actionAttribute2.value]);
+  }, [addCondition, onAddCondition, maxConditionsLength, step.conditions.length, step.context, step.id, step.subject, allTexts, readOnly, step.addConditionErrorText, showActionAttribute, (_step$actionAttribute2 = step.actionAttribute) == null ? void 0 : _step$actionAttribute2.value]);
   var renderConditionRow = useCallback(function (condition, conditionIndex) {
     var _step$context2;
     var handleActivation = function handleActivation(conditionId) {
@@ -189,14 +163,14 @@ export var ConditionStep = function ConditionStep(_ref) {
       },
       setStepConditionFactorType: setStepConditionFactorType,
       setStepConditionFactorValue: setStepConditionFactorValue,
-      texts: text,
+      texts: allTexts,
       stepType: (_step$context2 = step.context) == null ? void 0 : _step$context2.type,
       onDeactivate: onDeactivate,
       readOnly: readOnly,
       parameterSelectorComponent: parameterSelectorComponent,
       factorParameterSelectorComponent: factorParameterSelectorComponent
     });
-  }, [step.id, step.conditions.length, step.context, hasPriority, currentConditionId, addCondition, removeCondition, minConditionsLength, maxConditionsLength, currentStepId, currentField, selectParameter, selectOperator, getPopupContainerOverride, setStepConditionFactorType, setStepConditionFactorValue, text, onDeactivate, _onActivate, setCurrentField, setCurrentCondition, setCurrentStep, inputProps, readOnly, parameterSelectorComponent, factorParameterSelectorComponent]);
+  }, [step.id, step.conditions.length, step.context, hasPriority, currentConditionId, addCondition, removeCondition, minConditionsLength, maxConditionsLength, currentStepId, currentField, selectParameter, selectOperator, getPopupContainerOverride, setStepConditionFactorType, setStepConditionFactorValue, allTexts, onDeactivate, _onActivate, setCurrentField, setCurrentCondition, setCurrentStep, inputProps, readOnly, parameterSelectorComponent, factorParameterSelectorComponent]);
   var hasSelectedSubjectOrContext = useMemo(function () {
     var _step$subject2, _step$context3;
     return ((_step$subject2 = step.subject) == null ? void 0 : _step$subject2.selectedItem) || ((_step$context3 = step.context) == null ? void 0 : _step$context3.selectedItem);
@@ -205,24 +179,24 @@ export var ConditionStep = function ConditionStep(_ref) {
     var _step$context5, _step$actionAttribute3;
     return ((_step$context5 = step.context) == null ? void 0 : _step$context5.errorText) || showActionAttribute && ((_step$actionAttribute3 = step.actionAttribute) == null ? void 0 : _step$actionAttribute3.errorText);
   }, [showActionAttribute, (_step$actionAttribute4 = step.actionAttribute) == null ? void 0 : _step$actionAttribute4.errorText, (_step$context6 = step.context) == null ? void 0 : _step$context6.errorText]);
-  return /*#__PURE__*/React.createElement(S.Step, {
+  return /*#__PURE__*/React.createElement(S.StepWrapper, {
+    style: style,
     key: step.id,
+    ref: setNodeRef,
+    isDragged: isDragged
+  }, isDragged ? /*#__PURE__*/React.createElement(S.DropLabel, null, allTexts.dropLabel) : /*#__PURE__*/React.createElement(S.Step, {
     id: "condition-step-" + step.id,
-    "data-dropLabel": text.dropLabel,
-    "data-conditionSuffix": text.conditionSuffix,
-    style: hasPriority ? {
-      zIndex: 1001
-    } : undefined,
+    "data-conditionSuffix": allTexts.conditionSuffix,
     active: step.id === currentStepId && currentField !== '',
     hoverDisabled: Boolean(currentStepId) || singleStepCondition,
-    showSuffix: showSuffix,
+    showSuffix: showSuffix && !isLast && !isDragged,
     singleStepCondition: singleStepCondition
   }, !updateStepName && /*#__PURE__*/React.createElement(S.DraggedLabel, null, ((_step$subject4 = step.subject) == null || (_step$subject4 = _step$subject4.selectedItem) == null ? void 0 : _step$subject4.name) || ((_step$context7 = step.context) == null || (_step$context7 = _step$context7.selectedItem) == null ? void 0 : _step$context7.name)), updateStepName && stepHeader, /*#__PURE__*/React.createElement(S.StepConditions, {
     withCruds: Boolean(!updateStepName && withCruds)
-  }, draggableEnabled && !updateStepName && /*#__PURE__*/React.createElement(S.DragIcon, {
+  }, draggableEnabled && !updateStepName && /*#__PURE__*/React.createElement(S.DragIcon, _extends({
     className: "step-drag-handler",
     component: /*#__PURE__*/React.createElement(DragHandleM, null)
-  }), /*#__PURE__*/React.createElement(S.Subject, {
+  }, attributes, listeners)), /*#__PURE__*/React.createElement(S.Subject, {
     "data-testid": "condition-subject-or-context"
   }, step.subject && /*#__PURE__*/React.createElement(Subject, _extends({}, step.subject, {
     getPopupContainerOverride: getPopupContainerOverride,
@@ -272,12 +246,9 @@ export var ConditionStep = function ConditionStep(_ref) {
     onDelete: removeStep ? function () {
       return removeStep(step.id);
     } : undefined,
-    duplicateTooltip: text.duplicateTooltip,
-    deleteTooltip: text.removeTooltip
+    duplicateTooltip: allTexts.duplicateTooltip,
+    deleteTooltip: allTexts.removeTooltip
   })) : /*#__PURE__*/React.createElement(EmptyCondition, {
-    label: (texts == null ? void 0 : texts.emptyConditionLabel) || formatMessage({
-      id: 'DS.CONDITION.EMPTY_CONDITION_LABEL',
-      defaultMessage: 'Choose event first'
-    })
-  })));
+    label: allTexts.emptyConditionLabel
+  }))));
 };

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

@@ -6,6 +6,8 @@ import type { OperatorsGroup, OperatorsItem } from '@synerise/ds-operators';
 import type { ConditionStep, ConditionProps } from '../Condition.types';
 export type ConditionStepProps = Pick<ConditionProps, 'singleStepCondition' | 'showActionAttribute' | 'showEmptyConditionPlaceholder' | 'showSuffix' | 'readOnly' | 'inputProps' | 'hoverDisabled' | 'getPopupContainerOverride' | 'minConditionsLength' | 'addCondition' | 'removeCondition' | 'texts' | 'maxConditionsLength' | 'contextSelectorComponent' | 'factorParameterSelectorComponent' | 'parameterSelectorComponent' | 'actionAttributeParameterSelectorComponent'> & {
     index: number;
+    isLast?: boolean;
+    isDragged?: boolean;
     step: ConditionStep;
     hasPriority?: boolean;
     onStepActivate?: (stepid: ReactText) => void;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import * as T from './StepHeader.types';
-export declare const StepHeader: ({ stepName, stepId, texts, updateStepName, duplicateStep, removeStep, index, draggableEnabled, readOnly, }: T.StepHeaderProps) => React.JSX.Element;
+export declare const StepHeader: ({ stepName, stepId, texts, updateStepName, duplicateStep, removeStep, index, draggableEnabled, dragHandleProps, readOnly, }: T.StepHeaderProps) => React.JSX.Element;

package/dist/ConditionStep/StepHeader/StepHeader.js

@@ -1,3 +1,4 @@
+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, { useRef, useState, useEffect, useCallback } from 'react';
 import { debounce } from 'lodash';
 import InlineEdit from '@synerise/ds-inline-edit';
@@ -5,6 +6,7 @@ import Cruds from '@synerise/ds-cruds';
 import { DragHandleM } from '@synerise/ds-icon';
 import { NOOP } from '@synerise/ds-utils';
 import * as S from '../../Condition.style';
+import { StepName } from '../StepName/StepName';
 export var StepHeader = function StepHeader(_ref) {
   var stepName = _ref.stepName,
     stepId = _ref.stepId,
@@ -14,6 +16,8 @@ export var StepHeader = function StepHeader(_ref) {
     removeStep = _ref.removeStep,
     index = _ref.index,
     draggableEnabled = _ref.draggableEnabled,
+    _ref$dragHandleProps = _ref.dragHandleProps,
+    dragHandleProps = _ref$dragHandleProps === void 0 ? {} : _ref$dragHandleProps,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
   var onChangeNameDebounce = useRef(debounce(updateStepName || NOOP, 300)).current;
@@ -32,10 +36,10 @@ export var StepHeader = function StepHeader(_ref) {
     setLocalName(event.target.value);
     onChangeNameDebounce(stepId, event.target.value);
   }, [onChangeNameDebounce, stepId]);
-  var dragHandleElement = !readOnly && draggableEnabled && /*#__PURE__*/React.createElement(S.DragIcon, {
+  var dragHandleElement = !readOnly && draggableEnabled && /*#__PURE__*/React.createElement(S.DragIcon, _extends({
     className: "step-drag-handler",
     component: /*#__PURE__*/React.createElement(DragHandleM, null)
-  });
+  }, dragHandleProps));
   var stepNameElement = readOnly ? localName : /*#__PURE__*/React.createElement(InlineEdit, {
     size: "small",
     input: {
@@ -58,7 +62,9 @@ export var StepHeader = function StepHeader(_ref) {
   return /*#__PURE__*/React.createElement(S.StepHeader, {
     className: "ds-condition-step-header",
     draggable: draggableEnabled
-  }, /*#__PURE__*/React.createElement(S.LeftSide, null, dragHandleElement, /*#__PURE__*/React.createElement(S.StepName, {
-    className: "ds-condition-step-name"
-  }, /*#__PURE__*/React.createElement(S.StepIndexWrapper, null, texts.stepNamePrefix, " ", "" + (index + 1)), stepNameElement)), crudElement);
+  }, /*#__PURE__*/React.createElement(S.LeftSide, null, dragHandleElement, /*#__PURE__*/React.createElement(StepName, {
+    name: stepNameElement,
+    index: index,
+    texts: texts
+  })), crudElement);
 };

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

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 import { ConditionProps, ConditionTexts } from '../../Condition.types';
 export type StepHeaderProps = {
     index: number;
-    texts: Partial<ConditionTexts>;
+    texts: ConditionTexts;
     stepName: string;
     stepId: React.ReactText;
     removeStep: ConditionProps['removeStep'];
@@ -10,4 +10,5 @@ export type StepHeaderProps = {
     updateStepName: ConditionProps['onUpdateStepName'];
     draggableEnabled: boolean;
     readOnly?: boolean;
+    dragHandleProps?: HTMLAttributes<HTMLDivElement>;
 };

package/dist/ConditionStep/StepName/StepName.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+import { ConditionTexts } from '../../Condition.types';
+type StepNameProps = {
+    texts: ConditionTexts;
+    index: number;
+    name: ReactNode;
+};
+export declare const StepName: ({ texts, index, name }: StepNameProps) => React.JSX.Element;
+export {};

package/dist/ConditionStep/StepName/StepName.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import * as S from '../../Condition.style';
+export var StepName = function StepName(_ref) {
+  var texts = _ref.texts,
+    index = _ref.index,
+    name = _ref.name;
+  return /*#__PURE__*/React.createElement(S.StepName, {
+    className: "ds-condition-step-name"
+  }, /*#__PURE__*/React.createElement(S.StepIndexWrapper, null, texts.stepNamePrefix, " ", "" + (index + 1)), name);
+};

package/dist/constants.d.ts

@@ -6,14 +6,6 @@ export declare const PARAMETER = "parameter";
 export declare const FACTOR = "factor";
 export declare const SUBJECT = "subject";
 export declare const ACTION_ATTRIBUTE = "actionAttribute";
-export declare const SORTABLE_CONFIG: {
-    ghostClass: string;
-    className: string;
-    handle: string;
-    filter: string;
-    animation: number;
-    forceFallback: boolean;
-};
 export declare const DEFAULT_INPUT_PROPS: {
     autoResize: {
         minWidth: string;

package/dist/constants.js

@@ -6,14 +6,6 @@ export var PARAMETER = 'parameter';
 export var FACTOR = 'factor';
 export var SUBJECT = 'subject';
 export var ACTION_ATTRIBUTE = 'actionAttribute';
-export var SORTABLE_CONFIG = {
-  ghostClass: 'steps-list-ghost-element',
-  className: 'steps-list',
-  handle: '.step-drag-handler',
-  filter: '.ds-condition-step-name, .ds-cruds',
-  animation: 150,
-  forceFallback: true
-};
 export var DEFAULT_INPUT_PROPS = {
   autoResize: {
     minWidth: '173px',

package/dist/hooks/useTranslations.d.ts

@@ -0,0 +1,2 @@
+import { ConditionTexts } from '../Condition.types';
+export declare const useTranslations: (defaultTexts?: Partial<ConditionTexts>) => ConditionTexts;

package/dist/hooks/useTranslations.js

@@ -0,0 +1,60 @@
+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 { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+export var useTranslations = function useTranslations(defaultTexts) {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var texts = useMemo(function () {
+    return _extends({
+      stepNamePrefix: formatMessage({
+        id: 'DS.CONDITION.STEP_NAME-PREFIX',
+        defaultMessage: 'Step'
+      }),
+      emptyConditionLabel: formatMessage({
+        id: 'DS.CONDITION.EMPTY_CONDITION_LABEL',
+        defaultMessage: 'Choose event first'
+      }),
+      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'
+      }),
+      conditionSuffix: formatMessage({
+        id: 'DS.CONDITION.SUFFIX',
+        defaultMessage: 'and'
+      })
+    }, defaultTexts || {});
+  }, [formatMessage, defaultTexts]);
+  return texts;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-condition",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "description": "Condition UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,20 +34,20 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.3.3",
-    "@synerise/ds-context-selector": "^1.1.13",
-    "@synerise/ds-cruds": "^1.0.10",
-    "@synerise/ds-factors": "^1.2.2",
-    "@synerise/ds-icon": "^1.5.2",
-    "@synerise/ds-inline-edit": "^1.0.14",
-    "@synerise/ds-input": "^1.2.1",
-    "@synerise/ds-operators": "^1.0.13",
-    "@synerise/ds-subject": "^1.0.14",
-    "@synerise/ds-tooltip": "^1.1.9",
-    "@synerise/ds-utils": "^1.2.0",
-    "lodash": "^4.17.19",
-    "react-sortablejs": "^6.0.0",
-    "sortablejs": "1.15.1"
+    "@synerise/ds-button": "^1.4.1",
+    "@synerise/ds-context-selector": "^1.1.15",
+    "@synerise/ds-cruds": "^1.0.12",
+    "@synerise/ds-factors": "^1.3.1",
+    "@synerise/ds-icon": "^1.5.3",
+    "@synerise/ds-inline-edit": "^1.0.16",
+    "@synerise/ds-input": "^1.3.1",
+    "@synerise/ds-operators": "^1.0.15",
+    "@synerise/ds-sortable": "^1.3.0",
+    "@synerise/ds-subject": "^1.0.16",
+    "@synerise/ds-tooltip": "^1.1.11",
+    "@synerise/ds-typography": "^1.0.12",
+    "@synerise/ds-utils": "^1.3.0",
+    "lodash": "^4.17.19"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -55,5 +55,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "275b6d6fdd81f5576a95e516ac12c810da8c1519"
+  "gitHead": "11fe1d29b2ac23e70c3d5e6ce8ae20201a619a34"
 }