@synerise/ds-filter 1.2.41 → 1.2.42

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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.2.42](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@1.2.41...@synerise/ds-filter@1.2.42) (2026-03-24)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-filter
9
+
6
10
  ## [1.2.41](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@1.2.40...@synerise/ds-filter@1.2.41) (2026-03-20)
7
11
 
8
12
  **Note:** Version bump only for package @synerise/ds-filter
package/dist/Filter.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
2
- import { type FilterProps } from './Filter.types';
1
+ import { default as React } from 'react';
2
+ import { FilterProps } from './Filter.types';
3
3
  declare const Filter: ({ maxConditionsLimit, expressions, matching, onChangeOrder, onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepFooter, renderStepContent, renderStepHeaderRightSide, addFilterComponent, texts, logicOptions, renderHeaderRightSide, visibilityConfig, readOnly, singleStepCondition, getMoveByLabel, }: FilterProps) => React.JSX.Element;
4
4
  export default Filter;
package/dist/Filter.js CHANGED
@@ -1,331 +1,321 @@
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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
3
- import { useIntl } from 'react-intl';
4
- import { Matching, Placeholder } from '@synerise/ds-logic';
5
- import Sortable from '@synerise/ds-sortable';
6
- import { NOOP, usePrevious } from '@synerise/ds-utils';
7
- import * as S from './Filter.styles';
8
- import { DraggableExpressionItem, ExpressionItem } from './components/ExpressionItem';
9
- import { isStepType } from './utils';
10
- var TRANSITION_DURATION = 0.5;
11
- var TRANSITION_DURATION_MAX = 1.5;
12
- var TOP_TRANSITION_ZINDEX = '1003';
13
- var BOTTOM_TRANSITION_ZINDEX = '1002';
14
- var rearrangeItems = function rearrangeItems(sourceArray, oldIndex, newIndex) {
1
+ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
+ import { useState, useRef, useEffect, useMemo, useCallback } from "react";
3
+ import { useIntl } from "react-intl";
4
+ import { Matching, Placeholder } from "@synerise/ds-logic";
5
+ import Sortable from "@synerise/ds-sortable";
6
+ import { usePrevious, NOOP } from "@synerise/ds-utils";
7
+ import { placeholderCss, FilterWrapper, FilterHeader, FilterTitle, MatchingAndConditionsWrapper, MatchingWrapper, ConditionsLimit, ConditionsLimitResults, FilterHeaderRightSide, AddButtonWrapper } from "./Filter.styles.js";
8
+ import { DraggableExpressionItem } from "./components/ExpressionItem/DraggableExpressionItem.js";
9
+ import { ExpressionItem } from "./components/ExpressionItem/ExpressionItem.js";
10
+ import { isStepType } from "./utils.js";
11
+ const TRANSITION_DURATION = 0.5;
12
+ const TRANSITION_DURATION_MAX = 1.5;
13
+ const TOP_TRANSITION_ZINDEX = "1003";
14
+ const BOTTOM_TRANSITION_ZINDEX = "1002";
15
+ const rearrangeItems = (sourceArray, oldIndex, newIndex) => {
15
16
  sourceArray.splice(newIndex, 0, sourceArray.splice(oldIndex, 1)[0]);
16
- return [].concat(sourceArray);
17
+ return [...sourceArray];
17
18
  };
18
- var Filter = function Filter(_ref) {
19
- var _texts$overwritten;
20
- var maxConditionsLimit = _ref.maxConditionsLimit,
21
- expressions = _ref.expressions,
22
- matching = _ref.matching,
23
- onChangeOrder = _ref.onChangeOrder,
24
- onChangeLogic = _ref.onChangeLogic,
25
- onChangeStepMatching = _ref.onChangeStepMatching,
26
- onChangeStepName = _ref.onChangeStepName,
27
- onDeleteStep = _ref.onDeleteStep,
28
- onDuplicateStep = _ref.onDuplicateStep,
29
- renderStepFooter = _ref.renderStepFooter,
30
- renderStepContent = _ref.renderStepContent,
31
- renderStepHeaderRightSide = _ref.renderStepHeaderRightSide,
32
- addFilterComponent = _ref.addFilterComponent,
33
- texts = _ref.texts,
34
- logicOptions = _ref.logicOptions,
35
- renderHeaderRightSide = _ref.renderHeaderRightSide,
36
- _ref$visibilityConfig = _ref.visibilityConfig,
37
- visibilityConfig = _ref$visibilityConfig === void 0 ? {
38
- isStepCardHeaderVisible: true
39
- } : _ref$visibilityConfig,
40
- _ref$readOnly = _ref.readOnly,
41
- readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
42
- _ref$singleStepCondit = _ref.singleStepCondition,
43
- singleStepCondition = _ref$singleStepCondit === void 0 ? false : _ref$singleStepCondit,
44
- getMoveByLabel = _ref.getMoveByLabel;
45
- var previousExpressions = usePrevious(expressions);
46
- var _useState = useState(null),
47
- activeExpressionId = _useState[0],
48
- setActiveExpressionId = _useState[1];
49
- var expressionRefs = useRef({});
50
- var movedExpressionId = useRef(null);
51
- useEffect(function () {
52
- if (movedExpressionId.current && previousExpressions != null && previousExpressions.length) {
53
- var oldIndex = previousExpressions == null ? void 0 : previousExpressions.findIndex(function (expression) {
19
+ const Filter = ({
20
+ maxConditionsLimit,
21
+ expressions,
22
+ matching,
23
+ onChangeOrder,
24
+ onChangeLogic,
25
+ onChangeStepMatching,
26
+ onChangeStepName,
27
+ onDeleteStep,
28
+ onDuplicateStep,
29
+ renderStepFooter,
30
+ renderStepContent,
31
+ renderStepHeaderRightSide,
32
+ addFilterComponent,
33
+ texts,
34
+ logicOptions,
35
+ renderHeaderRightSide,
36
+ visibilityConfig = {
37
+ isStepCardHeaderVisible: true
38
+ },
39
+ readOnly = false,
40
+ singleStepCondition = false,
41
+ getMoveByLabel
42
+ }) => {
43
+ const previousExpressions = usePrevious(expressions);
44
+ const [activeExpressionId, setActiveExpressionId] = useState(null);
45
+ const expressionRefs = useRef({});
46
+ const movedExpressionId = useRef(null);
47
+ useEffect(() => {
48
+ if (movedExpressionId.current && previousExpressions?.length) {
49
+ const oldIndex = previousExpressions?.findIndex((expression) => {
54
50
  return expression.id === movedExpressionId.current;
55
51
  });
56
- var newIndex = expressions == null ? void 0 : expressions.findIndex(function (expression) {
52
+ const newIndex = expressions?.findIndex((expression) => {
57
53
  return expression.id === movedExpressionId.current;
58
54
  });
59
- if (oldIndex !== undefined && oldIndex !== newIndex) {
60
- var sign = oldIndex < newIndex ? 1 : -1;
61
- var low = Math.min(oldIndex, newIndex);
62
- var high = Math.max(oldIndex, newIndex);
63
- var movedExpressionHeight = sign * expressionRefs.current[movedExpressionId.current].getBoundingClientRect().height;
64
- var expressionOffset = 0;
65
- var movedCardTransformDuration = Math.min((high - low) * TRANSITION_DURATION, TRANSITION_DURATION_MAX);
66
- expressions.forEach(function (expression, index) {
55
+ if (oldIndex !== void 0 && oldIndex !== newIndex) {
56
+ const sign = oldIndex < newIndex ? 1 : -1;
57
+ const low = Math.min(oldIndex, newIndex);
58
+ const high = Math.max(oldIndex, newIndex);
59
+ const movedExpressionHeight = sign * expressionRefs.current[movedExpressionId.current].getBoundingClientRect().height;
60
+ let expressionOffset = 0;
61
+ const movedCardTransformDuration = Math.min((high - low) * TRANSITION_DURATION, TRANSITION_DURATION_MAX);
62
+ expressions.forEach((expression, index) => {
67
63
  if (expression.id !== movedExpressionId.current && index >= low && index <= high) {
68
64
  expressionOffset += expressionRefs.current[expression.id].getBoundingClientRect().height;
69
- expressionRefs.current[expression.id].style.transition = '';
65
+ expressionRefs.current[expression.id].style.transition = "";
70
66
  expressionRefs.current[expression.id].style.zIndex = BOTTOM_TRANSITION_ZINDEX;
71
- expressionRefs.current[expression.id].style.transform = "translateY(" + movedExpressionHeight + "px)";
67
+ expressionRefs.current[expression.id].style.transform = `translateY(${movedExpressionHeight}px)`;
72
68
  }
73
69
  });
74
- expressionRefs.current[movedExpressionId.current].style.transition = '';
70
+ expressionRefs.current[movedExpressionId.current].style.transition = "";
75
71
  expressionRefs.current[movedExpressionId.current].style.zIndex = TOP_TRANSITION_ZINDEX;
76
- expressionRefs.current[movedExpressionId.current].style.transform = "translateY(" + -sign * expressionOffset + "px)";
77
- requestAnimationFrame(function () {
78
- expressions.forEach(function (expression) {
79
- expressionRefs.current[expression.id].style.transition = "transform " + (expression.id === movedExpressionId.current ? movedCardTransformDuration : TRANSITION_DURATION) + "s";
80
- expressionRefs.current[expression.id].style.transform = '';
72
+ expressionRefs.current[movedExpressionId.current].style.transform = `translateY(${-sign * expressionOffset}px)`;
73
+ requestAnimationFrame(() => {
74
+ expressions.forEach((expression) => {
75
+ expressionRefs.current[expression.id].style.transition = `transform ${expression.id === movedExpressionId.current ? movedCardTransformDuration : TRANSITION_DURATION}s`;
76
+ expressionRefs.current[expression.id].style.transform = "";
81
77
  });
82
78
  movedExpressionId.current = null;
83
79
  });
84
80
  }
85
81
  }
86
82
  });
87
- useEffect(function () {
83
+ useEffect(() => {
88
84
  if (previousExpressions && expressions.length > previousExpressions.length) {
89
85
  setActiveExpressionId(expressions[expressions.length - 1].id);
90
86
  }
91
87
  }, [expressions, previousExpressions]);
92
- var _useIntl = useIntl(),
93
- formatMessage = _useIntl.formatMessage;
94
- var text = useMemo(function () {
95
- return _extends({
96
- addFilter: formatMessage({
97
- id: 'DS.FILTER.ADD-FILTER',
98
- defaultMessage: 'Add filter'
88
+ const {
89
+ formatMessage
90
+ } = useIntl();
91
+ const text = useMemo(() => ({
92
+ addFilter: formatMessage({
93
+ id: "DS.FILTER.ADD-FILTER",
94
+ defaultMessage: "Add filter"
95
+ }),
96
+ dropMeHere: formatMessage({
97
+ id: "DS.FILTER.DROP-ME-HERE",
98
+ defaultMessage: "Drop me here"
99
+ }),
100
+ conditionsLimit: formatMessage({
101
+ id: "DS.FILTER.CONDITIONS-LIMIT",
102
+ defaultMessage: ""
103
+ }),
104
+ ...texts,
105
+ matching: {
106
+ matching: formatMessage({
107
+ id: "DS.MATCHING.MATCHING",
108
+ defaultMessage: "Matching"
99
109
  }),
100
- dropMeHere: formatMessage({
101
- id: 'DS.FILTER.DROP-ME-HERE',
102
- defaultMessage: 'Drop me here'
110
+ notMatching: formatMessage({
111
+ id: "DS.MATCHING.NOT-MATCHING",
112
+ defaultMessage: "Not matching"
103
113
  }),
104
- conditionsLimit: formatMessage({
105
- id: 'DS.FILTER.CONDITIONS-LIMIT',
106
- defaultMessage: ''
107
- })
108
- }, texts, {
109
- matching: _extends({
110
- matching: formatMessage({
111
- id: 'DS.MATCHING.MATCHING',
112
- defaultMessage: 'Matching'
113
- }),
114
- notMatching: formatMessage({
115
- id: 'DS.MATCHING.NOT-MATCHING',
116
- defaultMessage: 'Not matching'
117
- })
118
- }, texts == null ? void 0 : texts.matching),
119
- step: _extends({
120
- matching: formatMessage({
121
- id: 'DS.MATCHING.MATCHING',
122
- defaultMessage: 'Matching'
123
- }),
124
- notMatching: formatMessage({
125
- id: 'DS.MATCHING.NOT-MATCHING',
126
- defaultMessage: 'Not matching'
127
- }),
128
- have: formatMessage({
129
- id: 'DS.MATCHING.HAVE',
130
- defaultMessage: 'Have'
131
- }),
132
- performed: formatMessage({
133
- id: 'DS.MATCHING.PERFORMED',
134
- defaultMessage: 'Performed'
135
- }),
136
- notHave: formatMessage({
137
- id: 'DS.MATCHING.NOT-HAVE',
138
- defaultMessage: 'Does not have'
139
- }),
140
- notPerformed: formatMessage({
141
- id: 'DS.MATCHING.NOT-PERFORMED',
142
- defaultMessage: 'Have not performed'
143
- }),
144
- attribute: formatMessage({
145
- id: 'DS.MATCHING.EXPRESSION-TYPE.ATTRIBUTE',
146
- defaultMessage: 'attribute'
147
- }),
148
- event: formatMessage({
149
- id: 'DS.MATCHING.EXPRESSION-TYPE.EVENT',
150
- defaultMessage: 'event'
151
- }),
152
- notAttribute: formatMessage({
153
- id: 'DS.MATCHING.EXPRESSION-TYPE.NOT_ATTRIBUTE',
154
- defaultMessage: 'attribute'
155
- }),
156
- notEvent: formatMessage({
157
- id: 'DS.MATCHING.EXPRESSION-TYPE.NOT_EVENT',
158
- defaultMessage: 'event'
159
- }),
160
- namePlaceholder: formatMessage({
161
- id: 'DS.STEP-CARD.NAME-PLACEHOLDER'
162
- }),
163
- moveTooltip: formatMessage({
164
- id: 'DS.STEP-CARD.MOVE',
165
- defaultMessage: 'Move'
166
- }),
167
- moveUpTooltip: formatMessage({
168
- id: 'DS.STEP-CARD.MOVE-UP',
169
- defaultMessage: 'Move up'
170
- }),
171
- moveDownTooltip: formatMessage({
172
- id: 'DS.STEP-CARD.MOVE-DOWN',
173
- defaultMessage: 'Move down'
174
- }),
175
- deleteTooltip: formatMessage({
176
- id: 'DS.STEP-CARD.DELETE',
177
- defaultMessage: 'Delete'
178
- }),
179
- duplicateTooltip: formatMessage({
180
- id: 'DS.STEP-CARD.DUPLICATE',
181
- defaultMessage: 'Duplicate'
182
- })
183
- }, texts == null ? void 0 : texts.step),
184
- placeholder: _extends({
185
- chooseCondition: formatMessage({
186
- id: 'DS.PLACEHOLDER.CHOOSE-CONDITION'
187
- })
188
- }, texts == null ? void 0 : texts.placeholder)
189
- });
190
- }, [formatMessage, texts]);
191
- var getContextTypeTexts = useCallback(
192
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
193
- function (expression) {
194
- var contextType = expression.expressionType;
195
- return {
196
- matching: contextType === 'attribute' ? text.step.have : text.step.performed,
197
- notMatching: contextType === 'attribute' ? text.step.notHave : text.step.notPerformed,
198
- conditionType: contextType === 'attribute' ? text.step.attribute : text.step.event,
199
- notConditionType: contextType === 'attribute' ? text.step.notAttribute : text.step.notEvent
200
- };
201
- }, [text]);
202
- var isActive = useCallback(function (expression) {
114
+ ...texts?.matching
115
+ },
116
+ step: {
117
+ matching: formatMessage({
118
+ id: "DS.MATCHING.MATCHING",
119
+ defaultMessage: "Matching"
120
+ }),
121
+ notMatching: formatMessage({
122
+ id: "DS.MATCHING.NOT-MATCHING",
123
+ defaultMessage: "Not matching"
124
+ }),
125
+ have: formatMessage({
126
+ id: "DS.MATCHING.HAVE",
127
+ defaultMessage: "Have"
128
+ }),
129
+ performed: formatMessage({
130
+ id: "DS.MATCHING.PERFORMED",
131
+ defaultMessage: "Performed"
132
+ }),
133
+ notHave: formatMessage({
134
+ id: "DS.MATCHING.NOT-HAVE",
135
+ defaultMessage: "Does not have"
136
+ }),
137
+ notPerformed: formatMessage({
138
+ id: "DS.MATCHING.NOT-PERFORMED",
139
+ defaultMessage: "Have not performed"
140
+ }),
141
+ attribute: formatMessage({
142
+ id: "DS.MATCHING.EXPRESSION-TYPE.ATTRIBUTE",
143
+ defaultMessage: "attribute"
144
+ }),
145
+ event: formatMessage({
146
+ id: "DS.MATCHING.EXPRESSION-TYPE.EVENT",
147
+ defaultMessage: "event"
148
+ }),
149
+ notAttribute: formatMessage({
150
+ id: "DS.MATCHING.EXPRESSION-TYPE.NOT_ATTRIBUTE",
151
+ defaultMessage: "attribute"
152
+ }),
153
+ notEvent: formatMessage({
154
+ id: "DS.MATCHING.EXPRESSION-TYPE.NOT_EVENT",
155
+ defaultMessage: "event"
156
+ }),
157
+ namePlaceholder: formatMessage({
158
+ id: "DS.STEP-CARD.NAME-PLACEHOLDER"
159
+ }),
160
+ moveTooltip: formatMessage({
161
+ id: "DS.STEP-CARD.MOVE",
162
+ defaultMessage: "Move"
163
+ }),
164
+ moveUpTooltip: formatMessage({
165
+ id: "DS.STEP-CARD.MOVE-UP",
166
+ defaultMessage: "Move up"
167
+ }),
168
+ moveDownTooltip: formatMessage({
169
+ id: "DS.STEP-CARD.MOVE-DOWN",
170
+ defaultMessage: "Move down"
171
+ }),
172
+ deleteTooltip: formatMessage({
173
+ id: "DS.STEP-CARD.DELETE",
174
+ defaultMessage: "Delete"
175
+ }),
176
+ duplicateTooltip: formatMessage({
177
+ id: "DS.STEP-CARD.DUPLICATE",
178
+ defaultMessage: "Duplicate"
179
+ }),
180
+ ...texts?.step
181
+ },
182
+ placeholder: {
183
+ chooseCondition: formatMessage({
184
+ id: "DS.PLACEHOLDER.CHOOSE-CONDITION"
185
+ }),
186
+ ...texts?.placeholder
187
+ }
188
+ }), [formatMessage, texts]);
189
+ const getContextTypeTexts = useCallback(
190
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
191
+ (expression) => {
192
+ const contextType = expression.expressionType;
193
+ return {
194
+ matching: contextType === "attribute" ? text.step.have : text.step.performed,
195
+ notMatching: contextType === "attribute" ? text.step.notHave : text.step.notPerformed,
196
+ conditionType: contextType === "attribute" ? text.step.attribute : text.step.event,
197
+ notConditionType: contextType === "attribute" ? text.step.notAttribute : text.step.notEvent
198
+ };
199
+ },
200
+ [text]
201
+ );
202
+ const isActive = useCallback((expression) => {
203
203
  return expression.id === activeExpressionId;
204
204
  }, [activeExpressionId]);
205
- var isLimitExceeded = useMemo(function () {
206
- return maxConditionsLimit ? expressions.length >= maxConditionsLimit : false;
207
- }, [expressions, maxConditionsLimit]);
208
- var stepExpressionCount = useMemo(function () {
209
- return expressions.filter(function (expression) {
210
- return expression.type === 'STEP';
211
- }).length;
205
+ const isLimitExceeded = useMemo(() => maxConditionsLimit ? expressions.length >= maxConditionsLimit : false, [expressions, maxConditionsLimit]);
206
+ const stepExpressionCount = useMemo(() => {
207
+ return expressions.filter((expression) => expression.type === "STEP").length;
212
208
  }, [expressions]);
213
- var handleTransitionEnd = useCallback(function (event) {
209
+ const handleTransitionEnd = useCallback((event) => {
214
210
  if (event.currentTarget && event.currentTarget instanceof HTMLElement) {
215
- event.currentTarget.style.removeProperty('z-index');
211
+ event.currentTarget.style.removeProperty("z-index");
216
212
  }
217
213
  }, []);
218
- var handleMove = useCallback(function (index, offset) {
219
- var newIndex = index + offset;
220
- var newOrder = rearrangeItems([].concat(expressions), index, newIndex);
214
+ const handleMove = useCallback((index, offset) => {
215
+ const newIndex = index + offset;
216
+ const newOrder = rearrangeItems([...expressions], index, newIndex);
221
217
  movedExpressionId.current = newOrder[newIndex].id;
222
- onChangeOrder == null || onChangeOrder(newOrder);
218
+ onChangeOrder?.(newOrder);
223
219
  }, [expressions, onChangeOrder]);
224
- var isDraggable = Boolean(onChangeOrder && expressions.length > 1);
225
- var getStepProps = useCallback(function (expression, index) {
226
- var contextTypeTexts = getContextTypeTexts(expression);
227
- var reorderProps = {
220
+ const isDraggable = Boolean(onChangeOrder && expressions.length > 1);
221
+ const getStepProps = useCallback((expression, index) => {
222
+ const contextTypeTexts = getContextTypeTexts(expression);
223
+ const reorderProps = {
228
224
  expressionIndex: index,
229
225
  expressionMoved: movedExpressionId.current === expression.id,
230
226
  expressionCount: stepExpressionCount,
231
227
  onMove: handleMove
232
228
  };
233
- return _extends({}, reorderProps, {
234
- onChangeMatching: onChangeStepMatching ? function (value) {
235
- return onChangeStepMatching(expression.id, value);
236
- } : undefined,
237
- onChangeName: onChangeStepName ? function (value) {
238
- return onChangeStepName(expression.id, value);
239
- } : undefined,
240
- onDelete: onDeleteStep ? function () {
241
- return onDeleteStep(expression.id);
242
- } : undefined,
243
- onDuplicate: onDuplicateStep && !isLimitExceeded ? function () {
244
- return onDuplicateStep(expression.id);
245
- } : undefined,
229
+ return {
230
+ ...reorderProps,
231
+ onChangeMatching: onChangeStepMatching ? (value) => onChangeStepMatching(expression.id, value) : void 0,
232
+ onChangeName: onChangeStepName ? (value) => onChangeStepName(expression.id, value) : void 0,
233
+ onDelete: onDeleteStep ? () => onDeleteStep(expression.id) : void 0,
234
+ onDuplicate: onDuplicateStep && !isLimitExceeded ? () => onDuplicateStep(expression.id) : void 0,
246
235
  footer: renderStepFooter && renderStepFooter(expression),
247
236
  children: renderStepContent && renderStepContent(expression, !!activeExpressionId && !isActive(expression)),
248
237
  isHeaderVisible: visibilityConfig.isStepCardHeaderVisible,
249
- renderHeaderRightSide: renderStepHeaderRightSide ? function (itemIndex, options) {
250
- return renderStepHeaderRightSide(expression, itemIndex, options);
251
- } : undefined,
252
- isDraggable: isDraggable,
238
+ renderHeaderRightSide: renderStepHeaderRightSide ? (itemIndex, options) => renderStepHeaderRightSide(expression, itemIndex, options) : void 0,
239
+ isDraggable,
253
240
  singleStepCondition: Boolean(singleStepCondition),
254
241
  additionalFields: expression.data.additionalFields,
255
- getMoveByLabel: getMoveByLabel,
242
+ getMoveByLabel,
256
243
  dropLabel: text.dropMeHere,
257
- texts: _extends({}, text.step, contextTypeTexts)
258
- });
244
+ texts: {
245
+ ...text.step,
246
+ ...contextTypeTexts
247
+ }
248
+ };
259
249
  }, [getContextTypeTexts, stepExpressionCount, handleMove, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, isLimitExceeded, renderStepFooter, renderStepContent, activeExpressionId, isActive, visibilityConfig.isStepCardHeaderVisible, renderStepHeaderRightSide, isDraggable, singleStepCondition, getMoveByLabel, text.dropMeHere, text.step]);
260
- var getLogicProps = useCallback(function (expression) {
250
+ const getLogicProps = useCallback((expression) => {
261
251
  return {
262
- value: '',
263
- onChange: onChangeLogic ? function (value) {
264
- return onChangeLogic(expression.id, value);
265
- } : NOOP,
252
+ value: "",
253
+ onChange: onChangeLogic ? (value) => onChangeLogic(expression.id, value) : NOOP,
266
254
  options: logicOptions
267
255
  };
268
256
  }, [onChangeLogic, logicOptions]);
269
- var expressionData = useMemo(function () {
270
- var expressionsOrder = expressions.map(function (expression) {
271
- return expression.id;
272
- });
273
- return expressions.map(function (expression, index) {
274
- var logicProps = isStepType(expression) && expression.logic ? getLogicProps(expression.logic) : {
275
- value: '',
257
+ const expressionData = useMemo(() => {
258
+ const expressionsOrder = expressions.map((expression) => expression.id);
259
+ return expressions.map((expression, index) => {
260
+ const logicProps = isStepType(expression) && expression.logic ? getLogicProps(expression.logic) : {
261
+ value: "",
276
262
  onChange: NOOP
277
263
  };
278
- var stepProps = isStepType(expression) ? getStepProps(expression, index) : {};
264
+ const stepProps = isStepType(expression) ? getStepProps(expression, index) : {};
279
265
  return {
280
- wrapperRef: function wrapperRef(element) {
281
- return expressionRefs.current[expression.id] = element;
282
- },
266
+ wrapperRef: (element) => expressionRefs.current[expression.id] = element,
283
267
  dropLabel: text.dropMeHere,
284
- logicProps: logicProps,
285
- stepProps: stepProps,
286
- handleMouseDown: function handleMouseDown() {
287
- return setActiveExpressionId(expression.id);
288
- },
289
- handleTransitionEnd: handleTransitionEnd,
290
- expression: expression,
291
- expressionsOrder: expressionsOrder,
268
+ logicProps,
269
+ stepProps,
270
+ handleMouseDown: () => setActiveExpressionId(expression.id),
271
+ handleTransitionEnd,
272
+ expression,
273
+ expressionsOrder,
292
274
  id: expression.id,
293
275
  expressionIndex: index,
294
- readOnly: readOnly,
276
+ readOnly,
295
277
  isLast: index === expressions.length - 1
296
278
  };
297
279
  });
298
280
  }, [expressions, readOnly, handleTransitionEnd, setActiveExpressionId, getStepProps, getLogicProps, text.dropMeHere]);
299
- var handleChangeOrder = useCallback(function (newOrder) {
281
+ const handleChangeOrder = useCallback((newOrder) => {
300
282
  if (onChangeOrder) {
301
- var idOrder = newOrder.map(function (item) {
302
- return item.id;
303
- });
304
- var updatedExpressions = [].concat(expressions).sort(function (a, b) {
305
- return idOrder.indexOf(a.id) - idOrder.indexOf(b.id);
306
- });
283
+ const idOrder = newOrder.map((item) => item.id);
284
+ const updatedExpressions = [...expressions].sort((a, b) => idOrder.indexOf(a.id) - idOrder.indexOf(b.id));
307
285
  onChangeOrder(updatedExpressions);
308
286
  }
309
287
  }, [onChangeOrder, expressions]);
310
- var renderExpressions = useCallback(function () {
288
+ const renderExpressions = useCallback(() => {
311
289
  if (isDraggable) {
312
- return /*#__PURE__*/React.createElement(Sortable, {
313
- placeholderCss: S.placeholderCss,
314
- axis: "y",
315
- items: expressionData,
316
- ItemComponent: DraggableExpressionItem,
317
- onOrderChange: handleChangeOrder
318
- });
290
+ return /* @__PURE__ */ jsx(Sortable, { placeholderCss, axis: "y", items: expressionData, ItemComponent: DraggableExpressionItem, onOrderChange: handleChangeOrder });
319
291
  }
320
292
  return expressionData.map(ExpressionItem);
321
293
  }, [expressionData, handleChangeOrder, isDraggable]);
322
- return /*#__PURE__*/React.createElement(S.FilterWrapper, null, /*#__PURE__*/React.createElement(S.FilterHeader, null, texts != null && (_texts$overwritten = texts.overwritten) != null && _texts$overwritten.filterTitle ? /*#__PURE__*/React.createElement(S.FilterTitle, null, texts.overwritten.filterTitle) : /*#__PURE__*/React.createElement(S.MatchingAndConditionsWrapper, null, /*#__PURE__*/React.createElement(S.MatchingWrapper, null, matching && /*#__PURE__*/React.createElement(Matching, _extends({}, matching, {
323
- texts: text.matching,
324
- readOnly: readOnly
325
- }))), !!maxConditionsLimit && /*#__PURE__*/React.createElement(S.ConditionsLimit, null, text.conditionsLimit, ":", ' ', /*#__PURE__*/React.createElement(S.ConditionsLimitResults, null, expressions.length, "/", maxConditionsLimit))), renderHeaderRightSide && /*#__PURE__*/React.createElement(S.FilterHeaderRightSide, null, renderHeaderRightSide(expressions))), /*#__PURE__*/React.createElement(React.Fragment, null, expressions.length > 0 ? renderExpressions() : /*#__PURE__*/React.createElement(Placeholder, {
326
- text: text.placeholder.chooseCondition
327
- }), addFilterComponent && !readOnly && /*#__PURE__*/React.createElement(S.AddButtonWrapper, null, typeof addFilterComponent === 'function' ? addFilterComponent({
328
- isLimitExceeded: isLimitExceeded
329
- }) : addFilterComponent)));
294
+ return /* @__PURE__ */ jsxs(FilterWrapper, { children: [
295
+ /* @__PURE__ */ jsxs(FilterHeader, { children: [
296
+ texts?.overwritten?.filterTitle ? /* @__PURE__ */ jsx(FilterTitle, { children: texts.overwritten.filterTitle }) : /* @__PURE__ */ jsxs(MatchingAndConditionsWrapper, { children: [
297
+ /* @__PURE__ */ jsx(MatchingWrapper, { children: matching && /* @__PURE__ */ jsx(Matching, { ...matching, texts: text.matching, readOnly }) }),
298
+ !!maxConditionsLimit && /* @__PURE__ */ jsxs(ConditionsLimit, { children: [
299
+ text.conditionsLimit,
300
+ ":",
301
+ " ",
302
+ /* @__PURE__ */ jsxs(ConditionsLimitResults, { children: [
303
+ expressions.length,
304
+ "/",
305
+ maxConditionsLimit
306
+ ] })
307
+ ] })
308
+ ] }),
309
+ renderHeaderRightSide && /* @__PURE__ */ jsx(FilterHeaderRightSide, { children: renderHeaderRightSide(expressions) })
310
+ ] }),
311
+ /* @__PURE__ */ jsxs(Fragment, { children: [
312
+ expressions.length > 0 ? renderExpressions() : /* @__PURE__ */ jsx(Placeholder, { text: text.placeholder.chooseCondition }),
313
+ addFilterComponent && !readOnly && /* @__PURE__ */ jsx(AddButtonWrapper, { children: typeof addFilterComponent === "function" ? addFilterComponent({
314
+ isLimitExceeded
315
+ }) : addFilterComponent })
316
+ ] })
317
+ ] });
318
+ };
319
+ export {
320
+ Filter as default
330
321
  };
331
- export default Filter;
@@ -1,15 +1,15 @@
1
- export declare const placeholderCss: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
2
- export declare const FilterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- export declare const FilterHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
4
- export declare const FilterHeaderRightSide: import("styled-components").StyledComponent<"div", any, {}, never>;
5
- export declare const MatchingAndConditionsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
6
- export declare const MatchingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
7
- export declare const ConditionsLimit: import("styled-components").StyledComponent<"div", any, {}, never>;
8
- export declare const ConditionsLimitResults: import("styled-components").StyledComponent<"span", any, {}, never>;
9
- export declare const LogicWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
10
- export declare const ExpressionWrapper: import("styled-components").StyledComponent<"div", any, {
1
+ export declare const placeholderCss: import('styled-components').FlattenInterpolation<import('styled-components').ThemeProps<any>>;
2
+ export declare const FilterWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
3
+ export declare const FilterHeader: import('styled-components').StyledComponent<"div", any, {}, never>;
4
+ export declare const FilterHeaderRightSide: import('styled-components').StyledComponent<"div", any, {}, never>;
5
+ export declare const MatchingAndConditionsWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
6
+ export declare const MatchingWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
7
+ export declare const ConditionsLimit: import('styled-components').StyledComponent<"div", any, {}, never>;
8
+ export declare const ConditionsLimitResults: import('styled-components').StyledComponent<"span", any, {}, never>;
9
+ export declare const LogicWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
10
+ export declare const ExpressionWrapper: import('styled-components').StyledComponent<"div", any, {
11
11
  index?: number;
12
12
  isDragged?: boolean;
13
13
  }, never>;
14
- export declare const AddButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
15
- export declare const FilterTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
14
+ export declare const AddButtonWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
15
+ export declare const FilterTitle: import('styled-components').StyledComponent<"div", any, {}, never>;
@@ -1,55 +1,65 @@
1
- import styled, { css } from 'styled-components';
2
- import { SortableItemContent } from '@synerise/ds-sortable/dist/Sortable.styles';
3
- export var placeholderCss = css(["height:calc(100% - 24px);background-color:", ";border:0;border-left:2px solid ", ";border-radius:3px;"], function (props) {
4
- return props.theme.palette['blue-050'];
5
- }, function (props) {
6
- return props.theme.palette['blue-600'];
7
- });
8
- export var FilterWrapper = styled.div.withConfig({
1
+ import styled, { css } from "styled-components";
2
+ import { SortableItemContent } from "@synerise/ds-sortable/dist/Sortable.styles";
3
+ const placeholderCss = /* @__PURE__ */ css(["height:calc(100% - 24px);background-color:", ";border:0;border-left:2px solid ", ";border-radius:3px;"], (props) => props.theme.palette["blue-050"], (props) => props.theme.palette["blue-600"]);
4
+ const FilterWrapper = /* @__PURE__ */ styled.div.withConfig({
9
5
  displayName: "Filterstyles__FilterWrapper",
10
6
  componentId: "sc-w5f27p-0"
11
7
  })(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;", "{visibility:visible;opacity:1;}"], SortableItemContent);
12
- export var FilterHeader = styled.div.withConfig({
8
+ const FilterHeader = /* @__PURE__ */ styled.div.withConfig({
13
9
  displayName: "Filterstyles__FilterHeader",
14
10
  componentId: "sc-w5f27p-1"
15
11
  })(["width:100%;display:flex;margin-bottom:24px;flex-direction:row;align-items:center;justify-content:space-between;"]);
16
- export var FilterHeaderRightSide = styled.div.withConfig({
12
+ const FilterHeaderRightSide = /* @__PURE__ */ styled.div.withConfig({
17
13
  displayName: "Filterstyles__FilterHeaderRightSide",
18
14
  componentId: "sc-w5f27p-2"
19
15
  })(["flex:1;overflow-x:hidden;"]);
20
- export var MatchingAndConditionsWrapper = styled.div.withConfig({
16
+ const MatchingAndConditionsWrapper = /* @__PURE__ */ styled.div.withConfig({
21
17
  displayName: "Filterstyles__MatchingAndConditionsWrapper",
22
18
  componentId: "sc-w5f27p-3"
23
19
  })(["flex:0 0 auto;margin-right:24px;display:flex;align-items:baseline;"]);
24
- export var MatchingWrapper = styled.div.withConfig({
20
+ const MatchingWrapper = /* @__PURE__ */ styled.div.withConfig({
25
21
  displayName: "Filterstyles__MatchingWrapper",
26
22
  componentId: "sc-w5f27p-4"
27
23
  })(["text-wrap:nowrap;"]);
28
- export var ConditionsLimit = styled.div.withConfig({
24
+ const ConditionsLimit = /* @__PURE__ */ styled.div.withConfig({
29
25
  displayName: "Filterstyles__ConditionsLimit",
30
26
  componentId: "sc-w5f27p-5"
31
27
  })(["margin-left:16px;"]);
32
- export var ConditionsLimitResults = styled.span.withConfig({
28
+ const ConditionsLimitResults = /* @__PURE__ */ styled.span.withConfig({
33
29
  displayName: "Filterstyles__ConditionsLimitResults",
34
30
  componentId: "sc-w5f27p-6"
35
31
  })(["font-weight:500;"]);
36
- export var LogicWrapper = styled.div.withConfig({
32
+ const LogicWrapper = /* @__PURE__ */ styled.div.withConfig({
37
33
  displayName: "Filterstyles__LogicWrapper",
38
34
  componentId: "sc-w5f27p-7"
39
35
  })(["margin:22px 0;"]);
40
- export var ExpressionWrapper = styled.div.withConfig({
36
+ const ExpressionWrapper = /* @__PURE__ */ styled.div.withConfig({
41
37
  displayName: "Filterstyles__ExpressionWrapper",
42
38
  componentId: "sc-w5f27p-8"
43
- })(["width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;", ""], function (props) {
44
- return (props.isDragged || props.index === -1) && "\n " + LogicWrapper + " {\n display: none;\n }\n ";
45
- });
46
- export var AddButtonWrapper = styled.div.withConfig({
39
+ })(["width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;", ""], (props) => (props.isDragged || props.index === -1) && `
40
+ ${LogicWrapper} {
41
+ display: none;
42
+ }
43
+ `);
44
+ const AddButtonWrapper = /* @__PURE__ */ styled.div.withConfig({
47
45
  displayName: "Filterstyles__AddButtonWrapper",
48
46
  componentId: "sc-w5f27p-9"
49
47
  })(["display:flex;align-items:flex-start;justify-content:flex-start;margin:24px 0 0;width:100%;position:relative;"]);
50
- export var FilterTitle = styled.div.withConfig({
48
+ const FilterTitle = /* @__PURE__ */ styled.div.withConfig({
51
49
  displayName: "Filterstyles__FilterTitle",
52
50
  componentId: "sc-w5f27p-10"
53
- })(["font-size:16px;font-weight:500;line-height:1.25;color:", ";text-align:left;user-select:none;flex:0 0 auto;&:first-letter{text-transform:uppercase;}"], function (props) {
54
- return props.theme.palette['grey-800'];
55
- });
51
+ })(["font-size:16px;font-weight:500;line-height:1.25;color:", ";text-align:left;user-select:none;flex:0 0 auto;&:first-letter{text-transform:uppercase;}"], (props) => props.theme.palette["grey-800"]);
52
+ export {
53
+ AddButtonWrapper,
54
+ ConditionsLimit,
55
+ ConditionsLimitResults,
56
+ ExpressionWrapper,
57
+ FilterHeader,
58
+ FilterHeaderRightSide,
59
+ FilterTitle,
60
+ FilterWrapper,
61
+ LogicWrapper,
62
+ MatchingAndConditionsWrapper,
63
+ MatchingWrapper,
64
+ placeholderCss
65
+ };
@@ -1,7 +1,7 @@
1
- import type { ReactNode } from 'react';
2
- import type { LogicOperator, LogicOperatorValue, LogicProps, MatchingProps, MatchingTexts } from '@synerise/ds-logic';
3
- import type { StepCardProps } from '@synerise/ds-step-card';
4
- import type { DeepPartial } from '@synerise/ds-utils';
1
+ import { ReactNode } from 'react';
2
+ import { LogicOperator, LogicOperatorValue, LogicProps, MatchingProps, MatchingTexts } from '@synerise/ds-logic';
3
+ import { StepCardProps } from '@synerise/ds-step-card';
4
+ import { DeepPartial } from '@synerise/ds-utils';
5
5
  export type LogicType = {
6
6
  type: 'LOGIC';
7
7
  id: string;
@@ -1 +1 @@
1
- export {};
1
+
@@ -1,5 +1,5 @@
1
- import React from 'react';
2
- import type { ExpressionItemProps } from './ExpressionItem.types';
1
+ import { default as React } from 'react';
2
+ import { ExpressionItemProps } from './ExpressionItem.types';
3
3
  export declare const DraggableExpressionItem: ({ expressionsOrder, expression, index: sortableIndex, ...rest }: ExpressionItemProps & {
4
4
  index?: number;
5
5
  }) => React.JSX.Element;
@@ -1,34 +1,27 @@
1
- var _excluded = ["expressionsOrder", "expression", "index"];
2
- 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); }
3
- function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
4
- import React, { useEffect, useState } from 'react';
5
- import { arrayMove, useDndMonitor } from '@synerise/ds-sortable';
6
- import { ExpressionItem } from './ExpressionItem';
7
- export var DraggableExpressionItem = function DraggableExpressionItem(_ref) {
8
- var expressionsOrder = _ref.expressionsOrder,
9
- expression = _ref.expression,
10
- sortableIndex = _ref.index,
11
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
12
- var _useState = useState(expressionsOrder.indexOf(expression.id)),
13
- dragIndex = _useState[0],
14
- setDragIndex = _useState[1];
15
- useEffect(function () {
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useState, useEffect } from "react";
3
+ import { useDndMonitor, arrayMove } from "@synerise/ds-sortable";
4
+ import { ExpressionItem } from "./ExpressionItem.js";
5
+ const DraggableExpressionItem = ({
6
+ expressionsOrder,
7
+ expression,
8
+ index: sortableIndex,
9
+ ...rest
10
+ }) => {
11
+ const [dragIndex, setDragIndex] = useState(expressionsOrder.indexOf(expression.id));
12
+ useEffect(() => {
16
13
  setDragIndex(expressionsOrder.indexOf(expression.id));
17
14
  }, [expressionsOrder, expression.id]);
18
15
  useDndMonitor({
19
- onDragMove: function onDragMove(event) {
20
- var _event$over;
21
- if (((_event$over = event.over) == null || (_event$over = _event$over.data.current) == null || (_event$over = _event$over.sortable) == null ? void 0 : _event$over.index) !== undefined) {
22
- var _event$active$data$cu, _event$over2;
23
- var tempOrder = arrayMove(expressionsOrder, (_event$active$data$cu = event.active.data.current) == null || (_event$active$data$cu = _event$active$data$cu.sortable) == null ? void 0 : _event$active$data$cu.index, (_event$over2 = event.over) == null || (_event$over2 = _event$over2.data.current) == null || (_event$over2 = _event$over2.sortable) == null ? void 0 : _event$over2.index);
16
+ onDragMove: (event) => {
17
+ if (event.over?.data.current?.sortable?.index !== void 0) {
18
+ const tempOrder = arrayMove(expressionsOrder, event.active.data.current?.sortable?.index, event.over?.data.current?.sortable?.index);
24
19
  setDragIndex(tempOrder.indexOf(expression.id));
25
20
  }
26
21
  }
27
22
  });
28
- return /*#__PURE__*/React.createElement(ExpressionItem, _extends({
29
- isDragOverlay: sortableIndex === -1,
30
- dragIndex: dragIndex,
31
- expression: expression,
32
- expressionsOrder: expressionsOrder
33
- }, rest));
34
- };
23
+ return /* @__PURE__ */ jsx(ExpressionItem, { isDragOverlay: sortableIndex === -1, dragIndex, expression, expressionsOrder, ...rest });
24
+ };
25
+ export {
26
+ DraggableExpressionItem
27
+ };
@@ -1,3 +1,3 @@
1
- import React from 'react';
2
- import type { ExpressionItemProps } from './ExpressionItem.types';
1
+ import { default as React } from 'react';
2
+ import { ExpressionItemProps } from './ExpressionItem.types';
3
3
  export declare const ExpressionItem: ({ handleTransitionEnd, dragHandleProps, isDragged, isDragOverlay, expression, readOnly, handleMouseDown, isLast, stepProps, logicProps, wrapperRef, expressionIndex, dragIndex, expressionsOrder, }: ExpressionItemProps) => React.JSX.Element;
@@ -1,46 +1,34 @@
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 from 'react';
3
- import Logic from '@synerise/ds-logic';
4
- import StepCard from '@synerise/ds-step-card';
5
- import * as S from '../../Filter.styles';
6
- import { isStepType } from '../../utils';
7
- export var ExpressionItem = function ExpressionItem(_ref) {
8
- var _expression$logic;
9
- var handleTransitionEnd = _ref.handleTransitionEnd,
10
- dragHandleProps = _ref.dragHandleProps,
11
- isDragged = _ref.isDragged,
12
- isDragOverlay = _ref.isDragOverlay,
13
- expression = _ref.expression,
14
- readOnly = _ref.readOnly,
15
- handleMouseDown = _ref.handleMouseDown,
16
- isLast = _ref.isLast,
17
- stepProps = _ref.stepProps,
18
- logicProps = _ref.logicProps,
19
- wrapperRef = _ref.wrapperRef,
20
- expressionIndex = _ref.expressionIndex,
21
- dragIndex = _ref.dragIndex,
22
- expressionsOrder = _ref.expressionsOrder;
23
- var data = expression.data,
24
- id = expression.id;
25
- var shouldRenderLogic = isStepType(expression) && expression.logic && !isLast && !isDragged && !isDragOverlay && expressionIndex !== -1;
26
- return /*#__PURE__*/React.createElement(S.ExpressionWrapper, {
27
- "data-testid": "condition-step",
28
- onTransitionEnd: handleTransitionEnd,
29
- ref: wrapperRef,
30
- key: id,
31
- onMouseDown: handleMouseDown
32
- }, /*#__PURE__*/React.createElement(StepCard, _extends({
33
- expressionIndex: expressionIndex,
34
- expressionCount: expressionsOrder.length
35
- }, data, stepProps, {
36
- readOnly: readOnly,
37
- dragHandleProps: dragHandleProps,
38
- isDragged: isDragged,
39
- isDragOverlay: isDragOverlay,
40
- dragIndex: dragIndex
41
- })), shouldRenderLogic && /*#__PURE__*/React.createElement(S.LogicWrapper, {
42
- "data-testid": "condition-logic"
43
- }, /*#__PURE__*/React.createElement(Logic, _extends({}, logicProps, (_expression$logic = expression.logic) == null ? void 0 : _expression$logic.data, {
44
- readOnly: readOnly
45
- }))));
46
- };
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import Logic from "@synerise/ds-logic";
3
+ import StepCard from "@synerise/ds-step-card";
4
+ import { ExpressionWrapper, LogicWrapper } from "../../Filter.styles.js";
5
+ import { isStepType } from "../../utils.js";
6
+ const ExpressionItem = ({
7
+ handleTransitionEnd,
8
+ dragHandleProps,
9
+ isDragged,
10
+ isDragOverlay,
11
+ expression,
12
+ readOnly,
13
+ handleMouseDown,
14
+ isLast,
15
+ stepProps,
16
+ logicProps,
17
+ wrapperRef,
18
+ expressionIndex,
19
+ dragIndex,
20
+ expressionsOrder
21
+ }) => {
22
+ const {
23
+ data,
24
+ id
25
+ } = expression;
26
+ const shouldRenderLogic = isStepType(expression) && expression.logic && !isLast && !isDragged && !isDragOverlay && expressionIndex !== -1;
27
+ return /* @__PURE__ */ jsxs(ExpressionWrapper, { "data-testid": "condition-step", onTransitionEnd: handleTransitionEnd, ref: wrapperRef, onMouseDown: handleMouseDown, children: [
28
+ /* @__PURE__ */ jsx(StepCard, { expressionIndex, expressionCount: expressionsOrder.length, ...data, ...stepProps, readOnly, dragHandleProps, isDragged, isDragOverlay, dragIndex }),
29
+ shouldRenderLogic && /* @__PURE__ */ jsx(LogicWrapper, { "data-testid": "condition-logic", children: /* @__PURE__ */ jsx(Logic, { ...logicProps, ...expression.logic?.data, readOnly }) })
30
+ ] }, id);
31
+ };
32
+ export {
33
+ ExpressionItem
34
+ };
@@ -1,8 +1,8 @@
1
- import type { MouseEventHandler, ReactNode, TransitionEventHandler } from 'react';
2
- import type { LogicProps } from '@synerise/ds-logic';
3
- import type { DragHandlePropType } from '@synerise/ds-sortable';
4
- import type { StepCardProps } from '@synerise/ds-step-card';
5
- import type { Expression } from '../../Filter.types';
1
+ import { MouseEventHandler, ReactNode, TransitionEventHandler } from 'react';
2
+ import { LogicProps } from '@synerise/ds-logic';
3
+ import { DragHandlePropType } from '@synerise/ds-sortable';
4
+ import { StepCardProps } from '@synerise/ds-step-card';
5
+ import { Expression } from '../../Filter.types';
6
6
  export type ExpressionItemProps = {
7
7
  handleTransitionEnd: TransitionEventHandler;
8
8
  id: string | number;
@@ -1 +1 @@
1
- export {};
1
+
@@ -1,2 +1,6 @@
1
- export { DraggableExpressionItem } from './DraggableExpressionItem';
2
- export { ExpressionItem } from './ExpressionItem';
1
+ import { DraggableExpressionItem } from "./DraggableExpressionItem.js";
2
+ import { ExpressionItem } from "./ExpressionItem.js";
3
+ export {
4
+ DraggableExpressionItem,
5
+ ExpressionItem
6
+ };
package/dist/index.js CHANGED
@@ -1 +1,4 @@
1
- export { default } from './Filter';
1
+ import { default as default2 } from "./Filter.js";
2
+ export {
3
+ default2 as default
4
+ };
package/dist/modules.d.js CHANGED
@@ -1 +1 @@
1
- import '@testing-library/jest-dom';
1
+ import "@testing-library/jest-dom";
File without changes
package/dist/utils.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import type { Expression, StepType } from './Filter.types';
1
+ import { Expression, StepType } from './Filter.types';
2
2
  export declare const isStepType: (expression: Expression) => expression is StepType;
package/dist/utils.js CHANGED
@@ -1,3 +1,6 @@
1
- export var isStepType = function isStepType(expression) {
2
- return expression.type === 'STEP';
3
- };
1
+ const isStepType = (expression) => {
2
+ return expression.type === "STEP";
3
+ };
4
+ export {
5
+ isStepType
6
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-filter",
3
- "version": "1.2.41",
3
+ "version": "1.2.42",
4
4
  "description": "Filter UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
16
16
  "access": "public"
17
17
  },
18
18
  "scripts": {
19
- "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
19
+ "build": "vite build",
20
20
  "build:css": "node ../../../scripts/style/less.js",
21
21
  "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
22
- "build:watch": "pnpm run build:js -- --watch",
22
+ "build:watch": "vite build --watch",
23
23
  "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
24
24
  "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
25
25
  "prepublish": "pnpm run build",
@@ -35,11 +35,11 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-button": "^1.5.17",
39
- "@synerise/ds-logic": "^1.1.31",
40
- "@synerise/ds-sortable": "^1.3.13",
41
- "@synerise/ds-step-card": "^1.2.39",
42
- "@synerise/ds-utils": "^1.7.0"
38
+ "@synerise/ds-button": "^1.5.18",
39
+ "@synerise/ds-logic": "^1.1.32",
40
+ "@synerise/ds-sortable": "^1.3.14",
41
+ "@synerise/ds-step-card": "^1.2.40",
42
+ "@synerise/ds-utils": "^1.7.1"
43
43
  },
44
44
  "peerDependencies": {
45
45
  "@synerise/ds-core": "*",
@@ -47,5 +47,5 @@
47
47
  "react-intl": ">=3.12.0 <= 6.8",
48
48
  "styled-components": "^5.3.3"
49
49
  },
50
- "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
50
+ "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
51
51
  }