@synerise/ds-condition 1.3.1 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/CHANGELOG.md +762 -2424
  2. package/README.md +38 -38
  3. package/dist/Condition.js +12 -8
  4. package/dist/Condition.style.d.ts +9 -0
  5. package/dist/Condition.style.js +24 -11
  6. package/dist/Condition.types.d.ts +5 -4
  7. package/dist/ConditionStep/AddCondition/AddCondition.d.ts +1 -1
  8. package/dist/ConditionStep/AddCondition/AddCondition.types.d.ts +2 -2
  9. package/dist/ConditionStep/ConditionRow/ConditionRow.d.ts +2 -2
  10. package/dist/ConditionStep/ConditionRow/ConditionRow.js +11 -9
  11. package/dist/ConditionStep/ConditionRow/ConditionRow.types.d.ts +2 -2
  12. package/dist/ConditionStep/ConditionStep.d.ts +2 -2
  13. package/dist/ConditionStep/ConditionStep.js +11 -9
  14. package/dist/ConditionStep/ConditionStep.types.d.ts +4 -4
  15. package/dist/ConditionStep/EmptyCondition/EmptyCondition.d.ts +1 -1
  16. package/dist/ConditionStep/EmptyCondition/EmptyCondition.js +1 -1
  17. package/dist/ConditionStep/EmptyCondition/emptyCondition.styles.d.ts +1 -1
  18. package/dist/ConditionStep/StepHeader/StepHeader.d.ts +1 -1
  19. package/dist/ConditionStep/StepHeader/StepHeader.js +2 -2
  20. package/dist/ConditionStep/StepHeader/StepHeader.types.d.ts +3 -3
  21. package/dist/ConditionStep/StepName/StepName.d.ts +2 -2
  22. package/dist/hooks/useTranslations.d.ts +1 -1
  23. package/dist/index.d.ts +1 -1
  24. package/package.json +15 -15
package/README.md CHANGED
@@ -6,6 +6,7 @@ title: Condition
6
6
  Condition UI Component
7
7
 
8
8
  ## Installation
9
+
9
10
  ```
10
11
  npm i @synerise/ds-condition
11
12
  or
@@ -13,6 +14,7 @@ yarn add @synerise/ds-condition
13
14
  ```
14
15
 
15
16
  ## Usage
17
+
16
18
  ```
17
19
  import Condition from '@synerise/ds-condition'
18
20
 
@@ -101,54 +103,54 @@ import Condition from '@synerise/ds-condition'
101
103
 
102
104
  ## API
103
105
 
104
- | Property | Description | Type | Default |
105
- |---------------------------|---------------------------------------------------------------|---------------------------------------------------------------------------------------------------| --- |
106
- | addCondition | Callback called when user adds new row of conditions | (stepId: React.ReactText) => void | - |
107
- | removeCondition | Callback called when user clicks on remove row of condtions | (stepId: React.ReactText, conditionRowId: React.ReactText) => void | - |
108
- | steps | Array contains all steps of condition | ConditionStep[] | - |
109
- | texts | Translations object | Texts | - |
110
- | updateStepName | Callback called when user change the name of step | (stepId: React.ReactText, value: string) => void | - |
111
- | addStep | Callback called when user clicks on add step button | () => void | - |
112
- | duplicateStep | Callback called when user clicks on duplicate step button | (stepId: React.ReactText) => void | - |
113
- | removeStep | Callback called when user clicks on remove step button | (stepId: React.ReactText) => void | - |
114
- | onChangeOrder | Callback called when user change order of steps | (order: ConditionStep[]) => void | - |
115
- | autoClearCondition | Automatically fires clearing values of dependent elements | Boolean | false |
116
- | minConditionsLength | Minimal length of conditions in step | number | - |
117
- | maxConditionsLength | Maximal length of conditions in step | number \ undefined | - |
118
- | onChangeContext | Callback called when user change value of step context | (stepId: React.ReactText, value: ContextItem \ ContextGroup \ undefined) => void | - |
119
- | onChangeSubject | Callback called when user change value of step subject | (stepId: React.ReactText, value: SubjectItem \ undefined) => void | - |
120
- | onChangeParameter | Callback called when user change value of condition parameter | (stepId: React.ReactText, conditionId: React.ReactText, value: ParameterValue) | - |
121
- | onChangeOperator | Callback called when user change value of condition operator | (stepId: React.ReactText, conditionId: React.ReactText, value: OperatorsItem \ undefined) => void | - |
122
- | onChangeFactorValue | Callback called when user change value of condition factor | (stepId: React.ReactText, conditionId: React.ReactText, value: OperatorsType \ undefined) => void | - |
123
- | onChangeFactorType | Callback called when user change type of condition factor | (stepId: React.ReactText, conditionId: React.ReactText, value: FactorType \ undefined) => void | - |
124
- | onUpdateStepName | Callback called when user change the name of step condition | (stepId: React.ReactText, value: string) => void | - |
125
- | onDeactivate | Callback called when user blur on of the condition inputs | (stepId: React.ReactText, conditionId: string) => void | - |
126
- | getPopupContainerOverride | Popup container function for child tooltips and dropdowns | (trigger: HTMLElement | null) => HTMLElement; | - |
127
- | defaultOpenedComponent | Component which should be opened after render | 'subject' \ 'operator' \ 'factor' \ 'parameter' \ 'context' | - |
128
- | inputProps | group of props from ds-factors types | InputProps | - |
129
-
106
+ | Property | Description | Type | Default |
107
+ | ------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | --------------------- | --- |
108
+ | addCondition | Callback called when user adds new row of conditions | (stepId: React.ReactText) => void | - |
109
+ | removeCondition | Callback called when user clicks on remove row of condtions | (stepId: React.ReactText, conditionRowId: React.ReactText) => void | - |
110
+ | steps | Array contains all steps of condition | ConditionStep[] | - |
111
+ | texts | Translations object | Texts | - |
112
+ | updateStepName | Callback called when user change the name of step | (stepId: React.ReactText, value: string) => void | - |
113
+ | addStep | Callback called when user clicks on add step button | () => void | - |
114
+ | duplicateStep | Callback called when user clicks on duplicate step button | (stepId: React.ReactText) => void | - |
115
+ | removeStep | Callback called when user clicks on remove step button | (stepId: React.ReactText) => void | - |
116
+ | onChangeOrder | Callback called when user change order of steps | (order: ConditionStep[]) => void | - |
117
+ | autoClearCondition | Automatically fires clearing values of dependent elements | Boolean | false |
118
+ | minConditionsLength | Minimal length of conditions in step | number | - |
119
+ | maxConditionsLength | Maximal length of conditions in step | number \ undefined | - |
120
+ | onChangeContext | Callback called when user change value of step context | (stepId: React.ReactText, value: ContextItem \ ContextGroup \ undefined) => void | - |
121
+ | onChangeSubject | Callback called when user change value of step subject | (stepId: React.ReactText, value: SubjectItem \ undefined) => void | - |
122
+ | onChangeParameter | Callback called when user change value of condition parameter | (stepId: React.ReactText, conditionId: React.ReactText, value: ParameterValue) | - |
123
+ | onChangeOperator | Callback called when user change value of condition operator | (stepId: React.ReactText, conditionId: React.ReactText, value: OperatorsItem \ undefined) => void | - |
124
+ | onChangeFactorValue | Callback called when user change value of condition factor | (stepId: React.ReactText, conditionId: React.ReactText, value: OperatorsType \ undefined) => void | - |
125
+ | onChangeFactorType | Callback called when user change type of condition factor | (stepId: React.ReactText, conditionId: React.ReactText, value: FactorType \ undefined) => void | - |
126
+ | onUpdateStepName | Callback called when user change the name of step condition | (stepId: React.ReactText, value: string) => void | - |
127
+ | onDeactivate | Callback called when user blur on of the condition inputs | (stepId: React.ReactText, conditionId: string) => void | - |
128
+ | getPopupContainerOverride | Popup container function for child tooltips and dropdowns | (trigger: HTMLElement | null) => HTMLElement; | - |
129
+ | defaultOpenedComponent | Component which should be opened after render | 'subject' \ 'operator' \ 'factor' \ 'parameter' \ 'context' | - |
130
+ | inputProps | group of props from ds-factors types | InputProps | - |
130
131
 
131
132
  ### ConditionStep
132
133
 
133
- | Property | Description | Type | Default |
134
- | --- | --- | --- | --- |
135
- | conditions | Rows of conditions | StepConditions[] | - |
136
- | id | Id of condition step | React.ReactText | - |
137
- | stepName | The name of step | string | - |
138
- | subject | Subject options | [SubjectProps](/docs/components/subject) | - |
139
- | context | ContextSelector options | [ContextSelectorProps](/docs/components/context-selector) | - |
140
- | getPopupContainerOverride | Popup container function for child tooltips and dropdowns | (trigger: HTMLElement | null) => HTMLElement; | - |
134
+ | Property | Description | Type | Default |
135
+ | ------------------------- | --------------------------------------------------------- | --------------------------------------------------------- | --------------------- | --- |
136
+ | conditions | Rows of conditions | StepConditions[] | - |
137
+ | id | Id of condition step | React.ReactText | - |
138
+ | stepName | The name of step | string | - |
139
+ | subject | Subject options | [SubjectProps](/docs/components/subject) | - |
140
+ | context | ContextSelector options | [ContextSelectorProps](/docs/components/context-selector) | - |
141
+ | getPopupContainerOverride | Popup container function for child tooltips and dropdowns | (trigger: HTMLElement | null) => HTMLElement; | - |
141
142
 
142
143
  ### StepConditions
143
144
 
144
145
  | Property | Description | Type | Default |
145
- | --- | --- | --- | --- |
146
+ | ---------- | -------------------------- | -------------------------------------------- | ------- |
146
147
  | factor? | Factors selector options | [FactorsProps](/docs/components/factors) | - |
147
148
  | id | Id condition row | React.ReactText | - |
148
149
  | operator? | Operators selector options | [OperatorsProps](/docs/components/operators) | - |
149
150
  | parameter? | Parameter selector options | [FactorsProps](/docs/components/factors) | - |
150
151
 
151
152
  #### Selectors appereance rules
153
+
152
154
  - Parameter appers when `parameter` prop is provided
153
155
  - Operator appears without Parameter when `operator` prop is provided and `parameter` prop is not provided
154
156
  - Operator with Parameter appers when `operator` and `parameter` pros are provided and `parameter.value` is set
@@ -159,7 +161,7 @@ See [Condition.spec.tsx](./src/__specs__/Condition.spec.tsx) for code examples
159
161
  ### Texts
160
162
 
161
163
  | Property | Description | Type | Default |
162
- | --- | --- | --- | --- |
164
+ | ------------------------- | --------------------------------------- | ------ | ------- |
163
165
  | addConditionRowButton | Label of add conditions row button | string | - |
164
166
  | removeConditionRowTooltip | Tooltip on remove conditions row button | string | - |
165
167
  | stepNamePlaceholder | Placeholder of step name | string | - |
@@ -168,5 +170,3 @@ See [Condition.spec.tsx](./src/__specs__/Condition.spec.tsx) for code examples
168
170
  | moveTooltip | Tooltip on move step button | string | - |
169
171
  | removeTooltip | Tooltip on remove step button | string | - |
170
172
  | dropLabel | Label on drop zone | string | - |
171
-
172
-
package/dist/Condition.js CHANGED
@@ -1,13 +1,13 @@
1
1
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
- import React, { useEffect, useState, useCallback, useMemo } from 'react';
3
- import { SortableContainer, DragOverlay } from '@synerise/ds-sortable';
4
- import Icon, { Add3M, DragHandleM } from '@synerise/ds-icon';
2
+ import React, { useCallback, useEffect, useMemo, useState } from 'react';
5
3
  import Button from '@synerise/ds-button';
4
+ import Icon, { Add3M, DragHandleM } from '@synerise/ds-icon';
5
+ import { DragOverlay, SortableContainer } from '@synerise/ds-sortable';
6
6
  import { usePrevious } from '@synerise/ds-utils';
7
- import { ConditionStep } from './ConditionStep';
8
7
  import * as S from './Condition.style';
9
- import { DEFAULT_CONDITION, DEFAULT_FIELD, DEFAULT_STEP, OPERATOR, FACTOR, PARAMETER, SUBJECT, DEFAULT_INPUT_PROPS, ACTION_ATTRIBUTE } from './constants';
8
+ import { ConditionStep } from './ConditionStep';
10
9
  import { StepName } from './ConditionStep/StepName/StepName';
10
+ import { ACTION_ATTRIBUTE, DEFAULT_CONDITION, DEFAULT_FIELD, DEFAULT_INPUT_PROPS, DEFAULT_STEP, FACTOR, OPERATOR, PARAMETER, SUBJECT } from './constants';
11
11
  import { useTranslations } from './hooks/useTranslations';
12
12
  var Condition = function Condition(props) {
13
13
  var _draggedStep$context;
@@ -48,7 +48,8 @@ var Condition = function Condition(props) {
48
48
  factorParameterSelectorComponent = props.factorParameterSelectorComponent,
49
49
  actionAttributeParameterSelectorComponent = props.actionAttributeParameterSelectorComponent,
50
50
  _props$showEmptyCondi = props.showEmptyConditionPlaceholder,
51
- showEmptyConditionPlaceholder = _props$showEmptyCondi === void 0 ? false : _props$showEmptyCondi;
51
+ showEmptyConditionPlaceholder = _props$showEmptyCondi === void 0 ? false : _props$showEmptyCondi,
52
+ factorValueExtraProps = props.factorValueExtraProps;
52
53
  var allTexts = useTranslations(texts);
53
54
  var _useState = useState(),
54
55
  draggedStep = _useState[0],
@@ -106,7 +107,9 @@ var Condition = function Condition(props) {
106
107
  var step = steps.find(function (s) {
107
108
  return s.id === stepId;
108
109
  });
109
- if (step === undefined || step.conditions.length === 0) return;
110
+ if (step === undefined || step.conditions.length === 0) {
111
+ return;
112
+ }
110
113
  if (removeCondition && addCondition) {
111
114
  step.conditions.forEach(function (condition, index) {
112
115
  if (index > 0) {
@@ -276,7 +279,8 @@ var Condition = function Condition(props) {
276
279
  readOnly: readOnly,
277
280
  singleStepCondition: singleStepCondition,
278
281
  showActionAttribute: showActionAttribute,
279
- showEmptyConditionPlaceholder: showEmptyConditionPlaceholder
282
+ showEmptyConditionPlaceholder: showEmptyConditionPlaceholder,
283
+ factorValueExtraProps: factorValueExtraProps
280
284
  });
281
285
  }), /*#__PURE__*/React.createElement(DragOverlay, {
282
286
  dropAnimation: null
package/dist/Condition.style.d.ts CHANGED
@@ -34,6 +34,15 @@ export declare const RemoveIconWrapper: import("styled-components").StyledCompon
34
34
  export declare const ConditionWrapper: import("styled-components").StyledComponent<"div", any, {
35
35
  withRemoveTrigger?: boolean | undefined;
36
36
  }, never>;
37
+ export declare const ConditionParameterWrapper: import("styled-components").StyledComponent<"div", any, {
38
+ withRemoveTrigger?: boolean | undefined;
39
+ }, never>;
40
+ export declare const ConditionOperatorWrapper: import("styled-components").StyledComponent<"div", any, {
41
+ withRemoveTrigger?: boolean | undefined;
42
+ }, never>;
43
+ export declare const ConditionFactorWrapper: import("styled-components").StyledComponent<"div", any, {
44
+ withRemoveTrigger?: boolean | undefined;
45
+ }, never>;
37
46
  export declare const ConditionRows: import("styled-components").StyledComponent<"div", any, {}, never>;
38
47
  export declare const ConditionRowDefinition: import("styled-components").StyledComponent<"div", any, {}, never>;
39
48
  export declare const ConditionRowLine: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/Condition.style.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import styled, { css } from 'styled-components';
2
- import Icon from '@synerise/ds-icon';
3
2
  import Cruds from '@synerise/ds-cruds';
3
+ import { Value } from '@synerise/ds-factors/dist/FactorValue/Parameter/Parameter.style';
4
+ import Icon from '@synerise/ds-icon';
4
5
  import { InputGroupItem } from '@synerise/ds-input/dist/InputGroup.styles';
5
6
  export var ErrorWrapper = styled.div.withConfig({
6
7
  displayName: "Conditionstyle__ErrorWrapper",
@@ -108,28 +109,40 @@ export var RemoveIconWrapper = styled.span.attrs({
108
109
  export var ConditionWrapper = styled.div.withConfig({
109
110
  displayName: "Conditionstyle__ConditionWrapper",
110
111
  componentId: "sc-1lk06p3-20"
111
- })(["", ";", "{min-width:0;}"], function (props) {
112
+ })(["", ";", "{min-width:0;}", "{min-width:50px;max-width:none;}"], function (props) {
112
113
  return Boolean(props.withRemoveTrigger) && css(["&{display:flex;> *{min-width:0;}}", "{flex:0 0 24px;}"], RemoveIconWrapper);
113
- }, InputGroupItem);
114
+ }, InputGroupItem, Value);
115
+ export var ConditionParameterWrapper = styled(ConditionWrapper).withConfig({
116
+ displayName: "Conditionstyle__ConditionParameterWrapper",
117
+ componentId: "sc-1lk06p3-21"
118
+ })(["flex:0 400 auto;min-width:120px;"]);
119
+ export var ConditionOperatorWrapper = styled(ConditionWrapper).withConfig({
120
+ displayName: "Conditionstyle__ConditionOperatorWrapper",
121
+ componentId: "sc-1lk06p3-22"
122
+ })(["flex:0 0 auto;"]);
123
+ export var ConditionFactorWrapper = styled(ConditionWrapper).withConfig({
124
+ displayName: "Conditionstyle__ConditionFactorWrapper",
125
+ componentId: "sc-1lk06p3-23"
126
+ })(["flex:30 1 auto;"]);
114
127
  export var ConditionRows = styled.div.withConfig({
115
128
  displayName: "Conditionstyle__ConditionRows",
116
- componentId: "sc-1lk06p3-21"
129
+ componentId: "sc-1lk06p3-24"
117
130
  })(["flex-grow:1;min-width:0;"]);
118
131
  export var ConditionRowDefinition = styled.div.withConfig({
119
132
  displayName: "Conditionstyle__ConditionRowDefinition",
120
- componentId: "sc-1lk06p3-22"
133
+ componentId: "sc-1lk06p3-25"
121
134
  })(["display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;"]);
122
135
  export var ConditionRowLine = styled.div.withConfig({
123
136
  displayName: "Conditionstyle__ConditionRowLine",
124
- componentId: "sc-1lk06p3-23"
137
+ componentId: "sc-1lk06p3-26"
125
138
  })(["flex-grow:1;min-width:0;"]);
126
139
  export var AddConditionRow = styled.div.withConfig({
127
140
  displayName: "Conditionstyle__AddConditionRow",
128
- componentId: "sc-1lk06p3-24"
141
+ componentId: "sc-1lk06p3-27"
129
142
  })(["display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:row;"]);
130
143
  export var ConditionConnections = styled.span.withConfig({
131
144
  displayName: "Conditionstyle__ConditionConnections",
132
- componentId: "sc-1lk06p3-25"
145
+ componentId: "sc-1lk06p3-28"
133
146
  })(["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) {
134
147
  return props.first ? '100%' : '16px';
135
148
  }, function (props) {
@@ -147,7 +160,7 @@ export var ConditionConnections = styled.span.withConfig({
147
160
  });
148
161
  export var ConditionRow = styled.div.withConfig({
149
162
  displayName: "Conditionstyle__ConditionRow",
150
- componentId: "sc-1lk06p3-26"
163
+ componentId: "sc-1lk06p3-29"
151
164
  })(["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) {
152
165
  return props.onlyChild ? '0' : '16px';
153
166
  }, ConditionConnections, function (props) {
@@ -159,9 +172,9 @@ export var ConditionRow = styled.div.withConfig({
159
172
  }, ConditionWrapper, RemoveIconWrapper);
160
173
  export var AddStepButton = styled.div.withConfig({
161
174
  displayName: "Conditionstyle__AddStepButton",
162
- componentId: "sc-1lk06p3-27"
175
+ componentId: "sc-1lk06p3-30"
163
176
  })(["margin:12px 24px 0;"]);
164
177
  export var ActionAttribute = styled.div.withConfig({
165
178
  displayName: "Conditionstyle__ActionAttribute",
166
- componentId: "sc-1lk06p3-28"
179
+ componentId: "sc-1lk06p3-31"
167
180
  })(["margin-left:8px;display:flex;"]);
package/dist/Condition.types.d.ts CHANGED
@@ -1,8 +1,8 @@
1
- import type { ReactText, ReactNode, ComponentType } from 'react';
2
- import type { SubjectItem, SubjectProps } from '@synerise/ds-subject';
3
- import type { FactorsProps, FactorType, FactorValueComponentProps, FactorValueType, InputProps, ParameterValueType } from '@synerise/ds-factors';
4
- import type { OperatorsItem, OperatorsProps } from '@synerise/ds-operators';
1
+ import type { ComponentType, ReactNode, ReactText } from 'react';
5
2
  import type { ContextGroup, ContextItem, ContextProps } from '@synerise/ds-context-selector';
3
+ import type { FactorType, FactorValueComponentProps, FactorValueType, FactorsProps, InputProps, ParameterValueType } from '@synerise/ds-factors';
4
+ import type { OperatorsItem, OperatorsProps } from '@synerise/ds-operators';
5
+ import type { SubjectItem, SubjectProps } from '@synerise/ds-subject';
6
6
  import type { ConditionStepCrudActions } from './ConditionStep/ConditionStep.types';
7
7
  export type StepConditions = {
8
8
  id: ReactText;
@@ -72,6 +72,7 @@ export type ConditionProps = {
72
72
  hoverDisabled?: boolean;
73
73
  autoOpenedComponent?: 'subject' | 'operator' | 'factor' | 'parameter' | 'context';
74
74
  inputProps?: Partial<InputProps>;
75
+ factorValueExtraProps?: FactorsProps['factorValueExtraProps'];
75
76
  onDeactivate?: (currentStepId: ReactText, currentConditionId: ReactText) => void;
76
77
  readOnly?: boolean;
77
78
  singleStepCondition?: boolean;
package/dist/ConditionStep/AddCondition/AddCondition.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
- import * as T from './AddCondition.types';
2
+ import type * as T from './AddCondition.types';
3
3
  export declare const AddCondition: ({ addCondition, stepId, conditionsNumber, texts, isDisabled, errorText, }: T.AddConditionProps) => React.JSX.Element;
package/dist/ConditionStep/AddCondition/AddCondition.types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import React from 'react';
2
- import { ConditionTexts } from '../../Condition.types';
1
+ import type React from 'react';
2
+ import { type ConditionTexts } from '../../Condition.types';
3
3
  export type AddConditionProps = {
4
4
  addCondition: (stepId: React.ReactText) => void;
5
5
  stepId: React.ReactText;
package/dist/ConditionStep/ConditionRow/ConditionRow.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
- import * as T from './ConditionRow.types';
3
- 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;
2
+ import type * as T from './ConditionRow.types';
3
+ 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 CHANGED
@@ -1,13 +1,13 @@
1
1
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
2
  import React, { useMemo } from 'react';
3
+ import { theme } from '@synerise/ds-core';
3
4
  import Factors from '@synerise/ds-factors';
5
+ import Icon, { CloseS } from '@synerise/ds-icon';
4
6
  import Operators from '@synerise/ds-operators';
5
7
  import Tooltip from '@synerise/ds-tooltip';
6
- import Icon, { CloseS } from '@synerise/ds-icon';
7
- import { theme } from '@synerise/ds-core';
8
8
  import { getPopupContainer } from '@synerise/ds-utils';
9
- import { FACTOR, OPERATOR, PARAMETER } from '../../constants';
10
9
  import * as S from '../../Condition.style';
10
+ import { FACTOR, OPERATOR, PARAMETER } from '../../constants';
11
11
  export var ConditionRow = function ConditionRow(_ref) {
12
12
  var index = _ref.index,
13
13
  conditionId = _ref.conditionId,
@@ -36,7 +36,8 @@ export var ConditionRow = function ConditionRow(_ref) {
36
36
  _ref$readOnly = _ref.readOnly,
37
37
  readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
38
38
  parameterSelectorComponent = _ref.parameterSelectorComponent,
39
- factorParameterSelectorComponent = _ref.factorParameterSelectorComponent;
39
+ factorParameterSelectorComponent = _ref.factorParameterSelectorComponent,
40
+ factorValueExtraProps = _ref.factorValueExtraProps;
40
41
  var conditionFactorErrorText = conditionFactor == null ? void 0 : conditionFactor.errorText;
41
42
  var conditionParameterErrorText = conditionParameter == null ? void 0 : conditionParameter.errorText;
42
43
  var conditionOperatorErrorText = conditionOperator == null ? void 0 : conditionOperator.errorText;
@@ -96,10 +97,10 @@ export var ConditionRow = function ConditionRow(_ref) {
96
97
  first: index === 0,
97
98
  last: readOnly ? Boolean(index + 1 === conditionsNumber) : Boolean(addCondition && index + 1 === conditionsNumber && maxConditionLength !== undefined && conditionsNumber === maxConditionLength),
98
99
  readOnly: readOnly
99
- }), /*#__PURE__*/React.createElement(S.ConditionRowLine, null, /*#__PURE__*/React.createElement(S.ConditionRowDefinition, null, /*#__PURE__*/React.createElement(S.ConditionWrapper, {
100
+ }), /*#__PURE__*/React.createElement(S.ConditionRowLine, null, /*#__PURE__*/React.createElement(S.ConditionRowDefinition, null, renderConditionParameterWrapper && /*#__PURE__*/React.createElement(S.ConditionParameterWrapper, {
100
101
  "data-testid": "condition-parameter-wrapper",
101
102
  withRemoveTrigger: lastConditionWrapper === 'parameter'
102
- }, renderConditionParameterWrapper && /*#__PURE__*/React.createElement(Factors, _extends({
103
+ }, /*#__PURE__*/React.createElement(Factors, _extends({
103
104
  selectedFactorType: "",
104
105
  defaultFactorType: "",
105
106
  value: "",
@@ -124,7 +125,7 @@ export var ConditionRow = function ConditionRow(_ref) {
124
125
  opened: hasPriority && stepId === currentStepId && conditionId === currentConditionId && currentField === PARAMETER,
125
126
  readOnly: readOnly,
126
127
  error: Boolean(conditionParameter == null ? void 0 : conditionParameter.errorText)
127
- })), lastConditionWrapper === 'parameter' && removeConditionTrigger), renderConditionOperatorWrapper && /*#__PURE__*/React.createElement(S.ConditionWrapper, {
128
+ })), lastConditionWrapper === 'parameter' && removeConditionTrigger), renderConditionOperatorWrapper && /*#__PURE__*/React.createElement(S.ConditionOperatorWrapper, {
128
129
  "data-testid": "condition-operator-wrapper",
129
130
  withRemoveTrigger: lastConditionWrapper === 'operator'
130
131
  }, /*#__PURE__*/React.createElement(Operators, _extends({
@@ -142,7 +143,7 @@ export var ConditionRow = function ConditionRow(_ref) {
142
143
  opened: hasPriority && stepId === currentStepId && conditionId === currentConditionId && currentField === OPERATOR,
143
144
  readOnly: readOnly,
144
145
  errorText: conditionOperator == null ? void 0 : conditionOperator.errorText
145
- })), lastConditionWrapper === 'operator' && removeConditionTrigger), renderConditionFactorWrapper && /*#__PURE__*/React.createElement(S.ConditionWrapper, {
146
+ })), lastConditionWrapper === 'operator' && removeConditionTrigger), renderConditionFactorWrapper && /*#__PURE__*/React.createElement(S.ConditionFactorWrapper, {
146
147
  "data-testid": "condition-factor-wrapper",
147
148
  withRemoveTrigger: lastConditionWrapper === 'factor'
148
149
  }, (conditionFactor == null ? void 0 : conditionFactor.withCustomFactor) || /*#__PURE__*/React.createElement(Factors, _extends({
@@ -156,7 +157,8 @@ export var ConditionRow = function ConditionRow(_ref) {
156
157
  contextParameter: {
157
158
  component: factorParameterSelectorComponent
158
159
  }
159
- }
160
+ },
161
+ factorValueExtraProps: factorValueExtraProps
160
162
  }, conditionFactorProps, {
161
163
  inputProps: inputProps,
162
164
  getPopupContainerOverride: getPopupContainerOverride || getPopupContainer,
package/dist/ConditionStep/ConditionRow/ConditionRow.types.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import type { ReactNode, ReactText } from 'react';
2
- import type { FactorsProps, FactorValueComponentProps } from '@synerise/ds-factors';
2
+ import type { FactorValueComponentProps, FactorsProps } from '@synerise/ds-factors';
3
3
  import type { OperatorsProps } from '@synerise/ds-operators';
4
4
  import type { ConditionProps, ConditionTexts } from '../../Condition.types';
5
- export type ConditionRowProps = Pick<ConditionProps, 'removeCondition' | 'getPopupContainerOverride' | 'factorParameterSelectorComponent' | 'parameterSelectorComponent'> & {
5
+ export type ConditionRowProps = Pick<ConditionProps, 'removeCondition' | 'getPopupContainerOverride' | 'factorParameterSelectorComponent' | 'parameterSelectorComponent' | 'factorValueExtraProps'> & {
6
6
  index: number;
7
7
  error?: boolean;
8
8
  hasPriority?: boolean;
package/dist/ConditionStep/ConditionStep.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
- import * as T from './ConditionStep.types';
3
- 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;
2
+ import type * as T from './ConditionStep.types';
3
+ 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 CHANGED
@@ -1,17 +1,17 @@
1
1
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
2
  import React, { useCallback, useMemo } from 'react';
3
- import { useSortable, CSS } from '@synerise/ds-sortable';
4
- import Subject from '@synerise/ds-subject';
5
3
  import ContextSelector from '@synerise/ds-context-selector';
6
- import { DragHandleM } from '@synerise/ds-icon';
7
4
  import Factors from '@synerise/ds-factors';
5
+ import { DragHandleM } from '@synerise/ds-icon';
6
+ import { CSS, useSortable } from '@synerise/ds-sortable';
7
+ import Subject from '@synerise/ds-subject';
8
8
  import * as S from '../Condition.style';
9
- import { StepHeader } from './StepHeader';
9
+ import { ACTION_ATTRIBUTE, SUBJECT } from '../constants';
10
+ import { useTranslations } from '../hooks/useTranslations';
10
11
  import { AddCondition } from './AddCondition';
11
12
  import { ConditionRow } from './ConditionRow';
12
- import { ACTION_ATTRIBUTE, SUBJECT } from '../constants';
13
13
  import { EmptyCondition } from './EmptyCondition';
14
- import { useTranslations } from '../hooks/useTranslations';
14
+ import { StepHeader } from './StepHeader';
15
15
  export var ConditionStep = function ConditionStep(_ref) {
16
16
  var _step$actionAttribute2, _step$subject3, _step$context4, _step$actionAttribute4, _step$context6, _step$subject4, _step$context7, _step$actionAttribute5, _step$actionAttribute6;
17
17
  var step = _ref.step,
@@ -56,7 +56,8 @@ export var ConditionStep = function ConditionStep(_ref) {
56
56
  parameterSelectorComponent = _ref.parameterSelectorComponent,
57
57
  factorParameterSelectorComponent = _ref.factorParameterSelectorComponent,
58
58
  _ref$showEmptyConditi = _ref.showEmptyConditionPlaceholder,
59
- showEmptyConditionPlaceholder = _ref$showEmptyConditi === void 0 ? false : _ref$showEmptyConditi;
59
+ showEmptyConditionPlaceholder = _ref$showEmptyConditi === void 0 ? false : _ref$showEmptyConditi,
60
+ factorValueExtraProps = _ref.factorValueExtraProps;
60
61
  var _useSortable = useSortable({
61
62
  id: step.id
62
63
  }),
@@ -168,9 +169,10 @@ export var ConditionStep = function ConditionStep(_ref) {
168
169
  onDeactivate: onDeactivate,
169
170
  readOnly: readOnly,
170
171
  parameterSelectorComponent: parameterSelectorComponent,
171
- factorParameterSelectorComponent: factorParameterSelectorComponent
172
+ factorParameterSelectorComponent: factorParameterSelectorComponent,
173
+ factorValueExtraProps: factorValueExtraProps
172
174
  });
173
- }, [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]);
175
+ }, [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]);
174
176
  var hasSelectedSubjectOrContext = useMemo(function () {
175
177
  var _step$subject2, _step$context3;
176
178
  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 CHANGED
@@ -1,10 +1,10 @@
1
1
  import type { ReactText } from 'react';
2
- import type { FactorType, FactorValueType } from '@synerise/ds-factors';
3
2
  import type { ContextGroup, ContextItem } from '@synerise/ds-context-selector';
4
- import type { SubjectItem } from '@synerise/ds-subject';
3
+ import type { FactorType, FactorValueType } from '@synerise/ds-factors';
5
4
  import type { OperatorsGroup, OperatorsItem } from '@synerise/ds-operators';
6
- import type { ConditionStep, ConditionProps } from '../Condition.types';
7
- export type ConditionStepProps = Pick<ConditionProps, 'singleStepCondition' | 'showActionAttribute' | 'showEmptyConditionPlaceholder' | 'showSuffix' | 'readOnly' | 'inputProps' | 'hoverDisabled' | 'getPopupContainerOverride' | 'minConditionsLength' | 'addCondition' | 'removeCondition' | 'texts' | 'maxConditionsLength' | 'contextSelectorComponent' | 'factorParameterSelectorComponent' | 'parameterSelectorComponent' | 'actionAttributeParameterSelectorComponent'> & {
5
+ import type { SubjectItem } from '@synerise/ds-subject';
6
+ import type { ConditionProps, ConditionStep } from '../Condition.types';
7
+ export type ConditionStepProps = Pick<ConditionProps, 'singleStepCondition' | 'showActionAttribute' | 'showEmptyConditionPlaceholder' | 'showSuffix' | 'readOnly' | 'inputProps' | 'hoverDisabled' | 'getPopupContainerOverride' | 'minConditionsLength' | 'addCondition' | 'removeCondition' | 'texts' | 'maxConditionsLength' | 'contextSelectorComponent' | 'factorParameterSelectorComponent' | 'parameterSelectorComponent' | 'actionAttributeParameterSelectorComponent' | 'factorValueExtraProps'> & {
8
8
  index: number;
9
9
  isLast?: boolean;
10
10
  isDragged?: boolean;
package/dist/ConditionStep/EmptyCondition/EmptyCondition.d.ts CHANGED
@@ -3,5 +3,5 @@ type EmptyConditionProps = {
3
3
  icon?: JSX.Element;
4
4
  label: string;
5
5
  };
6
- export declare const EmptyCondition: ({ icon, label }: EmptyConditionProps) => React.JSX.Element;
6
+ export declare const EmptyCondition: ({ icon, label, }: EmptyConditionProps) => React.JSX.Element;
7
7
  export {};
package/dist/ConditionStep/EmptyCondition/EmptyCondition.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
- import Icon, { ClickM } from '@synerise/ds-icon';
3
2
  import { theme } from '@synerise/ds-core';
3
+ import Icon, { ClickM } from '@synerise/ds-icon';
4
4
  import * as S from './emptyCondition.styles';
5
5
  export var EmptyCondition = function EmptyCondition(_ref) {
6
6
  var _ref$icon = _ref.icon,
package/dist/ConditionStep/EmptyCondition/emptyCondition.styles.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- export declare const LabelWrapper: import("styled-components").StyledComponent<({ size, className, children, ellipsis }: {
2
+ export declare const LabelWrapper: import("styled-components").StyledComponent<({ size, className, children, ellipsis, }: {
3
3
  size?: import("@synerise/ds-typography").TextSize | undefined;
4
4
  ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps | undefined;
5
5
  children?: import("react").ReactNode;
package/dist/ConditionStep/StepHeader/StepHeader.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
- import * as T from './StepHeader.types';
2
+ import type * as T from './StepHeader.types';
3
3
  export declare const StepHeader: ({ stepName, stepId, texts, updateStepName, duplicateStep, removeStep, index, draggableEnabled, dragHandleProps, readOnly, }: T.StepHeaderProps) => React.JSX.Element;
package/dist/ConditionStep/StepHeader/StepHeader.js CHANGED
@@ -1,9 +1,9 @@
1
1
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
- import React, { useRef, useState, useEffect, useCallback } from 'react';
3
2
  import { debounce } from 'lodash';
4
- import InlineEdit from '@synerise/ds-inline-edit';
3
+ import React, { useCallback, useEffect, useRef, useState } from 'react';
5
4
  import Cruds from '@synerise/ds-cruds';
6
5
  import { DragHandleM } from '@synerise/ds-icon';
6
+ import InlineEdit from '@synerise/ds-inline-edit';
7
7
  import { NOOP } from '@synerise/ds-utils';
8
8
  import * as S from '../../Condition.style';
9
9
  import { StepName } from '../StepName/StepName';
package/dist/ConditionStep/StepHeader/StepHeader.types.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import React, { HTMLAttributes } from 'react';
2
- import { ConditionProps, ConditionTexts } from '../../Condition.types';
1
+ import { type HTMLAttributes, type ReactText } from 'react';
2
+ import { type ConditionProps, type ConditionTexts } from '../../Condition.types';
3
3
  export type StepHeaderProps = {
4
4
  index: number;
5
5
  texts: ConditionTexts;
6
6
  stepName: string;
7
- stepId: React.ReactText;
7
+ stepId: ReactText;
8
8
  removeStep: ConditionProps['removeStep'];
9
9
  duplicateStep: ConditionProps['duplicateStep'];
10
10
  updateStepName: ConditionProps['onUpdateStepName'];
package/dist/ConditionStep/StepName/StepName.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import React, { ReactNode } from 'react';
2
- import { ConditionTexts } from '../../Condition.types';
1
+ import React, { type ReactNode } from 'react';
2
+ import { type ConditionTexts } from '../../Condition.types';
3
3
  type StepNameProps = {
4
4
  texts: ConditionTexts;
5
5
  index: number;
package/dist/hooks/useTranslations.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { ConditionTexts } from '../Condition.types';
1
+ import { type ConditionTexts } from '../Condition.types';
2
2
  export declare const useTranslations: (defaultTexts?: Partial<ConditionTexts>) => ConditionTexts;
package/dist/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export { default } from './Condition';
2
2
  export type { ConditionStepCrudActions } from './ConditionStep/ConditionStep.types';
3
- export type { ConditionProps, ConditionStep, ConditionTexts, StepConditions } from './Condition.types';
3
+ export type { ConditionProps, ConditionStep, ConditionTexts, StepConditions, } from './Condition.types';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-condition",
3
- "version": "1.3.1",
3
+ "version": "1.4.0",
4
4
  "description": "Condition UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -34,19 +34,19 @@
34
34
  ],
35
35
  "types": "dist/index.d.ts",
36
36
  "dependencies": {
37
- "@synerise/ds-button": "^1.4.1",
38
- "@synerise/ds-context-selector": "^1.1.15",
39
- "@synerise/ds-cruds": "^1.0.12",
40
- "@synerise/ds-factors": "^1.3.1",
41
- "@synerise/ds-icon": "^1.5.3",
42
- "@synerise/ds-inline-edit": "^1.0.16",
43
- "@synerise/ds-input": "^1.3.1",
44
- "@synerise/ds-operators": "^1.0.15",
45
- "@synerise/ds-sortable": "^1.3.0",
46
- "@synerise/ds-subject": "^1.0.16",
47
- "@synerise/ds-tooltip": "^1.1.11",
48
- "@synerise/ds-typography": "^1.0.12",
49
- "@synerise/ds-utils": "^1.3.0",
37
+ "@synerise/ds-button": "^1.4.2",
38
+ "@synerise/ds-context-selector": "^1.1.17",
39
+ "@synerise/ds-cruds": "^1.0.13",
40
+ "@synerise/ds-factors": "^1.4.0",
41
+ "@synerise/ds-icon": "^1.5.4",
42
+ "@synerise/ds-inline-edit": "^1.0.17",
43
+ "@synerise/ds-input": "^1.3.2",
44
+ "@synerise/ds-operators": "^1.0.16",
45
+ "@synerise/ds-sortable": "^1.3.2",
46
+ "@synerise/ds-subject": "^1.0.17",
47
+ "@synerise/ds-tooltip": "^1.1.12",
48
+ "@synerise/ds-typography": "^1.0.13",
49
+ "@synerise/ds-utils": "^1.3.1",
50
50
  "lodash": "^4.17.19"
51
51
  },
52
52
  "peerDependencies": {
@@ -55,5 +55,5 @@
55
55
  "react-intl": ">=3.12.0 <= 6.8",
56
56
  "styled-components": "^5.3.3"
57
57
  },
58
- "gitHead": "11fe1d29b2ac23e70c3d5e6ce8ae20201a619a34"
58
+ "gitHead": "2161bdb04f3db0f79b7d0465ce6b41121f1543ef"
59
59
  }