@synerise/ds-filter 1.0.10 → 1.1.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@1.0.10...@synerise/ds-filter@1.1.0) (2025-06-05)
+
+
+### Features
+
+* **filter:** change dnd lib and update ux ([f5a979e](https://github.com/Synerise/synerise-design/commit/f5a979e6c9e5d9c8251c3f57da8ce57c416dadab))
+
+
+
+
+
 ## [1.0.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@1.0.9...@synerise/ds-filter@1.0.10) (2025-06-03)
 
 **Note:** Version bump only for package @synerise/ds-filter

package/dist/Filter.js

@@ -1,22 +1,16 @@
 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); }
 import React, { useCallback, useMemo, useEffect, useState, useRef } from 'react';
 import { useIntl } from 'react-intl';
-import { ReactSortable } from 'react-sortablejs';
-import Logic from '@synerise/ds-logic';
-import Matching from '@synerise/ds-logic/dist/Matching/Matching';
-import Placeholder from '@synerise/ds-logic/dist/Placeholder/Placeholder';
-import StepCard from '@synerise/ds-step-card';
-import { usePrevious } from '@synerise/ds-utils';
+import Sortable from '@synerise/ds-sortable';
+import { Matching, Placeholder } from '@synerise/ds-logic';
+import { NOOP, usePrevious } from '@synerise/ds-utils';
 import * as S from './Filter.styles';
-var component = {
-  LOGIC: Logic,
-  STEP: StepCard
-};
+import { ExpressionItem, DraggableExpressionItem } from './components/ExpressionItem';
+import { isStepType } from './utils';
 var TRANSITION_DURATION = 0.5;
 var TRANSITION_DURATION_MAX = 1.5;
 var TOP_TRANSITION_ZINDEX = 1003;
 var BOTTOM_TRANSITION_ZINDEX = 1002;
-var DRAGGING_TRANSITION_ZINDEX = 1004;
 var rearrangeItems = function rearrangeItems(sourceArray, oldIndex, newIndex) {
   sourceArray.splice(newIndex, 0, sourceArray.splice(oldIndex, 1)[0]);
   return [].concat(sourceArray);
@@ -54,26 +48,6 @@ var Filter = function Filter(_ref) {
     setActiveExpressionId = _useState[1];
   var expressionRefs = useRef({});
   var movedExpressionId = useRef(null);
-  var SORTABLE_CONFIG = useMemo(function () {
-    return {
-      ghostClass: 'ghost-element',
-      className: 'sortable-list',
-      handle: '.step-card-drag-handler',
-      animation: 200,
-      forceFallback: true,
-      filter: '.ds-matching-toggle, .step-card-right-side',
-      onStart: function onStart() {
-        movedExpressionId.current = null;
-      },
-      onChoose: function onChoose(evt) {
-        // eslint-disable-next-line no-param-reassign
-        evt.item.style.zIndex = DRAGGING_TRANSITION_ZINDEX;
-      },
-      onUnchoose: function onUnchoose(evt) {
-        evt.item.style.removeProperty('z-index');
-      }
-    };
-  }, []);
   useEffect(function () {
     if (movedExpressionId.current && previousExpressions != null && previousExpressions.length) {
       var oldIndex = previousExpressions == null ? void 0 : previousExpressions.findIndex(function (expression) {
@@ -236,18 +210,18 @@ var Filter = function Filter(_ref) {
       return expression.type === 'STEP';
     }).length;
   }, [expressions]);
-  var handleTransitionEnd = function handleTransitionEnd(event) {
+  var handleTransitionEnd = useCallback(function (event) {
     if (event.currentTarget && event.currentTarget instanceof HTMLElement) {
       event.currentTarget.style.removeProperty('z-index');
     }
-  };
+  }, []);
   var handleMove = useCallback(function (index, offset) {
     var newIndex = index + offset;
     var newOrder = rearrangeItems([].concat(expressions), index, newIndex);
     movedExpressionId.current = newOrder[newIndex].id;
     onChangeOrder && onChangeOrder(newOrder);
   }, [expressions, onChangeOrder]);
-  var componentProps = useCallback(function (expression, index) {
+  var getStepProps = useCallback(function (expression, index) {
     var contextTypeTexts = getContextTypeTexts(expression);
     var reorderProps = {
       expressionIndex: index,
@@ -255,73 +229,95 @@ var Filter = function Filter(_ref) {
       expressionCount: stepExpressionCount,
       onMove: handleMove
     };
-    var props = {
-      LOGIC: {
-        onChange: onChangeLogic ? function (value) {
-          return onChangeLogic(expression.id, value);
-        } : undefined,
-        options: logicOptions
-      },
-      STEP: _extends({}, reorderProps, {
-        onChangeMatching: onChangeStepMatching ? function (value) {
-          return onChangeStepMatching(expression.id, value);
-        } : undefined,
-        onChangeName: onChangeStepName ? function (value) {
-          return onChangeStepName(expression.id, value);
-        } : undefined,
-        onDelete: onDeleteStep ? function () {
-          return onDeleteStep(expression.id);
-        } : undefined,
-        onDuplicate: onDuplicateStep && !isLimitExceeded ? function () {
-          return onDuplicateStep(expression.id);
-        } : undefined,
-        footer: renderStepFooter && renderStepFooter(expression),
-        children: renderStepContent && renderStepContent(expression, !!activeExpressionId && !isActive(expression)),
-        isHeaderVisible: visibilityConfig.isStepCardHeaderVisible,
-        headerRightSide: renderStepHeaderRightSide && renderStepHeaderRightSide(expression, index),
-        isDraggable: Boolean(onChangeOrder),
-        singleStepCondition: Boolean(singleStepCondition),
-        additionalFields: expression.data.additionalFields,
-        getMoveByLabel: getMoveByLabel,
-        texts: _extends({}, text.step, contextTypeTexts)
-      })
+    return _extends({}, reorderProps, {
+      onChangeMatching: onChangeStepMatching ? function (value) {
+        return onChangeStepMatching(expression.id, value);
+      } : undefined,
+      onChangeName: onChangeStepName ? function (value) {
+        return onChangeStepName(expression.id, value);
+      } : undefined,
+      onDelete: onDeleteStep ? function () {
+        return onDeleteStep(expression.id);
+      } : undefined,
+      onDuplicate: onDuplicateStep && !isLimitExceeded ? function () {
+        return onDuplicateStep(expression.id);
+      } : undefined,
+      footer: renderStepFooter && renderStepFooter(expression),
+      children: renderStepContent && renderStepContent(expression, !!activeExpressionId && !isActive(expression)),
+      isHeaderVisible: visibilityConfig.isStepCardHeaderVisible,
+      renderHeaderRightSide: renderStepHeaderRightSide ? function (itemIndex, options) {
+        return renderStepHeaderRightSide(expression, itemIndex, options);
+      } : undefined,
+      isDraggable: Boolean(onChangeOrder),
+      singleStepCondition: Boolean(singleStepCondition),
+      additionalFields: expression.data.additionalFields,
+      getMoveByLabel: getMoveByLabel,
+      dropLabel: text.dropMeHere,
+      texts: _extends({}, text.step, contextTypeTexts)
+    });
+  }, [activeExpressionId, getContextTypeTexts, getMoveByLabel, handleMove, isActive, isLimitExceeded, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepContent, renderStepFooter, renderStepHeaderRightSide, stepExpressionCount, text.step, text.dropMeHere, visibilityConfig.isStepCardHeaderVisible, singleStepCondition, onChangeOrder]);
+  var getLogicProps = useCallback(function (expression) {
+    return {
+      value: '',
+      onChange: onChangeLogic ? function (value) {
+        return onChangeLogic(expression.id, value);
+      } : NOOP,
+      options: logicOptions
     };
-    return props[expression.type];
-  }, [activeExpressionId, getContextTypeTexts, getMoveByLabel, handleMove, isActive, isLimitExceeded, logicOptions, onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepContent, renderStepFooter, renderStepHeaderRightSide, stepExpressionCount, text.step, visibilityConfig.isStepCardHeaderVisible, singleStepCondition, onChangeOrder]);
-  var renderExpression = useCallback(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function (expression, index) {
-    var Component = component[expression.type];
-    var LogicComponent = expression.logic && component[expression.logic.type];
-    return /*#__PURE__*/React.createElement(S.ExpressionWrapper, {
-      "data-testid": "condition-step",
-      onTransitionEnd: handleTransitionEnd,
-      ref: function ref(element) {
-        return expressionRefs.current[expression.id] = element;
-      },
-      key: expression.id,
-      "data-dropLabel": text.dropMeHere,
-      index: index,
-      onMouseDown: function onMouseDown() {
-        return setActiveExpressionId(expression.id);
-      }
-    }, /*#__PURE__*/React.createElement(Component, _extends({}, expression.data, componentProps(expression, index), {
-      readOnly: readOnly
-    })), expression.logic && index + 1 < expressions.length && LogicComponent && /*#__PURE__*/React.createElement(S.LogicWrapper, {
-      "data-testid": "condition-logic"
-    }, /*#__PURE__*/React.createElement(LogicComponent, _extends({}, expression.logic.data, componentProps(expression.logic, index), {
-      readOnly: readOnly
-    }))));
-  }, [text.dropMeHere, componentProps, expressions.length, readOnly]);
+  }, [onChangeLogic, logicOptions]);
+  var expressionData = useMemo(function () {
+    var expressionsOrder = expressions.map(function (expression) {
+      return expression.id;
+    });
+    return expressions.map(function (expression, index) {
+      var logicProps = isStepType(expression) && expression.logic ? getLogicProps(expression.logic) : {
+        value: '',
+        onChange: NOOP
+      };
+      var stepProps = isStepType(expression) ? getStepProps(expression, index) : {};
+      return {
+        wrapperRef: function wrapperRef(element) {
+          return expressionRefs.current[expression.id] = element;
+        },
+        dropLabel: text.dropMeHere,
+        logicProps: logicProps,
+        stepProps: stepProps,
+        handleMouseDown: function handleMouseDown() {
+          return setActiveExpressionId(expression.id);
+        },
+        handleTransitionEnd: handleTransitionEnd,
+        expression: expression,
+        expressionsOrder: expressionsOrder,
+        id: expression.id,
+        expressionIndex: index,
+        readOnly: readOnly,
+        isLast: index === expressions.length - 1
+      };
+    });
+  }, [expressions, readOnly, handleTransitionEnd, setActiveExpressionId, getStepProps, getLogicProps, text.dropMeHere]);
+  var handleChangeOrder = useCallback(function (newOrder) {
+    if (onChangeOrder) {
+      var idOrder = newOrder.map(function (item) {
+        return item.id;
+      });
+      var updatedExpressions = [].concat(expressions).sort(function (a, b) {
+        return idOrder.indexOf(a.id) - idOrder.indexOf(b.id);
+      });
+      onChangeOrder(updatedExpressions);
+    }
+  }, [onChangeOrder, expressions]);
   var renderExpressions = useCallback(function () {
     if (onChangeOrder) {
-      return /*#__PURE__*/React.createElement(ReactSortable, _extends({}, SORTABLE_CONFIG, {
-        list: expressions,
-        setList: onChangeOrder
-      }), expressions.map(renderExpression));
+      return /*#__PURE__*/React.createElement(Sortable, {
+        placeholderCss: S.placeholderCss,
+        axis: "y",
+        items: expressionData,
+        ItemComponent: DraggableExpressionItem,
+        onOrderChange: handleChangeOrder
+      });
     }
-    return expressions.map(renderExpression);
-  }, [renderExpression, SORTABLE_CONFIG, expressions, onChangeOrder]);
+    return expressionData.map(ExpressionItem);
+  }, [expressionData, handleChangeOrder, onChangeOrder]);
   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, {
     texts: text.matching,
     readOnly: readOnly

package/dist/Filter.styles.d.ts

@@ -1,3 +1,4 @@
+export declare const placeholderCss: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
 export declare const FilterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FilterHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FilterHeaderRightSide: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -7,7 +8,8 @@ export declare const ConditionsLimit: import("styled-components").StyledComponen
 export declare const ConditionsLimitResults: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const LogicWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ExpressionWrapper: import("styled-components").StyledComponent<"div", any, {
-    index: number;
+    index?: number | undefined;
+    isDragged?: boolean | undefined;
 }, never>;
 export declare const AddButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FilterTitle: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Filter.styles.js

@@ -1,9 +1,14 @@
-import styled from 'styled-components';
-import { Body, DragIcon, Footer } from '@synerise/ds-step-card/dist/StepCard.styles';
+import styled, { css } from 'styled-components';
+import { SortableItemContent } from '@synerise/ds-sortable/dist/Sortable.styles';
+export var placeholderCss = css(["height:calc(100% - 24px);background-color:", ";border:0;border-left:2px solid ", ";border-radius:3px;"], function (props) {
+  return props.theme.palette['blue-050'];
+}, function (props) {
+  return props.theme.palette['blue-600'];
+});
 export var FilterWrapper = styled.div.withConfig({
   displayName: "Filterstyles__FilterWrapper",
   componentId: "sc-w5f27p-0"
-})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;"]);
+})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;", "{visibility:visible;opacity:1;}"], SortableItemContent);
 export var FilterHeader = styled.div.withConfig({
   displayName: "Filterstyles__FilterHeader",
   componentId: "sc-w5f27p-1"
@@ -35,12 +40,8 @@ export var LogicWrapper = styled.div.withConfig({
 export var ExpressionWrapper = styled.div.withConfig({
   displayName: "Filterstyles__ExpressionWrapper",
   componentId: "sc-w5f27p-8"
-})(["width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;&.sortable-chosen{cursor:grabbing;width:100%;opacity:1 !important;height:50px;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 16px 32px 0 #23293619;&&&&.ghost-element{z-index:100 !important;}", "{visibility:visible;opacity:1;}", "{position:absolute;opacity:0;height:0;}", ",", "{display:none;}}&.ghost-element{cursor:grabbing;width:100%;background-color:", ";border-left:2px solid ", ";border-radius:3px;display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:24px;height:68px;box-shadow:none;position:relative;&:before{content:attr(data-dropLabel);text-align:center;position:relative;color:", ";}*{position:absolute;opacity:0;height:0;}}"], DragIcon, Body, Footer, LogicWrapper, function (props) {
-  return props.theme.palette['blue-050'];
-}, function (props) {
-  return props.theme.palette['blue-600'];
-}, function (props) {
-  return props.theme.palette['blue-600'];
+})(["width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;", ""], function (props) {
+  return (props.isDragged || props.index === -1) && "\n    " + LogicWrapper + " {\n      display: none;\n    }\n    ";
 });
 export var AddButtonWrapper = styled.div.withConfig({
   displayName: "Filterstyles__AddButtonWrapper",
@@ -49,6 +50,6 @@ export var AddButtonWrapper = styled.div.withConfig({
 export var FilterTitle = styled.div.withConfig({
   displayName: "Filterstyles__FilterTitle",
   componentId: "sc-w5f27p-10"
-})(["font-size:16px;font-weight:500;line-height:1.25;color:", ";text-align:left;user-select:none;margin-bottom:24px;flex:0 0 auto;&:first-letter{text-transform:uppercase;}"], function (props) {
+})(["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) {
   return props.theme.palette['grey-800'];
 });

package/dist/Filter.types.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { LogicOperator, LogicOperatorValue, LogicProps } from '@synerise/ds-logic/dist/Logic.types';
-import { StepCardProps } from '@synerise/ds-step-card';
-import { MatchingProps, MatchingTexts } from '@synerise/ds-logic/dist/Matching/Matching.types';
+import type { ReactNode } from 'react';
+import type { LogicOperator, LogicOperatorValue, LogicProps, MatchingProps, MatchingTexts } from '@synerise/ds-logic';
+import type { StepCardProps } from '@synerise/ds-step-card';
+import type { DeepPartial } from '@synerise/ds-utils';
 export type LogicType = {
     type: 'LOGIC';
     id: string;
@@ -18,6 +18,36 @@ export type Expression = LogicType | StepType;
 export type addFilterComponentProps = {
     isLimitExceeded: boolean;
 };
+export type FilterTexts = {
+    matching: MatchingTexts;
+    step: {
+        matching?: string;
+        notMatching?: string;
+        have?: string;
+        performed?: string;
+        notHave?: string;
+        notPerformed?: string;
+        attribute?: string;
+        event?: string;
+        notAttribute?: string;
+        notEvent?: string;
+        namePlaceholder?: string;
+        moveTooltip?: string;
+        moveUpTooltip?: string;
+        moveDownTooltip?: string;
+        deleteTooltip?: string;
+        duplicateTooltip?: string;
+    };
+    placeholder: {
+        chooseCondition?: string;
+        getPreview?: string;
+    };
+    addFilter: string;
+    dropMeHere: string;
+    overwritten: {
+        filterTitle?: string;
+    };
+};
 export type FilterProps = {
     maxConditionsLimit?: number;
     expressions: Expression[];
@@ -28,45 +58,18 @@ export type FilterProps = {
     onChangeStepName?: (id: string, name: string) => void;
     onDeleteStep?: (id: string) => void;
     onDuplicateStep?: (id: string) => void;
-    renderStepFooter?: (expression: Expression) => React.ReactNode;
-    renderStepContent?: (expression: Expression, hoverDisabled?: boolean) => React.ReactNode;
-    renderStepHeaderRightSide?: (expression: Expression, index: number) => React.ReactNode;
-    addFilterComponent?: React.ReactNode | ((arg: addFilterComponentProps) => React.ReactNode);
+    renderStepFooter?: (expression: Expression) => ReactNode;
+    renderStepContent?: (expression: Expression, hoverDisabled?: boolean) => ReactNode;
+    renderStepHeaderRightSide?: (expression: Expression, index: number, options?: {
+        placeholder?: boolean;
+    }) => ReactNode;
+    addFilterComponent?: ReactNode | ((arg: addFilterComponentProps) => ReactNode);
     logicOptions?: LogicOperator[];
     readOnly?: boolean;
     singleStepCondition?: boolean;
-    renderHeaderRightSide?: (expressions: Expression[]) => React.ReactNode;
+    renderHeaderRightSide?: (expressions: Expression[]) => ReactNode;
     getMoveByLabel?: (moveByOffset: number) => string;
-    texts?: {
-        matching?: MatchingTexts;
-        step?: {
-            matching?: string;
-            notMatching?: string;
-            have?: string;
-            performed?: string;
-            notHave?: string;
-            notPerformed?: string;
-            attribute?: string;
-            event?: string;
-            notAttribute?: string;
-            notEvent?: string;
-            namePlaceholder?: string;
-            moveTooltip?: string;
-            moveUpTooltip?: string;
-            moveDownTooltip?: string;
-            deleteTooltip?: string;
-            duplicateTooltip?: string;
-        };
-        placeholder?: {
-            chooseCondition?: string;
-            getPreview?: string;
-        };
-        addFilter?: string;
-        dropMeHere?: string;
-        overwritten?: {
-            filterTitle?: string;
-        };
-    };
+    texts?: DeepPartial<FilterTexts>;
     visibilityConfig?: {
         isStepCardHeaderVisible?: boolean;
     };

package/dist/components/ExpressionItem/DraggableExpressionItem.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ExpressionItemProps } from './ExpressionItem.types';
+export declare const DraggableExpressionItem: ({ expressionsOrder, expression, index: sortableIndex, ...rest }: ExpressionItemProps & {
+    index?: number;
+}) => React.JSX.Element;

package/dist/components/ExpressionItem/DraggableExpressionItem.js

@@ -0,0 +1,34 @@
+var _excluded = ["expressionsOrder", "expression", "index"];
+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); }
+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; }
+import React, { useEffect, useState } from 'react';
+import { useDndMonitor, arrayMove } from '@synerise/ds-sortable';
+import { ExpressionItem } from './ExpressionItem';
+export var DraggableExpressionItem = function DraggableExpressionItem(_ref) {
+  var expressionsOrder = _ref.expressionsOrder,
+    expression = _ref.expression,
+    sortableIndex = _ref.index,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(expressionsOrder.indexOf(expression.id)),
+    dragIndex = _useState[0],
+    setDragIndex = _useState[1];
+  useEffect(function () {
+    setDragIndex(expressionsOrder.indexOf(expression.id));
+  }, [expressionsOrder, expression.id]);
+  useDndMonitor({
+    onDragMove: function onDragMove(event) {
+      var _event$over;
+      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) {
+        var _event$active$data$cu, _event$over2;
+        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);
+        setDragIndex(tempOrder.indexOf(expression.id));
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(ExpressionItem, _extends({
+    isDragOverlay: sortableIndex === -1,
+    dragIndex: dragIndex,
+    expression: expression,
+    expressionsOrder: expressionsOrder
+  }, rest));
+};

package/dist/components/ExpressionItem/ExpressionItem.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ExpressionItemProps } from './ExpressionItem.types';
+export declare const ExpressionItem: ({ handleTransitionEnd, dragHandleProps, isDragged, isDragOverlay, expression, readOnly, handleMouseDown, isLast, stepProps, logicProps, wrapperRef, expressionIndex, dragIndex, expressionsOrder, }: ExpressionItemProps) => React.JSX.Element;

package/dist/components/ExpressionItem/ExpressionItem.js

@@ -0,0 +1,45 @@
+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); }
+import React from 'react';
+import Logic from '@synerise/ds-logic';
+import StepCard from '@synerise/ds-step-card';
+import * as S from '../../Filter.styles';
+import { isStepType } from '../../utils';
+export var ExpressionItem = function ExpressionItem(_ref) {
+  var handleTransitionEnd = _ref.handleTransitionEnd,
+    dragHandleProps = _ref.dragHandleProps,
+    isDragged = _ref.isDragged,
+    isDragOverlay = _ref.isDragOverlay,
+    expression = _ref.expression,
+    readOnly = _ref.readOnly,
+    handleMouseDown = _ref.handleMouseDown,
+    isLast = _ref.isLast,
+    stepProps = _ref.stepProps,
+    logicProps = _ref.logicProps,
+    wrapperRef = _ref.wrapperRef,
+    expressionIndex = _ref.expressionIndex,
+    dragIndex = _ref.dragIndex,
+    expressionsOrder = _ref.expressionsOrder;
+  var data = expression.data,
+    id = expression.id;
+  var shouldRenderLogic = isStepType(expression) && expression.logic && !isLast && !isDragged && !isDragOverlay && expressionIndex !== -1;
+  return /*#__PURE__*/React.createElement(S.ExpressionWrapper, {
+    "data-testid": "condition-step",
+    onTransitionEnd: handleTransitionEnd,
+    ref: wrapperRef,
+    key: id,
+    onMouseDown: handleMouseDown
+  }, /*#__PURE__*/React.createElement(StepCard, _extends({
+    expressionIndex: expressionIndex,
+    expressionCount: expressionsOrder.length
+  }, data, stepProps, {
+    readOnly: readOnly,
+    dragHandleProps: dragHandleProps,
+    isDragged: isDragged,
+    isDragOverlay: isDragOverlay,
+    dragIndex: dragIndex
+  })), shouldRenderLogic && /*#__PURE__*/React.createElement(S.LogicWrapper, {
+    "data-testid": "condition-logic"
+  }, /*#__PURE__*/React.createElement(Logic, _extends({}, logicProps, expression.logic.data, {
+    readOnly: readOnly
+  }))));
+};

package/dist/components/ExpressionItem/ExpressionItem.types.d.ts

@@ -0,0 +1,27 @@
+import type { MouseEventHandler, ReactNode, TransitionEventHandler } from 'react';
+import type { LogicProps } from '@synerise/ds-logic';
+import type { StepCardProps } from '@synerise/ds-step-card';
+import type { DragHandlePropType } from '@synerise/ds-sortable';
+import type { Expression } from '../../Filter.types';
+export type ExpressionItemProps = {
+    handleTransitionEnd: TransitionEventHandler;
+    id: string | number;
+    expression: Expression;
+    isLast?: boolean;
+    dragIndex?: number;
+    expressionsOrder: (string | number)[];
+    readOnly?: boolean;
+    stepProps: Partial<StepCardProps>;
+    logicProps: Partial<LogicProps>;
+    expressionIndex: number;
+    dropLabel: string;
+    renderHeaderRightSide?: (index: number) => ReactNode;
+    handleMouseDown?: MouseEventHandler<HTMLDivElement>;
+    wrapperRef: (node: HTMLDivElement) => void;
+} & SortableItemProps;
+export type SortableItemProps = {
+    dragHandleProps?: DragHandlePropType;
+    isDragged?: boolean;
+    isDragOverlay?: boolean;
+    isGrabbed?: boolean;
+};

package/dist/components/ExpressionItem/ExpressionItem.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ExpressionItem/index.d.ts

@@ -0,0 +1,3 @@
+export { DraggableExpressionItem } from './DraggableExpressionItem';
+export { ExpressionItem } from './ExpressionItem';
+export type { ExpressionItemProps } from './ExpressionItem.types';

package/dist/components/ExpressionItem/index.js

@@ -0,0 +1,2 @@
+export { DraggableExpressionItem } from './DraggableExpressionItem';
+export { ExpressionItem } from './ExpressionItem';

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+import type { Expression, StepType } from './Filter.types';
+export declare const isStepType: (expression: Expression) => expression is StepType;

package/dist/utils.js

@@ -0,0 +1,3 @@
+export var isStepType = function isStepType(expression) {
+  return expression.type === 'STEP';
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-filter",
-  "version": "1.0.10",
+  "version": "1.1.0",
   "description": "Filter UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,12 +34,11 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.3.2",
-    "@synerise/ds-logic": "^1.0.9",
-    "@synerise/ds-step-card": "^1.0.10",
-    "@synerise/ds-utils": "^1.1.1",
-    "react-sortablejs": "^6.0.0",
-    "sortablejs": "1.15.1"
+    "@synerise/ds-button": "^1.3.3",
+    "@synerise/ds-logic": "^1.1.0",
+    "@synerise/ds-sortable": "^1.2.0",
+    "@synerise/ds-step-card": "^1.1.0",
+    "@synerise/ds-utils": "^1.2.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -47,5 +46,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "12eaee0c6431aac9a7b2dbc42e0f8567b3de7244"
+  "gitHead": "93bc81d59d20bc8f3bc80c5d56ae7f7c0838380d"
 }