@synerise/ds-condition 0.15.1 → 0.16.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.16.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.15.1...@synerise/ds-condition@0.16.0) (2022-05-13)
+
+
+### Bug Fixes
+
+* **condition:** disabling hover effect on nonactive condition in filter ([228f242](https://github.com/Synerise/synerise-design/commit/228f242e6ce244c73e9da93adb2c4317cd65ec91))
+* **condition:** fixes styles of dragged condition with opened dropdown ([0449e94](https://github.com/Synerise/synerise-design/commit/0449e948dc598974c81e7f857431c519c5fa2666))
+
+
+### Features
+
+* **condition:** adds defaultOpenedComponent prop ([6b6721d](https://github.com/Synerise/synerise-design/commit/6b6721dbd12be7e744100d303a5d3d7823467c3b))
+
+
+
+
+
 ## [0.15.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@0.15.0...@synerise/ds-condition@0.15.1) (2022-04-29)
 
 **Note:** Version bump only for package @synerise/ds-condition

package/README.md

@@ -123,6 +123,7 @@ import Condition from '@synerise/ds-condition'
 | onChangeFactorType        | Callback called when user change type of condition factor     | (stepId: React.ReactText, conditionId: React.ReactText, value: FactorType \ undefined) => void    | -       |
 | onUpdateStepName          | Callback called when user change the name of step condition   | (stepId: React.ReactText, value: string) => void                                                  | -       |
 | getPopupContainerOverride | Popup container function for child tooltips and dropdowns     | (trigger: HTMLElement | null) => HTMLElement;                                                     | -       |
+| defaultOpenedComponent    | Component which should be opened after render                 | 'subject' \ 'operator' \ 'factor' \ 'parameter' \ 'context'                                       | -       |
 
 ### ConditionStep
 

package/dist/Condition.js

@@ -53,7 +53,10 @@ var Condition = function Condition(props) {
       onChangeFactorValue = props.onChangeFactorValue,
       onUpdateStepName = props.onUpdateStepName,
       getPopupContainerOverride = props.getPopupContainerOverride,
-      showSuffix = props.showSuffix;
+      showSuffix = props.showSuffix,
+      hoverDisabled = props.hoverDisabled,
+      _props$autoOpenedComp = props.autoOpenedComponent,
+      autoOpenedComponent = _props$autoOpenedComp === void 0 ? DEFAULT_FIELD : _props$autoOpenedComp;
 
   var _useIntl = useIntl(),
       formatMessage = _useIntl.formatMessage;
@@ -79,11 +82,19 @@ var Condition = function Condition(props) {
       currentStepId = _React$useState2[0],
       setCurrentStepId = _React$useState2[1];
 
-  var _React$useState3 = React.useState(DEFAULT_FIELD),
+  var _React$useState3 = React.useState(autoOpenedComponent),
       currentField = _React$useState3[0],
       setCurrentField = _React$useState3[1];
 
   var prevSteps = usePrevious(steps);
+  React.useEffect(function () {
+    if (autoOpenedComponent && steps.length && steps[0].conditions[0].operator && steps[0].conditions[0].operator.value === undefined) {
+      setCurrentStepId(steps[0].id);
+      setCurrentConditionId(steps[0].conditions[0].id);
+      setCurrentField(autoOpenedComponent);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
   React.useEffect(function () {
     var newConditionId = prevSteps && steps && steps.reduce(function (id, step) {
       var result = id;
@@ -257,7 +268,8 @@ var Condition = function Condition(props) {
         setCurrentCondition: setCurrentConditionId,
         setCurrentStep: setCurrentStepId,
         onDeactivate: handleClearActiveCondition,
-        showSuffix: showSuffix
+        showSuffix: showSuffix,
+        hoverDisabled: hoverDisabled || currentStepId !== step.id && currentStepId !== undefined
       });
     })), addStep && /*#__PURE__*/React.createElement(S.AddStepButton, null, /*#__PURE__*/React.createElement(Button, {
       type: "ghost",
@@ -266,7 +278,7 @@ var Condition = function Condition(props) {
     }, /*#__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]);
+  }, [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]);
 };
 
 export default Condition;

package/dist/Condition.style.d.ts

@@ -16,6 +16,7 @@ export declare const DraggedLabel: import("styled-components").StyledComponent<"
 export declare const Step: import("styled-components").StyledComponent<"div", any, {
     active: boolean;
     showSuffix: boolean | undefined;
+    hoverDisabled?: boolean | undefined;
 }, never>;
 export declare const ConditionWrapper: import("styled-components").StyledComponent<"div", any, {
     fullWidth?: boolean | undefined;

package/dist/Condition.style.js

@@ -55,12 +55,12 @@ export var DraggedLabel = styled.span.withConfig({
 export var Step = styled.div.withConfig({
   displayName: "Conditionstyle__Step",
   componentId: "sc-1lk06p3-11"
-})(["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{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;}}}"], function (props) {
+})(["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) {
   return props.active ? props.theme.palette['grey-050'] : 'transparent';
 }, function (props) {
-  return props.theme.palette['grey-050'];
+  return props.hoverDisabled ? 'transparent' : props.theme.palette['grey-050'];
 }, StepCruds, StepConditionCruds, DragIcon, function (props) {
   return props.theme.palette.white;
 }, StepHeader, StepName, IconWrapper, StepConditions, DraggedLabel, function (props) {

package/dist/Condition.types.d.ts

@@ -51,4 +51,6 @@ export declare type ConditionProps = {
     onUpdateStepName?: (stepId: React.ReactText, value: string) => void;
     type?: 'attribute' | 'event';
     showSuffix?: boolean;
+    hoverDisabled?: boolean;
+    autoOpenedComponent?: 'subject' | 'operator' | 'factor' | 'parameter' | 'context';
 };

package/dist/ConditionStep/ConditionStep.js

@@ -47,7 +47,8 @@ export var ConditionStep = function ConditionStep(_ref) {
       setCurrentCondition = _ref.setCurrentCondition,
       setCurrentStep = _ref.setCurrentStep,
       onDeactivate = _ref.onDeactivate,
-      showSuffix = _ref.showSuffix;
+      showSuffix = _ref.showSuffix,
+      hoverDisabled = _ref.hoverDisabled;
 
   var _useIntl = useIntl(),
       formatMessage = _useIntl.formatMessage;
@@ -178,6 +179,7 @@ export var ConditionStep = function ConditionStep(_ref) {
       zIndex: 10001
     } : undefined,
     active: step.id === currentStepId && currentField !== '',
+    hoverDisabled: hoverDisabled,
     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

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

@@ -33,4 +33,5 @@ export declare type ConditionStepProps = {
     setCurrentStep: (stepId: React.ReactText) => void;
     onDeactivate: () => void;
     showSuffix?: boolean;
+    hoverDisabled?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-condition",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "description": "Condition UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -36,7 +36,7 @@
     "@synerise/ds-context-selector": "^0.12.1",
     "@synerise/ds-core": "^0.34.0",
     "@synerise/ds-cruds": "^0.3.9",
-    "@synerise/ds-factors": "^0.13.1",
+    "@synerise/ds-factors": "^0.13.2",
     "@synerise/ds-icon": "^0.49.0",
     "@synerise/ds-inline-edit": "^0.6.12",
     "@synerise/ds-operators": "^0.9.0",
@@ -49,5 +49,5 @@
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "21879cf06623fe6e1c2523ebf7c055ab9dbd50ef"
+  "gitHead": "25e5737ebe9d4319de963b369bc281651872887c"
 }