@synerise/ds-condition 0.20.20 → 0.20.21

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.20.21](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.20.20...@synerise/ds-condition@0.20.21) (2023-05-16)
+
+**Note:** Version bump only for package @synerise/ds-condition
+
+
+
+
+
 ## [0.20.20](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.20.19...@synerise/ds-condition@0.20.20) (2023-04-26)
 
 **Note:** Version bump only for package @synerise/ds-condition

package/dist/Condition.style.d.ts

@@ -1,5 +1,6 @@
 /// <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, {
@@ -27,14 +28,17 @@ export declare const ConditionWrapper: import("styled-components").StyledCompone
 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 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 ConditionRowDefinition: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ConditionRowLine: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const AddConditionRow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ConditionConnections: import("styled-components").StyledComponent<"span", any, {
     first?: boolean | undefined;
     last?: boolean | undefined;
     readOnly?: boolean | undefined;
 }, never>;
+export declare const ConditionRow: import("styled-components").StyledComponent<"div", any, {
+    withError: boolean;
+    index: number;
+    stepType: ConditionRowProps['stepType'];
+}, never>;
 export declare const AddStepButton: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Condition.style.js

@@ -2,66 +2,72 @@ 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 ErrorWrapper = styled.div.withConfig({
+  displayName: "Conditionstyle__ErrorWrapper",
+  componentId: "sc-1lk06p3-0"
+})(["color:", ";margin-top:8px;"], function (props) {
+  return props.theme.palette['red-600'];
+});
 export var DragIcon = styled(Icon).withConfig({
   displayName: "Conditionstyle__DragIcon",
-  componentId: "sc-1lk06p3-0"
+  componentId: "sc-1lk06p3-1"
 })(["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"
+  componentId: "sc-1lk06p3-2"
 })(["position:absolute;top:16px;right:24px;visibility:hidden;opacity:0;"]);
 export var StepConditions = styled.div.withConfig({
   displayName: "Conditionstyle__StepConditions",
-  componentId: "sc-1lk06p3-2"
+  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%';
 }, DragIcon);
 export var StepName = styled.div.withConfig({
   displayName: "Conditionstyle__StepName",
-  componentId: "sc-1lk06p3-3"
+  componentId: "sc-1lk06p3-4"
 })(["font-size:13px;line-height:1.84;color:", ";display:flex;flex-direction:row;align-items:center;justify-content:flex-start;white-space:pre-wrap;&&& input{margin-top:2px;cursor:default;}"], function (props) {
   return props.theme.palette['grey-800'];
 });
 export var StepIndexWrapper = styled.span.withConfig({
   displayName: "Conditionstyle__StepIndexWrapper",
-  componentId: "sc-1lk06p3-4"
+  componentId: "sc-1lk06p3-5"
 })(["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-5"
+  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%;}"]);
 export var ConditionStepWrapper = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionStepWrapper",
-  componentId: "sc-1lk06p3-6"
+  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-7"
+  componentId: "sc-1lk06p3-8"
 })(["display:contents;"]);
 export var StepCruds = styled.div.withConfig({
   displayName: "Conditionstyle__StepCruds",
-  componentId: "sc-1lk06p3-8"
+  componentId: "sc-1lk06p3-9"
 })(["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-9"
+  componentId: "sc-1lk06p3-10"
 })(["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-10"
+  componentId: "sc-1lk06p3-11"
 })(["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-11"
+  componentId: "sc-1lk06p3-12"
 })(["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-12"
+  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) {
   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) {
@@ -79,36 +85,36 @@ export var Step = styled.div.withConfig({
 }, DraggedLabel);
 export var ConditionWrapper = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionWrapper",
-  componentId: "sc-1lk06p3-13"
+  componentId: "sc-1lk06p3-14"
 })([""]);
 export var Subject = styled.div.withConfig({
   displayName: "Conditionstyle__Subject",
-  componentId: "sc-1lk06p3-14"
+  componentId: "sc-1lk06p3-15"
 })([""]);
 export var RemoveIconWrapper = styled.span.withConfig({
   displayName: "Conditionstyle__RemoveIconWrapper",
-  componentId: "sc-1lk06p3-15"
+  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;"]);
 export var ConditionRows = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionRows",
-  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-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) {
-  return 10000 - props.index;
-}, ConditionWrapper, RemoveIconWrapper);
+})(["display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;"]);
+export var ConditionRowDefinition = styled.div.withConfig({
+  displayName: "Conditionstyle__ConditionRowDefinition",
+  componentId: "sc-1lk06p3-18"
+})(["display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;"]);
+export var ConditionRowLine = styled.div.withConfig({
+  displayName: "Conditionstyle__ConditionRowLine",
+  componentId: "sc-1lk06p3-19"
+})([""]);
 export var AddConditionRow = styled.div.withConfig({
   displayName: "Conditionstyle__AddConditionRow",
-  componentId: "sc-1lk06p3-18"
+  componentId: "sc-1lk06p3-20"
 })(["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-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) {
+  componentId: "sc-1lk06p3-21"
+})(["display:flex;width:32px;min-width:32px;margin:0 12px;position:relative;height:32px;&:before{position:absolute;content:'';width:", ";height:1px;top:16px;left:", ";background-color:", ";}&:after{display:", ";position:absolute;content:'';width:1px;left:50%;height:auto;top:", ";bottom:", ";background-color:", ";}"], function (props) {
   return props.first ? '100%' : '16px';
 }, function (props) {
   return props.first ? '0' : '16px';
@@ -123,7 +129,17 @@ export var ConditionConnections = styled.span.withConfig({
 }, function (props) {
   return props.theme.palette['grey-300'];
 });
+export var ConditionRow = styled.div.withConfig({
+  displayName: "Conditionstyle__ConditionRow",
+  componentId: "sc-1lk06p3-22"
+})(["padding-bottom:", ";z-index:", ";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';
+}, function (props) {
+  return 10000 - props.index;
+}, ConditionConnections, function (props) {
+  return props.withError ? 'auto' : '32px';
+}, ConditionWrapper, RemoveIconWrapper);
 export var AddStepButton = styled.div.withConfig({
   displayName: "Conditionstyle__AddStepButton",
-  componentId: "sc-1lk06p3-20"
+  componentId: "sc-1lk06p3-23"
 })(["margin:12px 24px 0;"]);

package/dist/Condition.types.d.ts

@@ -15,6 +15,7 @@ export declare type ConditionStep = {
     context?: Omit<ContextProps, 'onSelectItem'>;
     stepName?: string;
     conditions: StepConditions[];
+    addConditionErrorText?: React.ReactNode | string;
 };
 export declare type ConditionTexts = {
     stepNamePlaceholder: string;

package/dist/ConditionStep/AddCondition/AddCondition.js

@@ -11,18 +11,22 @@ export var AddCondition = function AddCondition(_ref) {
       selectedSubject = _ref.selectedSubject,
       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, {
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+      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
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React.createElement(S.ConditionRowLine, null, /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      component: /*#__PURE__*/React.createElement(Add2M, null)
+    }),
+    error: !disabled && Boolean(errorText),
     type: "ghost",
     mode: "icon-label",
     onClick: function onClick() {
       addCondition && addCondition(stepId);
     },
-    disabled: !(selectedSubject || selectedContext)
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(Add2M, null)
-  }), !readOnly && conditionsNumber > 0 ? texts.addConditionRowButton : texts.addFirstConditionRowButton));
+    disabled: disabled
+  }, !readOnly && conditionsNumber > 0 ? texts.addConditionRowButton : texts.addFirstConditionRowButton), !disabled && errorText && /*#__PURE__*/React.createElement(S.ErrorWrapper, null, errorText))));
 };

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

@@ -8,4 +8,5 @@ export declare type AddConditionProps = {
     selectedSubject: boolean;
     selectedContext: boolean;
     readOnly?: boolean;
+    errorText?: React.ReactNode | string;
 };

package/dist/ConditionStep/ConditionRow/ConditionRow.js

@@ -34,22 +34,37 @@ export var ConditionRow = function ConditionRow(_ref) {
       texts = _ref.texts,
       stepType = _ref.stepType,
       onDeactivate = _ref.onDeactivate,
-      error = _ref.error,
       inputProps = _ref.inputProps,
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
+  var conditionFactorErrorText = conditionFactor == null ? void 0 : conditionFactor.errorText;
+  var conditionParameterErrorText = conditionParameter == null ? void 0 : conditionParameter.errorText;
+  var conditionParameterValue = conditionParameter == null ? void 0 : conditionParameter.value;
+  var rowHasError = !!(conditionParameterErrorText || conditionFactorErrorText && conditionParameterValue);
+  var conditionErrorMessage = React.useMemo(function () {
+    var errorText;
+
+    if (conditionParameterErrorText) {
+      errorText = conditionParameterErrorText;
+    } else if (conditionFactorErrorText && conditionParameterValue) {
+      errorText = conditionFactorErrorText;
+    }
+
+    return errorText ? /*#__PURE__*/React.createElement(S.ErrorWrapper, null, errorText) : /*#__PURE__*/React.createElement(React.Fragment, null);
+  }, [conditionFactorErrorText, conditionParameterErrorText, conditionParameterValue]);
   return /*#__PURE__*/React.createElement(S.ConditionRow, {
     stepType: stepType,
     style: hasPriority ? {
       zIndex: 10001
     } : undefined,
     key: "condition-row-" + conditionId,
-    index: index
+    index: index,
+    withError: rowHasError
   }, /*#__PURE__*/React.createElement(S.ConditionConnections, {
     first: index === 0,
     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, {
+  }), /*#__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, {
     inputProps: inputProps,
     getPopupContainerOverride: getPopupContainerOverride,
     onActivate: function onActivate() {
@@ -60,7 +75,8 @@ export var ConditionRow = function ConditionRow(_ref) {
       return selectParameter(stepId, conditionId, value);
     },
     opened: hasPriority && stepId === currentStepId && conditionId === currentConditionId && currentField === PARAMETER,
-    readOnly: readOnly
+    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, {
     getPopupContainerOverride: getPopupContainerOverride,
     onActivate: function onActivate() {
@@ -74,7 +90,7 @@ export var ConditionRow = function ConditionRow(_ref) {
     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, {
+  }, (conditionFactor == null ? void 0 : conditionFactor.withCustomFactor) || /*#__PURE__*/React.createElement(Factors, _extends({}, conditionFactor, {
     inputProps: inputProps,
     getPopupContainerOverride: getPopupContainerOverride,
     onActivate: function onActivate() {
@@ -88,10 +104,10 @@ export var ConditionRow = function ConditionRow(_ref) {
       return setStepConditionFactorValue(stepId, conditionId, value);
     },
     factorKey: conditionId,
-    error: error,
+    error: Boolean(conditionFactor.errorText),
     opened: hasPriority && stepId === currentStepId && conditionId === currentConditionId && currentField === FACTOR,
     readOnly: readOnly
-  })))), !readOnly && removeCondition && conditionsNumber > minConditionLength && /*#__PURE__*/React.createElement(S.RemoveIconWrapper, {
+  }))), !readOnly && removeCondition && conditionsNumber > minConditionLength && /*#__PURE__*/React.createElement(S.RemoveIconWrapper, {
     onClick: function onClick() {
       return removeCondition(stepId, conditionId);
     },
@@ -102,5 +118,5 @@ export var ConditionRow = function ConditionRow(_ref) {
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(CloseS, null),
     color: theme.palette['red-600']
-  }))));
+  })))), conditionErrorMessage));
 };

package/dist/ConditionStep/ConditionStep.js

@@ -124,6 +124,7 @@ export var ConditionStep = function ConditionStep(_ref) {
     var _step$subject, _step$context;
 
     return !readOnly && addCondition && (maxConditionsLength === undefined || step.conditions.length < maxConditionsLength) && /*#__PURE__*/React.createElement(AddCondition, {
+      errorText: step.addConditionErrorText,
       texts: text,
       stepId: step.id,
       addCondition: onAddCondition,
@@ -131,7 +132,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, readOnly]);
+  }, [addCondition, onAddCondition, maxConditionsLength, step.conditions.length, step.context, step.id, step.subject, text, readOnly, step.addConditionErrorText]);
   var renderConditionRow = React.useCallback(function (condition, conditionIndex) {
     var _step$context2;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-condition",
-  "version": "0.20.20",
+  "version": "0.20.21",
   "description": "Condition UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -36,10 +36,10 @@
     "@synerise/ds-context-selector": "^0.16.13",
     "@synerise/ds-core": "^0.39.8",
     "@synerise/ds-cruds": "^0.3.24",
-    "@synerise/ds-factors": "^0.17.20",
+    "@synerise/ds-factors": "^0.17.21",
     "@synerise/ds-icon": "^0.56.0",
     "@synerise/ds-inline-edit": "^0.6.61",
-    "@synerise/ds-operators": "^0.10.19",
+    "@synerise/ds-operators": "^0.10.20",
     "@synerise/ds-subject": "^0.9.48",
     "@synerise/ds-tooltip": "^0.13.2",
     "@synerise/ds-utils": "^0.19.0",
@@ -49,5 +49,5 @@
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "41163901b144e78a83329029519cb9eb48bf4787"
+  "gitHead": "71daf94c4b480a9b8f675537a7894ad5d7db4ff9"
 }