@synerise/ds-condition 0.24.12 → 0.24.14

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.24.14](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.24.13...@synerise/ds-condition@0.24.14) (2024-10-29)
+
+**Note:** Version bump only for package @synerise/ds-condition
+
+
+
+
+
+## [0.24.13](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.24.12...@synerise/ds-condition@0.24.13) (2024-10-28)
+
+**Note:** Version bump only for package @synerise/ds-condition
+
+
+
+
+
 ## [0.24.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.24.11...@synerise/ds-condition@0.24.12) (2024-10-24)
 
 **Note:** Version bump only for package @synerise/ds-condition

package/dist/Condition.js

@@ -15,7 +15,7 @@ import { NOOP } from '@synerise/ds-utils';
 import usePrevious from '@synerise/ds-utils/dist/usePrevious/usePrevious';
 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 } from './constants';
+import { SORTABLE_CONFIG, DEFAULT_CONDITION, DEFAULT_FIELD, DEFAULT_STEP, OPERATOR, FACTOR, PARAMETER, SUBJECT, DEFAULT_INPUT_PROPS, ACTION_ATTRIBUTE } from './constants';
 
 var Condition = function Condition(props) {
   var steps = props.steps,
@@ -46,7 +46,12 @@ var Condition = function Condition(props) {
       inputProps = props.inputProps,
       onDeactivate = props.onDeactivate,
       _props$readOnly = props.readOnly,
-      readOnly = _props$readOnly === void 0 ? false : _props$readOnly;
+      readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+      singleStepCondition = props.singleStepCondition,
+      showActionAttribute = props.showActionAttribute,
+      onChangeActionAttribute = props.onChangeActionAttribute,
+      _props$showEmptyCondi = props.showEmptyConditionPlaceholder,
+      showEmptyConditionPlaceholder = _props$showEmptyCondi === void 0 ? false : _props$showEmptyCondi;
 
   var _useIntl = useIntl(),
       formatMessage = _useIntl.formatMessage;
@@ -156,15 +161,33 @@ var Condition = function Condition(props) {
   var selectSubject = useCallback(function (value, stepId) {
     clearConditionRow(stepId);
     setCurrentStepId(stepId);
-    setCurrentField(PARAMETER);
+
+    if (showActionAttribute) {
+      setCurrentField(ACTION_ATTRIBUTE);
+    } else {
+      setCurrentField(PARAMETER);
+    }
+
     onChangeSubject && onChangeSubject(stepId, value);
-  }, [clearConditionRow, onChangeSubject]);
+  }, [clearConditionRow, onChangeSubject, showActionAttribute]);
   var selectContext = useCallback(function (value, stepId) {
     clearConditionRow(stepId);
     setCurrentStepId(stepId);
-    setCurrentField(PARAMETER);
+
+    if (showActionAttribute) {
+      setCurrentField(ACTION_ATTRIBUTE);
+    } else {
+      setCurrentField(PARAMETER);
+    }
+
     onChangeContext && onChangeContext(stepId, value);
-  }, [clearConditionRow, onChangeContext]);
+  }, [clearConditionRow, onChangeContext, showActionAttribute]);
+  var selectActionAttribute = useCallback(function (value, stepId) {
+    clearConditionRow(stepId);
+    setCurrentStepId(stepId);
+    setCurrentField(PARAMETER);
+    onChangeActionAttribute && onChangeActionAttribute(stepId, value);
+  }, [onChangeActionAttribute, clearConditionRow]);
   var selectParameter = useCallback(function (stepId, conditionId, value) {
     if (conditionId && onChangeParameter) {
       autoClearCondition && onChangeOperator && onChangeOperator(stepId, conditionId, undefined);
@@ -247,6 +270,7 @@ var Condition = function Condition(props) {
         selectParameter: selectParameter,
         selectContext: selectContext,
         selectSubject: selectSubject,
+        selectActionAttribute: selectActionAttribute,
         updateStepName: onUpdateStepName,
         duplicateStep: duplicateStep,
         removeStep: removeStep,
@@ -266,7 +290,10 @@ var Condition = function Condition(props) {
         showSuffix: showSuffix,
         hoverDisabled: hoverDisabled || currentStepId !== step.id && currentStepId !== undefined,
         inputProps: _objectSpread({}, DEFAULT_INPUT_PROPS, {}, inputProps),
-        readOnly: readOnly
+        readOnly: readOnly,
+        singleStepCondition: singleStepCondition,
+        showActionAttribute: showActionAttribute,
+        showEmptyConditionPlaceholder: showEmptyConditionPlaceholder
       });
     })), addStep && /*#__PURE__*/React.createElement(S.AddStepButton, null, /*#__PURE__*/React.createElement(Button, {
       type: "ghost",
@@ -275,7 +302,7 @@ var Condition = function Condition(props) {
     }, /*#__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, currentStepId, getPopupContainerOverride, draggableEnabled, selectOperator, selectParameter, selectContext, selectSubject, onUpdateStepName, duplicateStep, removeStep, minConditionsLength, maxConditionsLength, setStepConditionFactorType, setStepConditionFactorValue, currentConditionId, currentField, removeCondition, handleAddCondition, handleClearActiveCondition, showSuffix, hoverDisabled, inputProps]);
+  }, [steps, onChangeOrder, addStep, handleAddStep, text, readOnly, renderAddStep, currentStepId, getPopupContainerOverride, draggableEnabled, selectOperator, selectParameter, selectContext, selectSubject, onUpdateStepName, duplicateStep, removeStep, minConditionsLength, maxConditionsLength, setStepConditionFactorType, setStepConditionFactorValue, currentConditionId, currentField, removeCondition, handleAddCondition, handleClearActiveCondition, showSuffix, hoverDisabled, inputProps, singleStepCondition, selectActionAttribute, showActionAttribute, showEmptyConditionPlaceholder]);
 };
 
 export default Condition;

package/dist/Condition.style.d.ts

@@ -18,6 +18,7 @@ export declare const Step: import("styled-components").StyledComponent<"div", an
     active: boolean;
     showSuffix: boolean | undefined;
     hoverDisabled?: boolean | undefined;
+    singleStepCondition?: boolean | undefined;
 }, never>;
 export declare const Subject: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const RemoveIconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
@@ -40,3 +41,4 @@ export declare const ConditionRow: import("styled-components").StyledComponent<"
     last?: boolean | undefined;
 }, never>;
 export declare const AddStepButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionAttribute: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Condition.style.js

@@ -66,10 +66,13 @@ export var DraggedLabel = styled.span.withConfig({
 export var Step = styled.div.withConfig({
   displayName: "Conditionstyle__Step",
   componentId: "sc-1lk06p3-13"
-})(["padding:12px 0 12px;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 (props) {
+})(["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) {
+  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);
 }, function (props) {
-  return props.active ? props.theme.palette['grey-050'] : 'transparent';
+  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) {
@@ -144,4 +147,8 @@ export var ConditionRow = styled.div.withConfig({
 export var AddStepButton = styled.div.withConfig({
   displayName: "Conditionstyle__AddStepButton",
   componentId: "sc-1lk06p3-23"
-})(["margin:12px 24px 0;"]);
+})(["margin:12px 24px 0;"]);
+export var ActionAttribute = styled.div.withConfig({
+  displayName: "Conditionstyle__ActionAttribute",
+  componentId: "sc-1lk06p3-24"
+})(["margin-left:8px;display:flex;"]);

package/dist/Condition.types.d.ts

@@ -14,6 +14,7 @@ export type ConditionStep = {
     id: ReactText;
     subject?: Omit<SubjectProps, 'onSelectItem'>;
     context?: Omit<ContextProps, 'onSelectItem'>;
+    actionAttribute?: Omit<FactorsProps, 'onChangeValue' | 'selectedFactorType' | 'defaultFactorType'>;
     stepName?: string;
     conditions: StepConditions[];
     addConditionErrorText?: ReactNode;
@@ -30,6 +31,7 @@ export type ConditionTexts = {
     removeTooltip: string;
     conditionSuffix: string;
     stepNamePrefix: string;
+    emptyConditionLabel: string;
 };
 export type ConditionProps = {
     steps: ConditionStep[];
@@ -50,6 +52,7 @@ export type ConditionProps = {
     onChangeFactorValue: (stepId: ReactText, conditionId: ReactText, value: FactorValueType | undefined) => void;
     onChangeFactorType: (stepId: ReactText, conditionId: ReactText, value: FactorType | undefined) => void;
     onUpdateStepName?: (stepId: ReactText, value: string) => void;
+    onChangeActionAttribute?: (stepId: ReactText, value: FactorValueType | undefined) => void;
     type?: 'attribute' | 'event';
     showSuffix?: boolean;
     hoverDisabled?: boolean;
@@ -57,4 +60,7 @@ export type ConditionProps = {
     inputProps?: Partial<InputProps>;
     onDeactivate?: (currentStepId: ReactText, currentConditionId: ReactText) => void;
     readOnly?: boolean;
+    singleStepCondition?: boolean;
+    showActionAttribute?: boolean;
+    showEmptyConditionPlaceholder?: boolean;
 } & ConditionStepCrudActions;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import * as T from './AddCondition.types';
-export declare const AddCondition: React.FC<T.AddConditionProps>;
+export declare const AddCondition: ({ addCondition, stepId, conditionsNumber, texts, isDisabled, errorText, }: T.AddConditionProps) => React.JSX.Element;

package/dist/ConditionStep/AddCondition/AddCondition.js

@@ -2,18 +2,14 @@ import React from 'react';
 import Button from '@synerise/ds-button';
 import Icon, { Add2M } from '@synerise/ds-icon';
 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,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
       errorText = _ref.errorText;
-  var disabled = !(selectedSubject || selectedContext);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.AddConditionRow, null, /*#__PURE__*/React.createElement(S.ConditionConnections, {
     last: true,
     first: conditionsNumber === 0
@@ -21,12 +17,12 @@ export var AddCondition = function AddCondition(_ref) {
     icon: /*#__PURE__*/React.createElement(Icon, {
       component: /*#__PURE__*/React.createElement(Add2M, null)
     }),
-    error: !disabled && Boolean(errorText),
+    error: !isDisabled && Boolean(errorText),
     type: "ghost",
     mode: "icon-label",
     onClick: function onClick() {
       addCondition && addCondition(stepId);
     },
-    disabled: disabled
-  }, !readOnly && conditionsNumber > 0 ? texts.addConditionRowButton : texts.addFirstConditionRowButton), !disabled && errorText && /*#__PURE__*/React.createElement(S.ErrorWrapper, null, errorText))));
+    disabled: isDisabled
+  }, conditionsNumber > 0 ? texts.addConditionRowButton : texts.addFirstConditionRowButton), !isDisabled && errorText && /*#__PURE__*/React.createElement(S.ErrorWrapper, null, errorText))));
 };

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

@@ -5,8 +5,6 @@ export type AddConditionProps = {
     stepId: React.ReactText;
     conditionsNumber: number;
     texts: Partial<ConditionTexts>;
-    selectedSubject: boolean;
-    selectedContext: boolean;
-    readOnly?: boolean;
+    isDisabled?: boolean;
     errorText?: React.ReactNode | string;
 };

package/dist/ConditionStep/ConditionRow/ConditionRow.js

@@ -97,7 +97,7 @@ export var ConditionRow = function ConditionRow(_ref) {
     "data-testid": "condition-row",
     onlyChild: maxConditionLength === 1,
     style: hasPriority ? {
-      zIndex: 10001
+      zIndex: 1001
     } : undefined,
     key: "condition-row-" + conditionId,
     index: index,

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, selectOperator, selectParameter, setStepConditionFactorType, setStepConditionFactorValue, getPopupContainerOverride, hasPriority, currentStepId, currentConditionId, currentField, setCurrentField, setCurrentCondition, setCurrentStep, onDeactivate, showSuffix, inputProps, readOnly, }: T.ConditionStepProps) => React.JSX.Element;
+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, showEmptyConditionPlaceholder, }: T.ConditionStepProps) => React.JSX.Element;

package/dist/ConditionStep/ConditionStep.js

@@ -11,13 +11,15 @@ 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 Factors from '@synerise/ds-factors';
 import * as S from '../Condition.style';
 import { StepHeader } from './StepHeader';
 import { AddCondition } from './AddCondition';
 import { ConditionRow } from './ConditionRow';
-import { SUBJECT } from '../constants';
+import { ACTION_ATTRIBUTE, SUBJECT } from '../constants';
+import { EmptyCondition } from './EmptyCondition';
 export var ConditionStep = function ConditionStep(_ref) {
-  var _step$subject2, _step$context3;
+  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,
@@ -33,6 +35,7 @@ export var ConditionStep = function ConditionStep(_ref) {
       draggableEnabled = _ref.draggableEnabled,
       selectSubject = _ref.selectSubject,
       selectContext = _ref.selectContext,
+      selectActionAttribute = _ref.selectActionAttribute,
       selectOperator = _ref.selectOperator,
       selectParameter = _ref.selectParameter,
       setStepConditionFactorType = _ref.setStepConditionFactorType,
@@ -49,7 +52,12 @@ export var ConditionStep = function ConditionStep(_ref) {
       showSuffix = _ref.showSuffix,
       inputProps = _ref.inputProps,
       _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+      _ref$singleStepCondit = _ref.singleStepCondition,
+      singleStepCondition = _ref$singleStepCondit === void 0 ? false : _ref$singleStepCondit,
+      showActionAttribute = _ref.showActionAttribute,
+      _ref$showEmptyConditi = _ref.showEmptyConditionPlaceholder,
+      showEmptyConditionPlaceholder = _ref$showEmptyConditi === void 0 ? false : _ref$showEmptyConditi;
 
   var _useIntl = useIntl(),
       formatMessage = _useIntl.formatMessage;
@@ -99,15 +107,17 @@ export var ConditionStep = function ConditionStep(_ref) {
     }, texts);
   }, [texts, formatMessage]);
   var withCruds = !readOnly && (duplicateStep || removeStep);
-  var onActivate = useCallback(function () {
+
+  var _onActivate = useCallback(function () {
     return setCurrentStep ? function () {
       return setCurrentStep(step.id);
     } : undefined;
   }, [step.id, setCurrentStep]);
+
   var onAddCondition = useCallback(function (stepId) {
     addCondition && addCondition(stepId);
-    onActivate && onActivate();
-  }, [addCondition, onActivate]);
+    _onActivate && _onActivate();
+  }, [addCondition, _onActivate]);
   var stepHeader = useMemo(function () {
     return /*#__PURE__*/React.createElement(StepHeader, {
       index: index,
@@ -122,7 +132,7 @@ export var ConditionStep = function ConditionStep(_ref) {
     });
   }, [draggableEnabled, duplicateStep, index, removeStep, step.id, step.stepName, text, updateStepName, readOnly]);
   var addConditionButton = useMemo(function () {
-    var _step$subject, _step$context;
+    var _step$subject, _step$context, _step$actionAttribute;
 
     return !readOnly && addCondition && (maxConditionsLength === undefined || step.conditions.length < maxConditionsLength) && /*#__PURE__*/React.createElement(AddCondition, {
       errorText: step.addConditionErrorText,
@@ -130,16 +140,15 @@ export var ConditionStep = function ConditionStep(_ref) {
       stepId: step.id,
       addCondition: onAddCondition,
       conditionsNumber: step.conditions.length,
-      selectedSubject: Boolean((_step$subject = step.subject) == null ? void 0 : _step$subject.selectedItem),
-      selectedContext: Boolean((_step$context = step.context) == null ? void 0 : _step$context.selectedItem)
+      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]);
+  }, [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]);
   var renderConditionRow = useCallback(function (condition, conditionIndex) {
     var _step$context2;
 
     var handleActivation = function handleActivation(conditionId) {
       return function (fieldType) {
-        onActivate && onActivate();
+        _onActivate && _onActivate();
         setCurrentField && setCurrentField(fieldType);
         setCurrentCondition && setCurrentCondition(conditionId);
         setCurrentStep && setCurrentStep(step.id);
@@ -177,19 +186,30 @@ export var ConditionStep = function ConditionStep(_ref) {
       onDeactivate: onDeactivate,
       readOnly: readOnly
     });
-  }, [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]);
+  }, [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]);
+  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);
+  }, [(_step$subject3 = step.subject) == null ? void 0 : _step$subject3.selectedItem, (_step$context4 = step.context) == null ? void 0 : _step$context4.selectedItem]);
+  var contextOrActionErrorText = useMemo(function () {
+    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, {
     key: step.id,
     id: "condition-step-" + step.id,
     "data-dropLabel": text.dropLabel,
     "data-conditionSuffix": text.conditionSuffix,
     style: hasPriority ? {
-      zIndex: 10001
+      zIndex: 1001
     } : undefined,
     active: step.id === currentStepId && currentField !== '',
-    hoverDisabled: Boolean(currentStepId),
-    showSuffix: showSuffix
-  }, !updateStepName && /*#__PURE__*/React.createElement(S.DraggedLabel, null, ((_step$subject2 = step.subject) == null || (_step$subject2 = _step$subject2.selectedItem) == null ? void 0 : _step$subject2.name) || ((_step$context3 = step.context) == null || (_step$context3 = _step$context3.selectedItem) == null ? void 0 : _step$context3.name)), updateStepName && stepHeader, /*#__PURE__*/React.createElement(S.StepConditions, {
+    hoverDisabled: Boolean(currentStepId) || singleStepCondition,
+    showSuffix: showSuffix,
+    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, {
     className: "step-drag-handler",
@@ -198,21 +218,47 @@ export var ConditionStep = function ConditionStep(_ref) {
     "data-testid": "condition-subject-or-context"
   }, step.subject && /*#__PURE__*/React.createElement(Subject, _extends({}, step.subject, {
     getPopupContainerOverride: getPopupContainerOverride,
-    onActivate: onActivate,
+    onActivate: _onActivate,
     onDeactivate: onDeactivate,
     opened: step.id === currentStepId && currentField === SUBJECT,
     onSelectItem: function onSelectItem(value) {
       return selectSubject(value, step.id);
     }
   })), step.context && /*#__PURE__*/React.createElement(ContextSelector, _extends({}, step.context, {
+    errorText: undefined,
     getPopupContainerOverride: getPopupContainerOverride,
-    onActivate: onActivate,
+    onActivate: _onActivate,
     onDeactivate: onDeactivate,
     opened: step.id === currentStepId && currentField === SUBJECT,
     onSelectItem: function onSelectItem(value) {
       return selectContext(value, step.id);
     },
     readOnly: step.context.readOnly || readOnly
+  })), contextOrActionErrorText && /*#__PURE__*/React.createElement(S.ErrorWrapper, null, contextOrActionErrorText)), hasSelectedSubjectOrContext || !showEmptyConditionPlaceholder ? /*#__PURE__*/React.createElement(React.Fragment, null, showActionAttribute && /*#__PURE__*/React.createElement(S.ActionAttribute, {
+    style: {
+      zIndex: step.id === currentStepId && currentField === ACTION_ATTRIBUTE ? 10002 : 0
+    }
+  }, /*#__PURE__*/React.createElement(Factors, _extends({}, step.actionAttribute, {
+    errorText: undefined,
+    value: (_step$actionAttribute5 = step.actionAttribute) == null ? void 0 : _step$actionAttribute5.value,
+    withoutTypeSelector: true,
+    selectedFactorType: "parameter",
+    defaultFactorType: "parameter",
+    inputProps: inputProps,
+    getPopupContainerOverride: getPopupContainerOverride,
+    onActivate: function onActivate() {
+      setCurrentCondition('');
+      _onActivate && _onActivate();
+      setCurrentField && setCurrentField(ACTION_ATTRIBUTE);
+      setCurrentStep && setCurrentStep(step.id);
+    },
+    onDeactivate: onDeactivate,
+    onChangeValue: function onChangeValue(value) {
+      return selectActionAttribute(value, step.id);
+    },
+    opened: step.id === currentStepId && currentField === ACTION_ATTRIBUTE,
+    readOnly: readOnly,
+    error: Boolean((_step$actionAttribute6 = step.actionAttribute) == null ? void 0 : _step$actionAttribute6.errorText)
   }))), /*#__PURE__*/React.createElement(S.ConditionRows, null, step.conditions.length > 0 && step.conditions.map(renderConditionRow), addConditionButton), !updateStepName && withCruds && /*#__PURE__*/React.createElement(S.StepConditionCruds, {
     onDuplicate: duplicateStep ? function () {
       return duplicateStep(step.id);
@@ -222,5 +268,10 @@ export var ConditionStep = function ConditionStep(_ref) {
     } : undefined,
     duplicateTooltip: text.duplicateTooltip,
     deleteTooltip: text.removeTooltip
+  })) : /*#__PURE__*/React.createElement(EmptyCondition, {
+    label: (texts == null ? void 0 : texts.emptyConditionLabel) || formatMessage({
+      id: 'DS.CONDITION.EMPTY_CONDITION_LABEL',
+      defaultMessage: 'Choose event first'
+    })
   })));
 };

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

@@ -19,6 +19,7 @@ export type ConditionStepProps = {
     draggableEnabled?: boolean;
     selectSubject: (value: SubjectItem, stepId: ReactText) => void;
     selectContext: (value: ContextItem | ContextGroup | undefined, stepId: ReactText) => void;
+    selectActionAttribute: (value: FactorValueType | undefined, stepId: ReactText) => void;
     selectParameter: (stepId: ReactText, condition: ReactText, value: FactorValueType | undefined) => void;
     selectOperator: (stepId: ReactText, condition: ReactText, value: OperatorsItem | OperatorsGroup | undefined) => void;
     setStepConditionFactorType: (stepId: ReactText, condition: ReactText, factorType: FactorType | undefined) => void;
@@ -34,6 +35,9 @@ export type ConditionStepProps = {
     hoverDisabled?: boolean;
     inputProps?: Partial<InputProps>;
     readOnly?: boolean;
+    singleStepCondition?: boolean;
+    showActionAttribute?: boolean;
+    showEmptyConditionPlaceholder?: boolean;
 } & ConditionStepCrudActions;
 export type ConditionStepCrudActions = {
     removeStep?: (stepId: ReactText) => void;

package/dist/ConditionStep/EmptyCondition/EmptyCondition.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type EmptyConditionProps = {
+    icon?: JSX.Element;
+    label: string;
+};
+export declare const EmptyCondition: ({ icon, label }: EmptyConditionProps) => React.JSX.Element;
+export {};

package/dist/ConditionStep/EmptyCondition/EmptyCondition.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Icon, { ClickM } from '@synerise/ds-icon';
+import { theme } from '@synerise/ds-core';
+import * as S from './emptyCondition.styles';
+export var EmptyCondition = function EmptyCondition(_ref) {
+  var _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(ClickM, null) : _ref$icon,
+      label = _ref.label;
+  return /*#__PURE__*/React.createElement(S.EmptyConditionWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+    component: icon,
+    color: theme.palette['grey-500']
+  }), /*#__PURE__*/React.createElement(S.LabelWrapper, {
+    size: "small"
+  }, label));
+};

package/dist/ConditionStep/EmptyCondition/emptyCondition.styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const LabelWrapper: import("styled-components").StyledComponent<({ size, className, children, ellipsis }: {
+    size?: import("@synerise/ds-typography").TextSize | undefined;
+    ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps | undefined;
+    children?: import("react").ReactNode;
+    className?: string | undefined;
+}) => import("react").JSX.Element, any, {}, never>;
+export declare const EmptyConditionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/ConditionStep/EmptyCondition/emptyCondition.styles.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { Text } from '@synerise/ds-typography';
+export var LabelWrapper = styled(Text).withConfig({
+  displayName: "emptyConditionstyles__LabelWrapper",
+  componentId: "sc-150ylnq-0"
+})(["margin-left:8px;"]);
+export var EmptyConditionWrapper = styled.div.withConfig({
+  displayName: "emptyConditionstyles__EmptyConditionWrapper",
+  componentId: "sc-150ylnq-1"
+})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;margin-left:16px;height:32px;"]);

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

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

package/dist/ConditionStep/EmptyCondition/index.js

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

package/dist/constants.d.ts

@@ -5,6 +5,7 @@ export declare const OPERATOR = "operator";
 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;

package/dist/constants.js

@@ -5,6 +5,7 @@ export var OPERATOR = 'operator';
 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',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-condition",
-  "version": "0.24.12",
+  "version": "0.24.14",
   "description": "Condition UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,17 +34,17 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.21.14",
-    "@synerise/ds-context-selector": "^0.25.10",
-    "@synerise/ds-cruds": "^0.5.24",
-    "@synerise/ds-factors": "^0.26.3",
-    "@synerise/ds-icon": "^0.66.0",
-    "@synerise/ds-inline-edit": "^0.8.15",
-    "@synerise/ds-input": "^0.24.9",
-    "@synerise/ds-operators": "^0.13.5",
-    "@synerise/ds-subject": "^0.10.19",
-    "@synerise/ds-tooltip": "^0.14.44",
-    "@synerise/ds-utils": "^0.30.0",
+    "@synerise/ds-button": "^0.21.16",
+    "@synerise/ds-context-selector": "^0.25.12",
+    "@synerise/ds-cruds": "^0.5.26",
+    "@synerise/ds-factors": "^0.26.5",
+    "@synerise/ds-icon": "^0.66.2",
+    "@synerise/ds-inline-edit": "^0.8.17",
+    "@synerise/ds-input": "^0.24.11",
+    "@synerise/ds-operators": "^0.13.7",
+    "@synerise/ds-subject": "^0.10.21",
+    "@synerise/ds-tooltip": "^0.14.46",
+    "@synerise/ds-utils": "^0.30.2",
     "lodash": "^4.17.19",
     "react-intl": "3.12.0",
     "react-sortablejs": "^6.0.0",
@@ -55,5 +55,5 @@
     "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "gitHead": "b610a511939303ea269e5a89bf943aeec0b15723"
+  "gitHead": "c9eddd944cd2f08cb02db807652ba7fb2b536a1c"
 }