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

Comparing version 2.0.18 to 3.0.0

./build/cjs/index.js

@@ -21,6 +21,12 @@ "use strict";
 __export(src_exports, {
-  Tooltip: () => import_Tooltip.Tooltip
+  PopupTip: () => import_PopupTip.PopupTip,
+  Tooltip: () => import_Tooltip.Tooltip,
+  TooltipContent: () => import_TooltipContent.TooltipContent,
+  TooltipTrigger: () => import_TooltipTrigger.TooltipTrigger
 });
 module.exports = __toCommonJS(src_exports);
 var import_Tooltip = require("./Tooltip");
+var import_TooltipContent = require("./TooltipContent");
+var import_TooltipTrigger = require("./TooltipTrigger");
+var import_PopupTip = require("./PopupTip");
 //# sourceMappingURL=index.js.map

./build/esm/index.js

 import { Tooltip } from "./Tooltip";
+import { TooltipContent } from "./TooltipContent";
+import { TooltipTrigger } from "./TooltipTrigger";
+import { PopupTip } from "./PopupTip";
 export {
-  Tooltip
+  PopupTip,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
 };
 //# sourceMappingURL=index.js.map

build/cjs/index.js

@@ -21,6 +21,12 @@ "use strict";
 __export(src_exports, {
-  Tooltip: () => import_Tooltip.Tooltip
+  PopupTip: () => import_PopupTip.PopupTip,
+  Tooltip: () => import_Tooltip.Tooltip,
+  TooltipContent: () => import_TooltipContent.TooltipContent,
+  TooltipTrigger: () => import_TooltipTrigger.TooltipTrigger
 });
 module.exports = __toCommonJS(src_exports);
 var import_Tooltip = require("./Tooltip");
+var import_TooltipContent = require("./TooltipContent");
+var import_TooltipTrigger = require("./TooltipTrigger");
+var import_PopupTip = require("./PopupTip");
 //# sourceMappingURL=index.js.map

build/cjs/Tooltip.js

@@ -31,99 +31,60 @@ "use strict";
 __export(Tooltip_exports, {
-  Tooltip: () => Tooltip
+  Tooltip: () => Tooltip,
+  TooltipProvider: () => TooltipProvider,
+  useTooltip: () => useTooltip,
+  useTooltipContext: () => useTooltipContext
 });
 module.exports = __toCommonJS(Tooltip_exports);
 var import_react = require("@floating-ui/react");
-var import_jkl_icons_react = require("@fremtind/jkl-icons-react");
-var import_jkl_react_hooks = require("@fremtind/jkl-react-hooks");
-var import_classnames = __toESM(require("classnames"));
-var import_framer_motion = require("framer-motion");
 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_react2.useState)(false);
-  const [buttonHasFocus, setButtonFocus] = (0, import_react2.useState)(false);
+const useTooltip = ({
+  initialOpen = false,
+  placement = "top",
+  delay = 250,
+  triggerOn = "hover"
+}) => {
+  const [isOpen, setOpen] = (0, import_react2.useState)(initialOpen);
   const arrowElement = (0, import_react2.useRef)(null);
-  const {
-    x,
-    y,
-    refs,
+  const description = (0, import_react2.useRef)(null);
+  const setDescription = (element) => description.current = element;
+  const data = (0, import_react.useFloating)({
+    open: isOpen,
+    onOpenChange: setOpen,
     placement,
-    strategy,
-    context,
-    isPositioned,
-    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }
-  } = (0, import_react.useFloating)({
-    open,
-    onOpenChange: setOpen,
-    placement: initialPlacement,
+    whileElementsMounted: import_react.autoUpdate,
     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.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_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",
-    {
-      "aria-expanded": open,
-      "aria-controls": tooltipId,
-      type: "button",
-      className: "jkl-tooltip__button",
-      ...getReferenceProps({
-        ref: refs.setReference,
-        onFocus: () => setButtonFocus(true),
-        onBlur: () => setButtonFocus(false),
-        onMouseOver: () => setButtonFocus(true),
-        onMouseLeave: () => setButtonFocus(false)
-      })
+  const role = (0, import_react.useRole)(data.context, { role: "tooltip" });
+  const dismiss = (0, import_react.useDismiss)(data.context, { referencePress: false });
+  const click = (0, import_react.useClick)(data.context, { enabled: triggerOn === "click" && !isOpen });
+  const hover = (0, import_react.useHover)(data.context, { enabled: triggerOn === "hover", delay: isOpen ? 0 : delay });
+  const focus = (0, import_react.useFocus)(data.context, { enabled: triggerOn === "click" ? isOpen : true });
+  const interactions = (0, import_react.useInteractions)([dismiss, focus, role, click, hover]);
+  return {
+    triggerOn,
+    isOpen,
+    setOpen,
+    arrowElement,
+    ...data,
+    refs: {
+      ...data.refs,
+      description,
+      setDescription
     },
-    /* @__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,
-    {
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
-      transition: { ease: "easeIn", duration: 0.1 },
-      "data-placement": placement,
-      "aria-live": "assertive",
-      className: "jkl-tooltip__content",
-      ...getFloatingProps({
-        id: tooltipId,
-        ref: refs.setFloating,
-        style: {
-          position: strategy,
-          top: isPositioned ? y : "",
-          left: isPositioned ? x : ""
-        }
-      })
-    },
-    /* @__PURE__ */ import_react2.default.createElement(
-      "span",
-      {
-        style: {
-          whiteSpace: "normal"
-          // Overstyr nowrap satt for å plassere tooltip riktig etter Label
-        }
-      },
-      content
-    ),
-    /* @__PURE__ */ import_react2.default.createElement(
-      "span",
-      {
-        "aria-hidden": true,
-        className: "jkl-tooltip__arrow",
-        ref: arrowElement,
-        style: {
-          left: isPositioned ? `${arrowX}px` : "",
-          top: isPositioned ? `${arrowY}px` : ""
-        }
-      }
-    )
-  ))));
+    ...interactions
+  };
 };
+const tooltipContext = (0, import_react2.createContext)(null);
+const TooltipProvider = tooltipContext.Provider;
+const useTooltipContext = () => {
+  const context = (0, import_react2.useContext)(tooltipContext);
+  if (context === null) {
+    throw new Error("Tooltip-komponentene kan kun brukes inne i <Tooltip />");
+  }
+  return context;
+};
+const Tooltip = ({ children, ...options }) => {
+  const tooltip = useTooltip(options);
+  return /* @__PURE__ */ import_react2.default.createElement(TooltipProvider, { value: tooltip }, children);
+};
 //# sourceMappingURL=Tooltip.js.map

build/esm/index.js

 import { Tooltip } from "./Tooltip";
+import { TooltipContent } from "./TooltipContent";
+import { TooltipTrigger } from "./TooltipTrigger";
+import { PopupTip } from "./PopupTip";
 export {
-  Tooltip
+  PopupTip,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
 };
 //# sourceMappingURL=index.js.map

build/esm/Tooltip.js

 import {
-  useFloating,
-  shift,
+  arrow,
+  autoUpdate,
   flip,
   offset,
-  arrow,
-  useRole,
-  useInteractions,
+  shift,
   useClick,
   useDismiss,
-  useFocus
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+  useRole
 } from "@floating-ui/react";
-import { QuestionIcon } from "@fremtind/jkl-icons-react";
-import { useId } from "@fremtind/jkl-react-hooks";
-import cn from "classnames";
-import { motion, AnimatePresence } from "framer-motion";
-import React, { useRef, useState } from "react";
-const Tooltip = ({ content, initialPlacement = "top", className }) => {
-  const tooltipId = useId("jkl-tooltip");
-  const [open, setOpen] = useState(false);
-  const [buttonHasFocus, setButtonFocus] = useState(false);
+import React, { createContext, useContext, useRef, useState } from "react";
+const useTooltip = ({
+  initialOpen = false,
+  placement = "top",
+  delay = 250,
+  triggerOn = "hover"
+}) => {
+  const [isOpen, setOpen] = useState(initialOpen);
   const arrowElement = useRef(null);
-  const {
-    x,
-    y,
-    refs,
+  const description = useRef(null);
+  const setDescription = (element) => description.current = element;
+  const data = useFloating({
+    open: isOpen,
+    onOpenChange: setOpen,
     placement,
-    strategy,
-    context,
-    isPositioned,
-    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }
-  } = useFloating({
-    open,
-    onOpenChange: setOpen,
-    placement: initialPlacement,
+    whileElementsMounted: autoUpdate,
     middleware: [offset(16), flip(), shift({ padding: 16 }), arrow({ element: arrowElement, padding: 20 })]
   });
-  const { getReferenceProps, getFloatingProps } = useInteractions([
-    useClick(context),
-    useDismiss(context, { referencePress: false }),
-    useFocus(context, { enabled: open }),
-    // Lukk når fokus flyttes vekk
-    useRole(context, { role: "tooltip" })
-  ]);
-  return /* @__PURE__ */ React.createElement("span", { className: cn("jkl-tooltip", className) }, /* @__PURE__ */ React.createElement("span", { className: "jkl-tooltip__wrapper" }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      "aria-expanded": open,
-      "aria-controls": tooltipId,
-      type: "button",
-      className: "jkl-tooltip__button",
-      ...getReferenceProps({
-        ref: refs.setReference,
-        onFocus: () => setButtonFocus(true),
-        onBlur: () => setButtonFocus(false),
-        onMouseOver: () => setButtonFocus(true),
-        onMouseLeave: () => setButtonFocus(false)
-      })
+  const role = useRole(data.context, { role: "tooltip" });
+  const dismiss = useDismiss(data.context, { referencePress: false });
+  const click = useClick(data.context, { enabled: triggerOn === "click" && !isOpen });
+  const hover = useHover(data.context, { enabled: triggerOn === "hover", delay: isOpen ? 0 : delay });
+  const focus = useFocus(data.context, { enabled: triggerOn === "click" ? isOpen : true });
+  const interactions = useInteractions([dismiss, focus, role, click, hover]);
+  return {
+    triggerOn,
+    isOpen,
+    setOpen,
+    arrowElement,
+    ...data,
+    refs: {
+      ...data.refs,
+      description,
+      setDescription
     },
-    /* @__PURE__ */ React.createElement(QuestionIcon, { bold: buttonHasFocus }),
-    /* @__PURE__ */ React.createElement("span", { className: "jkl-sr-only" }, `${open ? "Skjul" : "Vis"} hjelpetekst`)
-  ), /* @__PURE__ */ React.createElement(AnimatePresence, null, open && /* @__PURE__ */ React.createElement(
-    motion.span,
-    {
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
-      transition: { ease: "easeIn", duration: 0.1 },
-      "data-placement": placement,
-      "aria-live": "assertive",
-      className: "jkl-tooltip__content",
-      ...getFloatingProps({
-        id: tooltipId,
-        ref: refs.setFloating,
-        style: {
-          position: strategy,
-          top: isPositioned ? y : "",
-          left: isPositioned ? x : ""
-        }
-      })
-    },
-    /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        style: {
-          whiteSpace: "normal"
-          // Overstyr nowrap satt for å plassere tooltip riktig etter Label
-        }
-      },
-      content
-    ),
-    /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        "aria-hidden": true,
-        className: "jkl-tooltip__arrow",
-        ref: arrowElement,
-        style: {
-          left: isPositioned ? `${arrowX}px` : "",
-          top: isPositioned ? `${arrowY}px` : ""
-        }
-      }
-    )
-  ))));
+    ...interactions
+  };
 };
+const tooltipContext = createContext(null);
+const TooltipProvider = tooltipContext.Provider;
+const useTooltipContext = () => {
+  const context = useContext(tooltipContext);
+  if (context === null) {
+    throw new Error("Tooltip-komponentene kan kun brukes inne i <Tooltip />");
+  }
+  return context;
+};
+const Tooltip = ({ children, ...options }) => {
+  const tooltip = useTooltip(options);
+  return /* @__PURE__ */ React.createElement(TooltipProvider, { value: tooltip }, children);
+};
 export {
-  Tooltip
+  Tooltip,
+  TooltipProvider,
+  useTooltip,
+  useTooltipContext
 };
 //# sourceMappingURL=Tooltip.js.map

build/index.d.ts

@@ -1,2 +0,4 @@
-export type { Placement, TooltipProps } from "./Tooltip";
-export { Tooltip } from "./Tooltip";
+export { Tooltip, type TooltipPlacement, type TooltipProps } from "./Tooltip";
+export { TooltipContent } from "./TooltipContent";
+export { TooltipTrigger } from "./TooltipTrigger";
+export { PopupTip, type PopupTipProps } from "./PopupTip";

build/Tooltip.d.ts

@@ -1,8 +0,122 @@
-import React, { ReactNode } from "react";
-export type Placement = "top" | "left" | "right" | "top-end" | "top-start";
+import { type Placement } from "@floating-ui/react";
+import { type WithChildren } from "@fremtind/jkl-core";
+import React, { FC } from "react";
+export type TooltipPlacement = Extract<Placement, "top-start" | "top-end" | "left" | "right" | "top">;
 export interface TooltipProps {
-    className?: string;
-    initialPlacement?: Placement;
-    content: ReactNode;
+    /**
+     * Sett til true dersom du ønsker at tooltipen skal være åpen som default
+     * @default false
+     */
+    initialOpen?: boolean;
+    /**
+     * Plassering av tooltipen i forhold til triggeren. Tooltipen vil automatisk
+     * bytte posisjon dersom det ikke er plass.
+     * @default "top"
+     */
+    placement?: TooltipPlacement;
+    /**
+     * Valgfri forsinkelse før tooltipen åpner. Ignoreres dersom triggerOn er satt til "click"
+     * @default 250
+     */
+    delay?: number;
+    /**
+     * Angir om tooltipen skal åpnes ved klikk eller hover
+     * @default "hover"
+     */
+    triggerOn?: "click" | "hover";
 }
-export declare const Tooltip: ({ content, initialPlacement, className }: TooltipProps) => React.JSX.Element;
+export declare const useTooltip: ({ initialOpen, placement, delay, triggerOn, }: TooltipProps) => {
+    getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    refs: {
+        description: React.MutableRefObject<HTMLElement | null>;
+        setDescription: (element: HTMLElement | null) => HTMLElement | null;
+        reference: React.MutableRefObject<import("@floating-ui/react").ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        domReference: React.MutableRefObject<Element | null>;
+        setReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+        setPositionReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+    };
+    placement: Placement;
+    strategy: import("@floating-ui/react").Strategy;
+    middlewareData: import("@floating-ui/react").MiddlewareData;
+    x: number;
+    y: number;
+    update: () => void;
+    context: {
+        placement: Placement;
+        strategy: import("@floating-ui/react").Strategy;
+        x: number;
+        y: number;
+        middlewareData: import("@floating-ui/react").MiddlewareData;
+        update: () => void;
+        isPositioned: boolean;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    isPositioned: boolean;
+    floatingStyles: React.CSSProperties;
+    triggerOn: "click" | "hover";
+    isOpen: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    arrowElement: React.RefObject<HTMLElement>;
+};
+export type TooltipContext = ReturnType<typeof useTooltip> | null;
+export declare const TooltipProvider: React.Provider<TooltipContext>;
+export declare const useTooltipContext: () => {
+    getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    refs: {
+        description: React.MutableRefObject<HTMLElement | null>;
+        setDescription: (element: HTMLElement | null) => HTMLElement | null;
+        reference: React.MutableRefObject<import("@floating-ui/react").ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        domReference: React.MutableRefObject<Element | null>;
+        setReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+        setPositionReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+    };
+    placement: Placement;
+    strategy: import("@floating-ui/react").Strategy;
+    middlewareData: import("@floating-ui/react").MiddlewareData;
+    x: number;
+    y: number;
+    update: () => void;
+    context: {
+        placement: Placement;
+        strategy: import("@floating-ui/react").Strategy;
+        x: number;
+        y: number;
+        middlewareData: import("@floating-ui/react").MiddlewareData;
+        update: () => void;
+        isPositioned: boolean;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    isPositioned: boolean;
+    floatingStyles: React.CSSProperties;
+    triggerOn: "click" | "hover";
+    isOpen: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    arrowElement: React.RefObject<HTMLElement>;
+};
+export declare const Tooltip: FC<TooltipProps & WithChildren>;

package.json

 {
     "name": "@fremtind/jkl-tooltip-react",
-    "version": "2.0.18",
+    "version": "3.0.0",
     "publishConfig": {
@@ -44,3 +44,3 @@ "access": "public"
         "@fremtind/jkl-react-hooks": "^11.5.1",
-        "@fremtind/jkl-tooltip": "^2.0.6",
+        "@fremtind/jkl-tooltip": "^3.0.0",
         "classnames": "^2.3.2",
@@ -62,3 +62,3 @@ "framer-motion": "^7.10.3"
     },
-    "gitHead": "dc634e3c2efc8bec23677f0691376ed48208deb4"
+    "gitHead": "fdfe84191d1a82f3e407b988a559c48a787e4448"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

72216

increased by146.55%

Number of package files

30

increased by100%

Lines of code

851

increased by176.3%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@fremtind/jkl-tooltip@3.0.0(transitive)

• - Removed@fremtind/jkl-tooltip@2.0.6(transitive)

• Updated@fremtind/jkl-tooltip@^3.0.0