@warp-ds/core - npm Package Compare versions

Comparing version 1.1.6 to 1.1.7

dist/attention/utils/helpers.js

@@ -1,2 +0,2 @@
-import { computePosition, flip, offset, arrow, autoUpdate, hide, shift } from '@floating-ui/dom';
+import { computePosition, flip, offset, arrow, autoUpdate, hide, shift, size } from '@floating-ui/dom';
 const TOP_START = 'top-start';
@@ -82,2 +82,4 @@ const TOP = 'top';
 };
+const ELEMENT_PADDING = 8;
+const ARROW_OFFSET = 24;
 export async function useRecompute(state) {
@@ -104,4 +106,13 @@ if (!state?.isShowing)
             !state?.noArrow && state?.arrowEl && arrow({ element: state?.arrowEl }),
-            state?.flip && shift({ crossAxis: true }),
+            state?.flip && shift({ crossAxis: true }), // shifts the attentionEl to make sure that it stays in view
             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'.
+            size({
+                apply() {
+                    // Apply equal padding to the left and right sides of the attentionEl to prevent it from overflowing the viewport on smaller screens.
+                    Object.assign(attentionEl.style, {
+                        paddingRight: `${ELEMENT_PADDING}px`,
+                        paddingLeft: `${ELEMENT_PADDING}px`,
+                    });
+                },
+            }),
         ],
@@ -118,2 +129,3 @@ }).then(({ x, y, middlewareData, placement }) => {
         }
+        // Handle visibility based on hide middleware
         if (middlewareData?.hide && !state?.isCallout) {
@@ -125,13 +137,40 @@ const { referenceHidden } = middlewareData.hide;
         }
+        // Arrow position adjustment
         if (middlewareData?.arrow && state?.arrowEl) {
             const arrowEl = state?.arrowEl;
             const { x: arrowX, y: arrowY } = middlewareData.arrow;
-            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` : '';
+            const isRtl = window.getComputedStyle(attentionEl).direction === 'rtl'; // Checks RTL for proper arrow alignment
+            const arrowPlacement = arrowDirection(placement).split('-')[1];
+            let top = '', right = '', bottom = '', left = '';
+            // Adjust based on 'start' or 'end' placements
+            if (arrowPlacement === 'start') {
+                const value = typeof arrowX === 'number' ? `calc(${ARROW_OFFSET}px - ${arrowEl.offsetWidth / 2}px)` : '';
+                top = typeof arrowY === 'number' ? `calc(${ARROW_OFFSET}px - ${arrowEl.offsetWidth / 2}px)` : '';
+                right = isRtl ? value : '';
+                left = isRtl ? '' : value;
+            }
+            else if (arrowPlacement === 'end') {
+                const value = typeof arrowX === 'number' ? `calc(${ARROW_OFFSET}px - ${arrowEl.offsetWidth / 2}px)` : '';
+                right = isRtl ? '' : value;
+                left = isRtl ? value : '';
+                bottom = typeof arrowY === 'number' ? `calc(${ARROW_OFFSET}px - ${arrowEl.offsetWidth / 2}px)` : '';
+            }
+            else {
+                // Default positioning with no 'start' or 'end'
+                left = typeof arrowX === 'number' ? `${arrowX}px` : '';
+                top = typeof arrowY === 'number' ? `${arrowY}px` : '';
+            }
+            // Adjust for shift if applied
+            const { x: shiftX } = middlewareData.shift || {};
+            if (typeof shiftX === 'number') {
+                left = typeof arrowX === 'number' ? `${arrowX - shiftX}px` : left;
+            }
+            // Apply the arrow styles
             Object.assign(arrowEl.style, {
+                top,
+                right,
+                bottom,
                 left,
-                top,
             });
+            // Apply arrow rotation styles
             applyArrowStyles(arrowEl, arrowRotation(placement), placement);
@@ -138,0 +177,0 @@ }

package.json

@@ -5,3 +5,3 @@ {
   "description": "Shared business logic for JS implementations of Warp Design System",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "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

Improved metrics

Total package byte prevSize

31743

increased by6.86%

Lines of code

437

increased by9.8%

No dependency changes