@helsenorge/designsystem-react 6.3.0 → 6.4.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [6.3.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.2.0&targetVersion=GTv6.3.0) (2024-02-22)
+
+### Features
+
+- select og datepicker støtter autoComplete-attributt
+  ([84c34af](https://github.com/helsenorge/designsystem/commit/84c34afd23a5d236573f5b3b3480175708fb9ecc)), closes
+  [#314727](https://github.com/helsenorge/designsystem/issues/314727) [#314932](https://github.com/helsenorge/designsystem/issues/314932)
+
+### Bug Fixes
+
+- badge er inline-flex og skalerer ikke til full bredde
+  ([ac485e9](https://github.com/helsenorge/designsystem/commit/ac485e923223e7a92ede0743e924a2c39c40bbb8))
+- spacing i promopanel ([60a00bd](https://github.com/helsenorge/designsystem/commit/60a00bdb88d3b35b2e7b1449832674a9bf35ee46))
+- tabell endrer responsiv oppførsel når den vises
+  ([0c21208](https://github.com/helsenorge/designsystem/commit/0c212084cfa5161842dbb0339ae85c82e3c42046)), closes
+  [#315245](https://github.com/helsenorge/designsystem/issues/315245)
+
 ## [6.2.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.1.3&targetVersion=GTv6.2.0) (2024-02-20)
 
 ### Features

package/components/Slider/Slider.d.ts

@@ -28,6 +28,8 @@ interface SliderProps {
     step?: number;
     /** Sets the data-testid attribute. */
     testId?: string;
+    /** Sets the value of the slider */
+    value?: number;
 }
 export declare const Slider: React.FC<SliderProps>;
 export default Slider;

package/components/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgC3D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0JAA0J;IAC1J,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+RxC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgC3D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0JAA0J;IAC1J,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2SxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/components/Slider/Slider.js

@@ -1,174 +1,180 @@
-import o, { useState as M, useRef as T, useEffect as E } from "react";
-import A from "classnames";
-import { AnalyticsId as Y } from "../../constants.js";
-import { useSize as Z } from "../../hooks/useSize.js";
-import { useUuid as I } from "../../hooks/useUuid.js";
-import { getAriaLabelAttributes as x } from "../../utils/accessibility.js";
-import V from "../Title/Title.js";
-import a from "./styles.module.scss";
-const ee = (u, m, l) => {
-  const [v, n] = M(u), y = (r) => {
-    r > l ? n(l) : r < m ? n(m) : n(r);
+import a, { useState as D, useRef as z, useEffect as v } from "react";
+import M from "classnames";
+import { AnalyticsId as Z } from "../../constants.js";
+import { useSize as x } from "../../hooks/useSize.js";
+import { useUuid as C } from "../../hooks/useUuid.js";
+import { getAriaLabelAttributes as V } from "../../utils/accessibility.js";
+import ee from "../Title/Title.js";
+import n from "./styles.module.scss";
+const te = (s, k, f) => {
+  const [_, o] = D(s), p = (r) => {
+    r > f ? o(f) : r < k ? o(k) : o(r);
   };
-  return E(() => {
-    n((l - m) / 2 + m);
-  }, [m, l]), [v, y];
-}, te = ({
-  title: u,
-  ariaLabel: m,
-  labelLeft: l,
-  labelRight: v,
-  disabled: n = !1,
-  onChange: y,
+  return v(() => {
+    p(s);
+  }, [k, f]), [_, p];
+}, re = ({
+  title: s,
+  ariaLabel: k,
+  labelLeft: f,
+  labelRight: _,
+  disabled: o = !1,
+  onChange: p,
   steps: r,
-  step: _ = 1,
+  step: g = 1,
   minValue: i = 0,
-  maxValue: s = r ? r.length - 1 : 100,
+  maxValue: d = r ? r.length - 1 : 100,
   selected: w = !0,
-  testId: z
+  testId: K,
+  value: m
 }) => {
-  const [C, D] = M(!1), [k, L] = M(w), [d, f] = ee((s - i) / 2 + i, i, s), g = I(), S = I(), N = I(), b = T(null), P = T(null), { width: U } = Z(b) || { width: 0 }, R = s / 10;
-  E(() => {
+  const [L, U] = D(!1), [y, R] = D(typeof m > "u" ? w : !0), [c, u] = te(
+    typeof m > "u" ? (d - i) / 2 + i : m,
+    i,
+    d
+  ), h = C(), N = C(), b = C(), P = z(null), j = z(null), { width: $ } = x(P) || { width: 0 }, B = d / 10;
+  v(() => {
     const t = () => {
-      D(!1);
+      U(!1);
     };
     return document.addEventListener("pointerup", t), () => {
       document.removeEventListener("pointerup", t);
     };
   }, []);
-  const $ = (t) => {
-    var X;
-    const e = ((X = b.current) == null ? void 0 : X.getBoundingClientRect().x) ?? 0, c = (t - e) / U, p = s - i;
-    let h = c * p + i;
-    return h = Math.round(h / _) * _, h = Math.max(i, Math.min(s, h)), h;
+  const X = (t) => {
+    var T;
+    const e = ((T = P.current) == null ? void 0 : T.getBoundingClientRect().x) ?? 0, l = (t - e) / $, E = d - i;
+    let S = l * E + i;
+    return S = Math.round(S / g) * g, S = Math.max(i, Math.min(d, S)), S;
   };
-  E(() => {
+  v(() => {
     const t = (e) => {
-      if (!n && C) {
-        const c = $(e.clientX);
-        f(c);
+      if (!o && L) {
+        const l = X(e.clientX);
+        u(l);
       }
     };
     return document.addEventListener("pointermove", t), () => {
       document.removeEventListener("pointermove", t);
     };
-  }, [C]), E(() => {
-    !n && k && y && y(d);
-  }, [d, k]), E(() => {
-    w !== k && L(w);
+  }, [L]), v(() => {
+    m !== c && typeof m < "u" && (A(), u(m));
+  }, [m]), v(() => {
+    !o && y && p && p(c);
+  }, [c, y]), v(() => {
+    typeof m > "u" && w !== y && R(w);
   }, [w]);
-  const B = () => {
-    k === !1 && L(!0);
-  }, K = (t) => {
-    if (n)
+  const A = () => {
+    y === !1 && R(!0);
+  }, H = (t) => {
+    if (o)
       return;
     let e = !1;
     switch (t.key) {
       case "ArrowLeft":
       case "ArrowDown":
-        f(d - _), e = !0;
+        u(c - g), e = !0;
         break;
       case "PageDown":
-        f(d - R), e = !0;
+        u(c - B), e = !0;
         break;
       case "ArrowRight":
       case "ArrowUp":
-        f(d + _), e = !0;
+        u(c + g), e = !0;
         break;
       case "PageUp":
-        f(d + R), e = !0;
+        u(c + B), e = !0;
         break;
       case "Home":
-        f(i), e = !0;
+        u(i), e = !0;
         break;
       case "End":
-        f(s), e = !0;
+        u(d), e = !0;
         break;
     }
-    e && (B(), t.preventDefault(), t.stopPropagation());
-  }, H = (t) => {
-    var c;
-    if (n)
-      return;
-    B();
-    const e = $(t.clientX);
-    f(e), (c = P.current) == null || c.focus();
+    e && (A(), t.preventDefault(), t.stopPropagation());
   }, O = (t) => {
+    var l;
+    if (o)
+      return;
+    const e = X(t.clientX);
+    u(e), (l = j.current) == null || l.focus();
+  }, W = (t) => {
     var e;
-    n || (D(!0), t.preventDefault(), t.stopPropagation(), (e = P.current) == null || e.focus());
-  }, W = s !== i ? U / (s - i) * (d - i) : 0, q = () => {
-    const t = r ? Math.round((d - i) / _) : null;
+    o || (U(!0), A(), t.preventDefault(), t.stopPropagation(), (e = j.current) == null || e.focus());
+  }, q = d !== i ? $ / (d - i) * (c - i) : 0, F = () => {
+    const t = r ? Math.round((c - i) / g) : null;
     if (r && t !== null && t >= 0 && t < r.length) {
-      const e = r[t], c = e.emojiUniCode, p = typeof e.label < "u" ? e.label.toString() : void 0;
-      return c && p ? `${c} ${p}` : c || p;
+      const e = r[t], l = e.emojiUniCode, E = typeof e.label < "u" ? e.label.toString() : void 0;
+      return l && E ? `${l} ${E}` : l || E;
     }
-  }, F = x({
-    label: m,
+  }, G = V({
+    label: k,
     id: (() => {
-      if (u && l && v)
-        return [g, S, N].join(" ");
-      if (u && l)
-        return [g, S].join(" ");
-      if (u && v)
-        return [g, N].join(" ");
-      if (u)
-        return g;
+      if (s && f && _)
+        return [h, N, b].join(" ");
+      if (s && f)
+        return [h, N].join(" ");
+      if (s && _)
+        return [h, b].join(" ");
+      if (s)
+        return h;
     })(),
     prefer: "label"
-  }), j = (t, e) => ({ left: `${t / (e - 1) * 100}%` }), G = () => /* @__PURE__ */ o.createElement("div", { className: a["slider__emoji-container"] }, r == null ? void 0 : r.map((t, e) => t.emojiUniCode && /* @__PURE__ */ o.createElement(
+  }), I = (t, e) => ({ left: `${t / (e - 1) * 100}%` }), J = () => /* @__PURE__ */ a.createElement("div", { className: n["slider__emoji-container"] }, r == null ? void 0 : r.map((t, e) => t.emojiUniCode && /* @__PURE__ */ a.createElement(
     "div",
     {
       "aria-hidden": !0,
       key: "emoji" + e,
-      className: a.slider__emoji,
-      style: j(e, r.length)
+      className: n.slider__emoji,
+      style: I(e, r.length)
     },
     t.emojiUniCode
-  ))), J = () => r == null ? void 0 : r.map((t, e) => /* @__PURE__ */ o.createElement("div", { key: "step" + e, className: a.slider__track__step, style: j(e, r.length) })), Q = () => /* @__PURE__ */ o.createElement("div", { className: a["slider__value-container"] }, r == null ? void 0 : r.map((t, e) => typeof t.label < "u" && /* @__PURE__ */ o.createElement(
+  ))), Q = () => r == null ? void 0 : r.map((t, e) => /* @__PURE__ */ a.createElement("div", { key: "step" + e, className: n.slider__track__step, style: I(e, r.length) })), Y = () => /* @__PURE__ */ a.createElement("div", { className: n["slider__value-container"] }, r == null ? void 0 : r.map((t, e) => typeof t.label < "u" && /* @__PURE__ */ a.createElement(
     "div",
     {
       "aria-hidden": !0,
       key: "label" + e,
-      className: a.slider__value,
-      style: j(e, r.length)
+      className: n.slider__value,
+      style: I(e, r.length)
     },
     t.label
   )));
-  return /* @__PURE__ */ o.createElement("div", { className: a.slider, "data-testid": z, "data-analyticsid": Y.Slider }, u && /* @__PURE__ */ o.createElement(V, { className: a.slider__title, htmlMarkup: "h3", margin: 0, appearance: "title3", id: g }, u), /* @__PURE__ */ o.createElement("div", { className: a["slider__content-container"] }, G(), /* @__PURE__ */ o.createElement(
+  return /* @__PURE__ */ a.createElement("div", { className: n.slider, "data-testid": K, "data-analyticsid": Z.Slider }, s && /* @__PURE__ */ a.createElement(ee, { className: n.slider__title, htmlMarkup: "h3", margin: 0, appearance: "title3", id: h }, s), /* @__PURE__ */ a.createElement("div", { className: n["slider__content-container"] }, J(), /* @__PURE__ */ a.createElement(
     "div",
     {
-      ref: b,
-      className: A(a["slider__track-wrapper"], n && a["slider__track-wrapper--disabled"]),
-      onClick: H,
-      onPointerDown: O
+      ref: P,
+      className: M(n["slider__track-wrapper"], o && n["slider__track-wrapper--disabled"]),
+      onClick: O,
+      onPointerDown: W
     },
-    /* @__PURE__ */ o.createElement("div", { className: A(a.slider__track, n && a["slider__track--disabled"]) }, J()),
-    /* @__PURE__ */ o.createElement(
+    /* @__PURE__ */ a.createElement("div", { className: M(n.slider__track, o && n["slider__track--disabled"]) }, Q()),
+    /* @__PURE__ */ a.createElement(
       "div",
       {
-        role: n ? void 0 : "slider",
-        ref: P,
-        className: A(a.slider__marker, {
-          [a["slider__marker--disabled"]]: n,
-          [a["slider__marker--selected"]]: k
+        role: o ? void 0 : "slider",
+        ref: j,
+        className: M(n.slider__marker, {
+          [n["slider__marker--disabled"]]: o,
+          [n["slider__marker--selected"]]: y
         }),
         style: {
-          left: `${W}px`
+          left: `${q}px`
         },
-        onKeyDown: K,
-        "aria-valuenow": d,
-        "aria-valuetext": q(),
+        onKeyDown: H,
+        "aria-valuenow": c,
+        "aria-valuetext": F(),
         "aria-valuemin": i,
-        "aria-valuemax": s,
-        tabIndex: n ? void 0 : 0,
-        "aria-disabled": n,
-        ...F
+        "aria-valuemax": d,
+        tabIndex: o ? void 0 : 0,
+        "aria-disabled": o,
+        ...G
       }
     )
-  ), Q()), (l || v) && /* @__PURE__ */ o.createElement("span", { className: a.slider__options }, /* @__PURE__ */ o.createElement("span", { id: S }, l), /* @__PURE__ */ o.createElement("span", { id: N }, v)));
-}, fe = te;
+  ), Y()), (f || _) && /* @__PURE__ */ a.createElement("span", { className: n.slider__options }, /* @__PURE__ */ a.createElement("span", { id: N }, f), /* @__PURE__ */ a.createElement("span", { id: b }, _)));
+}, me = re;
 export {
-  te as Slider,
-  fe as default
+  re as Slider,
+  me as default
 };
 //# sourceMappingURL=Slider.js.map

package/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setValue((max - min) / 2 + min);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Slider: React.FC<SliderProps> = ({\n  title,\n  ariaLabel,\n  labelLeft,\n  labelRight,\n  disabled = false,\n  onChange,\n  steps,\n  step = 1,\n  minValue = 0,\n  maxValue = steps ? steps.length - 1 : 100,\n  selected = true,\n  testId,\n}) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(selected);\n  const [value, setValue] = useSafeNumberValue((maxValue - minValue) / 2 + minValue, minValue, maxValue);\n\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValue(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (!disabled && selectedState && onChange) {\n      onChange(value);\n    }\n  }, [value, selectedState]);\n\n  useEffect(() => {\n    if (selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValue(value - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValue(value - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValue(value + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValue(value + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValue(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValue(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    handleSelected();\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValue(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (value - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((value - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPostionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPostionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPostionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPostionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      <div className={styles['slider__content-container']}>\n        {renderEmojies()}\n        {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div\n          ref={trackRef}\n          className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n          onClick={handleTrackClick}\n          onPointerDown={handlePointerDown}\n        >\n          <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n          <div\n            role={disabled ? undefined : 'slider'}\n            ref={markerRef}\n            className={classNames(styles.slider__marker, {\n              [styles['slider__marker--disabled']]: disabled,\n              [styles['slider__marker--selected']]: selectedState,\n            })}\n            style={{\n              left: `${markerXPos}px`,\n            }}\n            onKeyDown={handleKeyDown}\n            aria-valuenow={value}\n            aria-valuetext={getAriaValueText()}\n            aria-valuemin={minValue}\n            aria-valuemax={maxValue}\n            tabIndex={disabled ? undefined : 0}\n            aria-disabled={disabled}\n            {...ariaLabelAttributes}\n          />\n        </div>\n        {renderStepLabels()}\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","selected","testId","isMoving","setIsMoving","selectedState","setSelectedState","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","largeStep","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","handleSelected","handleKeyDown","e","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","label","ariaLabelAttributes","getAriaLabelAttributes","getXPostionStyling","index","stepsLength","renderEmojies","React","styles","renderSteps","_step","renderStepLabels","AnalyticsId","Title","classNames","Slider$1"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setSafeValue(initial);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the value of the slider */\n  value?: number;\n}\n\nexport const Slider: React.FC<SliderProps> = ({\n  title,\n  ariaLabel,\n  labelLeft,\n  labelRight,\n  disabled = false,\n  onChange,\n  steps,\n  step = 1,\n  minValue = 0,\n  maxValue = steps ? steps.length - 1 : 100,\n  selected = true,\n  testId,\n  value,\n}) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n  const [valueState, setValueState] = useSafeNumberValue(\n    typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n    minValue,\n    maxValue\n  );\n\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValueState(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (value !== valueState && typeof value !== 'undefined') {\n      handleSelected();\n      setValueState(value);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (!disabled && selectedState && onChange) {\n      onChange(valueState);\n    }\n  }, [valueState, selectedState]);\n\n  useEffect(() => {\n    if (typeof value === 'undefined' && selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValueState(valueState - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValueState(valueState - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValueState(valueState + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValueState(valueState + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValueState(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValueState(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValueState(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n    handleSelected();\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      <div className={styles['slider__content-container']}>\n        {renderEmojies()}\n        {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div\n          ref={trackRef}\n          className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n          onClick={handleTrackClick}\n          onPointerDown={handlePointerDown}\n        >\n          <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n          <div\n            role={disabled ? undefined : 'slider'}\n            ref={markerRef}\n            className={classNames(styles.slider__marker, {\n              [styles['slider__marker--disabled']]: disabled,\n              [styles['slider__marker--selected']]: selectedState,\n            })}\n            style={{\n              left: `${markerXPos}px`,\n            }}\n            onKeyDown={handleKeyDown}\n            aria-valuenow={valueState}\n            aria-valuetext={getAriaValueText()}\n            aria-valuemin={minValue}\n            aria-valuemax={maxValue}\n            tabIndex={disabled ? undefined : 0}\n            aria-disabled={disabled}\n            {...ariaLabelAttributes}\n          />\n        </div>\n        {renderStepLabels()}\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","selected","testId","isMoving","setIsMoving","selectedState","setSelectedState","valueState","setValueState","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","largeStep","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","handleSelected","handleKeyDown","e","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","label","ariaLabelAttributes","getAriaLabelAttributes","getXPositionStyling","index","stepsLength","renderEmojies","React","styles","renderSteps","_step","renderStepLabels","AnalyticsId","Title","classNames","Slider$1"],"mappings":"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"}

package/components/Table/Table.d.ts

@@ -22,7 +22,7 @@ export interface BreakpointConfig {
     /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */
     fallbackVariant?: keyof typeof ResponsiveTableVariant;
 }
-export interface Props {
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'table'>, 'style'> {
     /** Unique ID */
     id?: string;
     /** Id used for testing */

package/components/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,OAAO,EAAE,UAAU,EAAiB,MAAM,2BAA2B,CAAC;AAQtE,oBAAY,sBAAsB;IAChC,iDAAiD;IACjD,IAAI,SAAS;IACb,6FAA6F;IAC7F,gBAAgB,qBAAqB;IACrC,sEAAsE;IACtE,gBAAgB,qBAAqB;IACrC,+BAA+B;IAC/B,KAAK,UAAU;CAChB;AACD,oBAAY,QAAQ;IAClB,OAAO,YAAY;IACnB,MAAM,WAAW;CAClB;AACD,MAAM,WAAW,gBAAgB;IAC/B,qHAAqH;IACrH,UAAU,EAAE,MAAM,OAAO,UAAU,CAAC;IACpC,oEAAoE;IACpE,OAAO,EAAE,MAAM,OAAO,sBAAsB,CAAC;IAC7C,+FAA+F;IAC/F,eAAe,CAAC,EAAE,MAAM,OAAO,sBAAsB,CAAC;CACvD;AAED,MAAM,WAAW,KAAK;IACpB,gBAAgB;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;IACzD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0FAA0F;IAC1F,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,oJAAoJ;IACpJ,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yJAAyJ;IACzJ,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,aAAa,EAAE,gBAAgB,EAM3C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,gBAAgB,EAW1C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiEjC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,OAAO,EAAE,UAAU,EAAiB,MAAM,2BAA2B,CAAC;AAQtE,oBAAY,sBAAsB;IAChC,iDAAiD;IACjD,IAAI,SAAS;IACb,6FAA6F;IAC7F,gBAAgB,qBAAqB;IACrC,sEAAsE;IACtE,gBAAgB,qBAAqB;IACrC,+BAA+B;IAC/B,KAAK,UAAU;CAChB;AACD,oBAAY,QAAQ;IAClB,OAAO,YAAY;IACnB,MAAM,WAAW;CAClB;AACD,MAAM,WAAW,gBAAgB;IAC/B,qHAAqH;IACrH,UAAU,EAAE,MAAM,OAAO,UAAU,CAAC;IACpC,oEAAoE;IACpE,OAAO,EAAE,MAAM,OAAO,sBAAsB,CAAC;IAC7C,+FAA+F;IAC/F,eAAe,CAAC,EAAE,MAAM,OAAO,sBAAsB,CAAC;CACvD;AAED,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IACnF,gBAAgB;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;IACzD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0FAA0F;IAC1F,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,oJAAoJ;IACpJ,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yJAAyJ;IACzJ,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,aAAa,EAAE,gBAAgB,EAM3C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,gBAAgB,EAW1C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0EjC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/components/Table/Table.js

@@ -1,22 +1,22 @@
-import a, { useState as n, useRef as x, useEffect as s } from "react";
-import L from "classnames";
-import { getCurrentConfig as R, getCenteredOverflowTableStyle as V, getBreakpointClass as N } from "./utils.js";
-import { AnalyticsId as _ } from "../../constants.js";
-import { useBreakpoint as H } from "../../hooks/useBreakpoint.js";
-import { useIsVisible as O } from "../../hooks/useIsVisible.js";
-import { useLayoutEvent as P } from "../../hooks/useLayoutEvent.js";
-import { getAriaLabelAttributes as j } from "../../utils/accessibility.js";
-import q from "../HorizontalScroll/HorizontalScroll.js";
-import D from "./styles.module.scss";
-var F = /* @__PURE__ */ ((e) => (e.none = "none", e.centeredoverflow = "centeredoverflow", e.horizontalscroll = "horizontalscroll", e.block = "block", e))(F || {}), G = /* @__PURE__ */ ((e) => (e.compact = "compact", e.normal = "normal", e))(G || {});
-const J = [
+import a, { useState as n, useRef as L, useEffect as s } from "react";
+import R from "classnames";
+import { getCurrentConfig as V, getCenteredOverflowTableStyle as N, getBreakpointClass as _ } from "./utils.js";
+import { AnalyticsId as H } from "../../constants.js";
+import { useBreakpoint as O } from "../../hooks/useBreakpoint.js";
+import { useIsVisible as P } from "../../hooks/useIsVisible.js";
+import { useLayoutEvent as j } from "../../hooks/useLayoutEvent.js";
+import { getAriaLabelAttributes as q } from "../../utils/accessibility.js";
+import D from "../HorizontalScroll/HorizontalScroll.js";
+import F from "./styles.module.scss";
+var G = /* @__PURE__ */ ((e) => (e.none = "none", e.centeredoverflow = "centeredoverflow", e.horizontalscroll = "horizontalscroll", e.block = "block", e))(G || {}), J = /* @__PURE__ */ ((e) => (e.compact = "compact", e.normal = "normal", e))(J || {});
+const K = [
   {
     breakpoint: "xl",
     variant: "centeredoverflow",
     fallbackVariant: "horizontalscroll"
     /* horizontalscroll */
   }
-], et = [
+], ot = [
   {
     breakpoint: "xl",
     variant: "centeredoverflow",
@@ -29,35 +29,48 @@ const J = [
     fallbackVariant: "block"
     /* block */
   }
-], ot = ({
+], lt = ({
   id: e,
   testId: w,
   className: v,
   children: u,
-  breakpointConfig: c = J,
+  breakpointConfig: c = K,
   mode: k = "normal",
   scrollAriaLabel: W,
-  scrollAriaLabelledById: z
+  scrollAriaLabelledById: z,
+  ...E
 }) => {
-  const [t, E] = n(), [l, d] = n(0), [y, B] = n(0), [m, S] = n(window.innerWidth), r = x(null), f = O(r, 0), i = H();
+  const [t, y] = n(), [l, d] = n(0), [B, S] = n(0), [m, g] = n(window.innerWidth), r = L(null), f = P(r, 0), i = O();
   s(() => {
-    E(R(c, i, l, m));
+    y(V(c, i, l, m));
   }, [c, i, l, m]), s(() => {
     var o, h, p;
-    ((t == null ? void 0 : t.variant) === "centeredoverflow" || (t == null ? void 0 : t.variant) === "horizontalscroll") && d(((o = r.current) == null ? void 0 : o.getBoundingClientRect().width) ?? 0), (t == null ? void 0 : t.variant) === "centeredoverflow" && B(((p = (h = r.current) == null ? void 0 : h.parentElement) == null ? void 0 : p.getBoundingClientRect().width) ?? 0);
-  }, [t, i]), P(() => S(window.innerWidth), ["resize"], 100), s(() => {
+    ((t == null ? void 0 : t.variant) === "centeredoverflow" || (t == null ? void 0 : t.variant) === "horizontalscroll") && d(((o = r.current) == null ? void 0 : o.getBoundingClientRect().width) ?? 0), (t == null ? void 0 : t.variant) === "centeredoverflow" && S(((p = (h = r.current) == null ? void 0 : h.parentElement) == null ? void 0 : p.getBoundingClientRect().width) ?? 0);
+  }, [t, i]), j(() => g(window.innerWidth), ["resize"], 100), s(() => {
     var o;
     l === 0 && f && d(((o = r.current) == null ? void 0 : o.getBoundingClientRect().width) ?? 0);
   }, [l, f]);
-  const g = (t == null ? void 0 : t.variant) === "centeredoverflow" ? V(y, l) : void 0, A = N(t), C = L(D.table, A, v), b = /* @__PURE__ */ a.createElement("table", { className: C, id: e, "data-testid": w, "data-analyticsid": _.Table, ref: r, style: g }, a.Children.map(u, (o) => a.isValidElement(o) && a.cloneElement(o, { mode: k }))), I = j({ label: W, id: z });
-  return (t == null ? void 0 : t.variant) === "horizontalscroll" ? /* @__PURE__ */ a.createElement(q, { childWidth: l, testId: "horizontal-scroll", ...I }, b) : b;
+  const A = (t == null ? void 0 : t.variant) === "centeredoverflow" ? N(B, l) : void 0, C = _(t), I = R(F.table, C, v), b = /* @__PURE__ */ a.createElement(
+    "table",
+    {
+      className: I,
+      id: e,
+      "data-testid": w,
+      "data-analyticsid": H.Table,
+      ref: r,
+      style: A,
+      ...E
+    },
+    a.Children.map(u, (o) => a.isValidElement(o) && a.cloneElement(o, { mode: k }))
+  ), x = q({ label: W, id: z });
+  return (t == null ? void 0 : t.variant) === "horizontalscroll" ? /* @__PURE__ */ a.createElement(D, { childWidth: l, testId: "horizontal-scroll", ...x }, b) : b;
 };
 export {
-  G as ModeType,
-  F as ResponsiveTableVariant,
-  ot as Table,
-  ot as default,
-  J as defaultConfig,
-  et as simpleConfig
+  J as ModeType,
+  G as ResponsiveTableVariant,
+  lt as Table,
+  lt as default,
+  K as defaultConfig,
+  ot as simpleConfig
 };
 //# sourceMappingURL=Table.js.map

package/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport enum ResponsiveTableVariant {\n  /** No handling responsive behaviour. Default. */\n  none = 'none',\n  /** Overflow parent container to the left and right while remaining centered horizontally. */\n  centeredoverflow = 'centeredoverflow',\n  /** Show horizontal scrollbar when table is too big for the screen. */\n  horizontalscroll = 'horizontalscroll',\n  /** Collapse to two columns. */\n  block = 'block',\n}\nexport enum ModeType {\n  compact = 'compact',\n  normal = 'normal',\n}\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Sets aria-label of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabel?: string;\n  /** Sets aria-labelledby of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabelledById?: string;\n}\n\nexport const defaultConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n];\n\nexport const simpleConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n  {\n    breakpoint: 'sm',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.block,\n  },\n];\n\nexport const Table: React.FC<Props> = ({\n  id,\n  testId,\n  className,\n  children,\n  breakpointConfig = defaultConfig,\n  mode = ModeType.normal,\n  scrollAriaLabel,\n  scrollAriaLabelledById,\n}) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const tableIsVisible = useIsVisible(tableRef, 0);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig, breakpoint]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  useEffect(() => {\n    if (tableWidth === 0 && tableIsVisible) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n  }, [tableWidth, tableIsVisible]);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n\n  const table = (\n    <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table} ref={tableRef} style={tableStyle}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </table>\n  );\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\" {...ariaLabelAttributes}>\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n"],"names":["ResponsiveTableVariant","ModeType","defaultConfig","simpleConfig","Table","id","testId","className","children","breakpointConfig","mode","scrollAriaLabel","scrollAriaLabelledById","currentConfig","setCurrentConfig","useState","tableWidth","setTableWidth","parentWidth","setParentWidth","windowWidth","setWindowWidth","tableRef","useRef","tableIsVisible","useIsVisible","breakpoint","useBreakpoint","useEffect","getCurrentConfig","_a","_c","_b","useLayoutEvent","tableStyle","getCenteredOverflowTableStyle","breakpointClass","getBreakpointClass","tableClass","classNames","styles","table","React","AnalyticsId","child","ariaLabelAttributes","getAriaLabelAttributes","HorizontalScroll"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport enum ResponsiveTableVariant {\n  /** No handling responsive behaviour. Default. */\n  none = 'none',\n  /** Overflow parent container to the left and right while remaining centered horizontally. */\n  centeredoverflow = 'centeredoverflow',\n  /** Show horizontal scrollbar when table is too big for the screen. */\n  horizontalscroll = 'horizontalscroll',\n  /** Collapse to two columns. */\n  block = 'block',\n}\nexport enum ModeType {\n  compact = 'compact',\n  normal = 'normal',\n}\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'table'>, 'style'> {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Sets aria-label of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabel?: string;\n  /** Sets aria-labelledby of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabelledById?: string;\n}\n\nexport const defaultConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n];\n\nexport const simpleConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n  {\n    breakpoint: 'sm',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.block,\n  },\n];\n\nexport const Table: React.FC<Props> = ({\n  id,\n  testId,\n  className,\n  children,\n  breakpointConfig = defaultConfig,\n  mode = ModeType.normal,\n  scrollAriaLabel,\n  scrollAriaLabelledById,\n  ...rest\n}) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const tableIsVisible = useIsVisible(tableRef, 0);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig, breakpoint]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  useEffect(() => {\n    if (tableWidth === 0 && tableIsVisible) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n  }, [tableWidth, tableIsVisible]);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n\n  const table = (\n    <table\n      className={tableClass}\n      id={id}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Table}\n      ref={tableRef}\n      style={tableStyle}\n      {...rest}\n    >\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </table>\n  );\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\" {...ariaLabelAttributes}>\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n"],"names":["ResponsiveTableVariant","ModeType","defaultConfig","simpleConfig","Table","id","testId","className","children","breakpointConfig","mode","scrollAriaLabel","scrollAriaLabelledById","rest","currentConfig","setCurrentConfig","useState","tableWidth","setTableWidth","parentWidth","setParentWidth","windowWidth","setWindowWidth","tableRef","useRef","tableIsVisible","useIsVisible","breakpoint","useBreakpoint","useEffect","getCurrentConfig","_a","_c","_b","useLayoutEvent","tableStyle","getCenteredOverflowTableStyle","breakpointClass","getBreakpointClass","tableClass","classNames","styles","table","React","AnalyticsId","child","ariaLabelAttributes","getAriaLabelAttributes","HorizontalScroll"],"mappings":"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"}

package/components/Table/TableBody/TableBody.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ModeType } from '../Table';
-export interface Props {
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {
     /** Adds custom classes to the element. */
     className?: string;
     /** Sets the content of the table body. Use TableRows */
@@ -8,6 +8,6 @@ export interface Props {
     /** For display with less space. Discouraged to use together with interactive elements. */
     mode?: ModeType;
 }
-export declare const TableBody: ({ className, children, mode }: Props) => React.JSX.Element;
+export declare const TableBody: React.FC<Props>;
 export default TableBody;
 //# sourceMappingURL=TableBody.d.ts.map

package/components/Table/TableBody/TableBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableBody/TableBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0FAA0F;IAC1F,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,kCAAqD,KAAK,KAAG,SAAS,QAO3F,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableBody/TableBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IACnF,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0FAA0F;IAC1F,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAOrC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/Table/TableBody/TableBody.js

@@ -1,13 +1,13 @@
 import e from "react";
-import r from "classnames";
-import s from "../styles.module.scss";
-import { ModeType as n } from "../Table.js";
-const d = ({ className: o, children: a, mode: l = n.normal }) => {
-  const m = r(s["table-body"], o);
-  return /* @__PURE__ */ e.createElement("tbody", { className: m }, e.Children.map(a, (t) => e.isValidElement(t) && e.cloneElement(t, { mode: l })));
-}, f = d;
+import s from "classnames";
+import n from "../styles.module.scss";
+import { ModeType as d } from "../Table.js";
+const b = ({ className: o, children: a, mode: l = d.normal, ...m }) => {
+  const r = s(n["table-body"], o);
+  return /* @__PURE__ */ e.createElement("tbody", { className: r, ...m }, e.Children.map(a, (t) => e.isValidElement(t) && e.cloneElement(t, { mode: l })));
+}, i = b;
 export {
-  d as TableBody,
-  f as default
+  b as TableBody,
+  i as default
 };
 //# sourceMappingURL=TableBody.js.map

package/components/Table/TableBody/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","sources":["../../../../src/components/Table/TableBody/TableBody.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport interface Props {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table body. Use TableRows */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableBody = ({ className, children, mode = ModeType.normal }: Props): React.JSX.Element => {\n  const tableBodyClasses = classNames(tableStyles['table-body'], className);\n  return (\n    <tbody className={tableBodyClasses}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </tbody>\n  );\n};\n\nexport default TableBody;\n"],"names":["TableBody","className","children","mode","ModeType","tableBodyClasses","classNames","tableStyles","React","child","TableBody$1"],"mappings":";;;;AAgBa,MAAAA,IAAY,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,MAAAC,IAAOC,EAAS,aAAuC;AACtG,QAAMC,IAAmBC,EAAWC,EAAY,YAAY,GAAGN,CAAS;AAEtE,SAAAO,gBAAAA,EAAA,cAAC,WAAM,WAAWH,EAAA,GACfG,EAAM,SAAS,IAAIN,GAAU,CAASO,MAAAD,EAAM,eAAoCC,CAAK,KAAKD,EAAM,aAAaC,GAAO,EAAE,MAAAN,GAAM,CAAC,CAChI;AAEJ,GAEAO,IAAeV;"}
+{"version":3,"file":"TableBody.js","sources":["../../../../src/components/Table/TableBody/TableBody.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table body. Use TableRows */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableBody: React.FC<Props> = ({ className, children, mode = ModeType.normal, ...rest }) => {\n  const tableBodyClasses = classNames(tableStyles['table-body'], className);\n  return (\n    <tbody className={tableBodyClasses} {...rest}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </tbody>\n  );\n};\n\nexport default TableBody;\n"],"names":["TableBody","className","children","mode","ModeType","rest","tableBodyClasses","classNames","tableStyles","React","child","TableBody$1"],"mappings":";;;;AAgBa,MAAAA,IAA6B,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,MAAAC,IAAOC,EAAS,QAAQ,GAAGC,QAAW;AACtG,QAAMC,IAAmBC,EAAWC,EAAY,YAAY,GAAGP,CAAS;AAEtE,SAAAQ,gBAAAA,EAAA,cAAC,WAAM,WAAWH,GAAmB,GAAGD,EACrC,GAAAI,EAAM,SAAS,IAAIP,GAAU,CAAAQ,MAASD,EAAM,eAAoCC,CAAK,KAAKD,EAAM,aAAaC,GAAO,EAAE,MAAAP,EAAM,CAAA,CAAC,CAChI;AAEJ,GAEAQ,IAAeX;"}

package/components/Table/TableCell/TableCell.d.ts

@@ -5,9 +5,9 @@ export declare enum TextAlign {
     center = "center",
     right = "right"
 }
-export interface Props {
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {
     /** Label used for small viewport block */
-    dataLabel: string;
+    dataLabel?: string;
     /**  text align in cell */
     textAlign?: TextAlign;
     /**  nowrap for white space */
@@ -15,12 +15,12 @@ export interface Props {
     /** Adds custom classes to the element. */
     className?: string;
     /** Sets the content of the table cell */
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /** For display with less space. Discouraged to use together with interactive elements. */
     mode?: ModeType;
     /** For test purposes */
     testId?: string;
 }
-export declare const TableCell: ({ nowrap, textAlign, dataLabel, children, className, testId, mode, }: Props) => React.JSX.Element;
+export declare const TableCell: React.FC<Props>;
 export default TableCell;
 //# sourceMappingURL=TableCell.d.ts.map

package/components/Table/TableCell/TableCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableCell/TableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0FAA0F;IAC1F,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,wBAAwB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,yEAQnB,KAAK,KAAG,SAAS,QAenB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableCell/TableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAChF,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0FAA0F;IAC1F,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,wBAAwB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwBrC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/Table/TableCell/TableCell.js

@@ -1,18 +1,19 @@
-import b from "react";
-import f from "classnames";
+import f from "react";
+import n from "classnames";
 import t from "../styles.module.scss";
 import { ModeType as a } from "../Table.js";
-var n = /* @__PURE__ */ ((e) => (e.left = "left", e.center = "center", e.right = "right", e))(n || {});
-const p = ({
+var p = /* @__PURE__ */ ((e) => (e.left = "left", e.center = "center", e.right = "right", e))(p || {});
+const d = ({
   nowrap: e = !1,
   textAlign: l = "left",
   dataLabel: r,
   children: c,
   className: o,
   testId: m,
-  mode: s = a.normal
+  mode: s = a.normal,
+  ..._
 }) => {
-  const _ = f(
+  const b = n(
     t.table__cell,
     { [t["table__cell--compact"]]: s === a.compact },
     { [t["table__cell--nowrap"]]: e },
@@ -20,11 +21,11 @@ const p = ({
     { [t["table__cell--right"]]: l === "right" },
     o
   );
-  return /* @__PURE__ */ b.createElement("td", { className: _, "data-label": r, "data-testid": m }, c);
-}, C = p;
+  return /* @__PURE__ */ f.createElement("td", { className: b, "data-label": r, "data-testid": m, ..._ }, c);
+}, y = d;
 export {
-  p as TableCell,
-  n as TextAlign,
-  C as default
+  d as TableCell,
+  p as TextAlign,
+  y as default
 };
 //# sourceMappingURL=TableCell.js.map

package/components/Table/TableCell/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../../../../src/components/Table/TableCell/TableCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum TextAlign {\n  left = 'left',\n  center = 'center',\n  right = 'right',\n}\n\nexport interface Props {\n  /** Label used for small viewport block */\n  dataLabel: string;\n  /**  text align in cell */\n  textAlign?: TextAlign;\n  /**  nowrap for white space */\n  nowrap?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table cell */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** For test purposes */\n  testId?: string;\n}\n\nexport const TableCell = ({\n  nowrap = false,\n  textAlign = TextAlign.left,\n  dataLabel,\n  children,\n  className,\n  testId,\n  mode = ModeType.normal,\n}: Props): React.JSX.Element => {\n  const tableCellClass = classNames(\n    tableStyles['table__cell'],\n    { [tableStyles['table__cell--compact']]: mode === ModeType.compact },\n    { [tableStyles['table__cell--nowrap']]: nowrap },\n    { [tableStyles['table__cell--center']]: textAlign === 'center' },\n    { [tableStyles['table__cell--right']]: textAlign === 'right' },\n    className\n  );\n\n  return (\n    <td className={tableCellClass} data-label={dataLabel} data-testid={testId}>\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n"],"names":["TextAlign","TableCell","nowrap","textAlign","dataLabel","children","className","testId","mode","ModeType","tableCellClass","classNames","tableStyles","React","TableCell$1"],"mappings":";;;;AAOY,IAAAA,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAHEA,IAAAA,KAAA,CAAA,CAAA;AAuBL,MAAMC,IAAY,CAAC;AAAA,EACxB,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAOC,EAAS;AAClB,MAAgC;AAC9B,QAAMC,IAAiBC;AAAA,IACrBC,EAAY;AAAA,IACZ,EAAE,CAACA,EAAY,sBAAsB,CAAC,GAAGJ,MAASC,EAAS,QAAQ;AAAA,IACnE,EAAE,CAACG,EAAY,qBAAqB,CAAC,GAAGV,EAAO;AAAA,IAC/C,EAAE,CAACU,EAAY,qBAAqB,CAAC,GAAGT,MAAc,SAAS;AAAA,IAC/D,EAAE,CAACS,EAAY,oBAAoB,CAAC,GAAGT,MAAc,QAAQ;AAAA,IAC7DG;AAAA,EAAA;AAIA,SAAAO,gBAAAA,EAAA,cAAC,QAAG,WAAWH,GAAgB,cAAYN,GAAW,eAAaG,KAChEF,CACH;AAEJ,GAEAS,IAAeb;"}
+{"version":3,"file":"TableCell.js","sources":["../../../../src/components/Table/TableCell/TableCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum TextAlign {\n  left = 'left',\n  center = 'center',\n  right = 'right',\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {\n  /** Label used for small viewport block */\n  dataLabel?: string;\n  /**  text align in cell */\n  textAlign?: TextAlign;\n  /**  nowrap for white space */\n  nowrap?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table cell */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** For test purposes */\n  testId?: string;\n}\n\nexport const TableCell: React.FC<Props> = ({\n  nowrap = false,\n  textAlign = TextAlign.left,\n  dataLabel,\n  children,\n  className,\n  testId,\n  mode = ModeType.normal,\n  ...rest\n}) => {\n  const tableCellClass = classNames(\n    tableStyles['table__cell'],\n    { [tableStyles['table__cell--compact']]: mode === ModeType.compact },\n    { [tableStyles['table__cell--nowrap']]: nowrap },\n    { [tableStyles['table__cell--center']]: textAlign === 'center' },\n    { [tableStyles['table__cell--right']]: textAlign === 'right' },\n    className\n  );\n\n  return (\n    <td className={tableCellClass} data-label={dataLabel} data-testid={testId} {...rest}>\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n"],"names":["TextAlign","TableCell","nowrap","textAlign","dataLabel","children","className","testId","mode","ModeType","rest","tableCellClass","classNames","tableStyles","React","TableCell$1"],"mappings":";;;;AAOY,IAAAA,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAHEA,IAAAA,KAAA,CAAA,CAAA;AAuBL,MAAMC,IAA6B,CAAC;AAAA,EACzC,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAOC,EAAS;AAAA,EAChB,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAiBC;AAAA,IACrBC,EAAY;AAAA,IACZ,EAAE,CAACA,EAAY,sBAAsB,CAAC,GAAGL,MAASC,EAAS,QAAQ;AAAA,IACnE,EAAE,CAACI,EAAY,qBAAqB,CAAC,GAAGX,EAAO;AAAA,IAC/C,EAAE,CAACW,EAAY,qBAAqB,CAAC,GAAGV,MAAc,SAAS;AAAA,IAC/D,EAAE,CAACU,EAAY,oBAAoB,CAAC,GAAGV,MAAc,QAAQ;AAAA,IAC7DG;AAAA,EAAA;AAIA,SAAAQ,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWH,GAAgB,cAAYP,GAAW,eAAaG,GAAS,GAAGG,EAAA,GAC5EL,CACH;AAEJ,GAEAU,IAAed;"}

package/components/Table/TableHead/TableHead.d.ts

@@ -5,9 +5,9 @@ export declare enum HeaderCategory {
     transparent = "transparent",
     sortable = "sortable"
 }
-export interface Props {
-    /** Header category for styling */
-    category: HeaderCategory;
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'thead'>, 'style'> {
+    /** Header category for styling. Default: normal */
+    category?: HeaderCategory;
     /** Adds custom classes to the element. */
     className?: string;
     /** Sets the content of the thead. Add table rows  */
@@ -15,6 +15,6 @@ export interface Props {
     /** For display with less space. Discouraged to use together with interactive elements. */
     mode?: ModeType;
 }
-export declare const TableHead: ({ category, className, children, mode }: Props) => React.JSX.Element;
+export declare const TableHead: React.FC<Props>;
 export default TableHead;
 //# sourceMappingURL=TableHead.d.ts.map

package/components/Table/TableHead/TableHead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableHead/TableHead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,oBAAY,cAAc;IACxB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,KAAK;IACpB,kCAAkC;IAClC,QAAQ,EAAE,cAAc,CAAC;IACzB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0FAA0F;IAC1F,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,4CAA6C,KAAK,KAAG,SAAS,QAiBnF,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableHead/TableHead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,oBAAY,cAAc;IACxB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IACnF,mDAAmD;IACnD,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0FAA0F;IAC1F,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiBrC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/Table/TableHead/TableHead.js

@@ -1,24 +1,24 @@
 import t from "react";
-import o from "classnames";
+import b from "classnames";
 import e from "../styles.module.scss";
-import { ModeType as b } from "../Table.js";
-var p = /* @__PURE__ */ ((a) => (a.normal = "normal", a.transparent = "transparent", a.sortable = "sortable", a))(p || {});
-const _ = ({ category: a, className: n, children: s, mode: l }) => {
-  const m = o(
+import { ModeType as p } from "../Table.js";
+var _ = /* @__PURE__ */ ((a) => (a.normal = "normal", a.transparent = "transparent", a.sortable = "sortable", a))(_ || {});
+const d = ({ category: a = "normal", className: n, children: s, mode: l, ...m }) => {
+  const o = b(
     e.table__head,
     {
       [e["table__head--normal"]]: a === "normal",
       [e["table__head--transparent"]]: a === "transparent",
       [e["table__head--sortable"]]: a == "sortable",
-      [e["table__head--compact"]]: l == b.compact
+      [e["table__head--compact"]]: l == p.compact
     },
     n
   );
-  return /* @__PURE__ */ t.createElement("thead", { className: m }, t.Children.map(s, (r) => t.isValidElement(r) && t.cloneElement(r, { mode: l })));
-}, i = _;
+  return /* @__PURE__ */ t.createElement("thead", { className: o, ...m }, t.Children.map(s, (r) => t.isValidElement(r) && t.cloneElement(r, { mode: l })));
+}, u = d;
 export {
-  p as HeaderCategory,
-  _ as TableHead,
-  i as default
+  _ as HeaderCategory,
+  d as TableHead,
+  u as default
 };
 //# sourceMappingURL=TableHead.js.map

package/components/Table/TableHead/TableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.js","sources":["../../../../src/components/Table/TableHead/TableHead.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum HeaderCategory {\n  normal = 'normal',\n  transparent = 'transparent',\n  sortable = 'sortable',\n}\n\nexport interface Props {\n  /** Header category for styling */\n  category: HeaderCategory;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the thead. Add table rows  */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHead = ({ category, className, children, mode }: Props): React.JSX.Element => {\n  const tableHeadClass = classNames(\n    tableStyles['table__head'],\n    {\n      [tableStyles['table__head--normal']]: category === HeaderCategory.normal,\n      [tableStyles['table__head--transparent']]: category === HeaderCategory.transparent,\n      [tableStyles['table__head--sortable']]: category == HeaderCategory.sortable,\n      [tableStyles['table__head--compact']]: mode == ModeType.compact,\n    },\n    className\n  );\n\n  return (\n    <thead className={tableHeadClass}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </thead>\n  );\n};\n\nexport default TableHead;\n"],"names":["HeaderCategory","TableHead","category","className","children","mode","tableHeadClass","classNames","tableStyles","ModeType","React","child","TableHead$1"],"mappings":";;;;AAOY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,WAAW,YAHDA,IAAAA,KAAA,CAAA,CAAA;AAiBL,MAAMC,IAAY,CAAC,EAAE,UAAAC,GAAU,WAAAC,GAAW,UAAAC,GAAU,MAAAC,QAAqC;AAC9F,QAAMC,IAAiBC;AAAA,IACrBC,EAAY;AAAA,IACZ;AAAA,MACE,CAACA,EAAY,qBAAqB,CAAC,GAAGN,MAAa;AAAA,MACnD,CAACM,EAAY,0BAA0B,CAAC,GAAGN,MAAa;AAAA,MACxD,CAACM,EAAY,uBAAuB,CAAC,GAAGN,KAAY;AAAA,MACpD,CAACM,EAAY,sBAAsB,CAAC,GAAGH,KAAQI,EAAS;AAAA,IAC1D;AAAA,IACAN;AAAA,EAAA;AAIA,SAAAO,gBAAAA,EAAA,cAAC,WAAM,WAAWJ,EAAA,GACfI,EAAM,SAAS,IAAIN,GAAU,CAASO,MAAAD,EAAM,eAAoCC,CAAK,KAAKD,EAAM,aAAaC,GAAO,EAAE,MAAAN,GAAM,CAAC,CAChI;AAEJ,GAEAO,IAAeX;"}
+{"version":3,"file":"TableHead.js","sources":["../../../../src/components/Table/TableHead/TableHead.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum HeaderCategory {\n  normal = 'normal',\n  transparent = 'transparent',\n  sortable = 'sortable',\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'thead'>, 'style'> {\n  /** Header category for styling. Default: normal */\n  category?: HeaderCategory;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the thead. Add table rows  */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHead: React.FC<Props> = ({ category = HeaderCategory.normal, className, children, mode, ...rest }) => {\n  const tableHeadClass = classNames(\n    tableStyles['table__head'],\n    {\n      [tableStyles['table__head--normal']]: category === HeaderCategory.normal,\n      [tableStyles['table__head--transparent']]: category === HeaderCategory.transparent,\n      [tableStyles['table__head--sortable']]: category == HeaderCategory.sortable,\n      [tableStyles['table__head--compact']]: mode == ModeType.compact,\n    },\n    className\n  );\n\n  return (\n    <thead className={tableHeadClass} {...rest}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </thead>\n  );\n};\n\nexport default TableHead;\n"],"names":["HeaderCategory","TableHead","category","className","children","mode","rest","tableHeadClass","classNames","tableStyles","ModeType","React","child","TableHead$1"],"mappings":";;;;AAOY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,WAAW,YAHDA,IAAAA,KAAA,CAAA,CAAA;AAiBC,MAAAC,IAA6B,CAAC,EAAE,UAAAC,IAAW,UAAuB,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,GAAGC,QAAW;AACtH,QAAMC,IAAiBC;AAAA,IACrBC,EAAY;AAAA,IACZ;AAAA,MACE,CAACA,EAAY,qBAAqB,CAAC,GAAGP,MAAa;AAAA,MACnD,CAACO,EAAY,0BAA0B,CAAC,GAAGP,MAAa;AAAA,MACxD,CAACO,EAAY,uBAAuB,CAAC,GAAGP,KAAY;AAAA,MACpD,CAACO,EAAY,sBAAsB,CAAC,GAAGJ,KAAQK,EAAS;AAAA,IAC1D;AAAA,IACAP;AAAA,EAAA;AAIA,SAAAQ,gBAAAA,EAAA,cAAC,WAAM,WAAWJ,GAAiB,GAAGD,EACnC,GAAAK,EAAM,SAAS,IAAIP,GAAU,CAAAQ,MAASD,EAAM,eAAoCC,CAAK,KAAKD,EAAM,aAAaC,GAAO,EAAE,MAAAP,EAAM,CAAA,CAAC,CAChI;AAEJ,GAEAQ,IAAeZ;"}

package/components/Table/TableHeadCell/TableHeadCell.d.ts

@@ -4,7 +4,7 @@ export declare enum SortDirection {
     asc = "asc",
     desc = "desc"
 }
-export interface Props {
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'th'>, 'style'> {
     /** Sets if column for head cell should be sortable*/
     sortable?: boolean;
     /** Sort direction  */
@@ -18,6 +18,6 @@ export interface Props {
     /** For display with less space. Discouraged to use together with interactive elements. */
     mode?: ModeType;
 }
-export declare const TableHeadCell: ({ sortable, onClick, className, children, sortDir, mode }: Props) => React.JSX.Element;
+export declare const TableHeadCell: React.FC<Props>;
 export default TableHeadCell;
 //# sourceMappingURL=TableHeadCell.d.ts.map

package/components/Table/TableHeadCell/TableHeadCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeadCell.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableHeadCell/TableHeadCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,oBAAY,aAAa;IACvB,GAAG,QAAQ;IACX,IAAI,SAAS;CACd;AAED,MAAM,WAAW,KAAK;IACpB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0FAA0F;IAC1F,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,eAAO,MAAM,aAAa,8DAAiF,KAAK,KAAG,SAAS,QA2C3H,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TableHeadCell.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableHeadCell/TableHeadCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,oBAAY,aAAa;IACvB,GAAG,QAAQ;IACX,IAAI,SAAS;CACd;AAED,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAChF,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0FAA0F;IAC1F,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAoDzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/Table/TableHeadCell/TableHeadCell.js

@@ -1,21 +1,30 @@
 import t from "react";
-import s from "classnames";
-import { Icon as f } from "../../Icon/Icon.js";
-import { IconSize as u } from "../../../constants.js";
-import _ from "../../Icons/ArrowDown.js";
-import E from "../../Icons/ArrowUp.js";
-import c from "../styles.module.scss";
-import { ModeType as m } from "../Table.js";
-var h = /* @__PURE__ */ ((e) => (e.asc = "asc", e.desc = "desc", e))(h || {});
-const w = ({ sortable: e, onClick: n, className: r, children: l, sortDir: a, mode: d = m.normal }) => {
-  const o = s(c["table__head-cell"], r, {
-    [c["table__head-cell--compact"]]: d === m.compact
+import n from "classnames";
+import { Icon as _ } from "../../Icon/Icon.js";
+import { IconSize as E } from "../../../constants.js";
+import h from "../../Icons/ArrowDown.js";
+import w from "../../Icons/ArrowUp.js";
+import l from "../styles.module.scss";
+import { ModeType as d } from "../Table.js";
+var C = /* @__PURE__ */ ((e) => (e.asc = "asc", e.desc = "desc", e))(C || {});
+const N = ({
+  sortable: e,
+  onClick: p,
+  className: o,
+  children: r,
+  sortDir: a,
+  mode: i = d.normal,
+  scope: s = "col",
+  ...m
+}) => {
+  const c = n(l["table__head-cell"], o, {
+    [l["table__head-cell--compact"]]: i === d.compact
   });
-  if (!e && !l)
-    return /* @__PURE__ */ t.createElement("td", { className: o });
+  if (!e && !r)
+    return /* @__PURE__ */ t.createElement("td", { className: c });
   if (!e)
-    return /* @__PURE__ */ t.createElement("th", { scope: "col", className: o }, l);
-  const p = s(o, c["table__head-cell--sortable"], r), i = () => a && /* @__PURE__ */ t.createElement("div", { className: c["table__head-cell-sort-icon-wrapper"] }, /* @__PURE__ */ t.createElement(f, { svgIcon: a == "asc" ? _ : E, size: u.XXSmall })), b = () => {
+    return /* @__PURE__ */ t.createElement("th", { scope: s, className: c, ...m }, r);
+  const b = n(c, l["table__head-cell--sortable"], o), f = () => a && /* @__PURE__ */ t.createElement("div", { className: l["table__head-cell-sort-icon-wrapper"] }, /* @__PURE__ */ t.createElement(_, { svgIcon: a == "asc" ? h : w, size: E.XXSmall })), u = () => {
     switch (a) {
       case "asc":
         return "ascending";
@@ -23,11 +32,11 @@ const w = ({ sortable: e, onClick: n, className: r, children: l, sortDir: a, mod
         return "descending";
     }
   };
-  return /* @__PURE__ */ t.createElement("th", { scope: "col", className: p, "aria-sort": b() }, /* @__PURE__ */ t.createElement("button", { type: "button", onClick: n, className: c["table__sort-button"], "aria-pressed": a ? !!a : void 0 }, i(), l));
-}, T = w;
+  return /* @__PURE__ */ t.createElement("th", { scope: s, className: b, "aria-sort": u(), ...m }, /* @__PURE__ */ t.createElement("button", { type: "button", onClick: p, className: l["table__sort-button"], "aria-pressed": a ? !!a : void 0 }, f(), r));
+}, A = N;
 export {
-  h as SortDirection,
-  w as TableHeadCell,
-  T as default
+  C as SortDirection,
+  N as TableHeadCell,
+  A as default
 };
 //# sourceMappingURL=TableHeadCell.js.map

package/components/Table/TableHeadCell/TableHeadCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeadCell.js","sources":["../../../../src/components/Table/TableHeadCell/TableHeadCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum SortDirection {\n  asc = 'asc',\n  desc = 'desc',\n}\n\nexport interface Props {\n  /** Sets if column for head cell should be sortable*/\n  sortable?: boolean;\n  /** Sort direction  */\n  sortDir?: SortDirection;\n  /** Function that is called when clicked */\n  onClick?: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the td element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode = ModeType.normal }: Props): React.JSX.Element => {\n  const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n    [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n  });\n\n  if (!sortable && !children) {\n    return <td className={tableHeadCellDefaultClass}></td>;\n  }\n\n  if (!sortable) {\n    return (\n      <th scope=\"col\" className={tableHeadCellDefaultClass}>\n        {children}\n      </th>\n    );\n  }\n\n  const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles['table__head-cell--sortable'], className);\n\n  const renderSortIcon = (): React.JSX.Element | undefined =>\n    sortDir && (\n      <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n        <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n      </div>\n    );\n\n  const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n    switch (sortDir) {\n      case SortDirection.asc:\n        return 'ascending';\n      case SortDirection.desc:\n        return 'descending';\n    }\n  };\n\n  return (\n    <th scope=\"col\" className={sortableClasses} aria-sort={getSortDirection()}>\n      <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n        {renderSortIcon()}\n        {children}\n      </button>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["SortDirection","TableHeadCell","sortable","onClick","className","children","sortDir","mode","ModeType","tableHeadCellDefaultClass","classNames","tableStyles","React","sortableClasses","renderSortIcon","Icon","ArrowDown","ArrowUp","IconSize","getSortDirection","TableHeadCell$1"],"mappings":";;;;;;;;AAUY,IAAAA,sBAAAA,OACVA,EAAA,MAAM,OACNA,EAAA,OAAO,QAFGA,IAAAA,KAAA,CAAA,CAAA;AAoBC,MAAAC,IAAgB,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,WAAAC,GAAW,UAAAC,GAAU,SAAAC,GAAS,MAAAC,IAAOC,EAAS,aAAuC;AACtI,QAAMC,IAA4BC,EAAWC,EAAY,kBAAkB,GAAGP,GAAW;AAAA,IACvF,CAACO,EAAY,2BAA2B,CAAC,GAAGJ,MAASC,EAAS;AAAA,EAAA,CAC/D;AAEG,MAAA,CAACN,KAAY,CAACG;AACT,WAAAO,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWH,EAA2B,CAAA;AAGnD,MAAI,CAACP;AACH,2CACG,MAAG,EAAA,OAAM,OAAM,WAAWO,KACxBJ,CACH;AAIJ,QAAMQ,IAAkBH,EAAWD,GAA2BE,EAAY,4BAA4B,GAAGP,CAAS,GAE5GU,IAAiB,MACrBR,qCACG,OAAI,EAAA,WAAWK,EAAY,oCAAoC,EAAA,mCAC7DI,GAAK,EAAA,SAAST,KAAW,QAAoBU,IAAYC,GAAS,MAAMC,EAAS,SAAS,CAC7F,GAGEC,IAAmB,MAAyC;AAChE,YAAQb,GAAS;AAAA,MACf,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,IACX;AAAA,EAAA;AAIA,SAAAM,gBAAAA,EAAA,cAAC,MAAG,EAAA,OAAM,OAAM,WAAWC,GAAiB,aAAWM,EAAiB,EAAA,GACrEP,gBAAAA,EAAA,cAAA,UAAA,EAAO,MAAK,UAAS,SAAAT,GAAkB,WAAWQ,EAAY,oBAAoB,GAAG,gBAAcL,IAAU,CAAC,CAACA,IAAU,OACvH,GAAAQ,EAAA,GACAT,CACH,CACF;AAEJ,GAEAe,IAAenB;"}
+{"version":3,"file":"TableHeadCell.js","sources":["../../../../src/components/Table/TableHeadCell/TableHeadCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum SortDirection {\n  asc = 'asc',\n  desc = 'desc',\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'th'>, 'style'> {\n  /** Sets if column for head cell should be sortable*/\n  sortable?: boolean;\n  /** Sort direction  */\n  sortDir?: SortDirection;\n  /** Function that is called when clicked */\n  onClick?: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the td element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHeadCell: React.FC<Props> = ({\n  sortable,\n  onClick,\n  className,\n  children,\n  sortDir,\n  mode = ModeType.normal,\n  scope = 'col',\n  ...rest\n}) => {\n  const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n    [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n  });\n\n  if (!sortable && !children) {\n    return <td className={tableHeadCellDefaultClass}></td>;\n  }\n\n  if (!sortable) {\n    return (\n      <th scope={scope} className={tableHeadCellDefaultClass} {...rest}>\n        {children}\n      </th>\n    );\n  }\n\n  const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles['table__head-cell--sortable'], className);\n\n  const renderSortIcon = (): React.JSX.Element | undefined =>\n    sortDir && (\n      <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n        <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n      </div>\n    );\n\n  const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n    switch (sortDir) {\n      case SortDirection.asc:\n        return 'ascending';\n      case SortDirection.desc:\n        return 'descending';\n    }\n  };\n\n  return (\n    <th scope={scope} className={sortableClasses} aria-sort={getSortDirection()} {...rest}>\n      <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n        {renderSortIcon()}\n        {children}\n      </button>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["SortDirection","TableHeadCell","sortable","onClick","className","children","sortDir","mode","ModeType","scope","rest","tableHeadCellDefaultClass","classNames","tableStyles","React","sortableClasses","renderSortIcon","Icon","ArrowDown","ArrowUp","IconSize","getSortDirection","TableHeadCell$1"],"mappings":";;;;;;;;AAUY,IAAAA,sBAAAA,OACVA,EAAA,MAAM,OACNA,EAAA,OAAO,QAFGA,IAAAA,KAAA,CAAA,CAAA;AAoBL,MAAMC,IAAiC,CAAC;AAAA,EAC7C,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAOC,EAAS;AAAA,EAChB,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,MAAM;AACJ,QAAMC,IAA4BC,EAAWC,EAAY,kBAAkB,GAAGT,GAAW;AAAA,IACvF,CAACS,EAAY,2BAA2B,CAAC,GAAGN,MAASC,EAAS;AAAA,EAAA,CAC/D;AAEG,MAAA,CAACN,KAAY,CAACG;AACT,WAAAS,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWH,EAA2B,CAAA;AAGnD,MAAI,CAACT;AACH,2CACG,MAAG,EAAA,OAAAO,GAAc,WAAWE,GAA4B,GAAGD,KACzDL,CACH;AAIJ,QAAMU,IAAkBH,EAAWD,GAA2BE,EAAY,4BAA4B,GAAGT,CAAS,GAE5GY,IAAiB,MACrBV,qCACG,OAAI,EAAA,WAAWO,EAAY,oCAAoC,EAAA,mCAC7DI,GAAK,EAAA,SAASX,KAAW,QAAoBY,IAAYC,GAAS,MAAMC,EAAS,SAAS,CAC7F,GAGEC,IAAmB,MAAyC;AAChE,YAAQf,GAAS;AAAA,MACf,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,IACX;AAAA,EAAA;AAGF,SACGQ,gBAAAA,EAAA,cAAA,MAAA,EAAG,OAAAL,GAAc,WAAWM,GAAiB,aAAWM,EAAiB,GAAI,GAAGX,EAAA,GAC9EI,gBAAAA,EAAA,cAAA,UAAA,EAAO,MAAK,UAAS,SAAAX,GAAkB,WAAWU,EAAY,oBAAoB,GAAG,gBAAcP,IAAU,CAAC,CAACA,IAAU,OACvH,GAAAU,EACA,GAAAX,CACH,CACF;AAEJ,GAEAiB,IAAerB;"}

package/components/Table/TableRow/TableRow.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ModeType } from '../Table';
-export interface Props {
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {
     /** Sets if expanded row can be expanded */
     expandable?: boolean;
     /** Sets if expanded row is expanded */

package/components/Table/TableRow/TableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableRow/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGpC,MAAM,WAAW,KAAK;IACpB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0FAA0F;IAC1F,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkCpC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableRow/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGpC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAChF,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0FAA0F;IAC1F,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmCpC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/Table/TableRow/TableRow.js

@@ -1,9 +1,9 @@
 import e from "react";
-import i from "classnames";
+import w from "classnames";
 import t from "../styles.module.scss";
-import { ModeType as w } from "../Table.js";
-import _ from "../TableExpanderCell/TableExpanderCellMobile.js";
-const E = ({
+import { ModeType as _ } from "../Table.js";
+import E from "../TableExpanderCell/TableExpanderCellMobile.js";
+const d = ({
   rowKey: s,
   hideDetailsText: n,
   showDetailsText: b,
@@ -12,9 +12,10 @@ const E = ({
   onClick: o,
   className: p,
   children: c,
-  mode: r = w.normal
+  mode: r = _.normal,
+  ...f
 }) => {
-  const f = i(
+  const i = w(
     t["table-row"],
     {
       [t["table__row--expandable"]]: a,
@@ -22,8 +23,8 @@ const E = ({
     },
     p
   );
-  return /* @__PURE__ */ e.createElement("tr", { className: f, onClick: o, key: s }, e.Children.map(c, (m) => e.isValidElement(m) && e.cloneElement(m, { mode: r })), a && /* @__PURE__ */ e.createElement(
-    _,
+  return /* @__PURE__ */ e.createElement("tr", { className: i, onClick: o, key: s, ...f }, e.Children.map(c, (m) => e.isValidElement(m) && e.cloneElement(m, { mode: r })), a && /* @__PURE__ */ e.createElement(
+    E,
     {
       expanded: l,
       onClick: o,
@@ -32,9 +33,9 @@ const E = ({
       mode: r
     }
   ));
-}, x = E;
+}, C = d;
 export {
-  E as TableRow,
-  x as default
+  d as TableRow,
+  C as default
 };
 //# sourceMappingURL=TableRow.js.map

package/components/Table/TableRow/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../../../../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\n\nexport interface Props {\n  /** Sets if expanded row can be expanded */\n  expandable?: boolean;\n  /** Sets if expanded row is expanded */\n  expanded?: boolean;\n  /** When hide/show button for expanded row is clicked. */\n  onClick?: () => void;\n  /** Text for expanded row hide button. */\n  hideDetailsText?: string;\n  /** Text for expanded row show button. */\n  showDetailsText?: string;\n  /** Key attribute for row */\n  rowKey?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the cells of the table row element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableRow: React.FC<Props> = ({\n  rowKey,\n  hideDetailsText,\n  showDetailsText,\n  expandable,\n  expanded,\n  onClick,\n  className,\n  children,\n  mode = ModeType.normal,\n}) => {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n      [tableStyles['table__row--expanded']]: expanded,\n    },\n    className\n  );\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n      {expandable && (\n        <TableExpanderCellMobile\n          expanded={expanded}\n          onClick={onClick}\n          hideDetailsText={hideDetailsText}\n          showDetailsText={showDetailsText}\n          mode={mode}\n        />\n      )}\n    </tr>\n  );\n};\n\nexport default TableRow;\n"],"names":["TableRow","rowKey","hideDetailsText","showDetailsText","expandable","expanded","onClick","className","children","mode","ModeType","tableRowClass","classNames","tableStyles","React","child","TableExpanderCellMobile","TableRow$1"],"mappings":";;;;;AA6BO,MAAMA,IAA4B,CAAC;AAAA,EACxC,QAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAOC,EAAS;AAClB,MAAM;AACJ,QAAMC,IAAgBC;AAAA,IACpBC,EAAY,WAAW;AAAA,IACvB;AAAA,MACE,CAACA,EAAY,wBAAwB,CAAC,GAAGT;AAAA,MACzC,CAACS,EAAY,sBAAsB,CAAC,GAAGR;AAAA,IACzC;AAAA,IACAE;AAAA,EAAA;AAIA,SAAAO,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWH,GAAe,SAAAL,GAAkB,KAAKL,EAClD,GAAAa,EAAM,SAAS,IAAIN,GAAU,CAAAO,MAASD,EAAM,eAAoCC,CAAK,KAAKD,EAAM,aAAaC,GAAO,EAAE,MAAAN,EAAM,CAAA,CAAC,GAC7HL,KACCU,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAAX;AAAA,MACA,SAAAC;AAAA,MACA,iBAAAJ;AAAA,MACA,iBAAAC;AAAA,MACA,MAAAM;AAAA,IAAA;AAAA,EAAA,CAGN;AAEJ,GAEAQ,IAAejB;"}
+{"version":3,"file":"TableRow.js","sources":["../../../../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {\n  /** Sets if expanded row can be expanded */\n  expandable?: boolean;\n  /** Sets if expanded row is expanded */\n  expanded?: boolean;\n  /** When hide/show button for expanded row is clicked. */\n  onClick?: () => void;\n  /** Text for expanded row hide button. */\n  hideDetailsText?: string;\n  /** Text for expanded row show button. */\n  showDetailsText?: string;\n  /** Key attribute for row */\n  rowKey?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the cells of the table row element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableRow: React.FC<Props> = ({\n  rowKey,\n  hideDetailsText,\n  showDetailsText,\n  expandable,\n  expanded,\n  onClick,\n  className,\n  children,\n  mode = ModeType.normal,\n  ...rest\n}) => {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n      [tableStyles['table__row--expanded']]: expanded,\n    },\n    className\n  );\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey} {...rest}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n      {expandable && (\n        <TableExpanderCellMobile\n          expanded={expanded}\n          onClick={onClick}\n          hideDetailsText={hideDetailsText}\n          showDetailsText={showDetailsText}\n          mode={mode}\n        />\n      )}\n    </tr>\n  );\n};\n\nexport default TableRow;\n"],"names":["TableRow","rowKey","hideDetailsText","showDetailsText","expandable","expanded","onClick","className","children","mode","ModeType","rest","tableRowClass","classNames","tableStyles","React","child","TableExpanderCellMobile","TableRow$1"],"mappings":";;;;;AA6BO,MAAMA,IAA4B,CAAC;AAAA,EACxC,QAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAOC,EAAS;AAAA,EAChB,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAgBC;AAAA,IACpBC,EAAY,WAAW;AAAA,IACvB;AAAA,MACE,CAACA,EAAY,wBAAwB,CAAC,GAAGV;AAAA,MACzC,CAACU,EAAY,sBAAsB,CAAC,GAAGT;AAAA,IACzC;AAAA,IACAE;AAAA,EAAA;AAIA,SAAAQ,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWH,GAAe,SAAAN,GAAkB,KAAKL,GAAS,GAAGU,EAAA,GAC9DI,EAAM,SAAS,IAAIP,GAAU,OAASO,EAAM,eAAoCC,CAAK,KAAKD,EAAM,aAAaC,GAAO,EAAE,MAAAP,EAAM,CAAA,CAAC,GAC7HL,KACCW,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAAZ;AAAA,MACA,SAAAC;AAAA,MACA,iBAAAJ;AAAA,MACA,iBAAAC;AAAA,MACA,MAAAM;AAAA,IAAA;AAAA,EAAA,CAGN;AAEJ,GAEAS,IAAelB;"}

package/package.json

@@ -4,15 +4,12 @@
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "git",
-    "url": "https://github.com/helsenorge/designsystem"
+    "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "6.3.0",
+  "version": "6.4.0",
   "author": "Helsenorge",
   "license": "MIT",
-  "dependencies": {
-    "storybook-addon-html-validator": "^0.0.12"
-  },
   "peerDependencies": {
     "bootstrap": "^4.6.2",
     "classnames": "^2.3.2",

package/README.md

@@ -1,20 +0,0 @@
-# Helsenorge Designsystem - Frankenstein
-
-<a href="https://www.npmjs.com/package/@helsenorge/designsystem-react/v/latest">
-    <img src="https://img.shields.io/npm/v/@helsenorge/designsystem-react/latest" />
-</a>
-
-Helsenorge Designsystem, also known as Frankenstein, is a collection of React components that are used on https://www.helsenorge.no/ today.
-
-The repository also contains a set of hooks and utility functions. We also offer stylesheets for our breakpoints, spacers, typography and
-color palette.
-
-## Questions
-
-Questions about the code or project can be askes at [ROX Slack channel](https://norskhelsenett.slack.com/archives/CS70UT0R0) or as issues on
-GitHub.
-
-## Documentation
-
-To view all the available components in isolation, please view our storybook page here:
-https://frankensteinstorybook.z1.web.core.windows.net/master/