@navikt/ds-react 0.17.16 → 0.17.17

package/cjs/index.js

@@ -37,6 +37,7 @@ __exportStar(require("./tag"), exports);
 __exportStar(require("./toggle-group"), exports);
 __exportStar(require("./table"), exports);
 __exportStar(require("./tabs"), exports);
+__exportStar(require("./tooltip"), exports);
 __exportStar(require("./typography"), exports);
 __exportStar(require("./util"), exports);
 /* Navno spesific packages */

package/cjs/read-more/ReadMore.js

@@ -50,7 +50,7 @@ const ReadMore = (0, react_1.forwardRef)((_a, ref) => {
         : react_collapse_1.UnmountClosed;
     const isOpened = open !== null && open !== void 0 ? open : internalOpen;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("button", Object.assign({}, rest, { className: (0, classnames_1.default)("navds-read-more", "navds-body-short", "navds-body-short--small", className, {
+        react_1.default.createElement("button", Object.assign({ type: "button" }, rest, { className: (0, classnames_1.default)("navds-read-more", "navds-body-short", "navds-body-short--small", className, {
                 "navds-read-more--open": isOpened,
             }), onClick: (e) => {
                 if (open === undefined) {

package/cjs/tooltip/Tooltip.js

@@ -0,0 +1,153 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const __1 = require("..");
+const react_dom_1 = require("@floating-ui/react-dom");
+const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
+const portal_1 = __importDefault(require("./portal"));
+const util_1 = require("../util");
+const Tooltip = (0, react_1.forwardRef)((_a, ref) => {
+    var { children, className, arrow: _arrow = true, placement: _placement = "top", open, defaultOpen = false, offset: _offset, content, delay = 150, id, keys, maxChar = 80 } = _a, rest = __rest(_a, ["children", "className", "arrow", "placement", "open", "defaultOpen", "offset", "content", "delay", "id", "keys", "maxChar"]);
+    const arrowRef = (0, react_1.useRef)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(defaultOpen);
+    const openTimerRef = (0, react_1.useRef)(0);
+    const leaveTimerRef = (0, react_1.useRef)(0);
+    const isMouseDownRef = (0, react_1.useRef)(false);
+    const ariaId = (0, util_1.useId)(id);
+    const { x, y, update, placement, refs, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: { referenceHidden } = {}, }, } = (0, react_dom_1.useFloating)({
+        placement: _placement,
+        middleware: [
+            (0, react_dom_1.shift)(),
+            (0, react_dom_1.flip)({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+            (0, react_dom_1.arrow)({ element: arrowRef, padding: 5 }),
+            (0, react_dom_1.hide)(),
+        ],
+    });
+    /* https://floating-ui.com/docs/react-dom#updating */
+    (0, react_1.useEffect)(() => {
+        if (!refs.reference.current || !refs.floating.current) {
+            return;
+        }
+        // Only call this when the floating element is rendered
+        return (0, react_dom_1.autoUpdate)(refs.reference.current, refs.floating.current, update);
+    }, [refs.reference, refs.floating, update, open, isOpen]);
+    const handleOpen = (0, react_1.useCallback)(() => {
+        window.clearTimeout(openTimerRef.current);
+        window.clearTimeout(leaveTimerRef.current);
+        setIsOpen(true);
+    }, [setIsOpen]);
+    const handleDelayedOpen = (0, react_1.useCallback)(() => {
+        window.clearTimeout(openTimerRef.current);
+        window.clearTimeout(leaveTimerRef.current);
+        openTimerRef.current = window.setTimeout(() => {
+            setIsOpen(true);
+        }, delay);
+    }, [delay, setIsOpen]);
+    const handleClose = (0, react_1.useCallback)(() => {
+        window.clearTimeout(openTimerRef.current);
+        leaveTimerRef.current = window.setTimeout(() => {
+            setIsOpen(false);
+        }, 50);
+    }, [setIsOpen]);
+    const handleMouseUp = (0, react_1.useCallback)(() => (isMouseDownRef.current = false), []);
+    (0, react_1.useEffect)(() => {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        return () => window.clearTimeout(openTimerRef.current);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        return () => document.removeEventListener("mouseup", handleMouseUp);
+    }, [handleMouseUp]);
+    (0, __1.useEventListener)("keydown", (0, react_1.useCallback)((e) => e.key === "Escape" && handleClose(), [handleClose]), document);
+    /* https://floating-ui.com/docs/react-dom#stable-ref-prop */
+    const stableRef = (0, react_1.useMemo)(() => (0, react_merge_refs_1.default)([ref, refs.floating]), [
+        ref,
+        refs.floating,
+    ]);
+    if (!children ||
+        (children === null || children === void 0 ? void 0 : children.type) === react_1.default.Fragment ||
+        children === react_1.default.Fragment) {
+        console.error("<Tooltip> children needs to be a single ReactElement and not <React.Fragment/>/<></>");
+        return null;
+    }
+    if ((content === null || content === void 0 ? void 0 : content.length) > maxChar) {
+        console.error(`Because of strict accessibility concers we encourage all Tooltips to have less than 80 characters. Can be overwritten with the maxChar-prop`);
+        return null;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        (0, react_1.cloneElement)(children, Object.assign(Object.assign({}, children.props), { "aria-describedby": open || isOpen
+                ? (0, classnames_1.default)(ariaId, children === null || children === void 0 ? void 0 : children.props["aria-describedby"])
+                : children === null || children === void 0 ? void 0 : children.props["aria-describedby"], ref: (0, react_merge_refs_1.default)([children.ref, refs.reference]), onMouseEnter: (0, __1.composeEventHandlers)(children.props.onMouseEnter, handleDelayedOpen), onMouseLeave: (0, __1.composeEventHandlers)(children.props.onMouseLeave, handleClose), onMouseDown: (0, __1.composeEventHandlers)(children.props.onMouseDown, () => {
+                isMouseDownRef.current = true;
+                document.addEventListener("mouseup", handleMouseUp, { once: true });
+            }), onFocus: (0, __1.composeEventHandlers)(children.props.onFocus, () => !isMouseDownRef.current && handleOpen()), onBlur: (0, __1.composeEventHandlers)(children.props.onBlur, handleClose) })),
+        (open !== null && open !== void 0 ? open : isOpen) && (react_1.default.createElement(portal_1.default, null,
+            react_1.default.createElement("div", Object.assign({ ref: stableRef }, rest, { onMouseEnter: handleOpen, onMouseLeave: handleClose, role: "tooltip", id: ariaId, style: {
+                    position: "absolute",
+                    top: y !== null && y !== void 0 ? y : "",
+                    left: x !== null && x !== void 0 ? x : "",
+                    visibility: referenceHidden ? "hidden" : "visible",
+                }, "data-side": placement, className: (0, classnames_1.default)("navds-tooltip", "navds-detail navds-detail--small", className) }),
+                react_1.default.createElement("div", { className: "navds-tooltip__inner", style: {
+                        [{
+                            top: "marginBottom",
+                            right: "marginLeft",
+                            bottom: "marginTop",
+                            left: "marginRight",
+                        }[placement]]: _offset ? _offset : _arrow ? 10 : 2,
+                    } },
+                    content,
+                    keys && (react_1.default.createElement("span", { className: "navds-tooltip__keys" }, keys.map((key) => (react_1.default.createElement(__1.Detail, { size: "small", as: "kbd", key: key, className: "navds-tooltip__key" }, key))))),
+                    _arrow && (react_1.default.createElement("div", { ref: (node) => {
+                            arrowRef.current = node;
+                        }, className: "navds-tooltip__arrow", style: {
+                            left: arrowX != null ? `${arrowX}px` : "",
+                            top: arrowY != null ? `${arrowY}px` : "",
+                            right: "",
+                            bottom: "",
+                            [{
+                                top: "bottom",
+                                right: "left",
+                                bottom: "top",
+                                left: "right",
+                            }[placement]]: "-3.5px",
+                        } }))))))));
+});
+exports.default = Tooltip;

package/cjs/tooltip/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+var Tooltip_1 = require("./Tooltip");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return __importDefault(Tooltip_1).default; } });
+__exportStar(require("./Tooltip"), exports);

package/cjs/tooltip/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../esm/tooltip/index.js",
+  "types": "../../esm/tooltip/index.d.ts"
+}

package/cjs/tooltip/portal.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* https://github.com/radix-ui/primitives/blob/main/packages/react/portal/src/Portal.tsx */
+const react_dom_1 = __importDefault(require("react-dom"));
+const Portal = ({ children }) => {
+    var _a;
+    const hostElement = (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.body;
+    if (hostElement) {
+        return react_dom_1.default.createPortal(children, hostElement);
+    }
+    // bail out of ssr
+    return null;
+};
+exports.default = Portal;

package/cjs/util/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useEventListener = exports.omit = void 0;
+exports.composeEventHandlers = exports.useEventListener = exports.omit = void 0;
 const react_1 = require("react");
 __exportStar(require("./OverridableComponent"), exports);
 __exportStar(require("./useId"), exports);
@@ -35,3 +35,13 @@ const useEventListener = (name, handler, target = window) => {
     }, [name, handler, target]);
 };
 exports.useEventListener = useEventListener;
+/* https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx */
+const composeEventHandlers = (originalEventHandler, ourEventHandler) => {
+    return function handleEvent(event) {
+        originalEventHandler === null || originalEventHandler === void 0 ? void 0 : originalEventHandler(event);
+        if (!event.defaultPrevented) {
+            return ourEventHandler === null || ourEventHandler === void 0 ? void 0 : ourEventHandler(event);
+        }
+    };
+};
+exports.composeEventHandlers = composeEventHandlers;

package/esm/index.d.ts

@@ -21,6 +21,7 @@ export * from "./tag";
 export * from "./toggle-group";
 export * from "./table";
 export * from "./tabs";
+export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
 export * from "./card";

package/esm/index.js

@@ -21,6 +21,7 @@ export * from "./tag";
 export * from "./toggle-group";
 export * from "./table";
 export * from "./tabs";
+export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
 /* Navno spesific packages */

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAEvB,6BAA6B;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAEvB,6BAA6B;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}

package/esm/read-more/ReadMore.js

@@ -22,7 +22,7 @@ const ReadMore = forwardRef((_a, ref) => {
         : UnmountClosed;
     const isOpened = open !== null && open !== void 0 ? open : internalOpen;
     return (React.createElement(React.Fragment, null,
-        React.createElement("button", Object.assign({}, rest, { className: cl("navds-read-more", "navds-body-short", "navds-body-short--small", className, {
+        React.createElement("button", Object.assign({ type: "button" }, rest, { className: cl("navds-read-more", "navds-body-short", "navds-body-short--small", className, {
                 "navds-read-more--open": isOpened,
             }), onClick: (e) => {
                 if (open === undefined) {

package/esm/read-more/ReadMore.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReadMore.js","sourceRoot":"","sources":["../../src/read-more/ReadMore.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA6BzC,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,SAAS,EACT,MAAM,EACN,uBAAuB,GAAG,KAAK,EAC/B,QAAQ,EACR,IAAI,EACJ,WAAW,GAAG,KAAK,EACnB,OAAO,OAER,EADI,IAAI,cART,gGASC,CADQ;IAIT,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,WAAW,CAAC,CAAC;IACvE,MAAM,iBAAiB,GAAG,uBAAuB;QAC/C,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,aAAa,CAAC;IAElB,MAAM,QAAQ,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,YAAY,CAAC;IAEtC,OAAO,CACL;QACE,gDACM,IAAI,IACR,SAAS,EAAE,EAAE,CACX,iBAAiB,EACjB,kBAAkB,EAClB,yBAAyB,EACzB,SAAS,EACT;gBACE,uBAAuB,EAAE,QAAQ;aAClC,CACF,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,IAAI,IAAI,KAAK,SAAS,EAAE;oBACtB,eAAe,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;iBACtC;gBACD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;YACf,CAAC,mBACc,QAAQ,EACvB,GAAG,EAAE,GAAG;YAER,oBAAC,MAAM,IAAC,SAAS,EAAC,8BAA8B,wBAAe;YAC/D,kCAAO,MAAM,CAAQ,CACd;QACT,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,QAAQ;YACnC,6BAAK,SAAS,EAAC,0BAA0B;gBACvC,oBAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,IAAE,QAAQ,CAAY,CACxC,CACY,CACnB,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ReadMore.js","sourceRoot":"","sources":["../../src/read-more/ReadMore.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA6BzC,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,SAAS,EACT,MAAM,EACN,uBAAuB,GAAG,KAAK,EAC/B,QAAQ,EACR,IAAI,EACJ,WAAW,GAAG,KAAK,EACnB,OAAO,OAER,EADI,IAAI,cART,gGASC,CADQ;IAIT,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,WAAW,CAAC,CAAC;IACvE,MAAM,iBAAiB,GAAG,uBAAuB;QAC/C,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,aAAa,CAAC;IAElB,MAAM,QAAQ,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,YAAY,CAAC;IAEtC,OAAO,CACL;QACE,8CACE,IAAI,EAAC,QAAQ,IACT,IAAI,IACR,SAAS,EAAE,EAAE,CACX,iBAAiB,EACjB,kBAAkB,EAClB,yBAAyB,EACzB,SAAS,EACT;gBACE,uBAAuB,EAAE,QAAQ;aAClC,CACF,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,IAAI,IAAI,KAAK,SAAS,EAAE;oBACtB,eAAe,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;iBACtC;gBACD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;YACf,CAAC,mBACc,QAAQ,EACvB,GAAG,EAAE,GAAG;YAER,oBAAC,MAAM,IAAC,SAAS,EAAC,8BAA8B,wBAAe;YAC/D,kCAAO,MAAM,CAAQ,CACd;QACT,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,QAAQ;YACnC,6BAAK,SAAS,EAAC,0BAA0B;gBACvC,oBAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,IAAE,QAAQ,CAAY,CACxC,CACY,CACnB,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/tooltip/Tooltip.d.ts

@@ -0,0 +1,51 @@
+import React, { HTMLAttributes } from "react";
+export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Element tooltip anchors to
+     */
+    children: React.ReactElement & React.RefAttributes<HTMLElement>;
+    /**
+     * Open state for contolled tooltip
+     */
+    open?: boolean;
+    /**
+     * Tells tooltip to start in open state
+     * @note "open"-prop overwrites this
+     */
+    defaultOpen?: boolean;
+    /**
+     * Orientation for tooltip
+     * @default "top"
+     */
+    placement?: "top" | "right" | "bottom" | "left";
+    /**
+     *  Toggles rendering of arrow
+     *  @default true
+     */
+    arrow?: boolean;
+    /**
+     * Distance from anchor to tooltip
+     * @default 10px with arrow, 2px without arrow
+     */
+    offset?: number;
+    /**
+     * Content shown in tooltip
+     */
+    content: string;
+    /**
+     * Sets max allowed character length
+     * @default 80
+     */
+    maxChar?: number;
+    /**
+     * Adds a delay in milliseconds before opening tooltip
+     * @default 300
+     */
+    delay?: number;
+    /**
+     * List of Keyboard-keys for shortcuts
+     */
+    keys?: string[];
+}
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
+export default Tooltip;

package/esm/tooltip/Tooltip.js

@@ -0,0 +1,126 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import cl from "classnames";
+import React, { cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { composeEventHandlers, Detail, useEventListener } from "..";
+import { useFloating, arrow as flArrow, shift, autoUpdate, flip, hide, } from "@floating-ui/react-dom";
+import mergeRefs from "react-merge-refs";
+import Portal from "./portal";
+import { useId } from "../util";
+const Tooltip = forwardRef((_a, ref) => {
+    var { children, className, arrow: _arrow = true, placement: _placement = "top", open, defaultOpen = false, offset: _offset, content, delay = 150, id, keys, maxChar = 80 } = _a, rest = __rest(_a, ["children", "className", "arrow", "placement", "open", "defaultOpen", "offset", "content", "delay", "id", "keys", "maxChar"]);
+    const arrowRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const openTimerRef = useRef(0);
+    const leaveTimerRef = useRef(0);
+    const isMouseDownRef = useRef(false);
+    const ariaId = useId(id);
+    const { x, y, update, placement, refs, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: { referenceHidden } = {}, }, } = useFloating({
+        placement: _placement,
+        middleware: [
+            shift(),
+            flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+            flArrow({ element: arrowRef, padding: 5 }),
+            hide(),
+        ],
+    });
+    /* https://floating-ui.com/docs/react-dom#updating */
+    useEffect(() => {
+        if (!refs.reference.current || !refs.floating.current) {
+            return;
+        }
+        // Only call this when the floating element is rendered
+        return autoUpdate(refs.reference.current, refs.floating.current, update);
+    }, [refs.reference, refs.floating, update, open, isOpen]);
+    const handleOpen = useCallback(() => {
+        window.clearTimeout(openTimerRef.current);
+        window.clearTimeout(leaveTimerRef.current);
+        setIsOpen(true);
+    }, [setIsOpen]);
+    const handleDelayedOpen = useCallback(() => {
+        window.clearTimeout(openTimerRef.current);
+        window.clearTimeout(leaveTimerRef.current);
+        openTimerRef.current = window.setTimeout(() => {
+            setIsOpen(true);
+        }, delay);
+    }, [delay, setIsOpen]);
+    const handleClose = useCallback(() => {
+        window.clearTimeout(openTimerRef.current);
+        leaveTimerRef.current = window.setTimeout(() => {
+            setIsOpen(false);
+        }, 50);
+    }, [setIsOpen]);
+    const handleMouseUp = useCallback(() => (isMouseDownRef.current = false), []);
+    useEffect(() => {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        return () => window.clearTimeout(openTimerRef.current);
+    }, []);
+    useEffect(() => {
+        return () => document.removeEventListener("mouseup", handleMouseUp);
+    }, [handleMouseUp]);
+    useEventListener("keydown", useCallback((e) => e.key === "Escape" && handleClose(), [handleClose]), document);
+    /* https://floating-ui.com/docs/react-dom#stable-ref-prop */
+    const stableRef = useMemo(() => mergeRefs([ref, refs.floating]), [
+        ref,
+        refs.floating,
+    ]);
+    if (!children ||
+        (children === null || children === void 0 ? void 0 : children.type) === React.Fragment ||
+        children === React.Fragment) {
+        console.error("<Tooltip> children needs to be a single ReactElement and not <React.Fragment/>/<></>");
+        return null;
+    }
+    if ((content === null || content === void 0 ? void 0 : content.length) > maxChar) {
+        console.error(`Because of strict accessibility concers we encourage all Tooltips to have less than 80 characters. Can be overwritten with the maxChar-prop`);
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        cloneElement(children, Object.assign(Object.assign({}, children.props), { "aria-describedby": open || isOpen
+                ? cl(ariaId, children === null || children === void 0 ? void 0 : children.props["aria-describedby"])
+                : children === null || children === void 0 ? void 0 : children.props["aria-describedby"], ref: mergeRefs([children.ref, refs.reference]), onMouseEnter: composeEventHandlers(children.props.onMouseEnter, handleDelayedOpen), onMouseLeave: composeEventHandlers(children.props.onMouseLeave, handleClose), onMouseDown: composeEventHandlers(children.props.onMouseDown, () => {
+                isMouseDownRef.current = true;
+                document.addEventListener("mouseup", handleMouseUp, { once: true });
+            }), onFocus: composeEventHandlers(children.props.onFocus, () => !isMouseDownRef.current && handleOpen()), onBlur: composeEventHandlers(children.props.onBlur, handleClose) })),
+        (open !== null && open !== void 0 ? open : isOpen) && (React.createElement(Portal, null,
+            React.createElement("div", Object.assign({ ref: stableRef }, rest, { onMouseEnter: handleOpen, onMouseLeave: handleClose, role: "tooltip", id: ariaId, style: {
+                    position: "absolute",
+                    top: y !== null && y !== void 0 ? y : "",
+                    left: x !== null && x !== void 0 ? x : "",
+                    visibility: referenceHidden ? "hidden" : "visible",
+                }, "data-side": placement, className: cl("navds-tooltip", "navds-detail navds-detail--small", className) }),
+                React.createElement("div", { className: "navds-tooltip__inner", style: {
+                        [{
+                            top: "marginBottom",
+                            right: "marginLeft",
+                            bottom: "marginTop",
+                            left: "marginRight",
+                        }[placement]]: _offset ? _offset : _arrow ? 10 : 2,
+                    } },
+                    content,
+                    keys && (React.createElement("span", { className: "navds-tooltip__keys" }, keys.map((key) => (React.createElement(Detail, { size: "small", as: "kbd", key: key, className: "navds-tooltip__key" }, key))))),
+                    _arrow && (React.createElement("div", { ref: (node) => {
+                            arrowRef.current = node;
+                        }, className: "navds-tooltip__arrow", style: {
+                            left: arrowX != null ? `${arrowX}px` : "",
+                            top: arrowY != null ? `${arrowY}px` : "",
+                            right: "",
+                            bottom: "",
+                            [{
+                                top: "bottom",
+                                right: "left",
+                                bottom: "top",
+                                left: "right",
+                            }[placement]]: "-3.5px",
+                        } }))))))));
+});
+export default Tooltip;
+//# sourceMappingURL=Tooltip.js.map

package/esm/tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}

package/esm/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from "./Tooltip";
+export * from "./Tooltip";

package/esm/tooltip/index.js

@@ -0,0 +1,3 @@
+export { default as Tooltip } from "./Tooltip";
+export * from "./Tooltip";
+//# sourceMappingURL=index.js.map

package/esm/tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,cAAc,WAAW,CAAC"}

package/esm/tooltip/portal.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const Portal: ({ children }: {
+    children: any;
+}) => import("react").ReactPortal | null;
+export default Portal;

package/esm/tooltip/portal.js

@@ -0,0 +1,13 @@
+/* https://github.com/radix-ui/primitives/blob/main/packages/react/portal/src/Portal.tsx */
+import ReactDOM from "react-dom";
+const Portal = ({ children }) => {
+    var _a;
+    const hostElement = (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.body;
+    if (hostElement) {
+        return ReactDOM.createPortal(children, hostElement);
+    }
+    // bail out of ssr
+    return null;
+};
+export default Portal;
+//# sourceMappingURL=portal.js.map

package/esm/tooltip/portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.js","sourceRoot":"","sources":["../../src/tooltip/portal.tsx"],"names":[],"mappings":"AAAA,2FAA2F;AAC3F,OAAO,QAAQ,MAAM,WAAW,CAAC;AAEjC,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;;IAC9B,MAAM,WAAW,GAAG,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,0CAAE,IAAI,CAAC;IAE/C,IAAI,WAAW,EAAE;QACf,OAAO,QAAQ,CAAC,YAAY,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;KACrD;IAED,kBAAkB;IAClB,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/esm/util/index.d.ts

@@ -6,3 +6,4 @@ export interface ListenerT {
     removeEventListener(name: string, handler: (event?: any) => void, ...args: any[]): any;
 }
 export declare const useEventListener: <T extends ListenerT>(name: Parameters<ListenerT["addEventListener"]>[0], handler: Parameters<ListenerT["addEventListener"]>[1], target?: Window | T | null) => void;
+export declare const composeEventHandlers: <E>(originalEventHandler?: ((event: E) => void) | undefined, ourEventHandler?: ((event: E) => void) | undefined) => (event: E) => void;

package/esm/util/index.js

@@ -16,4 +16,13 @@ export const useEventListener = (name, handler, target = window) => {
         };
     }, [name, handler, target]);
 };
+/* https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx */
+export const composeEventHandlers = (originalEventHandler, ourEventHandler) => {
+    return function handleEvent(event) {
+        originalEventHandler === null || originalEventHandler === void 0 ? void 0 : originalEventHandler(event);
+        if (!event.defaultPrevented) {
+            return ourEventHandler === null || ourEventHandler === void 0 ? void 0 : ourEventHandler(event);
+        }
+    };
+};
 //# sourceMappingURL=index.js.map

package/esm/util/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/util/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC;AAExB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,KAAe,EAAE,EAAE,CACnD,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;KAChB,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;KACvC,MAAM,CACL,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,iCAClB,GAAG,KACN,CAAC,GAAG,CAAC,EAAE,KAAK,IACZ,EACF,EAAE,CACH,CAAC;AAgBN,wEAAwE;AACxE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,IAAkD,EAClD,OAAqD,EACrD,SAA4B,MAAM,EAC5B,EAAE;IACR,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QACD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE;YACV,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAC1C,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;AAC9B,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/util/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC;AAExB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,KAAe,EAAE,EAAE,CACnD,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;KAChB,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;KACvC,MAAM,CACL,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,iCAClB,GAAG,KACN,CAAC,GAAG,CAAC,EAAE,KAAK,IACZ,EACF,EAAE,CACH,CAAC;AAgBN,wEAAwE;AACxE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,IAAkD,EAClD,OAAqD,EACrD,SAA4B,MAAM,EAC5B,EAAE;IACR,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QACD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE;YACV,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAC1C,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;AAC9B,CAAC,CAAC;AAEF,gGAAgG;AAChG,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,oBAAyC,EACzC,eAAoC,EACpC,EAAE;IACF,OAAO,SAAS,WAAW,CAAC,KAAQ;QAClC,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAG,KAAK,CAAC,CAAC;QAE9B,IAAI,CAAG,KAA2B,CAAC,gBAAgB,EAAE;YACnD,OAAO,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,KAAK,CAAC,CAAC;SACjC;IACH,CAAC,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.17.16",
+  "version": "0.17.17",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -34,6 +34,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@floating-ui/react-dom": "0.6.0",
     "@material-ui/core": "^4.12.3",
     "@navikt/ds-icons": "^0.8.6",
     "@popperjs/core": "^2.10.1",
@@ -68,5 +69,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "61f6b62c9e20e095d220631b5c9fa1d7a7cada38"
+  "gitHead": "fcbd614a3444afa7fd07c0c133cc754206e5f106"
 }

package/src/index.ts

@@ -21,6 +21,7 @@ export * from "./tag";
 export * from "./toggle-group";
 export * from "./table";
 export * from "./tabs";
+export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
 

package/src/read-more/ReadMore.tsx

@@ -55,6 +55,7 @@ const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
     return (
       <>
         <button
+          type="button"
           {...rest}
           className={cl(
             "navds-read-more",

package/src/tooltip/Tooltip.tsx

@@ -0,0 +1,301 @@
+import cl from "classnames";
+import React, {
+  cloneElement,
+  forwardRef,
+  HTMLAttributes,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { composeEventHandlers, Detail, useEventListener } from "..";
+import {
+  useFloating,
+  arrow as flArrow,
+  shift,
+  autoUpdate,
+  flip,
+  hide,
+} from "@floating-ui/react-dom";
+import mergeRefs from "react-merge-refs";
+import Portal from "./portal";
+import { useId } from "../util";
+
+export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Element tooltip anchors to
+   */
+  children: React.ReactElement & React.RefAttributes<HTMLElement>;
+  /**
+   * Open state for contolled tooltip
+   */
+  open?: boolean;
+  /**
+   * Tells tooltip to start in open state
+   * @note "open"-prop overwrites this
+   */
+  defaultOpen?: boolean;
+  /**
+   * Orientation for tooltip
+   * @default "top"
+   */
+  placement?: "top" | "right" | "bottom" | "left";
+  /**
+   *  Toggles rendering of arrow
+   *  @default true
+   */
+  arrow?: boolean;
+  /**
+   * Distance from anchor to tooltip
+   * @default 10px with arrow, 2px without arrow
+   */
+  offset?: number;
+  /**
+   * Content shown in tooltip
+   */
+  content: string;
+  /**
+   * Sets max allowed character length
+   * @default 80
+   */
+  maxChar?: number;
+  /**
+   * Adds a delay in milliseconds before opening tooltip
+   * @default 300
+   */
+  delay?: number;
+  /**
+   * List of Keyboard-keys for shortcuts
+   */
+  keys?: string[];
+}
+
+const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+  (
+    {
+      children,
+      className,
+      arrow: _arrow = true,
+      placement: _placement = "top",
+      open,
+      defaultOpen = false,
+      offset: _offset,
+      content,
+      delay = 150,
+      id,
+      keys,
+      maxChar = 80,
+      ...rest
+    },
+    ref
+  ) => {
+    const arrowRef = useRef<HTMLDivElement | null>(null);
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const openTimerRef = useRef(0);
+    const leaveTimerRef = useRef(0);
+    const isMouseDownRef = useRef(false);
+
+    const ariaId = useId(id);
+
+    const {
+      x,
+      y,
+      update,
+      placement,
+      refs,
+      middlewareData: {
+        arrow: { x: arrowX, y: arrowY } = {},
+        hide: { referenceHidden } = {},
+      },
+    } = useFloating({
+      placement: _placement,
+      middleware: [
+        shift(),
+        flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+        flArrow({ element: arrowRef, padding: 5 }),
+        hide(),
+      ],
+    });
+
+    /* https://floating-ui.com/docs/react-dom#updating */
+    useEffect(() => {
+      if (!refs.reference.current || !refs.floating.current) {
+        return;
+      }
+
+      // Only call this when the floating element is rendered
+      return autoUpdate(refs.reference.current, refs.floating.current, update);
+    }, [refs.reference, refs.floating, update, open, isOpen]);
+
+    const handleOpen = useCallback(() => {
+      window.clearTimeout(openTimerRef.current);
+      window.clearTimeout(leaveTimerRef.current);
+      setIsOpen(true);
+    }, [setIsOpen]);
+
+    const handleDelayedOpen = useCallback(() => {
+      window.clearTimeout(openTimerRef.current);
+      window.clearTimeout(leaveTimerRef.current);
+      openTimerRef.current = window.setTimeout(() => {
+        setIsOpen(true);
+      }, delay);
+    }, [delay, setIsOpen]);
+
+    const handleClose = useCallback(() => {
+      window.clearTimeout(openTimerRef.current);
+      leaveTimerRef.current = window.setTimeout(() => {
+        setIsOpen(false);
+      }, 50);
+    }, [setIsOpen]);
+
+    const handleMouseUp = useCallback(
+      () => (isMouseDownRef.current = false),
+      []
+    );
+
+    useEffect(() => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      return () => window.clearTimeout(openTimerRef.current);
+    }, []);
+
+    useEffect(() => {
+      return () => document.removeEventListener("mouseup", handleMouseUp);
+    }, [handleMouseUp]);
+
+    useEventListener(
+      "keydown",
+      useCallback((e) => e.key === "Escape" && handleClose(), [handleClose]),
+      document
+    );
+
+    /* https://floating-ui.com/docs/react-dom#stable-ref-prop */
+    const stableRef = useMemo(() => mergeRefs([ref, refs.floating]), [
+      ref,
+      refs.floating,
+    ]);
+
+    if (
+      !children ||
+      children?.type === React.Fragment ||
+      (children as any) === React.Fragment
+    ) {
+      console.error(
+        "<Tooltip> children needs to be a single ReactElement and not <React.Fragment/>/<></>"
+      );
+      return null;
+    }
+
+    if (content?.length > maxChar) {
+      console.error(
+        `Because of strict accessibility concers we encourage all Tooltips to have less than 80 characters. Can be overwritten with the maxChar-prop`
+      );
+      return null;
+    }
+
+    return (
+      <>
+        {cloneElement(children, {
+          ...children.props,
+          "aria-describedby":
+            open || isOpen
+              ? cl(ariaId, children?.props["aria-describedby"])
+              : children?.props["aria-describedby"],
+          ref: mergeRefs([(children as any).ref, refs.reference]),
+          onMouseEnter: composeEventHandlers(
+            children.props.onMouseEnter,
+            handleDelayedOpen
+          ),
+          onMouseLeave: composeEventHandlers(
+            children.props.onMouseLeave,
+            handleClose
+          ),
+          onMouseDown: composeEventHandlers(children.props.onMouseDown, () => {
+            isMouseDownRef.current = true;
+            document.addEventListener("mouseup", handleMouseUp, { once: true });
+          }),
+          onFocus: composeEventHandlers(
+            children.props.onFocus,
+            () => !isMouseDownRef.current && handleOpen()
+          ),
+          onBlur: composeEventHandlers(children.props.onBlur, handleClose),
+        })}
+        {(open ?? isOpen) && (
+          <Portal>
+            <div
+              ref={stableRef}
+              {...rest}
+              onMouseEnter={handleOpen}
+              onMouseLeave={handleClose}
+              role="tooltip"
+              id={ariaId}
+              style={{
+                position: "absolute",
+                top: y ?? "",
+                left: x ?? "",
+                visibility: referenceHidden ? "hidden" : "visible",
+              }}
+              data-side={placement}
+              className={cl(
+                "navds-tooltip",
+                "navds-detail navds-detail--small",
+                className
+              )}
+            >
+              <div
+                className="navds-tooltip__inner"
+                style={{
+                  [{
+                    top: "marginBottom",
+                    right: "marginLeft",
+                    bottom: "marginTop",
+                    left: "marginRight",
+                  }[placement]]: _offset ? _offset : _arrow ? 10 : 2,
+                }}
+              >
+                {content}
+                {keys && (
+                  <span className="navds-tooltip__keys">
+                    {keys.map((key) => (
+                      <Detail
+                        size="small"
+                        as="kbd"
+                        key={key}
+                        className="navds-tooltip__key"
+                      >
+                        {key}
+                      </Detail>
+                    ))}
+                  </span>
+                )}
+                {_arrow && (
+                  <div
+                    ref={(node) => {
+                      arrowRef.current = node;
+                    }}
+                    className="navds-tooltip__arrow"
+                    style={{
+                      left: arrowX != null ? `${arrowX}px` : "",
+                      top: arrowY != null ? `${arrowY}px` : "",
+                      right: "",
+                      bottom: "",
+
+                      [{
+                        top: "bottom",
+                        right: "left",
+                        bottom: "top",
+                        left: "right",
+                      }[placement]]: "-3.5px",
+                    }}
+                  />
+                )}
+              </div>
+            </div>
+          </Portal>
+        )}
+      </>
+    );
+  }
+);
+
+export default Tooltip;

package/src/tooltip/index.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from "./Tooltip";
+export * from "./Tooltip";

package/src/tooltip/portal.tsx

@@ -0,0 +1,15 @@
+/* https://github.com/radix-ui/primitives/blob/main/packages/react/portal/src/Portal.tsx */
+import ReactDOM from "react-dom";
+
+const Portal = ({ children }) => {
+  const hostElement = globalThis?.document?.body;
+
+  if (hostElement) {
+    return ReactDOM.createPortal(children, hostElement);
+  }
+
+  // bail out of ssr
+  return null;
+};
+
+export default Portal;

package/src/tooltip/tooltip.stories.tsx

@@ -0,0 +1,144 @@
+import React, { useRef, useState } from "react";
+import { Tooltip } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+import { Refresh } from "@navikt/ds-icons";
+import { Button } from "../..";
+import { ToggleGroup } from "../toggle-group";
+
+export default {
+  title: "ds-react/tooltip",
+  component: Tooltip,
+  parameters: {
+    chromatic: { disable: true },
+  },
+} as Meta;
+
+export const Demo = () => {
+  const [open, setOpen] = useState(true);
+  const testRef = useRef(null);
+  return (
+    <div
+      style={{
+        width: "100vw",
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        gap: 32,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Tooltip
+        content="Tooltip example"
+        keys={["Cmd", "K"]}
+        placement="right"
+        open={open}
+        ref={testRef}
+      >
+        <Button aria-describedby="test123" onClick={() => setOpen(!open)}>
+          Tooltip C
+        </Button>
+      </Tooltip>
+      <Tooltip
+        content="Tooltip example"
+        keys={["Cmd", "K"]}
+        placement="right"
+        defaultOpen
+      >
+        <Button onClick={() => console.log(testRef.current)}>Tooltip C</Button>
+      </Tooltip>
+      <ToggleGroup onChange={null} defaultValue="321">
+        <Tooltip content="Tooltip" placement="bottom">
+          <ToggleGroup.Item value="123">Tekst</ToggleGroup.Item>
+        </Tooltip>
+        <Tooltip content="Tooltip" placement="bottom">
+          <ToggleGroup.Item value="321">tekst 2</ToggleGroup.Item>
+        </Tooltip>
+        <Tooltip content="Tooltip" placement="bottom">
+          <ToggleGroup.Item value="3212">tekst 2</ToggleGroup.Item>
+        </Tooltip>
+        <Tooltip content="Tooltip" placement="bottom">
+          <ToggleGroup.Item value="3213">tekst 2</ToggleGroup.Item>
+        </Tooltip>
+        <Tooltip content="Tooltip" placement="bottom">
+          <ToggleGroup.Item value="3214">tekst 2</ToggleGroup.Item>
+        </Tooltip>
+      </ToggleGroup>
+    </div>
+  );
+};
+
+export const All = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div style={{ margin: "4rem 8rem 4rem 8rem" }}>
+      <h2>Controlled</h2>
+      <Tooltip open={open} content="Controlled tooltip example" placement="top">
+        <Button onClick={() => setOpen((x) => !x)}>Toggle tooltip</Button>
+      </Tooltip>
+
+      <h2>no arrow</h2>
+      <Tooltip content="no arrow" placement="top" arrow={false}>
+        <Button>Tooltip</Button>
+      </Tooltip>
+
+      <h2>Keys</h2>
+      <Tooltip content="Tooltip" placement="top" open keys={["Cmd", "K"]}>
+        <Button>Tooltip</Button>
+      </Tooltip>
+      <h2>more offset</h2>
+      <Tooltip content="Tooltip" placement="top" open offset={20}>
+        <Button>Tooltip</Button>
+      </Tooltip>
+
+      <h2>all placements</h2>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          flexWrap: "wrap",
+          gap: "3rem",
+        }}
+      >
+        {["top", "left", "bottom", "right"].map((placement) => (
+          <div key={placement}>
+            <h3>{placement}</h3>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                flexWrap: "wrap",
+                gap: "3rem",
+              }}
+            >
+              <Tooltip
+                key={placement}
+                defaultOpen
+                content={placement}
+                placement={placement as any}
+              >
+                <Refresh aria-hidden tabIndex={0} />
+              </Tooltip>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const UUDemo = () => {
+  return (
+    <div>
+      <Button>Placeholder</Button>
+      <br />
+      <br />
+      <Tooltip content="Shortcut" placement="right" keys={["Cmd", "S"]}>
+        <Button>Lagre</Button>
+      </Tooltip>
+      <br />
+      <br />
+      <Button>Placeholder</Button>
+    </div>
+  );
+};

package/src/util/index.ts

@@ -44,3 +44,17 @@ export const useEventListener = <T extends ListenerT>(
     };
   }, [name, handler, target]);
 };
+
+/* https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx */
+export const composeEventHandlers = <E>(
+  originalEventHandler?: (event: E) => void,
+  ourEventHandler?: (event: E) => void
+) => {
+  return function handleEvent(event: E) {
+    originalEventHandler?.(event);
+
+    if (!((event as unknown) as Event).defaultPrevented) {
+      return ourEventHandler?.(event);
+    }
+  };
+};