@helsenorge/designsystem-react 2.15.0 → 2.16.1

package/components/Panel/styles.module.scss

@@ -127,7 +127,6 @@
 
   &__btn-container {
     display: flex;
-    flex-direction: column;
     @media (min-width: map-get($grid-breakpoints, lg)) {
       align-self: flex-end;
     }
@@ -149,6 +148,7 @@
     align-self: flex-start;
     @media (min-width: map-get($grid-breakpoints, lg)) {
       align-self: flex-end;
+      margin-left: auto;
     }
   }
 

package/components/Table/Table.d.ts

@@ -1,26 +1,36 @@
 import React from 'react';
+import { Breakpoint } from '../../hooks/useBreakpoint';
 export declare enum SmallViewportVariant {
-    /**
-     * Show horizontal scrollbar when table is too big for the screen
-     */
+    /** No handling responsive behaviour. This will be the default in v3.0.0. */
+    none = "none",
+    /** Overflow parent container to the left and right while remaining centered horizontally. */
+    centeredoverflow = "centeredoverflow",
+    /** Show horizontal scrollbar when table is too big for the screen. */
     horizontalscroll = "horizontalscroll",
-    /**
-     * Collapse to two columns on small screens
-     */
+    /** Collapse to two columns. */
     block = "block"
 }
+export interface BreakpointConfig {
+    /** Breakpoint at which responsive behaviour will be applied. The table component uses a "desktop first" approach. */
+    breakpoint: keyof typeof Breakpoint;
+    /** Desired behaviour on this breakpoint and all smaller screens. */
+    variant: keyof typeof SmallViewportVariant;
+    /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */
+    fallbackVariant?: keyof typeof SmallViewportVariant;
+}
 export interface Props {
     /** Unique ID */
     id?: string;
     /** Id used for testing */
     testId?: string;
-    /** Type of table view om small devices */
-    smallViewportVariant?: SmallViewportVariant;
+    /** Customize how the table behaves on various screen widths */
+    /** @deprecated Rename to breakpointConfig in v3.0.0 and drop support for SmallViewPortVariant */
+    smallViewportVariant?: SmallViewportVariant | BreakpointConfig | BreakpointConfig[];
     /** Adds custom classes to the element. */
     className?: string;
     /** Sets the content of the table. Use TableHead and TableBody */
     children: React.ReactNode;
 }
-export declare const Table: ({ id, testId, className, children, smallViewportVariant, }: Props) => JSX.Element;
+export declare const Table: React.FC<Props>;
 export default Table;
 //# sourceMappingURL=Table.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAStC,oBAAY,oBAAoB;IAC9B;;OAEG;IACH,gBAAgB,qBAAqB;IACrC;;OAEG;IACH,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,KAAK;IACpB,gBAAgB;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;IAC5C,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,+DAMf,KAAK,gBAgBP,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,OAAO,EAAE,UAAU,EAAiB,MAAM,2BAA2B,CAAC;AAItE,oBAAY,oBAAoB;IAC9B,4EAA4E;IAC5E,IAAI,SAAS;IACb,6FAA6F;IAC7F,gBAAgB,qBAAqB;IACrC,sEAAsE;IACtE,gBAAgB,qBAAqB;IACrC,+BAA+B;IAC/B,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,qHAAqH;IACrH,UAAU,EAAE,MAAM,OAAO,UAAU,CAAC;IACpC,oEAAoE;IACpE,OAAO,EAAE,MAAM,OAAO,oBAAoB,CAAC;IAC3C,+FAA+F;IAC/F,eAAe,CAAC,EAAE,MAAM,OAAO,oBAAoB,CAAC;CACrD;AAED,MAAM,WAAW,KAAK;IACpB,gBAAgB;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,iGAAiG;IACjG,oBAAoB,CAAC,EAAE,oBAAoB,GAAG,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;IACpF,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAoCjC,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TableExpandedRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableExpandedRow/TableExpandedRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,KAAK;IACpB,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,eAAe,EAAE,MAAM,CAAC;IACxB,4BAA4B;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,sFAO1B,KAAK,gBA8BP,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"TableExpandedRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableExpandedRow/TableExpandedRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,KAAK;IACpB,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,eAAe,EAAE,MAAM,CAAC;IACxB,4BAA4B;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,sFAO1B,KAAK,gBAyBP,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TableExpanderCell.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableExpanderCell/TableExpanderCell.tsx"],"names":[],"mappings":";AASA,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,2BAA2B;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,eAAe,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,iBAAiB,gFAM3B,KAAK,gBAgBP,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"TableExpanderCell.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableExpanderCell/TableExpanderCell.tsx"],"names":[],"mappings":";AAQA,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,2BAA2B;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,eAAe,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,iBAAiB,gFAM3B,KAAK,gBAgBP,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/components/Table/TableExpanderCell/TableExpanderCellMobile.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Props } from '../TableRow/TableRow';
+declare type TableExpanderCellMobile = Pick<Props, 'expanded' | 'onClick' | 'hideDetailsText' | 'showDetailsText'>;
+declare const TableExpanderCellMobile: React.FC<TableExpanderCellMobile>;
+export default TableExpanderCellMobile;
+//# sourceMappingURL=TableExpanderCellMobile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableExpanderCellMobile.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAI7C,aAAK,uBAAuB,GAAG,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,SAAS,GAAG,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;AAE3G,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAY9D,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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

@@ -17,6 +17,6 @@ export interface Props {
     /** Sets the cells of the table row element.  */
     children?: React.ReactNode;
 }
-export declare const TableRow: ({ rowKey, hideDetailsText, showDetailsText, expandable, expanded, onClick, className, children, }: Props) => JSX.Element;
+export declare const TableRow: React.FC<Props>;
 export default TableRow;
 //# sourceMappingURL=TableRow.d.ts.map

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;AAS1B,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,sGASlB,KAAK,gBA0CP,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,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"}

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"}],"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"}}}}

package/components/Table/index.js

@@ -1,2 +1,2 @@
-import r,{useRef as b}from"react";import n from"classnames";import e from"./styles.module.scss";import{AnalyticsId as f}from"../../constants.js";import{H as T}from"../../HorizontalScroll.js";import{useSize as d}from"../../hooks/useSize.js";import{T as Y}from"../../TableBody.js";import{T as _,a as $}from"../../TableCell.js";import{T as oo}from"../../TableExpandedRow.js";import{T as ro}from"../../TableExpanderCell.js";import{H as ao,T as lo}from"../../TableHead.js";import{S as io,T as po}from"../../TableHeadCell.js";import{T as co}from"../../TableRow.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../HorizontalScroll/styles.module.scss";import"../../utils/debounce.js";import"../../Button.js";import"../../utils/environment.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../Icons/ChevronUp.js";import"../Icons/ChevronDown.js";import"../Icons/ArrowUp.js";import"../Icons/ArrowDown.js";var x=(o=>(o.horizontalscroll="horizontalscroll",o.block="block",o))(x||{});const Q=function({id:a,testId:l,className:m,children:i,smallViewportVariant:p="horizontalscroll"}){const t=b(null),{width:s=0}=d(t)||{},c=n(e.table,{[e["table--collapse2col"]]:p==="block"},m);return r.createElement(T,{childWidth:s},r.createElement("table",{className:c,id:a,"data-testid":l,"data-analyticsid":f.Table,ref:t},i))};export{ao as HeaderCategory,x as SmallViewportVariant,io as SortDirection,Q as Table,Y as TableBody,_ as TableCell,oo as TableExpandedRow,ro as TableExpanderCell,lo as TableHead,po as TableHeadCell,co as TableRow,$ as TextAlign,Q as default};
+import d,{useRef as T,useState as w}from"react";import z from"classnames";import k from"./styles.module.scss";import{AnalyticsId as C}from"../../constants.js";import{H as x}from"../../HorizontalScroll.js";import{useSize as y}from"../../hooks/useSize.js";import{Breakpoint as m,useBreakpoint as B}from"../../hooks/useBreakpoint.js";import{isTouchDevice as H}from"../../utils/device.js";import{useLayoutEvent as W}from"../../hooks/useLayoutEvent.js";import{T as ur}from"../../TableBody.js";import{T as Tr,a as wr}from"../../TableCell.js";import{T as Cr}from"../../TableExpandedRow.js";import{T as yr}from"../../TableExpanderCell.js";import{H as Hr,T as Wr}from"../../TableHead.js";import{S as Er,T as Rr}from"../../TableHeadCell.js";import{T as Vr}from"../../TableRow.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../HorizontalScroll/styles.module.scss";import"../../utils/debounce.js";import"../../theme/grid.js";import"../../Button.js";import"../../utils/environment.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../Icons/ChevronUp.js";import"../Icons/ChevronDown.js";import"../Icons/ArrowUp.js";import"../Icons/ArrowDown.js";const S=r=>r.variant===t.centeredoverflow||r.variant===t.block,E=r=>k[`table--${r.variant}-${r.breakpoint}`],R=(r,e)=>m[r.breakpoint]-m[e.breakpoint],f=(r,e)=>m[r.breakpoint]>=e,A=(r,e)=>{if(Array.isArray(r))return r.sort(R),r.find(i=>f(i,e));if(r&&f(r,e))return r},V=(r,e,i,p)=>{var s,c;const o=A(r,e),n=H(),l=i<=p;if(!!o)return o.variant===t.centeredoverflow&&!l&&o.fallbackVariant===t.horizontalscroll?{variant:n?t.horizontalscroll:t.none,breakpoint:o.breakpoint}:o.variant===t.centeredoverflow&&!l&&o.fallbackVariant!==t.centeredoverflow?{variant:(s=o.fallbackVariant)!=null?s:t.none,breakpoint:o.breakpoint}:o.variant===t.horizontalscroll&&!n&&o.fallbackVariant===t.centeredoverflow?{variant:l?t.centeredoverflow:t.none,breakpoint:o.breakpoint}:o.variant===t.horizontalscroll&&!n&&o.fallbackVariant!==t.horizontalscroll?{variant:(c=o.fallbackVariant)!=null?c:t.none,breakpoint:o.breakpoint}:o},D=r=>r&&S(r)?E(r):void 0,F=r=>r===t.block||r===t.horizontalscroll,U=r=>({breakpoint:"sm",variant:r});var t=(r=>(r.none="none",r.centeredoverflow="centeredoverflow",r.horizontalscroll="horizontalscroll",r.block="block",r))(t||{});const fr=({id:r,testId:e,className:i,children:p,smallViewportVariant:o="horizontalscroll"})=>{const n=T(null),l=B(),{width:s=0}=y(n)||{},[c,v]=w(window.innerWidth);W(()=>v(window.innerWidth),["resize"],100);const a=F(o)?U(o):V(o,l,s,c),u=D(a),h=z(k.table,u,i),b=d.createElement("table",{className:h,id:r,"data-testid":e,"data-analyticsid":C.Table,ref:n},p);return(a==null?void 0:a.variant)==="horizontalscroll"&&!(a!=null&&a.fallbackVariant)?d.createElement(x,{childWidth:s,testId:"horizontal-scroll"},b):b};export{Hr as HeaderCategory,t as SmallViewportVariant,Er as SortDirection,fr as Table,ur as TableBody,Tr as TableCell,Cr as TableExpandedRow,yr as TableExpanderCell,Wr as TableHead,Rr as TableHeadCell,Vr as TableRow,wr as TextAlign,fr as default};
 //# sourceMappingURL=index.js.map

package/components/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport classNames from 'classnames';\n\nimport tableStyles from './styles.module.scss';\n\nimport { AnalyticsId } from '../../constants';\nimport HorizontalScroll from '../HorizontalScroll';\nimport { useSize } from '../../hooks/useSize';\n\nexport enum SmallViewportVariant {\n  /**\n   * Show horizontal scrollbar when table is too big for the screen\n   */\n  horizontalscroll = 'horizontalscroll',\n  /**\n   * Collapse to two columns on small screens\n   */\n  block = 'block',\n}\n\nexport interface Props {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Type of table view om small devices */\n  smallViewportVariant?: SmallViewportVariant;\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 Table = function Table({\n  id,\n  testId,\n  className,\n  children,\n  smallViewportVariant = SmallViewportVariant.horizontalscroll,\n}: Props) {\n  const tableRef = useRef<HTMLTableElement>(null);\n  const { width: tableWidth = 0 } = useSize(tableRef) || {};\n  const tableClass = classNames(\n    tableStyles['table'],\n    { [tableStyles['table--collapse2col']]: smallViewportVariant === SmallViewportVariant.block },\n    className\n  );\n\n  return (\n    <HorizontalScroll childWidth={tableWidth}>\n      <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table} ref={tableRef}>\n        {children}\n      </table>\n    </HorizontalScroll>\n  );\n};\n\nexport default Table;\n"],"names":["SmallViewportVariant","Table","id","testId","className","children","smallViewportVariant","tableRef","useRef","tableWidth","useSize","tableClass","classNames","tableStyles","React","HorizontalScroll","AnalyticsId"],"mappings":"sxCASY,IAAAA,GAAAA,IAIVA,EAAA,iBAAmB,mBAInBA,EAAA,MAAQ,QAREA,IAAAA,GAAA,CAAA,CAAA,EAwBC,MAAAC,EAAQ,SAAe,CAClC,GAAAC,EACA,OAAAC,EACA,UAAAC,EACA,SAAAC,EACA,qBAAAC,EAAuB,kBACzB,EAAU,CACF,MAAAC,EAAWC,EAAyB,IAAI,EACxC,CAAE,MAAOC,EAAa,GAAMC,EAAQH,CAAQ,GAAK,GACjDI,EAAaC,EACjBC,EAAY,MACZ,CAAE,CAACA,EAAY,wBAAyBP,IAAyB,OAA2B,EAC5FF,CAAA,EAGF,OACGU,EAAA,cAAAC,EAAA,CAAiB,WAAYN,CAAA,EAC3BK,EAAA,cAAA,QAAA,CAAM,UAAWH,EAAY,GAAAT,EAAQ,cAAaC,EAAQ,mBAAkBa,EAAY,MAAO,IAAKT,CAAA,EAClGF,CACH,CACF,CAEJ"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Table/utils.ts","../../../src/components/Table/Table.tsx"],"sourcesContent":["import { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\nimport { BreakpointConfig, SmallViewportVariant } from './Table';\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 === SmallViewportVariant.centeredoverflow || config.variant === SmallViewportVariant.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\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): BreakpointConfig | 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 === SmallViewportVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === SmallViewportVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? SmallViewportVariant.horizontalscroll : SmallViewportVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === SmallViewportVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== SmallViewportVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? SmallViewportVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === SmallViewportVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === SmallViewportVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? SmallViewportVariant.centeredoverflow : SmallViewportVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === SmallViewportVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== SmallViewportVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? SmallViewportVariant.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/** @deprecated Midlertidig, fjernes i v3.0.0 */\nexport const isOldFormat = (x: unknown): x is SmallViewportVariant =>\n  (x as SmallViewportVariant) === SmallViewportVariant.block || (x as SmallViewportVariant) === SmallViewportVariant.horizontalscroll;\n\n/** @deprecated Midlertidig, fjernes i v3.0.0 */\nexport const getBackwardsCompatibleConfig = (variant: SmallViewportVariant): BreakpointConfig => {\n  return {\n    breakpoint: 'sm',\n    variant,\n  };\n};\n","import React, { useRef, useState } from 'react';\nimport classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nimport { AnalyticsId } from '../../constants';\nimport HorizontalScroll from '../HorizontalScroll';\nimport { useSize } from '../../hooks/useSize';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { getBackwardsCompatibleConfig, getCurrentConfig, getBreakpointClass, isOldFormat } from './utils';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\n\nexport enum SmallViewportVariant {\n  /** No handling responsive behaviour. This will be the default in v3.0.0. */\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 SmallViewportVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof SmallViewportVariant;\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  /** @deprecated Rename to breakpointConfig in v3.0.0 and drop support for SmallViewPortVariant */\n  smallViewportVariant?: SmallViewportVariant | 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 Table: React.FC<Props> = ({\n  id,\n  testId,\n  className,\n  children,\n  smallViewportVariant: breakpointConfig = SmallViewportVariant.horizontalscroll,\n}) => {\n  const tableRef = useRef<HTMLTableElement>(null);\n  const breakpoint = useBreakpoint();\n  const { width: tableWidth = 0 } = useSize(tableRef) || {};\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  const currentConfig = isOldFormat(breakpointConfig)\n    ? getBackwardsCompatibleConfig(breakpointConfig)\n    : getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth);\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}>\n      {children}\n    </table>\n  );\n\n  const useHorizontalScroll = currentConfig?.variant === SmallViewportVariant.horizontalscroll && !currentConfig?.fallbackVariant;\n\n  if (useHorizontalScroll) {\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","SmallViewportVariant","mapConfigToClass","styles","sortByBreakpointsDescending","a","b","Breakpoint","isValidForCurrentBreakpoint","breakpoint","getConfigForBreakpoint","x","getCurrentConfig","tableWidth","windowWidth","breakpointConfig","canUseHorizontalScroll","isTouchDevice","canUseCenteredOverflow","_a","_b","getBreakpointClass","isOldFormat","getBackwardsCompatibleConfig","variant","Table","id","testId","className","children","tableRef","useRef","useBreakpoint","useSize","setWindowWidth","useState","useLayoutEvent","currentConfig","breakpointClass","tableClass","classNames","table","React","AnalyticsId","HorizontalScroll"],"mappings":"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"}

package/components/Table/styles.module.scss

@@ -2,161 +2,166 @@
 @import '../../scss/_breakpoints.scss';
 @import '../../scss/_palette.scss';
 @import '../../scss/_font-settings.scss';
+@import '../../scss/_grid.scss';
 
 /* fix outline for Safari */
 table tbody tr {
   outline: 3px solid transparent;
 }
 
-.table {
-  width: 100%;
-  border-collapse: collapse;
+@mixin centeredoverflow {
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+}
 
-  &__expander-cell-mobile {
+@mixin block {
+  .table__cell-expander {
     display: none;
   }
-  &--collapse2col {
-    @media (max-width: map-get($grid-max-breakpoints, sm)) {
-      .table__cell-expander {
-        display: none;
-      }
 
-      .table__head {
-        display: none;
-      }
+  .table__head {
+    display: none;
+  }
 
-      display: block;
-      clear: both;
+  display: block;
+  clear: both;
 
-      tbody,
-      tr,
-      th,
-      td {
-        display: block;
-      }
+  tbody,
+  tr,
+  th,
+  td {
+    display: block;
+  }
 
-      tr {
-        clear: both;
-      }
+  tr {
+    clear: both;
+  }
 
-      select {
-        max-width: 100%;
-      }
+  select {
+    max-width: 100%;
+  }
 
-      th:focus {
-        outline: none;
-        background-color: $blueberry800;
-        text-decoration: underline;
-      }
-      td {
-        position: relative;
-        padding-left: 40%;
-        padding-right: 0;
-        padding-top: 0.75rem;
-        padding-bottom: 0.75rem;
-        float: left;
-        clear: both;
-        width: 100%;
-
-        &:not(.expandable-container) {
-          font-weight: 400;
-        }
-
-        /* Get data from the td-tag attribute "data-label"   and use this to populate :before content */
-        &::before {
-          content: attr(data-label);
-          position: relative;
-          top: 0;
-          left: 0;
-          width: 60%;
-          padding-right: $spacer;
-          white-space: normal;
-          display: block;
-          float: left;
-          word-wrap: break-word;
-          margin-left: -67%;
-          padding-left: 0.75rem;
-          font-weight: 400;
-        }
-      }
+  th:focus {
+    outline: none;
+    background-color: $blueberry800;
+    text-decoration: underline;
+  }
+  td {
+    position: relative;
+    padding-left: 40%;
+    padding-right: 0;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    float: left;
+    clear: both;
+    width: 100%;
+
+    &:not(.expandable-container) {
+      font-weight: 400;
+    }
 
-      .table__expander-cell-mobile {
-        padding-left: 0.75rem;
-      }
+    /* Get data from the td-tag attribute "data-label"   and use this to populate :before content */
+    &::before {
+      content: attr(data-label);
+      position: relative;
+      top: 0;
+      left: 0;
+      width: 60%;
+      padding-right: $spacer;
+      white-space: normal;
+      display: block;
+      float: left;
+      word-wrap: break-word;
+      margin-left: -67%;
+      padding-left: 0.75rem;
+      font-weight: 400;
+    }
+  }
 
-      .table__expander-button-mobile {
-        font-weight: 100;
-        padding-right: 1rem;
-        &:hover {
-          background-color: $blueberry50;
-        }
-        &--expanded {
-          background-color: $blueberry50;
-        }
-      }
+  .table__expander-cell-mobile {
+    padding-left: 0.75rem;
+  }
 
-      .table__expanded-row td {
-        text-align: left;
-        padding: 0.75rem;
-      }
+  .table__expanded-row td {
+    text-align: left;
+    padding: 0.75rem;
+  }
 
-      .table__expanded-row {
-        display: none;
-        &--expanded {
-          display: block;
-        }
-      }
+  .table__expanded-row {
+    display: none;
+    &--expanded {
+      display: block;
+    }
+  }
 
-      .table__cell {
-        border-top: 0;
-        border-bottom: 0;
+  .table__cell {
+    border-top: 0;
+    border-bottom: 0;
 
-        outline: 0;
+    outline: 0;
 
-        &--center {
-          text-align: left;
-        }
-        &--right {
-          text-align: left;
-        }
-      }
-      .table__cell:first-child {
-        border-collapse: collapse;
-        border-top: 1px solid $neutral500;
-      }
-      .table__expanded-row {
-        .table__cell:first-child {
-          border-top: 0;
-        }
-      }
-      .table__row--expandable {
-        .table__cell:nth-child(2) {
-          border-collapse: collapse;
-          border-top: 1px solid $neutral500;
-        }
-      }
+    &--center {
+      text-align: left;
+    }
+    &--right {
+      text-align: left;
+    }
+  }
+  .table__cell:first-child {
+    border-collapse: collapse;
+    border-top: 1px solid $neutral500;
+  }
+  .table__expanded-row {
+    .table__cell:first-child {
+      border-top: 0;
+    }
+  }
+  .table__row--expandable {
+    .table__cell:nth-child(2) {
+      border-collapse: collapse;
+      border-top: 1px solid $neutral500;
+    }
+  }
 
-      tr:last-child .table__cell:last-child {
-        border-bottom: 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__expander-cell-mobile {
+    border-bottom: 1px solid $neutral500;
+    &--expanded {
+      border-bottom: 0;
+    }
+  }
+
+  .table__row--expandable {
+    &:focus-within {
+      outline: none;
+    }
+  }
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
 
-      .table__row--expandable {
-        &:focus-within {
-          outline: none;
-        }
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    &--centeredoverflow-#{$breakpoint} {
+      @include media-breakpoint-down($breakpoint) {
+        @include centeredoverflow;
       }
-      .table__expanded-row-button {
-        display: none;
+    }
+    &--block-#{$breakpoint} {
+      @include media-breakpoint-down($breakpoint) {
+        @include block;
       }
     }
   }
+
+  &__expander-cell-mobile {
+    display: none;
+  }
 }
 
 .table__head {

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

@@ -8,11 +8,8 @@ export type Styles = {
   'table__cell-expander': string;
   'table__expanded-row': string;
   'table__expanded-row--expanded': string;
-  'table__expanded-row-button': string;
   'table__expanded-row-container': string;
   'table__expanded-row-container--open': string;
-  'table__expander-button-mobile': string;
-  'table__expander-button-mobile--expanded': string;
   'table__expander-cell-mobile': string;
   'table__expander-cell-mobile--expanded': string;
   table__head: string;
@@ -26,7 +23,18 @@ export type Styles = {
   'table__row--expandable': string;
   'table__row--expandable--selected': string;
   'table__sort-button': string;
-  'table--collapse2col': string;
+  'table--block-lg': string;
+  'table--block-md': string;
+  'table--block-sm': string;
+  'table--block-xl': string;
+  'table--block-xs': string;
+  'table--block-xxs': string;
+  'table--centeredoverflow-lg': string;
+  'table--centeredoverflow-md': string;
+  'table--centeredoverflow-sm': string;
+  'table--centeredoverflow-xl': string;
+  'table--centeredoverflow-xs': string;
+  'table--centeredoverflow-xxs': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/Table/utils.d.ts

@@ -0,0 +1,21 @@
+import { Breakpoint } from '../../hooks/useBreakpoint';
+import { BreakpointConfig, SmallViewportVariant } from './Table';
+/**
+ * Finn konfigurasjon for nåværende breakpoint og tabellbredde
+ * @param config Konfigurasjon for responsiv oppførsel
+ * @param breakpoint Nåværende breakpoint
+ * @param tableWidth Bredde på tabell i px
+ * @returns Konfigurasjon for responsiv oppførsel
+ */
+export declare const getCurrentConfig: (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint, tableWidth: number, windowWidth: number) => BreakpointConfig | undefined;
+/**
+ * Finn klassenavn for responsiv oppførsel
+ * @param config Konfigurasjon for responsiv oppførsel
+ * @returns Klassenavn
+ */
+export declare const getBreakpointClass: (config?: BreakpointConfig) => string | undefined;
+/** @deprecated Midlertidig, fjernes i v3.0.0 */
+export declare const isOldFormat: (x: unknown) => x is SmallViewportVariant;
+/** @deprecated Midlertidig, fjernes i v3.0.0 */
+export declare const getBackwardsCompatibleConfig: (variant: SmallViewportVariant) => BreakpointConfig;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Table/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAqDjE;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,WACnB,gBAAgB,GAAG,gBAAgB,EAAE,cACjC,UAAU,cACV,MAAM,eACL,MAAM,KAClB,gBAAgB,GAAG,SAsDrB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,YAAa,gBAAgB,KAAG,MAAM,GAAG,SACA,CAAC;AAEzE,gDAAgD;AAChD,eAAO,MAAM,WAAW,MAAO,OAAO,8BAC+F,CAAC;AAEtI,gDAAgD;AAChD,eAAO,MAAM,4BAA4B,YAAa,oBAAoB,KAAG,gBAK5E,CAAC"}

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "The official design system for Helsenorge built with React.",
   "homepage": "https://helsenorge.design",
-  "version": "2.15.0",
+  "version": "2.16.1",
   "author": "Helsenorge",
   "license": "MIT",
   "peerDependencies": {

package/utils/device.d.ts

@@ -0,0 +1,2 @@
+export declare const isTouchDevice: () => boolean;
+//# sourceMappingURL=device.d.ts.map

package/utils/device.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../src/utils/device.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,QAAO,OAEhC,CAAC"}

package/utils/device.js

@@ -0,0 +1,2 @@
+const o=()=>"ontouchstart"in window||navigator.maxTouchPoints>0;export{o as isTouchDevice};
+//# sourceMappingURL=device.js.map

package/utils/device.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"device.js","sources":["../../src/utils/device.ts"],"sourcesContent":["export const isTouchDevice = (): boolean => {\n  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n};\n"],"names":["isTouchDevice"],"mappings":"AAAO,MAAMA,EAAgB,IACpB,iBAAkB,QAAU,UAAU,eAAiB"}