@warp-ds/core - npm Package Compare versions

Comparing version 1.1.5 to 1.1.6

dist/attention/utils/helpers.js

@@ -1,2 +0,2 @@
-import { computePosition, flip, offset, arrow, autoUpdate, hide } from '@floating-ui/dom';
+import { computePosition, flip, offset, arrow, autoUpdate, hide, shift } from '@floating-ui/dom';
 const TOP_START = 'top-start';
@@ -103,2 +103,3 @@ const TOP = 'top';
             !state?.noArrow && state?.arrowEl && arrow({ element: state?.arrowEl }),
+            state?.flip && shift({ crossAxis: true }),
             hide(), // will hide the attentionEl when it appears detached from the targetEl. Can be called multiple times in the middleware-array if you want to use several strategies. Default strategy is 'referenceHidden'.
@@ -122,33 +123,12 @@ ],
         }
-        const isRtl = window.getComputedStyle(attentionEl).direction === 'rtl'; // checks whether the text direction of the attentionEl is right-to-left. Helps to calculate the position of the arrowEl and ensure proper alignment
-        const arrowPlacement = arrowDirection(placement).split('-')[1];
         if (middlewareData?.arrow && state?.arrowEl) {
             const arrowEl = state?.arrowEl;
             const { x: arrowX, y: arrowY } = middlewareData.arrow;
-            let top = '';
-            let right = '';
-            let bottom = '';
-            let left = '';
-            // calculates the arrow-position depending on if placement has 'start' or 'end':
-            if (arrowPlacement === 'start') {
-                const value = typeof arrowX === 'number' ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : '';
-                top = typeof arrowY === 'number' ? `calc(24px -  ${arrowEl.offsetWidth / 2}px)` : '';
-                right = isRtl ? value : '';
-                left = isRtl ? '' : value;
-            }
-            else if (arrowPlacement === 'end') {
-                const value = typeof arrowX === 'number' ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : '';
-                right = isRtl ? '' : value;
-                left = isRtl ? value : '';
-                bottom = typeof arrowY === 'number' ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : '';
-            }
-            else {
-                left = typeof arrowX === 'number' ? `${arrowX}px` : '';
-                top = typeof arrowY === 'number' ? `${arrowY}px` : '';
-            }
+            const { x: shiftX } = middlewareData.shift || {}; // Get the shift value if it exists
+            // Adjust the arrow based on the cross-axis shift
+            let left = typeof arrowX === 'number' ? `${arrowX - (shiftX || 0)}px` : '';
+            let top = typeof arrowY === 'number' ? `${arrowY}px` : '';
             Object.assign(arrowEl.style, {
+                left,
                 top,
-                right,
-                bottom,
-                left,
             });
@@ -155,0 +135,0 @@ applyArrowStyles(arrowEl, arrowRotation(placement), placement);

package.json

@@ -5,3 +5,3 @@ {
   "description": "Shared business logic for JS implementations of Warp Design System",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "type": "module",
@@ -8,0 +8,0 @@ "exports": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

29706

decreased by-3.47%

Lines of code

398

decreased by-4.78%

No dependency changes