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

Comparing version 2.0.6 to 2.0.7

build/cjs/Tooltip.js

@@ -21,2 +21,6 @@ "use strict";
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
@@ -31,3 +35,3 @@ mod
 module.exports = __toCommonJS(Tooltip_exports);
-var import_react_dom_interactions = require("@floating-ui/react-dom-interactions");
+var import_react = require("@floating-ui/react");
 var import_jkl_icons_react = require("@fremtind/jkl-icons-react");
@@ -37,30 +41,31 @@ var import_jkl_react_hooks = require("@fremtind/jkl-react-hooks");
 var import_framer_motion = require("framer-motion");
-var import_react = __toESM(require("react"));
+var import_react2 = __toESM(require("react"));
 const Tooltip = ({ content, initialPlacement = "top", className }) => {
   const tooltipId = (0, import_jkl_react_hooks.useId)("jkl-tooltip");
-  const [open, setOpen] = (0, import_react.useState)(false);
-  const [buttonHasFocus, setButtonFocus] = (0, import_react.useState)(false);
-  const arrowElement = (0, import_react.useRef)(null);
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const [buttonHasFocus, setButtonFocus] = (0, import_react2.useState)(false);
+  const arrowElement = (0, import_react2.useRef)(null);
   const {
     x,
     y,
-    reference,
-    floating,
+    refs,
     placement,
     strategy,
     context,
+    isPositioned,
     middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }
-  } = (0, import_react_dom_interactions.useFloating)({
+  } = (0, import_react.useFloating)({
     open,
     onOpenChange: setOpen,
     placement: initialPlacement,
-    middleware: [(0, import_react_dom_interactions.offset)(16), (0, import_react_dom_interactions.flip)(), (0, import_react_dom_interactions.shift)({ padding: 16 }), (0, import_react_dom_interactions.arrow)({ element: arrowElement, padding: 20 })]
+    middleware: [(0, import_react.offset)(16), (0, import_react.flip)(), (0, import_react.shift)({ padding: 16 }), (0, import_react.arrow)({ element: arrowElement, padding: 20 })]
   });
-  const { getReferenceProps, getFloatingProps } = (0, import_react_dom_interactions.useInteractions)([
-    (0, import_react_dom_interactions.useClick)(context),
-    (0, import_react_dom_interactions.useDismiss)(context, { referencePress: false }),
-    (0, import_react_dom_interactions.useFocus)(context, { enabled: open }),
-    (0, import_react_dom_interactions.useRole)(context, { role: "tooltip" })
+  const { getReferenceProps, getFloatingProps } = (0, import_react.useInteractions)([
+    (0, import_react.useClick)(context),
+    (0, import_react.useDismiss)(context, { referencePress: false }),
+    (0, import_react.useFocus)(context, { enabled: open }),
+    // Lukk når fokus flyttes vekk
+    (0, import_react.useRole)(context, { role: "tooltip" })
   ]);
-  return /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_classnames.default)("jkl-tooltip", className) }, /* @__PURE__ */ import_react.default.createElement("span", { className: "jkl-tooltip__wrapper" }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react2.default.createElement("span", { className: (0, import_classnames.default)("jkl-tooltip", className) }, /* @__PURE__ */ import_react2.default.createElement("span", { className: "jkl-tooltip__wrapper" }, /* @__PURE__ */ import_react2.default.createElement(
     "button",
@@ -73,3 +78,3 @@ {
       ...getReferenceProps({
-        ref: reference,
+        ref: refs.setReference,
         onFocus: () => setButtonFocus(true),
@@ -81,5 +86,5 @@ onBlur: () => setButtonFocus(false),
     },
-    /* @__PURE__ */ import_react.default.createElement(import_jkl_icons_react.QuestionIcon, { bold: buttonHasFocus }),
-    /* @__PURE__ */ import_react.default.createElement("span", { className: "jkl-sr-only" }, `${open ? "Skjul" : "Vis"} hjelpetekst`)
-  ), /* @__PURE__ */ import_react.default.createElement(import_framer_motion.AnimatePresence, null, open && /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react2.default.createElement(import_jkl_icons_react.QuestionIcon, { bold: buttonHasFocus }),
+    /* @__PURE__ */ import_react2.default.createElement("span", { className: "jkl-sr-only" }, `${open ? "Skjul" : "Vis"} hjelpetekst`)
+  ), /* @__PURE__ */ import_react2.default.createElement(import_framer_motion.AnimatePresence, null, open && /* @__PURE__ */ import_react2.default.createElement(
     import_framer_motion.motion.span,
@@ -96,11 +101,11 @@ {
         id: tooltipId,
-        ref: floating,
+        ref: refs.setFloating,
         style: {
           position: strategy,
-          top: y != null ? y : "",
-          left: x != null ? x : ""
+          top: isPositioned ? y : "",
+          left: isPositioned ? x : ""
         }
       })
     },
-    /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react2.default.createElement(
       "span",
@@ -110,2 +115,3 @@ {
           whiteSpace: "normal"
+          // Overstyr nowrap satt for å plassere tooltip riktig etter Label
         }
@@ -115,3 +121,3 @@ },
     ),
-    /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react2.default.createElement(
       "span",
@@ -123,4 +129,4 @@ {
         style: {
-          left: arrowX != null ? `${arrowX}px` : "",
-          top: arrowY != null ? `${arrowY}px` : ""
+          left: isPositioned ? `${arrowX}px` : "",
+          top: isPositioned ? `${arrowY}px` : ""
         }
@@ -127,0 +133,0 @@ }

build/esm/Tooltip.js

@@ -12,3 +12,3 @@ import {
   useFocus
-} from "@floating-ui/react-dom-interactions";
+} from "@floating-ui/react";
 import { QuestionIcon } from "@fremtind/jkl-icons-react";
@@ -27,7 +27,7 @@ import { useId } from "@fremtind/jkl-react-hooks";
     y,
-    reference,
-    floating,
+    refs,
     placement,
     strategy,
     context,
+    isPositioned,
     middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }
@@ -44,2 +44,3 @@ } = useFloating({
     useFocus(context, { enabled: open }),
+    // Lukk når fokus flyttes vekk
     useRole(context, { role: "tooltip" })
@@ -55,3 +56,3 @@ ]);
       ...getReferenceProps({
-        ref: reference,
+        ref: refs.setReference,
         onFocus: () => setButtonFocus(true),
@@ -77,7 +78,7 @@ onBlur: () => setButtonFocus(false),
         id: tooltipId,
-        ref: floating,
+        ref: refs.setFloating,
         style: {
           position: strategy,
-          top: y != null ? y : "",
-          left: x != null ? x : ""
+          top: isPositioned ? y : "",
+          left: isPositioned ? x : ""
         }
@@ -91,2 +92,3 @@ })
           whiteSpace: "normal"
+          // Overstyr nowrap satt for å plassere tooltip riktig etter Label
         }
@@ -103,4 +105,4 @@ },
         style: {
-          left: arrowX != null ? `${arrowX}px` : "",
-          top: arrowY != null ? `${arrowY}px` : ""
+          left: isPositioned ? `${arrowX}px` : "",
+          top: isPositioned ? `${arrowY}px` : ""
         }
@@ -107,0 +109,0 @@ }

package.json

 {
     "name": "@fremtind/jkl-tooltip-react",
-    "version": "2.0.6",
+    "version": "2.0.7",
     "publishConfig": {
@@ -40,8 +40,7 @@ "access": "public"
     "dependencies": {
-        "@floating-ui/react-dom": "^1.1.0",
-        "@floating-ui/react-dom-interactions": "^0.12.0",
-        "@fremtind/jkl-core": "^12.0.3",
-        "@fremtind/jkl-icons-react": "^7.1.2",
-        "@fremtind/jkl-react-hooks": "^11.1.1",
-        "@fremtind/jkl-tooltip": "^2.0.3",
+        "@floating-ui/react": "^0.24.0",
+        "@fremtind/jkl-core": "^12.0.4",
+        "@fremtind/jkl-icons-react": "^7.1.3",
+        "@fremtind/jkl-react-hooks": "^11.1.2",
+        "@fremtind/jkl-tooltip": "^2.0.4",
         "classnames": "^2.3.2",
@@ -63,3 +62,3 @@ "framer-motion": "^7.10.3"
     },
-    "gitHead": "7fac44c96089a5dc5146d83def9594f89f84850c"
+    "gitHead": "783b82fc02974a12c277d0a3b28e53c33403ae90"
 }

No alert changes

Improved metrics

Total package byte prevSize

29277

increased by5.36%

Dependency count

11

decreased by-8.33%

Number of package files

15

increased by15.38%

Lines of code

308

increased by14.07%

Dependency changes

• + Added@floating-ui/react@^0.24.0

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

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

• - Removed@floating-ui/react-dom@^1.1.0

• - Removed@floating-ui/react-dom-interactions@^0.12.0

• - Removed@floating-ui/react-dom@1.3.0(transitive)

• - Removed@floating-ui/react-dom-interactions@0.12.0(transitive)

• Updated@fremtind/jkl-core@^12.0.4

• Updated@fremtind/jkl-icons-react@^7.1.3

• Updated@fremtind/jkl-react-hooks@^11.1.2

• Updated@fremtind/jkl-tooltip@^2.0.4