@synerise/ds-condition 0.18.11 → 0.19.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.19.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.19.0...@synerise/ds-condition@0.19.1) (2023-01-02)
+
+**Note:** Version bump only for package @synerise/ds-condition
+
+
+
+
+
+# [0.19.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.18.11...@synerise/ds-condition@0.19.0) (2022-12-13)
+
+
+### Features
+
+* **filter:** readOnly state for conditions ([dfa4db3](https://github.com/Synerise/synerise-design/commit/dfa4db35826c0800859b7217dd1ea2f1497ac3c9))
+
+
+
+
+
 ## [0.18.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.18.10...@synerise/ds-condition@0.18.11) (2022-12-08)
 
 **Note:** Version bump only for package @synerise/ds-condition

package/dist/Condition.js

@@ -58,7 +58,9 @@ var Condition = function Condition(props) {
       _props$autoOpenedComp = props.autoOpenedComponent,
       autoOpenedComponent = _props$autoOpenedComp === void 0 ? DEFAULT_FIELD : _props$autoOpenedComp,
       inputProps = props.inputProps,
-      onDeactivate = props.onDeactivate;
+      onDeactivate = props.onDeactivate,
+      _props$readOnly = props.readOnly,
+      readOnly = _props$readOnly === void 0 ? false : _props$readOnly;
 
   var _useIntl = useIntl(),
       formatMessage = _useIntl.formatMessage;
@@ -273,7 +275,8 @@ var Condition = function Condition(props) {
         onDeactivate: handleClearActiveCondition,
         showSuffix: showSuffix,
         hoverDisabled: hoverDisabled || currentStepId !== step.id && currentStepId !== undefined,
-        inputProps: inputProps
+        inputProps: inputProps,
+        readOnly: readOnly
       });
     })), addStep && /*#__PURE__*/React.createElement(S.AddStepButton, null, /*#__PURE__*/React.createElement(Button, {
       type: "ghost",
@@ -281,8 +284,8 @@ var Condition = function Condition(props) {
       onClick: handleAddStep
     }, /*#__PURE__*/React.createElement(Icon, {
       component: /*#__PURE__*/React.createElement(Add3M, null)
-    }), 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, inputProps]);
+    }), text.addStep)), !readOnly && 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, inputProps, readOnly]);
 };
 
 export default Condition;

package/dist/Condition.style.d.ts

@@ -6,6 +6,9 @@ export declare const StepConditions: import("styled-components").StyledComponent
     withoutStepName: boolean;
 }, never>;
 export declare const StepName: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StepIndexWrapper: import("styled-components").StyledComponent<"span", any, {
+    readOnly?: boolean | undefined;
+}, never>;
 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>;
@@ -32,5 +35,6 @@ export declare const AddConditionRow: import("styled-components").StyledComponen
 export declare const ConditionConnections: import("styled-components").StyledComponent<"span", any, {
     first?: boolean | undefined;
     last?: boolean | undefined;
+    readOnly?: boolean | undefined;
 }, never>;
 export declare const AddStepButton: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Condition.style.js

@@ -22,39 +22,46 @@ export var StepName = styled.div.withConfig({
 })(["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 StepIndexWrapper = styled.span.withConfig({
+  displayName: "Conditionstyle__StepIndexWrapper",
+  componentId: "sc-1lk06p3-4"
+})(["font-size:13px;font-weight:", ";"], function (_ref) {
+  var readOnly = _ref.readOnly;
+  return readOnly ? '500' : '400';
+});
 export var Condition = styled.div.withConfig({
   displayName: "Conditionstyle__Condition",
-  componentId: "sc-1lk06p3-4"
+  componentId: "sc-1lk06p3-5"
 })(["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-5"
+  componentId: "sc-1lk06p3-6"
 })(["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-6"
+  componentId: "sc-1lk06p3-7"
 })(["display:contents;"]);
 export var StepCruds = styled.div.withConfig({
   displayName: "Conditionstyle__StepCruds",
-  componentId: "sc-1lk06p3-7"
+  componentId: "sc-1lk06p3-8"
 })(["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-8"
+  componentId: "sc-1lk06p3-9"
 })(["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-9"
+  componentId: "sc-1lk06p3-10"
 })(["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"
+  componentId: "sc-1lk06p3-11"
 })(["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-11"
+  componentId: "sc-1lk06p3-12"
 })(["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) {
@@ -72,23 +79,23 @@ export var Step = styled.div.withConfig({
 }, DraggedLabel);
 export var ConditionWrapper = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionWrapper",
-  componentId: "sc-1lk06p3-12"
+  componentId: "sc-1lk06p3-13"
 })([""]);
 export var Subject = styled.div.withConfig({
   displayName: "Conditionstyle__Subject",
-  componentId: "sc-1lk06p3-13"
+  componentId: "sc-1lk06p3-14"
 })([""]);
 export var RemoveIconWrapper = styled.span.withConfig({
   displayName: "Conditionstyle__RemoveIconWrapper",
-  componentId: "sc-1lk06p3-14"
+  componentId: "sc-1lk06p3-15"
 })(["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-15"
+  componentId: "sc-1lk06p3-16"
 })(["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-16"
+  componentId: "sc-1lk06p3-17"
 })(["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) {
@@ -96,11 +103,11 @@ export var ConditionRow = styled.div.withConfig({
 }, ConditionWrapper, RemoveIconWrapper);
 export var AddConditionRow = styled.div.withConfig({
   displayName: "Conditionstyle__AddConditionRow",
-  componentId: "sc-1lk06p3-17"
+  componentId: "sc-1lk06p3-18"
 })(["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-18"
+  componentId: "sc-1lk06p3-19"
 })(["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) {
@@ -108,7 +115,7 @@ export var ConditionConnections = styled.span.withConfig({
 }, function (props) {
   return props.theme.palette['grey-300'];
 }, function (props) {
-  return props.first && props.last ? 'none' : 'flex';
+  return props.first && props.last || props.last && props.readOnly ? 'none' : 'flex';
 }, function (props) {
   return props.first ? '16px' : '0';
 }, function (props) {
@@ -118,5 +125,5 @@ export var ConditionConnections = styled.span.withConfig({
 });
 export var AddStepButton = styled.div.withConfig({
   displayName: "Conditionstyle__AddStepButton",
-  componentId: "sc-1lk06p3-19"
+  componentId: "sc-1lk06p3-20"
 })(["margin:12px 24px 0;"]);

package/dist/Condition.types.d.ts

@@ -55,4 +55,5 @@ export declare type ConditionProps = {
     autoOpenedComponent?: 'subject' | 'operator' | 'factor' | 'parameter' | 'context';
     inputProps?: InputProps;
     onDeactivate?: (currentStepId: React.ReactText, currentConditionId: React.ReactText) => void;
+    readOnly?: boolean;
 };

package/dist/ConditionStep/AddCondition/AddCondition.js

@@ -9,7 +9,9 @@ export var AddCondition = function AddCondition(_ref) {
       conditionsNumber = _ref.conditionsNumber,
       texts = _ref.texts,
       selectedSubject = _ref.selectedSubject,
-      selectedContext = _ref.selectedContext;
+      selectedContext = _ref.selectedContext,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
   return /*#__PURE__*/React.createElement(S.AddConditionRow, null, /*#__PURE__*/React.createElement(S.ConditionConnections, {
     last: true,
     first: conditionsNumber === 0
@@ -22,5 +24,5 @@ export var AddCondition = function AddCondition(_ref) {
     disabled: !(selectedSubject || selectedContext)
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(Add2M, null)
-  }), conditionsNumber > 0 ? texts.addConditionRowButton : texts.addFirstConditionRowButton));
+  }), !readOnly && conditionsNumber > 0 ? texts.addConditionRowButton : texts.addFirstConditionRowButton));
 };

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

@@ -7,4 +7,5 @@ export declare type AddConditionProps = {
     texts: Partial<ConditionTexts>;
     selectedSubject: boolean;
     selectedContext: boolean;
+    readOnly?: boolean;
 };

package/dist/ConditionStep/ConditionRow/ConditionRow.js

@@ -35,7 +35,9 @@ export var ConditionRow = function ConditionRow(_ref) {
       stepType = _ref.stepType,
       onDeactivate = _ref.onDeactivate,
       error = _ref.error,
-      inputProps = _ref.inputProps;
+      inputProps = _ref.inputProps,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
   return /*#__PURE__*/React.createElement(S.ConditionRow, {
     stepType: stepType,
     style: hasPriority ? {
@@ -45,7 +47,8 @@ export var ConditionRow = function ConditionRow(_ref) {
     index: index
   }, /*#__PURE__*/React.createElement(S.ConditionConnections, {
     first: index === 0,
-    last: Boolean(addCondition && index + 1 === conditionsNumber && maxConditionLength !== undefined && conditionsNumber === maxConditionLength)
+    last: readOnly ? Boolean(index + 1 === conditionsNumber) : Boolean(addCondition && index + 1 === conditionsNumber && maxConditionLength !== undefined && conditionsNumber === maxConditionLength),
+    readOnly: readOnly
   }), /*#__PURE__*/React.createElement(S.ConditionWrapper, null, conditionParameter && /*#__PURE__*/React.createElement(Factors, _extends({}, conditionParameter, {
     inputProps: inputProps,
     getPopupContainerOverride: getPopupContainerOverride,
@@ -56,7 +59,8 @@ export var ConditionRow = function ConditionRow(_ref) {
     onChangeValue: function onChangeValue(value) {
       return selectParameter(stepId, conditionId, value);
     },
-    opened: hasPriority && stepId === currentStepId && conditionId === currentConditionId && currentField === PARAMETER
+    opened: hasPriority && stepId === currentStepId && conditionId === currentConditionId && currentField === PARAMETER,
+    readOnly: readOnly
   }))), (!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, {
     getPopupContainerOverride: getPopupContainerOverride,
     onActivate: function onActivate() {
@@ -66,7 +70,8 @@ export var ConditionRow = function ConditionRow(_ref) {
     onChange: function onChange(value) {
       return selectOperator(stepId, conditionId, value);
     },
-    opened: hasPriority && stepId === currentStepId && conditionId === currentConditionId && currentField === OPERATOR
+    opened: hasPriority && stepId === currentStepId && conditionId === currentConditionId && currentField === OPERATOR,
+    readOnly: readOnly
   }))), conditionFactor !== undefined && (conditionOperator == null ? void 0 : conditionOperator.value) && (conditionFactor == null ? void 0 : conditionFactor.availableFactorTypes) !== null && /*#__PURE__*/React.createElement(S.ConditionWrapper, {
     fullWidth: true
   }, /*#__PURE__*/React.createElement(React.Fragment, null, (conditionFactor == null ? void 0 : conditionFactor.withCustomFactor) || /*#__PURE__*/React.createElement(Factors, _extends({}, conditionFactor, {
@@ -84,8 +89,9 @@ export var ConditionRow = function ConditionRow(_ref) {
     },
     factorKey: conditionId,
     error: error,
-    opened: hasPriority && stepId === currentStepId && conditionId === currentConditionId && currentField === FACTOR
-  })))), removeCondition && conditionsNumber > minConditionLength && /*#__PURE__*/React.createElement(S.RemoveIconWrapper, {
+    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);
     },

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

@@ -29,4 +29,5 @@ export declare type ConditionRowProps = {
     texts: Partial<ConditionTexts>;
     stepType: 'event' | 'attribute' | 'default' | undefined;
     inputProps?: InputProps;
+    readOnly?: boolean;
 };

package/dist/ConditionStep/ConditionStep.js

@@ -49,7 +49,9 @@ export var ConditionStep = function ConditionStep(_ref) {
       onDeactivate = _ref.onDeactivate,
       showSuffix = _ref.showSuffix,
       hoverDisabled = _ref.hoverDisabled,
-      inputProps = _ref.inputProps;
+      inputProps = _ref.inputProps,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
 
   var _useIntl = useIntl(),
       formatMessage = _useIntl.formatMessage;
@@ -114,13 +116,14 @@ export var ConditionStep = function ConditionStep(_ref) {
       updateStepName: updateStepName,
       removeStep: removeStep,
       duplicateStep: duplicateStep,
-      draggableEnabled: Boolean(draggableEnabled)
+      draggableEnabled: Boolean(draggableEnabled),
+      readOnly: readOnly
     });
-  }, [draggableEnabled, duplicateStep, index, removeStep, step.id, step.stepName, text, updateStepName]);
+  }, [draggableEnabled, duplicateStep, index, removeStep, step.id, step.stepName, text, updateStepName, readOnly]);
   var addConditionButton = React.useMemo(function () {
     var _step$subject, _step$context;
 
-    return addCondition && (maxConditionsLength === undefined || step.conditions.length < maxConditionsLength) && /*#__PURE__*/React.createElement(AddCondition, {
+    return !readOnly && addCondition && (maxConditionsLength === undefined || step.conditions.length < maxConditionsLength) && /*#__PURE__*/React.createElement(AddCondition, {
       texts: text,
       stepId: step.id,
       addCondition: onAddCondition,
@@ -128,7 +131,7 @@ export var ConditionStep = function ConditionStep(_ref) {
       selectedSubject: Boolean((_step$subject = step.subject) == null ? void 0 : _step$subject.selectedItem),
       selectedContext: Boolean((_step$context = step.context) == null ? void 0 : _step$context.selectedItem)
     });
-  }, [addCondition, onAddCondition, maxConditionsLength, step.conditions.length, step.context, step.id, step.subject, text]);
+  }, [addCondition, onAddCondition, maxConditionsLength, step.conditions.length, step.context, step.id, step.subject, text, readOnly]);
   var renderConditionRow = React.useCallback(function (condition, conditionIndex) {
     var _step$context2;
 
@@ -169,9 +172,10 @@ export var ConditionStep = function ConditionStep(_ref) {
       setStepConditionFactorValue: setStepConditionFactorValue,
       texts: text,
       stepType: (_step$context2 = step.context) == null ? void 0 : _step$context2.type,
-      onDeactivate: onDeactivate
+      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]);
+  }, [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]);
   return /*#__PURE__*/React.createElement(S.Step, {
     key: step.id,
     id: "condition-step-" + step.id,
@@ -203,7 +207,8 @@ export var ConditionStep = function ConditionStep(_ref) {
     opened: step.id === currentStepId && currentField === SUBJECT,
     onSelectItem: function onSelectItem(value) {
       return selectContext(value, step.id);
-    }
+    },
+    readOnly: readOnly
   }))), /*#__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);

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

@@ -35,4 +35,5 @@ export declare type ConditionStepProps = {
     showSuffix?: boolean;
     hoverDisabled?: boolean;
     inputProps?: InputProps;
+    readOnly?: boolean;
 };

package/dist/ConditionStep/StepHeader/StepHeader.js

@@ -14,7 +14,9 @@ export var StepHeader = function StepHeader(_ref) {
       duplicateStep = _ref.duplicateStep,
       removeStep = _ref.removeStep,
       index = _ref.index,
-      draggableEnabled = _ref.draggableEnabled;
+      draggableEnabled = _ref.draggableEnabled,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
   var onChangeNameDebounce = React.useCallback(debounce(updateStepName || NOOP, 300), [updateStepName]);
 
   var _React$useState = React.useState(stepName),
@@ -28,15 +30,11 @@ export var StepHeader = function StepHeader(_ref) {
     setLocalName(event.target.value);
     onChangeNameDebounce(stepId, event.target.value);
   }, [onChangeNameDebounce, stepId]);
-  return /*#__PURE__*/React.createElement(S.StepHeader, {
-    className: "ds-condition-step-header",
-    draggable: draggableEnabled
-  }, /*#__PURE__*/React.createElement(S.LeftSide, null, draggableEnabled && /*#__PURE__*/React.createElement(S.DragIcon, {
+  var dragHandleElement = !readOnly && draggableEnabled && /*#__PURE__*/React.createElement(S.DragIcon, {
     className: "step-drag-handler",
     component: /*#__PURE__*/React.createElement(DragHandleM, null)
-  }), /*#__PURE__*/React.createElement(S.StepName, {
-    className: "ds-condition-step-name"
-  }, "" + (index + 1), ' ', /*#__PURE__*/React.createElement(InlineEdit, {
+  });
+  var stepNameElement = readOnly ? localName : /*#__PURE__*/React.createElement(InlineEdit, {
     size: "small",
     input: {
       value: localName,
@@ -44,7 +42,8 @@ export var StepHeader = function StepHeader(_ref) {
       placeholder: texts.stepNamePlaceholder,
       onChange: handleChangeName
     }
-  }))), /*#__PURE__*/React.createElement(S.StepCruds, null, /*#__PURE__*/React.createElement(Cruds, {
+  });
+  var crudElement = !readOnly && /*#__PURE__*/React.createElement(S.StepCruds, null, /*#__PURE__*/React.createElement(Cruds, {
     onDuplicate: duplicateStep ? function () {
       return duplicateStep(stepId);
     } : undefined,
@@ -53,5 +52,13 @@ export var StepHeader = function StepHeader(_ref) {
     } : undefined,
     duplicateTooltip: texts.duplicateTooltip,
     deleteTooltip: texts.removeTooltip
-  })));
+  }));
+  return /*#__PURE__*/React.createElement(S.StepHeader, {
+    className: "ds-condition-step-header",
+    draggable: draggableEnabled
+  }, /*#__PURE__*/React.createElement(S.LeftSide, null, dragHandleElement, /*#__PURE__*/React.createElement(S.StepName, {
+    className: "ds-condition-step-name"
+  }, /*#__PURE__*/React.createElement(S.StepIndexWrapper, {
+    readOnly: readOnly
+  }, "" + (index + 1)), stepNameElement)), crudElement);
 };

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

@@ -9,4 +9,5 @@ export declare type StepHeaderProps = {
     duplicateStep: ConditionProps['duplicateStep'];
     updateStepName: ConditionProps['onUpdateStepName'];
     draggableEnabled: boolean;
+    readOnly?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-condition",
-  "version": "0.18.11",
+  "version": "0.19.1",
   "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.10",
-    "@synerise/ds-context-selector": "^0.14.12",
+    "@synerise/ds-context-selector": "^0.15.1",
     "@synerise/ds-core": "^0.38.0",
     "@synerise/ds-cruds": "^0.3.18",
-    "@synerise/ds-factors": "^0.15.16",
+    "@synerise/ds-factors": "^0.16.1",
     "@synerise/ds-icon": "^0.52.0",
-    "@synerise/ds-inline-edit": "^0.6.41",
-    "@synerise/ds-operators": "^0.9.29",
-    "@synerise/ds-subject": "^0.9.29",
+    "@synerise/ds-inline-edit": "^0.6.42",
+    "@synerise/ds-operators": "^0.10.1",
+    "@synerise/ds-subject": "^0.9.30",
     "@synerise/ds-tooltip": "^0.11.18",
     "@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": "6b7a49d1e4ab90ba861c6037226988f9629b744e"
+  "gitHead": "dc78070c73476c9959230e11a5ae020d413e5c16"
 }