@helsenorge/designsystem-react 6.2.0 → 6.4.0

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

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

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

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

package/components/Table/TableCell/TableCell.js

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

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

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

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

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

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

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

package/components/Table/TableHead/TableHead.js

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

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

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

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

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

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

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

package/components/Table/TableHeadCell/TableHeadCell.js

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

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

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

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

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

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

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

package/components/Table/TableRow/TableRow.js

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

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

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

package/components/Table/utils.js

@@ -24,7 +24,7 @@ const p = (r) => r.variant === t.centeredoverflow || r.variant === t.block, b =
       breakpoint: e.breakpoint
     } : e;
 }, T = (r) => r && p(r) ? b(r) : void 0, z = (r, n) => {
-  if (r === n)
+  if (r >= n)
     return;
   const a = 8;
   return { left: `${(r - n) / 2 - a}px` };

package/components/Table/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/Table/utils.ts"],"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 => 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"],"names":["configUsesCss","config","ResponsiveTableVariant","mapConfigToClass","styles","sortByBreakpointsDescending","a","b","Breakpoint","isValidForCurrentBreakpoint","breakpoint","getConfigForBreakpoint","x","getCurrentConfig","tableWidth","windowWidth","breakpointConfig","canUseHorizontalScroll","isTouchDevice","canUseCenteredOverflow","getBreakpointClass","getCenteredOverflowTableStyle","parentWidth","COLUMN_GUTTER_WIDTH_PX"],"mappings":";;;;AAaA,MAAMA,IAAgB,CAACC,MACrBA,EAAO,YAAYC,EAAuB,oBAAoBD,EAAO,YAAYC,EAAuB,OAOpGC,IAAmB,CAACF,MAAqCG,EAAO,UAAUH,EAAO,OAAO,IAAIA,EAAO,UAAU,EAAE,GAQ/GI,IAA8B,CAACC,GAAqBC,MACxDC,EAAWF,EAAE,UAAU,IAAIE,EAAWD,EAAE,UAAU,GAQ9CE,IAA8B,CAACR,GAA0BS,MAC7DF,EAAWP,EAAO,UAAU,KAAKS,GAQ7BC,IAAyB,CAACV,GAA+CS,MAAyD;AAClI,MAAA,MAAM,QAAQT,CAAM;AACtB,WAAAA,EAAO,KAAKI,CAA2B,GAEhCJ,EAAO,KAAK,CAAAW,MAAKH,EAA4BG,GAAGF,CAAU,CAAC;AACzD,MAAAT,KAAUQ,EAA4BR,GAAQS,CAAU;AAC1D,WAAAT;AAEX,GASaY,IAAmB,CAC9BZ,GACAS,GACAI,GACAC,MAC0D;AACpD,QAAAC,IAAmBL,EAAuBV,GAAQS,CAAU,GAC5DO,IAAyBC,KACzBC,IAAyBL,KAAcC;AAE7C,MAAKC;AAKH,WAAAA,EAAiB,YAAYd,EAAuB,oBACpD,CAACiB,KACDH,EAAiB,oBAAoBd,EAAuB,mBAErD;AAAA,MACL,SAASe,IAAyBf,EAAuB,mBAAmBA,EAAuB;AAAA,MACnG,YAAYc,EAAiB;AAAA,IAAA,IAK/BA,EAAiB,YAAYd,EAAuB,oBACpD,CAACiB,KACDH,EAAiB,oBAAoBd,EAAuB,mBAErD;AAAA,MACL,SAASc,EAAiB,mBAAmBd,EAAuB;AAAA,MACpE,YAAYc,EAAiB;AAAA,IAAA,IAK/BA,EAAiB,YAAYd,EAAuB,oBACpD,CAACe,KACDD,EAAiB,oBAAoBd,EAAuB,mBAErD;AAAA,MACL,SAASiB,IAAyBjB,EAAuB,mBAAmBA,EAAuB;AAAA,MACnG,YAAYc,EAAiB;AAAA,IAAA,IAK/BA,EAAiB,YAAYd,EAAuB,oBACpD,CAACe,KACDD,EAAiB,oBAAoBd,EAAuB,mBAErD;AAAA,MACL,SAASc,EAAiB,mBAAmBd,EAAuB;AAAA,MACpE,YAAYc,EAAiB;AAAA,IAAA,IAI1BA;AACT,GAOaI,IAAqB,CAACnB,MACjCA,KAAUD,EAAcC,CAAM,IAAIE,EAAiBF,CAAM,IAAI,QAQlDoB,IAAgC,CAACC,GAAqBR,MAAwD;AACzH,MAAIQ,MAAgBR;AAClB;AAGF,QAAMS,IAAyB;AAE/B,SAAO,EAAE,MAAM,IAAID,IAAcR,KAAc,IAAIS,CAAsB;AAC3E;"}
+{"version":3,"file":"utils.js","sources":["../../../src/components/Table/utils.ts"],"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 => 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"],"names":["configUsesCss","config","ResponsiveTableVariant","mapConfigToClass","styles","sortByBreakpointsDescending","a","b","Breakpoint","isValidForCurrentBreakpoint","breakpoint","getConfigForBreakpoint","x","getCurrentConfig","tableWidth","windowWidth","breakpointConfig","canUseHorizontalScroll","isTouchDevice","canUseCenteredOverflow","getBreakpointClass","getCenteredOverflowTableStyle","parentWidth","COLUMN_GUTTER_WIDTH_PX"],"mappings":";;;;AAaA,MAAMA,IAAgB,CAACC,MACrBA,EAAO,YAAYC,EAAuB,oBAAoBD,EAAO,YAAYC,EAAuB,OAOpGC,IAAmB,CAACF,MAAqCG,EAAO,UAAUH,EAAO,OAAO,IAAIA,EAAO,UAAU,EAAE,GAQ/GI,IAA8B,CAACC,GAAqBC,MACxDC,EAAWF,EAAE,UAAU,IAAIE,EAAWD,EAAE,UAAU,GAQ9CE,IAA8B,CAACR,GAA0BS,MAC7DF,EAAWP,EAAO,UAAU,KAAKS,GAQ7BC,IAAyB,CAACV,GAA+CS,MAAyD;AAClI,MAAA,MAAM,QAAQT,CAAM;AACtB,WAAAA,EAAO,KAAKI,CAA2B,GAEhCJ,EAAO,KAAK,CAAAW,MAAKH,EAA4BG,GAAGF,CAAU,CAAC;AACzD,MAAAT,KAAUQ,EAA4BR,GAAQS,CAAU;AAC1D,WAAAT;AAEX,GASaY,IAAmB,CAC9BZ,GACAS,GACAI,GACAC,MAC0D;AACpD,QAAAC,IAAmBL,EAAuBV,GAAQS,CAAU,GAC5DO,IAAyBC,KACzBC,IAAyBL,KAAcC;AAE7C,MAAKC;AAKH,WAAAA,EAAiB,YAAYd,EAAuB,oBACpD,CAACiB,KACDH,EAAiB,oBAAoBd,EAAuB,mBAErD;AAAA,MACL,SAASe,IAAyBf,EAAuB,mBAAmBA,EAAuB;AAAA,MACnG,YAAYc,EAAiB;AAAA,IAAA,IAK/BA,EAAiB,YAAYd,EAAuB,oBACpD,CAACiB,KACDH,EAAiB,oBAAoBd,EAAuB,mBAErD;AAAA,MACL,SAASc,EAAiB,mBAAmBd,EAAuB;AAAA,MACpE,YAAYc,EAAiB;AAAA,IAAA,IAK/BA,EAAiB,YAAYd,EAAuB,oBACpD,CAACe,KACDD,EAAiB,oBAAoBd,EAAuB,mBAErD;AAAA,MACL,SAASiB,IAAyBjB,EAAuB,mBAAmBA,EAAuB;AAAA,MACnG,YAAYc,EAAiB;AAAA,IAAA,IAK/BA,EAAiB,YAAYd,EAAuB,oBACpD,CAACe,KACDD,EAAiB,oBAAoBd,EAAuB,mBAErD;AAAA,MACL,SAASc,EAAiB,mBAAmBd,EAAuB;AAAA,MACpE,YAAYc,EAAiB;AAAA,IAAA,IAI1BA;AACT,GAOaI,IAAqB,CAACnB,MACjCA,KAAUD,EAAcC,CAAM,IAAIE,EAAiBF,CAAM,IAAI,QAQlDoB,IAAgC,CAACC,GAAqBR,MAAwD;AACzH,MAAIQ,KAAeR;AACjB;AAGF,QAAMS,IAAyB;AAE/B,SAAO,EAAE,MAAM,IAAID,IAAcR,KAAc,IAAIS,CAAsB;AAC3E;"}

package/components/Textarea/Textarea.js

@@ -28,7 +28,7 @@ const oe = (a) => {
     autoFocus: S,
     disabled: E,
     name: D,
-    autoComplete: y,
+    autoComplete: y = "off",
     placeholder: F,
     readOnly: V,
     required: q,

package/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete,\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode, disabled)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","errorText","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Textarea$1"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode, disabled)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","errorText","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Textarea$1"],"mappings":"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"}

package/package.json

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

package/README.md

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