@synerise/ds-condition 0.14.0 → 0.14.3

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.14.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.14.2...@synerise/ds-condition@0.14.3) (2022-04-12)
+
+
+### Bug Fixes
+
+* **condition:** rules-of-hooks dependencies ([10e573e](https://github.com/Synerise/synerise-design/commit/10e573e018ca7e2f69f3f317f35d51eace89ded8))
+
+
+
+
+
+## [0.14.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.14.1...@synerise/ds-condition@0.14.2) (2022-04-12)
+
+
+### Bug Fixes
+
+* fix filter dropdowns ([eaab107](https://github.com/Synerise/synerise-design/commit/eaab107b6dca7401a17c2e36806febd11edc677b))
+
+
+
+
+
+## [0.14.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.14.0...@synerise/ds-condition@0.14.1) (2022-04-08)
+
+**Note:** Version bump only for package @synerise/ds-condition
+
+
+
+
+
 # [0.14.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.13.10...@synerise/ds-condition@0.14.0) (2022-04-05)
 
 

package/dist/Condition.d.ts

@@ -3,5 +3,6 @@ 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: React.FC<T.ConditionProps>;
 export default Condition;

package/dist/Condition.js

@@ -21,6 +21,7 @@ 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',
@@ -76,10 +77,6 @@ var Condition = function Condition(props) {
       currentField = _React$useState3[0],
       setCurrentField = _React$useState3[1];
 
-  var _React$useState4 = React.useState(null),
-      priorityStepId = _React$useState4[0],
-      setPriorityStepId = _React$useState4[1];
-
   var prevSteps = usePrevious(steps);
   React.useEffect(function () {
     var newConditionId = prevSteps && steps && steps.reduce(function (id, step) {
@@ -148,11 +145,13 @@ var Condition = function Condition(props) {
   var selectSubject = React.useCallback(function (value, stepId) {
     clearConditionRow(stepId);
     setCurrentStepId(stepId);
+    setCurrentField(PARAMETER);
     onChangeSubject && onChangeSubject(stepId, value);
   }, [clearConditionRow, onChangeSubject]);
   var selectContext = React.useCallback(function (value, stepId) {
     clearConditionRow(stepId);
     setCurrentStepId(stepId);
+    setCurrentField(PARAMETER);
     onChangeContext && onChangeContext(stepId, value);
   }, [clearConditionRow, onChangeContext]);
   var selectParameter = React.useCallback(function (stepId, conditionId, value) {
@@ -188,6 +187,29 @@ var Condition = function Condition(props) {
   var draggableEnabled = React.useMemo(function () {
     return onChangeOrder && steps.length > 1;
   }, [steps, onChangeOrder]);
+  var handleAddStep = React.useCallback(function () {
+    var newStepId = addStep ? addStep() : undefined;
+
+    if (newStepId) {
+      setCurrentStepId(newStepId);
+      setCurrentField(SUBJECT);
+    }
+  }, [addStep]);
+  var handleAddCondtion = React.useMemo(function () {
+    if (!addCondition) {
+      return undefined;
+    }
+
+    return function (stepId) {
+      var newConditionId = addCondition ? addCondition(stepId) : undefined;
+
+      if (newConditionId) {
+        setCurrentConditionId(newConditionId);
+        setCurrentStepId(stepId);
+        setCurrentField(PARAMETER);
+      }
+    };
+  }, [addCondition]);
   return React.useMemo(function () {
     return /*#__PURE__*/React.createElement(S.Condition, {
       className: "ds-conditions",
@@ -201,8 +223,7 @@ var Condition = function Condition(props) {
         step: step,
         texts: text,
         index: index,
-        hasPriority: step.id === priorityStepId,
-        onStepActivate: setPriorityStepId,
+        hasPriority: step.id === currentStepId,
         getPopupContainerOverride: getPopupContainerOverride,
         draggableEnabled: draggableEnabled,
         selectOperator: selectOperator,
@@ -220,17 +241,19 @@ var Condition = function Condition(props) {
         currentStepId: currentStepId,
         currentField: currentField,
         removeCondition: removeCondition,
-        addCondition: addCondition,
-        setCurrentField: setCurrentField
+        addCondition: handleAddCondtion,
+        setCurrentField: setCurrentField,
+        setCurrentCondition: setCurrentConditionId,
+        setCurrentStep: setCurrentStepId
       });
     })), addStep && /*#__PURE__*/React.createElement(S.AddStepButton, null, /*#__PURE__*/React.createElement(Button, {
       type: "ghost",
       mode: "icon-label",
-      onClick: addStep
+      onClick: handleAddStep
     }, /*#__PURE__*/React.createElement(Icon, {
       component: /*#__PURE__*/React.createElement(Add3M, null)
     }), text.addStep)));
-  }, [steps, priorityStepId, setPriorityStepId, onChangeOrder, addStep, text, draggableEnabled, selectOperator, selectParameter, selectContext, selectSubject, onUpdateStepName, duplicateStep, removeStep, minConditionsLength, maxConditionsLength, setStepConditionFactorType, setStepConditionFactorValue, currentConditionId, currentStepId, currentField, removeCondition, addCondition, getPopupContainerOverride]);
+  }, [steps, onChangeOrder, addStep, handleAddStep, text, currentConditionId, currentStepId, currentField, getPopupContainerOverride, draggableEnabled, handleAddCondtion, selectOperator, selectParameter, selectContext, selectSubject, onUpdateStepName, duplicateStep, removeStep, minConditionsLength, maxConditionsLength, setStepConditionFactorType, setStepConditionFactorValue, removeCondition]);
 };
 
 export default Condition;

package/dist/Condition.style.d.ts

@@ -13,7 +13,9 @@ export declare const StepHeader: import("styled-components").StyledComponent<"di
     draggable: boolean;
 }, never>;
 export declare const Step: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ConditionWrapper: import("styled-components").StyledComponent<"div", any, {}, 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 ConditionRows: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Condition.types.d.ts

@@ -30,11 +30,11 @@ export declare type ConditionTexts = {
 export declare type ConditionProps = {
     steps: ConditionStep[];
     getPopupContainerOverride?: (trigger: HTMLElement | null) => HTMLElement;
-    addCondition?: (stepId: React.ReactText) => void;
+    addCondition?: (stepId: React.ReactText) => string | undefined;
     removeCondition?: (stepId: React.ReactText, conditionRowId: React.ReactText) => void;
     removeStep?: (stepId: React.ReactText) => void;
     duplicateStep?: (stepId: React.ReactText) => void;
-    addStep?: () => void;
+    addStep?: () => string | undefined;
     onChangeOrder?: (newOrder: ConditionStep[]) => void;
     texts?: Partial<ConditionTexts>;
     minConditionsLength: number;

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { ConditionProps, ConditionTexts } from '../../Condition.types';
+import * as React from 'react';
+import { ConditionTexts } from '../../Condition.types';
 export declare type AddConditionProps = {
-    addCondition: ConditionProps['addCondition'];
+    addCondition: (stepId: React.ReactText) => void;
     stepId: React.ReactText;
     conditionsNumber: number;
     texts: Partial<ConditionTexts>;

package/dist/ConditionStep/ConditionRow/ConditionRow.js

@@ -49,7 +49,7 @@ export var ConditionRow = function ConditionRow(_ref) {
     onChangeValue: function onChangeValue(value) {
       return selectParameter(stepId, conditionId, value);
     },
-    opened: stepId === currentStepId && conditionId === currentConditionId && currentField === PARAMETER
+    opened: hasPriority && stepId === currentStepId && conditionId === currentConditionId && currentField === PARAMETER
   }))), (!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() {
@@ -58,8 +58,10 @@ export var ConditionRow = function ConditionRow(_ref) {
     onChange: function onChange(value) {
       return selectOperator(stepId, conditionId, value);
     },
-    opened: stepId === currentStepId && conditionId === currentConditionId && currentField === OPERATOR
-  }))), conditionFactor !== undefined && (conditionOperator == null ? void 0 : conditionOperator.value) && (conditionFactor == null ? void 0 : conditionFactor.availableFactorTypes) !== null && /*#__PURE__*/React.createElement(S.ConditionWrapper, null, /*#__PURE__*/React.createElement(React.Fragment, null, (conditionFactor == null ? void 0 : conditionFactor.withCustomFactor) || /*#__PURE__*/React.createElement(Factors, _extends({}, conditionFactor, {
+    opened: hasPriority && stepId === currentStepId && conditionId === currentConditionId && currentField === OPERATOR
+  }))), 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, {
     getPopupContainerOverride: getPopupContainerOverride,
     onActivate: function onActivate() {
       return _onActivate && _onActivate(FACTOR);
@@ -71,7 +73,7 @@ export var ConditionRow = function ConditionRow(_ref) {
       return setStepConditionFactorValue(stepId, conditionId, value);
     },
     factorKey: conditionId,
-    opened: stepId === currentStepId && conditionId === currentConditionId && currentField === FACTOR
+    opened: hasPriority && stepId === currentStepId && conditionId === currentConditionId && currentField === FACTOR
   })))), removeCondition && conditionsNumber > minConditionLength && /*#__PURE__*/React.createElement(S.RemoveIconWrapper, {
     onClick: function onClick() {
       return removeCondition(stepId, conditionId);

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

@@ -7,7 +7,7 @@ export declare type ConditionRowProps = {
     hasPriority?: boolean;
     onActivate?: (fieldType: string) => void;
     conditionId: React.ReactText;
-    addCondition: ConditionProps['addCondition'];
+    addCondition?: (stepId: React.ReactText) => void;
     conditionParameter: FactorsProps;
     conditionOperator: OperatorsProps;
     conditionFactor: FactorsProps;

package/dist/ConditionStep/ConditionStep.js

@@ -13,7 +13,8 @@ import { useIntl } from 'react-intl';
 import * as S from '../Condition.style';
 import { StepHeader } from './StepHeader';
 import { AddCondition } from './AddCondition';
-import { ConditionRow } from './ConditionRow'; // eslint-disable-next-line import/prefer-default-export
+import { ConditionRow } from './ConditionRow';
+import { SUBJECT } from '../Condition'; // eslint-disable-next-line import/prefer-default-export
 
 export var ConditionStep = function ConditionStep(_ref) {
   var step = _ref.step,
@@ -35,16 +36,13 @@ export var ConditionStep = function ConditionStep(_ref) {
       setStepConditionFactorType = _ref.setStepConditionFactorType,
       setStepConditionFactorValue = _ref.setStepConditionFactorValue,
       getPopupContainerOverride = _ref.getPopupContainerOverride,
-      onStepActivate = _ref.onStepActivate,
       hasPriority = _ref.hasPriority,
       currentStepId = _ref.currentStepId,
       currentConditionId = _ref.currentConditionId,
       currentField = _ref.currentField,
-      setCurrentField = _ref.setCurrentField;
-
-  var _React$useState = React.useState(null),
-      activeConditionId = _React$useState[0],
-      setActiveConditionId = _React$useState[1];
+      setCurrentField = _ref.setCurrentField,
+      setCurrentCondition = _ref.setCurrentCondition,
+      setCurrentStep = _ref.setCurrentStep;
 
   var _useIntl = useIntl(),
       formatMessage = _useIntl.formatMessage;
@@ -89,8 +87,8 @@ export var ConditionStep = function ConditionStep(_ref) {
       })
     }, texts);
   }, [texts, formatMessage]);
-  var onActivate = onStepActivate ? function () {
-    return onStepActivate(step.id);
+  var onActivate = setCurrentStep ? function () {
+    return setCurrentStep(step.id);
   } : undefined;
   var onAddCondition = React.useCallback(function (stepId) {
     addCondition && addCondition(stepId);
@@ -125,15 +123,16 @@ export var ConditionStep = function ConditionStep(_ref) {
 
     var handleActivation = function handleActivation(conditionId) {
       return function (fieldType) {
-        setActiveConditionId(conditionId);
         onActivate && onActivate();
         setCurrentField && setCurrentField(fieldType);
+        setCurrentCondition && setCurrentCondition(conditionId);
+        setCurrentStep && setCurrentStep(step.id);
       };
     };
 
     return /*#__PURE__*/React.createElement(ConditionRow, {
       key: "step-" + step.id + "-condition-" + condition.id,
-      hasPriority: hasPriority && activeConditionId === condition.id,
+      hasPriority: hasPriority && currentConditionId === condition.id,
       index: conditionIndex,
       conditionId: condition.id,
       addCondition: addCondition,
@@ -159,7 +158,7 @@ export var ConditionStep = function ConditionStep(_ref) {
       texts: text,
       stepType: (_step$context2 = step.context) == null ? void 0 : _step$context2.type
     });
-  }, [step.id, step.conditions.length, step.context, hasPriority, activeConditionId, addCondition, removeCondition, minConditionsLength, maxConditionsLength, currentStepId, currentConditionId, currentField, selectParameter, selectOperator, getPopupContainerOverride, setStepConditionFactorType, setStepConditionFactorValue, text, onActivate, setCurrentField]);
+  }, [step.id, step.conditions.length, step.context, hasPriority, currentConditionId, addCondition, removeCondition, minConditionsLength, maxConditionsLength, currentStepId, currentField, selectParameter, selectOperator, getPopupContainerOverride, setStepConditionFactorType, setStepConditionFactorValue, text, onActivate, setCurrentField, setCurrentCondition, setCurrentStep]);
   return /*#__PURE__*/React.createElement(S.Step, {
     key: step.id,
     id: "condition-step-" + step.id,
@@ -172,12 +171,14 @@ export var ConditionStep = function ConditionStep(_ref) {
   }, /*#__PURE__*/React.createElement(S.Subject, null, step.subject && /*#__PURE__*/React.createElement(Subject, _extends({}, step.subject, {
     getPopupContainerOverride: getPopupContainerOverride,
     onActivate: onActivate,
+    opened: step.id === currentStepId && currentField === SUBJECT,
     onSelectItem: function onSelectItem(value) {
       return selectSubject(value, step.id);
     }
   })), step.context && /*#__PURE__*/React.createElement(ContextSelector, _extends({}, step.context, {
     getPopupContainerOverride: getPopupContainerOverride,
     onActivate: onActivate,
+    opened: step.id === currentStepId && currentField === SUBJECT,
     onSelectItem: function onSelectItem(value) {
       return selectContext(value, step.id);
     }

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

@@ -29,4 +29,6 @@ export declare type ConditionStepProps = {
     currentConditionId: React.ReactText;
     currentField: React.ReactText;
     setCurrentField: (field: string) => void;
+    setCurrentCondition: (conditionId: string) => void;
+    setCurrentStep: (stepId: React.ReactText) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-condition",
-  "version": "0.14.0",
+  "version": "0.14.3",
   "description": "Condition UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -36,11 +36,11 @@
     "@synerise/ds-context-selector": "^0.11.0",
     "@synerise/ds-core": "^0.33.0",
     "@synerise/ds-cruds": "^0.3.9",
-    "@synerise/ds-factors": "^0.12.0",
+    "@synerise/ds-factors": "^0.12.2",
     "@synerise/ds-icon": "^0.49.0",
-    "@synerise/ds-inline-edit": "^0.6.10",
-    "@synerise/ds-operators": "^0.8.0",
-    "@synerise/ds-subject": "^0.8.0",
+    "@synerise/ds-inline-edit": "^0.6.11",
+    "@synerise/ds-operators": "^0.8.1",
+    "@synerise/ds-subject": "^0.8.1",
     "@synerise/ds-tooltip": "^0.11.9",
     "@synerise/ds-utils": "^0.19.0",
     "react-sortablejs": "^6.0.0"
@@ -49,5 +49,5 @@
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "5793ce09feb88b36cc8ca1923ddfcb272b889cb0"
+  "gitHead": "78a3de75d8ec9c917d96c1b54c70d24f50dc8c7a"
 }