@helsenorge/designsystem-react 8.0.2 → 8.1.1

package/components/Tabs/TabList/TabList.js

@@ -1,55 +1,28 @@
-import t, { useRef as k } from "react";
-import C from "classnames";
-import { useIsVisible as v } from "../../../hooks/useIsVisible.js";
-import { useRovingFocus as L } from "../../../hooks/useRovingFocus.js";
-import { palette as a } from "../../../theme/palette.js";
-import { isComponent as V } from "../../../utils/component.js";
-import { Icon as w } from "../../Icon/Icon.js";
-import { IconSize as y } from "../../../constants.js";
-import { LazyIcon as X } from "../../LazyIcon/LazyIcon.js";
-import B from "../Tab.js";
-import o from "../../Tabs/TabList/styles.module.scss";
-const P = (d) => {
-  const { selectedTab: h, onTabListClick: m, children: b, color: I = "white", type: T = "normal" } = d, i = k(null), r = k(t.Children.map(b, () => t.createRef()));
-  L(m, r, i, !0);
-  const E = C(o["tab-list"], o[`tab-list--${T}`]), R = v(i);
-  return /* @__PURE__ */ t.createElement("ul", { className: E, ref: i, role: "tablist", "aria-orientation": "horizontal" }, t.Children.map(b, (f, e) => {
-    if (V(f, B)) {
-      const s = e === h, { title: n, onTabClick: p, icon: l, testId: z } = f.props, N = () => {
-        p && p(e), m(e), u(e);
-      }, S = C(o["tab-list__tab"], o[`tab-list__tab--${I}`], {
-        [o["tab-list__tab--selected"]]: s,
-        [o["tab-list__tab--first"]]: e == 0
-      }), $ = r.current && r.current[e], u = (g) => {
-        var _;
-        const c = r.current && r.current[g];
-        (_ = c == null ? void 0 : c.current) == null || _.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
-      };
-      return s && R && u(e), /* @__PURE__ */ t.createElement("li", { role: "presentation", key: `${n}` }, /* @__PURE__ */ t.createElement(
-        "button",
-        {
-          role: "tab",
-          "aria-selected": s,
-          onClick: N,
-          className: S,
-          key: `${n}`,
-          "data-testid": z,
-          ref: $
-        },
-        /* @__PURE__ */ t.createElement("span", { className: o["tab-list__tab__title-and-icon"] }, l && (typeof l == "string" ? /* @__PURE__ */ t.createElement(
-          X,
-          {
-            iconName: l,
-            size: y.XSmall,
-            color: s ? a.black : a.blueberry500
-          }
-        ) : /* @__PURE__ */ t.createElement(w, { svgIcon: l, size: y.XSmall, color: s ? a.black : a.blueberry500 })), n)
-      ));
+import t, { useRef as l } from "react";
+import b from "classnames";
+import R from "./TabItem.js";
+import { useRovingFocus as C } from "../../../hooks/useRovingFocus.js";
+import { isComponent as T } from "../../../utils/component.js";
+import d from "../Tab.js";
+import i from "../../Tabs/TabList/styles.module.scss";
+const g = (m) => {
+  const { selectedTab: n, onTabListClick: r, children: o, color: p = "white", type: f = "normal" } = m, s = l(null), a = l(t.Children.map(o, () => t.createRef()));
+  C(r, a, s, !0);
+  const c = b(i["tab-list"], i[`tab-list--${f}`]);
+  return /* @__PURE__ */ t.createElement("ul", { className: c, ref: s, role: "tablist", "aria-orientation": "horizontal" }, t.Children.map(o, (e, u) => T(e, d) ? /* @__PURE__ */ t.createElement(
+    R,
+    {
+      tabRefs: a,
+      key: e.props.title,
+      index: u,
+      selectedTab: n,
+      onTabListClick: r,
+      tabProps: e.props,
+      color: p
     }
-    return null;
-  }));
+  ) : null));
 };
 export {
-  P as default
+  g as default
 };
 //# sourceMappingURL=TabList.js.map

package/components/Tabs/TabList/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { palette } from '../../../theme/palette';\nimport { isComponent } from '../../../utils/component';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport Tab from '../Tab';\nimport { TabsColors, TabsType } from '../Tabs';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color?: TabsColors;\n  type?: TabsType;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color = 'white', type = 'normal' } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()));\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${type}`]);\n\n  const isVisible = useIsVisible(listRef);\n\n  return (\n    <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n      {React.Children.map(children, (child, index) => {\n        if (isComponent(child, Tab)) {\n          const isSelected = index === selectedTab;\n          const { title, onTabClick, icon, testId } = child.props;\n          const handleClick = (): void => {\n            onTabClick && onTabClick(index);\n            onTabListClick(index);\n            scrollToTab(index);\n          };\n          const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${color}`], {\n            [styles['tab-list__tab--selected']]: isSelected,\n            [styles['tab-list__tab--first']]: index == 0,\n          });\n\n          const currentRef = tabRefs.current && tabRefs.current[index];\n\n          const scrollToTab = (index: number): void => {\n            const currentRef = tabRefs.current && tabRefs.current[index];\n            currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\n          };\n\n          if (isSelected && isVisible) scrollToTab(index);\n\n          return (\n            <li role=\"presentation\" key={`${title}`}>\n              <button\n                role=\"tab\"\n                aria-selected={isSelected}\n                onClick={handleClick}\n                className={tabButtonClasses}\n                key={`${title}`}\n                data-testid={testId}\n                ref={currentRef as React.RefObject<HTMLButtonElement>}\n              >\n                <span className={styles['tab-list__tab__title-and-icon']}>\n                  {icon &&\n                    (typeof icon === 'string' ? (\n                      <LazyIcon\n                        iconName={icon as IconName}\n                        size={IconSize.XSmall}\n                        color={isSelected ? palette[`black`] : palette['blueberry500']}\n                      />\n                    ) : (\n                      <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n                    ))}\n                  {title}\n                </span>\n              </button>\n            </li>\n          );\n        }\n        return null;\n      })}\n    </ul>\n  );\n};\n\nexport default TabList;\n"],"names":["TabList","props","selectedTab","onTabListClick","children","color","type","listRef","useRef","tabRefs","React","useRovingFocus","tablistClasses","classNames","styles","isVisible","useIsVisible","child","index","isComponent","Tab","isSelected","title","onTabClick","icon","testId","handleClick","scrollToTab","tabButtonClasses","currentRef","LazyIcon","IconSize","palette","Icon"],"mappings":";;;;;;;;;;;AAuBA,MAAMA,IAAkC,CAASC,MAAA;AACzC,QAAA,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,UAAAC,GAAU,OAAAC,IAAQ,SAAS,MAAAC,IAAO,SAAa,IAAAL,GAE9EM,IAAUC,EAAyB,IAAI,GAEvCC,IAAUD,EAAOE,EAAM,SAAS,IAAIN,GAAU,MAAMM,EAAM,UAA8B,CAAA,CAAC;AAChF,EAAAC,EAAAR,GAAgBM,GAASF,GAAS,EAAI;AAE/C,QAAAK,IAAiBC,EAAWC,EAAO,UAAU,GAAGA,EAAO,aAAaR,CAAI,EAAE,CAAC,GAE3ES,IAAYC,EAAaT,CAAO;AAEtC,yCACG,MAAG,EAAA,WAAWK,GAAgB,KAAKL,GAAS,MAAK,WAAU,oBAAiB,aAAA,GAC1EG,EAAM,SAAS,IAAIN,GAAU,CAACa,GAAOC,MAAU;AAC1C,QAAAC,EAAYF,GAAOG,CAAG,GAAG;AAC3B,YAAMC,IAAaH,MAAUhB,GACvB,EAAE,OAAAoB,GAAO,YAAAC,GAAY,MAAAC,GAAM,QAAAC,MAAWR,EAAM,OAC5CS,IAAc,MAAY;AAC9B,QAAAH,KAAcA,EAAWL,CAAK,GAC9Bf,EAAee,CAAK,GACpBS,EAAYT,CAAK;AAAA,MAAA,GAEbU,IAAmBf,EAAWC,EAAO,eAAe,GAAGA,EAAO,kBAAkBT,CAAK,EAAE,GAAG;AAAA,QAC9F,CAACS,EAAO,yBAAyB,CAAC,GAAGO;AAAA,QACrC,CAACP,EAAO,sBAAsB,CAAC,GAAGI,KAAS;AAAA,MAAA,CAC5C,GAEKW,IAAapB,EAAQ,WAAWA,EAAQ,QAAQS,CAAK,GAErDS,IAAc,CAACT,MAAwB;;AAC3C,cAAMW,IAAapB,EAAQ,WAAWA,EAAQ,QAAQS,CAAK;AAC3DW,SAAAA,IAAAA,KAAAA,gBAAAA,EAAY,YAAZA,QAAAA,EAAqB,eAAe,EAAE,UAAU,UAAU,QAAQ,UAAU,OAAO,UAAA;AAAA,MAAW;AAG5F,aAAAR,KAAcN,KAAWY,EAAYT,CAAK,mCAG3C,MAAG,EAAA,MAAK,gBAAe,KAAK,GAAGI,CAAK,GACnC,GAAAZ,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,iBAAeW;AAAA,UACf,SAASK;AAAA,UACT,WAAWE;AAAA,UACX,KAAK,GAAGN,CAAK;AAAA,UACb,eAAaG;AAAA,UACb,KAAKI;AAAA,QAAA;AAAA,QAELnB,gBAAAA,EAAA,cAAC,UAAK,WAAWI,EAAO,+BAA+B,EACpD,GAAAU,MACE,OAAOA,KAAS,WACfd,gBAAAA,EAAA;AAAA,UAACoB;AAAA,UAAA;AAAA,YACC,UAAUN;AAAA,YACV,MAAMO,EAAS;AAAA,YACf,OAAOV,IAAaW,EAAQ,QAAWA,EAAQ;AAAA,UAAc;AAAA,QAAA,IAG9DtB,gBAAAA,EAAA,cAAAuB,GAAA,EAAK,SAAST,GAAM,MAAMO,EAAS,QAAQ,OAAOV,IAAaW,EAAQ,QAAWA,EAAQ,aAAc,CAAG,IAE/GV,CACH;AAAA,MAAA,CAEJ;AAAA,IAEJ;AACO,WAAA;AAAA,EACR,CAAA,CACH;AAEJ;"}
+{"version":3,"file":"TabList.js","sources":["../../../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport TabItem from './TabItem';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab, { TabProps } from '../Tab';\nimport { TabsColors, TabsType } from '../Tabs';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color?: TabsColors;\n  type?: TabsType;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color = 'white', type = 'normal' } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()));\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${type}`]);\n\n  return (\n    <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n      {React.Children.map(children, (child, index) => {\n        if (isComponent<TabProps>(child, Tab)) {\n          return (\n            <TabItem\n              tabRefs={tabRefs}\n              key={child.props.title}\n              index={index}\n              selectedTab={selectedTab}\n              onTabListClick={onTabListClick}\n              tabProps={child.props}\n              color={color}\n            />\n          );\n        }\n        return null;\n      })}\n    </ul>\n  );\n};\n\nexport default TabList;\n"],"names":["TabList","props","selectedTab","onTabListClick","children","color","type","listRef","useRef","tabRefs","React","useRovingFocus","tablistClasses","classNames","styles","child","index","isComponent","Tab","TabItem"],"mappings":";;;;;;;AAmBA,MAAMA,IAAkC,CAASC,MAAA;AACzC,QAAA,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,UAAAC,GAAU,OAAAC,IAAQ,SAAS,MAAAC,IAAO,SAAa,IAAAL,GAE9EM,IAAUC,EAAyB,IAAI,GAEvCC,IAAUD,EAAOE,EAAM,SAAS,IAAIN,GAAU,MAAMM,EAAM,UAA8B,CAAA,CAAC;AAChF,EAAAC,EAAAR,GAAgBM,GAASF,GAAS,EAAI;AAE/C,QAAAK,IAAiBC,EAAWC,EAAO,UAAU,GAAGA,EAAO,aAAaR,CAAI,EAAE,CAAC;AAEjF,yCACG,MAAG,EAAA,WAAWM,GAAgB,KAAKL,GAAS,MAAK,WAAU,oBAAiB,aAAA,GAC1EG,EAAM,SAAS,IAAIN,GAAU,CAACW,GAAOC,MAChCC,EAAsBF,GAAOG,CAAG,IAEhCR,gBAAAA,EAAA;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,SAAAV;AAAA,MACA,KAAKM,EAAM,MAAM;AAAA,MACjB,OAAAC;AAAA,MACA,aAAAd;AAAA,MACA,gBAAAC;AAAA,MACA,UAAUY,EAAM;AAAA,MAChB,OAAAV;AAAA,IAAA;AAAA,EAAA,IAIC,IACR,CACH;AAEJ;"}

package/components/Tabs/Tabs.d.ts

@@ -4,6 +4,7 @@ import { PaletteNames } from '../../theme/palette';
 export type { TabProps } from './Tab';
 export type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;
 export type TabsType = 'normal' | 'framed';
+export type TabsTouchBehaviour = 'swipe' | 'none';
 export interface TabsProps {
     children?: React.ReactNode;
     /** Controlled state for Tabs component */
@@ -14,6 +15,8 @@ export interface TabsProps {
     color?: TabsColors;
     /** Whether the tab list should be sticky */
     sticky?: boolean;
+    /** Determines how Tabs respons to touch events. */
+    touchBehaviour?: TabsTouchBehaviour;
     /** Sets the data-testid attribute. */
     testId?: string;
     /** Sets the visual type of the tabs */

package/components/Tabs/Tabs.js

@@ -1,53 +1,59 @@
-import r, { useState as c, useRef as v, useEffect as A } from "react";
-import C from "classnames";
-import W from "./Tab.js";
-import $ from "./TabList/TabList.js";
-import j from "./TabPanel/TabPanel.js";
-import { useSticky as q } from "../../hooks/useSticky.js";
-import { isMobileUA as z } from "../../utils/mobile.js";
+import r, { useState as c, useRef as E, useEffect as C } from "react";
+import S from "classnames";
+import j from "./Tab.js";
+import q from "./TabList/TabList.js";
+import z from "./TabPanel/TabPanel.js";
+import { isMobileUA as G } from "../../utils/mobile.js";
 import l from "../Tabs/styles.module.scss";
-const B = 75, G = ({ activeTab: L, children: m, className: M, color: f = "white", sticky: N = !0, testId: g, type: u = "normal" }) => {
-  const w = L !== void 0, [x, y] = c(0), [d, k] = c(0), [h, D] = c(0), [P, a] = c(0), [U, p] = c(null), X = z(), n = v(null), s = v(null), R = v(null), T = (t, o) => {
-    w || (y(t), t > o ? (a(0), F()) : t < o && (a(0), _()));
-  }, _ = () => {
-    X && p("right");
+const H = 75, J = ({
+  activeTab: w,
+  children: m,
+  className: M,
+  color: f = "white",
+  sticky: N = !0,
+  testId: g,
+  type: u = "normal",
+  touchBehaviour: L = "swipe"
+}) => {
+  const X = w !== void 0, [x, y] = c(0), [d, D] = c(0), [p, P] = c(0), [k, a] = c(0), [U, h] = c(null), R = G(), n = E(null), s = E(null), _ = E(null), T = (t, o) => {
+    X || (y(t), t > o ? (a(0), I()) : t < o && (a(0), F()));
   }, F = () => {
-    X && p("left");
+    R && h("right");
   }, I = () => {
-    p(null);
-  }, e = w ? L : x;
-  A(() => {
+    R && h("left");
+  }, $ = () => {
+    h(null);
+  }, e = X ? w : x;
+  return C(() => {
     const t = (i) => {
-      k(i.touches[0].clientX);
-    }, o = (i) => {
       D(i.touches[0].clientX);
+    }, o = (i) => {
+      P(i.touches[0].clientX);
       const b = i.touches[0].clientX - d;
       e === 0 && b > 0 || e === r.Children.count(m) - 1 && b < 0 ? a(0) : a(b);
-    }, S = () => {
-      Math.abs(h - d) >= B && (h > d ? T(Math.max(0, e - 1), e) : T(Math.min(r.Children.count(m) - 1, e + 1), e)), a(0);
+    }, A = () => {
+      Math.abs(p - d) >= H && (p > d ? T(Math.max(0, e - 1), e) : T(Math.min(r.Children.count(m) - 1, e + 1), e)), a(0);
     };
-    return n.current && (n.current.addEventListener("touchstart", t), n.current.addEventListener("touchmove", o), n.current.addEventListener("touchend", S)), () => {
-      n.current && (n.current.removeEventListener("touchstart", t), n.current.removeEventListener("touchmove", o), n.current.removeEventListener("touchend", S));
+    return L === "swipe" && n.current && (n.current.addEventListener("touchstart", t), n.current.addEventListener("touchmove", o), n.current.addEventListener("touchend", A)), () => {
+      n.current && (n.current.removeEventListener("touchstart", t), n.current.removeEventListener("touchmove", o), n.current.removeEventListener("touchend", A));
     };
-  }, [d, h, e]), A(() => {
+  }, [L, d, p, e]), C(() => {
     const t = () => {
-      I();
+      $();
     };
     return s.current && s.current.addEventListener("animationend", t), () => {
       s.current && s.current.removeEventListener("animationend", t);
     };
-  }, []);
-  const { isOutsideWindow: O } = q(R, n);
-  return /* @__PURE__ */ r.createElement("div", { className: M, "data-testid": g }, /* @__PURE__ */ r.createElement(
+  }, []), /* @__PURE__ */ r.createElement("div", { className: M, "data-testid": g }, /* @__PURE__ */ r.createElement(
     "div",
     {
-      ref: R,
-      className: C(l["tab-list-wrapper"], {
-        [l["tab-list-wrapper--sticky"]]: N && O
+      ref: _,
+      className: S(l["tab-list-wrapper"], {
+        [l["tab-list-wrapper--sticky"]]: N
       })
     },
     /* @__PURE__ */ r.createElement(
-      $,
+      q,
       {
         onTabListClick: (t) => T(t, e),
         selectedTab: e,
@@ -59,28 +65,28 @@ const B = 75, G = ({ activeTab: L, children: m, className: M, color: f = "white"
     /* @__PURE__ */ r.createElement(
       "div",
       {
-        className: C(l["panel-wrapper"], l[`panel-wrapper--${f}`], {
+        className: S(l["panel-wrapper"], l[`panel-wrapper--${f}`], {
           [l["panel-wrapper--framed"]]: u == "framed"
         })
       }
     )
   ), /* @__PURE__ */ r.createElement("div", { ref: n, style: { marginTop: u == "framed" ? "-40px" : "" } }, /* @__PURE__ */ r.createElement(
-    j,
+    z,
     {
       ref: s,
       color: f,
       type: u,
       isFirst: e == 0,
-      translateX: P,
+      translateX: k,
       animate: U
     },
     r.Children.toArray(m)[e]
   )));
-}, E = G;
-E.displayName = "Tabs";
-E.Tab = W;
-E.Tab.displayName = "Tabs.Tab";
+}, v = J;
+v.displayName = "Tabs";
+v.Tab = j;
+v.Tab.displayName = "Tabs.Tab";
 export {
-  E as default
+  v as default
 };
 //# sourceMappingURL=Tabs.js.map

package/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { useSticky } from '../../hooks/useSticky';\nimport { PaletteNames } from '../../theme/palette';\nimport { isMobileUA } from '../../utils/mobile';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsType = 'normal' | 'framed';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the visual type of the tabs */\n  type?: TabsType;\n}\n\nconst swipeDistanceThreshold = 75;\n\nconst TabsRoot: React.FC<TabsProps> = ({ activeTab, children, className, color = 'white', sticky = true, testId, type = 'normal' }) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const [touchStartX, setTouchStartX] = useState(0);\n  const [touchEndX, setTouchEndX] = useState(0);\n  const [translateX, setTranslateX] = useState(0);\n  const [panelAnimation, setPanelAnimation] = useState<'left' | 'right' | null>(null);\n  const mobile = isMobileUA();\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  const onValueChange = (newValue: number, oldValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n      if (newValue > oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onLeftSwipe();\n      } else if (newValue < oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onRightSwipe();\n      }\n    }\n  };\n\n  const onRightSwipe = (): void => {\n    mobile && setPanelAnimation('right');\n  };\n\n  const onLeftSwipe = (): void => {\n    mobile && setPanelAnimation('left');\n  };\n\n  const resetAnimation = (): void => {\n    setPanelAnimation(null);\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  useEffect(() => {\n    const handleTouchStart = (event: TouchEvent): void => {\n      setTouchStartX(event.touches[0].clientX);\n    };\n\n    const handleTouchMove = (event: TouchEvent): void => {\n      setTouchEndX(event.touches[0].clientX);\n      const newTranslateX = event.touches[0].clientX - touchStartX;\n\n      if (activeTabIndex === 0 && newTranslateX > 0) {\n        setTranslateX(0);\n      } else if (activeTabIndex === React.Children.count(children) - 1 && newTranslateX < 0) {\n        setTranslateX(0);\n      } else {\n        setTranslateX(newTranslateX);\n      }\n    };\n\n    const handleTouchEnd = (): void => {\n      const swipeDistance = Math.abs(touchEndX - touchStartX);\n      if (swipeDistance >= swipeDistanceThreshold) {\n        if (touchEndX > touchStartX) {\n          // User swiped right\n          onValueChange(Math.max(0, activeTabIndex - 1), activeTabIndex);\n        } else {\n          // User swiped left\n          onValueChange(Math.min(React.Children.count(children) - 1, activeTabIndex + 1), activeTabIndex);\n        }\n      }\n      setTranslateX(0);\n    };\n\n    if (tabsRef.current) {\n      tabsRef.current.addEventListener('touchstart', handleTouchStart);\n      tabsRef.current.addEventListener('touchmove', handleTouchMove);\n      tabsRef.current.addEventListener('touchend', handleTouchEnd);\n    }\n    return () => {\n      if (tabsRef.current) {\n        tabsRef.current.removeEventListener('touchstart', handleTouchStart);\n        tabsRef.current.removeEventListener('touchmove', handleTouchMove);\n        tabsRef.current.removeEventListener('touchend', handleTouchEnd);\n      }\n    };\n  }, [touchStartX, touchEndX, activeTabIndex]);\n\n  useEffect(() => {\n    const handleAnimationEnd = (): void => {\n      resetAnimation();\n    };\n\n    if (tabPanelRef.current) {\n      tabPanelRef.current.addEventListener('animationend', handleAnimationEnd);\n    }\n\n    return () => {\n      if (tabPanelRef.current) {\n        tabPanelRef.current.removeEventListener('animationend', handleAnimationEnd);\n      }\n    };\n  }, []);\n\n  const { isOutsideWindow } = useSticky(tabListRef, tabsRef);\n\n  return (\n    <div className={className} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky && isOutsideWindow,\n        })}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index, activeTabIndex)}\n          selectedTab={activeTabIndex}\n          color={color}\n          type={type}\n        >\n          {children}\n        </TabList>\n        <div\n          className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`], {\n            [styles['panel-wrapper--framed']]: type == 'framed',\n          })}\n        ></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: type == 'framed' ? '-40px' : '' }}>\n        <TabPanel\n          ref={tabPanelRef}\n          color={color}\n          type={type}\n          isFirst={activeTabIndex == 0}\n          translateX={translateX}\n          animate={panelAnimation}\n        >\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["swipeDistanceThreshold","TabsRoot","activeTab","children","className","color","sticky","testId","type","isControlled","uncontrolledValue","setUncontrolledValue","useState","touchStartX","setTouchStartX","touchEndX","setTouchEndX","translateX","setTranslateX","panelAnimation","setPanelAnimation","mobile","isMobileUA","tabsRef","useRef","tabPanelRef","tabListRef","onValueChange","newValue","oldValue","onLeftSwipe","onRightSwipe","resetAnimation","activeTabIndex","useEffect","handleTouchStart","event","handleTouchMove","newTranslateX","React","handleTouchEnd","handleAnimationEnd","isOutsideWindow","useSticky","classNames","styles","TabList","index","TabPanel","Tabs","Tab"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { PaletteNames } from '../../theme/palette';\nimport { isMobileUA } from '../../utils/mobile';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsType = 'normal' | 'framed';\nexport type TabsTouchBehaviour = 'swipe' | 'none';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Determines how Tabs respons to touch events. */\n  touchBehaviour?: TabsTouchBehaviour;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the visual type of the tabs */\n  type?: TabsType;\n}\n\nconst swipeDistanceThreshold = 75;\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  sticky = true,\n  testId,\n  type = 'normal',\n  touchBehaviour = 'swipe',\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const [touchStartX, setTouchStartX] = useState(0);\n  const [touchEndX, setTouchEndX] = useState(0);\n  const [translateX, setTranslateX] = useState(0);\n  const [panelAnimation, setPanelAnimation] = useState<'left' | 'right' | null>(null);\n  const mobile = isMobileUA();\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  const onValueChange = (newValue: number, oldValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n      if (newValue > oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onLeftSwipe();\n      } else if (newValue < oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onRightSwipe();\n      }\n    }\n  };\n\n  const onRightSwipe = (): void => {\n    mobile && setPanelAnimation('right');\n  };\n\n  const onLeftSwipe = (): void => {\n    mobile && setPanelAnimation('left');\n  };\n\n  const resetAnimation = (): void => {\n    setPanelAnimation(null);\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  useEffect(() => {\n    const handleTouchStart = (event: TouchEvent): void => {\n      setTouchStartX(event.touches[0].clientX);\n    };\n\n    const handleTouchMove = (event: TouchEvent): void => {\n      setTouchEndX(event.touches[0].clientX);\n      const newTranslateX = event.touches[0].clientX - touchStartX;\n\n      if (activeTabIndex === 0 && newTranslateX > 0) {\n        setTranslateX(0);\n      } else if (activeTabIndex === React.Children.count(children) - 1 && newTranslateX < 0) {\n        setTranslateX(0);\n      } else {\n        setTranslateX(newTranslateX);\n      }\n    };\n\n    const handleTouchEnd = (): void => {\n      const swipeDistance = Math.abs(touchEndX - touchStartX);\n      if (swipeDistance >= swipeDistanceThreshold) {\n        if (touchEndX > touchStartX) {\n          // User swiped right\n          onValueChange(Math.max(0, activeTabIndex - 1), activeTabIndex);\n        } else {\n          // User swiped left\n          onValueChange(Math.min(React.Children.count(children) - 1, activeTabIndex + 1), activeTabIndex);\n        }\n      }\n      setTranslateX(0);\n    };\n\n    if (touchBehaviour === 'swipe' && tabsRef.current) {\n      tabsRef.current.addEventListener('touchstart', handleTouchStart);\n      tabsRef.current.addEventListener('touchmove', handleTouchMove);\n      tabsRef.current.addEventListener('touchend', handleTouchEnd);\n    }\n    return () => {\n      if (tabsRef.current) {\n        tabsRef.current.removeEventListener('touchstart', handleTouchStart);\n        tabsRef.current.removeEventListener('touchmove', handleTouchMove);\n        tabsRef.current.removeEventListener('touchend', handleTouchEnd);\n      }\n    };\n  }, [touchBehaviour, touchStartX, touchEndX, activeTabIndex]);\n\n  useEffect(() => {\n    const handleAnimationEnd = (): void => {\n      resetAnimation();\n    };\n\n    if (tabPanelRef.current) {\n      tabPanelRef.current.addEventListener('animationend', handleAnimationEnd);\n    }\n\n    return () => {\n      if (tabPanelRef.current) {\n        tabPanelRef.current.removeEventListener('animationend', handleAnimationEnd);\n      }\n    };\n  }, []);\n\n  return (\n    <div className={className} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index, activeTabIndex)}\n          selectedTab={activeTabIndex}\n          color={color}\n          type={type}\n        >\n          {children}\n        </TabList>\n        <div\n          className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`], {\n            [styles['panel-wrapper--framed']]: type == 'framed',\n          })}\n        ></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: type == 'framed' ? '-40px' : '' }}>\n        <TabPanel\n          ref={tabPanelRef}\n          color={color}\n          type={type}\n          isFirst={activeTabIndex == 0}\n          translateX={translateX}\n          animate={panelAnimation}\n        >\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["swipeDistanceThreshold","TabsRoot","activeTab","children","className","color","sticky","testId","type","touchBehaviour","isControlled","uncontrolledValue","setUncontrolledValue","useState","touchStartX","setTouchStartX","touchEndX","setTouchEndX","translateX","setTranslateX","panelAnimation","setPanelAnimation","mobile","isMobileUA","tabsRef","useRef","tabPanelRef","tabListRef","onValueChange","newValue","oldValue","onLeftSwipe","onRightSwipe","resetAnimation","activeTabIndex","useEffect","handleTouchStart","event","handleTouchMove","newTranslateX","React","handleTouchEnd","handleAnimationEnd","classNames","styles","TabList","index","TabPanel","Tabs","Tab"],"mappings":"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"}

package/components/Validation/ValidationSummary.js

@@ -1,17 +1,25 @@
-import r from "react";
-import m from "classnames";
-import o from "./ErrorList.js";
-import { useUuid as n } from "../../hooks/useUuid.js";
-import { Title as s } from "../Title/Title.js";
-import a from "../Validation/styles.module.scss";
-const y = (e) => {
-  const { errorTitleHtmlMarkup: l = "h2" } = e, t = n(), i = m(
-    a.validation__summary,
-    !!e.errors && Object.entries(e.errors).length > 0 && a["validation__summary--visible"]
+import e from "react";
+import o from "classnames";
+import n from "./ErrorList.js";
+import { useUuid as s } from "../../hooks/useUuid.js";
+import { Title as c } from "../Title/Title.js";
+import l from "../Validation/styles.module.scss";
+const T = (r) => {
+  const { errorTitleHtmlMarkup: i = "h2" } = r, a = s(), t = !!r.errors && Object.entries(r.errors).length > 0, m = o(l.validation__summary, t && l["validation__summary--visible"]);
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "polite",
+      "aria-relevant": "all",
+      "aria-labelledby": t && r.errorTitle ? a : void 0,
+      className: m
+    },
+    t && /* @__PURE__ */ e.createElement(e.Fragment, null, r.errorTitle && /* @__PURE__ */ e.createElement(c, { appearance: "title4", id: a, htmlMarkup: i, margin: { marginTop: 0, marginBottom: 1 } }, r.errorTitle), /* @__PURE__ */ e.createElement(n, { errors: r.errors })),
+    r.children
   );
-  return /* @__PURE__ */ r.createElement("div", { role: "alert", "aria-live": "polite", "aria-relevant": "all", "aria-labelledby": t, className: i }, !!e.errors && Object.entries(e.errors).length > 0 && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(s, { appearance: "title4", id: t, htmlMarkup: l, margin: { marginTop: 0, marginBottom: 1 } }, e.errorTitle), /* @__PURE__ */ r.createElement(o, { errors: e.errors })), e.children);
 };
 export {
-  y as default
+  T as default
 };
 //# sourceMappingURL=ValidationSummary.js.map

package/components/Validation/ValidationSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationSummary.js","sources":["../../../src/components/Validation/ValidationSummary.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorList from './ErrorList';\nimport { ValidationErrors } from './types';\nimport { useUuid } from '../../hooks/useUuid';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useUuid();\n\n  const summaryClasses = classNames(\n    styles['validation__summary'],\n    !!props.errors && Object.entries(props.errors).length > 0 && styles['validation__summary--visible']\n  );\n\n  return (\n    <div role={'alert'} aria-live={'polite'} aria-relevant={'all'} aria-labelledby={titleId} className={summaryClasses}>\n      {!!props.errors && Object.entries(props.errors).length > 0 && (\n        <>\n          <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n            {props.errorTitle}\n          </Title>\n          <ErrorList errors={props.errors} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n"],"names":["ValidationSummary","props","errorTitleHtmlMarkup","titleId","useUuid","summaryClasses","classNames","styles","React","Title","ErrorList"],"mappings":";;;;;;AAsBA,MAAMA,IAAsD,CAASC,MAAA;AAC7D,QAAA,EAAE,sBAAAC,IAAuB,KAAS,IAAAD,GAClCE,IAAUC,KAEVC,IAAiBC;AAAA,IACrBC,EAAO;AAAA,IACP,CAAC,CAACN,EAAM,UAAU,OAAO,QAAQA,EAAM,MAAM,EAAE,SAAS,KAAKM,EAAO,8BAA8B;AAAA,EAAA;AAIlG,SAAAC,gBAAAA,EAAA,cAAC,SAAI,MAAM,SAAS,aAAW,UAAU,iBAAe,OAAO,mBAAiBL,GAAS,WAAWE,KACjG,CAAC,CAACJ,EAAM,UAAU,OAAO,QAAQA,EAAM,MAAM,EAAE,SAAS,KAErDO,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA,cAACC,KAAM,YAAW,UAAS,IAAIN,GAAS,YAAYD,GAAsB,QAAQ,EAAE,WAAW,GAAG,cAAc,OAC7GD,EAAM,UACT,GACAO,gBAAAA,EAAA,cAACE,GAAU,EAAA,QAAQT,EAAM,OAAQ,CAAA,CACnC,GAEDA,EAAM,QACT;AAEJ;"}
+{"version":3,"file":"ValidationSummary.js","sources":["../../../src/components/Validation/ValidationSummary.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorList from './ErrorList';\nimport { ValidationErrors } from './types';\nimport { useUuid } from '../../hooks/useUuid';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useUuid();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n\n  const summaryClasses = classNames(styles['validation__summary'], hasErrors && styles['validation__summary--visible']);\n\n  return (\n    <div\n      role={'alert'}\n      aria-live={'polite'}\n      aria-relevant={'all'}\n      aria-labelledby={hasErrors && props.errorTitle ? titleId : undefined}\n      className={summaryClasses}\n    >\n      {hasErrors && (\n        <>\n          {props.errorTitle && (\n            <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n              {props.errorTitle}\n            </Title>\n          )}\n          <ErrorList errors={props.errors!} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n"],"names":["ValidationSummary","props","errorTitleHtmlMarkup","titleId","useUuid","hasErrors","summaryClasses","classNames","styles","React","Title","ErrorList"],"mappings":";;;;;;AAsBA,MAAMA,IAAsD,CAASC,MAAA;AAC7D,QAAA,EAAE,sBAAAC,IAAuB,KAAS,IAAAD,GAClCE,IAAUC,KAEVC,IAAY,CAAC,CAACJ,EAAM,UAAU,OAAO,QAAQA,EAAM,MAAM,EAAE,SAAS,GAEpEK,IAAiBC,EAAWC,EAAO,qBAAwBH,KAAaG,EAAO,8BAA8B,CAAC;AAGlH,SAAAC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,aAAW;AAAA,MACX,iBAAe;AAAA,MACf,mBAAiBJ,KAAaJ,EAAM,aAAaE,IAAU;AAAA,MAC3D,WAAWG;AAAA,IAAA;AAAA,IAEVD,KAEII,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAR,EAAM,cACLQ,gBAAAA,EAAA,cAACC,GAAM,EAAA,YAAW,UAAS,IAAIP,GAAS,YAAYD,GAAsB,QAAQ,EAAE,WAAW,GAAG,cAAc,EAAE,EAAA,GAC/GD,EAAM,UACT,GAEFQ,gBAAAA,EAAA,cAACE,GAAU,EAAA,QAAQV,EAAM,OAAA,CAAS,CACpC;AAAA,IAEDA,EAAM;AAAA,EAAA;AAGb;"}

package/hooks/usestopPropagation.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Stopp eventer fra å boble opp videre i DOMen
+ * @param ref Element som skal overvåkes
+ * @param events Navn på eventer som ikke skal boble opp
+ */
+export declare const useStopPropagation: (ref: React.RefObject<HTMLElement>, events: string[]) => void;

package/hooks/usestopPropagation.js

@@ -0,0 +1,15 @@
+import { useEffect as a } from "react";
+const p = (t, r) => {
+  const e = (o) => o.stopPropagation();
+  a(() => (r.forEach((o) => {
+    var n;
+    return (n = t == null ? void 0 : t.current) == null ? void 0 : n.addEventListener(o, e);
+  }), () => r.forEach((o) => {
+    var n;
+    return (n = t.current) == null ? void 0 : n.removeEventListener(o, e);
+  })), [t]);
+};
+export {
+  p as useStopPropagation
+};
+//# sourceMappingURL=usestopPropagation.js.map

package/hooks/usestopPropagation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usestopPropagation.js","sources":["../../src/hooks/usestopPropagation.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * Stopp eventer fra å boble opp videre i DOMen\n * @param ref Element som skal overvåkes\n * @param events Navn på eventer som ikke skal boble opp\n */\nexport const useStopPropagation = (ref: React.RefObject<HTMLElement>, events: string[]) => {\n  const handleEvent = (e: Event): void => e.stopPropagation();\n\n  useEffect(() => {\n    events.forEach(name => ref?.current?.addEventListener(name, handleEvent));\n\n    return (): void => events.forEach(name => ref.current?.removeEventListener(name, handleEvent));\n  }, [ref]);\n};\n"],"names":["useStopPropagation","ref","events","handleEvent","e","useEffect","name","_a"],"mappings":";AAOa,MAAAA,IAAqB,CAACC,GAAmCC,MAAqB;AACzF,QAAMC,IAAc,CAACC,MAAmBA,EAAE,gBAAgB;AAE1D,EAAAC,EAAU,OACRH,EAAO,QAAQ,CAAQI;;AAAA,YAAAC,IAAAN,KAAA,gBAAAA,EAAK,YAAL,gBAAAM,EAAc,iBAAiBD,GAAMH;AAAA,GAAY,GAEjE,MAAYD,EAAO,QAAQ,CAAAI,MAAQ;;AAAA,YAAAC,IAAAN,EAAI,YAAJ,gBAAAM,EAAa,oBAAoBD,GAAMH;AAAA,GAAY,IAC5F,CAACF,CAAG,CAAC;AACV;"}

package/package.json

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

package/utils/refs.d.ts

@@ -4,7 +4,7 @@
  * @param refs array med refs som skal slås sammen
  * @returns refcallback som kan brukes på komponent
  */
-export declare const mergeRefs: <T>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>) => React.RefCallback<T>;
+export declare const mergeRefs: <T>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | null | undefined>) => React.RefCallback<T>;
 /**
  * Sjekker om ref er et objekt (og ikke en funksjon)
  * @param ref

package/utils/refs.js

@@ -1,10 +1,10 @@
-const o = (t) => (e) => {
-  t.forEach((n) => {
-    typeof n == "function" ? n(e) : n != null && (n.current = e);
+const e = (n) => (o) => {
+  n.forEach((t) => {
+    typeof t == "function" ? t(o) : t != null && t !== void 0 && (t.current = o);
   });
-}, c = (t) => typeof t != "function" && t !== null;
+}, c = (n) => typeof n != "function" && n !== null;
 export {
   c as isMutableRefObject,
-  o as mergeRefs
+  e as mergeRefs
 };
 //# sourceMappingURL=refs.js.map

package/utils/refs.js.map

@@ -1 +1 @@
-{"version":3,"file":"refs.js","sources":["../../src/utils/refs.ts"],"sourcesContent":["/**\n * Slår sammen refs fra forwardRef og useRef slik at begge deler kan brukes\n * Fra https://github.com/gregberge/react-merge-refs\n * @param refs array med refs som skal slås sammen\n * @returns refcallback som kan brukes på komponent\n */\nexport const mergeRefs = <T>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T> => {\n  return value => {\n    refs.forEach(ref => {\n      if (typeof ref === 'function') {\n        ref(value);\n      } else if (ref != null) {\n        (ref as React.MutableRefObject<T | null>).current = value;\n      }\n    });\n  };\n};\n\n/**\n * Sjekker om ref er et objekt (og ikke en funksjon)\n * @param ref\n * @returns type predicate\n */\nexport const isMutableRefObject = <T>(ref: React.ForwardedRef<T>): ref is React.MutableRefObject<T> => {\n  return typeof ref !== 'function' && ref !== null;\n};\n"],"names":["mergeRefs","refs","value","ref","isMutableRefObject"],"mappings":"AAMa,MAAAA,IAAY,CAAIC,MACpB,CAASC,MAAA;AACd,EAAAD,EAAK,QAAQ,CAAOE,MAAA;AACd,IAAA,OAAOA,KAAQ,aACjBA,EAAID,CAAK,IACAC,KAAO,SACfA,EAAyC,UAAUD;AAAA,EACtD,CACD;AAAA,GASQE,IAAqB,CAAID,MAC7B,OAAOA,KAAQ,cAAcA,MAAQ;"}
+{"version":3,"file":"refs.js","sources":["../../src/utils/refs.ts"],"sourcesContent":["/**\n * Slår sammen refs fra forwardRef og useRef slik at begge deler kan brukes\n * Fra https://github.com/gregberge/react-merge-refs\n * @param refs array med refs som skal slås sammen\n * @returns refcallback som kan brukes på komponent\n */\nexport const mergeRefs = <T>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | null | undefined>): React.RefCallback<T> => {\n  return value => {\n    refs.forEach(ref => {\n      if (typeof ref === 'function') {\n        ref(value);\n      } else if (ref != null && ref !== undefined) {\n        (ref as React.MutableRefObject<T | null>).current = value;\n      }\n    });\n  };\n};\n\n/**\n * Sjekker om ref er et objekt (og ikke en funksjon)\n * @param ref\n * @returns type predicate\n */\nexport const isMutableRefObject = <T>(ref: React.ForwardedRef<T>): ref is React.MutableRefObject<T> => {\n  return typeof ref !== 'function' && ref !== null;\n};\n"],"names":["mergeRefs","refs","value","ref","isMutableRefObject"],"mappings":"AAMa,MAAAA,IAAY,CAAIC,MACpB,CAASC,MAAA;AACd,EAAAD,EAAK,QAAQ,CAAOE,MAAA;AACd,IAAA,OAAOA,KAAQ,aACjBA,EAAID,CAAK,IACAC,KAAO,QAAQA,MAAQ,WAC/BA,EAAyC,UAAUD;AAAA,EACtD,CACD;AAAA,GASQE,IAAqB,CAAID,MAC7B,OAAOA,KAAQ,cAAcA,MAAQ;"}