@fremtind/jkl-tooltip-react - npm Package Compare versions

Comparing version 4.4.7 to 4.5.0

build/cjs/Tooltip.js

@@ -58,3 +58,3 @@ "use strict";
       (0, import_react.shift)({ padding: 16 }),
-      (0, import_react.arrow)({ element: arrowElement, padding: 20 })
+      (0, import_react.arrow)({ element: arrowElement, padding: 8 })
     ]
@@ -61,0 +61,0 @@ });

build/cjs/TooltipContent.js

@@ -38,29 +38,16 @@ "use strict";
 var import_classnames = __toESM(require("classnames"));
-var import_framer_motion = require("framer-motion");
 var import_react2 = __toESM(require("react"));
 var import_Tooltip = require("./Tooltip");
-function getPositionAnimation(placement, value = 8) {
-  switch (true) {
-    case placement.startsWith("top"):
-      return {
-        top: value
-      };
-    case placement.startsWith("left"):
-      return {
-        left: value,
-        right: -value
-      };
-    case placement.startsWith("bottom"):
-      return {
-        top: -value
-      };
-    case placement.startsWith("right"):
-      return {
-        left: -value,
-        right: value
-      };
+function getTranslation(side, value = 0) {
+  switch (side) {
+    case "top":
+      return "0 ".concat(value, "px");
+    case "left":
+      return "".concat(value, "px 0");
+    case "bottom":
+      return "0 ".concat(-value, "px");
+    case "right":
+      return "".concat(-value, "px 0");
     default:
-      return {
-        top: value
-      };
+      return "0 ".concat(value, "px");
   }
@@ -70,9 +57,7 @@ }
   const {
+    context,
     triggerOn,
     arrowElement,
-    isOpen,
     getFloatingProps,
     placement,
-    isPositioned,
-    middlewareData: { arrow },
     floatingStyles,
@@ -83,6 +68,28 @@ refs
   const contentId = (0, import_jkl_react_hooks.useId)("jkl-tooltip-content");
+  const { prefersReducedMotion } = (0, import_jkl_react_hooks.useBrowserPreferences)();
+  const { isMounted, styles: animationStyles } = (0, import_react.useTransitionStyles)(
+    context,
+    {
+      duration: {
+        open: prefersReducedMotion ? 0 : 250,
+        close: prefersReducedMotion ? 0 : 150
+      },
+      initial: ({ side }) => ({
+        opacity: 0,
+        translate: getTranslation(side, 5)
+      }),
+      open: ({ side }) => ({
+        opacity: 1,
+        translate: getTranslation(side, 0)
+      }),
+      close: ({ side }) => ({
+        opacity: 0,
+        translate: getTranslation(side, -5)
+      })
+    }
+  );
   const { density, theme } = (0, import_jkl_core.getThemeAndDensity)(
     refs.reference.current
   );
-  return /* @__PURE__ */ import_react2.default.createElement(import_react.FloatingPortal, null, /* @__PURE__ */ import_react2.default.createElement(import_framer_motion.LazyMotion, { features: import_framer_motion.domAnimation }, /* @__PURE__ */ import_react2.default.createElement(import_framer_motion.AnimatePresence, null, triggerOn === "hover" && /* @__PURE__ */ import_react2.default.createElement(
+  return /* @__PURE__ */ import_react2.default.createElement(import_react.FloatingPortal, null, triggerOn === "hover" && /* @__PURE__ */ import_react2.default.createElement(
     "span",
@@ -95,26 +102,11 @@ {
     children
-  ), isOpen && /* @__PURE__ */ import_react2.default.createElement("span", { className: "jkl", key: "".concat(contentId, "-wrapper") }, /* @__PURE__ */ import_react2.default.createElement(
-    import_framer_motion.m.span,
+  ), isMounted && /* @__PURE__ */ import_react2.default.createElement("span", { className: "jkl", key: "".concat(contentId, "-wrapper") }, /* @__PURE__ */ import_react2.default.createElement(
+    "span",
     {
       key: contentId,
       ref,
-      initial: {
-        opacity: 0,
-        ...getPositionAnimation(placement, 5)
-      },
-      animate: {
-        opacity: 1,
-        ...getPositionAnimation(placement, 0)
-      },
-      exit: {
-        opacity: 0,
-        ...getPositionAnimation(placement, -5),
-        transition: {
-          ease: "easeIn",
-          duration: 0.15
-        }
-      },
-      transition: { ease: "easeOut", duration: 0.25 },
       "data-placement": placement,
       "aria-live": triggerOn === "click" ? "assertive" : void 0,
+      "data-theme": theme,
+      "data-layout-density": density,
       className: (0, import_classnames.default)("jkl-tooltip-content", className),
@@ -125,21 +117,17 @@ ...getFloatingProps({
       }),
-      style: { ...floatingStyles },
-      "data-theme": theme,
-      "data-layout-density": density
+      style: { ...floatingStyles, ...animationStyles }
     },
     children,
     /* @__PURE__ */ import_react2.default.createElement(
-      "span",
+      import_react.FloatingArrow,
       {
-        "aria-hidden": true,
-        className: "jkl-tooltip-content__arrow",
+        context,
         ref: arrowElement,
-        style: {
-          left: isPositioned ? "".concat(arrow == null ? void 0 : arrow.x, "px") : "",
-          top: isPositioned ? "".concat(arrow == null ? void 0 : arrow.y, "px") : ""
-        }
+        width: 24,
+        height: 12,
+        fill: "var(--background-color)"
       }
     )
-  )))));
+  )));
 });
 //# sourceMappingURL=TooltipContent.js.map

build/cjs/TooltipTrigger.js

@@ -51,6 +51,9 @@ "use strict";
     };
+    const filterMaterialSymbols = (maybeText) => {
+      return maybeText == null ? void 0 : maybeText.replaceAll(/[\ue003-\uf8aa]/g, "");
+    };
     const ariaLabel = [
       (_a = refs.reference.current) == null ? void 0 : _a.textContent,
       (_b = refs.description.current) == null ? void 0 : _b.textContent
-    ].filter(Boolean).join(". ");
+    ].map(filterMaterialSymbols).filter(Boolean).join(". ");
     if (import_react2.default.isValidElement(children)) {
@@ -57,0 +60,0 @@ return import_react2.default.cloneElement(

build/esm/Tooltip.js

@@ -35,3 +35,3 @@ import {
       shift({ padding: 16 }),
-      arrow({ element: arrowElement, padding: 20 })
+      arrow({ element: arrowElement, padding: 8 })
     ]
@@ -38,0 +38,0 @@ });

build/esm/TooltipContent.js

 import {
+  FloatingArrow,
+  FloatingPortal,
   useMergeRefs,
-  FloatingPortal
+  useTransitionStyles
 } from "@floating-ui/react";
 import { getThemeAndDensity } from "@fremtind/jkl-core";
-import { useId } from "@fremtind/jkl-react-hooks";
+import { useBrowserPreferences, useId } from "@fremtind/jkl-react-hooks";
 import cn from "classnames";
-import { AnimatePresence, LazyMotion, domAnimation, m } from "framer-motion";
 import React, { forwardRef } from "react";
 import { useTooltipContext } from "./Tooltip";
-function getPositionAnimation(placement, value = 8) {
-  switch (true) {
-    case placement.startsWith("top"):
-      return {
-        top: value
-      };
-    case placement.startsWith("left"):
-      return {
-        left: value,
-        right: -value
-      };
-    case placement.startsWith("bottom"):
-      return {
-        top: -value
-      };
-    case placement.startsWith("right"):
-      return {
-        left: -value,
-        right: value
-      };
+function getTranslation(side, value = 0) {
+  switch (side) {
+    case "top":
+      return "0 ".concat(value, "px");
+    case "left":
+      return "".concat(value, "px 0");
+    case "bottom":
+      return "0 ".concat(-value, "px");
+    case "right":
+      return "".concat(-value, "px 0");
     default:
-      return {
-        top: value
-      };
+      return "0 ".concat(value, "px");
   }
@@ -39,9 +28,7 @@ }
   const {
+    context,
     triggerOn,
     arrowElement,
-    isOpen,
     getFloatingProps,
     placement,
-    isPositioned,
-    middlewareData: { arrow },
     floatingStyles,
@@ -52,6 +39,28 @@ refs
   const contentId = useId("jkl-tooltip-content");
+  const { prefersReducedMotion } = useBrowserPreferences();
+  const { isMounted, styles: animationStyles } = useTransitionStyles(
+    context,
+    {
+      duration: {
+        open: prefersReducedMotion ? 0 : 250,
+        close: prefersReducedMotion ? 0 : 150
+      },
+      initial: ({ side }) => ({
+        opacity: 0,
+        translate: getTranslation(side, 5)
+      }),
+      open: ({ side }) => ({
+        opacity: 1,
+        translate: getTranslation(side, 0)
+      }),
+      close: ({ side }) => ({
+        opacity: 0,
+        translate: getTranslation(side, -5)
+      })
+    }
+  );
   const { density, theme } = getThemeAndDensity(
     refs.reference.current
   );
-  return /* @__PURE__ */ React.createElement(FloatingPortal, null, /* @__PURE__ */ React.createElement(LazyMotion, { features: domAnimation }, /* @__PURE__ */ React.createElement(AnimatePresence, null, triggerOn === "hover" && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(FloatingPortal, null, triggerOn === "hover" && /* @__PURE__ */ React.createElement(
     "span",
@@ -64,26 +73,11 @@ {
     children
-  ), isOpen && /* @__PURE__ */ React.createElement("span", { className: "jkl", key: "".concat(contentId, "-wrapper") }, /* @__PURE__ */ React.createElement(
-    m.span,
+  ), isMounted && /* @__PURE__ */ React.createElement("span", { className: "jkl", key: "".concat(contentId, "-wrapper") }, /* @__PURE__ */ React.createElement(
+    "span",
     {
       key: contentId,
       ref,
-      initial: {
-        opacity: 0,
-        ...getPositionAnimation(placement, 5)
-      },
-      animate: {
-        opacity: 1,
-        ...getPositionAnimation(placement, 0)
-      },
-      exit: {
-        opacity: 0,
-        ...getPositionAnimation(placement, -5),
-        transition: {
-          ease: "easeIn",
-          duration: 0.15
-        }
-      },
-      transition: { ease: "easeOut", duration: 0.25 },
       "data-placement": placement,
       "aria-live": triggerOn === "click" ? "assertive" : void 0,
+      "data-theme": theme,
+      "data-layout-density": density,
       className: cn("jkl-tooltip-content", className),
@@ -94,20 +88,16 @@ ...getFloatingProps({
       }),
-      style: { ...floatingStyles },
-      "data-theme": theme,
-      "data-layout-density": density
+      style: { ...floatingStyles, ...animationStyles }
     },
     children,
     /* @__PURE__ */ React.createElement(
-      "span",
+      FloatingArrow,
       {
-        "aria-hidden": true,
-        className: "jkl-tooltip-content__arrow",
+        context,
         ref: arrowElement,
-        style: {
-          left: isPositioned ? "".concat(arrow == null ? void 0 : arrow.x, "px") : "",
-          top: isPositioned ? "".concat(arrow == null ? void 0 : arrow.y, "px") : ""
-        }
+        width: 24,
+        height: 12,
+        fill: "var(--background-color)"
       }
     )
-  )))));
+  )));
 });
@@ -114,0 +104,0 @@ export {

build/esm/TooltipTrigger.js

@@ -18,6 +18,9 @@ import { useMergeRefs } from "@floating-ui/react";
     };
+    const filterMaterialSymbols = (maybeText) => {
+      return maybeText == null ? void 0 : maybeText.replaceAll(/[\ue003-\uf8aa]/g, "");
+    };
     const ariaLabel = [
       (_a = refs.reference.current) == null ? void 0 : _a.textContent,
       (_b = refs.description.current) == null ? void 0 : _b.textContent
-    ].filter(Boolean).join(". ");
+    ].map(filterMaterialSymbols).filter(Boolean).join(". ");
     if (React.isValidElement(children)) {
@@ -24,0 +27,0 @@ return React.cloneElement(

build/Tooltip.d.ts

@@ -72,3 +72,3 @@ import { type Placement } from "@floating-ui/react";
     setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-    arrowElement: React.RefObject<HTMLElement>;
+    arrowElement: React.RefObject<SVGSVGElement>;
 };
@@ -121,4 +121,4 @@ export type TooltipContext = ReturnType<typeof useTooltip> | null;
     setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-    arrowElement: React.RefObject<HTMLElement>;
+    arrowElement: React.RefObject<SVGSVGElement>;
 };
 export declare const Tooltip: FC<TooltipProps & WithChildren>;

package.json

 {
     "name": "@fremtind/jkl-tooltip-react",
-    "version": "4.4.7",
+    "version": "4.5.0",
     "publishConfig": {
@@ -44,5 +44,4 @@ "access": "public"
         "@fremtind/jkl-react-hooks": "^12.2.8",
-        "@fremtind/jkl-tooltip": "^4.2.9",
-        "classnames": "^2.3.2",
-        "framer-motion": ">7.10.3 <12"
+        "@fremtind/jkl-tooltip": "^4.3.0",
+        "classnames": "^2.3.2"
     },
@@ -62,3 +61,3 @@ "peerDependencies": {
     },
-    "gitHead": "2b977a9107f2eeb14786557ece1a1e5f98450bed"
+    "gitHead": "bc77dad78d2c2cd2f749099653d5d0ee98ce3e2e"
 }

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

Dependency count

10

decreased by-9.09%

Worsened metrics

Total package byte prevSize

75669

decreased by-3.87%

Lines of code

931

decreased by-1.79%

Dependency changes

• - Removedframer-motion@>7.10.3 <12

• - Removedframer-motion@11.11.17(transitive)

• Updated@fremtind/jkl-tooltip@^4.3.0