@synerise/ds-condition 0.21.11 → 0.22.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.22.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.21.11...@synerise/ds-condition@0.22.0) (2024-03-05)
+
+
+### Features
+
+* **input:** support autoresize to stretch to parent ([329c866](https://github.com/Synerise/synerise-design/commit/329c866cb54921ad1260ae217cb8c471e43b986e))
+
+
+
+
+
 ## [0.21.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.21.10...@synerise/ds-condition@0.21.11) (2024-03-04)
 
 **Note:** Version bump only for package @synerise/ds-condition

package/dist/Condition.d.ts

@@ -1,7 +1,3 @@
 import * as T from './Condition.types';
-export declare const OPERATOR = "operator";
-export declare const PARAMETER = "parameter";
-export declare const FACTOR = "factor";
-export declare const SUBJECT = "subject";
 declare const Condition: (props: T.ConditionProps) => JSX.Element;
 export default Condition;

package/dist/Condition.js

@@ -15,21 +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';
-var DEFAULT_FIELD = '';
-var DEFAULT_CONDITION = '';
-var DEFAULT_STEP = '';
-export var OPERATOR = 'operator';
-export var PARAMETER = 'parameter';
-export var FACTOR = 'factor';
-export var SUBJECT = 'subject';
-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
-};
+import { SORTABLE_CONFIG, DEFAULT_CONDITION, DEFAULT_FIELD, DEFAULT_STEP, OPERATOR, FACTOR, PARAMETER, SUBJECT, DEFAULT_INPUT_PROPS } from './constants';
 
 var Condition = function Condition(props) {
   var steps = props.steps,
@@ -279,7 +265,7 @@ var Condition = function Condition(props) {
         onDeactivate: handleClearActiveCondition,
         showSuffix: showSuffix,
         hoverDisabled: hoverDisabled || currentStepId !== step.id && currentStepId !== undefined,
-        inputProps: inputProps,
+        inputProps: _objectSpread({}, DEFAULT_INPUT_PROPS, {}, inputProps),
         readOnly: readOnly
       });
     })), addStep && /*#__PURE__*/React.createElement(S.AddStepButton, null, /*#__PURE__*/React.createElement(Button, {

package/dist/Condition.style.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-import { ConditionRowProps } from './ConditionStep/ConditionRow';
 export declare const ErrorWrapper: 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 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;
+    withCruds?: boolean | undefined;
 }, never>;
 export declare const StepName: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StepIndexWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
@@ -20,11 +19,11 @@ export declare const Step: import("styled-components").StyledComponent<"div", an
     showSuffix: boolean | undefined;
     hoverDisabled?: boolean | undefined;
 }, never>;
-export declare const ConditionWrapper: import("styled-components").StyledComponent<"div", any, {
-    fullWidth?: 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>;
+export declare const ConditionWrapper: import("styled-components").StyledComponent<"div", any, {
+    withRemoveTrigger?: boolean | undefined;
+}, never>;
 export declare const ConditionRows: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ConditionRowDefinition: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ConditionRowLine: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -37,7 +36,7 @@ export declare const ConditionConnections: import("styled-components").StyledCom
 export declare const ConditionRow: import("styled-components").StyledComponent<"div", any, {
     withError: boolean;
     index: number;
-    stepType: ConditionRowProps['stepType'];
+    onlyChild?: boolean | undefined;
     last?: boolean | undefined;
 }, never>;
 export declare const AddStepButton: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Condition.style.js

@@ -2,6 +2,7 @@ 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';
 export var ErrorWrapper = styled.div.withConfig({
   displayName: "Conditionstyle__ErrorWrapper",
   componentId: "sc-1lk06p3-0"
@@ -20,7 +21,7 @@ export var StepConditions = styled.div.withConfig({
   displayName: "Conditionstyle__StepConditions",
   componentId: "sc-1lk06p3-3"
 })(["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%';
+  return props.withCruds ? 'calc(100% - 48px)' : '100%';
 }, DragIcon);
 export var StepName = styled.div.withConfig({
   displayName: "Conditionstyle__StepName",
@@ -35,11 +36,11 @@ export var StepIndexWrapper = styled.span.withConfig({
 export var Condition = styled.div.withConfig({
   displayName: "Conditionstyle__Condition",
   componentId: "sc-1lk06p3-6"
-})(["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%;}"]);
+})(["padding:12px 0;display:block;min-width:575px;width:100%;.steps-list{width:100%;}"]);
 export var ConditionStepWrapper = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionStepWrapper",
   componentId: "sc-1lk06p3-7"
-})(["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-8"
@@ -65,12 +66,12 @@ export var DraggedLabel = styled.span.withConfig({
 export var Step = styled.div.withConfig({
   displayName: "Conditionstyle__Step",
   componentId: "sc-1lk06p3-13"
-})(["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) {
+})(["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) {
   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'];
+  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) {
@@ -80,22 +81,24 @@ export var Step = styled.div.withConfig({
 }, function (props) {
   return props.theme.palette['blue-600'];
 }, DraggedLabel);
-export var ConditionWrapper = styled.div.withConfig({
-  displayName: "Conditionstyle__ConditionWrapper",
-  componentId: "sc-1lk06p3-14"
-})([""]);
 export var Subject = styled.div.withConfig({
   displayName: "Conditionstyle__Subject",
-  componentId: "sc-1lk06p3-15"
+  componentId: "sc-1lk06p3-14"
 })([""]);
 export var RemoveIconWrapper = styled.span.withConfig({
   displayName: "Conditionstyle__RemoveIconWrapper",
+  componentId: "sc-1lk06p3-15"
+})(["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"
-})(["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;"]);
+})(["", ";", "{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"
-})(["display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;"]);
+})(["flex-grow:1;min-width:0;"]);
 export var ConditionRowDefinition = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionRowDefinition",
   componentId: "sc-1lk06p3-18"
@@ -103,7 +106,7 @@ export var ConditionRowDefinition = styled.div.withConfig({
 export var ConditionRowLine = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionRowLine",
   componentId: "sc-1lk06p3-19"
-})([""]);
+})(["flex-grow:1;min-width:0;"]);
 export var AddConditionRow = styled.div.withConfig({
   displayName: "Conditionstyle__AddConditionRow",
   componentId: "sc-1lk06p3-20"
@@ -129,8 +132,8 @@ export var ConditionConnections = styled.span.withConfig({
 export var ConditionRow = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionRow",
   componentId: "sc-1lk06p3-22"
-})(["padding-bottom:", ";display:flex;", "{height:", ";", "}}", "{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';
+})(["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) {
   return props.withError ? 'auto' : '32px';
 }, function (props) {

package/dist/ConditionStep/ConditionRow/ConditionRow.js

@@ -7,7 +7,7 @@ import Icon, { CloseS } from '@synerise/ds-icon';
 import { theme } from '@synerise/ds-core';
 import { getPopupContainer } from '@synerise/ds-utils';
 import * as React from 'react';
-import { FACTOR, OPERATOR, PARAMETER } from '../../Condition';
+import { FACTOR, OPERATOR, PARAMETER } from '../../constants';
 import * as S from '../../Condition.style';
 // eslint-disable-next-line import/prefer-default-export
 export var ConditionRow = function ConditionRow(_ref) {
@@ -33,7 +33,6 @@ export var ConditionRow = function ConditionRow(_ref) {
       _onActivate = _ref.onActivate,
       hasPriority = _ref.hasPriority,
       texts = _ref.texts,
-      stepType = _ref.stepType,
       onDeactivate = _ref.onDeactivate,
       inputProps = _ref.inputProps,
       _ref$readOnly = _ref.readOnly,
@@ -55,8 +54,34 @@ export var ConditionRow = function ConditionRow(_ref) {
 
     return errorText ? /*#__PURE__*/React.createElement(S.ErrorWrapper, null, errorText) : /*#__PURE__*/React.createElement(React.Fragment, null);
   }, [conditionOperatorErrorText, conditionFactorErrorText, conditionParameterErrorText]);
+  var removeConditionTrigger = !readOnly && removeCondition && conditionsNumber > minConditionLength && /*#__PURE__*/React.createElement(S.RemoveIconWrapper, {
+    onClick: function onClick() {
+      return removeCondition(stepId, conditionId);
+    },
+    className: "ds-conditions-remove-row"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: texts.removeConditionRowTooltip,
+    trigger: ['hover']
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(CloseS, null),
+    color: theme.palette['red-600']
+  })));
+  var renderConditionParameterWrapper = Boolean(conditionParameter);
+  var renderConditionOperatorWrapper = Boolean((!conditionParameter || (conditionParameter == null ? void 0 : conditionParameter.value) && (conditionParameter == null ? void 0 : conditionParameter.value).name !== '') && conditionOperator);
+  var renderConditionFactorWrapper = Boolean(conditionFactor !== undefined && (conditionOperator == null ? void 0 : conditionOperator.value) && (conditionFactor == null ? void 0 : conditionFactor.availableFactorTypes) !== null);
+  var lastConditionWrapper = '';
+
+  if (renderConditionFactorWrapper) {
+    lastConditionWrapper = 'factor';
+  } else if (renderConditionOperatorWrapper) {
+    lastConditionWrapper = 'operator';
+  } else if (renderConditionParameterWrapper) {
+    lastConditionWrapper = 'parameter';
+  }
+
   return /*#__PURE__*/React.createElement(S.ConditionRow, {
-    stepType: stepType,
+    "data-testid": "condition-row",
+    onlyChild: maxConditionLength === 1,
     style: hasPriority ? {
       zIndex: 10001
     } : undefined,
@@ -67,7 +92,10 @@ export var ConditionRow = function ConditionRow(_ref) {
     first: index === 0,
     last: readOnly ? Boolean(index + 1 === conditionsNumber) : Boolean(addCondition && index + 1 === conditionsNumber && maxConditionLength !== undefined && conditionsNumber === maxConditionLength),
     readOnly: readOnly
-  }), /*#__PURE__*/React.createElement(S.ConditionRowLine, null, /*#__PURE__*/React.createElement(S.ConditionRowDefinition, null, /*#__PURE__*/React.createElement(S.ConditionWrapper, null, conditionParameter && /*#__PURE__*/React.createElement(Factors, _extends({}, conditionParameter, {
+  }), /*#__PURE__*/React.createElement(S.ConditionRowLine, null, /*#__PURE__*/React.createElement(S.ConditionRowDefinition, null, /*#__PURE__*/React.createElement(S.ConditionWrapper, {
+    "data-testid": "condition-parameter-wrapper",
+    withRemoveTrigger: lastConditionWrapper === 'parameter'
+  }, renderConditionParameterWrapper && /*#__PURE__*/React.createElement(Factors, _extends({}, conditionParameter, {
     inputProps: inputProps,
     getPopupContainerOverride: getPopupContainerOverride || getPopupContainer,
     onActivate: function onActivate() {
@@ -80,7 +108,10 @@ export var ConditionRow = function ConditionRow(_ref) {
     opened: hasPriority && stepId === currentStepId && conditionId === currentConditionId && currentField === PARAMETER,
     readOnly: readOnly,
     error: Boolean(conditionParameter.errorText)
-  }))), (!conditionParameter || (conditionParameter == null ? void 0 : conditionParameter.value) && (conditionParameter == null ? void 0 : conditionParameter.value).name !== '') && conditionOperator && /*#__PURE__*/React.createElement(S.ConditionWrapper, null, /*#__PURE__*/React.createElement(Operators, _extends({}, conditionOperator, {
+  })), lastConditionWrapper === 'parameter' && removeConditionTrigger), renderConditionOperatorWrapper && /*#__PURE__*/React.createElement(S.ConditionWrapper, {
+    "data-testid": "condition-operator-wrapper",
+    withRemoveTrigger: lastConditionWrapper === 'operator'
+  }, /*#__PURE__*/React.createElement(Operators, _extends({}, conditionOperator, {
     getPopupContainerOverride: getPopupContainerOverride || getPopupContainer,
     onActivate: function onActivate() {
       return _onActivate && _onActivate(OPERATOR);
@@ -92,8 +123,9 @@ export var ConditionRow = function ConditionRow(_ref) {
     opened: hasPriority && stepId === currentStepId && conditionId === currentConditionId && currentField === OPERATOR,
     readOnly: readOnly,
     errorText: conditionOperator.errorText
-  }))), conditionFactor !== undefined && (conditionOperator == null ? void 0 : conditionOperator.value) && (conditionFactor == null ? void 0 : conditionFactor.availableFactorTypes) !== null && /*#__PURE__*/React.createElement(S.ConditionWrapper, {
-    fullWidth: true
+  })), lastConditionWrapper === 'operator' && removeConditionTrigger), renderConditionFactorWrapper && /*#__PURE__*/React.createElement(S.ConditionWrapper, {
+    "data-testid": "condition-factor-wrapper",
+    withRemoveTrigger: lastConditionWrapper === 'factor'
   }, (conditionFactor == null ? void 0 : conditionFactor.withCustomFactor) || /*#__PURE__*/React.createElement(Factors, _extends({}, conditionFactor, {
     inputProps: inputProps,
     getPopupContainerOverride: getPopupContainerOverride || getPopupContainer,
@@ -111,16 +143,5 @@ export var ConditionRow = function ConditionRow(_ref) {
     error: Boolean(conditionFactor.errorText),
     opened: hasPriority && stepId === currentStepId && conditionId === currentConditionId && currentField === FACTOR,
     readOnly: readOnly
-  }))), !readOnly && removeCondition && conditionsNumber > minConditionLength && /*#__PURE__*/React.createElement(S.RemoveIconWrapper, {
-    onClick: function onClick() {
-      return removeCondition(stepId, conditionId);
-    },
-    className: "ds-conditions-remove-row"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    title: texts.removeConditionRowTooltip,
-    trigger: ['hover']
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(CloseS, null),
-    color: theme.palette['red-600']
-  })))), conditionErrorMessage));
+  })), lastConditionWrapper === 'factor' && removeConditionTrigger)), conditionErrorMessage));
 };

package/dist/ConditionStep/ConditionStep.d.ts

@@ -1,2 +1,2 @@
 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, hoverDisabled, inputProps, readOnly, }: T.ConditionStepProps) => JSX.Element;
+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) => JSX.Element;

package/dist/ConditionStep/ConditionStep.js

@@ -15,7 +15,7 @@ import * as S from '../Condition.style';
 import { StepHeader } from './StepHeader';
 import { AddCondition } from './AddCondition';
 import { ConditionRow } from './ConditionRow';
-import { SUBJECT } from '../Condition';
+import { SUBJECT } from '../constants';
 export var ConditionStep = function ConditionStep(_ref) {
   var _step$subject2, _step$subject2$select, _step$context3, _step$context3$select;
 
@@ -47,7 +47,6 @@ export var ConditionStep = function ConditionStep(_ref) {
       setCurrentStep = _ref.setCurrentStep,
       onDeactivate = _ref.onDeactivate,
       showSuffix = _ref.showSuffix,
-      hoverDisabled = _ref.hoverDisabled,
       inputProps = _ref.inputProps,
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
@@ -99,6 +98,7 @@ export var ConditionStep = function ConditionStep(_ref) {
       })
     }, texts);
   }, [texts, formatMessage]);
+  var withCruds = !readOnly && (duplicateStep || removeStep);
   var onActivate = useCallback(function () {
     return setCurrentStep ? function () {
       return setCurrentStep(step.id);
@@ -187,14 +187,16 @@ export var ConditionStep = function ConditionStep(_ref) {
       zIndex: 10001
     } : undefined,
     active: step.id === currentStepId && currentField !== '',
-    hoverDisabled: hoverDisabled,
+    hoverDisabled: Boolean(currentStepId),
     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
+    withCruds: Boolean(!updateStepName && withCruds)
   }, 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, {
+  }), /*#__PURE__*/React.createElement(S.Subject, {
+    "data-testid": "condition-subject-or-context"
+  }, step.subject && /*#__PURE__*/React.createElement(Subject, _extends({}, step.subject, {
     getPopupContainerOverride: getPopupContainerOverride,
     onActivate: onActivate,
     onDeactivate: onDeactivate,
@@ -211,7 +213,7 @@ export var ConditionStep = function ConditionStep(_ref) {
       return selectContext(value, step.id);
     },
     readOnly: readOnly
-  }))), /*#__PURE__*/React.createElement(S.ConditionRows, null, step.conditions.length > 0 && step.conditions.map(renderConditionRow), addConditionButton), !updateStepName && !readOnly && /*#__PURE__*/React.createElement(S.StepConditionCruds, {
+  }))), /*#__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);
     } : undefined,

package/dist/constants.d.ts

@@ -0,0 +1,21 @@
+export declare const DEFAULT_FIELD = "";
+export declare const DEFAULT_CONDITION = "";
+export declare const DEFAULT_STEP = "";
+export declare const OPERATOR = "operator";
+export declare const PARAMETER = "parameter";
+export declare const FACTOR = "factor";
+export declare const SUBJECT = "subject";
+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;
+        stretchToFit: boolean;
+    };
+};

package/dist/constants.js

@@ -0,0 +1,21 @@
+export var DEFAULT_FIELD = '';
+export var DEFAULT_CONDITION = '';
+export var DEFAULT_STEP = '';
+export var OPERATOR = 'operator';
+export var PARAMETER = 'parameter';
+export var FACTOR = 'factor';
+export var SUBJECT = 'subject';
+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',
+    stretchToFit: true
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-condition",
-  "version": "0.21.11",
+  "version": "0.22.0",
   "description": "Condition UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,17 +33,18 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.19.2",
-    "@synerise/ds-context-selector": "^0.20.8",
+    "@synerise/ds-button": "^0.19.3",
+    "@synerise/ds-context-selector": "^0.21.0",
     "@synerise/ds-core": "^0.40.12",
-    "@synerise/ds-cruds": "^0.4.6",
-    "@synerise/ds-factors": "^0.21.8",
-    "@synerise/ds-icon": "^0.60.2",
-    "@synerise/ds-inline-edit": "^0.6.98",
-    "@synerise/ds-operators": "^0.10.57",
-    "@synerise/ds-subject": "^0.9.85",
-    "@synerise/ds-tooltip": "^0.14.19",
-    "@synerise/ds-utils": "^0.24.26",
+    "@synerise/ds-cruds": "^0.4.7",
+    "@synerise/ds-factors": "^0.22.0",
+    "@synerise/ds-icon": "^0.60.3",
+    "@synerise/ds-inline-edit": "^0.6.99",
+    "@synerise/ds-input": "^0.20.0",
+    "@synerise/ds-operators": "^0.10.58",
+    "@synerise/ds-subject": "^0.9.86",
+    "@synerise/ds-tooltip": "^0.14.20",
+    "@synerise/ds-utils": "^0.25.0",
     "lodash": "^4.17.19",
     "react-intl": "3.12.0",
     "react-sortablejs": "^6.0.0",
@@ -58,5 +59,5 @@
     "@testing-library/jest-dom": "5.1.1",
     "@testing-library/react": "10.0.1"
   },
-  "gitHead": "d249737414ed45f95fa21a77e30f47f0eb14d534"
+  "gitHead": "6b8da853a2bb4e993d89e9b0b3041216f0c9c976"
 }