@helsenorge/designsystem-react 8.5.0 → 8.5.1

package/TabList.js

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

package/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.js","sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n  /** Sets the tab panel content */\n  children?: React.ReactNode;\n  /** Optional icon on the tab */\n  icon?: SvgIcon | IconName;\n  /** Called when tab is selected */\n  onTabClick?: (index: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title on the tab */\n  title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n  return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport { TabProps } from '../Tab';\nimport { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n  tabProps: TabProps;\n  index: number;\n  color: TabsColors;\n  selectedTab: number;\n  tabRefs: React.MutableRefObject<React.RefObject<HTMLButtonElement>[] | null | undefined>;\n  onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n  const isSelected = props.index === props.selectedTab;\n  const { title, onTabClick, icon, testId } = props.tabProps;\n  const handleClick = (): void => {\n    onTabClick && onTabClick(props.index);\n    props.onTabListClick(props.index);\n    scrollToTab(props.index);\n  };\n  const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n    [styles['tab-list__tab--selected']]: isSelected,\n    [styles['tab-list__tab--first']]: props.index == 0,\n  });\n\n  const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n  const scrollToTab = (index: number): void => {\n    const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n    currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\n  };\n\n  const itemRef = useRef<HTMLLIElement>(null);\n  const isVisible = useIsVisible(itemRef);\n\n  useEffect(() => {\n    if (isSelected && isVisible) {\n      scrollToTab(props.index);\n    }\n  }, [isSelected && isVisible]);\n\n  return (\n    <li role=\"presentation\" ref={itemRef}>\n      <button\n        role=\"tab\"\n        aria-selected={isSelected}\n        onClick={handleClick}\n        className={tabButtonClasses}\n        data-testid={testId}\n        ref={currentRef as React.RefObject<HTMLButtonElement>}\n      >\n        <span className={styles['tab-list__tab__title-and-icon']}>\n          {icon &&\n            (typeof icon === 'string' ? (\n              <LazyIcon\n                iconName={icon as IconName}\n                size={IconSize.XSmall}\n                color={isSelected ? palette[`black`] : palette['blueberry500']}\n              />\n            ) : (\n              <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n            ))}\n          {title}\n        </span>\n      </button>\n    </li>\n  );\n};\n\nexport default TabItem;\n","import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport TabItem from './TabItem';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab, { TabProps } from '../Tab';\nimport { TabsColors, TabsType } from '../Tabs';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color?: TabsColors;\n  type?: TabsType;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color = 'white', type = 'normal' } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()));\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${type}`]);\n\n  return (\n    <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n      {React.Children.map(children, (child, index) => {\n        if (isComponent<TabProps>(child, Tab)) {\n          return (\n            <TabItem\n              tabRefs={tabRefs}\n              key={child.props.title}\n              index={index}\n              selectedTab={selectedTab}\n              onTabListClick={onTabListClick}\n              tabProps={child.props}\n              color={color}\n            />\n          );\n        }\n        return null;\n      })}\n    </ul>\n  );\n};\n\nexport default TabList;\n"],"names":["Tab","props","jsx","Fragment","TabItem","isSelected","title","onTabClick","icon","testId","handleClick","scrollToTab","tabButtonClasses","classNames","styles","currentRef","index","itemRef","useRef","isVisible","useIsVisible","useEffect","jsxs","LazyIcon","IconSize","palette","Icon","TabList","selectedTab","onTabListClick","children","color","type","listRef","tabRefs","React","useRovingFocus","tablistClasses","child","isComponent"],"mappings":";;;;;;;;;;;AAkBA,MAAMA,IAA0B,CAASC,MAChC,gBAAAC,EAAAC,GAAA,EAAG,UAAMF,EAAA,YAAY,KAAK,CAAA,GCI7BG,IAAkC,CAASH,MAAA;AACzC,QAAAI,IAAaJ,EAAM,UAAUA,EAAM,aACnC,EAAE,OAAAK,GAAO,YAAAC,GAAY,MAAAC,GAAM,QAAAC,MAAWR,EAAM,UAC5CS,IAAc,MAAY;AAChB,IAAAH,KAAAA,EAAWN,EAAM,KAAK,GAC9BA,EAAA,eAAeA,EAAM,KAAK,GAChCU,EAAYV,EAAM,KAAK;AAAA,EAAA,GAEnBW,IAAmBC,EAAWC,EAAO,eAAe,GAAGA,EAAO,kBAAkBb,EAAM,KAAK,EAAE,GAAG;AAAA,IACpG,CAACa,EAAO,yBAAyB,CAAC,GAAGT;AAAA,IACrC,CAACS,EAAO,sBAAsB,CAAC,GAAGb,EAAM,SAAS;AAAA,EAAA,CAClD,GAEKc,IAAad,EAAM,QAAQ,WAAWA,EAAM,QAAQ,QAAQA,EAAM,KAAK,GAEvEU,IAAc,CAACK,MAAwB;;AAC3C,UAAMD,IAAad,EAAM,QAAQ,WAAWA,EAAM,QAAQ,QAAQe,CAAK;AACvED,KAAAA,IAAAA,KAAAA,gBAAAA,EAAY,YAAZA,QAAAA,EAAqB,eAAe,EAAE,UAAU,UAAU,QAAQ,UAAU,OAAO,UAAA;AAAA,EAAW,GAG1FE,IAAUC,EAAsB,IAAI,GACpCC,IAAYC,EAAaH,CAAO;AAEtC,SAAAI,EAAU,MAAM;AACd,IAAIhB,KAAcc,KAChBR,EAAYV,EAAM,KAAK;AAAA,EACzB,GACC,CAACI,KAAcc,CAAS,CAAC,GAGzB,gBAAAjB,EAAA,MAAA,EAAG,MAAK,gBAAe,KAAKe,GAC3B,UAAA,gBAAAf;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,iBAAeG;AAAA,MACf,SAASK;AAAA,MACT,WAAWE;AAAA,MACX,eAAaH;AAAA,MACb,KAAKM;AAAA,MAEL,UAAC,gBAAAO,EAAA,QAAA,EAAK,WAAWR,EAAO,+BAA+B,GACpD,UAAA;AAAA,QACEN,MAAA,OAAOA,KAAS,WACf,gBAAAN;AAAA,UAACqB;AAAA,UAAA;AAAA,YACC,UAAUf;AAAA,YACV,MAAMgB,EAAS;AAAA,YACf,OAAOnB,IAAaoB,EAAQ,QAAWA,EAAQ;AAAA,UAAc;AAAA,QAAA,IAG/D,gBAAAvB,EAACwB,GAAK,EAAA,SAASlB,GAAM,MAAMgB,EAAS,QAAQ,OAAOnB,IAAaoB,EAAQ,QAAWA,EAAQ,aAAiB,CAAA;AAAA,QAE/GnB;AAAA,MAAA,GACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,GC3DMqB,IAAkC,CAAS1B,MAAA;AACzC,QAAA,EAAE,aAAA2B,GAAa,gBAAAC,GAAgB,UAAAC,GAAU,OAAAC,IAAQ,SAAS,MAAAC,IAAO,SAAa,IAAA/B,GAE9EgC,IAAUf,EAAyB,IAAI,GAEvCgB,IAAUhB,EAAOiB,EAAM,SAAS,IAAIL,GAAU,MAAMK,EAAM,UAA8B,CAAA,CAAC;AAChF,EAAAC,EAAAP,GAAgBK,GAASD,GAAS,EAAI;AAE/C,QAAAI,IAAiBxB,EAAWC,EAAO,UAAU,GAAGA,EAAO,aAAakB,CAAI,EAAE,CAAC;AAEjF,2BACG,MAAG,EAAA,WAAWK,GAAgB,KAAKJ,GAAS,MAAK,WAAU,oBAAiB,cAC1E,YAAM,SAAS,IAAIH,GAAU,CAACQ,GAAOtB,MAChCuB,EAAsBD,GAAOtC,CAAG,IAEhC,gBAAAE;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,SAAA8B;AAAA,MAEA,OAAAlB;AAAA,MACA,aAAAY;AAAA,MACA,gBAAAC;AAAA,MACA,UAAUS,EAAM;AAAA,MAChB,OAAAP;AAAA,IAAA;AAAA,IALKO,EAAM,MAAM;AAAA,EAAA,IAShB,IACR,EACH,CAAA;AAEJ;"}

package/TabPanel.js

@@ -0,0 +1,18 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import l from "classnames";
+import a from "./components/Tabs/TabPanel/styles.module.scss";
+const h = y((n, r) => {
+  const { children: o, animate: t, color: i = "white", type: m = "normal", isFirst: p = !1, translateX: e, style: c } = n, f = l(a["tab-panel"], a[`tab-panel--${i}`], a[`tab-panel--${m}`], {
+    [a["tab-panel--first"]]: p
+  }), b = l({
+    [a["tab-panel--animate-left"]]: t === "left",
+    [a["tab-panel--animate-right"]]: t === "right"
+  }), d = e != 0 ? { transform: `translateX(${e}px)` } : {};
+  return /* @__PURE__ */ s("div", { ref: r, className: f, style: c, children: /* @__PURE__ */ s("div", { className: b, style: d, children: o }) });
+});
+h.displayName = "TabPanel";
+export {
+  h as T
+};
+//# sourceMappingURL=TabPanel.js.map

package/TabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.js","sources":["../src/components/Tabs/TabPanel/TabPanel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { TabsColors, TabsType } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  children?: React.ReactNode;\n  color?: TabsColors;\n  type?: TabsType;\n  isFirst?: boolean;\n  translateX?: number;\n  style?: React.CSSProperties;\n  animate: 'left' | 'right' | null;\n}\n\nconst TabPanel = forwardRef<HTMLDivElement, TabPanelProps>((props, ref) => {\n  const { children, animate, color = 'white', type = 'normal', isFirst = false, translateX, style } = props;\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], styles[`tab-panel--${type}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n  const contentClasses = classNames({\n    [styles['tab-panel--animate-left']]: animate === 'left',\n    [styles['tab-panel--animate-right']]: animate === 'right',\n  });\n  const transformStyle: React.CSSProperties = translateX != 0 ? { transform: `translateX(${translateX}px)` } : {};\n\n  return (\n    <div ref={ref} className={tabPanelClasses} style={style}>\n      <div className={contentClasses} style={transformStyle}>\n        {children}\n      </div>\n    </div>\n  );\n});\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n"],"names":["TabPanel","forwardRef","props","ref","children","animate","color","type","isFirst","translateX","style","tabPanelClasses","classNames","styles","contentClasses","transformStyle","jsx"],"mappings":";;;;AAkBA,MAAMA,IAAWC,EAA0C,CAACC,GAAOC,MAAQ;AACnE,QAAA,EAAE,UAAAC,GAAU,SAAAC,GAAS,OAAAC,IAAQ,SAAS,MAAAC,IAAO,UAAU,SAAAC,IAAU,IAAO,YAAAC,GAAY,OAAAC,EAAA,IAAUR,GAC9FS,IAAkBC,EAAWC,EAAO,WAAW,GAAGA,EAAO,cAAcP,CAAK,EAAE,GAAGO,EAAO,cAAcN,CAAI,EAAE,GAAG;AAAA,IACnH,CAACM,EAAO,kBAAkB,CAAC,GAAGL;AAAA,EAAA,CAC/B,GACKM,IAAiBF,EAAW;AAAA,IAChC,CAACC,EAAO,yBAAyB,CAAC,GAAGR,MAAY;AAAA,IACjD,CAACQ,EAAO,0BAA0B,CAAC,GAAGR,MAAY;AAAA,EAAA,CACnD,GACKU,IAAsCN,KAAc,IAAI,EAAE,WAAW,cAAcA,CAAU,MAAM,IAAI;AAE7G,SACG,gBAAAO,EAAA,OAAA,EAAI,KAAAb,GAAU,WAAWQ,GAAiB,OAAAD,GACzC,UAAC,gBAAAM,EAAA,OAAA,EAAI,WAAWF,GAAgB,OAAOC,GACpC,UAAAX,GACH,EACF,CAAA;AAEJ,CAAC;AAEDJ,EAAS,cAAc;"}

package/Table.js

@@ -0,0 +1,98 @@
+import { jsx as V } from "react/jsx-runtime";
+import p, { useState as b, useRef as L, useEffect as k } from "react";
+import D from "classnames";
+import { AnalyticsId as N } from "./constants.js";
+import { Breakpoint as m, useBreakpoint as O } from "./hooks/useBreakpoint.js";
+import { useIsVisible as P } from "./hooks/useIsVisible.js";
+import { useLayoutEvent as $ } from "./hooks/useLayoutEvent.js";
+import { getAriaLabelAttributes as F } from "./utils/accessibility.js";
+import { H as G } from "./HorizontalScroll.js";
+import y from "./components/Table/styles.module.scss";
+import { isTouchDevice as M } from "./utils/device.js";
+const X = (t) => t.variant === a.centeredoverflow || t.variant === a.block, j = (t) => t.variant === "centeredoverflow" || t.variant === "block" ? y[`table--${t.variant}-${t.breakpoint}`] : "", q = (t, o) => m[t.breakpoint] - m[o.breakpoint], W = (t, o) => m[t.breakpoint] >= o, J = (t, o) => {
+  if (Array.isArray(t))
+    return t.sort(q), t.find((l) => W(l, o));
+  if (t && W(t, o))
+    return t;
+}, K = (t, o, l, f) => {
+  const e = J(t, o), s = M(), c = l <= f;
+  if (e)
+    return e.variant === a.centeredoverflow && !c && e.fallbackVariant === a.horizontalscroll ? {
+      variant: s ? a.horizontalscroll : a.none,
+      breakpoint: e.breakpoint
+    } : e.variant === a.centeredoverflow && !c && e.fallbackVariant !== a.centeredoverflow ? {
+      variant: e.fallbackVariant ?? a.none,
+      breakpoint: e.breakpoint
+    } : e.variant === a.horizontalscroll && !s && e.fallbackVariant === a.centeredoverflow ? {
+      variant: c ? a.centeredoverflow : a.none,
+      breakpoint: e.breakpoint
+    } : e.variant === a.horizontalscroll && !s && e.fallbackVariant !== a.horizontalscroll ? {
+      variant: e.fallbackVariant ?? a.none,
+      breakpoint: e.breakpoint
+    } : e;
+}, Q = (t) => t && X(t) ? j(t) : void 0, Y = (t, o) => t >= o ? void 0 : { left: `${(t - o) / 2 - 8}px` };
+var a = /* @__PURE__ */ ((t) => (t.none = "none", t.centeredoverflow = "centeredoverflow", t.horizontalscroll = "horizontalscroll", t.block = "block", t))(a || {}), Z = /* @__PURE__ */ ((t) => (t.compact = "compact", t.normal = "normal", t))(Z || {});
+const g = [
+  {
+    breakpoint: "xl",
+    variant: "centeredoverflow",
+    fallbackVariant: "horizontalscroll"
+    /* horizontalscroll */
+  }
+], bt = [
+  {
+    breakpoint: "xl",
+    variant: "centeredoverflow",
+    fallbackVariant: "horizontalscroll"
+    /* horizontalscroll */
+  },
+  {
+    breakpoint: "sm",
+    variant: "centeredoverflow",
+    fallbackVariant: "block"
+    /* block */
+  }
+], ft = ({
+  id: t,
+  testId: o,
+  className: l,
+  children: f,
+  breakpointConfig: e = g,
+  mode: s = "normal",
+  scrollAriaLabel: c,
+  scrollAriaLabelledById: T,
+  ...E
+}) => {
+  const [r, U] = b(), [i, w] = b(0), [A, I] = b(0), [h, R] = b(window.innerWidth), d = L(null), u = P(d, 0), v = O();
+  k(() => {
+    U(K(e, v, i, h));
+  }, [e, v, i, h]), k(() => {
+    var n, C, B;
+    ((r == null ? void 0 : r.variant) === "centeredoverflow" || (r == null ? void 0 : r.variant) === "horizontalscroll") && w(((n = d.current) == null ? void 0 : n.getBoundingClientRect().width) ?? 0), (r == null ? void 0 : r.variant) === "centeredoverflow" && I(((B = (C = d.current) == null ? void 0 : C.parentElement) == null ? void 0 : B.getBoundingClientRect().width) ?? 0);
+  }, [r, v]), $(() => R(window.innerWidth), ["resize"], 100), k(() => {
+    var n;
+    i === 0 && u && w(((n = d.current) == null ? void 0 : n.getBoundingClientRect().width) ?? 0);
+  }, [i, u]);
+  const S = (r == null ? void 0 : r.variant) === "centeredoverflow" ? Y(A, i) : void 0, _ = Q(r), x = D(y.table, _, l), z = /* @__PURE__ */ V(
+    "table",
+    {
+      className: x,
+      id: t,
+      "data-testid": o,
+      "data-analyticsid": N.Table,
+      ref: d,
+      style: S,
+      ...E,
+      children: p.Children.map(f, (n) => p.isValidElement(n) && p.cloneElement(n, { mode: s }))
+    }
+  ), H = F({ label: c, id: T });
+  return (r == null ? void 0 : r.variant) === "horizontalscroll" ? /* @__PURE__ */ V(G, { childWidth: i, testId: "horizontal-scroll", ...H, children: z }) : z;
+};
+export {
+  Z as M,
+  a as R,
+  ft as T,
+  g as d,
+  bt as s
+};
+//# sourceMappingURL=Table.js.map

package/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../src/components/Table/utils.ts","../src/components/Table/Table.tsx"],"sourcesContent":["import React from 'react';\n\nimport { BreakpointConfig, ResponsiveTableVariant } from './Table';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string =>\n  config.variant === 'centeredoverflow' || config.variant === 'block' ? styles[`table--${config.variant}-${config.breakpoint}`] : '';\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra største til minste\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsDescending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    config.sort(sortByBreakpointsDescending);\n\n    return config.find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/**\n * Finn riktig posisjon for horisontal sentrering av tabell som skal vises \"centeredoverflow\"\n * @param parentWidth Bredde på element som tabellen ligger i\n * @param tableWidth Bredde på tabellen\n * @returns Styling som posisjonerer tabellen riktig\n */\nexport const getCenteredOverflowTableStyle = (parentWidth: number, tableWidth: number): React.CSSProperties | undefined => {\n  if (parentWidth >= tableWidth) {\n    return;\n  }\n\n  const COLUMN_GUTTER_WIDTH_PX = 8;\n\n  return { left: `${(parentWidth - tableWidth) / 2 - COLUMN_GUTTER_WIDTH_PX}px` };\n};\n","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":["configUsesCss","config","ResponsiveTableVariant","mapConfigToClass","styles","sortByBreakpointsDescending","a","b","Breakpoint","isValidForCurrentBreakpoint","breakpoint","getConfigForBreakpoint","x","getCurrentConfig","tableWidth","windowWidth","breakpointConfig","canUseHorizontalScroll","isTouchDevice","canUseCenteredOverflow","getBreakpointClass","getCenteredOverflowTableStyle","parentWidth","ModeType","defaultConfig","simpleConfig","Table","id","testId","className","children","mode","scrollAriaLabel","scrollAriaLabelledById","rest","currentConfig","setCurrentConfig","useState","setTableWidth","setParentWidth","setWindowWidth","tableRef","useRef","tableIsVisible","useIsVisible","useBreakpoint","useEffect","_a","_c","_b","useLayoutEvent","tableStyle","breakpointClass","tableClass","classNames","table","jsx","AnalyticsId","React","child","ariaLabelAttributes","getAriaLabelAttributes","HorizontalScroll"],"mappings":"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"}

package/TableBody.js

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

package/TableBody.js.map

@@ -0,0 +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 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","jsx","React","child"],"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,SAAA,gBAAAQ,EAAC,WAAM,WAAWH,GAAmB,GAAGD,GACrC,UAAAK,EAAM,SAAS,IAAIR,GAAU,CAAAS,MAASD,EAAM,eAAoCC,CAAK,KAAKD,EAAM,aAAaC,GAAO,EAAE,MAAAR,GAAM,CAAC,EAChI,CAAA;AAEJ;"}

package/{components/Table/TableCell/TableCell.js → TableCell.js}

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

package/TableCell.js.map

@@ -0,0 +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 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","jsx"],"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,SAAA,gBAAAQ,EAAC,MAAG,EAAA,WAAWH,GAAgB,cAAYP,GAAW,eAAaG,GAAS,GAAGG,GAC5E,UAAAL,EACH,CAAA;AAEJ;"}

package/TableExpandedRow.js

@@ -0,0 +1,37 @@
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import r from "react";
+import t from "classnames";
+import { B as h } from "./Button.js";
+import { I as w } from "./Icon.js";
+import v from "./components/Icons/ChevronUp.js";
+import e from "./components/Table/styles.module.scss";
+import { M as m } from "./Table.js";
+const B = ({
+  numberOfColumns: c,
+  expanded: a,
+  hideDetailsText: i,
+  toggleClick: p,
+  children: d,
+  className: l,
+  mode: b = m.normal,
+  id: _
+}) => {
+  const f = t(
+    e["table__expanded-row"],
+    { [e["table__expanded-row--expanded"]]: a },
+    l
+  ), x = t(e.table__cell, l, {
+    [e["table__cell--compact"]]: b === m.compact
+  }), C = t(e["table__expanded-row-container"]);
+  return /* @__PURE__ */ o("tr", { className: f, id: _, children: /* @__PURE__ */ o("td", { colSpan: c, className: x, children: /* @__PURE__ */ s("div", { className: C, children: [
+    r.Children.map(d, (n) => r.isValidElement(n) && r.cloneElement(n)),
+    /* @__PURE__ */ s(h, { variant: "borderless", onClick: p, "aria-expanded": a, tabIndex: a ? 0 : -1, children: [
+      i,
+      /* @__PURE__ */ o(w, { svgIcon: v })
+    ] })
+  ] }) }) });
+};
+export {
+  B as T
+};
+//# sourceMappingURL=TableExpandedRow.js.map

package/TableExpandedRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableExpandedRow.js","sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport interface Props {\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Number of columns in table. */\n  numberOfColumns: number;\n  /** Text for hide button. */\n  hideDetailsText: string;\n  /** When hide button inside expanded row is clicked. */\n  toggleClick: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the expanded row.  */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Row id. For use with aria-controls. */\n  id?: string;\n}\n\nexport const TableExpandedRow = ({\n  numberOfColumns,\n  expanded,\n  hideDetailsText,\n  toggleClick,\n  children,\n  className,\n  mode = ModeType.normal,\n  id,\n}: Props): React.JSX.Element => {\n  const tableRowClass = classNames(\n    tableStyles['table__expanded-row'],\n    { [tableStyles['table__expanded-row--expanded']]: expanded },\n    className\n  );\n  const tableCellClass = classNames(tableStyles['table__cell'], className, {\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n\n  const containerClass = classNames(tableStyles['table__expanded-row-container']);\n\n  return (\n    <tr className={tableRowClass} id={id}>\n      <td colSpan={numberOfColumns} className={tableCellClass}>\n        <div className={containerClass}>\n          {React.Children.map(children, child => React.isValidElement(child) && React.cloneElement(child))}\n          <Button variant={'borderless'} onClick={toggleClick} aria-expanded={expanded} tabIndex={expanded ? 0 : -1}>\n            {hideDetailsText}\n            <Icon svgIcon={ChevronUp} />\n          </Button>\n        </div>\n      </td>\n    </tr>\n  );\n};\n\nexport default TableExpandedRow;\n"],"names":["TableExpandedRow","numberOfColumns","expanded","hideDetailsText","toggleClick","children","className","mode","ModeType","id","tableRowClass","classNames","tableStyles","tableCellClass","containerClass","jsx","jsxs","React","child","Button","Icon","ChevronUp"],"mappings":";;;;;;;;AA6BO,MAAMA,IAAmB,CAAC;AAAA,EAC/B,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAOC,EAAS;AAAA,EAChB,IAAAC;AACF,MAAgC;AAC9B,QAAMC,IAAgBC;AAAA,IACpBC,EAAY,qBAAqB;AAAA,IACjC,EAAE,CAACA,EAAY,+BAA+B,CAAC,GAAGV,EAAS;AAAA,IAC3DI;AAAA,EAAA,GAEIO,IAAiBF,EAAWC,EAAY,aAAgBN,GAAW;AAAA,IACvE,CAACM,EAAY,sBAAsB,CAAC,GAAGL,MAASC,EAAS;AAAA,EAAA,CAC1D,GAEKM,IAAiBH,EAAWC,EAAY,+BAA+B,CAAC;AAE9E,SACG,gBAAAG,EAAA,MAAA,EAAG,WAAWL,GAAe,IAAAD,GAC5B,UAAC,gBAAAM,EAAA,MAAA,EAAG,SAASd,GAAiB,WAAWY,GACvC,UAAC,gBAAAG,EAAA,OAAA,EAAI,WAAWF,GACb,UAAA;AAAA,IAAMG,EAAA,SAAS,IAAIZ,GAAU,CAASa,MAAAD,EAAM,eAAeC,CAAK,KAAKD,EAAM,aAAaC,CAAK,CAAC;AAAA,IAC/F,gBAAAF,EAACG,GAAO,EAAA,SAAS,cAAc,SAASf,GAAa,iBAAeF,GAAU,UAAUA,IAAW,IAAI,IACpG,UAAA;AAAA,MAAAC;AAAA,MACD,gBAAAY,EAACK,GAAK,EAAA,SAASC,EAAW,CAAA;AAAA,IAAA,GAC5B;AAAA,EAAA,GACF,GACF,EACF,CAAA;AAEJ;"}

package/TableExpanderCell.js

@@ -0,0 +1,34 @@
+import { jsx as r } from "react/jsx-runtime";
+import i from "classnames";
+import { B as p } from "./Button.js";
+import { I as b } from "./Icon.js";
+import f from "./components/Icons/ChevronDown.js";
+import _ from "./components/Icons/ChevronUp.js";
+import a from "./components/Table/styles.module.scss";
+import { M as e } from "./Table.js";
+const B = ({
+  expandableRowId: l,
+  hideDetailsText: t,
+  showDetailsText: m,
+  expanded: o,
+  className: s,
+  mode: c = e.normal
+}) => {
+  const n = i(a.table__cell, a["table__cell-expander"], s, {
+    [a["table__cell--compact"]]: c === e.compact
+  });
+  return /* @__PURE__ */ r("td", { className: n, children: /* @__PURE__ */ r(
+    p,
+    {
+      variant: "borderless",
+      "aria-expanded": o,
+      "aria-controls": l,
+      ariaLabel: o ? t : m,
+      children: /* @__PURE__ */ r(b, { svgIcon: o ? _ : f })
+    }
+  ) });
+};
+export {
+  B as T
+};
+//# sourceMappingURL=TableExpanderCell.js.map

package/TableExpanderCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableExpanderCell.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\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  /** Row is expanded. */\n  expanded: boolean;\n  /** Id for expanded row. */\n  expandableRowId: string;\n  /** Text for hide button used for aria label. */\n  hideDetailsText: string;\n  /** Text for show button used for aria label. */\n  showDetailsText: string;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableExpanderCell = ({\n  expandableRowId,\n  hideDetailsText,\n  showDetailsText,\n  expanded,\n  className,\n  mode = ModeType.normal,\n}: Props): React.JSX.Element => {\n  const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className, {\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n  const icon = expanded ? ChevronUp : ChevronDown;\n\n  return (\n    <td className={tableCellClass}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={expanded}\n        aria-controls={expandableRowId}\n        ariaLabel={expanded ? hideDetailsText : showDetailsText}\n      >\n        <Icon svgIcon={icon} />\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCell;\n"],"names":["TableExpanderCell","expandableRowId","hideDetailsText","showDetailsText","expanded","className","mode","ModeType","tableCellClass","classNames","tableStyles","jsx","Button","Icon","ChevronUp","ChevronDown"],"mappings":";;;;;;;;AA0BO,MAAMA,IAAoB,CAAC;AAAA,EAChC,iBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAOC,EAAS;AAClB,MAAgC;AACxB,QAAAC,IAAiBC,EAAWC,EAAY,aAAgBA,EAAY,sBAAsB,GAAGL,GAAW;AAAA,IAC5G,CAACK,EAAY,sBAAsB,CAAC,GAAGJ,MAASC,EAAS;AAAA,EAAA,CAC1D;AAIC,SAAA,gBAAAI,EAAC,MAAG,EAAA,WAAWH,GACb,UAAA,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,iBAAeR;AAAA,MACf,iBAAeH;AAAA,MACf,WAAWG,IAAWF,IAAkBC;AAAA,MAExC,UAAA,gBAAAQ,EAACE,GAAK,EAAA,SAVCT,IAAWU,IAAYC,EAUT,CAAA;AAAA,IAAA;AAAA,EAEzB,EAAA,CAAA;AAEJ;"}

package/TableHead.js

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

package/TableHead.js.map

@@ -0,0 +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 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","jsx","React","child"],"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,SAAA,gBAAAQ,EAAC,WAAM,WAAWJ,GAAiB,GAAGD,GACnC,UAAAM,EAAM,SAAS,IAAIR,GAAU,CAAAS,MAASD,EAAM,eAAoCC,CAAK,KAAKD,EAAM,aAAaC,GAAO,EAAE,MAAAR,GAAM,CAAC,EAChI,CAAA;AAEJ;"}

package/TableHeadCell.js

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

package/TableHeadCell.js.map

@@ -0,0 +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 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","jsx","sortableClasses","renderSortIcon","Icon","ArrowDown","ArrowUp","IconSize","jsxs"],"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,WAAA,gBAAAS,EAAC,MAAG,EAAA,WAAWH,EAA2B,CAAA;AAGnD,MAAI,CAACT;AACH,6BACG,MAAG,EAAA,OAAAO,GAAc,WAAWE,GAA4B,GAAGD,GACzD,UAAAL,EACH,CAAA;AAIJ,QAAMU,IAAkBH,EAAWD,GAA2BE,EAAY,4BAA4B,GAAGT,CAAS,GAE5GY,IAAiB,MACrBV,uBACG,OAAI,EAAA,WAAWO,EAAY,oCAAoC,GAC9D,4BAACI,GAAK,EAAA,SAASX,KAAW,QAAoBY,IAAYC,GAAS,MAAMC,EAAS,SAAS,EAC7F,CAAA;AAaF,SAAA,gBAAAN,EAAC,MAAG,EAAA,OAAAL,GAAc,WAAWM,GAAiB,cAVvB,MAAyC;AAChE,YAAQT,GAAS;AAAA,MACf,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,IACX;AAAA,EAAA,GAI0E,GAAI,GAAGI,GAC/E,UAAC,gBAAAW,EAAA,UAAA,EAAO,MAAK,UAAS,SAAAlB,GAAkB,WAAWU,EAAY,oBAAoB,GAAG,gBAAcP,IAAU,CAAC,CAACA,IAAU,QACvH,UAAA;AAAA,IAAeU,EAAA;AAAA,IACfX;AAAA,EAAA,EACH,CAAA,EACF,CAAA;AAEJ;"}

package/TableRow.js

@@ -0,0 +1,62 @@
+import { jsx as n, jsxs as b } from "react/jsx-runtime";
+import s from "react";
+import _ from "classnames";
+import o from "./components/Table/styles.module.scss";
+import { M as c } from "./Table.js";
+import { B as x } from "./Button.js";
+import { I as C } from "./Icon.js";
+import v from "./components/Icons/ChevronDown.js";
+import T from "./components/Icons/ChevronUp.js";
+const u = ({
+  expanded: e,
+  onClick: a,
+  hideDetailsText: t,
+  showDetailsText: r,
+  mode: m = c.normal
+}) => {
+  const l = _(o.table__cell, o["table__expander-cell-mobile"], {
+    [o["table__expander-cell-mobile--expanded"]]: e,
+    [o["table__cell--compact"]]: m === c.compact
+  });
+  return /* @__PURE__ */ n("td", { className: l, children: /* @__PURE__ */ b(x, { "aria-expanded": e, variant: "borderless", onClick: a, children: [
+    /* @__PURE__ */ n(C, { svgIcon: e ? T : v }),
+    " ",
+    e ? t : r
+  ] }) });
+}, D = ({
+  rowKey: e,
+  hideDetailsText: a,
+  showDetailsText: t,
+  expandable: r,
+  expanded: m,
+  onClick: l,
+  className: f,
+  children: d,
+  mode: i = c.normal,
+  ...h
+}) => {
+  const w = _(
+    o["table-row"],
+    {
+      [o["table__row--expandable"]]: r
+    },
+    f
+  );
+  return /* @__PURE__ */ b("tr", { className: w, onClick: l, ...h, children: [
+    s.Children.map(d, (p) => s.isValidElement(p) && s.cloneElement(p, { mode: i })),
+    r && /* @__PURE__ */ n(
+      u,
+      {
+        expanded: m,
+        onClick: l,
+        hideDetailsText: a,
+        showDetailsText: t,
+        mode: i
+      }
+    )
+  ] }, e);
+};
+export {
+  D as T
+};
+//# sourceMappingURL=TableRow.js.map

package/TableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport { Props } from '../TableRow/TableRow';\n\ntype TableExpanderCellMobileProps = Pick<Props, 'expanded' | 'onClick' | 'hideDetailsText' | 'showDetailsText' | 'mode'>;\n\nconst TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps> = ({\n  expanded,\n  onClick,\n  hideDetailsText,\n  showDetailsText,\n  mode = ModeType.normal,\n}) => {\n  const cellClass = classNames(tableStyles.table__cell, tableStyles['table__expander-cell-mobile'], {\n    [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n\n  return (\n    <td className={cellClass}>\n      <Button aria-expanded={expanded} variant=\"borderless\" onClick={onClick}>\n        <Icon svgIcon={expanded ? ChevronUp : ChevronDown} /> {expanded ? hideDetailsText : showDetailsText}\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCellMobile;\n","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    },\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":["TableExpanderCellMobile","expanded","onClick","hideDetailsText","showDetailsText","mode","ModeType","cellClass","classNames","tableStyles","jsx","jsxs","Button","Icon","ChevronUp","ChevronDown","TableRow","rowKey","expandable","className","children","rest","tableRowClass","React","child"],"mappings":";;;;;;;;;AAcA,MAAMA,IAAkE,CAAC;AAAA,EACvE,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,MAAAC,IAAOC,EAAS;AAClB,MAAM;AACJ,QAAMC,IAAYC,EAAWC,EAAY,aAAaA,EAAY,6BAA6B,GAAG;AAAA,IAChG,CAACA,EAAY,uCAAuC,CAAC,GAAGR;AAAA,IACxD,CAACQ,EAAY,sBAAsB,CAAC,GAAGJ,MAASC,EAAS;AAAA,EAAA,CAC1D;AAGC,SAAA,gBAAAI,EAAC,MAAG,EAAA,WAAWH,GACb,UAAA,gBAAAI,EAACC,KAAO,iBAAeX,GAAU,SAAQ,cAAa,SAAAC,GACpD,UAAA;AAAA,IAAA,gBAAAQ,EAACG,GAAK,EAAA,SAASZ,IAAWa,IAAYC,GAAa;AAAA,IAAE;AAAA,IAAEd,IAAWE,IAAkBC;AAAA,EAAA,EACtF,CAAA,EACF,CAAA;AAEJ,GCJaY,IAA4B,CAAC;AAAA,EACxC,QAAAC;AAAA,EACA,iBAAAd;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAc;AAAA,EACA,UAAAjB;AAAA,EACA,SAAAC;AAAA,EACA,WAAAiB;AAAA,EACA,UAAAC;AAAA,EACA,MAAAf,IAAOC,EAAS;AAAA,EAChB,GAAGe;AACL,MAAM;AACJ,QAAMC,IAAgBd;AAAA,IACpBC,EAAY,WAAW;AAAA,IACvB;AAAA,MACE,CAACA,EAAY,wBAAwB,CAAC,GAAGS;AAAA,IAC3C;AAAA,IACAC;AAAA,EAAA;AAGF,2BACG,MAAG,EAAA,WAAWG,GAAe,SAAApB,GAAgC,GAAGmB,GAC9D,UAAA;AAAA,IAAAE,EAAM,SAAS,IAAIH,GAAU,CAAAI,MAASD,EAAM,eAAoCC,CAAK,KAAKD,EAAM,aAAaC,GAAO,EAAE,MAAAnB,EAAM,CAAA,CAAC;AAAA,IAC7Ha,KACC,gBAAAR;AAAA,MAACV;AAAA,MAAA;AAAA,QACC,UAAAC;AAAA,QACA,SAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,MAAAC;AAAA,MAAA;AAAA,IACF;AAAA,EAAA,EAAA,GATiDY,CAWrD;AAEJ;"}