@helsenorge/designsystem-react 9.4.0 → 9.4.3

package/Table.js

@@ -1,45 +1,88 @@
-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 = [
+import { jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect } from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "./constants.js";
+import { Breakpoint, useBreakpoint } from "./hooks/useBreakpoint.js";
+import { useIsVisible } from "./hooks/useIsVisible.js";
+import { useLayoutEvent } from "./hooks/useLayoutEvent.js";
+import { getAriaLabelAttributes } from "./utils/accessibility.js";
+import { H as HorizontalScroll } from "./HorizontalScroll.js";
+import tableStyles from "./components/Table/styles.module.scss";
+import { isTouchDevice } from "./utils/device.js";
+const configUsesCss = (config) => config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;
+const mapConfigToClass = (config) => config.variant === "centeredoverflow" || config.variant === "block" ? tableStyles[`table--${config.variant}-${config.breakpoint}`] : "";
+const sortByBreakpointsDescending = (a, b) => Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];
+const isValidForCurrentBreakpoint = (config, breakpoint) => Breakpoint[config.breakpoint] >= breakpoint;
+const getConfigForBreakpoint = (config, breakpoint) => {
+  if (Array.isArray(config)) {
+    config.sort(sortByBreakpointsDescending);
+    return config.find((x) => isValidForCurrentBreakpoint(x, breakpoint));
+  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {
+    return config;
+  }
+};
+const getCurrentConfig = (config, breakpoint, tableWidth, windowWidth) => {
+  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);
+  const canUseHorizontalScroll = isTouchDevice();
+  const canUseCenteredOverflow = tableWidth <= windowWidth;
+  if (!breakpointConfig) {
+    return;
+  }
+  if (breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow && !canUseCenteredOverflow && breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll) {
+    return {
+      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,
+      breakpoint: breakpointConfig.breakpoint
+    };
+  }
+  if (breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow && !canUseCenteredOverflow && breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow) {
+    return {
+      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,
+      breakpoint: breakpointConfig.breakpoint
+    };
+  }
+  if (breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll && !canUseHorizontalScroll && breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow) {
+    return {
+      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,
+      breakpoint: breakpointConfig.breakpoint
+    };
+  }
+  if (breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll && !canUseHorizontalScroll && breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll) {
+    return {
+      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,
+      breakpoint: breakpointConfig.breakpoint
+    };
+  }
+  return breakpointConfig;
+};
+const getBreakpointClass = (config) => config && configUsesCss(config) ? mapConfigToClass(config) : void 0;
+const getCenteredOverflowTableStyle = (parentWidth, tableWidth) => {
+  if (parentWidth >= tableWidth) {
+    return;
+  }
+  const COLUMN_GUTTER_WIDTH_PX = 8;
+  return { left: `${(parentWidth - tableWidth) / 2 - COLUMN_GUTTER_WIDTH_PX}px` };
+};
+var ResponsiveTableVariant = /* @__PURE__ */ ((ResponsiveTableVariant2) => {
+  ResponsiveTableVariant2["none"] = "none";
+  ResponsiveTableVariant2["centeredoverflow"] = "centeredoverflow";
+  ResponsiveTableVariant2["horizontalscroll"] = "horizontalscroll";
+  ResponsiveTableVariant2["block"] = "block";
+  return ResponsiveTableVariant2;
+})(ResponsiveTableVariant || {});
+var ModeType = /* @__PURE__ */ ((ModeType2) => {
+  ModeType2["compact"] = "compact";
+  ModeType2["normal"] = "normal";
+  return ModeType2;
+})(ModeType || {});
+const defaultConfig = [
   {
     breakpoint: "xl",
     variant: "centeredoverflow",
     fallbackVariant: "horizontalscroll"
     /* horizontalscroll */
   }
-], bt = [
+];
+const simpleConfig = [
   {
     breakpoint: "xl",
     variant: "centeredoverflow",
@@ -52,47 +95,71 @@ const g = [
     fallbackVariant: "block"
     /* block */
   }
-], ft = ({
-  id: t,
-  testId: o,
-  className: l,
-  children: f,
-  breakpointConfig: e = g,
-  mode: s = "normal",
-  scrollAriaLabel: c,
-  scrollAriaLabelledById: T,
-  ...E
+];
+const Table = ({
+  id,
+  testId,
+  className,
+  children,
+  breakpointConfig = defaultConfig,
+  mode = "normal",
+  scrollAriaLabel,
+  scrollAriaLabelledById,
+  ...rest
 }) => {
-  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(
+  const [currentConfig, setCurrentConfig] = useState();
+  const [tableWidth, setTableWidth] = useState(0);
+  const [parentWidth, setParentWidth] = useState(0);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const tableRef = useRef(null);
+  const tableIsVisible = useIsVisible(tableRef, 0);
+  const breakpoint = useBreakpoint();
+  useEffect(() => {
+    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));
+  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);
+  useEffect(() => {
+    var _a, _b, _c;
+    if ((currentConfig == null ? void 0 : currentConfig.variant) === "centeredoverflow" || (currentConfig == null ? void 0 : currentConfig.variant) === "horizontalscroll") {
+      setTableWidth(((_a = tableRef.current) == null ? void 0 : _a.getBoundingClientRect().width) ?? 0);
+    }
+    if ((currentConfig == null ? void 0 : currentConfig.variant) === "centeredoverflow") {
+      setParentWidth(((_c = (_b = tableRef.current) == null ? void 0 : _b.parentElement) == null ? void 0 : _c.getBoundingClientRect().width) ?? 0);
+    }
+  }, [currentConfig, breakpoint]);
+  useLayoutEvent(() => setWindowWidth(window.innerWidth), ["resize"], 100);
+  useEffect(() => {
+    var _a;
+    if (tableWidth === 0 && tableIsVisible) {
+      setTableWidth(((_a = tableRef.current) == null ? void 0 : _a.getBoundingClientRect().width) ?? 0);
+    }
+  }, [tableWidth, tableIsVisible]);
+  const tableStyle = (currentConfig == null ? void 0 : currentConfig.variant) === "centeredoverflow" ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : void 0;
+  const breakpointClass = getBreakpointClass(currentConfig);
+  const tableClass = classNames(tableStyles.table, breakpointClass, className);
+  const table = /* @__PURE__ */ jsx(
     "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 }))
+      className: tableClass,
+      id,
+      "data-testid": testId,
+      "data-analyticsid": AnalyticsId.Table,
+      ref: tableRef,
+      style: tableStyle,
+      ...rest,
+      children: React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child, { mode }))
     }
-  ), 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;
+  );
+  const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });
+  if ((currentConfig == null ? void 0 : currentConfig.variant) === "horizontalscroll") {
+    return /* @__PURE__ */ jsx(HorizontalScroll, { childWidth: tableWidth, testId: "horizontal-scroll", ...ariaLabelAttributes, children: table });
+  }
+  return table;
 };
 export {
-  Z as M,
-  a as R,
-  ft as T,
-  g as d,
-  bt as s
+  ModeType as M,
+  ResponsiveTableVariant as R,
+  Table as T,
+  defaultConfig as d,
+  simpleConfig as s
 };
 //# sourceMappingURL=Table.js.map

package/Table.js.map

@@ -1 +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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"}
+{"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":["styles","ResponsiveTableVariant","ModeType"],"mappings":";;;;;;;;;;;AAaA,MAAM,gBAAgB,CAAC,WACrB,OAAO,YAAY,uBAAuB,oBAAoB,OAAO,YAAY,uBAAuB;AAO1G,MAAM,mBAAmB,CAAC,WACxB,OAAO,YAAY,sBAAsB,OAAO,YAAY,UAAUA,YAAO,UAAU,OAAO,OAAO,IAAI,OAAO,UAAU,EAAE,IAAI;AAQlI,MAAM,8BAA8B,CAAC,GAAqB,MACxD,WAAW,EAAE,UAAU,IAAI,WAAW,EAAE,UAAU;AAQpD,MAAM,8BAA8B,CAAC,QAA0B,eAC7D,WAAW,OAAO,UAAU,KAAK;AAQnC,MAAM,yBAAyB,CAAC,QAA+C,eAAyD;AAClI,MAAA,MAAM,QAAQ,MAAM,GAAG;AACzB,WAAO,KAAK,2BAA2B;AAEvC,WAAO,OAAO,KAAK,CAAA,MAAK,4BAA4B,GAAG,UAAU,CAAC;AAAA,EACzD,WAAA,UAAU,4BAA4B,QAAQ,UAAU,GAAG;AAC7D,WAAA;AAAA,EAAA;AAEX;AASO,MAAM,mBAAmB,CAC9B,QACA,YACA,YACA,gBAC0D;AACpD,QAAA,mBAAmB,uBAAuB,QAAQ,UAAU;AAClE,QAAM,yBAAyB,cAAc;AAC7C,QAAM,yBAAyB,cAAc;AAE7C,MAAI,CAAC,kBAAkB;AACrB;AAAA,EAAA;AAIA,MAAA,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,kBAC5D;AACO,WAAA;AAAA,MACL,SAAS,yBAAyB,uBAAuB,mBAAmB,uBAAuB;AAAA,MACnG,YAAY,iBAAiB;AAAA,IAC/B;AAAA,EAAA;AAIA,MAAA,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,kBAC5D;AACO,WAAA;AAAA,MACL,SAAS,iBAAiB,mBAAmB,uBAAuB;AAAA,MACpE,YAAY,iBAAiB;AAAA,IAC/B;AAAA,EAAA;AAIA,MAAA,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,kBAC5D;AACO,WAAA;AAAA,MACL,SAAS,yBAAyB,uBAAuB,mBAAmB,uBAAuB;AAAA,MACnG,YAAY,iBAAiB;AAAA,IAC/B;AAAA,EAAA;AAIA,MAAA,iBAAiB,YAAY,uBAAuB,oBACpD,CAAC,0BACD,iBAAiB,oBAAoB,uBAAuB,kBAC5D;AACO,WAAA;AAAA,MACL,SAAS,iBAAiB,mBAAmB,uBAAuB;AAAA,MACpE,YAAY,iBAAiB;AAAA,IAC/B;AAAA,EAAA;AAGK,SAAA;AACT;AAOa,MAAA,qBAAqB,CAAC,WACjC,UAAU,cAAc,MAAM,IAAI,iBAAiB,MAAM,IAAI;AAQlD,MAAA,gCAAgC,CAAC,aAAqB,eAAwD;AACzH,MAAI,eAAe,YAAY;AAC7B;AAAA,EAAA;AAGF,QAAM,yBAAyB;AAE/B,SAAO,EAAE,MAAM,IAAI,cAAc,cAAc,IAAI,sBAAsB,KAAK;AAChF;ACtIY,IAAA,2CAAAC,4BAAL;AAELA,0BAAA,MAAO,IAAA;AAEPA,0BAAA,kBAAmB,IAAA;AAEnBA,0BAAA,kBAAmB,IAAA;AAEnBA,0BAAA,OAAQ,IAAA;AAREA,SAAAA;AAAA,GAAA,0BAAA,CAAA,CAAA;AAUA,IAAA,6BAAAC,cAAL;AACLA,YAAA,SAAU,IAAA;AACVA,YAAA,QAAS,IAAA;AAFCA,SAAAA;AAAA,GAAA,YAAA,CAAA,CAAA;AAgCL,MAAM,gBAAoC;AAAA,EAC/C;AAAA,IACE,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB;AAAA;AAAA,EAAA;AAErB;AAEO,MAAM,eAAmC;AAAA,EAC9C;AAAA,IACE,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB;AAAA;AAAA,EACnB;AAAA,EACA;AAAA,IACE,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB;AAAA;AAAA,EAAA;AAErB;AAEO,MAAM,QAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAA2B;AACrE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAiB,CAAC;AACtD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAiB,CAAC;AACxD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,OAAO,UAAU;AAC1D,QAAA,WAAW,OAAyB,IAAI;AACxC,QAAA,iBAAiB,aAAa,UAAU,CAAC;AAC/C,QAAM,aAAa,cAAc;AAEjC,YAAU,MAAM;AACd,qBAAiB,iBAAiB,kBAAkB,YAAY,YAAY,WAAW,CAAC;AAAA,KACvF,CAAC,kBAAkB,YAAY,YAAY,WAAW,CAAC;AAE1D,YAAU,MAAM;;AACd,SACE,+CAAe,aAAY,uBAC3B,+CAAe,aAAY,oBAC3B;AACA,sBAAc,cAAS,YAAT,mBAAkB,wBAAwB,UAAS,CAAC;AAAA,IAAA;AAEhE,SAAA,+CAAe,aAAY,oBAAyC;AACtE,uBAAe,oBAAS,YAAT,mBAAkB,kBAAlB,mBAAiC,wBAAwB,UAAS,CAAC;AAAA,IAAA;AAAA,EACpF,GACC,CAAC,eAAe,UAAU,CAAC;AAEf,iBAAA,MAAM,eAAe,OAAO,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG;AAEvE,YAAU,MAAM;;AACV,QAAA,eAAe,KAAK,gBAAgB;AACtC,sBAAc,cAAS,YAAT,mBAAkB,wBAAwB,UAAS,CAAC;AAAA,IAAA;AAAA,EACpE,GACC,CAAC,YAAY,cAAc,CAAC;AAE/B,QAAM,cACJ,+CAAe,aAAY,qBAA0C,8BAA8B,aAAa,UAAU,IAAI;AAE1H,QAAA,kBAAkB,mBAAmB,aAAa;AACxD,QAAM,aAAa,WAAWF,YAAO,OAAO,iBAAiB,SAAS;AAEtE,QAAM,QACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B,KAAK;AAAA,MACL,OAAO;AAAA,MACN,GAAG;AAAA,MAEH,UAAM,MAAA,SAAS,IAAI,UAAU,WAAS,MAAM,eAAoC,KAAK,KAAK,MAAM,aAAa,OAAO,EAAE,MAAM,CAAC;AAAA,IAAA;AAAA,EAChI;AAGF,QAAM,sBAAsB,uBAAuB,EAAE,OAAO,iBAAiB,IAAI,wBAAwB;AAErG,OAAA,+CAAe,aAAY,oBAAyC;AAEpE,WAAA,oBAAC,oBAAiB,YAAY,YAAY,QAAO,qBAAqB,GAAG,qBACtE,UACH,MAAA,CAAA;AAAA,EAAA;AAIG,SAAA;AACT;"}

package/TableBody.js

@@ -1,13 +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 })) });
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import classNames from "classnames";
+import tableStyles from "./components/Table/styles.module.scss";
+import { M as ModeType } from "./Table.js";
+const TableBody = ({ className, children, mode = ModeType.normal, ...rest }) => {
+  const tableBodyClasses = classNames(tableStyles["table-body"], className);
+  return /* @__PURE__ */ jsx("tbody", { className: tableBodyClasses, ...rest, children: React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child, { mode })) });
 };
 export {
-  T
+  TableBody as T
 };
 //# sourceMappingURL=TableBody.js.map

package/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 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;"}
+{"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":[],"mappings":";;;;;AAgBa,MAAA,YAA6B,CAAC,EAAE,WAAW,UAAU,OAAO,SAAS,QAAQ,GAAG,WAAW;AACtG,QAAM,mBAAmB,WAAW,YAAY,YAAY,GAAG,SAAS;AAEtE,SAAA,oBAAC,WAAM,WAAW,kBAAmB,GAAG,MACrC,UAAA,MAAM,SAAS,IAAI,UAAU,CAAA,UAAS,MAAM,eAAoC,KAAK,KAAK,MAAM,aAAa,OAAO,EAAE,KAAM,CAAA,CAAC,EAChI,CAAA;AAEJ;"}

package/TableCell.js

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

package/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 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;"}
+{"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"],"mappings":";;;;AAOY,IAAA,8BAAAA,eAAL;AACLA,aAAA,MAAO,IAAA;AACPA,aAAA,QAAS,IAAA;AACTA,aAAA,OAAQ,IAAA;AAHEA,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;AAuBL,MAAM,YAA6B,CAAC;AAAA,EACzC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAAA,EAChB,GAAG;AACL,MAAM;AACJ,QAAM,iBAAiB;AAAA,IACrB,YAAY,aAAa;AAAA,IACzB,EAAE,CAAC,YAAY,sBAAsB,CAAC,GAAG,SAAS,SAAS,QAAQ;AAAA,IACnE,EAAE,CAAC,YAAY,qBAAqB,CAAC,GAAG,OAAO;AAAA,IAC/C,EAAE,CAAC,YAAY,qBAAqB,CAAC,GAAG,cAAc,SAAS;AAAA,IAC/D,EAAE,CAAC,YAAY,oBAAoB,CAAC,GAAG,cAAc,QAAQ;AAAA,IAC7D;AAAA,EACF;AAGE,SAAA,oBAAC,MAAG,EAAA,WAAW,gBAAgB,cAAY,WAAW,eAAa,QAAS,GAAG,MAC5E,SACH,CAAA;AAEJ;"}

package/TableExpandedRow.js

@@ -1,37 +1,39 @@
-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: _
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import classNames from "classnames";
+import { B as Button } from "./Button.js";
+import { I as Icon } from "./Icon.js";
+import ChevronUp from "./components/Icons/ChevronUp.js";
+import tableStyles from "./components/Table/styles.module.scss";
+import { M as ModeType } from "./Table.js";
+const TableExpandedRow = ({
+  numberOfColumns,
+  expanded,
+  hideDetailsText,
+  toggleClick,
+  children,
+  className,
+  mode = ModeType.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 })
+  const tableRowClass = classNames(
+    tableStyles["table__expanded-row"],
+    { [tableStyles["table__expanded-row--expanded"]]: expanded },
+    className
+  );
+  const tableCellClass = classNames(tableStyles["table__cell"], className, {
+    [tableStyles["table__cell--compact"]]: mode === ModeType.compact
+  });
+  const containerClass = classNames(tableStyles["table__expanded-row-container"]);
+  return /* @__PURE__ */ jsx("tr", { className: tableRowClass, id, children: /* @__PURE__ */ jsx("td", { colSpan: numberOfColumns, className: tableCellClass, children: /* @__PURE__ */ jsxs("div", { className: containerClass, children: [
+    React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child)),
+    /* @__PURE__ */ jsxs(Button, { variant: "borderless", onClick: toggleClick, "aria-expanded": expanded, tabIndex: expanded ? 0 : -1, children: [
+      hideDetailsText,
+      /* @__PURE__ */ jsx(Icon, { svgIcon: ChevronUp })
     ] })
   ] }) }) });
 };
 export {
-  B as T
+  TableExpandedRow as T
 };
 //# sourceMappingURL=TableExpandedRow.js.map

package/TableExpandedRow.js.map

@@ -1 +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;"}
+{"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":[],"mappings":";;;;;;;;AA6BO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAAA,EAChB;AACF,MAAgC;AAC9B,QAAM,gBAAgB;AAAA,IACpB,YAAY,qBAAqB;AAAA,IACjC,EAAE,CAAC,YAAY,+BAA+B,CAAC,GAAG,SAAS;AAAA,IAC3D;AAAA,EACF;AACA,QAAM,iBAAiB,WAAW,YAAY,aAAa,GAAG,WAAW;AAAA,IACvE,CAAC,YAAY,sBAAsB,CAAC,GAAG,SAAS,SAAS;AAAA,EAAA,CAC1D;AAED,QAAM,iBAAiB,WAAW,YAAY,+BAA+B,CAAC;AAE9E,SACG,oBAAA,MAAA,EAAG,WAAW,eAAe,IAC5B,UAAC,oBAAA,MAAA,EAAG,SAAS,iBAAiB,WAAW,gBACvC,UAAC,qBAAA,OAAA,EAAI,WAAW,gBACb,UAAA;AAAA,IAAM,MAAA,SAAS,IAAI,UAAU,CAAS,UAAA,MAAM,eAAe,KAAK,KAAK,MAAM,aAAa,KAAK,CAAC;AAAA,IAC/F,qBAAC,QAAO,EAAA,SAAS,cAAc,SAAS,aAAa,iBAAe,UAAU,UAAU,WAAW,IAAI,IACpG,UAAA;AAAA,MAAA;AAAA,MACD,oBAAC,MAAK,EAAA,SAAS,UAAW,CAAA;AAAA,IAAA,EAC5B,CAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA,GACF;AAEJ;"}

package/TableExpanderCell.js

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

package/TableExpanderCell.js.map

@@ -1 +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;"}
+{"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":[],"mappings":";;;;;;;;AA0BO,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAClB,MAAgC;AACxB,QAAA,iBAAiB,WAAW,YAAY,aAAa,GAAG,YAAY,sBAAsB,GAAG,WAAW;AAAA,IAC5G,CAAC,YAAY,sBAAsB,CAAC,GAAG,SAAS,SAAS;AAAA,EAAA,CAC1D;AACK,QAAA,OAAO,WAAW,YAAY;AAGlC,SAAA,oBAAC,MAAG,EAAA,WAAW,gBACb,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,WAAW,WAAW,kBAAkB;AAAA,MAExC,UAAA,oBAAC,MAAK,EAAA,SAAS,KAAM,CAAA;AAAA,IAAA;AAAA,EAAA,GAEzB;AAEJ;"}