@synerise/ds-condition 1.3.2 → 1.4.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.4.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@1.3.2...@synerise/ds-condition@1.4.0) (2025-07-04)
+
+
+### Bug Fixes
+
+* **condition:** allow param button to use available space ([b3ea666](https://github.com/Synerise/synerise-design/commit/b3ea666417cd14440ceff58de2e91e58198bfd49))
+
+
+### Features
+
+* **factors:** pass component props ([81f40dd](https://github.com/Synerise/synerise-design/commit/81f40dd18b3e7d88828d5e418efc94b1cb9eda91))
+
+
+
+
+
 ## [1.3.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-condition@1.3.1...@synerise/ds-condition@1.3.2) (2025-07-01)
 
 **Note:** Version bump only for package @synerise/ds-condition

package/dist/Condition.js

@@ -48,7 +48,8 @@ var Condition = function Condition(props) {
     factorParameterSelectorComponent = props.factorParameterSelectorComponent,
     actionAttributeParameterSelectorComponent = props.actionAttributeParameterSelectorComponent,
     _props$showEmptyCondi = props.showEmptyConditionPlaceholder,
-    showEmptyConditionPlaceholder = _props$showEmptyCondi === void 0 ? false : _props$showEmptyCondi;
+    showEmptyConditionPlaceholder = _props$showEmptyCondi === void 0 ? false : _props$showEmptyCondi,
+    factorValueExtraProps = props.factorValueExtraProps;
   var allTexts = useTranslations(texts);
   var _useState = useState(),
     draggedStep = _useState[0],
@@ -278,7 +279,8 @@ var Condition = function Condition(props) {
       readOnly: readOnly,
       singleStepCondition: singleStepCondition,
       showActionAttribute: showActionAttribute,
-      showEmptyConditionPlaceholder: showEmptyConditionPlaceholder
+      showEmptyConditionPlaceholder: showEmptyConditionPlaceholder,
+      factorValueExtraProps: factorValueExtraProps
     });
   }), /*#__PURE__*/React.createElement(DragOverlay, {
     dropAnimation: null

package/dist/Condition.style.d.ts

@@ -34,6 +34,15 @@ export declare const RemoveIconWrapper: import("styled-components").StyledCompon
 export declare const ConditionWrapper: import("styled-components").StyledComponent<"div", any, {
     withRemoveTrigger?: boolean | undefined;
 }, never>;
+export declare const ConditionParameterWrapper: import("styled-components").StyledComponent<"div", any, {
+    withRemoveTrigger?: boolean | undefined;
+}, never>;
+export declare const ConditionOperatorWrapper: import("styled-components").StyledComponent<"div", any, {
+    withRemoveTrigger?: boolean | undefined;
+}, never>;
+export declare const ConditionFactorWrapper: 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>;

package/dist/Condition.style.js

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import Cruds from '@synerise/ds-cruds';
+import { Value } from '@synerise/ds-factors/dist/FactorValue/Parameter/Parameter.style';
 import Icon from '@synerise/ds-icon';
 import { InputGroupItem } from '@synerise/ds-input/dist/InputGroup.styles';
 export var ErrorWrapper = styled.div.withConfig({
@@ -108,28 +109,40 @@ export var RemoveIconWrapper = styled.span.attrs({
 export var ConditionWrapper = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionWrapper",
   componentId: "sc-1lk06p3-20"
-})(["", ";", "{min-width:0;}"], function (props) {
+})(["", ";", "{min-width:0;}", "{min-width:50px;max-width:none;}"], function (props) {
   return Boolean(props.withRemoveTrigger) && css(["&{display:flex;> *{min-width:0;}}", "{flex:0 0 24px;}"], RemoveIconWrapper);
-}, InputGroupItem);
+}, InputGroupItem, Value);
+export var ConditionParameterWrapper = styled(ConditionWrapper).withConfig({
+  displayName: "Conditionstyle__ConditionParameterWrapper",
+  componentId: "sc-1lk06p3-21"
+})(["flex:0 400 auto;min-width:120px;"]);
+export var ConditionOperatorWrapper = styled(ConditionWrapper).withConfig({
+  displayName: "Conditionstyle__ConditionOperatorWrapper",
+  componentId: "sc-1lk06p3-22"
+})(["flex:0 0 auto;"]);
+export var ConditionFactorWrapper = styled(ConditionWrapper).withConfig({
+  displayName: "Conditionstyle__ConditionFactorWrapper",
+  componentId: "sc-1lk06p3-23"
+})(["flex:30 1 auto;"]);
 export var ConditionRows = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionRows",
-  componentId: "sc-1lk06p3-21"
+  componentId: "sc-1lk06p3-24"
 })(["flex-grow:1;min-width:0;"]);
 export var ConditionRowDefinition = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionRowDefinition",
-  componentId: "sc-1lk06p3-22"
+  componentId: "sc-1lk06p3-25"
 })(["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-23"
+  componentId: "sc-1lk06p3-26"
 })(["flex-grow:1;min-width:0;"]);
 export var AddConditionRow = styled.div.withConfig({
   displayName: "Conditionstyle__AddConditionRow",
-  componentId: "sc-1lk06p3-24"
+  componentId: "sc-1lk06p3-27"
 })(["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-25"
+  componentId: "sc-1lk06p3-28"
 })(["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) {
@@ -147,7 +160,7 @@ export var ConditionConnections = styled.span.withConfig({
 });
 export var ConditionRow = styled.div.withConfig({
   displayName: "Conditionstyle__ConditionRow",
-  componentId: "sc-1lk06p3-26"
+  componentId: "sc-1lk06p3-29"
 })(["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) {
@@ -159,9 +172,9 @@ export var ConditionRow = styled.div.withConfig({
 }, ConditionWrapper, RemoveIconWrapper);
 export var AddStepButton = styled.div.withConfig({
   displayName: "Conditionstyle__AddStepButton",
-  componentId: "sc-1lk06p3-27"
+  componentId: "sc-1lk06p3-30"
 })(["margin:12px 24px 0;"]);
 export var ActionAttribute = styled.div.withConfig({
   displayName: "Conditionstyle__ActionAttribute",
-  componentId: "sc-1lk06p3-28"
+  componentId: "sc-1lk06p3-31"
 })(["margin-left:8px;display:flex;"]);

package/dist/Condition.types.d.ts

@@ -72,6 +72,7 @@ export type ConditionProps = {
     hoverDisabled?: boolean;
     autoOpenedComponent?: 'subject' | 'operator' | 'factor' | 'parameter' | 'context';
     inputProps?: Partial<InputProps>;
+    factorValueExtraProps?: FactorsProps['factorValueExtraProps'];
     onDeactivate?: (currentStepId: ReactText, currentConditionId: ReactText) => void;
     readOnly?: boolean;
     singleStepCondition?: boolean;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import type * as T from './ConditionRow.types';
-export declare const ConditionRow: ({ index, conditionId, conditionParameter, conditionOperator, conditionFactor, removeCondition, addCondition, minConditionLength, maxConditionLength, conditionsNumber, stepId, currentStepId, currentConditionId, currentField, selectParameter, selectOperator, setStepConditionFactorType, setStepConditionFactorValue, getPopupContainerOverride, onActivate, hasPriority, texts, onDeactivate, inputProps, readOnly, parameterSelectorComponent, factorParameterSelectorComponent, }: T.ConditionRowProps) => React.JSX.Element;
+export declare const ConditionRow: ({ index, conditionId, conditionParameter, conditionOperator, conditionFactor, removeCondition, addCondition, minConditionLength, maxConditionLength, conditionsNumber, stepId, currentStepId, currentConditionId, currentField, selectParameter, selectOperator, setStepConditionFactorType, setStepConditionFactorValue, getPopupContainerOverride, onActivate, hasPriority, texts, onDeactivate, inputProps, readOnly, parameterSelectorComponent, factorParameterSelectorComponent, factorValueExtraProps, }: T.ConditionRowProps) => React.JSX.Element;

package/dist/ConditionStep/ConditionRow/ConditionRow.js

@@ -36,7 +36,8 @@ export var ConditionRow = function ConditionRow(_ref) {
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     parameterSelectorComponent = _ref.parameterSelectorComponent,
-    factorParameterSelectorComponent = _ref.factorParameterSelectorComponent;
+    factorParameterSelectorComponent = _ref.factorParameterSelectorComponent,
+    factorValueExtraProps = _ref.factorValueExtraProps;
   var conditionFactorErrorText = conditionFactor == null ? void 0 : conditionFactor.errorText;
   var conditionParameterErrorText = conditionParameter == null ? void 0 : conditionParameter.errorText;
   var conditionOperatorErrorText = conditionOperator == null ? void 0 : conditionOperator.errorText;
@@ -96,10 +97,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, {
+  }), /*#__PURE__*/React.createElement(S.ConditionRowLine, null, /*#__PURE__*/React.createElement(S.ConditionRowDefinition, null, renderConditionParameterWrapper && /*#__PURE__*/React.createElement(S.ConditionParameterWrapper, {
     "data-testid": "condition-parameter-wrapper",
     withRemoveTrigger: lastConditionWrapper === 'parameter'
-  }, renderConditionParameterWrapper && /*#__PURE__*/React.createElement(Factors, _extends({
+  }, /*#__PURE__*/React.createElement(Factors, _extends({
     selectedFactorType: "",
     defaultFactorType: "",
     value: "",
@@ -124,7 +125,7 @@ export var ConditionRow = function ConditionRow(_ref) {
     opened: hasPriority && stepId === currentStepId && conditionId === currentConditionId && currentField === PARAMETER,
     readOnly: readOnly,
     error: Boolean(conditionParameter == null ? void 0 : conditionParameter.errorText)
-  })), lastConditionWrapper === 'parameter' && removeConditionTrigger), renderConditionOperatorWrapper && /*#__PURE__*/React.createElement(S.ConditionWrapper, {
+  })), lastConditionWrapper === 'parameter' && removeConditionTrigger), renderConditionOperatorWrapper && /*#__PURE__*/React.createElement(S.ConditionOperatorWrapper, {
     "data-testid": "condition-operator-wrapper",
     withRemoveTrigger: lastConditionWrapper === 'operator'
   }, /*#__PURE__*/React.createElement(Operators, _extends({
@@ -142,7 +143,7 @@ export var ConditionRow = function ConditionRow(_ref) {
     opened: hasPriority && stepId === currentStepId && conditionId === currentConditionId && currentField === OPERATOR,
     readOnly: readOnly,
     errorText: conditionOperator == null ? void 0 : conditionOperator.errorText
-  })), lastConditionWrapper === 'operator' && removeConditionTrigger), renderConditionFactorWrapper && /*#__PURE__*/React.createElement(S.ConditionWrapper, {
+  })), lastConditionWrapper === 'operator' && removeConditionTrigger), renderConditionFactorWrapper && /*#__PURE__*/React.createElement(S.ConditionFactorWrapper, {
     "data-testid": "condition-factor-wrapper",
     withRemoveTrigger: lastConditionWrapper === 'factor'
   }, (conditionFactor == null ? void 0 : conditionFactor.withCustomFactor) || /*#__PURE__*/React.createElement(Factors, _extends({
@@ -156,7 +157,8 @@ export var ConditionRow = function ConditionRow(_ref) {
       contextParameter: {
         component: factorParameterSelectorComponent
       }
-    }
+    },
+    factorValueExtraProps: factorValueExtraProps
   }, conditionFactorProps, {
     inputProps: inputProps,
     getPopupContainerOverride: getPopupContainerOverride || getPopupContainer,

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

@@ -2,7 +2,7 @@ import type { ReactNode, ReactText } from 'react';
 import type { FactorValueComponentProps, FactorsProps } from '@synerise/ds-factors';
 import type { OperatorsProps } from '@synerise/ds-operators';
 import type { ConditionProps, ConditionTexts } from '../../Condition.types';
-export type ConditionRowProps = Pick<ConditionProps, 'removeCondition' | 'getPopupContainerOverride' | 'factorParameterSelectorComponent' | 'parameterSelectorComponent'> & {
+export type ConditionRowProps = Pick<ConditionProps, 'removeCondition' | 'getPopupContainerOverride' | 'factorParameterSelectorComponent' | 'parameterSelectorComponent' | 'factorValueExtraProps'> & {
     index: number;
     error?: boolean;
     hasPriority?: boolean;

package/dist/ConditionStep/ConditionStep.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type * as T from './ConditionStep.types';
-export declare const ConditionStep: ({ step, texts, index, isLast, isDragged, addCondition, removeCondition, updateStepName, removeStep, duplicateStep, minConditionsLength, maxConditionsLength, draggableEnabled, selectSubject, selectContext, selectActionAttribute, selectOperator, selectParameter, setStepConditionFactorType, setStepConditionFactorValue, getPopupContainerOverride, hasPriority, currentStepId, currentConditionId, currentField, setCurrentField, setCurrentCondition, setCurrentStep, onDeactivate, showSuffix, inputProps, readOnly, singleStepCondition, showActionAttribute, contextSelectorComponent: CustomContextSelectorComponent, actionAttributeParameterSelectorComponent, parameterSelectorComponent, factorParameterSelectorComponent, showEmptyConditionPlaceholder, }: T.ConditionStepProps) => React.JSX.Element;
+export declare const ConditionStep: ({ step, texts, index, isLast, isDragged, addCondition, removeCondition, updateStepName, removeStep, duplicateStep, minConditionsLength, maxConditionsLength, draggableEnabled, selectSubject, selectContext, selectActionAttribute, selectOperator, selectParameter, setStepConditionFactorType, setStepConditionFactorValue, getPopupContainerOverride, hasPriority, currentStepId, currentConditionId, currentField, setCurrentField, setCurrentCondition, setCurrentStep, onDeactivate, showSuffix, inputProps, readOnly, singleStepCondition, showActionAttribute, contextSelectorComponent: CustomContextSelectorComponent, actionAttributeParameterSelectorComponent, parameterSelectorComponent, factorParameterSelectorComponent, showEmptyConditionPlaceholder, factorValueExtraProps, }: T.ConditionStepProps) => React.JSX.Element;

package/dist/ConditionStep/ConditionStep.js

@@ -56,7 +56,8 @@ export var ConditionStep = function ConditionStep(_ref) {
     parameterSelectorComponent = _ref.parameterSelectorComponent,
     factorParameterSelectorComponent = _ref.factorParameterSelectorComponent,
     _ref$showEmptyConditi = _ref.showEmptyConditionPlaceholder,
-    showEmptyConditionPlaceholder = _ref$showEmptyConditi === void 0 ? false : _ref$showEmptyConditi;
+    showEmptyConditionPlaceholder = _ref$showEmptyConditi === void 0 ? false : _ref$showEmptyConditi,
+    factorValueExtraProps = _ref.factorValueExtraProps;
   var _useSortable = useSortable({
       id: step.id
     }),
@@ -168,9 +169,10 @@ export var ConditionStep = function ConditionStep(_ref) {
       onDeactivate: onDeactivate,
       readOnly: readOnly,
       parameterSelectorComponent: parameterSelectorComponent,
-      factorParameterSelectorComponent: factorParameterSelectorComponent
+      factorParameterSelectorComponent: factorParameterSelectorComponent,
+      factorValueExtraProps: factorValueExtraProps
     });
-  }, [step.id, step.conditions.length, step.context, hasPriority, currentConditionId, addCondition, removeCondition, minConditionsLength, maxConditionsLength, currentStepId, currentField, selectParameter, selectOperator, getPopupContainerOverride, setStepConditionFactorType, setStepConditionFactorValue, allTexts, onDeactivate, _onActivate, setCurrentField, setCurrentCondition, setCurrentStep, inputProps, readOnly, parameterSelectorComponent, factorParameterSelectorComponent]);
+  }, [step.id, step.conditions.length, step.context, hasPriority, currentConditionId, addCondition, removeCondition, minConditionsLength, maxConditionsLength, currentStepId, currentField, selectParameter, selectOperator, getPopupContainerOverride, setStepConditionFactorType, setStepConditionFactorValue, allTexts, onDeactivate, _onActivate, setCurrentField, setCurrentCondition, setCurrentStep, inputProps, readOnly, parameterSelectorComponent, factorParameterSelectorComponent, factorValueExtraProps]);
   var hasSelectedSubjectOrContext = useMemo(function () {
     var _step$subject2, _step$context3;
     return ((_step$subject2 = step.subject) == null ? void 0 : _step$subject2.selectedItem) || ((_step$context3 = step.context) == null ? void 0 : _step$context3.selectedItem);

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

@@ -4,7 +4,7 @@ import type { FactorType, FactorValueType } from '@synerise/ds-factors';
 import type { OperatorsGroup, OperatorsItem } from '@synerise/ds-operators';
 import type { SubjectItem } from '@synerise/ds-subject';
 import type { ConditionProps, ConditionStep } from '../Condition.types';
-export type ConditionStepProps = Pick<ConditionProps, 'singleStepCondition' | 'showActionAttribute' | 'showEmptyConditionPlaceholder' | 'showSuffix' | 'readOnly' | 'inputProps' | 'hoverDisabled' | 'getPopupContainerOverride' | 'minConditionsLength' | 'addCondition' | 'removeCondition' | 'texts' | 'maxConditionsLength' | 'contextSelectorComponent' | 'factorParameterSelectorComponent' | 'parameterSelectorComponent' | 'actionAttributeParameterSelectorComponent'> & {
+export type ConditionStepProps = Pick<ConditionProps, 'singleStepCondition' | 'showActionAttribute' | 'showEmptyConditionPlaceholder' | 'showSuffix' | 'readOnly' | 'inputProps' | 'hoverDisabled' | 'getPopupContainerOverride' | 'minConditionsLength' | 'addCondition' | 'removeCondition' | 'texts' | 'maxConditionsLength' | 'contextSelectorComponent' | 'factorParameterSelectorComponent' | 'parameterSelectorComponent' | 'actionAttributeParameterSelectorComponent' | 'factorValueExtraProps'> & {
     index: number;
     isLast?: boolean;
     isDragged?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-condition",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "Condition UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,14 +35,14 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-button": "^1.4.2",
-    "@synerise/ds-context-selector": "^1.1.16",
+    "@synerise/ds-context-selector": "^1.1.17",
     "@synerise/ds-cruds": "^1.0.13",
-    "@synerise/ds-factors": "^1.3.2",
+    "@synerise/ds-factors": "^1.4.0",
     "@synerise/ds-icon": "^1.5.4",
     "@synerise/ds-inline-edit": "^1.0.17",
     "@synerise/ds-input": "^1.3.2",
     "@synerise/ds-operators": "^1.0.16",
-    "@synerise/ds-sortable": "^1.3.1",
+    "@synerise/ds-sortable": "^1.3.2",
     "@synerise/ds-subject": "^1.0.17",
     "@synerise/ds-tooltip": "^1.1.12",
     "@synerise/ds-typography": "^1.0.13",
@@ -55,5 +55,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "4512641033ba3581a3df208143c547fcfed45895"
+  "gitHead": "2161bdb04f3db0f79b7d0465ce6b41121f1543ef"
 }