@helsenorge/designsystem-react 3.2.1-beta.1 → 4.1.0

package/components/Table/TableHeadCell/componentdata.json

@@ -1 +1 @@
-{"props":{"sortable":{"defaultValue":null,"description":"Sets if column for head cell should be sortable","name":"sortable","parent":{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"}],"required":false,"type":{"name":"boolean"}},"sortDir":{"defaultValue":null,"description":"Sort direction","name":"sortDir","parent":{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"}],"required":false,"type":{"name":"enum","raw":"SortDirection","value":[{"value":"\"asc\"","description":"","fullComment":"","tags":{}},{"value":"\"desc\"","description":"","fullComment":"","tags":{}}]}},"onClick":{"defaultValue":null,"description":"Function that is called when clicked","name":"onClick","parent":{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"}],"required":false,"type":{"name":"(() => void)"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the content of the td element.","name":"children","parent":{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"}],"required":false,"type":{"name":"ReactNode"}}}}
+{"props":{"sortable":{"defaultValue":null,"description":"Sets if column for head cell should be sortable","name":"sortable","parent":{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"}],"required":false,"type":{"name":"boolean"}},"sortDir":{"defaultValue":null,"description":"Sort direction","name":"sortDir","parent":{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"}],"required":false,"type":{"name":"enum","raw":"SortDirection","value":[{"value":"\"asc\"","description":"","fullComment":"","tags":{}},{"value":"\"desc\"","description":"","fullComment":"","tags":{}}]}},"onClick":{"defaultValue":null,"description":"Function that is called when clicked","name":"onClick","parent":{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"}],"required":false,"type":{"name":"(() => void)"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the content of the td element.","name":"children","parent":{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"}],"required":false,"type":{"name":"ReactNode"}},"mode":{"defaultValue":{"value":"ModeType.normal"},"description":"For display with less space. Discouraged to use together with interactive elements.","name":"mode","parent":{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableHeadCell/TableHeadCell.tsx","name":"Props"}],"required":false,"type":{"name":"enum","raw":"ModeType","value":[{"value":"\"compact\"","description":"","fullComment":"","tags":{}},{"value":"\"normal\"","description":"","fullComment":"","tags":{}}]}}}}

package/components/Table/TableHeadCell/index.js

@@ -1,2 +1,2 @@
-import{a as r}from"../../../TableHeadCell.js";import{S as x,T as C}from"../../../TableHeadCell.js";import"react";import"classnames";import"../../Icons/Icon.js";import"../../../constants.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../../utils/environment.js";import"../../Icons/ArrowDown.js";import"../../Icons/ArrowUp.js";import"../styles.module.scss";export{x as SortDirection,C as TableHeadCell,r as default};
+import{a as r}from"../../../TableHeadCell.js";import{S as k,T as q}from"../../../TableHeadCell.js";import"react";import"classnames";import"../../Icons/Icon.js";import"../../../constants.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../../utils/environment.js";import"../../Icons/ArrowDown.js";import"../../Icons/ArrowUp.js";import"../styles.module.scss";import"../../../Table.js";import"../../../hooks/useBreakpoint.js";import"../../../theme/grid.js";import"../../../hooks/useLayoutEvent.js";import"../../../utils/debounce.js";import"../../../HorizontalScroll.js";import"../../../hooks/useIsVisible.js";import"../../../hooks/useIntersectionObserver.js";import"../../../hooks/useSize.js";import"../../HorizontalScroll/styles.module.scss";import"../../../utils/device.js";export{k as SortDirection,q as TableHeadCell,r as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ModeType } from '../Table';
 export interface Props {
     /** Sets if expanded row can be expanded */
     expandable?: boolean;
@@ -16,6 +17,8 @@ export interface Props {
     className?: string;
     /** Sets the cells of the table row element.  */
     children?: React.ReactNode;
+    /** For display with less space. Discouraged to use together with interactive elements. */
+    mode?: ModeType;
 }
 export declare const TableRow: React.FC<Props>;
 export default TableRow;

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;AAO1B,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;CAC5B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgCpC,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,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"}

package/components/Table/TableRow/componentdata.json

@@ -1 +1 @@
-{"props":{"expandable":{"defaultValue":null,"description":"Sets if expanded row can be expanded","name":"expandable","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"boolean"}},"expanded":{"defaultValue":null,"description":"Sets if expanded row is expanded","name":"expanded","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"boolean"}},"onClick":{"defaultValue":null,"description":"When hide/show button for expanded row is clicked.","name":"onClick","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"(() => void)"}},"hideDetailsText":{"defaultValue":null,"description":"Text for expanded row hide button.","name":"hideDetailsText","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"showDetailsText":{"defaultValue":null,"description":"Text for expanded row show button.","name":"showDetailsText","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"rowKey":{"defaultValue":null,"description":"Key attribute for row","name":"rowKey","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the cells of the table row element.","name":"children","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}}}}
+{"props":{"expandable":{"defaultValue":null,"description":"Sets if expanded row can be expanded","name":"expandable","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"boolean"}},"expanded":{"defaultValue":null,"description":"Sets if expanded row is expanded","name":"expanded","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"boolean"}},"onClick":{"defaultValue":null,"description":"When hide/show button for expanded row is clicked.","name":"onClick","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"(() => void)"}},"hideDetailsText":{"defaultValue":null,"description":"Text for expanded row hide button.","name":"hideDetailsText","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"showDetailsText":{"defaultValue":null,"description":"Text for expanded row show button.","name":"showDetailsText","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"rowKey":{"defaultValue":null,"description":"Key attribute for row","name":"rowKey","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the cells of the table row element.","name":"children","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"mode":{"defaultValue":{"value":"ModeType.normal"},"description":"For display with less space. Discouraged to use together with interactive elements.","name":"mode","parent":{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableRow/TableRow.tsx","name":"Props"}],"required":false,"type":{"name":"enum","raw":"ModeType","value":[{"value":"\"compact\"","description":"","fullComment":"","tags":{}},{"value":"\"normal\"","description":"","fullComment":"","tags":{}}]}}}}

package/components/Table/TableRow/index.js

@@ -1,2 +1,2 @@
-import{a as r}from"../../../TableRow.js";import{T as z}from"../../../TableRow.js";import"react";import"classnames";import"../styles.module.scss";import"../../../Button.js";import"../../Icons/Icon.js";import"../../../constants.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../../utils/environment.js";import"../../../hooks/useBreakpoint.js";import"../../../theme/grid.js";import"../../../hooks/useHover.js";import"../../../hooks/useIcons.js";import"../../../hooks/useSize.js";import"../../../utils/debounce.js";import"../../../theme/currys/color.js";import"../../../theme/index.js";import"../../../theme/palette.js";import"../../../theme/spacers.js";import"../../Icons/ArrowRight.js";import"../../Button/styles.module.scss";import"../../Icons/ChevronDown.js";import"../../Icons/ChevronUp.js";export{z as TableRow,r as default};
+import{a as r}from"../../../TableRow.js";import{T as G}from"../../../TableRow.js";import"react";import"classnames";import"../styles.module.scss";import"../../../Table.js";import"../../../constants.js";import"../../../hooks/useBreakpoint.js";import"../../../theme/grid.js";import"../../../hooks/useLayoutEvent.js";import"../../../utils/debounce.js";import"../../../HorizontalScroll.js";import"../../../hooks/useIsVisible.js";import"../../../hooks/useIntersectionObserver.js";import"../../../hooks/useSize.js";import"../../HorizontalScroll/styles.module.scss";import"../../../utils/device.js";import"../../../Button.js";import"../../Icons/Icon.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../../utils/environment.js";import"../../../hooks/useHover.js";import"../../../hooks/useIcons.js";import"../../../theme/currys/color.js";import"../../../theme/index.js";import"../../../theme/palette.js";import"../../../theme/spacers.js";import"../../Icons/ArrowRight.js";import"../../Button/styles.module.scss";import"../../Icons/ChevronDown.js";import"../../Icons/ChevronUp.js";export{G as TableRow,r as default};
 //# sourceMappingURL=index.js.map

package/components/Table/index.js

@@ -1,2 +1,2 @@
-import h,{useState as s,useRef as S,useEffect as T}from"react";import U from"classnames";import{Breakpoint as d,useBreakpoint as V}from"../../hooks/useBreakpoint.js";import{isTouchDevice as R}from"../../utils/device.js";import z from"./styles.module.scss";import{AnalyticsId as _}from"../../constants.js";import{useLayoutEvent as D}from"../../hooks/useLayoutEvent.js";import{H as A}from"../../HorizontalScroll.js";import{T as Wt}from"../../TableBody.js";import{T as Et,a as Ht}from"../../TableCell.js";import{T as Ut}from"../../TableExpandedRow.js";import{T as Rt}from"../../TableExpanderCell.js";import{H as Dt,T as At}from"../../TableHead.js";import{S as Nt,T as Ot}from"../../TableHeadCell.js";import{T as Pt}from"../../TableRow.js";import"../../theme/grid.js";import"../../utils/debounce.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useSize.js";import"../HorizontalScroll/styles.module.scss";import"../../Button.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../Icons/ChevronUp.js";import"../Icons/ChevronDown.js";import"../Icons/ArrowDown.js";import"../Icons/ArrowUp.js";const I=t=>t.variant===o.centeredoverflow||t.variant===o.block,N=t=>z[`table--${t.variant}-${t.breakpoint}`],O=(t,a)=>d[t.breakpoint]-d[a.breakpoint],u=(t,a)=>d[t.breakpoint]>=a,L=(t,a)=>{if(Array.isArray(t))return t.sort(O),t.find(n=>u(n,a));if(t&&u(t,a))return t},P=(t,a,n,c)=>{const e=L(t,a),r=R(),l=n<=c;if(e)return e.variant===o.centeredoverflow&&!l&&e.fallbackVariant===o.horizontalscroll?{variant:r?o.horizontalscroll:o.none,breakpoint:e.breakpoint}:e.variant===o.centeredoverflow&&!l&&e.fallbackVariant!==o.centeredoverflow?{variant:e.fallbackVariant??o.none,breakpoint:e.breakpoint}:e.variant===o.horizontalscroll&&!r&&e.fallbackVariant===o.centeredoverflow?{variant:l?o.centeredoverflow:o.none,breakpoint:e.breakpoint}:e.variant===o.horizontalscroll&&!r&&e.fallbackVariant!==o.horizontalscroll?{variant:e.fallbackVariant??o.none,breakpoint:e.breakpoint}:e},$=t=>t&&I(t)?N(t):void 0,F=(t,a)=>({left:`${(t-a)/2-8}px`});var o=(t=>(t.none="none",t.centeredoverflow="centeredoverflow",t.horizontalscroll="horizontalscroll",t.block="block",t))(o||{});const G=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"}],zt=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"},{breakpoint:"sm",variant:"centeredoverflow",fallbackVariant:"block"}],Ct=({id:t,testId:a,className:n,children:c,breakpointConfig:e=G})=>{const[r,l]=s(),[i,C]=s(0),[x,y]=s(0),[m,W]=s(window.innerWidth),p=S(null),f=V();T(()=>{l(P(e,f,i,m))},[e,f,i,m]),T(()=>{var v,k,w;((r==null?void 0:r.variant)==="centeredoverflow"||(r==null?void 0:r.variant)==="horizontalscroll")&&C(((v=p.current)==null?void 0:v.getBoundingClientRect().width)??0),(r==null?void 0:r.variant)==="centeredoverflow"&&y(((w=(k=p.current)==null?void 0:k.parentElement)==null?void 0:w.getBoundingClientRect().width)??0)},[r]),D(()=>W(window.innerWidth),["resize"],100);const B=(r==null?void 0:r.variant)==="centeredoverflow"?F(x,i):void 0,E=$(r),H=U(z.table,E,n),b=h.createElement("table",{className:H,id:t,"data-testid":a,"data-analyticsid":_.Table,ref:p,style:B},c);return(r==null?void 0:r.variant)==="horizontalscroll"?h.createElement(A,{childWidth:i,testId:"horizontal-scroll"},b):b};export{Dt as HeaderCategory,o as ResponsiveTableVariant,Nt as SortDirection,Ct as Table,Wt as TableBody,Et as TableCell,Ut as TableExpandedRow,Rt as TableExpanderCell,At as TableHead,Ot as TableHeadCell,Pt as TableRow,Ht as TextAlign,Ct as default,G as defaultConfig,zt as simpleConfig};
+import{T as r}from"../../Table.js";import{M as q,R as z,d as F,s as G}from"../../Table.js";import{T as J}from"../../TableBody.js";import{T as L,a as N}from"../../TableCell.js";import{T as P}from"../../TableExpandedRow.js";import{T as U}from"../../TableExpanderCell.js";import{H as X,T as Y}from"../../TableHead.js";import{S as _,T as $}from"../../TableHeadCell.js";import{T as ro}from"../../TableRow.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../HorizontalScroll.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useSize.js";import"../HorizontalScroll/styles.module.scss";import"./styles.module.scss";import"../../utils/device.js";import"../../Button.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../Icons/ChevronUp.js";import"../Icons/ChevronDown.js";import"../Icons/ArrowDown.js";import"../Icons/ArrowUp.js";export{X as HeaderCategory,q as ModeType,z as ResponsiveTableVariant,_ as SortDirection,r as Table,J as TableBody,L as TableCell,P as TableExpandedRow,U as TableExpanderCell,Y as TableHead,$ as TableHeadCell,ro as TableRow,N as TextAlign,r as default,F as defaultConfig,G as simpleConfig};
 //# sourceMappingURL=index.js.map

package/components/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.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 => 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 => {\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 { useLayoutEvent } from '../../hooks/useLayoutEvent';\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}\n\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n}\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> = ({ id, testId, className, children, breakpointConfig = defaultConfig }) => {\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 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]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n\n  const table = (\n    <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table} ref={tableRef} style={tableStyle}>\n      {children}\n    </table>\n  );\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\">\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","defaultConfig","simpleConfig","Table","id","testId","className","children","currentConfig","setCurrentConfig","useState","setTableWidth","setParentWidth","setWindowWidth","tableRef","useRef","useBreakpoint","useEffect","_a","_c","_b","useLayoutEvent","tableStyle","breakpointClass","tableClass","classNames","table","React","AnalyticsId","HorizontalScroll"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/Table/styles.module.scss

@@ -1,3 +1,5 @@
+// Kan fjernes når konvensjonen for BEM er tillatt.
+/* stylelint-disable selector-class-pattern */
 @use 'sass:map';
 @import '../../scss/spacers';
 @import '../../scss/breakpoints';
@@ -6,7 +8,7 @@
 @import '../../scss/grid';
 
 /* fix outline for Safari */
-table tbody tr {
+table .table-body .table-row {
   outline: 3px solid transparent;
 }
 
@@ -26,14 +28,14 @@ table tbody tr {
   display: block;
   clear: both;
 
-  tbody,
-  tr,
-  th,
-  td {
+  .table-body,
+  .table-row,
+  .table__head-cell,
+  .table__cell {
     display: block;
   }
 
-  tr {
+  .table-row {
     clear: both;
   }
 
@@ -41,24 +43,35 @@ table tbody tr {
     max-width: 100%;
   }
 
-  th:focus {
+  .table__head-cell:focus {
     outline: none;
     background-color: $blueberry800;
     text-decoration: underline;
   }
 
-  td {
+  .table__cell {
     position: relative;
     padding: 0.75rem 0 0.75rem 40%;
     float: left;
     clear: both;
     width: 100%;
+    border-top: 0;
+    border-bottom: 0;
+    outline: 0;
+
+    &--center {
+      text-align: left;
+    }
+
+    &--right {
+      text-align: left;
+    }
 
     &:not(.expandable-container) {
       font-weight: 400;
     }
 
-    /* Get data from the td-tag attribute "data-label"   and use this to populate :before content */
+    /* Get data from the td-tag attribute "data-label" and use this to populate :before content */
     &::before {
       content: attr(data-label);
       position: relative;
@@ -78,33 +91,16 @@ table tbody tr {
 
   .table__expander-cell-mobile {
     padding-left: 0.75rem;
-  }
-
-  .table__expanded-row td {
-    text-align: left;
-    padding: 0.75rem;
-  }
-
-  .table__expanded-row {
-    display: none;
+    border-bottom: 1px solid $neutral500;
 
     &--expanded {
-      display: block;
+      border-bottom: 0;
     }
   }
 
-  .table__cell {
-    border-top: 0;
-    border-bottom: 0;
-    outline: 0;
-
-    &--center {
-      text-align: left;
-    }
-
-    &--right {
-      text-align: left;
-    }
+  .table__expanded-row .table__cell {
+    text-align: left;
+    padding: 0.75rem;
   }
 
   .table__cell:first-child {
@@ -113,6 +109,12 @@ table tbody tr {
   }
 
   .table__expanded-row {
+    display: none;
+
+    &--expanded {
+      display: block;
+    }
+
     .table__cell:first-child {
       border-top: 0;
     }
@@ -123,25 +125,15 @@ table tbody tr {
       border-collapse: collapse;
       border-top: 1px solid $neutral500;
     }
-  }
-
-  tr:last-child .table__cell:last-child {
-    border-bottom: 1px solid $neutral500;
-  }
-
-  .table__expander-cell-mobile {
-    border-bottom: 1px solid $neutral500;
-
-    &--expanded {
-      border-bottom: 0;
-    }
-  }
 
-  .table__row--expandable {
     &:focus-within {
       outline: none;
     }
   }
+
+  .table-row:last-child .table__cell:last-child {
+    border-bottom: 1px solid $neutral500;
+  }
 }
 
 .table {
@@ -184,6 +176,14 @@ table tbody tr {
   @media (min-width: map.get($grid-breakpoints, lg)) {
     height: 6.125rem;
   }
+
+  &--compact {
+    height: unset;
+
+    @media (min-width: map.get($grid-breakpoints, lg)) {
+      height: unset;
+    }
+  }
 }
 
 .table__head-cell {
@@ -225,6 +225,20 @@ table tbody tr {
     line-height: $lineheight-size-sm;
     font-weight: 700;
   }
+
+  &--compact {
+    padding: getSpacer(2xs) getSpacer(3xs) getSpacer(4xs) getSpacer(3xs);
+    line-height: 18px;
+    font-size: 14px;
+    height: unset;
+
+    @media (min-width: map.get($grid-breakpoints, sm)) {
+      padding: getSpacer(s) getSpacer(3xs) getSpacer(3xs) getSpacer(3xs);
+      line-height: 20px;
+      font-size: 16px;
+      height: unset;
+    }
+  }
 }
 
 .table__head-cell-sort-icon-wrapper {
@@ -257,6 +271,14 @@ table tbody tr {
     font-size: $font-size-sm;
     line-height: 1.75rem;
   }
+
+  &--compact {
+    padding: getSpacer(4xs) getSpacer(3xs);
+
+    @media (min-width: map.get($grid-breakpoints, sm)) {
+      padding: getSpacer(3xs);
+    }
+  }
 }
 
 .table__cell-expander {

package/components/Table/styles.module.scss.d.ts

@@ -3,6 +3,7 @@ export type Styles = {
   table: string;
   table__cell: string;
   'table__cell--center': string;
+  'table__cell--compact': string;
   'table__cell--nowrap': string;
   'table__cell--right': string;
   'table__cell-expander': string;
@@ -13,10 +14,12 @@ export type Styles = {
   'table__expander-cell-mobile': string;
   'table__expander-cell-mobile--expanded': string;
   table__head: string;
+  'table__head--compact': string;
   'table__head--normal': string;
   'table__head--sortable': string;
   'table__head--transparent': string;
   'table__head-cell': string;
+  'table__head-cell--compact': string;
   'table__head-cell--sortable': string;
   'table__head-cell--sorted': string;
   'table__head-cell-sort-icon-wrapper': string;
@@ -35,6 +38,8 @@ export type Styles = {
   'table--centeredoverflow-xl': string;
   'table--centeredoverflow-xs': string;
   'table--centeredoverflow-xxs': string;
+  'table-body': string;
+  'table-row': string;
 };
 
 export type ClassNames = keyof Styles;

package/package.json

@@ -2,8 +2,12 @@
   "name": "@helsenorge/designsystem-react",
   "type": "module",
   "description": "The official design system for Helsenorge built with React.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/helsenorge/designsystem"
+  },
   "homepage": "https://helsenorge.design",
-  "version": "3.2.1-beta.1",
+  "version": "4.1.0",
   "author": "Helsenorge",
   "license": "MIT",
   "peerDependencies": {

package/scss/_palette.scss

@@ -17,6 +17,7 @@ $blueberry300: #7abecc;
 $blueberry400: #58aabb;
 $blueberry500: #188097;
 $blueberry600: #126f87;
+$blueberry60010: #126f8710;
 $blueberry700: #08667c;
 $blueberry800: #06596c;
 $blueberry900: #084350;