@synerise/ds-condition 0.14.3 → 0.16.0

package/CHANGELOG.md

@@ -3,6 +3,53 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.16.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.15.1...@synerise/ds-condition@0.16.0) (2022-05-13)
+
+
+### Bug Fixes
+
+* **condition:** disabling hover effect on nonactive condition in filter ([228f242](https://github.com/Synerise/synerise-design/commit/228f242e6ce244c73e9da93adb2c4317cd65ec91))
+* **condition:** fixes styles of dragged condition with opened dropdown ([0449e94](https://github.com/Synerise/synerise-design/commit/0449e948dc598974c81e7f857431c519c5fa2666))
+
+
+### Features
+
+* **condition:** adds defaultOpenedComponent prop ([6b6721d](https://github.com/Synerise/synerise-design/commit/6b6721dbd12be7e744100d303a5d3d7823467c3b))
+
+
+
+
+
+## [0.15.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.15.0...@synerise/ds-condition@0.15.1) (2022-04-29)
+
+**Note:** Version bump only for package @synerise/ds-condition
+
+
+
+
+
+# [0.15.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.14.4...@synerise/ds-condition@0.15.0) (2022-04-29)
+
+
+### Features
+
+* **condition:** clearing active step on deactivating inner components ([ad45310](https://github.com/Synerise/synerise-design/commit/ad45310cde108e40b2b88c0a88bf801d679056db))
+
+
+
+
+
+## [0.14.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.14.3...@synerise/ds-condition@0.14.4) (2022-04-13)
+
+
+### Bug Fixes
+
+* **condition:** conditionally render addCondition renderProp ([78a3de7](https://github.com/Synerise/synerise-design/commit/78a3de75d8ec9c917d96c1b54c70d24f50dc8c7a))
+
+
+
+
+
 ## [0.14.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.14.2...@synerise/ds-condition@0.14.3) (2022-04-12)
 
 

package/README.md

@@ -123,6 +123,7 @@ import Condition from '@synerise/ds-condition'
 | 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                                                  | -       |
 | getPopupContainerOverride | Popup container function for child tooltips and dropdowns     | (trigger: HTMLElement | null) => HTMLElement;                                                     | -       |
+| defaultOpenedComponent    | Component which should be opened after render                 | 'subject' \ 'operator' \ 'factor' \ 'parameter' \ 'context'                                       | -       |
 
 ### ConditionStep
 

package/dist/Condition.js

@@ -39,6 +39,7 @@ var Condition = function Condition(props) {
       duplicateStep = props.duplicateStep,
       removeStep = props.removeStep,
       addStep = props.addStep,
+      renderAddStep = props.renderAddStep,
       onChangeOrder = props.onChangeOrder,
       _props$minConditionsL = props.minConditionsLength,
       minConditionsLength = _props$minConditionsL === void 0 ? 1 : _props$minConditionsL,
@@ -51,7 +52,11 @@ var Condition = function Condition(props) {
       onChangeFactorType = props.onChangeFactorType,
       onChangeFactorValue = props.onChangeFactorValue,
       onUpdateStepName = props.onUpdateStepName,
-      getPopupContainerOverride = props.getPopupContainerOverride;
+      getPopupContainerOverride = props.getPopupContainerOverride,
+      showSuffix = props.showSuffix,
+      hoverDisabled = props.hoverDisabled,
+      _props$autoOpenedComp = props.autoOpenedComponent,
+      autoOpenedComponent = _props$autoOpenedComp === void 0 ? DEFAULT_FIELD : _props$autoOpenedComp;
 
   var _useIntl = useIntl(),
       formatMessage = _useIntl.formatMessage;
@@ -61,6 +66,10 @@ var Condition = function Condition(props) {
       addStep: formatMessage({
         id: 'DS.CONDITION.ADD-STEP',
         defaultMessage: 'and then...'
+      }),
+      conditionSuffix: formatMessage({
+        id: 'DS.CONDITION.SUFFIX',
+        defaultMessage: 'and'
       })
     }, texts);
   }, [texts, formatMessage]);
@@ -73,11 +82,19 @@ var Condition = function Condition(props) {
       currentStepId = _React$useState2[0],
       setCurrentStepId = _React$useState2[1];
 
-  var _React$useState3 = React.useState(DEFAULT_FIELD),
+  var _React$useState3 = React.useState(autoOpenedComponent),
       currentField = _React$useState3[0],
       setCurrentField = _React$useState3[1];
 
   var prevSteps = usePrevious(steps);
+  React.useEffect(function () {
+    if (autoOpenedComponent && steps.length && steps[0].conditions[0].operator && steps[0].conditions[0].operator.value === undefined) {
+      setCurrentStepId(steps[0].id);
+      setCurrentConditionId(steps[0].conditions[0].id);
+      setCurrentField(autoOpenedComponent);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
   React.useEffect(function () {
     var newConditionId = prevSteps && steps && steps.reduce(function (id, step) {
       var result = id;
@@ -195,7 +212,7 @@ var Condition = function Condition(props) {
       setCurrentField(SUBJECT);
     }
   }, [addStep]);
-  var handleAddCondtion = React.useMemo(function () {
+  var handleAddCondition = React.useMemo(function () {
     if (!addCondition) {
       return undefined;
     }
@@ -210,6 +227,11 @@ var Condition = function Condition(props) {
       }
     };
   }, [addCondition]);
+  var handleClearActiveCondition = React.useCallback(function () {
+    setCurrentConditionId(DEFAULT_CONDITION);
+    setCurrentStepId(DEFAULT_STEP);
+    setCurrentField(DEFAULT_FIELD);
+  }, []);
   return React.useMemo(function () {
     return /*#__PURE__*/React.createElement(S.Condition, {
       className: "ds-conditions",
@@ -241,10 +263,13 @@ var Condition = function Condition(props) {
         currentStepId: currentStepId,
         currentField: currentField,
         removeCondition: removeCondition,
-        addCondition: handleAddCondtion,
+        addCondition: handleAddCondition,
         setCurrentField: setCurrentField,
         setCurrentCondition: setCurrentConditionId,
-        setCurrentStep: setCurrentStepId
+        setCurrentStep: setCurrentStepId,
+        onDeactivate: handleClearActiveCondition,
+        showSuffix: showSuffix,
+        hoverDisabled: hoverDisabled || currentStepId !== step.id && currentStepId !== undefined
       });
     })), addStep && /*#__PURE__*/React.createElement(S.AddStepButton, null, /*#__PURE__*/React.createElement(Button, {
       type: "ghost",
@@ -252,8 +277,8 @@ var Condition = function Condition(props) {
       onClick: handleAddStep
     }, /*#__PURE__*/React.createElement(Icon, {
       component: /*#__PURE__*/React.createElement(Add3M, null)
-    }), text.addStep)));
-  }, [steps, onChangeOrder, addStep, handleAddStep, text, currentConditionId, currentStepId, currentField, getPopupContainerOverride, draggableEnabled, handleAddCondtion, selectOperator, selectParameter, selectContext, selectSubject, onUpdateStepName, duplicateStep, removeStep, minConditionsLength, maxConditionsLength, setStepConditionFactorType, setStepConditionFactorValue, removeCondition]);
+    }), text.addStep)), renderAddStep && /*#__PURE__*/React.createElement(S.AddStepButton, null, renderAddStep()));
+  }, [steps, onChangeOrder, addStep, handleAddStep, text, renderAddStep, currentStepId, getPopupContainerOverride, draggableEnabled, selectOperator, selectParameter, selectContext, selectSubject, onUpdateStepName, duplicateStep, removeStep, minConditionsLength, maxConditionsLength, setStepConditionFactorType, setStepConditionFactorValue, currentConditionId, currentField, removeCondition, handleAddCondition, handleClearActiveCondition, showSuffix, hoverDisabled]);
 };
 
 export default Condition;

package/dist/Condition.style.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
+import { ConditionRowProps } from './ConditionStep/ConditionRow';
+export declare const DragIcon: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-icon").IconProps>, any, {}, never>;
+export declare const StepConditionCruds: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-cruds/dist/Cruds.types").CrudsProps> & import("@synerise/ds-cruds/dist/Cruds.types").CrudsSubComponents, any, {}, never>;
 export declare const StepConditions: import("styled-components").StyledComponent<"div", any, {
     withoutStepName: boolean;
 }, never>;
@@ -6,13 +9,15 @@ export declare const StepName: import("styled-components").StyledComponent<"div"
 export declare const Condition: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ConditionStepWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const And: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DragIcon: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-icon").IconProps>, any, {}, never>;
 export declare const StepCruds: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LeftSide: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StepHeader: import("styled-components").StyledComponent<"div", any, {
-    draggable: boolean;
+export declare const StepHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DraggedLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Step: import("styled-components").StyledComponent<"div", any, {
+    active: boolean;
+    showSuffix: boolean | undefined;
+    hoverDisabled?: boolean | undefined;
 }, never>;
-export declare const Step: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ConditionWrapper: import("styled-components").StyledComponent<"div", any, {
     fullWidth?: boolean | undefined;
 }, never>;
@@ -21,6 +26,7 @@ export declare const RemoveIconWrapper: import("styled-components").StyledCompon
 export declare const ConditionRows: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ConditionRow: import("styled-components").StyledComponent<"div", any, {
     index: number;
+    stepType: ConditionRowProps['stepType'];
 }, never>;
 export declare const AddConditionRow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ConditionConnections: import("styled-components").StyledComponent<"span", any, {

package/dist/Condition.style.js

@@ -1,92 +1,107 @@
-import styled from 'styled-components';
+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';
+export var DragIcon = styled(Icon).withConfig({
+  displayName: "Conditionstyle__DragIcon",
+  componentId: "sc-1lk06p3-0"
+})(["opacity:0;visibility:hidden;position:absolute;top:0;left:-24px;cursor:grab;"]);
+export var StepConditionCruds = styled(Cruds).withConfig({
+  displayName: "Conditionstyle__StepConditionCruds",
+  componentId: "sc-1lk06p3-1"
+})(["position:absolute;top:16px;right:24px;visibility:hidden;opacity:0;"]);
 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;margin-top:0;padding:0 24px;width:100%;"]);
+  componentId: "sc-1lk06p3-2"
+})(["display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;margin-top:0;padding:0 24px;width:", ";", "{left:0;top:16px;}"], function (props) {
+  return props.withoutStepName ? 'calc(100% - 48px)' : '100%';
+}, DragIcon);
 export var StepName = styled.div.withConfig({
   displayName: "Conditionstyle__StepName",
-  componentId: "sc-1lk06p3-1"
+  componentId: "sc-1lk06p3-3"
 })(["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) {
   return props.theme.palette['grey-800'];
 });
 export var Condition = styled.div.withConfig({
   displayName: "Conditionstyle__Condition",
-  componentId: "sc-1lk06p3-2"
+  componentId: "sc-1lk06p3-4"
 })(["padding:12px 0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-width:575px;width:100%;.steps-list{width:100%;}"]);
 export var ConditionStepWrapper = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionStepWrapper",
-  componentId: "sc-1lk06p3-3"
+  componentId: "sc-1lk06p3-5"
 })(["display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;width:100%;"]);
 export var And = styled.div.withConfig({
   displayName: "Conditionstyle__And",
-  componentId: "sc-1lk06p3-4"
-})([""]);
-export var DragIcon = styled(Icon).withConfig({
-  displayName: "Conditionstyle__DragIcon",
-  componentId: "sc-1lk06p3-5"
-})(["opacity:0;visibility:hidden;position:absolute;top:0;left:-24px;"]);
+  componentId: "sc-1lk06p3-6"
+})(["display:contents;"]);
 export var StepCruds = styled.div.withConfig({
   displayName: "Conditionstyle__StepCruds",
-  componentId: "sc-1lk06p3-6"
+  componentId: "sc-1lk06p3-7"
 })(["display:flex;align-items:center;justify-content:flex-end;opacity:0;visibility:hidden;"]);
 export var LeftSide = styled.div.withConfig({
   displayName: "Conditionstyle__LeftSide",
-  componentId: "sc-1lk06p3-7"
+  componentId: "sc-1lk06p3-8"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;position:relative;"]);
 export var StepHeader = styled.div.withConfig({
   displayName: "Conditionstyle__StepHeader",
-  componentId: "sc-1lk06p3-8"
-})(["display:flex;width:100%;flex-direction:row;align-items:flex-end;justify-content:space-between;margin-bottom:8px;padding:12px 24px 0;cursor:", ";"], function (props) {
-  return props.draggable ? 'grab' : 'default';
+  componentId: "sc-1lk06p3-9"
+})(["display:flex;width:100%;flex-direction:row;align-items:flex-end;justify-content:space-between;margin-bottom:8px;padding:0 24px;"]);
+export var DraggedLabel = styled.span.withConfig({
+  displayName: "Conditionstyle__DraggedLabel",
+  componentId: "sc-1lk06p3-10"
+})(["width:100%;height:100%;display:none;position:absolute;top:0;left:0;align-items:center;justify-content:flex-start;padding-left:18px;color:", ";font-size:13px;"], function (props) {
+  return props.theme.palette['grey-600'];
 });
 export var Step = styled.div.withConfig({
   displayName: "Conditionstyle__Step",
-  componentId: "sc-1lk06p3-9"
-})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:0 0 12px;position:relative;&:first-of-type{&.steps-list-ghost-element{&:after{display:none;}}}&:hover{background-color:", ";", "{opacity:1;visibility:visible;}", "{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-left:2px solid ", ";border-radius:0;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-050'];
-}, StepCruds, DragIcon, function (props) {
+  componentId: "sc-1lk06p3-11"
+})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:12px 0 12px;position:relative;", " &:first-of-type{&.steps-list-ghost-element{&:after{display:none;}}}background-color:", ";&:hover{background-color:", ";", "{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 (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);
+}, function (props) {
+  return props.active ? props.theme.palette['grey-050'] : 'transparent';
+}, function (props) {
+  return props.hoverDisabled ? 'transparent' : props.theme.palette['grey-050'];
+}, StepCruds, StepConditionCruds, DragIcon, function (props) {
   return props.theme.palette.white;
-}, StepHeader, StepName, IconWrapper, StepConditions, function (props) {
+}, StepHeader, StepName, IconWrapper, StepConditions, DraggedLabel, function (props) {
   return props.theme.palette['blue-050'];
 }, function (props) {
   return props.theme.palette['blue-600'];
-}, function (props) {
-  return props.theme.palette['grey-300'];
 }, function (props) {
   return props.theme.palette['blue-600'];
-});
+}, DraggedLabel);
 export var ConditionWrapper = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionWrapper",
-  componentId: "sc-1lk06p3-10"
+  componentId: "sc-1lk06p3-12"
 })([""]);
 export var Subject = styled.div.withConfig({
   displayName: "Conditionstyle__Subject",
-  componentId: "sc-1lk06p3-11"
+  componentId: "sc-1lk06p3-13"
 })([""]);
 export var RemoveIconWrapper = styled.span.withConfig({
   displayName: "Conditionstyle__RemoveIconWrapper",
-  componentId: "sc-1lk06p3-12"
+  componentId: "sc-1lk06p3-14"
 })(["visibility:hidden;pointer-events:none;opacity:0;transition:all 0.3s ease;width:32px;height:32px;display:flex;align-items:center;justify-content:center;margin-left:8px;"]);
 export var ConditionRows = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionRows",
-  componentId: "sc-1lk06p3-13"
+  componentId: "sc-1lk06p3-15"
 })(["display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;"]);
 export var ConditionRow = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionRow",
-  componentId: "sc-1lk06p3-14"
-})(["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) {
+  componentId: "sc-1lk06p3-16"
+})(["display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;padding-bottom:", ";z-index:", ";", "{margin-right:8px;&:last-of-type{margin-right:0;}}&:hover{", "{opacity:1;visibility:visible;pointer-events:all;cursor:pointer;}}"], function (props) {
+  return props.stepType === 'event' ? '16px' : '0';
+}, function (props) {
   return 10000 - props.index;
 }, ConditionWrapper, RemoveIconWrapper);
 export var AddConditionRow = styled.div.withConfig({
   displayName: "Conditionstyle__AddConditionRow",
-  componentId: "sc-1lk06p3-15"
+  componentId: "sc-1lk06p3-17"
 })(["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-16"
-})(["display:flex;width:32px;margin:0 12px;position:relative;height:32px;&:before{position:absolute;content:'';width:", ";height:1px;top:50%;left:", ";background-color:", ";}&:after{display:", ";position:absolute;content:'';width:1px;left:50%;height:auto;top:", ";bottom:", ";background-color:", ";}"], function (props) {
+  componentId: "sc-1lk06p3-18"
+})(["display:flex;width:32px;min-width:32px;margin:0 12px;position:relative;height:32px;&:before{position:absolute;content:'';width:", ";height:1px;top:50%;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) {
   return props.first ? '0' : '16px';
@@ -103,5 +118,5 @@ export var ConditionConnections = styled.span.withConfig({
 });
 export var AddStepButton = styled.div.withConfig({
   displayName: "Conditionstyle__AddStepButton",
-  componentId: "sc-1lk06p3-17"
+  componentId: "sc-1lk06p3-19"
 })(["margin:12px 24px 0;"]);

package/dist/Condition.types.d.ts

@@ -26,11 +26,13 @@ export declare type ConditionTexts = {
     moveTooltip: string;
     duplicateTooltip: string;
     removeTooltip: string;
+    conditionSuffix: string;
 };
 export declare type ConditionProps = {
     steps: ConditionStep[];
     getPopupContainerOverride?: (trigger: HTMLElement | null) => HTMLElement;
     addCondition?: (stepId: React.ReactText) => string | undefined;
+    renderAddStep?: () => React.ReactNode;
     removeCondition?: (stepId: React.ReactText, conditionRowId: React.ReactText) => void;
     removeStep?: (stepId: React.ReactText) => void;
     duplicateStep?: (stepId: React.ReactText) => void;
@@ -48,4 +50,7 @@ export declare type ConditionProps = {
     onChangeFactorType: (stepId: React.ReactText, conditionId: React.ReactText, value: FactorType | undefined) => void;
     onUpdateStepName?: (stepId: React.ReactText, value: string) => void;
     type?: 'attribute' | 'event';
+    showSuffix?: boolean;
+    hoverDisabled?: boolean;
+    autoOpenedComponent?: 'subject' | 'operator' | 'factor' | 'parameter' | 'context';
 };

package/dist/ConditionStep/ConditionRow/ConditionRow.js

@@ -31,8 +31,11 @@ export var ConditionRow = function ConditionRow(_ref) {
       getPopupContainerOverride = _ref.getPopupContainerOverride,
       _onActivate = _ref.onActivate,
       hasPriority = _ref.hasPriority,
-      texts = _ref.texts;
+      texts = _ref.texts,
+      stepType = _ref.stepType,
+      onDeactivate = _ref.onDeactivate;
   return /*#__PURE__*/React.createElement(S.ConditionRow, {
+    stepType: stepType,
     style: hasPriority ? {
       zIndex: 10001
     } : undefined,
@@ -46,6 +49,7 @@ export var ConditionRow = function ConditionRow(_ref) {
     onActivate: function onActivate() {
       return _onActivate && _onActivate(PARAMETER);
     },
+    onDeactivate: onDeactivate,
     onChangeValue: function onChangeValue(value) {
       return selectParameter(stepId, conditionId, value);
     },
@@ -55,6 +59,7 @@ export var ConditionRow = function ConditionRow(_ref) {
     onActivate: function onActivate() {
       return _onActivate && _onActivate(OPERATOR);
     },
+    onDeactivate: onDeactivate,
     onChange: function onChange(value) {
       return selectOperator(stepId, conditionId, value);
     },
@@ -66,6 +71,7 @@ export var ConditionRow = function ConditionRow(_ref) {
     onActivate: function onActivate() {
       return _onActivate && _onActivate(FACTOR);
     },
+    onDeactivate: onDeactivate,
     setSelectedFactorType: function setSelectedFactorType(factorType) {
       return setStepConditionFactorType(stepId, conditionId, factorType);
     },

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

@@ -6,6 +6,7 @@ export declare type ConditionRowProps = {
     index: number;
     hasPriority?: boolean;
     onActivate?: (fieldType: string) => void;
+    onDeactivate?: () => void;
     conditionId: React.ReactText;
     addCondition?: (stepId: React.ReactText) => void;
     conditionParameter: FactorsProps;

package/dist/ConditionStep/ConditionStep.js

@@ -10,6 +10,7 @@ import * as React from 'react';
 import Subject from '@synerise/ds-subject';
 import ContextSelector from '@synerise/ds-context-selector';
 import { useIntl } from 'react-intl';
+import { DragHandleM } from '@synerise/ds-icon';
 import * as S from '../Condition.style';
 import { StepHeader } from './StepHeader';
 import { AddCondition } from './AddCondition';
@@ -17,6 +18,8 @@ import { ConditionRow } from './ConditionRow';
 import { SUBJECT } from '../Condition'; // eslint-disable-next-line import/prefer-default-export
 
 export var ConditionStep = function ConditionStep(_ref) {
+  var _step$subject2, _step$subject2$select, _step$context3, _step$context3$select;
+
   var step = _ref.step,
       texts = _ref.texts,
       index = _ref.index,
@@ -42,7 +45,10 @@ export var ConditionStep = function ConditionStep(_ref) {
       currentField = _ref.currentField,
       setCurrentField = _ref.setCurrentField,
       setCurrentCondition = _ref.setCurrentCondition,
-      setCurrentStep = _ref.setCurrentStep;
+      setCurrentStep = _ref.setCurrentStep,
+      onDeactivate = _ref.onDeactivate,
+      showSuffix = _ref.showSuffix,
+      hoverDisabled = _ref.hoverDisabled;
 
   var _useIntl = useIntl(),
       formatMessage = _useIntl.formatMessage;
@@ -84,6 +90,10 @@ export var ConditionStep = function ConditionStep(_ref) {
       addStep: formatMessage({
         id: 'DS.CONDITION.ADD-STEP',
         defaultMessage: 'Add step'
+      }),
+      conditionSuffix: formatMessage({
+        id: 'DS.CONDITION.SUFFIX',
+        defaultMessage: 'and'
       })
     }, texts);
   }, [texts, formatMessage]);
@@ -156,21 +166,30 @@ export var ConditionStep = function ConditionStep(_ref) {
       setStepConditionFactorType: setStepConditionFactorType,
       setStepConditionFactorValue: setStepConditionFactorValue,
       texts: text,
-      stepType: (_step$context2 = step.context) == null ? void 0 : _step$context2.type
+      stepType: (_step$context2 = step.context) == null ? void 0 : _step$context2.type,
+      onDeactivate: onDeactivate
     });
-  }, [step.id, step.conditions.length, step.context, hasPriority, currentConditionId, addCondition, removeCondition, minConditionsLength, maxConditionsLength, currentStepId, currentField, selectParameter, selectOperator, getPopupContainerOverride, setStepConditionFactorType, setStepConditionFactorValue, text, onActivate, setCurrentField, setCurrentCondition, setCurrentStep]);
+  }, [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]);
   return /*#__PURE__*/React.createElement(S.Step, {
     key: step.id,
     id: "condition-step-" + step.id,
     "data-dropLabel": text.dropLabel,
+    "data-conditionSuffix": text.conditionSuffix,
     style: hasPriority ? {
       zIndex: 10001
-    } : undefined
-  }, updateStepName && stepHeader, /*#__PURE__*/React.createElement(S.StepConditions, {
+    } : undefined,
+    active: step.id === currentStepId && currentField !== '',
+    hoverDisabled: hoverDisabled,
+    showSuffix: showSuffix
+  }, !updateStepName && /*#__PURE__*/React.createElement(S.DraggedLabel, null, ((_step$subject2 = step.subject) == null ? void 0 : (_step$subject2$select = _step$subject2.selectedItem) == null ? void 0 : _step$subject2$select.name) || ((_step$context3 = step.context) == null ? void 0 : (_step$context3$select = _step$context3.selectedItem) == null ? void 0 : _step$context3$select.name)), updateStepName && stepHeader, /*#__PURE__*/React.createElement(S.StepConditions, {
     withoutStepName: updateStepName === undefined
-  }, /*#__PURE__*/React.createElement(S.Subject, null, step.subject && /*#__PURE__*/React.createElement(Subject, _extends({}, step.subject, {
+  }, draggableEnabled && !updateStepName && /*#__PURE__*/React.createElement(S.DragIcon, {
+    className: "step-drag-handler",
+    component: /*#__PURE__*/React.createElement(DragHandleM, null)
+  }), /*#__PURE__*/React.createElement(S.Subject, null, step.subject && /*#__PURE__*/React.createElement(Subject, _extends({}, step.subject, {
     getPopupContainerOverride: getPopupContainerOverride,
     onActivate: onActivate,
+    onDeactivate: onDeactivate,
     opened: step.id === currentStepId && currentField === SUBJECT,
     onSelectItem: function onSelectItem(value) {
       return selectSubject(value, step.id);
@@ -178,9 +197,19 @@ export var ConditionStep = function ConditionStep(_ref) {
   })), step.context && /*#__PURE__*/React.createElement(ContextSelector, _extends({}, step.context, {
     getPopupContainerOverride: getPopupContainerOverride,
     onActivate: onActivate,
+    onDeactivate: onDeactivate,
     opened: step.id === currentStepId && currentField === SUBJECT,
     onSelectItem: function onSelectItem(value) {
       return selectContext(value, step.id);
     }
-  }))), /*#__PURE__*/React.createElement(S.ConditionRows, null, step.conditions.length > 0 && step.conditions.map(renderConditionRow), addConditionButton)));
+  }))), /*#__PURE__*/React.createElement(S.ConditionRows, null, step.conditions.length > 0 && step.conditions.map(renderConditionRow), addConditionButton), !updateStepName && /*#__PURE__*/React.createElement(S.StepConditionCruds, {
+    onDuplicate: duplicateStep ? function () {
+      return duplicateStep(step.id);
+    } : undefined,
+    onDelete: removeStep ? function () {
+      return removeStep(step.id);
+    } : undefined,
+    duplicateTooltip: text.duplicateTooltip,
+    deleteTooltip: text.removeTooltip
+  })));
 };

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

@@ -31,4 +31,7 @@ export declare type ConditionStepProps = {
     setCurrentField: (field: string) => void;
     setCurrentCondition: (conditionId: string) => void;
     setCurrentStep: (stepId: React.ReactText) => void;
+    onDeactivate: () => void;
+    showSuffix?: boolean;
+    hoverDisabled?: boolean;
 };

package/dist/ConditionStep/StepHeader/StepHeader.js

@@ -29,11 +29,12 @@ export var StepHeader = function StepHeader(_ref) {
     onChangeNameDebounce(stepId, event.target.value);
   }, [onChangeNameDebounce, stepId]);
   return /*#__PURE__*/React.createElement(S.StepHeader, {
-    className: "step-drag-handler",
+    className: "ds-condition-step-header",
     draggable: draggableEnabled
   }, /*#__PURE__*/React.createElement(S.LeftSide, null, draggableEnabled && /*#__PURE__*/React.createElement(S.DragIcon, {
+    className: "step-drag-handler",
     component: /*#__PURE__*/React.createElement(DragHandleM, null)
-  }), updateStepName && /*#__PURE__*/React.createElement(S.StepName, {
+  }), /*#__PURE__*/React.createElement(S.StepName, {
     className: "ds-condition-step-name"
   }, "" + (index + 1), ' ', /*#__PURE__*/React.createElement(InlineEdit, {
     size: "small",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-condition",
-  "version": "0.14.3",
+  "version": "0.16.0",
   "description": "Condition UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,14 +33,14 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-button": "^0.17.2",
-    "@synerise/ds-context-selector": "^0.11.0",
-    "@synerise/ds-core": "^0.33.0",
+    "@synerise/ds-context-selector": "^0.12.1",
+    "@synerise/ds-core": "^0.34.0",
     "@synerise/ds-cruds": "^0.3.9",
-    "@synerise/ds-factors": "^0.12.2",
+    "@synerise/ds-factors": "^0.13.2",
     "@synerise/ds-icon": "^0.49.0",
-    "@synerise/ds-inline-edit": "^0.6.11",
-    "@synerise/ds-operators": "^0.8.1",
-    "@synerise/ds-subject": "^0.8.1",
+    "@synerise/ds-inline-edit": "^0.6.12",
+    "@synerise/ds-operators": "^0.9.0",
+    "@synerise/ds-subject": "^0.9.0",
     "@synerise/ds-tooltip": "^0.11.9",
     "@synerise/ds-utils": "^0.19.0",
     "react-sortablejs": "^6.0.0"
@@ -49,5 +49,5 @@
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "78a3de75d8ec9c917d96c1b54c70d24f50dc8c7a"
+  "gitHead": "25e5737ebe9d4319de963b369bc281651872887c"
 }