@synerise/ds-filter 0.16.0 → 0.16.1

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.
 
+## [0.16.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.16.0...@synerise/ds-filter@0.16.1) (2024-01-15)
+
+
+### Bug Fixes
+
+* **filter:** fixed zindex issues ([71ce5bc](https://github.com/Synerise/synerise-design/commit/71ce5bcf25f2107fd1b43969d2c255e18c112b47))
+
+
+
+
+
 # [0.16.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.15.21...@synerise/ds-filter@0.16.0) (2023-12-14)
 
 

package/dist/Filter.js

@@ -21,8 +21,9 @@ var component = {
 };
 var TRANSITION_DURATION = 0.5;
 var TRANSITION_DURATION_MAX = 1.5;
-var TOP_TRANSITION_ZINDEX = '10003';
-var BOTTOM_TRANSITION_ZINDEX = '10002';
+var TOP_TRANSITION_ZINDEX = 10003;
+var BOTTOM_TRANSITION_ZINDEX = 10002;
+var DRAGGING_TRANSITION_ZINDEX = 10004;
 
 var rearrangeItems = function rearrangeItems(sourceArray, oldIndex, newIndex) {
   sourceArray.splice(newIndex, 0, sourceArray.splice(oldIndex, 1)[0]);
@@ -71,6 +72,13 @@ var Filter = function Filter(_ref) {
     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 () {
@@ -282,9 +290,6 @@ var Filter = function Filter(_ref) {
       key: expression.id,
       "data-dropLabel": text.dropMeHere,
       index: index,
-      style: !readOnly && isActive(expression) ? {
-        zIndex: 10001
-      } : undefined,
       onMouseDown: function onMouseDown() {
         return setActiveExpressionId(expression.id);
       }
@@ -293,7 +298,7 @@ var Filter = function Filter(_ref) {
     })), expression.logic && index + 1 < expressions.length && /*#__PURE__*/React.createElement(S.LogicWrapper, null, /*#__PURE__*/React.createElement(LogicComponent, _extends({}, expression.logic.data, componentProps(expression.logic, index), {
       readOnly: readOnly
     }))));
-  }, [text.dropMeHere, isActive, componentProps, expressions.length, readOnly]);
+  }, [text.dropMeHere, componentProps, expressions.length, readOnly]);
   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.MatchingWrapper, null, /*#__PURE__*/React.createElement("div", null, matching && /*#__PURE__*/React.createElement(Matching, _extends({}, matching, {
     texts: text.matching,
     readOnly: readOnly

package/dist/Filter.styles.js

@@ -31,9 +31,7 @@ export var LogicWrapper = styled.div.withConfig({
 export var ExpressionWrapper = styled.div.withConfig({
   displayName: "Filterstyles__ExpressionWrapper",
   componentId: "w5f27p-7"
-})(["width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:", ";&.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;", "{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;}}"], function (props) {
-  return 1000 - props.index;
-}, DragIcon, Body, Footer, LogicWrapper, function (props) {
+})(["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;", "{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'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-filter",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "description": "Filter UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,9 +33,9 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.18.9",
-    "@synerise/ds-logic": "^0.8.18",
-    "@synerise/ds-step-card": "^0.10.0",
+    "@synerise/ds-button": "^0.18.10",
+    "@synerise/ds-logic": "^0.8.19",
+    "@synerise/ds-step-card": "^0.10.1",
     "@synerise/ds-utils": "^0.24.23",
     "react-intl": "3.12.0",
     "react-sortablejs": "^6.0.0",
@@ -51,5 +51,5 @@
     "@testing-library/dom": "^7.0.2",
     "@testing-library/jest-dom": "5.1.1"
   },
-  "gitHead": "0a23e5f431033a6180383d3e0e19e885b5a66778"
+  "gitHead": "ba51e38beff83b8adba409f09311131f429ada01"
 }