@synerise/ds-filter 1.2.57 → 1.2.58

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.58](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@1.2.57...@synerise/ds-filter@1.2.58) (2026-07-08)
+
+### Bug Fixes
+
+- guard ds-filter move animation against null refs ([e4eb699](https://github.com/Synerise/synerise-design/commit/e4eb699641cb62f585d0b8f27f0feac563fb2786))
+
 ## [1.2.57](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@1.2.56...@synerise/ds-filter@1.2.57) (2026-06-17)
 
 **Note:** Version bump only for package @synerise/ds-filter

package/dist/Filter.js

@@ -45,40 +45,47 @@ const Filter = ({
   const expressionRefs = useRef({});
   const movedExpressionId = useRef(null);
   useEffect(() => {
-    if (movedExpressionId.current && previousExpressions?.length) {
-      const oldIndex = previousExpressions?.findIndex((expression) => {
-        return expression.id === movedExpressionId.current;
-      });
-      const newIndex = expressions?.findIndex((expression) => {
-        return expression.id === movedExpressionId.current;
-      });
-      if (oldIndex !== void 0 && oldIndex !== newIndex) {
-        const sign = oldIndex < newIndex ? 1 : -1;
-        const low = Math.min(oldIndex, newIndex);
-        const high = Math.max(oldIndex, newIndex);
-        const movedExpressionHeight = sign * expressionRefs.current[movedExpressionId.current].getBoundingClientRect().height;
-        let expressionOffset = 0;
-        const movedCardTransformDuration = Math.min((high - low) * TRANSITION_DURATION, TRANSITION_DURATION_MAX);
-        expressions.forEach((expression, index) => {
-          if (expression.id !== movedExpressionId.current && index >= low && index <= high) {
-            expressionOffset += expressionRefs.current[expression.id].getBoundingClientRect().height;
-            expressionRefs.current[expression.id].style.transition = "";
-            expressionRefs.current[expression.id].style.zIndex = BOTTOM_TRANSITION_ZINDEX;
-            expressionRefs.current[expression.id].style.transform = `translateY(${movedExpressionHeight}px)`;
-          }
-        });
-        expressionRefs.current[movedExpressionId.current].style.transition = "";
-        expressionRefs.current[movedExpressionId.current].style.zIndex = TOP_TRANSITION_ZINDEX;
-        expressionRefs.current[movedExpressionId.current].style.transform = `translateY(${-sign * expressionOffset}px)`;
-        requestAnimationFrame(() => {
-          expressions.forEach((expression) => {
-            expressionRefs.current[expression.id].style.transition = `transform ${expression.id === movedExpressionId.current ? movedCardTransformDuration : TRANSITION_DURATION}s`;
-            expressionRefs.current[expression.id].style.transform = "";
-          });
-          movedExpressionId.current = null;
-        });
-      }
+    if (!movedExpressionId.current || !previousExpressions?.length) {
+      return;
+    }
+    const movedId = movedExpressionId.current;
+    const oldIndex = previousExpressions.findIndex((expression) => expression.id === movedId);
+    const newIndex = expressions.findIndex((expression) => expression.id === movedId);
+    const movedElement = expressionRefs.current[movedId];
+    if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex || !movedElement) {
+      movedExpressionId.current = null;
+      return;
     }
+    const sign = oldIndex < newIndex ? 1 : -1;
+    const low = Math.min(oldIndex, newIndex);
+    const high = Math.max(oldIndex, newIndex);
+    const movedExpressionHeight = sign * movedElement.getBoundingClientRect().height;
+    let expressionOffset = 0;
+    const movedCardTransformDuration = Math.min((high - low) * TRANSITION_DURATION, TRANSITION_DURATION_MAX);
+    expressions.forEach((expression, index) => {
+      const element = expressionRefs.current[expression.id];
+      if (!element || expression.id === movedId || index < low || index > high) {
+        return;
+      }
+      expressionOffset += element.getBoundingClientRect().height;
+      element.style.transition = "";
+      element.style.zIndex = BOTTOM_TRANSITION_ZINDEX;
+      element.style.transform = `translateY(${movedExpressionHeight}px)`;
+    });
+    movedElement.style.transition = "";
+    movedElement.style.zIndex = TOP_TRANSITION_ZINDEX;
+    movedElement.style.transform = `translateY(${-sign * expressionOffset}px)`;
+    requestAnimationFrame(() => {
+      expressions.forEach((expression) => {
+        const element = expressionRefs.current[expression.id];
+        if (!element) {
+          return;
+        }
+        element.style.transition = `transform ${expression.id === movedId ? movedCardTransformDuration : TRANSITION_DURATION}s`;
+        element.style.transform = "";
+      });
+      movedExpressionId.current = null;
+    });
   });
   useEffect(() => {
     if (previousExpressions && expressions.length > previousExpressions.length) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-filter",
-  "version": "1.2.57",
+  "version": "1.2.58",
   "description": "Filter UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -54,5 +54,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "d8c64070f58f14e3fb1bfbcbf00d1e3b8fd51eb8"
+  "gitHead": "5452c886c6a70cc2847fdb50ccf376dfb93916e5"
 }