@helsenorge/designsystem-react 9.3.0 → 9.4.1

package/components/Tile/index.js

@@ -1,49 +1,50 @@
-import { jsx as p, jsxs as N } from "react/jsx-runtime";
-import l from "react";
-import d from "classnames";
-import { AnalyticsId as S, IconSize as u } from "../../constants.js";
+import { jsx as d, jsxs as _ } from "react/jsx-runtime";
+import a from "react";
+import f from "classnames";
+import { AnalyticsId as S, IconSize as N } from "../../constants.js";
 import { useBreakpoint as j, Breakpoint as z } from "../../hooks/useBreakpoint.js";
 import { useHover as B } from "../../hooks/useHover.js";
 import { mergeRefs as E } from "../../utils/refs.js";
 import e from "./styles.module.scss";
-const T = l.forwardRef((r, s) => {
-  const { children: t, className: a, htmlMarkup: o = "span", highlighted: c } = r, n = d(
+const u = a.forwardRef((r, s) => {
+  const { compact: t, children: o, className: c, htmlMarkup: m = "span", highlighted: n } = r, p = f(
     e.tile__title,
     {
-      [e["tile__title--highlighted"]]: c
+      [e["tile__title--highlighted"]]: n,
+      [e["tile__title--compact"]]: t
     },
-    a
+    c
   );
-  return /* @__PURE__ */ p(o, { className: n, ref: s, children: t });
+  return /* @__PURE__ */ d(m, { className: p, ref: s, children: o });
 });
-T.displayName = "Title";
-const _ = l.forwardRef((r, s) => {
+u.displayName = "Title";
+const T = a.forwardRef((r, s) => {
   const {
     children: t,
-    icon: a,
-    title: o,
-    className: c = "",
+    icon: o,
+    title: c,
+    className: m = "",
     description: n,
-    fixed: f = !1,
-    highlighted: m = !1,
+    fixed: p = !1,
+    highlighted: i = !1,
     testId: k,
     target: h,
     rel: v,
     variant: C = "normal",
     href: b,
     onClick: w
-  } = r, { hoverRef: x, isHovered: y } = B(), g = j() < z.md, i = C === "compact", R = d(
+  } = r, { hoverRef: x, isHovered: y } = B(), g = j() < z.md, l = C === "compact", R = f(
     e.tile,
     {
-      [e["tile--fixed"]]: f,
-      [e["tile--compact"]]: i,
-      [e["tile--highlighted"]]: m
+      [e["tile--fixed"]]: p,
+      [e["tile--compact"]]: l,
+      [e["tile--highlighted"]]: i
     },
-    c
-  ), I = d(e["title-wrapper"], {
-    [e["title-wrapper--compact"]]: i
+    m
+  ), I = f(e["title-wrapper"], {
+    [e["title-wrapper--compact"]]: l
   });
-  return /* @__PURE__ */ N(
+  return /* @__PURE__ */ _(
     "a",
     {
       ref: E([s, x]),
@@ -55,20 +56,20 @@ const _ = l.forwardRef((r, s) => {
       "data-analyticsid": S.Tile,
       onClick: w,
       children: [
-        /* @__PURE__ */ N("div", { className: I, children: [
-          l.cloneElement(a, { size: g ? u.Small : u.Medium, isHovered: y, color: m ? "white" : "black" }),
-          l.cloneElement(o, { highlighted: m, compact: i })
+        /* @__PURE__ */ _("div", { className: I, children: [
+          a.cloneElement(o, { size: g ? N.Small : N.Medium, isHovered: y, color: i ? "white" : "black" }),
+          a.cloneElement(c, { highlighted: i, compact: l })
         ] }),
-        !i && !g && /* @__PURE__ */ p("p", { className: e.tile__description, children: n }),
-        t && /* @__PURE__ */ p("div", { className: e.tile__children, children: t })
+        !l && !g && /* @__PURE__ */ d("p", { className: e.tile__description, children: n }),
+        t && /* @__PURE__ */ d("div", { className: e.tile__children, children: t })
       ]
     }
   );
 });
-_.displayName = "Tile";
-_.Title = T;
+T.displayName = "Tile";
+T.Title = u;
 export {
-  _ as Tile,
-  _ as default
+  T as Tile,
+  T as default
 };
 //# sourceMappingURL=index.js.map

package/components/Tile/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { TitleTags } from './../Title/Title';\nimport { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { mergeRefs } from '../../utils/refs';\nimport { IconSize } from '../Icon';\n\nimport tileStyles from './styles.module.scss';\n\nexport type TileVariants = 'normal' | 'compact';\n\ninterface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tSets the icon to be displayed inside the tile. */\n  icon: React.ReactElement;\n  /**\tSets the title to be displayed inside the tile. */\n  title: React.ReactElement;\n  /** Toggles the highlighted style of the tile. */\n  highlighted?: boolean;\n  /** Sets the description to be displayed inside the tile. */\n  description?: string;\n  /** Sets a fixed max and min width for the tile. */\n  fixed?: boolean;\n  /** Sets the visual variant of the component */\n  variant?: TileVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n}\n\nexport interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {\n  Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n}\n\nconst Title = React.forwardRef<HTMLHeadingElement, TileTitleProps>((props, ref) => {\n  const { children, className, htmlMarkup = 'span', highlighted } = props;\n  const titleClasses = classNames(\n    tileStyles['tile__title'],\n    {\n      [tileStyles['tile__title--highlighted']]: highlighted,\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={titleClasses} ref={ref}>\n      {children}\n    </CustomTag>\n  );\n});\n\nTitle.displayName = 'Title';\n\nexport const Tile = React.forwardRef<HTMLAnchorElement, TileProps>((props, ref) => {\n  const {\n    children,\n    icon,\n    title,\n    className = '',\n    description,\n    fixed = false,\n    highlighted = false,\n    testId,\n    target,\n    rel,\n    variant = 'normal',\n    href,\n    onClick,\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLAnchorElement>();\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < Breakpoint.md;\n  const compact = variant === 'compact';\n  const tileClasses = classNames(\n    tileStyles.tile,\n    {\n      [tileStyles['tile--fixed']]: fixed,\n      [tileStyles['tile--compact']]: compact,\n      [tileStyles['tile--highlighted']]: highlighted,\n    },\n    className\n  );\n  const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n    [tileStyles['title-wrapper--compact']]: compact,\n  });\n\n  return (\n    <a\n      ref={mergeRefs([ref, hoverRef])}\n      href={href}\n      target={target}\n      rel={target === '_blank' ? 'noopener noreferrer' : rel}\n      className={tileClasses}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Tile}\n      onClick={onClick}\n    >\n      <div className={tileTitleWrapperClasses}>\n        {React.cloneElement(icon, { size: mobile ? IconSize.Small : IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n        {React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </div>\n      {!compact && !mobile && <p className={tileStyles.tile__description}>{description}</p>}\n      {children && <div className={tileStyles.tile__children}>{children}</div>}\n    </a>\n  );\n}) as TileCompound;\n\nTile.displayName = 'Tile';\nTile.Title = Title;\n\nexport default Tile;\n"],"names":["Title","React","props","ref","children","className","htmlMarkup","highlighted","titleClasses","classNames","tileStyles","jsx","Tile","icon","title","description","fixed","testId","target","rel","variant","href","onClick","hoverRef","isHovered","useHover","mobile","useBreakpoint","Breakpoint","compact","tileClasses","tileTitleWrapperClasses","jsxs","mergeRefs","AnalyticsId","IconSize"],"mappings":";;;;;;;;AA+CA,MAAMA,IAAQC,EAAM,WAA+C,CAACC,GAAOC,MAAQ;AACjF,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,YAAAC,IAAa,QAAQ,aAAAC,EAAgB,IAAAL,GAC5DM,IAAeC;AAAA,IACnBC,EAAW;AAAA,IACX;AAAA,MACE,CAACA,EAAW,0BAA0B,CAAC,GAAGH;AAAA,IAC5C;AAAA,IACAF;AAAA,EAAA;AAIF,SACG,gBAAAM,EAHeL,GAGf,EAAU,WAAWE,GAAc,KAAAL,GACjC,UAAAC,EACH,CAAA;AAEJ,CAAC;AAEDJ,EAAM,cAAc;AAEb,MAAMY,IAAOX,EAAM,WAAyC,CAACC,GAAOC,MAAQ;AAC3E,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,MAAAS;AAAA,IACA,OAAAC;AAAA,IACA,WAAAT,IAAY;AAAA,IACZ,aAAAU;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,aAAAT,IAAc;AAAA,IACd,QAAAU;AAAA,IACA,QAAAC;AAAA,IACA,KAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,SAAAC;AAAA,EACE,IAAApB,GACE,EAAE,UAAAqB,GAAU,WAAAC,EAAU,IAAIC,EAA4B,GAEtDC,IADaC,MACSC,EAAW,IACjCC,IAAUT,MAAY,WACtBU,IAAcrB;AAAA,IAClBC,EAAW;AAAA,IACX;AAAA,MACE,CAACA,EAAW,aAAa,CAAC,GAAGM;AAAA,MAC7B,CAACN,EAAW,eAAe,CAAC,GAAGmB;AAAA,MAC/B,CAACnB,EAAW,mBAAmB,CAAC,GAAGH;AAAA,IACrC;AAAA,IACAF;AAAA,EAAA,GAEI0B,IAA0BtB,EAAWC,EAAW,eAAe,GAAG;AAAA,IACtE,CAACA,EAAW,wBAAwB,CAAC,GAAGmB;AAAA,EAAA,CACzC;AAGC,SAAA,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKC,EAAU,CAAC9B,GAAKoB,CAAQ,CAAC;AAAA,MAC9B,MAAAF;AAAA,MACA,QAAAH;AAAA,MACA,KAAKA,MAAW,WAAW,wBAAwBC;AAAA,MACnD,WAAWW;AAAA,MACX,eAAab;AAAA,MACb,oBAAkBiB,EAAY;AAAA,MAC9B,SAAAZ;AAAA,MAEA,UAAA;AAAA,QAAC,gBAAAU,EAAA,OAAA,EAAI,WAAWD,GACb,UAAA;AAAA,UAAA9B,EAAM,aAAaY,GAAM,EAAE,MAAMa,IAASS,EAAS,QAAQA,EAAS,QAAQ,WAAAX,GAAW,OAAOjB,IAAc,UAAU,SAAS;AAAA,UAC/HN,EAAM,aAAaa,GAAO,EAAE,aAAAP,GAA0B,SAAAsB,GAAkB;AAAA,QAAA,GAC3E;AAAA,QACC,CAACA,KAAW,CAACH,uBAAW,KAAE,EAAA,WAAWhB,EAAW,mBAAoB,UAAYK,EAAA,CAAA;AAAA,QAChFX,KAAa,gBAAAO,EAAA,OAAA,EAAI,WAAWD,EAAW,gBAAiB,UAAAN,GAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxE,CAAC;AAEDQ,EAAK,cAAc;AACnBA,EAAK,QAAQZ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { TitleTags } from './../Title/Title';\nimport { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { mergeRefs } from '../../utils/refs';\nimport { IconSize } from '../Icon';\n\nimport tileStyles from './styles.module.scss';\n\nexport type TileVariants = 'normal' | 'compact';\n\ninterface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tSets the icon to be displayed inside the tile. */\n  icon: React.ReactElement;\n  /**\tSets the title to be displayed inside the tile. */\n  title: React.ReactElement;\n  /** Toggles the highlighted style of the tile. */\n  highlighted?: boolean;\n  /** Sets the description to be displayed inside the tile. */\n  description?: string;\n  /** Sets a fixed max and min width for the tile. */\n  fixed?: boolean;\n  /** Sets the visual variant of the component */\n  variant?: TileVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n}\n\nexport interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {\n  Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n}\n\nconst Title = React.forwardRef<HTMLHeadingElement, TileTitleProps>((props, ref) => {\n  const { compact, children, className, htmlMarkup = 'span', highlighted } = props;\n  const titleClasses = classNames(\n    tileStyles['tile__title'],\n    {\n      [tileStyles['tile__title--highlighted']]: highlighted,\n      [tileStyles['tile__title--compact']]: compact,\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={titleClasses} ref={ref}>\n      {children}\n    </CustomTag>\n  );\n});\n\nTitle.displayName = 'Title';\n\nexport const Tile = React.forwardRef<HTMLAnchorElement, TileProps>((props, ref) => {\n  const {\n    children,\n    icon,\n    title,\n    className = '',\n    description,\n    fixed = false,\n    highlighted = false,\n    testId,\n    target,\n    rel,\n    variant = 'normal',\n    href,\n    onClick,\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLAnchorElement>();\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < Breakpoint.md;\n  const compact = variant === 'compact';\n  const tileClasses = classNames(\n    tileStyles.tile,\n    {\n      [tileStyles['tile--fixed']]: fixed,\n      [tileStyles['tile--compact']]: compact,\n      [tileStyles['tile--highlighted']]: highlighted,\n    },\n    className\n  );\n  const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n    [tileStyles['title-wrapper--compact']]: compact,\n  });\n\n  return (\n    <a\n      ref={mergeRefs([ref, hoverRef])}\n      href={href}\n      target={target}\n      rel={target === '_blank' ? 'noopener noreferrer' : rel}\n      className={tileClasses}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Tile}\n      onClick={onClick}\n    >\n      <div className={tileTitleWrapperClasses}>\n        {React.cloneElement(icon, { size: mobile ? IconSize.Small : IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n        {React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </div>\n      {!compact && !mobile && <p className={tileStyles.tile__description}>{description}</p>}\n      {children && <div className={tileStyles.tile__children}>{children}</div>}\n    </a>\n  );\n}) as TileCompound;\n\nTile.displayName = 'Tile';\nTile.Title = Title;\n\nexport default Tile;\n"],"names":["Title","React","props","ref","compact","children","className","htmlMarkup","highlighted","titleClasses","classNames","tileStyles","jsx","Tile","icon","title","description","fixed","testId","target","rel","variant","href","onClick","hoverRef","isHovered","useHover","mobile","useBreakpoint","Breakpoint","tileClasses","tileTitleWrapperClasses","jsxs","mergeRefs","AnalyticsId","IconSize"],"mappings":";;;;;;;;AA+CA,MAAMA,IAAQC,EAAM,WAA+C,CAACC,GAAOC,MAAQ;AACjF,QAAM,EAAE,SAAAC,GAAS,UAAAC,GAAU,WAAAC,GAAW,YAAAC,IAAa,QAAQ,aAAAC,EAAgB,IAAAN,GACrEO,IAAeC;AAAA,IACnBC,EAAW;AAAA,IACX;AAAA,MACE,CAACA,EAAW,0BAA0B,CAAC,GAAGH;AAAA,MAC1C,CAACG,EAAW,sBAAsB,CAAC,GAAGP;AAAA,IACxC;AAAA,IACAE;AAAA,EAAA;AAIF,SACG,gBAAAM,EAHeL,GAGf,EAAU,WAAWE,GAAc,KAAAN,GACjC,UAAAE,EACH,CAAA;AAEJ,CAAC;AAEDL,EAAM,cAAc;AAEb,MAAMa,IAAOZ,EAAM,WAAyC,CAACC,GAAOC,MAAQ;AAC3E,QAAA;AAAA,IACJ,UAAAE;AAAA,IACA,MAAAS;AAAA,IACA,OAAAC;AAAA,IACA,WAAAT,IAAY;AAAA,IACZ,aAAAU;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,aAAAT,IAAc;AAAA,IACd,QAAAU;AAAA,IACA,QAAAC;AAAA,IACA,KAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,SAAAC;AAAA,EACE,IAAArB,GACE,EAAE,UAAAsB,GAAU,WAAAC,EAAU,IAAIC,EAA4B,GAEtDC,IADaC,MACSC,EAAW,IACjCzB,IAAUiB,MAAY,WACtBS,IAAcpB;AAAA,IAClBC,EAAW;AAAA,IACX;AAAA,MACE,CAACA,EAAW,aAAa,CAAC,GAAGM;AAAA,MAC7B,CAACN,EAAW,eAAe,CAAC,GAAGP;AAAA,MAC/B,CAACO,EAAW,mBAAmB,CAAC,GAAGH;AAAA,IACrC;AAAA,IACAF;AAAA,EAAA,GAEIyB,IAA0BrB,EAAWC,EAAW,eAAe,GAAG;AAAA,IACtE,CAACA,EAAW,wBAAwB,CAAC,GAAGP;AAAA,EAAA,CACzC;AAGC,SAAA,gBAAA4B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKC,EAAU,CAAC9B,GAAKqB,CAAQ,CAAC;AAAA,MAC9B,MAAAF;AAAA,MACA,QAAAH;AAAA,MACA,KAAKA,MAAW,WAAW,wBAAwBC;AAAA,MACnD,WAAWU;AAAA,MACX,eAAaZ;AAAA,MACb,oBAAkBgB,EAAY;AAAA,MAC9B,SAAAX;AAAA,MAEA,UAAA;AAAA,QAAC,gBAAAS,EAAA,OAAA,EAAI,WAAWD,GACb,UAAA;AAAA,UAAA9B,EAAM,aAAaa,GAAM,EAAE,MAAMa,IAASQ,EAAS,QAAQA,EAAS,QAAQ,WAAAV,GAAW,OAAOjB,IAAc,UAAU,SAAS;AAAA,UAC/HP,EAAM,aAAac,GAAO,EAAE,aAAAP,GAA0B,SAAAJ,GAAkB;AAAA,QAAA,GAC3E;AAAA,QACC,CAACA,KAAW,CAACuB,uBAAW,KAAE,EAAA,WAAWhB,EAAW,mBAAoB,UAAYK,EAAA,CAAA;AAAA,QAChFX,KAAa,gBAAAO,EAAA,OAAA,EAAI,WAAWD,EAAW,gBAAiB,UAAAN,GAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxE,CAAC;AAEDQ,EAAK,cAAc;AACnBA,EAAK,QAAQb;"}

package/components/Tile/styles.module.scss

@@ -6,24 +6,6 @@
 @import '../../scss/screen-reader';
 @import '../../scss/supernova/styles/colors';
 
-@mixin tile-title {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
-  font-size: $font-size-sm;
-  text-align: left;
-  line-height: 1.74rem;
-  font-weight: 400;
-  margin: getSpacer(3xs) 0 0 getSpacer(2xs);
-
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-weight: 600;
-    font-size: $font-size-md;
-    line-height: 1.625rem;
-    margin-top: getSpacer(s);
-  }
-}
-
 .tile {
   // Referanse for grandparent selection i underklassene lenger nede
   $tile: &;
@@ -93,7 +75,29 @@
   }
 
   &__title {
-    @include tile-title;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+    font-size: $font-size-sm;
+    text-align: left;
+    line-height: 1.74rem;
+    font-weight: 400;
+    margin: getSpacer(3xs) 0 0 getSpacer(2xs);
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      font-weight: 600;
+      font-size: $font-size-md;
+      line-height: 1.625rem;
+      margin-top: getSpacer(s);
+    }
+
+    &--compact {
+      margin: 0 0 0 getSpacer(3xs);
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
+        margin-left: getSpacer(2xs);
+      }
+    }
   }
 
   #{$tile}:focus-visible & {

package/components/Tile/styles.module.scss.d.ts

@@ -3,6 +3,7 @@ export type Styles = {
   tile__children: string;
   tile__description: string;
   tile__title: string;
+  'tile__title--compact': string;
   'tile__title--highlighted': string;
   'tile--compact': string;
   'tile--fixed': string;

package/hooks/useOutsideEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOutsideEvent.js","sources":["../../src/hooks/useOutsideEvent.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ntype OutsideEvents = keyof PickByValue<HTMLElementEventMap, MouseEvent | FocusEvent>;\n\n/**\n * Custom hook for klikk eller fokus utenfor et gitt element\n * @param ref Sjekker om det klikkes utenfor dette elementet\n * @param handleClick Callback-funksjon ved klikk utenfor elementet\n * @param events Type eventer å lytte på. Default: mousedown\n */\nexport const useOutsideEvent = (\n  ref: React.RefObject<HTMLElement>,\n  handleClick: (event: HTMLElementEventMap[OutsideEvents]) => void,\n  events: OutsideEvents[] = ['mousedown']\n): void => {\n  const handleOutsideEvent = (event: HTMLElementEventMap[OutsideEvents]): void => {\n    if (ref.current && !event.composedPath().includes(ref.current)) {\n      handleClick(event);\n    }\n  };\n\n  useEffect(() => {\n    events.forEach(eventName => document.addEventListener(eventName, handleOutsideEvent));\n\n    return () => {\n      events.forEach(eventName => document.removeEventListener(eventName, handleOutsideEvent));\n    };\n  }, [ref, handleClick, events]);\n};\n"],"names":["useOutsideEvent","ref","handleClick","events","handleOutsideEvent","event","useEffect","eventName"],"mappings":";AAUO,MAAMA,IAAkB,CAC7BC,GACAC,GACAC,IAA0B,CAAC,WAAW,MAC7B;AACH,QAAAC,IAAqB,CAACC,MAAoD;AAC1E,IAAAJ,EAAI,WAAW,CAACI,EAAM,eAAe,SAASJ,EAAI,OAAO,KAC3DC,EAAYG,CAAK;AAAA,EACnB;AAGF,EAAAC,EAAU,OACRH,EAAO,QAAQ,CAAaI,MAAA,SAAS,iBAAiBA,GAAWH,CAAkB,CAAC,GAE7E,MAAM;AACX,IAAAD,EAAO,QAAQ,CAAaI,MAAA,SAAS,oBAAoBA,GAAWH,CAAkB,CAAC;AAAA,EAAA,IAExF,CAACH,GAAKC,GAAaC,CAAM,CAAC;AAC/B;"}
+{"version":3,"file":"useOutsideEvent.js","sources":["../../src/hooks/useOutsideEvent.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ntype OutsideEvents = keyof PickByValue<HTMLElementEventMap, MouseEvent | FocusEvent>;\n\n/**\n * Custom hook for klikk eller fokus utenfor et gitt element\n * @param ref Sjekker om det klikkes utenfor dette elementet\n * @param handleClick Callback-funksjon ved klikk utenfor elementet\n * @param events Type eventer å lytte på. Default: mousedown\n */\nexport const useOutsideEvent = (\n  ref: React.RefObject<HTMLElement>,\n  handleClick: (event: HTMLElementEventMap[OutsideEvents]) => void,\n  events: OutsideEvents[] = ['mousedown']\n): void => {\n  const handleOutsideEvent = (event: HTMLElementEventMap[OutsideEvents]): void => {\n    if (ref.current && !event.composedPath().includes(ref.current)) {\n      handleClick(event);\n    }\n  };\n\n  useEffect(() => {\n    events.forEach(eventName => document.addEventListener(eventName, handleOutsideEvent));\n\n    return (): void => {\n      events.forEach(eventName => document.removeEventListener(eventName, handleOutsideEvent));\n    };\n  }, [ref, handleClick, events]);\n};\n"],"names":["useOutsideEvent","ref","handleClick","events","handleOutsideEvent","event","useEffect","eventName"],"mappings":";AAUO,MAAMA,IAAkB,CAC7BC,GACAC,GACAC,IAA0B,CAAC,WAAW,MAC7B;AACH,QAAAC,IAAqB,CAACC,MAAoD;AAC1E,IAAAJ,EAAI,WAAW,CAACI,EAAM,eAAe,SAASJ,EAAI,OAAO,KAC3DC,EAAYG,CAAK;AAAA,EACnB;AAGF,EAAAC,EAAU,OACRH,EAAO,QAAQ,CAAaI,MAAA,SAAS,iBAAiBA,GAAWH,CAAkB,CAAC,GAE7E,MAAY;AACjB,IAAAD,EAAO,QAAQ,CAAaI,MAAA,SAAS,oBAAoBA,GAAWH,CAAkB,CAAC;AAAA,EAAA,IAExF,CAACH,GAAKC,GAAaC,CAAM,CAAC;AAC/B;"}

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "9.3.0",
+  "version": "9.4.1",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {