@navikt/ds-react 0.17.16 → 0.17.19

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":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EACZ,YAAY,EACZ,UAAU,EAEV,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,oBAAoB,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,IAAI,CAAC;AACpE,OAAO,EACL,WAAW,EACX,KAAK,IAAI,OAAO,EAChB,KAAK,EACL,UAAU,EACV,IAAI,EACJ,IAAI,GACL,MAAM,wBAAwB,CAAC;AAChC,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAmDhC,MAAM,OAAO,GAAG,UAAU,CACxB,CACE,EAcC,EACD,GAAG,EACH,EAAE;QAhBF,EACE,QAAQ,EACR,SAAS,EACT,KAAK,EAAE,MAAM,GAAG,IAAI,EACpB,SAAS,EAAE,UAAU,GAAG,KAAK,EAC7B,IAAI,EACJ,WAAW,GAAG,KAAK,EACnB,MAAM,EAAE,OAAO,EACf,OAAO,EACP,KAAK,GAAG,GAAG,EACX,EAAE,EACF,IAAI,EACJ,OAAO,GAAG,EAAE,OAEb,EADI,IAAI,cAbT,6HAcC,CADQ;IAIT,MAAM,QAAQ,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACrD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAClD,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAC/B,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAChC,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAErC,MAAM,MAAM,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC;IAEzB,MAAM,EACJ,CAAC,EACD,CAAC,EACD,MAAM,EACN,SAAS,EACT,IAAI,EACJ,cAAc,EAAE,EACd,KAAK,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EACpC,IAAI,EAAE,EAAE,eAAe,EAAE,GAAG,EAAE,GAC/B,GACF,GAAG,WAAW,CAAC;QACd,SAAS,EAAE,UAAU;QACrB,UAAU,EAAE;YACV,KAAK,EAAE;YACP,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,kBAAkB,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;YAC3D,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;YAC1C,IAAI,EAAE;SACP;KACF,CAAC,CAAC;IAEH,qDAAqD;IACrD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YACrD,OAAO;SACR;QAED,uDAAuD;QACvD,OAAO,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAC3E,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;IAE1D,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC1C,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC3C,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC1C,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC3C,YAAY,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YAC5C,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,EAAE,KAAK,CAAC,CAAC;IACZ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC1C,aAAa,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YAC7C,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IACT,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,aAAa,GAAG,WAAW,CAC/B,GAAG,EAAE,CAAC,CAAC,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC,EACtC,EAAE,CACH,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,uDAAuD;QACvD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,gBAAgB,CACd,SAAS,EACT,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,WAAW,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,EACtE,QAAQ,CACT,CAAC;IAEF,4DAA4D;IAC5D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE;QAC/D,GAAG;QACH,IAAI,CAAC,QAAQ;KACd,CAAC,CAAC;IAEH,IACE,CAAC,QAAQ;QACT,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,MAAK,KAAK,CAAC,QAAQ;QAChC,QAAgB,KAAK,KAAK,CAAC,QAAQ,EACpC;QACA,OAAO,CAAC,KAAK,CACX,sFAAsF,CACvF,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,IAAG,OAAO,EAAE;QAC7B,OAAO,CAAC,KAAK,CACX,6IAA6I,CAC9I,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL;QACG,YAAY,CAAC,QAAQ,kCACjB,QAAQ,CAAC,KAAK,KACjB,kBAAkB,EAChB,IAAI,IAAI,MAAM;gBACZ,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC;gBACjD,CAAC,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAC,kBAAkB,CAAC,EACzC,GAAG,EAAE,SAAS,CAAC,CAAE,QAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,EACvD,YAAY,EAAE,oBAAoB,CAChC,QAAQ,CAAC,KAAK,CAAC,YAAY,EAC3B,iBAAiB,CAClB,EACD,YAAY,EAAE,oBAAoB,CAChC,QAAQ,CAAC,KAAK,CAAC,YAAY,EAC3B,WAAW,CACZ,EACD,WAAW,EAAE,oBAAoB,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,GAAG,EAAE;gBACjE,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC9B,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;YACtE,CAAC,CAAC,EACF,OAAO,EAAE,oBAAoB,CAC3B,QAAQ,CAAC,KAAK,CAAC,OAAO,EACtB,GAAG,EAAE,CAAC,CAAC,cAAc,CAAC,OAAO,IAAI,UAAU,EAAE,CAC9C,EACD,MAAM,EAAE,oBAAoB,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC,IAChE;QACD,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,MAAM,CAAC,IAAI,CACnB,oBAAC,MAAM;YACL,2CACE,GAAG,EAAE,SAAS,IACV,IAAI,IACR,YAAY,EAAE,UAAU,EACxB,YAAY,EAAE,WAAW,EACzB,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,MAAM,EACV,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,GAAG,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,EAAE;oBACZ,IAAI,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,EAAE;oBACb,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;iBACnD,eACU,SAAS,EACpB,SAAS,EAAE,EAAE,CACX,eAAe,EACf,kCAAkC,EAClC,SAAS,CACV;gBAED,6BACE,SAAS,EAAC,sBAAsB,EAChC,KAAK,EAAE;wBACL,CAAC;4BACC,GAAG,EAAE,cAAc;4BACnB,KAAK,EAAE,YAAY;4BACnB,MAAM,EAAE,WAAW;4BACnB,IAAI,EAAE,aAAa;yBACpB,CAAC,SAAS,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;qBACnD;oBAEA,OAAO;oBACP,IAAI,IAAI,CACP,8BAAM,SAAS,EAAC,qBAAqB,IAClC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,oBAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,KAAK,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,oBAAoB,IAE7B,GAAG,CACG,CACV,CAAC,CACG,CACR;oBACA,MAAM,IAAI,CACT,6BACE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;4BACZ,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;wBAC1B,CAAC,EACD,SAAS,EAAC,sBAAsB,EAChC,KAAK,EAAE;4BACL,IAAI,EAAE,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,EAAE;4BACzC,GAAG,EAAE,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,EAAE;4BACxC,KAAK,EAAE,EAAE;4BACT,MAAM,EAAE,EAAE;4BAEV,CAAC;gCACC,GAAG,EAAE,QAAQ;gCACb,KAAK,EAAE,MAAM;gCACb,MAAM,EAAE,KAAK;gCACb,IAAI,EAAE,OAAO;6BACd,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ;yBACxB,GACD,CACH,CACG,CACF,CACC,CACV,CACA,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC"}

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.19",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -27,15 +27,16 @@
     "/src"
   ],
   "scripts": {
-    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
+    "create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
     "clean": "rimraf cjs esm",
     "build": "yarn run clean && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
     "watch": "tsc --watch -p tsconfig.esm.json",
     "test": "jest"
   },
   "dependencies": {
+    "@floating-ui/react-dom": "0.6.0",
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.8.6",
+    "@navikt/ds-icons": "^0.8.7",
     "@popperjs/core": "^2.10.1",
     "@radix-ui/react-tabs": "0.1.5",
     "@radix-ui/react-toggle-group": "0.1.5",
@@ -68,5 +69,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "61f6b62c9e20e095d220631b5c9fa1d7a7cada38"
+  "gitHead": "31bd40c02cde72ad9aeea011a2005ba8660718cc"
 }

package/src/form/search/Search.tsx

@@ -1,10 +1,9 @@
-import { Close } from "@navikt/ds-icons";
+import { Close, Search as SearchIcon } from "@navikt/ds-icons";
 import cl from "classnames";
 import React, {
   forwardRef,
   InputHTMLAttributes,
   useCallback,
-  useEffect,
   useRef,
   useState,
 } from "react";
@@ -59,9 +58,9 @@ export interface SearchProps
   clearButton?: boolean;
   /**
    * Changes button-variant
-   * @default "tertiary"
+   * @default "primary"
    */
-  variant?: "tertiary" | "primary";
+  variant?: "primary" | "secondary" | "simple";
 }
 
 interface SearchComponent
@@ -74,8 +73,8 @@ interface SearchComponent
 export interface SearchContextProps {
   disabled?: boolean;
   size: "medium" | "small";
-  variant?: "tertiary" | "primary";
-  onSearch?: () => void;
+  variant: "primary" | "secondary" | "simple";
+  onSearch: () => void;
 }
 
 export const SearchContext = React.createContext<SearchContextProps | null>(
@@ -99,7 +98,9 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
     clearButton = true,
     children,
     onSearch,
-    variant = "tertiary",
+    variant = "primary",
+    defaultValue,
+    onChange,
     ...rest
   } = props;
 
@@ -107,26 +108,23 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
   const mergedRef = mergeRefs([searchRef, ref]);
   const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
 
-  const [controlledValue, setControlledValue] = useState(value ?? "");
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
 
   const handleChange = useCallback(
     (v: string) => {
-      searchRef.current && value === undefined && setControlledValue(v);
-      props?.onChange?.(v);
+      value === undefined && setInternalValue(v);
+      onChange?.(v);
     },
-    [props, value]
+    [onChange, value]
   );
 
   const handleClear = useCallback(
     (event: SearchClearEvent) => {
       onClear?.(event);
       handleChange("");
-      if (searchRef.current && value === undefined) {
-        searchRef.current.value = "";
-      }
       searchRef.current && searchRef.current?.focus?.();
     },
-    [handleChange, onClear, value]
+    [handleChange, onClear]
   );
 
   useEventListener(
@@ -143,10 +141,6 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
     wrapperRef
   );
 
-  useEffect(() => {
-    value !== undefined && setControlledValue(value);
-  }, [value]);
-
   return (
     <div
       ref={setWrapperRef}
@@ -184,23 +178,27 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
       )}
       <div className="navds-search__wrapper">
         <div className="navds-search__wrapper-inner">
+          {variant === "simple" && (
+            <SearchIcon aria-hidden className="navds-search__search-icon" />
+          )}
           <input
             ref={mergedRef}
             {...omit(rest, ["size"])}
             {...inputProps}
-            {...(props.value !== undefined && { value: props.value })}
+            value={value ?? internalValue}
             onChange={(e) => handleChange(e.target.value)}
             type="search"
             role="searchbox"
             className={cl(
               className,
               "navds-search__input",
+              `navds-search__input--${variant}`,
               "navds-text-field__input",
               "navds-body-short",
-              `navds-body-${size ?? "medium"}`
+              `navds-body-${size}`
             )}
           />
-          {controlledValue && clearButton && (
+          {(value ?? internalValue) && clearButton && (
             <button
               type="button"
               onClick={(e) => handleClear({ trigger: "Click", event: e })}
@@ -218,10 +216,10 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
             size,
             disabled: inputProps.disabled,
             variant,
-            onSearch: () => onSearch?.(controlledValue),
+            onSearch: () => onSearch?.(value ?? internalValue),
           }}
         >
-          {children ? children : <SearchButton />}
+          {children ? children : variant !== "simple" && <SearchButton />}
         </SearchContext.Provider>
       </div>
     </div>

package/src/form/search/SearchButton.tsx

@@ -33,7 +33,7 @@ const SearchButton: SearchButtonType = forwardRef(
         {...rest}
         ref={ref}
         size={size}
-        variant={variant}
+        variant={variant === "secondary" ? "secondary" : "primary"}
         className={cl("navds-search__button-search", className)}
         disabled={context?.disabled ?? disabled}
         onClick={(e) => {

package/src/form/search/search-themes.stories.tsx

@@ -0,0 +1,52 @@
+import { Meta } from "@storybook/react/types-6-0";
+import React from "react";
+import { Heading } from "../..";
+import { Search } from "..";
+
+export default {
+  title: "ds-react/form/search",
+  component: Search,
+} as Meta;
+
+export const LightTheme = () => (
+  <div
+    style={{ maxWidth: 400, display: "flex", flexDirection: "column", gap: 16 }}
+  >
+    <Heading size="xlarge">Search</Heading>
+    <Heading level="2" size="large">
+      size medium
+    </Heading>
+    <Search label="hidden label" placeholder="Søk" />
+    <Search label="hidden label" variant="secondary" defaultValue="dagpenger" />
+    <Search label="hidden label" variant="simple" placeholder="Søk" />
+    <Search label="with label" hideLabel={false} />
+
+    <Heading level="2" size="large">
+      size small
+    </Heading>
+    <Search label="hidden label" size="small" placeholder="Søk" />
+    <Search
+      label="hidden label"
+      variant="secondary"
+      size="small"
+      defaultValue="dagpenger"
+    />
+    <Search
+      label="hidden label"
+      variant="simple"
+      size="small"
+      placeholder="Søk"
+    />
+    <Search label="with label" hideLabel={false} size="small" />
+  </div>
+);
+
+export const DarkTheme = () => (
+  <div data-theme="dark">
+    <LightTheme />
+  </div>
+);
+
+DarkTheme.parameters = {
+  backgrounds: { default: "dark" },
+};

package/src/form/search/search.stories.tsx

@@ -21,11 +21,18 @@ export const All = () => {
       <h1>Search</h1>
 
       <Search label="Søk alle sider om X og Y" onSearch={console.log}></Search>
-      <h2>Primary search</h2>
+      <h2>Secondary</h2>
       <Search
         label="Søk alle sider om X og Y"
         onSearch={console.log}
-        variant="primary"
+        variant="secondary"
+      ></Search>
+
+      <h2>No button</h2>
+      <Search
+        label="Søk alle sider om X og Y"
+        onSearch={console.log}
+        variant="simple"
       ></Search>
 
       <h2>Search small</h2>
@@ -42,7 +49,7 @@ export const All = () => {
         description="Beskrivelse av søket"
         size="small"
         hideLabel
-        variant="primary"
+        variant="secondary"
       >
         <Search.Button />
       </Search>

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",