@elvia/elvis-tooltip - npm Package Compare versions

Comparing version 1.3.3 to 1.3.4

CHANGELOG.json

 {
+  "name": "elvis-tooltip",
   "$schema": "../../changelogSchema.json",
   "content": [
     {
+      "date": "14.05.24",
+      "version": "1.3.4",
+      "changelog": [
+        {
+          "type": "patch",
+          "changes": [
+            "Now using <code>@floating-ui</code> to position the tooltip.",
+            "There is a minor DOM change inside the tooltip content, so if you have used the <code>inlineStyle</code> or <code>className</code> props there may be a need to update them."
+          ]
+        }
+      ]
+    },
+    {
       "date": "26.02.24",
@@ -6,0 +20,0 @@ "version": "1.3.3",

dist/react/elvia-tooltip.js

 // components/elvis-tooltip/src/react/elvia-tooltip.tsx
-import { TooltipPopup, isSsr, useConnectedOverlay, useSlot } from "@elvia/elvis-toolbox";
+import { TooltipPopup, isSsr, useSlot } from "@elvia/elvis-toolbox";
+import { FloatingPortal, autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/react";
 import React, { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
 
-// components/elvis-tooltip/src/react/mapPosition.ts
-var mapPositionToVerticalPosition = (position) => {
-  if (position === "left" || position === "right") {
-    return "center";
-  }
-  return position;
-};
-var mapPositionToHorizontalPosition = (position) => {
-  if (position === "bottom" || position === "top") {
-    return "center";
-  }
-  return position;
-};
-
 // components/elvis-tooltip/src/react/styledComponents.tsx
@@ -26,2 +12,6 @@ import styled from "styled-components";
 })`display:inline-block;`;
+var TooltipContent = styled.div.withConfig({
+  displayName: "TooltipContent",
+  componentId: "sc-jdpnf4-1"
+})`display:contents;`;
 
@@ -49,17 +39,22 @@ // components/elvis-tooltip/src/react/elvia-tooltip.tsx
   const [fadeOut, setFadeOut] = useState(false);
-  const [actualPosition, setActualPosition] = useState(position);
+  const [isOpen, setIsOpen] = useState(false);
   const {
-    isShowing,
-    setIsShowing,
-    verticalPosition,
-    horizontalPosition,
-    updatePreferredPosition
-  } = useConnectedOverlay(triggerRef, overlayRef, {
-    alignWidths: false,
-    verticalPosition: mapPositionToVerticalPosition(position),
-    horizontalPosition: mapPositionToHorizontalPosition(position),
-    offset: 14
+    refs,
+    floatingStyles,
+    placement
+  } = useFloating({
+    placement: position,
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    elements: {
+      reference: triggerRef.current
+    },
+    middleware: [offset({
+      mainAxis: 14
+    }), flip(), shift()],
+    whileElementsMounted: autoUpdate,
+    transform: false
   });
   useSlot("content", webcomponent, {
-    useEffectDependencies: [isShowing],
+    useEffectDependencies: [isOpen],
     ref: overlayRef
@@ -70,3 +65,3 @@ });
       setFadeOut(false);
-      setIsShowing(true);
+      setIsOpen(true);
     } else {
@@ -77,3 +72,3 @@ window.clearTimeout(timeoutId);
           setFadeOut(false);
-          setIsShowing(true);
+          setIsOpen(true);
         }
@@ -91,3 +86,3 @@ }, delay ? delayAmount.current : 0);
     if (fadeOut) {
-      setIsShowing(false);
+      setIsOpen(false);
     }
@@ -114,34 +109,3 @@ };
   }, [triggerAreaRef, triggerAreaRef?.current, triggerRef, triggerRef?.current]);
-  const getContentMutationObserver = () => {
-    const observer = new MutationObserver(() => {
-      updatePreferredPosition(mapPositionToVerticalPosition(position), mapPositionToHorizontalPosition(position));
-    });
-    if (overlayRef.current) {
-      observer.observe(overlayRef.current, {
-        childList: true,
-        subtree: true,
-        characterData: true,
-        attributes: true
-      });
-    }
-    return observer;
-  };
   useEffect(() => {
-    if (!isShowing) {
-      return;
-    }
-    const observer = getContentMutationObserver();
-    updatePreferredPosition();
-    return () => observer.disconnect();
-  }, [isShowing, position]);
-  useEffect(() => {
-    let newActualPosition = "top";
-    if (horizontalPosition === "left" || horizontalPosition === "right") {
-      newActualPosition = horizontalPosition;
-    } else if (verticalPosition === "bottom") {
-      newActualPosition = verticalPosition;
-    }
-    setActualPosition(newActualPosition);
-  }, [verticalPosition, horizontalPosition]);
-  useEffect(() => {
     delayAmount.current = showDelay;
@@ -157,5 +121,5 @@ }, [showDelay]);
     display
-  }, ref: triggerRef }, trigger), isShowing && !isDisabled && createPortal(/* @__PURE__ */ React.createElement(TooltipPopup, { position: actualPosition, ref: overlayRef, className: className ?? "", style: {
+  }, ref: triggerRef }, trigger), isOpen && !isDisabled && /* @__PURE__ */ React.createElement(FloatingPortal, null, /* @__PURE__ */ React.createElement(TooltipPopup, { position: placement, ref: refs.setFloating, style: floatingStyles, fadeOut, onAnimationEnd, "aria-live": "polite" }, /* @__PURE__ */ React.createElement(TooltipContent, { className: className ?? "", style: {
     ...inlineStyle
-  }, fadeOut, onAnimationEnd, "aria-live": "polite" }, content), document.body));
+  }, ref: overlayRef }, content))));
 };
@@ -162,0 +126,0 @@ export {

dist/react/styledComponents.d.ts

 export declare const TriggerContainer: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TooltipContent: import("styled-components").StyledComponent<"div", any, {}, never>;

package.json

 {
   "name": "@elvia/elvis-tooltip",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "license": "MIT",
   "homepage": "https://design.elvia.io/components/tooltip",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/3lvia/designsystem.git",
+    "directory": "packages/components/components/elvis-tooltip"
+  },
   "source": "src/react/elvia-tooltip.tsx",
@@ -16,2 +21,3 @@ "main": "dist/main/web-component.js",
     "@elvia/elvis-toolbox": "^11.0.0",
+    "@floating-ui/react": "~0.26.13",
     "styled-components": "^5.3.3"
@@ -18,0 +24,0 @@ },

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

16170

decreased by-3.69%

Dependency count

7

increased by16.67%

Number of package files

11

decreased by-8.33%

Lines of code

553

decreased by-3.83%

Dependency changes

• + Added@floating-ui/react@~0.26.13

• + Added@floating-ui/core@1.6.7(transitive)

• + Added@floating-ui/dom@1.6.10(transitive)

• + Added@floating-ui/react@0.26.23(transitive)

• + Added@floating-ui/react-dom@2.1.1(transitive)

• + Added@floating-ui/utils@0.2.7(transitive)

• + Addedtabbable@6.2.0(transitive)